.payment-page{--blue:#1e5bf0;--ink:#0f172a;--muted:#64748b;--line:#e2e8f0;background:linear-gradient(180deg,#f8fafc,#fff 60%,#f8fafc);color:var(--ink);font-family:Inter,sans-serif;line-height:1.6;min-height:100vh}
.payment-page *{box-sizing:border-box}.payment-page h1,.payment-page h2,.payment-page strong,.payment-page .pay-logo{font-family:Outfit,Inter,sans-serif}.payment-page h1{font-size:28px;line-height:1.25;font-weight:800;letter-spacing:-.7px;margin:8px 0}.payment-page h2{font-weight:700;font-size:20px;margin:0 0 12px}.payment-page p{margin:0 0 14px}.payment-page button,.payment-page input,.payment-page select{font:inherit}.payment-page button,.payment-page a{transition:background .18s,border-color .18s,box-shadow .18s}.payment-page button{cursor:pointer}.payment-page button:disabled{cursor:not-allowed;opacity:.5}.payment-page a{color:var(--blue);text-decoration:none}.payment-page button:focus-visible,.payment-page a:focus-visible{outline:3px solid #f59e0b;outline-offset:4px}.payment-page input:not([type=checkbox]),.payment-page select{width:100%;min-width:0;background:#fff;border:1.5px solid var(--line);border-radius:10px;padding:12px 14px;outline:none;color:var(--ink)}.payment-page input:focus,.payment-page select:focus{border-color:var(--blue);box-shadow:0 0 0 3px #1e5bf01a}.payment-page input[type=checkbox]{width:20px;height:20px;accent-color:var(--blue);flex:none}.payment-page small{font-size:12px;color:var(--muted)}.payment-page hr{border:0;border-top:1px solid var(--line);margin:22px 0}.pay-header{max-width:1280px;margin:auto;padding:23px 24px;display:flex;align-items:center;justify-content:space-between;gap:24px}.pay-logo{font-size:30px;font-weight:900;letter-spacing:-1.5px;color:#0f172a!important;display:flex;align-items:center}.pay-logo span{color:var(--blue)}.pay-logo small{font-family:Inter,sans-serif;font-weight:700;font-size:10px;letter-spacing:1.5px;border-left:1px solid #cbd5e1;margin-left:20px;padding-left:20px}.pay-header nav{display:flex;gap:28px;font-size:13px;font-weight:600}.pay-header nav a{color:#475569}.pay-secure{font-size:12px;color:#15803d;font-weight:600}.pay-environment{padding:10px 24px;text-align:center;background:#eff4ff;color:#1e40af;font-size:12px;font-weight:600}.pay-unavailable{background:#fffbeb;padding:10px 24px;font-size:12px;text-align:center;color:#92400e}.pay-stepper{display:flex;justify-content:space-between;max-width:930px;margin:26px auto 0;padding:0 24px;position:relative;gap:15px}.pay-stepper:before{content:"";position:absolute;top:21px;left:80px;right:80px;height:2px;background:var(--line)}.pay-stepper button{display:flex;flex-direction:column;gap:9px;align-items:center;border:0;background:transparent;position:relative;z-index:1;font-size:13px;color:var(--muted);min-width:76px}.pay-stepper button span{display:grid;place-items:center;width:42px;height:42px;border-radius:50%;background:#fff;border:2px solid var(--line);font-weight:700}.pay-stepper button.active{color:var(--blue)}.pay-stepper button.active span,.pay-stepper button.completed span{background:var(--blue);border-color:var(--blue);color:#fff}.pay-stepper button.active span{box-shadow:0 0 0 5px #1e5bf018}.pay-layout{max-width:1280px;margin:38px auto 64px;padding:0 24px;display:grid;grid-template-columns:minmax(0,1fr) 365px;gap:32px;align-items:start}.pay-title{margin-bottom:24px}.pay-title p{color:var(--muted);font-size:14px}.pay-eyebrow{color:var(--blue);font-size:10px;letter-spacing:1.8px;font-weight:800}.pay-card{border:1px solid var(--line);border-radius:18px;padding:26px;background:#fff;box-shadow:0 4px 20px -2px #0f172a08}.pay-fields{display:flex;flex-direction:column;gap:9px}.pay-fields label,.pay-summary label{font-size:13px;font-weight:600}.pay-fields>input{margin-bottom:10px}.pay-note{padding:14px 16px!important;background:#eff4ff;color:#37527c;font-size:12px;line-height:1.7;border-radius:10px;margin:10px 0!important}.pay-check{display:flex;align-items:center;gap:10px;line-height:1.6;font-size:13px!important;font-weight:500!important;margin:10px 0}.pay-domains{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:10px}.pay-domain-option{text-align:left;border:1px solid var(--line);border-radius:12px;background:#fff;padding:16px;display:flex;flex-direction:column;gap:2px}.pay-domain-option:hover{border-color:var(--blue);background:#f8faff}.pay-domain-option strong{font-size:22px}.pay-domain-option span{color:var(--blue);font-size:13px;font-weight:700}.pay-domain-option small{margin-top:6px}.pay-summary{position:sticky;top:20px;border-top:4px solid var(--blue);padding:24px}.pay-summary h2{font-size:23px}.pay-summary-domain{display:flex;flex-direction:column;gap:2px;background:#f8fafc;padding:14px;border-radius:10px;margin:20px 0;overflow-wrap:anywhere}.pay-summary-domain small{font-size:9px;letter-spacing:1px;font-weight:800}.pay-summary-domain span{font-size:11px;color:var(--muted)}.pay-line-items>div{display:flex;justify-content:space-between;gap:16px;font-size:12px;margin:15px 0}.pay-line-items strong{white-space:nowrap;font-size:13px}.pay-total-row{display:flex;justify-content:space-between;gap:15px;font-size:12px;margin:9px 0;color:#475569}.pay-grand-total{display:flex;flex-direction:column;margin:22px 0;padding-top:18px;border-top:1px dashed var(--line)}.pay-grand-total span{font-size:12px;font-weight:600}.pay-grand-total strong{font-size:30px;color:var(--blue);letter-spacing:-.5px}.pay-promo{display:flex;gap:8px;margin:8px 0}.pay-promo input{padding:9px!important;font-size:12px!important}.pay-promo button{border:none;background:#0f172a;color:white;border-radius:8px;padding:0 15px;font-size:12px;font-weight:700}.payment-page .pay-primary{display:flex;width:100%;justify-content:center;align-items:center;background:var(--blue);border:0;border-radius:11px;color:#fff;font-weight:700;font-size:13px;padding:15px 12px;margin-top:18px;box-shadow:0 6px 18px -3px #1e5bf040;text-align:center}.payment-page .pay-primary:hover{background:#1546be}.pay-back{display:block;width:100%;border:none;background:transparent;color:#64748b;font-size:13px!important;margin:15px 0;padding:5px}.pay-summary-note{display:block;font-size:10px!important;line-height:1.7;margin-top:15px;text-align:center}.pay-error{color:#b91c1c;font-size:13px;border:1px solid #fecaca;background:#fff1f2;padding:14px;border-radius:10px;margin-top:16px!important}.pay-muted{color:var(--muted);font-size:13px}.pay-template-tools{display:flex;gap:12px;margin-bottom:18px}.pay-template-tools select{width:155px}.pay-categories{display:flex;flex-wrap:wrap;gap:8px;margin:16px 0 23px}.pay-categories button{border:1px solid var(--line);background:#fff;border-radius:99px;padding:8px 13px;font-size:11px;font-weight:600;color:#475569}.pay-categories button.chosen{background:var(--blue);color:white;border-color:var(--blue)}.pay-template-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}.pay-template-card{border:1.5px solid var(--line);border-radius:15px;background:white;overflow:hidden}.pay-template-card.chosen{border-color:#f59e0b;box-shadow:0 0 0 2px #f59e0b18}.pay-template-image{height:160px;background:linear-gradient(135deg,#edf2ff,#f8fafc);position:relative;display:grid;place-items:center;text-align:center}.pay-template-image img{height:100%;width:100%;object-fit:cover}.pay-template-image>span{font-size:12px;color:#71809b}.pay-template-image small{position:absolute;bottom:12px;left:12px;border-radius:99px;background:#ffffffed;color:#334155;padding:3px 9px;font-size:9px;font-weight:700}.pay-template-body{padding:18px}.pay-template-body h2{font-size:16px;line-height:1.35;margin-bottom:9px}.pay-template-body p{font-size:11px;line-height:1.7;color:var(--muted);min-height:56px}.pay-template-body>strong{font-size:15px;color:var(--blue)}.pay-template-body>div{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:14px}.pay-template-body a{font-size:12px}.pay-template-body button{font-size:11px;font-weight:700;border:0;border-radius:7px;background:var(--blue);color:#fff;padding:9px 12px}.chosen .pay-template-body button{background:#f59e0b}.pay-hosting{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:13px}.pay-hosting button{padding:22px 15px;text-align:left;position:relative;border:1.5px solid var(--line)}.pay-hosting button.chosen{border-color:var(--blue);background:#f8faff;box-shadow:0 0 0 2px #1e5bf012}.pay-hosting small{font-size:8px;font-weight:800;letter-spacing:.5px;color:var(--blue)}.pay-hosting h2{font-size:23px;margin:14px 0 4px}.pay-hosting strong{font-size:21px;letter-spacing:-.5px}.pay-hosting p{font-size:10px;color:var(--muted);margin-top:7px}.pay-hosting ul{list-style:none;padding:0;margin:0 0 20px;font-size:11px;line-height:2.4;color:#475569}.pay-hosting li:before{content:"✓ ";color:#10b981}.pay-package-choice{display:block;text-align:center;background:#eff4ff;color:var(--blue);border-radius:8px;padding:8px;font-size:11px;font-weight:700}.chosen .pay-package-choice{background:var(--blue);color:#fff}.pay-addon{display:flex;gap:20px;align-items:center;justify-content:space-between;margin-top:25px}.pay-addon p{font-size:12px;color:var(--muted);margin:8px 0 0}.pay-addon strong{color:var(--blue);font-size:14px}.pay-method{display:flex;align-items:center;gap:14px;border:1px solid var(--line);padding:18px;border-radius:12px;margin:12px 0}.pay-method>span{font-size:27px;color:var(--blue)}.pay-method>div{flex:1}.pay-method p{font-size:11px;color:var(--muted);margin:3px 0 0}.pay-method b{font-size:9px;border:1px solid var(--line);padding:3px 6px;border-radius:5px}.pay-two-fields{display:grid;grid-template-columns:1fr 1fr;gap:15px}.pay-two-fields label{display:block;margin-bottom:8px}.pay-mail{margin-bottom:24px}.pay-invoice{max-width:620px;margin:60px auto;padding:36px}.pay-invoice p{font-size:14px;color:#475569}.pay-invoice dl{background:#f8fafc;border-radius:12px;padding:20px;margin:25px 0}.pay-invoice dt{font-size:11px;color:var(--muted)}.pay-invoice dd{margin:3px 0 14px;overflow-wrap:anywhere;font-size:14px;font-weight:600}.pay-invoice dd.pay-invoice-total{color:var(--blue);font-family:Outfit,sans-serif;font-size:30px;margin-bottom:0}.pay-invoice>small{display:block;text-align:center}.pay-secondary{background:white;border:1px solid var(--line);border-radius:10px;width:100%;padding:13px;margin:14px 0;color:var(--blue);font-size:13px!important;font-weight:700!important}.pay-footer{border-top:1px solid var(--line);max-width:1280px;margin:0 auto;padding:30px 24px 40px;text-align:center}.pay-footer .pay-logo{justify-content:center;font-size:26px}.pay-footer p{font-size:12px;color:#64748b;margin:7px 0}.pay-footer small{font-size:10px}.pay-loading{text-align:center;padding:80px 24px;color:#64748b}
@media(min-width:1100px){.pay-template-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:1050px){.pay-layout{grid-template-columns:minmax(0,1fr) 310px;gap:20px}.pay-hosting{grid-template-columns:1fr}.pay-hosting button{display:grid;grid-template-columns:1fr 1fr;gap:4px 15px}.pay-hosting hr,.pay-hosting ul{display:none}.pay-hosting h2{margin:0}.pay-hosting small{grid-column:1/-1}.pay-hosting .pay-package-choice{align-self:center}.pay-template-grid{gap:12px}.pay-template-body{padding:14px}.pay-template-body>div{align-items:stretch;flex-direction:column;text-align:center}}
@media(max-width:760px){.pay-header{padding:18px 18px;gap:15px}.pay-logo{font-size:26px}.pay-logo small,.pay-secure{display:none}.pay-header nav{gap:14px;font-size:11px}.pay-layout{grid-template-columns:1fr;margin:28px auto 40px;padding:0 18px;gap:25px}.pay-summary{position:static}.pay-stepper{padding:0 12px;gap:4px;margin-top:23px}.pay-stepper button{min-width:0;font-size:10px;width:20%}.pay-stepper button span{width:34px;height:34px}.pay-stepper:before{left:38px;right:38px;top:17px}.payment-page h1{font-size:25px}.pay-card{padding:20px}.pay-environment,.pay-unavailable{font-size:10px;padding:10px 18px}.pay-domains{gap:10px}.pay-domain-option{padding:12px}.pay-domain-option span{font-size:11px}.pay-template-image{height:130px}.pay-template-body h2{font-size:14px}.pay-template-body p{font-size:10px;min-height:68px}.pay-template-tools select{width:140px;font-size:11px}.pay-categories{gap:6px}.pay-categories button{font-size:10px;padding:7px 10px}.pay-addon{flex-direction:column;align-items:flex-start;gap:7px}.pay-method{padding:14px;gap:10px}.pay-method b{display:none}.pay-invoice{margin:30px 18px;padding:24px}.pay-grand-total strong{font-size:28px}}
@media(prefers-reduced-motion:reduce){.payment-page *{transition:none!important;scroll-behavior:auto!important}}

.payment-page .pay-footer nav { margin-top: 12px; font-size: 12px; color: #2563eb; }
.payment-page .pay-footer nav a:hover { text-decoration: underline; }