/*
 * Halloween theme — "Spooky Night"
 * ------------------------------------------------------------------
 * A quiet, ambient Halloween treatment, built like Summer / Autumn: every rule
 * is namespaced under `.halloween-fx`, the fixed overlay HalloweenTheme.tsx
 * mounts on the public marketing pages (not the app). This keeps the whole
 * effect scoped even though `data-theme="halloween"` is on <body> site-wide.
 *
 * What's here: a glowing moon + drifting cloud, twinkling stars, flapping bats
 * gliding across, rising ghosts, an occasional abseiling spider, low purple fog
 * and corner cobwebs. No PNG assets — inline SVG + CSS. (Replaces the old
 * falling-PNG / clickable-sprite Halloween theme.)
 */

.halloween-fx {
    position: fixed;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    overflow: hidden;

    /* Palette — moonlit purple night with pumpkin-orange warmth */
    --hw-night: #1a1030;
    --hw-purple: #3a2b5e;
    --hw-orange: #ef7215;
    --hw-pumpkin: #ff7518;
    --hw-moon: #fdf6c9;
    --hw-ghost: #e2dcf5;

    /* Where the moon's centre sits, measured from the top-right corner. The
       stars are placed around this point rather than scattered over the whole
       page, so they read as the moon's own glow instead of confetti. Kept in
       sync with .halloween-moon-core below, including its mobile size. */
    --hw-moon-cx: 84px;
    --hw-moon-cy: 184px;
}

/* ── Halloween atmosphere: a big soft colour wash in the top-right corner
   (warm near the moon, fading through purple) to set a spooky mood on the
   otherwise-white page. Static — no motion. ───────────────────────────── */
.halloween-atmosphere {
    position: absolute;
    top: -220px;
    right: -220px;
    width: 900px;
    height: 720px;
    pointer-events: none;
    background:
        radial-gradient(closest-side at 74% 40%, rgba(255, 150, 60, 0.22) 0%, rgba(255, 150, 60, 0) 68%),
        radial-gradient(closest-side at 66% 46%, rgba(126, 79, 178, 0.20) 0%, rgba(126, 79, 178, 0) 78%);
    filter: blur(4px);
}

/* ── Crescent moon (top-right), sitting below the site header/banner ─────── */
/* Soft, gradual glow halo (a bit bigger than the disc, fading out slowly) */
.halloween-moon {
    position: absolute;
    top: 20px;
    right: -110px;
    width: 400px;
    height: 400px;
    border-radius: 50%;
    background: radial-gradient(
        circle at center,
        rgba(255, 196, 112, 0.5) 0%,
        rgba(255, 176, 96, 0.3) 32%,
        rgba(255, 168, 92, 0.14) 54%,
        rgba(255, 168, 92, 0) 76%
    );
    filter: blur(8px);
}

/* the crescent disc itself (SVG), static — no pulsing */
.halloween-moon-core {
    position: absolute;
    top: 118px;
    right: 18px;
    width: 132px;
    height: 132px;
    filter: drop-shadow(0 0 24px rgba(255, 184, 92, 0.6));
}
.halloween-moon-core svg { width: 100%; height: 100%; display: block; }
/* The moon is a link to /pricing. It sits outside the click-through overlay,
   so it is fixed on its own, just above it, at the same spot. */
.halloween-moon-link {
    position: fixed;
    z-index: 2;
    pointer-events: auto;
    cursor: pointer;
    border-radius: 50%;
}
html[data-halloween-off] .halloween-moon-link { display: none !important; }
/* Moon and stars belong to the night: never in light mode, whatever the
   component state (belt and braces for the JS check in HalloweenTheme). */
html.light .halloween-moon,
html.light .halloween-moon-core,
html.light .halloween-star { display: none !important; }

@media (max-width: 640px) {
    /* phones: a smaller moon (owner: 108px felt too big next to the hero text) */
    .halloween-moon { width: 220px; height: 220px; top: 50px; right: -80px; }
    .halloween-moon-core { width: 76px; height: 76px; top: 112px; right: 14px; }
    .halloween-atmosphere { width: 620px; height: 520px; }
    .halloween-fx { --hw-moon-cx: 52px; --hw-moon-cy: 150px; }
}

/* ── Cobwebs in the two top corners ──────────────────────────────── */
.halloween-web {
    position: absolute;
    top: 0;
    width: 118px;
    height: 118px;
    opacity: 0.5;
}
.halloween-web svg { width: 100%; height: 100%; display: block; }
.halloween-web--left  { left: 0; }
.halloween-web--right { right: 0; transform: scaleX(-1); }

@media (max-width: 640px) {
    .halloween-web { width: 84px; height: 84px; }
}

/* ── Twinkling stars, scattered around the moon ──────────────────── */
/* --dx / --dy are px offsets from the moon's centre, handed over by the
   component. Anchoring to the corner keeps the cluster on the moon whatever
   the window width, which a percentage never would. */
.halloween-star {
    position: absolute;
    top: calc(var(--hw-moon-cy) + var(--dy, 0px));
    right: calc(var(--hw-moon-cx) + var(--dx, 0px));
    width: var(--size, 3px);
    height: var(--size, 3px);
    border-radius: 50%;
    background: #fffdf0;
    box-shadow: 0 0 6px rgba(255, 253, 240, 0.9);
    opacity: 0.2;
    animation: hw-twinkle var(--dur, 3s) ease-in-out infinite;
    animation-delay: var(--delay, 0s);
}

/* ── Flapping bats gliding across (signature motion) ─────────────── */
.halloween-bat {
    position: absolute;
    top: var(--top, 20%);
    left: 0;
    width: var(--size, 40px);
    height: calc(var(--size, 40px) * 0.58);
    opacity: 0;
    will-change: transform, opacity;
    animation: hw-bat-cross var(--dur, 20s) linear infinite;
    animation-delay: var(--delay, 0s);
}
.halloween-bat--rtl { animation-name: hw-bat-cross-rtl; }

/* the wave layer bobs the bat up and down as it crosses */
.halloween-bat__wave {
    width: 100%;
    height: 100%;
    animation: hw-bat-wave calc(var(--dur, 20s) / 7) ease-in-out infinite;
}
/* the flap layer squashes the wings vertically = wing beat */
.halloween-bat__flap {
    width: 100%;
    height: 100%;
    transform-origin: 50% 45%;
    animation: hw-bat-flap var(--flap, 0.4s) ease-in-out infinite;
}
.halloween-bat svg { width: 100%; height: 100%; display: block; }
/* bats flying right→left face the other way */
.halloween-bat--rtl svg { transform: scaleX(-1); }

/* ── Rising, fading ghosts ───────────────────────────────────────── */
/* Ghosts drift the full height of the page on purpose. It is the little bubbles
   rising out of the fog that are pinned to hand level, further down. */
.halloween-ghost {
    position: absolute;
    bottom: -14vh;
    left: var(--left, 50%);
    width: var(--size, 44px);
    height: calc(var(--size, 44px) * 1.4);
    opacity: 0;
    will-change: transform, opacity;
    animation: hw-ghost-rise var(--dur, 20s) ease-in-out infinite;
    animation-delay: var(--delay, 0s);
}
/* gentle squash-stretch bob so the ghost feels weightless */
.halloween-ghost__inner {
    width: 100%;
    height: 100%;
    animation: hw-ghost-bob 3.4s ease-in-out infinite;
}
.halloween-ghost svg {
    width: 100%;
    height: 100%;
    display: block;
    filter: drop-shadow(0 0 10px rgba(226, 220, 245, 0.5));
}

/* ── Occasional spider abseiling on a silk thread ────────────────── */
.halloween-spider {
    position: absolute;
    top: 0;
    left: var(--left, 50%);
    width: var(--size, 40px);
    will-change: transform;
    animation: hw-spider-drop var(--dur, 26s) ease-in-out infinite;
    animation-delay: var(--delay, 0s);
}
/* The thread and the spider swing TOGETHER, as one pendulum hinged at the top
   of the thread. Swaying the spider on its own left it drifting sideways off a
   thread that stayed put: a 4deg tilt on a 100vh arm moves the spider more than
   60px, so it read as floating beside the web rather than hanging from it. */
.halloween-spider__swing {
    position: relative;
    width: 100%;
    transform-origin: 50% -100vh;
    animation: hw-spider-sway 4.5s ease-in-out infinite;
}
/* the silk thread runs from the top of the page down INTO the spider's head,
   so there is no gap between the end of the thread and the body */
.halloween-spider__thread {
    position: absolute;
    top: calc(-100vh + 26%);
    left: 50%;
    width: 1px;
    height: 100vh;
    background: rgba(226, 220, 245, 0.4);
}
.halloween-spider__body {
    width: 100%;
}
.halloween-spider__body svg { width: 100%; height: auto; display: block; }

/* ── Low purple fog (thicker + more intense) ─────────────────────── */
.halloween-fog {
    position: absolute;
    left: -10%;
    right: -10%;
    bottom: 0;
    height: 140px;
    pointer-events: none;
}
.halloween-fog__band {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    filter: blur(26px);
    will-change: transform;
}
.halloween-fog__band--a {
    background: radial-gradient(62% 95% at 28% 100%, rgba(120, 78, 185, 0.75) 0%, rgba(120, 78, 185, 0) 72%),
                radial-gradient(58% 88% at 74% 100%, rgba(92, 56, 150, 0.7) 0%, rgba(92, 56, 150, 0) 72%);
    opacity: 0.92;
    animation: hw-fog-a 28s ease-in-out infinite;
}
.halloween-fog__band--b {
    background: radial-gradient(60% 92% at 52% 100%, rgba(158, 110, 214, 0.62) 0%, rgba(158, 110, 214, 0) 74%),
                radial-gradient(46% 80% at 90% 100%, rgba(108, 66, 168, 0.55) 0%, rgba(108, 66, 168, 0) 74%);
    opacity: 0.8;
    animation: hw-fog-b 36s ease-in-out infinite;
}
/* a denser base line so the fog reads solid where it meets the page edge */
.halloween-fog::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 70px;
    background: linear-gradient(to top, rgba(102, 62, 158, 0.5) 0%, rgba(102, 62, 158, 0) 100%);
    filter: blur(10px);
}

/* ── Bubbles rising out of the fog ───────────────────────────────── */
.halloween-bubble {
    position: absolute;
    left: var(--left, 50%);
    bottom: 8px;
    width: var(--size, 14px);
    height: var(--size, 14px);
    border-radius: 50%;
    background: var(--bcolor, rgba(150, 110, 200, 0.32));
    box-shadow: inset -1px -1px 3px rgba(60, 30, 90, 0.22),
                inset 2px 2px 4px rgba(255, 255, 255, 0.28);
    opacity: 0;
    will-change: transform, opacity;
    animation: hw-bubble-rise var(--dur, 8s) ease-in infinite;
    animation-delay: var(--delay, 0s);
}

/* ── Skeleton hand clawing up out of the fog (bottom-left) ────────── */
.halloween-skeleton-hand {
    position: absolute;
    left: 4%;
    bottom: -6px;
    width: 128px;
    z-index: 2;
    transform-origin: 50% 100%;
    animation: hw-hand-rise 7s ease-in-out infinite;
    filter: drop-shadow(0 -2px 6px rgba(60, 30, 90, 0.4));
}
.halloween-skeleton-hand svg { width: 100%; height: auto; display: block; }

@media (max-width: 640px) {
    .halloween-skeleton-hand { width: 92px; left: 2%; }
}

/* ── Keyframes ──────────────────────────────────────────────────── */
@keyframes hw-bubble-rise {
    0%   { transform: translate(0, 0) scale(0.6); opacity: 0; }
    14%  { opacity: 0.7; }
    80%  { opacity: 0.6; }
    100% { transform: translate(var(--drift, 0px), calc(var(--rise, 90px) * -1)) scale(1); opacity: 0; }
}

/* hand slowly emerges and sinks back, with a faint claw-clench sway */
@keyframes hw-hand-rise {
    0%, 100% { transform: translateY(14px) rotate(-3deg); }
    50%      { transform: translateY(-6px) rotate(2deg); }
}

@keyframes hw-twinkle {
    0%, 100% { opacity: 0.15; transform: scale(0.85); }
    50%      { opacity: 0.95; transform: scale(1.15); }
}

/* bat crosses the full width; opacity fades in/out at the edges */
@keyframes hw-bat-cross {
    0%   { transform: translateX(-14vw); opacity: 0; }
    6%   { opacity: var(--op, 0.8); }
    94%  { opacity: var(--op, 0.8); }
    100% { transform: translateX(114vw); opacity: 0; }
}
@keyframes hw-bat-cross-rtl {
    0%   { transform: translateX(114vw); opacity: 0; }
    6%   { opacity: var(--op, 0.8); }
    94%  { opacity: var(--op, 0.8); }
    100% { transform: translateX(-14vw); opacity: 0; }
}

@keyframes hw-bat-wave {
    0%, 100% { transform: translateY(calc(var(--amp, 6) * -0.5vh)); }
    50%      { transform: translateY(calc(var(--amp, 6) * 0.5vh)); }
}

@keyframes hw-bat-flap {
    0%, 100% { transform: scaleY(1); }
    50%      { transform: scaleY(0.62); }
}

@keyframes hw-ghost-rise {
    0%   { transform: translate(0, 0); opacity: 0; }
    10%  { opacity: var(--op, 0.35); }
    30%  { transform: translate(calc(var(--drift, 3) * 1vw), -30vh); }
    55%  { transform: translate(calc(var(--drift, 3) * -1vw), -58vh); }
    80%  { transform: translate(calc(var(--drift, 3) * 1vw), -86vh); opacity: var(--op, 0.35); }
    100% { transform: translate(0, -112vh); opacity: 0; }
}

@keyframes hw-ghost-bob {
    0%, 100% { transform: scaleY(1) scaleX(1); }
    50%      { transform: scaleY(1.05) scaleX(0.97); }
}

/* spider spends most of the long cycle parked above the viewport, drops in
   briefly, dangles, then retracts → it reads as an occasional visitor */
@keyframes hw-spider-drop {
    0%   { transform: translateY(-60vh); }
    10%  { transform: translateY(var(--drop, 30vh)); }
    24%  { transform: translateY(calc(var(--drop, 30vh) - 3vh)); }
    38%  { transform: translateY(var(--drop, 30vh)); }
    52%  { transform: translateY(-60vh); }
    100% { transform: translateY(-60vh); }
}

@keyframes hw-spider-sway {
    0%, 100% { transform: rotate(-1.1deg); }
    50%      { transform: rotate(1.1deg); }
}

@keyframes hw-fog-a {
    0%, 100% { transform: translateX(-6%); }
    50%      { transform: translateX(6%); }
}
@keyframes hw-fog-b {
    0%, 100% { transform: translateX(7%); }
    50%      { transform: translateX(-7%); }
}

/* ── Page accents (rendered inline by pages, gated on the active theme) ──
   These sit INSIDE page content (hero cat), not the .halloween-fx overlay. */

/* Witch hat on the cat's head. Percentages map to the cat illustration box.
   Rendered at full opacity (no opacity entrance animation — that could stick
   faint if the tab loads throttled in the background). */
.halloween-cat-hat {
    position: absolute;
    top: 20%;
    left: 21%;
    width: 30%;
    z-index: 21;
    pointer-events: none;
    transform: rotate(10deg);
    filter: drop-shadow(0 4px 5px rgba(0, 0, 0, 0.22));
}

/* Carved jack-o'-lantern on the ground next to the cat, with a flickering glow. */
.halloween-cat-pumpkin {
    position: absolute;
    top: 62%;
    left: -3%;
    width: 30%;
    z-index: 14;
    pointer-events: none;
    filter: drop-shadow(0 5px 7px rgba(0, 0, 0, 0.22)) drop-shadow(0 0 14px rgba(255, 170, 60, 0.55));
    animation: hw-jack-flicker 2.6s ease-in-out infinite;
}
/* candle flicker: nudge the warm glow strength up and down */
@keyframes hw-jack-flicker {
    0%, 100% { filter: drop-shadow(0 5px 7px rgba(0, 0, 0, 0.22)) drop-shadow(0 0 12px rgba(255, 170, 60, 0.45)); }
    45%      { filter: drop-shadow(0 5px 7px rgba(0, 0, 0, 0.22)) drop-shadow(0 0 20px rgba(255, 190, 80, 0.75)); }
    70%      { filter: drop-shadow(0 5px 7px rgba(0, 0, 0, 0.22)) drop-shadow(0 0 14px rgba(255, 170, 60, 0.5)); }
}

/* Small bat tucked onto a card's top-right corner (kept for reuse) */
.halloween-card-bat {
    position: absolute;
    top: -13px;
    right: -8px;
    width: 46px;
    height: 29px;
    z-index: 5;
    pointer-events: none;
    filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.14));
    animation: hw-card-bat-flap 0.5s ease-in-out infinite;
}
@keyframes hw-card-bat-flap {
    0%, 100% { transform: scaleY(1); }
    50%      { transform: scaleY(0.72); }
}

@media (max-width: 640px) {
    .halloween-card-bat { width: 38px; height: 24px; }
}

/* ── Visitor toggle: turn the effects off (low-end machines) ─────── */
.halloween-toggle {
    position: fixed;
    left: 14px;
    bottom: 14px;
    z-index: 60;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px 6px 10px;
    border-radius: 999px;
    background: rgba(26, 16, 48, 0.82);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    border: 1px solid rgba(226, 220, 245, 0.18);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
    font-family: inherit;
    font-size: 12px;
    font-weight: 600;
    color: #f0e9ff;
    cursor: pointer;
    opacity: 0.75;
    transition: opacity 0.2s ease, transform 0.2s ease;
}
.halloween-toggle:hover {
    opacity: 1;
    transform: translateY(-1px);
}
.halloween-toggle__icon {
    font-size: 14px;
    line-height: 1;
}

@media (max-width: 640px) {
    .halloween-toggle { left: 10px; bottom: 10px; padding: 7px; }
    .halloween-toggle__label { display: none; }
}

/* ── iPhone Safari: its floating bottom toolbar sits OVER the page, so things
   pinned to the bottom (skeleton hand, bubbles, the Spooky button) hid behind
   it. Lift them on iOS phones; the fog grows by the same amount so it still
   reaches the screen edge under the toolbar. ───────────────────────────── */
@supports (-webkit-touch-callout: none) {
    @media (max-width: 767px) {
        .halloween-fx { --hw-ios-lift: calc(58px + env(safe-area-inset-bottom, 0px)); }
        .halloween-fog { height: calc(140px + var(--hw-ios-lift)); }
        .halloween-skeleton-hand { bottom: calc(var(--hw-ios-lift) - 6px); }
        .halloween-bubble { bottom: calc(var(--hw-ios-lift) + 8px); }
        .halloween-toggle { bottom: calc(68px + env(safe-area-inset-bottom, 0px)); }
    }
}

/* ── Respect reduced-motion: keep the look, drop the movement ───── */
@media (prefers-reduced-motion: reduce) {
    .halloween-fx *,
    .halloween-moon,
    .halloween-moon-core,
    .halloween-cat-hat,
    .halloween-cat-pumpkin,
    .halloween-skeleton-hand,
    .halloween-card-bat {
        animation: none !important;
    }

    /* keep a few bats visible, just static and parked mid-screen; hide spiders
       and the rising bubbles */
    .halloween-bat { opacity: var(--op, 0.5); left: auto; right: 30vw; }
    .halloween-spider { display: none; }
    .halloween-bubble { display: none; }
    .halloween-ghost { opacity: var(--op, 0.3); bottom: auto; top: 40vh; }
}

/* ── Halloween site accents (pricing link, pricing page, banner) ── */
/* Rendered by src/components/ThemeElements/HalloweenSiteAccents.tsx, only
   while the Halloween theme is on. The banner themes (Midnight pumpkin etc.)
   can be used under any site theme, so their CSS is in src/app/globals.css. */

/* Still jack-o'-lantern right next to the header "Pricing" word; only its
   candle light flickers. Sized in em so it follows the link's font size
   (desktop and phone menu): the pumpkin body, about three quarters of the
   drawing, is as tall as the word, and the drawing is lifted a little because
   the stem sits above the body, so the body is centred on the text. */
.hw-pricing-tag {
    display: inline-block;
    flex-shrink: 0;
    align-self: center;
    width: 1.42em;
    height: 1.28em;
    position: relative;
    top: -0.1em;
    pointer-events: none;
    animation: hw-pumpkin-glow 2.6s ease-in-out infinite;
}

/* "HALLOWEEN -15%" tag next to a discounted total */
.hw-deal-tag {
    display: inline-flex;
    align-items: stretch;
    overflow: hidden;
    border-radius: 6px;
    border: 1px solid rgba(255, 117, 24, 0.6);
    font-size: 10px;
    font-weight: 800;
    line-height: 1;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    white-space: nowrap;
}
.hw-deal-tag__k { padding: 3px 6px; background: #1a1030; color: #ffb347; }
.hw-deal-tag__pct { padding: 3px 6px; background: #ff7518; color: #1a1030; }

/* Discounted prices: pumpkin orange with a soft candle glow behind them
   (the shop plan cards, the selection bar, price tables). */
.cp-deal-price {
    color: #e8650a !important;
    text-shadow: 0 0 10px rgba(255, 140, 40, 0.25);
}
.dark .cp-deal-price {
    color: #ff8a2b !important;
    text-shadow: 0 0 12px rgba(255, 140, 40, 0.45);
}
/* The big total on the pricing page price card: gold fading to pumpkin orange */
.cp-deal-price.cp-summary-price {
    background-image: linear-gradient(90deg, #ffd166, #ff7518) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    color: transparent !important;
    -webkit-text-fill-color: transparent;
    text-shadow: none;
}
.cp-was-price {
    text-decoration-color: rgba(255, 117, 24, 0.85) !important;
    text-decoration-thickness: 1.5px;
}

/* "HALLOWEEN SALE" pill wearing a witch hat, above the pricing page heading */
.hw-pricing-kicker-wrap {
    display: flex;
    justify-content: center;
    margin-bottom: 22px;
}
.hw-pricing-kicker {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 20px 6px 8px;
    border-radius: 999px;
    background: #1a1030;
    border: 1.5px solid rgba(255, 117, 24, 0.65);
    box-shadow: 0 0 18px rgba(126, 79, 178, 0.35);
    color: #fff;
    font-size: 14px;
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    white-space: nowrap;
}
.hw-pricing-kicker__hat { width: 30px; height: 25px; margin-top: -10px; flex-shrink: 0; }
.hw-pricing-kicker__sale { color: #ff7518; }

/* Two jack-o'-lanterns sitting on the top-right corner of the product bar */
.hw-corner-pumpkins {
    position: absolute;
    top: -42px;
    right: -10px;
    z-index: 1;
    display: flex;
    align-items: flex-end;
    pointer-events: none;
}
.hw-corner-pumpkins svg { display: block; animation: hw-pumpkin-glow 2.6s ease-in-out infinite; }
.hw-corner-pumpkins__small { width: 36px; height: 32.4px; margin-right: -10px; margin-bottom: 1px; animation-delay: -1.1s !important; }
.hw-corner-pumpkins__big { width: 54px; height: 48.6px; }

@media (max-width: 640px) {
    .hw-pricing-kicker { font-size: 13px; letter-spacing: 0.12em; }
    .hw-corner-pumpkins { transform: scale(0.8); transform-origin: top right; }
}

/* Halloween sale is on (Admin > Settings): night-sky product selector. The
   stars come from .banner-theme__stars (globals.css). Dark in both colour
   modes, so the tab text is light here. */
.hw-sale-bar {
    border-color: rgba(255, 117, 24, 0.4) !important;
    background: linear-gradient(180deg, #1f1438, #150d26);
    box-shadow: 0 0 26px -6px rgba(255, 117, 24, 0.35);
}
.hw-sale-tab:hover { background: rgba(255, 255, 255, 0.05); }
.hw-sale-tab--on,
.hw-sale-tab--on:hover {
    background: rgba(255, 117, 24, 0.1);
    box-shadow: inset 0 0 0 1px rgba(255, 117, 24, 0.45);
}
.hw-sale-bar .hw-tab-name { color: #e2dcf5 !important; }
.hw-sale-bar .hw-sale-tab--on .hw-tab-name { color: #fff !important; }
.hw-sale-bar .hw-tab-from { color: #a99bc9 !important; }

/* ...and the price card gets an orange border with a soft glow */
.hw-sale-card {
    border-color: rgba(255, 117, 24, 0.55) !important;
    box-shadow: 0 0 0 1px rgba(255, 117, 24, 0.15), 0 12px 36px -14px rgba(255, 117, 24, 0.45) !important;
}

@keyframes hw-pumpkin-glow {
    0%, 100% { filter: drop-shadow(0 0 3px rgba(255, 170, 60, 0.45)); }
    45%      { filter: drop-shadow(0 0 7px rgba(255, 190, 80, 0.85)); }
    70%      { filter: drop-shadow(0 0 4px rgba(255, 170, 60, 0.55)); }
}

/* Visitor switched the effects off: hide the decorations before the page is
   interactive (the components also render nothing). The HALLOWEEN SALE sign
   stays: it tells the visitor about the sale. */
[data-halloween-off] .hw-pricing-tag,
[data-halloween-off] .hw-corner-pumpkins { display: none !important; }

@media (prefers-reduced-motion: reduce) {
    .hw-pricing-tag,
    .hw-corner-pumpkins svg { animation: none !important; }
}