/* forms.css */

/* Book a Consultation */
/* BUTTON STYLE for Consultation */
.btn-consult {
  background: #267FFF;
  color: white;
  padding: 0.5rem 1.2rem;
  border-radius: 30px;
  font-weight: 600;
  text-decoration: none;
  transition: background 0.3s;
  border: none;
}

.btn-consult:hover {
  background: #1f66cc;
}

/* Overlay */
.overlay {
  position: fixed;
  inset: 0; /* shorthand for top, right, bottom, left */
  top: 0;
  left: 0;
  width: 100vw;   /* 100% of the viewport width */
  height: 100vh;  /* 100% of the viewport height */
  background: #54d2ff59; /* semi-transparent background */
  z-index: 9998;  /* Ensure it's above other elements */
  display: flex;
  align-items: center;
  justify-content: center;
  visibility: visible; /* Make sure it's visible when modal is shown */
  pointer-events: auto;
  overflow-y: auto;
  padding: 2vh; /* Add some padding for smaller screens */
}

/* Hide overlay by default */
.overlay.hidden {
  visibility: hidden; /* Hide the overlay if it's not active */
  pointer-events: none; /* Disable interactions when hidden */
}

/* Modal container */

.modal {
  background: #F8FAFE;
  width: 90vw;  /* 90% of the viewport width for mobile */
  max-width: 650px;  /* Limit the width on larger screens */
  height: 90vh;  /* 90% of the viewport width for mobile */  
  max-height: 1000px; /* Limit the height on larger screens */
  padding: 2vh 0rem;
  border-radius: 35px 0 35px 0; /* Only two corners rounded */
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  align-items: center;  /* Center all content inside modal */
  justify-content: flex-start;  /* Center content vertically */
  position: relative;  /* To allow absolute positioning of the close button */
  text-align: center;
  transform: scale(0.95);
  animation: popup 0.3s ease-out forwards;
}

.modal-form {
  padding: 20px;
  width: 90%;
  display: flex;
  flex-direction: column;
  gap: 1.5rem; /* Adds some space between fields */
}

.modal-inner {
  width: 90%;
  max-width: 600px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 1rem;
  padding: 1rem;
}


/* Media Query for Larger Screens (Desktop) */
@media (min-width: 769px) {
  .modal {
    width: 60vw;  /* 60% of the viewport width for desktop */
    max-height: 800px; /* 80% height on larger screens */
  }
}

/* Each form field group */
.form-group {
  flex: 1 1 47%; /* Stretch the fields wider */
  display: flex;
  flex-direction: column;
  width: 100%;
}

/* Label styling */
.form-group label {
  font-weight: 500;
  font-size: 12px;
  line-height: 22px;
  color: #001a40;
  text-align: left;
  text-transform: uppercase;
}

/* Form input styles */
.form-input {
  width: 100%;
  padding: 0.8rem;
  margin-bottom: .5rem;
  border: 1px solid #ccc;
  color: #001a40;
  
}

/* Form rows */
.form-row {
  width: 100%;
  max-width: 600px; /* Wider row inside modal */
  min-height: 35px; /* Minimum height for each row */
  margin: 0 auto;
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
  justify-content: center;
}


/* Close button */
.close-button {
  position: absolute;
  top: 10px;
  right: 20px;
  background: transparent;
  border: none;
  font-size: 2rem;
  color: #333;
  cursor: pointer;
  pointer-events: all;
}

/* Modal Title */
.modal-title {
  font-size: 30px;
  line-height: 42px;
  font-size: 600;
  color: #001a40;
}

.modal-subtitle {
  font-size: 18px;
  line-height: 32px;
  font-size: 400;
  color: #001a40b0;
}

/* Form Styles */
.modal-form {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

/* Full width input */
.full-width {
  width: 100%;
}



/* Submit Button */
.submit-button {
  height: 40px;
  width: 40%;
  align-self: center;
  background: #267FFF;
  color: white;
  border-radius: 30px;
  font-weight: 500;
  font-size: 16px;
  line-height: 16px;
  text-decoration: none;
  transition: background 0.3s;
  border: none;
}

.submit-button:hover {
  background: #1f66cc;
}

/* Mobile responsiveness */
/* Make sure everything is centered on small screens */
@media (max-width: 768px) {
  .modal {
    width: 90vw;
    min-height: 80vh;
    max-height: 95vh; /* important: limit height */
    overflow-y: auto; /* enable scroll inside modal */
    max-width: none;
    margin-top: 0;
  }

  .form-row {
    flex-direction: column;
    gap: 0.5rem; /* Adjust gap for smaller screens */
  }

  .scroll-guide {
    position: fixed; /* instead of absolute */
    bottom: 1rem;
    right: 1rem;
    writing-mode: vertical-rl;
    text-orientation: mixed;
    font-size: 8px;
    color: gray;
    opacity: 0.7;
    animation: bounce 2s infinite;
    z-index: 9999;
  }
  .overlay {
    display: flex;
    align-items: flex-start; /* move modal to top */
    justify-content: center;
    padding: 2vh 0; /* small gap from top */
    overflow-y: auto; /* allow scroll on overlay */
  }
  .submit-button {
  width: 80%;

  }
}



@keyframes bounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(5px); }
}

@keyframes popup {
  from {
    transform: scale(0.95);
    opacity: 0;
  }
  to {
    transform: scale(1);
    opacity: 1;
  }
}