/**
 * PALETA DE CORES ULTRAGAS
 * Aplicada em todo o site
 * 
 * Desenvolvido por: Roka Digital
 * https://rokadigital.com.br/contato/
 */

/* =====================================================
   VARIÁVEIS CSS - PALETA ULTRAGAS
   ===================================================== */
:root {
    /* Cores Principais */
    --azul: #000FFF;
    --cian: #00FFFF;
    --verde: #00FF00;
    --branco: #FFFFFF;
    --preto: #000000;
    --cinza: #BBBCBC;
    
    /* Degradês */
    --degrade-azul-cian: linear-gradient(90deg, #000FFF, #00FFFF);
    --degrade-verde-cian: linear-gradient(90deg, #00FF00, #00FFFF);
    
    /* Degradês Invertidos (para hover) */
    --degrade-cian-azul: linear-gradient(90deg, #00FFFF, #000FFF);
    --degrade-cian-verde: linear-gradient(90deg, #00FFFF, #00FF00);
}

/* =====================================================
   HEADER
   ===================================================== */
.header {
    background: var(--degrade-verde-cian) !important;
    background: linear-gradient(90deg, #00FF00, #00FFFF) !important;
    border-bottom: 3px solid var(--cian) !important;
}

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

.header .nav-link:hover {
    color: var(--azul) !important;
    color: #000FFF !important;
    background: rgba(255, 255, 255, 0.2) !important;
    border-radius: 5px;
}

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

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

/* =====================================================
   HERO / BANNER
   ===================================================== */
.hero,
.hero-section {
    background: var(--degrade-azul-cian) !important;
}

.hero h1,
.hero h2,
.hero p,
.hero-section h1,
.hero-section h2,
.hero-section p {
    color: var(--branco) !important;
}

.hero .btn-primary,
.hero-section .btn-primary {
    background: var(--degrade-verde-cian) !important;
    color: var(--branco) !important;
    border: 2px solid var(--verde) !important;
    font-weight: 600 !important;
    transition: all 0.3s ease !important;
}

.hero .btn-primary:hover,
.hero-section .btn-primary:hover {
    background: var(--branco) !important;
    color: var(--verde) !important;
    border-color: var(--verde) !important;
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(0, 255, 0, 0.3);
}

/* =====================================================
   BOTÕES GERAIS
   ===================================================== */
.btn-primary,
button.btn-primary,
a.btn-primary {
    background: var(--degrade-azul-cian) !important;
    color: var(--branco) !important;
    border: 2px solid var(--azul) !important;
    font-weight: 600 !important;
    padding: 12px 30px !important;
    border-radius: 8px !important;
    transition: all 0.3s ease !important;
}

.btn-primary:hover,
button.btn-primary:hover,
a.btn-primary:hover {
    background: var(--branco) !important;
    color: var(--azul) !important;
    border-color: var(--azul) !important;
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(0, 15, 255, 0.3);
}

.btn-success {
    background: var(--degrade-verde-cian) !important;
    color: var(--branco) !important;
    border: 2px solid var(--verde) !important;
}

.btn-success:hover {
    background: var(--branco) !important;
    color: var(--verde) !important;
    border-color: var(--verde) !important;
}

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

.produtos-section h2 {
    background: var(--degrade-azul-cian) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
    font-weight: 700 !important;
}

.produto-card {
    background: var(--branco) !important;
    border: 2px solid var(--cinza) !important;
    border-radius: 12px !important;
    transition: all 0.3s ease !important;
}

.produto-card:hover {
    border-color: var(--azul) !important;
    border-color: #000FFF !important;
    box-shadow: 0 8px 25px rgba(0, 15, 255, 0.15) !important;
    transform: translateY(-5px);
}

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

.produto-card .preco {
    color: var(--verde) !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 - Degradê Verde→Cian */
.produto-card .btn-pedido-rapido,
.btn-pedido-rapido {
    background: var(--degrade-verde-cian) !important;
    background: linear-gradient(90deg, #00FF00, #00FFFF) !important;
    color: var(--preto) !important;
    color: #000000 !important;
    border: none !important;
    font-weight: 600 !important;
}

.produto-card .btn-pedido-rapido:hover,
.btn-pedido-rapido:hover {
    background: var(--degrade-verde-cian) !important;
    background: linear-gradient(90deg, #00FF00, #00FFFF) !important;
    color: var(--preto) !important;
    color: #000000 !important;
}

/* Botão Pedido Detalhado - Degradê Azul→Cian */
.btn-pedido-detalhado,
.produto-card .btn-pedido-detalhado,
button.btn-pedido-detalhado {
    background: var(--degrade-azul-cian) !important;
    background: linear-gradient(90deg, #000FFF, #00FFFF) !important;
    color: var(--branco) !important;
    color: #FFFFFF !important;
    border: none !important;
    font-weight: 600 !important;
}

.btn-pedido-detalhado:hover,
.produto-card .btn-pedido-detalhado:hover,
button.btn-pedido-detalhado:hover {
    background: var(--degrade-cian-azul) !important;
    background: linear-gradient(90deg, #00FFFF, #000FFF) !important;
    color: var(--branco) !important;
    color: #FFFFFF !important;
    transform: scale(1.05);
    box-shadow: 0 5px 15px rgba(0, 255, 255, 0.4) !important;
}

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

#modal-pedido-detalhado .btn-add-simple:hover,
.btn-add-simple:hover {
    background: var(--cian) !important;
    background: #00FFFF !important;
    color: var(--preto) !important;
    color: #000000 !important;
    transform: scale(1.05);
}

/* =====================================================
   FILTROS DE CATEGORIA
   ===================================================== */
.filtro-categorias {
    background: rgba(0, 15, 255, 0.05) !important;
    padding: 20px !important;
    border-radius: 10px !important;
}

.filtro-btn {
    background: var(--azul) !important;
    background: #000FFF !important;
    color: var(--branco) !important;
    color: #FFFFFF !important;
    border: 2px solid var(--azul) !important;
    border: 2px solid #000FFF !important;
    padding: 10px 20px !important;
    border-radius: 25px !important;
    font-weight: 600 !important;
}

.filtro-btn:hover,
.filtro-btn.ativo {
    background: var(--azul) !important;
    background: #000FFF !important;
    color: var(--branco) !important;
    color: #FFFFFF !important;
    border-color: var(--azul) !important;
    border-color: #000FFF !important;
}

/* =====================================================
   SEÇÃO DE CONTATO
   ===================================================== */
.contato-section {
    background: linear-gradient(135deg, rgba(0, 15, 255, 0.05), rgba(0, 255, 255, 0.05)) !important;
}

.contato-section h2 {
    background: var(--degrade-azul-cian) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
}

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

.form-control:focus,
.form-select:focus,
textarea.form-control:focus {
    border-color: var(--azul) !important;
    box-shadow: 0 0 0 0.2rem rgba(0, 15, 255, 0.25) !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(--azul) !important;
    background: #000FFF !important;
    color: var(--branco) !important;
    color: #FFFFFF !important;
    border: 2px solid var(--azul) !important;
    border: 2px solid #000FFF !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(--degrade-azul-cian) !important;
    background: linear-gradient(90deg, #000FFF, #00FFFF) !important;
    color: var(--branco) !important;
    color: #FFFFFF !important;
    border-color: var(--cian) !important;
    border-color: #00FFFF !important;
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(0, 15, 255, 0.3) !important;
}

/* =====================================================
   FOOTER
   ===================================================== */
.footer {
    background: var(--degrade-verde-cian) !important;
    color: var(--branco) !important;
    border-top: 3px solid var(--verde) !important;
}

/* Títulos das seções do footer em VERDE */
.footer h3,
.footer h4,
.footer-title,
.footer .footer-title {
    color: var(--verde) !important;
    color: #00FF00 !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;
    color: #FFFFFF !important;
}

/* Links e telefones em BRANCO com hover VERDE */
.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;
    color: #FFFFFF !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(--verde) !important;
    color: #00FF00 !important;
    text-decoration: underline !important;
}

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

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

/* Ícones (FontAwesome) em VERDE */
.footer i,
.footer .fas,
.footer .fab {
    color: var(--verde) !important;
    color: #00FF00 !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;
    color: #FFFFFF !important;
}

/* Links do footer bottom com hover VERDE */
.footer-bottom a,
.footer-copyright a,
.footer-privacy a,
.footer-credits a,
.privacy-link,
.dev-link {
    color: var(--branco) !important;
    color: #FFFFFF !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(--verde) !important;
    color: #00FF00 !important;
    text-decoration: underline !important;
}

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

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

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

.modal-footer .btn-primary {
    background: var(--degrade-verde-cian) !important;
}

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

.chat-input {
    border: 2px solid var(--azul) !important;
    border-radius: 25px !important;
}

.chat-input:focus {
    border-color: var(--verde) !important;
    box-shadow: 0 0 0 0.2rem rgba(0, 255, 0, 0.25) !important;
}

/* =====================================================
   MODAL PEDIDO POR VOZ - PALETA ULTRAGAS
   ===================================================== */
/* Ícone do microfone */
#modal-icone,
.modal-pedido-voz #modal-icone {
    color: var(--azul) !important;
    color: #000FFF !important;
}

/* Botão Iniciar Gravação */
.btn-gravar,
.modal-pedido-voz .btn-gravar {
    background: var(--degrade-verde-cian) !important;
    background: linear-gradient(90deg, #00FF00, #00FFFF) !important;
    color: var(--branco) !important;
    color: #FFFFFF !important;
}

.btn-gravar:hover,
.modal-pedido-voz .btn-gravar:hover {
    background: var(--verde) !important;
    background: #00FF00 !important;
    transform: translateY(-3px);
    box-shadow: 0 6px 20px rgba(0, 255, 0, 0.4) !important;
}

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

.btn-parar:hover,
.modal-pedido-voz .btn-parar:hover {
    background: var(--cian) !important;
    background: #00FFFF !important;
    color: var(--preto) !important;
    color: #000000 !important;
    transform: translateY(-3px);
    box-shadow: 0 6px 20px rgba(0, 255, 255, 0.4) !important;
}

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

a:hover {
    color: var(--cian) !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) !important;
}

/* =====================================================
   CARDS
   ===================================================== */
.card {
    border: 2px solid var(--cinza) !important;
    border-radius: 12px !important;
    transition: all 0.3s ease !important;
}

.card:hover {
    border-color: var(--azul) !important;
    box-shadow: 0 5px 20px rgba(0, 15, 255, 0.1) !important;
}

.card-header {
    background: var(--degrade-azul-cian) !important;
    color: var(--branco) !important;
    font-weight: 600 !important;
}

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

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

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

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

@keyframes pulse-verde {
    0%, 100% {
        box-shadow: 0 0 0 0 rgba(0, 255, 0, 0.7);
    }
    50% {
        box-shadow: 0 0 0 10px rgba(0, 255, 0, 0);
    }
}

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

.pulse-verde {
    animation: pulse-verde 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 ULTRAGAS
   ===================================================== */