/**
 * Compact Custom Add to Cart Styles with Quantity Buttons
 *
 */

.measurement-inputs .input-group {
  display: flex;
  flex-direction: column;
  margin-bottom: 1rem;
}

/* Style the input wrapper */
.custom-add-to-cart-container
  .aggregate-calc
  .measurement-inputs
  .input-wrapper {
  position: relative; /* Crucial for positioning the ::after */
}

/* Style the input itself - ADD PADDING */
.custom-add-to-cart-container
  .aggregate-calc
  .measurement-inputs
  .input-wrapper
  input[type="number"] {
  box-sizing: border-box; /* Include padding in the element's total width and height */
  width: 100%; /* Make input fill the wrapper */
  /* Adjust padding-right based on unit text width + desired spacing */
  /* padding-right: 35px; */ /* Example default - adjust below per unit */
}

/* Style the pseudo-element for the unit */
.custom-add-to-cart-container
  .aggregate-calc
  .measurement-inputs
  .input-wrapper::after {
  position: absolute;
  top: 44%;
  transform: translateY(-50%);
  right: 10px; /* Adjust spacing from the right edge */
  pointer-events: none; /* Prevent interfering with input clicks */
  color: #000;
  font-style: italic;
  font-weight: 100;
  font-size: 16px;
}

/* --- Specific Unit Content and Padding --- */

/* For FEET inputs */
.custom-add-to-cart-container
  .aggregate-calc
  .measurement-inputs
  .input-group-ft
  .input-wrapper::after {
  content: "FT";
}
.custom-add-to-cart-container
  .aggregate-calc
  .measurement-inputs
  .input-group-ft
  .input-wrapper
  input[type="number"] {
  padding-right: 35px; /* Adjust space needed for "FT" */
}

/* For INCHES inputs */
.custom-add-to-cart-container
  .aggregate-calc
  .measurement-inputs
  .input-group-in
  .input-wrapper::after {
  content: "IN";
}
.custom-add-to-cart-container
  .aggregate-calc
  .measurement-inputs
  .input-group-in
  .input-wrapper
  input[type="number"] {
  padding-right: 30px; /* Adjust space needed for "IN" */
}

/* --- Optional: Hide number input arrows (keep this if you still want it) --- */
.custom-add-to-cart-container
  .aggregate-calc
  .measurement-inputs
  input[type="number"] {
  -moz-appearance: textfield; /* Firefox */
}
.custom-add-to-cart-container
  .aggregate-calc
  .measurement-inputs
  input[type="number"]::-webkit-outer-spin-button,
.custom-add-to-cart-container
  .aggregate-calc
  .measurement-inputs
  input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.transport-bag-options {
  margin-top: 20px;
  margin-bottom: 20px;
  border: 0;
  border-top: 1px solid #eee;
}

.aggregate-calc {
  border: 1px solid #ccc;
  padding: 20px;
}

.input-group label {
  font-weight: 100;
  color: #333;
  margin-bottom: 0.5rem;
}

.custom-cart-form {
  margin-bottom: 1rem;
}

.product-price-display {
  font-size: 1.4em;
  font-weight: bold;
  color: #3a6f66;
  margin-bottom: 1rem;
}

/* Variations form */
.variations-form {
  /* Renamed from variations_form in template */
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
}

.variation-row {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}

.variation-row label {
  font-weight: 600;
  font-size: 0.9em;
  color: #333;
}

.variant-select {
  width: 100%;
  padding: 8px 10px;
  border: 1px solid #ddd;
  border-radius: 4px;
  background-color: #fff;
  font-size: 0.95em;
  height: 40px; /* Match quantity wrapper height */
}

.variant-select:focus {
  border-color: #3a6f66;
  outline: none;
}

/* --- NEW/MODIFIED CSS FOR FLEX LAYOUT IN .cart-actions --- */

/* This is the container used in your PHP for both simple and variable products */
.custom-add-to-cart-container .cart-actions {
  display: flex;
  align-items: center; /* Vertically align items */
  gap: 10px; /* Space between quantity and button - adjust as needed */
  width: 100%; /* Ensure the container takes full width */
  margin-top: 15px; /* Spacing above */
  flex-wrap: nowrap; /* Prevent wrapping - keep on one line */
}

/* Target Quantity Wrapper within the flex container */
.custom-add-to-cart-container .cart-actions .quantity-wrapper {
  flex-shrink: 0; /* Important: Prevent quantity input from shrinking */
  /* Remove fixed width here, let content or inner rules define it */
  /* width: 110px; */ /* Remove this if you had it here */
}

/* Target Add to Cart Button within the flex container */
.custom-add-to-cart-container .cart-actions .single_add_to_cart_button {
  flex-grow: 1; /* Important: Allow button to take remaining space */
  width: auto; /* Important: Let flex-grow control width, override fixed width */
  max-width: none; /* Override any max-width that might interfere */
  /* Keep height and other styles */
  height: 40px;
  line-height: 40px; /* Center text vertically */
  text-align: center; /* Center text horizontally */
}

/* --- END NEW/MODIFIED CSS FOR FLEX LAYOUT IN .cart-actions --- */

/* Styles for Quantity Input Components - Keep these */
.custom-add-to-cart-container .quantity-wrapper {
  display: flex; /* It's a flex container itself */
  align-items: center;
  border: 1px solid #ddd;
  border-radius: 4px;
  overflow: hidden; /* To contain rounded corners */
  height: 40px;
  background-color: #fff;
  position: relative;
  width: 110px; /* Define the width of the component here */
}

.custom-add-to-cart-container .quantity-btn {
  width: 30px; /* Width of the button */
  height: 100%;
  border: none;
  background-color: #f8f8f8;
  color: #555;
  font-size: 1.5em; /* Adjusted from 16px if needed */
  font-weight: bold;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.2s;
  padding: 0;
  line-height: 1; /* Reset line-height for button text alignment */
  flex-shrink: 0; /* Prevent buttons shrinking */
}

.custom-add-to-cart-container .quantity-btn.minus {
  border-right: 1px solid #ddd;
  border-top-left-radius: 3px;
  border-bottom-left-radius: 3px;
}

.custom-add-to-cart-container .quantity-btn.plus {
  border-left: 1px solid #ddd;
  border-top-right-radius: 3px;
  border-bottom-right-radius: 3px;
}

.custom-add-to-cart-container .quantity-btn:hover {
  background-color: #eee;
}

.custom-add-to-cart-container .quantity-btn:focus {
  outline: none;
}

.custom-add-to-cart-container .quantity {
  flex: 1; /* Allow input field to fill space BETWEEN buttons */
  height: 100%;
  position: relative; /* Needed for input positioning */
}

.custom-add-to-cart-container .quantity input.qty {
  border: none;
  padding: 0 5px; /* Add slight horizontal padding */
  height: 100%;
  width: 100%; /* Fill the .quantity container */
  text-align: center;
  font-size: 0.95em;
  -moz-appearance: textfield;
  background: transparent;
  box-sizing: border-box; /* Include padding in width calculation */
  line-height: 38px; /* Match height */
  vertical-align: middle;
}

.cart-actions > button {
  padding: 0 !important;
}

.custom-add-to-cart-container .quantity input.qty:focus {
  outline: none;
}

.custom-add-to-cart-container .quantity input.qty::-webkit-inner-spin-button,
.custom-add-to-cart-container .quantity input.qty::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* General Button Styles - Keep these */
.custom-add-to-cart-container .single_add_to_cart_button {
  background-color: #3a6f66 !important;
  color: white !important;
  border: none;
  text-transform: uppercase !important;
  font-size: 16px !important;
  font-weight: 600;
  border-radius: 1px !important;
  cursor: pointer;
  transition: background-color 0.2s ease;
  padding: 0 15px; /* Button text padding */
  /* Height is set within the flex rule now */
  /* line-height is set within the flex rule now */
  /* text-align is set within the flex rule now */
}

.custom-add-to-cart-container .single_add_to_cart_button:hover:not(:disabled) {
  background-color: #2c534c !important;
}

.custom-add-to-cart-container .single_add_to_cart_button:disabled {
  background-color: #aaa !important;
  cursor: not-allowed;
}

/* Rest of the styles */
.custom-add-to-cart-container .reset_variations {
  display: block;
  margin-top: 10px;
  font-size: 0.9em;
  color: #777;
  text-decoration: none;
}

.custom-add-to-cart-container .reset_variations:hover {
  color: #333;
  text-decoration: underline;
}
.calculate-action > .calculate-quantity-button {
  border: 2px solid #397167 !important;
  text-transform: uppercase !important;
  background: #397167 !important;
  border-radius: 1px !important;
  color: #fff !important;
  font-size: 16px !important;
  padding: 10px 20px !important;
  width: 100% !important;
  display: block !important;
}

.calculate-action > .calculate-quantity-button:hover {
  background: white !important;
  color: #397167 !important;
}

.stock.out-of-stock {
  color: #b81c1c;
  font-weight: 600;
  margin-bottom: 1rem;
}

.transport-bag-selector {
  display: flex;
  align-items: flex-start;
  flex-direction: column;
  gap: 0.5rem;
  margin-top: 1rem;
}

.custom-add-to-cart-container .project-type-selector {
  display: flex;
  gap: 15px; /* Space between items */
  flex-wrap: wrap; /* Allow wrapping on smaller screens */
  margin: 15px 0px;
  justify-content: space-between; /* Distribute items nicely */
}
.custom-add-to-cart-container .project-type-label {
  display: flex;
  flex-direction: column; /* Stack image and text vertically */
  align-items: center; /* Center items horizontally */
  cursor: pointer;
  border: 2px solid transparent; /* For visual selection indication */
  padding: 5px;
  border-radius: 4px;
  transition: border-color 0.2s ease-in-out;
  text-align: center;
  justify-content: center;
}
.custom-add-to-cart-container .project-type-label img {
  margin-bottom: 5px;
  display: block; /* Ensure image behaves predictably */
  max-width: 100%;
  height: auto;
}
/* Style for the radio button itself - visually hidden but accessible */
.custom-add-to-cart-container .project-type-label input[type="radio"] {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

.loose-variation-options h3 {
  line-height: 1;
  font-weight: 600;
  color: #405362;
  margin-top: 0;
}

.calculated-bags-info {
  margin-top: 5px;
  font-size: 16px;
  line-height: 1.5;
}
/* Indicate selection on the label */
.custom-add-to-cart-container
  .project-type-label
  input[type="radio"]:checked
  + img
  + span {
  font-weight: bold;
}

/* Hide arrows on number inputs within the calculator measurement sections */
.custom-add-to-cart-container
  .aggregate-calc
  .measurement-inputs
  input[type="number"] {
  -moz-appearance: textfield; /* Firefox */
}

.custom-add-to-cart-container
  .aggregate-calc
  .measurement-inputs
  input[type="number"]::-webkit-outer-spin-button,
.custom-add-to-cart-container
  .aggregate-calc
  .measurement-inputs
  input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0; /* Optional: Sometimes needed */
}

.custom-add-to-cart-container .measurement-inputs {
  display: flex; /* Align items horizontally */
  gap: 10px; /* Space between items */
  justify-content: space-between; /* Vertically align items */
}
.custom-add-to-cart-container .measurement-inputs label {
  margin-right: 5px;
  flex-shrink: 0; /* Prevent labels from shrinking too much */
}
.custom-add-to-cart-container .measurement-inputs input[type="number"] {
  width: 7rem; /* Adjust width */
  padding: 10px 20px; /* Add padding for better touch targets */
  margin-bottom: 5px; /* Spacing when wrapped */
}

/* ... (any remaining styles) ... */
/* Styles for Quantity Input */
.custom-add-to-cart-container .cart-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap; /* Allow wrapping on smaller screens */
  gap: 15px;
  margin-top: 15px;
}
.custom-add-to-cart-container .quantity-wrapper {
  display: flex;
  align-items: center;
  border: 1px solid #ddd;
  border-radius: 4px;
  overflow: hidden; /* To contain rounded corners */
}
.custom-add-to-cart-container .quantity input.qty {
  text-align: center;
  border: none;
  border-left: 1px solid #ddd;
  border-right: 1px solid #ddd;
  height: 38px; /* Match button height */
  line-height: 38px;
  padding: 0 5px;
  width: 50px; /* Adjust width as needed */
  border-radius: 0;
  box-shadow: none;
  appearance: textfield; /* Remove spinners for number input */
  -moz-appearance: textfield;
  vertical-align: middle; /* Align with buttons */
  box-sizing: border-box;
}
.custom-add-to-cart-container .quantity input.qty::-webkit-outer-spin-button,
.custom-add-to-cart-container .quantity input.qty::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.custom-add-to-cart-container .quantity-btn {
  background-color: #f8f8f8;
  border: none;
  cursor: pointer;
  padding: 0 12px;
  font-size: 1.5em;
  line-height: 38px; /* Match input height */
  height: 38px;
  color: #555;
  vertical-align: middle; /* Align with input */
  box-sizing: border-box;
}
.custom-add-to-cart-container .quantity-btn:hover {
  background-color: #eee;
}
.custom-add-to-cart-container .quantity-btn.minus {
  border-top-left-radius: 3px;
  border-bottom-left-radius: 3px;
}
.custom-add-to-cart-container .quantity-btn.plus {
  border-top-right-radius: 3px;
  border-bottom-right-radius: 3px;
}

.custom-add-to-cart-container .reset_variations {
  display: block;
  margin-top: 10px;
  font-size: 0.9em;
}

/**
 * SVG Project Type Selection Highlight Styles
 */

/* Add transitions for smooth color changes */
.custom-add-to-cart-container .project-type-label svg rect,
.custom-add-to-cart-container .project-type-label svg circle, /* Target all circles for transition */
.custom-add-to-cart-container .project-type-label svg text {
  transition: fill 0.25s ease-in-out;
}

/* --- Rectangle Selection --- */
/* Change the rectangle fill when its radio is checked */
.custom-add-to-cart-container
  .project-type-label
  input[type="radio"][value="rectangle"]:checked
  + svg
  rect {
  fill: #405362; /* Your desired dark color */
}
/* Change the rectangle text fill when its radio is checked */
.custom-add-to-cart-container
  .project-type-label
  input[type="radio"][value="rectangle"]:checked
  + svg
  text {
  fill: #ffffff; /* White text for contrast */
}

/* --- Circle Selection --- */
/* Change the main circle fill when its radio is checked */
/* We target the specific circle with the light grey fill to avoid affecting the donut hole */
.custom-add-to-cart-container
  .project-type-label
  input[type="radio"][value="circle"]:checked
  + svg
  circle[fill="#e0e0e0"] {
  fill: #405362; /* Your desired dark color */
}
/* Change the circle text fill when its radio is checked */
.custom-add-to-cart-container
  .project-type-label
  input[type="radio"][value="circle"]:checked
  + svg
  text {
  fill: #ffffff; /* White text for contrast */
}

/* --- Donut/Ring Selection --- */
/* Change the outer ring fill when its radio is checked */
.custom-add-to-cart-container
  .project-type-label
  input[type="radio"][value="donut"]:checked
  + svg
  circle[fill="#e0e0e0"] {
  fill: #405362; /* Your desired dark color */
}

/* Responsive styles */
@media (max-width: 768px) {
  .measurement-inputs {
    flex-direction: column; /* Stack inputs vertically on small screens */
    gap: 10px; /* Space between inputs */
  }
  .input-group input[type="number"] {
    width: 100% !important; /* Full width on small screens */
  }
}