/* ═══════════════════════════════════════════════════════════════════
   LI GAMING BD — OFFER POPUP  (pro 3D)
   Same visual language as the profile panel + offer cards:
   raised slate surfaces, borderless, soft inner highlights,
   gold / red / blue 3D buttons with a solid "ledge".
   Loaded LAST. Selector prefix #offerModal#offerModal (two ids) so it
   wins over every older layer in styles-v9x.css.
   ═══════════════════════════════════════════════════════════════════ */

:root {
  --om-gold-1: #ffe58f;
  --om-gold-2: #f7bd16;
  --om-gold-3: #d98f00;
  --om-gold-ledge: #8a5600;
  --om-ink: #2a1a00;
  --om-slate-a: #2d3347;
  --om-slate-b: #20263a;
  --om-slate-c: #191e2e;
  --om-text: #e8ecf6;
  --om-muted: #98a3bd;
}

/* ───────── overlay + wrapper (the wrapper itself is invisible) ───────── */
#offerModal#offerModal {
  padding: 12px !important;
  background: radial-gradient(120% 80% at 50% 18%, rgba(16, 24, 44, .84) 0%, rgba(3, 6, 14, .93) 100%) !important;
}
#offerModal#offerModal #offerModalBox {
  position: relative !important;
  display: block !important;
  width: 100% !important;
  max-width: 460px !important;
  height: auto !important;
  max-height: none !important;
  margin: 0 auto !important;
  padding: 0 !important;
  overflow: visible !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: none !important;
  box-shadow: none !important;
  filter: none !important;
  transform: none !important;
  opacity: 1 !important;
  animation: none !important;
}
#offerModal#offerModal #offerModalBox::before,
#offerModal#offerModal #offerModalBox::after { display: none !important; content: none !important; }

/* ───────── the visible panel ───────── */
#offerModal#offerModal .om-panel {
  position: relative;
  display: flex;
  flex-direction: column;
  max-height: min(92vh, 800px);
  max-height: min(calc(100dvh - 24px), 800px);
  border-radius: 26px;
  overflow: hidden;
  color: var(--om-text);
  font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  background: linear-gradient(180deg, var(--om-slate-a) 0%, var(--om-slate-b) 46%, var(--om-slate-c) 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .12);
  animation: om-panel-in .4s cubic-bezier(.2, .85, .25, 1) both;
  transform: translateZ(0);
}
/* when the hero image flies up from the card, the panel only fades (so the target rect stays still) */
#offerModal#offerModal.om-fly-mode .om-panel { animation: om-panel-fade .3s ease-out both; }

@keyframes om-panel-in { from { opacity: 0; transform: translateY(46px) scale(.94); } to { opacity: 1; transform: none; } }
@keyframes om-panel-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes om-up { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
@keyframes om-hero-rise { from { opacity: 0; transform: translateY(90px) scale(.9); } to { opacity: 1; transform: none; } }
@keyframes om-sheen { 0%, 55% { left: -70%; } 100% { left: 150%; } }

/* ───────── close button ───────── */
#offerModal#offerModal .offer-modal-close {
  position: absolute !important;
  top: 22px !important;
  right: 22px !important;
  float: none !important;
  margin: 0 !important;
  z-index: 20 !important;
  display: grid !important;
  place-items: center !important;
  width: 36px !important;
  height: 36px !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 50% !important;
  color: #fff !important;
  font-size: 0 !important;
  line-height: 1 !important;
  cursor: pointer !important;
  opacity: 1 !important;
  background: linear-gradient(180deg, rgba(58, 66, 90, .92) 0%, rgba(26, 31, 47, .94) 100%) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .22) !important;
  transition: transform .15s ease, box-shadow .15s ease, background .2s !important;
  -webkit-tap-highlight-color: transparent;
}
#offerModal#offerModal .offer-modal-close.is-scrolling { opacity: 1 !important; transform: none !important; }
#offerModal#offerModal .offer-modal-close:hover { transform: scale(1.06) !important; }
#offerModal#offerModal .offer-modal-close:active {
  transform: translateY(2px) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .18), 0 0 0 rgba(0, 0, 0, 0) !important;
}
#offerModal#offerModal .offer-modal-close svg { width: 15px; height: 15px; stroke-width: 2.6; }

/* ───────── scroll area ───────── */
#offerModal#offerModal .om-scroll {
  flex: 1 1 auto;
  min-height: 0;
  padding: 12px 12px 8px;
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
#offerModal#offerModal .om-scroll::-webkit-scrollbar { width: 0; height: 0; }

/* ───────── HERO — identical to the card image: 16:9, cover, rounded ───────── */
#offerModal#offerModal .om-hero {
  position: relative !important;
  display: block !important;
  float: none !important;
  width: 100% !important;
  height: auto !important;
  max-height: none !important;
  aspect-ratio: 16 / 9 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 16px !important;
  overflow: hidden !important;
  background: #0a0f1c !important;
  box-shadow: none !important;
  transform: none;
}
#offerModal#offerModal .om-hero.om-hero-rise { animation: om-hero-rise .5s cubic-bezier(.2, .85, .25, 1) both; }
#offerModal#offerModal .om-hero img,
#offerModal#offerModal .om-hero video {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  max-height: none !important;
  margin: 0 !important;
  object-fit: cover !important;
  object-position: center !important;
  border-radius: 0 !important;
  transform: none !important;
  filter: none !important;
}
#offerModal#offerModal .om-hero::before { content: none !important; display: none !important; }
#offerModal#offerModal .om-hero::after {
  content: "" !important;
  display: block !important;
  position: absolute !important;
  inset: 0 !important;
  pointer-events: none !important;
  background: linear-gradient(180deg, rgba(255, 255, 255, .05) 0%, rgba(0, 0, 0, 0) 25%, rgba(0, 0, 0, 0) 70%, rgba(8, 11, 22, .38) 100%) !important;
}

/* flying clone (JS) — lifts the card picture into the popup */
.om-fly {
  position: fixed;
  z-index: 100000;
  margin: 0;
  overflow: hidden;
  border-radius: 16px;
  pointer-events: none;
  will-change: transform;
  background: #0a0f1c;
  box-shadow: none;
}
.om-fly img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center; }

/* ───────── body ───────── */
#offerModal#offerModal .om-body {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 16px 4px 6px;
}
#offerModal#offerModal .om-body > * { animation: om-up .5s cubic-bezier(.2, .8, .2, 1) both; margin: 0 !important; }
#offerModal#offerModal .om-body > :nth-child(1) { animation-delay: .10s; }
#offerModal#offerModal .om-body > :nth-child(2) { animation-delay: .14s; }
#offerModal#offerModal .om-body > :nth-child(3) { animation-delay: .18s; }
#offerModal#offerModal .om-body > :nth-child(4) { animation-delay: .22s; }
#offerModal#offerModal .om-body > :nth-child(5) { animation-delay: .26s; }
#offerModal#offerModal .om-body > :nth-child(6) { animation-delay: .30s; }
#offerModal#offerModal .om-body > :nth-child(n+7) { animation-delay: .34s; }
#offerModal#offerModal.om-fly-mode .om-body > :nth-child(1) { animation-delay: .28s; }
#offerModal#offerModal.om-fly-mode .om-body > :nth-child(2) { animation-delay: .31s; }
#offerModal#offerModal.om-fly-mode .om-body > :nth-child(3) { animation-delay: .34s; }
#offerModal#offerModal.om-fly-mode .om-body > :nth-child(4) { animation-delay: .37s; }
#offerModal#offerModal.om-fly-mode .om-body > :nth-child(5) { animation-delay: .40s; }
#offerModal#offerModal.om-fly-mode .om-body > :nth-child(6) { animation-delay: .43s; }
#offerModal#offerModal.om-fly-mode .om-body > :nth-child(n+7) { animation-delay: .46s; }

/* badges */
#offerModal#offerModal .om-badges { display: flex; flex-wrap: wrap; gap: 7px; }
#offerModal#offerModal .om-badges:empty { display: none; }
#offerModal#offerModal .om-badges .badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 25px;
  padding: 0 11px;
  border: 0 !important;
  border-radius: 9px;
  font: 700 10.5px/1 'Inter', system-ui, sans-serif;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: #c6d0e8;
  background: linear-gradient(180deg, #2b3246 0%, #222839 100%) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .09);
  text-shadow: none;
}
#offerModal#offerModal .om-badges .badge svg { width: 13px; height: 13px; }
#offerModal#offerModal .om-badges .no-login-badge {
  color: #7ff3c4;
  background: linear-gradient(180deg, #1d3a37 0%, #16302f 100%) !important;
  box-shadow: inset 0 1px 0 rgba(127, 243, 196, .18);
}
#offerModal#offerModal .om-badges .vip-badge {
  color: #ffd466;
  background: linear-gradient(180deg, #3b3320 0%, #2d2718 100%) !important;
  box-shadow: inset 0 1px 0 rgba(255, 212, 102, .18);
}
#offerModal#offerModal .om-badges .badge img { width: 15px; height: 15px; }

/* title */
#offerModal#offerModal .om-title {
  font: 800 21px/1.22 'Sora', 'Inter', system-ui, sans-serif !important;
  letter-spacing: -.005em;
  color: #f6f8fd !important;
  text-shadow: none;
  background: none !important;
  -webkit-text-fill-color: currentColor !important;
  padding: 0 !important;
}

/* price row — same pills as the offer cards, just larger */
#offerModal#offerModal .om-price-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 12px;
}
#offerModal#offerModal .om-price {
  display: inline-flex;
  align-items: center;
  height: 38px;
  padding: 0 17px;
  border-radius: 12px;
  font: 800 20px/1 'Sora', system-ui, sans-serif;
  color: var(--om-ink);
  text-shadow: none;
  background: linear-gradient(180deg, var(--om-gold-1) 0%, var(--om-gold-2) 58%, var(--om-gold-3) 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .7);
}
#offerModal#offerModal .om-old {
  font: 700 15px/1 'Inter', system-ui, sans-serif;
  color: #b4bdd2;
  text-decoration: line-through;
  text-decoration-color: #ff6573;
  text-decoration-thickness: 1.8px;
  text-shadow: none;
}
#offerModal#offerModal .om-off {
  position: relative;
  overflow: hidden;
  margin-left: auto !important;
  display: inline-flex;
  align-items: center;
  height: 32px;
  padding: 0 12px;
  border-radius: 10px;
  font: 800 12.5px/1 'Sora', system-ui, sans-serif;
  letter-spacing: .01em;
  color: #fff;
  text-shadow: none;
  background: linear-gradient(180deg, #ff6f80 0%, #ec3b4f 55%, #c8152f 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .5);
}
#offerModal#offerModal .om-off::after {
  content: "";
  position: absolute;
  top: 0;
  left: -70%;
  width: 45%;
  height: 100%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .55), transparent);
  transform: skewX(-20deg);
  animation: om-sheen 3.6s ease-in-out infinite;
}
#offerModal#offerModal .om-nologin-line {
  display: flex;
  align-items: center;
  gap: 7px;
  font: 700 11px/1 'Inter', system-ui, sans-serif;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #7ff3c4;
}
#offerModal#offerModal .om-nologin-line svg { width: 14px; height: 14px; }

/* shared line-icon style */
.om-i { width: 1em; height: 1em; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex: 0 0 auto; }

/* ───────── included items ───────── */
#offerModal#offerModal .offer-qty-list {
  display: block !important;
  padding: 0 !important;
  background: none !important;
  box-shadow: none !important;
  border: 0 !important;
}
#offerModal#offerModal .offer-qty-heading,
#offerModal#offerModal .vip-showcase-title small {
  display: flex !important;
  align-items: center;
  gap: 10px;
  margin: 0 0 9px !important;
  padding: 0 !important;
  font: 800 10.5px/1 'Inter', system-ui, sans-serif !important;
  letter-spacing: .16em !important;
  text-transform: uppercase;
  color: #8e9ab6 !important;
  background: none !important;
  text-shadow: none !important;
}
#offerModal#offerModal .offer-qty-heading::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: linear-gradient(180deg, var(--om-gold-1), var(--om-gold-3));
  box-shadow: 0 0 0 3px rgba(247, 189, 22, .15);
}
#offerModal#offerModal .offer-qty-heading::after {
  content: "";
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, rgba(255, 255, 255, .14), transparent);
}
#offerModal#offerModal .offer-qty-items {
  display: flex !important;
  gap: 9px !important;
  padding: 3px 2px 9px !important;
  overflow-x: auto !important;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: x proximity;
}
#offerModal#offerModal .offer-qty-items::-webkit-scrollbar { display: none; }
#offerModal#offerModal .offer-qty-item {
  flex: 0 0 80px !important;
  min-width: 80px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 3px !important;
  padding: 9px 5px 8px !important;
  border: 0 !important;
  border-radius: 14px !important;
  scroll-snap-align: start;
  background: linear-gradient(180deg, #2f364b 0%, #232939 100%) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1) !important;
}
#offerModal#offerModal .offer-qty-item::before,
#offerModal#offerModal .offer-qty-item::after { display: none !important; }
#offerModal#offerModal .offer-qty-icon {
  flex: 0 0 38px !important;
  width: 38px !important;
  height: 38px !important;
  margin: 0 !important;
  display: grid !important;
  place-items: center !important;
}
#offerModal#offerModal .offer-qty-icon img,
#offerModal#offerModal .offer-qty-icon svg,
#offerModal#offerModal .offer-qty-icon .icon-inline {
  width: 34px !important;
  height: 34px !important;
  max-width: 100% !important;
  max-height: 100% !important;
  object-fit: contain !important;
  filter: none;
}
#offerModal#offerModal .offer-qty-item > span {
  margin: 0 !important;
  font: 600 9.5px/1.1 'Inter', system-ui, sans-serif !important;
  letter-spacing: .02em;
  color: var(--om-muted) !important;
  text-align: center;
}
#offerModal#offerModal .offer-qty-item > b {
  display: flex !important;
  align-items: baseline !important;
  justify-content: center !important;
  gap: 3px !important;
  margin: 0 !important;
  font: 800 13.5px/1.1 'Sora', system-ui, sans-serif !important;
  color: #fff !important;
  text-shadow: none;
}
#offerModal#offerModal .offer-qty-item .qty-unit,
#offerModal#offerModal .offer-qty-item small {
  font: 600 9px/1 'Inter', system-ui, sans-serif !important;
  color: #8fa0c0 !important;
}

/* ───────── detail strip (sunken panel, raised read-outs) ───────── */
#offerModal#offerModal .offer-detail-strip {
  display: grid !important;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  gap: 0 !important;
  padding: 5px !important;
  border: 0 !important;
  border-radius: 17px !important;
  background: linear-gradient(180deg, #171b29 0%, #1b2030 100%) !important;
  box-shadow: none !important;
}
#offerModal#offerModal .offer-detail-strip > div {
  position: relative;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 5px !important;
  min-width: 0;
  padding: 10px 4px !important;
  border: 0 !important;
  background: none !important;
  box-shadow: none !important;
  text-align: center;
}
#offerModal#offerModal .offer-detail-strip > div + div::before {
  content: "" !important;
  display: block !important;
  position: absolute;
  left: 0;
  top: 22%;
  bottom: 22%;
  width: 1px;
  background: linear-gradient(180deg, transparent, rgba(255, 255, 255, .13), transparent);
}
#offerModal#offerModal .offer-detail-strip small {
  font: 700 9px/1 'Inter', system-ui, sans-serif !important;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #7e8aa6 !important;
}
#offerModal#offerModal .offer-detail-strip b {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  max-width: 100%;
  font: 700 12.5px/1.2 'Inter', system-ui, sans-serif !important;
  color: #eef2fb !important;
  overflow-wrap: anywhere;
}
#offerModal#offerModal .offer-detail-strip b img { width: 16px; height: 16px; }

/* ───────── access + trust cards ───────── */
#offerModal#offerModal .modal-access,
#offerModal#offerModal .offer-trust-mini {
  display: flex !important;
  align-items: flex-start !important;
  gap: 13px !important;
  padding: 13px 14px !important;
  border: 0 !important;
  border-radius: 18px !important;
  text-align: left !important;
  background: linear-gradient(180deg, #262c3d 0%, #1c2131 100%) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08) !important;
}
#offerModal#offerModal .modal-access::before,
#offerModal#offerModal .modal-access::after,
#offerModal#offerModal .offer-trust-mini::before,
#offerModal#offerModal .offer-trust-mini::after { display: none !important; }

#offerModal#offerModal .om-tile {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 13px;
  font-size: 20px;
}
#offerModal#offerModal .om-tile svg { width: 21px; height: 21px; }
#offerModal#offerModal .om-tile-green {
  color: #04382a;
  background: linear-gradient(180deg, #7ef7c1 0%, #35d996 55%, #1fae78 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .65);
}
#offerModal#offerModal .om-tile-amber {
  color: var(--om-ink);
  background: linear-gradient(180deg, var(--om-gold-1) 0%, var(--om-gold-2) 58%, var(--om-gold-3) 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .7);
}
#offerModal#offerModal .om-tile-blue {
  color: #06214f;
  background: linear-gradient(180deg, #a6d0ff 0%, #5aa7ff 55%, #2f7bf0 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .7);
}
#offerModal#offerModal .om-access-copy,
#offerModal#offerModal .om-trust-copy {
  display: flex;
  flex-direction: column;
  gap: 5px;
  min-width: 0;
  flex: 1;
}
#offerModal#offerModal .om-access-copy strong {
  display: block;
  font: 800 12.5px/1.2 'Sora', system-ui, sans-serif;
  letter-spacing: .05em;
}
#offerModal#offerModal .no-login-access .om-access-copy strong { color: #7ff3c4; }
#offerModal#offerModal .login-access .om-access-copy strong { color: #ffd466; }
#offerModal#offerModal .om-access-copy > span,
#offerModal#offerModal .om-trust-copy > span {
  display: block;
  font: 500 12px/1.5 'Inter', system-ui, sans-serif;
  color: #aab4cc;
}
#offerModal#offerModal .loyalty-detail,
#offerModal#offerModal .vpn-rule {
  display: inline-flex !important;
  align-items: center;
  gap: 7px;
  margin: 4px 0 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: none !important;
  box-shadow: none !important;
  font: 700 11.5px/1.4 'Inter', system-ui, sans-serif !important;
}
#offerModal#offerModal .loyalty-detail { color: #ffe08a !important; }
#offerModal#offerModal .loyalty-detail img { width: 18px; height: 18px; object-fit: contain; }
#offerModal#offerModal .vpn-rule { color: #8fd0ff !important; }
#offerModal#offerModal .vpn-rule svg { width: 15px; height: 15px; }
#offerModal#offerModal .om-trust-copy > b {
  display: block;
  font: 800 12.5px/1.2 'Sora', system-ui, sans-serif;
  letter-spacing: .02em;
  color: #cfe3ff;
}
#offerModal#offerModal .om-trust-copy > em {
  display: block;
  margin-top: 2px;
  font: 700 10px/1.4 'Inter', system-ui, sans-serif;
  font-style: normal;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #7e8aa6;
}

/* the legacy blocks keep their own look, only tidy their outer rhythm */
#offerModal#offerModal .vip-showcase,
#offerModal#offerModal .cue-info-showcase { margin: 0 !important; }
#offerModal#offerModal .cue-sl-v5 { margin: 0 !important; }
#offerModal#offerModal .vip-showcase {
  /* Keep the existing VIP heading and six tier cards, but remove the extra panel around them. */
  margin: 4px 0 20px !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  outline: 0 !important;
  background: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
}

/* ───────── FOOTER — always visible: Buy Now + Add to Cart ───────── */
#offerModal#offerModal .om-footer {
  position: relative !important;
  inset: auto !important;
  z-index: 3;
  flex: 0 0 auto;
  display: grid !important;
  grid-template-columns: 1.15fr 1fr !important;
  gap: 12px !important;
  width: auto !important;
  margin: 0 !important;
  padding: 15px 14px calc(19px + env(safe-area-inset-bottom, 0px)) !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: linear-gradient(180deg, #1c2131 0%, #151927 100%) !important;
  box-shadow: none !important;
  animation: om-up .5s .18s cubic-bezier(.2, .8, .2, 1) both;
}
#offerModal#offerModal .om-footer::before,
#offerModal#offerModal .om-footer::after { display: none !important; }

#offerModal#offerModal .om-footer .om-btn {
  /* the old stylesheet has a stray `.btn{opacity:0;visibility:hidden;position:fixed;inset:0}` rule — undo it here */
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
  inset: auto !important;
  z-index: auto !important;
  will-change: auto !important;
  position: relative !important;
  overflow: hidden !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 9px !important;
  width: 100% !important;
  height: 56px !important;
  min-height: 56px !important;
  margin: 0 !important;
  padding: 0 10px !important;
  border: 0 !important;
  border-radius: 17px !important;
  font: 800 15px/1 'Sora', 'Inter', system-ui, sans-serif !important;
  letter-spacing: .01em !important;
  text-transform: none !important;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  animation: none !important;
  transform: translateY(0) !important;
  transition: transform .12s ease, box-shadow .12s ease, filter .2s ease !important;
}
#offerModal#offerModal .om-footer .om-btn::before { display: none !important; content: none !important; }
#offerModal#offerModal .om-footer .om-btn::after {
  content: "" !important;
  display: block !important;
  position: absolute;
  top: 0;
  left: -70%;
  width: 40%;
  height: 100%;
  pointer-events: none;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .5), transparent) !important;
  transform: skewX(-20deg);
  animation: om-sheen 4s ease-in-out infinite !important;
}
#offerModal#offerModal .om-footer .om-cart::after { animation-delay: 1.3s !important; }

#offerModal#offerModal .om-btn-ico {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 11px;
  background: rgba(0, 0, 0, .15);
  box-shadow: none;
}
#offerModal#offerModal .om-btn-ico svg { width: 19px; height: 19px; }
#offerModal#offerModal .om-btn-txt { white-space: nowrap; }

/* Buy Now — gold */
#offerModal#offerModal .om-footer .om-buy {
  color: var(--om-ink) !important;
  text-shadow: none !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .34) 0%, rgba(255, 255, 255, 0) 52%),
    linear-gradient(180deg, var(--om-gold-1) 0%, var(--om-gold-2) 55%, var(--om-gold-3) 100%) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .85) !important;
}
#offerModal#offerModal .om-footer .om-buy:hover { filter: brightness(1.06); }
#offerModal#offerModal .om-footer .om-buy:active {
  transform: translateY(4px) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .8) !important;
}

/* Add to Cart — blue */
#offerModal#offerModal .om-footer .om-cart {
  color: #fff !important;
  text-shadow: none !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .3) 0%, rgba(255, 255, 255, 0) 52%),
    linear-gradient(180deg, #62adff 0%, #327ff2 55%, #2058c8 100%) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .6) !important;
}
#offerModal#offerModal .om-footer .om-cart:hover { filter: brightness(1.07); }
#offerModal#offerModal .om-footer .om-cart:active {
  transform: translateY(4px) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .55) !important;
}

/* ───────── small phones ───────── */
@media (max-width: 380px) {
  #offerModal#offerModal .om-title { font-size: 19px !important; }
  #offerModal#offerModal .om-footer { gap: 9px !important; padding-left: 11px !important; padding-right: 11px !important; }
  #offerModal#offerModal .om-footer .om-btn { font-size: 13.5px !important; gap: 7px !important; }
  #offerModal#offerModal .om-btn-ico { width: 30px; height: 30px; border-radius: 10px; }
  #offerModal#offerModal .om-btn-ico svg { width: 17px; height: 17px; }
}

@media (prefers-reduced-motion: reduce) {
  #offerModal#offerModal .om-panel,
  #offerModal#offerModal .om-body > *,
  #offerModal#offerModal .om-footer,
  #offerModal#offerModal .om-hero.om-hero-rise { animation: none !important; }
  #offerModal#offerModal .om-footer .om-btn::after,
  #offerModal#offerModal .om-off::after { animation: none !important; }
}

/* Fix only the start edge when Included Items are wider than the viewport.
   Keep the original centred layout when all cards fit. */
#offerModal#offerModal .offer-qty-items.has-overflow { justify-content: flex-start !important; }


/* October 15 fix: stable mobile scrolling inside the offer panel without page bleed. */
body.offer-modal-open { overflow: hidden !important; touch-action: auto !important; overscroll-behavior: none !important; }
#offerModal#offerModal .om-panel { animation: om-panel-fade .2s ease-out both !important; transform: translateZ(0) !important; backface-visibility: hidden !important; -webkit-backface-visibility: hidden !important; }
#offerModal#offerModal .om-scroll { min-height: 0 !important; touch-action: pan-y !important; overscroll-behavior: contain !important; -webkit-overflow-scrolling: touch !important; }