/**
 * Quantity Plus Minus Button for WooCommerce - Frontend Stylesheet
 *
 * Extensively tested and optimized for Storefront, Astra, Flatsome, and Block themes.
 */

:root {
  --wqpm-btn-bg: #f8fafc;
  --wqpm-btn-color: #1e293b;
  --wqpm-btn-hover-bg: #e2e8f0;
  --wqpm-btn-hover-color: #0f172a;
  --wqpm-border-color: #cbd5e1;
  --wqpm-btn-width: 28px;
  --wqpm-btn-height: 30px;
  --wqpm-border-radius: 4px;
}

/* ==========================================================================
   1. REMOVE BROWSER DEFAULT INCREMENT ARROWS (SPINNER BUTTONS)
   ========================================================================== */
.wqpm-quantity input[type="number"]::-webkit-outer-spin-button,
.wqpm-quantity input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none !important;
  margin: 0 !important;
}

.wqpm-quantity input[type="number"] {
  -moz-appearance: textfield !important;
  appearance: textfield !important;
}

/* ==========================================================================
   2. MAIN CONTAINER & ALIGNMENT
   ========================================================================== */
.quantity.wqpm-quantity {
  display: inline-flex !important;
  align-items: stretch !important;
  vertical-align: middle !important;
  margin: 0 10px 0 0 !important;
  padding: 0 !important;
  border: 1px solid var(--wqpm-border-color);
  border-radius: var(--wqpm-border-radius);
  background-color: #ffffff;
  overflow: hidden;
  box-sizing: border-box;
}

/* Sold individually: hide wrapper modifications */
.quantity.wqpm-sold-individually {
  border: none !important;
}

/* ==========================================================================
   3. PLUS & MINUS BUTTONS
   ========================================================================== */
.quantity.wqpm-quantity .wqpm-button {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: var(--wqpm-btn-width) !important;
  min-width: var(--wqpm-btn-width) !important;
  height: var(--wqpm-btn-height) !important;
  padding: 0 !important;
  margin: 0 !important;
  background-color: var(--wqpm-btn-bg) !important;
  color: var(--wqpm-btn-color) !important;
  border: none !important;
  cursor: pointer !important;
  font-family: inherit !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  line-height: 1 !important;
  user-select: none !important;
  transition: background-color 0.15s ease, color 0.15s ease, transform 0.05s ease !important;
  outline: none !important;
  box-shadow: none !important;
}

.quantity.wqpm-quantity .wqpm-button:hover {
  background-color: var(--wqpm-btn-hover-bg) !important;
  color: var(--wqpm-btn-hover-color) !important;
}

.quantity.wqpm-quantity .wqpm-button:active {
  transform: scale(0.96) !important;
}

.quantity.wqpm-quantity .wqpm-button:disabled,
.quantity.wqpm-quantity .wqpm-button[aria-disabled="true"] {
  opacity: 0.45 !important;
  cursor: not-allowed !important;
}

/* ==========================================================================
   4. QUANTITY INPUT FIELD
   ========================================================================== */
.quantity.wqpm-quantity .qty {
  width: 38px !important;
  min-width: 44px !important;
  max-width: 70px !important;
  height: var(--wqpm-btn-height) !important;
  line-height: var(--wqpm-btn-height) !important;
  text-align: center !important;
  padding: 0 4px !important;
  margin: 0 !important;
  border: none !important;
  border-left: 1px solid var(--wqpm-border-color) !important;
  border-right: 1px solid var(--wqpm-border-color) !important;
  border-radius: 0 !important;
  background-color: transparent !important;
  color: #0f172a !important;
  font-size: 15px !important;
  font-weight: 500 !important;
  outline: none !important;
  box-shadow: none !important;
}

.quantity.wqpm-quantity .qty:focus {
  outline: none !important;
  background-color: #f8fafc !important;
}

/* ==========================================================================
   5. STOREFRONT THEME COMPATIBILITY FIXES
   ========================================================================== */
/* Reset Storefront float and clear rules on single product & cart */
.site-main .quantity.wqpm-quantity,
.single-product div.product form.cart .quantity.wqpm-quantity,
.woocommerce-cart table.cart .quantity.wqpm-quantity {
  float: none !important;
  display: inline-flex !important;
}

.site-main .quantity.wqpm-quantity .qty {
  float: none !important;
}

/* ==========================================================================
   6. SHOP & CATEGORY ARCHIVE LOOP QUANTITY
   ========================================================================== */
.wqpm-loop-quantity-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 10px;
  flex-wrap: wrap;
}

.wqpm-loop-quantity-wrapper .quantity.wqpm-quantity {
  margin: 0 !important;
}

/* ==========================================================================
   7. RESPONSIVE TOUCH TARGETS
   ========================================================================== */
@media screen and (max-width: 768px) {
  .quantity.wqpm-quantity .wqpm-button {
    min-height: 44px !important;
    min-width: 44px !important;
  }
  .quantity.wqpm-quantity .qty {
    min-height: 44px !important;
  }
}