/* ===========================================================================
   Pedido de reserva por passos — /reservar
   ---------------------------------------------------------------------------
   Carregado DEPOIS do style.css, e conta com ele: a paleta, o reset, a
   tipografia, a barra de navegação e o rodapé vêm de lá. Aqui está só o que é
   do formulário.

   Mobile-first a sério: tudo o que está fora de uma media query é a versão de
   telemóvel. As media queries só ACRESCENTAM à medida que há espaço.
   =========================================================================== */

:root {
  /* Só o que o style.css não tem. O resto da paleta vem de lá — repetir os
     valores aqui era criar uma segunda fonte de verdade para a mesma cor. */
  --ok: #3B6D11;
  --erro: #A33A28;

  /* ⚠️ Altura da barra de progresso: entra no `scroll-margin-top` de cada
     passo. Se mudar aqui, o scroll deixa de parar no sítio certo — por isso
     é uma variável e não um número solto. */
  --barra: 56px;
}

/* ⚠️ A barra do site é `position: fixed` em todo o lado, com 100px de altura.
   Nesta página isso somava-se à barra de progresso e comia 150px de ecrã de
   telemóvel antes do primeiro campo. Aqui passa a `absolute`: fica no topo
   como sempre, dá a saída para o resto do site, mas rola com a página e deixa
   a barra de progresso — que é a que interessa a meio do formulário — colar-se
   sozinha ao topo. O menu de telemóvel continua a abrir bem: é
   `position: absolute; top: 100%` sobre a própria `nav`, que continua a ser
   um ancestral posicionado. */
body.pg-reservar nav, body.pg-checkout nav { position: absolute; }

/* O body do site declara `overflow-x: hidden` e a seguir `overflow-x: clip`.
   O `clip` NÃO cria um contentor de scroll e deixa o `position: sticky` da
   barra funcionar; o `hidden`, que é o que fica de pé onde o `clip` não é
   suportado, CRIA — e ali a barra deixava de colar. Nesta página não há nada a
   transbordar na horizontal, por isso volta a `visible` e o comportamento
   passa a ser o mesmo em todo o lado. */
body.pg-reservar, body.pg-checkout { overflow-x: visible; }

.wz-envelope, .wz-barra-linha, .wz-cabecalho { font-weight: 400; }

/* --------------------------------------------------------------------------
   Barra de progresso — colada ao topo. É o único elemento fixo da página:
   um botão fixo em baixo brigaria com o teclado virtual do iOS.
   -------------------------------------------------------------------------- */
.wz-barra {
  position: sticky;
  top: 0;
  z-index: 20;
  /* ⚠️ Castanho da casa (`--burgundy-deep`, o mesmo tom em que acaba a faixa
     das outras páginas), e OPACO — não translúcido. Ao rolar, a barra passa por
     cima dos cartões brancos dos passos, e um fundo com transparência deixava-os
     ver-se por baixo do texto. O `backdrop-filter` saiu pela mesma razão: sem
     transparência não tem o que desfocar, e é caro no telemóvel. */
  background: var(--burgundy-deep);
  border-bottom: 1px solid rgba(255, 255, 255, .10);
  height: var(--barra);
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 0 16px;
}
.wz-barra-linha {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}
.wz-barra-passo {
  font-size: 12px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: rgba(245, 239, 227, .72);
  white-space: nowrap;
}
.wz-barra-titulo {
  font-family: 'Playfair Display', 'Playfair Fallback', Georgia, serif;
  font-size: 15px;
  color: var(--cream);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.wz-barra-tubo {
  height: 3px;
  /* A calha tem de se ver sobre o castanho: um creme opaco aqui lia-se como
     barra CHEIA, e o progresso deixava de significar nada. */
  background: rgba(255, 255, 255, .18);
  border-radius: 3px;
  margin-top: 8px;
  overflow: hidden;
}
.wz-barra-cheio {
  height: 100%;
  width: 0;
  background: var(--gold-light);
  border-radius: 3px;
  transition: width .35s cubic-bezier(.4, 0, .2, 1);
}

/* -------------------------------------------------------------------------- */
/* ⚠️ 1100px e centrado, a mesma medida do `.wine-detail-grid` do `/vinhos`:
   é a largura de conteúdo do site e é o que faz esta página pertencer ao
   mesmo conjunto. Era 640px, herdado do protótipo, que num ecrã largo deixava
   uma coluna estreita num campo vazio. */
.wz-envelope { max-width: 1100px; margin: 0 auto; padding: 20px 16px 64px; }

/* Cabeçalho no molde do `.section-head` do site (ver o `/provas`), agora sobre
   o creme da página — a fotografia saiu e com ela os textos claros. */
.wz-cabecalho { text-align: center; margin-bottom: 24px; max-width: 640px; }
.wz-cabecalho h1 {
  font-family: 'Playfair Display', 'Playfair Fallback', Georgia, serif;
  font-weight: 400;
  font-size: clamp(30px, 4vw, 44px);
  line-height: 1.15;
  color: var(--ink);
  margin: 0 0 16px;
}
.wz-cabecalho p { margin: 0; color: var(--stone); font-size: 15px; line-height: 1.7; }

/* --------------------------------------------------------------------------
   Um passo. Três estados: trancado, aberto, feito.
   -------------------------------------------------------------------------- */
.wz-passo {
  border: 1px solid var(--cream-dark);
  border-radius: 10px;
  background: #fff;
  margin-bottom: 10px;
  overflow: hidden;
  scroll-margin-top: calc(var(--barra) + 12px);
  transition: border-color .2s, box-shadow .2s, opacity .2s;
}
.wz-passo.aberto {
  border-color: var(--gold);
  box-shadow: 0 2px 16px rgba(168, 134, 70, .13);
}
.wz-passo.trancado { opacity: .45; }

/* Cabeçalho do passo: número + etiqueta + resumo. É <button> porque é
   clicável quando o passo já está feito — e um <div> clicável não chega ao
   teclado nem ao leitor de ecrã. */
.wz-passo-topo {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  background: none;
  border: 0;
  font: inherit;
  color: inherit;
  text-align: left;
  min-height: 56px;         /* alvo de toque confortável */
  cursor: default;
}
.wz-passo.feito .wz-passo-topo { cursor: pointer; }
.wz-passo.trancado .wz-passo-topo { pointer-events: none; }

.wz-num {
  flex: 0 0 26px;
  height: 26px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 13px;
  font-weight: 500;
  background: var(--cream-dark);
  color: var(--stone);
  transition: background .2s, color .2s;
}
.wz-passo.aberto .wz-num { background: var(--gold); color: #fff; }
.wz-passo.feito  .wz-num { background: var(--ok); color: #fff; }

.wz-rotulo { flex: 1; min-width: 0; }
.wz-rotulo b {
  display: block;
  font-weight: 500;
  font-size: 15px;
  color: var(--burgundy-deep);
}
.wz-resumo {
  display: block;
  font-size: 13px;
  color: var(--stone);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  margin-top: 1px;
}
/* Preço do item, no cabeçalho do passo do tipo. Lugar PRÓPRIO e não dentro da
   linha do resumo: assim é o nome que corta com reticências quando falta
   espaço, e o preço fica sempre inteiro. */
.wz-preco {
  flex: 0 0 auto;
  font-size: 14px;
  font-weight: 500;
  color: var(--burgundy-deep);
  white-space: nowrap;
  text-align: right;
  line-height: 1.25;
}
/* ⚠️ A unidade ("por pessoa", "/ noite") aparece SEMPRE. Esteve escondida
   abaixo dos 480px para poupar largura, e foi um erro: "€30" sozinho não diz se
   é por pessoa ou por noite, e a diferença entre as duas coisas é o preço todo.
   Num ecrã estreito passa para a linha de baixo — cabe sempre, e a informação
   não se perde. */
.wz-preco span {
  display: block;
  font-size: 11.5px;
  font-weight: 400;
  color: var(--stone);
}
@media (min-width: 420px) {
  .wz-preco span { display: inline; font-size: 12px; margin-left: 3px; }
}

.wz-alterar {
  flex: 0 0 auto;
  font-size: 13px;
  color: var(--gold);
  text-decoration: underline;
  display: none;
}
.wz-passo.feito .wz-alterar { display: block; }

/* Corpo: escondido com `hidden`, não com display:none no CSS, para o
   conteúdo não ficar acessível a leitores de ecrã quando está fechado. */
.wz-corpo { padding: 0 16px 18px; }
.wz-passo:not(.aberto) .wz-corpo { display: none; }

.wz-ajuda {
  font-size: 13.5px;
  color: var(--stone);
  margin: 0 0 14px;
  line-height: 1.55;
}

/* --------------------------------------------------------------------------
   Cartões de escolha (tipo de experiência, item do catálogo, horário)
   -------------------------------------------------------------------------- */
.wz-opcoes { display: grid; gap: 10px; }
.wz-opcao {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 14px;
  min-height: 60px;
  border: 1.5px solid var(--cream-dark);
  border-radius: 9px;
  background: #fff;
  font: inherit;
  color: inherit;
  text-align: left;
  cursor: pointer;
  transition: border-color .15s, background .15s, transform .08s;
}
.wz-opcao:active { transform: scale(.99); }
.wz-opcao:hover { border-color: var(--burgundy-light); }
.wz-opcao.escolhida {
  border-color: var(--gold);
  background: #FFFCF5;
  box-shadow: inset 0 0 0 1px var(--gold);
}
.wz-opcao-texto { flex: 1; min-width: 0; }
.wz-opcao-texto b { display: block; font-weight: 500; font-size: 15px; }
.wz-opcao-texto span { display: block; font-size: 13px; color: var(--stone); margin-top: 2px; }
.wz-opcao-preco {
  font-size: 16px; color: var(--burgundy-deep); white-space: nowrap;
  font-weight: 500; text-align: right; flex: 0 0 auto;
}
.wz-opcao-preco span {
  display: block; font-size: 11px; font-weight: 400;
  color: var(--stone); text-transform: none; letter-spacing: normal;
}
.wz-opcao i { font-size: 22px; color: var(--gold); flex: 0 0 auto; }
/* Provas: o que está incluído, por baixo do nome — para o cliente ver o que
   cada prova traz sem sair para /provas. Só as provas têm `includes`; com a
   lista o cartão fica alto, por isso o preço passa a alinhar ao topo. */
.wz-opcao.has-inc { align-items: flex-start; }
.wz-opcao-inc { list-style: none; margin: 8px 0 0; padding: 0; }
.wz-opcao-inc li {
  font-size: 12px;
  color: var(--stone);
  line-height: 1.5;
  padding-left: 16px;
  position: relative;
}
.wz-opcao-inc li::before {
  content: "✓";
  position: absolute;
  left: 0;
  top: 0;
  color: var(--gold);
  font-size: 10px;
}
/* O mesmo lembrete no resumo ENCOLHIDO do passo (por baixo de "Prova Essencial
   €30"), enquanto se preenchem os outros passos. Escondido quando o passo está
   aberto — aí a lista já aparece na própria escolha. */
.wz-resumo-inc { padding: 0 14px 14px 52px; }
.wz-resumo-inc ul { list-style: none; margin: 0; padding: 0; }
.wz-resumo-inc li {
  font-size: 12px;
  color: var(--stone);
  line-height: 1.5;
  padding-left: 16px;
  position: relative;
}
.wz-resumo-inc li::before {
  content: "✓";
  position: absolute;
  left: 0;
  top: 0;
  color: var(--gold);
  font-size: 10px;
}
.wz-vermais {
  margin: 6px 0 0 16px;
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  font-size: 12px;
  color: var(--burgundy);
  text-decoration: underline;
  cursor: pointer;
}
.wz-vermais:hover { color: var(--burgundy-deep); }
.wz-passo.aberto .wz-resumo-inc { display: none; }

/* Horários: grelha de dois, que num telemóvel é o que cabe sem apertar. */
.wz-horas { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.wz-hora {
  padding: 15px 8px;
  min-height: 54px;
  border: 1.5px solid var(--cream-dark);
  border-radius: 9px;
  background: #fff;
  font: inherit;
  /* ⚠️ `color: inherit` NÃO é enfeite: sem cor explícita, o iOS/Safari pinta o
     texto de um `<button>` com o AZUL do sistema (o tint dos controlos). No
     desktop saía preto (herança da UA) e ninguém dava por nada; no iPhone as
     horas apareciam azuis. Todos os outros botões do wizard já fixam a cor
     (`.wz-opcao` com `inherit`, contadores/sugestões com `--burgundy-deep`) —
     este tinha ficado para trás. Mesmo padrão do `.wz-opcao`. */
  color: inherit;
  font-size: 16px;
  cursor: pointer;
  transition: border-color .15s, background .15s;
}
.wz-hora.escolhida { border-color: var(--gold); background: #FFFCF5; box-shadow: inset 0 0 0 1px var(--gold); }
.wz-hora[disabled] {
  opacity: .4;
  cursor: not-allowed;
  text-decoration: line-through;
  text-decoration-color: var(--stone);
}

/* Avisos que ficam sempre à vista (línguas das provas, sujeito a confirmação) */
/* Avisos permanentes — texto corrido no cabeçalho, sobre a fotografia. Foram
   caixas com ícone enquanto viviam dentro do painel; passaram para cá inteiros
   e a caixa deixou de fazer sentido. */
.wz-avisos { margin: 16px auto 0; max-width: 60ch; }
.wz-avisos p {
  margin: 0 0 7px;
  font-size: 14px;
  line-height: 1.65;
  color: var(--stone);
  opacity: .85;
  /* Justificado, por pedido do dono. ⚠️ O `hyphens` vai junto e não é enfeite:
     sem ele, uma palavra longa numa coluna estreita ("confirmação",
     "respondemos") empurra o resto da linha e abre rios brancos no meio do
     texto. Com hifenização o browser parte a palavra e as linhas fecham. O
     dicionário é escolhido pelo `lang` do `<html>`, que o middleware já troca
     por idioma — funciona nos cinco sem mais nada. */
  text-align: justify;
  -webkit-hyphens: auto;
  hyphens: auto;
}
.wz-avisos p:last-child { margin-bottom: 0; }


/* Confirmação por palavras do que ficou escolhido no calendário */
.wz-escolhido {
  display: flex; align-items: flex-start; gap: 9px;
  margin-top: 12px; padding: 11px 13px;
  background: #F1F6EC; border-left: 3px solid var(--ok); border-radius: 0 8px 8px 0;
  font-size: 14px; line-height: 1.45;
}
.wz-escolhido i { color: var(--ok); font-size: 18px; flex: 0 0 auto; margin-top: 1px; }
/* ⚠️ `display:flex` num elemento com o atributo `hidden` GANHA ao `display:none`
   que o browser aplica — a caixa aparecia vazia antes de haver data escolhida.
   Vale para qualquer regra de display neste ficheiro, por isso a regra é geral.
   Erro clássico e silencioso: o atributo continua lá, só não faz nada. */
[hidden] { display: none !important; }
.wz-escolhido b { font-weight: 600; }

/* Passo 1 quando vem decidido da página anterior */
.wz-fixo {
  display: flex; align-items: center; gap: 12px;
  padding: 14px; border: 1.5px solid var(--cream-dark);
  border-radius: 9px; background: #FBF8F1;
}
.wz-fixo i { font-size: 22px; color: var(--gold); flex: 0 0 auto; }
.wz-fixo > span { display: block; min-width: 0; flex: 1; }
.wz-fixo b { display: block; font-weight: 500; font-size: 15px; color: var(--burgundy-deep); }
.wz-fixo span span { display: block; font-size: 13px; color: var(--stone); margin-top: 2px; }
.wz-passo.fixo .wz-alterar { display: none; }
.wz-passo.fixo .wz-passo-topo { cursor: default; }
/* ⚠️ Um <button disabled> herda o cinzento do browser. Aqui o botão está
   desactivado por não haver nada a decidir — não por estar indisponível — e
   tem de continuar a ler-se como uma linha normal e já resolvida. */
.wz-passo.fixo .wz-passo-topo[disabled] { color: inherit; opacity: 1; }

/* Dica do telefone (vem do phone.js, partilhada com os formulários reais) */
.wz-campo .phone-hint {
  display: block; font-size: 12.5px; color: var(--stone);
  margin-top: 6px; line-height: 1.45;
}
/* ⚠️ Com erro, a dica DESAPARECE — não fica vermelha ao lado dele. As duas
   diziam a mesma coisa por outras palavras ("escreva com indicativo" +
   "falta o indicativo"), e duas linhas vermelhas encostadas leem-se como
   dois problemas. Fica só a mensagem específica, que é mais precisa; a dica
   volta assim que o campo fique válido ou vazio. */
.wz-campo.mau .phone-hint { display: none; }

/* Aviso de última hora (prova para hoje): explica em vez de riscar o dia */
.wz-ultima {
  margin-top: 14px; padding: 14px;
  background: #FFF8E8; border-left: 3px solid var(--gold); border-radius: 0 8px 8px 0;
}
.wz-ultima strong { display: block; color: var(--burgundy-deep); margin-bottom: 4px; }
.wz-ultima p { margin: 0 0 10px; font-size: 13.5px; line-height: 1.55; color: var(--stone); }
.wz-ultima-accoes { display: flex; flex-wrap: wrap; gap: 8px; }
.wz-ultima-accoes a {
  flex: 1 1 auto; text-align: center; min-height: 46px;
  display: flex; align-items: center; justify-content: center;
  padding: 10px 16px; border-radius: 8px;
  background: var(--gold); color: #fff; text-decoration: none; font-size: 15px;
}
.wz-ultima-accoes a:last-child { background: #fff; color: var(--burgundy-deep); border: 1.5px solid var(--cream-dark); }

/* --------------------------------------------------------------------------
   Contador de pessoas — botões grandes em vez de <input type=number>.
   O spinner nativo é minúsculo no telemóvel e abre o teclado numérico por
   engano; isto resolve-se com dois alvos de 52px.
   -------------------------------------------------------------------------- */
.wz-contadores { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.wz-contador-bloco {
  border: 1px solid var(--cream-dark); border-radius: 9px;
  padding: 10px 6px 12px; text-align: center; background: #fff;
}
.wz-contador-rotulo {
  display: block; font-size: 12px; letter-spacing: .06em;
  text-transform: uppercase; color: var(--stone); margin-bottom: 2px;
}
.wz-idades-grelha { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 10px; }
.wz-idade { display: block; }
.wz-idade span {
  display: block; font-size: 12px; color: var(--stone); margin-bottom: 4px;
}
.wz-idade input {
  width: 100%; padding: 12px 10px; font: inherit; font-size: 16px;
  text-align: center; border: 1.5px solid var(--cream-dark);
  border-radius: 8px; background: #fff; color: var(--ink);
}
.wz-idade input:focus { outline: none; border-color: var(--gold); box-shadow: 0 0 0 3px rgba(168,134,70,.15); }
.wz-idade.mau input { border-color: var(--erro); }

.wz-contador {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;              /* dois contadores lado a lado num ecrã de 375px */
  padding: 4px 0 0;
}
.wz-contador button {
  width: 46px;           /* 46+46+valor cabe em meia largura de telemóvel */
  height: 46px;
  border-radius: 50%;
  border: 1.5px solid var(--cream-dark);
  background: #fff;
  font-size: 24px;
  line-height: 1;
  color: var(--burgundy-deep);
  cursor: pointer;
  transition: border-color .15s, background .15s;
}
.wz-contador button:hover:not([disabled]) { border-color: var(--gold); }
.wz-contador button[disabled] { opacity: .35; cursor: not-allowed; }
.wz-contador-valor {
  /* ⚠️ 21px, não 30. Em Playfair, entre dois botões redondos de 46px, o 30
     ficava maior do que o próprio título do passo e puxava o olho para o
     número em vez de para os botões, que são o que se usa. */
  font-family: 'Playfair Display', 'Playfair Fallback', Georgia, serif;
  font-size: 21px;
  min-width: 34px;
  text-align: center;
  color: var(--burgundy-deep);
  font-variant-numeric: tabular-nums;
}

/* --------------------------------------------------------------------------
   Campos
   -------------------------------------------------------------------------- */
.wz-campo { margin-bottom: 14px; }
.wz-campo > label {
  display: block;
  font-size: 12px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--stone);
  margin-bottom: 5px;
}
.wz-campo input[type=text],
.wz-campo input[type=email],
.wz-campo input[type=tel],
.wz-campo select,
.wz-campo textarea {
  width: 100%;
  padding: 13px 14px;
  font: inherit;
  font-size: 16px;          /* ver nota do body: 16px trava o zoom do iOS */
  border: 1.5px solid var(--cream-dark);
  border-radius: 8px;
  background: #fff;
  color: var(--ink);
}
.wz-campo textarea { resize: vertical; min-height: 92px; }
.wz-campo input:focus, .wz-campo select:focus, .wz-campo textarea:focus {
  outline: none;
  border-color: var(--gold);
  box-shadow: 0 0 0 3px rgba(168, 134, 70, .15);
}
.wz-campo.mau input, .wz-campo.mau textarea { border-color: var(--erro); }
.wz-campo.bom  input { border-color: var(--ok); }
.wz-erro { display: none; font-size: 13px; color: var(--erro); margin-top: 5px; }
.wz-campo.mau .wz-erro { display: block; }

/* Telefone: indicativo + número. `minmax(0,…)` para o select não empurrar. */
.wz-tel { display: grid; grid-template-columns: 104px minmax(0, 1fr); gap: 8px; }
.wz-tel select {
  padding: 13px 8px;
  font: inherit;
  font-size: 16px;
  border: 1.5px solid var(--cream-dark);
  border-radius: 8px;
  background: #fff;
  color: var(--ink);
}

/* Escolhas múltiplas (como prefere ser contactado) — linha inteira clicável */
.wz-caixas { display: grid; gap: 9px; }
.wz-caixa {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 13px 14px;
  min-height: 54px;
  border: 1.5px solid var(--cream-dark);
  border-radius: 9px;
  cursor: pointer;
  transition: border-color .15s, background .15s;
}
.wz-caixa.ligada { border-color: var(--gold); background: #FFFCF5; }
.wz-caixa input { width: 20px; height: 20px; accent-color: var(--gold); flex: 0 0 auto; }
.wz-caixa i { font-size: 19px; color: var(--gold); }
/* ⚠️ A etiqueta não tinha tamanho nenhum e herdava os 16px do `body` — ficava
   MAIOR do que o título do próprio passo (15px) e do que qualquer outra opção
   do formulário. 15px é a medida das opções do passo 1 (`.wz-opcao-texto b`),
   que é o que estas são. */
.wz-caixa span { font-size: 15px; }

/* --------------------------------------------------------------------------
   Botões de avanço
   -------------------------------------------------------------------------- */
.wz-accoes { display: flex; flex-direction: column; gap: 8px; margin-top: 16px; }
.wz-btn {
  width: 100%;
  padding: 15px;
  min-height: 52px;
  border: 0;
  border-radius: 8px;
  font: inherit;
  font-size: 16px;
  font-weight: 500;
  cursor: pointer;
  transition: background .15s, opacity .15s;
}
.wz-btn-principal { background: var(--gold); color: #fff; }
.wz-btn-principal:hover:not([disabled]) { background: var(--burgundy-deep); }
.wz-btn-principal[disabled] { opacity: .4; cursor: not-allowed; }
.wz-btn-fantasma { background: none; color: var(--stone); text-decoration: underline; min-height: 44px; padding: 10px; }

/* --------------------------------------------------------------------------
   Revisão
   -------------------------------------------------------------------------- */
.wz-revisao { border: 1px solid var(--cream-dark); border-radius: 9px; overflow: hidden; }

/* ⚠️ No telemóvel a linha EMPILHA: etiqueta + "alterar" em cima, valor em
   baixo a toda a largura. Em três colunas a 375px o valor ficava com ~130px e
   partia palavras a meio ("email@marc / iomorais.pt"), e o botão "alterar"
   ficava com 28px de altura — medido — quando o mínimo decente para um dedo
   são 44. Empilhar resolve as duas coisas de uma vez. */
.wz-revisao-linha {
  display: grid;
  grid-template-columns: 1fr;
  align-items: center;
  gap: 2px 10px;
  padding: 8px 14px 12px;
  border-bottom: 1px solid var(--cream);
  font-size: 15px;
}
.wz-revisao-linha:last-child { border-bottom: 0; }
.wz-revisao-linha dt {
  grid-column: 1; color: var(--stone); font-size: 12px; margin: 0;
  letter-spacing: .05em; text-transform: uppercase;
}
.wz-revisao-linha dd {
  grid-column: 1 / -1; grid-row: 2; margin: 0; min-width: 0;
  overflow-wrap: anywhere; line-height: 1.4;
}
.wz-revisao-linha button {
  grid-column: 2; grid-row: 1 / span 2;
  align-self: center;
  background: none; border: 0; font: inherit; font-size: 13px;
  color: var(--gold); text-decoration: underline; cursor: pointer;
  min-height: 44px; min-width: 56px; padding: 0 4px;   /* alvo de dedo */
}
.wz-consent {
  display: flex; align-items: flex-start; gap: 10px;
  margin-top: 16px; font-size: 13.5px; line-height: 1.5; cursor: pointer;
}
.wz-consent input { width: 20px; height: 20px; margin-top: 1px; accent-color: var(--gold); flex: 0 0 auto; }

/* --------------------------------------------------------------------------
   Calendário — herda o `.dp-*` do date-picker.js, com tamanho de dedo.
   -------------------------------------------------------------------------- */
/* ⚠️ Calendário compacto (pedido do dono). O que encolhe é a ALTURA das
   células, não a largura — sete colunas têm de continuar a caber, e num ecrã
   de 360px cada uma fica com ~44px de largura. Passa de `aspect-ratio: 1`
   (quadrado, ~44px de alto) para uma altura fixa de 34px: 6 linhas × 10px
   poupados = ~60px menos, sem descer do mínimo de toque em nenhuma direcção
   útil (o alvo continua a ter 44px de largura). */
/* ⚠️ SEM tecto de largura: o calendário estica até à medida do corpo do passo.
   Tinha `max-width: 340px`, do tempo em que a coluna toda media 640px — num
   cartão de 1100 ficava um quadradinho encostado à esquerda. */
.wz-cal { border: 1px solid var(--cream-dark); border-radius: 9px; padding: 8px; background: #fff; }
.wz-cal .dp-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.wz-cal .dp-nav {
  width: 36px; height: 36px; border: 0; background: none;
  font-size: 20px; color: var(--burgundy-deep); cursor: pointer; border-radius: 6px;
}
.wz-cal .dp-nav:hover { background: var(--cream); }
.wz-cal .dp-nav[disabled] { opacity: .3; cursor: not-allowed; }
/* ⚠️ `.dp-title`, não `.dp-month`: o date-picker.js emite `<span class="dp-title">`
   e esta regra dizia `.dp-month` — o nome do mês esteve sem estilo nenhum desde
   que a página nasceu (o `.dp-month` é agora o BLOCO de um mês). */
/* ⚠️ SEM `text-transform: capitalize`: o título vem do `toLocaleDateString` e
   o próprio picker já lhe levanta a primeira letra. O `capitalize` levantava
   TODAS — "Agosto De 2026", e em francês "Août De 2026". Passou despercebido
   enquanto a regra tinha o selector errado. */
.wz-cal .dp-title { font-weight: 500; font-size: 14px; color: var(--burgundy-deep); }
/* Onde não há seta fica o vazio do mesmo tamanho, para o título ficar ao centro. */
.wz-cal .dp-nav-vazio { visibility: hidden; }
/* Um mês por linha; dois lado a lado só no ecrã largo (ver o fim do ficheiro). */
.wz-cal .dp-months { display: grid; gap: 20px; }
.wz-cal .dp-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.wz-cal .dp-dow { text-align: center; font-size: 10px; color: var(--stone); padding: 2px 0; text-transform: uppercase; }
.wz-cal .dp-cell {
  height: 34px;
  display: grid; place-items: center;
  border: 0; background: none; font: inherit; font-size: 14px;
  color: var(--ink); border-radius: 6px; cursor: pointer;
}
/* ⚠️ `hover` só onde há rato. Num telemóvel o estado fica AGARRADO à célula
   depois do toque, e lê-se como um segundo dia escolhido — é meio caminho
   para o "parece um bug". */
@media (hover: hover) {
  .wz-cal .dp-cell:hover:not([disabled]) { background: var(--cream); }
}
.wz-cal .dp-cell[disabled] { color: #C9C4BA; cursor: not-allowed; text-decoration: line-through; }
.wz-cal .dp-cell.dp-sel {
  /* ⚠️ Era `--gold` (#A88646), um castanho claro que num quadrado pequeno se
     lia como "meio-ligado" e não como "é este". Escuro + negrito + anel não
     deixa dúvida. */
  background: var(--burgundy-deep);
  color: #fff;
  font-weight: 600;
  box-shadow: 0 0 0 2px var(--gold-light);
}
.wz-cal .dp-pad { visibility: hidden; }
/* Fundo verde = dia DISPONÍVEL, o mesmo sinal dos chips das «Próximas datas
   disponíveis» do /provas. Só nos BOTÕES de dia (as células de padding são
   divs), e não sobre o seleccionado nem sobre o dp-alt. */
.wz-cal button.dp-cell:not([disabled]):not(.dp-alt):not(.dp-sel) { background: rgba(46, 160, 95, 0.16); }
@media (hover: hover) {
  .wz-cal button.dp-cell:not([disabled]):not(.dp-alt):not(.dp-sel):hover { background: rgba(46, 160, 95, 0.30); }
}
/* Dia em que a prova escolhida NÃO se realiza mas OUTRA serve: fundo VERDE
   (como um dia livre) + um ícone de aviso ⚠️ no canto — clicável (sugere
   trocar de prova), sem o riscado do dp-off. O ⚠️ é o que o distingue de um
   dia normal (pedido do dono, 2026-09-10: verde com aviso, não âmbar). */
.wz-cal button.dp-cell.dp-alt {
  background: rgba(46, 160, 95, 0.16); color: var(--ink);
  cursor: pointer; text-decoration: none; font-weight: 500;
  position: relative;
}
/* ⚠️ é um emoji (o site público não tem a webfont Tabler — os `ti-*` são SVG
   via icons.js e não servem em `content:`). Sem círculo de fundo: o emoji já é
   o símbolo completo. */
.wz-cal button.dp-cell.dp-alt::after {
  content: "⚠️";
  position: absolute; top: 1px; right: 2px;
  font-size: 11px; line-height: 1;
  pointer-events: none;
}
/* Dia que só abre para GRUPOS de 4+ (esta prova): em vez do ⚠️, um selo «4+»
   (mesmo conceito do chip das «Próximas datas disponíveis» do /provas). */
.wz-cal button.dp-cell.dp-alt-grupo::after {
  content: "4+";
  top: 2px; right: 2px;
  background: var(--ok); color: #fff;
  font-size: 8px; font-weight: 700; line-height: 1;
  padding: 1px 3px; border-radius: 6px;
}
@media (hover: hover) {
  .wz-cal button.dp-cell.dp-alt:hover { background: rgba(46, 160, 95, 0.30); }
}

/* Sugestão de trocar de prova (aparece ao clicar um dia verde com aviso ⚠️). */
.wz-outro-tipo {
  margin-top: 14px; padding: 14px 16px;
  background: rgba(214, 158, 46, 0.12);
  border: 1px solid rgba(214, 158, 46, 0.40);
  border-radius: 10px;
}
.wz-outro-tipo p { margin: 0 0 10px; font-size: 14px; color: var(--ink); display: flex; gap: 8px; align-items: baseline; }
.wz-outro-tipo p i { color: var(--gold); flex: none; }
.wz-outro-tipo-botoes { display: flex; flex-wrap: wrap; gap: 8px; }
/* Bloco do grupo (dia aberto por grupo): a pergunta Sim/Não.
   ⚠️ A pergunta fica na SUA linha, indentada 8px para alinhar com o TEXTO da
   intro acima. O `<p>` da intro é `display:flex; gap:8px` com um `<i>` de ícone
   à frente — MAS o `ti-info-circle` NÃO existe no conjunto curado do `icons.js`,
   por isso renderiza a 0px e o texto fica indentado só pelo `gap` (8px), não por
   ícone(1em)+gap. É por isso que são 8px e não 22px — medido em produção
   (introLeft 58 == labelLeft 58). Se algum dia o ícone passar a existir, subir
   para 22px. Os botões descem para a linha seguinte (o label ocupa 100%). ⚠️ O
   `.wz-btn` base é `width:100%`: repõe-se `width:auto`, senão enchiam a largura. */
.wz-grupo { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; margin: 8px 0 2px; padding-left: 8px; }
.wz-grupo-label { flex: 1 1 100%; margin: 0; font-size: 14px; color: var(--ink); }
.wz-grupo .wz-btn { width: auto; flex: 0 0 auto; min-width: 84px; min-height: 40px; padding: 8px 22px; font-size: 14px; }
/* Sim = verde, Não = vermelho (pedido do dono). Texto branco. */
.wz-grupo .wz-btn-sim { background: var(--ok); color: #fff; border-color: var(--ok); }
.wz-grupo .wz-btn-nao { background: var(--erro); color: #fff; border-color: var(--erro); }
.wz-grupo .wz-btn-sim:hover, .wz-grupo .wz-btn-nao:hover { filter: brightness(0.93); }
.wz-grupo .wz-btn-nao[disabled] { opacity: .5; cursor: default; filter: none; }
#wzGrupoOutras { margin-top: 12px; }
/* Aviso no passo «Pessoas» quando o dia só abre por grupo (o total não desce <4). */
.wz-grupo-exige { margin: 12px 0 0; font-size: 12.5px; color: var(--stone); }
.wz-outro-tipo-btn {
  display: inline-flex; align-items: center; gap: 10px; padding: 9px 14px;
  background: #fff; border: 1px solid var(--gold); color: var(--burgundy-deep);
  border-radius: 8px; cursor: pointer; font: inherit; font-size: 13px;
}
.wz-outro-tipo-nome { font-weight: 600; }
.wz-outro-tipo-preco { font-weight: 500; white-space: nowrap; }
/* `small` = a unidade ("por pessoa"): herda a cor (fica branca no hover) e só
   se distingue por opacidade, para não ficar invisível sobre o bordô do hover. */
.wz-outro-tipo-preco small { font-weight: 400; font-size: 11px; opacity: 0.7; }
.wz-outro-tipo-btn i { font-size: 14px; margin-left: 2px; }
@media (hover: hover) {
  .wz-outro-tipo-btn:hover { background: var(--burgundy-deep); color: #fff; border-color: var(--burgundy-deep); }
}



/* --------------------------------------------------------------------------
   A partir daqui há espaço — e só a partir daqui.
   -------------------------------------------------------------------------- */
@media (min-width: 560px) {
  .wz-revisao-linha { grid-template-columns: 34% 1fr; align-items: baseline; padding: 11px 14px; }
  .wz-revisao-linha dt { grid-column: 1; grid-row: 1; }
  .wz-revisao-linha dd { grid-column: 2; grid-row: 1; }

  .wz-horas { grid-template-columns: repeat(4, 1fr); }
  .wz-accoes { flex-direction: row-reverse; justify-content: flex-start; }
  .wz-btn { width: auto; min-width: 170px; }
  .wz-btn-fantasma { min-width: 0; }
}

/* Quem pediu menos movimento não leva movimento nenhum. */
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}

/* --------------------------------------------------------------------------
   A página dentro do site
   -------------------------------------------------------------------------- */
body.pg-reservar main, body.pg-checkout main {
  /* A `nav` é `absolute` e saiu do fluxo — sem esta folga o primeiro elemento
     nascia por baixo dela. ⚠️ Com `class="solid"` a barra mede **100px**
     (12 + 76 do logótipo + 12); sem ela mediria 132, porque o logótipo só
     encolhe de 100 para 76 nos estados `solid`/`scrolled`. Mudar a classe no
     HTML obriga a mexer neste número. */
  padding-top: 100px;
}

/* --------------------------------------------------------------------------
   Ecrã de sucesso. SUBSTITUI o formulário em vez de aparecer por cima dele:
   numa página não há nada a fazer ao formulário depois de enviado, e deixá-lo
   preenchido por baixo de um modal só convida a um segundo envio.
   -------------------------------------------------------------------------- */
.wz-feito {
  text-align: center;
  padding: 40px 20px 8px;
}
.wz-feito-marca {
  width: 60px;
  height: 60px;
  margin: 0 auto 18px;
  border-radius: 50%;
  background: var(--ok);
  color: #fff;
  display: grid;
  place-items: center;
  font-size: 30px;
}
.wz-feito h2 {
  font-family: 'Playfair Display', 'Playfair Fallback', Georgia, serif;
  font-size: 27px;
  font-weight: 400;
  color: var(--burgundy-deep);
  margin: 0 0 12px;
}
.wz-feito p {
  margin: 0 auto 12px;
  max-width: 38em;
  color: var(--stone);
  font-size: 15px;
  line-height: 1.6;
}
.wz-feito-nota {
  font-size: 13.5px !important;
  padding-top: 4px;
  border-top: 1px solid var(--cream-dark);
  margin-top: 20px !important;
}
.wz-feito .wz-btn {
  display: inline-flex;
  margin-top: 22px;
  text-decoration: none;
  padding-left: 28px;
  padding-right: 28px;
}

@media (min-width: 700px) {
  /* O `.section-head` traz 70px de margem em baixo; aqui o formulário vem logo
     a seguir e 34px chegam. */
  .wz-cabecalho { margin: 0 auto 34px; padding-top: 12px; }
  /* Células mais altas: esticado a 660px cada coluna fica com ~92px, e a 34px
     de altura as casas ficavam tiras. */
  .wz-cal .dp-cell { height: 44px; }
  .wz-cal { padding: 12px; }
  /* ⚠️ O CARTÃO é largo; o formulário lá dentro não pode ser. Sem este tecto, o
     corpo de um passo ficava com 966px: o calendário encostado à esquerda e o
     botão "Continuar" a 900px de distância, com um vazio no meio. A linha do
     cabeçalho de cada passo continua a atravessar o cartão todo — é ela que dá
     a largura; o conteúdo é que se lê a uma medida humana. */
  .wz-corpo { max-width: 660px; }
}

/* --------------------------------------------------------------------------
   ECRÃ LARGO — o conteúdo do passo ocupa o cartão todo.

   ⚠️ Isto DESFAZ o `max-width: 660px` do bloco de 700px acima, e a razão de
   ser dele continua verdadeira: um campo de texto de mil pixéis não se lê
   melhor. O que muda é o modo de gastar a largura — não se estica cada
   controlo, **põem-se mais colunas**: as opções duas ou três a par, as horas
   numa fila só, os três campos de contacto lado a lado. Assim o formulário
   acaba onde o cartão acaba, sem ficar nada com uma medida desumana.
   -------------------------------------------------------------------------- */
@media (min-width: 900px) {
  .wz-corpo { max-width: none; }

  /* Três a par a 1100px, duas a 900. O `auto-fit` é que decide — uma lista de
     quatro provas não tem de saber em quantas colunas cabe. */
  .wz-opcoes { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }

  /* Os horários do dia numa fila só: cinco ou seis botões, todos à vista. */
  .wz-horas { grid-template-columns: repeat(auto-fit, minmax(132px, 1fr)); }

  /* Email · WhatsApp · Telefone lado a lado. Empilhadas, cada uma ficava com
     mil pixéis de linha para uma palavra e uma caixa de visto na ponta. */
  .wz-caixas { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }

  /* Nome, email e telefone lado a lado. O `gap` é só horizontal — o vertical
     continua a ser a margem do `.wz-campo`, para o caso de partirem em duas
     linhas. */
  .wz-campos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 16px; }

  /* O calendário mostra DOIS meses (ver date-picker.js): cada grelha fica com
     ~500px, sete colunas de ~70 — a mesma proporção do telemóvel, sem casas
     de 142px com um número perdido lá dentro. */
  .wz-cal .dp-months { grid-template-columns: 1fr 1fr; gap: 26px; }

  /* A etiqueta da revisão não tem de crescer com o cartão: a 34% ficava com
     357px para dizer "Telefone". */
  .wz-revisao-linha { grid-template-columns: 260px 1fr; }
}

/* --------------------------------------------------------------------------
   As cinco estrelas do ecrã de sucesso (assets/js/rating.js).
   ⚠️ O input é um RADIO a sério, só escondido — é ele que dá a navegação pelas
   setas, o estado ao leitor de ecrã e o foco. A estrela é o `::before` do
   rótulo. Esconder com `display:none` tirava-o da ordem de tabulação e do
   leitor; por isso vai com a técnica do `sr-only`.
   -------------------------------------------------------------------------- */
.rt-caixa { margin: 26px auto 0; padding-top: 20px; border-top: 1px solid var(--cream-dark); max-width: 30em; }
.rt-grupo { border: 0; margin: 0; padding: 0; }
.rt-pergunta {
  display: block; width: 100%; padding: 0; text-align: center;
  font-size: 14.5px; color: var(--stone); margin-bottom: 10px; line-height: 1.5;
}
/* ⚠️ `direction: rtl` com a ordem visual invertida: é o que permite acender as
   estrelas à ESQUERDA da que está sob o rato usando só `~`, que em CSS só
   olha para a frente. Sem isto era preciso JS para uma coisa que é hover. */
.rt-estrelas { display: flex; flex-direction: row-reverse; justify-content: center; gap: 4px; }
/* ⚠️ O site não tem `.sr-only` — usei-a por hábito e não existia. Fica com
   nome próprio, para não reclamar um nome global a partir do CSS de uma
   página. Esconde do ecrã sem esconder do leitor nem da tabulação, que é o
   que o `display: none` faria. */
.rt-radio, .rt-sr {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.rt-estrela {
  cursor: pointer; font-size: 30px; line-height: 1; color: var(--cream-dark);
  padding: 2px 3px; transition: color .12s, transform .08s;
}
.rt-estrela::before { content: "\2605"; }        /* ★ — sem depender do icons.js */
.rt-estrela:hover, .rt-estrela:hover ~ .rt-estrela,
.rt-radio:checked, .rt-radio:checked ~ .rt-estrela { color: var(--gold); }
.rt-radio:checked + .rt-estrela, .rt-radio:checked + .rt-estrela ~ .rt-estrela { color: var(--gold); }
.rt-estrela:active { transform: scale(.9); }
/* O foco tem de se ver: o input está escondido, por isso o anel vai no rótulo. */
.rt-radio:focus-visible + .rt-estrela { outline: 2px solid var(--gold); outline-offset: 2px; border-radius: 4px; }
/* Depois de dada, a nota fica à vista mas deixa de responder ao rato. */
.rt-feito .rt-estrela { cursor: default; pointer-events: none; }
.rt-feito .rt-pergunta { color: var(--vine, #3B6D11); }
@media (prefers-reduced-motion: reduce) { .rt-estrela { transition: none; } }

/* --------------------------------------------------------------------------
   Checkout `/finalizar-compra` — reutiliza tudo o que está acima (barra,
   painel, `.wz-campo`, `.wz-caixa`, `.wz-btn`, `.wz-revisao`, `.wz-feito`).
   Só o resumo da encomenda e os estados neutros precisam de acréscimos.
   -------------------------------------------------------------------------- */
.co-resumo { margin-bottom: 22px; }
.co-resumo .co-qtd { color: var(--stone); font-weight: 400; }
/* O subtotal destaca-se das linhas de artigo. Especificidade explícita para
   ganhar ao `.wz-revisao-linha dt/dd` de cima na mesma cascata. */
.wz-revisao-linha.co-subtotal dt,
.wz-revisao-linha.co-subtotal dd {
  font-weight: 600;
  color: var(--burgundy-deep);
  font-size: 16px;
}
.co-shipnote {
  margin: 8px 2px 0;
  font-size: 13px;
  color: var(--stone);
  line-height: 1.5;
}
.co-nota { margin-top: 18px; }
/* Estados "vazio" / "loja fechada": reutilizam o `.wz-feito`, mas o círculo
   verde é de SUCESSO — aqui não há sucesso nenhum, por isso fica neutro. */
.co-estado-marca { background: var(--cream-dark); color: var(--burgundy-deep); }

/* --------------------------------------------------------------------------
   Indicador de espera gráfico (spinner + mensagem) — ver `loaderHTML` no
   reservar.js. Estados de carregamento do wizard ("A validar disponibilidade…").
   -------------------------------------------------------------------------- */
.wz-loader {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 14px; padding: 34px 16px; text-align: center;
}
.wz-spinner {
  width: 34px; height: 34px; flex: none; border-radius: 50%;
  border: 3px solid var(--cream-dark);
  border-top-color: var(--gold);
  animation: wz-spin 0.8s linear infinite;
}
.wz-loader p { margin: 0; color: var(--stone); font-size: 14px; }
@keyframes wz-spin { to { transform: rotate(360deg); } }
/* Movimento reduzido: em vez de rodar, o spinner pulsa em opacidade — mantém o
   sinal de "a trabalhar" sem rotação. */
@media (prefers-reduced-motion: reduce) {
  .wz-spinner { animation: wz-pulse 1.4s ease-in-out infinite; }
}
@keyframes wz-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } }