/*
 * 45-woocommerce-blocks.css — block Cart and Checkout. §6.10, §6.11.
 *
 * PHASE 2.
 *
 * ⚠ STABILITY WARNING. WooCommerce documents block Cart/Checkout markup as
 * PRIVATE and changes class names between minor releases without a deprecation
 * cycle. Every selector below is therefore a liability that must be re-verified
 * after each WooCommerce update, and the QA gate includes that check.
 *
 * We target block rather than classic because /cart/ on this site is already
 * block-rendered and Dokan Pro's vendor split is wired to that path — converting
 * it for styling convenience would be a live-commerce regression. This
 * contradicts spec §6.10/§6.11 deliberately; see docs/DECISIONS.md #4.
 */

.wp-block-woocommerce-cart,
.wp-block-woocommerce-checkout{
  --wp--preset--color--contrast:var(--color-text);
  font-family:var(--font-body);
}

.wc-block-components-button,
.wc-block-cart__submit-button,
.wc-block-components-checkout-place-order-button{
  border-radius:0;
  background:var(--color-accent-600);
  color:#fff;
  border:1px solid var(--color-accent-600);
  font-family:var(--font-body);
  font-weight:600;
}
.wc-block-components-button:hover,
.wc-block-cart__submit-button:hover,
.wc-block-components-checkout-place-order-button:hover{
  background:var(--color-accent-800);
  color:#fff;
  border-color:var(--color-accent-800);
}

.wc-block-components-text-input input,
.wc-block-components-country-input select,
.wc-block-components-state-input select{
  border-radius:0;
  border:1px solid var(--color-divider);
  background:var(--color-bg);
}

/* §6.10 — line items are rows separated by hairlines, not cards. */
.wc-block-cart-items__row{ border-bottom:1px solid var(--color-divider); }
.wc-block-cart-items__header{ border-bottom:2px solid var(--color-text); }

/* §6.10 / §6.11 — the totals panel is a blueprint card. Registration marks are
   added by inc/chrome.php, which appends .eng-blueprint to the sidebar wrapper. */
.wp-block-woocommerce-cart-order-summary-block,
.wp-block-woocommerce-checkout-order-summary-block{
  border:1px solid var(--color-divider);
  background:transparent;
  padding:var(--space-4);
}

/* ==========================================================================
   §6.10 / §6.11 — structural work on the block cart and checkout.

   Everything below is defensive: WooCommerce documents this markup as private, so each
   selector is a liability re-verified after every Woo update. Rules are additive
   (colour, border, spacing) and never reorder or hide block internals, so a class
   rename degrades to "unstyled" rather than "broken layout".
   ========================================================================== */

/* Page furniture: the block templates render their own H1s and step copy. */
.wp-block-woocommerce-cart .wc-block-cart__submit-container,
.wp-block-woocommerce-checkout .wc-block-checkout__actions{
  border-top:2px solid var(--color-text);
  padding-top:var(--space-4);
}

/* §3.4 — square inputs, hairline borders, focus ring from 10-base.css. */
.wc-block-components-text-input input[type="text"],
.wc-block-components-text-input input[type="email"],
.wc-block-components-text-input input[type="tel"],
.wc-block-components-textarea,
.wc-block-components-select__container{
  border-radius:0;
  border:1px solid var(--color-divider);
  background:var(--color-bg);
}
.wc-block-components-text-input.is-active label,
.wc-block-components-text-input label{
  font-size:12px;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--color-muted);
}

/* Totals: the booking fee is a first-class line, not fine print (§8). */
.wc-block-components-totals-item{
  padding:8px 0;
  border-bottom:1px solid var(--color-divider);
  font-size:14px;
}
.wc-block-components-totals-footer-item{
  border-top:1px solid var(--color-text);
  border-bottom:0;
  padding-top:var(--space-3);
}
.wc-block-components-totals-footer-item .wc-block-components-totals-item__value{
  font-family:var(--font-heading);
  font-size:28px;
  font-weight:600;
}

/* Quantity stepper — square, hairline, matching the secondary button (§6.10). */
.wc-block-components-quantity-selector{
  border:1px solid var(--color-divider);
  border-radius:0;
}
.wc-block-components-quantity-selector__button{
  border-radius:0;
  color:var(--color-accent-800);
  min-width:36px;
}
.wc-block-components-quantity-selector__button:hover{
  background:var(--color-accent-100);
  color:var(--color-accent-900);
}

/* Remove link is a ghost action, never a warning colour — §12 allows no second hue. */
.wc-block-cart-item__remove-link{
  color:var(--color-accent-800);
  text-decoration:underline;
}
.wc-block-cart-item__remove-link:hover{ color:var(--color-accent-900); }

/* Payment method radios read as the segmented control from §3.4. */
.wc-block-components-radio-control__option{
  border:1px solid var(--color-divider);
  border-radius:0;
  margin-bottom:var(--space-2);
  /*
   * The LEFT padding is a reserve, not decoration.
   *
   * Woo positions the radio input absolutely against the option's left edge and relies
   * on a generous padding-left to keep the label clear of it. An even `padding:12px`
   * looks tidier in the stylesheet and silently drops the label on top of its own radio
   * button, which clipped the first characters off every payment method: "PayPal"
   * rendered as "Pal", "TEST TRANSACTION" as "ST TRANSACTION", "Cash (pay in person)"
   * as "h (pay in person)".
   *
   * --space-8 (48px) clears the input plus its offset at every font size we ship.
   */
  padding:var(--space-3) var(--space-4) var(--space-3) var(--space-8);
}
.wc-block-components-radio-control__option--checked-option-highlighted,
.wc-block-components-radio-control__option:has(input:checked){
  background:var(--color-accent-100);
  border-color:var(--color-accent-600);
}

/* Woo's own notices, on-palette. */
.wc-block-components-notice-banner{
  border-radius:0;
  border:1px solid var(--color-divider);
  background:var(--color-surface);
  color:var(--color-text);
}

/* §9 — commerce surfaces must not overflow at 430. */
@media (max-width:767px){
  .wc-block-cart-items__row{ grid-template-columns:1fr; }
  .wp-block-woocommerce-cart .wc-block-cart__submit-button,
  .wc-block-components-checkout-place-order-button{ width:100%; min-height:48px; }
}

/* ==========================================================================
   §6.11 Checkout — the guest-experience booking flow
   (page structure set on the page itself, behaviour in inc/checkout.php)

   Booking-platform layout rather than shop-till layout: one numbered column of
   decisions on the left, one sticky panel of facts on the right.
   ========================================================================== */

/*
 * THE GRID GOES ON WOO'S OWN SIDEBAR LAYOUT, not on the checkout block.
 *
 * The block renders three nested levels:
 *
 *   .wc-block-checkout.eng-checkout            <- the block wrapper
 *     .wc-block-components-sidebar-layout      <- Woo's own flex two-column
 *       .wc-block-checkout__sidebar            <- totals
 *       .eng-checkout__next                    <- our panel (injected here)
 *       .wc-block-checkout__main               <- the form
 *
 * Putting the grid on the outer wrapper — the obvious-looking place — laid out the
 * wrapper's children instead: scroll anchors and notice containers took the columns
 * and the entire real checkout was crushed into a single 708px cell. Everything must
 * be placed on the sidebar-layout, which is the element that actually holds the two
 * columns.
 */
.eng-checkout.wc-block-checkout{ display:block; margin-top:var(--space-6); }

.eng-checkout .wc-block-components-sidebar-layout{
  display:grid;
  grid-template-columns:minmax(0, 1fr) 380px;
  gap:var(--space-4) var(--space-6);
  align-items:start;
}

/* Explicit placement, because the DOM order is sidebar → panel → main but the reading
   order on a wide screen is form → summary. */
/*
 * width:auto is load-bearing on BOTH columns.
 *
 * Woo's sidebar-layout sets explicit percentage widths on main and sidebar for its own
 * flex layout. Those widths survive the switch to grid — an element in a 380px grid
 * track still honours its own `width` — so the summary rendered 133px wide inside its
 * 380px column and wrapped "Your booking" to one character per line. Resetting the
 * widths hands sizing back to the track.
 *
 * padding-right:0 on main for the same reason: Woo's 32px gutter is redundant once the
 * grid supplies the gap, and it ate into the form column.
 */
.eng-checkout .wc-block-checkout__main{
  grid-column:1;
  grid-row:1 / span 2;
  width:auto;
  max-width:none;
  min-width:0;
  padding-right:0;
}
.eng-checkout .wc-block-checkout__sidebar{
  grid-column:2;
  grid-row:1;
  width:auto;
  max-width:none;
  min-width:0;
  /*
   * The summary follows you down the page.
   *
   * top is a gutter rather than 0: a panel pinned flush to the viewport edge reads as
   * cut off. max-height plus overflow so a long cart cannot make the panel taller than
   * the screen and strand its own total below the fold — which would defeat the point.
   */
  position:sticky;
  top:var(--space-4);
  max-height:calc(100vh - var(--space-8));
  overflow-y:auto;
  border:1px solid var(--color-divider);
  padding:var(--space-4);
  /*
   * OPAQUE, not transparent.
   *
   * This is the sticky element. A transparent sticky panel lets whatever scrolls beneath
   * it show straight through, so the two texts render on top of each other. The panel it
   * used to collide with now lives inside it (inc/checkout.php), but a sticky surface
   * should be opaque regardless — anything that later scrolls past would collide too.
   */
  background:var(--color-bg);
}

/* --- numbered steps ------------------------------------------------------- */
/*
 * Each remaining form section is a step, numbered by a CSS counter.
 *
 * A counter rather than typed numbers because which sections render depends on the cart
 * and on the gateways available — the express-payment block appears only when a wallet
 * is configured. Hardcoded numbers would go 1, 2, 4.
 */
.eng-checkout .wp-block-woocommerce-checkout-fields-block{ counter-reset:eng-step; }

.eng-checkout .wc-block-components-checkout-step{
  counter-increment:eng-step;
  position:relative;
  border:0;
  border-top:1px solid var(--color-divider);
  padding:var(--space-6) 0 0 var(--space-6);
  margin:0 0 var(--space-6);
  background:transparent;
}
.eng-checkout .wc-block-components-checkout-step:first-child{ border-top:0; padding-top:0; }

.eng-checkout .wc-block-components-checkout-step::before{
  content:counter(eng-step);
  position:absolute;
  left:0;
  top:var(--space-6);
  font-family:var(--font-heading);
  font-size:18px;
  font-weight:600;
  /* accent-700, not accent: small text on the page ground has to clear 4.5:1 like any
     other body-sized element (build/audit-contrast.mjs). */
  color:var(--color-accent-700);
  line-height:1.2;
}
.eng-checkout .wc-block-components-checkout-step:first-child::before{ top:0; }

.eng-checkout .wc-block-components-checkout-step__title{
  font-family:var(--font-heading);
  font-size:22px;
  margin:0;
}
.eng-checkout .wc-block-components-checkout-step__description{
  color:var(--color-muted);
  font-size:14px;
}

/* --- payment methods as radio cards --------------------------------------- */
/*
 * The default block renders gateways as a bare radio list, which at five options reads
 * as a wall of text. Cards give each one a real hit target and make the selected state
 * obvious — the pattern every booking platform uses.
 */
/*
 * Style the BOX only — never the internals.
 *
 * An earlier version made this a flex container. Woo positions the radio input and its
 * label against each other with offsets that assume the default block flow, so turning
 * the parent into a flex row shifted every label left and clipped the first characters:
 * "PayPal" rendered as "Pal", "Cash (pay in person)" as "h (pay in person)". The border,
 * padding and selected state are ours; the arrangement inside stays Woo's.
 */
.eng-checkout .wc-block-components-radio-control__option{
  border:1px solid var(--color-divider);
  border-radius:0;
  /*
   * Vertical and right padding ONLY — padding-left is Woo's and must stay.
   *
   * Woo positions the radio input absolutely at the left edge and reserves room for it
   * with the option's own padding-left. Setting the shorthand `padding:12px 16px` reset
   * that reserve to 16px, so every label slid under its own radio button and lost its
   * first characters: "PayPal" rendered as "Pal", "TEST TRANSACTION" as "ST
   * TRANSACTION", "Cash (pay in person)" as "h (pay in person)".
   */
  padding-top:var(--space-3);
  padding-bottom:var(--space-3);
  padding-right:var(--space-4);
  padding-left:var(--space-8);
  margin:0 0 var(--space-2);
  /* 44px minimum hit target (§9); a bare radio row does not reach it. */
  min-height:44px;
  background:transparent;
  cursor:pointer;
}
.eng-checkout .wc-block-components-radio-control__option:hover{
  border-color:var(--color-accent-600);
  background:var(--color-accent-100);
}
.eng-checkout .wc-block-components-radio-control__option-checked{
  border-color:var(--color-accent-600);
  border-left-width:3px;
  background:var(--color-accent-100);
}
/* Woo draws its own ring for the selected dot and the default is a circle; §12 says
   square. */
.eng-checkout .wc-block-components-radio-control__input{ border-radius:0; }

/* Gateway logos vary wildly in size; cap them so one tall mark cannot set the height of
   every card in the list. */
.eng-checkout .wc-block-components-radio-control__option img{
  max-height:24px;
  width:auto;
}

/* --- order summary -------------------------------------------------------- */
.eng-checkout .wc-block-components-order-summary__content{ padding:0; }

.eng-checkout .wc-block-components-totals-item{
  padding:var(--space-2) 0;
  font-size:14px;
}
/* The grand total is the one number that must be unmissable. */
.eng-checkout .wc-block-components-totals-footer-item{
  border-top:2px solid var(--color-text);
  padding-top:var(--space-3);
  margin-top:var(--space-2);
  font-size:18px;
}
.eng-checkout .wc-block-components-totals-footer-item .wc-block-components-totals-item__value{
  font-family:var(--font-heading);
  font-weight:600;
}

/* Booking meta (date, time, guests) under each summary line — added by
   eng_checkout_show_booking_meta(). */
.eng-checkout .wc-block-components-product-details{
  margin:var(--space-2) 0 0;
  font-size:13px;
  color:var(--color-muted);
}
.eng-checkout .wc-block-components-product-details__name{ font-weight:600; }

/* --- what happens next ---------------------------------------------------- */
.eng-checkout__next{
  /* Row 2 of column 2 — directly under the summary it belongs to. */
  grid-column:2;
  grid-row:2;
  border:1px solid var(--color-divider);
  padding:var(--space-4);
}
.eng-checkout__next-title{
  font-family:var(--font-heading);
  font-size:12px;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--color-accent-700);
  margin:0 0 var(--space-3);
}
.eng-checkout__next-list{
  margin:0;
  padding:0;
  list-style:none;
  display:grid;
  gap:var(--space-2);
  font-size:14px;
}
.eng-checkout__next-list li{ position:relative; padding-left:16px; }
.eng-checkout__next-list li::before{
  content:"";
  position:absolute;
  left:0;
  top:8px;
  width:5px;
  height:5px;
  background:var(--color-accent);
}

/* --- place order ---------------------------------------------------------- */
.eng-checkout .wc-block-components-checkout-place-order-button{
  border-radius:0;
  min-height:52px;
  font-family:var(--font-body);
  font-weight:600;
  font-size:17px;
  background:var(--color-accent-600);
  color:#fff;
  border:1px solid var(--color-accent-600);
  width:100%;
}
.eng-checkout .wc-block-components-checkout-place-order-button:hover{
  background:var(--color-accent-800);
  border-color:var(--color-accent-800);
  color:#fff;
}

/* ==========================================================================
   Checkout — narrow screens
   ========================================================================== */

@media (max-width:1023px){
  /*
   * Single column, and the summary comes FIRST.
   *
   * On a phone the traveller wants to confirm what and how much before working through
   * the form. Stacking in source order would bury the total under the whole form, which
   * is the layout every booking platform explicitly avoids. Explicit grid rows do this
   * without the markup having to care.
   */
  .eng-checkout .wc-block-components-sidebar-layout{
    grid-template-columns:1fr;
    gap:var(--space-6);
  }
  .eng-checkout .wc-block-checkout__sidebar{
    grid-column:1;
    grid-row:1;
    /* Sticky is wrong once it is a full-width block at the top of the document: it
       would pin the whole summary over the form. */
    position:static;
    max-height:none;
    overflow:visible;
  }
  .eng-checkout__next{ grid-column:1; grid-row:2; }
  .eng-checkout .wc-block-checkout__main{ grid-column:1; grid-row:3; }
}

/* --- the "what happens next" panel, now nested in the sticky sidebar ------ */
/* It sits inside the summary rather than beside it, so it needs a separating rule
   rather than a box of its own. */
.eng-checkout .eng-checkout__next{
  grid-column:auto;
  border:0;
  border-top:1px solid var(--color-divider);
  padding:var(--space-4) 0 0;
  margin-top:var(--space-4);
}

/* ==========================================================================
   WooCommerce block buttons — contrast

   Woo's block buttons inherit their text colour from GeneratePress, which sets
   #222 on link and button elements. On the accent fill that measures 3.23:1 —
   below the 4.5:1 floor, and the exact dark-on-dark failure §3.1 warns about.
   This is the same bug already fixed once for .eng-btn--primary; it recurs on
   every new button class the stack introduces, so the fix is element-qualified
   to outrank `a.gb-text` and `.wp-element-button` rather than relying on order.

   White on accent-600 is 4.93:1, and 9.24:1 against the hover fill.
   ========================================================================== */

.wc-block-components-button:not(.wc-block-components-button--text),
a.wc-block-components-button:not(.wc-block-components-button--text),
button.wc-block-components-button:not(.wc-block-components-button--text),
.wc-block-components-button.wp-element-button,
a.wc-block-components-button.wp-element-button,
button.wc-block-components-button.wp-element-button{
  background:var(--color-accent-600);
  color:#fff;
  border:1px solid var(--color-accent-600);
  border-radius:0;
  min-height:44px;      /* §9 hit target */
  font-family:var(--font-body);
  font-weight:600;
  box-shadow:none;
}
.wc-block-components-button:not(.wc-block-components-button--text):hover,
a.wc-block-components-button:not(.wc-block-components-button--text):hover,
button.wc-block-components-button:not(.wc-block-components-button--text):hover,
.wc-block-components-button.wp-element-button:hover,
a.wc-block-components-button.wp-element-button:hover,
button.wc-block-components-button.wp-element-button:hover{
  background:var(--color-accent-800);
  color:#fff;
  border-color:var(--color-accent-800);
}

/* Woo renders the label in a nested span, which carries its own inherited colour and
   would otherwise keep the dark value the parent just fixed. */
.wc-block-components-button:not(.wc-block-components-button--text) .wc-block-components-button__text,
.wc-block-components-button.wp-element-button .wc-block-components-button__text{
  color:inherit;
}

/* The text-style variant is a link, not a fill — accent on the page ground. */
.wc-block-components-button--text,
a.wc-block-components-button--text,
button.wc-block-components-button--text{
  background:transparent;
  color:var(--color-accent-800);
  border:0;
}
.wc-block-components-button--text:hover{ color:var(--color-accent-900); }