/**
 * Mobile Responsive Car Search Form Styles
 * AllCarsCuraçao - Mobile-first responsive design improvements
 * 
 * This file addresses mobile responsiveness issues in the car search form
 * without affecting existing functionality or desktop layouts.
 */

/* Mobile-first responsive breakpoints following Tailwind conventions */
/* sm: 640px, md: 768px, lg: 1024px, xl: 1280px */

/* ===== MOBILE NAVIGATION SYSTEM ===== */

/* Default: Hide mobile navigation on all screens */
.mobile-navigation-system {
    display: none;
}

/* Hide mobile navigation completely on desktop */
@media (min-width: 769px) {
    .mobile-navigation-system,
    .mobile-header,
    .mobile-menu,
    .mobile-menu-overlay {
        display: none !important;
    }
}

/* Mobile and tablet styles (up to 768px) - Button grid layout */
@media (max-width: 768px) {

    /* ===== MOBILE NAVIGATION SYSTEM ===== */

    /* Show mobile navigation only on mobile/tablet */
    .mobile-navigation-system {
        display: block !important;
    }

    /* Hide desktop header completely on mobile */
    header.bg-transparent,
    header.bg-slate-900,
    header[class*="bg-transparent"],
    header[class*="bg-slate-900"] {
        display: none !important;
    }

    /* Mobile sticky header */
    .mobile-header {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        z-index: 9999 !important;
        background: transparent !important; /* Start transparent */
        height: 60px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        padding: 0 1rem !important;
        box-shadow: none !important; /* Start without shadow */
        transition: all 0.3s ease-in-out !important; /* Smooth transitions */
    }

    /* Mobile header when scrolled */
    .mobile-header.scrolled {
        background: rgba(15, 23, 42, 0.95) !important; /* slate-900 with transparency */
        backdrop-filter: blur(10px) !important;
        -webkit-backdrop-filter: blur(10px) !important;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1) !important;
    }

    /* Mobile header logo */
    .mobile-header .mobile-logo {
        height: 32px !important;
        width: auto !important;
        filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.5)) !important; /* Add shadow for contrast */
        transition: filter 0.3s ease-in-out !important;
    }

    /* Mobile header when scrolled - remove logo shadow */
    .mobile-header.scrolled .mobile-logo {
        filter: none !important;
    }

    /* Hamburger menu button */
    .mobile-hamburger {
        background: transparent !important;
        border: none !important;
        color: white !important;
        padding: 8px !important;
        cursor: pointer !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        min-width: 44px !important;
        min-height: 44px !important;
        border-radius: 6px !important;
        transition: all 0.15s ease-in-out !important;
    }

    .mobile-hamburger:hover {
        background: rgba(255, 255, 255, 0.1) !important;
    }

    .mobile-hamburger i {
        width: 24px !important;
        height: 24px !important;
        filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.5)) !important; /* Icon shadow for contrast */
        transition: filter 0.3s ease-in-out !important;
    }

    /* Mobile header when scrolled - remove hamburger icon shadow */
    .mobile-header.scrolled .mobile-hamburger i {
        filter: none !important;
    }

    /* Mobile slide-out menu overlay */
    .mobile-menu-overlay {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        background: rgba(0, 0, 0, 0.5) !important;
        z-index: 10000 !important;
        opacity: 0 !important;
        visibility: hidden !important;
        transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out !important;
    }

    .mobile-menu-overlay.active {
        opacity: 1 !important;
        visibility: visible !important;
    }

    /* Mobile slide-out menu */
    .mobile-menu {
        position: fixed !important;
        top: 0 !important;
        right: -320px !important;
        width: 320px !important;
        height: 100vh !important;
        background: white !important;
        z-index: 10001 !important;
        transition: right 0.3s ease-in-out !important;
        overflow-y: auto !important;
        box-shadow: -4px 0 8px rgba(0, 0, 0, 0.1) !important;
    }

    .mobile-menu.active {
        right: 0 !important;
    }

    /* Mobile menu header */
    .mobile-menu-header {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        padding: 1rem !important;
        border-bottom: 1px solid #e2e8f0 !important;
        background: #f8fafc !important;
    }

    .mobile-menu-logo {
        height: 28px !important;
        width: auto !important;
    }

    /* Mobile menu close button */
    .mobile-menu-close {
        background: transparent !important;
        border: none !important;
        color: #64748b !important;
        padding: 8px !important;
        cursor: pointer !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        min-width: 40px !important;
        min-height: 40px !important;
        border-radius: 6px !important;
        transition: background-color 0.15s ease-in-out !important;
    }

    .mobile-menu-close:hover {
        background: #e2e8f0 !important;
        color: #475569 !important;
    }

    .mobile-menu-close i {
        width: 20px !important;
        height: 20px !important;
    }

    /* Mobile menu content */
    .mobile-menu-content {
        padding: 1rem !important;
    }

    /* Mobile menu sections */
    .mobile-menu-section {
        margin-bottom: 2rem !important;
    }

    .mobile-menu-section:last-child {
        margin-bottom: 0 !important;
    }

    .mobile-menu-section-title {
        font-size: 0.75rem !important;
        font-weight: 600 !important;
        text-transform: uppercase !important;
        color: #64748b !important;
        margin-bottom: 0.75rem !important;
        letter-spacing: 0.05em !important;
    }

    /* Mobile menu navigation items */
    .mobile-menu-nav-item {
        display: flex !important;
        align-items: center !important;
        padding: 0.625rem 0 !important; /* Reduced vertical padding for more compact menu */
        color: #374151 !important;
        text-decoration: none !important;
        font-weight: 500 !important;
        font-size: 0.9375rem !important; /* Slightly larger text */
        border-bottom: 1px solid #f1f5f9 !important;
        transition: all 0.15s ease-in-out !important;
    }

    .mobile-menu-nav-item:hover {
        color: #0ea5e9 !important;
        background-color: rgba(14, 165, 233, 0.05) !important; /* Subtle hover background */
    }

    .mobile-menu-nav-item:last-child {
        border-bottom: none !important;
    }

    .mobile-menu-nav-item i {
        width: 20px !important; /* Slightly larger icons */
        height: 20px !important;
        margin-right: 12px !important; /* Proper spacing between icon and text */
        color: #64748b !important;
        flex-shrink: 0 !important; /* Prevent icon from shrinking */
    }

    .mobile-menu-nav-item:hover i {
        color: #0ea5e9 !important;
    }

    .mobile-menu-nav-item span {
        flex: 1 !important; /* Allow text to take remaining space */
        line-height: 1.4 !important; /* Better line height for readability */
        margin-left: 10px !important; /* Add space between icon and text */
    }

    /* Mobile menu selectors (language, currency) */
    .mobile-menu-selector {
        width: 100% !important;
        padding: 0.875rem !important; /* Increased padding for better touch targets */
        border: 1px solid #d1d5db !important;
        border-radius: 8px !important; /* Match button radius */
        background: white !important;
        color: #374151 !important;
        font-size: 0.9375rem !important; /* Slightly larger text */
        margin-bottom: 0.75rem !important;
        appearance: none !important;
        background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m6 8 4 4 4-4'/%3e%3c/svg%3e") !important;
        background-position: right 0.75rem center !important; /* Better positioning */
        background-repeat: no-repeat !important;
        background-size: 1.5em 1.5em !important;
        padding-right: 2.5rem !important;
        font-weight: 500 !important;
        cursor: pointer !important;
        transition: all 0.15s ease-in-out !important;
    }

    .mobile-menu-selector:focus {
        outline: none !important;
        border-color: #0ea5e9 !important;
        box-shadow: 0 0 0 3px rgba(14, 165, 233, 0.1) !important;
    }

    .mobile-menu-selector:hover {
        border-color: #cbd5e1 !important;
    }

    /* Mobile menu manage booking button */
    .mobile-menu-manage-booking {
        width: 100% !important;
        background: #0ea5e9 !important;
        color: white !important;
        border: none !important;
        padding: 1rem 1rem !important; /* Increased padding for better touch target */
        border-radius: 8px !important; /* Slightly more rounded */
        font-weight: 600 !important;
        font-size: 0.9375rem !important; /* Slightly larger text */
        cursor: pointer !important;
        transition: all 0.15s ease-in-out !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        text-decoration: none !important;
        margin-top: 1rem !important; /* Add top margin for spacing */
    }

    .mobile-menu-manage-booking:hover {
        background: #0284c7 !important;
        transform: translateY(-1px) !important; /* Subtle lift effect */
        box-shadow: 0 4px 8px rgba(14, 165, 233, 0.3) !important;
    }

    .mobile-menu-manage-booking i {
        width: 20px !important; /* Larger icon to match nav items */
        height: 20px !important;
        margin-right: 0.75rem !important; /* Better spacing */
        flex-shrink: 0 !important;
    }

    .mobile-menu-manage-booking span {
        line-height: 1.4 !important;
    }

    /* Ensure main content doesn't overlap with mobile header */
    .mobile-nav-active main,
    .mobile-nav-active .main-content,
    .mobile-nav-active .container {
        margin-top: 60px !important; /* Push content down by header height */
    }

    /* Do NOT add margin to .relative elements as they contain hero sections */
    /* Hero sections should start from top with transparent header overlay */

    /* MOBILE TAB BUTTONS - Convert tabs to 2x2 button grid */

    /* Tab container - change from horizontal flex to grid */
    .max-w-6xl.mx-auto.mb-0.relative .flex.justify-between.items-end {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 1rem !important;
    }

    /* Tab buttons container - convert to grid layout (2x2 grid for 4 visible tabs) */
    .max-w-6xl.mx-auto.mb-0.relative .flex.justify-between.items-end > .flex:first-child {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 0.75rem !important;
        width: calc(100% - 1rem) !important; /* Account for left and right margins */
        margin-left: 0.5rem !important; /* Match search form card margins */
        margin-right: 0.5rem !important; /* Match search form card margins */
        margin-bottom: 1rem !important;
    }

    /* Individual tab buttons - mobile button styling */
    .tab-button {
        width: 100% !important;
        padding: 1rem 0.75rem !important;
        font-size: 0.875rem !important;
        font-weight: 600 !important;
        text-align: center !important;
        border-radius: 8px !important;
        border: 2px solid #e2e8f0 !important;
        background: #f8fafc !important;
        color: #475569 !important;
        transition: all 0.2s ease-in-out !important;
        min-height: 3rem !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) !important;
    }

    /* Active tab button styling */
    .tab-button.active {
        background: #0ea5e9 !important;
        color: white !important;
        border-color: #0ea5e9 !important;
        box-shadow: 0 4px 6px rgba(14, 165, 233, 0.3) !important;
        transform: translateY(-1px) !important;
    }

    /* Tab button hover states for touch devices */
    .tab-button:hover {
        background: #e2e8f0 !important;
        border-color: #cbd5e1 !important;
        transform: translateY(-1px) !important;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15) !important;
    }

    .tab-button.active:hover {
        background: #0284c7 !important;
        border-color: #0284c7 !important;
    }

    /* Hide KPI indicators on mobile to save space */
    .max-w-6xl.mx-auto.mb-0.relative .flex.justify-between.items-end > .flex:last-child {
        display: none !important;
    }

    /* Hidden tabs (international-brands) should remain hidden */
    .tab-button[style*="display: none"] {
        display: none !important;
    }

    /* Hide Best Price tab and content on mobile devices */
    #best-price-tab,
    #best-price-search {
        display: none !important;
    }

    /* Search form container improvements - MOBILE ONLY */
    #classic-search,
    #ai-search,
    #autopass-search,
    #international-brands-search,
    #airport-transfer-search,
    #best-price-search {
        padding: 0.5rem 1rem 1rem 1rem !important; /* More side/bottom padding, consistent top */
        margin-left: 0.5rem !important;
        margin-right: 0.5rem !important;
        border-top-left-radius: 8px !important; /* Restore rounded corners on mobile */
        padding-top: 0.5rem !important; /* Match the form gap for consistent spacing */
    }

    /* Form layout - use flex-wrap to allow side-by-side date-time pairs - MOBILE ONLY (excluding AI search and AutoPASS) */
    #classic-search .search-form,
    #international-brands-search form,
    #airport-transfer-search form,
    #best-price-search form {
        display: flex !important;
        flex-direction: row !important; /* Allow horizontal layout */
        flex-wrap: wrap !important; /* Wrap to new lines */
        gap: 0.25rem !important;
        align-items: stretch !important;
        padding-top: 0 !important;
        margin-top: 0 !important;
    }

    /* AI search form - use default block layout on mobile too */
    #ai-search form {
        display: block !important; /* Block layout for textarea with absolute button */
    }

    /* AutoPASS search form - use default block layout for voucher input grid */
    #autopass-search form {
        display: block !important; /* Block layout for centered voucher inputs */
    }



    /* Form containers - removed to allow flexible layouts */

    /* Location input section - consistent top spacing */
    #classic-search .search-form > div:first-child {
        width: 100% !important;
        min-width: auto !important;
        margin-bottom: 0 !important; /* Remove extra margin for consistency */
        margin-top: 0 !important; /* Ensure consistent top spacing */
        padding-top: 0 !important; /* Remove any padding that affects top spacing */
    }
    
    /* Radio buttons container - improve spacing and layout */
    #classic-search .search-form .flex.items-center.gap-4 {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 0.375rem !important; /* Further reduced gap for tighter spacing */
        margin-bottom: 0 !important; /* Remove bottom margin to match form gap */
        margin-top: 0 !important; /* Remove top margin */
        padding-top: 0 !important; /* Remove any padding */
    }
    
    /* Individual radio button containers */
    #classic-search .search-form .flex.items-center.gap-4 > div {
        width: 100% !important;
    }
    
    /* Radio button inputs - increase touch target size */
    #classic-search input[type="radio"] {
        width: 1rem !important;
        height: 1rem !important;
        margin-right: 0.5rem !important;
    }
    
    /* Radio button labels - improve readability */
    #classic-search input[type="radio"] + label {
        font-size: 0.875rem !important;
        line-height: 1.25rem !important;
        padding: 0.25rem 0 !important;
    }
    
    /* Location input field - ensure proper padding for icons */
    #classic-search input[name="location"],
    #ai-search input[name="location"],
    #autopass-search input[name="location"],
    #international-brands-search input[name="location"],
    #airport-transfer-search input[name="location"],
    #best-price-search input[name="location"] {
        font-size: 1rem !important; /* Prevent zoom on iOS */
        padding: 0.75rem 3rem 0.75rem 2.5rem !important; /* Left padding for map icon, right padding for clear button */
        min-height: 2.75rem !important; /* Ensure adequate touch target */
        padding-right: 3rem !important; /* Ensure space for clear button on right */
        box-sizing: border-box !important;
    }
    
    /* COMPACT SIDE-BY-SIDE LAYOUT FOR PICKUP AND RETURN FIELDS */

    /* Location field - full width on its own row */
    #classic-search .flex-1,
    #ai-search .flex-1,
    #autopass-search .flex-1,
    #international-brands-search .flex-1,
    #airport-transfer-search .flex-1,
    #best-price-search .flex-1 {
        width: 100% !important;
        flex: 0 0 100% !important; /* Take full width and force new line */
        margin-bottom: 0.25rem !important;
    }












    


    /* AI Search textarea - mobile-first approach (matches old working version) */
    #ai-search textarea,
    .ai-query-textarea {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        resize: vertical !important;
        /* Mobile-first: no right padding for button */
        padding-right: 1rem !important;
        padding-bottom: 4.5rem !important; /* Space for button below on mobile */
        min-height: 5rem !important; /* Taller for mobile */
    }



    /* Make AI search button smaller on mobile with proper spacing - MOBILE ONLY */
    @media (max-width: 768px) {
        #ai-search button[type="submit"] {
            padding: 0.375rem 0.75rem !important; /* Smaller padding */
            font-size: 0.75rem !important; /* Smaller text */
            border-radius: 0.25rem !important; /* Smaller border radius */
            margin-bottom: 3px !important; /* Just bottom margin for spacing from textarea */
        }

        #ai-search button[type="submit"] i {
            width: 0.75rem !important; /* Smaller icon */
            height: 0.75rem !important;
            margin-right: 0.25rem !important; /* Less margin */
        }

        /* AI button container positioning with proper spacing - MOBILE */
        #ai-search .absolute.bottom-2.right-2 {
            bottom: 0.75rem !important; /* More space from bottom */
            right: 0.75rem !important; /* More space from right */
        }
    }

    /* Form field containers - ensure 100% width - MOBILE ONLY */
    .form-group,
    .input-group,
    .field-container {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }

    /* Input focus states - enhance for mobile */
    #classic-search input:focus {
        outline: none !important;
        ring-width: 2px !important;
        ring-color: #0ea5e9 !important;
        border-color: #0ea5e9 !important;
    }

    /* MOBILE ONLY - Date and Time field styles */
    /* Date fields (w-36) - Full width with consistent padding */
    #classic-search .w-36,
    #ai-search .w-36,
    #autopass-search .w-36,
    #international-brands-search .w-36,
    #airport-transfer-search .w-36,
    #best-price-search .w-36 {
        width: 100% !important;
        flex: 0 0 100% !important;
        margin-bottom: 0 !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }

    /* Time fields - Custom class to avoid Tailwind conflicts - MOBILE ONLY */
    #classic-search .time-field-container,
    #ai-search .time-field-container,
    #autopass-search .time-field-container,
    #international-brands-search .time-field-container,
    #airport-transfer-search .time-field-container,
    #best-price-search .time-field-container,
    .time-field-container {
        width: 100% !important; /* Full width without Tailwind interference */
        flex: 0 0 100% !important;
        margin-bottom: 0 !important;
        max-width: 100% !important;
        min-width: 100% !important;
        box-sizing: border-box !important;
    }

    /* Flatpickr wrapper styling - ensures full width for time picker containers - MOBILE ONLY */
    .time-field-container .flatpickr-wrapper,
    #classic-search .time-field-container .flatpickr-wrapper,
    #ai-search .time-field-container .flatpickr-wrapper,
    #autopass-search .time-field-container .flatpickr-wrapper,
    #international-brands-search .time-field-container .flatpickr-wrapper,
    #airport-transfer-search .time-field-container .flatpickr-wrapper,
    #best-price-search .time-field-container .flatpickr-wrapper {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 100% !important;
        display: block !important;
        box-sizing: border-box !important;
    }

    /* Target the actual input inside the Flatpickr wrapper - MOBILE ONLY */
    .time-field-container .flatpickr-wrapper input,
    .time-field-container input[id*="TimePicker"],
    #pickupTimePicker,
    #returnTimePicker {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 100% !important;
        box-sizing: border-box !important;
    }
}

/* Desktop and tablet styles - AI textarea with button positioning */
@media (min-width: 769px) {
    /* Ensure relative positioning container works correctly */
    #ai-search .relative {
        position: relative !important;
    }

    /* AI Search textarea - add padding for absolutely positioned button */
    #ai-search textarea,
    .ai-query-textarea {
        padding-right: 180px !important; /* Space for button on desktop */
        padding-bottom: 50px !important; /* Space for button on desktop */
    }

    /* Desktop AI button - larger size and better spacing */
    #ai-search button[type="submit"] {
        padding: 0.5rem 1rem !important; /* Larger padding on desktop */
        font-size: 0.875rem !important; /* Larger text on desktop */
        margin-bottom: 6px !important; /* Just bottom margin on desktop */
    }

    #ai-search button[type="submit"] i {
        width: 1rem !important; /* Larger icon on desktop */
        height: 1rem !important;
        margin-right: 0.375rem !important; /* More margin on desktop */
    }

    /* Desktop AI button container positioning - override Tailwind classes */
    #ai-search .absolute.bottom-2.right-2 {
        position: absolute !important;
        bottom: 0.2rem !important; /* Match Tailwind bottom-2 but ensure it's applied */
        right: 0.5rem !important; /* Match Tailwind right-2 but ensure it's applied */
        z-index: 10 !important; /* Ensure button stays on top */
    }
}

/* Small mobile devices (up to 480px) */
@media (max-width: 480px) {

    /* Tab buttons - larger touch targets for very small screens */
    .tab-button {
        padding: 1.25rem 0.5rem !important;
        font-size: 0.8125rem !important;
        min-height: 3.5rem !important;
    }

    /* Tab container - increase gap for better touch interaction */
    .max-w-6xl.mx-auto.mb-0.relative .flex.justify-between.items-end > .flex:first-child {
        gap: 1rem !important;
        margin-bottom: 1.5rem !important;
        width: calc(100% - 0.5rem) !important; /* Account for smaller margins on small screens */
        margin-left: 0.25rem !important; /* Match search form card margins on small screens */
        margin-right: 0.25rem !important; /* Match search form card margins on small screens */
    }

    /* Adjust padding on very small screens - apply to all search forms */
    #classic-search,
    #ai-search,
    #autopass-search,
    #international-brands-search,
    #airport-transfer-search,
    #best-price-search {
        padding: 0.5rem 0.75rem 0.75rem 0.75rem !important; /* Maintain breathing room */
        margin-left: 0.25rem !important;
        margin-right: 0.25rem !important;
    }

    /* Ensure top padding matches form gap on small screens */
    #classic-search,
    #ai-search,
    #autopass-search,
    #international-brands-search,
    #airport-transfer-search,
    #best-price-search {
        padding-top: 0.5rem !important; /* Keep consistent with form gap */
    }

    /* Maintain consistent gaps for touch interaction (excluding AI search and AutoPASS) */
    #classic-search .search-form,
    #international-brands-search form,
    #airport-transfer-search form,
    #best-price-search form {
        gap: 0.5rem !important; /* Keep consistent with base mobile */
    }



    /* Radio buttons - maintain proper spacing */
    #classic-search .search-form .flex.items-center.gap-4 {
        gap: 0.375rem !important; /* Consistent with base mobile spacing */
        margin-bottom: 0 !important; /* Remove margin to match form gap */
    }
    
    /* Larger touch targets for very small screens */
    #classic-search input[type="radio"] {
        width: 1.25rem !important;
        height: 1.25rem !important;
    }
    
    /* Increase input padding for better usability */
    #classic-search input[name="location"],
    #ai-search input[name="location"],
    #autopass-search input[name="location"],
    #international-brands-search input[name="location"],
    #airport-transfer-search input[name="location"],
    #best-price-search input[name="location"] {
        padding: 1rem 3.5rem 1rem 3rem !important; /* Extra right padding for clear button */
        min-height: 3rem !important;
        font-size: 1.125rem !important;
    }

    /* Date and time inputs for small screens */
    #classic-search input[id*="DatePicker"],
    #classic-search input[id*="TimePicker"] {
        padding: 1rem 3rem !important;
        min-height: 3rem !important;
        font-size: 1.125rem !important;
    }

    /* Clear button positioning for small screens */
    #classic-search .clear-location-btn,
    #ai-search .clear-location-btn,
    #autopass-search .clear-location-btn,
    #international-brands-search .clear-location-btn,
    #airport-transfer-search .clear-location-btn,
    #best-price-search .clear-location-btn {
        right: 1rem !important; /* Adjust for increased padding */
        min-width: 2.5rem !important; /* Larger touch target for small screens */
        min-height: 2.5rem !important;
    }
    
    /* Search button - larger for better accessibility */
    #classic-search button[type="submit"] {
        padding: 1.25rem 2rem !important;
        min-height: 3.5rem !important;
        font-size: 1.125rem !important;
    }
}

/* Tablet landscape and larger screens (769px and up) */
@media (min-width: 769px) {

    /* Ensure desktop tab layout is preserved on larger screens */
    .max-w-6xl.mx-auto.mb-0.relative .flex.justify-between.items-end {
        flex-direction: row !important;
        align-items: end !important;
    }

    .max-w-6xl.mx-auto.mb-0.relative .flex.justify-between.items-end > .flex:first-child {
        display: flex !important;
        grid-template-columns: none !important;
        gap: 0 !important;
        width: auto !important;
        margin-bottom: 0 !important;
    }

    .tab-button {
        width: auto !important;
        padding: 0.375rem 0.75rem !important;
        font-size: 0.75rem !important;
        font-weight: 500 !important;
        border-radius: 8px 8px 0 0 !important;
        border: none !important;
        background: #f3f4f6 !important;
        color: #374151 !important;
        min-height: auto !important;
        box-shadow: none !important;
        transform: none !important;
    }

    .tab-button.active {
        background: white !important;
        color: #374151 !important;
        border-color: transparent !important;
        box-shadow: none !important;
        transform: none !important;
    }

    .max-w-6xl.mx-auto.mb-0.relative .flex.justify-between.items-end > .flex:last-child {
        display: flex !important;
    }

    #classic-search {
        border-top-left-radius: 0px !important;
    }

    /* Desktop search form layout - preserve original desktop styling */
    #classic-search,
    #ai-search,
    #autopass-search,
    #international-brands-search,
    #airport-transfer-search,
    #best-price-search {
        padding: 1rem !important; /* Standard desktop padding */
        margin-left: auto !important; /* Allow auto centering margins */
        margin-right: auto !important; /* Allow auto centering margins */
        border-top-left-radius: 0px !important; /* Keep desktop border radius */
    }

    /* Desktop form layout - preserve original flex layout (excluding AI search and AutoPASS) */
    #classic-search .search-form,
    #international-brands-search form,
    #airport-transfer-search form,
    #best-price-search form {
        display: flex !important;
        flex-direction: row !important; /* Desktop horizontal layout */
        flex-wrap: nowrap !important; /* No wrapping on desktop */
        gap: 0.5rem !important; /* Standard desktop gap */
        align-items: end !important; /* Align to bottom on desktop */
    }

    /* AI search form - use default block layout for textarea */
    #ai-search form {
        display: block !important; /* Block layout for textarea with absolute button */
    }

    /* AutoPASS search form - use default block layout for voucher input grid */
    #autopass-search form {
        display: block !important; /* Block layout for centered voucher inputs */
    }

    /* Desktop form fields - reset mobile overrides */
    #classic-search .flex-1,
    #ai-search .flex-1,
    #autopass-search .flex-1,
    #international-brands-search .flex-1,
    #airport-transfer-search .flex-1,
    #best-price-search .flex-1 {
        width: auto !important; /* Reset mobile width */
        flex: 1 !important; /* Standard flex behavior */
        margin-bottom: 0 !important; /* No bottom margin on desktop */
    }

    /* Desktop radio buttons - horizontal layout */
    #classic-search .search-form .flex.items-center.gap-4 {
        flex-direction: row !important; /* Horizontal on desktop */
        align-items: center !important; /* Center align on desktop */
        gap: 1rem !important; /* Standard desktop gap */
    }

    /* Desktop date fields - custom width */
    #classic-search .w-36,
    #ai-search .w-36,
    #autopass-search .w-36,
    #international-brands-search .w-36,
    #airport-transfer-search .w-36,
    #best-price-search .w-36 {
        width: 9rem !important; /* Custom date field width (144px) */
        flex: 0 0 auto !important; /* Don't grow or shrink */
        margin-bottom: 0 !important;
        max-width: 9rem !important;
        min-width: 9rem !important;
    }

    /* Desktop time fields - custom width */
    #classic-search .time-field-container,
    #ai-search .time-field-container,
    #autopass-search .time-field-container,
    #international-brands-search .time-field-container,
    #airport-transfer-search .time-field-container,
    #best-price-search .time-field-container,
    .time-field-container {
        width: 6rem !important; /* Custom time field width (96px) */
        flex: 0 0 auto !important; /* Don't grow or shrink */
        margin-bottom: 0 !important;
        max-width: 6rem !important;
        min-width: 6rem !important;
    }

    /* Desktop flatpickr wrapper - restore original width */
    .time-field-container .flatpickr-wrapper,
    #classic-search .time-field-container .flatpickr-wrapper,
    #ai-search .time-field-container .flatpickr-wrapper,
    #autopass-search .time-field-container .flatpickr-wrapper,
    #international-brands-search .time-field-container .flatpickr-wrapper,
    #airport-transfer-search .time-field-container .flatpickr-wrapper,
    #best-price-search .time-field-container .flatpickr-wrapper {
        width: 100% !important; /* Fill the container */
        max-width: 100% !important;
        min-width: 100% !important;
    }

    /* Desktop time picker inputs - restore original behavior */
    .time-field-container .flatpickr-wrapper input,
    .time-field-container input[id*="TimePicker"],
    #pickupTimePicker,
    #returnTimePicker {
        width: 100% !important; /* Fill the container */
        max-width: 100% !important;
        min-width: 100% !important;
    }
}

/* Accessibility improvements for all mobile devices */
@media (max-width: 1023px) {
    
    /* Improve contrast for better readability */
    #classic-search label {
        color: #111827 !important;
        font-weight: 500 !important;
    }
    
    /* Better focus indicators */
    #classic-search input:focus,
    #classic-search button:focus {
        outline: 2px solid #0ea5e9 !important;
        outline-offset: 2px !important;
    }
    
    /* Ensure adequate spacing between interactive elements */
    #classic-search input,
    #classic-search button {
        margin-bottom: 0 !important; /* Remove bottom margin to rely on form gap */
    }
    
    /* Improve button hover states for touch devices */
    #classic-search button[type="submit"]:hover {
        background-color: #0284c7 !important;
        transform: none !important; /* Remove transform on mobile */
    }
    
    /* Better visual hierarchy */
    #classic-search .search-form > div {
        position: relative !important;
    }
}

/* High DPI displays - ensure crisp rendering */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
    #classic-search i[data-lucide] {
        image-rendering: -webkit-optimize-contrast !important;
        image-rendering: crisp-edges !important;
    }
}

/* Landscape orientation adjustments for mobile and tablets */
@media (max-width: 768px) and (orientation: landscape) {

    /* Tab buttons - reduce height in landscape for better space usage */
    .tab-button {
        padding: 0.75rem 0.5rem !important;
        min-height: 2.5rem !important;
        font-size: 0.8125rem !important;
    }

    /* Tab container - reduce spacing in landscape */
    .max-w-6xl.mx-auto.mb-0.relative .flex.justify-between.items-end > .flex:first-child {
        gap: 0.5rem !important;
        margin-bottom: 0.75rem !important;
    }

    /* Apply consistent padding to all search forms in landscape */
    #classic-search,
    #ai-search,
    #autopass-search,
    #international-brands-search,
    #airport-transfer-search,
    #best-price-search {
        padding: 0.375rem 0.75rem 0.75rem 0.75rem !important; /* Maintain side padding in landscape */
        padding-top: 0.375rem !important; /* Match the landscape form gap */
    }

    /* Maintain consistent form spacing in landscape (excluding AI search and AutoPASS) */
    #classic-search .search-form,
    #international-brands-search form,
    #airport-transfer-search form,
    #best-price-search form {
        gap: 0.375rem !important; /* Further reduced for landscape constraints */
    }



    /* Reduce button height in landscape */
    #classic-search button[type="submit"] {
        min-height: 2.5rem !important;
        padding: 0.75rem 2rem !important;
    }
}