body { font-family: 'Plus Jakarta Sans', sans-serif; }
        .tab-active { background-color: #f59e0b !important; color: #0f172a !important; font-weight: 700; }
        .subtab-active { background-color: #ffffff !important; color: #1e1b4b !important; border-bottom: 2px solid #312e81; font-weight: 700; box-shadow: 0 1px 2px rgba(0,0,0,0.05); }
        .autocomplete-dropdown {
            position: absolute;
            top: 100%;
            left: 0;
            right: 0;
            max-height: 220px;
            overflow-y: auto;
            background: #ffffff;
            border: 1px solid #cbd5e1;
            border-radius: 0.75rem;
            box-shadow: 0 10px 25px -5px rgba(15, 23, 42, 0.15);
            z-index: 60;
            margin-top: 4px;
        }
        .autocomplete-item {
            padding: 8px 14px;
            font-size: 13px;
            cursor: pointer;
            display: flex;
            align-items: center;
            gap: 8px;
            color: #1e293b;
            transition: all 0.15s;
        }
        .autocomplete-item:hover {
            background-color: #f1f5f9;
            color: #1e1b4b;
            font-weight: 600;
        }
        @keyframes fadeInScale { from { opacity: 0; transform: scale(0.95); } to { opacity: 1; transform: scale(1); } }
        .animate-fade-in { animation: fadeInScale 0.25s ease-out forwards; }
        @keyframes slideDown { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: translateY(0); } }
        .animate-slide-down { animation: slideDown 0.3s ease-out forwards; }
        .scrollbar-none::-webkit-scrollbar { display: none; }
        .scrollbar-none { -ms-overflow-style: none; scrollbar-width: none; }
        .border-red-500 { border-color: #ef4444 !important; }
        .date-input-custom.date-empty {
    color: transparent !important;
}

.date-input-custom.date-filled {
    color: #1e293b !important;
}

/* Keep the native date control and custom hint aligned. */
input[type="date"], .date-input-custom {
    position: relative;
    width: 100%;
    min-width: 0;
    padding-inline: 0.75rem !important;
    font-size: 0.875rem !important;
    box-sizing: border-box;
}
.date-input-custom.date-empty::-webkit-datetime-edit { visibility: hidden; }
span[id$="-placeholder"] {
    left: 0.75rem !important;
    right: 2rem;
    padding: 0 !important;
    font-size: 0.75rem !important;
    pointer-events: none;
    white-space: nowrap;
    overflow: hidden;
}
nav a[href="/"] { min-width: 0; }
nav a[href="/"] > div:last-child { min-width: 0; }
@media (max-width: 639px) {
    .booking-datetime.grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .booking-datetime > div:first-child { grid-column: 1 / -1; }
    nav a[href="/"] .text-xl { font-size: 0.875rem; line-height: 1.25; }
}


/* Ocean Breeze theme — visual colors only; layout and behavior unchanged */
:root {
    --ocean-primary: #0B3D91;
    --ocean-secondary: #3BA7F2;
    --ocean-tertiary: #7FE7D6;
    --ocean-background: #E8F6FF;
    --ocean-deep: #08285F;
}

/* Map the existing indigo brand system to Ocean Breeze. */
.bg-indigo-950 { background-color: var(--ocean-primary) !important; }
.bg-indigo-900 { background-color: #0D4CAE !important; }
.bg-indigo-800 { background-color: #1263C6 !important; }
.bg-indigo-700 { background-color: #187BD9 !important; }
.bg-indigo-600 { background-color: var(--ocean-secondary) !important; }
.bg-indigo-100 { background-color: #D9F1FF !important; }
.bg-indigo-50 { background-color: var(--ocean-background) !important; }

.text-indigo-950, .text-indigo-900 { color: var(--ocean-primary) !important; }
.text-indigo-800 { color: #0D4CAE !important; }
.text-indigo-700 { color: #1263C6 !important; }
.text-indigo-600 { color: #168ED8 !important; }

.border-indigo-700, .border-indigo-600 { border-color: var(--ocean-secondary) !important; }
.border-indigo-200 { border-color: #B9E7FF !important; }
.border-indigo-100 { border-color: #D6EFFF !important; }

.focus\:ring-indigo-600:focus { --tw-ring-color: var(--ocean-secondary) !important; }
.hover\:bg-indigo-950:hover { background-color: #082F73 !important; }
.hover\:bg-indigo-900:hover { background-color: var(--ocean-primary) !important; }
.hover\:bg-indigo-700:hover { background-color: #188FDC !important; }
.hover\:bg-indigo-50:hover { background-color: var(--ocean-background) !important; }
.hover\:text-indigo-950:hover { color: var(--ocean-primary) !important; }

.from-indigo-950 {
    --tw-gradient-from: #0B3D91 var(--tw-gradient-from-position) !important;
    --tw-gradient-to: rgb(11 61 145 / 0) var(--tw-gradient-to-position) !important;
}
.from-indigo-900 {
    --tw-gradient-from: #0D4CAE var(--tw-gradient-from-position) !important;
    --tw-gradient-to: rgb(13 76 174 / 0) var(--tw-gradient-to-position) !important;
}
.via-indigo-900 {
    --tw-gradient-to: rgb(13 76 174 / 0) var(--tw-gradient-to-position) !important;
    --tw-gradient-stops: var(--tw-gradient-from), #0D4CAE var(--tw-gradient-via-position), var(--tw-gradient-to) !important;
}
.to-indigo-950 { --tw-gradient-to: var(--ocean-primary) var(--tw-gradient-to-position) !important; }
.to-slate-900 { --tw-gradient-to: var(--ocean-deep) var(--tw-gradient-to-position) !important; }

/* Existing selected-state geometry stays identical; only its colors change. */
.tab-active {
    background-color: var(--ocean-tertiary) !important;
    color: var(--ocean-deep) !important;
}
.subtab-active {
    background-color: #ffffff !important;
    color: var(--ocean-primary) !important;
    border-bottom-color: var(--ocean-secondary) !important;
}

/* Hero and partner accents. Keep warning/rating amber colors elsewhere intact. */
header .text-amber-300 { color: var(--ocean-tertiary) !important; }
#partner-section .bg-amber-400 { background-color: var(--ocean-tertiary) !important; }
#partner-section .hover\:bg-amber-300:hover { background-color: #A7F1E5 !important; }
#partner-section .text-indigo-950 { color: var(--ocean-deep) !important; }

.autocomplete-item:hover {
    background-color: var(--ocean-background) !important;
    color: var(--ocean-primary) !important;
}
.explore-cabs-overlay {
    position: fixed;
    inset: 0;
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background: rgba(255, 255, 255, .97);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity .2s ease, visibility .2s ease;
}
.explore-cabs-overlay.visible { opacity: 1; visibility: visible; pointer-events: auto; }
.explore-cabs-content { width: min(420px, 100%); text-align: center; color: #172554; }
.explore-cabs-icon {
    display: grid;
    place-items: center;
    width: 80px;
    height: 80px;
    margin: auto;
    border-radius: 24px;
    background: #fff3e8;
    color: #f97316;
    font-size: 36px;
    animation: explore-float 1.1s ease-in-out infinite alternate;
}
.explore-cabs-content h2 { margin: 22px 0 6px; font-size: 22px; font-weight: 800; }
.explore-cabs-content p { margin: 0; color: #64748b; font-size: 14px; }
.explore-cabs-progress { height: 6px; margin-top: 28px; overflow: hidden; border-radius: 20px; background: #f1f5f9; }
.explore-cabs-progress span { display: block; width: 30%; height: 100%; border-radius: inherit; background: #f97316; animation: explore-progress 1.2s ease-in-out infinite; }
.explore-cabs-status { margin-top: 14px; color: #ea580c; font-size: 14px; font-weight: 700; }
@keyframes explore-float { from { transform: translateY(3px); } to { transform: translateY(-7px); } }
@keyframes explore-progress { from { transform: translateX(-100%); } to { transform: translateX(335%); } }
@media (prefers-reduced-motion: reduce) {
    .explore-cabs-icon, .explore-cabs-progress span { animation: none; }
    .explore-cabs-overlay { transition: none; }
}
.location-current-action { display: none; }
.location-entry:focus-within .location-current-action { display: inline-flex; }
.trip-type-selection-required { border-color: #e11d48 !important; background-color: #fff1f2; }

#first-trip-offer-panel:has(#first-trip-coupon-apply:disabled) { border-color: #a7f3d0; background: #ecfdf5; }
#first-trip-coupon-apply:disabled { border-color: #059669; background: #059669; cursor: default; }
.first-trip-offer-badge-applied { border-color: #059669 !important; background: #d1fae5 !important; color: #065f46 !important; }
.first-trip-offer-applied { animation: first-trip-offer-pop .48s cubic-bezier(.2,.8,.2,1); }
@keyframes first-trip-offer-pop {
    0% { transform: scale(.96); }
    55% { transform: scale(1.035); }
    100% { transform: scale(1); }
}
@media (prefers-reduced-motion: reduce) {
    .first-trip-offer-applied { animation: none; }
}
.first-trip-confetti-layer { position: fixed; inset: 0; z-index: 10000; overflow: hidden; pointer-events: none; }
.first-trip-confetti-piece { position: absolute; top: -16px; width: 8px; height: 13px; border-radius: 2px; opacity: .95; animation: first-trip-confetti-fall 1.8s cubic-bezier(.15,.65,.45,1) var(--confetti-delay) forwards; }
@keyframes first-trip-confetti-fall {
    0% { transform: translate3d(0,-5vh,0) rotate(0); opacity: 1; }
    100% { transform: translate3d(var(--confetti-drift),110vh,0) rotate(var(--confetti-spin)); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
    .first-trip-confetti-layer { display: none; }
}

/* Guided trip completion keeps booking disabled until readiness succeeds. */
.journey-completion-action { color: inherit; font: inherit; text-decoration: underline; text-underline-offset: .2em; border-radius: .35rem; min-height: 44px; padding: .25rem; cursor: pointer; }
.journey-completion-action:focus-visible, .journey-attention { outline: 3px solid #4f46e5 !important; outline-offset: 4px; }