/* Mesmo desenho do .cx-mini.-cartao do modal (src/components/pagamento/ModalDePagamento.js). */
@font-face {
  font-family: 'Gantari';
  src: url('/gantari.woff2') format('woff2');
  font-weight: 100 900;
  font-display: swap;
}
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; background: transparent; }
#cartao { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 5px; padding: 1px; }
.l4 { grid-column: span 4; }
.l2 { grid-column: span 2; }
input {
  width: 100%;
  min-width: 0;
  height: 34px;
  padding: 0 8px;
  border: 1px solid rgba(45, 41, 38, 0.18);
  border-radius: 6px;
  background: #fff;
  color: #2d2926;
  font-family: 'Gantari', Arial, sans-serif;
  font-size: 13px;
  font-variant-numeric: tabular-nums;
}
input::placeholder { color: rgba(45, 41, 38, 0.42); }
input:focus { outline: none; border-color: #f15a22; }
input:disabled { background: rgba(45, 41, 38, 0.04); }