/* Every number here is measured from a live Stripe Payment Element's computed styles
   (theme 'stripe', #1B3726, radius 10px, Inter) — rendered output, none of Stripe's
   code. Change one and tests/parity will tell you it no longer matches production. */

@import './field.css';

/* room for the four-logo strip; shrinks once a single brand is detected */
.sce-field--number .sce-input { padding-right: 151.2px; }
.sce-field--number.sce-has-brand .sce-input { padding-right: 46.4px; }
.sce-field--cvc .sce-input { padding-right: 51.2px; }

.sce-brands {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  gap: 4px;
  pointer-events: none;
}
.sce-b { display: flex; width: 24px; height: 16px; }
.sce-b svg { width: 24px; height: 16px; display: block; }
.sce-b--visa svg, .sce-b--mastercard svg, .sce-b--amex svg {
  box-shadow: 0 0 0 0.5px rgba(0, 0, 0, 0.06);
  border-radius: 2.5px;
}
.sce-b--other { display: none; }
.sce-brands:not([data-brand="unknown"]) .sce-b { display: none; }
.sce-brands[data-brand="visa"] .sce-b--visa,
.sce-brands[data-brand="mastercard"] .sce-b--mastercard,
.sce-brands[data-brand="amex"] .sce-b--amex,
.sce-brands[data-brand="discover"] .sce-b--discover,
.sce-brands[data-brand="other"] .sce-b--other { display: flex; }

.sce-cvc-hint {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  width: 24px;
  height: 16px;
  opacity: 0.6;
  pointer-events: none;
}
.sce-cvc-hint svg { width: 24px; height: 16px; display: block; }