/* Loja online (páginas públicas, sem login). Folha própria: a app.css é do
   painel e traz nav, tabelas e formulários que aqui não fazem falta. */

/* Dois temas, os mesmos nomes da app.css. O adepto compra o bilhete de dia,
   no telemóvel, muitas vezes ao sol — o claro é o normal aqui também. */
:root {
  --ground: #EAEFE9;
  --surface: #FFFFFF;
  --surface-2: #E8EDE8;
  --sunken: #F2F5F1;
  --line: rgba(18, 45, 36, 0.14);
  --line-strong: rgba(18, 45, 36, 0.30);

  --text: #0E211A;
  --chalk: #44554D;
  --on-accent: #17110A;

  --amber: #7C600E;
  --amber-solid: #D8B45C;
  --amber-hover: #C8A44B;
  --amber-12: rgba(124, 96, 14, 0.12);
  --amber-16: rgba(124, 96, 14, 0.16);
  --amber-ring: rgba(124, 96, 14, 0.18);
  --amber-55: rgba(124, 96, 14, 0.55);

  --ok-text: #12603C;
  --ok-bg: rgba(27, 112, 72, 0.13);
  --ok-line: rgba(27, 112, 72, 0.35);
  --erro: #B3303C;
  --erro-bg: rgba(179, 48, 60, 0.10);
  --erro-line: rgba(179, 48, 60, 0.40);

  --shadow-1: 0 1px 2px rgba(14, 33, 26, .05), 0 6px 18px -10px rgba(14, 33, 26, .16);

  --pitch-dark: var(--ground);
  --pitch: #143026;
  --floodlight: var(--text);
  --red-card: var(--erro);
  --ok-green: var(--ok-text);

  --radius: 14px;
  --radius-sm: 9px;

  --display: 'Inter Tight', 'Inter', system-ui, sans-serif;
  --corpo: 'Inter', system-ui, -apple-system, sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  color-scheme: light;
}

:root[data-tema="escuro"] {
  --ground: #0C1E18;
  --surface: rgba(236, 239, 233, 0.07);
  --surface-2: rgba(236, 239, 233, 0.12);
  --sunken: rgba(0, 0, 0, 0.22);
  --line: rgba(236, 239, 233, 0.15);
  --line-strong: rgba(236, 239, 233, 0.32);

  --text: #ECEFE9;
  --chalk: #CCD4CC;

  --amber: #D8B45C;
  --amber-solid: #D8B45C;
  --amber-hover: #E4C275;
  --amber-12: rgba(216, 180, 92, 0.13);
  --amber-16: rgba(216, 180, 92, 0.17);
  --amber-ring: rgba(216, 180, 92, 0.16);
  --amber-55: rgba(216, 180, 92, 0.55);

  --ok-text: #8AD5AC;
  --ok-bg: rgba(99, 192, 141, 0.16);
  --ok-line: rgba(99, 192, 141, 0.45);
  --erro: #D94A56;
  --erro-bg: rgba(217, 74, 86, 0.16);
  --erro-line: rgba(217, 74, 86, 0.45);

  --shadow-1: 0 1px 2px rgba(0, 0, 0, .28), 0 10px 26px -18px rgba(0, 0, 0, .9);

  --pitch: #143026;
  color-scheme: dark;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  background: var(--ground);
  color: var(--floodlight);
  font-family: var(--corpo);
  /* a loja também não definia altura de linha: o texto do adepto — que é quem
     lê isto sem saber nada da app — ficava colado */
  font-size: 15px;
  line-height: 1.6;
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: "ss03" 1;
}

a { color: var(--amber); text-underline-offset: 3px; }
.mono { font-family: var(--mono); }
.muted { color: var(--chalk); opacity: .88; }
.small { font-size: 12.5px; }

.wrap { max-width: 760px; margin: 0 auto; padding: 32px 24px 72px; }
@media (max-width: 620px) { .wrap { padding: 22px 16px 64px; } }

/* ---------------------------------------------------------------- cabeçalho */
.store-head { display: flex; align-items: center; gap: 16px; padding: 8px 0 28px; }
.store-head img { width: 54px; height: 54px; object-fit: contain; }
.store-head .crest-fallback {
  width: 54px; height: 54px; border-radius: 14px; display: grid; place-items: center;
  background: var(--surface-2); border: 1px solid var(--line-strong);
  font-family: var(--display); font-weight: 650; font-size: 18px; color: var(--amber);
}
.store-head h1 { font-family: var(--display); font-weight: 620; font-size: 26px; margin: 0; letter-spacing: -.025em; }
.store-head .sub { color: var(--chalk); opacity: .9; font-size: 13px; margin-top: 2px; }

h2.title { font-family: var(--display); font-weight: 620; font-size: 19px; letter-spacing: -.025em; margin: 0 0 16px; }

/* ------------------------------------------------------------------- cartões */
.card {
  border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--surface); box-shadow: var(--shadow-1);
  padding: 24px; margin-bottom: 18px;
}
.game-card { display: flex; align-items: center; gap: 20px; text-decoration: none; color: inherit; }
.game-card { transition: border-color .15s ease, background-color .15s ease; }
.game-card:hover { border-color: var(--line-strong); background: var(--surface-2); }
.game-card .when {
  min-width: 62px; text-align: center; border-right: 1px solid var(--line); padding-right: 14px;
}
.game-card .when .d { font-family: var(--display); font-weight: 620; font-size: 25px; line-height: 1; letter-spacing: -.03em; }
.game-card .when .m { font-size: 11px; text-transform: uppercase; letter-spacing: 1px; opacity: .92; }
.game-card .what { flex: 1; min-width: 0; }
.game-card .what strong { display: block; font-size: 16px; margin-bottom: 3px; }
.game-card.past { opacity: .45; }
.game-card.past:hover { border-color: var(--line); }

/* -------------------------------------------------------------------- badges */
.badge {
  display: inline-block; padding: 3px 10px; border-radius: 999px; font-size: 10.5px;
  font-weight: 600; text-transform: uppercase; letter-spacing: .06em; white-space: nowrap;
}
.badge-ok { background: var(--ok-bg); color: var(--ok-green); }
.badge-off { background: var(--surface-2); color: var(--chalk); }
.badge-warn { background: var(--amber-16); color: var(--amber); }

/* --------------------------------------------------------------------- zonas */
.zone-row {
  display: flex; align-items: center; gap: 14px; padding: 12px 0;
  border-bottom: 1px solid var(--line);
}
.zone-row:last-child { border-bottom: 0; }
.zone-row .zone-name { flex: 1; min-width: 0; }
.zone-row .zone-name strong { display: block; font-size: 15px; }
.zone-row .price { font-family: var(--mono); font-size: 15px; white-space: nowrap; }
.zone-row select { width: 74px; }
.zone-row.sold-out { opacity: .5; }

input, select {
  font-family: inherit; font-size: 14px; color: var(--floodlight);
  background: var(--sunken); border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm); padding: 10px 12px; width: 100%;
  transition: border-color .14s ease, box-shadow .14s ease;
}
input:focus, select:focus {
  outline: none; border-color: var(--amber-55);
  box-shadow: 0 0 0 3px var(--amber-ring);
}
label { display: block; font-size: 11px; font-weight: 600; text-transform: uppercase;
        letter-spacing: .09em; color: var(--chalk); opacity: .88; margin-bottom: 7px; }
/* `text-transform` e `letter-spacing` herdam-se, e um <label> que **envolva**
   a caixa passa-os para dentro dela: quem escrevia o email numa dessas via-o
   em maiúsculas e espaçado. Aqui não fica ao critério de quem escreve o
   template — o que se escreve numa caixa sai como foi escrito. */
input, select, textarea { text-transform: none; letter-spacing: normal; }
.field { margin-bottom: 14px; }
.field-help { font-size: 12px; color: var(--chalk); opacity: .88; margin-top: 6px; line-height: 1.5; }

.total-row {
  display: flex; justify-content: space-between; align-items: baseline;
  margin: 6px 0 16px; font-size: 15px;
}
.total-row .amount { font-family: var(--display); font-weight: 620; font-size: 25px; letter-spacing: -.03em; font-feature-settings: "tnum" 1; }

.btn {
  display: inline-block; border: 1px solid transparent; border-radius: var(--radius-sm);
  padding: 13px 22px; font-family: inherit; font-size: 14.5px; font-weight: 600;
  letter-spacing: -.005em; cursor: pointer; text-align: center;
  background: var(--amber-solid); color: var(--on-accent); text-decoration: none;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .22), var(--shadow-1);
  transition: background-color .14s ease, border-color .14s ease;
}
.btn:hover { background: var(--amber-hover); }
.btn:active { filter: brightness(.93); }
.btn:disabled { opacity: .45; cursor: not-allowed; }
.btn-block { width: 100%; }
.btn-ghost {
  background: var(--surface); border-color: var(--line-strong);
  color: var(--floodlight); box-shadow: none;
}
.btn-ghost:hover { background: var(--surface-2); }

.flash { border-radius: 10px; padding: 11px 14px; margin-bottom: 14px; font-size: 14px; }
.flash-error { background: var(--erro-bg); border: 1px solid var(--erro-line); }
.flash-ok { background: var(--ok-bg); border: 1px solid var(--ok-line); }

.back { display: inline-block; margin-bottom: 14px; font-size: 13px; }
.empty { text-align: center; color: var(--chalk); opacity: .9; padding: 26px 0; }

/* ------------------------------------------------------------- confirmação */
.ticket-line {
  display: flex; align-items: center; gap: 14px; padding: 14px 0;
  border-bottom: 1px solid var(--line);
}
.ticket-line:last-child { border-bottom: 0; }
.ticket-line img { width: 92px; height: 92px; border-radius: 8px; background: #fff; padding: 5px; }
.ticket-line .info { flex: 1; min-width: 0; }
.ticket-line .code { font-family: var(--mono); font-size: 15px; letter-spacing: 1px; }

@media (max-width: 520px) {
  .zone-row { flex-wrap: wrap; }
  .zone-row select { width: 100%; }
  .store-head h1 { font-size: 21px; }
}

/* Contador do MB WAY — grande de propósito: quem está à espera tem 4 minutos
   e precisa de ver os segundos a passar, não um indicador a rodar. */
.mbway-contador {
  font-family: var(--mono);
  font-size: 2.6rem; font-weight: 600; letter-spacing: .04em;
  font-feature-settings: "tnum" 1;
  margin: 18px 0 6px; text-align: center; color: var(--floodlight);
}

/* Dados de fatura: fechado por omissão porque a esmagadora maioria não quer
   dar NIF por um bilhete de 8 €, e abrir o formulário todo a toda a gente é
   pedir para abandonar a compra. Abre sozinho quando a lei obriga. */
.field > summary {
  cursor: pointer; font-weight: 600; padding: 4px 0;
  list-style: none;
}
.field > summary::-webkit-details-marker { display: none; }
.field > summary::before { content: "＋ "; opacity: .6; }
.field[open] > summary::before { content: "－ "; }

/* Assinatura da Clever (ver templates/_powered.html). */
.powered {
  /* cor explícita e não `opacity`: a 45% o texto ficava em 3,39:1, abaixo do
     mínimo de 4,5:1 do WCAG AA. Este tom foi medido contra os fundos que a app
     usa e cumpre em todos. */
  text-align: center; font-size: 11.5px; margin: 22px 0 6px;
  color: var(--chalk);
}
.powered a { color: inherit; text-decoration: none; border-bottom: 1px solid currentColor; }
.powered:hover { color: var(--chalk); }

/* Foco visível também na loja: quem compra pode estar a navegar por teclado. */
a:focus-visible, button:focus-visible, input:focus-visible,
select:focus-visible, summary:focus-visible {
  outline: 2px solid var(--amber); outline-offset: 2px; border-radius: 4px;
}