/**
 * Mobile Fixes - Ecoruta Tours
 * Correcciones específicas para dispositivos móviles
 */

/* Correcciones generales para viewport móvil */
@media (max-width: 768px) {
    html, body {
        width: 100%;
        overflow-x: hidden;
        position: relative;
    }
    
    /* Prevenir scroll horizontal en móviles */
    body {
        max-width: 100vw;
    }
    
    /* Mejorar la velocidad de carga en dispositivos móviles */
    * {
        -webkit-tap-highlight-color: transparent;
    }
    
    /* Mejorar el funcionamiento del menú en dispositivos móviles */
    #mobile-menu {
        overscroll-behavior: contain;
    }
    
    /* Asegurar que la sombra de overlay solo aparezca en la sección hero */
    .bg-black.bg-opacity-30 {
        background-color: rgba(0, 0, 0, 0.3) !important;
    }
    
    /* Asegurar que los modales tienen fondo transparente correcto */
    #packageModal, #destinationModal {
        background-color: rgba(0, 0, 0, 0.5) !important;
        align-items: center;
        justify-content: center;
        padding: 10px;
    }
    
    #packageModal .max-w-4xl, #destinationModal .max-w-4xl {
        width: 95%;
        max-height: 85vh;
        margin: 0 auto;
        display: flex;
        flex-direction: column;
        overflow: hidden;
    }
    
    #packageModal .grid, #destinationModal .grid {
        display: flex;
        flex-direction: column;
        height: auto;
    }
    
    #packageModal .h-64, #destinationModal .h-64 {
        height: 180px;
    }
    
    #packageModal .p-6, #destinationModal .p-6 {
        padding: 15px;
        overflow-y: auto;
        max-height: calc(100vh - 210px);
        flex: 1;
    }
    
    /* Mejorar el texto de advertencia y elementos incluidos */
    #packageModal .text-xs.text-gray-500.mt-2.italic {
        display: block !important;
        margin-top: 10px !important;
        font-size: 10px !important;
        line-height: 1.3 !important;
        color: #666 !important;
    }
    
    /* Redistribuir la sección "Incluye" para ahorrar espacio */
    #packageModal #modalPackageIncludes {
        display: flex !important;
        flex-wrap: wrap !important;
        padding-left: 0 !important;
        list-style-type: none !important;
    }
    
    #packageModal #modalPackageIncludes li {
        width: 50% !important;
        padding: 3px 0 3px 20px !important;
        position: relative !important;
        font-size: 11px !important;
    }
    
    #packageModal #modalPackageIncludes li:before {
        content: "✓" !important;
        color: #00BE7F !important;
        position: absolute !important;
        left: 0 !important;
    }
    
    /* Estilos para los botones de cerrar */
    #packageModal button[type="button"]:first-child, 
    #destinationModal button[type="button"]:first-child {
        background-color: rgba(255, 255, 255, 0.8);
        border-radius: 50%;
        width: 40px;
        height: 40px;
        display: flex;
        align-items: center;
        justify-content: center;
        position: absolute;
        top: 5px;
        right: 5px;
        z-index: 10;
        box-shadow: 0 2px 4px rgba(0,0,0,0.2);
    }
    
    /* Mejorar la visualización de imágenes */
    #packageModal img, #destinationModal img {
        width: 100%;
        height: 180px;
        object-fit: cover;
    }
    
    /* Hacer los botones más accesibles para tocar */
    #packageModal button, #destinationModal button,
    #packageModal a.bg-green-500, #destinationModal a.bg-green-500,
    #packageModal #modalAddToCartBtn, #packageModal #modalWhatsappLink {
        padding: 10px !important;
        margin-bottom: 8px !important;
        width: 100% !important;
        text-align: center !important;
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        font-size: 14px !important;
    }
    
    /* Botón de WhatsApp en verde más visible */
    #modalWhatsappLink {
        background-color: #25D366 !important;
        color: white !important;
        box-shadow: 0 2px 5px rgba(37, 211, 102, 0.3) !important;
    }
    
    /* Mejorar la visualización del mensaje después de los includes */
    #packageModal .mb-4:last-of-type {
        margin-bottom: 10px !important;
    }
    
    /* Contenedor de botones */
    #packageModal .flex.flex-col.space-y-3.mt-6 {
        margin-top: 10px !important;
        position: relative !important;
        z-index: 5 !important; /* Asegurar que los botones estén encima */
    }
}

/* Asegurarse de que el contenido se cargue correctamente en móviles */
@media (max-width: 991px) {
    /* Correcciones para la carga inicial de la página */
    html {
        height: 100%;
    }
    
    body {
        min-height: 100%;
        display: flex;
        flex-direction: column;
    }
    
    /* Mejorar la interacción con el header fijo */
    header {
        position: sticky;
        width: 100%;
    }
    
    /* Asegurar que el pie de página siempre esté en el fondo */
    footer {
        margin-top: auto;
    }
    
    /* Mejorar la visualización en orientación landscape */
    @media (orientation: landscape) {
        #packageModal .max-w-4xl, #destinationModal .max-w-4xl {
            max-height: 90vh;
        }
        
        #packageModal .h-64, #destinationModal .h-64,
        #packageModal img, #destinationModal img {
            height: 140px;
        }
    }
}

/* Correcciones para teléfonos muy pequeños */
@media (max-width: 360px) {
    #packageModal .max-w-4xl, #destinationModal .max-w-4xl {
        width: 98%;
    }
    
    #packageModal .p-6, #destinationModal .p-6 {
        padding: 10px;
    }
    
    #packageModal .h-64, #destinationModal .h-64,
    #packageModal img, #destinationModal img {
        height: 150px;
    }
}

/* Mejoras de rendimiento para todos los dispositivos */
.animate-optimized {
    will-change: transform, opacity;
    backface-visibility: hidden;
}

/* Animaciones para la carga de la página - más suaves en móviles */
@media (max-width: 768px) {
    [data-aos] {
        transition-duration: 400ms !important;
    }
}