/* Overlay styling */
.modal-overlay-extrusions {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  z-index: 9999;
  display: none;
  justify-content: center;
  align-items: center;
}

/* Modal box styling */
.modal-extrusions {
  background: #fff;
  padding: 20px;
  border-radius: 6px;
  max-width: 600px; /* Increased width for better readability */
  width: 90%;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
  font-family: 'Segoe UI', Roboto, Arial, sans-serif; /* Added font */
}

/* Modal title */
.modal-extrusions h3 {
  margin-top: 0;
  font-size: 20px;
  font-weight: bold;
  margin-bottom: 10px;
  text-align: center; /* Center align title */
  font-family: 'Segoe UI', Roboto, Arial, sans-serif; /* Consistent font */
}

/* Order summary list */
.modal-content-extrusions ul {
  list-style: disc; /* Added bullets */
  padding-left: 20px; /* Indentation for bullets */
  margin: 10px 0;
}

.modal-content-extrusions li {
  margin-bottom: 5px;
  font-size: 16px;
}

/* Shipping note */
.modal-warning-extrusions {
  color: #b22222;
  font-size: 14px;
  margin-top: 10px;
  background: #fff7e6; /* Light highlight background */
  border-left: 4px solid #ffb84d; /* Emphasized left border */
  padding: 6px;
  border-radius: 4px;
}

/* Total pieces */
.total-pieces-extrusions {
  margin-top: 10px;
  font-weight: bold;
  font-size: 16px;
}

/* Actions */
.modal-actions-extrusions {
  margin-top: 15px;
  text-align: center; /* Center align buttons */
}

.modal-actions-extrusions button {
  margin: 0 8px; /* Equal spacing between buttons */
  padding: 8px 16px;
  font-size: 14px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

#amendOrderBtn-extrusions,
#confirmOrderBtn-extrusions {
  width: 200px;
}

#amendOrderBtn-extrusions {
  background: #ccc;
}

#amendOrderBtn-extrusions:hover {
  background: #b3b3b3;
}

#confirmOrderBtn-extrusions {
  background: #007bff;
  color: white;
}

#confirmOrderBtn-extrusions:hover {
  background: #0056b3;
}

/* Adding to Cart modal spinner */
#addingToCartModal-extrusions .loading-spinner-extrusions {
  font-size: 32px;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
#addingToCartModal-extrusions h3 {
  font-size: 18px;
  margin-bottom: 10px;
  text-align: center;
  color: #333;
}

#addingToCartModal-extrusions p {
  font-size: 14px;
  color: #555;
  text-align: center;
}

/* Mobile: stack modal action buttons with spacing */
@media (max-width: 768px) {
  .modal-actions-extrusions {
    display: flex;
    flex-direction: column;
    gap: 12px;              /* clean vertical space between buttons */
  }
  .modal-actions-extrusions button,
  #amendOrderBtn-extrusions,
  #confirmOrderBtn-extrusions {
    width: 100%;            /* easy to tap on mobile */
    margin: 0;              /* gap handles the spacing */
  }
}