/**
* futbol-mesa CSS — partial 7/7: 07-checkout. Finalizar-compra.dc.html redesign (TSK checkout).
* Page header + step indicator, two-column checkout grid, billing/shipping/order-notes
* cards, the sticky order-review + payment sidebar, and the trust/payment badge rows.
* Load order is load-bearing (LRN-020/TSK-034): chained after 06-cart.css in
* functions.php, before storefront-woocommerce. Do NOT reorder. @package futbol-mesa
*
* Every selector here is scoped under `body.fm.woocommerce-checkout` (or a
* still more specific ancestor) per the TSK-034 specificity convention — no
* `!important` anywhere in this file. Several rules restyle WooCommerce's own
* markup directly (e.g. `#customer_details`, `.wc_payment_method`,
* `.woocommerce-terms-and-conditions-wrapper`) rather than a `.fm-` class,
* because those classes are also load-bearing for checkout.js (see the
* woocommerce/checkout/*.php override docblocks) — restyle in place, don't
* duplicate the markup.
*/
/* PAGE HEADER + STEP INDICATOR: title row directly followed by the meta row
(subtitle + steps) -- the "¿Ya tienes una cuenta?" notice now prints below
both (see inc/checkout.php, futbol_mesa_checkout_header_meta reorder), so
no gap is reserved between title and meta beyond the subtitle's own 8px
margin, matching Finalizar-compra.dc.html's tight title->subtitle spacing.
See tpl/checkout-header.php / tpl/checkout-header-meta.php. */
body.fm.woocommerce-checkout .fm-checkout-header-top {
max-width: var(--content-max);
margin: 0 auto;
padding: clamp(12px, 2vw, 18px) var(--content-gutter) 0;
}
body.fm.woocommerce-checkout .fm-checkout-header-meta {
max-width: var(--content-max);
margin: 0 auto;
padding: 0 var(--content-gutter) clamp(16px, 2vw, 24px);
display: flex;
flex-wrap: wrap;
align-items: flex-end;
justify-content: space-between;
gap: 16px;
}
body.fm.woocommerce-checkout .fm-checkout-header__title {
font-family: var(--font-heading);
font-size: clamp(2rem, 4vw, 2.8rem);
letter-spacing: -0.02em;
margin: 0;
}
body.fm.woocommerce-checkout .fm-checkout-header__subtitle {
margin: 8px 0 0;
font-size: 0.95rem;
color: var(--color-muted);
}
body.fm.woocommerce-checkout .fm-checkout-steps {
display: flex;
align-items: center;
gap: 10px;
list-style: none;
margin: 0;
padding: 0;
font-family: var(--font-heading);
font-weight: 700;
font-size: 0.82rem;
}
body.fm.woocommerce-checkout .fm-checkout-steps__step {
display: inline-flex;
align-items: center;
gap: 7px;
color: var(--color-muted);
}
body.fm.woocommerce-checkout .fm-checkout-steps__step--done {
color: var(--color-pitch-green);
}
body.fm.woocommerce-checkout .fm-checkout-steps__step--active {
color: var(--color-ink);
}
body.fm.woocommerce-checkout .fm-checkout-steps__bullet {
width: 22px;
height: 22px;
border-radius: 50%;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 0.7rem;
background: var(--color-cream);
border: 1px solid var(--color-hairline);
}
body.fm.woocommerce-checkout .fm-checkout-steps__step--done .fm-checkout-steps__bullet {
background: var(--color-pitch-green);
border-color: var(--color-pitch-green);
color: #fff;
}
body.fm.woocommerce-checkout .fm-checkout-steps__step--active .fm-checkout-steps__bullet {
background: var(--color-terracotta);
border-color: var(--color-terracotta);
color: #fff;
}
body.fm.woocommerce-checkout .fm-checkout-steps__connector {
width: 24px;
height: 1px;
background: var(--color-hairline);
}
/* Breadcrumb band: same vertical rhythm as the shop/cart bands (01-tokens-header.css),
extended to checkout here rather than editing that shared partial. */
body.woocommerce-checkout .storefront-breadcrumb {
max-width: var(--content-max);
margin: 0 auto;
padding: clamp(20px, 3vw, 28px) var(--content-gutter) 0;
}
body.woocommerce-checkout .storefront-breadcrumb .col-full {
max-width: none;
margin: 0;
padding: 0;
}
/* The checkout header, login/coupon toggles and form.checkout each carry their
own --content-max + --content-gutter container. Storefront also wraps the
page content in .col-full (same max-width + gutter), so without this the
gutter is applied twice and all body content lands 48px right of the logo and
breadcrumb. Neutralise the page .col-full on checkout and let those inner
wrappers be the sole container, matching the logo/breadcrumb left edge. */
body.fm.woocommerce-checkout .site-content > .col-full {
max-width: none;
margin: 0;
padding-left: 0;
padding-right: 0;
}
/* CHECKOUT GRID: form.checkout is the grid container itself (its two real
children, #customer_details and #order_review, are already the left/right
columns — no wrapper markup needed). */
body.fm.woocommerce-checkout form.checkout.woocommerce-checkout {
max-width: var(--content-max);
margin: 0 auto;
padding: 0 var(--content-gutter) clamp(48px, 6vw, 80px);
display: grid;
grid-template-columns: 1fr 400px;
gap: clamp(20px, 3vw, 40px);
align-items: start;
}
/* Validation error summary: checkout.js prepends this wrapper into
form.checkout on AJAX submit failure, with no grid-column/row of its own.
#customer_details/#order_review already claim both cells of row 1 outright,
so the auto-placement algorithm drops it into whichever cell is free --
observed landing in the 400px sidebar column, narrow and misaligned. Span
both tracks so it always reads as one full-width band, whatever row it
lands in. */
body.fm.woocommerce-checkout .woocommerce-NoticeGroup-checkout {
grid-column: 1 / -1;
}
/* Storefront's own `.woocommerce-error` (storefront/woocommerce.css) already
handles the icon, padding and list-reset -- but its flat #e2401c red isn't
the site's terracotta, and the content area's own `a{color:var(--color-
terracotta)}` (higher specificity than Storefront's `.woocommerce-error
a{color:#fff}` here) leaves each field-jump link a barely-legible,
underlined terracotta-on-red rather than a plain white line. */
body.fm.woocommerce-checkout ul.woocommerce-error {
background-color: var(--color-terracotta);
border-left: 0;
border-radius: var(--radius-card);
}
body.fm.woocommerce-checkout ul.woocommerce-error li a {
color: #fff;
text-decoration: none;
}
body.fm.woocommerce-checkout ul.woocommerce-error li a:hover {
opacity: 0.8;
}
/* WooCommerce focuses this list for screen readers on submit failure
(checkout.js `scroll_to_notices`); the browser's default blue ring clashes
with the terracotta card, so it's swapped for a brand-colored one instead
of dropped outright, keeping a visible focus indicator. */
body.fm.woocommerce-checkout ul.woocommerce-error:focus {
outline: 2px solid var(--color-terracotta-hover);
outline-offset: 2px;
}
body.fm.woocommerce-checkout #customer_details.col2-set {
grid-column: 1;
grid-row: 1;
width: 100%;
margin: 0;
float: none;
display: flex;
flex-direction: column;
gap: 20px;
}
body.fm.woocommerce-checkout #customer_details .col-1,
body.fm.woocommerce-checkout #customer_details .col-2 {
width: 100%;
margin: 0;
float: none;
display: flex;
flex-direction: column;
gap: 20px;
}
/* "Returning customer" login prompt + coupon toggle print via
woocommerce_before_checkout_form (WooCommerce's own hook for both), which
fires before