/**
 * PALETA DE CORES MÁXIMO GÁS
 * Aplicada em todo o site
 * 
 * Desenvolvido por: Roka Digital
 * https://rokadigital.com.br/contato/
 */

/* =====================================================
   VARIÁVEIS CSS - PALETA MÁXIMO GÁS
   ===================================================== */
:root {
    /* Cores Principais - Nova Identidade Visual */
    --laranja-principal: #EF7D13;
    --laranja-secundaria: #FF920D;
    --preto: #121110;
    --fundo-claro: #F3F4F6;
    --branco: #FFFFFF;
    --cinza-texto: #6B7280;
    --cinza-borda: #E5E7EB;
    
    /* Degradês */
    --degrade-laranja: linear-gradient(135deg, #EF7D13, #FF920D);
    --degrade-laranja-hover: linear-gradient(135deg, #FF920D, #EF7D13);
    
    /* Sombras */
    --sombra-suave: 0 2px 8px rgba(18, 17, 16, 0.08);
    --sombra-media: 0 4px 12px rgba(18, 17, 16, 0.12);
    --sombra-forte: 0 8px 24px rgba(18, 17, 16, 0.16);
}

/* =====================================================
   HEADER - Fundo Branco Limpo
   ===================================================== */
.header {
    background: var(--branco) !important;
    border-bottom: 1px solid var(--cinza-borda) !important;
    box-shadow: var(--sombra-suave) !important;
}

.header .logo h1,
.header .logo span {
    color: var(--preto) !important;
}

.header .nav-link {
    color: var(--preto) !important;
    font-weight: 500 !important;
}

.header .nav-link:hover {
    color: var(--laranja-principal) !important;
    background: var(--fundo-claro) !important;
    border-radius: 8px;
}

.mobile-menu-btn {
    color: var(--preto) !important;
    background: transparent !important;
    border: 2px solid var(--laranja-principal) !important;
}

.mobile-menu-btn:hover {
    background: var(--laranja-principal) !important;
    color: var(--branco) !important;
}

/* =====================================================
   HERO / BANNER - Fundo Claro com Destaques Laranja
   ===================================================== */
.hero,
.hero-section {
    background: var(--fundo-claro) !important;
}

.hero h1,
.hero h2,
.hero-section h1,
.hero-section h2 {
    color: #FFFFFF !important;
    font-weight: 700 !important;
    text-shadow: 2px 2px 12px rgba(0, 0, 0, 0.9), 0 0 20px rgba(0, 0, 0, 0.7) !important;
}

.hero p,
.hero-section p {
    color: #FFFFFF !important;
    text-shadow: 1px 1px 8px rgba(0, 0, 0, 0.9), 0 0 15px rgba(0, 0, 0, 0.7) !important;
}

.hero .btn-primary,
.hero-section .btn-primary {
    background: var(--degrade-laranja) !important;
    color: var(--branco) !important;
    border: none !important;
    font-weight: 600 !important;
    transition: all 0.3s ease !important;
    box-shadow: var(--sombra-media) !important;
}

.hero .btn-primary:hover,
.hero-section .btn-primary:hover {
    background: var(--degrade-laranja-hover) !important;
    transform: translateY(-2px);
    box-shadow: var(--sombra-forte) !important;
}

/* =====================================================
   BOTÕES GERAIS - Laranja com Hover Escuro
   ===================================================== */
.btn-primary,
button.btn-primary,
a.btn-primary {
    background: var(--laranja-principal) !important;
    color: var(--branco) !important;
    border: none !important;
    font-weight: 600 !important;
    padding: 12px 30px !important;
    border-radius: 8px !important;
    transition: all 0.3s ease !important;
    box-shadow: var(--sombra-suave) !important;
}

.btn-primary:hover,
button.btn-primary:hover,
a.btn-primary:hover {
    background: var(--laranja-secundaria) !important;
    transform: translateY(-2px);
    box-shadow: var(--sombra-media) !important;
}

.btn-success {
    background: var(--laranja-principal) !important;
    color: var(--branco) !important;
    border: none !important;
}

.btn-success:hover {
    background: var(--laranja-secundaria) !important;
    transform: translateY(-2px);
}

/* =====================================================
   SEÇÃO DE PRODUTOS
   ===================================================== */
.produtos-section {
    background: var(--branco) !important;
}

.produtos-section h2 {
    color: var(--preto) !important;
    font-weight: 700 !important;
}

.produto-card {
    background: var(--branco) !important;
    border: 1px solid var(--cinza-borda) !important;
    border-radius: 12px !important;
    transition: all 0.3s ease !important;
    box-shadow: var(--sombra-suave) !important;
}

.produto-card:hover {
    border-color: var(--laranja-principal) !important;
    box-shadow: var(--sombra-media) !important;
    transform: translateY(-5px);
}

.produto-card h3 {
    color: var(--preto) !important;
    font-weight: 700 !important;
}

.produto-card .preco {
    color: var(--laranja-principal) !important;
    font-weight: 700 !important;
    font-size: 1.5rem !important;
}

/* Texto "Consulte o preço" em PRETO */
.preco-consulte,
.produto-preco .preco-consulte,
.produto-card-price .preco-consulte,
span.preco-consulte,
.produto-preco span.preco-consulte,
.produto-card-price span.preco-consulte,
div.produto-preco .preco-consulte,
div.produto-card-price .preco-consulte,
p.preco-consulte,
.preco-consulte * {
    color: var(--preto) !important;
    color: #000000 !important;
    background: none !important;
    -webkit-background-clip: initial !important;
    -webkit-text-fill-color: #000000 !important;
    background-clip: initial !important;
    font-weight: 600 !important;
}

/* Botão Pedido Rápido - Laranja */
.produto-card .btn-pedido-rapido,
.btn-pedido-rapido {
    background: var(--laranja-principal) !important;
    color: var(--branco) !important;
    border: none !important;
    font-weight: 600 !important;
}

.produto-card .btn-pedido-rapido:hover,
.btn-pedido-rapido:hover {
    background: var(--laranja-secundaria) !important;
    transform: translateY(-2px);
    box-shadow: var(--sombra-media) !important;
}

/* Botão Pedido Detalhado - Preto */
.btn-pedido-detalhado,
.produto-card .btn-pedido-detalhado,
button.btn-pedido-detalhado {
    background: var(--preto) !important;
    color: var(--branco) !important;
    border: none !important;
    font-weight: 600 !important;
}

.btn-pedido-detalhado:hover,
.produto-card .btn-pedido-detalhado:hover,
button.btn-pedido-detalhado:hover {
    background: #2A2826 !important;
    transform: scale(1.05);
    box-shadow: var(--sombra-media) !important;
}

/* Botão "+" Adicionar Produto no Modal Pedido Detalhado */
#modal-pedido-detalhado .btn-add-simple,
.btn-add-simple {
    background: var(--laranja-principal) !important;
    color: var(--branco) !important;
}

#modal-pedido-detalhado .btn-add-simple:hover,
.btn-add-simple:hover {
    background: var(--laranja-secundaria) !important;
    transform: scale(1.05);
}

/* =====================================================
   FILTROS DE CATEGORIA
   ===================================================== */
.filtro-categorias {
    background: var(--fundo-claro) !important;
    padding: 20px !important;
    border-radius: 10px !important;
}

.filtro-btn {
    background: var(--branco) !important;
    color: var(--preto) !important;
    border: 2px solid var(--cinza-borda) !important;
    padding: 10px 20px !important;
    border-radius: 25px !important;
    font-weight: 600 !important;
    transition: all 0.3s ease !important;
}

.filtro-btn:hover,
.filtro-btn.ativo {
    background: var(--laranja-principal) !important;
    color: var(--branco) !important;
    border-color: var(--laranja-principal) !important;
}

/* =====================================================
   SEÇÃO DE CONTATO - Fundo Cinza Claro
   ===================================================== */
.contato-section,
.contato,
section.contato {
    background: #F3F4F6 !important;
    background-image: none !important;
}

.contato-section h2,
.contato h2,
section.contato h2,
.contato .section-title,
section.contato .section-title {
    color: var(--preto) !important;
    font-weight: 700 !important;
}

.contato .section-subtitle,
section.contato .section-subtitle,
.contato p,
section.contato p {
    color: var(--cinza-texto) !important;
}

.form-control,
.form-select,
textarea.form-control {
    border: 1px solid var(--cinza-borda) !important;
    border-radius: 8px !important;
    padding: 12px !important;
    transition: all 0.3s ease !important;
    background: var(--branco) !important;
}

.form-control:focus,
.form-select:focus,
textarea.form-control:focus {
    border-color: var(--laranja-principal) !important;
    box-shadow: 0 0 0 0.2rem rgba(239, 125, 19, 0.15) !important;
    outline: none !important;
}

.form-label {
    color: var(--preto) !important;
    font-weight: 600 !important;
}

/* Botão Abrir no GPS */
.btn-gps,
.contato-section .btn-gps,
a.btn-gps,
button.btn-gps {
    background: var(--laranja-principal) !important;
    color: var(--branco) !important;
    border: none !important;
    padding: 12px 30px !important;
    border-radius: 8px !important;
    font-weight: 600 !important;
    transition: all 0.3s ease !important;
    text-decoration: none !important;
    display: inline-block !important;
}

.btn-gps:hover,
.contato-section .btn-gps:hover,
a.btn-gps:hover,
button.btn-gps:hover {
    background: var(--laranja-secundaria) !important;
    transform: translateY(-2px);
    box-shadow: var(--sombra-media) !important;
}

/* =====================================================
   FOOTER - Preto com Destaques Laranja
   ===================================================== */
.footer {
    background: var(--preto) !important;
    color: var(--branco) !important;
    border-top: 3px solid var(--laranja-principal) !important;
}

/* Títulos das seções do footer em LARANJA */
.footer h3,
.footer h4,
.footer-title,
.footer .footer-title {
    color: var(--laranja-principal) !important;
}

/* Textos, parágrafos e descrição em BRANCO */
.footer p,
.footer li,
.footer-desc,
.footer .footer-desc,
.footer span,
.footer .contact-type,
.footer .contact-details span,
.contact-type {
    color: var(--branco) !important;
}

/* Links e telefones em BRANCO com hover LARANJA */
.footer a,
.footer a[href^="tel:"],
.footer a[href^="https://wa.me"],
.footer .contact-item a,
.footer .contact-info a,
.footer-col a,
.footer-main a {
    color: var(--branco) !important;
    transition: all 0.3s ease !important;
    text-decoration: none !important;
}

.footer a:hover,
.footer a[href^="tel:"]:hover,
.footer a[href^="https://wa.me"]:hover,
.footer .contact-item a:hover,
.footer .contact-info a:hover,
.footer-col a:hover,
.footer-main a:hover {
    color: var(--laranja-principal) !important;
    text-decoration: underline !important;
}

/* Ícones sociais */
.footer .social-icon {
    background: transparent !important;
    color: var(--branco) !important;
    border: 2px solid var(--branco) !important;
    transition: all 0.3s ease !important;
}

.footer .social-icon:hover {
    background: var(--laranja-principal) !important;
    color: var(--branco) !important;
    border-color: var(--laranja-principal) !important;
    transform: scale(1.1);
}

/* Ícones (FontAwesome) em LARANJA */
.footer i,
.footer .fas,
.footer .fab {
    color: var(--laranja-principal) !important;
}

/* Copyright e Footer Bottom em BRANCO */
.footer-bottom,
.footer-copyright,
.footer-copyright p,
.footer-privacy,
.footer-privacy p,
.footer-privacy a,
.footer-credits,
.footer-credits p,
.footer-credits a,
.footer-bottom * {
    color: var(--branco) !important;
}

/* Links do footer bottom com hover LARANJA */
.footer-bottom a,
.footer-copyright a,
.footer-privacy a,
.footer-credits a,
.privacy-link,
.dev-link {
    color: var(--branco) !important;
    transition: all 0.3s ease !important;
    text-decoration: none !important;
}

.footer-bottom a:hover,
.footer-copyright a:hover,
.footer-privacy a:hover,
.footer-credits a:hover,
.privacy-link:hover,
.dev-link:hover {
    color: var(--laranja-principal) !important;
    text-decoration: underline !important;
}

/* =====================================================
   BADGES / ETIQUETAS
   ===================================================== */
.badge-disponivel {
    background: var(--laranja-principal) !important;
    color: var(--branco) !important;
    padding: 5px 15px !important;
    border-radius: 20px !important;
    font-weight: 600 !important;
}

.badge-indisponivel {
    background: var(--cinza-texto) !important;
    color: var(--branco) !important;
}

/* =====================================================
   MODAL / CHAT
   ===================================================== */
.modal-header {
    background: var(--preto) !important;
    color: var(--branco) !important;
}

.modal-footer .btn-primary {
    background: var(--laranja-principal) !important;
}

.chat-bubble {
    background: var(--laranja-principal) !important;
    color: var(--branco) !important;
    border-radius: 20px !important;
    padding: 15px 20px !important;
}

.chat-input {
    border: 1px solid var(--cinza-borda) !important;
    border-radius: 25px !important;
}

.chat-input:focus {
    border-color: var(--laranja-principal) !important;
    box-shadow: 0 0 0 0.2rem rgba(239, 125, 19, 0.15) !important;
}

/* =====================================================
   MODAL PEDIDO POR VOZ - PALETA MÁXIMO GÁS
   ===================================================== */
/* Ícone do microfone */
#modal-icone,
.modal-pedido-voz #modal-icone {
    color: var(--laranja-principal) !important;
}

/* Botão Iniciar Gravação */
.btn-gravar,
.modal-pedido-voz .btn-gravar {
    background: var(--laranja-principal) !important;
    color: var(--branco) !important;
}

.btn-gravar:hover,
.modal-pedido-voz .btn-gravar:hover {
    background: var(--laranja-secundaria) !important;
    transform: translateY(-3px);
    box-shadow: var(--sombra-media) !important;
}

/* Botão Parar Gravação */
.btn-parar,
.modal-pedido-voz .btn-parar {
    background: var(--preto) !important;
    color: var(--branco) !important;
}

.btn-parar:hover,
.modal-pedido-voz .btn-parar:hover {
    background: #2A2826 !important;
    transform: translateY(-3px);
    box-shadow: var(--sombra-media) !important;
}

/* =====================================================
   LINKS E TEXTOS
   ===================================================== */
a {
    color: var(--laranja-principal) !important;
    transition: color 0.3s ease !important;
}

a:hover {
    color: var(--laranja-secundaria) !important;
}

h1, h2, h3, h4, h5, h6 {
    color: var(--preto) !important;
}

p, span, li {
    color: var(--preto) !important;
}

.text-muted,
.text-secondary {
    color: var(--cinza-texto) !important;
}

/* =====================================================
   CARDS
   ===================================================== */
.card {
    border: 1px solid var(--cinza-borda) !important;
    border-radius: 12px !important;
    transition: all 0.3s ease !important;
    background: var(--branco) !important;
    box-shadow: var(--sombra-suave) !important;
}

.card:hover {
    border-color: var(--laranja-principal) !important;
    box-shadow: var(--sombra-media) !important;
}

.card-header {
    background: var(--fundo-claro) !important;
    color: var(--preto) !important;
    font-weight: 600 !important;
    border-bottom: 2px solid var(--laranja-principal) !important;
}

/* =====================================================
   ÍCONES
   ===================================================== */
.icon-primary {
    color: var(--laranja-principal) !important;
}

.icon-success {
    color: var(--laranja-principal) !important;
}

.icon-info {
    color: var(--preto) !important;
}

/* =====================================================
   ANIMAÇÕES
   ===================================================== */
@keyframes pulse-laranja {
    0%, 100% {
        box-shadow: 0 0 0 0 rgba(239, 125, 19, 0.7);
    }
    50% {
        box-shadow: 0 0 0 10px rgba(239, 125, 19, 0);
    }
}

@keyframes pulse-preto {
    0%, 100% {
        box-shadow: 0 0 0 0 rgba(18, 17, 16, 0.7);
    }
    50% {
        box-shadow: 0 0 0 10px rgba(18, 17, 16, 0);
    }
}

.pulse-laranja {
    animation: pulse-laranja 2s infinite;
}

.pulse-preto {
    animation: pulse-preto 2s infinite;
}

/* =====================================================
   RESPONSIVO
   ===================================================== */
@media (max-width: 768px) {
    .header {
        padding: 10px 0 !important;
    }
    
    .hero h1 {
        font-size: 1.8rem !important;
    }
    
    .btn-primary {
        padding: 10px 20px !important;
        font-size: 0.9rem !important;
    }
}

/* =====================================================
   FIM DA PALETA MÁXIMO GÁS
   ===================================================== */