/* Freight pay page. Reuses the storefront card styles (pc-card*) from checkout.
 * The page shell is a Breakdance page whose mount elements carry stable IDs
 * (#cpg-pay-freight wrapper + #cpg-freight-context/-card/-pay/-error/-done); the
 * container/structural rules key off those IDs (Breakdance keeps the ids, not the
 * classes, on html-to-page mount divs). The child rows the page JS builds inside
 * #cpg-freight-context carry the pc-freight__* classes the JS assigns, so those
 * stay class-based. */
#cpg-pay-freight { max-width: 480px; margin: 0 auto; }
#cpg-freight-context { margin: 0 0 1.25rem; }
/* Heading + reassurance so the page reads as a SHIPPING payment, not a 2nd checkout. */
.pc-freight__heading { font: 700 22px/1.25 -apple-system, Segoe UI, Roboto, sans-serif; color: #1a1f24; margin: 0; }
.pc-freight__subtitle { font: 14px/1.5 -apple-system, Segoe UI, Roboto, sans-serif; color: #646970; margin: 6px 0 0; }
/* Amount block: a "Shipping total" label over the figure, "for order #X" beneath. */
.pc-freight__amountwrap { margin: 18px 0 0; padding: 14px 0; border-top: 1px solid #edf0f2; border-bottom: 1px solid #edf0f2; }
.pc-freight__amountlabel { font: 600 12px/1.2 -apple-system, Segoe UI, Roboto, sans-serif; text-transform: uppercase; letter-spacing: .04em; color: #8a939b; }
.pc-freight__amount { font: 700 30px/1.15 -apple-system, Segoe UI, Roboto, sans-serif; color: #1a1f24; margin: 4px 0 0; }
.pc-freight__amountorder { font: 13px/1.4 -apple-system, Segoe UI, Roboto, sans-serif; color: #646970; margin: 2px 0 0; }
.pc-freight__order { font: 600 15px/1.4 -apple-system, Segoe UI, Roboto, sans-serif; color: #1a1f24; }
.pc-freight__note { font: 600 13px/1.5 -apple-system, Segoe UI, Roboto, sans-serif; color: #1a1f24; margin: 14px 0 0; }
.pc-freight__state { color: #646970; }
/* The product line(s) this freight covers — identifies which shipment a link is for.
 * (The __note header introduces this list, so no extra top divider here.) */
.pc-freight__lines { list-style: none; margin: 8px 0 0; padding: 0; }
.pc-freight__line { margin: 0 0 8px; }
.pc-freight__line:last-child { margin-bottom: 0; }
.pc-freight__line-title { display: block; font: 600 14px/1.4 -apple-system, Segoe UI, Roboto, sans-serif; color: #1a1f24; }
.pc-freight__line-meta { display: block; font: 12px/1.4 -apple-system, Segoe UI, Roboto, sans-serif; color: #646970; margin-top: 2px; }
#cpg-freight-pay { width: 100%; padding: .85rem 1rem; margin-top: 1rem; font: 600 15px/1 -apple-system, Segoe UI, Roboto, sans-serif; border: 0; border-radius: 8px; background: #1c6fe0; color: #fff; cursor: pointer; }
#cpg-freight-pay[disabled] { opacity: .6; cursor: default; }
#cpg-freight-error { color: #b00020; margin-top: 1rem; display: none; }
#cpg-freight-done { display: none; }

/* Card fields (cpgCardMount renders these into #cpg-freight-card). The .pc-card*
 * rules used to be mirrored here from checkout.css; they now live in the shared
 * card.css, enqueued alongside card-mount.js wherever card fields render. */
/* Separate the card form from the "what you're paying for" context above it. */
#cpg-freight-card { margin-top: 16px; }

/* Processing state on the Pay button (the .pc-btn--loading spinner keyframes live in
 * storefront-base.css). When loading, dim + show the shared spinner before the label. */
#cpg-freight-pay.pc-btn--loading { pointer-events: none; opacity: .8; }