/* Self-hosted fonts — load instantly & consistently (no more bold-fallback flash) */
@font-face { font-family: "Cormorant Garamond"; font-style: normal; font-weight: 600; font-display: swap; src: url("../fonts/cormorant-garamond-600.woff2") format("woff2"); }
@font-face { font-family: "Cormorant Garamond"; font-style: normal; font-weight: 700; font-display: swap; src: url("../fonts/cormorant-garamond-700.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/inter-400.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 600; font-display: swap; src: url("../fonts/inter-600.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 700; font-display: swap; src: url("../fonts/inter-700.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 800; font-display: swap; src: url("../fonts/inter-800.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 900; font-display: swap; src: url("../fonts/inter-900.woff2") format("woff2"); }

/* Size-matched fallback fonts to prevent the flash/flicker when web fonts load.
   The fallback renders at the same visual size as the real font, so there is no
   reflow ("bigger then normal" jump) while Inter / Cormorant download. */
@font-face {
  font-family: "Inter Fallback";
  src: local("Arial");
  size-adjust: 107%;
  ascent-override: 90%;
  descent-override: 22%;
  line-gap-override: 0%;
}
@font-face {
  font-family: "Cormorant Fallback";
  src: local("Georgia");
  size-adjust: 92%;
  ascent-override: 92%;
  descent-override: 30%;
  line-gap-override: 0%;
}

:root {
  --ink: #f5effa;
  --night: #0b061b;
  --plum: #1c0e35;
  --teal: #145264;
  --gold: #d8aa4c;
  --rose: #b56d71;
  --cream: #080415;
  --mist: #130c24;
  --muted: #c0b8d9;
  --line: rgba(255, 64, 113, 0.2);
  --shadow: 0 26px 70px rgba(255, 64, 113, 0.15);
  font-family: "Inter", "Inter Fallback", system-ui, sans-serif;
  
  --space-deep: #080415;
  --space-night: #0b061b;
  --space-plum: #1c0e35;
  --space-card: rgba(23, 14, 46, 0.65);
  --space-pink: #ff4071;
  --space-pink-hover: #ff0055;
  --space-blue: #4293f5;
  --space-gold: #d8aa4c;
  --soft-gold: #d6a935;
  --wa-green: #25d366;
  --wa-green-hover: #1fb959;
  --space-violet: #9b7bff;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  color: var(--ink);
  background: var(--cream);
  overflow-x: hidden;
}

body.nav-open {
  overflow: hidden;
}

a {
  color: inherit;
  text-decoration: none;
}

img {
  display: block;
  max-width: 100%;
}

.site-shell {
  min-height: 100vh;
  background:
    radial-gradient(circle at 20% 20%, rgba(255, 64, 113, 0.12), transparent 40rem),
    radial-gradient(circle at 80% 80%, rgba(66, 147, 245, 0.15), transparent 45rem),
    linear-gradient(180deg, #080415 0%, #130c24 50%, #080415 100%);
}

.topbar {
  position: sticky;
  top: 0;
  z-index: 70;
  background: rgba(8, 4, 21, 0.85);
  border-bottom: 1px solid rgba(255, 64, 113, 0.15);
  backdrop-filter: blur(18px);
}

.nav-wrap {
  position: relative;
  width: min(1440px, 100%);
  margin: 0 auto;
  padding: 0 24px;
  min-height: 74px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.brand {
  order: 1;
  display: inline-flex;
  align-items: center;
  gap: 12px;
}

.brand-text {
  display: flex;
  flex-direction: column;
  line-height: 1.15;
  white-space: nowrap;
}

.brand-name {
  font-family: "Cormorant Garamond", "Cormorant Fallback", Georgia, serif;
  font-size: 23px;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--ink);
  white-space: nowrap;
}

.brand-sub {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--soft-gold);
  font-family: "Inter", sans-serif;
  font-weight: 600;
}

.brand-mark {
  width: 42px;
  aspect-ratio: 1;
  border: 1px solid var(--space-pink);
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: var(--space-pink);
  background: radial-gradient(circle, rgba(255, 64, 113, 0.17), transparent 65%);
  box-shadow: 0 0 30px rgba(255, 64, 113, 0.2);
}

.nav-links {
  order: 2;
  display: flex;
  align-items: center;
  gap: 4px;
  margin: 0 auto;
}

.nav-links a {
  padding: 8px 12px;
  border-radius: 999px;
  color: rgba(245, 239, 250, 0.85);
  font-size: 13.5px;
  font-weight: 600;
  transition: color 180ms ease, background 180ms ease, transform 180ms ease;
  white-space: nowrap;
}

/* Pricing hidden from the nav for now — one rule to remove/comment out
   whenever it should come back, rather than editing every page's markup. */
.nav-links a[href="pricing"] {
  display: none;
}

.nav-links a:hover,
.nav-links a.active {
  color: #fff;
  background: rgba(255, 64, 113, 0.15);
  transform: translateY(-1px);
}

.book-now {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  flex: 0 0 auto;
  min-height: 42px;
  padding: 0 12px 0 18px;
  border-radius: 999px;
  /* Matches .button's gradient for a consistent look site-wide. Slightly
     under the 4.5:1 AA contrast target at this small size (same as .button
     itself), same trade-off already accepted there. */
  background: linear-gradient(135deg, var(--space-pink), var(--space-pink-hover));
  color: #fff;
  font-size: 13.5px;
  font-weight: 700;
  box-shadow: 0 10px 24px rgba(255, 64, 113, 0.32);
  white-space: nowrap;
}

.book-now-arrow {
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  flex: 0 0 22px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.22);
  transition: transform 220ms ease;
}

.book-now-arrow svg {
  width: 12px;
  height: 12px;
}

.book-now:hover .book-now-arrow {
  transform: translateX(2px);
  background: rgba(11, 6, 27, 0.18);
}
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-height: 46px;
  padding: 0 18px;
  border: 0;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--space-pink), var(--space-pink-hover));
  color: #fff;
  font-weight: 700;
  box-shadow: 0 14px 32px rgba(255, 64, 113, 0.28);
  cursor: pointer;
}
.button,
.book-now,
.float-btn,
.mini-link {
  transition: transform 180ms ease, box-shadow 180ms ease, background 180ms ease, color 180ms ease, border-color 180ms ease;
}
.button:hover,
.book-now:hover {
  transform: translateY(-3px);
  background: var(--soft-gold);
  color: var(--night);
  border-color: var(--soft-gold);
  box-shadow: 0 16px 36px rgba(242, 212, 111, 0.28);
}

.button.secondary:hover {
  background: var(--soft-gold);
  color: var(--night);
  border-color: var(--soft-gold);
  box-shadow: 0 16px 36px rgba(242, 212, 111, 0.28);
}

.mini-link:hover {
  color: var(--space-pink);
}

.button.secondary {
  background: rgba(255, 255, 255, 0.1);
  color: var(--ink);
  border: 1px solid rgba(255, 255, 255, 0.2);
  box-shadow: none;
}

.menu-toggle {
  display: none;
  width: 46px;
  aspect-ratio: 1;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: transparent;
  color: var(--ink);
}

.hero {
  position: relative;
  min-height: 720px;
  display: flex;
  align-items: center;
  color: var(--ink);
  isolation: isolate;
  overflow: hidden;
}

.hero.compact {
  min-height: 420px;
}


/* Compact utility-page heroes (Kundli, Kundli Matching, About, Contact...)
   carry short, single-purpose titles, unlike the homepage's intentionally
   wrapping multi-line hero copy — give them a wider column and a slightly
   restrained size so a title like "Free Kundli Online By Date of Birth"
   sits on one line instead of breaking awkwardly. */
.hero.compact .hero-content {
  position: relative;
  max-width: 1120px;
}

.hero.compact .hero-content h1 {
  font-size: clamp(32px, 3.8vw, 50px);
  /* The sitewide h1 rule caps max-width at 850px with no auto margins,
     which left this shorter title sitting flush-left in its wider
     column instead of centered — text-align:center only centers text
     inside a box, not the box itself. Let it fill the column instead. */
  max-width: none;
}

/* Same trap, different rule: .hero p sets a hard 650px width (not
   max-width) with no auto margins at desktop sizes, so the tagline sat
   flush-left in this wider, single-column hero instead of centered. */
.hero.compact .hero-content p {
  margin-left: auto;
  margin-right: auto;
}

.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(8, 4, 21, 0.95), rgba(8, 4, 21, 0.65) 50%, rgba(8, 4, 21, 0.35)),
    url("../images/space-nebula-bg.webp") center / cover;
  z-index: -2;
  transform: scale(1.02);
  animation: slowZoom 25s ease-in-out infinite alternate;
}
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image:
    radial-gradient(circle at 8% 18%, rgba(255, 255, 255, 0.9) 0 1px, transparent 1.7px),
    radial-gradient(circle at 15% 38%, rgba(255, 64, 113, 0.85) 0 1px, transparent 1.7px),
    radial-gradient(circle at 29% 24%, rgba(255, 255, 255, 0.7) 0 1px, transparent 1.8px),
    radial-gradient(circle at 42% 44%, rgba(255, 255, 255, 0.9) 0 1px, transparent 1.7px),
    radial-gradient(circle at 58% 25%, rgba(255, 64, 113, 0.8) 0 1px, transparent 1.7px),
    radial-gradient(circle at 70% 50%, rgba(255, 255, 255, 0.7) 0 1px, transparent 1.8px),
    radial-gradient(circle at 83% 31%, rgba(255, 255, 255, 0.85) 0 1px, transparent 1.7px);
  background-size: 430px 270px;
  opacity: 0.36;
  animation: constellations 30s ease-in-out infinite alternate, starTwinkle 3.4s ease-in-out infinite;
}

/* A quick brightness pulse layered on top of the slow constellation drift —
   filter, not opacity, so it doesn't fight the drift's own opacity keyframes
   (two animations on the same property would just have the later one win). */
@keyframes starTwinkle {
  0%, 100% { filter: brightness(1); }
  50% { filter: brightness(1.7); }
}

@media (prefers-reduced-motion: reduce) {
  .hero::after {
    animation: none;
  }
}

.container {
  width: min(1200px, 100%);
  margin: 0 auto;
  padding: 0 40px;
}

.hero-content {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 580px;
  margin: 0 auto;
  padding: 80px 0;
}

/* ============================================================
   HOME PAGE — LIVING COSMOS BACKGROUND
   A fixed backdrop behind the ENTIRE homepage (not just the hero) —
   sits outside .site-shell, same technique horoscope.html uses for
   its solar system, so it stays put on screen as the page scrolls
   over it. .site-shell and this page's .band sections are made
   transparent below so it shows through every section. Dense
   drifting starfield, wandering glowing planets on gently curved
   paths, zodiac glyphs that quietly pop into view and fade, a
   handful of real constellations that periodically trace themselves
   and glow, and the odd shooting star. Different mechanic again
   from the horoscope page's sun-and-orbits and this page's earlier
   attempts: nothing here is confined to a ring or a fixed web —
   everything drifts, curves, and appears/disappears independently.
   ============================================================ */

.home-hero::before,
.home-hero::after {
  content: none;
}

/* Every page that shares this fixed cosmos backdrop gets body.cosmic-page —
   originally just the homepage (as body.home-page), now any page using the
   same treatment. .site-shell and every section-level background/glow that
   would otherwise paint over the shared backdrop gets neutralized here, in
   one place, rather than page-by-page — that's what caused the seam bugs
   the first time (some pages' own extra overlays weren't accounted for). */
body.cosmic-page .site-shell {
  position: relative;
  z-index: 1;
  background: transparent;
}

body.cosmic-page .band {
  background: transparent;
}

body.cosmic-page .home-services::before {
  background: none;
}

/* Plain .hero pages (About, Contact, Kundli, Privacy Policy) — same nebula
   image + starfield texture the homepage hero used to have. */
body.cosmic-page .hero::before,
body.cosmic-page .hero::after {
  content: none;
}

/* .service-detail-open pages (Astrologer Detail, Blog Detail, Our
   Astrologers, Profile, Service Detail) and .services-open pages (Blog,
   Calculator, Panchang, Pricing, Services) each carry their own glow blob
   behind the page heading — same seam risk as .home-services::before. */
body.cosmic-page .service-detail-open::before,
body.cosmic-page .services-open::before {
  background: none;
}

/* One smooth vertical fade, no distinct colour blobs — since this backdrop
   is fixed to the viewport and every section is transparent over it, any
   patch of colour tied to a screen position (rather than spread evenly)
   reads as a mismatch between whatever content happens to scroll past it,
   even though technically nothing about the section itself changed. */
.home-hero-bg {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  background: linear-gradient(180deg, #06030f 0%, #0b0620 45%, #050208 100%);
}

.home-hero-content {
  max-width: 720px;
  margin: 0 auto;
  text-align: center;
}

.home-hero-content .eyebrow,
.home-hero-content .hero-actions {
  justify-content: center;
}

.home-hero-content p {
  margin-left: auto;
  margin-right: auto;
}

/* Home hero only: half the default section padding-top, so the eyebrow
   badge sits much closer to the sticky header instead of leaving a tall
   empty gap above it. Bottom padding is untouched. */
.hero.home-hero {
  padding-top: 28px;
}

/* The eyebrow's usual short dash (::before, defined globally) is dropped
   here — the live-consultations badge above already anchors this spot,
   a second small line reads as clutter right under it. */
.home-hero-content .eyebrow::before {
  content: none;
}

/* ============================================================
   HERO LIVE BADGE — small "glass" pill above the eyebrow, in the
   spirit of Astrotalk's live-astrologer-count chip: a green pulse
   dot, a tiny stack of avatars, one line of copy. Avatars are drawn
   as simple line-icon silhouettes rather than photos — this is a
   trust chip, not a claim about specific people.
   ============================================================ */
.hero-live-badge {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 0 auto 22px;
  padding: 8px 16px 8px 14px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(255, 255, 255, 0.06);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  font-size: 13px;
  font-weight: 600;
  color: var(--muted);
}

.hlb-dot {
  position: relative;
  width: 8px;
  height: 8px;
  flex: none;
  border-radius: 50%;
  background: #2dd674;
  box-shadow: 0 0 0 rgba(45, 214, 116, 0.5);
  animation: hlbPulse 2.2s ease-out infinite;
}

@keyframes hlbPulse {
  0%   { box-shadow: 0 0 0 0 rgba(45, 214, 116, 0.5); }
  70%  { box-shadow: 0 0 0 7px rgba(45, 214, 116, 0); }
  100% { box-shadow: 0 0 0 0 rgba(45, 214, 116, 0); }
}

.hlb-avatars {
  display: flex;
  flex: none;
}

.hlb-avatar {
  width: 24px;
  height: 24px;
  margin-left: -8px;
  border-radius: 50%;
  border: 1.5px solid rgba(11, 6, 27, 0.9);
  display: grid;
  place-items: center;
  color: #fff;
}

.hlb-avatar:first-child {
  margin-left: 0;
}

.hlb-avatar svg {
  width: 13px;
  height: 13px;
}

.hlb-avatar-1 { background: linear-gradient(160deg, #ff7aa0, #ff4071); }
.hlb-avatar-2 { background: linear-gradient(160deg, #f6c65a, #e39b1f); }
.hlb-avatar-3 { background: linear-gradient(160deg, #6fb3ff, #4293f5); }

.hlb-text {
  white-space: nowrap;
}

@media (max-width: 560px) {
  .hero-live-badge {
    white-space: normal;
    text-align: left;
    padding: 8px 14px;
  }
  .hlb-text {
    white-space: normal;
    font-size: 12.5px;
  }
}

/* ============================================================
   HOME HERO — trust stats + quick-action cards
   Sits inside the hero band itself (not a separate section further
   down the page), so the numbers and the four entry points are the
   first things visible alongside the headline.
   ============================================================ */
.home-hero-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  margin-top: 44px;
  border-radius: 16px;
  background: linear-gradient(180deg, rgba(216, 170, 76, 0.1), rgba(255, 255, 255, 0.03));
  border: 1px solid rgba(216, 170, 76, 0.22);
  overflow: hidden;
}

.hhs-stat {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  min-width: 0;
  padding: 22px 10px;
  border-right: 1px solid rgba(216, 170, 76, 0.22);
  transition: background 200ms ease;
}

.hhs-stat:nth-child(4n) {
  border-right: none;
}

.hhs-stat:hover {
  background: rgba(216, 170, 76, 0.08);
}

.hhs-stat strong {
  font-family: "Cormorant Garamond", "Cormorant Fallback", Georgia, serif;
  font-size: 34px;
  font-weight: 700;
  line-height: 1;
  background: linear-gradient(135deg, #fff6d8, var(--soft-gold) 65%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.hhs-stat span {
  font-size: 12px;
  color: var(--muted);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.home-hero-actions-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
  margin-top: 40px;
  width: 100%;
}

.hha-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  padding: 20px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.1);
  text-align: left;
  transition: transform 200ms ease, border-color 200ms ease, background 200ms ease;
}

.hha-card:hover {
  transform: translateY(-3px);
  background: rgba(255, 255, 255, 0.07);
  border-color: rgba(255, 64, 113, 0.4);
}

.hha-icon {
  display: grid;
  place-items: center;
  width: 42px;
  aspect-ratio: 1;
  border-radius: 50%;
  background: rgba(216, 170, 76, 0.16);
  color: var(--soft-gold);
}

.hha-icon svg {
  width: 20px;
  height: 20px;
}

.hha-title {
  font-size: 15px;
  font-weight: 700;
  color: #fff;
}

.hha-desc {
  font-size: 12.5px;
  color: var(--muted);
  line-height: 1.4;
}

@media (max-width: 760px) {
  .home-hero-actions-grid {
    grid-template-columns: 1fr 1fr;
  }
  .home-hero-stats {
    grid-template-columns: repeat(2, 1fr);
  }
  .hhs-stat {
    border-bottom: 1px solid rgba(216, 170, 76, 0.22);
  }
  .hhs-stat:nth-child(2n) {
    border-right: none;
  }
  .hhs-stat:nth-last-child(-n+2) {
    border-bottom: none;
  }
  .hhs-stat strong {
    font-size: 26px;
  }
}

.hhb-stars-layer {
  position: absolute;
  inset: -10%;
  background-image:
    radial-gradient(circle at 8% 15%, rgba(255, 255, 255, 0.9) 0 1px, transparent 1.6px),
    radial-gradient(circle at 22% 42%, rgba(255, 64, 113, 0.75) 0 1px, transparent 1.6px),
    radial-gradient(circle at 35% 8%, rgba(255, 255, 255, 0.7) 0 1px, transparent 1.7px),
    radial-gradient(circle at 48% 55%, rgba(255, 255, 255, 0.85) 0 1px, transparent 1.6px),
    radial-gradient(circle at 61% 20%, rgba(66, 147, 245, 0.7) 0 1px, transparent 1.6px),
    radial-gradient(circle at 74% 48%, rgba(255, 255, 255, 0.7) 0 1px, transparent 1.7px),
    radial-gradient(circle at 88% 12%, rgba(216, 170, 76, 0.75) 0 1px, transparent 1.6px),
    radial-gradient(circle at 93% 65%, rgba(255, 255, 255, 0.8) 0 1px, transparent 1.6px),
    radial-gradient(circle at 15% 78%, rgba(255, 255, 255, 0.65) 0 1px, transparent 1.7px),
    radial-gradient(circle at 55% 85%, rgba(255, 255, 255, 0.7) 0 1px, transparent 1.6px);
  background-size: 340px 260px;
  opacity: 0.62;
  animation: hhbStarsDrift 34s ease-in-out infinite alternate, starTwinkle 3.4s ease-in-out infinite;
}

@keyframes hhbStarsDrift {
  to {
    background-position: 140px -95px, 112px -76px, 168px -112px, 130px -84px, 150px -102px, 122px -66px, 176px -122px, 94px -56px, 102px -76px, 84px -46px;
    opacity: 0.85;
  }
}

/* Real constellations (Ursa Major, Orion, Cassiopeia, Scorpius) — hand-placed,
   illustrative star positions, not astronomically precise, just recognizable.
   Each stays almost invisible, then traces itself and glows for a few seconds,
   then fades back and rests — staggered per constellation on a shared 36s
   cycle so they take turns rather than all lighting up together. The orbiting
   planets that used to share this backdrop were dropped for performance —
   offset-path animation on five separate elements, running continuously on
   every page, was real ongoing compositor cost for a background layer. Stars
   and constellations stay cheap: opacity/transform only, no path animation. */
.hhb-constellations {
  position: absolute;
  inset: 0;
}

.hhb-const {
  position: absolute;
}

.hhbc-lines {
  fill: none;
  stroke-dasharray: 1000;
  stroke-dashoffset: 1000;
  opacity: 0;
  animation: hhbConstDraw 36s ease-in-out infinite;
}

.hhbc-stars circle {
  transform-box: fill-box;
  transform-origin: center;
  opacity: 0;
  transform: scale(0.6);
  filter: drop-shadow(0 0 5px rgba(255, 255, 255, 0.8));
  animation: hhbConstStars 36s ease-in-out infinite;
}

.hhb-const-2 .hhbc-lines, .hhb-const-2 .hhbc-stars circle { animation-delay: 9s; }
.hhb-const-3 .hhbc-lines, .hhb-const-3 .hhbc-stars circle { animation-delay: 18s; }
.hhb-const-4 .hhbc-lines, .hhb-const-4 .hhbc-stars circle { animation-delay: 27s; }

@keyframes hhbConstDraw {
  0% { opacity: 0; stroke-dashoffset: 1000; }
  4% { opacity: 0.68; }
  10% { stroke-dashoffset: 0; opacity: 0.68; }
  22% { stroke-dashoffset: 0; opacity: 0.68; }
  28% { opacity: 0; }
  100% { opacity: 0; stroke-dashoffset: 1000; }
}

@keyframes hhbConstStars {
  0%, 8% { opacity: 0; transform: scale(0.6); }
  14% { opacity: 1; transform: scale(1.25); }
  22% { opacity: 0.9; transform: scale(1); }
  28% { opacity: 0; transform: scale(0.6); }
  100% { opacity: 0; transform: scale(0.6); }
}

@media (prefers-reduced-motion: reduce) {
  .hhb-stars-layer,
  .hhbc-lines,
  .hhbc-stars circle {
    animation: none;
  }
  .hhbc-lines {
    opacity: 0.2;
    stroke-dashoffset: 0;
  }
  .hhbc-stars circle {
    opacity: 0.35;
    transform: scale(1);
  }
}

@media (max-width: 620px) {
  .hhb-const-3,
  .hhb-const-4 {
    display: none;
  }
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  color: var(--space-pink);
  font-size: clamp(14px, 1.05vw, 15px);
  font-weight: 900;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.eyebrow::before {
  content: "";
  width: 34px;
  height: 1px;
  background: currentColor;
}

h1,
h2,
h3 {
  font-family: "Cormorant Garamond", "Cormorant Fallback", Georgia, serif;
  letter-spacing: 0;
  margin: 0;
  line-height: 1.08;
}

h1 {
  margin-top: 14px;
  font-size: clamp(38px, 4.8vw, 66px);
  max-width: 850px;
  color: #fff;
}

h2 {
  font-size: clamp(30px, 3.6vw, 50px);
  color: #fff;
}

h3 {
  font-size: 26px;
  color: #fff;
}

p {
  line-height: 1.78;
  color: var(--muted);
}

.hero p {
  width: min(650px, 100%);
  color: rgba(245, 239, 250, 0.85);
  font-size: 18px;
}.hero-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 34px;
}

.astro-ring {
  position: absolute;
  right: max(24px, calc((100vw - 1180px) / 2));
  bottom: 44px;
  width: min(270px, 32vw);
  aspect-ratio: 1;
  border-radius: 50%;
  border: 1px solid rgba(255, 64, 113, 0.3);
  opacity: 0.5;
  animation: spin 34s linear infinite;
}

.astro-ring::before,
.astro-ring::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  inset: 18%;
  border: 1px solid rgba(245, 239, 250, 0.15);
}

.astro-ring::after {
  inset: 36%;
  background: radial-gradient(circle, rgba(255, 64, 113, 0.3), transparent 62%);
}

.kundli-hero-tagline {
  color: var(--muted);
  font-size: 16px;
  margin-top: 8px;
}

.kundli-hero-intro {
  margin: 0 auto 36px;
  padding: 26px 32px;
  border-radius: 14px;
  border: 1px solid rgba(255, 64, 113, 0.15);
  background: rgba(23, 14, 46, 0.5);
  backdrop-filter: blur(10px);
}

.kundli-hero-intro p {
  margin: 0;
  font-size: 15px;
  line-height: 1.75;
  color: var(--muted);
  text-align: justify;
  text-align-last: left;
}


.kundli-prose {
  margin: 0 auto;
  padding: 26px 32px;
  border-radius: 14px;
  border: 1px solid rgba(255, 64, 113, 0.15);
  background: rgba(23, 14, 46, 0.5);
  backdrop-filter: blur(10px);
}

.kundli-prose h3 {
  font-size: 24px;
  color: #fff;
  margin-top: 38px;
  margin-bottom: 12px;
}

.kundli-prose > .reveal > h3:first-child,
.kundli-prose h3:first-of-type {
  margin-top: 0;
}

.kundli-prose p {
  margin: 0 0 14px;
  font-size: 15px;
  text-align: justify;
  text-align-last: left;
}

.kundli-prose p:last-child {
  margin-bottom: 0;
}

.kundli-prose .prose-lede {
  text-align: center;
  color: var(--muted);
  margin-bottom: 36px;
}

.prose-planet-list {
  margin: 0 0 14px;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 7px;
}

.prose-planet-list li {
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--muted);
}

.prose-planet-list strong {
  color: #fff;
  font-weight: 700;
}

/* ============================================================
   ASTROTALK-STYLE CONTINUOUS CARD — free-kundli-test.html only.
   One long left-aligned document inside a single colour-washed card,
   instead of separate centered/boxed sections per topic. Scoped to
   its own class so it never touches the live Free Kundli page.
   ============================================================ */
.at-style-card {
  max-width: 1120px;
  margin: 0 auto 64px;
  padding: 44px 48px;
  border-radius: 20px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background-color: rgba(15, 9, 28, 0.75);
  background-image:
    radial-gradient(ellipse 950px 600px at 50% 0%, rgba(255, 64, 113, 0.26), transparent 70%),
    radial-gradient(ellipse 950px 600px at 50% 100%, rgba(255, 64, 113, 0.26), transparent 70%);
  background-repeat: no-repeat;
  background-position: top center, bottom center;
  backdrop-filter: blur(10px);
}

.at-style-card h2 {
  text-align: left;
  font-size: clamp(26px, 3vw, 36px);
  margin: 0 0 16px;
}

.at-style-card h2:not(:first-child) {
  margin-top: 56px;
}

.at-style-card h3 {
  text-align: left;
  font-size: 20px;
  color: #fff;
  margin: 26px 0 8px;
}

.at-style-card h3:first-of-type {
  margin-top: 0;
}

.at-style-card h3 a {
  color: #fff;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: rgba(255, 255, 255, 0.35);
}

.at-style-card h3 a:hover {
  text-decoration-color: var(--space-pink);
}

.at-style-card p {
  text-align: left;
  color: var(--muted);
  line-height: 1.75;
  font-size: 15px;
  margin: 0 0 14px;
}

.at-style-card p:last-child {
  margin-bottom: 0;
}

.at-style-card .prose-lede {
  font-size: 15.5px;
  color: rgba(245, 239, 250, 0.85);
}

.at-style-card ul {
  margin: 0 0 14px;
  padding-left: 0;
  list-style: none;
}

.at-style-card ul li {
  color: var(--muted);
  line-height: 1.7;
  margin-bottom: 5px;
}

.at-style-card ul li strong {
  color: #fff;
}

@media (max-width: 620px) {
  .at-style-card {
    padding: 30px 24px;
  }
}

/* ============================================================
   FEATURE PILLS — free-kundli-test.html only. Capsule CTA-button
   redesign of the 4 feature cards (client reference: a rounded
   pill button with icon, label and arrow). Scoped to its own
   classes so the live Free Kundli page keeps its boxed cards.
   ============================================================ */
.fkt-pill-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-bottom: 72px;
}

.fkt-pill {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 8px 8px 10px;
  border-radius: 999px;
  text-decoration: none;
  color: #fff;
  white-space: nowrap;
  transition: transform 220ms ease, box-shadow 220ms ease;
}

.fkt-pill-icon {
  flex: none;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: rgba(255, 255, 255, 0.22);
}

.fkt-pill-icon svg {
  width: 19px;
  height: 19px;
  stroke: #fff;
  stroke-width: 1.9;
}

.fkt-pill-label {
  flex: 1;
  font-family: "Inter", sans-serif;
  font-weight: 700;
  font-size: 14.5px;
  overflow: hidden;
  text-overflow: ellipsis;
}

.fkt-pill-arrow {
  flex: none;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: rgba(255, 255, 255, 0.22);
  transition: transform 220ms ease, background 220ms ease;
}

.fkt-pill-arrow svg {
  width: 14px;
  height: 14px;
}

.fkt-pill:hover {
  transform: translateY(-4px);
}

.fkt-pill:hover .fkt-pill-arrow {
  transform: translateX(3px);
  background: rgba(11, 6, 27, 0.2);
}

.fkt-pill-pink {
  background: linear-gradient(135deg, var(--space-pink), var(--space-pink-hover));
  box-shadow: 0 14px 30px rgba(255, 64, 113, 0.32);
}
.fkt-pill-pink:hover {
  box-shadow: 0 18px 38px rgba(255, 64, 113, 0.45);
}

.fkt-pill-blue {
  background: linear-gradient(135deg, #4293f5, #2f6fe0);
  box-shadow: 0 14px 30px rgba(66, 147, 245, 0.32);
}
.fkt-pill-blue:hover {
  box-shadow: 0 18px 38px rgba(66, 147, 245, 0.45);
}

.fkt-pill-gold {
  background: linear-gradient(135deg, var(--space-gold), #c2872e);
  box-shadow: 0 14px 30px rgba(216, 170, 76, 0.32);
}
.fkt-pill-gold:hover {
  box-shadow: 0 18px 38px rgba(216, 170, 76, 0.45);
}

.fkt-pill-violet {
  background: linear-gradient(135deg, var(--space-violet), #7c56f0);
  box-shadow: 0 14px 30px rgba(155, 123, 255, 0.32);
}
.fkt-pill-violet:hover {
  box-shadow: 0 18px 38px rgba(155, 123, 255, 0.45);
}

@media (max-width: 920px) {
  .fkt-pill-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 560px) {
  .fkt-pill-grid {
    grid-template-columns: 1fr;
  }
}

section {
  padding: 92px 0;
}

.section-head {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 28px;
  margin-bottom: 42px;
}

.section-head p {
  width: min(470px, 100%);
}

.grid {
  display: grid;
  gap: 22px;
}

.grid.four {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.grid.three {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.grid.two {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

/* Why Choose Us section: 5 cards. A fixed 3-column grid leaves the last row's 2 cards
   left-aligned with an empty gap where a 3rd would go — flex + wrap + center means an
   incomplete last row centers itself as a group instead, so 3-then-2 reads as intentional. */
.why-choose-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 22px;
}

.why-choose-grid > .card {
  flex: 0 1 calc((100% - 44px) / 3);
  min-width: 260px;
}

@media (max-width: 920px) {
  .why-choose-grid > .card {
    flex: 0 1 100%;
  }
}

.card {
  position: relative;
  min-height: 100%;
  padding: 28px;
  border: 1px solid rgba(255, 64, 113, 0.12);
  border-radius: 18px;
  background: rgba(23, 14, 46, 0.55);
  box-shadow: 0 24px 54px rgba(5, 2, 14, 0.38);
  backdrop-filter: blur(12px);
  overflow: hidden;
  transition: transform 220ms ease, box-shadow 220ms ease, border-color 220ms ease;
}

.card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 4px;
  border-radius: 18px 18px 0 0;
  background: linear-gradient(90deg, var(--space-pink), var(--space-blue), var(--space-gold));
  opacity: 0;
  transition: opacity 220ms ease;
}

.card:hover {
  transform: translateY(-8px);
  box-shadow: 0 20px 50px rgba(255, 64, 113, 0.25);
  border-color: rgba(255, 64, 113, 0.4);
}

.card:hover::before {
  opacity: 1;
}

.icon {
  width: 50px;
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  margin-bottom: 22px;
  border-radius: 50%;
  background: rgba(255, 64, 113, 0.16);
  color: var(--space-pink);
  font-size: 22px;
  font-weight: 700;
}

.band {
  color: #fff;
  background:
    radial-gradient(circle at 18% 20%, rgba(255, 64, 113, 0.18), transparent 25rem),
    radial-gradient(circle at 85% 70%, rgba(66, 147, 245, 0.22), transparent 30rem),
    #0b061b;
}

.band h2,
.band h3 {
  color: #fff;
}

.band p {
  color: rgba(245, 239, 250, 0.8);
}
.band .card h3 {
  color: #fff;
}

.band .card p {
  color: rgba(245, 239, 250, 0.75);
}

.band .mini-link {
  color: var(--space-pink);
}

.home-services {
  position: relative;
  overflow: hidden;
}

.home-services::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 16% 18%, rgba(255, 64, 113, 0.12), transparent 28rem),
    radial-gradient(circle at 86% 62%, rgba(66, 147, 245, 0.15), transparent 30rem);
  pointer-events: none;
}

.home-services .container {
  position: relative;
}

.service-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 22px;
}

.service-card {
  position: relative;
  min-height: 250px;
  padding: 28px;
  border: 1px solid rgba(255, 64, 113, 0.15);
  border-radius: 8px;
  background: rgba(23, 14, 46, 0.6);
  color: #fff;
  overflow: hidden;
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.3);
  backdrop-filter: blur(12px);
  transition: transform 240ms ease, border-color 240ms ease, background 240ms ease, box-shadow 240ms ease;
}

.service-card::before {
  content: "";
  position: absolute;
  inset: auto 0 0;
  height: 58%;
  background: linear-gradient(180deg, transparent, rgba(255, 64, 113, 0.15));
  opacity: 0;
  transition: opacity 240ms ease;
}

.service-card:hover {
  transform: translateY(-9px);
  border-color: var(--space-pink);
  background: rgba(35, 20, 70, 0.75);
  box-shadow: 0 26px 70px rgba(255, 64, 113, 0.25);
}

.service-card:hover::before {
  opacity: 1;
}

.service-icon {
  position: relative;
  width: 58px;
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  margin-bottom: 26px;
  border-radius: 50%;
  background: rgba(255, 64, 113, 0.16);
  color: var(--space-pink);
  font-size: 24px;
  font-weight: 900;
}

.service-icon svg,
.icon svg {
  width: 24px;
  height: 24px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  display: block;
}

.service-card h3,
.service-card p {
  position: relative;
}

.service-card h3 {
  color: #fff;
  margin-bottom: 18px;
}

.service-card p {
  max-height: 0;
  margin: 0;
  opacity: 0;
  overflow: hidden;
  transform: translateY(12px);
  transition: max-height 260ms ease, opacity 220ms ease, transform 220ms ease;
}

.service-card:hover p {
  max-height: 160px;
  opacity: 1;
  transform: translateY(0);
}

.service-more {
  background: linear-gradient(135deg, rgba(255, 64, 113, 0.25), rgba(66, 147, 245, 0.2));
}.footer-disclaimer {
  max-width: 980px;
  margin: 34px auto 0;
  font-size: 12px;
  line-height: 1.6;
  /* 0.35 read as ~2.9:1 against the footer background, below the 4.5:1 text needs. */
  color: rgba(245, 239, 250, 0.5);
  text-align: center;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  padding-top: 22px;
}

.split {
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
  gap: 52px;
  align-items: center;
}

/* The card's min-height stretches it to match the taller text column
   next to it — center its content so short lists don't leave a slab
   of empty space at the bottom while the text column runs long. */
.split .card {
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.list {
  display: grid;
  gap: 15px;
  margin: 28px 0 0;
  padding: 0;
  list-style: none;
}

.list li {
  display: flex;
  gap: 12px;
  color: var(--muted);
  line-height: 1.65;
}

.list li::before {
  content: "*";
  color: var(--gold);
  font-weight: 900;
}

.mini-link {
  font-weight: 900;
  color: var(--space-pink);
}.testimonial-track {
  display: flex;
  gap: 22px;
  transition: transform 520ms ease;
  will-change: transform;
  cursor: grab;
}

.testimonial-track.dragging,
.testimonial-track.no-transition {
  cursor: grabbing;
  transition: none;
}

.testimonial-slide {
  flex: 0 0 calc((100% - 44px) / 3);
  min-width: 0;
}.contact-panel {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: 28px;
}

.form {
  display: grid;
  gap: 14px;
}

.form[hidden] {
  display: none;
}

.form input,
.form textarea,
.form select {
  width: 100%;
  min-height: 52px;
  border: 1px solid rgba(255, 64, 113, 0.2);
  border-radius: 12px;
  padding: 14px 16px;
  background: rgba(23, 14, 46, 0.75);
  color: var(--ink);
  font: inherit;
  transition: border-color 180ms ease, box-shadow 180ms ease;
}

.form select {
  padding-right: 40px;
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%23ff4071" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><path d="M6 9l6 6 6-6"/></svg>');
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 14px;
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
}

.form input:focus,
.form textarea:focus,
.form select:focus {
  outline: none;
  border-color: var(--space-pink);
  box-shadow: 0 0 15px rgba(255, 64, 113, 0.25);
}

.form input::placeholder,
.form textarea::placeholder {
  color: rgba(245, 239, 250, 0.5);
}

.form select option {
  background: #130c24;
  color: var(--ink);
}

.form textarea {
  min-height: 140px;
  resize: vertical;
}

.form-note {
  margin: 0;
  color: var(--space-pink);
  font-weight: 800;
}

.form-note-error {
  color: #ff6b6b;
}

.floating-actions {
  position: fixed;
  right: 18px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 45;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 10px;
}

.float-btn {
  height: 52px;
  width: 52px;
  border-radius: 26px;
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  color: #fff;
  text-decoration: none;
  white-space: nowrap;
  overflow: hidden;
  box-shadow: 0 12px 28px rgba(16, 11, 31, 0.3);
  transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1), border-radius 0.3s, transform 180ms ease, box-shadow 180ms ease;
  position: relative;
}

.float-btn:hover {
  width: 185px;
  border-radius: 26px;
  transform: translateY(-4px);
  box-shadow: 0 18px 36px rgba(16, 11, 31, 0.45);
}

.float-label {
  opacity: 0;
  position: absolute;
  left: 20px;
  top: 50%;
  transform: translateY(-50%);
  font-family: 'Inter', sans-serif;
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.04em;
  color: #fff;
  transition: opacity 0.22s ease;
  text-transform: uppercase;
  pointer-events: none;
}

.float-btn:hover .float-label {
  opacity: 1;
}

.float-btn.whatsapp {
  background: linear-gradient(135deg, #25d366, #128c7e);
}

.float-btn.call {
  background: var(--soft-gold);
  color: #fff;
}

.float-btn.kundli {
  background: linear-gradient(135deg, #7C4DFF, #448AFF);
}

.float-btn svg {
  width: 24px;
  height: 24px;
  flex-shrink: 0;
  display: block;
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  transition: right 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Floating "Panchang & Kundli" menu — same hover-bridge pattern as .consult-dropdown,
   opening leftward since the trigger sits at the right edge of the screen. Also opens
   on a JS-added .open class so it works with a tap, not just a hover (see main.js). */
.float-menu {
  position: relative;
}

.float-menu .float-btn {
  cursor: pointer;
  border: 0;
  font: inherit;
}

.float-submenu {
  position: absolute;
  right: calc(100% + 14px);
  top: 50%;
  min-width: 208px;
  padding: 8px;
  background: rgba(15, 9, 30, 0.98);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 14px;
  box-shadow: 0 24px 52px rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(18px);
  display: flex;
  flex-direction: column;
  gap: 4px;
  opacity: 0;
  pointer-events: none;
  transform: translateY(-50%) translateX(8px);
  z-index: 46;
}

.float-submenu::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 100%;
  width: 14px;
}

.float-menu:hover .float-submenu,
.float-menu:focus-within .float-submenu,
.float-menu.open .float-submenu {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(-50%) translateX(0);
}

.float-submenu a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 10px;
  color: var(--ink);
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
  transition: background 160ms ease, color 160ms ease;
}

.float-submenu a:hover {
  background: rgba(255, 64, 113, 0.16);
  color: #fff;
}

.float-sub-icon {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  flex: 0 0 26px;
  border-radius: 50%;
}

.float-sub-icon svg {
  width: 14px;
  height: 14px;
}

.float-sub-icon-panchang { background: rgba(216, 170, 76, 0.18); color: var(--soft-gold); }
.float-sub-icon-kundli { background: rgba(38, 198, 218, 0.18); color: #26c6da; }
.float-sub-icon-compat { background: rgba(255, 138, 128, 0.18); color: #ff8a80; }
.float-sub-icon-match { background: rgba(255, 64, 113, 0.18); color: var(--space-pink); }

/* Pricing Page Custom Styles */
.pricing-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 28px;
  margin-top: 40px;
}

.pricing-card {
  border: 1px solid rgba(255, 64, 113, 0.15);
  transition: transform 220ms ease, border-color 220ms ease, box-shadow 220ms ease;
  position: relative;
  display: flex;
  flex-direction: column;
}

.pricing-card.popular {
  border-color: var(--space-pink);
  background: linear-gradient(180deg, rgba(255, 64, 113, 0.08) 0%, rgba(23, 14, 46, 0.8) 100%);
  transform: translateY(-8px);
}

.pricing-card.popular:hover {
  transform: translateY(-12px);
}

.pricing-badge {
  position: absolute;
  top: -14px;
  left: 50%;
  transform: translateX(-50%);
  background: linear-gradient(135deg, #ff6f00, var(--space-pink));
  color: #fff;
  padding: 4px 14px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  box-shadow: 0 8px 18px rgba(255, 64, 113, 0.25);
}

.price-box {
  margin: 18px 0 24px;
}

.price-currency {
  font-size: 20px;
  font-weight: 600;
  vertical-align: super;
  color: var(--space-gold);
}

.price-amount {
  font-size: 48px;
  font-weight: 800;
  color: #fff;
  font-family: 'Inter', sans-serif;
}

.price-period {
  color: var(--muted);
  font-size: 14px;
}

.pricing-features {
  list-style: none;
  padding: 0;
  margin: 0 0 28px 0;
  display: grid;
  gap: 12px;
  flex-grow: 1;
}

.pricing-features li {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14.5px;
  color: var(--ink);
}

.pricing-features li::before {
  content: "✦";
  color: var(--space-pink);
  font-size: 12px;
}/* Blog Page Custom Styles */
.blog-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 28px;
  margin-top: 40px;
}

.blog-card {
  display: flex;
  flex-direction: column;
  border: 1px solid rgba(255, 64, 113, 0.12);
  background: rgba(23, 14, 46, 0.55);
}

.blog-card:hover {
  transform: translateY(-4px);
  border-color: rgba(255, 64, 113, 0.3);
}

.blog-meta {
  display: flex;
  gap: 14px;
  font-size: 12.5px;
  color: var(--muted);
  margin-bottom: 10px;
}

.blog-card h3 {
  font-size: 20px;
  margin-bottom: 12px;
  line-height: 1.35;
}

.blog-card h3 a {
  color: #fff;
  text-decoration: none;
}

.blog-card h3 a:hover {
  color: var(--space-pink);
}

.blog-readmore {
  margin-top: auto;
  padding-top: 18px;
  font-weight: 700;
  font-size: 14px;
  color: var(--space-pink);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.blog-readmore::after {
  content: "→";
  transition: transform 180ms ease;
}

.blog-readmore:hover::after {
  transform: translateX(4px);
}

.blog-detail-meta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin: 18px 0 0;
  font-size: 14px;
  letter-spacing: 0.02em;
  color: var(--muted);
}

.blog-detail-meta-dot {
  color: var(--space-pink);
}

.blog-detail-content {
  padding-top: 16px;
}

.blog-detail-grid {
  display: grid;
  grid-template-columns: 7fr 3fr;
  gap: 40px;
  align-items: start;
}

.blog-detail-cover {
  width: 100%;
  aspect-ratio: 16 / 8;
  object-fit: cover;
  border-radius: 8px;
  border: 1px solid rgba(255, 64, 113, 0.15);
  margin-bottom: 30px;
}

.blog-detail-main .lead {
  font-size: 17px;
  color: rgba(245, 239, 250, 0.9);
}

.blog-detail-author {
  margin-top: 30px;
  padding-top: 20px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  font-size: 13.5px;
  color: var(--muted);
}

.blog-detail-author span {
  color: #fff;
  font-weight: 700;
}

.blog-detail-aside {
  position: sticky;
  top: 100px;
  padding: 26px;
  border: 1px solid rgba(255, 64, 113, 0.15);
  border-radius: 8px;
  background: rgba(23, 14, 46, 0.55);
}

.blog-detail-aside-head {
  margin-bottom: 18px;
}

.blog-detail-aside-head h3 {
  margin-top: 8px;
  font-size: 22px;
}

.blog-detail-related {
  display: grid;
  gap: 16px;
  margin-bottom: 18px;
}

.blog-related-card {
  padding-bottom: 16px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.blog-related-card:last-child {
  padding-bottom: 0;
  border-bottom: none;
}

.blog-related-date {
  font-size: 12px;
  color: var(--muted);
}

.blog-related-card h4 {
  margin: 6px 0 0;
  font-size: 15.5px;
  line-height: 1.35;
  font-family: "Cormorant Garamond", "Cormorant Fallback", Georgia, serif;
}

.blog-related-card h4 a {
  color: #fff;
  text-decoration: none;
}

.blog-related-card h4 a:hover {
  color: var(--space-pink);
}

@media (max-width: 920px) {
  .blog-detail-grid {
    grid-template-columns: 1fr;
  }
  .blog-detail-aside {
    position: static;
  }
}

@media (max-width: 920px) {.pricing-grid,
  .blog-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 620px) {.pricing-grid,
  .blog-grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }
  .pricing-card.popular {
    transform: none;
  }
  .pricing-card.popular:hover {
    transform: translateY(-4px);
  }
}

.footer {
  padding: 54px 0 32px;
  color: rgba(245, 239, 250, 0.76);
  background: #100b1f;
}

.footer-grid {
  display: grid;
  grid-template-columns: 1.4fr repeat(3, 1fr);
  gap: 28px;
}

.footer h3,
.footer h4 {
  color: #fff;
}

.footer-brand-sub {
  display: block;
  margin-top: 4px;
  color: var(--soft-gold);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.footer a {
  display: block;
  margin-top: 12px;
  color: rgba(245, 239, 250, 0.72);
}.footer-bottom {
  margin-top: 38px;
  padding-top: 22px;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  font-size: 14px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 10px 20px;
}

/* ============================================================
   LEGAL PAGES — Terms of Use / Privacy Policy prose
   ============================================================ */
.legal-content {
  max-width: 780px;
  margin: 0 auto;
  padding: 8px 24px 60px;
}

.legal-content h2 {
  margin: 40px 0 12px;
  font-size: 22px;
}

.legal-content h2:first-child {
  margin-top: 0;
}

.legal-content p {
  margin: 0 0 14px;
  color: var(--muted);
  line-height: 1.7;
}

.legal-content ul.list {
  margin: 0 0 14px;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 10px;
}

.legal-content ul.list li {
  padding-left: 22px;
  position: relative;
  color: var(--muted);
  line-height: 1.7;
}

.legal-content ul.list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 10px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--space-pink);
}

.legal-content a {
  color: var(--space-pink);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.legal-content a:hover {
  color: var(--space-pink-hover);
}

.reveal {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity 700ms ease, transform 700ms ease;
}

.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}

@keyframes slowZoom {
  to {
    transform: scale(1.1) translate3d(-1.4%, -1%, 0);
  }
}

@keyframes constellations {
  to {
    background-position: 28px -18px, 22px -14px, 34px -22px, 26px -16px, 30px -20px, 24px -12px, 36px -24px, 18px -10px, 20px -14px, 16px -8px;
    opacity: 0.5;
  }
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

@media (max-width: 1300px) and (min-width: 921px) {
  .nav-wrap {
    padding: 0 24px;
    gap: 8px;
  }
  .nav-links a {
    padding: 6px 10px;
    font-size: 13px;
  }
  .book-now {
    min-height: 38px;
    padding: 0 9px 0 14px;
    font-size: 12.5px;
  }
  .brand-name {
    font-size: 20px;
  }
}

@media (max-width: 920px) {
  .menu-toggle {
    display: grid;
    place-items: center;
  }

  /* nav-links leaves the flex flow below (position: absolute), so it no
     longer supplies the auto-margin that centers it and pushes the action
     cluster to the right — restore that push here for the two items left. */
  .nav-top-actions {
    margin-left: auto;
  }

  .nav-links {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    max-height: calc(100dvh - 74px);
    overflow-y: auto;
    padding: 20px 16px 30px;
    display: grid;
    gap: 8px;
    /* Fully solid, not rgba() — on some GPU/compositor combos, an rgba()
       background paired with backdrop-filter renders far more transparent
       than its alpha implies, letting the hero text behind bleed through
       legibly instead of just tinting a blur. A solid color sidesteps it. */
    background: #0d0819;
    border-bottom: 1px solid var(--line);
    border-radius: 0 0 22px 22px;
    box-shadow: 0 30px 60px rgba(0, 0, 0, 0.5);
    transform: translateY(-14px);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform-origin: top center;
    transition: transform 440ms cubic-bezier(0.22, 1, 0.36, 1), opacity 260ms ease, visibility 0s linear 440ms;
    -webkit-overflow-scrolling: touch;
  }

  body.nav-open .nav-links {
    transform: translateY(0);
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transition: transform 460ms cubic-bezier(0.22, 1, 0.36, 1), opacity 300ms ease, visibility 0s;
  }

  .nav-links a {
    width: min(420px, 100%);
    margin: 0 auto;
  }  .container,
  .nav-wrap {
    padding: 0 24px;
  }

  .hero-content {
    padding: 40px 0;
    max-width: 100%;
  }

  .hero p {
    margin: 14px auto 0;
  }

  .hero-actions {
    justify-content: center;
  }

  .hero {
    min-height: 650px;
  }

  .astro-ring {
    opacity: 0.24;
  }  .section-head,
  .split,
  .contact-panel,
  .footer-grid {
    grid-template-columns: 1fr;
    display: grid;
  }

  .grid.four {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .grid.three,
  .grid.two {
    grid-template-columns: 1fr;
  }

  .testimonial-slide {
    flex-basis: calc((100% - 22px) / 2);
  }

  .service-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .floating-actions {
    top: auto;
    right: 16px;
    bottom: 16px;
    transform: none;
  }

  .float-btn.call {
    order: 2;
  }

  .float-menu {
    display: none;
  }
}

@media (max-width: 620px) {
  .nav-wrap,
  .container {
    width: 100%;
    padding: 0 20px;
  }

  .brand-name {
    font-size: 18px !important;
  }

  .brand-sub {
    font-size: 8px !important;
  }

  .brand-mark {
    width: 32px;
    font-size: 13px;
  }

  .hero,
  .hero.compact {
    min-height: auto;
    padding: 60px 0;
  }  .book-now {
    min-width: auto;
    min-height: 40px;
    padding: 0 10px 0 16px;
    font-size: 12.5px;
    gap: 6px;
  }

  .menu-toggle {
    width: 38px;
  }

  h1 {
    font-size: clamp(34px, 9vw, 44px) !important;
  }

  h2 {
    font-size: clamp(28px, 7vw, 36px) !important;
  }

  h3 {
    font-size: clamp(22px, 6vw, 26px) !important;
  }

  section {
    padding: 46px 0;
  }

  .section-head {
    margin-bottom: 26px;
  }

  .section-head p {
    width: 100%;
  }

  .card {
    padding: 22px;
  }

  .testimonial-slide {
    flex-basis: 100%;
  }

  .grid.four {
    grid-template-columns: 1fr;
  }

  /* Stays 2-up rather than collapsing to 1 column, and loses the fixed
     250px min-height that left a lot of empty space below short copy. */
  .service-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
  }

  .service-card {
    min-height: 0;
    padding: 16px;
  }

  .service-icon {
    width: 40px;
    margin-bottom: 12px;
  }

  .service-icon svg {
    width: 19px;
    height: 19px;
  }

  .service-card h3 {
    font-size: 15px !important;
  }

  .service-card p {
    font-size: 12px;
  }  .floating-actions {
    bottom: 12px;
    right: 12px;
    gap: 8px;
  }
  
  .float-btn {
    width: 46px;
    height: 46px;
    border-radius: 50%;
  }

  .float-btn svg {
    right: 11px !important;
  }
  
  .float-btn:hover {
    width: 46px !important;
  }
  
  .float-btn:hover .float-label {
    display: none !important;
  }
}

/* Custom Additions: Language Toggle, How It Works, and Zodiac Star Signs */

.lang-switch-btn {
  display: grid;
  place-items: center;
  width: 40px;
  aspect-ratio: 1;
  padding: 0;
  border: 1px solid rgba(255, 64, 113, 0.4);
  border-radius: 50%;
  color: #fff;
  background: rgba(255, 255, 255, 0.05);
  box-shadow: 0 12px 26px rgba(0, 0, 0, 0.15);
  cursor: pointer;
  transition: transform 180ms ease, background 180ms ease, box-shadow 180ms ease, color 180ms ease, border-color 180ms ease;
}

.lang-switch-btn:hover {
  transform: translateY(-2px);
  background: rgba(255, 64, 113, 0.15);
  border-color: var(--space-pink);
  box-shadow: 0 14px 30px rgba(255, 64, 113, 0.25);
}

.lang-switch-btn .globe-icon {
  width: 18px;
  height: 18px;
  stroke: var(--space-pink);
}

.book-now-label-short {
  display: none;
}

/* Mobile-menu language switcher — hidden on desktop, where the compact
   globe icon in the topbar already handles it. */
.nav-links .menu-lang-switch {
  display: none;
}

/* ============================================================
   MOBILE HEADER DECLUTTER — language moves into the hamburger
   menu below ~920px so the topbar only carries the consult
   button, account icon and menu toggle (was 4 cramped icons).
   ============================================================ */
@media (max-width: 920px) {
  .nav-top-actions > .lang-switch-btn {
    display: none;
  }

  .nav-links .menu-lang-switch {
    display: flex;
    align-items: center;
    gap: 10px;
    width: min(420px, 100%);
    aspect-ratio: auto;
    height: auto;
    margin: 6px auto 0;
    padding: 13px 18px;
    border-radius: 14px;
    border: 1px solid var(--line);
    background: rgba(255, 255, 255, 0.04);
    color: var(--ink);
    font-family: inherit;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
  }

  .nav-links .menu-lang-switch .globe-icon {
    width: 19px;
    height: 19px;
    flex: none;
    stroke: var(--space-pink);
  }

  .nav-links .menu-lang-switch .menu-lang-static {
    opacity: 0.7;
  }

  .nav-links .menu-lang-switch .lang-label {
    margin-left: auto;
    color: var(--space-pink);
    font-weight: 700;
  }
}

/* How It Works on Contact Page */
.how-it-works-section {
  padding-top: 40px;
  padding-bottom: 92px;
}

.step-card {
  position: relative;
  transition: transform 220ms ease, box-shadow 220ms ease, border-color 220ms ease;
}

.step-num {
  position: absolute;
  top: 20px;
  right: 24px;
  font-size: 40px;
  font-weight: 900;
  color: rgba(255, 64, 113, 0.12);
  font-family: "Inter", sans-serif;
  line-height: 1;
}

.step-card h3 {
  font-size: 24px;
  margin-bottom: 12px;
}

.step-card p {
  font-size: 14.5px;
  margin: 0;
}

/* Zodiac Section — pure-CSS horoscope ticker. Deliberately no JS: the track holds the
   12 sign cards twice back-to-back and animates translateX(-50%), which is exactly half
   its own width (one full set of cards), so it loops seamlessly forever. transform is the
   only thing animating, so this runs fully on the compositor — no per-frame JS, no layout
   reads, unlike the carousel/orbit systems elsewhere on this page. */
.zodiac-section {
  position: relative;
  overflow: hidden;
}

.zodiac-ticker-viewport {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}

.zodiac-ticker-track {
  display: flex;
  width: max-content;
  gap: 18px;
  animation: zodiacTickerScroll 55s linear infinite;
}

.zodiac-ticker-track:hover {
  animation-play-state: paused;
}

@keyframes zodiacTickerScroll {
  to { transform: translateX(-50%); }
}

.zodiac-ticker-card {
  flex: 0 0 auto;
  width: 240px;
  padding: 22px;
  border-radius: 12px;
  background: rgba(23, 14, 46, 0.55);
  border: 1px solid rgba(255, 64, 113, 0.15);
  backdrop-filter: blur(10px);
}

.zodiac-ticker-icon {
  display: grid;
  place-items: center;
  width: 40px;
  aspect-ratio: 1;
  margin-bottom: 12px;
  border-radius: 50%;
  background: rgba(216, 170, 76, 0.16);
  color: var(--soft-gold);
  font-size: 20px;
}

.zodiac-ticker-sign {
  display: block;
  font-family: "Cormorant Garamond", "Cormorant Fallback", Georgia, serif;
  font-size: 22px;
  font-weight: 700;
  color: #fff;
}

.zodiac-ticker-dates {
  display: block;
  margin-top: 2px;
  font-size: 12px;
  font-weight: 700;
  color: var(--space-gold);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.zodiac-ticker-line {
  margin: 12px 0 0;
  font-size: 14px;
  line-height: 1.6;
  color: rgba(245, 239, 250, 0.85);
}

@media (prefers-reduced-motion: reduce) {
  .zodiac-ticker-track {
    animation: none;
  }
  .zodiac-ticker-viewport {
    overflow-x: auto;
  }
}

@media (max-width: 620px) {
  .zodiac-ticker-card {
    width: 200px;
    padding: 18px;
  }
}

/* Kundli Page Specific Styles */
.kundli-form-section {
  padding: 16px 0 64px;
}

.kundli-highlights {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  margin-bottom: 36px;
}

.kundli-highlight {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 18px;
  border-radius: 999px;
  background: rgba(216, 170, 76, 0.08);
  border: 1px solid rgba(216, 170, 76, 0.28);
  color: var(--space-gold);
  font-size: 13px;
  font-weight: 700;
}

.kundli-highlight svg {
  width: 16px;
  height: 16px;
  flex: none;
}

.kundli-form-title {
  text-align: center;
  font-family: "Cormorant Garamond", "Cormorant Fallback", Georgia, serif;
  font-size: clamp(26px, 3vw, 36px);
  color: #fff;
  margin: 0 0 12px 0;
  letter-spacing: 0.02em;
}

.kundli-form-subtitle {
  max-width: 600px;
  margin: 0 auto 32px;
  text-align: center;
  font-size: 14.5px;
  line-height: 1.65;
  color: var(--muted);
}

.kundli-form-container {
  max-width: 820px;
  margin: 0 auto;
}

.kundli-form {
  padding: 38px;
  background: linear-gradient(135deg, rgba(23, 14, 46, 0.8), rgba(11, 6, 27, 0.9));
  border-color: rgba(255, 64, 113, 0.25);
  display: flex;
  flex-direction: column;
  gap: 20px;
  overflow: visible;
  z-index: 50;
}

.kundli-form-group-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12.5px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--space-pink);
  margin-top: 4px;
}

.kundli-form-group-title:first-child {
  margin-top: 0;
}

.kundli-form-group-title svg {
  width: 16px;
  height: 16px;
  flex: none;
}

.matching-person-panel {
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.02);
  overflow: hidden;
}

.matching-person-header {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 14px 18px;
  font-weight: 800;
  font-size: 15px;
  color: #fff;
}

.matching-person-header svg {
  width: 18px;
  height: 18px;
  flex: none;
}

.matching-person-panel.bride .matching-person-header {
  background: linear-gradient(90deg, rgba(255, 64, 113, 0.28), transparent);
  border-bottom: 1px solid rgba(255, 64, 113, 0.2);
  color: var(--space-pink);
}

.matching-person-panel.groom .matching-person-header {
  background: linear-gradient(90deg, rgba(66, 147, 245, 0.28), transparent);
  border-bottom: 1px solid rgba(66, 147, 245, 0.2);
  color: var(--space-blue);
}

.matching-person-body {
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.kundli-form label {
  font-size: 13.5px;
  font-weight: 700;
  color: var(--muted);
  margin-bottom: 4px;
}

.gender-toggle {
  display: flex;
  gap: 10px;
  min-height: 52px;
}

.gender-btn {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(255, 64, 113, 0.25);
  border-radius: 8px;
  background: rgba(23, 14, 46, 0.75);
  color: var(--muted);
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  transition: all 220ms ease;
}

.gender-btn:hover {
  border-color: rgba(255, 64, 113, 0.45);
  color: #fff;
}

.gender-btn.active {
  background: linear-gradient(135deg, var(--space-pink), var(--space-pink-hover));
  color: #fff;
  border-color: transparent;
  box-shadow: 0 8px 20px rgba(255, 64, 113, 0.25);
}

.form-actions-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 10px;
  flex-wrap: wrap;
  gap: 16px;
}

.btn-settings {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: none;
  border: 1px dashed rgba(216, 170, 76, 0.4);
  color: var(--space-gold);
  padding: 8px 14px;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition: all 180ms ease;
}

.btn-settings:hover {
  background: rgba(216, 170, 76, 0.08);
  border-color: var(--space-gold);
  transform: translateY(-1px);
}

.form-actions-right {
  display: flex;
  gap: 10px;
}

.btn-action-outline {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 64, 113, 0.25);
  color: #fff;
  padding: 8px 14px;
  border-radius: 6px;
  font-size: 12.5px;
  font-weight: 700;
  cursor: pointer;
  transition: all 180ms ease;
}

.btn-action-outline:hover {
  background: rgba(255, 64, 113, 0.15);
  border-color: var(--space-pink);
  transform: translateY(-1px);
}

.kundli-submit-btn-wrap {
  display: flex;
  justify-content: center;
  margin-top: 15px;
}

.btn-kundli-submit {
  min-width: 200px;
}

/* Real Kundli / Kundli Matching results (assets/js/kundli.js, kundli-matching.js) */
.kundli-result-panel {
  margin-top: 28px;
}

.kundli-chart-wrap {
  display: flex;
  justify-content: center;
  padding: 16px;
  border-radius: 8px;
  background: #fff;
}

.kundli-chart-wrap svg {
  max-width: 100%;
  height: auto;
}

.kundli-facts-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 16px;
  margin-top: 20px;
}

.kundli-fact {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 14px 16px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.kundli-fact span {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted);
}

.kundli-fact b {
  font-size: 16px;
  color: #fff;
}

.kundli-recap {
  margin: 0 0 18px;
  font-size: 13px;
  color: var(--muted);
}

.kundli-trait {
  margin: 8px 0 0;
  font-size: 14px;
  font-style: italic;
  color: rgba(245, 239, 250, 0.85);
}

/* ============================================================
   RESULT ENRICHMENT — matching verdict, person summaries,
   per-koota breakdown, and the print/PDF action row.
   ============================================================ */
.matching-verdict {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0 auto 4px;
  padding: 7px 18px;
  border-radius: 999px;
  font-size: 12.5px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.matching-verdict.band-weak { background: rgba(110, 37, 54, 0.35); color: #ff9db0; border: 1px solid rgba(255, 157, 176, 0.35); }
.matching-verdict.band-fair { background: rgba(181, 121, 58, 0.25); color: #f0b87a; border: 1px solid rgba(240, 184, 122, 0.35); }
.matching-verdict.band-good { background: rgba(216, 170, 76, 0.2); color: var(--soft-gold); border: 1px solid rgba(216, 170, 76, 0.4); }
.matching-verdict.band-excellent { background: rgba(52, 211, 153, 0.18); color: #6fe3b4; border: 1px solid rgba(52, 211, 153, 0.4); }

.matching-people-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  margin: 24px 0;
}

.matching-person-summary {
  padding: 16px 18px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-top: 3px solid transparent;
}

.matching-person-summary.bride { border-top-color: var(--space-pink); }
.matching-person-summary.groom { border-top-color: var(--space-blue); }

.matching-person-summary h4 {
  margin: 0 0 10px;
  font-family: "Cormorant Garamond", "Cormorant Fallback", Georgia, serif;
  font-size: 19px;
  color: #fff;
}

.matching-person-summary dl {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.matching-person-summary dl > div {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  font-size: 12.5px;
}

.matching-person-summary dt {
  color: var(--muted);
  flex: none;
}

.matching-person-summary dd {
  margin: 0;
  text-align: right;
  color: #fff;
  font-weight: 600;
}

.matching-person-summary dd span {
  display: block;
  font-weight: 400;
  color: var(--muted);
  font-size: 11px;
}

.koota-result-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 16px;
}

.koota-result-row {
  padding: 14px 16px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.koota-result-head {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 6px 10px;
  margin-bottom: 8px;
}

.koota-result-score {
  flex: none;
  font-family: "Cormorant Garamond", "Cormorant Fallback", Georgia, serif;
  font-weight: 700;
  font-size: 15px;
  color: var(--space-gold);
}

.koota-result-name {
  font-weight: 700;
  color: #fff;
  font-size: 13.5px;
}

.koota-result-pair {
  flex: 1 1 auto;
  text-align: right;
  font-size: 12px;
  color: var(--muted);
}

.koota-result-row .calc-bar-track {
  margin: 0;
}

.koota-result-row details {
  margin-top: 10px;
}

.koota-result-row summary {
  cursor: pointer;
  font-size: 12.5px;
  color: var(--space-blue);
  font-weight: 700;
}

.koota-result-row summary + p {
  margin: 8px 0 0;
  font-size: 13px;
  line-height: 1.6;
  color: var(--muted);
}

.kundli-result-actions {
  display: flex;
  justify-content: center;
  gap: 12px;
  margin-top: 28px;
  padding-top: 22px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.kundli-section-title {
  margin: 28px 0 10px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--space-gold);
}

.kundli-dosha-box {
  padding: 14px 16px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.04);
  border-left: 3px solid #34d399;
}

.kundli-dosha-box.present {
  border-left-color: #ff5d73;
}

.kundli-dosha-box p {
  margin: 0;
  font-size: 14px;
  line-height: 1.6;
  color: rgba(245, 239, 250, 0.9);
}

.kundli-dosha-box summary {
  cursor: pointer;
  margin-top: 10px;
  font-size: 13px;
  color: var(--space-blue);
  font-weight: 700;
}

.kundli-dosha-box ul {
  margin: 10px 0 0;
  padding-left: 18px;
  font-size: 13px;
  color: var(--muted);
}

.kundli-dosha-box li {
  margin-bottom: 6px;
  line-height: 1.5;
}

.kundli-yoga-item {
  padding: 12px 14px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  margin-bottom: 10px;
}

.kundli-yoga-item b {
  display: block;
  margin-bottom: 4px;
  font-size: 14px;
  color: var(--space-gold);
}

.kundli-yoga-item span {
  font-size: 13px;
  line-height: 1.5;
  color: var(--muted);
}

/* ============================================================
   KUNDLI / KUNDLI MATCHING — form + history two-column layout
   ============================================================ */
.kundli-page-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.65fr) minmax(0, 1fr);
  gap: 28px;
  align-items: stretch;
}

@media (max-width: 980px) {
  .kundli-page-grid {
    grid-template-columns: 1fr;
  }
}

.kundli-history-panel {
  position: sticky;
  top: 100px;
  display: flex;
  flex-direction: column;
  min-height: 320px;
  padding: 26px;
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(23, 14, 46, 0.55);
  backdrop-filter: blur(12px);
}

@media (max-width: 980px) {
  .kundli-history-panel {
    position: static;
  }
}

.kundli-history-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: "Cormorant Garamond", "Cormorant Fallback", Georgia, serif;
  font-size: 21px;
  color: #fff;
  margin: 0 0 4px;
}

.kundli-history-title svg {
  width: 18px;
  height: 18px;
  color: var(--space-gold);
  flex: none;
}

.kundli-history-sub {
  margin: 0 0 18px;
  font-size: 12.5px;
  color: var(--muted);
}

.kundli-history-empty {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 20px 6px;
  text-align: center;
}

.kundli-history-empty-icon {
  width: 54px;
  aspect-ratio: 1;
  border-radius: 50%;
  border: 1.5px dashed rgba(216, 170, 76, 0.4);
  display: grid;
  place-items: center;
  color: var(--space-gold);
}

.kundli-history-empty-icon svg {
  width: 24px;
  height: 24px;
}

.kundli-history-empty p {
  margin: 0;
  font-size: 13px;
  line-height: 1.6;
  max-width: 220px;
}

.kundli-history-login-btn {
  min-height: 38px;
  padding: 0 22px;
  font-size: 13px;
}

.kundli-history-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.kundli-history-item {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 12px 14px;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.03);
  cursor: pointer;
  text-align: left;
  font: inherit;
  color: inherit;
  transition: transform 180ms ease, border-color 180ms ease, background 180ms ease;
}

.kundli-history-item:hover,
.kundli-history-item:focus-visible {
  outline: none;
  transform: translateY(-2px);
  border-color: rgba(255, 64, 113, 0.4);
  background: rgba(255, 64, 113, 0.08);
}

.kundli-history-avatar {
  flex: none;
  width: 38px;
  aspect-ratio: 1;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: linear-gradient(135deg, rgba(216, 170, 76, 0.35), rgba(216, 170, 76, 0.1));
  color: var(--space-gold);
  font-family: "Cormorant Garamond", "Cormorant Fallback", Georgia, serif;
  font-weight: 700;
  font-size: 15px;
}

.kundli-history-info {
  flex: 1;
  min-width: 0;
}

.kundli-history-name {
  font-size: 13.5px;
  font-weight: 700;
  color: #fff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.kundli-history-meta {
  font-size: 11.5px;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.kundli-history-arrow {
  flex: none;
  width: 15px;
  height: 15px;
  color: rgba(255, 255, 255, 0.35);
}

.kundli-history-clear {
  align-self: center;
  margin-top: 16px;
  background: none;
  border: 0;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  transition: color 180ms ease;
}

.kundli-history-clear:hover {
  color: var(--space-pink);
}

.kundli-history-note {
  margin: 16px 0 0;
  padding-top: 16px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  font-size: 12px;
  line-height: 1.6;
  color: var(--muted);
}

.kundli-history-note a {
  color: var(--space-pink);
  font-weight: 700;
}

/* ============================================================
   RELATED GUIDES — pill links to blog posts
   ============================================================ */
.related-guides {
  margin-top: 44px;
  padding-top: 36px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.related-guides-list {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 16px;
}

.related-guide-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 11px 20px;
  border-radius: 999px;
  border: 1px solid rgba(255, 64, 113, 0.22);
  background: rgba(255, 255, 255, 0.03);
  color: #fff;
  font-size: 13.5px;
  font-weight: 600;
  transition: transform 180ms ease, border-color 180ms ease, background 180ms ease;
}

.related-guide-chip svg {
  width: 13px;
  height: 13px;
  color: var(--space-pink);
  flex: none;
  transition: transform 180ms ease;
}

.related-guide-chip:hover {
  transform: translateY(-2px);
  border-color: var(--space-pink);
  background: rgba(255, 64, 113, 0.1);
}

.related-guide-chip:hover svg {
  transform: translateX(3px);
}

/* ============================================================
   ASTRO PICKER — shared shell for the date & time pickers
   ============================================================ */
.astro-picker {
  position: relative;
}

.astro-picker-trigger {
  width: 100%;
  min-height: 52px;
  display: flex;
  align-items: center;
  gap: 10px;
  border: 1px solid rgba(255, 64, 113, 0.2);
  border-radius: 8px;
  background: rgba(23, 14, 46, 0.75);
  padding: 0 16px;
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: border-color 180ms ease, box-shadow 180ms ease;
}

.astro-picker-trigger:hover {
  border-color: rgba(255, 64, 113, 0.4);
}

.astro-picker-trigger:focus-visible,
.astro-picker.open .astro-picker-trigger {
  outline: none;
  border-color: var(--space-pink);
  box-shadow: 0 0 15px rgba(255, 64, 113, 0.25);
}

.astro-picker-icon {
  flex: none;
  width: 18px;
  height: 18px;
  color: var(--space-pink);
  opacity: 0.85;
}

.astro-picker-text {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: rgba(245, 239, 250, 0.5);
}

.astro-picker-text.filled {
  color: var(--ink);
  font-weight: 600;
}

.astro-picker-panel {
  position: absolute;
  z-index: 60;
  top: calc(100% + 8px);
  left: 0;
  width: max(300px, 100%);
  background: linear-gradient(160deg, rgba(28, 17, 54, 0.98), rgba(11, 6, 27, 0.99));
  border: 1px solid rgba(255, 64, 113, 0.25);
  border-radius: 14px;
  box-shadow: 0 26px 60px rgba(0, 0, 0, 0.55);
  padding: 18px;
  backdrop-filter: blur(16px);
  opacity: 0;
  transform: translateY(-8px) scale(0.98);
  pointer-events: none;
  transition: opacity 160ms ease, transform 160ms ease;
}

.astro-picker.open .astro-picker-panel {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}

@media (prefers-reduced-motion: reduce) {
  .astro-picker-panel {
    transition: opacity 120ms ease;
    transform: none !important;
  }
}

@media (max-width: 480px) {
  .astro-picker-panel {
    left: 50%;
    transform: translate(-50%, -8px) scale(0.98);
    width: max(280px, 92vw);
  }
  .astro-picker.open .astro-picker-panel {
    transform: translate(-50%, 0);
  }
}

/* Date grid */
.astro-cal-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 14px;
}

.astro-cal-nav {
  flex: none;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.04);
  color: #fff;
  display: grid;
  place-items: center;
  cursor: pointer;
  transition: border-color 160ms ease, color 160ms ease;
}

.astro-cal-nav svg {
  width: 14px;
  height: 14px;
}

.astro-cal-nav:hover {
  border-color: var(--space-pink);
  color: var(--space-pink);
}

.astro-cal-selects {
  flex: 1;
  display: flex;
  gap: 8px;
  min-width: 0;
}

.astro-cal-selects select {
  flex: 1;
  min-width: 0;
  min-height: 34px;
  padding: 0 26px 0 10px;
  border-radius: 7px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background-color: rgba(255, 255, 255, 0.04);
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%23ff4071" stroke-width="2.6" stroke-linecap="round" stroke-linejoin="round"><path d="M6 9l6 6 6-6"/></svg>');
  background-repeat: no-repeat;
  background-position: right 8px center;
  background-size: 11px;
  appearance: none;
  -webkit-appearance: none;
  color: #fff;
  font: inherit;
  font-size: 12.5px;
  font-weight: 700;
  cursor: pointer;
}

.astro-cal-selects select option {
  background: #130c24;
  color: var(--ink);
}

.astro-cal-weekdays {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  margin-bottom: 6px;
}

.astro-cal-weekdays span {
  text-align: center;
  font-size: 10.5px;
  font-weight: 800;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.astro-cal-days {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 3px;
}

.astro-cal-day {
  aspect-ratio: 1;
  min-width: 0;
  border-radius: 8px;
  border: 0;
  background: none;
  color: #fff;
  font: inherit;
  font-size: 12.5px;
  cursor: pointer;
  display: grid;
  place-items: center;
  transition: background 150ms ease, color 150ms ease;
}

.astro-cal-day:hover {
  background: rgba(255, 64, 113, 0.16);
}

.astro-cal-day:focus-visible {
  outline: 2px solid var(--space-pink);
  outline-offset: 1px;
}

.astro-cal-day.is-today {
  border: 1px solid rgba(216, 170, 76, 0.6);
  color: var(--space-gold);
}

.astro-cal-day.is-selected {
  background: linear-gradient(135deg, var(--space-pink), var(--space-pink-hover));
  color: #fff;
  font-weight: 700;
  box-shadow: 0 8px 18px rgba(255, 64, 113, 0.35);
}

.astro-cal-day.is-outside {
  visibility: hidden;
  pointer-events: none;
}

/* Time picker */
.astro-time-preview {
  text-align: center;
  font-family: "Cormorant Garamond", "Cormorant Fallback", Georgia, serif;
  font-size: 26px;
  color: #fff;
  margin: 0 0 14px;
}

.astro-time-cols {
  display: flex;
  gap: 10px;
}

.astro-time-col {
  flex: 1;
  height: 190px;
  overflow-y: auto;
  scroll-snap-type: y proximity;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.03);
  padding: 4px;
}

.astro-time-col::-webkit-scrollbar {
  width: 5px;
}

.astro-time-col::-webkit-scrollbar-thumb {
  background: rgba(255, 64, 113, 0.35);
  border-radius: 3px;
}

.astro-time-opt {
  scroll-snap-align: start;
  text-align: center;
  padding: 9px 0;
  border-radius: 7px;
  font-size: 13.5px;
  color: var(--muted);
  cursor: pointer;
  transition: background 150ms ease, color 150ms ease;
}

.astro-time-opt:hover {
  background: rgba(255, 255, 255, 0.06);
  color: #fff;
}

.astro-time-opt.is-selected {
  background: linear-gradient(135deg, var(--space-pink), var(--space-pink-hover));
  color: #fff;
  font-weight: 700;
}

.astro-time-actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 14px;
}

.astro-time-clear-btn,
.astro-time-done-btn {
  border: 0;
  border-radius: 999px;
  font-size: 12.5px;
  font-weight: 700;
  cursor: pointer;
  font-family: inherit;
}

.astro-time-clear-btn {
  background: none;
  color: var(--muted);
  padding: 8px 4px;
}

.astro-time-clear-btn:hover {
  color: #fff;
}

.astro-time-done-btn {
  background: linear-gradient(135deg, var(--space-pink), var(--space-pink-hover));
  color: #fff;
  padding: 9px 20px;
}

.astro-time-done-btn:hover {
  background: var(--soft-gold);
  color: var(--night);
}

/* ============================================================
   KOOTA LIST — the 8 Guna Milan factors (kundli-matching.html)
   ============================================================ */
.koota-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 28px;
}

.koota-row {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 16px 20px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  transition: border-color 200ms ease, background 200ms ease;
}

.koota-row:hover {
  border-color: rgba(216, 170, 76, 0.35);
  background: rgba(216, 170, 76, 0.05);
}

.koota-points {
  flex: none;
  width: 44px;
  aspect-ratio: 1;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: rgba(216, 170, 76, 0.14);
  border: 1px solid rgba(216, 170, 76, 0.35);
  color: var(--space-gold);
  font-weight: 800;
  font-size: 15px;
  font-family: "Cormorant Garamond", "Cormorant Fallback", Georgia, serif;
}

.koota-body {
  flex: 1;
  min-width: 0;
}

.koota-name {
  display: flex;
  align-items: baseline;
  gap: 8px;
  flex-wrap: wrap;
  font-weight: 700;
  color: #fff;
  font-size: 14.5px;
}

.koota-name span {
  font-weight: 500;
  font-size: 12.5px;
  color: var(--muted);
}

.koota-meaning {
  margin: 3px 0 0;
  font-size: 13px;
  line-height: 1.5;
  color: var(--muted);
}

@media (max-width: 620px) {
  .koota-row {
    gap: 14px;
    padding: 14px 16px;
  }
  .koota-points {
    width: 38px;
    font-size: 13px;
  }
}

/* ============================================================
   COMPATIBILITY METER — score-band signature element
   (kundli-matching.html)
   ============================================================ */
.compat-meter {
  margin-top: 32px;
}

.compat-meter-track {
  display: flex;
  height: 14px;
  border-radius: 999px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.12);
}

.compat-meter-seg {
  flex: 1;
}

.compat-meter-seg.band-weak { background: linear-gradient(90deg, #4a1f2b, #6e2536); }
.compat-meter-seg.band-fair { background: linear-gradient(90deg, #6e2536, #b5793a); }
.compat-meter-seg.band-good { background: linear-gradient(90deg, #b5793a, var(--soft-gold)); }
.compat-meter-seg.band-excellent { background: linear-gradient(90deg, var(--soft-gold), #34d399); }

.compat-meter-cards {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin-top: 18px;
}

.compat-meter-card {
  padding: 14px 12px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-top: 3px solid transparent;
  text-align: center;
}

.compat-meter-card.band-weak { border-top-color: #6e2536; }
.compat-meter-card.band-fair { border-top-color: #b5793a; }
.compat-meter-card.band-good { border-top-color: var(--soft-gold); }
.compat-meter-card.band-excellent { border-top-color: #34d399; }

.compat-meter-range {
  font-family: "Cormorant Garamond", "Cormorant Fallback", Georgia, serif;
  font-size: 22px;
  font-weight: 700;
  color: #fff;
}

.compat-meter-label {
  margin: 2px 0 0;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--muted);
}

@media (max-width: 620px) {
  .compat-meter-cards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Feature cards styling */
.features-container {
  margin-bottom: 72px;
}

.features-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
}

.feature-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 24px 18px;
  background: rgba(23, 14, 46, 0.55);
  border: 1px solid rgba(255, 64, 113, 0.15);
  border-radius: 12px;
  text-align: center;
  cursor: pointer;
  transition: transform 220ms ease, border-color 220ms ease, box-shadow 220ms ease, background 220ms ease;
  backdrop-filter: blur(10px);
}

.feature-box:hover {
  transform: translateY(-5px);
  border-color: rgba(255, 64, 113, 0.38);
  box-shadow: 0 15px 30px rgba(255, 64, 113, 0.18);
  background: rgba(23, 14, 46, 0.75);
}

.feature-icon-wrap {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  border: 1.5px solid var(--space-gold);
  display: grid;
  place-items: center;
  color: var(--space-gold);
  background: radial-gradient(circle, rgba(216, 170, 76, 0.15) 0%, transparent 70%);
  transition: transform 220ms ease;
}

.feature-box:hover .feature-icon-wrap {
  transform: scale(1.08);
}

.feature-icon-wrap.ic-pink {
  border-color: var(--space-pink);
  color: var(--space-pink);
  background: radial-gradient(circle, rgba(255, 64, 113, 0.16) 0%, transparent 70%);
}

.feature-icon-wrap.ic-blue {
  border-color: var(--space-blue);
  color: var(--space-blue);
  background: radial-gradient(circle, rgba(66, 147, 245, 0.16) 0%, transparent 70%);
}

.feature-icon-wrap.ic-violet {
  border-color: var(--space-violet);
  color: var(--space-violet);
  background: radial-gradient(circle, rgba(155, 123, 255, 0.16) 0%, transparent 70%);
}

.feature-icon-wrap svg {
  width: 22px;
  height: 22px;
  stroke: currentColor;
  stroke-width: 1.8;
  display: block;
}

.feature-box h3 {
  font-family: "Cormorant Garamond", "Cormorant Fallback", Georgia, serif;
  font-size: 20px;
  color: #fff;
  margin: 0;
}

/* FAQ & Copy Section */
.kundli-details-faq-section {
  padding-bottom: 100px;
}

.details-faq-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 58px;
}

.kundli-details-content h2,
.faq-wrap h2 {
  font-family: "Cormorant Garamond", "Cormorant Fallback", Georgia, serif;
  font-size: 32px;
  color: #fff;
  margin: 0 0 24px 0;
}

.kundli-details-content p {
  font-size: 15px;
  line-height: 1.75;
  color: rgba(245, 239, 250, 0.85);
  margin-bottom: 24px;
}

.kundli-details-content p:last-child {
  margin-bottom: 0;
}

.faq-accordion {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.accordion-item {
  border: 1px solid rgba(255, 64, 113, 0.15);
  border-radius: 8px;
  background: rgba(23, 14, 46, 0.45);
  overflow: hidden;
  transition: border-color 220ms ease, background 220ms ease;
}

.accordion-item:hover {
  border-color: rgba(255, 64, 113, 0.3);
  background: rgba(23, 14, 46, 0.6);
}

.accordion-header {
  width: 100%;
  padding: 18px 24px;
  background: none;
  border: 0;
  color: #fff;
  font-family: "Inter", sans-serif;
  font-size: 15px;
  font-weight: 700;
  text-align: left;
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
}

.accordion-header span {
  padding-right: 15px;
  line-height: 1.4;
}

.accordion-icon {
  flex: 0 0 16px;
  height: 16px;
  transition: transform 260ms ease;
  color: var(--space-pink);
}

.accordion-item.active {
  border-color: rgba(255, 64, 113, 0.35);
  background: rgba(23, 14, 46, 0.75);
}

.accordion-item.active .accordion-icon {
  transform: rotate(180deg);
}

.accordion-panel {
  max-height: 0;
  overflow: hidden;
  transition: max-height 260ms cubic-bezier(0.4, 0, 0.2, 1);
}

.accordion-panel-content {
  padding: 0 24px 22px 24px;
  font-size: 14.5px;
  line-height: 1.7;
  color: rgba(245, 239, 250, 0.78);
}

/* Toast Notification for simulated submit */
.kundli-toast {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%) translateY(100px);
  background: linear-gradient(135deg, #ff6f00, var(--space-pink));
  color: #fff;
  padding: 14px 28px;
  border-radius: 999px;
  box-shadow: 0 12px 30px rgba(255, 64, 113, 0.35);
  z-index: 99;
  font-weight: 700;
  font-size: 14.5px;
  opacity: 0;
  transition: transform 300ms cubic-bezier(0.175, 0.885, 0.32, 1.275), opacity 300ms ease;
  pointer-events: none;
}

.kundli-toast.show {
  transform: translateX(-50%) translateY(0);
  opacity: 1;
}

/* Responsive Styles for Kundli Page */
@media (max-width: 920px) {
  .features-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 14px;
  }

  .details-faq-grid {
    grid-template-columns: 1fr;
    gap: 48px;
  }
  
  .kundli-form {
    padding: 24px 20px;
  }
}

/* Autofill overrides to preserve dark theme */
input:-webkit-autofill,
input:-webkit-autofill:hover, 
input:-webkit-autofill:focus, 
input:-webkit-autofill:active {
  -webkit-box-shadow: 0 0 0 1000px #130c24 inset !important;
  -webkit-text-fill-color: var(--ink) !important;
  transition: background-color 5000s ease-in-out 0s;
}


/* ============================================================
   NAVBAR: Free Consultation hover dropdown (Call / Chat)
   ============================================================ */
.consult-menu {
  position: relative;
}

.consult-dropdown {
  position: absolute;
  top: calc(100% + 12px);
  right: 0;
  min-width: 236px;
  padding: 8px;
  background: rgba(15, 9, 30, 0.98);
  border: 1px solid rgba(255, 64, 113, 0.28);
  border-radius: 14px;
  box-shadow: 0 24px 52px rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(18px);
  display: flex;
  flex-direction: column;
  gap: 4px;
  opacity: 0;
  /* pointer-events, not visibility: this also has to open from a JS .open class toggle
     (mobile tap), not just :hover/:focus-within — no transition on show/hide (see below)
     since it needs to apply the same way from both. */
  pointer-events: none;
  transform: translateY(8px);
  z-index: 60;
}

.consult-dropdown::before {
  content: "";
  position: absolute;
  top: -12px;
  left: 0;
  right: 0;
  height: 12px;
}

.consult-menu:hover .consult-dropdown,
.consult-menu:focus-within .consult-dropdown,
.consult-menu.open .consult-dropdown {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}

.consult-dropdown a {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 11px 14px;
  border-radius: 10px;
  color: var(--ink);
  font-size: 13.5px;
  font-weight: 600;
  transition: background 160ms ease, color 160ms ease;
}

.consult-dropdown a svg {
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
  color: var(--space-pink);
}

.consult-dropdown a.consult-call svg {
  color: var(--space-blue);
}

.consult-dropdown a.consult-chat svg {
  color: var(--wa-green);
}

.consult-dropdown a:hover {
  background: rgba(255, 64, 113, 0.16);
  color: #fff;
}

@media (max-width: 920px) {
  .menu-toggle {
    margin-left: 4px;
  }
}

/* ============================================================
   VIDEO TESTIMONIALS — vertical phone-shaped reels carousel
   ============================================================ */
.video-carousel {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin-top: 18px;
  user-select: none;
}

.vc-viewport {
  position: relative;
  flex: 1 1 auto;
  overflow: hidden;
  padding: 26px 0 8px;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}

.vc-track {
  position: relative;
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: clamp(14px, 2.6vw, 30px);
  transition: transform 520ms cubic-bezier(0.4, 0, 0.2, 1);
  cursor: grab;
  touch-action: pan-y;
}

.vc-track:active {
  cursor: grabbing;
}

.vc-card {
  flex: 0 0 auto;
  width: clamp(216px, 25vw, 286px);
  transform: scale(0.82);
  /* Dimmed via filter, not opacity — opacity on the whole card let the starfield
     behind the section show straight through the phone frame. */
  filter: saturate(0.8) brightness(0.5);
  transition: transform 520ms cubic-bezier(0.4, 0, 0.2, 1);
}

.vc-card.is-active {
  transform: scale(1);
  filter: none;
}

.vc-phone {
  position: relative;
  width: 100%;
  aspect-ratio: 9 / 19;
  border-radius: 30px;
  border: 7px solid #100c1c;
  background: #000;
  overflow: hidden;
  box-shadow: 0 26px 60px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(255, 64, 113, 0.18);
}

.vc-card.is-active .vc-phone {
  box-shadow: 0 32px 70px rgba(255, 64, 113, 0.32), 0 0 0 1px rgba(255, 64, 113, 0.4);
}

.vc-phone::before {
  content: "";
  position: absolute;
  top: 9px;
  left: 50%;
  transform: translateX(-50%);
  width: 78px;
  height: 6px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.35);
  z-index: 4;
}
.vc-phone .vc-media {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  background: linear-gradient(160deg, #2a1640, #0b0618);
}

.vc-caption {
  position: absolute;
  inset: auto 0 0 0;
  z-index: 3;
  padding: 46px 18px 18px;
  background: linear-gradient(0deg, rgba(8, 4, 21, 0.92) 0%, rgba(8, 4, 21, 0.45) 55%, transparent 100%);
}

.vc-caption .vc-quote {
  font-family: "Cormorant Garamond", "Cormorant Fallback", Georgia, serif;
  font-size: 17px;
  line-height: 1.3;
  color: #fff;
  margin: 0 0 10px;
}

.vc-caption .vc-name {
  display: block;
  font-size: 13.5px;
  font-weight: 800;
  color: #fff;
}

.vc-caption .vc-role {
  display: block;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--space-pink);
  margin-top: 2px;
}

.vc-play {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 3;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: rgba(255, 64, 113, 0.85);
  color: #fff;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
  opacity: 0;
  transition: opacity 220ms ease;
  pointer-events: none;
}

.vc-card:not(.is-active) .vc-play {
  opacity: 0.92;
}

.vc-play svg {
  width: 22px;
  height: 22px;
  margin-left: 3px;
}

.vc-arrow {
  flex: 0 0 auto;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 1px solid rgba(255, 64, 113, 0.28);
  background: rgba(255, 255, 255, 0.06);
  color: #fff;
  font-size: 26px;
  line-height: 1;
  cursor: pointer;
  z-index: 5;
  transition: background 180ms ease, transform 180ms ease, border-color 180ms ease, color 180ms ease;
}

.vc-arrow:hover {
  background: rgba(255, 64, 113, 0.2);
  color: var(--space-pink);
  border-color: rgba(255, 64, 113, 0.5);
  transform: translateY(-2px);
}

.vc-dots {
  position: absolute;
  bottom: -34px;
  left: 0;
  right: 0;
  display: flex;
  justify-content: center;
  gap: 8px;
}

.vc-dot {
  width: 8px;
  height: 8px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.25);
  cursor: pointer;
  transition: background 200ms ease, transform 200ms ease, width 200ms ease;
}

.vc-dot.is-active {
  width: 22px;
  border-radius: 999px;
  background: var(--space-pink);
}

.video-testimonials-section {
  padding-bottom: 110px;
}

@media (max-width: 620px) {
  .vc-arrow {
    display: none;
  }
  .vc-card {
    width: clamp(220px, 70vw, 270px);
  }
  .vc-viewport {
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
    mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
  }
}

/* ============================================================
   INDIVIDUAL SERVICE PAGE
   ============================================================ */
.service-detail-open {
  position: relative;
  padding: 56px 0 26px;
  overflow: hidden;
}

.service-detail-open::before {
  content: "";
  position: absolute;
  top: -60px;
  left: 50%;
  transform: translateX(-50%);
  width: min(820px, 96%);
  height: 380px;
  background: radial-gradient(closest-side, rgba(255, 64, 113, 0.14), transparent);
  pointer-events: none;
}

.service-detail-head {
  position: relative;
  text-align: center;
  max-width: 800px;
  margin: 0 auto 46px;
}

/* This hero's own bottom padding is already trimmed to 26px, but the
   filter section right after it is a plain .section at the default
   92px top padding — stacked, that read as a ~120px gap between the
   intro paragraph and its own filter bar. Bring them close together. */
.service-detail-open + #astrologers {
  padding-top: 22px;
}

.service-detail-head h1 {
  margin-top: 14px;
  font-size: clamp(38px, 4.6vw, 62px);
}

.service-detail-head p {
  max-width: 640px;
  margin: 16px auto 0;
}

.sd-hero-stats {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin-top: 28px;
}

.sd-hero-stats .sd-stat {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 11px 20px;
  border: 1px solid rgba(255, 64, 113, 0.28);
  border-radius: 14px;
  background: rgba(23, 14, 46, 0.55);
  backdrop-filter: blur(6px);
}

.sd-hero-stats .sd-stat-label {
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}

.sd-hero-stats .sd-stat strong {
  font-size: 17px;
  color: #fff;
  font-weight: 800;
}

.service-detail-grid {
  display: grid;
  grid-template-columns: 1.35fr 0.65fr;
  gap: 40px;
  align-items: start;
}

.service-detail-main .lead {
  font-size: 17px;
  color: rgba(245, 239, 250, 0.9);
}

/* No sidebar anymore (page is informational + FAQ + action cards, not a
   pricing/booking layout) — cap the width so paragraphs stay a comfortable
   reading measure instead of stretching the full container. */
.service-detail-main-full {
  max-width: 760px;
  margin: 0 auto;
}

.service-detail-aside {
  position: sticky;
  top: 100px;
  display: grid;
  gap: 18px;
}

.service-book-card {
  background: linear-gradient(160deg, rgba(255, 64, 113, 0.12), rgba(23, 14, 46, 0.85));
  border: 1px solid rgba(255, 64, 113, 0.3);
}

.service-book-card h3 {
  margin-bottom: 6px;
}

.service-book-card .price-tag {
  font-size: 30px;
  font-weight: 800;
  font-family: "Inter", sans-serif;
  color: #fff;
  margin: 6px 0 4px;
}

.service-book-card .price-tag span {
  font-size: 14px;
  color: var(--muted);
  font-weight: 600;
}

.service-book-card .button {
  width: 100%;
  margin-top: 14px;
}

.service-book-card .button.secondary {
  margin-top: 10px;
}

.service-meta-list {
  display: grid;
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.service-meta-list li {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  font-size: 13.5px;
  color: var(--muted);
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}

.service-meta-list li strong {
  color: #fff;
  font-weight: 700;
}

@media (max-width: 920px) {
  .service-detail-grid {
    grid-template-columns: 1fr;
  }
  .service-detail-aside {
    position: static;
  }
}

/* ============================================================
   ASTROLOGER DIRECTORY & PROFILE
   ============================================================ */
.astro-filter-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: -16px -4px 2px;
  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
  padding: 16px 4px 36px;
}

.astro-filter-bar::-webkit-scrollbar {
  display: none;
}

.astro-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex: 0 0 auto;
  min-height: 42px;
  padding: 0 18px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(23, 14, 46, 0.55);
  color: var(--muted);
  font-size: 13.5px;
  font-weight: 700;
  white-space: nowrap;
  cursor: pointer;
  transition: transform 180ms ease, border-color 180ms ease, background 180ms ease, color 180ms ease;
}

.astro-chip svg {
  width: 16px;
  height: 16px;
  flex: 0 0 16px;
}

.astro-chip:hover {
  border-color: rgba(255, 64, 113, 0.35);
  color: #fff;
}

.astro-chip.active {
  background: rgba(255, 64, 113, 0.16);
  border-color: var(--space-pink);
  color: #fff;
  box-shadow: 0 10px 24px rgba(255, 64, 113, 0.22);
}

.astro-empty {
  text-align: center;
  margin: 0 0 34px;
}

.astrologer-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 22px;
  margin-top: 8px;
}

.astrologer-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 30px 26px;
  border: 1px solid rgba(255, 64, 113, 0.15);
  border-radius: 8px;
  background: rgba(23, 14, 46, 0.55);
  box-shadow: 0 18px 46px rgba(0, 0, 0, 0.35);
  backdrop-filter: blur(12px);
  cursor: pointer;
  transition: transform 220ms ease, box-shadow 220ms ease, border-color 220ms ease;
}

.astrologer-card:hover,
.astrologer-card:focus-visible {
  transform: translateY(-8px);
  box-shadow: 0 20px 50px rgba(255, 64, 113, 0.25);
  border-color: rgba(255, 64, 113, 0.4);
}

.astrologer-card:focus-visible {
  outline: 2px solid var(--space-pink);
  outline-offset: 3px;
}

.astrologer-card h3 {
  transition: color 200ms ease;
}

.astrologer-card:hover h3,
.astrologer-card:focus-visible h3 {
  color: var(--space-pink);
}

.astro-card-avatar {
  position: relative;
  width: 78px;
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  margin-bottom: 18px;
  border-radius: 50%;
  font-family: "Cormorant Garamond", "Cormorant Fallback", Georgia, serif;
  font-size: 28px;
  font-weight: 700;
  color: #fff;
}.astro-verified {
  display: inline-block;
  width: 19px;
  height: 19px;
  vertical-align: middle;
  margin-left: 7px;
  margin-top: -3px;
  color: #22c55e;
  flex: 0 0 auto;
}

.astro-verified svg {
  width: 100%;
  height: 100%;
  display: block;
}

.astrologer-card h3 {
  font-size: 22px;
  color: #fff;
}

.astro-specialty {
  color: var(--space-pink);
  font-size: 13px;
  font-weight: 700;
  margin-top: 6px;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

.astro-meta {
  list-style: none;
  margin: 12px 0 0;
  padding: 0;
  display: grid;
  gap: 4px;
  font-size: 13.5px;
  color: var(--muted);
}

.astro-rating {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  /* auto, not a fixed value: .astro-card-body/.astro-card-side collapse via
     display:contents above, so .astro-rating and .astro-consult-btn are the
     card's own last two flex children. Cards in the same grid row stretch to
     equal height, but content above (specialty text wrapping to 1 vs 2
     lines) varies — auto soaks up whatever's left so the rating+button pair
     always lands flush at the bottom, aligned across every card in the row,
     instead of trailing wherever the text above happens to end. */
  margin-top: auto;
  padding-top: 14px;
  font-size: 13.5px;
  color: var(--muted);
}

.astro-stars {
  color: var(--space-gold);
  letter-spacing: 1px;
}

.astro-consult-btn {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  width: 100%;
  min-height: 48px;
  margin-top: 22px;
  padding: 0 20px;
  border-radius: 999px;
  /* Matches .button/.book-now's gradient for a consistent look site-wide. */
  background: linear-gradient(135deg, var(--space-pink), var(--space-pink-hover));
  color: #fff;
  font-weight: 700;
  font-size: 14.5px;
  box-shadow: 0 14px 32px rgba(255, 64, 113, 0.25);
  transition: transform 200ms ease, box-shadow 200ms ease, background 200ms ease;
}

.astro-consult-btn:hover {
  transform: translateY(-3px);
  background: #e8004d;
  box-shadow: 0 18px 40px rgba(255, 64, 113, 0.35);
}

/* Page-specific primary action — chat-with-astrologer.html / talk-to-astrologer.html
   set data-cta-mode on #astrologer-grid so astrologers-list.js can add these. */
.astro-consult-btn.cta-call {
  background: #2f6fbf;
  box-shadow: 0 14px 32px rgba(0, 0, 0, 0.3);
}

.astro-consult-btn.cta-call:hover {
  background: #275c9c;
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.4);
}

.astro-price {
  margin-top: 8px;
  font-size: 16px;
  font-weight: 800;
  color: var(--soft-gold);
}

.astro-card-actions {
  display: flex;
  gap: 8px;
  width: 100%;
  margin-top: 16px;
}

.astro-action-btn {
  position: relative;
  z-index: 1;
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 42px;
  padding: 0 10px;
  border-radius: 999px;
  color: #fff;
  font-weight: 700;
  font-size: 13px;
  box-shadow: 0 12px 26px rgba(0, 0, 0, 0.28);
  transition: transform 200ms ease, box-shadow 200ms ease, background 200ms ease;
}

.astro-action-btn svg {
  width: 16px;
  height: 16px;
  flex: 0 0 auto;
}

.astro-action-call {
  background: #2f6fbf;
}

.astro-action-call:hover {
  background: #275c9c;
  transform: translateY(-2px);
}

.astro-action-msg {
  background: linear-gradient(135deg, var(--space-pink), var(--space-pink-hover));
  color: #fff;
}

.astro-action-msg:hover {
  background: #e8004d;
  transform: translateY(-2px);
}

/* These wrappers exist purely to group content for the compact mobile row
   layout below — on larger screens they're invisible to layout entirely, so
   the card's centered-stack look above is untouched. */
.astro-card-body,
.astro-card-side {
  display: contents;
}

@media (max-width: 920px) {
  .astrologer-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 620px) {
  .astrologer-grid {
    grid-template-columns: 1fr;
  }

  /* Compact horizontal row instead of a tall centered stack — avatar, then
     name/specialty/meta, then rating+CTA, all in one line-height-driven row
     rather than a card that's mostly empty vertical space. */
  .astrologer-card {
    flex-direction: row;
    align-items: center;
    text-align: left;
    padding: 14px 16px;
    gap: 14px;
    /* Without this, the card (a flex container that's also a grid item)
       sizes to its content's unwrapped min-content width by default and
       blows out past the grid track — the classic grid/flexbox overflow
       trap. This is what actually let the row overflow the viewport,
       not the children's own min-width settings. */
    min-width: 0;
  }

  .astro-card-avatar {
    width: 52px;
    height: 52px;
    margin-bottom: 0;
    font-size: 17px;
    flex: 0 0 auto;
  }

  .astro-card-body {
    display: block;
    flex: 1 1 auto;
    min-width: 0;
  }

  .astrologer-card h3 {
    /* !important needed: a global `h3 { font-size: clamp(...) !important }`
       mobile rule elsewhere would otherwise win regardless of specificity. */
    font-size: 15.5px !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .astro-specialty {
    margin-top: 2px;
    font-size: 10.5px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .astro-meta {
    margin-top: 4px;
    gap: 1px;
    font-size: 11.5px;
  }

  .astro-meta li {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .astro-card-side {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    justify-content: center;
    gap: 6px;
    flex: 0 0 auto;
    width: 84px;
  }

  /* The 5-character star string plus rating plus order count never fits an
     84px column on one line — drop the stars, let the rest wrap right-
     aligned instead of forcing a single nowrap line that blew the card
     width out past the viewport. */
  .astro-rating {
    margin-top: 0;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 2px;
    font-size: 10.5px;
    line-height: 1.3;
    text-align: right;
  }

  .astro-stars {
    display: none;
  }

  .astro-consult-btn {
    width: 100%;
    min-height: 30px;
    margin-top: 0;
    padding: 0 6px;
    font-size: 11px;
    white-space: nowrap;
  }

  .astro-price {
    margin-top: 0;
    font-size: 13px;
  }

  .astro-card-actions {
    justify-content: flex-end;
    margin-top: 4px;
    gap: 6px;
  }

  /* Icon-only at this width — "Call"/"Message" plus an icon doesn't fit two
     buttons side by side in an 84px column, so the label is dropped and the
     circle carries the icon alone (aria-label still names the action). */
  .astro-action-btn {
    flex: 0 0 auto;
    width: 30px;
    height: 30px;
    min-height: 0;
    padding: 0;
    border-radius: 50%;
  }

  .astro-action-btn span {
    display: none;
  }
}

/* Homepage's featured strip shows 4 picks (vs. the full directory's 3-per-row), so it
   needs its own column count — mirrors .astrologer-grid's own breakpoints (920/620)
   so the two never disagree at the same width, just at a different column count. */
.home-astrologers-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

@media (max-width: 920px) {
  .home-astrologers-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 620px) {
  .home-astrologers-grid {
    grid-template-columns: 1fr;
  }
}

.astro-view-all-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  flex: 0 0 auto;
  min-height: 48px;
  padding: 0 12px 0 24px;
  border-radius: 999px;
  background: rgba(255, 64, 113, 0.1);
  border: 1.5px solid var(--space-pink);
  color: var(--space-pink);
  font-weight: 800;
  font-size: 14.5px;
  white-space: nowrap;
  overflow: hidden;
  transition: transform 220ms ease, box-shadow 220ms ease, border-color 220ms ease, color 220ms ease;
}

.astro-view-all-btn svg {
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  padding: 8px;
  border-radius: 50%;
  background: rgba(255, 64, 113, 0.16);
  transition: transform 220ms cubic-bezier(0.22, 1, 0.36, 1), background 220ms ease, color 220ms ease;
}

.astro-view-all-btn::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, var(--space-pink), var(--space-pink-hover));
  opacity: 0;
  transition: opacity 220ms ease;
  z-index: -1;
}

.astro-view-all-btn:hover,
.astro-view-all-btn:focus-visible {
  color: #fff;
  border-color: transparent;
  transform: translateY(-3px);
  box-shadow: 0 16px 36px rgba(255, 64, 113, 0.35);
}

.astro-view-all-btn:hover::before,
.astro-view-all-btn:focus-visible::before {
  opacity: 1;
}

.astro-view-all-btn:hover svg,
.astro-view-all-btn:focus-visible svg {
  background: rgba(255, 255, 255, 0.22);
  transform: translateX(3px);
}

@media (max-width: 620px) {
  .astro-view-all-btn {
    width: 100%;
    justify-content: space-between;
  }
}

.ad-avatar {
  position: relative;
  width: 96px;
  aspect-ratio: 1;
  margin: 6px auto 0;
  display: grid;
  place-items: center;
  border-radius: 50%;
  font-family: "Cormorant Garamond", "Cormorant Fallback", Georgia, serif;
  font-size: 34px;
  font-weight: 700;
  color: #fff;
}

.ad-avatar-pink { background: radial-gradient(circle at 35% 30%, rgba(255, 64, 113, 0.55), rgba(23, 14, 46, 0.92) 72%); border: 1px solid rgba(255, 64, 113, 0.4); box-shadow: 0 0 50px rgba(255, 64, 113, 0.3); }.ad-name-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 14px;
}

.ad-name-row h1 {
  margin-top: 0;
}

.ad-verified {
  width: 34px;
  height: 34px;
  margin: 0;
}

/* ============================================================
   PANCHANG PAGE
   ============================================================ */
/* flex + wrap + center, not grid auto-fill — 6 tiles in 4 columns
   otherwise leaves the 2nd row's pair stranded on the left with empty
   tracks beside them (same fix as .why-choose-grid / .calc-grid). */
.panchang-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 18px;
  margin-top: 34px;
}

.panchang-tile {
  flex: 0 1 calc((100% - 54px) / 4);
  min-width: 220px;
  padding: 22px 24px;
  border-radius: 12px;
  border: 1px solid rgba(255, 64, 113, 0.15);
  background: rgba(23, 14, 46, 0.55);
  backdrop-filter: blur(10px);
}

@media (max-width: 920px) {
  .panchang-tile {
    flex: 0 1 calc((100% - 18px) / 2);
  }
}

@media (max-width: 620px) {
  .panchang-tile {
    flex: 0 1 100%;
  }
}

.panchang-tile .pt-label {
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--space-pink);
}

.panchang-tile .pt-value {
  margin-top: 8px;
  font-family: "Cormorant Garamond", "Cormorant Fallback", Georgia, serif;
  font-size: 26px;
  color: #fff;
}

.panchang-tile .pt-sub {
  margin-top: 4px;
  font-size: 13px;
  color: var(--muted);
}

#panchang-city {
  min-height: 42px;
  padding: 8px 36px 8px 16px;
  border: 1px solid rgba(216, 169, 53, 0.35);
  border-radius: 999px;
  background: rgba(23, 14, 46, 0.85) url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%23d8aa4c" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><path d="M6 9l6 6 6-6"/></svg>') no-repeat right 12px center / 14px;
  appearance: none;
  -webkit-appearance: none;
  color: #fff;
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: border-color 180ms ease, box-shadow 180ms ease;
}

#panchang-city:hover {
  border-color: rgba(216, 169, 53, 0.6);
}

#panchang-city:focus {
  outline: none;
  border-color: var(--space-gold);
  box-shadow: 0 0 14px rgba(216, 169, 53, 0.3);
}

#panchang-city option {
  background: #130c24;
  color: #fff;
}

.panchang-date-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 24px 28px;
  border-radius: 14px;
  border: 1px solid rgba(216, 169, 53, 0.3);
  background: linear-gradient(135deg, rgba(216, 169, 53, 0.08), rgba(23, 14, 46, 0.8));
}

.panchang-date-bar .pdb-day {
  font-family: "Cormorant Garamond", "Cormorant Fallback", Georgia, serif;
  font-size: clamp(30px, 4vw, 44px);
  color: #fff;
}

/* flex + wrap + center, not grid auto-fill — the live muhurat count
   varies, and a leftover last row otherwise sits stranded on the left
   with empty tracks beside it (same fix as .why-choose-grid). */
.panchang-muhurat {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 18px;
  margin-top: 30px;
}

.muhurat-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 14px;
  flex: 0 1 calc((100% - 54px) / 4);
  min-width: 260px;
  padding: 16px 20px;
  border-radius: 10px;
  border: 1px solid rgba(255, 64, 113, 0.14);
  background: rgba(23, 14, 46, 0.5);
}

@media (max-width: 920px) {
  .muhurat-row {
    flex-basis: calc((100% - 18px) / 2);
  }
}

@media (max-width: 620px) {
  .muhurat-row {
    flex-basis: 100%;
  }
}

.muhurat-row .mr-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex: 0 0 10px;
}

.mr-dot.good { background: #34d399; box-shadow: 0 0 12px rgba(52, 211, 153, 0.6); }
.mr-dot.bad { background: #ff5d73; box-shadow: 0 0 12px rgba(255, 93, 115, 0.6); }

.muhurat-row .mr-name { font-weight: 700; color: #fff; font-size: 14.5px; min-width: 0; }
.muhurat-row .mr-time { margin-left: auto; color: var(--muted); font-size: 13.5px; white-space: nowrap; }

/* ============================================================
   NIRVA ASTRO BLACK (premium membership) PAGE
   ============================================================ */
body.black-page .site-shell {
  background:
    radial-gradient(circle at 20% 12%, rgba(216, 169, 53, 0.12), transparent 38rem),
    radial-gradient(circle at 82% 84%, rgba(255, 64, 113, 0.12), transparent 42rem),
    linear-gradient(180deg, #050309 0%, #0c0a12 50%, #050309 100%);
}.black-badge {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 8px 18px;
  border-radius: 999px;
  border: 1px solid var(--soft-gold);
  background: linear-gradient(135deg, #15131c, #000);
  color: var(--soft-gold);
  font-size: 12.5px;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.black-badge svg { width: 15px; height: 15px; }

.black-gold-text {
  background: linear-gradient(135deg, #f5d98a, #d8a935 55%, #b5832a);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.black-perks {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 22px;
  margin-top: 12px;
}

.black-perk {
  padding: 28px;
  border-radius: 12px;
  border: 1px solid rgba(216, 169, 53, 0.22);
  background: rgba(12, 10, 18, 0.7);
  transition: transform 220ms ease, border-color 220ms ease, box-shadow 220ms ease;
}

.black-perk:hover {
  transform: translateY(-6px);
  border-color: rgba(216, 169, 53, 0.55);
  box-shadow: 0 22px 50px rgba(216, 169, 53, 0.16);
}

.black-perk .icon {
  background: rgba(216, 169, 53, 0.14);
  color: var(--soft-gold);
}

.black-plans {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 26px;
  margin-top: 40px;
}

.black-plan {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 34px 30px;
  border-radius: 16px;
  border: 1px solid rgba(216, 169, 53, 0.22);
  background: linear-gradient(180deg, rgba(20, 17, 28, 0.92), rgba(8, 6, 14, 0.95));
}

.black-plan.featured {
  border-color: var(--soft-gold);
  box-shadow: 0 26px 60px rgba(216, 169, 53, 0.18);
  transform: translateY(-10px);
}

.black-plan .plan-tier {
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--soft-gold);
}

.black-plan .plan-price {
  margin: 16px 0 6px;
  font-size: 44px;
  font-weight: 800;
  font-family: "Inter", sans-serif;
  color: #fff;
}

.black-plan .plan-price span {
  font-size: 15px;
  font-weight: 600;
  color: var(--muted);
}

.black-plan .pricing-features li::before {
  content: "✦";
  color: var(--soft-gold);
}

.black-plan .button {
  margin-top: auto;
  background: linear-gradient(135deg, #f5d98a, #d8a935);
  color: #1a1408;
  box-shadow: 0 14px 32px rgba(216, 169, 53, 0.28);
}

.black-plan .button:hover {
  background: linear-gradient(135deg, #fff, #f5d98a);
  color: #1a1408;
}

.black-plan-badge {
  position: absolute;
  top: -14px;
  left: 50%;
  transform: translateX(-50%);
  background: linear-gradient(135deg, #f5d98a, #d8a935);
  color: #1a1408;
  padding: 4px 16px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

@media (max-width: 920px) {
  .black-perks,
  .black-plans {
    grid-template-columns: 1fr;
  }
  .black-plan.featured {
    transform: none;
  }
}


/* ============================================================
   NAV DROPDOWN (Calculators)
   ============================================================ */
.nav-dropdown {
  position: relative;
  display: inline-flex;
}

.nav-dropdown-toggle {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 8px 12px;
  border-radius: 999px;
  color: rgba(245, 239, 250, 0.85);
  font-size: 13.5px;
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
  transition: color 180ms ease, background 180ms ease, transform 180ms ease;
}

.nav-dropdown-toggle:hover,
.nav-dropdown-toggle.active {
  color: #fff;
  background: rgba(255, 64, 113, 0.15);
  transform: translateY(-1px);
}

.nav-caret {
  width: 12px;
  height: 12px;
  transition: transform 200ms ease;
}

.nav-dropdown:hover .nav-caret {
  transform: rotate(180deg);
}

.nav-dropdown-menu {
  position: absolute;
  top: calc(100% + 12px);
  /* Anchor to the toggle and open rightward so it can never fly off to the left. */
  left: 0;
  transform: translateY(8px);
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 2px;
  width: 460px;
  max-width: min(460px, calc(100vw - 32px));
  padding: 10px;
  background: rgba(15, 9, 30, 0.98);
  border: 1px solid rgba(255, 64, 113, 0.25);
  border-radius: 16px;
  box-shadow: 0 26px 54px rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(18px);
  opacity: 0;
  visibility: hidden;
  transition: opacity 180ms ease, transform 180ms ease, visibility 180ms ease;
  z-index: 60;
}

.nav-dropdown-menu::before {
  content: "";
  position: absolute;
  top: -12px;
  left: 0;
  right: 0;
  height: 12px;
}

.nav-dropdown:hover .nav-dropdown-menu,
.nav-dropdown:focus-within .nav-dropdown-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.nav-dropdown-menu a {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  border-radius: 9px;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
  white-space: nowrap;
  transition: background 150ms ease, color 150ms ease;
}

.nav-dropdown-menu a::before {
  content: "✦";
  color: var(--space-pink);
  font-size: 10px;
}

.nav-dropdown-menu a:hover {
  background: rgba(255, 64, 113, 0.16);
  color: #fff;
}

/* Horoscope dropdown — each period gets its own icon + colour instead of the
   shared generic bullet, so Today/Tomorrow/Weekly/Monthly/Yearly read apart at a glance. */
.horo-nav-menu a::before {
  content: none;
}

.horo-nav-icon {
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  flex: 0 0 24px;
  border-radius: 50%;
}

.horo-nav-icon svg {
  width: 13px;
  height: 13px;
}

.horo-nav-icon-today { background: rgba(216, 170, 76, 0.18); color: var(--soft-gold); }
.horo-nav-icon-tomorrow { background: rgba(66, 147, 245, 0.18); color: var(--space-blue); }
.horo-nav-icon-weekly { background: rgba(255, 64, 113, 0.18); color: var(--space-pink); }
.horo-nav-icon-monthly { background: rgba(34, 197, 94, 0.18); color: #22c55e; }
.horo-nav-icon-yearly { background: rgba(179, 157, 219, 0.18); color: #b39ddb; }

/* Calculator dropdown — same per-item icon + colour treatment as Horoscope. */
.calc-nav-menu a::before {
  content: none;
}

.calc-nav-icon {
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  flex: 0 0 24px;
  border-radius: 50%;
}

.calc-nav-icon svg {
  width: 13px;
  height: 13px;
}

.calc-nav-icon-love { background: rgba(255, 64, 113, 0.18); color: var(--space-pink); }
.calc-nav-icon-name-compatibility { background: rgba(255, 138, 128, 0.18); color: #ff8a80; }
.calc-nav-icon-numerology { background: rgba(216, 170, 76, 0.18); color: var(--soft-gold); }
.calc-nav-icon-lucky-number { background: rgba(34, 197, 94, 0.18); color: #22c55e; }
.calc-nav-icon-destiny-number { background: rgba(179, 157, 219, 0.18); color: #b39ddb; }
.calc-nav-icon-moon-phase { background: rgba(66, 147, 245, 0.18); color: var(--space-blue); }
.calc-nav-icon-flames { background: rgba(251, 146, 60, 0.18); color: #fb923c; }
.calc-nav-icon-chart { background: rgba(38, 198, 218, 0.18); color: #26c6da; }

/* Panchang & Kundli dropdown — same per-item icon + colour treatment. */
.panchang-nav-menu a::before {
  content: none;
}

.panchang-nav-icon {
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  flex: 0 0 24px;
  border-radius: 50%;
}

.panchang-nav-icon svg {
  width: 13px;
  height: 13px;
}

.panchang-nav-icon-panchang { background: rgba(216, 170, 76, 0.18); color: var(--soft-gold); }
.panchang-nav-icon-kundli { background: rgba(38, 198, 218, 0.18); color: #26c6da; }
.panchang-nav-icon-compat { background: rgba(255, 138, 128, 0.18); color: #ff8a80; }
.panchang-nav-icon-match { background: rgba(255, 64, 113, 0.18); color: var(--space-pink); }

@media (max-width: 920px) {
  .nav-dropdown {
    display: block;
    width: min(420px, 100%);
    margin: 0 auto;
  }
  .nav-dropdown-toggle {
    width: 100%;
    justify-content: space-between;
    padding: 8px 16px;
  }
  .nav-caret {
    display: inline-block;
  }
  .nav-dropdown.open .nav-caret {
    transform: rotate(180deg);
  }
  /* Collapsed by default on mobile; tapping "Calculator" expands the list. */
  .nav-dropdown-menu {
    position: static;
    transform: none;
    opacity: 1;
    visibility: visible;
    display: none;
    width: 100%;
    max-width: 100%;
    grid-template-columns: 1fr;
    gap: 2px;
    margin-top: 6px;
    padding: 6px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 64, 113, 0.16);
    border-radius: 12px;
    box-shadow: none;
    backdrop-filter: none;
  }
  .nav-dropdown.open .nav-dropdown-menu {
    display: grid;
  }
  .nav-dropdown-menu a {
    justify-content: flex-start;
    font-size: 13.5px;
    padding: 11px 14px;
  }

}

/* ============================================================
   CALCULATORS
   ============================================================ */
.calc-wrap {
  display: grid;
  grid-template-columns: 1.6fr 0.9fr;
  gap: 28px;
  align-items: start;
}

.calc-card {
  display: flex;
  flex-direction: column;
}

.calc-fields {
  display: grid;
  gap: 14px;
}

.calc-fields label {
  display: grid;
  gap: 6px;
  font-size: 13.5px;
  font-weight: 700;
  color: var(--muted);
}

.calc-fields input,
.calc-fields select {
  min-height: 50px;
  border: 1px solid rgba(255, 64, 113, 0.2);
  border-radius: 8px;
  padding: 12px 14px;
  background: rgba(23, 14, 46, 0.75);
  color: var(--ink);
  font: inherit;
}

.calc-fields input:focus,
.calc-fields select:focus {
  outline: none;
  border-color: var(--space-pink);
  box-shadow: 0 0 14px rgba(255, 64, 113, 0.25);
}

.calc-result {
  margin-top: 22px;
  padding: 26px 24px;
  border-radius: 12px;
  text-align: center;
  background: linear-gradient(160deg, rgba(255, 64, 113, 0.12), rgba(23, 14, 46, 0.6));
  border: 1px solid rgba(255, 64, 113, 0.25);
}

.calc-result-error {
  background: rgba(255, 93, 115, 0.08);
  border-color: rgba(255, 93, 115, 0.3);
}

.calc-score {
  font-family: "Cormorant Garamond", "Cormorant Fallback", Georgia, serif;
  font-size: 64px;
  line-height: 1;
  color: #fff;
  font-weight: 700;
}

.calc-score span {
  font-size: 30px;
  color: var(--space-pink);
}

.calc-score-label {
  margin-top: 6px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--space-pink);
}

.calc-emoji {
  font-size: 64px;
  line-height: 1;
}

.calc-msg {
  margin: 14px 0 0;
  color: rgba(245, 239, 250, 0.85);
}

.calc-sub {
  margin-top: 14px;
  font-size: 14px;
  color: var(--muted);
}

.calc-sub b {
  color: #fff;
}

.calc-twin {
  display: flex;
  justify-content: center;
  gap: 44px;
}

.calc-heart-track {
  height: 12px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.1);
  overflow: hidden;
  margin: 16px auto 0;
  max-width: 320px;
}

.calc-heart-fill {
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, #ff4071, #ff6f00);
}

.calc-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 12px;
  text-align: left;
  font-size: 13px;
  color: var(--muted);
}

.calc-bar span {
  width: 120px;
  flex: 0 0 120px;
}

.calc-bar b {
  width: 42px;
  text-align: right;
  color: #fff;
}

.calc-bar-track {
  flex: 1;
  height: 8px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.1);
  overflow: hidden;
}

.calc-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, #ff4071, #4293f5);
  border-radius: 999px;
}

.calc-side-list {
  display: grid;
  gap: 2px;
  margin-top: 14px;
}

.calc-side-list a {
  padding: 9px 10px;
  border-radius: 8px;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--ink);
  transition: background 150ms ease, color 150ms ease;
}

.calc-side-list a:hover {
  background: rgba(255, 64, 113, 0.14);
  color: #fff;
}

/* flex + wrap + center (same fix as .why-choose-grid below) rather than
   a grid — with 9 tiles the last row only has 1, and a grid's auto-fill
   tracks leave it stranded on the left with empty tracks beside it. */
.calc-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 20px;
}

.calc-tile {
  display: block;
  flex: 0 1 calc((100% - 60px) / 4);
  min-width: 240px;
  padding: 26px;
  border-radius: 12px;
  border: 1px solid rgba(255, 64, 113, 0.15);
  background: rgba(23, 14, 46, 0.6);
  transition: transform 220ms ease, border-color 220ms ease, box-shadow 220ms ease;
}

@media (max-width: 920px) {
  .calc-tile {
    flex: 0 1 calc((100% - 20px) / 2);
  }
}

@media (max-width: 620px) {
  .calc-tile {
    flex: 0 1 100%;
  }
}

.calc-tile:hover {
  transform: translateY(-6px);
  border-color: var(--space-pink);
  box-shadow: 0 22px 50px rgba(255, 64, 113, 0.22);
}

.calc-tile h3 {
  font-size: 22px;
  margin-bottom: 8px;
}

@media (max-width: 920px) {
  .calc-wrap {
    grid-template-columns: 1fr;
  }
}


/* ============================================================
   NAVBAR ACTION CLUSTER (language / account / consult / menu)
   ============================================================ */
.nav-top-actions {
  order: 3;
  display: flex;
  align-items: center;
  gap: 12px;
}

/* order inside the action group */
.nav-top-actions .lang-switch-btn { order: 1; }
.nav-top-actions .consult-menu { order: 2; }
.nav-top-actions .auth-slot { order: 3; }
.nav-top-actions .menu-toggle { order: 4; }

.auth-login-btn,
.auth-account-btn {
  display: grid;
  place-items: center;
  width: 40px;
  aspect-ratio: 1;
  padding: 0;
  border-radius: 50%;
  border: 1px solid rgba(255, 64, 113, 0.4);
  color: #fff;
  background: rgba(255, 255, 255, 0.05);
  box-shadow: 0 12px 26px rgba(0, 0, 0, 0.15);
  transition: transform 180ms ease, background 180ms ease, border-color 180ms ease, box-shadow 180ms ease;
}

.auth-login-btn svg {
  width: 18px;
  height: 18px;
}

.auth-login-btn:hover,
.auth-account-btn:hover {
  background: rgba(255, 64, 113, 0.15);
  border-color: var(--space-pink);
  box-shadow: 0 14px 30px rgba(255, 64, 113, 0.25);
  transform: translateY(-2px);
}

/* On narrow phones the consultation button, sign-in circle and menu
   toggle were wider combined than the space next to the logo, pushing
   the menu button itself past the viewport edge. Tighten the group. */
@media (max-width: 620px) {
  .nav-top-actions {
    gap: 6px;
  }

  .auth-login-btn,
  .auth-account-btn {
    width: 34px;
  }

  .lang-switch-btn {
    width: 34px;
  }

  .menu-toggle {
    width: 38px;
  }
}

/* Below ~400px, "Free Consultation" no longer fits next to the account and
   menu icons (language now lives inside the mobile menu, see below) — swap
   to a short label instead of collapsing to an icon-only circle. */
@media (max-width: 400px) {
  .book-now-label {
    display: none;
  }

  .book-now-label-short {
    display: inline;
  }

  .book-now {
    padding: 0 10px 0 14px;
  }
}

.auth-avatar {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, rgba(255, 64, 113, 0.55), rgba(23, 14, 46, 0.9) 72%);
  font-family: "Cormorant Garamond", "Cormorant Fallback", Georgia, serif;
  font-size: 15px;
  font-weight: 700;
}

/* ============================================================
   PROFILE ICON — hover/focus dropdown (same pattern as .consult-menu)
   ============================================================ */
.profile-menu {
  position: relative;
}

.profile-dropdown {
  position: absolute;
  top: calc(100% + 12px);
  right: 0;
  min-width: 270px;
  padding: 8px;
  background: rgba(15, 9, 30, 0.98);
  border: 1px solid rgba(255, 64, 113, 0.28);
  border-radius: 14px;
  box-shadow: 0 24px 52px rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(18px);
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: opacity 180ms ease, transform 180ms ease, visibility 180ms ease;
  z-index: 60;
}

.profile-dropdown::before {
  content: "";
  position: absolute;
  top: -12px;
  left: 0;
  right: 0;
  height: 12px;
}

.profile-menu:hover .profile-dropdown,
.profile-menu:focus-within .profile-dropdown {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.profile-dropdown-head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 10px 14px;
}

.profile-dropdown-avatar {
  width: 44px;
  height: 44px;
  flex: 0 0 44px;
  font-size: 16px;
}

.profile-dropdown-who {
  min-width: 0;
}

.profile-dropdown-name {
  display: block;
  color: #fff;
  font-size: 14.5px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.profile-dropdown-contact {
  display: block;
  margin-top: 2px;
  color: var(--muted);
  font-size: 12.5px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.profile-dropdown-divider {
  height: 1px;
  margin: 4px 6px;
  background: rgba(255, 255, 255, 0.1);
}

.profile-dropdown a,
.profile-dropdown-signout {
  display: flex;
  align-items: center;
  gap: 11px;
  width: 100%;
  padding: 11px 14px;
  border: 0;
  border-radius: 10px;
  background: none;
  color: var(--ink);
  font: inherit;
  font-size: 13.5px;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
  transition: background 160ms ease, color 160ms ease;
}

.profile-dropdown a svg,
.profile-dropdown-signout svg {
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
  color: var(--space-pink);
}

.profile-dropdown a:hover,
.profile-dropdown-signout:hover {
  background: rgba(255, 64, 113, 0.16);
  color: #fff;
}

.profile-dropdown-wallet-balance {
  margin-left: auto;
  color: var(--soft-gold);
  font-weight: 700;
  white-space: nowrap;
}

.profile-dropdown-signout {
  color: var(--space-pink);
}

.profile-dropdown-signout:hover {
  color: #fff;
}

#wallet,
#bookings {
  scroll-margin-top: 140px;
}

/* ============================================================
   FOOTER REDESIGN (Contact / Social / Payments)
   ============================================================ */
.footer-grid {
  grid-template-columns: 1.6fr 1fr 1.5fr 1fr;
  align-items: start;
}

/* Its own full-width band above the column grid (not one column among many)
   — a squeezed narrow column read as cramped next to the dense link lists,
   and the wide format matches how a footer intro is more commonly done. */
.footer-about {
  grid-column: 1 / -1;
  margin-bottom: 34px;
  padding-bottom: 30px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.footer-about p {
  margin-top: 14px;
  width: 100%;
  font-size: 17px;
  line-height: 1.7;
}

.footer-col h4,
.footer-about h4 {
  margin-bottom: 4px;
}

.footer-brand-row {
  display: flex;
  align-items: center;
  gap: 16px;
}

.footer-brand-row .brand-mark {
  width: 50px;
  flex: 0 0 50px;
  font-size: 19px;
  box-shadow: 0 0 34px rgba(255, 64, 113, 0.32);
}

.footer-brand-row h3 {
  margin: 0;
  font-size: 22px;
}

/* Trust chips reuse the same .loc-chip pill already used on location pages —
   same visual language, no new component. */
.footer-trust {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 12px 16px;
  margin: 44px auto 0;
  width: min(1440px, 90%);
  padding: 0 24px;
}

.footer-trust-chips {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
}

.contact-row,
.social-row {
  display: flex !important;
  align-items: center;
  gap: 12px;
  margin-top: 14px;
  color: rgba(245, 239, 250, 0.82);
  line-height: 1.5;
}

.contact-row .ci {
  flex: 0 0 36px;
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(66, 147, 245, 0.12);
  border: 1px solid rgba(66, 147, 245, 0.28);
  color: var(--space-blue);
}

.contact-row .ci svg {
  width: 18px;
  height: 18px;
}

.contact-row .ct {
  font-size: 14px;
}

a.contact-row:hover .ct {
  color: #fff;
}

a.contact-row:hover .ci {
  background: rgba(66, 147, 245, 0.2);
  border-color: var(--space-blue);
}

.footer-social .social-row .si {
  flex: 0 0 34px;
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 64, 113, 0.18);
  color: rgba(245, 239, 250, 0.85);
  transition: transform 180ms ease, color 180ms ease, background 180ms ease, border-color 180ms ease;
}

.footer-social .social-row .si svg {
  width: 17px;
  height: 17px;
}

.footer-social .social-row span:last-child {
  font-size: 14.5px;
  font-weight: 600;
}

.footer-social .social-row:hover {
  color: #fff;
}

.footer-social .social-row:hover .si {
  transform: translateY(-2px);
  color: var(--space-pink);
  background: rgba(255, 64, 113, 0.14);
  border-color: rgba(255, 64, 113, 0.5);
}

/* Payments strip */
.footer-payments {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 12px 16px;
  margin: 44px auto 0;
  padding: 22px 24px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  width: min(1120px, 90%);
}

.pay-label {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: 13px;
  font-weight: 900;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--space-pink);
}

.pay-label::before {
  content: "";
  width: 26px;
  height: 1px;
  background: currentColor;
}

.pay-chips {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
}

.pay-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 34px;
  padding: 0 11px;
  border-radius: 7px;
  background: #fff;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.28);
}

.pay-chip img {
  display: block;
  height: 20px;
  width: auto;
}

.pay-chip.amex {
  padding: 0 8px;
}

.pay-chip.amex img {
  height: 26px;
}

@media (max-width: 920px) {
  .footer-grid {
    grid-template-columns: 1fr 1fr;
    gap: 26px 24px;
  }
}

@media (max-width: 560px) {
  .footer-grid {
    grid-template-columns: 1fr;
  }
  .footer-payments {
    flex-direction: column;
    gap: 14px;
  }
}

/* ============================================================
   SMOOTH PAGE TRANSITIONS (cross-document View Transitions)
   ============================================================ */
@view-transition {
  navigation: auto;
}

::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: 360ms;
  animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

@keyframes nvtIn {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}
@keyframes nvtOut {
  from { opacity: 1; transform: none; }
  to   { opacity: 0; transform: translateY(-6px); }
}

::view-transition-old(root) { animation-name: nvtOut; }
::view-transition-new(root) { animation-name: nvtIn; }

/* Keep the header + floating buttons steady across pages (no fade) */
.topbar { view-transition-name: site-header; }
.floating-actions { view-transition-name: site-float; }

::view-transition-group(site-header),
::view-transition-old(site-header),
::view-transition-new(site-header),
::view-transition-group(site-float),
::view-transition-old(site-float),
::view-transition-new(site-float) {
  animation: none;
}

/* Fallback fade-in for browsers without the View Transitions API */
.no-vt main {
  animation: nvtIn 380ms cubic-bezier(0.4, 0, 0.2, 1) both;
}

@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(*),
  ::view-transition-old(*),
  ::view-transition-new(*) { animation: none !important; }
  .no-vt main { animation: none; }
}


/* ============================================================
   MOBILE MENU — hamburger→X morph, staggered items, backdrop
   ============================================================ */
@keyframes navItemIn {
  from { opacity: 0; transform: translateY(-10px); }
  to   { opacity: 1; transform: none; }
}

/* Dim backdrop behind the slide-down menu.
   Lives on .site-shell, not body: .site-shell has its own z-index:1,
   which traps .topbar's z-index:70 inside that stacking context — a
   body-level pseudo-element at z-index:30 would out-rank the trapped
   .site-shell entirely, sitting above the header and swallowing every
   click on it (nav links, the hamburger, all of it). Scoping the
   backdrop to .site-shell keeps it in the same local stacking context
   as .topbar, so 70 vs. this rule's z-index compares correctly. */
.site-shell::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 50;
  background: radial-gradient(circle at 50% 0, rgba(5, 3, 12, 0.35), rgba(5, 3, 12, 0.7));
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 340ms ease, visibility 0s linear 340ms;
}
body.nav-open .site-shell::after {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition: opacity 340ms ease, visibility 0s;
}

@media (max-width: 920px) {
  /* Animated hamburger drawn from the button (no markup change) */
  .menu-toggle {
    position: relative;
    font-size: 0;
    color: transparent;
    background-color: transparent;
    background-image: linear-gradient(var(--ink), var(--ink));
    background-repeat: no-repeat;
    background-position: center;
    background-size: 18px 2px;
    transition: background-size 200ms ease, border-color 260ms ease;
  }
  .menu-toggle::before,
  .menu-toggle::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: 18px;
    height: 2px;
    border-radius: 2px;
    background: var(--ink);
    transition: transform 380ms cubic-bezier(0.68, -0.45, 0.27, 1.45), background 260ms ease;
  }
  .menu-toggle::before { transform: translate(-50%, -6px); }
  .menu-toggle::after  { transform: translate(-50%, 4px); }

  body.nav-open .menu-toggle {
    background-size: 0 2px;
    border-color: var(--space-pink);
  }
  body.nav-open .menu-toggle::before {
    transform: translate(-50%, -1px) rotate(45deg);
    background: var(--space-pink);
  }
  body.nav-open .menu-toggle::after {
    transform: translate(-50%, -1px) rotate(-45deg);
    background: var(--space-pink);
  }

  /* Staggered entrance for each menu item */
  body.nav-open .nav-links > * {
    animation: navItemIn 440ms cubic-bezier(0.22, 1, 0.36, 1) both;
  }
  body.nav-open .nav-links > *:nth-child(1) { animation-delay: 50ms; }
  body.nav-open .nav-links > *:nth-child(2) { animation-delay: 90ms; }
  body.nav-open .nav-links > *:nth-child(3) { animation-delay: 130ms; }
  body.nav-open .nav-links > *:nth-child(4) { animation-delay: 170ms; }
  body.nav-open .nav-links > *:nth-child(5) { animation-delay: 210ms; }
  body.nav-open .nav-links > *:nth-child(6) { animation-delay: 250ms; }
  body.nav-open .nav-links > *:nth-child(7) { animation-delay: 290ms; }
  body.nav-open .nav-links > *:nth-child(8) { animation-delay: 330ms; }
  body.nav-open .nav-links > *:nth-child(9) { animation-delay: 370ms; }
  body.nav-open .nav-links > *:nth-child(n + 10) { animation-delay: 410ms; }
}

@media (prefers-reduced-motion: reduce) {
  .nav-links,
  body.nav-open .nav-links { transition: opacity 160ms ease !important; transform: none !important; }
  body.nav-open .nav-links > * { animation: none !important; }
  .menu-toggle::before,
  .menu-toggle::after { transition: transform 160ms ease, background 160ms ease !important; }
}.loc-countries {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  align-items: start;
}

.loc-country {
  border: 1px solid rgba(255, 64, 113, 0.16);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.03);
  overflow: hidden;
  transition: border-color 220ms ease, background 220ms ease;
}

.loc-country:hover {
  border-color: rgba(255, 64, 113, 0.35);
}

.loc-country.open {
  border-color: rgba(255, 64, 113, 0.45);
  background: rgba(255, 64, 113, 0.06);
}

.loc-toggle {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 16px;
  background: none;
  border: 0;
  color: #fff;
  font-family: "Inter", sans-serif;
  font-size: 14.5px;
  font-weight: 700;
  cursor: pointer;
  text-align: left;
}

.loc-flag {
  width: 22px;
  height: 15px;
  flex: 0 0 22px;
  border-radius: 2px;
  display: block;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.18);
}

.loc-toggle .loc-name {
  flex: 1;
}

.loc-caret {
  width: 14px;
  height: 14px;
  flex: 0 0 14px;
  color: var(--space-pink);
  transition: transform 260ms ease;
}

.loc-country.open .loc-caret {
  transform: rotate(180deg);
}

.loc-cities {
  display: grid;
  max-height: 0;
  overflow: hidden;
  transition: max-height 320ms cubic-bezier(0.4, 0, 0.2, 1);
}

.loc-country.open .loc-cities {
  max-height: 420px;
}

.loc-cities a {
  display: block;
  margin: 0;
  padding: 9px 16px 9px 30px;
  font-size: 13.5px;
  color: rgba(245, 239, 250, 0.78);
  position: relative;
  transition: color 160ms ease, background 160ms ease;
}

.loc-cities a::before {
  content: "";
  position: absolute;
  left: 17px;
  top: 50%;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--space-pink);
  opacity: 0.55;
  transform: translateY(-50%);
}

.loc-cities a:hover {
  color: #fff;
  background: rgba(255, 64, 113, 0.1);
}

.loc-cities .loc-all {
  margin-top: 4px;
  padding-bottom: 14px;
  color: var(--space-pink);
  font-weight: 700;
}

.loc-cities .loc-all::before {
  display: none;
}

@media (max-width: 920px) {
  .loc-countries {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 560px) {
  .loc-countries {
    grid-template-columns: 1fr;
  }
}

/* ============================================================
   LOCATION PAGES
   ============================================================ */
.breadcrumb-bar {
  padding-top: 26px;
}

.breadcrumb-bar .loc-crumbs {
  margin-bottom: 0;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.loc-crumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-bottom: 18px;
  font-size: 13px;
  color: var(--muted);
}

.loc-crumbs a {
  color: var(--muted);
  transition: color 160ms ease;
}

.loc-crumbs a:hover {
  color: var(--space-pink);
}

.loc-crumbs .loc-sep {
  opacity: 0.45;
}

.loc-hero {
  min-height: auto;
  padding: 54px 0 66px;
  align-items: flex-start;
}

.loc-hero-grid {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 44px;
  align-items: center;
}

.loc-badge {
  display: inline-block;
  padding: 7px 16px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.5);
  border: 1px solid rgba(255, 64, 113, 0.35);
  color: #fff;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.02em;
}

.loc-hero h1 {
  margin-top: 16px;
  font-size: clamp(38px, 4.4vw, 60px);
}

.loc-accent {
  color: var(--space-pink);
}

.loc-stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.loc-stat {
  padding: 20px 22px;
  border-radius: 12px;
  border: 1px solid rgba(255, 64, 113, 0.18);
  background: rgba(23, 14, 46, 0.6);
  backdrop-filter: blur(10px);
}

.loc-stat b {
  display: block;
  font-family: "Inter", sans-serif;
  font-size: clamp(24px, 2.6vw, 32px);
  font-weight: 900;
  color: #fff;
  line-height: 1.1;
}

.loc-stat span {
  display: block;
  margin-top: 6px;
  font-size: 12.5px;
  color: var(--muted);
}

.loc-note {
  grid-column: 1 / -1;
  margin: 4px 0 0;
  font-size: 12.5px;
  font-style: italic;
  color: rgba(245, 239, 250, 0.6);
}

.loc-trust {
  padding: 30px 0;
  background: rgba(255, 64, 113, 0.05);
  border-top: 1px solid rgba(255, 64, 113, 0.12);
  border-bottom: 1px solid rgba(255, 64, 113, 0.12);
}

.loc-trust .container {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 14px 22px;
}

.loc-trust-label {
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--space-pink);
}

.loc-trust-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.loc-chip {
  padding: 8px 14px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(255, 255, 255, 0.05);
  font-size: 12.5px;
  font-weight: 600;
  color: rgba(245, 239, 250, 0.85);
}

.loc-feature {
  padding: 16px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}

.loc-feature:last-of-type {
  border-bottom: 0;
}

.loc-feature h4 {
  margin: 0 0 5px;
  font-size: 15px;
  color: #fff;
}

.loc-feature p {
  margin: 0;
  font-size: 14px;
}

/* flex + wrap + center, not grid auto-fill — most states list a
   handful of cities, so this is very often an incomplete row; a grid's
   auto-fill tracks would leave it stranded on the left instead (same
   fix as .why-choose-grid). */
.loc-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 20px;
}

.loc-tile {
  display: block;
  flex: 0 1 calc((100% - 60px) / 4);
  min-width: 240px;
  padding: 26px;
  border-radius: 12px;
  border: 1px solid rgba(255, 64, 113, 0.15);
  background: rgba(23, 14, 46, 0.6);
  transition: transform 220ms ease, border-color 220ms ease, box-shadow 220ms ease;
}

@media (max-width: 920px) {
  .loc-tile {
    flex: 0 1 calc((100% - 20px) / 2);
  }
}

@media (max-width: 620px) {
  .loc-tile {
    flex: 0 1 100%;
  }
}

.loc-tile:hover {
  transform: translateY(-6px);
  border-color: var(--space-pink);
  box-shadow: 0 22px 50px rgba(255, 64, 113, 0.22);
}.loc-tile h3 {
  font-size: 24px;
  margin-bottom: 6px;
}

.loc-tile p {
  margin: 0;
  font-size: 13.5px;
}

.loc-hero .service-card h3 {
  margin-bottom: 12px;
}

@media (max-width: 920px) {
  .loc-hero-grid {
    grid-template-columns: 1fr;
    gap: 30px;
  }
}

@media (max-width: 560px) {
  .loc-stats {
    grid-template-columns: 1fr;
  }
}


/* ============================================================
   FOOTER — Service Area as a column (right of Social)
   Overrides the earlier full-width location block.
   ============================================================ */
/* Even, content-sized columns — one topic per column, 8 columns auto-
   flowing into two rows of 4. A handful of stretchy fr-weighted tracks
   (tried first) left short columns like Astrologer stranded in an overly
   wide track with a lot of dead space to their right; equal narrower
   columns stay dense and full-width the way the reference footer does. */
.footer-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.footer-area .loc-countries {
  display: block;
  margin-top: 4px;
}

.footer-area .loc-country {
  border: 0;
  border-radius: 0;
  background: none;
  overflow: visible;
}

.footer-area .loc-country:hover,
.footer-area .loc-country.open {
  border: 0;
  background: none;
}

.footer-area .loc-toggle {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 0;
  margin-top: 12px;
  background: none;
  border: 0;
  color: rgba(245, 239, 250, 0.72);
  font-family: "Inter", sans-serif;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.6;
  cursor: pointer;
  text-align: left;
  transition: color 160ms ease;
}

.footer-area .loc-toggle:hover,
.footer-area .loc-country.open .loc-toggle {
  color: #fff;
}

.footer-area .loc-flag {
  width: 20px;
  height: 14px;
  flex: 0 0 20px;
  display: block;
  border-radius: 2px;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.2);
}

.footer-area .loc-name {
  flex: 1;
}

.footer-area .loc-caret {
  width: 13px;
  height: 13px;
  flex: 0 0 13px;
  color: var(--space-pink);
  transition: transform 280ms ease;
}

.footer-area .loc-country.open .loc-caret {
  transform: rotate(180deg);
}

.footer-area .loc-cities {
  display: block;
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transition: max-height 340ms cubic-bezier(0.4, 0, 0.2, 1), opacity 240ms ease;
}

.footer-area .loc-country.open .loc-cities {
  max-height: 420px;
  opacity: 1;
}

.footer-area .loc-cities a {
  display: block;
  margin: 0;
  padding: 7px 0 7px 15px;
  font-size: 13.5px;
  color: rgba(245, 239, 250, 0.6);
  background: none;
  position: relative;
  transition: color 160ms ease, padding-left 160ms ease;
}

.footer-area .loc-cities a::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 50%;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--space-pink);
  opacity: 0.6;
  transform: translateY(-50%);
}

.footer-area .loc-cities a:hover {
  color: #fff;
  background: none;
  padding-left: 19px;
}

.footer-area .loc-cities .loc-all {
  margin-top: 2px;
  padding-left: 15px;
  color: var(--space-pink);
  font-weight: 700;
  font-size: 13px;
}

.footer-area .loc-cities .loc-all::before {
  display: none;
}@media (max-width: 1100px) {
  .footer-grid {
    grid-template-columns: 1fr 1fr 1fr;
  }
}

@media (max-width: 920px) {
  .footer-grid {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 560px) {
  .footer-grid {
    grid-template-columns: 1fr;
  }
}


/* ============================================================
   4-CARD CALL-TO-ACTION (location + service pages)
   ============================================================ */
.cta-actions-section {
  padding: 34px 0 10px;
}

.cta-actions {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;
}

.cta-card {
  display: block;
  padding: 24px;
  border-radius: 16px;
  border: 1px solid rgba(255, 64, 113, 0.15);
  background: rgba(23, 14, 46, 0.55);
  backdrop-filter: blur(10px);
  text-decoration: none;
  transition: transform 220ms ease, border-color 220ms ease, box-shadow 220ms ease, background 220ms ease;
}

.cta-card:hover {
  transform: translateY(-6px);
  border-color: var(--space-pink);
  background: rgba(30, 20, 54, 0.7);
  box-shadow: 0 22px 46px rgba(255, 64, 113, 0.22);
}

.cta-ic {
  width: 52px;
  height: 52px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  margin-bottom: 16px;
  background: linear-gradient(160deg, #ff7aa0, #ff4071);
  color: #fff;
  box-shadow: 0 10px 22px rgba(255, 64, 113, 0.32);
  transition: transform 220ms ease;
}

/* Per-card icon colours (Chat=pink, Call=green, Horoscope=gold, Kundli=violet) */
.cta-actions .cta-card:nth-child(1) .cta-ic {
  background: linear-gradient(160deg, #ff7aa0, #ff4071);
  box-shadow: 0 10px 22px rgba(255, 64, 113, 0.32);
}
.cta-actions .cta-card:nth-child(2) .cta-ic {
  background: linear-gradient(160deg, #37d69b, #12a06a);
  box-shadow: 0 10px 22px rgba(45, 199, 145, 0.32);
}
.cta-actions .cta-card:nth-child(3) .cta-ic {
  background: linear-gradient(160deg, #f6c65a, #e39b1f);
  box-shadow: 0 10px 22px rgba(216, 169, 53, 0.32);
}
.cta-actions .cta-card:nth-child(4) .cta-ic {
  background: linear-gradient(160deg, #a78bfa, #7c4dff);
  box-shadow: 0 10px 22px rgba(124, 77, 255, 0.32);
}

.cta-card:hover .cta-ic {
  transform: scale(1.06);
}

.cta-ic svg {
  width: 24px;
  height: 24px;
}

.cta-card h3 {
  font-size: 19px;
  color: #fff;
  margin: 0 0 5px;
}

.cta-card p {
  margin: 0;
  font-size: 13.5px;
  color: var(--muted);
}

@media (max-width: 920px) {
  .cta-actions {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 560px) {
  /* Stays 2-up instead of collapsing to 1 column — a tall single-column
     stack of 4 large tiles was most of the "takes a lot of screen" problem;
     a compact 2x2 grid needs a fraction of the vertical space. */
  .cta-card {
    padding: 16px;
    border-radius: 14px;
  }

  .cta-ic {
    width: 40px;
    height: 40px;
    border-radius: 11px;
    margin-bottom: 10px;
  }

  .cta-ic svg {
    width: 19px;
    height: 19px;
  }

  .cta-card h3 {
    font-size: 14.5px !important;
    margin-bottom: 2px;
  }

  .cta-card p {
    font-size: 11.5px;
  }
}.footer-area .loc-country.open .loc-cities {
  max-height: 360px;
}/* Align footer with the navbar (same left/right edges) + more breathing room */
.footer .footer-grid,
.footer .footer-bottom {
  width: min(1440px, 100%);
  padding-left: 24px;
  padding-right: 24px;
}
.footer .footer-grid {
  gap: 30px 32px;
}
.footer-payments {
  width: min(1440px, 100%);
  margin-left: auto;
  margin-right: auto;
  padding-left: 24px;
  padding-right: 24px;
}.blog-excerpt {
  font-size: 14.5px;
  line-height: 1.65;
  color: var(--muted);
  margin-bottom: 20px;
}

.blog-card {
  padding: 26px;
}/* ============================================================
   SERVICES — content-first opening (centered head + glow)
   ============================================================ */
.services-open {
  position: relative;
  padding: 56px 0 26px;
  overflow: hidden;
}

.services-open::before {
  content: "";
  position: absolute;
  top: -60px;
  left: 50%;
  transform: translateX(-50%);
  width: min(820px, 96%);
  height: 380px;
  background: radial-gradient(closest-side, rgba(255, 64, 113, 0.14), transparent);
  pointer-events: none;
}

.services-open-head {
  position: relative;
  text-align: center;
  max-width: 800px;
  margin: 0 auto 46px;
}

.services-open-head h1 {
  margin-top: 14px;
  font-size: clamp(38px, 4.6vw, 62px);
}

.services-open-head p {
  max-width: 640px;
  margin: 16px auto 0;
}

.services-open-head .hero-actions {
  margin-top: 28px;
}/* CTA block as a closing section */
.cta-bottom {
  padding-bottom: 56px;
}

/* ============================================================
   COUNTRY DIRECTORY — state rows with flowing city pills
   ============================================================ */
.loc-dir-section {
  padding-top: 44px;
}

.loc-dir-row {
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: 14px 30px;
  align-items: center;
  padding: 24px 0;
  border-bottom: 1px solid rgba(255, 64, 113, 0.13);
}

.loc-dir-row:first-child {
  border-top: 1px solid rgba(255, 64, 113, 0.13);
}

.loc-dir-state {
  font-family: "Cormorant Garamond", "Cormorant Fallback", Georgia, serif;
  font-size: 27px;
  font-weight: 700;
  color: #fff;
  line-height: 1.15;
  transition: color 160ms ease;
}

a.loc-dir-state:hover {
  color: var(--space-pink);
}

.loc-dir-cities {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.loc-pill {
  display: inline-flex;
  align-items: center;
  padding: 10px 19px;
  border-radius: 999px;
  border: 1px solid rgba(255, 64, 113, 0.2);
  background: rgba(23, 14, 46, 0.55);
  color: rgba(245, 239, 250, 0.85);
  font-size: 14px;
  font-weight: 600;
  white-space: nowrap;
  transition: border-color 180ms ease, background 180ms ease, color 180ms ease, transform 180ms ease, box-shadow 180ms ease;
}

.loc-pill:hover {
  border-color: var(--space-pink);
  background: rgba(255, 64, 113, 0.12);
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(255, 64, 113, 0.18);
}

@media (max-width: 760px) {
  .loc-dir-row {
    grid-template-columns: 1fr;
    gap: 12px;
    padding: 20px 0;
  }
}

/* Centered copyright */
.footer .footer-bottom {
  text-align: center;
}

/* Pricing: let the 'Most Popular' badge extend above the card (was clipped by .card overflow:hidden) */
.pricing-card {
  overflow: visible;
}
.pricing-card::before {
  border-radius: 8px 8px 0 0;
}


/* ============================================================
   NIRVA ASTRO BLACK — premium hero with membership card
   ============================================================ */
.black-hero-v2 {
  position: relative;
  padding: 64px 0 40px;
  overflow: hidden;
}

.black-hero-v2::before {
  content: "";
  position: absolute;
  top: -80px;
  left: 50%;
  transform: translateX(-50%);
  width: min(900px, 100%);
  height: 420px;
  background: radial-gradient(closest-side, rgba(216, 169, 53, 0.13), transparent);
  pointer-events: none;
}

.black-hero-v2 .hero-content {
  padding: 0;
  max-width: 560px;
}

.button-gold {
  background: linear-gradient(135deg, #f5d98a, #d8a935);
  color: #1a1408;
  box-shadow: 0 14px 32px rgba(216, 169, 53, 0.28);
}

.button-gold:hover {
  background: linear-gradient(135deg, #fff, #f5d98a);
  color: #1a1408;
}

.black-hero-points {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 22px;
  margin-top: 26px;
}

.black-hero-points span {
  font-size: 13px;
  font-weight: 600;
  color: rgba(245, 239, 250, 0.7);
}.black-card {
  position: relative;
  width: min(430px, 100%);
  aspect-ratio: 1.586;
  border-radius: 22px;
  padding: 26px 30px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  background: linear-gradient(135deg, #1c1723 0%, #08050d 55%, #171221 100%);
  border: 1px solid rgba(216, 169, 53, 0.55);
  box-shadow:
    0 42px 90px rgba(0, 0, 0, 0.6),
    0 0 60px rgba(216, 169, 53, 0.16),
    inset 0 1px 0 rgba(255, 255, 255, 0.07);
  transform: rotate(-4deg);
  overflow: hidden;
  animation: bcFloat 6.5s ease-in-out infinite;
}

@keyframes bcFloat {
  0%, 100% { transform: rotate(-4deg) translateY(0); }
  50%      { transform: rotate(-4deg) translateY(-12px); }
}

.black-card::before {
  content: "";
  position: absolute;
  top: -70%;
  left: -30%;
  width: 55%;
  height: 240%;
  background: linear-gradient(78deg, transparent, rgba(255, 255, 255, 0.055), transparent);
  transform: rotate(14deg);
}

.black-card::after {
  content: "";
  position: absolute;
  right: -50px;
  bottom: -50px;
  width: 240px;
  height: 240px;
  background: radial-gradient(circle, rgba(216, 169, 53, 0.16), transparent 70%);
}

.bc-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.bc-star {
  color: var(--soft-gold);
  font-size: 24px;
  line-height: 1;
  text-shadow: 0 0 18px rgba(216, 169, 53, 0.6);
}

.bc-brand {
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.32em;
  color: rgba(245, 239, 250, 0.72);
}

.bc-chip {
  position: relative;
  width: 46px;
  height: 34px;
  border-radius: 7px;
  background: linear-gradient(140deg, #f6dd9c, #cf9a2b);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.25);
}

.bc-chip::before {
  content: "";
  position: absolute;
  inset: 7px 5px;
  border: 1px solid rgba(58, 44, 7, 0.45);
  border-radius: 4px;
}

.bc-name {
  font-family: "Cormorant Garamond", "Cormorant Fallback", Georgia, serif;
  font-size: clamp(38px, 4.5vw, 50px);
  font-weight: 700;
  letter-spacing: 0.14em;
  line-height: 1;
  background: linear-gradient(135deg, #f5d98a, #d8a935 55%, #b5832a);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.bc-bottom {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.14em;
  white-space: nowrap;
  color: rgba(245, 239, 250, 0.5);
}

@media (max-width: 920px) {
  .black-hero-v2 {
    padding: 44px 0 24px;
  }
  .black-card {
    transform: rotate(0deg);
  }
  @keyframes bcFloat {
    0%, 100% { transform: rotate(0deg) translateY(0); }
    50%      { transform: rotate(0deg) translateY(-10px); }
  }
}

@media (prefers-reduced-motion: reduce) {
  .black-card { animation: none; }
}

/* Black hero — tighter vertical rhythm */
.black-hero-v2 {
  padding: 50px 0 36px;
}
.black-hero-v2 .hero-actions {
  margin-top: 22px;
}
.black-hero-points {
  margin-top: 18px;
}/* ============================================================
   BLACK HERO — centered content with two floating cards
   ============================================================ */
.black-hero-centered {
  padding: 60px 0 52px;
}

.black-hero-inner {
  position: relative;
}

.black-hero-center {
  position: relative;
  z-index: 2;
  text-align: center;
  max-width: 720px;
  margin: 0 auto;
}

.black-hero-center p {
  max-width: 600px;
}

.black-hero-cards {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}

/* smaller card variant */
.black-card-sm {
  width: 290px;
  padding: 18px 22px;
  border-radius: 16px;
}

.black-card-sm .bc-name {
  font-size: 32px;
}

.black-card-sm .bc-brand {
  font-size: 9.5px;
  letter-spacing: 0.26em;
}

.black-card-sm .bc-bottom {
  font-size: 8.5px;
  letter-spacing: 0.12em;
  gap: 10px;
}

.black-card-sm .bc-chip {
  width: 36px;
  height: 26px;
}

.black-card-sm .bc-star {
  font-size: 18px;
}

.bc-left {
  position: absolute;
  left: -10px;
  top: 50%;
  margin-top: -128px;
  animation: bcFloatL 7.5s ease-in-out infinite;
}

.bc-right {
  position: absolute;
  right: -10px;
  top: 50%;
  margin-top: -56px;
  animation: bcFloatR 6.2s ease-in-out infinite;
}

@keyframes bcFloatL {
  0%, 100% { transform: rotate(-10deg) translateY(0); }
  50%      { transform: rotate(-10deg) translateY(-12px); }
}

@keyframes bcFloatR {
  0%, 100% { transform: rotate(9deg) translateY(0); }
  50%      { transform: rotate(9deg) translateY(-14px); }
}

/* On narrower screens the cards move below the centered content, side by side */
@media (max-width: 1120px) {
  .black-hero-cards {
    position: static;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 22px;
    margin-top: 36px;
  }
  .bc-left,
  .bc-right {
    position: static;
    margin: 0;
  }
}

/* ============================================================
   AUTH — LOGIN & PROFILE PAGES
   ============================================================ */
.auth-error {
  margin: 0;
  color: #ff6b6b;
  font-size: 13.5px;
}/* ============================================================
   PROFILE PAGE — WALLET & BOOKINGS
   ============================================================ */
.profile-name-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-top: 14px;
}

.profile-name-row h1 {
  margin-top: 0;
}

.profile-edit-name-btn {
  display: grid;
  place-items: center;
  width: 34px;
  aspect-ratio: 1;
  flex: 0 0 auto;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.18);
  background: rgba(255, 255, 255, 0.05);
  color: var(--muted);
  cursor: pointer;
  transition: color 180ms ease, border-color 180ms ease, background 180ms ease;
}

.profile-edit-name-btn:hover {
  color: var(--space-pink);
  border-color: var(--space-pink);
  background: rgba(255, 64, 113, 0.12);
}

.profile-edit-name-btn svg {
  width: 15px;
  height: 15px;
}

.profile-dashboard {
  padding: 4px 0 60px;
}

.profile-dashboard .wallet-card,
.profile-dashboard .cta-actions,
.profile-dashboard .profile-main {
  margin-bottom: 26px;
}

.profile-main {
  min-height: 0;
}

.profile-section-head {
  margin-bottom: 18px;
}

.profile-section-head h3 {
  margin: 0;
}

.profile-empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 10px;
  padding: 40px 20px 20px;
}

.profile-empty-icon {
  display: grid;
  place-items: center;
  width: 60px;
  aspect-ratio: 1;
  margin-bottom: 6px;
  border-radius: 50%;
  background: rgba(255, 64, 113, 0.12);
  color: var(--space-pink);
}

.profile-empty-icon svg {
  width: 26px;
  height: 26px;
}

.profile-empty-state h4 {
  margin: 0;
  font-size: 20px;
  font-family: "Cormorant Garamond", "Cormorant Fallback", Georgia, serif;
  color: #fff;
}

.profile-empty-state p {
  max-width: 340px;
  margin: 0;
  font-size: 14px;
}

.profile-empty-state .button {
  margin-top: 8px;
}

.profile-orders-list {
  display: grid;
  gap: 12px;
}

.profile-order-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border: 1px solid rgba(255, 64, 113, 0.15);
  border-radius: 8px;
  background: rgba(23, 14, 46, 0.55);
}

.profile-order-item strong {
  display: block;
  color: #fff;
}

.profile-order-item div span {
  font-size: 12.5px;
  color: var(--muted);
}

.profile-order-status {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--space-gold);
}

.wallet-card {
  position: relative;
  overflow: hidden;
  padding: 34px 36px;
  border-radius: 20px;
  border: 1px solid rgba(255, 64, 113, 0.3);
  background:
    radial-gradient(circle at 12% -20%, rgba(255, 64, 113, 0.3), transparent 55%),
    radial-gradient(circle at 100% 130%, rgba(66, 147, 245, 0.2), transparent 55%),
    linear-gradient(160deg, #1c0e35, #0b061b);
  box-shadow: 0 30px 70px rgba(0, 0, 0, 0.4);
}

.wallet-card::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    radial-gradient(circle at 8% 20%, rgba(255, 255, 255, 0.7) 0 1px, transparent 1.6px),
    radial-gradient(circle at 30% 70%, rgba(255, 64, 113, 0.7) 0 1px, transparent 1.6px),
    radial-gradient(circle at 55% 25%, rgba(255, 255, 255, 0.6) 0 1px, transparent 1.6px),
    radial-gradient(circle at 78% 60%, rgba(255, 255, 255, 0.65) 0 1px, transparent 1.6px),
    radial-gradient(circle at 92% 20%, rgba(216, 170, 76, 0.6) 0 1px, transparent 1.6px);
  background-size: 380px 240px;
  opacity: 0.5;
}

.wallet-card-top {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.wallet-card-label {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--space-pink);
}

.wallet-card-label svg {
  width: 17px;
  height: 17px;
}

.wallet-card-balance {
  position: relative;
  margin: 24px 0 26px;
  font-family: "Inter", sans-serif;
  font-size: 46px;
  font-weight: 800;
  color: #fff;
}

.wallet-card-bottom {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 22px;
  padding-top: 22px;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
}

.wallet-card-note {
  max-width: 380px;
  margin: 0;
  font-size: 13px;
}

.wallet-card-add {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex: 0 0 auto;
  min-height: 46px;
  padding: 0 24px;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--space-pink), var(--space-pink-hover));
  color: #fff;
  font-weight: 700;
  font-size: 14px;
  white-space: nowrap;
  box-shadow: 0 14px 32px rgba(255, 64, 113, 0.28);
  transition: transform 180ms ease;
}

.wallet-card-add:hover {
  transform: translateY(-2px);
}

.wallet-card-add svg {
  width: 15px;
  height: 15px;
}

.profile-signout-link {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 48px;
  margin: 8px auto 0;
  padding: 0 26px;
  border: 1px solid rgba(255, 64, 113, 0.35);
  border-radius: 999px;
  background: rgba(255, 64, 113, 0.08);
  font: inherit;
  font-size: 13.5px;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--space-pink);
  text-align: center;
  cursor: pointer;
  transition: transform 180ms ease, background 180ms ease, border-color 180ms ease, color 180ms ease, box-shadow 180ms ease;
}

.profile-signout-link::before {
  content: "";
  width: 15px;
  height: 15px;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4'/%3E%3Cpolyline points='16 17 21 12 16 7'/%3E%3Cline x1='21' y1='12' x2='9' y2='12'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4'/%3E%3Cpolyline points='16 17 21 12 16 7'/%3E%3Cline x1='21' y1='12' x2='9' y2='12'/%3E%3C/svg%3E") center / contain no-repeat;
  flex: 0 0 auto;
}

.profile-signout-link:hover {
  background: var(--space-pink);
  border-color: var(--space-pink);
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 14px 32px rgba(255, 64, 113, 0.28);
}

/* ============================================================
   SHIMMER SKELETONS — placeholder state while Firebase data
   (auth profile, wallet balance, bookings) is still loading.
   ============================================================ */
@keyframes skeletonShimmer {
  0% { background-position: 150% 0; }
  100% { background-position: -50% 0; }
}

.skeleton {
  position: relative;
  display: inline-block;
  min-width: 64px;
  border-radius: 6px;
  color: transparent !important;
  background: linear-gradient(100deg, rgba(255, 255, 255, 0.07) 30%, rgba(255, 64, 113, 0.22) 50%, rgba(255, 255, 255, 0.07) 70%);
  background-size: 250% 100%;
  animation: skeletonShimmer 1.5s ease-in-out infinite;
  pointer-events: none;
}

.skeleton * {
  visibility: hidden;
}

#profile-name.skeleton {
  min-width: 160px;
}

#profile-phone.skeleton {
  min-width: 130px;
}

.wallet-card-balance.skeleton {
  min-width: 140px;
}

.sd-stat strong.skeleton {
  min-width: 46px;
}

.profile-orders-skeleton {
  display: grid;
  gap: 12px;
}

/* [hidden] is a UA-stylesheet rule, so it loses to any author `display`
   declaration on the same element unless restated here at matching specificity. */
.profile-orders-skeleton[hidden],
.profile-empty-state[hidden],
.profile-orders-list[hidden] {
  display: none;
}

.profile-orders-skeleton .profile-order-item {
  min-height: 58px;
}

.profile-orders-skeleton .skeleton-line {
  display: block;
  height: 13px;
  border-radius: 6px;
  background: linear-gradient(100deg, rgba(255, 255, 255, 0.07) 30%, rgba(255, 64, 113, 0.22) 50%, rgba(255, 255, 255, 0.07) 70%);
  background-size: 250% 100%;
  animation: skeletonShimmer 1.5s ease-in-out infinite;
}

.profile-orders-skeleton .skeleton-line + .skeleton-line {
  margin-top: 8px;
  width: 60%;
  height: 10px;
}

.profile-orders-skeleton .skeleton-line.skeleton-status {
  width: 56px;
}

@media (prefers-reduced-motion: reduce) {
  .skeleton,
  .profile-orders-skeleton .skeleton-line {
    animation: none;
  }
}

@media (max-width: 620px) {
  .wallet-card {
    padding: 28px 24px;
  }
  .wallet-card-balance {
    font-size: 36px;
  }
  .wallet-card-bottom {
    flex-direction: column;
    align-items: flex-start;
  }
  .wallet-card-add {
    width: 100%;
    justify-content: center;
  }
}

/* ============================================================
   AUTH MODAL — PHONE SIGN-IN
   ============================================================ */
.auth-modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  overflow-y: auto;
  background: rgba(8, 4, 21, 0.75);
  backdrop-filter: blur(8px);
  opacity: 0;
  transition: opacity 220ms ease;
}

.auth-modal-backdrop[hidden] {
  display: none;
}

.auth-modal-backdrop.open {
  opacity: 1;
}

.auth-modal {
  position: relative;
  width: min(440px, 100%);
  margin: auto;
  padding: 40px 34px 34px;
  border-radius: 16px;
  border: 1px solid rgba(255, 64, 113, 0.3);
  background:
    radial-gradient(circle at 50% -10%, rgba(255, 64, 113, 0.18), transparent 60%),
    var(--space-night);
  box-shadow: 0 40px 100px rgba(0, 0, 0, 0.55), 0 0 60px rgba(255, 64, 113, 0.15);
  transform: translateY(14px) scale(0.97);
  transition: transform 220ms ease;
}

.auth-modal-backdrop.open .auth-modal {
  transform: translateY(0) scale(1);
}

.auth-modal-close {
  position: absolute;
  top: 18px;
  right: 18px;
  display: grid;
  place-items: center;
  width: 36px;
  aspect-ratio: 1;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.15);
  background: rgba(255, 255, 255, 0.04);
  color: #fff;
  cursor: pointer;
  transition: border-color 180ms ease, transform 180ms ease;
}

.auth-modal-close:hover {
  border-color: var(--space-pink);
  transform: rotate(90deg);
}

.auth-modal-close svg {
  width: 16px;
  height: 16px;
}

.auth-modal-body h3 {
  margin-top: 10px;
  font-size: 30px;
}

.auth-modal-sub {
  margin: 10px 0 26px;
  font-size: 14.5px;
}

.auth-phone-row {
  display: flex;
  gap: 10px;
}

.auth-country-wrap {
  position: relative;
  flex: 0 0 auto;
}

.auth-country-select {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 52px;
  padding: 0 12px;
  border: 1px solid rgba(255, 64, 113, 0.2);
  border-radius: 8px;
  background: rgba(23, 14, 46, 0.75);
  color: #fff;
  font: inherit;
  font-weight: 700;
  cursor: pointer;
  transition: border-color 180ms ease;
}

.auth-country-select:hover {
  border-color: var(--space-pink);
}

.auth-country-select img {
  width: 20px;
  height: 14px;
  border-radius: 2px;
  object-fit: cover;
}

.auth-country-select .nav-caret {
  width: 12px;
  height: 12px;
}

.auth-country-dropdown {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  z-index: 5;
  width: 190px;
  padding: 6px;
  border: 1px solid rgba(255, 64, 113, 0.25);
  border-radius: 10px;
  background: #130c24;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5);
}

.auth-country-dropdown button {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 10px 10px;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: #fff;
  font: inherit;
  font-size: 13.5px;
  text-align: left;
  cursor: pointer;
}

.auth-country-dropdown button:hover {
  background: rgba(255, 64, 113, 0.14);
}

.auth-country-dropdown img {
  width: 20px;
  height: 14px;
  border-radius: 2px;
  object-fit: cover;
}

.auth-country-dropdown span {
  margin-left: auto;
  color: var(--muted);
}

.auth-phone-input {
  flex: 1;
  min-width: 0;
  height: 52px;
  padding: 0 16px;
  border: 1px solid rgba(255, 64, 113, 0.2);
  border-radius: 8px;
  background: rgba(23, 14, 46, 0.75);
  color: var(--ink);
  font: inherit;
  font-size: 16px;
  letter-spacing: 0.02em;
  transition: border-color 180ms ease, box-shadow 180ms ease;
}

.auth-phone-input:focus {
  outline: none;
  border-color: var(--space-pink);
  box-shadow: 0 0 15px rgba(255, 64, 113, 0.25);
}

.auth-modal-submit {
  width: 100%;
  margin-top: 18px;
  min-height: 52px;
}

/* This is a deliberate, one-off override: the site-wide .button:hover swaps
   in the gold gradient, but that read as an unintentional colour glitch on
   these two auth actions — keep them a stable pink with just a lift. */
.auth-modal-submit:hover {
  background: linear-gradient(135deg, var(--space-pink), var(--space-pink-hover));
  color: #fff;
  border-color: transparent;
  box-shadow: 0 14px 32px rgba(255, 64, 113, 0.28);
  transform: translateY(-2px);
}

.auth-btn-spinner {
  display: inline-block;
  width: 19px;
  height: 19px;
  border: 2.5px solid rgba(255, 255, 255, 0.35);
  border-top-color: #fff;
  border-radius: 50%;
  animation: authSpin 700ms linear infinite;
}

@keyframes authSpin {
  to {
    transform: rotate(360deg);
  }
}

.auth-otp-sent-to {
  display: inline;
  margin: 0;
  font-size: 13.5px;
  color: var(--muted);
}

.auth-otp-sent-to strong {
  color: #fff;
}

.auth-change-number-btn {
  display: inline;
  margin: 0 0 0 6px;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  font-size: 13.5px;
  font-weight: 700;
  color: var(--space-pink);
  cursor: pointer;
  transition: color 180ms ease;
}

.auth-change-number-btn:hover {
  color: var(--space-pink-hover);
  text-decoration: underline;
}

.auth-otp-boxes {
  display: flex;
  gap: 10px;
  margin: 18px 0 0;
}

.auth-otp-box {
  width: 100%;
  aspect-ratio: 1;
  border: 1px solid rgba(255, 64, 113, 0.2);
  border-radius: 8px;
  background: rgba(23, 14, 46, 0.75);
  color: var(--ink);
  font: inherit;
  font-size: 22px;
  font-weight: 700;
  text-align: center;
  transition: border-color 180ms ease, box-shadow 180ms ease;
}

.auth-otp-box:focus {
  outline: none;
  border-color: var(--space-pink);
  box-shadow: 0 0 15px rgba(255, 64, 113, 0.25);
}

.auth-resend-btn {
  display: block;
  margin: 18px auto 0;
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  font-size: 13.5px;
  font-weight: 700;
  color: var(--space-pink);
  cursor: pointer;
  transition: color 180ms ease;
}

.auth-resend-btn:hover {
  color: var(--space-pink-hover);
}

.auth-resend-btn:disabled {
  color: var(--muted);
  cursor: default;
}

.auth-resend-btn:disabled:hover {
  color: var(--muted);
}

.auth-name-input {
  height: auto;
  min-height: 52px;
  padding: 14px 16px;
  margin-bottom: 0;
}

.auth-divider {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 20px 0;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.auth-divider::before,
.auth-divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: rgba(255, 255, 255, 0.14);
}

.auth-google-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 52px;
  padding: 0 18px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 8px;
  background: #fff;
  color: #1f1f1f;
  font: inherit;
  font-weight: 700;
  cursor: pointer;
  transition: transform 180ms ease, box-shadow 180ms ease, background 180ms ease;
}

.auth-google-btn .auth-btn-label {
  display: inline-flex;
  align-items: center;
  gap: 12px;
}

.auth-google-btn svg {
  width: 20px;
  height: 20px;
  flex: 0 0 20px;
}

.auth-google-btn:hover {
  background: #f5f5f5;
  transform: translateY(-2px);
  box-shadow: 0 14px 32px rgba(0, 0, 0, 0.25);
}

.auth-google-btn:disabled {
  cursor: default;
  transform: none;
}

.auth-google-btn .auth-btn-spinner {
  border-color: rgba(31, 31, 31, 0.25);
  border-top-color: #1f1f1f;
}

.auth-legal-note {
  margin: 18px 0 0;
  font-size: 12.5px;
  line-height: 1.6;
  color: var(--muted);
  text-align: center;
}

.auth-legal-note a {
  color: var(--space-pink);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.auth-legal-note a:hover {
  color: var(--space-pink-hover);
}

@media (max-width: 480px) {
  .auth-modal {
    padding: 32px 22px 26px;
  }
  .auth-modal-body h3 {
    font-size: 26px;
  }
  .auth-otp-box {
    font-size: 18px;
  }
}

/* ============================================================
   HOROSCOPE PAGE
   ============================================================ */

/* This page now shares the same fixed cosmos backdrop as the rest of the site
   (see the HOME PAGE — LIVING COSMOS BACKGROUND block via body.cosmic-page)
   instead of its own bespoke solar system. .horo-page-shell still exists to
   keep .site-shell transparent here, same idea as body.cosmic-page .site-shell. */
.horo-page-shell {
  position: relative;
  z-index: 1;
  background: transparent;
}

/* The hero no longer carries its own background or the shared starfield pseudo-element —
   the fixed layer behind provides both — and is trimmed down to just the title + picker,
   not a full-height banner, so real horoscope content shows up right away. */
.horo-hero::before,
.horo-hero::after {
  content: none;
}

/* .hero.compact { min-height: 420px } is two classes (higher specificity than a single
   .horo-hero rule), so the min-height reset has to match that specificity to actually win —
   otherwise the hero was silently stuck at a 420px floor no matter how short its content was,
   which is what left a huge dead gap before the main card. */
.horo-hero.compact {
  min-height: 0;
}

.horo-hero {
  flex-direction: column;
  padding: 44px 0 4px;
}

.horo-hero-text {
  padding: 0 0 20px;
  text-align: center;
}

.horo-hero-text h1 {
  margin-top: 0;
  font-size: clamp(28px, 3.2vw, 40px);
}

.horo-hero-text p {
  width: auto;
  max-width: 440px;
  margin: 10px auto 0;
  font-size: 14.5px;
}

.horo-hero-picker {
  position: relative;
  z-index: 2;
}

.horo-sign-picker {
  display: flex;
  gap: 10px;
  margin: -16px -4px 22px;
  padding: 16px 4px 30px;
  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.horo-sign-picker::-webkit-scrollbar {
  display: none;
}

.horo-sign-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  flex: 0 0 auto;
  width: 84px;
  padding: 14px 8px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 16px;
  background: rgba(23, 14, 46, 0.55);
  color: var(--muted);
  text-align: center;
  transition: transform 180ms ease, border-color 180ms ease, background 180ms ease, color 180ms ease, box-shadow 180ms ease;
}

.horo-sign-btn:hover {
  border-color: rgba(255, 64, 113, 0.4);
  color: #fff;
  transform: translateY(-3px);
}

.horo-sign-btn.active {
  border-color: var(--space-pink);
  background: rgba(255, 64, 113, 0.16);
  color: #fff;
  box-shadow: 0 10px 26px rgba(255, 64, 113, 0.25);
}

.horo-sign-btn-icon {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
}

.horo-icon {
  width: 100%;
  height: 100%;
}

.horo-sign-btn-name {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.02em;
}

.horo-period-tabs {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
}

.horo-period-tab {
  padding: 11px 22px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(23, 14, 46, 0.55);
  color: var(--muted);
  font-size: 13.5px;
  font-weight: 700;
  transition: border-color 180ms ease, background 180ms ease, color 180ms ease, transform 180ms ease;
}

.horo-period-tab:hover {
  color: #fff;
  border-color: rgba(255, 64, 113, 0.35);
}

.horo-period-tab.active {
  background: linear-gradient(135deg, var(--space-pink), var(--space-pink-hover));
  border-color: transparent;
  color: #fff;
  box-shadow: 0 10px 24px rgba(255, 64, 113, 0.28);
  transform: translateY(-1px);
}

.horo-main-section {
  padding: 22px 0 10px;
}

.horo-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: 28px;
  align-items: start;
}

.horo-primary {
  display: grid;
  gap: 22px;
}

.horo-sidebar {
  display: grid;
  gap: 22px;
  position: sticky;
  top: 100px;
}

.horo-main-card {
  padding: 32px;
}

.horo-main-head {
  display: flex;
  align-items: center;
  gap: 18px;
  margin-bottom: 20px;
}

.horo-main-icon {
  display: grid;
  place-items: center;
  width: 64px;
  height: 64px;
  flex: 0 0 64px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, rgba(255, 64, 113, 0.35), rgba(23, 14, 46, 0.92) 72%);
  border: 1px solid rgba(255, 64, 113, 0.4);
  color: var(--space-pink);
  box-shadow: 0 0 30px rgba(255, 64, 113, 0.25);
}

.horo-main-icon .horo-icon {
  width: 30px;
  height: 30px;
}

.horo-main-heading h2 {
  margin: 0 0 8px;
  font-size: clamp(22px, 3vw, 28px);
}

.horo-main-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.horo-chip {
  padding: 5px 13px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  background: rgba(255, 255, 255, 0.05);
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}

.horo-chip-element {
  color: var(--space-blue);
  border-color: rgba(66, 147, 245, 0.3);
  background: rgba(66, 147, 245, 0.1);
}

.horo-chip-mood {
  color: var(--soft-gold);
  border-color: rgba(214, 169, 53, 0.3);
  background: rgba(214, 169, 53, 0.1);
}

.horo-prediction {
  margin: 0 0 26px;
  color: var(--ink);
  font-size: 15.5px;
  line-height: 1.75;
}

.horo-meters {
  display: grid;
  gap: 16px;
  margin-bottom: 26px;
}

.horo-meter-head {
  display: flex;
  justify-content: space-between;
  margin-bottom: 7px;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--muted);
}

.horo-meter-track {
  height: 8px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  overflow: hidden;
}

.horo-meter-fill {
  height: 100%;
  width: 0%;
  border-radius: 999px;
  background: var(--meter-color, var(--space-pink));
  box-shadow: 0 0 14px var(--meter-color, var(--space-pink));
  transition: width 900ms cubic-bezier(0.16, 1, 0.3, 1);
}

.horo-facts {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  padding-top: 22px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.horo-fact {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.horo-fact-label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--muted);
}

.horo-fact-value {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #fff;
  font-weight: 700;
  font-size: 14px;
}

.horo-swatch {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.35);
}

.horo-fact-number {
  font-family: "Cormorant Garamond", "Cormorant Fallback", Georgia, serif;
  font-size: 22px;
  color: var(--space-pink);
}

.horo-detail-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}

.horo-detail-card {
  padding: 0;
}

.horo-detail-head {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 22px 24px;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.horo-detail-icon {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  flex: 0 0 38px;
  border-radius: 50%;
  background: rgba(255, 64, 113, 0.14);
  color: var(--space-pink);
}

.horo-detail-icon svg {
  width: 18px;
  height: 18px;
}

.horo-detail-head h3 {
  margin: 0;
  flex: 1;
  font-size: 17px;
}

.horo-detail-caret {
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
  color: var(--muted);
  transition: transform 220ms ease;
}

.horo-detail-card.open .horo-detail-caret {
  transform: rotate(180deg);
  color: var(--space-pink);
}

.horo-detail-text {
  margin: 0;
  padding: 0 24px 22px;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.65;
}

.horo-detail-more {
  display: grid;
  grid-template-rows: 0fr;
  padding: 0 24px;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.65;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  transition: grid-template-rows 260ms ease, padding 260ms ease, border-color 260ms ease;
}

.horo-detail-more p {
  margin: 0;
  overflow: hidden;
}

.horo-detail-card.open .horo-detail-more {
  grid-template-rows: 1fr;
  padding: 18px 24px 22px;
}

.horo-detail-card:not(.open) .horo-detail-more {
  border-color: transparent;
}

.horo-more-card,
.horo-cta-card {
  padding: 26px;
}

.horo-more-card h3 {
  margin: 0 0 14px;
  font-size: 18px;
}

.horo-more-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 12px 14px;
  border-radius: 10px;
  color: var(--ink);
  font-size: 13.5px;
  font-weight: 600;
  transition: background 160ms ease, color 160ms ease;
}

.horo-more-link svg {
  width: 16px;
  height: 16px;
  flex: 0 0 16px;
  color: var(--space-pink);
  transition: transform 160ms ease;
}

.horo-more-link:hover {
  background: rgba(255, 64, 113, 0.12);
  color: #fff;
}

.horo-more-link:hover svg {
  transform: translateX(3px);
}

.horo-more-link.active {
  background: rgba(255, 64, 113, 0.16);
  color: #fff;
}

.horo-cta-card h3 {
  margin: 10px 0 10px;
  font-size: 20px;
}

.horo-cta-card p {
  margin: 0 0 20px;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.6;
}

.horo-cta-card .button {
  width: 100%;
}

.horo-cta-card .button svg {
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
}

@media (max-width: 980px) {
  .horo-layout {
    grid-template-columns: 1fr;
  }
  .horo-sidebar {
    position: static;
  }
  .horo-detail-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 620px) {
  .horo-main-card {
    padding: 24px 20px;
  }
  .horo-main-head {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* ============================================================
   PDF / PRINT — "Download PDF" on the Kundli and Kundli Matching
   results (assets/js/pdf-print.js). Goes through the browser's
   own print-to-PDF rather than a bundled library — this site has
   no build step, and modern print-to-PDF is good enough to art-
   direct properly. Deliberately a light "report" theme, not the
   dark site theme: a printed near-black background wastes ink,
   and most browsers strip backgrounds by default unless the user
   opts in to "background graphics", so the output has to hold up
   as dark-text-on-white even when nothing prints.

   .pdf-print-header/.pdf-print-footer are injected by JS just
   before window.print() and removed right after — they only ever
   need to exist for the print pass, never on screen.
   ============================================================ */
.pdf-print-header,
.pdf-print-footer {
  display: none;
}

@media print {
  @page {
    margin: 16mm 14mm;
  }

  html, body {
    background: #fff !important;
  }

  body * {
    visibility: hidden;
  }

  .pdf-print-area,
  .pdf-print-area * {
    visibility: visible;
  }

  .pdf-print-area {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    margin: 0;
    padding: 0;
    background: #fff !important;
    border: 0 !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    color: #241a33;
  }

  .pdf-print-header {
    display: flex !important;
    align-items: center;
    gap: 12px;
    padding-bottom: 14px;
    margin-bottom: 22px;
    border-bottom: 2px solid #d8aa4c;
  }

  .pdf-print-header .pdf-mark {
    width: 38px;
    aspect-ratio: 1;
    flex: none;
    border-radius: 50%;
    border: 1.5px solid #ff4071;
    display: grid;
    place-items: center;
    color: #ff4071;
    font-family: "Cormorant Garamond", "Cormorant Fallback", Georgia, serif;
    font-size: 18px;
  }

  .pdf-print-header .pdf-mark-text {
    display: flex;
    flex-direction: column;
    line-height: 1.25;
  }

  .pdf-print-header .pdf-brand-name {
    font-family: "Cormorant Garamond", "Cormorant Fallback", Georgia, serif;
    font-weight: 700;
    font-size: 19px;
    color: #1a1128;
  }

  .pdf-print-header .pdf-brand-sub {
    font-size: 9px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #a9762c;
  }

  .pdf-print-header .pdf-doc-meta {
    margin-left: auto;
    text-align: right;
    font-size: 11px;
    line-height: 1.6;
    color: #6b6478;
  }

  .pdf-print-header .pdf-doc-title {
    font-family: "Cormorant Garamond", "Cormorant Fallback", Georgia, serif;
    font-size: 15px;
    font-weight: 700;
    color: #1a1128;
  }

  .pdf-print-footer {
    display: block !important;
    margin-top: 26px;
    padding-top: 12px;
    border-top: 1px solid #ece3d3;
    font-size: 9.5px;
    color: #948d9e;
    text-align: center;
  }

  /* Re-theme the result card's own content for paper */
  .pdf-print-area h3,
  .pdf-print-area .matching-person-summary h4,
  .pdf-print-area .kundli-fact b,
  .pdf-print-area .koota-result-name,
  .pdf-print-area .koota-result-score,
  .pdf-print-area dd,
  .pdf-print-area .kundli-yoga-item b {
    color: #1a1128 !important;
  }

  .pdf-print-area .kundli-section-title {
    color: #a9762c !important;
    border-top: 1px solid #ece3d3;
    padding-top: 14px;
  }

  .pdf-print-area .calc-score {
    color: #b8123a !important;
    -webkit-text-fill-color: #b8123a !important;
    background: none !important;
  }

  .pdf-print-area .calc-score span,
  .pdf-print-area .calc-score-label,
  .pdf-print-area .kundli-recap,
  .pdf-print-area .kundli-trait,
  .pdf-print-area .calc-msg,
  .pdf-print-area .calc-sub,
  .pdf-print-area p,
  .pdf-print-area dt,
  .pdf-print-area dd span,
  .pdf-print-area .kundli-fact span,
  .pdf-print-area .koota-result-pair,
  .pdf-print-area .kundli-yoga-item span {
    color: #4d465a !important;
  }

  .pdf-print-area .kundli-fact,
  .pdf-print-area .matching-person-summary,
  .pdf-print-area .koota-result-row,
  .pdf-print-area .kundli-dosha-box,
  .pdf-print-area .kundli-yoga-item {
    background: #faf7f0 !important;
    border: 1px solid #ece3d3 !important;
    break-inside: avoid;
  }

  .pdf-print-area .calc-bar-track {
    background: #ece3d3 !important;
  }

  .pdf-print-area .calc-bar-fill {
    background: #d8aa4c !important;
  }

  .pdf-print-area .kundli-chart-wrap {
    background: #fff !important;
    border: 1px solid #ece3d3;
  }

  .pdf-print-area .matching-verdict {
    background: none !important;
    border: 1px solid currentColor !important;
  }

  .pdf-print-area summary {
    display: none !important;
  }

  .pdf-print-area details {
    margin-top: 6px;
  }

  .pdf-print-area .kundli-result-actions {
    display: none !important;
  }
}