/* Mamma Donella: the booking flow and «a minha reserva» (owner: reservas-front). Loaded after tokens.css and
   site.css; every value is a token from those files, none is redefined. The markup comes from
   site/src/_partes/reserva.mjs.

   Composition: one question per screen on cream. Above it, a paper band with the small page title and the
   spine of the steps, sitting on the dashed rule of the seal's ring; the step you are on carries a castanho bar.
   The options are the identity's paper tabs (2 px ink outline, radius 3 px, the house's hard shadow): pressed,
   a tab meets the wall (the offset goes) and turns castanho, the colour of the chosen house in the selector.
   The month is a printed calendar: hairlines between the weeks, no boxes; days that cannot be picked keep their
   word on the hatch of the unavailable. The summary is a paper note, the booking a paper ticket, the
   confirmation has the house's chalkboard. Terracota never appears here. */

/* ---------- the band: title and spine ---------- */

.reserva__topo { position: relative; background: var(--md-surface-alt); }
/* the dashed rule of the seal's ring closes the band */
.reserva__topo::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: var(--md-line-dash-thickness);
  background: var(--md-rule-strong);
  -webkit-mask: url("/assets/img/padroes/filete-anel.svg?v=a06560a2") left center / var(--md-line-dash-pitch) var(--md-line-dash-thickness) repeat-x;
          mask: url("/assets/img/padroes/filete-anel.svg?v=a06560a2") left center / var(--md-line-dash-pitch) var(--md-line-dash-thickness) repeat-x;
}
.reserva__topo > .wrap { position: relative; z-index: 1; display: grid; gap: var(--md-s-3); padding-top: var(--md-s-5); }
.reserva__cabeca { display: grid; gap: var(--md-s-1); }
.reserva__titulo { font: 400 var(--md-t-h3) / var(--md-lh-h3) var(--md-font-display); }
.reserva__intro { font-size: var(--md-t-small); line-height: var(--md-lh-small); color: var(--md-text-muted); max-width: 44ch; }
@media (min-width: 64em) { .reserva__topo > .wrap { gap: var(--md-s-4); padding-top: var(--md-s-6); } }

/* The spine. No label ever breaks or is cut: every answer and every step name stays on one line.
   Below 64em: the answers given (links back, the step's name only for screen readers), then the step you are
   on on its own line, «Passo 3 de 7: Dia», carrying the castanho bar; the steps still to come are left out.
   From 64em: one row under the title, each step as wide as its words, spread across the band. */
.espinha { list-style: none; margin: 0; padding: 0; }
.elo { position: relative; min-width: 0; }
.elo > a, .elo__caixa {
  position: relative; display: inline-flex; flex-direction: column; justify-content: center; gap: 2px;
  min-height: var(--alvo); padding: 6px 0 var(--md-s-3);
  color: var(--md-text); text-decoration: none;
}
.elo__t, .elo__n { font: 500 var(--md-t-label) / var(--md-lh-label) var(--md-font-text); letter-spacing: var(--md-tr-label); text-transform: uppercase; color: var(--md-text-muted); white-space: nowrap; }
.elo__v { display: inline-flex; align-items: center; gap: 4px; font: 600 0.9375rem / 1.25 var(--md-font-text); font-variant-numeric: var(--md-numeric); color: var(--md-action); white-space: nowrap; }
.elo__v .ico { width: 1em; height: 1em; flex: none; }
.elo > a .elo__v > span { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.22em; }
.elo--agora .elo__t, .elo--agora .elo__n { color: var(--md-text); font-weight: 600; }
/* the bar of the step you are on sits on the band's dashed rule, like a tab */
.elo--agora .elo__caixa::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: var(--md-line-dash-thickness);
  background: var(--md-action);
}
.elo > a:active { opacity: 0.72; }
@media (max-width: 63.99em) {
  .espinha { display: flex; flex-wrap: wrap; column-gap: var(--md-s-5); }
  .elo--feito .elo__t { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .elo--feito > a { padding-bottom: 0; }
  .elo--depois { display: none; }
  .elo--agora { order: 99; flex: 1 0 100%; }
  .elo--agora .elo__caixa { flex-direction: row; align-items: center; gap: 0.35em; }
}
@media (min-width: 64em) {
  .espinha { display: grid; grid-auto-flow: column; grid-auto-columns: max-content; justify-content: space-between; column-gap: var(--md-s-5); }
  .elo > a, .elo__caixa { display: flex; padding: var(--md-s-2) 0 var(--md-s-4); }
  /* the position is said by the row itself; «Passo 3 de 7» stays for screen readers */
  .elo__n { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .elo--depois .elo__t { color: var(--md-text-muted); }
}
@media (hover: hover) and (pointer: fine) {
  .elo > a:hover .elo__v > span { text-decoration-thickness: 2px; }
  .elo > a:hover .elo__t { color: var(--md-text); }
}

/* ---------- the stage: one question ---------- */

.reserva__palco { padding-block: var(--md-s-6) var(--md-s-8); }
.reserva__palco > * + * { margin-top: var(--md-s-5); }
.reserva__palco > .pergunta + * { margin-top: var(--md-s-5); }
@media (min-width: 64em) { .reserva__palco { padding-block: var(--md-s-7) var(--md-s-9); } }

.pergunta {
  max-width: 18ch;
  font: 400 var(--md-t-h2) / var(--md-lh-h2) var(--md-font-display); letter-spacing: var(--md-tr-h2);
  outline-offset: 6px; scroll-margin-top: var(--md-s-4);
}
.pergunta:focus:not(:focus-visible) { outline: none; }
.pergunta__sub { max-width: 46ch; font-size: var(--md-t-lead); line-height: var(--md-lh-lead); }

.nota-palco {
  display: flex; gap: var(--md-s-2); align-items: flex-start; max-width: 60ch;
  font-size: var(--md-t-small); line-height: var(--md-lh-small); color: var(--md-text-muted);
}
.nota-palco .ico { margin-top: 0.1em; color: var(--md-action); }
.nota-palco a { color: var(--md-action); font-weight: 600; }

/* ---------- options: one vocabulary for houses, people, times, zones and nearby days ----------
   The identity's paper tab. Pressed, it meets the wall and turns castanho at once (.is-tocada is set on the tap,
   before the server answers); the chosen one, when you come back, is castanho. */
.opc {
  position: relative; display: grid; place-items: center; min-width: 0;
  background: var(--md-paper); color: var(--md-ink); text-decoration: none;
  border: 2px solid var(--md-ink); border-radius: var(--md-r-button);
  box-shadow: var(--md-shadow-button);
  -webkit-user-select: none; user-select: none; -webkit-touch-callout: none;
  transition:
    transform var(--md-dur-press) var(--md-ease-out),
    box-shadow var(--md-dur-press) var(--md-ease-out),
    background-color var(--md-dur-hover) ease, color var(--md-dur-hover) ease;
}
a.opc:not(.is-off):active { transform: translate(4px, 4px); box-shadow: var(--md-shadow-button-pressed); }
.opc[aria-pressed="true"], .opc[aria-current="true"], .opc.is-tocada { background: var(--md-action); color: var(--md-on-action); }
.opc.is-tocada { transform: translate(4px, 4px); box-shadow: var(--md-shadow-button-pressed); transition: none; }
.opc:focus-visible { outline: 2px solid var(--md-focus); outline-offset: 4px; }
/* cannot be picked: the disabled button of the identity, dashed and flat, with the word on the hatch */
.opc.is-off {
  border-style: dashed; border-color: var(--md-ink-muted); box-shadow: none; color: var(--md-ink-muted);
  background-color: var(--md-paper);
  background-image: repeating-linear-gradient(135deg, var(--md-rule) 0 1px, transparent 1px 7px);
  cursor: not-allowed;
}
@media (hover: hover) and (pointer: fine) {
  a.opc:not(.is-off):not([aria-pressed="true"]):not([aria-current="true"]):not(.is-tocada):hover { background-color: var(--md-surface); }
}

/* 1: the house. The selector of the identity, larger: the house seal, the name in Gloock, the street. */
.casas { display: grid; gap: var(--md-s-5); max-width: 52rem; list-style: none; }
.casa-opc { display: grid; gap: var(--md-s-1); min-width: 0; }
.casa-opc__escolha {
  grid-template-columns: auto minmax(0, 1fr) auto; place-items: center start; column-gap: var(--md-s-4);
  min-height: 104px; padding: var(--md-s-3) var(--md-s-4) var(--md-s-3) var(--md-s-3);
}
.casa-opc__selo { width: 72px; height: 72px; border-radius: var(--md-r-round); }
.casa-opc__texto { display: grid; gap: 2px; min-width: 0; }
.casa-opc__nome { font: 400 var(--md-t-h3) / var(--md-lh-h3) var(--md-font-display); }
.casa-opc__rua { font-size: var(--md-t-small); line-height: 1.35; color: var(--md-text-muted); }
.casa-opc__seta { width: 24px; height: 24px; }
.casa-opc__escolha[aria-pressed="true"] .casa-opc__rua, .casa-opc__escolha[aria-current="true"] .casa-opc__rua,
.casa-opc__escolha.is-tocada .casa-opc__rua { color: var(--md-on-action); }
.casa-opc__tel { padding-left: var(--md-s-1); }
.casa-opc__tel a {
  display: inline-flex; align-items: center; gap: var(--md-s-2); min-height: var(--alvo);
  font-size: var(--md-t-small); font-weight: 500; color: var(--md-action);
  text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.22em;
}
.casa-opc__tel a:active { opacity: 0.72; }
@media (min-width: 40em) { .casas { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--md-s-6); } }
@media (max-width: 22.49em) {
  .casa-opc__escolha { column-gap: var(--md-s-3); padding-inline: var(--md-s-2) var(--md-s-3); }
  .casa-opc__selo { width: 56px; height: 56px; }
}

/* 2: how many people. Square tabs with the figure in Gloock, like the big numbers of the identity. */
.pessoas { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--md-s-3); max-width: 26rem; list-style: none; }
.pessoa { min-height: 64px; font: 400 2rem / 1 var(--md-font-display); font-variant-numeric: var(--md-numeric); }
@media (min-width: 48em) {
  .pessoas { grid-template-columns: repeat(8, minmax(0, 1fr)); gap: var(--md-s-4); max-width: 48rem; }
  .pessoa { min-height: 76px; font-size: 2.25rem; }
}
.mais-pessoas { display: grid; gap: var(--md-s-1); max-width: 40rem; margin-top: var(--md-s-7) !important; }
.mais-pessoas__titulo { display: flex; align-items: center; gap: var(--md-s-2); font-weight: 600; }
.mais-pessoas__titulo .ico { color: var(--md-action); }
.mais-pessoas__tel { font-size: var(--md-t-small); color: var(--md-text-muted); }
.mais-pessoas__tel a { display: inline-block; padding-block: 11px; margin-block: -11px; color: var(--md-action); font-weight: 600; }

/* 3: the month. Seven columns from Monday, six weeks from this one, hairlines between the weeks. */
.calendario { max-width: 44rem; }
.calendario__mes { margin-bottom: var(--md-s-2); font: 600 var(--md-t-h4) / var(--md-lh-h4) var(--md-font-text); }
.calendario__mes::first-letter { text-transform: uppercase; }
.calendario__semana, .calendario__grelha { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); }
.calendario__semana abbr {
  padding-block: var(--md-s-2); text-align: center; text-decoration: none;
  font: 500 var(--md-t-label) / 1 var(--md-font-text); letter-spacing: var(--md-tr-label); text-transform: uppercase; color: var(--md-text-muted);
}
.calendario__grelha { list-style: none; border-bottom: 1px solid var(--md-rule); }
.calendario__grelha > li { display: flex; min-width: 0; border-top: 1px solid var(--md-rule); }
.dia, .dia-vazio {
  flex: 1; display: grid; grid-template-rows: 13px auto minmax(1.1em, auto); align-content: center; justify-items: center; row-gap: 3px;
  min-height: 64px; padding: 6px 1px; text-align: center;
}
.dia { border: 0; border-radius: 0; box-shadow: none; background: transparent; }
.dia:focus-visible { z-index: 1; outline-offset: -2px; }
a.dia:not(.is-off):active { transform: scale(0.96); }
.dia.is-tocada { transform: none; }
.dia__marca { font: 600 0.6875rem / 13px var(--md-font-text); letter-spacing: 0.04em; text-transform: uppercase; }
.dia__n { font: 500 1.25rem / 1 var(--md-font-text); font-variant-numeric: var(--md-numeric); }
.dia__p { font: 500 0.6875rem / 1.1 var(--md-font-text); text-wrap: balance; }
.dia__p:empty { visibility: hidden; }
/* today: a castanho frame inside the cell; the chosen day is filled */
.dia.is-hoje { box-shadow: inset 0 0 0 2px var(--md-action); }
.dia.is-hoje .dia__marca { color: var(--md-action); }
.dia[aria-pressed="true"] .dia__marca, .dia[aria-current="true"] .dia__marca, .dia.is-tocada .dia__marca { color: inherit; }
.dia.is-almost .dia__p, .dia.is-filling .dia__p { color: var(--md-action); }
.dia[aria-pressed="true"] .dia__p, .dia[aria-current="true"] .dia__p, .dia.is-tocada .dia__p { color: inherit; }
/* closed, full, no times: the hatch, the word on its own patch of ground (6,12:1), never colour alone */
.dia.is-off { border: 0; color: var(--md-ink-muted); background-color: transparent; }
.dia.is-off .dia__p > span { background: var(--md-surface); padding: 1px 3px; }
.dia.is-hoje.is-off { box-shadow: inset 0 0 0 2px var(--md-ink-muted); }
/* beyond the window: no word, faded; past days are not links at all */
.dia.is-fora { background-image: none; }
.dia.is-fora .dia__n { color: rgba(10, 3, 3, 0.35); }
.calendario__grelha > .dia-vazio { display: grid; }
.dia-vazio .dia__n { font: 400 1.25rem / 1 var(--md-font-text); font-variant-numeric: var(--md-numeric); color: rgba(10, 3, 3, 0.3); }
/* the reason of a tapped day, under its own week (reservar.js), and the same words for screen readers */
.calendario__grelha > .calendario__linha-nota {
  grid-column: 1 / -1; display: block; margin: 0; padding: var(--md-s-3) var(--md-s-4);
  background: var(--md-action); color: var(--md-on-action);
  font-size: var(--md-t-small); line-height: var(--md-lh-small); font-weight: 500;
}
.calendario__nota { margin-top: var(--md-s-3); font-weight: 600; line-height: var(--md-lh-small); max-width: 60ch; }
.calendario__nota:empty { margin: 0; }
@media (hover: hover) and (pointer: fine) {
  a.dia:not(.is-off):not([aria-pressed="true"]):not([aria-current="true"]):not(.is-tocada):hover { background-color: var(--md-paper); }
}
@media (max-width: 29.99em) {
  /* edge to edge on a phone: seven columns keep 44 px at 320 */
  .calendario__semana, .calendario__grelha { margin-inline: calc(-1 * var(--md-s-gutter) + 4px); }
}
@media (min-width: 48em) {
  .dia, .dia-vazio { min-height: 76px; }
  .dia__n, .dia-vazio .dia__n { font-size: 1.5rem; }
  .dia__marca, .dia__p { font-size: 0.75rem; }
}

/* «Outra data» */
.outra-data { margin-top: var(--md-s-7) !important; }
.outra-data .md-field { max-width: 30rem; }
.outra-data__linha { display: flex; flex-wrap: wrap; gap: var(--md-s-3); align-items: center; }
.outra-data__linha input { flex: 1 1 11rem; min-width: 0; -webkit-appearance: none; appearance: none; }
.outra-data .md-btn { min-height: 52px; }

/* 4: the times, by service; the service's name runs into the dashed rule of the ring */
.servicos { max-width: 52rem; }
.servico + .servico { margin-top: var(--md-s-6); }
.servico__titulo { display: flex; align-items: center; gap: var(--md-s-4); margin-bottom: var(--md-s-4); font: 600 var(--md-t-h4) / var(--md-lh-h4) var(--md-font-text); }
.servico__titulo::after {
  content: ""; flex: 1 0 var(--md-s-6); height: var(--md-line-dash-thickness); background: var(--md-rule-strong); opacity: 0.55;
  -webkit-mask: url("/assets/img/padroes/filete-anel.svg?v=a06560a2") left center / var(--md-line-dash-pitch) var(--md-line-dash-thickness) repeat-x;
          mask: url("/assets/img/padroes/filete-anel.svg?v=a06560a2") left center / var(--md-line-dash-pitch) var(--md-line-dash-thickness) repeat-x;
}
.horas { display: grid; grid-template-columns: repeat(auto-fill, minmax(5.5rem, 1fr)); gap: var(--md-s-3); list-style: none; }
.horas > li { display: flex; }
.hora { flex: 1; display: flex; flex-direction: column; justify-content: center; gap: 2px; min-height: 56px; padding: var(--md-s-1) 4px; text-align: center; }
.hora__t { font: 600 1.0625rem / 1.1 var(--md-font-text); font-variant-numeric: var(--md-numeric); }
.hora__p { font: 500 0.75rem / 1.1 var(--md-font-text); text-wrap: balance; }
.hora.is-esgotado .hora__t { font-weight: 400; text-decoration: line-through; text-decoration-thickness: 1px; }
.hora.is-esgotado .hora__p > span { background: var(--md-paper); padding: 0 3px; }
@media (min-width: 48em) { .horas { grid-template-columns: repeat(auto-fill, minmax(6.5rem, 1fr)); gap: var(--md-s-4); } }
.servico__fechado { display: inline-block; padding: var(--md-s-3) var(--md-s-4); font-weight: 500; }

/* no time on the day: why, the nearest days that have one, the phone */
.sem-mesa { display: grid; gap: var(--md-s-4); max-width: 40rem; }
.sem-mesa__titulo { font: 400 var(--md-t-h3) / var(--md-lh-h3) var(--md-font-display); }
.sem-mesa__motivo { font-weight: 500; }
.alternativas__titulo { font-weight: 600; }
.alternativas { display: grid; gap: var(--md-s-3); max-width: 24rem; list-style: none; }
.alternativa {
  display: flex; justify-content: space-between; align-items: center; gap: var(--md-s-3);
  min-height: 56px; padding: var(--md-s-2) var(--md-s-4); font-weight: 600; text-align: left;
}
.ligacao--tras .ico { margin: 0 0.35em 0 0; }
@media (hover: hover) and (pointer: fine) { .ligacao--tras:hover .ico { transform: translateX(-3px); } }

/* 5: the zone, as rows: the icon, the name, and under it what it is or why it cannot be picked */
.zonas { display: grid; gap: var(--md-s-4); max-width: 30rem; list-style: none; }
.zona {
  display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "ico nome" "ico sub";
  place-items: center start; align-content: center; column-gap: var(--md-s-4); row-gap: 2px;
  min-height: 72px; padding: var(--md-s-3) var(--md-s-4); text-align: left;
}
.zona__ico { grid-area: ico; width: 26px; height: 26px; }
.zona__nome { grid-area: nome; font: 600 var(--md-t-h4) / 1.2 var(--md-font-text); }
.zona__sub { grid-area: sub; font-size: var(--md-t-small); line-height: 1.35; color: var(--md-text-muted); }
.zona[aria-pressed="true"] .zona__sub, .zona[aria-current="true"] .zona__sub, .zona.is-tocada .zona__sub { color: var(--md-on-action); }
.zona.is-off .zona__sub { color: var(--md-ink-muted); font-weight: 500; }
.zona.is-off .zona__sub > span { background: var(--md-paper); padding: 1px 4px; }
.zona.is-off .zona__nome { font-weight: 500; }

/* ---------- notices ---------- */

.aviso {
  display: flex; gap: var(--md-s-3); align-items: flex-start; max-width: 42rem;
  padding: var(--md-s-4) var(--md-s-5); background: var(--md-paper); border: 1px solid var(--md-rule-strong);
  outline-offset: 4px;
}
.aviso > .ico { margin-top: 0.15em; color: var(--md-action); }
.aviso__texto { display: grid; gap: var(--md-s-3); line-height: var(--md-lh-small); }
.aviso--erro { border: 2px solid var(--md-error); }
.aviso--erro > .ico { color: var(--md-error); }
.aviso:focus:not(:focus-visible) { outline: none; }
.aviso__acoes { display: flex; flex-wrap: wrap; align-items: center; gap: var(--md-s-3) var(--md-s-5); }
.falha__tels { display: flex; flex-wrap: wrap; gap: var(--md-s-4); list-style: none; }

/* ---------- 6: the details; 7: the confirmation ---------- */

.dados, .confirmar { max-width: 32rem; }
.dados > * + * { margin-top: var(--md-s-6); }
.dados > .dados__campos { margin-top: 0; }
.dados > .dados__enviar, .confirmar > .dados__enviar { margin-top: var(--md-s-4); }
.confirmar > * + * { margin-top: var(--md-s-6); }
.dados__mel { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.dados__campos > * + * { margin-top: var(--md-s-5); }
.dados__campos .md-field { max-width: 32rem; }
.dados__campos .md-hint + input, .dados__campos .md-hint + textarea, .dados__campos .md-hint + .campo-tel { margin-top: 2px; }
.md-field__opcional { font-weight: 400; color: var(--md-text-muted); }
.campo-tel { display: flex; min-width: 0; }
.campo-tel__prefixo {
  display: grid; place-items: center; flex: none; min-height: 52px; padding-inline: var(--md-s-3);
  background: var(--md-action); color: var(--md-on-action); font-weight: 600; border: 1px solid var(--md-action);
}
.campo-tel input { flex: 1; min-width: 0; }
.campo-tel.is-internacional .campo-tel__prefixo { display: none; }
.campo-contador { white-space: nowrap; }
.md-field .md-error[hidden] { display: none; }

.resumo-erros {
  max-width: 32rem; padding: var(--md-s-4) var(--md-s-5); background: var(--md-paper);
  border: 2px solid var(--md-error); outline-offset: 4px;
}
.resumo-erros:focus:not(:focus-visible) { outline: none; }
.resumo-erros__titulo { display: flex; gap: var(--md-s-2); align-items: center; font-weight: 600; color: var(--md-error); }
.resumo-erros ul { display: grid; gap: 2px; margin-top: var(--md-s-2); list-style: none; }
.resumo-erros a { display: inline-flex; align-items: center; min-height: 40px; color: var(--md-error); font-weight: 500; }
.resumo-erros li:not(:has(a)) { padding-block: var(--md-s-2); }

/* The summary, a paper note: what is booked and who for, with a way back to each answer. The house's rules
   follow, short, under the dashed rule of the ring. */
.nota-papel {
  max-width: 32rem; padding: var(--md-s-5); background: var(--md-paper);
  border: 2px solid var(--md-ink); box-shadow: var(--md-shadow-frame);
}
.nota-papel__titulo { margin-bottom: var(--md-s-3); font: 400 var(--md-t-h3) / var(--md-lh-h3) var(--md-font-display); }
.resumo__lista { margin: 0; }
.resumo__linha {
  display: grid; grid-template-columns: 5rem minmax(0, 1fr) auto; column-gap: var(--md-s-3); align-items: baseline;
  padding-block: var(--md-s-2); border-top: 1px solid var(--md-rule);
}
.resumo__linha dt { font: 500 var(--md-t-label) / var(--md-lh-label) var(--md-font-text); letter-spacing: var(--md-tr-label); text-transform: uppercase; color: var(--md-text-muted); }
.resumo__linha dd { margin: 0; font-weight: 600; }
.resumo__mudar a { display: inline-flex; align-items: center; min-height: var(--alvo); margin-block: calc((1.6em - var(--alvo)) / 2); font-size: var(--md-t-small); font-weight: 500; }
.resumo__mudar a:active { opacity: 0.72; }
.resumo__linha dd[data-campo] { overflow-wrap: anywhere; }
/* narrow phones: the label above its value, «Alterar» on the right of both */
@media (max-width: 25.99em) {
  .nota-papel { padding: var(--md-s-4); }
  .resumo__linha { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "rotulo mudar" "valor mudar"; row-gap: 2px; }
  .resumo__linha dt { grid-area: rotulo; }
  .resumo__linha dd:not(.resumo__mudar) { grid-area: valor; }
  .resumo__mudar { grid-area: mudar; align-self: center; }
}
.regras { position: relative; padding-top: var(--md-s-5); }
.regras::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: var(--md-line-dash-thickness); background: var(--md-rule-strong);
  -webkit-mask: url("/assets/img/padroes/filete-anel.svg?v=a06560a2") left center / var(--md-line-dash-pitch) var(--md-line-dash-thickness) repeat-x;
          mask: url("/assets/img/padroes/filete-anel.svg?v=a06560a2") left center / var(--md-line-dash-pitch) var(--md-line-dash-thickness) repeat-x;
}
.regras .dados__demo { margin-top: var(--md-s-4); }
.regras__titulo { font: 600 1rem / var(--md-lh-small) var(--md-font-text); }
.regras__pendente { margin-top: 2px; font-size: var(--md-t-credit); line-height: var(--md-lh-credit); }
.regras__lista { display: grid; gap: var(--md-s-2); margin-top: var(--md-s-2); list-style: none; font-size: var(--md-t-small); line-height: var(--md-lh-small); }
.regras__lista li { position: relative; padding-left: var(--md-s-5); }
/* the marker is one dash of the seal's ring */
.regras__lista li::before {
  content: ""; position: absolute; left: 2px; top: 0.68em;
  width: var(--md-line-dash-length); height: var(--md-line-dash-thickness); border-radius: 2px; background: var(--md-action);
}
.regras__lista a { font-weight: 600; }

.dados__fim { display: grid; gap: var(--md-s-3); max-width: 32rem; }
.dados__privacidade { display: flex; gap: var(--md-s-2); align-items: flex-start; font-size: var(--md-t-small); line-height: var(--md-lh-small); }
.dados__privacidade .ico { margin-top: 0.1em; color: var(--md-action); }
.dados__privacidade a { display: inline-block; padding-block: 11px; margin-block: -11px; font-weight: 600; }
.dados__demo { font-size: var(--md-t-credit); line-height: var(--md-lh-credit); color: var(--md-text-muted); }

/* The one button of the flow says what it does, in a sentence. On a phone it stays at the bottom of the screen
   (the page has no bottom bar: data-sem-barra); a field that takes focus is never left under it. */
.dados__enviar {
  position: sticky; bottom: 0; z-index: 2;
  margin-inline: calc(-1 * var(--md-s-gutter));
  padding: var(--md-s-3) var(--md-s-gutter) calc(var(--md-s-3) + env(safe-area-inset-bottom, 0px));
  background: var(--md-surface); border-top: 1px solid var(--md-rule);
}
.md-btn.dados__botao {
  width: 100%; justify-content: space-between; gap: var(--md-s-3);
  min-height: 56px; padding: var(--md-s-2) var(--md-s-4) var(--md-s-2) var(--md-s-5);
  white-space: normal; text-align: left; line-height: 1.3;
}
.dados__rotulo-curto { display: none; }
/* pressed too soon without the script: the same confirmation, and these words right above the button */
.dados__nota { margin-bottom: var(--md-s-2); font-size: var(--md-t-small); line-height: var(--md-lh-small); font-weight: 600; }
@media (max-width: 22.49em) {
  .dados__rotulo-longo { display: none; }
  .dados__rotulo-curto { display: inline; }
}
/* busy: still the castanho button, not the disabled one; the arrow turns into the spinning notch */
.md-btn.dados__botao[aria-busy="true"] { background: var(--md-action); color: var(--md-on-action); border-style: solid; border-color: var(--md-ink); box-shadow: var(--md-shadow-button-pressed); transform: translate(4px, 4px); cursor: progress; }
@media (max-width: 47.99em) { html:has(.dados__enviar) { scroll-padding-bottom: 120px; } }
@media (min-width: 48em) {
  .dados__enviar { position: static; margin: var(--md-s-5) 0 0; padding: 0; background: none; border: 0; }
  .md-btn.dados__botao { width: auto; max-width: 36rem; }
}
/* From 1024 px the confirmation has two columns: the note on the left; the rules and the button beside it. */
@media (min-width: 64em) {
  .confirmar {
    max-width: none; display: grid; grid-template-columns: minmax(0, 32rem) minmax(0, 28rem); column-gap: var(--md-s-9);
    grid-template-areas: "resumo regras" "resumo erros" "resumo enviar"; grid-template-rows: auto auto 1fr; align-items: start;
  }
  .confirmar > * + * { margin-top: 0; }
  .confirmar > .resumo { grid-area: resumo; }
  .confirmar > .regras { grid-area: regras; }
  .confirmar > .dados__enviar { grid-area: enviar; margin-top: var(--md-s-6); }
  .confirmar > .resumo-erros { grid-area: erros; margin-top: var(--md-s-6); }
  .confirmar .md-btn.dados__botao { width: 100%; }
}

/* ---------- «a minha reserva» ---------- */

.ficha__topo { display: grid; gap: var(--md-s-4); padding-block: var(--md-s-7) var(--md-s-6); }
.ficha__lead { max-width: 34em; }
.ficha__ate { font: 400 var(--md-t-h3) / var(--md-lh-h3) var(--md-font-display); }
@media (min-width: 48em) { .ficha__topo { padding-block: var(--md-s-8) var(--md-s-7); } }

.ficha { padding-bottom: var(--md-s-section); }
.ficha > * + * { margin-top: var(--md-s-6); }
.ficha__texto { max-width: var(--md-measure); }
.ficha__demo { display: flex; gap: var(--md-s-2); align-items: flex-start; max-width: 60ch; font-size: var(--md-t-small); line-height: var(--md-lh-small); color: var(--md-text-muted); }
.ficha__demo .ico { margin-top: 0.1em; color: var(--md-action); }
.ficha__grelha { display: grid; grid-template-columns: minmax(0, 1fr); row-gap: var(--md-s-7); align-items: start; }
@media (min-width: 64em) { .ficha__grelha { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); column-gap: var(--md-s-9); } }
.ficha__resumo { display: grid; gap: var(--md-s-6); max-width: 36rem; }
.ficha__lado { display: grid; gap: var(--md-s-6); align-content: start; }
.ficha__acoes { margin-top: var(--md-s-5); }
.falha__lista { display: grid; gap: var(--md-s-1); list-style: none; }
.falha__lista li { display: flex; flex-wrap: wrap; align-items: center; gap: var(--md-s-2); }
.falha__casa { font-weight: 600; min-width: 7.5em; }
.falha__lista a { display: inline-flex; align-items: center; min-height: var(--alvo); font-weight: 600; }

/* The booking, a paper ticket: the title and the state on top, the dashed rule, then label and value. */
.talao {
  padding: var(--md-s-5); background: var(--md-paper);
  border: 2px solid var(--md-ink); box-shadow: var(--md-shadow-frame);
}
.talao__cabeca { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--md-s-2) var(--md-s-4); }
.talao__titulo { font: 400 var(--md-t-h3) / var(--md-lh-h3) var(--md-font-display); }
.talao__estado { font: 500 var(--md-t-label) / var(--md-lh-label) var(--md-font-text); letter-spacing: var(--md-tr-label); text-transform: uppercase; }
.talao__estado.is-confirmada { padding: 4px 8px; background: var(--md-action); color: var(--md-on-action); }
.talao__estado.is-cancelada, .talao__estado.is-passada { color: var(--md-unavailable); background-image: repeating-linear-gradient(135deg, var(--md-rule) 0 1px, transparent 1px 7px); padding: 4px 8px; }
.talao__filete { margin: var(--md-s-4) 0 var(--md-s-2) !important; }
.talao__lista { margin: 0; }
.talao__linha {
  display: grid; grid-template-columns: 7.5rem minmax(0, 1fr); column-gap: var(--md-s-4); align-items: baseline;
  padding-block: var(--md-s-2); border-bottom: 1px solid var(--md-rule);
}
.talao__linha:last-child { border-bottom: 0; }
.talao__linha dt { font: 500 var(--md-t-label) / var(--md-lh-label) var(--md-font-text); letter-spacing: var(--md-tr-label); text-transform: uppercase; color: var(--md-text-muted); }
.talao__linha dd { margin: 0; font: 600 var(--md-t-h4) / 1.3 var(--md-font-text); overflow-wrap: anywhere; }
/* the code is read out over the phone: one line, never split at its hyphen */
.talao__codigo { letter-spacing: 0.06em; white-space: nowrap; }
.talao.is-cancelada .talao__linha dd { color: var(--md-text-muted); }
.talao__acoes { margin-top: var(--md-s-5); }
.talao__acoes .md-btn { max-width: 100%; white-space: normal; text-align: left; }
@media (max-width: 23.99em) {
  .talao { padding: var(--md-s-4); }
  .talao__linha { grid-template-columns: 5.75rem minmax(0, 1fr); column-gap: var(--md-s-3); }
  .talao__codigo { letter-spacing: 0.02em; }
}

.ficha__morada { display: flex; gap: var(--md-s-2); align-items: flex-start; font-size: var(--md-t-lead); line-height: 1.4; font-weight: 500; }
/* the street, then the postcode and the town: each a line of its own that never breaks */
.ficha__morada-linha { display: block; white-space: nowrap; }
@media (max-width: 25.99em) { .ficha__morada { font-size: var(--md-t-body); } }
.ficha__morada .ico { margin-top: 0.2em; color: var(--md-action); }
.ficha__ligacoes { display: flex; flex-wrap: wrap; gap: 0 var(--md-s-6); margin-top: var(--md-s-2); list-style: none; }
.ficha__ligacoes .ligacao .ico, .ficha__gerir .ligacao .ico, .ficha__copiar .ico { margin: 0 0.4em 0 0; vertical-align: -0.2em; }
.ficha__guardar, .ficha__gerir { display: grid; gap: var(--md-s-2); max-width: 40ch; }
.ficha__gerir a.num { display: inline-block; padding-block: 11px; margin-block: -11px; font-weight: 600; }
.ficha__copiar { justify-self: start; padding-inline: 0; background: none; border: 0; cursor: pointer; font: inherit; font-weight: 600; }
.ficha__giz { display: grid; justify-items: center; padding: var(--md-s-4) var(--md-s-2); }
.ficha__giz .md-board { width: min(100%, 24rem); --md-tilt: -0.8deg; }
.ficha__giz .md-board__line[lang] { font-style: normal; }
.cancelar .acoes { gap: var(--md-s-4); }

/* ---------- motion: the step swap ----------
   Only reservar.js adds these classes, so a page that arrives from the server is always fully visible. Forward
   comes in from the right, back from the left: the direction is the information. The exit starts on the tap,
   in parallel with the request; the stage dims, it never blanks. */
@keyframes reserva-frente { from { opacity: 0; transform: translateX(30px); } to { opacity: 1; transform: none; } }
@keyframes reserva-tras { from { opacity: 0; transform: translateX(-30px); } to { opacity: 1; transform: none; } }
@keyframes reserva-opcao { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes reserva-escreve { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes reserva-esqueleto { from { opacity: 0.5; } to { opacity: 1; } }
@keyframes reserva-esmaece { from { opacity: 0; } to { opacity: 1; } }
.palco-frente { animation: reserva-frente 320ms var(--md-ease-out) both; }
.palco-tras { animation: reserva-tras 320ms var(--md-ease-out) both; }
.palco-sai { opacity: 0.3; transform: translateX(-12px); transition: opacity 120ms var(--md-ease-out), transform 120ms var(--md-ease-out); pointer-events: none; }
.palco-sai--tras { transform: translateX(12px); }
/* the options come in one after the other: 11 ms apart, never more than 240 ms for the 42 days */
.palco-frente [data-opcoes] .opc, .palco-tras [data-opcoes] .opc {
  animation: reserva-opcao 280ms var(--md-ease-out) both;
  animation-delay: min(calc(var(--i, 0) * 11ms), 240ms);
}
/* the answer just given writes itself into the spine, left to right, like the chalk */
.elo--escreve .elo__v { animation: reserva-escreve 420ms var(--md-ease-out) 80ms both; }
.esqueleto__hora { display: block; flex: 1; min-height: 56px; border: 2px dashed var(--md-rule); border-radius: var(--md-r-button); }
.esqueleto__barra { display: inline-block; width: 6rem; height: 0.8em; background: var(--md-rule); }
.esqueleto { animation: reserva-esqueleto 900ms ease-in-out infinite alternate; }
.md-btn .ico--roda { animation: md-spin 900ms linear infinite; }

@media (prefers-reduced-motion: reduce) {
  .palco-frente, .palco-tras { animation: reserva-esmaece 160ms ease both; }
  .palco-frente [data-opcoes] .opc, .palco-tras [data-opcoes] .opc, .elo--escreve .elo__v, .esqueleto { animation: none; }
  .palco-sai, .palco-sai--tras { opacity: 0.5; transform: none; transition: opacity 120ms ease; }
  .opc { transition: background-color var(--md-dur-hover) ease, color var(--md-dur-hover) ease; }
  a.opc:not(.is-off):active, .opc.is-tocada, a.dia:not(.is-off):active, .md-btn.dados__botao[aria-busy="true"] { transform: none; }
  .md-btn .ico--roda { animation: none; }
}

@media print {
  .reserva__topo, .ficha__copiar, .ficha__gerir, .talao__acoes, .dados__enviar, .ficha__giz { display: none !important; }
  .talao { box-shadow: none; }
}