/* Two-mode pricing section (views/partials/pricingSection.ejs).
 *
 * COLOURS COME FROM public/css/theme.css. Where a value has no token, it is the
 * one already in use on this page in public/css/userPricing.css — noted inline.
 * Nothing here is a new invented colour.
 *
 * Everything is .aal- prefixed and scoped under .aal-pricing so it cannot collide
 * with the sitewide pricing rules it sits beside.
 */

.aal-pricing {
    /* Local aliases so the palette is stated once. --aal-gold and --aal-canton
     * have no theme.css token; both are the values userPricing.css already uses
     * on this section (#C5A76C hover gold, #032350 "flag navy" headings). Flagged
     * for tokenising rather than silently re-hardcoded elsewhere. */
    --aal-gold: #C5A76C;
    --aal-canton: #032350;
    --aal-ink: var(--text-primary, #0d1526);
    --aal-muted: var(--text-muted, #6b7280);
    --aal-line: var(--border-color, #e5e7eb);
    --aal-surface: var(--bg-surface, #ffffff);
    --aal-surface-alt: var(--bg-surface-alt, #f8f9fb);
    --aal-navy: var(--navy, #0d1526);
    /* #1e40af, not #1d4ed8. Two stylesheets define .learn-more-btn and
     * accountSetup.css loads AFTER howItWorks.css, so the button actually
     * painted on this page is the later #1e40af — which is theme.css's
     * --primary-hover being used as a resting fill. Matching what renders, not
     * what the token name suggests; flagged below as something to reconcile. */
    --aal-primary: var(--primary-hover, #1e40af);
    --aal-danger: var(--danger, #da1515);
    /* The promo-ticket navy from promotions.css .offer-ticket — the site's
     * established dark surface. A flat #0d1526 is only the darkest end of it and
     * reads too black next to the tickets further down the page. */
    --aal-navy-grad: linear-gradient(135deg, #0d1526 0%, #1e3a8a 100%);
    --aal-radius: 12px;   /* userPricing.css card radius */
    --aal-radius-sm: 8px; /* userPricing.css button radius */

    width: 100%;
    max-width: 1080px;
    margin: 0 auto;
    align-items: stretch;
}
.aal-pricing * { box-sizing: border-box; }

/* Section ground. userPricing.css paints the shared .pricing section white; this
 * section sits on the page colour instead, so it reads as part of index.ejs
 * rather than as a card floating on it. Same specificity as .pricing (0,1,0) —
 * this wins only because aalPricing.css is linked after userPricing.css on both
 * host pages (index.ejs and createListings.ejs). Keep that link order.
 *
 * Dark mode is NOT handled here: theme.css carries
 * [data-theme="dark"] .pricing { background: var(--bg-gradient) !important }
 * whose !important outranks this, so the section keeps the sitewide dark
 * gradient with no extra rule. */
.aal-pricing { background-color: var(--bg-page, #f4f4f4); }

/* ─── toggle ─── */
.aal-toggle {
    display: inline-flex; gap: 2px; align-self: center;
    background: var(--aal-surface-alt);
    border: 1px solid var(--aal-line);
    border-radius: var(--aal-radius-sm);
    padding: 3px; margin: 4px 0 32px;
}
.aal-toggle button {
    appearance: none; border: 0; cursor: pointer; background: transparent;
    font-family: inherit; font-size: 0.95rem; font-weight: 600;
    color: var(--aal-muted); padding: 10px 20px;
    border-radius: calc(var(--aal-radius-sm) - 3px);
    transition: background .16s ease, color .16s ease;
}
.aal-toggle button:hover { color: var(--aal-canton); }
.aal-toggle button[aria-selected="true"] { background: var(--aal-navy-grad); color: #fff; }
.aal-toggle button:focus-visible { outline: 2px solid var(--aal-primary); outline-offset: 2px; }

.aal-panel[hidden] { display: none; }
.aal-panel { width: 100%; }
/* `.aal-pricing .aal-h2`, not `.aal-h2`. userPricing.css still carries the old
 * pricing block's `.pricing h2 { color: #333; font-size: 2rem; margin-bottom:
 * 30px }` and this section sits on the same `.pricing` class, so that
 * descendant rule (0,1,1) outranked the lone class (0,1,0). The heading was
 * painting #333 on both grounds — passable on the light page, unreadable on
 * the dark one — instead of anything declared here. Two classes win. */
.aal-pricing .aal-h2 {
    font-size: clamp(1.4rem, 3.2vw, 2rem); font-weight: 800; line-height: 1.15;
    color: var(--aal-canton); margin: 0 0 12px; text-align: center;
}
.aal-lede {
    font-size: 1rem; color: var(--aal-muted); margin: 0 auto 30px;
    max-width: 62ch; text-align: center; line-height: 1.55;
}
.aal-lede b { color: var(--aal-ink); font-weight: 600; }
.aal-sec-title {
    font-size: 0.68rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
    color: #9ca3af; margin: 0 0 14px;   /* #9ca3af: userPricing.css .pricing-plan */
}

/* ─── calculator ─── */
/* Dark block so it reads as an interactive tool against the white section. */
.aal-calc {
    background: var(--aal-navy-grad); border-radius: var(--aal-radius);
    padding: clamp(20px, 4vw, 40px); margin-bottom: 44px; color: #fff;
    box-shadow: 0 2px 6px rgba(0, 0, 0, .08);   /* userPricing.css resting shadow */
}
.aal-calc-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(22px, 4vw, 48px); align-items: start; }
@media (max-width: 820px) { .aal-calc-grid { grid-template-columns: 1fr; gap: 28px; } }

.aal-ctrl-label {
    display: block; font-size: 0.68rem; font-weight: 700; letter-spacing: .12em;
    text-transform: uppercase; color: rgba(255,255,255,.55); margin: 0 0 14px;
}
.aal-count-row { display: flex; align-items: baseline; gap: 10px; margin-bottom: 20px; }
#aalCount {
    /* Sized in ch, not px: the field must hold every digit of maxCount at the
     * largest clamp size in whatever font actually renders. A fixed 148px fit
     * "6000" in Montserrat 800 with a few pixels to spare and clipped the last
     * digit in the fallback sans; tabular-nums makes every digit one ch wide,
     * so 4ch is exactly four digits and the 16px is slack for the padding. */
    width: calc(4ch + 16px); background: transparent; border: 0;
    border-bottom: 2px solid var(--aal-gold); color: #fff;
    font-family: inherit; font-size: clamp(2.4rem, 7vw, 3.4rem); font-weight: 800;
    padding: 0 4px 4px; font-variant-numeric: tabular-nums; -moz-appearance: textfield;
}
#aalCount:focus { outline: none; border-bottom-color: #fff; }
#aalCount::-webkit-outer-spin-button, #aalCount::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.aal-count-unit { font-size: 1rem; color: rgba(255,255,255,.55); }

#aalSlider { width: 100%; -webkit-appearance: none; appearance: none; background: transparent; margin: 6px 0 0; }
#aalSlider::-webkit-slider-runnable-track { height: 4px; background: rgba(255,255,255,.22); border-radius: 2px; }
#aalSlider::-moz-range-track { height: 4px; background: rgba(255,255,255,.22); border-radius: 2px; }
#aalSlider::-webkit-slider-thumb {
    -webkit-appearance: none; width: 24px; height: 24px; margin-top: -10px;
    border-radius: 4px; background: var(--aal-gold); border: 2px solid rgba(0, 0, 0, .35); cursor: grab;
}
#aalSlider::-moz-range-thumb {
    width: 24px; height: 24px; border-radius: 4px; background: var(--aal-gold);
    border: 2px solid rgba(0, 0, 0, .35); cursor: grab;
}
#aalSlider:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 3px #fff; }
#aalSlider:focus-visible::-moz-range-thumb { box-shadow: 0 0 0 3px #fff; }

.aal-presets { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 22px; }
.aal-preset {
    background: transparent; border: 1px solid rgba(255,255,255,.25); color: rgba(255,255,255,.85);
    font-family: inherit; font-size: 0.8rem; font-weight: 500;
    padding: 7px 12px; border-radius: var(--aal-radius-sm); cursor: pointer;
    transition: border-color .15s ease, color .15s ease;
}
.aal-preset:hover { border-color: var(--aal-gold); color: #fff; }
.aal-preset:focus-visible { outline: 2px solid var(--aal-gold); outline-offset: 2px; }
.aal-preset span { color: rgba(255,255,255,.5); margin-left: 6px; }

.aal-cta-row { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin-top: 24px; }
.aal-cta {
    background-color: var(--aal-gold); color: #2A1F04; text-decoration: none;
    font-size: 0.88rem; font-weight: 600; padding: 10px 22px;
    border-radius: var(--aal-radius-sm); display: inline-block; cursor: pointer;
    border: none;
    transition: background .2s ease, transform .2s ease, box-shadow .2s ease;
}
.aal-cta:hover { transform: translateY(-3px); box-shadow: 0 6px 16px rgba(0, 0, 0, .2); color: #2A1F04; }
.aal-cta:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.aal-cta-note { font-size: 0.88rem; color: rgba(255,255,255,.6); }

/* ─── receipt: a light document inside the dark tool ─── */
.aal-receipt {
    background: var(--aal-surface); color: var(--aal-ink);
    border-top: 4px solid var(--aal-gold); border-radius: var(--aal-radius-sm);
    padding: 22px 22px 18px;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}
.aal-receipt-head {
    font-size: 0.68rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
    color: #9ca3af; padding-bottom: 12px; border-bottom: 1px solid var(--aal-line); margin-bottom: 4px;
}
.aal-line { display: flex; align-items: baseline; gap: 8px; font-size: 0.83rem; padding: 8px 0; }
.aal-line .d { white-space: nowrap; }
.aal-line .dots { flex: 1; border-bottom: 1px dotted var(--aal-line); transform: translateY(-4px); }
.aal-line .amt { font-variant-numeric: tabular-nums; font-weight: 600; }
/* The floor is a DIFFERENT KIND of charge, not another band — it must read that
 * way at a glance. Colour plus a rule, so it survives greyscale and colourblindness. */
.aal-line.is-floor { color: var(--aal-danger); font-weight: 600; }
.aal-line.is-floor .dots { border-bottom-style: dashed; border-bottom-color: currentColor; opacity: .55; }
.aal-empty { font-size: 0.83rem; color: var(--aal-muted); padding: 10px 0; }

.aal-total-row {
    display: flex; justify-content: space-between; align-items: flex-end;
    border-top: 2px solid var(--aal-canton); margin-top: 10px; padding-top: 14px;
}
.aal-total-label { font-size: 0.68rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: #9ca3af; }
.aal-percar { font-size: 0.75rem; color: var(--aal-muted); margin-top: 4px; }
#aalTotal {
    font-family: inherit; font-size: clamp(1.9rem, 5vw, 2.5rem); font-weight: 800;
    color: var(--aal-canton); font-variant-numeric: tabular-nums; line-height: 1;
}
.aal-ceiling {
    font-size: 0.78rem; color: var(--aal-muted);
    margin: 14px 0 0; padding-top: 12px; border-top: 1px solid var(--aal-line);
}

/* ─── bands ─── */
.aal-bands { margin-bottom: 40px; }
.aal-band-list {
    display: grid; grid-template-columns: repeat(6, 1fr); gap: 1px;
    background: var(--aal-line); border: 1px solid var(--aal-line);
    border-radius: var(--aal-radius-sm); overflow: hidden;
}
@media (max-width: 760px) { .aal-band-list { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 430px) { .aal-band-list { grid-template-columns: repeat(2, 1fr); } }
.aal-band { padding: 14px 12px; background: var(--aal-surface); transition: background .2s ease; }
/* Active bands carry a left rule as well as a fill, so "which bands am I paying"
 * is not conveyed by colour alone. */
/* A band you are paying: a tint that reads on the white page (the old
   --aal-surface-alt was #f8f9fb beside #fff — invisible, UAT #48) plus a rule
   on the left, so it is never colour alone. Dark mode lifts it to the promo
   navy below. */
.aal-band.is-active { background: #e2eaf8; box-shadow: inset 4px 0 0 var(--aal-canton); }
.aal-band .rng { font-size: 0.72rem; color: var(--aal-muted); font-weight: 600; }
.aal-band .rate {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 1.05rem; font-weight: 600; color: var(--aal-canton); margin-top: 5px;
}
.aal-band.is-active .rate { color: var(--aal-primary); }

/* ─── trust ─── */
.aal-trust {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px;
    background: var(--aal-line); border: 1px solid var(--aal-line);
    border-radius: var(--aal-radius-sm); overflow: hidden; margin-bottom: 8px;
}
@media (max-width: 760px) { .aal-trust { grid-template-columns: 1fr; } }
.aal-trust > div { background: var(--aal-surface); padding: 20px; }
.aal-trust h4 { font-size: 0.95rem; font-weight: 700; color: var(--aal-canton); margin: 0 0 6px; }
.aal-trust p { font-size: 0.88rem; color: var(--aal-muted); margin: 0; line-height: 1.5; }

/* ─── private seller cards ─── */
.aal-ps-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; max-width: 760px; margin: 0 auto; }
@media (max-width: 680px) { .aal-ps-cards { grid-template-columns: 1fr; } }
.aal-ps-card {
    border: 1px solid var(--aal-line); border-top: 4px solid var(--aal-canton);
    border-radius: var(--aal-radius); padding: 22px; background: var(--aal-surface);
    display: flex; flex-direction: column;
    box-shadow: 0 2px 6px rgba(0, 0, 0, .08);
}
/* Featured differs by its top rule and its bullet accents — no badge, no claim. */
.aal-ps-card.is-featured { border-top-color: var(--aal-gold); }
.aal-ps-name { font-size: 0.68rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: #9ca3af; }
.aal-ps-price {
    font-size: 2rem; font-weight: 800; color: var(--aal-canton);
    line-height: 1; margin: 10px 0 4px; font-variant-numeric: tabular-nums;
}
.aal-ps-unit { font-size: 0.78rem; color: #9ca3af; margin-bottom: 18px; }
.aal-ps-feat { list-style: none; margin: 0 0 22px; padding: 0; flex: 1; }
.aal-ps-feat li { font-size: 0.9rem; color: var(--aal-ink); padding: 6px 0 6px 20px; position: relative; line-height: 1.45; }
.aal-ps-feat li::before {
    content: ""; position: absolute; left: 0; top: 13px;
    width: 8px; height: 8px; border-radius: 2px; background: var(--aal-line);
}
.aal-ps-feat li.is-plus::before { background: var(--aal-gold); }
.aal-ps-feat li.is-carry { color: var(--aal-muted); }
/* Matches .homepage-btn (public/css/index.css) exactly — same blue, weight,
 * padding, radius, border and hover — so a card button here is indistinguishable
 * from every other button on the page. Only `display:block` differs, because
 * these fill the card footer. */
.aal-ps-btn {
    display: block; text-align: center; text-decoration: none;
    font-size: 0.88rem; font-weight: 500; padding: 10px 22px;
    border-radius: var(--aal-radius-sm);
    background-color: var(--aal-primary); color: #ffffff;
    border: none; cursor: pointer;
    transition: background .2s ease, transform .2s ease, box-shadow .2s ease;
}
.aal-ps-btn:hover {
    /* #1e3a8a is the promo-ticket blue already in promotions.css — a real
     * darker step, since the resting fill is itself --primary-hover. */
    background-color: #1e3a8a; color: #ffffff;
    transform: translateY(-3px); box-shadow: 0 6px 16px rgba(0, 0, 0, .2);
}
.aal-ps-btn:focus-visible { outline: 2px solid var(--aal-canton); outline-offset: 2px; }
.aal-ps-btn.is-gold { background-color: var(--aal-gold); color: #2A1F04; }
.aal-ps-btn.is-gold:hover { background-color: #b8975c; color: #2A1F04; }
.aal-ps-foot { font-size: 0.88rem; color: var(--aal-muted); margin: 22px auto 0; max-width: 60ch; text-align: center; }

.aal-crosslink { border-top: 1px solid var(--aal-line); margin: 34px 0 0; padding: 18px 0 0; font-size: 0.92rem; color: var(--aal-muted); text-align: center; }
.aal-crosslink[hidden] { display: none; }
.aal-crosslink button {
    appearance: none; background: none; border: 0; padding: 0; cursor: pointer;
    font-family: inherit; font-size: 0.92rem; font-weight: 600;
    color: var(--aal-primary); text-decoration: underline;
}
.aal-crosslink button:focus-visible { outline: 2px solid var(--aal-primary); outline-offset: 2px; }
/* The link out to /dealers is a real anchor, not a mode switch, so it is always
 * shown (its panel hides it) — [hidden] above never applies to it. */
.aal-crosslink.is-static { display: block; }
.aal-crosslink a {
    font-weight: 600; color: var(--aal-primary); text-decoration: underline;
}
.aal-crosslink a:focus-visible { outline: 2px solid var(--aal-primary); outline-offset: 2px; }

/* ─── dark mode: the site ships [data-theme="dark"] ─── */
[data-theme="dark"] .aal-pricing {
    --aal-canton: #93b4f5;   /* the canton is unreadable on a dark ground */
    --aal-ink: #e8edf5;
    --aal-muted: #9fb0c9;
    --aal-line: rgba(255, 255, 255, .14);
    --aal-surface: #1e2f52;
    --aal-surface-alt: #16294a;
}
[data-theme="dark"] .aal-pricing .aal-receipt-head,
[data-theme="dark"] .aal-pricing .aal-total-label,
[data-theme="dark"] .aal-pricing .aal-sec-title,
[data-theme="dark"] .aal-pricing .aal-ps-name,
[data-theme="dark"] .aal-pricing .aal-ps-unit { color: var(--aal-muted); }
[data-theme="dark"] .aal-pricing .aal-line .dots { border-bottom-color: rgba(255, 255, 255, .25); }
[data-theme="dark"] .aal-pricing .aal-line.is-floor { color: #ff8b8b; }
[data-theme="dark"] .aal-pricing .aal-calc { background: var(--aal-navy-grad); }
/* The panel headline takes the calculator's gold on the dark ground — the same
 * antique gold theme.css already uses as its dark-mode card accent — so it
 * reads as the tool's title rather than another blue line. Light mode keeps
 * the canton: gold on the light page would sit under 2:1. */
[data-theme="dark"] .aal-pricing .aal-h2 { color: var(--aal-gold); }
/* --aal-primary is theme.css's #1e40af, a blue built to sit UNDER white text.
 * As text on the dark surfaces it is ~1.3:1 — the active rates and the two
 * cross-links were vanishing. In dark mode text uses of it take the same
 * light blue the canton resolves to (also the /dealers page's dark link), and
 * the active band lifts to the promo navy with a white rate, so "the bands
 * you are paying" is lit rather than dimmed. --aal-primary itself stays put:
 * it is still the fill under the white-on-blue private-seller button. */
[data-theme="dark"] .aal-pricing .aal-band.is-active { background: #1e3a8a; }
[data-theme="dark"] .aal-pricing .aal-band.is-active .rate { color: #ffffff; }
[data-theme="dark"] .aal-pricing .aal-crosslink a,
[data-theme="dark"] .aal-pricing .aal-crosslink button { color: var(--aal-canton); }
[data-theme="dark"] .aal-pricing .aal-crosslink a:focus-visible,
[data-theme="dark"] .aal-pricing .aal-crosslink button:focus-visible,
[data-theme="dark"] .aal-pricing .aal-toggle button:focus-visible { outline-color: var(--aal-canton); }

@media (prefers-reduced-motion: reduce) {
    .aal-pricing *, .aal-pricing *::before { transition: none !important; animation: none !important; }
    .aal-cta:hover, .aal-ps-btn:hover { transform: none; box-shadow: none; }
}