/* ============================================================================
 * MR Corn — pickup option cards + wider "Your order" column.
 * Loaded on cart + checkout by mu-plugins/mrcorn-checkout-pickup.php at
 * enqueue priority 110 — AFTER mrcorn-checkout/checkout.css (100) — so the
 * overrides here win by cascade order, never by !important wars.
 * Markup: WooCommerce's own cart-shipping.php template + the label/note
 * filters in mrcorn-checkout-pickup.php. Ports the approved mock
 * preview/checkout-pickup-option.html 1:1 (colors, radii, pill, note).
 * SAFETY: no rules touch #payment, .wc_payment_methods, .payment_box or add
 * blur/transform anywhere — the checkout skin's gateway-iframe guarantees hold.
 * ========================================================================== */

/* ---------- wider "Your order" column (desktop only; <=980px stacks via the
   main skin's display:block, which this must never override) ---------- */
@media (min-width: 981px) {
  body.woocommerce-checkout form.checkout.woocommerce-checkout {
    grid-template-columns: minmax(0, 1fr) 600px;
  }
}

/* ---------- shipping row: full-width block (generic fallback — cart page) ---------- */
tr.woocommerce-shipping-totals.shipping { display: block; padding: 2px 0; }
tr.woocommerce-shipping-totals.shipping th,
tr.woocommerce-shipping-totals.shipping td {
  display: block; width: 100%; padding: 0; border: none; background: none;
}

/* ---------- checkout: flex-ify the review table so the chooser row spans the
   FULL card width. A display:block <tr> inside a live table gets re-boxed into
   the table's column grid and falls short on the right — escaping table layout
   entirely (block table parts + flex rows) is the only deterministic fix.
   Selectors mirror the main skin's specificity so these win by cascade order. ---------- */
body.woocommerce-checkout .woocommerce-checkout-review-order-table,
body.woocommerce-checkout .woocommerce-checkout-review-order-table thead,
body.woocommerce-checkout .woocommerce-checkout-review-order-table tbody,
body.woocommerce-checkout .woocommerce-checkout-review-order-table tfoot {
  display: block; width: 100%;
}
body.woocommerce-checkout .woocommerce-checkout-review-order-table tr {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 0; width: 100%;
}
body.woocommerce-checkout .woocommerce-checkout-review-order-table th,
body.woocommerce-checkout .woocommerce-checkout-review-order-table td {
  flex: 0 0 auto;
}
/* the label/name cell takes the slack so prices right-align at the card edge */
body.woocommerce-checkout .woocommerce-checkout-review-order-table thead th.product-name,
body.woocommerce-checkout .woocommerce-checkout-review-order-table tbody td.product-name,
body.woocommerce-checkout .woocommerce-checkout-review-order-table tfoot tr > th {
  flex: 1 1 auto; min-width: 0;
}
/* chooser row: stacked, edge to edge */
body.woocommerce-checkout .woocommerce-checkout-review-order-table tfoot tr.woocommerce-shipping-totals.shipping {
  flex-direction: column; align-items: stretch; padding: 4px 0 2px;
}
body.woocommerce-checkout .woocommerce-checkout-review-order-table tfoot tr.woocommerce-shipping-totals.shipping > th,
body.woocommerce-checkout .woocommerce-checkout-review-order-table tfoot tr.woocommerce-shipping-totals.shipping > td {
  display: block; width: 100%; flex: none; padding: 0;
}
body.woocommerce-checkout .woocommerce-checkout-review-order-table tfoot tr.woocommerce-shipping-totals.shipping > th {
  font-size: 11px; letter-spacing: .08em; text-transform: uppercase;
  color: #4f6b60; font-weight: 700; margin: 10px 0 8px; text-align: left;
  border-bottom: 0;
}
/* Blocksy renders the chooser as a single colspan td with a div heading (no th):
   undo the skin's right-aligned tfoot td inside it and style the heading */
body.woocommerce-checkout .woocommerce-checkout-review-order-table tfoot tr.woocommerce-shipping-totals.shipping > td {
  text-align: left;
}
body.woocommerce-checkout .woocommerce-checkout-review-order-table .ct-shipping-heading {
  font-size: 11px; letter-spacing: .08em; text-transform: uppercase;
  color: #4f6b60; font-weight: 700; margin: 10px 0 8px; text-align: left;
}

/* ---------- option cards (mock: .sc-option) ---------- */
ul#shipping_method { list-style: none; margin: 0 0 4px; padding: 0; }
ul#shipping_method li {
  display: flex; flex-wrap: wrap; align-items: flex-start; gap: 12px;
  border: 1.5px solid rgba(20, 59, 48, .18);
  background: rgba(255, 255, 255, .72);
  border-radius: 14px;
  padding: 13px 14px;
  margin: 0 0 10px;
  transition: border-color .18s, box-shadow .18s, background .18s;
}
ul#shipping_method li:hover { border-color: rgba(36, 107, 82, .45); }
ul#shipping_method li:has(input.shipping_method:checked) {
  border-color: #246b52;
  background: rgba(36, 107, 82, .07);
  box-shadow: 0 0 0 3px rgba(36, 107, 82, .14);
}
ul#shipping_method li input.shipping_method {
  margin: 3px 0 0; accent-color: #1c5240; width: 17px; height: 17px;
  flex: none; cursor: pointer;
}
ul#shipping_method li label {
  flex: 1; min-width: 0; margin: 0; cursor: pointer; font-weight: 400;
}
.mcsp-wrap { display: flex; gap: 12px; align-items: flex-start; }
.mcsp-ico { font-size: 20px; line-height: 1.1; flex: none; }
.mcsp-body { flex: 1; min-width: 0; display: block; }
.mcsp-name {
  display: flex; align-items: center; justify-content: space-between;
  gap: 8px; flex-wrap: wrap;
  font-weight: 700; font-size: 14px; color: #0e2a22;
}
.mcsp-price,
.mcsp-price .woocommerce-Price-amount { font-weight: 800; white-space: nowrap; color: #0e2a22; }
.mcsp-pill {
  background: #f4b400; color: #0e2a22; font-size: 10.5px; font-weight: 800;
  letter-spacing: .05em; border-radius: 999px; padding: 3px 9px; white-space: nowrap;
}
.mcsp-sub {
  display: block; font-size: 12.5px; color: #4f6b60; margin-top: 3px;
  line-height: 1.45; font-weight: 400;
}

/* ---------- sale pricing on order lines: struck-through regular, bold sale ---------- */
.mcsp-was { display: inline-block; margin-right: 6px; }
.mcsp-was, .mcsp-was .woocommerce-Price-amount {
  color: #8fa39a; font-weight: 500; font-size: 12px; text-decoration: line-through;
}
ins.mcsp-now { text-decoration: none; }
ins.mcsp-now .woocommerce-Price-amount { color: #b42318; font-weight: 700; }

/* ---------- collection-address note (chosen pickup only; mock: .pickup-note) ---------- */
.mcsp-note {
  display: block; width: 100%;
  border: 1px solid rgba(244, 180, 0, .55);
  background: linear-gradient(0deg, rgba(244, 180, 0, .10), rgba(244, 180, 0, .10)), rgba(255, 255, 255, .8);
  border-radius: 12px;
  padding: 11px 13px;
  font-size: 12.5px; color: #13241e; line-height: 1.55;
}
.mcsp-note b { display: block; color: #0e2a22; }
.mcsp-addr { display: block; margin: 3px 0 2px; font-weight: 600; color: #0e2a22; }