/**
 * All of the CSS for your public-facing functionality should be
 * included in this file.
 */

/* .xpedilab-submit {
  background: #ff7300 !important;
  color: #fff !important;
  font-weight: 600 !important;
  border: none !important;
  padding: 1rem 2rem !important;
  border-radius: 4px !important;
  cursor: pointer !important;
  transition: background 0.2s ease-in-out !important;
}
.xpedilab-submit:hover {
  background: #ff9136 !important;
} */

.customer_email_field.loading {
  background-repeat: no-repeat;
  background-position: right center;
}

.customer_email_field.error {
  border-color: red;
}

.customer_email_field.success {
  border-color: green;
}

/* Order Details Container */
#order-details {
  margin-top: 20px;
  padding: 20px;
  border-radius: 5px;
  background-color: #fff;
}

/* Section Titles */
#order-details h2 {
  margin-top: 0;
  font-size: 1.5em;
  color: #112272; /* Accent color for titles */
}

/* Text Paragraphs */
#order-details p {
  margin: 5px 0;
  font-size: 1em;
  color: #555;
}

/* Input Fields */
#order-form input[type="email"],
#order-form input[type="text"] {
  width: 100%;
  padding: 15px;
  margin: 10px 0;
  border: 1px solid #112272; /* Accent color for input borders */
  border-radius: 0; /* Sharp borders */
  font-size: 1em;
  box-sizing: border-box;
}

/* Get Order Details Button */
#order-form button {
  background-color: #112272; /* Accent color for button */
  color: #fff;
  padding: 15px 30px;
  border: none;
  border-radius: 0; /* Sharp borders */
  font-size: 1.1em;
  cursor: pointer;
  transition: background-color 0.3s ease;
  margin-top: 10px;
}

#order-form button:hover {
  background-color: #0d1a5a; /* Slightly darker accent color for hover */
}

/* Cancel Order Button */
#cancel-order {
  margin-top: 20px;
  background-color: #e61146; /* Primary button color */
  color: #fff;
  padding: 15px 30px;
  border: none;
  border-radius: 0; /* Sharp borders */
  font-size: 1.1em;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

#cancel-order:hover {
  background-color: #c20e3b; /* Darker shade for hover */
}

.my-custom-coupon-btn {
  color: #fff;
  background-color: #e61146 !important;
  border: 1px solid #e61146 !important;
  padding: 5px 20px !important;
  border-radius: 10px !important;
  letter-spacing: 1px;
  cursor: pointer;
}
#validate-coupon.my-custom-coupon-btn {
  color: #fff;
  background-color: #e61146 !important;
  border: 1px solid #e61146 !important;
  padding: 5px 20px !important;
  border-radius: 10px !important;
  letter-spacing: 1px;
  cursor: pointer;
}

.my-custom-coupon-btn:disabled {
  opacity: 0.5; /* Reduce opacity when disabled */
}

#validate-coupon:disabled {
  opacity: 0.5; /* Reduce opacity when disabled */
}

#validate-coupon.my-custom-coupon-btn:disabled {
  opacity: 0.5; /* Reduce opacity when disabled */
}

.promo-code-field .ginput_container {
  display: flex;
  align-items: center;
  gap: 8px; /* espacio entre input y botón */
}

.promo-code-field .ginput_container input[type="text"] {
  flex: 1;
  margin: 0;
}

#validate-coupon {
  margin-top: 0;
}

/* Datepicker positioning fix - prevent it from appearing below footer */
.ui-datepicker,
#ui-datepicker-div,
.gform-legacy-datepicker.ui-datepicker {
  position: absolute !important;
  z-index: 99999 !important;
  display: none; /* Hidden by default, jQuery UI will show it */
}

/* Ensure datepicker appears above all other elements */
.ui-datepicker.ui-widget {
  z-index: 99999 !important;
}