/* A janela do cartão (11/10/2026): os campos com a mesma cara dos campos do checkout do painel (.ck-input).
   As cores chegam do painel (tema claro ou escuro) e só entram depois de conferidas (campo.js). */
@font-face { font-family: 'Inter Tight'; src: url('fontes/inter-tight-400.woff2') format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Inter Tight'; src: url('fontes/inter-tight-700.woff2') format('woff2'); font-weight: 500 700; font-display: swap; }

:root {
  color-scheme: light;
  --fundo: transparent;
  --surface: #ffffff;
  --text: #111418;
  --text-muted: rgba(17, 20, 24, 0.6);
  --text-faint: rgba(17, 20, 24, 0.4);
  --border-strong: rgba(17, 20, 24, 0.22);
  --red: #c0392b;
  --red-bg: rgba(192, 57, 43, 0.12);
  --green: #1a7a4a;
  --accent-bg: rgba(212, 255, 60, 0.14);
}
:root[data-escuro] { color-scheme: dark; }

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; background: var(--fundo); }
body {
  font-family: 'Inter Tight', system-ui, -apple-system, 'Segoe UI', sans-serif;
  color: var(--text); font-size: 15px; line-height: 1.5;
}

/* 3 px de folga em volta para o brilho do foco não ser cortado; o painel compensa com margem negativa na janela, e
   os campos daqui ficam alinhados com os de lá. */
.cartao { display: grid; gap: 16px; padding: 3px 3px 4px; }
.linha { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.campo { display: grid; gap: 7px; min-width: 0; }
.rotulo { font-size: 13px; font-weight: 600; }

.caixa { position: relative; display: block; }
.entrada {
  width: 100%; height: 50px; padding: 0 15px; border: 1px solid var(--border-strong); border-radius: 12px;
  background: var(--surface); color: var(--text); font: inherit; font-size: 16px; letter-spacing: .02em;
  transition: border-color .15s ease, box-shadow .15s ease;
  -webkit-appearance: none; appearance: none;
}
.entrada::placeholder { color: var(--text-faint); letter-spacing: 0; }
.entrada:focus { outline: none; border-color: var(--text); box-shadow: 0 0 0 3px var(--accent-bg); }
.entrada:disabled { opacity: .6; }
.entrada--numero { padding-right: 64px; font-variant-numeric: tabular-nums; }
.entrada--nome { text-transform: uppercase; }
.entrada--nome::placeholder { text-transform: none; }
.campo--ok .entrada { border-color: var(--green); }
.campo--erro .entrada { border-color: var(--red); box-shadow: 0 0 0 3px var(--red-bg); }

.erro { display: none; font-size: 13px; color: var(--red); line-height: 1.45; }
.campo--erro .erro { display: block; }

/* A bandeira reconhecida pelo começo do número (texto, sem imagem de fora). */
.bandeira {
  position: absolute; right: 10px; top: 50%; transform: translateY(-50%);
  min-width: 44px; height: 26px; padding: 0 6px; border-radius: 6px; border: 1px solid var(--border-strong);
  display: none; align-items: center; justify-content: center;
  font-size: 10.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--text-muted);
  background: var(--surface);
}
.bandeira[data-tem] { display: inline-flex; }

@media (prefers-reduced-motion: reduce) { .entrada { transition: none; } }
@media (max-width: 360px) { .linha { gap: 10px; } .entrada { padding: 0 12px; } }