/*
 * ACAD1 Review Center — WooCommerce block Cart/Checkout override layer
 *
 * ⚠️ INSTABILITY WARNING (docs/research/woocommerce-brief.md §5, task-6-brief.md).
 * WooCommerce officially documents the block Cart/Checkout markup as PRIVATE
 * and subject to change without notice, and its own theming docs "strongly
 * discourage writing CSS based on existing block class names." This file
 * must therefore be reviewed after every major WooCommerce release, and any
 * rule here that stops matching should be treated as expected decay, not a
 * bug in this file.
 *
 * Defensive strategy used throughout:
 *   1. Only the "reasonably stable" roots named in Brief B §5 are targeted
 *      as class selectors — no invented `.wc-block-components-*` names
 *      beyond the two the research explicitly calls out as stable members
 *      (`.wc-block-components-button`,
 *      `.wc-block-components-order-summary-item__quantity`).
 *   2. Everywhere else (totals panel, order summary line items, payment
 *      method internals, form field internals) styling relies on CSS
 *      *inheritance* from the stable roots — font-family, color and
 *      font-variant-numeric set once on `.wc-block-cart` / `.wc-block-checkout`
 *      cascade to every descendant regardless of that descendant's private
 *      class name, so the design tracks even where we cannot safely name
 *      the element. Structural spacing/border rules use plain element
 *      selectors (input, select, textarea, label, button, a) scoped inside
 *      the stable sub-section roots, never long block-class chains.
 *   3. Radio/checkbox accent colour (payment method list, shipping options)
 *      is already covered site-wide by the unscoped
 *      `input[type="radio"], input[type="checkbox"]` rule in
 *      30-components.css — not repeated here.
 *
 * Scope note: this file styles the BLOCK cart/checkout only
 * (`woocommerce/cart` and `woocommerce/checkout` blocks, React-rendered).
 * It has zero effect on classic shortcode cart/checkout, which
 * 40-woocommerce.css owns — the two rendering paths are mutually exclusive
 * per page, so the files never conflict (Brief B §5).
 *
 * `!important` is used only on the primary button's colour pair, where
 * WooCommerce's own block styles ship an equally-specific
 * `.wp-element-button` rule that would otherwise tie on specificity and
 * fall back to source order (guide §0.6 / Global Constraint 7).
 */

/* ── roots: token inheritance for everything inside ─────────────────── */
.wp-block-woocommerce-cart,
.wc-block-cart,
.wp-block-woocommerce-checkout,
.wc-block-checkout {
  font-family: var(--a1-font);
  color: var(--a1-text);
}

.wp-block-woocommerce-cart :where(h1, h2, h3, h4),
.wc-block-cart :where(h1, h2, h3, h4),
.wp-block-woocommerce-checkout :where(h1, h2, h3, h4),
.wc-block-checkout :where(h1, h2, h3, h4) {
  font-weight: 800;
  letter-spacing: var(--a1-ls-heading);
  color: var(--a1-text);
}

/* numerals (totals, quantities, prices) read the same as the rest of the
   site wherever they appear inside cart/checkout, without needing to know
   the private class name of the amount wrapper */
.wp-block-woocommerce-cart,
.wc-block-cart,
.wp-block-woocommerce-checkout,
.wc-block-checkout {
  font-variant-numeric: tabular-nums;
}

/* ── buttons ─────────────────────────────────────────────────────────── */
.wc-block-components-button {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-family: var(--a1-font); font-weight: 700; font-size: var(--a1-body-sm);
  line-height: 1.2; text-transform: none; letter-spacing: 0;
  min-height: var(--a1-target-min); padding: 13px 22px;
  background: var(--a1-accent) !important; color: var(--a1-contrast) !important;
  border: 1px solid transparent; border-radius: var(--a1-r-btn);
  box-shadow: none; text-shadow: none;
}
.wc-block-components-button:hover {
  background: var(--a1-accent-lt) !important; color: var(--a1-contrast) !important;
}
.wc-block-components-button:focus-visible {
  outline: 2px solid var(--a1-accent); outline-offset: 2px;
}
.wc-block-components-button:disabled,
.wc-block-components-button[aria-disabled="true"] {
  background: var(--a1-disabled-bg) !important; color: var(--a1-disabled-fg) !important;
}

/* ── cart: submit / proceed-to-checkout wrapper ─────────────────────── */
.wc-block-cart__submit-container {
  margin-top: var(--a1-s-5);
}
.wc-block-cart__submit-container .wc-block-components-button {
  width: 100%;
}

/* ── order summary line items — inheritance only, one named exception ── */
.wc-block-components-order-summary-item__quantity {
  font-size: var(--a1-meta);
  color: var(--a1-secondary);
  font-variant-numeric: tabular-nums;
}

/* ── checkout: form fields ──────────────────────────────────────────── */
.wc-block-checkout__form :where(input[type="text"],
  input[type="email"],
  input[type="tel"],
  input[type="number"],
  input[type="password"],
  select,
  textarea) {
  width: 100%; font-family: var(--a1-font); font-size: var(--a1-body-sm);
  min-height: var(--a1-target-min); padding: 12px 13px;
  color: var(--a1-text); background: var(--a1-contrast);
  border: 1px solid var(--a1-border-strong); border-radius: var(--a1-r-input);
  box-shadow: none;
}
.wc-block-checkout__form :where(input, select, textarea):focus-visible {
  border-color: var(--a1-accent); outline: 2px solid var(--a1-accent); outline-offset: 1px;
}
.wc-block-checkout__form label {
  font-size: var(--a1-kicker); font-weight: 700; letter-spacing: var(--a1-ls-kicker);
  text-transform: uppercase; color: var(--a1-secondary);
}
/* The rule above is the FIELD-label treatment — the block-path equivalent of
   40-woocommerce.css's `.form-row label`, which is correctly narrowed there.
   Unscoped, it also hits every consent control in the block checkout: the
   terms-and-conditions checkbox, "Ship to a different address", "Save
   payment information". A 10.5px uppercase legal-consent label is a
   legibility problem, and on terms-and-conditions arguably worse than that.
   WooCommerce's checkbox control wraps its input in the <label> (the text
   input pattern does not — there the label is a sibling), so :has() picks
   out exactly the consent labels without naming a single private block
   class, which is this file's stated defensive strategy. Written as a
   separate override rather than a :not() on the rule above so that a
   browser without :has() support keeps today's behaviour instead of losing
   field-label styling entirely. */
.wc-block-checkout__form label:has(input) {
  font-size: var(--a1-body-sm); font-weight: 400; letter-spacing: normal;
  text-transform: none; color: var(--a1-text);
}

/* ── checkout: payment method list ──────────────────────────────────── */
.wc-block-checkout__payment-method {
  background: var(--a1-contrast); border: 1px solid var(--a1-border);
  border-radius: var(--a1-r-btn); padding: 15px; margin-bottom: var(--a1-s-2);
}