/* Keep native expiry controls aligned with the 24px Spreedly input viewport.
   Loaded only by the audited checkout pages, after their variant styles. */
[data-next-payment-form="credit"] .input-flds.spreedly-field {
  display: flex;
  align-items: center;
  min-width: 0;
}
[data-next-payment-form="credit"] .spreedly-field iframe {
  display: block !important;
  flex: 1 1 0%;
  min-width: 0;
  width: 100% !important;
  height: 24px !important;
  border: 0 !important;
}
[data-next-payment-form="credit"] #credit_card_exp_month.input-flds,
[data-next-payment-form="credit"] #credit_card_exp_year.input-flds {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 24px;
  padding: 0 32px 0 11px !important;
}
/* Reserve space for the overlaid icons, including after SDK initialization. */
[data-next-payment-form="credit"] .form-input--with-help .input-flds.spreedly-field,
[data-next-payment-form="credit"] .form-input:has(> .form-input-icon) .input-flds.spreedly-field {
  padding-right: 44px !important;
}
/* Equal expiry columns and a full-width CVV share the other fields' edges. */
[data-next-payment-form="credit"] {
  container-type: inline-size;
  container-name: checkout-card;
}
[data-next-payment-form="credit"] .payment-expiry-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
[data-next-payment-form="credit"] .payment-expiry-row > .form-group {
  min-width: 0;
}
[data-next-payment-form="credit"] .payment-expiry-row > .form-group:last-child {
  grid-column: 1 / -1;
}
@container checkout-card (max-width: 360px) {
  [data-next-payment-form="credit"] .payment-expiry-row {
    grid-template-columns: minmax(0, 1fr);
  }
}
/* The single-row variant uses the same vertical center, without a text offset. */
[data-next-payment-form="credit"] .cc-line .cc-line__expin {
  padding: 0;
  line-height: 24px;
}
@media (max-width: 360px) {
  [data-next-payment-form="credit"] .cc-line__brand {
    display: none;
  }
}

/* Normalize the full standard form, including filled floating-label controls. */
[data-checkout-alignment="standard"] {
  --checkout-field-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}
[data-checkout-alignment="standard"] .input-flds {
  height: 49px !important;
  font-family: var(--checkout-field-font);
  font-size: 14px;
  font-weight: 400;
  line-height: 21px;
}
[data-checkout-alignment="standard"] .label-checkout {
  font-family: var(--checkout-field-font);
  font-size: 12px;
  line-height: 16px;
  font-weight: 400;
  top: 6px;
  margin: 0;
}
[data-checkout-alignment="standard"] .form-grid__row { margin-bottom: 0; }
[data-checkout-alignment="standard"] .form-group { min-width: 0; }
[data-checkout-alignment="standard"] .payment-method__label { flex-wrap: wrap; column-gap: 8px; row-gap: 6px; max-height: none; }
[data-checkout-alignment="standard"] .payment-method__input { flex-shrink: 0; margin: 0; }
[data-checkout-alignment="standard"] .payment-method__title { flex: 0 0 auto; margin-left: 0; }
[data-checkout-alignment="standard"] .payment-method__icons { position: static; margin-left: auto; }
/* Cardholder text stays centered when filled, like number, expiry, and CVV.
   Retain the associated label for assistive technology. */
[data-checkout-alignment="standard"] #cc-name.input-flds {
  padding: 0 11px !important;
  line-height: 24px;
}
[data-checkout-alignment="standard"] label[for="cc-name"] {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip-path: inset(50%);
  white-space: nowrap;
}
