/* booking.php — Extracted 2026-05-20. */

/* === FLEET GRID (was lines 733-798) === */
                            /* Minimalist Fleet Grid - Mobile Optimized */
                            .fleet-grid-custom {
                                display: grid;
                                grid-template-columns: repeat(2, 1fr);
                                gap: 0.75rem;
                            }
                            @media (min-width: 640px) {
                                .fleet-grid-custom {
                                    gap: 1rem;
                                }
                            }
                            @media (min-width: 1024px) {
                                .fleet-grid-custom {
                                    grid-template-columns: repeat(3, 1fr);
                                }
                            }

                            .fleet-card {
                                display: flex;
                                flex-direction: column;
                                align-items: center;
                                justify-content: center;
                                text-align: center;
                                padding: 1rem 0.5rem;
                                position: relative;
                                min-height: 130px;
                            }
                            @media (min-width: 640px) {
                                .fleet-card {
                                    padding: 1.5rem 1rem;
                                    min-height: 160px;
                                }
                            }

                            .fleet-img-wrap {
                                width: 100%;
                                height: 4rem;
                                display: flex;
                                align-items: center;
                                justify-content: center;
                                margin-bottom: 0.75rem;
                            }
                            @media (min-width: 640px) {
                                .fleet-img-wrap {
                                    height: 5rem;
                                    margin-bottom: 1rem;
                                }
                            }

                            .fleet-indicator {
                                position: absolute;
                                top: 0.75rem;
                                right: 0.75rem;
                            }
                            
                            .fleet-title {
                                font-size: 0.7rem;
                                line-height: 1.1;
                            }
                            @media (min-width: 640px) {
                                .fleet-title {
                                    font-size: 0.875rem;
                                }
                            }

/* === MAIN BOOKING STYLES (was lines 1228-1410) === */
/* --- DARK GLASS PHONE PICKER & INPUT OVERRIDES --- */
.iti { width: 100%; display: block; }
.iti__dropdown-content {
    background: rgba(10, 10, 10, 0.95) !important;
    backdrop-filter: blur(20px) !important;
    border: 1px solid rgba(212, 175, 55, 0.2) !important;
    border-radius: 12px !important;
    box-shadow: 0 20px 50px rgba(0,0,0,0.8) !important;
    margin-top: 8px !important;
    z-index: 1000 !important;
    overflow: hidden;
}
.iti__country-list {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    color: #fff !important;
    font-size: 13px !important;
    max-width: 300px !important;
}
.iti__country { padding: 10px 15px !important; transition: all 0.2s; color: #fff !important; outline: none; }
.iti__country:hover, .iti__country.iti__highlight { background: rgba(212, 175, 55, 0.2) !important; }
.iti__country-name { color: #ccc !important; font-weight: 300 !important; }
.iti__country.iti__active .iti__country-name { color: #D4AF37 !important; font-weight: bold !important; }
.iti__dial-code { color: #888 !important; }
.iti__selected-dial-code { color: #fff !important; margin-left: 8px !important; font-size: 14px !important; }
.iti__arrow { border-top-color: #D4AF37 !important; }
.iti__arrow--up { border-bottom-color: #D4AF37 !important; }
.iti__selected-country {
    background-color: transparent !important;
    padding-left: 16px !important;
    border-radius: 12px 0 0 12px !important;
    transition: background-color 0.2s;
    outline: none !important;
    margin-top: 8px !important;
}
.iti__selected-country:hover { background-color: rgba(255, 255, 255, 0.05) !important; }
.iti__selected-country:focus-visible { background-color: rgba(212, 175, 55, 0.1) !important; }
.iti__search-input {
    background: #1a1a1a !important;
    border: 1px solid rgba(212, 175, 55, 0.3) !important;
    color: #ffffff !important;
    border-radius: 8px !important;
    padding: 10px !important;
    margin: 8px !important;
    width: calc(100% - 16px) !important;
    outline: none !important;
    box-shadow: none !important;
}
.iti__search-input::placeholder { color: #666 !important; }
.iti__tel-input {
    background: rgba(10, 10, 10, 0.5) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    color: #fff !important;
    border-radius: 0.75rem !important;
    padding-top: 22px !important;
    padding-bottom: 6px !important;
    height: 64px !important;
    width: 100% !important;
    transition: all 0.3s !important;
    box-shadow: inset 0 2px 4px 0 rgba(0, 0, 0, 0.06) !important;
    font-family: inherit !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    letter-spacing: 0.05em !important;
}
.iti__tel-input:focus {
    border-color: rgba(212, 175, 55, 0.5) !important;
    outline: none !important;
    background: rgba(10, 10, 10, 0.8) !important;
}
.iti__tel-input.border-red-500 {
    border-color: #ef4444 !important;
    box-shadow: 0 0 15px rgba(239,68,68,0.2) !important;
}
.iti__flag-container { z-index: 30 !important; }
.glass-scroll::-webkit-scrollbar, .iti__country-list::-webkit-scrollbar { width: 4px; }
.glass-scroll::-webkit-scrollbar-track, .iti__country-list::-webkit-scrollbar-track { background: transparent; }
.glass-scroll::-webkit-scrollbar-thumb, .iti__country-list::-webkit-scrollbar-thumb { background: rgba(212, 175, 55, 0.3); border-radius: 8px; }

/* FIX: Ensure date input height doesn't truncate text */
input[type="date"]::-webkit-calendar-picker-indicator,
input[type="time"]::-webkit-calendar-picker-indicator {
    position: absolute; right: 0; width: 100%; height: 100%; margin: 0; padding: 0; opacity: 0; cursor: pointer;
}

/* FIX: Force loading screen to center of browser viewport */
#loadingOverlay {
    position: fixed !important;
    top: 0 !important; 
    left: 0 !important;
    width: 100vw !important; 
    height: 100vh !important;
    z-index: 99999 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}
/* Ensure it respects the hidden utility class */
#loadingOverlay.hidden {
    display: none !important;
}

/* FIX: Hide browser native clear 'X' buttons that conflict with our UI */
input[type="text"]::-ms-clear,
input[type="text"]::-ms-reveal {
    display: none; width: 0; height: 0;
}
input[type="search"]::-webkit-search-decoration,
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-results-button,
input[type="search"]::-webkit-search-results-decoration {
    display: none !important;
    -webkit-appearance: none;
}

@keyframes shake_tactile {
    0%, 100% { transform: translateX(0); }
    20% { transform: translateX(-4px); }
    40% { transform: translateX(4px); }
    60% { transform: translateX(-4px); }
    80% { transform: translateX(4px); }
}
.animate-shake-tactile { animation: shake_tactile 0.4s cubic-bezier(.36,.07,.19,.97) both; }
.slide-down { animation: slideDown 0.3s ease-out forwards; }
@keyframes slideDown { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: translateY(0); } }

/* --- Map expand-to-modal popup (wired in JS via #map-expand-btn) --- */
/* Site nav (`#main-nav`, fixed top-0 z-50) is ~136px tall on desktop
   (md:py-6 outer + py-4 pill + 56px logo) and ~104px on mobile. We clear 160px
   so the backdrop dim never leaks behind the transparent edges of the nav
   strip (the nav pill itself is `max-w-7xl mx-auto`, leaving transparent
   gutters on wider screens which otherwise show dim/content through). */
:root { --aat-nav-clear: 160px; }

.aat-map-backdrop {
    position: fixed;
    left: 0; right: 0; bottom: 0;
    top: var(--aat-nav-clear);
    /* No backdrop-filter: blur(). The site nav already uses
       `backdrop-filter: blur(24px)` (header.php) and stacking two competing
       backdrop-filters on adjacent layers causes Google Maps' canvas to be
       composited at a lower-resolution layer, making the maximised map blurry.
       A plain rgba dim achieves the same "page recedes" UX without the cost. */
    background: rgba(0,0,0,0.72);
    z-index: 40;
}
/* No transform/translateZ on the map container in modal mode. Those promote
   the map to a separate GPU compositor layer, which (a) breaks Google Maps'
   pointer event handling (pan/zoom/click stop working) and (b) can cause
   tiles to fail to load because Maps detects the container as off-screen
   through the layer boundary. The blur is solved by the backdrop-filter
   removal above; we don't need any rendering hints here. */
/* Card sits horizontally centred below the nav, capped to a sensible size. */
.aat-map-fullscreen {
    /* Use margin auto for horizontal centring (NOT transform: translateX(-50%))
       - odd-pixel modal widths land on subpixel positions under transform and
       the Google Maps canvas renders blurry. Margin auto stays pixel-aligned. */
    position: fixed !important;
    top: calc(var(--aat-nav-clear) + 24px) !important;
    left: 0 !important;
    right: 0 !important;
    margin-left: auto !important;
    margin-right: auto !important;
    transform: none !important;
    width: min(75vw, 820px) !important;
    height: min(calc(75vh - var(--aat-nav-clear)), 540px) !important;
    z-index: 45 !important;
    border-radius: 1.5rem !important;
    box-shadow: 0 25px 80px rgba(0,0,0,0.8) !important;
    background: #030303 !important;
}
.aat-map-fullscreen > div:last-child {
    height: calc(min(calc(75vh - var(--aat-nav-clear)), 540px) - 60px) !important;
}
/* Disabled-state appearance for the expand button until a route exists. */
#map-expand-btn[aria-disabled="true"] {
    opacity: 0.35;
    cursor: not-allowed;
    pointer-events: none;
}

/* === BOOKING MISC (was lines 3461-3480) === */
.aat-verified-place { border-color: rgba(34, 197, 94, 0.5) !important; }
.aat-verified-locked { background: rgba(34, 197, 94, 0.05) !important; color: rgba(255,255,255,0.7) !important; }
.aat-invalid { border-color: rgba(239, 68, 68, 0.6) !important; box-shadow: 0 0 0 1px rgba(239, 68, 68, 0.2) !important; transition: border-color 0.2s, box-shadow 0.2s; }
/* Locked state must still receive clicks so the handler can flash invalid fields +
 * show the error banner (Bug 1). pointer-events stays default; the click handler
 * gates progression based on data-gate-locked. */
.step1-cta[data-gate-locked="1"],
button.step1-cta[data-gate-locked="1"] {
    background-color: rgba(212, 175, 55, 0.45) !important;
    color: rgba(0, 0, 0, 0.70) !important;
    box-shadow: inset 0 0 0 1px rgba(212, 175, 55, 0.55) !important;
    cursor: not-allowed !important;
    filter: saturate(0.55);
}
.step1-cta[data-gate-locked="1"]:hover,
button.step1-cta[data-gate-locked="1"]:hover {
    background-color: rgba(212, 175, 55, 0.50) !important;
}