@media only screen and (max-width: 1024px) {
    /* Adjustments for tablets */
    nav.barra_horizontal {
        padding: 0 30px;
    }

    #cadastro {
        margin-right: 1px;
        gap: 10px;
    }
    
    #cadastro a {
        font-size: 0.9em;
    }
    
    #cadastro .nome-usuario {
        display: none; /* Oculta o nome em telas médias */
    }

    
    .form-busca-header {
        max-width: 35%;
        margin-left: 60px;
    }
    
    .form-busca-header input[type="text"] {
        width: 250px;
    }
}

@media only screen and (max-width: 768px) {
    /* General mobile adjustments */
    nav.barra_horizontal {
        height: 75px;
        padding: 0 8px;
    }

    
    /* Show mobile toggle button */
    .menu_toggle {
        display: block !important; /* Força a exibição */
        position: relative;
        z-index: 1001;
        background: transparent;
        border: none;
        color: white;
        font-size: 28px;
        padding: 10px 15px;
        margin-left: -15px;
        margin-right: 7px;
        top: -25%;
        cursor: pointer;
        -webkit-tap-highlight-color: transparent;
    }
    
    .menu_toggle:focus {
        outline: none;
    }

    /*Menu*/
    #menu {
        display: none;
    }
    
    /* Mobile menu styles */
    .menu-mobile {
        margin-top: 70px;
        display: flex;
        width: 130px;
        height: auto;
        background: rgba(248, 141, 59, 0.98);
        backdrop-filter: blur(5px);
        z-index: 100;
        border-radius: 10px;
    }
    
    .menu-mobile li {
        padding: 12px;
        border-bottom: 1px solid rgba(255,255,255,0.1);
    }
    .menu-mobile li:hover {
        color: white;
        text-decoration: none;
    }
    
    .menu-mobile a {
        color: white !important;
        font-size: 16px !important;
    }

    .dropdown-Mobile:hover .drop-Mobile {
        display: block;
    }
    /* Logo adjustments */
    #logo img {
        width: 110px;
        height: 40px;
        margin-left: -55px;
        margin-right: 0;
    }
    
    #logoLx img {
        margin-left: -30px;
        width: 40px;
        height: 40px;
    }
    
    /* Search bar adjustments */
    .form-busca-header {
        position: absolute;
        top: 58px;
        left: 10px;
        right: 0;
        max-width: 70%;
        margin: 0 15px;
        border-radius: 20px;
        box-sizing: border-box;
    }
    
    .form-busca-header input[type="text"] {
        width: 100%;
        padding: 10px 15px;
    }
    
    /* Cart icon adjustments */
    #carrinho {
        position: fixed;
        right: 10px;
        top: 55px;
    }
    
    /* Dropdown adjustments */
    .dropdown-ola ul.submenu {
        right: -20px;
    }
    
}

@media only screen and (max-width: 480px) {
    /* Adjustments for very small screens */
    body, html {
        width: 100% !important;
        overflow-x: hidden !important;
    }
    
    nav.barra_horizontal {
        height: 65px;
        width: 100vw; /* Usa viewport width */
    }
 
    /* Logo adjustments */
    #logo img {
        width: 100px;
        height: 40px;
    }
    
    #logoLx img {
        width: 40px;
        height: 40px;
    }
    
    /* Menu toggle adjustments */
    .menu_toggle {
        font-size: 24px;
        padding: 10px;
    }
    
    /* Mobile menu adjustments */
    .menu-mobile {
        width: 220px;
    }
    
    .menu-mobile li {
        padding: 10px 15px;
    }
    
    /* Cart icon adjustments */
    .carrinho-icon {
        right: 5px;
        top: 15px;
    }
    
    .carrinho-icon i {
        font-size: 20px;
    }
    
    /* Badge adjustments */
    #badge-mensagens {
        font-size: 10px;
        padding: 2px 5px;
        min-width: 16px;
    }
}

/* Animation for menu toggle */
@keyframes fadeIn {
    from { opacity: 0; transform: translateX(-20px); }
    to { opacity: 1; transform: translateX(0); }
}

.menu-mobile li {
    animation: fadeIn 0.3s ease forwards;
}

.menu-mobile li:nth-child(1) { animation-delay: 0.1s; }
.menu-mobile li:nth-child(2) { animation-delay: 0.2s; }
.menu-mobile li:nth-child(3) { animation-delay: 0.3s; }
.menu-mobile li:nth-child(4) { animation-delay: 0.4s; }
.menu-mobile li:nth-child(5) { animation-delay: 0.5s; }