/* ==========================================
   1. FUNDAÇÃO (CORES, FONTES E BACKGROUND)
========================================== */

/* Variáveis de Cores (Agora o Escuro é o Padrão Nativo!) */
:root {
    /* O !important bloqueia o Javascript de tentar colocar o tema branco antigo */
    --bg-color: rgba(15, 23, 42, 0) !important; 
    --card-bg: rgba(30, 41, 59, 0.6) !important;
    
    --text-main: #f8fafc !important;
    --text-muted: #94a3b8 !important;
    
    --border-color: rgba(255, 255, 255, 0.5) !important;
    
    /* A sua cor principal NÃO tem !important, assim você ainda pode 
       mudar a cor dos botões (o verde) lá no seu painel Admin! */
    --primary-green: #10b981;
    --primary-green-hover: #10b981; 
}

/* Reset Padrão */
* { 
    margin: 0; 
    padding: 0; 
    box-sizing: border-box; 
    font-family: 'Inter', sans-serif; 
}

html { 
    scroll-behavior: smooth; 
}

/* Fundo da Página (O seu papel de parede espacial) */
body { 
    background-image: url('img/backgrounds/fundopaginainicial.webp');
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    color: var(--text-main); 
}

/* Película de desfoque sobre o fundo */
body::before {
    content: ""; 
    position: fixed; 
    top: 0; left: 0; right: 0; bottom: 0;
    background-color: var(--bg-color); 
    z-index: -1; 
    backdrop-filter: blur(3px); 
    -webkit-backdrop-filter: blur(3px);
}

/* Classes Globais Úteis */
.hidden { 
    display: none !important; 
}

/* ==========================================
   ANIMAÇÕES GLOBAIS DE ERRO
========================================== */
@keyframes tremerEPulsar {
    0%   { transform: translateX(0); box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.7); }
    20%  { transform: translateX(-5px); box-shadow: 0 0 0 4px rgba(239, 68, 68, 0.5); }
    40%  { transform: translateX(5px); box-shadow: 0 0 0 8px rgba(239, 68, 68, 0.3); }
    60%  { transform: translateX(-5px); box-shadow: 0 0 0 12px rgba(239, 68, 68, 0.1); }
    80%  { transform: translateX(5px); box-shadow: 0 0 0 16px rgba(239, 68, 68, 0); }
    100% { transform: translateX(0); box-shadow: 0 0 0 0 rgba(239, 68, 68, 0); }
}

.input-error {
    animation: tremerEPulsar 0.6s ease-out;
    border-color: #ef4444 !important; 
    background-color: rgba(239, 68, 68, 0.05) !important; 
}
body.dark-mode .input-error { 
    background-color: rgba(239, 68, 68, 0.1) !important; 
}

.group-error {
    animation: tremerEPulsar 0.6s ease-out;
    background-color: rgba(239, 68, 68, 0.05);
    border: 1px solid #ef4444 !important;
    border-radius: 8px;
    padding: 15px; 
}
body.dark-mode .group-error { 
    background-color: rgba(239, 68, 68, 0.1); 
}

/* ==========================================
   BARRA DE ROLAGEM GLOBAL (TODO O SITE DO CLIENTE)
========================================== */

/* 1. Chrome, Edge e Safari (Aplica em todo o site) */
::-webkit-scrollbar {
    width: 6px;
}

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background-color: rgba(16, 185, 129, 0.4); /* Verde ET Pizzaria */
    border-radius: 10px;
}

::-webkit-scrollbar-thumb:hover {
    background-color: rgba(16, 185, 129, 0.8);
}

/* 2. Firefox (Aplica a todos os elementos) */
* {
    scrollbar-width: thin;
    scrollbar-color: rgba(16, 185, 129, 0.5) transparent;
}

/* ==========================================
   CORREÇÃO: HOVER VERDE NOS ENDEREÇOS E MENU DAS CATEGORIAS
========================================== */
.hero-address:hover,
.hero-address:hover span,
.hero-address:hover p,
#modal-endereco-link:hover,
#modal-endereco-link:hover .address-text,
#modal-endereco-link:hover p,
#modal-endereco-link:hover span,
.address-link:hover,
.address-link:hover p,
.address-link:hover span,
/* 🔥 A MÁGICA PARA O MENU DAS CATEGORIAS: */
.nav-tabs a:hover {
    color: var(--primary-green) !important;
    transition: color 0.2s ease-in-out;
}