/* DropShark Black Friday 2026 (includes/black-friday-theme.php adds this to every page until it ends).
   Decorations are drawn by black-friday.js. They never take clicks and stay below dialogs (z-index 100+).
   Written for both themes here: this file is not run through the dark-mode generator. */

/* ── Sale banner (only while a sale runs) ──────────────────── */
.dsbf-sale{position:relative;z-index:81;width:100%;overflow:hidden;background:#060607;background:radial-gradient(90% 260% at 12% 50%,rgba(247,207,85,.20),transparent 52%),radial-gradient(70% 240% at 92% 50%,rgba(255,45,85,.16),transparent 55%),linear-gradient(90deg,#050506,#141317 50%,#050506);border-bottom:1px solid rgba(247,207,85,.45);color:#f4efe2;font-family:'Sora','Inter',system-ui,sans-serif}
.dsbf-sale::after{content:"";position:absolute;inset:0;background:linear-gradient(105deg,transparent 35%,rgba(255,236,170,.16) 50%,transparent 65%);transform:translateX(-100%);animation:dsbfSweep 6s ease-in-out 1s infinite;pointer-events:none}
@keyframes dsbfSweep{0%{transform:translateX(-100%)}40%,100%{transform:translateX(100%)}}
.dsbf-sale-inner{position:relative;z-index:1;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:46px;box-sizing:border-box}
.dsbf-sale-badge{display:inline-flex;align-items:center;gap:6px;padding:4px 10px 4px 8px;border-radius:6px;background:linear-gradient(135deg,#fff1b8,#f2c14e 45%,#b07d12);color:#0d0d10;font-size:11px;font-weight:900;letter-spacing:.14em;text-transform:uppercase;white-space:nowrap;box-shadow:0 0 18px rgba(247,207,85,.35)}
.dsbf-sale-badge svg{width:13px;height:13px;flex:0 0 auto}
.dsbf-sale-text{margin:0;display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;justify-content:center;font-size:13.5px;line-height:1.35;font-weight:600}
.dsbf-sale-text strong{color:#ffe08a;font-weight:800}
.dsbf-sale-clock{font-size:11.5px;color:#bdb6a6;font-weight:600;white-space:nowrap}
.dsbf-sale-clock b{color:#fff;font-variant-numeric:tabular-nums;font-weight:800}
.dsbf-sale-cta{display:inline-flex;align-items:center;justify-content:center;padding:7px 15px;border-radius:999px;background:linear-gradient(180deg,#ffe08a,#e2a92a);color:#0d0d10!important;font-size:12px;font-weight:800;text-decoration:none!important;white-space:nowrap;box-shadow:0 0 0 1px rgba(255,241,184,.5) inset,0 6px 20px rgba(226,169,42,.35);transition:transform .2s ease,box-shadow .2s ease}
.dsbf-sale-cta:hover{transform:translateY(-1px);box-shadow:0 0 0 1px rgba(255,241,184,.7) inset,0 10px 26px rgba(226,169,42,.5)}
.dsbf-sale-close{position:absolute;right:10px;top:50%;z-index:2;transform:translateY(-50%);width:30px;height:30px;border:0;border-radius:999px;background:transparent;color:#9d978a;font:400 22px/1 system-ui,sans-serif;cursor:pointer;padding:0}
.dsbf-sale-close:hover,.dsbf-sale-close:focus-visible{background:rgba(255,255,255,.08);color:#fff}
.dsbf-sale-break{display:none}
@media(max-width:640px){
  .dsbf-sale-inner{padding:6px 38px 7px 10px;gap:5px 8px}
  .dsbf-sale-badge{font-size:9.5px;padding:3px 7px}
  .dsbf-sale-text{font-size:12px;gap:6px;flex-wrap:nowrap;white-space:nowrap}
  .dsbf-sale-more{display:none}
  .dsbf-sale-break{display:block;flex-basis:100%;height:0}
  .dsbf-sale-clock{font-size:11px}
  .dsbf-sale-cta{padding:5px 12px;font-size:11.5px}
}

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

/* Price tags on gold strings, swinging just under the site header (black-friday.js sets --dsbf-top). */
.dsbf-hang{position:fixed;top:var(--dsbf-top,0px);z-index:90;width:56px;contain:layout style}
.dsbf-hang-black{right:30px}
.dsbf-hang-gold{right:96px;width:42px}
.dsbf-swing{transform-origin:50% 0;animation:dsbfSwing 5.2s ease-in-out infinite;will-change:transform}
.dsbf-hang-gold .dsbf-swing{animation-duration:4.1s;animation-delay:-1.3s}
.dsbf-string{display:block;width:1.4px;height:var(--len,30px);margin:0 auto -6px;background:linear-gradient(180deg,#9b6c0e,#f7cf55);box-shadow:.6px 0 0 rgba(255,255,255,.5)}
.dsbf-tag{width:100%;height:auto;filter:drop-shadow(0 6px 8px rgba(10,8,4,.28))}
.dsbf-shine{transform-box:view-box;transform-origin:32px 48px;animation:dsbfShine 5.5s ease-in-out infinite}
.dsbf-shine-late{animation-delay:-2.2s}
@keyframes dsbfSwing{0%,100%{transform:rotate(-5deg)}50%{transform:rotate(5.5deg)}}
@keyframes dsbfShine{0%,48%{transform:translateX(-10px) rotate(18deg)}80%,100%{transform:translateX(110px) rotate(18deg)}}
/* Dashboard and tools: one small tag in the corner, clear of the page's own buttons. */
html[data-dsbf-scope="private"] .dsbf-hang-black{right:18px;width:40px}
html[data-dsbf-scope="private"] .dsbf-hang-gold{display:none}
@media(max-width:640px){.dsbf-hang-black{right:12px;width:38px}.dsbf-hang-gold{right:58px;width:30px}html[data-dsbf-scope="private"] .dsbf-hang{display:none}}

/* Black and gold pennants sagging across the top-left corner, public pages only. */
.dsbf-bunting{position:fixed;left:0;top:var(--dsbf-top,0px);z-index:90;width:230px;height:76px;contain:strict}
.dsbf-bunting svg{width:100%;height:100%}
.dsbf-flag{transform-box:fill-box;transform-origin:50% 0;animation:dsbfFlag 3.6s ease-in-out infinite alternate}
@keyframes dsbfFlag{from{transform:rotate(-5deg)}to{transform:rotate(5deg)}}
html[data-dsbf-scope="private"] .dsbf-bunting{display:none}
@media(max-width:640px){.dsbf-bunting{width:150px;height:50px}}

/* The gift pile in the bottom-left corner, on wide public pages only, in the empty margin. */
.dsbf-gifts{position:fixed;left:8px;bottom:4px;z-index:50;width:150px;height:113px;filter:drop-shadow(0 8px 10px rgba(10,8,4,.25));contain:strict}
.dsbf-gifts svg{width:100%;height:100%}
.dsbf-spark{transform-box:fill-box;transform-origin:center;animation:dsbfTwinkle 2.4s ease-in-out infinite}
.dsbf-gifts-glow{animation:dsbfGlow 3.2s ease-in-out infinite}
@keyframes dsbfTwinkle{0%,100%{opacity:.15;transform:scale(.4) rotate(0)}50%{opacity:1;transform:scale(1) rotate(45deg)}}
@keyframes dsbfGlow{0%,100%{opacity:.6}50%{opacity:1}}
@media(max-width:1439px){.dsbf-gifts{display:none}}
html[data-dsbf-scope="private"] .dsbf-gifts{display:none}

/* Confetti: each piece falls, drifts sideways and flips like paper. */
.dsbf-confetti{position:fixed;inset:0;z-index:95;overflow:hidden;contain:strict}
.dsbf-bit{position:absolute;top:-24px;border-radius:1.5px;opacity:0;will-change:transform;
  animation-name:dsbfFall,dsbfFlip;animation-timing-function:cubic-bezier(.3,.1,.6,1),ease-in-out;animation-iteration-count:1,infinite;animation-fill-mode:both,none}
.dsbf-bit-round{border-radius:50%}
@keyframes dsbfFall{0%{opacity:0;transform:translate3d(0,0,0) rotate(0)}6%{opacity:1}85%{opacity:1}100%{opacity:0;transform:translate3d(var(--dx,0px),108vh,0) rotate(var(--spin,540deg))}}
/* The flip runs on the same element: scale on one axis reads as paper turning over. */
@keyframes dsbfFlip{0%,100%{scale:1 1}50%{scale:1 -.25}}

/* ── Black Friday night: the dark app theme gets its own scene ──────────
   Gold spotlights sweeping up behind the page, gold glitter and a neon sign. Only on app pages in dark
   mode (light pages keep the daytime decorations). */
.dsbf-night{display:none}
html[data-ds-theme="dark"][data-dsbf-scope="private"]{background:#0b101b}
html[data-ds-theme="dark"][data-dsbf-scope="private"] :is(body,.dash-root,.dash-main,main.dst-page){background:transparent!important}
html[data-ds-theme="dark"][data-dsbf-scope="private"] .dsbf-night{display:block;position:fixed;inset:0;z-index:-1;overflow:hidden;contain:strict}
html[data-ds-theme="dark"] .dsbf-night-haze{position:absolute;inset:0;background:
  radial-gradient(40% 32% at 94% 4%,rgba(247,207,85,.20),transparent 70%),
  radial-gradient(46% 34% at 4% 102%,rgba(255,45,85,.16),transparent 70%),
  radial-gradient(50% 36% at 70% 108%,rgba(247,207,85,.12),transparent 70%)}
/* The cone is clipped on an inner layer so the blur (applied after clipping) can soften its edges. */
html[data-ds-theme="dark"] .dsbf-beam{position:absolute;bottom:-12vh;width:46vw;height:130vh;transform-origin:50% 100%;will-change:transform;
  filter:blur(18px);animation:dsbfBeam 16s ease-in-out infinite alternate}
html[data-ds-theme="dark"] .dsbf-beam::before{content:"";position:absolute;inset:0;
  background:linear-gradient(0deg,rgba(255,222,130,.24),rgba(255,222,130,.07) 55%,transparent 88%);clip-path:polygon(46% 100%,54% 100%,100% 0,0 0)}
html[data-ds-theme="dark"] .dsbf-beam-left{left:-6vw;--from:-24deg;--to:14deg}
html[data-ds-theme="dark"] .dsbf-beam-right{right:-6vw;--from:22deg;--to:-12deg;animation-duration:13s;animation-delay:-5s}
@keyframes dsbfBeam{from{transform:rotate(var(--from))}to{transform:rotate(var(--to))}}
html[data-ds-theme="dark"] .dsbf-glitter{position:absolute;inset:0}
html[data-ds-theme="dark"] .dsbf-glint{position:absolute;background:#ffe08a;clip-path:polygon(50% 0,60% 40%,100% 50%,60% 60%,50% 100%,40% 60%,0 50%,40% 40%);
  filter:drop-shadow(0 0 4px rgba(255,214,100,.9));animation:dsbfGlint 4s ease-in-out infinite}
@keyframes dsbfGlint{0%,100%{opacity:.1;transform:scale(.5)}50%{opacity:1;transform:scale(1) rotate(45deg)}}

/* Neon sign beside the dashboard greeting (tool pages run content to the edge, so they skip it). */
html[data-ds-theme="dark"] .dsbf-neon{position:absolute;right:92px;top:calc(var(--dsbf-top,120px) + 18px);display:flex;flex-direction:column;align-items:center;gap:1px;
  padding:9px 16px 8px;border:2px solid #ff4d7d;border-radius:12px;font-family:'Sora','Inter',system-ui,sans-serif;font-weight:800;line-height:1;text-transform:uppercase;
  box-shadow:0 0 6px #ff2d55,0 0 18px rgba(255,45,85,.6),inset 0 0 10px rgba(255,45,85,.45);transform:rotate(-4deg);animation:dsbfNeonBox 7s linear infinite}
html[data-ds-theme="dark"] .dsbf-neon-a{font-size:21px;letter-spacing:.16em;color:#fff3f6;text-shadow:0 0 4px #fff,0 0 10px #ff2d55,0 0 22px #ff2d55,0 0 40px rgba(255,45,85,.7);animation:dsbfNeonFlicker 7s linear infinite}
html[data-ds-theme="dark"] .dsbf-neon-b{font-size:13px;letter-spacing:.42em;margin-right:-.42em;color:#fff6d8;text-shadow:0 0 4px #fff3c4,0 0 10px #f7cf55,0 0 22px #f2b52a}
@keyframes dsbfNeonFlicker{0%,18%,20.5%,22%,62%,64.5%,100%{opacity:1}19%,21.5%,63%{opacity:.35}}
@keyframes dsbfNeonBox{0%,18%,20.5%,22%,100%{border-color:#ff4d7d}19%,21.5%{border-color:rgba(255,77,125,.4)}}
html[data-ds-theme="dark"]:not(:has(.dash-root)) .dsbf-neon{display:none}
@media(max-width:900px){html[data-ds-theme="dark"][data-dsbf-scope="private"] .dsbf-neon{display:none}}

/* Dark mode: the black tag gets a gold glow so it stands off the dark page. */
html[data-ds-theme="dark"] .dsbf-tag{filter:drop-shadow(0 0 6px rgba(247,207,85,.45)) drop-shadow(0 6px 8px rgba(0,0,0,.5))}

@media(prefers-reduced-motion:reduce){
  .dsbf-swing,.dsbf-shine,.dsbf-flag,.dsbf-spark,.dsbf-gifts-glow,.dsbf-beam,.dsbf-glint,.dsbf-neon,.dsbf-neon-a,.dsbf-sale::after{animation:none!important}
  .dsbf-confetti{display:none!important}
}
@media print{.dsbf-sale,.dsbf-deco{display:none!important}}