/* Waitlist Modal Specific Styles */
#waitlistModal input[type="email"]:focus,
#waitlistModal input[type="text"]:focus,
#waitlistModal input[type="tel"]:focus,
#waitlistModal input[type="url"]:focus,
#waitlistModal textarea:focus {
  outline: 2px solid #9575cd;
  outline-offset: 2px;
  border-color: #9575cd !important;
  box-shadow: 0 0 8px rgba(149, 117, 205, 0.75) !important;
  background-color: #383838 !important;
}

/* Required field indicator */
#waitlistModal input:required:invalid {
  border-color: rgba(229, 115, 115, 0.5);
}

#waitlistModal input:required:valid {
  border-color: rgba(149, 117, 205, 0.3);
}

/* Textarea styling */
#waitlistModal textarea {
  font-family: inherit;
  min-height: 80px;
  max-height: 200px;
}

#waitlistModal textarea::-webkit-scrollbar {
  width: 6px;
}

#waitlistModal textarea::-webkit-scrollbar-thumb {
  background: #9575cd;
  border-radius: 3px;
}

#waitlistModal input::placeholder {
  color: #9c9caa;
}

#waitlistModal button[type="submit"]:hover {
  transform: scale(1.05);
  box-shadow: 0 8px 16px rgba(149, 117, 205, 0.5);
}

/* Responsive adjustments */
@media (max-width: 768px) {
  #waitlistModal .modal-content {
    width: 95%;
    padding: 1.5rem;
  }

  #waitlistModal label {
    font-size: 0.9rem !important;
  }

  #waitlistModal input {
    font-size: 0.95rem !important;
    padding: 0.65rem !important;
  }
}

@media (max-width: 480px) {
  #waitlistModal .modal-content {
    padding: 1rem;
    margin: 10% auto;
  }

  #waitlistModal .section-title {
    font-size: 1.5rem;
  }

  #waitlistModal input {
    font-size: 0.9rem !important;
    padding: 0.6rem !important;
  }

  #waitlistModal button[type="submit"] {
    font-size: 1rem !important;
    padding: 0.75rem !important;
  }
}

/* Scrollable form on small screens */
@media (max-height: 700px) {
  #waitlistModal .modal-content {
    max-height: 90vh;
    overflow-y: auto;
  }
}

/* Add smooth scrollbar */
#waitlistModal .modal-content::-webkit-scrollbar {
  width: 8px;
}

#waitlistModal .modal-content::-webkit-scrollbar-track {
  background: #1c1c1c;
  border-radius: 10px;
}

#waitlistModal .modal-content::-webkit-scrollbar-thumb {
  background: #9575cd;
  border-radius: 10px;
}

#waitlistModal .modal-content::-webkit-scrollbar-thumb:hover {
  background: #7c5fb8;
}