/* ==========================================================
   innermetaphysics — Full-Width Responsive Design
   Palette: Saffron #4A6B6A + Charcoal #1A1A1A
   Fonts:   Cormorant Garamond (headings) + Inter (body)
   ========================================================== */

:root {
  --font-heading:  'Cormorant Garamond', serif;
  --font-body:     'Inter', sans-serif;
  --primary:       #4A6B6A;
  --saffron:       #E4A332;
  --saffron-light: #F4A44A;
  --saffron-pale:  #FDF3E8;
  --saffron-dark:  #C45F0A;
  --black:         #0D0D0D;
  --charcoal:      #1A1A1A;
  --ink:           #2E2E2E;
  --muted:         #6B6B6B;
  --light:         #A8A8A8;
  --rule:          #E4E4DF;
  --bg:            #FAFAF8;
  --white:         #FFFFFF;
  --radius:        12px;
  --radius-lg:     20px;
  --shadow-sm:     0 2px 8px rgba(0,0,0,.06);
  --shadow-md:     0 8px 30px rgba(0,0,0,.08);
  --shadow-lg:     0 20px 60px rgba(0,0,0,.10);
}

/* ── Reset ───────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; font-size: 16px; }
body {
  font-family: var(--font-body);
  font-weight: 400;
  color: var(--text-primary, var(--ink));
  background: var(--bg-primary, var(--bg));
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }

/* ── Typography ──────────────────────────── */
h1, h2, h3, h4 {
  font-family: var(--font-heading);
  font-weight: 500;
  line-height: 1.08;
  color: var(--text-primary, var(--black));
}
h1 { font-size: clamp(2.8rem, 6vw, 5rem); font-weight: 400; letter-spacing: -.02em; }
h1 em, h2 em { font-style: italic; color: var(--primary-color, var(--saffron)); }
h2 { font-size: clamp(2rem, 4vw, 3rem); }
h3 { font-size: clamp(1.15rem, 2vw, 1.45rem); font-weight: 500; }
p  { font-size: .93rem; line-height: 1.72; color: var(--text-secondary, var(--muted)); }
.lead { font-size: 1.08rem; line-height: 1.75; color: var(--text-primary, var(--ink)); }

/* ── Container ───────────────────────────── */
.container {
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 0 clamp(20px, 4vw, 64px);
}
.container-fluid {
  width: 100%;
  max-width: none;
  margin-left: 0;
  margin-right: 0;
  padding-left: clamp(20px, 4vw, 64px);
  padding-right: clamp(20px, 4vw, 64px);
}
.container-narrow { max-width: 860px; }

/* ── Eyebrow label ───────────────────────── */
.eyebrow {
  display: block;
  font-size: .7rem; font-weight: 600;
  letter-spacing: .26em; text-transform: uppercase;
  color: var(--primary-color, var(--saffron));
  margin-bottom: 14px;
}

/* ── Buttons ─────────────────────────────── */
.button {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: clamp(10px,2.5vw,14px) clamp(18px,4vw,28px);
  font-family: var(--font-body);
  font-size: clamp(.72rem,.9vw + .4rem,.82rem);
  font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase;
  border-radius: 6px; cursor: pointer;
  white-space: nowrap;
  transition: background .2s, color .2s, border-color .2s, box-shadow .2s, transform .15s;
  border: 1.5px solid transparent;
  text-decoration: none;
  line-height: 1.3;
  min-height: 44px; /* touch target */
}
.button:hover  { text-decoration: none; }
.button:active { transform: scale(.96); }
.button:focus-visible {
  outline: 2px solid var(--saffron);
  outline-offset: 3px;
}
/* Variants */
.button-primary {
  background: var(--primary-color, var(--saffron)); color: #ffffff; border-color: var(--primary-color, var(--saffron));
  box-shadow: 0 2px 10px rgba(74,107,106,.28);
}
.button-primary:hover {
  background: var(--primary-dark, var(--saffron-dark)); border-color: var(--primary-dark, var(--saffron-dark));
  box-shadow: 0 4px 18px rgba(74,107,106,.38);
  color: #ffffff;
}
.button-secondary {
  background: transparent; color: var(--text-primary, var(--black)); border-color: var(--border-medium, var(--black));
}
.button-secondary:hover { background: var(--text-primary, var(--black)); color: var(--bg-primary, var(--white)); }
.button-secondary-light {
  background: rgba(255,255,255,.15); color: #fff; border-color: rgba(255,255,255,.4);
}
.button-secondary-light:hover { background: rgba(255,255,255,.28); border-color: rgba(255,255,255,.6); }
.button-outline-saffron {
  background: transparent; color: var(--primary-color, var(--saffron)); border-color: var(--primary-color, var(--saffron));
}
.button-outline-saffron:hover { background: var(--primary-color, var(--saffron)); color: #ffffff; }
/* Size modifiers */
.button-sm {
  padding: 8px 18px;
  font-size: .7rem;
  min-height: 36px;
  border-radius: 5px;
}
.button-lg {
  padding: 16px 38px;
  font-size: .88rem;
  min-height: 52px;
  border-radius: 8px;
}
/* Width helpers */
.full-width { width: 100%; justify-content: center; }
/* Loading state */
.button[data-loading="true"] {
  opacity: .72; pointer-events: none; cursor: not-allowed;
}
.button[data-loading="true"]::before {
  content: "";
  display: inline-block;
  width: 14px; height: 14px;
  border: 2px solid currentColor;
  border-top-color: transparent;
  border-radius: 50%;
  animation: btn-spin .65s linear infinite;
  margin-right: 6px;
  flex-shrink: 0;
}
@keyframes btn-spin { to { transform: rotate(360deg); } }
/* Mobile: stack button groups */
@media (max-width: 480px) {
  .button-group {
    flex-direction: column;
  }
  .button-group .button { width: 100%; justify-content: center; }
}

/* ── Section ─────────────────────────────── */
.section { padding: clamp(56px, 8vw, 100px) 0; }
.section + .section { border-top: 1px solid var(--rule); }
.section-heading { text-align: center; max-width: 900px; margin: 0 auto 48px; }
.section-heading h2 { margin-top: 8px; }

/* ══════════════════════════════════════════════
   HEADER — sticky, full-width, responsive
   ══════════════════════════════════════════════ */
.site-header {
  position: sticky; top: 0; z-index: 1000;
  background: var(--navbar-bg, rgba(255,255,255,.97));
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--border-light, var(--rule));
  transition: background .25s, border-color .25s;
}
.header-inner {
  display: flex; align-items: center; gap: 24px;
  max-width: 1440px; margin: 0 auto;
  padding: 0 clamp(16px, 3vw, 48px);
  height: 64px;
  overflow: visible;
}
.brand {
  font-family: var(--font-body);
  font-size: .82rem; font-weight: 700;
  letter-spacing: .22em; text-transform: uppercase;
  color: var(--text-primary, var(--black, #0D0D0D)); white-space: nowrap; flex-shrink: 0;
  transition: color .25s;
}
.brand span { color: var(--saffron); }

/* ── Nav list ──────────────────────────── */
.site-nav { flex: 1; display: flex; justify-content: center; overflow: visible; }
.nav-list {
  list-style: none; display: flex; gap: 6px;
  align-items: center; padding: 0; margin: 0;
  overflow: visible;
}
.nav-item > a {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 8px 14px;
  font-size: .78rem; font-weight: 600;
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--text-secondary, var(--muted, #6B6B6B)); transition: color .18s;
  white-space: nowrap;
}
.nav-item > a:hover,
.nav-item > a.active { color: var(--text-primary, var(--black, #0D0D0D)); }
.nav-item > a i { font-size: .85rem; }
.dd-arrow { margin-left: 2px; transition: transform .2s; }

/* ── Dropdown ──────────────────────────── */
.has-dropdown { position: relative; overflow: visible; }
.dropdown-menu {
  position: absolute; top: calc(100% + 8px); left: 0;
  min-width: 230px; padding: 8px 0;
  background: var(--card-bg, var(--white, #fff));
  border: 1px solid var(--border-light, var(--rule, #E4E4DF));
  border-radius: var(--radius);
  box-shadow: var(--shadow-md);
  opacity: 0; visibility: hidden;
  transform: translateY(6px);
  transition: opacity .18s, transform .18s, visibility .18s;
  z-index: 1300;
  list-style: none;
}
.has-dropdown:hover > .dropdown-menu,
.has-dropdown:focus-within > .dropdown-menu {
  opacity: 1; visibility: visible; transform: translateY(0);
}
.has-dropdown:hover .dd-arrow { transform: rotate(180deg); }
.dropdown-menu li a {
  display: block; padding: .75rem 1.2rem;
  font-size: .9rem; font-weight: 500;
  color: var(--text-primary, var(--ink, #2E2E2E)); text-transform: none;
  letter-spacing: 0; transition: background .15s, color .15s;
}
.dropdown-menu li a:hover { background: rgba(74,107,106,.1); color: var(--primary-color, #4A6B6A); }

/* ── Header actions (search + auth) ────── */
.header-actions {
  display: flex; align-items: center; gap: 16px; flex-shrink: 0;
}
.header-search {
  display: flex; align-items: center;
  border: 1px solid var(--rule); border-radius: 999px;
  overflow: hidden; background: var(--white);
  height: 40px;
}
.header-search input {
  border: none; outline: none; padding: 0 14px;
  font-size: .85rem; font-family: var(--font-body);
  color: var(--ink); background: transparent;
  width: 160px; transition: width .25s;
}
.header-search input:focus { width: 220px; }
.header-search input::placeholder { color: var(--light); }
.header-search button {
  border: none; background: var(--saffron); color: #fff;
  width: 40px; height: 40px; display: flex;
  align-items: center; justify-content: center;
  cursor: pointer; transition: background .2s;
}
.header-search button:hover { background: var(--saffron-dark); }

.nav-auth { display: flex; align-items: center; gap: 12px; }
.nav-auth-link {
  font-size: .78rem; font-weight: 500;
  letter-spacing: .06em; color: var(--text-secondary, var(--muted, #6B6B6B));
  transition: color .18s; white-space: nowrap;
  max-width: 140px; overflow: hidden; text-overflow: ellipsis;
}
.nav-auth-link:hover { color: var(--text-primary, var(--black, #0D0D0D)); }
.nav-cta {
  display: inline-block; padding: 8px 18px;
  font-size: .72rem; font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase;
  background: var(--saffron); color: var(--white);
  border-radius: 4px; transition: background .18s;
  white-space: nowrap;
}
.nav-cta:hover { background: var(--saffron-dark); }

/* ── Mobile toggle ────────────────────── */
.mobile-toggle {
  display: none; flex-direction: column; gap: 5px;
  background: none; border: none; cursor: pointer; padding: 6px;
}

/* Dashboard toggle placed in header when present */
.site-header .dash-menu-toggle{
  position: static; /* flow in header */
  top: auto; left: auto;
  width: 38px; height: 38px; border-radius:8px;
  background: transparent; color: var(--muted); border: none;
  box-shadow: none; padding: 6px; margin-right: 6px;
  display: inline-flex; align-items: center; justify-content: center; cursor: pointer;
}
.site-header .dash-menu-toggle i{ font-size:1rem; }
.site-header .dash-menu-toggle:hover{ color: var(--saffron); background: rgba(74,107,106,0.04); }


/* ── Mobile search icon (hidden on desktop) ── */
.header-search-mobile {
  display: none; align-items: center; justify-content: center;
  width: 40px; height: 40px; border-radius: 50%;
  background: var(--saffron-pale); color: var(--saffron);
  font-size: 1rem; transition: background .2s, color .2s;
}
.header-search-mobile:hover { background: var(--saffron); color: #fff; }

/* ── Dashboard link emphasis ─────────── */
.nav-dashboard-link {
  display: inline-flex; align-items: center; gap: 6px;
  background: rgba(0,0,0,0.06); padding: 6px 14px;
  border-radius: 999px; color: var(--black, #111) !important;
  font-weight: 600 !important; transition: background .18s;
}
.nav-dashboard-link:hover { background: rgba(0,0,0,0.12); }
.nav-dashboard-link:hover { background: var(--saffron); color: #fff !important; }

/* ── Profile completion banner ───────── */
.profile-complete-banner {
  background: var(--saffron-pale); border-bottom: 1px solid rgba(74,107,106,.2);
  padding: 10px 0; font-size: .88rem; color: var(--saffron-dark);
}
.profile-complete-banner i { margin-right: 6px; }
.mobile-toggle span {
  display: block; width: 22px; height: 2px;
  background: var(--black); transition: .3s;
}
.mobile-toggle.active span:nth-child(1) { transform: rotate(45deg) translate(5px, 5px); }
.mobile-toggle.active span:nth-child(2) { opacity: 0; }
.mobile-toggle.active span:nth-child(3) { transform: rotate(-45deg) translate(5px, -5px); }

/* Base template utility classes (externalized from inline styles) */
.mobile-menu-cta { background: #ff9933; color: #fff; }
.theme-toggle-mobile-btn {
  border: none;
  cursor: pointer;
  text-align: left;
}
.currency-pill-inline {
  display: inline-flex;
  width: auto;
}

/* Global offcanvas hard-disable (legacy component removed) */
#offcanvasSidebarToggle,
#offcanvasSidebarClose,
#offcanvasSidebar,
#offcanvasBackdrop,
.offcanvas-toggle,
.offcanvas-sidebar,
.offcanvas-backdrop {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

/* ══════════════════════════════════════════════
   HERO — home page
   ══════════════════════════════════════════════ */

/* ── Dark centered hero (inner pages — kundali, matchmaking, etc.) ────────── */
.mm-hero {
  background: var(--black);
  color: #fff;
  padding: 4rem 1.5rem 5.5rem;
  text-align: center;
}
.mm-heading {
  font-family: var(--font-heading);
  font-size: clamp(2.5rem, 6vw, 4rem);
  font-weight: 600;
  margin: .5rem 0 1rem;
  line-height: 1.1;
  color: #fff;
}
.mm-heading em { color: var(--saffron); font-style: italic; }
.mm-sub {
  max-width: 520px;
  margin: 0 auto;
  opacity: .75;
  font-size: 1rem;
  line-height: 1.7;
}

/* ── Compact page hero (inner pages) ──────────── */
.page-hero {
  background: radial-gradient(circle at 15% 60%, rgba(74,107,106,.08), transparent 40%),
              linear-gradient(180deg, #FEF9F3 0%, #F5F1EA 100%);
  border-bottom: 1px solid var(--rule);
  padding: clamp(2.5rem, 5vw, 3.5rem) clamp(1.5rem, 5vw, 5rem);
}
.page-hero-content { max-width: 680px; }
.page-hero-content h1 { margin: .35rem 0 .75rem; }
.page-hero-content h1 em { display: block; font-style: italic; color: var(--saffron); }
.page-hero-summary {
  font-size: 1rem; line-height: 1.7; color: var(--muted);
  max-width: 52ch; margin: 0;
}

.hero {
  display: grid;
  grid-template-columns: 1.15fr .85fr;
  min-height: 100vh;
  background: radial-gradient(circle at 20% 30%, rgba(74,107,106,.1), transparent 32%),
              linear-gradient(180deg, #FEF9F3 0%, #F5F1EA 100%);
  overflow: hidden;
}
.hero-content {
  display: flex; flex-direction: column; justify-content: center;
  padding: clamp(60px, 6vw, 100px) clamp(32px, 5vw, 80px);
  max-width: 720px;
}
.hero-content h1 { margin: 0 0 20px; max-width: 14ch; }
.hero-content h1 em { display: block; font-style: italic; color: var(--saffron); }

.hero-summary {
  font-size: 1rem; line-height: 1.7; color: var(--muted);
  max-width: 40ch; margin-bottom: 32px;
}
.hero-actions { display: flex; gap: 14px; flex-wrap: wrap; margin-bottom: 24px; }

.hero-stamps { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 36px; }
.hero-stamp {
  display: inline-flex; align-items: center; justify-content: center;
  padding: .6rem 1rem; border-radius: 999px;
  background: rgba(74,107,106,.1); color: var(--saffron);
  font-size: .72rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .12em;
}

.hero-stats {
  display: flex; gap: 32px; padding-top: 28px;
  border-top: 1px solid var(--rule);
}
.hero-stats div { display: flex; flex-direction: column; gap: 4px; }
.hero-stats strong {
  font-family: var(--font-heading);
  font-size: 2rem; font-weight: 500; color: var(--black); line-height: 1;
}
.hero-stats span {
  font-size: .7rem; letter-spacing: .1em;
  text-transform: uppercase; color: var(--light);
}

/* hero image panel */
.hero-image-panel {
  position: relative; overflow: hidden;
  background: linear-gradient(160deg, #2A1A0E 0%, #4A2C10 40%, #1A1200 100%);
}
.hero-image-panel::before {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(circle at 50% 40%, rgba(74,107,106,.3) 0%, transparent 55%),
              radial-gradient(circle at 30% 70%, rgba(244,164,74,.12) 0%, transparent 40%);
}
.hero-image-panel::after {
  content: "✦ ASTRO INTELLIGENCE ✦";
  position: absolute; bottom: 40px; right: 40px;
  font-size: .6rem; letter-spacing: .3em; text-transform: uppercase;
  color: rgba(255,255,255,.35); writing-mode: vertical-rl; transform: rotate(180deg);
}
.hero-glyph {
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%,-50%);
  font-size: clamp(8rem, 18vw, 16rem);
  line-height: 1; opacity: .16;
  color: var(--saffron-light); user-select: none;
}

/* ══════════════════════════════════════════════
   SERVICE / PRODUCT PAGE
   ══════════════════════════════════════════════ */

/* ── Service Hero ──────────────────────── */
.service-hero,
.services-index-hero {
  position: relative;
  min-height: 100vh; display: flex; align-items: center;
  background: var(--charcoal) center / cover no-repeat;
  overflow: hidden;
}
.service-hero-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(10,10,10,.45), rgba(10,10,10,.72));
}
.service-hero .container,
.services-index-hero .container { position: relative; z-index: 2; }

.service-hero-content {
  max-width: 720px;
  padding: clamp(48px, 5vw, 80px) 0;
  color: var(--white);
}
.hero-badge {
  display: inline-block;
  padding: 6px 16px; border-radius: 999px;
  background: rgba(74,107,106,.2); color: var(--saffron-light);
  font-size: .7rem; font-weight: 700;
  letter-spacing: .15em; text-transform: uppercase;
  margin-bottom: 20px;
}
.service-hero-content h1 { color: #fff; margin-bottom: 16px; }
.hero-tagline { font-size: 1.1rem; color: rgba(255,255,255,.82); max-width: 50ch; margin-bottom: 24px; }
.hero-price {
  font-family: var(--font-heading);
  font-size: 2.2rem; font-weight: 500; color: var(--saffron-light);
  margin-bottom: 28px;
}
.hero-cta-row { display: flex; gap: 14px; flex-wrap: wrap; }

/* ── Service About grid ────────────────── */
.service-about-grid {
  display: grid;
  grid-template-columns: 1.6fr 1fr;
  gap: clamp(32px, 4vw, 64px);
  align-items: start;
}
.service-about-main .eyebrow { margin-bottom: 10px; }
.service-about-main h2 { margin-bottom: 20px; }
.service-about-main .lead { margin-bottom: 24px; }
.rich-text { font-size: .95rem; line-height: 1.8; color: var(--ink); }
.rich-text p { color: var(--ink); margin-bottom: 1rem; }
.rich-text h3 { margin: 2rem 0 .75rem; }
.rich-text ul, .rich-text ol { margin: 1rem 0; padding-left: 1.5rem; }
.rich-text li { margin-bottom: .5rem; color: var(--ink); }

/* ── Sidebar card ──────────────────────── */
.service-sidebar { position: sticky; top: 96px; }
.service-card {
  background: var(--white);
  border: 1px solid var(--rule);
  border-radius: var(--radius-lg);
  padding: 2rem;
  box-shadow: var(--shadow-md);
}
.service-card-price {
  font-family: var(--font-heading);
  font-size: 2.4rem; font-weight: 500;
  color: var(--saffron); margin-bottom: 16px;
}
.service-card-meta {
  list-style: none; padding: 0;
  display: grid; gap: 10px; margin-bottom: 24px;
}
.service-card-meta li {
  display: flex; justify-content: space-between;
  font-size: .9rem; padding-bottom: 10px;
  border-bottom: 1px solid var(--rule); color: var(--ink);
}
.service-card-meta li strong { color: var(--muted); font-weight: 600; font-size: .8rem; text-transform: uppercase; letter-spacing: .06em; }

/* ── Features grid ─────────────────────── */
.service-features { background: var(--saffron-pale); }
.features-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 24px;
}
.feature-item {
  background: var(--white); border-radius: var(--radius-lg);
  padding: 2rem; box-shadow: var(--shadow-sm);
  transition: transform .2s, box-shadow .2s;
}
.feature-item:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.feature-icon {
  width: 52px; height: 52px; border-radius: 50%;
  background: var(--saffron-pale); color: var(--saffron);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.3rem; margin-bottom: 16px;
}
.feature-icon span {
  font-family: var(--font-heading);
  font-size: 1.5rem; font-weight: 600;
}
.feature-item h3 { margin-bottom: 10px; }
.feature-item p { font-size: .88rem; }

/* ── FAQ accordion ─────────────────────── */
.service-faq { background: var(--white); }
.faq-list { display: grid; gap: 0; }
.faq-item {
  border-bottom: 1px solid var(--rule);
}
.faq-question {
  display: flex; align-items: center; justify-content: space-between;
  padding: 22px 0; cursor: pointer;
  font-size: 1.05rem; font-weight: 600; color: var(--black);
  list-style: none;
}
.faq-question::-webkit-details-marker { display: none; }
.faq-question::after {
  content: "+"; font-size: 1.4rem; font-weight: 300;
  color: var(--saffron); transition: transform .2s;
}
.faq-item[open] .faq-question::after { content: "−"; }
.faq-answer { padding: 0 0 22px; }
.faq-answer p { font-size: .93rem; color: var(--ink); }

/* ── Testimonials grid ─────────────────── */
.testimonials-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 24px;
}
.testimonial-card {
  background: var(--white); border: 1px solid var(--rule);
  border-radius: var(--radius-lg); padding: 2rem;
  box-shadow: var(--shadow-sm); margin: 0;
}
.testimonial-card p {
  font-size: 1rem; font-style: italic;
  color: var(--ink); line-height: 1.7; margin-bottom: 16px;
}
.testimonial-card footer strong {
  display: block; font-size: .88rem; color: var(--black); font-style: normal;
}
.testimonial-card footer span {
  font-size: .78rem; color: var(--muted); font-style: normal;
}

/* ── Contact split ─────────────────────── */
.service-contact { background: var(--bg); }
.contact-split {
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: clamp(32px, 4vw, 64px);
  align-items: start;
}
.contact-info-side h2 { margin: 10px 0 16px; }
.contact-info-side p { max-width: 42ch; margin-bottom: 24px; }
.contact-highlights {
  list-style: none; padding: 0;
  display: flex; flex-direction: column; gap: 10px;
}
.contact-highlights li { font-size: .9rem; color: var(--ink); }

.contact-form-side {
  background: var(--card-bg, var(--white));
  border: 1px solid var(--card-border, var(--rule));
  border-radius: var(--radius-lg);
  padding: 2rem; box-shadow: var(--shadow-md);
}
.contact-form { display: grid; gap: 1rem; }
.contact-highlights li { font-size: .9rem; color: var(--text-primary, var(--ink)); }
.field { display: flex; flex-direction: column; gap: .4rem; }
.field label {
  font-size: .88rem; font-weight: 600; color: var(--text-primary, var(--black));
}
.field input,
.field textarea,
.field select {
  width: 100%; min-height: 48px;
  padding: .85rem 1rem;
  font-family: var(--font-body); font-size: .93rem;
  color: var(--text-primary, var(--ink)); border: 1px solid var(--border-light, var(--rule));
  border-radius: var(--radius); background: var(--bg-primary, var(--white));
  transition: border-color .18s, box-shadow .18s;
}
.field textarea { min-height: 120px; resize: vertical; }
.field input:focus,
.field textarea:focus,
.field select:focus {
  outline: none; border-color: var(--primary-color, var(--saffron));
  box-shadow: 0 0 0 3px rgba(74,107,106,.12);
}
.field .errorlist { margin: 0; padding: 0; color: #B00020; font-size: .85rem; list-style: none; }

/* ── Services grid (index & related) ───── */
.services-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 24px;
}
.service-grid-card {
  display: flex; flex-direction: column;
  background: var(--white);
  border: 1px solid var(--rule);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: transform .22s, box-shadow .22s;
}
.service-grid-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-md); }
.service-grid-img {
  width: 100%; height: 220px; overflow: hidden;
  background: var(--saffron-pale);
}
.service-grid-img img { width: 100%; height: 100%; object-fit: cover; }
.service-grid-img-placeholder {
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, #2A1A0E, #4A2C10);
}
.service-grid-img-placeholder span {
  font-size: .75rem; font-weight: 700; letter-spacing: .2em;
  text-transform: uppercase; color: var(--saffron-light);
}
.service-grid-body { padding: 1.5rem; flex: 1; display: flex; flex-direction: column; }
.service-grid-type {
  font-size: .68rem; font-weight: 700;
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--saffron); margin-bottom: 8px;
}
.service-grid-body h3 { margin-bottom: 8px; font-size: clamp(1.15rem, 2.5vw, 1.25rem); line-height: 1.18; overflow-wrap: anywhere; word-break: break-word; }
.service-grid-body p { flex: 1; font-size: .88rem; margin-bottom: 12px; }
.service-grid-price {
  font-family: var(--font-heading);
  font-size: 1.4rem; font-weight: 500; color: var(--saffron);
}

/* ══════════════════════════════════════════════
   HOMEPAGE SECTIONS
   ══════════════════════════════════════════════ */

/* ── Feature cards grid ──────────────────── */
.card-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px; background: var(--rule); border: 1px solid var(--rule);
}
.feature-card {
  background: var(--white);
  padding: 32px 28px 36px;
  transition: background .2s;
}
.feature-card:hover { background: var(--saffron-pale); }
.feature-card > span {
  display: block; font-size: .68rem; font-weight: 700;
  letter-spacing: .22em; text-transform: uppercase;
  color: var(--saffron); margin-bottom: 18px;
}
.feature-card h3 { font-size: 1.45rem; margin-bottom: 12px; }
.feature-card p { font-size: .85rem; }
.feature-card-img {
  width: 100%; aspect-ratio: 4 / 5;
  background: var(--saffron-pale); margin-bottom: 18px;
  overflow: hidden; position: relative;
}
.feature-card-img::after {
  content: attr(data-label);
  position: absolute; top: 10px; left: 10px;
  background: var(--saffron); color: #fff;
  font-size: .6rem; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase;
  padding: 4px 10px;
}
.card-grid-footer { text-align: center; padding: 40px 0 0; }

/* ── Highlight strip ─────────────────────── */
.highlight-strip { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 28px; }
.highlight-strip span {
  padding: 6px 14px; font-size: .72rem; font-weight: 600;
  letter-spacing: .12em; text-transform: uppercase;
  border: 1px solid var(--rule); color: var(--muted);
  background: var(--white); transition: border-color .18s, color .18s;
}
.highlight-strip span:hover { border-color: var(--saffron); color: var(--saffron); }

/* ── Split section ───────────────────────── */
.split-section {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: clamp(40px, 6vw, 90px); align-items: center;
}
.split-image-placeholder {
  width: 100%; aspect-ratio: 4/5; position: relative;
  background: linear-gradient(160deg, #2A1A0E 0%, #5A3218 60%, #2E1A08 100%);
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
}
.split-image-placeholder::before {
  content: ""; inset: 0; position: absolute;
  background: radial-gradient(circle at 50% 50%, rgba(74,107,106,.25) 0%, transparent 60%);
}
.split-image-glyph {
  font-size: 6rem; opacity: .22; color: var(--saffron-light);
  position: relative; z-index: 1;
}
.split-image-badge {
  position: absolute; bottom: 28px; right: -16px;
  background: var(--white); border: 1px solid var(--rule);
  padding: 14px 18px; text-align: center; min-width: 90px;
}
.split-image-badge strong {
  display: block; font-family: var(--font-heading);
  font-size: 2rem; font-weight: 500; color: var(--saffron); line-height: 1;
}
.split-image-badge span {
  font-size: .65rem; letter-spacing: .14em;
  text-transform: uppercase; color: var(--muted);
}
.split-copy { padding: 20px 0; }
.split-copy h2 { margin: 8px 0 20px; }
.split-copy p { max-width: 44ch; margin-bottom: 16px; }
.split-features {
  display: flex; gap: 32px; margin: 28px 0 32px;
  padding-top: 28px; border-top: 1px solid var(--rule);
}
.split-feature-item { display: flex; flex-direction: column; gap: 6px; }
.split-feature-icon { font-size: 1.25rem; color: var(--saffron); }
.split-feature-item strong { font-size: .78rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--black); }
.split-feature-item span { font-size: .72rem; color: var(--light); }

.bullet-list {
  list-style: none; padding: 0;
  display: flex; flex-direction: column; gap: 10px; margin-bottom: 28px;
}

/* ── Page layout utilities ───────────────────────────── */
.section-heading {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 32px;
}
.section-heading .eyebrow {
  font-size: .75rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--saffron);
}
.section-heading h2 {
  font-family: var(--font-heading);
  font-size: clamp(2rem, 4vw, 3rem);
  line-height: 1.05;
  margin: 0;
}

.page-card {
  background: var(--white);
  border-radius: 24px;
  box-shadow: 0 20px 50px rgba(0,0,0,.08);
  padding: 2.5rem;
  margin: 0 auto;
  max-width: 740px;
}

.page-form .form-field,
.k-field {
  display: flex;
  flex-direction: column;
  gap: .5rem;
  margin-bottom: 1.25rem;
}

.page-form label,
.k-field label {
  font-size: .82rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--text-primary, var(--black));
}

.page-form input,
.page-form select,
.page-form textarea,
.k-field input,
.k-field select,
.k-field textarea {
  width: 100%;
  padding: .9rem 1rem;
  border: 1.5px solid var(--border-light, var(--rule));
  border-radius: 12px;
  font-family: var(--font-body);
  font-size: .95rem;
  color: var(--text-primary, var(--ink));
  background: var(--bg-primary, #fafafa);
  outline: none;
  transition: border-color .2s, background .2s;
}

.page-form input:focus,
.page-form select:focus,
.page-form textarea:focus,
.k-field input:focus,
.k-field select:focus,
.k-field textarea:focus {
  border-color: var(--primary-color, var(--saffron));
  background: var(--bg-primary, #fff);
}

.page-form .field-errors,
.page-form .k-error,
.k-field .k-error {
  color: #dc2626;
  font-size: .85rem;
}

.page-form .form-actions {
  display: flex;
  justify-content: flex-start;
  gap: 1rem;
  flex-wrap: wrap;
  margin-top: 1.5rem;
}

.page-form .button-primary,
.page-form .button-secondary {
  min-width: 180px;
}

.k-alert {
  margin: 1.5rem auto;
  max-width: 740px;
  border-radius: 16px;
  padding: 1rem 1.25rem;
}
.k-alert-info { background: #eff6ff; border: 1px solid #bfdbfe; color: #1d4ed8; }
.k-alert-warning { background: #fffbeb; border: 1px solid #fde68a; color: #92400e; }
.k-alert-success { background: #f0fdf4; border: 1px solid #bbf7d0; color: #166534; }
.k-alert-error { background: #fef2f2; border: 1px solid #fecaca; color: #991b1b; }

/* ── Prose content (terms, privacy, etc.) ── */
.prose-content { font-size: 1rem; color: var(--ink); line-height: 1.8; }
.prose-content section { margin-bottom: 2.5rem; }
.prose-content h2 { font-family: var(--font-heading); font-size: 1.5rem; font-weight: 600; color: var(--black); margin: 0 0 .75rem; }
.prose-content p { margin: 0 0 .85rem; }
.prose-content ul, .prose-content ol { padding-left: 1.5rem; margin-bottom: .85rem; }
.prose-content li { margin-bottom: .35rem; }
.k-divider { border-top: 1px solid var(--rule); margin: 2rem 0; }
.k-city-wrap { position: relative; }
.k-suggestions { position: absolute; top: 100%; left: 0; right: 0; background: #fff; border: 1.5px solid var(--rule); border-radius: 12px; box-shadow: 0 8px 24px rgba(0,0,0,.1); z-index: 100; display: none; max-height: 220px; overflow-y: auto; }
.k-sug-item { padding: .6rem .85rem; font-size: .95rem; cursor: pointer; color: var(--ink); border-bottom: 1px solid #f0f0ee; }
.k-sug-item:last-child { border-bottom: none; }
.k-sug-item:hover { background: var(--saffron-pale); }

@media(max-width:900px){
  .split-section { grid-template-columns: 1fr; }
}
.bullet-list li {
  display: flex; align-items: flex-start; gap: 12px;
  font-size: .88rem; color: var(--muted); line-height: 1.6;
}
.bullet-list li::before { content: "—"; color: var(--saffron); flex-shrink: 0; font-weight: 700; }

/* ── Collections ─────────────────────────── */
.collection-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px;
}
.collection-card {
  position: relative; overflow: hidden; aspect-ratio: 3/4; cursor: pointer; border-radius: var(--radius);
}
.collection-card-bg {
  position: absolute; inset: 0; transition: transform .5s;
}
.collection-card:hover .collection-card-bg { transform: scale(1.04); }
.collection-card-light .collection-card-bg { background: linear-gradient(180deg, #3D1F08, #7A3C10 40%, #3D1F08); }
.collection-card-dark .collection-card-bg  { background: linear-gradient(180deg, #0F0F0F, #2A1A0E 50%, #0F0F0F); }
.collection-card-mid .collection-card-bg   { background: linear-gradient(180deg, #1E1510, #4A3020 50%, #1E1510); }
.collection-card::before {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(0deg, rgba(0,0,0,.7) 0%, rgba(0,0,0,.1) 60%, transparent);
}
.collection-card::after {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background: radial-gradient(circle at 50% 30%, rgba(74,107,106,.2) 0%, transparent 60%);
}
.collection-card-body {
  position: absolute; bottom: 0; left: 0; right: 0;
  padding: 28px 24px; z-index: 2;
}
.collection-card-body > span {
  display: block; font-size: .65rem; font-weight: 700;
  letter-spacing: .28em; text-transform: uppercase;
  color: var(--saffron-light); margin-bottom: 8px;
}
.collection-card-body > strong {
  display: block; font-family: var(--font-heading);
  font-size: 1.55rem; font-weight: 500; color: var(--white); line-height: 1.15;
}

/* ── Report banner ───────────────────────── */
.report-banner {
  display: grid; grid-template-columns: 1fr auto;
  align-items: center; gap: 32px; padding: 40px 44px;
  background: var(--saffron-pale);
  border: 1px solid rgba(74,107,106,.2);
  border-radius: var(--radius);
}
.report-banner h3 {
  font-size: clamp(1.3rem, 2.5vw, 1.8rem); font-weight: 500;
  color: var(--black); margin-bottom: 8px;
}

/* ── Membership (dark) section ───────────── */
.membership-section {
  display: grid; grid-template-columns: 1fr 1fr;
  min-height: 520px; background: var(--charcoal);
}
.membership-content {
  display: flex; flex-direction: column; justify-content: center;
  padding: clamp(40px, 7vw, 80px);
}
.membership-content .eyebrow { color: var(--saffron-light); }
.membership-content h2 { color: var(--white); margin: 12px 0 20px; }
.membership-content h2 em { color: var(--saffron); }
.membership-content p { color: rgba(255,255,255,.55); max-width: 40ch; margin-bottom: 28px; }
.membership-list {
  list-style: none; padding: 0;
  display: flex; flex-direction: column; gap: 10px; margin-bottom: 36px;
}
.membership-list li {
  display: flex; align-items: center; gap: 10px;
  font-size: .88rem; color: rgba(255,255,255,.7);
}
.membership-list li::before { content: "✓"; color: var(--saffron); font-weight: 700; flex-shrink: 0; }
.membership-image {
  position: relative; overflow: hidden;
  background: linear-gradient(160deg, #1A0E05, #3D1F08 60%, #1A0E05);
}
.membership-image::before {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(circle at 50% 40%, rgba(74,107,106,.3) 0%, transparent 60%);
}
.membership-image-glyph {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);
  font-size: clamp(6rem, 14vw, 12rem); opacity: .15; color: var(--saffron-light); user-select: none;
}
.membership-badge {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);
  background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.2);
  backdrop-filter: blur(8px); padding: 20px 28px; text-align: center; min-width: 130px;
}
.membership-badge span {
  display: block; font-size: .65rem; font-weight: 700;
  letter-spacing: .22em; text-transform: uppercase;
  color: var(--saffron-light); margin-bottom: 8px;
}
.membership-badge strong {
  font-family: var(--font-heading);
  font-size: 1.4rem; font-weight: 500; color: var(--white);
}

/* ── Subscribe section ───────────────────── */
.subscribe-section { padding: clamp(56px, 8vw, 88px) 0; text-align: center; }
.subscribe-section h2 { margin-bottom: 12px; }
.subscribe-section p { max-width: 44ch; margin: 0 auto 28px; }
.subscribe-form {
  display: flex; max-width: 480px; margin: 0 auto; border: 1px solid var(--rule);
  border-radius: var(--radius); overflow: hidden;
}
.subscribe-form input {
  flex: 1; padding: 14px 20px; font-size: .88rem;
  font-family: var(--font-body); border: none; outline: none;
  background: var(--white); color: var(--ink);
}
.subscribe-form input::placeholder { color: var(--light); }
.subscribe-form button {
  padding: 14px 24px; background: var(--black); color: var(--white);
  font-size: .72rem; font-weight: 700; letter-spacing: .14em;
  text-transform: uppercase; border: none; cursor: pointer;
  font-family: var(--font-body); transition: background .18s; white-space: nowrap;
}
.subscribe-form button:hover { background: var(--saffron); }

/* ── Subcard grid (tags) ─────────────────── */
.subcard-grid {
  display: flex; gap: 10px; flex-wrap: wrap;
  padding-top: 28px; border-top: 1px solid var(--rule); margin-top: 28px;
}
.subcard {
  padding: 8px 16px; font-size: .72rem; font-weight: 600;
  letter-spacing: .12em; text-transform: uppercase;
  border: 1px solid var(--rule); color: var(--muted);
  background: var(--white); transition: .18s; cursor: pointer;
  border-radius: 4px;
}
.subcard:hover { border-color: var(--saffron); color: var(--saffron); background: var(--saffron-pale); }

/* ══════════════════════════════════════════════
   SHOP / PRODUCT PAGES (inline styles override)
   ══════════════════════════════════════════════ */
.product-detail-page { background: var(--bg); min-height: 100vh; }
.product-detail-hero {
  position: relative; min-height: 400px;
  display: flex; align-items: center;
  background: var(--charcoal) center / cover no-repeat;
}
.product-detail-hero::before {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(10,10,10,.35), rgba(10,10,10,.68));
}
.page-hero {
  position: relative;
  min-height: 520px;
  display: flex;
  align-items: center;
  background: var(--charcoal) center / cover no-repeat;
  overflow: hidden;
}
.page-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(10,10,10,.35), rgba(10,10,10,.72));
}
.page-hero-inner,
.product-hero-inner {
  position: relative; z-index: 1;
  max-width: 760px; padding: clamp(40px, 4vw, 72px) clamp(20px, 3vw, 48px);
  color: var(--white);
}
.page-hero-inner h1,
.product-hero-inner h1 {
  font-size: clamp(2.2rem, 4.5vw, 4.2rem);
  line-height: 1.05;
  margin-bottom: 12px;
  max-width: 80ch;
  overflow-wrap: anywhere;
  word-break: break-word;
  hyphens: auto;
}
.product-hero-inner .section-label,
.page-hero-inner .eyebrow {
  color: rgba(255,255,255,.82); letter-spacing: .2em;
  text-transform: uppercase; font-size: .78rem; margin-bottom: 12px;
}
.page-hero-inner p,
.product-hero-inner p { max-width: 46ch; color: rgba(255,255,255,.9); }
.product-detail-hero { min-height: min(58vh, 520px); }
.detail-image { width: 100%; max-height: 580px; object-fit: cover; }

/* ── Product detail grid ─────────────────── */
.product-detail-grid {
  display: grid; grid-template-columns: 1.6fr 1fr; gap: 1.5rem;
}
.product-detail-main {
  background: var(--white); border-radius: var(--radius-lg);
  overflow: hidden; box-shadow: var(--shadow-md);
}
.detail-image { width: 100%; max-height: 580px; object-fit: cover; }
.product-gallery { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.product-body { padding: 1.75rem; }
.product-body h2 { margin-top: 0; }
.product-specs {
  display: grid; grid-template-columns: 120px 1fr;
  gap: .85rem; font-size: .95rem; color: var(--muted);
}
.product-specs dt { font-weight: 700; color: var(--black); }
.product-detail-sidebar { display: flex; flex-direction: column; gap: 1rem; }

.product-card {
  background: var(--white); border: 1px solid var(--rule);
  border-radius: var(--radius-lg); padding: 1.5rem;
  box-shadow: var(--shadow-md); position: sticky; top: 96px;
}
.product-price-large {
  font-family: var(--font-heading);
  font-size: 2.4rem; font-weight: 500; color: var(--saffron);
}
.product-stock { font-size: .88rem; color: green; margin-bottom: 16px; }
.product-qty {
  width: 100%; padding: .7rem; border: 1px solid var(--rule);
  border-radius: var(--radius); font-size: .95rem; margin-bottom: .5rem;
}
.product-login-prompt { text-align: center; }
.product-login-prompt p { margin-bottom: 16px; }
.product-login-prompt .button { margin-bottom: 8px; }

/* ══════════════════════════════════════════════
   CONTACT PAGE
   ══════════════════════════════════════════════ */
.contact-page { padding: 3.5rem 0 5rem; background: var(--bg); }
.contact-grid {
  display: grid; grid-template-columns: minmax(240px, 1fr) minmax(340px, 1.25fr);
  gap: 2rem; align-items: start;
}
.contact-panel,
.contact-card {
  background: var(--white); border: 1px solid var(--rule);
  border-radius: var(--radius-lg); padding: 2rem; box-shadow: var(--shadow-md);
}
.contact-panel h1 { margin: 0; font-size: clamp(2.1rem, 4vw, 3.2rem); line-height: 1.05; }
.contact-panel-meta { display: grid; gap: 1rem; margin-top: 1.5rem; }
.contact-panel-meta strong {
  display: block; margin-bottom: .4rem; font-size: .78rem;
  letter-spacing: .18em; text-transform: uppercase; color: var(--saffron);
}
.contact-panel-meta a { border-bottom: 1px dotted var(--saffron); }
.contact-card-header h2 { margin: 0 0 .75rem; font-size: clamp(1.85rem, 3vw, 2.3rem); }

/* ══════════════════════════════════════════════
   FOOTER
   ══════════════════════════════════════════════ */
.site-footer {
  padding: clamp(48px, 6vw, 80px) 0 32px;
  border-top: 1px solid var(--rule); background: var(--bg);
}
.footer-grid {
  display: grid; grid-template-columns: 1.6fr 1fr 1fr;
  gap: 48px; margin-bottom: 48px;
}
.footer-brand {
  font-family: var(--font-body); font-size: .82rem;
  font-weight: 700; letter-spacing: .22em; text-transform: uppercase;
  color: var(--black); margin-bottom: 14px;
}
.footer-brand span { color: var(--saffron); }
.site-footer p { font-size: .85rem; color: var(--muted); max-width: 30ch; line-height: 1.65; }
.footer-links-col h4 {
  font-family: var(--font-body); font-size: .68rem; font-weight: 700;
  letter-spacing: .2em; text-transform: uppercase; color: var(--black); margin-bottom: 16px;
}
.footer-links-col a { display: block; font-size: .88rem; color: var(--muted); margin-bottom: 10px; transition: color .15s; }
.footer-links-col a:hover { color: var(--saffron); }
.footer-base {
  padding-top: 24px; border-top: 1px solid var(--rule);
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
}
.footer-base p { font-size: .75rem; color: var(--light); margin: 0; }
.footer-base a { color: var(--muted); }
.footer-base a:hover { color: var(--saffron); }

/* ── Footer currency switcher ────────── */
.footer-currency {
  display: flex; align-items: center; gap: 6px;
}
.footer-currency label { color: var(--muted); font-size: .88rem; }
.footer-currency select {
  padding: 4px 8px; border: 1px solid var(--rule); border-radius: 6px;
  font-family: var(--font-body); font-size: .8rem; color: var(--ink);
  background: var(--white); cursor: pointer;
}

/* ── Header currency switcher ────────── */
.header-currency {
  display: flex; align-items: center; gap: 6px;
}
.header-currency label { color: var(--muted); font-size: .88rem; }
.header-currency select {
  padding: 6px 10px; border: 1px solid var(--rule); border-radius: 6px;
  font-family: var(--font-body); font-size: .85rem; color: var(--ink);
  background: var(--white); cursor: pointer;
  min-width: 80px;
}

/* ══════════════════════════════════════════════
   SHOP PAGE (overrides for product_list.html)
   ══════════════════════════════════════════════ */

/* ── Search results cards ────────────── */
.search-cards { display: grid; gap: 12px; }
.search-card {
  display: flex; align-items: center; gap: 16px;
  background: var(--white); border: 1px solid var(--rule);
  border-radius: var(--radius); padding: 16px 20px;
  transition: border-color .18s, box-shadow .18s;
  text-decoration: none; color: inherit;
}
.search-card:hover { border-color: var(--saffron); box-shadow: var(--shadow-sm); }
.search-card-icon {
  width: 48px; height: 48px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%; background: var(--saffron-pale); color: var(--saffron);
  font-size: 1.1rem;
}
.search-card-body { flex: 1; min-width: 0; }
.search-card-body h3 { font-size: 1.1rem; margin-bottom: 4px; }
.search-card-body p { font-size: .85rem; color: var(--muted); margin: 0; }
.search-card-arrow { color: var(--light); transition: color .18s; }
.search-card:hover .search-card-arrow { color: var(--saffron); }

.search-product-card {
  display: flex; flex-direction: column;
  background: var(--white); border: 1px solid var(--rule);
  border-radius: var(--radius-lg); overflow: hidden;
  transition: transform .22s, box-shadow .22s;
  text-decoration: none; color: inherit;
}
.search-product-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.search-product-img { width: 100%; height: 180px; overflow: hidden; background: var(--saffron-pale); }
.search-product-img img { width: 100%; height: 100%; object-fit: cover; }
.search-product-placeholder {
  display: flex; align-items: center; justify-content: center;
  width: 100%; height: 100%;
  background: linear-gradient(135deg, #2A1A0E, #4A2C10);
  color: var(--saffron-light); font-size: 2.5rem;
}
.search-product-body { padding: 1.25rem; flex: 1; display: flex; flex-direction: column; }
.search-product-type {
  font-size: .68rem; font-weight: 700;
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--saffron); margin-bottom: 6px;
}
.search-product-body h3 { font-size: 1.12rem; margin-bottom: 6px; }
.search-product-body p { font-size: .85rem; color: var(--muted); flex: 1; margin: 0 0 10px; }
.search-product-price {
  font-family: var(--font-heading);
  font-size: 1.3rem; font-weight: 500; color: var(--saffron);
}

.shop-page { background: var(--bg); min-height: 100vh; }
.shop-hero {
  position: relative; background: var(--charcoal); color: #fff;
  padding: 3.5rem 1.5rem; text-align: center;
}
.shop-hero h1 { font-family: var(--font-heading); font-size: clamp(2.2rem, 4.5vw, 3rem); font-weight: 700; font-style: normal; margin: .75rem 0; letter-spacing: -.02em; max-width: 80ch; overflow-wrap: anywhere; word-break: break-word; margin-left: auto; margin-right: auto; }
.product-toolbar { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; margin-bottom: 1.5rem; }
.product-filters { display: flex; flex-wrap: wrap; gap: .6rem; }
.filter-pill {
  padding: .55rem 1rem; border-radius: 999px;
  border: 1px solid var(--rule); color: var(--ink);
  font-size: .88rem; transition: .18s;
}
.filter-pill:hover { border-color: var(--saffron); color: var(--saffron); }
.filter-pill.active { background: var(--charcoal); color: #fff; border-color: var(--charcoal); }
.product-grid {
  display: grid; grid-template-columns: repeat(3, minmax(240px, 1fr)); gap: 24px;
}

/* ══════════════════════════════════════════════
   RESPONSIVE
   ══════════════════════════════════════════════ */
@media (max-width: 1100px) {
  .header-search input { width: 130px; }
  .header-search input:focus { width: 170px; }
}

@media (max-width: 960px) {
  .mobile-toggle { display: flex; }
  .site-nav {
    position: fixed; top: 64px; left: 0; right: 0;
    background: var(--white); border-bottom: 1px solid var(--rule);
    box-shadow: var(--shadow-md);
    max-height: 0; overflow: hidden;
    transition: max-height .35s ease;
    z-index: 1200;
  }
  .site-nav.open { max-height: 80vh; overflow-y: auto; }
  .nav-list {
    flex-direction: column; align-items: stretch;
    padding: 16px 0; gap: 0;
  }
  .nav-item > a {
    padding: 14px clamp(20px, 4vw, 40px); font-size: .85rem;
    border-bottom: 1px solid var(--rule);
  }
  .has-dropdown .dropdown-menu {
    position: static; opacity: 1; visibility: visible;
    transform: none; box-shadow: none; border: none;
    border-radius: 0; padding: 0; min-width: auto;
    background: var(--saffron-pale);
  }
  .dropdown-menu li a { padding: 12px clamp(32px, 6vw, 56px); }
  .header-actions { gap: 10px; }
  .header-search { display: none; }
  .header-search-mobile { display: flex; }

  .hero { grid-template-columns: 1fr; min-height: auto; }
  .hero-image-panel { display: none; }
  .service-about-grid { grid-template-columns: 1fr; }
  .contact-split { grid-template-columns: 1fr; }
  .contact-grid { grid-template-columns: 1fr; }
  .split-section { grid-template-columns: 1fr; }
  .split-image-placeholder { display: none; }
  .membership-section { grid-template-columns: 1fr; }
  .membership-image { display: none; }
  .product-detail-grid { grid-template-columns: 1fr; }
  .product-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 768px) {
  .card-grid { grid-template-columns: repeat(2, 1fr); }
  .collection-grid { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; gap: 32px; }
  .features-grid { grid-template-columns: 1fr; }
  .testimonials-grid { grid-template-columns: 1fr; }
  .services-grid { grid-template-columns: 1fr; }
  .report-banner { grid-template-columns: 1fr; text-align: center; }
}

@media (max-width: 560px) {
  .card-grid { grid-template-columns: 1fr; }
  .product-grid { grid-template-columns: 1fr; }
  .hero-stats { gap: 20px; flex-wrap: wrap; }
  .footer-base { flex-direction: column; text-align: center; }
  .nav-auth { gap: 8px; }
  .nav-auth-link { max-width: 100px; }
}

/* ===== DASHBOARD ===== */

/* ── PAGE SHELL ───────────────────────────── */
.dashboard-page .site-footer { display: none; }
/* dash-wrap uses a div.dash-main — NOT nested <main> — so no specificity clash */

.dash-wrap {
  display: flex;
  min-height: calc(100vh - 64px);
  background: #f4f5f7;
  width: 100%;
  box-sizing: border-box;
  font-family: var(--font-body);
}

/* ── SIDEBAR ──────────────────────────────── */
.dash-sidebar {
  width: 256px;
  background: #1c2424;  /* Always dark — avoids light-theme wash-out */
  color: rgba(255,255,255,.75);
  display: flex;
  flex-direction: column;
  position: fixed;
  top: 64px;
  left: -256px;
  bottom: 0;
  overflow-y: auto;
  overflow-x: hidden;
  z-index: 310;
  flex-shrink: 0;
  box-shadow: 4px 0 24px rgba(0,0,0,0.28);
  transition: left .25s cubic-bezier(.4,0,.2,1);
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,0.1) transparent;
}
.dash-sidebar::-webkit-scrollbar { width: 4px; }
.dash-sidebar::-webkit-scrollbar-track { background: transparent; }
.dash-sidebar::-webkit-scrollbar-thumb { background: rgba(255,255,255,.1); border-radius: 4px; }

/* Desktop: always-visible sidebar */
@media (min-width: 1024px) {
  .dash-sidebar {
    left: 0;
    position: fixed;
  }
  .dash-main {
    margin-left: 256px !important;
  }
  /* hide mobile hamburger on desktop */
  .dash-menu-toggle { display: none; }
}

.dash-sidebar.open { left: 0; }

/* ── SIDEBAR HEADER ───────────────────────── */
.dash-sidebar-head {
  display: flex;
  align-items: center;
  gap: .8rem;
  padding: 1.4rem 1rem 1rem;
  border-bottom: 1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.03);
  flex-shrink: 0;
}
.dash-avatar {
  width: 42px; height: 42px; border-radius: 10px;
  background: linear-gradient(135deg, #4A6B6A, #2E4E4D);
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 1.1rem; color: #fff; flex-shrink: 0;
  box-shadow: 0 2px 8px rgba(74,107,106,.4);
}
.dash-avatar i { display: block; width: 100%; text-align: center; line-height: 1; }
.dash-user-info {
  display: flex; flex-direction: column; min-width: 0;
}
.dash-user-name {
  font-weight: 600; font-size: .88rem; color: #f0f0f0;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 158px;
}
.dash-user-email {
  font-size: .7rem; color: #8899aa; margin-top: .1rem;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 158px;
}

/* ── SIDEBAR NAV ──────────────────────────── */
.dash-nav {
  flex: 1; padding: .6rem 0; overflow-y: auto; overflow-x: hidden;
}
.dash-nav-label {
  display: block; font-size: .6rem; text-transform: uppercase;
  color: rgba(255,255,255,.5); letter-spacing: .12rem;
  padding: .45rem .9rem .12rem; font-weight: 700;
}
.dash-nav-item {
  display: flex; align-items: center; gap: .7rem; padding: .45rem 1rem;
  color: #c8d8d7; text-decoration: none; font-size: .84rem; font-weight: 500;
  border-left: 3px solid transparent;
  transition: background .15s, color .15s, border-left-color .15s;
  line-height: 1.3;
}
.dash-nav-item:hover {
  background: rgba(255,255,255,.06);
  color: #e2e8f0;
  border-left-color: rgba(74,107,106,.4);
}
.dash-nav-item.active {
  background: rgba(74,107,106,.14);
  color: #4A6B6A;
  border-left-color: #4A6B6A;
  font-weight: 600;
}
.dash-nav-item i {
  width: 18px; text-align: center; font-size: .82rem;
  color: rgba(255,255,255,.65); flex-shrink: 0;
}
.dash-nav-item.active i { color: #4A6B6A; }
.dash-nav-item:hover i { color: rgba(255,255,255,.9); }
.dash-nav-item.clr-red { color: #f87171; }
.dash-nav-item.clr-red:hover { color: #ef4444; background: rgba(239,68,68,.07); }

/* ── SIDEBAR FOOTER ───────────────────────── */
.dash-sidebar-foot {
  padding: .85rem 1rem;
  border-top: 1px solid rgba(255,255,255,.08);
  display: flex; flex-direction: column; gap: .35rem;
  background: rgba(0,0,0,.18);
  flex-shrink: 0;
}
.dash-currency-pill {
  display: inline-flex; align-items: center; gap: .4rem;
  background: rgba(255,255,255,.07); color: #99a; padding: .25rem .7rem;
  border-radius: 20px; font-size: .72rem; width: fit-content;
}

.dash-nav-submenu { background: rgba(255,255,255,.03); padding: .25rem 0; }
.dash-nav-submenu .submenu-body { padding: .5rem 1.5rem; }
.dash-nav-submenu .submenu-body div { margin: .35rem 0; font-size: .8rem; }
.dash-nav-submenu .submenu-body a { color: #aaa; text-decoration: none; font-weight: 400; }

/* backdrop overlay (mobile only) */
.dash-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,.45); z-index: 300; }
.dash-overlay.active { display: block; }
@media (min-width: 1024px) { .dash-overlay { display: none !important; } }

/* ── MAIN CONTENT AREA ────────────────────── */
.dash-main {
  flex: 1; min-width: 0; width: 100%;
  padding: calc(64px + 1.25rem) 1.75rem 3rem;
  font-family: var(--font-body);
  transition: margin-left .25s cubic-bezier(.4,0,.2,1);
}
/* Mobile: shift when sidebar open */
.dash-wrap.sidebar-open .dash-main { margin-left: 256px; }

/* ── TOPBAR ───────────────────────────────── */
.dash-topbar {
  display: flex; align-items: center; gap: .85rem;
  padding: .85rem 0;
  border-bottom: 1px solid #e5e7eb;
  margin-bottom: 1.75rem;
  position: sticky; top: 64px;
  background: #f4f5f7;
  z-index: 50;
}
.dash-topbar-title {
  font-size: 1.15rem; font-weight: 600; color: #1a1a2e; flex: 1;
  font-family: var(--font-heading);
}
.dash-topbar-cta {
  display: flex; align-items: center; gap: .4rem;
  padding: .5rem 1.15rem; background: #4A6B6A; color: #fff;
  border-radius: 8px; font-size: .82rem; font-weight: 600;
  text-decoration: none; white-space: nowrap; flex-shrink: 0;
  transition: background .18s, transform .15s;
  box-shadow: 0 2px 8px rgba(74,107,106,.35);
}
.dash-topbar-cta:hover { background: #2E4E4D; color: #fff; transform: translateY(-1px); }

/* hamburger — shown only on mobile */
.dash-menu-toggle {
  display: flex; flex-direction: column; align-items: center;
  justify-content: center; gap: 5px;
  background: #1e1e2e; color: #fff; border: none;
  border-radius: 8px; width: 40px; height: 40px; cursor: pointer;
  box-shadow: 0 2px 8px rgba(0,0,0,.18); flex-shrink: 0;
  transition: background .18s;
}
.dash-menu-toggle:hover { background: #333; }
.dash-menu-toggle span {
  display: block; width: 18px; height: 2px; background: #e0e0e0;
  border-radius: 2px; transition: transform .22s, opacity .22s;
}
.dash-menu-toggle.sidebar-open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.dash-menu-toggle.sidebar-open span:nth-child(2) { opacity: 0; transform: scaleX(0); }
.dash-menu-toggle.sidebar-open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ── STAT CARDS ───────────────────────────── */
.dash-stats {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(180px,1fr));
  gap: 1rem; margin-bottom: 1.75rem;
}
.dash-stat-card {
  background: #fff; border-radius: 14px; padding: 1.1rem;
  box-shadow: 0 1px 4px rgba(0,0,0,.06), 0 4px 12px rgba(0,0,0,.04);
  display: flex; align-items: center; gap: .85rem;
  border: none; cursor: pointer; text-decoration: none; color: inherit;
  transition: box-shadow .18s, transform .12s;
}
.dash-stat-card:hover {
  box-shadow: 0 4px 16px rgba(0,0,0,.11); transform: translateY(-2px);
  text-decoration: none; color: inherit;
}
.dash-stat-icon {
  font-size: 1.35rem; width: 46px; height: 46px; border-radius: 10px;
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.dash-stat-val {
  font-size: 1.75rem; font-weight: 600; color: #1a1a1a;
  line-height: 1.1; font-family: var(--font-heading);
}
.dash-stat-label {
  font-size: .68rem; color: #888; text-transform: uppercase;
  letter-spacing: .06rem; margin-top: .1rem;
}

/* colour tokens */
.clr-saffron { color: #4A6B6A; background: #EBE8E0 !important; }
.clr-purple  { color: #4A6B6A; background: #F5F0E8 !important; }
.clr-blue    { color: #2563eb; background: #eff6ff !important; }
.clr-green   { color: #16a34a; background: #f0fdf4 !important; }

/* Make Saved Charts tile span the full stat grid row */
.dash-stat-card.saved-chart {
  grid-column: 1 / -1;
  background: linear-gradient(90deg, rgba(74,107,106,0.04), rgba(255,255,255,0));
  border: 1px solid rgba(74,107,106,0.06);
  box-shadow: 0 6px 18px rgba(74,107,106,0.04);
}

/* ── ACTIVE BLOCK (primary chart banner) ──── */
.dash-active-block {
  display: flex; align-items: center; justify-content: space-between;
  background: linear-gradient(135deg,#F5F0E8,#EBE8E0);
  border: 1px solid rgba(74,107,106,.2); border-radius: 14px;
  padding: 1rem 1.25rem; margin-bottom: 1.5rem; gap: 1rem; flex-wrap: wrap;
}
.dash-active-left { display: flex; align-items: center; gap: .9rem; }
.dash-active-icon {
  width: 46px; height: 46px; border-radius: 50%;
  background: linear-gradient(135deg,#4A6B6A,#2E4E4D);
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-size: 1.15rem; flex-shrink: 0;
}
.dash-active-left strong { display: block; font-size: .95rem; font-weight: 500; color: #1a1a1a; font-family: var(--font-heading); }
.dash-active-left span { display: block; font-size: .8rem; color: #666; margin-top: .1rem; }
.dash-active-actions { display: flex; gap: .5rem; flex-wrap: wrap; align-items: center; }

/* ── CARDS ────────────────────────────────── */
.dash-card {
  background: #fff; border-radius: 14px; padding: 1.25rem;
  box-shadow: 0 1px 4px rgba(0,0,0,.06), 0 4px 12px rgba(0,0,0,.03);
  margin-bottom: 1.1rem;
}
.dash-card-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: .85rem; }
.dash-card-head h3 { font-size: .95rem; font-weight: 600; display: flex; align-items: center; gap: .5rem; margin: 0; color: #1a1a1a; font-family: var(--font-heading); }
.dash-link { font-size: .8rem; color: #4A6B6A; text-decoration: none; font-weight: 500; }
.dash-link:hover { text-decoration: underline; }

/* ── LIST ITEMS ───────────────────────────── */
.dash-list-item { display: flex; justify-content: space-between; align-items: center; padding: .8rem 0; border-bottom: 1px solid #f0f0f4; }
.dash-list-item:last-child { border-bottom: none; }
.dash-list-sub { font-size: .76rem; color: #888; margin-top: .15rem; }

/* ── QUICK ACTION TILES ───────────────────── */
.dash-quick-item {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: .45rem; background: #F5F0E8; border: 1.5px solid #EBE8E0; border-radius: 12px;
  padding: .9rem .5rem; color: #2E4E4D; text-decoration: none;
  font-size: .8rem; font-weight: 600;
  transition: background .18s, box-shadow .18s, transform .18s;
}
.dash-quick-item:hover { background: #EBE8E0; box-shadow: 0 2px 10px rgba(74,107,106,.12); transform: translateY(-2px); }
.dash-quick-item i { font-size: 1.4rem; }
.dash-quick-btn { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .45rem; background: #F5F0E8; border: 1.5px solid #EBE8E0; border-radius: 12px; padding: .9rem .5rem; color: #2E4E4D; text-decoration: none; font-size: .8rem; font-weight: 600; transition: background .18s,box-shadow .18s,transform .18s; }
.dash-quick-btn:hover { background: #EBE8E0; box-shadow: 0 2px 10px rgba(74,107,106,.12); transform: translateY(-2px); }
.dash-quick-btn i { font-size: 1.4rem; }

/* ── BADGES ───────────────────────────────── */
.dash-badge { display: inline-block; font-size: .66rem; font-weight: 600; text-transform: uppercase; padding: .15rem .55rem; border-radius: 20px; margin-left: .4rem; }
.dash-badge-green  { background: #d1fae5; color: #065f46; }
.dash-badge-yellow { background: #EBE8E0; color: #92400e; }
.dash-badge-red    { background: #fee2e2; color: #991b1b; }
.dash-badge-grey   { background: #f3f4f6; color: #6b7280; }

/* ── BUTTONS ──────────────────────────────── */
.btn-sm { display: inline-flex; align-items: center; gap: .35rem; padding: .45rem 1rem; border-radius: 8px; font-size: .8rem; font-weight: 600; cursor: pointer; text-decoration: none; border: none; transition: all .18s; line-height: 1.4; }
.btn-primary { background: #4A6B6A; color: #fff; }
.btn-primary:hover { background: #2E4E4D; color: #fff; }
.btn-outline { background: transparent; border: 1.5px solid #4A6B6A; color: #4A6B6A; }
.btn-outline:hover { background: #4A6B6A; color: #fff; }
.btn-purple  { background: #4A6B6A; color: #fff; }
.btn-purple:hover { background: #2E4E4D; color: #fff; }
.btn-cancel  { border-color: #e11d48 !important; color: #e11d48 !important; }
.btn-cancel:hover { background: #e11d48 !important; color: #fff !important; }

/* ── LAYOUT HELPERS ───────────────────────── */
.dash-two-col   { display: grid; grid-template-columns: 1fr 1fr; gap: 1.1rem; margin-bottom: 1.1rem; }
.dash-quick-grid { display: grid; grid-template-columns: repeat(auto-fill,minmax(140px,1fr)); gap: .75rem; margin-top: .5rem; }
.dash-chart-grid { display: grid; grid-template-columns: repeat(auto-fill,minmax(240px,1fr)); gap: 1rem; }
.dash-section-header { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: .5rem; margin-bottom: 1rem; }

/* ── EMPTY STATES ─────────────────────────── */
.dash-empty { font-size: .85rem; color: #888; padding: .5rem 0; }
.dash-empty a { color: #4A6B6A; font-weight: 600; }
.dash-empty-state { text-align: center; padding: 3rem 1rem; }
.dash-empty-state h3 { margin: .8rem 0 .3rem; color: #1a1a1a; }
.dash-empty-state p { color: #888; margin-bottom: 1rem; font-size: .9rem; }
.dash-empty-state i { font-size: 2.5rem; color: #ddd; }

/* ── SECTION VISIBILITY ───────────────────── */
.dash-section { display: none; }
.dash-section.active { display: block; }
.dash-section-title { font-family: var(--font-heading); font-size: 1.25rem; font-weight: 700; color: #1a1a1a; margin-bottom: 1rem; }

@media (max-width: 768px) {
  .dash-card { padding: 1rem; margin-bottom: .85rem; }
  .dash-card-head { align-items: flex-start; margin-bottom: .65rem; }
  .dash-section-title { font-size: 1.15rem; margin-bottom: .75rem; }
  .dash-list-item { padding: .65rem 0; }
  .dash-two-col { grid-template-columns: 1fr; gap: .85rem; }
  .dash-quick-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .55rem; }
}

/* ── RASI / CHART GRID ────────────────────── */
.rasi-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 2px; background: #e2e8f0; border-radius: 8px; overflow: hidden; }
.rasi-cell { background: #fff; padding: .5rem; min-height: 68px; display: flex; flex-direction: column; gap: .1rem; }
.rasi-center { background: #fafafa; }
.rasi-sign { font-size: .64rem; font-weight: 700; color: #4A6B6A; text-transform: uppercase; }
.rasi-planet { font-size: .64rem; color: #444; white-space: nowrap; }

/* ── DASHA TIMELINE ───────────────────────── */
.dash-timeline { display: flex; flex-direction: column; padding-left: 1rem; border-left: 2px solid #4A6B6A; }
.dash-timeline-item { display: flex; align-items: flex-start; gap: .7rem; padding: .6rem 0; position: relative; }
.dash-timeline-dot { width: 10px; height: 10px; border-radius: 50%; background: #4A6B6A; flex-shrink: 0; margin-top: 5px; position: relative; left: -1.38rem; }
.dash-timeline-item strong { font-size: .88rem; }

/* ── DIVISIONAL TABS ──────────────────────── */
.dash-div-tabs { display: flex; gap: .4rem; flex-wrap: wrap; margin-bottom: 1rem; }
.dash-div-tab { padding: .3rem .75rem; border-radius: 20px; font-size: .76rem; border: 1.5px solid #e2e8f0; background: #fff; cursor: pointer; font-weight: 500; transition: all .18s; color: #555; }
.dash-div-tab.active { background: #4A6B6A; color: #fff; border-color: #4A6B6A; }
.dash-div-table { overflow-x: auto; }
.dash-div-table table { width: 100%; border-collapse: collapse; font-size: .8rem; }
.dash-div-table th { text-align: left; padding: .5rem; background: #f9fafb; font-weight: 600; color: #555; border-bottom: 2px solid #e2e8f0; }
.dash-div-table td { padding: .45rem .5rem; border-bottom: 1px solid #f0f0f4; }

/* ── PANCHANGA ────────────────────────────── */
.dash-panch-grid { display: grid; grid-template-columns: repeat(auto-fit,minmax(140px,1fr)); gap: .8rem; }
.dash-panch-item { text-align: center; padding: .85rem; background: #f9fafb; border-radius: 10px; border: 1px solid #f0f0f4; }
.dash-panch-label { font-size: .68rem; text-transform: uppercase; color: #888; letter-spacing: .05rem; margin-bottom: .3rem; }
.dash-panch-val { font-weight: 600; font-size: .92rem; color: #1a1a1a; }
.panch-planet-table { width: 100%; border-collapse: collapse; font-size: .82rem; }
.panch-planet-table th { text-align: left; padding: .55rem .6rem; background: #f9fafb; font-weight: 600; color: #444; border-bottom: 2px solid #e2e8f0; white-space: nowrap; }
.panch-planet-table td { padding: .45rem .6rem; border-bottom: 1px solid #f0f0f4; white-space: nowrap; }
.panch-planet-table tr:hover td { background: #fefce8; }
.panch-location-bar { display: flex; align-items: center; gap: .8rem; flex-wrap: wrap; margin-bottom: 1rem; padding: .8rem 1rem; background: #fff; border-radius: 10px; box-shadow: 0 1px 3px rgba(0,0,0,.06); }
.panch-location-bar input { flex: 1; min-width: 200px; padding: .45rem .8rem; border: 1.5px solid #e2e8f0; border-radius: 8px; font-size: .85rem; outline: none; transition: border-color .2s; }
.panch-location-bar input:focus { border-color: #4A6B6A; }
.panch-location-bar button { padding: .45rem 1rem; background: #4A6B6A; color: #fff; border: none; border-radius: 8px; font-size: .82rem; font-weight: 600; cursor: pointer; }
.panch-info-grid { display: grid; grid-template-columns: repeat(auto-fit,minmax(160px,1fr)); gap: .8rem; margin-bottom: 1.2rem; }
.panch-info-card { text-align: center; padding: .8rem; background: #f9fafb; border-radius: 10px; border: 1px solid #f0f0f4; }
.panch-info-card .pi-label { font-size: .68rem; text-transform: uppercase; color: #888; letter-spacing: .05rem; margin-bottom: .25rem; }
.panch-info-card .pi-value { font-weight: 600; font-size: .92rem; color: #1a1a1a; }

/* ── PRINT ────────────────────────────────── */
.dash-print-btn { display: inline-flex; align-items: center; gap: .4rem; padding: .4rem .9rem; background: #fff; border: 1.5px solid #e2e8f0; border-radius: 8px; font-size: .76rem; font-weight: 500; color: #444; cursor: pointer; transition: all .18s; }
.dash-print-btn:hover { border-color: #4A6B6A; color: #4A6B6A; }
@media print {
  .site-header,.dash-sidebar,.dash-menu-toggle,.wa-float,.dash-print-btn,.dash-topbar { display: none !important; }
  .dash-main { margin-left: 0 !important; padding: 0 !important; }
  .dash-section { display: block !important; }
  .dash-card { box-shadow: none !important; break-inside: avoid; }
  body,.dash-wrap { background: #fff !important; }
}

/* ── CHART CANVAS ─────────────────────────── */
.chart-canvas-wrap { width: 100%; max-width: 640px; margin: 0 auto 1rem; }
.chart-canvas-wrap canvas { width: 100%; height: auto; display: block; }

/* ── RESPONSIVE ───────────────────────────── */
@media (max-width: 1023px) {
  .dash-menu-toggle { display: flex; }
}
@media (max-width: 900px) {
  .dash-two-col { grid-template-columns: 1fr; }
}
@media (max-width: 768px) {
  .dash-sidebar { top: 64px; }
  .dash-wrap.sidebar-open .dash-main { margin-left: 0; }
  .dash-main { padding: .8rem 1rem 2rem; }
  .dash-stats { grid-template-columns: 1fr 1fr; }
  .dash-quick-grid { grid-template-columns: repeat(3,1fr); }
}
@media (max-width: 480px) {
  .dash-stats { grid-template-columns: 1fr; }
  .dash-quick-grid { grid-template-columns: 1fr 1fr; }
  .dash-main { padding: .6rem .6rem 2rem; }
}

/* ═══════════════════════════════════════════
   DASHBOARD — MY CHARTS sub-page
   (was inline in dashboard/my-charts.html)
   ═══════════════════════════════════════════ */
.cc-charts-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:1.25rem;}
.cc-chart-card{background:#fff;border-radius:14px;box-shadow:0 1px 6px rgba(0,0,0,.07);padding:1.1rem 1.25rem 1rem;display:flex;flex-direction:column;gap:.6rem;transition:box-shadow .18s,transform .18s;border:1.5px solid #f0eaf9;}
.cc-chart-card:hover{box-shadow:0 6px 20px rgba(124,58,237,.12);transform:translateY(-2px);}
.cc-card-name{font-size:1rem;font-weight:700;color:#1a1a1a;display:flex;align-items:center;gap:.5rem;}
.cc-card-icon{width:30px;height:30px;border-radius:50%;background:linear-gradient(135deg,#4A6B6A,#4A6B6A);display:flex;align-items:center;justify-content:center;color:#fff;font-size:.75rem;flex-shrink:0;}
.cc-card-meta{display:grid;grid-template-columns:1fr 1fr;gap:.3rem .6rem;font-size:.8rem;color:#555;}
.cc-card-meta i{color:#4A6B6A;width:13px;}
.cc-card-badge{display:inline-flex;align-items:center;gap:.3rem;font-size:.7rem;font-weight:600;background:#F5F0E8;color:#2E4E4D;border-radius:20px;padding:.2rem .6rem;width:fit-content;}
.cc-card-lagna{background:linear-gradient(135deg,#F5F0E8,#EBE8E0);border:1px solid #D4CBC0;border-radius:8px;padding:.45rem .75rem;font-size:.82rem;display:flex;gap:1rem;flex-wrap:wrap;}
.cc-lagna-val{font-weight:700;color:#2E4E4D;}
.cc-lagna-lbl{font-size:.67rem;color:#999;display:block;}
.cc-card-actions{display:flex;gap:.5rem;margin-top:auto;padding-top:.4rem;}
.cc-btn-view{flex:1;text-align:center;padding:.45rem .8rem;background:linear-gradient(135deg,#4A6B6A,#2E4E4D);color:#fff;border-radius:8px;font-size:.8rem;font-weight:600;text-decoration:none;transition:opacity .15s;}
.cc-btn-view:hover{opacity:.88;color:#fff;}
.cc-new-card{border:2px dashed #D4CBC0;background:#F5F0E8;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:.6rem;padding:2rem;min-height:200px;text-decoration:none;border-radius:14px;color:#4A6B6A;transition:border-color .18s,background .18s;}
.cc-new-card:hover{border-color:#4A6B6A;background:#F5F0E8;}
.cc-new-card i{font-size:1.8rem;}
.cc-new-card span{font-size:.88rem;font-weight:600;}

/* ═══════════════════════════════════════════
   DASHBOARD — MATCH REPORTS sub-page
   (was inline in dashboard/match-reports.html)
   ═══════════════════════════════════════════ */
.mr-grid{display:flex;flex-direction:column;gap:1rem;}
.mr-card{background:#fff;border-radius:14px;box-shadow:0 1px 6px rgba(0,0,0,.07);border:1.5px solid #f0eaf9;overflow:hidden;transition:box-shadow .18s;}
.mr-card:hover{box-shadow:0 4px 16px rgba(124,58,237,.10);}
.mr-card-head{display:flex;align-items:center;gap:1rem;padding:1rem 1.25rem;cursor:pointer;user-select:none;}
.mr-card-head:hover{background:#F5F0E8;}
.mr-score-ring{width:52px;height:52px;border-radius:50%;display:flex;align-items:center;justify-content:center;flex-direction:column;flex-shrink:0;font-weight:700;font-size:.95rem;line-height:1.1;border:3px solid #ddd6fe;color:#2E4E4D;}
.mr-score-ring.excellent{border-color:#16a34a;color:#16a34a;}
.mr-score-ring.good{border-color:#2563eb;color:#2563eb;}
.mr-score-ring.average{border-color:#d97706;color:#d97706;}
.mr-score-ring.low{border-color:#dc2626;color:#dc2626;}
.mr-score-denom{font-size:.65rem;font-weight:500;opacity:.7;}
.mr-head-info{flex:1;min-width:0;}
.mr-names{font-size:1rem;font-weight:700;color:#1a1a1a;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.mr-sub{font-size:.76rem;color:#888;margin-top:.2rem;}
.mr-verdict-badge{font-size:.72rem;font-weight:600;padding:.25rem .65rem;border-radius:20px;white-space:nowrap;flex-shrink:0;}
.mr-verdict-badge.excellent{background:#d1fae5;color:#065f46;}
.mr-verdict-badge.good{background:#dbeafe;color:#1e40af;}
.mr-verdict-badge.average{background:#EBE8E0;color:#92400e;}
.mr-verdict-badge.low{background:#fee2e2;color:#991b1b;}
.mr-chevron{color:#aaa;font-size:.85rem;transition:transform .2s;flex-shrink:0;}
.mr-card.open .mr-chevron{transform:rotate(180deg);}
.mr-detail{display:none;border-top:1.5px solid #f0eaf9;padding:1.1rem 1.25rem 1.25rem;background:#F5F0E8;}
.mr-card.open .mr-detail{display:block;}
.mr-kootas-table{width:100%;border-collapse:collapse;font-size:.83rem;margin-bottom:1rem;}
.mr-kootas-table th{background:#4A6B6A;color:#fff;padding:.4rem .65rem;text-align:left;font-weight:600;}
.mr-kootas-table td{padding:.38rem .65rem;border-bottom:1px solid #EBE8E0;vertical-align:middle;}
.mr-kootas-table tr:last-child td{border-bottom:none;}
.mr-kootas-table tr:nth-child(even) td{background:rgba(124,58,237,.03);}
.mr-bar-wrap{width:80px;background:#EBE8E0;border-radius:3px;height:6px;display:inline-block;vertical-align:middle;}
.mr-bar-fill{height:6px;border-radius:3px;background:linear-gradient(90deg,#4A6B6A,#16a34a);}
.mr-dosha-list{display:flex;flex-wrap:wrap;gap:.4rem;margin-bottom:.85rem;}
.mr-dosha-tag{background:#fff3cd;color:#856404;border:1px solid #ffc107;font-size:.75rem;padding:.2rem .6rem;border-radius:6px;display:flex;align-items:center;gap:.3rem;}
.mr-nak-row{display:flex;gap:.75rem;flex-wrap:wrap;}
.mr-nak-pill{font-size:.78rem;padding:.25rem .75rem;border-radius:20px;font-weight:600;}
.mr-nak-m{background:#dbeafe;color:#1e40af;}
.mr-nak-f{background:#fce7f3;color:#9d174d;}
.mr-summary-bar{display:flex;align-items:center;gap:1rem;flex-wrap:wrap;background:#fff;border-radius:10px;padding:.75rem 1rem;border:1px solid #EBE8E0;margin-bottom:1rem;}
.mr-total-score{font-size:1.5rem;font-weight:800;color:#2E4E4D;line-height:1;}
.mr-total-label{font-size:.72rem;color:#888;margin-top:.1rem;}
.mr-verdict-text{font-size:.88rem;color:#1a1a1a;font-weight:500;}
.mr-cta-row{display:flex;gap:.75rem;margin-top:.85rem;flex-wrap:wrap;}
.mr-birth-grid{display:grid;grid-template-columns:1fr 1fr;gap:.75rem;font-size:.8rem;margin-top:.5rem;}
.mr-birth-box{background:#fff;border-radius:8px;padding:.65rem .85rem;}
.mr-birth-box.groom{border:1px solid #EBE8E0;}
.mr-birth-box.bride{border:1px solid #fce7f3;}
.mr-birth-label{font-size:.68rem;color:#888;text-transform:uppercase;letter-spacing:.04em;margin-bottom:.3rem;}
@media(max-width:600px){.mr-birth-grid{grid-template-columns:1fr;}}

/* ═══════════════════════════════════════════
   SECTION-LABEL (alias for .eyebrow, used in
   shop hero / checkout / orders / cart)
   ═══════════════════════════════════════════ */
.section-label {
  display: block;
  font-size: .7rem; font-weight: 600;
  letter-spacing: .26em; text-transform: uppercase;
  color: rgba(255,255,255,.82);
  margin-bottom: 10px;
}
/* inside non-dark contexts fall back to saffron */
.container > .section-label,
.contact-panel > .section-label { color: var(--saffron); }

/* ═══════════════════════════════════════════
   NEWS / ARTICLES
   ═══════════════════════════════════════════ */
.news-hero {
  padding: clamp(48px, 6vw, 80px) 0 clamp(32px, 4vw, 56px);
  background: radial-gradient(circle at 20% 40%, rgba(74,107,106,.07), transparent 38%),
              linear-gradient(180deg, #FEF9F3 0%, #F5F1EA 100%);
}
.article-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 24px;
  margin-top: 2rem;
}
.article-card {
  background: var(--white);
  border: 1px solid var(--rule);
  border-radius: var(--radius-lg);
  padding: 1.75rem;
  box-shadow: var(--shadow-sm);
  transition: transform .22s, box-shadow .22s;
  display: flex; flex-direction: column; gap: .75rem;
}
.article-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.article-card h2 {
  font-size: clamp(1.15rem, 2vw, 1.4rem);
  font-weight: 500; margin: 0;
}
.article-card h2 a { color: var(--black); transition: color .18s; }
.article-card h2 a:hover { color: var(--saffron); }
.article-card p { font-size: .9rem; flex: 1; margin: 0; }
.article-meta {
  display: flex; align-items: center; gap: 12px;
  flex-wrap: wrap;
  font-size: .78rem; color: var(--light);
  padding-top: .75rem; border-top: 1px solid var(--rule);
}
.article-meta span { display: inline-flex; align-items: center; gap: 4px; }
/* article detail page */
.article-body { font-size: .97rem; line-height: 1.82; color: var(--ink); margin: 2rem 0; }
.article-body p { margin-bottom: 1.25rem; color: var(--ink); }
.article-body h2, .article-body h3 { margin: 2rem 0 .75rem; }
.article-body ul, .article-body ol { margin: 1rem 0; padding-left: 1.5rem; }
.article-body li { margin-bottom: .5rem; }

/* ═══════════════════════════════════════════
   SHOP – reusable card (cart / orders)
   ═══════════════════════════════════════════ */

/* ── Nav cart icon ── */
.nav-cart-btn { position: relative; }
.nav-cart-badge {
  position: absolute; top: -5px; right: -7px;
  min-width: 18px; height: 18px; padding: 0 4px;
  background: var(--saffron); color: #fff;
  font-size: .68rem; font-weight: 700; line-height: 18px;
  border-radius: 999px; text-align: center;
  box-shadow: 0 1px 4px rgba(0,0,0,.25);
  pointer-events: none;
}

/* ── Checkout progress steps ── */
.checkout-steps {
  display: flex; align-items: center; justify-content: center;
  gap: 0; margin: 0 auto 2.5rem; max-width: 540px;
}
.checkout-step {
  display: flex; flex-direction: column; align-items: center;
  flex: 1; position: relative;
}
.checkout-step:not(:last-child)::after {
  content: ''; position: absolute; top: 18px; left: 50%; width: 100%;
  height: 2px; background: var(--rule); z-index: 0;
}
.checkout-step.step-done:not(:last-child)::after { background: var(--saffron); }
.checkout-step-circle {
  width: 36px; height: 36px; border-radius: 50%;
  border: 2px solid var(--rule); background: var(--bg);
  display: flex; align-items: center; justify-content: center;
  font-size: .8rem; font-weight: 700; color: var(--muted);
  position: relative; z-index: 1; transition: all .2s;
}
.checkout-step.step-done .checkout-step-circle {
  background: var(--saffron); border-color: var(--saffron); color: #fff;
}
.checkout-step.step-active .checkout-step-circle {
  border-color: var(--saffron); color: var(--saffron);
  box-shadow: 0 0 0 4px rgba(228,163,50,.15);
}
.checkout-step-label {
  font-size: .72rem; font-weight: 500; color: var(--muted);
  margin-top: .4rem; text-align: center; letter-spacing: .03em; text-transform: uppercase;
}
.checkout-step.step-active .checkout-step-label,
.checkout-step.step-done .checkout-step-label { color: var(--ink); }

/* ── Shared shop layout ── */
.shop-content { padding: 2.5rem 0 4rem; }
.shop-card {
  background: var(--white);
  border-radius: var(--radius-lg);
  border: 1px solid var(--rule);
  padding: 1.75rem 2rem;
  box-shadow: 0 1px 3px rgba(0,0,0,.06), 0 4px 16px rgba(0,0,0,.05);
}
.shop-card + .shop-card { margin-top: 1.25rem; }
.shop-card h2 {
  margin: 0 0 1.25rem;
  font-size: 1.1rem; font-weight: 600; letter-spacing: -.01em;
  display: flex; align-items: center; gap: .5rem;
}
.shop-card h2 i { color: var(--saffron); font-size: .95rem; }
.shop-two-col {
  display: grid; grid-template-columns: 2fr 1fr;
  gap: 1.5rem; align-items: start;
}
.shop-summary-sticky { position: sticky; top: 96px; }

/* ── Cart item rows ── */
.cart-item-row {
  display: grid; grid-template-columns: 64px 1fr auto;
  gap: 1rem; align-items: start;
  border: 1px solid var(--rule); border-radius: var(--radius-lg);
  padding: 1rem 1.25rem; background: var(--bg);
  transition: border-color .2s, box-shadow .2s;
}
.cart-item-row:hover { border-color: var(--saffron); box-shadow: 0 2px 10px rgba(228,163,50,.1); }
.cart-item-thumb {
  width: 64px; height: 64px; border-radius: var(--radius);
  object-fit: cover; flex-shrink: 0;
}
.cart-item-thumb-placeholder {
  width: 64px; height: 64px; border-radius: var(--radius);
  background: linear-gradient(135deg, rgba(123,94,167,.15), rgba(228,163,50,.15));
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.cart-item-thumb-placeholder i { color: var(--saffron); font-size: 1.4rem; }
.cart-item-info { min-width: 0; }
.cart-item-info h3 { margin: 0 0 .2rem; font-size: .97rem; font-weight: 600; }
.cart-item-info p { margin: 0; color: var(--muted); font-size: .87rem; line-height: 1.5; }
.cart-item-badge {
  display: inline-flex; align-items: center; gap: .3rem;
  font-size: .7rem; padding: 2px 8px; border-radius: 999px;
  font-weight: 500; margin-bottom: .3rem;
  background: rgba(123,94,167,.15); color: #a78bfa;
}
.cart-item-badge.badge-physical { background: rgba(20,184,166,.12); color: #0d9488; }
.cart-item-actions { display: flex; flex-direction: column; gap: .5rem; align-items: flex-end; flex-shrink: 0; }
.cart-item-price { font-size: 1.05rem; font-weight: 700; color: var(--ink); text-align: right; }
.cart-qty-input {
  width: 72px; padding: .45rem .6rem; border: 1.5px solid var(--rule);
  border-radius: var(--radius); font-family: var(--font-body); font-size: .9rem;
  text-align: center; transition: border-color .18s;
}
.cart-qty-input:focus { outline: none; border-color: var(--saffron); }

/* ── Order total summary ── */
.order-row {
  display: flex; justify-content: space-between; align-items: center;
  gap: 1rem; flex-wrap: wrap; padding: .75rem 0; border-bottom: 1px solid var(--rule);
}
.order-row:last-child { border-bottom: none; }
.order-row-left h3 { margin: .1rem 0; font-size: 1rem; }
.order-row-left p { margin: .3rem 0; color: var(--muted); font-size: .9rem; }
.order-total-line {
  display: flex; justify-content: space-between; align-items: baseline;
  padding: .65rem 0; font-size: .95rem; border-bottom: 1px solid var(--rule);
}
.order-total-line:last-child { border-bottom: none; }
.order-grand-total {
  font-size: 1.55rem; font-weight: 700; color: var(--saffron);
  font-family: var(--font-heading);
}

/* ── Payment option cards ── */
.payment-options-grid { display: grid; gap: .75rem; margin-top: .75rem; }
.payment-option {
  display: grid; grid-template-columns: 22px 48px 1fr;
  align-items: center; gap: 1rem;
  padding: 1rem 1.25rem;
  border: 1.5px solid var(--rule); border-radius: var(--radius-lg);
  cursor: pointer; transition: border-color .18s, background .18s, box-shadow .18s;
  background: var(--bg);
}
.payment-option:has(input:checked) {
  border-color: var(--saffron); background: rgba(228,163,50,.06);
  box-shadow: 0 0 0 3px rgba(228,163,50,.15);
}
.payment-option:hover { border-color: var(--saffron); }
.payment-option input[type="radio"] { width: 18px; height: 18px; accent-color: var(--saffron); }
.payment-option-icon {
  width: 48px; height: 32px; display: flex; align-items: center; justify-content: center;
  border-radius: var(--radius); border: 1px solid var(--rule); background: var(--white);
  font-size: 1.3rem;
}
.payment-option-label strong { font-size: .92rem; display: block; font-weight: 600; }
.payment-option-label span { font-size: .78rem; color: var(--muted); }
.payment-option-badges { display: flex; gap: .35rem; margin-top: .3rem; flex-wrap: wrap; }
.payment-badge {
  font-size: .65rem; padding: 1px 7px; border-radius: 999px;
  background: rgba(20,184,166,.12); color: #0d9488; font-weight: 500;
}

/* ── Coupon section ── */
.coupon-panel {
  margin-top: .75rem; padding: 1.25rem;
  border: 1.5px dashed var(--rule); border-radius: var(--radius-lg);
  background: var(--bg);
}
.coupon-form { display: flex; gap: .5rem; margin-top: .5rem; }
.coupon-form input {
  flex: 1; padding: .7rem 1rem; border: 1.5px solid var(--rule);
  border-radius: var(--radius); outline: none;
  font-family: var(--font-body); font-size: .9rem; color: var(--ink);
  background: var(--white); transition: border-color .18s;
  letter-spacing: .06em; text-transform: uppercase;
}
.coupon-form input::placeholder { text-transform: none; letter-spacing: 0; }
.coupon-form input:focus { border-color: var(--saffron); }
.coupon-form .button { flex-shrink: 0; }
.coupon-applied-row {
  display: flex; align-items: center; justify-content: space-between;
  gap: .75rem; margin-top: .75rem; padding: .65rem 1rem;
  border-radius: var(--radius); background: rgba(20,184,166,.1);
  border: 1px solid rgba(20,184,166,.3);
}
.coupon-code-tag { font-weight: 700; font-size: .87rem; letter-spacing: .08em; color: #0d9488; }
.coupon-remove-btn { background: none; border: none; cursor: pointer; color: var(--muted); font-size: .8rem; padding: 0; }
.coupon-remove-btn:hover { color: #b91c1c; }
.coupon-error-msg { color: #b91c1c; font-size: .83rem; margin-top: .5rem; display: flex; gap: .3rem; align-items: center; }
.coupon-success-msg { color: #0d9488; font-size: .83rem; margin-top: .5rem; display: flex; gap: .3rem; align-items: center; }

/* ── Shipping address form ── */
.field-label {
  display: block; font-size: .8rem; font-weight: 600;
  color: var(--muted); margin-bottom: .35rem; letter-spacing: .04em; text-transform: uppercase;
}
.addr-radio-group { display: grid; gap: .6rem; margin-bottom: 1rem; }
.addr-option {
  display: flex; align-items: flex-start; gap: .85rem;
  padding: .85rem 1.1rem; border: 1.5px solid var(--rule);
  border-radius: var(--radius-lg); cursor: pointer;
  transition: border-color .18s, background .18s; background: var(--bg);
}
.addr-option:has(input:checked) { border-color: var(--saffron); background: rgba(228,163,50,.05); }
.addr-option input[type="radio"] { margin-top: .2rem; accent-color: var(--saffron); flex-shrink: 0; }
.addr-option-body strong { display: block; font-size: .9rem; font-weight: 600; }
.addr-option-body span { font-size: .82rem; color: var(--muted); line-height: 1.5; }
.addr-new-label {
  display: flex; align-items: center; gap: .75rem;
  padding: .85rem 1.1rem; border: 1.5px dashed var(--rule);
  border-radius: var(--radius-lg); cursor: pointer;
  font-size: .88rem; font-weight: 500; transition: border-color .18s, background .18s;
}
.addr-new-label:hover, .addr-new-label:has(input:checked) {
  border-color: var(--saffron); background: rgba(228,163,50,.05);
}
.addr-new-label input[type="radio"] { accent-color: var(--saffron); }
.addr-form-grid {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: .6rem 1rem; margin-top: 1rem; padding: 1.25rem;
  border: 1.5px solid var(--rule); border-radius: var(--radius-lg); background: var(--bg);
}
.addr-form-grid .full-col { grid-column: 1 / -1; }
.addr-form-grid input[type="text"],
.addr-form-grid input[type="email"],
.addr-form-grid input[type="tel"],
.addr-form-grid input[type="password"],
.addr-form-grid textarea {
  width: 100%; padding: .65rem .9rem; border: 1.5px solid var(--rule);
  border-radius: var(--radius); font-family: var(--font-body); font-size: .9rem;
  color: var(--ink); background: var(--white); outline: none;
  transition: border-color .18s; box-sizing: border-box;
}
.addr-form-grid textarea {
  min-height: 110px; resize: vertical; line-height: 1.5;
}
.addr-form-grid input:focus,
.addr-form-grid textarea:focus { border-color: var(--saffron); }
.addr-form-checkboxes { display: flex; gap: 1.5rem; flex-wrap: wrap; grid-column: 1/-1; }
.addr-checkbox-label { display: flex; align-items: center; gap: .45rem; font-size: .85rem; cursor: pointer; }
.addr-checkbox-label input { accent-color: var(--saffron); width: 15px; height: 15px; }

/* order history list */
.order-history-item {
  background: var(--white); border: 1px solid var(--rule);
  border-radius: var(--radius-lg); padding: 1.5rem;
  box-shadow: var(--shadow-sm); margin-bottom: 1rem;
}
.order-history-header {
  display: flex; justify-content: space-between; align-items: center;
  gap: 1rem; flex-wrap: wrap; margin-bottom: 1rem;
}
.order-history-header h2 { margin: 0; font-size: 1.15rem; }
.order-status-pill {
  padding: .4rem .9rem; border-radius: 999px;
  font-size: .82rem; font-weight: 500;
  background: var(--saffron-pale); color: var(--saffron-dark);
}
.order-items-grid { display: grid; gap: .65rem; }
.order-line-item {
  padding: .75rem 1rem; border: 1px solid var(--rule);
  border-radius: var(--radius); font-size: .9rem;
}

/* ═══════════════════════════════════════════
   PROFILE PAGE
   ═══════════════════════════════════════════ */
.profile-layout {
  display: grid;
  grid-template-columns: 300px 1fr;
  gap: 2rem;
  align-items: start;
}
.profile-sidebar-card {
  background: var(--white);
  border: 1px solid var(--rule);
  border-radius: var(--radius-lg);
  padding: 1.75rem;
  box-shadow: var(--shadow-md);
  position: sticky; top: 88px;
}
.profile-avatar-wrap {
  display: flex; flex-direction: column;
  align-items: center; text-align: center;
  padding-bottom: 1.25rem; margin-bottom: 1.25rem;
  border-bottom: 1px solid var(--rule);
}
.profile-avatar-img {
  width: 100px; height: 100px; border-radius: 50%;
  border: 3px solid var(--saffron);
  object-fit: cover; margin-bottom: 1rem;
}
.profile-avatar-initials {
  width: 100px; height: 100px; border-radius: 50%;
  border: 3px solid var(--saffron);
  background: var(--saffron-pale); color: var(--saffron);
  display: flex; align-items: center; justify-content: center;
  font-size: 2.2rem; font-weight: 700;
  font-family: var(--font-heading);
  margin-bottom: 1rem;
}
.profile-fullname { font-size: 1.1rem; font-weight: 600; color: var(--black); margin: 0 0 .2rem; }
.profile-username { font-size: .82rem; color: var(--muted); margin: 0 0 .15rem; }
.profile-email { font-size: .82rem; color: var(--muted); margin: 0; }
.profile-status-list { display: flex; flex-direction: column; gap: .5rem; margin-bottom: 1.25rem; }
.profile-status-row {
  display: flex; justify-content: space-between; align-items: center;
  padding: .6rem .75rem; background: var(--bg);
  border-radius: var(--radius); font-size: .85rem; color: var(--ink);
}
.profile-status-none { font-size: .78rem; color: var(--light); }
.profile-sidebar-nav { display: flex; flex-direction: column; gap: .5rem; }
.profile-main { display: flex; flex-direction: column; gap: 1.5rem; }
.profile-section-card {
  background: var(--white);
  border: 1px solid var(--rule);
  border-radius: var(--radius-lg);
  padding: 1.75rem;
  box-shadow: var(--shadow-sm);
}
.profile-section-title {
  font-size: 1.15rem; font-weight: 600; color: var(--black);
  margin: 0 0 1.25rem; font-family: var(--font-body);
}
/* form layout inside profile */
.form-row-2 {
  display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-bottom: 1rem;
}
.page-form-error { font-size: .82rem; color: #b91c1c; margin-top: .2rem; }
/* login table */
.profile-login-table {
  width: 100%; border-collapse: collapse; font-size: .88rem;
}
.profile-login-table th {
  text-align: left; padding: .6rem .75rem;
  background: var(--bg); color: var(--muted); font-weight: 600;
  border-bottom: 2px solid var(--rule); font-size: .78rem;
  text-transform: uppercase; letter-spacing: .06em;
}
.profile-login-table td {
  padding: .6rem .75rem; border-bottom: 1px solid var(--rule);
  color: var(--ink);
}
.profile-login-table tr:last-child td { border-bottom: none; }

/* ─── Subscription plan cards ────────── */
.plans-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 24px;
}
.plan-card {
  background: var(--white); border: 1px solid var(--rule);
  border-radius: var(--radius-lg); padding: 2rem;
  text-align: center; position: relative;
  transition: transform .22s, box-shadow .22s;
}
.plan-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.plan-featured { border-color: var(--saffron); box-shadow: 0 8px 30px rgba(74,107,106,.15); }
.plan-badge {
  position: absolute; top: -12px; left: 50%; transform: translateX(-50%);
  background: var(--saffron); color: var(--white);
  font-size: .68rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  padding: 4px 16px; border-radius: 999px;
}
.plan-interval {
  font-size: .7rem; font-weight: 700; letter-spacing: .22em;
  text-transform: uppercase; color: var(--saffron); margin-bottom: 12px;
}
.plan-name { font-size: 1.4rem; margin-bottom: 10px; }
.plan-desc { font-size: .88rem; color: var(--muted); line-height: 1.65; margin-bottom: 20px; min-height: 72px; }
.plan-price {
  font-family: var(--font-heading); font-size: 2.4rem; font-weight: 500;
  color: var(--black); margin-bottom: 6px;
}
.plan-price span { font-family: var(--font-body); font-size: .78rem; color: var(--muted); font-weight: 400; }
.plan-trial { font-size: .82rem; color: #16a34a; margin-bottom: 16px; }
.plan-card form, .plan-card .button { margin-top: auto; }

/* ─── My subscriptions cards ─────────── */
.sub-card {
  background: var(--white); border: 1px solid var(--rule);
  border-radius: var(--radius-lg); padding: 1.75rem;
  display: flex; justify-content: space-between; align-items: center;
  gap: 1rem; box-shadow: var(--shadow-sm); margin-bottom: 1rem;
}
.sub-card-left { flex: 1; min-width: 0; }
.sub-card-left h3 { font-size: 1.2rem; margin: 8px 0 6px; }
.sub-card-left p { font-size: .88rem; color: var(--muted); margin-bottom: 10px; }
.sub-meta { display: flex; flex-wrap: wrap; gap: 16px; font-size: .82rem; color: var(--muted); }
.sub-meta strong { font-weight: 700; color: var(--black); }
.sub-status {
  display: inline-block; padding: 3px 10px; border-radius: 999px;
  font-size: .68rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
}
.sub-status-active { background: #dcfce7; color: #166534; }
.sub-status-trial { background: #e0f2fe; color: #0369a1; }
.sub-status-cancelled { background: #fde8e8; color: #991b1b; }
.sub-status-expired { background: #f3f4f6; color: #6b7280; }
.sub-status-past_due { background: #EBE8E0; color: #92400e; }
.sub-card-right { flex-shrink: 0; }

/* ─── Responsive for profile & shop ─── */
@media (max-width: 900px) {
  .profile-layout { grid-template-columns: 1fr; }
  .profile-sidebar-card { position: static; }
  .shop-two-col { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .form-row-2 { grid-template-columns: 1fr; }
  .article-list { grid-template-columns: 1fr; }
}

/* ===== WHATSAPP FLOATING BUTTON ===== */
.wa-float{position:fixed;bottom:24px;right:24px;z-index:9999;width:56px;height:56px;border-radius:50%;background:#25D366;display:flex;align-items:center;justify-content:center;box-shadow:0 4px 16px rgba(0,0,0,.2);transition:transform .2s,box-shadow .2s;text-decoration:none;}
.wa-float:hover{transform:scale(1.08);box-shadow:0 6px 24px rgba(0,0,0,.3);}
.wa-float svg{width:28px;height:28px;fill:#fff;}
.wa-float-tooltip{position:absolute;right:68px;top:50%;transform:translateY(-50%);background:#fff;color:#333;font-size:.82rem;font-weight:600;padding:.5rem 1rem;border-radius:8px;box-shadow:0 2px 12px rgba(0,0,0,.12);white-space:nowrap;opacity:0;pointer-events:none;transition:opacity .2s;}
.wa-float:hover .wa-float-tooltip{opacity:1;}

/* ===== BOOKING/CALENDAR ===== */
.cal-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:1rem;}
.cal-slot{background:#fff;border:1.5px solid #e5e7eb;border-radius:10px;padding:1rem;text-align:center;transition:all .2s;}
.cal-slot:hover{border-color:#4A6B6A;box-shadow:0 2px 12px rgba(74,107,106,.1);}
.cal-slot-time{font-size:1.1rem;font-weight:700;color:#1A1A1A;margin-bottom:.3rem;}
.cal-slot-date{font-size:.82rem;color:#888;margin-bottom:.6rem;}
.cal-slot .btn-sm{width:100%;}

/* ===== DASHBOARD UTILITY CLASSES ===== */
/* icon colors for stat cards */
.clr-saffron{color:#4A6B6A;}
.clr-purple{color:#4A6B6A;}
.clr-blue{color:#2563eb;}
.clr-green{color:#059669;}
.clr-red{color:#e74c3c;}
.clr-pink{color:#db2777;}
.clr-yellow{color:#d97706;}
.clr-danger{color:#dc2626;}

/* section header with print buttons */
.dash-section-header{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:.5rem;margin-bottom:1rem;}
.dash-section-header .dash-section-title{margin-bottom:0;}
.dash-section-header .dash-actions{display:flex;gap:.5rem;}

/* order price */
.dash-order-price{color:var(--dash-primary,#4A6B6A);font-size:1.1rem;font-weight:700;}

/* cancel button (red) */
.btn-cancel{color:#e74c3c;border-color:#e74c3c;font-size:.72rem;}

/* compatibility indicators */
.compat-high{font-size:.8rem;color:#059669;margin-top:.3rem;}
.compat-mid{font-size:.8rem;color:#d97706;margin-top:.3rem;}
.compat-low{font-size:.8rem;color:#dc2626;margin-top:.3rem;}

/* match report name styling */
.match-names{font-size:1rem;font-weight:700;}
.match-meta{display:flex;align-items:center;gap:.6rem;flex-wrap:wrap;}

/* empty state icon sizes */
.dash-empty-icon{font-size:3rem;opacity:.3;}

/* hidden helper */
.d-none{display:none;}

/* chart detail panel */
.chart-detail-panel{margin-top:1.5rem;}

/* slot mentor label */
.slot-mentor{font-size:.75rem;color:#888;margin-bottom:.5rem;}

/* card no-border list item */
.dash-list-item-flat{border:none;padding:0;}

/* subscription detail line */
.sub-detail{margin-top:.2rem;}

/* card with center content */
.dash-card-center{text-align:center;padding:2rem;}

/* dash-div-heading consistent style */
.dash-div-heading{margin:1rem 0 .5rem;font-family:var(--font-body);font-size:1rem;font-weight:600;}

/* spacing utilities */
.mb-0{margin-bottom:0;}
.mb-1{margin-bottom:1rem;}
.mb-1h{margin-bottom:1.5rem;}
.mt-1{margin-top:1rem;}
.mt-03{margin-top:.3rem;}
.text-center{text-align:center;}
.flex-1{flex:1;}

/* no-chart CTA amber */
.no-chart-cta{background:linear-gradient(135deg,#fff7ed,#EBE8E0);border-color:rgba(245,158,11,.3);}
.no-chart-cta .dash-active-icon{background:#f59e0b;}

/* chart card helpers */
.chart-badge{font-size:.65rem;}
.chart-btn-row{margin-top:.8rem;display:flex;gap:.4rem;}
.chart-detail-rasi{margin-bottom:1rem;}

/* booking helpers */
.booking-desc{font-size:.85rem;color:#666;margin-bottom:1rem;}
.no-slots-icon{font-size:2rem;opacity:.3;}
.no-slots-msg{color:#888;margin-top:.5rem;}

/* subscription name */
.sub-name{font-size:1.05rem;}

/* match report center CTA */
.match-cta{text-align:center;padding:1rem;}

/* panchanga location icon */
.panch-loc-icon{font-size:1.1rem;}
.panch-loc-btn{font-size:.78rem;}

/* ── Utility classes for template inline-style replacements ── */
.u-mt-05  { margin-top: .5rem; }
.u-mt-1   { margin-top: 1rem; }
.u-mt-1h  { margin-top: 1.5rem; }
.u-mt-2   { margin-top: 2rem; }
.u-mb-05 { margin-bottom: .5rem; }
.u-text-center { text-align: center; }
.u-display-block { display: block; }

/* Container variants used by templates */
.container--product { max-width: 1000px; padding: 3rem 1.5rem; }
.container--section { padding-top: 3rem; padding-bottom: 3rem; }
.container--index { max-width: 1100px; margin: 2rem auto; padding: 0 1rem; }
.container--dashboard { padding: 3rem 1.5rem; max-width: 1100px; }

/* Shop / product utilities */
.shop-hero .eyebrow--light { color: rgba(255,255,255,.85); }
.shop-hero .lead--white { color: rgba(255,255,255,.7); max-width: 50ch; margin: 0 auto 1.5rem; }
.product-grid-actions { display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap; }
.card-link { display:block;padding:1rem;border:1px solid #ece7f7;border-radius:10px;background:#fff;color:#222;text-decoration:none; }
.card-title { font-weight:700; }
.intro-muted { color:#666; max-width:760px; }
.text-muted { color:var(--muted); }

/* Widgets and reports */
.widget-card, .report-card { padding:1.5rem;border-radius:18px;background:#fff;box-shadow:0 12px 32px rgba(0,0,0,.05); }
.widget-card .widget-title, .report-card .report-title { font-size:1rem;font-weight:700;margin-bottom:.5rem; }
.widget-card .widget-desc, .report-card .report-desc { color:#4f4f4f;line-height:1.6; }

/* Generic grid used by several templates */
.grid-cards { display:grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1rem; }

/* General container helpers */
.container--pad { padding: 3rem 1.5rem; }
.container--max-1100 { max-width: 1100px; }
.container--max-900 { max-width: 900px; }
.container--pad-bottom-4 { padding: 0 1.5rem 4rem; }

/* Divisional charts / dashboard helpers */
.chart-categories { display:flex; gap:.5rem; flex-wrap:wrap; margin-bottom:1.5rem; border-bottom:2px solid #e5e7eb; padding-bottom:1rem; }
.chart-cat-btn { padding:.5rem 1rem; border:none; background:#f0f0f0; color:#333; border-radius:4px; cursor:pointer; font-weight:500; }
.chart-cat-btn.active { background:#4A6B6A; color:#fff; }
.chart-section { margin-top:1rem; }
.chart-card { padding:1rem; border:1px solid #e5e7eb; border-radius:8px; cursor:pointer; transition:all .2s; }
.chart-card-small { padding:.75rem; border:1px solid #e5e7eb; border-radius:6px; text-align:center; cursor:pointer; }
.chart-card h4 { color:#2E2B28; margin:0 0 .5rem 0; }
.chart-card p { font-size:.9rem; color:#666; margin:0; }
.btn-full { width:100%; }
.chart-heading { color:#2E4E4D; margin-bottom:1rem; }
#chartDisplayArea { margin-top:2rem; display:none; }
#chartDisplayArea .back-btn { margin-bottom:1rem; padding:.5rem 1rem; border:1px solid #ccc; background:#fff; border-radius:4px; cursor:pointer; }

/* Icon spacing utilities */
.icon-sp { margin-right: .4rem; }
.icon-sp-xs { margin-right: .25rem; }
.icon-sp-lg { margin-right: .5rem; }
.icon-sp-8 { margin-right: 8px; }

/* Social / auth buttons */
.btn-social-icon { width:56px; height:56px; border-radius:14px; margin:0 auto .75rem; font-size:1.6rem; display:flex; align-items:center; justify-content:center; }
.login-info-box { background:var(--saffron-pale); border-color:rgba(74,107,106,.25); color:var(--ink); margin-bottom:1.5rem; padding: .5rem 1rem; }





/* =============================================================================
   DASHBOARD LAYOUT V2 — Collapsible icon-only sidebar + right panel
   (Overrides for site.css dashboard section — appended at end)
   ============================================================================= */

/* -- Sidebar: new width 220px ------------------------------------------------ */
.dash-sidebar { width: 220px; left: -220px; }
.dash-sidebar.open { left: 0; }

@media (min-width: 1024px) {
  .dash-sidebar { left: 0; }
  .dash-menu-toggle { display: none !important; }
}

/* -- Sidebar Brand (top strip) ----------------------------------------------- */
.dash-sidebar-brand {
  display: flex; align-items: center; gap: .6rem;
  padding: .9rem .85rem;
  border-bottom: 1px solid rgba(255,255,255,.08);
  background: rgba(0,0,0,.18);
  flex-shrink: 0;
}
.dash-brand-icon {
  width: 34px; height: 34px; border-radius: 8px;
  background: linear-gradient(135deg, #4A6B6A, #2E4E4D);
  display: flex; align-items: center; justify-content: center;
  font-size: .92rem; color: #fff; flex-shrink: 0;
  box-shadow: 0 2px 8px rgba(74,107,106,.4);
}
.dash-brand-name {
  font-size: .82rem; font-weight: 700; color: #f0f0f0;
  white-space: nowrap; overflow: hidden; flex: 1;
  font-family: var(--font-heading);
}
.dash-collapse-btn {
  width: 24px; height: 24px; border-radius: 5px;
  background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.12);
  color: #8899aa; cursor: pointer; flex-shrink: 0;
  display: none; align-items: center; justify-content: center;
  transition: background .15s, color .15s;
  font-size: .7rem; padding: 0;
}
.dash-collapse-btn:hover { background: rgba(255,255,255,.14); color: #e2e8f0; }
@media (min-width: 1024px) { .dash-collapse-btn { display: flex; } }
.dash-collapse-btn i { transition: transform .25s cubic-bezier(.4,0,.2,1); }

/* -- Sidebar Bottom (user card + actions) ------------------------------------- */
.dash-sidebar-bottom {
  padding: .7rem .8rem;
  border-top: 1px solid rgba(255,255,255,.08);
  background: rgba(0,0,0,.12);
  flex-shrink: 0;
  display: flex; flex-direction: column; gap: .4rem;
}
.dash-sidebar-user {
  display: flex; align-items: center; gap: .6rem;
  padding: .4rem .1rem;
}
.dash-sidebar-actions { display: flex; flex-direction: column; gap: .2rem; }
.dash-upgrade-btn {
  display: flex; align-items: center; justify-content: center; gap: .45rem;
  padding: .5rem .85rem;
  background: linear-gradient(135deg, #4A6B6A 0%, #2E4E4D 100%);
  color: #fff; border-radius: 8px; font-size: .79rem; font-weight: 600;
  text-decoration: none;
  box-shadow: 0 2px 8px rgba(74,107,106,.3);
  transition: opacity .18s, transform .15s;
}
.dash-upgrade-btn:hover { opacity: .88; color: #fff; transform: translateY(-1px); }

/* nav-badge for market count ------------------------------------------------- */
.nav-badge {
  background: #4A6B6A; color: #fff; font-size: .6rem;
  padding: .1rem .3rem; border-radius: 4px; margin-left: .3rem;
  font-weight: 700; line-height: 1; vertical-align: middle;
}

/* -- COLLAPSED STATE (class on .dash-wrap) ------------------------------------ */
@media (min-width: 1024px) {
  .dash-wrap.sidebar-collapsed .dash-sidebar { width: 72px; }
  .dash-wrap.sidebar-collapsed .dash-content-wrap { margin-left: 72px !important; }
  .dash-wrap.sidebar-collapsed .dash-collapse-btn i { transform: rotate(180deg); }
  .dash-wrap.sidebar-collapsed .dash-sidebar-brand { justify-content: center; padding: .9rem .5rem; }
  .dash-wrap.sidebar-collapsed .dash-brand-name,
  .dash-wrap.sidebar-collapsed .dash-nav-label,
  .dash-wrap.sidebar-collapsed .dash-nav-item-text,
  .dash-wrap.sidebar-collapsed .dash-user-info,
  .dash-wrap.sidebar-collapsed .dash-upgrade-btn span,
  .dash-wrap.sidebar-collapsed .dash-currency-pill span { display: none !important; }
  .dash-wrap.sidebar-collapsed .dash-nav-item { justify-content: center; padding: .65rem .5rem; }
  .dash-wrap.sidebar-collapsed .dash-nav-item i { width: auto; font-size: .95rem; }
  .dash-wrap.sidebar-collapsed .dash-sidebar-user { justify-content: center; }
  .dash-wrap.sidebar-collapsed .dash-upgrade-btn { padding: .5rem; border-radius: 8px; }
  .dash-wrap.sidebar-collapsed .dash-upgrade-btn i { font-size: .9rem; }
  .dash-wrap.sidebar-collapsed .dash-currency-pill { justify-content: center; padding: .25rem .5rem; }
}

/* -- CONTENT WRAP: flex container for main + right panel --------------------- */
.dash-content-wrap {
  display: flex; flex: 1; min-width: 0;
  transition: margin-left .25s cubic-bezier(.4,0,.2,1);
}

@media (min-width: 1024px) {
  .dash-content-wrap { margin-left: 220px; }
  .dash-main { margin-left: 0 !important; }
}

@media (max-width: 1023px) {
  .dash-content-wrap { margin-left: 0; }
  .dash-main { margin-left: 0 !important; }
  .dash-wrap.sidebar-open .dash-content-wrap { margin-left: 220px; }
}

/* Existing .dash-main override — remove old margin, rely on content-wrap */
.dash-main {
  flex: 1; min-width: 0;
  padding: calc(64px + 1rem) 1.5rem 3rem;
}

/* -- RIGHT PANEL ------------------------------------------------------------- */
.dash-right-panel {
  width: 280px; flex-shrink: 0;
  padding: calc(64px + .85rem) .9rem 2rem;
  display: none; flex-direction: column; gap: .85rem;
  align-self: flex-start;
  position: sticky; top: 0; max-height: 100vh;
  overflow-y: auto;
  scrollbar-width: thin; scrollbar-color: rgba(0,0,0,.06) transparent;
}
@media (min-width: 1280px) { .dash-right-panel { display: flex; } }
.dash-right-panel::-webkit-scrollbar { width: 4px; }
.dash-right-panel::-webkit-scrollbar-track { background: transparent; }
.dash-right-panel::-webkit-scrollbar-thumb { background: rgba(0,0,0,.08); border-radius: 4px; }

/* DRP Cards ------------------------------------------------------------------ */
.drp-card {
  background: #fff; border-radius: 12px; padding: .9rem;
  box-shadow: 0 1px 3px rgba(0,0,0,.07), 0 0 0 1px rgba(0,0,0,.04);
}
.drp-card-head {
  display: flex; align-items: center; gap: .4rem;
  font-size: .7rem; font-weight: 700; color: #6b7280;
  text-transform: uppercase; letter-spacing: .08rem; margin-bottom: .8rem;
}
.drp-card-head i { color: #4A6B6A; font-size: .75rem; }
.drp-plan-list { display: flex; flex-direction: column; gap: .35rem; margin-bottom: .65rem; }
.drp-plan-badge {
  display: flex; align-items: center; gap: .4rem;
  font-size: .79rem; color: #1a1a2e; font-weight: 500;
  background: #f0fdf4; padding: .3rem .55rem; border-radius: 6px;
}
.drp-plan-badge i { color: #16a34a; font-size: .72rem; }
.drp-no-plan { font-size: .79rem; color: #6b7280; margin-bottom: .65rem; line-height: 1.5; }
.drp-action-btn {
  display: flex; align-items: center; justify-content: center; gap: .4rem;
  padding: .48rem .85rem; border-radius: 8px; font-size: .79rem; font-weight: 600;
  text-decoration: none; transition: all .15s; width: 100%; box-sizing: border-box;
}
.drp-action-btn--primary { background: #4A6B6A; color: #fff; }
.drp-action-btn--primary:hover { background: #2E4E4D; color: #fff; transform: translateY(-1px); }
.drp-action-btn--outline { background: transparent; color: #4A6B6A; border: 1.5px solid rgba(74,107,106,.5); }
.drp-action-btn--outline:hover { background: rgba(74,107,106,.06); }
.drp-action-btn--ghost { background: transparent; color: #6b7280; border: 1.5px solid #e5e7eb; }
.drp-action-btn--ghost:hover { background: #f9fafb; color: #374151; }
.drp-action-btn--support { background: transparent; color: #0369a1; border: 1.5px solid #7dd3fc; }
.drp-action-btn--support:hover { background: #f0f9ff; }
.drp-quick-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .45rem; }
.drp-quick-item {
  display: flex; flex-direction: column; align-items: center; gap: .3rem;
  padding: .65rem .4rem; background: #f9fafb; border-radius: 10px;
  text-decoration: none; color: #374151; font-size: .7rem; font-weight: 500;
  transition: background .15s, transform .15s;
  border: 1px solid #f0f0f0; text-align: center;
}
.drp-quick-item:hover { background: #fff7ed; color: #4A6B6A; transform: translateY(-2px); }
.drp-quick-item i { font-size: 1rem; color: #4A6B6A; }
.drp-feature-list { list-style: none; padding: 0; margin: 0 0 .7rem; display: flex; flex-direction: column; gap: .38rem; }
.drp-feature-list li { display: flex; align-items: center; gap: .45rem; font-size: .78rem; line-height: 1.3; }
.drp-feat-on { color: #c8d8ec; }
.drp-feat-on i { color: #4ade80; font-size: .72rem; }
.drp-feat-off { color: #4a5568; }
.drp-feat-off i { color: #374151; font-size: .72rem; }
.drp-cosmic-card {
  background: linear-gradient(150deg, #1a2a4e 0%, #16213e 60%, #0f3460 100%);
  border: 1px solid rgba(255,255,255,.06);
}
.drp-cosmic-card .drp-card-head { color: #94a3b8; }
.drp-support-card { background: #f0f9ff; border: 1px solid #bae6fd; }
.drp-support-text { font-size: .79rem; color: #0369a1; margin: 0 0 .6rem; line-height: 1.45; }

/* =============================================================================
   ASTROFINANCEHUB DASHBOARD — Dark / Light Theme System (DaylioX-style)
   =============================================================================*/

/* ── LIGHT THEME VARIABLES — pull from active site theme ─────────────────── */
:root {
  --dash-bg:           var(--bg-secondary,    #f4f5f7);
  --dash-surface:      var(--card-bg,         #ffffff);
  --dash-surface-alt:  var(--bg-primary,      #f8fafc);
  --dash-border:       var(--border-light,    #e5e7eb);
  --dash-text:         var(--text-primary,    #1a1a2e);
  --dash-text-muted:   var(--text-secondary,  #4b5563);
  --dash-text-subtle:  var(--text-muted,      #9ca3af);
  --dash-topbar-bg:    var(--bg-secondary,    #f4f5f7);
  --dash-primary:      var(--primary-color,   #4A6B6A);
  --dash-primary-dark: var(--primary-dark,    #384F4E);
  --dash-card-bg:      var(--card-bg,         #ffffff);
  --dash-card-shadow:  var(--shadow-sm, 0 1px 3px rgba(0,0,0,.07));
  --dash-shadow-hover: var(--shadow-md, 0 4px 16px rgba(0,0,0,.10));
  --dash-transition:   .25s cubic-bezier(.4,0,.2,1);
}

/* ── DARK MODE — dashboard sidebar toggle adds html.dark ─────────────────── */
html.dark {
  --dash-bg:           #0e1424;
  --dash-surface:      #131d2e;
  --dash-surface-alt:  #0a1220;
  --dash-border:       rgba(255,255,255,.08);
  --dash-text:         #e2e8f0;
  --dash-text-muted:   #8899aa;
  --dash-text-subtle:  #64748b;
  --dash-topbar-bg:    #0e1424;
  --dash-primary:      var(--primary-light, #6E8E8D);
  --dash-card-bg:      #131d2e;
  --dash-card-shadow:  0 1px 3px rgba(0,0,0,.5), 0 0 0 1px rgba(255,255,255,.03);
  --dash-shadow-hover: 0 4px 20px rgba(0,0,0,.4);
}

/* ── APPLY THEME VARS TO DASHBOARD ──────────────────────────────────────── */
.dash-wrap    { background: var(--dash-bg); }
.dash-main    { background: var(--dash-bg); }
.dash-topbar  {
  background: var(--dash-topbar-bg);
  border-bottom: 1px solid var(--dash-border);
}
.dash-topbar-title { color: var(--dash-text); }

/* ── STAT CARDS — DaylioX style: top accent bar + tinted bg ──────────────── */
.dash-stat-card {
  background: var(--dash-surface);
  border: 1px solid var(--dash-border);
  border-radius: 14px;
  padding: 1.1rem;
  box-shadow: var(--dash-card-shadow);
  display: flex; align-items: center; gap: .85rem;
  cursor: pointer; text-decoration: none; color: var(--dash-text);
  transition: box-shadow var(--dash-transition), transform var(--dash-transition), border-color var(--dash-transition);
  position: relative; overflow: hidden;
}
.dash-stat-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: var(--stat-accent, #4A6B6A);
  border-radius: 3px 3px 0 0;
}
.dash-stat-card:hover {
  box-shadow: var(--dash-shadow-hover);
  transform: translateY(-2px);
  border-color: var(--stat-accent, #4A6B6A);
  text-decoration: none; color: var(--dash-text);
}
.dash-stat-val {
  font-size: 1.75rem; font-weight: 700;
  color: var(--dash-text);
  line-height: 1.1; font-family: var(--font-heading);
}
.dash-stat-label {
  font-size: .68rem; color: var(--dash-text-muted);
  text-transform: uppercase; letter-spacing: .06rem; margin-top: .1rem;
}

/* Accent color tokens for stat cards */
.clr-saffron { color: #4A6B6A !important; --stat-accent: #4A6B6A;
  background: rgba(74,107,106,.08) !important; }
.clr-purple  { color: #4A6B6A !important; --stat-accent: #4A6B6A;
  background: rgba(124,58,237,.08) !important; }
.clr-blue    { color: #2563eb !important; --stat-accent: #2563eb;
  background: rgba(37,99,235,.08) !important; }
.clr-green   { color: #16a34a !important; --stat-accent: #16a34a;
  background: rgba(22,163,74,.08) !important; }
.clr-orange  { color: #ea7317 !important; --stat-accent: #ea7317;
  background: rgba(234,115,23,.08) !important; }

/* ── NAV ITEMS — DaylioX icon-in-box style ───────────────────────────────── */
.dash-nav-item {
  display: flex; align-items: center; gap: .55rem;
  padding: .36rem .7rem;
  color: #b8d0cf; text-decoration: none;
  font-size: .82rem; font-weight: 500;
  border-radius: 8px;
  border-left: none;
  transition: background var(--dash-transition), color var(--dash-transition);
  margin: 0 .3rem;
}
.dash-nav-item i {
  width: 26px; height: 26px;
  border-radius: 7px;
  background: rgba(255,255,255,.10);
  display: flex; align-items: center; justify-content: center;
  font-size: .76rem; flex-shrink: 0; color: rgba(255,255,255,.72);
  transition: background .15s, color .15s;
  text-align: center; line-height: 26px;
}
.dash-nav-item:hover {
  background: rgba(255,255,255,.06);
  color: #e2e8f0;
}
.dash-nav-item:hover i { background: rgba(255,255,255,.12); color: #e2e8f0; }
.dash-nav-item.active {
  background: rgba(74,107,106,.15);
  color: #4A6B6A;
}
.dash-nav-item.active i {
  background: rgba(74,107,106,.2);
  color: #4A6B6A;
}
.dash-nav-item.clr-red { color: #f87171; margin: 0; border-radius: 0; }
.dash-nav-item.clr-red:hover { background: rgba(239,68,68,.08); color: #ef4444; }

/* Collapsed state icon boxes */
.dash-wrap.sidebar-collapsed .dash-nav-item {
  justify-content: center; padding: .55rem; margin: 2px .5rem;
  border-radius: 10px;
}
.dash-wrap.sidebar-collapsed .dash-nav-item i {
  width: 36px; height: 36px; font-size: .9rem; line-height: 36px;
}

/* ── RIGHT PANEL DARK MODE ───────────────────────────────────────────────── */
.drp-card {
  background: var(--dash-surface);
  border: 1px solid var(--dash-border);
  box-shadow: var(--dash-card-shadow);
}
.drp-card-head    { color: var(--dash-text-muted); }
.drp-no-plan      { color: var(--dash-text-muted); }
.drp-plan-badge   { color: var(--dash-text); }
.drp-quick-item {
  background: var(--dash-surface-alt);
  color: var(--dash-text);
  border-color: var(--dash-border);
}
.drp-quick-item:hover { background: rgba(74,107,106,.1); color: #4A6B6A; }
.drp-action-btn--ghost {
  color: var(--dash-text-muted);
  border-color: var(--dash-border);
}
.drp-action-btn--ghost:hover { background: var(--dash-surface-alt); color: var(--dash-text); }

/* Support card dark mode */
html.dark .drp-support-card {
  background: rgba(3,105,161,.12);
  border-color: rgba(125,211,252,.2);
}
html.dark .drp-support-text { color: #7dd3fc; }

/* ── TOPBAR CTA BUTTON ───────────────────────────────────────────────────── */
html.dark .dash-topbar-cta { background: #4A6B6A; color: #fff; }

/* ── MENU TOGGLE (hamburger) dark mode ───────────────────────────────────── */
html.dark .dash-menu-toggle { background: #1a2840; }

/* ── THEME TOGGLE BUTTON in sidebar ────────────────────────────────────── */
.dash-toggle-row {
  display: flex; gap: .4rem; align-items: center;
}
.dash-theme-btn {
  display: flex; align-items: center; gap: .5rem;
  flex: 1;
  padding: .45rem .65rem;
  border-radius: 8px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.1);
  color: #94a3b8; font-size: .77rem; font-weight: 600;
  cursor: pointer; transition: background .15s, color .15s;
  text-align: left; line-height: 1;
}
.dash-theme-btn:hover { background: rgba(255,255,255,.12); color: #e2e8f0; }
.dash-theme-btn i { font-size: .8rem; flex-shrink: 0; }
.dash-theme-btn .dash-nav-item-text { font-size: .74rem; }

/* Logout button styling */
.dash-logout-btn {
  display: flex; align-items: center; justify-content: center;
  padding: .45rem .65rem;
  border-radius: 8px;
  background: rgba(239,68,68,.08);
  border: 1px solid rgba(239,68,68,.2);
  color: #f87171; font-size: .77rem; font-weight: 600;
  text-decoration: none; transition: background .15s, color .15s;
  white-space: nowrap;
}
.dash-logout-btn:hover { background: rgba(239,68,68,.16); color: #ef4444; }
.dash-logout-btn i { font-size: .8rem; }
.dash-logout-btn span { margin-left: .35rem; }

/* ── DASH SECTION CARDS — dark mode ─────────────────────────────────────── */
html.dark .dash-section-card,
html.dark .dash-card,
html.dark .kp-card,
html.dark .panchanga-card,
html.dark .booking-card,
html.dark .sub-card,
html.dark .order-card,
html.dark .chart-card {
  background: var(--dash-surface) !important;
  border-color: var(--dash-border) !important;
  color: var(--dash-text) !important;
}

/* Wide panel containers */
html.dark .dash-panel-box,
html.dark .section-panel,
html.dark [class*="dash-"][class*="panel"],
html.dark [class*="dash-"][class*="-box"] {
  background: var(--dash-surface);
  border-color: var(--dash-border);
  color: var(--dash-text);
}

/* ── ACTIVE SUBSCRIPTION BANNER — dark ──────────────────────────────────── */
html.dark .dash-active-block {
  background: linear-gradient(135deg, rgba(74,107,106,.12), rgba(245,158,11,.08));
  border-color: rgba(74,107,106,.25);
}

/* ══════════════════════════════════════════════════════════════════════════════
   DASHBOARD — THEME-AWARE COMPONENT OVERRIDES
   Replaces hardcoded colours in original dash-* definitions with CSS variables
   so the dashboard respects the active site theme (timeless, midnight-gold, etc.)
   ══════════════════════════════════════════════════════════════════════════════ */

/* ── Cards ─────────────────────────────────────────────────────────────────── */
.dash-card {
  background: var(--dash-surface);
  border: 1px solid var(--dash-border);
  box-shadow: var(--dash-card-shadow);
}
.dash-card:hover { box-shadow: var(--dash-shadow-hover); }
.dash-card-head h3 { color: var(--dash-text); }
.dash-link { color: var(--dash-primary); }
.dash-link:hover { color: var(--dash-primary-dark, var(--dash-primary)); }

/* ── Section title ──────────────────────────────────────────────────────────── */
.dash-section-title,
.dash-section-header .dash-section-title { color: var(--dash-text); }

/* ── List items ─────────────────────────────────────────────────────────────── */
.dash-list-item { border-bottom-color: var(--dash-border); }
.dash-list-sub  { color: var(--dash-text-subtle); }

/* ── Quick-action tiles ──────────────────────────────────────────────────────── */
.dash-quick-item,
.dash-quick-btn {
  background: var(--dash-surface-alt);
  border-color: var(--dash-border);
  color: var(--dash-text);
}
.dash-quick-item:hover,
.dash-quick-btn:hover {
  background: var(--dash-surface);
  border-color: var(--dash-primary);
  color: var(--dash-primary);
  box-shadow: var(--dash-shadow-hover);
}

/* ── Active chart banner ──────────────────────────────────────────────────────── */
.dash-active-block {
  background: linear-gradient(135deg, var(--dash-surface-alt), var(--dash-surface));
  border-color: var(--dash-border);
}
.dash-active-left strong { color: var(--dash-text); }
.dash-active-left span   { color: var(--dash-text-muted); }
.dash-active-icon        {
  background: linear-gradient(135deg, var(--dash-primary), var(--dash-primary-dark, var(--dash-primary)));
}

/* ── Topbar CTA ───────────────────────────────────────────────────────────────── */
.dash-topbar-cta {
  background: var(--dash-primary);
  box-shadow: 0 2px 8px rgba(0,0,0,.2);
}
.dash-topbar-cta:hover { background: var(--dash-primary-dark, var(--dash-primary)); }

/* ── Menu toggle (hamburger) ──────────────────────────────────────────────────── */
.dash-menu-toggle { background: var(--footer-bg, #2E2B28); }

/* ── Nav active state using theme primary ─────────────────────────────────────── */
.dash-nav-item.active { background: rgba(0,0,0,.1); color: var(--footer-text, #fff); }
.dash-nav-item.active i { background: rgba(255,255,255,.15); color: var(--footer-text, #fff); }

/* ── Stat card colour tokens — use theme primary ─────────────────────────────── */
.clr-saffron { color: var(--primary-color, #4A6B6A) !important;
  --stat-accent: var(--primary-color, #4A6B6A);
  background: var(--section-soft, rgba(74,107,106,.08)) !important; }
.clr-purple  { color: var(--primary-color, #4A6B6A) !important;
  --stat-accent: var(--primary-color, #4A6B6A);
  background: var(--bg-secondary, rgba(74,107,106,.08)) !important; }

/* ── Sub-banner (subscription alerts in dashboard topbar area) ────────────────── */
.sub-banner {
  padding: .55rem 1.2rem;
  display: flex; align-items: center; justify-content: space-between; gap: .75rem;
  font-size: .82rem; font-weight: 500;
  border-bottom: 1px solid var(--dash-border);
}
.sub-banner a { font-weight: 600; text-decoration: underline; }
.sub-banner--warning {
  background: rgba(234,115,23,.08);
  border-bottom-color: rgba(234,115,23,.25);
  color: #9a4d0c;
}
.sub-banner--warning a { color: #7a3d09; }
.sub-banner--expiring {
  background: rgba(239,68,68,.08);
  border-bottom-color: rgba(239,68,68,.2);
  color: #b91c1c;
}
.sub-banner--expiring a { color: #991b1b; }

html.dark .sub-banner--warning  { background: rgba(234,115,23,.12); color: #fdba74; }
html.dark .sub-banner--warning a { color: #fed7aa; }
html.dark .sub-banner--expiring { background: rgba(239,68,68,.12); color: #fca5a5; }
html.dark .sub-banner--expiring a { color: #fecaca; }

/* ── Right-panel upgrade button ───────────────────────────────────────────────── */
.dash-upgrade-btn {
  background: var(--dash-primary, #4A6B6A);
  border-color: var(--dash-primary, #4A6B6A);
}
.dash-upgrade-btn:hover {
  background: var(--dash-primary-dark, #384F4E);
  border-color: var(--dash-primary-dark, #384F4E);
}

/* ── Sidebar brand / footer text ──────────────────────────────────────────────── */
.dash-sidebar-brand-name,
.dash-user-name { color: var(--footer-text, #F5F0E8); }
.dash-user-email,
.dash-currency-pill { color: rgba(255,255,255,.55); }


/* ── Subscription validity strip ─────────────────────────────────────────── */
.dash-sub-strip {
  display: flex; align-items: center; gap: .5rem;
  margin: .5rem .75rem .25rem;
  padding: .4rem .65rem;
  border-radius: 8px;
  font-size: .75rem; font-weight: 600;
  text-decoration: none;
  transition: opacity .2s;
}
.dash-sub-strip i { font-size: .8rem; flex-shrink: 0; }
.dash-sub-strip--active  { background: rgba(16,185,129,.15); color: #10b981; }
.dash-sub-strip--warn    { background: rgba(245,158,11,.15); color: #f59e0b; }
.dash-sub-strip--free    { background: rgba(99,102,241,.15); color: #818cf8; cursor: pointer; }
.dash-sub-strip--admin   { background: rgba(139,92,246,.15); color: #a78bfa; }
.dash-sub-strip--free:hover { opacity: .8; }
.dash-sub-strip--warn:hover { opacity: .8; }
.dash-wrap.sidebar-collapsed .dash-sub-strip span { display: none; }
.dash-wrap.sidebar-collapsed .dash-sub-strip { justify-content: center; padding: .4rem; border-radius: 8px; }

/* ── Locked nav items ─────────────────────────────────────────────────────── */
.dash-nav-item--locked {
  opacity: .5;
  pointer-events: auto;
  cursor: pointer;
}
.dash-nav-item--locked:hover { opacity: .75; }
.dash-lock-badge {
  margin-left: auto;
  font-size: .62rem; font-weight: 700;
  background: var(--dash-primary, #4A6B6A);
  color: #fff;
  padding: .1rem .35rem;
  border-radius: 4px;
  flex-shrink: 0;
}

/* ── Right panel plan expiry line ────────────────────────────────────────── */
.drp-plan-expiry {
  font-size: .75rem;
  color: var(--dash-text-muted);
  margin: .35rem 0 .6rem;
  display: flex; align-items: center; gap: .35rem;
}
.drp-plan-expiry strong { color: #f59e0b; }

/* ═══════════════════════════════════════════════════════════════════════════
   DARK MODE — Site Header + Top Nav (html.dark-mode OR html.dark class)
   The .dark-mode class comes from theme-timeless.js (site toggle).
   The .dark class comes from dash-sidebar.js (dashboard toggle).
   Both are handled here for consistency.
   ═══════════════════════════════════════════════════════════════════════════ */
/* Site header color overrides (navbar-bg CSS var already handles bg via theme files,
   but nav link colors need explicit dark overrides since --muted/--black are static) */

/* ── html.dark CSS variable overrides ──────────────────────────────────────
   When the dashboard toggle (html.dark) is active, the theme CSS file may still
   be the light version. Override the same CSS vars as timeless-dark.css so all
   components that use theme vars adapt correctly.
   ─────────────────────────────────────────────────────────────────────────── */
html.dark {
  --navbar-bg: rgba(26, 23, 20, 0.97);
  --text-primary: #F0F4FF;
  --text-secondary: #A8B4CC;
  --card-bg: #141B2D;
  --bg-primary: #18140F;
  --bg-secondary: #0F1628;
  --border-light: rgba(255,255,255,.08);
  --footer-bg: #070C18;
}

/* Dashboard toggle (html.dark) and site-level (html.dark-mode) nav overrides.
   Target #navbar (id) since the nav element uses that ID, not .site-header. */
html.dark #navbar,
html.dark-mode #navbar {
  background-color: rgba(18, 28, 28, 0.97) !important;
  border-bottom-color: rgba(255,255,255,.07) !important;
  box-shadow: 0 2px 16px rgba(0,0,0,.4) !important;
}
html.dark .nav-user-dropdown,
html.dark-mode .nav-user-dropdown {
  background: #1c2e2e !important;
  border-color: rgba(255,255,255,.08) !important;
  box-shadow: 0 8px 28px rgba(0,0,0,.5) !important;
}
html.dark .nav-user-dropdown a,
html.dark-mode .nav-user-dropdown a { color: #b8d8d6 !important; }
html.dark .nav-user-dropdown a:hover,
html.dark-mode .nav-user-dropdown a:hover { background: rgba(74,107,106,.18) !important; color: #a0ccca !important; }
/* Mobile menu dark */
html.dark #mobile-menu,
html.dark-mode #mobile-menu {
  background: rgba(18, 28, 28, 0.98) !important;
  border-top-color: rgba(255,255,255,.07) !important;
}

html.dark-mode .nav-item > a,
html.dark .nav-item > a { color: var(--text-secondary, #8ab5b3); }
html.dark-mode .nav-item > a:hover,
html.dark-mode .nav-item > a.active,
html.dark .nav-item > a:hover,
html.dark .nav-item > a.active { color: var(--text-primary, #cce8e6); }
html.dark-mode .brand,
html.dark .brand { color: var(--text-primary, #cce8e6) !important; }
html.dark-mode .nav-auth-link,
html.dark .nav-auth-link { color: var(--text-secondary, #8ab5b3) !important; }
html.dark-mode .nav-auth-link:hover,
html.dark .nav-auth-link:hover { color: var(--text-primary, #cce8e6) !important; }
html.dark-mode .nav-dashboard-link,
html.dark .nav-dashboard-link { background: rgba(255,255,255,.08) !important; color: var(--text-primary, #cce8e6) !important; }
html.dark-mode .site-header .dash-menu-toggle,
html.dark .site-header .dash-menu-toggle { color: var(--text-secondary, #8ab5b3); }
html.dark-mode .site-header .dash-menu-toggle:hover,
html.dark .site-header .dash-menu-toggle:hover { color: var(--text-primary, #cce8e6); background: rgba(255,255,255,.06); }
/* Header search box */
html.dark-mode .header-search,
html.dark .header-search { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.10); }
html.dark-mode .header-search input,
html.dark .header-search input { color: var(--text-primary, #cce8e6); }
html.dark-mode .header-search input::placeholder,
html.dark .header-search input::placeholder { color: rgba(255,255,255,.28); }

/* ═══════════════════════════════════════════════════════════════════════════
   DARK MODE — Dashboard content h2/h3 headings and subscription items
   ═══════════════════════════════════════════════════════════════════════════ */
html.dark-mode .dash-card h2,
html.dark-mode .dash-card h3,
html.dark-mode .dash-card-head h2,
html.dark-mode .dash-card-head h3,
html.dark-mode .dash-section h2,
html.dark-mode .dash-section h3,
html.dark-mode .sub-card h2,
html.dark-mode .sub-card h3,
html.dark-mode .order-card h2,
html.dark-mode .order-card h3,
html.dark .dash-card h2,
html.dark .dash-card h3,
html.dark .dash-card-head h2,
html.dark .dash-card-head h3,
html.dark .dash-section h2,
html.dark .dash-section h3,
html.dark .sub-card h2,
html.dark .sub-card h3,
html.dark .order-card h2,
html.dark .order-card h3 {
  color: #dde8e8 !important;
}
html.dark-mode .sub-card,
html.dark-mode .order-card,
html.dark .sub-card,
html.dark .order-card {
  background: var(--dash-surface) !important;
  border-color: var(--dash-border) !important;
  color: var(--dash-text) !important;
}
html.dark-mode .sub-card .sub-name,
html.dark-mode .sub-card strong,
html.dark-mode .order-card strong,
html.dark .sub-card .sub-name,
html.dark .sub-card strong,
html.dark .order-card strong {
  color: #dde8e8 !important;
}
html.dark-mode .sub-card .sub-meta,
html.dark-mode .sub-card small,
html.dark-mode .order-card small,
html.dark .sub-card .sub-meta,
html.dark .sub-card small,
html.dark .order-card small {
  color: var(--dash-text-muted) !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   DARK MODE — Sidebar override for both html.dark and html.dark-mode
   ═══════════════════════════════════════════════════════════════════════════ */
html.dark .dash-sidebar,
html.dark-mode .dash-sidebar { background: #1a2626 !important; }
html.dark .dash-sidebar-brand,
html.dark-mode .dash-sidebar-brand { background: rgba(0,0,0,.22) !important; }
html.dark .dash-sidebar-bottom,
html.dark-mode .dash-sidebar-bottom { background: rgba(0,0,0,.14) !important; }
html.dark .dash-sidebar-head,
html.dark-mode .dash-sidebar-head { background: rgba(255,255,255,.03) !important; }

/* ═══════════════════════════════════════════════════════════════════════════
   LIGHT MODE — Sidebar text always readable (sidebar is always dark)
   ═══════════════════════════════════════════════════════════════════════════ */
.dash-sidebar .dash-brand-name    { color: #e0eded; }
.dash-sidebar .dash-user-name     { color: #e0eded; }
.dash-sidebar .dash-user-email    { color: rgba(255,255,255,.45); }
.dash-sidebar .dash-nav-label     { color: rgba(255,255,255,.48); }
.dash-sidebar .dash-nav-item      { color: #b0cccb; }
.dash-sidebar .dash-nav-item i    { color: rgba(255,255,255,.68); }
.dash-sidebar .dash-nav-item:hover              { color: #e0eded; background: rgba(255,255,255,.07); }
.dash-sidebar .dash-nav-item:hover i            { color: rgba(255,255,255,.9); background: rgba(255,255,255,.14); }
.dash-sidebar .dash-nav-item.active             { color: #7fc8c5; background: rgba(74,107,106,.18); }
.dash-sidebar .dash-nav-item.active i           { color: #7fc8c5; background: rgba(74,107,106,.22); }
.dash-sidebar .dash-nav-item.clr-red            { color: #f87171; }
.dash-sidebar .dash-nav-item.clr-red:hover      { color: #ef4444; background: rgba(239,68,68,.09); }
.dash-sidebar .dash-collapse-btn                { color: #7a9d9b; border-color: rgba(255,255,255,.14); background: rgba(255,255,255,.06); }
.dash-sidebar .dash-collapse-btn:hover          { color: #cce8e6; background: rgba(255,255,255,.14); }

/* ══════════════════════════════════════════════════════════════════════════════
   OVERVIEW PAGE — modern redesign (ov-* namespace)
   ══════════════════════════════════════════════════════════════════════════════ */

/* ── Greeting header ── */
.ov-greeting {
  display: flex; align-items: flex-end; justify-content: space-between;
  margin-bottom: 1.75rem; flex-wrap: wrap; gap: .75rem;
}
.ov-greeting-hello {
  display: block; font-size: .72rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: .12em;
  color: var(--dash-text-muted); margin-bottom: .25rem;
}
.ov-greeting-name {
  font-family: var(--font-heading); font-size: 2.1rem; font-weight: 500;
  color: var(--dash-text); line-height: 1.05; letter-spacing: -.02em; margin: 0;
}
.ov-greeting-cta {
  display: inline-flex; align-items: center; gap: .4rem;
  padding: .55rem 1.25rem; background: var(--dash-primary); color: #fff;
  border-radius: 10px; font-size: .82rem; font-weight: 600;
  text-decoration: none; transition: background .18s, transform .15s;
  box-shadow: 0 2px 12px rgba(74,107,106,.32); white-space: nowrap; flex-shrink: 0;
}
.ov-greeting-cta:hover { background: var(--dash-primary-dark); color: #fff; transform: translateY(-1px); text-decoration: none; }

/* ── Stat cards ── */
.ov-stats {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: .9rem; margin-bottom: 1.5rem;
}
.ov-stat {
  display: flex; align-items: center; gap: .9rem;
  background: var(--dash-surface); border-radius: 14px;
  padding: 1.1rem 1.2rem; text-decoration: none; color: inherit;
  border: 1px solid var(--dash-border);
  box-shadow: 0 1px 3px rgba(0,0,0,.05), 0 0 0 1px rgba(0,0,0,.02);
  transition: transform .15s, box-shadow .18s;
  position: relative; overflow: hidden;
}
.ov-stat::after {
  content: ''; position: absolute;
  left: 0; top: 0; bottom: 0; width: 4px;
  background: var(--ov-color, #4A6B6A); border-radius: 14px 0 0 14px;
}
.ov-stat:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 24px rgba(0,0,0,.1);
  color: inherit; text-decoration: none;
}
.ov-stat--teal   { --ov-color: #4A6B6A; }
.ov-stat--amber  { --ov-color: #d97706; }
.ov-stat--emerald{ --ov-color: #059669; }
.ov-stat--violet { --ov-color: #7c3aed; }
.ov-stat-icon {
  width: 44px; height: 44px; border-radius: 12px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.1rem; color: var(--ov-color, #4A6B6A);
  background: rgba(0,0,0,.04);
}
.ov-stat--teal   .ov-stat-icon { background: rgba(74,107,106,.1); }
.ov-stat--amber  .ov-stat-icon { background: rgba(217,119,6,.1); }
.ov-stat--emerald .ov-stat-icon { background: rgba(5,150,105,.1); }
.ov-stat--violet .ov-stat-icon { background: rgba(124,58,237,.1); }
.ov-stat-val {
  font-family: var(--font-heading); font-size: 1.85rem; font-weight: 700;
  color: var(--dash-text); line-height: 1;
}
.ov-stat-lbl {
  font-size: .67rem; text-transform: uppercase; letter-spacing: .07em;
  color: var(--dash-text-muted); margin-top: .2rem;
}

/* ── Primary chart banner ── */
.ov-chart-banner {
  position: relative; overflow: hidden; border-radius: 16px;
  background: linear-gradient(125deg, #1b2e2d 0%, #223b3a 55%, #1e3635 100%);
  margin-bottom: 1.5rem; padding: 1.4rem 1.6rem;
  box-shadow: 0 4px 20px rgba(0,0,0,.18);
}
.ov-chart-banner::before {
  content: ''; position: absolute; right: -40px; top: -40px;
  width: 200px; height: 200px; border-radius: 50%;
  background: radial-gradient(circle, rgba(74,107,106,.25) 0%, transparent 70%);
  pointer-events: none;
}
.ov-chart-banner::after {
  content: ''; position: absolute; left: 60%; bottom: -30px;
  width: 120px; height: 120px; border-radius: 50%;
  background: radial-gradient(circle, rgba(255,255,255,.04) 0%, transparent 70%);
  pointer-events: none;
}
.ov-chart-banner-content {
  display: flex; align-items: center; gap: 1.1rem;
  flex-wrap: wrap; position: relative; z-index: 1;
}
.ov-chart-icon {
  width: 52px; height: 52px; border-radius: 14px; flex-shrink: 0;
  background: rgba(74,107,106,.35); display: flex; align-items: center; justify-content: center;
  color: #8ecfce; font-size: 1.4rem; border: 1px solid rgba(255,255,255,.1);
}
.ov-chart-info { flex: 1; min-width: 0; }
.ov-chart-label {
  font-size: .63rem; text-transform: uppercase; letter-spacing: .12em;
  color: rgba(255,255,255,.45); margin-bottom: .2rem;
}
.ov-chart-name {
  font-family: var(--font-heading); font-size: 1.3rem; font-weight: 500;
  color: #fff; line-height: 1.2;
}
.ov-chart-meta { font-size: .78rem; color: rgba(255,255,255,.5); margin-top: .2rem; }
.ov-chart-actions { display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; }

/* ── Empty chart state ── */
.ov-empty-chart {
  display: flex; align-items: center; gap: 1rem;
  background: var(--dash-surface); border: 1.5px dashed var(--dash-border);
  border-radius: 16px; padding: 1.3rem 1.5rem; margin-bottom: 1.5rem;
  flex-wrap: wrap;
}
.ov-empty-chart-icon { font-size: 1.85rem; color: var(--dash-primary); opacity: .55; flex-shrink: 0; }
.ov-empty-chart-text { flex: 1; min-width: 180px; }
.ov-empty-chart-title { font-size: .95rem; font-weight: 600; color: var(--dash-text); }
.ov-empty-chart-sub { font-size: .8rem; color: var(--dash-text-muted); margin-top: .2rem; line-height: 1.5; }

/* ── Shared buttons ── */
.ov-btn-primary {
  display: inline-flex; align-items: center; gap: .35rem;
  padding: .5rem 1.1rem; background: #4A6B6A; color: #fff;
  border-radius: 10px; font-size: .8rem; font-weight: 600; text-decoration: none;
  transition: background .15s, transform .12s; white-space: nowrap;
  border: none; cursor: pointer;
}
.ov-btn-primary:hover { background: #2E4E4D; color: #fff; transform: translateY(-1px); text-decoration: none; }
.ov-btn-ghost {
  display: inline-flex; align-items: center; gap: .35rem;
  padding: .5rem 1.1rem; background: rgba(255,255,255,.1); color: rgba(255,255,255,.85);
  border-radius: 10px; font-size: .8rem; font-weight: 500; text-decoration: none;
  border: 1px solid rgba(255,255,255,.18); transition: background .15s; white-space: nowrap;
}
.ov-btn-ghost:hover { background: rgba(255,255,255,.18); color: #fff; text-decoration: none; }
.ov-btn-outlined {
  display: inline-flex; align-items: center; gap: .35rem;
  padding: .5rem 1.1rem; background: transparent; color: var(--dash-primary);
  border-radius: 10px; font-size: .8rem; font-weight: 600; text-decoration: none;
  border: 1.5px solid var(--dash-primary); transition: background .15s, color .15s; white-space: nowrap; flex-shrink: 0;
}
.ov-btn-outlined:hover { background: var(--dash-primary); color: #fff; text-decoration: none; }

/* ── Two-column layout ── */
.ov-two-col {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 1rem; margin-bottom: 1.5rem;
}
@media (max-width: 768px) { .ov-two-col { grid-template-columns: 1fr; } }

/* ── Card ── */
.ov-card {
  background: var(--dash-surface); border-radius: 14px;
  border: 1px solid var(--dash-border);
  box-shadow: 0 1px 3px rgba(0,0,0,.05);
  overflow: hidden;
}
.ov-card-head {
  display: flex; justify-content: space-between; align-items: center;
  padding: .85rem 1rem .75rem; border-bottom: 1px solid var(--dash-border);
  font-size: .82rem; font-weight: 600; color: var(--dash-text);
}
.ov-card-head i { margin-right: .35rem; color: var(--dash-primary); }
.ov-card-link { font-size: .75rem; color: var(--dash-primary); text-decoration: none; font-weight: 500; }
.ov-card-link:hover { text-decoration: underline; }

/* ── Row items ── */
.ov-row {
  display: flex; align-items: center; gap: .7rem;
  padding: .75rem 1rem; border-bottom: 1px solid var(--dash-border);
}
.ov-row:last-child { border-bottom: none; }
.ov-row-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.ov-row-dot--green { background: #10b981; box-shadow: 0 0 0 3px rgba(16,185,129,.15); }
.ov-row-dot--grey  { background: #9ca3af; }
.ov-row-body { flex: 1; min-width: 0; }
.ov-row-title {
  font-size: .84rem; font-weight: 500; color: var(--dash-text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ov-row-sub { font-size: .72rem; color: var(--dash-text-muted); margin-top: .1rem; }
.ov-badge {
  display: inline-block; font-size: .63rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .04em;
  padding: .18rem .55rem; border-radius: 20px; flex-shrink: 0;
}
.ov-badge--green { background: #d1fae5; color: #065f46; }
.ov-price { font-size: .82rem; font-weight: 600; color: var(--dash-text); flex-shrink: 0; }
.ov-empty-row {
  display: flex; align-items: center; gap: .65rem;
  padding: 1.1rem 1rem; font-size: .82rem; color: var(--dash-text-muted);
}
.ov-empty-row i { font-size: .95rem; opacity: .4; }
.ov-empty-row a { color: var(--dash-primary); font-weight: 500; text-decoration: none; }
.ov-empty-row a:hover { text-decoration: underline; }

/* ── Shortcut tiles ── */
.ov-shortcuts { margin-top: .25rem; }
.ov-shortcut-label {
  font-size: .63rem; font-weight: 700; text-transform: uppercase; letter-spacing: .12em;
  color: var(--dash-text-muted); margin-bottom: .8rem;
}
.ov-shortcut-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
  gap: .65rem;
}
.ov-shortcut {
  display: flex; flex-direction: column; align-items: center; gap: .5rem;
  padding: 1rem .5rem; background: var(--dash-surface);
  border: 1px solid var(--dash-border); border-radius: 14px;
  text-decoration: none; color: var(--dash-text-muted);
  font-size: .76rem; font-weight: 500; text-align: center;
  transition: border-color .2s, color .18s, transform .18s, background .18s;
}
.ov-shortcut i { font-size: 1.3rem; color: var(--dash-primary); transition: transform .2s; }
.ov-shortcut:hover {
  border-color: var(--dash-primary); color: var(--dash-primary);
  background: rgba(74,107,106,.05);
  transform: translateY(-3px); text-decoration: none;
}
.ov-shortcut:hover i { transform: scale(1.18); }

/* ── Dark mode adjustments ── */
html.dark .ov-stat {
  box-shadow: 0 1px 3px rgba(0,0,0,.3);
}
html.dark .ov-stat:hover {
  box-shadow: 0 8px 28px rgba(0,0,0,.35);
}
html.dark .ov-badge--green { background: rgba(16,185,129,.15); color: #34d399; }
html.dark .ov-shortcut:hover { background: rgba(74,107,106,.12); }
html.dark .ov-empty-chart { border-color: rgba(255,255,255,.1); }

.about-shell {
  background:
    radial-gradient(circle at top left, rgba(255, 179, 102, 0.12), transparent 26%),
    radial-gradient(circle at bottom right, rgba(0, 163, 224, 0.08), transparent 22%),
    var(--bg-primary);
  min-height: 100vh;
}
.about-hero {
  padding: 6rem 1.25rem 4rem;
  text-align: center;
}
.about-container {
  max-width: 1000px;
  margin: 0 auto;
  padding: 0 1.25rem 6rem;
}
.section-kicker {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.45rem 0.9rem;
  border-radius: 999px;
  border: 1px solid rgba(255, 153, 51, 0.18);
  background: rgba(255, 153, 51, 0.08);
  color: var(--primary-color);
  font-size: 0.82rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-bottom: 1.5rem;
}
.about-hero h1 {
  font-size: clamp(2.5rem, 6vw, 4.5rem);
  line-height: 1.05;
  font-weight: 900;
  margin-bottom: 1.2rem;
  letter-spacing: -0.04em;
  font-family: 'Cormorant Garamond', serif;
}
.about-hero p {
  color: var(--text-secondary);
  font-size: 1.2rem;
  line-height: 1.6;
  max-width: 700px;
  margin: 0 auto;
}
.premium-card {
  padding: 2.5rem;
  border-radius: 32px;
  border: 1px solid var(--border-light);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(248, 247, 244, 0.98));
  box-shadow: var(--shadow-lg);
  margin-bottom: 3rem;
}
html.dark-mode .premium-card {
  background: linear-gradient(180deg, rgba(26, 26, 26, 0.96), rgba(37, 37, 37, 0.98));
}
.about-content h2 {
  font-size: 2rem;
  margin: 2.5rem 0 1.2rem;
  font-family: 'Cormorant Garamond', serif;
  font-weight: 700;
  color: var(--primary-color);
}
.about-content p {
  color: var(--text-secondary);
  line-height: 1.8;
  margin-bottom: 1.5rem;
  font-size: 1.05rem;
}
.about-list {
  list-style: none;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
}
.about-list li {
  display: flex;
  align-items: flex-start;
  gap: 0.8rem;
  color: var(--text-secondary);
  padding: 0.5rem 0;
}
.about-list li i {
  color: var(--primary-color);
  margin-top: 0.25rem;
}
.disclaimer-box {
  padding: 2rem;
  border-radius: 24px;
  background: rgba(255, 153, 51, 0.05);
  border: 1px solid rgba(255, 153, 51, 0.15);
  margin-top: 3rem;
}
@media (max-width: 850px) {
  .about-list { grid-template-columns: 1fr; }
}

.support-page {
  min-height: 100vh;
  background: linear-gradient(180deg, #f8fafc 0%, #ffffff 48%, #f8fafc 100%);
  color: #172033;
}
.support-hero {
  padding: 5.5rem 0 3.5rem;
  color: #ffffff;
  background:
    radial-gradient(circle at top left, rgba(203, 213, 225, 0.16), transparent 28rem),
    linear-gradient(135deg, #102033 0%, #183b54 52%, #0f766e 100%);
}
.support-hero-soft {
  background:
    radial-gradient(circle at top left, rgba(203, 213, 225, 0.18), transparent 28rem),
    linear-gradient(135deg, #102033 0%, #183b54 52%, #0f766e 100%);
}
.support-hero h1,
.support-hero h2,
.support-hero p {
  color: #ffffff;
}
.support-shell {
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 0 clamp(1rem, 3vw, 2.5rem);
}
.support-shell-top {
  padding-top: 4rem;
  padding-bottom: 4rem;
}
.support-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: 1.5rem;
  align-items: start;
}
.support-card,
.support-form-card,
.tickets-card,
.ticket-card,
.ticket-sidebar,
.chat-window-card {
  background: var(--card-bg, #ffffff) !important;
  border: 1px solid var(--card-border, #e2e8f0) !important;
  border-radius: 22px !important;
  box-shadow: var(--shadow-md) !important;
  color: var(--text-primary, #172033) !important;
}
.support-card-wide {
  grid-column: 1 / -1;
}
.section-heading {
  margin-bottom: 1.5rem;
}
.section-heading h2 {
  margin: 0 0 .5rem;
  color: var(--text-primary, #102033);
  font-family: var(--font-heading);
  font-weight: 700;
}
.section-heading p {
  margin: 0;
  color: var(--text-secondary, #64748b);
  line-height: 1.7;
}
.support-shortcuts {
  display: grid;
  gap: .75rem;
}
.support-shortcuts a,
.kb-article-card,
.kb-category-card,
.chat-history-list a {
  background: var(--bg-secondary, #f8fafc) !important;
  border: 1px solid var(--border-light, #e2e8f0) !important;
  border-radius: 16px !important;
  color: var(--text-primary, #172033) !important;
  text-decoration: none !important;
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease !important;
}
.support-shortcuts a:hover,
.kb-article-card:hover,
.kb-category-card:hover,
.chat-history-list a:hover {
  transform: translateY(-2px);
  border-color: var(--primary-color, #0f766e) !important;
  box-shadow: 0 12px 28px rgba(15, 23, 42, 0.10) !important;
}
.kb-article-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1rem;
}
.kb-category-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 1rem;
}
.kb-list {
  display: grid;
  gap: .75rem;
}
.kb-list-item {
  align-items: center;
  background: var(--bg-secondary, #f8fafc) !important;
  border: 1px solid var(--border-light, #e2e8f0) !important;
  border-radius: 16px !important;
  color: var(--text-primary, #172033) !important;
  gap: 1rem;
  justify-content: space-between;
  padding: 1rem !important;
  text-decoration: none !important;
  transition: transform .18s ease, box-shadow .18s ease !important;
}
.kb-list-item:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 28px rgba(15, 23, 42, 0.10) !important;
}
.back-link {
  color: var(--primary-color, #0f766e) !important;
  display: inline-flex !important;
  gap: .5rem !important;
  margin-bottom: 1.25rem !important;
}

.support-card-wide {
  grid-column: 1 / -1;
}
.section-heading {
  margin-bottom: 1.5rem;
}
.section-heading h2 {
  margin: 0 0 .5rem;
  color: #102033;
  font-family: var(--font-heading);
  font-weight: 700;
}
.section-heading p {
  margin: 0;
  color: #64748b;
  line-height: 1.7;
}
.support-shortcuts {
  display: grid;
  gap: .75rem;
}
.support-shortcuts a,
.kb-article-card,
.kb-category-card,
.chat-history-list a {
  background: #f8fafc !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 16px !important;
  color: #172033 !important;
  text-decoration: none !important;
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease !important;
}
.support-shortcuts a:hover,
.kb-article-card:hover,
.kb-category-card:hover,
.chat-history-list a:hover {
  transform: translateY(-2px);
  border-color: #0f766e !important;
  box-shadow: 0 12px 28px rgba(15, 23, 42, 0.10) !important;
}
.kb-article-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1rem;
}
.kb-category-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 1rem;
}
.kb-list {
  display: grid;
  gap: .75rem;
}
.kb-list-item {
  align-items: center;
  background: #f8fafc !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 16px !important;
  color: #172033 !important;
  gap: 1rem;
  justify-content: space-between;
  padding: 1rem !important;
  text-decoration: none !important;
  transition: transform .18s ease, box-shadow .18s ease !important;
}
.kb-list-item:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 28px rgba(15, 23, 42, 0.10) !important;
}
.back-link {
  color: #0f766e !important;
  display: inline-flex !important;
  gap: .5rem !important;
  margin-bottom: 1.25rem !important;
  text-decoration: none !important;
}
.chat-window-header {
  align-items: flex-start;
  display: flex;
  gap: 1rem;
  justify-content: space-between;
  margin-bottom: 1rem;
}
.chat-messages {
  background: #f8fafc !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 18px !important;
  display: flex;
  flex-direction: column;
  gap: .75rem;
  max-height: 520px;
  overflow-y: auto;
  padding: 1rem !important;
}
.chat-bubble {
  background: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 18px !important;
  max-width: 78%;
  padding: 1rem !important;
}
.chat-bubble.staff {
  background: #ecfdf5 !important;
  border-color: #a7f3d0 !important;
  margin-left: auto;
}
.chat-bubble.customer {
  background: #f8fafc !important;
  border-color: #cbd5e1 !important;
  margin-right: auto;
}
.chat-bubble p {
  line-height: 1.6;
  margin: 0;
}
.chat-composer {
  display: flex;
  gap: .75rem;
  margin-top: 1rem;
}
.chat-composer input {
  border: 1px solid #cbd5e1 !important;
  border-radius: 999px !important;
  flex: 1;
  min-height: 46px;
  padding: 0 1rem !important;
}
.ticket-layout {
  align-items: start;
  display: grid;
  gap: 1.25rem;
  grid-template-columns: minmax(0, 1fr) 330px;
}
.ticket-card-header,
.reply-header {
  background: linear-gradient(135deg, rgba(16, 32, 51, 0.04), rgba(15, 118, 110, 0.04)) !important;
  border-bottom: 1px solid var(--border-light, #e2e8f0) !important;
}
.ticket-meta,
.ticket-message,
.ticket-sidebar-item,
.reply-card,
.ticket-card,
.ticket-sidebar {
  background: var(--card-bg, #ffffff) !important;
  border: 1px solid var(--card-border, #e2e8f0) !important;
  color: var(--text-primary, #172033) !important;
}
.ticket-meta span,
.ticket-sidebar-item span {
  color: var(--text-secondary, #64748b) !important;
  font-weight: 800 !important;
  letter-spacing: .06em !important;
  text-transform: uppercase !important;
}
.reply-avatar {
  background: linear-gradient(135deg, #102033, #0f766e) !important;
}
.tickets-filter-grid {
  align-items: end;
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.tickets-table th {
  background: var(--bg-secondary, #f1f5f9) !important;
  color: var(--text-secondary, #475569) !important;
  font-weight: 800 !important;
  letter-spacing: .06em !important;
  text-transform: uppercase !important;
}
.tickets-table tbody tr:hover {
  background: var(--bg-tertiary, #f8fafc) !important;
}
.support-create-shell {
  max-width: 920px;
}
.support-create-hero h1,
.tickets-topbar h1,
.ticket-title h1 {
  color: var(--text-primary, #102033) !important;
  font-family: var(--font-heading);
}
.support-create-hero p,
.tickets-topbar p,
.ticket-title p {
  color: var(--text-secondary, #64748b) !important;
}
.support-submit,
.primary-action,
.tickets-filter button {
  background: linear-gradient(135deg, var(--primary-color, #0f766e), var(--primary-dark, #115e59)) !important;
  border-radius: 999px !important;
  box-shadow: 0 14px 30px rgba(15, 118, 110, 0.22) !important;
  color: #ffffff !important;
}
.support-cancel,
.secondary-action,
.ticket-link {
  background: var(--bg-secondary, #f8fafc) !important;
  border: 1px solid var(--border-light, #e2e8f0) !important;
  border-radius: 999px !important;
  color: var(--text-primary, #172033) !important;
}
.support-field .form-control,
.reply-form textarea.form-control,
.tickets-filter select,
.kb-search-shell input {
  background: var(--bg-primary, #ffffff) !important;
  border: 1px solid var(--border-light, #cbd5e1) !important;
  border-radius: 14px !important;
  color: var(--text-primary, #172033) !important;
}
.support-field .form-control:focus,
.reply-form textarea.form-control:focus,
.tickets-filter select:focus,
.kb-search-shell input:focus {
  border-color: #0f766e !important;
  box-shadow: 0 0 0 4px rgba(15, 118, 110, 0.12) !important;
}
@media (max-width: 900px) {
  .support-layout,
  .ticket-layout {
    grid-template-columns: 1fr;
  }
}
.support-premium-shell {
  background: linear-gradient(180deg, #f8fafc 0%, #ffffff 46%, #f8fafc 100%);
}
.support-premium-shell .about-hero {
  padding: 4.75rem 1.25rem 3rem;
}
.support-premium-shell .section-kicker {
  background: rgba(15, 118, 110, 0.08);
  border-color: rgba(15, 118, 110, 0.18);
  color: #0f766e;
}
.support-premium-shell .about-hero h1 {
  color: #102033;
  font-size: clamp(2rem, 4vw, 3.25rem);
  letter-spacing: -0.02em;
}
.support-premium-shell .about-hero p {
  color: #64748b;
  font-size: 1.05rem;
}
.support-premium-shell .premium-card {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 24px;
  box-shadow: 0 24px 60px rgba(15, 23, 42, 0.08);
}

.addon-page {
  min-height: 100vh;
  background: linear-gradient(180deg, #f8fafc 0%, #ffffff 46%, #f8fafc 100%);
}
.addon-hero {
  min-height: 100vh;
  display: flex;
  align-items: center;
  padding: 7rem 0 5rem;
  color: #ffffff;
  background:
    radial-gradient(circle at top left, rgba(203, 213, 225, 0.18), transparent 30rem),
    radial-gradient(circle at bottom right, rgba(15, 118, 110, 0.22), transparent 28rem),
    linear-gradient(135deg, #102033 0%, #183b54 52%, #0f766e 100%);
  overflow: hidden;
}
.addon-hero h1 {
  max-width: 900px;
  color: #ffffff;
  font-family: var(--font-heading);
  font-size: clamp(2.6rem, 6vw, 4.8rem);
  line-height: 1.05;
  letter-spacing: -0.04em;
}
.addon-hero p {
  max-width: 760px;
  color: rgba(255, 255, 255, 0.82);
  font-size: 1.15rem;
  line-height: 1.75;
}
.addon-shell {
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 0 clamp(1rem, 3vw, 2.5rem) 6rem;
}
.addon-card {
  background: var(--card-bg, #ffffff);
  border: 1px solid var(--card-border, #e2e8f0);
  border-radius: 24px;
  box-shadow: var(--shadow-md);
  margin-bottom: 1.5rem;
  padding: 2rem;
  color: var(--text-primary, #172033);
}
.addon-section-heading h2 {
  color: var(--text-primary, #102033);
  font-family: var(--font-heading);
  font-weight: 700;
}
.addon-section-heading p {
  color: var(--text-secondary, #64748b);
  line-height: 1.75;
}
.addon-status-grid,
.addon-info-grid {
  display: grid;
  gap: 1rem;
}
.addon-status-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.addon-status-grid div {
  background: var(--bg-secondary, #f8fafc);
  border: 1px solid var(--border-light, #e2e8f0);
  border-radius: 18px;
  padding: 1rem;
  color: var(--text-primary, #172033);
}
.addon-status-grid strong {
  display: block;
  color: var(--text-secondary, #64748b);
  font-size: .75rem;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.addon-status-grid span {
  color: var(--text-primary, #172033);
  font-weight: 700;
}
.addon-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1.25rem;
}
.addon-card-item {
  background: var(--card-bg, #ffffff);
  border: 1px solid var(--card-border, #e2e8f0);
  border-radius: 22px;
  box-shadow: 0 14px 35px rgba(15, 23, 42, 0.06);
  padding: 1.5rem;
  color: var(--text-primary, #172033);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.addon-card-item:hover {
  transform: translateY(-4px);
  border-color: var(--primary-color, #0f766e);
  box-shadow: 0 22px 50px rgba(15, 23, 42, 0.12);
}
.addon-card-item h3 {
  color: var(--text-primary, #102033);
  font-size: 1.35rem;
  margin-bottom: .75rem;
}
.addon-card-item p {
  color: var(--text-secondary, #64748b);
  line-height: 1.65;
}
.addon-price-block {
  margin: 1rem 0;
}
.addon-price-block span {
  color: var(--text-primary, #102033);
  display: block;
  font-family: var(--font-heading);
  font-size: 2rem;
  font-weight: 700;
}
.addon-price-block small {
  color: var(--text-secondary, #64748b);
}
.addon-feature-list {
  color: var(--text-secondary, #475569);
  line-height: 1.7;
  margin-bottom: 1.25rem;
}
.addon-card-actions .button {
  margin: .35rem .35rem .35rem 0;
}
.addon-info-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.addon-info-card {
  background: var(--bg-secondary, #f8fafc);
  border: 1px solid var(--border-light, #e2e8f0);
  border-radius: 20px;
  padding: 1.25rem;
  color: var(--text-primary, #172033);
}
.addon-info-card h3 {
  color: var(--text-primary, #102033);
  margin: .75rem 0 .5rem;
}
.addon-info-card p {
  color: var(--text-secondary, #64748b);
  line-height: 1.65;
  margin: 0;
}
html.dark-mode .support-card,
html.dark-mode .support-form-card,
html.dark-mode .tickets-card,
html.dark-mode .ticket-card,
html.dark-mode .ticket-sidebar,
html.dark-mode .chat-window-card {
  background: var(--card-bg) !important;
  border-color: var(--card-border) !important;
  color: var(--text-primary) !important;
  box-shadow: var(--shadow-md) !important;
}
html.dark-mode .support-shortcuts a,
html.dark-mode .kb-article-card,
html.dark-mode .kb-category-card,
html.dark-mode .kb-list-item,
html.dark-mode .chat-history-list a {
  background: var(--bg-secondary) !important;
  border-color: var(--border-light) !important;
  color: var(--text-primary) !important;
}
html.dark-mode .ticket-meta span,
html.dark-mode .ticket-sidebar-item span,
html.dark-mode .section-heading p,
html.dark-mode .addon-section-heading p,
html.dark-mode .addon-card-item p,
html.dark-mode .addon-feature-list {
  color: var(--text-secondary) !important;
}
html.dark-mode .support-create-hero h1,
html.dark-mode .tickets-topbar h1,
html.dark-mode .ticket-title h1,
html.dark-mode .addon-card-item h3,
html.dark-mode .addon-info-card h3 {
  color: var(--text-primary) !important;
}
html.dark-mode .support-field .form-control,
html.dark-mode .reply-form textarea.form-control,
html.dark-mode .tickets-filter select,
html.dark-mode .kb-search-shell input,
html.dark-mode .field input,
html.dark-mode .field textarea,
html.dark-mode .field select,
html.dark-mode .page-form input,
html.dark-mode .page-form select,
html.dark-mode .page-form textarea,
html.dark-mode .k-field input,
html.dark-mode .k-field select,
html.dark-mode .k-field textarea {
  background: var(--bg-primary) !important;
  border-color: var(--border-light) !important;
  color: var(--text-primary) !important;
}
html.dark-mode .support-submit,
html.dark-mode .primary-action,
html.dark-mode .tickets-filter button,
html.dark-mode .button-primary {
  background: linear-gradient(135deg, var(--primary-color), var(--primary-dark)) !important;
  color: #ffffff !important;
}
html.dark-mode .support-cancel,
html.dark-mode .secondary-action,
html.dark-mode .ticket-link,
html.dark-mode .button-secondary {
  background: var(--bg-secondary) !important;
  border-color: var(--border-light) !important;
  color: var(--text-primary) !important;
}
@media (max-width: 900px) {
  .addon-status-grid,
  .addon-info-grid {
    grid-template-columns: 1fr;
  }
  .addon-hero {
    align-items: flex-start;
    padding-top: 8rem;
  }
}

/* ══════════════════════════════════════════════
   DARK MODE — site-specific variable & component overrides
   Applied when html.dark-mode class is present (set by theme JS)
   ══════════════════════════════════════════════ */
html.dark-mode {
  /* Remap all light-only palette variables to navy/celestial dark */
  --bg:            #0B1020;
  --white:         #141B2D;
  --black:         #F0F4FF;
  --ink:           #C8D4E8;
  --muted:         #5C6B88;
  --light:         #3D4F6A;
  --rule:          rgba(108, 140, 255, 0.10);
  --saffron:       #D4AF37;
  --saffron-pale:  rgba(212, 175, 55, 0.10);
  --saffron-light: #E8C84A;
  --saffron-dark:  #B8960C;
  --shadow-sm:     0 2px 8px rgba(0,0,0,.40);
  --shadow-md:     0 8px 30px rgba(0,0,0,.50);
  --shadow-lg:     0 20px 60px rgba(0,0,0,.60);
}

/* ── Page & Layout ───────────────────────────── */
html.dark-mode .hero {
  background:
    radial-gradient(circle at 20% 30%, rgba(74,107,106,.12), transparent 32%),
    linear-gradient(180deg, #0B1020 0%, #0F1628 100%);
}
html.dark-mode .hero-stats { border-top-color: rgba(255,255,255,.08); }
html.dark-mode .hero-stats strong { color: #F0F4FF; }
html.dark-mode .news-hero {
  background:
    radial-gradient(circle at 20% 40%, rgba(74,107,106,.1), transparent 38%),
    linear-gradient(180deg, #0B1020 0%, #0F1628 100%);
}
html.dark-mode .page-hero {
  background: linear-gradient(180deg, #0B1020 0%, #0F1628 100%);
}
html.dark-mode .shop-page { background: #0B1020; }
html.dark-mode .contact-page { background: #0B1020; }
html.dark-mode .product-detail-page { background: #0B1020; }

/* ── Cards & Surfaces ────────────────────────── */
html.dark-mode .feature-card { background: #141B2D; }
html.dark-mode .feature-card:hover { background: rgba(74,107,106,.14); }
html.dark-mode .service-grid-card,
html.dark-mode .service-card { background: #141B2D; border-color: rgba(255,255,255,.07); }
html.dark-mode .testimonial-card { background: #141B2D; border-color: rgba(255,255,255,.07); }
html.dark-mode .testimonial-card p { color: #A8B4CC; }
html.dark-mode .testimonial-card footer strong { color: #F0F4FF; }
html.dark-mode .page-card { background: #141B2D; }
html.dark-mode .article-card { background: #141B2D; border-color: rgba(255,255,255,.07); }
html.dark-mode .article-card h2 a { color: #F0F4FF; }
html.dark-mode .plan-card { background: #141B2D; border-color: rgba(255,255,255,.08); }
html.dark-mode .plan-featured { border-color: var(--saffron); }
html.dark-mode .plan-price { color: #F0F4FF; }
html.dark-mode .plan-badge { background: var(--saffron); color: #111; }
html.dark-mode .sub-card { background: #141B2D; border-color: rgba(255,255,255,.08); }
html.dark-mode .sub-meta strong { color: #F0F4FF; }
html.dark-mode .widget-card,
html.dark-mode .report-card { background: #141B2D; box-shadow: 0 4px 20px rgba(0,0,0,.35); }
html.dark-mode .widget-card .widget-desc,
html.dark-mode .report-card .report-desc { color: #5C6B88; }
html.dark-mode .card-link { background: #141B2D; border-color: rgba(255,255,255,.08); color: #C8D4E8; }

/* ── Split / highlight sections ──────────────── */
html.dark-mode .split-image-badge { background: #141B2D; border-color: rgba(255,255,255,.1); }
html.dark-mode .split-image-badge strong { color: var(--saffron); }
html.dark-mode .split-image-badge span { color: #5C6B88; }
html.dark-mode .report-banner { background: #1A2235; border-color: rgba(74,107,106,.2); }
html.dark-mode .report-banner h3 { color: #F0F4FF; }
html.dark-mode .highlight-strip span { background: #141B2D; border-color: rgba(255,255,255,.08); color: #5C6B88; }

/* ── Search ──────────────────────────────────── */
html.dark-mode .search-card { background: #141B2D; border-color: rgba(255,255,255,.08); color: #C8D4E8; }
html.dark-mode .search-card-body p { color: #5C6B88; }
html.dark-mode .search-card-icon { background: rgba(74,107,106,.15); color: var(--saffron); }
html.dark-mode .search-product-card { background: #141B2D; border-color: rgba(255,255,255,.08); }
html.dark-mode .search-product-body h3 { color: #F0F4FF; }
html.dark-mode .search-product-body p { color: #5C6B88; }

/* ── Subcard tags ────────────────────────────── */
html.dark-mode .subcard { background: #141B2D; border-color: rgba(255,255,255,.08); color: #5C6B88; }
html.dark-mode .subcard:hover { border-color: var(--saffron); color: var(--saffron); background: rgba(212,154,36,.08); }

/* ── FAQ ──────────────────────────────────────── */
html.dark-mode .service-faq { background: #0B1020; }
html.dark-mode .faq-item { border-bottom-color: rgba(255,255,255,.08); }
html.dark-mode .faq-question { color: #F0F4FF; }
html.dark-mode .faq-answer p { color: #A8B4CC; }

/* ── Subscribe ───────────────────────────────── */
html.dark-mode .subscribe-form { border-color: rgba(255,255,255,.10); }
html.dark-mode .subscribe-form input { background: #1A2235; color: #C8D4E8; }
html.dark-mode .subscribe-form input::placeholder { color: #3D4F6A; }
html.dark-mode .subscribe-form button { background: #F0F4FF; color: #0B1020; }
html.dark-mode .subscribe-form button:hover { background: var(--saffron); color: #fff; }

/* ── Footer (site.css .site-footer, not main.css footer.footer) ── */
html.dark-mode .site-footer { background: #070C18; border-top-color: rgba(255,255,255,.07); }
html.dark-mode .footer-brand { color: #F0F4FF; }
html.dark-mode .footer-links-col h4 { color: #C8D4E8; }
html.dark-mode .footer-links-col a { color: #5C6B88; }
html.dark-mode .footer-base { border-top-color: rgba(255,255,255,.07); }
html.dark-mode .footer-base p { color: #3D4F6A; }
html.dark-mode .footer-base a { color: #5C6B88; }
html.dark-mode .footer-currency label,
html.dark-mode .header-currency label { color: #5C6B88; }
html.dark-mode .footer-currency select,
html.dark-mode .header-currency select { background: #141B2D; border-color: rgba(255,255,255,.10); color: #C8D4E8; }

/* ── Contact ──────────────────────────────────── */
html.dark-mode .contact-panel,
html.dark-mode .contact-card,
html.dark-mode .contact-form-side { background: #141B2D; border-color: rgba(255,255,255,.08); }
html.dark-mode .contact-panel h1 { color: #F0F4FF; }
html.dark-mode .contact-info-side p { color: #A8B4CC; }

/* ── Rich text / prose ───────────────────────── */
html.dark-mode .rich-text,
html.dark-mode .rich-text p,
html.dark-mode .rich-text li { color: #A8B4CC; }
html.dark-mode .rich-text h3 { color: #F0F4FF; }
html.dark-mode .prose-content { color: #A8B4CC; }
html.dark-mode .prose-content h2 { color: #F0F4FF; }
html.dark-mode .prose-content p { color: #A8B4CC; }
html.dark-mode .article-body,
html.dark-mode .article-body p,
html.dark-mode .article-body li { color: #A8B4CC; }
html.dark-mode .article-body h2,
html.dark-mode .article-body h3 { color: #F0F4FF; }

/* ── Alert boxes ──────────────────────────────── */
html.dark-mode .k-alert-info { background: rgba(37,99,235,.12); border-color: rgba(37,99,235,.30); color: #93c5fd; }
html.dark-mode .k-alert-warning { background: rgba(217,119,6,.12); border-color: rgba(217,119,6,.30); color: #fcd34d; }
html.dark-mode .k-alert-success { background: rgba(16,185,129,.12); border-color: rgba(16,185,129,.30); color: #6ee7b7; }
html.dark-mode .k-alert-error { background: rgba(239,68,68,.12); border-color: rgba(239,68,68,.30); color: #fca5a5; }

/* ── Badges / status pills ───────────────────── */
html.dark-mode .sub-status-active { background: rgba(16,185,129,.15); color: #6ee7b7; }
html.dark-mode .sub-status-trial { background: rgba(59,130,246,.15); color: #93c5fd; }
html.dark-mode .sub-status-cancelled { background: rgba(239,68,68,.15); color: #fca5a5; }
html.dark-mode .sub-status-expired { background: rgba(107,114,128,.15); color: #9ca3af; }
html.dark-mode .sub-status-past_due { background: rgba(217,119,6,.15); color: #fcd34d; }
html.dark-mode .dash-badge-green { background: rgba(16,185,129,.15); color: #6ee7b7; }
html.dark-mode .dash-badge-yellow { background: rgba(217,119,6,.15); color: #fcd34d; }
html.dark-mode .dash-badge-red { background: rgba(239,68,68,.15); color: #fca5a5; }
html.dark-mode .dash-badge-grey { background: rgba(107,114,128,.15); color: #9ca3af; }

/* ── Filter pills (shop) ─────────────────────── */
html.dark-mode .filter-pill { border-color: rgba(255,255,255,.10); color: #A8B4CC; background: transparent; }
html.dark-mode .filter-pill:hover { border-color: #6E8E8D; color: #6E8E8D; }
html.dark-mode .filter-pill.active { background: #F0F4FF; color: #0B1020; border-color: #F0F4FF; }

/* ── Profile page ────────────────────────────── */
html.dark-mode .profile-sidebar-card,
html.dark-mode .profile-section-card { background: #141B2D; border-color: rgba(255,255,255,.08); }
html.dark-mode .profile-fullname { color: #F0F4FF; }
html.dark-mode .profile-username,
html.dark-mode .profile-email { color: #5C6B88; }
html.dark-mode .profile-status-row { background: #1A2235; }
html.dark-mode .profile-login-table th { background: #1A2235; color: #5C6B88; border-bottom-color: rgba(255,255,255,.10); }
html.dark-mode .profile-login-table td { border-bottom-color: rgba(255,255,255,.06); color: #C8D4E8; }

/* ── Shop / Cart / Checkout ──────────────────── */
html.dark-mode .shop-card { background: #141B2D; border-color: rgba(255,255,255,.08); }
html.dark-mode .shop-card h2 { color: #F0F4FF; }
html.dark-mode .cart-item-row { background: #1A2235; border-color: rgba(255,255,255,.07); }
html.dark-mode .cart-item-info h3 { color: #F0F4FF; }
html.dark-mode .cart-item-info p { color: #5C6B88; }
html.dark-mode .cart-item-price { color: #C8D4E8; }
html.dark-mode .cart-qty-input { background: #0B1020; border-color: rgba(255,255,255,.10); color: #C8D4E8; }
html.dark-mode .order-row { border-bottom-color: rgba(255,255,255,.07); }
html.dark-mode .order-total-line { border-bottom-color: rgba(255,255,255,.07); }
html.dark-mode .order-row-left h3 { color: #F0F4FF; }
html.dark-mode .order-row-left p { color: #5C6B88; }
html.dark-mode .payment-option { background: #1A2235; border-color: rgba(255,255,255,.09); }
html.dark-mode .payment-option-icon { background: #141B2D; border-color: rgba(255,255,255,.10); }
html.dark-mode .payment-option-label strong { color: #F0F4FF; }
html.dark-mode .payment-option-label span { color: #5C6B88; }
html.dark-mode .coupon-panel { background: #1A2235; border-color: rgba(255,255,255,.10); }
html.dark-mode .coupon-form input { background: #141B2D; border-color: rgba(255,255,255,.10); color: #C8D4E8; }
html.dark-mode .addr-option { background: #1A2235; border-color: rgba(255,255,255,.09); }
html.dark-mode .addr-form-grid { background: #1A2235; border-color: rgba(255,255,255,.09); }
html.dark-mode .addr-form-grid input,
html.dark-mode .addr-form-grid textarea { background: #0B1020; border-color: rgba(255,255,255,.10); color: #C8D4E8; }
html.dark-mode .checkout-step-circle { background: #141B2D; border-color: rgba(255,255,255,.15); color: #5C6B88; }
html.dark-mode .checkout-step-label { color: #5C6B88; }
html.dark-mode .checkout-step.step-active .checkout-step-label,
html.dark-mode .checkout-step.step-done .checkout-step-label { color: #C8D4E8; }
html.dark-mode .order-history-item { background: #141B2D; border-color: rgba(255,255,255,.08); }
html.dark-mode .order-line-item { border-color: rgba(255,255,255,.06); }
html.dark-mode .order-history-header h2 { color: #F0F4FF; }
html.dark-mode .order-status-pill { background: rgba(212,154,36,.12); color: #E4A332; }
html.dark-mode .product-detail-main { background: #141B2D; }
html.dark-mode .product-card { background: #141B2D; border-color: rgba(255,255,255,.08); }
html.dark-mode .product-qty { background: #0B1020; border-color: rgba(255,255,255,.10); color: #C8D4E8; }

/* ── Mobile / responsive nav ─────────────────── */
html.dark-mode .site-nav { background: #0B1020; border-bottom-color: rgba(255,255,255,.08); }
html.dark-mode .nav-item > a { color: #5C6B88; }
html.dark-mode .nav-item > a:hover,
html.dark-mode .nav-item > a.active { color: #F0F4FF; }

/* ── Booking / calendar ──────────────────────── */
html.dark-mode .cal-slot { background: #141B2D; border-color: rgba(255,255,255,.08); }
html.dark-mode .cal-slot-time { color: #F0F4FF; }
html.dark-mode .cal-slot-date { color: #5C6B88; }

/* ── Suggestions dropdown ────────────────────── */
html.dark-mode .k-suggestions { background: #141B2D; border-color: rgba(255,255,255,.10); }
html.dark-mode .k-sug-item { color: #C8D4E8; border-bottom-color: rgba(255,255,255,.06); }
html.dark-mode .k-sug-item:hover { background: rgba(74,107,106,.12); }

/* ══════════════════════════════════════════════
   DARK MODE — DASHBOARD
   ══════════════════════════════════════════════ */
html.dark-mode .dash-wrap { background: var(--dash-bg, #0B1020); }
html.dark-mode .dash-main { background: var(--dash-bg, #0B1020); }
html.dark-mode .dash-topbar {
  background: var(--dash-topbar-bg, #0B1020);
  border-bottom-color: rgba(255,255,255,.08);
}
html.dark-mode .dash-topbar-title { color: var(--dash-text, #F0F4FF); }

/* Stat cards */
html.dark-mode .dash-stat-card {
  background: var(--dash-card-bg, #141B2D);
  box-shadow: 0 1px 3px rgba(0,0,0,.35), 0 0 0 1px rgba(255,255,255,.03);
  color: inherit;
}
html.dark-mode .dash-stat-card:hover {
  box-shadow: 0 4px 20px rgba(0,0,0,.42);
}
html.dark-mode .dash-stat-card.saved-chart {
  background: linear-gradient(90deg, rgba(74,107,106,.08), transparent);
  border-color: rgba(74,107,106,.12);
}
html.dark-mode .dash-stat-val { color: var(--dash-text, #F0F4FF); }
html.dark-mode .dash-stat-label { color: var(--dash-text-muted, #5C6B88); }

/* Colour token backgrounds for stat icons */
html.dark-mode .clr-saffron.dash-stat-icon { background: rgba(74,107,106,.18) !important; }
html.dark-mode .clr-purple.dash-stat-icon  { background: rgba(74,107,106,.18) !important; }
html.dark-mode .clr-blue.dash-stat-icon    { background: rgba(37,99,235,.15) !important; }
html.dark-mode .clr-green.dash-stat-icon   { background: rgba(5,150,105,.15) !important; }

/* Dashboard cards */
html.dark-mode .dash-card {
  background: var(--dash-card-bg, #141B2D);
  box-shadow: 0 1px 3px rgba(0,0,0,.30), 0 0 0 1px rgba(255,255,255,.03);
}
html.dark-mode .dash-card-head h3 { color: var(--dash-text, #F0F4FF); }
html.dark-mode .dash-list-item { border-bottom-color: rgba(255,255,255,.06); }
html.dark-mode .dash-list-sub { color: var(--dash-text-muted, #5C6B88); }
html.dark-mode .dash-section-title { color: var(--dash-text, #F0F4FF); }
html.dark-mode .dash-empty { color: var(--dash-text-muted, #5C6B88); }
html.dark-mode .dash-empty-state h3 { color: var(--dash-text, #F0F4FF); }
html.dark-mode .dash-empty-state p { color: var(--dash-text-muted, #5C6B88); }
html.dark-mode .dash-empty-state i { color: #3A3632; }

/* Active block */
html.dark-mode .dash-active-block {
  background: linear-gradient(135deg, #141B2D, #1A2235);
  border-color: rgba(74,107,106,.3);
}
html.dark-mode .dash-active-left strong { color: #F0F4FF; }
html.dark-mode .dash-active-left span { color: #5C6B88; }

/* Quick action tiles */
html.dark-mode .dash-quick-item,
html.dark-mode .dash-quick-btn {
  background: #1A2235;
  border-color: rgba(255,255,255,.08);
  color: #A8B4CC;
}
html.dark-mode .dash-quick-item:hover,
html.dark-mode .dash-quick-btn:hover {
  background: #1E2A40;
  border-color: rgba(110,142,141,.35);
  color: #C8D4E8;
}
html.dark-mode .no-chart-cta {
  background: linear-gradient(135deg, #1A2235, #0F1628);
  border-color: rgba(245,158,11,.2);
}

/* Rasi / chart grid */
html.dark-mode .rasi-grid { background: rgba(255,255,255,.06); }
html.dark-mode .rasi-cell { background: #141B2D; }
html.dark-mode .rasi-center { background: #0B1020; }
html.dark-mode .rasi-planet { color: #A8B4CC; }

/* Panchanga */
html.dark-mode .dash-panch-item,
html.dark-mode .panch-info-card { background: #1A2235; border-color: rgba(255,255,255,.06); }
html.dark-mode .dash-panch-val,
html.dark-mode .panch-info-card .pi-value { color: #F0F4FF; }
html.dark-mode .dash-panch-label,
html.dark-mode .panch-info-card .pi-label { color: #5C6B88; }
html.dark-mode .panch-planet-table th { background: #1A2235; color: #A8B4CC; border-bottom-color: rgba(255,255,255,.10); }
html.dark-mode .panch-planet-table td { border-bottom-color: rgba(255,255,255,.05); }
html.dark-mode .panch-planet-table tr:hover td { background: rgba(74,107,106,.10); }
html.dark-mode .panch-location-bar { background: #141B2D; box-shadow: 0 1px 3px rgba(0,0,0,.30); }
html.dark-mode .panch-location-bar input { background: #0B1020; border-color: rgba(255,255,255,.10); color: #C8D4E8; }

/* Divisional tabs */
html.dark-mode .dash-div-tab { background: #141B2D; border-color: rgba(255,255,255,.08); color: #A8B4CC; }
html.dark-mode .dash-div-tab.active { background: #4A6B6A; color: #fff; border-color: #4A6B6A; }
html.dark-mode .dash-div-table th { background: #1A2235; color: #A8B4CC; border-bottom-color: rgba(255,255,255,.10); }
html.dark-mode .dash-div-table td { border-bottom-color: rgba(255,255,255,.05); }

/* My Charts cards */
html.dark-mode .cc-chart-card { background: #141B2D; border-color: rgba(74,107,106,.15); }
html.dark-mode .cc-chart-card:hover { box-shadow: 0 6px 20px rgba(0,0,0,.35); }
html.dark-mode .cc-card-name { color: #F0F4FF; }
html.dark-mode .cc-card-meta { color: #5C6B88; }
html.dark-mode .cc-card-lagna { background: linear-gradient(135deg, #1A2235, #141B2D); border-color: rgba(74,107,106,.25); }
html.dark-mode .cc-lagna-val { color: #A8B4CC; }
html.dark-mode .cc-lagna-lbl { color: #3D4F6A; }
html.dark-mode .cc-card-badge { background: rgba(74,107,106,.20); color: #6E8E8D; }
html.dark-mode .cc-new-card { background: #0B1020; border-color: rgba(255,255,255,.12); color: #6E8E8D; }
html.dark-mode .cc-new-card:hover { border-color: #4A6B6A; background: #141B2D; }

/* Match report cards */
html.dark-mode .mr-card { background: #141B2D; border-color: rgba(74,107,106,.15); }
html.dark-mode .mr-card:hover { box-shadow: 0 4px 16px rgba(0,0,0,.35); }
html.dark-mode .mr-card-head:hover { background: rgba(255,255,255,.03); }
html.dark-mode .mr-names { color: #F0F4FF; }
html.dark-mode .mr-sub { color: #5C6B88; }
html.dark-mode .mr-chevron { color: #3D4F6A; }
html.dark-mode .mr-detail { background: #0B1020; border-top-color: rgba(74,107,106,.15); }
html.dark-mode .mr-kootas-table td { border-bottom-color: rgba(255,255,255,.05); }
html.dark-mode .mr-kootas-table tr:nth-child(even) td { background: rgba(255,255,255,.02); }
html.dark-mode .mr-bar-wrap { background: rgba(255,255,255,.10); }
html.dark-mode .mr-summary-bar { background: #1A2235; border-color: rgba(255,255,255,.08); }
html.dark-mode .mr-total-score { color: #6E8E8D; }
html.dark-mode .mr-total-label { color: #5C6B88; }
html.dark-mode .mr-verdict-text { color: #C8D4E8; }
html.dark-mode .mr-birth-box { background: #141B2D; }
html.dark-mode .mr-birth-box.groom,
html.dark-mode .mr-birth-box.bride { border-color: rgba(255,255,255,.08); }
html.dark-mode .mr-birth-label { color: #5C6B88; }

/* Print button */
html.dark-mode .dash-print-btn { background: #141B2D; border-color: rgba(255,255,255,.08); color: #A8B4CC; }
html.dark-mode .dash-print-btn:hover { border-color: #4A6B6A; color: #6E8E8D; }

/* Chart categories */
html.dark-mode .chart-categories { border-bottom-color: rgba(255,255,255,.08); }
html.dark-mode .chart-cat-btn { background: #1A2235; color: #A8B4CC; border: none; }
html.dark-mode .chart-cat-btn.active { background: #4A6B6A; color: #fff; }
html.dark-mode .chart-card,
html.dark-mode .chart-card-small { background: #141B2D; border-color: rgba(255,255,255,.08); }
html.dark-mode .chart-card h4 { color: #F0F4FF; }
html.dark-mode .chart-card p { color: #5C6B88; }
html.dark-mode #chartDisplayArea .back-btn { background: #141B2D; border-color: rgba(255,255,255,.10); color: #A8B4CC; }

/* ══════════════════════════════════════════════
   LIGHT MODE — navbar element refinements
   (ensures borders/backgrounds are visible on the light navbar bg)
   ══════════════════════════════════════════════ */
html.light-mode .section-heading h2 { color: var(--text-primary); }
html.light-mode .hero-stamps .hero-stamp { background: rgba(74,107,106,.08); }