/* ==================== HEADER MODERN 2025 (FORCE MODE) ==================== */

/* 1. Header Glassmorphism */
/* Usando body #site-header para aumentar especificidade */
body #site-header {
    background-color: rgba(255, 255, 255, 0.85) !important;
    /* Mais transparente para ver o efeito */
    backdrop-filter: blur(16px) !important;
    -webkit-backdrop-filter: blur(16px) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.3) !important;
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.05) !important;
}

/* CORREÇÃO: Espaçamento para a barra decorativa do topo */
body #site-header>.container {
    padding-top: 12px !important;
}

/* 2. Barra de Busca (Estilo Pílula Flutuante) */
body #desktop-search-input,
body #mobile-search-input {
    background-color: #f3f5f6 !important;
    /* Cinza muito suave */
    border: 2px solid #e5e7eb !important;
    border-radius: 100px !important;
    /* Forçar pílula */
    padding-left: 1.5rem !important;
    /* Mais espaço interno */
    padding-right: 1.5rem !important;
    height: 44px !important;
    /* Altura fixa confortável */
    font-size: 0.95rem !important;
    color: #1f2937 !important;
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.01) !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

/* Foco na busca */
body #desktop-search-input:focus,
body #mobile-search-input:focus {
    background-color: #ffffff !important;
    border-color: #3b82f6 !important;
    box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.15) !important;
    outline: none !important;
}

/* Esconder borda original do container se houver */
body .search-container {
    border: none !important;
    background: transparent !important;
}

/* 3. Ícones do Header PREMIUM (Sobre, Instagram, Carrinho) */
/* Selecionando os links dentro das divs específicas */
#site-header .flex-shrink-0.space-x-2 a,
#site-header .flex.items-center.justify-end a {
    width: 42px !important;
    height: 42px !important;
    border-radius: 12px !important;
    /* Quadrado arredondado moderno (squircle) */
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    background: transparent !important;
    color: #4b5563 !important;
    position: relative !important;
    margin: 0 2px !important;
}

/* Ícones SVG base */
#site-header svg {
    stroke-width: 1.8 !important;
    width: 22px !important;
    height: 22px !important;
    transition: all 0.3s ease !important;
}

/* --- EFEITOS ESPECÍFICOS POR ÍCONE --- */

/* ℹ️ SOBRE: Estilo Clean Corporativo */
#site-header a[title*="Sobre"]:hover,
#site-header a[href*="sobre"]:hover {
    background-color: #eff6ff !important;
    /* Azul bem clarinho */
    color: #2563eb !important;
    /* Azul marca */
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 12px rgba(37, 99, 235, 0.15) !important;
}

/* 📸 INSTAGRAM: Gradiente Oficial */
#site-header a[href*="instagram"]:hover {
    background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285AEB 90%) !important;
    color: white !important;
    transform: translateY(-2px) rotate(5deg) !important;
    /* Leve rotação divertida */
    box-shadow: 0 4px 15px rgba(214, 36, 159, 0.3) !important;
    border: none !important;
}

/* No hover do Instagram, o ícone fica branco */
#site-header a[href*="instagram"]:hover svg {
    stroke: white !important;
    fill: white !important;
    /* Preenchimento para dar destaque */
    fill-opacity: 0.2 !important;
}

/* 🛒 CARRINHO: Animado e Vibrante */
#site-header a[href*="carrinho"]:hover {
    background-color: #f0fdf4 !important;
    /* Verde clarinho */
    color: #16a34a !important;
    /* Verde sucesso */
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 12px rgba(22, 163, 74, 0.15) !important;
}

#site-header a[href*="carrinho"]:hover svg {
    animation: cart-bounce 0.8s ease infinite !important;
}

@keyframes cart-bounce {

    0%,
    100% {
        transform: rotate(0deg);
    }

    25% {
        transform: rotate(-10deg);
    }

    50% {
        transform: rotate(5deg);
    }

    75% {
        transform: rotate(-5deg);
    }
}

/* Badge do Carrinho (Bolinha vermelha) */
#site-header span.absolute.top-0.right-0 {
    background: #ef4444 !important;
    color: white !important;
    border: 2px solid white !important;
    font-size: 10px !important;
    font-weight: 800 !important;
    width: 18px !important;
    height: 18px !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    top: -2px !important;
    right: -2px !important;
    animation: badge-pulse 2s infinite !important;
    box-shadow: 0 2px 5px rgba(239, 68, 68, 0.4) !important;
}

@keyframes badge-pulse {
    0% {
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.7);
    }

    70% {
        transform: scale(1.1);
        box-shadow: 0 0 0 6px rgba(239, 68, 68, 0);
    }

    100% {
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(239, 68, 68, 0);
    }
}

/* 4. Menu de Categorias (Desktop) */
body nav.category-nav {
    background: transparent !important;
    margin-top: 5px !important;
    border-top: 1px solid rgba(0, 0, 0, 0.03) !important;
    padding-top: 5px !important;
}

/* Links do menu */
body .category-item-desktop {
    color: #4b5563 !important;
    font-weight: 600 !important;
    font-size: 0.9rem !important;
    letter-spacing: 0.01em !important;
    text-transform: uppercase !important;
    padding: 8px 16px !important;
    border-radius: 8px !important;
    background: transparent !important;
}

/* Hover nos links */
body .category-item-desktop:hover {
    color: #2563eb !important;
    background-color: rgba(37, 99, 235, 0.04) !important;
}

/* Remover a linha branca antiga que ficava embaixo */
body .category-item-desktop div.absolute {
    display: none !important;
}

/* Badge do carrinho */
#site-header span.absolute.top-0.right-0 {
    background: linear-gradient(135deg, #ef4444, #dc2626) !important;
    border: 2px solid white !important;
    font-size: 10px !important;
    width: 18px !important;
    height: 18px !important;
    top: 0 !important;
    right: 0 !important;
}

/* Logo */
#site-header img {
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.05)) !important;
    max-height: 45px !important;
    /* Um pouco maior */
}

/* Correção para Mobile */
@media (max-width: 768px) {
    body #mobile-search {
        padding-bottom: 15px !important;
    }
}

/* ==================== CORREÇÃO DA LUPA (BUSCA) ==================== */

/* 1. Remover ícones nativos do input search (X e Lupa do navegador) */
input[type="search"]::-webkit-search-decoration,
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-results-button,
input[type="search"]::-webkit-search-results-decoration {
    -webkit-appearance: none;
    appearance: none;
    display: none !important;
}

/* 2. Forçar posicionamento da Lupa (Mobile e Desktop) */
/* Botão Mobile */
body #mobile-search form {
    position: relative !important;
    display: flex !important;
    align-items: center !important;
}

body #mobile-search form button[type="submit"] {
    position: absolute !important;
    right: 4px !important;
    /* Encostado na direita */
    top: 0 !important;
    bottom: 0 !important;
    margin: auto !important;
    height: 36px !important;
    /* Altura do touch target */
    width: 36px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: transparent !important;
    border: none !important;
    z-index: 10 !important;
    /* Garantir que fique acima do input */
    color: #6b7280 !important;
    /* Cinza médio */
    transform: none !important;
    /* Remove transforms antigos que possam atrapalhar */
}

/* Ajuste fino para o ícone SVG dentro do botão */
body #mobile-search form button[type="submit"] svg {
    width: 20px !important;
    height: 20px !important;
}

/* Botão Desktop (Garantia) */
body .search-container button[type="submit"] {
    position: absolute !important;
    right: 12px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    z-index: 10 !important;
}

/* NOTA: Estilos do Menu Mobile foram movidos para mobile-menu-modern.css */