/* checkout.css — Robot Car Bootcamp checkout + confirmation */
.co-wrap { max-width: 1080px; margin: 0 auto; padding: 0 40px; }
.co-grid { display: grid; grid-template-columns: 1.35fr 0.85fr; gap: 40px; align-items: start; }
@media (max-width: 900px) { .co-grid { grid-template-columns: 1fr; } }

.co-steps { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 34px; }
.co-step { display: inline-flex; align-items: center; gap: 9px; font-family: var(--font-family-mono); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--fg-muted); }
.co-step b { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 50%; background: var(--bg-raised); color: var(--fg-secondary); font-family: var(--font-family-display); font-size: 12px; font-weight: 600; }
.co-step.is-on { color: var(--fg-strong); }
.co-step.is-on b { background: var(--blue); color: #fff; }
.co-step .material-symbols-rounded { font-size: 16px; color: var(--border-strong); }

.co-card { background: var(--card-bg); border: 1px solid var(--card-border); border-radius: var(--card-radius); padding: 30px 32px; }
.co-card + .co-card { margin-top: 20px; }
.co-card h3 { font-family: var(--font-family-display); font-weight: 600; font-size: 19px; letter-spacing: -0.02em; color: var(--fg-strong); margin: 0 0 4px; }
.co-card .co-hint { margin: 0 0 22px; font-size: 13.5px; line-height: 1.55; color: var(--fg-secondary); }

.co-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.co-fields .co-full { grid-column: 1 / -1; }
@media (max-width: 620px) { .co-fields { grid-template-columns: 1fr; } }
.co-field { display: flex; flex-direction: column; gap: 7px; min-width: 0; }
.co-field label { font-family: var(--font-family-mono); font-size: 10.5px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--fg-secondary); }
.co-field label .req { color: var(--color-orange-500); }
.co-field input, .co-field select, .co-field textarea {
  font-family: var(--font-family-sans); font-size: 15px; color: var(--fg-strong);
  background: #fff; border: 1.5px solid var(--border-subtle); border-radius: 10px; padding: 13px 14px; width: 100%; box-sizing: border-box;
  transition: border-color .15s, box-shadow .15s;
}
.co-field textarea { min-height: 86px; resize: vertical; }
.co-field input:focus, .co-field select:focus, .co-field textarea:focus { outline: none; border-color: var(--cyan-deep); box-shadow: 0 0 0 3px rgba(0,153,194,0.14); }
.co-field input[aria-invalid="true"], .co-field select[aria-invalid="true"] { border-color: var(--color-orange-500); }
.co-err { font-size: 12px; color: var(--color-orange-700); display: none; }
.co-field.is-bad .co-err { display: block; }

.co-check { display: flex; align-items: flex-start; gap: 12px; font-size: 14px; line-height: 1.55; color: var(--fg-secondary); }
.co-check + .co-check { margin-top: 14px; }
.co-check input { flex: none; width: 20px; height: 20px; margin: 1px 0 0; accent-color: var(--blue); }
.co-check strong { color: var(--fg-strong); font-weight: 600; }

.co-seats { display: flex; align-items: center; gap: 10px; }
.co-seatbtn { width: 44px; height: 44px; border-radius: 10px; border: 1.5px solid var(--border-subtle); background: #fff; color: var(--fg-strong); font-size: 20px; line-height: 1; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; transition: border-color .15s, background .15s; }
.co-seatbtn:hover:not(:disabled) { border-color: var(--cyan-deep); background: var(--bg-accent-soft); }
.co-seatbtn:disabled { opacity: .4; cursor: not-allowed; }
.co-seatnum { font-family: var(--font-family-display); font-weight: 600; font-size: 22px; color: var(--fg-strong); min-width: 34px; text-align: center; }
.co-seatnote { font-size: 13px; color: var(--fg-secondary); }

/* summary rail */
.co-sum { position: sticky; top: 24px; background: var(--card-bg); border: 1px solid var(--card-border); border-radius: var(--card-radius); overflow: hidden; }
.co-sum__head { padding: 24px 26px; background: linear-gradient(135deg, var(--bg-accent-soft), #FFFFFF); border-bottom: 1px solid var(--border-subtle); }
.co-sum__eyebrow { font-family: var(--font-family-mono); font-size: 10.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--cyan-deep); margin: 0 0 8px; }
.co-sum__date { font-family: var(--font-family-display); font-weight: 600; font-size: 24px; letter-spacing: -0.025em; color: var(--fg-strong); margin: 0; line-height: 1.15; }
.co-sum__sub { font-family: var(--font-family-mono); font-size: 11px; letter-spacing: 0.04em; color: var(--fg-muted); margin: 8px 0 0; }
.co-sum__body { padding: 22px 26px 26px; }
.co-line { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; font-size: 14.5px; color: var(--fg-secondary); padding: 9px 0; }
.co-line span:last-child { font-family: var(--font-family-mono); color: var(--fg-strong); white-space: nowrap; }
.co-line.co-line--save span:last-child, .co-line.co-line--save { color: var(--cyan-deep); }
.co-line.co-total { border-top: 1px solid var(--border-subtle); margin-top: 10px; padding-top: 16px; font-family: var(--font-family-display); font-size: 17px; font-weight: 600; color: var(--fg-strong); }
.co-line.co-total span:last-child { font-family: var(--font-family-display); font-size: 26px; letter-spacing: -0.03em; }
.co-seatsleft { display: inline-flex; align-items: center; gap: 7px; font-family: var(--font-family-mono); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; padding: 7px 12px; border-radius: var(--radius-pill); background: var(--bg-accent-soft); color: var(--cyan-deep); margin-top: 14px; }
.co-seatsleft.is-low { background: #FFF1E6; color: var(--color-orange-700); }
.co-incl { list-style: none; margin: 20px 0 0; padding: 18px 0 0; border-top: 1px solid var(--border-subtle); display: flex; flex-direction: column; gap: 10px; }
.co-incl li { display: flex; align-items: flex-start; gap: 10px; font-size: 13.5px; line-height: 1.5; color: var(--fg-secondary); }
.co-incl .material-symbols-rounded { font-size: 18px; color: var(--cyan-deep); flex: none; }

.co-pay { margin-top: 22px; padding-top: 22px; border-top: 1px solid var(--border-subtle); }
.co-paypal { min-height: 52px; }
.co-paypal-placeholder { border: 1.5px dashed var(--border-strong); border-radius: 12px; padding: 22px; text-align: center; }
.co-paypal-placeholder p { margin: 0; font-size: 13px; line-height: 1.6; color: var(--fg-secondary); }
.co-paypal-placeholder strong { display: block; font-family: var(--font-family-display); font-size: 15px; color: var(--fg-strong); margin-bottom: 6px; }
.co-blocked { font-size: 13px; color: var(--fg-muted); margin: 12px 0 0; text-align: center; }
.co-secure { display: flex; align-items: center; justify-content: center; gap: 7px; margin-top: 16px; font-family: var(--font-family-mono); font-size: 10.5px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--fg-muted); }
.co-secure .material-symbols-rounded { font-size: 15px; }
.co-policy { margin: 18px 0 0; font-size: 12.5px; line-height: 1.6; color: var(--fg-muted); }

/* terms link + modal */
.co-termslink { color: var(--blue); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; background: none; border: 0; padding: 0; font: inherit; font-weight: 600; cursor: pointer; }
.co-termslink:hover { color: var(--blue-deep); }
.co-modal[hidden] { display: none; }
.co-modal { position: fixed; inset: 0; z-index: 400; display: grid; place-items: center; padding: 24px; background: rgba(8,22,36,0.55); backdrop-filter: blur(3px); }
.co-modal__box { background: #fff; border-radius: var(--radius-xl); width: min(680px, 100%); max-height: min(80vh, 760px); display: flex; flex-direction: column; box-shadow: 0 40px 90px -30px rgba(2,20,36,0.6); }
.co-modal__head { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 22px 26px; border-bottom: 1px solid var(--border-subtle); }
.co-modal__head h2 { font-family: var(--font-family-display); font-size: 21px; font-weight: 600; letter-spacing: -0.01em; color: var(--fg-strong); margin: 0; }
.co-modal__x { flex: none; width: 38px; height: 38px; display: grid; place-items: center; border-radius: 50%; border: 1px solid var(--card-border); background: #fff; color: var(--fg-secondary); cursor: pointer; }
.co-modal__x:hover { background: var(--bg-canvas); color: var(--fg-strong); }
.co-modal__body { padding: 22px 26px 26px; overflow-y: auto; }
.co-modal__body h3 { font-family: var(--font-family-display); font-size: 15px; font-weight: 600; letter-spacing: -0.005em; color: var(--fg-strong); margin: 22px 0 7px; }
.co-modal__body h3:first-child { margin-top: 0; }
.co-modal__body p { margin: 0; font-size: 14px; line-height: 1.65; color: var(--fg-secondary); }
.co-modal__foot { padding: 16px 26px 22px; border-top: 1px solid var(--border-subtle); display: flex; justify-content: flex-end; }

/* confirmation */
.cf-hero { text-align: center; max-width: 660px; margin: 0 auto; }
.cf-tick { width: 74px; height: 74px; border-radius: 50%; background: var(--bg-accent-soft); color: var(--cyan-deep); display: flex; align-items: center; justify-content: center; margin: 0 auto 26px; }
.cf-hero .eyebrow { display: flex; justify-content: center; }
.cf-tick .material-symbols-rounded { font-size: 40px; }
.cf-ref { display: inline-flex; align-items: center; gap: 10px; font-family: var(--font-family-mono); font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--fg-secondary); background: var(--bg-raised); border-radius: var(--radius-pill); padding: 10px 18px; margin-top: 22px; }
.cf-ref b { color: var(--fg-strong); letter-spacing: 0.06em; }
.cf-panel { margin-top: 44px; }
.cf-panel .co-sum { position: static; }
.cf-panel .co-policy { margin-top: 20px; }