/* DropShark Halloween 2026 (includes/halloween-theme.php adds this to every page until the sale ends).
   Decorations are drawn by halloween.js. They never take clicks and stay below dialogs (z-index 100+). */

/* ── Sale banner ───────────────────────────────────────── */
.dsh-sale{position:relative;z-index:81;width:100%;background:#0d0b10;background:radial-gradient(120% 220% at 14% 50%,rgba(255,126,26,.22),transparent 46%),linear-gradient(90deg,#0b0a0e 0%,#1a110b 50%,#0b0a0e 100%);border-bottom:1px solid rgba(249,115,22,.38);color:#f3e7da;font-family:'Sora','Inter',system-ui,sans-serif;box-shadow:inset 0 -12px 22px -18px rgba(255,140,40,.55)}
.dsh-sale-inner{max-width:1180px;margin:0 auto;padding:8px 46px 8px 16px;display:flex;align-items:center;justify-content:center;gap:10px 16px;flex-wrap:wrap;min-height:44px;box-sizing:border-box}
.dsh-sale-lantern{display:inline-flex;flex:0 0 auto;filter:drop-shadow(0 0 6px rgba(255,150,40,.65));animation:dshLanternGlow 2.6s ease-in-out infinite}
.dsh-sale-lantern svg{display:block;width:30px;height:27px}
.dsh-sale-text{margin:0;display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;justify-content:center;font-size:13px;line-height:1.35;letter-spacing:.01em}
.dsh-sale-text strong{color:#ff9a3c;font-weight:800;text-transform:uppercase;letter-spacing:.12em;font-size:11.5px;text-shadow:0 0 12px rgba(255,140,40,.45)}
.dsh-sale-text span{color:#f3e7da;font-weight:600}
.dsh-sale-clock{font-size:11.5px;color:#cbb8a6;font-weight:600;white-space:nowrap}
.dsh-sale-clock b{color:#fff3e6;font-variant-numeric:tabular-nums;font-weight:800}
.dsh-sale-cta{display:inline-flex;align-items:center;justify-content:center;padding:7px 14px;border-radius:999px;background:linear-gradient(180deg,#fb923c,#ea580c);color:#1a0d04!important;font-size:12px;font-weight:800;text-decoration:none!important;white-space:nowrap;box-shadow:0 0 0 1px rgba(255,190,120,.35) inset,0 6px 18px rgba(234,88,12,.35);transition:transform .2s ease,box-shadow .2s ease}
.dsh-sale-cta:hover{transform:translateY(-1px);box-shadow:0 0 0 1px rgba(255,210,150,.5) inset,0 10px 24px rgba(234,88,12,.45)}
.dsh-sale-close{position:absolute;right:10px;top:50%;transform:translateY(-50%);width:30px;height:30px;border:0;border-radius:999px;background:transparent;color:#a8968a;font:400 22px/1 system-ui,sans-serif;cursor:pointer;padding:0}
.dsh-sale-close:hover,.dsh-sale-close:focus-visible{background:rgba(255,255,255,.08);color:#fff}
.dsh-sale-break{display:none}
@keyframes dshLanternGlow{0%,100%{filter:drop-shadow(0 0 5px rgba(255,150,40,.55))}45%{filter:drop-shadow(0 0 9px rgba(255,170,60,.85))}60%{filter:drop-shadow(0 0 4px rgba(255,140,30,.5))}}
/* Phones: two lines, the offer on top and the countdown with the button underneath. */
@media(max-width:640px){
  .dsh-sale-inner{padding:6px 38px 7px 10px;gap:5px 8px}
  .dsh-sale-lantern svg{width:22px;height:20px}
  .dsh-sale-text{font-size:12px;gap:6px;flex-wrap:nowrap;white-space:nowrap}
  .dsh-sale-text strong{font-size:10px;letter-spacing:.1em}
  .dsh-sale-more{display:none}
  .dsh-sale-break{display:block;flex-basis:100%;height:0}
  .dsh-sale-clock{font-size:11px}
  .dsh-sale-cta{padding:5px 12px;font-size:11.5px}
}

/* ── Decoration layer ──────────────────────────────────── */
.dsh-deco,.dsh-deco *{pointer-events:none!important;user-select:none;-webkit-user-select:none}
.dsh-deco svg{display:block;overflow:visible;max-width:none}

/* Cobwebs spun in the corners just under the site header, so the logo, menu and buttons stay clear.
   halloween.js sets --dsh-top to the bottom of the header (and of the banners above it). */
.dsh-web{position:fixed;top:var(--dsh-top,0px);z-index:90;width:140px;height:140px;opacity:.92}
.dsh-web svg{width:100%;height:100%}
.dsh-web-left{left:0}
.dsh-web-right{right:0;width:160px;height:160px;transform:scaleX(-1)}
/* Dashboard and tools: the left corner holds the sidebar and page titles. */
html[data-dsh-scope="private"] .dsh-web-left{display:none}
html[data-dsh-scope="private"] .dsh-web-right{width:120px;height:120px}
@media(max-width:640px){.dsh-web-left{width:64px;height:64px}.dsh-web-right{width:78px;height:78px}html[data-dsh-scope="private"] .dsh-web{display:none}}

/* A spider that lowers itself from the right-hand web on a silk thread, then climbs back.
   The box starts under the header and clips the thread, so it never crosses the header. */
.dsh-spider{position:fixed;top:var(--dsh-top,0px);right:28px;z-index:90;width:40px;height:250px;overflow:hidden}
.dsh-spider-drop{position:absolute;left:0;top:0;width:40px;height:46px;transform:translateY(-60px);animation:dshSpiderDrop 48s cubic-bezier(.45,.05,.4,1) 3s infinite}
.dsh-spider-thread{position:absolute;left:19.6px;bottom:40px;width:1px;height:640px;background:linear-gradient(180deg,rgba(110,116,128,0) 0%,rgba(110,116,128,.55) 55%,rgba(150,156,168,.75) 100%);box-shadow:1px 0 0 rgba(255,255,255,.45)}
.dsh-spider-body{position:absolute;left:0;top:0;width:40px;height:46px;transform-origin:20px 6px;animation:dshSpiderSway 4.2s ease-in-out infinite alternate}
.dsh-spider-legs{transform-box:view-box;transform-origin:20px 25px;animation:dshSpiderLegs 9s ease-in-out infinite}
html[data-dsh-scope="private"] .dsh-spider-drop{animation-name:dshSpiderDropShort}
@keyframes dshSpiderDrop{0%,6%{transform:translateY(-60px)}20%{transform:translateY(170px)}26%{transform:translateY(156px)}33%{transform:translateY(176px)}44%{transform:translateY(164px)}55%{transform:translateY(181px)}66%{transform:translateY(168px)}80%,100%{transform:translateY(-60px)}}
@keyframes dshSpiderDropShort{0%,6%{transform:translateY(-60px)}20%{transform:translateY(58px)}28%{transform:translateY(50px)}40%{transform:translateY(64px)}52%{transform:translateY(54px)}66%{transform:translateY(60px)}80%,100%{transform:translateY(-60px)}}
@keyframes dshSpiderSway{from{transform:rotate(-4deg)}to{transform:rotate(4.5deg)}}
@keyframes dshSpiderLegs{0%,62%,70%,100%{transform:scale(1)}65%{transform:scale(1.06,.96)}67%{transform:scale(.97,1.03)}}
@media(max-width:640px){.dsh-spider{right:14px;transform:scale(.82);transform-origin:top right}.dsh-spider-drop{animation-name:dshSpiderDropShort}html[data-dsh-scope="private"] .dsh-spider{display:none}}

/* Bats, flown across the upper screen by halloween.js now and then. */
.dsh-bat{position:fixed;left:0;top:0;z-index:95;width:64px;height:32px;will-change:transform}
.dsh-bat svg{width:100%;height:100%}
.dsh-bat-wing{transform-box:view-box;animation:dshBatFlap .3s ease-in-out infinite alternate}
.dsh-bat-wing-left{transform-origin:45px 22px}
.dsh-bat-wing-right{transform-origin:55px 22px}
@keyframes dshBatFlap{from{transform:scaleY(1)}to{transform:scaleY(-.42) translateY(2px)}}

/* A lit jack-o'-lantern with a small pumpkin in the bottom-left corner, on wide public pages only,
   where it sits in the empty margin instead of over content (phones get the banner's pumpkin). */
.dsh-lantern{position:fixed;left:10px;bottom:6px;z-index:50;width:124px;height:93px;filter:drop-shadow(0 8px 10px rgba(30,12,2,.28))}
@media(max-width:1439px){.dsh-lantern{display:none}}
html[data-dsh-scope="private"] .dsh-lantern{display:none}
.dsh-lantern svg{width:100%;height:100%}
.dsh-lantern-glow{animation:dshFlicker 2.3s steps(1,end) infinite}
.dsh-lantern-holes{animation:dshFlame 3.1s ease-in-out infinite}
.dsh-lantern-halo{animation:dshHalo 2.9s ease-in-out infinite}
@keyframes dshFlicker{0%{opacity:.82}9%{opacity:1}17%{opacity:.88}26%{opacity:.97}38%{opacity:.78}46%{opacity:.95}57%{opacity:.86}69%{opacity:1}78%{opacity:.84}88%{opacity:.93}100%{opacity:.82}}
@keyframes dshFlame{0%,100%{filter:brightness(1)}30%{filter:brightness(1.12)}52%{filter:brightness(.9)}74%{filter:brightness(1.06)}}
@keyframes dshHalo{0%,100%{opacity:.55;transform:scale(1)}40%{opacity:.75;transform:scale(1.04)}65%{opacity:.5;transform:scale(.98)}}
.dsh-lantern-halo{transform-box:fill-box;transform-origin:center}

@media(prefers-reduced-motion:reduce){
  .dsh-sale-lantern,.dsh-spider-body,.dsh-spider-legs,.dsh-lantern-glow,.dsh-lantern-holes,.dsh-lantern-halo,.dsh-bat-wing{animation:none!important}
  .dsh-spider-drop{animation:none!important;transform:translateY(120px)}
  .dsh-bat{display:none!important}
}
@media print{.dsh-sale,.dsh-deco{display:none!important}}