/* ========================================
   FIX RESPONSIVE - ESTABILIZACIÓN DE ELEMENTOS
======================================== */

/* Prevenir desbordamiento horizontal solo en imágenes y videos */
img, video, iframe {
    max-width: 100% !important;
}

html {
    overflow-x: hidden !important;
    width: 100% !important;
}

body {
    overflow-x: hidden !important;
    width: 100% !important;
    position: relative !important;
}

/* Estabilizar elementos fijos */
.merch-cart-icon,
.scroll-percentage,
.nav-bullets,
.navigation,
.header {
    will-change: auto !important; /* Desactivar optimización que puede causar problemas */
    transform: translateZ(0); /* Forzar capa de composición */
    backface-visibility: hidden; /* Prevenir flickering */
}

/* El reproductor necesita poder moverse para sus estados */
.audio-player-bar {
    backface-visibility: hidden; /* Prevenir flickering */
    /* Permitir transiciones para los estados hidden/compact/expanded */
}

/* Asegurar que los elementos fijos no causen reflow */
.merch-cart-icon {
    position: fixed !important;
    right: 30px !important;
    bottom: 200px !important;
    width: 60px !important;
    height: 60px !important;
}

.scroll-percentage {
    position: fixed !important;
    right: 30px !important;
    bottom: 180px !important;
    width: 80px !important;
    height: 80px !important;
}

/* Solo prevenir desbordamiento horizontal sin afectar layouts */
body > * {
    overflow-x: hidden;
}

/* Estabilizar la navegación */
.navigation {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
}

/* Prevenir animaciones infinitas en elementos críticos */
.merch-cart-icon *,
.scroll-percentage *,
.nav-bullets *,
.navigation * {
    animation: none !important;
}

/* Media query para móvil */
@media (max-width: 768px) {
    /* Solo ajustes esenciales para móvil */

    /* Estabilizar carrito en móvil */
    .merch-cart-icon {
        right: 15px !important;
        bottom: 90px !important;
        width: 50px !important;
        height: 50px !important;
    }

    /* Ocultar elementos problemáticos si es necesario */
    .nav-bullets,
    .scroll-percentage {
        display: none !important;
    }

    /* Asegurar que el menú móvil esté visible */
    .nav-toggle {
        display: flex !important;
        position: fixed !important;
        top: 20px !important;
        right: 20px !important;
        z-index: 9999 !important;
    }
}

/* Permitir que el reproductor mantenga sus estados */
.audio-player-bar.hidden {
    transform: translateY(calc(100% - 8px)) !important;
}

.audio-player-bar.compact {
    transform: translateY(calc(100% - 45px)) !important;
}

.audio-player-bar.expanded {
    transform: translateY(0) !important;
}

/* Desactivar todas las transiciones en elementos problemáticos EXCEPTO el reproductor */
@media (prefers-reduced-motion: reduce), (max-width: 768px) {
    .merch-cart-icon,
    .scroll-percentage,
    .nav-bullets,
    .navigation {
        transition: none !important;
    }

    /* El reproductor debe mantener su transición para cambiar de estados */
    .audio-player-bar {
        transition: transform 0.3s ease !important;
    }
}

/* Debug: Mostrar elementos que causan overflow */
/*
* {
    outline: 1px solid red;
}
*/