.sidebar:has([data-sp-payments-nav-slot]){overflow-y:auto;overscroll-behavior:contain}
.sp-payments-nav-slot{
  width:100%;
  min-width:0;
  margin-top:auto;
  padding-top:12px;
  position:relative;
  bottom:auto;
  z-index:12;
  flex:0 0 auto;
  align-self:stretch;
  background:transparent;
  backdrop-filter:none;
}
.sidebar>.sp-payments-nav-slot{
  background:transparent;
}
.sp-payments-nav-card,
.sp-payments-dialog,
.sp-payments-dialog *{box-sizing:border-box}
.sp-payments-dialog[hidden],
.sp-payments-dialog [hidden]{display:none!important}

/* The public site intentionally uppercases its navigation. Payments keeps a
   calmer product hierarchy and opts out inside this isolated surface. */
body.sp-public-uppercase .sp-payments-nav-card,
body.sp-public-uppercase .sp-payments-nav-card *,
body.sp-public-uppercase .sp-payments-dialog,
body.sp-public-uppercase .sp-payments-dialog *{text-transform:none}

.sp-payments-nav-card{
  --sp-payments-accent:#244bff;
  --sp-payments-accent-2:#7c3aed;
  margin:0;
  width:100%;
  min-height:92px;
  border:1px solid rgba(255,255,255,.18);
  position:relative;
  isolation:isolate;
  border-radius:22px;
  padding:16px;
  color:#fff;
  background:
    radial-gradient(circle at 92% 0%,rgba(98,225,255,.42),transparent 40%),
    radial-gradient(circle at 8% 120%,rgba(223,83,255,.3),transparent 40%),
    linear-gradient(145deg,#172b72 0%,var(--sp-payments-accent) 48%,var(--sp-payments-accent-2) 100%);
  box-shadow:
    0 20px 44px rgba(0,16,50,.32),
    inset 0 1px 0 rgba(255,255,255,.19);
  text-align:left;
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:5px 10px;
  overflow:hidden;
  cursor:pointer;
  transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease;
}
.sp-payments-nav-card[hidden]{display:none!important}
.sp-payments-nav-card small{
  display:block;
  grid-column:1/-1;
  color:rgba(255,255,255,.74);
  font-size:.68rem;
  font-weight:850;
  letter-spacing:.08em;
  text-transform:uppercase!important;
}
.sp-payments-nav-card strong{
  min-width:0;
  overflow:hidden;
  color:#fff;
  font-size:1.4rem;
  line-height:1.05;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.sp-payments-nav-card span{
  align-self:center;
  display:inline-flex;
  align-items:center;
  gap:5px;
  border:1px solid rgba(255,255,255,.16);
  border-radius:999px;
  padding:4px 8px;
  background:rgba(255,255,255,.11);
  color:rgba(255,255,255,.86);
  font-size:.61rem;
  font-weight:850;
  letter-spacing:.04em;
  white-space:nowrap;
}
.sp-payments-nav-card span::before{
  content:"";
  width:6px;
  height:6px;
  flex:0 0 6px;
  border-radius:50%;
  background:#ffd666;
  box-shadow:0 0 0 4px rgba(255,214,102,.12);
}
.sp-payments-nav-card[data-state="ready"] span::before{
  background:#67f0bd;
  box-shadow:0 0 0 4px rgba(103,240,189,.14);
}
.sp-payments-nav-card[data-state="error"] span::before{
  background:#ff8fa3;
  box-shadow:0 0 0 4px rgba(255,143,163,.14);
}
.sp-payments-nav-card[data-state="offline"] span::before{
  background:#c5cede;
  box-shadow:0 0 0 4px rgba(197,206,222,.12);
}
.sp-payments-nav-card[data-state="loading"] span::before{
  animation:spPaymentsNavPulse 1.25s ease-in-out infinite;
}
.sp-payments-nav-card[data-state="error"]{
  border-color:rgba(255,143,163,.38);
}
.sp-payments-nav-card[data-state="error"] strong,
.sp-payments-nav-card[data-state="offline"] strong,
.sp-payments-nav-card[data-state="loading"] strong{
  font-size:1rem;
  line-height:1.2;
}
.sp-payments-nav-card:is(:hover,:focus-visible){
  transform:translateY(-2px);
  box-shadow:
    0 25px 52px rgba(0,16,50,.38),
    0 0 0 3px rgba(95,224,255,.12),
    inset 0 1px 0 rgba(255,255,255,.22);
}
.sp-payments-nav-card:focus-visible{
  outline:3px solid rgba(255,255,255,.92);
  outline-offset:3px;
}
@keyframes spPaymentsNavPulse{
  0%,100%{opacity:.5;transform:scale(.82)}
  50%{opacity:1;transform:scale(1.08)}
}

.sp-payments-dialog{
  --sp-payments-accent:#244bff;
  --sp-payments-accent-2:#7c3aed;
  --sp-payments-surface:#f5f7fb;
  --sp-payments-ink:#10213a;
  --sp-payments-radius:24px;
  width:min(1100px,calc(100vw - 28px));
  max-width:none;
  max-inline-size:none;
  max-height:calc(100dvh - 28px);
  margin:auto;
  overflow:auto;
  overscroll-behavior:contain;
  border:1px solid rgba(188,204,231,.75);
  border-radius:max(var(--sp-payments-radius),28px);
  padding:0;
  color:var(--sp-payments-ink);
  background:var(--sp-payments-surface);
  box-shadow:
    0 48px 140px rgba(1,11,34,.52),
    0 0 0 1px rgba(255,255,255,.18);
}
.sp-payments-dialog::backdrop{
  background:
    radial-gradient(circle at 12% 8%,rgba(68,220,255,.18),transparent 32%),
    radial-gradient(circle at 88% 88%,rgba(147,67,255,.14),transparent 34%),
    rgba(3,10,29,.72);
  backdrop-filter:blur(15px) saturate(1.08);
}
.sp-payments-shell{
  min-height:100%;
  background:
    radial-gradient(circle at 105% -5%,color-mix(in srgb,var(--sp-payments-accent) 20%,transparent),transparent 31%),
    radial-gradient(circle at -8% 55%,color-mix(in srgb,var(--sp-payments-accent-2) 8%,transparent),transparent 34%),
    linear-gradient(180deg,color-mix(in srgb,var(--sp-payments-surface) 82%,#fff) 0%,var(--sp-payments-surface) 52%,color-mix(in srgb,var(--sp-payments-surface) 84%,#fff) 100%);
}
.sp-payments-head{
  position:sticky;
  top:0;
  z-index:12;
  min-height:94px;
  display:grid;
  grid-template-columns:auto auto minmax(0,1fr) auto auto;
  grid-template-areas:"back mark copy pill close";
  align-items:center;
  gap:12px;
  padding:17px 24px;
  overflow:hidden;
  border-bottom:1px solid rgba(255,255,255,.12);
  background:
    radial-gradient(circle at 5% 0%,rgba(83,229,255,.22),transparent 23rem),
    radial-gradient(circle at 88% -90%,rgba(185,91,255,.38),transparent 29rem),
    linear-gradient(112deg,#091733 0%,#172963 48%,#3d237d 100%);
  backdrop-filter:blur(18px) saturate(1.2);
  box-shadow:0 16px 38px rgba(8,17,50,.16);
}
.sp-payments-back{grid-area:back}
.sp-payments-head-mark{grid-area:mark}
.sp-payments-head-copy{grid-area:copy}
.sp-payments-test-pill{grid-area:pill}
.sp-payments-close{grid-area:close}
.sp-payments-head-mark{
  width:46px;
  height:46px;
  border-radius:16px;
  display:grid;
  place-items:center;
  border:1px solid rgba(255,255,255,.28);
  background:
    radial-gradient(circle at 25% 12%,rgba(255,255,255,.42),transparent 31%),
    linear-gradient(145deg,var(--sp-payments-accent),var(--sp-payments-accent-2));
  box-shadow:
    0 13px 28px rgba(2,8,29,.34),
    0 0 24px rgba(77,220,255,.16),
    inset 0 1px 0 rgba(255,255,255,.25);
}
.sp-payments-head-mark span{
  position:relative;
  width:23px;
  height:16px;
  border:2px solid #fff;
  border-radius:6px;
}
.sp-payments-head-mark span::after{
  content:"";
  position:absolute;
  right:-3px;
  top:3px;
  width:7px;
  height:6px;
  border-radius:4px;
  background:#fff;
}
.sp-payments-head-copy{min-width:0}
.sp-payments-head-copy small{
  display:block;
  color:#8ff3f0;
  font-size:.67rem;
  font-weight:850;
  letter-spacing:.09em;
  text-transform:uppercase!important;
}
.sp-payments-head h2{
  margin:2px 0 0;
  color:#fff;
  font-size:1.65rem;
  line-height:1;
  letter-spacing:-.035em;
}
.sp-payments-test-pill{
  justify-self:end;
  width:max-content;
  max-width:100%;
  border:1px solid rgba(255,255,255,.18);
  border-radius:999px;
  padding:7px 10px;
  color:rgba(241,245,255,.88);
  background:rgba(255,255,255,.09);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08);
  font-size:.68rem;
  font-weight:800;
  white-space:nowrap;
}
.sp-payments-close,
.sp-payments-back{
  width:44px;
  height:44px;
  border:1px solid rgba(255,255,255,.2);
  border-radius:15px;
  display:grid;
  place-items:center;
  color:#fff;
  background:rgba(255,255,255,.1);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.1),
    0 8px 20px rgba(2,8,29,.15);
  font-size:1.25rem;
  font-weight:850;
}
.sp-payments-back{font-size:1.1rem}
.sp-payments-status{
  position:relative;
  z-index:8;
  min-height:0;
  margin:12px 24px 0;
  border:1px solid transparent;
  border-radius:14px;
  padding:9px 12px;
  color:#49617f;
  background:#edf4ff;
  font-size:.82rem;
  font-weight:750;
}
.sp-payments-status:empty{display:none}
.sp-payments-status[data-state="pending"]{
  border-color:#f4d494;
  color:#76510a;
  background:#fff8e8;
}
.sp-payments-status[data-state="error"]{
  border-color:#f4cbc7;
  color:#a4281e;
  background:#fff3f2;
}
.sp-payments-status[data-state="ok"]{
  border-color:#bce8ca;
  color:#08743a;
  background:
    linear-gradient(90deg,rgba(57,219,155,.13),transparent 75%),
    #eefaf2;
}
.sp-payments-degraded{
  margin:14px 22px 0;
  border:1px solid #f2c7c3;
  border-radius:18px;
  padding:14px;
  display:grid;
  grid-template-columns:auto minmax(0,1fr) auto;
  align-items:center;
  gap:12px;
  color:#85241d;
  background:linear-gradient(135deg,#fff8f7,#fff);
  box-shadow:0 12px 28px rgba(129,37,30,.07);
}
.sp-payments-degraded-icon{
  width:40px;
  height:40px;
  border-radius:13px;
  display:grid;
  place-items:center;
  color:#b22c22;
  background:#ffe9e7;
  font-size:1.1rem;
  font-weight:900;
}
.sp-payments-degraded h3{margin:0;font-size:.96rem}
.sp-payments-degraded p{
  margin:3px 0 0;
  color:#76524f;
  font-size:.78rem;
  font-weight:650;
}
.sp-payments-degraded button{
  min-height:40px;
  border:0;
  border-radius:12px;
  padding:0 14px;
  color:#fff;
  background:#a82b22;
  font-weight:850;
}
.sp-payments-view{
  display:grid;
  gap:18px;
  padding:20px 24px 28px;
  animation:sp-payments-rise .24s ease both;
}
.sp-payments-restricted{
  border:1px solid color-mix(in srgb,#f59e0b 42%,transparent);
  border-radius:var(--sp-payments-radius);
  padding:13px 15px;
  display:grid;
  grid-template-columns:auto minmax(0,1fr);
  align-items:center;
  gap:11px;
  color:#713f12;
  background:color-mix(in srgb,#fef3c7 78%,#fff);
}
.sp-payments-restricted>span{
  width:36px;
  height:36px;
  border-radius:50%;
  display:grid;
  place-items:center;
  color:#fff;
  background:#d97706;
  font-weight:950;
}
.sp-payments-restricted div{display:grid;gap:3px}
.sp-payments-restricted b{font-size:.84rem}
.sp-payments-restricted small{font-size:.7rem;font-weight:680}
.sp-payments-restricted strong{font-weight:900}
@keyframes sp-payments-rise{
  from{opacity:.25;transform:translateY(5px)}
  to{opacity:1;transform:none}
}

.sp-payments-hero{
  position:relative;
  min-height:282px;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.12);
  border-radius:var(--sp-payments-radius);
  padding:28px;
  display:grid;
  align-content:start;
  color:#fff;
  background:
    radial-gradient(circle at 92% 0%,rgba(91,226,255,.32),transparent 41%),
    radial-gradient(circle at 8% 120%,rgba(225,91,255,.25),transparent 42%),
    linear-gradient(135deg,var(--sp-payments-accent),var(--sp-payments-accent-2) 76%);
  box-shadow:
    0 28px 62px color-mix(in srgb,var(--sp-payments-accent) 22%,transparent),
    inset 0 1px 0 rgba(255,255,255,.2);
}
.sp-payments-dialog[data-hero-style="midnight"] .sp-payments-hero,
.sp-payments-dialog[data-hero-style="midnight"] .sp-payments-packages-intro{
  background:
    radial-gradient(circle at 90% 0,color-mix(in srgb,var(--sp-payments-accent) 42%,transparent),transparent 38%),
    linear-gradient(145deg,var(--sp-payments-accent-2),#020617 78%);
}
.sp-payments-dialog[data-hero-style="glass"] .sp-payments-hero,
.sp-payments-dialog[data-hero-style="glass"] .sp-payments-packages-intro{
  border-color:color-mix(in srgb,var(--sp-payments-accent) 24%,#fff);
  background:
    radial-gradient(circle at 88% 0,color-mix(in srgb,var(--sp-payments-accent-2) 42%,transparent),transparent 40%),
    linear-gradient(135deg,color-mix(in srgb,var(--sp-payments-accent) 78%,#fff),color-mix(in srgb,var(--sp-payments-accent-2) 78%,#fff));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.38),
    0 25px 55px color-mix(in srgb,var(--sp-payments-accent) 21%,transparent);
}
.sp-payments-hero-orb,
.sp-payments-hero-orb i{
  position:absolute;
  border-radius:50%;
  pointer-events:none;
}
.sp-payments-hero-orb{
  inset:0;
  overflow:hidden;
}
.sp-payments-hero-orb i:first-child{
  width:250px;
  height:250px;
  right:-75px;
  top:-125px;
  background:radial-gradient(circle,rgba(82,218,255,.5),rgba(82,218,255,0) 68%);
}
.sp-payments-hero-orb i:last-child{
  width:180px;
  height:180px;
  right:140px;
  bottom:-130px;
  border:1px solid rgba(255,255,255,.18);
}
.sp-payments-hero-top{
  position:relative;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}
.sp-payments-hero-top>span{
  color:rgba(255,255,255,.78);
  font-size:.76rem;
  font-weight:800;
  letter-spacing:.08em;
  text-transform:uppercase!important;
}
.sp-payments-hero-top button{
  width:40px;
  height:40px;
  border:1px solid rgba(255,255,255,.2);
  border-radius:13px;
  color:#fff;
  background:rgba(255,255,255,.13);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.16);
  font-size:1.05rem;
  font-weight:850;
}
.sp-payments-hero-value{
  position:relative;
  display:block;
  margin:16px 0 3px;
  font-size:clamp(3rem,7vw,4.8rem);
  line-height:.98;
  letter-spacing:-.065em;
  font-variant-numeric:tabular-nums;
}
.sp-payments-hero>small{
  position:relative;
  color:rgba(255,255,255,.66);
  font-size:.72rem;
  font-weight:650;
}
.sp-payments-packages-cta{
  position:relative;
  width:min(510px,100%);
  min-height:72px;
  margin-top:28px;
  border:1px solid rgba(255,255,255,.18);
  border-radius:19px;
  padding:12px 14px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  color:#09234e;
  background:
    radial-gradient(circle at 100% 0%,color-mix(in srgb,var(--sp-payments-accent) 12%,transparent),transparent 48%),
    linear-gradient(135deg,#fff,#edf4ff);
  box-shadow:
    0 15px 34px rgba(0,17,51,.24),
    inset 0 1px 0 rgba(255,255,255,.9);
  text-align:left;
}
.sp-payments-packages-cta span{display:grid;gap:3px}
.sp-payments-packages-cta b{font-size:.92rem}
.sp-payments-packages-cta small{color:#607696;font-size:.72rem;font-weight:700}
.sp-payments-packages-cta em{
  flex:0 0 auto;
  border-radius:12px;
  padding:10px 12px;
  color:#fff;
  background:linear-gradient(135deg,var(--sp-payments-accent),var(--sp-payments-accent-2));
  box-shadow:0 9px 20px color-mix(in srgb,var(--sp-payments-accent) 28%,transparent);
  font-size:.72rem;
  font-style:normal;
  font-weight:850;
}

.sp-payments-card{
  position:relative;
  overflow:hidden;
  border:1px solid #d9e4f2;
  border-radius:var(--sp-payments-radius);
  padding:22px;
  background:
    radial-gradient(circle at 100% 0%,color-mix(in srgb,var(--sp-payments-accent) 5%,transparent),transparent 38%),
    rgba(255,255,255,.96);
  box-shadow:
    0 17px 42px rgba(7,35,76,.085),
    inset 0 1px 0 rgba(255,255,255,.88);
}
.sp-payments-card::before{
  content:"";
  position:absolute;
  inset:0 auto auto 0;
  width:100%;
  height:3px;
  background:linear-gradient(90deg,var(--sp-payments-accent),var(--sp-payments-accent-2),transparent 86%);
  opacity:.78;
}
.sp-payments-section-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:16px;
  margin-bottom:16px;
}
.sp-payments-section-head>div>small,
.sp-payments-packages-intro>small{
  display:block;
  color:var(--sp-payments-accent);
  font-size:.66rem;
  font-weight:900;
  letter-spacing:.1em;
  text-transform:uppercase!important;
}
.sp-payments-section-head h3,
.sp-payments-packages-intro h3{
  margin:3px 0 0;
  color:var(--sp-payments-ink);
  font-size:1.48rem;
  letter-spacing:-.035em;
}
.sp-payments-section-head p,
.sp-payments-packages-intro p{
  margin:4px 0 0;
  color:#62748d;
  font-size:.82rem;
  font-weight:650;
}
.sp-payments-secure{
  flex:0 0 auto;
  border:1px solid #cbe6d5;
  border-radius:999px;
  padding:8px 11px;
  color:#08743a;
  background:#eefaf2;
  font-size:.68rem;
  font-weight:800;
}
.sp-payments-secure::before{content:"✓ ";font-weight:950}
.sp-payments-amount-field{
  display:grid;
  gap:6px;
  color:#526985;
  font-size:.72rem;
  font-weight:850;
}
.sp-payments-amount-input{
  min-height:70px;
  border:1px solid #ccdaed;
  border-radius:19px;
  display:flex;
  align-items:center;
  gap:8px;
  padding:0 17px;
  background:linear-gradient(180deg,#fff,#f5f8fd);
  transition:border-color .16s ease,box-shadow .16s ease,background .16s ease;
}
.sp-payments-amount-input:focus-within{
  border-color:#6ca5f8;
  background:#fff;
  box-shadow:0 0 0 4px rgba(18,102,241,.09);
}
.sp-payments-amount-input b{
  color:var(--sp-payments-accent);
  font-size:1.25rem;
}
.sp-payments-amount-input input{
  min-width:0;
  width:100%;
  border:0;
  outline:0;
  color:#10213a;
  background:transparent;
  font-size:1.58rem;
  font-weight:850;
  font-variant-numeric:tabular-nums;
}
.sp-payments-presets{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:8px;
  margin:10px 0 14px;
}
.sp-payments-presets button{
  min-height:43px;
  border:1px solid #d6e2f2;
  border-radius:12px;
  color:#275a9e;
  background:linear-gradient(180deg,#fff,#f2f6fc);
  font-size:.76rem;
  font-weight:850;
  transition:transform .16s ease,border-color .16s ease,box-shadow .16s ease;
}
.sp-payments-presets button:not(:disabled):is(:hover,:focus-visible){
  transform:translateY(-1px);
  border-color:color-mix(in srgb,var(--sp-payments-accent) 38%,#d6e2f2);
  box-shadow:0 9px 18px color-mix(in srgb,var(--sp-payments-accent) 10%,transparent);
}
.sp-payments-presets button.is-selected{
  border-color:transparent;
  color:#fff;
  background:linear-gradient(135deg,var(--sp-payments-accent),var(--sp-payments-accent-2));
  box-shadow:0 10px 22px color-mix(in srgb,var(--sp-payments-accent) 24%,transparent);
}
.sp-payments-methods{
  display:grid;
  gap:10px;
}
.sp-payments-methods>button{
  min-width:0;
  min-height:72px;
  border:1px solid #d9e5f4;
  border-radius:18px;
  padding:11px 14px;
  display:flex;
  align-items:center;
  gap:11px;
  color:#122846;
  background:#fff;
  text-align:left;
  box-shadow:0 9px 20px rgba(15,49,94,.05);
  transition:transform .16s ease,border-color .16s ease,box-shadow .16s ease;
}
.sp-payments-methods>button:not(:disabled):is(:hover,:focus-visible){
  transform:translateY(-1px);
  border-color:color-mix(in srgb,var(--sp-payments-accent) 34%,#d9e5f4);
  box-shadow:0 14px 28px color-mix(in srgb,var(--sp-payments-accent) 11%,transparent);
}
.sp-payments-methods>button>span:not(.sp-payments-method-icon){
  min-width:0;
  display:grid;
  gap:3px;
}
.sp-payments-methods>button>em{
  margin-left:auto;
  border-radius:11px;
  padding:9px 11px;
  color:#fff;
  background:linear-gradient(135deg,var(--sp-payments-accent),var(--sp-payments-accent-2));
  box-shadow:0 8px 18px color-mix(in srgb,var(--sp-payments-accent) 24%,transparent);
  font-size:.72rem;
  font-style:normal;
  font-weight:900;
  white-space:nowrap;
}
.sp-payments-method-icon{
  grid-row:1/-1;
  width:37px;
  height:37px;
  border-radius:12px;
  display:grid;
  place-items:center;
  color:#fff;
  background:linear-gradient(145deg,#267bff,#0b3d91);
  font-size:.92rem;
  font-weight:900;
}
.sp-payments-method-icon svg{
  width:21px;
  height:21px;
  overflow:visible;
  fill:none;
  stroke:currentColor;
  stroke-width:1.8;
  stroke-linecap:round;
  stroke-linejoin:round;
}
.sp-payments-method-icon.sp-apple{color:#fff;background:#111}
.sp-payments-method-icon.sp-google{
  color:#1769e0;
  background:linear-gradient(135deg,#fff,#eef4ff);
  box-shadow:inset 0 0 0 1px #d6e2f2;
}
.sp-payments-methods b{min-width:0;font-size:.84rem}
.sp-payments-methods>button small{
  min-width:0;
  overflow:hidden;
  color:#718199;
  font-size:.65rem;
  font-weight:650;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.sp-payments-wallets{
  display:flex;
  align-items:center;
  gap:6px;
  flex-wrap:wrap;
  color:#5a6f8c;
}
.sp-payments-wallets>span{
  border:1px solid #d9e5f4;
  border-radius:999px;
  padding:6px 9px;
  color:#18385f;
  background:#f8fbff;
  font-size:.64rem;
  font-weight:850;
}
.sp-payments-wallets>small{
  flex:1 1 260px;
  font-size:.63rem;
  font-weight:650;
}
.sp-payments-presets button:disabled,
.sp-payments-methods button:disabled,
.sp-payments-product-buy:disabled,
.sp-payments-portal:disabled{
  cursor:not-allowed;
  opacity:.5;
  filter:saturate(.45);
}

.sp-payments-movements-head{align-items:center}
.sp-payments-filters{
  flex:0 0 auto;
  display:flex;
  gap:5px;
  border:1px solid #dce7f5;
  border-radius:14px;
  padding:4px;
  background:#f5f8fd;
}
.sp-payments-filters button{
  min-height:34px;
  border:0;
  border-radius:10px;
  padding:0 11px;
  color:#657894;
  background:transparent;
  font-size:.7rem;
  font-weight:850;
}
.sp-payments-filters button.is-active{
  color:#fff;
  background:var(--sp-payments-accent);
  box-shadow:0 6px 15px rgba(18,102,241,.22);
}
.sp-payments-records{
  display:grid;
  gap:8px;
}
.sp-payments-movement{
  display:grid;
  grid-template-columns:auto minmax(0,1fr) auto;
  align-items:center;
  gap:12px;
  min-height:70px;
  border:1px solid #e1e9f4;
  border-radius:17px;
  padding:12px 13px;
  background:linear-gradient(135deg,#fff,#f9fbfe);
  box-shadow:0 7px 18px rgba(21,49,89,.035);
  transition:transform .16s ease,border-color .16s ease,box-shadow .16s ease;
}
.sp-payments-movement:hover{
  transform:translateY(-1px);
  border-color:#cbd8e9;
  box-shadow:0 11px 24px rgba(21,49,89,.07);
}
.sp-payments-movement-icon{
  width:42px;
  height:42px;
  border-radius:14px;
  display:grid;
  place-items:center;
  color:#a83a31;
  border:1px solid rgba(168,58,49,.08);
  background:linear-gradient(145deg,#fff7f5,#ffe9e6);
  font-size:1rem;
  font-weight:950;
}
.sp-payments-movement[data-direction="incoming"] .sp-payments-movement-icon{
  color:#08743a;
  background:linear-gradient(145deg,#f2fcf6,#ddf5e7);
}
.sp-payments-movement[data-direction="neutral"] .sp-payments-movement-icon{
  color:#526b91;
  background:linear-gradient(145deg,#f6f9fd,#e8f0fa);
}
.sp-payments-movement-copy{
  min-width:0;
  display:grid;
  gap:3px;
}
.sp-payments-movement-copy b{
  min-width:0;
  overflow-wrap:anywhere;
  color:#152944;
  font-size:.83rem;
}
.sp-payments-movement-copy small{
  min-width:0;
  overflow-wrap:anywhere;
  color:#718198;
  font-size:.68rem;
  font-weight:650;
}
.sp-payments-record-end{
  flex:0 0 auto;
  display:grid;
  justify-items:end;
  gap:5px;
  text-align:right;
}
.sp-payments-record-end strong{
  color:#a83a31;
  font-size:.84rem;
  white-space:nowrap;
  font-variant-numeric:tabular-nums;
}
.sp-payments-movement[data-direction="incoming"] .sp-payments-record-end strong{
  color:#08743a;
}
.sp-payments-movement[data-direction="neutral"] .sp-payments-record-end strong{
  color:#526b91;
}
.sp-payments-asset{
  border-radius:999px;
  padding:4px 7px;
  color:#365778;
  background:#eef4fa;
  font-size:.58rem;
  font-weight:850;
  white-space:nowrap;
}
.sp-payments-state{
  border-radius:999px;
  padding:4px 7px;
  color:#526b91;
  background:#edf3fb;
  font-size:.61rem;
  font-weight:850;
}
.sp-payments-state[data-state="paid"],
.sp-payments-state[data-state="active"],
.sp-payments-state[data-state="trialing"]{
  color:#08743a;
  background:#e7f8ed;
}
.sp-payments-state[data-state="payment_failed"],
.sp-payments-state[data-state="disputed"],
.sp-payments-state[data-state="expired"]{
  color:#b42318;
  background:#fff0f0;
}
.sp-payments-state[data-state="completed"],
.sp-payments-state[data-state="checkout_created"],
.sp-payments-state[data-state="created"]{
  color:#76510a;
  background:#fff8e8;
}
.sp-payments-record-actions{
  grid-column:2/-1;
  display:flex;
  justify-content:flex-end;
  gap:6px;
}
.sp-payments-record-actions button{
  min-height:34px;
  border:1px solid #cbd9eb;
  border-radius:10px;
  padding:6px 9px;
  color:#174f9d;
  background:#fff;
  font:800 .69rem/1 system-ui,sans-serif;
}
.sp-payments-record-actions button:last-child{
  color:#a52a22;
  border-color:#efc9c6;
}
.sp-payments-empty{
  min-height:132px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:13px;
  padding:24px 14px;
  border:1px dashed #cbd7e7;
  border-radius:18px;
  color:#7889a0;
  background:
    radial-gradient(circle at 50% 0%,color-mix(in srgb,var(--sp-payments-accent) 7%,transparent),transparent 62%),
    #fafbfd;
  text-align:left;
}
.sp-payments-empty>span:first-child{
  width:42px;
  height:42px;
  flex:0 0 auto;
  border-radius:14px;
  display:grid;
  place-items:center;
  color:var(--sp-payments-accent);
  background:color-mix(in srgb,var(--sp-payments-accent) 9%,#fff);
  font-size:1.05rem;
  font-weight:950;
}
.sp-payments-empty>span:last-child{display:grid;gap:4px}
.sp-payments-empty b{
  color:#203552;
  font-size:.82rem;
  font-weight:900;
}
.sp-payments-empty small{
  max-width:360px;
  color:#7889a0;
  font-size:.7rem;
  font-weight:680;
  line-height:1.4;
}
.sp-payments-show-all{
  width:100%;
  min-height:46px;
  margin-top:8px;
  border:1px solid #d6e2f1;
  border-radius:13px;
  color:#174f9d;
  background:linear-gradient(180deg,#fff,#f4f7fc);
  font-size:.76rem;
  font-weight:850;
}

.sp-payments-packages-intro{
  border-radius:var(--sp-payments-radius);
  padding:26px;
  color:#fff;
  background:
    radial-gradient(circle at 92% 0,rgba(86,225,255,.42),transparent 36%),
    radial-gradient(circle at 8% 130%,rgba(224,83,255,.28),transparent 42%),
    linear-gradient(135deg,var(--sp-payments-accent),var(--sp-payments-accent-2));
  box-shadow:
    0 23px 50px rgba(11,63,142,.24),
    inset 0 1px 0 rgba(255,255,255,.18);
}
.sp-payments-packages-intro>small{color:rgba(255,255,255,.7)}
.sp-payments-packages-intro h3{color:#fff;font-size:1.8rem}
.sp-payments-packages-intro p{color:rgba(255,255,255,.74)}
.sp-payments-catalog{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
  gap:16px;
}
.sp-payments-product{
  --sp-package-from:#0f5eea;
  --sp-package-to:#071f49;
  --sp-package-ink:#fff;
  --sp-promotion-color:#ffb800;
  position:relative;
  min-width:0;
  overflow:hidden;
  border:1px solid color-mix(in srgb,var(--sp-package-ink) 24%,transparent);
  border-radius:var(--sp-payments-radius);
  min-height:330px;
  padding:22px;
  display:grid;
  align-content:start;
  gap:13px;
  color:var(--sp-package-ink);
  background:linear-gradient(145deg,var(--sp-package-from),var(--sp-package-to));
  box-shadow:
    0 18px 40px rgba(6,34,75,.12),
    inset 0 1px 0 rgba(255,255,255,.17);
  text-align:left;
  transition:transform .18s ease,box-shadow .18s ease;
}
.sp-payments-product:hover{
  transform:translateY(-3px);
  box-shadow:
    0 24px 52px rgba(6,34,75,.18),
    inset 0 1px 0 rgba(255,255,255,.2);
}
.sp-payments-product::before{
  content:"";
  position:absolute;
  inset:0 0 auto;
  height:5px;
  background:linear-gradient(90deg,var(--sp-package-from),var(--sp-package-to));
}
.sp-payments-product-glow{
  position:absolute;
  width:150px;
  height:150px;
  right:-75px;
  top:-82px;
  border-radius:50%;
  background:radial-gradient(circle,var(--sp-package-from),transparent 70%);
  opacity:.11;
  pointer-events:none;
}
.sp-payments-product.is-featured{
  border-color:color-mix(in srgb,var(--sp-package-from) 42%,#dbe6f4);
  box-shadow:0 22px 48px color-mix(in srgb,var(--sp-package-from) 15%,transparent);
}
.sp-payments-product-top{
  position:relative;
  min-height:28px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
}
.sp-payments-product-top>[data-product-badge]{
  border-radius:999px;
  padding:6px 9px;
  color:var(--sp-package-ink);
  background:color-mix(in srgb,var(--sp-package-ink) 16%,transparent);
  font-size:.63rem;
  font-weight:850;
}
.sp-payments-product-top>[data-product-rank]{
  margin-left:auto;
  color:color-mix(in srgb,var(--sp-package-ink) 72%,transparent);
  font-size:.68rem;
  font-weight:850;
}
.sp-payments-product-copy{display:grid;gap:4px}
.sp-payments-product-copy>[data-product-name]{
  color:var(--sp-package-ink);
  font-size:1.25rem;
  line-height:1.05;
}
.sp-payments-product-copy>[data-product-kind]{
  color:color-mix(in srgb,var(--sp-package-ink) 82%,transparent);
  font-size:.7rem;
  font-weight:800;
}
.sp-payments-product-copy>[data-product-description]{
  min-height:2.5em;
  color:color-mix(in srgb,var(--sp-package-ink) 72%,transparent);
  font-size:.75rem;
  font-weight:640;
  line-height:1.35;
}
.sp-payments-product ul{
  min-height:0;
  margin:0;
  padding:0;
  display:grid;
  gap:7px;
  list-style:none;
}
.sp-payments-product li{
  position:relative;
  padding-left:20px;
  color:color-mix(in srgb,var(--sp-package-ink) 84%,transparent);
  font-size:.73rem;
  font-weight:720;
}
.sp-payments-product li::before{
  content:"✓";
  position:absolute;
  left:0;
  top:-1px;
  color:var(--sp-package-ink);
  font-weight:950;
}
.sp-payments-product-price{
  display:flex;
  align-items:baseline;
  gap:7px;
}
.sp-payments-product-price del{
  color:color-mix(in srgb,var(--sp-package-ink) 62%,transparent);
  font-size:.74rem;
}
.sp-payments-product-price strong{
  color:var(--sp-package-ink);
  font-size:1.75rem;
  letter-spacing:-.045em;
}
.sp-payments-product-price small{
  color:color-mix(in srgb,var(--sp-package-ink) 72%,transparent);
  font-size:.72rem;
  font-weight:700;
}
.sp-payments-product-promo{
  width:max-content;
  max-width:100%;
  border-radius:10px;
  padding:7px 9px;
  color:#10213a;
  background:color-mix(in srgb,var(--sp-promotion-color) 34%,#fff);
  font-size:.66rem;
  font-weight:850;
}
.sp-payments-product-footer{
  margin-top:auto;
  border-top:1px solid color-mix(in srgb,var(--sp-package-ink) 22%,transparent);
  padding-top:12px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
}
.sp-payments-product-footer small{
  color:color-mix(in srgb,var(--sp-package-ink) 68%,transparent);
  font-size:.62rem;
  font-weight:650;
}
.sp-payments-product-buy{
  flex:0 0 auto;
  min-height:42px;
  border:0;
  border-radius:12px;
  padding:0 14px;
  border:1px solid color-mix(in srgb,var(--sp-package-ink) 32%,transparent);
  color:var(--sp-package-ink);
  background:color-mix(in srgb,var(--sp-package-ink) 18%,transparent);
  box-shadow:0 8px 18px color-mix(in srgb,var(--sp-package-from) 18%,transparent);
  font:850 .73rem/1 system-ui,sans-serif;
}
.sp-payments-product-buy i{font-style:normal}
.sp-payments-portal{
  min-height:50px;
  border:1px solid #d3e0f1;
  border-radius:15px;
  color:#174f9d;
  background:#fff;
  font-weight:850;
}

.sp-payments-dialog :is(button,input):focus-visible{
  outline:3px solid color-mix(in srgb,var(--sp-payments-accent) 32%,transparent);
  outline-offset:2px;
}
.sp-payments-dialog button:not(:disabled){cursor:pointer}
.sp-payments-dialog button:not(:disabled):active{transform:translateY(1px)}
.sp-payments-dialog[aria-busy="true"] .sp-payments-head::after{
  content:"";
  position:absolute;
  right:76px;
  bottom:5px;
  width:20px;
  height:3px;
  border-radius:999px;
  background:var(--sp-payments-accent);
  animation:sp-payments-progress 1s ease-in-out infinite alternate;
}
@keyframes sp-payments-progress{
  from{width:20px;opacity:.35}
  to{width:72px;opacity:1}
}

.sp-payments-fallback-backdrop{
  position:fixed;
  inset:0;
  z-index:2147482000;
  width:100%;
  height:100%;
  border:0;
  padding:0;
  background:rgba(3,16,39,.6);
  backdrop-filter:blur(9px);
}
.sp-payments-fallback-backdrop[hidden]{display:none!important}
.sp-payments-dialog.sp-payments-fallback-open{
  display:block;
  position:fixed;
  inset:16px;
  z-index:2147482001;
  margin:auto;
}
body.sp-payments-modal-open{overflow:hidden!important}

@media(min-width:760px){
  .sp-payments-hero{
    min-height:220px;
    grid-template-columns:minmax(0,1fr) minmax(300px,.82fr);
    grid-template-rows:auto auto auto;
    column-gap:28px;
    align-content:center;
  }
  .sp-payments-hero-top,
  .sp-payments-hero-value,
  .sp-payments-hero>small{
    grid-column:1;
  }
  .sp-payments-packages-cta{
    grid-column:2;
    grid-row:1/4;
    width:100%;
    min-height:116px;
    margin:0;
  }
  .sp-payments-topup{
    display:grid;
    grid-template-columns:minmax(0,.9fr) minmax(330px,1.1fr);
    column-gap:20px;
    align-items:start;
  }
  .sp-payments-topup .sp-payments-section-head{
    grid-column:1/-1;
  }
  .sp-payments-topup .sp-payments-amount-field{
    grid-column:1;
    grid-row:2;
  }
  .sp-payments-topup .sp-payments-presets{
    grid-column:1;
    grid-row:3;
    margin-bottom:0;
  }
  .sp-payments-topup .sp-payments-methods{
    grid-column:2;
    grid-row:2/4;
    align-content:start;
  }
}

/* Tablet: centered workspace, never a left-anchored sheet. */
@media(min-width:601px) and (max-width:900px){
  .sp-payments-dialog{
    width:calc(100vw - 28px);
    max-height:calc(100dvh - 28px);
    margin:auto;
    border-radius:28px;
  }
  .sp-payments-view{padding:16px}
  .sp-payments-status,
  .sp-payments-degraded{margin-left:16px;margin-right:16px}
}

/* Phone: true full-screen wallet with safe-area aware controls. */
@media(max-width:600px){
  .sp-payments-dialog,
  .sp-payments-dialog[open],
  .sp-payments-dialog.sp-payments-fallback-open{
    position:fixed;
    inset:0;
    width:100vw;
    height:100dvh;
    max-width:none;
    max-inline-size:none;
    max-height:100dvh;
    margin:0;
    border-radius:0;
  }
  .sp-payments-head{
    min-height:72px;
    grid-template-columns:auto auto minmax(0,1fr) auto auto;
    gap:8px;
    padding:
      calc(10px + env(safe-area-inset-top))
      max(12px,env(safe-area-inset-right))
      10px
      max(12px,env(safe-area-inset-left));
  }
  .sp-payments-head-mark{width:39px;height:39px;border-radius:13px}
  .sp-payments-head-mark span{transform:scale(.85)}
  .sp-payments-head h2{font-size:1.22rem}
  .sp-payments-head-copy small{font-size:.57rem}
  .sp-payments-test-pill{padding:6px 8px;font-size:.59rem}
  .sp-payments-close,
  .sp-payments-back{width:44px;height:44px;border-radius:14px}
  .sp-payments-status,
  .sp-payments-degraded{margin-left:12px;margin-right:12px}
  .sp-payments-degraded{
    grid-template-columns:auto minmax(0,1fr);
  }
  .sp-payments-degraded button{
    grid-column:1/-1;
    width:100%;
  }
  .sp-payments-view{
    gap:12px;
    padding:
      12px
      max(10px,env(safe-area-inset-right))
      calc(18px + env(safe-area-inset-bottom))
      max(10px,env(safe-area-inset-left));
  }
  .sp-payments-hero{
    min-height:238px;
    border-radius:24px;
    padding:20px;
  }
  .sp-payments-hero-value{font-size:2.75rem}
  .sp-payments-packages-cta{margin-top:22px}
  .sp-payments-card{border-radius:21px;padding:15px}
  .sp-payments-section-head{
    display:grid;
    grid-template-columns:minmax(0,1fr) auto;
    gap:9px;
  }
  .sp-payments-section-head h3{font-size:1.18rem}
  .sp-payments-secure{font-size:.59rem}
  .sp-payments-presets{gap:6px}
  .sp-payments-presets button{padding:0 4px;font-size:.68rem}
  .sp-payments-methods{gap:6px}
  .sp-payments-methods>button{
    min-height:68px;
    padding:9px 10px;
    text-align:left;
  }
  .sp-payments-method-icon{
    width:31px;
    height:31px;
    border-radius:10px;
  }
  .sp-payments-methods b{font-size:.72rem}
  .sp-payments-methods>button small{max-width:100%;font-size:.56rem}
  .sp-payments-methods>button>em{font-size:.62rem}
  .sp-payments-wallets>small{flex-basis:100%;font-size:.58rem}
  .sp-payments-movements-head{grid-template-columns:1fr}
  .sp-payments-filters{
    width:100%;
    display:grid;
    grid-template-columns:repeat(3,1fr);
  }
  .sp-payments-filters button{padding:0 7px}
  .sp-payments-movement{
    grid-template-columns:auto minmax(0,1fr) auto;
    gap:8px;
    padding:11px 10px;
  }
  .sp-payments-movement-icon{
    width:36px;
    height:36px;
    border-radius:12px;
  }
  .sp-payments-movement-copy b{font-size:.75rem}
  .sp-payments-movement-copy small{font-size:.61rem}
  .sp-payments-record-end strong{font-size:.74rem}
  .sp-payments-state{font-size:.54rem}
  .sp-payments-catalog{
    grid-auto-columns:minmax(270px,84vw);
    grid-auto-flow:column;
    grid-template-columns:none;
    padding:2px 2px 12px;
    overflow-x:auto;
    scroll-snap-type:x mandatory;
    scrollbar-width:thin;
  }
  .sp-payments-product{
    min-height:315px;
    scroll-snap-align:center;
  }
  .sp-payments-packages-intro{border-radius:22px;padding:19px}
  .sp-payments-packages-intro h3{font-size:1.45rem}
}

@media(max-width:480px){
  .sp-payments-movement{
    grid-template-columns:auto minmax(0,1fr);
  }
  .sp-payments-record-end{
    grid-column:2;
    display:flex;
    align-items:center;
    justify-content:flex-start;
    flex-wrap:wrap;
    gap:5px 7px;
    text-align:left;
  }
  .sp-payments-record-actions{grid-column:1/-1}
  .sp-payments-empty{
    min-height:120px;
    justify-content:flex-start;
  }
}

@media(max-width:420px){
  .sp-payments-nav-slot{padding-top:9px}
  .sp-payments-nav-card{min-height:86px;padding:14px;border-radius:19px}
  .sp-payments-head-mark{display:none}
  .sp-payments-test-pill{
    padding:6px 7px;
    font-size:.56rem;
  }
}

@media(max-width:365px){
  .sp-payments-test-pill{max-width:78px;white-space:normal;text-align:center}
  .sp-payments-hero{padding:17px}
  .sp-payments-packages-cta{padding:10px}
  .sp-payments-packages-cta em{padding:7px 8px}
  .sp-payments-catalog{grid-auto-columns:minmax(250px,88vw)}
  .sp-payments-product-footer{
    align-items:stretch;
    flex-direction:column;
  }
  .sp-payments-product-buy{width:100%}
}

@media(prefers-reduced-motion:reduce){
  .sp-payments-dialog,
  .sp-payments-dialog *,
  .sp-payments-nav-card,
  .sp-payments-nav-card *{animation:none!important;transition:none!important}
  .sp-payments-dialog{scroll-behavior:auto}
}