:root {
  --checkout-primary: #174b6e;
  --checkout-accent: #e6a23c;
  --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; } }

:root { --checkout-primary: #2d5a27; --checkout-accent: #4a7c45; --checkout-text: #1a1a1a; }
#checkoutBtn { border: 2px solid var(--primary); border-radius: var(--radius); padding: 12px 24px; font-weight: 600; line-height: inherit; }
.hero-buttons { flex-wrap: wrap; }
.checkout-dialog h2 { font-size: 1.6rem; line-height: 1.25; }
.checkout-close { line-height: 1; padding: 8px; }
#checkoutModal { overscroll-behavior: contain; }
#checkoutModal button:focus-visible, #checkoutModal input:focus-visible { outline: 2px solid var(--checkout-primary); outline-offset: 3px; }