/* ==========================================================================
   Dark mode — overrides the colour tokens in style.css.
   Applied when <html data-theme="dark">. The media query is a no-JS fallback
   and applies only while no explicit data-theme is set.
   Light sections become deep teal surfaces. Dark bands stay dark, with aqua
   accents, so the page keeps its identity in both themes.
   ========================================================================== */

[data-theme="dark"] {
  color-scheme: dark;

  --teal-950: #041a1f;
  --teal-900: #082a32;
  --teal-800: #0f3d47;
  --teal-700: #1d6474;
  --aqua: #a6e7ef;
  --aqua-2: #7fd6e2;
  --mist: #0b262d;
  --mist-2: #0f2f37;
  --surface: #0e2c33;
  --ink: #e6f6f9;
  --ink-2: #a9c7cd;
  --rule: rgba(230, 246, 249, 0.14);
  --accent-on-light: #9fe4ee;
  --focus: #9fe4ee;
  --btn-light-bg: #a6e7ef;
  --btn-light-text: #041a1f;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;

    --teal-950: #041a1f;
    --teal-900: #082a32;
    --teal-800: #0f3d47;
    --teal-700: #1d6474;
    --aqua: #a6e7ef;
    --aqua-2: #7fd6e2;
    --mist: #0b262d;
    --mist-2: #0f2f37;
    --surface: #0e2c33;
    --ink: #e6f6f9;
    --ink-2: #a9c7cd;
    --rule: rgba(230, 246, 249, 0.14);
    --accent-on-light: #9fe4ee;
    --focus: #9fe4ee;
    --btn-light-bg: #a6e7ef;
    --btn-light-text: #041a1f;
  }
}

/* ---------- About page (dark theme) ---------- */
[data-theme="dark"] .section-tint { background: #0c2030; }
[data-theme="dark"] .value-card,
[data-theme="dark"] .team-card,
[data-theme="dark"] .about-tags li,
[data-theme="dark"] .checklist li {
  background: #13283d;
  border-color: rgba(166, 231, 239, 0.14);
}
[data-theme="dark"] .about-copy h2,
[data-theme="dark"] .section-intro h2,
[data-theme="dark"] .value-card h3,
[data-theme="dark"] .team-body h3 { color: #f2f8fa; }
[data-theme="dark"] .about-copy p,
[data-theme="dark"] .value-card p,
[data-theme="dark"] .team-body p,
[data-theme="dark"] .about-tags span { color: #b9d3da; }
[data-theme="dark"] .about-tags strong,
[data-theme="dark"] .checklist li { color: #e6f3f6; }
[data-theme="dark"] .value-icon { background: #1d3d4b; color: var(--aqua); }
[data-theme="dark"] .checklist i,
[data-theme="dark"] .team-role,
[data-theme="dark"] .about-tags li { color: var(--aqua); }
[data-theme="dark"] .about-tags li { border-inline-start-color: var(--aqua); }
[data-theme="dark"] .cta-band { background: linear-gradient(120deg, #0a2a33, #14505c); }

/* ---------- Header dropdown and Home 2 (dark theme) ---------- */
[data-theme="dark"] .dropdown,
[data-theme="dark"] .dropdown::before { background: #0f2a36; border-color: rgba(166, 231, 239, 0.18); }
[data-theme="dark"] .dropdown { color: #e6f3f6; }
[data-theme="dark"] .dropdown a { color: #e6f3f6; }
[data-theme="dark"] .dropdown a span { background: #1d3d4b; color: var(--aqua); }
[data-theme="dark"] .dropdown a:hover,
[data-theme="dark"] .dropdown a[aria-current="page"] { background: #163540; }
[data-theme="dark"] .h2-marquee { background: #0c2030; }
[data-theme="dark"] .h2-logo { color: #b9d3da; }
[data-theme="dark"] .h2-logo i { color: var(--aqua); }
[data-theme="dark"] .h2-card,
[data-theme="dark"] .h2-offer,
[data-theme="dark"] .h2-emi-card,
[data-theme="dark"] .h2-voice { background: #13283d; border-color: rgba(166, 231, 239, 0.14); }
[data-theme="dark"] .h2-card h3,
[data-theme="dark"] .h2-head h2,
[data-theme="dark"] .h2-offer-top strong,
[data-theme="dark"] .h2-field-head output,
[data-theme="dark"] .h2-voice blockquote p,
[data-theme="dark"] .h2-voice figcaption strong { color: #f2f6fb; }
[data-theme="dark"] .h2-card p,
[data-theme="dark"] .h2-offer-top em,
[data-theme="dark"] .h2-step p,
[data-theme="dark"] .h2-field-head label,
[data-theme="dark"] .h2-voice figcaption small,
[data-theme="dark"] .h2-scroll-hint { color: #b9d3da; }
[data-theme="dark"] .h2-offer-top span,
[data-theme="dark"] .text-link { color: var(--aqua); }
[data-theme="dark"] .h2-card-icon,
[data-theme="dark"] .h2-chip-icon { background: #1d3d4b; color: var(--aqua); }
[data-theme="dark"] .h2-chip { background: #13283d; color: #f2f6fb; }
[data-theme="dark"] .h2-chip small { color: #b9d3da; }
[data-theme="dark"] .h2-step-dot { background: #1d3d4b; }
[data-theme="dark"] .h2-emi-result { background: linear-gradient(130deg, #061a22, #1d4a5a); }
[data-theme="dark"] .h2-cta { background: #051318; }

/* ---- Services page (dark) ----
   Uses the theme's own tokens. Earlier versions named tokens that were never
   defined (--border, --text, --heading, --surface-2), which left some text
   in the wrong colour in dark mode. */
[data-theme="dark"] .svc-panel { background: var(--surface); border-color: var(--rule); }
[data-theme="dark"] .svc-docs label { background: var(--surface); border-color: var(--rule); color: var(--ink); }
[data-theme="dark"] .svc-ring span { color: var(--ink); }
[data-theme="dark"] .svc-ring::before { background: var(--surface); }
[data-theme="dark"] .svc-ring { background: conic-gradient(var(--aqua-2) calc(var(--p) * 1%), var(--mist-2) 0); }

/* ---- Services: "Ready to apply" document checklist (dark) ----
   The numbers, icon tiles, tick rings and progress track used light-theme
   teals that vanish on the dark card. These use the aqua accents instead. */
[data-theme="dark"] .rd-track { stroke: #24505b; }
[data-theme="dark"] .rd-num { color: var(--aqua-2); }
[data-theme="dark"] .rd-ico { background: #1d4a55; color: var(--aqua); }
[data-theme="dark"] .rd-tick { border-color: rgba(230, 246, 249, 0.45); }
[data-theme="dark"] .rd-item:hover { border-color: var(--aqua-2); }
[data-theme="dark"] .rd-body small,
[data-theme="dark"] .rd-note,
[data-theme="dark"] .rd-sub { color: var(--ink-2); }

/* ---- EMI calculator page (dark) ---- */
[data-theme="dark"] {
  --warm: #f7c77f;
  --warm-soft: #3d3014;
  --warm-ink: #ffe3ad;
  --err: #ff9a8a;
  --ok: #5fd0a9;
  --alert: #f0b64a;
  --danger: #ff8a6e;
}
[data-theme="dark"] .sw-prin,
[data-theme="dark"] .emi-bar-prin { background: var(--aqua-2); }
[data-theme="dark"] .emi-type[aria-selected="true"] { background: var(--teal-700); }
[data-theme="dark"] .race-tag { background: #1d3d4b; color: var(--aqua); }
[data-theme="dark"] .race-tag.is-warm { background: var(--warm-soft); color: var(--warm-ink); }
[data-theme="dark"] .race-diff.is-saving { color: var(--aqua); }
[data-theme="dark"] .gauge.is-ok .gauge-fill { stroke: var(--ok); }
[data-theme="dark"] .afford-amount,
[data-theme="dark"] .ticket-formula var,
[data-theme="dark"] .ticket-example dt,
[data-theme="dark"] .sym,
[data-theme="dark"] .faq-num,
[data-theme="dark"] .faq-icon { color: var(--aqua); }
[data-theme="dark"] .sym,
[data-theme="dark"] .faq-icon,
[data-theme="dark"] .plan-check { background: #1d3d4b; }
[data-theme="dark"] .btn-primary { background: var(--teal-700); }
[data-theme="dark"] .btn-primary:hover { background: #26808f; }
[data-theme="dark"] .emi-milestones > div { background: #0b262d; }
[data-theme="dark"] .faq-item[open] .faq-icon { background: var(--teal-700); color: #fff; }

/* ---------- Home sections (v10.2) ---------- */
[data-theme="dark"] .ln-line { stroke: var(--aqua); }
[data-theme="dark"] .ln-bar span { background: linear-gradient(90deg, var(--teal-700), var(--aqua)); }
[data-theme="dark"] .ln-faq details[open] summary i { background: var(--aqua); color: var(--teal-950); }
[data-theme="dark"] .bs-fill { stroke: var(--aqua); }
[data-theme="dark"] .bs-item[aria-checked="true"] .bs-tick { background: var(--aqua); border-color: var(--aqua); color: var(--teal-950); }
[data-theme="dark"] .lf-opt[aria-pressed="true"],
[data-theme="dark"] .as-tab[aria-selected="true"] .as-initials { background: var(--aqua); border-color: var(--aqua); color: var(--teal-950); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .ln-line { stroke: var(--aqua); }
  :root:not([data-theme="light"]) .ln-bar span { background: linear-gradient(90deg, var(--teal-700), var(--aqua)); }
  :root:not([data-theme="light"]) .ln-faq details[open] summary i { background: var(--aqua); color: var(--teal-950); }
  :root:not([data-theme="light"]) .bs-fill { stroke: var(--aqua); }
  :root:not([data-theme="light"]) .bs-item[aria-checked="true"] .bs-tick { background: var(--aqua); border-color: var(--aqua); color: var(--teal-950); }
  :root:not([data-theme="light"]) .lf-opt[aria-pressed="true"],
  :root:not([data-theme="light"]) .as-tab[aria-selected="true"] .as-initials { background: var(--aqua); border-color: var(--aqua); color: var(--teal-950); }
}

/* ---------- Services sideways cards (dark) ---------- */
[data-theme="dark"] .hz-item { background: var(--surface); border-color: var(--border); }
[data-theme="dark"] .hz-icon { box-shadow: 0 0 0 6px var(--surface); }
[data-theme="dark"] .hz-label { color: #8fb7d9; }
[data-theme="dark"] .hz-body p { color: var(--muted-text); }
[data-theme="dark"] .hz-tags li { background: var(--surface-2); color: var(--heading); }

/* ---------- 404 page (dark) ---------- */
[data-theme="dark"] .nf-link .arrow { color: #8fb7d9; }

/* ---------- Services sticky story (dark) ---------- */
[data-theme="dark"] .svs-beat h3 { color: var(--heading); }
[data-theme="dark"] .svs-beat p { color: var(--muted-text); }
[data-theme="dark"] .svs-tags li { background: var(--surface-2); color: var(--heading); }
[data-theme="dark"] .svs-num { color: #8fb7d9; }

/* ---------- About page: new sections (dark) ---------- */
[data-theme="dark"] .ab-orbit { background: linear-gradient(180deg, var(--bg) 0%, var(--surface) 100%); }
[data-theme="dark"] .ab-node-in,
[data-theme="dark"] .ab-node-label,
[data-theme="dark"] .ab-panel,
[data-theme="dark"] .ab-receipt { background: var(--surface); color: var(--ink); border-color: var(--rule); }
[data-theme="dark"] .ab-node { color: var(--heading); }
[data-theme="dark"] .ab-node.is-active .ab-node-in { background: var(--aqua-2); color: var(--teal-950); }
[data-theme="dark"] .ab-ring { border-color: rgba(166, 231, 239, 0.3); }
[data-theme="dark"] .ab-ring::after { border-color: rgba(166, 231, 239, 0.14); }
[data-theme="dark"] .ab-rc-head strong,
[data-theme="dark"] .ab-lines li,
[data-theme="dark"] .ab-total span,
[data-theme="dark"] .ab-panel-list li,
[data-theme="dark"] .ab-panel h3 { color: var(--heading); }
[data-theme="dark"] .ab-total strong,
[data-theme="dark"] .ab-rc-brand,
[data-theme="dark"] .ab-panel-kicker,
[data-theme="dark"] .ab-panel-list i { color: #8fb7d9; }
[data-theme="dark"] .ab-hint,
[data-theme="dark"] .ab-panel > p:not(.ab-panel-kicker),
[data-theme="dark"] .ab-rc-copy > p:not(.eyebrow),
[data-theme="dark"] .ab-emi,
[data-theme="dark"] .ab-emi strong { color: var(--muted-text); }
[data-theme="dark"] .ab-emi strong { color: var(--heading); }
[data-theme="dark"] .ab-lines li { border-color: var(--border); }
[data-theme="dark"] .ab-rc-head { border-color: var(--border); }
[data-theme="dark"] .ab-total { border-color: var(--heading); }
/* "Add optional home insurance" switch. Uses only tokens defined in this theme.
   Off: a visible light-teal track with a bright thumb. On: aqua track, dark thumb (base rules). */
[data-theme="dark"] .ab-switch { background: var(--surface); color: var(--ink); border-color: var(--rule); }
[data-theme="dark"] .ab-switch:hover { border-color: var(--aqua-2); }
[data-theme="dark"] .ab-knob { background: #35606a; }
[data-theme="dark"] .ab-knob::after { background: var(--ink); }
[data-theme="dark"] .ab-switch[aria-checked="true"] .ab-knob { background: var(--aqua); }
[data-theme="dark"] .ab-switch[aria-checked="true"] .ab-knob::after { background: var(--teal-950); }

/* ---------- Contact: map and loan enquiry form (dark) ---------- */
[data-theme="dark"] .ldf { background: linear-gradient(180deg, var(--bg) 0%, var(--surface) 100%); }
[data-theme="dark"] .ldf-card { background: var(--surface); border-color: var(--border); }
[data-theme="dark"] .ldf-set legend,
[data-theme="dark"] .ldf-radio-lbl { color: var(--heading); }
[data-theme="dark"] .ldf-select { background: #0f2034; color: var(--text); border-color: #2b4a70; }
[data-theme="dark"] .ldf-chip span { background: #0f2034; color: var(--text); border-color: #2b4a70; }
[data-theme="dark"] .ldf-chip input:checked + span { background: var(--aqua-2); color: var(--teal-950); border-color: var(--aqua-2); }
[data-theme="dark"] .ldf-privacy { color: var(--muted-text); }
[data-theme="dark"] .ldf-success p { color: var(--muted-text); }
[data-theme="dark"] .ct-map-open { background: var(--surface); color: var(--heading); }

/* ---------- Visibility fixes (dark) ---------- */
/* 1. Back-to-top button: dark arrow on an aqua disc */
[data-theme="dark"] .back-to-top { background: #a6e7ef; color: #041a1f; }
[data-theme="dark"] .back-to-top:hover { background: #ffffff; }
/* 2. EMI "Live" line */
[data-theme="dark"] .ec-live { background: rgba(166, 231, 239, 0.12); color: #a6e7ef; }
[data-theme="dark"] .ec-live i { background: #a6e7ef; }
/* 3. Selected tenure row EMI */
[data-theme="dark"] .ec-ten.is-on .ec-ten-emi { color: #a6e7ef; }
/* 4. "Before you sign" numbers 01-05 */
[data-theme="dark"] .bs-num { color: #7fd6e2; }
/* 5. "Good to know" icon badges: dark glyph on aqua disc */
[data-theme="dark"] .hz-icon, [data-theme="dark"] .hz-icon i { color: #041a1f; }
/* 6. "Lowest rate" pill: dark text on amber */
[data-theme="dark"] .ln-best { color: #041a1f; }
/* 7. Loan finder Personal and Car icons */
[data-theme="dark"] .lf-purpose i { color: #7fd6e2; }
/* 8. Gauge track: visible against the dark card */
[data-theme="dark"] .gauge-track { stroke: #4f8590; }
/* 11. Form placeholders: readable on dark fields */
[data-theme="dark"] input::placeholder, [data-theme="dark"] textarea::placeholder { color: #b9d3d9; opacity: 1; }

/* ---------- Home 1: calculator, quiz, contact (dark) ---------- */
/* Calculator values: aqua on the dark card instead of dark teal */
[data-theme="dark"] .ix-field-head output { color: #a6e7ef; }
/* Slider fill in aqua so the track and thumb read on the dark card */
[data-theme="dark"] .ix-range { accent-color: #a6e7ef; }
/* Legend marker for "Buffer kept free" */
[data-theme="dark"] .ix-dot.is-c { background: #5aa9b5; }
/* Quiz tiles: aqua icons on a lifted tile */
[data-theme="dark"] .ix-choice i { background: #0f3d47; color: #a6e7ef; }
[data-theme="dark"] .ix-choice.is-picked i { background: var(--aqua); color: var(--teal-950); }
/* Contact links: aqua text, which reads on the dark cards */
[data-theme="dark"] .sc-link { color: #a6e7ef; }
/* Active tab (Home Loan / Personal Loan): lighter teal so the pill is visible */
[data-theme="dark"] .tab[aria-selected="true"] { background: #1d6474; color: #ffffff; }
/* Sliders (all pages, dark): aqua fill and thumb ring, lighter unfilled track */
[data-theme="dark"] input[type="range"]::-webkit-slider-runnable-track {
  background: linear-gradient(to right, #7fd6e2 0 var(--fill, 50%), #3f6f79 var(--fill, 50%) 100%);
}
[data-theme="dark"] input[type="range"]::-moz-range-track { background: #3f6f79; }
[data-theme="dark"] input[type="range"]::-moz-range-progress { background: #7fd6e2; }
[data-theme="dark"] input[type="range"]::-webkit-slider-thumb { border-color: #7fd6e2; background: #0e2c33; box-shadow: 0 0 0 4px rgba(127, 214, 226, 0.18); }
[data-theme="dark"] input[type="range"]::-moz-range-thumb { border-color: #7fd6e2; background: #0e2c33; }
/* Every range slider in dark mode: aqua accent (thumb and fill), so none is lost on the dark card */
[data-theme="dark"] input[type="range"] { accent-color: #7fd6e2; }
[data-theme="dark"] .lf-range { accent-color: #7fd6e2; }