/* ═══════════════════════════════════════════════════════════════════
   LI GAMING BD — UI PRO v8
   1 · Account-details popup  (verified tag gone, white 3D offer box,
       single full-width Complete Order button)
   2 · Latest Offers grid     (wider side margin + column gap, mobile)
   3 · VIP tier grid          (big numbers never clip)
   4 · 8 BALL POOL STORE      (3D hero rail, trust strip, 3D headings,
       raised offer cards, chips and sort control)
   Loaded last — every selector carries an extra #id so it wins.
   ═══════════════════════════════════════════════════════════════════ */

/* ═════════════════ 1 · ACCOUNT-DETAILS POPUP ═════════════════ */

/* offer name + amount — fully white, light 3D plate */
#orderModal#orderModal:not(#zz) .order-summary {
  grid-template-areas: "name price" !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  align-items: center !important;
  gap: 10px !important;
  margin: 0 0 14px !important;
  padding: 12px 12px 12px 18px !important;
  border: 0 !important;
  border-radius: 18px !important;
  background:
    linear-gradient(180deg, #ffffff 0%, #f1f4fb 62%, #e7ecf7 100%) !important;
  box-shadow:
    inset 0 1px 0 #fff,
    inset 0 -2px 0 rgba(145, 160, 196, .28),
    0 3px 0 #9aa7c7,
    0 10px 18px rgba(3, 6, 20, .3) !important;
}
#orderModal#orderModal:not(#zz) .order-summary span { display: none !important; }
#orderModal#orderModal:not(#zz) .order-summary strong {
  grid-area: name !important;
  font: 800 17px/1.25 Sora, Inter, system-ui, sans-serif !important;
  color: #141b34 !important;
  -webkit-text-fill-color: #141b34 !important;
  text-shadow: none !important;
}
#orderModal#orderModal:not(#zz) .order-summary b {
  grid-area: price !important;
  padding: 9px 16px !important;
  border-radius: 13px !important;
  font: 800 20px/1 Sora, Inter, system-ui, sans-serif !important;
  color: #3a2400 !important;
  -webkit-text-fill-color: #3a2400 !important;
  background: linear-gradient(180deg, rgba(255, 255, 255, .5) 0%, rgba(255, 255, 255, 0) 52%), linear-gradient(180deg, #ffe58f 0%, #f7bd16 58%, #dc9306 100%) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .85), 0 2px 0 #9a6200 !important;
}

/* single, full-width Complete Order button */
#orderModal#orderModal:not(#zz) .order-nav.order-nav-single {
  display: block !important;
  grid-template-columns: none !important;
  margin: 18px 0 4px !important;
}
#orderModal#orderModal:not(#zz) .order-nav.order-nav-single .op-btn.op-submit {
  display: flex !important;
  align-items: center;
  justify-content: center;
  width: 100% !important;
  height: 58px !important;
  border-radius: 18px !important;
  font-size: 16.5px !important;
  letter-spacing: .02em !important;
  text-shadow: 0 1px 0 rgba(0, 70, 30, .45) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .6), 0 4px 0 #0b5a30, 0 12px 20px rgba(4, 40, 22, .38) !important;
}
#orderModal#orderModal:not(#zz) .order-nav.order-nav-single .op-btn.op-submit:active {
  transform: translateY(2px);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .5), 0 2px 0 #0b5a30, 0 6px 12px rgba(4, 40, 22, .32) !important;
}

/* ═════════════════ 2 · LATEST OFFERS — wider, aligned, one-line tags ═════════════════ */
html body #selectedOffersSection:not(#zz) { margin-top: 16px !important; }
html body #heroHighlights.selected-offers:not(#zz) {
  column-gap: 12px !important;
  row-gap: 12px !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  box-sizing: border-box !important;
  align-items: start !important;
}
@media (max-width: 600px) {
  html body #heroHighlights.selected-offers:not(#zz) {
    margin-left: -15px !important;
    margin-right: -15px !important;
  }
}
html body #heroHighlights.selected-offers .selected-offer-wrap {
  min-width: 0 !important;
  gap: 7px !important;
  container-type: inline-size;
}
html body #heroHighlights .lx-feature .lx-cash {
  font-size: 11px !important;
  font-size: clamp(10px, 6cqw, 14px) !important;
  letter-spacing: -.01em !important;
}
html body #heroHighlights .lx-feature .lx-feature-info { gap: 6px !important; }

/* ═════════════════ 3 · VIP TIER GRID — numbers never clip ═════════════════ */
#offerModal#offerModal:not(#zz) .vip-level-card { container-type: inline-size; }
#offerModal#offerModal:not(#zz) .vip-level-card .benefit {
  gap: 5px !important;
  margin: 0 5px !important;
  padding: 6px 5px !important;
  overflow: visible !important;
}
#offerModal#offerModal:not(#zz) .vip-level-card .benefit-copy {
  overflow: visible !important;
  min-width: 0 !important;
}
#offerModal#offerModal:not(#zz) .vip-level-card .benefit-copy strong {
  font-size: 12.5px !important;
  font-size: clamp(9.5px, 11.4cqw, 15px) !important;
  letter-spacing: -.02em !important;
  line-height: 1.05 !important;
  overflow: visible !important;
  text-overflow: clip !important;
  white-space: nowrap !important;
}
#offerModal#offerModal:not(#zz) .vip-level-card .benefit-copy small {
  font-size: 7px !important;
  font-size: clamp(6px, 6.2cqw, 8.5px) !important;
  letter-spacing: .04em !important;
  overflow: visible !important;
  white-space: nowrap !important;
}
@container (max-width: 112px) {
  #offerModal#offerModal:not(#zz) .vip-level-card .benefit-icon {
    flex: 0 0 18px !important;
    width: 18px !important;
    height: 18px !important;
    font-size: 13px !important;
  }
  #offerModal#offerModal:not(#zz) .vip-level-card .benefit-icon img,
  #offerModal#offerModal:not(#zz) .vip-level-card .benefit-icon svg {
    width: 18px !important;
    height: 18px !important;
  }
  #offerModal#offerModal:not(#zz) .vip-level-card .benefit { gap: 4px !important; margin: 0 4px !important; padding: 6px 4px !important; }
}
#offerModal#offerModal:not(#zz) .vip-level-grid { gap: 8px !important; }

/* ═════════════════ 4 · 8 BALL POOL STORE ═════════════════ */
:root {
  --pp-ledge: #090d1a;
  --pp-slate-a: #343c55;
  --pp-slate-b: #1c2234;
  --pp-gold-1: #ffe58a;
  --pp-gold-2: #f7bd16;
  --pp-gold-3: #d48f00;
}

/* ── hero slider: raised rail with a hard ledge ── */
html body section#pool.hero:not(#zz) {
  border-radius: 24px !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .22),
    inset 0 0 0 4px rgba(7, 11, 24, .55),
    0 5px 0 var(--pp-ledge),
    0 16px 26px rgba(2, 5, 16, .55) !important;
}
html body section#pool.hero:not(#zz) .arrow {
  background: linear-gradient(180deg, rgba(255, 255, 255, .22) 0%, rgba(255, 255, 255, 0) 55%), linear-gradient(180deg, #3b4566, #1a2038) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .28), 0 2px 0 #070b16, 0 6px 10px rgba(0, 0, 0, .4) !important;
  border: 0 !important;
}

/* ── trust strip under the hero ── */
.pool-trust-strip {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin: 14px 4px 2px;
}
.pts-tile {
  --tc1: #d6921c; --tc2: #94600c; --tcl: #6b4306;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 4px;
  min-width: 0;
  padding: 7px 4px 8px;
  border-radius: 15px;
  background: linear-gradient(180deg, rgba(255, 255, 255, .26) 0%, rgba(255, 255, 255, 0) 52%), linear-gradient(180deg, var(--tc1) 0%, var(--tc2) 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .5), 0 3px 0 var(--tcl), 0 9px 14px rgba(2, 5, 16, .4);
}
.pts-tile.pts-green { --tc1: #22b574; --tc2: #0f7049; --tcl: #09492f; }
.pts-tile.pts-blue { --tc1: #4a86f5; --tc2: #2352b8; --tcl: #17398a; }
.pts-ico {
  flex: 0 0 26px;
  width: 26px;
  height: 26px;
  display: grid;
  place-items: center;
  border-radius: 9px;
  color: var(--tc2);
  background: linear-gradient(180deg, #ffffff 0%, #e6edfb 100%);
  box-shadow: inset 0 1px 0 #fff, 0 2px 0 rgba(0, 0, 0, .28);
}
.pts-ico svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.pts-copy { min-width: 0; max-width: 100%; display: flex; flex-direction: column; align-items: center; gap: 2px; }
.pts-copy b { font: 800 11px/1.1 Sora, Inter, system-ui, sans-serif; color: #fff; text-shadow: 0 1px 0 rgba(0, 0, 0, .28); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pts-copy small { font: 700 8px/1 Inter, system-ui, sans-serif; letter-spacing: .06em; text-transform: uppercase; color: rgba(255, 255, 255, .8); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ── section headings: plaque + 3D pool ball ── */
html body .premium-section-heading:not(#zz) {
  background: linear-gradient(180deg, rgba(255, 255, 255, .08) 0%, rgba(255, 255, 255, 0) 48%), linear-gradient(180deg, #2f364e 0%, #1b2133 100%) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14), 0 3px 0 var(--pp-ledge), 0 9px 16px rgba(2, 5, 16, .4) !important;
  border: 0 !important;
}
html body .premium-section-heading:not(#zz) .premium-heading-orb {
  position: relative !important;
  width: 24px !important;
  height: 24px !important;
  flex: 0 0 24px !important;
  border-radius: 50% !important;
  overflow: hidden;
  background: radial-gradient(circle at 34% 28%, #6c7690 0%, #1a2030 38%, #04060c 100%) !important;
  box-shadow: inset 0 -2px 3px rgba(0, 0, 0, .55), 0 2px 0 #05070e, 0 4px 6px rgba(0, 0, 0, .45) !important;
}
html body .premium-section-heading:not(#zz) .premium-heading-orb::before {
  content: "8";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 11px;
  height: 11px;
  margin: -5.5px 0 0 -5.5px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  font: 900 8px/1 Sora, Inter, system-ui, sans-serif;
  color: #0a0e1a;
  background: #fff;
  box-shadow: 0 0 0 .5px rgba(0, 0, 0, .4);
}
html body .premium-section-heading:not(#zz) .premium-heading-orb::after {
  content: "";
  position: absolute;
  left: 4px;
  top: 3px;
  width: 8px;
  height: 5px;
  border-radius: 50%;
  background: linear-gradient(180deg, rgba(255, 255, 255, .75), rgba(255, 255, 255, 0));
  transform: rotate(-24deg);
}
/* second heading uses the yellow "1" ball */
html body .best-deals-heading:not(#zz) .premium-heading-orb {
  background: radial-gradient(circle at 34% 28%, #fff2a8 0%, #f7bd16 42%, #b97800 100%) !important;
}
html body .best-deals-heading:not(#zz) .premium-heading-orb::before { content: "1"; }

/* ── filter chips ── */
html body .filters:not(#zz) .filter {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14), 0 3px 0 var(--pp-ledge), 0 8px 12px rgba(2, 5, 16, .35) !important;
}
html body .filters:not(#zz) .filter.active {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .65), 0 3px 0 #8f5b00, 0 8px 14px rgba(120, 78, 0, .35) !important;
}
html body .filters:not(#zz) .filter:active { transform: translateY(2px) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12), 0 1px 0 var(--pp-ledge) !important; }
html body .category-filter-wrap:not(#zz) .filters { padding-bottom: 8px !important; }

/* ── sort control ── */
html body .offer-sort-control:not(#zz) {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14), 0 3px 0 var(--pp-ledge), 0 8px 12px rgba(2, 5, 16, .35) !important;
}

/* ── offer cards: raised, bevelled, recessed picture window ── */
html body #offerGrid:not(#zz) { gap: 18px 12px !important; padding: 2px 2px 10px !important; }
html body :is(#offerGrid, #heroHighlights) .lx-card:not(#zz) {
  padding: 7px !important;
  border-radius: 22px !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .08) 0%, rgba(255, 255, 255, 0) 38%),
    linear-gradient(180deg, var(--pp-slate-a) 0%, var(--pp-slate-b) 100%) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .17),
    inset 0 -2px 0 rgba(0, 0, 0, .28),
    0 4px 0 var(--pp-ledge),
    0 14px 22px rgba(2, 5, 16, .5) !important;
}
html body :is(#offerGrid, #heroHighlights) .lx-card:not(#zz):hover { transform: translateY(-4px) !important; }
html body :is(#offerGrid, #heroHighlights) .lx-card:not(#zz):active {
  transform: translateY(3px) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12), inset 0 -2px 0 rgba(0, 0, 0, .28), 0 1px 0 var(--pp-ledge), 0 4px 8px rgba(2, 5, 16, .4) !important;
}
html body :is(#offerGrid, #heroHighlights) .lx-card:not(#zz) .lx-media {
  border-radius: 16px !important;
  background: radial-gradient(circle at 50% 36%, #28355a 0%, #0e1426 72%) !important;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .06), inset 0 3px 10px rgba(0, 0, 0, .5) !important;
}
html body :is(#offerGrid, #heroHighlights) .lx-card:not(#zz) .lx-price {
  height: 27px !important;
  border-radius: 10px !important;
  background: linear-gradient(180deg, rgba(255, 255, 255, .5) 0%, rgba(255, 255, 255, 0) 52%), linear-gradient(180deg, var(--pp-gold-1) 0%, var(--pp-gold-2) 58%, var(--pp-gold-3) 100%) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .8), 0 2px 0 #8f5b00 !important;
}
html body :is(#offerGrid, #heroHighlights) .lx-card:not(#zz) .lx-off {
  height: 27px !important;
  border-radius: 10px !important;
  background: linear-gradient(180deg, rgba(255, 255, 255, .34) 0%, rgba(255, 255, 255, 0) 52%), linear-gradient(180deg, #ff6f80 0%, #ec3b4f 55%, #c8152f 100%) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .5), 0 2px 0 #7e0f22 !important;
}
html body :is(#offerGrid, #heroHighlights) .lx-card:not(#zz) .lx-go {
  width: 27px !important;
  height: 27px !important;
  border-radius: 10px !important;
  background: linear-gradient(180deg, #424a66, #272d40) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .16), 0 2px 0 #0a0e1b !important;
}
/* VIP cards — warm gold surface */
html body :is(#offerGrid, #heroHighlights) .lx-card.lx-vip:not(#zz) {
  background:
    linear-gradient(180deg, rgba(255, 224, 138, .14) 0%, rgba(255, 224, 138, 0) 40%),
    linear-gradient(180deg, #403a26 0%, #24211a 100%) !important;
  box-shadow: inset 0 1px 0 rgba(255, 224, 138, .3), inset 0 -2px 0 rgba(0, 0, 0, .3), 0 4px 0 #0c0a05, 0 14px 22px rgba(2, 5, 16, .5) !important;
}
/* latest-offer (feature) cards — lighter, brighter indigo with a gold top bevel */
html body #heroHighlights .lx-card.lx-feature:not(#zz) {
  background:
    linear-gradient(180deg, rgba(255, 236, 170, .22) 0%, rgba(255, 236, 170, 0) 34%),
    linear-gradient(180deg, #5b6bb0 0%, #38457f 100%) !important;
  box-shadow: inset 0 1px 0 rgba(255, 236, 170, .6), inset 0 -2px 0 rgba(10, 16, 50, .35), 0 4px 0 #1b2350, 0 14px 22px rgba(2, 5, 16, .5) !important;
}
html body #heroHighlights .lx-card.lx-feature:not(#zz) .lx-media {
  background: radial-gradient(circle at 50% 36%, #34447a 0%, #121a3a 74%) !important;
}

/* "LIMITED TIME OFFER • HURRY UP!" tag — always ONE line, same height on every card */
html body #heroHighlights .selected-offer-badge.sob-pro:not(#zz) {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  box-sizing: border-box !important;
  height: 26px !important;
  min-height: 26px !important;
  margin: 0 !important;
  padding: 0 7px !important;
  gap: 4px !important;
  border-radius: 13px !important;
  overflow: hidden !important;
  white-space: nowrap !important;
}
html body #heroHighlights .selected-offer-badge.sob-pro .sob-main,
html body #heroHighlights .selected-offer-badge.sob-pro .sob-accent {
  flex: 0 1 auto !important;
  min-width: 0 !important;
  overflow: hidden !important;
  text-overflow: clip !important;
  white-space: nowrap !important;
  font-size: 7.5px !important;
  font-size: clamp(6px, 3.9cqw, 9.5px) !important;
  line-height: 1 !important;
  letter-spacing: .03em !important;
}
html body #heroHighlights .selected-offer-badge.sob-pro .sob-dot { flex: 0 0 5px !important; width: 5px !important; height: 5px !important; }
html body #heroHighlights .selected-offer-badge.sob-pro .sob-sep { flex: 0 0 1px !important; height: 9px !important; margin: 0 1px !important; }

@media (prefers-reduced-motion: reduce) {
  html body :is(#offerGrid, #heroHighlights) .lx-card:not(#zz):hover { transform: none !important; }
}

/* ═════════════════ 5 · BUY NOW POPUP — offer name + price plate ═════════════════ */
#orderModal#orderModal:not(#zz) .op-top.checkout-offer-row {
  gap: 12px !important;
  padding: 9px 12px 9px 9px !important;
  border-radius: 18px !important;
  background: linear-gradient(180deg, #ffffff 0%, #f1f4fb 60%, #e8edf8 100%) !important;
  box-shadow: inset 0 1px 0 #fff, inset 0 -2px 0 rgba(145, 160, 196, .26), 0 3px 0 #9aa7c7, 0 10px 18px rgba(3, 6, 20, .3) !important;
}
#orderModal#orderModal:not(#zz) .checkout-brand-mark {
  width: 72px !important;
  height: 52px !important;
  flex: 0 0 72px !important;
  border-radius: 15px !important;
  background: linear-gradient(180deg, #22305c 0%, #0f1733 100%) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .26), 0 3px 0 #05091c, 0 6px 10px rgba(5, 9, 28, .35) !important;
}
#orderModal#orderModal:not(#zz) .checkout-brand-mark .checkout-brand-logo { padding: 3px 4px !important; }
#orderModal#orderModal:not(#zz) .checkout-offer-row #orderTitle {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 10px !important;
  font-family: Sora, Inter, system-ui, sans-serif !important;
}
#orderModal#orderModal:not(#zz) .checkout-offer-row #orderTitle .ot-name {
  flex: 1 1 auto;
  min-width: 0;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
  font-size: 15.5px;
  font-weight: 800;
  line-height: 1.22;
  letter-spacing: -.01em;
  color: #141b34;
  -webkit-text-fill-color: #141b34;
}
#orderModal#orderModal:not(#zz) .checkout-offer-row #orderTitle .ot-name::before {
  content: "SELECTED OFFER";
  display: block;
  margin-bottom: 3px;
  font: 800 8.5px/1 Inter, system-ui, sans-serif;
  letter-spacing: .16em;
  color: #6f7ba0;
  -webkit-text-fill-color: #6f7ba0;
}
#orderModal#orderModal:not(#zz) .checkout-offer-row #orderTitle .ot-price {
  flex: 0 0 auto;
  padding: 9px 14px;
  border-radius: 13px;
  font: 800 18px/1 Sora, Inter, system-ui, sans-serif;
  letter-spacing: -.01em;
  color: #3a2400;
  -webkit-text-fill-color: #3a2400;
  background: linear-gradient(180deg, rgba(255, 255, 255, .5) 0%, rgba(255, 255, 255, 0) 52%), linear-gradient(180deg, #ffe58f 0%, #f7bd16 58%, #dc9306 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .85), 0 2px 0 #9a6200;
}

@media (max-width: 400px) {
  #orderModal#orderModal:not(#zz) .checkout-brand-mark { width: 60px !important; flex-basis: 60px !important; height: 46px !important; }
  #orderModal#orderModal:not(#zz) .checkout-offer-row #orderTitle { gap: 8px !important; }
  #orderModal#orderModal:not(#zz) .checkout-offer-row #orderTitle .ot-name { font-size: 14px; }
  #orderModal#orderModal:not(#zz) .checkout-offer-row #orderTitle .ot-price { padding: 8px 11px; font-size: 16px; }
}
#siteHeader#siteHeader .brand {
  align-items: center !important;
  transform: translate(-3px, -2px) !important;
}
#siteHeader#siteHeader .brand-logo {
  width: auto !important;
  height: 60px !important;
  max-width: 110px !important;
  align-self: center !important;
}
#siteHeader#siteHeader .brand-logo img {
  width: auto !important;
  height: 100% !important;
  max-width: 100% !important;
  object-fit: contain !important;
  object-position: center !important;
}
@media (max-width: 380px) {
  #siteHeader#siteHeader .brand { gap: 3px !important; }
  #siteHeader#siteHeader .brand-logo { height: 56px !important; }
  #siteHeader#siteHeader .gaming-letters-row { letter-spacing: .10em !important; margin-right: -.10em !important; }
}