@import url('/screens/user/account/child.css');

.purchases-page{min-height:100dvh;padding:82px 18px 92px;color:var(--via-text);background:radial-gradient(circle at 50% -15%,rgba(44,111,199,.3),transparent 42%),var(--via-bg)}
.purchases-shell{width:min(1440px,100%);margin:0 auto}
.purchases-toolbar{display:flex;align-items:center;justify-content:space-between;min-height:56px;margin-bottom:14px;padding:5px 7px 5px 10px;background:color-mix(in srgb,var(--via-panel) 82%,transparent);border:1px solid var(--via-border);border-radius:16px;box-shadow:var(--via-shadow);backdrop-filter:blur(18px)}
.purchases-toolbar-actions{display:flex;gap:5px}.purchases-toolbar button,.purchases-close{display:flex;align-items:center;justify-content:center;color:var(--via-text);background:transparent;border:0;border-radius:10px;cursor:pointer}.purchases-toolbar button{min-height:42px;gap:6px;padding:0 10px}.purchases-toolbar button:hover,.purchases-close:hover{background:rgba(127,148,183,.12)}.purchases-toolbar button>span{font-size:23px;line-height:1}.purchases-toolbar button>small{font-size:10px;font-weight:850;letter-spacing:.6px}.purchases-close{width:42px;height:42px;font-size:29px;text-decoration:none}
.purchases-content{width:100%}.purchase-select-step{display:grid;gap:16px}.purchase-heading{text-align:center}.purchase-heading h1{margin:0;font-size:clamp(24px,3vw,34px);font-weight:900;letter-spacing:.7px}.purchase-heading p{margin:7px 0 0;color:var(--via-muted);font-size:14px}
.purchase-plan-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}.purchase-plan{position:relative;display:flex;min-width:0;flex-direction:column;padding:18px;color:var(--via-text);text-align:left;background:linear-gradient(145deg,var(--via-panel-2),var(--via-panel));border:1px solid var(--via-border);border-radius:16px;box-shadow:var(--via-shadow);cursor:pointer;transition:transform .24s ease,border-color .24s ease,box-shadow .24s ease}.purchase-plan:hover{transform:translateY(-2px)}.purchase-plan.is-selected{border:2px solid #ffd54f;box-shadow:0 0 0 3px rgba(255,213,79,.1),var(--via-shadow);animation:purchasePulse 1.8s ease-in-out infinite}.purchase-popular{position:absolute;top:-11px;right:-7px;padding:5px 10px;color:#111;font-size:10px;font-weight:900;letter-spacing:.6px;background:#ffd54f;border-radius:999px;box-shadow:0 4px 10px rgba(0,0,0,.24)}
.purchase-plan-head{display:grid;grid-template-columns:28px minmax(0,1fr) auto;align-items:center;gap:7px}.purchase-plan-head>img{width:27px;height:27px;object-fit:contain}.purchase-plan-head h2{min-width:0;margin:0;font-size:22px;font-weight:900;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.purchase-price{text-align:right;white-space:nowrap}.purchase-price small{color:var(--via-muted);font-size:11px;font-weight:750}.purchase-price strong{display:block;color:inherit;font-size:17px;font-weight:900}.purchase-plan.is-selected .purchase-price strong{color:#ffd54f}.purchase-plan-subtitle{margin:5px 0 0;color:var(--via-muted);font-size:13px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.purchase-features{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:13px 6px;margin-top:13px;padding-top:14px;border-top:1px solid var(--via-border)}.purchase-feature{position:relative;display:grid;justify-items:center;gap:6px;min-width:0;font-size:11px;font-weight:850;text-align:center}.purchase-feature img{width:25px;height:25px;object-fit:contain}.purchase-feature.is-disabled{opacity:.35}.purchase-feature.is-crossed::after{content:'';position:absolute;top:11px;width:29px;height:3px;background:#e83e3e;border-radius:3px;transform:rotate(-45deg)}
.purchase-selection-error{margin:0;color:#e84c4c;font-size:13px;font-weight:750;text-align:center}.purchase-benefits{display:grid;grid-template-columns:repeat(3,1fr);width:min(620px,100%);margin:0 auto}.purchase-benefit{display:grid;justify-items:center;gap:6px;padding:5px 12px;text-align:center}.purchase-benefit+.purchase-benefit{border-left:1px solid var(--via-border)}.purchase-benefit img{width:25px;height:25px;object-fit:contain}.purchase-benefit span{font-size:11px;font-weight:750;line-height:1.18}
.purchase-next{display:flex;min-height:58px;width:min(620px,100%);margin:0 auto;align-items:center;justify-content:center;flex-direction:column;padding:8px 18px;color:#fff;background:var(--via-accent);border:0;border-radius:16px;box-shadow:0 8px 22px rgba(44,111,199,.3);cursor:pointer}.purchase-next strong{font-size:17px;font-weight:900;letter-spacing:.6px}.purchase-next small{margin-top:2px;color:rgba(255,255,255,.72);font-size:11px}.purchase-next:disabled{opacity:.55;cursor:wait}.purchase-terms{margin:0;color:var(--via-muted);font-size:12px;line-height:1.45;text-align:center}.purchase-terms a{color:var(--via-accent);font-weight:800;text-decoration:none}
.purchase-payment-step,.purchase-status-step{width:min(720px,100%);margin:0 auto}.purchase-step-title{text-align:center}.purchase-step-title h1{margin:0;font-size:28px}.purchase-step-title p{margin:7px 0 0;color:var(--via-muted);font-size:13px}.purchase-summary{display:grid;grid-template-columns:44px minmax(0,1fr) auto;align-items:center;gap:10px;margin:17px 0;padding:13px;background:linear-gradient(145deg,var(--via-panel-2),var(--via-panel));border:1px solid #ffd54f;border-radius:14px;box-shadow:var(--via-shadow)}.purchase-summary img{width:38px;height:38px;object-fit:contain}.purchase-summary strong,.purchase-summary span{display:block}.purchase-summary span{margin-top:3px;color:var(--via-muted);font-size:12px}.purchase-summary b{color:#ffd54f;font-size:18px;white-space:nowrap}
.purchase-inline-checkout{padding:15px;background:linear-gradient(145deg,rgba(44,111,199,.12),rgba(127,148,183,.04));border:1px solid color-mix(in srgb,var(--via-accent) 48%,var(--via-border));border-radius:16px;box-shadow:var(--via-shadow);animation:checkoutAppear .3s cubic-bezier(.2,.8,.2,1) both}.purchase-inline-title{text-align:center}.purchase-inline-title h3{margin:0;font-size:17px;font-weight:900}.purchase-inline-title p{margin:4px 0 12px;color:var(--via-muted);font-size:11px}.payment-methods{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:10px}.payment-method{display:grid;grid-template-columns:48px minmax(0,1fr) auto;align-items:center;gap:11px;min-height:76px;padding:11px;color:var(--via-text);text-align:left;background:linear-gradient(145deg,var(--via-panel-2),var(--via-panel));border:1px solid var(--via-border);border-radius:13px;box-shadow:var(--via-shadow);cursor:pointer;transition:transform .2s ease,border-color .2s ease}.payment-method:hover{transform:translateY(-2px);border-color:var(--via-accent)}.payment-method-logo{display:block;width:48px;height:48px;object-fit:contain;background:transparent}.payment-method strong,.payment-method small{display:block}.payment-method strong{font-size:14px}.payment-method small{margin-top:4px;color:var(--via-muted);font-size:11px;line-height:1.25}.payment-method>b{font-size:20px}.purchase-back{display:block;margin:15px auto 0;padding:10px 16px;color:var(--via-muted);font-weight:800;background:transparent;border:0;cursor:pointer}
.purchase-loading,.purchase-processing{display:grid;place-items:center;gap:13px;min-height:460px;color:var(--via-muted);text-align:center}.purchase-loading i,.purchase-processing i{width:35px;height:35px;border:4px solid rgba(127,148,183,.22);border-top-color:var(--via-accent);border-radius:50%;animation:purchaseSpin .8s linear infinite}.purchase-processing strong{color:var(--via-text);font-size:20px}.purchase-processing small{opacity:.55}
.purchase-status-step{display:grid;justify-items:center;gap:14px;padding:38px 20px;text-align:center;background:linear-gradient(145deg,var(--via-panel-2),var(--via-panel));border:1px solid var(--via-border);border-radius:18px;box-shadow:var(--via-shadow)}.purchase-status-icon{display:grid;place-items:center;width:76px;height:76px;color:#fff;font-size:38px;background:var(--via-accent);border-radius:50%}.purchase-status-icon.is-error{background:#d93636}.purchase-status-step h1{margin:0;font-size:27px}.purchase-status-step p{max-width:520px;margin:0;color:var(--via-muted);line-height:1.5}.purchase-status-step .purchase-next{margin-top:5px}.restored-list{display:grid;gap:9px;width:100%}.restored-item{display:grid;grid-template-columns:40px minmax(0,1fr) auto;align-items:center;gap:10px;padding:11px;text-align:left;background:rgba(127,148,183,.07);border:1px solid var(--via-border);border-radius:11px}.restored-item img{width:35px;height:35px;object-fit:contain}.restored-item strong,.restored-item small{display:block}.restored-item small{margin-top:3px;color:var(--via-muted)}.restored-item b{color:#0aaf6e}.purchase-server-note{margin-top:12px;padding:11px;color:var(--via-muted);font-size:11px;line-height:1.4;background:rgba(127,148,183,.06);border:1px solid var(--via-border);border-radius:10px}
@keyframes purchaseSpin{to{transform:rotate(360deg)}}@keyframes purchasePulse{50%{box-shadow:0 0 0 4px rgba(255,213,79,.16),var(--via-shadow)}}@keyframes checkoutAppear{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}
@media(max-width:760px){.purchases-page{padding:72px 12px calc(80px + env(safe-area-inset-bottom))}.purchases-toolbar{margin-bottom:10px}.purchases-toolbar button>small{display:none}.purchase-heading h1{font-size:23px}.purchase-plan-grid{grid-template-columns:1fr;gap:10px}.purchase-plan{padding:12px}.purchase-plan-head h2{font-size:20px}.purchase-features{gap:10px 4px;margin-top:10px;padding-top:11px}.purchase-inline-checkout{padding:11px}.purchase-inline-title h3{font-size:15px}.purchase-benefit{padding-inline:5px}.payment-methods{grid-template-columns:1fr}.payment-method{min-height:68px;grid-template-columns:42px minmax(0,1fr) auto;padding:9px}.payment-method-logo{width:42px;height:42px}.purchase-payment-step,.purchase-status-step{width:100%}.purchase-status-step{padding:28px 14px}.purchase-summary{margin:13px 0}.purchase-step-title h1{font-size:23px}}
@media(max-width:390px){.purchases-page{padding-inline:8px}.purchase-plan{padding-inline:10px}.purchase-plan-head{grid-template-columns:25px minmax(0,1fr) auto}.purchase-plan-head>img{width:24px;height:24px}.purchase-plan-head h2{font-size:18px}.purchase-price strong{font-size:15px}.purchase-feature{font-size:10px}.purchase-benefit span{font-size:10px}}

/* Keep the plan choice visible when a payment method is pressed first. */
.purchase-plan-grid.is-choice-required .purchase-plan {
  animation: purchaseChoiceNudge .8s cubic-bezier(.22,.61,.36,1) 1;
}
@keyframes purchaseChoiceNudge {
  0%, 100% { transform: scale(1); }
  42% { transform: scale(1.018); }
}
.purchase-plan:focus-visible,.payment-method:focus-visible {
  outline: 3px solid var(--via-accent);
  outline-offset: 4px;
}
.purchase-plan-grid { scroll-margin-block: 100px; }
.purchases-support { display:flex; align-items:center; justify-content:center; min-height:42px; gap:6px; padding:0 10px; color:var(--via-text); text-decoration:none; border-radius:10px; }
.purchases-support:hover { background:rgba(127,148,183,.12); }
.purchases-support img { width:23px; height:23px; object-fit:contain; }
.purchases-support small { font-size:10px; font-weight:850; letter-spacing:.6px; }
.purchases-support:focus-visible { outline:2px solid var(--via-accent); outline-offset:2px; }
.purchase-selection-error { color: var(--via-text); }

/* Keep a balanced scale on larger screens. */
.purchase-benefits { width: 100%; gap: 0; padding-block: 4px; }
.purchase-benefit { grid-template-columns: 38px minmax(0,1fr); align-items: center; justify-items: start; gap: 12px; padding: 8px 20px; text-align: left; }
.purchase-benefit img { width: 38px; height: 38px; }
.purchase-benefit span { font-weight: 400; line-height: 1.4; }
.purchase-benefit strong,.purchase-benefit small { display: block; }
.purchase-benefit strong { font-size: 14px; font-weight: 800; }
.purchase-benefit small { margin-top: 4px; color: var(--via-muted); font-size: 12px; }
.purchase-terms { border-top: 1px solid var(--via-border); padding-top: 16px; }
@media (min-width: 761px) {
  .purchases-page { padding: 90px clamp(24px,4vw,80px) 30px; }
  .purchases-toolbar { margin-bottom: 18px; }
  .purchase-select-step { gap: 18px; }
  .purchase-heading h1 { font-size: clamp(30px,2vw,38px); }
  .purchase-heading p { font-size: 15px; }
  .purchase-plan-grid { gap: 18px; }
  .purchase-plan { padding: clamp(18px,1.15vw,24px); border-radius: 18px; }
  .purchase-plan-head { grid-template-columns: 32px minmax(0,1fr) auto; gap: 8px; }
  .purchase-plan-head>img { width: 32px; height: 32px; }
  .purchase-plan-head h2 { font-size: clamp(22px,1.4vw,27px); }
  .purchase-price small { font-size: 12px; }
  .purchase-price strong { font-size: 20px; }
  .purchase-plan-subtitle { font-size: 14px; margin-top: 7px; white-space: normal; }
  .purchase-popular { font-size: 11px; padding: 5px 11px; }
  .purchase-features { gap: 14px 8px; margin-top: 15px; padding-top: 15px; }
  .purchase-feature { gap: 6px; font-size: 12px; }
  .purchase-feature img { width: 32px; height: 32px; }
  .purchase-feature.is-crossed::after { top: 15px; width: 36px; }
  .purchase-inline-checkout { padding: 18px; border-radius: 18px; }
  .purchase-inline-title h3 { font-size: 20px; }
  .purchase-inline-title p { margin-bottom: 14px; font-size: 12px; }
  .payment-methods { gap: 12px; }
  .payment-method { grid-template-columns: 52px minmax(0,1fr) auto; min-height: 88px; padding: 13px; gap: 12px; border-radius: 14px; }
  .payment-method-logo { width: 52px; height: 52px; }
  .payment-method strong { font-size: 16px; }
  .payment-method small { font-size: 12px; line-height: 1.4; }
  .payment-method>b { font-size: 23px; }
  .purchase-terms,.purchase-selection-error { font-size: 13px; }
}
@media (max-width: 760px) {
  .purchases-support small { display:none; }
  .purchase-benefits { grid-template-columns: 1fr; }
  .purchase-benefit { padding: 12px 6px; }
  .purchase-benefit+.purchase-benefit { border-left: 0; border-top: 1px solid var(--via-border); }
}
.purchase-popular {
  transform-origin: center;
  animation: purchasePopularFlip 7s ease-in-out infinite;
}
@keyframes purchasePopularFlip {
  0%, 86% { transform: perspective(500px) rotateX(0deg); }
  100% { transform: perspective(500px) rotateX(360deg); }
}
@media (prefers-reduced-motion: reduce) {
  .purchase-popular { animation: none; }
  .purchase-plan,.purchase-inline-checkout { animation: none !important; transition: none; }
  .payment-method { transition: none; }
}

/* Light surfaces and readable foregrounds; dark styling stays above. */
html[data-theme="light"] :is(.purchase-plan.is-selected .purchase-price strong,.purchase-summary b) { color: var(--via-warning); }
html[data-theme="light"] .restored-item b { color: var(--via-success); }
html[data-theme="light"] .purchase-status-icon:not(.is-error) { background: var(--via-success); }
html[data-theme="light"] .purchases-page { background: radial-gradient(circle at 50% -15%,rgba(44,111,199,.16),transparent 42%),var(--via-bg); }