/**
 * Quel Tap - variation stock display.
 *
 * Loaded sitewide, because the colour swatch shortcodes render on archives and
 * the home page as well as the product page.
 *
 * WP Rocket: safelist this file if Remove Unused CSS is on. The classes below
 * are applied at runtime by JavaScript on the product page, so the optimiser
 * cannot see them in the source HTML and will strip the rules.
 */

/* -------------------------------------------------------------------------
 * Crossed-out swatches. One treatment, used by the custom shortcodes and the
 * Bricks swatches so both read the same way.
 * ---------------------------------------------------------------------- */

.mc-swatch-box,
.qt-stock-form .bricks-variation-swatches [data-value] {
  position: relative;
}

.qt-stock-strike {
  display: none;
}

.qt-swatch-out-of-stock > .qt-stock-strike,
.qt-swatch-unavailable > .qt-stock-strike {
  display: block;
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: inherit;
  pointer-events: none;
  background: linear-gradient(
    135deg,
    transparent calc(50% - 1px),
    #fff calc(50% - 1px),
    #fff calc(50% - 1px),
    #940000 calc(50% - 1px),
    #940000 calc(50% + 1px),
    #fff calc(50% + 1px),
    #fff calc(50% + 1px),
    transparent calc(50% + 1px)
  );
}

/* Label swatches (shape, boiler size) have no box to draw across. */
.qt-stock-form .bricks-swatch-label .qt-swatch-out-of-stock,
.qt-stock-form .bricks-swatch-label .qt-swatch-unavailable {
  text-decoration-line: line-through;
  text-decoration-thickness: 1px;
  text-decoration-color: #940000;
  opacity: .5;
}

/* -------------------------------------------------------------------------
 * Tooltips
 *
 * Bricks centres its balloon tooltip over the swatch, which pushes the first
 * and last swatch in a row off the side of a phone. The JS sets
 * data-balloon-pos to anchor it to the nearer edge; these rules stop a long
 * label overflowing even if a future Bricks release ignores that attribute.
 * ---------------------------------------------------------------------- */

.qt-stock-form [data-balloon]::after {
  max-width: min(18em, 80vw);
  white-space: normal;
  text-align: center;
}

.qt-stock-form [data-balloon-pos='up-left']::after {
  left: 0;
  right: auto;
  transform: none;
}

.qt-stock-form [data-balloon-pos='up-right']::after {
  left: auto;
  right: 0;
  transform: none;
}

/* Keep the arrow on the swatch even when the bubble is shifted sideways. */
.qt-stock-form [data-balloon-pos='up-left']::before,
.qt-stock-form [data-balloon-pos='up-right']::before {
  left: 50%;
  right: auto;
  transform: translateX(-50%);
}

/* -------------------------------------------------------------------------
 * Stock badge
 * ---------------------------------------------------------------------- */

.qt-variation-stock {
  display: flex;
  align-items: center;
  gap: 0.5em;
  min-height: 1.5em;
  color: #374151;
}

.qt-variation-stock::before {
  content: '';
  display: inline-block;
  flex: 0 0 0.55em;
  width: 0.55em;
  height: 0.55em;
  border-radius: 50%;
  background: #6b7280;
}

.qt-variation-stock[data-stock-state='in']::before {
  background: #00738f;
}

.qt-variation-stock[data-stock-state='out'] {
  color: #940000;
}

.qt-variation-stock[data-stock-state='out']::before {
  background: #940000;
}

.qt-variation-stock[data-stock-state='backorder']::before {
  background: var(--bricks-color-dhpzfy);
}

.qt-variation-stock[hidden] {
  display: none;
}

/* Fallback for the PHP suppression in inc/variation-stock.php, in case Bricks
   moves custom classes to a different settings key. */
body.qt-variable-stock .qt-parent-stock-badge {
  display: none !important;
}

/* WooCommerce's own per-variation availability line stays visible. */
body.qt-variable-stock form.variations_form .woocommerce-variation-availability,
body.qt-variable-stock form.variations_form .woocommerce-variation-availability .stock {
  display: block !important;
}

/* -------------------------------------------------------------------------
 * Helper text under the controls
 * ---------------------------------------------------------------------- */

.qt-stock-form .qt-stock-help {
  margin: 0.5rem 0 1rem;
  font-size: 0.875rem;
  line-height: 1.5;
  color: #4b5563;
}

.qt-stock-form .qt-stock-help[hidden] {
  display: none;
}

.qt-stock-form .single_add_to_cart_button.disabled {
  opacity: 0.5;
  cursor: not-allowed;
}