/* ui-pro-v6.css — Buy Now (checkout) popup, My Wallet button, Wallet popup, VIP & Reward Points,
   login-method links. Loaded LAST. Same crisp-3D language as the offer popup:
   gradient faces, hairline rings, top highlights. No glows, no blurred or offset shadows.
   `:not(#zz)` raises specificity above the older id-based rules. */

/* ───────── shared surfaces (documented once, repeated as literals below) ─────────
   raised : linear-gradient(180deg,#2e3963,#232c4d)  + inset 0 1px 0 rgba(255,255,255,.15), inset 0 0 0 1px rgba(150,172,235,.2)
   sunk   : #0b1122                                  + inset 0 0 0 1px rgba(150,172,235,.18)
   gold   : gloss + #ffe58a → #f7bd16 → #dc9505
   green  : gloss + #58e49a → #1fb361 → #118044                                                  */

/* one plain font for every popup in this file */
:is(#orderModal, #financeModal, #profilePhoneLinkModal):not(#zz) *,
#profileModal:not(#zz) .profile-wallet-entry *,
#profileModal:not(#zz) .profile-account-links * {
  font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif !important;
}

/* ═════════════════ 1 · BUY NOW / CHECKOUT POPUP ═════════════════ */
#orderModal#orderModal:not(#zz) .op-panel {
  border: 0 !important;
  border-radius: 24px !important;
  background:
    linear-gradient(90deg, #ffe58a 0%, #f7bd16 34%, #34d482 100%) top / 100% 3px no-repeat,
    linear-gradient(180deg, rgba(255, 255, 255, .06) 0%, rgba(255, 255, 255, 0) 180px),
    linear-gradient(180deg, #1d2544 0%, #151c36 55%, #0f1529 100%) !important;
  box-shadow: inset 0 0 0 1px rgba(150, 172, 235, .22), inset 0 1px 0 rgba(255, 255, 255, .16) !important;
}
#orderModal#orderModal:not(#zz) .op-head { padding-top: 16px !important; }
#orderModal#orderModal:not(#zz) .op-close {
  width: 32px !important;
  height: 32px !important;
  border-radius: 50% !important;
  color: #fff !important;
  background: linear-gradient(180deg, rgba(255, 255, 255, .18) 0%, rgba(255, 255, 255, 0) 50%), linear-gradient(180deg, #4a5584 0%, #2c3558 100%) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3), inset 0 0 0 1px rgba(150, 172, 235, .2) !important;
}
#orderModal#orderModal:not(#zz) .checkout-title-row .op-kicker {
  display: inline-block !important;
  padding: 5px 11px 5px 11px !important;
  border-radius: 99px !important;
  color: #3a2600 !important;
  font-size: 10px !important;
  letter-spacing: .16em !important;
  background: linear-gradient(180deg, rgba(255, 255, 255, .5) 0%, rgba(255, 255, 255, 0) 52%), linear-gradient(180deg, #ffe58a 0%, #f7bd16 56%, #dc9505 100%) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .8), inset 0 0 0 1px rgba(140, 85, 0, .3) !important;
}
#orderModal#orderModal:not(#zz) .custom-step-indicator { background: none !important; box-shadow: none !important; }
#orderModal#orderModal:not(#zz) .custom-step-indicator .step-circle {
  color: #b6c4e6 !important;
  border: 0 !important;
  background: linear-gradient(180deg, #3a4672 0%, #28315a 100%) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .18), inset 0 0 0 1px rgba(150, 172, 235, .22) !important;
}
#orderModal#orderModal:not(#zz) .custom-step-indicator .step-item.active .step-circle {
  color: #3a2600 !important;
  background: linear-gradient(180deg, rgba(255, 255, 255, .5) 0%, rgba(255, 255, 255, 0) 52%), linear-gradient(180deg, #ffe58a 0%, #f7bd16 56%, #dc9505 100%) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .8), inset 0 0 0 1px rgba(140, 85, 0, .35) !important;
}
#orderModal#orderModal:not(#zz) .custom-step-indicator .step-item.done .step-circle {
  color: #04210f !important;
  background: linear-gradient(180deg, rgba(255, 255, 255, .5) 0%, rgba(255, 255, 255, 0) 52%), linear-gradient(180deg, #7cf0b0 0%, #26c46e 56%, #14904d 100%) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .7), inset 0 0 0 1px rgba(0, 80, 35, .4) !important;
}
#orderModal#orderModal:not(#zz) .custom-step-indicator .step-line {
  height: 4px !important;
  border-radius: 99px !important;
  background: #0b1122 !important;
  box-shadow: inset 0 0 0 1px rgba(150, 172, 235, .18) !important;
}
#orderModal#orderModal:not(#zz) .custom-step-indicator .step-line.is-complete { background: linear-gradient(180deg, #7cf0b0, #1fb361) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .5) !important; }
#orderModal#orderModal:not(#zz) .custom-step-indicator .step-line.is-current { background: linear-gradient(90deg, #ffe58a, #f7bd16 60%, #2e3963) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .5) !important; }
#orderModal#orderModal:not(#zz) .custom-step-indicator .step-label { font-weight: 800 !important; }

/* offer row */
#orderModal#orderModal:not(#zz) .op-top.checkout-offer-row {
  border: 0 !important;
  border-radius: 16px !important;
  background: linear-gradient(180deg, rgba(255, 255, 255, .07) 0%, rgba(255, 255, 255, 0) 46%), linear-gradient(180deg, #2f3a66 0%, #232c4e 100%) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .16), inset 0 0 0 1px rgba(150, 172, 235, .2) !important;
}
#orderModal#orderModal:not(#zz) .checkout-brand-mark { box-shadow: none !important; }
#orderModal#orderModal:not(#zz) .checkout-offer-row #orderTitle { font-weight: 800 !important; letter-spacing: -.015em !important; }

/* wallet / points tiles */
#orderModal#orderModal:not(#zz) .cfc-finance-grid > .cfc-option-block,
#orderModal#orderModal:not(#zz) .cfc-finance-grid > .cfc-option-block + .cfc-option-block {
  border: 0 !important;
  border-radius: 16px !important;
  background: linear-gradient(180deg, rgba(255, 255, 255, .07) 0%, rgba(255, 255, 255, 0) 42%), linear-gradient(180deg, #2c3761 0%, #212a4a 100%) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .15), inset 0 0 0 1px rgba(150, 172, 235, .2) !important;
}
#orderModal#orderModal:not(#zz) .cfc-toggle-copy b { color: #fff !important; font-weight: 800 !important; }
#orderModal#orderModal:not(#zz) .cfc-toggle-copy small { color: #a9b8dc !important; }
#orderModal#orderModal:not(#zz) .cfc-toggle-copy small strong { color: #ffd95c !important; }
#orderModal#orderModal:not(#zz) .cfc-toggle-switch {
  width: 36px !important;
  height: 21px !important;
  flex: 0 0 36px !important;
  background: linear-gradient(180deg, #0b1122, #1b2342) !important;
  box-shadow: inset 0 0 0 1px rgba(150, 172, 235, .25) !important;
}
#orderModal#orderModal:not(#zz) .cfc-toggle-switch::after {
  top: 3px !important;
  left: 3px !important;
  width: 15px !important;
  height: 15px !important;
  background: linear-gradient(180deg, #ffffff 0%, #c9d4ee 100%) !important;
  box-shadow: inset 0 1px 0 #fff !important;
}
#orderModal#orderModal:not(#zz) .cfc-toggle-row input:checked ~ .cfc-toggle-switch {
  background: linear-gradient(180deg, #7cf0b0 0%, #26c46e 56%, #14904d 100%) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .6), inset 0 0 0 1px rgba(0, 80, 35, .4) !important;
}
#orderModal#orderModal:not(#zz) .cfc-toggle-row input:checked ~ .cfc-toggle-switch::after { transform: translateX(15px) !important; }
#orderModal#orderModal:not(#zz) .cfc-inline-control input {
  border: 0 !important;
  color: #fff !important;
  background: #0b1122 !important;
  box-shadow: inset 0 0 0 1px rgba(150, 172, 235, .22) !important;
  font-weight: 700 !important;
}
#orderModal#orderModal:not(#zz) .cfc-inline-control input:focus-visible { box-shadow: inset 0 0 0 1.5px #f7bd16 !important; }
#orderModal#orderModal:not(#zz) .cfc-max-button {
  border: 0 !important;
  color: #3a2600 !important;
  background: linear-gradient(180deg, rgba(255, 255, 255, .5) 0%, rgba(255, 255, 255, 0) 52%), linear-gradient(180deg, #ffe58a 0%, #f7bd16 56%, #dc9505 100%) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .8), inset 0 0 0 1px rgba(140, 85, 0, .3) !important;
}
#orderModal#orderModal:not(#zz) .cfc-points-hint { color: #9fb0d8 !important; }

/* totals */
#orderModal#orderModal:not(#zz) .cfc-totals {
  margin-top: 10px !important;
  padding: 11px 13px 10px !important;
  border: 0 !important;
  border-radius: 16px !important;
  background: #0b1122 !important;
  box-shadow: inset 0 0 0 1px rgba(150, 172, 235, .18) !important;
}
#orderModal#orderModal:not(#zz) .cfc-totals > div { color: #a9b8dc !important; }
#orderModal#orderModal:not(#zz) .cfc-totals b { color: #fff !important; }
#orderModal#orderModal:not(#zz) .cfc-totals .cfc-payable { border-top: 1px solid rgba(150, 172, 235, .18) !important; }
#orderModal#orderModal:not(#zz) .cfc-totals .cfc-payable strong { color: #ffd95c !important; font-weight: 800 !important; font-size: 21px !important; }

/* accepted methods */
#orderModal#orderModal:not(#zz) .checkout-accepted-methods h3 {
  display: table !important;
  width: auto !important;
  margin: 0 auto 10px !important;
  padding: 6px 15px !important;
  border-radius: 99px !important;
  color: #3a2600 !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  letter-spacing: .06em !important;
  text-transform: uppercase !important;
  background: linear-gradient(180deg, rgba(255, 255, 255, .5) 0%, rgba(255, 255, 255, 0) 52%), linear-gradient(180deg, #ffe58a 0%, #f7bd16 56%, #dc9505 100%) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .8), inset 0 0 0 1px rgba(140, 85, 0, .3) !important;
}
#orderModal#orderModal:not(#zz) .checkout-accepted-strip,
#orderModal#orderModal:not(#zz) .eps-payment-strip-image {
  border: 3px solid #e6ecf8 !important;
  border-radius: 15px !important;
  box-sizing: border-box !important;
}

/* pay / submit buttons */
#orderModal#orderModal:not(#zz) #paymentStep .eps-direct-pay-button,
#orderModal#orderModal:not(#zz) .op-btn.op-submit {
  border: 0 !important;
  border-radius: 15px !important;
  color: #3a2600 !important;
  font-size: 14px !important;
  font-weight: 800 !important;
  letter-spacing: .01em !important;
  background: linear-gradient(180deg, rgba(255, 255, 255, .5) 0%, rgba(255, 255, 255, 0) 52%), linear-gradient(180deg, #ffe58a 0%, #f7bd16 56%, #dc9505 100%) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .8), inset 0 0 0 1px rgba(140, 85, 0, .35) !important;
}
#orderModal#orderModal:not(#zz) .op-btn.op-submit {
  color: #fff !important;
  background: linear-gradient(180deg, rgba(255, 255, 255, .34) 0%, rgba(255, 255, 255, 0) 52%), linear-gradient(180deg, #58e49a 0%, #1fb361 56%, #118044 100%) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .55), inset 0 0 0 1px rgba(0, 70, 30, .4) !important;
}
#orderModal#orderModal:not(#zz) .op-btn.op-back {
  color: #fff !important;
  border: 0 !important;
  border-radius: 15px !important;
  background: linear-gradient(180deg, rgba(255, 255, 255, .1) 0%, rgba(255, 255, 255, 0) 50%), linear-gradient(180deg, #3a4672 0%, #28315a 100%) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .2), inset 0 0 0 1px rgba(150, 172, 235, .22) !important;
}

/* account-details step */
#orderModal#orderModal:not(#zz) #accountStep .field label { color: #a9b8dc !important; font-weight: 800 !important; letter-spacing: .1em !important; }
#orderModal#orderModal:not(#zz) #accountStep .field input,
#orderModal#orderModal:not(#zz) #accountStep .field select {
  border: 0 !important;
  border-radius: 13px !important;
  color: #fff !important;
  background: #0b1122 !important;
  box-shadow: inset 0 0 0 1px rgba(150, 172, 235, .22) !important;
}
#orderModal#orderModal:not(#zz) #accountStep .field input:focus { box-shadow: inset 0 0 0 1.5px #f7bd16 !important; }
#orderModal#orderModal:not(#zz) .credential-option {
  border: 0 !important;
  border-radius: 16px !important;
  color: #fff !important;
  background: linear-gradient(180deg, rgba(255, 255, 255, .07) 0%, rgba(255, 255, 255, 0) 46%), linear-gradient(180deg, #2f3a66 0%, #232c4e 100%) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .15), inset 0 0 0 1px rgba(150, 172, 235, .2) !important;
}
#orderModal#orderModal:not(#zz) .credential-option.active,
#orderModal#orderModal:not(#zz) .credential-option.selected,
#orderModal#orderModal:not(#zz) .credential-option.is-active,
#orderModal#orderModal:not(#zz) .credential-option[aria-pressed="true"] {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .2), inset 0 0 0 2px #f7bd16 !important;
}
#orderModal#orderModal:not(#zz) .order-trust-list {
  border: 0 !important;
  border-radius: 16px !important;
  background: linear-gradient(180deg, #232c4e 0%, #1b2341 100%) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12), inset 0 0 0 1px rgba(150, 172, 235, .18) !important;
}
#orderModal#orderModal:not(#zz) .order-trust-list b { color: #ffd95c !important; }

/* ═════════════════ 2 · MY WALLET BUTTON (inside profile) ═════════════════ */
#profileModal:not(#zz) .profile-wallet-entry {
  gap: 12px !important;
  min-height: 56px !important;
  margin: 12px 0 14px !important;
  padding: 8px 12px 8px 9px !important;
  border-radius: 18px !important;
  color: #3a2600 !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .55) 0%, rgba(255, 255, 255, .12) 46%, rgba(255, 255, 255, 0) 50%),
    repeating-linear-gradient(135deg, rgba(255, 255, 255, .08) 0 2px, rgba(255, 255, 255, 0) 2px 10px),
    linear-gradient(135deg, #ffe27a 0%, #ffc21f 48%, #f29a07 100%) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .85), inset 0 0 0 1px rgba(140, 85, 0, .35) !important;
}
#profileModal:not(#zz) .profile-wallet-entry:active { transform: translateY(1px) !important; }
#profileModal:not(#zz) .pwe-icon {
  width: 40px !important;
  height: 40px !important;
  flex: 0 0 40px !important;
  border-radius: 13px !important;
  color: #ffd95c !important;
  background: linear-gradient(180deg, rgba(255, 255, 255, .16) 0%, rgba(255, 255, 255, 0) 50%), linear-gradient(180deg, #34406e 0%, #1a2244 100%) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3), inset 0 0 0 1px rgba(10, 16, 48, .5) !important;
}
#profileModal:not(#zz) .pwe-icon svg { width: 22px !important; height: 22px !important; }
#profileModal:not(#zz) .pwe-label { color: #2a1b00 !important; font-size: 15px !important; font-weight: 800 !important; letter-spacing: -.01em !important; }
#profileModal:not(#zz) .profile-wallet-entry > b {
  padding: 7px 12px !important;
  border-radius: 99px !important;
  color: #ffe58a !important;
  font-size: 13px !important;
  font-weight: 800 !important;
  background: linear-gradient(180deg, #2b3562 0%, #171e3f 100%) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .22), inset 0 0 0 1px rgba(10, 16, 48, .5) !important;
}
#profileModal:not(#zz) .pwe-arrow {
  display: grid !important;
  place-items: center !important;
  width: 26px !important;
  height: 26px !important;
  border-radius: 50% !important;
  color: #3a2600 !important;
  font-size: 19px !important;
  font-weight: 800 !important;
  padding-bottom: 2px !important;
  box-sizing: border-box !important;
  background: rgba(255, 255, 255, .45) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .7) !important;
}

/* ═════════════════ 3 · WALLET + VIP/REWARDS POPUP (and phone-link popup) ═════════════════ */
:is(#financeModal, #profilePhoneLinkModal):not(#zz) .finance-modal-box {
  border: 0 !important;
  border-radius: 26px !important;
  background:
    linear-gradient(90deg, #ffe58a 0%, #f7bd16 34%, #34d482 100%) top / 100% 3px no-repeat,
    linear-gradient(180deg, rgba(255, 255, 255, .06) 0%, rgba(255, 255, 255, 0) 190px),
    linear-gradient(180deg, #1d2544 0%, #151c36 55%, #0f1529 100%) !important;
  box-shadow: inset 0 0 0 1px rgba(150, 172, 235, .22), inset 0 1px 0 rgba(255, 255, 255, .16) !important;
}
:is(#financeModal, #profilePhoneLinkModal):not(#zz) .finance-modal-scroll { padding-top: 22px !important; }
:is(#financeModal, #profilePhoneLinkModal):not(#zz) .finance-modal-close {
  width: 33px !important;
  height: 33px !important;
  color: #fff !important;
  background: linear-gradient(180deg, rgba(255, 255, 255, .18) 0%, rgba(255, 255, 255, 0) 50%), linear-gradient(180deg, #4a5584 0%, #2c3558 100%) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3), inset 0 0 0 1px rgba(150, 172, 235, .2) !important;
}
:is(#financeModal, #profilePhoneLinkModal):not(#zz) .finance-modal-icon {
  width: 46px !important;
  height: 46px !important;
  flex-basis: 46px !important;
  border-radius: 15px !important;
  color: #3a2600 !important;
  background: linear-gradient(180deg, rgba(255, 255, 255, .5) 0%, rgba(255, 255, 255, 0) 52%), linear-gradient(180deg, #ffe58a 0%, #f7bd16 56%, #dc9505 100%) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .8), inset 0 0 0 1px rgba(140, 85, 0, .35) !important;
}
:is(#financeModal, #profilePhoneLinkModal):not(#zz) .finance-modal-heading small { color: #ffd95c !important; font-weight: 800 !important; letter-spacing: .2em !important; }
:is(#financeModal, #profilePhoneLinkModal):not(#zz) .finance-modal-heading h2 { font-weight: 800 !important; letter-spacing: -.02em !important; }

/* hero cards: balance + rewards summary */
:is(#financeModal):not(#zz) .fm-balance-card,
:is(#financeModal):not(#zz) .fm-rewards-summary {
  border-radius: 18px !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .13) 0%, rgba(255, 255, 255, 0) 46%),
    repeating-linear-gradient(135deg, rgba(255, 255, 255, .045) 0 2px, rgba(255, 255, 255, 0) 2px 10px),
    linear-gradient(135deg, #3d4d93 0%, #25306a 55%, #1a2250 100%) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .24), inset 0 0 0 1px rgba(150, 172, 235, .25) !important;
}
:is(#financeModal):not(#zz) .fm-balance-card > small,
:is(#financeModal):not(#zz) .fm-rewards-summary small { color: #bfcdf0 !important; font-weight: 800 !important; letter-spacing: .14em !important; }
:is(#financeModal):not(#zz) .fm-balance-card > strong { color: #ffd95c !important; font-weight: 800 !important; letter-spacing: -.02em !important; }
:is(#financeModal):not(#zz) .fm-rewards-summary > div:first-child > strong { color: #ffd95c !important; font-weight: 800 !important; }
:is(#financeModal):not(#zz) .fm-rewards-summary > div:first-child > span { color: #bfcdf0 !important; }
:is(#financeModal):not(#zz) .fm-points-pill {
  padding: 8px 14px !important;
  border-radius: 14px !important;
  background: #0b1122 !important;
  box-shadow: inset 0 0 0 1px rgba(150, 172, 235, .22) !important;
}
:is(#financeModal):not(#zz) .fm-points-pill > strong { color: #6fe9e0 !important; font-weight: 800 !important; }

/* buttons */
:is(#financeModal, #profilePhoneLinkModal):not(#zz) .fm-add-money-shortcut,
:is(#financeModal, #profilePhoneLinkModal):not(#zz) .fm-topup-row button,
:is(#financeModal, #profilePhoneLinkModal):not(#zz) .fm-primary-button {
  border: 0 !important;
  border-radius: 14px !important;
  color: #3a2600 !important;
  font-weight: 800 !important;
  background: linear-gradient(180deg, rgba(255, 255, 255, .5) 0%, rgba(255, 255, 255, 0) 52%), linear-gradient(180deg, #ffe58a 0%, #f7bd16 56%, #dc9505 100%) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .8), inset 0 0 0 1px rgba(140, 85, 0, .35) !important;
}
:is(#financeModal):not(#zz) .fm-quick-amounts button {
  border: 0 !important;
  border-radius: 12px !important;
  color: #fff !important;
  font-weight: 800 !important;
  background: linear-gradient(180deg, rgba(255, 255, 255, .08) 0%, rgba(255, 255, 255, 0) 48%), linear-gradient(180deg, #2f3a66 0%, #232c4e 100%) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .15), inset 0 0 0 1px rgba(150, 172, 235, .22) !important;
}
:is(#financeModal):not(#zz) .fm-quick-amounts button.active {
  color: #3a2600 !important;
  background: linear-gradient(180deg, rgba(255, 255, 255, .5) 0%, rgba(255, 255, 255, 0) 52%), linear-gradient(180deg, #ffe58a 0%, #f7bd16 56%, #dc9505 100%) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .8), inset 0 0 0 1px rgba(140, 85, 0, .35) !important;
}
:is(#financeModal, #profilePhoneLinkModal):not(#zz) .fm-topup-row input,
:is(#financeModal, #profilePhoneLinkModal):not(#zz) .fm-input {
  border: 0 !important;
  border-radius: 13px !important;
  color: #fff !important;
  background: #0b1122 !important;
  box-shadow: inset 0 0 0 1px rgba(150, 172, 235, .22) !important;
}
:is(#financeModal, #profilePhoneLinkModal):not(#zz) .fm-topup-row input:focus,
:is(#financeModal, #profilePhoneLinkModal):not(#zz) .fm-input:focus { box-shadow: inset 0 0 0 1.5px #f7bd16 !important; }
:is(#financeModal):not(#zz) .fm-topup-form > label { color: #a9b8dc !important; font-weight: 800 !important; letter-spacing: .1em !important; text-transform: uppercase !important; font-size: 10px !important; }

/* history, bottom link, points value */
:is(#financeModal):not(#zz) .fm-history {
  border-radius: 18px !important;
  background: linear-gradient(180deg, rgba(255, 255, 255, .06) 0%, rgba(255, 255, 255, 0) 44%), linear-gradient(180deg, #222b4d 0%, #1a2243 100%) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12), inset 0 0 0 1px rgba(150, 172, 235, .18) !important;
}
:is(#financeModal):not(#zz) .fm-section-title h3 { color: #fff !important; font-size: 13px !important; font-weight: 800 !important; }
:is(#financeModal):not(#zz) .fm-section-title > span { color: #8fa1cb !important; }
:is(#financeModal):not(#zz) .fm-ledger-row { border-bottom: 1px solid rgba(150, 172, 235, .12) !important; }
:is(#financeModal):not(#zz) .fm-bottom-link {
  border-radius: 16px !important;
  background: linear-gradient(180deg, rgba(255, 255, 255, .09) 0%, rgba(255, 255, 255, 0) 46%), linear-gradient(180deg, #34406e 0%, #252e54 100%) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .18), inset 0 0 0 1px rgba(150, 172, 235, .22) !important;
}
:is(#financeModal):not(#zz) .fm-bottom-link > span:first-child {
  width: 34px !important;
  height: 34px !important;
  border-radius: 11px !important;
  color: #3a2600 !important;
  background: linear-gradient(180deg, rgba(255, 255, 255, .5) 0%, rgba(255, 255, 255, 0) 52%), linear-gradient(180deg, #ffe58a 0%, #f7bd16 56%, #dc9505 100%) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .8), inset 0 0 0 1px rgba(140, 85, 0, .3) !important;
}
:is(#financeModal):not(#zz) .fm-bottom-link b { font-size: 12.5px !important; font-weight: 800 !important; }
:is(#financeModal):not(#zz) .fm-bottom-link small { color: #a9b8dc !important; }
:is(#financeModal):not(#zz) .fm-bottom-link i { color: #ffd95c !important; }
:is(#financeModal):not(#zz) .fm-points-value {
  border-radius: 16px !important;
  background: linear-gradient(180deg, rgba(247, 189, 22, .2) 0%, rgba(247, 189, 22, .08) 100%) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12), inset 0 0 0 1px rgba(247, 189, 22, .38) !important;
}

/* progress */
:is(#financeModal):not(#zz) .fm-progress-track {
  height: 11px !important;
  background: #0b1122 !important;
  box-shadow: inset 0 0 0 1px rgba(150, 172, 235, .22) !important;
}
:is(#financeModal):not(#zz) .fm-progress-track span {
  background: linear-gradient(180deg, rgba(255, 255, 255, .55) 0%, rgba(255, 255, 255, 0) 55%), linear-gradient(90deg, #ffd96f, #f7a40c) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .5) !important;
}

/* tier cards: each tier has its own colour band */
:is(#financeModal):not(#zz) .fm-level { --tc: #8fa1cb; }
:is(#financeModal):not(#zz) .fm-level.bronze { --tc: #d68a45; }
:is(#financeModal):not(#zz) .fm-level.silver { --tc: #bcc7de; }
:is(#financeModal):not(#zz) .fm-level.gold { --tc: #f7bd16; }
:is(#financeModal):not(#zz) .fm-level.platinum { --tc: #5fd8ff; }
:is(#financeModal):not(#zz) .fm-level {
  padding-top: 13px !important;
  border-radius: 14px !important;
  background:
    linear-gradient(var(--tc), var(--tc)) top / 100% 4px no-repeat,
    linear-gradient(180deg, rgba(255, 255, 255, .07) 0%, rgba(255, 255, 255, 0) 44%),
    linear-gradient(180deg, #2c3761 0%, #212a4a 100%) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .15), inset 0 0 0 1px rgba(150, 172, 235, .2) !important;
}
:is(#financeModal):not(#zz) .fm-level > b { color: #fff !important; font-weight: 800 !important; }
:is(#financeModal):not(#zz) .fm-level > small { color: #a9b8dc !important; }
:is(#financeModal):not(#zz) .fm-level > em { color: var(--tc) !important; font-weight: 700 !important; }
:is(#financeModal):not(#zz) .fm-level.active {
  background:
    linear-gradient(var(--tc), var(--tc)) top / 100% 4px no-repeat,
    linear-gradient(180deg, rgba(255, 255, 255, .1) 0%, rgba(255, 255, 255, 0) 44%),
    linear-gradient(180deg, #3b4a86 0%, #2a3566 100%) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .22), inset 0 0 0 2px var(--tc) !important;
}
:is(#financeModal):not(#zz) .fm-level.active > b { color: #ffd95c !important; }

/* ═════════════════ 4 · PROFILE: GOOGLE / FACEBOOK / PHONE OTP LINKS ═════════════════ */
#profileModal:not(#zz) .profile-account-links {
  margin: 12px 0 10px !important;
  padding: 0 !important;
  background: none !important;
  box-shadow: none !important;
}
#profileModal:not(#zz) .profile-account-links::before {
  content: "LOGIN METHODS";
  display: block;
  margin: 0 3px 8px;
  color: #9fb0d8;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .18em;
}
#profileModal:not(#zz) .pal-provider-grid { gap: 8px !important; }
#profileModal:not(#zz) .pal-provider {
  flex-direction: column !important;
  align-items: center !important;
  gap: 7px !important;
  padding: 12px 6px 9px !important;
  border-radius: 16px !important;
  text-align: center !important;
  background: linear-gradient(180deg, rgba(255, 255, 255, .07) 0%, rgba(255, 255, 255, 0) 44%), linear-gradient(180deg, #2c3761 0%, #212a4a 100%) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .15), inset 0 0 0 1px rgba(150, 172, 235, .2) !important;
}
#profileModal:not(#zz) .pal-provider-mark {
  width: 38px !important;
  height: 38px !important;
  flex: 0 0 38px !important;
  border-radius: 13px !important;
  font-size: 19px !important;
  font-weight: 800 !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .55), inset 0 0 0 1px rgba(10, 20, 60, .22) !important;
}
#profileModal:not(#zz) .pal-google { color: #4285f4 !important; background: linear-gradient(180deg, #ffffff 0%, #e3e9f6 100%) !important; }
#profileModal:not(#zz) .pal-facebook { color: #fff !important; background: linear-gradient(180deg, #5aa0ff 0%, #2f78f0 56%, #1d55c4 100%) !important; }
#profileModal:not(#zz) .pal-phone { color: #fff !important; background: linear-gradient(180deg, #58e49a 0%, #1fb361 56%, #118044 100%) !important; }
#profileModal:not(#zz) .pal-provider > span:nth-child(2) { flex: 0 0 auto !important; width: 100% !important; justify-items: center !important; gap: 2px !important; }
#profileModal:not(#zz) .pal-provider b { color: #fff !important; font-size: 12px !important; font-weight: 800 !important; }
#profileModal:not(#zz) .pal-provider small { color: #9fb0d8 !important; font-size: 9.5px !important; font-weight: 600 !important; }
#profileModal:not(#zz) .pal-provider button {
  width: 100% !important;
  min-width: 0 !important;
  padding: 7px 4px !important;
  border: 0 !important;
  border-radius: 10px !important;
  color: #3a2600 !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  background: linear-gradient(180deg, rgba(255, 255, 255, .5) 0%, rgba(255, 255, 255, 0) 52%), linear-gradient(180deg, #ffe58a 0%, #f7bd16 56%, #dc9505 100%) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .8), inset 0 0 0 1px rgba(140, 85, 0, .3) !important;
}
#profileModal:not(#zz) .pal-provider button:disabled,
#profileModal:not(#zz) .pal-provider button.is-linked {
  color: #fff !important;
  background: linear-gradient(180deg, rgba(255, 255, 255, .34) 0%, rgba(255, 255, 255, 0) 52%), linear-gradient(180deg, #58e49a 0%, #1fb361 56%, #118044 100%) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .55), inset 0 0 0 1px rgba(0, 70, 30, .4) !important;
}