/* Estilos para el widget de galería de propiedades */

/* Contenedor principal de la galería */
.property-gallery-wrapper {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    clear: both !important;
    position: relative !important;
    z-index: 5 !important;
    margin-bottom: 30px !important;
}

/* Mensaje de error o galería vacía */
.property-gallery-empty,
.property-gallery-error {
    padding: 30px;
    background-color: #f8f9fa;
    border-radius: 8px;
    text-align: center;
    color: #6c757d;
    border: 1px solid #e9ecef;
    margin-bottom: 30px;
}

/* Cuadrícula de galería */
.property-gallery-grid {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 10px !important;
    width: 100% !important;
    margin-bottom: 30px !important;
}

/* Elementos de la galería */
.property-gallery-grid .gallery-item {
    position: relative !important;
    height: 0 !important;
    padding-bottom: 75% !important; /* Proporción 4:3 por defecto */
    overflow: hidden !important;
    border-radius: 8px !important;
    cursor: pointer !important;
}

.property-gallery-grid .gallery-item img {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    transition: transform 0.3s ease !important;
}

/* Efectos hover para imágenes */
.property-gallery-grid .gallery-item:hover img {
    transform: scale(1.05) !important;
}

/* Overlay al pasar el cursor */
.property-gallery-grid .gallery-item::after {
    content: "" !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    background-color: rgba(0, 0, 0, 0.2) !important;
    opacity: 0 !important;
    transition: opacity 0.3s ease !important;
    pointer-events: none !important;
}

.property-gallery-grid .gallery-item:hover::after {
    opacity: 1 !important;
}

/* Estilo para el indicador "+n" */
.property-gallery-grid .gallery-item.more-item .more-overlay {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    background-color: rgba(0, 0, 0, 0.7) !important;
    color: white !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    font-size: 1.5rem !important;
    z-index: 2 !important;
}

/* Imágenes ocultas para el lightbox */
.property-gallery-grid .hidden-image {
    display: none !important;
}

/* Responsive - Asegurar visualización correcta en todos los dispositivos */
@media (max-width: 1024px) {
    .property-gallery-grid {
        grid-template-columns: repeat(3, 1fr) !important;
    }
}

@media (max-width: 767px) {
    .property-gallery-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

@media (max-width: 480px) {
    .property-gallery-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

/* Solución para superposición en responsive - Alta prioridad */
@media (max-width: 767px) {
    /* Override para el contenedor principal */
    .property-gallery-wrapper {
        position: relative !important;
        z-index: 999 !important; /* Valor muy alto para superar otros elementos */
        display: block !important;
        width: 100% !important;
        clear: both !important;
        float: none !important;
        overflow: visible !important;
        margin-bottom: 30px !important;
    }
    
    /* Asegurar que el widget completo tenga prioridad */
    .elementor-widget-property_gallery {
        position: relative !important;
        z-index: 999 !important;
        width: 100% !important;
    }
    
    /* Solución para la superposición del siguiente contenedor - uso de display flex */
    .elementor-container {
        display: flex !important;
        flex-direction: column !important;
    }
    
    /* Forzar el flujo correcto en contenedores anidados */
    .elementor-inner-section .elementor-container,
    .elementor-column-wrap .elementor-widget-wrap,
    .elementor-widget-wrap {
        overflow: visible !important;
        z-index: auto !important;
        position: relative !important;
    }
    
    /* Asegurar que el contenedor de la galería tiene prioridad */
    body .elementor-section:has(.property-gallery-wrapper) {
        z-index: 998 !important;
        position: relative !important;
    }
}

/* Asegurar que el contenedor no tenga margen excesivo */
.elementor .property-gallery-wrapper {
    margin-left: 0 !important;
    margin-right: 0 !important;
}

/* Arreglo para temas que puedan causar problemas */
.elementor-widget-property_gallery,
.elementor-widget-container {
    overflow: visible !important;
}

/* Corregir problemas con Elementor y z-index */
.elementor-section,
.elementor-column {
    z-index: auto !important;
}

/* Prevenir problemas con position sticky en algunos temas */
.property-gallery-wrapper {
    position: relative !important;
}

/* Solución para las flechas de navegación del lightbox */
.elementor-lightbox .dialog-lightbox-close-button,
.elementor-lightbox .elementor-swiper-button {
    opacity: 1 !important;
    visibility: visible !important;
    display: flex !important;
    z-index: 999999 !important;
    color: #ffffff !important;
    text-shadow: 0 0 3px rgba(0,0,0,0.5) !important;
}

.elementor-lightbox .elementor-swiper-button-prev {
    left: 25px !important;
}

.elementor-lightbox .elementor-swiper-button-next {
    right: 25px !important;
}

.elementor-lightbox .elementor-swiper-button-prev:hover,
.elementor-lightbox .elementor-swiper-button-next:hover {
    color: #ffffff !important;
    background-color: rgba(0,0,0,0.2) !important;
    border-radius: 50% !important;
    padding: 10px !important;
}

.elementor-lightbox .dialog-lightbox-close-button:hover {
    color: #ffffff !important;
}