<label class="if-card">
  <span class="if-card-label">Card number</span>
  <span class="if-card-wrap" data-if-card>
    <span class="if-card-brand" aria-hidden="true">CARD</span>
    <input
      type="text"
      name="cc"
      inputmode="numeric"
      autocomplete="cc-number"
      maxlength="19"
      placeholder="•••• •••• •••• ••••"
    />
  </span>
</label>

.if-card {
  display: grid;
  gap: 6px;
  width: 100%;
  max-width: 320px;
}

.if-card-label {
  font-family: "JetBrains Mono", monospace;
  font-size: 10px;
  letter-spacing: 0.12em;
  color: #b8b6d4;
  text-transform: uppercase;
}

.if-card-wrap {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 0 12px 0 14px;
  background: #1a1a22;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 10px;
  transition: border-color 0.2s;
}

.if-card-wrap:focus-within {
  border-color: #f5a84a;
}

.if-card-brand {
  font-family: "JetBrains Mono", monospace;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.08em;
  padding: 3px 7px;
  background: rgba(245, 168, 74, 0.12);
  color: #f5a84a;
  border-radius: 4px;
  flex-shrink: 0;
  transition:
    background 0.2s,
    color 0.2s;
}

.if-card-wrap[data-brand="visa"] .if-card-brand {
  background: rgba(67, 127, 193, 0.18);
  color: #6aa3e0;
}

.if-card-wrap[data-brand="mastercard"] .if-card-brand {
  background: rgba(255, 90, 90, 0.16);
  color: #ff7a7a;
}

.if-card-wrap[data-brand="amex"] .if-card-brand {
  background: rgba(46, 184, 138, 0.16);
  color: #2eb88a;
}

.if-card input {
  flex: 1;
  min-width: 0;
  padding: 13px 0;
  border: 0;
  outline: none;
  background: transparent;
  color: #f0eeff;
  font:
    600 14px/1 "JetBrains Mono",
    monospace;
  letter-spacing: 0.08em;
}

.if-card input::placeholder {
  color: #b8b6d4;
}

// Credit Card — auto-format groups of 4 + brand detection
document.querySelectorAll("[data-if-card] input").forEach(function (input) {
  var wrap = input.closest("[data-if-card]");
  var brand = wrap.querySelector(".if-card-brand");

  function detect(digits) {
    if (/^4/.test(digits)) return ["visa", "VISA"];
    if (/^(5[1-5]|2[2-7])/.test(digits)) return ["mastercard", "MC"];
    if (/^3[47]/.test(digits)) return ["amex", "AMEX"];
    if (/^6(011|5)/.test(digits)) return ["discover", "DISC"];
    return ["", "CARD"];
  }

  input.addEventListener("input", function () {
    var digits = input.value.replace(/\\D/g, "").slice(0, 19);
    input.value = (digits.match(/.{1,4}/g) || [""]).join(" ");
    var info = detect(digits);
    if (info[0]) wrap.setAttribute("data-brand", info[0]);
    else wrap.removeAttribute("data-brand");
    brand.textContent = info[1];
  });
});