/**
 * Amadex Mobile Search Form - Comprehensive Fix
 * Ensures all fields are visible on ALL mobile devices (Android, iOS, iPad)
 */

/* ============================================
   Global Mobile Search Form Visibility Fix
   ============================================ */
@media only screen and (max-width: 768px) {
    /* Force display of search form and all its children */
    .amadex-search-modern,
    .amadex-modern-form,
    .amadex-search-container,
    .amadex-search-fields,
    .amadex-multi-city-flights,
    .amadex-flight-segment {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        width: 100% !important;
        max-width: 100% !important;
    }

    .amadex-modern-form.amadex-multi-city-mode.has-extra-segments .amadex-modern-field.amadex-remove-field {
    margin-bottom: 10px !important;
}
    
    .amadex-modern-form.amadex-multi-city-mode.has-extra-segments button.amadex-swap-button {
    display: none !important;
}
    .amadex-search-fields {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 12px !important;
    }
    
    /* Force ALL fields to be visible */
    .amadex-modern-field,
    #origin-field,
    #destination-field,
    #departure-field,
    #return-field,
    #travellers-field,
    .amadex-location-field,
    .amadex-date-field,
    .amadex-travellers-field {
        display: flex !important;
        flex-direction: column !important;
        visibility: visible !important;
        opacity: 1 !important;
        position: relative !important;
        padding: 12px !important;
        border: none!important;
        box-shadow: 0px 2px 12px rgba(0, 0, 0, 0.08);
        background: #FFFFFF !important;
    }
    
    /* Make travellers field span full width */
    #travellers-field,
    .amadex-travellers-field {
        grid-column: 1 / -1 !important;
    }
    
    /* Force field labels to be visible */
    .amadex-field-label,
    .amadex-modern-field .amadex-field-label {
        display: none !important;
        visibility: visible !important;
        opacity: 1 !important;
        font-size: 13px !important;
        font-weight: 600 !important;
        color: #0E7D3F !important;
        margin-bottom: 8px !important;
    }
    
    /* Force field values to be visible */
    .amadex-field-value,
    .amadex-modern-field .amadex-field-value,
    #modern-origin,
    #modern-destination {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        font-size: 14px !important;
        font-weight: 700 !important;
        color: #000000 !important;
        background: transparent !important;
        border: none !important;
        width: 100% !important;
    }
    
    /* Force field descriptions to be visible */
    .amadex-field-description,
    .amadex-modern-field .amadex-field-description,
    #origin-description,
    #destination-description {
        display: none !important;
        visibility: visible !important;
        opacity: 1 !important;
        font-size: 14px !important;
        color: #6B7280 !important;
    }
    
    
    #departure-display,
    #return-display,
    #departure-day,
    #return-day {
        display: none !important;
        visibility: visible !important;
        opacity: 1 !important;
    }
    
    /* Force travellers trigger to be visible */
    .amadex-travellers-trigger,
    .amadex-travellers-value,
    .amadex-cabin-value {
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;
    }

    div#travellers-field {
    margin: 0 !important;
}
    .amadex-field-input-wrap {
        display: flex !important;
        flex-direction: row !important;
        visibility: visible !important;
        opacity: 1 !important;
        align-items: center;
    }
    /* Swap button visibility */
    .amadex-swap-button {
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;
    }
    
    /* Search button visibility */
    button.amadex-search-btn {
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;
        width: 100% !important;
    }
    
    /* Calendar widget visibility when active */
    .amadex-calendar-widget.active,
    #departure-calendar.active,
    #return-calendar.active {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        z-index: 10000 !important;
    }
    
    /* Ensure location fields have relative positioning */
    .amadex-location-field,
    #origin-field,
    #destination-field {
        position: relative !important;
        overflow: visible !important;
    }
    
    /* Dropdown visibility when active - positioned relative to field */
    .amadex-suggestions-dropdown.active,
    .amadex-travellers-dropdown.active {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        z-index: 1000 !important;
        position: absolute !important;
        top: 100% !important;
        left: 0 !important;
        right: 0 !important;
        width: 100% !important;
    }
}

/* ============================================
   iOS Specific Fixes
   ============================================ */
@supports (-webkit-touch-callout: none) {
    /* iOS Safari specific fixes */
    @media only screen and (max-width: 768px) {
        .amadex-modern-field input,
        .amadex-field-value {
            -webkit-appearance: none !important;
            appearance: none !important;
        }
        
        .amadex-calendar-widget,
        .amadex-suggestions-dropdown,
        .amadex-travellers-dropdown {
            -webkit-overflow-scrolling: touch !important;
        }
    }
}

/* ============================================
   Android Specific Fixes
   ============================================ */
@media only screen and (max-width: 768px) {
    /* Android Chrome/Firefox specific */
    .amadex-modern-field {
        -webkit-tap-highlight-color: rgba(14, 125, 63, 0.1) !important;
    }
    
    /* Ensure touch events work */
    .amadex-field-value,
    .amadex-travellers-trigger,
    .amadex-calendar-day {
        touch-action: manipulation !important;
    }
}

/* ============================================
   Tablet Fix (769px - 1024px) - EXPERT/GOD MODE ENHANCEMENT
   ============================================ */
/* EXPERT/GOD MODE: Enhanced tablet rules to work with main CSS file */
/* ADVANCED IMPLEMENTATION: 3-column grid to match desired layout */
@media only screen and (min-width: 769px) and (max-width: 1024px) {
    /* ADVANCED: 3-column grid layout - enables Dates + Travellers in same row */
    .amadex-search-fields {
        display: grid !important;
        grid-template-columns: 1fr 1fr 0.85fr !important; /* 3 columns: cities equal, travellers slightly smaller */
        grid-template-rows: auto auto auto !important;   /* 3 rows: Cities | Dates+Travellers | Search */
        gap: 16px !important;
        width: 100% !important;
        max-width: 100% !important;
    }
    
    /* Row 1: Cities */
    #origin-field { 
        grid-column: 1 !important; 
        grid-row: 1 !important; 
        padding-right: 60px !important; /* Space for swap button */
    }
    #destination-field { 
        grid-column: 2 !important; 
        grid-row: 1 !important; 
        padding-left: 60px !important; /* Space for swap button */
    }
    
    /* Row 2: Dates + Travellers */
    #departure-field { 
        grid-column: 1 !important; 
        grid-row: 2 !important; 
    }
    #return-field { 
        grid-column: 2 !important; 
        grid-row: 2 !important; 
    }
    /* ADVANCED: Travellers moved to Row 2, Column 3 - matches desired layout */
    #travellers-field { 
        grid-column: 3 !important;  /* Column 3 instead of full width */
        grid-row: 2 !important;      /* Row 2 instead of Row 3 */
    }
    
    /* Individual field styling */
    .amadex-modern-field {
        border: 1px solid #E5E5E5 !important;
        border-radius: 12px !important;
        padding: 16px 18px !important;
        background: #ffffff !important;
        box-shadow: 0px 2px 12px rgba(0, 0, 0, 0.08) !important;
        min-height: 70px !important;
    }
    
    /* ADVANCED: Ensure Row 2 fields have equal height */
    #departure-field,
    #return-field,
    #travellers-field {
        min-height: 70px !important;
        align-items: flex-start !important;
        justify-content: center !important;
    }
    
    /* Search button: Full width, Row 3 */
    button.amadex-search-btn {
        grid-column: 1 / -1 !important; /* Span all 3 columns */
        grid-row: 3 !important;        /* Row 3 instead of Row 4 */
        position: static !important;
        width: 100% !important;
        margin-top: 16px !important;
        background: #0E7D3F !important;
        color: #ffffff !important;
        border-radius: 12px !important;
        font-weight: 600 !important;
    }
    
    /* ADVANCED: Swap button - Grid positioning for perfect centering */
    .amadex-swap-button {
        grid-column: 1 / 3 !important;  /* Spans both city columns */
        grid-row: 1 !important;         /* Same row as cities */
        justify-self: center !important; /* Center horizontally */
        align-self: center !important;   /* Center vertically */
        position: relative !important;   /* Changed from absolute */
        z-index: 10 !important;
        width: 48px !important;
        height: 48px !important;
        border-radius: 50% !important;
        background: #0E7D3F !important;
        border: 3px solid #ffffff !important;
        box-shadow: 0 2px 8px rgba(14, 125, 63, 0.3) !important;
        cursor: pointer !important;
        transition: all 0.3s ease !important;
    }

    /* Swap button hover state */
    .amadex-swap-button:hover {
        background: #0a6835 !important;
        transform: scale(1.05) !important;
        box-shadow: 0 4px 12px rgba(14, 125, 63, 0.4) !important;
    }
    
    /* ADVANCED: Ensure travellers field content displays correctly */
    #travellers-field .amadex-travellers-trigger {
        display: flex !important;
        flex-direction: column !important;
        gap: 4px !important;
    }

    #travellers-field .amadex-travellers-value {
        font-size: 15px !important;
        font-weight: 600 !important;
        color: #000000 !important;
    }

    #travellers-field .amadex-cabin-value {
        font-size: 12px !important;
        color: #6B7280 !important;
    }

    /* ADVANCED: Ensure date fields display correctly */
    #departure-field .amadex-field-value,
    #return-field .amadex-field-value {
        font-size: 15px !important;
        font-weight: 600 !important;
    }

    /* Container adjustments */
    .amadex-search-modern {
        padding: 0 24px !important;
    }
    
    .amadex-modern-form {
        padding: 24px 20px !important;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }
    
    /* Trip selector */
    .amadex-trip-selector {
        width: 100% !important;
        justify-content: center !important;
        gap: 12px !important;
        margin-bottom: 24px !important;
    }

    /* ADVANCED: Ensure grid container positioning */
    .amadex-search-fields {
        position: relative !important;
    }
}

/* ============================================
   Very Small Screens (Galaxy Fold, etc.)
   ============================================ */
@media only screen and (max-width: 320px) {
    .amadex-modern-field {
        padding: 14px 0 !important;
    }
    
    .amadex-field-label {
        font-size: 11px !important;
    }
    
    .amadex-field-value {
        font-size: 14px !important;
    }
    
    .amadex-field-description {
        font-size: 11px !important;
    }
    
    .amadex-trip-label {
        padding: 8px 10px !important;
        font-size: 11px !important;
    }
}