/**
 * Stripe Elements CSS
 * 
 * This file contains styles for Stripe Elements to match the site's design.
 */
/* The stripe widget mount */
#stripe-widget-mount {
  min-height: 300px;
  position: relative;
  z-index: 2;
  margin-bottom: 20px;
  margin-bottom: 40px;
  padding: 25px;
  border-radius: 8px;
  background-color: #f9f9f9;
  border: 1px solid #e0e0e0;
  overflow: visible;
  clear: both;
  /* Fix for Stripe iframe elements */
}
#stripe-widget-mount iframe {
  position: relative !important;
  z-index: 3 !important;
  min-height: 40px !important;
  margin-bottom: 15px !important;
  display: block !important;
}

/* Payment details heading */
#payment-details-heading {
  display: block;
  margin-bottom: 20px;
  font-weight: 600;
  color: #333;
  font-size: 18px;
}

/* Error message styling */
#payment-message {
  color: #f44336;
  margin: 15px 0;
  padding: 10px;
  font-size: 14px;
  font-weight: 500;
  background-color: rgba(244, 67, 54, 0.1);
  border-radius: 5px;
  border-left: 3px solid #f44336;
}

/* Processing state for the submit button */
.btn-submit.processing {
  background-color: #999 !important;
  cursor: not-allowed;
}

/* Success message styling */
.payment-success-message {
  color: #4CAF50;
  margin: 15px 0;
  padding: 10px;
  font-size: 14px;
  font-weight: 500;
  background-color: rgba(76, 175, 80, 0.1);
  border-radius: 5px;
  border-left: 3px solid #4CAF50;
}

/* Stripe Elements styling overrides */
.StripeElement {
  box-sizing: border-box;
  height: 40px;
  padding: 12px 15px;
  border: 1px solid #ddd;
  border-radius: 5px;
  background-color: white;
  transition: box-shadow 0.2s ease, border-color 0.2s ease;
  margin-bottom: 20px !important;
  position: relative;
  z-index: 2;
}
.StripeElement--focus {
  border-color: #4CAF50;
  box-shadow: 0 0 0 1px #4CAF50;
}
.StripeElement--invalid {
  border-color: #fa755a;
  box-shadow: 0 0 0 1px #fa755a;
}
.StripeElement--webkit-autofill {
  background-color: #fefde5 !important;
}

/* Fix for payment method selection */
.PaymentMethod {
  margin-bottom: 20px !important;
  display: block !important;
  position: relative !important;
}

/* Ensure payment form elements don't overlap */
.ElementsApp {
  position: relative !important;
  /* Fix for tabs in payment form */
  /* Fix for Stripe payment method tabs */
  /* Fix for Stripe payment method content */
  /* Fix for Stripe payment method icons */
  /* Fix for Stripe payment method labels */
  /* Fix for Stripe payment method inputs */
  /* Fix for Stripe payment method labels */
  /* Fix for Stripe payment method errors */
  /* Fix for Stripe payment method buttons */
  /* Fix for Stripe payment method containers */
}
.ElementsApp .TabPanel {
  position: relative !important;
  z-index: 5 !important;
  display: block !important;
  margin-bottom: 20px !important;
}
.ElementsApp .TabList {
  position: relative !important;
  z-index: 5 !important;
  display: flex !important;
  margin-bottom: 20px !important;
}
.ElementsApp .TabContent {
  position: relative !important;
  z-index: 5 !important;
  display: block !important;
  margin-bottom: 20px !important;
}
.ElementsApp .TabIcon {
  position: relative !important;
  z-index: 5 !important;
}
.ElementsApp .TabLabel {
  position: relative !important;
  z-index: 5 !important;
}
.ElementsApp .Input {
  position: relative !important;
  z-index: 5 !important;
  margin-bottom: 15px !important;
}
.ElementsApp .Label {
  position: relative !important;
  z-index: 5 !important;
  margin-bottom: 10px !important;
}
.ElementsApp .Error {
  position: relative !important;
  z-index: 5 !important;
  margin-top: 10px !important;
}
.ElementsApp .Button {
  position: relative !important;
  z-index: 5 !important;
  margin-top: 20px !important;
}
.ElementsApp .Container {
  position: relative !important;
  z-index: 5 !important;
  display: block !important;
  margin-bottom: 20px !important;
}

/* Fix for card input fields */
.CardField,
.CardField-input-wrapper,
.CardField-number,
.CardField-expiry,
.CardField-cvc {
  position: relative !important;
  z-index: 5 !important;
}

/* Fix for country selector */
.CountrySelect {
  margin-bottom: 20px !important;
  position: relative !important;
  z-index: 5 !important;
}

/* Fix for payment form container */
.payment-element-wrapper {
  position: relative;
  z-index: 2;
}

/* Fix for payment loading state */
.payment-loading {
  padding: 30px;
  text-align: center;
  background-color: #f9f9f9;
  border-radius: 5px;
  margin-bottom: 20px;
}

/* Fix for Stripe form buttons */
button.SubmitButton {
  margin-top: 20px !important;
}

/* Additional spacing for form sections */
#booking-summary {
  margin-bottom: 30px;
  border-bottom: 1px solid #eee;
  padding-bottom: 20px;
}

/* Ensure proper spacing between form sections */
.form-group + #stripe-widget-mount {
  margin-top: 40px;
}

/* Responsive adjustments */
@media (max-width: 768px) {
  #stripe-widget-mount {
    min-height: auto;
    padding: 15px;
    padding-bottom: 30px;
    margin-bottom: 60px;
  }
  /* Adjust spacing on mobile */
  #stripe-widget-mount iframe {
    margin-bottom: 15px !important;
    margin-bottom: 15px !important;
  }
  /* Reduce bottom margin for Stripe elements on mobile */
  .StripeElement {
    margin-bottom: 10px !important;
  }
  .ElementsApp .Input {
    margin-bottom: 10px !important;
  }
}

/*# sourceMappingURL=stripe-elements.css.map */