@font-face{font-family:Ubuntu;src:url('/assets/ubuntu-400.woff2') format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:Ubuntu;src:url('/assets/ubuntu-500.woff2') format('woff2');font-weight:500;font-display:swap}
:root{color-scheme:light;--ink:#082d62;--muted:#667c96;--line:#dbe5f0;--background:#f3f6fb;--focus:#4579b7}
*{box-sizing:border-box}
[hidden]{display:none!important}
body{margin:0;min-height:100svh;display:flex;flex-direction:column;background:radial-gradient(ellipse at 12% 20%,#e7eef9 0,transparent 55%),var(--background);font:400 16px/1.5 Ubuntu,Arial,sans-serif;color:var(--ink);-webkit-font-smoothing:antialiased}
button,input{font:inherit}
a,button,input{-webkit-tap-highlight-color:transparent}
a{color:inherit;text-decoration:none}
button{cursor:pointer}
button:disabled{cursor:not-allowed}
a:focus-visible,button:focus-visible{outline:3px solid var(--focus);outline-offset:4px}
svg{fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0}
.payment-header{width:calc(100% - 64px);max-width:1120px;margin:28px auto 0;display:flex;align-items:center;justify-content:space-between;gap:20px}
.payment-brand{display:inline-flex;flex-shrink:0;border-radius:8px}
.payment-brand img{display:block;width:145px;height:auto;border-radius:7px}
.payment-back{display:inline-flex;align-items:center;gap:9px;min-height:44px;font-size:13px;color:#536d8b;border-radius:8px;transition:color .18s}
.payment-back svg{width:19px;height:19px}
.payment-back:hover{color:var(--ink)}
.payment-main{width:calc(100% - 40px);max-width:550px;margin:0 auto;flex:1;display:flex;align-items:center;padding:48px 0 38px}
.payment-shell{width:100%;min-width:0}
.payment-panel{padding:36px;border:1px solid #e0e8f3;border-radius:28px;background:#fff;box-shadow:0 18px 65px #082d6209;animation:panel-in .22s ease-out}
h1,h2{font-size:32px;line-height:1.17;letter-spacing:-.035em;font-weight:500;margin:0 0 28px;text-wrap:balance}
h1:focus,h2:focus{outline:0}
.payment-field{min-width:0;margin:0 0 21px}
.payment-field label{display:block;font-size:13px;font-weight:500;color:#3d5471;margin:0 0 7px}
.payment-field input{display:block;width:100%;min-width:0;min-height:53px;border:1px solid var(--line);border-radius:12px;padding:12px 14px;background:#fff;color:var(--ink);outline:0;line-height:1.5;font-size:16px;font-variant-numeric:tabular-nums;transition:border-color .17s,box-shadow .17s}
.payment-field input::placeholder{color:#8b9db2;opacity:1}
.payment-field input:focus{border-color:#6f93c1;box-shadow:0 0 0 3px #eaf0f8}
.payment-field input[aria-invalid="true"]{border-color:#b44a5c;background:#fffafb}
.amount-input,.number-input{position:relative}
.amount-input>span{position:absolute;left:16px;top:50%;transform:translateY(-50%);color:#6b819d;pointer-events:none}
.amount-input input{padding-left:34px;padding-right:14px}
.payment-hint,.payment-error{margin:7px 0 0;font-size:12px;line-height:1.5}
.payment-hint{color:var(--muted)}
.payment-error{color:#ae263b}
.payment-primary{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;padding:14px 20px;min-height:53px;border:1px solid var(--ink);border-radius:999px;color:#fff;background:var(--ink);font-weight:500;transition:transform .18s,background .18s,box-shadow .18s}
.payment-primary svg{width:21px;height:21px}
.payment-primary:hover:enabled{background:#19467c;box-shadow:0 5px 18px #082d6220;transform:translateY(-1px)}
.payment-primary:disabled{background:#e6ecf3;border-color:#e6ecf3;color:#667991}
.payment-panel-top{display:flex;justify-content:flex-start;margin:-6px 0 17px}
.payment-edit{display:inline-flex;align-items:center;gap:7px;min-height:32px;margin-left:-4px;padding:4px;border:0;border-radius:7px;background:none;font-size:12px;color:#597695}
.payment-edit:hover{color:var(--ink)}
.payment-edit svg{width:17px;height:17px}
#card-title{margin-bottom:22px}
.payment-summary{display:flex;justify-content:space-between;align-items:center;gap:16px;background:#f5f8fc;border:1px solid #e4ecf5;border-radius:15px;padding:16px 18px;margin:0 0 20px;font-variant-numeric:tabular-nums}
.payment-summary div{min-width:0}
.payment-summary div>span{display:block;font-size:11px;color:#637a96;margin-bottom:3px}
.payment-summary strong{display:block;font-size:27px;font-weight:500;letter-spacing:-.025em;overflow-wrap:anywhere}
.payment-summary p{font-size:12px;color:#5b728f;margin:0;white-space:nowrap}
.payment-notice{display:flex;align-items:center;gap:10px;margin:0 0 22px;padding:13px 14px;border:1px solid #dce7f5;border-radius:12px;background:#f4f8fd;font-size:13px;color:#4d6788;line-height:1.5}
.payment-notice svg{width:21px;height:21px;color:#6583a8}
.payment-card-fields{min-width:0;margin:0;padding:0;border:0}
.payment-card-fields input:disabled{background:#f8fafc;color:#74869d;-webkit-text-fill-color:#74869d;opacity:1;cursor:not-allowed}
.payment-card-fields input:disabled::placeholder{-webkit-text-fill-color:#8b9bb0}
.number-input input{padding-left:58px}
.card-brand{position:absolute;left:15px;top:50%;transform:translateY(-50%);width:29px;height:23px;color:#7c91ac;pointer-events:none}
.payment-field-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.payment-methods{display:flex;align-items:center;justify-content:center;gap:9px;min-height:44px;width:fit-content;max-width:100%;margin:17px auto 0;padding:7px;border-radius:8px;color:#566f8e;font-size:13px}
.payment-methods svg{width:17px;height:17px}
.payment-methods:hover{color:var(--ink)}
.payment-footer{padding:0 20px 23px;text-align:center;font-size:11px;color:#7c8da4}
.sr-only{position:absolute;clip-path:inset(50%);width:1px;height:1px;overflow:hidden;white-space:nowrap}
@keyframes panel-in{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:none}}
@media(max-width:600px){.payment-header{width:calc(100% - 36px);margin-top:18px;gap:12px}.payment-brand img{width:118px}.payment-back{font-size:12px;gap:6px}.payment-back svg{width:17px;height:17px}.payment-main{width:calc(100% - 28px);max-width:440px;align-items:flex-start;padding:26px 0 18px}.payment-panel{padding:25px 23px;border-radius:24px}h1,h2{font-size:28px;margin-bottom:24px}.payment-field{margin-bottom:17px}.payment-field label{font-size:12px;margin-bottom:6px}.payment-field input{min-height:49px;padding-top:10px;padding-bottom:10px}.payment-hint,.payment-error{font-size:11px;margin-top:6px}.payment-primary{min-height:49px;padding:12px 16px;font-size:15px}.payment-panel-top{margin-bottom:13px}#card-title{margin-bottom:18px}.payment-summary{padding:13px 14px;margin-bottom:16px;gap:10px}.payment-summary strong{font-size:24px}.payment-summary p{font-size:11px}.payment-notice{font-size:12px;padding:11px 12px;margin-bottom:18px}.payment-field-grid{gap:12px}.payment-methods{margin-top:12px;font-size:12px}.payment-footer{padding-bottom:17px}}
@media(max-width:359px){.payment-panel{padding:23px 18px}h1,h2{font-size:25px}.payment-header{width:calc(100% - 32px)}.payment-brand img{width:104px}.payment-back{font-size:11px}.payment-summary{align-items:flex-start;flex-direction:column;gap:5px}.payment-field-grid{gap:9px}.payment-field label{font-size:11px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}
.card-brand{width:38px;height:28px;display:grid;place-items:center;left:12px}
.card-brand svg{width:100%;height:100%}
.brand-visa{fill:#173b87;stroke:none;font:italic 900 21px Arial,sans-serif}
.brand-mastercard{stroke:none}
.brand-mastercard circle:first-child{fill:#eb001b}
.brand-mastercard circle:last-child{fill:#f79e1b;fill-opacity:.92}
.number-input input{padding-left:63px}
.payment-secondary{display:flex;align-items:center;justify-content:center;min-height:44px;width:100%;margin:12px 0 0;padding:10px 16px;border:1px solid var(--line);border-radius:999px;background:#fff;color:#506b8b;font-size:13px;font-weight:500}
.payment-secondary:hover:enabled,.payment-secondary:hover[href]{background:#f6f9fd;color:var(--ink)}
#retry-config{margin:-8px 0 22px}
.payment-result{text-align:center}
.payment-result-icon{display:grid;place-items:center;width:62px;height:62px;margin:0 auto 23px;border-radius:20px;background:#eef4fc;color:#426993}
.payment-result-icon svg{width:35px;height:35px;stroke-width:1.6}
.payment-result[data-status="approved"] .payment-result-icon{background:#ebf7ef;color:#268048}
.payment-result[data-status="declined"] .payment-result-icon{background:#fceef0;color:#ae263b}
.payment-result h2{margin-bottom:15px}
.payment-result-message{font-size:14px;line-height:1.65;color:#5e7592;margin:0}
.payment-result-summary{display:flex;flex-direction:column;gap:3px;margin:23px 0;padding:18px;border:1px solid #e4ecf5;border-radius:15px;background:#f5f8fc;font-size:12px;color:#637a96}
.payment-result-summary strong{font-size:30px;line-height:1.4;letter-spacing:-.025em;font-weight:500;color:var(--ink)}
.payment-reference{display:block;margin-top:7px;overflow-wrap:anywhere;font-size:10px}
.payment-form-error{padding:12px 14px;border:1px solid #edcbd1;border-radius:12px;background:#fff7f8;margin-top:16px}
.payment-primary[aria-busy="true"]::before{content:"";width:16px;height:16px;border:2px solid currentColor;border-right-color:transparent;border-radius:50%;animation:payment-spin .8s linear infinite}
.payment-edit:disabled{color:#9aa9b9;cursor:not-allowed}
@keyframes payment-spin{to{transform:rotate(360deg)}}
@media(max-width:600px){.payment-result-icon{width:54px;height:54px;margin-bottom:19px}.payment-result-message{font-size:13px}.payment-result-summary{margin:19px 0;padding:15px}.payment-result-summary strong{font-size:27px}}

.payment-processing{text-align:center;padding-top:46px;padding-bottom:30px}
.payment-processing h2{margin-bottom:15px}
.payment-processing-spinner{width:48px;height:48px;margin:0 auto 26px;border:3px solid #e4ecf5;border-top-color:var(--ink);border-radius:50%;animation:payment-spin .85s linear infinite}
@media(prefers-reduced-motion:reduce){.payment-processing-spinner{animation:none}}