/* ═══════════════════════════════════════════════════════
   VedKaal.in v2 — Complete Stylesheet
   ═══════════════════════════════════════════════════════ */

:root {
  --saffron:       #b45309;
  --saffron-light: #d97706;
  --saffron-bg:    #fff8ee;
  --saffron-deep:  #92400e;
  --green:         #15803d;
  --green-bg:      #f0fdf4;
  --green-light:   #bbf7d0;
  --red:           #b91c1c;
  --red-bg:        #fff1f1;
  --red-light:     #fecaca;
  --yellow:        #92400e;
  --yellow-bg:     #fef3c7;
  --blue:          #1d4ed8;
  --blue-bg:       #eff6ff;
  --text-primary:  #18181b;
  --text-secondary:#52525b;
  --text-muted:    #a1a1aa;
  --border:        #e2d9cc;
  --border-strong: #c9b99a;
  --bg:            #ffffff;
  --bg-card:       #faf8f5;
  --bg-page:       #f5f0e8;
  --radius:        12px;
  --radius-sm:     8px;
  --shadow:        0 1px 3px rgba(0,0,0,.08);
  --shadow-md:     0 4px 12px rgba(0,0,0,.09);
  --font:          'Noto Sans', 'Noto Sans Devanagari', system-ui, sans-serif;
  --max-width:     720px;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 16px; scroll-behavior: smooth; }
body {
  font-family: var(--font);
  background: var(--bg-page);
  color: var(--text-primary);
  line-height: 1.6;
  min-height: 100vh;
}
button { cursor: pointer; font-family: inherit; }
a { color: var(--saffron); text-decoration: none; }

.container {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 1rem;
}

/* ─── Header ──────────────────────────────────────────── */
.site-header {
  background: #fff;
  border-bottom: 1px solid var(--border);
  padding: .75rem 0;
  position: sticky;
  top: 0;
  z-index: 100;
  backdrop-filter: blur(8px);
}
.site-header .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.logo {
  display: flex;
  align-items: center;
  gap: .4rem;
  text-decoration: none;
}
.logo-symbol { font-size: 1.4rem; }
.logo-text { font-size: 1.2rem; font-weight: 700; color: var(--saffron); }
.lang-toggle {
  display: flex;
  align-items: center;
  gap: .2rem;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: .2rem .4rem;
}
.lang-btn {
  background: none; border: none;
  padding: .2rem .5rem;
  font-size: .8rem; font-weight: 600;
  color: var(--text-secondary);
  border-radius: 12px;
  transition: all .15s;
}
.lang-btn.active { background: var(--saffron); color: #fff; }
.lang-divider { color: var(--border); font-size: .7rem; }

/* ─── Clock ───────────────────────────────────────────── */
.clock-section {
  background: #fff;
  text-align: center;
  padding: 2rem 1rem 1.5rem;
  border-bottom: 1px solid var(--border);
}
.clock-time {
  font-size: clamp(2.5rem, 10vw, 4rem);
  font-weight: 700;
  letter-spacing: -.03em;
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
  line-height: 1;
  margin-bottom: .35rem;
}
.clock-date {
  font-size: .95rem;
  color: var(--text-secondary);
  margin-bottom: .75rem;
}
.clock-city {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  background: var(--saffron-bg);
  border: 1px solid #fde68a;
  border-radius: 20px;
  padding: .3rem .85rem;
  font-size: .875rem;
  font-weight: 500;
  color: var(--saffron);
}
.change-city-btn {
  background: none; border: none;
  color: var(--saffron-light);
  font-size: .75rem;
  padding: 0 0 0 .4rem;
  border-left: 1px solid #fde68a;
  margin-left: .35rem;
}

/* ─── Page body ───────────────────────────────────────── */
.page-body { padding: 1.25rem 0 3rem; }
.section-gap { margin-bottom: 1rem; }

/* ─── Smart Banner ────────────────────────────────────── */
.smart-banner {
  border-radius: var(--radius);
  padding: 1.1rem 1.25rem;
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1rem;
}
.smart-banner.neutral {
  background: var(--bg-card);
  border: 1px solid var(--border);
}
.smart-banner.good {
  background: var(--green-bg);
  border: 1px solid var(--green-light);
}
.smart-banner.bad {
  background: var(--yellow-bg);
  border: 1px solid #fde68a;
}
.banner-icon { font-size: 1.75rem; flex-shrink: 0; }
.banner-label {
  font-size: .7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--text-muted);
  margin-bottom: .2rem;
}
.banner-title {
  font-size: 1rem;
  font-weight: 700;
  color: var(--text-primary);
}
.banner-sub {
  font-size: .8rem;
  color: var(--text-secondary);
  margin-top: .1rem;
}

/* ─── Section block ───────────────────────────────────── */
.section-block {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 0;
  margin-bottom: 1rem;
}
/* Clip accordion sections so border-radius applies to header */
.accordion-section {
  overflow: hidden;
}
.section-title {
  font-size: .7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .09em;
  color: var(--text-muted);
  display: flex;
  align-items: center;
  gap: .45rem;
  margin: 0;
}
.section-title.red    { color: #b91c1c; }
.section-title.green  { color: #15803d; }
.section-title.blue   { color: #1d4ed8; }
.section-title.saffron { color: var(--saffron-deep); }

/* ─── Sun Bar ─────────────────────────────────────────── */
.sun-bar {
  display: flex;
  align-items: center;
  background: var(--saffron-bg);
  border: 1px solid #fde68a;
  border-radius: var(--radius);
  padding: .75rem 1.25rem;
  margin-bottom: 1rem;
  gap: 1rem;
}
.sun-item { display: flex; align-items: center; gap: .5rem; flex: 1; }
.sun-icon { font-size: 1.1rem; }
.sun-label { font-size: .78rem; color: var(--text-secondary); }
.sun-value { font-weight: 600; font-size: .9rem; color: var(--saffron); margin-left: auto; }
.sun-divider { width: 1px; height: 1.5rem; background: #fde68a; }

/* ─── Panchang Grid ───────────────────────────────────── */
.panchang-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .75rem;
}
.panchang-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: .875rem 1rem;
}
.card-label {
  font-size: .68rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .07em;
  color: var(--text-muted); margin-bottom: .25rem;
}
.card-value { font-size: 1rem; font-weight: 600; }
.card-sub { font-size: .76rem; color: var(--text-secondary); margin-top: .1rem; }
.card-timing { font-size: .72rem; color: var(--saffron); margin-top: .2rem; }

/* ─── Choghadiya ──────────────────────────────────────── */
.choghadiya-tabs {
  display: flex;
  gap: .5rem;
  margin-bottom: 1rem;
}
.chog-tab {
  flex: 1;
  padding: .5rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg-card);
  font-size: .8rem;
  font-weight: 600;
  color: var(--text-secondary);
  transition: all .15s;
}
.chog-tab.active {
  background: var(--saffron);
  border-color: var(--saffron);
  color: #fff;
}
.choghadiya-list { display: flex; flex-direction: column; gap: .5rem; }
.chog-slot {
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: .75rem 1rem;
  border-radius: var(--radius-sm);
  border: 1px solid transparent;
  transition: all .15s;
}
.chog-slot.best    { background: #dcfce7; border-color: #86efac; }
.chog-slot.good    { background: #f0fdf4; border-color: #bbf7d0; }
.chog-slot.neutral { background: #eff6ff; border-color: #bfdbfe; }
.chog-slot.bad     { background: #fff7ed; border-color: #fed7aa; }
.chog-slot.current { box-shadow: 0 0 0 2px var(--saffron); }
.chog-dot {
  width: 10px; height: 10px;
  border-radius: 50%; flex-shrink: 0;
}
.chog-dot.best    { background: #16a34a; }
.chog-dot.good    { background: #22c55e; }
.chog-dot.neutral { background: #3b82f6; }
.chog-dot.bad     { background: #f97316; }
.chog-name { flex: 1; }
.chog-name-en { font-weight: 600; font-size: .88rem; }
.chog-name-hi { font-size: .78rem; color: var(--text-secondary); }
.chog-time {
  font-size: .8rem;
  font-weight: 600;
  color: var(--text-primary);
  text-align: right;
  white-space: nowrap;
}
.chog-now-badge {
  font-size: .65rem;
  background: var(--saffron);
  color: #fff;
  padding: .1rem .4rem;
  border-radius: 8px;
  font-weight: 700;
}

/* ─── Muhurat by Purpose ──────────────────────────────── */
.muhurat-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .75rem;
}
.muhurat-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: .875rem 1rem;
}
.muhurat-icon { font-size: 1.25rem; margin-bottom: .35rem; }
.muhurat-label { font-size: .72rem; font-weight: 600; color: var(--text-secondary); margin-bottom: .2rem; }
.muhurat-label-hi { font-size: .68rem; color: var(--text-muted); }
.muhurat-time { font-size: .85rem; font-weight: 700; color: var(--green); margin-top: .35rem; }
.muhurat-card.past .muhurat-time { color: var(--text-muted); }
.muhurat-card.past { opacity: .65; }
.muhurat-done-badge {
  font-size: .58rem;
  font-weight: 600;
  color: var(--text-muted);
  letter-spacing: .03em;
}
.muhurat-type { font-size: .7rem; color: var(--text-muted); margin-top: .1rem; }
.muhurat-none { font-size: .78rem; color: var(--red); margin-top: .35rem; }

/* ─── Kaal List ───────────────────────────────────────── */
.kaal-list { display: flex; flex-direction: column; gap: .6rem; }
.kaal-item {
  display: flex; align-items: center; gap: .75rem;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: .75rem 1rem;
}
.kaal-dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }
.kaal-dot.rahu    { background: #dc2626; }
.kaal-dot.gulika  { background: #d97706; }
.kaal-dot.abhijit { background: #15803d; }
.kaal-info { flex: 1; }
.kaal-name { font-weight: 600; font-size: .88rem; }
.kaal-desc { font-size: .73rem; color: var(--text-secondary); margin-top: .1rem; }
.kaal-time { font-size: .85rem; font-weight: 600; white-space: nowrap; text-align: right; }

/* ─── Monthly Calendar ────────────────────────────────── */
.cal-nav {
  display: flex; align-items: center;
  justify-content: space-between;
  margin-bottom: 1rem;
}
.cal-nav-btn {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: .4rem .8rem;
  font-size: .85rem;
  color: var(--text-primary);
}
.cal-nav-btn:hover { background: var(--saffron-bg); }
.cal-month-title { font-size: 1rem; font-weight: 700; }
.cal-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 3px;
}
.cal-day-header {
  text-align: center;
  font-size: .65rem;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--text-muted);
  padding: .3rem 0;
}
.cal-day {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: .35rem .25rem;
  text-align: center;
  min-height: 56px;
  cursor: pointer;
  transition: all .15s;
}
.cal-day:hover { background: var(--saffron-bg); border-color: #fde68a; }
.cal-day.today { border-color: var(--saffron); border-width: 2px; }
.cal-day.empty { background: transparent; border-color: transparent; cursor: default; }
.cal-day.purnima  { background: #fefce8; border-color: #fde047; }
.cal-day.amavasya { background: #1e1b4b; border-color: #4338ca; }
.cal-day.amavasya .cal-d-num { color: #fff; }
.cal-day.amavasya .cal-tithi { color: #a5b4fc; }
.cal-day.ekadashi { background: #fdf4ff; border-color: #e879f9; }
.cal-d-num {
  font-size: .85rem;
  font-weight: 700;
  color: var(--text-primary);
  line-height: 1;
  margin-bottom: .15rem;
}
.cal-tithi {
  font-size: .58rem;
  color: var(--text-secondary);
  line-height: 1.2;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.cal-special-dot {
  width: 5px; height: 5px;
  border-radius: 50%;
  margin: .15rem auto 0;
}
.purnima  .cal-special-dot { background: #ca8a04; }
.ekadashi .cal-special-dot { background: #a21caf; }

/* Calendar legend */
.cal-legend {
  display: flex; gap: 1rem; flex-wrap: wrap;
  margin-top: .75rem;
  font-size: .72rem;
  color: var(--text-secondary);
}
.cal-legend-item { display: flex; align-items: center; gap: .3rem; }
.legend-dot { width: 10px; height: 10px; border-radius: 50%; }

/* ─── WhatsApp Share ──────────────────────────────────── */
.share-section { text-align: center; padding: 1rem 0 .5rem; }
.whatsapp-btn {
  display: inline-flex; align-items: center; gap: .6rem;
  background: #25d366; color: #fff; border: none;
  border-radius: 24px; padding: .75rem 1.75rem;
  font-size: .9rem; font-weight: 600;
  box-shadow: 0 2px 8px rgba(37,211,102,.35);
  transition: all .2s;
}
.whatsapp-btn:hover {
  background: #20bd5c;
  box-shadow: 0 4px 12px rgba(37,211,102,.45);
  transform: translateY(-1px);
}

/* ─── City Modal ──────────────────────────────────────── */
.city-modal {
  position: fixed; inset: 0;
  background: rgba(0,0,0,.5);
  z-index: 200;
  display: flex; align-items: center; justify-content: center;
  padding: 1rem;
  backdrop-filter: blur(4px);
}
.city-modal[hidden] { display: none; }
.city-modal-inner {
  background: #fff; border-radius: var(--radius);
  padding: 1.5rem; width: 100%; max-width: 420px;
  box-shadow: 0 20px 60px rgba(0,0,0,.2);
  position: relative;
}
.city-modal-inner h2 { font-size: 1.1rem; margin-bottom: 1rem; padding-right: 2rem; }
.modal-close {
  position: absolute; top: 1rem; right: 1rem;
  background: var(--bg-card); border: 1px solid var(--border);
  width: 28px; height: 28px; border-radius: 50%;
  font-size: .85rem;
}
#city-search-input {
  width: 100%; padding: .75rem 1rem;
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  font-size: .95rem; font-family: inherit; outline: none;
}
#city-search-input:focus { border-color: var(--saffron); }
.city-results { list-style: none; margin-top: .5rem; max-height: 280px; overflow-y: auto; }
.city-results li {
  padding: .7rem 1rem; border-radius: var(--radius-sm);
  cursor: pointer; display: flex; align-items: center;
  justify-content: space-between; transition: background .1s;
}
.city-results li:hover { background: var(--saffron-bg); }
.city-result-name { font-weight: 500; font-size: .9rem; }
.city-result-state { font-size: .75rem; color: var(--text-muted); }

/* ─── Loading ─────────────────────────────────────────── */
.loading-state { text-align: center; padding: 3rem 1rem; color: var(--text-secondary); }
.loading-spinner {
  width: 32px; height: 32px;
  border: 3px solid var(--border); border-top-color: var(--saffron);
  border-radius: 50%; animation: spin .8s linear infinite;
  margin: 0 auto 1rem;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ─── Footer ──────────────────────────────────────────── */
.site-footer {
  border-top: 1px solid var(--border);
  padding: 1.5rem 0; text-align: center;
  font-size: .78rem; color: var(--text-muted);
  background: #fff;
}
.footer-note { margin-top: .25rem; font-size: .7rem; }

/* ─── Responsive ──────────────────────────────────────── */
@media (max-width: 520px) {
  .muhurat-grid { grid-template-columns: 1fr 1fr; }
  .panchang-grid { grid-template-columns: 1fr 1fr; }
  .kaal-desc { display: none; }
  .cal-day { min-height: 48px; }
}
@media (max-width: 380px) {
  .muhurat-grid { grid-template-columns: 1fr; }
  .cal-tithi { display: none; }
}

/* ═══════════════════════════════════════════
   VedKaal v3 — Additional Styles
   ═══════════════════════════════════════════ */

/* ─── Breadcrumb ──────────────────────────── */
.breadcrumb {
  background: #fff;
  border-bottom: 1px solid var(--border);
  padding: .5rem 0;
  font-size: .78rem;
  color: var(--text-muted);
}
.breadcrumb-list {
  list-style: none;
  display: flex;
  align-items: center;
  gap: .4rem;
  flex-wrap: wrap;
}
.breadcrumb-list li { display: flex; align-items: center; gap: .4rem; }
.breadcrumb-list li:not(:last-child)::after { content: '›'; color: var(--text-muted); }
.breadcrumb-list a { color: var(--saffron); text-decoration: none; }
.breadcrumb-list a:hover { text-decoration: underline; }
.breadcrumb-list li:last-child { color: var(--text-secondary); }

/* ─── Date Navigation ─────────────────────── */
.date-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .75rem;
  margin-top: .875rem;
}
.date-nav-btn {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: .3rem .85rem;
  font-size: .78rem;
  font-weight: 600;
  color: var(--saffron);
  text-decoration: none;
  transition: all .15s;
}
.date-nav-btn:hover {
  background: var(--saffron-bg);
  border-color: #fde68a;
  text-decoration: none;
}
.date-nav-today {
  background: var(--saffron);
  color: #fff;
  border: 1px solid var(--saffron);
  border-radius: 20px;
  padding: .3rem .85rem;
  font-size: .78rem;
  font-weight: 600;
  text-decoration: none;
  transition: all .15s;
}
.date-nav-today.active {
  background: var(--bg-card);
  color: var(--text-muted);
  border-color: var(--border);
  cursor: default;
}

/* ─── Ad Slots ────────────────────────────── */
.ad-slot {
  margin-bottom: 1rem;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
}
.ad-slot:empty {
  display: none;
  margin: 0;
}
.ad-slot-top    { margin-top: .5rem; }
.ad-slot-mid    { margin: .5rem 0; }
.ad-slot-bottom { margin-top: .5rem; }

/* ─── SEO Supporting Text ─────────────────── */
.seo-text {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1rem 1.25rem;
  font-size: .82rem;
  color: var(--text-secondary);
  line-height: 1.7;
}
.seo-text strong { color: var(--text-primary); }

/* ─── Popular Cities ──────────────────────── */
.popular-cities {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.25rem;
  margin-bottom: 1rem;
}
.popular-cities-title {
  font-size: .68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--text-muted);
  margin-bottom: .875rem;
}
.popular-cities-grid {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
}
.popular-city-link {
  display: flex;
  flex-direction: column;
  align-items: center;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: .5rem .875rem;
  font-size: .82rem;
  font-weight: 600;
  color: var(--text-primary);
  text-decoration: none;
  transition: all .15s;
  line-height: 1.3;
}
.popular-city-link small {
  font-size: .65rem;
  font-weight: 400;
  color: var(--text-muted);
  margin-top: .1rem;
}
.popular-city-link:hover {
  background: var(--saffron-bg);
  border-color: #fde68a;
  color: var(--saffron);
  text-decoration: none;
}
.popular-city-link.active {
  background: var(--saffron);
  border-color: var(--saffron);
  color: #fff;
}
.popular-city-link.active small { color: #fde68a; }

/* ─── Mobile fixes (from v1 lesson) ──────── */
.kaal-time {
  font-size: .85rem;
  font-weight: 600;
  white-space: nowrap;
  text-align: right;
  flex-shrink: 0;
  min-width: 110px;
}
.sun-value {
  font-weight: 600;
  font-size: .9rem;
  color: var(--saffron);
  margin-left: auto;
  flex-shrink: 0;
  min-width: 75px;
}
.card-timing:empty { display: none; }

/* ─── Mobile Calendar Scrollable List ─────── */
@media (max-width: 600px) {
  .cal-grid    { display: none; }
  .cal-legend  { display: none; }
  .cal-list    { display: block; }
}
@media (min-width: 601px) {
  .cal-list        { display: none; }
  .cal-scroll-hint { display: none; }
}

.cal-scroll-box {
  height: 284px;
  overflow-y: auto;
  border: 0.5px solid var(--border);
  border-radius: var(--radius);
  scrollbar-width: thin;
  scrollbar-color: #d1d5db transparent;
}
.cal-scroll-box::-webkit-scrollbar { width: 4px; }
.cal-scroll-box::-webkit-scrollbar-thumb {
  background: #d1d5db;
  border-radius: 4px;
}
.cal-list-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border-bottom: 0.5px solid var(--border);
  background: var(--bg);
  font-size: 13px;
}
.cal-list-row:last-child { border-bottom: none; }
.cal-list-row.alt       { background: var(--bg-card); }
.cal-list-row.purnima   { background: #fefce8; border-bottom-color: #fde047; }
.cal-list-row.amavasya  { background: #1e1b4b; border-bottom-color: #4338ca; }
.cal-list-row.amavasya .r-date,
.cal-list-row.amavasya .r-day,
.cal-list-row.amavasya .r-tithi  { color: #fff; }
.cal-list-row.amavasya .r-paksha { color: #a5b4fc; }
.cal-list-row.ekadashi  { background: #fdf4ff; border-bottom-color: #e879f9; }
.cal-list-row.today     { border-left: 3px solid var(--saffron); }
.r-date   { font-weight: 600; min-width: 26px; font-size: 14px; }
.r-day    { min-width: 30px; font-size: 12px; color: var(--text-secondary); }
.r-tithi  { flex: 1; font-weight: 500; }
.r-paksha { font-size: 11px; color: var(--text-secondary); white-space: nowrap; }
.r-special { font-size: 14px; min-width: 20px; text-align: right; }
.cal-scroll-hint {
  text-align: center;
  font-size: 11px;
  color: var(--text-muted);
  margin-top: 6px;
}

/* ═══════════════════════════════════════════
   VedKaal v4 — Navigation + Tithi + Today
   ═══════════════════════════════════════════ */

/* ─── Header V4 ───────────────────────────── */
.header-inner {
  display: flex;
  align-items: center;
  gap: 1rem;
  height: 56px;
}
.logo-text-wrap {
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.logo-text { font-size: 1.1rem; font-weight: 700; color: var(--saffron); line-height: 1; }
.logo-tagline { font-size: .65rem; color: var(--text-muted); white-space: nowrap; }

/* ─── Desktop Nav ─────────────────────────── */
.nav-desktop {
  display: flex;
  align-items: center;
  gap: .2rem;
  flex: 1;
}
.nav-link {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: .3rem .65rem;
  border-radius: var(--radius-sm);
  font-size: .78rem;
  font-weight: 500;
  color: var(--text-secondary);
  text-decoration: none;
  border: 0.5px solid transparent;
  white-space: nowrap;
  transition: all .15s;
}
.nav-link:hover:not(.disabled) {
  background: var(--saffron-bg);
  color: var(--saffron);
  text-decoration: none;
}
.nav-link.active {
  background: var(--saffron-bg);
  border-color: #fde68a;
  color: var(--saffron);
}
.nav-link.disabled {
  opacity: .45;
  cursor: default;
  pointer-events: none;
}
.nav-icon { font-size: 13px; }
.nav-badge {
  font-size: .6rem;
  font-weight: 700;
  padding: 1px 5px;
  border-radius: 6px;
  margin-left: 2px;
}
.nav-badge.live { background: #dcfce7; color: #15803d; }
.nav-badge.v4   { background: #eff6ff; color: #1d4ed8; }
.nav-badge.soon { background: var(--bg-card); color: var(--text-muted); }

/* ─── Hamburger ───────────────────────────── */
.hamburger {
  display: none;
  flex-direction: column;
  gap: 4px;
  background: none;
  border: none;
  padding: 6px;
  cursor: pointer;
}
.hamburger span {
  display: block;
  width: 20px;
  height: 2px;
  background: var(--text-primary);
  border-radius: 2px;
  transition: all .2s;
}
.hamburger.open span:nth-child(1) { transform: rotate(45deg) translate(4px, 4px); }
.hamburger.open span:nth-child(2) { opacity: 0; }
.hamburger.open span:nth-child(3) { transform: rotate(-45deg) translate(4px, -4px); }

/* ─── Mobile Menu ─────────────────────────── */
.mobile-menu {
  border-top: 1px solid var(--border);
  background: var(--bg);
}
.mobile-menu[hidden] { display: none; }
.mobile-menu-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: .875rem 1rem;
  border-bottom: 0.5px solid var(--border);
  font-size: .9rem;
  color: var(--text-primary);
  text-decoration: none;
  transition: background .1s;
}
.mobile-menu-item:last-child { border-bottom: none; }
.mobile-menu-item:hover:not(.disabled) { background: var(--saffron-bg); }
.mobile-menu-item.active { background: var(--saffron-bg); color: var(--saffron); font-weight: 600; }
.mobile-menu-item.disabled { opacity: .45; cursor: default; }
.menu-icon { font-size: 16px; width: 24px; text-align: center; flex-shrink: 0; }

/* Hide hamburger on desktop, hide desktop nav on mobile */
@media (min-width: 700px) {
  .hamburger { display: none !important; }
  .mobile-menu { display: none !important; }
}
@media (max-width: 699px) {
  .nav-desktop { display: none; }
  .hamburger { display: flex; }
}

/* ─── Header right ────────────────────────── */
.header-right {
  display: flex;
  align-items: center;
  gap: .5rem;
  flex-shrink: 0;
}

/* ─── Panchang sub-section label ─────────── */
.panchang-subsection-label {
  font-size: .7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--text-muted);
  margin-bottom: .35rem;
}

/* ─── Multiple Tithi Section ──────────────── */
.tithi-section {
  display: flex;
  flex-direction: column;
  gap: .5rem;
}
.tithi-block {
  display: flex;
  align-items: center;
  gap: .75rem;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: .75rem 1rem;
  position: relative;
}
.tithi-block.current {
  background: var(--saffron-bg);
  border-color: #fde68a;
}
.tithi-block-info { flex: 1; }
.tithi-block-name {
  font-size: .95rem;
  font-weight: 600;
  color: var(--text-primary);
}
.tithi-block-paksha {
  font-size: .75rem;
  color: var(--text-secondary);
  margin-top: .1rem;
}
.tithi-block-time {
  font-size: .8rem;
  font-weight: 600;
  color: var(--text-secondary);
  text-align: right;
  white-space: nowrap;
  flex-shrink: 0;
}
.tithi-block.current .tithi-block-time { color: var(--saffron); }
.tithi-today-badge {
  font-size: .65rem;
  font-weight: 700;
  background: var(--saffron);
  color: #fff;
  padding: 2px 7px;
  border-radius: 8px;
  flex-shrink: 0;
}
.tithi-block.past {
  opacity: .6;
}
.tithi-block.past .tithi-block-time { color: var(--text-muted); }
.tithi-done-badge {
  font-size: .6rem;
  font-weight: 600;
  color: var(--text-muted);
  letter-spacing: .03em;
  flex-shrink: 0;
}

/* ─── Today badge on calendar ─────────────── */
.cal-day.today .cal-d-num::after {
  content: ' •';
  color: var(--saffron);
  font-size: .7rem;
}
.cal-list-row.today .r-date::after {
  content: ' ★';
  color: var(--saffron);
  font-size: .65rem;
}
@media (max-width: 600px) {
  .today-tag {
    font-size: .6rem;
    background: var(--saffron);
    color: #fff;
    padding: 1px 5px;
    border-radius: 6px;
    margin-left: 4px;
    vertical-align: middle;
  }
}

/* ─── Coming Soon Pages ───────────────────── */
.coming-soon-wrap {
  text-align: center;
  padding: 3rem 1rem 4rem;
  max-width: 480px;
  margin: 0 auto;
}
.coming-soon-icon {
  font-size: 4rem;
  margin-bottom: 1rem;
  line-height: 1;
}
.coming-soon-title {
  font-size: 1.75rem;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: .5rem;
}
.coming-soon-sub {
  font-size: .95rem;
  color: var(--text-secondary);
  margin-bottom: 2rem;
  line-height: 1.6;
}
.coming-soon-features {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .75rem;
  margin-bottom: 2rem;
  text-align: left;
}
.cs-feature {
  display: flex;
  align-items: center;
  gap: .75rem;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: .75rem 1rem;
}
.cs-feature-icon { font-size: 1.25rem; flex-shrink: 0; }
.cs-feature-title { font-size: .85rem; font-weight: 600; color: var(--text-primary); }
.cs-feature-desc  { font-size: .72rem; color: var(--text-secondary); margin-top: .1rem; }
.coming-soon-badge {
  display: inline-block;
  background: var(--saffron-bg);
  border: 1px solid #fde68a;
  color: var(--saffron);
  font-size: .85rem;
  font-weight: 600;
  padding: .5rem 1.25rem;
  border-radius: 20px;
  margin-bottom: 1.5rem;
}
.coming-soon-back {
  display: block;
  font-size: .875rem;
  color: var(--saffron);
  text-decoration: none;
  margin-top: .5rem;
}
.coming-soon-back:hover { text-decoration: underline; }
@media (max-width: 400px) {
  .coming-soon-features { grid-template-columns: 1fr; }
}

/* ─── Today Mark Fix — Desktop Calendar ──── */
.cal-day.today {
  border: 2px solid var(--saffron) !important;
  background: var(--saffron-bg) !important;
}
.cal-day.today .cal-d-num {
  color: var(--saffron);
  font-weight: 700;
}
/* Remove the ::after dot — use border instead */
.cal-day.today .cal-d-num::after { content: ''; }

/* ─── Today mark on mobile list ──────────── */
.cal-list-row.today {
  border-left: 3px solid var(--saffron) !important;
  background: var(--saffron-bg) !important;
}
.cal-list-row.today .r-date { color: var(--saffron); }

/* ═══════════════════════════════════════════
   VedKaal v4 — Two Row Desktop Header
   ═══════════════════════════════════════════ */

/* Override old single row header */
.site-header { padding: 0; }

/* ─── Row 1 — Logo + Clock + Lang ─────────── */
.header-row1 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  height: 56px;
  padding-top: .5rem;
  padding-bottom: .5rem;
}

/* ─── Header Clock (desktop only) ─────────── */
.header-clock {
  text-align: center;
  flex: 1;
}
.header-clock-time {
  font-size: 1.1rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--text-primary);
  letter-spacing: -.02em;
  line-height: 1;
}
.header-clock-city {
  font-size: .7rem;
  color: var(--text-muted);
  margin-top: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ─── Row 2 — Navigation (desktop only) ───── */
.header-row2 {
  border-top: 1px solid var(--border);
  background: var(--bg-card);
  display: none; /* hidden on mobile */
}
.header-row2 .container {
  display: flex;
  align-items: center;
  height: 40px;
  padding-top: 0;
  padding-bottom: 0;
}
.header-row2 .nav-desktop {
  display: flex;
  align-items: center;
  gap: .2rem;
  width: 100%;
}

/* Show row2 nav on desktop */
@media (min-width: 700px) {
  .header-row2 { display: block; }
  /* Hide hamburger row2 nav already hidden on mobile */
  .nav-desktop { display: flex !important; }
}

/* Hide header clock on mobile */
@media (max-width: 699px) {
  .header-clock { display: none; }
  .header-row2  { display: none !important; }
}

/* Slightly smaller nav links in row2 */
.header-row2 .nav-link {
  font-size: .75rem;
  padding: .25rem .6rem;
}

/* ═══════════════════════════════════════════
   VedKaal v5 — Static Pages + Footer Links
   ═══════════════════════════════════════════ */

/* ─── Static Page Layout ──────────────────── */
.static-page {
  max-width: 680px;
  margin: 0 auto;
  padding: 2rem 0 3rem;
}
.static-page h1 {
  font-size: 1.6rem;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: .35rem;
}
.page-intro {
  font-size: .95rem;
  color: var(--text-secondary);
  margin-bottom: 2rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--border);
}
.static-section {
  margin-bottom: 2rem;
}
.static-section h2 {
  font-size: 1rem;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: .5rem;
}
.static-section p {
  font-size: .9rem;
  color: var(--text-secondary);
  line-height: 1.7;
  margin-bottom: .75rem;
}
.static-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: .4rem;
  margin: .5rem 0;
}
.static-list li {
  font-size: .88rem;
  color: var(--text-secondary);
  padding: .4rem .75rem;
  background: var(--bg-card);
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  line-height: 1.5;
}

/* ─── Contact Card ────────────────────────── */
.contact-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin: 1rem 0;
}
.contact-item {
  display: flex;
  align-items: center;
  gap: .875rem;
}
.contact-icon { font-size: 1.25rem; flex-shrink: 0; }
.contact-label { font-size: .72rem; color: var(--text-muted); margin-bottom: .1rem; }
.contact-value { font-size: .9rem; font-weight: 500; color: var(--text-primary); }

/* ─── FAQ ─────────────────────────────────── */
.faq-list { display: flex; flex-direction: column; gap: .75rem; }
.faq-item {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
}
.faq-q {
  padding: 1rem 1.25rem;
  font-size: .9rem;
  font-weight: 600;
  color: var(--text-primary);
  cursor: pointer;
  position: relative;
}
.faq-q::after {
  content: '+';
  position: absolute;
  right: 1.25rem;
  top: 50%;
  transform: translateY(-50%);
  font-size: 1.1rem;
  color: var(--saffron);
  font-weight: 400;
}
.faq-item.open .faq-q::after { content: '−'; }
.faq-a {
  display: none;
  padding: 0 1.25rem 1rem;
  font-size: .85rem;
  color: var(--text-secondary);
  line-height: 1.7;
  border-top: 1px solid var(--border);
  padding-top: .875rem;
}
.faq-item.open .faq-a { display: block; }

/* ─── Footer Links ────────────────────────── */
.footer-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .5rem 1rem;
  margin-top: .5rem;
}
.footer-links a {
  font-size: .75rem;
  color: var(--text-muted);
  text-decoration: none;
}
.footer-links a:hover {
  color: var(--saffron);
  text-decoration: underline;
}

/* ─── Popular city button (replaces <a> tag) ─ */
button.popular-city-link {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: .5rem .875rem;
  font-size: .82rem;
  font-weight: 600;
  color: var(--text-primary);
  cursor: pointer;
  font-family: var(--font);
  display: flex;
  flex-direction: column;
  align-items: center;
  line-height: 1.3;
  transition: all .15s;
}
button.popular-city-link small {
  font-size: .65rem;
  font-weight: 400;
  color: var(--text-muted);
  margin-top: .1rem;
}
button.popular-city-link:hover {
  background: var(--saffron-bg);
  border-color: #fde68a;
  color: var(--saffron);
}
button.popular-city-link.active {
  background: var(--saffron);
  border-color: var(--saffron);
  color: #fff;
}
button.popular-city-link.active small { color: #fde68a; }

/* ─── Moon Bar ─────────────────────────────────────────── */
.moon-bar {
  display: flex;
  align-items: center;
  background: #f5f3ff;
  border: 1px solid #ddd6fe;
  border-radius: var(--radius);
  padding: .75rem 1.25rem;
  margin-bottom: 1rem;
  gap: 1rem;
}
.moon-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: 1;
  gap: .15rem;
  text-align: center;
}
.moon-divider { width: 1px; height: 1.5rem; background: #ddd6fe; flex-shrink: 0; }
.moon-label { font-size: .78rem; color: var(--text-secondary); }
.moon-value { font-weight: 600; font-size: .9rem; color: #7c3aed; }
.moon-phase-name { font-weight: 600; font-size: .82rem; color: #4c1d95; }
.moon-illum { font-size: .7rem; color: var(--text-muted); }
.moon-phase-center { gap: .1rem; }
.moon-phase-icon { font-size: 1.1rem; }
.moon-sub-date {
  display: block;
  font-size: .68rem;
  font-weight: 400;
  color: var(--text-muted);
  margin-top: .05rem;
}

/* ─── Header Clock — removed ──────────────────────────── */
.header-clock { display: none !important; }

/* ─── Date Picker Navigation ──────────────────────────── */
.date-picker-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .6rem;
  margin-top: .875rem;
}
.date-picker-input {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: .3rem .85rem;
  font-size: .8rem;
  font-weight: 600;
  color: var(--saffron);
  font-family: var(--font);
  cursor: pointer;
  outline: none;
  transition: border-color .15s;
  -webkit-appearance: none;
}
.date-picker-input:focus,
.date-picker-input:hover {
  border-color: var(--saffron);
  background: var(--saffron-bg);
}

/* ─── Countdown Date Note ─────────────────────────────── */
.countdown-date-note {
  display: flex;
  align-items: center;
  gap: .5rem;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: .65rem 1rem;
  font-size: .82rem;
  color: var(--text-secondary);
  margin-bottom: 1rem;
  line-height: 1.5;
}
.cdn-icon { font-size: 1rem; flex-shrink: 0; }
.countdown-date-note strong { color: var(--text-primary); }


.countdown-strip[hidden] {
  display: none !important;
  margin: 0 !important;
}
.countdown-strip {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: .75rem;
}
.countdown-item {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: .75rem .5rem;
  text-align: center;
}
.cd-label { font-size: .68rem; font-weight: 600; color: var(--text-secondary); margin-bottom: .3rem; }
.cd-timer {
  font-size: 1.3rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--saffron);
  letter-spacing: .03em;
}
.cd-timer.red   { color: var(--red); }
.cd-timer.green { color: var(--green); }
.cd-timer.grey  { color: var(--text-muted); }
.cd-sub { font-size: .65rem; color: var(--text-muted); margin-top: .2rem; min-height: .9rem; }
@media (max-width: 400px) {
  .cd-timer { font-size: 1.05rem; }
  .cd-label { font-size: .62rem; }
}

/* ─── Nav badge — New ──────────────────────────────────── */
.nav-badge.new { background: #16a34a; color: #fff; }

/* ─── Prayer Hijri line ────────────────────────────────── */
.prayer-hijri-line {
  font-size: .82rem;
  color: #1e3a5f;
  font-weight: 600;
  margin-top: .3rem;
  letter-spacing: .01em;
}

/* ─── Next Prayer Banner ───────────────────────────────── */
.prayer-next-banner {
  background: linear-gradient(135deg, #1e3a5f 0%, #2d5a8e 100%);
  color: #fff;
  border-radius: var(--radius);
  padding: 1rem 1.25rem;
  display: flex;
  align-items: center;
  gap: 1rem;
}
.pnb-icon { font-size: 2rem; flex-shrink: 0; }
.pnb-body { flex: 1; }
.pnb-label { font-size: .68rem; opacity: .75; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; }
.pnb-name  { font-size: 1.15rem; font-weight: 700; margin-top: .15rem; }
.pnb-desc  { font-size: .75rem; opacity: .8; margin-top: .1rem; }
.pnb-right { text-align: right; flex-shrink: 0; }
.pnb-time  { font-size: 1rem; font-weight: 600; }
.pnb-countdown {
  font-size: 1.4rem; font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: .03em;
  margin-top: .15rem;
  opacity: .9;
}

/* ─── Method Selector ──────────────────────────────────── */
.method-selector {
  display: flex;
  align-items: center;
  gap: .5rem;
  margin-bottom: .75rem;
}
.method-label { font-size: .78rem; color: var(--text-secondary); font-weight: 600; }
.method-select {
  font-size: .78rem;
  padding: .3rem .6rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg-card);
  color: var(--text-primary);
  font-family: inherit;
  cursor: pointer;
}

/* ─── Prayer List ──────────────────────────────────────── */
.prayer-list { display: flex; flex-direction: column; gap: 0; }
.prayer-row {
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: .7rem .5rem;
  border-bottom: 1px solid var(--border);
  transition: background .15s;
}
.prayer-row:last-child { border-bottom: none; }
.prayer-row.current { background: #eff6ff; border-radius: var(--radius-sm); }
.prayer-row.next    { background: #f0fdf4; border-radius: var(--radius-sm); }
.prayer-row.past .pr-time { color: var(--text-muted); }
.prayer-row.past .pr-name { color: var(--text-muted); }
.prayer-row.sunrise-row { opacity: .6; }
.pr-icon  { font-size: 1.25rem; flex-shrink: 0; }
.pr-info  { flex: 1; }
.pr-name  { font-weight: 600; font-size: .92rem; display: flex; align-items: center; gap: .4rem; }
.pr-desc  { font-size: .72rem; color: var(--text-muted); margin-top: .05rem; }
.pr-time  { font-weight: 700; font-size: .95rem; color: var(--saffron); flex-shrink: 0; }
.pr-now-badge  { background: #1e3a5f; color: #fff; font-size: .6rem; padding: .1rem .4rem; border-radius: 10px; font-weight: 600; }
.pr-next-badge { background: #16a34a; color: #fff; font-size: .6rem; padding: .1rem .4rem; border-radius: 10px; font-weight: 600; }

/* ─── World Clock ──────────────────────────────────────── */
.wc-headline { font-size: clamp(1.6rem, 6vw, 2.2rem); font-weight: 700; color: var(--saffron); }
.wc-subline  { font-size: .9rem; color: var(--text-secondary); margin-top: .25rem; }
.wc-hint     { font-size: .78rem; color: var(--text-muted); margin-bottom: .75rem; }

.wc-search-bar {
  display: flex;
  gap: .5rem;
  margin-bottom: .5rem;
}
.wc-search-input {
  flex: 1;
  padding: .6rem .9rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: .9rem;
  font-family: inherit;
  outline: none;
}
.wc-search-input:focus { border-color: var(--saffron); box-shadow: 0 0 0 2px rgba(180,83,9,.1); }
.wc-add-btn {
  padding: .6rem 1.1rem;
  background: var(--saffron);
  color: #fff;
  border: none;
  border-radius: var(--radius-sm);
  font-weight: 600;
  font-size: .88rem;
  white-space: nowrap;
}
.wc-add-btn:hover { background: var(--saffron-light); }

.wc-search-results {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-md);
  overflow: hidden;
}
.wc-result-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: .6rem .9rem;
  font-size: .88rem;
  border-bottom: 1px solid var(--border);
}
.wc-result-item:last-child { border-bottom: none; }
.wc-result-item small { color: var(--text-muted); margin-left: .3rem; }
.wc-result-add {
  background: var(--saffron);
  color: #fff;
  border: none;
  border-radius: 6px;
  padding: .25rem .65rem;
  font-size: .75rem;
  font-weight: 600;
  cursor: pointer;
}
.wc-result-add:disabled { background: var(--border); color: var(--text-muted); cursor: default; }
.wc-no-result { padding: .75rem; font-size: .85rem; color: var(--text-muted); }

/* ─── WC Card Grid ─────────────────────────────────────── */
.wc-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: .75rem;
}
.wc-card {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1rem;
  display: flex;
  flex-direction: column;
  gap: .4rem;
  box-shadow: var(--shadow);
  transition: box-shadow .15s;
}
.wc-card:hover { box-shadow: var(--shadow-md); }
.wc-card.loading-card { opacity: .7; }

.wc-card-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
}
.wc-city-name  { font-weight: 700; font-size: .95rem; }
.wc-city-state { font-size: .7rem; color: var(--text-muted); }
.wc-remove-btn {
  background: none;
  border: none;
  color: var(--text-muted);
  font-size: .75rem;
  padding: 0 .2rem;
  line-height: 1;
  flex-shrink: 0;
}
.wc-remove-btn:hover { color: var(--red); }
.wc-card-time {
  font-size: 1.5rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--saffron);
  letter-spacing: .02em;
  line-height: 1.1;
}
.wc-card-date { font-size: .72rem; color: var(--text-secondary); }
.wc-chog-bar {
  margin-top: .25rem;
  border-top: 1px solid var(--border);
  padding-top: .4rem;
}
.wc-chog-loading { font-size: .7rem; color: var(--text-muted); }
.wc-chog-slot {
  display: flex;
  align-items: center;
  gap: .4rem;
  font-size: .78rem;
}
.wc-chog-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}
.wc-chog-dot.best, .wc-chog-dot.good { background: var(--green); }
.wc-chog-dot.bad  { background: var(--red); }
.wc-chog-dot.neutral { background: var(--text-muted); }
.wc-chog-slot.best .wc-chog-name,
.wc-chog-slot.good .wc-chog-name { color: var(--green); font-weight: 600; }
.wc-chog-slot.bad .wc-chog-name  { color: var(--red);  font-weight: 600; }
.wc-chog-time { color: var(--text-muted); font-size: .7rem; margin-left: auto; }

.wc-card-footer {
  margin-top: .3rem;
  border-top: 1px solid var(--border);
  padding-top: .4rem;
  display: flex;
  align-items: center;
  gap: .5rem;
  flex-wrap: wrap;
}
.wc-sun { font-size: .7rem; color: var(--text-muted); }
.wc-panchang-link { font-size: .72rem; color: var(--saffron); margin-left: auto; font-weight: 600; }

.wc-empty {
  grid-column: 1/-1;
  text-align: center;
  padding: 2.5rem 1rem;
  color: var(--text-muted);
}
.wc-empty-icon { font-size: 2.5rem; margin-bottom: .75rem; }
.wc-empty-text { font-size: .9rem; }

/* ─── WC Presets ───────────────────────────────────────── */
.wc-presets { display: flex; flex-wrap: wrap; gap: .5rem; }
.wc-preset-btn {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: .4rem .9rem;
  font-size: .82rem;
  font-weight: 600;
  color: var(--text-primary);
  transition: all .15s;
}
.wc-preset-btn:hover {
  background: var(--saffron-bg);
  border-color: var(--saffron);
  color: var(--saffron);
}

@media (max-width: 480px) {
  .wc-grid { grid-template-columns: 1fr 1fr; }
  .wc-card-time { font-size: 1.2rem; }
  .prayer-next-banner { flex-wrap: wrap; }
  .pnb-right { width: 100%; display: flex; gap: 1rem; align-items: center; }
  .pnb-countdown { font-size: 1.1rem; }
}

/* ─── City Nudge Bar ───────────────────────────────────── */
.city-nudge {
  background: #fffbeb;
  border-bottom: 1px solid #fde68a;
  padding: .5rem 1rem;
  display: flex;
  align-items: center;
  gap: .6rem;
  font-size: .8rem;
  flex-wrap: wrap;
}
.nudge-note    { color: var(--text-muted); }
.nudge-change-btn {
  background: var(--saffron);
  color: #fff;
  border: none;
  border-radius: 6px;
  padding: .2rem .65rem;
  font-size: .75rem;
  font-weight: 600;
  cursor: pointer;
}
.nudge-dismiss {
  background: none;
  border: none;
  color: var(--text-muted);
  font-size: .8rem;
  margin-left: auto;
  cursor: pointer;
}

/* ─── Modal Coverage Note ──────────────────────────────── */
.modal-coverage-note {
  font-size: .72rem;
  color: var(--text-muted);
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: .4rem .75rem;
  margin-bottom: .75rem;
  line-height: 1.5;
}

/* ─── Modal Tabs ───────────────────────────────────────── */
.modal-tabs {
  display: flex;
  gap: .4rem;
  margin-bottom: .75rem;
  border-bottom: 1px solid var(--border);
  padding-bottom: .5rem;
}
.modal-tab {
  background: none;
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: .3rem .75rem;
  font-size: .78rem;
  font-weight: 600;
  color: var(--text-secondary);
  cursor: pointer;
  transition: all .15s;
}
.modal-tab.active {
  background: var(--saffron);
  border-color: var(--saffron);
  color: #fff;
}

/* ─── Browse Groups ────────────────────────────────────── */
#modal-browse-panel { max-height: 340px; overflow-y: auto; }
.browse-group { margin-bottom: .75rem; }
.browse-group-label {
  font-size: .72rem;
  font-weight: 700;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: .05em;
  padding: .3rem 0 .25rem;
  border-bottom: 1px solid var(--border);
  margin-bottom: .3rem;
}
.browse-city-list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.city-result-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: .5rem .4rem;
  border-radius: 6px;
  cursor: pointer;
  font-size: .85rem;
  transition: background .1s;
}
.city-result-item:hover { background: var(--saffron-bg); }
.city-result-name { font-weight: 500; }
.city-result-state { font-size: .72rem; color: var(--text-muted); }
.city-no-result { padding: .75rem; color: var(--text-muted); font-size: .85rem; list-style: none; }

/* ─── Prayer end time ──────────────────────────────────── */
.pr-end {
  font-size: .68rem;
  color: var(--text-muted);
  margin-top: .1rem;
}
.pr-time-wrap { flex-shrink: 0; text-align: right; }

/* ─── FAQ Section ──────────────────────────────────────── */
.faq-section {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius);
}
.faq-section-title {
  font-size: .78rem;
  font-weight: 700;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: .06em;
  padding: .9rem 1rem .5rem;
  border-bottom: 1px solid var(--border);
}
.faq-item {
  border-bottom: 1px solid var(--border);
}
.faq-item:last-child { border-bottom: none; }

/* details/summary based FAQ — pure HTML, no JS */
details.faq-item summary.faq-question {
  list-style: none;
  cursor: pointer;
}
details.faq-item summary.faq-question::-webkit-details-marker { display: none; }
details.faq-item[open] .faq-answer { display: block; }
details.faq-item[open] .faq-question { color: var(--saffron); }
details.faq-item[open] .faq-chevron { transform: rotate(180deg); color: var(--saffron); }

.faq-question {
  width: 100%;
  background: none;
  border: none;
  text-align: left;
  padding: .85rem 1rem;
  font-size: .88rem;
  font-weight: 600;
  color: var(--text-primary);
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: .5rem;
  font-family: inherit;
  line-height: 1.4;
  transition: background .15s;
}
.faq-question:hover { background: var(--bg-card); }
.faq-question.open   { color: var(--saffron); }
.faq-chevron {
  font-size: .7rem;
  flex-shrink: 0;
  transition: transform .2s;
  color: var(--text-muted);
}
.faq-question.open .faq-chevron { transform: rotate(180deg); }
.faq-answer {
  display: none;
  padding: 0 1rem .9rem;
  font-size: .83rem;
  color: var(--text-secondary);
  line-height: 1.65;
}
.faq-answer.open { display: block; }

/* ─── Choghadiya past slots ────────────────────────────── */
.chog-slot.past {
  opacity: .38;
}
.chog-slot.past .chog-dot {
  background: var(--border) !important;
}
.chog-past-badge {
  font-size: .6rem;
  color: var(--text-muted);
  font-weight: 500;
  letter-spacing: .02em;
}

/* ─── Timing past/active badges ───────────────────────── */
.timing-past { color: var(--text-muted); }
.timing-done-badge {
  display: inline-block;
  font-size: .58rem;
  font-weight: 700;
  color: var(--text-muted);
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: .05rem .35rem;
  margin-left: .3rem;
  vertical-align: middle;
  letter-spacing: .03em;
}
.timing-active { color: var(--green); font-weight: 600; }
.timing-now-badge {
  display: inline-block;
  font-size: .58rem;
  font-weight: 700;
  color: #fff;
  background: var(--green);
  border-radius: 4px;
  padding: .05rem .35rem;
  margin-left: .3rem;
  vertical-align: middle;
}

/* ─── Clickable calendar days ──────────────────────────── */
a.cal-day-link {
  text-decoration: none;
  color: inherit;
  display: block;
  cursor: pointer;
}
a.cal-day-link:hover {
  background: var(--saffron-bg);
  border-color: var(--saffron-light);
}
a.cal-list-row {
  text-decoration: none;
  color: inherit;
  cursor: pointer;
}
a.cal-list-row:hover { background: var(--saffron-bg); }
/* ═══════════════════════════════════════════
   VedKaal v7.1 — Accordion + Richer Design
   ═══════════════════════════════════════════ */

/* ─── Accordion Header ─────────────────────── */
.accordion-header {
  width: 100%;
  background: none;
  border: none;
  text-align: left;
  padding: .9rem 1.25rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .5rem;
  cursor: pointer;
  font-family: inherit;
  transition: background .15s;
  border-bottom: 1px solid transparent;
}
.accordion-section:not(.accordion-closed) .accordion-header {
  border-bottom-color: var(--border);
  background: var(--bg-card);
}
.accordion-header:hover {
  background: var(--bg-card);
}

/* Colored left accent per section type */
.accordion-section[data-accordion="choghadiya"]     .accordion-header { border-left: 3px solid #1d4ed8; }
.accordion-section[data-accordion="muhurat"]        .accordion-header { border-left: 3px solid #15803d; }
.accordion-section[data-accordion="panchang-details"] .accordion-header { border-left: 3px solid var(--saffron); }
.accordion-section[data-accordion="kaal"]           .accordion-header { border-left: 3px solid #b91c1c; }
.accordion-section[data-accordion="auspicious"]     .accordion-header { border-left: 3px solid #15803d; }
.accordion-section[data-accordion="calendar"]       .accordion-header { border-left: 3px solid var(--saffron); }

/* ─── Accordion Chevron ────────────────────── */
.accordion-chevron {
  font-size: .65rem;
  color: var(--text-muted);
  flex-shrink: 0;
  transition: transform .25s ease;
  line-height: 1;
}
.accordion-section:not(.accordion-closed) .accordion-chevron {
  transform: rotate(180deg);
  color: var(--saffron);
}

/* ─── Accordion Body ───────────────────────── */
.accordion-body {
  padding: 1.25rem;
}
.accordion-body[hidden] {
  display: none !important;
}

/* ─── Stronger section dividers ────────────── */
.section-block + .section-block {
  margin-top: 0;
}

/* Sun bar gets warmer border */
.sun-bar {
  border-color: #f0d9aa;
  background: linear-gradient(135deg, #fff8ee 0%, #fff3d6 100%);
}

/* Moon bar gets deeper purple tint */
.moon-bar {
  border-color: #c4b5fd;
  background: linear-gradient(135deg, #f5f3ff 0%, #ede9fe 100%);
}

/* Smart banner — good state richer */
.smart-banner.good {
  background: linear-gradient(135deg, #f0fdf4 0%, #dcfce7 100%);
  border-color: #86efac;
}
.smart-banner.bad {
  background: linear-gradient(135deg, #fffbeb 0%, #fef3c7 100%);
  border-color: #fcd34d;
}

/* Countdown strip richer */
.countdown-item {
  background: #fff;
  border: 1px solid var(--border);
  border-top: 3px solid var(--saffron);
}

/* Panchang cards get subtle left-border */
.panchang-card {
  border-left: 3px solid var(--border-strong);
}

/* kaal items — richer */
.kaal-item {
  background: var(--bg-card);
  border-color: var(--border);
}

/* ─── Section title spacing inside accordion ─ */
.accordion-header .section-title {
  margin: 0;
  pointer-events: none;
}



/* ─── Hero Clock ──────────────────────────── */
.hero-clock-section {
  background: linear-gradient(135deg, #1a0a00 0%, #3d1a00 50%, #1a0a00 100%);
  padding: 2.5rem 0 2rem;
  text-align: center;
  position: relative;
  overflow: hidden;
}
.hero-clock-section::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 50% 0%, rgba(180,83,9,.35) 0%, transparent 70%);
  pointer-events: none;
}
.hero-clock-inner { position: relative; z-index: 1; }
.hero-clock-time {
  font-size: clamp(3rem, 14vw, 6rem);
  font-weight: 800;
  letter-spacing: -.04em;
  color: #fff;
  font-variant-numeric: tabular-nums;
  line-height: 1;
  text-shadow: 0 0 40px rgba(251,146,60,.4);
}
.hero-clock-date {
  font-size: .95rem;
  color: rgba(255,255,255,.6);
  margin-top: .5rem;
  letter-spacing: .02em;
}
.hero-clock-city {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  margin-top: .75rem;
  background: rgba(255,255,255,.1);
  border: 1px solid rgba(255,255,255,.15);
  border-radius: 20px;
  padding: .35rem 1rem;
  font-size: .85rem;
  color: rgba(255,255,255,.85);
  backdrop-filter: blur(8px);
}
.hero-change-city {
  background: rgba(251,146,60,.25);
  border: 1px solid rgba(251,146,60,.4);
  color: #fb923c;
  border-radius: 10px;
  padding: .15rem .6rem;
  font-size: .72rem;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  transition: all .15s;
}
.hero-change-city:hover { background: rgba(251,146,60,.4); }

/* ─── Dashboard Strip ─────────────────────── */
.dashboard-strip {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: .75rem;
  margin-bottom: 1.25rem;
}
.dash-card {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: .875rem 1rem;
  text-align: center;
  transition: transform .15s, box-shadow .15s;
}
.dash-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}
.dash-card-label {
  font-size: .65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--text-muted);
  margin-bottom: .35rem;
}
.dash-card-value {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--text-primary);
  line-height: 1.2;
}
.dash-card-sub {
  font-size: .72rem;
  color: var(--text-secondary);
  margin-top: .2rem;
}
.chog-card  { border-top: 3px solid var(--green); }
.rahu-card  { border-top: 3px solid var(--red); }
.sun-card   { border-top: 3px solid var(--saffron); }
.moon-card  { border-top: 3px solid #7c3aed; }
.chog-card .dash-card-value  { color: var(--green); }
.rahu-card .dash-card-value  { color: var(--red); }
.sun-card  .dash-card-value  { color: var(--saffron); }
.moon-card .dash-card-value  { color: #7c3aed; }

@media (max-width: 600px) {
  .dashboard-strip { grid-template-columns: 1fr 1fr; }
}

/* ─── Feature Cards Grid ──────────────────── */
.feature-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: .875rem;
  margin-bottom: 1.25rem;
}
@media (max-width: 640px) {
  .feature-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 380px) {
  .feature-grid { grid-template-columns: 1fr; }
}

.feature-card {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.1rem 1rem;
  text-decoration: none;
  color: inherit;
  display: flex;
  flex-direction: column;
  gap: .25rem;
  transition: all .2s;
  position: relative;
  overflow: hidden;
}
.feature-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
}
.panchang-card-feat::before    { background: linear-gradient(90deg, #b45309, #d97706); }
.prayer-card-feat::before      { background: linear-gradient(90deg, #1e3a5f, #2d5a8e); }
.worldclock-card-feat::before  { background: linear-gradient(90deg, #15803d, #16a34a); }
.tamil-card-feat::before       { background: linear-gradient(90deg, #c2410c, #ea580c); }
.hebrew-card-feat::before      { background: linear-gradient(90deg, #1e3a5f, #1e40af); }
.coming-card::before           { background: linear-gradient(90deg, #6b7280, #9ca3af); }

.feature-card:hover:not(.coming-card) {
  transform: translateY(-3px);
  box-shadow: 0 8px 24px rgba(0,0,0,.1);
  border-color: transparent;
}
.coming-card { opacity: .75; cursor: default; }

.feat-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: .35rem;
}
.feat-icon { font-size: 1.5rem; }
.feat-badge {
  font-size: .58rem;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 8px;
  text-transform: uppercase;
  letter-spacing: .05em;
}
.live-badge { background: #dcfce7; color: #15803d; }
.soon-badge { background: var(--bg-card); color: var(--text-muted); }

.feat-title {
  font-size: .95rem;
  font-weight: 700;
  color: var(--text-primary);
  line-height: 1.2;
}
.feat-subtitle {
  font-size: .72rem;
  color: var(--text-muted);
  margin-bottom: .35rem;
}
.feat-details {
  display: flex;
  flex-direction: column;
  gap: .3rem;
  margin: .35rem 0;
  padding: .5rem 0;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
.feat-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: .76rem;
}
.feat-row-label { color: var(--text-muted); }
.feat-row-val   { font-weight: 600; color: var(--text-primary); text-align: right; }
.feat-nak-next  { font-size: .65rem; font-weight: 400; color: var(--text-muted); }
.feat-row-val.feat-good { color: var(--green); }
.feat-cta {
  font-size: .75rem;
  font-weight: 600;
  color: var(--saffron);
  margin-top: .35rem;
  text-align: right;
}
.feat-coming-msg {
  font-size: .75rem;
  color: var(--text-muted);
  line-height: 1.5;
  margin-top: .5rem;
  flex: 1;
}

/* ═══════════════════════════════════════════
   VedKaal — Country Hub Pages
   ═══════════════════════════════════════════ */

/* ─── Hub Header ─────────────────────────── */
.hub-header {
  background: linear-gradient(135deg, #1a0a00 0%, #3d1a00 50%, #1a0a00 100%);
  color: #fff;
  padding: 2rem 0 1.5rem;
  text-align: center;
}
.hub-flag  { font-size: 2.5rem; margin-bottom: .5rem; }
.hub-title { font-size: 1.4rem; font-weight: 700; margin-bottom: .25rem; }
.hub-date  { font-size: .82rem; opacity: .7; margin-bottom: .5rem; }
.hub-desc  { font-size: .85rem; opacity: .8; max-width: 520px; margin: 0 auto; line-height: 1.5; }

/* ─── City Grid ──────────────────────────── */
.hub-city-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: .75rem;
  margin-top: 1.5rem;
}
.hub-city-card {
  background: #fff;
  border: 1px solid var(--border);
  border-top: 3px solid var(--saffron);
  border-radius: var(--radius);
  padding: 1rem;
  text-decoration: none;
  color: var(--text-primary);
  transition: box-shadow .15s, transform .15s;
  display: flex;
  flex-direction: column;
  gap: .2rem;
}
.hub-city-card:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}
.hcc-name  { font-size: .95rem; font-weight: 700; color: var(--text-primary); }
.hcc-state { font-size: .72rem; color: var(--text-muted); }
.hcc-link  { font-size: .72rem; color: var(--saffron); margin-top: .35rem; font-weight: 600; }

/* ─── Country links grid ─────────────────── */
.hub-country-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: .5rem;
}
.hub-country-link {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .15rem;
  padding: .75rem .5rem;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  text-decoration: none;
  color: var(--text-primary);
  font-size: .82rem;
  font-weight: 600;
  text-align: center;
  transition: background .15s;
}
.hub-country-link:hover { background: var(--saffron-bg); }
.hub-country-link span:first-child { font-size: 1.4rem; }
.hub-country-link small { font-size: .68rem; color: var(--text-muted); font-weight: 400; }

@media (max-width: 480px) {
  .hub-city-grid { grid-template-columns: repeat(2, 1fr); }
  .hub-country-grid { grid-template-columns: repeat(3, 1fr); }
}