/* Card entry — the styles for the fields cpgCardMount renders.
 *
 * This is the CSS half of a SHARED component. card-mount.js is loaded by the
 * checkout, the freight pay page and the account portal, so its styling has to
 * travel with it: enqueue `cpg-card-style` anywhere `cpg-card-mount` is
 * enqueued, and the card form looks identical on all three.
 *
 * It used to be copy-pasted instead — defined in checkout.css and mirrored in
 * pay-freight.css with a comment explaining the duplication. The copies had
 * already drifted (only one of them styled the disabled state), and the portal
 * loaded neither, so its card form rendered as bare unstyled inputs. One file,
 * loaded with the component, is what stops that happening again.
 *
 * Tokens come from storefront-base.css, which every surface using this already
 * loads.
 *
 * (The PAN typed into these fields goes straight to Intuit's tokenizer and never
 * to our server — see card-mount.js.)
 */

.pc-card {
  display: flex;
  flex-direction: column;
  gap: var(--pc-space-3);
}

.pc-card__row {
  display: flex;
  gap: var(--pc-space-3);
}
.pc-card__row .pc-card__field {
  flex: 1;
  min-width: 0;
}

.pc-card__field {
  display: flex;
  flex-direction: column;
  gap: var(--pc-space-1);
}

.pc-card__label {
  color: var(--pc-color-muted);
  font-size: 12px;
}

.pc-card__input {
  width: 100%;
  padding: 10px 12px;
  font-size: 15px;
  box-sizing: border-box;
  border: 1px solid var(--pc-color-border);
  border-radius: var(--pc-radius);
  background: #fff;
  color: var(--pc-color-text);
}
.pc-card__input:focus {
  outline: none;
  border-color: var(--pc-color-accent);
  box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.04);
}
/* Was only in the pay-freight copy; it belongs to the component, so every
   surface gets it now. */
.pc-card__input:disabled {
  opacity: 0.6;
}