/* Prevent horizontal overflow on mobile (use clip, not hidden — hidden breaks position:sticky) */
html, body {
    width: 100%;
    overflow-x: clip;
    overscroll-behavior-x: none;
}

/* iOS Safari auto-zooms focused inputs with font-size < 16px.
   The zoom shifts the viewport, making the search form appear to "jump"
   and causing the autocomplete panel to overlay the input. Force 16px on touch. */
@media (hover: none) and (pointer: coarse) {
    .search-input,
    .search-input-box input,
    .input-container input,
    input[type="text"],
    input[type="search"],
    input[type="tel"],
    input[type="email"],
    input[type="number"],
    select,
    textarea {
        font-size: 16px !important;
    }
}

/* Smooth scrollbar styling */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background: #F5F3EE;
}

::-webkit-scrollbar-thumb {
    background: #0A1E3D;
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: #1A3A6B;
}

.no-scrollbar::-webkit-scrollbar {
    display: none;
}

.no-scrollbar {
    -ms-overflow-style: none;
    scrollbar-width: none;
}

/* Hero carousel animations */
.hero-slide {
    opacity: 0;
    transition: opacity 1.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.hero-slide.active {
    opacity: 1;
}

/* Parallax effect */
.parallax-bg {
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

/* Custom Form Elements - Standardized */
.input-container {
    transition: all 0.2s ease;
    min-width: 0;
}

.input-container:focus-within {
    box-shadow: 0 0 0 3px rgba(32, 60, 148, 0.12);
    border-color: #0A1E3D !important;
}

/* Standardized input styling */
.search-input {
    width: 100%;
    background: transparent;
    outline: none;
    color: #0E1116;
    font-weight: 600;
    font-size: 0.875rem;
    line-height: 1.25;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.search-input::placeholder {
    color: #9CA3AF;
    font-weight: 400;
}

.search-label {
    display: block;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #555555;
    font-weight: 700;
    margin-bottom: 2px;
    line-height: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Unified input box base */
.search-input-box {
    background-color: white;
    height: 3rem;
    padding-left: 1rem;
    padding-right: 1rem;
    border-radius: 0.75rem;
    border: 1px solid #E5E7EB;
    transition: all 0.2s ease;
    position: relative;
    display: flex;
    align-items: center;
    min-width: 0;
}

/* When an autocomplete dropdown is open, raise the hosting input box
   above its siblings within the search panel so the dropdown paints
   over adjacent input fields. Previously used isolation:isolate which
   trapped the dropdown behind sibling input boxes on Android Chrome. */
.search-input-box:has(.autocomplete-results:not(.hidden)) {
    z-index: 50;
}

.search-input-box:hover {
    background-color: #F9FAFB;
}

.search-input-box:focus-within {
    border-color: #0A1E3D;
    box-shadow: 0 0 0 3px rgba(32, 60, 148, 0.1);
}

.search-input-box .input-icon {
    width: 1.25rem;
    height: 1.25rem;
    color: #9CA3AF;
    flex-shrink: 0;
    transition: color 0.2s ease;
}

.search-input-box:focus-within .input-icon {
    color: #0A1E3D;
}

/* Search form grid standardization */
.search-form-grid {
    display: grid;
    gap: 0.75rem;
    align-items: stretch;
}

/* Responsive search button */
.search-btn-primary {
    background-color: #0A1E3D;
    color: white;
    height: 3rem;
    padding-left: 2rem;
    padding-right: 2rem;
    border-radius: 0.75rem;
    font-weight: 700;
    font-size: 1rem;
    box-shadow: 0 4px 20px -5px rgba(32, 60, 148, 0.15);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    position: relative;
    overflow: hidden;
    white-space: nowrap;
    border: none;
    cursor: pointer;
}

.search-btn-primary:hover {
    background-color: #1A3A6B;
    box-shadow: 0 10px 30px -5px rgba(32, 60, 148, 0.2);
}

.search-btn-primary:active {
    transform: scale(0.98);
}

.search-btn-primary i,
.search-btn-primary svg {
    width: 1.25rem;
    height: 1.25rem;
    transition: transform 0.3s ease;
}

.search-btn-primary:hover i,
.search-btn-primary:hover svg {
    transform: translateX(2px);
}

/* Sticky Search Fixes */
#search-panel.is-sticky .search-input-box,
#search-panel.is-sticky .input-container {
    background-color: #F8FAFC;
    border-color: #E2E8F0;
}

#search-panel.is-sticky .search-input-box:hover,
#search-panel.is-sticky .input-container:hover {
    background-color: #F1F5F9;
}

#search-panel.is-sticky .search-label,
#search-panel.is-sticky label {
    color: #64748B;
}

#search-panel.is-sticky .search-input,
#search-panel.is-sticky input {
    color: #1E293B;
}

#search-panel.is-sticky .search-input::placeholder,
#search-panel.is-sticky input::placeholder {
    color: #94A3B8;
}

/* Improved Sticky Tabs Readability */
#search-panel.is-sticky {
    background-color: rgba(255, 255, 255, 0.98);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-color: rgba(0, 0, 0, 0.08);
    box-shadow: 0 4px 24px -4px rgba(0, 0, 0, 0.12);
}

#search-panel.is-sticky #search-tabs-container {
    background-color: #F1F5F9;
    box-shadow: none;
    padding: 0.375rem;
    margin-bottom: 1rem;
}

#search-panel.is-sticky.is-collapsed #search-tabs-container {
    margin-bottom: 0;
}

#search-panel.is-sticky .search-tab:not(.active) {
    color: #64748B;
}

#search-panel.is-sticky .search-tab:not(.active):hover {
    color: #0A1E3D;
    background-color: rgba(32, 60, 148, 0.06);
}

/* Button Enhancements */
.btn-primary {
    position: relative;
    overflow: hidden;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.btn-primary:active {
    transform: scale(0.98);
}

.card-hover {
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.card-hover:hover {
    transform: translateY(-8px);
}

/* Accent Line */
.accent-line {
    position: relative;
}

.accent-line::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: -12px;
    width: 60px;
    height: 4px;
    background: linear-gradient(90deg, #0A1E3D 0%, #3D6FBE 100%);
    border-radius: 2px;
}

/* Mobile-first responsive improvements */
@media (max-width: 639px) {
    .search-form-grid {
        gap: 0.625rem;
    }

    .search-input-box {
        height: 3rem;
        padding-left: 0.875rem;
        padding-right: 0.875rem;
    }

    .search-btn-primary {
        width: 100%;
        height: 3.25rem;
        font-size: 0.9375rem;
    }

    .search-label {
        font-size: 9px;
    }

    .search-input {
        font-size: 0.8125rem;
    }

    #search-tabs-container {
        justify-content: center;
        gap: 0.25rem;
    }
}

@media (min-width: 640px) and (max-width: 767px) {
    .search-form-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .search-btn-primary {
        grid-column: span 2;
    }
}

@media (min-width: 768px) and (max-width: 1023px) {
    .search-btn-primary {
        min-width: 160px;
    }
}

/* Radio button styling for glass panels */
.search-form input[type="radio"] {
    accent-color: #0A1E3D;
}

#search-panel.is-sticky .search-form input[type="radio"]+span {
    color: #374151;
}

#search-panel.is-sticky .search-form label:hover input[type="radio"]+span {
    color: #0A1E3D;
}

/* Custom checkbox styling */
.custom-checkbox {
    appearance: none;
    width: 1.25rem;
    height: 1.25rem;
    border: 2px solid #D1D5DB;
    border-radius: 0.375rem;
    transition: all 0.2s ease;
    cursor: pointer;
    background-color: transparent;
}

.custom-checkbox:hover {
    border-color: #0A1E3D;
}

.custom-checkbox:checked {
    background-color: #0A1E3D;
    border-color: #0A1E3D;
}

.custom-checkbox:focus {
    box-shadow: 0 0 0 3px rgba(32, 60, 148, 0.2);
    outline: none;
}

.custom-checkbox:checked+.check-icon {
    opacity: 1;
}

/* Popover improvements */
.traveler-popover {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    width: 20rem;
    background-color: white;
    border-radius: 0.75rem;
    box-shadow: 0 20px 40px -5px rgba(32, 60, 148, 0.25);
    padding: 1.25rem;
    z-index: 60;
    border: 1px solid #F3F4F6;
    opacity: 0;
    visibility: hidden;
    transform: translateY(8px);
    transition: all 0.2s ease;
}

.traveler-popover.is-open,
.traveler-popover:not(.hidden) {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

/* Counter button styling */
.counter-btn {
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    border: 1px solid #E5E7EB;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #555555;
    transition: all 0.2s ease;
    font-weight: 600;
    font-size: 1.125rem;
    line-height: 1;
    background: white;
    cursor: pointer;
}

.counter-btn:hover {
    border-color: #0A1E3D;
    color: #0A1E3D;
    background-color: #F5F3EE;
}

.counter-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.counter-btn:disabled:hover {
    border-color: #E5E7EB;
    color: #555555;
    background-color: white;
}

.counter-btn:active:not(:disabled) {
    transform: scale(0.95);
}

/* Custom select dropdown styling */
.custom-select .custom-options {
    animation: dropdownFade 0.15s ease-out;
}

@keyframes dropdownFade {
    from {
        opacity: 0;
        transform: translateY(-4px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.custom-select .option-item {
    transition: background-color 0.15s ease;
}

.custom-select .option-item:hover {
    background-color: #F5F3EE;
}

.custom-select .option-item:active {
    background-color: #E8EDFC;
}

/* Time picker specific styling */
#tr-time-opts .option-item {
    padding: 0.625rem 1rem;
    font-size: 0.875rem;
    font-weight: 500;
}

/* Sticky state adjustments for checkbox */
#search-panel.is-sticky .custom-checkbox {
    border-color: #D1D5DB;
}

#search-panel.is-sticky label span {
    color: #374151;
}

#search-panel.is-sticky label:hover span {
    color: #0A1E3D;
}

/* Focus visible for accessibility */
.search-input:focus-visible,
.search-btn-primary:focus-visible,
.search-tab:focus-visible {
    outline: 2px solid #0A1E3D;
    outline-offset: 2px;
}

/* Package checkbox label - always dark for readability */
.pkg-checkbox-label {
    color: #374151 !important;
}

label:hover .pkg-checkbox-label {
    color: #0A1E3D !important;
}

/* Sticky state - collapsed to tab bar only */
#search-panel.is-sticky.is-collapsed #search-inputs-container {
    display: none !important;
}

#search-panel.is-sticky #search-inputs-container {
    padding-left: 0;
    padding-right: 0;
    padding-bottom: 0;
}

#search-panel.is-sticky #search-tabs-container {
    margin-bottom: 0;
}

#search-panel.is-sticky:not(.is-collapsed) #search-tabs-container {
    margin-bottom: 1rem;
}

/* Ensure sticky wrapper works — desktop only.
   On mobile the sticky-pin fights with iOS focus auto-scroll, virtual
   keyboard reflows, and popover-driven layout shifts, causing the
   widget to collapse mid-interaction. Disable below lg (1024px). */
#search-container-wrapper {
    position: static;
    top: 0;
    z-index: 50;
}

@media (min-width: 1024px) {
    #search-container-wrapper {
        position: sticky;
    }
}

/* The wrapper sits above the hero but BELOW the page's later sections
   in document paint order. When the autocomplete dropdown hangs below
   the search panel, it must render above "Top Destinations" and
   subsequent sections. Raise the wrapper's stacking context high enough
   to dominate all post-hero content, while staying below the header (z:60).
   On iOS Safari, backdrop-filter inside #search-panel creates a compositing
   layer — force a clean stacking context on the wrapper itself. */
#search-container-wrapper {
    z-index: 55;
    isolation: isolate;
}

/* Raise further while an autocomplete dropdown is visible inside it,
   so the dropdown cleanly paints over everything below the fixed header. */
#search-container-wrapper:has(.autocomplete-results:not(.hidden)) {
    z-index: 59;
}

/* Collapsed sticky tab bar styling */
#search-panel.is-sticky.is-collapsed {
    padding-top: 0.75rem;
    padding-bottom: 0.75rem;
}

#search-panel.is-sticky.is-collapsed #search-tabs-container {
    margin: 0 auto;
    width: fit-content;
}

/* Smooth scrolling for autocomplete containers */
.traveler-popover,
.custom-options {
    scrollbar-width: thin;
    scrollbar-color: #CBD5E1 transparent;
}

.traveler-popover::-webkit-scrollbar,
.custom-options::-webkit-scrollbar {
    width: 6px;
}

.traveler-popover::-webkit-scrollbar-thumb,
.custom-options::-webkit-scrollbar-thumb {
    background-color: #CBD5E1;
    border-radius: 3px;
}

/* Remove border/outline from search inputs */
.search-input {
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
}

.search-input:focus {
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
}

/* Autocomplete dropdown styling - wider and properly positioned */
.autocomplete-results {
    position: absolute !important;
    top: calc(100% + 8px) !important;
    left: 0 !important;
    min-width: 340px !important;
    width: max-content !important;
    max-width: min(500px, 90vw) !important;
    background: white !important;
    border: 1px solid #E5E7EB !important;
    border-radius: 0.75rem !important;
    box-shadow: 0 20px 40px -5px rgba(32, 60, 148, 0.25) !important;
    max-height: 320px !important;
    overflow-y: auto !important;
    z-index: 9999 !important;
    scrollbar-width: thin;
    scrollbar-color: #CBD5E1 transparent;
}

.autocomplete-results::-webkit-scrollbar {
    width: 6px;
}

.autocomplete-results::-webkit-scrollbar-thumb {
    background-color: #CBD5E1;
    border-radius: 3px;
}

/* Legacy fallback for any remaining .p-2 items */
.autocomplete-results .p-2 {
    padding: 0.75rem 1rem !important;
    transition: background-color 0.15s ease;
}

.autocomplete-results .p-2:hover {
    background-color: #F5F3EE !important;
}

/* Loading state in autocomplete */
.autocomplete-results .p-3 {
    padding: 1rem !important;
    text-align: center;
}

/* ── Grouped Autocomplete Items ────────────────────────────────── */

/* Section header (e.g., "Destinations", "Hotels", "Other Locations") */
.ac-section-header {
    padding: 0.3rem 0.75rem 0.2rem;
    font-size: 0.6rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #94A3B8;
    background: #F8FAFC;
    border-bottom: 1px solid #F1F5F9;
    position: sticky;
    top: 0;
    z-index: 1;
    user-select: none;
}

/* Divider between groups (when no label) */
.ac-section-divider {
    height: 1px;
    background: #E2E8F0;
    margin: 0;
}

/* Base autocomplete item */
.ac-item {
    padding: 0.35rem 0.75rem;
    cursor: pointer;
    font-size: 0.75rem;
    color: #334155;
    border-bottom: 1px solid rgba(241, 245, 249, 0.4);
    transition: background-color 0.15s ease;
    line-height: 1.35;
}

.ac-item:last-child {
    border-bottom: 0;
}

.ac-item:hover,
.ac-item-active {
    background-color: #F5F3EE;
}

/* Items under a section header get slight indent */
.ac-section-header + .ac-item,
.ac-section-header + .ac-item ~ .ac-item {
    padding-left: 1.25rem;
}

/* Reset indent for items after a new section header or divider */
.ac-section-divider + .ac-item {
    padding-left: 0.75rem;
}

/* Indented sub-items (individual airports under city group) */
.ac-item-indented {
    padding-left: 2.25rem;
    background-color: rgba(248, 250, 254, 0.5);
    font-size: 0.72rem;
}

.ac-item-indented:hover,
.ac-item-active.ac-item-indented {
    background-color: #EEF2FF;
}

/* City "All Airports" entry */
.ac-item-city {
    background-color: #F8FAFC;
    border-left: 3px solid var(--color-brand-primary, #0A1E3D);
    padding-left: calc(0.75rem - 3px);
}

.ac-item-city:hover,
.ac-item-active.ac-item-city {
    background-color: #EEF2FF;
}

/* Icon in result items */
.ac-icon {
    font-size: 0.85rem;
    flex-shrink: 0;
    margin-top: 0.1rem;
    line-height: 1;
}

/* IATA code badge */
.ac-code {
    display: inline-flex;
    align-items: center;
    padding: 0.0625rem 0.4rem;
    border-radius: 0.25rem;
    background: var(--color-brand-surface, #F5F3EE);
    color: var(--color-brand-primary, #0A1E3D);
    font-size: 0.675rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
}

/* Star rating */
.ac-stars {
    color: #EAB308;
    font-size: 0.7rem;
    letter-spacing: -0.02em;
}

/* Location subtitle */
.ac-location {
    font-size: 0.65rem;
    color: #94A3B8;
    margin-top: 0.05rem;
    line-height: 1.25;
}

/* Ensure input box has relative positioning for dropdown */
.search-input-box {
    position: relative !important;
}

/* ── Autocomplete Selection Chip ── */
.ac-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    width: fit-content;
    background: #EEF2FF;
    border: 1px solid #C7D2FE;
    border-radius: 0.375rem;
    padding: 0.125rem 0.5rem;
    font-size: 0.8rem;
    font-weight: 500;
    color: #1E3A8A;
    line-height: 1.4;
    max-width: 100%;
    cursor: pointer;
    white-space: nowrap;
}

.ac-chip-text {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
}

.ac-chip-code {
    font-family: 'SF Mono', 'Fira Code', monospace;
    font-size: 0.65rem;
    font-weight: 600;
    color: #4338CA;
    background: #DDD6FE;
    padding: 0 0.25rem;
    border-radius: 0.2rem;
    flex-shrink: 0;
}

.ac-chip-clear {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1rem;
    height: 1rem;
    border-radius: 50%;
    background: transparent;
    border: none;
    color: #6366F1;
    font-size: 0.85rem;
    line-height: 1;
    cursor: pointer;
    padding: 0;
    flex-shrink: 0;
    transition: background 0.15s ease, color 0.15s ease;
}

.ac-chip-clear:hover {
    background: #C7D2FE;
    color: #1E3A8A;
}

/* Mobile responsiveness for autocomplete */
@media (max-width: 639px) {
    .autocomplete-results {
        min-width: 280px !important;
        max-width: calc(100vw - 2rem) !important;
        left: 50% !important;
        transform: translateX(-50%) !important;
        max-height: 60vh !important;
    }

    .ac-item-indented {
        padding-left: 1.75rem;
    }

    .ac-section-header {
        font-size: 0.55rem;
        padding: 0.25rem 0.625rem 0.15rem;
    }

    .ac-item {
        padding: 0.3rem 0.625rem;
        font-size: 0.7rem;
    }
}

/* Ensure search forms don't clip dropdowns */
.search-form {
    overflow: visible !important;
}

.search-form-grid {
    overflow: visible !important;
}

#search-inputs-container {
    overflow: visible !important;
}

#search-panel {
    overflow: visible !important;
}

/* Higher z-index for traveler popovers to appear above content */
.traveler-popover {
    z-index: 200 !important;
}

/* Ensure custom-options appear above content */
.custom-options {
    z-index: 200 !important;
}

/* ============================================================
   MOBILE TOUCH & UX POLISH
   ============================================================ */

/* 1. Remove the blue flash on tap (iOS/Android) */
a,
button,
[role="button"],
.cursor-pointer,
input,
select,
label {
    -webkit-tap-highlight-color: transparent;
}

/* 2. Eliminate the 300 ms tap delay on interactive controls */
a,
button,
[role="button"],
.search-tab,
.search-btn-primary,
.counter-btn,
.carousel-dot,
.currency-item,
.currency-item-mobile,
.lang-item,
.lang-item-mobile {
    touch-action: manipulation;
}

/* 3. Mobile-menu touch targets – min 48 px tall */
#currency-trigger-mobile,
#lang-trigger-mobile {
    min-height: 48px;
    padding-top: 0.75rem;
    padding-bottom: 0.75rem;
}

/* 4. Transfers mobile swap button */
#btn-swap-transfer-mobile {
    -webkit-user-select: none;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
}

/* 5. On very small screens (≤ 380 px) shrink tab padding so all 5 tabs fit */
@media (max-width: 380px) {
    .search-tab {
        padding-left: 0.625rem;
        padding-right: 0.625rem;
    }
}

/* 6. Traveler popovers: clamp width & height so they never overflow on narrow viewports */
@media (max-width: 639px) {
    .traveler-popover {
        width: min(20rem, calc(100vw - 2rem)) !important;
        max-height: 60vh !important;
        overflow-y: auto !important;
    }

    /* Right-anchored popovers (flights / tours pax) — keep within viewport */
    #fl-pax-menu,
    #tour-pax-menu {
        right: 0;
        left: auto !important;
        max-width: calc(100vw - 2rem);
    }
}

/* 7. Hero on mobile: tighter vertical padding so the CTA stays visible */
@media (max-width: 639px) {
    .hero-slide .relative.z-10 {
        padding-bottom: 5rem;
    }
}

/* 8. Deal cards on mobile: let image breathe a little more */
@media (max-width: 639px) {
    #exclusive-deals .relative.h-48 {
        height: 11rem;
    }
}

/* 9. Newsletter subscribe button – always full width on mobile */
@media (max-width: 639px) {
    #newsletter-form-btn,
    form .bg-brand-primary[type="button"] {
        width: 100%;
    }
}

/* 10. Sticky search bar: when collapsed on mobile hide the remaining margin */
@media (max-width: 639px) {
    #search-panel.is-sticky.is-collapsed {
        padding-top: 0.5rem;
        padding-bottom: 0.5rem;
    }
}

/* 11. Smooth momentum scroll inside popovers & dropdowns on iOS */
.traveler-popover,
.autocomplete-results,
.custom-options,
#rooms-container,
#pkg-rooms-container,
#modal-rooms-container {
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
}

/* 12. Body scroll lock when modal is open — no position:fixed, no visual jump */
html.modal-open,
html.modal-open body {
    overflow: hidden !important;
    height: 100% !important;
}

#deal-modal {
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
}

/* ── Flatpickr Customizations ── */

/* Remove today's date highlight circle */
.flatpickr-day.today {
    border-color: transparent;
}
.flatpickr-day.today:hover {
    border-color: #e6e6e6;
    background: #e6e6e6;
}

/* Disable month/year dropdown selectors — display as plain text */
.flatpickr-current-month .flatpickr-monthDropdown-months {
    appearance: none;
    -webkit-appearance: none;
    pointer-events: none;
    background: transparent;
    border: none;
    padding-right: 0;
}
.flatpickr-current-month .flatpickr-monthDropdown-months::-ms-expand {
    display: none;
}
.flatpickr-current-month .numInputWrapper {
    pointer-events: none;
}
.flatpickr-current-month .numInputWrapper .arrowUp,
.flatpickr-current-month .numInputWrapper .arrowDown {
    display: none;
}

/* On mobile/small tablets, force single-month view for 2-month calendars */
@media (max-width: 767px) {
    .flatpickr-calendar {
        left: 50% !important;
        transform: translateX(-50%) !important;
    }
    /* Force multiMonth calendar to single-month width */
    .flatpickr-calendar.multiMonth {
        width: 307px !important;
    }
    .flatpickr-calendar.multiMonth .flatpickr-months .flatpickr-month:nth-child(n+2) {
        display: none !important;
    }
    .flatpickr-calendar.multiMonth .flatpickr-weekdaycontainer:nth-child(n+2) {
        display: none !important;
    }
    .flatpickr-calendar.multiMonth .dayContainer:nth-child(n+2) {
        display: none !important;
    }
    .flatpickr-calendar.multiMonth .flatpickr-innerContainer,
    .flatpickr-calendar.multiMonth .flatpickr-rContainer,
    .flatpickr-calendar.multiMonth .flatpickr-days,
    .flatpickr-calendar.multiMonth .flatpickr-weekdays {
        width: 307px !important;
        overflow: hidden !important;
    }
}

/* ─── Recent Searches Strip ─────────────────────────────────────────── */
.recent-searches {
    margin-top: 0.75rem;
    padding-top: 0.75rem;
    border-top: 1px solid rgba(0, 0, 0, 0.08);
}

.recent-searches-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.5rem;
    padding: 0 0.25rem;
}

.recent-searches-label {
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #475569;
}

.recent-searches-clear {
    font-size: 0.7rem;
    font-weight: 500;
    color: #64748B;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0.125rem 0.375rem;
    border-radius: 0.25rem;
    transition: color 0.2s, background 0.2s;
}

.recent-searches-clear:hover {
    color: #1E293B;
    background: rgba(0, 0, 0, 0.06);
}

.recent-searches-scroll {
    display: flex;
    gap: 0.5rem;
    overflow-x: auto;
    padding-bottom: 0.25rem;
    -ms-overflow-style: none;
    scrollbar-width: none;
}

.recent-searches-scroll::-webkit-scrollbar {
    display: none;
}

.recent-chip {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.375rem 0.5rem 0.375rem 0.625rem;
    background: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 9999px;
    cursor: pointer;
    white-space: nowrap;
    flex-shrink: 0;
    transition: background 0.2s, border-color 0.2s, box-shadow 0.2s;
    font-size: 0.75rem;
    font-weight: 500;
    color: #334155;
    min-height: 2.25rem;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
}

.recent-chip:hover {
    background: rgba(255, 255, 255, 0.95);
    border-color: rgba(0, 0, 0, 0.18);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.recent-chip-icon {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    color: #64748B;
}

.recent-chip-icon svg {
    width: 14px;
    height: 14px;
}

.recent-chip-route {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    font-weight: 700;
    letter-spacing: 0.02em;
}

.recent-chip-arrow {
    opacity: 0.6;
    font-size: 0.7rem;
}

.recent-chip-details {
    display: flex;
    align-items: center;
    gap: 0.125rem;
    opacity: 0.8;
    font-size: 0.7rem;
}

.recent-chip-sep {
    opacity: 0.4;
    margin: 0 0.125rem;
}

.recent-chip-remove {
    background: none;
    border: none;
    color: #94A3B8;
    font-size: 0.95rem;
    line-height: 1;
    cursor: pointer;
    padding: 0 0.125rem;
    margin-left: 0.125rem;
    transition: color 0.2s;
    flex-shrink: 0;
}

.recent-chip-remove:hover {
    color: #475569;
}

/* ─── Sticky-mode overrides ─────────────────────────────────────────── */
#search-panel.is-sticky .recent-searches {
    border-top-color: #E2E8F0;
}

#search-panel.is-sticky .recent-searches-label {
    color: #64748B;
}

#search-panel.is-sticky .recent-searches-clear {
    color: #94A3B8;
}

#search-panel.is-sticky .recent-searches-clear:hover {
    color: #475569;
    background: #F1F5F9;
}

#search-panel.is-sticky .recent-chip {
    background: #F1F5F9;
    border-color: #E2E8F0;
    color: #334155;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

#search-panel.is-sticky .recent-chip:hover {
    background: #E2E8F0;
    border-color: #CBD5E1;
}

#search-panel.is-sticky .recent-chip-remove {
    color: #94A3B8;
}

#search-panel.is-sticky .recent-chip-remove:hover {
    color: #475569;
}

/* ─── Collapsed-mode: hide strip ─────────────────────────────────────── */
#search-panel.is-sticky.is-collapsed .recent-searches {
    display: none;
}