/* =========================
   CONTACT PAGE STYLES
   ========================= */

@import url("base.css");

/* ---------- Layout ---------- */

.contact-section {
  min-height: calc(100vh - 4.5rem);
  display: flex;
  align-items: center;
}

.contact-wrapper {
  max-width: 520px;
  text-align: center;
}

/* ---------- Headline ---------- */

.contact-wrapper h1 {
  margin-bottom: 0.75rem;
}

.contact-subtitle {
  margin-bottom: 2.5rem;
  font-size: 0.95rem;
}

/* ---------- Form ---------- */

.contact-form {
  display: flex;
  flex-direction: column;
  gap: 1.4rem;
  text-align: left;
}

.form-group {
  display: flex;
  flex-direction: column;
}

.form-group label {
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 0.35rem;
  color: var(--color-muted);
}

.form-group input,
.form-group textarea {
  background-color: transparent;
  border: 1px solid var(--color-border);
  border-radius: 0.5rem;
  padding: 0.65rem 0.75rem;
  font-family: var(--font-body);
  color: var(--color-text);
  font-size: 0.9rem;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.form-group textarea {
  resize: vertical;
}
/* Adiciona espaço no topo para compensar o header fixo */
body {
    padding-top: 120px; /* Ajusta este valor conforme a altura do teu header */
}

/* Se usares uma tag <main>, aplica nela */
main {
    margin-top: 40px; /* Espaço extra para respirar */
}
/* Focus state — action accent */

.form-group input:focus,
.form-group textarea:focus {
  outline: none;
  border-color: #F59E0B;
  box-shadow: 0 0 0 2px rgba(245, 158, 11, 0.15);
}

/* ---------- Button ---------- */

.contact-btn {
  margin-top: 0.5rem;
  background-color: #F59E0B;
  border-color: #F59E0B;
  color: var(--color-text-dark);
}

.contact-btn:hover {
  background-color: #FBBF24;
  border-color: #FBBF24;
}

/* ---------- Alternative Contact ---------- */

.contact-alt {
  margin-top: 2rem;
  font-size: 0.85rem;
  color: var(--color-muted);
}

.contact-alt a {
  color: #F59E0B;
  text-decoration: none;
}

.contact-alt a:hover {
  text-decoration: underline;
}

/* --- Booking Section Styles --- */

.booking-section {
    padding: 80px 0;
    background-color: #0D1B2A; /* Garante fundo base */
}

/* Header da secção para manter hierarquia */
.booking-section .section-header {
    text-align: center;
    margin-bottom: 48px;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}

.booking-section h2 {
    color: #E6E8EB;
    margin-bottom: 16px;
    /* Assume que os estilos de fonte H2 já vêm do base.css */
}

.booking-section p {
    color: #A9B0BC;
}

/* O Wrapper do Calendário - A "Moldura" */
.calendar-wrapper {
    width: 100%;
    max-width: 1000px; /* Largura máxima para não esticar demasiado em ecrãs grandes */
    margin: 0 auto;    /* Centralizar horizontalmente */
    
    /* Estética do Card */
    background-color: #13263D;
    border: 1px solid rgba(207, 174, 89, 0.25); /* O teu Gold com transparência */
    border-radius: 8px; /* Cantos subtis, nada muito redondo */
    padding: 24px;
    
    /* Sombra subtil para dar profundidade */
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.2);
}

/* Ajuste para Mobile */
@media (max-width: 768px) {
    .calendar-wrapper {
        padding: 12px;
        border: none; /* Em mobile removemos a borda para ganhar espaço */
        background-color: transparent; /* Integra-se no fundo da página */
    }
}

/* --- Ajustes do Formulário de Texto (Parte Superior) --- */

/* Container do formulário para alinhar com o calendário */
form[name="contact-form"] {
    max-width: 600px; /* Limita a largura para não ficar esticado */
    margin: 0 auto 60px auto; /* Centraliza e dá espaço do calendário */
    padding: 0 20px;
}

/* Estilo dos Inputs (Email, etc) */
form[name="contact-form"] input,
form[name="contact-form"] textarea {
    width: 100%;
    background-color: #13263D; /* Fundo dos cards */
    border: 1px solid #1E3A5F;
    color: #E6E8EB;
    padding: 12px 16px;
    border-radius: 4px;
    margin-bottom: 24px;
    font-family: inherit; /* Herda a font do site */
    outline: none;
    transition: border-color 0.3s;
}

form[name="contact-form"] input:focus {
    border-color: #CFAE59; /* Brilha dourado ao clicar */
}

/* O Botão - O elemento mais crítico para conversão */
form[name="contact-form"] button {
    background-color: #CFAE59; /* Ouro */
    color: #0D1B2A; /* Texto escuro para contraste */
    font-weight: 600;
    padding: 14px 32px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-size: 0.9rem;
    transition: all 0.3s ease;
    display: block;
    width: 100%; /* Botão largo ou auto */
}

form[name="contact-form"] button:hover {
    background-color: #E6C870; /* Um ouro ligeiramente mais claro */
    transform: translateY(-2px); /* Efeito subtil de elevação */
}

/* Labels */
form[name="contact-form"] label {
    display: block;
    color: #A9B0BC; /* Texto secundário */
    margin-bottom: 8px;
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}