/* ============================================================
   COLLECTORS CERTIFIED GRADING — payment.css
   Shared styling for the client-side tokenization boundary
   (js/payment-tokenize.js). The card-entry panel renders with its
   OWN pt-* classes exclusively; this ONE stylesheet is loaded by
   every page that mounts it (submit.html Payment step +
   cc-checkout.html) so the payment component looks IDENTICAL on
   each. Builds on style.css tokens (dark theme). No page-specific
   selectors live here — keep it component-only.
   ============================================================ */

/* ---------------- panel wrapper ---------------- */
.pt-fields { min-width: 0; }

/* ---------------- field grid ---------------- */
.pt-grid {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 16px;
}
.pt-col-2 { grid-column: 1 / -1; }
.pt-field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.pt-field label {
  font-size: 11.5px; font-weight: 600; letter-spacing: .5px;
  text-transform: uppercase; color: var(--dim);
}
.pt-req { color: var(--cyan); }

/* ---------------- inputs ---------------- */
.pt-input {
  width: 100%; font: 14px var(--font-body); color: var(--text);
  background: rgba(6, 16, 25, .72); border: 1px solid rgba(166, 196, 224, .2);
  border-radius: 10px; padding: 10px 12px; outline: none;
  transition: border-color .2s, box-shadow .2s;
}
.pt-input:focus { border-color: var(--cyan); box-shadow: 0 0 0 3px rgba(54, 212, 249, .15); }
.pt-input::placeholder { color: var(--dim); opacity: .7; }

.pt-hint { font-size: 11.5px; color: var(--dim); line-height: 1.4; }

/* ---------------- inline brand badge ----------------
   The card mark sits INSIDE the number field, over a left inset the input only
   takes on while a badge is actually showing — an unidentified number keeps the
   full field width. The mark itself is inline SVG built in payment-tokenize.js:
   no external image, so it renders offline and under any CSP. */
.pt-input-wrap { position: relative; display: block; min-width: 0; }
.pt-brand {
  position: absolute; left: 10px; top: 50%; transform: translateY(-50%);
  width: 38px; height: 24px; line-height: 0; display: none; pointer-events: none;
}
.pt-brand.is-on { display: block; }
.pt-brand svg { display: block; }
.pt-input.pt-has-brand { padding-left: 56px; }

/* ---------------- invalid field + its message ----------------
   Same red the module's status line uses, so a field-level complaint and a
   gateway-level one read as one voice. */
.pt-input.pt-invalid {
  border-color: var(--rose, #ff8095); box-shadow: 0 0 0 3px rgba(255, 128, 149, .13);
}
.pt-input.pt-invalid:focus {
  border-color: var(--rose, #ff8095); box-shadow: 0 0 0 3px rgba(255, 128, 149, .22);
}
.pt-err { font-size: 11.5px; line-height: 1.4; color: var(--rose, #ff8095); }
.pt-err[hidden] { display: none; }

/* ---------------- test-mode toggles ---------------- */
.pt-toggles { margin-top: 12px; display: flex; flex-direction: column; gap: 8px; }
.pt-check {
  display: flex; align-items: center; gap: 10px; margin: 0;
  font-size: 13.5px; color: var(--muted); cursor: pointer;
}
.pt-check input { width: 17px; height: 17px; accent-color: var(--cyan); cursor: pointer; flex-shrink: 0; }
/* the "simulate verification required" toggle is dev-facing — render it subtly */
.pt-toggle-action span { color: var(--dim); font-size: 12.5px; }

/* ---------------- responsive ---------------- */
@media (max-width: 560px) {
  .pt-grid { grid-template-columns: 1fr; }
}

/* ============================================================
   EXPRESS WALLETS (js/wallet-pay.js — D160)
   The wp-* rules are the wallet module's own classes, shared here
   for the same reason the pt-* card panel is: one stylesheet, every
   payment surface, identical component. The BUTTON ART is not ours
   on either wallet — Apple's mark is drawn by the browser via
   -webkit-appearance: -apple-pay-button (redrawing it by hand is
   against their program rules, and only a browser that can actually
   pay understands the value, which is exactly the population that
   sees the button), and Google's button arrives fully styled from
   client.createButton. We only size the boxes so the two sit as
   equals in one row.
   EVERY display rule below carries its explicit [hidden] companion
   (the D112 scar): a display rule at equal specificity silently
   beats the [hidden] attribute, and this file must never be the one
   that pins a wallet button open on a page that hid it.
   ============================================================ */
.wp-row { display: flex; gap: 12px; align-items: stretch; }
.wp-row[hidden] { display: none; }
.wp-btn-apple {
  -webkit-appearance: -apple-pay-button;
  -apple-pay-button-type: plain;
  -apple-pay-button-style: black;
  flex: 1 1 0; min-width: 0; height: 44px;
  margin: 0; padding: 0; border: 0; cursor: pointer;
}
.wp-btn-apple[hidden] { display: none; }
.wp-btn-apple:focus-visible { outline: 2px solid var(--cyan); outline-offset: 2px; }
/* Google's button fills this holder (buttonSizeMode: 'fill') so it matches the
   Apple button's box without restyling the button itself. */
.wp-google { flex: 1 1 0; min-width: 0; height: 44px; }
.wp-google[hidden] { display: none; }

/* wallet-level status line — merchant-validation failures and the like; a
   refused CHARGE speaks through the page's own error region, never here */
.wp-status { margin: 10px 0 0; font-size: 12.5px; line-height: 1.5; color: var(--rose, #ff8095); }
.wp-status[hidden] { display: none; }

/* "or pay with card" divider for pages without their own (pay-extras);
   submit.html keeps its established .wiz-or — same geometry, page palette */
.wp-or {
  display: flex; align-items: center; gap: 12px; margin: 18px 0;
  font-family: var(--font-display); font-size: 11.5px; font-weight: 600;
  letter-spacing: 1px; text-transform: uppercase; color: var(--dim);
}
.wp-or::before, .wp-or::after { content: ''; flex: 1; height: 1px; background: rgba(166, 196, 224, .2); }
.wp-or[hidden] { display: none; }

@media (max-width: 560px) {
  .wp-row { flex-direction: column; align-items: stretch; }
}