/* --- CSS for Product Detail Page --- */

/* 1. Make the product form a flex container to align quantity and button on one line */
form.cart {
  display: flex;
  align-items: center; /* Vertically aligns quantity input and button.
  gap: 10px;           /* Adds space between the quantity input and the button */
}

/* 3. Make the "Add to Cart" button take remaining width and apply specific styling */
form.cart button.single_add_to_cart_button[name="add-to-cart"] {
  flex-grow: 1; /* Allows the button to grow and fill available horizontal space */
  text-align: center; /* Center the text within the button */
  
  /* Styles to match the look of your primary action buttons */
  background-color: #1DCBD4 !important;
  color: #FFFFFF !important; /* Assuming white text */
  font-size: 17px !important;
  font-weight: 600 !important;
  padding: 14px 15px !important; /* Adjust padding as button width is now flexible */
  border: none;
  border-radius: 3px; /* Optional: for slightly rounded corners */
  text-decoration: none;
  cursor: pointer;
  float: none !important; /* Override any existing float from theme CSS */
  /* The display property will be handled by being a flex item */
}

form.cart button.single_add_to_cart_button[name="add-to-cart"]:hover {
  background-color: #18a2a9 !important;
  color: #FFFFFF !important; /* Assuming white text on hover */
}

/* --- CSS for Cloned Sticky Add to Cart Bar on Product Detail Page --- */

/* Placeholder for the original form's position trigger */
#sticky-cart-original-placeholder {
  height: 1px; 
  display: block;
  visibility: hidden; 
}

/* The CLONED sticky bar itself */
#sticky-cart-bar-clone {
  position: fixed; 
  bottom: 0;       /* Stick to the bottom of the viewport */
  left: 0;
  right: 0;
  background-color: #ffffff; 
  padding: 12px 15px; /* Default padding: 12px top/bottom, 15px left/right */
  
  /* Add safe area inset to the bottom padding for iPhones */
  padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px)); 
  /* 'env(safe-area-inset-bottom, 0px)' provides the inset, 0px is a fallback for browsers that don't support it. */
  /* The 12px is your desired content padding from the new "visual" bottom of the bar. */

  box-shadow: 0 -2px 8px rgba(0,0,0,0.15); 
  z-index: 1000;      
  
  display: none; /* Initially hidden - JS will show it by adding 'visible' class */
  align-items: center !important;
  gap: 10px !important;

  transition: transform 0.3s ease-in-out, opacity 0.3s ease-in-out;
  opacity: 0;
  transform: translateY(100%); 
}

#sticky-cart-bar-clone.visible {
  display: flex !important; 
  opacity: 1;
  transform: translateY(0); 
}

/* Styles for quantity and button INSIDE the cloned sticky bar */
#sticky-cart-bar-clone div.quantity {
  width: auto;        
  max-width: 80px; 
  flex-grow: 0 !important;      
  flex-shrink: 0 !important;    
  margin: 0 !important;     
}

#sticky-cart-bar-clone div.quantity input.qty {
  width: 60px !important; 
  padding: 10px 5px !important;   
  font-size: 15px !important;      
  line-height: normal !important;
  box-sizing: border-box !important;
  margin: 0 !important;
  border: 1px solid #ccc !important; 
  height: auto; 
}

#sticky-cart-bar-clone button.single_add_to_cart_button {
  flex-grow: 1 !important; 
  width: auto !important;   
  text-align: center !important; 
  background-color: #1DCBD4 !important;
  color: #FFFFFF !important; 
  font-size: 16px !important; 
  font-weight: 600 !important;
  padding: 12px 15px !important; /* Should match vertical padding of input for good alignment */
  border: none !important;
  border-radius: 3px !important;
  cursor: pointer !important;
  float: none !important;
  margin: 0 !important; 
  line-height: normal !important; 
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
}

#sticky-cart-bar-clone button.single_add_to_cart_button:hover {
  background-color: #18a2a9 !important;
  color: #FFFFFF !important;
}