/* ==========================================================================
   MOBILE MENU FIX - ARGENTINA EXTREMA
   Archivo: /css/mobile-menu-fix-final.css
   ESTE ARCHIVO DEBE CARGARSE AL FINAL para sobrescribir conflictos
   ========================================================================== */

/* ==========================================================================
   RESET COMPLETO DEL NAVBAR MÓVIL - MÁXIMA PRIORIDAD
   ========================================================================== */

/* SOBRESCRIBIR TODOS LOS ESTILOS CONFLICTIVOS */
@media (max-width: 991.98px) {
    
    /* NAVBAR PRINCIPAL - FORZAR ESTILOS CORRECTOS */
    body .navbar {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        z-index: 1030 !important;
        background-color: #343a40 !important;
        padding: 0.5rem 1rem !important;
        height: 70px !important;
        box-shadow: 0 2px 10px rgba(0,0,0,0.1) !important;
        backdrop-filter: blur(10px) !important;
    }
    
    /* LOGO NAVBAR */
    body .navbar-brand {
        margin-right: auto !important;
        padding: 0 !important;
        display: flex !important;
        align-items: center !important;
    }
    
    body .navbar-brand img {
        height: 40px !important;
        width: auto !important;
        max-width: 160px !important;
    }
    
    /* BOTÓN HAMBURGUESA */
    body .navbar-toggler {
        border: none !important;
        padding: 0.25rem 0.5rem !important;
        font-size: 1.25rem !important;
        background: transparent !important;
        color: rgba(255,255,255,0.8) !important;
        margin-left: 0.5rem !important;
        order: 3 !important;
    }
    
    body .navbar-toggler:focus {
        box-shadow: none !important;
        outline: none !important;
    }
    
    body .navbar-toggler:hover {
        color: #fd7e14 !important;
    }
    
    /* CARRITO MÓVIL */
    body .navbar .d-lg-none {
        order: 2 !important;
        margin-left: auto !important;
        margin-right: 0.5rem !important;
    }
    
    body .navbar .d-lg-none .btn {
        width: 40px !important;
        height: 40px !important;
        border-radius: 50% !important;
        padding: 0 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        background: #fd7e14 !important;
        border: none !important;
        color: white !important;
    }
    
    body .navbar .d-lg-none .badge {
        position: absolute !important;
        top: -8px !important;
        right: -8px !important;
        background: #dc3545 !important;
        font-size: 0.6rem !important;
        min-width: 16px !important;
        height: 16px !important;
        border-radius: 50% !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        border: 2px solid #343a40 !important;
    }
}

/* ==========================================================================
   NAVBAR COLLAPSE - MENÚ DESPLEGABLE
   ========================================================================== */

@media (max-width: 991.98px) {
    
    /* CONTENEDOR DEL MENÚ COLAPSABLE */
    body .navbar-collapse {
        position: fixed !important;
        top: 70px !important;
        left: 0 !important;
        width: 100% !important;
        height: calc(100vh - 70px) !important;
        background: #343a40 !important;
        overflow-y: auto !important;
        padding: 0 !important;
        transform: translateX(-100%) !important;
        transition: transform 0.3s ease-in-out !important;
        z-index: 1029 !important;
        border: none !important;
        box-shadow: none !important;
    }
    
    /* MENÚ ABIERTO */
    body .navbar-collapse.show {
        transform: translateX(0) !important;
    }
    
    /* NAVEGACIÓN PRINCIPAL */
    body .navbar-nav {
        padding: 1rem 0 !important;
        margin: 0 !important;
        width: 100% !important;
        flex-direction: column !important;
    }
    
    /* ELEMENTOS DEL MENÚ */
    body .navbar-nav .nav-item {
        width: 100% !important;
        margin: 0 !important;
        border-bottom: 1px solid rgba(255,255,255,0.1) !important;
    }
    
    body .navbar-nav .nav-link {
        color: rgba(255,255,255,0.9) !important;
        padding: 1rem 1.5rem !important;
        font-size: 1rem !important;
        font-weight: 500 !important;
        display: flex !important;
        align-items: center !important;
        transition: all 0.2s ease !important;
        border-radius: 0 !important;
        margin: 0 !important;
        text-decoration: none !important;
    }
    
    body .navbar-nav .nav-link:hover,
    body .navbar-nav .nav-link:focus {
        background: rgba(253, 126, 20, 0.2) !important;
        color: #fd7e14 !important;
        transform: none !important;
    }
    
    body .navbar-nav .nav-link i {
        width: 20px !important;
        margin-right: 0.75rem !important;
        font-size: 1rem !important;
        color: #fd7e14 !important;
        text-align: center !important;
    }
}

/* ==========================================================================
   DROPDOWNS MÓVILES - CORREGIR SUBMENUS
   ========================================================================== */

@media (max-width: 991.98px) {
    
    /* DROPDOWN TOGGLE */
    body .navbar-nav .dropdown-toggle::after {
        margin-left: auto !important;
        transition: transform 0.2s ease !important;
    }
    
    body .navbar-nav .dropdown.show .dropdown-toggle::after {
        transform: rotate(180deg) !important;
    }
    
    /* MENÚ DROPDOWN */
    body .navbar-nav .dropdown-menu {
        position: static !important;
        float: none !important;
        border: none !important;
        border-radius: 0 !important;
        box-shadow: none !important;
        background: rgba(0,0,0,0.3) !important;
        padding: 0 !important;
        margin: 0 !important;
        width: 100% !important;
        display: none !important;
        backdrop-filter: none !important;
    }
    
    body .navbar-nav .dropdown-menu.show {
        display: block !important;
    }
    
    /* ELEMENTOS DEL DROPDOWN */
    body .navbar-nav .dropdown-item {
        color: rgba(255,255,255,0.8) !important;
        padding: 0.875rem 2.5rem !important;
        font-size: 0.9rem !important;
        border-bottom: 1px solid rgba(255,255,255,0.05) !important;
        background: transparent !important;
        transition: all 0.2s ease !important;
        display: flex !important;
        align-items: center !important;
        text-decoration: none !important;
    }
    
    body .navbar-nav .dropdown-item:hover,
    body .navbar-nav .dropdown-item:focus {
        background: rgba(253, 126, 20, 0.1) !important;
        color: #fd7e14 !important;
    }
    
    body .navbar-nav .dropdown-item i {
        width: 18px !important;
        margin-right: 0.75rem !important;
        font-size: 0.9rem !important;
        color: #fd7e14 !important;
        text-align: center !important;
    }
}

/* ==========================================================================
   SUBMENUS ANIDADOS - CORREGIR COMPLETAMENTE
   ========================================================================== */

@media (max-width: 991.98px) {
    
    /* SUBMENU CONTAINER */
    body .navbar-nav .dropdown-submenu {
        position: relative !important;
        width: 100% !important;
    }
    
    /* SUBMENU DROPDOWN */
    body .navbar-nav .dropdown-submenu .dropdown-menu {
        position: static !important;
        left: auto !important;
        top: auto !important;
        transform: none !important;
        margin: 0 !important;
        background: rgba(0,0,0,0.4) !important;
        border: none !important;
        box-shadow: none !important;
        display: none !important;
        max-height: none !important;
        overflow: visible !important;
        width: 100% !important;
    }
    
    body .navbar-nav .dropdown-submenu.show .dropdown-menu {
        display: block !important;
    }
    
    /* SUBMENU ITEMS */
    body .navbar-nav .dropdown-submenu .dropdown-item {
        padding-left: 3.5rem !important;
        font-size: 0.85rem !important;
        color: rgba(255,255,255,0.7) !important;
    }
    
    body .navbar-nav .dropdown-submenu .dropdown-item:hover {
        background: rgba(253, 126, 20, 0.15) !important;
        color: #fd7e14 !important;
    }
    
    /* SUBMENU TOGGLE */
    body .navbar-nav .dropdown-submenu > .dropdown-item::after {
        content: '\f054' !important;
        font-family: 'Font Awesome 5 Free' !important;
        font-weight: 900 !important;
        float: right !important;
        margin-left: auto !important;
        transition: transform 0.2s ease !important;
        font-size: 0.8rem !important;
    }
    
    body .navbar-nav .dropdown-submenu.show > .dropdown-item::after {
        transform: rotate(90deg) !important;
    }
}

/* ==========================================================================
   BÚSQUEDA MÓVIL
   ========================================================================== */

@media (max-width: 991.98px) {
    
    /* OCULTAR BÚSQUEDA DEL NAVBAR EN MÓVIL */
    body .navbar .search-container {
        display: none !important;
    }
    
    /* BÚSQUEDA EN EL MENÚ COLAPSABLE */
    body .navbar-collapse .search-form {
        padding: 1rem 1.5rem !important;
        background: rgba(0,0,0,0.2) !important;
        margin: 0.5rem 0 !important;
        border-radius: 8px !important;
        margin-left: 1rem !important;
        margin-right: 1rem !important;
    }
    
    body .navbar-collapse .search-form .input-group {
        border-radius: 8px !important;
        overflow: hidden !important;
        box-shadow: 0 2px 8px rgba(0,0,0,0.2) !important;
    }
    
    body .navbar-collapse .search-form .search-input {
        background: white !important;
        border: none !important;
        color: #333 !important;
        font-size: 1rem !important;
        padding: 0.875rem 1rem !important;
    }
    
    body .navbar-collapse .search-form .form-select {
        background: #f8f9fa !important;
        border: none !important;
        color: #333 !important;
        max-width: 100px !important;
        font-size: 0.9rem !important;
    }
    
    body .navbar-collapse .search-form .search-btn {
        background: #fd7e14 !important;
        border: none !important;
        padding: 0.875rem 1rem !important;
        color: white !important;
    }
}

/* ==========================================================================
   FORMULARIO DE IDIOMA MÓVIL
   ========================================================================== */

@media (max-width: 991.98px) {
    
    body .navbar-nav form {
        width: 100% !important;
        padding: 0.5rem 1.5rem !important;
        margin: 0.5rem 0 !important;
    }
    
    body .navbar-nav form button.nav-link {
        width: 100% !important;
        background: rgba(255,255,255,0.1) !important;
        border: 1px solid rgba(255,255,255,0.2) !important;
        color: rgba(255,255,255,0.9) !important;
        padding: 0.875rem 1rem !important;
        border-radius: 8px !important;
        justify-content: center !important;
        font-size: 1rem !important;
        transition: all 0.2s ease !important;
    }
    
    body .navbar-nav form button.nav-link:hover {
        background: rgba(253, 126, 20, 0.2) !important;
        border-color: #fd7e14 !important;
        color: #fd7e14 !important;
    }
}

/* ==========================================================================
   USUARIO LOGGEADO MÓVIL
   ========================================================================== */

@media (max-width: 991.98px) {
    
    body .navbar-nav .dropdown-menu-end {
        position: static !important;
        right: auto !important;
        left: auto !important;
    }
    
    /* DIVIDER EN DROPDOWN */
    body .navbar-nav .dropdown-divider {
        border-color: rgba(255,255,255,0.1) !important;
        margin: 0.5rem 2rem !important;
    }
}

/* ==========================================================================
   CORREGIR BODY PADDING
   ========================================================================== */

@media (max-width: 991.98px) {
    
    /* AJUSTAR BODY PARA NAVBAR FIJO */
    body {
        padding-top: 70px !important;
    }
    
    /* CORREGIR HERO SECTION SI EXISTE */
    .hero-section,
    .hero-carousel {
        margin-top: 0 !important;
    }
    
    /* CORREGIR ELEMENTOS QUE PUEDEN INTERFERIR */
    .activity-nav-section {
        margin-top: 0 !important;
    }
}

/* ==========================================================================
   BACKDROP CUANDO EL MENÚ ESTÁ ABIERTO
   ========================================================================== */

@media (max-width: 991.98px) {
    
    /* BACKDROP OSCURO */
    body .navbar-collapse.show::before {
        content: '' !important;
        position: fixed !important;
        top: 70px !important;
        left: 0 !important;
        width: 100% !important;
        height: calc(100vh - 70px) !important;
        background: rgba(0,0,0,0.5) !important;
        z-index: -1 !important;
        backdrop-filter: blur(4px) !important;
    }
}

/* ==========================================================================
   ANIMACIONES SUAVES
   ========================================================================== */

@media (max-width: 991.98px) {
    
    /* TRANSICIONES PARA DROPDOWNS */
    body .navbar-nav .dropdown-menu {
        animation: slideDown 0.3s ease-out !important;
    }
    
    body .navbar-nav .dropdown-submenu .dropdown-menu {
        animation: slideDown 0.2s ease-out !important;
    }
    
    @keyframes slideDown {
        from {
            opacity: 0;
            transform: translateY(-10px);
        }
        to {
            opacity: 1;
            transform: translateY(0);
        }
    }
}

/* ==========================================================================
   ELIMINAR CONFLICTOS CON HERO RESPONSIVE
   ========================================================================== */

@media (max-width: 991.98px) {
    
    /* ASEGURAR QUE EL HERO NO INTERFIERA */
    .mobile-search-container {
        top: 80px !important; /* Dejar espacio para navbar */
    }
    
    /* ELEMENTOS FLOTANTES */
    .float-wp,
    .back-to-top {
        z-index: 1020 !important; /* Debajo del navbar */
    }
}

/* ==========================================================================
   STATES Y ACCESSIBILITY
   ========================================================================== */

@media (max-width: 991.98px) {
    
    /* FOCUS STATES */
    body .navbar-nav .nav-link:focus,
    body .navbar-nav .dropdown-item:focus,
    body .navbar-toggler:focus {
        outline: 2px solid #fd7e14 !important;
        outline-offset: 2px !important;
    }
    
    /* ACTIVE STATES */
    body .navbar-nav .nav-link:active,
    body .navbar-nav .dropdown-item:active {
        background: rgba(253, 126, 20, 0.3) !important;
    }
}

/* ==========================================================================
   RESPONSIVE ESPECÍFICO
   ========================================================================== */

/* Móvil muy pequeño */
@media (max-width: 575.98px) {
    
    body .navbar {
        padding: 0.375rem 0.75rem !important;
    }
    
    body .navbar-brand img {
        height: 35px !important;
        max-width: 140px !important;
    }
    
    body .navbar-nav .nav-link {
        padding: 0.875rem 1rem !important;
        font-size: 0.95rem !important;
    }
    
    body .navbar-nav .dropdown-item {
        padding: 0.75rem 2rem !important;
        font-size: 0.85rem !important;
    }
    
    body .navbar-nav .dropdown-submenu .dropdown-item {
        padding-left: 3rem !important;
        font-size: 0.8rem !important;
    }
}

/* ==========================================================================
   REDUCED MOTION
   ========================================================================== */

@media (max-width: 991.98px) and (prefers-reduced-motion: reduce) {
    
    body .navbar-collapse,
    body .navbar-nav .dropdown-menu,
    body .navbar-nav .dropdown-submenu .dropdown-menu,
    body .navbar-nav .nav-link,
    body .navbar-nav .dropdown-item {
        transition: none !important;
        animation: none !important;
    }
}

/* ==========================================================================
   HIGH CONTRAST MODE
   ========================================================================== */

@media (max-width: 991.98px) and (prefers-contrast: high) {
    
    body .navbar {
        border-bottom: 3px solid white !important;
    }
    
    body .navbar-nav .nav-link,
    body .navbar-nav .dropdown-item {
        border: 1px solid transparent !important;
    }
    
    body .navbar-nav .nav-link:hover,
    body .navbar-nav .dropdown-item:hover {
        border-color: #fd7e14 !important;
        background: white !important;
        color: #000 !important;
    }
}

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

@media (max-width: 991.98px) and (prefers-color-scheme: dark) {
    
    body .navbar,
    body .navbar-collapse {
        background: #1a1a1a !important;
    }
    
    body .navbar-nav .dropdown-menu {
        background: rgba(0,0,0,0.8) !important;
    }
    
    body .navbar-nav .dropdown-submenu .dropdown-menu {
        background: rgba(0,0,0,0.9) !important;
    }
}

/* ==========================================================================
   FORZAR RESET DE CONFLICTOS
   ========================================================================== */

@media (max-width: 991.98px) {
    
    /* RESET COMPLETO DE ELEMENTOS PROBLEMÁTICOS */
    body .navbar .dropdown-submenu > .dropdown-menu {
        position: static !important;
        left: auto !important;
        right: auto !important;
        top: auto !important;
        margin: 0 !important;
        transform: none !important;
        max-width: none !important;
        min-width: auto !important;
        width: 100% !important;
    }
    
    /* ASEGURAR QUE NO HAY SCROLL HORIZONTAL */
    body .navbar-collapse,
    body .navbar-nav,
    body .navbar-nav .dropdown-menu {
        overflow-x: hidden !important;
    }
    
    /* PREVENIR CONFLICTOS DE Z-INDEX */
    body .navbar {
        z-index: 1030 !important;
    }
    
    body .navbar-collapse {
        z-index: 1029 !important;
    }
    
    body .search-results {
        z-index: 1025 !important;
    }
}

/* ==========================================================================
   VALIDACIÓN FINAL
   ========================================================================== */

/* Marcar que este CSS se cargó */
body::after {
    content: 'Mobile Menu Fix Loaded' !important;
    position: fixed !important;
    bottom: -100px !important;
    left: -100px !important;
    opacity: 0 !important;
    pointer-events: none !important;
    z-index: -999 !important;
}