/* POXY Sky — top-up modal reskin (loads after poxy-topup-modal.css) */

body.poxy-sky-app-active #topUpModal.tum-backdrop {
  background: rgba(0, 0, 0, 0.55) !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
  padding: 20px !important;
  z-index: 12000 !important;
}

body.poxy-sky-app-active #topUpModal .tum-panel {
  display: flex !important;
  flex-direction: column !important;
  grid-template-columns: 1fr !important;
  max-width: 440px !important;
  width: 100% !important;
  max-height: 88vh !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  background: var(--bg-2) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--r-lg, 20px) !important;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.28) !important;
  font-family: var(--px-font, var(--font)) !important;
  color: var(--text) !important;
}

body.poxy-sky-app-active #topUpModal .tum-left {
  display: none !important;
}

body.poxy-sky-app-active #topUpModal .px-sky-topup-head {
  margin-bottom: 16px;
}

body.poxy-sky-app-active #topUpModal .px-sky-topup-head h2 {
  font-family: var(--px-font, var(--font)) !important;
  font-size: 22px !important;
  font-weight: 700 !important;
  letter-spacing: -0.02em !important;
  color: var(--text-strong) !important;
  margin: 0 0 6px !important;
  text-transform: none !important;
}

body.poxy-sky-app-active #topUpModal .px-sky-topup-bal {
  font-size: 14px !important;
  color: var(--text-dim) !important;
  margin: 0 !important;
}

body.poxy-sky-app-active #topUpModal .px-sky-topup-bal strong {
  color: var(--text-strong) !important;
  font-weight: 700 !important;
}

body.poxy-sky-app-active #topUpModal .px-sky-topup-tabs {
  display: flex !important;
  gap: 8px !important;
  margin: 0 0 18px !important;
}

body.poxy-sky-app-active #topUpModal .px-sky-topup-tab {
  flex: 1 !important;
  font: 600 14px var(--px-font, var(--font)) !important;
  padding: 10px !important;
  border-radius: 11px !important;
  border: 1px solid var(--border) !important;
  background: var(--glass) !important;
  color: var(--text-dim) !important;
  cursor: pointer !important;
}

body.poxy-sky-app-active #topUpModal .px-sky-topup-tab.on {
  background: var(--btn-bg) !important;
  color: #fff !important;
  border-color: var(--btn-bg) !important;
}

body.poxy-sky-app-active #topUpModal .px-sky-gift-field {
  margin-bottom: 14px !important;
}

body.poxy-sky-app-active #topUpModal .px-sky-gift-field label {
  display: block !important;
  font-size: 12.5px !important;
  font-weight: 600 !important;
  color: var(--text-dim) !important;
  margin-bottom: 6px !important;
}

body.poxy-sky-app-active #topUpModal .px-sky-gift-input {
  width: 100% !important;
  font: 500 15px var(--px-font, var(--font)) !important;
  color: var(--text) !important;
  background: var(--card) !important;
  border: 1px solid var(--border) !important;
  border-radius: 11px !important;
  padding: 12px 14px !important;
  outline: none !important;
  box-sizing: border-box !important;
}

body.poxy-sky-app-active #topUpModal .px-sky-gift-input:focus {
  border-color: var(--sky-500) !important;
}

body.poxy-sky-app-active #topUpModal .px-sky-gift-amts {
  display: flex !important;
  gap: 8px !important;
  flex-wrap: wrap !important;
  margin-top: 8px !important;
}

body.poxy-sky-app-active #topUpModal .px-sky-gift-amt {
  font: 700 13px var(--px-font, var(--font)) !important;
  padding: 8px 14px !important;
  border-radius: 9px !important;
  border: 1px solid var(--border) !important;
  background: var(--glass) !important;
  color: var(--text-strong) !important;
  cursor: pointer !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
}

body.poxy-sky-app-active #topUpModal .px-sky-gift-amt:hover,
body.poxy-sky-app-active #topUpModal .px-sky-gift-amt.sel {
  border-color: var(--sky-500) !important;
  background: color-mix(in srgb, var(--sky-500) 12%, transparent) !important;
}

body.poxy-sky-app-active #topUpModal .px-sky-gift-send {
  width: 100% !important;
  margin-top: 8px !important;
  padding: 12px 16px !important;
  border: none !important;
  border-radius: 12px !important;
  background: var(--btn-bg) !important;
  color: #fff !important;
  font: 600 14px var(--px-font, var(--font)) !important;
  cursor: pointer !important;
}

body.poxy-sky-app-active #topUpModal .px-sky-gift-send:hover {
  filter: brightness(1.06);
}

body.poxy-sky-app-active #topUpModal .px-sky-gift-note {
  margin: 14px 0 0 !important;
  font-size: 12.5px !important;
  color: var(--text-dim) !important;
  line-height: 1.45 !important;
  text-align: center !important;
}

body.poxy-sky-app-active #topUpModal .coin-sm {
  width: 15px !important;
  height: 15px !important;
  display: inline-block !important;
  vertical-align: -2px !important;
}

body.poxy-sky-app-active #topUpModal .tum-glow {
  display: none !important;
}

body.poxy-sky-app-active #topUpModal .tum-close {
  top: 14px !important;
  right: 14px !important;
  border: 1px solid var(--border) !important;
  background: var(--card) !important;
  color: var(--text-dim) !important;
  border-radius: 10px !important;
}

body.poxy-sky-app-active #topUpModal .tum-close:hover {
  color: var(--text) !important;
  background: var(--glass-strong) !important;
}

body.poxy-sky-app-active #topUpModal .tum-left {
  border-right: none !important;
  border-bottom: 1px solid var(--border) !important;
  background: transparent !important;
  padding: 22px 22px 16px !important;
}

body.poxy-sky-app-active #topUpModal .tum-right {
  padding: 16px 22px 22px !important;
  background: transparent !important;
}

body.poxy-sky-app-active #topUpModal .tum-eyebrow {
  font-family: var(--px-font, var(--font)) !important;
  font-size: 11px !important;
  letter-spacing: 0.06em !important;
  color: var(--text-faint) !important;
  text-transform: uppercase !important;
}

body.poxy-sky-app-active #topUpModal .tum-title {
  font-family: var(--px-font, var(--font)) !important;
  font-size: 22px !important;
  font-weight: 700 !important;
  line-height: 1.15 !important;
  color: var(--text-strong) !important;
  letter-spacing: -0.02em !important;
  margin: 0 0 12px !important;
}

body.poxy-sky-app-active #topUpModal .tum-status-card,
body.poxy-sky-app-active #topUpModal .tum-ref-card {
  background: var(--card) !important;
  border: 1px solid var(--border) !important;
  border-radius: 14px !important;
  box-shadow: var(--shadow) !important;
}

body.poxy-sky-app-active #topUpModal .tum-status-label,
body.poxy-sky-app-active #topUpModal .tum-field-label,
body.poxy-sky-app-active #topUpModal .tum-section-label {
  font-family: var(--px-font, var(--font)) !important;
  color: var(--text-faint) !important;
  letter-spacing: 0.04em !important;
}

body.poxy-sky-app-active #topUpModal .tum-status-val,
body.poxy-sky-app-active #topUpModal .tum-ref-code {
  color: var(--text-strong) !important;
  font-family: var(--px-mono, ui-monospace, monospace) !important;
}

body.poxy-sky-app-active #topUpModal .tum-val-dim {
  color: var(--text-dim) !important;
}

body.poxy-sky-app-active #topUpModal .tum-val-warn {
  color: #e0a23c !important;
}

body.poxy-sky-app-active #topUpModal .tum-dot {
  background: #3dbe8b !important;
  box-shadow: none !important;
}

body.poxy-sky-app-active #topUpModal .tum-note,
body.poxy-sky-app-active #topUpModal .tum-ref-hint,
body.poxy-sky-app-active #topUpModal .tum-upsell,
body.poxy-sky-app-active #topUpModal .tum-disclaimer {
  color: var(--text-dim) !important;
  font-size: 13px !important;
  line-height: 1.5 !important;
}

body.poxy-sky-app-active #topUpModal .tum-ref-card {
  border-color: color-mix(in srgb, var(--sky-500) 35%, var(--border)) !important;
}

body.poxy-sky-app-active #topUpModal .tum-ref-eyebrow {
  color: var(--sky-700) !important;
  font-family: var(--px-font, var(--font)) !important;
}

body.poxy-sky-app-active #topUpModal .tum-ref-copy {
  background: var(--glass) !important;
  border: 1px solid var(--border) !important;
  color: var(--text) !important;
  border-radius: 10px !important;
}

body.poxy-sky-app-active #topUpModal .tum-path-a {
  background: color-mix(in srgb, var(--sky-500) 12%, var(--card)) !important;
  border: 1px solid color-mix(in srgb, var(--sky-500) 35%, var(--border)) !important;
  color: var(--text-strong) !important;
  border-radius: 12px !important;
  font-weight: 600 !important;
}

body.poxy-sky-app-active #topUpModal .tum-path-a .material-symbols-outlined {
  color: var(--sky-500) !important;
}

body.poxy-sky-app-active #topUpModal .tum-px-grid {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 10px !important;
}

body.poxy-sky-app-active #topUpModal .tum-px-pack,
body.poxy-sky-app-active #topUpModal .tum-px-pkg {
  background: var(--card) !important;
  border: 1px solid var(--border) !important;
  border-radius: 14px !important;
  color: var(--text) !important;
  box-shadow: var(--shadow) !important;
  padding: 14px 12px !important;
  text-align: left !important;
  cursor: pointer !important;
  font-family: var(--px-font, var(--font)) !important;
}

body.poxy-sky-app-active #topUpModal .tum-px-pack:hover,
body.poxy-sky-app-active #topUpModal .tum-px-pack.is-selected,
body.poxy-sky-app-active #topUpModal .tum-px-pack.selected,
body.poxy-sky-app-active #topUpModal .tum-px-pkg:hover,
body.poxy-sky-app-active #topUpModal .tum-px-pkg.is-selected,
body.poxy-sky-app-active #topUpModal .tum-px-pkg.selected {
  border-color: var(--sky-500) !important;
  box-shadow: 0 8px 24px color-mix(in srgb, var(--sky-500) 18%, transparent) !important;
}

body.poxy-sky-app-active #topUpModal .tum-px-pack-badge,
body.poxy-sky-app-active #topUpModal .tum-px-pkg-badge {
  background: var(--sky-500) !important;
  color: #fff !important;
  border-radius: 6px !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  padding: 3px 7px !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase !important;
}

body.poxy-sky-app-active #topUpModal .tum-px-pack-px,
body.poxy-sky-app-active #topUpModal .tum-px-pkg-px {
  font-size: 18px !important;
  font-weight: 700 !important;
  color: var(--text-strong) !important;
  font-family: var(--px-font, var(--font)) !important;
  margin-top: 8px !important;
}

body.poxy-sky-app-active #topUpModal .tum-px-pack-gbp,
body.poxy-sky-app-active #topUpModal .tum-px-pkg-gbp {
  font-size: 13px !important;
  color: var(--text-dim) !important;
  margin-top: 4px !important;
}

body.poxy-sky-app-active #topUpModal .tum-px-pkg-tag {
  font-size: 11px !important;
  color: var(--sky-700) !important;
}

body.poxy-sky-app-active #topUpModal .tum-wallet-row .btn-wallet-pay {
  border-radius: 12px !important;
}

body.poxy-sky-app-active #topUpModal .tum-disclaimer {
  color: var(--text-dim) !important;
  font-size: 12px !important;
}

body.poxy-sky-app-active #topUpModal .tum-input {
  background: var(--card) !important;
  border: 1px solid var(--border) !important;
  color: var(--text) !important;
  border-radius: 11px !important;
  font-family: var(--px-font, var(--font)) !important;
}

body.poxy-sky-app-active #topUpModal .tum-input:focus {
  border-color: var(--sky-500) !important;
  outline: none !important;
}

body.poxy-sky-app-active #topUpModal .tum-upsell {
  background: color-mix(in srgb, #e0a23c 10%, var(--card)) !important;
  border: 1px dashed color-mix(in srgb, #e0a23c 40%, var(--border)) !important;
  border-radius: 10px !important;
  padding: 10px 12px !important;
}

body.poxy-sky-app-active #topUpModal .tum-divider-line {
  color: var(--text-faint) !important;
}

body.poxy-sky-app-active #topUpModal .tum-divider-line::before,
body.poxy-sky-app-active #topUpModal .tum-divider-line::after {
  background: var(--border) !important;
}

body.poxy-sky-app-active #topUpModal .tum-cta {
  background: var(--btn-bg) !important;
  color: #fff !important;
  border: none !important;
  border-radius: 12px !important;
  font-family: var(--px-font, var(--font)) !important;
  font-weight: 600 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  box-shadow: none !important;
}

body.poxy-sky-app-active #topUpModal .tum-cta:hover {
  filter: brightness(1.06);
}

body.poxy-sky-app-active #topUpModal .tum-status-divider {
  background: var(--border) !important;
}