/* 25/10 · o pedido de aula no site (/pedir-aula, server/pedidoNoSite.ts) na moldura D2. O dono: «sem vida, muito
   escura». A capa é a das páginas de zona e de praia (zona.css: .pz-capa, a fotografia do sítio em largura inteira), mais
   baixa, porque aqui o que importa é o formulário; as escolhas marcadas levam o ciano da marca (o mesmo degradê do botão
   principal, .bt-1). Só os tokens da moldura (--ciano, --ciano-e, --ciano-f, --claro, --fraco, --espuma, --elev, --noite).
   Sem letra ciano (regra do dono de 18/10): o ciano fica nos botões, nos números dos passos e nos traços. */

/* ---------- a capa: a fotografia do sítio, o nome, o título e a linha dos passos ---------- */
.pd-capa { min-height: 0; padding: calc(var(--topo, 96px) + clamp(40px, 7vw, 96px)) 0 clamp(28px, 4vw, 44px); }
.pd-capa.pz-capa-sem { min-height: 0; }
/* a capa e o formulário na mesma coluna: o título fica por cima dos cartões, não encostado à esquerda do ecrã */
.pd-capa .pd-capa-in { width: min(640px, 100% - 2 * var(--gut)); margin-inline: auto; }
.pd-capa .pz-h1 { font-size: var(--t2); max-width: 18ch; }
.pd-capa .pz-etq { margin: 0 0 10px; }
.pd-linha { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; margin: 22px 0 0; padding: 0; }
.pd-linha li { display: inline-flex; align-items: center; gap: 10px; min-height: 40px; padding: 5px 16px 5px 5px; border-radius: 9999px;
  font-size: 14px; font-weight: 600; color: var(--espuma); background: rgba(6,14,26,.55); box-shadow: inset 0 0 0 1px rgba(255,255,255,.16);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.pd-linha li b { display: grid; place-items: center; flex: none; width: 30px; height: 30px; border-radius: 9999px; font-size: 13px; color: #fff;
  background: linear-gradient(135deg, var(--ciano-e), var(--ciano-f)); }

/* ---------- o formulário ---------- */
.pd-corpo { position: relative; padding: clamp(20px, 3vw, 36px) 0 clamp(56px, 8vw, 96px);
  background: linear-gradient(180deg, var(--noite, #060E1A) 0, var(--elev) 220px, var(--elev) 100%); }
.pd-wrap { width: min(640px, 100% - 2 * var(--gut)); max-width: none; margin-inline: auto; }
.pd-cartao { margin: 0 0 14px; padding: 20px; border-radius: 22px; background: rgba(255,255,255,.04); box-shadow: inset 0 0 0 1px rgba(255,255,255,.1); }
.pd-rotulo { display: block; margin: 0 0 10px; font-size: 15px; font-weight: 700; color: var(--espuma); }
.pd-rotulo + .pd-dica { margin-top: -4px; }
.pd-dica { margin: 0 0 12px; font-size: 14px; line-height: 1.45; color: var(--fraco); }
.pd-sitio { display: flex; flex-direction: column; gap: 10px; }
/* 26/10 · «O teu dinheiro está seguro»: as quatro garantias, logo por baixo dos passos (escolha do dono). Ciano só nos ícones. */
.pd-seguro { background: rgba(6,182,212,.07); box-shadow: inset 0 0 0 1px rgba(34,211,238,.28); }
.pd-seguro-t { display: flex; align-items: center; gap: 10px; margin: 0 0 12px; font-size: 16px; font-weight: 800; color: var(--espuma); }
.pd-seguro-t svg { flex: none; color: var(--ciano); }
.pd-seguro-l { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.pd-seguro-l li { display: flex; align-items: flex-start; gap: 10px; font-size: 14px; line-height: 1.5; color: var(--claro); }
.pd-seguro-l svg { flex: none; margin-top: 2px; color: var(--ciano); }
.pd-sitio-linha { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 10px; }
.pd-sitio-rot { font-size: 14px; font-weight: 600; color: var(--fraco); }
.pd-sitio-val { font-size: 16px; font-weight: 800; color: #fff; text-align: right; overflow-wrap: anywhere; }
.pd-sitio-sub { margin-top: -4px; font-size: 13px; color: var(--fraco); }

/* o calendário */
.pd-mes { display: flex; align-items: center; justify-content: space-between; margin: 0 0 8px; }
.pd-mes-nome { font-size: 16px; font-weight: 800; color: #fff; }
.pd-mes button { width: 44px; height: 44px; border: 0; border-radius: 9999px; font-size: 20px; color: var(--espuma); cursor: pointer;
  background: rgba(255,255,255,.05); box-shadow: inset 0 0 0 1px rgba(255,255,255,.16); }
.pd-mes button:disabled { opacity: .35; cursor: default; }
.pd-grelha { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; }
.pd-sem { padding: 4px 0; font-size: 12px; font-weight: 700; text-align: center; text-transform: uppercase; color: var(--fraco); }
.pd-dia { height: 44px; border: 0; border-radius: 12px; font: inherit; font-size: 15px; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--espuma);
  background: transparent; cursor: pointer; transition: background-color .2s var(--ease), box-shadow .2s var(--ease); }
.pd-dia:hover:not(:disabled) { box-shadow: inset 0 0 0 1px rgba(255,255,255,.24); }
.pd-dia:disabled { color: rgba(148,163,184,.45); cursor: default; }
.pd-dia.pd-hoje { box-shadow: inset 0 0 0 1px var(--ciano-f); }
.pd-dia[aria-pressed="true"] { color: #fff; font-weight: 800; background: linear-gradient(135deg, var(--ciano-e), var(--ciano-f)); box-shadow: 0 4px 16px rgba(6,182,212,.28); }
.pd-conta { margin-top: 10px; font-size: 14px; color: var(--fraco); }
.pd-conta.pd-aviso { color: var(--espuma); font-weight: 700; }

/* as escolhas: pílulas, e a marcada no ciano da marca */
.pd-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.pd-chip { min-height: 44px; padding: 10px 18px; border: 0; border-radius: 9999px; font: inherit; font-size: 15px; font-weight: 600; color: var(--espuma); cursor: pointer;
  background: rgba(255,255,255,.05); box-shadow: inset 0 0 0 1px rgba(255,255,255,.18); transition: background-color .2s var(--ease), box-shadow .2s var(--ease), transform .16s var(--ease); }
.pd-chip:hover { background: rgba(255,255,255,.09); }
.pd-chip:active { transform: scale(.97); }
.pd-chip[aria-pressed="true"] { color: #fff; font-weight: 800; background: linear-gradient(135deg, var(--ciano-e), var(--ciano-f)); box-shadow: 0 4px 20px rgba(6,182,212,.26); }
.pd-chip:focus-visible, .pd-dia:focus-visible, .pd-mes button:focus-visible, .pd-passos button:focus-visible { outline: 2px solid var(--ciano); outline-offset: 2px; }
.pd-opcao { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; width: 100%; margin: 0 0 8px; padding: 12px 16px; border-radius: 16px; text-align: left; }
.pd-opcao small { font-size: 13px; font-weight: 500; color: var(--fraco); }
.pd-opcao[aria-pressed="true"] small { color: rgba(255,255,255,.86); }
.pd-passos { display: flex; align-items: center; gap: 16px; }
.pd-passos button { width: 44px; height: 44px; border: 0; border-radius: 9999px; font-size: 20px; color: var(--espuma); cursor: pointer;
  background: rgba(255,255,255,.05); box-shadow: inset 0 0 0 1px rgba(255,255,255,.18); }
.pd-passos button:disabled { opacity: .4; cursor: default; }
.pd-passos output { min-width: 2ch; font-size: 22px; font-weight: 800; text-align: center; font-variant-numeric: tabular-nums; color: #fff; }
.pd-cartao .pd-rotulo:not(:first-child) { margin-top: 18px; }

/* os campos */
.pd-campo { width: 100%; margin: 0 0 14px; padding: 13px 14px; border: 0; border-radius: 14px; font: inherit; font-size: 16px; color: var(--espuma);
  background: rgba(6,14,26,.5); box-shadow: inset 0 0 0 1px rgba(255,255,255,.16); }
.pd-campo::placeholder { color: rgba(148,163,184,.8); }
.pd-campo:focus { outline: none; box-shadow: inset 0 0 0 2px var(--ciano-f); }
textarea.pd-campo { min-height: 96px; resize: vertical; }

/* o fecho: a nota do preço, a nota do botão do email e o «Enviar pedido» */
.pd-nota { margin: 6px 0 12px; font-size: 14px; line-height: 1.5; text-align: center; color: var(--claro); }
.pd-nota-info { display: flex; align-items: flex-start; gap: 10px; padding: 14px 16px; border-radius: 16px; text-align: left; color: var(--espuma);
  background: rgba(6,182,212,.1); box-shadow: inset 0 0 0 1px rgba(34,211,238,.32); }
.pd-botao { width: 100%; justify-content: center; min-height: 56px; border: 0; font-family: inherit; font-size: 17px; cursor: pointer; }
.pd-botao.bt-1 { padding: 8px 8px 8px 22px; }
.pd-botao:disabled { opacity: .6; cursor: default; }
.pd-botao.pd-botao-2 { padding: 8px 22px; }
.pd-razao { min-height: 20px; margin: 10px 0 0; font-size: 14px; line-height: 1.45; text-align: center; color: var(--claro); }
.pd-razao.pd-erro { color: #FCA5A5; font-weight: 600; }

/* o «vê o teu email» depois de enviar */
.pd-estado { padding: 32px 8px 8px; text-align: center; }
.pd-estado h2 { margin: 16px 0 8px; font-size: var(--t4); color: #fff; }
.pd-estado p { margin: 0 0 20px; font-size: 16px; line-height: 1.55; color: var(--claro); overflow-wrap: anywhere; }
.pd-icone { display: inline-flex; align-items: center; justify-content: center; width: 72px; height: 72px; border-radius: 9999px; color: #fff;
  background: linear-gradient(135deg, var(--ciano-e), var(--ciano-f)); }

@media (max-width: 600px) {
  .pd-capa { padding-top: calc(var(--topo, 84px) + 28px); }
  .pd-linha { flex-direction: column; align-items: flex-start; gap: 6px; }
  .pd-cartao { padding: 16px; border-radius: 20px; }
  .pd-chip { padding: 10px 15px; }
}
[hidden] { display: none !important; }

/* 27/10 · as aulas à venda que servem ao pedido (#pdVenda, server/pedidoNoSite.ts) */
.pd-venda{box-shadow:inset 0 0 0 1px rgba(34,211,238,.45)}
.pd-venda-l{display:grid;gap:8px;margin-top:10px}
.pd-venda-a{display:flex;align-items:center;gap:12px;min-height:56px;padding:10px 14px;border-radius:14px;background:rgba(34,211,238,.08);color:inherit;text-decoration:none}
.pd-venda-a:hover{background:rgba(34,211,238,.16)}
.pd-venda-h{font-weight:800;font-variant-numeric:tabular-nums;min-width:44px}
.pd-venda-t{flex:1;min-width:0;display:flex;flex-direction:column}
.pd-venda-t b{font-size:14px}
.pd-venda-t small{font-size:12.5px;opacity:.75;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pd-venda-p{font-weight:800;color:#22D3EE;white-space:nowrap}


.pd-venda-a, .pd-venda-a * { text-decoration: none !important; }