#checkout-dialog { width: min(640px, calc(100% - 24px)); max-height: 90vh; margin: auto; border: 0; border-radius: 14px; padding: 28px; color: #213547; }
#checkout-dialog::backdrop { background: #102030aa; }
.checkout-close { float: right; border: 0; background: transparent; font-size: 22px; cursor: pointer; }
.checkout-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin: 20px 0; }
.checkout-fields label { display: grid; gap: 5px; font-size: 14px; }
.checkout-fields input { width: 100%; min-width: 0; box-sizing: border-box; padding: 10px; border: 1px solid #aab7c1; border-radius: 6px; font: inherit; }
#checkout-btn { width: 100%; margin-bottom: 10px; }
#checkout-btn[hidden] { display: none; }
#checkout-error { color: #a11b1b; }
.checkout-page { font: 16px/1.6 system-ui, sans-serif; background: #f3f5f7; color: #213547; padding: 24px; }
.checkout-result { max-width: 620px; margin: 8vh auto; padding: 28px; border-radius: 14px; background: white; }
.checkout-result a, .checkout-result button { display: inline-block; margin: 8px 12px 8px 0; }
.checkout-result [hidden] { display: none; }
.order-brand { margin: 0; color: #546476; font-size: .85rem; }
.checkout-result h1 { margin: 8px 0 20px; }
.checkout-result h2 { margin-top: 26px; font-size: 1.1rem; }
.order-progress { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; padding: 0; margin: 28px 0 18px; list-style: none; }
.order-progress li { border-top: 4px solid #dbe2e8; padding-top: 8px; font-size: .8rem; color: #546476; }
.order-progress li.done { border-color: #168159; color: #116143; }
.order-progress li[aria-current="step"] { font-weight: 700; }
.tracking-box { background: #eef7f3; border: 1px solid #c0ded0; border-radius: 10px; padding: 16px; overflow-wrap: anywhere; }
.tracking-box p { margin: 0; }
.order-items { list-style: none; padding: 0; }
.order-items li { padding: 12px 0; border-bottom: 1px solid #e1e7eb; overflow-wrap: anywhere; }
.order-total { font-size: 1.15rem; font-weight: 700; }
.order-note { color: #546476; font-size: .85rem; }
.order-actions button { border: 0; border-radius: 7px; padding: 10px 16px; background: #213547; color: white; font: inherit; cursor: pointer; }
.order-actions button:disabled { opacity: .6; cursor: wait; }
.checkout-result a { color: #155a95; }
@media (max-width: 480px) { .checkout-fields { grid-template-columns: 1fr; } #checkout-dialog { padding: 18px; } }