/* Checkout page. Styling layered on the fixed #cpg-* behavior ids. */
/* The page's Breakdance Section provides outer padding + centering; keep the
   checkout a focused column centered within it. width:100% so it fills up to the
   max-width (and never overflows the section on narrow viewports). */
#cpg-checkout {
  width: 100%;
  max-width: var(--pc-maxw);
  margin-left: auto;
  margin-right: auto;
}

/* Fields + inputs fill the column and never overflow (border-box so padding is
   inside the width). The label/input pairs are rendered inside .pc-field wrappers. */
#cpg-checkout .pc-field {
  width: 100%;
}
#cpg-checkout .pc-field input,
#cpg-checkout input[type="text"],
#cpg-checkout input[type="email"],
#cpg-checkout input[type="tel"] {
  width: 100%;
  box-sizing: border-box;
}
#cpg-checkout .pc-field label {
  display: block;
}

/* Sign-in strip at the very top of checkout. The cloak mechanism now hides the
   pre-render state (data-cpg-cloak reveals on cpgCloak.ready), so the old
   `:empty { display:none }` guard is removed — it hid the cloak/skeleton box
   before it could show. */
#cpg-signin {
  margin-bottom: var(--pc-space-4);
  font-size: 14px;
  color: var(--pc-color-muted);
}
.pc-signin__who {
  color: var(--pc-color-text);
}
.pc-signin__who strong {
  font-weight: 600;
}
/* Billing identity confirmation for a signed-in customer (the email/name/business
   fields are hidden for them; this reassures them what the order is billed under). */
.pc-signin__biz {
  color: var(--pc-color-muted);
  font-size: 14px;
  margin-top: 2px;
}
.pc-signin__biz strong {
  color: var(--pc-color-text);
  font-weight: 600;
}
.pc-signin__prompt {
  display: flex;
  align-items: baseline;
  gap: 4px;
  flex-wrap: wrap;
}
.pc-signin__toggle {
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  color: var(--pc-color-accent);
  font-size: 14px;
  font-weight: 600;
  text-decoration: underline;
}
.pc-signin__form {
  display: flex;
  flex-wrap: wrap;
  gap: var(--pc-space-2);
  align-items: center;
  margin-top: var(--pc-space-2);
}
.pc-signin__form[hidden] {
  display: none;
}
.pc-signin__email {
  flex: 1;
  min-width: 200px;
  padding: var(--pc-space-2) var(--pc-space-3);
  border: 1px solid var(--pc-color-border);
  border-radius: var(--pc-radius);
  font-size: 14px;
  box-sizing: border-box;
}
.pc-signin__send {
  flex: none;
}
.pc-signin__note {
  width: 100%;
  font-size: 13px;
  color: var(--pc-color-muted);
}

/* Order summary panel — a distinct card at the top so the customer always sees
   what they're buying (Shopify pattern). On wider viewports it sits in a right
   column beside the form. */
#cpg-order-summary {
  background: #faf9fb;
  border: 1px solid var(--pc-color-border);
  border-radius: var(--pc-radius);
  padding: var(--pc-space-4);
  margin-bottom: var(--pc-space-5);
}
/* `:empty { display:none }` removed — it hid the skeleton box while the summary
   was still loading (empty). The cloak/skeleton mechanism now owns that state. */

@media (min-width: 900px) {
  /* Two columns: form on the left, sticky summary on the right; the sign-in strip
     spans the full width at the top. */
  #cpg-checkout {
    max-width: 920px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 340px;
    gap: 0 var(--pc-space-5);
    align-items: start;
  }
  #cpg-signin {
    grid-column: 1 / -1;
    grid-row: 1;
  }
  #cpg-checkout-form {
    grid-column: 1;
    grid-row: 2;
  }
  #cpg-order-summary {
    grid-column: 2;
    grid-row: 2;
    margin-bottom: 0;
    position: sticky;
    top: var(--pc-space-4);
  }
  #cpg-thankyou {
    grid-column: 1 / -1;
  }
}
.pc-checkout__section-title {
  color: var(--pc-color-text);
  font-family: var(--pc-font-heading);
  font-weight: 600;
  font-size: 18px;
  margin: var(--pc-space-4) 0 var(--pc-space-3);
}
#cpg-quote-summary {
  background: #f7fafc;
  border: 1px solid var(--pc-color-border);
  border-radius: var(--pc-radius);
  padding: var(--pc-space-3);
  margin: var(--pc-space-3) 0;
}
#cpg-quote-summary .cpg-quote-total {
  font-weight: 700;
  color: var(--pc-color-text);
  margin-top: var(--pc-space-2);
}
#cpg-step-2[hidden] {
  display: none;
}
.pc-checkout__explainer {
  color: var(--pc-color-muted);
  font-size: 13px;
  line-height: 1.5;
  margin: var(--pc-space-1) 0 var(--pc-space-3);
}
.pc-checkout__explainer a {
  color: var(--pc-color-accent);
}
.pc-checkout__freight {
  display: flex;
  flex-direction: column;
  gap: var(--pc-space-2);
  margin: var(--pc-space-3) 0;
}
.pc-checkout__consent {
  display: flex;
  gap: var(--pc-space-2);
  align-items: flex-start;
  margin: var(--pc-space-3) 0;
  color: var(--pc-color-muted);
  font-size: 14px;
}
#cpg-card {
  border: 1px solid var(--pc-color-border);
  border-radius: var(--pc-radius);
  padding: var(--pc-space-3);
  min-height: 44px;
  margin: var(--pc-space-3) 0;
}

/* Browser-direct card entry (.pc-card*) now lives in the shared card.css, which
   is enqueued alongside card-mount.js on every surface that renders card
   fields — checkout, the freight pay page, and the account portal. */

/* Collapsed "Details" summary line (Step 1 once completed → editable). */
.pc-step-summary {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--pc-space-3);
  padding: var(--pc-space-3);
  margin-bottom: var(--pc-space-3);
  border: 1px solid var(--pc-color-border);
  border-radius: var(--pc-radius);
  background: #faf9fb;
}
.pc-step-summary[hidden] {
  display: none;
}
.pc-step-summary__text {
  color: var(--pc-color-text);
  font-size: 14px;
  min-width: 0;
  overflow-wrap: anywhere;
}
.pc-step-summary__edit {
  flex: none;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  color: var(--pc-color-accent);
  font-size: 14px;
  font-weight: 600;
  text-decoration: underline;
}

/* Disabled Pay (placeholder state). */
.pc-btn--disabled {
  opacity: 0.55;
  pointer-events: none;
}
#cpg-pay-now,
#cpg-verify-order {
  width: 100%;
}
#cpg-error {
  color: var(--pc-color-error);
  font-size: 14px;
  margin-top: var(--pc-space-2);
  display: none;
}
#cpg-thankyou {
  text-align: center;
  padding: var(--pc-space-5) 0;
}

/* A locked identity field (email/business/name for a signed-in customer): shows the
   account's stored value, not editable. Reads as intentionally fixed, not disabled. */
.pc-field--locked {
  background: #f4f3f5;
  color: var(--pc-color-muted);
  cursor: not-allowed;
}

/* --- Shortcode-rendered form (v0.22.0 checkout refactor). The form DOM now comes
   from [cpg_checkout_form]; these classes replace the per-element Breakdance styles
   the embedded fields used to carry. --- */

/* Section headings ("Contact", "Ship to", "Shipping charge", "Payment"). */
#cpg-checkout .pc-section-title {
  font-size: 20px;
  font-weight: 600;
  color: var(--pc-color-text);
  margin: var(--pc-space-5) 0 var(--pc-space-3);
}
#cpg-checkout .pc-section-title:first-child {
  margin-top: 0;
}

/* Signed-in identity bar (replaces the Contact form for logged-in customers). */
.pc-identity-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--pc-space-3);
  background: #faf9fb;
  border: 1px solid var(--pc-color-border);
  border-radius: var(--pc-radius);
  padding: var(--pc-space-3) var(--pc-space-4);
  margin-bottom: var(--pc-space-4);
}
.pc-identity-bar__who {
  font-size: 13px;
  line-height: 1.4;
}
.pc-identity-bar__who strong {
  display: block;
  font-size: 14px;
  color: var(--pc-color-text);
  font-weight: 600;
}
.pc-identity-bar__who span {
  color: var(--pc-color-muted);
}
.pc-identity-bar__menu {
  display: flex;
  gap: var(--pc-space-2);
  align-items: center;
  flex: none;
}
.pc-identity-bar__link {
  font-size: 13px;
  font-weight: 600;
  color: var(--pc-color-text);
  background: #fff;
  border: 1px solid var(--pc-color-border);
  border-radius: var(--pc-radius);
  padding: var(--pc-space-2) var(--pc-space-3);
  cursor: pointer;
  text-decoration: none;
}
.pc-identity-bar__link:hover {
  border-color: var(--pc-color-text);
}
.pc-identity-bar__link--muted {
  background: none;
  border-color: transparent;
  color: var(--pc-color-muted);
}
.pc-identity-bar__link[hidden] {
  display: none;
}

/* Step 2 wrapper (hidden until Continue-to-payment). */
.pc-step2[hidden] {
  display: none;
}

/* Freight-charge radio choices. */
.pc-freight-choice {
  display: flex;
  flex-direction: column;
  gap: var(--pc-space-2);
  margin-bottom: var(--pc-space-3);
}
.pc-freight-choice label {
  display: flex;
  align-items: flex-start;
  gap: var(--pc-space-2);
  font-size: 14px;
  cursor: pointer;
}

/* Saved-cards slot (Phase 4 wallet; JS fills it for signed-in users; hidden until then). */
.pc-saved-cards[hidden] {
  display: none;
}
.pc-saved-cards {
  margin-bottom: var(--pc-space-3);
}

/* Artwork soft-nudge under the pay button: inform, never block. */
.pc-checkout__artwork-note {
  margin: 12px 0 0;
  font-size: 13px;
  color: #6b7280;
  text-align: center;
}

/* Turnstile mount: empty in normal operation (the invisible challenge renders
   nothing the shopper sees), so it must never reserve space — :empty hides the
   bare div, and spacing lives on the INJECTED widget, not the container, so a
   Cloudflare-hidden iframe adds no phantom gap. When a visible puzzle renders
   (managed-mode escalation), it centers with breathing room so the
   scroll-into-view in checkout.js lands on something that reads as deliberate.
   Twin rule in portal/assets/portal.css (sign-in mount) — keep in sync. */
.pc-turnstile {
  display: flex;
  justify-content: center;
}
.pc-turnstile:empty {
  display: none;
}
.pc-turnstile > * {
  margin: 16px 0;
  width: 100%; /* size:'flexible' fills the container */
}