/* ═══════════════════════════════════════════════════════════════════
   LI GAMING BD — OFFER CATEGORIES (campaigns)
   · LIMITED-TIME badge on every offer card / popup
   · 3D split-flap countdown (DAYS · HRS · MIN · SEC)
   · category colour theme for the offer cards
   · "Offers" popup + active-category banner
   Loaded LAST on index.html. Theme variables are set inline per card:
   --cp-a  --cp-b  --cp-acc  --cp-edge  --cp-ring  --cp-glow
   ═══════════════════════════════════════════════════════════════════ */

@keyframes cp-pulse { 0% { box-shadow: 0 0 0 0 rgba(255,77,94,.65); } 70% { box-shadow: 0 0 0 6px rgba(255,77,94,0); } 100% { box-shadow: 0 0 0 0 rgba(255,77,94,0); } }
@keyframes cp-flip { from { opacity: 0; transform: translateY(-85%); } to { opacity: 1; transform: none; } }
@keyframes cp-urgent-glow { 0%, 100% { box-shadow: 0 3px 0 #5a0d19, 0 6px 10px rgba(0,0,0,.55), 0 0 0 rgba(255,60,80,0), inset 0 1px 0 rgba(255,255,255,.35), inset 0 -6px 8px rgba(0,0,0,.35); } 50% { box-shadow: 0 3px 0 #5a0d19, 0 6px 10px rgba(0,0,0,.55), 0 0 14px rgba(255,60,80,.75), inset 0 1px 0 rgba(255,255,255,.35), inset 0 -6px 8px rgba(0,0,0,.35); } }
@keyframes cp-pop-in { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

/* ───────────── LIMITED-TIME BADGE (inside the picture) ───────────── */
.cp-badge {
  position: absolute; top: 6px; left: 50%; transform: translateX(-50%); z-index: 7;
  display: inline-flex; align-items: center; gap: 5px; box-sizing: border-box;
  max-width: calc(100% - 12px); height: 19px; padding: 0 9px 0 7px; border-radius: 999px;
  overflow: hidden; white-space: nowrap; pointer-events: none;
  background: linear-gradient(180deg, rgba(30,25,10,.94), rgba(9,7,3,.94));
  border: 1px solid var(--cp-ring, rgba(247,189,22,.5));
  box-shadow: 0 2px 0 rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.18);
}
.cp-badge::after {
  content: ""; position: absolute; top: 0; bottom: 0; left: -40%; width: 30%; pointer-events: none;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.28), transparent); transform: skewX(-20deg);
  animation: cp-shine 4.5s ease-in-out infinite;
}
@keyframes cp-shine { 0%, 60% { left: -40%; } 100% { left: 130%; } }
.cp-badge .cp-dot { flex: 0 0 5px; width: 5px; height: 5px; border-radius: 50%; background: #ff4d5e; animation: cp-pulse 1.6s ease-out infinite; }
.cp-badge > span {
  min-width: 0; overflow: hidden; text-overflow: ellipsis;
  font: 800 clamp(6.5px, 3.6cqw, 9.5px)/1 'Sora', 'Inter', system-ui, sans-serif; letter-spacing: .05em; text-transform: uppercase;
  background: linear-gradient(180deg, #fff 0%, var(--cp-acc, #f7bd16) 100%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.om-hero { position: relative; }
.om-hero .cp-badge { top: 12px; height: 26px; padding: 0 13px 0 10px; gap: 7px; }
.om-hero .cp-badge .cp-dot { flex-basis: 7px; width: 7px; height: 7px; }
.om-hero .cp-badge > span { font-size: 11.5px; }

/* ───────────── COUNTDOWN STRIP ─────────────
   A slim glass strip that sits BELOW the picture (never over it), so the artwork and
   the cash / price details printed on the image are always fully visible. */
@keyframes cp-urgent-text { 0%, 100% { text-shadow: 0 0 6px rgba(255,70,90,.55), 0 1px 0 rgba(0,0,0,.6); } 50% { text-shadow: 0 0 14px rgba(255,70,90,1), 0 1px 0 rgba(0,0,0,.6); } }
.cp-timer {
  position: relative; display: flex; align-items: stretch; justify-content: center; box-sizing: border-box;
  width: 100%; margin: 7px 0 0; padding: 5px 2px 4px; border-radius: 12px; overflow: hidden;
  container-type: inline-size; pointer-events: none;
  background:
    linear-gradient(180deg, rgba(255,255,255,.1) 0%, rgba(255,255,255,0) 55%),
    linear-gradient(180deg, rgba(6,10,22,.62), rgba(3,6,14,.78));
  box-shadow: inset 0 0 0 1px var(--cp-ring, rgba(247,189,22,.45)), inset 0 -2px 6px rgba(0,0,0,.35), 0 1px 0 rgba(255,255,255,.08);
}
.cp-timer::before { /* accent hairline along the top edge */
  content: ""; position: absolute; left: 12%; right: 12%; top: 0; height: 2px; border-radius: 0 0 3px 3px; pointer-events: none;
  background: linear-gradient(90deg, transparent, var(--cp-acc, #f7bd16), transparent); opacity: .85;
}
.cp-t {
  position: relative; flex: 1 1 0; min-width: 0; box-sizing: border-box; padding: 1px 0; text-align: center;
  background: none; border: 0; box-shadow: none; overflow: visible; max-width: none;
}
.cp-t + .cp-t::before { /* thin divider between units */
  content: ""; position: absolute; left: 0; top: 14%; bottom: 14%; width: 1px; background: linear-gradient(180deg, transparent, rgba(255,255,255,.2), transparent);
}
.cp-n {
  display: block; font: 900 clamp(12px, 8.2cqw, 19px)/1.1 'Sora', 'Outfit', system-ui, sans-serif; font-style: normal;
  font-variant-numeric: tabular-nums; color: #fff;
  text-shadow: 0 0 8px var(--cp-glow, rgba(247,189,22,.7)), 0 1px 0 rgba(0,0,0,.6);
}
.cp-n.cp-flip { animation: cp-flip .55s cubic-bezier(.22,1,.36,1) both; }
.cp-t em {
  display: block; margin-top: 2px; font: 800 clamp(5.5px, 3.6cqw, 8px)/1 'Inter', system-ui, sans-serif; font-style: normal;
  letter-spacing: .1em; color: var(--cp-acc, #f7bd16);
}
.cp-timer.cp-urgent { box-shadow: inset 0 0 0 1px rgba(255,90,110,.7), inset 0 -2px 6px rgba(0,0,0,.35), 0 1px 0 rgba(255,255,255,.08); }
.cp-timer.cp-urgent::before { background: linear-gradient(90deg, transparent, #ff5a6e, transparent); }
.cp-timer.cp-urgent .cp-t em { color: #ff9aa8; }
.cp-timer.cp-urgent .cp-t-s .cp-n { animation: cp-urgent-text 1s ease-in-out infinite; }
.cp-timer.cp-urgent .cp-n { text-shadow: 0 0 9px rgba(255,70,90,.85), 0 1px 0 rgba(0,0,0,.6); }

/* big strip — offer popup and category banner */
.cp-timer.cp-lg { margin-top: 10px; padding: 8px 6px 7px; border-radius: 14px; }
.cp-timer.cp-lg .cp-n { font-size: clamp(18px, 8cqw, 30px); }
.cp-timer.cp-lg .cp-t em { margin-top: 3px; font-size: clamp(7px, 2.8cqw, 9.5px); }

/* ── COMPACT COUNTDOWN BAR — offer cards (grid + home highlights) ──
   ONE joined glossy bar laid along the very TOP edge of the whole card, running from the card's
   left corner to its right corner (the card clips the bar to its rounded corners):
   [ 03 DAYS | 04 HRS | 06 MIN | LEFT ]  — segments split by hairlines, gold LEFT tag as the end cap.
   · a thin accent line along the bottom edge DRAINS smoothly over each minute (the "seconds"), so the
     countdown is visibly alive without any blinking or fading
   · no border, no drop shadow; takes no layout space, so every card keeps the same size */
@keyframes cp-roll { 0% { opacity: .45; transform: translateY(-48%); } 55%, 100% { opacity: 1; transform: none; } }
html body .lx-card.lx-camp:not(#zz) { overflow: hidden; }
.cp-timer:not(.cp-lg) {
  position: absolute; top: 0; left: 0; right: 0; bottom: auto; transform: none; z-index: 7;
  display: flex; align-items: stretch; justify-content: stretch; gap: 0; box-sizing: border-box;
  width: auto; max-width: none; height: clamp(15px, 7cqw, 18px); margin: 0; padding: 0 0 0 11px; border-radius: 0; overflow: hidden;
  white-space: nowrap; container-type: normal; pointer-events: none; border: 0; box-shadow: none;
  background:
    linear-gradient(180deg, rgba(255,255,255,.15) 0%, rgba(255,255,255,.03) 48%, rgba(255,255,255,0) 52%),
    linear-gradient(180deg, rgba(14,22,42,.86) 0%, rgba(4,8,18,.9) 100%);
  -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px);
}
.cp-timer:not(.cp-lg)::before { content: none; }
.cp-timer:not(.cp-lg) .cp-t {
  position: relative; flex: 1 1 0; min-width: 0; max-width: none; display: flex; align-items: center; justify-content: center; gap: 2px;
  height: auto; padding: 0 2px 1px; border: 0; border-radius: 0; overflow: hidden; background: none; box-shadow: none;
}
.cp-timer:not(.cp-lg) .cp-t::after { content: none; }
.cp-timer:not(.cp-lg) .cp-t + .cp-t::before { content: ""; position: absolute; left: 0; top: 24%; bottom: 24%; width: 1px; background: rgba(255,255,255,.14); }
.cp-timer:not(.cp-lg) .cp-n { display: inline-block; font-size: clamp(11px, 5.8cqw, 14.5px); line-height: 1; color: #fff; text-shadow: none; animation: cp-roll 2.2s cubic-bezier(.22,.8,.3,1) infinite; }
.cp-timer:not(.cp-lg) .cp-t-h .cp-n { animation-delay: .12s; }
.cp-timer:not(.cp-lg) .cp-t-m .cp-n { animation-delay: .24s; }
.cp-timer:not(.cp-lg) .cp-t em { margin: 0; font-size: 0; letter-spacing: 0; line-height: 1; color: var(--cp-acc, #f7bd16); }
.cp-timer:not(.cp-lg) .cp-t em::after { content: attr(data-c); font-size: clamp(6.5px, 3.3cqw, 8.5px); font-weight: 800; letter-spacing: .04em; }
/* end cap (was seconds) = gold "LEFT" tag */
.cp-timer:not(.cp-lg) .cp-t-s {
  flex: 0 0 auto; padding: 0 13px 1px 9px; opacity: .94;
  background: linear-gradient(180deg, rgba(255,255,255,.5) 0%, rgba(255,255,255,0) 55%), var(--cp-acc, #f7bd16);
}
.cp-timer:not(.cp-lg) .cp-t-s::before { content: none !important; }
.cp-timer:not(.cp-lg) .cp-t-s .cp-n { display: none; }
.cp-timer:not(.cp-lg) .cp-t-s em { color: #10131f; }
.cp-timer:not(.cp-lg) .cp-t-s em::after { font-size: clamp(7.5px, 3.8cqw, 9.5px); font-weight: 900; letter-spacing: .08em; }
/* no days left → hide the days segment */
.cp-timer.cp-nod:not(.cp-lg) .cp-t-d { display: none; }
/* last hour → red */
.cp-timer.cp-urgent:not(.cp-lg) .cp-n { color: #ff9aa8; }
.cp-timer.cp-urgent:not(.cp-lg) .cp-t em { color: #ff9aa8; }
.cp-timer.cp-urgent:not(.cp-lg) .cp-t-s { background: linear-gradient(180deg, rgba(255,255,255,.4) 0%, rgba(255,255,255,0) 55%), #ff4d63; }
.cp-timer.cp-urgent:not(.cp-lg) .cp-t-s em { color: #fff; }

/* ───────────── CATEGORY-THEMED CARDS ───────────── */
html body :is(#offerGrid#offerGrid, #heroHighlights#heroHighlights) .lx-card.lx-camp:not(#zz):not(#zz) {
  background:
    linear-gradient(180deg, rgba(255,255,255,.16) 0%, rgba(255,255,255,0) 40%),
    linear-gradient(155deg, var(--cp-a) 0%, var(--cp-b) 100%) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.3), inset 0 -2px 0 rgba(0,0,0,.3), 0 4px 0 var(--cp-edge), 0 14px 22px rgba(2,5,16,.5), 0 0 0 1px var(--cp-ring) !important;
}
html body #heroHighlights#heroHighlights .lx-card.lx-feature.lx-camp:not(#zz):not(#zz) {
  background:
    linear-gradient(180deg, rgba(255,255,255,.14) 0%, rgba(255,255,255,0) 40%),
    linear-gradient(155deg, var(--cp-a) 0%, var(--cp-b) 100%) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.3), inset 0 -1px 0 rgba(0,0,0,.34), 0 0 0 1px var(--cp-ring), 0 8px 18px -8px var(--cp-glow) !important;
}
html body :is(#offerGrid, #heroHighlights) .lx-card.lx-camp:not(#zz):not(#zz) .lx-media {
  background: radial-gradient(circle at 50% 36%, var(--cp-a) 0%, var(--cp-b) 78%) !important;
}
/* highlight-section badge adopts the category accent */
html body #heroHighlights#heroHighlights .lx-camp-wrap .selected-offer-badge.sob-pro:not(#zz):not(#zz) {
  background: linear-gradient(180deg, var(--cp-b) 0%, var(--cp-edge) 100%) !important;
  border-color: var(--cp-ring) !important;
}
html body #heroHighlights#heroHighlights .lx-camp-wrap .selected-offer-badge.sob-pro .sob-main {
  background: linear-gradient(180deg, #fff 0%, var(--cp-acc) 100%) !important;
  -webkit-background-clip: text !important; background-clip: text !important; -webkit-text-fill-color: transparent !important;
}

/* ───────────── CATEGORY HERO BOX ─────────────
   Compact countdown box: above the offer grid after choosing a category in the Offers popup, and on the home
   page (under the trust buttons) when Home Highlights is "Offer Selected".
   Pure artwork: NO borders, NO outlines, NO box/drop shadows. Depth comes only from gradients:
   glossy diagonal bands, soft light, metallic "horizon" lettering and a 3D ribbon badge. */
@keyframes cp-hero-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.cp-hero {
  position: relative; grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 1fr); gap: 7px; box-sizing: border-box;
  overflow: hidden; margin: 0 0 12px; padding: 10px 12px 11px; border-radius: 18px; color: #fff; border: 0; box-shadow: none;
  background:
    linear-gradient(112deg, rgba(255,255,255,.15) 0%, rgba(255,255,255,.15) 17%, rgba(255,255,255,0) 17.2%, rgba(255,255,255,0) 27%, rgba(255,255,255,.06) 27.2%, rgba(255,255,255,.06) 33%, rgba(255,255,255,0) 33.2%),
    radial-gradient(rgba(255,255,255,.06) 1px, rgba(255,255,255,0) 1.5px) 0 0 / 9px 9px,
    radial-gradient(90% 150% at 100% 0%, rgba(255,255,255,.22) 0%, rgba(255,255,255,0) 62%),
    linear-gradient(180deg, rgba(255,255,255,.1) 0%, rgba(255,255,255,0) 46%, rgba(0,0,0,.2) 100%),
    linear-gradient(150deg, var(--cp-a), var(--cp-b));
  animation: cp-hero-in .35s ease both;
}
.cp-hero > * { position: relative; z-index: 1; }
.cp-hero-top { display: flex; align-items: center; gap: 8px; min-width: 0; }
.cp-hero:not(.cp-hero-home) .cp-hero-top { padding-right: 32px; }
.cp-hero-ico { flex: 0 0 17px; width: 17px; height: 17px; }
.cp-hero-ico path { fill: var(--cp-acc); }
.cp-hero-ico path + path { fill: #fff; fill-opacity: .55; }
.cp-hero-name {
  flex: 1 1 auto; min-width: 0; font: 900 17px/1.2 'Sora', 'Outfit', system-ui, sans-serif; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  color: transparent; -webkit-text-fill-color: transparent;
  background: linear-gradient(180deg, #ffffff 0%, #ffffff 42%, var(--cp-acc) 60%, var(--cp-acc) 100%); -webkit-background-clip: text; background-clip: text;
}
/* 3D ribbon badge: glossy top half, deeper lower half, notched ends — all gradients */
.cp-hero-badge {
  flex: 0 0 auto; display: inline-flex; align-items: center; gap: 5px; height: 21px; padding: 0 14px 0 12px; border: 0; box-shadow: none;
  font: 900 9px/1 'Sora', 'Inter', system-ui, sans-serif; letter-spacing: .13em; color: #1a1200;
  clip-path: polygon(0 0, 100% 0, calc(100% - 6px) 50%, 100% 100%, 0 100%, 6px 50%);
  background:
    linear-gradient(180deg, rgba(255,255,255,.62) 0%, rgba(255,255,255,.2) 49%, rgba(0,0,0,.1) 51%, rgba(0,0,0,.02) 100%),
    var(--cp-acc);
}
.cp-hero-badge svg { flex: 0 0 11px; width: 11px; height: 11px; fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.cp-hero-x {
  position: absolute !important; top: 8px; right: 9px; width: 26px; height: 26px; display: grid; place-items: center; z-index: 3 !important;
  border: 0; border-radius: 50%; cursor: pointer; font-size: 12px; color: #fff; box-shadow: none;
  background: rgba(0,0,0,.3); transition: transform .2s, background .2s;
}
.cp-hero-x:hover { background: #ec3b4f; transform: rotate(90deg); }
@media (min-width: 680px) {
  .cp-hero { grid-template-columns: minmax(0, 1fr) minmax(280px, 340px); align-items: center; gap: 18px; padding: 10px 16px; }
  .cp-hero:not(.cp-hero-home) .cp-hero-top { padding-right: 0; }
  .cp-hero:not(.cp-hero-home) .cp-timer.cp-xl { margin-right: 34px; width: auto; }
}

/* the timer inside the hero box: metallic numerals sitting directly on the artwork — no panel, no lines */
.cp-timer.cp-xl {
  margin: 0; padding: 0; gap: 0; width: 100%; align-items: flex-start; justify-content: center; overflow: visible;
  border-radius: 0; background: none; box-shadow: none; border: 0;
}
.cp-timer.cp-xl::before { content: none; }
.cp-timer.cp-xl .cp-t { flex: 1 1 0; max-width: none; overflow: hidden; padding: 2px 0 1px; border: 0; border-radius: 0; background: none; box-shadow: none; }
.cp-timer.cp-xl .cp-t + .cp-t::before { /* static colon dots between the numbers */
  content: ""; position: absolute; left: 0; top: 20%; width: 4px; height: 15px; opacity: .75;
  background: radial-gradient(circle, var(--cp-acc, #f7bd16) 0 1.6px, rgba(0,0,0,0) 2.1px) 0 0 / 4px 8px repeat-y;
}
.cp-timer.cp-xl .cp-n {
  font-size: clamp(21px, 7.4cqw, 27px); line-height: 1.05; text-shadow: none; color: transparent;
  background: linear-gradient(180deg, #ffffff 0%, #ffffff 44%, var(--cp-acc, #f7bd16) 60%, var(--cp-acc, #f7bd16) 100%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.cp-timer.cp-xl .cp-t em { margin-top: 3px; font-size: clamp(6.5px, 2.3cqw, 8px); letter-spacing: .2em; color: rgba(255,255,255,.74); }
.cp-timer.cp-urgent.cp-xl .cp-n { background-image: linear-gradient(180deg, #fff 0%, #fff 44%, #ff7b8e 60%, #ff7b8e 100%); }
.cp-timer.cp-urgent.cp-xl .cp-t em { color: #ffb3bd; }

/* home page: the hero box + its offers use the whole width and natural row heights */
html body #heroHighlights#heroHighlights.cp-cat-mode.selected-offers { grid-auto-rows: auto !important; align-items: start !important; }
html body #selectedOffersSection.cp-cat-mode .latest-offers-heading { display: none !important; }
.cp-hero-home { margin-bottom: 4px; }

/* ───────────── "OFFERS" POPUP ───────────── */
body.cp-pop-open { overflow: hidden; }
.cp-pop {
  position: fixed; inset: 0; z-index: 100001; display: flex; align-items: center; justify-content: center; padding: 16px; box-sizing: border-box;
  background: rgba(4,6,13,.74); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
  opacity: 0; visibility: hidden; transition: opacity .22s ease, visibility .22s;
}
.cp-pop.show { opacity: 1; visibility: visible; }
.cp-pop-card {
  width: min(100%, 380px); max-height: min(80vh, 580px); display: flex; flex-direction: column; box-sizing: border-box;
  padding: 14px; border-radius: 26px; color: #f3f5fa; font-family: 'Inter', system-ui, sans-serif;
  background: linear-gradient(180deg, #2d3347 0%, #1b2030 100%);
  box-shadow: 0 0 0 3px #2a3148, 0 0 0 4px rgba(255,255,255,.09), 0 30px 60px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,255,255,.14);
  transform: translateY(18px) scale(.96); transition: transform .3s cubic-bezier(.2,.9,.3,1.15);
}
.cp-pop.show .cp-pop-card { transform: none; }
.cp-pop-head { display: flex; align-items: center; justify-content: flex-end; gap: 11px; padding: 0 0 10px; }
.cp-pop-ico {
  flex: 0 0 38px; width: 38px; height: 38px; display: grid; place-items: center; border-radius: 13px; color: #2a1a00;
  background: linear-gradient(180deg, #ffe58f 0%, #f7bd16 54%, #d98f00 100%);
  box-shadow: 0 3px 0 #8a5600, inset 0 1px 0 rgba(255,255,255,.7);
}
.cp-pop-ico svg { width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-width: 2.3; stroke-linecap: round; stroke-linejoin: round; }
.cp-pop-title { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.cp-pop-title b { font: 900 16px/1.1 'Sora', 'Outfit', system-ui, sans-serif; color: #fff; }
.cp-pop-title small { font: 600 11px/1.25 'Inter', system-ui, sans-serif; color: #98a3bd; }
.cp-pop-x {
  flex: 0 0 32px; width: 32px; height: 32px; display: grid; place-items: center; border: 0; border-radius: 50%; cursor: pointer; color: #dfe5f6; font-size: 14px;
  background: linear-gradient(180deg, #3a4262, #2a3048); box-shadow: inset 0 1px 0 rgba(255,255,255,.2); transition: transform .15s, background .15s;
}
.cp-pop-x:hover { background: #ec3b4f; color: #fff; transform: rotate(90deg); }
.cp-pop-list { display: flex; flex-direction: column; gap: 10px; overflow-y: auto; padding: 2px 3px 8px; margin: 0 -3px; overscroll-behavior: contain; }
.cp-pop-item {
  position: relative; display: flex; align-items: center; gap: 12px; width: 100%; box-sizing: border-box; flex: 0 0 auto;
  padding: 10px 12px; border: 0; border-radius: 16px; cursor: pointer; text-align: left; color: #f3f5fa; font-family: inherit;
  background:
    linear-gradient(180deg, rgba(255,255,255,.16), rgba(255,255,255,0) 50%),
    linear-gradient(150deg, var(--cp-a, #3a4262), var(--cp-b, #2a3048));
  box-shadow: 0 0 0 1px var(--cp-ring, rgba(255,255,255,.1)), 0 4px 0 var(--cp-edge, #0d1019), inset 0 1px 0 rgba(255,255,255,.25);
  animation: cp-pop-in .35s ease both; transition: transform .15s ease, filter .15s ease, box-shadow .15s ease;
}
.cp-pop-item:nth-child(2) { animation-delay: .04s; } .cp-pop-item:nth-child(3) { animation-delay: .08s; } .cp-pop-item:nth-child(4) { animation-delay: .12s; } .cp-pop-item:nth-child(5) { animation-delay: .16s; }
.cp-pop-item:hover { transform: translateY(-2px); filter: brightness(1.1); }
.cp-pop-item:active { transform: translateY(3px); box-shadow: 0 0 0 1px var(--cp-ring, rgba(255,255,255,.1)), 0 1px 0 var(--cp-edge, #0d1019), inset 0 1px 0 rgba(255,255,255,.2); }
.cp-pop-item.on { box-shadow: 0 0 0 2px var(--cp-acc, #f7bd16), 0 4px 0 var(--cp-edge, #0d1019), 0 0 18px -2px var(--cp-glow, rgba(247,189,22,.6)), inset 0 1px 0 rgba(255,255,255,.3); }
.cp-sw {
  flex: 0 0 34px; width: 34px; height: 34px; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #fff 0%, var(--cp-acc, #f7bd16) 38%, var(--cp-a, #244b5d) 100%);
  box-shadow: 0 0 0 2px rgba(0,0,0,.35), 0 0 14px var(--cp-glow, rgba(247,189,22,.6)), inset 0 -3px 6px rgba(0,0,0,.35);
}
.cp-sw-all { background: radial-gradient(circle at 35% 30%, #fff 0%, #f7bd16 42%, #8a5600 100%); box-shadow: 0 0 0 2px rgba(0,0,0,.35), 0 0 14px rgba(247,189,22,.5), inset 0 -3px 6px rgba(0,0,0,.35); }
.cp-pi-main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.cp-pi-main b { font: 800 14px/1.15 'Sora', 'Outfit', system-ui, sans-serif; color: #fff; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-shadow: 0 1px 0 rgba(0,0,0,.35); }
.cp-pi-main small { font: 600 11px/1.1 'Inter', system-ui, sans-serif; color: rgba(255,255,255,.66); }
.cp-mini {
  flex: 0 0 auto; padding: 5px 9px; border-radius: 9px; font: 800 10.5px/1 'Sora', 'Inter', system-ui, sans-serif; letter-spacing: .02em;
  font-variant-numeric: tabular-nums; color: var(--cp-acc, #f7bd16); background: rgba(0,0,0,.4); box-shadow: inset 0 2px 4px rgba(0,0,0,.5), 0 1px 0 rgba(255,255,255,.1);
}
.cp-mini-open { color: #8dffbd; }
.cp-pi-check { flex: 0 0 20px; width: 20px; height: 20px; display: none; place-items: center; border-radius: 50%; font-size: 11px; font-weight: 900; color: #2a1a00; background: linear-gradient(180deg, #ffe58f, #f7bd16); }
.cp-pop-item.on .cp-pi-check { display: grid; }
.cp-pop-item.cp-all { --cp-a: #3a4262; --cp-b: #262c44; --cp-edge: #0d1019; --cp-ring: rgba(255,255,255,.12); --cp-acc: #f7bd16; --cp-glow: rgba(247,189,22,.6); }
.cp-pop-empty { display: flex; flex-direction: column; gap: 4px; padding: 18px 12px; text-align: center; border-radius: 14px; background: rgba(0,0,0,.25); box-shadow: inset 0 2px 6px rgba(0,0,0,.4); }
.cp-pop-empty b { font: 800 13px/1.2 'Sora', system-ui, sans-serif; color: #e8ecf6; }
.cp-pop-empty small { font: 600 11px/1.4 'Inter', system-ui, sans-serif; color: #98a3bd; }

/* ───────────── "OFFERS" ROW IN THE SORT MENU — signals that it opens another popup ───────────── */
@keyframes cp-nudge { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(2px); } }
.sort-drop-item.sdi-has-popup { gap: 8px; margin-top: 6px; border-top: 1px solid rgba(255,255,255,.1) !important; border-radius: 0 0 12px 12px; padding-top: 12px !important; }
.sort-drop-item.sdi-has-popup .sdi-label { flex: 1 1 auto; text-align: left; }
.sort-drop-item.sdi-has-popup .sdi-check { flex: 0 0 auto; }
.sdi-more {
  flex: 0 0 auto; display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%;
  color: #2a1a00; background: linear-gradient(180deg, #ffe58f 0%, #f7bd16 60%, #d98f00 100%);
  box-shadow: 0 2px 0 #8a5600, inset 0 1px 0 rgba(255,255,255,.7);
}
.sdi-more svg { display: block; animation: cp-nudge 1.5s ease-in-out infinite; }
.sort-drop-item.sdi-has-popup:hover .sdi-more { filter: brightness(1.1); }
.sort-drop-item.sdi-has-popup.active .sdi-more { background: #2a1a00; color: #f7bd16; box-shadow: none; }

@media (prefers-reduced-motion: reduce) {
  .cp-n.cp-flip, .cp-timer:not(.cp-lg) .cp-n, .cp-hero, .cp-badge::after, .cp-badge .cp-dot, .cp-timer.cp-urgent .cp-t-s .cp-n, .cp-pop-item, .sdi-more { animation: none !important; }
  .cp-pop, .cp-pop-card { transition: none; }
}