:root {
  --checkout-primary: #1a365d;
  --checkout-accent: #d69e2e;
  --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; } }

.hero-cta #checkoutBtn { background: var(--color-accent); color: var(--color-text-dark); font-weight: 600; }
.hero-cta #checkoutBtn:hover { background: var(--color-accent-dark); color: #fff; }