/* B4X Store Seasonal Themes — ALL styles are gated behind an opt-in data attribute.
   If disabled (default), these rules are inert. No checkout/payment elements are touched. */
body[data-seasonal-theme] {
  --seasonal-accent: #9cbbff;
  --seasonal-glow: rgba(93,132,232,.20);
  --seasonal-tint: rgba(23,35,78,.15);
}
body[data-seasonal-theme="christmas"] {
  --seasonal-accent:#96edcb; --seasonal-glow:rgba(44,211,151,.20); --seasonal-tint:rgba(5,78,65,.15);
}
body[data-seasonal-theme="halloween"] {
  --seasonal-accent:#ffa860; --seasonal-glow:rgba(184,72,222,.24); --seasonal-tint:rgba(87,32,102,.18);
}
body[data-seasonal-theme="blackfriday"] {
  --seasonal-accent:#f7cb79; --seasonal-glow:rgba(238,177,47,.17); --seasonal-tint:rgba(100,75,20,.14);
}
body[data-seasonal-theme="newyear"] {
  --seasonal-accent:#ffdaa3; --seasonal-glow:rgba(118,155,248,.21); --seasonal-tint:rgba(40,47,103,.16);
}
body[data-seasonal-theme="valentines"] {
  --seasonal-accent:#ff95c3; --seasonal-glow:rgba(237,90,158,.19); --seasonal-tint:rgba(105,35,81,.14);
}
body[data-seasonal-theme="programmer"] {
  --seasonal-accent:#75e8f4; --seasonal-glow:rgba(44,205,242,.20); --seasonal-tint:rgba(18,73,100,.16);
}
body[data-seasonal-theme="storeday"] {
  --seasonal-accent:#d0b1ff; --seasonal-glow:rgba(165,105,244,.21); --seasonal-tint:rgba(77,42,115,.14);
}
body[data-seasonal-theme="b4jday"] {
  --seasonal-accent:#6edafc; --seasonal-glow:rgba(80,167,232,.18); --seasonal-tint:rgba(40,66,122,.14);
}
body[data-seasonal-colors] {
  background-image: radial-gradient(circle at 88% 1%, var(--seasonal-tint), transparent 38%);
  background-attachment: fixed;
}
body[data-seasonal-colors] nav.glass {
  border-bottom-color: var(--seasonal-accent) !important;
  box-shadow: 0 4px 26px var(--seasonal-glow);
}
body[data-seasonal-colors] nav .store-name-effect {
  background-image:linear-gradient(90deg,var(--seasonal-accent),#fff,var(--seasonal-accent));
  background-size:200% 100%;
}
body[data-seasonal-colors] .mainSlider {
  box-shadow:0 15px 50px var(--seasonal-glow);
}
body[data-seasonal-colors] .swiper-pagination-bullet-active {
  background:var(--seasonal-accent) !important;
}
body[data-seasonal-theme] .seasonal-hero {
  position:relative;
  isolation:isolate;
}
body[data-seasonal-theme] .seasonal-hero .swiper-slide img {
  transition: filter .4s ease, opacity .4s ease;
}
body[data-seasonal-theme] .seasonal-ribbon {
  position:absolute;
  z-index:24;
  top:16px; left:50%; transform:translateX(-50%);
  max-width:min(92vw,750px);
  display:flex;flex-direction:column;align-items:center;
  padding:10px 28px;text-align:center;
  border:1px solid color-mix(in srgb,var(--seasonal-accent),transparent 55%);
  border-radius:0 0 18px 18px;
  backdrop-filter:blur(15px);
  background:rgba(9,17,35,.79);
  color:#f2f8ff;
  box-shadow:0 8px 35px var(--seasonal-glow);
  pointer-events:none;
}
body[data-seasonal-theme] .seasonal-ribbon strong {
  color:var(--seasonal-accent);
  font-weight:900;
  font-size:clamp(11px,1.35vw,17px);
  letter-spacing:.025em;
}
body[data-seasonal-theme] .seasonal-ribbon span {
  font-size:clamp(9px,1vw,12px);
  line-height:1.4;
  margin-top:4px;color:#f1f5f9;
}
body[data-seasonal-theme] .seasonal-santa,
body[data-seasonal-theme] .seasonal-skeleton {
  position:absolute;z-index:23;
  bottom:-19px;right:12px;
  width:clamp(110px,17vw,220px);
  height:auto;
  pointer-events:none;
  filter:drop-shadow(0 8px 22px #0009);
  transform-origin:80% 100%;
}
body[data-seasonal-theme] .seasonal-santa {
  right:20px;bottom:-14px;
}
body[data-seasonal-theme] .seasonal-skeleton {
  right:auto;left:6px;
  width:clamp(100px,13vw,178px);
}
body[data-seasonal-theme] .seasonal-santa svg,
body[data-seasonal-theme] .seasonal-skeleton svg {
  display:block;width:100%;height:auto;
}
body[data-seasonal-theme].seasonal-motion .seasonal-santa {
  animation:seasonal-peek 6s ease-in-out infinite;
}
body[data-seasonal-theme].seasonal-motion .seasonal-skeleton {
  animation:seasonal-bone-wave 5s ease-in-out infinite;
}
@keyframes seasonal-peek {
  0%,100% { transform:translateY(9px) rotate(-2deg) }
  50% { transform:translateY(-8px) rotate(3deg) }
}
@keyframes seasonal-bone-wave {
  0%,100% { transform:translateY(7px) rotate(1deg) }
  50% { transform:translateY(-6px) rotate(-3deg) }
}
body[data-seasonal-theme] .seasonal-particles {
  position:fixed;inset:0;overflow:hidden;pointer-events:none;
  z-index:40;opacity:.64;contain:layout paint;
}
body[data-seasonal-theme] .seasonal-particle {
  position:absolute;
  top:-8vh;
  color:var(--seasonal-accent);
  font-weight:bold;
  text-shadow:0 2px 10px var(--seasonal-glow);
  pointer-events:none;
  animation:seasonal-fall 15s linear infinite;
}
@keyframes seasonal-fall {
  from { transform:translate3d(0,-7vh,0) rotate(0);opacity:0 }
  12% { opacity:.8 }
  88% { opacity:.8 }
  to { transform:translate3d(40px,120vh,0) rotate(180deg);opacity:0 }
}
body[data-seasonal-theme] .seasonal-countdown {
  position:absolute;bottom:22px;left:50%;transform:translateX(-50%);
  z-index:25;pointer-events:none;
  min-width:min(88vw,355px);
  background:rgba(4,10,25,.86);
  border:1px solid var(--seasonal-accent);
  box-shadow:0 15px 45px var(--seasonal-glow);
  color:#fff;display:flex;flex-direction:column;gap:5px;
  text-align:center;border-radius:17px;padding:13px 21px;
}
body[data-seasonal-theme] .seasonal-counter-label {
  color:var(--seasonal-accent);font-size:11px;
  font-weight:900;text-transform:uppercase;letter-spacing:.12em;
}
body[data-seasonal-theme] .seasonal-counter-digits {
  font-size:clamp(19px,3.5vw,32px);
  font-weight:900;letter-spacing:.08em;
  font-variant-numeric:tabular-nums;
}
@media(max-width:640px) {
  body[data-seasonal-theme] .seasonal-ribbon {top:5px;padding:5px 12px;border-radius:0 0 11px 11px;max-width:86vw}
  body[data-seasonal-theme] .seasonal-ribbon span {font-size:9px}
  body[data-seasonal-theme] .seasonal-santa {right:0;width:115px}
  body[data-seasonal-theme] .seasonal-skeleton {left:0;width:90px}
  body[data-seasonal-theme] .seasonal-countdown {bottom:8px;padding:9px}
}
@media (prefers-reduced-motion: reduce) {
  body[data-seasonal-theme] .seasonal-particle,
  body[data-seasonal-theme] .seasonal-santa,
  body[data-seasonal-theme] .seasonal-skeleton,
  body[data-seasonal-colors] nav .store-name-effect {
    animation:none !important;
    transition:none !important;
  }
}

/* B4X Store seasonal offer interactions v2 */
body[data-seasonal-theme="easter"] {
  --seasonal-accent:#edb9e7; --seasonal-glow:rgba(230,148,210,.20); --seasonal-tint:rgba(108,53,105,.13);
}
body[data-seasonal-theme="halloween"] {
  --seasonal-offer-accent:#ffa44f; --seasonal-offer-glow:rgba(255,123,29,.23);
}
body[data-seasonal-theme="easter"] {
  --seasonal-offer-accent:#d5b6ff; --seasonal-offer-glow:rgba(213,182,255,.21);
}
body[data-seasonal-theme="blackfriday"] {
  --seasonal-offer-accent:#f7cb79; --seasonal-offer-glow:rgba(255,203,121,.23);
}
body[data-seasonal-theme="christmas"] {
  --seasonal-offer-accent:#9ce6bd; --seasonal-offer-glow:rgba(77,220,160,.20);
}
body[data-seasonal-theme="valentines"] {
  --seasonal-offer-accent:#ff92bd; --seasonal-offer-glow:rgba(255,146,189,.21);
}
/* Cards are decorated only after the existing live old-price + % OFF badge
   establish that this product has an actual discount. No price is altered. */
body[data-seasonal-theme] [data-seasonal-offer="true"] {
  position:relative;
  isolation:isolate;
  outline:2px solid var(--seasonal-offer-accent,var(--seasonal-accent));
  outline-offset:0;
  box-shadow:0 0 0 3px var(--seasonal-offer-glow,var(--seasonal-glow)),0 12px 34px var(--seasonal-offer-glow,var(--seasonal-glow));
  transition:outline-color .23s ease,box-shadow .23s ease,transform .23s ease;
}
@media(hover:hover) {
  body[data-seasonal-theme] [data-seasonal-offer="true"]:hover {
    box-shadow:0 0 0 4px var(--seasonal-offer-glow,var(--seasonal-glow)),0 18px 48px var(--seasonal-offer-glow,var(--seasonal-glow));
    transform:translateY(-3px);
  }
}
body[data-seasonal-theme] .seasonal-offer-label {
  position:absolute;right:12px;top:52px;z-index:27;pointer-events:none;
  max-width:calc(100% - 24px);display:inline-flex;align-items:center;
  padding:5px 10px;border:1px solid var(--seasonal-offer-accent,var(--seasonal-accent));
  background:#101827eb;color:#fff;font:800 10px/1.2 system-ui,sans-serif;
  border-radius:999px;box-shadow:0 4px 12px #0007;letter-spacing:.025em;
}
body[data-seasonal-theme] .seasonal-offer-sticker {
  position:absolute;left:10px;top:10px;z-index:27;pointer-events:none;
  width:45px;height:45px;display:grid;place-items:center;
  background:radial-gradient(circle at 28% 20%,#fff9,var(--seasonal-offer-accent,var(--seasonal-accent)));
  color:#101827;border-radius:50%;
  border:2px solid #ffffffb8;box-shadow:0 5px 15px #0009;
  transform:rotate(-12deg);font-size:25px;
}
body[data-seasonal-theme] .seasonal-offer-sticker svg {width:32px;height:35px;}
/* A few bats burst outward ONLY when hovering a discounted Halloween card. */
body[data-seasonal-theme="halloween"] .seasonal-bat-burst {
  position:absolute;left:50%;top:40%;z-index:28;width:1px;height:1px;pointer-events:none;
}
body[data-seasonal-theme="halloween"] .seasonal-bat-burst span {
  position:absolute;display:block;font-size:20px;line-height:1;
  opacity:0;animation:seasonal-bat-flight .9s ease-out both;
  animation-delay:var(--bat-delay,0ms);
}
@keyframes seasonal-bat-flight {
  0%{opacity:0;transform:translate(0,0) scale(.25) rotate(0)}
  13%{opacity:1}
  78%{opacity:1}
  100%{opacity:0;transform:translate(var(--bat-x),var(--bat-y)) scale(1.1) rotate(var(--bat-rot))}
}
/* Witch traverses ONCE per occasional timed visit, never loops continuously. */
body[data-seasonal-theme="halloween"] .seasonal-witch {
  position:fixed;left:0;top:clamp(100px,21vh,240px);z-index:46;
  pointer-events:none;width:clamp(90px,10vw,138px);height:auto;
  filter:drop-shadow(0 5px 10px #0008);
  animation:seasonal-witch-fly 7.5s linear both;
}
body[data-seasonal-theme="halloween"] .seasonal-witch svg {display:block;width:100%;height:auto;}
@keyframes seasonal-witch-fly {
  0%{transform:translate3d(-180px,45px,0) rotate(-5deg);opacity:0}
  7%{opacity:1} 93%{opacity:1}
  100%{transform:translate3d(calc(100vw + 180px),-34px,0) rotate(6deg);opacity:0}
}
/* Programmer day: the binary rain is restricted to the main slider. */
body[data-seasonal-theme="programmer"] .seasonal-matrix-layer {
  position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:7;
  opacity:.55;mask-image:linear-gradient(to bottom,transparent,#000 17%,#000 84%,transparent);
}
body[data-seasonal-theme="programmer"] .seasonal-matrix-column {
  position:absolute;top:-150%;white-space:pre;display:block;
  font:700 clamp(12px,1.4vw,20px)/1.25 monospace;
  color:#84f3c0;text-shadow:0 0 8px #29f19b,0 0 18px #28b887;
  animation:seasonal-binary-fall var(--matrix-duration,7s) linear infinite;
  animation-delay:var(--matrix-delay,0s);
}
@keyframes seasonal-binary-fall {
  from{transform:translateY(-16%)}to{transform:translateY(185%)}
}
/* Black Friday has one short burst of confetti when the homepage opens. */
body[data-seasonal-theme] .seasonal-confetti-burst {
  position:fixed;inset:0;z-index:49;pointer-events:none;overflow:hidden;
}
body[data-seasonal-theme] .seasonal-confetti-piece {
  position:absolute;top:-20px;left:var(--confetti-x);
  width:var(--confetti-size,7px);height:calc(var(--confetti-size,7px) * 1.55);
  background:var(--confetti-color,#ffdc91);
  border-radius:2px;opacity:0;
  animation:seasonal-confetti-once var(--confetti-duration,2.1s) ease-out both;
  animation-delay:var(--confetti-delay,0s);
}
@keyframes seasonal-confetti-once {
  0%{transform:translate(0,-25px) rotate(0);opacity:0}
  15%{opacity:1}75%{opacity:.9}
  100%{transform:translate(var(--confetti-drift,70px),95vh) rotate(540deg);opacity:0}
}
@media (max-width:640px) {
  body[data-seasonal-theme] .seasonal-offer-label{font-size:9px;top:46px;padding:4px 8px}
  body[data-seasonal-theme] .seasonal-offer-sticker{width:35px;height:35px;font-size:20px}
  body[data-seasonal-theme] .seasonal-offer-sticker svg{width:27px;height:29px}
}
@media (prefers-reduced-motion:reduce) {
  body[data-seasonal-theme] .seasonal-bat-burst,
  body[data-seasonal-theme] .seasonal-witch,
  body[data-seasonal-theme] .seasonal-matrix-layer,
  body[data-seasonal-theme] .seasonal-confetti-burst {display:none!important;}
  body[data-seasonal-theme] [data-seasonal-offer="true"]{transform:none!important;transition:none!important;}
}