/* ========================================
   MOBILE HEADER ADJUSTMENTS
   Optimizaciones para el header en móviles
   ======================================== */

/* GLOBAL: Prevenir desbordamiento en móviles */
@media (max-width: 968px) {
    /* Prevenir overflow horizontal en TODA la página */
    html {
        overflow-x: hidden !important;
        max-width: 100vw !important;
    }
    
    body {
        overflow-x: hidden !important;
        max-width: 100vw !important;
    }
    
    /* Todos los contenedores principales */
    * {
        max-width: 100vw !important;
    }
    
    .header {
        width: 100vw !important;
        max-width: 100vw !important;
        box-sizing: border-box !important;
        overflow-x: hidden !important;
        overflow-y: visible !important;
    }
    
    .header-container {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }
    
    /* Prevenir overflow del contenedor principal */
    .main-container,
    .main-content,
    .products-grid,
    .container {
        overflow-x: hidden !important;
        max-width: 100vw !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }
    
    /* Todos los elementos flexibles deben poder reducirse */
    .logo,
    .search-bar,
    .header-icons,
    .currency-selector,
    .icon-btn {
        flex-shrink: 1 !important;
        min-width: 0 !important;
    }
}

/* Tablet (968px - 769px) */
@media (max-width: 968px) {
    .header-icons {
        flex-wrap: nowrap;
        overflow-x: visible;
    }
    
    .currency-selector {
        flex-shrink: 0;
    }
    
    .icon-btn {
        flex-shrink: 0;
    }
}

/* Mobile (768px - 481px) */
@media (max-width: 768px) {
    .header-container {
        max-width: 100% !important;
        width: 100% !important;
        overflow-x: visible;
        padding: 0.6rem 0.75rem !important;
        gap: 0.6rem !important;
        grid-template-columns: auto 1fr auto !important;
        align-items: center !important;
    }
    
    .logo-img {
        height: 28px !important;
        max-width: 100px !important;
    }
    
    .header-icons {
        gap: 0.4rem !important;
        flex-wrap: nowrap;
        overflow-x: visible;
        justify-content: flex-end;
        align-items: center;
        position: relative;
        z-index: 1;
    }
    
    .icon-btn {
        flex-shrink: 0;
        width: 34px !important;
        height: 34px !important;
        font-size: 0.95rem !important;
        padding: 0 !important;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    
    .cart-badge {
        font-size: 0.52rem;
        width: 15px;
        height: 15px;
    }
    
    .currency-selector {
        flex-shrink: 0;
        position: relative;
        z-index: 1002;
    }
    
    /* Barra de búsqueda optimizada */
    .search-bar {
        max-width: 100% !important;
        flex: 1;
        min-width: 0 !important;
    }
    
    .search-input {
        padding: 0.6rem 0.75rem 0.6rem 2.25rem !important;
        font-size: 0.85rem !important;
        border-radius: 14px !important;
    }
    
    .search-icon {
        left: 0.75rem !important;
        font-size: 0.9rem !important;
    }
}

/* Small Mobile (480px - 361px) */
@media (max-width: 480px) {
    .header-container {
        padding: 0.5rem 0.6rem !important;
        gap: 0.4rem !important;
    }
    
    .logo-img {
        height: 26px !important;
        max-width: 85px !important;
    }
    
    .header-icons {
        gap: 0.3rem !important;
        flex-wrap: nowrap;
    }
    
    .icon-btn {
        flex-shrink: 0;
        min-width: 32px !important;
        width: 32px !important;
        height: 32px !important;
        font-size: 0.9rem !important;
    }
    
    .cart-badge {
        font-size: 0.5rem;
        width: 14px;
        height: 14px;
        top: -2px;
        right: -2px;
    }
    
    .currency-selector {
        flex-shrink: 0;
    }
    
    /* Barra de búsqueda compacta */
    .search-input {
        padding: 0.5rem 0.6rem 0.5rem 2rem !important;
        font-size: 0.8rem !important;
        border-radius: 12px !important;
    }
    
    .search-icon {
        left: 0.6rem !important;
        font-size: 0.8rem !important;
    }
    
    .search-input::placeholder {
        font-size: 0.75rem;
    }
}

/* Extra Small Mobile (360px and below) */
@media (max-width: 360px) {
    .header-container {
        padding: 0.4rem 0.5rem !important;
        gap: 0.35rem !important;
    }
    
    .logo-img {
        height: 24px !important;
        max-width: 75px !important;
    }
    
    .header-icons {
        gap: 0.25rem !important;
    }
    
    .icon-btn {
        min-width: 30px !important;
        width: 30px !important;
        height: 30px !important;
        font-size: 0.85rem !important;
    }
    
    .cart-badge {
        font-size: 0.48rem;
        width: 13px;
        height: 13px;
        top: -2px;
        right: -2px;
    }
    
    .currency-selector {
        flex-shrink: 0;
    }
    
    /* Barra de búsqueda mínima pero legible */
    .search-input {
        padding: 0.45rem 0.5rem 0.45rem 1.8rem !important;
        font-size: 0.75rem !important;
        border-radius: 10px !important;
    }
    
    .search-icon {
        left: 0.5rem !important;
        font-size: 0.75rem !important;
    }
    
    .search-input::placeholder {
        font-size: 0.7rem;
    }
    
    /* Ocultar botón de filtro en pantallas muy pequeñas */
    .header-icons > #filterBtn {
        display: none !important;
    }
}

/* Prevent horizontal overflow on all devices */
@media (max-width: 968px) {
    .header,
    .header-container,
    .header-icons {
        overflow-x: visible !important;
        overflow-y: visible !important;
    }
    
    /* Ensure currency dropdown doesn't cause overflow */
    .currency-dropdown {
        position: absolute !important;
        right: 0 !important;
        z-index: 10000 !important;
    }
    
    .currency-selector {
        z-index: 1002 !important;
    }
}

@media (max-width: 480px) {
    .currency-dropdown {
        right: 0 !important;
        z-index: 10000 !important;
    }
    
    .currency-selector {
        z-index: 1002 !important;
    }
}

/* ========================================
   CURRENCY SELECTOR MOBILE FIXES
   Asegurar visibilidad del dropdown
   ======================================== */

@media (max-width: 968px) {
    /* Permitir que el dropdown sea visible fuera del header */
    .currency-selector {
        position: relative !important;
        overflow: visible !important;
    }
    
    .currency-dropdown {
        position: absolute !important;
        top: 100% !important;
        right: 0 !important;
        left: auto !important;
        z-index: 99999 !important;
        margin-top: 0.5rem !important;
    }
    
    /* Asegurar que el dropdown esté por encima de todo */
    .currency-dropdown.active {
        display: block !important;
        opacity: 1 !important;
        visibility: visible !important;
        transform: translateY(0) !important;
    }
}