/* Mobile Date Picker Fixes */

/* Ensure only one set of date inputs on mobile */
@media (max-width: 768px) {
    /* Hide any duplicate date inputs that might be created */
    .search-form .form-group {
        position: relative;
    }
    
    /* Style native date inputs on mobile */
    input[type="date"] {
        -webkit-appearance: none;
        -moz-appearance: none;
        appearance: none;
        background-color: white;
        padding: 12px 15px;
        border: 2px solid #e0e0e0;
        border-radius: 8px;
        font-size: 16px; /* Prevents zoom on iOS */
        width: 100%;
        font-family: inherit;
    }
    
    /* Remove any duplicate inputs created by scripts */
    .flatpickr-mobile + input[type="date"],
    input[type="hidden"] + input[type="date"] {
        display: none !important;
    }
    
    /* Ensure flatpickr doesn't create duplicate elements on mobile */
    .flatpickr-wrapper {
        display: block !important;
        width: 100% !important;
    }
    
    .flatpickr-wrapper .flatpickr-input {
        width: 100% !important;
    }
    
    /* Hide any toggle buttons or extra elements */
    .date-picker-toggle,
    .native-date-toggle {
        display: none !important;
    }
    
    /* Ensure proper spacing */
    .search-form .form-group {
        margin-bottom: 1rem;
    }
    
    /* Fix for iOS date picker appearance */
    input[type="date"]::-webkit-calendar-picker-indicator {
        background: transparent;
        color: transparent;
        display: block;
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        cursor: pointer;
    }
    
    input[type="date"]::-webkit-date-and-time-value {
        text-align: left;
        padding-left: 0;
    }
    
    /* Ensure inputs are not duplicated in DOM */
    .form-group input + input {
        display: none !important;
    }
    
    /* Keep only the first input of each type visible */
    .form-group input:first-of-type {
        display: block !important;
    }
}