/**
 * Enhanced Quantity Buttons CSS - Conflict Free Version
 * 
 * File: wp-content/themes/eo-astra-child/assets/css/quantity-buttons.css
 * Version: 4.0.0
 * Date: 2025-06-24
 * 
 * This CSS resolves all conflicts between style.css and woocommerce.css
 * Provides unified, responsive, accessible quantity controls
 */

/*==============================================================================
  CSS VARIABLES - UNIFIED SYSTEM
==============================================================================*/
:root {
  /* Quantity button variables - unified system */
  --qty-container-height: 45px;
  --qty-container-border: 1px solid #ddd;
  --qty-container-border-hover: 1px solid var(--primary-color, #d7040f);
  --qty-container-radius: var(--border-radius, 4px);
  --qty-container-bg: #fff;

  --qty-input-width: 70px;
  --qty-input-font-size: 15px;
  --qty-input-color: #333;

  --qty-button-width: 40px;
  --qty-button-bg: #f7f7f7;
  --qty-button-bg-hover: #ebebeb;
  --qty-button-bg-active: #e0e0e0;
  --qty-button-color: #333;
  --qty-button-font-size: 16px;

  /* Mobile overrides */
  --qty-mobile-height: 48px;
  --qty-mobile-input-width: 80px;
  --qty-mobile-button-width: 48px;
  --qty-mobile-font-size: 18px;
}

/*==============================================================================
  QUANTITY CONTAINER - UNIFIED STYLING WITH OVERFLOW FIXES
==============================================================================*/

/* Base quantity container - works with or without .buttons-added class */
.woocommerce .quantity,
.woocommerce .quantity.buttons-added,
.woocommerce-page .quantity,
.woocommerce-page .quantity.buttons-added,
body.woocommerce .quantity.buttons-added,
.ast-woocommerce-container .quantity.buttons-added,
.ast-woocommerce-container .woocommerce .quantity.buttons-added {
  position: relative !important;
  display: inline-flex !important;
  align-items: center !important;
  border: var(--qty-container-border) !important;
  border-radius: var(--qty-container-radius) !important;
  background: var(--qty-container-bg) !important;
  transition: all 0.2s ease !important;
  height: var(--qty-container-height) !important;
  min-height: var(--qty-container-height) !important;
  margin: 0 15px 0 0 !important;
  overflow: visible !important; /* CRITICAL: Override any hidden overflow */
  width: auto !important;
  max-width: none !important;
}

.woocommerce .quantity:hover,
.woocommerce .quantity.buttons-added:hover,
.woocommerce-page .quantity:hover,
.woocommerce-page .quantity.buttons-added:hover,
body.woocommerce .quantity.buttons-added:hover,
.ast-woocommerce-container .quantity.buttons-added:hover,
.woocommerce .quantity.focus,
.woocommerce .quantity.buttons-added.focus {
  border: var(--qty-container-border-hover) !important;
  box-shadow: 0 0 0 2px rgba(215, 4, 15, 0.1) !important;
  overflow: visible !important; /* Maintain visible overflow on hover */
}

/*==============================================================================
  CRITICAL OVERFLOW FIXES - MAXIMUM SPECIFICITY
==============================================================================*/

/* Progressive specificity to override any conflicting rules */
.quantity.buttons-added,
.woocommerce .quantity.buttons-added,
.woocommerce-page .quantity.buttons-added,
body.woocommerce .quantity.buttons-added,
.ast-woocommerce-container .quantity.buttons-added,
.ast-woocommerce-container .woocommerce .quantity.buttons-added,
.single-product .quantity.buttons-added,
.woocommerce-cart .quantity.buttons-added,
.woocommerce-checkout .quantity.buttons-added {
  overflow: visible !important;
  position: relative !important;
  z-index: 1 !important;
}

/* Force button visibility with maximum specificity */
.qty-adjust,
.quantity .qty-adjust,
.buttons-added .qty-adjust,
.woocommerce .quantity .qty-adjust,
.woocommerce .quantity.buttons-added .qty-adjust,
body.woocommerce .quantity.buttons-added .qty-adjust {
  position: relative !important;
  z-index: 999 !important;
  display: flex !important;
  visibility: visible !important;
  opacity: 1 !important;
  pointer-events: auto !important;
}

/*==============================================================================
  QUANTITY INPUT FIELD - UNIFIED STYLING
==============================================================================*/

.woocommerce .quantity input.qty,
.woocommerce .quantity input[type="number"],
.woocommerce .quantity.buttons-added input.qty,
.woocommerce .quantity.buttons-added input[type="number"] {
  /* Reset all conflicting styles */
  position: relative !important;
  display: block !important;
  width: var(--qty-input-width) !important;
  min-width: var(--qty-input-width) !important;
  max-width: var(--qty-input-width) !important;
  height: calc(var(--qty-container-height) - 2px) !important;

  /* Typography */
  font-size: var(--qty-input-font-size) !important;
  font-weight: 500 !important;
  color: var(--qty-input-color) !important;
  text-align: center !important;
  line-height: normal !important;

  /* Layout */
  border: none !important;
  border-left: 1px solid #ddd !important;
  border-right: 1px solid #ddd !important;
  background: transparent !important;
  margin: 0 !important;
  padding: 0 8px !important;
  order: 2 !important;

  /* Remove browser styling */
  -moz-appearance: textfield !important;
  -webkit-appearance: none !important;
  appearance: none !important;
  outline: none !important;
  box-shadow: none !important;

  /* Visibility - override any hiding */
  opacity: 1 !important;
  visibility: visible !important;
  z-index: 1 !important;
}

/* Remove browser number input spinners */
.woocommerce .quantity input[type="number"]::-webkit-outer-spin-button,
.woocommerce .quantity input[type="number"]::-webkit-inner-spin-button,
.woocommerce
  .quantity.buttons-added
  input[type="number"]::-webkit-outer-spin-button,
.woocommerce
  .quantity.buttons-added
  input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none !important;
  margin: 0 !important;
}

.woocommerce .quantity input.qty:focus,
.woocommerce .quantity input[type="number"]:focus,
.woocommerce .quantity.buttons-added input.qty:focus,
.woocommerce .quantity.buttons-added input[type="number"]:focus {
  outline: none !important;
  background: rgba(215, 4, 15, 0.02) !important;
  border-left-color: rgba(215, 4, 15, 0.3) !important;
  border-right-color: rgba(215, 4, 15, 0.3) !important;
}

/*==============================================================================
  QUANTITY ADJUSTMENT BUTTONS - UNIFIED STYLING
==============================================================================*/

.woocommerce .quantity .qty-adjust,
.woocommerce .quantity.buttons-added .qty-adjust {
  /* Reset positioning conflicts */
  position: relative !important;
  top: auto !important;
  left: auto !important;
  right: auto !important;
  bottom: auto !important;

  /* Sizing */
  width: var(--qty-button-width) !important;
  height: calc(var(--qty-container-height) - 2px) !important;
  min-width: var(--qty-button-width) !important;
  min-height: auto !important;

  /* Styling */
  border: none !important;
  background: var(--qty-button-bg) !important;
  color: var(--qty-button-color) !important;
  font-size: var(--qty-button-font-size) !important;
  font-weight: 600 !important;

  /* Layout */
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;

  /* Interaction */
  cursor: pointer !important;
  transition: all 0.2s ease !important;
  user-select: none !important;
  touch-action: manipulation !important;
  outline: none !important;
  box-shadow: none !important;

  /* Content */
  line-height: 1 !important;
  text-align: center !important;
  padding: 0 !important;
  margin: 0 !important;

  /* Visibility */
  opacity: 1 !important;
  visibility: visible !important;
  z-index: 2 !important;
}

/* Minus button - LEFT SIDE */
.woocommerce .quantity .minus,
.woocommerce .quantity.buttons-added .minus {
  order: 1 !important;
  border-radius: var(--qty-container-radius) 0 0 var(--qty-container-radius) !important;
  border-right: 1px solid #ddd !important;
}

/* Plus button - RIGHT SIDE */
.woocommerce .quantity .plus,
.woocommerce .quantity.buttons-added .plus {
  order: 3 !important;
  border-radius: 0 var(--qty-container-radius) var(--qty-container-radius) 0 !important;
  border-left: 1px solid #ddd !important;
}

/* Button hover states */
.woocommerce .quantity .qty-adjust:hover:not(:disabled),
.woocommerce .quantity.buttons-added .qty-adjust:hover:not(:disabled) {
  background: var(--qty-button-bg-hover) !important;
  color: var(--primary-color, #d7040f) !important;
  transform: none !important; /* Prevent conflicts with other transforms */
}

.woocommerce .quantity .qty-adjust:active:not(:disabled),
.woocommerce .quantity.buttons-added .qty-adjust:active:not(:disabled) {
  background: var(--qty-button-bg-active) !important;
  transform: scale(0.95) !important;
}

.woocommerce .quantity .qty-adjust:disabled,
.woocommerce .quantity.buttons-added .qty-adjust:disabled {
  opacity: 0.4 !important;
  cursor: not-allowed !important;
  color: #999 !important;
}

.woocommerce .quantity .qty-adjust:focus,
.woocommerce .quantity.buttons-added .qty-adjust:focus {
  outline: 2px solid var(--primary-color, #d7040f) !important;
  outline-offset: -2px !important;
  z-index: 3 !important;
}

/*==============================================================================
  VISUAL FEEDBACK STATES
==============================================================================*/

.woocommerce .quantity .qty-adjust.processing,
.woocommerce .quantity.buttons-added .qty-adjust.processing {
  pointer-events: none !important;
  opacity: 0.7 !important;
}

.woocommerce .quantity .qty-adjust.clicked,
.woocommerce .quantity.buttons-added .qty-adjust.clicked {
  background: var(--primary-color, #d7040f) !important;
  color: white !important;
  transform: scale(0.95) !important;
}

.woocommerce .quantity.validating,
.woocommerce .quantity.buttons-added.validating {
  opacity: 0.8 !important;
  pointer-events: none !important;
}

/*==============================================================================
  SINGLE PRODUCT PAGE SPECIFIC
==============================================================================*/

.single-product .quantity,
.single-product .quantity.buttons-added {
  margin-right: 15px !important;
  margin-bottom: 10px !important;
}

.single-product .quantity input.qty,
.single-product .quantity input[type="number"],
.single-product .quantity.buttons-added input.qty,
.single-product .quantity.buttons-added input[type="number"] {
  width: 80px !important;
  min-width: 80px !important;
  max-width: 80px !important;
}

/*==============================================================================
  CART PAGE STYLING
==============================================================================*/

.woocommerce-cart .cart .quantity,
.woocommerce-cart .cart .quantity.buttons-added {
  margin: 0 !important;
  max-width: 140px !important;
}

.woocommerce-cart .cart .quantity input.qty,
.woocommerce-cart .cart .quantity input[type="number"],
.woocommerce-cart .cart .quantity.buttons-added input.qty,
.woocommerce-cart .cart .quantity.buttons-added input[type="number"] {
  width: 60px !important;
  min-width: 60px !important;
  max-width: 60px !important;
}

.woocommerce-cart .cart .quantity .qty-adjust,
.woocommerce-cart .cart .quantity.buttons-added .qty-adjust {
  width: 32px !important;
  height: 36px !important;
  font-size: 14px !important;
}

/*==============================================================================
  CHECKOUT WC INTEGRATION
==============================================================================*/

.checkoutwc .quantity,
.checkoutwc .quantity.buttons-added,
.cfw-quantity .quantity,
.cfw-quantity .quantity.buttons-added {
  margin: 0 auto !important;
}

.checkoutwc .quantity input.qty,
.checkoutwc .quantity.buttons-added input.qty,
.cfw-quantity .quantity input.qty,
.cfw-quantity .quantity.buttons-added input.qty {
  width: 60px !important;
  min-width: 60px !important;
  max-width: 60px !important;
}

/*==============================================================================
  MOBILE RESPONSIVE - ENHANCED
==============================================================================*/

@media (max-width: 768px) {
  :root {
    --qty-container-height: var(--qty-mobile-height);
    --qty-input-width: var(--qty-mobile-input-width);
    --qty-button-width: var(--qty-mobile-button-width);
    --qty-button-font-size: var(--qty-mobile-font-size);
  }

  .woocommerce .quantity,
  .woocommerce .quantity.buttons-added {
    height: var(--qty-mobile-height) !important;
    min-height: var(--qty-mobile-height) !important;
  }

  .woocommerce .quantity input.qty,
  .woocommerce .quantity input[type="number"],
  .woocommerce .quantity.buttons-added input.qty,
  .woocommerce .quantity.buttons-added input[type="number"] {
    height: calc(var(--qty-mobile-height) - 2px) !important;
    width: var(--qty-mobile-input-width) !important;
    min-width: var(--qty-mobile-input-width) !important;
    max-width: var(--qty-mobile-input-width) !important;
    font-size: 16px !important; /* Prevent zoom on iOS */
  }

  .woocommerce .quantity .qty-adjust,
  .woocommerce .quantity.buttons-added .qty-adjust {
    width: var(--qty-mobile-button-width) !important;
    height: calc(var(--qty-mobile-height) - 2px) !important;
    font-size: var(--qty-mobile-font-size) !important;
    min-height: 44px !important; /* Touch-friendly */
    min-width: 44px !important;
  }

  /* Single product mobile */
  .single-product .quantity,
  .single-product .quantity.buttons-added {
    margin-right: 0 !important;
    margin-bottom: 15px !important;
    width: 100% !important;
    max-width: 200px !important;
  }

  .single-product .quantity input.qty,
  .single-product .quantity input[type="number"],
  .single-product .quantity.buttons-added input.qty,
  .single-product .quantity.buttons-added input[type="number"] {
    width: var(--qty-mobile-input-width) !important;
    min-width: var(--qty-mobile-input-width) !important;
    max-width: var(--qty-mobile-input-width) !important;
  }
}

/*==============================================================================
  TOUCH DEVICE ENHANCEMENTS
==============================================================================*/

.touch-device .woocommerce .quantity .qty-adjust,
.touch-device .woocommerce .quantity.buttons-added .qty-adjust {
  min-height: 44px !important;
  min-width: 44px !important;
}

.touch-device .woocommerce .quantity .qty-adjust:active,
.touch-device .woocommerce .quantity.buttons-added .qty-adjust:active {
  background: var(--primary-color, #d7040f) !important;
  color: white !important;
}

/*==============================================================================
  ACCESSIBILITY & HIGH CONTRAST
==============================================================================*/

/* High contrast mode */
@media (prefers-contrast: high) {
  .woocommerce .quantity,
  .woocommerce .quantity.buttons-added {
    border-color: #000 !important;
  }

  .woocommerce .quantity .qty-adjust,
  .woocommerce .quantity.buttons-added .qty-adjust {
    background: #fff !important;
    color: #000 !important;
    border: 1px solid #000 !important;
  }

  .woocommerce .quantity .qty-adjust:hover:not(:disabled),
  .woocommerce .quantity.buttons-added .qty-adjust:hover:not(:disabled) {
    background: #000 !important;
    color: #fff !important;
  }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .woocommerce .quantity,
  .woocommerce .quantity.buttons-added,
  .woocommerce .quantity .qty-adjust,
  .woocommerce .quantity.buttons-added .qty-adjust {
    transition: none !important;
  }

  .woocommerce .quantity .qty-adjust:active,
  .woocommerce .quantity.buttons-added .qty-adjust:active {
    transform: none !important;
  }
}

/*==============================================================================
  FALLBACK FOR NO-JS
==============================================================================*/

/* If JavaScript fails, at least show a basic input */
.quantity:not(.buttons-added):not(.woocommerce .quantity) input.qty {
  padding: 8px !important;
  border: 1px solid #ddd !important;
  border-radius: 4px !important;
  width: 70px !important;
  text-align: center !important;
  background: #fff !important;
  margin: 0 !important;
}

/*==============================================================================
  ERROR STATES
==============================================================================*/

.woocommerce .quantity.error,
.woocommerce .quantity.buttons-added.error {
  border-color: #e74c3c !important;
  box-shadow: 0 0 0 2px rgba(231, 76, 60, 0.2) !important;
}

.woocommerce .quantity.error input.qty,
.woocommerce .quantity.buttons-added.error input.qty {
  color: #e74c3c !important;
}

/*==============================================================================
  LOADING STATES
==============================================================================*/

.woocommerce .quantity.loading,
.woocommerce .quantity.buttons-added.loading {
  position: relative !important;
  overflow: hidden !important;
}

.woocommerce .quantity.loading::after,
.woocommerce .quantity.buttons-added.loading::after {
  content: "" !important;
  position: absolute !important;
  top: 0 !important;
  left: -100% !important;
  width: 100% !important;
  height: 100% !important;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.4),
    transparent
  ) !important;
  animation: quantityLoading 1.5s infinite !important;
  z-index: 10 !important;
}

@keyframes quantityLoading {
  0% {
    left: -100%;
  }
  100% {
    left: 100%;
  }
}

/*==============================================================================
  ANIMATION KEYFRAMES
==============================================================================*/

@keyframes quantityPulse {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.05);
  }
  100% {
    transform: scale(1);
  }
}

.woocommerce .quantity .qty-adjust.clicked,
.woocommerce .quantity.buttons-added .qty-adjust.clicked {
  animation: quantityPulse 0.15s ease-out !important;
}

/*==============================================================================
  DEBUGGING STYLES (Remove in production)
==============================================================================*/

/* Uncomment these to debug button positioning and overflow issues */
/*
.quantity,
.quantity.buttons-added {
    border: 2px solid red !important;
    background: rgba(255, 0, 0, 0.1) !important;
}

.quantity .qty-adjust,
.quantity.buttons-added .qty-adjust {
    border: 1px solid blue !important;
    background: yellow !important;
    z-index: 9999 !important;
}

.quantity input.qty,
.quantity.buttons-added input.qty {
    border: 1px solid green !important;
    background: lightblue !important;
}

/* Overflow debugging - shows if overflow is being applied */
.quantity.buttons-added {
  outline: 3px dashed orange !important;
}

.quantity.buttons-added[style*="overflow: hidden"] {
  outline: 5px solid red !important;
}
*/

/*==============================================================================
  JAVASCRIPT DEBUGGING HELPERS
==============================================================================*/

/* Add this class via JavaScript to test overflow fixes */
.debug-overflow-visible {
  overflow: visible !important;
  position: relative !important;
  z-index: 9999 !important;
}

.debug-overflow-visible .qty-adjust {
  display: flex !important;
  visibility: visible !important;
  opacity: 1 !important;
  background: lime !important;
  color: black !important;
  border: 2px solid red !important;
}

/*==============================================================================
  CONSOLE DEBUGGING COMMANDS
  Copy these into your browser console to debug overflow issues:
  
  // Check current overflow values
  $('.quantity.buttons-added').each(function() {
    console.log('Computed overflow:', window.getComputedStyle(this).overflow);
  });
  
  // Force override and test
  $('.quantity.buttons-added').addClass('debug-overflow-visible');
  
  // Check button visibility
  $('.qty-adjust').each(function() {
    const rect = this.getBoundingClientRect();
    console.log('Button visible:', rect.width > 0 && rect.height > 0);
  });
  
  // Find conflicting CSS rules
  const element = document.querySelector('.quantity.buttons-added');
  const styles = window.getComputedStyle(element);
  console.log('All styles:', {
    overflow: styles.overflow,
    position: styles.position,
    display: styles.display,
    zIndex: styles.zIndex
  });
==============================================================================*/