:root {
  --checkout-red: #bd111c;
  --checkout-red-dark: #8f0010;
  --checkout-gold: #df971c;
  --checkout-green: #52752f;
  --checkout-ink: #3b251d;
  --checkout-muted: #765b48;
  --checkout-paper: #fffaf0;
}

.checkout-page,
.payment-page {
  min-height: 100vh;
  padding: 28px max(24px, calc((100% - 1180px) / 2)) 76px;
  color: var(--checkout-ink);
  background-color: #fff9ed;
  background-image: radial-gradient(rgba(166, 103, 31, 0.08) 0.7px, transparent 0.7px);
  background-size: 9px 9px;
}

.checkout-breadcrumb { display: flex; align-items: center; gap: 9px; margin-bottom: 26px; color: var(--checkout-muted); font-size: 0.9rem; }
.checkout-breadcrumb a { color: var(--checkout-red); text-decoration: none; font-weight: 800; }
.checkout-header { max-width: 760px; margin-bottom: 34px; }
.checkout-header p { margin: 0 0 6px; color: var(--checkout-red); font-weight: 900; text-transform: uppercase; }
.checkout-header h1 { margin: 0; color: var(--checkout-red); font-family: "Segoe Print", "Comic Sans MS", cursive; font-size: clamp(2.4rem, 5vw, 4.4rem); line-height: 1.08; }
.checkout-header > span { display: block; margin-top: 12px; color: var(--checkout-muted); line-height: 1.6; }

.checkout-layout { display: grid; grid-template-columns: minmax(0, 1fr) 370px; gap: 28px; align-items: start; }
.checkout-form-column { display: grid; gap: 22px; }
.checkout-panel,
.checkout-summary,
.checkout-empty,
.payment-card { border: 1px solid rgba(181, 111, 26, 0.25); border-radius: 8px; background: rgba(255, 253, 247, 0.97); box-shadow: 0 18px 42px rgba(94, 54, 21, 0.1); }

.checkout-panel { padding: 28px; }
.checkout-panel-heading { display: flex; gap: 14px; align-items: center; margin-bottom: 24px; }
.checkout-panel-heading > span { flex: 0 0 38px; width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; color: #fff; background: var(--checkout-red); font-weight: 900; }
.checkout-panel-heading p,
.checkout-panel-heading h2 { margin: 0; }
.checkout-panel-heading p { color: var(--checkout-green); font-size: 0.72rem; font-weight: 900; text-transform: uppercase; }
.checkout-panel-heading h2 { margin-top: 2px; font-size: 1.35rem; }

.checkout-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.checkout-field { min-width: 0; }
.checkout-field-wide { grid-column: 1 / -1; }
.checkout-field label { display: flex; justify-content: space-between; gap: 12px; margin-bottom: 7px; font-size: 0.86rem; font-weight: 800; }
.checkout-field label > span { color: var(--checkout-muted); font-size: 0.72rem; font-weight: 500; }
.checkout-field input,
.checkout-field select,
.checkout-field textarea { width: 100%; min-height: 46px; padding: 11px 13px; border: 1px solid rgba(105, 65, 30, 0.25); border-radius: 6px; color: var(--checkout-ink); background: #fff; font: inherit; resize: vertical; }
.checkout-field input:focus,
.checkout-field select:focus,
.checkout-field textarea:focus { outline: 3px solid rgba(223, 151, 28, 0.25); border-color: var(--checkout-gold); }
.checkout-field input[aria-invalid="true"],
.checkout-field select[aria-invalid="true"],
.checkout-field textarea[aria-invalid="true"] { border-color: var(--checkout-red); }
.checkout-field select:disabled { color: #9b8c80; background: #f5f1eb; cursor: wait; }
.checkout-field small,
.checkout-group-error { display: block; min-height: 18px; margin-top: 5px; color: var(--checkout-red); font-size: 0.76rem; }

.checkout-options { display: grid; gap: 11px; }
.checkout-option { position: relative; min-height: 74px; padding: 14px 15px; border: 1px solid rgba(105, 65, 30, 0.2); border-radius: 6px; display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; gap: 12px; align-items: center; background: #fffdf8; cursor: pointer; }
.checkout-option:has(input:checked) { border-color: var(--checkout-red); background: #fff4e6; box-shadow: 0 0 0 2px rgba(189, 17, 28, 0.08); }
.checkout-option input { position: absolute; opacity: 0; }
.checkout-option-marker { width: 20px; height: 20px; border: 2px solid #b99b82; border-radius: 50%; display: block; }
.checkout-option input:checked + .checkout-option-marker { border: 6px solid var(--checkout-red); }
.checkout-option strong,
.checkout-option small,
.checkout-option em { display: block; }
.checkout-option small { margin-top: 4px; color: var(--checkout-muted); line-height: 1.45; }
.checkout-option em { margin-top: 8px; color: var(--checkout-green); font-size: 0.8rem; font-style: normal; font-weight: 800; line-height: 1.5; }
.checkout-option b { white-space: nowrap; }
.checkout-payment-option { grid-template-columns: 22px 1fr; }
.checkout-prototype-note { margin: 14px 0 0; padding: 12px 14px; border-left: 3px solid var(--checkout-gold); color: var(--checkout-muted); background: #fff2d1; font-size: 0.82rem; line-height: 1.5; }

.checkout-summary { position: sticky; top: 94px; padding: 26px; }
.checkout-summary > p { margin: 0; color: var(--checkout-red); font-size: 0.74rem; font-weight: 900; text-transform: uppercase; }
.checkout-summary > h2 { margin: 4px 0 20px; font-size: 1.65rem; }
.checkout-summary-items { display: grid; gap: 14px; padding-bottom: 18px; border-bottom: 1px solid rgba(105, 65, 30, 0.16); }
.checkout-summary-items article { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 12px; align-items: center; }
.checkout-summary-items img { width: 64px; height: 56px; object-fit: contain; background: #fff2d6; }
.checkout-summary-items strong,
.checkout-summary-items span { display: block; }
.checkout-summary-items span { margin-top: 3px; color: var(--checkout-muted); font-size: 0.78rem; }
.checkout-summary-items b { grid-column: 2; color: var(--checkout-ink); font-size: 0.82rem; }
.checkout-summary dl { margin: 18px 0 0; }
.checkout-summary dl div { display: flex; justify-content: space-between; gap: 16px; padding: 7px 0; }
.checkout-summary dt { color: var(--checkout-muted); }
.checkout-summary dd { margin: 0; text-align: right; font-weight: 700; }
.checkout-total { display: flex; justify-content: space-between; gap: 16px; align-items: flex-end; margin-top: 16px; padding-top: 18px; border-top: 1px solid rgba(105, 65, 30, 0.17); }
.checkout-total span { color: var(--checkout-muted); }
.checkout-total strong { font-size: 1.4rem; }
.checkout-consent { display: grid; grid-template-columns: 20px 1fr; gap: 10px; align-items: start; margin-top: 20px; font-size: 0.78rem; line-height: 1.5; cursor: pointer; }
.checkout-consent input { width: 18px; height: 18px; margin: 2px 0 0; accent-color: var(--checkout-red); }
.checkout-submit { width: 100%; min-height: 50px; margin-top: 12px; border: 0; border-radius: 6px; display: flex; justify-content: center; align-items: center; gap: 9px; color: #fff; background: var(--checkout-red); font: inherit; font-weight: 900; cursor: pointer; }
.checkout-submit:hover { background: var(--checkout-red-dark); }
.checkout-submit:focus-visible { outline: 3px solid rgba(223, 151, 28, 0.45); outline-offset: 2px; }
.checkout-submit-status { min-height: 20px; margin: 10px 0 0; color: var(--checkout-red); font-size: 0.8rem; font-weight: 700; }
.checkout-safety { display: block; margin-top: 14px; color: var(--checkout-muted); line-height: 1.45; }

.checkout-empty { padding: 58px 24px; text-align: center; }
.checkout-empty h2 { margin: 0 0 8px; }
.checkout-empty p { margin: 0 0 22px; color: var(--checkout-muted); }
.checkout-empty a { display: inline-flex; min-height: 46px; padding: 0 18px; align-items: center; border-radius: 6px; color: #fff; background: var(--checkout-red); text-decoration: none; font-weight: 900; }

.payment-shell { width: min(760px, 100%); margin: 0 auto; }
.payment-card { overflow: hidden; }
.payment-status-banner { padding: 30px; color: #684909; background: #fff0bc; text-align: center; }
.payment-status-banner span { display: block; font-size: 0.75rem; font-weight: 900; text-transform: uppercase; }
.payment-status-banner h1 { margin: 7px 0 5px; font-size: clamp(2rem, 5vw, 3.5rem); }
.payment-status-banner p { margin: 0; }
.payment-card-body { padding: 32px; }
.payment-order-id { display: flex; justify-content: space-between; gap: 16px; padding-bottom: 18px; border-bottom: 1px solid rgba(105, 65, 30, 0.16); }
.payment-order-id span { color: var(--checkout-muted); }
.payment-bank { display: grid; grid-template-columns: 1fr auto; gap: 22px; margin-top: 22px; padding: 22px; background: #fff4dc; }
.payment-bank dl { margin: 0; }
.payment-bank div { margin-bottom: 14px; }
.payment-bank div:last-child { margin-bottom: 0; }
.payment-bank dt { color: var(--checkout-muted); font-size: 0.76rem; }
.payment-bank dd { margin: 4px 0 0; font-weight: 800; }
.payment-bank .payment-account-number { font-size: 1.5rem; letter-spacing: 0.04em; }
.payment-copy { align-self: center; min-height: 42px; padding: 0 14px; border: 1px solid var(--checkout-red); border-radius: 6px; color: var(--checkout-red); background: #fff; font: inherit; font-weight: 800; cursor: pointer; }
.payment-total-box { display: flex; justify-content: space-between; gap: 20px; align-items: flex-end; margin-top: 20px; padding: 20px 22px; color: #fff; background: var(--checkout-red); }
.payment-total-box span,
.payment-total-box small { display: block; }
.payment-total-box small { margin-top: 5px; opacity: 0.85; }
.payment-total-box strong { font-size: 1.8rem; white-space: nowrap; }
.payment-order-items,
.payment-shipping-status { margin-top: 22px; padding: 18px; border: 1px solid rgba(105, 65, 30, 0.16); border-radius: 6px; background: #fffdf8; }
.payment-order-items h2,
.payment-shipping-status h2 { margin: 0 0 12px; font-size: 1.05rem; }
.payment-order-items article { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; padding: 9px 0; border-bottom: 1px dashed rgba(105, 65, 30, 0.16); }
.payment-order-items article:last-child { border-bottom: 0; }
.payment-order-items article span { color: var(--checkout-muted); }
.payment-shipping-status p { margin: 5px 0; }
.payment-shipping-status a { display: inline-block; margin-top: 8px; color: var(--checkout-red); font-weight: 800; }
.payment-status-banner small { display: block; margin-top: 7px; color: rgba(104, 73, 9, .72); }
.payment-steps { margin: 26px 0 0; padding-left: 21px; color: var(--checkout-muted); line-height: 1.7; }
.payment-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 24px; }
.payment-actions button,
.payment-actions a { min-height: 46px; padding: 0 17px; border-radius: 6px; display: inline-flex; align-items: center; justify-content: center; color: #fff; background: var(--checkout-green); font: inherit; font-weight: 900; text-decoration: none; cursor: pointer; }
.payment-actions button { border: 0; }
.payment-actions a.secondary { color: var(--checkout-red); background: #fff; border: 1px solid var(--checkout-red); }
.payment-message { min-height: 20px; margin: 10px 0 0; color: var(--checkout-green); font-size: 0.82rem; font-weight: 700; }
.payment-demo-warning { margin-top: 24px; padding: 14px; border-left: 3px solid var(--checkout-gold); color: var(--checkout-muted); background: #fff2d1; line-height: 1.5; }

@media (max-width: 920px) {
  .checkout-layout { grid-template-columns: 1fr; }
  .checkout-summary { position: static; }
}

@media (max-width: 600px) {
  .checkout-page,
  .payment-page { padding: 20px 14px 54px; }
  .checkout-header { margin-bottom: 24px; }
  .checkout-panel { padding: 22px 18px; }
  .checkout-fields { grid-template-columns: 1fr; gap: 13px; }
  .checkout-field-wide { grid-column: auto; }
  .checkout-summary { padding: 22px 18px; }
  .checkout-option { grid-template-columns: 22px minmax(0, 1fr); }
  .checkout-option > b { grid-column: 2; }
  .payment-card-body { padding: 22px 18px; }
  .payment-bank { grid-template-columns: 1fr; padding: 18px; }
  .payment-copy { justify-self: start; }
  .payment-total-box { align-items: flex-start; flex-direction: column; }
  .payment-actions > * { width: 100%; }
}