/* LI GAMING Checkout Polish — clean, premium, mobile-first layout. */
#orderModal#orderModal.payment-step-active .premium-order-box {
  width: min(500px, 100%) !important;
  max-width: 500px !important;
  max-height: calc(100dvh - 14px) !important;
  margin: 0 auto !important;
}
#orderModal#orderModal.payment-step-active .op-panel {
  display: flex !important;
  flex-direction: column !important;
  width: 100% !important;
  max-height: calc(100dvh - 14px) !important;
  min-height: 0 !important;
  overflow: hidden !important;
  border: 0 !important;
  border-radius: 22px !important;
  background: linear-gradient(165deg, #273253 0%, #1d2744 52%, #151d34 100%) !important;
  box-shadow: 0 20px 56px rgba(0, 0, 0, .38) !important;
}
#orderModal#orderModal.payment-step-active .op-panel::before {
  display: none !important;
  content: none !important;
}
#orderModal#orderModal.payment-step-active .op-head {
  flex: 0 0 auto !important;
  gap: 12px !important;
  padding: 16px 16px 12px !important;
  background: transparent !important;
  box-shadow: none !important;
}
#orderModal#orderModal.payment-step-active .op-top {
  align-self: stretch !important;
  gap: 11px !important;
  min-width: 0 !important;
  padding-right: 42px !important;
}
#orderModal#orderModal.payment-step-active .op-tile {
  width: 42px !important;
  height: 42px !important;
  flex-basis: 42px !important;
  border-radius: 13px !important;
}
#orderModal#orderModal.payment-step-active .op-kicker {
  margin-bottom: 5px !important;
  color: #a9bad8 !important;
  font: 800 9px/1.2 Arial, Helvetica, sans-serif !important;
  letter-spacing: .18em !important;
}
#orderModal#orderModal.payment-step-active #orderTitle {
  margin: 0 !important;
  color: #fff !important;
  font: 800 18px/1.25 Arial, Helvetica, sans-serif !important;
  letter-spacing: -.025em !important;
}
#orderModal#orderModal.payment-step-active .custom-step-indicator {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  max-width: 100% !important;
  gap: 10px !important;
  margin: 0 !important;
  padding: 9px 12px !important;
  border: 0 !important;
  border-radius: 13px !important;
  background: rgba(10, 17, 33, .34) !important;
  box-shadow: none !important;
}
#orderModal#orderModal.payment-step-active .step-item { gap: 8px !important; }
#orderModal#orderModal.payment-step-active .step-circle {
  width: 27px !important;
  height: 27px !important;
  font-size: 11px !important;
}
#orderModal#orderModal.payment-step-active .step-label {
  color: #eef3ff !important;
  font: 750 11px/1.2 Arial, Helvetica, sans-serif !important;
  letter-spacing: .01em !important;
}
#orderModal#orderModal.payment-step-active .step-line {
  max-width: 80px !important;
  height: 2px !important;
  background: linear-gradient(90deg, rgba(255, 204, 75, .7), rgba(89, 213, 205, .65)) !important;
}
#orderModal#orderModal.payment-step-active .op-body {
  display: flex !important;
  flex: 1 1 auto !important;
  flex-direction: column !important;
  min-height: 0 !important;
  overflow: hidden !important;
  padding: 0 16px max(12px, env(safe-area-inset-bottom)) !important;
  background: transparent !important;
}
#orderModal#orderModal.payment-step-active #orderSummary {
  flex: 0 0 auto !important;
  margin: 0 0 8px !important;
}
#orderModal#orderModal.payment-step-active #paymentStep {
  display: flex !important;
  flex: 1 1 auto !important;
  flex-direction: column !important;
  min-height: 0 !important;
  overflow: hidden !important;
  gap: 0 !important;
}
#orderModal#orderModal.payment-step-active .checkout-step-scroll {
  display: block !important;
  flex: 1 1 auto !important;
  min-height: 0 !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  overscroll-behavior: contain !important;
  -webkit-overflow-scrolling: touch !important;
  scrollbar-width: thin !important;
  scrollbar-color: rgba(153, 175, 214, .26) transparent !important;
  padding: 0 1px 10px !important;
}
#orderModal#orderModal.payment-step-active .checkout-step-scroll::-webkit-scrollbar { width: 4px !important; }
#orderModal#orderModal.payment-step-active .checkout-step-scroll::-webkit-scrollbar-thumb { border-radius: 99px !important; background: rgba(153, 175, 214, .28) !important; }

/* Wallet and reward controls: no heavy enclosing card, just two clear sections. */
#orderModal#orderModal.payment-step-active #paymentStep .checkout-finance-card {
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  color: #f4f7ff !important;
  background: transparent !important;
  box-shadow: none !important;
}
#orderModal#orderModal.payment-step-active .cfc-heading { display: none !important; }
#orderModal#orderModal.payment-step-active .cfc-finance-grid {
  display: flex !important;
  flex-direction: column !important;
  gap: 0 !important;
}
#orderModal#orderModal.payment-step-active .cfc-option-block {
  min-width: 0 !important;
  padding: 9px 0 13px !important;
  border: 0 !important;
  border-bottom: 1px solid rgba(192, 207, 235, .105) !important;
  background: transparent !important;
}
#orderModal#orderModal.payment-step-active .cfc-option-block + .cfc-option-block {
  padding-top: 13px !important;
}
#orderModal#orderModal.payment-step-active .cfc-toggle-row {
  display: flex !important;
  align-items: center !important;
  gap: 9px !important;
  min-height: 32px !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  cursor: pointer !important;
}
#orderModal#orderModal.payment-step-active .cfc-toggle-row input[type="checkbox"] {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  margin: 0 !important;
  opacity: 0 !important;
  pointer-events: none !important;
}
#orderModal#orderModal.payment-step-active .cfc-toggle-copy {
  display: grid !important;
  flex: 1 1 auto !important;
  gap: 3px !important;
  min-width: 0 !important;
}
#orderModal#orderModal.payment-step-active .cfc-toggle-copy b {
  color: #f8faff !important;
  font: 800 12px/1.2 Arial, Helvetica, sans-serif !important;
}
#orderModal#orderModal.payment-step-active .cfc-toggle-copy small {
  color: #9facc6 !important;
  font: 500 10px/1.35 Arial, Helvetica, sans-serif !important;
}
#orderModal#orderModal.payment-step-active .cfc-toggle-copy small strong {
  color: #ffda76 !important;
  font-weight: 800 !important;
}
#orderModal#orderModal.payment-step-active .cfc-toggle-switch {
  position: relative !important;
  width: 33px !important;
  height: 19px !important;
  flex: 0 0 33px !important;
  border-radius: 99px !important;
  background: #46516b !important;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, .22) !important;
}
#orderModal#orderModal.payment-step-active .cfc-toggle-switch::after {
  top: 3px !important;
  left: 3px !important;
  width: 13px !important;
  height: 13px !important;
  background: #dfe7f7 !important;
}
#orderModal#orderModal.payment-step-active .cfc-toggle-row input:checked ~ .cfc-toggle-switch {
  background: linear-gradient(90deg, #1caa8b, #31d1a4) !important;
}
#orderModal#orderModal.payment-step-active .cfc-toggle-row input:checked ~ .cfc-toggle-switch::after {
  transform: translateX(14px) !important;
  background: #fff !important;
}
#orderModal#orderModal.payment-step-active .cfc-control[hidden] { display: none !important; }
#orderModal#orderModal.payment-step-active .cfc-inline-control {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) 58px !important;
  align-items: stretch !important;
  gap: 8px !important;
  margin: 8px 0 0 !important;
  padding: 0 !important;
}
#orderModal#orderModal.payment-step-active .cfc-visually-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
}
#orderModal#orderModal.payment-step-active .cfc-inline-control input {
  width: 100% !important;
  min-width: 0 !important;
  min-height: 39px !important;
  padding: 9px 11px !important;
  border: 1px solid rgba(143, 163, 201, .22) !important;
  border-radius: 10px !important;
  outline: 0 !important;
  color: #f5f7ff !important;
  background: rgba(10, 17, 31, .72) !important;
  box-shadow: none !important;
  font: 700 12px/1.2 Arial, Helvetica, sans-serif !important;
  font-variant-numeric: tabular-nums !important;
}
#orderModal#orderModal.payment-step-active .cfc-inline-control input:focus-visible {
  border-color: rgba(255, 207, 83, .72) !important;
  box-shadow: 0 0 0 2px rgba(255, 207, 83, .12) !important;
}
#orderModal#orderModal.payment-step-active .cfc-inline-control input:disabled {
  color: #8997b1 !important;
  opacity: .7 !important;
}
#orderModal#orderModal.payment-step-active .cfc-max-button {
  min-width: 58px !important;
  min-height: 39px !important;
  padding: 0 10px !important;
  border: 1px solid rgba(255, 213, 103, .26) !important;
  border-radius: 10px !important;
  color: #ffdc7d !important;
  background: rgba(255, 202, 69, .09) !important;
  font: 900 10px/1 Arial, Helvetica, sans-serif !important;
  letter-spacing: .08em !important;
  cursor: pointer !important;
}
#orderModal#orderModal.payment-step-active .cfc-max-button:disabled { opacity: .35 !important; cursor: not-allowed !important; }
#orderModal#orderModal.payment-step-active .cfc-points-hint {
  display: block !important;
  margin: 5px 0 0 1px !important;
  color: #8797b4 !important;
  font: 500 9px/1.35 Arial, Helvetica, sans-serif !important;
}
#orderModal#orderModal.payment-step-active .cfc-totals {
  display: grid !important;
  gap: 8px !important;
  margin: 10px 0 0 !important;
  padding: 11px 0 2px !important;
  border: 0 !important;
  border-radius: 0 !important;
  border-top: 1px solid rgba(191, 207, 235, .13) !important;
  background: transparent !important;
  box-shadow: none !important;
}
#orderModal#orderModal.payment-step-active .cfc-totals > div {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
  color: #aebbd1 !important;
  font: 500 11px/1.3 Arial, Helvetica, sans-serif !important;
}
#orderModal#orderModal.payment-step-active .cfc-totals b { color: #edf2fc !important; font: 800 11px/1.3 Arial, Helvetica, sans-serif !important; font-variant-numeric: tabular-nums !important; }
#orderModal#orderModal.payment-step-active .cfc-totals .cfc-payable {
  margin-top: 1px !important;
  padding-top: 10px !important;
  border-top: 1px solid rgba(191, 207, 235, .13) !important;
  color: #fff !important;
  font-weight: 800 !important;
}
#orderModal#orderModal.payment-step-active .cfc-totals .cfc-payable strong {
  color: #ffda75 !important;
  font: 900 20px/1.1 Arial, Helvetica, sans-serif !important;
  font-variant-numeric: tabular-nums !important;
}
#orderModal#orderModal.payment-step-active .cfc-note { display: none !important; }

/* A typographic payment heading and the exact user-provided wide payment strip; no dark card. */
#orderModal#orderModal.payment-step-active #paymentStep .eps-payment-pro-panel,
#orderModal#orderModal.payment-step-active #paymentStep .checkout-payment-methods {
  position: relative !important;
  display: block !important;
  isolation: auto !important;
  overflow: visible !important;
  margin: 14px 0 2px !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}
#orderModal#orderModal .eps-payment-pro-panel::before,
#orderModal#orderModal .eps-payment-pro-panel::after,
#orderModal#orderModal .eps-payment-pro-head::before,
#orderModal#orderModal .eps-payment-pro-head::after,
#orderModal#orderModal .eps-payment-pro-title::before,
#orderModal#orderModal .eps-payment-pro-title::after,
#orderModal#orderModal .eps-payment-pro-title h3::after { display: none !important; content: none !important; animation: none !important; }
#orderModal#orderModal.payment-step-active .eps-payment-pro-head {
  display: block !important;
  margin: 0 0 9px !important;
  padding: 0 !important;
  border: 0 !important;
  text-align: left !important;
  background: transparent !important;
}
#orderModal#orderModal.payment-step-active .eps-payment-pro-title {
  display: block !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  text-align: left !important;
  background: transparent !important;
}
#orderModal#orderModal.payment-step-active .checkout-payment-kicker {
  display: block !important;
  margin-bottom: 4px !important;
  color: #9daecc !important;
  font: 800 8px/1.2 Arial, Helvetica, sans-serif !important;
  letter-spacing: .16em !important;
}
#orderModal#orderModal.payment-step-active .eps-payment-pro-title h3 {
  margin: 0 !important;
  color: #f7f9ff !important;
  font: 800 14px/1.25 Arial, Helvetica, sans-serif !important;
  letter-spacing: -.01em !important;
  text-shadow: none !important;
}
#orderModal#orderModal.payment-step-active .eps-payment-pro-title p {
  margin: 4px 0 0 !important;
  color: #98a9c6 !important;
  font: 500 10px/1.4 Arial, Helvetica, sans-serif !important;
}
#orderModal#orderModal .eps-payment-strip-wrap {
  display: block !important;
  width: 100% !important;
  overflow: hidden !important;
  border: 0 !important;
  border-radius: 9px !important;
  background: #fff !important;
  line-height: 0 !important;
  box-shadow: none !important;
}
#orderModal#orderModal .eps-payment-strip-image {
  display: block !important;
  width: 100% !important;
  height: auto !important;
  max-width: 100% !important;
  object-fit: contain !important;
  border: 0 !important;
  border-radius: 9px !important;
  background: #fff !important;
}
#orderModal#orderModal.payment-step-active .eps-payment-footnote {
  margin: 9px 1px 2px !important;
  color: #8292ae !important;
  font: 500 9px/1.45 Arial, Helvetica, sans-serif !important;
  text-align: left !important;
}
#orderModal#orderModal.payment-step-active #epsPayError {
  flex: 0 0 auto !important;
  max-height: 76px !important;
  overflow-y: auto !important;
  margin: 0 0 8px !important;
  padding: 9px 11px !important;
  border-radius: 10px !important;
  font: 600 11px/1.4 Arial, Helvetica, sans-serif !important;
}
#orderModal#orderModal.payment-step-active #paymentStep .eps-direct-pay-button {
  position: relative !important;
  z-index: 12 !important;
  display: flex !important;
  flex: 0 0 auto !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  min-height: 53px !important;
  margin: 9px 0 0 !important;
  padding: 13px 18px !important;
  border: 0 !important;
  border-radius: 13px !important;
  color: #1f1b10 !important;
  background: linear-gradient(180deg, #ffe58f 0%, #ffca34 54%, #efa900 100%) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.78), 0 5px 14px rgba(236, 167, 12, .14) !important;
  font: 900 13px/1.2 Arial, Helvetica, sans-serif !important;
}
#orderModal#orderModal.payment-step-active #paymentStep .eps-direct-pay-button:disabled { opacity: .65 !important; }
#orderModal#orderModal #epsPayButton::before { display: none !important; content: none !important; }
#orderModal#orderModal #epsPayButton .pp-i { width: 19px !important; height: 19px !important; }
@media (max-width: 600px) {
  #orderModal#orderModal.payment-step-active .premium-order-box,
  #orderModal#orderModal.payment-step-active .op-panel { max-height: calc(100dvh - 12px) !important; }
  #orderModal#orderModal.payment-step-active .op-head { padding: 13px 13px 10px !important; }
  #orderModal#orderModal.payment-step-active .op-body { padding: 0 13px max(10px, env(safe-area-inset-bottom)) !important; }
  #orderModal#orderModal.payment-step-active .checkout-step-scroll { padding-bottom: 8px !important; }
  #orderModal#orderModal.payment-step-active .eps-payment-pro-panel { margin-top: 12px !important; }
  #orderModal#orderModal.payment-step-active .eps-payment-pro-title h3 { font-size: 13px !important; }
  #orderModal#orderModal.payment-step-active .cfc-toggle-copy b { font-size: 12px !important; }
}
@media (prefers-reduced-motion: reduce) {
  #orderModal#orderModal * { scroll-behavior: auto !important; animation-duration: .01ms !important; transition-duration: .01ms !important; }
}


/* Checkout refinement v2: clear hierarchy, premium order mark, functional finance controls. */
#orderModal#orderModal.payment-step-active .op-head.checkout-op-head {
  display:flex !important; flex-direction:column !important; gap:10px !important;
  padding:14px 15px 11px !important; position:relative !important;
}
#orderModal#orderModal.payment-step-active .checkout-title-row {
  display:flex !important; align-items:center !important; min-height:15px !important;
  padding:0 40px 0 1px !important;
}
#orderModal#orderModal.payment-step-active .checkout-title-row .op-kicker {
  display:block !important; margin:0 !important; color:#ffda76 !important;
  font:900 10px/1.1 Arial,Helvetica,sans-serif !important; letter-spacing:.2em !important;
}
#orderModal#orderModal.payment-step-active .custom-step-indicator {
  order:2 !important; margin:0 !important; padding:5px 3px 7px !important;
  background:transparent !important; border-radius:0 !important; box-shadow:none !important; gap:10px !important;
}
#orderModal#orderModal.payment-step-active .step-item { display:flex !important; flex-direction:column !important; align-items:center !important; justify-content:center !important; gap:5px !important; min-width:110px !important; }
#orderModal#orderModal.payment-step-active .step-circle { width:27px !important; height:27px !important; border:1px solid rgba(178,196,229,.15) !important; background:linear-gradient(145deg,#2d3954,#172238) !important; color:#8f9fbb !important; }
#orderModal#orderModal.payment-step-active .step-item.active .step-circle { border:0 !important; background:linear-gradient(145deg,#ffe98e,#ffc531 55%,#dc9300) !important; color:#28200b !important; box-shadow:0 4px 10px rgba(229,165,11,.22), inset 0 1px 0 rgba(255,255,255,.5) !important; }
#orderModal#orderModal.payment-step-active .step-label { font-size:10px !important; font-weight:850 !important; color:#b4c0d5 !important; letter-spacing:.04em !important; text-transform:uppercase !important; }
#orderModal#orderModal.payment-step-active .step-item.active .step-label { color:#fff1c0 !important; }
#orderModal#orderModal.payment-step-active .step-line { flex:1 1 45px !important; max-width:none !important; align-self:flex-start !important; margin-top:13px !important; background:linear-gradient(90deg,rgba(255,207,76,.7),rgba(98,215,203,.55)) !important; }
#orderModal#orderModal.payment-step-active .op-top.checkout-offer-row { order:3 !important; align-self:stretch !important; display:flex !important; align-items:center !important; gap:11px !important; margin:0 !important; padding:10px 11px !important; min-width:0 !important; border:1px solid rgba(177,198,231,.09) !important; border-radius:15px !important; background:linear-gradient(145deg,rgba(57,73,105,.68),rgba(24,35,56,.62)) !important; box-shadow:inset 0 1px 0 rgba(255,255,255,.055),0 7px 17px rgba(4,9,20,.12) !important; }
#orderModal#orderModal.payment-step-active .checkout-brand-mark { width:45px !important; height:45px !important; flex:0 0 45px !important; padding:0 !important; overflow:hidden !important; display:grid !important; place-items:center !important; border:0 !important; border-radius:14px !important; background:transparent !important; box-shadow:0 5px 12px rgba(0,0,0,.22) !important; }
#orderModal#orderModal.payment-step-active .checkout-brand-mark .checkout-brand-logo { display:block !important; width:100% !important; height:100% !important; padding:3px !important; box-sizing:border-box !important; object-fit:contain !important; }
#orderModal#orderModal.payment-step-active .checkout-offer-row .op-ttl { flex:1 1 auto !important; min-width:0 !important; }
#orderModal#orderModal.payment-step-active .checkout-offer-row #orderTitle { margin:0 !important; font:850 17px/1.25 Arial,Helvetica,sans-serif !important; color:#fff !important; letter-spacing:-.02em !important; overflow-wrap:anywhere !important; }
#orderModal#orderModal.payment-step-active .op-close { z-index:20 !important; top:12px !important; right:12px !important; border:0 !important; outline:0 !important; box-shadow:none !important; }

/* Two separate tactile finance tiles; inputs stay editable, toggles choose whether values apply. */
#orderModal#orderModal.payment-step-active .cfc-finance-grid { gap:9px !important; }
#orderModal#orderModal.payment-step-active .cfc-option-block,
#orderModal#orderModal.payment-step-active .cfc-option-block + .cfc-option-block {
  position:relative !important; padding:11px 12px 12px !important;
  border:1px solid rgba(167,192,232,.12) !important; border-radius:15px !important;
  background:linear-gradient(145deg,rgba(47,62,91,.75),rgba(22,32,51,.96)) !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06),0 7px 16px rgba(2,7,17,.13) !important;
}
#orderModal#orderModal.payment-step-active .cfc-option-block::before { content:"" !important; position:absolute !important; left:0 !important; top:13px !important; bottom:13px !important; width:3px !important; border-radius:0 4px 4px 0 !important; background:linear-gradient(180deg,#ffe58d,#e9a40a) !important; opacity:.85 !important; }
#orderModal#orderModal.payment-step-active .cfc-option-block.cfc-points-block::before { background:linear-gradient(180deg,#87f2e6,#42a6e4) !important; }
#orderModal#orderModal.payment-step-active .cfc-toggle-row { padding-left:3px !important; cursor:pointer !important; }
#orderModal#orderModal.payment-step-active .cfc-inline-control input:disabled { color:#f5f7ff !important; opacity:1 !important; cursor:text !important; }
#orderModal#orderModal.payment-step-active .cfc-max-button:disabled { opacity:.42 !important; }
#orderModal#orderModal.payment-step-active .cfc-unavailable { opacity:1 !important; }
#orderModal#orderModal.payment-step-active .cfc-unavailable .cfc-toggle-row { cursor:pointer !important; }

/* Accepted payment-methods strip: text only, no dark wrapper, no duplicate security copy. */
#orderModal#orderModal.payment-step-active .checkout-accepted-methods {
  display:block !important; margin:15px 0 4px !important; padding:0 !important;
  border:0 !important; border-radius:0 !important; background:transparent !important; box-shadow:none !important; overflow:visible !important;
}
#orderModal#orderModal.payment-step-active .checkout-accepted-methods h3 { margin:0 0 9px !important; padding:0 1px !important; color:#f2f5fd !important; font:850 13px/1.25 Arial,Helvetica,sans-serif !important; letter-spacing:-.01em !important; }
#orderModal#orderModal.payment-step-active .checkout-accepted-strip { display:block !important; width:100% !important; max-width:100% !important; height:auto !important; object-fit:contain !important; border:0 !important; outline:0 !important; border-radius:9px !important; background:#fff !important; box-shadow:none !important; }
#orderModal#orderModal.payment-step-active .eps-payment-footnote,
#orderModal#orderModal.payment-step-active .checkout-payment-kicker { display:none !important; }
#orderModal#orderModal.payment-step-active #paymentStep .eps-direct-pay-button { border:0 !important; outline:0 !important; box-shadow:0 5px 13px rgba(238,170,5,.16) !important; -webkit-appearance:none !important; appearance:none !important; }
#orderModal#orderModal.payment-step-active #paymentStep .eps-direct-pay-button:focus,
#orderModal#orderModal.payment-step-active #paymentStep .eps-direct-pay-button:focus-visible { outline:none !important; border:0 !important; }
@media(max-width:600px){
 #orderModal#orderModal.payment-step-active .op-head.checkout-op-head{gap:8px!important;padding:12px 12px 9px!important}
 #orderModal#orderModal.payment-step-active .op-top.checkout-offer-row{padding:9px!important;border-radius:13px!important}
 #orderModal#orderModal.payment-step-active .checkout-brand-mark{width:42px!important;height:42px!important;flex-basis:42px!important}
 #orderModal#orderModal.payment-step-active .checkout-offer-row #orderTitle{font-size:15px!important}
 #orderModal#orderModal.payment-step-active .step-item{min-width:95px!important}
 #orderModal#orderModal.payment-step-active .checkout-accepted-methods{margin-top:12px!important}
}

/* Keep the reorganized checkout header consistent on the Account Details step as well. */
#orderModal#orderModal .op-head.checkout-op-head{display:flex;flex-direction:column;gap:10px;padding:14px 15px 11px;position:relative}
#orderModal#orderModal .checkout-title-row{display:flex;align-items:center;min-height:15px;padding:0 40px 0 1px}
#orderModal#orderModal .checkout-title-row .op-kicker{display:block;margin:0;color:#ffda76;font:900 10px/1.1 Arial,Helvetica,sans-serif;letter-spacing:.2em}
#orderModal#orderModal .op-top.checkout-offer-row{display:flex;align-items:center;gap:11px;margin:0;padding:10px 11px;min-width:0;border:1px solid rgba(177,198,231,.09);border-radius:15px;background:linear-gradient(145deg,rgba(57,73,105,.68),rgba(24,35,56,.62));box-shadow:inset 0 1px 0 rgba(255,255,255,.055),0 7px 17px rgba(4,9,20,.12)}
#orderModal#orderModal .checkout-brand-mark{width:45px;height:45px;flex:0 0 45px;padding:0;overflow:hidden;display:grid;place-items:center;border:0;border-radius:14px;background:transparent;box-shadow:0 5px 12px rgba(0,0,0,.22)}
#orderModal#orderModal .checkout-brand-mark .checkout-brand-logo{display:block;width:100%;height:100%;padding:3px;box-sizing:border-box;object-fit:contain}
#orderModal#orderModal .checkout-offer-row .op-ttl{flex:1 1 auto;min-width:0}
#orderModal#orderModal .checkout-offer-row #orderTitle{margin:0;color:#fff;font:850 17px/1.25 Arial,Helvetica,sans-serif;letter-spacing:-.02em;overflow-wrap:anywhere}
#orderModal#orderModal .op-close{z-index:20;top:12px;right:12px;border:0;outline:0;box-shadow:none}
@media(max-width:600px){#orderModal#orderModal .op-head.checkout-op-head{gap:8px;padding:12px 12px 9px}#orderModal#orderModal .op-top.checkout-offer-row{padding:9px;border-radius:13px}#orderModal#orderModal .checkout-brand-mark{width:42px;height:42px;flex-basis:42px}#orderModal#orderModal .checkout-offer-row #orderTitle{font-size:15px}}
#orderModal#orderModal .custom-step-indicator{display:flex;align-items:center;justify-content:center;width:100%;max-width:100%;gap:10px;margin:0;padding:5px 3px 7px;border:0;border-radius:0;background:transparent;box-shadow:none}
#orderModal#orderModal .step-item{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;min-width:110px}
#orderModal#orderModal .step-circle{display:grid;place-items:center;width:27px;height:27px;border:1px solid rgba(178,196,229,.15);border-radius:50%;background:linear-gradient(145deg,#2d3954,#172238);color:#8f9fbb;font-size:11px;font-weight:900}
#orderModal#orderModal .step-item.active .step-circle{border:0;background:linear-gradient(145deg,#ffe98e,#ffc531 55%,#dc9300);color:#28200b;box-shadow:0 4px 10px rgba(229,165,11,.22),inset 0 1px 0 rgba(255,255,255,.5)}
#orderModal#orderModal .step-label{color:#b4c0d5;font:850 10px/1.2 Arial,Helvetica,sans-serif;letter-spacing:.04em;text-transform:uppercase}
#orderModal#orderModal .step-item.active .step-label{color:#fff1c0}
#orderModal#orderModal .step-line{flex:1 1 45px;max-width:none;height:2px;align-self:flex-start;margin-top:13px;background:linear-gradient(90deg,rgba(255,207,76,.7),rgba(98,215,203,.55))}
@media(max-width:600px){#orderModal#orderModal .step-item{min-width:95px}}


/* Checkout hierarchy correction: Checkout label, payment steps, then item title. */
#orderModal#orderModal.payment-step-active .checkout-title-row { order: 1 !important; }
#orderModal#orderModal.payment-step-active .custom-step-indicator { order: 2 !important; }
#orderModal#orderModal.payment-step-active .op-top.checkout-offer-row { order: 3 !important; }
#orderModal#orderModal.payment-step-active .checkout-accepted-methods h3 {
  width: 100% !important;
  text-align: center !important;
  margin-inline: auto !important;
  padding-inline: 0 !important;
}


/* Checkout 3-stage flow: Checkout -> Payment -> Account Details. */
#orderModal#orderModal .custom-step-indicator {
  display:grid !important;
  grid-template-columns:minmax(0,1fr) minmax(14px,.55fr) minmax(0,1fr) minmax(14px,.55fr) minmax(0,1fr) !important;
  align-items:start !important; gap:5px !important; width:100% !important; max-width:100% !important;
  margin:0 !important; padding:8px 2px 5px !important; border:0 !important; border-radius:0 !important;
  background:transparent !important; box-shadow:none !important;
}
#orderModal#orderModal .custom-step-indicator .step-item {
  display:flex !important; flex-direction:column !important; align-items:center !important; justify-content:flex-start !important;
  min-width:0 !important; width:100% !important; gap:6px !important; text-align:center !important;
}
#orderModal#orderModal .custom-step-indicator .step-circle {
  display:grid !important; place-items:center !important; width:31px !important; height:31px !important; flex:0 0 31px !important;
  border-radius:50% !important; border:1px solid rgba(169,190,224,.22) !important;
  color:#a9b8d2 !important; background:linear-gradient(145deg,#354361,#172238) !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 3px 8px rgba(0,0,0,.16) !important;
  font:850 12px/1 Arial,Helvetica,sans-serif !important;
}
#orderModal#orderModal .custom-step-indicator .step-item.active .step-circle {
  color:#2b220c !important; border-color:transparent !important;
  background:linear-gradient(145deg,#fff0a1 0%,#ffd34f 52%,#e9a400 100%) !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.75),0 5px 13px rgba(255,190,30,.22) !important;
}
#orderModal#orderModal .custom-step-indicator .step-item.done .step-circle {
  color:#061b16 !important; border-color:rgba(112,235,190,.7) !important;
  background:linear-gradient(145deg,#8cf0c0,#23bd8b) !important;
}
#orderModal#orderModal .custom-step-indicator .step-label {
  display:block !important; width:100% !important; min-width:0 !important; margin:0 !important;
  color:#93a3c0 !important; text-align:center !important; white-space:normal !important; overflow-wrap:anywhere !important;
  font:800 clamp(8px,2.6vw,10px)/1.2 Arial,Helvetica,sans-serif !important; letter-spacing:.035em !important; text-transform:uppercase !important;
}
#orderModal#orderModal .custom-step-indicator .step-item.active .step-label { color:#fff0bf !important; }
#orderModal#orderModal .custom-step-indicator .step-item.done .step-label { color:#8be7bf !important; }
#orderModal#orderModal .custom-step-indicator .step-line {
  display:block !important; width:100% !important; min-width:10px !important; height:2px !important; flex:none !important;
  margin:15px 0 0 !important; border:0 !important; border-radius:99px !important;
  background:linear-gradient(90deg,rgba(255,207,76,.18),rgba(112,135,177,.36)) !important;
}
#orderModal#orderModal .custom-step-indicator .step-line.is-complete {
  background:linear-gradient(90deg,#2bc795,#5ce2b0) !important; box-shadow:0 0 7px rgba(43,199,149,.15) !important;
}
#orderModal#orderModal .custom-step-indicator .step-line.is-current {
  background:linear-gradient(90deg,#ffcf4c,#36d3c8) !important;
}
/* Slimmer finance controls while keeping balances alongside their labels. */
#orderModal#orderModal.payment-step-active .cfc-option-block { padding:7px 0 9px !important; }
#orderModal#orderModal.payment-step-active .cfc-option-block + .cfc-option-block { padding-top:9px !important; }
#orderModal#orderModal.payment-step-active .cfc-toggle-row { min-height:26px !important; gap:8px !important; }
#orderModal#orderModal.payment-step-active .cfc-toggle-copy { display:flex !important; flex-wrap:wrap !important; align-items:baseline !important; gap:4px 9px !important; }
#orderModal#orderModal.payment-step-active .cfc-toggle-copy b { font-size:12px !important; }
#orderModal#orderModal.payment-step-active .cfc-toggle-copy small { font-size:10px !important; white-space:nowrap !important; }
#orderModal#orderModal.payment-step-active .cfc-inline-control { margin-top:6px !important; grid-template-columns:minmax(0,1fr) 52px !important; gap:7px !important; }
#orderModal#orderModal.payment-step-active .cfc-inline-control input,
#orderModal#orderModal.payment-step-active .cfc-max-button { min-height:34px !important; border-radius:9px !important; }
#orderModal#orderModal.payment-step-active .cfc-inline-control input { padding:7px 10px !important; }
#orderModal#orderModal.payment-step-active .cfc-max-button { min-width:52px !important; }
@media (max-width:380px) {
  #orderModal#orderModal .custom-step-indicator { grid-template-columns:minmax(0,1fr) minmax(9px,.4fr) minmax(0,1fr) minmax(9px,.4fr) minmax(0,1fr) !important; gap:3px !important; }
  #orderModal#orderModal .custom-step-indicator .step-label { letter-spacing:0 !important; font-size:8px !important; }
  #orderModal#orderModal .custom-step-indicator .step-circle { width:29px !important; height:29px !important; flex-basis:29px !important; }
  #orderModal#orderModal .custom-step-indicator .step-line { margin-top:14px !important; }
}


/* Final mobile checkout repair v5: keep all three stages horizontal and finance tiles equal-height. */
#orderModal#orderModal.payment-step-active .custom-step-indicator,
#orderModal#orderModal.account-info-active .custom-step-indicator {
  display: grid !important;
  grid-template-columns: minmax(0,1fr) minmax(16px,.34fr) minmax(0,1fr) minmax(16px,.34fr) minmax(0,1fr) !important;
  align-items: start !important;
  justify-content: stretch !important;
  gap: 4px !important;
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
  padding: 7px 0 5px !important;
  margin: 0 !important;
  overflow: visible !important;
}
#orderModal#orderModal.payment-step-active .custom-step-indicator > .step-item,
#orderModal#orderModal.account-info-active .custom-step-indicator > .step-item {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: flex-start !important;
  width: auto !important;
  min-width: 0 !important;
  max-width: 100% !important;
  flex: initial !important;
  gap: 6px !important;
  padding: 0 !important;
  margin: 0 !important;
  text-align: center !important;
  overflow: visible !important;
}
#orderModal#orderModal.payment-step-active .custom-step-indicator .step-circle,
#orderModal#orderModal.account-info-active .custom-step-indicator .step-circle {
  display: grid !important;
  place-items: center !important;
  flex: 0 0 31px !important;
  width: 31px !important;
  min-width: 31px !important;
  max-width: 31px !important;
  height: 31px !important;
  margin: 0 !important;
  border-radius: 50% !important;
  font-size: 12px !important;
  line-height: 1 !important;
}
#orderModal#orderModal.payment-step-active .custom-step-indicator .step-label,
#orderModal#orderModal.account-info-active .custom-step-indicator .step-label {
  display: block !important;
  width: auto !important;
  max-width: 100% !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  white-space: nowrap !important;
  overflow-wrap: normal !important;
  word-break: keep-all !important;
  writing-mode: horizontal-tb !important;
  text-orientation: mixed !important;
  font-size: clamp(9px, 2.55vw, 11px) !important;
  line-height: 1.2 !important;
  letter-spacing: 0 !important;
  text-align: center !important;
}
#orderModal#orderModal.payment-step-active .custom-step-indicator > .step-line,
#orderModal#orderModal.account-info-active .custom-step-indicator > .step-line {
  display: block !important;
  position: relative !important;
  width: 100% !important;
  min-width: 12px !important;
  max-width: none !important;
  height: 2px !important;
  margin: 15px 0 0 !important;
  padding: 0 !important;
  align-self: start !important;
  flex: initial !important;
  border: 0 !important;
  border-radius: 999px !important;
}

/* Wallet and points use the same compact tile height, even though points have a rate hint. */
#orderModal#orderModal.payment-step-active .cfc-finance-grid {
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
}
#orderModal#orderModal.payment-step-active .cfc-finance-grid > .cfc-option-block,
#orderModal#orderModal.payment-step-active .cfc-finance-grid > .cfc-option-block + .cfc-option-block {
  box-sizing: border-box !important;
  min-height: 118px !important;
  height: 118px !important;
  flex: 0 0 118px !important;
  padding: 9px 10px 8px !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-start !important;
  overflow: visible !important;
}
#orderModal#orderModal.payment-step-active .cfc-finance-grid > .cfc-option-block .cfc-toggle-row {
  min-height: 25px !important;
  height: 25px !important;
  flex: 0 0 25px !important;
  gap: 8px !important;
}
#orderModal#orderModal.payment-step-active .cfc-finance-grid > .cfc-option-block .cfc-control {
  margin-top: 7px !important;
  padding: 0 !important;
  flex: 0 0 auto !important;
}
#orderModal#orderModal.payment-step-active .cfc-finance-grid > .cfc-option-block .cfc-inline-control input,
#orderModal#orderModal.payment-step-active .cfc-finance-grid > .cfc-option-block .cfc-max-button {
  box-sizing: border-box !important;
  min-height: 35px !important;
  height: 35px !important;
}
#orderModal#orderModal.payment-step-active .cfc-finance-grid > .cfc-option-block .cfc-points-hint {
  display: block !important;
  min-height: 12px !important;
  height: 12px !important;
  margin: 5px 0 0 !important;
  line-height: 12px !important;
  font-size: 9px !important;
}
#orderModal#orderModal.payment-step-active .cfc-finance-grid > .cfc-option-block:not(.cfc-points-block)::after {
  content: "" !important;
  display: block !important;
  height: 12px !important;
  min-height: 12px !important;
  margin-top: 5px !important;
  visibility: hidden !important;
}
@media (max-width: 380px) {
  #orderModal#orderModal.payment-step-active .custom-step-indicator,
  #orderModal#orderModal.account-info-active .custom-step-indicator {
    grid-template-columns: minmax(0,1fr) minmax(12px,.25fr) minmax(0,1fr) minmax(12px,.25fr) minmax(0,1fr) !important;
    gap: 2px !important;
  }
  #orderModal#orderModal.payment-step-active .custom-step-indicator .step-label,
  #orderModal#orderModal.account-info-active .custom-step-indicator .step-label {
    font-size: 8.5px !important;
  }
}


/* Checkout compact refinement v6: remove redundant kicker, raise steps, equal slim wallet/rewards tiles. */
#orderModal#orderModal.payment-step-active .checkout-title-row,
#orderModal#orderModal.account-info-active .checkout-title-row { display:none !important; }
#orderModal#orderModal.payment-step-active .op-head.checkout-op-head,
#orderModal#orderModal.account-info-active .op-head.checkout-op-head {
  gap:5px !important;
  padding:6px 13px 8px !important;
}
#orderModal#orderModal.payment-step-active .custom-step-indicator,
#orderModal#orderModal.account-info-active .custom-step-indicator {
  order:1 !important;
  margin:0 !important;
  padding:2px 0 3px !important;
  gap:4px !important;
  background:transparent !important;
  border:0 !important;
  box-shadow:none !important;
}
#orderModal#orderModal.payment-step-active .step-item,
#orderModal#orderModal.account-info-active .step-item {
  min-width:0 !important;
  gap:4px !important;
}
#orderModal#orderModal.payment-step-active .custom-step-indicator .step-circle,
#orderModal#orderModal.account-info-active .custom-step-indicator .step-circle {
  width:28px !important;
  min-width:28px !important;
  max-width:28px !important;
  height:28px !important;
  flex-basis:28px !important;
}
#orderModal#orderModal.payment-step-active .custom-step-indicator .step-label,
#orderModal#orderModal.account-info-active .custom-step-indicator .step-label {
  font-size:9px !important;
  line-height:1.15 !important;
  letter-spacing:0 !important;
  white-space:nowrap !important;
  overflow-wrap:normal !important;
  word-break:normal !important;
}
#orderModal#orderModal.payment-step-active .custom-step-indicator > .step-line,
#orderModal#orderModal.account-info-active .custom-step-indicator > .step-line {
  margin-top:13px !important;
  min-width:9px !important;
}
#orderModal#orderModal.payment-step-active .op-top.checkout-offer-row,
#orderModal#orderModal.account-info-active .op-top.checkout-offer-row {
  margin-top:0 !important;
}
/* Same 84px height for both finance controls, including a reserved hint line on Wallet. */
#orderModal#orderModal.payment-step-active .cfc-finance-grid {
  gap:6px !important;
}
#orderModal#orderModal.payment-step-active .cfc-finance-grid > .cfc-option-block,
#orderModal#orderModal.payment-step-active .cfc-finance-grid > .cfc-option-block + .cfc-option-block {
  box-sizing:border-box !important;
  min-height:84px !important;
  height:84px !important;
  max-height:84px !important;
  flex:0 0 84px !important;
  padding:6px 9px 5px !important;
  margin:0 !important;
  overflow:hidden !important;
}
#orderModal#orderModal.payment-step-active .cfc-finance-grid > .cfc-option-block .cfc-toggle-row {
  height:23px !important;
  min-height:23px !important;
  flex:0 0 23px !important;
  gap:7px !important;
}
#orderModal#orderModal.payment-step-active .cfc-finance-grid > .cfc-option-block .cfc-toggle-copy {
  display:flex !important;
  flex-wrap:wrap !important;
  align-items:baseline !important;
  gap:3px 7px !important;
}
#orderModal#orderModal.payment-step-active .cfc-finance-grid > .cfc-option-block .cfc-toggle-copy b {
  font-size:11px !important;
  line-height:1.15 !important;
}
#orderModal#orderModal.payment-step-active .cfc-finance-grid > .cfc-option-block .cfc-toggle-copy small {
  font-size:9px !important;
  line-height:1.15 !important;
  white-space:nowrap !important;
}
#orderModal#orderModal.payment-step-active .cfc-finance-grid > .cfc-option-block .cfc-control {
  margin-top:4px !important;
  padding:0 !important;
}
#orderModal#orderModal.payment-step-active .cfc-finance-grid > .cfc-option-block .cfc-inline-control {
  grid-template-columns:minmax(0,1fr) 48px !important;
  gap:6px !important;
  margin-top:4px !important;
}
#orderModal#orderModal.payment-step-active .cfc-finance-grid > .cfc-option-block .cfc-inline-control input,
#orderModal#orderModal.payment-step-active .cfc-finance-grid > .cfc-option-block .cfc-max-button {
  height:30px !important;
  min-height:30px !important;
  padding-top:5px !important;
  padding-bottom:5px !important;
  border-radius:8px !important;
  font-size:11px !important;
}
#orderModal#orderModal.payment-step-active .cfc-finance-grid > .cfc-option-block .cfc-points-hint {
  display:block !important;
  height:9px !important;
  min-height:9px !important;
  margin:3px 0 0 !important;
  line-height:9px !important;
  font-size:8px !important;
}
#orderModal#orderModal.payment-step-active .cfc-finance-grid > .cfc-option-block:not(.cfc-points-block)::after {
  content:"" !important;
  display:block !important;
  height:9px !important;
  min-height:9px !important;
  margin-top:3px !important;
  visibility:hidden !important;
}
#orderModal#orderModal.payment-step-active .checkout-accepted-methods h3 {
  text-align:center !important;
}
#orderModal#orderModal.payment-step-active .checkout-accepted-strip {
  width:100% !important;
  height:auto !important;
  aspect-ratio:2048 / 521 !important;
  object-fit:contain !important;
}
@media (max-width:380px) {
  #orderModal#orderModal.payment-step-active .op-head.checkout-op-head { padding:5px 10px 7px !important; }
  #orderModal#orderModal.payment-step-active .custom-step-indicator .step-label { font-size:8px !important; }
  #orderModal#orderModal.payment-step-active .cfc-finance-grid > .cfc-option-block,
  #orderModal#orderModal.payment-step-active .cfc-finance-grid > .cfc-option-block + .cfc-option-block {
    height:84px !important; min-height:84px !important; max-height:84px !important; flex-basis:84px !important;
  }
}


/* Checkout uses the site's LI logo next to the offer name and price. */
#orderModal#orderModal .checkout-brand-mark .checkout-brand-logo{display:block!important;width:100%!important;height:100%!important;padding:3px!important;box-sizing:border-box!important;object-fit:contain!important;object-position:center!important;filter:drop-shadow(0 1px 2px rgba(0,0,0,.18))!important}