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

.donation-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: donation-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 */
.donation-form .form-label {
    font-weight: 300;
}

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

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

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

.donation-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;
}

.donation-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.9375rem;
    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 donation-form (max-width: 37.5rem) {
    .donation-form__layout {
        flex-direction: column;
        gap: 0;
    }

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

    .donation-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 */
.donation-form__step {
    animation: donationFadeIn 0.2s ease;
}

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

/* Amount pills — flex-wrap radio buttons */
[data-amount-options] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    justify-content: center;
}

.donation-form__amount-option {
    position: relative;
}

.donation-form__amount-option input[type="radio"] {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.donation-form__amount-option label {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.625rem 1.25rem;
    min-height: 2.75rem;
    border: 2px solid var(--bs-border-color);
    border-radius: 50rem;
    cursor: pointer;
    text-align: center;
    font-weight: 600;
    white-space: nowrap;
    transition: border-color 0.15s, background-color 0.15s, color 0.15s;
}

.donation-form__amount-option label:hover {
    border-color: var(--bs-primary);
    background-color: rgba(var(--bs-primary-rgb), 0.05);
}

.donation-form__amount-option input[type="radio"]:checked + label {
    border-color: var(--bs-primary);
    background-color: var(--bs-primary);
    color: var(--bs-on-primary, #fff);
}

.donation-form__amount-option input[type="radio"]:focus-visible + label {
    outline: 2px solid var(--bs-primary);
    outline-offset: 2px;
}

/* Custom amount toggle — distinct from preset pills */
.donation-form__amount-option--custom label {
    border-style: dashed;
    font-weight: 400;
}

/* Payment panels */
.donation-form [data-payment-panel] {
    display: none;
}

.donation-form [data-payment-panel].active {
    display: block;
}

/* Bank details display card */
.donation-form__bank-details {
    background: rgba(var(--bs-emphasis-color-rgb), 0.06);
    color: var(--bs-body-color);
    border-left: 3px solid var(--bs-primary);
    padding: 1rem 1.25rem;
    border-radius: 0.25rem;
}

/* Inline validation — hint text */
.donation-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) */
.donation-form .is-valid {
    border-color: var(--bs-success);
}

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

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

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

/* Inline validation — invalid state (red border as supplementary cue) */
.donation-form .is-invalid {
    border-color: var(--bs-danger);
}

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

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

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

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

/* Custom amount: the input is wrapped in .input-group, so its .invalid-feedback
   sibling isn't a sibling of the input itself — the ~ combinator above can't
   reach it. */
.donation-form .input-group:has(.is-invalid) ~ .invalid-feedback {
    display: block;
}

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

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

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

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

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

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

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

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

/* Responsive */
@media (max-width: 575.98px) {
    .donation-form__indicators {
        gap: 0.25rem;
    }
}

/* Print: show only the bank details heading + card */
@media print {
    /* Hide non-essential page elements */
    header, footer, nav:not(.donation-form nav), aside,
    .donation-form__progress,
    .donation-form__indicators,
    .donation-form .alert,
    .donation-form__nav {
        display: none !important;
    }

    /* Hide all steps except bank-details-display */
    .donation-form form > .donation-form__step:not([data-step="bank-details-display"]) {
        display: none !important;
    }

    /* Ensure bank-details-display and all ancestors are visible */
    [data-step="bank-details-display"] {
        animation: none !important;
        position: static !important;
        display: block !important;
        visibility: visible !important;
    }

    [data-step="bank-details-display"] h2 {
        display: block !important;
        visibility: visible !important;
        margin-bottom: 1rem;
    }

    [data-step="bank-details-display"] .card {
        visibility: visible !important;
        border: 1px solid #ccc !important;
        box-shadow: none !important;
    }

    [data-step="bank-details-display"] .card * {
        visibility: visible !important;
    }

    [data-step="bank-details-display"] .donation-form__nav {
        display: none !important;
    }
}

/* ==========================================================================
   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 */
.donation-form {
    color: var(--bs-body-color);
    color-scheme: light dark;
}

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

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

/* Cards: rgba overlay adapts to any body background (like shop checkout) */
.donation-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);
}

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

/* Bank details display card */
.donation-form__bank-details {
    background: rgba(var(--bs-emphasis-color-rgb), 0.06);
    color: var(--bs-body-color);
}

/* Alert overrides */
.donation-form .alert {
    color: var(--bs-body-color);
}

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

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

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

/* Buttons */
.donation-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 */
.donation-form .form-control,
.donation-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 */
.donation-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 */
.donation-form .form-text {
    color: var(--bs-secondary-color);
}

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

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

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

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
    .donation-form__step {
        animation: none;
    }

    .form-progress__bar .progress-bar {
        transition: none;
    }

    .form-progress__icon,
    .form-progress__step {
        transition: none;
    }

    .donation-form .invalid-feedback {
        transition: none;
    }
}