/* 
 * BW Corretora - Correções Críticas v1.2
 * Arquivo de correções para problemas visuais
 */

/* ===================================
   1. HEADER - Fundo Azul e Menu Visível
   =================================== */

.header-bg,
header.header-bg,
header {
    background-color: #035AA6 !important;
    margin: 0 !important;
}

/* Remove espaço branco após header */
header + * {
    margin-top: 0 !important;
}

#inicio,
section#inicio,
.relative.pt-20 {
    padding-top: 0 !important;
    margin-top: 0 !important;
}

/* Seção Contato - AZUL */
#contato,
section#contato,
.contact-section-bg {
    background-color: #0367A6 !important;
    background: #0367A6 !important;
}

/* Horário de Atendimento - CAIXA BRANCA */
#contato .form-field,
#contato .p-6.rounded-lg.form-field {
    background-color: white !important;
    background: white !important;
    padding: 1.5rem !important;
    border-radius: 0.5rem !important;
}

#contato .form-field * {
    color: #333 !important;
}

/* Seção Orçamento - AZUL GRADIENTE */
#orcamento,
section#orcamento,
.form-section {
    background: linear-gradient(135deg, #0052CC 0%, #4A90E2 100%) !important;
}

/* Títulos principais (fora do form) = BRANCOS */
#orcamento > .container h2,
#orcamento > .container > .text-center h2,
#orcamento > .container > .text-center p {
    color: white !important;
}

/* Labels do formulário (dentro do form) = PRETOS SEM FUNDO */
#orcamento form label,
#orcamento .bg-white label,
#orcamento .space-y-6 label,
#orcamento label[for] {
    color: #333 !important;
    background-color: transparent !important;
    background: none !important;
    padding: 0 !important;
}

/* Força remoção de qualquer classe de fundo azul */
#orcamento .bg-blue-500,
#orcamento .bg-blue-600,
#orcamento form .bg-blue-500,
#orcamento form .bg-blue-600 {
    background-color: transparent !important;
    background: none !important;
    color: #333 !important;
}

/* Textos pequenos = CINZA ESCURO */
#orcamento form p,
#orcamento form .text-sm {
    color: #666 !important;
}

header nav a,
header .text-white,
.mobile-menu a {
    color: white !important;
}

.hamburger span {
    background-color: white !important;
    display: block !important;
    width: 25px !important;
    height: 3px !important;
}

header button {
    background-color: white !important;
    color: #0052CC !important;
}

/* ===================================
   2. LOGO - Garantir Visibilidade
   =================================== */

header img,
header .flex.items-center img {
    display: block !important;
    height: 3.5rem !important;
    width: auto !important;
}

/* ===================================
   3. CARROSSEL SEGUROS - Horizontal
   =================================== */

.seguros-carousel {
    display: flex !important;
    flex-direction: row !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    scroll-behavior: smooth !important;
    gap: 2rem !important;
    padding: 0 55px !important;
    scrollbar-width: none !important;
}

.seguros-carousel::-webkit-scrollbar {
    display: none !important;
}

.seguro-card {
    min-width: 520px !important;
    max-width: 520px !important;
    flex-shrink: 0 !important;
    display: block !important;
}

.seguros-carousel-container {
    position: relative !important;
    overflow: visible !important;
}

/* ===================================
   4. BOTÃO WHATSAPP - Completo
   =================================== */

.whatsapp-float {
    position: fixed !important;
    bottom: 30px !important;
    right: 30px !important;
    z-index: 1000 !important;
    background: #25D366 !important;
    color: white !important;
    width: auto !important;
    height: auto !important;
    min-width: 60px !important;
    min-height: 60px !important;
    padding: 16px 24px !important;
    border-radius: 50px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 12px !important;
    box-shadow: 0 4px 20px rgba(37, 211, 102, 0.4) !important;
    cursor: pointer !important;
    text-decoration: none !important;
    font-weight: 600 !important;
    font-size: 16px !important;
    transition: all 0.3s ease !important;
}

.whatsapp-float:hover {
    transform: translateY(-3px) !important;
    box-shadow: 0 8px 30px rgba(37, 211, 102, 0.6) !important;
    background: #22c55e !important;
}

.whatsapp-float svg {
    width: 28px !important;
    height: 28px !important;
    fill: white !important;
    flex-shrink: 0 !important;
}

.whatsapp-float-text {
    display: inline !important;
    color: white !important;
    white-space: nowrap !important;
}

/* ===================================
   5. COMPENSAR HEADER FIXO
   =================================== */

body {
    padding-top: 76px !important;
}

body.admin-bar {
    padding-top: 108px !important;
}

/* ===================================
   6. RESPONSIVIDADE
   =================================== */

@media (max-width: 1400px) {
    .seguro-card {
        min-width: 480px !important;
        max-width: 480px !important;
    }
}

@media (max-width: 1024px) {
    .seguro-card {
        min-width: 420px !important;
        max-width: 420px !important;
    }
}

@media (max-width: 768px) {
    body {
        padding-top: 64px !important;
    }
    
    .whatsapp-float {
        padding: 14px 20px !important;
        font-size: 14px !important;
        bottom: 20px !important;
        right: 20px !important;
    }
    
    .whatsapp-float svg {
        width: 24px !important;
        height: 24px !important;
    }
    
    .seguro-card {
        min-width: 320px !important;
        max-width: 320px !important;
    }
    
    .seguros-carousel {
        padding: 0 50px !important;
    }
}

/* ===================================
   7. SETAS DO CARROSSEL
   =================================== */

.carousel-arrow {
    position: absolute !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    z-index: 20 !important;
    background: white !important;
    color: #1f2937 !important;
    border: none !important;
    width: 45px !important;
    height: 45px !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1) !important;
}

.carousel-arrow:hover {
    background: #0052CC !important;
    color: white !important;
}

.carousel-arrow.prev {
    left: 10px !important;
}

.carousel-arrow.next {
    right: 10px !important;
}

/* ===================================
   OPTIONS DOS SELECTS - CHROME FIX
   =================================== */

/* Todas as options em PRETO */
select option,
form select option,
#orcamento select option,
#contato select option,
.form-field option,
select:not([multiple]) option {
    color: #333 !important;
    background-color: white !important;
    font-weight: normal !important;
}

/* Estados: hover, focus, checked */
select option:hover {
    color: #333 !important;
    background-color: #f0f0f0 !important;
}

select option:focus {
    color: #333 !important;
    background-color: #e0e0e0 !important;
}

select option:checked {
    color: #333 !important;
    background-color: #e8f4ff !important;
}

/* Webkit específico (Chrome/Safari) */
select option:not(:checked) {
    color: #333 !important;
}

/* Remove qualquer cor herdada */
select option[value] {
    color: #333 !important;
}

select option[selected] {
    color: #333 !important;
}

/* Option DEFAULT "Selecione uma opção" - PRETO */
select option[value=""],
select option:first-child,
select option:first-of-type {
    color: #333 !important;
    background-color: white !important;
}

/* Disabled também preto */
select option:disabled {
    color: #999 !important;
    background-color: white !important;
}


/* ===================================
   CHROME SELECT HIGHLIGHT FIX
   =================================== */

/* Remove appearance nativa */
select {
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    appearance: none !important;
}

/* Força TODAS as options sem highlight azul */
select option,
select option:hover,
select option:active,
select option:focus,
select option[aria-selected="true"],
select option[data-focus="true"] {
    color: #333 !important;
    background-color: white !important;
    background: white !important;
}

/* Option highlighted/selected */
select option:hover {
    background-color: #f5f5f5 !important;
    background: #f5f5f5 !important;
}

/* Remove system highlight colors */
select:focus option:checked,
select:focus option[selected] {
    color: #333 !important;
    background-color: #e8f4ff !important;
    background: #e8f4ff !important;
}

/* ===================================
   ESPECÍFICO PARA TIPO_SEGURO
   =================================== */

/* Select tipo_seguro */
#tipo_seguro,
select#tipo_seguro,
select.form-select {
    color: #333 !important;
}

/* Options do tipo_seguro */
#tipo_seguro option,
select#tipo_seguro option,
select.form-select option,
#orcamento select.form-select option {
    color: #000 !important;
    background-color: #fff !important;
    background: #fff !important;
}

/* TODOS os estados do tipo_seguro */
#tipo_seguro option:hover,
#tipo_seguro option:focus,
#tipo_seguro option:active,
#tipo_seguro option:checked,
select.form-select option:hover,
select.form-select option:focus {
    color: #000 !important;
    background-color: #f5f5f5 !important;
    background: #f5f5f5 !important;
}

/* ===================================
   PADRONIZAÇÃO TOTAL DOS CAMPOS
   =================================== */

/* TODOS os inputs, selects e textareas iguais */
#orcamento input,
#orcamento select,
#orcamento textarea,
#contato input,
#contato select,
#contato textarea,
input[type="text"],
input[type="email"],
input[type="tel"],
select,
textarea {
    background-color: #F2F2F2 !important;
    color: #333 !important;
    border: 1px solid #e5e7eb !important;
    border-radius: 0.5rem !important;
    padding: 0.75rem 1rem !important;
    width: 100% !important;
    font-size: 1rem !important;
    box-sizing: border-box !important;
}

/* Remove bordas pretas do focus padrão */
#orcamento input:focus,
#orcamento select:focus,
#orcamento textarea:focus {
    outline: none !important;
    border-color: #93c5fd !important;
    box-shadow: 0 0 0 3px rgba(147, 197, 253, 0.1) !important;
}