/* Estilos complementares ao Tailwind para Marcos Bruno Grommtt */

:root {
    --gold-glow: rgba(234, 179, 8, 0.25);
}

/* Padrão de Grid no fundo do Hero */
.hero-grid-pattern {
    background-size: 40px 40px;
    background-image: 
        linear-gradient(to right, rgba(255, 255, 255, 0.04) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(255, 255, 255, 0.04) 1px, transparent 1px);
}

/* Sombra suave dourada para cards e botões em hover */
.service-card {
    transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}

.service-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 30px -10px rgba(0, 0, 0, 0.6), 0 0 15px -3px var(--gold-glow);
}

/* Efeito de brilho pulsar no botão do WhatsApp */
.whatsapp-float-btn {
    box-shadow: 0 8px 24px rgba(16, 185, 129, 0.4);
    animation: floatGlow 3s ease-in-out infinite;
}

@keyframes floatGlow {
    0%, 100% {
        box-shadow: 0 8px 24px rgba(16, 185, 129, 0.4);
    }
    50% {
        box-shadow: 0 12px 32px rgba(16, 185, 129, 0.7);
    }
}

/* Custom Scrollbar */
::-webkit-scrollbar {
    width: 8px;
}

::-webkit-scrollbar-track {
    background: #0B0F17;
}

::-webkit-scrollbar-thumb {
    background: #1F2937;
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: #EAB308;
}

/* Slider de Comparação Antes/Depois */
#comparison-range {
    -webkit-appearance: none;
    appearance: none;
    background: transparent;
}

#comparison-range:focus {
    outline: none;
}

/* Estilo para seletores de veículo na calculadora */
.vehicle-option {
    transition: all 0.2s ease-in-out;
}

.vehicle-option.active {
    border-color: #EAB308 !important;
    background-color: rgba(234, 179, 8, 0.12) !important;
    box-shadow: 0 0 12px rgba(234, 179, 8, 0.2);
}

.vehicle-option.active i {
    color: #FACC15 !important;
    transform: scale(1.1);
}

/* Checkboxes customizados na calculadora */
.service-checkbox {
    transition: all 0.2s ease-in-out;
}

.service-checkbox.checked {
    border-color: rgba(234, 179, 8, 0.4) !important;
    background-color: rgba(19, 26, 38, 0.9) !important;
}