/* 25/10 · a página de compra de uma aula (/aula/:code, server/siteD/aulaD.ts) na moldura D2. O dono: «as páginas de
   checkout e de compra de aula ainda não estão na versão nova, a D». A moldura traz a barra, o rodapé e a letra; aqui fica
   só a disposição por cima da folha de hoje (que entra antes desta, com as regras globais presas a .aula-d).
   É o caminho do dinheiro: nenhum id, nenhum botão e nenhum script muda; só a letra, as cores (tokens da moldura:
   --noite, --elev, --espuma, --claro, --fraco, --ciano, --ciano-e, --ciano-f), o espaço e a largura.
   O «Reservar» continua em tinta chapada --ciano com letra --noite (o contraste prometido a 16/08, seo.ts). */

.aula-d { font-family: 'Inter SB', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; color: var(--espuma); line-height: 1.5; }

/* ---------- a capa: a fotografia em largura inteira, por baixo da barra que flutua ---------- */
.aula-d .hero { min-height: 0; height: calc(var(--topo, 84px) + 250px); background: var(--elev); }
.aula-d .hero-overlay { background: linear-gradient(0deg, var(--noite) 0%, rgba(6,14,26,.62) 40%, rgba(6,14,26,.12) 70%, rgba(6,14,26,.45) 100%); }
/* o «Partilhar» descia para baixo da barra (vinha a 14 px do topo, e a barra D flutua por cima) */
.aula-d #lessonShareBtn { top: calc(var(--topo, 84px) + 6px) !important; }
.aula-d .hero-time-big { letter-spacing: -.03em; }
.aula-d .hero-price-pill { border-radius: 18px; background: var(--ciano); box-shadow: 0 8px 26px -8px rgba(6,182,212,.55); }
.aula-d .hero-price-pill .pp-amount, .aula-d .hero-price-pill .pp-label { color: var(--noite); }

/* ---------- a coluna ---------- */
.aula-d .container { width: min(640px, 100% - 2 * var(--gut, 16px)); max-width: none; padding: 0 0 96px; margin-inline: auto; }
.aula-d .school-logo, .aula-d .school-logo-placeholder { border-color: var(--noite); border-radius: 16px; }
.aula-d .school-name { font-size: 16px; color: var(--espuma); }
.aula-d .lesson-title { font-size: var(--t3, 28px); font-weight: 800; letter-spacing: -.02em; line-height: 1.12; color: #fff; }

/* as pílulas e os selos: a pílula da casa (cantos inteiros, sem caixa alta gritada) */
.aula-d .trust-pill, .aula-d .badge { border-radius: 9999px; padding: 6px 12px; letter-spacing: .02em; }

/* os cartões: o vidro das páginas D (o cartão do pedido de aula, pedido.css) */
.aula-d .info-card, .aula-d .desc-section, .aula-d .instructor-bar, .aula-d .conditions-card, .aula-d .sb-antes {
  border: 0; border-radius: 22px; background: rgba(255,255,255,.04); box-shadow: inset 0 0 0 1px rgba(255,255,255,.1); }
.aula-d .info-value.cyan { color: var(--espuma); }
.aula-d .price-section { border-radius: 24px; border: 0; }
.aula-d .sold-out-notify { border-radius: 24px; }
.aula-d .gear-warn, .aula-d .past-banner, .aula-d .app-bar { border-radius: 18px; }
.aula-d .price-big { letter-spacing: -.03em; }

/* os botões: a pílula da casa; a tinta é a de sempre */
.aula-d .btn-reserve { border-radius: 9999px; min-height: 52px; font-weight: 800; letter-spacing: -.01em; }
.aula-d .btn-app { border-radius: 9999px; }
.aula-d .sticky-cta { background: linear-gradient(0deg, rgba(6,14,26,.98) 60%, rgba(6,14,26,.86)); border-top-color: rgba(255,255,255,.1); }
.aula-d .sticky-cta button { border-radius: 9999px; min-height: 52px; }

/* o formulário e o termo (os campos têm estilo na própria etiqueta: só os cantos e o vidro da casa) */
.aula-d #checkoutForm, .aula-d #waiverSection { border-radius: 24px !important; }
.aula-d #checkoutForm input[type="text"], .aula-d #checkoutForm input[type="email"], .aula-d #checkoutForm select, .aula-d .sold-out-notify input { border-radius: 14px !important; }
.aula-d #qrVerifyBlock { border-radius: 18px !important; }
/* a barra fixa da moldura não tapa o formulário quando se salta para ele (o «Reservar aula» da barra leva aqui) */
.aula-d #checkoutForm { scroll-margin-top: calc(var(--topo, 84px) + 12px); }
/* 26/10 · (o dono, na volta Surf Today → aula: «ao descer, a barra tapa o título») o mesmo resguardo para tudo o que a
   página manda o ecrã procurar: o título, as condições de cancelamento (#cancelamento, que o «Ver condições» abre), o
   termo e os passos do código e da assinatura (o script leva-os ao meio do ecrã, mas num telemóvel baixo o «meio» fica
   por baixo da barra), e a mensagem de erro do pagamento. Nenhum id, botão ou script muda.
   Guarda: server/tests/oCartaoDaAulaLeSeNaFila.test.ts */
.aula-d .lesson-title, .aula-d #cancelamento, .aula-d #waiverSection, .aula-d #qrVerifyBlock, .aula-d #qrSignatureBlock,
.aula-d #qrCheckoutError, .aula-d #conteudo { scroll-margin-top: calc(var(--topo, 84px) + 12px); }

/* o «Powered by» de hoje: o rodapé da moldura já diz quem somos */
.aula-d .footer { display: none; }

/* ---------- 27/10 · A FOLHA DE COMPRA É CLARA ----------
   O dono: «mais branco no site, com mais vida, para converter melhor sem perder a identidade». A regra é a das casas
   que vendem experiências: a emoção (a fotografia, a marca, o mar às HH:MM) fica em cima e escura; a DECISÃO (o preço,
   as garantias, o termo, o formulário, o «Validar email» e o «Pagar») fica numa folha clara e calma. Nada muda no que
   se cobra, em nenhum id, botão ou script: só a tinta.
   Os campos e os blocos trazem a cor escrita na própria etiqueta (seo.ts, o mesmo HTML da página sem moldura), por isso
   cada cor clara da etiqueta tem aqui o seu par escuro, com !important, e só dentro destas três caixas. A forma rgb()
   é a que o browser escreve quando o script muda a cor (o erro do «Validar email», o «Assinado», o retorno do pagamento).
   ⚠️ O semazul.js (d2/semazul.js, regra do dono de 18/10: nada de letra azul) troca qualquer letra ciano por #F1F5F9.
   Num fundo branco isso é letra branca: era o «Assina aqui», invisível em produção. Por isso aqui NENHUMA letra é ciano
   (nem #0E7490, que ele também apanha): as ligações vão a #0F172A sublinhadas, que é o que a regra dele pede.
   Paleta (todas da casa, shared/design/tokens.ts): papel #FFFFFF · cinza da folha #F1F5F9 · linha #E2E8F0 · texto
   #0F172A · rótulos #475569 · verde #047857 · âmbar #B45309 · vermelho #B91C1C · ícones e foco #0E7490.
   Guarda: server/tests/aFolhaDeCompraClaraLeSe.test.ts (contraste calculado de cada par, e nenhum ciano claro). */
.aula-d .price-section:not(#proxima), .aula-d #waiverSection, .aula-d #checkoutForm {
  background: #FFFFFF !important; color: #0F172A; color-scheme: light;
  border: 1px solid #E2E8F0 !important; box-shadow: 0 24px 48px -24px rgba(0,0,0,.55) !important; }
.aula-d .price-section:not(#proxima) { padding: 20px; }
/* 27/10 (gravação do dono: «está horrível isso branco em baixo») · as três folhas são filhas diretas da página, fora da
   coluna: no computador iam de uma borda do ecrã à outra (1512 px), com os campos esticados e riscas escuras entre elas,
   enquanto tudo o resto da aula vive numa coluna de 640 px. Passam a ser cartões nessa mesma coluna. */
.aula-d > .price-section:not(#proxima), .aula-d > #waiverSection, .aula-d > #checkoutForm {
  box-sizing: border-box; width: calc(100% - 32px); max-width: 640px; margin-left: auto !important; margin-right: auto !important; border-radius: 20px; }
.aula-d :is(.price-section:not(#proxima), #waiverSection, #checkoutForm) :is(
  [style^="color:#E2E8F0" i], [style*=";color:#E2E8F0" i],
  [style^="color:#F1F5F9" i], [style*=";color:#F1F5F9" i],
  [style^="color:#22D3EE" i], [style*=";color:#22D3EE" i],
  [style^="color:#06B6D4" i], [style*=";color:#06B6D4" i],
  [style^="color: rgb(226, 232, 240)"], [style*="; color: rgb(226, 232, 240)"],
  [style^="color: rgb(241, 245, 249)"], [style*="; color: rgb(241, 245, 249)"],
  [style^="color: rgb(34, 211, 238)"], [style*="; color: rgb(34, 211, 238)"],
  [style^="color: rgb(6, 182, 212)"], [style*="; color: rgb(6, 182, 212)"]) { color: #0F172A !important; }
.aula-d :is(.price-section:not(#proxima), #waiverSection, #checkoutForm) :is(
  [style^="color:#CBD5E1" i], [style*=";color:#CBD5E1" i],
  [style^="color:#94A3B8" i], [style*=";color:#94A3B8" i],
  [style^="color:#64748B" i], [style*=";color:#64748B" i],
  [style^="color: rgb(203, 213, 225)"], [style*="; color: rgb(203, 213, 225)"],
  [style^="color: rgb(148, 163, 184)"], [style*="; color: rgb(148, 163, 184)"],
  [style^="color: rgb(100, 116, 139)"], [style*="; color: rgb(100, 116, 139)"]) { color: #475569 !important; }
.aula-d :is(.price-section:not(#proxima), #waiverSection, #checkoutForm) :is(
  [style^="color:#10B981" i], [style*=";color:#10B981" i],
  [style^="color:#34D399" i], [style*=";color:#34D399" i],
  [style^="color: rgb(16, 185, 129)"], [style*="; color: rgb(16, 185, 129)"],
  [style^="color: rgb(52, 211, 153)"], [style*="; color: rgb(52, 211, 153)"]) { color: #047857 !important; }
.aula-d :is(.price-section:not(#proxima), #waiverSection, #checkoutForm) :is(
  [style^="color:#F59E0B" i], [style*=";color:#F59E0B" i],
  [style^="color:#FBBF24" i], [style*=";color:#FBBF24" i],
  [style^="color:#FCD34D" i], [style*=";color:#FCD34D" i],
  [style^="color: rgb(245, 158, 11)"], [style*="; color: rgb(245, 158, 11)"],
  [style^="color: rgb(251, 191, 36)"], [style*="; color: rgb(251, 191, 36)"],
  [style^="color: rgb(252, 211, 77)"], [style*="; color: rgb(252, 211, 77)"]) { color: #B45309 !important; }
.aula-d :is(.price-section:not(#proxima), #waiverSection, #checkoutForm) :is(
  [style^="color:#EF4444" i], [style*=";color:#EF4444" i],
  [style^="color:#F87171" i], [style*=";color:#F87171" i],
  [style^="color: rgb(239, 68, 68)"], [style*="; color: rgb(239, 68, 68)"],
  [style^="color: rgb(248, 113, 113)"], [style*="; color: rgb(248, 113, 113)"]) { color: #B91C1C !important; }
/* letra pequena: nada abaixo de 12 px dentro da folha (havia 10 e 11 px escritos na etiqueta) */
.aula-d :is(.price-section:not(#proxima), #waiverSection, #checkoutForm) :is([style*="font-size:10px"], [style*="font-size:11px"], [style*="font-size:11.5px"], [style*="font-size: 10px"], [style*="font-size: 11px"]) { font-size: 12px !important; }
/* as ligações: tinta do texto, sublinhadas (a regra do semazul), e um alvo de 44 px sem mexer na linha */
.aula-d :is(.price-section:not(#proxima), #waiverSection, #checkoutForm) a:not(.aula-cta-comprar):not(.btn-reserve) {
  color: #0F172A !important; text-decoration: underline !important; text-underline-offset: 3px; display: inline-block; padding: 14px 0; margin: -14px 0; }
.aula-d :is(.price-section:not(#proxima), #waiverSection, #checkoutForm) :is(a, button, summary, input, select):focus-visible { outline: 2px solid #0E7490 !important; outline-offset: 2px; }

/* o preço e as garantias */
.aula-d .price-section:not(#proxima) .spots-left { color: #047857; background: rgba(4,120,87,.08); border-color: rgba(4,120,87,.28); }
.aula-d .price-section:not(#proxima) .spots-left.urgent { color: #B45309; background: rgba(180,83,9,.08); border-color: rgba(180,83,9,.28); }
.aula-d .price-section:not(#proxima) .gz-garantias { background: #F1F5F9; border-color: #E2E8F0; }
.aula-d .price-section:not(#proxima) .gz-garantias li { color: #334155; }
.aula-d .price-section:not(#proxima) .gz-garantias svg { color: #0E7490; }
.aula-d .price-section:not(#proxima) .gz-garantias .gz-ok svg { color: #047857; }
.aula-d .price-section:not(#proxima) .aula-reembolso > div { background: #F1F5F9 !important; border-color: #E2E8F0 !important; }
.aula-d .price-section:not(#proxima) .aula-reembolso > summary { min-height: 44px; }
/* o «Reservar» fica na tinta de sempre (ciano, letra escura); um aro #0891B2 dá-lhe borda contra o branco */
.aula-d .price-section:not(#proxima) .aula-cta-comprar, .aula-d #checkoutForm .btn-reserve { box-shadow: inset 0 0 0 1px #0891B2, 0 10px 24px -10px rgba(8,145,178,.55) !important; }

/* o termo e a assinatura */
.aula-d #waiverSection #waiverText { background: #F1F5F9 !important; border-color: #E2E8F0 !important; }
.aula-d #waiverSection .aula-termo > summary { padding: 13px 0 !important; text-decoration: underline; text-underline-offset: 3px; }
.aula-d #waiverSection label:has(> input[type="checkbox"]), .aula-d #checkoutForm label:has(> input[type="checkbox"]) { min-height: 44px; }
.aula-d :is(#waiverSection, #checkoutForm) input[type="checkbox"] { accent-color: #0E7490 !important; }
.aula-d #qrSignatureBlock > div[style*="dashed"] { border-color: #64748B !important; }
.aula-d #qrSignatureHint, .aula-d #qrSignatureHint span { color: #475569 !important; opacity: 1 !important; }
.aula-d #qrSignatureHint svg { stroke: #0E7490 !important; }
.aula-d :is(#waiverSection, #checkoutForm) button[type="button"]:not(.btn-reserve) { min-height: 44px; text-decoration: underline; text-underline-offset: 3px; }
.aula-d :is(.price-section:not(#proxima), #waiverSection, #checkoutForm) svg[style*="stroke:#06B6D4" i] { stroke: #0E7490 !important; }
.aula-d :is(.price-section:not(#proxima), #waiverSection, #checkoutForm) svg[style*="stroke:#10B981" i] { stroke: #047857 !important; }

/* os campos: papel branco, borda #64748B (4,76 contra o branco), e o verde e o vermelho que o script escreve na borda */
.aula-d :is(#checkoutForm, #waiverSection) :is(input[type="text"], input[type="email"], select) {
  background: #FFFFFF !important; color: #0F172A !important; border-color: #64748B !important; }
.aula-d #checkoutForm :is(input[type="text"], input[type="email"])::placeholder { color: #64748B; opacity: 1; }
.aula-d #checkoutForm input[style*="rgb(16, 185, 129)"] { border-color: #047857 !important; }
.aula-d #checkoutForm input[style*="rgb(239, 68, 68)"] { border-color: #B91C1C !important; }
.aula-d #checkoutForm input[readonly] { background: #F1F5F9 !important; }
/* o passo do email: uma caixa cinza dentro da folha */
.aula-d #checkoutForm #qrVerifyBlock { background: #F1F5F9 !important; border-color: #E2E8F0 !important; }
.aula-d #checkoutForm #qrVerifyBlock input { background: #FFFFFF !important; }
.aula-d #checkoutForm #qrVerifyStateDone > div { background: #FFFFFF !important; border-color: rgba(4,120,87,.35) !important; }


@media (min-width: 600px) {
  .aula-d .hero { height: calc(var(--topo, 96px) + 320px); }
}
@media (min-width: 1024px) {
  .aula-d .hero { height: calc(var(--topo, 96px) + 380px); }
  .aula-d .hero-time { left: 0; right: 0; width: min(640px, 100% - 2 * var(--gut, 16px)); margin-inline: auto; }
}