/* Booking (/reservar), manage (/a-minha-reserva) and privacy (/privacidade). On top of tokens.css + site.css.

   The booking flow is the Rui dos Pregos model in the Loja's own clothes: one question per screen in Alegreya, the
   answered steps in a ruled row on top (the espinha), the day in a month calendar. Every option shares one vocabulary:
   an ink outline, the wall colour under the pointer, the sign's yellow once chosen, dashed when it cannot be chosen.
   Pills for single values (people, hours), like the sign's oval; square cells for the calendar and the zones, like
   the printed menu. */

.bk { padding-block: var(--s6) var(--s9); }
@media (min-width: 900px) { .bk { padding-block: var(--s7) var(--s9); } }
html:not(.js) .reserva { display: none; }
.bk-nojs { margin-top: var(--s4); max-width: 46ch; }
.reserva { max-width: 800px; }

.bk-demo { display: flex; gap: var(--s2); align-items: flex-start; margin-bottom: var(--s5); padding: var(--s2) var(--s3); background: var(--parede); font-size: var(--t-small); line-height: 1.45; }
.bk-demo .ico { width: 18px; height: 18px; margin-top: 2px; }

/* ---------- espinha: where you are going, what you already answered, and the way back ---------- */
.espinha { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); list-style: none; margin: 0; padding: 0; border-bottom: 1px solid var(--rule); }
.elo { min-width: 0; }
.elo > a, .elo > span { display: block; position: relative; min-height: var(--tap); padding: var(--s2) var(--s4) var(--s3); border-left: 1px solid var(--rule); color: inherit; text-decoration: none; }
.elo:first-child > a, .elo:first-child > span { border-left: 0; padding-left: 0; }
.elo > a::after, .elo > span::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 3px; background: transparent; transition: background-color var(--d-2) var(--e-out); }
.elo-agora > a::after, .elo-agora > span::after { background: var(--tinta); }
.elo-t { display: block; font: 600 0.6875rem/1.3 var(--sans); letter-spacing: 0.14em; text-transform: uppercase; color: var(--fg-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.elo-agora .elo-t { color: var(--tinta); }
.elo-v { display: block; margin-top: 2px; font: 700 1.125rem/1.3 var(--serif); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.elo > a .elo-v > span { text-decoration: underline; text-decoration-color: var(--pedra-forte); text-decoration-thickness: 1px; text-underline-offset: 0.2em; }
.elo > a:focus-visible { outline-offset: -2px; }
.v-curto { display: none; }
@media (hover: hover) and (pointer: fine) {
  .elo > a:hover::after { background: var(--pedra); }
  .elo > a:hover .elo-v > span { text-decoration-color: currentColor; }
}

/* ---------- the question ---------- */
.palco { padding-top: var(--s6); }
@media (min-width: 900px) { .palco { padding-top: var(--s7); } }
.pergunta { font-size: clamp(2.25rem, 1.55rem + 3.2vw, 4rem); line-height: 1.02; letter-spacing: -0.015em; }
.pergunta:focus-visible { outline-offset: 6px; }
.sob-pergunta { margin-top: var(--s3); max-width: 46ch; font-size: var(--t-lead); line-height: 1.4; color: var(--fg-2); }
.pergunta + :not(.sob-pergunta), .sob-pergunta + * { margin-top: var(--s6); }
@media (min-width: 900px) { .pergunta + :not(.sob-pergunta), .sob-pergunta + * { margin-top: var(--s7); } }
.aviso { display: flex; gap: var(--s2); align-items: flex-start; margin-bottom: var(--s5); padding: var(--s3) var(--s4); max-width: 62ch; background: var(--parede); font-size: var(--t-small); line-height: 1.45; }
.aviso .ico { width: 18px; height: 18px; margin-top: 2px; color: var(--pomodoro); }
.servicos > .aviso { margin-bottom: var(--s4); }
.nota-palco { margin-top: var(--s5); max-width: 60ch; font-size: var(--t-small); color: var(--fg-2); }
.continuar-wrap { margin-top: var(--s5); }
.voltar .ico { order: -1; }
@media (hover: hover) and (pointer: fine) { .voltar:hover .ico { transform: translateX(-4px); } }

/* ---------- the option, in four states: free, under the pointer, chosen, unavailable ---------- */
.opc {
  appearance: none; position: relative; margin: 0; padding: 0; font: inherit; color: var(--tinta); background: transparent;
  border: 1.5px solid var(--tinta); cursor: pointer; text-align: center;
  -webkit-tap-highlight-color: transparent; touch-action: manipulation; user-select: none; -webkit-user-select: none;
  transition: background-color var(--d-1) var(--e-out), border-color var(--d-1) var(--e-out), color var(--d-1) var(--e-out), transform var(--d-1) var(--e-out);
}
.opc:not(:disabled):not(.opc-fora):active { transform: scale(0.97); }
.opc[aria-pressed="true"], .opc.opc-tocada { background: var(--giallo); border-color: var(--tinta); }
.opc:disabled { cursor: not-allowed; color: var(--pedra-forte); border-color: var(--pedra-forte); border-style: dashed; background: transparent; }
@media (hover: hover) and (pointer: fine) {
  .opc:not(:disabled):not(.opc-fora):hover { background: var(--parede); }
  .opc[aria-pressed="true"]:not(:disabled):hover, .opc.opc-tocada:hover { background: var(--giallo); }
}
.skel { display: block; border-radius: var(--r-pill); background: var(--parede); }
@media (prefers-reduced-motion: no-preference) {
  .skel { animation: skel 1.4s var(--e-out) infinite alternate; }
  .skel:nth-child(2n) { animation-delay: 200ms; }
}
@keyframes skel { from { opacity: 1; } to { opacity: 0.45; } }

/* 1 · quantas pessoas: the sign's oval */
.numeros { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: var(--s3); max-width: 640px; }
.numeros.muitos { grid-template-columns: repeat(4, minmax(0, 1fr)); max-width: 440px; }
.opc-num { display: grid; place-items: center; min-width: 0; min-height: 68px; border-radius: var(--r-pill); }
.opc-num b { font: 800 clamp(1.75rem, 1.45rem + 1vw, 2.25rem)/1 var(--serif); font-variant-numeric: lining-nums tabular-nums; }
@media (max-width: 599px) {
  .numeros { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .opc-num { min-height: 60px; }
}

/* 2 · que dia: seven columns from Monday, six weeks from this one */
.calendario { max-width: 800px; }
.cal-mes { margin-bottom: var(--s3); font: 600 var(--t-label)/1.25 var(--sans); letter-spacing: var(--track-label); text-transform: uppercase; color: var(--fg-2); }
.cal-cab, .cal-grelha { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; }
.cal-cab { margin-bottom: 6px; }
.cal-cab span { font: 600 0.6875rem/1 var(--sans); letter-spacing: 0.1em; text-transform: uppercase; color: var(--fg-2); text-align: center; }
.opc-dia {
  display: grid; grid-template-rows: 0.75rem auto 0.875rem; justify-items: center; align-content: center; gap: 3px;
  min-width: 0; min-height: 84px; padding: var(--s2) 2px; border-width: 1px; border-color: var(--pedra-forte); border-radius: var(--r-1);
}
.cal-marca { font: 700 0.625rem/1.2 var(--sans); font-style: normal; letter-spacing: 0.1em; text-transform: uppercase; }
.cal-n { font: 800 1.5rem/1 var(--serif); font-variant-numeric: lining-nums tabular-nums; }
.cal-estado { max-width: 100%; font: 500 0.75rem/1.2 var(--sans); font-style: normal; color: var(--fg-2); overflow-wrap: normal; }
.opc-dia[aria-pressed="true"] .cal-estado, .opc-dia.opc-tocada .cal-estado { color: var(--tinta); }
.opc-dia.hoje:not(:disabled) { border-width: 2px; border-color: var(--tinta); }
.opc-dia:disabled .cal-n { text-decoration: line-through; text-decoration-thickness: 1.5px; }
.opc-dia:disabled .cal-estado { color: var(--basalto); }
.opc-dia:disabled .cal-marca { color: var(--basalto); }
/* past days and days beyond the window hold their place in the grid without asking for anything */
.opc-fora { border-color: transparent; cursor: default; color: var(--pedra-forte); }
.opc-fora .cal-n { font-weight: 600; opacity: 0.7; }
/* a day the server says has passed or left the window while the page was open: dimmed like the others, not struck */
.opc-dia.opc-fora:disabled { border-color: transparent; cursor: default; }
.opc-dia.opc-fora:disabled .cal-n { text-decoration: none; }
.opc-dia:focus-visible { outline-offset: 2px; }

.outra-data { display: grid; gap: var(--s2); margin-top: var(--s6); }
.outra-data label { font: 600 var(--t-label)/1.25 var(--sans); letter-spacing: var(--track-label); text-transform: uppercase; }
.outra-data .linha { display: flex; flex-wrap: wrap; gap: var(--s3); }
.outra-data input {
  min-height: 48px; min-width: 0; padding: 0 var(--s4); border: 1px solid var(--pedra-forte); border-radius: var(--r-1);
  background: #fff; color: var(--tinta); font: 400 1.0625rem/1 var(--serif); font-variant-numeric: lining-nums tabular-nums;
}
.outra-data input:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; border-color: var(--tinta); }
.outra-data input[aria-invalid="true"] { border-color: var(--pomodoro); }

/* 3 · a que horas */
.servico + .servico { margin-top: var(--s6); }
.servico-nome { display: flex; align-items: center; gap: var(--s3); margin-bottom: var(--s3); font: 600 var(--t-label)/1.25 var(--sans); letter-spacing: var(--track-label); text-transform: uppercase; color: var(--fg-2); }
.servico-nome::after { content: ""; flex: 1; height: 1px; background: var(--rule); }
.horas { display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: var(--s2); }
.opc-hora { display: grid; place-items: center; align-content: center; gap: 2px; min-height: 56px; padding: var(--s1) var(--s3); border-radius: var(--r-pill); }
.opc-hora b { font: 700 1.125rem/1.1 var(--serif); font-variant-numeric: tabular-nums lining-nums; }
.opc-hora em { font: 600 0.625rem/1.1 var(--sans); font-style: normal; letter-spacing: 0.08em; text-transform: uppercase; }
.opc-hora:disabled b { text-decoration: line-through; }
.opc-hora:disabled em { color: var(--basalto); }
@media (max-width: 599px) { .horas { grid-template-columns: repeat(auto-fill, minmax(76px, 1fr)); } .opc-hora { padding-inline: var(--s1); } }
.perto { margin-top: var(--s5); }
.perto-dias { display: grid; gap: var(--s2); max-width: 520px; }
.opc-perto { display: flex; justify-content: space-between; align-items: center; gap: var(--s3); min-height: 52px; padding: var(--s2) var(--s4); border-radius: var(--r-1); text-align: left; }
.opc-perto b { font: 700 1.0625rem/1.25 var(--serif); }
.opc-perto em { font: 500 0.75rem/1.2 var(--sans); font-style: normal; color: var(--fg-2); }

/* 4 · onde: a short list, like the zones on the panel */
.zonas { display: grid; gap: var(--s2); max-width: 560px; }
.opc-zona { display: grid; gap: 2px; justify-items: start; min-height: 64px; padding: var(--s3) var(--s4); border-radius: var(--r-1); text-align: left; }
.opc-zona b { font: 700 1.25rem/1.2 var(--serif); }
.opc-zona span { font-size: var(--t-small); color: var(--fg-2); }
.opc-zona[aria-pressed="true"] span, .opc-zona.opc-tocada span { color: var(--tinta); }
.opc-zona:disabled span { color: var(--basalto); }

/* 5 · em nome de quem */
.quem { display: grid; gap: var(--s5); max-width: 680px; }
.err-summary:focus-visible { outline-offset: 2px; }
.field label .op { font-weight: 400; letter-spacing: 0.04em; text-transform: none; }
.bk-regras { max-width: 60ch; }
.btn-reservar { flex-direction: column; gap: 4px; min-height: 64px; padding: var(--s3) var(--s6); white-space: normal; text-align: center; line-height: 1.15; }
.btn-reservar .b2 { font: 500 0.8125rem/1.3 var(--sans); letter-spacing: 0.02em; text-transform: none; }
.btn-reservar[aria-busy="true"] { cursor: progress; opacity: 0.8; }
.btn-reservar:disabled { pointer-events: none; }
/* on a phone the button stays at the bottom of the screen while the form scrolls; the site's bar steps aside */
@media (max-width: 899px) {
  .envio {
    position: sticky; bottom: 0; z-index: 5; margin-inline: calc(-1 * var(--gutter));
    padding: var(--s3) var(--gutter) calc(var(--s3) + env(safe-area-inset-bottom, 0px));
    background: var(--bg); border-top: 1px solid var(--rule);
  }
  .btn-reservar { width: 100%; }
  body:has(.quem) .actionbar { display: none; }
  body:has(.quem) { padding-bottom: 0; }
}

/* the confirmation */
.feita .ticket { margin-top: var(--s6); }
.feita [data-r=email] { display: inline-block; max-width: 100%; overflow-wrap: anywhere; }

/* ---------- movimento: a troca de passo ----------
   Only when the script swaps the step. Forward enters from the right, back from the left: the direction is the
   information. The old step starts leaving on the tap, while the request is out, and never fades to nothing, so
   there is no empty flash between the two. Fill mode is `backwards` so that, once in, the options answer :active. */
@keyframes palco-frente { from { opacity: 0; transform: translateX(30px); } to { opacity: 1; transform: none; } }
@keyframes palco-tras { from { opacity: 0; transform: translateX(-30px); } to { opacity: 1; transform: none; } }
@keyframes opc-entra { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes elo-escreve { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
.palco-frente { animation: palco-frente 320ms var(--e-out) backwards; }
.palco-tras { animation: palco-tras 320ms var(--e-out) backwards; }
.palco-sai { opacity: 0.14; transform: translateX(-14px); pointer-events: none; transition: opacity 120ms var(--e-out), transform 120ms var(--e-out); }
.palco-sai-tras { transform: translateX(14px); }
/* options come in the order they are read; the sweep is capped so 42 calendar cells do not take half a second */
.palco-frente .opc, .palco-tras .opc, .entra .opc { animation: opc-entra 300ms var(--e-out) backwards; animation-delay: min(calc(var(--i, 0) * 11ms), 240ms); }
.elo-escreve .elo-v { animation: elo-escreve 360ms var(--e-out) 80ms backwards; }
@media (prefers-reduced-motion: reduce) {
  .palco-frente, .palco-tras, .palco-frente .opc, .palco-tras .opc, .entra .opc, .elo-escreve .elo-v { animation: none; }
  .palco-sai { opacity: 1; transform: none; transition: none; }
  .opc { transition: none; }
  .opc:not(:disabled):not(.opc-fora):active { transform: none; }
}

/* phones: the espinha keeps its words, the calendar keeps seven columns */
@media (max-width: 599px) {
  .espinha { grid-template-columns: repeat(5, minmax(0, auto)); }
  .elo > a, .elo > span { padding: var(--s2) var(--s2) var(--s3); }
  .elo-t { font-size: 0.625rem; letter-spacing: 0.06em; }
  .elo-v { font-size: 0.9375rem; }
  .v-longo { display: none; }
  .v-curto { display: inline; }
  .cal-cab, .cal-grelha { gap: 4px; }
  .cal-cab span { font-size: 0.625rem; letter-spacing: 0.04em; }
  .opc-dia { grid-template-rows: 0.625rem auto 1.375rem; gap: 2px; min-height: 68px; padding: 6px 1px; }
  .cal-marca { font-size: 0.5625rem; letter-spacing: 0.06em; }
  .cal-n { font-size: 1.25rem; }
  .cal-estado { font-size: 0.625rem; line-height: 1.1; letter-spacing: 0; }
}
@media (max-width: 360px) { .cal-cab, .cal-grelha { gap: 3px; } }

/* ---------- details form, shared with the manage page ---------- */
.fields { display: grid; gap: var(--s4); grid-template-columns: 1fr; }
@media (min-width: 600px) { .fields { grid-template-columns: 1fr 1fr; } .fields .full { grid-column: 1 / -1; } }
.field { display: grid; gap: var(--s2); align-content: start; }
.field label { font: 600 var(--t-label)/1.2 var(--sans); letter-spacing: var(--track-label); text-transform: uppercase; }
.field input, .field textarea {
  width: 100%; min-height: 50px; padding: var(--s3) var(--s4); border: 1px solid var(--pedra-forte); border-radius: var(--r-1);
  background: #fff; color: var(--tinta); font: 400 1.0625rem/1.4 var(--serif);
}
.field input::placeholder { color: var(--basalto); opacity: 0.7; }
.field textarea { min-height: 96px; resize: vertical; }
.field input:focus-visible, .field textarea:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; border-color: var(--tinta); }
.field input[aria-invalid="true"] { border-color: var(--pomodoro); }
.field .opt-hint { font-size: var(--t-small); color: var(--fg-2); }
.err { display: flex; gap: var(--s2); align-items: flex-start; color: var(--pomodoro); font-size: var(--t-small); }
.err .ico { width: 18px; height: 18px; margin-top: 1px; }

.consent { display: grid; grid-template-columns: auto 1fr; gap: var(--s3); align-items: start; max-width: var(--measure); }
.consent input { width: 22px; height: 22px; margin: 2px 0 0; accent-color: var(--verde); }
.consent label { font-size: var(--t-small); line-height: 1.5; }
.consent-wrap { display: grid; gap: var(--s2); }
.err-summary { display: flex; gap: var(--s2); align-items: center; padding: var(--s3) var(--s4); background: var(--parede); color: var(--pomodoro); font-weight: 700; }

/* done and manage */
.ticket { display: grid; gap: var(--s5); max-width: 720px; padding: var(--s7) var(--s6); background: var(--parede); border-radius: var(--r-1); }
.ticket:focus-visible { outline: 2px solid var(--focus); outline-offset: 4px; }
@media (max-width: 599px) { .ticket { padding: var(--s6) var(--s4); } }
.ticket h2 { font-size: var(--t-h2); }
.ticket dl { display: grid; margin: 0; border-top: 2px solid var(--tinta); }
.ticket dl > div { display: grid; grid-template-columns: 7em 1fr; gap: var(--s4); padding-block: var(--s3); border-bottom: 1px solid var(--pedra); }
.ticket dt { font: 600 var(--t-label)/1.6 var(--sans); letter-spacing: var(--track-label); text-transform: uppercase; color: var(--fg-2); }
.ticket dd { margin: 0; font: 700 1.125rem/1.4 var(--serif); }
.ticket .code { font-family: var(--sans); letter-spacing: 0.1em; }
.confirm-box { display: grid; gap: var(--s3); padding: var(--s4); border: 1.5px solid var(--pomodoro); border-radius: var(--r-1); background: var(--carta); }
.manage-msg { max-width: var(--measure); display: grid; gap: var(--s4); }

/* privacy */
.legal { padding-block: var(--s7) var(--s9); }
.legal .prose { display: grid; gap: var(--s4); max-width: var(--measure); }
.legal h2 { font-size: var(--t-h3); margin-top: var(--s5); }
.legal ul { margin: 0; padding-left: 1.2em; display: grid; gap: var(--s2); }
/* secondary text on the wall colour is tinted from the ink, not grey */
.ticket, .err-summary, .aviso, .bk-demo { --fg-2: color-mix(in srgb, var(--tinta) 70%, var(--parede)); }
.ticket dt, .ticket .small { color: var(--fg-2); }