/* Membership Form — Multi-step form styles */

.membership-form {
    /* 60rem is the previous 960px at a 16px root, so nothing moves at the
       default size. In rem because the cap otherwise stays 960px while the
       text doubles: at 200% the frame asked for no more room than at 100%,
       and the sidebar labels ran out of it. */
    max-width: 60rem;
    margin: 0 auto;
    scroll-margin-top: 10rem;
    width: 100%;
    /* Lets the layout below react to the width this frame actually has. A
       media query cannot: the window stays 1440px wide however large the text
       gets, so the one-column switch never fired. `em` in a media query is no
       help either — there it resolves against the browser's base size, not
       against the html font-size the preference changes. */
    container-type: inline-size;
    container-name: membership-form;
}

/* .form-step-card / .form-step-card__header / .form-step-card__highlight
   moved to q4u_base's shared Resources/Public/Css/form-step-card.css
   (DS-PROC-002) — loaded via <f:asset.css> alongside this file. */

/* Form labels: regular weight (not bold) — Open Sans only ships 300/700 */
.membership-form .form-label {
    font-weight: 300;
}

/* Required field indicator — WCAG 1.4.3 compliant in light + dark mode */
.membership-form .required-indicator {
    color: var(--bs-body-color);
    margin-inline-start: 0.15em;
}

/* Required field legend */
.membership-form .required-legend {
    font-size: 0.875rem;
    color: var(--bs-secondary-color);
    margin-bottom: 1rem;
}

/* ── Sidebar Layout ─────────────────────────────────────────────── */
.membership-form__layout {
    display: flex;
    gap: 2rem;
    align-items: flex-start;
}

.membership-form__content {
    flex: 1;
    min-width: 0;
    /* 45rem = the previous 720px at a 16px root. Same reason as the frame:
       a fixed cap would hold the column at 720px while the text doubles. */
    max-width: 45rem;
}

.membership-form__sidebar {
    /* 16.25rem = the previous 260px at a 16px root. Fixed, the sidebar kept
       its width while the text doubled, so the step labels had about 68px of
       inner room for words like "Zusammenfassung". */
    width: 16.25rem;
    flex-shrink: 0;
    position: sticky;
    top: 6rem;
    background: rgba(var(--bs-emphasis-color-rgb), 0.04);
    border: 1px solid rgba(var(--bs-emphasis-color-rgb), 0.08);
    border-radius: var(--bs-border-radius);
    padding: 1.25rem;
}

/* .form-progress__title moved to q4u_base's shared form-step-card.css
   (DS-PROC-002). */

/* ── Sidebar: Progress bar ───────────────────────────────────── */
.form-progress__bar .progress {
    height: 4px;
    border-radius: 2px;
    margin-bottom: 0.75rem;
}

.form-progress__bar .progress-bar {
    transition: width 0.3s ease;
}

/* ── Sidebar: Step list ──────────────────────────────────────── */
.form-progress__list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.form-progress__step {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.5rem 0.625rem;
    border-radius: var(--bs-border-radius);
    color: var(--bs-secondary-color);
    font-size: 0.875rem;
    line-height: 1.3;
    transition: background-color 0.15s ease;
}

/* ── Step icon (circle) ──────────────────────────────────────── */
.form-progress__icon {
    width: 1.5rem;
    height: 1.5rem;
    border-radius: 50%;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: 2px solid var(--bs-secondary-color);
    transition: all 0.2s ease;
}

/* Completed: green checkmark */
.form-progress__step--completed .form-progress__icon {
    background: var(--bs-success);
    border-color: var(--bs-success);
}

.form-progress__step--completed .form-progress__icon::after {
    content: '';
    width: 0.5rem;
    height: 0.3rem;
    border-left: 2px solid #fff;
    border-bottom: 2px solid #fff;
    transform: rotate(-45deg) translateY(-1px);
}

.form-progress__step--completed .form-progress__label {
    color: var(--bs-body-color);
}

/* Active: primary ring */
.form-progress__step--active .form-progress__icon {
    background: transparent;
    border-color: var(--bs-success);
    box-shadow: inset 0 0 0 2px var(--bs-success);
}

.form-progress__step--active .form-progress__label {
    color: var(--bs-body-color);
    font-weight: 600;
}

.form-progress__step--active {
    background: rgba(var(--bs-emphasis-color-rgb), 0.04);
}

/* Upcoming: gray */
.form-progress__label {
    color: var(--bs-secondary-color);
    /* A flex item refuses to shrink below its content by default, and these
       labels are single long German words. `anywhere` rather than
       `break-word`: only `anywhere` lets the break opportunities count
       towards the min-content width, which is exactly what has to shrink. */
    min-width: 0;
    overflow-wrap: anywhere;
}

/* ── Clickable visited steps ─────────────────────────────────── */
.form-progress__step--clickable {
    cursor: pointer;
}

.form-progress__step--clickable:hover {
    background: rgba(var(--bs-emphasis-color-rgb), 0.06);
}

.form-progress__step--clickable:focus-visible {
    outline: 2px solid var(--bs-primary);
    outline-offset: 2px;
}

/* ── Not enough room side by side: sidebar collapses to top bar ──
   Was `@media (max-width: 767.98px)`. Measured on the unchanged stylesheet,
   the frame is 516px wide at the last window that stacked and 696px at the
   first that did not, so any threshold in between reproduces today's switch
   exactly; 37.5rem (600px at a 16px root) sits in the middle of that gap.
   Being a container query it now also fires when the text is large rather
   than the window narrow, which is the case the media query could not see. */
@container membership-form (max-width: 37.5rem) {
    .membership-form__layout {
        flex-direction: column;
        gap: 0;
    }

    .membership-form__content {
        width: 100%;
        max-width: none;
    }

    .membership-form__sidebar {
        order: -1;
        width: 100%;
        position: static;
        border-radius: var(--bs-border-radius) var(--bs-border-radius) 0 0;
        padding: 1rem;
        margin-bottom: 1rem;
    }

    .form-progress__list {
        flex-direction: row;
        flex-wrap: wrap;
        gap: 0.375rem;
    }

    .form-progress__step {
        padding: 0.25rem 0.5rem;
        font-size: 0.8125rem;
    }

    .form-progress__label {
        display: none;
    }

    .form-progress__step--active .form-progress__label {
        display: inline;
    }

    .form-progress__icon {
        width: 1.25rem;
        height: 1.25rem;
    }
}

/* Step transitions */
.membership-form__step {
    animation: fadeIn 0.2s ease;
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Price display */
.membership-form__price-display {
    border-left: 3px solid var(--bs-primary);
}

/* Tariff overview card */
.membership-form__tariff-card {
    background-color: rgba(var(--bs-emphasis-color-rgb), 0.04);
    color: var(--bs-body-color);
    border: 1px solid rgba(var(--bs-emphasis-color-rgb), 0.08);
    border-radius: 0.5rem;
    padding: 1.25rem;
}

.membership-form__tariff-card .table {
    margin-bottom: 0;
}

.membership-form__tariff-card .table td:last-child {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.membership-form__tariff-card .table tfoot td {
    font-weight: 700;
    border-top: 2px solid var(--bs-border-color);
}

/* Family member accordion */
.membership-form__family-member {
    border-left: 3px solid var(--bs-info);
    transition: border-color 0.2s ease;
}

.membership-form__family-member.active {
    border-left-color: var(--bs-primary);
}

.membership-form__family-header {
    cursor: pointer;
    user-select: none;
}

.membership-form__family-header .fw-semibold {
    font-weight: 600;
}

.membership-form__family-body {
    overflow: hidden;
    transition: max-height 0.3s ease;
}

.membership-form__family-body[aria-hidden="true"] {
    max-height: 0;
    padding-top: 0;
    padding-bottom: 0;
}

/* Address field reveal transition */
.membership-form [data-address-fields] {
    transition: opacity 0.2s ease;
}

.membership-form [data-address-fields][hidden] {
    display: none;
}

/* Inline validation — hint text */
.membership-form .form-hint {
    color: var(--bs-secondary-color);
    font-size: 0.8125rem;
    margin-top: 0.25rem;
    line-height: 1.4;
}

/* Inline validation — valid state (green border as supplementary cue) */
.membership-form .is-valid {
    border-color: var(--bs-success);
}

.membership-form .is-valid:focus {
    border-color: var(--bs-success);
    box-shadow: 0 0 0 0.2rem rgba(var(--bs-success-rgb), 0.25);
}

.membership-form .valid-feedback {
    display: none;
}

/* Radio labels: no color change — error text below is the indicator */
.membership-form .form-check-input.is-valid ~ .form-check-label {
    color: inherit;
}

/* Inline validation — invalid state (red border as supplementary cue).
   The control class in each compound selector is load-order defence, not noise.
   Bare `.membership-form .is-invalid` is specificity 0-2-0 and loses to two
   later rules of the very same weight: `.membership-form .form-control` /
   `.form-select` at :526 and `.membership-form .form-check-input` at :544 in
   this file, plus q4u_base's `[data-bs-theme="dark"] .form-control` (also
   0-2-0) in the compiled theme CSS. Adding the control class lifts these to
   0-3-0 / 0-3-1, so the invalid border wins on specificity and no longer
   depends on which stylesheet the browser loaded last. Do not simplify the
   selectors back to `.is-invalid` — that is the bug this replaced. */
.membership-form .form-control.is-invalid,
.membership-form .form-select.is-invalid,
.membership-form .form-check-input.is-invalid,
.membership-form .is-invalid {
    border-color: var(--bs-danger);
}

.membership-form .form-control.is-invalid:focus,
.membership-form .form-select.is-invalid:focus,
.membership-form .form-check-input.is-invalid:focus,
.membership-form .is-invalid:focus {
    border-color: var(--bs-danger);
    box-shadow: 0 0 0 0.2rem rgba(var(--bs-danger-rgb), 0.25);
}

/* Filled invalid text: --bs-danger is tuned for borders/icons against the
   page background, not guaranteed 4.5:1 for body text on the control's own
   background in every theme/mode. Keep the field's normal, already-AA text
   color instead of tinting entered text red. */
.membership-form .form-control.is-invalid,
.membership-form .form-control:invalid {
    color: var(--bs-body-color);
}

/* Error text: body color for guaranteed contrast, icon as non-color indicator */
.membership-form .invalid-feedback {
    display: none;
    color: inherit;
    font-size: 0.8125rem;
    margin-top: 0.25rem;
    font-weight: 600;
}

.membership-form .invalid-feedback::before {
    content: '\26A0\00a0';
}

.membership-form .is-invalid ~ .invalid-feedback {
    display: block;
}

/* Radio-group error message (e.g. gender): ensureErrorElement() appends it as
   a flex item into the option row itself, so without an explicit full-width
   basis it gets squeezed into whatever space the options leave over. */
.membership-form .d-flex.gap-3 {
    flex-wrap: wrap;
}

.membership-form .d-flex.gap-3 > .invalid-feedback {
    flex: 1 1 100%;
}

/* Radio labels: no color change — error text below is the indicator */
.membership-form .form-check-input.is-invalid ~ .form-check-label {
    color: inherit;
}

/* Keep hint visible when error is shown */
.membership-form .is-invalid ~ .form-hint,
.membership-form .is-valid ~ .form-hint {
    display: block;
}

/* Step-gate: disabled Next button — clickable to reveal errors */
.membership-form [data-action="next-step"].disabled {
    opacity: 0.65;
    cursor: not-allowed;
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
    .membership-form .invalid-feedback {
        transition: none;
    }
    .membership-form__step {
        animation: none;
    }
    .form-progress__icon,
    .form-progress__step {
        transition: none;
    }
}

/* Summary section */
[data-summary] dt {
    font-weight: 600;
}

[data-summary] dd {
    margin-bottom: 0.25rem;
}

[data-summary] .btn-edit {
    font-size: 0.875rem;
}

/* Summary section cards */
.membership-form__summary-section {
    border-bottom: 1px solid var(--bs-border-color);
    padding-bottom: 1rem;
    margin-bottom: 1rem;
}

.membership-form__summary-section:last-child {
    border-bottom: none;
    margin-bottom: 0;
}

/* ==========================================================================
   Dark Mode — autocontrast for all text elements
   Uses Bootstrap 5.3 CSS variables that adapt to [data-bs-theme="dark"]
   ========================================================================== */

/* Global: all text + native form controls auto-adapt to dark mode */
.membership-form {
    color: var(--bs-body-color);
    color-scheme: light dark;
}

/* Headings — force body-color, override --bs-heading-color: inherit chain */
.membership-form h2,
.membership-form h3,
.membership-form .h5,
.membership-form h5,
.membership-form legend {
    color: var(--bs-body-color);
}

/* Legend (fieldset label) — also needs regular weight */
.membership-form legend.form-label {
    font-weight: 300;
}

/* Cards: rgba overlay adapts to any body background (like shop checkout) */
.membership-form .card {
    background-color: rgba(var(--bs-emphasis-color-rgb), 0.04);
    color: var(--bs-body-color);
    border-color: rgba(var(--bs-emphasis-color-rgb), 0.08);
}

.membership-form .card-body {
    color: var(--bs-body-color);
}

/* Tariff/price summary card — slightly stronger overlay for visual hierarchy */
.membership-form__price-summary {
    background-color: rgba(var(--bs-emphasis-color-rgb), 0.06) !important;
    color: var(--bs-body-color);
}

.membership-form__price-summary h3 {
    color: var(--bs-body-color);
}

.membership-form__price-summary .table {
    color: var(--bs-body-color);
}

/* Alert overrides for dark mode contrast */
.membership-form .alert {
    color: var(--bs-body-color);
}

/* Summary section text */
.membership-form [data-summary-section] {
    color: var(--bs-body-color);
}

.membership-form [data-summary-section] h3 {
    color: var(--bs-body-color);
}

.membership-form [data-summary] dt,
.membership-form [data-summary] dd {
    color: var(--bs-body-color);
}

/* Buttons — ensure outline buttons are visible */
.membership-form .btn-outline-secondary {
    color: var(--bs-body-color);
    border-color: var(--bs-border-color);
}

/* Form controls — WCAG 1.4.11: 3:1 contrast for UI components */
.membership-form .form-control,
.membership-form .form-select {
    color: var(--bs-body-color);
    background-color: var(--bs-body-bg);
    border-color: var(--bs-secondary-color);
    color-scheme: light dark;
}

/* Input group text */
.membership-form .input-group-text {
    color: var(--bs-body-color);
    background-color: rgba(var(--bs-emphasis-color-rgb), 0.04);
    border-color: rgba(var(--bs-emphasis-color-rgb), 0.08);
}

/* Form text / hints */
.membership-form .form-text {
    color: var(--bs-secondary-color);
}

/* Check inputs — WCAG 1.4.11: 3:1 contrast for UI components */
.membership-form .form-check-input {
    border-color: var(--bs-secondary-color);
}

/* Check labels */
.membership-form .form-check-label {
    color: var(--bs-body-color);
}

/* Text utilities override */
.membership-form .text-muted {
    color: var(--bs-secondary-color) !important;
}

/* Browser autofill — prevent white override on themed backgrounds */
.membership-form input:-webkit-autofill,
.membership-form input:-webkit-autofill:hover,
.membership-form input:-webkit-autofill:focus,
.membership-form select:-webkit-autofill {
    -webkit-text-fill-color: var(--bs-body-color);
    -webkit-box-shadow: 0 0 0 1000px var(--bs-body-bg) inset;
    transition: background-color 5000s ease-in-out 0s;
}

/* ═══════════════════════════════════════════════
   Regional Group Finder — radio card selection
   ═══════════════════════════════════════════════ */

.membership-form .rgf-radio-card {
    display: block;
    padding: 0.875rem 1rem;
    border: 2px solid rgba(var(--bs-emphasis-color-rgb), 0.08);
    border-radius: var(--bs-border-radius);
    background: rgba(var(--bs-emphasis-color-rgb), 0.02);
    cursor: pointer;
    transition: border-color 0.15s ease, background-color 0.15s ease;
    margin-bottom: 0.5rem;
}

.membership-form .rgf-radio-card:hover {
    border-color: rgba(var(--bs-primary-rgb), 0.3);
    background: rgba(var(--bs-primary-rgb), 0.03);
}

.membership-form .rgf-radio-card:focus-within {
    outline: 2px solid var(--bs-primary);
    outline-offset: 2px;
}

.membership-form .rgf-radio-card--selected {
    border-color: rgba(var(--bs-primary-rgb), 0.4);
    background: rgba(var(--bs-primary-rgb), 0.04);
}

/* Radio indicator circle */
.membership-form .rgf-radio-card__indicator {
    width: 20px;
    height: 20px;
    min-width: 20px;
    border-radius: 50%;
    border: 2px solid var(--bs-secondary-color);
    margin-top: 2px;
    transition: border-color 0.15s ease;
}

.membership-form .rgf-radio-card--selected .rgf-radio-card__indicator {
    border-color: var(--bs-primary);
    border-width: 6px;
}

/* Distance badge */
.membership-form .rgf-radio-card__distance {
    font-size: 0.8125rem;
    font-weight: 600;
    flex-shrink: 0;
}

/* Manual search section */
.membership-form .rgf-manual-search {
    border-top: 1px solid rgba(var(--bs-emphasis-color-rgb), 0.08);
    padding-top: 1rem;
}

/* Reduced motion for finder cards */
@media (prefers-reduced-motion: reduce) {
    .membership-form .rgf-radio-card {
        transition: none;
    }
    .membership-form .rgf-radio-card__indicator {
        transition: none;
    }
}