/**
 * Widget Popup Fix
 * Soluciona el problema del popup del widget ChangeNOW que se abre en la posición incorrecta
 */

/* Asegurar que el contenedor del widget permita popups */
.exchange-widget-wrapper {
    position: relative !important;
    overflow: visible !important; /* Permitir que el popup se muestre fuera del contenedor */
    z-index: 1000 !important;
    /* NO usar isolation: isolate ya que puede causar problemas de posicionamiento */
    transform: none !important; /* Evitar transformaciones que creen contextos de apilamiento */
}

/* Asegurar que el iframe del widget tenga el z-index correcto */
#iframe-widget {
    position: relative !important;
    z-index: 1001 !important;
    overflow: visible !important;
    border-radius: 8px !important;
    /* Asegurar que no haya espacio extra */
    margin: 0 !important;
    display: block !important;
}

/* Asegurar que la sección de exchange no interfiera */
.exchange-section {
    position: relative !important;
    overflow: visible !important;
    z-index: 999 !important;
}

/* Permitir que los popups del widget se muestren correctamente */
.exchange-widget-wrapper iframe {
    overflow: visible !important;
    clip: unset !important;
    clip-path: none !important;
}

/* Asegurar que no hay elementos que bloqueen el popup */
.exchange-widget-wrapper::before,
.exchange-widget-wrapper::after {
    pointer-events: none !important;
}

/* Fix para el glow del widget que podría interferir */
.widget-glow {
    pointer-events: none !important;
    z-index: 998 !important;
}

/* Asegurar que el contenedor padre no corte el popup */
.section-container {
    overflow: visible !important;
}

/* Fix específico para móviles */
@media (max-width: 768px) {
    .exchange-widget-wrapper {
        overflow: visible !important;
        transform: none !important; /* Evitar transformaciones que puedan afectar el posicionamiento */
    }
    
    #iframe-widget {
        transform: none !important;
    }
}

/* Asegurar que el popup tenga espacio suficiente */
body {
    overflow-x: hidden; /* Mantener scroll horizontal oculto */
    overflow-y: auto; /* Permitir scroll vertical */
}

/* Fix para el backdrop-filter que podría causar problemas */
.exchange-widget-wrapper {
    backdrop-filter: blur(20px) !important;
    -webkit-backdrop-filter: blur(20px) !important;
    will-change: auto !important; /* Evitar optimizaciones que puedan causar problemas */
}

/* Asegurar que los elementos de partículas no interfieran */
.floating-particles,
.hero-particles,
[id*="particle"] {
    pointer-events: none !important;
    z-index: 1 !important; /* Mantener las partículas en el fondo */
}

/* Fix para elementos que podrían tener z-index alto */
.ticker-wrap,
.hero-section,
.matrix-bg,
.terminal-background {
    z-index: 10 !important; /* Mantener estos elementos por debajo del widget */
}

/* Asegurar que el widget tenga prioridad sobre otros elementos */
.exchange-widget-wrapper,
#iframe-widget {
    z-index: 9999 !important;
}

/* Fix para el contenedor de AOS (animaciones) que podría interferir */
[data-aos] {
    overflow: visible !important;
}

/* Asegurar que no hay máscaras o clips que afecten el popup */
* {
    -webkit-mask: none !important;
    mask: none !important;
}

/* Fix específico para el stepper connector del widget */
.exchange-widget-wrapper script,
script[src*="stepper-connector"] {
    z-index: 10000 !important;
}

/* Permitir que el popup se extienda fuera del viewport si es necesario */
html {
    overflow-x: hidden;
    overflow-y: auto;
}

/* Fix para contenedores con transform que pueden crear nuevos contextos de apilamiento */
.exchange-section,
.section-container,
.hero-section {
    transform: none !important;
    will-change: auto !important;
    /* Asegurar que no hay elementos con position fixed que interfieran */
    position: relative !important;
}

/* Fix específico para evitar que el popup se posicione incorrectamente */
.exchange-section {
    /* Crear un contexto de posicionamiento local para el widget */
    contain: layout style !important;
}

/* Asegurar que elementos con position fixed no interfieran */
body, html {
    /* Evitar que elementos fixed se posicionen incorrectamente */
    transform: none !important;
}

/* Fix para el hero section que podría estar interfiriendo */
.hero-section {
    /* Reducir z-index para que no interfiera con el popup */
    z-index: 1 !important;
    transform: none !important;
    position: relative !important;
}

/* Asegurar que el popup del widget tenga la máxima prioridad */
.exchange-widget-wrapper iframe[src*="changenow"] {
    z-index: 999999 !important;
    position: relative !important;
    /* NO usar isolation ya que puede causar problemas */
}

/* Fix específico para popups del widget ChangeNOW */
[class*="changenow"],
[id*="changenow"],
[class*="widget-popup"],
[class*="exchange-popup"],
div[style*="position: fixed"][style*="z-index"] {
    /* Forzar posicionamiento correcto */
    position: fixed !important;
    z-index: 999999 !important;
    /* Evitar que se posicione en el hero */
    top: auto !important;
    transform: none !important;
}

/* Asegurar que el wrapper del widget sea el punto de referencia */
.exchange-widget-wrapper {
    /* Crear un contexto de posicionamiento fuerte */
    position: relative !important;
    z-index: 10000 !important;
    /* Asegurar que esté por encima del hero */
    isolation: auto !important;
    /* Hacer el contenedor más compacto - casi del tamaño del widget */
    padding: 0 !important;
    min-height: auto !important;
    height: auto !important;
}

/* Reducir z-index de elementos que puedan interferir */
.hero-section,
.hero-content,
.hero-visual,
.logo-container-hero {
    z-index: 1 !important;
    position: relative !important;
    transform: none !important;
}

/* Asegurar que la sección de exchange tenga prioridad */
.exchange-section {
    z-index: 100 !important;
    position: relative !important;
    transform: none !important;
}

/* Hacer el contenedor extremadamente ajustado al widget */
.exchange-widget-wrapper {
    /* Eliminar cualquier espacio extra */
    line-height: 1 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    /* Mínimo padding */
    padding: 0 !important;
    /* Altura ajustada al contenido */
    height: auto !important;
    min-height: auto !important;
    max-height: none !important;
}

/* Asegurar que el iframe ocupe todo el espacio disponible */
#iframe-widget {
    flex-shrink: 0 !important;
    width: 100% !important;
    /* Respetar la altura inline del iframe */
    height: auto !important;
}