/* ui-pro-v4b.css — offer popup polish, Buy Now popup, account-info page (loaded after ui-pro-v4.css).
   Same rules: gradient faces · top highlight only · no 1px outlines on boxes · no glow / blur / ledges. */

/* ═══════════════════════════════════════════════════════════════
   A · OFFER POPUP — borderless boxes
   ═══════════════════════════════════════════════════════════════ */
#offerModal#offerModal .om-hero { box-shadow: none !important; }
#offerModal#offerModal .om-badges .badge,
#offerModal#offerModal .om-badges .no-login-badge,
#offerModal#offerModal .om-badges .vip-badge { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .22) !important; }
#offerModal#offerModal .om-price-row { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .2) !important; }
#offerModal#offerModal .om-price { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .8) !important; }
#offerModal#offerModal .om-off { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .5) !important; }
#offerModal#offerModal .offer-qty-item { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .24) !important; }
#offerModal#offerModal .offer-qty-icon { box-shadow: none !important; }
#offerModal#offerModal .offer-modal-close { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3) !important; }
#offerModal#offerModal .om-panel { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .2) !important; }
#offerModal#offerModal .om-footer .om-buy { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9) !important; }
#offerModal#offerModal .om-footer .om-cart { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .6) !important; }
#offerModal#offerModal .om-btn-ico { box-shadow: none !important; }

/* ── Category + Delivery: two clean raised cards ── */
#offerModal#offerModal .offer-detail-strip {
  display: grid !important;
  grid-auto-flow: row !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 10px !important;
  padding: 0 !important;
  border-radius: 0 !important;
  background: none !important;
  box-shadow: none !important;
}
#offerModal#offerModal .offer-detail-strip > div {
  align-items: flex-start !important;
  justify-content: flex-start !important;
  gap: 9px !important;
  padding: 14px 15px 15px !important;
  border-radius: 17px !important;
  text-align: left !important;
  background: linear-gradient(180deg, #3b4779 0%, #2a3468 100%) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .24) !important;
}
#offerModal#offerModal .offer-detail-strip > div:nth-child(3) { grid-column: 1 / -1; }
#offerModal#offerModal .offer-detail-strip small {
  display: inline-flex !important; align-items: center; gap: 7px;
  font: 700 10px/1 Inter, system-ui, sans-serif !important;
  letter-spacing: .16em !important; color: #b8c4e6 !important;
}
#offerModal#offerModal .offer-detail-strip small::before {
  content: ""; width: 7px; height: 7px; border-radius: 50%;
  background: linear-gradient(180deg, #ffe58f, #f7bd16);
}
#offerModal#offerModal .offer-detail-strip > div:nth-child(2) small::before { background: linear-gradient(180deg, #8ff5b9, #22c55e); }
#offerModal#offerModal .offer-detail-strip > div:nth-child(3) small::before { background: linear-gradient(180deg, #a6d0ff, #4c93f5); }
#offerModal#offerModal .offer-detail-strip b {
  font: 800 15px/1.3 Inter, system-ui, sans-serif !important;
  color: #fff !important; text-align: left;
}

/* ── ID/PASSWORD + Safe & Official cards: no icons, chip headings ── */
#offerModal#offerModal .modal-access,
#offerModal#offerModal .offer-trust-mini {
  display: block !important;
  padding: 15px 16px 16px !important;
  border-radius: 18px !important;
}
#offerModal#offerModal .modal-access.login-access {
  background: linear-gradient(180deg, #54492a 0%, #3c3320 100%) !important;
  box-shadow: inset 0 1px 0 rgba(255, 232, 160, .3) !important;
}
#offerModal#offerModal .modal-access.no-login-access {
  background: linear-gradient(180deg, #25564f 0%, #1a3f40 100%) !important;
  box-shadow: inset 0 1px 0 rgba(190, 255, 230, .3) !important;
}
#offerModal#offerModal .offer-trust-mini {
  background: linear-gradient(180deg, #2a4f8a 0%, #1d3a68 100%) !important;
  box-shadow: inset 0 1px 0 rgba(190, 220, 255, .3) !important;
}
#offerModal#offerModal .om-access-copy,
#offerModal#offerModal .om-trust-copy { gap: 0 !important; }
#offerModal#offerModal .om-access-copy strong,
#offerModal#offerModal .om-trust-copy > b {
  display: inline-flex !important; align-items: center; width: max-content; max-width: 100%;
  margin: 0 0 11px !important; padding: 7px 12px !important; border-radius: 9px;
  font: 800 11px/1 Inter, system-ui, sans-serif !important;
  letter-spacing: .09em !important; text-transform: uppercase; text-shadow: none;
}
#offerModal#offerModal .login-access .om-access-copy strong {
  color: #3a2400 !important;
  background: linear-gradient(180deg, #ffe58f 0%, #f7bd16 60%, #dc9306 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .8);
}
#offerModal#offerModal .no-login-access .om-access-copy strong {
  color: #04382a !important;
  background: linear-gradient(180deg, #8ff5c4 0%, #35d996 60%, #1fae78 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .7);
}
#offerModal#offerModal .om-trust-copy > b {
  color: #06214f !important;
  background: linear-gradient(180deg, #a6d0ff 0%, #5aa7ff 60%, #2f7bf0 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .7);
}
#offerModal#offerModal .om-access-copy > span,
#offerModal#offerModal .om-trust-copy > span { font: 500 13px/1.6 Inter, system-ui, sans-serif !important; color: #dbe3f6 !important; }
#offerModal#offerModal .om-trust-copy > em {
  display: block; margin-top: 11px !important;
  font: 800 10.5px/1.5 Inter, system-ui, sans-serif !important; font-style: normal !important;
  letter-spacing: .1em !important; text-transform: uppercase; color: #86f2bd !important;
}

/* ═══════════════════════════════════════════════════════════════
   B · VIP TIER SECTION
   ═══════════════════════════════════════════════════════════════ */
#offerModal#offerModal .vip-showcase-title {
  position: relative;
  display: flex !important; flex-direction: column !important; align-items: center !important;
  gap: 8px !important; margin: 8px 0 14px !important; padding: 17px 14px 17px !important;
  border: 0 !important; border-radius: 20px !important; overflow: hidden; text-align: center !important;
  background:
    repeating-conic-gradient(from 0deg at 50% -8%, rgba(255, 226, 140, .11) 0 5deg, transparent 5deg 10deg),
    linear-gradient(180deg, #5a4a22 0%, #3b3119 100%) !important;
  box-shadow: inset 0 1px 0 rgba(255, 232, 160, .45) !important;
}
#offerModal#offerModal .vip-showcase-title::after {
  content: ""; position: absolute; left: 16%; right: 16%; bottom: 0; height: 3px; border-radius: 3px 3px 0 0;
  background: linear-gradient(90deg, transparent, #f7bd16 30%, #ffe58f 50%, #f7bd16 70%, transparent);
}
#offerModal#offerModal .vip-showcase-title .vip-title-gradient {
  display: inline-flex !important; align-items: center; justify-content: center; gap: 10px;
  font: 800 16.5px/1.2 Inter, system-ui, sans-serif !important; letter-spacing: -.01em;
  background: linear-gradient(180deg, #ffffff 0%, #ffe9a8 42%, #ffc83a 100%) !important;
  -webkit-background-clip: text !important; background-clip: text !important;
  -webkit-text-fill-color: transparent !important; color: transparent !important;
  text-shadow: none !important;
}
#offerModal#offerModal .vip-showcase-title .vip-title-gradient img,
#offerModal#offerModal .vip-showcase-title .vip-title-gradient svg { flex: 0 0 auto; width: 36px !important; height: 36px !important; object-fit: contain; filter: none !important; -webkit-text-fill-color: initial; }
#offerModal#offerModal .vip-showcase-title small {
  display: flex !important; align-items: center; gap: 10px;
  font: 700 10px/1 Inter, system-ui, sans-serif !important; letter-spacing: .2em !important; text-transform: uppercase;
  color: #e4d199 !important;
}
#offerModal#offerModal .vip-showcase-title small::before,
#offerModal#offerModal .vip-showcase-title small::after {
  content: ""; width: 26px; height: 2px; border-radius: 2px;
  background: linear-gradient(90deg, rgba(247, 189, 22, 0), #f7bd16);
}
#offerModal#offerModal .vip-showcase-title small::after { background: linear-gradient(90deg, #f7bd16, rgba(247, 189, 22, 0)); }

#offerModal#offerModal .vip-level-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  grid-auto-rows: 1fr !important;
  align-items: stretch !important;
  gap: 10px !important;
}
#offerModal#offerModal .vip-level-card.vip-bronze { --tc: #f2a46a; }
#offerModal#offerModal .vip-level-card.vip-silver { --tc: #e6ecf8; }
#offerModal#offerModal .vip-level-card.vip-gold { --tc: #ffd53d; }
#offerModal#offerModal .vip-level-card.vip-emerald { --tc: #52ebac; }
#offerModal#offerModal .vip-level-card.vip-diamond { --tc: #62d8ff; }
#offerModal#offerModal .vip-level-card.vip-black { --tc: #c9afff; }
#offerModal#offerModal .vip-level-card {
  height: 100% !important; gap: 8px !important; padding: 0 0 9px !important;
  border-radius: 18px !important; overflow: hidden !important;
  background: linear-gradient(180deg, #414d86 0%, #2c3769 100%) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .28) !important;
}
@supports (color: color-mix(in srgb, red 50%, blue)) {
  #offerModal#offerModal .vip-level-card {
    background: linear-gradient(180deg, color-mix(in srgb, var(--tc) 20%, #3d4983) 0%, #2c3769 100%) !important;
  }
  #offerModal#offerModal .vip-level-card .vip-level-head {
    background: linear-gradient(180deg, color-mix(in srgb, var(--tc) 38%, #2c3769) 0%, color-mix(in srgb, var(--tc) 12%, #2c3769) 100%) !important;
  }
}
#offerModal#offerModal .vip-level-card .vip-level-head {
  gap: 5px !important; padding: 12px 4px 10px !important;
  background: rgba(255, 255, 255, .08) !important; box-shadow: none !important;
}
#offerModal#offerModal .vip-level-card .vip-level-head img,
#offerModal#offerModal .vip-level-card .vip-level-head .vip-tier-icon { width: 40px !important; height: 40px !important; }
#offerModal#offerModal .vip-level-card .vip-level-head b {
  max-width: 100%; white-space: nowrap;
  font: 800 11.5px/1.2 Inter, system-ui, sans-serif !important; letter-spacing: 0 !important;
  color: var(--tc) !important; -webkit-text-fill-color: var(--tc) !important;
}
#offerModal#offerModal .vip-level-card .vip-level-head span {
  padding: 3px 10px; border-radius: 99px;
  font: 800 8.5px/1 Inter, system-ui, sans-serif !important; letter-spacing: .16em !important;
  color: #e3e9f9 !important; background: rgba(8, 12, 32, .4);
}
#offerModal#offerModal .vip-level-card .benefit {
  margin: 0 8px !important; padding: 7px 8px !important; gap: 8px !important;
  border-radius: 12px !important;
  background: rgba(9, 14, 36, .46) !important; box-shadow: none !important;
}
#offerModal#offerModal .vip-level-card .benefit-icon { width: 28px !important; height: 28px !important; font-size: 20px !important; }
#offerModal#offerModal .vip-level-card .benefit-icon img,
#offerModal#offerModal .vip-level-card .benefit-icon svg { width: 28px !important; height: 28px !important; }
#offerModal#offerModal .vip-level-card .benefit-copy { gap: 3px !important; }
#offerModal#offerModal .vip-level-card .benefit-copy strong {
  font: 800 15px/1 Inter, system-ui, sans-serif !important; letter-spacing: -.01em; color: #fff !important;
}
#offerModal#offerModal .vip-level-card .benefit-copy small {
  font: 700 8.5px/1 Inter, system-ui, sans-serif !important; letter-spacing: .12em; text-transform: uppercase; color: #bcc8e8 !important;
}
@media (max-width: 340px) { #offerModal#offerModal .vip-level-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } }

/* ═══════════════════════════════════════════════════════════════
   C · BUY NOW POPUP — shared panel
   ═══════════════════════════════════════════════════════════════ */
#orderModal#orderModal .op-panel {
  background: linear-gradient(180deg, #2a3560 0%, #1e284e 42%, #171f40 100%) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .22) !important;
}
#orderModal#orderModal .op-panel::before {
  display: block !important; content: "" !important;
  position: absolute; inset: 0 0 auto 0 !important; height: 3px !important; z-index: 6; pointer-events: none; background: linear-gradient(90deg, #35f0a0 0%, #ffe58f 50%, #29b9ff 100%) !important;
}
#orderModal#orderModal .op-close { background: linear-gradient(180deg, #3d4980, #272f5c) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3) !important; }
#orderModal#orderModal .op-tile { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .8) !important; background: linear-gradient(180deg, #ffe58f 0%, #f7bd16 58%, #dc9306 100%) !important; }
#orderModal#orderModal .custom-step-indicator { background: #121a3b !important; }

/* ── "Our Supported Payment Methods": medallion + ribbon plaque + sunburst ── */
#orderModal#orderModal .eps-payment-pro-panel {
  padding: 16px 14px 14px !important; border-radius: 22px !important;
  background: linear-gradient(180deg, #131a3a 0%, #0d1330 100%) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12) !important;
}
#orderModal#orderModal .eps-payment-pro-head {
  position: relative; display: block !important; margin: 0 0 20px !important; padding: 30px 0 0 !important;
  border: 0 !important; text-align: center;
  background: repeating-conic-gradient(from 0deg at 50% 22px, rgba(255, 214, 102, .09) 0 5deg, transparent 5deg 10deg);
}
#orderModal#orderModal .eps-payment-pro-head::before,
#orderModal#orderModal .eps-payment-pro-head::after {
  content: ""; position: absolute; top: 4px; width: 14px; height: 14px;
  background: linear-gradient(180deg, #fff6c8, #ffc83a);
  clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%);
  animation: v4-twinkle 2.2s ease-in-out infinite;
}
#orderModal#orderModal .eps-payment-pro-head::before { left: 26%; }
#orderModal#orderModal .eps-payment-pro-head::after { right: 26%; top: 10px; width: 10px; height: 10px; animation-delay: 1.1s; }
#orderModal#orderModal .eps-payment-pro-title {
  position: relative; isolation: isolate; display: block !important;
  width: auto !important; margin: 0 !important; padding: 0 16px;
}
/* folded ribbon tails, tucked behind the plaque */
#orderModal#orderModal .eps-payment-pro-title::before,
#orderModal#orderModal .eps-payment-pro-title::after {
  content: ""; position: absolute; z-index: -1; top: 46px; width: 34px; height: 50px;
  background: linear-gradient(180deg, #c98200 0%, #8f5600 100%);
}
#orderModal#orderModal .eps-payment-pro-title::before { left: 0; clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%, 13px 50%); }
#orderModal#orderModal .eps-payment-pro-title::after { right: 0; clip-path: polygon(0 0, 100% 0, calc(100% - 13px) 50%, 100% 100%, 0 100%); }
#orderModal#orderModal .eps-payment-pro-title h3 {
  position: relative; display: block !important; margin: 0 !important; padding: 36px 20px 16px !important;
  border-radius: 20px !important; text-align: center;
  font: 800 16px/1.25 Sora, Inter, system-ui, sans-serif !important; letter-spacing: -.005em !important;
  text-transform: none !important; text-wrap: balance; color: #3a2400 !important; text-shadow: none !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .5) 0%, rgba(255, 255, 255, 0) 46%),
    linear-gradient(180deg, #ffe58f 0%, #f7bd16 58%, #dc9306 100%) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9) !important;
}
/* medallion */
#orderModal#orderModal .eps-payment-pro-title h3::before {
  content: "" !important; position: absolute; left: 50%; top: -26px; transform: translateX(-50%); --v4-x: -50%;
  width: 52px; height: 52px; border-radius: 50%;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffd466' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3l7 3v5.2c0 4.5-2.9 8.2-7 9.8-4.1-1.6-7-5.3-7-9.8V6l7-3z'/%3E%3Cpath d='M8.8 12.2l2.3 2.3 4.2-4.6'/%3E%3C/svg%3E") center / 27px no-repeat,
    linear-gradient(180deg, #3a4684 0%, #1c2550 100%);
  box-shadow: inset 0 0 0 3px #ffe58f, inset 0 0 0 5px #b97800, inset 0 1px 0 rgba(255, 255, 255, .7);
  animation: v4-pop .55s cubic-bezier(.2, 1.3, .4, 1) both;
}
#orderModal#orderModal .eps-payment-pro-title h3::after {
  content: "Secure checkout \2022  Powered by EPS" !important;
  display: block !important; width: auto !important; height: auto !important; margin: 8px 0 0 !important;
  font: 800 9px/1.3 Inter, system-ui, sans-serif; letter-spacing: .15em; text-transform: uppercase;
  color: rgba(58, 36, 0, .72); background: none !important; border-radius: 0 !important;
}
#orderModal#orderModal .eps-brand-logo { box-shadow: none !important; background: linear-gradient(180deg, #ffffff 0%, #eef2fa 100%) !important; }
#orderModal#orderModal .eps-card-group { margin-top: 12px; }
#orderModal#orderModal .eps-payment-footnote { color: #a9b6d8 !important; }

/* ── Continue to Payment: press feedback + hand-off screen ── */
#orderModal#orderModal .op-next,
#orderModal#orderModal .op-submit {
  height: 58px; gap: 10px; border-radius: 18px; font: 800 15.5px/1 Sora, Inter, system-ui, sans-serif; white-space: nowrap;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .45) 0%, rgba(255, 255, 255, 0) 52%),
    linear-gradient(180deg, #ffe58f 0%, #f7bd16 58%, #dc9306 100%) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9) !important;
}
#orderModal#orderModal .op-next::after,
#orderModal#orderModal .op-submit::after {
  width: 32px; height: 32px; border-radius: 50%;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232a1a00' stroke-width='2.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center / 17px no-repeat,
    rgba(58, 36, 0, .14);
}
#orderModal#orderModal .op-next .pp-i { display: none; }
#orderModal#orderModal #epsPayButton.is-opening { transform: scale(.975); animation: none !important; filter: brightness(1.06) !important; }
#orderModal#orderModal #epsPayButton.is-opening::after { animation: v4-arrow-go .55s cubic-bezier(.5, 0, .7, 1) infinite !important; }
#orderModal#orderModal .op-handoff {
  position: absolute; inset: 0; z-index: 12;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0; padding: 24px; text-align: center;
  background:
    repeating-linear-gradient(45deg, rgba(255, 255, 255, .022) 0 1px, transparent 1px 16px),
    linear-gradient(180deg, #1d2750 0%, #0d1330 100%);
  opacity: 0; animation: v4-fade .3s ease .14s forwards;
}
#orderModal#orderModal .op-handoff .oh-ring {
  position: relative; display: block; width: 92px; height: 92px; margin-bottom: 20px; border-radius: 50%;
  background: #0c1124; box-shadow: inset 0 0 0 5px #151c3a;
  animation: v4-pop .5s cubic-bezier(.2, 1.3, .4, 1) .14s both;
}
#orderModal#orderModal .op-handoff .oh-ring::before {
  content: ""; position: absolute; inset: 0; border-radius: 50%;
  background: conic-gradient(from 0deg, rgba(247, 189, 22, 0) 0 50%, #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: v4-spin 1s linear infinite;
}
#orderModal#orderModal .op-handoff .oh-ring::after {
  content: ""; position: absolute; inset: 14px; border-radius: 50%;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232a1a00' stroke-width='2.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center / 26px no-repeat,
    linear-gradient(180deg, #ffe58f 0%, #f7bd16 58%, #dc9306 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .85);
  animation: v4-nudge 1s ease-in-out infinite alternate;
}
#orderModal#orderModal .op-handoff b { font: 800 18px/1.3 Sora, Inter, system-ui, sans-serif; color: #fff; }
#orderModal#orderModal .op-handoff small { margin-top: 8px; font: 500 12.5px/1.5 Inter, system-ui, sans-serif; color: #aab7d8; }
#orderModal#orderModal .op-handoff .oh-bar {
  position: relative; display: block; width: min(220px, 70%); height: 9px; margin-top: 22px; border-radius: 99px; overflow: hidden;
  background: #0a0f20;
}
#orderModal#orderModal .op-handoff .oh-bar i {
  position: absolute; top: 0; bottom: 0; left: 0; width: 38%; 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.2s cubic-bezier(.55, 0, .45, 1) infinite;
}
@keyframes v4-spin { to { transform: rotate(360deg); } }
@keyframes v4-fade { to { opacity: 1; } }
@keyframes v4-pop { from { transform: translateX(var(--v4-x, 0)) scale(.4); opacity: 0; } to { opacity: 1; } }
@keyframes v4-twinkle { 0%, 100% { opacity: .3; transform: scale(.7); } 50% { opacity: 1; transform: scale(1.1); } }
@keyframes v4-arrow-go { 0% { transform: translateX(0); } 70% { transform: translateX(12px); opacity: 0; } 71% { transform: translateX(-10px); opacity: 0; } 100% { transform: translateX(0); opacity: 1; } }
@keyframes v4-nudge { from { transform: translateX(-3px); } to { transform: translateX(3px); } }

/* ═══════════════════════════════════════════════════════════════
   D · ACCOUNT-INFO PAGE (after payment)
   ═══════════════════════════════════════════════════════════════ */
/* PAYMENT VERIFIED summary: big 3D tag + gold price plate */
#orderModal#orderModal .order-summary {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "tag tag" "name price";
  align-items: center; gap: 12px 10px; margin: 0 0 14px; padding: 16px 16px 16px; border-radius: 20px;
  background: linear-gradient(180deg, #3b4779 0%, #2a3468 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .26);
}
#orderModal#orderModal .order-summary span {
  grid-area: tag; justify-self: start; display: inline-flex; align-items: center; gap: 9px;
  padding: 8px 15px 8px 9px; border-radius: 99px;
  font: 800 14.5px/1 Inter, system-ui, sans-serif; letter-spacing: .1em; color: #03361a; text-transform: uppercase;
  background: linear-gradient(180deg, #8ff5b4 0%, #34d36a 55%, #1a9f46 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .75);
}
#orderModal#orderModal .order-summary span::before {
  content: ""; width: 22px; height: 22px; border-radius: 50%; flex: 0 0 auto;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2315803d' stroke-width='3.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5.5 12.5l4.2 4.2L18.5 8'/%3E%3C/svg%3E") center / 14px no-repeat,
    #fff;
}
#orderModal#orderModal .order-summary strong { grid-area: name; min-width: 0; font: 800 17px/1.3 Inter, system-ui, sans-serif; color: #fff; overflow-wrap: anywhere; }
#orderModal#orderModal .order-summary b {
  grid-area: price; padding: 9px 16px; border-radius: 13px;
  font: 800 21px/1 Sora, Inter, system-ui, sans-serif; color: #3a2400;
  background: linear-gradient(180deg, #ffe58f 0%, #f7bd16 58%, #dc9306 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .85);
}

/* Payment complete banner */
#orderModal#orderModal .account-payment-success {
  position: relative; gap: 15px; margin: 0 0 16px; padding: 16px 16px 16px; border-radius: 20px; overflow: hidden;
  background:
    repeating-linear-gradient(45deg, rgba(255, 255, 255, .035) 0 1px, transparent 1px 14px),
    linear-gradient(180deg, #23805a 0%, #175f42 100%);
  box-shadow: inset 0 1px 0 rgba(190, 255, 225, .4);
}
#orderModal#orderModal .account-payment-success::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px;
  background: linear-gradient(90deg, #35f0a0, #ffe58f 55%, #35f0a0); opacity: .9;
}
#orderModal#orderModal .account-payment-success-mark {
  flex: 0 0 54px; width: 54px; height: 54px;
  background: linear-gradient(180deg, #8ff5b4 0%, #34d36a 55%, #1a9f46 100%);
  box-shadow: inset 0 0 0 3px rgba(255, 255, 255, .7), inset 0 1px 0 rgba(255, 255, 255, .9);
}
#orderModal#orderModal .account-payment-success-mark svg { width: 28px; height: 28px; stroke: #fff; }
#orderModal#orderModal .account-payment-success strong { font: 800 18px/1.25 Inter, system-ui, sans-serif; color: #fff; }
#orderModal#orderModal .account-payment-success small { display: block; margin-top: 4px; font: 500 12.5px/1.55 Inter, system-ui, sans-serif; color: #cdf3e1; }

/* account type tiles: same logo size, smaller boxes */
#orderModal#orderModal .credential-grid { gap: 9px !important; }
#orderModal#orderModal .credential-option {
  min-height: 0 !important; padding: 10px 4px 9px !important; gap: 6px !important; border-radius: 16px !important;
  font: 700 12px/1.2 Inter, system-ui, sans-serif !important;
  background: linear-gradient(180deg, #3d4980 0%, #2b3566 100%) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .26) !important;
}
#orderModal#orderModal .credential-option.active {
  color: #3a2400 !important;
  background: linear-gradient(180deg, #ffe58f 0%, #f7bd16 58%, #dc9306 100%) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .85) !important;
}
#orderModal#orderModal .credential-option .co-ico { box-shadow: none !important; }
#orderModal#orderModal .credential-option.active .co-ico { box-shadow: none !important; }

/* fields: recessed 3D inputs with an icon plate */
#orderModal#orderModal .field { margin: 15px 0 0; }
#orderModal#orderModal .field label {
  display: flex; align-items: center; gap: 8px; margin: 0 0 8px 2px;
  font: 800 11px/1 Inter, system-ui, sans-serif !important; letter-spacing: .14em !important; color: #c1ccea !important;
}
#orderModal#orderModal .field label::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: linear-gradient(180deg, #ffe58f, #f7bd16); }
#orderModal#orderModal .field input:not([type="hidden"]):not([type="file"]) {
  height: 56px !important; padding-left: 62px !important; border-radius: 17px !important;
  font: 600 15px/1 Inter, system-ui, sans-serif !important; color: #fff;
  background-color: #0e1431 !important;
  background-image: var(--fi, none), linear-gradient(180deg, #080c20 0%, #121a3b 100%) !important;
  background-repeat: no-repeat, no-repeat !important;
  background-position: 8px center, 0 0 !important;
  background-size: 40px 40px, 100% 100% !important;
  box-shadow: none !important;
}
#orderModal#orderModal .field input::placeholder { color: #7482ab !important; font-weight: 500; }
#orderModal#orderModal .field input:not([type="hidden"]):not([type="file"]):focus { box-shadow: 0 0 0 2px #f7bd16 !important; }
#orderModal#orderModal .field input.field-error { box-shadow: 0 0 0 2px #ff6378 !important; }
#orderModal#orderModal .field input:not([type="hidden"]):not([type="file"]) { --fi-user: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%2377b8ff'/%3E%3Cstop offset='1' stop-color='%232f6fe0'/%3E%3C/linearGradient%3E%3C/defs%3E%3Crect width='40' height='40' rx='12' fill='url(%23g)'/%3E%3Cg transform='translate(8 8)' fill='none' stroke='white' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8' r='3.8'/%3E%3Cpath d='M5 20c.8-4 3.6-6 7-6s6.2 2 7 6'/%3E%3C/g%3E%3C/svg%3E"); }
#orderModal#orderModal #accountId { --fi: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%2377b8ff'/%3E%3Cstop offset='1' stop-color='%232f6fe0'/%3E%3C/linearGradient%3E%3C/defs%3E%3Crect width='40' height='40' rx='12' fill='url(%23g)'/%3E%3Cg transform='translate(8 8)' fill='none' stroke='white' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8' r='3.8'/%3E%3Cpath d='M5 20c.8-4 3.6-6 7-6s6.2 2 7 6'/%3E%3C/g%3E%3C/svg%3E"); }
#orderModal#orderModal #playerName { --fi: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%2377b8ff'/%3E%3Cstop offset='1' stop-color='%232f6fe0'/%3E%3C/linearGradient%3E%3C/defs%3E%3Crect width='40' height='40' rx='12' fill='url(%23g)'/%3E%3Cg transform='translate(8 8)' fill='none' stroke='white' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8' r='3.8'/%3E%3Cpath d='M5 20c.8-4 3.6-6 7-6s6.2 2 7 6'/%3E%3C/g%3E%3C/svg%3E"); }
#orderModal#orderModal #accountPassword,
#orderModal#orderModal #backupCode { --fi: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%23b794ff'/%3E%3Cstop offset='1' stop-color='%236d46d8'/%3E%3C/linearGradient%3E%3C/defs%3E%3Crect width='40' height='40' rx='12' fill='url(%23g)'/%3E%3Cg transform='translate(8 8)' fill='none' stroke='white' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='5' y='11' width='14' height='9' rx='2.5'/%3E%3Cpath d='M8 11V8a4 4 0 0 1 8 0v3'/%3E%3C/g%3E%3C/svg%3E"); }
#orderModal#orderModal #contactPhone { --fi: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%236ee7a0'/%3E%3Cstop offset='1' stop-color='%2316a34a'/%3E%3C/linearGradient%3E%3C/defs%3E%3Crect width='40' height='40' rx='12' fill='url(%23g)'/%3E%3Cg transform='translate(8 8)' fill='none' stroke='white' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 16.9v3a2 2 0 0 1-2.2 2 19.8 19.8 0 0 1-8.6-3.1 19.5 19.5 0 0 1-6-6A19.8 19.8 0 0 1 2.1 4.2 2 2 0 0 1 4.1 2h3a2 2 0 0 1 2 1.7c.1 1 .4 1.9.7 2.8a2 2 0 0 1-.5 2.1L8 9.9a16 16 0 0 0 6 6l1.3-1.3a2 2 0 0 1 2.1-.4c.9.3 1.8.6 2.8.7a2 2 0 0 1 1.7 2z'/%3E%3C/g%3E%3C/svg%3E"); }
#orderModal#orderModal #whatsapp { --fi: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%235ff08f'/%3E%3Cstop offset='1' stop-color='%2310a84a'/%3E%3C/linearGradient%3E%3C/defs%3E%3Crect width='40' height='40' rx='12' fill='url(%23g)'/%3E%3Cg transform='translate(8 8)' fill='none' stroke='white' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 20l1.4-4.2A8 8 0 1 1 8.3 18.7L4 20z'/%3E%3Cpath d='M9.4 9.4c.3 2.3 2.4 4.3 4.8 4.8l1-1.2-1.7-.9-.8.7c-.8-.4-1.5-1.1-1.9-1.9l.7-.8-.9-1.7z'/%3E%3C/g%3E%3C/svg%3E"); }
#orderModal#orderModal #uniqueId { --fi: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%23ffe58f'/%3E%3Cstop offset='1' stop-color='%23e0980a'/%3E%3C/linearGradient%3E%3C/defs%3E%3Crect width='40' height='40' rx='12' fill='url(%23g)'/%3E%3Cg transform='translate(8 8)' fill='none' stroke='%233a2400' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2.5' y='7' width='19' height='10.5' rx='5'/%3E%3Cpath d='M7.5 10.2v3.6M5.7 12h3.6'/%3E%3Ccircle cx='15.6' cy='10.8' r='.8'/%3E%3Ccircle cx='18' cy='13.2' r='.8'/%3E%3C/g%3E%3C/svg%3E"); }

/* Customer Safety list */
#orderModal#orderModal .order-trust-list {
  gap: 11px; margin: 16px 0 0; padding: 16px 16px 17px; border-radius: 18px;
  background: linear-gradient(180deg, #34406f 0%, #262f5e 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .22);
}
#orderModal#orderModal .order-trust-list b { font: 800 11.5px/1 Inter, system-ui, sans-serif; letter-spacing: .16em; color: #ffd466; }
#orderModal#orderModal .order-trust-list span { padding-left: 28px; font: 500 12.5px/1.55 Inter, system-ui, sans-serif; color: #d1daf1; }
#orderModal#orderModal .order-trust-list span::before {
  top: 1px; width: 19px; height: 19px;
  background: linear-gradient(180deg, #7bf0a3, #22c55e 60%, #15993f) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / 11px no-repeat;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .6);
}

/* Complete Order + Close */
#orderModal#orderModal .order-nav { grid-template-columns: .82fr 1.4fr; gap: 12px; margin: 22px 0 0; }
#orderModal#orderModal .op-back {
  height: 58px; border-radius: 18px; color: #fff; font: 800 15px/1 Sora, Inter, system-ui, sans-serif;
  background: linear-gradient(180deg, #46528c 0%, #2e3868 100%) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3) !important;
}
#orderModal#orderModal .op-back::before {
  width: 28px; height: 28px; border-radius: 50%;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M19 12H5M11 6l-6 6 6 6'/%3E%3C/svg%3E") center / 15px no-repeat,
    rgba(255, 255, 255, .12);
}
@media (prefers-reduced-motion: reduce) {
  #orderModal#orderModal .eps-payment-pro-head::before, #orderModal#orderModal .eps-payment-pro-head::after,
  #orderModal#orderModal .op-handoff .oh-ring::before, #orderModal#orderModal .op-handoff .oh-ring::after,
  #orderModal#orderModal .op-handoff .oh-bar i { animation-duration: 3s; }
}

/* PUBG offer popup shares the same cards: icon tiles are retired everywhere */
#offerModal#offerModal .om-tile { display: none !important; }