/* ==========================================================================
   TOP-TRIP — Booking flow (route → vehicle → details → payment)
   Element IDs/classes are the ones used by route-selection.js,
   booking-popup.js, booking-stops.js, booking-service-area.js and the
   payment scripts. Do not rename them.
   ========================================================================== */

.booking-body { overflow-x: hidden; }
.bk-main { position: relative; height: 100svh; min-height: 680px; padding-top: var(--tt-header-h); }

/* ---------- Left panel ---------- */
.bk-panel {
    position: absolute; z-index: 1200;
    top: calc(var(--tt-header-h) + 20px); left: 20px; bottom: 20px;
    width: min(440px, calc(100% - 40px));
    padding: 26px 24px 20px;
    overflow-y: auto; overscroll-behavior: contain;
    background: rgba(9, 12, 15, .95);
    border: 1px solid var(--tt-gold-line); border-radius: var(--tt-radius-lg);
    box-shadow: var(--tt-shadow);
    backdrop-filter: blur(14px);
    scrollbar-width: thin; scrollbar-color: var(--tt-gold-dark) transparent;
}
.bk-panel-head h1 { font-size: 30px; }
.bk-panel-head .tt-kicker { margin-bottom: 10px; }
.bk-steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin: 20px 0 24px; padding: 0; list-style: none; }
.bk-steps li { display: flex; flex-direction: column; align-items: flex-start; gap: 7px; padding-top: 10px; border-top: 2px solid var(--tt-line-2); color: var(--tt-muted); font-size: 12px; font-weight: 600; }
.bk-steps li span { display: none; }
.bk-steps li em { font-style: normal; }
.bk-steps li.active { border-color: var(--tt-gold); color: var(--tt-gold-light); }
.bk-steps li.done { border-color: var(--tt-gold-dark); color: var(--tt-text-2); }

/* ---------- Inputs ---------- */
.route-input-group { position: relative; min-width: 0; }
.route-input-group + .route-input-group { margin-top: 16px; }
.route-input-group > label { display: block; margin-bottom: 7px; color: var(--tt-text-2); font-size: 13px; font-weight: 600; }
.route-input-wrapper { position: relative; }
.route-input-wrapper input {
    width: 100%; height: 50px; padding: 0 44px 0 40px;
    color: var(--tt-text); background: var(--tt-input);
    border: 1px solid var(--tt-line-2); border-radius: var(--tt-radius);
    outline: none; font-size: 15px; color-scheme: dark;
    transition: border-color .2s ease, box-shadow .2s ease;
}
.route-input-wrapper input::placeholder { color: #5f656c; }
.route-input-wrapper input:focus { border-color: var(--tt-gold); box-shadow: 0 0 0 3px rgba(212, 168, 67, .15); }
.route-date-time-wrapper > i { position: absolute; left: 15px; top: 50%; transform: translateY(-50%); color: var(--tt-gold); pointer-events: none; }
.route-date-time-wrapper input { padding-right: 12px; }
.route-point-dot { position: absolute; left: 16px; top: 50%; z-index: 2; width: 10px; height: 10px; border-radius: 50%; transform: translateY(-50%); pointer-events: none; }
.pickup-dot { background: #3cc47c; box-shadow: 0 0 0 4px rgba(60, 196, 124, .18); }
.destination-dot { background: #ec5f67; box-shadow: 0 0 0 4px rgba(236, 95, 103, .18); }
.stop-dot { background: var(--tt-gold) !important; box-shadow: 0 0 0 4px rgba(212, 168, 67, .2); }
.route-clear-button { position: absolute; right: 7px; top: 50%; transform: translateY(-50%); width: 34px; height: 34px; border: 0; border-radius: 9px; background: transparent; color: var(--tt-muted); }
.route-clear-button:hover { color: var(--tt-text); background: rgba(255, 255, 255, .06); }
.route-field-help { display: block; margin-top: 6px; color: var(--tt-muted); font-size: 12px; line-height: 1.45; }
.route-input-line { height: 22px; margin: 4px 0 0 20px; border-left: 2px dotted var(--tt-line-2); }
.route-date-time-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 18px; }
.route-date-time-grid .route-input-group + .route-input-group { margin-top: 0; }

/* Suggestions (created by route-selection.js / booking.js) */
.route-suggestions {
    position: absolute; left: 0; right: 0; top: calc(100% + 6px); z-index: 4000;
    display: none; max-height: 260px; overflow-y: auto;
    background: #0f1317; border: 1px solid var(--tt-gold-line); border-radius: var(--tt-radius);
    box-shadow: 0 18px 40px rgba(0, 0, 0, .6);
}
.route-suggestions.visible { display: block; }
.route-suggestions button, .route-suggestion-button, .location-suggestion-item {
    display: block; width: 100%; padding: 12px 14px;
    color: var(--tt-text); text-align: left; background: transparent;
    border: 0; border-bottom: 1px solid var(--tt-line);
}
.route-suggestions button:last-child { border-bottom: 0; }
.route-suggestions button:hover, .route-suggestions button:focus-visible { background: var(--tt-gold-soft); outline: none; }
.route-suggestion-main, .suggestion-primary { display: block; font-weight: 600; font-size: 14px; }
.route-suggestion-secondary, .suggestion-secondary { display: block; margin-top: 3px; color: var(--tt-muted); font-size: 12px; }
.route-suggestion-message, .location-suggestion-message { padding: 13px 14px; color: var(--tt-muted); font-size: 13px; }

/* Map mode */
.route-map-mode { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 20px; }
.route-mode-button {
    position: relative; display: flex; align-items: center; justify-content: center; gap: 8px;
    min-height: 46px; padding: 8px 10px;
    color: var(--tt-text-2); background: var(--tt-surface);
    border: 1px solid var(--tt-line-2); border-radius: var(--tt-radius);
    font-size: 13px; font-weight: 600;
    transition: .2s ease;
}
.route-mode-button .route-point-dot { position: static; transform: none; }
.route-mode-button:hover { border-color: var(--tt-gold-line); color: var(--tt-text); }
.route-mode-button.active { color: var(--tt-gold-light); border-color: var(--tt-gold); background: var(--tt-gold-soft); }
.route-status { margin-top: 14px; color: var(--tt-muted); font-size: 12px; text-align: center; }

/* Additional stops (booking-stops.js) */
.booking-stops-area { display: grid; gap: 10px; margin-top: 12px; }
.booking-stop-row { display: grid; grid-template-columns: minmax(0, 1fr) 96px; gap: 10px; align-items: end; }
.booking-stop-address, .booking-stop-wait { position: relative; min-width: 0; }
.booking-stop-address > label, .booking-stop-wait > label { display: block; margin: 0 0 6px; color: var(--tt-gold-light); font-size: 12px; font-weight: 600; }
.booking-stop-wait-box { display: flex; align-items: center; height: 50px; padding: 0 10px; background: var(--tt-input); border: 1px solid var(--tt-line-2); border-radius: var(--tt-radius); }
.booking-stop-wait-box input { width: 46px; border: 0; outline: 0; background: transparent; color: var(--tt-text); font-weight: 700; }
.booking-stop-wait-box span { color: var(--tt-muted); font-size: 12px; }
.booking-stop-wait small { display: block; margin-top: 4px; color: var(--tt-muted); font-size: 10px; }
.booking-stop-suggestions { z-index: 4100; }
.booking-stop-actions { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 10px; }
.booking-stop-actions:has(#addStopButton[hidden]):has(#bookingStopSummary:empty) { display: none; }
.booking-stop-add { display: inline-flex; align-items: center; gap: 7px; padding: 8px 12px; color: var(--tt-gold-light); background: var(--tt-gold-soft); border: 1px dashed var(--tt-gold-line); border-radius: var(--tt-radius-sm); font-size: 13px; font-weight: 600; }
.booking-stop-summary { color: var(--tt-muted); font-size: 12px; text-align: right; }

/* ---------- Map ---------- */
.route-map-section { position: absolute; inset: var(--tt-header-h) 0 0 0; background: #0d1013; }
.route-full-map { width: 100%; height: 100%; background: #12161a; }
.route-map-tip {
    position: absolute; z-index: 1000; top: 20px; left: calc(50% + 230px); transform: translateX(-50%);
    max-width: calc(100% - 520px); padding: 10px 18px;
    color: var(--tt-text); background: rgba(7, 9, 11, .88);
    border: 1px solid var(--tt-gold-line); border-radius: 999px;
    font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; pointer-events: none;
    box-shadow: var(--tt-shadow-sm);
}
.leaflet-container { font-family: var(--tt-font-body); }
.leaflet-control-zoom { border: 0 !important; box-shadow: var(--tt-shadow-sm) !important; margin: 20px 20px 0 0 !important; }
.leaflet-control-zoom a { color: var(--tt-gold-light) !important; background: #0f1317 !important; border-color: var(--tt-line-2) !important; }
.leaflet-popup-content-wrapper, .leaflet-popup-tip { color: var(--tt-text); background: #0f1317; }

/* Result + CTA */
.bk-summary {
    position: absolute; z-index: 1100; right: 20px; bottom: 20px;
    width: min(360px, calc(100% - 500px)); min-width: 300px;
    padding: 16px; display: grid; gap: 12px;
    background: rgba(9, 12, 15, .95); border: 1px solid var(--tt-gold-line); border-radius: var(--tt-radius-lg);
    box-shadow: var(--tt-shadow); backdrop-filter: blur(12px);
}
.route-result-card { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.route-result-item { display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; column-gap: 10px; padding: 12px; background: var(--tt-surface); border: 1px solid var(--tt-line); border-radius: var(--tt-radius); }
.route-result-item i { grid-row: span 2; align-self: center; color: var(--tt-gold); }
.route-result-item span { color: var(--tt-muted); font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; }
.route-result-item strong { font-family: var(--tt-font-head); font-size: 18px; color: var(--tt-text); }
.route-message { min-height: 0; color: var(--tt-red); font-size: 13px; text-align: center; }
.route-message:empty { display: none; }
.route-message.success { color: var(--tt-green); }
.route-next-button {
    width: 100%; min-height: 54px;
    color: #111; background: var(--tt-gold-gradient);
    border: 0; border-radius: var(--tt-radius);
    font-family: var(--tt-font-head); font-size: 15px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
    box-shadow: 0 10px 28px rgba(212, 168, 67, .25);
    transition: transform .2s ease, box-shadow .2s ease, filter .2s ease;
}
.route-next-button:hover:not(:disabled) { transform: translateY(-2px); box-shadow: 0 14px 34px rgba(212, 168, 67, .38); }
.route-next-button:disabled { cursor: not-allowed; filter: grayscale(.85); opacity: .45; box-shadow: none; }

/* Service area alert (booking-service-area.js) */
.service-area-alert {
    position: absolute; z-index: 2200; right: 20px; bottom: 200px;
    width: min(420px, calc(100% - 40px));
    padding: 18px 18px 16px 66px;
    color: var(--tt-text); background: #1a0f11;
    border: 1px solid rgba(236, 95, 103, .6); border-radius: var(--tt-radius-lg);
    box-shadow: var(--tt-shadow);
}
.service-area-alert[hidden] { display: none !important; }
.service-area-alert-icon { position: absolute; left: 18px; top: 18px; width: 34px; height: 34px; display: grid; place-items: center; border-radius: 50%; color: #fff; background: var(--tt-red); font-weight: 900; }
.service-area-alert-close { position: absolute; right: 8px; top: 8px; width: 32px; height: 32px; border: 0; border-radius: 8px; color: var(--tt-muted); background: transparent; font-size: 22px; line-height: 1; }
.service-area-alert h3 { margin: 0 30px 6px 0; color: #ff9ca2; font-size: 16px; }
.service-area-alert p { margin: 0 0 14px; color: var(--tt-text-2); font-size: 14px; line-height: 1.5; }
.service-area-alert-ok { width: 100%; min-height: 44px; border: 0; border-radius: var(--tt-radius-sm); color: #fff; background: #b8323a; font-weight: 700; }

/* ==========================================================================
   Vehicle + customer modal
   ========================================================================== */
body.booking-modal-open, body.payment-modal-open { overflow: hidden; }
.booking-modal { position: fixed; inset: 0; z-index: 10000; display: flex; align-items: flex-start; justify-content: center; padding: 24px; overflow-y: auto; }
.booking-modal[hidden] { display: none !important; }
.booking-modal-backdrop, .payment-modal-backdrop { position: fixed; inset: 0; background: rgba(2, 3, 4, .82); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.booking-modal-content {
    position: relative; z-index: 1; width: min(1100px, 100%); margin: auto;
    overflow: hidden; color: var(--tt-text);
    background: var(--tt-bg-2); border: 1px solid var(--tt-gold-line); border-radius: var(--tt-radius-xl);
    box-shadow: 0 30px 90px rgba(0, 0, 0, .7);
    animation: tt-pop .25s ease;
}
@keyframes tt-pop { from { opacity: 0; transform: translateY(14px) scale(.985); } to { opacity: 1; transform: none; } }
.booking-modal-header {
    display: flex; align-items: flex-start; justify-content: space-between; gap: 20px;
    padding: 26px 28px;
    background: radial-gradient(ellipse at 100% 0%, rgba(212, 168, 67, .16), transparent 55%), linear-gradient(135deg, #0f1317, #0a0d10);
    border-bottom: 1px solid var(--tt-gold-line);
}
.booking-modal-kicker { margin-bottom: 6px; color: var(--tt-gold-light); font-size: 12px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; }
.booking-modal-header h2 { font-size: clamp(24px, 3vw, 32px); margin-bottom: 8px; }
.booking-modal-header p { max-width: 720px; color: var(--tt-text-2); font-size: 14px; }
.booking-modal-close, .payment-modal-close {
    flex: 0 0 auto; width: 42px; height: 42px;
    color: var(--tt-text); background: rgba(255, 255, 255, .06);
    border: 1px solid var(--tt-line-2); border-radius: 50%; font-size: 17px;
    transition: .2s ease;
}
.booking-modal-close:hover, .payment-modal-close:hover { color: #111; background: var(--tt-gold); border-color: var(--tt-gold); }
.booking-modal-body { display: grid; gap: 18px; padding: 24px 28px 30px; }
.booking-trip-summary, .booking-vehicle-section, .booking-customer-section { padding: 22px; background: var(--tt-surface); border: 1px solid var(--tt-line); border-radius: var(--tt-radius-lg); }
.booking-summary-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.booking-summary-item { min-width: 0; padding: 12px 14px; background: var(--tt-bg-2); border: 1px solid var(--tt-line); border-radius: var(--tt-radius); }
.booking-summary-item.wide { grid-column: span 2; }
.booking-summary-item span { display: flex; align-items: center; gap: 7px; margin-bottom: 4px; color: var(--tt-muted); font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; }
.booking-summary-item span em { font-style: normal; }
.booking-summary-item .pickup-c { color: var(--tt-green); font-size: 8px; }
.booking-summary-item .dest-c { color: var(--tt-red); }
.booking-summary-item strong { display: block; font-size: 14px; font-weight: 600; overflow-wrap: anywhere; }
.booking-section-heading { margin-bottom: 18px; }
.booking-section-heading-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.booking-section-heading h3 { display: flex; align-items: center; gap: 12px; font-size: 20px; }
.booking-section-heading p { margin-top: 6px; color: var(--tt-text-2); font-size: 14px; }
.bm-no { width: 30px; height: 30px; display: grid; place-items: center; border-radius: 50%; color: #111; background: var(--tt-gold-gradient); font-size: 14px; font-weight: 800; }
.booking-availability-count { flex: 0 0 auto; padding: 7px 13px; color: var(--tt-gold-light); background: var(--tt-gold-soft); border: 1px solid var(--tt-gold-line); border-radius: 999px; font-size: 12px; font-weight: 600; }

.booking-loading-state, .booking-empty-state { padding: 34px 20px; text-align: center; color: var(--tt-text-2); background: var(--tt-bg-2); border: 1px dashed var(--tt-line-2); border-radius: var(--tt-radius); }
.booking-loading-state[hidden], .booking-empty-state[hidden] { display: none !important; }
.booking-empty-state i { margin-bottom: 12px; color: var(--tt-gold); font-size: 30px; }
.booking-empty-state h4 { margin-bottom: 6px; color: var(--tt-text); font-size: 17px; }
.booking-spinner { display: inline-block; width: 30px; height: 30px; margin-bottom: 12px; border: 3px solid rgba(255, 255, 255, .1); border-top-color: var(--tt-gold); border-radius: 50%; animation: tt-spin .8s linear infinite; }

/* Vehicle cards (created by booking-popup.js) */
.booking-vehicle-grid, #availableVehicleList { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 16px; }
.booking-vehicle-card { position: relative; min-width: 0; overflow: hidden; background: var(--tt-bg-2); border: 1px solid var(--tt-line-2); border-radius: var(--tt-radius-lg); transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease; }
.booking-vehicle-card:hover { transform: translateY(-3px); border-color: var(--tt-gold-line); }
.booking-vehicle-card.selected { border-color: var(--tt-gold); box-shadow: 0 0 0 1px var(--tt-gold), 0 14px 34px rgba(212, 168, 67, .18); }
.booking-vehicle-card.selected::after { content: "\2713"; position: absolute; top: 12px; right: 12px; width: 30px; height: 30px; display: grid; place-items: center; color: #111; background: var(--tt-gold-gradient); border-radius: 50%; font-weight: 800; }
.booking-vehicle-image-frame { position: relative; height: 180px; overflow: hidden; background: radial-gradient(circle at 50% 40%, #232a31, #0b0e11); }
.booking-vehicle-image-frame img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; }
.booking-vehicle-card:hover .booking-vehicle-image-frame img { transform: scale(1.04); }
.booking-vehicle-image-frame.no-image::before { content: "\f5e4"; position: absolute; inset: 0; display: grid; place-items: center; font-family: "Font Awesome 6 Free"; font-weight: 900; font-size: 48px; color: rgba(212, 168, 67, .3); }
.booking-vehicle-price-button {
    position: absolute; left: 12px; right: 12px; bottom: 12px;
    min-height: 46px; border: 0; border-radius: var(--tt-radius);
    color: #111; background: var(--tt-gold-gradient);
    font-family: var(--tt-font-head); font-size: 14px; font-weight: 700;
    box-shadow: 0 8px 20px rgba(0, 0, 0, .45);
    transition: transform .2s ease;
}
.booking-vehicle-price-button:hover { transform: translateY(-2px); }
.booking-vehicle-card.selected .booking-vehicle-price-button { color: var(--tt-gold-light); background: rgba(7, 9, 11, .9); border: 1px solid var(--tt-gold); }
.booking-vehicle-information { padding: 16px; }
.booking-vehicle-information h4 { margin: 0 0 6px; font-family: var(--tt-font-head); font-size: 17px; }
.booking-vehicle-information p { color: var(--tt-text-2); font-size: 13px; }
.booking-vehicle-information small { display: block; margin-top: 8px; color: var(--tt-muted); font-size: 13px; line-height: 1.5; }

/* Customer form */
.booking-customer-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 16px; }
.booking-form-group { display: flex; flex-direction: column; gap: 7px; min-width: 0; }
.booking-form-group-full { grid-column: 1 / -1; }
.booking-form-group label { color: var(--tt-text-2); font-size: 13px; font-weight: 600; }
.booking-optional { color: var(--tt-muted); font-weight: 400; }
.booking-form-group input { width: 100%; min-height: 50px; padding: 0 14px; color: var(--tt-text); background: var(--tt-input); border: 1px solid var(--tt-line-2); border-radius: var(--tt-radius); outline: none; font-size: 15px; }
.booking-form-group input:focus { border-color: var(--tt-gold); box-shadow: 0 0 0 3px rgba(212, 168, 67, .15); }
.booking-field-error { min-height: 16px; color: #ff8f96; font-size: 12px; }
.booking-field-error:empty { min-height: 0; }
.booking-selected-vehicle { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-top: 18px; padding: 16px 18px; background: var(--tt-gold-soft); border: 1px solid var(--tt-gold-line); border-radius: var(--tt-radius); }
.booking-selected-vehicle[hidden] { display: none !important; }
.booking-selected-vehicle span { display: block; color: var(--tt-muted); font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; }
.booking-selected-vehicle strong { font-weight: 700; }
.booking-selected-vehicle .price { text-align: right; }
.booking-selected-vehicle .price strong { font-family: var(--tt-font-head); font-size: 24px; color: var(--tt-gold-light); }
.booking-checkbox-row { display: flex; align-items: flex-start; gap: 11px; margin-top: 18px; color: var(--tt-text-2); font-size: 14px; line-height: 1.5; cursor: pointer; }
.booking-checkbox-row input { flex: 0 0 auto; width: 19px; height: 19px; margin-top: 2px; accent-color: var(--tt-gold); }
.booking-form-message { margin: 14px 0 0; font-size: 14px; }
.booking-form-message:empty { display: none; }
.booking-error-message { padding: 11px 13px; color: #ffd0d3; background: var(--tt-red-soft); border: 1px solid rgba(236, 95, 103, .4); border-radius: var(--tt-radius); }
.booking-success-message { padding: 11px 13px; color: #cff5df; background: var(--tt-green-soft); border: 1px solid rgba(60, 196, 124, .4); border-radius: var(--tt-radius); }
.booking-payment-button { width: 100%; min-height: 56px; margin-top: 16px; color: #111; background: var(--tt-gold-gradient); border: 0; border-radius: var(--tt-radius); font-family: var(--tt-font-head); font-size: 16px; font-weight: 700; letter-spacing: .03em; box-shadow: 0 10px 28px rgba(212, 168, 67, .25); }
.booking-payment-button:disabled { cursor: not-allowed; opacity: .45; filter: grayscale(.8); box-shadow: none; }

/* ==========================================================================
   Payment modal
   ========================================================================== */
.payment-modal { position: fixed; inset: 0; z-index: 11000; display: flex; align-items: center; justify-content: center; padding: 20px; overflow-y: auto; }
#paymentModal[hidden] { display: none !important; }
.payment-modal-content {
    position: relative; z-index: 1; width: min(500px, 100%); max-height: calc(100vh - 40px); overflow-y: auto;
    padding: 30px; color: var(--tt-text);
    background: var(--tt-bg-2); border: 1px solid var(--tt-gold-line); border-radius: var(--tt-radius-xl);
    box-shadow: 0 30px 90px rgba(0, 0, 0, .7); animation: tt-pop .25s ease;
}
.payment-modal-close { position: absolute; top: 16px; right: 16px; }
.pay-head { display: flex; align-items: center; gap: 16px; margin: 0 50px 22px 0; }
.pay-lock { width: 50px; height: 50px; flex: 0 0 auto; display: grid; place-items: center; border-radius: 14px; color: #111; background: var(--tt-gold-gradient); font-size: 20px; }
.pay-head h2 { font-size: 24px; }
.pay-head p { margin-top: 4px; color: var(--tt-text-2); font-size: 14px; }
.payment-summary { display: grid; gap: 8px; margin-bottom: 16px; }
.payment-summary > div { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 12px 14px; background: var(--tt-surface); border: 1px solid var(--tt-line); border-radius: var(--tt-radius); }
.payment-summary span { color: var(--tt-muted); font-size: 13px; }
.payment-summary strong { text-align: right; overflow-wrap: anywhere; }
.payment-summary .total { background: var(--tt-gold-soft); border-color: var(--tt-gold-line); }
#paymentAmount { font-family: var(--tt-font-head); font-size: 26px; color: var(--tt-gold-light); }
#paymentCountdown { font-family: var(--tt-font-head); color: var(--tt-orange); font-variant-numeric: tabular-nums; }
.payment-message { margin-bottom: 12px; color: #ff8f96; font-size: 14px; text-align: center; }
.payment-message:empty { display: none; }
.payment-message.success { color: var(--tt-green); }
.payment-methods { display: grid; gap: 10px; }
.payment-method-button {
    display: flex; align-items: center; justify-content: center; gap: 10px;
    width: 100%; min-height: 54px; padding: 10px 18px;
    border: 1px solid transparent; border-radius: var(--tt-radius);
    font-size: 16px; font-weight: 700;
    transition: transform .2s ease, box-shadow .2s ease, opacity .2s ease;
}
.payment-method-button i { font-size: 20px; }
.payment-method-button:hover:not(:disabled) { transform: translateY(-2px); }
.payment-method-button:disabled { opacity: .45; cursor: not-allowed; transform: none; }
.paypal-button { color: #111; background: #ffc439; }
.apple-pay-button { color: #fff; background: #000; border-color: #3a3a3a; }
.card-button { color: var(--tt-text); background: var(--tt-surface-2); border-color: var(--tt-line-2); }
.card-button:hover:not(:disabled) { border-color: var(--tt-gold-line); }
#paypalButtonContainer { width: 100%; overflow: hidden; border-radius: var(--tt-radius); background: #fff; padding: 12px; }
#paypalButtonContainer[hidden] { display: none; }
.pay-secure { display: flex; gap: 9px; align-items: flex-start; margin-top: 18px; color: var(--tt-muted); font-size: 12px; line-height: 1.5; }
.pay-secure i { margin-top: 2px; color: var(--tt-green); }

/* Saving overlay */
.booking-page-overlay { position: fixed; inset: 0; z-index: 12000; display: grid; place-items: center; padding: 20px; background: rgba(2, 3, 4, .8); backdrop-filter: blur(6px); }
.booking-page-overlay[hidden] { display: none !important; }
.booking-page-overlay-card { width: min(340px, 100%); padding: 28px; text-align: center; background: var(--tt-bg-2); border: 1px solid var(--tt-gold-line); border-radius: var(--tt-radius-lg); box-shadow: var(--tt-shadow); }
.booking-page-overlay-card p { color: var(--tt-text-2); }

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 1080px) {
    .route-map-tip { left: calc(50% + 200px); max-width: calc(100% - 460px); }
}
@media (max-width: 860px) {
    .bk-main { height: auto; min-height: 0; display: flex; flex-direction: column; }
    .bk-panel { position: relative; top: auto; left: auto; bottom: auto; width: 100%; max-height: none; overflow: visible; border-radius: 0; border-left: 0; border-right: 0; box-shadow: none; padding: 22px var(--tt-gutter) 20px; }
    .route-map-section { position: relative; inset: auto; height: 68svh; min-height: 440px; }
    .route-map-tip { left: 50%; top: 12px; max-width: calc(100% - 24px); font-size: 12px; }
    .bk-summary { position: sticky; bottom: 0; left: 0; right: 0; width: 100%; min-width: 0; border-radius: var(--tt-radius-lg) var(--tt-radius-lg) 0 0; }
    .bk-summary { position: fixed; z-index: 3000; padding: 12px var(--tt-gutter) calc(12px + env(safe-area-inset-bottom)); }
    .booking-body { padding-bottom: 170px; }
    .route-result-item { padding: 9px 11px; }
    .route-result-item strong { font-size: 16px; }
    .route-input-wrapper input, .booking-form-group input { font-size: 16px; }
    .service-area-alert { position: fixed; left: 12px; right: 12px; width: auto; bottom: 180px; }
    .booking-modal { padding: 0; }
    .booking-modal-content { min-height: 100svh; border-radius: 0; border: 0; }
    .booking-modal-header { padding: 20px 18px; position: sticky; top: 0; z-index: 5; }
    .booking-modal-body { padding: 16px 14px 28px; }
    .booking-trip-summary, .booking-vehicle-section, .booking-customer-section { padding: 16px 14px; }
    .booking-summary-grid { grid-template-columns: 1fr 1fr; }
    .booking-customer-grid { grid-template-columns: 1fr; }
    .booking-section-heading-row { flex-direction: column; align-items: flex-start; }
    .booking-selected-vehicle { flex-direction: column; align-items: flex-start; gap: 10px; }
    .booking-selected-vehicle .price { text-align: left; }
    .payment-modal { align-items: flex-end; padding: 0; }
    .payment-modal-content { width: 100%; border-radius: var(--tt-radius-xl) var(--tt-radius-xl) 0 0; padding: 24px 18px calc(24px + env(safe-area-inset-bottom)); max-height: 92svh; }
}
@media (max-width: 420px) {
    .route-date-time-grid, .route-map-mode { grid-template-columns: 1fr; }
    .booking-stop-row { grid-template-columns: 1fr 84px; }
}

/* ---------- PayPal + card payment ---------- */
.paypal-loading, .card-panel-loading { padding: 14px; text-align: center; color: #555; font-size: 14px; }
.payment-message.error { color: var(--tt-red); }
.card-payment-panel { margin-top: 14px; padding: 16px; border-radius: var(--tt-radius); background: #fff; color: #111; box-shadow: 0 10px 30px rgba(0,0,0,.35); }
.card-payment-panel[hidden] { display: none; }
.card-panel-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; }
.card-panel-head strong { display: flex; gap: 8px; align-items: center; font-size: 15px; color: #111; }
.card-panel-close { border: 0; background: none; font-size: 24px; line-height: 1; cursor: pointer; color: #666; }
.card-panel-loading { color: #555; }
.card-fields[hidden], .card-fallback[hidden] { display: none; }
.card-field { min-height: 52px; }
.card-field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.card-submit-button { margin-top: 10px; display: flex; gap: 8px; align-items: center; justify-content: center; cursor: pointer; }
.card-field > * { width: 100% !important; }
.card-submit-button .booking-spinner { width: 18px; height: 18px; border-width: 2px; }
.leaflet-tooltip.stop-number { padding: 0; background: transparent; border: 0; box-shadow: none; color: #111; font-weight: 800; font-size: 10px; }
.leaflet-tooltip.stop-number::before { display: none; }
.booking-stop-row .route-input-wrapper input { padding-right: 40px; }
.booking-stop-wait-box input::-webkit-outer-spin-button, .booking-stop-wait-box input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.booking-stop-wait-box input { -moz-appearance: textfield; appearance: textfield; }