/* ==========================================================================
   Diwali look, shared (includes/diwali_fx.php loads it): festive pill, offer
   box + countdown clock, string of lights, and the first-visit fireworks.
   Every page prints it only while one of its Diwali offers is active
   (includes/flash_offer.php), so the look disappears with the offer.
   style.css sets html{font-size:62.5%}, so sizes here are px.
   ========================================================================== */

.kdf-dw-diya::before { content: "\1FA94"; font-size: 1.15em; line-height: 1; }

/* Hero pill: "Diwali Early-Bird Offer | Batch 3 starts 10 Jan 2027" */
.kdf-dw-pill {
  display: inline-flex; flex-wrap: wrap; align-items: center; gap: 8px 10px;
  padding: 8px 16px; border-radius: 999px;
  background: linear-gradient(90deg, #7c2d12, #b45309 55%, #d97706);
  color: #fff7ed; font: 700 13px/1.3 "JetBrains Mono", monospace; letter-spacing: .04em; text-transform: uppercase;
  box-shadow: 0 10px 24px -12px rgba(180, 83, 9, .8), inset 0 0 0 1px rgba(253, 230, 138, .35);
}
.kdf-dw-pill b { color: #fde68a; font-weight: 800; }
.kdf-dw-sep { width: 1px; height: 14px; background: rgba(253, 230, 138, .5); }

/* Hero offer box: price + countdown to the offer deadline */
.kdf-dw-offer {
  margin-top: 22px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px 24px;
  padding: 16px 18px; border-radius: 16px; max-width: 560px;
  background: linear-gradient(135deg, #fffbeb, #fff7ed);
  border: 1px solid #fcd34d; box-shadow: 0 16px 34px -22px rgba(217, 119, 6, .7);
}
.kdf-dw-offer__label { display: block; font: 700 11.5px/1.3 "JetBrains Mono", monospace; letter-spacing: .06em; text-transform: uppercase; color: #b45309; }
.kdf-dw-offer__amt { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 10px; margin-top: 6px; }
.kdf-dw-offer__amt b { font: 800 34px/1 "Bricolage Grotesque", sans-serif; letter-spacing: -.02em; color: #0f172a; }
.kdf-dw-offer__amt s { font-size: 17px; color: #94a3b8; }
.kdf-dw-offer__amt em { font-style: normal; font-size: 13px; font-weight: 700; color: #fff; background: #dc2626; padding: 3px 8px; border-radius: 6px; }
.kdf-dw-clock { display: inline-flex; gap: 6px; margin-top: 7px; }
.kdf-dw-clock > span {
  display: inline-flex; align-items: baseline; gap: 1px; padding: 7px 8px; border-radius: 9px;
  background: #431407; color: #fdba74; font: 600 11px/1 "Inter", system-ui, sans-serif;
}
.kdf-dw-clock b { font: 700 18px/1 "JetBrains Mono", monospace; color: #fff; font-variant-numeric: tabular-nums; }

/* Price card note */
.kdf-dw-note { margin: 12px 0 0; padding: 10px 12px; border-radius: 10px; background: #fffbeb; border: 1px dashed #fbbf24; font-size: 14px; line-height: 1.5; color: #92400e; }

/* String of lights across the top of the hero: two offset bulb layers that
   twinkle against each other, hanging from a thin wire. */
.kdf-dw-lights { position: absolute; left: 0; right: 0; top: 0; height: 34px; pointer-events: none; z-index: 1; overflow: hidden; }
.kdf-dw-lights::before, .kdf-dw-lights::after {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 34px;
  background-repeat: repeat-x; background-size: 60px 34px;
}
.kdf-dw-lights::before {
  background-image:
    radial-gradient(ellipse 6px 8px at 14px 18px, #fbbf24 60%, rgba(251, 191, 36, 0) 100%),
    radial-gradient(ellipse 6px 8px at 42px 22px, #ef4444 60%, rgba(239, 68, 68, 0) 100%),
    linear-gradient(#78350f, #78350f);
  background-size: 60px 34px, 56px 30px, 100% 1px;
  background-position: 0 0, 0 0, 0 9px;
  filter: drop-shadow(0 0 6px rgba(251, 191, 36, .9));
  animation: kdfDwTwinkle 1.6s ease-in-out infinite alternate;
}
.kdf-dw-lights::after {
  background-image:
    radial-gradient(ellipse 6px 8px at 28px 21px, #22c55e 60%, rgba(34, 197, 94, 0) 100%),
    radial-gradient(ellipse 6px 8px at 0px 20px, #a855f7 60%, rgba(168, 85, 247, 0) 100%);
  filter: drop-shadow(0 0 6px rgba(168, 85, 247, .8));
  animation: kdfDwTwinkle 1.6s ease-in-out .8s infinite alternate;
}
@keyframes kdfDwTwinkle { from { opacity: .45; } to { opacity: 1; } }

/* First-visit fireworks (js/fs-diwali.js) */
.kdf-dw-veil { position: fixed; inset: 0; z-index: 1999; pointer-events: none; opacity: 0; transition: opacity .8s ease;
  background: radial-gradient(ellipse at 50% 30%, rgba(30, 27, 75, .55), rgba(2, 6, 23, .72)); }
.kdf-dw-veil.is-in { opacity: 1; }
.kdf-dw-fx { position: fixed; inset: 0; width: 100vw; height: 100vh; pointer-events: none; z-index: 2000; }
.kdf-dw-toast {
  position: fixed; left: 50%; top: 22%; z-index: 2001; pointer-events: none;
  transform: translate(-50%, -10px) scale(.96); opacity: 0;
  padding: 14px 22px; border-radius: 16px; text-align: center;
  background: rgba(67, 20, 7, .92); color: #fff7ed; box-shadow: 0 24px 60px -20px rgba(0, 0, 0, .6);
  font: 800 clamp(18px, 2.4vw, 24px)/1.25 "Bricolage Grotesque", sans-serif;
  transition: opacity .45s ease, transform .45s ease;
}
.kdf-dw-toast small { display: block; margin-top: 4px; font: 600 13.5px/1.4 "Inter", system-ui, sans-serif; color: #fdba74; }
.kdf-dw-toast.is-in { opacity: 1; transform: translate(-50%, 0) scale(1); }

@media (max-width: 575.98px) {
  .kdf-dw-pill { font-size: 11.5px; padding: 7px 12px; }
  .kdf-dw-sep { display: none; }
  .kdf-dw-offer { padding: 14px; }
  .kdf-dw-offer__amt b { font-size: 30px; }
  .kdf-dw-clock b { font-size: 16px; }
}
@media (prefers-reduced-motion: reduce) {
  .kdf-dw-lights::before, .kdf-dw-lights::after { animation: none; opacity: 1; }
}