/* ==========================================================================
   quantity-stepper.css — عدّاد الكمية (Quantity stepper)
   شركة السرعة المطلقة | كل القيم من tokens.css — RTL.
   يظهر في: السلة، تفاصيل المنتج، ملخص الطلب
   WC-NOTE: حقل كمية WooCommerce + تحديث السلة عبر AJAX
   ========================================================================== */

.qty {
  display: inline-flex;
  align-items: center;
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-pill);
  overflow: hidden;
}

/* أزرار + / - */
.qty__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--space-40);
  height: var(--space-40);
  font-size: var(--fs-md);
  font-weight: var(--fw-bold);
  color: var(--color-text);
  transition: background-color 0.2s ease;
}
.qty__btn:hover {
  background-color: var(--color-bg-alt);
}
.qty__btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* حقل العدد (Number input) */
.qty__input {
  width: var(--space-48);
  height: var(--space-40);
  text-align: center;
  border: none;
  background-color: transparent;
  font-weight: var(--fw-bold);
  color: var(--color-text);
  -moz-appearance: textfield;
}
.qty__input::-webkit-outer-spin-button,
.qty__input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* قيمة ثابتة (span) بديلة عن الحقل — تفاصيل المنتج */
.qty__value {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: var(--space-48);
  height: var(--space-40);
  font-weight: var(--fw-bold);
  color: var(--color-text);
}

/* نسخة مربّعة (Boxed) بفواصل رأسية — شريط الشراء في تفاصيل المنتج
   فيجما: صندوق خارجي 58 ارتفاعًا بحدّ 1.5px + ظل، وأزرار/خلية داخلية 44 (node 419-39276) */
.qty--boxed {
  height: var(--space-58);
  border-width: var(--border-width-thick);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-control);
}
.qty--boxed .qty__btn {
  width: var(--space-44);
  height: var(--space-44);
}
.qty--boxed .qty__value {
  height: var(--space-44);
  font-size: var(--fs-md);
  color: var(--color-dark);
  border-inline: var(--border-width) solid var(--color-border);
}