/* ═══════════════════════════════════════════════════
   COMPONENTS.CSS — Per-section styles
   Each block matches a section JS file.
   ═══════════════════════════════════════════════════ */

/* ══════════════ NAV ══════════════ */
nav {
  position:fixed; top:0; left:0; right:0; z-index:1000;
  padding:0 2rem; height:68px;
  display:flex; align-items:center; justify-content:space-between;
  background:rgba(13,8,4,.96); backdrop-filter:blur(14px);
  border-bottom:1px solid rgba(212,160,23,.18); transition:all .3s;
}
nav.s { box-shadow:0 4px 24px rgba(255,107,26,.12); border-bottom-color:rgba(212,160,23,.35); }
.nlogo { display:flex; align-items:center; gap:.7rem; text-decoration:none; }
.nlogo .om { font-size:1.9rem; color:var(--s); animation:op 3s ease-in-out infinite; text-shadow:0 0 18px var(--s); }
.nlt { font-family:'Cinzel',serif; font-size:.82rem; font-weight:700; color:var(--g); line-height:1.2; letter-spacing:.04em; }
.nl  { display:flex; align-items:center; gap:.2rem; list-style:none; }
.nl a {
  font-family:'Cinzel',serif; font-size:.7rem; letter-spacing:.11em;
  text-transform:uppercase; color:var(--tm); text-decoration:none;
  padding:.45rem .8rem; border-radius:4px; transition:all .3s; position:relative;
}
.nl a:hover { color:var(--bri); }
.nl a.active { color:var(--s); }
.ndon {
  background:linear-gradient(135deg,var(--s),var(--ds)) !important;
  color:#fff !important; border-radius:4px !important;
  font-weight:700 !important; box-shadow:0 0 14px rgba(255,107,26,.4);
}
.ndon:hover { box-shadow:0 0 28px rgba(255,107,26,.7) !important; transform:translateY(-1px); }
.hbg { display:none; flex-direction:column; gap:5px; cursor:pointer; padding:5px; }
.hbg span { display:block; width:24px; height:2px; background:var(--g); transition:all .3s; }

/* ══════════════ TICKER ══════════════ */
.tk {
  background:linear-gradient(90deg,var(--dm),rgba(26,10,0,.95));
  border-top:1px solid rgba(212,160,23,.12);
  border-bottom:1px solid rgba(212,160,23,.12);
  padding:.65rem 0; overflow:hidden; position:relative; z-index:1;
}
.tkc { display:flex; gap:4rem; animation:tick 35s linear infinite; white-space:nowrap; }
.tki { font-family:'Cinzel',serif; font-size:.78rem; letter-spacing:.09em; color:var(--tm); display:flex; align-items:center; gap:.5rem; }
.tki .d { color:var(--s); }

/* ══════════════ HERO ══════════════ */
#hero {
  position:relative; min-height:100vh;
  display:flex; align-items:center; justify-content:center;
  text-align:center; overflow:hidden; padding:70px 2rem 2rem;
}
.hbg2 {
  position:absolute; inset:0;
  background:
    radial-gradient(ellipse 80% 60% at 50% 30%,rgba(255,107,26,.11) 0%,transparent 60%),
    radial-gradient(ellipse 50% 40% at 20% 80%,rgba(212,160,23,.07) 0%,transparent 50%),
    linear-gradient(180deg,#0D0804 0%,#120906 50%,#0D0804 100%);
}
.mr {
  position:absolute; border-radius:50%; border:1px solid;
  animation:rm linear infinite; top:50%; left:50%; opacity:.12;
}
.mr:nth-child(1) { width:620px; height:620px; border-color:var(--g); animation-duration:45s; transform:translate(-50%,-50%); }
.mr:nth-child(2) { width:460px; height:460px; border-color:var(--s); animation-duration:32s; animation-direction:reverse; transform:translate(-50%,-50%); }
.mr:nth-child(3) { width:300px; height:300px; border-color:var(--bri); animation-duration:22s; transform:translate(-50%,-50%); }
.hcont { position:relative; z-index:2; max-width:920px; }
.lbdg {
  display:inline-flex; align-items:center; gap:.5rem;
  padding:.35rem 1rem;
  background:rgba(255,107,26,.1); border:1px solid rgba(255,107,26,.3);
  border-radius:20px; font-family:'Cinzel',serif; font-size:.68rem;
  letter-spacing:.2em; color:var(--s); margin-bottom:1.5rem;
}
.ld { width:7px; height:7px; background:var(--s); border-radius:50%; animation:lp 1.5s ease-in-out infinite; }
.hom {
  font-size:4.5rem; color:var(--s);
  text-shadow:0 0 38px var(--s),0 0 76px rgba(255,107,26,.5);
  animation:op 3s ease-in-out infinite; display:block; margin-bottom:1.2rem; line-height:1;
}
.hdv {
  font-family:'Noto Serif Devanagari',serif;
  font-size:clamp(1.1rem,2.5vw,1.7rem); color:var(--bri);
  letter-spacing:.1em; margin-bottom:.9rem;
  opacity:0; animation:fsu 1s ease .3s forwards;
}
.ht {
  font-family:'Cinzel Decorative',serif;
  font-size:clamp(1.9rem,5vw,3.8rem); font-weight:900; line-height:1.1;
  background:linear-gradient(135deg,var(--bri) 0%,var(--s) 40%,var(--g) 100%);
  -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;
  margin-bottom:.5rem; opacity:0; animation:fsu 1s ease .5s forwards;
  filter:drop-shadow(0 0 18px rgba(212,160,23,.38));
}
.hst {
  font-family:'Cinzel',serif; font-size:clamp(.85rem,2vw,1.15rem);
  color:var(--tm); letter-spacing:.3em; text-transform:uppercase;
  margin-bottom:1.8rem; opacity:0; animation:fsu 1s ease .7s forwards;
}
.hm {
  font-family:'Noto Serif Devanagari',serif;
  font-size:clamp(.82rem,1.4vw,1rem); color:var(--tm); font-style:italic;
  margin-bottom:2.2rem; opacity:0; animation:fsu 1s ease .9s forwards;
  padding:.9rem 1.8rem; border-left:2px solid var(--s); border-right:2px solid var(--s);
  display:inline-block;
}
.hctas {
  display:flex; gap:1rem; justify-content:center; flex-wrap:wrap;
  opacity:0; animation:fsu 1s ease 1.1s forwards;
}
.sci {
  position:absolute; bottom:1.8rem; left:50%; transform:translateX(-50%);
  display:flex; flex-direction:column; align-items:center; gap:.4rem;
  opacity:0; animation:fi 1s ease 1.5s forwards;
}
.sci span { font-family:'Cinzel',serif; font-size:.62rem; letter-spacing:.18em; color:var(--tm); }
.scl { width:1px; height:48px; background:linear-gradient(180deg,var(--s),transparent); animation:sb 2s ease-in-out infinite; }

/* ══════════════ TIMINGS ══════════════ */
#timings { background:linear-gradient(180deg,var(--dk) 0%,var(--wm) 50%,var(--dk) 100%); }
.tg { display:grid; grid-template-columns:repeat(auto-fit,minmax(270px,1fr)); gap:1.4rem; max-width:1200px; margin:0 auto; }
.tc {
  background:linear-gradient(135deg,rgba(255,107,26,.04),rgba(212,160,23,.02));
  border:1px solid rgba(212,160,23,.18); border-radius:12px;
  padding:1.8rem; text-align:center; transition:all .4s;
  position:relative; overflow:hidden;
}
.tc::before {
  content:''; position:absolute; top:0; left:0; right:0; height:3px;
  background:linear-gradient(90deg,var(--s),var(--g));
  transform:scaleX(0); transition:transform .4s;
}
.tc:hover { border-color:rgba(212,160,23,.45); transform:translateY(-4px); box-shadow:0 8px 28px rgba(255,107,26,.09); }
.tc:hover::before { transform:scaleX(1); }
.tic { font-size:2.3rem; margin-bottom:.9rem; display:block; }
.tn  { font-family:'Cinzel',serif; font-size:.95rem; font-weight:700; color:var(--g); margin-bottom:.2rem; }
.tdv { font-family:'Noto Serif Devanagari',serif; font-size:.82rem; color:var(--tm); margin-bottom:.9rem; }
.tt  { font-family:'Cinzel',serif; font-size:1.35rem; font-weight:700; color:var(--s); margin-bottom:.45rem; }
.tdesc { font-size:.82rem; color:var(--tm); line-height:1.6; }

/* ══════════════ FESTIVALS ══════════════ */
#festivals { background:var(--dk); }
.fg { display:grid; grid-template-columns:repeat(auto-fit,minmax(290px,1fr)); gap:1.4rem; max-width:1200px; margin:0 auto; }
.fc {
  background:linear-gradient(135deg,rgba(26,10,0,.8),rgba(18,9,6,.9));
  border:1px solid rgba(212,160,23,.13); border-radius:14px;
  padding:1.9rem; position:relative; overflow:hidden; transition:all .4s;
}
.fc:hover { border-color:rgba(255,107,26,.38); transform:translateY(-4px); box-shadow:0 12px 38px rgba(255,107,26,.13); }
.fm { font-family:'Cinzel',serif; font-size:.63rem; letter-spacing:.28em; text-transform:uppercase; color:var(--s); margin-bottom:.45rem; }
.fn { font-family:'Cinzel Decorative',serif; font-size:1.15rem; color:var(--g); margin-bottom:.22rem; }
.fh { font-family:'Noto Serif Devanagari',serif; font-size:.88rem; color:var(--tm); margin-bottom:.9rem; }
.fdesc { font-size:.83rem; color:var(--tm); line-height:1.7; }
.fbdg { display:inline-block; padding:.22rem .7rem; border-radius:18px; font-size:.68rem; font-family:'Cinzel',serif; letter-spacing:.09em; margin-top:.9rem; }
.bu { background:rgba(255,107,26,.18); color:var(--s); border:1px solid rgba(255,107,26,.28); }
.bm { background:rgba(212,160,23,.18); color:var(--g); border:1px solid rgba(212,160,23,.28); }

/* ══════════════ ABOUT ══════════════ */
#about { background:linear-gradient(180deg,var(--dk),var(--wm)); }
.ag { display:grid; grid-template-columns:1fr 1fr; gap:4.5rem; max-width:1100px; margin:0 auto; align-items:center; }
.avis { position:relative; display:flex; align-items:center; justify-content:center; }
.am  { width:320px; height:320px; position:relative; }
.amsvg { width:100%; height:100%; animation:rs 30s linear infinite; opacity:.38; }
.amc {
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  font-size:4.8rem; color:var(--s);
  text-shadow:0 0 38px var(--s),0 0 76px rgba(255,107,26,.5);
  animation:op 3s ease-in-out infinite;
}
.atxt h2 { font-family:'Cinzel Decorative',serif; font-size:1.75rem; color:var(--g); margin-bottom:1.4rem; line-height:1.3; }
.atxt p  { font-size:.93rem; color:var(--tm); line-height:1.9; margin-bottom:1.1rem; }
.af  { display:grid; grid-template-columns:1fr 1fr; gap:.9rem; margin-top:1.8rem; }
.afi { padding:.9rem; border:1px solid rgba(212,160,23,.14); border-radius:8px; background:rgba(255,107,26,.03); }
.afn { font-family:'Cinzel Decorative',serif; font-size:1.7rem; color:var(--s); font-weight:700; }
.afl { font-size:.72rem; color:var(--tm); font-family:'Cinzel',serif; letter-spacing:.09em; }

/* ══════════════ SERVICES ══════════════ */
#services { background:linear-gradient(180deg,var(--wm),var(--dk)); }
.svg2 { display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:1.4rem; max-width:1200px; margin:0 auto; }
.svc {
  background:linear-gradient(135deg,rgba(26,10,0,.6),rgba(18,9,6,.8));
  border:1px solid rgba(212,160,23,.13); border-radius:14px;
  padding:2.3rem 1.8rem; text-align:center; transition:all .4s;
  position:relative; overflow:hidden;
}
.svc::before {
  content:''; position:absolute; bottom:0; left:0; right:0; height:2px;
  background:linear-gradient(90deg,transparent,var(--s),var(--g),transparent);
  transform:scaleX(0); transition:transform .4s;
}
.svc:hover { border-color:rgba(255,107,26,.28); transform:translateY(-5px); box-shadow:0 14px 38px rgba(255,107,26,.11); }
.svc:hover::before { transform:scaleX(1); }
.svi { font-size:2.8rem; display:block; margin-bottom:1.1rem; }
.svn { font-family:'Cinzel',serif; font-size:.95rem; font-weight:700; color:var(--g); margin-bottom:.7rem; }
.svd { font-size:.83rem; color:var(--tm); line-height:1.7; margin-bottom:1.4rem; }
.svp { font-family:'Cinzel',serif; font-size:1.1rem; color:var(--bri); font-weight:700; margin-bottom:1rem; }
.svb {
  font-family:'Cinzel',serif; font-size:.68rem; letter-spacing:.14em;
  text-transform:uppercase; color:var(--s); text-decoration:none;
  border-bottom:1px solid rgba(255,107,26,.28); padding-bottom:2px;
  cursor:pointer; background:none; border-left:none; border-right:none; border-top:none;
  transition:all .3s;
}
.svb:hover { border-color:var(--s); letter-spacing:.18em; }

/* ══════════════ GALLERY ══════════════ */
#gallery { background:var(--dk); }

/* Preview strip on public page */
.gallery-preview-strip {
  display:grid; grid-template-columns:repeat(5,1fr);
  gap:.7rem; max-width:1100px; margin:0 auto;
}
.gi-preview {
  border-radius:10px; overflow:hidden; position:relative;
  height:200px; background:rgba(255,107,26,.04);
  border:1px solid rgba(212,160,23,.13);
  display:flex; align-items:center; justify-content:center;
  cursor:pointer; transition:all .35s;
}
.gi-preview:hover { border-color:var(--g); transform:translateY(-3px); box-shadow:0 8px 28px rgba(212,160,23,.15); }
.gi-preview--open {
  background:linear-gradient(135deg,rgba(255,107,26,.1),rgba(212,160,23,.06));
  border:1px dashed rgba(212,160,23,.35); flex-direction:column;
}
.gi-preview--open:hover { background:linear-gradient(135deg,rgba(255,107,26,.18),rgba(212,160,23,.1)); }
.gov {
  position:absolute; inset:0;
  background:linear-gradient(180deg,transparent 50%,rgba(0,0,0,.7));
  opacity:1; transition:opacity .3s;
  display:flex; align-items:flex-end; justify-content:flex-start;
  padding:.6rem;
}
.gi-preview:hover .gov { opacity:1; }
.gphold { text-align:center; padding:1.5rem; }
.gphold .ico { font-size:2.3rem; display:block; margin-bottom:.4rem; }
.gphold p { font-family:'Cinzel',serif; font-size:.72rem; color:var(--tm); letter-spacing:.09em; }

/* Light mode gallery */
[data-mode="light"] .gi-preview {
  background:rgba(255,200,100,.06);
  border-color:rgba(180,120,40,.15);
}

/* ══════════════ DONATION ══════════════ */
#donation { background:linear-gradient(135deg,var(--dk),var(--wm),var(--dk)); overflow:hidden; }
#donation::before {
  content:''; position:absolute; inset:0;
  background:radial-gradient(ellipse 80% 60% at 50% 50%,rgba(255,107,26,.055) 0%,transparent 70%);
  pointer-events:none;
}
.dcont { max-width:820px; margin:0 auto; position:relative; z-index:1; }
.dbox {
  background:linear-gradient(135deg,rgba(26,10,0,.92),rgba(18,9,6,.97));
  border:1px solid rgba(212,160,23,.28); border-radius:20px;
  padding:3.2rem; text-align:center; box-shadow:0 0 58px rgba(255,107,26,.09);
}
.dq { font-family:'Noto Serif Devanagari',serif; font-size:1.05rem; color:var(--g); margin-bottom:1.5rem; }
.dal { display:flex; gap:.9rem; justify-content:center; flex-wrap:wrap; margin:1.6rem 0; }
.dab {
  font-family:'Cinzel',serif; font-size:.95rem; font-weight:700;
  padding:.7rem 1.4rem; background:transparent;
  border:1px solid rgba(212,160,23,.28); color:var(--g);
  border-radius:8px; cursor:pointer; transition:all .3s;
}
.dab:hover, .dab.act {
  background:linear-gradient(135deg,var(--s),var(--ds));
  border-color:var(--s); color:#fff; box-shadow:0 0 18px rgba(255,107,26,.38);
}
.dca { font-family:'Cinzel',serif; font-size:.72rem; letter-spacing:.18em; color:var(--tm); margin-bottom:.9rem; text-transform:uppercase; display:block; }
.dpu { display:grid; grid-template-columns:repeat(auto-fit,minmax(130px,1fr)); gap:.9rem; margin:1.3rem 0; }
.dpi { padding:.9rem; border:1px solid rgba(212,160,23,.14); border-radius:10px; cursor:pointer; transition:all .3s; text-align:center; }
.dpi:hover, .dpi.act { border-color:rgba(255,107,26,.38); background:rgba(255,107,26,.05); }
.dpic { font-size:1.4rem; display:block; margin-bottom:.4rem; }
.dpl { font-size:.72rem; color:var(--tm); font-family:'Cinzel',serif; }
.ups { margin-top:1.8rem; padding:1.4rem; border:1px dashed rgba(212,160,23,.28); border-radius:14px; }
.upi-label { font-family:'Cinzel',serif; font-size:.72rem; letter-spacing:.18em; color:var(--s); margin-bottom:.7rem; display:block; }
.upi-id-display {
  font-family:'Cinzel',serif; font-size:1.15rem; color:var(--g);
  letter-spacing:.09em; background:rgba(26,10,0,.5);
  padding:.6rem 1.2rem; border-radius:8px; display:inline-block;
  margin-bottom:.9rem; cursor:pointer;
  border:1px solid rgba(212,160,23,.18); transition:all .3s;
}
.upi-id-display:hover { border-color:var(--g); }
.qr-container {
  width:160px; height:160px; margin:0 auto 1rem; background:#fff;
  border-radius:12px; display:flex; align-items:center; justify-content:center;
  border:3px solid var(--g); position:relative; overflow:hidden;
}
.qr-inner { text-align:center; padding:.5rem; }
.qr-pattern { font-size:5rem; line-height:1; }
.qr-inner p { font-size:.6rem; color:#333; margin-top:.3rem; font-family:monospace; }
.pay-steps { text-align:left; margin:1rem 0; font-size:.82rem; color:var(--tm); line-height:2; }
.pay-steps span { color:var(--s); font-weight:700; font-family:'Cinzel',serif; }

/* ══════════════ CONTACT ══════════════ */
#contact { background:var(--wm); }
.cg { display:grid; grid-template-columns:1fr 1fr; gap:3.8rem; max-width:1100px; margin:0 auto; }
.ci h3 { font-family:'Cinzel',serif; font-size:1.25rem; color:var(--g); margin-bottom:1.8rem; }
.cit { display:flex; align-items:flex-start; gap:.9rem; margin-bottom:1.4rem; }
.cii {
  font-size:1.4rem; width:48px; height:48px;
  display:flex; align-items:center; justify-content:center;
  background:rgba(255,107,26,.09); border:1px solid rgba(255,107,26,.18);
  border-radius:50%; flex-shrink:0;
}
.citl { flex:1; }
.citlb { font-family:'Cinzel',serif; font-size:.68rem; letter-spacing:.18em; color:var(--s); text-transform:uppercase; margin-bottom:.2rem; }
.citlv { font-size:.88rem; color:var(--tl); line-height:1.6; }
.cf  { display:flex; flex-direction:column; gap:1.1rem; }
.fgp { display:flex; flex-direction:column; gap:.45rem; }
.fgp label { font-family:'Cinzel',serif; font-size:.68rem; letter-spacing:.18em; color:var(--tm); text-transform:uppercase; }
.fgp input, .fgp textarea, .fgp select {
  background:rgba(26,10,0,.55); border:1px solid rgba(212,160,23,.18);
  border-radius:8px; padding:.82rem 1rem; color:var(--tl);
  font-size:.9rem; font-family:'Lato',sans-serif;
  transition:border-color .3s; outline:none;
}
.fgp input:focus, .fgp textarea:focus, .fgp select:focus {
  border-color:var(--s); box-shadow:0 0 12px rgba(255,107,26,.09);
}
.fgp textarea { height:125px; resize:vertical; }
.fgp select option { background:#1A0A00; }
.frw { display:grid; grid-template-columns:1fr 1fr; gap:1rem; }

/* ══════════════ FOOTER ══════════════ */
footer {
  background:linear-gradient(180deg,var(--dm),#080402);
  border-top:1px solid rgba(212,160,23,.18);
  padding:4rem 2rem 2rem; position:relative; z-index:1;
}
.fogg { display:grid; grid-template-columns:2fr 1fr 1fr 1fr; gap:2.8rem; max-width:1200px; margin:0 auto 2.8rem; }
.fbr .om3 { font-size:2.8rem; color:var(--s); text-shadow:0 0 18px var(--s); display:block; margin-bottom:.7rem; }
.fbn { font-family:'Cinzel Decorative',serif; font-size:.95rem; color:var(--g); margin-bottom:.4rem; }
.fbs { font-family:'Cinzel',serif; font-size:.72rem; color:var(--s); letter-spacing:.14em; margin-bottom:.9rem; }
.fbr p { font-size:.8rem; color:var(--tm); line-height:1.7; }
.fsc { display:flex; gap:.7rem; margin-top:1.4rem; }
.fsb {
  width:38px; height:38px; border-radius:50%;
  background:rgba(255,107,26,.09); border:1px solid rgba(255,107,26,.2);
  display:flex; align-items:center; justify-content:center;
  text-decoration:none; color:var(--s); transition:all .3s;
}
.fsb svg { width:15px; height:15px; flex-shrink:0; }
.fsb:hover {
  background:var(--s); border-color:var(--s); color:#fff;
  transform:translateY(-3px); box-shadow:0 6px 18px rgba(255,107,26,.35);
}
.fc2 h4 {
  font-family:'Cinzel',serif; font-size:.82rem; font-weight:700;
  color:var(--g); letter-spacing:.09em; margin-bottom:1.3rem;
  padding-bottom:.7rem; border-bottom:1px solid rgba(212,160,23,.18);
}
.fc2 ul { list-style:none; }
.fc2 ul li { margin-bottom:.7rem; }
.fc2 ul li a { font-size:.8rem; color:var(--tm); text-decoration:none; transition:color .3s; }
.fc2 ul li a:hover { color:var(--s); }
.fbot { text-align:center; padding-top:1.8rem; border-top:1px solid rgba(212,160,23,.09); max-width:1200px; margin:0 auto; }
.fbot p { font-size:.76rem; color:rgba(200,168,130,.45); font-family:'Cinzel',serif; letter-spacing:.09em; }

/* ══════════════ MODALS (shared) ══════════════ */
.pmod {
  position:fixed; inset:0; background:rgba(0,0,0,.88); z-index:3000;
  display:flex; align-items:center; justify-content:center;
  padding:1rem; opacity:0; pointer-events:none; transition:opacity .3s;
}
.pmod.show { opacity:1; pointer-events:all; }
.pbox {
  background:linear-gradient(135deg,var(--dm),var(--wm));
  border:1px solid rgba(212,160,23,.32); border-radius:20px;
  padding:2.5rem; max-width:480px; width:100%; text-align:center;
  transform:scale(.92); transition:transform .3s;
  max-height:90vh; overflow-y:auto;
}
.pmod.show .pbox { transform:scale(1); }
.pbox h3 { font-family:'Cinzel Decorative',serif; font-size:1.4rem; color:var(--g); margin-bottom:.5rem; }
.pbox .om2 { font-size:2.5rem; display:block; margin-bottom:.9rem; animation:op 3s ease-in-out infinite; color:var(--s); }
.pclose { position:absolute; top:1rem; right:1rem; background:none; border:none; color:var(--tm); font-size:1.4rem; cursor:pointer; transition:color .3s; }
.pclose:hover { color:var(--s); }
.pcontent { position:relative; }

/* ── Donation Modal Steps ── */
.steps { display:flex; justify-content:center; gap:0; margin:1.5rem 0; }
.step { display:flex; flex-direction:column; align-items:center; gap:.3rem; position:relative; }
.step:not(:last-child)::after {
  content:''; position:absolute; top:14px; left:calc(50% + 14px);
  width:calc(100% - 28px); height:2px;
  background:rgba(212,160,23,.2); z-index:-1;
}
.step.done:not(:last-child)::after { background:var(--g); }
.snum {
  width:28px; height:28px; border-radius:50%;
  border:2px solid rgba(212,160,23,.25);
  display:flex; align-items:center; justify-content:center;
  font-family:'Cinzel',serif; font-size:.72rem; color:var(--tm); transition:all .4s;
}
.step.active .snum { border-color:var(--s); background:rgba(255,107,26,.15); color:var(--s); }
.step.done   .snum { border-color:var(--g); background:rgba(212,160,23,.15); color:var(--g); }
.slabel { font-size:.62rem; color:var(--tm); font-family:'Cinzel',serif; letter-spacing:.05em; margin-top:.2rem; }
.fstep { display:none; }
.fstep.show { display:block; }
.amt-display { font-family:'Cinzel Decorative',serif; font-size:2rem; color:var(--bri); margin:1rem 0; }
.upi-step { padding:.5rem 0; }
.upi-amounts { font-family:'Cinzel',serif; font-size:1.8rem; color:var(--bri); font-weight:700; margin:1rem 0; }
.upi-qr-wrap {
  background:#fff; border-radius:14px; padding:1rem;
  width:180px; height:180px; margin:1rem auto;
  display:flex; align-items:center; justify-content:center;
  border:3px solid var(--g);
}
.upi-qr-icon { font-size:6rem; line-height:1; }
.upi-id-big {
  font-family:'Cinzel',serif; font-size:1.1rem; color:var(--g);
  letter-spacing:.06em; background:rgba(26,10,0,.6);
  padding:.6rem 1.4rem; border-radius:8px; cursor:pointer;
  border:1px solid rgba(212,160,23,.25); margin:.8rem 0;
  display:inline-block; transition:all .3s;
}
.upi-id-big:hover { border-color:var(--g); background:rgba(212,160,23,.08); }
.apps-row { display:flex; gap:.7rem; justify-content:center; flex-wrap:wrap; margin:.8rem 0; }
.app-btn {
  padding:.5rem 1rem; border-radius:8px;
  background:rgba(255,107,26,.1); border:1px solid rgba(255,107,26,.22);
  font-family:'Cinzel',serif; font-size:.72rem; color:var(--s);
  cursor:pointer; transition:all .3s;
}
.app-btn:hover { background:rgba(255,107,26,.2); border-color:var(--s); }
.verify-step { padding:.5rem 0; }
.txn-input-wrap {
  background:rgba(26,10,0,.55); border:1px solid rgba(212,160,23,.2);
  border-radius:10px; padding:1rem; margin:1rem 0; text-align:left;
}
.receipt {
  background:linear-gradient(135deg,rgba(212,160,23,.06),rgba(255,107,26,.04));
  border:1px solid rgba(212,160,23,.25); border-radius:14px;
  padding:1.5rem; margin:1rem 0; text-align:left;
}
.receipt-row { display:flex; justify-content:space-between; padding:.5rem 0; border-bottom:1px solid rgba(212,160,23,.1); font-size:.85rem; }
.receipt-row:last-child { border:none; }
.rl  { color:var(--tm); font-family:'Cinzel',serif; font-size:.72rem; letter-spacing:.05em; }
.rv2 { color:var(--tl); font-weight:700; }
.receipt-total { font-family:'Cinzel Decorative',serif; font-size:1.6rem; color:var(--bri); margin:.5rem 0; }

/* ════════════════════════════════════════════════════
   LIGHT MODE OVERRIDES
   Fix hardcoded dark rgba values that break visibility
   ════════════════════════════════════════════════════ */

[data-mode="light"] nav {
  background: rgba(255,248,238,.97);
  border-bottom-color: rgba(180,120,40,.25);
}
[data-mode="light"] .nl a { color: var(--tm); }
[data-mode="light"] .nlt  { color: var(--g); }

[data-mode="light"] .tk {
  background: linear-gradient(90deg, var(--dm), rgba(255,240,200,.9));
  border-color: rgba(180,120,40,.2);
}
[data-mode="light"] .tki { color: var(--tm); }

[data-mode="light"] .hbg2 {
  background:
    radial-gradient(ellipse 80% 60% at 50% 30%, rgba(212,120,30,.07) 0%, transparent 60%),
    radial-gradient(ellipse 50% 40% at 20% 80%, rgba(180,140,20,.05) 0%, transparent 50%),
    linear-gradient(180deg, var(--dk) 0%, var(--wm) 50%, var(--dk) 100%);
}

[data-mode="light"] .tc {
  background: linear-gradient(135deg, rgba(255,200,100,.06), rgba(255,255,255,.8));
  border-color: rgba(180,120,40,.2);
}
[data-mode="light"] .tc:hover { border-color: rgba(180,120,40,.5); box-shadow: 0 8px 28px rgba(180,100,20,.12); }

[data-mode="light"] .fc {
  background: linear-gradient(135deg, rgba(255,255,255,.9), rgba(255,240,210,.8));
  border-color: rgba(180,120,40,.18);
}
[data-mode="light"] .fc:hover { border-color: rgba(200,80,40,.3); }

[data-mode="light"] .svc {
  background: linear-gradient(135deg, rgba(255,255,255,.85), rgba(255,245,225,.9));
  border-color: rgba(180,120,40,.18);
}
[data-mode="light"] .svc:hover { border-color: rgba(200,80,40,.28); }

[data-mode="light"] .gi {
  background: rgba(255,200,100,.08);
  border-color: rgba(180,120,40,.15);
}
[data-mode="light"] .gi:hover { border-color: var(--g); }

[data-mode="light"] #upi-only-notice {
  background: linear-gradient(135deg,rgba(212,160,23,.06),rgba(255,107,26,.04));
  border-color: rgba(180,120,40,.25);
}
[data-mode="light"] #upi-only-notice p { color: #7A4A20; }
[data-mode="light"] #upi-only-notice strong { color: #8B4513; }

[data-mode="light"] .dbox {
  background: linear-gradient(135deg, rgba(255,255,255,.95), rgba(255,245,225,.95));
  border-color: rgba(180,120,40,.3);
  box-shadow: 0 0 40px rgba(180,100,20,.08);
}
[data-mode="light"] .dab { border-color: rgba(180,120,40,.3); color: var(--g); }
[data-mode="light"] .upi-id-display {
  background: rgba(255,255,255,.8);
  border-color: rgba(180,120,40,.25);
  color: var(--g);
}
[data-mode="light"] .fgp input,
[data-mode="light"] .fgp textarea,
[data-mode="light"] .fgp select {
  background: rgba(255,255,255,.9);
  border-color: rgba(180,120,40,.25);
  color: var(--tl);
}
[data-mode="light"] .fgp select option { background: #fffaee; color: #1A0A00; }
[data-mode="light"] .fgp input:focus,
[data-mode="light"] .fgp textarea:focus,
[data-mode="light"] .fgp select:focus {
  border-color: var(--s);
  background: rgba(255,255,255,1);
}

[data-mode="light"] #contact { background: var(--wm); }
[data-mode="light"] .citlv { color: var(--tl); }

[data-mode="light"] footer {
  background: linear-gradient(180deg, var(--dm), rgba(255,235,200,.95));
}
[data-mode="light"] .fbot p { color: rgba(100,60,20,.6); }

[data-mode="light"] .pbox {
  background: linear-gradient(135deg, rgba(255,255,255,.98), rgba(255,245,225,.98));
  border-color: rgba(180,120,40,.3);
}
[data-mode="light"] .upi-id-big {
  background: rgba(255,255,255,.8);
  border-color: rgba(180,120,40,.25);
  color: var(--g);
}
[data-mode="light"] .upi-id-big:hover { background: rgba(255,245,220,.9); }
[data-mode="light"] .receipt {
  background: linear-gradient(135deg, rgba(212,160,23,.06), rgba(255,180,50,.04));
}
[data-mode="light"] .txn-input-wrap {
  background: rgba(255,255,255,.9);
  border-color: rgba(180,120,40,.2);
}

/* Prasad section light mode */
[data-mode="light"] #prasad { background: linear-gradient(180deg, transparent, rgba(255,200,100,.08), transparent); }

/* ════════════════════════════════════════════════════
   LIGHT MODE — CSS VARIABLE OVERRIDES
   Override dark-only vars so all sections look correct
   ════════════════════════════════════════════════════ */
[data-mode="light"] {
  --tl:  #2D1200;          /* dark text on light bg */
  --tm:  #7A4A20;          /* muted text */
  --dk:  #FFF8EE;          /* lightest bg */
  --dm:  #FFF0D8;          /* light warm bg */
  --wm:  #FFE8C0;          /* warm bg */
}

/* ── Body & Section backgrounds ── */
[data-mode="light"] body          { background: #FFF8EE; color: #2D1200; }
[data-mode="light"] section       { background: transparent; }
[data-mode="light"] #hero         { background: linear-gradient(180deg,#FFF8EE,#FFF0D8,#FFF8EE); }
[data-mode="light"] #timings      { background: linear-gradient(180deg,#FFF8EE,#FFF0D8,#FFF8EE); }
[data-mode="light"] #festivals    { background: #FFF8EE; }
[data-mode="light"] #about        { background: linear-gradient(180deg,#FFF0D8,#FFF8EE); }
[data-mode="light"] #services     { background: #FFF8EE; }
[data-mode="light"] #gallery      { background: #FFF0D8; }
[data-mode="light"] #donation     { background: linear-gradient(135deg,#FFF8EE,#FFF0D8,#FFF8EE); }
[data-mode="light"] #contact      { background: #FFF8EE; }

/* ── Section headings ── */
[data-mode="light"] .stt          { color: #8B4513; }
[data-mode="light"] .sdesc        { color: #7A4A20; }

/* ── About ── */
[data-mode="light"] .atxt h2      { color: #8B4513; }
[data-mode="light"] .atxt p       { color: #5C3010; }
[data-mode="light"] .afl          { color: #7A4A20; }
[data-mode="light"] .afn          { color: var(--s); }

/* ── Services ── */
[data-mode="light"] .svn          { color: #2D1200; }
[data-mode="light"] .svd          { color: #7A4A20; }
[data-mode="light"] .svp          { color: var(--s); }

/* ── Timings ── */
[data-mode="light"] .tn           { color: #2D1200; }
[data-mode="light"] .tdv          { color: var(--s); }
[data-mode="light"] .tt           { color: #8B4513; }
[data-mode="light"] .tdesc        { color: #7A4A20; }

/* ── Festivals ── */
[data-mode="light"] .fm           { color: var(--s); }
[data-mode="light"] .fn           { color: #2D1200; }
[data-mode="light"] .fh           { color: var(--s); }
[data-mode="light"] .fdesc        { color: #7A4A20; }

/* ── Hero ── */
[data-mode="light"] .hdv          { color: #8B4513; }
[data-mode="light"] .hst          { color: #7A4A20; }
[data-mode="light"] .hm           { color: #5C3010; border-color: rgba(139,69,19,.3); }
[data-mode="light"] .lbdg         { background: rgba(255,107,26,.08); border-color: rgba(255,107,26,.25); }

/* ── Contact ── */
[data-mode="light"] .ci h3        { color: #2D1200; }
[data-mode="light"] .citlb        { color: #7A4A20; }
[data-mode="light"] .citlv        { color: #2D1200; }
[data-mode="light"] .cii          { background: rgba(255,107,26,.1); border-color: rgba(255,107,26,.2); color: var(--s); }
[data-mode="light"] .cf input,
[data-mode="light"] .cf textarea,
[data-mode="light"] .cf select,
[data-mode="light"] .fi2          { background: rgba(255,255,255,.9); border-color: rgba(180,120,40,.25); color: #2D1200; }
[data-mode="light"] .fl           { color: #7A4A20; }

/* ── Donation ── */
[data-mode="light"] .dq           { color: #8B4513; }
[data-mode="light"] .dca          { color: #7A4A20; }
[data-mode="light"] .dpl          { color: #5C3010; }
[data-mode="light"] .dpic         { color: var(--s); }
[data-mode="light"] .pay-steps    { color: #5C3010; }
[data-mode="light"] .ups          { background: rgba(255,255,255,.7); border-color: rgba(180,120,40,.2); }

/* ── Footer ── */
[data-mode="light"] .fbn          { color: #2D1200; }
[data-mode="light"] .fbs          { color: var(--s); }
[data-mode="light"] footer p      { color: #7A4A20; }
[data-mode="light"] .fc2 h4       { color: #8B4513; }
[data-mode="light"] .fc2 ul li a  { color: #7A4A20; }
[data-mode="light"] .fc2 ul li a:hover { color: var(--s); }
[data-mode="light"] .fbot p       { color: rgba(100,60,20,.7); }
[data-mode="light"] .fbot          { border-color: rgba(180,120,40,.15); }
[data-mode="light"] .fc2 li        { color: #7A4A20; }
[data-mode="light"] footer .om3    { color: var(--s); text-shadow: 0 0 20px rgba(255,107,26,.3); }
[data-mode="light"] .fbs:hover     { background: var(--s); border-color: var(--s); color: #fff; }

/* ── Gallery popup light mode ── */
[data-mode="light"] #galleryPopup  { background: rgba(255,248,238,.98); }
[data-mode="light"] #galleryPopup > div:first-child {
  border-color: rgba(180,120,40,.18);
  background: rgba(255,255,255,.7);
}
[data-mode="light"] #galleryTabs button {
  background: rgba(180,120,40,.06) !important;
  color: #7A4A20 !important;
  border-color: rgba(180,120,40,.15) !important;
}
[data-mode="light"] #galleryGrid > div {
  background: rgba(255,255,255,.8);
  border-color: rgba(180,120,40,.15);
}

/* ── Prasad rows light mode ── */
[data-mode="light"] #prasad-rows > div:hover { background: rgba(212,160,23,.08) !important; }

/* ── About stats light mode ── */
[data-mode="light"] .afi {
  background: rgba(255,255,255,.7);
  border-color: rgba(180,120,40,.15);
}

/* ── Announcement ticker light mode text ── */
[data-mode="light"] .tki .d { color: var(--s); }
[data-mode="light"] .fsb          { background: rgba(180,120,40,.08); border-color: rgba(180,120,40,.2); color: #8B4513; }
[data-mode="light"] .fsb:hover    { background: var(--s); border-color: var(--s); color: #fff; }

/* ── Developer credit in footer ── */
[data-mode="light"] .dev-credit-wrap {
  background: linear-gradient(135deg, rgba(255,107,26,.06), rgba(212,160,23,.05));
  border-color: rgba(180,120,40,.2);
}
[data-mode="light"] .dev-credit-label { color: rgba(100,60,20,.55) !important; }
[data-mode="light"] .dev-credit-link  { color: rgba(100,60,20,.5) !important; }

/* Developer credit card — light mode */
[data-mode="light"] .dev-credit-card {
  background: linear-gradient(135deg,rgba(255,107,26,.06),rgba(212,160,23,.05),rgba(255,255,255,.7)) !important;
  border-color: rgba(180,120,40,.3) !important;
  box-shadow: 0 4px 24px rgba(180,100,20,.1), inset 0 1px 0 rgba(255,255,255,.8) !important;
}
[data-mode="light"] .dev-credit-label {
  color: rgba(100,60,20,.8) !important;
}
[data-mode="light"] .dev-credit-pill {
  background: rgba(255,107,26,.06) !important;
  border-color: rgba(180,120,40,.25) !important;
  color: rgba(80,40,10,.85) !important;
}
[data-mode="light"] .dev-credit-pill:hover {
  color: #fff !important;
}

/* ── Prasad table ── */
[data-mode="light"] #prasad-table-wrap > div { background: rgba(255,255,255,.8); border-color: rgba(180,120,40,.2); }
[data-mode="light"] #prasad-rows > div        { border-color: rgba(180,120,40,.1); }

/* ── Gallery ── */
[data-mode="light"] .gi-preview--open {
  background: linear-gradient(135deg,rgba(255,107,26,.08),rgba(212,160,23,.05));
  border-color: rgba(180,120,40,.3);
}

/* ── Mobile menu ── */
[data-mode="light"] .mmenu { background: rgba(255,248,238,.98); border-color: rgba(180,120,40,.2); }
[data-mode="light"] .mmenu ul li a  { color: #7A4A20; }
[data-mode="light"] .mmenu ul li    { border-color: rgba(180,120,40,.1); }

/* ── Toast ── */
[data-mode="light"] .toast { background: rgba(255,248,238,.97); border-color: rgba(180,120,40,.3); color: #2D1200; }

/* ── Buttons in light mode ── */
[data-mode="light"] .bo {
  color: #8B4513;
  border-color: rgba(139,69,19,.4);
}
[data-mode="light"] .bo:hover {
  background: rgba(212,160,23,.08);
  border-color: var(--g);
  color: #2D1200;
}

/* ── Section divider ── */
[data-mode="light"] .sd::before { background: linear-gradient(90deg,transparent,rgba(139,69,19,.4)); }
[data-mode="light"] .sd::after  { background: linear-gradient(90deg,rgba(139,69,19,.4),transparent); }