/* Society Management — frontend layout (components live in assets/components/) */
.sm-app--front {
    width: 100%;
    max-width: none;
    box-sizing: border-box;
    color: var(--sm-text, var(--sm-ink));
    font-family: var(--sm-font);
}

.sm-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    border: 0;
    border-radius: 10px;
    background: linear-gradient(145deg, var(--sm-accent), var(--sm-accent-dark));
    color: #fff;
    font: inherit;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
    box-shadow: 0 4px 12px color-mix(in srgb, var(--sm-accent) 22%, transparent);
}

.sm-btn:hover { filter: brightness(1.03); color: #fff; }

.sm-btn--sm {
    padding: 7px 12px;
    border-radius: var(--sm-radius-sm, 8px);
    font-size: 13px;
    line-height: 1.3;
    box-shadow: none;
}

.sm-btn--ghost {
    background: transparent;
    color: var(--sm-accent);
    border: 1px solid color-mix(in srgb, var(--sm-accent) 35%, #fff);
    box-shadow: none;
}

.sm-btn--ghost:hover,
.sm-btn--ghost:focus-visible {
    filter: none;
    color: var(--sm-accent);
    background: color-mix(in srgb, var(--sm-accent) 8%, #fff);
    border-color: color-mix(in srgb, var(--sm-accent) 45%, #fff);
}

.sm-card {
    padding: 20px;
    border: 1px solid var(--sm-line);
    border-radius: var(--sm-radius);
    background: var(--sm-surface);
    box-shadow: var(--sm-shadow);
}

.sm-form-grid {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 12px;
}

.sm-form-grid .sm-col-12 { grid-column: span 12; }
.sm-form-grid .sm-col-6 { grid-column: span 6; }
.sm-form-grid .sm-col-4 { grid-column: span 4; }

@media (max-width: 782px) {
    .sm-form-grid .sm-col-6,
    .sm-form-grid .sm-col-4 { grid-column: span 12; }
}

.sm-section-title {
    grid-column: span 12;
    margin: 8px 0 0;
    font-size: 16px;
    font-weight: 700;
    color: var(--sm-ink);
}

/* Section cards shared by signup + profile shortcodes */
.sm-form-card {
    padding: 16px 18px 6px;
    border: 1px solid var(--sm-line);
    border-radius: var(--sm-radius-sm);
    background: var(--sm-soft);
}

.sm-form-card__title {
    margin: 0 0 12px;
    padding: 0 0 8px;
    border-bottom: 1px solid var(--sm-line);
    font-size: 15px;
    font-weight: 700;
    color: var(--sm-ink);
}

.sm-form-card__grid { gap: 2px 14px; }

.sm-form-card .sm-field { gap: 4px; margin-bottom: 8px; }

.sm-form-card .sm-field > label,
.sm-form-card .sm-field__label {
    font-size: 13px;
    font-weight: 600;
    color: var(--sm-ink);
}

/* Tighter control sizing (keeps horizontal padding for phone flag / select arrow) */
.sm-app .sm-form-card .sm-field :is(input:not([type="file"]):not([type="hidden"]):not([type="radio"]):not([type="checkbox"]), select, textarea) {
    min-height: 36px;
    padding-block: 6px;
    font-size: 14px;
}

.sm-app .sm-form-card .sm-field textarea { min-height: 72px; }