:root {
  --checkout-primary: #174b9b;
  --checkout-accent: #087d85;
  --checkout-surface: #fff;
  --checkout-text: #17212b;
}
#checkoutBtn,
#payBtn { border: 0; border-radius: 5px; padding: 12px 22px; background: var(--checkout-primary); color: #fff; cursor: pointer; font: inherit; }
#checkoutBtn:hover,
#payBtn:hover { filter: brightness(1.08); }
#checkoutModal[hidden] { display: none !important; }
#checkoutModal { position: fixed; inset: 0; z-index: 10020; display: flex; overflow-y: auto; padding: 20px; background: rgba(12, 24, 40, .82); }
.checkout-dialog { position: relative; width: min(100%, 460px); margin: auto; padding: 32px; border-radius: 8px; background: var(--checkout-surface); color: var(--checkout-text); box-shadow: 0 16px 45px rgba(0,0,0,.3); }
.checkout-dialog h2 { margin: 0 36px 8px 0; color: var(--checkout-primary); }
.checkout-intro { margin: 0 0 24px; }
.checkout-close { position: absolute; top: 10px; right: 16px; border: 0; background: none; color: var(--checkout-text); font-size: 2rem; cursor: pointer; }
.checkout-group { margin: 0 0 16px; }
.checkout-group label { display: block; margin-bottom: 7px; }
.checkout-group input { box-sizing: border-box; width: 100%; min-height: 48px; padding: 10px 12px; border: 1px solid #b5c0ca; border-radius: 5px; font: inherit; }
.checkout-card-field { min-height: 48px; border: 1px solid #b5c0ca; border-radius: 5px; background: var(--checkout-surface); }
.checkout-card-field:focus-within { border-color: var(--checkout-primary); }
.checkout-card-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
#payBtn { width: 100%; }
#payBtn:disabled { opacity: .55; cursor: not-allowed; }
#checkoutStatus { min-height: 24px; margin: 14px 0 0; }
#checkoutStatus[data-kind="error"] { color: #b42318; }
#checkoutStatus[data-kind="success"] { color: #217346; }
@media (max-width: 480px) { .checkout-dialog { padding: 22px; } }

#checkoutBtn.button-outline { background:#fff; color:#174b9b; border:1.5px solid #b3c8e0; border-radius:8px; padding:13px 24px; font-weight:700; }
#checkoutBtn.button-outline:hover { background:#eaf2fb; filter:none; }
.checkout-dialog { width:min(100%,490px); border-radius:16px; padding:30px; font-size:15px; }
.checkout-dialog h2 { font-size:27px; letter-spacing:-.8px; line-height:1.25; margin-bottom:12px; }
.checkout-kicker { font-size:10px; letter-spacing:1.3px; font-weight:800; color:#087d85; margin-bottom:10px; }
.checkout-intro { font-size:14px; line-height:1.6; padding:11px 13px; background:#eef5fc; border-radius:7px; margin-bottom:21px; }
.checkout-group { margin-bottom:14px; }
.checkout-group label { font-size:13px; color:#172c49; font-weight:700; }
.checkout-group .optional { font-weight:400; color:#526477; }
.checkout-group small { display:block; font-size:11px; color:#526477; margin-top:5px; line-height:1.5; }
.checkout-close { min-width:44px; min-height:44px; top:7px; right:9px; line-height:1; }
.checkout-group input { border-radius:7px; }
.checkout-card-field { height:48px; border-radius:7px; }
#payBtn { border-radius:7px; font-weight:700; min-height:49px; }
#checkoutStatus { font-size:13px; line-height:1.5; }
@media(max-width:1100px){#checkoutBtn.button-outline{padding:13px 17px;font-size:14px;}}
@media(max-width:850px){#checkoutBtn.button-outline{font-size:13px;padding:12px;}}
@media(max-width:600px){#checkoutBtn.button-outline{font-size:14px;padding:13px 17px;}}
@media(max-width:480px){#checkoutModal{padding:12px}.checkout-dialog{padding:25px 21px}.checkout-dialog h2{font-size:25px}.checkout-card-row{gap:12px}}
@media(max-width:360px){#checkoutBtn.button-outline{font-size:13px;padding:12px;}}