/**
 * BookingVO - Mobile Modal Styles v2
 * 
 * Expérience mobile optimale pour la modale de réservation.
 * Ces styles s'appliquent UNIQUEMENT sur mobile (max-width: 640px).
 */

@media (max-width: 640px) {
    
    /* === MODALE PLEIN ÉCRAN === */
    .bookingvo-modal-content {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        transform: none !important;
        width: 100vw !important;
        height: 100vh !important;
        max-width: 100vw !important;
        max-height: 100vh !important;
        border-radius: 0 !important;
        display: flex !important;
        flex-direction: column !important;
        overflow: hidden !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        scrollbar-width: none !important;
        -ms-overflow-style: none !important;
    }
    
    .bookingvo-modal-content::-webkit-scrollbar {
        display: none !important;
        width: 0 !important;
    }
    
    /* === MASQUER LE HEADER AVEC L'IMAGE === */
    .bookingvo-modal-header {
        display: none !important;
    }
    
    /* === BOUTON FERMER EN HAUT À DROITE === */
    .bookingvo-modal-close,
    #bookingvo-modal-close {
        display: flex !important;
        position: fixed !important;
        top: 16px !important;
        right: 16px !important;
        z-index: 1001 !important;
        width: 44px !important;
        height: 44px !important;
        font-size: 28px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        background: rgba(255, 255, 255, 0.95) !important;
        border-radius: 50% !important;
        color: #374151 !important;
        box-shadow: 0 2px 12px rgba(0, 0, 0, 0.15) !important;
        border: 1px solid #e5e7eb !important;
    }
    
    /* === CORPS DE LA MODALE === */
    .bookingvo-modal-body {
        flex: 1 !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        padding: 40px 10px 200px 10px !important; /* 10px à droite et à gauche */
        max-height: none !important;
        -webkit-overflow-scrolling: touch !important;
        overscroll-behavior: contain !important;
        scrollbar-width: none !important; /* Firefox */
        -ms-overflow-style: none !important; /* IE/Edge */
    }
    
    /* Masquer la barre de défilement sur Webkit (Chrome, Safari, Comet) */
    .bookingvo-modal-body::-webkit-scrollbar,
    .bookingvo-modal-content::-webkit-scrollbar,
    .bookingvo-modal-content *::-webkit-scrollbar,
    #bookingvo-booking-modal::-webkit-scrollbar,
    #bookingvo-booking-modal *::-webkit-scrollbar {
        display: none !important;
        width: 0 !important;
        height: 0 !important;
        background: transparent !important;
    }
    
    /* Masquer toutes les scrollbars dans la modale */
    .bookingvo-modal-content,
    .bookingvo-modal-content *,
    #bookingvo-booking-modal,
    #bookingvo-booking-modal * {
        scrollbar-width: none !important;
        -ms-overflow-style: none !important;
    }
    
    /* Forcer overflow sans scrollbar visible */
    .bookingvo-modal-body {
        overflow: -moz-scrollbars-none !important;
    }
    
    /* Tous les éléments prennent toute la largeur disponible */
    #bookingvo-session-info-box,
    #bookingvo-booking-form,
    #bookingvo-occurrence-fields-row,
    .bookingvo-occurrence-calendar-wrapper,
    #bookingvo-occurrence-calendar-wrapper {
        width: 100% !important;
        max-width: none !important;
        margin: 0 !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
    
    /* Forcer le calendrier à prendre toute la largeur */
    .bookingvo-occurrence-calendar-wrapper {
        margin: 0 0 20px 0 !important;
    }
    
    /* === SECTION INFO SESSION === */
    #bookingvo-session-info-box,
    .bookingvo-session-info-box {
        padding: 0 !important;
        margin-bottom: 20px !important;
        background: transparent !important;
        border: none !important;
    }
    
    /* Titre de l'atelier */
    #bookingvo-summary-event,
    .bookingvo-session-info-box h3 {
        font-size: 22px !important;
        font-weight: 700 !important;
        color: #1f2937 !important;
        margin: 0 0 8px 0 !important;
        padding-right: 50px !important; /* Espace pour le bouton fermer */
        line-height: 1.3 !important;
    }
    
    /* Header avec titre et bouton cadeau */
    .bookingvo-session-header-row {
        display: flex !important;
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 16px !important;
    }
    
    /* === BOUTON CADEAU SUR SA PROPRE LIGNE === */
    #bookingvo-gift-toggle-top,
    .bookingvo-gift-toggle-top {
        width: 100% !important;
        margin-top: 8px !important;
        margin-bottom: 16px !important;
    }
    
    #bookingvo-gift-toggle,
    .bookingvo-gift-toggle-btn {
        width: 100% !important;
        padding: 14px 20px !important;
        font-size: 15px !important;
        font-weight: 500 !important;
        border-radius: 12px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 10px !important;
    }
    
    /* Date de session */
    #bookingvo-session-date,
    .bookingvo-session-date {
        font-size: 14px !important;
        color: #6b7280 !important;
        margin: 0 0 12px 0 !important;
    }
    
    /* === CALENDRIER CENTRÉ === */
    #bookingvo-occurrence-fields-row {
        display: block !important;
    }
    
    #bookingvo-calendar-selector-wrapper {
        display: flex !important;
        justify-content: center !important;
        width: 100% !important;
    }
    
    .bookingvo-occurrence-calendar-wrapper,
    #bookingvo-occurrence-calendar-wrapper {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        margin: 0 auto !important;
        padding: 20px !important;
        max-width: 380px !important;
        width: 100% !important;
        max-height: none !important;
        border-radius: 16px !important;
        background: #f9fafb !important;
        border: 1px solid #e5e7eb !important;
        box-sizing: border-box !important;
    }
    
    .bookingvo-occurrence-calendar-wrapper.visible,
    #bookingvo-occurrence-calendar-wrapper.visible {
        max-height: none !important;
        padding: 20px !important;
        margin: 0 auto !important;
    }
    
    /* Header du calendrier */
    .bookingvo-occurrence-calendar-header {
        padding: 0 0 16px 0 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
    }
    
    .bookingvo-occurrence-calendar-title {
        font-size: 17px !important;
        font-weight: 600 !important;
        color: #1f2937 !important;
    }
    
    .bookingvo-occurrence-calendar-prev,
    .bookingvo-occurrence-calendar-next {
        width: 36px !important;
        height: 36px !important;
        min-width: 36px !important;
        border-radius: 50% !important;
    }
    
    /* Grille du calendrier */
    .bookingvo-occurrence-calendar {
        gap: 6px !important;
    }
    
    .bookingvo-occurrence-calendar-day {
        min-height: 42px !important;
        font-size: 15px !important;
        font-weight: 500 !important;
        border-radius: 10px !important;
    }
    
    .bookingvo-occurrence-calendar-day-label {
        font-size: 13px !important;
        font-weight: 600 !important;
        color: #6b7280 !important;
    }
    
    /* Légende du calendrier */
    .bookingvo-calendar-legend {
        margin-top: 16px !important;
        padding-top: 16px !important;
        border-top: 1px solid #e5e7eb !important;
        font-size: 12px !important;
        display: flex !important;
        justify-content: center !important;
        gap: 20px !important;
    }
    
    /* Forcer l'affichage du calendrier même en mode loading */
    .bookingvo-calendar-loading-active #bookingvo-occurrence-calendar-header,
    .bookingvo-calendar-loading-active #bookingvo-occurrence-calendar {
        opacity: 1 !important;
        pointer-events: auto !important;
    }
    
    /* === SÉLECTEUR DE CRÉNEAUX === */
    #bookingvo-slot-selector-wrapper,
    #bookingvo-alternative-slots-wrapper {
        margin-top: 20px !important;
    }
    
    .bookingvo-alternative-slots-container {
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 10px !important;
        justify-content: center !important;
    }
    
    .bookingvo-alternative-slot-btn {
        flex: 1 1 calc(50% - 5px) !important;
        min-width: 130px !important;
        max-width: calc(50% - 5px) !important;
        padding: 14px 16px !important;
        font-size: 14px !important;
        font-weight: 500 !important;
        border-radius: 12px !important;
        text-align: center !important;
    }
    
    /* === FORMULAIRE OPTIMISÉ === */
    #bookingvo-booking-form {
        display: block !important;
    }
    
    .bookingvo-form-group {
        margin-bottom: 18px !important;
    }
    
    .bookingvo-form-group label,
    .bookingvo-field-label {
        font-size: 14px !important;
        font-weight: 500 !important;
        color: #374151 !important;
        margin-bottom: 8px !important;
        display: block !important;
    }
    
    .bookingvo-form-group input,
    .bookingvo-form-group select,
    .bookingvo-form-group textarea {
        font-size: 16px !important; /* Évite le zoom sur iOS */
        padding: 14px 16px !important;
        border-radius: 12px !important;
        border: 2px solid #e5e7eb !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }
    
    .bookingvo-form-group input:focus,
    .bookingvo-form-group select:focus,
    .bookingvo-form-group textarea:focus {
        border-color: var(--bookingvo-color, #3b82f6) !important;
        outline: none !important;
        box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1) !important;
    }
    
    /* === RÉCAPITULATIF PRIX/QUANTITÉ === */
    .bookingvo-qty-price-row,
    #bookingvo-qty-price-row {
        background: #f9fafb !important;
        padding: 16px !important;
        border-radius: 12px !important;
        margin: 20px 0 !important;
        border: 1px solid #e5e7eb !important;
    }
    
    /* === CHAMPS CADEAU === */
    #bookingvo-gift-fields {
        padding: 16px !important;
        border-radius: 12px !important;
        margin-top: 16px !important;
        background: #fef3c7 !important;
        border: 1px solid #fcd34d !important;
    }
    
    /* === CRÉNEAUX SÉLECTIONNÉS === */
    #bookingvo-or-mode-selected-slots {
        background: #f9fafb !important;
        border: 1px solid #e5e7eb !important;
        border-radius: 16px !important;
        padding: 12px !important;
        margin: 16px 10px !important;
    }
    
    /* Liste des créneaux sélectionnés */
    #bookingvo-selected-slots-list {
        display: flex !important;
        flex-direction: column !important;
        gap: 8px !important;
    }
    
    /* Chaque créneau sur une ligne */
    .bookingvo-selected-slot-item {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        justify-content: space-between !important;
        padding: 12px 14px !important;
        border-radius: 10px !important;
        margin-bottom: 0 !important;
        background: #1e3a5f !important;
        color: #fff !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }
    
    /* Infos du créneau */
    .bookingvo-selected-slot-item .slot-info,
    .bookingvo-selected-slot-item > span:first-child,
    .bookingvo-selected-slot-item > div:first-child {
        flex: 1 !important;
        font-size: 14px !important;
        line-height: 1.4 !important;
        white-space: normal !important;
    }
    
    /* Bouton supprimer visible */
    .bookingvo-selected-slot-item .remove-slot,
    .bookingvo-selected-slot-item button,
    .bookingvo-selected-slot-item .bookingvo-remove-slot-btn {
        flex-shrink: 0 !important;
        width: 32px !important;
        height: 32px !important;
        min-width: 32px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        background: rgba(255, 255, 255, 0.2) !important;
        border: none !important;
        border-radius: 50% !important;
        color: #fff !important;
        font-size: 18px !important;
        cursor: pointer !important;
        margin-left: 12px !important;
    }
    
    .bookingvo-selected-slot-item .remove-slot:hover,
    .bookingvo-selected-slot-item button:hover,
    .bookingvo-selected-slot-item .bookingvo-remove-slot-btn:hover {
        background: rgba(255, 255, 255, 0.3) !important;
    }
    
    /* Chaque créneau sur une ligne (100% de largeur) */
    .bookingvo-single-slot-display {
        width: 100% !important;
        box-sizing: border-box !important;
    }
    
    .bookingvo-selected-slots-inner {
        flex-direction: column !important;
    }
    
    /* === CALENDRIER TOUJOURS VISIBLE (sauf en mode checkout direct) === */
    #bookingvo-occurrence-fields-row {
        display: block !important;
    }
    
    #bookingvo-occurrence-calendar-wrapper {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
    }
    
    /* Masquer le calendrier en mode checkout direct (dates fixes) */
    .bookingvo-modal-body.direct-checkout #bookingvo-occurrence-fields-row,
    .bookingvo-modal-body.direct-checkout #bookingvo-occurrence-calendar-wrapper {
        display: none !important;
    }
    
    /* Masquer la liste du nouveau design en mobile (utiliser bookingvo-or-mode-selected-slots à la place) */
    .bookingvo-new-selection-list {
        display: none !important;
    }
    
    /* Masquer les éléments checkout si aucun créneau n'est sélectionné (sauf en mode direct-checkout) */
    #bookingvo-booking-form:not(.bookingvo-slot-selected) .bookingvo-form-row:not(#bookingvo-occurrence-fields-row):not(#bookingvo-permanent-fields-row),
    #bookingvo-booking-form:not(.bookingvo-slot-selected) .bookingvo-qty-price-row,
    #bookingvo-booking-form:not(.bookingvo-slot-selected) .bookingvo-gdpr-group,
    #bookingvo-booking-form:not(.bookingvo-slot-selected) .bookingvo-newsletter-group,
    #bookingvo-booking-form:not(.bookingvo-slot-selected) .bookingvo-image-rights-group,
    #bookingvo-booking-form:not(.bookingvo-slot-selected) .bookingvo-bank-transfer-box,
    #bookingvo-booking-form:not(.bookingvo-slot-selected) #bookingvo-bank-transfer-box {
        display: none !important;
    }
    
    /* Masquer les boutons Payer/Réserver tant que le formulaire n'est pas valide */
    #bookingvo-booking-form:not(.bookingvo-form-valid) .bookingvo-btn-pay,
    #bookingvo-booking-form:not(.bookingvo-form-valid) .bookingvo-btn-reserve {
        display: none !important;
    }
    
    /* Exception : en mode direct-checkout (date fixe), tout afficher */
    .bookingvo-modal-body.direct-checkout #bookingvo-booking-form .bookingvo-btn-pay,
    .bookingvo-modal-body.direct-checkout #bookingvo-booking-form .bookingvo-btn-reserve,
    .bookingvo-modal-body.direct-checkout #bookingvo-booking-form .bookingvo-form-row,
    .bookingvo-modal-body.direct-checkout #bookingvo-booking-form .bookingvo-qty-price-row,
    .bookingvo-modal-body.direct-checkout #bookingvo-booking-form .bookingvo-gdpr-group,
    .bookingvo-modal-body.direct-checkout #bookingvo-booking-form .bookingvo-newsletter-group,
    .bookingvo-modal-body.direct-checkout #bookingvo-booking-form .bookingvo-image-rights-group,
    .bookingvo-modal-body.direct-checkout #bookingvo-booking-form .bookingvo-bank-transfer-box,
    .bookingvo-modal-body.direct-checkout #bookingvo-booking-form #bookingvo-bank-transfer-box {
        display: block !important;
    }
    
    .bookingvo-modal-body.direct-checkout #bookingvo-booking-form .bookingvo-btn-reserve {
        display: flex !important;
    }
    /* Bouton Payer en direct-checkout : flex sauf si Stripe actif (classe sur #bookingvo-modal-content) */
    .bookingvo-modal-body.direct-checkout #bookingvo-booking-form .bookingvo-btn-pay {
        display: flex !important;
    }
    #bookingvo-modal-content.bookingvo-stripe-active .bookingvo-modal-body.direct-checkout #bookingvo-booking-form .bookingvo-btn-pay {
        display: none !important;
    }
    
    /* === BOUTONS STICKY EN BAS === */
    .bookingvo-form-actions {
        position: fixed !important;
        bottom: 0 !important;
        left: 0 !important;
        right: 0 !important;
        background: #fff !important;
        padding: 12px 16px !important;
        padding-bottom: calc(12px + env(safe-area-inset-bottom)) !important;
        border-top: 1px solid #e5e7eb !important;
        box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.08) !important;
        z-index: 1000 !important;
        display: flex !important;
        flex-direction: column !important;
        gap: 8px !important;
    }
    
    /* Style commun pour TOUS les boutons - même forme */
    .bookingvo-form-actions button,
    .bookingvo-form-actions .bookingvo-btn-cancel,
    .bookingvo-form-actions .bookingvo-btn-pay,
    .bookingvo-form-actions .bookingvo-btn-reserve,
    .bookingvo-form-actions .bookingvo-btn-admin-register {
        width: 100% !important;
        padding: 14px 20px !important;
        font-size: 16px !important;
        font-weight: 600 !important;
        border-radius: 12px !important;
        min-height: 50px !important;
        text-align: center !important;
        align-items: center !important;
        justify-content: center !important;
        box-sizing: border-box !important;
    }
    
    /* Afficher les boutons en flex - .bookingvo-btn-pay et .bookingvo-btn-stripe-pay sont gérés par JS */
    .bookingvo-form-actions .bookingvo-btn-cancel,
    .bookingvo-form-actions .bookingvo-btn-admin-register,
    .bookingvo-form-actions .bookingvo-btn-admin-save {
        display: flex !important;
    }
    
    /* Ordre des boutons : 1-Payer, 2-Admin, 3-Annuler */
    .bookingvo-form-actions .bookingvo-btn-pay {
        order: -3 !important;
    }
    
    .bookingvo-form-actions .bookingvo-btn-admin-register {
        order: -2 !important;
    }
    
    .bookingvo-form-actions .bookingvo-btn-cancel {
        order: -1 !important;
    }
    
    /* Masquer les boutons Réserver et Envoyer sur mobile */
    .bookingvo-btn-reserve,
    .bookingvo-btn-send,
    #bookingvo-send-btn,
    #bookingvo-reserve-btn {
        display: none !important;
    }
    
    
    /* === MASQUER LES ÉLÉMENTS NON NÉCESSAIRES === */
    
    #bookingvo-mobile-container,
    #bookingvo-mobile-header,
    #bookingvo-mobile-summary,
    #bookingvo-mobile-form-footer {
        display: none !important;
    }
    
    /* Masquer le nouveau layout desktop sur mobile */
    #bookingvo-modal-new-layout {
        display: none !important;
    }
    
    /* Afficher le formulaire classique */
    #bookingvo-session-info-box {
        display: block !important;
    }
    
    /* === ANIMATIONS TACTILES === */
    .bookingvo-occurrence-calendar-day:active,
    .bookingvo-alternative-slot-btn:active,
    .bookingvo-btn-pay:active,
    .bookingvo-btn-reserve:active,
    .bookingvo-btn-admin-register:active,
    #bookingvo-gift-toggle:active {
        transform: scale(0.98) !important;
        transition: transform 0.1s ease !important;
    }
    
    /* === SAFE AREA POUR IPHONE X+ === */
    .bookingvo-modal-content {
        padding-bottom: env(safe-area-inset-bottom) !important;
    }
    
    /* === RÈGLE FINALE : Masquer bouton Payer quand Stripe actif === */
    /* Placée en dernier pour garantir la priorité */
    #bookingvo-modal-content.bookingvo-stripe-active .bookingvo-form-actions .bookingvo-btn-pay,
    #bookingvo-modal-content.bookingvo-stripe-active .bookingvo-form-actions button.bookingvo-btn-pay,
    .bookingvo-modal-content.bookingvo-stripe-active .bookingvo-form-actions .bookingvo-btn-pay,
    .bookingvo-stripe-active .bookingvo-btn-pay {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
        pointer-events: none !important;
        height: 0 !important;
        min-height: 0 !important;
        padding: 0 !important;
        margin: 0 !important;
        overflow: hidden !important;
    }
}