/* ==========================================================================
   Omniverce Core — Feature 5: mini-cart quantity steppers.
   Styles ONLY what the feature itself injects (the pill) plus the one
   rule that retires the legacy remove cell once the JS is live.
   The panel layout lives in assets/cart-widget-redesign.css (enqueued
   by this module since v1.2.1) — this file never lays out the panel.

   Tokens: pill text is the near-black #0F1111 sampled from the owner's
   reference (redesign/REFERENCE_SPEC.md). The pill border was that
   reference's Amazon yellow in v1.2.0; since v1.2.1 it is the SITE
   amber #FFB143, per the owner's site-palette instruction.

   v1.2.4 size pass (owner: everything smaller, panel now 200px): the
   pill takes the panel content width (width: 100%), is 40px tall,
   and its buttons/glyphs shrink 40px → 34px / 20px → 18px so all
   three controls stay tappable inside the narrower panel.
   ========================================================================== */

/* Retire the legacy remove cell ONLY when the stepper script has
   initialised (it adds .oc-cart-ready to the panel root). No JS ->
   no class -> the x buttons stay visible and removable. */
.cart-widget-side.oc-cart-ready .elementor-menu-cart__product-remove {
  display: none !important;
}

/* The pill: trash/minus | quantity | plus */
.cart-widget-side .oc-qty-stepper {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  max-width: 100%;
  height: 40px;
  margin: 8px auto 0;
  padding: 0 6px;
  background: #fff;
  border: 2px solid #ffb143;
  border-radius: 999px;
  box-sizing: border-box;
}

.cart-widget-side .oc-qty-stepper .oc-qty-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  flex: 0 0 34px;
  margin: 0;
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: 50%;
  color: #0f1111; /* solid near-black: both SVG glyphs stroke in currentColor */
  font-weight: 600; /* v1.2.2: the "+" rendered pale live; equal weight for both glyphs */
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  transition: background .15s ease, opacity .15s ease;
}
.cart-widget-side .oc-qty-stepper .oc-qty-btn:hover {
  background: #fff3d6; /* pale tint of the site amber pill border */
}
.cart-widget-side .oc-qty-stepper .oc-qty-btn:active {
  transform: scale(.94);
}
.cart-widget-side .oc-qty-stepper .oc-qty-btn:disabled {
  opacity: .35;
  cursor: default;
  transform: none;
}
.cart-widget-side .oc-qty-stepper .oc-qty-btn svg {
  width: 18px;
  height: 18px;
  display: block;
}

.cart-widget-side .oc-qty-stepper .oc-qty-value {
  flex: 1 1 auto;
  text-align: center;
  font-size: 16px;
  font-weight: 600;
  line-height: 1;
  color: #0f1111;
}

/* Sold-individually items: trash + quantity, no plus (same pill). */
.cart-widget-side .oc-qty-stepper--remove-only .oc-qty-value {
  text-align: center;
}

/* In-flight state: the item's stepper is disabled by the script; this
   dims the whole item slightly so the shopper sees the click landed. */
.cart-widget-side .elementor-menu-cart__product.oc-busy {
  opacity: .55;
}
.cart-widget-side .elementor-menu-cart__product.oc-busy .oc-qty-stepper {
  pointer-events: none;
}

/* Failed request: brief error outline on the pill (script removes
   the class after ~700ms). The displayed quantity is left untouched,
   matching the unchanged server cart. */
.cart-widget-side .elementor-menu-cart__product.oc-error .oc-qty-stepper {
  border-color: #e0304f;
  animation: oc-qty-shake .3s ease;
}
@keyframes oc-qty-shake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-3px); }
  75% { transform: translateX(3px); }
}