/* ==========================================================================
   Brosh Pool — WooCommerce skin. Makes Cart / Checkout / Order-received /
   My-Account feel like one system with the plugin. Pure CSS, no template
   overrides (update-safe). Scoped to body.brosh-wc. Covers BOTH the classic
   (.woocommerce-*) and the block (.wc-block-*) markup.
   ========================================================================== */
:root{
  --bp-navy:#031e29; --bp-ink:#0e3944; --bp-muted:#5a8597; --bp-bg:#e7f9ff;
  --bp-line:#cfeaf6; --bp-sky:#78c2e6; --bp-skyDeep:#1e88c4; --bp-green:#11bc6d;
  --bp-lime:#e0e132; --bp-yellow:#ffd236;
  --bp-blue:#1e88c4; --bp-blueGrad:linear-gradient(135deg,#2bb3d9 0,#1483c0 100%); /* matches the menu's blue CTA — unifies the order flow */
  --bp-card:0 14px 34px -20px rgba(3,30,41,.40);
  --bp-radius:1.25rem;
}
/* Airy homepage-style background: a soft sky→teal gradient at the top fading to flat teal — gives
   the page depth and makes the white header bar clearly stand out (it no longer blends in). */
body.brosh-wc{ background:#e7f9ff linear-gradient(180deg,#cdeefb 0,#e7f9ff 340px) no-repeat!important;
  font-family:'Heebo',sans-serif; color:var(--bp-ink); }
body.brosh-wc h1,body.brosh-wc h2,body.brosh-wc h3{ font-family:'Fredoka','Heebo',sans-serif; color:var(--bp-navy); }

/* ---- Branded top bar (inserted by the tiny JS) ---- */
/* White "floating card" bar — clearly distinct from the teal page background. */
.brosh-wc-bar{ display:flex; align-items:center; justify-content:space-between; gap:12px;
  max-width:1000px; margin:14px auto 22px; padding:11px 16px;
  background:#fff; border:1px solid var(--bp-line); border-radius:18px;
  box-shadow:0 16px 32px -16px rgba(3,30,41,.30); }
.brosh-wc-bar .brosh-wc-logo{ height:40px; width:auto; max-width:90px; display:block; object-fit:contain; }
.brosh-wc-bar .brosh-wc-back{ color:var(--bp-ink); background:var(--bp-bg); border:1px solid var(--bp-line);
  border-radius:999px; padding:9px 15px; font-weight:700; font-size:14px; text-decoration:none;
  display:inline-flex; align-items:center; gap:6px; transition:background .15s ease, border-color .15s ease, transform .12s ease; }
.brosh-wc-bar .brosh-wc-back:hover{ background:#d7f0fb; border-color:var(--bp-sky); }
.brosh-wc-bar .brosh-wc-back:active{ transform:scale(.96); }

/* ---- Shared shells: give the WC content room + center it ---- */
body.brosh-wc .woocommerce{ max-width:1000px; margin:0 auto; padding:0 14px 56px; }
body.brosh-wc .entry-title,body.brosh-wc .wp-block-post-title,body.brosh-wc .wp-block-page-title,body.brosh-wc .page-title{ text-align:center; }

/* ---- Inputs (classic + block) — big, rounded, brand-coloured ---- */
body.brosh-wc .woocommerce form .form-row input.input-text,
body.brosh-wc .woocommerce form .form-row textarea,
body.brosh-wc input[type=text],body.brosh-wc input[type=email],body.brosh-wc input[type=tel],
body.brosh-wc input[type=password],body.brosh-wc input[type=number],body.brosh-wc input[type=date],
body.brosh-wc select,body.brosh-wc .wc-block-components-text-input input{
  width:100%!important; box-sizing:border-box!important; padding:14px 16px!important;
  border-radius:14px!important; border:2px solid var(--bp-line)!important; background:#fff!important;
  font-size:16px!important; font-family:'Heebo',sans-serif!important; min-height:50px; transition:border-color .15s,background .15s; }
body.brosh-wc input:focus,body.brosh-wc select:focus,body.brosh-wc textarea:focus{ outline:none!important; border-color:var(--bp-blue)!important; }
body.brosh-wc label{ font-weight:700; color:var(--bp-navy); font-size:14px; }

/* ---- PRIMARY action buttons (classic + block) — green pill, large tap target.
   Scoped to real action buttons; utility controls (quantity ± / remove) are styled separately below. ---- */
body.brosh-wc .woocommerce .button:not(.wc-backward):not(.wc-block-components-quantity-selector__button),
body.brosh-wc input[type=submit],
body.brosh-wc button[type=submit],
body.brosh-wc #place_order,
body.brosh-wc .wc-block-cart__submit-button,
body.brosh-wc .wc-block-components-checkout-place-order-button,
body.brosh-wc .wc-block-components-button.contained{
  background:var(--bp-blueGrad)!important; color:#fff!important; border:none!important;
  border-radius:9999px!important; padding:14px 26px!important; min-height:50px;
  font-weight:800!important; font-size:16px!important; font-family:'Fredoka','Heebo',sans-serif!important;
  box-shadow:0 10px 26px -10px rgba(30,136,196,.55)!important; cursor:pointer;
  transition:transform .1s ease, filter .15s ease!important; width:auto; }
body.brosh-wc #place_order,body.brosh-wc .wc-block-cart__submit-button,body.brosh-wc .wc-block-components-checkout-place-order-button{ width:100%!important; font-size:18px!important; padding:16px!important; }
body.brosh-wc .woocommerce .button:not(.wc-backward):hover,body.brosh-wc #place_order:hover,body.brosh-wc .wc-block-cart__submit-button:hover{ filter:brightness(1.04); }
body.brosh-wc .woocommerce .button:not(.wc-backward):active,body.brosh-wc #place_order:active{ transform:scale(.98); }
/* secondary / subtle buttons */
body.brosh-wc .button.wc-backward,body.brosh-wc .woocommerce-Button--next,body.brosh-wc a.edit{
  background:#fff!important; color:var(--bp-navy)!important; border:2px solid var(--bp-line)!important;
  border-radius:9999px!important; padding:12px 22px!important; box-shadow:none!important; font-weight:700!important; }

/* ---- Quantity stepper (classic .quantity + block selector) — neat, NOT a giant pill ---- */
body.brosh-wc .quantity{ display:inline-flex; align-items:center; border:2px solid var(--bp-line); border-radius:999px; overflow:hidden; background:#fff; }
body.brosh-wc .quantity input.qty{ width:54px!important; min-height:44px!important; text-align:center; border:none!important; border-radius:0!important; background:#fff!important; padding:8px!important; }
/* NOTE: keep overflow VISIBLE + don't force button min-widths — a too-small pill with overflow:hidden
   clipped the quantity number (it was there but cut off). Let the selector size to its content. */
body.brosh-wc .wc-block-components-quantity-selector{ border:2px solid var(--bp-line)!important; border-radius:12px!important; overflow:visible!important; }
body.brosh-wc .wc-block-components-quantity-selector__button{ background:transparent!important; color:var(--bp-navy)!important; border:none!important; min-height:44px; font-size:20px!important; box-shadow:none!important; }
body.brosh-wc .wc-block-components-quantity-selector__input{ border:none!important; background:transparent!important; min-height:44px; font-weight:700!important; color:var(--bp-navy)!important; -webkit-text-fill-color:var(--bp-navy)!important; opacity:1!important; }

/* ---- Remove-item controls — small, subtle (never a green pill) ---- */
body.brosh-wc a.remove,body.brosh-wc .wc-block-cart-item__remove-link,
body.brosh-wc .wc-block-components-product-metadata__remove,body.brosh-wc button.wc-block-cart-item__remove-link{
  background:transparent!important; color:var(--bp-muted)!important; border:none!important; box-shadow:none!important;
  width:auto!important; min-height:0!important; padding:2px 6px!important; font-weight:700!important; text-decoration:underline; border-radius:6px!important; }
body.brosh-wc a.remove:hover{ color:#dc2626!important; background:transparent!important; }

/* ---- Coupon field ---- */
body.brosh-wc .coupon .input-text,body.brosh-wc .wc-block-components-totals-coupon__input input{ max-width:220px; }

/* ---- Cards: the building block for every panel ---- */
body.brosh-wc .woocommerce-MyAccount-content,
body.brosh-wc .woocommerce-order,
body.brosh-wc .woocommerce-checkout #order_review,
body.brosh-wc .woocommerce-checkout .woocommerce-checkout-review-order,
body.brosh-wc form.woocommerce-form-login,
body.brosh-wc form.woocommerce-EditAccountForm,
body.brosh-wc form.edit-account,
body.brosh-wc .woocommerce-address-fields,
body.brosh-wc .woocommerce-MyAccount-navigation{
  background:#fff; border:1px solid var(--bp-line); border-radius:var(--bp-radius);
  box-shadow:var(--bp-card); padding:20px 18px; }

/* ---- My-Account navigation → clean pill/tab nav ---- */
body.brosh-wc .woocommerce-MyAccount-navigation ul{ list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:8px; }
body.brosh-wc .woocommerce-MyAccount-navigation li{ margin:0; }
body.brosh-wc .woocommerce-MyAccount-navigation li a{ display:inline-flex; align-items:center; gap:6px;
  padding:10px 16px; border-radius:999px; background:var(--bp-bg); color:var(--bp-ink); font-weight:700;
  font-size:14px; text-decoration:none; border:1px solid var(--bp-line); transition:all .15s ease; min-height:44px; }
body.brosh-wc .woocommerce-MyAccount-navigation li a:hover{ border-color:var(--bp-sky); }
body.brosh-wc .woocommerce-MyAccount-navigation li.is-active a{ background:var(--bp-navy); color:#fff; border-color:var(--bp-navy); }
@media (min-width:783px){
  body.brosh-wc .woocommerce-account .woocommerce{ display:grid; grid-template-columns:240px 1fr; gap:20px; align-items:start; }
  body.brosh-wc .woocommerce-MyAccount-navigation ul{ flex-direction:column; }
  body.brosh-wc .woocommerce-MyAccount-navigation li a{ width:100%; }
}

/* ---- Notices → branded ---- */
body.brosh-wc .woocommerce-message,body.brosh-wc .woocommerce-info,body.brosh-wc .woocommerce-error,
body.brosh-wc .wc-block-components-notice-banner{
  border-radius:14px!important; border:none!important; font-size:14px; box-shadow:var(--bp-card);
  border-inline-start:5px solid var(--bp-green)!important; background:#fff!important; color:var(--bp-ink)!important; }
body.brosh-wc .woocommerce-error,body.brosh-wc .wc-block-components-notice-banner.is-error{ border-inline-start-color:#dc2626!important; }
body.brosh-wc .woocommerce-info,body.brosh-wc .wc-block-components-notice-banner.is-info{ border-inline-start-color:var(--bp-skyDeep)!important; }

/* ---- Order summary + cart + orders tables → soft cards, and stack on mobile ---- */
body.brosh-wc table.shop_table,body.brosh-wc .woocommerce-orders-table,body.brosh-wc table.cart{
  background:#fff; border:1px solid var(--bp-line); border-radius:var(--bp-radius); border-collapse:separate;
  border-spacing:0; overflow:hidden; box-shadow:var(--bp-card); }
body.brosh-wc table.shop_table th,body.brosh-wc table.shop_table td{ border:none; padding:14px 16px; }
body.brosh-wc table.shop_table thead th,body.brosh-wc .woocommerce-orders-table thead th{ background:var(--bp-bg); color:var(--bp-navy); font-weight:800; }
body.brosh-wc table.shop_table tbody tr+tr td,body.brosh-wc .woocommerce-orders-table tbody tr td{ border-top:1px solid var(--bp-line); }
body.brosh-wc tfoot .order-total .amount,body.brosh-wc .order-total td{ color:var(--bp-navy); font-weight:800; }

/* Mobile: turn every WooCommerce table into stacked cards (uses WC's td[data-title]) */
@media (max-width:782px){
  body.brosh-wc table.shop_table,body.brosh-wc .woocommerce-orders-table,body.brosh-wc table.cart{ box-shadow:none; border:none; background:transparent; }
  body.brosh-wc table.shop_table thead,body.brosh-wc .woocommerce-orders-table thead{ display:none; }
  body.brosh-wc table.shop_table tr,body.brosh-wc .woocommerce-orders-table tr,body.brosh-wc table.cart tr{
    display:block; background:#fff; border:1px solid var(--bp-line); border-radius:1rem; box-shadow:var(--bp-card);
    margin-bottom:12px; padding:6px 4px; }
  body.brosh-wc table.shop_table td,body.brosh-wc .woocommerce-orders-table td,body.brosh-wc table.cart td{
    display:flex; justify-content:space-between; align-items:center; gap:12px; border:none!important;
    padding:9px 14px!important; text-align:start; }
  body.brosh-wc table.shop_table td::before,body.brosh-wc .woocommerce-orders-table td::before{
    content:attr(data-title); font-weight:800; color:var(--bp-muted); font-size:13px; }
  body.brosh-wc .woocommerce-orders-table td.woocommerce-orders-table__cell-order-actions{ justify-content:flex-end; }
}

/* ---- Block cart/checkout panels → white cards. The items table is TRANSPARENT by default, so the
   teal page background showed through and the products blended in — force white (!important) so each
   product card clearly stands out, with a subtle teal header row. ---- */
body.brosh-wc .wp-block-woocommerce-cart .wc-block-cart-items,
body.brosh-wc table.wc-block-cart-items,
body.brosh-wc .wc-block-cart__main > table,
body.brosh-wc .wc-block-components-sidebar,
body.brosh-wc .wp-block-woocommerce-checkout-order-summary-block{
  background:#fff !important; border:1px solid var(--bp-line); border-radius:var(--bp-radius); box-shadow:var(--bp-card); overflow:hidden; }
body.brosh-wc .wc-block-cart-items__header{ background:var(--bp-bg) !important; color:var(--bp-navy); font-weight:800; }
body.brosh-wc .wc-block-cart-items__row{ background:#fff !important; }

/* ---- Order-received / thank-you ---- */
body.brosh-wc .woocommerce-order .woocommerce-thankyou-order-received{
  font-family:'Fredoka','Heebo',sans-serif; font-size:20px; font-weight:800; color:var(--bp-navy);
  background:#fff; border:2px solid var(--bp-yellow); border-radius:var(--bp-radius); padding:18px; box-shadow:var(--bp-card); text-align:center; }

/* ---- Hide unrelated shop product grids on cart/checkout. Our flow only ever holds the booking
   "entry" product, so WooCommerce's empty-cart "New in shop" / cross-sell grids (bar drinks with
   broken images) are off-brand + confusing here. The :has() rule also hides their orphan heading,
   while the "your cart is empty" message stays. ---- */
body.brosh-wc .wc-block-grid,
body.brosh-wc .wp-block-product-new,
body.brosh-wc .wp-block-woocommerce-product-new,
body.brosh-wc .wp-block-woocommerce-cart-cross-sells-block,
body.brosh-wc .cross-sells{ display:none !important; }
body.brosh-wc .wp-block-heading:has(+ .wc-block-grid),
body.brosh-wc .wp-block-heading:has(+ .wp-block-product-new){ display:none !important; }

/* ---- Misc polish + no horizontal scroll ---- */
body.brosh-wc *{ box-sizing:border-box; }
body.brosh-wc{ overflow-x:hidden; }
body.brosh-wc a{ color:var(--bp-skyDeep); }
body.brosh-wc .select2-container--default .select2-selection--single{ border-radius:14px!important; border:2px solid var(--bp-line)!important; height:50px!important; padding:8px 6px!important; }