/* Home page trust tiles and highlighted offer alignment. */
.pool-trust-strip {
  align-items: stretch !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 8px !important;
  margin-inline: 4px !important;
}

.pool-trust-strip .pts-tile {
  box-sizing: border-box !important;
  width: 100% !important;
  min-height: 50px !important;
  height: 100% !important;
  justify-content: center !important;
  padding: 4px 3px !important;
  background: linear-gradient(145deg, rgba(255,255,255,.3) 0%, rgba(255,255,255,0) 46%), linear-gradient(145deg, var(--tc1), var(--tc2)) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.42), inset 0 -2px 4px rgba(0,0,0,.22), 0 0 10px color-mix(in srgb, var(--tc1) 14%, transparent) !important;
}

.pool-trust-strip .pts-ico {
  width: 21px !important;
  height: 21px !important;
  flex-basis: 21px !important;
  box-shadow: inset 0 1px 0 #fff, inset 0 -2px 3px rgba(0,0,0,.12) !important;
}

.pool-trust-strip .pts-copy b { font-size: 11.5px !important; }
.pool-trust-strip .pts-copy small { display: none !important; }

html body section#pool#pool#pool#pool.hero:not(#zz) {
  border: 0 !important;
  outline: 0 !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.14), 0 12px 26px rgba(1,7,16,.32), 0 0 20px rgba(44,204,255,.12) !important;
}

html body section#pool#pool#pool#pool.hero::after {
  border: 0 !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.16) !important;
}

@media (max-width: 600px) {
  .pool-trust-strip .pts-copy b { font-size: clamp(8.5px, 3vw, 10px) !important; }
}

.selected-offers-section { margin-top: 12px !important; }
.latest-offers-heading { display: none !important; }
html body #selectedOffersSection#selectedOffersSection:not(#zz) { margin-top: 12px !important; }
html body .latest-offers-heading.latest-offers-heading:not(#zz) { display: none !important; }

#heroHighlights.selected-offers {
  display: grid !important;
  width: 100% !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  grid-auto-rows: 1fr !important;
  align-items: stretch !important;
  justify-items: stretch !important;
  justify-content: stretch !important;
  gap: 12px !important;
  padding: 0 !important;
  box-sizing: border-box !important;
}

html body #heroHighlights#heroHighlights.selected-offers:not(#zz) {
  margin-left: 0 !important;
  margin-right: 0 !important;
}

#heroHighlights.selected-offers > .selected-offer-wrap {
  display: flex !important;
  flex-direction: column !important;
  align-self: stretch !important;
  justify-self: stretch !important;
  width: 100% !important;
  min-width: 0 !important;
  height: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  transform: none !important;
  gap: 0 !important;
}

#heroHighlights .selected-offer-badge.sob-pro {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex: 0 0 22px !important;
  width: 100% !important;
  min-width: 0 !important;
  height: 22px !important;
  min-height: 22px !important;
  margin: 0 0 4px !important;
  padding: 0 7px !important;
  gap: 5px !important;
  border: 1px solid rgba(247, 189, 22, .42) !important;
  border-radius: 999px !important;
  background: linear-gradient(180deg, #292514 0%, #17150f 100%) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.16), 0 2px 0 rgba(7,10,20,.45) !important;
  font-size: 9px !important;
  line-height: 1 !important;
  letter-spacing: .045em !important;
}

#heroHighlights .selected-offer-badge.sob-pro .sob-main,
#heroHighlights .selected-offer-badge.sob-pro .sob-accent {
  flex: 0 1 auto !important;
  min-width: 0 !important;
  font-size: clamp(8px, 2.8vw, 10px) !important;
  line-height: 1 !important;
  letter-spacing: .025em !important;
}

#heroHighlights .sob-pro .sob-dot { flex-basis: 5px !important; width: 5px !important; height: 5px !important; }
#heroHighlights .sob-pro .sob-sep { flex-basis: 1px !important; height: 9px !important; }

#heroHighlights .lx-card.lx-feature {
  flex: 1 1 auto !important;
  width: 100% !important;
  height: 100% !important;
  min-width: 0 !important;
  margin: 0 !important;
  transform: none !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.09) !important;
}

#heroHighlights .lx-card.lx-feature .lx-frame,
#heroHighlights .lx-card.lx-feature .lx-media {
  width: 100% !important;
}

#heroHighlights .lx-card.lx-feature .lx-media {
  box-shadow: none !important;
}

#heroHighlights .lx-card.lx-feature .lx-media::before { content: none !important; }

@media (max-width: 700px) {
  #heroHighlights.selected-offers {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    grid-auto-rows: 1fr !important;
    gap: 10px 8px !important;
  }

  #heroHighlights .selected-offer-badge.sob-pro {
    flex-basis: 21px !important;
    height: 21px !important;
    min-height: 21px !important;
    margin-bottom: 5px !important;
    padding-inline: 5px !important;
    gap: 4px !important;
  }

  #heroHighlights .selected-offer-badge.sob-pro .sob-main,
  #heroHighlights .selected-offer-badge.sob-pro .sob-accent {
    font-size: clamp(7.5px, 2.5vw, 9px) !important;
  }
}

@media (max-width: 370px) {
  #heroHighlights .selected-offer-badge.sob-pro { letter-spacing: 0 !important; }
  #heroHighlights .selected-offer-badge.sob-pro .sob-main,
  #heroHighlights .selected-offer-badge.sob-pro .sob-accent { font-size: 7.5px !important; }
}

@media (prefers-reduced-motion: reduce) {
  #heroHighlights .selected-offer-badge.sob-pro::after,
  #heroHighlights .sob-pro .sob-dot { animation: none !important; }
}

/* Beat the legacy premium rules while keeping a clean, shallow 3D edge. */
html body #heroHighlights#heroHighlights .selected-offer-badge.sob-pro:not(#zz) {
  height: 22px !important;
  min-height: 22px !important;
  margin: 0 !important;
  padding: 0 7px !important;
  gap: 5px !important;
  font-size: 9px !important;
  letter-spacing: .045em !important;
}

html body #heroHighlights#heroHighlights .selected-offer-badge.sob-pro .sob-main,
html body #heroHighlights#heroHighlights .selected-offer-badge.sob-pro .sob-accent {
  font-size: clamp(8px, 2.8vw, 10px) !important;
  letter-spacing: .025em !important;
}

html body #heroHighlights#heroHighlights.selected-offers .selected-offer-wrap:not(#zz) {
  gap: 0 !important;
}

html body #heroHighlights#heroHighlights .lx-card.lx-feature:not(#zz) {
  background: linear-gradient(155deg, #244b5d 0%, #17364b 42%, #10263c 100%) !important;
  box-shadow: inset 0 1px 0 rgba(204,248,255,.34), inset 0 -1px 0 rgba(2,15,25,.34) !important;
  transform: none !important;
}

html body #heroHighlights#heroHighlights .lx-card.lx-feature:not(#zz):hover,
html body #heroHighlights#heroHighlights .lx-card.lx-feature:not(#zz):active {
  transform: none !important;
}

html body #heroHighlights#heroHighlights .lx-card.lx-feature:not(#zz) .lx-media {
  box-shadow: inset 0 1px 0 rgba(225,250,255,.24), inset 0 -16px 22px rgba(1,10,18,.3) !important;
}

html body #heroHighlights#heroHighlights .lx-card.lx-feature:not(#zz) .lx-feature-info {
  flex-direction: row !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 5px !important;
  padding: 7px 5px 4px !important;
}

html body #heroHighlights#heroHighlights .lx-card.lx-feature:not(#zz) .lx-cash {
  display: -webkit-box !important;
  flex: 1 1 auto !important;
  width: auto !important;
  min-width: 0 !important;
  white-space: normal !important;
  overflow: hidden !important;
  -webkit-box-orient: vertical !important;
  -webkit-line-clamp: 2 !important;
  line-height: 1.2 !important;
  font-size: clamp(10px, 2.9vw, 12px) !important;
  font-weight: 850 !important;
  letter-spacing: .005em !important;
  color: #f2fbff !important;
  text-shadow: 0 1px 1px rgba(0,0,0,.34) !important;
}

html body #heroHighlights#heroHighlights .lx-card.lx-feature:not(#zz) .lx-price {
  flex: 0 0 auto !important;
  height: 25px !important;
  min-height: 25px !important;
  padding: 0 6px !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.72), 0 1px 0 #8f5b00 !important;
}

@media (max-width: 700px) {
  #selectedOffersSection.selected-offers-section {
    width: calc(100% + 20px) !important;
    margin-left: -10px !important;
    margin-right: -10px !important;
  }

  html body #heroHighlights#heroHighlights .selected-offer-badge.sob-pro:not(#zz) {
    height: 21px !important;
    min-height: 21px !important;
    margin-bottom: 4px !important;
    padding-inline: 5px !important;
    gap: 4px !important;
  }

  html body #heroHighlights#heroHighlights .selected-offer-badge.sob-pro .sob-main,
  html body #heroHighlights#heroHighlights .selected-offer-badge.sob-pro .sob-accent {
    font-size: clamp(8px, 2.8vw, 9px) !important;
  }
}

html body #heroHighlights#heroHighlights .selected-offer-badge.sob-pro:not(#zz) {
  margin-bottom: 4px !important;
}

html body #orderModal#orderModal .op-head.checkout-op-head:not(#zz) {
  gap: 14px !important;
}

html body #profileModal#profileModal:not(#zz) .profile-account-links::before {
  content: none !important;
  display: none !important;
}

html body #profileModal#profileModal:not(#zz) .pal-provider {
  min-width: 0 !important;
  overflow: hidden !important;
}

html body #profileModal#profileModal:not(#zz) .pal-provider > span:nth-child(2),
html body #profileModal#profileModal:not(#zz) .pal-provider b,
html body #profileModal#profileModal:not(#zz) .pal-provider small {
  min-width: 0 !important;
  max-width: 100% !important;
  white-space: normal !important;
  overflow-wrap: anywhere !important;
  word-break: normal !important;
}

html body #profileModal#profileModal:not(#zz) .pal-provider button {
  min-width: 0 !important;
  white-space: normal !important;
  overflow-wrap: anywhere !important;
}

html body #liPaidOrderGateChecking#liPaidOrderGateChecking:not(#zz) {
  z-index: 1200 !important;
  padding: 14px !important;
  background: rgba(5, 9, 20, .72) !important;
  -webkit-backdrop-filter: blur(5px) !important;
  backdrop-filter: blur(5px) !important;
}

html body #liPaidOrderGateChecking#liPaidOrderGateChecking:not(#zz):not(.is-error):not(.is-eps) {
  opacity: 1 !important;
  animation: none !important;
}

html body #liPaidOrderGateChecking#liPaidOrderGateChecking .li-paid-gate-card {
  width: min(100%, 310px) !important;
  max-height: calc(100dvh - 28px) !important;
  gap: 0 !important;
  padding: 19px 18px 16px !important;
  border: 1px solid rgba(151, 190, 255, .24) !important;
  border-radius: 22px !important;
  background: linear-gradient(155deg, #263b61 0%, #182946 48%, #101a30 100%) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.2), inset 0 -10px 24px rgba(1,7,20,.2), 0 18px 46px rgba(0,0,0,.52) !important;
}

html body #liPaidOrderGateChecking#liPaidOrderGateChecking .li-paid-gate-card::before {
  height: 3px !important;
  background: linear-gradient(90deg, #45e3ad, #ffe27a 50%, #60bbff) !important;
}

html body #liPaidOrderGateChecking#liPaidOrderGateChecking .lpg-scene {
  width: 72px !important;
  height: 72px !important;
  margin-bottom: 12px !important;
}

html body #liPaidOrderGateChecking#liPaidOrderGateChecking .lpg-orbit { inset: 0 !important; }
html body #liPaidOrderGateChecking#liPaidOrderGateChecking .lpg-orbit-2 { inset: 7px !important; }

html body #liPaidOrderGateChecking#liPaidOrderGateChecking .li-paid-gate-mark {
  width: 46px !important;
  height: 46px !important;
  font-size: 16px !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.85), inset 0 -3px 0 rgba(132,79,0,.4), 0 5px 12px rgba(0,0,0,.22) !important;
}

html body #liPaidOrderGateChecking#liPaidOrderGateChecking strong {
  font-size: 16px !important;
  line-height: 1.25 !important;
}

html body #liPaidOrderGateChecking#liPaidOrderGateChecking p {
  max-width: 250px !important;
  margin-top: 6px !important;
  font-size: 11.5px !important;
  line-height: 1.45 !important;
}

html body #liPaidOrderGateChecking#liPaidOrderGateChecking .lpg-steps {
  margin-top: 14px !important;
}

html body #liPaidOrderGateChecking#liPaidOrderGateChecking .lpg-steps li {
  gap: 6px !important;
  font-size: 8px !important;
  letter-spacing: .1em !important;
}

html body #liPaidOrderGateChecking#liPaidOrderGateChecking .lpg-steps li b {
  width: 22px !important;
  height: 22px !important;
}

html body #liPaidOrderGateChecking#liPaidOrderGateChecking .lpg-steps li + li::before {
  top: 10px !important;
}

html body #liPaidOrderGateChecking#liPaidOrderGateChecking .li-paid-gate-loader {
  height: 6px !important;
  margin-top: 15px !important;
}

html body #liPaidOrderGateChecking#liPaidOrderGateChecking .li-paid-gate-actions {
  margin-top: 12px !important;
}

@media (max-width: 420px) {
  html body #liPaidOrderGateChecking#liPaidOrderGateChecking .li-paid-gate-card {
    width: min(100%, 292px) !important;
    padding: 17px 15px 14px !important;
  }
}

/* Compact 3D Wallet and Rewards panels. */
html body #financeModal#financeModal .finance-modal-box {
  width: min(420px, 100%) !important;
  max-height: min(84dvh, 720px) !important;
  border: 1px solid rgba(164, 191, 243, .22) !important;
  border-radius: 23px !important;
  background:
    radial-gradient(90% 65% at 5% 0%, rgba(91, 140, 228, .18), transparent 75%),
    linear-gradient(155deg, #28365a 0%, #1c2947 42%, #111b32 100%) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.18), inset 0 -12px 26px rgba(1,8,23,.18), 0 20px 54px rgba(0,0,0,.48) !important;
}

html body #financeModal#financeModal .finance-modal-scroll {
  max-height: min(84dvh, 720px) !important;
  padding: 15px 15px 13px !important;
}

html body #financeModal#financeModal .finance-modal-heading {
  gap: 10px !important;
  margin: 0 40px 12px 0 !important;
}

html body #financeModal#financeModal .finance-modal-icon {
  width: 40px !important;
  height: 40px !important;
  flex-basis: 40px !important;
  border-radius: 13px !important;
  color: #332506 !important;
  background: linear-gradient(155deg, #fff0a7 0%, #ffd65a 43%, #e69b00 100%) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.85), inset 0 -3px 0 rgba(147,87,0,.35), 0 4px 10px rgba(0,0,0,.22) !important;
}

html body #financeModal#financeModal .finance-modal-heading h2 {
  font-size: 19px !important;
  letter-spacing: -.035em !important;
}

html body #financeModal#financeModal .finance-modal-close {
  top: 10px !important;
  right: 10px !important;
  width: 32px !important;
  height: 32px !important;
  border: 1px solid rgba(214,226,255,.16) !important;
  background: linear-gradient(150deg, rgba(102,122,166,.68), rgba(36,50,78,.88)) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.2), 0 2px 4px rgba(0,0,0,.24) !important;
}

html body #financeModal#financeModal .fm-wallet-overview {
  gap: 8px !important;
  margin-bottom: 8px !important;
}

html body #financeModal#financeModal .fm-wallet-overview .fm-balance-card {
  padding: 11px 13px !important;
  border: 1px solid rgba(152,185,250,.14) !important;
  border-radius: 15px !important;
  background: linear-gradient(145deg, rgba(75,102,158,.7), rgba(30,48,86,.96)) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.2), inset 0 -3px 0 rgba(4,12,33,.18), 0 3px 9px rgba(0,0,0,.14) !important;
}

html body #financeModal#financeModal .fm-wallet-overview .fm-balance-card > strong {
  margin: 3px 0 0 !important;
  font-size: 25px !important;
}

html body #financeModal#financeModal .fm-add-money-shortcut {
  min-width: 98px !important;
  border: 1px solid rgba(255,235,165,.44) !important;
  border-radius: 14px !important;
  background: linear-gradient(160deg, #fff0a0 0%, #ffd244 46%, #e6a000 100%) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.9), inset 0 -3px 0 rgba(150,91,0,.3), 0 4px 9px rgba(0,0,0,.2) !important;
}

html body #financeModal#financeModal .fm-topup-form {
  gap: 8px !important;
  margin: 0 !important;
  padding: 9px 10px 10px !important;
  border: 1px solid rgba(161,186,231,.12) !important;
  border-radius: 16px !important;
  background: linear-gradient(145deg, rgba(17,27,47,.76), rgba(13,22,39,.9)) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.07) !important;
}

html body #financeModal#financeModal .fm-quick-amounts button {
  min-height: 34px !important;
  border-color: rgba(169,194,241,.18) !important;
  border-radius: 10px !important;
  background: linear-gradient(155deg, #34476d, #202f50) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.12), 0 2px 0 rgba(6,14,31,.45) !important;
}

html body #financeModal#financeModal .fm-quick-amounts button.active {
  border-color: rgba(255,218,115,.55) !important;
  background: linear-gradient(155deg, #806528, #594315) !important;
  color: #ffebaa !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.22), 0 2px 0 rgba(35,24,4,.5) !important;
}

html body #financeModal#financeModal .fm-topup-row {
  gap: 8px !important;
}

html body #financeModal#financeModal .fm-topup-row input {
  height: 42px !important;
  border: 1px solid rgba(163,190,239,.18) !important;
  border-radius: 11px !important;
  background: linear-gradient(145deg, #101a2d, #0c1425) !important;
  box-shadow: inset 0 2px 5px rgba(0,0,0,.2), inset 0 1px 0 rgba(255,255,255,.035) !important;
}

html body #financeModal#financeModal .fm-topup-row button {
  height: 42px !important;
  min-height: 42px !important;
  border-radius: 12px !important;
  background: linear-gradient(155deg, #fff0a0 0%, #ffd044 48%, #e69b00 100%) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.88), inset 0 -3px 0 rgba(142,84,0,.28), 0 3px 7px rgba(0,0,0,.2) !important;
}

html body #financeModal#financeModal .fm-history {
  margin-top: 9px !important;
  padding: 10px 11px !important;
  border: 1px solid rgba(151,177,224,.12) !important;
  border-radius: 14px !important;
  background: linear-gradient(145deg, rgba(43,59,91,.75), rgba(25,38,65,.88)) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.1), 0 2px 7px rgba(0,0,0,.13) !important;
}

html body #financeModal#financeModal .fm-section-title h3 {
  font-size: 11px !important;
  letter-spacing: .01em !important;
}

html body #financeModal#financeModal .fm-ledger {
  margin-top: 2px !important;
}

html body #financeModal#financeModal .fm-empty {
  padding: 9px 4px !important;
  font-size: 9.5px !important;
}

html body #financeModal#financeModal .fm-ledger-row {
  padding: 7px 0 !important;
}

html body #financeModal#financeModal .fm-bottom-link {
  gap: 9px !important;
  min-height: 46px !important;
  margin-top: 9px !important;
  padding: 7px 10px !important;
  border: 1px solid rgba(158,185,235,.14) !important;
  border-radius: 14px !important;
  background: linear-gradient(150deg, #3b4f78 0%, #293a60 55%, #1c2b49 100%) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.18), inset 0 -2px 0 rgba(5,12,29,.2), 0 3px 8px rgba(0,0,0,.2) !important;
}

html body #financeModal#financeModal .fm-bottom-link > span:first-child {
  width: 30px !important;
  height: 30px !important;
  border-radius: 10px !important;
  color: #392805 !important;
  background: linear-gradient(155deg, #fff0a0, #e6a000) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.78), 0 2px 0 rgba(135,83,0,.42) !important;
}

html body #financeModal#financeModal .fm-bottom-link b {
  font-size: 11px !important;
}

html body #financeModal#financeModal .fm-bottom-link small {
  font-size: 8.5px !important;
}

html body #financeModal#financeModal #financeRewardsView .fm-rewards-summary {
  padding: 13px !important;
  border: 1px solid rgba(157,185,234,.18) !important;
  border-radius: 16px !important;
  background: radial-gradient(90% 110% at 0% 0%, rgba(255,217,108,.13), transparent 62%), linear-gradient(145deg, #344974, #1a2a49 72%, #17243e) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.18), inset 0 -3px 0 rgba(4,11,29,.2), 0 4px 10px rgba(0,0,0,.2) !important;
}

html body #financeModal#financeModal #financeRewardsView .fm-rewards-summary > div:first-child > strong {
  font-size: 22px !important;
  text-shadow: 0 1px 0 rgba(73,48,0,.45) !important;
}

html body #financeModal#financeModal #financeRewardsView .fm-points-pill {
  padding: 8px 10px !important;
  border: 1px solid rgba(101,225,205,.2) !important;
  border-radius: 12px !important;
  background: linear-gradient(145deg, rgba(24,72,82,.8), rgba(18,48,66,.92)) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.12) !important;
}

html body #financeModal#financeModal #financeRewardsView .fm-progress-wrap {
  margin-top: 11px !important;
  padding: 0 3px !important;
}

html body #financeModal#financeModal #financeRewardsView .fm-progress-track {
  height: 8px !important;
  padding: 1px !important;
  border: 1px solid rgba(150,175,220,.13) !important;
  background: #101a2e !important;
  box-shadow: inset 0 2px 4px rgba(0,0,0,.32) !important;
}

html body #financeModal#financeModal #financeRewardsView .fm-progress-track span {
  background: linear-gradient(180deg, #fff0aa 0%, #ffd44d 48%, #e99e00 100%) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.68), 0 0 6px rgba(255,200,58,.23) !important;
}

html body #financeModal#financeModal #financeRewardsView .fm-level-grid {
  gap: 7px !important;
  margin-top: 11px !important;
}

html body #financeModal#financeModal #financeRewardsView .fm-level {
  gap: 4px !important;
  padding: 9px 4px !important;
  border: 1px solid rgba(147,171,215,.13) !important;
  border-radius: 13px !important;
  background: linear-gradient(150deg, rgba(40,55,84,.8), rgba(19,30,51,.95)) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.1), 0 2px 0 rgba(4,10,24,.32) !important;
}

html body #financeModal#financeModal #financeRewardsView .fm-level.active {
  border-color: rgba(255,216,112,.48) !important;
  background: linear-gradient(150deg, rgba(100,79,33,.9), rgba(52,47,42,.98)) !important;
  box-shadow: inset 0 1px 0 rgba(255,245,207,.25), 0 3px 8px rgba(0,0,0,.19) !important;
}

html body #financeModal#financeModal #financeRewardsView .fm-points-value {
  gap: 8px !important;
  margin-top: 10px !important;
  padding: 10px !important;
  border: 1px solid rgba(255,214,106,.16) !important;
  border-radius: 13px !important;
  background: linear-gradient(145deg, rgba(93,72,30,.48), rgba(38,38,39,.75)) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.09) !important;
}

@media (max-width: 700px) {
  html body #financeModal#financeModal .finance-modal-box,
  html body #financeModal#financeModal .finance-modal-scroll {
    max-height: min(82dvh, 690px) !important;
  }
  html body #financeModal#financeModal .finance-modal-scroll {
    padding: 14px 12px 12px !important;
  }
}

/* Profile: readable provider cards that fit narrow phone screens. */
html body #profileModal#profileModal:not(#zz) .profile-account-links {
  margin: 8px 0 7px !important;
  padding: 5px !important;
}
html body #profileModal#profileModal:not(#zz) .pal-provider-grid {
  gap: 6px !important;
}
html body #profileModal#profileModal:not(#zz) .pal-provider {
  display: grid !important;
  grid-template-columns: 19px minmax(0, 1fr) !important;
  grid-template-rows: 25px 20px !important;
  align-items: center !important;
  column-gap: 5px !important;
  row-gap: 4px !important;
  min-height: 58px !important;
  padding: 6px !important;
  border-radius: 11px !important;
}
html body #profileModal#profileModal:not(#zz) .pal-provider-mark {
  grid-column: 1 !important;
  grid-row: 1 !important;
  width: 19px !important;
  height: 19px !important;
  flex-basis: 19px !important;
  border-radius: 6px !important;
  font-size: 10px !important;
}
html body #profileModal#profileModal:not(#zz) .pal-provider > span:nth-child(2) {
  grid-column: 2 !important;
  grid-row: 1 !important;
  display: grid !important;
  min-width: 0 !important;
  justify-items: start !important;
  gap: 2px !important;
}
html body #profileModal#profileModal:not(#zz) .pal-provider b {
  display: block !important;
  max-width: 100% !important;
  overflow: hidden !important;
  text-overflow: clip !important;
  white-space: nowrap !important;
  overflow-wrap: normal !important;
  word-break: keep-all !important;
  font-size: clamp(8px, 2.65vw, 10px) !important;
  line-height: 1.15 !important;
}
html body #profileModal#profileModal:not(#zz) .pal-provider small {
  display: block !important;
  max-width: 100% !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  font-size: 7.2px !important;
  line-height: 1.1 !important;
}
html body #profileModal#profileModal:not(#zz) .pal-provider button {
  grid-column: 1 / -1 !important;
  grid-row: 2 !important;
  width: 100% !important;
  min-width: 0 !important;
  min-height: 20px !important;
  padding: 3px 5px !important;
  border-radius: 7px !important;
  white-space: nowrap !important;
  font-size: 8.5px !important;
}
html body #profileModal#profileModal:not(#zz) .profile-stats-v3 {
  margin-top: 7px !important;
}

/* Softly animate wallet/reward view changes; the modal itself already fades and scales in/out. */
@keyframes financeViewArrive {
  from { opacity: 0; transform: translate3d(0, 7px, 0) scale(.992); }
  to { opacity: 1; transform: translate3d(0, 0, 0) scale(1); }
}
html body #financeModal#financeModal .finance-modal-view:not([hidden]) {
  animation: financeViewArrive .22s cubic-bezier(.2, .75, .25, 1) both;
  transform-origin: 50% 0;
}
@media (prefers-reduced-motion: reduce) {
  html body #financeModal#financeModal .finance-modal-view:not([hidden]) { animation: none !important; }
}

/* Paid-order recovery gate: compact 3D prompt with a short fade in/out. */
@keyframes paidGateEnter {
  from { opacity: 0; transform: translate3d(0, 12px, 0) scale(.97); }
  to { opacity: 1; transform: translate3d(0, 0, 0) scale(1); }
}
@keyframes paidGateExit {
  to { opacity: 0; transform: translate3d(0, 7px, 0) scale(.985); }
}
html body #liPaidOrderGateChecking#liPaidOrderGateChecking:not(#zz) {
  z-index: 1200 !important;
  padding: 14px !important;
  background: rgba(5, 9, 20, .68) !important;
  -webkit-backdrop-filter: blur(7px) !important;
  backdrop-filter: blur(7px) !important;
  animation: paidGateEnter .22s cubic-bezier(.2,.75,.25,1) both !important;
}
html body #liPaidOrderGateChecking#liPaidOrderGateChecking.is-closing {
  pointer-events: none !important;
  animation: paidGateExit .18s ease-in both !important;
}
html body #liPaidOrderGateChecking#liPaidOrderGateChecking .li-paid-gate-card {
  width: min(100%, 282px) !important;
  max-height: calc(100dvh - 28px) !important;
  gap: 0 !important;
  padding: 17px 16px 15px !important;
  border: 1px solid rgba(167, 197, 255, .26) !important;
  border-radius: 20px !important;
  background:
    radial-gradient(110% 80% at 8% 0%, rgba(89, 150, 255, .20), transparent 72%),
    linear-gradient(155deg, #28395d 0%, #1a2946 48%, #10192d 100%) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.22), inset 0 -8px 20px rgba(1,7,20,.24), 0 18px 42px rgba(0,0,0,.48) !important;
  animation: paidGateEnter .28s cubic-bezier(.2,.75,.25,1) both !important;
}
html body #liPaidOrderGateChecking#liPaidOrderGateChecking .li-paid-gate-card::before {
  display: block !important;
  height: 2px !important;
  background: linear-gradient(90deg, #4be0b0, #ffe27a 50%, #70bdff) !important;
}
html body #liPaidOrderGateChecking#liPaidOrderGateChecking .lpg-scene {
  width: 62px !important;
  height: 62px !important;
  margin: 0 auto 10px !important;
}
html body #liPaidOrderGateChecking#liPaidOrderGateChecking .li-paid-gate-mark {
  width: 40px !important;
  height: 40px !important;
  border-radius: 13px !important;
  font-size: 15px !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.9), inset 0 -3px 0 rgba(132,79,0,.35), 0 5px 12px rgba(0,0,0,.28) !important;
}
html body #liPaidOrderGateChecking#liPaidOrderGateChecking strong {
  font-size: 15px !important;
  line-height: 1.25 !important;
}
html body #liPaidOrderGateChecking#liPaidOrderGateChecking p {
  max-width: 238px !important;
  margin: 6px 0 0 !important;
  font-size: 11px !important;
  line-height: 1.45 !important;
}
html body #liPaidOrderGateChecking#liPaidOrderGateChecking .lpg-steps {
  margin: 12px 0 0 !important;
}
html body #liPaidOrderGateChecking#liPaidOrderGateChecking .lpg-steps li {
  gap: 5px !important;
  font-size: 7.5px !important;
}
html body #liPaidOrderGateChecking#liPaidOrderGateChecking .lpg-steps li b {
  width: 20px !important;
  height: 20px !important;
}
html body #liPaidOrderGateChecking#liPaidOrderGateChecking .li-paid-gate-loader {
  width: 27px !important;
  height: 27px !important;
  margin-top: 12px !important;
}
html body #liPaidOrderGateChecking#liPaidOrderGateChecking .li-paid-gate-actions {
  gap: 8px !important;
  margin-top: 12px !important;
}
html body #liPaidOrderGateChecking#liPaidOrderGateChecking .li-paid-gate-actions button,
html body #liPaidOrderGateChecking#liPaidOrderGateChecking .li-paid-gate-actions a {
  min-height: 36px !important;
  padding: 8px 12px !important;
  border-radius: 10px !important;
  font-size: 11px !important;
}
@media (prefers-reduced-motion: reduce) {
  html body #liPaidOrderGateChecking#liPaidOrderGateChecking,
  html body #liPaidOrderGateChecking#liPaidOrderGateChecking .li-paid-gate-card { animation: none !important; }
}

/* 8 Ball Pool offer details should reveal together when the popup opens. */
@keyframes poolOfferQuickReveal {
  from { opacity: 0; transform: translate3d(0, 5px, 0); }
  to { opacity: 1; transform: translate3d(0, 0, 0); }
}
@keyframes poolOfferQuickPanel {
  from { opacity: 0; transform: translate3d(0, 12px, 0) scale(.985); }
  to { opacity: 1; transform: translate3d(0, 0, 0) scale(1); }
}
html body #offerModal#offerModal.om-fast-mode .om-panel {
  animation: poolOfferQuickPanel .22s cubic-bezier(.2,.8,.25,1) both !important;
}
html body #offerModal#offerModal.om-fast-mode .om-hero,
html body #offerModal#offerModal.om-fast-mode .om-body > * {
  animation: poolOfferQuickReveal .16s ease-out both !important;
  animation-delay: 0s !important;
}
@media (prefers-reduced-motion: reduce) {
  html body #offerModal#offerModal.om-fast-mode .om-panel,
  html body #offerModal#offerModal.om-fast-mode .om-hero,
  html body #offerModal#offerModal.om-fast-mode .om-body > * { animation: none !important; }
}

/* Cue artwork stage: a soft, symmetrical 3D halo that gently blinks. */
@keyframes cueStagePulse {
  0%, 100% { opacity: .34; filter: blur(5px) brightness(.9); }
  48% { opacity: .84; filter: blur(4px) brightness(1.32); }
  66% { opacity: .48; filter: blur(4.5px) brightness(1); }
}
html body #offerModal#offerModal .om-body:has(.cue-artwork-banner) {
  gap: 5px !important;
}
html body #offerModal#offerModal .cue-artwork-banner {
  min-height: 34px !important;
  margin: 0 !important;
  padding: 0 8px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}
html body #offerModal#offerModal .cue-artwork-banner::before {
  left: 7% !important;
  right: 7% !important;
  top: 65% !important;
  bottom: auto !important;
  height: 18px !important;
  border: 0 !important;
  border-radius: 50% !important;
  transform: translateY(-50%) scaleY(.84) !important;
  background: radial-gradient(ellipse at 50% 55%, rgba(91,191,255,.28), rgba(119,103,255,.16) 32%, rgba(53,116,255,.07) 55%, transparent 78%) !important;
  box-shadow: 0 0 16px rgba(64,172,255,.2), 0 0 28px rgba(132,92,255,.13) !important;
  filter: blur(5px);
  animation: cueStagePulse 1.65s ease-in-out infinite !important;
}
html body #offerModal#offerModal .cue-artwork-banner::after {
  left: 4% !important;
  right: 4% !important;
  top: 50% !important;
  bottom: auto !important;
  height: 24px !important;
  content: "" !important;
  z-index: 1 !important;
  pointer-events: none !important;
  transform: translateY(-50%) scaleY(.9) !important;
  background:
    radial-gradient(ellipse 10px 11px at 12% 50%, rgba(145,231,255,.84), rgba(68,169,255,.42) 48%, transparent 100%),
    radial-gradient(ellipse 25px 14px at 12% 50%, rgba(62,158,255,.28), transparent 100%),
    radial-gradient(ellipse 10px 11px at 88% 50%, rgba(206,191,255,.84), rgba(127,107,255,.42) 48%, transparent 100%),
    radial-gradient(ellipse 25px 14px at 88% 50%, rgba(127,107,255,.28), transparent 100%) !important;
  background-size: 100% 100% !important;
  filter: blur(1.6px);
  animation: cueStagePulse 1.65s ease-in-out -.35s infinite !important;
}
html body #offerModal#offerModal .cue-artwork-banner img {
  max-height: 30px !important;
  transform: translateY(1px) !important;
  filter: drop-shadow(0 2px 2px rgba(0,0,0,.82)) drop-shadow(0 0 4px rgba(122,173,255,.58)) !important;
}
html body #offerModal#offerModal .cue-artwork-banner + .cue-sl-v5 {
  margin-top: -5px !important;
}
html body #offerModal#offerModal .cue-sl-v5 ~ .offer-detail-strip {
  margin-top: 14px !important;
}

/* VIP tier rewards: larger icons and values, with the amount/label stacked to fit. */
html body #offerModal#offerModal .vip-level-card {
  min-width: 0 !important;
  padding: 9px !important;
  min-height: 130px !important;
  box-sizing: border-box !important;
}
html body #offerModal#offerModal .vip-level-card .vip-level-head {
  margin: -9px -9px 8px !important;
  padding: 8px 9px !important;
}
html body #offerModal#offerModal .vip-level-card .benefit {
  display: flex !important;
  align-items: center !important;
  gap: 5px !important;
  min-width: 0 !important;
  margin: 0 1px !important;
  padding: 5px 3px !important;
  box-sizing: border-box !important;
}
html body #offerModal#offerModal .vip-level-card .benefit-icon {
  flex: 0 0 26px !important;
  width: 26px !important;
  min-width: 26px !important;
  height: 26px !important;
}
html body #offerModal#offerModal .vip-level-card .benefit-icon img,
html body #offerModal#offerModal .vip-level-card .benefit-icon svg,
html body #offerModal#offerModal .vip-level-card .benefit-icon .icon-inline {
  width: 26px !important;
  height: 26px !important;
  max-width: 100% !important;
  object-fit: contain !important;
}
html body #offerModal#offerModal .vip-level-card .benefit-icon .icon-cash {
  transform: scale(1.22) !important;
  transform-origin: center !important;
}
html body #offerModal#offerModal .vip-level-card .benefit-copy {
  display: flex !important;
  flex: 1 1 auto !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  justify-content: center !important;
  gap: 2px !important;
  min-width: 0 !important;
  overflow: visible !important;
  font-family: Arial, system-ui, sans-serif !important;
}
html body #offerModal#offerModal .vip-level-card .benefit-copy strong {
  max-width: 100% !important;
  font-family: Arial, system-ui, sans-serif !important;
  font-size: clamp(10px, 12.5cqw, 13px) !important;
  font-weight: 700 !important;
  line-height: 1.05 !important;
  white-space: nowrap !important;
  overflow: visible !important;
  text-overflow: clip !important;
}
html body #offerModal#offerModal .vip-level-card .benefit-copy small {
  max-width: 100% !important;
  font-family: Arial, system-ui, sans-serif !important;
  font-size: clamp(7px, 2.1vw, 9px) !important;
  font-weight: 700 !important;
  line-height: 1.05 !important;
  letter-spacing: .015em !important;
  white-space: nowrap !important;
  overflow: visible !important;
  text-overflow: clip !important;
}
/* VIP rewards: a slim, premium title bar with roomier, legible benefit chips. */
html body #offerModal#offerModal .vip-showcase {
  margin-top: 16px !important;
}
html body #offerModal#offerModal .vip-showcase-title {
  position: relative !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 44px !important;
  margin: 0 0 12px !important;
  padding: 7px 10px !important;
  overflow: hidden !important;
  border: 0 !important;
  border-radius: 12px !important;
  background: radial-gradient(ellipse at 50% -16%, rgba(255,226,150,.38), transparent 66%), linear-gradient(155deg, #79652e 0%, #4e401e 42%, #292315 100%) !important;
  box-shadow: inset 0 1px 0 rgba(255,247,207,.35), inset 0 -5px 10px rgba(0,0,0,.3), 0 7px 16px rgba(0,0,0,.22), 0 0 18px rgba(226,181,74,.12) !important;
}
html body #offerModal#offerModal .vip-showcase-title span.vip-title-gradient {
  display: block !important;
  flex: 0 1 auto !important;
  max-width: 100% !important;
  color: #fff0bb !important;
  -webkit-text-fill-color: #fff0bb !important;
  background: none !important;
  font-family: Inter, Arial, sans-serif !important;
  font-size: clamp(9px, 3.05vw, 13px) !important;
  font-weight: 900 !important;
  line-height: 1.15 !important;
  letter-spacing: .045em !important;
  text-align: center !important;
  white-space: nowrap !important;
  text-shadow: 0 1px 0 rgba(255,255,255,.22), 0 2px 5px rgba(0,0,0,.58) !important;
  animation: none !important;
}
html body #offerModal#offerModal .vip-showcase-title small { display: none !important; }
html body #offerModal#offerModal .vip-showcase-title::after {
  width: 38% !important;
  height: 1px !important;
  top: auto !important;
  bottom: 3px !important;
  left: 31% !important;
  opacity: .55 !important;
  background: linear-gradient(90deg, transparent, rgba(255,229,153,.72), transparent) !important;
}
html body #offerModal#offerModal .vip-level-card .benefit {
  min-height: 42px !important;
  margin: 1px -2px 6px !important;
  padding: 6px 7px !important;
  gap: 6px !important;
  border: 0 !important;
  border-radius: 13px !important;
  background: linear-gradient(145deg, rgba(25,36,78,.98), rgba(12,21,52,.98)) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.09), inset 0 -2px 5px rgba(0,0,0,.24), 0 3px 8px rgba(0,0,0,.16) !important;
}
html body #offerModal#offerModal .vip-level-card .benefit-icon,
html body #offerModal#offerModal .vip-level-card .benefit-icon img,
html body #offerModal#offerModal .vip-level-card .benefit-icon svg,
html body #offerModal#offerModal .vip-level-card .benefit-icon .icon-inline {
  width: 29px !important;
  min-width: 29px !important;
  height: 29px !important;
  flex-basis: 29px !important;
}
html body #offerModal#offerModal .vip-level-card .benefit-copy strong {
  font-size: clamp(11px, 3.2vw, 14px) !important;
  font-weight: 800 !important;
  letter-spacing: 0 !important;
}
@media (max-width: 380px) {
  html body #offerModal#offerModal .vip-showcase-title span.vip-title-gradient {
    font-size: 9px !important;
    letter-spacing: .025em !important;
  }
  html body #offerModal#offerModal .vip-level-card .benefit {
    padding-inline: 5px !important;
    gap: 4px !important;
  }
}
@media (prefers-reduced-motion: reduce) {
  html body #offerModal#offerModal .cue-artwork-banner::before,
  html body #offerModal#offerModal .cue-artwork-banner::after { animation: none !important; }
}