/**
 * Cars V2 - Responsive & iOS Compatibility Fixes
 * 
 * Corrections CSS ciblées pour améliorer l'affichage sur iOS et autres appareils mobiles.
 * Utilise uniquement les styles du template MyTravel existants.
 */

/* ============================================
   1. SELECT ELEMENTS - iOS Compatibility
   ============================================ */

/* Désactiver l'apparence native iOS pour les select dans le formulaire */
.cars-v2-search-form select.form-control {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 5'%3e%3cpath fill='%23343a40' d='M2 0L0 2h4zm0 5L0 3h4z'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 0.75rem center;
    background-size: 8px 10px;
    padding-right: 2rem;
}

/* Assurer que le select garde sa hauteur sur iOS */
.cars-v2-search-form select.form-control {
    min-height: calc(1.5em + 1.8rem + 4px);
    line-height: 1.5;
}

/* ============================================
   2. INPUT GROUP - Espacement mobile
   ============================================ */

/* Améliorer l'espacement entre l'icône et le select sur mobile */
@media (max-width: 767.98px) {
    .cars-v2-search-form .input-group-prepend + .form-control {
        padding-left: 0.5rem !important;
    }
    
    /* S'assurer que les input-group ne débordent pas */
    .cars-v2-search-form .input-group {
        width: 100%;
    }
}

/* ============================================
   3. TABS - Responsive amélioré
   ============================================ */

/* Améliorer l'affichage des tabs sur mobile */
@media (max-width: 767.98px) {
    .cars-v2-search-form .tab-nav-inner .nav-link {
        font-size: 0.875rem;
        padding: 0.5rem 0.75rem;
    }
    
    .cars-v2-search-form .tab-nav-inner .nav-link span {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        max-width: 100%;
    }
    
    /* S'assurer que les tabs ne débordent pas */
    .cars-v2-search-form .nav-justified .nav-item {
        flex: 1 1 auto;
        min-width: 0;
    }
}

/* ============================================
   4. DATE/TIME INPUTS - iOS Touch
   ============================================ */

/* Améliorer la zone de touch pour les inputs de date sur iOS */
.cars-v2-search-form input[type="text"].js-cars-v2-date {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    font-size: 1rem; /* Évite le zoom automatique sur iOS */
    touch-action: manipulation;
}

/* Améliorer les selects de temps sur iOS */
.cars-v2-search-form select.js-cars-v2-time {
    font-size: 1rem; /* Évite le zoom automatique sur iOS */
    touch-action: manipulation;
}

/* ============================================
   5. BUTTON - Touch target iOS
   ============================================ */

/* S'assurer que le bouton a une zone de touch suffisante (min 44x44px sur iOS) */
.cars-v2-search-form button[type="submit"] {
    min-height: 44px;
    touch-action: manipulation;
}

@media (max-width: 767.98px) {
    .cars-v2-search-form button[type="submit"] {
        padding: 0.75rem 1.5rem;
    }
}

/* ============================================
   6. FORM LAYOUT - Mode paysage
   ============================================ */

/* Améliorer l'affichage en mode paysage sur mobile */
@media (max-width: 991.98px) and (orientation: landscape) {
    .cars-v2-search-form .row {
        margin-left: -0.5rem;
        margin-right: -0.5rem;
    }
    
    .cars-v2-search-form .row > [class*="col-"] {
        padding-left: 0.5rem;
        padding-right: 0.5rem;
    }
    
    /* Réduire les marges verticales en mode paysage */
    .cars-v2-search-form .mb-3,
    .cars-v2-search-form .mb-md-4 {
        margin-bottom: 1rem !important;
    }
}

/* ============================================
   7. CARD - Padding responsive
   ============================================ */

/* Ajuster le padding de la card sur mobile */
@media (max-width: 767.98px) {
    .cars-v2-search-form .card-body {
        padding: 1.5rem !important;
    }
}

/* ============================================
   8. CONTAINER - Espacement mobile
   ============================================ */

/* Réduire les espacements sur très petits écrans */
@media (max-width: 575.98px) {
    .cars-v2-search-form .container {
        padding-left: 1rem;
        padding-right: 1rem;
    }
    
    .cars-v2-search-form .space-2 {
        padding-top: 1.5rem !important;
        padding-bottom: 1.5rem !important;
    }
}

/* ============================================
   9. FLATPICKR - iOS Compatibility
   ============================================ */

/* S'assurer que Flatpickr fonctionne bien sur iOS */
.cars-v2-search-form .flatpickr-input {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    font-size: 1rem; /* Évite le zoom automatique */
    touch-action: manipulation;
}

/* Améliorer l'affichage du calendrier Flatpickr sur mobile */
@media (max-width: 767.98px) {
    .flatpickr-calendar {
        font-size: 0.875rem;
    }
    
    .flatpickr-day {
        min-height: 36px;
        line-height: 36px;
    }
}

/* ============================================
   9.1 FLATPICKR - Dates désactivées sur iOS
   ============================================ */

/* Forcer le grisage des dates désactivées sur iOS (Safari et Chrome) */
/* Cible tous les calendriers Flatpickr, pas seulement .u-datepicker */
.flatpickr-day.disabled,
.flatpickr-day.disabled:hover,
.flatpickr-day.disabled:focus,
.flatpickr-day.disabled:active,
.flatpickr-day.notAllowed,
.flatpickr-day.notAllowed:hover,
.flatpickr-day.notAllowed:focus,
.flatpickr-day.notAllowed:active {
    color: #e7eaf3 !important;
    opacity: 0.5 !important;
    background-color: transparent !important;
    border-color: transparent !important;
    cursor: not-allowed !important;
    pointer-events: none !important;
    -webkit-user-select: none !important;
    -moz-user-select: none !important;
    user-select: none !important;
    -webkit-tap-highlight-color: transparent !important;
}

/* Sélecteur encore plus spécifique pour forcer l'application */
.flatpickr-calendar .flatpickr-day.disabled,
.flatpickr-calendar .flatpickr-day.disabled:hover,
.flatpickr-calendar .flatpickr-day.disabled:focus,
.flatpickr-calendar .flatpickr-day.notAllowed,
.flatpickr-calendar .flatpickr-day.notAllowed:hover,
.flatpickr-calendar .flatpickr-day.notAllowed:focus {
    color: #e7eaf3 !important;
    opacity: 0.5 !important;
    background-color: transparent !important;
    border-color: transparent !important;
    cursor: not-allowed !important;
}

/* Style spécifique pour iOS Safari - forcer l'opacité */
@supports (-webkit-touch-callout: none) {
    /* iOS Safari uniquement */
    .flatpickr-day.disabled,
    .flatpickr-day.disabled:hover,
    .flatpickr-day.disabled:focus,
    .flatpickr-day.notAllowed,
    .flatpickr-day.notAllowed:hover,
    .flatpickr-day.notAllowed:focus {
        color: #e7eaf3 !important;
        opacity: 0.4 !important;
        background-color: #f8fafd !important;
        text-decoration: line-through;
    }
}

/* Style pour Chrome sur iOS */
@media screen and (-webkit-min-device-pixel-ratio: 0) {
    .flatpickr-day.disabled,
    .flatpickr-day.disabled:hover,
    .flatpickr-day.disabled:focus,
    .flatpickr-day.notAllowed,
    .flatpickr-day.notAllowed:hover,
    .flatpickr-day.notAllowed:focus {
        color: #e7eaf3 !important;
        opacity: 0.5 !important;
    }
}

/* Style pour le template MyTravel (.u-datepicker) sur iOS */
.u-datepicker .flatpickr-day.disabled,
.u-datepicker .flatpickr-day.disabled:hover,
.u-datepicker .flatpickr-day.disabled:focus,
.u-datepicker .flatpickr-day.notAllowed,
.u-datepicker .flatpickr-day.notAllowed:hover,
.u-datepicker .flatpickr-day.notAllowed:focus {
    color: #e7eaf3 !important;
    opacity: 0.5 !important;
    background-color: transparent !important;
    cursor: not-allowed !important;
}

/* Sur mobile iOS, rendre les dates désactivées encore plus visibles */
@media screen and (max-width: 767.98px) {
    .flatpickr-day.disabled,
    .flatpickr-day.disabled:hover,
    .flatpickr-day.disabled:focus,
    .flatpickr-day.notAllowed,
    .flatpickr-day.notAllowed:hover,
    .flatpickr-day.notAllowed:focus {
        color: #d5dae2 !important;
        opacity: 0.6 !important;
        background-color: #f8fafd !important;
        border: 1px solid #e7eaf3 !important;
    }
}

/* ============================================
   10. LABELS - Lisibilité mobile
   ============================================ */

/* Améliorer la lisibilité des labels sur mobile */
@media (max-width: 767.98px) {
    .cars-v2-search-form .form-label {
        font-size: 0.875rem;
        margin-bottom: 0.5rem;
    }
}

/* ============================================
   11. DATE/TIME ROW - Layout mobile
   ============================================ */

/* Améliorer le layout date/time sur mobile */
@media (max-width: 767.98px) {
    .cars-v2-search-form .row.no-gutters {
        margin-left: 0;
        margin-right: 0;
    }
    
    .cars-v2-search-form .row.no-gutters > [class*="col-"] {
        padding-left: 0.25rem;
        padding-right: 0.25rem;
    }
    
    /* S'assurer que date et time restent côte à côte sur mobile */
    .cars-v2-search-form .col-7,
    .cars-v2-search-form .col-5 {
        flex: 0 0 auto;
    }
}

/* ============================================
   12. FOCUS STATES - iOS
   ============================================ */

/* Améliorer les états de focus pour iOS */
.cars-v2-search-form .js-focus-state:focus-within {
    outline: none;
}

.cars-v2-search-form .js-focus-state:focus-within .input-group {
    border-color: rgba(41, 124, 187, 0.5);
    box-shadow: 0 0 0 0.2rem rgba(41, 124, 187, 0.25);
}

/* ============================================
   13. ZOOM PREVENTION - iOS
   ============================================ */

/* Empêcher le zoom automatique sur iOS lors du focus (si font-size < 16px) */
@media screen and (max-width: 767.98px) {
    .cars-v2-search-form input,
    .cars-v2-search-form select,
    .cars-v2-search-form textarea {
        font-size: 16px !important; /* iOS ne zoomera pas si font-size >= 16px */
    }
}

/* Sur desktop, on peut utiliser une taille plus petite */
@media (min-width: 768px) {
    .cars-v2-search-form input,
    .cars-v2-search-form select,
    .cars-v2-search-form textarea {
        font-size: 1rem;
    }
}

/* ============================================
   14. DROPOFF WRAPPER - Animation smooth
   ============================================ */

/* Animation smooth pour l'affichage/masquage du dropoff */
.cars-v2-search-form .js-dropoff-wrapper {
    transition: opacity 0.3s ease, max-height 0.3s ease;
    overflow: visible; /* Changed from hidden to visible to allow dropdown to show */
}

.cars-v2-search-form .js-dropoff-wrapper[style*="display: none"] {
    opacity: 0;
    max-height: 0;
    overflow: hidden;
}

.cars-v2-search-form .js-dropoff-wrapper:not([style*="display: none"]) {
    opacity: 1;
    max-height: 500px;
    overflow: visible;
}

/* Ensure bootstrap-select dropdown for dropoff is visible above other elements */
#dropoffStation + .bootstrap-select .dropdown-menu,
body > .bootstrap-select:has(+ #dropoffStation) .dropdown-menu {
    z-index: 9999 !important;
}

/* Alternative selector for dropoff dropdown */
.cars-v2-search-form #dropoffStation + .bootstrap-select .dropdown-menu {
    z-index: 9999 !important;
    position: absolute !important;
}

/* ============================================
   15. VEHICLE IMAGES - Standardized dimensions
   ============================================ */

/* Standardiser les dimensions des images de véhicules pour éviter les hauteurs différentes */
/* Classe générique pour toutes les images de véhicules */
.vehicle-image,
img.vehicle-image {
    object-fit: cover;
    object-position: center;
    background-color: #f8f9fa; /* Couleur de fond si l'image ne charge pas */
}

/* Page Results - Images dans les cards */
.cars-results .card-img-top.vehicle-image,
.cars-results img.card-img-top.vehicle-image {
    width: 100%;
    height: 200px; /* Hauteur fixe pour toutes les images (ratio 3:2, images redimensionnées à 300x200) */
}

/* Page Vehicle Details - Petites images dans la sidebar (garder les styles inline existants) */
.vehicle-details img[src*="/rental-cars/assets/images/vehicles/"]:not(.vehicle-image-main) {
    width: 80px;
    height: 60px;
    object-fit: cover;
    object-position: center;
    background-color: #f8f9fa;
}

/* Page Vehicle Details - Grande image principale */
.vehicle-image-main,
img.vehicle-image-main {
    width: 100%;
    max-width: 300px; /* Largeur max basée sur la taille réelle des images (300px) */
    height: 200px; /* Hauteur basée sur la taille réelle des images (200px) */
    object-fit: cover;
    object-position: center;
    background-color: #f8f9fa;
}

/* Page Summary - Images dans la sidebar et principale */
.booking-summary img[src*="/rental-cars/assets/images/vehicles/"] {
    object-fit: cover;
    object-position: center;
    background-color: #f8f9fa;
}

/* S'assurer que les conteneurs d'images ont une hauteur fixe */
.cars-results .card .position-relative,
.cars-results .card a.gradient-overlay-half-bg-gradient-v5 {
    height: 200px;
    overflow: hidden;
}

/* Responsive: ajuster la hauteur sur mobile */
@media (max-width: 767.98px) {
    .cars-results .card-img-top.vehicle-image,
    .cars-results img.card-img-top.vehicle-image {
        height: 180px; /* Légèrement plus petit sur mobile */
    }
    
    .cars-results .card .position-relative,
    .cars-results .card a.gradient-overlay-half-bg-gradient-v5 {
        height: 180px;
    }
    
    .vehicle-image-main {
        max-width: 100%; /* Pleine largeur sur mobile */
        height: auto; /* Hauteur automatique pour garder le ratio */
        aspect-ratio: 3 / 2; /* Ratio 3:2 (300x200) */
    }
}

/* ============================================
   16. BOOKING STEPS - Connection line
   ============================================ */

/* Ligne de connexion entre les étapes */
.booking-steps-connection {
    position: absolute;
    top: 25px;
    left: 8%;
    right: 8%;
    height: 2px;
    background: linear-gradient(to right, #f15a24 0%, #f15a24 20%, #e7eaf3 20%, #e7eaf3 100%);
    z-index: 0;
}/* Responsive: ajuster la ligne sur mobile */
@media (max-width: 767.98px) {
    .booking-steps-connection {
        display: none; /* Masquer la ligne sur mobile */
    }
}

/* Améliorer l'espacement des étapes sur mobile */
@media (max-width: 767.98px) {
    .booking-steps-section .list-group-item {
        min-width: 100px;
        padding-left: 0.5rem !important;
        padding-right: 0.5rem !important;
    }
    
    .booking-steps-section .width-50 {
        width: 40px !important;
        height: 40px !important;
        font-size: 0.875rem !important;
    }
    
    .booking-steps-section .font-size-20 {
        font-size: 1rem !important;
    }
    
    .booking-steps-section .font-size-14 {
        font-size: 0.75rem !important;
    }
}