/* ---------------------------------------------------------------------------
   Copyright (c) 2026 Paul Bradley. All rights reserved.
   Proprietary and confidential. Unauthorized copying, modification, or
   distribution of this file, via any medium, is strictly prohibited.
   Licensed, not sold, to the Arkansas Baptist State Convention under a
   separate written agreement. See LICENSE at the repository root.
   ---------------------------------------------------------------------------
   Shared styles for the signed-out public pages (default.aspx sign-in and
   fees.aspx). Loaded AFTER master.css so these win the cascade, the same
   ordering the rules had when they were inline in default.aspx.
   Bump the ?v= stamp on both pages whenever this file changes.
   --------------------------------------------------------------------------- */

/* ======================================================
   DESIGN TOKENS
   ====================================================== */
:root {
    --ss-teal: #1B7A82;
    --ss-teal-dark: #155E63;
    --ss-teal-soft: #e6f4f5;
    --ss-orange: #E39A2E;
    --ss-orange-soft: #fdefdc;
    --ss-ink: #0C3A3D;
    --ss-ink-2: #1f2d3d;
    --ss-muted: #5c6b7a;
    --ss-line: #e6ebf0;
    --ss-line-soft: #f1f4f7;
    --ss-bg: #fafbfc;
    --ss-shadow-sm: 0 1px 2px rgba(10, 22, 40, 0.04), 0 1px 3px rgba(10, 22, 40, 0.06);
    --ss-shadow-md: 0 4px 8px rgba(10, 22, 40, 0.04), 0 12px 24px rgba(10, 22, 40, 0.08);
    --ss-shadow-lg: 0 8px 16px rgba(10, 22, 40, 0.06), 0 24px 48px rgba(10, 22, 40, 0.10);
}

/* ======================================================
   BASE
   ====================================================== */
.ss-default-page {
    font-family: 'Inter Tight', -apple-system, BlinkMacSystemFont, sans-serif;
    color: var(--ss-ink);
    background: var(--ss-bg);
    min-height: 100vh;
    padding: 0;
    margin: 0;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.ss-default-page * {
    box-sizing: border-box;
}

/* ======================================================
   HERO
   ====================================================== */
.ss-hero {
    position: relative;
    padding: 2.75rem 1.5rem 2.5rem;
    overflow: hidden;
    background:
        radial-gradient(ellipse 80% 50% at 50% -10%, rgba(75, 170, 178, 0.18), transparent 60%),
        radial-gradient(ellipse 60% 40% at 85% 20%, rgba(229, 142, 38, 0.10), transparent 55%),
        linear-gradient(180deg, #ffffff 0%, var(--ss-bg) 100%);
}

/* Subtle grid overlay for that SaaS feel */
.ss-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(var(--ss-line-soft) 1px, transparent 1px),
        linear-gradient(90deg, var(--ss-line-soft) 1px, transparent 1px);
    background-size: 48px 48px;
    mask-image: radial-gradient(ellipse 60% 50% at 50% 0%, black 30%, transparent 75%);
    -webkit-mask-image: radial-gradient(ellipse 60% 50% at 50% 0%, black 30%, transparent 75%);
    opacity: 0.5;
    pointer-events: none;
}

.ss-hero-inner {
    position: relative;
    max-width: 1040px;
    margin: 0 auto;
    text-align: center;
}

/* Headline block stays a readable measure even though the hero is wide. */
.ss-hero-head {
    max-width: 720px;
    margin: 0 auto;
}

/* ONE column, always: sign in first, camp weeks below it.
   Side by side, these two cards were never the same height - the sign-in card
   carries a form, a Google button and a create-account link, while the status
   card is a short list - so the right-hand column ended hundreds of pixels
   short and the row read as unfinished. Stacked, each card is as tall as it
   needs to be and the page has one clear order to read in. */
.ss-hero-cols {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
    align-items: start;
    /* Wide enough that the content inside each card can run across the page
       instead of down it: the email/password pair, the two sign-in routes and
       the camp weeks all go two-up above 700px, which is what keeps this from
       being a very tall, very narrow ribbon in the middle of a wide screen. */
    max-width: 760px;
    margin: 0 auto;
    text-align: left;
    animation: ss-fade-up 0.7s cubic-bezier(0.16, 1, 0.3, 1) 0.2s both;
}

.ss-col-side {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

/* The cards fill the (now wider) single column rather than capping at 480px,
   which is what lets their contents sit two-up instead of stacking. */
.ss-col-main,
.ss-col-side {
    width: 100%;
    margin-left: auto;
    margin-right: auto;
}

/* Status badge above the headline. The pulsing dot only rides along when
   registration is actually open (.is-live). */
.ss-hero-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ss-teal-dark);
    background: var(--ss-teal-soft);
    border: 1px solid rgba(75, 170, 178, 0.25);
    padding: 0.4rem 0.85rem;
    border-radius: 999px;
    margin-bottom: 1.25rem;
    animation: ss-fade-up 0.7s cubic-bezier(0.16, 1, 0.3, 1) 0.05s both;
}

.ss-hero-eyebrow.is-muted {
    color: #7a4a13;
    background: var(--ss-orange-soft);
    border-color: #fde0bd;
}

.ss-hero-eyebrow .ss-pulse {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--ss-teal);
    box-shadow: 0 0 0 0 rgba(75, 170, 178, 0.6);
    animation: ss-pulse 2s ease-out infinite;
}

.ss-hero h1 {
    font-family: 'Fraunces', Georgia, serif;
    font-weight: 500;
    font-size: clamp(2rem, 3.4vw, 2.75rem);
    line-height: 1.08;
    letter-spacing: -0.025em;
    color: var(--ss-ink);
    margin: 0 0 0.7rem;
    font-variation-settings: "opsz" 96;
    animation: ss-fade-up 0.7s cubic-bezier(0.16, 1, 0.3, 1) 0.1s both;
}

.ss-hero h1 em {
    font-style: italic;
    font-weight: 400;
    color: var(--ss-teal-dark);
    font-variation-settings: "opsz" 144;
}

.ss-hero p.lede {
    font-size: 1.02rem;
    line-height: 1.55;
    color: var(--ss-muted);
    max-width: 540px;
    margin: 0 auto 2rem;
    animation: ss-fade-up 0.7s cubic-bezier(0.16, 1, 0.3, 1) 0.15s both;
}

/* ======================================================
   LOGIN CARD
   ====================================================== */
.ss-login-card {
    background: #ffffff;
    border: 1px solid var(--ss-line);
    border-radius: 16px;
    box-shadow: var(--ss-shadow-md);
    padding: 1.75rem;
    position: relative;
}

.ss-login-card::before {
    content: "";
    position: absolute;
    inset: -1px;
    border-radius: 16px;
    padding: 1px;
    background: linear-gradient(180deg, rgba(75, 170, 178, 0.4), transparent 50%);
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
}

.ss-login-header {
    text-align: center;
    margin-bottom: 1.5rem;
}

.ss-login-title {
    font-family: 'Inter Tight', sans-serif;
    font-size: 1.35rem;
    font-weight: 600;
    letter-spacing: -0.015em;
    color: var(--ss-ink);
    margin: 0 0 0.25rem;
}

.ss-login-sub {
    font-size: 0.92rem;
    color: var(--ss-muted);
    margin: 0;
}

.ss-field {
    margin-bottom: 1rem;
    text-align: left;
}

/* ---- Two-up on a wide card -------------------------------------------
   Everything below runs the card's content ACROSS rather than DOWN once
   there is room for it. One breakpoint drives all three: the email and
   password pair, the Google / create-account row, and the camp weeks. It is
   a container-width judgement, and this stack is capped at 760px, so a plain
   min-width query is honest here. */
@media (min-width: 700px) {
    .ss-field-pair {
        display: grid;
        grid-template-columns: 1fr 1fr;
        column-gap: 1rem;
    }

    .ss-alt-row {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
        column-gap: 1.5rem;
        align-items: start;
    }

    /* Weeks two-up. The dashed rule under each row would leave a stray line
       under the final pair, so drop it from the last two rather than only
       the last one. */
    .ss-status-list {
        display: grid;
        grid-template-columns: 1fr 1fr;
        column-gap: 1.5rem;
    }

    .ss-status-row:nth-last-child(-n+2) {
        border-bottom: none;
    }
}

.ss-field label {
    display: block;
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--ss-ink-2);
    margin-bottom: 0.4rem;
    letter-spacing: -0.005em;
}

.ss-field input[type=text],
.ss-field input[type=email],
.ss-field input[type=password] {
    width: 100%;
    font-family: inherit;
    font-size: 0.95rem;
    color: var(--ss-ink);
    background: #ffffff;
    border: 1px solid var(--ss-line);
    border-radius: 10px;
    padding: 0.75rem 0.9rem;
    transition: border-color 0.15s, box-shadow 0.15s, background 0.15s;
    outline: none;
}

.ss-field input:hover {
    border-color: #c9d2dc;
}

.ss-field input:focus {
    border-color: var(--ss-teal);
    box-shadow: 0 0 0 3px rgba(75, 170, 178, 0.15);
    background: #ffffff;
}

.ss-validation {
    font-size: 0.82rem;
    color: #c1361f;
    margin-top: 0.35rem;
    display: block;
}

.ss-form-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin: 0.25rem 0 1.25rem;
}

.ss-remember {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.86rem;
    color: var(--ss-muted);
    cursor: pointer;
    user-select: none;
}

/* Same pill-toggle idiom as the rest of the site. */
.ss-remember input[type=checkbox] {
    -webkit-appearance: none;
    appearance: none;
    box-sizing: border-box;
    flex-shrink: 0;
    width: 2.2em;
    height: 1.25em;
    margin: 0;
    background-color: #cbd5e1;
    border: 0;
    border-radius: 2em;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23fff'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: left center;
    background-size: 1.25em 1.25em;
    transition: background-position .15s ease-in-out, background-color .15s ease-in-out;
    box-shadow: inset 0 0 0 1px rgba(0,0,0,.12);
    cursor: pointer;
}

.ss-remember input[type=checkbox]:checked {
    background-color: var(--ss-teal);
    background-position: right center;
}

.ss-remember input[type=checkbox]:focus {
    outline: 0;
    box-shadow: 0 0 0 .2rem rgba(27, 122, 130, .25);
}

.ss-forgot-link {
    background: none;
    border: none;
    color: var(--ss-teal-dark);
    font-size: 0.86rem;
    font-weight: 500;
    cursor: pointer;
    padding: 0;
    text-decoration: none;
}

.ss-forgot-link:hover {
    color: var(--ss-ink);
    text-decoration: underline;
}

.ss-btn-primary {
    width: 100%;
    font-family: inherit;
    font-size: 0.95rem;
    font-weight: 600;
    color: #ffffff;
    background: var(--ss-ink);
    border: 1px solid var(--ss-ink);
    border-radius: 10px;
    padding: 0.8rem 1rem;
    cursor: pointer;
    transition: transform 0.12s ease, background 0.15s, box-shadow 0.15s;
    letter-spacing: -0.005em;
    box-shadow: 0 1px 0 rgba(255,255,255,0.1) inset, var(--ss-shadow-sm);
}

.ss-btn-primary:hover {
    background: var(--ss-ink-2);
    transform: translateY(-1px);
    box-shadow: var(--ss-shadow-md);
}

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

/* Google sign-in button host (GIS renders its own iframe button) */
.ss-google-wrap {
    display: flex;
    justify-content: center;
    min-height: 44px;
}

/* Divider + secondary "create account" CTA */
.ss-card-divider {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin: 1.1rem 0 0.9rem;
    color: var(--ss-muted);
    font-size: 0.82rem;
}

.ss-card-divider::before,
.ss-card-divider::after {
    content: "";
    flex: 1;
    height: 1px;
    background: var(--ss-line);
}

.ss-btn-secondary {
    display: block;
    width: 100%;
    text-align: center;
    font-family: inherit;
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--ss-teal-dark);
    background: var(--ss-teal-soft);
    border: 1px solid rgba(75, 170, 178, 0.35);
    border-radius: 10px;
    padding: 0.8rem 1rem;
    cursor: pointer;
    text-decoration: none;
    transition: transform 0.12s ease, background 0.15s, box-shadow 0.15s, border-color 0.15s;
    letter-spacing: -0.005em;
}

.ss-btn-secondary:hover {
    background: #d8edee;
    border-color: var(--ss-teal);
    transform: translateY(-1px);
    box-shadow: var(--ss-shadow-sm);
    text-decoration: none;
}

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

.ss-alert {
    background: #fff7ed;
    border: 1px solid #fde0bd;
    color: #7a4a13;
    border-radius: 10px;
    padding: 0.75rem 0.9rem;
    font-size: 0.88rem;
    line-height: 1.5;
    margin-top: 1rem;
    display: flex;
    gap: 0.6rem;
    align-items: flex-start;
    text-align: left;
}

.ss-alert i {
    color: var(--ss-orange);
    margin-top: 0.15rem;
}

/* Good-news variant: "reset email sent" used to render in the warning style
   and read like a failure. */
.ss-alert.is-ok {
    background: #f0fdf4;
    border-color: #bbf7d0;
    color: #14532d;
}

.ss-alert.is-ok i {
    color: #16a34a;
}

.ss-alert a {
    color: var(--ss-teal-dark);
    font-weight: 600;
}

/* ======================================================
   STATUS STRIP (camp dates + what registration costs today)
   ====================================================== */
.ss-status {
    background: #ffffff;
    border: 1px solid var(--ss-line);
    border-left: 3px solid var(--ss-line);
    border-radius: 14px;
    box-shadow: var(--ss-shadow-sm);
    padding: 1.1rem 1.25rem;
    text-align: left;
}

.ss-status.is-open { border-left-color: var(--ss-teal); }
.ss-status.is-upcoming { border-left-color: var(--ss-orange); }
.ss-status.is-closed,
.ss-status.is-none { border-left-color: #c9d2dc; }

.ss-status-headline {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 1rem;
    font-weight: 600;
    color: var(--ss-ink);
    margin: 0 0 0.2rem;
}

.ss-status.is-open .ss-status-headline i { color: var(--ss-teal); }
.ss-status.is-upcoming .ss-status-headline i { color: var(--ss-orange); }
.ss-status.is-closed .ss-status-headline i,
.ss-status.is-none .ss-status-headline i { color: var(--ss-muted); }

.ss-status-detail {
    font-size: 0.88rem;
    line-height: 1.5;
    color: var(--ss-muted);
    margin: 0;
}

/* ---- Public "what happens when" timeline -------------------------------
   Same idea as the youth pastor's Key Dates card, in family language. A
   connecting rail runs behind the markers; steps already finished go grey,
   the one running now is teal and filled. */
.ss-timeline {
    list-style: none;
    margin: 0.9rem 0 0;
    padding: 0.6rem 0 0;
    border-top: 1px solid var(--ss-line-soft);
    position: relative;
}

.ss-tl-step {
    position: relative;
    display: flex;
    gap: 0.85rem;
    padding: 0 0 1rem 0;
}

/* The rail: drawn from each marker down to the next, so it stops cleanly at
   the last step instead of trailing into the card's padding. */
.ss-tl-step:not(:last-child)::before {
    content: "";
    position: absolute;
    left: 5px;
    top: 1.15rem;
    bottom: -0.15rem;
    width: 2px;
    background: var(--ss-line);
}

.ss-tl-step:last-child {
    padding-bottom: 0.15rem;
}

.ss-tl-marker {
    flex: 0 0 auto;
    width: 12px;
    height: 12px;
    margin-top: 0.3rem;
    border-radius: 50%;
    background: #ffffff;
    border: 2px solid var(--ss-line);
    z-index: 1;
}

.ss-tl-step.is-past .ss-tl-marker {
    background: var(--ss-line);
    border-color: var(--ss-line);
}

.ss-tl-step.is-now .ss-tl-marker {
    background: var(--ss-teal);
    border-color: var(--ss-teal);
    box-shadow: 0 0 0 4px rgba(75, 170, 178, 0.18);
}

.ss-tl-body {
    min-width: 0;
}

.ss-tl-head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.2rem 0.6rem;
}

.ss-tl-label {
    font-weight: 700;
    color: var(--ss-ink);
    font-size: 0.95rem;
}

.ss-tl-step.is-past .ss-tl-label {
    color: var(--ss-muted);
    font-weight: 600;
}

.ss-tl-when {
    font-size: 0.88rem;
    color: var(--ss-teal-dark);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.ss-tl-step.is-past .ss-tl-when {
    color: var(--ss-muted);
    font-weight: 500;
}

/* When the camps do not share a date, each distinct date gets its own line
   naming the camps it covers, rather than a badge that says only that they
   differ. Camp names sit in a fixed column so the dates line up. */
.ss-tl-dates {
    list-style: none;
    margin: 0.3rem 0 0;
    padding: 0;
}

.ss-tl-dates li {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.15rem 0.6rem;
    padding: 0.12rem 0;
}

.ss-tl-camps {
    flex: 0 0 auto;
    min-width: 9.5rem;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--ss-ink-2);
}

.ss-tl-step.is-past .ss-tl-camps {
    color: var(--ss-muted);
    font-weight: 500;
}

.ss-tl-note {
    font-size: 0.85rem;
    line-height: 1.45;
    color: var(--ss-muted);
    margin-top: 0.15rem;
}

.ss-grade-note {
    margin-top: 1rem;
}

.ss-status-list {
    list-style: none;
    margin: 0.9rem 0 0;
    padding: 0.35rem 0 0;
    border-top: 1px solid var(--ss-line-soft);
}

.ss-status-row {
    padding: 0.65rem 0;
    border-bottom: 1px dashed var(--ss-line-soft);
}

.ss-status-row:last-child {
    border-bottom: none;
    padding-bottom: 0.25rem;
}

.ss-status-row-top {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 0.75rem;
}

.ss-status-name {
    font-size: 0.94rem;
    font-weight: 600;
    color: var(--ss-ink);
}

.ss-status-fee {
    font-size: 1rem;
    font-weight: 600;
    color: var(--ss-ink);
    font-feature-settings: "tnum" 1;
    white-space: nowrap;
}

.ss-status-fee .ss-fee-closed {
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--ss-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.ss-status-fee .ss-fee-period {
    display: block;
    font-size: 0.68rem;
    font-weight: 500;
    color: var(--ss-muted);
    text-align: right;
    letter-spacing: 0.02em;
}

.ss-status-sub {
    font-size: 0.82rem;
    line-height: 1.45;
    color: var(--ss-muted);
    margin-top: 0.1rem;
}

.ss-status-foot {
    margin-top: 0.9rem;
    padding-top: 0.85rem;
    border-top: 1px solid var(--ss-line-soft);
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.ss-status-note {
    font-size: 0.8rem;
    line-height: 1.45;
    color: var(--ss-muted);
    margin: 0;
    flex: 1 1 200px;
}

.ss-status-link {
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--ss-teal-dark);
    text-decoration: none;
    white-space: nowrap;
}

.ss-status-link:hover {
    text-decoration: underline;
    color: var(--ss-ink);
}

/* ======================================================
   ABOUT CARD (links back to the main Super Summer site, so CampHQ
   is not a dead end for anyone who arrived wanting camp information)
   ====================================================== */
.ss-side-card {
    background: #ffffff;
    border: 1px solid var(--ss-line);
    border-radius: 14px;
    box-shadow: var(--ss-shadow-sm);
    padding: 1.1rem 1.25rem;
    text-align: left;
}

.ss-side-title {
    font-family: 'Inter Tight', sans-serif;
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--ss-ink);
    margin: 0 0 0.15rem;
}

.ss-side-sub {
    font-size: 0.82rem;
    line-height: 1.45;
    color: var(--ss-muted);
    margin: 0 0 0.75rem;
}

.ss-side-links {
    list-style: none;
    margin: 0;
    padding: 0;
}

.ss-side-links li {
    border-top: 1px solid var(--ss-line-soft);
}

.ss-side-links a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.6rem;
    padding: 0.6rem 0;
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--ss-ink-2);
    text-decoration: none;
    transition: color 0.15s, padding-left 0.15s;
}

.ss-side-links a:hover {
    color: var(--ss-teal-dark);
    padding-left: 0.2rem;
    text-decoration: none;
}

.ss-side-links a i {
    font-size: 0.75rem;
    color: var(--ss-muted);
    flex-shrink: 0;
}

.ss-side-links a:hover i {
    color: var(--ss-teal);
}

/* Sub-actions below the card */
.ss-aux-actions {
    margin-top: 1.5rem;
    text-align: center;
    font-size: 0.9rem;
    color: var(--ss-muted);
}

.ss-aux-actions a {
    color: var(--ss-teal-dark);
    font-weight: 600;
    text-decoration: none;
}

.ss-aux-actions a:hover {
    text-decoration: underline;
}

.ss-aux-divider {
    display: inline-block;
    margin: 0 0.55rem;
    color: var(--ss-line);
}

/* ======================================================
   FEE SECTION (fees.aspx)
   ====================================================== */
.ss-fees {
    padding: 3.5rem 1.5rem 4rem;
    background: #ffffff;
    position: relative;
}

.ss-fees-inner {
    max-width: 1180px;
    margin: 0 auto;
}

.ss-fees-header {
    text-align: center;
    margin-bottom: 2.5rem;
}

.ss-fees-eyebrow {
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #8a5a0f; /* 5.9:1 on white; the --ss-orange fill tone fails as small text (review 2, R2-81) */
    margin-bottom: 0.5rem;
}

.ss-fees-header h1 {
    font-family: 'Fraunces', Georgia, serif;
    font-weight: 500;
    font-size: clamp(1.85rem, 3.5vw, 2.5rem);
    line-height: 1.1;
    letter-spacing: -0.02em;
    color: var(--ss-ink);
    margin: 0 0 0.75rem;
}

.ss-fees-header p {
    color: var(--ss-muted);
    font-size: 1rem;
    max-width: 620px;
    margin: 0 auto;
    line-height: 1.6;
}

/* One-line decoder so "JH" and "SH" mean something to a first-time family */
.ss-decoder {
    max-width: 720px;
    margin: 1.25rem auto 0;
    background: var(--ss-teal-soft);
    border: 1px solid rgba(75, 170, 178, 0.25);
    border-radius: 12px;
    padding: 0.85rem 1.1rem;
    font-size: 0.92rem;
    line-height: 1.55;
    color: var(--ss-ink-2);
    text-align: left;
    display: flex;
    gap: 0.6rem;
    align-items: flex-start;
}

.ss-decoder i {
    color: var(--ss-teal-dark);
    margin-top: 0.2rem;
}

.ss-fee-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 1.25rem;
}

/* Week grouping on fees.aspx: the first card of each new week (and the
   Adults card) snaps back to column 1, starting a fresh row. Unused trailing
   tracks are auto-fit, so they collapse and the cards in a short row widen
   instead of leaving a hole. Harmless at one-column widths. */
.ss-fee-card.ss-fee-newrow { grid-column-start: 1; }

.ss-fee-card {
    background: #ffffff;
    border: 1px solid var(--ss-line);
    border-radius: 14px;
    padding: 1.75rem;
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
    position: relative;
    display: flex;
    flex-direction: column;
    min-height: 100%;
}

.ss-fee-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--ss-shadow-md);
    border-color: #d6dde5;
}

.ss-fee-card .ss-fee-icon {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    margin-bottom: 1rem;
}

.ss-fee-card.is-student .ss-fee-icon {
    background: var(--ss-teal-soft);
    color: var(--ss-teal-dark);
}

.ss-fee-card.is-adult .ss-fee-icon {
    background: var(--ss-orange-soft);
    color: var(--ss-orange);
}

.ss-fee-card.is-cancel .ss-fee-icon {
    background: #f1f4f7;
    color: var(--ss-ink-2);
}

.ss-fee-card h2 {
    font-family: 'Inter Tight', sans-serif;
    font-size: 1.1rem;
    font-weight: 600;
    letter-spacing: -0.015em;
    color: var(--ss-ink);
    margin: 0 0 0.25rem;
}

.ss-fee-card .ss-fee-tagline {
    font-size: 0.85rem;
    color: var(--ss-muted);
    margin: 0 0 1.25rem;
}

.ss-fee-block {
    margin-bottom: 1.25rem;
}

.ss-fee-block:last-child {
    margin-bottom: 0;
}

.ss-fee-block-label {
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--ss-muted);
    margin-bottom: 0.5rem;
}

.ss-fee-rows {
    list-style: none;
    padding: 0;
    margin: 0;
}

.ss-fee-rows li {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 0.75rem;
    padding: 0.45rem 0;
    border-bottom: 1px dashed var(--ss-line-soft);
    font-size: 0.92rem;
    color: var(--ss-ink-2);
}

.ss-fee-rows li:last-child {
    border-bottom: none;
}

.ss-fee-rows .ss-fee-amount {
    font-family: 'Inter Tight', sans-serif;
    font-feature-settings: "tnum" 1;
    font-weight: 600;
    color: var(--ss-ink);
    font-size: 1rem;
    white-space: nowrap;
}

.ss-fee-rows .ss-discount {
    font-size: 0.72rem;
    font-weight: 500;
    color: var(--ss-teal-dark);
    margin-left: 0.4rem;
}

.ss-fee-note {
    font-size: 0.85rem;
    line-height: 1.55;
    color: var(--ss-muted);
    margin: 0.4rem 0 0;
}

.ss-fee-divider {
    height: 1px;
    background: var(--ss-line-soft);
    margin: 1.25rem 0;
}

.ss-fee-subhead {
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--ss-ink);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin: 0 0 0.85rem;
}

/* "Open now" pill on whichever window is currently accepting sign-ups */
.ss-open-pill {
    display: inline-block;
    font-size: 0.66rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #ffffff;
    background: var(--ss-teal);
    border-radius: 999px;
    padding: 0.12rem 0.5rem;
    margin-left: 0.4rem;
    vertical-align: middle;
}

.ss-fees-empty {
    text-align: center;
    color: var(--ss-muted);
    font-size: 0.95rem;
    padding: 1.5rem 0;
}

/* Back / secondary navigation on fees.aspx */
.ss-page-nav {
    max-width: 1180px;
    margin: 0 auto 1.5rem;
    font-size: 0.9rem;
}

.ss-page-nav a {
    color: var(--ss-teal-dark);
    font-weight: 600;
    text-decoration: none;
}

.ss-page-nav a:hover {
    text-decoration: underline;
}

/* ======================================================
   FOOTER STRIP
   ====================================================== */
.ss-footer-strip {
    text-align: center;
    padding: 2.5rem 1.5rem 3rem;
    background: var(--ss-bg);
    border-top: 1px solid var(--ss-line);
}

.ss-footer-strip p {
    color: var(--ss-muted);
    font-size: 0.9rem;
    margin: 0 0 0.6rem;
}

.ss-footer-strip a {
    color: var(--ss-teal-dark);
    font-weight: 600;
    text-decoration: none;
    /* The office address is printed as the link text, and an address such as
       information@supersummerarkansas.com is a single unbreakable 300px run. On a
       320px phone it pushed the page 5px wide (fixed 2026-08-23). Same answer
       admin_execstaff already uses for its .email-cell. */
    overflow-wrap: anywhere;
}

.ss-footer-strip a:hover {
    text-decoration: underline;
}

/* Email / call / text on one row, wrapping to a stack on a narrow phone -
   which is exactly where the call and text links matter most. */
.ss-footer-contact {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem 1.75rem;
}

.ss-footer-contact a {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.25rem 0;
}

.ss-footer-contact a i {
    color: var(--ss-muted);
    font-size: 0.9em;
}

/* ======================================================
   ANIMATIONS
   ====================================================== */
@keyframes ss-fade-up {
    from {
        opacity: 0;
        transform: translateY(12px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes ss-pulse {
    0% { box-shadow: 0 0 0 0 rgba(75, 170, 178, 0.55); }
    70% { box-shadow: 0 0 0 8px rgba(75, 170, 178, 0); }
    100% { box-shadow: 0 0 0 0 rgba(75, 170, 178, 0); }
}

@media (prefers-reduced-motion: reduce) {
    .ss-default-page *,
    .ss-default-page *::before,
    .ss-default-page *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
    }
}

/* ======================================================
   RESPONSIVE
   ====================================================== */
@media (max-width: 900px) {
    .ss-hero {
        padding: 3rem 1.25rem 2rem;
    }

    .ss-fees {
        padding: 2.5rem 1.25rem 3rem;
    }

    .ss-login-card {
        padding: 1.5rem;
    }
}

@media (max-width: 480px) {
    .ss-form-row {
        flex-direction: column;
        align-items: stretch;
        gap: 0.5rem;
    }

    .ss-forgot-link {
        text-align: left;
    }

    .ss-status-foot {
        flex-direction: column;
        align-items: flex-start;
    }
}