/* ═══════════════════════════════════════════════════════════════════
   LI GAMING BD — STORE PRO 3D
   8 Ball Pool store: category rail · section headings · sort control ·
   login popup. Same 3D language as the profile / offer / cart popups:
   raised slate surfaces, solid "ledge", glossy gold / blue / emerald.
   Loaded LAST. Two-id selector prefixes beat the older layers.
   ═══════════════════════════════════════════════════════════════════ */

:root {
  --st-gold-1: #ffe58f; --st-gold-2: #f7bd16; --st-gold-3: #d98f00; --st-gold-ledge: #8a5600;
  --st-ink: #2a1a00; --st-text: #e8ecf6; --st-muted: #98a3bd; --st-ledge: #0d1019;
  --st-display: 'Sora', 'Outfit', 'Inter', system-ui, sans-serif;
  --st-body: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --st-panel: linear-gradient(180deg, #2d3347 0%, #20263a 46%, #191e2e 100%);
  --st-raise: linear-gradient(180deg, #3a4262 0%, #272d45 100%);
  --st-sunk: linear-gradient(180deg, #0f1220 0%, #161a2a 100%);
  --st-gold: linear-gradient(180deg, #ffe58f 0%, #f7bd16 54%, #d98f00 100%);
  --st-green: linear-gradient(180deg, #6ff0a0 0%, #22c55e 55%, #15803d 100%);
  --st-blue: linear-gradient(180deg, #62adff 0%, #327ff2 55%, #2058c8 100%);
  --st-red: linear-gradient(180deg, #ff7a8c 0%, #ec3b4f 55%, #c8152f 100%);
}

@keyframes st-sheen { 0%, 55% { left: -70%; } 100% { left: 150%; } }
@keyframes st-flow { 0% { background-position: 0% 50%; } 100% { background-position: 200% 50%; } }
@keyframes st-gem { 0%, 100% { transform: translateY(0) rotate(0); } 50% { transform: translateY(-2px) rotate(8deg); } }
@keyframes st-rail { 0% { transform: translateX(-110%); } 100% { transform: translateX(110%); } }
@keyframes st-card-in { from { opacity: 0; transform: translateY(26px) scale(.95); } to { opacity: 1; transform: none; } }
@keyframes st-panel-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes st-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }
@keyframes st-drop { from { opacity: 0; transform: translateY(-8px) scale(.96); } to { opacity: 1; transform: none; } }

/* ═════════════════════════ 1 · CATEGORY RAIL ═════════════════════════ */
#offers#offers .category-filter-wrap { overflow: hidden !important; }
#offers#offers #offerFilters,
#offers#offers #offerFilters.filters {
  height: auto !important; min-height: 70px !important; max-height: none !important;
  align-items: center !important; gap: 11px !important;
  padding: 10px 30px 18px !important;
  overflow-y: hidden !important;
}
#offers#offers #offerFilters > .filter,
#offers#offers #offerFilters > button.filter {
  position: relative !important; border: 0 !important; border-radius: 16px !important;
  height: 46px !important; min-height: 46px !important; max-height: 46px !important;
  padding: 6px 17px 6px 13px !important; gap: 9px !important;
  font-family: var(--st-display) !important; font-size: 12.5px !important; font-weight: 800 !important;
  letter-spacing: .35px !important; color: #c3cbe2 !important; text-shadow: none;
  background: var(--st-raise) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.22) !important;
  filter: none !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important;
  transition: transform .16s cubic-bezier(.3,1.5,.5,1), box-shadow .16s ease, filter .16s ease, color .16s ease !important;
  -webkit-tap-highlight-color: transparent;
}
/* glossy top shine */
#offers#offers #offerFilters > .filter::before {
  content: ""; position: absolute; left: 6px; right: 6px; top: 2px; height: 46%; border-radius: 12px 12px 40% 40%;
  background: linear-gradient(180deg, rgba(255,255,255,.16), rgba(255,255,255,0)); pointer-events: none; z-index: 0;
}
#offers#offers #offerFilters > .filter::after { display: none !important; }

#offers#offers #offerFilters > .filter > * { position: relative; z-index: 1; }
#offers#offers #offerFilters > .filter:hover {
  transform: translateY(-2px) !important; color: #fff !important; filter: brightness(1.12) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.28) !important;
}
#offers#offers #offerFilters > .filter:active {
  transform: translateY(2px) !important; filter: none !important; animation: none !important;
  box-shadow: none !important;
}
/* ACTIVE = glossy gold key */
#offers#offers #offerFilters > .filter.active {
  color: var(--st-ink) !important; text-shadow: none;
  background: var(--st-gold) !important;
  filter: none !important; outline: none !important;
  box-shadow: none !important;
}
#offers#offers #offerFilters > .filter.active::before { background: linear-gradient(180deg, rgba(255,255,255,.55), rgba(255,255,255,0)); }
#offers#offers #offerFilters > .filter.active:hover { filter: brightness(1.05) !important; box-shadow: none !important; }
#offers#offers #offerFilters > .filter.active:active { box-shadow: none !important; }
/* rolling sheen on the active key */
#offers#offers #offerFilters > .filter.active::after {
  content: "" !important; display: block !important; position: absolute !important; top: 0 !important; bottom: 0 !important; left: -70%; width: 38% !important; height: auto !important;
  transform: skewX(-18deg) !important; pointer-events: none; z-index: 2;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.65), transparent) !important;
  animation: st-sheen 3.8s ease-in-out infinite !important; opacity: 1 !important; filter: none !important;
}
#offers#offers #offerFilters > .filter > img { filter: none !important; transition: transform .2s ease; }
#offers#offers #offerFilters > .filter:hover > img { transform: scale(1.1) rotate(-3deg); }
#offers#offers #offerFilters > .filter.active > img { filter: none !important; }
/* touch screens: no sticky hover (it brightened the tapped button) */
@media (hover: none) {
  #offers#offers #offerFilters > .filter:hover,
  #offers#offers #offerFilters > .filter.active:hover { transform: none !important; filter: none !important; }
  #offers#offers #offerFilters > .filter:not(.active):hover { color: #c3cbe2 !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.22) !important; }
  #offers#offers #offerFilters > .filter:hover > img { transform: none; }
}

/* arrows */
#offers#offers .category-filter-arrow {
  border: 0 !important; border-radius: 50% !important; cursor: pointer;
  background: var(--st-raise) !important;
  box-shadow: 0 0 0 1px rgba(255,255,255,.1), inset 0 1px 0 rgba(255,255,255,.25) !important;
}
#offers#offers .category-filter-arrow svg, #offers#offers .category-filter-arrow {
  color: var(--st-gold-2) !important;
}
#offers#offers .category-filter-arrow svg { filter: none !important; }
#offers#offers .category-filter-arrow:hover { color: var(--st-gold-1) !important; box-shadow: 0 0 0 1px rgba(247,189,22,.4), inset 0 1px 0 rgba(255,255,255,.3) !important; }
#offers#offers .category-filter-arrow:active { box-shadow: none !important; }

@media (max-width: 600px) {
  #offers#offers #offerFilters, #offers#offers #offerFilters.filters { min-height: 62px !important; gap: 9px !important; padding: 8px 14px 16px !important; }
  #offers#offers #offerFilters > .filter, #offers#offers #offerFilters > button.filter {
    height: 41px !important; min-height: 41px !important; max-height: 41px !important;
    padding: 5px 13px 5px 10px !important; gap: 7px !important; border-radius: 14px !important; font-size: 11px !important;
  }
}

/* ═════════════════════════ 2 · SECTION HEADINGS ═════════════════════════ */
.premium-section-heading {
  position: relative; display: flex !important; align-items: center; gap: 12px !important;
  width: fit-content; max-width: 100%; padding: 9px 16px 9px 13px; margin: 0 0 14px !important; border-radius: 18px;
  background: var(--st-panel);
  box-shadow: 0 0 0 1px rgba(255,255,255,.08), inset 0 1px 0 rgba(255,255,255,.14);
  overflow: hidden; isolation: isolate;
}
.premium-section-heading::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(180px 70px at 0% 0%, rgba(247,189,22,.2), transparent 70%);
}
.premium-section-heading::after {
  content: ""; position: absolute; top: 0; bottom: 0; left: -70%; width: 36%; pointer-events: none; z-index: 1;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.1), transparent); transform: skewX(-18deg); animation: st-sheen 7s ease-in-out infinite;
}
.best-deals-heading::before { background: radial-gradient(180px 70px at 0% 0%, rgba(98,173,255,.24), transparent 70%); }

/* 3D gem */
.premium-section-heading .premium-heading-orb {
  flex: 0 0 22px !important; width: 22px !important; height: 22px !important; border-radius: 7px !important; opacity: 1 !important;
  transform: rotate(45deg); animation: st-gem 3.2s ease-in-out infinite !important;
  background: linear-gradient(135deg, #fff6c9 0%, #ffd34d 28%, #f7a800 58%, #b86c00 100%) !important;
  box-shadow: none !important;
}
.best-deals-heading .premium-heading-orb {
  background: linear-gradient(135deg, #e3f1ff 0%, #8cc4ff 28%, #327ff2 60%, #1b46a8 100%) !important;
  box-shadow: none !important;
}
/* extruded title */
.premium-section-heading .premium-heading-text {
  font-family: var(--st-display) !important; font-size: 18px !important; font-weight: 900 !important; letter-spacing: 2.2px !important;
  background: linear-gradient(180deg, #ffffff 0%, #ffe58f 52%, #f7bd16 100%) !important; background-size: 100% 100% !important;
  -webkit-background-clip: text !important; background-clip: text !important; color: transparent !important; text-shadow: none !important; animation: none !important;
  filter: none;
}
.best-deals-heading .premium-heading-text {
  background: linear-gradient(180deg, #ffffff 0%, #bfe0ff 50%, #62adff 100%) !important; -webkit-background-clip: text !important; background-clip: text !important;
  filter: none;
}
/* glowing rail */
.premium-section-heading .premium-heading-line {
  height: 5px !important; border-radius: 5px; flex: 0 0 clamp(36px, 9vw, 110px) !important; width: clamp(36px, 9vw, 110px) !important; min-width: 28px !important;
  background: linear-gradient(90deg, #f7bd16, rgba(247,189,22,.35), transparent) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.5) !important;
}
.best-deals-heading .premium-heading-line { background: linear-gradient(90deg, #62adff, rgba(98,173,255,.35), transparent) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.5) !important; }
.premium-section-heading .premium-heading-line::after { background: linear-gradient(90deg, transparent, rgba(255,255,255,.95), transparent) !important; }
/* HOT chip */
.premium-section-heading .premium-heading-chip {
  padding: 5px 10px !important; border: 0 !important; border-radius: 9px !important; font-family: var(--st-display); font-size: 9px !important; font-weight: 900 !important; letter-spacing: 1.2px !important;
  color: #fff !important; text-shadow: none; background: var(--st-red) !important; transform: none !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.55) !important;
}
.premium-section-heading .premium-heading-chip::before { content: "🔥 "; font-size: 9px; }

@media (max-width: 600px) {
  .premium-section-heading { padding: 7px 12px 7px 10px; gap: 9px !important; border-radius: 15px; margin-bottom: 12px !important; }
  .premium-section-heading .premium-heading-orb { flex-basis: 17px !important; width: 17px !important; height: 17px !important; border-radius: 6px !important; }
  .premium-section-heading .premium-heading-text { font-size: 14px !important; letter-spacing: 1.5px !important; }
  .premium-section-heading .premium-heading-line { height: 4px !important; flex-basis: 24px !important; width: 24px !important; min-width: 18px !important; }
  .premium-section-heading .premium-heading-chip { display: inline-block !important; padding: 4px 7px !important; font-size: 7.5px !important; }
}

/* ═════════════════════════ 3 · SORT CONTROL ═════════════════════════ */
#offers#offers .offer-sort-row {
  margin-top: 6px !important; margin-bottom: 8px !important; min-height: 0 !important;
  padding: 0 12px 0 14px !important; align-items: center !important;
}
#offers#offers .offer-sort-control {
  position: relative; display: inline-flex !important; align-items: center; gap: 0 !important; padding: 0 !important; height: 42px;
  border-radius: 14px; background: var(--st-raise);
  box-shadow: 0 0 0 1px rgba(255,255,255,.08), inset 0 1px 0 rgba(255,255,255,.2);
}
#offers#offers .offer-sort-control .sort-left {
  height: 42px; padding: 0 12px 0 14px; gap: 9px; border-radius: 14px 0 0 14px; color: #e3e9f8; cursor: pointer;
}
#offers#offers .offer-sort-control .sort-left:hover { background: rgba(255,255,255,.07); color: #fff; }
#offers#offers .offer-sort-control .sort-icon-svg { color: var(--st-gold-2); filter: none; }
#offers#offers .offer-sort-control .sort-field-label { font-family: var(--st-display); font-size: 12.5px; font-weight: 800; letter-spacing: .3px; }
#offers#offers .offer-sort-control .sort-divider { height: 22px; background: linear-gradient(180deg, transparent, rgba(255,255,255,.25), transparent); }
#offers#offers .offer-sort-control .sort-dir-btn { width: 42px; height: 42px; border-radius: 0 14px 14px 0; color: var(--st-gold-2); }
#offers#offers .offer-sort-control .sort-dir-btn:hover { background: rgba(255,255,255,.07); color: var(--st-gold-1); }
#offers#offers .offer-sort-control:active { transform: translateY(2px); }
#offers#offers .sort-dropdown {
  top: calc(100% + 10px) !important; border: 0 !important; border-radius: 18px !important; padding: 8px !important; min-width: 190px; background: var(--st-panel) !important;
  box-shadow: 0 0 0 1px rgba(255,255,255,.1), inset 0 1px 0 rgba(255,255,255,.14) !important;
  animation: st-drop .18s ease both !important;
}
#offers#offers .sort-drop-item {
  border-radius: 12px; padding: 11px 14px !important; font-family: var(--st-body); font-size: 13.5px !important; font-weight: 600 !important; color: #d7def0 !important; transition: background .12s ease, transform .12s ease;
}
#offers#offers .sort-drop-item:hover { background: rgba(255,255,255,.08) !important; transform: translateX(2px); }
#offers#offers .sort-drop-item.active { color: var(--st-ink) !important; font-weight: 800 !important; background: var(--st-gold) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.6); margin-bottom: 3px; }
#offers#offers .sort-drop-item .sdi-check { color: var(--st-ink) !important; font-weight: 900; }
@media (max-width: 600px) {
  #offers#offers .offer-sort-row { margin-top: 2px !important; margin-bottom: 8px !important; padding: 0 10px 0 12px !important; gap: 8px !important; }
  #offers#offers .offer-sort-control, #offers#offers .offer-sort-control .sort-left, #offers#offers .offer-sort-control .sort-dir-btn { height: 37px; }
  #offers#offers .offer-sort-control { border-radius: 12px; }
  #offers#offers .offer-sort-control .sort-left { padding: 0 9px 0 11px; gap: 7px; border-radius: 12px 0 0 12px; }
  #offers#offers .offer-sort-control .sort-field-label { font-size: 11px; }
  #offers#offers .offer-sort-control .sort-dir-btn { width: 36px; border-radius: 0 12px 12px 0; }
}

/* Best Deals heading + Sort control: same height, same centre line */
#offers#offers .offer-sort-row {
  display: flex !important; flex-wrap: nowrap !important; align-items: center !important; justify-content: space-between !important;
}
#offers#offers .offer-sort-row > .premium-section-heading,
#offers#offers .offer-sort-row > .offer-sort-control {
  box-sizing: border-box !important; height: 42px !important; min-height: 42px !important; max-height: 42px !important;
  margin: 0 !important; align-self: center !important; transform: none !important; top: auto !important; vertical-align: middle !important;
}
#offers#offers .offer-sort-row > .premium-section-heading { padding-top: 0 !important; padding-bottom: 0 !important; align-items: center !important; flex-shrink: 1; min-width: 0; }
#offers#offers .offer-sort-row > .offer-sort-control { flex-shrink: 0; }
#offers#offers .offer-sort-row > .offer-sort-control:active { transform: translateY(1px) !important; }
@media (max-width: 600px) {
  #offers#offers .offer-sort-row > .premium-section-heading,
  #offers#offers .offer-sort-row > .offer-sort-control,
  #offers#offers .offer-sort-row .offer-sort-control .sort-left,
  #offers#offers .offer-sort-row .offer-sort-control .sort-dir-btn { height: 38px !important; min-height: 38px !important; max-height: 38px !important; }
}

/* Slider: no blurry drop shadow / ledge under the box */
#pool#pool#pool.hero {
  box-shadow: 0 0 0 3px #2a3148, 0 0 0 4px rgba(255,255,255,.09) !important;
}

/* LIMITED TIME OFFER badge — professional live tag */
@keyframes sob-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 sob-shine { 0%, 60% { left: -40%; } 100% { left: 130%; } }
#heroHighlights#heroHighlights .selected-offer-badge.sob-pro {
  position: relative !important; z-index: 4 !important; overflow: hidden !important; isolation: isolate;
  display: inline-flex !important; align-items: center !important; gap: 7px !important;
  width: auto !important; max-width: 100% !important; margin: 0 0 8px !important; padding: 5px 11px 5px 9px !important;
  border: 1px solid rgba(247,189,22,.45) !important; border-radius: 999px !important;
  background: linear-gradient(180deg, #2a2412 0%, #17140b 100%) !important;
  box-shadow: inset 0 1px 0 rgba(255,229,143,.22) !important;
  font-family: var(--st-display) !important; font-size: 10px !important; line-height: 1 !important; font-weight: 800 !important;
  letter-spacing: 1.1px !important; text-transform: uppercase !important; text-shadow: none !important; white-space: nowrap !important;
  color: #ffe08a !important; animation: none !important; filter: none !important;
}
#heroHighlights#heroHighlights .selected-offer-badge.sob-pro::after {
  content: ""; position: absolute; top: 0; bottom: 0; left: -40%; width: 30%; z-index: -1; pointer-events: none;
  background: linear-gradient(100deg, transparent, rgba(255,229,143,.22), transparent); transform: skewX(-20deg);
  animation: sob-shine 4.5s ease-in-out infinite;
}
#heroHighlights .sob-pro .sob-dot {
  flex: 0 0 6px; width: 6px; height: 6px; border-radius: 50%;
  background: #ff4d5e; animation: sob-pulse 1.6s ease-out infinite;
}
#heroHighlights .sob-pro .sob-main {
  background: linear-gradient(180deg, #fff3c4 0%, #f7bd16 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  overflow: hidden; text-overflow: ellipsis;
}
#heroHighlights .sob-pro .sob-sep { flex: 0 0 1px; width: 1px; height: 10px; background: rgba(247,189,22,.4); }
#heroHighlights .sob-pro .sob-accent { color: #ff6b78 !important; -webkit-text-fill-color: #ff6b78; font-weight: 900; }
@media (max-width: 600px) {
  #heroHighlights#heroHighlights .selected-offer-badge.sob-pro { font-size: 8.5px !important; letter-spacing: .9px !important; padding: 4px 9px 4px 8px !important; gap: 6px !important; margin-bottom: 7px !important; }
  #heroHighlights .sob-pro .sob-dot { flex-basis: 5px; width: 5px; height: 5px; }
  #heroHighlights .sob-pro .sob-sep { height: 8px; }
}
@media (prefers-reduced-motion: reduce) {
  #heroHighlights .sob-pro .sob-dot, #heroHighlights#heroHighlights .selected-offer-badge.sob-pro::after { animation: none !important; }
}

/* ═════════════════════════ 4 · LOGIN POPUP ═════════════════════════ */
#loginModal#loginModal {
  font-family: var(--st-body) !important;
  background:
    radial-gradient(620px 360px at 50% -6%, rgba(98,173,255,.2), transparent 70%),
    radial-gradient(520px 340px at 100% 100%, rgba(247,189,22,.12), transparent 70%),
    rgba(4,6,13,.82) !important;
  -webkit-backdrop-filter: none !important; backdrop-filter: none !important;
}
#loginModal#loginModal .login-box.premium-auth-card {
  position: relative; max-width: 372px !important; margin-top: 34px !important; padding: 20px 22px 18px !important;
  border: 0 !important; border-radius: 28px !important; background: var(--st-panel) !important; isolation: isolate;
  box-shadow:
    0 0 0 3px #2a3148, 0 0 0 4px rgba(255,255,255,.09), inset 0 1px 0 rgba(255,255,255,.14) !important;
  animation: st-card-in .45s cubic-bezier(.2,.9,.3,1.1) both;
  -webkit-backdrop-filter: none !important; backdrop-filter: none !important;
}
/* 3D light blobs behind the content */
#loginModal#loginModal .premium-auth-card::before {
  display: block !important; content: "" !important; position: absolute !important; z-index: -1; pointer-events: none;
  top: -90px !important; right: -70px !important; left: auto !important; width: 230px !important; height: 230px !important; transform: none !important;
  border-radius: 50%; background: radial-gradient(circle, rgba(247,189,22,.28), transparent 68%) !important; animation: none !important;
}
#loginModal#loginModal .premium-auth-card::after {
  display: block !important; content: "" !important; position: absolute !important; z-index: -1; pointer-events: none;
  bottom: -100px !important; left: -80px !important; top: auto !important; right: auto !important; width: 250px !important; height: 250px !important; inset: auto auto -100px -80px !important;
  border-radius: 50% !important; padding: 0 !important; -webkit-mask: none !important; mask: none !important; opacity: 1 !important;
  background: radial-gradient(circle, rgba(76,126,255,.3), transparent 68%) !important;
}
#loginModal#loginModal .close-btn-new {
  top: 14px !important; right: 14px !important; width: 34px !important; height: 34px !important; border-radius: 50% !important; color: #dfe5f6 !important; font-size: 19px !important;
  background: var(--st-raise) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.22) !important;
}
#loginModal#loginModal .close-btn-new:hover { background: var(--st-red) !important; color: #fff !important; transform: rotate(90deg) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.4) !important; }
#loginModal#loginModal .close-btn-new:active { transform: translateY(2px) rotate(90deg) !important; box-shadow: none !important; }

/* brand */
#loginModal#loginModal .premium-auth-brand { margin: 4px 0 14px !important; }
#loginModal#loginModal .brand-logo-text-wrapper { gap: 9px !important; animation: st-float 4.5s ease-in-out infinite; }
#loginModal#loginModal .clean-auth-logo { height: 44px !important; }
#loginModal#loginModal .clean-auth-logo img { filter: none; }
#loginModal#loginModal .logo-gaming-text {
  font-family: var(--st-display) !important; font-size: 27px !important; font-weight: 900 !important; letter-spacing: 1.6px !important; transform: translateY(1px);
  background: linear-gradient(180deg, #fff 0%, #ffe58f 55%, #f7bd16 100%) !important; -webkit-background-clip: text !important; background-clip: text !important; -webkit-text-fill-color: transparent !important; text-shadow: none !important;
  filter: none;
}
#loginModal#loginModal .auth-subtitle {
  display: flex !important; align-items: center; justify-content: center; gap: 10px; margin: 8px 0 0 !important;
  font-family: var(--st-body) !important; font-size: 10.5px !important; font-weight: 800 !important; letter-spacing: 2.4px !important; text-transform: uppercase; color: var(--st-muted) !important;
}
#loginModal#loginModal .auth-subtitle::before, #loginModal#loginModal .auth-subtitle::after {
  content: ""; flex: 0 0 26px; height: 3px; border-radius: 3px; background: linear-gradient(90deg, transparent, var(--st-gold-2)); box-shadow: none;
}
#loginModal#loginModal .auth-subtitle::after { background: linear-gradient(270deg, transparent, var(--st-gold-2)); }

/* Google key */
#loginModal#loginModal .new-google-btn {
  position: relative; overflow: hidden; min-height: 50px; margin: 4px 0 14px !important; border-radius: 15px !important; color: #1b2233 !important;
  font-family: var(--st-display) !important; font-weight: 800 !important; letter-spacing: .2px;
  background: linear-gradient(180deg, #ffffff 0%, #e9eef8 100%) !important;
  box-shadow: none !important;
  transition: transform .15s ease, box-shadow .15s ease, filter .15s ease !important;
}
#loginModal#loginModal .new-google-btn span { font-family: var(--st-display) !important; font-weight: 800 !important; }
#loginModal#loginModal .new-google-btn::after {
  content: ""; position: absolute; top: 0; bottom: 0; left: -70%; width: 36%; pointer-events: none;
  background: linear-gradient(100deg, transparent, rgba(66,133,244,.18), transparent); transform: skewX(-18deg); animation: st-sheen 5s ease-in-out infinite;
}
#loginModal#loginModal .new-google-btn:hover { transform: translateY(-2px); filter: brightness(1.03); }
#loginModal#loginModal .new-google-btn:active { transform: translateY(4px) !important; box-shadow: none !important; }
#loginModal#loginModal .new-google-btn .g-icon { width: 22px; height: 22px; }

/* OR divider */
#loginModal#loginModal .auth-divider { margin-bottom: 14px !important; font-family: var(--st-body); font-size: 10px !important; font-weight: 800 !important; letter-spacing: 2px; color: var(--st-muted) !important; }
#loginModal#loginModal .auth-divider::before, #loginModal#loginModal .auth-divider::after { border-bottom: 0 !important; height: 2px; border-radius: 2px; background: linear-gradient(90deg, transparent, rgba(255,255,255,.16)); }
#loginModal#loginModal .auth-divider::after { background: linear-gradient(270deg, transparent, rgba(255,255,255,.16)); }
#loginModal#loginModal .auth-divider span { padding: 5px 12px; border-radius: 999px; background: var(--st-sunk); box-shadow: none; }

/* method tabs */
#loginModal#loginModal .auth-tabs-container {
  padding: 5px !important; gap: 5px !important; border-radius: 16px !important; margin-bottom: 14px !important;
  background: var(--st-sunk) !important; box-shadow: none !important;
}
#loginModal#loginModal .auth-tab {
  padding: 11px 4px !important; border-radius: 12px !important; font-family: var(--st-display) !important; font-size: 11px !important; font-weight: 800 !important; color: #9aa5c2 !important; text-transform: none !important;
  transition: color .2s ease, transform .15s ease, box-shadow .2s ease !important;
}
#loginModal#loginModal .auth-tab:hover { color: #fff !important; }
#loginModal#loginModal .auth-tab::before {
  border-radius: 12px !important; background: var(--st-blue) !important;
  box-shadow: none;
}
#loginModal#loginModal .auth-tab.active { color: #fff !important; text-shadow: none; box-shadow: none !important; transform: translateY(-1px); }
#loginModal#loginModal .auth-tab img { filter: none; }

/* panel */
#loginModal#loginModal .premium-auth-panel-wrap { padding: 0 !important; background: transparent !important; border: 0 !important; box-shadow: none !important; }
#loginModal#loginModal .premium-login-panel.active { animation: st-panel-in .3s ease both !important; }
#loginModal#loginModal .auth-field label { font-family: var(--st-body) !important; font-size: 10px !important; font-weight: 800 !important; letter-spacing: 1.2px; text-transform: uppercase !important; color: var(--st-muted) !important; margin-bottom: 7px !important; }
#loginModal#loginModal .auth-input-box {
  min-height: 48px; padding: 0 14px !important; border-radius: 14px !important; background: var(--st-sunk) !important;
  box-shadow: none !important;
}
#loginModal#loginModal .auth-input-box:focus-within {
  background: var(--st-sunk) !important;
  box-shadow: 0 0 0 2px rgba(247,189,22,.7) !important;
}
#loginModal#loginModal .auth-input-box > svg:not(.eye-icon) { stroke: var(--st-gold-2) !important; width: 17px !important; height: 17px !important; filter: none; }
#loginModal#loginModal .auth-input-box input { font-family: var(--st-body) !important; font-size: 14px !important; font-weight: 600 !important; color: #f1f4fb !important; }
#loginModal#loginModal .auth-input-box input::placeholder { color: #5f6a86 !important; font-weight: 500 !important; text-transform: none !important; }
#loginModal#loginModal .auth-input-box .eye-icon { stroke: #8a95b3 !important; }
#loginModal#loginModal .auth-input-box .eye-icon:hover { stroke: var(--st-gold-1) !important; }
#loginModal#loginModal .auth-actions { font-family: var(--st-body) !important; }
#loginModal#loginModal .remember-me { color: #c0c8de !important; font-weight: 600 !important; }
#loginModal#loginModal .remember-me input[type="checkbox"] { accent-color: #f7bd16 !important; }
#loginModal#loginModal .forgot-pwd { color: var(--st-gold-2) !important; font-weight: 700 !important; }
#loginModal#loginModal .email-auth-error { font-family: var(--st-body); font-weight: 700; }

/* LOGIN = glossy gold key */
#loginModal#loginModal .auth-login-btn,
#loginModal#loginModal button[onclick*="sendOTP"],
#loginModal#loginModal button[onclick*="verifyOTP"] {
  position: relative; overflow: hidden; min-height: 52px; border-radius: 16px !important; color: var(--st-ink) !important;
  font-family: var(--st-display) !important; font-size: 15px !important; font-weight: 900 !important; letter-spacing: .6px;
  text-shadow: none; background: var(--st-gold) !important;
  box-shadow: none !important;
  transition: transform .15s ease, box-shadow .15s ease, filter .15s ease !important;
}
#loginModal#loginModal .auth-login-btn::after {
  content: ""; position: absolute; top: 0; bottom: 0; left: -70%; width: 38%; pointer-events: none;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.65), transparent); transform: skewX(-18deg); animation: st-sheen 3.8s ease-in-out infinite;
}
#loginModal#loginModal .auth-login-btn:hover { transform: translateY(-2px); filter: brightness(1.06); }
#loginModal#loginModal .auth-login-btn:active { transform: translateY(4px) !important; box-shadow: none !important; }
#loginModal#loginModal .auth-login-btn svg { stroke: var(--st-ink) !important; }

/* create account / helper links */
#loginModal#loginModal .auth-signup-row > span { font-family: var(--st-body); font-size: 12.5px !important; font-weight: 600 !important; color: #9aa5c2 !important; }
#loginModal#loginModal .auth-create-btn {
  font-family: var(--st-display) !important; font-weight: 800 !important; color: var(--st-gold-2) !important; text-decoration: none !important; border-bottom: 2px solid rgba(247,189,22,.4) !important; transition: color .15s ease, border-color .15s ease;
}
#loginModal#loginModal .auth-create-btn:hover { color: var(--st-gold-1) !important; border-bottom-color: var(--st-gold-1) !important; }
#loginModal#loginModal #loginLoggedIn .auth-create-btn {
  padding: 10px 14px !important; border: 0 !important; border-radius: 12px !important; color: #e6ebf8 !important; background: var(--st-raise) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.2) !important;
}

/* trust footer */
#loginModal#loginModal .auth-footer-features { gap: 8px !important; padding-top: 16px !important; border-top: 0 !important; position: relative; }
#loginModal#loginModal .auth-footer-features::before { content: ""; position: absolute; top: 0; left: 8%; right: 8%; height: 2px; border-radius: 2px; background: linear-gradient(90deg, transparent, rgba(255,255,255,.16), transparent); }
#loginModal#loginModal .feature-item { gap: 6px !important; }
#loginModal#loginModal .feature-item > svg {
  box-sizing: content-box; width: 17px !important; height: 17px !important; padding: 9px; border-radius: 13px; stroke: var(--st-gold-2) !important; background: var(--st-sunk);
  box-shadow: none;
}
#loginModal#loginModal .feature-item .fill-icon { fill: var(--st-gold-2) !important; stroke: none !important; }
#loginModal#loginModal .feature-item b { font-family: var(--st-display) !important; font-size: 10.5px !important; font-weight: 800 !important; color: #fff !important; text-transform: none !important; }
#loginModal#loginModal .feature-item span { font-family: var(--st-body) !important; font-size: 9.5px !important; font-weight: 600 !important; color: #7f8aa8 !important; text-transform: none !important; }

/* logged-in state */
#loginModal#loginModal .logged-in-panel .logged-badge { font-family: var(--st-display); font-weight: 900; letter-spacing: 1.4px; }
#loginModal#loginModal .logged-in-panel .account-avatar { box-shadow: 0 0 0 3px #2a3148 !important; }

@media (max-width: 560px) {
  #loginModal#loginModal .login-box.premium-auth-card { max-width: calc(100vw - 20px) !important; padding: 16px 16px 14px !important; border-radius: 24px !important; margin-top: 22px !important; }
  #loginModal#loginModal .logo-gaming-text { font-size: 23px !important; }
  #loginModal#loginModal .clean-auth-logo { height: 38px !important; }
  #loginModal#loginModal .auth-tab { font-size: 10px !important; }
}
@media (prefers-reduced-motion: reduce) {
  .premium-section-heading *, .premium-section-heading::after, #offers#offers #offerFilters > .filter::after, #loginModal#loginModal * { animation: none !important; }
}


/* Align Best Deals and Sort with the left/right edges of the offer-card grid. */
#offers#offers .offer-sort-row {
  box-sizing: border-box !important;
  padding-inline: 14px !important;
}
@media (max-width: 600px) {
  #offers#offers .offer-sort-row { padding-inline: 9px !important; }
}

/* FINAL MOBILE ALIGNMENT: match Best Deals / Sort edges to the offer-card grid. */
@media (max-width: 600px) {
  #offers#offers .offer-sort-row {
    width: calc(100% + 44px) !important;
    margin-left: -22px !important;
    margin-right: 0 !important;
    box-sizing: border-box !important;
  }
}

/* Draw the profile close X with CSS so broken text-encoding can never replace it. */
#profileModal#profileModal .profile-close-v2 {
  position: absolute !important;
  font-size: 0 !important;
  line-height: 0 !important;
  text-indent: -9999px !important;
  overflow: hidden !important;
  color: #f4f6fb !important;
}
#profileModal#profileModal .profile-close-v2 > svg {
  display: none !important;
}
#profileModal#profileModal .profile-close-v2::before,
#profileModal#profileModal .profile-close-v2::after {
  content: "" !important;
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  width: 14px !important;
  height: 2px !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 2px !important;
  background: #f4f6fb !important;
  box-shadow: none !important;
  display: block !important;
  pointer-events: none !important;
}
#profileModal#profileModal .profile-close-v2::before {
  transform: translate(-50%, -50%) rotate(45deg) !important;
}
#profileModal#profileModal .profile-close-v2::after {
  transform: translate(-50%, -50%) rotate(-45deg) !important;
}



/* FINAL CLOSE ICON FIX V3: use real SVG icons instead of encoding-dependent text glyphs. */
#loginModal#loginModal .close-btn-new {
  font-size: 0 !important;
  line-height: 0 !important;
  color: #f4f6fb !important;
  text-indent: 0 !important;
  overflow: hidden !important;
}
#loginModal#loginModal .close-btn-new > svg {
  display: block !important;
  width: 16px !important;
  height: 16px !important;
  flex: 0 0 16px !important;
  stroke: currentColor !important;
  fill: none !important;
  pointer-events: none !important;
}
#loginModal#loginModal .close-btn-new::before,
#loginModal#loginModal .close-btn-new::after {
  content: none !important;
  display: none !important;
}
#profileModal#profileModal .profile-close-v2 {
  font-size: 0 !important;
  line-height: 0 !important;
  text-indent: 0 !important;
  overflow: hidden !important;
}
#profileModal#profileModal .profile-close-v2 > svg {
  display: block !important;
  width: 14px !important;
  height: 14px !important;
  flex: 0 0 14px !important;
  stroke: currentColor !important;
  fill: none !important;
  pointer-events: none !important;
}
#profileModal#profileModal .profile-close-v2::before,
#profileModal#profileModal .profile-close-v2::after {
  content: none !important;
  display: none !important;
}

/* v11: simple typography + flat VIP-tier layout. Use one system font and remove the extra outer VIP container. */
#offerModal, #offerModal * {
  font-family: Arial, Helvetica, sans-serif !important;
  font-synthesis: none !important;
}
#offerModal .vip-showcase {
  display: block !important;
  width: 100% !important;
  max-width: none !important;
  box-sizing: border-box !important;
  margin: 8px 0 16px !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  outline: 0 !important;
}
#offerModal .vip-showcase-title,
#offerModal .vip-level-grid {
  width: 100% !important;
  max-width: none !important;
  box-sizing: border-box !important;
}
#offerModal .vip-showcase-title {
  margin: 0 0 12px !important;
  padding: 12px 14px !important;
}
#offerModal .vip-level-grid {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 10px !important;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}
#offerModal .vip-level-card {
  width: 100% !important;
  min-width: 0 !important;
  min-height: 132px !important;
  box-sizing: border-box !important;
  margin: 0 !important;
  padding: 12px !important;
}
#offerModal .vip-level-card .vip-level-head {
  margin: -12px -12px 10px !important;
  padding: 10px 12px !important;
}
#offerModal .vip-showcase-title,
#offerModal .vip-level-card,
#offerModal .vip-level-card * {
  font-family: Arial, Helvetica, sans-serif !important;
  font-synthesis: none !important;
}
@media (max-width: 360px) {
  #offerModal .vip-level-grid { gap: 7px !important; }
  #offerModal .vip-level-card { padding: 9px !important; min-height: 124px !important; }
  #offerModal .vip-level-card .vip-level-head { margin: -9px -9px 8px !important; padding: 8px 9px !important; }
}