/* The billing panel, summary, payment tiles and buttons use premiere.css,
   exactly like Profile & Billing inside /app. Only standalone layout lives here. */
:root { color-scheme:dark; --mobile-line:rgba(151,161,184,.2); --mobile-text:#e7e8f1; --mobile-muted:#7d8495; --mobile-purple:#8d61ff; }
* { box-sizing:border-box; }
[hidden] { display:none!important; }
html { min-height:100%; background:#080c13; }
body { margin:0; min-height:100vh; padding:48px 16px!important; background:#080c13; color:#e7e8f1; font:13px/1.4 Inter,"Segoe UI",Arial,sans-serif; }
#profile-billing-panel { margin:0 auto; max-height:none; grid-template-rows:auto auto auto auto; width:min(650px,100%); }
#profile-billing-title { margin:4px 0 0; line-height:1.3; }
.back-link { display:inline-flex; align-items:center; padding:7px 11px; text-decoration:none; font-size:11px; white-space:nowrap; }
.renewal-section { display:flex; justify-content:space-between; gap:12px; padding:13px 20px; background:rgba(141,97,255,.09); box-shadow:inset 0 -2px 0 rgba(139,92,246,.95); color:#d8ceff; font-weight:760; font-size:12px; }
.renewal-section span { color:#9e91b9; font-weight:500; }
.renewal-body { padding:24px 24px 20px; }
.profile-checkout-product { padding-bottom:8px; }
.profile-checkout-product h2 { margin:0; color:#f6f3ff; font-size:19px; font-weight:780; line-height:1.3; }
.service-symbol { width:40px; height:40px; display:grid; place-items:center; border:1px solid rgba(139,92,246,.28); border-radius:8px; background:rgba(139,92,246,.1); color:#c4b5fd; font-size:25px; }
.account-note { color:#9e91b9; font-size:11px; margin:0 0 12px; }
.renewal-item { align-items:start; line-height:1.6; }
.renewal-item span:last-child { white-space:nowrap; color:var(--mobile-muted); }
.profile-order-total { border-top:1px solid rgba(151,161,184,.12); align-items:center; padding-top:12px; margin-top:4px; }
#amount { color:#65ef9a; font-size:28px; line-height:1.2; white-space:nowrap; }
.profile-payment-heading { display:flex; justify-content:space-between; margin:21px 0 9px; }
.profile-payment-heading small { color:var(--mobile-muted); font-size:10px; font-weight:600; letter-spacing:0; text-transform:none; }
.profile-payment-methods { grid-template-columns:repeat(2,minmax(0,1fr)); }
.profile-payment-method { font-family:inherit; }
.profile-payment-method strong { font-size:12px; }
#pay { width:100%; margin-top:14px; font-family:inherit; }
.profile-checkout-secure { margin:11px 0 0; }
.login-copy { padding:16px 0 6px; }
h3 { margin:0 0 6px; font-size:15px; }
.login-copy p,#paid-panel p { color:#a5aabb; font-size:12px; line-height:1.7; margin:0 0 15px; }
.google-login { display:flex; align-items:center; justify-content:center; gap:11px; padding:10px; text-decoration:none; min-height:44px; }
.account-actions { display:flex; flex-wrap:wrap; align-items:center; gap:12px; }
.account-actions:has(> [hidden]):not(:has(> :not([hidden]))) { display:none; }
.account-actions a { color:#bca7f0; font-size:11px; text-decoration:none; }
.account-actions a:hover { text-decoration:underline; }
.account-actions button { padding:6px 10px; }
.renewal-note { padding:12px 14px; border:1px solid rgba(151,161,184,.12); border-radius:8px; background:rgba(7,11,17,.46); }
.renewal-note strong { color:#c9c3dc; font-size:11px; }
.renewal-note p { margin:5px 0 0; color:var(--mobile-muted); font-size:11px; line-height:1.65; }
#status { color:#bcb4cb; font-size:12px; line-height:1.6; margin:0; }
#status:empty { display:none; }
.test { color:#f4c863; font-size:11px; border:1px solid #f4c86340; border-radius:7px; padding:10px; }
#paid-panel { text-align:center; padding:14px 0 0; }
.paid-icon { color:#65ef9a; background:#65ef9a12; border:1px solid #65ef9a35; border-radius:50%; width:46px; height:46px; display:grid; place-items:center; font-size:24px; margin:0 auto 14px; }
footer { padding:13px 20px; border-top:1px solid rgba(151,161,184,.1); color:var(--mobile-muted); font-size:10px; line-height:1.6; background:rgba(7,11,17,.35); }
a:focus-visible,button:focus-visible { outline:2px solid #a78bfa; outline-offset:3px; }
@media(max-width:480px) { body { padding:16px 10px!important; } .renewal-body { padding:20px 16px 16px; } .profile-billing-header { gap:10px; } #profile-billing-title { font-size:16px; } .back-link { padding:7px 8px; font-size:10px; } .renewal-section { padding:12px 16px; font-size:11px; } #amount { font-size:24px; } .profile-checkout-product h2 { font-size:17px; } }
/* Annual billing disclosures and explicit consent share the billing panel theme. */
.renewal-terms { color: #aebbd0; font-size: 13px; line-height: 1.65; }
.renewal-consent { display: flex; align-items: flex-start; gap: 10px; margin: 18px 0; font-size: 13px; line-height: 1.6; color: #dce4f2; }
.renewal-consent input { flex: 0 0 auto; width: 18px; height: 18px; margin-top: 2px; accent-color: #8458ff; }
#paid-panel p { line-height: 1.65; }
#management { margin-top: 20px; }
#cancel-controls { margin-top: 20px; }
.renewal-note a { color: #b6a5ff; overflow-wrap: anywhere; }