/* ═══════════════════════════════════════════════════════════════
   USW DESIGN TOKENS
═══════════════════════════════════════════════════════════════ */
:root {
    --blue: #002c65;
    --blue-dark: #193f72;
    --blue-grad: radial-gradient(#216a99, #193f72, #193f72);
    --green: #24ad00;
    --yellow: #ffb515;
    --yellow-hover: #ffc954;
    --yellow-active: #e19a00;
    --yellow-title: #ffb515;
    --yellow-grad: radial-gradient(#ffc954, #ffb515, #ffb515);
    --white: #ffffff;
    --page-bg: #fff9ed;
    --card-bg: #f7f9fc;
    --card-border: #ffb515;
    --text: #111111;
    --text-blue: #1b607f;
    --text-muted: #555555;
    --border: #bbbbbb;
    --border-yellow: rgba(255,181,21,0.45);
    --focus-shadow: 0 0 7px #002c65;
    --radius-input: 0.45em;
    --radius-card: 18px;
    --radius-pill: 2em;
    --success-bg: #e6f4ec;
    --success-border: #2d6a4f;
    --error-color: #cc0000;
}

*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

/* ═══════════════════════════════════════════════════════════════
   BASE
═══════════════════════════════════════════════════════════════ */
html, body {
    height: 100%;
    background-color: var(--page-bg);
    color: var(--text);
    font-family: 'Open Sans', Verdana, sans-serif;
    font-size: 16px;
    line-height: 1.55;
}

/* ═══════════════════════════════════════════════════════════════
   PAGE SHELL
═══════════════════════════════════════════════════════════════ */
.page-shell {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

/* ═══════════════════════════════════════════════════════════════
   SITE HEADER
═══════════════════════════════════════════════════════════════ */
.site-header {
    background: var(--blue-grad);
    background-color: var(--blue-dark);
    padding: 0 1.5rem;
    height: 64px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-shrink: 0;
}

    .site-header .usw-logo {
        height: 44px;
        width: auto;
        display: block;
        max-width: 180px;
        object-fit: contain;
    }

    .site-header .header-right {
        font-family: 'Open Sans', sans-serif;
        font-size: 0.72rem;
        font-weight: 300;
        color: rgba(255,255,255,0.65);
        text-align: right;
        line-height: 1.3;
    }

/* ═══════════════════════════════════════════════════════════════
   YELLOW MENU BAR
═══════════════════════════════════════════════════════════════ */
.menu-bar {
    background: var(--yellow-grad);
    background-color: var(--yellow);
    padding: 0.45rem 1.5rem;
    font-family: Oswald, Arial, sans-serif;
    font-variant: all-small-caps;
    font-size: 1rem;
    font-weight: 700;
    color: var(--blue);
    letter-spacing: 0.07em;
    flex-shrink: 0;
}

/* ═══════════════════════════════════════════════════════════════
   CONTENT AREA
═══════════════════════════════════════════════════════════════ */
.page-content {
    flex: 1;
    max-width: 880px;
    width: 100%;
    margin: 0 auto;
    padding: 1.75rem 1.25rem 4rem;
}

/* ═══════════════════════════════════════════════════════════════
   FORM HEADER
═══════════════════════════════════════════════════════════════ */
.form-header {
    text-align: center;
    margin-bottom: 2rem;
    animation: fadeDown 0.5s ease both;
}

.pac-badge {
    display: inline-block;
    background: var(--blue);
    color: var(--yellow);
    font-family: Oswald, Arial, sans-serif;
    font-variant: all-small-caps;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    padding: 0.3em 1.3em;
    border-radius: var(--radius-pill);
    margin-bottom: 0.6em;
}

a {
    border-bottom: 1px dashed;
    text-decoration: none;
}

h1 {
    font-family: Oswald, Arial, sans-serif;
    font-variant: all-small-caps;
    font-weight: 700;
    font-size: clamp(1.7rem, 4.5vw, 2.6rem);
    color: var(--blue);
    line-height: 1.1;
    margin: 0.15em 0 0.2em;
}

    h1 em {
        color: var(--yellow-title);
        font-style: normal;
    }

.header-sub {
    font-size: 0.875rem;
    color: var(--text-muted);
}

/* ═══════════════════════════════════════════════════════════════
   SECTION HEADER — single element that IS both the divider and legend
═══════════════════════════════════════════════════════════════ */
.section-header {
    display: flex;
    align-items: center;
    margin: 2rem 0 0;
}

    .section-header::before,
    .section-header::after {
        content: '';
        flex: 1;
        height: 0;
        border-top: 1px solid var(--border-yellow);
        border-bottom: 1px solid rgba(255,181,21,0.25);
    }

.section-header-label {
    display: inline-flex;
    align-items: center;
    gap: 0.5em;
    background: var(--blue);
    color: var(--yellow);
    font-family: Oswald, Roboto, sans-serif;
    font-variant: all-small-caps;
    font-weight: 700;
    font-size: 0.95rem;
    letter-spacing: 0.07em;
    padding: 0.35em 1.1em;
    border-radius: var(--radius-pill);
    box-shadow: 0 0 0 2px var(--blue);
    white-space: nowrap;
    margin: 0 0.6em;
}

    .section-header-label .step-num {
        background: var(--yellow);
        color: var(--blue);
        font-weight: 900;
        font-size: 0.78em;
        width: 1.6em;
        height: 1.6em;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
        line-height: 1;
    }

/* ═══════════════════════════════════════════════════════════════
   FORM CARD
═══════════════════════════════════════════════════════════════ */
.form-card {
    background: var(--card-bg);
    border: 4px solid var(--card-border);
    border-top-width: 2px;
    border-bottom-width: 2px;
    border-radius: var(--radius-card);
    padding: 1.5rem 1.75rem 1.75rem;
    margin-top: 0.75rem;
    margin-bottom: 0.5rem;
    animation: fadeUp 0.45s ease both;
}

    .form-card:nth-of-type(1) {
        animation-delay: 0.05s;
    }

    .form-card:nth-of-type(2) {
        animation-delay: 0.1s;
    }

    .form-card:nth-of-type(3) {
        animation-delay: 0.15s;
    }

    .form-card:nth-of-type(4) {
        animation-delay: 0.2s;
    }

    .form-card:nth-of-type(5) {
        animation-delay: 0.25s;
    }

/* ═══════════════════════════════════════════════════════════════
   GRID LAYOUTS
═══════════════════════════════════════════════════════════════ */
.grid-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}

.grid-3 {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 1rem;
}

/* ═══════════════════════════════════════════════════════════════
   FIELD
═══════════════════════════════════════════════════════════════ */
.field {
    display: flex;
    flex-direction: column;
    gap: 0.22em;
    margin-bottom: 1rem;
}

    .field:last-child {
        margin-bottom: 0;
    }

label {
    font-family: Oswald, Arial, sans-serif;
    font-size: 0.88rem;
    font-weight: 400;
    color: var(--blue);
}

    label .required {
        color: var(--error-color);
        margin-left: 0.15em;
        font-weight: 700;
    }
    label[for] {
        cursor: pointer;
    }

/* ═══════════════════════════════════════════════════════════════
   INPUTS
═══════════════════════════════════════════════════════════════ */
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="number"],
select,
textarea {
    width: 100%;
    background-color: var(--white);
    border: 2px solid var(--border);
    border-radius: var(--radius-input);
    padding: 0.45em 0.65em;
    font-family: 'Open Sans', Verdana, sans-serif;
    font-size: 1rem;
    color: var(--blue);
    outline: none;
    transition: border-color 0.18s, box-shadow 0.18s;
    -webkit-appearance: none;
    appearance: none;
    height: 2.5em;
}

input[type="checkbox"], input[type="radio"], select {
    cursor: pointer;
}

input[type="number"] {
    -moz-appearance: textfield;
}

    input[type="number"]::-webkit-inner-spin-button,
    input[type="number"]::-webkit-outer-spin-button {
        -webkit-appearance: none;
    }

input:disabled, textarea:disabled, select:disabled {
    background-color: #efefef;
    cursor: not-allowed;
}

::placeholder {
    color: #aaa;
    opacity: 1;
}

input:focus, select:focus, textarea:focus {
    border-color: var(--blue);
    box-shadow: var(--focus-shadow);
    background-color: var(--white);
    outline: none;
}

/* Valid state briefly shows a green border and glow, then fades back to the
   original input border. No animation-fill-mode so the final frame doesn't
   stick and :focus/other states keep working normally once the fade ends. */
.input-valid {
    animation: inputValidFade 1.6s ease-out;
}

@keyframes inputValidFade {
    0% {
        border-color: var(--success-border);
        box-shadow: 0 0 5px rgba(45,106,79,0.3);
    }
    35% {
        border-color: var(--success-border);
        box-shadow: 0 0 5px rgba(45,106,79,0.3);
    }
    100% {
        border-color: var(--border);
        box-shadow: none;
    }
}

.input-invalid {
    border-color: var(--error-color) !important;
    box-shadow: 0 0 5px rgba(204,0,0,0.2) !important;
}

select option {
    background: var(--white);
    color: var(--blue);
}

    /* Blank/placeholder options always render in the same muted color as input placeholders */
    select option[value=""],
    select option.select-placeholder {
        color: #aaa;
    }

/* When the blank option is currently selected, the select itself shows #aaa */
select:has(option[value=""]:checked) {
    color: #aaa;
}

/* Fallback for browsers without :has() — rely on JS to add .select-empty class */
select.select-empty {
    color: #aaa;
}

/* ── Select arrow ────────────────────────────────────────────── */
.select-wrap {
    position: relative;
}

    .select-wrap select {
        padding-right: 2em;
    }

    .select-wrap::after {
        content: '▾';
        position: absolute;
        right: 0.25em;
        top: 50%;
        transform: translateY(-50%);
        color: var(--blue);
        pointer-events: none;
        font-size: 1.5em;
        line-height: 1;
    }

/* ── Amount prefix ───────────────────────────────────────────── */
.amount-wrap {
    position: relative;
    zoom: 2;
}

    .amount-wrap .currency {
        position: absolute;
        left: 0.65em;
        top: 50%;
        transform: translateY(-50%);
        color: var(--blue);
        font-family: Oswald, sans-serif;
        font-size: 1rem;
        font-weight: 700;
        pointer-events: none;
        line-height: 1;
    }

    .amount-wrap input {
        padding-left: 1.35em;
    }

/* ═══════════════════════════════════════════════════════════════
   TOGGLE BUTTONS
═══════════════════════════════════════════════════════════════ */
.freq-group {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5em;
    margin: .5em 0;
}

.gift-type-group, .gift-style-group {
    display: flex;
    gap: 0.5em;
    flex-wrap: wrap;
}

.freq-option, .gift-type-option, .gift-style-option {
    display: none;
}

.freq-label, .gift-type-label, .gift-style-label {
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid var(--border);
    border-radius: var(--radius-input);
    cursor: pointer;
    font-family: Oswald, Arial, sans-serif;
    font-variant: all-small-caps;
    font-size: 1.2rem;
    letter-spacing: 0.05em;
    color: var(--blue);
    background: var(--white);
    transition: border-color 0.18s, background 0.18s, box-shadow 0.18s;
    user-select: none;
    -webkit-user-select: none;
}

.freq-label {
    padding: 0.5em 0.75em;
    text-align: center;
    line-height: 1.2;
    flex: 1 1 calc(33.33% - 0.34em);
    min-width: 7.5em;
}

.gift-type-label {
    padding: 0.5em 1em;
    white-space: nowrap;
}

.gift-style-label {
    min-width: 3.1em;
    height: 3.1em;
}

    .freq-label:hover, .gift-type-label:hover, .gift-style-label:hover {
        border-color: var(--yellow);
        background: #fffaee;
        box-shadow: 0 0 5px rgba(255,181,21,0.35);
    }

.freq-option:checked + .freq-label,
.gift-type-option:checked + .gift-type-label,
.gift-style-option:checked + .gift-style-label {
    background: var(--yellow);
    border-color: var(--blue);
    color: var(--blue);
    font-weight: 700;
    box-shadow: 0 0 7px rgba(0,44,101,0.4);
}

/* ─── Eligibility notices container (above form) ──────────────── */
.eligibility-notices {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    margin-bottom: 1.75rem;
}
    /* Static notices outside the form are always visible — override hidden */
    .eligibility-notices .notice {
        display: flex !important;
    }

/* ═══════════════════════════════════════════════════════════════
   NOTICE / ADVISORY PANELS
═══════════════════════════════════════════════════════════════ */
.notice {
    display: flex;
    gap: 0.75em;
    align-items: flex-start;
    border-radius: var(--radius-input);
    padding: 0.75em 1em;
    font-size: 0.82rem;
    line-height: 1.5;
    /* No margin — spacing is always controlled by the parent container */
}

.notice-icon {
    cursor: default;
    font-size: 1.15em;
    flex-shrink: 0;
    margin-top: 0.05em;
}

.notice-body {
    flex: 1;
}

    .notice-body > strong:first-child {
        display: block;
    }

    .notice-body strong {
        font-weight: 700;
        display: inline;
        margin-bottom: 0.2em;
        font-size: 0.85rem;
    }

.notice-blue {
    background: #deeeff;
    border: 1px solid rgba(0,44,101,0.25);
    border-left: 4px solid var(--blue);
    color: #0f2a54;
}

.notice-yellow {
    background: #fef0c0;
    border: 1px solid rgba(200,140,0,0.45);
    border-left: 4px solid var(--yellow-active);
    color: #4a3000;
}

.notice-purple {
    background: #e8deff;
    border: 1px solid rgba(90,60,160,0.3);
    border-left: 4px solid #7c4dff;
    color: #2d1870;
}

.notice-green {
    background: #e5ffde;
    border: 1px solid rgba(80,160,60,0.3);
    border-left: 4px solid #24ad00;
    color: #0e491b;
}

.notice-red {
    background: #ffdede;
    border: 1px solid rgba(90,60,160,0.3);
    border-left-width: 1px;
    border-left-style: solid;
    border-left-color: rgba(90, 60, 160, 0.3);
    border-left: 4px solid #ff4d4d;
    color: #701818;
}

.notice-tax.hidden, .notice-yellow.hidden, .hidden {
    display: none !important;
}

/* Dynamic cap notice inside a card — needs top spacing from the grid above it */
#capNotice {
    margin-top: 1rem;
}

.amount-limit-bar {
    margin-top: 0.35em;
    font-size: 0.78rem;
    color: var(--text-muted);
    display: none;
}

    .amount-limit-bar.visible {
        display: block;
    }

    .amount-limit-bar .limit-label {
        display: flex;
        justify-content: space-between;
        margin-bottom: 0.2em;
    }

    .amount-limit-bar .limit-track {
        height: 5px;
        background: #e5d9be;
        border-radius: 3px;
        overflow: hidden;
    }

    .amount-limit-bar .limit-fill {
        height: 100%;
        border-radius: 3px;
        background: var(--green);
        transition: width 0.3s, background 0.3s;
    }

        .amount-limit-bar .limit-fill.warn {
            background: var(--yellow-active);
        }

        .amount-limit-bar .limit-fill.danger {
            background: var(--error-color);
        }


.freq-description {
    display: none;
    margin-top: 1rem;
    background: #deeeff;
    border: 1px solid rgba(0,44,101,0.2);
    border-left: 4px solid var(--blue);
    border-radius: var(--radius-input);
    padding: 0.75em 1em;
    animation: fadeUp 0.25s ease both;
}

    .freq-description.visible {
        display: block;
    }

    .freq-description .freq-desc-title {
        font-family: Oswald, Arial, sans-serif;
        font-variant: all-small-caps;
        font-size: 0.9rem;
        font-weight: 700;
        color: var(--blue);
        margin-bottom: 0.25em;
    }

    .freq-description .freq-desc-body {
        font-size: 0.82rem;
        color: var(--text-muted);
        line-height: 1.5;
    }

        .freq-description .freq-desc-body strong {
            color: var(--blue);
            font-weight: 700;
        }

/* ═══════════════════════════════════════════════════════════════
   SUBMIT ERROR BANNER
═══════════════════════════════════════════════════════════════ */
.error-banner {
    display: none;
    background: #fff0f0;
    border: 2px solid var(--error-color);
    border-radius: var(--radius-input);
    padding: 0.75em 1em;
    margin: 1rem 0;
    font-size: 0.85rem;
    color: var(--error-color);
    font-family: 'Open Sans', sans-serif;
    animation: fadeUp 0.25s ease both;
}

    .error-banner.visible {
        display: flex;
        gap: 0.6em;
        align-items: flex-start;
    }

    .error-banner .error-icon {
        font-size: 1.1em;
        flex-shrink: 0;
        margin-top: 0.05em;
    }

    .error-banner ul {
        margin: 0.3em 0 0 1.1em;
        padding: 0;
    }

        .error-banner ul li {
            margin-bottom: 0.2em;
        }

    .error-banner a {
        color: var(--error-color);
        font-weight: 700;
        cursor: pointer;
        font-family: 'Open Sans', sans-serif;
    }

/* Missing field highlight (radio groups / sig) */
.field-missing-label label {
    color: var(--error-color) !important;
}

.field-missing-group {
    border: 2px solid var(--error-color) !important;
    border-radius: var(--radius-input);
    padding: 0.4em;
    box-shadow: 0 0 5px rgba(204,0,0,0.2);
}


/* ─── Uniform-spacing grid sections ───────────────────────────
   All fields inside these containers get their vertical spacing
   from the grid/flex row-gap alone — never from margin-bottom.
   This guarantees pixel-identical gaps at every breakpoint.
─────────────────────────────────────────────────────────────── */
.member-grid,
.employment-grid {
    row-gap: 1rem;
    align-items: start;
}

    .member-grid .field,
    .employment-grid .field {
        margin-bottom: 0;
    }

/* Address uses a flex-column stack so full-width rows and the
   3-col sub-grid all have the same 1rem gap between them.      */
.address-stack {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

    .address-stack .field,
    .address-stack .address-row {
        margin-bottom: 0;
    }

.address-row .field {
    margin-bottom: 0;
}

/* Gift type / gift style fields inside the contribution card */
.gift-type-field {
    margin-top: 1rem;
    margin-bottom: 0;
}

.gift-style-field {
    margin-top: 1rem;
    margin-bottom: 0;
}

/* Gift style group dimmed — both when None is selected and when locked by overlay */
.gift-style-group.disabled-group {
    opacity: 0.35;
    pointer-events: none;
    filter: grayscale(0.4);
}

.field-error {
    font-size: 0.8rem;
    color: var(--error-color);
    display: none;
    margin-top: 0.1em;
}

    .field-error.visible {
        display: block;
    }

/* ── Gift locked state (donation < $20) ───────────────────── */
.gift-locked-overlay {
    position: relative;
}

    .gift-locked-overlay.locked::after {
        content: '';
        position: absolute;
        inset: 0;
        border-radius: var(--radius-input);
        background: rgba(255,249,237,0.78);
        pointer-events: none;
        z-index: 1;
    }

    .gift-locked-overlay.locked .gift-type-group,
    .gift-locked-overlay.locked .gift-style-group {
        opacity: 0.35;
        pointer-events: none;
        filter: grayscale(0.4);
    }

.gift-lock-hint {
    display: flex;
    align-items: center;
    gap: 0.5em;
    font-size: 0.8rem;
    color: #7a6000;
    background: #fffbe6;
    border: 1px solid #e6c800;
    border-radius: 0.4em;
    padding: 0.4em 0.7em;
    margin-top: 0.45em;
}

    .gift-lock-hint .lock-icon {
        flex-shrink: 0;
        font-size: 1em;
    }

    .gift-lock-hint.hidden {
        display: none;
    }

/* ═══════════════════════════════════════════════════════════════
   SIGNATURE PAD
═══════════════════════════════════════════════════════════════ */
.sig-container {
    border: 2px solid var(--border);
    border-radius: var(--radius-input);
    background: #ffffff;
    padding: 3px;
    position: relative;
    transition: border-color 0.18s, box-shadow 0.18s;
}

    .sig-container:focus-within {
        border-color: var(--blue);
        box-shadow: var(--focus-shadow);
    }

#sigCanvas {
    display: block;
    width: 100%;
    height: 195px;
    cursor: crosshair;
    touch-action: none;
    border-radius: 0.3em;
}

.sig-actions {
    display: flex;
    gap: 0.75em;
    margin-top: 0.5em;
    align-items: center;
    flex-wrap: wrap;
}

.sig-hint {
    font-size: 0.82rem;
    color: #bbb;
    pointer-events: none;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    white-space: nowrap;
}

    .sig-hint.hidden {
        display: none;
    }

.btn-clear {
    font-family: Oswald, Arial, sans-serif;
    font-variant: all-small-caps;
    font-size: 0.83rem;
    letter-spacing: 0.06em;
    background: none;
    border: 2px solid var(--border);
    color: var(--text-muted);
    padding: 0.3em 0.9em;
    border-radius: var(--radius-input);
    cursor: pointer;
    transition: border-color 0.18s, color 0.18s;
}

    .btn-clear:hover {
        border-color: var(--error-color);
        color: var(--error-color);
    }

#sigStatus {
    font-size: 0.82rem;
    color: var(--success-border);
    font-weight: 600;
}

/* ═══════════════════════════════════════════════════════════════
   ACKNOWLEDGMENT CHECKBOX
═══════════════════════════════════════════════════════════════ */
.ack-block {
    display: flex;
    gap: 0.85em;
    align-items: flex-start;
    background: #deeeff;
    border: 1px solid rgba(0,44,101,0.25);
    border-left: 4px solid var(--blue);
    border-radius: var(--radius-input);
    padding: 0.9em 1em;
    margin: 1.5rem 0;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
}

    .ack-block:has(#ackCheck:checked) {
        background: #e5ffde;
        border: 1px solid rgba(80,160,60,0.3);
        border-left: 4px solid #24ad00;
    }

    .ack-block.ack-error {
        background: #ffd6d6;
        border-color: var(--error-color);
        border-left-color: var(--error-color);
    }

/* The actual checkbox — hidden, replaced by a custom box */
#ackCheck {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
    pointer-events: none;
}

.ack-box {
    flex-shrink: 0;
    width: 2em;
    height: 2em;
    border: 2px solid var(--border);
    border-radius: 5px;
    background: var(--white);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 0.1em;
    transition: border-color 0.15s, background 0.15s, box-shadow 0.15s;
}

.ack-block:hover .ack-box {
    border-color: var(--blue);
    box-shadow: 0 0 0 3px rgba(0,44,101,0.1);
}

.ack-block:has(#ackCheck:checked) .ack-box {
    background: var(--blue);
    border-color: var(--blue);
    box-shadow: 0 0 0 3px rgba(0,44,101,0.15);
}

.ack-block.ack-error .ack-box {
    border-color: var(--error-color);
}

.ack-checkmark {
    display: none;
    width: 1.1em;
    height: 1.1em;
    stroke: var(--white);
    stroke-width: 2.5;
    fill: none;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.ack-block:has(#ackCheck:checked) .ack-checkmark {
    display: block;
}

.ack-text {
    font-family: 'Open Sans', sans-serif;
    font-size: 0.82rem;
    color: var(--text);
    line-height: 1.55;
}

    .ack-text strong {
        font-weight: 700;
        color: var(--blue);
        display: block;
        margin-bottom: 0.2em;
        font-family: Oswald, Arial, sans-serif;
        font-variant: all-small-caps;
        font-size: 0.9rem;
        letter-spacing: 0.04em;
    }

/* Fallback for browsers without :has() */
.ack-checked .ack-box {
    background: var(--blue);
    border-color: var(--blue);
}

.ack-checked .ack-checkmark {
    display: block;
}

.ack-checked.ack-block {
    background: #fef0c0;
    border-color: rgba(180,130,0,0.5);
    border-left-color: var(--yellow-active);
}


.submit-area {
    margin-top: 2rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75em;
    animation: fadeUp 0.5s 0.3s ease both;
}

.btn-submit {
    display: inline-flex;
    align-items: center;
    gap: 0.6em;
    background-color: var(--yellow);
    color: var(--blue);
    border: 2px solid var(--blue);
    border-radius: 0.5em;
    padding: 0.65em 2.8em;
    font-family: Oswald, Arial, sans-serif;
    font-variant: all-small-caps;
    font-size: 1.15rem;
    font-weight: 700;
    letter-spacing: 0.07em;
    cursor: pointer;
    transition: box-shadow 0.2s, background-color 0.18s, transform 0.15s;
    position: relative;
    overflow: hidden;
}

    .btn-submit::before {
        content: '';
        position: absolute;
        inset: 0;
        background: rgba(255,255,255,0.2);
        transform: translateX(-110%) skewX(-15deg);
        transition: transform 0.35s;
    }

    .btn-submit:hover {
        box-shadow: 0 0 8px var(--blue);
        transform: translateY(-2px);
    }

        .btn-submit:hover::before {
            transform: translateX(120%) skewX(-15deg);
        }

    .btn-submit:active {
        background-color: var(--yellow-active);
        transform: translateY(0);
    }

    .btn-submit:focus {
        box-shadow: 0 0 8px var(--blue);
        outline: none;
    }

    .btn-submit:disabled {
        background-color: #d8ccb0;
        border-color: #b8a880;
        color: #7a6e55;
        cursor: not-allowed;
        box-shadow: none;
        transform: none;
    }

        .btn-submit:disabled::before {
            display: none;
        }

.submit-note {
    font-size: 0.77rem;
    color: var(--text-muted);
    text-align: center;
}

/* ═══════════════════════════════════════════════════════════════
   SUCCESS
═══════════════════════════════════════════════════════════════ */
.success-msg {
    display: none;
    background: var(--success-bg);
    border: 2px solid var(--success-border);
    border-radius: var(--radius-card);
    padding: 1.5em;
    text-align: center;
    margin-top: 1.5em;
    animation: fadeUp 0.4s ease both;
}

    .success-msg h3 {
        font-family: Oswald, Arial, sans-serif;
        font-variant: all-small-caps;
        font-size: 1.35rem;
        color: var(--success-border);
        margin-bottom: 0.4em;
    }

    .success-msg p {
        font-size: 0.88rem;
        color: var(--text-muted);
    }

/* ═══════════════════════════════════════════════════════════════
   FOOTER
═══════════════════════════════════════════════════════════════ */
.site-footer {
    background: var(--blue-grad);
    background-color: var(--blue-dark);
    color: #dde4ee;
    text-align: center;
    font-family: 'Open Sans', sans-serif;
    font-size: 0.75rem;
    padding: 0.65em 1em;
    flex-shrink: 0;
}

    .site-footer a {
        color: #dde4ee;
    }

/* ═══════════════════════════════════════════════════════════════
   ANIMATIONS
═══════════════════════════════════════════════════════════════ */
@keyframes fadeDown {
    from {
        opacity: 0;
        transform: translateY(-14px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes fadeUp {
    from {
        opacity: 0;
        transform: translateY(12px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ═══════════════════════════════════════════════════════════════
   RESPONSIVE BREAKPOINTS
   xs   < 400   — small phones  (SE, Galaxy A)
   sm   400–599 — standard phones (iPhone 14, Pixel 7)
   md   600–767 — large phones / small tablet portrait
   lg   768–979 — tablet portrait (iPad, Surface Go)
   xl   980–1199— tablet landscape / small laptop
   2xl  1200+   — desktop (base styles)
═══════════════════════════════════════════════════════════════ */

/* ── xs: extra-small phones (<400px) ─────────────────────────── */
@media (max-width: 399px) {
    html, body {
        font-size: 13.5px;
    }

    .site-header {
        height: 50px;
        padding: 0 0.85rem;
    }

        .site-header .usw-logo {
            height: 32px;
            max-width: 120px;
        }

        .site-header .header-right {
            display: none;
        }

    .menu-bar {
        font-size: 0.8rem;
        padding: 0.38rem 0.85rem;
    }

    .page-content {
        padding: 1rem 0.7rem 2.5rem;
    }

    .form-card {
        padding: 0.9rem 0.8rem 1rem;
        border-radius: 12px;
    }

    h1 {
        font-size: 1.5rem;
    }

    .pac-badge {
        font-size: 0.68rem;
    }

    .grid-2, .grid-3 {
        grid-template-columns: 1fr;
    }

    .freq-label {
        font-size: 1rem;
        padding: 0.45em 0.5em;
        min-width: 5.5em;
    }

    .gift-style-label {
        width: 2.75em;
        height: 2.75em;
        font-size: 0.78rem;
    }

    .gift-type-label {
        padding: 0.42em 0.65em;
        font-size: 0.78rem;
    }

    input[type="text"],
    input[type="email"],
    input[type="tel"],
    input[type="number"],
    select {
        height: 2.7em;
        font-size: 0.93rem;
    }

    .section-header-label {
        font-size: 0.8rem;
        padding: 0.3em 0.75em;
        margin: 0 0.4em;
    }

        .section-header-label .step-num {
            width: 1.4em;
            height: 1.4em;
        }

    .btn-submit {
        width: 100%;
        justify-content: center;
        font-size: 0.98rem;
        padding: 0.62em 1em;
    }
}

/* ── sm: standard phones (400–599px) ─────────────────────────── */
@media (min-width: 400px) and (max-width: 599px) {
    html, body {
        font-size: 14.5px;
    }

    .site-header {
        height: 54px;
        padding: 0 1rem;
    }

        .site-header .usw-logo {
            height: 36px;
            max-width: 145px;
        }

        .site-header .header-right {
            font-size: 0.67rem;
        }

    .menu-bar {
        font-size: 0.86rem;
        padding: 0.42rem 1rem;
    }

    .page-content {
        padding: 1.2rem 0.85rem 3rem;
    }

    .form-card {
        padding: 1.05rem 0.95rem 1.15rem;
        border-radius: 14px;
    }

    h1 {
        font-size: 1.6rem;
    }

    .grid-2, .grid-3 {
        grid-template-columns: 1fr;
    }

    .gift-style-label {
        width: 2.9em;
        height: 2.9em;
    }

    input[type="text"],
    input[type="email"],
    input[type="tel"],
    input[type="number"],
    select {
        height: 2.6em;
    }

    .btn-submit {
        width: 100%;
        justify-content: center;
        font-size: 1.02rem;
    }
}

/* ── md: large phones / small tablet portrait (600–767px) ──────── */
@media (min-width: 600px) and (max-width: 767px) {
    html, body {
        font-size: 15px;
    }

    .site-header {
        height: 56px;
    }

        .site-header .usw-logo {
            height: 38px;
        }

    .menu-bar {
        font-size: 0.93rem;
    }

    .page-content {
        padding: 1.35rem 1rem 3.25rem;
    }

    .form-card {
        padding: 1.2rem 1.15rem 1.3rem;
    }

    /* 2-col grids hold on wider phones; 3-col collapses to 2 */
    .grid-3 {
        grid-template-columns: 1fr 1fr;
    }

    .btn-submit {
        min-width: 55%;
    }
}

/* ── lg: tablet portrait (768–979px) ─────────────────────────── */
@media (min-width: 768px) and (max-width: 979px) {
    html, body {
        font-size: 15.5px;
    }

    .site-header {
        height: 58px;
    }

        .site-header .usw-logo {
            height: 40px;
        }

    .page-content {
        padding: 1.5rem 1.2rem 3.5rem;
    }

    .form-card {
        padding: 1.3rem 1.45rem 1.5rem;
    }
}

/* ── xl: tablet landscape / small laptop (980–1199px) ──────────── */
@media (min-width: 980px) and (max-width: 1199px) {
    .site-header {
        height: 60px;
    }

    .page-content {
        padding: 1.6rem 1.5rem 4rem;
    }
}

/* ── 2xl: wide desktop (1200px+) ────────────────────────────────── */
@media (min-width: 1200px) {
    .page-content {
        max-width: 940px;
    }
}

/* ── Touch accessibility: 44 × 44 minimum tap targets (≤767px) ── */
@media (max-width: 767px) {
    .freq-label,
    .gift-type-label,
    .btn-clear,
    .btn-submit {
        min-height: 44px;
    }

    .gift-style-label {
        min-width: 44px;
        min-height: 44px;
        width: auto;
        height: 44px;
        padding: 0 0.4em;
    }
}

/* ── Landscape phones: restore 2-col layout when wider ─────────── */
@media (max-width: 599px) and (orientation: landscape) {
    .grid-2 {
        grid-template-columns: 1fr 1fr;
    }

    .site-header {
        height: 44px;
    }

        .site-header .usw-logo {
            height: 28px;
        }
}


/* ═══════════════════════════════════════════════════════════════
   SUBMIT STATUS PAGE  (submit-status.aspx)
═══════════════════════════════════════════════════════════════ */

/* Status banner inside form-card */
.status-banner {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    padding-bottom: 1.25rem;
    margin-bottom: 1.25rem;
    border-bottom: 2px solid var(--border-yellow);
}

.status-icon { font-size: 2.2rem; line-height: 1; flex-shrink: 0; margin-top: 2px; }

.status-heading {
    margin: 0 0 0.25em;
    font-family: Oswald, Arial, sans-serif;
    font-variant: all-small-caps;
    font-size: 1.45rem;
    font-weight: 700;
    letter-spacing: 0.04em;
}
.status-banner.success .status-heading { color: var(--success-border); }
.status-banner.failure .status-heading { color: var(--error-color); }
.status-banner.warning .status-heading { color: var(--yellow-active); }

.status-sub {
    margin: 0;
    font-size: 0.9rem;
    color: var(--text-muted);
    line-height: 1.55;
}

/* Submission detail table */
.status-detail {
    border: 1px solid var(--border-yellow);
    border-radius: var(--radius-input);
    padding: 0.85rem 1.1rem;
    margin-bottom: 1.25rem;
}
.status-detail table { width: 100%; border-collapse: collapse; }
.status-detail td {
    padding: 0.35em 0;
    font-size: 0.92rem;
    color: var(--text);
    vertical-align: top;
    border-bottom: 1px solid var(--border-yellow);
}
.status-detail tr:last-child td { border-bottom: none; }
.status-detail td:first-child {
    font-family: Oswald, Arial, sans-serif;
    font-weight: 400;
    font-size: 0.82rem;
    letter-spacing: 0.03em;
    color: var(--text-muted);
    width: 40%;
}

/* Failure reason box */
.reason-box {
    background: #fff5f5;
    border: 2px solid #f5c0c0;
    border-radius: var(--radius-input);
    padding: 0.85rem 1.1rem;
    margin-bottom: 1.25rem;
    font-size: 0.92rem;
    color: #6b1515;
    line-height: 1.6;
}
.reason-box strong {
    display: block;
    margin-bottom: 0.3em;
    font-family: Oswald, Arial, sans-serif;
    font-variant: all-small-caps;
    font-size: 0.85rem;
    letter-spacing: 0.05em;
    color: var(--error-color);
}

/* Status action buttons */
.status-actions { display: flex; gap: 0.75rem; flex-wrap: wrap; justify-content: space-between; }

.btn-status-primary {
    display: inline-flex;
    align-items: center;
    gap: 0.5em;
    background-color: var(--yellow);
    color: var(--blue);
    border: 2px solid var(--blue);
    border-radius: 0.5em;
    padding: 0.6em 1.8em;
    font-family: Oswald, Arial, sans-serif;
    font-variant: all-small-caps;
    font-size: 1.05rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-decoration: none;
    cursor: pointer;
    transition: box-shadow 0.2s, transform 0.15s;
}
    .btn-status-primary.small {
        gap: 0.25em;
        border: 1px solid var(--blue);
        border-radius: 0.25em;
        padding: 0.3em .8em;
        font-size: 1rem;
        letter-spacing: 0;
    }
.btn-status-primary:hover {
    box-shadow: 0 0 8px var(--blue);
    transform: translateY(-2px);
    border-bottom: 2px solid var(--blue);
}

.btn-status-secondary {
    display: inline-flex;
    align-items: center;
    gap: 0.5em;
    background: transparent;
    color: var(--blue);
    border: 2px solid var(--blue);
    border-radius: 0.5em;
    padding: 0.6em 1.8em;
    font-family: Oswald, Arial, sans-serif;
    font-variant: all-small-caps;
    font-size: 1.05rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-decoration: none;
    cursor: pointer;
    transition: background 0.15s, color 0.15s, box-shadow 0.2s, transform 0.15s;
}
.btn-status-secondary:hover {
    background: var(--blue);
    color: var(--white);
    box-shadow: 0 0 8px var(--blue);
    transform: translateY(-2px);
    border-bottom: 2px solid var(--blue);
}

@media (max-width: 599px) {
    .status-banner  { gap: 0.65rem; padding-bottom: 1rem; margin-bottom: 1rem; }
    .status-heading { font-size: 1.2rem; }
    .status-actions { flex-direction: column; }
    .btn-status-primary,
    .btn-status-secondary { justify-content: center; width: 100%; }
}


/* ═══════════════════════════════════════════════════════════════
   BLAZOR ADDITIONS
═══════════════════════════════════════════════════════════════ */

/* Blazor ValidationMessage renders a <div> — style it like .field-error */
.validation-message {
    font-size: 0.8rem;
    color: var(--error-color);
    margin-top: 0.1em;
}

/* Signature container error state */
.sig-container.sig-error {
    border-color: var(--error-color);
    box-shadow: 0 0 5px rgba(204,0,0,0.25);
}

/* Ack checkbox hidden (Blazor renders it, we hide it like the vanilla version) */
#ackCheck {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
    pointer-events: none;
}

/* ═══════════════════════════════════════════════════════════════
   HOISTED FROM PAGE <style> BLOCKS
   Patterns in this section originated in the per-page <style>
   blocks of default.aspx, lookup.aspx, and payroll-deduction.aspx,
   and were duplicated or obviously reusable. Hoisted here so every
   page shares a single source of truth; per-page blocks can now
   drop these rules without visual change.
═══════════════════════════════════════════════════════════════ */

/* ── ASP.NET validator messages ─────────────────────────────────
   ASP.NET validators render as inline <span>. Display is NOT set
   here — Display="Dynamic" on the server control manages show/hide
   via inline styles. Inside a .field (flex-direction:column) the
   span naturally flows below the input when shown. */
.requiredField,
.invalidField {
    font-size: 0.78rem;
    color: var(--error-color);
    font-family: 'Open Sans', sans-serif;
    margin-top: 0.15em;
    font-weight: 600;
}

/* ── Generic inline error message (e.g. search-result errors) ─── */
.error-message,
#errorMessage {
    color: var(--error-color);
    font-family: Oswald, serif;
    font-size: 18px;
}

/* ═══════════════════════════════════════════════════════════════
   RADIOBUTTONLIST TOGGLE GROUPS  (server-rendered)
   Visual twin of the vanilla .freq-label / .gift-type-label /
   .gift-style-label patterns, but for ASP.NET RadioButtonList,
   which renders <span><input/><label/></span>. display:contents
   on the wrapper+span unwraps that extra markup so the <label>
   becomes a direct flex child of the group. JS toggles the
   .rbl-checked class onto the active <label>.
═══════════════════════════════════════════════════════════════ */
.freq-rbl,       .freq-rbl       span,
.gift-type-rbl,  .gift-type-rbl  span,
.gift-style-rbl, .gift-style-rbl span,
.donation-rbl,   .donation-rbl   span { display: contents; }

.freq-rbl       input[type="radio"],
.gift-type-rbl  input[type="radio"],
.gift-style-rbl input[type="radio"],
.donation-rbl   input[type="radio"] { display: none; }

/* Shared label base */
.freq-rbl label,
.gift-type-rbl label,
.gift-style-rbl label,
.donation-rbl label {
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid var(--border);
    border-radius: var(--radius-input);
    cursor: pointer;
    font-family: Oswald, Arial, sans-serif;
    font-variant: all-small-caps;
    letter-spacing: 0.05em;
    color: var(--blue);
    background: var(--white);
    transition: border-color 0.18s, background 0.18s, box-shadow 0.18s;
    user-select: none;
    -webkit-user-select: none;
    font-size: 1.2rem;
}

/* Per-control-type size/shape overrides */
.freq-rbl label {
    padding: 0.5em 0.75em;
    text-align: center;
    line-height: 1.2;
    flex: 1 1 calc(33.33% - 0.34em);
    min-width: 7.5em;
}

.gift-type-rbl label {
    padding: 0.5em 1em;
    white-space: nowrap;
}

    .gift-style-rbl label {
        min-width: 3.1em;
        height: 3.1em;
        padding: 0 .25em;
    }

.donation-rbl label {
    padding: 0.5em 1em;
    flex: 1 1 calc(25% - 0.4em);
    min-width: 5.5em;
    font-size: 1.3rem;
}

/* Hover */
.freq-rbl       label:hover,
.gift-type-rbl  label:hover,
.gift-style-rbl label:hover,
.donation-rbl   label:hover {
    border-color: var(--yellow);
    background: #fffaee;
    box-shadow: 0 0 5px rgba(255,181,21,0.35);
}

/* Selected */
.freq-rbl       label.rbl-checked,
.gift-type-rbl  label.rbl-checked,
.gift-style-rbl label.rbl-checked,
.donation-rbl   label.rbl-checked {
    background: var(--yellow);
    border-color: var(--blue);
    color: var(--blue);
    font-weight: 700;
    box-shadow: 0 0 7px rgba(0,44,101,0.4);
}

/* Donation-amount RBL container (lookup.aspx) */
.donation-group {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5em;
    margin: 0.5em 0;
}

/* Gift label below required donation threshold — dimmed, non-interactive */
.gift-type-rbl  label.disabled-amount,
.gift-style-rbl label.disabled-amount {
    opacity: 0.38;
    cursor: not-allowed;
    filter: grayscale(0.5);
}

    .gift-type-rbl  label.disabled-amount:hover,
    .gift-style-rbl label.disabled-amount:hover {
        border-color: var(--border);
        background: var(--white);
        box-shadow: none;
    }

/* Style not applicable to the currently-selected gift type */
.gift-style-rbl label.style-unavailable { display: none !important; }

/* Gift hint body (lock icon + requirements list) */
#giftHint { align-items: flex-start; }

.gift-hint-body {
    display: flex;
    flex-direction: column;
    gap: 0.35em;
}

.gift-req-list {
    margin: 0;
    padding-left: 1.25em;
    list-style: disc;
}

    .gift-req-list:empty { display: none; }

    .gift-req-list li {
        margin: 0.15em 0;
        line-height: 1.35;
    }

/* RBL touch tap-target minimums — mirrors the vanilla-radio block above */
@media (max-width: 767px) {
    .freq-rbl label {
        min-height: 44px;
        font-size: 1rem;
        padding: 0.45em 0.5em;
        min-width: 5.5em;
    }

    .gift-style-rbl label {
        min-width: 44px;
        min-height: 44px;
        width: auto;
        height: 44px;
        padding: 0 0.4em;
        font-size: 0.78rem;
    }

    .gift-type-rbl label {
        padding: 0.42em 0.65em;
        font-size: 0.78rem;
        min-height: 44px;
    }
}

@media (max-width: 599px) {
    .donation-rbl label {
        min-height: 44px;
        font-size: 1rem;
        padding: 0.45em 0.6em;
    }
}

/* ═══════════════════════════════════════════════════════════════
   AUTOCOMPLETE DROPDOWN
   Generic dropdown rendered as a sibling of a text input (e.g.
   the employer lookup on payroll-deduction.aspx). The keyboard
   navigation state is signalled by JS via .keyboard-selected.
═══════════════════════════════════════════════════════════════ */
.autocomplete-dropdown {
    background: var(--white);
    border: 2px solid var(--blue);
    border-top: none;
    border-radius: 0 0 var(--radius-input) var(--radius-input);
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
    max-height: 200px;
    overflow-y: auto;
}

    .autocomplete-dropdown div:hover { background: #f0f0f0; }
    .autocomplete-dropdown div:last-child { border-bottom: none; }
    .autocomplete-dropdown div.keyboard-selected { background: #e0e0e0; }

/* ═══════════════════════════════════════════════════════════════
   METHOD-CHOICE BUTTONS  (default.aspx)
   Oversized, high-emphasis buttons for picking between flows.
   Shares the shimmer/elevation vocabulary with .btn-submit so the
   visual language stays consistent across the site.
═══════════════════════════════════════════════════════════════ */
.choice-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
    margin-top: 1.5rem;
}

.choice-card {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    background: var(--card-bg);
    border: 4px solid var(--card-border);
    border-top-width: 2px;
    border-bottom-width: 2px;
    border-radius: var(--radius-card);
    padding: 1.75rem 1.5rem;
    text-align: center;
    animation: fadeUp 0.45s ease both;
}

    .choice-card:nth-child(1) { animation-delay: 0.08s; }
    .choice-card:nth-child(2) { animation-delay: 0.18s; }

.btn-choice {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.35em;
    width: 100%;
    padding: 1.5em 1em;
    border-radius: 0.65em;
    border: 2px solid var(--blue);
    font-family: Oswald, Arial, sans-serif;
    font-variant: all-small-caps;
    font-weight: 700;
    font-size: 1.65rem;
    letter-spacing: 0.07em;
    text-decoration: none;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    transition: box-shadow 0.2s, transform 0.15s, background-color 0.18s;
    min-height: 130px;
}

    .btn-choice::before {
        content: '';
        position: absolute;
        inset: 0;
        background: rgba(255,255,255,0.22);
        transform: translateX(-110%) skewX(-15deg);
        transition: transform 0.35s;
    }

    .btn-choice:hover::before { transform: translateX(120%) skewX(-15deg); }

    .btn-choice:hover {
        box-shadow: 0 0 14px rgba(0,44,101,0.35);
        transform: translateY(-3px);
    }

    .btn-choice:active { transform: translateY(0); }

    .btn-choice:focus {
        outline: none;
        box-shadow: 0 0 0 3px rgba(0,44,101,0.25);
    }

/* Yellow variant — primary action (e.g. Payroll Deduction) */
.btn-choice-yellow {
    background-color: var(--yellow);
    color: var(--blue);
}

    .btn-choice-yellow:hover  { background-color: var(--yellow-hover); }
    .btn-choice-yellow:active { background-color: var(--yellow-active); }

/* Blue variant — secondary action (e.g. Credit Card) */
.btn-choice-blue {
    background-color: var(--blue);
    color: var(--white);
    border-color: var(--blue-dark);
}

    .btn-choice-blue:hover  { background-color: var(--blue-dark); }
    .btn-choice-blue:active { background-color: #122f56; }

.btn-choice-icon {
    font-size: 2rem;
    line-height: 1;
    display: block;
}

.choice-desc {
    margin-top: 1rem;
    font-size: 0.84rem;
    color: var(--text-muted);
    line-height: 1.55;
    flex: 1;
}

    .choice-desc strong {
        display: block;
        font-family: Oswald, Arial, sans-serif;
        font-variant: all-small-caps;
        font-size: 0.9rem;
        color: var(--blue);
        margin-bottom: 0.2em;
        letter-spacing: 0.04em;
    }

.choice-legal { margin-top: 1.5rem; }

@media (max-width: 599px) {
    .choice-grid { grid-template-columns: 1fr; }
    .btn-choice  { font-size: 1.4rem; min-height: 110px; }
}

@media (max-width: 767px) {
    .btn-choice { min-height: 100px; }
}

/* ═══════════════════════════════════════════════════════════════
   DISCLAIMER LIST
   Generic small-print bullet list used below form cards.
═══════════════════════════════════════════════════════════════ */
.disclaimer-list {
    list-style: disc;
    padding-left: 1.5em;
    margin: 0;
}

    .disclaimer-list li {
        font-size: 0.82rem;
        color: var(--text-muted);
        margin-bottom: 0.35em;
        line-height: 1.5;
        font-family: 'Open Sans', sans-serif;
    }

        .disclaimer-list li:last-child { margin-bottom: 0; }

/* ═══════════════════════════════════════════════════════════════
   UTILITY TEXT LINKS
   Textual "back / change / manual entry" links used across pages,
   using the shared dashed-underline idiom.
═══════════════════════════════════════════════════════════════ */
.btn-back-link {
    font-family: Oswald, sans-serif;
    font-variant: all-small-caps;
    font-size: 0.88rem;
    color: var(--text-muted);
    letter-spacing: 0.04em;
    border: none;
    background: none;
    cursor: pointer;
    padding: 0;
    text-decoration: none;
    border-bottom: 1px dashed var(--border);
}

    .btn-back-link:hover {
        color: var(--blue);
        border-bottom-color: var(--blue);
    }

a.manualform,
a.redirect {
    font-family: Oswald, sans-serif;
    font-variant: all-small-caps;
    font-size: 0.88rem;
    color: var(--blue);
    letter-spacing: 0.04em;
    border-bottom: 1px dashed;
}

/* ═══════════════════════════════════════════════════════════════
   RECURRING-DONATION CHECKBOX WRAP
   Inline checkbox + small-caps label that keeps the native
   checkbox appearance (unlike the custom .ack-block styling).
═══════════════════════════════════════════════════════════════ */
.recurring-wrap {
    margin-top: 1rem;
    display: flex;
    align-items: center;
    gap: 0.5em;
    font-family: Oswald, sans-serif;
    font-variant: all-small-caps;
    font-size: 0.95rem;
    color: var(--blue);
}

    .recurring-wrap input[type="checkbox"] {
        width: auto;
        height: auto;
        -webkit-appearance: checkbox;
        appearance: checkbox;
        cursor: pointer;
    }