/*
 * GENESYS redesign - quantity stepper.
 *
 * Shared component. The parent renders one stepper markup everywhere
 * (woocommerce/global/quantity-input.php):
 *
 *   .quantity > label.screen-reader-text
 *             + button.minus + span.qty-text + input.qty + button.plus
 *
 * and dresses it in assets/css/custom-quantity.css as a 148x40 white pill.
 * Two things in that file break on the dark ground:
 *
 *   1. `.quantity button { background: white }` - a light chip on dark.
 *   2. `.qty-text` is absolutely positioned at left:50px while the input is
 *      pushed clear of it with `margin-left: 40px !important`. Both numbers
 *      assume the parent's input metrics; the moment the input is resized the
 *      label collides with the value.
 *
 * The fix drops the absolute positioning entirely and lays the row out as
 * flex. `.qty-text` is hidden rather than repositioned: it is a visual
 * duplicate of the cart table's own QUANTITY column header, and the control
 * keeps its accessible name from the .screen-reader-text label that the
 * parent template already emits, so nothing is lost to assistive tech.
 *
 * Loaded on cart, checkout and the single product page - everywhere a stepper
 * is rendered on a redesigned screen.
 */

.gns-qty-scope .quantity {
  position: static;
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 0;
  width: 128px;
  height: 40px;
  padding: 0;
  overflow: hidden;
  border: 1px solid var(--gns-border-strong);
  border-radius: var(--gns-r-pill);
  background: var(--gns-elevated);
  font-family: var(--gns-font);
}

/* The parent positions this absolutely and shims the input around it. */
.gns-qty-scope .quantity .qty-text {
  display: none;
}

.gns-qty-scope .quantity button.minus,
.gns-qty-scope .quantity button.plus {
  flex: 0 0 36px;
  align-self: stretch;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent !important;
  color: var(--gns-secondary) !important;
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
  transition: color .15s ease, background-color .15s ease;
}
.gns-qty-scope .quantity button.minus:hover,
.gns-qty-scope .quantity button.plus:hover {
  background: var(--gns-cyan-tint) !important;
  color: var(--gns-cyan-ink) !important;
}
.gns-qty-scope .quantity button.minus:focus-visible,
.gns-qty-scope .quantity button.plus:focus-visible {
  outline: 2px solid var(--gns-focus);
  outline-offset: -2px;
}

/*
 * `margin-left: 40px !important` in the parent's custom-quantity.css made room
 * for the absolutely positioned label; with the label gone it just shoves the
 * value off-centre, and only !important can answer it.
 */
.gns-qty-scope .quantity input.qty,
.gns-qty-scope .quantity input[type="number"] {
  flex: 1 1 auto;
  width: auto !important;
  min-width: 0;
  height: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0;
  background: transparent !important;
  color: var(--gns-text) !important;
  text-align: center;
  font-family: var(--gns-font);
  font-size: 14px;
  font-weight: 600;
  line-height: 1;
  appearance: textfield;
  -moz-appearance: textfield;
}
/*
 * The input is a borderless, transparent field inside the visible pill, so an
 * outline drawn around the input itself hugs the number rather than the
 * control. Suppress it and let the pill carry the focus state (below) - the
 * indicator moves to the thing the user actually sees.
 *
 * !important because polish.css states the global ring that way; equal weight,
 * and this selector is more specific, so it wins.
 */
.gns-qty-scope .quantity input.qty:focus,
.gns-qty-scope .quantity input.qty:focus-visible {
  outline: none !important;
  box-shadow: none !important;
}
.gns-qty-scope .quantity:focus-within {
  border-color: var(--gns-focus);
  box-shadow: 0 0 0 3px var(--gns-cyan-tint-2);
}
.gns-qty-scope .quantity input[type="number"]::-webkit-inner-spin-button,
.gns-qty-scope .quantity input[type="number"]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}