/**
 * CSS Responsivo para Mobile - Correções do Header e Menu
 * Este arquivo contém todas as correções necessárias para o header funcionar corretamente em dispositivos móveis
 */

/* ========================================
   GARANTIR VISIBILIDADE NO DESKTOP
   ======================================== */

@media (min-width: 992px) {
    /* Garante que elementos desktop estejam visíveis */
    .header__left .theme_search_field,
    .header__left .category_search,
    .header__left .category_box_iner,
    .main_menu {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
    }
    
    /* Garante que inputs de busca estejam sempre visíveis no desktop */
    .theme_search_field,
    .category_search,
    .theme_search_field input,
    .category_search input {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        position: relative !important;
    }
    
    /* Remove qualquer display:none ou visibility:hidden inline */
    .header__left .theme_search_field[style],
    .header__left .category_search[style] {
        display: flex !important;
    }
    
    /* Oculta elementos mobile no desktop */
    .mobile_menu {
        display: none !important;
    }
    
    .mobile-search {
        display: none !important;
    }
    
    #mobile-menu {
        display: none !important;
    }
    
    .mobile_menu_overlay {
        display: none !important;
    }
    
    /* Garante que a barra de pesquisa desktop nunca tenha display:none */
    .header__left .input-group.theme_search_field {
        display: flex !important;
    }
}

/* ========================================
   CORREÇÕES GERAIS DO HEADER MOBILE
   ======================================== */

@media (max-width: 991px) {
    /* Container principal do header */
    .header_area {
        position: relative !important;
        z-index: 999 !important;
    }
    
    .header__wrapper {
        display: flex !important;
        flex-wrap: nowrap !important;
        align-items: center !important;
        justify-content: space-between !important;
        padding: 15px 0 !important;
        gap: 8px !important;
    }
    
    /* Área esquerda - Logo */
    .header__left {
        display: flex !important;
        align-items: center !important;
        flex: 0 0 auto !important;
        gap: 8px !important;
    }
    
    .logo_img {
        display: flex !important;
        align-items: center !important;
        flex-shrink: 0 !important;
    }
    
    .logo_img img {
        max-width: 140px !important;
        width: auto !important;
        height: auto !important;
        max-height: 50px !important;
    }
    
    /* Oculta elementos desnecessários APENAS no mobile */
    .header__left .translator-switch {
        display: none !important;
    }
    
    .header__left .category_search {
        display: none !important;
    }
    
    .header__left .category_box_iner {
        display: none !important;
    }
    
    .header__left .theme_search_field {
        display: none !important;
    }
    
    .main_menu {
        display: none !important;
    }
    
    /* Área direita - Ações do usuário */
    .header__right {
        display: flex !important;
        align-items: center !important;
        gap: 10px !important;
        flex: 0 0 auto !important;
        margin-left: auto !important;
    }
    
    /* Alinhamento vertical dos ícones */
    .header__right > * {
        display: flex !important;
        align-items: center !important;
    }
    
    .header__right .cart_count,
    .header__right .notification_wrapper,
    .mobile-search,
    .mobile_menu {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }
    
    .header__right .cart_count a,
    .header__right .notification_wrapper a {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        padding: 8px !important;
    }
    
    /* Botões para visitantes (Login/Registro) */
    .header__right .theme-btn,
    .header__right .theme_btn {
        padding: 8px 14px !important;
        font-size: 12px !important;
        min-width: auto !important;
        white-space: nowrap !important;
        border-radius: 6px !important;
    }
    
    /* Ícone de busca mobile */
    .mobile-search {
        display: flex !important;
        align-items: center !important;
        position: relative !important;
    }
    
    #mobileSearchToggle {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        padding: 8px !important;
        cursor: pointer !important;
        background: transparent !important;
        border: none !important;
    }
    
    .mobile-search-popup {
        position: absolute !important;
        top: calc(100% + 10px) !important;
        right: 0 !important;
        width: 280px !important;
        max-width: calc(100vw - 30px) !important;
        background: #fff !important;
        box-shadow: 0 4px 12px rgba(0,0,0,0.15) !important;
        border-radius: 8px !important;
        padding: 10px !important;
        z-index: 1000 !important;
        display: none !important;
    }
    
    .mobile-search-popup.mobile-visible {
        display: block !important;
    }
    
    /* Menu hamburguer */
    .mobile_menu {
        display: flex !important;
        align-items: center !important;
        order: 999 !important;
        margin-left: 8px !important;
    }
    
    .mobile_menu button {
        background: transparent !important;
        border: none !important;
        padding: 8px !important;
        cursor: pointer !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }
    
    .mobile_menu .fas.fa-bars {
        font-size: 26px !important;
        color: #DD521F !important;
    }
    
    /* Perfil do usuário logado */
    .header__right.login_user {
        display: flex !important;
        align-items: center !important;
        gap: 8px !important;
        margin-right: 45px !important;
    }
    
    .header__right.login_user .profile_img {
        display: flex !important;
        align-items: center !important;
        gap: 8px !important;
        cursor: pointer !important;
    }
    
    .header__right.login_user .studentProfileThumb {
        min-width: 36px !important;
        max-width: 36px !important;
        width: 36px !important;
        height: 36px !important;
        border-radius: 50% !important;
        flex-shrink: 0 !important;
    }
    
    .header__right.login_user .profile_img span {
        font-size: 13px !important;
        max-width: 90px !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
    }
    
    .header__right.login_user .profile_info_iner {
        position: absolute !important;
        top: calc(100% + 10px) !important;
        right: 0 !important;
        background: #fff !important;
        box-shadow: 0 4px 12px rgba(0,0,0,0.15) !important;
        border-radius: 8px !important;
        min-width: 200px !important;
        z-index: 1000 !important;
    }
    
    /* Carrinho e notificações */
    .header__right .cart_count,
    .header__right .notification_wrapper {
        display: flex !important;
        align-items: center !important;
    }
    
    .header__right .cart_count a,
    .header__right .notification_wrapper a {
        padding: 8px !important;
        display: flex !important;
        align-items: center !important;
    }
    
    /* Oculta seletor de idioma/moeda no header mobile */
    .header__wrapper > .translator-switch {
        display: none !important;
    }
    
    /* Container do header */
    .header_area .container-fluid {
        padding-left: 15px !important;
        padding-right: 15px !important;
    }
}

/* ========================================
   MENU MOBILE DROPDOWN
   ======================================== */

@media (max-width: 991px) {
    /* Wrapper do menu mobile */
    #mobile-menu {
        position: fixed !important;
        top: 0 !important;
        left: -100% !important;
        width: 85% !important;
        max-width: 320px !important;
        height: 100vh !important;
        background: #fff !important;
        z-index: 10000 !important;
        transition: left 0.3s ease-in-out !important;
        overflow-y: auto !important;
        box-shadow: 2px 0 15px rgba(0,0,0,0.2) !important;
        padding: 20px 0 !important;
        display: block !important;
    }
    
    #mobile-menu.active {
        left: 0 !important;
    }
    
    /* Garante que o menu seja visível quando ativo */
    #mobile-menu.slicknav_menu {
        display: block !important;
    }
    
    /* Itens do menu mobile */
    #mobile-menu li {
        display: block !important;
        border-bottom: 1px solid #f0f0f0 !important;
    }
    
    #mobile-menu > li > a,
    #mobile-menu .slicknav_nav > li > a {
        display: block !important;
        padding: 15px 20px !important;
        color: #333 !important;
        font-size: 15px !important;
        font-weight: 500 !important;
        transition: all 0.3s ease !important;
        text-decoration: none !important;
    }
    
    #mobile-menu > li > a:hover,
    #mobile-menu .slicknav_nav > li > a:hover {
        background: #f8f8f8 !important;
        color: #DD521F !important;
        padding-left: 25px !important;
    }
    
    /* Submenus */
    #mobile-menu ul,
    #mobile-menu .slicknav_nav ul {
        display: none !important;
        background: #f8f8f8 !important;
        padding-left: 0 !important;
    }
    
    #mobile-menu li.active > ul,
    #mobile-menu .slicknav_nav li.slicknav_open > ul {
        display: block !important;
    }
    
    #mobile-menu ul li a,
    #mobile-menu .slicknav_nav ul li a {
        padding: 12px 20px 12px 35px !important;
        font-size: 14px !important;
        color: #666 !important;
    }
    
    #mobile-menu ul li a:hover,
    #mobile-menu .slicknav_nav ul li a:hover {
        color: #DD521F !important;
        padding-left: 40px !important;
    }
    
    /* Ícones do slicknav */
    .slicknav_arrow {
        float: right !important;
        margin-right: 10px !important;
    }
}

/* ========================================
   HEADER ESTILO 2 (HEADING)
   ======================================== */

@media (max-width: 991px) {
    .heading {
        padding: 12px 0 !important;
    }
    
    .heading .container-fluid > .row > .col-12 > div {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        flex-wrap: nowrap !important;
        gap: 8px !important;
    }
    
    .heading-logo {
        flex: 0 0 auto !important;
    }
    
    .heading-logo img {
        max-height: 42px !important;
        width: auto !important;
    }
    
    .heading-category,
    .heading-search-box:not(.mobile-visible) {
        display: none !important;
    }
    
    .heading-nav {
        display: none !important;
    }
    
    .heading-search-box.mobile-visible {
        position: absolute !important;
        top: calc(100% + 10px) !important;
        right: 15px !important;
        width: 280px !important;
        max-width: calc(100vw - 30px) !important;
        background: #fff !important;
        box-shadow: 0 4px 12px rgba(0,0,0,0.15) !important;
        border-radius: 8px !important;
        padding: 10px !important;
        z-index: 1000 !important;
    }
}

/* ========================================
   TELAS MUITO PEQUENAS (< 576px)
   ======================================== */

@media (max-width: 576px) {
    .logo_img img,
    .heading-logo img {
        max-width: 110px !important;
        max-height: 38px !important;
    }
    
    .header__right .theme-btn,
    .header__right .theme_btn {
        padding: 6px 10px !important;
        font-size: 11px !important;
    }
    
    .header__right.login_user .profile_img span {
        display: none !important;
    }
    
    .header__right.login_user {
        margin-right: 35px !important;
    }
    
    #mobile-menu {
        width: 90% !important;
        max-width: 280px !important;
    }
    
    .mobile-search-popup,
    .heading-search-box.mobile-visible {
        width: calc(100vw - 30px) !important;
        right: 15px !important;
        left: 15px !important;
    }
}

/* ========================================
   TELAS MÉDIAS (768px - 991px)
   ======================================== */

@media (min-width: 768px) and (max-width: 991px) {
    .logo_img img {
        max-width: 150px !important;
    }
    
    .header__right .theme-btn,
    .header__right .theme_btn {
        padding: 10px 18px !important;
        font-size: 13px !important;
    }
    
    .header__right.login_user .profile_img span {
        display: inline-block !important;
        max-width: 120px !important;
    }
}

/* ========================================
   CORREÇÕES ADICIONAIS
   ======================================== */

/* Garante que sticky header funcione no mobile */
@media (max-width: 991px) {
    #sticky-header {
        position: sticky !important;
        top: 0 !important;
        background: #fff !important;
        z-index: 999 !important;
        box-shadow: 0 2px 8px rgba(0,0,0,0.1) !important;
    }
}

/* Animações suaves */
@media (max-width: 991px) {
    .header__right .profile_info_iner,
    .mobile-search-popup,
    .heading-search-box {
        animation: fadeInDown 0.3s ease !important;
    }
    
    @keyframes fadeInDown {
        from {
            opacity: 0;
            transform: translateY(-10px);
        }
        to {
            opacity: 1;
            transform: translateY(0);
        }
    }
}


/* ========================================
   ESPAÇAMENTO DO HERO NO MOBILE
   ======================================== */

@media (max-width: 991px) {
    /* Adiciona espaço entre header e conteúdo */
    .breadcrumb_area,
    .banner-area,
    section:first-of-type,
    .hero-section,
    .banner_part,
    .slider_area {
        margin-top: 25px !important;
        padding-top: 30px !important;
    }
    
    /* Espaçamento específico para o hero da home */
    body .breadcrumb_area:first-of-type,
    body > section:first-of-type,
    .main-wrapper > section:first-of-type {
        margin-top: 25px !important;
    }
    
    /* Ajusta texto do hero para não ficar colado */
    .breadcrumb_area h1,
    .breadcrumb_area h2,
    .breadcrumb_area h3,
    .banner-area h1,
    .banner-area h2 {
        margin-top: 20px !important;
    }
}