/* ui-pro-v4.css — crisp 3D layer, round 2 (loaded LAST, after ui-pro-v3.css).
   Rules of the house: gradient faces · 1px zero-offset rings · top highlight.
   No glows, no blurred or solid under-ledges, no text-shadows. */

/* ═══════════ 1 · login shell never lingers empty after sign-in ═══════════ */
#loginModal.is-authed,
#loginModal.is-authed.show { display: none !important; }

/* ═══════════ 2 · "Verifying your EPS payment…" gate ═══════════ */
#liPaidOrderGateChecking:not(.is-error):not(.is-eps) { opacity: 0; animation: v3-gate-in .3s ease 1.6s forwards; }
#liPaidOrderGateChecking.is-eps:not(.is-error) { opacity: 1; animation: lpg-fade .28s ease both; }
#liPaidOrderGateChecking {
  background:
    repeating-linear-gradient(45deg, rgba(255, 255, 255, .022) 0 1px, transparent 1px 16px),
    linear-gradient(180deg, #0c1226 0%, #070b18 100%) !important;
  font-family: Inter, system-ui, -apple-system, "Segoe UI", sans-serif !important;
}
#liPaidOrderGateChecking .li-paid-gate-card {
  position: relative;
  width: min(100%, 340px);
  gap: 0;
  padding: 30px 22px 24px;
  border: 0;
  border-radius: 28px;
  overflow: hidden;
  background: linear-gradient(180deg, #2a3560 0%, #1b2447 52%, #131a37 100%);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14), inset 0 1px 0 rgba(255, 255, 255, .24);
  animation: lpg-card-in .45s cubic-bezier(.2, .9, .25, 1.1) both;
}
#liPaidOrderGateChecking .li-paid-gate-card::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 4px;
  background: linear-gradient(90deg, #35f0a0 0%, #ffe58f 50%, #29b9ff 100%);
}

/* coin + two counter-rotating crisp rings */
#liPaidOrderGateChecking .lpg-scene {
  position: relative; display: grid; place-items: center;
  width: 108px; height: 108px; margin-bottom: 18px;
}
#liPaidOrderGateChecking .lpg-scene::before {
  content: ""; position: absolute; inset: 0; border-radius: 50%;
  background: #0c1124;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1), inset 0 0 0 5px #151c3a, inset 0 0 0 6px rgba(255, 255, 255, .07);
}
#liPaidOrderGateChecking .lpg-orbit {
  position: absolute; inset: 0; border-radius: 50%; pointer-events: none;
  background: conic-gradient(from 0deg, rgba(247, 189, 22, 0) 0 52%, #f7bd16 84%, #fff0b0 100%);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 5px), #000 calc(100% - 4px));
  mask: radial-gradient(farthest-side, transparent calc(100% - 5px), #000 calc(100% - 4px));
  animation: lpg-spin 1.15s linear infinite;
}
#liPaidOrderGateChecking .lpg-orbit-2 {
  inset: 11px;
  background: conic-gradient(from 180deg, rgba(53, 240, 160, 0) 0 56%, #35f0a0 86%, #29b9ff 100%);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 2px));
  mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 2px));
  animation-duration: 1.9s; animation-direction: reverse;
}
#liPaidOrderGateChecking .li-paid-gate-mark {
  position: relative; isolation: isolate;
  display: grid; place-items: center;
  width: 62px; height: 62px; border-radius: 50%;
  color: #3a2400;
  font: 800 21px/1 Sora, Inter, system-ui, sans-serif;
  letter-spacing: -.02em;
  text-shadow: none;
  background: linear-gradient(180deg, #fff3bd 0%, #ffd34f 34%, #f7bd16 62%, #cf8700 100%);
  box-shadow: inset 0 0 0 2px #ffeaa0, inset 0 0 0 4px #c98200, inset 0 1px 0 rgba(255, 255, 255, .9);
}
#liPaidOrderGateChecking .li-paid-gate-mark::before {
  content: ""; position: absolute; inset: 5px; z-index: -1; border-radius: 50%;
  background: linear-gradient(180deg, #ffe38a 0%, #f7bd16 55%, #e29a05 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .75);
}
#liPaidOrderGateChecking strong { font: 800 18px/1.3 Sora, Inter, system-ui, sans-serif; color: #fff; letter-spacing: -.01em; }
#liPaidOrderGateChecking p { margin: 8px 0 0; max-width: 270px; font: 500 12.5px/1.6 Inter, system-ui, sans-serif; color: #a9b6d6; }

/* three-step tracker */
#liPaidOrderGateChecking .lpg-steps { display: flex; width: 100%; margin: 20px 0 0; padding: 0; list-style: none; }
#liPaidOrderGateChecking .lpg-steps li {
  position: relative; flex: 1 1 0; display: flex; flex-direction: column; align-items: center; gap: 8px;
  font: 800 9.5px/1 Inter, system-ui, sans-serif; letter-spacing: .14em; text-transform: uppercase; color: #6c7aa3;
}
#liPaidOrderGateChecking .lpg-steps li + li::before {
  content: ""; position: absolute; top: 12px; left: calc(-50% + 18px); right: calc(50% + 18px); height: 2px; border-radius: 2px;
  background: #2a3566;
}
#liPaidOrderGateChecking .lpg-steps li.is-active::before { background: linear-gradient(90deg, #22c55e, #f7bd16); }
#liPaidOrderGateChecking .lpg-steps li b {
  position: relative; width: 26px; height: 26px; border-radius: 50%;
  background: #0c1124; box-shadow: inset 0 0 0 2px #2a3566;
}
#liPaidOrderGateChecking .lpg-steps li.is-done { color: #86efac; }
#liPaidOrderGateChecking .lpg-steps li.is-done b {
  background: linear-gradient(180deg, #5eea8e 0%, #22c55e 55%, #15993f 100%);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .4), inset 0 1px 0 rgba(255, 255, 255, .6);
}
#liPaidOrderGateChecking .lpg-steps li.is-done b::after {
  content: ""; position: absolute; left: 9.5px; top: 5.5px; width: 6px; height: 11px;
  border: solid #053a18; border-width: 0 2.6px 2.6px 0; transform: rotate(45deg);
}
#liPaidOrderGateChecking .lpg-steps li.is-active { color: #ffd466; }
#liPaidOrderGateChecking .lpg-steps li.is-active b::after {
  content: ""; position: absolute; inset: 0; border-radius: 50%;
  background: conic-gradient(from 0deg, rgba(247, 189, 22, 0) 0 45%, #f7bd16 100%);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 2px));
  mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 2px));
  animation: lpg-spin .9s linear infinite;
}

/* segmented loader bar */
#liPaidOrderGateChecking .li-paid-gate-loader {
  position: relative; display: block; width: 100%; height: 9px; margin-top: 22px;
  border: 0; border-radius: 99px; overflow: hidden; animation: none;
  background: #0a0f20; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1);
}
#liPaidOrderGateChecking .li-paid-gate-loader i {
  position: absolute; top: 0; bottom: 0; left: 0; width: 36%; border-radius: inherit;
  background: linear-gradient(180deg, #fff0b0 0%, #f7bd16 50%, #d98f00 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .7);
  animation: lpg-sweep 1.35s cubic-bezier(.55, 0, .45, 1) infinite;
}
#liPaidOrderGateChecking .li-paid-gate-loader.hidden { display: none !important; }
#liPaidOrderGateChecking.is-error .lpg-steps,
#liPaidOrderGateChecking.is-error .lpg-orbit { display: none; }
#liPaidOrderGateChecking.is-error .lpg-scene { width: 86px; height: 86px; }
#liPaidOrderGateChecking .li-paid-gate-actions { width: 100%; margin-top: 18px; }
#liPaidOrderGateChecking .li-paid-gate-actions button,
#liPaidOrderGateChecking .li-paid-gate-actions a {
  flex: 1 1 0; min-height: 44px; border-radius: 14px; font: 800 13px/1.2 Sora, Inter, system-ui, sans-serif;
}
#liPaidOrderGateChecking .li-paid-gate-actions button {
  color: #3a2400;
  background: linear-gradient(180deg, #ffe58f 0%, #f7bd16 58%, #dc9306 100%);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .35), inset 0 1px 0 rgba(255, 255, 255, .85);
}
#liPaidOrderGateChecking .li-paid-gate-actions a {
  color: #eaf0ff;
  background: linear-gradient(180deg, #34406f, #272f58);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .18), inset 0 1px 0 rgba(255, 255, 255, .22);
}
@keyframes lpg-spin { to { transform: rotate(360deg); } }
@keyframes lpg-sweep { 0% { transform: translateX(-105%); } 100% { transform: translateX(285%); } }
@keyframes lpg-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes lpg-card-in { from { opacity: 0; transform: translateY(18px) scale(.95); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  #liPaidOrderGateChecking .lpg-orbit, #liPaidOrderGateChecking .li-paid-gate-loader i,
  #liPaidOrderGateChecking .lpg-steps li.is-active b::after, #liPaidOrderGateChecking .li-paid-gate-card { animation-duration: 3s; }
}

/* ═══════════ 3 · offer popup — every box clearly visible ═══════════
   Panel is deep navy; every inner box is a lighter raised face with a 1px ring.   */
#offerModal#offerModal .om-panel {
  border-radius: 28px !important;
  background: linear-gradient(180deg, #1a2142 0%, #111731 42%, #0b1023 100%) !important;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .13), inset 0 1px 0 rgba(255, 255, 255, .22) !important;
}
#offerModal#offerModal .om-panel::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px; z-index: 6; pointer-events: none;
  background: linear-gradient(90deg, #35f0a0 0%, #ffe58f 50%, #29b9ff 100%);
}
#offerModal#offerModal .om-scroll { padding: 17px 17px 8px !important; }
#offerModal#offerModal .offer-modal-close {
  top: 22px !important; right: 22px !important;
  background: linear-gradient(180deg, #3a4575 0%, #232b52 100%) !important;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .26), inset 0 1px 0 rgba(255, 255, 255, .3) !important;
}

/* hero: framed like a gallery print */
#offerModal#offerModal .om-hero {
  border-radius: 18px !important;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .2), 0 0 0 4px #0b1023, 0 0 0 5px rgba(255, 255, 255, .12) !important;
}
#offerModal#offerModal .om-body { gap: 13px !important; padding: 20px 2px 6px !important; }

/* badges */
#offerModal#offerModal .om-badges .badge {
  height: 27px; padding: 0 12px; border-radius: 9px; color: #d6def2;
  background: linear-gradient(180deg, #34406f 0%, #263059 100%) !important;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .16), inset 0 1px 0 rgba(255, 255, 255, .2) !important;
}
#offerModal#offerModal .om-badges .no-login-badge {
  color: #8dfad0;
  background: linear-gradient(180deg, #1f4a49 0%, #173838 100%) !important;
  box-shadow: inset 0 0 0 1px rgba(127, 243, 196, .4), inset 0 1px 0 rgba(180, 255, 225, .25) !important;
}
#offerModal#offerModal .om-badges .vip-badge {
  color: #ffd978;
  background: linear-gradient(180deg, #4d4122 0%, #3a3019 100%) !important;
  box-shadow: inset 0 0 0 1px rgba(255, 212, 102, .4), inset 0 1px 0 rgba(255, 232, 160, .25) !important;
}

/* price bar: one raised plate that holds price · old price · OFF */
#offerModal#offerModal .om-price-row {
  padding: 10px 12px !important; border-radius: 19px;
  background: linear-gradient(180deg, #2f3a6a 0%, #222b53 100%);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .16), inset 0 1px 0 rgba(255, 255, 255, .22);
}
#offerModal#offerModal .om-price {
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .4), inset 0 1px 0 rgba(255, 255, 255, .8);
}
#offerModal#offerModal .om-old { color: #c3cce4; }
#offerModal#offerModal .om-off { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .3), inset 0 1px 0 rgba(255, 255, 255, .55); }

/* included items */
#offerModal#offerModal .offer-qty-heading { color: #a7b4d6 !important; }
#offerModal#offerModal .offer-qty-item {
  flex: 0 0 86px !important; min-width: 86px !important; padding: 10px 6px 9px !important; border-radius: 16px !important; gap: 5px !important;
  background: linear-gradient(180deg, #34406f 0%, #252f5a 100%) !important;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .17), inset 0 1px 0 rgba(255, 255, 255, .24) !important;
}
#offerModal#offerModal .offer-qty-icon {
  flex: 0 0 46px !important; width: 46px !important; height: 46px !important; border-radius: 13px;
  background: #0b1023; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12);
}
#offerModal#offerModal .offer-qty-item > span { color: #b6c2e0 !important; }
#offerModal#offerModal .offer-qty-item .qty-unit,
#offerModal#offerModal .offer-qty-item small { color: #9fb0d4 !important; }

/* detail strip: sunken tray with separate raised cells */
#offerModal#offerModal .offer-detail-strip {
  gap: 6px !important; padding: 6px !important; border-radius: 19px !important;
  background: #0a0f20 !important;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .11) !important;
}
#offerModal#offerModal .offer-detail-strip > div {
  padding: 11px 4px !important; border-radius: 14px !important;
  background: linear-gradient(180deg, #313d6c 0%, #232d57 100%) !important;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .15), inset 0 1px 0 rgba(255, 255, 255, .22) !important;
}
#offerModal#offerModal .offer-detail-strip > div + div::before { display: none !important; content: none !important; }
#offerModal#offerModal .offer-detail-strip small { color: #93a2c8 !important; }

/* access + trust cards, each with a tinted ring */
#offerModal#offerModal .modal-access,
#offerModal#offerModal .offer-trust-mini {
  padding: 13px 14px !important; border-radius: 19px !important;
  background: linear-gradient(180deg, #313d6c 0%, #232d57 100%) !important;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .17), inset 0 1px 0 rgba(255, 255, 255, .22) !important;
}
#offerModal#offerModal .modal-access.no-login-access {
  background: linear-gradient(180deg, #22504f 0%, #183b3d 100%) !important;
  box-shadow: inset 0 0 0 1px rgba(80, 230, 170, .5), inset 0 1px 0 rgba(190, 255, 230, .25) !important;
}
#offerModal#offerModal .modal-access.login-access {
  background: linear-gradient(180deg, #4e4423 0%, #3a3219 100%) !important;
  box-shadow: inset 0 0 0 1px rgba(247, 189, 22, .5), inset 0 1px 0 rgba(255, 232, 160, .25) !important;
}
#offerModal#offerModal .offer-trust-mini {
  background: linear-gradient(180deg, #27487c 0%, #1b3560 100%) !important;
  box-shadow: inset 0 0 0 1px rgba(98, 173, 255, .5), inset 0 1px 0 rgba(190, 220, 255, .25) !important;
}
#offerModal#offerModal .om-tile { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .3), inset 0 1px 0 rgba(255, 255, 255, .75) !important; }
#offerModal#offerModal .om-access-copy > span,
#offerModal#offerModal .om-trust-copy > span { color: #c4cfea !important; }

/* VIP tiers */
#offerModal#offerModal .vip-showcase-title .vip-title-gradient { font-size: 15px !important; }
#offerModal#offerModal .vip-level-card {
  border-radius: 17px !important;
  background: linear-gradient(180deg, #34406f 0%, #242e59 100%) !important;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .17), inset 0 1px 0 rgba(255, 255, 255, .22) !important;
}
#offerModal#offerModal .vip-level-card {
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--tc) 62%, transparent), inset 0 1px 0 rgba(255, 255, 255, .22) !important;
}
#offerModal#offerModal .vip-level-card .vip-level-head {
  background: #0b1023 !important;
  box-shadow: none !important;
}
#offerModal#offerModal .vip-level-card .vip-level-head {
  background: linear-gradient(180deg, color-mix(in srgb, var(--tc) 34%, #0b1023) 0%, #0b1023 100%) !important;
}
#offerModal#offerModal .vip-level-card .benefit-copy small { color: #a9b6d8 !important; }

/* footer + buttons */
#offerModal#offerModal .om-footer {
  background: linear-gradient(180deg, #151c3b 0%, #0b1023 100%) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .16) !important;
}
#offerModal#offerModal .om-footer .om-buy {
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .42), inset 0 1px 0 rgba(255, 255, 255, .9) !important;
}
#offerModal#offerModal .om-footer .om-cart {
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .3), inset 0 1px 0 rgba(255, 255, 255, .65) !important;
}
#offerModal#offerModal .om-btn-ico { background: rgba(0, 0, 0, .16); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .22); }