/* Estilos personalizados para o site AutoParts */

/* === Estilos Gerais === */
body {
    scroll-behavior: smooth;
}

/* === Menu Lateral === */
#sidebar {
    background: linear-gradient(180deg, #1f2937 0%, #111827 100%);
    transition: transform 0.3s ease-in-out;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

#sidebar a {
    transition: all 0.3s ease-in-out;
}

#sidebar a:hover {
    transform: translateX(5px);
    background-color: #374151;
}

#sidebar i {
    transition: transform 0.3s ease-in-out;
}

#sidebar a:hover i {
    transform: scale(1.2);
}

/* Menu Hamburger */
#menu-toggle {
    transition: background-color 0.3s ease-in-out;
}

#menu-toggle:hover {
    background-color: #2563eb;
}

/* === Cabeçalho === */
header {
    transition: transform 0.3s ease-in-out; /* Adiciona transição suave para o desaparecimento */
}

header nav ul.nav-menu {
    display: flex;
    gap: 1rem;
}

header nav ul.nav-menu li a {
    transition: all 0.3s ease-in-out;
    font-weight: 500;
}

header nav ul.nav-menu li a:hover {
    background-color: #2563eb;
    transform: scale(1.05);
}

header nav ul.nav-menu li a i {
    transition: transform 0.3s ease-in-out;
}

header nav ul.nav-menu li a:hover i {
    transform: scale(1.1);
}

/* Estilo para "Compra 100% Segura" no Cabeçalho */
.secure-badge {
    transition: all 0.3s ease-in-out;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.secure-badge:hover {
    background-color: #d1fae5;
    transform: scale(1.05);
}

/* === Banner === */
#home {
    background-image: url('https://cdn.guiase.net/wp-content/uploads/sites/645/2024/09/Frente-01-scaled.jpg');
    background-position: center -50px;
}

.guarantees div {
    transition: transform 0.3s ease-in-out;
}

.guarantees div:hover {
    transform: scale(1.05);
}

/* === Produtos === */
.product-card:hover {
    transform: translateY(-5px);
    transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
}

.product-card img {
    transition: transform 0.3s ease-in-out;
}

.product-card:hover img {
    transform: scale(1.05);
}

/* === Carrinho === */
#cart-items table {
    width: 100%;
    border-collapse: collapse;
}

#cart-items th, #cart-items td {
    padding: 10px;
    text-align: left;
    border-bottom: 1px solid #ddd;
}

/* === Contato === */
#contato a {
    transition: background-color 0.3s ease-in-out;
}

/* === Rodapé === */
footer .grid div {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

footer .grid .secure-footer {
    background-color: #1e40af;
    padding: 1rem;
    border-radius: 0.5rem;
}

footer .grid i {
    transition: transform 0.3s ease-in-out;
}

footer .grid div:hover i {
    transform: scale(1.2);
}

/* === Botões com Ícones === */
button i, a i {
    transition: transform 0.3s ease-in-out;
}

button:hover i, a:hover i {
    transform: translateX(5px);
}

/* === Responsividade === */
@media (max-width: 768px) {
    /* Cabeçalho */
    header {
        padding: 0.5rem; /* Reduzindo o padding geral do cabeçalho */
    }

    header.header-hidden {
        transform: translateY(-100%); /* Esconde o cabeçalho movendo-o para cima */
    }

    header .container > div:first-child {
        gap: 0.5rem; /* Reduzindo o espaço entre o ícone e o texto do logo */
    }

    header .container > div:first-child i {
        font-size: 1.25rem; /* Reduzindo o tamanho do ícone do logo */
    }

    header .container > div:first-child h1 {
        font-size: 1.25rem; /* Reduzindo o tamanho do texto do logo */
    }

    #user-area {
        flex-direction: column;
        gap: 0.5rem; /* Reduzindo o espaço entre os elementos */
    }

    #user-area .flex {
        flex-direction: row; /* Alinhando "Entrar" e "Cadastrar" na mesma linha */
        gap: 0.5rem;
    }

    #user-area button, #user-area a {
        width: auto; /* Ajustando para não ocupar toda a largura */
        max-width: 120px; /* Reduzindo a largura máxima dos botões */
        padding: 0.5rem 1rem; /* Reduzindo o padding dos botões */
        font-size: 0.875rem; /* Reduzindo o tamanho da fonte dos botões */
    }

    header nav ul.nav-menu {
        flex-direction: row; /* Alinhando o menu na horizontal */
        gap: 0.5rem; /* Reduzindo o espaço entre os itens do menu */
        flex-wrap: wrap; /* Permitindo que os itens quebrem linha se necessário */
        justify-content: center;
    }

    header nav ul.nav-menu li a {
        padding: 0.25rem 0.75rem; /* Reduzindo o padding dos itens do menu */
        font-size: 0.875rem; /* Reduzindo o tamanho da fonte */
    }

    header nav ul.nav-menu li a i {
        font-size: 0.875rem; /* Reduzindo o tamanho do ícone */
    }

    .secure-badge {
        width: auto; /* Ajustando para não ocupar toda a largura */
        max-width: 160px; /* Reduzindo a largura máxima */
        padding: 0.5rem 1rem; /* Reduzindo o padding */
        font-size: 0.875rem; /* Reduzindo o tamanho da fonte */
    }

    .secure-badge i {
        font-size: 0.875rem; /* Reduzindo o tamanho do ícone */
    }

    .container {
        padding: 0 0.5rem; /* Reduzindo o padding do container */
    }

    /* Menu Lateral */
    #sidebar {
        transform: translateX(-100%);
    }

    #sidebar:not(.hidden) {
        transform: translateX(0);
    }

    /* Rodapé */
    footer .grid {
        grid-template-columns: 1fr;
        gap: 2rem;
    }

    /* Garantias no Banner */
    .guarantees {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 640px) {
    /* Banner */
    #home h2 {
        font-size: 2rem;
    }

    #home p {
        font-size: 1rem;
    }

    #home .guarantees div {
        font-size: 0.8rem;
        padding: 0.5rem 1rem;
    }

    /* Produtos */
    .product-card {
        padding: 1rem;
    }

    .product-card img {
        height: 150px;
    }
}

@media (max-width: 480px) {
    /* Cabeçalho */
    #user-area a {
        max-width: 100px; /* Reduzindo ainda mais a largura dos botões */
        padding: 0.5rem 0.75rem; /* Ajustando o padding */
    }

    .secure-badge {
        max-width: 140px; /* Reduzindo ainda mais a largura */
    }

    /* Rodapé */
    footer .grid p {
        font-size: 0.9rem;
    }
}