/* ═══════════════════════════════════════════════════════════════════
   Formulário de pedido (pom_contact_form) — v9, 2026-11-03
   Só é carregado na página de terraços. Tudo dentro de .pom-form-wrap.
   Regras: etiqueta fixa por cima do campo; exemplo por baixo da etiqueta;
   uma coluna; campos de 52 px e letra de 16 px (o iOS não amplia);
   foco azul do logótipo; erro vermelho com ícone e texto; amarelo só no botão de envio.
   ═══════════════════════════════════════════════════════════════════ */

.pom-form-wrap {
  /* valores: css/ds/tokens.css (DS v1); --pf-* = pseudónimos. Só o texto e o fundo azul ainda são próprios (etapa 2). */
  --pf-ink: var(--pom-color-ink);
  --pf-text: #3d3a3a;
  --pf-mute: var(--pom-color-text-muted);
  --pf-line: var(--pom-color-line-control);  /* contorno dos campos: 3,6:1 (WCAG 1.4.11) */
  --pf-line-soft: var(--pom-color-line);
  --pf-blue: var(--pom-color-accent);        /* foco e seleção (linhas) */
  --pf-blue-txt: var(--pom-color-accent-text);
  --pf-blue-bg: var(--pom-color-accent-soft);
  --pf-err: var(--pom-color-danger);
  --pf-err-bg: var(--pom-color-danger-soft);
  --pf-yellow: var(--pom-color-cta);
  --pf-yellow-d: var(--pom-color-cta-hover);
  --pf-r: var(--pom-radius-m);
  --pf-h: 52px;
  --pf-ease: var(--pom-ease);
  --pf-font: var(--tc-font-b, Roboto, system-ui, sans-serif);
  --pf-font-h: var(--tc-font-h, Raleway, sans-serif);
  font-family: var(--pf-font);
  color: var(--pf-ink);
}
.pom-form-wrap *, .pom-form-wrap *::before, .pom-form-wrap *::after { box-sizing: border-box; }
.pom-form-wrap .pom-form { margin: 0; padding: 0; }
.pom-form-wrap fieldset { margin: 0; padding: 0; border: 0; min-width: 0; }
.pom-form-wrap legend { padding: 0; }

/* ── Grupos e etiquetas ─────────────────────────────────────────────── */
.pom-form-wrap .pom-group { margin: 0 0 32px; }
.pom-form-wrap .pom-group .pom-group { margin: 0 0 24px; }
.pom-form-wrap .pom-q { margin: 0 0 20px; }
.pom-form-wrap .pom-q--g { margin-bottom: 32px; }
.pom-form-wrap .pom-label--s { font-weight: 500; }
.pom-form-wrap .pom-hint--strong { color: var(--pf-ink); font-weight: 500; }
.pom-form-wrap .pom-q:last-child { margin-bottom: 0; }
.pom-form-wrap .pom-legend, .pom-form-wrap .pom-label {
  display: block; margin: 0 0 6px;
  font: 600 16px/1.35 var(--pf-font); color: var(--pf-ink);
  text-transform: none; letter-spacing: 0;
}
.pom-form-wrap .pom-legend--l { margin-bottom: 12px; font: 700 18px/1.3 var(--pf-font-h); }
.pom-form-wrap .pom-group--contacto > .pom-legend--l, .pom-form-wrap .pom-group--contacto > .pom-hint { margin-bottom: 6px; }
.pom-form-wrap .pom-group--contacto > .pom-hint { margin-bottom: 16px; }
.pom-form-wrap .pom-opc { font-weight: 400; color: var(--pf-mute); }
.pom-form-wrap .pom-hint { margin: -2px 0 8px; font-size: 14px; line-height: 1.45; color: var(--pf-mute); }
.pom-form-wrap .pom-note { margin: 0; padding: 14px 16px; border-radius: var(--pf-r); background: var(--pf-blue-bg); font-size: 15px; line-height: 1.5; color: var(--pf-ink); }

/* ── Campos ─────────────────────────────────────────────────────────── */
.pom-form-wrap .pom-input {
  display: block; width: 100%; min-height: var(--pf-h); margin: 0; padding: 12px 14px;
  border: 1px solid var(--pf-line); border-radius: var(--pf-r); background: #fff;
  font: 400 16px/1.4 var(--pf-font); color: var(--pf-ink);
  text-transform: none; letter-spacing: 0;
  transition: border-color .15s, box-shadow .15s;
  -webkit-appearance: none; appearance: none;
}
.pom-form-wrap .pom-input::placeholder { color: var(--pf-mute); opacity: 1; text-transform: none; }
.pom-form-wrap .pom-input:hover { border-color: var(--pf-ink); }
.pom-form-wrap .pom-input:focus { outline: var(--pom-focus); outline-offset: var(--pom-focus-offset); }   /* o anel único do site (DS --pom-focus) */
.pom-form-wrap .pom-input--tel { max-width: 16em; }
.pom-form-wrap .pom-input--s { max-width: 12em; }
/* campo com unidade (m²): o invólucro tem exatamente a largura do campo, a unidade fica dentro, centrada na vertical */
.pom-form-wrap .pom-suffix { position: relative; display: flex; align-items: center; width: 100%; max-width: 200px; }
.pom-form-wrap .pom-suffix .pom-input { width: 100%; max-width: none; margin: 0; padding-right: 52px; text-align: left; }
.pom-form-wrap .pom-suffix > span { position: absolute; right: 16px; top: 0; bottom: 0; display: flex; align-items: center; font-size: 16px; line-height: 1; color: var(--pf-mute); pointer-events: none; }
.pom-form-wrap .pom-textarea { min-height: 96px; resize: vertical; }
.pom-form-wrap .pom-select {
  padding-right: 44px; cursor: pointer;
  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%2314181F' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat right 14px center;
}
.pom-form-wrap .pom-input[aria-invalid="true"] { border-color: var(--pf-err); box-shadow: 0 0 0 1px var(--pf-err); }
.pom-form-wrap .pom-input[aria-invalid="true"]:focus { box-shadow: 0 0 0 1px var(--pf-err); }

/* ── Erros ──────────────────────────────────────────────────────────── */
.pom-form-wrap .pom-err {
  display: flex; gap: 6px; align-items: flex-start; margin: 0 0 8px;
  font: 600 14px/1.45 var(--pf-font); color: var(--pf-err);
}
.pom-form-wrap .pom-err[hidden] { display: none; }
.pom-form-wrap .pom-err::before {
  content: ""; flex: 0 0 18px; height: 18px; margin-top: 1px; background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a10 10 0 100 20 10 10 0 000-20zm-1 5h2v7h-2zm0 9h2v2h-2z'/%3E%3C/svg%3E") center/contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a10 10 0 100 20 10 10 0 000-20zm-1 5h2v7h-2zm0 9h2v2h-2z'/%3E%3C/svg%3E") center/contain no-repeat;
}
.pom-form-wrap .pom-summary, .pom-form-wrap .pom-neterr {
  margin: 0 0 24px; padding: 16px 18px; border: 2px solid var(--pf-err); border-radius: var(--pf-r);
  background: var(--pf-err-bg); color: var(--pf-ink); font-size: 15px; line-height: 1.5;
}
.pom-form-wrap .pom-summary[hidden], .pom-form-wrap .pom-neterr[hidden] { display: none; }
.pom-form-wrap .pom-summary:focus { outline: var(--pom-focus); outline-offset: var(--pom-focus-offset); }
.pom-form-wrap .pom-summary__t { margin: 0 0 6px; font-weight: 700; color: var(--pf-err); }
.pom-form-wrap .pom-summary__l { margin: 0; padding-left: 20px; }
.pom-form-wrap .pom-summary__l li { margin: 2px 0; }
.pom-form-wrap .pom-summary__l a { color: var(--pf-err); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }
.pom-form-wrap .pom-neterr { margin: 0 0 16px; }
.pom-form-wrap .pom-neterr__t { margin: 0 0 4px; font-weight: 700; color: var(--pf-err); }
.pom-form-wrap .pom-neterr p { margin: 0 0 12px; font-size: 15px; line-height: 1.5; color: var(--pf-ink); max-width: none; }
.pom-form-wrap .pom-neterr__a { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 10px; }
.pom-form-wrap .pom-neterr__a > * { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 8px 16px; border: 0; border-radius: 999px; background: #fff; box-shadow: inset 0 0 0 1.5px var(--pf-ink); font: 600 15px/1.2 var(--pf-font); color: var(--pf-ink); text-decoration: none; cursor: pointer; }
.pom-form-wrap .pom-neterr__a > *:focus-visible { outline: var(--pom-focus); outline-offset: var(--pom-focus-offset); }
.pom-form-wrap .pom-neterr__a svg { width: 20px; height: 20px; }
.pom-form-wrap .pom-neterr .pom-neterr__tel { margin: 0; font-size: 14px; color: var(--pf-mute); }

/* ── Opções (radio): cartões e «chips» com o input nativo por cima ──── */
.pom-form-wrap .pom-opts { display: grid; gap: 8px; }
.pom-form-wrap .pom-opts--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.pom-form-wrap .pom-opts--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }

.pom-form-wrap .pom-opts--dias { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.pom-form-wrap .pom-opts--cards { grid-template-columns: 1fr; gap: 10px; }
@media (min-width: 520px) {
  .pom-form-wrap .pom-opts--cards { grid-template-columns: 1fr 1fr; }
  .pom-form-wrap .pom-opts--dias { grid-template-columns: repeat(6, minmax(0, 1fr)); }
}
.pom-form-wrap .pom-opt { position: relative; display: flex; margin: 0; cursor: pointer; }
.pom-form-wrap .pom-opt--wide { grid-column: span 2; }
.pom-form-wrap .pom-opt input {
  position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; margin: 0;
  opacity: 0; cursor: pointer;
}
.pom-form-wrap .pom-opt__box {
  display: flex; flex: 1; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  min-height: 48px; padding: 8px 6px; border-radius: var(--pf-r); background: #fff;
  box-shadow: inset 0 0 0 1px var(--pf-line);
  text-align: center; line-height: 1.25; color: var(--pf-ink);
  transition: box-shadow .15s, background-color .15s;
}
.pom-form-wrap .pom-opt__t { font-size: 15px; font-weight: 500; }
.pom-form-wrap .pom-opt__d { font-size: 13px; color: var(--pf-mute); }
.pom-form-wrap .pom-opt:hover .pom-opt__box { box-shadow: inset 0 0 0 1px var(--pf-ink); }
.pom-form-wrap .pom-opt input:checked + .pom-opt__box { background: var(--pf-blue-bg); box-shadow: inset 0 0 0 2px var(--pf-blue); }
.pom-form-wrap .pom-opt input:checked + .pom-opt__box .pom-opt__t { font-weight: 700; }
.pom-form-wrap .pom-opt input:checked + .pom-opt__box .pom-opt__d { color: var(--pf-ink); }
.pom-form-wrap .pom-opt input:focus-visible + .pom-opt__box { outline: var(--pom-focus); outline-offset: var(--pom-focus-offset); }

/* cartão: círculo de seleção + título + descrição, alinhados à esquerda */
.pom-form-wrap .pom-opt--card .pom-opt__box {
  position: relative; align-items: flex-start; justify-content: flex-start; gap: 4px;
  padding: 16px 16px 16px 50px; text-align: left; border-radius: var(--pf-r);
}
.pom-form-wrap .pom-opt--card .pom-opt__box::before {
  content: ""; position: absolute; left: 16px; top: 17px; width: 22px; height: 22px; border-radius: 50%;
  box-shadow: inset 0 0 0 2px var(--pf-line); background: #fff;
}
.pom-form-wrap .pom-opt--card input:checked + .pom-opt__box::before { box-shadow: inset 0 0 0 2px var(--pf-blue), inset 0 0 0 6px #fff; background: var(--pf-blue); }
.pom-form-wrap .pom-opt--card .pom-opt__t { font-size: 16px; font-weight: 700; }
.pom-form-wrap .pom-opt--card .pom-opt__d { font-size: 14px; line-height: 1.45; }

/* ── Abrir/fechar sem saltos: altura animada com grid 0fr → 1fr ──────── */
.pom-form-wrap .pom-reveal {
  display: grid; grid-template-rows: 0fr; visibility: hidden;
  transition: grid-template-rows .26s var(--pf-ease), visibility 0s linear .26s;
}
.pom-form-wrap .pom-reveal.is-open { grid-template-rows: 1fr; visibility: visible; transition: grid-template-rows .26s var(--pf-ease), visibility 0s; }
.pom-form-wrap .pom-reveal__in { min-height: 0; overflow: hidden; margin: 0 -5px; padding: 0 5px; } /* 5 px: o anel de foco não é cortado */
.pom-form-wrap .pom-reveal__in > :first-child { margin-top: 12px; }
.pom-form-wrap .pom-reveal[data-reveal="visita"] > .pom-reveal__in > :first-child { margin-top: 0; }
.pom-form-wrap .pom-reveal__in > .pom-note + .pom-q { margin-top: 16px; }
.pom-form-wrap .pom-reveal__in > :last-child { margin-bottom: 5px; }
.pom-form-wrap .pom-reveal[data-reveal="visita"] > .pom-reveal__in > :last-child { margin-bottom: 32px; }

/* ── Envio ──────────────────────────────────────────────────────────── */
.pom-form-wrap .pom-submit {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  width: 100%; min-height: 56px; margin: 0; padding: 12px 24px;
  border: 0; border-radius: 999px; background: var(--pf-yellow); color: #14181F;
  font: 700 18px/1.2 var(--pf-font-h); cursor: pointer;
  transition: background-color .15s;
}
.pom-form-wrap .pom-submit:hover { background: var(--pf-yellow-d); }
.pom-form-wrap .pom-submit:focus-visible { outline: var(--pom-focus); outline-offset: var(--pom-focus-offset); }
.pom-form-wrap .pom-submit[aria-disabled="true"] { cursor: progress; background: var(--pf-yellow-d); }
.pom-form-wrap .pom-submit[aria-disabled="true"]::before {
  content: ""; width: 18px; height: 18px; border-radius: 50%;
  border: 2px solid rgba(20,24,31,.25); border-top-color: #14181F; animation: pom-spin .8s linear infinite;
}
@keyframes pom-spin { to { transform: rotate(360deg); } }

.pom-form-wrap .pom-tempo { margin: 0 0 10px; font-size: 14px; line-height: 1.4; color: var(--pf-mute); }
.pom-form-wrap .pom-privacy { margin: 16px 0 0; font-size: 14px; line-height: 1.55; color: var(--pf-mute); }
.pom-form-wrap .pom-privacy p { margin: 0 0 8px; font-size: 14px; line-height: 1.55; color: var(--pf-mute); max-width: none; }
.pom-form-wrap .pom-privacy a { color: var(--pf-ink); text-decoration: underline; text-underline-offset: 2px; }
.pom-form-wrap .pom-privacy a:hover { color: var(--pf-blue-txt); }
.pom-form-wrap .pom-privacy summary { display: inline-flex; align-items: center; min-height: 44px; cursor: pointer; color: var(--pf-ink); font-weight: 500; text-decoration: underline; text-underline-offset: 2px; list-style: none; }
.pom-form-wrap .pom-privacy summary::-webkit-details-marker { display: none; }
.pom-form-wrap .pom-privacy summary::after { content: ""; width: 8px; height: 8px; margin-left: 8px; border: solid currentColor; border-width: 0 2px 2px 0; transform: translateY(-2px) rotate(45deg); transition: transform .15s; }
.pom-form-wrap .pom-privacy details[open] summary::after { transform: translateY(2px) rotate(-135deg); }
.pom-form-wrap .pom-privacy summary:focus-visible { outline: var(--pom-focus); outline-offset: var(--pom-focus-offset); }
.pom-form-wrap .pom-privacy dl { margin: 4px 0 8px; }
.pom-form-wrap .pom-privacy dt { margin: 8px 0 0; font-weight: 600; color: var(--pf-ink); }
.pom-form-wrap .pom-privacy dd { margin: 0; }
.pom-form-wrap .pom-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* ── Ecrã de sucesso (substitui o formulário dentro do cartão) ──────── */
.pom-form-wrap .pom-done[hidden] { display: none; }
.pom-form-wrap .pom-done:focus { outline: none; }
.pom-form-wrap .pom-done__ic { display: grid; place-items: center; width: 56px; height: 56px; margin: 0 0 16px; border-radius: 50%; background: var(--pf-blue-bg); color: var(--pf-blue-txt); }
.pom-form-wrap .pom-done__ic svg { width: 28px; height: 28px; fill: none; stroke: currentColor; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.pom-form-wrap .pom-done__h { margin: 0 0 12px; font: 700 24px/1.25 var(--pf-font-h); color: var(--pf-ink); }
.pom-form-wrap .pom-done__p { margin: 0 0 12px; font-size: 16px; line-height: 1.6; color: var(--pf-text); max-width: none; }
.pom-form-wrap .pom-done__lead { margin: 0 0 20px; font-size: 19px; line-height: 1.45; font-weight: 600; color: var(--pf-ink); max-width: none; }
.pom-form-wrap .pom-done__lead span { background: linear-gradient(transparent 62%, rgba(240,181,31,.5) 0); }
.pom-form-wrap .pom-done__sub { margin: 0 0 8px; font: 700 16px/1.3 var(--pf-font); color: var(--pf-ink); }
.pom-form-wrap .pom-done__ol, .pom-form-wrap .pom-done__ul { margin: 0 0 16px; padding-left: 22px; font-size: 16px; line-height: 1.55; color: var(--pf-text); }
.pom-form-wrap .pom-done__ol li, .pom-form-wrap .pom-done__ul li { margin: 0 0 6px; }
.pom-form-wrap .pom-done__small { margin: 12px 0 0; font-size: 14px; line-height: 1.5; color: var(--pf-mute); max-width: none; }
.pom-form-wrap .pom-done__alt { margin: 10px 0 0; font-size: 15px; color: var(--pf-text); max-width: none; }
.pom-form-wrap .pom-done__alt a { color: var(--pf-ink); }
.pom-form-wrap .pom-done__box { margin: 20px 0; padding: 18px; border-radius: var(--pf-r); background: #F2F1EE; }
.pom-form-wrap .pom-done__box .pom-done__p { margin-bottom: 14px; color: var(--pf-ink); }
.pom-form-wrap .pom-done__wa {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 52px; padding: 12px 22px;
  border-radius: 999px; background: #fff; box-shadow: inset 0 0 0 2px var(--pf-ink);
  font: 700 16px/1.2 var(--pf-font-h); color: var(--pf-ink); text-decoration: none;
}
.pom-form-wrap .pom-done__wa:hover { background: var(--pf-blue-bg); }
.pom-form-wrap .pom-done__wa:focus-visible { outline: var(--pom-focus); outline-offset: var(--pom-focus-offset); }
.pom-form-wrap .pom-done__wa svg { width: 22px; height: 22px; flex: 0 0 22px; }
.pom-form-wrap .pom-done__again {
  min-height: 44px; padding: 0; border: 0; background: none; cursor: pointer;
  font: 500 15px/1.3 var(--pf-font); color: var(--pf-ink); text-decoration: underline; text-underline-offset: 2px;
}
.pom-form-wrap .pom-done__again:focus-visible { outline: var(--pom-focus); outline-offset: var(--pom-focus-offset); }

/* «Quem pede»: no telemóvel uma linha por opção (título + descrição lado a lado); a partir de 520 px, três colunas */
.pom-form-wrap .pom-opts--tipo { grid-template-columns: 1fr; }
.pom-form-wrap .pom-opts--tipo .pom-opt__box { flex-direction: row; flex-wrap: wrap; justify-content: flex-start; gap: 4px 10px; padding: 10px 14px; text-align: left; }
@media (min-width: 520px) {
  .pom-form-wrap .pom-opts--tipo { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .pom-form-wrap .pom-opts--tipo .pom-opt__box { flex-direction: column; justify-content: center; gap: 2px; padding: 8px 6px; text-align: center; }
}
@media (max-width: 380px) {
  .pom-form-wrap .pom-opts--3 .pom-opt__t { font-size: 14px; }
}
@media (prefers-reduced-motion: reduce) {
  .pom-form-wrap .pom-reveal, .pom-form-wrap .pom-reveal.is-open, .pom-form-wrap .pom-input, .pom-form-wrap .pom-opt__box, .pom-form-wrap .pom-submit { transition: none; }
  .pom-form-wrap .pom-submit[aria-disabled="true"]::before { animation-duration: 2.4s; }
}
/* grupo de opções com erro: contorno vermelho nas opções até escolher */
.pom-form-wrap .pom-err:not([hidden]) + .pom-opts .pom-opt__box { box-shadow: inset 0 0 0 1px var(--pf-err); }
/* passos do ecrã de sucesso: número num círculo (como na página e no email) */
.pom-form-wrap .pom-done__ol { list-style: none; padding-left: 0; counter-reset: pomstep; }
.pom-form-wrap .pom-done__ol li { position: relative; min-height: 28px; margin: 0 0 10px; padding-left: 40px; counter-increment: pomstep; }
.pom-form-wrap .pom-done__ol li::before {
  content: counter(pomstep); position: absolute; left: 0; top: 0; width: 28px; height: 28px; border-radius: 50%;
  background: var(--pf-blue-bg); color: var(--pf-blue-txt); font: 700 14px/28px var(--tc-font-num, var(--pf-font)); text-align: center;
}
.pom-form-wrap .pom-done__ul { list-style: disc; }

/* foco programático (título do ecrã de sucesso/erro): sem moldura — o leitor de ecrã anuncia na mesma */
.pom-form-wrap [tabindex="-1"]:focus, form.pom-form [tabindex="-1"]:focus, [class*="pom-"] h2[tabindex="-1"]:focus, [class*="pom-"] h3[tabindex="-1"]:focus { outline: none; }