/* Quadro isolado dos dados do cartão: mesmo desenho dos campos do HTML aprovado (label, borda, altura, erro). */
@font-face { font-family: "Guaruja Neue"; src: url("/checkout/assets/guaruja-neue-400.woff2?v=71c017a36d92733e") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Guaruja Neue"; src: url("/checkout/assets/guaruja-neue-500.woff2?v=3c0e1bdca038b6d7") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Guaruja Neue"; src: url("/checkout/assets/guaruja-neue-600.woff2?v=123c26501da8cafa") format("woff2"); font-weight: 600; font-display: swap; }
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; background: #fff; color: #000; }
body { font-family: 'Guaruja Neue', 'Helvetica Neue', Helvetica, Arial, sans-serif; -webkit-font-smoothing: antialiased; overflow: hidden; }
form { display: flex; flex-direction: column; gap: 16px; }
label { display: flex; flex-direction: column; gap: 6px; font-size: 13px; font-weight: 500; }
.row { display: flex; gap: 16px; }
.row label { flex: 1 1 0; min-width: 0; }
.wrap { position: relative; display: block; }
input { height: 52px; border: 1px solid #000; padding: 0 14px; font: inherit; font-size: 16px; font-weight: 400; background: #fff; color: #000; border-radius: 0; outline: none; width: 100%; }
input:focus { box-shadow: inset 0 0 0 1px #000; }
input.num { padding: 0 84px 0 14px; font-variant-numeric: tabular-nums; letter-spacing: 0.02em; }
input.tab { font-variant-numeric: tabular-nums; }
input.name { text-transform: uppercase; }
input.bad { border-color: #B3261E; }
.brand { position: absolute; right: 14px; top: 50%; transform: translateY(-50%); font-size: 12px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; }
.err { color: #B3261E; }
.err:empty { display: none; }