/* A form section is a card: <app-form-section> also emits .c-card, which supplies the border,
   radius, padding and spacing. These rules only lay out the title, description and fields. */
@layer components {
    .app-form-section {
        display: block;
        width: 100%;
        max-width: var(--measure-content);
    }
    .app-form-section-heading {
        margin: 0;
        font-size: var(--fs-body-lg);
        font-weight: 600;
        color: var(--color-ink);
    }
    .app-form-section-description {
        margin: var(--space-1) 0 0;
        font-size: var(--fs-body-sm);
        color: var(--color-ink-soft);
    }
    .app-form-section-content {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        align-items: flex-start;
        justify-content: flex-start;
        gap: var(--space-3);
        width: 100%;
        margin-top: var(--space-4);
    }
    /* Fields fill their container in at most two columns, each at least 12rem, so they fall to
       one column wherever two would be cramped — a phone, or a narrow panel on a wide screen. A
       hidden field drops out of the flow and the rest close up. auto-fill, not auto-fit, so a
       field alone on its row keeps its column's width instead of stretching across the row. */
    .app-field-grid {
        --field-grid-min: 12rem;
        --field-grid-columns: 2;
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(max(var(--field-grid-min),
            calc((100% - (var(--field-grid-columns) - 1) * var(--space-4)) / var(--field-grid-columns))), 1fr));
        gap: var(--space-4);
        align-items: start;
        width: 100%;
    }
    .app-field-grid--three {
        --field-grid-min: 9rem;
        --field-grid-columns: 3;
    }
    .app-field-grid__wide {
        grid-column: 1 / -1;
    }
    /* A line under a field saying what to enter or where to find it. */
    .app-field-hint {
        margin: var(--space-1) 0 0;
        font-size: var(--fs-ui-sm);
        color: var(--color-ink-mute);
    }
    /* Groups of fields separated by hairlines, the first one ruled off from the section heading. */
    .app-field-rows {
        width: 100%;
    }
    .app-field-rows > * {
        padding-block: var(--space-4);
        border-top: 1px solid var(--color-line);
    }
    .app-field-rows > :last-child {
        padding-bottom: 0;
    }
    /* A question answered by a set of buttons rather than a single input, labelled like a field. */
    .app-field-question {
        display: block;
        margin-bottom: var(--space-2);
        font-size: var(--fs-ui);
        font-weight: 600;
        color: var(--color-ink);
    }
    .app-form-section-eyebrow {
        margin: 0 0 var(--space-2);
        font-family: var(--font-mono);
        font-size: var(--fs-caption);
        letter-spacing: .08em;
        text-transform: uppercase;
        color: var(--color-ink-mute);
    }
}
@layer legacy {
.app-form-section-subheading {
    color: var(--app-form-subheading-color, black);
    border-bottom: 1px solid var(--app-brand-color, darkgray);
    width:100%;
    margin: 0;
    padding-top: 5px;
    padding-left: 5px;
    padding-bottom: 5px;
}
.app-form-field-group {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: flex-start;
    width: 100%;
    gap: 10px;
}
.app-form-field-group-title {
    border-bottom: 1px solid var(--app-brand-color, darkgray);
    font-weight: 600;
    width: 100%;
    padding: 5px 0 5px 0;
    margin: 0px;
}
.app-form-field-label {
    font-size: 14px;
}
.app-form-checkbox-label {
    font-size: 14px;
}
.app-form-field-row {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: flex-start;
    width: 100%;
    gap: 10px;
}
.app-form-question {
    width: 100%;
}
.app-form-question-text {
    font-weight: 600;
    padding: 5px 0 5px 0;
}
.app-form-question .e-auto-width {
    width: unset !important;
}
.app-form-question-textarea {
    resize: none;
    width: 100%;
}
.app-form-dialog {
}
.app-form-error {
    color: var(--app-error-color, red);
    font-weight: 600;
}
.app-form-error-container {
    display: block;
    margin-top: 4px;
    font-size: 12px;
    line-height: 1.5;
    color: #d32f2f; /* Syncfusion's default error red */
}
.app-phone-input-container {
    position: relative; /* ensure positioning context for dropdown */
}
.app-phone-input-container .iti__country-list {
    top: 100% !important; /* push below the input */
    left: 0 !important; /* align with input’s left edge */
}
/* Number + Usage + Type laid out in a row that wraps on narrow screens
   (replaces the old fixed-px widths). The number field grows; the two
   selects stay compact. */
.app-phone-fields {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: var(--space-3);
    width: 100%;
}
.app-phone-fields__number {
    flex: 1 1 12rem; /* grow, ~192px floor before wrapping */
    min-width: 12rem;
}
.app-phone-fields__select {
    flex: 0 0 auto;
}
/* intl-tel-input wraps the native input in a .iti element — make it fill the
   app-textbox so the flag/dial-code + input span the field width. */
.app-phone-input-container .iti {
    display: block;
    width: 100%;
}

/* Display field classes */
.app-field-wrapper {
    display: flex;
    flex-direction: column;
    font-size: 14px;
    font-weight: normal;
    gap: 4px;
}
.app-field-label {
}
.app-field-value {
    margin: 0px;
}

.app-switch-container {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: flex-start;
    font-size: 14px;
    font-weight: normal;
    gap: 8px;
    margin: 5px 5px 5px 5px;
}
}