/* The Popup Container */
#simplePopup2 {
  width: 306px;
  height: 393px;
  background-color: #EEF6F8;
  position: fixed;
  right: 0;
  top: 40%;
  border-top-left-radius: 12px;
  border-bottom-left-radius: 12px;
  box-shadow: -3px 0 10px rgba(0,0,0,0.1);
  display: none;
  justify-content: center;
  align-items: center;
  z-index: 9999;
  overflow: hidden; /* Added to ensure content doesn't overflow */
}

/* Common content container styling */
.popup-content2 {
  position: relative; /* for the close button to position easily */
  width: 100%; /* Changed from 80% to 100% */
  margin: 0;   /* Removed margin */
  text-align: center;
  height: 100%;
}

/* Close Button */
.close-btn2 {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 25px;
  height: 25px;
  background-color: #208066;
  color: white;
  border: none;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  font-size: 18px;
  z-index: 100; /* on top of everything inside popup */
}
#simplePopup2.submitted .close-btn2 {
  background-color: #EEF6F8 !important;
  color: #013F2E !important;
}

.close-btn2:hover {
  background-color: #1a6854;
}
/* Special hover effect for submitted state */
#simplePopup2.submitted .close-btn2:hover {
  background-color: #dcecf0 !important;
}

/* Form container: visible by default, hidden after submit */
#formContent {
  display: block;
  padding-top: 40px; /* so content doesn't run under close button */
  width: 80%; /* Added width */
  margin: 0 auto; /* Center the form content */
}

#formContent .popup2-title {
  color: #1D354D;
  font-size: 18px;
  text-align: left;
  margin-bottom: 20px !important; /* Reduced spacing slightly */
  line-height: 1.2em !important;
  font-family: 'TTCommons-DemiBold', sans-serif !important; /* Removed "Pro" */
  font-weight: 600;
}

#formContent input,
#formContent textarea {
  width: 100%;
  height: 28px;
  border: 1px solid #1D354D !important; /* Changed to 1px and added !important */
  margin-bottom: 8px; /* Reduced slightly to fit new field */
  padding: 4px;
  box-sizing: border-box;
  color: #1D354D;
  font-size: 12px;
}

#formContent textarea {
  height: 85px; /* Reduced slightly to accommodate new field */
  resize: none;
}

.submit-btn2 {
  width: 100%;
  background-color: #208066;
  color: white;
  border: 2px solid #208066;
  padding: 6px 0;
  border-radius: 16px;
  font-size: 16px;
  cursor: pointer;
  transition: 0.3s;
  margin-top: 15px; /* Reduced from 20px */
}

.submit-btn2:hover {
  background-color: transparent;
  color: #208066;
}

/* Thank-you container: hidden by default, shown after submit */
#thankyouContent {
  display: none;
  height: 100%;
  flex-direction: column;
  padding-top: 0; /* Removed padding-top */
  overflow: hidden; /* Ensure content doesn't overflow */
}

.thankyou-top-half {
  /* Exactly top 50% of the popup */
  flex: 0 0 50%;
  overflow: hidden; /* Ensure image doesn't overflow */
  border-top-left-radius: 12px; /* Match popup's border radius */
}

.thankyou-top-half img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* Cover the container completely */
  display: block;
}

.thankyou-bottom-half {
  /* Bottom 50% of the popup */
  flex: 0 0 50%;
  padding: 15px 10% 50px; /* Added horizontal padding */
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.thankyou-bottom-half .thankyou2-title {
  text-align: left;
  margin: 0;
  color: #1D354D;
  font-size: 26px !important;
  font-family: 'TTCommons-DemiBold', sans-serif !important; /* Removed "Pro" */
  font-weight: 600 !important;
  padding: 15px 0 15px 0;
}

.thankyou-bottom-half .thankyou2-message {
  text-align: left;
  margin: 0;
  color: #1D354D;
  line-height: 1.2em;
  font-family: 'TTCommonsRegular', sans-serif !important; /* Removed "Pro" */
  font-size: 16px !important;
}

#popupTrigger2 {
  position: fixed;
  bottom: 20px;
  right: 20px;
  width: 50px;
  height: 50px;
  background-color: #208066;
  color: white;
  border: none;
  border-radius: 50%;
  font-size: 24px;
  cursor: pointer;
  z-index: 9998;
  display: flex;
  align-items: center;
  justify-content: center;
}
#popupTrigger2:hover {
  background-color: #1a6854;
}

/* Add placeholder styling */
#formContent input::placeholder,
#formContent textarea::placeholder {
  font-style: italic;
  color: #888;
}