/* ═══════════════════════════════════════════════════════════════════════
   ASTROSEVAK — Chandan design system · warm rose / plum / sandalwood gold
   Mirrors the mobile app (astroly-frontend) Chandan theme exactly.
   Light mode is default; dark mode via [data-theme="dark"].
   Loaded via {% static "css/astrosevak.css" %} — plain CSS, no build step

   ─── Token model ─────────────────────────────────────────────────────
   --primary / --primary-2 — rose (primary brand, #B5546C)
   --accent  / --accent-2  — sandalwood gold (ratings, special CTAs)
   --secondary             — plum (secondary brand, #5A3149)
   --grad-start/--grad-end — rose → plum duotone for headlines + CTAs
   --gold                  — accent alias (legacy)

   Legacy --cosmic/--cosmic-2/--magenta/--magenta-2 tokens are aliased
   to Chandan values so existing templates keep rendering without edits.
   ═══════════════════════════════════════════════════════════════════════ */

:root {
  --intensity: 1;
  --ease:      cubic-bezier(0.25, 0.1, 0.25, 1);
  --ease-soft: cubic-bezier(0.4, 0, 0.2, 1);
  --max-width: 1240px;
}

/* ─── CHANDAN LIGHT — default (matches mobile light mode) ───────────── */
:root, :root[data-theme="light"] {
  /* Backgrounds — warm sand */
  --bg:        #FBF4EE;
  --bg-2:      #F6ECE3;
  --bg-3:      #ECDFD3;
  --surface:   #FFFFFF;
  --surface-2: #F6ECE3;
  --surface-3: #F0E5D8;

  /* Lines — rose-tinted */
  --line:      rgba(181, 84, 108, 0.08);
  --line-2:    rgba(181, 84, 108, 0.18);
  --line-3:    rgba(201, 154, 91, 0.35);

  /* Ink — dark plum text */
  --ink:       #432130;
  --ink-2:     #6B4050;
  --ink-3:     #8A6A72;
  --ink-4:     #B49AA0;

  /* Brand — rose + plum + sandalwood gold */
  --primary:    #B5546C;   /* rose */
  --primary-2:  #D4798E;   /* lighter rose — links, eyebrow accents */
  --secondary:  #5A3149;   /* plum */
  --accent:     #C99A5B;   /* sandalwood gold — ratings, special CTAs */
  --accent-2:   #D9AE6E;
  --rose:       #B5546C;
  --rose-2:     #D4798E;
  --gold:       #C99A5B;   /* accent alias for legacy templates */
  --gold-2:     #D9AE6E;
  --ochre:      #A87C3F;

  /* Duotone gradient — italic accent words + primary CTA */
  --grad-start: #B5546C;   /* rose */
  --grad-end:   #5A3149;   /* plum */

  /* Legacy aliases (so unswept templates still render) */
  --cosmic:    var(--primary);
  --cosmic-2:  var(--primary-2);
  --cosmic-3:  #934056;
  --magenta:   #D0596B;    /* danger / error accent */
  --magenta-2: #E07A85;

  /* Stars — warm tones for light mode starfield */
  --star-1: #D4798E;
  --star-2: #C99A5B;
  --star-3: #B49AA0;

  /* Subtle warm glow on the page background */
  --glow-bg:
    radial-gradient(ellipse 60% 35% at 50% -10%, color-mix(in oklab, var(--primary) calc(6% * var(--intensity)), transparent), transparent 60%),
    radial-gradient(ellipse 45% 35% at 100% 60%, color-mix(in oklab, var(--accent) calc(5% * var(--intensity)), transparent), transparent 60%);
}

/* ─── CHANDAN DARK — matches mobile dark mode ───────────────────────── */
:root[data-theme="dark"] {
  /* Backgrounds — deep plum night */
  --bg:        #241019;
  --bg-2:      #36222C;
  --bg-3:      #412C36;
  --surface:   #36222C;
  --surface-2: #412C36;
  --surface-3: #4A3540;

  /* Lines */
  --line:      rgba(212, 121, 142, 0.10);
  --line-2:    rgba(212, 121, 142, 0.22);
  --line-3:    rgba(217, 174, 110, 0.30);

  /* Ink */
  --ink:       #F6E9EC;
  --ink-2:     #C2A3AC;
  --ink-3:     #8F7079;
  /* --ink-4 is the faintest text tone (help text, placeholders, muted
     labels). The old dark value #5A3149 was as dark as the surfaces, so
     this text was effectively invisible on dark — bumped to a readable
     muted mauve that still sits just below --ink-3 in the hierarchy. */
  --ink-4:     #80636C;

  /* Brand */
  --primary:    #D4798E;
  --primary-2:  #E090A2;
  --secondary:  #C99AAE;
  --accent:     #D9AE6E;
  --accent-2:   #E8C48C;
  --rose:       #D4798E;
  --rose-2:     #E090A2;
  --gold:       #D9AE6E;
  --gold-2:     #E8C48C;
  --ochre:      #C99A5B;

  --grad-start: #D4798E;
  --grad-end:   #C99AAE;

  --cosmic:    var(--primary);
  --cosmic-2:  var(--primary-2);
  --cosmic-3:  #B5546C;
  --magenta:   #E58193;
  --magenta-2: #EFA8B0;

  --star-1: #F6E9EC;
  --star-2: #D4798E;
  --star-3: #D9AE6E;

  --glow-bg:
    radial-gradient(ellipse 60% 35% at 50% -10%, color-mix(in oklab, var(--primary) calc(12% * var(--intensity)), transparent), transparent 60%),
    radial-gradient(ellipse 45% 35% at 100% 60%, color-mix(in oklab, var(--accent) calc(8% * var(--intensity)), transparent), transparent 60%);
}

/* ─── Reset & base ─────────────────────────────────────────────────── */
*, *::before, *::after {
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

html, body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: 'Mukta', system-ui, sans-serif;
  font-weight: 400;
  font-size: 16px;
  line-height: 1.55;
  transition: background 0.6s var(--ease), color 0.6s var(--ease);
}
html body { color: var(--ink); } /* beats Tailwind preflight if enabled */

body {
  min-height: 100vh;
  overflow-x: hidden;
}

body::before {
  content: '';
  position: fixed; inset: 0; z-index: -1;
  pointer-events: none;
  background: var(--glow-bg);
  transition: background 0.6s var(--ease);
}

img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; color: inherit; }

::selection { background: var(--cosmic); color: #fff; }

/* ─── Typography ─────────────────────────────────────────────────────
   Editorial serif headlines, Fraunces (optical size, wght 500–700).
   The signature pattern is a straight-Roman headline with one phrase
   italicised in a duotone gradient — wrap it in <em class="text-grad">. */
h1, h2, h3, h4, h5, h6 {
  font-family: 'Fraunces', Georgia, serif;
  letter-spacing: -0.02em;
  font-weight: 700;
  margin: 0;
  color: var(--ink);
  line-height: 1.05;
}

h1 { font-size: clamp(2.4rem, 5.5vw, 4.5rem); font-weight: 700; line-height: 1.05; }
h2 { font-size: clamp(1.75rem, 2.6vw + 1rem, 3.1rem); line-height: 1.1; }
h3 { font-size: clamp(1.25rem, 1.1vw + 0.9rem, 1.85rem); line-height: 1.15; }

/* Italic gradient accent — the editorial signature. Used for one
   phrase per headline. Stays italic + Roman-light weight against the
   bold straight type around it. */
.text-grad {
  background: linear-gradient(90deg, var(--grad-start), var(--grad-end));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  font-style: italic;
  font-weight: 400;
}

em { font-style: italic; }

.font-display, .font-serif { font-family: 'Fraunces', Georgia, serif; }
.font-sans { font-family: 'Mukta', system-ui, sans-serif; }
.devanagari { font-family: 'Noto Sans Devanagari', serif; font-style: normal; letter-spacing: 0; }
html.no-deva .devanagari { display: none !important; }

.eyebrow {
  display: inline-flex; align-items: center; gap: 0.55rem;
  font-family: 'Mukta', sans-serif;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--primary-2);
}
.eyebrow .deva {
  font-family: 'Noto Sans Devanagari', serif;
  text-transform: none;
  letter-spacing: 0;
  font-size: 0.92rem;
  color: var(--primary-2);
}
.eyebrow::before {
  content: ''; width: 1.75rem; height: 1px;
  background: var(--line-2);
}
.eyebrow.no-rule::before { display: none; }
.eyebrow.centered { justify-content: center; }

/* Legacy alias — older templates wrap their italic accent words in
   `text-cosmic`. We delegate to the new `.text-grad` so both classes
   produce the same signature treatment in either theme. */
.text-cosmic {
  background: linear-gradient(90deg, var(--grad-start), var(--grad-end));
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
  font-style: italic;
}

.text-gold    { color: var(--gold); }
.text-cosmic-solid { color: var(--cosmic-2); }
.text-ink-2   { color: var(--ink-2); }
.text-ink-3   { color: var(--ink-3); }
.text-ink-4   { color: var(--ink-4); }

.meta {
  font-family: 'Mukta', sans-serif;
  font-size: 0.85rem;
  color: var(--ink-3);
}

.lead {
  font-size: clamp(1.05rem, 0.6vw + 0.9rem, 1.25rem);
  color: var(--ink-2);
  line-height: 1.55;
  max-width: 48ch;
}

/* ─── Dividers ─────────────────────────────────────────────────────── */
.rule {
  height: 1px; width: 100%;
  background: linear-gradient(90deg, transparent, var(--line-2), transparent);
  border: 0;
}
.rule-solid { height: 1px; background: var(--line); border: 0; }

/* ─── Buttons ──────────────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: 0.55rem;
  padding: 0.8rem 1.5rem;
  border-radius: 999px;
  font-family: 'Mukta', sans-serif;
  font-weight: 600; font-size: 0.9rem;
  letter-spacing: 0.01em;
  border: none; cursor: pointer;
  transition: transform 0.25s var(--ease-soft), box-shadow 0.25s var(--ease-soft), background 0.3s var(--ease-soft), color 0.3s var(--ease-soft), border-color 0.3s var(--ease-soft);
  min-height: 44px;
  text-decoration: none;
  white-space: nowrap;
}
.btn:active { transform: translateY(1px); }
.btn:disabled { opacity: 0.5; cursor: not-allowed; }

/* Primary CTA — modernised v3 (round, vibrant, legible).
   Saturated 4-stop diagonal: cosmic-light → cosmic → magenta → cosmic-deep,
   anchored at extremes so the gradient shows real movement instead of
   washing out into a single muddied tone in the middle. White text gets a
   subtle dark text-shadow so it reads cleanly across every gradient stop
   (the lightest stop is the readability risk). 999px radius keeps the
   pill shape; padding 1rem × 2.1rem makes the button substantial. */
.btn-primary {
  background:
    linear-gradient(135deg,
      color-mix(in oklab, var(--grad-start) 88%, white 12%) 0%,
      var(--primary) 38%,
      var(--grad-end) 72%,
      color-mix(in oklab, var(--magenta) 80%, var(--primary) 20%) 100%);
  color: #fff;
  padding: 1rem 2.1rem;
  font-weight: 700;
  font-size: 0.95rem;
  letter-spacing: 0.005em;
  min-height: 50px;
  border-radius: 999px;
  text-shadow: 0 1px 2px rgba(67, 33, 48, 0.22);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.30),
    inset 0 -1px 0 rgba(67,33,48,0.15),
    0 4px 14px -4px color-mix(in oklab, var(--primary) calc(60% * var(--intensity)), transparent),
    0 20px 44px -16px color-mix(in oklab, var(--magenta) calc(55% * var(--intensity)), transparent);
  position: relative;
  isolation: isolate;
  overflow: hidden;
}
/* sheen — a soft diagonal highlight that lives on the surface, becomes
   noticeable on hover. Adds polish without distracting at rest. */
.btn-primary::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg,
    rgba(255,255,255,0.24) 0%,
    rgba(255,255,255,0.08) 30%,
    rgba(255,255,255,0) 55%);
  opacity: 0.7;
  transition: opacity 0.3s var(--ease-soft);
  pointer-events: none;
  z-index: -1;
}
.btn-primary:hover:not(:disabled) {
  transform: translateY(-2px);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.40),
    inset 0 -1px 0 rgba(67,33,48,0.13),
    0 8px 20px -4px color-mix(in oklab, var(--primary) calc(70% * var(--intensity)), transparent),
    0 28px 56px -16px color-mix(in oklab, var(--magenta) calc(65% * var(--intensity)), transparent);
}
.btn-primary:hover:not(:disabled)::before { opacity: 1; }
.btn-primary:active:not(:disabled) {
  transform: translateY(0);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.10),
    inset 0 2px 5px rgba(67,33,48,0.22),
    0 2px 8px -2px color-mix(in oklab, var(--primary) 50%, transparent);
}

/* ─── Saffron variant ─────────────────────────────────────────────────
   Warm, festival-aligned alternate to the cosmic gradient. Use for
   secondary high-value CTAs (e.g. "Begin a pooja", "Recharge wallet"). */
.btn-saffron {
  background:
    linear-gradient(135deg,
      color-mix(in oklab, var(--gold-2, #FFD68A) 88%, white 12%) 0%,
      var(--gold, #FFB84D) 45%,
      color-mix(in oklab, var(--gold, #FFB84D) 80%, var(--magenta) 20%) 100%);
  color: #3A1F2E;
  padding: 1rem 2.1rem;
  font-weight: 700;
  font-size: 0.95rem;
  letter-spacing: 0.005em;
  min-height: 50px;
  border-radius: 999px;
  text-shadow: 0 1px 0 rgba(255, 240, 200, 0.6);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.55),
    inset 0 -1px 0 rgba(120,70,10,0.18),
    0 4px 14px -4px rgba(216, 148, 37, 0.45),
    0 20px 44px -16px rgba(255, 184, 77, 0.50);
  position: relative;
  isolation: isolate;
  overflow: hidden;
}
.btn-saffron::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg,
    rgba(255,255,255,0.50) 0%,
    rgba(255,255,255,0.10) 35%,
    rgba(255,255,255,0) 60%);
  opacity: 0.7;
  transition: opacity 0.3s var(--ease-soft);
  pointer-events: none;
  z-index: -1;
}
.btn-saffron:hover:not(:disabled) {
  transform: translateY(-2px);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.65),
    inset 0 -1px 0 rgba(120,70,10,0.14),
    0 8px 22px -4px rgba(216, 148, 37, 0.55),
    0 28px 58px -16px rgba(255, 184, 77, 0.60);
}
.btn-saffron:hover:not(:disabled)::before { opacity: 1; }
.btn-saffron:active:not(:disabled) {
  transform: translateY(0);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.20),
    inset 0 2px 5px rgba(120,70,10,0.30),
    0 2px 8px -2px rgba(216, 148, 37, 0.40);
}

/* ─── Aurora variant ──────────────────────────────────────────────────
   Cosmic + saffron + magenta in one sweep — the "festival nebula" mood.
   Reserve for hero / once-per-page CTAs; it's the loudest of the three. */
.btn-aurora {
  background:
    linear-gradient(135deg,
      var(--cosmic-2, #5BA3FF) 0%,
      var(--primary) 28%,
      var(--magenta) 60%,
      var(--gold, #FFB84D) 100%);
  color: #fff;
  padding: 1rem 2.1rem;
  font-weight: 700;
  font-size: 0.95rem;
  letter-spacing: 0.005em;
  min-height: 50px;
  border-radius: 999px;
  text-shadow: 0 1px 2px rgba(67, 33, 48, 0.22);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.35),
    inset 0 -1px 0 rgba(67,33,48,0.15),
    0 4px 14px -4px rgba(30, 111, 224, 0.40),
    0 20px 44px -14px rgba(232, 121, 176, 0.45);
  position: relative;
  isolation: isolate;
  overflow: hidden;
}
.btn-aurora::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 30% 30%, rgba(255,255,255,0.30) 0%, transparent 55%),
    linear-gradient(135deg,
      rgba(255,255,255,0.20) 0%,
      rgba(255,255,255,0) 45%);
  opacity: 0.75;
  transition: opacity 0.3s var(--ease-soft);
  pointer-events: none;
  z-index: -1;
}
.btn-aurora:hover:not(:disabled) {
  transform: translateY(-2px);
  filter: saturate(1.08);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.45),
    inset 0 -1px 0 rgba(67,33,48,0.13),
    0 8px 22px -4px rgba(30, 111, 224, 0.50),
    0 28px 58px -16px rgba(232, 121, 176, 0.60);
}
.btn-aurora:hover:not(:disabled)::before { opacity: 1; }
.btn-aurora:active:not(:disabled) {
  transform: translateY(0);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.15),
    inset 0 2px 5px rgba(67,33,48,0.22),
    0 2px 8px -2px rgba(30, 111, 224, 0.40);
}

/* Ghost — refined visual tokens, flexible sizing.
   Padding/min-height are scoped to `.btn.btn-ghost` so inline anchor
   uses (e.g. "Create an account" tail link on the login page) stay
   compact instead of becoming 48px-tall blocks. */
.btn-ghost {
  background: transparent;
  color: var(--ink);
  border: 1px solid var(--line-2);
  padding: 0.55rem 1.1rem;
  font-weight: 600;
  letter-spacing: -0.005em;
  position: relative;
  overflow: hidden;
}
.btn.btn-ghost {
  padding: 0.9rem 1.85rem;
  min-height: 48px;
}
.btn-ghost::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(135deg,
    color-mix(in oklab, var(--primary) 12%, transparent) 0%,
    color-mix(in oklab, var(--magenta) 10%, transparent) 100%);
  opacity: 0;
  transition: opacity 0.3s var(--ease-soft);
  pointer-events: none;
  z-index: -1;
}
.btn-ghost:hover:not(:disabled) {
  border-color: var(--primary-2);
  color: var(--primary-2);
  transform: translateY(-1px);
}
.btn-ghost:hover:not(:disabled)::before { opacity: 1; }

.btn-gold {
  background: linear-gradient(135deg, var(--gold-2), var(--gold));
  color: #432130;  /* dark plum ink on sandalwood gold */
  box-shadow: 0 8px 22px -8px color-mix(in oklab, var(--gold) calc(55% * var(--intensity)), transparent);
}
.btn-gold:hover:not(:disabled) { transform: translateY(-1px); }

.btn-ink   { background: var(--ink); color: var(--bg); }
.btn-ink:hover:not(:disabled) { transform: translateY(-1px); }

.btn-sm { padding: 0.55rem 1.1rem; font-size: 0.82rem; min-height: 40px; }
.btn-lg { padding: 1rem 1.8rem; font-size: 0.95rem; min-height: 52px; }

/* ─── Cards ────────────────────────────────────────────────────────── */
.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 20px;
  transition: transform 0.4s var(--ease-soft), border-color 0.4s var(--ease-soft), box-shadow 0.4s var(--ease-soft);
}
.card-hover:hover {
  transform: translateY(-3px);
  border-color: var(--line-2);
  box-shadow: 0 26px 60px -24px color-mix(in oklab, var(--cosmic) calc(40% * var(--intensity)), transparent);
}
.card-accent {
  background: linear-gradient(145deg, var(--surface) 0%, var(--surface-2) 100%);
  border: 1px solid var(--line-2);
  border-radius: 20px;
}

/* ─── Inputs ───────────────────────────────────────────────────────── */
.input, input.input, textarea.input, select.input {
  display: block; width: 100%;
  background: var(--surface);
  border: 1px solid var(--line);
  color: var(--ink);
  border-radius: 12px;
  padding: 0.85rem 1rem;
  font-size: 0.95rem;
  font-family: 'Mukta', sans-serif;
  outline: none;
  transition: border-color 0.25s var(--ease-soft), box-shadow 0.25s var(--ease-soft), background 0.25s var(--ease-soft);
  min-height: 48px;
}
.input:focus, input.input:focus, textarea.input:focus, select.input:focus {
  border-color: var(--cosmic);
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--cosmic) 20%, transparent);
}
.input::placeholder { color: var(--ink-4); }
textarea.input { min-height: 120px; border-radius: 16px; resize: vertical; line-height: 1.55; }
select.input {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23B5546C' stroke-width='1.8'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1rem center;
  padding-right: 2.75rem;
}

.input-underline {
  display: block; width: 100%;
  background: transparent; border: 0; border-bottom: 1px solid var(--line-2);
  color: var(--ink); padding: 0.7rem 0;
  font-size: 1rem; font-family: 'Mukta', sans-serif;
  outline: none; transition: border-color 0.25s var(--ease-soft);
  min-height: 40px;
  border-radius: 0;
}
.input-underline:focus { border-bottom-color: var(--cosmic-2); }
.input-underline::placeholder { color: var(--ink-4); }

.label {
  display: block;
  font-size: 0.72rem; font-weight: 600;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: 0.45rem;
}

/* ─── Badges / chips ───────────────────────────────────────────────── */
.badge {
  display: inline-flex; align-items: center; gap: 0.4rem;
  padding: 0.28rem 0.7rem;
  border-radius: 999px;
  font-family: 'Mukta', sans-serif;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  border: 1px solid var(--line-2);
  background: color-mix(in oklab, var(--cosmic) 12%, transparent);
  color: var(--cosmic-2);
}
.badge .dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.badge-online { color: #3FD181; border-color: color-mix(in oklab, #3FD181 35%, transparent); background: color-mix(in oklab, #3FD181 12%, transparent); }
.badge-online .dot { background: #3FD181; animation: pulse 2s infinite; }
.badge-offline { color: var(--ink-4); border-color: var(--line); background: transparent; }
.badge-busy { color: var(--magenta-2); background: color-mix(in oklab, var(--magenta) 15%, transparent); border-color: color-mix(in oklab, var(--magenta) 35%, transparent); }
.badge-gold { color: var(--gold); border-color: var(--line-3); background: color-mix(in oklab, var(--gold) 12%, transparent); }

.chip {
  display: inline-flex; align-items: center; gap: 0.4rem;
  padding: 0.5rem 0.9rem;
  border-radius: 999px;
  background: var(--surface);
  border: 1px solid var(--line);
  color: var(--ink-2);
  font-size: 0.8rem; font-weight: 500;
  cursor: pointer;
  transition: all 0.25s var(--ease-soft);
  white-space: nowrap;
  font-family: 'Mukta', sans-serif;
}
.chip:hover { border-color: var(--primary-2); color: var(--ink); }
.chip.active {
  background: linear-gradient(90deg, var(--grad-start), var(--grad-end));
  border-color: transparent;
  color: #fff;
}

/* ─── Logo — SVG dark-mode adaptation ──────────────────────────────── */
/* The transparent SVG has dark-plum text (#432130), perfect on warm-sand.
   In dark mode, invert + hue-rotate brings it to a light warm tone that
   reads cleanly on the deep-plum dark nav background. */
[data-theme="dark"] .nav-logo-img {
  filter: invert(0.88) hue-rotate(180deg) saturate(0.7) brightness(1.15);
}

/* ─── Theme toggle (light / dark) ──────────────────────────────────── */
/* Circular icon button in the nav. Shows the moon in light mode (tap to go
   dark) and the sun in dark mode (tap to go light). Driven by AstroTheme in
   base.html — it flips [data-theme] on <html>, which swaps the icons below. */
.theme-toggle {
  display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; padding: 0;
  border-radius: 999px;
  border: 1px solid var(--line-2);
  background: var(--surface);
  color: var(--ink-2);
  cursor: pointer;
  transition: color .15s ease, border-color .15s ease, background .15s ease;
}
.theme-toggle:hover { color: var(--ink); border-color: var(--primary-2); }
.theme-toggle svg { display: block; }
/* Light mode → offer dark → show moon. Dark mode → offer light → show sun. */
.theme-toggle .ic-sun,
.nav-mobile-theme .ic-sun,
.nav-mobile-theme .theme-label-light { display: none; }
[data-theme="dark"] .theme-toggle .ic-moon,
[data-theme="dark"] .nav-mobile-theme .ic-moon,
[data-theme="dark"] .nav-mobile-theme .theme-label-dark { display: none; }
[data-theme="dark"] .theme-toggle .ic-sun,
[data-theme="dark"] .nav-mobile-theme .ic-sun { display: block; }
[data-theme="dark"] .nav-mobile-theme .theme-label-light { display: inline; }
/* On narrow phones the bar is tight (logo + Begin + hamburger), so drop the
   top-bar toggle there — the labelled entry inside the mobile drawer covers it. */
@media (max-width: 600px) { .nav-actions > .theme-toggle { display: none; } }

/* ─── Nav ──────────────────────────────────────────────────────────── */
.nav {
  position: sticky; top: 0; z-index: 50;
  backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
  /* Spec: solid bg-2 bar with a single 1px line below — no gradient. */
  background: color-mix(in oklab, var(--bg-2) 88%, transparent);
  border-bottom: 1px solid var(--line);
}
.nav-inner {
  max-width: var(--max-width); margin: 0 auto;
  display: flex; align-items: center; justify-content: space-between;
  padding: 0.7rem 1.5rem;
  gap: 1.5rem;
}
.nav-logo { display: flex; align-items: center; gap: 0.7rem; }
.nav-logo .mark {
  height: 40px; width: auto; border-radius: 11px;
  display: block; color: #fff;
  position: relative; overflow: hidden;
  flex-shrink: 0;
}
.nav-logo .mark::after {
  content: ''; position: absolute; inset: 0;
  /* background: color-mix(in oklab, var(--cosmic) 80%, var(--surface)); */
}
.nav-logo .word {
  font-family: 'Fraunces', serif; font-size: 1.4rem; letter-spacing: -0.02em;
  color: var(--ink);
}
.nav-logo .word em { font-style: italic; color: var(--cosmic-2); font-weight: 500; }
.nav-logo .word .tld {
  font-style: normal;
  color: var(--gold);
  font-size: 0.62em;
  font-weight: 500;
  letter-spacing: 0;
  margin-left: 0.05em;
  vertical-align: 0.18em;
}

.nav-links {
  display: flex; align-items: center;
  /* Tighter gap + responsive sizing to absorb the longer SEO link labels
     ("Online Astrologer", "Janam Patrika", "Rashifal Today", "Kundali
     Matching") without two-line wraps. */
  gap: clamp(0.7rem, 1vw + 0.3rem, 1.4rem);
}
.nav-links a {
  color: var(--ink-3);
  font-size: clamp(0.78rem, 0.4vw + 0.65rem, 0.88rem);
  font-weight: 500;
  white-space: nowrap;  /* never break label across two lines */
  position: relative;
  transition: color 0.25s var(--ease-soft);
}
.nav-links a:hover { color: var(--ink); }
.nav-links a.active { color: var(--ink); }
.nav-links a.active::after {
  content: ''; position: absolute; bottom: -7px; left: 0; right: 0; height: 2px;
  background: linear-gradient(90deg, var(--grad-start), var(--grad-end));
  border-radius: 2px;
}

/* ─── Themed nav dropdowns ──────────────────────────────────────────
   Replaces the flat 10-link strip with thematic groups. Each `.nav-dd`
   wraps a button and a hidden menu that fades in on hover (desktop) or
   on click (open class). The button lights up like a normal nav link
   when its menu's section is the active page (e.g. /horoscope/ activates
   the "Today" dropdown). */
.nav-dd { position: relative; }
.nav-dd-btn {
  background: transparent;
  border: 0;
  cursor: pointer;
  font: inherit;
  color: var(--ink-3);
  font-size: clamp(0.78rem, 0.4vw + 0.65rem, 0.88rem);
  font-weight: 500;
  padding: 0;
  white-space: nowrap;
  transition: color 0.2s var(--ease-soft);
  display: inline-flex; align-items: center; gap: 0.3rem;
}
.nav-dd-btn:hover,
.nav-dd:hover .nav-dd-btn,
.nav-dd.active .nav-dd-btn { color: var(--ink); }
.nav-dd-caret {
  transition: transform 0.25s var(--ease-soft);
  opacity: 0.7;
}
.nav-dd:hover .nav-dd-caret { transform: rotate(180deg); }

/* Active section underline — same gradient bar the flat links use. */
.nav-dd.active .nav-dd-btn {
  position: relative;
}
.nav-dd.active .nav-dd-btn::after {
  content: '';
  position: absolute; bottom: -7px; left: 0; right: 0; height: 2px;
  background: linear-gradient(90deg, var(--grad-start), var(--grad-end));
  border-radius: 2px;
}

/* Menu panel */
.nav-dd-menu {
  position: absolute;
  top: calc(100% + 14px);
  left: 50%;
  transform: translateX(-50%) translateY(-6px) scale(0.98);
  transform-origin: top center;
  width: 280px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 0.4rem;
  box-shadow: 0 8px 28px -8px rgba(67,33,48,0.14), 0 2px 8px rgba(67,33,48,0.08);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition:
    opacity 0.22s var(--ease-soft),
    transform 0.22s var(--ease-soft),
    visibility 0s linear 0.22s;
  z-index: 60;
}
/* Invisible bridge so a fast diagonal mouse move from button to menu
   doesn't slip out of the hover hit-box and snap the dropdown shut. */
.nav-dd-menu::before {
  content: '';
  position: absolute;
  top: -16px; left: 0; right: 0;
  height: 16px;
}
.nav-dd:hover .nav-dd-menu,
.nav-dd:focus-within .nav-dd-menu,
.nav-dd-menu.open {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0) scale(1);
  pointer-events: auto;
  transition:
    opacity 0.18s var(--ease-soft),
    transform 0.20s var(--ease-soft),
    visibility 0s linear 0s;
}

.nav-dd-menu a {
  display: block;
  padding: 0.6rem 0.85rem;
  border-radius: 9px;
  color: var(--ink);
  font-size: 0.92rem;
  font-weight: 500;
  text-decoration: none;
  transition: background 0.2s, color 0.2s;
}
.nav-dd-menu a:hover {
  background: color-mix(in oklab, var(--primary) 10%, var(--surface-2));
  color: var(--primary-2);
}
.nav-dd-menu a .dd-sub {
  display: block;
  margin-top: 0.15rem;
  font-size: 0.76rem;
  font-weight: 400;
  color: var(--ink-4);
  letter-spacing: 0;
}
.nav-dd-menu a:hover .dd-sub { color: var(--ink-3); }

.nav-actions { display: flex; align-items: center; gap: 1rem; }

/* Auth dropdown */
.nav-user { position: relative; }
.nav-user-btn {
  display: flex; align-items: center; gap: 0.5rem;
  background: transparent; border: 0;
  color: var(--ink-2); cursor: pointer; padding: 4px 8px;
  border-radius: 999px;
  transition: color 0.2s;
}
.nav-user-btn:hover { color: var(--ink); }
.nav-user-btn img {
  width: 32px; height: 32px; border-radius: 50%; object-fit: cover;
  border: 1px solid var(--line-2);
}
.nav-user-menu {
  position: absolute; right: 0; top: calc(100% + 8px);
  width: 220px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 0.4rem;
  box-shadow: 0 8px 28px -8px rgba(67,33,48,0.14), 0 2px 8px rgba(67,33,48,0.08);
  /* Smooth fade instead of an instant display toggle. The node stays in
     layout (visibility hidden + pointer-events: none) so the cursor can
     bridge over it without a flicker. */
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px) scale(0.98);
  transform-origin: top right;
  pointer-events: none;
  /* Close transition is intentionally slower than open: gives the cursor
     a grace window when it briefly leaves the hover area. */
  transition:
    opacity 0.32s var(--ease-soft),
    transform 0.32s var(--ease-soft),
    visibility 0s linear 0.32s;
}
/* Invisible bridge between the button and the menu. The button is
   smaller than the menu, so we extend the catchment area beyond the
   menu's left edge as well. Without this, a fast diagonal mouse move
   between button and menu slips out of the `:hover` hit-box and snaps
   the menu shut. */
.nav-user-menu::before {
  content: '';
  position: absolute;
  left: -16px; right: -8px;
  top: -16px;
  height: 16px;
}
.nav-user:hover .nav-user-menu,
.nav-user:focus-within .nav-user-menu,
.nav-user-menu.open {
  opacity: 1;
  visibility: visible;
  transform: translateY(0) scale(1);
  pointer-events: auto;
  transition:
    opacity 0.20s var(--ease-soft),
    transform 0.22s var(--ease-soft),
    visibility 0s linear 0s;
}
/* When the dropdown is "pinned open" via click (.open), don't let an
   accidental mouse-leave fade it out — the click toggle owns dismissal. */
.nav-user-menu.open {
  transition:
    opacity 0.20s var(--ease-soft),
    transform 0.22s var(--ease-soft);
}
.nav-user-menu a, .nav-user-menu button {
  display: block; width: 100%; text-align: left;
  padding: 0.6rem 0.85rem; border-radius: 10px;
  font-size: 0.88rem; color: var(--ink-2);
  background: transparent; border: 0; cursor: pointer;
  transition: background 0.2s, color 0.2s;
}
.nav-user-menu a:hover, .nav-user-menu button:hover { background: var(--surface-2); color: var(--ink); }
.nav-user-menu hr { border: 0; border-top: 1px solid var(--line); margin: 0.35rem 0; }
.nav-user-menu .danger { color: var(--magenta-2); }

/* Theme toggle — hidden while we ship dark-only. The styles are kept
   above as commented stubs in git history; for now any leftover
   .theme-toggle markup is suppressed so it doesn't render. */
.theme-toggle { display: none !important; }

.nav-mobile-btn { display: none; background: none; border: 0; color: var(--ink); padding: 8px; cursor: pointer; }

/* Mobile drawer.
   The drawer sits inside the sticky <nav> bar; when it opens, the menu
   contents can be longer than the viewport (we ship ~20 links). The
   fix: cap the open drawer's height to the available viewport space
   under the nav header, and enable independent vertical scroll inside
   it. `overscroll-behavior: contain` stops the page underneath from
   scrolling once the drawer hits its bounds — no rubber-banding. The
   safe-area-inset-bottom padding gives notched / home-bar phones a
   tap-safe gap at the very bottom. */
.nav-mobile {
  display: none;
  padding: 0.4rem 1.25rem calc(1.25rem + env(safe-area-inset-bottom));
  background: var(--bg);
  border-top: 1px solid var(--line);
}
.nav-mobile.open {
  display: block;
  /* `--nav-h` defaults to ~64px; fall back if the variable isn't set. */
  max-height: calc(100vh - var(--nav-h, 64px));
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}
.nav-mobile a {
  display: block;
  font-family: 'Fraunces', serif;
  /* Brought down from 1.5rem so 18-20 links fit on a phone without
     turning the drawer into a small text wall. Still comfortably tappable. */
  font-size: 1.05rem;
  color: var(--ink);
  padding: 0.85rem 0;
  border-bottom: 1px solid var(--line);
  /* iOS Safari sometimes ignores tap-highlight on link rows in scrollable
     containers — explicit color keeps the press feedback visible. */
  -webkit-tap-highlight-color: rgba(181,84,108,0.18);
}
.nav-mobile a:last-child { border-bottom: 0; }

/* Logo — desktop default sized via inline height; on mobile we shrink so
   the bar isn't dominated by the wordmark and other nav widgets fit. */
.nav-logo .nav-logo-img {
  border-radius: 12px;
  height: 56px;
  width: auto;
  display: block;
}

/* Responsive brand swap: the "Astroly.in" text wordmark (logo-transparent.svg
   → .nav-logo-text, dark-inverted via .nav-logo-img above) shows on
   desktop/tablet; on phones we swap to the compact gold-star icon
   (icon-star.svg → .nav-logo-icon) so the bar isn't dominated by the wordmark
   and the Begin button + hamburger still fit. The icon keeps its own colours
   (no invert) — it isn't a .nav-logo-img. */
.nav-logo .nav-logo-text { height: 48px; width: auto; display: block; }
.nav-logo .nav-logo-icon { display: none; height: 40px; width: 40px; border-radius: 10px; }
@media (max-width: 600px) {
  .nav-logo .nav-logo-text { display: none; }
  .nav-logo .nav-logo-icon { display: block; }
}

/* Utility: hide on screens below the small breakpoint. Used by the nav
   to keep the avatar visible while suppressing the user's name label. */
@media (max-width: 600px) {
  .hidden-sm { display: none !important; }
}

/* Sign-in tail text shouldn't wrap onto two lines either. */
.nav-sign-in { white-space: nowrap; }

/* Mobile-cutoff bumped 860 → 1024px because the SEO-friendly nav labels
   ("Online Astrologer", "Janam Patrika", "Rashifal Today", "Kundali
   Matching") add ~280px of width compared to the prior single-word
   versions. Below 1024px, the desktop strip starts cramping; the
   hamburger menu handles those widths cleanly. */
@media (max-width: 1024px) {
  .nav-links { display: none; }
  .nav-mobile-btn { display: block; }
  /* Sign-in stays in the drawer only — too verbose for the bar. */
  .nav-actions .nav-sign-in { display: none; }
  /* `Begin` (= Sign up) STAYS visible on mobile bar so signed-out
     visitors get a one-tap account-creation path without first
     opening the hamburger drawer. Compact it so logo + button +
     hamburger all fit in the 360px-wide phones. */
  .nav-actions .nav-begin {
    padding: 6px 12px;
    font-size: 0.82rem;
    letter-spacing: 0.01em;
  }
}

@media (max-width: 600px) {
  .nav-inner { padding: 0.5rem 0.85rem; gap: 0.5rem; }
  .nav-logo .nav-logo-img { height: 38px; }
  .nav-actions { gap: 0.5rem; }
  #nav-signed-in { gap: 0.4rem !important; }
  .nav-user-btn { padding: 2px 4px; }
  .nav-user-btn img { width: 28px; height: 28px; }
  /* Even tighter at 600px — every pixel counts on iPhone SE-class
     widths so the Sign-up button doesn't push the hamburger off-screen. */
  .nav-actions .nav-begin {
    padding: 5px 10px;
    font-size: 0.78rem;
  }
  /* The signed-in nav-actions block is itself .nav-actions — its inner
     wallet/avatar widgets sit alongside the hamburger, so we tighten font
     and let the avatar shrink without the name (already hidden on small). */
  #nav-signed-in > span { font-size: 0.78rem !important; }
}

/* ─── Mobile drawer auth block ─────────────────────────────────────
   First two rows of the slide-out drawer for signed-out visitors:
   a prominent "Create free account" pill + a secondary "Sign in"
   link. JS (applyAuthState) hides #nav-mobile-auth once a token is
   present so the drawer goes back to nav-only for logged-in users. */
.nav-mobile-auth {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  padding: 0.25rem 0 1.1rem;
  margin-bottom: 0.4rem;
  border-bottom: 1px solid var(--line);
}
.nav-mobile-auth-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.8rem 1rem;
  border-radius: 12px;
  background: var(--cosmic);
  color: #fff !important;  /* override .nav-mobile a color */
  font-family: 'Mukta', system-ui, sans-serif;
  font-weight: 700;
  font-size: 1rem;
  text-decoration: none;
  letter-spacing: 0.01em;
  box-shadow: 0 6px 18px -8px rgba(181, 84, 108, 0.45);
}
.nav-mobile-auth-primary:hover { filter: brightness(1.08); }
.nav-mobile-auth-secondary {
  font-family: 'Mukta', system-ui, sans-serif;
  font-size: 0.92rem;
  color: var(--ink-3) !important;
  text-align: center;
  padding: 0.2rem 0;
  text-decoration: none;
}
.nav-mobile-auth-secondary strong { color: var(--cosmic-2); }

/* ─── Layout ───────────────────────────────────────────────────────── */
.container { max-width: var(--max-width); margin: 0 auto; padding: 0 1.5rem; }
.container-narrow { max-width: 880px; margin: 0 auto; padding: 0 1.5rem; }

.section { padding: clamp(4rem, 8vw, 7rem) 0; position: relative; }
.section-tight { padding: clamp(2.5rem, 5vw, 4.5rem) 0; position: relative; }

/* ─── Starfield ────────────────────────────────────────────────────── */
.starfield { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.starfield .star {
  position: absolute; border-radius: 50%;
  background: var(--star-1);
  animation: twinkle var(--d, 3s) infinite ease-in-out;
}

/* ─── Animations ───────────────────────────────────────────────────── */
@keyframes pulse    { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:.4;transform:scale(1.4)} }
@keyframes twinkle  { 0%,100%{opacity:var(--o,0.7);transform:scale(1)} 50%{opacity:0.18;transform:scale(0.6)} }
@keyframes fadeInUp { from{opacity:0;transform:translateY(16px)} to{opacity:1;transform:translateY(0)} }
@keyframes floaty   { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-8px)} }
@keyframes spin-slow{ to{transform:rotate(360deg)} }
@keyframes spin-rev { to{transform:rotate(-360deg)} }

.fade-in { opacity: 0; animation: fadeInUp 0.8s var(--ease) forwards; }
.stagger > * { opacity: 0; animation: fadeInUp 0.7s var(--ease) forwards; }
.stagger > *:nth-child(1) { animation-delay: 0.05s; }
.stagger > *:nth-child(2) { animation-delay: 0.12s; }
.stagger > *:nth-child(3) { animation-delay: 0.19s; }
.stagger > *:nth-child(4) { animation-delay: 0.26s; }
.stagger > *:nth-child(5) { animation-delay: 0.33s; }
.stagger > *:nth-child(6) { animation-delay: 0.40s; }
.stagger > *:nth-child(7) { animation-delay: 0.47s; }
.stagger > *:nth-child(8) { animation-delay: 0.54s; }
.stagger > *:nth-child(9) { animation-delay: 0.61s; }

.floaty { animation: floaty 7s ease-in-out infinite; }

/* ─── Scrollbar ────────────────────────────────────────────────────── */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: var(--bg-2); }
::-webkit-scrollbar-thumb { background: var(--surface-2); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: var(--cosmic-3); }

/* ─── Focus ────────────────────────────────────────────────────────── */
:focus-visible { outline: 2px solid var(--cosmic-2); outline-offset: 3px; border-radius: 6px; }

/* ─── Footer ───────────────────────────────────────────────────────── */
.footer {
  margin-top: 6rem;
  padding: 4rem 1.5rem 5rem;
  border-top: 1px solid var(--line);
  background: var(--bg-2);
  color: var(--ink-3);
  text-align: center;
}
.footer-inner { max-width: 780px; margin: 0 auto; }
.footer .verse { display: block; color: var(--cosmic-2); font-size: 1.35rem; margin-bottom: 0.4rem; letter-spacing: 0; }
.footer .gloss { font-family: 'Fraunces', serif; font-style: italic; font-size: 1.05rem; color: var(--ink-2); margin: 0.4rem 0 0; }
.footer .tiny {
  margin-top: 2rem;
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-4);
}

/* Mobile adds bottom spacing for bottom-nav */
@media (max-width: 767px) {
  body { padding-bottom: 0; }
  .footer { padding-bottom: 6rem; }
}

/* ─── Mobile bottom nav (app-like) ─────────────────────────────────── */
.mobile-bottom-nav {
  display: none;
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 40;
  background: color-mix(in oklab, var(--bg) 92%, transparent);
  backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
  border-top: 1px solid var(--line);
  padding-bottom: env(safe-area-inset-bottom);
}
.mobile-bottom-nav .row { display: flex; justify-content: space-around; align-items: center; }
.mobile-bottom-nav a {
  display: flex; flex-direction: column; align-items: center; gap: 0.2rem;
  padding: 0.7rem 0.3rem;
  color: var(--ink-3); font-size: 10px; font-weight: 600;
  letter-spacing: 0.05em; text-transform: uppercase;
  transition: color 0.2s;
}
.mobile-bottom-nav a:hover, .mobile-bottom-nav a.active { color: var(--cosmic-2); }
.mobile-bottom-nav .center {
  width: 48px; height: 48px; border-radius: 999px;
  background: linear-gradient(135deg, var(--cosmic), var(--magenta));
  display: grid; place-items: center; color: #fff;
  margin-top: -18px; box-shadow: 0 8px 22px -6px color-mix(in oklab, var(--cosmic) 50%, transparent);
}
/* Brand star mark inside the centre pill (replaces the old "A" glyph). */
.mobile-bottom-nav .center .center-mark { width: 28px; height: 28px; display: block; }
@media (max-width: 767px) {
  .mobile-bottom-nav { display: block; }
}

/* ─── Flash messages ───────────────────────────────────────────────── */
.flash-stack {
  max-width: 640px; margin: 1rem auto 0;
  padding: 0 1.5rem;
  display: flex; flex-direction: column; gap: 0.5rem;
}
.flash {
  display: flex; align-items: center; gap: 0.75rem;
  padding: 0.9rem 1.1rem; border-radius: 14px;
  font-size: 0.9rem;
  border: 1px solid var(--line-2);
  background: var(--surface);
}
.flash.error   { color: var(--magenta-2); border-color: color-mix(in oklab, var(--magenta) 40%, transparent); background: color-mix(in oklab, var(--magenta) 10%, var(--surface)); }
.flash.success { color: #3FD181; border-color: color-mix(in oklab, #3FD181 40%, transparent); background: color-mix(in oklab, #3FD181 10%, var(--surface)); }
.flash button { background: none; border: 0; color: inherit; opacity: 0.6; cursor: pointer; font-size: 1.1rem; line-height: 1; }
.flash button:hover { opacity: 1; }

/* ─── Skeleton ─────────────────────────────────────────────────────── */
.skeleton {
  background: linear-gradient(90deg, var(--surface) 25%, var(--surface-2) 50%, var(--surface) 75%);
  background-size: 200% 100%;
  animation: shimmer 1.8s infinite;
  border-radius: 12px;
}
@keyframes shimmer { 0%{background-position:200% 0} 100%{background-position:-200% 0} }

/* ─── Tweaks panel ─────────────────────────────────────────────────── */
.tweaks-fab {
  position: fixed; right: 1.25rem; bottom: 6.25rem;
  width: 46px; height: 46px; border-radius: 999px;
  background: var(--surface-2); border: 1px solid var(--line-2);
  color: var(--ink); cursor: pointer;
  display: grid; place-items: center;
  box-shadow: 0 10px 30px -10px color-mix(in oklab, var(--cosmic) 40%, transparent);
  transition: transform 0.3s var(--ease-soft);
  z-index: 70;
}
.tweaks-fab:hover { transform: rotate(-10deg) scale(1.06); }
@media (min-width: 768px) { .tweaks-fab { bottom: 1.25rem; } }

.tweaks-panel {
  position: fixed; right: 1.25rem; bottom: 11rem;
  width: min(320px, calc(100vw - 2rem));
  background: var(--surface);
  border: 1px solid var(--line-2);
  border-radius: 20px;
  padding: 1.25rem;
  box-shadow: 0 12px 32px -10px rgba(67,33,48,0.14), 0 2px 8px rgba(67,33,48,0.08);
  z-index: 71;
  display: none;
  animation: fadeInUp 0.3s var(--ease);
}
.tweaks-panel.open { display: block; }
@media (min-width: 768px) { .tweaks-panel { bottom: 6rem; } }
.tweaks-panel h4 {
  font-family: 'Fraunces', serif; font-size: 1rem; margin: 0 0 0.75rem;
  display: flex; align-items: center; justify-content: space-between;
}
.tweaks-panel h4 button {
  background: none; border: 0; color: var(--ink-3); cursor: pointer; padding: 4px;
}
.tweaks-row { margin-bottom: 1rem; }
.tweaks-row .tw-label {
  display: block;
  font-size: 0.68rem; font-weight: 600;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: 0.5rem;
}
.tweaks-swatches { display: flex; gap: 0.45rem; }
.tweaks-swatch {
  width: 28px; height: 28px; border-radius: 50%;
  border: 1px solid var(--line); cursor: pointer; padding: 0;
  transition: transform 0.2s, border-color 0.2s;
}
.tweaks-swatch:hover { transform: scale(1.1); }
.tweaks-swatch.active { border-color: var(--ink); transform: scale(1.1); box-shadow: 0 0 0 2px var(--bg), 0 0 0 4px currentColor; }
.tweaks-slider { width: 100%; accent-color: var(--cosmic); }
.tweaks-check { display: flex; align-items: center; gap: 0.6rem; cursor: pointer; color: var(--ink-2); font-size: 0.88rem; }
.tweaks-check input { accent-color: var(--cosmic); }

/* ─── Modal ────────────────────────────────────────────────────────── */
.modal-backdrop {
  position: fixed; inset: 0; z-index: 100;
  background: rgba(67,33,48,0.75);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  display: flex; align-items: center; justify-content: center;
  padding: 1.5rem;
}
.modal {
  background: var(--surface);
  border: 1px solid var(--line-2);
  border-radius: 20px;
  max-width: 480px; width: 100%;
  padding: 2rem;
  box-shadow: 0 12px 32px -10px rgba(67,33,48,0.18), 0 4px 10px rgba(67,33,48,0.10);
}

/* ─── Loader ───────────────────────────────────────────────────────── */
.astro-loader { display: flex; flex-direction: column; align-items: center; padding: 2rem; }
.astro-loader .rings {
  position: relative; width: 96px; height: 96px; margin-bottom: 1.5rem;
}
.astro-loader .ring {
  position: absolute; border-radius: 50%;
}
.astro-loader .ring.r1 { inset: 0; border: 2px solid transparent; border-top-color: var(--cosmic-2); animation: spin-slow 2.5s linear infinite; }
.astro-loader .ring.r2 { inset: 10px; border: 2px solid transparent; border-top-color: var(--magenta-2); animation: spin-rev 2s linear infinite; }
.astro-loader .core {
  position: absolute; inset: 24px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--cosmic), var(--magenta));
  display: grid; place-items: center;
  color: #fff; animation: floaty 3s ease-in-out infinite;
}
.astro-loader .msg { font-family: 'Fraunces', serif; font-style: italic; font-size: 1.15rem; color: var(--ink); text-align: center; max-width: 22ch; line-height: 1.3; transition: opacity 0.4s; }
.astro-loader .msg-en { margin-top: 0.6rem; font-size: 0.72rem; letter-spacing: 0.15em; text-transform: uppercase; color: var(--cosmic-2); transition: opacity 0.4s; }

/* Placeholder + caret */
.input::placeholder,
.input-underline::placeholder,
input::placeholder,
textarea::placeholder { color: var(--ink-4); }

/* Gradient & solid buttons keep readable contrast */
.btn-primary, .btn-primary:hover { color: #FFFFFF !important; }
.btn-gold   { color: #050E1F !important; }   /* lapis-night ink on saffron */
.btn-ink    { color: var(--bg) !important; }

/* ─── Legacy class aliases ───────────────────────────────────────────
   Several older templates (wallet, profile, dashboard, reviews, auth)
   reference utility classes from a previous design system that were
   never re-implemented. Without these definitions they fall back to
   browser defaults — gray native buttons, brown native <input> fields,
   missing card backgrounds. Each alias maps the orphan class onto the
   current Krishna Blue tokens so those pages render correctly without
   editing every template. */

/* Form fields → match the .input style. Includes native widgets
   (<select>, <input type="date|time|number|email|tel"...>, <textarea>)
   so date/time pickers and dropdowns also pick up the dark theme. */
.input-field,
input.input-field,
select.input-field,
textarea.input-field {
  display: block; width: 100%;
  background: var(--surface);
  border: 1px solid var(--line-2);
  color: var(--ink);
  border-radius: 12px;
  padding: 0.85rem 1rem;
  font-size: 0.95rem;
  font-family: 'Mukta', sans-serif;
  outline: none;
  transition: border-color 0.25s var(--ease-soft), box-shadow 0.25s var(--ease-soft), background 0.25s var(--ease-soft);
  min-height: 48px;
  color-scheme: light;  /* lets the native date/time picker render dark */
}
.input-field:focus,
input.input-field:focus,
select.input-field:focus,
textarea.input-field:focus {
  border-color: var(--primary-2);
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--primary) 22%, transparent);
}
.input-field::placeholder { color: var(--ink-4); }
textarea.input-field { min-height: 120px; resize: vertical; line-height: 1.55; }
select.input-field {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23B5546C' stroke-width='1.8'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1rem center;
  padding-right: 2.75rem;
}

/* "Pay now" / accent CTA → primary peacock-rose gradient pill. */
.btn-accent {
  display: inline-flex; align-items: center; justify-content: center;
  gap: 0.55rem;
  padding: 0.85rem 1.6rem;
  border-radius: 999px;
  font-family: 'Mukta', sans-serif;
  font-weight: 600; font-size: 0.92rem;
  border: none; cursor: pointer;
  background: linear-gradient(90deg, var(--grad-start), var(--grad-end));
  color: #FFFFFF !important;
  box-shadow: 0 10px 28px -12px color-mix(in oklab, var(--primary) 55%, transparent);
  transition: transform 0.25s var(--ease-soft), box-shadow 0.25s var(--ease-soft);
  min-height: 44px;
  text-decoration: none;
  white-space: nowrap;
}
.btn-accent:hover:not(:disabled) {
  transform: translateY(-1px);
  box-shadow: 0 16px 34px -10px color-mix(in oklab, var(--primary) 70%, transparent);
}
.btn-accent:disabled { opacity: 0.5; cursor: not-allowed; }

/* Quick-amount chips on the wallet recharge row. */
.amount-btn {
  cursor: pointer;
  transition: border-color 0.2s var(--ease-soft), background 0.2s var(--ease-soft), color 0.2s var(--ease-soft);
}
.amount-btn:hover { border-color: var(--primary-2) !important; color: var(--ink) !important; }
.amount-btn.active {
  background: linear-gradient(90deg, var(--grad-start), var(--grad-end)) !important;
  border-color: transparent !important;
  color: #FFFFFF !important;
}

/* Hero / balance cards from older templates — soft surface gradient
   instead of the missing custom class. */
.card-gradient {
  background:
    linear-gradient(155deg, var(--surface) 0%, var(--surface-2) 100%);
  border: 1px solid var(--line);
  border-radius: 24px;
}
.ring-cosmic {
  /* Subtle peacock outline used on hero cards. */
  box-shadow:
    0 0 0 1px color-mix(in oklab, var(--primary) 28%, transparent),
    0 30px 60px -30px color-mix(in oklab, var(--primary) 35%, transparent);
}
.shadow-mystic,
.shadow-mystic-md {
  box-shadow: 0 8px 22px -10px rgba(5, 14, 31, 0.45), 0 2px 6px rgba(5, 14, 31, 0.18);
}
.shadow-mystic-lg {
  box-shadow: 0 18px 42px -16px rgba(5, 14, 31, 0.55), 0 6px 14px rgba(5, 14, 31, 0.22);
}
.shadow-mystic-xl {
  box-shadow: 0 24px 56px -16px rgba(5, 14, 31, 0.6), 0 8px 18px rgba(5, 14, 31, 0.28);
}

/* Italic gradient phrase, alternate name used by the auth/profile/dashboard
   pages. Maps onto the `.text-grad` signature. */
.text-cosmic-gradient {
  background: linear-gradient(90deg, var(--grad-start), var(--grad-end));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  font-style: italic;
}

/* Decorative full-width gradient rule used as a section divider. */
.rule-glow {
  height: 1px; width: 100%; border: 0;
  background: linear-gradient(90deg, transparent, var(--primary-2), transparent);
}

/* Secondary outline button — used by /wallet "Apply" coupon button. */
.btn-secondary {
  background: var(--surface-2);
  color: var(--ink);
  border: 1px solid var(--line-2);
  border-radius: 999px;
  padding: 0.65rem 1.4rem;
  font-family: 'Mukta', sans-serif;
  font-weight: 600; font-size: 0.88rem;
  cursor: pointer;
  transition: border-color 0.2s var(--ease-soft), background 0.2s var(--ease-soft), color 0.2s var(--ease-soft);
}
.btn-secondary:hover {
  border-color: var(--primary-2);
  color: var(--primary-2);
  background: var(--surface-3);
}

/* When a native <input type="date|time|month|week"> is themed dark via
   color-scheme above, also lighten the calendar/clock icon Webkit shows. */
.input-field::-webkit-calendar-picker-indicator,
input[type="date"]::-webkit-calendar-picker-indicator,
input[type="time"]::-webkit-calendar-picker-indicator {
  filter: opacity(0.6);
  cursor: pointer;
}

/* ─── Utility helpers ──────────────────────────────────────────────── */
.flex { display: flex; }
.grid { display: grid; }
.hidden { display: none !important; }
.relative { position: relative; }
.absolute { position: absolute; }
.overflow-hidden { overflow: hidden; }
.text-center { text-align: center; }

.gap-2 { gap: 0.5rem; } .gap-3 { gap: 0.75rem; } .gap-4 { gap: 1rem; } .gap-6 { gap: 1.5rem; } .gap-8 { gap: 2rem; }
.mt-0 { margin-top: 0; } .mt-2 { margin-top: 0.5rem; } .mt-4 { margin-top: 1rem; } .mt-6 { margin-top: 1.5rem; } .mt-8 { margin-top: 2rem; } .mt-12 { margin-top: 3rem; }
.mb-0 { margin-bottom: 0; } .mb-2 { margin-bottom: 0.5rem; } .mb-4 { margin-bottom: 1rem; } .mb-6 { margin-bottom: 1.5rem; } .mb-8 { margin-bottom: 2rem; } .mb-12 { margin-bottom: 3rem; }


/* ════════════════════════════════════════════════════════════════════════
   SHARE BAR + PRINT MODE
   The .share-bar partial provides Download / Share / Copy buttons. The
   .share-print-footer is hidden in viewport, revealed only in @media
   print so every printed PDF carries the astroly.in QR + branding.
   The @media print rules below also strip the nav, footer, mobile bottom
   nav, all interactive UI, and force a clean white background — so any
   page that includes the partial gets a presentable PDF for free.
   ════════════════════════════════════════════════════════════════════════ */
.share-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin: 1.25rem 0 0.5rem;
}
.share-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  background: var(--surface);
  color: var(--ink-2);
  border: 1px solid var(--line-2);
  border-radius: 999px;
  padding: 0.55rem 1.05rem;
  font: inherit;
  font-weight: 600;
  font-size: 0.85rem;
  letter-spacing: -0.005em;
  cursor: pointer;
  transition: background 0.2s, border-color 0.2s, color 0.2s, transform 0.2s;
}
.share-btn:hover {
  border-color: var(--cosmic-2);
  color: var(--cosmic-2);
  transform: translateY(-1px);
}
.share-btn-primary {
  background: linear-gradient(135deg, var(--primary), var(--magenta));
  color: #fff;
  border-color: transparent;
  box-shadow: 0 4px 12px -4px color-mix(in oklab, var(--magenta) 50%, transparent);
}
.share-btn-primary:hover {
  color: #fff;
  filter: brightness(1.05);
}
.share-btn svg { flex-shrink: 0; }

/* Hidden in viewport — only revealed when printing. */
.share-print-footer { display: none; }

/* ─── Print mode ─────────────────────────────────────────────────────── */
@media print {
  /* Force a white-paper layout. Backgrounds/colors that depend on
     dark theme tokens get neutralised. */
  html, body {
    background: #fff !important;
    color: #1a1a1a !important;
    font-size: 11pt !important;
  }

  /* Strip everything that's not the actual content. */
  .nav, .footer, .mobile-bottom-nav, .nav-mobile,
  .flash-stack, .skip-link,
  .share-bar,
  .tweaks-fab, .tweaks-panel,
  iframe[src*="razorpay"] { display: none !important; }

  /* Surface the print-only QR/branding footer. */
  .share-print-footer {
    display: flex !important;
    align-items: center;
    gap: 1.25rem;
    margin: 2rem 0 0;
    padding: 1.25rem 1.5rem;
    border-top: 2px solid #1a1a1a;
    page-break-inside: avoid;
  }
  .share-print-qr img {
    width: 96px; height: 96px;
    display: block;
  }
  .share-print-meta { line-height: 1.4; }
  .share-print-brand {
    font-family: 'Fraunces', Georgia, serif;
    font-weight: 700;
    font-size: 22pt;
    color: #3A1F2E;
    letter-spacing: -0.012em;
  }
  .share-print-brand span {
    color: #c9a961;
    font-size: 0.62em;
    margin-left: 0.05em;
    vertical-align: 0.18em;
  }
  .share-print-tag {
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-style: italic;
    font-size: 11pt;
    color: #5a5a5a;
    margin-top: 0.15rem;
  }
  .share-print-cta {
    font-size: 9pt;
    color: #5a5a5a;
    margin-top: 0.4rem;
    letter-spacing: 0.04em;
  }

  /* Universal print niceties */
  a { color: inherit !important; text-decoration: none !important; }
  .card, .card-accent, .card-hover {
    background: #fff !important;
    border: 1px solid #ddd !important;
    box-shadow: none !important;
  }
  /* Avoid breaking sections across pages awkwardly. */
  h1, h2, h3, h4 { page-break-after: avoid; }
  .report-section, .card { page-break-inside: avoid; }

  /* Page margins so content has room. */
  @page { margin: 18mm 14mm; }
}


/* ════════════════════════════════════════════════════════════════════════
   GLOBAL POLISH — appended (2026-04)
   This block adds the design tokens + scroll/focus/responsive fixes the rest
   of the project leans on. It is intentionally additive: nothing above this
   line was changed, so existing pages keep their look while gaining the
   improvements below automatically.
   ═══════════════════════════════════════════════════════════════════════ */

:root {
  /* Spacing scale — multiples of 4 / 8 for an 8px grid. Use as
     `padding: var(--space-4)` etc. Stays consistent across templates. */
  --space-0:  0;
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-8:  32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;

  /* Radii — keep card/button corner radius consistent across templates. */
  --radius-sm:   8px;
  --radius-md:  12px;
  --radius-lg:  16px;
  --radius-xl:  20px;
  --radius-2xl: 28px;
  --radius-pill: 999px;

  /* Elevation — subtle, brand-tinted shadows. Used on cards/buttons/menus. */
  --shadow-sm: 0 1px 2px rgba(67, 33, 48, 0.10);
  --shadow-md: 0 4px 12px -4px rgba(67, 33, 48, 0.18), 0 2px 4px rgba(67, 33, 48, 0.10);
  --shadow-lg: 0 12px 28px -10px rgba(67, 33, 48, 0.25), 0 4px 8px rgba(67, 33, 48, 0.10);
  --shadow-xl: 0 24px 56px -16px rgba(67, 33, 48, 0.35), 0 6px 14px rgba(67, 33, 48, 0.14);
  --shadow-glow: 0 14px 36px -14px color-mix(in oklab, var(--cosmic) 55%, transparent);

  /* Sticky/fixed nav offset — sub-content with `top: var(--nav-h)` will sit
     just under the sticky nav instead of overlapping it. */
  --nav-h: 76px;

  /* Default focus ring — used by .btn, .input, links, etc. */
  --ring: 0 0 0 3px color-mix(in oklab, var(--cosmic) 40%, transparent);

  /* Standard transitions */
  --t-fast: 0.15s var(--ease-soft);
  --t-base: 0.25s var(--ease-soft);
  --t-slow: 0.40s var(--ease-soft);
}

/* ─── Scroll & viewport ─────────────────────────────────────────────────── */
html {
  /* Prevent layout shift when a page does/doesn't have a vertical scrollbar */
  scrollbar-gutter: stable;
  /* Lock native form widgets to the dark colour scheme. */
  color-scheme: light;
}

html, body { max-width: 100%; overflow-x: clip; }

body {
  /* `100dvh` follows the dynamic viewport (mobile address bar collapse) so
     full-height heroes don't push content under iOS's dynamic UI. Falls back
     to 100vh on browsers that don't support dvh yet. */
  min-height: 100vh;
  min-height: 100dvh;
}

/* The fixed star-field is decorative — it must never block clicks or grow
   beyond the viewport (which would create phantom horizontal scroll). */
body::before { width: 100%; height: 100%; }

/* Generic safety: explicit images/embeds shouldn't overflow their grid cells. */
img, svg, video, canvas, iframe { max-width: 100%; height: auto; }

/* ─── Skip-to-content link (accessibility) ──────────────────────────────── */
.skip-link {
  position: absolute; top: -100px; left: var(--space-4);
  z-index: 1000;
  padding: var(--space-3) var(--space-5);
  background: var(--ink); color: var(--bg);
  border-radius: var(--radius-md);
  font-weight: 600; font-size: 0.9rem;
  transition: top var(--t-base);
}
.skip-link:focus { top: var(--space-4); }

/* ─── Container responsive gutters ──────────────────────────────────────── */
.container, .container-narrow {
  width: 100%;
  margin-left: auto; margin-right: auto;
  padding-left: var(--space-5);
  padding-right: var(--space-5);
}
@media (min-width: 768px) {
  .container, .container-narrow {
    padding-left: var(--space-8);
    padding-right: var(--space-8);
  }
}

/* ─── Buttons — focus ring + new variants ──────────────────────────────── */
/* Existing .btn / .btn-primary / .btn-ghost / .btn-gold / .btn-ink remain. */
.btn:focus-visible {
  outline: none;
  box-shadow: var(--ring);
}
.btn-primary:focus-visible {
  /* Primary already has an own shadow — use a stronger inner ring. */
  box-shadow:
    0 0 0 3px color-mix(in oklab, var(--cosmic) 50%, transparent),
    0 16px 34px -10px color-mix(in oklab, var(--cosmic) 70%, transparent);
}

/* Secondary — clearly distinguishable from .btn-primary, still on-brand. */
.btn-secondary {
  background: var(--surface-2);
  color: var(--ink);
  border: 1px solid var(--line-2);
  box-shadow: var(--shadow-sm);
}
.btn-secondary:hover:not(:disabled) {
  background: var(--surface-3);
  border-color: var(--cosmic-2);
  transform: translateY(-1px);
  box-shadow: var(--shadow-md);
}

/* Danger — destructive actions. */
.btn-danger {
  background: linear-gradient(135deg, var(--magenta) 0%, var(--magenta-2) 100%);
  color: #fff;
  box-shadow: 0 10px 28px -12px color-mix(in oklab, var(--magenta) 60%, transparent);
}
.btn-danger:hover:not(:disabled) {
  transform: translateY(-1px);
  box-shadow: 0 16px 34px -10px color-mix(in oklab, var(--magenta) 75%, transparent);
}

/* Icon-only button — square, same minimum touch target. */
.btn-icon {
  width: 44px; height: 44px;
  padding: 0;
  border-radius: var(--radius-pill);
}
.btn-icon.btn-sm { width: 36px; height: 36px; }
.btn-icon.btn-lg { width: 52px; height: 52px; }

/* ─── Inputs — global focus ring (in case .input wasn't applied) ───────── */
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
  outline: none;
  border-color: var(--cosmic-2);
  box-shadow: var(--ring);
}

/* ─── Links — non-button anchors get a subtle focus ring ──────────────── */
a:focus-visible {
  outline: none;
  border-radius: var(--radius-sm);
  box-shadow: var(--ring);
}

/* ─── Cards — uniform elevation utility ────────────────────────────────── */
/* Existing `.card` / `.card-hover` are unchanged. Adds optional intensifiers. */
.card-elevated { box-shadow: var(--shadow-md); }
.card-elevated:hover { box-shadow: var(--shadow-lg); }

/* ─── Sticky panels under the nav ──────────────────────────────────────── */
/* Pages that use `position: sticky; top: 1rem` for a sidebar (cart summary,
   booking form, order timeline) end up under the sticky nav. Use this class
   instead of inline `top:1rem` to land below the nav cleanly. */
.sticky-under-nav {
  position: sticky;
  top: calc(var(--nav-h) + var(--space-4));
}

/* ─── Section vertical rhythm ──────────────────────────────────────────── */
/* `.section` is already defined elsewhere; ensure it has consistent breathing
   room across the app and never forces overflow. */
.section {
  padding-top: clamp(var(--space-12), 6vw, var(--space-24));
  padding-bottom: clamp(var(--space-12), 6vw, var(--space-24));
  position: relative;
}

/* ─── Form field grouping ──────────────────────────────────────────────── */
.field { margin-bottom: var(--space-5); }
.field > .label { margin-bottom: var(--space-2); }
.field-error { color: var(--magenta-2); font-size: 0.85rem; margin-top: var(--space-2); }
.field-help  { color: var(--ink-4);    font-size: 0.85rem; margin-top: var(--space-2); }

/* ─── Modal / dialog / overlay — consistent backdrop ──────────────────── */
.overlay {
  position: fixed; inset: 0; z-index: 100;
  background: rgba(67, 33, 48, 0.72);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  display: flex; align-items: center; justify-content: center;
  padding: var(--space-4);
  animation: fadeIn var(--t-base) both;
}
.modal {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-2xl);
  box-shadow: var(--shadow-xl);
  max-width: min(560px, 100%);
  width: 100%;
  max-height: min(90vh, 90dvh);
  overflow: auto;
  padding: clamp(var(--space-6), 5vw, var(--space-10));
  animation: slideUp var(--t-base) both;
}
@keyframes fadeIn { from { opacity: 0 } to { opacity: 1 } }
@keyframes slideUp { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }

/* ─── Scrollbars (subtle, brand-coloured) ─────────────────────────────── */
* {
  scrollbar-width: thin;
  scrollbar-color: color-mix(in oklab, var(--cosmic) 35%, transparent) transparent;
}
*::-webkit-scrollbar { width: 8px; height: 8px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb {
  background: color-mix(in oklab, var(--cosmic) 30%, transparent);
  border-radius: var(--radius-pill);
}
*::-webkit-scrollbar-thumb:hover {
  background: color-mix(in oklab, var(--cosmic) 50%, transparent);
}

/* ─── Reduced motion — respect user preference ────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ─── Mobile responsive nudges ────────────────────────────────────────── */
@media (max-width: 640px) {
  /* Mobile bottom-nav adds visual height — keep it from clipping the last
     section/footer. */
  body { padding-bottom: 70px; }

  /* Touch targets — make buttons at least 44px tall everywhere even when
     a template forgot the `.btn` class. */
  button, [role="button"], a.btn-ghost, a.btn-primary, a.btn-secondary, a.btn-danger {
    min-height: 44px;
  }

  /* Tone down the section vertical rhythm on small screens. */
  .section {
    padding-top: var(--space-10);
    padding-bottom: var(--space-10);
  }
}

/* ─── Print — hide nav, footer, sticky panels by default ─────────────── */
@media print {
  .nav, .footer, .mobile-bottom-nav, .nav-mobile, .skip-link,
  .sticky-under-nav, .actions, button {
    display: none !important;
  }
  body { background: white !important; color: black !important; }
  body::before { display: none; }
}


/* ══════════════════════════════════════════════════════════════════════
   LIGHT-MODE TAILWIND COMPATIBILITY OVERRIDES
   Templates built against the old dark theme use Tailwind utility
   classes like text-white / border-white/* / bg-shadow / bg-midnight
   / bg-black/* which produce invisible text on the new warm-sand
   background. These rules remap every affected class to Chandan tokens
   so all templates render correctly without editing HTML.
   Buttons that intentionally carry white text use .btn-primary /
   .btn-saffron / etc., which set color:#fff via our own CSS with higher
   specificity — they are not affected by these overrides.
   ══════════════════════════════════════════════════════════════════════ */

:root:not([data-theme="dark"]) {

  /* ── text-white → primary ink (dark plum) ───────────────────────── */
  .text-white { color: var(--ink) !important; }

  /* Opacity variants — map to progressively lighter ink steps */
  .text-white\/90, .text-white\/95 { color: var(--ink-2) !important; }
  .text-white\/70, .text-white\/75, .text-white\/80 { color: var(--ink-2) !important; }
  .text-white\/50, .text-white\/60, .text-white\/65 { color: var(--ink-3) !important; }
  .text-white\/10, .text-white\/20, .text-white\/25,
  .text-white\/30, .text-white\/40, .text-white\/45 { color: var(--ink-4) !important; }

  /* ── border-white/* → themed line ──────────────────────────────── */
  .border-white\/5,
  .border-white\/10,
  .border-white\/12,
  .border-white\/15,
  .border-white\/20 { border-color: var(--line) !important; }
  .border-white\/25,
  .border-white\/30,
  .border-white\/40 { border-color: var(--line-2) !important; }

  /* ── bg-shadow / bg-midnight / bg-ash-* → surface ──────────────── */
  .bg-shadow,
  .bg-midnight,
  .bg-midnight-900,
  .bg-midnight-800,
  .bg-midnight-700 { background-color: var(--surface) !important; }

  /* surface-2 tone for nested cards */
  .bg-ash-50,
  .bg-ash-100 { background-color: var(--surface-2) !important; }

  /* ── bg-black/* modal overlays → warm plum overlay ─────────────── */
  .bg-black\/40 { background-color: rgba(67, 33, 48, 0.40) !important; }
  .bg-black\/50 { background-color: rgba(67, 33, 48, 0.50) !important; }
  .bg-black\/60 { background-color: rgba(67, 33, 48, 0.60) !important; }
  .bg-black\/70 { background-color: rgba(67, 33, 48, 0.70) !important; }
  .bg-black\/75 { background-color: rgba(67, 33, 48, 0.75) !important; }
  .bg-black\/80 { background-color: rgba(67, 33, 48, 0.80) !important; }

  /* ── Tailwind cosmic / magenta → Chandan primary / danger ───────── */
  /* text-cosmic-* → rose primary */
  .text-cosmic-300, .text-cosmic-400 { color: var(--primary-2) !important; }
  .text-cosmic-500, .text-cosmic-600 { color: var(--primary)   !important; }
  /* text-magenta-* → danger accent */
  .text-magenta-300, .text-magenta-400 { color: var(--magenta-2) !important; }
  .text-magenta-500, .text-magenta-600 { color: var(--magenta)   !important; }

  /* bg-cosmic-*/15 tints → rose tint */
  .bg-cosmic-500\/15  { background-color: color-mix(in oklab, var(--primary) 15%, transparent) !important; }
  .bg-cosmic-500\/20  { background-color: color-mix(in oklab, var(--primary) 20%, transparent) !important; }
  .bg-magenta-500\/15 { background-color: color-mix(in oklab, var(--magenta) 15%, transparent) !important; }
  .bg-magenta-500\/20 { background-color: color-mix(in oklab, var(--magenta) 20%, transparent) !important; }

  /* border-cosmic-*/40 → rose border */
  .border-cosmic-500\/40  { border-color: color-mix(in oklab, var(--primary) 40%, transparent) !important; }
  .border-magenta-500\/40 { border-color: color-mix(in oklab, var(--magenta) 40%, transparent) !important; }

  /* accent-cosmic-500 → rose accent color for checkboxes etc. */
  .accent-cosmic-500 { accent-color: var(--primary) !important; }
}