:root {
    font-family: system-ui, Avenir, Helvetica, Arial, sans-serif;
    line-height: 1.5;
    font-weight: 400;
    font-synthesis: none;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden;
    scroll-behavior: smooth;
}

body {
    color: #787777;
    overflow-x: hidden;
}

/* =====================================================================
   Flatpickr — teal brand overrides
   These must live in plain CSS because they target library-rendered
   DOM internals that Tailwind classes cannot reach.
   ===================================================================== */
.flatpickr-day.selected,
.flatpickr-day.selected:hover,
.flatpickr-day.startRange,
.flatpickr-day.endRange         { background: #0d9488 !important; border-color: #0d9488 !important; }
.flatpickr-day:hover            { background: #ccfbf1; color: #0d9488; }
.flatpickr-time input:focus,
.flatpickr-time .flatpickr-am-pm:focus { background: #ccfbf1; }
.flatpickr-input::-webkit-calendar-picker-indicator { display: none; }

/* =====================================================================
   Booking page — vehicle selection
   ===================================================================== */

/* Map iframe */
.map-iframe { width: 110%; height: 110%; margin: -5%; border: 0; filter: brightness(0.92) saturate(0.85); }

/* White gradient overlay */
.map-overlay {
    background:
        linear-gradient(to right, rgba(255,255,255,1) 0%, rgba(255,255,255,.97) 28%, rgba(255,255,255,.78) 55%, rgba(255,255,255,.10) 100%),
        linear-gradient(to bottom, rgba(255,255,255,.45) 0%, transparent 12%, transparent 85%, rgba(255,255,255,.5) 100%);
}

/* Animated dashed route line */
.route-dashes {
    width: 2px; flex: 1; margin: 4px 0;
    background: repeating-linear-gradient(to bottom, #14b8a6 0px, #14b8a6 5px, transparent 5px, transparent 12px);
    animation: dash 1.6s linear infinite;
}
@keyframes dash { from { background-position: 0 0; } to { background-position: 0 24px; } }

.ping-ring { position: absolute; inset: -4px; border-radius: 50%; border: 1.5px solid #0d9488; animation: ping 2.2s ease-out infinite; }
@keyframes ping { 0% { transform: scale(1); opacity: .6; } 100% { transform: scale(2.6); opacity: 0; } }

/* Card transitions */
.vehicle-card { transition: all .28s cubic-bezier(.34,1.3,.64,1); }
.vehicle-card:hover:not(.unavailable) { transform: translateX(3px); box-shadow: 0 2px 16px rgba(13,148,136,0.1); }
.vehicle-card.active { transform: translateX(3px); }

/* Left accent bar */
.card-accent { position: absolute; left: 0; top: 0; bottom: 0; width: 4px; z-index: 10; border-radius: 0; transition: background .28s; }
.vehicle-card.active .card-accent { background: linear-gradient(to bottom, #2dd4bf, #0d9488); }
.vehicle-card:not(.active) .card-accent { background: transparent; }

/* Selected check */
.sel-check { transition: all .3s cubic-bezier(.34,1.56,.64,1); }
.vehicle-card.active .sel-check { opacity: 1 !important; transform: scale(1) !important; }

/* Active image zone */
.vehicle-card.active .card-img { background: linear-gradient(135deg, #f0fdfa 0%, #ccfbf1 100%) !important; border-color: #5eead4 !important; }

/* Active tags */
.vehicle-card.active .tag { background: #ccfbf1 !important; border-color: #99f6e4 !important; color: #0f766e !important; }

/* Active select button */
.vehicle-card.active .select-btn { background: #0d9488 !important; border-color: #0d9488 !important; color: #fff !important; }

/* Dot pattern on image zone */
.card-img { background-image: radial-gradient(circle, rgba(0,0,0,0.055) 1px, transparent 1px) !important; background-size: 10px 10px !important; }

/* Hover image scale */
.vehicle-card .card-img img { transition: transform .35s cubic-bezier(.34,1.3,.64,1); }
.vehicle-card:not(.active):not(.unavailable):hover .card-img img { transform: scale(1.07); }

/* Seat fill bar */
.seat-bar { height: 3px; border-radius: 99px; background: #e5e7eb; overflow: hidden; }
.seat-bar-fill { height: 100%; border-radius: 99px; }

/* Hide scrollbar */
.no-scrollbar::-webkit-scrollbar { display: none; }

/* Drawer slide-up */
.drawer { transition: transform .4s cubic-bezier(.34,1.3,.64,1); }

/* Shadow utilities */
.shadow-dot-glow  { box-shadow: 0 0 0 3px rgba(13,148,136,.16), 0 0 12px rgba(13,148,136,.3); }
.shadow-dot-pulse { box-shadow: 0 0 8px rgba(13,148,136,.5); }
.shadow-btn       { box-shadow: 0 4px 16px rgba(13,148,136,.28); }
.shadow-card-active { box-shadow: 0 4px 24px rgba(13,148,136,.18), 0 1px 4px rgba(13,148,136,.1); }

/* Seat fill bar gradient variants */
.bar-teal   { background: linear-gradient(to right, #2dd4bf, #0d9488); }
.bar-indigo { background: linear-gradient(to right, #6366f1, #4f46e5); }
.bar-amber  { background: linear-gradient(to right, #fbbf24, #d97706); }

/* =====================================================================
   Page hero background — shared across all inner pages
   ===================================================================== */