/* ════════════════════════════════════════════════════════════
   SHUTTERLITE — Marcação de Sessões Fotográficas
   Este ficheiro NÃO define paleta própria: usa as variáveis e
   classes já existentes em /style.css (--w10, --w40, --neutral-900,
   .contact-input, .contact-select, .contact-textarea, .contact-submit,
   .section, .section-narrow, .section-eyebrow, .section-title, etc.)
   para que a página fique visualmente idêntica ao resto do site.
   Aqui ficam apenas os elementos que o style.css ainda não cobre.
════════════════════════════════════════════════════════════ */

* {
  /* background-color: #000; */
}

/* Página tem nav fixa — compensar no topo da 1ª secção */
.booking-hero-spacer{ height:96px; }

.booking-intro{
  max-width:640px;
  margin:0 auto;
  text-align:center;
  color:var(--w60);
  font-size:15px;
  line-height:1.8;
  font-weight:300;
}

/* ── FORM GRID (reaproveita .contact-row do style.css) ─────── */
.booking-form{ display:grid; gap:20px; margin-top:64px; }

.booking-row-3{
  display:grid;
  grid-template-columns:1fr 1fr 1fr;
  gap:16px;
}

.booking-field-full{ grid-column:1 / -1; }

/* Grupos numerados (01, 02, 03...) */
.booking-group{ margin-top:8px; }
.booking-group + .booking-group{ margin-top:56px; }

.booking-group-head{
  display:flex;
  align-items:baseline;
  gap:14px;
  margin-bottom:28px;
  padding-bottom:16px;
  border-bottom:1px solid var(--w10);
}
.booking-group-num{
  font-size:12px;
  letter-spacing:.3em;
  color:var(--w40);
  font-weight:300;
}
.booking-group-title{
  font-size:13px;
  letter-spacing:.25em;
  text-transform:uppercase;
  color:#fff;
  font-weight:400;
}
body.light-theme .booking-group-title{ color:#111; }

/* Labels em cima dos campos (o style.css não define labels visíveis
   para o contact form; aqui os campos são mais numerosos e precisam) */
.booking-label{
  display:block;
  text-transform:uppercase;
  letter-spacing:.2em;
  color:var(--w50);
  font-size:10.5px;
  margin-bottom:10px;
}
.booking-label .req{ color:var(--w70); }
.booking-label .opt{
  font-size:9.5px;
  color:var(--w30);
  letter-spacing:.15em;
  margin-left:8px;
}

.booking-field{ display:flex; flex-direction:column; }

.booking-hint{
  font-size:11px;
  color:var(--w40);
  margin-top:8px;
}

.booking-error-msg{
  font-size:11.5px;
  color:#ff8080;
  margin-top:8px;
  display:none;
}
.booking-field.invalid .booking-error-msg{ display:block; }
.booking-field.invalid .contact-input,
.booking-field.invalid .contact-select,
.booking-field.invalid .contact-textarea{
  border-color:rgba(255,80,80,.5);
  background:rgba(255,80,80,.04);
}

/* ── LOCAL: grupo de pills (não existe no style.css) ────────── */
.booking-pill-group{ display:flex; flex-wrap:wrap; gap:10px; }
.booking-pill{ position:relative; }
.booking-pill input{ position:absolute; opacity:0; width:0; height:0; }
.booking-pill span{
  display:inline-flex;
  align-items:center;
  padding:13px 22px;
  border:1px solid var(--w10);
  border-radius:9999px;
  font-size:13px;
  letter-spacing:.05em;
  color:var(--w70);
  cursor:pointer;
  transition:all .3s var(--ease);
  user-select:none;
  background:var(--neutral-950);
}
.booking-pill input:checked + span{
  background:#fff;
  color:#000;
  border-color:#fff;
}
.booking-pill input:focus-visible + span{
  outline:2px solid var(--w40);
  outline-offset:2px;
}

.booking-address-wrap{
  display:grid;
  grid-template-rows:0fr;
  opacity:0;
  transition:grid-template-rows .4s var(--ease), opacity .3s ease, margin-top .4s var(--ease);
  margin-top:0;
}
.booking-address-wrap.open{ grid-template-rows:1fr; opacity:1; margin-top:24px; }
.booking-address-wrap > div{ overflow:hidden; min-height:0; }

/* ── DISCLAIMER ──────────────────────────────────────────────── */
.booking-disclaimer{
  display:flex;
  gap:12px;
  align-items:flex-start;
  margin-top:44px;
  padding:18px 22px;
  border:1px solid var(--w10);
  border-radius:16px;
  background:var(--neutral-950);
}
.booking-disclaimer svg{ flex:none; width:16px; height:16px; margin-top:2px; color:var(--w50); }
.booking-disclaimer p{ font-size:12.5px; line-height:1.7; color:var(--w60); }
.booking-disclaimer strong{ color:var(--w70); font-weight:500; }

/* Reaproveita .form-msg do style.css para o erro geral do formulário */
.booking-form-error{ margin-top:8px; }

.booking-submit{ margin-top:8px; width:100%; }
.booking-spinner{
  width:14px; height:14px;
  border:2px solid rgba(0,0,0,.25);
  border-top-color:#000;
  border-radius:50%;
  display:none;
  animation:bk-spin .7s linear infinite;
  margin-right:8px;
  vertical-align:-2px;
}
.contact-submit.loading .booking-spinner{ display:inline-block; }
.contact-submit.loading .btn-label{ opacity:.8; }
@keyframes bk-spin{ to{ transform:rotate(360deg); } }

/* ── PAINEL DE SUCESSO ───────────────────────────────────────── */
.booking-success{
  margin-top:64px;
  text-align:center;
  padding:64px 32px;
  border:1px solid var(--w10);
  border-radius:24px;
  background:var(--neutral-950);
  animation:bk-fade-up .5s var(--ease) both;
}
@keyframes bk-fade-up{ from{ opacity:0; transform:translateY(16px);} to{ opacity:1; transform:translateY(0);} }

.booking-success-icon{
  width:56px; height:56px;
  margin:0 auto 24px;
  border-radius:50%;
  border:1px solid #fff;
  color:#fff;
  display:flex; align-items:center; justify-content:center;
  font-size:22px;
}
body.light-theme .booking-success-icon{ border-color:#111; color:#111; }

.booking-success h3{
  font-size:clamp(24px,3vw,32px);
  font-weight:300;
  margin-bottom:14px;
  letter-spacing:-.01em;
}
.booking-success p{
  max-width:440px;
  margin:0 auto;
  color:var(--w60);
  font-size:14.5px;
  line-height:1.75;
}

.booking-code-box{
  margin:32px auto 0;
  max-width:360px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  padding:18px 22px;
  border:1px dashed var(--w20);
  border-radius:16px;
}
.booking-code-label{
  font-size:10px;
  letter-spacing:.25em;
  text-transform:uppercase;
  color:var(--w40);
  display:block;
  margin-bottom:6px;
  text-align:left;
}
.booking-code-value{
  font-family:'Courier New', monospace;
  font-size:18px;
  letter-spacing:.04em;
  color:#fff;
}
body.light-theme .booking-code-value{ color:#111; }

.booking-copy-btn{
  flex:none;
  width:38px; height:38px;
  border-radius:50%;
  border:1px solid var(--w20);
  color:var(--w70);
  display:flex; align-items:center; justify-content:center;
  transition:all .3s var(--ease);
}
.booking-copy-btn:hover{ background:#fff; color:#000; border-color:#fff; }
.booking-copy-btn svg{ width:15px; height:15px; }

.booking-new-btn{
  margin-top:32px;
  color:var(--w60);
  font-size:12.5px;
  text-transform:uppercase;
  letter-spacing:.2em;
  text-decoration:underline;
  text-underline-offset:5px;
  transition:color .3s;
}
.booking-new-btn:hover{ color:#fff; }
body.light-theme .booking-new-btn:hover{ color:#111; }

/* ── RESPONSIVE ──────────────────────────────────────────────── */
@media (max-width:760px){
  .booking-row-3{ grid-template-columns:1fr; gap:20px; }
  .booking-group + .booking-group{ margin-top:44px; }
  .booking-success{ padding:48px 22px; }
}

@media (prefers-reduced-motion: reduce){
  .booking-success,
  .booking-address-wrap,
  .booking-spinner{ animation:none !important; transition:none !important; }
}