/* 
 * Modal Fixes - Ecoruta Tours
 * Correcciones para los modales de paquetes y destinos
 */

/* Estructura general de modales */
.fixed.inset-0.bg-black.bg-opacity-50.z-50.flex.items-center.justify-center:not(.hidden) {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    z-index: 50 !important;
}

/* Contenedor de modales */
.bg-white.rounded-lg.shadow-xl.max-w-4xl.w-full.max-h-90vh {
    max-height: 90vh !important;
    overflow-y: auto !important;
    position: relative !important;
    width: 95% !important; /* Asegurar que no sea más ancho que la pantalla en móviles */
    margin: 0 auto !important;
}

/* Grid layout para modales */
.grid.grid-cols-1.md\:grid-cols-2 {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
}

@media (max-width: 768px) {
    .grid.grid-cols-1.md\:grid-cols-2 {
        grid-template-columns: 1fr !important;
        display: block !important; /* Cambiamos a block para evitar problemas de superposición */
    }
    
    /* Mejoras para modales en móvil */
    .bg-white.rounded-lg.shadow-xl.max-w-4xl.w-full.max-h-90vh {
        max-height: 85vh !important; /* Aumentamos la altura máxima */
        overflow-y: auto !important;
        margin: 1rem !important;
        width: calc(100% - 2rem) !important; /* Aseguramos márgenes en los lados */
    }
    
    /* Asegurar que el contenido de los modales sea visible en móviles */
    #destinationModal .p-6,
    #packageModal .p-6 {
        padding: 1rem !important;
        clear: both !important; /* Asegurar que no haya elementos flotantes interfiriendo */
        margin-top: 0 !important; /* Eliminar margen superior */
    }
    
    /* Reducir tamaños de fuente en móviles */
    #modalDestinationTitle,
    #modalPackageTitle {
        font-size: 1.25rem !important;
        margin-bottom: 0.5rem !important;
        margin-top: 1rem !important; /* Espacio después de la imagen */
    }
    
    /* Más espacio para la descripción */
    #modalDestinationDescription, 
    #modalPackageDescription {
        margin-bottom: 1rem !important;
    }
    
    /* La imagen debe estar al principio, ocupando todo el ancho */
    #destinationModal .h-64.md\:h-auto,
    #packageModal .h-64.md\:h-auto {
        width: 100% !important;
        display: block !important;
        max-height: 180px !important; /* Limitar altura de imagen */
    }
    
    /* El botón de cierre debe estar en la esquina superior derecha sobre la imagen */
    #destinationModal button[onclick="closeDestinationModal()"],
    #packageModal button[onclick="closePackageModal()"] {
        position: absolute !important;
        top: 0.5rem !important;
        right: 0.5rem !important;
        background-color: rgba(255, 255, 255, 0.7) !important; /* Fondo semi-transparente */
        border-radius: 50% !important;
        width: 35px !important;
        height: 35px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        z-index: 50 !important; /* Asegurarnos que esté por encima de todo */
        box-shadow: 0 2px 5px rgba(0,0,0,0.2) !important;
    }
}

/* Botón de cerrar */
.absolute.top-4.right-4.text-gray-500.hover\:text-gray-800.z-10,
button[onclick="closePackageModal()"],
button[onclick="closeDestinationModal()"] {
    position: absolute !important;
    top: 1rem !important;
    right: 1rem !important;
    width: auto !important;
    z-index: 10 !important;
}

/* Contenido de modales */
.p-6, 
.p-4, 
.p-5 {
    position: relative !important;
    z-index: 5 !important;
}

/* Botones dentro de modales */
.flex.flex-col.space-y-3.mt-6 {
    position: relative !important;
    z-index: 10 !important;
    margin-top: 1.5rem !important;
}

/* Corregir el problema de superposición de texto sobre imágenes */
#modalDestinationImage,
#modalPackageImage {
    z-index: 1 !important;
    position: relative !important;
}

.h-64.md\:h-auto {
    height: 16rem !important;
}

@media (min-width: 768px) {
    .h-64.md\:h-auto {
        height: auto !important;
    }
}

/* Asegurar que los botones de WhatsApp y Agregar al carrito sean visibles */
#modalWhatsappLink,
#modalAddToCartBtn,
#modalDestinationWhatsapp {
    position: relative !important;
    z-index: 15 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* Asegurar que los botones no se deformen en móviles */
@media (max-width: 640px) {
    /* Contenedor de botones */
    .flex.flex-col.space-y-3.mt-6 {
        margin-bottom: 1rem !important;
        position: relative !important;
        z-index: 20 !important; /* Mayor z-index para móviles */
        background-color: rgba(255, 255, 255, 0.9) !important; /* Fondo semi-transparente */
        padding: 0.75rem !important;
        border-radius: 0.5rem !important;
        margin-top: 1rem !important;
        width: 100% !important; /* Ocupar todo el ancho disponible */
        box-shadow: 0 2px 10px rgba(0,0,0,0.1) !important; /* Sombra sutil para destacar */
    }
    
    /* Botones más grandes en móvil para facilitar el toque */
    #modalWhatsappLink,
    #modalAddToCartBtn,
    #modalDestinationWhatsapp {
        padding: 0.75rem 1rem !important;
        font-size: 1rem !important;
        width: 100% !important; /* Ocupar todo el ancho */
        text-align: center !important;
        justify-content: center !important;
        margin-bottom: 0.5rem !important;
    }
    
    /* Asegurar que la imagen no se deforme */
    #modalDestinationImage,
    #modalPackageImage {
        max-height: 180px !important;
        object-fit: cover !important;
        width: 100% !important;
        border-top-left-radius: 0.5rem !important;
        border-top-right-radius: 0.5rem !important;
    }
    
    /* Estructura del modal en móvil: imagen arriba, texto abajo */
    #destinationModal .grid,
    #packageModal .grid {
        display: flex !important;
        flex-direction: column !important;
    }
    
    /* Contenido de texto debe estar debajo de la imagen */
    #destinationModal .p-6,
    #packageModal .p-6 {
        order: 2 !important; /* Poner después de la imagen */
        background-color: white !important; /* Fondo blanco */
    }
    
    /* La imagen va primero */
    #destinationModal .h-64.md\:h-auto,
    #packageModal .h-64.md\:h-auto {
        order: 1 !important; /* Poner antes del texto */
    }
    
    /* Ajustar la información del paquete para que sea más compacta */
    #packageModal .flex.items-center.text-sm,
    #destinationModal .flex.items-center.text-sm {
        margin-bottom: 0.5rem !important;
    }
    
    /* Asegurar que el botón de cierre tenga el tamaño correcto y posición */
    #destinationModal .fas.fa-times,
    #packageModal .fas.fa-times {
        font-size: 1.25rem !important;
    }
}