/* ============================================================
   Bam Sweets — Seasonal & Festival Experience styles
   ============================================================
   Additive: never touches any existing selector. All rules are
   scoped under either .festival-card / .festival-banner or the
   body.on-festival.theme-xxx modifier so they can never leak.
   ============================================================ */
:root {
  --festival-accent: #d4af37;   /* JS overrides to match `theme_color` */
}

/* ---- Festival Card (countdown + greeting) --------------------- */
.festival-card {
  position: relative;
  border-radius: 18px;
  padding: 16px 18px 18px;
  margin: 10px 0 14px;
  overflow: hidden;
  background:
    linear-gradient(140deg, rgba(255,255,255,0.14), rgba(255,255,255,0) 55%),
    linear-gradient(180deg, var(--festival-accent), color-mix(in srgb, var(--festival-accent) 65%, #1a0d0b));
  color: #fff8ec;
  box-shadow: 0 12px 26px rgba(0,0,0,0.14), 0 3px 8px rgba(0,0,0,0.08);
  isolation: isolate;
  animation: fc-in .5s var(--ease);
}
.festival-card::before {
  /* subtle festive pattern — tiny radial dots in the accent color */
  content: '';
  position: absolute; inset: 0;
  pointer-events: none;
  background-image:
    radial-gradient(circle at 8% 20%,  rgba(255,255,255,0.14) 0 4px, transparent 5px),
    radial-gradient(circle at 92% 30%, rgba(255,255,255,0.10) 0 3px, transparent 4px),
    radial-gradient(circle at 78% 78%, rgba(255,255,255,0.10) 0 5px, transparent 6px),
    radial-gradient(circle at 18% 82%, rgba(255,255,255,0.08) 0 3px, transparent 4px);
  opacity: .55;
  z-index: 0;
}
.festival-card .fest-body { position: relative; z-index: 2; }

.festival-card.is-active[style*="--fest-bg"] {
  background:
    linear-gradient(180deg, rgba(0,0,0,0.05), rgba(0,0,0,0.55)),
    var(--fest-bg) center/cover no-repeat,
    linear-gradient(180deg, var(--festival-accent), color-mix(in srgb, var(--festival-accent) 60%, #1a0d0b));
}
.fest-glow {
  position: absolute; inset: -30% -20% auto auto;
  width: 220px; height: 220px; border-radius: 50%;
  background: radial-gradient(circle at center, rgba(255,255,255,0.35), transparent 65%);
  z-index: 1; pointer-events: none;
}

.fest-eyebrow {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--font-body);
  font-size: 11px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase;
  padding: 4px 10px;
  background: rgba(255,255,255,.16);
  color: #fff8ec;
  border-radius: 999px;
  margin-bottom: 8px;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.fest-icon { font-size: 15px; line-height: 1; }
.fest-title {
  font-family: var(--font-display);
  font-size: 24px; font-weight: 800; line-height: 1.1;
  color: #fff8ec; margin: 2px 0 2px;
  text-shadow: 0 2px 12px rgba(0,0,0,.20);
}
.fest-sub { color: rgba(255,248,236,.85); font-size: 13px; margin-top: 4px; max-width: 34em; }

.fest-cta {
  display: inline-flex; align-items: center; gap: 6px;
  margin-top: 12px;
  padding: 8px 14px;
  border-radius: 999px;
  background: #fff8ec; color: color-mix(in srgb, var(--festival-accent) 60%, #1a0d0b);
  font-weight: 800; font-size: 13px; letter-spacing: .04em;
  transition: transform .16s var(--ease), box-shadow .18s var(--ease);
  box-shadow: 0 4px 12px rgba(0,0,0,.18);
}
.fest-cta:hover  { transform: translateY(-1px); box-shadow: 0 6px 16px rgba(0,0,0,.22); }
.fest-cta:active { transform: translateY(0);    box-shadow: 0 3px 8px  rgba(0,0,0,.20); }
.fest-cta svg { width: 14px; height: 14px; }

/* Countdown units */
.fest-count {
  display: flex; align-items: flex-end; gap: 8px;
  margin-top: 12px;
}
.fc-unit {
  display: flex; flex-direction: column; align-items: center;
  min-width: 62px;
  padding: 10px 8px 8px;
  background: rgba(255,255,255,0.14);
  border: 1px solid rgba(255,255,255,0.22);
  border-radius: 12px;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.fc-num {
  font-family: var(--font-display);
  font-weight: 800; font-size: 28px; line-height: 1;
  color: #fff8ec;
  font-variant-numeric: tabular-nums;
}
.fc-lbl {
  font-family: var(--font-body);
  font-size: 10px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  color: rgba(255,248,236,.75);
  margin-top: 4px;
}
.fc-dot {
  font-family: var(--font-display); font-weight: 800; font-size: 22px;
  color: rgba(255,248,236,.55); align-self: center; padding-bottom: 22px;
}

@keyframes fc-in {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  .festival-card { animation: none; }
}

/* ---- Festival Hero Banner (appears above promo banners) ---- */
.festival-banner {
  position: relative;
  display: block;
  border-radius: 18px;
  overflow: hidden;
  margin: 0 0 14px;
  min-height: 140px;
  background-size: cover; background-position: center;
  background-color: color-mix(in srgb, var(--festival-accent) 80%, #1a0d0b);
  color: #fff8ec;
  text-decoration: none;
  isolation: isolate;
  animation: fc-in .5s var(--ease);
}
.festival-banner .fb-shade {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(180deg, rgba(0,0,0,0.10) 0%, rgba(0,0,0,0.55) 100%);
}
.festival-banner .fb-inner {
  position: relative; z-index: 2;
  padding: 18px 20px 20px;
}
.festival-banner .fb-eyebrow {
  display: inline-block;
  font-size: 11px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase;
  padding: 4px 10px; border-radius: 999px;
  background: rgba(255,255,255,.16);
  color: #fff8ec;
  margin-bottom: 6px;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.festival-banner .fb-title {
  font-family: var(--font-display);
  font-size: 22px; font-weight: 800; line-height: 1.15; color: #fff8ec;
  text-shadow: 0 2px 12px rgba(0,0,0,.25);
  margin: 0 0 4px;
}
.festival-banner .fb-sub { color: rgba(255,248,236,.85); font-size: 13px; margin: 0 0 10px; max-width: 34em; }
.festival-banner .fb-cta {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 14px; border-radius: 999px;
  background: #fff8ec; color: color-mix(in srgb, var(--festival-accent) 60%, #1a0d0b);
  font-weight: 800; font-size: 13px;
  box-shadow: 0 4px 12px rgba(0,0,0,.18);
}
.festival-banner .fb-cta svg { width: 14px; height: 14px; }

/* ==================================================================
   Theme decorations — subtle, only on Home (where the classes live)
   ================================================================== */
body.on-festival { position: relative; }

/* Diwali — golden diya dots in top corners */
body.on-festival.theme-diwali .festival-card::after {
  content: '🪔 🪔 🪔';
  position: absolute; top: 6px; right: 12px; font-size: 12px;
  letter-spacing: 8px; opacity: .55; pointer-events: none; z-index: 1;
}

/* Rakhi — playful string of hearts */
body.on-festival.theme-rakhi .festival-card::after {
  content: '🎀';
  position: absolute; top: 8px; right: 14px; font-size: 22px;
  opacity: .55; pointer-events: none; z-index: 1;
}

/* Ganesh Chaturthi — flower corner */
body.on-festival.theme-ganesh .festival-card::after {
  content: '🌺';
  position: absolute; top: 8px; right: 14px; font-size: 22px;
  opacity: .55; pointer-events: none; z-index: 1;
}

/* Holi — a few color splashes in the card corners */
body.on-festival.theme-holi .festival-card::after {
  content: '';
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    radial-gradient(circle at 10% 15%, rgba(239, 68, 68, .28)  0 10px, transparent 11px),
    radial-gradient(circle at 90% 25%, rgba(234, 179, 8, .28)  0 8px,  transparent 9px),
    radial-gradient(circle at 85% 85%, rgba(59, 130, 246, .25) 0 12px, transparent 13px),
    radial-gradient(circle at 15% 82%, rgba(34, 197, 94, .28)  0 8px,  transparent 9px);
}

/* Chhath — warm sunset rays */
body.on-festival.theme-chhath .festival-card::after {
  content: '☀️';
  position: absolute; top: 6px; right: 14px; font-size: 20px;
  opacity: .55; pointer-events: none; z-index: 1;
}

/* Eid — crescent + star */
body.on-festival.theme-eid .festival-card::after {
  content: '🌙 ★';
  position: absolute; top: 8px; right: 14px; font-size: 16px;
  letter-spacing: 6px; opacity: .55; pointer-events: none; z-index: 1;
}

/* Christmas — subtle snowflakes drifting across the top of Home */
body.on-festival.theme-christmas .festival-card::after {
  content: '❄';
  position: absolute; top: 10px; right: 14px; font-size: 18px;
  opacity: .5; pointer-events: none; z-index: 1;
}
body.on-festival.theme-christmas .festival-snow {
  position: fixed; top: 0; left: 0; right: 0; height: 100vh;
  pointer-events: none; z-index: 4;
  overflow: hidden;
  opacity: .55;
}
body.on-festival.theme-christmas .snowflake {
  position: absolute; top: -12px;
  color: #ffffff; font-size: 12px;
  animation: snow-fall linear infinite;
  filter: drop-shadow(0 1px 1px rgba(0,0,0,.12));
}
@keyframes snow-fall {
  0%   { transform: translateY(-10vh)  translateX(0)   rotate(0deg);   opacity: 0;  }
  10%  { opacity: .85; }
  100% { transform: translateY(105vh)  translateX(20px) rotate(360deg); opacity: 0; }
}

/* New Year — subtle firework accents on the card */
body.on-festival.theme-newyear .festival-card::after {
  content: '✨';
  position: absolute; top: 8px; right: 14px; font-size: 22px;
  opacity: .6; pointer-events: none; z-index: 1;
  animation: ny-twinkle 2.4s ease-in-out infinite;
}
@keyframes ny-twinkle {
  0%,100% { opacity: .35; transform: scale(1); }
  50%     { opacity: .95; transform: scale(1.18); }
}
@media (prefers-reduced-motion: reduce) {
  body.on-festival.theme-newyear .festival-card::after { animation: none; }
  body.on-festival.theme-christmas .snowflake          { animation: none; display: none; }
}