/*
 * Booking
 * The checkout and booking pages, including route options (tolls) and the route map.
 */

/* Checkout and booking pages */
.checkout { display: grid; gap: 1.25rem; }
.checkout-block { padding: 1.25rem 1.5rem; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius); }
.checkout-block h2 { font-size: 1.05rem; margin-bottom: 1rem; }
.checkout-grid-fields { display: grid; grid-template-columns: 1fr 1fr; gap: .85rem; margin-bottom: .85rem; }
.checkout-field { display: grid; gap: .3rem; font-size: .85rem; font-weight: 600; color: var(--gray-700); }
.checkout-field small { font-weight: 400; color: var(--color-text-muted); }
.checkout-field input, .checkout-field textarea { width: 100%; padding: .7rem .85rem; border: 1px solid var(--gray-300); border-radius: var(--radius); font: inherit; font-weight: 400; color: var(--color-text); background: var(--color-surface); }
.checkout-field input:focus, .checkout-field textarea:focus { outline: 3px solid color-mix(in srgb, var(--blue) 30%, transparent); border-color: var(--blue); }
.checkout-field.has-error input, .checkout-terms.has-error { border-color: var(--red); }
.extras-list { display: grid; gap: .6rem; }
.extra-row { display: grid; grid-template-columns: auto 1fr auto auto; align-items: center; gap: .85rem; padding: .65rem .85rem; border: 1px solid var(--color-border); border-radius: var(--radius); }
.extra-icon { color: var(--green); }
.extra-info { display: grid; gap: .1rem; }
.extra-info small, .extra-price small { color: var(--color-text-muted); font-weight: 400; }
.extra-price { font-weight: 700; white-space: nowrap; }
.extra-control { width: 1.2rem; height: 1.2rem; accent-color: var(--green); }
select.extra-control { width: auto; height: auto; padding: .3rem .5rem; border: 1px solid var(--gray-300); border-radius: var(--radius); }
.payment-options { display: grid; gap: .6rem; }
.payment-option { display: flex; align-items: flex-start; gap: .75rem; padding: .85rem 1rem; border: 1px solid var(--color-border); border-radius: var(--radius); cursor: pointer; }
.payment-option:has(input:checked) { border-color: var(--green); background: color-mix(in srgb, var(--green) 6%, white); }
.payment-option span { display: grid; gap: .15rem; }
.payment-option small { color: var(--color-text-muted); }
.checkout-terms { display: flex; align-items: flex-start; gap: .6rem; font-size: .9rem; }
.checkout-terms a { color: var(--blue); text-decoration: underline; }
.checkout-total { display: flex; justify-content: space-between; align-items: baseline; padding: 1rem 1.25rem; background: var(--color-surface-alt); border-radius: var(--radius); font-weight: 700; }
.checkout-total strong { font-size: 1.6rem; }
.checkout-submit { justify-self: stretch; }
.checkout-layout { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 1.5rem; align-items: start; }
.checkout-layout .summary-card { position: sticky; top: 1rem; }
.booking-banner { display: flex; gap: 1rem; align-items: center; padding: 1.25rem 1.5rem; margin-bottom: 1.5rem; border-radius: var(--radius); background: color-mix(in srgb, var(--blue) 8%, white); color: var(--color-text); }
.booking-banner h1 { font-size: 1.4rem; margin: 0 0 .25rem; }
.booking-banner p { margin: 0; }
.booking-banner-confirmed, .booking-banner-completed { background: color-mix(in srgb, var(--green) 10%, white); }
.booking-banner-cancelled { background: var(--color-danger-bg); }
.booking-contact { margin-top: 2rem; padding-top: 1.25rem; border-top: 1px solid var(--color-border); }
@media (max-width: 760px) {
    .checkout-grid-fields, .checkout-layout { grid-template-columns: 1fr; }
    .extra-row { grid-template-columns: auto 1fr auto; }
    .extra-row .extra-control { grid-column: 3; }
    .checkout-layout .summary-card { position: static; }
}
.card-expiry { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; }
.checkout-block .checkout-field + .checkout-field, .checkout-block .checkout-field + .checkout-grid-fields { margin-top: .85rem; }
.checkout-grid-fields { align-items: end; }

/* Route options (tolls) */
.route-note { margin: 0 0 .75rem; font-size: .9rem; font-weight: 600; color: var(--gray-700); }
.route-options .payment-option small { display: block; }
.route-map-card { margin-bottom: 1rem; border: 1px solid var(--gray-100); border-radius: var(--radius); overflow: hidden; }
.route-map-card .results-map { border-radius: 0; }