/* ==========================================================================
   PÁGINA DE CONTATO - LAYOUT SCROLL SNAP BONITO (V5.0)
   ========================================================================== */

/* --- CONFIGURAÇÕES GERAIS E VARIÁVEIS --- */
:root {
    --primary-gold: #b92027; 
    --dark-bg: #1a1a1a;
    --light-text: #f4f4f4;
    --card-bg: rgba(255, 255, 255, 0.95);
    --input-bg: #ffffff;
    --error-color: #dc3545;
    --header-height: 85px; /* Altura da navbar fixa */
}

/* Scroll-snap agora é global (static/css/snap-scroll-global.css + static/js/snap-scroll.js) */

/* --- ESTILIZAÇÃO DAS SEÇÕES (APENAS /contato) --- */
.contact-page .snap-section {
    position: relative;
    /* Em formulários, height fixa + header fixo pode cortar conteúdo.
       Usar min-height garante “tela cheia” sem esconder campos. */
    min-height: 100vh;
    min-height: 100dvh;
    width: 100%;
    scroll-snap-align: start; /* O "Ímã" */
    display: flex;
    align-items: center;
    justify-content: center;
    padding-top: var(--header-height); /* Compensação da Navbar Fixa */
    box-sizing: border-box;
    background-color: #f8f9fa;
    overflow: visible;
}

/* Scroll-snap/centralização (mouse + teclado) */
.contact-page .snap-section{
    scroll-snap-align: center !important;
    scroll-snap-stop: always !important;
    /* Centralização visual real (compensa header fixo) */
    padding-top: var(--header-height, 85px);
    padding-bottom: var(--header-height, 85px);
    align-items: center;
    justify-content: center;
}

/* --- TRANSIÇÕES SUAVES ENTRE SEÇÕES (contato) --- */
.contact-page .snap-section{
    overflow: visible; /* permitir que os degradês apareçam */
    isolation: isolate; /* cria contexto de empilhamento para não “tapar” labels/textos */
}
.contact-page .snap-section > *{
    position: relative;
    z-index: 2; /* garante conteúdo acima das transições */
}
.contact-page .snap-section:not(:first-child)::before{
    content:'';
    position:absolute;
    top:0; left:0; right:0;
    height: 90px;
    background: linear-gradient(to bottom,
      rgba(0,0,0,0.10) 0%,
      rgba(0,0,0,0.06) 35%,
      rgba(0,0,0,0.02) 65%,
      transparent 100%);
    pointer-events:none;
    z-index: 0; /* atrás do conteúdo */
}
.contact-page .snap-section:not(:last-child)::after{
    content:'';
    position:absolute;
    bottom:0; left:0; right:0;
    height: 90px;
    background: linear-gradient(to top,
      rgba(0,0,0,0.10) 0%,
      rgba(0,0,0,0.06) 35%,
      rgba(0,0,0,0.02) 65%,
      transparent 100%);
    pointer-events:none;
    z-index: 0; /* atrás do conteúdo */
}
/* Seção com fundo mais escuro/cinza (mapa) pede um degradê mais “neutro” */
#localizacao.contact-page-localizacao-fix{ /* placeholder - ver regra abaixo */ }

.contact-page #localizacao.snap-section::before{
    background: linear-gradient(to bottom,
      rgba(0,0,0,0.12) 0%,
      rgba(0,0,0,0.07) 35%,
      rgba(0,0,0,0.03) 70%,
      transparent 100%);
}

/* Rodapé é global (não duplicar nem esconder) */

/* Fundo diferenciado para a seção do mapa */
.contact-page #localizacao {
    background-color: #e9ecef;
    background-image: radial-gradient(#d7d7d7 1px, transparent 1px);
    background-size: 20px 20px;
}

/* --- CARDS (Formulário e Mapa) --- */
.contact-page .contact-wrapper {
    width: 100%;
    max-width: 1080px !important; /* mais um pouco, mantendo aspecto de card */
    margin: 0 auto;
    padding: 0 20px;
    position: relative; /* Contexto de posicionamento para o indicador de scroll */
}

@media (max-width: 991px){
  .contact-page .contact-wrapper{ max-width: 720px; }
}

.contact-page .glass-card {
    background: white;
    border-radius: 20px;
    box-shadow: 0 15px 40px rgba(0,0,0,0.15);
    overflow: hidden;
    display: flex;
    flex-wrap: wrap;
    border: 1px solid rgba(0,0,0,0.05);
    /* Remover animação que pode “sumir” labels/campos em alguns browsers/extensões */
    transform: none;
    opacity: 1;
    animation: none;
    /* Não force min-height alto: em telas baixas isso corta o formulário */
    min-height: 0;
}

.contact-page .glass-card,
.contact-page .contact-wrapper,
.contact-page .content-col{
    max-width: 100%;
}
.contact-page .glass-card{
    overflow: hidden;
}

/* UX: Indicador de Scroll (Visual Cue) */
/* Seta elegante e discreta para indicar a seção do mapa abaixo */
.contact-page .contact-wrapper::after {
    display: none !important; /* REMOVIDO: Seta de animação desativada conforme solicitação */
}

/* Coluna Escura (Info/Endereço) */
.contact-page .glass-card .info-col {
    background: #111;
    color: white;
    padding: clamp(34px, 4vw, 64px) clamp(22px, 3.5vw, 44px);
    flex: 1;
    min-width: 300px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    position: relative;
}

.contact-page .glass-card .info-col::before {
    content: '';
    position: absolute;
    top: 0; left: 0; width: 100%; height: 5px;
    background: var(--primary-gold);
}

.contact-page .info-title {
    font-family: 'Playfair Display', serif;
    font-size: 2.5rem;
    margin-bottom: 20px;
    color: #fff;
}

.contact-page .info-text {
    font-family: 'Roboto', sans-serif;
    opacity: 0.8;
    line-height: 1.6;
    margin-bottom: 30px;
    font-size: 1.1rem;
}

/* Destaque para endereço */
.contact-page .address-box {
    margin-bottom: 30px;
    border-left: 3px solid var(--primary-gold);
    padding-left: 20px;
}

.address-box h4 { 
    color: #fff; 
    margin-bottom: 10px; 
    font-weight: 300; 
}

.address-box p { 
    color: #ccc; 
    margin: 0; 
    line-height: 1.5; 
}

/* Redes Sociais */
.contact-page .social-block {
    background: rgba(255, 255, 255, 0.1);
    padding: 20px;
    border-radius: 12px;
    border-left: 4px solid var(--primary-gold);
    margin-top: auto;
}

.contact-page .social-label {
    font-size: 1rem;
    font-weight: 700;
    text-transform: uppercase;
    color: #fff;
    margin-bottom: 15px;
    display: block;
    letter-spacing: 1px;
}

.contact-page .social-icons {
    display: flex;
    gap: 15px;
}

.contact-page .social-link {
    width: 45px;
    height: 45px;
    background: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #000;
    font-size: 1.3rem;
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    text-decoration: none;
}

.social-link:hover {
    background: var(--primary-gold);
    color: #fff;
    transform: scale(1.15);
}

/* Coluna Clara */
.contact-page .glass-card .content-col {
    padding: clamp(30px, 4vw, 56px) clamp(20px, 3.5vw, 44px);
    flex: 1.5;
    min-width: 300px;
    background: #fff;
    position: relative;
}

/* Alinhamento consistente de campos/labels (evita “saltos” visuais) */
.contact-page .content-col form {
    width: 100%;
}
.contact-page .content-col .form-group,
.contact-page .content-col .row.g-4 > [class*="col-"] {
    display: flex;
    flex-direction: column;
}

/* Alinhamento fino do bloco nome/email (evita “vãos” e desalinhamento vertical) */
.contact-page .content-col .row.g-4.mb-4{
    --bs-gutter-x: 18px;
    --bs-gutter-y: 14px;
    margin-bottom: 18px !important;
}
.contact-page .content-col .row.g-4.mb-4 > [class*="col-"]{
    margin-top: 0 !important;
}
.contact-page .content-col .form-group{
    margin-bottom: 16px;
}
.contact-page .content-col label{ line-height: 1.15; margin-bottom: 8px; }
.contact-page .form-control-lux{
    height: 48px;
    padding: 12px 14px;
    line-height: 1.2;
}
.contact-page textarea.form-control-lux{
    height: auto;
    min-height: 110px;
}

/* Selects estavam “cortando” o texto: ajuste específico */
.contact-page select.form-control-lux{
    padding-top: 10px;
    padding-bottom: 10px;
    line-height: 1.25;
}
.contact-page .content-col .text-danger.small {
    margin-top: 6px;
}

/* Botão enviar proporcional e bem alinhado */
.contact-page .content-col .btn-submit-lux{
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.contact-page .content-col form{
    display: flex;
    flex-direction: column;
}
.contact-page .content-col form .btn-submit-lux{
    align-self: flex-start;
}
@media (max-width: 992px){
  .contact-page .content-col form .btn-submit-lux{ align-self: center; width: 100%; max-width: 520px; }
}

/* Mapa no Card */
.map-frame-wrapper {
    width: 100%;
    height: 100%;
    min-height: 500px; /* FIX: Altura mínima corrigida para melhor visualização */
    border-radius: 12px;
    overflow: hidden;
    box-shadow: inset 0 0 20px rgba(0,0,0,0.1);
}

.map-frame-wrapper iframe {
    width: 100% !important;
    height: 100% !important;
    min-height: 500px; /* FIX: Sincronização de altura com o wrapper */
    border: none;
    display: block;
}

/* --- FORMULÁRIO --- */
.contact-page .form-group { 
    position: relative; 
    margin-bottom: 25px; /* UX: Espaçamento ajustado para agrupar melhor os campos */
}

.contact-page .content-col .form-group,
.contact-page .content-col .row.g-4 > [class*="col-"]{
    min-width: 0; /* evita overflow horizontal por conteúdo interno */
}

.contact-page .form-control-lux {
    width: 100%;
    padding: 15px;
    border: 2px solid #e0e0e0;
    border-radius: 8px;
    font-size: 1rem;
    transition: all 0.3s;
    background: #fdfdfd;
    color: #333;
}

.contact-page .form-control-lux:focus {
    border-color: var(--primary-gold);
    background: #fff;
    outline: none;
    box-shadow: 0 5px 15px rgba(0,0,0,0.05);
}

.contact-page .form-control-lux.input-error {
    border-color: var(--error-color);
    animation: shake 0.5s;
}

.contact-page label { 
    font-weight: 500; 
    margin-bottom: 12px; /* UX: Melhor legibilidade do rótulo */
    display: block; 
    color: #1a1a1a;
    font-size: 1rem;
    letter-spacing: 0.5px;
}

/* Forçar labels visíveis (protege de conflitos externos de CSS) */
.contact-page .content-col label{
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    color: #1a1a1a !important;
    position: relative;
    z-index: 10;
}

/* Dark mode: labels precisam ser claros (senão somem em fundo escuro) */
body.dark-mode .contact-page .content-col label,
[data-theme="dark"] .contact-page .content-col label{
    color: #fff !important;
}

.contact-page .btn-submit-lux {
    background: #111;
    color: #fff;
    border: none;
    padding: 15px 40px;
    font-size: 1.1rem;
    font-weight: bold;
    border-radius: 50px;
    cursor: pointer;
    transition: all 0.3s;
    width: auto;
    min-width: 220px;
    max-width: 360px;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-top: 10px;
}

.contact-page .btn-submit-lux:hover {
    background: var(--primary-gold);
    transform: translateY(-3px);
}

/* IMPORTANTE: não sobrescrever o comportamento do grid do Bootstrap dentro do formulário
   (isso causa desalinhamento do Nome/E-mail e “sensação” de colunas fora do lugar). */

/* UX: Estado de Carregamento (Feedback Visual) */
.btn-submit-lux.loading {
    color: transparent !important;
    pointer-events: none;
    cursor: wait;
}

.btn-submit-lux.loading::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 24px;
    height: 24px;
    margin-top: -12px;
    margin-left: -12px;
    border: 3px solid rgba(255, 255, 255, 0.3);
    border-top-color: #fff;
    border-radius: 50%;
    animation: btn-spin 0.8s linear infinite;
}

@keyframes btn-spin {
    to { transform: rotate(360deg); }
}

/* --- ANIMAÇÕES --- */
@keyframes fadeUp { 
    to { 
        opacity: 1; 
        transform: translateY(0); 
    } 
}

@keyframes shake { 
    0%, 100% { transform: translateX(0); } 
    25%, 75% { transform: translateX(-5px); } 
    50% { transform: translateX(5px); } 
}

/* Animação suave de "convite" para rolar */
@keyframes scrollPrompt {
    0% { opacity: 0; transform: translateX(-50%) rotate(45deg) translate(-15px, -15px); }
    50% { opacity: 1; }
    100% { opacity: 0; transform: translateX(-50%) rotate(45deg) translate(5px, 5px); }
}

/* --- RESPONSIVIDADE --- */
@media (max-width: 992px) {
    .glass-card { 
        flex-direction: column; 
    }
    
    .info-col, .content-col { 
        padding: 40px 20px; 
    }
    
    .snap-section { 
        height: auto; 
        min-height: 100vh; 
        min-height: 100dvh; /* FIX: Garante tela cheia real no mobile */
        padding: 100px 0 50px 0; 
    }
    
    .info-title {
        font-size: 2rem;
        text-align: center;
    }
    
    .info-text {
        text-align: center;
    }
    
    .social-icons {
        justify-content: center;
    }
}

@media (max-width: 767px) {
    .info-col, .content-col {
        padding: 30px 15px;
    }
    
    .info-title {
        font-size: 1.75rem;
    }
    
    .map-frame-wrapper iframe {
        min-height: 300px;
    }
}

/* --- DARK MODE SUPPORT --- */
body.dark-mode .snap-section:not(.footer-section) {
    background-color: #0f0f0f;
}

body.dark-mode .glass-card {
    background: #1a1a1a;
    border-color: rgba(255, 255, 255, 0.1);
}

body.dark-mode .content-col {
    background: #1a1a1a;
}

body.dark-mode .form-control-lux {
    background: #2a2a2a;
    border-color: rgba(255, 255, 255, 0.1);
    color: #fff;
}

body.dark-mode .form-control-lux:focus {
    background: #333;
    border-color: var(--primary-gold);
}

body.dark-mode label {
    color: #fff;
}

body.dark-mode #localizacao {
    background-color: #1a1a1a;
    background-image: radial-gradient(#333 1px, transparent 1px);
}