/* ── Cart page — quantity selector ───────────────────────────────────────── */

/* The actual flex container is .quantity (input + .action siblings live here) */
.product-quantity .quantity {
  display: flex;
  align-items: center;
  gap: 0.25em;
}

/* Strip WooCommerce .input-text white background/border so cart page matches offcanvas */
.product-quantity input[type="number"],
.product-quantity input.input-text,
.bt-cart-item__quantity input[type="number"],
.bt-cart-item__quantity input.input-text {
  background-color: transparent !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  outline: none !important;
  -moz-appearance: textfield;
  width: 3em;
  text-align: center;
}

/* Order: - qty + */
.product-quantity .quantity input[type="number"] { order: 2; }
.product-quantity .quantity .action.minus { order: 1; }
.product-quantity .quantity .action.plus  { order: 3; }

/* Hide native browser spinner — custom ± spans handle increment/decrement */
.product-quantity input[type="number"]::-webkit-inner-spin-button,
.product-quantity input[type="number"]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Make .action spans tappable and visually consistent */
.product-quantity .quantity .action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  user-select: none;
  line-height: 1;
}

/* ── Cart page — totals loading overlay ─────────────────────────────────── */

.bt-cart-totals-wrapper.brt-cart-offcanvas-loading {
  position: relative;
  overflow: hidden;
  user-select: none;
}

.bt-cart-totals-wrapper.brt-cart-offcanvas-loading::before {
  content: "";
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  opacity: 0.4;
  background-color: #ffffff;
}

.bt-cart-totals-wrapper.brt-cart-offcanvas-loading::after {
  content: "";
  position: absolute;
  display: inline-flex;
  box-sizing: border-box;
  top: 50%;
  left: 50%;
  width: 30px;
  height: 30px;
  border: 2px solid #000000;
  border-bottom-color: transparent;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
  animation: brt-spinning 1s linear infinite;
}

/* ── Cart offcanvas — loading overlay ────────────────────────────────────── */

.brt-cart-offcanvas.brt-cart-offcanvas-loading.brx-open .brx-offcanvas-inner,
.brt-cart-refresh-section.brt-cart-offcanvas-loading {
  overflow: hidden;
  user-select: none;
}

.brt-cart-offcanvas.brt-cart-offcanvas-loading.brx-open
  .brx-offcanvas-inner::before,
.brt-cart-refresh-section.brt-cart-offcanvas-loading::before {
  content: "";
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  opacity: 0.4;
  user-select: none;
  background-color: #ffffff;
}

.brt-cart-offcanvas.brt-cart-offcanvas-loading.brx-open
  .brx-offcanvas-inner::after,
.brt-cart-refresh-section.brt-cart-offcanvas-loading::after {
  content: "";
  position: absolute;
  display: inline-flex;
  box-sizing: border-box;

  top: calc(50% - (30px / 2));
  left: calc(50% - (30px / 2));

  width: 30px;
  height: 30px;

  border: 2px solid #000000;
  border-bottom-color: transparent;
  border-radius: 50%;

  transform: translate(-50%, -50%);

  z-index: 2;

  animation: brt-spinning 1s linear infinite;
}

@keyframes brt-spinning {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

/* ── Offcanvas — hide sticky bar while minicart is open ─────────────────── */

body:has(.brt-cart-offcanvas.brx-open) .brt-sticky-atc {
  transform: translateY(100%);
  opacity: 0;
  pointer-events: none;
}

/* ── Offcanvas — lock body scroll while panel is open ────────────────────── */

/* CSS :has() — handles modern desktop browsers. iOS requires the JS
   touchmove prevention in cart.js (overflow:hidden alone is ignored there). */
html:has(.brt-cart-offcanvas.brx-open),
body:has(.brt-cart-offcanvas.brx-open) {
  overflow: hidden;
}

/* ── Offcanvas columns — independent scroll ──────────────────────────────── */

/* cart-content is a flex column (header / main-body / footer).
   !important overrides Bricks' own overflow-y:auto on this element so it
   does not intercept scroll events — only main-body scrolls. */
.brt-cart-offcanvas__cart-content {
  min-height: 0;
  overflow: hidden !important;
}

/* main-body takes all remaining space and scrolls its own content. */
.brt-cart-offcanvas__main-body {
  flex: 1 1 0;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
}

/* cross-sell: the inner content wrapper (height:100vh, overflow-y:auto) already
   scrolls. overflow:visible lets scroll events reach that wrapper instead of
   being consumed by the outer div which has no scrollable overflow. */
.brt-cart-offcanvas__cross-sell {
  min-height: 0;
  overflow: visible;
}

/* ── Offcanvas items — most recently added on top ────────────────────────── */

/* WooCommerce appends new cart items to the end of the list, so reversing the
   visual order puts the most recent addition at the top. Scoped to the mini
   cart only (the cart page keeps its natural order). */
.brt-cart-offcanvas__main-body > ul {
  display: flex;
  flex-direction: column-reverse;
}

/* The Bricks query-trail marker is the last DOM node, so column-reverse would
   float it to the very top and add a gap — it's inert for the mini cart, hide it. */
.brt-cart-offcanvas__main-body > ul > .brx-query-trail {
  display: none;
}