/* ============================================================================
   HIGHLAND VAULT — WOOCOMMERCE CART & CHECKOUT BLOCKS
   ----------------------------------------------------------------------------
   The live site uses the WooCommerce Cart & Checkout *blocks* (verified), which
   are rendered by JS and can't be overridden with PHP templates — so we restyle
   them here to the design. Selectors target WooCommerce's stable `.wc-block-*`
   classes; a few (step numbers, payment tiles) may need a small tweak against
   the live rendered DOM on staging. Loaded only on cart/checkout.
   Design elements that come from plugins, not core (the bonus-credit nudge,
   "You will earn X points", trust badges), are added via the block editor /
   their plugins — this file styles them if present.
   ========================================================================== */

/* ---- Shared block component styling ------------------------------------- */
.wc-block-components-button,
.wc-block-components-button.contained {
  background: var(--hv-primary);
  color: var(--hv-primary-ink);
  border-radius: var(--hv-radius-sm);
  font-family: var(--hv-font);
  font-weight: var(--hv-fw-bold);
}
.wc-block-components-button:hover { filter: brightness(1.05); }

.wc-block-components-text-input input,
.wc-block-components-textarea,
.wc-block-components-select .wc-block-components-select__container {
  border-radius: var(--hv-radius-sm);
  border-color: var(--hv-line);
  font-family: var(--hv-font);
}
.wc-block-components-text-input.is-active label,
.wc-block-components-text-input input:focus { color: var(--hv-primary); }
.wc-block-components-text-input input:focus { box-shadow: var(--hv-ring); border-color: var(--hv-primary); }

/* Section / totals headings + prices */
.wc-block-components-title,
.wc-block-components-checkout-step__title { font-family: var(--hv-font); color: var(--hv-ink); font-weight: var(--hv-fw-bold); }
.wc-block-components-totals-item__value,
.wc-block-formatted-money-amount { font-family: var(--hv-font); }
.wc-block-components-totals-footer-item .wc-block-components-totals-item__value { color: var(--hv-primary); font-weight: var(--hv-fw-black); }

/* ---- Cart page — LIGHT (white) surface -----------------------------------
   The cart is a white page: re-assert the on-white token set + a white
   --hv-surface and light shadows/blue-tints so every card, the sidebar and the
   totals read dark-on-white (the base.css dark-surface scope no longer lists
   the cart). min-height keeps the footer off a near-empty cart. */
.hv-cart-canvas {
  --hv-surface: #fff;
  --hv-ink:    #111827;
  --hv-body:   #4B5563;
  --hv-muted:  #6B7280;
  --hv-line:   #E7EAF0;
  --hv-blue-050: #EAF1FE;
  --hv-blue-100: #D7E4FD;
  --hv-green-100: #E7F6EC;
  --hv-shadow-sm: 0 4px 16px rgba(16, 24, 40, .06);
  --hv-shadow:    0 10px 28px rgba(16, 24, 40, .10);
  padding-block: var(--hv-space-6); min-height: 52vh; overflow-x: clip;
}

/* Left-aligned page header: "Your Cart" + subtitle + hairline divider */
.hv-cart-canvas__head {
  text-align: left; margin-bottom: var(--hv-space-5);
  padding-bottom: var(--hv-space-4); border-bottom: 1px solid var(--hv-line);
}
.hv-cart-canvas__title {
  margin: 0; font-size: var(--hv-fs-h1); font-weight: var(--hv-fw-black);
  color: var(--hv-ink); line-height: 1.05;
}
.hv-cart-canvas__sub {
  margin: var(--hv-space-2) 0 0; color: var(--hv-muted);
  font-size: var(--hv-fs-body); font-weight: var(--hv-fw-medium);
}

/* Neutralise the parent theme's .alignwide { margin-inline: -80px } inside the
   cart (it clipped the left column / scrolled on mobile). */
.hv-cart-canvas .alignwide { margin-inline: 0 !important; max-width: 100% !important; }

@media (max-width: 600px) {
  .hv-cart-canvas { padding-block: var(--hv-space-5); }
  .hv-cart-canvas__head { margin-bottom: var(--hv-space-4); }
}

/* ---- Empty cart — premium branded state ----------------------------------
   Replaces WooCommerce's default sad-face + "New in store" grid with our own
   icon + message, the single-product Related Products component (reused verbatim
   — same .woocommerce ul.products grid + .hv-draw-card cards) and a premium
   primary "Back to Home" button. All rendered in cart-canvas.php; shown only
   when the cart is empty. The .hv-cart--empty class is set server-side (no
   flash) and kept in sync by hv.js on add/remove. */

/* Hide WooCommerce's built-in empty-cart content (image, copy, "New in store"). */
.hv-cart-canvas .wp-block-woocommerce-empty-cart-block { display: none !important; }

/* Our empty state: hidden on a filled cart, shown when .hv-cart--empty. */
.hv-empty-cart { display: none; }
.hv-cart-canvas.hv-cart--empty .hv-empty-cart { display: block; }
/* On an empty cart the premium CTA below replaces the filled-cart back button. */
.hv-cart-canvas.hv-cart--empty .hv-back-home { display: none !important; }

.hv-empty-cart__inner { text-align: center; max-width: 34rem; margin: 0 auto var(--hv-space-7); }
.hv-empty-cart__icon {
  width: 92px; height: 92px; margin: 0 auto var(--hv-space-4);
  display: grid; place-items: center; border-radius: 50%;
  background: var(--hv-blue-050); color: var(--hv-primary);
}
.hv-empty-cart__icon svg { width: 42px; height: 42px; display: block; }
.hv-empty-cart__title {
  margin: 0 0 var(--hv-space-2); font-size: var(--hv-fs-h3);
  font-weight: var(--hv-fw-black); color: var(--hv-ink); line-height: var(--hv-lh-snug);
}
.hv-empty-cart__text {
  margin: 0 auto; max-width: 30rem; color: var(--hv-muted);
  font-size: var(--hv-fs-body); line-height: var(--hv-lh-normal);
}

/* Related products — reuses .woocommerce ul.products + .hv-draw-card verbatim. */
.hv-cart-related { margin: 0 0 var(--hv-space-7); }
.hv-cart-related__title {
  text-align: center; margin: 0 0 var(--hv-space-5);
  font-size: var(--hv-fs-h3); font-weight: var(--hv-fw-black); color: var(--hv-ink);
}
.hv-cart-related .woocommerce { margin: 0; }

/* Premium "Back to Home" — primary button, centred below related products. */
.hv-empty-cart__cta { display: flex; justify-content: center; margin-top: var(--hv-space-2); }
.hv-empty-cart__cta .hv-btn { min-width: 260px; }
.hv-empty-cart__cta .hv-btn svg { display: block; flex: 0 0 auto; }

@media (max-width: 600px) {
  .hv-empty-cart__inner { margin-bottom: var(--hv-space-6); }
  .hv-empty-cart__icon { width: 76px; height: 76px; }
  .hv-empty-cart__icon svg { width: 34px; height: 34px; }
  .hv-empty-cart__cta .hv-btn { width: 100%; min-width: 0; }
}

/* Page title on cart/checkout → small "CART" pill like the design (instead of
   the big h1 page title) */
.woocommerce-cart .site-main .page-header .entry-title,
.woocommerce-cart h1.entry-title,
.woocommerce-checkout .site-main .page-header .entry-title,
.woocommerce-checkout h1.entry-title {
  display: inline-flex; align-items: center;
  padding: 0.4em 1em; margin: var(--hv-space-5) 0 0;
  border-radius: var(--hv-radius-pill);
  background: var(--hv-blue-100); color: #6CA8FF;
  font-size: var(--hv-fs-sm); font-weight: var(--hv-fw-bold);
  text-transform: uppercase; letter-spacing: var(--hv-ls-wide);
}

/* =========================================================================
   CART BLOCK — white, two-column, matches the approved cart design.
   • Left  (.wc-block-cart__main)    — one white item CARD per row:
       [ image | NAME / £5.00 per ticket / View details → | stepper+Remove | £15.00 / £5.00×N ]
   • Right (.wc-block-cart__sidebar) — "Order Summary" card + blue CTA.
   hv.js supplies the pieces the React block can't express in CSS (the
   "£5.00 × N tickets" breakdown, the "View competition details" link, the
   "(N Tickets)" count, the secure line, the total on the button and the
   "Continue Shopping" placement). Targets WooCommerce's stable .wc-block-*.
   ========================================================================= */
.wp-block-woocommerce-cart { padding-block: 0; }
.wc-block-cart { gap: var(--hv-space-6); }

/* Force the approved TWO-COLUMN layout (items left, summary right) on desktop.
   The Cart block otherwise picks one/two columns from its own width measurement
   (which was collapsing us to a single stacked column). We take it over ≥900px
   and let it stack naturally below that. */
@media (min-width: 900px) {
  body.hv-theme .wc-block-cart {
    display: flex !important; flex-direction: row !important; flex-wrap: nowrap !important;
    align-items: flex-start; gap: var(--hv-space-6);
  }
  body.hv-theme .wc-block-cart .wc-block-cart__main {
    flex: 1 1 auto !important; width: auto !important; max-width: none !important;
    min-width: 0 !important; margin: 0 !important; padding: 0 !important;
  }
  body.hv-theme .wc-block-cart .wc-block-cart__sidebar {
    flex: 0 0 360px !important; width: 360px !important; max-width: 360px !important; margin: 0 !important;
  }
}

/* Keep the whole cart in the UI font (Manrope). The theme's global heading rule
   (h1–h6 → serif) was leaking into the block's titles ("Order Summary",
   "Estimated total"); override it back to the selected body font here. */
body.hv-theme .hv-cart-canvas .hv-cart-canvas__title,
body.hv-theme .hv-cart-canvas .hv-cart-canvas__sub,
body.hv-theme .wc-block-cart .wc-block-components-title,
body.hv-theme .wc-block-cart .wc-block-cart__totals-title,
body.hv-theme .wc-block-cart .wc-block-cart__totals-title::after,
body.hv-theme .wc-block-cart .wc-block-components-totals-item__label,
body.hv-theme .wc-block-cart .wc-block-components-totals-item__value {
  font-family: var(--hv-font) !important;
}

/* ---- Sidebar → "Order Summary" card ------------------------------------- */
.wc-block-cart .wc-block-cart__sidebar .wc-block-components-sidebar,
.wc-block-cart__sidebar > .is-large,
.wc-block-cart .wc-block-components-sidebar {
  background: #fff;
  border: 1px solid var(--hv-line);
  border-radius: var(--hv-radius-lg);
  box-shadow: var(--hv-shadow-sm);
  padding: var(--hv-space-5);
}

/* ---- Items table → one white rounded CARD per row ------------------------
   DESKTOP/TABLET (≥601px): a 3-col row [ image | product | total ]; the
   product cell is itself a grid so name/price/view stack on the left and the
   stepper+Remove sit on the right. MOBILE (≤600px): image on the left, product
   info + total stacked in the right column. */
.wc-block-cart table.wc-block-cart-items { display: block; margin: 0; border: 0; }
.wc-block-cart .wc-block-cart-items thead { display: none; } /* no PRODUCT/TOTAL header row */
.wc-block-cart .wc-block-cart-items tbody { display: flex; flex-direction: column; gap: var(--hv-space-4); }

/* Card shell + hover (shared) */
body.hv-theme .wc-block-cart .wc-block-cart-items__row {
  background: #fff;
  border: 1px solid var(--hv-line);
  border-radius: var(--hv-radius-lg);
  box-shadow: var(--hv-shadow-sm);
  transition: box-shadow .18s ease, border-color .18s ease;
}
body.hv-theme .wc-block-cart .wc-block-cart-items__row:hover { box-shadow: var(--hv-shadow); border-color: var(--hv-blue-100); }

/* Product name — bold, uppercase, dark ink (shared; size set per-layout) */
.wc-block-cart-item__product-name,
.wc-block-cart .wc-block-components-product-name {
  color: var(--hv-ink) !important; font-weight: var(--hv-fw-bold);
  text-decoration: none !important; line-height: var(--hv-lh-snug);
  text-transform: uppercase; letter-spacing: .01em;
}

/* Per-ticket price → "🏷 £5.00 per ticket" (blue tag; the price element is
   un-hidden and re-labelled here). */
.wc-block-cart .wc-block-cart-item__prices {
  display: inline-flex !important; align-items: center; gap: 6px; margin: 0;
  color: var(--hv-body); font-size: var(--hv-fs-sm); font-weight: var(--hv-fw-medium);
}
.wc-block-cart .wc-block-cart-item__prices::before {
  content: ""; width: 15px; height: 15px; flex: 0 0 auto;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23065BE0' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20.6 13.4 12 22l-8.6-8.6a2 2 0 0 1-.4-1.2V4a1 1 0 0 1 1-1h8.2a2 2 0 0 1 1.2.4Z'/%3E%3Ccircle cx='7.5' cy='7.5' r='1.3' fill='%23065BE0' stroke='none'/%3E%3C/svg%3E") center/contain no-repeat;
}
.wc-block-cart .wc-block-cart-item__prices .wc-block-components-product-price { color: var(--hv-body) !important; font-weight: var(--hv-fw-bold); }
.wc-block-cart .wc-block-cart-item__prices::after { content: "per ticket"; color: var(--hv-muted); font-weight: var(--hv-fw-medium); }

/* "View competition details →" (injected by hv.js) */
.wc-block-cart .hv-view-details {
  display: inline-flex; align-items: center; gap: 4px; width: max-content;
  color: var(--hv-primary); font-size: var(--hv-fs-sm); font-weight: var(--hv-fw-bold);
  text-decoration: none;
}
.wc-block-cart .hv-view-details:hover { color: var(--hv-primary-strong); }
.wc-block-cart .hv-view-details span { transition: transform .15s ease; }
.wc-block-cart .hv-view-details:hover span { transform: translateX(2px); }

/* Line total + mirrored "£5.00 × N tickets" (shared; size set per-layout) */
.wc-block-cart .wc-block-cart-item__total { text-align: right; }
.wc-block-cart .wc-block-cart-item__total .wc-block-cart-item__total-price-and-sale-badge-wrapper { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; }
.wc-block-cart-item__total .wc-block-components-product-price,
.wc-block-cart-item__total .wc-block-formatted-money-amount { color: var(--hv-primary) !important; font-weight: var(--hv-fw-black); display: block; line-height: 1.1; }
.wc-block-cart-item__total .hv-unit-price { display: block; font-size: var(--hv-fs-xs); color: var(--hv-muted); font-weight: var(--hv-fw-medium); margin-top: 2px; }

/* Not in the design: description/answer metadata + sale badges. */
.wc-block-cart .wc-block-cart-item__wrap .wc-block-components-product-metadata,
.wc-block-cart .wc-block-cart-item__product .wc-block-components-product-metadata,
.wc-block-cart .wc-block-cart-items__row .wc-block-components-sale-badge { display: none !important; }

/* ============ DESKTOP / TABLET (≥601px) ============ */
@media (min-width: 601px) {
  .wc-block-cart .wc-block-cart-items__row {
    display: grid !important;
    grid-template-columns: 108px minmax(0, 1fr) auto !important;
    align-items: center !important;
    gap: var(--hv-space-5) !important;
    padding: var(--hv-space-4) var(--hv-space-5) !important;
  }
  .wc-block-cart .wc-block-cart-items__row td {
    display: block !important; border: 0 !important; padding: 0 !important; margin: 0 !important; background: none;
  }
  .wc-block-cart .wc-block-cart-items__row .wc-block-cart-item__image   { grid-column: 1 !important; align-self: center !important; }
  .wc-block-cart .wc-block-cart-items__row .wc-block-cart-item__product { grid-column: 2 !important; align-self: center !important; }
  .wc-block-cart .wc-block-cart-items__row .wc-block-cart-item__total   { grid-column: 3 !important; align-self: center !important; }

  .wc-block-cart .wc-block-cart-item__image { width: 108px; }
  .wc-block-cart .wc-block-cart-item__image img { border-radius: var(--hv-radius); width: 108px; height: 108px; object-fit: cover; max-width: none; }

  /* Product cell → grid: name/price/view stacked | stepper+Remove on the right */
  .wc-block-cart .wc-block-cart-items__row .wc-block-cart-item__product .wc-block-cart-item__wrap,
  .wc-block-cart .wc-block-cart-item__wrap {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    grid-template-areas: "name qty" "price qty" "view qty" !important;
    align-items: center !important;
    column-gap: var(--hv-space-5); row-gap: 5px;
    text-align: left !important;
  }
  .wc-block-cart .wc-block-cart-item__wrap > .wc-block-components-product-name { grid-area: name; margin: 0; }
  .wc-block-cart .wc-block-cart-item__wrap > .wc-block-cart-item__prices { grid-area: price; }
  .wc-block-cart .wc-block-cart-item__wrap > .hv-view-details { grid-area: view; }
  .wc-block-cart .wc-block-cart-item__wrap > .wc-block-cart-item__quantity { grid-area: qty; }

  .wc-block-cart .wc-block-components-product-name { font-size: var(--hv-fs-h4); }
  .wc-block-cart-item__total .wc-block-components-product-price,
  .wc-block-cart-item__total .wc-block-formatted-money-amount { font-size: var(--hv-fs-h3); }
}

/* ============ MOBILE (≤600px) — image left, info + total stacked right ============ */
@media (max-width: 600px) {
  body.hv-theme .wc-block-cart .wc-block-cart-items__row {
    display: grid !important;
    grid-template-columns: 88px minmax(0, 1fr) !important;
    grid-template-areas: "media product" "media total" !important;
    align-items: start !important;
    column-gap: var(--hv-space-4); row-gap: var(--hv-space-3);
    border-radius: var(--hv-radius-lg);
    padding: var(--hv-space-4);
  }
  .wc-block-cart .wc-block-cart-items__row td { display: block !important; border: 0 !important; padding: 0 !important; margin: 0 !important; background: none; }
  body.hv-theme .wc-block-cart .wc-block-cart-items__row .wc-block-cart-item__image { grid-area: media !important; align-self: start; width: 88px !important; }
  .wc-block-cart .wc-block-cart-item__image img { display: block; width: 88px !important; height: 88px !important; object-fit: cover; border-radius: var(--hv-radius) !important; max-width: none; }

  body.hv-theme .wc-block-cart .wc-block-cart-items__row .wc-block-cart-item__product { grid-area: product !important; min-width: 0; }
  body.hv-theme .wc-block-cart .wc-block-cart-items__row .wc-block-cart-item__product .wc-block-cart-item__wrap,
  body.hv-theme .wc-block-cart .wc-block-cart-item__wrap {
    display: flex !important; flex-direction: column; align-items: flex-start; gap: 6px;
    text-align: left !important;
  }
  .wc-block-cart .wc-block-components-product-name { font-size: var(--hv-fs-h4); overflow-wrap: anywhere; }
  body.hv-theme .wc-block-cart .wc-block-cart-items__row .wc-block-cart-item__quantity { margin-top: 4px; }

  body.hv-theme .wc-block-cart .wc-block-cart-items__row .wc-block-cart-item__total {
    grid-area: total !important; text-align: left !important;
    padding-top: var(--hv-space-2) !important;
  }
  .wc-block-cart .wc-block-cart-item__total .wc-block-cart-item__total-price-and-sale-badge-wrapper { flex-direction: row !important; align-items: baseline; gap: var(--hv-space-3); }
  .wc-block-cart-item__total .wc-block-components-product-price,
  .wc-block-cart-item__total .wc-block-formatted-money-amount { font-size: var(--hv-fs-h3); }
  .wc-block-cart-item__total .hv-unit-price { margin-top: 0; }

  /* compact stepper */
  .wc-block-cart .wc-block-components-quantity-selector__button { min-width: 40px; height: 40px; }
  .wc-block-cart .wc-block-components-quantity-selector__input { height: 40px; }

  .wc-block-components-totals-wrapper { padding: 14px 18px !important; }
}
@media (max-width: 400px) {
  body.hv-theme .wc-block-cart .wc-block-cart-items__row { grid-template-columns: 76px minmax(0, 1fr) !important; }
  body.hv-theme .wc-block-cart .wc-block-cart-items__row .wc-block-cart-item__image { width: 76px !important; }
  .wc-block-cart .wc-block-cart-item__image img { width: 76px !important; height: 76px !important; }
  .wc-block-cart .wc-block-components-quantity-selector__button { min-width: 36px; height: 36px; }
  .wc-block-cart .wc-block-components-quantity-selector__input { height: 36px; min-width: 34px; }
}

/* Quantity stepper → bordered [− 3 +] */
.wc-block-cart .wc-block-components-quantity-selector {
  border: 1px solid var(--hv-line) !important; border-radius: var(--hv-radius-sm);
  overflow: hidden; box-shadow: none !important; margin: 0; background: #fff;
}
.wc-block-cart .wc-block-components-quantity-selector::after { border: 0 !important; }
.wc-block-cart .wc-block-components-quantity-selector__button {
  color: var(--hv-ink); font-weight: var(--hv-fw-bold); min-width: 44px; height: 44px; font-size: var(--hv-fs-h4);
  transition: color .15s ease, background .15s ease;
  /* Fire taps immediately on touch (no ~300ms double-tap wait). */
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}
.wc-block-components-quantity-selector>.wc-block-components-quantity-selector__button--minus { border-radius: 8px 0 0 8px !important; }
.wc-block-components-quantity-selector>.wc-block-components-quantity-selector__button--plus { border-radius: 0 8px 8px 0 !important; }
.wc-block-cart .wc-block-components-quantity-selector__button:hover { color: var(--hv-primary); background: var(--hv-blue-050); }
/* Inset focus outline (the wrapper's overflow:hidden clips a box-shadow ring). */
.wc-block-cart .wc-block-components-quantity-selector__button:focus-visible,
.wc-block-cart .wc-block-components-quantity-selector__input:focus-visible {
  outline: 2px solid var(--hv-primary); outline-offset: -2px; box-shadow: none;
}
.wc-block-cart .wc-block-components-quantity-selector__input { font-weight: var(--hv-fw-bold); color: var(--hv-ink); font-family: var(--hv-font); font-size: var(--hv-fs-body); height: 44px; background: #fff; }

/* Quantity cell = stepper + Remove, side by side */
.wc-block-cart .wc-block-cart-item__quantity { display: flex !important; align-items: center; gap: var(--hv-space-4); margin: 0 !important; }

/* Remove → trash icon over "Remove" (muted → red). Icon uses a mask so it
   follows the link colour on hover. */
.wc-block-cart .wc-block-cart-item__remove-link,
.wc-block-cart .wc-block-cart-item__product button[aria-label*="Remove"] {
  display: inline-flex !important; flex-direction: column; align-items: center; gap: 3px;
  color: var(--hv-muted); font-size: var(--hv-fs-xs); font-weight: var(--hv-fw-medium);
  line-height: 1; text-decoration: none; background: none; border: 0; padding: 0; cursor: pointer;
}
.wc-block-cart .wc-block-cart-item__remove-link::before {
  content: ""; width: 20px; height: 20px; flex: 0 0 auto; background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 7h16M9 7V5a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v2M6 7l1 12a2 2 0 0 0 2 2h6a2 2 0 0 0 2-2l1-12'/%3E%3Cpath d='M10 11v6M14 11v6'/%3E%3C/svg%3E") center/contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 7h16M9 7V5a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v2M6 7l1 12a2 2 0 0 0 2 2h6a2 2 0 0 0 2-2l1-12'/%3E%3Cpath d='M10 11v6M14 11v6'/%3E%3C/svg%3E") center/contain no-repeat;
}
.wc-block-cart .wc-block-cart-item__remove-link:hover,
.wc-block-cart .wc-block-cart-item__product button[aria-label*="Remove"]:hover { color: var(--hv-red-500); }

/* ---- Sidebar: "Order Summary" ------------------------------------------- */
/* Re-label the block's "Cart totals" heading to "Order Summary" without editing
   markup (font-size:0 hides the real text nodes; ::after supplies ours). */
.wc-block-cart__totals-title {
  font-size: 0 !important; margin: 0 0 var(--hv-space-4) !important;
  padding: 0 !important; border: 0 !important; text-align: left;
}
.wc-block-cart__totals-title::after {
  content: "Order Summary"; display: block;
  font-size: var(--hv-fs-h3); font-weight: var(--hv-fw-black); color: var(--hv-ink);
  text-transform: none; letter-spacing: 0;
}

.wc-block-components-totals-item { padding: 6px 0; }
.wc-block-components-totals-item__label { color: var(--hv-body); font-weight: var(--hv-fw-medium); }
.wc-block-components-totals-item__value { color: var(--hv-ink); font-weight: var(--hv-fw-bold); }
.wc-block-components-totals-item .hv-sub-count { color: var(--hv-muted); font-weight: var(--hv-fw-medium); }
.wc-block-components-totals-wrapper { border-color: var(--hv-line) !important; }

/* Delivery / shipping → green "FREE" */
.wc-block-components-totals-shipping .wc-block-components-totals-item__value {
  color: var(--hv-success) !important; font-weight: var(--hv-fw-bold); text-transform: uppercase; letter-spacing: .02em;
}
/* Discount lines in green */
.wc-block-components-totals-discount .wc-block-components-totals-item__value { color: var(--hv-success) !important; }

/* Total row — divider above, blue amount */
.wc-block-components-totals-footer-item { border-top: 1px solid var(--hv-line); padding-top: var(--hv-space-4); margin-top: var(--hv-space-2); }
.wc-block-components-totals-footer-item .wc-block-components-totals-item__label { color: var(--hv-ink); font-weight: var(--hv-fw-black); font-size: var(--hv-fs-h4); }
.wc-block-components-totals-footer-item .wc-block-components-totals-item__value { color: var(--hv-primary) !important; font-weight: var(--hv-fw-black); font-size: var(--hv-fs-h3); }

/* Coupon toggle → "🏷 Have a coupon code?  ⌄" pill row (text set by hv.js).
   Two WooCommerce variants exist: a plain link (.totals-coupon-link) and a
   Panel button (.wc-block-components-panel__button, with its own chevron). We
   style BOTH to the same pill; kill WC's panel dividers so it reads as one box. */
.wc-block-components-totals-coupon,
.wc-block-cart .wc-block-components-panel { margin-top: var(--hv-space-3); border: 0 !important; }
.wc-block-components-totals-coupon-link,
.wc-block-cart .wc-block-components-totals-coupon .wc-block-components-panel__button {
  display: flex !important; align-items: center; gap: 8px; width: 100%;
  padding: 0.8em 1em !important; margin: 0 !important;
  border: 1px solid var(--hv-line) !important; border-radius: var(--hv-radius) !important;
  background: var(--hv-blue-050) !important; color: var(--hv-primary) !important;
  font-weight: var(--hv-fw-bold) !important; font-size: var(--hv-fs-sm) !important;
  text-decoration: none !important; text-align: left;
}
.wc-block-components-totals-coupon-link::before,
.wc-block-cart .wc-block-components-totals-coupon .wc-block-components-panel__button::before {
  content: ""; width: 16px; height: 16px; flex: 0 0 auto; order: -1;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23065BE0' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20.6 13.4 12 22l-8.6-8.6a2 2 0 0 1-.4-1.2V4a1 1 0 0 1 1-1h8.2a2 2 0 0 1 1.2.4Z'/%3E%3Ccircle cx='7.5' cy='7.5' r='1.3' fill='%23065BE0' stroke='none'/%3E%3C/svg%3E") center/contain no-repeat;
}
/* Link variant: no built-in chevron, so add one. */
.wc-block-components-totals-coupon-link::after {
  content: ""; width: 16px; height: 16px; flex: 0 0 auto; margin-left: auto;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23065BE0' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") center/contain no-repeat;
}
/* Panel variant: reuse WC's own chevron — push it right and recolour blue. */
.wc-block-cart .wc-block-components-totals-coupon .wc-block-components-panel__button-icon,
.wc-block-cart .wc-block-components-totals-coupon .wc-block-components-panel__button svg { margin-left: auto; color: var(--hv-primary); fill: var(--hv-primary); }
.wc-block-components-totals-coupon-link:hover,
.wc-block-cart .wc-block-components-totals-coupon .wc-block-components-panel__button:hover { background: var(--hv-blue-100) !important; }

/* Points-plugin "You will earn N Points" strip (if present) → soft blue */
.wc-block-cart .wps_wpr_cart_page_section,
.wc-block-cart .wps-points-message {
  background: var(--hv-blue-050); color: var(--hv-primary);
  border-radius: var(--hv-radius-sm); padding: var(--hv-space-3); font-weight: var(--hv-fw-medium);
}

/* ---- Proceed to Checkout → BLUE, with a lock + the mirrored total -------- */
.wc-block-cart__submit-button,
.wc-block-cart__submit-container .wc-block-components-button {
  background: var(--hv-primary) !important; background-image: none !important;
  color: #fff !important; border-radius: var(--hv-radius);
  font-size: var(--hv-fs-h4); padding: 1.05em 1.25em; text-decoration: none !important;
  display: flex !important; align-items: center; justify-content: space-between; gap: 10px;
  box-shadow: 0 8px 20px rgba(6, 91, 224, .28);
}
.wc-block-cart__submit-button .wc-block-components-button__text { display: inline-flex; align-items: center; gap: 8px; }
.wc-block-cart__submit-button .wc-block-components-button__text::before {
  content: ""; width: 17px; height: 17px; flex: 0 0 auto;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='5' y='11' width='14' height='9' rx='2'/%3E%3Cpath d='M8 11V8a4 4 0 0 1 8 0v3'/%3E%3C/svg%3E") center/contain no-repeat;
}
.wc-block-cart__submit-button .hv-checkout-total { margin-left: auto; font-weight: var(--hv-fw-black); white-space: nowrap; }
.wc-block-cart__submit-button:hover { filter: brightness(1.06); color: #fff !important; }

/* Secure line under the CTA (injected by hv.js) */
.hv-cart-secure {
  display: flex; align-items: center; justify-content: center; gap: 6px;
  margin-top: var(--hv-space-3); font-size: var(--hv-fs-xs); color: var(--hv-muted); text-align: center;
}
.hv-cart-secure svg { flex: 0 0 auto; color: var(--hv-primary); }

/* ---- Continue Shopping (hv.js seats it at the foot of the items column) --- */
.hv-back-home { margin-top: var(--hv-space-4); }
.hv-cart-canvas .hv-continue-shopping {
  display: inline-flex !important; align-items: center; gap: 8px; width: auto;
  background: #fff; border: 1px solid var(--hv-line); color: var(--hv-ink);
  border-radius: var(--hv-radius); font-weight: var(--hv-fw-bold);
  padding: 0.75em 1.15em; text-decoration: none; box-shadow: var(--hv-shadow-sm);
  transition: border-color .15s ease, color .15s ease;
}
.hv-cart-canvas .hv-continue-shopping:hover { border-color: var(--hv-primary); color: var(--hv-primary); }
.hv-cart-canvas .hv-continue-shopping svg { flex: 0 0 auto; }

/* ---- Trust strip under the cart ----------------------------------------- */
.hv-cart-trust {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--hv-space-4);
  margin-top: var(--hv-space-6); padding: var(--hv-space-5);
  background: #F7F9FC; border: 1px solid var(--hv-line); border-radius: var(--hv-radius-lg);
}
.hv-cart-canvas.hv-cart--empty .hv-cart-trust { display: none; }
.hv-cart-trust__item { display: flex; align-items: center; justify-content: center; gap: var(--hv-space-3); }
.hv-cart-trust__item:not(:last-child) { border-right: 1px solid var(--hv-line); }
.hv-cart-trust__ico { display: grid; place-items: center; flex: 0 0 auto; color: var(--hv-primary); }
.hv-cart-trust__txt { display: flex; flex-direction: column; gap: 2px; }
.hv-cart-trust__txt b { color: var(--hv-ink); font-size: var(--hv-fs-body); font-weight: var(--hv-fw-bold); line-height: var(--hv-lh-snug); }
.hv-cart-trust__txt span { color: var(--hv-muted); font-size: var(--hv-fs-sm); }
@media (max-width: 760px) {
  .hv-cart-trust { grid-template-columns: 1fr; gap: 0; padding: var(--hv-space-4); }
  .hv-cart-trust__item { justify-content: flex-start; padding: var(--hv-space-3) 0; }
  .hv-cart-trust__item:not(:last-child) { border-right: 0; border-bottom: 1px solid var(--hv-line); }
}

/* Bonus-credit nudge banner (bonus-tickets plugin) → soft blue note */
.wc-block-cart ~ .lty-bgo-banner,
.lty-bgo-banner {
  background: var(--hv-blue-050) !important;
  border: 1px solid var(--hv-line) !important;
  color: var(--hv-primary) !important;
  font-weight: var(--hv-fw-bold);
  border-radius: var(--hv-radius);
  padding: var(--hv-space-4) var(--hv-space-5) !important;
}


/* =========================================================================
   CHECKOUT BLOCK — white, two-column, matches the approved design.
   Left: Contact / Billing / Payment cards (numbered). Right: "Your Order"
   summary + trust list + Need Help + We Accept (hv.js seats these in the
   sidebar). A reservation timer + 3-step tracker sit in the hero; a full-width
   reassurance bar closes the page. The checkout shares .hv-cart-canvas so it
   already inherits the white token set + light shadows.
   ========================================================================= */
.wp-block-woocommerce-checkout { padding-block: 0; }

/* Force the two-column layout on desktop (don't rely on the block's own
   width-based detection); stack below 900px. */
@media (min-width: 900px) {
  body.hv-theme .wc-block-checkout {
    display: flex !important; flex-direction: row !important; flex-wrap: nowrap !important;
    align-items: flex-start; gap: var(--hv-space-6);
  }
  body.hv-theme .wc-block-checkout__main {
    flex: 1 1 auto !important; width: auto !important; max-width: none !important; min-width: 0 !important; margin: 0 !important;
  }
  body.hv-theme .wc-block-checkout__sidebar {
    flex: 0 0 390px !important; width: 390px !important; max-width: 390px !important; margin: 0 !important;
  }
}

/* Keep the checkout in the UI font (Manrope) — the global h1–h6 → serif rule
   would otherwise render the block titles in the serif heading font. */
body.hv-theme .hv-checkout-canvas :is(h1, h2, h3, h4),
body.hv-theme .hv-checkout-canvas .wc-block-components-title,
body.hv-theme .hv-checkout-canvas .wc-block-components-checkout-step__title,
body.hv-theme .hv-checkout-canvas .wc-block-components-totals-item__label,
body.hv-theme .hv-checkout-canvas .wc-block-components-totals-item__value {
  font-family: var(--hv-font) !important;
}

/* =========================================================================
   HERO — "Checkout" + reservation timer + 3-step tracker
   ========================================================================= */
.hv-checkout-head {
  display: flex; align-items: flex-start; justify-content: space-between; gap: var(--hv-space-5);
  flex-wrap: wrap; text-align: left; max-width: none;
  margin: 0 0 var(--hv-space-5); padding-bottom: var(--hv-space-4);
  border-bottom: 1px solid var(--hv-line);
}
.hv-checkout-title { font-size: var(--hv-fs-h1); font-weight: var(--hv-fw-black); color: var(--hv-ink); line-height: 1.05; margin: 0; }
.hv-checkout-reserve {
  display: inline-flex; align-items: center; flex-wrap: wrap; gap: 0.5em;
  margin: var(--hv-space-2) 0 0; color: var(--hv-muted); font-size: var(--hv-fs-sm); font-weight: var(--hv-fw-medium);
}
.hv-checkout-reserve__lock { color: var(--hv-muted); }
.hv-checkout-reserve__timer {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 0.3em 0.7em; border-radius: var(--hv-radius-pill);
  background: var(--hv-blue-050); color: var(--hv-primary); font-weight: var(--hv-fw-bold);
}
.hv-checkout-reserve__timer.is-expired { background: rgba(239, 68, 68, .1); color: var(--hv-red-500); }

/* Step tracker */
.hv-checkout-steps { display: flex; align-items: center; gap: 0; margin: 0; padding: 0; list-style: none; }
.hv-checkout-steps__item { display: flex; align-items: center; gap: 0.5em; color: var(--hv-muted); font-weight: var(--hv-fw-bold); font-size: var(--hv-fs-sm); }
.hv-checkout-steps__num {
  width: 28px; height: 28px; flex: 0 0 auto; display: grid; place-items: center; border-radius: 50%;
  background: #fff; border: 1.5px solid var(--hv-line); color: var(--hv-muted); font-size: var(--hv-fs-sm);
}
.hv-checkout-steps__item.is-active .hv-checkout-steps__num { background: var(--hv-primary); border-color: var(--hv-primary); color: #fff; }
.hv-checkout-steps__item.is-active .hv-checkout-steps__label { color: var(--hv-primary); }
.hv-checkout-steps__item.is-done .hv-checkout-steps__num { background: var(--hv-primary); border-color: var(--hv-primary); color: #fff; }
/* connector line between steps */
.hv-checkout-steps__item::after { content: ""; width: 46px; height: 2px; margin: 0 0.6em; background: var(--hv-line); border-radius: 2px; }
.hv-checkout-steps__item:last-child::after { display: none; }
.hv-checkout-steps__item.is-active::after,
.hv-checkout-steps__item.is-done::after { background: var(--hv-primary); }
@media (max-width: 560px) {
  .hv-checkout-steps__label { display: none; }
  .hv-checkout-steps__item::after { width: 28px; }
}

/* =========================================================================
   STEPS → white numbered cards
   ========================================================================= */
.wc-block-components-checkout-step {
  background: #fff; border: 1px solid var(--hv-line); border-radius: var(--hv-radius-lg);
  box-shadow: none; padding: var(--hv-space-5); margin-bottom: var(--hv-space-5);
}
.wc-block-checkout__main { counter-reset: hv-step; }
.wc-block-components-checkout-step__heading { display: flex; align-items: center; gap: var(--hv-space-3); margin: 0; }
.wc-block-components-checkout-step__heading::before {
  counter-increment: hv-step; content: counter(hv-step);
  width: 30px; height: 30px; flex: 0 0 auto; display: grid; place-items: center;
  border-radius: 50%; background: var(--hv-primary); color: #fff;
  font-weight: var(--hv-fw-bold); font-size: var(--hv-fs-sm);
}
.wc-block-components-checkout-step__title { font-size: var(--hv-fs-h4); font-weight: var(--hv-fw-bold); color: var(--hv-ink); margin: 0; }
.wc-block-components-checkout-step__description {
  display: block; margin: 2px 0 var(--hv-space-4);
  padding-left: calc(30px + var(--hv-space-3)); color: var(--hv-muted); font-size: var(--hv-fs-sm);
}

/* =========================================================================
   FORM FIELDS
   ========================================================================= */
.wc-block-components-text-input input,
.wc-block-components-text-input textarea,
.wc-block-components-select select,
.wc-block-components-select .wc-block-components-select__container,
.wc-block-components-combobox .wc-block-components-combobox-control input {
  background: #fff !important; border: 1px solid var(--hv-line) !important; border-radius: var(--hv-radius) !important;
  color: var(--hv-ink) !important; font-family: var(--hv-font) !important;
}
.wc-block-components-text-input input:focus,
.wc-block-components-select select:focus {
  border-color: var(--hv-primary) !important; box-shadow: var(--hv-ring) !important;
}
.wc-block-components-text-input label,
.wc-block-components-combobox label,
.wc-block-components-select label { color: var(--hv-muted); font-family: var(--hv-font); }
.wc-block-components-text-input.is-active label { color: var(--hv-primary); }

/* Checkboxes → brand blue */
.wc-block-components-checkbox .wc-block-components-checkbox__input:checked { background: var(--hv-primary) !important; border-color: var(--hv-primary) !important; }
.wc-block-components-checkbox .wc-block-components-checkbox__input { border-color: var(--hv-line); border-radius: 5px; }
.wc-block-components-checkbox .wc-block-components-checkbox__label { color: var(--hv-body); }

/* Address "Edit" → blue link, sits at the card's top-right */
.wc-block-components-address-card__edit {
  color: var(--hv-primary) !important; background: none !important; box-shadow: none !important;
  font-weight: var(--hv-fw-bold); text-decoration: none !important;
}
.wc-block-components-address-card__edit:hover { color: var(--hv-primary-strong) !important; }
.wc-block-components-address-card { color: var(--hv-body); }

/* =========================================================================
   PAYMENT METHODS → stacked full-width tiles
   ========================================================================= */
.wc-block-checkout__payment-method .wc-block-components-radio-control {
  display: flex; flex-direction: column; gap: var(--hv-space-3);
}
.wc-block-components-radio-control__option {
  border: 1px solid var(--hv-line); border-radius: var(--hv-radius);
  padding: var(--hv-space-4) var(--hv-space-4) var(--hv-space-4) 2.8em; margin: 0; background: #fff;
}
.wc-block-components-radio-control__option-checked { border-color: var(--hv-primary); background: var(--hv-blue-050); box-shadow: none; }
.wc-block-components-radio-control__label { font-weight: var(--hv-fw-bold); color: var(--hv-ink); }
.wc-block-components-radio-control__description,
.wc-block-components-radio-control-accordion-content { font-size: var(--hv-fs-sm); color: var(--hv-muted); line-height: var(--hv-lh-normal); }
/* Payment brand icons → pushed to the right of the label row */
.wc-block-components-radio-control__option .wc-block-components-payment-method-icons,
.wc-block-components-radio-control-accordion-option .wc-block-components-payment-method-icons { margin-left: auto; }
.wc-block-components-radio-control__option .wc-block-components-payment-method-label,
.wc-block-components-radio-control__label-group { display: flex; align-items: center; gap: 0.6em; width: 100%; }

/* Accordion variant → one tile */
.wc-block-checkout__payment-method .wc-block-components-radio-control-accordion-option {
  border: 1px solid var(--hv-line); border-radius: var(--hv-radius); background: #fff; overflow: hidden; margin: 0;
}
.wc-block-checkout__payment-method .wc-block-components-radio-control-accordion-option .wc-block-components-radio-control__option {
  border: 0 !important; box-shadow: none !important; border-radius: 0; background: none;
}
.wc-block-components-radio-control-accordion-content { border: 0 !important; padding: 0 var(--hv-space-4) var(--hv-space-4) 2.8em; margin: 0; }
.wc-block-checkout__payment-method .wc-block-components-radio-control-accordion-option:has(input:checked) { border-color: var(--hv-primary); background: var(--hv-blue-050); box-shadow: none; }
.wc-block-components-radio-control__option:not(.wc-block-components-radio-control__option-checked):hover,
.wc-block-checkout__payment-method .wc-block-components-radio-control-accordion-option:not(:has(input:checked)):hover { border-color: var(--hv-primary); transition: border-color .15s ease; }
/* Radio dot → brand blue */
.wc-block-components-radio-control__input:checked { border-color: var(--hv-primary) !important; }
.wc-block-components-radio-control__input:checked::before { background: var(--hv-primary) !important; }

/* Wallet plugin "Pay by wallet (£X)" row → soft-blue tile with the checkbox on
   the right (best-effort: the plugin injects this into the totals footer). */
#partial_table_checkout { width: 100%; margin: var(--hv-space-3) 0 0; border-collapse: separate; border: 0; }
#partial_table_checkout tr.partial_payment td {
  border: 0 !important; background: var(--hv-blue-050);
  padding: var(--hv-space-3) var(--hv-space-4) !important;
  color: var(--hv-primary); font-weight: var(--hv-fw-bold); font-size: var(--hv-fs-sm); vertical-align: middle;
}
#partial_table_checkout tr.partial_payment td:first-child { border-radius: var(--hv-radius) 0 0 var(--hv-radius); }
#partial_table_checkout tr.partial_payment td:last-child { border-radius: 0 var(--hv-radius) var(--hv-radius) 0; text-align: right; width: 48px; }
#partial_table_checkout input[type="checkbox"] { width: 18px; height: 18px; accent-color: var(--hv-primary); }

/* =========================================================================
   SIDEBAR — "Your Order" card
   ========================================================================= */
.wc-block-checkout__sidebar .wc-block-components-sidebar {
  background: #fff; border: 1px solid var(--hv-line); border-radius: var(--hv-radius-lg);
  box-shadow: var(--hv-shadow-sm); padding: var(--hv-space-5);
}
.wc-block-checkout__sidebar .wp-block-woocommerce-checkout-order-summary-block { border: 0 !important; box-shadow: none !important; padding: 0 !important; background: none !important; }

/* Heading → injected "🛍 Your Order …… N ITEMS" (hv.js). Hide WC's own title. */
.wc-block-components-checkout-order-summary__title,
.wc-block-checkout__sidebar .wc-block-components-checkout-order-summary .wc-block-components-title { display: none !important; }
.hv-order-head { display: flex; align-items: center; gap: 0.5em; margin: 0 0 var(--hv-space-4); }
.hv-order-head::before {
  content: ""; width: 20px; height: 20px; flex: 0 0 auto;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23111827' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 8h12l-1 12H7L6 8Z'/%3E%3Cpath d='M9 8V6a3 3 0 0 1 6 0v2'/%3E%3C/svg%3E") center/contain no-repeat;
}
.hv-order-head__title { font-size: var(--hv-fs-h4); font-weight: var(--hv-fw-black); color: var(--hv-ink); }
.hv-order-count { margin-left: auto; color: var(--hv-primary); font-size: var(--hv-fs-xs); font-weight: var(--hv-fw-bold); letter-spacing: var(--hv-ls-wide); text-transform: uppercase; }

/* Order item */
.wc-block-components-order-summary-item { padding: var(--hv-space-3) 0; border-top: 1px solid var(--hv-line); }
.wc-block-components-order-summary-item:first-child { border-top: 0; }
.wc-block-components-order-summary-item__image img { border-radius: var(--hv-radius-sm); }
.wc-block-components-order-summary-item__description .wc-block-components-product-name { color: var(--hv-ink); font-weight: var(--hv-fw-bold); }
.wc-block-components-order-summary-item__description .wc-block-components-product-metadata__description { display: none !important; }
.wc-block-components-order-summary-item__description { min-width: 0; overflow-wrap: anywhere; }
.wc-block-components-order-summary-item__description :is(h1, h2, h3, h4, p) { font-size: var(--hv-fs-sm) !important; line-height: var(--hv-lh-normal) !important; margin: 0 !important; }
.wc-block-components-order-summary-item__individual-prices { color: var(--hv-muted); font-size: var(--hv-fs-sm); font-weight: var(--hv-fw-medium); }
.wc-block-components-order-summary-item__description .wc-block-components-product-details { margin: var(--hv-space-1) 0 0; font-size: var(--hv-fs-xs); color: var(--hv-muted); }
.wc-block-components-order-summary-item__total-price { color: var(--hv-primary) !important; font-weight: var(--hv-fw-black); }
/* Hide WC's little qty circle — hv.js adds a "Qty: N Tickets" text line instead */
.wc-block-components-order-summary-item__quantity { display: none !important; }
.hv-order-qty { display: block; margin-top: var(--hv-space-1); font-size: var(--hv-fs-xs); color: var(--hv-muted); font-weight: var(--hv-fw-medium); }

/* Coupon toggle in the sidebar → clean row with tag + chevron (keeps its label) */
.wc-block-checkout__sidebar .wc-block-components-totals-coupon,
.wc-block-components-checkout-order-summary .wc-block-components-totals-coupon { margin: var(--hv-space-2) 0; }
.wc-block-checkout__sidebar .wc-block-components-totals-coupon-link,
.wc-block-checkout__sidebar .wc-block-components-totals-coupon .wc-block-components-panel__button,
.wc-block-components-checkout-order-summary .wc-block-components-panel__button {
  display: flex !important; align-items: center; gap: 8px; width: 100%;
  padding: var(--hv-space-3) 0 !important; margin: 0 !important;
  border: 0 !important; border-top: 1px solid var(--hv-line) !important; border-bottom: 1px solid var(--hv-line) !important;
  border-radius: 0 !important; background: none !important; color: var(--hv-ink) !important;
  font-weight: var(--hv-fw-medium) !important; font-size: var(--hv-fs-sm) !important; text-decoration: none !important;
}
.wc-block-checkout__sidebar .wc-block-components-totals-coupon-link::before,
.wc-block-checkout__sidebar .wc-block-components-totals-coupon .wc-block-components-panel__button::before,
.wc-block-components-checkout-order-summary .wc-block-components-panel__button::before {
  content: ""; width: 16px; height: 16px; flex: 0 0 auto; order: -1;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23065BE0' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20.6 13.4 12 22l-8.6-8.6a2 2 0 0 1-.4-1.2V4a1 1 0 0 1 1-1h8.2a2 2 0 0 1 1.2.4Z'/%3E%3Ccircle cx='7.5' cy='7.5' r='1.3' fill='%23065BE0' stroke='none'/%3E%3C/svg%3E") center/contain no-repeat;
}
.wc-block-checkout__sidebar .wc-block-components-totals-coupon-link::after {
  content: ""; width: 16px; height: 16px; flex: 0 0 auto; margin-left: auto;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236B7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") center/contain no-repeat;
}
.wc-block-checkout__sidebar .wc-block-components-totals-coupon .wc-block-components-panel__button-icon,
.wc-block-components-checkout-order-summary .wc-block-components-panel__button-icon { margin-left: auto; color: var(--hv-muted); }
/* Coupon "Apply" → solid blue with white text */
.wc-block-components-totals-coupon__button,
.wc-block-components-totals-coupon .wc-block-components-button {
  background: var(--hv-primary) !important; color: #fff !important; border-radius: var(--hv-radius-sm); font-weight: var(--hv-fw-bold);
}
.wc-block-components-totals-coupon__button .wc-block-components-button__text { color: #fff !important; }

/* Wallet / discount / fee lines → green negatives */
.wc-block-components-totals-fees .wc-block-components-totals-item__value,
.wc-block-components-totals-discount .wc-block-components-totals-item__value { color: var(--hv-success) !important; font-weight: var(--hv-fw-bold); }

/* =========================================================================
   ACTIONS — Return to Cart (link) + Secure My Tickets (button) + terms
   ========================================================================= */
.wc-block-checkout__actions_row {
  display: flex !important; align-items: center; gap: var(--hv-space-4); margin-top: var(--hv-space-4);
}
/* Return to Cart → blue text link on the LEFT */
.wc-block-components-checkout-return-to-cart-button {
  order: 1; flex: 0 0 auto; display: inline-flex; align-items: center; gap: 0.4em;
  width: auto; padding: 0; margin: 0; border: 0 !important; background: none !important;
  color: var(--hv-primary) !important; font-weight: var(--hv-fw-bold); text-decoration: none !important; white-space: nowrap;
}
.wc-block-components-checkout-return-to-cart-button:hover { color: var(--hv-primary-strong) !important; background: none !important; }
/* Secure My Tickets → big blue button on the RIGHT (text set by hv.js) */
.wc-block-checkout__actions_row .wc-block-components-checkout-place-order-button,
.wc-block-components-checkout-place-order-button {
  order: 2; flex: 1 1 auto; margin: 0;
  background: var(--hv-primary) !important; color: #fff !important; border: 0 !important; outline: none !important;
  border-radius: var(--hv-radius); font-weight: var(--hv-fw-bold); font-size: var(--hv-fs-h4);
  padding: 1em 1.5em; box-shadow: 0 8px 20px rgba(6, 91, 224, .28);
  display: flex !important; align-items: center; justify-content: center; gap: 10px;
}
.wc-block-components-checkout-place-order-button:hover { filter: brightness(1.06); }
.wc-block-components-checkout-place-order-button:focus { box-shadow: var(--hv-ring) !important; outline: none !important; }
.wc-block-components-checkout-place-order-button .wc-block-components-button__text {
  display: inline-flex !important; align-items: center; gap: 0.5em; white-space: nowrap;
}
.wc-block-components-checkout-place-order-button .wc-block-components-button__text::before {
  content: ""; width: 17px; height: 17px; flex: 0 0 auto;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='5' y='11' width='14' height='9' rx='2'/%3E%3Cpath d='M8 11V8a4 4 0 0 1 8 0v3'/%3E%3C/svg%3E") center/contain no-repeat;
}
.wc-block-components-checkout-place-order-button .hv-checkout-total { margin-left: auto; font-weight: var(--hv-fw-black); white-space: nowrap; }

.wc-block-checkout__terms { text-align: center; font-size: var(--hv-fs-sm); color: var(--hv-muted); margin-top: var(--hv-space-4); }
.wp-block-woocommerce-checkout a, .wc-block-checkout__terms a { color: var(--hv-primary); text-decoration-color: rgba(6, 91, 224, .45); }
.wp-block-woocommerce-checkout a:hover { color: var(--hv-primary-strong); }

@media (max-width: 640px) {
  .wc-block-checkout__actions_row { flex-direction: column-reverse; align-items: stretch; }
  .wc-block-components-checkout-return-to-cart-button { justify-content: center; }
}

/* Plugin points / bonus nudges — brand if present */
.wps_wpr_checkout_page_section, .wps-points-message { color: var(--hv-primary); background: var(--hv-blue-050); border-radius: var(--hv-radius-sm); padding: var(--hv-space-3); }
.usl-cart-banner { border-left: 4px solid var(--hv-primary); }

/* =========================================================================
   SIDEBAR EXTRAS — trust list / Need Help / We Accept (seated by hv.js)
   ========================================================================= */
.hv-checkout-trust { display: flex; flex-direction: column; gap: var(--hv-space-4); margin-top: var(--hv-space-4); }

.hv-trust-card {
  display: flex; flex-direction: column; gap: var(--hv-space-4);
  background: #fff; border: 1px solid var(--hv-line); border-radius: var(--hv-radius-lg);
  box-shadow: var(--hv-shadow-sm); padding: var(--hv-space-5);
}
.hv-trust-row { display: flex; align-items: center; gap: var(--hv-space-3); }
.hv-trust-row__ico {
  width: 40px; height: 40px; flex: 0 0 auto; display: grid; place-items: center; border-radius: var(--hv-radius);
  background: var(--hv-green-100); color: var(--hv-green-600);
}
.hv-trust-row__txt { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.hv-trust-row__txt b { color: var(--hv-ink); font-size: var(--hv-fs-body); font-weight: var(--hv-fw-bold); line-height: var(--hv-lh-snug); }
.hv-trust-row__txt span { color: var(--hv-muted); font-size: var(--hv-fs-sm); }

.hv-help-card {
  background: #fff; border: 1px solid var(--hv-line); border-radius: var(--hv-radius-lg);
  box-shadow: var(--hv-shadow-sm); padding: var(--hv-space-5);
}
.hv-help-card__head { display: flex; align-items: center; gap: var(--hv-space-3); margin-bottom: var(--hv-space-4); }
.hv-help-card__ico { width: 40px; height: 40px; flex: 0 0 auto; display: grid; place-items: center; border-radius: var(--hv-radius); background: var(--hv-blue-050); color: var(--hv-primary); }
.hv-help-card__txt { display: flex; flex-direction: column; gap: 1px; }
.hv-help-card__txt b { color: var(--hv-ink); font-size: var(--hv-fs-body); font-weight: var(--hv-fw-bold); }
.hv-help-card__txt span { color: var(--hv-muted); font-size: var(--hv-fs-sm); }
.hv-help-card__actions { display: grid; grid-template-columns: 1fr 1fr; gap: var(--hv-space-3); }
.hv-help-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  padding: 0.7em 0.9em; border-radius: var(--hv-radius); font-weight: var(--hv-fw-bold); font-size: var(--hv-fs-sm);
  text-decoration: none; border: 1px solid var(--hv-line); background: #fff; transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.hv-help-btn svg { flex: 0 0 auto; }
.hv-help-btn--chat { color: var(--hv-primary); border-color: rgba(6, 91, 224, .35); }
.hv-help-btn--chat:hover { background: var(--hv-blue-050); }
.hv-help-btn--wa { color: var(--hv-green-600); border-color: rgba(22, 163, 74, .35); }
.hv-help-btn--wa:hover { background: var(--hv-green-100); }

.hv-accept-card {
  display: flex; align-items: center; gap: var(--hv-space-4); flex-wrap: wrap;
  background: #fff; border: 1px solid var(--hv-line); border-radius: var(--hv-radius-lg);
  box-shadow: var(--hv-shadow-sm); padding: var(--hv-space-4) var(--hv-space-5);
}
.hv-accept-card__title { flex: 0 0 auto; font-size: var(--hv-fs-sm); font-weight: var(--hv-fw-bold); color: var(--hv-muted); margin: 0; }
.hv-checkout-trust .hv-pay-icons { gap: var(--hv-space-2); margin-left: auto; flex-wrap: wrap; }
.hv-checkout-trust .hv-pay { height: 26px; min-width: 40px; padding: 0 7px; gap: 2px; border: 1px solid var(--hv-line); }
.hv-checkout-trust .hv-pay svg { height: 14px; width: auto; }
.hv-checkout-trust .hv-pay b { font-size: 9.5px; }

/* =========================================================================
   FULL-WIDTH REASSURANCE BAR
   ========================================================================= */
.hv-checkout-bar {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--hv-space-4);
  margin-top: var(--hv-space-6); padding: var(--hv-space-5);
  background: #fff; border: 1px solid var(--hv-line); border-radius: var(--hv-radius-lg); box-shadow: var(--hv-shadow-sm);
}
.hv-checkout-bar__item { display: flex; align-items: center; justify-content: center; gap: var(--hv-space-3); }
.hv-checkout-bar__item:not(:last-child) { border-right: 1px solid var(--hv-line); }
.hv-checkout-bar__ico { flex: 0 0 auto; display: grid; place-items: center; color: var(--hv-primary); }
.hv-checkout-bar__txt { display: flex; flex-direction: column; gap: 1px; }
.hv-checkout-bar__txt b { color: var(--hv-ink); font-size: var(--hv-fs-body); font-weight: var(--hv-fw-bold); line-height: var(--hv-lh-snug); }
.hv-checkout-bar__txt span { color: var(--hv-muted); font-size: var(--hv-fs-sm); }
@media (max-width: 860px) {
  .hv-checkout-bar { grid-template-columns: repeat(2, 1fr); gap: 0; }
  .hv-checkout-bar__item { justify-content: flex-start; padding: var(--hv-space-3) var(--hv-space-4); }
  .hv-checkout-bar__item:nth-child(odd) { border-right: 1px solid var(--hv-line); }
  .hv-checkout-bar__item:nth-child(-n+2) { border-bottom: 1px solid var(--hv-line); }
}
@media (max-width: 480px) {
  .hv-checkout-bar { grid-template-columns: 1fr; }
  .hv-checkout-bar__item, .hv-checkout-bar__item:nth-child(odd) { border-right: 0; }
  .hv-checkout-bar__item:not(:last-child) { border-bottom: 1px solid var(--hv-line); }
}

/* =========================================================================
   RESPONSIVE
   ========================================================================= */
@media (max-width: 900px) {
  .hv-checkout-head { align-items: flex-start; }
  .hv-checkout-steps { margin-top: var(--hv-space-2); }
}
@media (max-width: 640px) {
  .wc-block-components-checkout-step,
  .wc-block-checkout__sidebar .wc-block-components-sidebar,
  .hv-trust-card, .hv-help-card { padding: var(--hv-space-4); }
  .wp-block-woocommerce-checkout { padding-block: 0; }
  .hv-checkout-title { font-size: var(--hv-fs-h2); }
  .hv-checkout-head { margin-bottom: var(--hv-space-4); }
  .wc-block-components-checkout-step { margin-bottom: var(--hv-space-4); }
  /* Order Summary below the Place Order button on mobile */
  .wc-block-checkout__main { order: 1 !important; }
  .wc-block-checkout__sidebar { order: 2 !important; margin-top: var(--hv-space-5); }
}

/* =========================================================================
   COUPON — ALWAYS-VISIBLE FIELD (cart + checkout)
   WooCommerce ships the coupon as a collapsed toggle. We hide the toggle and
   keep the form permanently open (hv.js expands the panel once), styled to the
   theme: a "Have a coupon code?" label + input + solid blue Apply button.
   ========================================================================= */
.wc-block-components-totals-coupon-link,
.wc-block-components-totals-coupon .wc-block-components-panel__button { display: none !important; }

.wc-block-components-totals-coupon { display: block !important; margin: var(--hv-space-3) 0 !important; border: 0 !important; }
.wc-block-components-totals-coupon::before {
  content: "Have a coupon code?"; display: flex; align-items: center; gap: 7px;
  margin-bottom: 8px; font-size: var(--hv-fs-sm); font-weight: var(--hv-fw-bold); color: var(--hv-ink);
}
.wc-block-components-totals-coupon .wc-block-components-panel,
.wc-block-components-totals-coupon .wc-block-components-panel__content {
  display: block !important; padding: 0 !important; margin: 0 !important; border: 0 !important;
}
.wc-block-components-totals-coupon__form { display: flex !important; gap: 8px; align-items: flex-start; margin: 0 !important; padding: 0 !important; }
.wc-block-components-totals-coupon__form .wc-block-components-text-input { flex: 1 1 auto; margin: 0 !important; min-width: 0; }
.wc-block-components-totals-coupon__form .wc-block-components-text-input input {
  width: 100%; padding: 0.75em 0.9em !important; border: 1px solid var(--hv-line) !important;
  border-radius: var(--hv-radius) !important; background: #fff !important;
  font-family: var(--hv-font) !important; font-size: var(--hv-fs-sm) !important; color: var(--hv-ink) !important;
}
.wc-block-components-totals-coupon__form .wc-block-components-text-input input:focus { border-color: var(--hv-primary) !important; box-shadow: var(--hv-ring) !important; outline: none; }
.wc-block-components-totals-coupon__button {
  flex: 0 0 auto !important; margin: 0 !important; white-space: nowrap;
  padding: 0.75em 1.15em !important; border-radius: var(--hv-radius) !important;
  background: var(--hv-primary) !important; color: #fff !important; border: 0 !important;
  font-weight: var(--hv-fw-bold) !important; font-size: var(--hv-fs-sm) !important;
}
.wc-block-components-totals-coupon__button:hover { filter: brightness(1.06); }

/* =========================================================================
   CART CTA — hide the mirrored total while the button is submitting, so the
   spinner isn't overlapped by a stale "£15.00".
   ========================================================================= */
.wc-block-cart__submit-button[disabled] .hv-checkout-total,
.wc-block-cart__submit-button[aria-disabled="true"] .hv-checkout-total,
.wc-block-cart__submit-button.is-loading .hv-checkout-total,
.wc-block-components-checkout-place-order-button[disabled] .hv-checkout-total,
.wc-block-components-checkout-place-order-button[aria-disabled="true"] .hv-checkout-total { display: none !important; }
/* :has() kept in its OWN rule so browsers without support don't drop the above. */
.wc-block-cart__submit-button:has(.wc-block-components-spinner) .hv-checkout-total,
.wc-block-components-checkout-place-order-button:has(.wc-block-components-spinner) .hv-checkout-total { display: none !important; }

/* =========================================================================
   WALLET CREDIT TOGGLE (checkout sidebar) — combine wallet with any gateway.
   Rendered in checkout-canvas.php, seated under the Order Summary with the
   trust cards; HV_Wallet_Checkout adds the matching "Wallet Discount" line to
   the totals live (Store API), so the numbers always agree.
   ========================================================================= */
.hv-wallet-apply {
  display: flex; align-items: center; gap: var(--hv-space-3);
  padding: var(--hv-space-4) var(--hv-space-5);
  background: var(--hv-blue-050); border: 1px solid rgba(6, 91, 224, .18);
  border-radius: var(--hv-radius-lg); box-shadow: var(--hv-shadow-sm);
}
.hv-wallet-apply__ico {
  width: 40px; height: 40px; flex: 0 0 auto; display: grid; place-items: center;
  border-radius: var(--hv-radius); background: #fff; color: var(--hv-primary);
  border: 1px solid rgba(6, 91, 224, .18);
}
.hv-wallet-apply__txt { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.hv-wallet-apply__txt b { color: var(--hv-ink); font-size: var(--hv-fs-body); font-weight: var(--hv-fw-bold); }
.hv-wallet-apply__txt > span { color: var(--hv-muted); font-size: var(--hv-fs-sm); }
.hv-wallet-apply__txt .amount { color: var(--hv-primary); font-weight: var(--hv-fw-bold); }
.hv-wallet-apply__action { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 8px; }
.hv-wallet-apply__label { color: var(--hv-primary); font-size: var(--hv-fs-sm); font-weight: var(--hv-fw-bold); }
.hv-wallet-apply__toggle {
  position: relative; width: 44px; height: 24px; flex: 0 0 auto;
  border: 0; padding: 0; cursor: pointer; border-radius: var(--hv-radius-pill);
  background: #CBD5E1; transition: background .15s ease;
}
.hv-wallet-apply__toggle i {
  position: absolute; top: 3px; left: 3px; width: 18px; height: 18px;
  border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .25);
  transition: transform .15s ease;
}
.hv-wallet-apply.is-on .hv-wallet-apply__toggle { background: var(--hv-primary); }
.hv-wallet-apply.is-on .hv-wallet-apply__toggle i { transform: translateX(20px); }
.hv-wallet-apply__toggle:focus-visible { outline: none; box-shadow: var(--hv-ring); }

/* The wallet plugin's own jQuery-injected partial-payment row is superseded by
   the toggle above — hide it so the two never double up. */
#partial_table_checkout { display: none !important; }