/**
 * BDI Medical - Compatibilidad con Elementor
 * Corrige problemas de escalado y conflictos con el page builder Elementor
 */

/* ===========================
   RESET Y COMPATIBILIDAD BASE
   =========================== */

/* Prevenir herencia de estilos de Elementor en el plugin */
.bdi-medical-comparator,
.bdi-medical-container,
.bdi-detail-modal-overlay,
.bdi-comparison-modal {
    /* Reset de box-sizing para evitar conflictos */
    box-sizing: border-box !important;
    
    /* Reset de fuentes para evitar herencia de Elementor */
    font-family: 'Comfortaa', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif !important;
    
    /* Reset de line-height para evitar problemas de espaciado */
    line-height: 1.5 !important;
}

/* Aplicar box-sizing a todos los elementos hijos */
.bdi-medical-comparator *,
.bdi-medical-container *,
.bdi-detail-modal-overlay *,
.bdi-comparison-modal * {
    box-sizing: border-box !important;
}

/* ===========================
   Z-INDEX MANAGEMENT
   =========================== */

/* Elementor usa z-index muy altos, ajustamos para estar por encima */
.bdi-detail-modal-overlay {
    z-index: 999999 !important; /* Por encima de Elementor (999998) */
}

.bdi-comparison-modal {
    z-index: 999999 !important;
}

/* Notificaciones y elementos flotantes */
.bdi-selection-notification {
    z-index: 1000000 !important;
}

/* Controles de mapa - mantener por debajo de modales pero por encima de contenido */
.leaflet-control-container {
    z-index: 1000 !important;
}

.leaflet-container {
    z-index: 1 !important;
}

/* ===========================
   CONTENEDORES ELEMENTOR
   =========================== */

/* Asegurar que el plugin funcione dentro de contenedores de Elementor */
.elementor-widget-shortcode .bdi-medical-comparator,
.elementor-shortcode .bdi-medical-comparator,
.elementor-element .bdi-medical-comparator {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
}

/* Contenedor del mapa dentro de Elementor */
.elementor-widget-shortcode .bdi-medical-container,
.elementor-shortcode .bdi-medical-container {
    width: 100% !important;
    height: auto !important;
    min-height: 600px !important;
}

/* ===========================
   RESPONSIVE FIXES PARA ELEMENTOR
   =========================== */

/* Elementor mobile breakpoints: 767px, tablet: 1024px */

/* Mobile Elementor (max-width: 767px) */
@media (max-width: 767px) {
    .elementor-widget-shortcode .bdi-comparator-layout {
        flex-direction: column !important;
        gap: 1rem !important;
    }
    
    .elementor-widget-shortcode .bdi-sidebar {
        width: 100% !important;
        margin-bottom: 1rem !important;
    }
    
    .elementor-widget-shortcode .bdi-main-content {
        width: 100% !important;
    }
    
    /* Modal ajustado para móvil en Elementor */
    .elementor-widget-shortcode .bdi-detail-modal {
        max-width: 95vw !important;
        margin: 1rem !important;
    }
    
    /* Comparador en móvil */
    .elementor-widget-shortcode .bdi-results-grid[data-view="list"] .bdi-result-card-content {
        grid-template-columns: 1fr !important;
        gap: 1rem !important;
    }
}

/* Tablet Elementor (768px - 1024px) */
@media (min-width: 768px) and (max-width: 1024px) {
    .elementor-widget-shortcode .bdi-comparator-layout {
        gap: 1.5rem !important;
    }
    
    .elementor-widget-shortcode .bdi-sidebar {
        min-width: 280px !important;
    }
}

/* ===========================
   GRID Y FLEXBOX FIXES
   =========================== */

/* Prevenir que Elementor interfiera con nuestros grids */
.elementor-widget-shortcode .bdi-results-grid {
    display: grid !important;
}

.elementor-widget-shortcode .bdi-results-grid[data-view="grid"] {
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)) !important;
    gap: 1.5rem !important;
}

.elementor-widget-shortcode .bdi-results-grid[data-view="list"] {
    display: flex !important;
    flex-direction: column !important;
    gap: 1rem !important;
}

/* ===========================
   MODAL FIXES ESPECÍFICOS
   =========================== */

/* Asegurar que los modales se muestren correctamente sobre Elementor */
.bdi-detail-modal-overlay.show,
.bdi-comparison-modal.show {
    display: flex !important;
    opacity: 1 !important;
    visibility: visible !important;
}

/* Prevenir scroll del body cuando el modal está abierto */
body.bdi-modal-open {
    overflow: hidden !important;
    position: fixed !important;
    width: 100% !important;
}

/* ===========================
   BOTONES Y INTERACCIONES
   =========================== */

/* Asegurar que los botones mantengan su estilo dentro de Elementor */
.elementor-widget-shortcode .bdi-btn,
.elementor-widget-shortcode .bdi-result-btn,
.elementor-widget-shortcode .bdi-btn-modal {
    font-family: inherit !important;
    text-decoration: none !important;
    border: none !important;
    outline: none !important;
    cursor: pointer !important;
}

/* Hover states que pueden ser interferidos por Elementor */
.elementor-widget-shortcode .bdi-btn:hover,
.elementor-widget-shortcode .bdi-result-btn:hover {
    transform: translateY(-2px) !important;
}

/* ===========================
   LEAFLET MAP FIXES
   =========================== */

/* Asegurar que los mapas funcionen dentro de contenedores de Elementor */
.elementor-widget-shortcode .leaflet-container {
    width: 100% !important;
    height: 100% !important;
    position: relative !important;
}

/* Controles de mapa */
.elementor-widget-shortcode .leaflet-control-container {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    pointer-events: none !important;
}

.elementor-widget-shortcode .leaflet-control {
    pointer-events: auto !important;
}

/* ===========================
   TYPOGRAPHY OVERRIDES
   =========================== */

/* Prevenir que los estilos de tipografía de Elementor interfieran */
.elementor-widget-shortcode .bdi-medical-comparator h1,
.elementor-widget-shortcode .bdi-medical-comparator h2,
.elementor-widget-shortcode .bdi-medical-comparator h3,
.elementor-widget-shortcode .bdi-medical-comparator h4,
.elementor-widget-shortcode .bdi-medical-comparator h5,
.elementor-widget-shortcode .bdi-medical-comparator h6 {
    font-family: 'Comfortaa', sans-serif !important;
    font-weight: 600 !important;
    line-height: 1.3 !important;
    margin: 0 0 1rem 0 !important;
}

.elementor-widget-shortcode .bdi-medical-comparator p {
    font-family: inherit !important;
    line-height: 1.5 !important;
    margin: 0 0 1rem 0 !important;
}

/* ===========================
   SPACING FIXES
   =========================== */

/* Elementor puede agregar padding/margin no deseado */
.elementor-widget-shortcode .bdi-medical-comparator {
    padding: 0 !important;
    margin: 0 !important;
}

/* Asegurar espaciado consistente en secciones */
.elementor-widget-shortcode .bdi-comparator-header {
    margin-bottom: 2rem !important;
}

.elementor-widget-shortcode .bdi-filters-section {
    margin-bottom: 1.5rem !important;
}

/* ===========================
   PERFORMANCE OPTIMIZATIONS
   =========================== */

/* Mejorar rendimiento en contenedores de Elementor */
.elementor-widget-shortcode .bdi-medical-comparator {
    contain: layout style paint !important;
}

.elementor-widget-shortcode .bdi-results-grid {
    contain: layout !important;
}

/* ===========================
   DARK MODE COMPATIBILITY
   =========================== */

/* Si Elementor está en modo oscuro, mantener nuestros colores */
.elementor-widget-shortcode .bdi-medical-comparator {
    color-scheme: light !important;
}

/* ===========================
   PRINT STYLES
   =========================== */

@media print {
    .bdi-detail-modal-overlay,
    .bdi-comparison-modal {
        display: none !important;
    }
    
    .elementor-widget-shortcode .bdi-medical-comparator {
        width: 100% !important;
        max-width: none !important;
    }
}

/* ===========================
   ACCESSIBILITY FIXES
   =========================== */

/* Asegurar que el focus sea visible dentro de Elementor */
.elementor-widget-shortcode .bdi-medical-comparator button:focus,
.elementor-widget-shortcode .bdi-medical-comparator input:focus,
.elementor-widget-shortcode .bdi-medical-comparator select:focus {
    outline: 2px solid var(--bdi-primary-blue) !important;
    outline-offset: 2px !important;
}

/* ===========================
   ELEMENTOR EDITOR FIXES
   =========================== */

/* Fixes específicos para cuando se edita en Elementor */
.elementor-editor-active .bdi-medical-comparator {
    pointer-events: auto !important;
}

.elementor-editor-active .bdi-detail-modal-overlay,
.elementor-editor-active .bdi-comparison-modal {
    display: none !important;
}