/* ==========================================================================
   PUJAYANTRA — ULTRA PREMIUM DIGITAL MANDIR 2.0 DESIGN SYSTEM
   ========================================================================== */

:root {
  --paper: #fffcf7;
  --paper-warm: #fcf6ea;
  --ink: #382419;
  --ink-muted: #6e5847;
  --maroon: #731b23;
  --maroon-dark: #4b1016;
  --maroon-light: #942933;
  --saffron: #c85a17;
  --saffron-light: #e67e22;
  --gold: #d4af37;
  --gold-dark: #a17822;
  --gold-light: #fcedb6;
  --gold-shimmer: #fff5cc;
  --sandstone: #f8eccf;
  --line: #e3cca0;
  --line-gold: #d4af37;
  --shadow-warm: rgba(100, 55, 20, 0.16);
  --serif: 'Cinzel', 'Playfair Display', 'Noto Serif Devanagari', Georgia, serif;
}

/* --------------------------------------------------------------------------
   BASE & TEMPLE BACKGROUND AMBIENCE
   -------------------------------------------------------------------------- */
body {
  background: radial-gradient(circle at 50% 15%, #fffefb 0%, #faeed5 50%, #f4e0ba 100%);
  background-attachment: fixed;
  color: var(--ink);
  margin: 0;
  min-height: 100vh;
  font-feature-settings: 'cv02', 'cv03', 'cv04', 'cv11';
  -webkit-font-smoothing: antialiased;
}

/* Golden Carved Temple Pillars on Desktop */
@media (min-width: 1280px) {
  body {
    position: relative;
    padding-left: 96px;
    padding-right: 96px;
    box-sizing: border-box;
  }
  body::before {
    content: "";
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    width: 96px;
    background: url('/assets/temple/pillar-left.webp') top left / 96px auto repeat-y;
    z-index: 99;
    pointer-events: none;
    box-shadow: 6px 0 24px rgba(70, 35, 10, 0.28);
    border-right: 1.5px solid rgba(212, 175, 55, 0.45);
  }
  body::after {
    content: "";
    position: fixed;
    top: 0;
    bottom: 0;
    right: 0;
    width: 96px;
    background: url('/assets/temple/pillar-right.webp') top right / 96px auto repeat-y;
    z-index: 99;
    pointer-events: none;
    box-shadow: -6px 0 24px rgba(70, 35, 10, 0.28);
    border-left: 1.5px solid rgba(212, 175, 55, 0.45);
  }
}

/* --------------------------------------------------------------------------
   SITE HEADER & NAVIGATION
   -------------------------------------------------------------------------- */
.site-header {
  background: #faf6ee;
  border-bottom: 1.5px solid rgba(212, 175, 55, 0.45);
  box-shadow: 0 4px 18px rgba(160, 115, 45, 0.12);
  position: sticky;
  top: 0;
  z-index: 100;
  padding: 8px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 64px;
  box-sizing: border-box;
}

.header-brand-wrap {
  display: flex;
  align-items: center;
  gap: 14px;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--maroon);
  font-family: var(--serif);
  font-weight: 700;
  letter-spacing: -0.01em;
  text-decoration: none;
  font-size: 22px;
}
.brand-mark {
  color: var(--gold-dark);
  filter: drop-shadow(0 1px 2px rgba(0,0,0,0.15));
  display: inline-flex;
  align-items: center;
}
.brand-mark svg {
  width: 26px;
  height: 26px;
}
.brand-title {
  display: flex;
  flex-direction: column;
  line-height: 1.1;
}
.brand-accent { color: var(--gold); }
#header-brand-tagline {
  display: block;
  font-size: 8px;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: #8c5a2b;
  margin-top: 1px;
}

/* Language Switcher */
.lang-switch-wrap {
  display: inline-flex;
  align-items: center;
  background: #fdf5e2;
  border: 1.5px solid var(--gold);
  border-radius: 999px;
  padding: 2px 4px;
  box-shadow: 0 2px 6px rgba(181, 138, 61, 0.12);
}
.lang-btn {
  background: none;
  border: none;
  padding: 3px 8px;
  font-size: 11.5px;
  font-weight: 700;
  color: #794e1b;
  cursor: pointer;
  border-radius: 999px;
  transition: all 0.2s ease;
}
.lang-btn.active {
  background: linear-gradient(135deg, var(--maroon) 0%, var(--maroon-dark) 100%) !important;
  color: #fff9e6 !important;
  box-shadow: 0 2px 6px rgba(115, 27, 35, 0.3);
}

/* Center Site Navigation */
.site-nav {
  display: flex;
  align-items: center;
  gap: 4px;
}
.site-nav .nav-item {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 4px 10px;
  border-radius: 12px;
  text-decoration: none;
  color: #4a2810;
  font-weight: 600;
  font-size: 11px;
  transition: all 0.2s ease;
  border: 1px solid transparent;
  min-height: 44px;
  box-sizing: border-box;
}
.site-nav .nav-item .nav-icon {
  font-size: 15px;
  line-height: 1.1;
  margin-bottom: 2px;
}
.site-nav .nav-item .nav-text {
  font-size: 11px;
  white-space: nowrap;
}
.site-nav .nav-item:hover {
  background: rgba(212, 175, 55, 0.12);
  border-color: rgba(212, 175, 55, 0.35);
}
.site-nav .nav-item.active {
  background: #fdf2d9;
  border-color: #d4af37;
  color: #731b23;
  font-weight: 700;
  box-shadow: 0 2px 6px rgba(181, 138, 61, 0.15);
}

/* Nav More Dropdown */
.nav-dropdown {
  position: relative;
  display: inline-block;
}
.nav-dropdown-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: #fffcf5;
  border: 1.5px solid rgba(212, 175, 55, 0.45);
  border-radius: 999px;
  padding: 5px 12px;
  font-size: 12px;
  font-weight: 700;
  color: #4a2810;
  cursor: pointer;
  transition: all 0.2s ease;
}
.nav-dropdown-btn:hover {
  background: #fdf5e2;
  border-color: var(--gold);
}
.nav-caret {
  font-size: 10px;
  color: #8c5a2b;
}
.nav-dropdown-menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  background: #fffdf8;
  border: 1.5px solid var(--gold);
  border-radius: 14px;
  box-shadow: 0 12px 32px rgba(70, 35, 10, 0.2);
  min-width: 190px;
  padding: 6px 0;
  z-index: 1000;
  display: flex;
  flex-direction: column;
}
.nav-dropdown-menu[hidden] {
  display: none !important;
}
.dropdown-link {
  padding: 8px 16px;
  font-size: 13px;
  color: #4a2810;
  text-decoration: none;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 8px;
  transition: background 0.15s ease;
}
.dropdown-link:hover {
  background: #faeed2;
  color: var(--maroon);
}

/* Header Right Actions */
.header-right-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

.header-notif-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: #fffcf5;
  border: 1.5px solid var(--gold);
  color: var(--maroon);
  font-size: 16px;
  cursor: pointer;
  box-shadow: 0 2px 6px rgba(181, 138, 61, 0.18);
  transition: all 0.2s ease;
}
.header-notif-btn:hover {
  transform: translateY(-2px);
  background: #fdf5e2;
}
.header-notif-btn .notif-badge {
  position: absolute;
  top: -4px;
  right: -4px;
  background: #dc2626;
  color: #fff;
  font-size: 10px;
  font-weight: 800;
  min-width: 18px;
  height: 18px;
  border-radius: 9px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 4px;
  border: 1.5px solid #fff;
  box-shadow: 0 2px 5px rgba(0,0,0,0.3);
  line-height: 1;
}

/* Header Devotee Profile Pill Button */
.header-profile-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #fffcf5;
  border: 1.5px solid rgba(212, 175, 55, 0.5);
  border-radius: 999px;
  padding: 5px 12px;
  font-size: 13px;
  font-weight: 700;
  color: #4a2810;
  cursor: pointer;
  transition: all 0.2s ease;
  box-shadow: 0 2px 6px rgba(181, 138, 61, 0.12);
}
.header-profile-btn:hover {
  border-color: var(--gold);
  background: #fdf5e2;
  transform: translateY(-1px);
}
.profile-avatar-circle {
  font-size: 14px;
}
.profile-caret {
  font-size: 10px;
  color: #8c5a2b;
}

/* --------------------------------------------------------------------------
   CINEMATIC TEMPLE HERO (DESKTOP & MOBILE 3.0)
   -------------------------------------------------------------------------- */
.hero.section-wrap {
  max-width: 1440px;
  width: calc(100% - 48px);
  margin: 10px auto 20px !important;
  min-height: 580px !important;
  padding: 24px 36px 30px !important;
  border: 2px solid rgba(212, 175, 55, 0.55);
  border-radius: 36px !important;
  background: linear-gradient(90deg, 
    rgba(255, 252, 245, 0.98) 0%, 
    rgba(255, 250, 240, 0.96) 44%, 
    rgba(255, 250, 240, 0.35) 60%, 
    rgba(255, 250, 240, 0) 74%
  ), url('/assets/temple/hero.webp') right 20% / cover no-repeat !important;
  box-shadow: 0 16px 50px rgba(95, 50, 15, 0.16), inset 0 0 0 1px rgba(255, 255, 255, 0.9);
  overflow: hidden;
  display: grid;
  grid-template-columns: 48fr 52fr;
  gap: 28px !important;
  align-items: center;
  position: relative;
  box-sizing: border-box;
}

/* Shimmering Golden Crown on Hero */
.hero.section-wrap::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 8px;
  background: linear-gradient(90deg, transparent 0%, var(--gold) 20%, #fef3c7 50%, var(--gold) 80%, transparent 100%);
  opacity: 0.9;
  z-index: 3;
}

/* LEFT SIDE: Hero Typography & Actions */
.hero-copy {
  position: relative;
  z-index: 2;
  max-width: 100%;
  padding: 2px 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.hero .pill {
  background: rgba(255, 248, 230, 0.92);
  border: 1.5px solid var(--gold);
  color: #794e1b;
  font-weight: 700;
  font-size: 11.5px !important;
  letter-spacing: 0.04em;
  padding: 4px 12px !important;
  border-radius: 999px;
  box-shadow: 0 2px 6px rgba(181, 138, 61, 0.16);
  margin-bottom: 8px !important;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.eyebrow-star {
  color: #d4af37;
  font-size: 13px;
  line-height: 1;
}

.hero h1 {
  color: #420d12 !important;
  font-family: var(--serif, 'Noto Serif Devanagari', serif) !important;
  font-size: clamp(34px, 3.4vw, 44px) !important;
  line-height: 1.15 !important;
  letter-spacing: -0.01em !important;
  margin: 4px 0 6px !important;
  text-shadow: 0 2px 8px rgba(181, 138, 61, 0.16) !important;
}
.hero h1 span {
  color: #8c4a16;
  font-weight: 800;
}
.hero-subtitle {
  font-family: var(--serif, 'Noto Serif Devanagari', serif) !important;
  color: #5c1820 !important;
  font-size: 14.5px !important;
  font-weight: 700 !important;
  letter-spacing: 0.04em !important;
  margin: 0 0 6px !important;
}
.hero-description {
  color: #3d2415 !important;
  font-size: 13.5px !important;
  line-height: 1.5 !important;
  margin: 0 0 14px !important;
  max-width: 520px !important;
}

/* Integrated Grand Launch Offer Hero Card Matching Reference */
.hero-offer-card {
  width: 100% !important;
  max-width: 500px !important;
  margin: 0 0 14px !important;
  padding: 14px 18px !important;
  background: linear-gradient(135deg, #4d0a12 0%, #68121a 50%, #3a060b 100%) !important;
  border: 1.5px solid var(--gold) !important;
  border-radius: 16px !important;
  box-shadow: 0 8px 24px rgba(77, 10, 18, 0.4), inset 0 0 0 1px rgba(212, 175, 55, 0.4) !important;
  position: relative !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
  color: #fffdf5 !important;
}
.hero-offer-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, #ffd700, transparent);
}
.hero-offer-header {
  display: flex !important;
  align-items: center !important;
  margin-bottom: 6px !important;
}
.hero-offer-badge {
  font-size: 10px !important;
  font-weight: 800 !important;
  color: #ffd573 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  margin: 0 !important;
  text-shadow: 0 1px 2px rgba(0,0,0,0.5);
}
.hero-offer-body {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  margin-bottom: 6px !important;
}
.hero-offer-icon {
  font-size: 28px !important;
  line-height: 1 !important;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.5));
}
.hero-offer-headings {
  display: flex !important;
  flex-direction: column !important;
}
.hero-offer-main {
  font-size: 15.5px !important;
  font-weight: 800 !important;
  color: #fffdf5 !important;
  line-height: 1.25 !important;
  margin: 0 !important;
  font-family: var(--serif, 'Noto Serif Devanagari', serif) !important;
  text-shadow: 0 2px 6px rgba(0,0,0,0.5);
}
.hero-offer-sub-credit {
  font-size: 14.5px !important;
  font-weight: 800 !important;
  color: #ffd573 !important;
  line-height: 1.25 !important;
  margin-top: 2px !important;
  text-shadow: 0 1px 4px rgba(0,0,0,0.4);
}
.hero-offer-disclaimer {
  font-size: 10.5px !important;
  color: #fce7ba !important;
  opacity: 0.92 !important;
  margin: 4px 0 8px !important;
  line-height: 1.35 !important;
}

/* FIRSTTIME Coupon Highlight Pill */
.hero-coupon-row {
  margin-bottom: 8px !important;
}
.hero-coupon-pill {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  background: rgba(0, 0, 0, 0.35) !important;
  border: 1px dashed #ffd700 !important;
  padding: 4px 10px !important;
  border-radius: 8px !important;
  font-size: 12px !important;
}
.tb-coupon-icon { font-size: 12px; }
.tb-coupon-label { color: #fcedb6; font-weight: 700; }
.tb-coupon-code {
  background: #ffd700 !important;
  color: #4d0a12 !important;
  font-weight: 900 !important;
  font-family: inherit;
  padding: 2px 8px !important;
  border-radius: 4px !important;
  font-size: 11.5px !important;
  letter-spacing: 0.06em !important;
}
.tb-coupon-discount {
  color: #ffeed0 !important;
  font-weight: 800 !important;
  font-size: 11px !important;
}

.hero-offer-perks {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 6px !important;
  padding-top: 8px !important;
  border-top: 1px dashed rgba(212, 175, 55, 0.4) !important;
}
.hero-perk-pill {
  font-size: 10px !important;
  font-weight: 600 !important;
  color: #fcefd6 !important;
  background: rgba(255, 255, 255, 0.12) !important;
  border: 1px solid rgba(212, 175, 55, 0.35) !important;
  padding: 2px 8px !important;
  border-radius: 6px !important;
}

/* Primary Hero Action Buttons */
.hero-actions {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 12px !important;
  align-items: center !important;
  margin-top: 4px !important;
}
.button-gold-hero {
  background: linear-gradient(135deg, #4b1016 0%, #30080c 100%) !important;
  color: #fffdf5 !important;
  border: 1.5px solid #d4af37 !important;
  border-radius: 999px !important;
  padding: 11px 22px !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  text-decoration: none !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  box-shadow: 0 4px 14px rgba(75, 16, 22, 0.35) !important;
  transition: all 0.2s ease !important;
}
.button-gold-hero:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 6px 20px rgba(75, 16, 22, 0.5) !important;
  border-color: #ffd700 !important;
}
.button-secondary-hero {
  background: linear-gradient(135deg, #c85a17 0%, #a0400a 100%) !important;
  color: #fffdf5 !important;
  border: 1.5px solid #ffd700 !important;
  border-radius: 999px !important;
  padding: 11px 22px !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  text-decoration: none !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  box-shadow: 0 4px 14px rgba(200, 90, 23, 0.35) !important;
  transition: all 0.2s ease !important;
}
.button-secondary-hero:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 6px 20px rgba(200, 90, 23, 0.5) !important;
  background: linear-gradient(135deg, #d96822 0%, #b84c0e 100%) !important;
}

/* ==========================================================================
   FEATURE SHORTCUT STRIP (7 Cards Matching Reference)
   ========================================================================== */
.feature-shortcuts-strip {
  max-width: 1440px;
  margin: 16px auto 24px !important;
  padding: 0 24px !important;
  box-sizing: border-box;
}
.shortcuts-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 12px;
}
.shortcut-card {
  background: #ffffff;
  border: 1px solid #ebd9b5;
  border-radius: 14px;
  padding: 12px 8px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  text-decoration: none;
  transition: all 0.25s ease;
  box-shadow: 0 2px 8px rgba(100, 55, 20, 0.05);
}
.shortcut-card:hover {
  transform: translateY(-3px);
  border-color: #d4af37;
  box-shadow: 0 8px 20px rgba(181, 138, 61, 0.2);
  background: #fffdfa;
}
.sc-icon-wrap {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  margin-bottom: 6px;
}
.sc-icon-om { background: #fee2e2; color: #991b1b; }
.sc-icon-lotus { background: #ede9fe; color: #6b21a8; }
.sc-icon-calendar { background: #ffe4e6; color: #be123c; }
.sc-icon-leaf { background: #dcfce7; color: #15803d; }
.sc-icon-sangam { background: #f3e8ff; color: #7e22ce; }
.sc-icon-kundali { background: #e0e7ff; color: #3730a3; }
.sc-icon-karma { background: #fef3c7; color: #b45309; }

.sc-title {
  font-size: 13px;
  font-weight: 800;
  color: #2d180f;
  margin: 0;
  line-height: 1.25;
}
.sc-sub {
  font-size: 10px;
  color: #7a6352;
  margin-top: 2px;
}

/* ==========================================================================
   PREMIUM FEATURE SHOWCASE (3 Cards)
   ========================================================================== */
.premium-feature-showcase {
  max-width: 1440px;
  margin: 24px auto 40px !important;
  padding: 0 24px !important;
  box-sizing: border-box;
}
.pfc-section-header {
  text-align: center;
  margin-bottom: 24px;
}
.pfc-eyebrow {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.1em;
  color: #8c5820;
  text-transform: uppercase;
}
.pfc-heading {
  font-family: var(--serif, 'Noto Serif Devanagari', serif);
  font-size: clamp(24px, 2.5vw, 32px);
  font-weight: 800;
  color: #420d12;
  margin: 4px 0 6px;
}
.pfc-sub {
  font-size: 14px;
  color: #6e5847;
  margin: 0;
}
.pfc-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.pfc-card {
  background: #fffdf9;
  border: 1.5px solid rgba(212, 175, 55, 0.4);
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(90, 45, 15, 0.08);
  display: flex;
  flex-direction: column;
  transition: all 0.3s ease;
}
.pfc-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 40px rgba(181, 138, 61, 0.22);
  border-color: #d4af37;
}
.pfc-media {
  position: relative;
  width: 100%;
  aspect-ratio: 16/10;
  overflow: hidden;
  background: #faeed0;
}
.pfc-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}
.pfc-card:hover .pfc-media img {
  transform: scale(1.04);
}
.pfc-badge {
  position: absolute;
  top: 12px;
  left: 12px;
  background: rgba(75, 16, 22, 0.88);
  backdrop-filter: blur(4px);
  color: #ffd573;
  border: 1px solid #ffd573;
  border-radius: 999px;
  padding: 4px 10px;
  font-size: 11px;
  font-weight: 700;
}
.pfc-body {
  padding: 20px;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}
.pfc-title {
  font-family: var(--serif, 'Noto Serif Devanagari', serif);
  font-size: 20px;
  font-weight: 800;
  color: #420d12;
  margin: 0 0 8px;
}
.pfc-desc {
  font-size: 13.5px;
  line-height: 1.55;
  color: #5a4030;
  margin-bottom: 16px;
  flex-grow: 1;
}
.pfc-action-btn {
  background: linear-gradient(135deg, #4b1016 0%, #6e1821 100%);
  color: #fffdf5;
  border: 1.5px solid #d4af37;
  border-radius: 999px;
  padding: 9px 20px;
  font-size: 13.5px;
  font-weight: 700;
  text-decoration: none;
  align-self: flex-start;
  transition: all 0.2s ease;
  box-shadow: 0 3px 10px rgba(75, 16, 22, 0.25);
}
.pfc-action-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(75, 16, 22, 0.4);
  border-color: #ffd700;
}
  background: #cba864;
}

/* Floating Flower Petals Animation */
@keyframes petal-float {
  0% { transform: translateY(-15px) rotate(0deg) scale(0.7); opacity: 0; }
  25% { opacity: 0.8; }
  75% { opacity: 0.8; }
  100% { transform: translateY(220px) rotate(200deg) scale(1); opacity: 0; }
}
.sanctum-petals {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 3;
}
.sanctum-petals .petal {
  position: absolute;
  font-size: 15px;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.15));
}
.sanctum-petals .petal-1 { left: 18%; animation: petal-float 9s ease-in-out infinite; }
.sanctum-petals .petal-2 { left: 42%; animation: petal-float 11s ease-in-out 2s infinite; }
.sanctum-petals .petal-3 { left: 72%; animation: petal-float 8.5s ease-in-out 4s infinite; }
.sanctum-petals .petal-4 { left: 86%; animation: petal-float 10s ease-in-out 1.2s infinite; }

/* --------------------------------------------------------------------------
   RIGHT SIDE: LIVING GOLDEN TEMPLE SANCTUM
   -------------------------------------------------------------------------- */
.hero-scene {
  display: flex !important;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: relative;
  z-index: 2;
  width: 100%;
}

.sanctum-altar-container {
  position: relative;
  width: 100%;
  max-width: 580px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* Golden Halo behind Sanctum */
.sanctum-glow-halo {
  position: absolute;
  top: 10%;
  left: 10%;
  right: 10%;
  bottom: 15%;
  background: radial-gradient(circle, rgba(255, 215, 100, 0.45) 0%, rgba(245, 180, 50, 0.2) 50%, transparent 75%);
  filter: blur(28px);
  pointer-events: none;
  z-index: 0;
  animation: sunbeam-pulse 6s ease-in-out infinite;
}

/* Sunlight Rays from Top */
.sanctum-sunbeam {
  position: absolute;
  top: -40px;
  left: -20px;
  right: -20px;
  height: 240px;
  background: linear-gradient(135deg, rgba(255, 240, 180, 0.35) 0%, rgba(255, 220, 120, 0.15) 45%, transparent 80%);
  clip-path: polygon(15% 0%, 85% 0%, 100% 100%, 0% 100%);
  pointer-events: none;
  z-index: 1;
  animation: sunbeam-pulse 7s ease-in-out infinite alternate;
}

/* Hanging Temple Bells with Meditative Sway */
.sanctum-bells {
  position: absolute;
  top: -16px;
  left: 20px;
  right: 20px;
  display: flex;
  justify-content: space-between;
  pointer-events: none;
  z-index: 4;
}
.temple-bell {
  display: flex;
  flex-direction: column;
  align-items: center;
  transform-origin: top center;
}
.temple-bell .bell-cord {
  width: 2px;
  height: 32px;
  background: linear-gradient(180deg, #997327 0%, var(--gold) 100%);
}
.temple-bell .bell-icon {
  font-size: 22px;
  line-height: 1;
  filter: drop-shadow(0 4px 6px rgba(70, 35, 10, 0.3));
}
.bell-1 { animation: bell-sway 4.2s ease-in-out infinite; }
.bell-2 { animation: bell-sway 3.8s ease-in-out 0.8s infinite; }
.bell-3 { animation: bell-sway 4.6s ease-in-out 1.5s infinite; }

/* Marigold Toran Garland */
.sanctum-marigold-toran {
  position: absolute;
  top: 14px;
  left: 10px;
  right: 10px;
  height: 20px;
  background: radial-gradient(circle, #f39c12 40%, #e67e22 70%, transparent 75%) repeat-x 0 0 / 22px 16px;
  opacity: 0.95;
  z-index: 4;
  pointer-events: none;
}

/* Framed Sanctum Arch & Deity Image */
.sanctum-arch-wrapper {
  position: relative;
  width: 100%;
  border-radius: 54px 54px 20px 20px;
  border: 3px solid var(--gold);
  overflow: hidden;
  box-shadow: 0 16px 45px rgba(85, 45, 15, 0.3), inset 0 0 0 2px rgba(255, 235, 175, 0.6);
  background: #fdf5e2;
  z-index: 2;
}
.sanctum-ganesha-altar {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 10.6;
  object-fit: cover;
  object-position: center 25%;
  transform: scale(1.01);
  transition: transform 0.6s ease;
}
.sanctum-arch-wrapper:hover .sanctum-ganesha-altar {
  transform: scale(1.03);
}

/* Brass Diyas with Animated Flickering Flames */
.sanctum-diya {
  position: absolute;
  bottom: 12px;
  width: 32px;
  height: 48px;
  z-index: 5;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  pointer-events: none;
}
.diya-left { left: 24px; }
.diya-right { right: 24px; }

.diya-glow {
  position: absolute;
  top: 4px;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 180, 0, 0.8) 0%, rgba(255, 120, 0, 0.35) 60%, transparent 80%);
  animation: diya-flame-flicker 2.4s ease-in-out infinite;
}
.diya-left .diya-glow { animation-delay: 0.3s; }

.diya-flame {
  position: absolute;
  top: 6px;
  width: 10px;
  height: 18px;
  background: radial-gradient(ellipse at 50% 80%, #ffffff 0%, #fff7a1 25%, #ff9e00 65%, #ff3c00 100%);
  border-radius: 50% 50% 35% 35% / 60% 60% 40% 40%;
  transform-origin: bottom center;
  animation: diya-flame-flicker 1.8s ease-in-out infinite alternate;
  box-shadow: 0 0 16px 4px rgba(255, 180, 0, 0.7);
}
.diya-left .diya-flame { animation-delay: 0.5s; }

.diya-bowl {
  width: 26px;
  height: 10px;
  background: linear-gradient(180deg, var(--gold) 0%, #996515 100%);
  border-radius: 0 0 14px 14px;
  border-top: 1.5px solid #ffdf78;
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.4);
}

/* Gentle Incense Smoke */
.sanctum-incense {
  position: absolute;
  bottom: 14px;
  right: 68px;
  width: 20px;
  height: 90px;
  pointer-events: none;
  z-index: 5;
}
.incense-stick {
  position: absolute;
  bottom: 0;
  left: 9px;
  width: 2px;
  height: 16px;
  background: #4a2810;
  transform: rotate(-15deg);
}
.smoke-wisp {
  position: absolute;
  bottom: 16px;
  left: 6px;
  width: 14px;
  height: 24px;
  border-radius: 50%;
  background: radial-gradient(ellipse, rgba(255, 250, 240, 0.5) 0%, rgba(255, 240, 210, 0.2) 50%, transparent 80%);
  filter: blur(3px);
  pointer-events: none;
}
.wisp-a { animation: incense-drift 4.2s ease-in-out infinite; }
.wisp-b { animation: incense-drift 3.8s ease-in-out 1.4s infinite; }
.wisp-c { animation: incense-drift 4.6s ease-in-out 2.6s infinite; }

/* Floating Live AI Pandit Pill */
.sanctum-live-pill {
  margin-top: -20px;
  background: rgba(255, 253, 245, 0.94);
  backdrop-filter: blur(10px);
  border: 1.5px solid var(--gold);
  border-radius: 999px;
  padding: 8px 18px;
  display: flex;
  align-items: center;
  gap: 12px;
  box-shadow: 0 10px 25px rgba(100, 50, 15, 0.2);
  z-index: 4;
}
.pulse-indicator {
  width: 10px;
  height: 10px;
  background: #16a34a;
  border-radius: 50%;
  box-shadow: 0 0 0 0 rgba(22, 163, 74, 0.7);
  animation: live-pulse 2s infinite;
}
.pill-text {
  font-size: 13px;
  color: #4a2f1b;
  display: flex;
  gap: 4px;
}
.pill-text strong {
  color: var(--maroon);
}
.audio-wave {
  display: flex;
  align-items: flex-end;
  gap: 2.5px;
  height: 14px;
}
.audio-wave i {
  display: block;
  width: 2.5px;
  background: #b58a3d;
  border-radius: 2px;
  animation: audio-bar-bounce 1.2s ease-in-out infinite alternate;
}
.audio-wave i:nth-child(1) { height: 6px; animation-delay: 0.1s; }
.audio-wave i:nth-child(2) { height: 13px; animation-delay: 0.3s; }
.audio-wave i:nth-child(3) { height: 9px; animation-delay: 0.2s; }
.audio-wave i:nth-child(4) { height: 11px; animation-delay: 0.4s; }

/* --------------------------------------------------------------------------
   KEYFRAME ANIMATIONS
   -------------------------------------------------------------------------- */
@keyframes diya-flame-flicker {
  0%, 100% {
    transform: scale(1) rotate(-1deg);
    opacity: 0.95;
    box-shadow: 0 0 18px 6px rgba(255, 160, 0, 0.75), 0 -4px 10px rgba(255, 220, 100, 0.9);
  }
  25% {
    transform: scale(1.06, 0.96) rotate(1.5deg);
    opacity: 1;
    box-shadow: 0 0 24px 8px rgba(255, 175, 20, 0.85), 0 -5px 14px rgba(255, 240, 140, 0.95);
  }
  50% {
    transform: scale(0.96, 1.04) rotate(-0.5deg);
    opacity: 0.9;
    box-shadow: 0 0 16px 5px rgba(255, 145, 0, 0.7), 0 -3px 8px rgba(255, 200, 80, 0.85);
  }
  75% {
    transform: scale(1.03, 0.98) rotate(1deg);
    opacity: 0.98;
    box-shadow: 0 0 22px 7px rgba(255, 170, 10, 0.8), 0 -4px 12px rgba(255, 230, 120, 0.9);
  }
}

@keyframes bell-sway {
  0%, 100% { transform: rotate(0deg); }
  25% { transform: rotate(2.2deg); }
  75% { transform: rotate(-2.2deg); }
}

@keyframes incense-drift {
  0% { transform: translateY(0) translateX(0) scale(0.8); opacity: 0; }
  20% { opacity: 0.55; }
  60% { transform: translateY(-40px) translateX(12px) scale(1.4); opacity: 0.35; }
  100% { transform: translateY(-80px) translateX(-8px) scale(2); opacity: 0; }
}

@keyframes sunbeam-pulse {
  0%, 100% { opacity: 0.45; transform: scale(1); }
  50% { opacity: 0.7; transform: scale(1.04); }
}

@keyframes live-pulse {
  0% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(22, 163, 74, 0.7); }
  70% { transform: scale(1); box-shadow: 0 0 0 7px rgba(22, 163, 74, 0); }
  100% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(22, 163, 74, 0); }
}

@keyframes audio-bar-bounce {
  0% { height: 4px; }
  100% { height: 14px; }
}

/* --------------------------------------------------------------------------
   DEEP ROYAL MAROON & GOLD BUTTONS
   -------------------------------------------------------------------------- */
.button-gold-hero, .button-primary, .button-book-explore, .launch-button, .header-cta {
  background: linear-gradient(135deg, var(--maroon) 0%, var(--maroon-dark) 100%) !important;
  color: #fff9e6 !important;
  border: 1.5px solid var(--gold) !important;
  box-shadow: 0 4px 14px rgba(107, 37, 46, 0.35), inset 0 1px 0 rgba(255, 235, 175, 0.45) !important;
  font-weight: 700;
  border-radius: 999px !important;
  transition: all 0.25s ease !important;
}
.button-gold-hero:hover, .button-primary:hover, .button-book-explore:hover, .launch-button:hover, .header-cta:hover {
  background: linear-gradient(135deg, var(--maroon-light) 0%, #5e161d 100%) !important;
  box-shadow: 0 6px 22px rgba(181, 138, 61, 0.45), 0 0 16px rgba(212, 175, 55, 0.5) !important;
  transform: translateY(-2px);
}
.button-outline, .launch-secondary {
  border-color: #b78c44;
  color: #6a3029;
  background: #fffaf0cc;
  border-radius: 999px;
  font-weight: 700;
}

/* --------------------------------------------------------------------------
   GRAND LAUNCH OFFER BANNER & CATALOG BANNER
   -------------------------------------------------------------------------- */
#offer-ready-banner, .launch-banner {
  max-width: 1200px;
  margin: 18px auto 32px;
  padding: 30px 36px;
  border-radius: 24px;
  background: linear-gradient(135deg, #781c25 0%, #4f1118 100%);
  border: 2px solid var(--gold);
  box-shadow: 0 12px 36px rgba(85, 20, 28, 0.35), inset 0 0 0 1px rgba(255, 230, 160, 0.4);
  color: #fffaf0;
  position: relative;
  overflow: hidden;
}
#offer-ready-banner .eyebrow {
  color: #fcedb6;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.12em;
}
#offer-ready-banner h2 {
  color: #fff9e8;
  font-family: var(--serif);
  font-size: clamp(26px, 2.8vw, 36px);
  line-height: 1.3;
  margin: 8px 0 12px;
  text-shadow: 0 2px 8px rgba(0,0,0,0.3);
}
#offer-ready-banner p {
  color: #fcefd6;
  font-size: 15px;
  margin-bottom: 20px;
}
#offer-ready-banner .launch-button {
  background: linear-gradient(135deg, #fcedb6 0%, #d4af37 100%) !important;
  color: #4a1318 !important;
  border: 1.5px solid #fff5cc !important;
  font-weight: 800;
  box-shadow: 0 4px 16px rgba(0,0,0,0.3) !important;
}
#offer-ready-banner .launch-secondary {
  color: #fff8e8;
  border-color: var(--gold);
  background: rgba(255, 255, 255, 0.12);
}

#puja-catalog-banner {
  max-width: 1180px;
  margin: 20px auto 38px;
  padding: 26px 34px;
  border-radius: 20px;
  background: linear-gradient(110deg, #fff5d8, #fffaf2);
  border: 1.5px solid var(--gold);
  box-shadow: 0 8px 24px rgba(150, 99, 41, 0.12);
}
#puja-catalog-banner h2 {
  font-family: var(--serif);
  font-size: 28px;
  margin: 0 0 8px;
  color: var(--maroon);
}
#puja-catalog-banner p { margin: 8px 0; font-size: 14px; }
#puja-catalog-banner [data-offer-availability] { font-size: 12px; color: var(--ink-muted); }

/* Benefits Bar */
.benefits {
  border: 1.5px solid #e0c797;
  background: linear-gradient(140deg, #fffcf7 0%, #faecd0 100%);
  border-radius: 20px;
  padding: 24px 30px;
  box-shadow: 0 6px 20px rgba(160, 115, 45, 0.1);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
}
.benefits span {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 700;
  color: var(--ink);
  font-size: 14.5px;
}
.benefits .icon {
  width: 22px;
  height: 22px;
  color: #a17822;
  flex-shrink: 0;
}

/* --------------------------------------------------------------------------
   MOBILE 3.0 RESPONSIVE DESIGN (SPIRITUAL APP EXPERIENCE)
   -------------------------------------------------------------------------- */
@media (max-width: 900px) {
  /* Header adjustments */
  .site-header {
    padding: 8px 14px !important;
    min-height: 54px !important;
  }
  .brand {
    font-size: 20px !important;
    gap: 8px !important;
  }
  .brand-mark svg {
    width: 24px !important;
    height: 24px !important;
  }
  #header-brand-tagline {
    display: none !important;
  }
  .header-cta {
    display: none !important;
  }
  .header-right-actions {
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    flex-shrink: 0 !important;
  }
  .lang-switch-wrap {
    padding: 2px 4px !important;
  }
  .lang-btn {
    padding: 3px 5px !important;
    font-size: 11px !important;
  }
  .header-devotee-btn,
  .header-notif-btn {
    width: 32px !important;
    height: 32px !important;
    font-size: 13px !important;
    flex-shrink: 0 !important;
  }
  .menu-toggle {
    display: flex !important;
    width: 34px !important;
    height: 34px !important;
    flex-shrink: 0 !important;
  }

@media (max-width: 400px) {
  .site-header {
    padding: 6px 8px !important;
  }
  .brand {
    font-size: 18px !important;
    gap: 5px !important;
  }
  .brand-mark svg {
    width: 20px !important;
    height: 20px !important;
  }
  .header-right-actions {
    gap: 4px !important;
  }
  .lang-switch-wrap {
    padding: 2px 3px !important;
  }
  .lang-btn {
    padding: 2px 4px !important;
    font-size: 9.5px !important;
  }
  .header-devotee-btn,
  .header-notif-btn {
    width: 28px !important;
    height: 28px !important;
    font-size: 12px !important;
  }
  .menu-toggle {
    width: 30px !important;
    height: 30px !important;
  }
}

@media (max-width: 330px) {
  .brand {
    font-size: 16px !important;
  }
  .lang-switch-wrap {
    display: none !important;
  }
}

  /* Mobile Navigation Drawer */
  .site-header nav {
    position: absolute !important;
    top: 54px !important;
    left: 0 !important;
    right: 0 !important;
    background: linear-gradient(180deg, #440f14 0%, #2e080b 100%) !important;
    border-bottom: 2.5px solid var(--gold) !important;
    box-shadow: 0 16px 36px rgba(0, 0, 0, 0.45) !important;
    padding: 16px 20px !important;
    display: none !important;
    flex-direction: column !important;
    gap: 8px !important;
    z-index: 99 !important;
  }
  .site-header nav.is-open {
    display: flex !important;
  }
  .site-header nav a {
    color: #fff9e6 !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    padding: 10px 14px !important;
    border-radius: 8px !important;
    border: 1px solid rgba(212, 175, 55, 0.25) !important;
    background: rgba(255, 255, 255, 0.05) !important;
  }
  .site-header nav a:hover, .site-header nav a:active {
    background: rgba(212, 175, 55, 0.2) !important;
    border-color: var(--gold) !important;
  }
  .site-header nav .nav-signin-btn {
    color: #fff9e6 !important;
    border: 1.5px solid var(--gold) !important;
    background: linear-gradient(135deg, var(--gold-dark) 0%, var(--gold) 100%) !important;
    padding: 10px 14px !important;
    border-radius: 8px !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    justify-content: center !important;
  }

  /* Mobile Hero Container */
  .hero.section-wrap {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 0 16px !important;
    padding: 16px 14px 24px !important;
    border-radius: 0 0 24px 24px !important;
    border-left: none !important;
    border-right: none !important;
    border-top: none !important;
    border-bottom: 2px solid var(--gold) !important;
    min-height: auto !important;
    max-height: none !important;
    overflow: visible !important;
    background: radial-gradient(circle at 50% 15%, #fffcf5 0%, #fdf5de 55%, #f9edd0 100%) !important;
  }

  /* Flatten hero-copy so its elements can be positioned in requested order */
  .hero-copy {
    display: contents !important;
  }

  /* ORDER 2: HERO HEADLINE BLOCK */
  .hero-copy > .eyebrow {
    order: 1 !important;
    align-self: center !important;
    margin: 0 auto 6px !important;
    font-size: 11px !important;
    padding: 3px 10px !important;
  }
  .hero-copy > h1#hero-title {
    order: 2 !important;
    text-align: center !important;
    font-size: 26px !important;
    line-height: 1.2 !important;
    margin: 0 0 4px !important;
    width: 100% !important;
  }
  .hero-copy > .hero-subtitle {
    order: 3 !important;
    text-align: center !important;
    font-size: 12px !important;
    margin: 0 0 6px !important;
    width: 100% !important;
  }
  .hero-copy > .hero-description {
    order: 4 !important;
    display: block !important;
    text-align: center !important;
    font-size: 12px !important;
    line-height: 1.45 !important;
    margin: 0 auto 12px !important;
    max-width: 360px !important;
  }

  /* ORDER 3: GANESHA ARTWORK */
  .hero-scene {
    order: 5 !important;
    width: 100% !important;
    max-width: 420px !important;
    height: auto !important;
    min-height: auto !important;
    margin: 0 auto 14px !important;
  }
  .sanctum-altar-container {
    max-width: 100% !important;
  }
  .sanctum-arch-wrapper {
    width: 100% !important;
    max-width: 380px !important;
    height: 220px !important;
    border-radius: 36px 36px 16px 16px !important;
    border-width: 2px !important;
  }
  .sanctum-ganesha-altar {
    height: 100% !important;
    aspect-ratio: auto !important;
    object-position: center 20% !important;
  }
  .sanctum-bells {
    top: -12px !important;
  }
  .temple-bell .bell-cord {
    height: 22px !important;
  }
  .temple-bell .bell-icon {
    font-size: 17px !important;
  }
  .sanctum-diya {
    bottom: 6px !important;
    width: 24px !important;
    height: 36px !important;
  }
  .diya-left { left: 14px !important; }
  .diya-right { right: 14px !important; }
  .diya-flame {
    width: 8px !important;
    height: 14px !important;
  }
  .sanctum-incense {
    display: none !important;
  }
  .sanctum-live-pill {
    margin-top: -14px !important;
    padding: 4px 14px !important;
    font-size: 11.5px !important;
  }

  /* ORDER 4: COMPACT LAUNCH OFFER CARD */
  .hero-offer-card {
    order: 6 !important;
    width: 100% !important;
    max-width: 420px !important;
    margin: 0 auto 12px !important;
    padding: 12px 14px !important;
    border-radius: 14px !important;
    text-align: center !important;
  }
  .hero-offer-header {
    justify-content: center !important;
    margin-bottom: 4px !important;
  }
  .hero-offer-body {
    justify-content: center !important;
    gap: 10px !important;
  }
  .hero-offer-icon {
    font-size: 24px !important;
  }
  .hero-offer-main {
    font-size: 13.5px !important;
    line-height: 1.25 !important;
  }
  .hero-offer-sub-credit {
    font-size: 13px !important;
  }
  .hero-offer-disclaimer {
    font-size: 10px !important;
    margin: 4px 0 6px !important;
  }
  .hero-coupon-row {
    display: flex !important;
    justify-content: center !important;
    margin-bottom: 6px !important;
  }
  .hero-coupon-pill {
    width: 100% !important;
    box-sizing: border-box !important;
    justify-content: center !important;
    padding: 4px 8px !important;
    font-size: 11px !important;
  }
  .hero-offer-perks {
    justify-content: center !important;
    gap: 4px !important;
  }
  .hero-perk-pill {
    font-size: 9.5px !important;
    padding: 2px 6px !important;
  }

  /* ORDER 5: CTA BUTTONS */
  .hero-actions {
    order: 7 !important;
    width: 100% !important;
    max-width: 420px !important;
    margin: 0 auto !important;
    flex-direction: column !important;
    gap: 10px !important;
  }
  .hero-actions .button-gold-hero,
  .hero-actions .button-secondary-hero {
    width: 100% !important;
    min-height: 46px !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    justify-content: center !important;
    border-radius: 999px !important;
    box-sizing: border-box !important;
  }

  /* ORDER 6: FEATURE SHORTCUT STRIP */
  .feature-shortcuts-strip {
    padding: 0 12px !important;
    margin: 14px auto 20px !important;
  }
  .shortcuts-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 8px !important;
  }
  .shortcut-card {
    padding: 10px 4px !important;
  }
  .sc-icon-wrap {
    width: 36px !important;
    height: 36px !important;
    font-size: 16px !important;
  }
  .sc-title {
    font-size: 12px !important;
  }
  .sc-sub {
    font-size: 9.5px !important;
  }

  /* ORDER 7: PREMIUM FEATURE SHOWCASE */
  .premium-feature-showcase {
    padding: 0 12px !important;
    margin: 20px auto 32px !important;
  }
  .pfc-grid {
    grid-template-columns: 1fr !important;
    gap: 18px !important;
  }
  .pfc-media {
    aspect-ratio: 16/9 !important;
  }
}

@media (max-width: 540px) {
  .benefits {
    grid-template-columns: 1fr !important;
  }
}

/* --------------------------------------------------------------------------
   SECTION HEADINGS WITH SACRED FLOURISHES
   -------------------------------------------------------------------------- */
.section-heading h2, .explore-header h2 {
  color: var(--maroon);
  font-family: var(--serif);
  font-size: clamp(28px, 3.2vw, 42px);
  position: relative;
  display: inline-block;
  margin-bottom: 12px;
}
.eyebrow {
  color: #96662a;
  font-weight: 800;
  letter-spacing: 0.1em;
  font-size: 12px;
  text-transform: uppercase;
}
.pujas-section, .explore-section { padding-top: 52px; }

/* --------------------------------------------------------------------------
   ULTRA-PREMIUM PUJA CARDS (ALL 30)
   -------------------------------------------------------------------------- */
.puja-grid, .explore-puja-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 28px;
}

.puja-card, .explore-card, .launch-grid article {
  border: 2px solid var(--gold) !important;
  border-radius: 26px !important;
  background: linear-gradient(170deg, #fffefb 0%, #fffbf0 50%, #fcf4dd 100%) !important;
  box-shadow: 0 10px 32px rgba(110, 75, 25, 0.13), inset 0 0 0 1px rgba(255, 255, 255, 0.9) !important;
  overflow: hidden;
  transition: transform 0.3s cubic-bezier(0.2, 0, 0, 1), box-shadow 0.3s cubic-bezier(0.2, 0, 0, 1) !important;
  position: relative;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  text-align: left;
}

.puja-card {
  padding: 0 24px 24px !important;
}
.puja-card .puja-icon { display: none; }

/* Jharokha Art Wrapper */
.temple-card-art-wrap {
  position: relative;
  width: calc(100% + 48px);
  margin: 0 -24px 18px;
  overflow: hidden;
  height: 240px;
  border-bottom: 2.5px solid var(--gold) !important;
  background: #fdf5e2;
  flex-shrink: 0;
}
.explore-card .temple-card-art-wrap {
  width: calc(100% + 44px);
  margin: 0 -22px 18px;
}

.temple-card-art {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 25%;
  transition: transform 0.5s ease;
}

/* Floating Sacred Category Badge on Deity Portrait */
.temple-card-badge {
  position: absolute;
  top: 14px;
  left: 14px;
  background: rgba(115, 27, 35, 0.92);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: #fff9e6;
  border: 1px solid var(--gold);
  border-radius: 999px;
  padding: 4px 12px;
  font-size: 11.5px;
  font-weight: 700;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.35);
  z-index: 3;
  letter-spacing: 0.02em;
}

/* Card Titles */
.puja-card h3, .explore-card-title {
  font-family: var(--serif);
  font-size: 22px;
  font-weight: 700;
  color: var(--maroon);
  line-height: 1.35;
  margin: 0 0 4px;
  white-space: normal;
}
.explore-card-title-hi {
  font-size: 14px;
  font-weight: 600;
  color: #9c6c2e;
  margin: 0 0 10px;
}

/* Intent & Taglines */
.puja-card .puja-intent, .explore-card-tagline {
  min-height: 44px;
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--ink-muted);
  margin-bottom: 12px;
}

.puja-card .puja-meta {
  margin-top: auto;
  padding-top: 14px;
}
.puja-card .puja-price, .explore-price {
  color: #146149;
  font-size: 24px;
  font-weight: 800;
}

/* Grand Launch Offer Pricing Block inside Cards */
.offer-pricing {
  display: flex !important;
  flex-direction: column !important;
  gap: 6px !important;
  padding: 12px 14px !important;
  margin: 10px 0 !important;
  border-radius: 14px !important;
  border: 1.5px solid var(--gold) !important;
  background: linear-gradient(135deg, #fffbf0 0%, #fef2d2 100%) !important;
  box-shadow: 0 3px 12px rgba(181, 138, 61, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.9) !important;
}
.offer-price-row {
  display: flex;
  align-items: baseline;
  gap: 8px;
  flex-wrap: wrap;
}
.offer-regular {
  font-size: 13px;
  color: #7d6350;
  text-decoration: line-through;
}
.offer-value {
  font-size: 26px;
  font-weight: 800;
  color: var(--maroon);
  font-family: var(--serif);
  line-height: 1;
}
.offer-discount {
  background: linear-gradient(135deg, var(--gold) 0%, #b8860b 100%);
  color: #fffef2;
  font-size: 11px;
  font-weight: 800;
  padding: 3px 8px;
  border-radius: 999px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  box-shadow: 0 2px 6px rgba(181, 138, 61, 0.3);
}
.offer-gift {
  font-size: 12.5px;
  font-weight: 700;
  color: #8c3b12;
  background: #feeeda;
  border: 1px dashed #dca567;
  padding: 4px 8px;
  border-radius: 6px;
  display: inline-block;
  margin-top: 2px;
}
.offer-pricing small {
  font-size: 10.5px;
  color: #795d46;
  line-height: 1.4;
}

/* Hover States for All Cards */
.puja-card:hover, .explore-card:hover, .launch-grid article:hover {
  transform: translateY(-7px) !important;
  box-shadow: 0 20px 48px rgba(100, 60, 20, 0.22), 0 0 24px rgba(212, 175, 55, 0.35), inset 0 0 0 1px var(--gold) !important;
}
.puja-card:hover .temple-card-art, .explore-card:hover .temple-card-art, .launch-grid article:hover .temple-card-art {
  transform: scale(1.04);
}

.explore-card {
  padding: 0 22px 22px !important;
}
.explore-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}
.explore-category-tag {
  font-size: 11px;
  font-weight: 700;
  color: #794e1b;
  background: #fdf1d2;
  border: 1px solid #e2cb96;
  padding: 3px 9px;
  border-radius: 999px;
}
.explore-featured-pill {
  font-size: 11px;
  font-weight: 800;
  color: #fff9e6;
  background: var(--maroon);
  padding: 3px 9px;
  border-radius: 999px;
}

.explore-card-footer {
  margin-top: auto;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.button-book-explore {
  width: 100%;
  border-radius: 999px !important;
  min-height: 46px;
  font-size: 15px;
}

.explore-search input {
  background: #fffef9;
  border: 1.5px solid #d4af37;
  border-radius: 999px;
  padding: 12px 22px;
  font-size: 15px;
  box-shadow: 0 4px 14px rgba(181, 138, 61, 0.1);
}
.explore-filter {
  border: 1px solid var(--gold);
  background: #fffbf2;
  color: #63361a;
  border-radius: 999px;
  font-weight: 600;
}
.explore-filter.active {
  background: linear-gradient(135deg, var(--maroon) 0%, var(--maroon-dark) 100%) !important;
  color: #fff9e6 !important;
  border-color: var(--gold) !important;
  box-shadow: 0 4px 12px rgba(115, 27, 35, 0.3);
}

@media (max-width: 1024px) {
  .puja-grid, .explore-puja-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 640px) {
  .puja-grid, .explore-puja-grid {
    grid-template-columns: 1fr;
  }
}

/* --------------------------------------------------------------------------
   DETAIL PAGES
   -------------------------------------------------------------------------- */
.launch-page {
  background: radial-gradient(circle at 50% 20%, #fffdf8 0%, #faeed5 60%, #f4e2bd 100%);
  background-attachment: fixed;
  color: #422b25;
}
.launch-page header {
  background: linear-gradient(180deg, #fffcf5 0%, #faecd0 100%);
  color: #682b2d;
  border-bottom: 2px solid var(--gold);
}
.launch-page header > a {
  font-family: var(--serif);
  font-size: 28px;
  font-weight: 700;
  text-decoration: none;
  color: #682b2d;
}
.launch-page header nav a { color: #682b2d; }
.launch-page main { max-width: 1180px; }
.launch-page h1, .launch-page h2 {
  font-family: var(--serif);
  color: var(--maroon);
}
.launch-page h1 { font-weight: 600; }
.launch-page h2 { margin-top: 38px; }
.launch-page .launch-hero {
  background: linear-gradient(115deg, #fff1d4, #fffdf6);
  border: 1.5px solid var(--gold);
  border-radius: 28px;
  box-shadow: 0 12px 34px rgba(121, 84, 42, 0.15);
}
.temple-detail { display: flow-root; min-height: 420px; }
.temple-detail-art {
  float: right;
  width: 43%;
  height: 430px;
  object-fit: cover;
  margin: 0 0 26px 36px;
  border: 2px solid var(--gold);
  border-radius: 130px 130px 18px 18px;
  box-shadow: 0 12px 24px rgba(105, 73, 26, 0.22);
}
.temple-detail h1 { font-size: clamp(30px, 3.5vw, 45px); }
.launch-price { color: #146149; }
.launch-page [data-offer-availability] { font-size: 13px; color: #756351; }
.launch-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.launch-grid article { padding: 0 22px 22px; }
.launch-grid article h2 { font-size: 23px; margin-top: 10px; font-family: var(--serif); }
.launch-grid article a { text-decoration: none; }
.launch-grid article .temple-card-art { height: 235px; }
.launch-page details { border: 1px solid #e4d1ac; border-radius: 14px; background: #fffcf7; }
.launch-page footer { background: #55252c; color: #fff6df; }

/* --------------------------------------------------------------------------
   BOOKING, CHECKOUT MODAL & REWARDS
   -------------------------------------------------------------------------- */
.booking-layout, .booking-summary, .booking-form-card, .customer-payment-card, #review-dialog, #auth-dialog {
  border: 2px solid var(--gold) !important;
  border-radius: 24px !important;
  background: linear-gradient(160deg, #fffdf8 0%, #fdf5e2 100%) !important;
  box-shadow: 0 16px 48px rgba(90, 32, 41, 0.18) !important;
}
.customer-pay-header {
  background: linear-gradient(135deg, var(--maroon) 0%, var(--maroon-dark) 100%) !important;
  color: #fff6df !important;
  border-bottom: 2px solid var(--gold) !important;
  border-radius: 22px 22px 0 0;
}
.customer-pay-summary { background: #fff9eb; }
.main-price, #customer-pay-amount { color: #166348; }
.launch-reward, #free-puja-reward {
  background: linear-gradient(135deg, #fff8e1 0%, #fdf1d3 100%) !important;
  border: 2px solid var(--gold) !important;
  border-radius: 20px !important;
  box-shadow: 0 10px 30px rgba(181, 138, 61, 0.15) !important;
  padding: 22px;
}
.launch-reward h3, #free-puja-reward h3 { color: #185e46; font-family: var(--serif); }
.launch-reward button { min-height: 44px; }
.launch-reward select {
  width: 100%;
  max-width: 100%;
  border: 1px solid #c9b489;
  border-radius: 10px;
  background: #fffef8;
}

/* --------------------------------------------------------------------------
   GOLDEN TEMPLE FIRSTTIME COUPON BOX & BOOKING SUMMARY BREAKDOWN
   -------------------------------------------------------------------------- */
.booking-coupon-box {
  background: linear-gradient(135deg, #fff9ea 0%, #fef3d6 100%);
  border: 1.5px dashed var(--gold);
  border-radius: 14px;
  padding: 12px 14px;
  margin: 14px 0 12px;
  box-shadow: 0 4px 14px rgba(181, 138, 61, 0.1);
  transition: all 0.25s ease;
}
.booking-coupon-box.coupon-applied {
  background: linear-gradient(135deg, #f7fdf4 0%, #ecf9e6 100%);
  border: 1.5px solid #2e7d32;
  box-shadow: 0 4px 14px rgba(46, 125, 50, 0.12);
}
.booking-coupon-box.coupon-ineligible {
  background: #fefce8;
  border: 1px solid #fef08a;
}
.coupon-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}
.coupon-title-wrap {
  font-size: 13px;
  font-weight: 700;
  color: #7c2d12;
  display: flex;
  align-items: center;
  gap: 5px;
}
.coupon-applied .coupon-title-wrap {
  color: #1b5e20;
}
.coupon-status-badge {
  font-size: 11px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 999px;
  background: #fef08a;
  color: #854d0e;
  border: 1px solid #fde047;
}
.coupon-status-badge.applied-badge {
  background: #dcfce7;
  color: #166534;
  border-color: #86efac;
}
.coupon-input-group {
  display: flex;
  gap: 6px;
  align-items: center;
}
.coupon-input {
  flex: 1;
  min-width: 0;
  padding: 6px 10px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #7c2d12;
  background: #fff;
  border: 1.5px solid var(--gold);
  border-radius: 8px;
}
.coupon-apply-btn {
  background: linear-gradient(135deg, var(--maroon) 0%, var(--maroon-dark) 100%);
  color: #fff9e6;
  border: 1px solid var(--gold);
  border-radius: 8px;
  padding: 6px 12px;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
}
.coupon-applied-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 4px 0;
}
.coupon-applied-pill {
  font-size: 13px;
  font-weight: 700;
  color: #15803d;
  display: flex;
  align-items: center;
  gap: 6px;
}
.coupon-applied-pill code {
  background: #f0fdf4;
  border: 1px solid #bbf7d0;
  padding: 2px 6px;
  border-radius: 4px;
  color: #166534;
}
.coupon-remove-btn {
  background: transparent;
  border: none;
  color: #b91c1c;
  font-size: 11.5px;
  font-weight: 700;
  cursor: pointer;
  text-decoration: underline;
  padding: 2px 4px;
}
.coupon-credit-callout {
  font-size: 11.5px;
  color: #92400e;
  margin: 6px 0 0;
  font-weight: 600;
  line-height: 1.35;
}

/* Pricing Breakdown inside Estimate Panel */
.pricing-breakdown {
  border-bottom: 1px dashed var(--line);
  padding-bottom: 8px;
  margin-bottom: 8px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.pricing-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-size: 13px;
  color: #6e5847;
}
.pricing-row.discount-row {
  color: #166534;
  font-weight: 700;
}
.pricing-row.discount-row strong {
  color: #16a34a;
}
.pricing-label-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-top: 4px;
}
.total-label {
  font-size: 15px;
  font-weight: 700;
  color: var(--maroon);
}
.pricing-card-box .main-price {
  font-size: 28px;
  font-weight: 800;
  color: var(--maroon);
  font-family: var(--serif);
}

/* Reduced Motion Support */
@media (prefers-reduced-motion: reduce) {
  .sanctum-glow-halo,
  .sanctum-sunbeam,
  .temple-bell,
  .diya-glow,
  .diya-flame,
  .smoke-wisp,
  .pulse-indicator,
  .audio-wave i {
    animation: none !important;
  }
}


/* ==========================================================================
   PUJAYANTRA 4.0 — DIGITAL MANDIR & DEVOTIONAL GROWTH PLATFORM STYLES
   ========================================================================== */

/* --------------------------------------------------------------------------
   Discovery Section: Experience Your Digital Mandir
   -------------------------------------------------------------------------- */
.mandir-experience {
  padding: 32px 16px 40px !important;
  background: linear-gradient(180deg, #fbf7ee 0%, #fdfbf7 50%, #f5efe1 100%);
  border-top: 2px solid #e8d7b5;
  border-bottom: 2px solid #e8d7b5;
}

.mandir-section-header {
  text-align: center;
  max-width: 800px;
  margin: 0 auto 28px;
}

.mandir-eyebrow {
  display: inline-block;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: #8b2500;
  background: #fbeee6;
  border: 1px solid #f3c299;
  border-radius: 20px;
  padding: 4px 14px;
  margin-bottom: 8px;
}

.mandir-main-title {
  font-family: var(--serif, 'Cinzel', serif);
  font-size: clamp(24px, 3.2vw, 36px);
  color: #3a080f;
  margin: 6px 0 10px;
  line-height: 1.25;
}

.mandir-subtitle {
  font-size: 15px;
  color: #5d4037;
  line-height: 1.5;
  margin: 0 auto;
}

/* 6 Discovery Tiles Grid */
.mandir-discovery-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 16px;
  max-width: 1200px;
  margin: 0 auto;
}

.discovery-tile {
  background: #ffffff;
  border: 1.5px solid #d4af37;
  border-radius: 12px;
  padding: 20px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  text-decoration: none;
  color: inherit;
  box-shadow: 0 4px 16px rgba(92, 16, 29, 0.06);
  transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease;
  position: relative;
  overflow: hidden;
}

.discovery-tile::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, #d4af37, #f3e5ab, #d4af37);
  opacity: 0.8;
}

.discovery-tile:hover, .discovery-tile:focus-visible {
  transform: translateY(-4px);
  box-shadow: 0 8px 24px rgba(92, 16, 29, 0.14);
  border-color: #8b0000;
}

.tile-icon-wrap {
  font-size: 32px;
  margin-bottom: 12px;
  display: inline-block;
}

.tile-title {
  font-family: var(--serif, 'Cinzel', serif);
  font-size: 18px;
  font-weight: 700;
  color: #3a080f;
  margin: 0 0 6px;
}

.tile-desc {
  font-size: 13.5px;
  color: #555555;
  line-height: 1.45;
  margin: 0 0 16px;
  flex-grow: 1;
}

.tile-action-link {
  font-size: 13px;
  font-weight: 700;
  color: #8b0000;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

/* --------------------------------------------------------------------------
   Feature 1: Interactive Digital Darshan
   -------------------------------------------------------------------------- */
.darshan-stage {
  position: relative;
  background: radial-gradient(circle at 50% 40%, #4a0d18 0%, #200408 85%);
  border: 3px solid #d4af37;
  border-radius: 16px;
  overflow: hidden;
  padding: 24px 16px 20px;
  text-align: center;
  color: #fdf6e7;
  box-shadow: inset 0 0 40px rgba(0, 0, 0, 0.7), 0 10px 30px rgba(0, 0, 0, 0.25);
  max-width: 900px;
  margin: 0 auto 32px;
}

.darshan-deity-view {
  position: relative;
  min-height: 320px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin-bottom: 16px;
}

.darshan-deity-img {
  width: min(280px, 75vw);
  height: auto;
  aspect-ratio: 1/1;
  object-fit: contain;
  filter: drop-shadow(0 0 25px rgba(255, 215, 0, 0.55));
  transition: opacity 0.25s ease;
  z-index: 2;
}

#darshan-flower-canvas {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 3;
}

.darshan-info {
  z-index: 4;
  margin-top: 10px;
}

.darshan-deity-name {
  font-family: var(--serif, serif);
  font-size: 24px;
  color: #ffd700;
  margin: 0 0 4px;
  text-shadow: 0 2px 8px rgba(0,0,0,0.8);
}

.darshan-deity-mantra {
  font-size: 15px;
  color: #f3e5ab;
  font-style: italic;
  margin: 0;
  text-shadow: 0 1px 4px rgba(0,0,0,0.8);
}

.darshan-toolbar {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  z-index: 4;
  margin-top: 16px;
}

.darshan-btn {
  background: rgba(255, 255, 255, 0.12);
  border: 1.5px solid #d4af37;
  color: #ffffff;
  padding: 8px 16px;
  border-radius: 24px;
  font-size: 13.5px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  backdrop-filter: blur(4px);
}

.darshan-btn:hover, .darshan-btn.active {
  background: #d4af37;
  color: #200408;
  box-shadow: 0 0 16px rgba(212, 175, 55, 0.6);
}

.darshan-deity-select-wrap {
  margin-top: 14px;
  z-index: 4;
}

.darshan-select {
  background: rgba(20, 5, 8, 0.85);
  border: 1px solid #d4af37;
  color: #f3e5ab;
  padding: 6px 14px;
  border-radius: 16px;
  font-size: 13px;
  cursor: pointer;
}

/* Bell sway animation */
@keyframes bellSway {
  0% { transform: rotate(0deg); }
  20% { transform: rotate(18deg); }
  40% { transform: rotate(-16deg); }
  60% { transform: rotate(10deg); }
  80% { transform: rotate(-6deg); }
  100% { transform: rotate(0deg); }
}

.bell-sway {
  animation: bellSway 1.8s cubic-bezier(0.36, 0.07, 0.19, 0.97);
  transform-origin: top center;
}

/* --------------------------------------------------------------------------
   Feature 2: Free 2-Minute AI Puja Demo
   -------------------------------------------------------------------------- */
.demo-wrap {
  background: #ffffff;
  border: 2px solid #d4af37;
  border-radius: 16px;
  padding: 24px;
  box-shadow: 0 6px 24px rgba(92, 16, 29, 0.08);
  max-width: 800px;
  margin: 0 auto 32px;
}

.demo-progress-bar {
  background: #f1e6d0;
  border-radius: 10px;
  height: 8px;
  overflow: hidden;
  margin-bottom: 12px;
}

.demo-progress-fill {
  background: linear-gradient(90deg, #d4af37, #8b0000);
  height: 100%;
  width: 25%;
  transition: width 0.3s ease;
}

.demo-step-meta {
  display: flex;
  justify-content: space-between;
  font-size: 13px;
  font-weight: 700;
  color: #8b0000;
  margin-bottom: 16px;
}

.demo-step-title {
  font-family: var(--serif, serif);
  font-size: 22px;
  color: #3a080f;
  margin: 0 0 8px;
}

.demo-step-desc {
  font-size: 14.5px;
  color: #444;
  line-height: 1.5;
  margin-bottom: 16px;
}

.demo-mantra-box {
  background: #fcf9f2;
  border-left: 4px solid #d4af37;
  padding: 14px 16px;
  border-radius: 0 8px 8px 0;
  margin-bottom: 16px;
}

.demo-step-mantra {
  font-family: var(--serif, serif);
  font-size: 17px;
  font-weight: 700;
  color: #8b0000;
  margin: 0 0 6px;
  line-height: 1.5;
  white-space: pre-line;
}

.demo-step-meaning {
  font-size: 13px;
  color: #666;
  font-style: italic;
  margin: 0;
}

.demo-instruction-box {
  background: #eef7ee;
  border: 1px solid #c3e6cb;
  border-radius: 8px;
  padding: 10px 14px;
  font-size: 14px;
  font-weight: 600;
  color: #1e6b34;
  margin-bottom: 20px;
}

.demo-controls {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.aarti-circular-motion {
  animation: waveFlame 2s ease-in-out infinite;
}

@keyframes waveFlame {
  0% { transform: translate(0, 0) scale(1); }
  25% { transform: translate(15px, -15px) scale(1.1); }
  50% { transform: translate(0, -25px) scale(1.2); }
  75% { transform: translate(-15px, -15px) scale(1.1); }
  100% { transform: translate(0, 0) scale(1); }
}

/* --------------------------------------------------------------------------
   Feature 3: Today's Shubh Panchang
   -------------------------------------------------------------------------- */
.panchang-container {
  background: #ffffff;
  border: 2px solid #d4af37;
  border-radius: 16px;
  padding: 24px;
  box-width: 900px;
  margin: 0 auto 32px;
  max-width: 900px;
  box-shadow: 0 6px 20px rgba(92, 16, 29, 0.06);
}

.panchang-filter-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1.5px solid #f0e4cc;
  padding-bottom: 16px;
  margin-bottom: 20px;
}

.panchang-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 14px;
}

.panchang-card {
  background: #fdfaf4;
  border: 1px solid #e8d7b5;
  border-radius: 10px;
  padding: 14px 16px;
  text-align: center;
}

.panchang-label {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  color: #8b2500;
  margin-bottom: 4px;
  display: block;
}

.panchang-val {
  font-size: 15px;
  font-weight: 700;
  color: #2b1116;
}

.panchang-verified-bar {
  margin-top: 18px;
  padding: 10px 14px;
  background: #fbf5eb;
  border-radius: 8px;
  font-size: 12.5px;
  color: #665241;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}

/* --------------------------------------------------------------------------
   Feature 4: Find My Puja Quiz
   -------------------------------------------------------------------------- */
.quiz-container {
  background: #ffffff;
  border: 2px solid #d4af37;
  border-radius: 16px;
  padding: 24px;
  max-width: 900px;
  margin: 0 auto 32px;
  box-shadow: 0 6px 20px rgba(92, 16, 29, 0.06);
}

.quiz-purposes-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 12px;
  margin-bottom: 24px;
}

.quiz-purpose-card {
  background: #fcf9f2;
  border: 1.5px solid #dcc8a4;
  border-radius: 10px;
  padding: 14px 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  transition: all 0.2s ease;
  text-align: center;
}

.quiz-purpose-card:hover, .quiz-purpose-card.selected {
  background: #5c101d;
  color: #ffffff;
  border-color: #8b0000;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(92, 16, 29, 0.2);
}

.quiz-purpose-card.selected .quiz-purpose-title {
  color: #ffd700;
}

.quiz-purpose-icon {
  font-size: 26px;
}

.quiz-purpose-title {
  font-size: 13.5px;
  font-weight: 700;
  color: #3a080f;
}

.quiz-rationale-box {
  background: #fdf5e6;
  border-left: 4px solid #8b0000;
  padding: 14px 16px;
  border-radius: 0 8px 8px 0;
  margin-bottom: 20px;
}

.quiz-rationale-badge {
  font-size: 12px;
  font-weight: 700;
  color: #8b0000;
  text-transform: uppercase;
}

.quiz-rationale-text {
  font-size: 14px;
  color: #4a2c11;
  line-height: 1.5;
  margin: 6px 0 0;
}

.quiz-recommendations-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 16px;
}

.quiz-puja-card {
  border: 1.5px solid #d4af37;
  border-radius: 12px;
  overflow: hidden;
  background: #ffffff;
  box-shadow: 0 4px 12px rgba(0,0,0,0.06);
  display: flex;
  flex-direction: column;
}

.quiz-card-art {
  width: 100%;
  height: 140px;
  object-fit: cover;
  background: #3a080f;
}

.quiz-card-body {
  padding: 14px;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}

.quiz-card-title {
  font-family: var(--serif, serif);
  font-size: 16px;
  color: #3a080f;
  margin: 0 0 8px;
}

.quiz-card-pricing {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 6px;
}

.quiz-reg-price {
  font-size: 13px;
  color: #888;
  text-decoration: line-through;
}

.quiz-offer-price {
  font-size: 20px;
  font-weight: 800;
  color: #8b0000;
}

.quiz-offer-tag {
  font-size: 11px;
  font-weight: 700;
  color: #1e6b34;
  background: #eef7ee;
  padding: 2px 6px;
  border-radius: 4px;
}

.quiz-card-credit {
  font-size: 12px;
  color: #854d0e;
  margin: 0 0 12px;
  font-weight: 600;
}

/* --------------------------------------------------------------------------
   Feature 5: Smart Samagri Checklist
   -------------------------------------------------------------------------- */
.samagri-container {
  background: #ffffff;
  border: 2px solid #d4af37;
  border-radius: 16px;
  padding: 24px;
  max-width: 800px;
  margin: 0 auto 32px;
  box-shadow: 0 6px 20px rgba(92, 16, 29, 0.06);
}

.samagri-item-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 12px;
  border-bottom: 1px solid #f0e6d6;
  transition: background 0.15s ease;
}

.samagri-item-row:hover {
  background: #fbf7ee;
}

.samagri-item-row.item-prepared {
  background: #f4faf4;
}

.samagri-item-row.item-prepared .samagri-primary-name {
  text-decoration: line-through;
  color: #666;
}

.samagri-checkbox-label {
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  flex-grow: 1;
}

.samagri-check-input {
  width: 18px;
  height: 18px;
  cursor: pointer;
  accent-color: #8b0000;
}

.samagri-custom-box {
  display: none;
}

.samagri-item-details {
  display: flex;
  flex-direction: column;
}

.samagri-primary-name {
  font-size: 14.5px;
  font-weight: 700;
  color: #2b1116;
}

.samagri-sub-name {
  font-size: 12.5px;
  color: #666666;
}

.badge-required {
  font-size: 11px;
  font-weight: 700;
  color: #8b0000;
  background: #fdf2f2;
  border: 1px solid #fecaca;
  padding: 2px 8px;
  border-radius: 12px;
}

.badge-optional {
  font-size: 11px;
  font-weight: 600;
  color: #854d0e;
  background: #fef9c3;
  border: 1px solid #fef08a;
  padding: 2px 8px;
  border-radius: 12px;
}

/* --------------------------------------------------------------------------
   Feature 6: Personalized Digital Puja Invitations
   -------------------------------------------------------------------------- */
.invitation-container {
  background: #ffffff;
  border: 2px solid #d4af37;
  border-radius: 16px;
  padding: 24px;
  max-width: 900px;
  margin: 0 auto 32px;
  box-shadow: 0 6px 20px rgba(92, 16, 29, 0.06);
}

.inv-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  align-items: start;
}

@media (max-width: 768px) {
  .inv-layout {
    grid-template-columns: 1fr;
  }
}

.inv-card-inner {
  background: #3a080f;
  border: 4px double #d4af37;
  border-radius: 12px;
  padding: 24px 20px;
  color: #ffffff;
  text-align: center;
  position: relative;
  box-shadow: 0 8px 24px rgba(58, 8, 15, 0.35);
}

.inv-sacred-om {
  font-size: 40px;
  color: #ffd700;
  display: block;
  margin-bottom: 4px;
}

.inv-card-shloka {
  font-family: var(--serif, serif);
  font-size: 18px;
  color: #f3e5ab;
  margin: 0 0 12px;
}

.inv-card-intro {
  font-size: 13.5px;
  color: #fdf6e7;
  line-height: 1.45;
  margin-bottom: 14px;
}

.inv-card-puja-badge {
  background: #5c101d;
  border: 1.5px solid #d4af37;
  color: #ffd700;
  font-weight: 700;
  font-size: 16px;
  padding: 8px 14px;
  border-radius: 8px;
  margin-bottom: 16px;
}

.inv-card-detail-row {
  display: flex;
  justify-content: space-between;
  border-bottom: 1px solid rgba(212, 175, 55, 0.25);
  padding: 6px 0;
  font-size: 13.5px;
  text-align: left;
}

.inv-label {
  color: #d4af37;
  font-weight: 600;
}

.inv-val {
  color: #ffffff;
  font-weight: 700;
  text-align: right;
}

.inv-card-custom-msg {
  font-style: italic;
  color: #f3e5ab;
  font-size: 13px;
  margin: 14px 0 10px;
}

.inv-card-footer {
  font-size: 11px;
  color: #a89078;
  margin-top: 12px;
}

/* --------------------------------------------------------------------------
   Feature 7: Daily Aarti Corner
   -------------------------------------------------------------------------- */
.aarti-corner-wrap {
  background: #ffffff;
  border: 2px solid #d4af37;
  border-radius: 16px;
  padding: 24px;
  max-width: 850px;
  margin: 0 auto 32px;
  box-shadow: 0 6px 20px rgba(92, 16, 29, 0.06);
}

.aarti-tracks-list {
  display: flex;
  overflow-x: auto;
  gap: 10px;
  padding-bottom: 12px;
  margin-bottom: 20px;
  scrollbar-width: thin;
}

.aarti-track-pill {
  background: #fbf6ec;
  border: 1.5px solid #dcc8a4;
  border-radius: 20px;
  padding: 6px 14px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13.5px;
  font-weight: 700;
  color: #3a080f;
  white-space: nowrap;
  cursor: pointer;
  transition: all 0.2s ease;
}

.aarti-track-pill:hover, .aarti-track-pill.active {
  background: #8b0000;
  color: #ffffff;
  border-color: #5c101d;
}

.aarti-pill-icon {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  object-fit: cover;
}

.aarti-player-card {
  background: #2b060b;
  border: 2px solid #d4af37;
  border-radius: 12px;
  padding: 18px;
  color: #ffffff;
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 18px;
}

.aarti-player-header {
  display: flex;
  align-items: center;
  gap: 14px;
}

.aarti-player-art {
  width: 52px;
  height: 52px;
  border-radius: 8px;
  border: 1px solid #d4af37;
  object-fit: cover;
}

.aarti-player-title {
  font-family: var(--serif, serif);
  font-size: 17px;
  color: #ffd700;
  margin: 0;
}

.aarti-controls-bar {
  display: flex;
  align-items: center;
  gap: 12px;
}

.aarti-play-btn {
  background: #d4af37;
  border: none;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  font-size: 18px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.15s ease;
}

.aarti-play-btn:hover {
  transform: scale(1.08);
}

.aarti-seek-slider {
  flex-grow: 1;
  accent-color: #ffd700;
  cursor: pointer;
}

.aarti-time-text {
  font-size: 12px;
  color: #f3e5ab;
  font-variant-numeric: tabular-nums;
}

.aarti-lyrics-container {
  background: #fdfaf4;
  border: 1px solid #e8d7b5;
  border-radius: 10px;
  padding: 16px;
  max-height: 220px;
  overflow-y: auto;
  text-align: center;
}

.aarti-lyric-line {
  font-family: var(--serif, serif);
  font-size: 16px;
  color: #3a080f;
  margin: 6px 0;
  line-height: 1.6;
  transition: all 0.2s ease;
}

.aarti-lyric-line.active {
  color: #8b0000;
  font-weight: 700;
  font-size: 17.5px;
  background: rgba(212, 175, 55, 0.18);
  border-radius: 6px;
  padding: 4px 10px;
  text-shadow: 0 0 1px rgba(139, 0, 0, 0.3);
  transform: scale(1.02);
}

/* --------------------------------------------------------------------------
   Feature 8: Referral & Friend Rewards
   -------------------------------------------------------------------------- */
.referral-card {
  background: #ffffff;
  border: 2px solid #d4af37;
  border-radius: 16px;
  padding: 24px;
  max-width: 800px;
  margin: 0 auto 32px;
  box-shadow: 0 6px 20px rgba(92, 16, 29, 0.06);
}

.ref-code-box {
  background: #fcf9f2;
  border: 1.5px dashed #d4af37;
  border-radius: 10px;
  padding: 14px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 16px 0;
  flex-wrap: wrap;
}

.ref-code-val {
  font-family: monospace;
  font-size: 20px;
  font-weight: 800;
  color: #8b0000;
  letter-spacing: 1px;
}

.ref-stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 12px;
  margin: 18px 0;
}

.ref-stat-box {
  background: #fdfaf4;
  border: 1px solid #e8d7b5;
  border-radius: 8px;
  padding: 12px;
  text-align: center;
}

.ref-stat-num {
  font-size: 22px;
  font-weight: 800;
  color: #3a080f;
  display: block;
}

.ref-stat-label {
  font-size: 12px;
  color: #666;
}

.ref-terms-notice {
  font-size: 12px;
  color: #777;
  background: #f9f9f9;
  border-radius: 6px;
  padding: 10px;
  line-height: 1.45;
  margin-top: 14px;
}

/* --------------------------------------------------------------------------
   Feature 9: Festival Calendar
   -------------------------------------------------------------------------- */
.festivals-container {
  background: #ffffff;
  border: 2px solid #d4af37;
  border-radius: 16px;
  padding: 24px;
  max-width: 900px;
  margin: 0 auto 32px;
  box-shadow: 0 6px 20px rgba(92, 16, 29, 0.06);
}

.festivals-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 16px;
}

.festival-card {
  background: #fdfaf4;
  border: 1.5px solid #e8d7b5;
  border-radius: 10px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.festival-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}

.festival-badge {
  font-size: 11px;
  font-weight: 700;
  color: #8b0000;
}

.festival-date {
  font-size: 12px;
  font-weight: 600;
  color: #854d0e;
}

.festival-title {
  font-family: var(--serif, serif);
  font-size: 16px;
  color: #3a080f;
  margin: 0 0 6px;
}

.festival-desc {
  font-size: 13px;
  color: #555;
  line-height: 1.45;
  margin: 0 0 14px;
  flex-grow: 1;
}

.festival-actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* --------------------------------------------------------------------------
   Feature 10: Personalized Puja Completion Keepsake
   -------------------------------------------------------------------------- */
.keepsake-container {
  background: #ffffff;
  border: 2px solid #d4af37;
  border-radius: 16px;
  padding: 24px;
  max-width: 850px;
  margin: 0 auto 32px;
  box-shadow: 0 6px 20px rgba(92, 16, 29, 0.06);
}

.keepsake-certificate-card {
  background: #2d080e;
  border: 4px double #d4af37;
  border-radius: 12px;
  padding: 28px 24px;
  color: #ffffff;
  text-align: center;
  position: relative;
  box-shadow: 0 10px 30px rgba(45, 8, 14, 0.4);
  margin: 18px 0;
}

.keepsake-border {
  border: 1px solid rgba(212, 175, 55, 0.4);
  border-radius: 8px;
  padding: 20px 16px;
}

.keepsake-om {
  font-size: 44px;
  color: #ffd700;
  display: block;
}

.keepsake-title {
  font-family: var(--serif, serif);
  font-size: 22px;
  color: #f3e5ab;
  margin: 4px 0 2px;
}

.keepsake-shloka {
  font-size: 13.5px;
  color: #e5c07b;
  font-style: italic;
  margin: 0 0 12px;
}

.keepsake-divider {
  height: 2px;
  background: linear-gradient(90deg, transparent, #d4af37, transparent);
  margin: 12px auto;
  max-width: 300px;
}

.keepsake-certifies {
  font-size: 13.5px;
  color: #fdf6e7;
  margin: 6px 0;
}

.keepsake-devotee-name {
  font-family: var(--serif, serif);
  font-size: 28px;
  color: #ffd700;
  margin: 6px 0;
  text-shadow: 0 2px 6px rgba(0,0,0,0.6);
}

.keepsake-puja-name {
  font-family: var(--serif, serif);
  font-size: 20px;
  color: #ffffff;
  margin: 6px 0;
}

.keepsake-blessing {
  font-size: 13px;
  color: #f3e5ab;
  margin: 10px 0;
  line-height: 1.45;
}

.keepsake-footer-row {
  display: flex;
  justify-content: space-between;
  margin-top: 16px;
  font-size: 12px;
  color: #e5c07b;
  border-top: 1px solid rgba(212, 175, 55, 0.3);
  padding-top: 10px;
}

.keepsake-disclaimer {
  font-size: 11px;
  color: #a89078;
  margin-top: 12px;
}

/* Responsive adjustments */
@media (max-width: 600px) {
  .mandir-experience {
    padding: 24px 12px 32px !important;
  }
  .mandir-discovery-grid {
    grid-template-columns: 1fr;
  }
  .darshan-stage {
    padding: 16px 10px;
  }
  .darshan-deity-view {
    min-height: 250px;
  }
  .darshan-btn {
    padding: 6px 12px;
    font-size: 12px;
  }
  .panchang-grid {
    grid-template-columns: 1fr 1fr;
  }
}
/* ==========================================================================
   PUJAYANTRA — BHAKTI SANGAM 1.0 (COMMUNITY & LIVE GROUP AARTI STYLES)
   ========================================================================== */

/* Main Sangam Section */
#sangam {
  background: radial-gradient(circle at 50% 20%, #fffbf2 0%, #faeed5 60%, #f4e0ba 100%);
  border-top: 2px solid #d4af37;
  border-bottom: 2px solid #d4af37;
  padding: 40px 16px 60px;
  position: relative;
  overflow: hidden;
}

#sangam::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 6px;
  background: linear-gradient(90deg, #731b23, #d4af37, #c85a17, #d4af37, #731b23);
}

/* Presence Widget */
.presence-banner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  background: rgba(115, 27, 35, 0.06);
  border: 1px solid rgba(212, 175, 55, 0.4);
  border-radius: 30px;
  padding: 8px 20px;
  max-width: 520px;
  margin: 0 auto 30px;
  box-shadow: 0 4px 12px rgba(100, 55, 20, 0.06);
}

.presence-pulse-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #10b981;
  box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.7);
  animation: pulse-presence 2s infinite;
  flex-shrink: 0;
}

@keyframes pulse-presence {
  0% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.7); }
  70% { transform: scale(1.15); box-shadow: 0 0 0 8px rgba(16, 185, 129, 0); }
  100% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(16, 185, 129, 0); }
}

.presence-text {
  font-size: 14px;
  color: #5c181f;
  font-weight: 600;
  letter-spacing: 0.3px;
}

.presence-count-badge {
  background: #731b23;
  color: #fcedb6;
  font-weight: 700;
  padding: 2px 10px;
  border-radius: 12px;
  border: 1px solid #d4af37;
  font-size: 13px;
}

/* Group Aarti Waiting Room Card */
.sangam-aarti-hero {
  background: linear-gradient(135deg, #4b1016 0%, #731b23 60%, #8b232e 100%);
  border: 2px solid #d4af37;
  border-radius: 18px;
  padding: 28px 24px;
  color: #fffcf7;
  box-shadow: 0 10px 30px rgba(75, 16, 22, 0.35);
  margin-bottom: 45px;
  position: relative;
  overflow: hidden;
}

.sangam-aarti-hero::after {
  content: "";
  position: absolute;
  top: -50%;
  right: -20%;
  width: 320px;
  height: 320px;
  background: radial-gradient(circle, rgba(212, 175, 55, 0.25) 0%, transparent 70%);
  pointer-events: none;
}

.aarti-waiting-grid {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 24px;
  align-items: center;
}

.aarti-hero-art-wrap {
  position: relative;
  width: 110px;
  height: 110px;
  border-radius: 50%;
  border: 3px solid #d4af37;
  box-shadow: 0 0 18px rgba(212, 175, 55, 0.5);
  overflow: hidden;
  background: #382419;
  flex-shrink: 0;
}

.aarti-hero-art-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.aarti-waiting-details {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.aarti-session-status-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(212, 175, 55, 0.2);
  border: 1px solid #d4af37;
  color: #fcedb6;
  font-size: 12px;
  text-transform: uppercase;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 12px;
  width: fit-content;
}

.aarti-session-status-badge.live-pulse {
  background: rgba(220, 38, 38, 0.85);
  border-color: #ef4444;
  color: #fff;
  animation: pulse-presence 1.5s infinite;
}

.aarti-session-title {
  font-family: var(--serif, 'Noto Serif Devanagari', serif);
  font-size: 22px;
  color: #fcedb6;
  margin: 0;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.4);
}

.aarti-session-desc {
  font-size: 13.5px;
  color: #fbd38d;
  margin: 0;
  line-height: 1.4;
}

.aarti-countdown-box {
  background: rgba(0, 0, 0, 0.35);
  border: 1.5px solid rgba(212, 175, 55, 0.5);
  border-radius: 14px;
  padding: 12px 18px;
  text-align: center;
  min-width: 190px;
}

.aarti-countdown-label {
  font-size: 11px;
  color: #e5c07b;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  margin-bottom: 4px;
}

.aarti-countdown-digits {
  font-family: monospace, 'Courier New', sans-serif;
  font-size: 26px;
  font-weight: 700;
  color: #fff5cc;
  letter-spacing: 2px;
  text-shadow: 0 0 10px rgba(212, 175, 55, 0.6);
}

.btn-join-aarti {
  background: linear-gradient(135deg, #d4af37 0%, #b8860b 100%);
  color: #4b1016;
  font-weight: 700;
  font-size: 15px;
  padding: 12px 24px;
  border: 1.5px solid #fff5cc;
  border-radius: 25px;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(212, 175, 55, 0.4);
  transition: all 0.25s ease;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 10px;
  text-decoration: none;
}

.btn-join-aarti:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(212, 175, 55, 0.6);
  background: linear-gradient(135deg, #fcedb6 0%, #d4af37 100%);
}

/* Fullscreen Group Aarti Temple Sanctum Modal */
#group-aarti-modal {
  position: fixed;
  inset: 0;
  z-index: 99999;
  background: rgba(20, 8, 10, 0.94);
  backdrop-filter: blur(8px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
}

#group-aarti-modal[hidden] {
  display: none !important;
}

.aarti-sanctum-card {
  background: radial-gradient(circle at 50% 25%, #4b1016 0%, #2b080c 80%, #150305 100%);
  border: 2px solid #d4af37;
  border-radius: 20px;
  width: 100%;
  max-width: 860px;
  max-height: 94vh;
  display: flex;
  flex-direction: column;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.7), 0 0 30px rgba(212, 175, 55, 0.3);
  position: relative;
  overflow: hidden;
  color: #fffcf7;
}

.aarti-sanctum-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 20px;
  border-bottom: 1.5px solid rgba(212, 175, 55, 0.35);
  background: rgba(0, 0, 0, 0.3);
}

.sanctum-header-left {
  display: flex;
  align-items: center;
  gap: 12px;
}

.sanctum-live-tag {
  background: #dc2626;
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 6px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.sanctum-participants-badge {
  background: rgba(212, 175, 55, 0.2);
  border: 1px solid #d4af37;
  color: #fcedb6;
  font-size: 12px;
  padding: 3px 10px;
  border-radius: 12px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.aarti-modal-close-btn {
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(212, 175, 55, 0.4);
  color: #fcedb6;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  transition: all 0.2s;
}

.aarti-modal-close-btn:hover {
  background: rgba(220, 38, 38, 0.8);
  color: #fff;
}

.aarti-sanctum-stage {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 18px 20px 10px;
  overflow: hidden;
  background: radial-gradient(circle at 50% 40%, rgba(212, 175, 55, 0.15) 0%, transparent 70%);
}

#aarti-room-flower-canvas {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 5;
  width: 100%;
  height: 100%;
}

.sanctum-altar-view {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 30px;
  position: relative;
  z-index: 2;
  margin-bottom: 12px;
}

.sanctum-diya-stand {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.sanctum-diya-brass {
  width: 48px;
  height: auto;
  position: relative;
}

.aarti-room-flame {
  width: 14px;
  height: 24px;
  background: radial-gradient(ellipse at 50% 80%, #fff7bc 0%, #ff9800 60%, #e65100 100%);
  border-radius: 50% 50% 30% 30% / 60% 60% 40% 40%;
  margin: 0 auto -6px;
  box-shadow: 0 0 16px #ffb300, 0 0 28px #ff6f00;
  animation: flicker-flame 0.25s infinite alternate;
}

@keyframes flicker-flame {
  0% { transform: scale(0.95, 0.98) rotate(-1deg); opacity: 0.9; }
  100% { transform: scale(1.05, 1.02) rotate(1deg); opacity: 1; }
}

.sanctum-deity-circle {
  width: 130px;
  height: 130px;
  border-radius: 50%;
  border: 3px solid #d4af37;
  box-shadow: 0 0 30px rgba(212, 175, 55, 0.6), inset 0 0 20px rgba(0, 0, 0, 0.5);
  overflow: hidden;
  background: #382419;
  position: relative;
}

.sanctum-deity-circle img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.aarti-room-bell {
  font-size: 38px;
  cursor: pointer;
  filter: drop-shadow(0 0 10px rgba(212, 175, 55, 0.6));
  transition: transform 0.15s ease;
  user-select: none;
}

.aarti-room-bell.ringing {
  animation: ring-bell 0.6s ease-in-out;
}

@keyframes ring-bell {
  0%, 100% { transform: rotate(0); }
  25% { transform: rotate(-24deg); }
  50% { transform: rotate(20deg); }
  75% { transform: rotate(-12deg); }
}

.sanctum-deity-title {
  font-family: var(--serif, 'Noto Serif Devanagari', serif);
  font-size: 20px;
  color: #fcedb6;
  margin: 0;
  text-align: center;
  z-index: 2;
}

.sanctum-deity-shloka {
  font-size: 13px;
  color: #e5c07b;
  margin: 4px 0 10px;
  text-align: center;
  font-style: italic;
  z-index: 2;
}

/* Synchronized Lyrics Container */
.aarti-lyrics-viewport {
  background: rgba(15, 4, 6, 0.75);
  border: 1px solid rgba(212, 175, 55, 0.3);
  border-radius: 12px;
  padding: 14px 18px;
  height: 140px;
  overflow-y: auto;
  position: relative;
  margin: 0 20px 12px;
  scroll-behavior: smooth;
}

.aarti-lyrics-viewport::-webkit-scrollbar {
  width: 5px;
}
.aarti-lyrics-viewport::-webkit-scrollbar-thumb {
  background: #d4af37;
  border-radius: 4px;
}

.room-lyric-line {
  font-family: 'Noto Serif Devanagari', 'Cinzel', serif;
  font-size: 15px;
  line-height: 1.8;
  color: #c9b197;
  text-align: center;
  padding: 4px 0;
  transition: all 0.3s ease;
}

.room-lyric-line.active {
  color: #fff5cc;
  font-weight: 700;
  font-size: 17px;
  text-shadow: 0 0 12px rgba(212, 175, 55, 0.8);
  transform: scale(1.03);
}

.aarti-progress-track {
  background: rgba(255, 255, 255, 0.1);
  height: 4px;
  border-radius: 2px;
  margin: 0 20px 14px;
  overflow: hidden;
}

#aarti-room-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, #d4af37, #ff9800);
  width: 0%;
  transition: width 0.3s linear;
}

/* Devotional Interaction Bar */
.sanctum-action-bar {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 12px 20px 18px;
  border-top: 1px solid rgba(212, 175, 55, 0.25);
  background: rgba(0, 0, 0, 0.2);
  flex-wrap: wrap;
}

.sanctum-btn {
  background: rgba(212, 175, 55, 0.15);
  border: 1.5px solid #d4af37;
  color: #fcedb6;
  border-radius: 20px;
  padding: 8px 16px;
  font-size: 13.5px;
  font-weight: 600;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: all 0.2s ease;
}

.sanctum-btn:hover {
  background: #d4af37;
  color: #4b1016;
  transform: translateY(-1px);
}

/* Completion Card Overlay */
#aarti-room-completion {
  padding: 18px 24px;
  text-align: center;
  background: rgba(75, 16, 22, 0.95);
  border-top: 2px solid #d4af37;
}

#aarti-room-completion[hidden] {
  display: none !important;
}

.completion-prasad-icon {
  font-size: 36px;
  margin-bottom: 6px;
}

.completion-title {
  font-family: var(--serif, 'Noto Serif Devanagari', serif);
  font-size: 18px;
  color: #fcedb6;
  margin: 0 0 6px;
}

.completion-desc {
  font-size: 13px;
  color: #fbd38d;
  margin: 0 0 12px;
}

/* Sub-sections Layout: 2-column on desktop */
.sangam-grid-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
  margin-top: 24px;
}

/* Prayer Wall Section */
.sangam-block-card {
  background: #fffcf7;
  border: 1.5px solid #e3cca0;
  border-radius: 16px;
  padding: 24px 20px;
  box-shadow: 0 4px 16px rgba(100, 55, 20, 0.08);
}

.sangam-block-title {
  font-family: var(--serif, 'Noto Serif Devanagari', serif);
  font-size: 20px;
  color: #5c181f;
  margin: 0 0 6px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.sangam-block-sub {
  font-size: 13px;
  color: #6e5847;
  margin: 0 0 18px;
}

.prayer-pills-row {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding-bottom: 10px;
  margin-bottom: 14px;
}

.prayer-cat-pill, .room-tab-btn {
  background: #fbf5e8;
  border: 1px solid #d4af37;
  color: #5c181f;
  font-size: 12.5px;
  font-weight: 600;
  padding: 5px 12px;
  border-radius: 16px;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.2s;
}

.prayer-cat-pill.active, .room-tab-btn.active {
  background: #731b23;
  color: #fffcf7;
  border-color: #731b23;
}

.prayer-submit-card {
  background: #fcf6ea;
  border: 1px dashed #d4af37;
  border-radius: 12px;
  padding: 14px;
  margin-bottom: 18px;
}

.prayer-form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-bottom: 8px;
}

.prayer-input, .prayer-select, .prayer-textarea {
  width: 100%;
  border: 1px solid #d4af37;
  border-radius: 8px;
  padding: 8px 10px;
  font-size: 13px;
  background: #fff;
  color: #382419;
  box-sizing: border-box;
}

.prayer-textarea {
  resize: vertical;
  min-height: 60px;
  margin-bottom: 8px;
}

.prayer-form-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}

.prayer-checkbox-label {
  font-size: 12.5px;
  color: #6e5847;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
}

.btn-sangam-submit {
  background: #731b23;
  color: #fffcf7;
  border: 1px solid #d4af37;
  border-radius: 18px;
  padding: 6px 16px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
}

.btn-sangam-submit:hover {
  background: #4b1016;
}

.prayer-cards-stream {
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-height: 420px;
  overflow-y: auto;
  padding-right: 4px;
}

.prayer-card {
  background: #fff;
  border: 1px solid rgba(212, 175, 55, 0.4);
  border-left: 3px solid #731b23;
  border-radius: 10px;
  padding: 12px 14px;
  box-shadow: 0 2px 8px rgba(100, 55, 20, 0.05);
}

.prayer-card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 6px;
}

.prayer-author {
  font-weight: 700;
  font-size: 13px;
  color: #5c181f;
  display: flex;
  align-items: center;
  gap: 5px;
}

.prayer-tag {
  background: #faeed5;
  color: #78350f;
  font-size: 11px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 10px;
}

.prayer-body {
  font-size: 13.5px;
  color: #382419;
  line-height: 1.45;
  margin: 0 0 10px;
}

.prayer-card-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 11.5px;
  color: #8c7360;
  border-top: 1px solid #f2e3c6;
  padding-top: 6px;
}

.prayer-actions-group {
  display: flex;
  align-items: center;
  gap: 8px;
}

.btn-pranam-react {
  background: rgba(212, 175, 55, 0.12);
  border: 1px solid #d4af37;
  color: #731b23;
  border-radius: 14px;
  padding: 3px 10px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  transition: all 0.2s;
}

.btn-pranam-react:hover {
  background: #d4af37;
}

.btn-prayer-action-link {
  background: none;
  border: none;
  color: #942933;
  font-size: 11px;
  cursor: pointer;
  padding: 0;
  text-decoration: underline;
}

/* Discussion Rooms */
.rooms-header-actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}

.discussions-stream {
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-height: 420px;
  overflow-y: auto;
  padding-right: 4px;
}

.discussion-card {
  background: #fff;
  border: 1px solid rgba(212, 175, 55, 0.4);
  border-radius: 10px;
  padding: 14px;
  box-shadow: 0 2px 8px rgba(100, 55, 20, 0.05);
}

.discussion-title {
  font-size: 14.5px;
  font-weight: 700;
  color: #4b1016;
  margin: 0 0 6px;
}

.discussion-body {
  font-size: 13px;
  color: #4a382d;
  line-height: 1.45;
  margin: 0 0 10px;
}

/* Devotee Profiles Section */
.profiles-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: 14px;
  margin-top: 14px;
}

.devotee-profile-card {
  background: #fff;
  border: 1.5px solid rgba(212, 175, 55, 0.4);
  border-radius: 12px;
  padding: 14px;
  text-align: center;
  box-shadow: 0 2px 8px rgba(100, 55, 20, 0.05);
  display: flex;
  flex-direction: column;
  align-items: center;
}

.devotee-avatar-glyph {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: #faeed5;
  border: 1.5px solid #d4af37;
  font-size: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 8px;
}

.devotee-name {
  font-weight: 700;
  font-size: 14px;
  color: #5c181f;
  margin: 0 0 3px;
}

.devotee-deity-pill {
  font-size: 11px;
  background: rgba(115, 27, 35, 0.08);
  color: #731b23;
  padding: 2px 8px;
  border-radius: 10px;
  margin-bottom: 6px;
}

.devotee-bio {
  font-size: 12px;
  color: #6e5847;
  margin: 0 0 10px;
  line-height: 1.35;
}

.btn-follow-devotee {
  background: #fff;
  border: 1.5px solid #731b23;
  color: #731b23;
  font-size: 12px;
  font-weight: 600;
  padding: 4px 14px;
  border-radius: 14px;
  cursor: pointer;
  transition: all 0.2s;
  width: 100%;
}

.btn-follow-devotee.following {
  background: #731b23;
  color: #fff;
}

/* Festival Community Events Grid */
.sangam-events-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 14px;
  margin-top: 14px;
}

.sangam-event-card {
  background: #fff;
  border: 1.5px solid rgba(212, 175, 55, 0.4);
  border-radius: 12px;
  padding: 14px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.event-card-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 8px;
}

.event-date-badge {
  background: #faeed5;
  border: 1px solid #d4af37;
  color: #78350f;
  font-size: 11px;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 6px;
}

.event-title {
  font-size: 14.5px;
  font-weight: 700;
  color: #5c181f;
  margin: 0 0 4px;
}

.event-tithi {
  font-size: 12px;
  color: #6e5847;
  margin-bottom: 12px;
}

.event-card-actions {
  display: flex;
  gap: 8px;
}

.btn-event-rsvp {
  flex: 1;
  background: #731b23;
  color: #fffcf7;
  border: 1px solid #d4af37;
  border-radius: 14px;
  padding: 5px 10px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
}

.btn-event-ics {
  background: #fbf5e8;
  border: 1px solid #d4af37;
  color: #731b23;
  border-radius: 14px;
  padding: 5px 10px;
  font-size: 12px;
  cursor: pointer;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* Community Notification Box */
.sangam-notif-box {
  background: #fcf6ea;
  border: 1.5px solid #d4af37;
  border-radius: 14px;
  padding: 16px 20px;
  margin-top: 30px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
}

.notif-box-details {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.notif-box-title {
  font-size: 15px;
  font-weight: 700;
  color: #5c181f;
  margin: 0;
  display: flex;
  align-items: center;
  gap: 6px;
}

.notif-box-sub {
  font-size: 12.5px;
  color: #6e5847;
  margin: 0;
}

.notif-toggles-row {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}

/* Post Modal */
#community-post-modal {
  position: fixed;
  inset: 0;
  z-index: 99998;
  background: rgba(0, 0, 0, 0.7);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
}

#community-post-modal[hidden] {
  display: none !important;
}

.post-modal-content {
  background: #fffcf7;
  border: 2px solid #d4af37;
  border-radius: 16px;
  max-width: 500px;
  width: 100%;
  padding: 20px 24px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
}

/* Admin Community Panel */
.admin-community-card {
  background: #fff;
  border: 1.5px solid #d4af37;
  border-radius: 12px;
  padding: 20px;
  margin-bottom: 20px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
}

.admin-schedule-form {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 14px;
  margin-bottom: 16px;
}

/* Mobile & Tablet Responsiveness */
@media (max-width: 900px) {
  .sangam-grid-layout {
    grid-template-columns: 1fr;
    gap: 24px;
  }
  .aarti-waiting-grid {
    grid-template-columns: 1fr;
    text-align: center;
    justify-items: center;
  }
  .aarti-waiting-details {
    align-items: center;
  }
}

@media (max-width: 600px) {
  #sangam {
    padding: 28px 12px 40px;
  }
  .sanctum-altar-view {
    gap: 14px;
  }
  .sanctum-deity-circle {
    width: 100px;
    height: 100px;
  }
  .sanctum-action-bar {
    gap: 8px;
  }
  .sanctum-btn {
    padding: 6px 12px;
    font-size: 12px;
  }
  .aarti-lyrics-viewport {
    height: 110px;
    padding: 10px;
    margin: 0 10px 10px;
  }
  .room-lyric-line {
    font-size: 13.5px;
  }
  .room-lyric-line.active {
    font-size: 15px;
  }
}


/* ==========================================================================
   PUJAYANTRA — BHAKTI SANGAM (RESPONSIVE LAYOUT & LIVE DEVOTEE CHAT)
   Zero horizontal overflow: all viewports 320px to 1920px.
   ========================================================================== */

/* Universal Box-Sizing & Zero-Min-Width for Sangam elements */
#sangam,
#sangam *,
#devotee-chat-modal,
#devotee-chat-modal *,
#devotee-profile-modal,
#devotee-profile-modal * {
  box-sizing: border-box;
}

/* Main Section Container */
#sangam {
  width: 100%;
  max-width: 100%;
  margin: 0;
  padding: 36px 14px 48px;
  background: radial-gradient(circle at 50% 20%, #fffbf2 0%, #faeed5 60%, #f4e0ba 100%);
  border-top: 2px solid #d4af37;
  border-bottom: 2px solid #d4af37;
  position: relative;
}

#sangam::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 6px;
  background: linear-gradient(90deg, #731b23, #d4af37, #c85a17, #d4af37, #731b23);
}

.sangam-inner-wrap {
  max-width: 1240px;
  margin: 0 auto;
  width: 100%;
  min-width: 0;
}

/* Section Header */
.mandir-section-header {
  text-align: center;
  max-width: 760px;
  margin: 0 auto 24px;
  padding: 0 10px;
  width: 100%;
  min-width: 0;
}

.mandir-eyebrow {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.2px;
  color: #731b23;
  text-transform: uppercase;
  margin-bottom: 6px;
}

.mandir-main-title {
  font-family: var(--serif, 'Noto Serif Devanagari', serif);
  font-size: clamp(20px, 4vw, 30px);
  color: #4b1016;
  margin: 0 0 8px;
  line-height: 1.25;
  overflow-wrap: break-word;
  word-break: break-word;
}

.mandir-subtitle {
  font-size: clamp(12.5px, 2.5vw, 14.5px);
  color: #6e5847;
  line-height: 1.45;
  margin: 0;
  overflow-wrap: break-word;
  word-break: break-word;
}

/* Presence Banner */
.presence-banner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  background: rgba(115, 27, 35, 0.06);
  border: 1px solid rgba(212, 175, 55, 0.45);
  border-radius: 24px;
  padding: 8px 16px;
  max-width: 100%;
  width: fit-content;
  margin: 0 auto 24px;
  box-shadow: 0 4px 12px rgba(100, 55, 20, 0.06);
  flex-wrap: wrap;
  text-align: center;
}

.presence-pulse-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #10b981;
  box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.7);
  animation: pulse-presence 2s infinite;
  flex-shrink: 0;
}

@keyframes pulse-presence {
  0% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.7); }
  70% { transform: scale(1.15); box-shadow: 0 0 0 7px rgba(16, 185, 129, 0); }
  100% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(16, 185, 129, 0); }
}

.presence-text {
  font-size: 13.5px;
  color: #5c181f;
  font-weight: 600;
  letter-spacing: 0.2px;
}

.presence-count-badge {
  background: #731b23;
  color: #fcedb6;
  font-weight: 700;
  padding: 2px 9px;
  border-radius: 12px;
  border: 1px solid #d4af37;
  font-size: 13px;
}

/* Mobile Bhakti Sangam Navigation Tabs */
.sangam-nav-tabs {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  max-width: 100%;
  width: 100%;
  min-width: 0;
  padding-bottom: 8px;
  margin-bottom: 20px;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  justify-content: flex-start;
}

.sangam-nav-tabs::-webkit-scrollbar {
  display: none;
}

@media (min-width: 769px) {
  .sangam-nav-tabs {
    justify-content: center;
  }
}

.sangam-tab-pill {
  background: #fbf5e8;
  border: 1.5px solid #d4af37;
  color: #5c181f;
  font-size: 13px;
  font-weight: 600;
  padding: 6px 14px;
  border-radius: 20px;
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
  transition: all 0.2s ease;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.sangam-tab-pill.active {
  background: #731b23;
  color: #fffcf7;
  border-color: #731b23;
  box-shadow: 0 3px 8px rgba(115, 27, 35, 0.25);
}

.sangam-tab-pill .unread-badge {
  background: #dc2626;
  color: #fff;
  border-radius: 10px;
  padding: 1px 6px;
  font-size: 10.5px;
  font-weight: 700;
}

/* Group Aarti Waiting Room Hero */
.sangam-aarti-hero {
  background: linear-gradient(135deg, #4b1016 0%, #731b23 60%, #8b232e 100%);
  border: 2px solid #d4af37;
  border-radius: 18px;
  padding: 24px 20px;
  color: #fffcf7;
  box-shadow: 0 10px 30px rgba(75, 16, 22, 0.35);
  margin-bottom: 32px;
  position: relative;
  overflow: hidden;
  width: 100%;
  max-width: 100%;
  min-width: 0;
}

.sangam-aarti-hero::after {
  content: "";
  position: absolute;
  top: -50%;
  right: -20%;
  width: 280px;
  height: 280px;
  background: radial-gradient(circle, rgba(212, 175, 55, 0.2) 0%, transparent 70%);
  pointer-events: none;
}

.aarti-waiting-grid {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 20px;
  align-items: center;
  width: 100%;
  max-width: 100%;
  min-width: 0;
}

@media (max-width: 860px) {
  .aarti-waiting-grid {
    grid-template-columns: minmax(0, 1fr);
    text-align: center;
    justify-items: center;
    gap: 16px;
  }
}

.aarti-hero-art-wrap {
  width: 96px;
  height: 96px;
  border-radius: 50%;
  border: 3px solid #d4af37;
  box-shadow: 0 0 18px rgba(212, 175, 55, 0.5);
  overflow: hidden;
  background: #382419;
  flex-shrink: 0;
}

.aarti-hero-art-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.aarti-waiting-details {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
  width: 100%;
  max-width: 100%;
}

@media (max-width: 860px) {
  .aarti-waiting-details {
    align-items: center;
  }
}

.aarti-session-status-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: rgba(212, 175, 55, 0.2);
  border: 1px solid #d4af37;
  color: #fcedb6;
  font-size: 11.5px;
  text-transform: uppercase;
  font-weight: 700;
  padding: 3px 9px;
  border-radius: 12px;
  width: fit-content;
}

.aarti-session-status-badge.live-pulse {
  background: rgba(220, 38, 38, 0.9);
  border-color: #ef4444;
  color: #fff;
  animation: pulse-presence 1.5s infinite;
}

.aarti-session-title {
  font-family: var(--serif, 'Noto Serif Devanagari', serif);
  font-size: clamp(17px, 3.5vw, 22px);
  color: #fcedb6;
  margin: 0;
  line-height: 1.3;
  overflow-wrap: break-word;
  word-break: break-word;
}

.aarti-session-desc {
  font-size: clamp(12px, 2.2vw, 13.5px);
  color: #fbd38d;
  margin: 0;
  line-height: 1.4;
  overflow-wrap: break-word;
  word-break: break-word;
}

.aarti-countdown-box {
  background: rgba(0, 0, 0, 0.35);
  border: 1.5px solid rgba(212, 175, 55, 0.5);
  border-radius: 14px;
  padding: 12px 16px;
  text-align: center;
  width: fit-content;
  max-width: 100%;
  min-width: 0;
}

.aarti-countdown-label {
  font-size: 11px;
  color: #e5c07b;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  margin-bottom: 4px;
}

.aarti-countdown-digits {
  font-family: monospace, 'Courier New', sans-serif;
  font-size: clamp(20px, 5vw, 26px);
  font-weight: 700;
  color: #fff5cc;
  letter-spacing: 2px;
  text-shadow: 0 0 10px rgba(212, 175, 55, 0.6);
}

.btn-join-aarti {
  background: linear-gradient(135deg, #d4af37 0%, #b8860b 100%);
  color: #4b1016;
  font-weight: 700;
  font-size: clamp(13px, 2.5vw, 15px);
  padding: 10px 20px;
  border: 1.5px solid #fff5cc;
  border-radius: 25px;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(212, 175, 55, 0.4);
  transition: all 0.25s ease;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 8px;
  text-decoration: none;
  max-width: 100%;
  word-break: break-word;
}

.btn-join-aarti:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(212, 175, 55, 0.6);
  background: linear-gradient(135deg, #fcedb6 0%, #d4af37 100%);
}

/* Responsive 2-Column Desktop Grid with minmax(0, 1fr) */
.sangam-grid-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 24px;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  margin-top: 24px;
}

@media (max-width: 960px) {
  .sangam-grid-layout {
    grid-template-columns: minmax(0, 1fr);
    gap: 20px;
  }
}

/* Card Blocks */
.sangam-block-card {
  background: #fffcf7;
  border: 1.5px solid #e3cca0;
  border-radius: 16px;
  padding: 20px 16px;
  box-shadow: 0 4px 16px rgba(100, 55, 20, 0.08);
  width: 100%;
  max-width: 100%;
  min-width: 0;
  word-break: break-word;
  overflow-wrap: break-word;
}

@media (max-width: 480px) {
  .sangam-block-card {
    padding: 16px 12px;
  }
}

.sangam-block-title {
  font-family: var(--serif, 'Noto Serif Devanagari', serif);
  font-size: clamp(16px, 3.2vw, 19px);
  color: #5c181f;
  margin: 0 0 6px;
  display: flex;
  align-items: center;
  gap: 8px;
  overflow-wrap: break-word;
  word-break: break-word;
}

.sangam-block-sub {
  font-size: clamp(12px, 2.4vw, 13px);
  color: #6e5847;
  margin: 0 0 16px;
  line-height: 1.4;
  overflow-wrap: break-word;
  word-break: break-word;
}

/* Category Pills & Room Tabs (Contained Horizontal Scroll) */
.prayer-pills-row {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  max-width: 100%;
  width: 100%;
  min-width: 0;
  padding-bottom: 8px;
  margin-bottom: 14px;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  flex-wrap: nowrap;
}

.prayer-pills-row::-webkit-scrollbar {
  height: 4px;
}
.prayer-pills-row::-webkit-scrollbar-thumb {
  background: #d4af37;
  border-radius: 4px;
}

.prayer-cat-pill,
.room-tab-btn {
  background: #fbf5e8;
  border: 1px solid #d4af37;
  color: #5c181f;
  font-size: 12px;
  font-weight: 600;
  padding: 5px 12px;
  border-radius: 16px;
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
  transition: all 0.2s;
  min-width: 0;
}

.prayer-cat-pill.active,
.room-tab-btn.active {
  background: #731b23;
  color: #fffcf7;
  border-color: #731b23;
}

/* Responsive Forms */
.prayer-submit-card {
  background: #fcf6ea;
  border: 1px dashed #d4af37;
  border-radius: 12px;
  padding: 12px;
  margin-bottom: 16px;
  width: 100%;
  max-width: 100%;
  min-width: 0;
}

.prayer-form-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 10px;
  margin-bottom: 8px;
  width: 100%;
  max-width: 100%;
  min-width: 0;
}

@media (max-width: 580px) {
  .prayer-form-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

.prayer-input,
.prayer-select,
.prayer-textarea {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  border: 1px solid #d4af37;
  border-radius: 8px;
  padding: 8px 10px;
  font-size: 13px;
  background: #fff;
  color: #382419;
  box-sizing: border-box;
}

.prayer-textarea {
  resize: vertical;
  min-height: 56px;
  margin-bottom: 8px;
}

.prayer-form-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  flex-wrap: wrap;
  width: 100%;
  max-width: 100%;
  min-width: 0;
}

.prayer-checkbox-label {
  font-size: 12px;
  color: #6e5847;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  word-break: break-word;
}

.btn-sangam-submit {
  background: #731b23;
  color: #fffcf7;
  border: 1px solid #d4af37;
  border-radius: 18px;
  padding: 6px 14px;
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
  white-space: nowrap;
  max-width: 100%;
}

.btn-sangam-submit:hover {
  background: #4b1016;
}

/* Card Streams */
.prayer-cards-stream,
.discussions-stream {
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-height: 380px;
  overflow-y: auto;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  padding-right: 2px;
}

.prayer-card,
.discussion-card {
  background: #fff;
  border: 1px solid rgba(212, 175, 55, 0.4);
  border-left: 3px solid #731b23;
  border-radius: 10px;
  padding: 12px;
  box-shadow: 0 2px 6px rgba(100, 55, 20, 0.04);
  width: 100%;
  max-width: 100%;
  min-width: 0;
  overflow-wrap: break-word;
  word-break: break-word;
}

.prayer-card-header,
.discussion-card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 6px;
  gap: 6px;
  flex-wrap: wrap;
}

.prayer-author {
  font-weight: 700;
  font-size: 12.5px;
  color: #5c181f;
  display: flex;
  align-items: center;
  gap: 4px;
}

.prayer-tag,
.prayer-cat-badge {
  background: #faeed5;
  color: #78350f;
  font-size: 11px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 10px;
}

.prayer-body {
  font-size: 13px;
  color: #382419;
  line-height: 1.45;
  margin: 0 0 8px;
  overflow-wrap: break-word;
  word-break: break-word;
}

.prayer-card-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 11.5px;
  color: #8c7360;
  border-top: 1px solid #f2e3c6;
  padding-top: 6px;
  gap: 6px;
  flex-wrap: wrap;
}

.btn-pranam-react {
  background: rgba(212, 175, 55, 0.12);
  border: 1px solid #d4af37;
  color: #731b23;
  border-radius: 14px;
  padding: 3px 10px;
  font-size: 11.5px;
  font-weight: 600;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  transition: all 0.2s;
  white-space: nowrap;
}

.btn-pranam-react.active {
  background: #d4af37;
  color: #4b1016;
}

/* Discussion Threads */
.rooms-header-actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
  gap: 8px;
  flex-wrap: wrap;
}

.discussion-title {
  font-size: 14px;
  font-weight: 700;
  color: #4b1016;
  margin: 0 0 4px;
  overflow-wrap: break-word;
  word-break: break-word;
}

.discussion-body {
  font-size: 12.5px;
  color: #4a382d;
  line-height: 1.4;
  margin: 0 0 8px;
  overflow-wrap: break-word;
  word-break: break-word;
}

/* PART 2: REAL ONLINE SADHAK DIRECTORY */
.online-sadhak-section {
  background: #fffcf7;
  border: 1.5px solid #d4af37;
  border-radius: 16px;
  padding: 20px 16px;
  margin-top: 24px;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  box-shadow: 0 4px 16px rgba(100, 55, 20, 0.08);
}

.online-sadhak-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid #faeed5;
}

.online-sadhak-privacy-bar {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  background: #fcf6ea;
  border: 1px solid #e3cca0;
  border-radius: 10px;
  padding: 8px 12px;
  width: 100%;
  margin-bottom: 14px;
}

.online-devotees-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(240px, 100%), 1fr));
  gap: 14px;
  width: 100%;
  max-width: 100%;
  min-width: 0;
}

.sadhak-card {
  background: #fff;
  border: 1.5px solid rgba(212, 175, 55, 0.45);
  border-radius: 12px;
  padding: 14px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  box-shadow: 0 2px 8px rgba(100, 55, 20, 0.05);
  transition: transform 0.2s, box-shadow 0.2s;
  min-width: 0;
  width: 100%;
}

.sadhak-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 14px rgba(115, 27, 35, 0.12);
}

.sadhak-avatar-wrap {
  position: relative;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: #faeed5;
  border: 2px solid #d4af37;
  font-size: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 8px;
}

.sadhak-online-dot {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background: #10b981;
  border: 2px solid #fff;
  box-shadow: 0 0 6px rgba(16, 185, 129, 0.8);
}

.sadhak-name {
  font-size: 14px;
  font-weight: 700;
  color: #5c181f;
  margin: 0 0 3px;
  overflow-wrap: break-word;
  word-break: break-word;
}

.sadhak-deity-pill {
  font-size: 11px;
  background: rgba(115, 27, 35, 0.08);
  color: #731b23;
  padding: 2px 8px;
  border-radius: 10px;
  margin-bottom: 8px;
  display: inline-block;
  max-width: 100%;
}

.sadhak-card-actions {
  display: flex;
  gap: 6px;
  width: 100%;
  margin-top: auto;
}

.btn-sadhak-view,
.btn-sadhak-chat {
  flex: 1;
  padding: 6px 8px;
  font-size: 11.5px;
  font-weight: 600;
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.2s;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  white-space: nowrap;
}

.btn-sadhak-view {
  background: #fbf5e8;
  border: 1px solid #d4af37;
  color: #5c181f;
}

.btn-sadhak-chat {
  background: #731b23;
  border: 1px solid #731b23;
  color: #fff;
}

.btn-sadhak-chat:hover {
  background: #4b1016;
}

/* PART 3: DEVOTEE PRIVATE MESSAGING MODAL / MESSENGER */
#devotee-chat-modal,
#my-chats-modal,
#edit-profile-modal,
.sangam-modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 99997;
  background: rgba(15, 4, 6, 0.75);
  backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px;
  box-sizing: border-box;
}

#devotee-chat-modal[hidden],
#my-chats-modal[hidden],
#edit-profile-modal[hidden],
.sangam-modal-overlay[hidden] {
  display: none !important;
}

.chat-modal-window {
  background: #fffcf7;
  border: 2px solid #d4af37;
  border-radius: 16px;
  width: 100%;
  max-width: 520px;
  height: 85vh;
  max-height: 680px;
  display: flex;
  flex-direction: column;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.35);
  overflow: hidden;
  position: relative;
}

.chat-modal-header {
  background: linear-gradient(135deg, #4b1016 0%, #731b23 100%);
  color: #fffcf7;
  padding: 12px 16px;
  border-bottom: 2px solid #d4af37;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-shrink: 0;
}

.chat-header-user {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.chat-partner-avatar {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: #faeed5;
  border: 1.5px solid #d4af37;
  font-size: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.chat-partner-meta {
  min-width: 0;
}

.chat-partner-name {
  font-size: 14px;
  font-weight: 700;
  color: #fcedb6;
  margin: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.chat-partner-status {
  font-size: 11px;
  color: #6ee7b7;
  display: flex;
  align-items: center;
  gap: 4px;
}

.chat-header-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}

.chat-action-icon-btn {
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(212, 175, 55, 0.4);
  color: #fcedb6;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  transition: all 0.2s;
}

.chat-action-icon-btn:hover {
  background: rgba(220, 38, 38, 0.8);
  color: #fff;
}

/* Chat Request Bar */
.chat-request-banner {
  background: #fcf6ea;
  border-bottom: 1px solid #d4af37;
  padding: 10px 14px;
  text-align: center;
  font-size: 12.5px;
  color: #5c181f;
  display: flex;
  flex-direction: column;
  gap: 6px;
  align-items: center;
  flex-shrink: 0;
}

.chat-request-actions {
  display: flex;
  gap: 8px;
}

/* Chat Messages Stream */
.chat-messages-container {
  flex: 1;
  overflow-y: auto;
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  background: radial-gradient(circle at 50% 30%, #fffbf2 0%, #fdf8ee 100%);
  min-height: 0;
}

.chat-bubble {
  max-width: 82%;
  padding: 9px 13px;
  border-radius: 14px;
  font-size: 13px;
  line-height: 1.42;
  position: relative;
  overflow-wrap: break-word;
  word-break: break-word;
  min-width: 0;
}

.chat-bubble.outgoing {
  align-self: flex-end;
  background: linear-gradient(135deg, #731b23 0%, #8b232e 100%);
  color: #fffcf7;
  border-bottom-right-radius: 3px;
  border: 1px solid rgba(212, 175, 55, 0.4);
}

.chat-bubble.incoming {
  align-self: flex-start;
  background: #fff;
  color: #382419;
  border-bottom-left-radius: 3px;
  border: 1px solid #e3cca0;
  box-shadow: 0 1px 4px rgba(100, 55, 20, 0.06);
}

.chat-timestamp {
  font-size: 10px;
  margin-top: 4px;
  opacity: 0.75;
  text-align: right;
  display: block;
}

/* Keyboard-safe message composer */
.chat-composer-wrap {
  padding: 10px 14px;
  background: #fff;
  border-top: 1px solid #e3cca0;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.chat-composer-input {
  flex: 1;
  border: 1.5px solid #d4af37;
  border-radius: 20px;
  padding: 8px 14px;
  font-size: 13px;
  outline: none;
  min-width: 0;
  max-width: 100%;
}

.chat-send-btn {
  background: #731b23;
  color: #fcedb6;
  border: 1px solid #d4af37;
  border-radius: 50%;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
  transition: all 0.2s;
}

.chat-send-btn:hover {
  background: #4b1016;
  transform: scale(1.05);
}

/* Devotee Profile View Modal */
#devotee-profile-modal {
  position: fixed;
  inset: 0;
  z-index: 99998;
  background: rgba(0, 0, 0, 0.7);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 14px;
}

#devotee-profile-modal[hidden] {
  display: none !important;
}

.devotee-modal-card {
  background: #fffcf7;
  border: 2px solid #d4af37;
  border-radius: 16px;
  width: 100%;
  max-width: 440px;
  padding: 22px 18px;
  text-align: center;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
  position: relative;
}

/* Festival Events Grid (Contained & Responsive) */
.sangam-events-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(240px, 100%), 1fr));
  gap: 14px;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  margin-top: 14px;
}

.community-event-card {
  background: #fff;
  border: 1.5px solid rgba(212, 175, 55, 0.4);
  border-radius: 12px;
  padding: 14px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  overflow-wrap: break-word;
  word-break: break-word;
}

/* Notifications Box */
.sangam-notif-box {
  background: #fcf6ea;
  border: 1.5px solid #d4af37;
  border-radius: 14px;
  padding: 16px;
  margin-top: 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  width: 100%;
  max-width: 100%;
  min-width: 0;
}

.notif-box-details {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
  flex: 1;
}

.notif-toggles-row {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

/* Admin Safety Card */
.admin-safety-badge {
  background: #dcfce7;
  border: 1px solid #16a34a;
  color: #15803d;
  font-size: 11px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 10px;
}

/* In-App Toast Notification */
.chat-toast-notice {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 100000;
  display: flex;
  align-items: center;
  gap: 12px;
  background: linear-gradient(135deg, #4b1016 0%, #731b23 100%);
  color: #fffcf7;
  border: 1.5px solid #d4af37;
  border-radius: 14px;
  padding: 12px 18px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4), 0 0 15px rgba(212, 175, 55, 0.35);
  animation: toastSlideUp 0.35s cubic-bezier(0.16, 1, 0.3, 1);
  max-width: 90vw;
  width: 360px;
  box-sizing: border-box;
}
@keyframes toastSlideUp {
  from { opacity: 0; transform: translateY(30px); }
  to { opacity: 1; transform: translateY(0); }
}
.chat-toast-icon {
  font-size: 24px;
  flex-shrink: 0;
  line-height: 1;
}
.chat-toast-body {
  flex: 1;
  min-width: 0;
}
.chat-toast-sender {
  font-size: 13.5px;
  font-weight: 700;
  color: #ffd700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.chat-toast-text {
  font-size: 12px;
  color: #fcedb6;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-top: 2px;
}
.chat-toast-action-btn {
  background: linear-gradient(135deg, #d4af37 0%, #b8860b 100%);
  color: #4b1016;
  border: none;
  font-weight: 700;
  font-size: 12px;
  padding: 6px 12px;
  border-radius: 20px;
  cursor: pointer;
  white-space: nowrap;
}
.chat-toast-close-btn {
  background: transparent;
  border: none;
  color: #fcedb6;
  font-size: 16px;
  cursor: pointer;
  padding: 2px 4px;
  line-height: 1;
}

/* My Chats List & Modal Styles */
.my-chats-item {
  display: flex;
  align-items: center;
  gap: 12px;
  background: #fff;
  border: 1px solid #ebd9b8;
  border-radius: 12px;
  padding: 10px 14px;
  cursor: pointer;
  transition: all 0.2s ease;
  position: relative;
}
.my-chats-item:hover {
  border-color: #d4af37;
  background: #fffdf7;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(181, 138, 61, 0.15);
}
.my-chats-avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: #fdf6e6;
  border: 1.5px solid #d4af37;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  flex-shrink: 0;
  position: relative;
}
.my-chats-meta {
  flex: 1;
  min-width: 0;
}
.my-chats-topline {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 2px;
}
.my-chats-name {
  font-size: 13.5px;
  font-weight: 700;
  color: #4b1016;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.my-chats-time {
  font-size: 11px;
  color: #8c7360;
  flex-shrink: 0;
}
.my-chats-preview {
  font-size: 12px;
  color: #6e5847;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Room Live Chat Bubbles */
.room-msg-bubble {
  background: #fff;
  border: 1px solid #ebd9b8;
  border-radius: 10px;
  padding: 8px 12px;
  font-size: 13px;
  display: flex;
  flex-direction: column;
  gap: 3px;
  animation: fadeIn 0.2s ease-in;
}
.room-msg-header {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11.5px;
}
.room-msg-sender {
  font-weight: 700;
  color: #5c181f;
  cursor: pointer;
}
.room-msg-sender:hover {
  text-decoration: underline;
  color: #8b232e;
}
.room-msg-time {
  color: #9c826c;
  font-size: 10.5px;
  margin-left: auto;
}
.room-msg-text {
  color: #3b2820;
  line-height: 1.35;
  word-break: break-word;
}
.room-msg-actions {
  display: flex;
  gap: 8px;
  margin-top: 4px;
  padding-top: 4px;
  border-top: 1px dashed #f0e4cc;
}
.room-msg-act-btn {
  background: none;
  border: none;
  color: #8c5b2a;
  font-size: 11px;
  cursor: pointer;
  padding: 0 4px;
  display: inline-flex;
  align-items: center;
  gap: 3px;
}
.room-msg-act-btn:hover {
  color: #4b1016;
  text-decoration: underline;
}

/* Avatar Radio Selector */
.avatar-radio-label {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 8px;
  border: 1.5px solid #ebd9b8;
  border-radius: 8px;
  cursor: pointer;
  background: #fff;
}
.avatar-radio-label:has(input:checked) {
  border-color: #d4af37;
  background: #fdf6e6;
  box-shadow: 0 0 0 1px #d4af37;
}



/* ==========================================================================
   PUJAYANTRA 5.0 — TOP GRAND LAUNCH BANNER, AI KUNDALI, MY KARMA & JOURNEY
   ========================================================================== */

/* 1. TOP GRAND LAUNCH OFFER BANNER (BIGGER, RIGHT AFTER HEADER) */
.top-offer-banner-wrap {
  width: 100% !important;
  max-width: 1160px !important;
  margin: 16px auto 10px auto !important;
  padding: 0 16px !important;
  box-sizing: border-box !important;
}

.hero-top-offer-banner {
  width: 100% !important;
  background: linear-gradient(135deg, #4b1016 0%, #6e1821 50%, #3a0b10 100%) !important;
  border: 1.5px solid var(--gold, #d4af37) !important;
  border-radius: 18px !important;
  box-shadow: 0 12px 36px rgba(75, 16, 22, 0.45), inset 0 0 0 1px rgba(212, 175, 55, 0.45) !important;
  padding: 22px 28px !important;
  color: #fff9e6 !important;
  text-align: center !important;
  position: relative !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
}

.hero-top-offer-banner::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2.5px;
  background: linear-gradient(90deg, transparent, #ffd700, #ffb300, transparent);
}

.top-banner-inner {
  max-width: 900px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

.top-banner-header {
  margin-bottom: 2px;
}

.top-banner-badge, #offer-ready-eyebrow {
  display: inline-block;
  font-size: 13.5px !important;
  font-weight: 800 !important;
  color: #fce8a6 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  text-shadow: 0 1px 3px rgba(0,0,0,0.5);
}

.top-banner-title, #offer-ready-heading {
  font-size: clamp(20px, 3.2vw, 29px) !important;
  color: #fffdf5 !important;
  line-height: 1.25 !important;
  font-weight: 800 !important;
  margin: 2px 0 !important;
  font-family: var(--serif, 'Noto Serif Devanagari', serif) !important;
  text-shadow: 0 2px 10px rgba(0,0,0,0.6);
}

.top-banner-gift {
  display: inline-block;
  font-size: 26px;
  vertical-align: middle;
  margin-right: 6px;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.4));
}

.top-banner-sub, #offer-ready-subtitle {
  font-size: 13px !important;
  color: #fcedb6 !important;
  margin: 2px 0 8px 0 !important;
  line-height: 1.4 !important;
  opacity: 0.95;
}

.top-banner-coupon-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin: 4px 0 12px 0;
  width: 100%;
}

.top-banner-coupon-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(26, 5, 8, 0.75);
  border: 1.5px dashed #ffd700;
  border-radius: 24px;
  padding: 6px 16px;
  box-shadow: inset 0 1px 4px rgba(0,0,0,0.4);
}

.tb-coupon-icon { font-size: 15px; }
.tb-coupon-label { font-size: 13px; font-weight: 700; color: #ffd700; }
.tb-coupon-code {
  background: #ffd700;
  color: #3b0c10;
  font-weight: 900;
  font-size: 13.5px;
  padding: 3px 9px;
  border-radius: 6px;
  letter-spacing: 0.08em;
  box-shadow: 0 2px 4px rgba(0,0,0,0.3);
}
.tb-coupon-discount { font-size: 13px; font-weight: 700; color: #fff5d1; }

.top-banner-perks {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.top-perk-pill {
  font-size: 12px;
  font-weight: 600;
  color: #fff4d4;
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(212, 175, 55, 0.4);
  border-radius: 14px;
  padding: 4px 12px;
}

.top-banner-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin-top: 6px;
}

.button-gold-banner {
  background: linear-gradient(135deg, #ffd700 0%, #f3ba2f 100%) !important;
  color: #3b0c10 !important;
  font-weight: 800 !important;
  font-size: 15px !important;
  padding: 10px 24px !important;
  border-radius: 30px !important;
  text-decoration: none !important;
  box-shadow: 0 4px 14px rgba(243, 186, 47, 0.45) !important;
  transition: transform 0.2s, box-shadow 0.2s;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.button-gold-banner:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(243, 186, 47, 0.6) !important;
}

.button-outline-banner {
  background: rgba(75, 16, 22, 0.65) !important;
  color: #fffdf5 !important;
  font-weight: 600 !important;
  font-size: 14px !important;
  padding: 9px 20px !important;
  border: 1.5px solid var(--gold, #d4af37) !important;
  border-radius: 30px !important;
  text-decoration: none !important;
  transition: background 0.2s, color 0.2s;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.button-outline-banner:hover {
  background: rgba(212, 175, 55, 0.2) !important;
  color: #ffd700 !important;
}

/* 2. SECTION WRAPPERS & TITLES */
.kundali-section-wrap,
.karma-section-wrap,
.journey-section-wrap {
  margin: 36px auto;
  padding: 32px 20px;
  background: #fffdf8;
  border: 1px solid #ecd8b6;
  border-radius: 20px;
  box-shadow: 0 6px 24px rgba(90, 24, 32, 0.06);
  max-width: 1140px;
  box-sizing: border-box;
}

.sec-title-wrap {
  text-align: center;
  margin-bottom: 24px;
}

.sec-badge {
  display: inline-block;
  font-size: 12px;
  font-weight: 800;
  color: #9c5422;
  background: #fdf2dc;
  border: 1px solid #ebd0a0;
  border-radius: 16px;
  padding: 3px 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-bottom: 6px;
}

.sec-main-title {
  font-size: clamp(24px, 4vw, 34px);
  color: #4b1016;
  font-family: var(--serif, 'Noto Serif Devanagari', serif);
  font-weight: 800;
  margin: 4px 0 8px;
}

.sec-sub-title {
  color: #695245;
  font-size: 14.5px;
  max-width: 680px;
  margin: 0 auto;
  line-height: 1.5;
}

/* 3. KUNDALI FORM & CONTROLS */
.kundali-form-card {
  background: #fbf7ee;
  border: 1.5px solid #e8d4b3;
  border-radius: 16px;
  padding: 24px;
  margin-bottom: 28px;
}

.kundali-form-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 16px;
  margin-bottom: 16px;
}

.form-group-k {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.form-group-k label {
  font-size: 13.5px;
  font-weight: 700;
  color: #4b1016;
}

.form-group-k input,
.form-group-k select,
.form-group-k textarea {
  padding: 10px 14px;
  border: 1.5px solid #d8c29d;
  border-radius: 10px;
  font-size: 14px;
  background: #fff;
  color: #2c1810;
  font-family: inherit;
  box-sizing: border-box;
}

.form-group-k input:focus,
.form-group-k select:focus,
.form-group-k textarea:focus {
  outline: none;
  border-color: #d4af37;
  box-shadow: 0 0 0 3px rgba(212, 175, 55, 0.25);
}

.certainty-radios {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 4px;
}

.cert-label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 600;
  color: #5a3c28;
  cursor: pointer;
  background: #fff;
  border: 1px solid #dbc39e;
  border-radius: 8px;
  padding: 6px 12px;
}

.cert-label:has(input:checked) {
  border-color: #d4af37;
  background: #fdf5e2;
  color: #4b1016;
  font-weight: 700;
}

.btn-calc-kundali {
  width: 100%;
  max-width: 320px;
  margin: 16px auto 0;
  display: block;
  background: linear-gradient(135deg, #7b1d24 0%, #4b1016 100%);
  color: #ffd700;
  border: 1.5px solid #d4af37;
  border-radius: 30px;
  padding: 12px 24px;
  font-size: 16px;
  font-weight: 800;
  cursor: pointer;
  box-shadow: 0 4px 16px rgba(75, 16, 22, 0.35);
  transition: transform 0.2s, box-shadow 0.2s;
}

.btn-calc-kundali:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(75, 16, 22, 0.45);
}

/* 4. KUNDALI RESULTS DISPLAY */
.kundali-results-wrap {
  margin-top: 24px;
}

.kundali-meta-pill {
  display: inline-block;
  background: #fbf1d8;
  border: 1px solid #e2cb9c;
  color: #633614;
  font-size: 12.5px;
  font-weight: 700;
  padding: 6px 16px;
  border-radius: 20px;
  margin-bottom: 20px;
  text-align: center;
  width: 100%;
  box-sizing: border-box;
}

.kundali-summary-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 14px;
  margin-bottom: 24px;
}

.k-summary-card {
  background: #fff;
  border: 1.5px solid #eddabb;
  border-radius: 12px;
  padding: 14px 16px;
  text-align: center;
  box-shadow: 0 2px 8px rgba(0,0,0,0.03);
}

.ksc-label {
  font-size: 12px;
  color: #8b6b55;
  font-weight: 700;
  text-transform: uppercase;
}

.ksc-val {
  font-size: 17px;
  color: #4b1016;
  font-weight: 800;
  margin-top: 4px;
  font-family: var(--serif, 'Noto Serif Devanagari', serif);
}

/* 5. NORTH INDIAN CHART VISUALIZER */
.kundali-chart-view {
  background: #fcf8ee;
  border: 1.5px solid #e7d2af;
  border-radius: 16px;
  padding: 20px;
  margin-bottom: 28px;
  text-align: center;
}

.chart-tabs {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-bottom: 16px;
}

.chart-tab-btn {
  background: #fff;
  border: 1.5px solid #d8c29d;
  color: #694a34;
  font-size: 13.5px;
  font-weight: 700;
  padding: 7px 18px;
  border-radius: 20px;
  cursor: pointer;
  transition: all 0.2s;
}

.chart-tab-btn.active {
  background: #4b1016;
  color: #ffd700;
  border-color: #4b1016;
  box-shadow: 0 2px 8px rgba(75, 16, 22, 0.3);
}

.svg-kundali-holder {
  max-width: 380px;
  margin: 0 auto;
}

.vedic-kundali-svg {
  width: 100%;
  height: auto;
  display: block;
}

.chart-caption {
  font-size: 13px;
  color: #7b583f;
  font-weight: 600;
  margin-top: 10px;
}

/* 6. SENSITIVITY ALERT */
.sensitivity-box {
  background: #fff9ea;
  border: 1.5px solid #f0be52;
  border-radius: 12px;
  padding: 16px 20px;
  margin-bottom: 24px;
}

.sens-header {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 800;
  color: #8c5208;
  margin-bottom: 6px;
  font-size: 15px;
}

.sens-summary {
  font-size: 13.5px;
  color: #5c3b12;
  margin-bottom: 8px;
  line-height: 1.4;
}

.sens-list {
  margin: 0;
  padding-left: 20px;
  font-size: 13px;
  color: #4f3414;
  line-height: 1.5;
}

/* 7. 3-PART JYOTISH MODULE CARDS */
.jyotish-modules-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 20px;
  margin-bottom: 32px;
}

.jyotish-module-card {
  background: #fff;
  border: 1.5px solid #ebd9b8;
  border-radius: 16px;
  padding: 20px;
  box-shadow: 0 4px 14px rgba(75, 16, 22, 0.04);
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.jmc-header {
  display: flex;
  align-items: center;
  gap: 10px;
  border-bottom: 1px solid #f2e4cc;
  padding-bottom: 10px;
}

.jmc-icon { font-size: 24px; }
.jmc-title {
  margin: 0;
  font-size: 18px;
  color: #4b1016;
  font-family: var(--serif, 'Noto Serif Devanagari', serif);
  font-weight: 800;
}

.jmc-part {
  background: #faf6ed;
  border-radius: 10px;
  padding: 10px 14px;
}

.jmc-badge {
  display: inline-block;
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  border-radius: 6px;
  padding: 2px 8px;
  margin-bottom: 6px;
}

.jmc-badge-astro {
  background: #e8f3fc;
  color: #124d77;
  border: 1px solid #bcdbf3;
}

.jmc-badge-trad {
  background: #fbf1e4;
  color: #7b3e12;
  border: 1px solid #ecc9a4;
}

.jmc-badge-pract {
  background: #eaf6ed;
  color: #176530;
  border: 1px solid #bde6c7;
}

.jmc-text {
  margin: 0;
  font-size: 13.5px;
  color: #3b2820;
  line-height: 1.45;
}

/* 8. ASK AI JYOTISH PANEL */
.ask-ai-panel {
  background: linear-gradient(135deg, #4b1016 0%, #30080d 100%);
  border: 1.5px solid #d4af37;
  border-radius: 18px;
  padding: 24px;
  color: #fff9e6;
  margin-bottom: 28px;
}

.ask-ai-title {
  font-size: 20px;
  color: #ffd700;
  font-family: var(--serif, 'Noto Serif Devanagari', serif);
  margin: 0 0 6px 0;
  display: flex;
  align-items: center;
  gap: 8px;
}

.ask-ai-sub {
  font-size: 13px;
  color: #fce8a6;
  margin-bottom: 16px;
}

.quick-chips-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 16px;
}

.quick-q-chip {
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(212, 175, 55, 0.5);
  color: #fffdf5;
  font-size: 12.5px;
  padding: 5px 12px;
  border-radius: 20px;
  cursor: pointer;
  transition: background 0.2s;
}

.quick-q-chip:hover {
  background: rgba(212, 175, 55, 0.3);
}

.ask-input-row {
  display: flex;
  gap: 10px;
  margin-bottom: 16px;
}

.ask-input {
  flex: 1;
  padding: 11px 16px;
  border: 1px solid #d4af37;
  border-radius: 24px;
  background: rgba(255, 255, 255, 0.95);
  color: #2c1810;
  font-size: 14px;
}

.ask-input:focus {
  outline: none;
  box-shadow: 0 0 0 3px rgba(255, 215, 0, 0.4);
}

.btn-ask-submit {
  background: linear-gradient(135deg, #ffd700 0%, #e6b800 100%);
  color: #3b0c10;
  border: none;
  font-weight: 800;
  font-size: 14px;
  padding: 0 22px;
  border-radius: 24px;
  cursor: pointer;
}

.ask-answer-card {
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(212, 175, 55, 0.4);
  border-radius: 12px;
  padding: 16px;
}

.ans-citation {
  font-size: 12px;
  color: #ffd700;
  font-weight: 700;
  margin-bottom: 6px;
}

.ans-text {
  font-size: 14px;
  line-height: 1.5;
  color: #fff9e6;
  margin-bottom: 8px;
}

.ans-rec {
  font-size: 13.5px;
  color: #c9f5d3;
  line-height: 1.45;
  padding-top: 6px;
  border-top: 1px dashed rgba(255, 255, 255, 0.2);
}

.ans-uncert {
  font-size: 12px;
  color: #ffcc80;
  margin-top: 6px;
}

/* 9. MY KARMA PLANNER & CHECKLIST */
.karma-setup-card {
  background: #fbf7ee;
  border: 1.5px solid #e8d4b3;
  border-radius: 16px;
  padding: 22px;
  margin-bottom: 24px;
}

.karma-routine-preview {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 16px;
  margin-bottom: 24px;
}

.routine-block-card {
  background: #fff;
  border: 1.5px solid #ebd9b8;
  border-radius: 12px;
  padding: 16px;
}

.rb-title {
  font-size: 15px;
  color: #4b1016;
  font-weight: 800;
  margin: 0 0 8px 0;
  display: flex;
  align-items: center;
  gap: 6px;
}

.rb-list {
  margin: 0;
  padding-left: 18px;
  font-size: 13px;
  color: #453227;
  line-height: 1.5;
}

/* Checklist */
.karma-checklist-wrap {
  background: #fff;
  border: 1.5px solid #ecd8b6;
  border-radius: 16px;
  padding: 22px;
  margin-bottom: 24px;
}

.checklist-header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 16px;
}

.checklist-title {
  font-size: 18px;
  color: #4b1016;
  font-weight: 800;
  margin: 0;
}

.karma-progress-meter {
  display: flex;
  align-items: center;
  gap: 10px;
}

.progress-track {
  width: 140px;
  height: 10px;
  background: #f0e2cc;
  border-radius: 6px;
  overflow: hidden;
}

.progress-fill {
  height: 100%;
  background: linear-gradient(90deg, #d4af37, #27ae60);
  width: 0%;
  transition: width 0.3s;
}

.progress-pct {
  font-size: 14px;
  font-weight: 800;
  color: #27ae60;
}

.karma-task-list {
  list-style: none;
  padding: 0;
  margin: 0 0 16px 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.karma-task-item {
  background: #faf5ea;
  border: 1px solid #ebd8b6;
  border-radius: 10px;
  padding: 10px 14px;
  transition: all 0.2s;
}

.karma-task-item.completed {
  background: #eef8f1;
  border-color: #c2ebd0;
  opacity: 0.85;
}

.karma-task-item.completed .task-desc {
  text-decoration: line-through;
  color: #55775f;
}

.karma-task-label {
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  font-size: 14px;
  color: #3b2820;
}

.karma-task-check {
  width: 18px;
  height: 18px;
  accent-color: #27ae60;
  cursor: pointer;
}

.add-task-form {
  display: flex;
  gap: 10px;
}

.add-task-input {
  flex: 1;
  padding: 9px 14px;
  border: 1.5px solid #d8c29d;
  border-radius: 8px;
  font-size: 13.5px;
}

.btn-add-task {
  background: #4b1016;
  color: #ffd700;
  border: none;
  font-weight: 700;
  font-size: 13px;
  padding: 0 18px;
  border-radius: 8px;
  cursor: pointer;
}

/* 10. PERSONALIZED SADHANA & MEDITATION */
.sadhana-mantras-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 16px;
  margin-bottom: 24px;
}

.sadhana-mantra-card {
  background: #fff;
  border: 1.5px solid #eedec3;
  border-radius: 14px;
  padding: 18px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.03);
}

.smc-title {
  font-size: 15px;
  color: #4b1016;
  font-weight: 800;
  margin: 0 0 6px 0;
}

.smc-sanskrit {
  font-size: 14.5px;
  color: #7b1d24;
  font-weight: 700;
  margin-bottom: 6px;
  line-height: 1.5;
  font-family: var(--serif, 'Noto Serif Devanagari', serif);
}

.smc-translit {
  font-size: 12.5px;
  color: #695245;
  font-style: italic;
  margin-bottom: 8px;
}

.smc-meaning {
  font-size: 12.5px;
  color: #453227;
  line-height: 1.4;
  margin-bottom: 12px;
}

.btn-play-mantra-chime {
  background: #fdf5e2;
  border: 1px solid #d4af37;
  color: #7b1d24;
  font-size: 12px;
  font-weight: 700;
  padding: 5px 12px;
  border-radius: 16px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

/* Meditation Timer */
.meditation-card {
  background: #fbf7ee;
  border: 1.5px solid #ebd8b6;
  border-radius: 16px;
  padding: 22px;
  text-align: center;
  margin-bottom: 24px;
}

.meditation-timer-digit {
  font-size: 44px;
  font-weight: 900;
  color: #4b1016;
  font-family: monospace;
  margin: 10px 0 16px 0;
  letter-spacing: 0.05em;
}

.timer-controls {
  display: flex;
  justify-content: center;
  gap: 12px;
}

.btn-timer-act {
  padding: 8px 20px;
  border-radius: 24px;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  border: none;
}

.btn-timer-start { background: #27ae60; color: #fff; }
.btn-timer-pause { background: #f39c12; color: #fff; }
.btn-timer-reset { background: #95a5a6; color: #fff; }

/* 11. PERSONAL JOURNEY DASHBOARD */
.journey-dashboard-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 16px;
  margin-bottom: 24px;
}

.journey-stat-card {
  background: #fff;
  border: 1.5px solid #eddabb;
  border-radius: 14px;
  padding: 18px;
  text-align: center;
}

.jsc-icon { font-size: 28px; margin-bottom: 4px; }
.jsc-val {
  font-size: 24px;
  font-weight: 900;
  color: #4b1016;
}
.jsc-label {
  font-size: 12.5px;
  color: #7b583f;
  font-weight: 700;
}

.journey-data-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 16px;
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid #ebd8b6;
}

.btn-journey-export {
  background: #fff;
  border: 1.5px solid #d4af37;
  color: #7b1d24;
  font-weight: 700;
  font-size: 14px;
  padding: 9px 20px;
  border-radius: 20px;
  cursor: pointer;
}

.btn-journey-delete {
  background: #fff;
  border: 1.5px solid #e74c3c;
  color: #c0392b;
  font-weight: 700;
  font-size: 14px;
  padding: 9px 20px;
  border-radius: 20px;
  cursor: pointer;
}

/* 12. RESPONSIVE BREAKPOINTS (0px OVERFLOW ASSURED) */
@media (max-width: 768px) {
  .kundali-section-wrap,
  .karma-section-wrap,
  .journey-section-wrap {
    padding: 20px 14px;
    margin: 20px 0;
    border-radius: 14px;
  }
  .jyotish-modules-grid {
    grid-template-columns: 1fr;
  }
  .top-offer-banner-wrap {
    padding: 0 10px !important;
    margin: 10px auto 6px auto !important;
  }
  .hero-top-offer-banner {
    padding: 16px 14px !important;
  }
  .top-banner-title, #offer-ready-heading {
    font-size: 18px !important;
  }
  .top-banner-sub, #offer-ready-subtitle {
    font-size: 11.5px !important;
  }
  .ask-input-row {
    flex-direction: column;
  }
}

@media (max-width: 400px) {
  .top-banner-coupon-pill {
    padding: 4px 10px;
  }
  .tb-coupon-code {
    font-size: 11.5px;
    padding: 2px 6px;
  }
  .top-perk-pill {
    font-size: 10px;
    padding: 2px 7px;
  }
  .button-gold-banner {
    font-size: 13px !important;
    padding: 8px 18px !important;
  }
  .button-outline-banner {
    font-size: 12px !important;
    padding: 7px 15px !important;
  }
}

/* ==========================================================================
   PUJAYANTRA — INSTAGRAM MARKETING AUTOMATION 2.0 STYLES
   ========================================================================== */

.admin-ig-hero-card {
  background: linear-gradient(135deg, #4d0a12 0%, #68121a 60%, #3a060b 100%);
  border: 2px solid #d4af37;
  border-radius: 16px;
  padding: 24px;
  color: #fff;
  margin-bottom: 24px;
  box-shadow: 0 10px 30px rgba(58, 6, 11, 0.35);
  box-sizing: border-box;
}

.admin-ig-hero-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 16px;
}

.admin-ig-badge-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}

.ig-target-pill {
  background: rgba(255, 255, 255, 0.15);
  border: 1px solid #d4af37;
  padding: 4px 10px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 700;
}

.ig-status-pill {
  font-size: 12px;
  font-weight: 800;
  padding: 4px 12px;
  border-radius: 20px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.status-not-connected {
  background: #fef2f2;
  color: #b91c1c;
  border: 1px solid #f87171;
}

.status-auth-required {
  background: #fffbeb;
  color: #b45309;
  border: 1px solid #fcd34d;
}

.status-connected {
  background: #eff6ff;
  color: #1d4ed8;
  border: 1px solid #93c5fd;
}

.status-test-published {
  background: #faf5ff;
  color: #7e22ce;
  border: 1px solid #d8b4fe;
}

.status-auto-enabled {
  background: #f0fdf4;
  color: #15803d;
  border: 1px solid #86efac;
}

.ig-scheduler-pill {
  background: rgba(30, 58, 138, 0.4);
  border: 1px solid #60a5fa;
  color: #bfdbfe;
  padding: 4px 10px;
  border-radius: 20px;
  font-size: 11.5px;
  font-weight: 700;
}

.admin-ig-master-controls {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}

.ig-control-box {
  background: rgba(0, 0, 0, 0.25);
  border: 1px solid rgba(212, 175, 55, 0.4);
  padding: 10px 14px;
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  min-width: 130px;
}

.ig-control-label {
  font-size: 12px;
  font-weight: 700;
  color: #fde68a;
}

/* Sleek Toggle Switch */
.ig-switch {
  position: relative;
  display: inline-block;
  width: 50px;
  height: 26px;
}

.ig-switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.ig-slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #64748b;
  transition: .3s;
}

.ig-slider:before {
  position: absolute;
  content: "";
  height: 18px;
  width: 18px;
  left: 4px;
  bottom: 4px;
  background-color: white;
  transition: .3s;
}

.ig-switch input:checked + .ig-slider {
  background-color: #16a34a;
}

.ig-switch input:focus + .ig-slider {
  box-shadow: 0 0 1px #16a34a;
}

.ig-switch input:checked + .ig-slider:before {
  transform: translateX(24px);
}

.ig-switch input:disabled + .ig-slider {
  background-color: #475569;
  cursor: not-allowed;
  opacity: 0.6;
}

.ig-slider.round {
  border-radius: 34px;
}

.ig-slider.round:before {
  border-radius: 50%;
}

.ig-scheduler-notice {
  margin-top: 16px;
  padding: 10px 14px;
  background: rgba(0, 0, 0, 0.3);
  border-left: 3px solid #ffd700;
  border-radius: 6px;
  font-size: 12.5px;
  display: flex;
  align-items: center;
  gap: 8px;
  color: #fef08a;
}

/* Sub-Navigation */
.admin-ig-subnav {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 20px;
  border-bottom: 2px solid #e8d7b5;
  padding-bottom: 12px;
}

.ig-subnav-btn {
  background: #fdfaf4;
  border: 1.5px solid #d4af37;
  color: #5c181f;
  padding: 8px 16px;
  border-radius: 20px;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s ease;
}

.ig-subnav-btn:hover {
  background: #fcf4e0;
}

.ig-subnav-btn.active {
  background: #5c181f;
  color: #ffd700;
  border-color: #5c181f;
  box-shadow: 0 4px 12px rgba(92, 24, 31, 0.25);
}

/* 2-Column Grid */
.ig-grid-2col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  align-items: start;
}

@media (max-width: 900px) {
  .ig-grid-2col {
    grid-template-columns: 1fr;
  }
}

.ig-form-group {
  margin-bottom: 14px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.ig-form-row {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.ig-details-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  background: #fdfaf5;
  border: 1px solid #e8d7b5;
  border-radius: 10px;
  padding: 16px;
}

.ig-detail-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 13px;
  border-bottom: 1px dashed #e2cb9c;
  padding-bottom: 8px;
}

.ig-detail-item:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.detail-label {
  color: #6e5847;
  font-weight: 600;
}

.detail-val {
  color: #4b1016;
  font-weight: 700;
}

/* Phone Mockup Frame */
.ig-phone-frame {
  width: 320px;
  background: #ffffff;
  border: 10px solid #1a1a1a;
  border-radius: 36px;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.25);
  overflow: hidden;
  box-sizing: border-box;
}

.ig-mock-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 12px;
  border-bottom: 1px solid #f1f1f1;
}

.ig-mock-profile {
  display: flex;
  align-items: center;
  gap: 8px;
}

.ig-mock-avatar {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  object-fit: cover;
  border: 1.5px solid #d4af37;
}

.ig-mock-username {
  font-size: 12.5px;
  display: block;
  line-height: 1.2;
}

.ig-mock-sub {
  font-size: 10px;
  color: #64748b;
  display: block;
}

.ig-mock-media {
  width: 100%;
  height: 300px;
  background: #000;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.ig-mock-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.ig-mock-actions {
  display: flex;
  justify-content: space-between;
  padding: 8px 12px;
  font-size: 18px;
}

.actions-left {
  display: flex;
  gap: 12px;
}

.ig-mock-caption-wrap {
  padding: 0 12px 14px;
  font-size: 11.5px;
  line-height: 1.4;
}

.ig-mock-caption {
  margin: 4px 0;
  color: #334155;
  white-space: pre-line;
  max-height: 80px;
  overflow-y: auto;
}

.ig-mock-hashtags {
  color: #1d4ed8;
  font-size: 11px;
}

/* 30-Day Calendar Grid */
.ig-calendar-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: 12px;
}

.ig-cal-card {
  background: #fff;
  border: 1.5px solid #e8d7b5;
  border-radius: 12px;
  padding: 12px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  box-shadow: 0 2px 6px rgba(0,0,0,0.03);
}

.ig-cal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}

.ig-cal-day {
  font-weight: 800;
  font-size: 12px;
  color: #5c181f;
}

.ig-type-badge {
  font-size: 10px;
  font-weight: 800;
  padding: 2px 8px;
  border-radius: 12px;
  text-transform: uppercase;
}

.type-reels { background: #fdf2f8; color: #be185d; border: 1px solid #fbcfe8; }
.type-feed { background: #eff6ff; color: #1d4ed8; border: 1px solid #bfdbfe; }
.type-carousel { background: #fefce8; color: #a16207; border: 1px solid #fef08a; }

.ig-cal-media {
  width: 100%;
  height: 120px;
  border-radius: 8px;
  overflow: hidden;
  margin-bottom: 8px;
  background: #111;
}

.ig-cal-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.ig-cal-title {
  font-size: 12.5px;
  font-weight: 700;
  color: #3a060b;
  margin: 0 0 4px 0;
  line-height: 1.3;
}

.ig-cal-time {
  font-size: 11px;
  color: #6e5847;
  margin: 0 0 8px 0;
}

.ig-cal-actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 8px;
  border-top: 1px solid #f3ebd8;
}

.ig-cal-status {
  font-size: 10px;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: 4px;
}

.status-approved { background: #dcfce7; color: #15803d; }
.status-scheduled { background: #dbeafe; color: #1d4ed8; }
.status-draft { background: #f1f5f9; color: #64748b; }

.ig-cal-btn {
  background: #fdfaf4;
  border: 1px solid #d4af37;
  color: #5c181f;
  font-size: 11px;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 6px;
  cursor: pointer;
}

/* Media Library Grid */
.ig-media-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 14px;
}

.ig-media-card {
  background: #fff;
  border: 1.5px solid #ebd8b6;
  border-radius: 12px;
  padding: 12px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
}

.ig-media-thumb {
  width: 140px;
  height: 140px;
  border-radius: 8px;
  overflow: hidden;
  margin-bottom: 8px;
  background: #111;
  display: flex;
  align-items: center;
  justify-content: center;
}

.ig-media-thumb.circular {
  border-radius: 50%;
  width: 110px;
  height: 110px;
}

.ig-media-thumb.reel-thumb {
  width: 110px;
  height: 195px;
}

.ig-media-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.ig-media-title {
  font-size: 12px;
  font-weight: 700;
  color: #4b1016;
  margin-bottom: 8px;
  line-height: 1.25;
}

.ig-download-btn {
  font-size: 11.5px;
  font-weight: 700;
  color: #1d4ed8;
  text-decoration: underline;
  padding: 4px 8px;
}