/* Signup Wrapper */
.signup-wrapper {
  display: flex; /* Side-by-side layout */
  width: 100%; /* Fills #content’s inner width */
  height: 100%; /* Fills #content’s inner height */
  box-sizing: border-box; /* Ensures padding doesn’t overflow */
}

/* Left Container */
.signup-left {
  width: 50%; /* Half of .signup-wrapper */
  height: 100%; /* Full height of wrapper */
  display: flex; /* For centering */
  justify-content: center; /* Center horizontally */
  align-items: center; /* Center vertically */
  background-color: #ffffff; /* Matches #content */
  box-sizing: border-box; /* Prevents overflow */
}

/* Signup Container (inside left) */
.signup-container {
  max-width: 400px; /* Keeps form compact */
  width: 100%; /* Responsive within its parent */
  padding: 20px; /* Matches #content padding */
  margin-bottom: 100px;
  background-color: #ffffff; /* Matches #content */
  border-radius: 8px; /* Matches #content */
}

/* Signup Title */
.signup-title {
  text-align: center; /* Matches header */
  font-size: 1.5em; /* Slightly smaller than header’s 2em */
  margin-bottom: 1.5rem; /* Consistent spacing */
  color: #2d3748; /* Matches body/header text */
  font-weight: 500; /* Matches header */
}

/* Form Styling */
.signup-form {
  display: flex;
  flex-direction: column;
  gap: 1rem; /* Consistent spacing */
}

/* Form Group */
.form-group {
  display: flex;
  flex-direction: column;
}

.form-group label {
  font-size: 1rem; /* Matches input font-size */
  margin-bottom: 0.5rem; /* Consistent spacing */
  color: #2d3748; /* Matches body text */
  font-weight: 400; /* Normal weight */
}

/* Signup Form Inputs */
.signup-form input {
  width: 100%; /* Full width, overrides global 125px */
  padding: 6px; /* Matches global input */
  margin-bottom: 0; /* Gap handles spacing */
  border: 1px solid #e2e8f0; /* Matches global input */
  border-radius: 6px; /* Matches global input */
  background-color: #fafafa; /* Matches global input */
  font-size: 1em; /* Matches global input */
  color: #2d3748; /* Matches global input */
  transition: border-color 0.2s ease; /* Matches global input */
}

.signup-form input:focus {
  border-color: #2b6cb0; /* Matches global input focus */
  background-color: #ffffff; /* Matches global input focus */
}

/* Right Container */
.signup-right {
  width: 50%; /* Half of .signup-wrapper */
  height: 100%; /* Full height of wrapper */
  display: flex; /* To contain motivation-container */
  box-sizing: border-box; /* Prevents overflow */
}

/* Motivation Container */
.motivation-container {
  width: 100%; /* Fills .signup-right */
  height: 100%; /* Fills .signup-right */
  background-color: #2b6cb0; /* Nice blue */
  border-radius: 8px; /* Matches #content */
  padding: 20px; /* Matches #content padding */
  display: flex;
  flex-direction: column; /* Stack vertically */
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); /* Matches #content */
  box-sizing: border-box; /* Ensures padding stays inside */
}

/* Motivation Text */
.motivation-text {
  height: 30%; /* Takes 30% of .motivation-container height */
  font-size: 1.5em; /* Larger size */
  color: #ffffff; /* White for contrast */
  font-weight: 500; /* Matches header/button */
  text-align: left; /* Aligned to the left */
  padding: 0 20px; /* Left padding for alignment */
  margin: 0 150px 0 50px; /* No extra margins */
  display: flex; /* For centering text vertically */
  align-items: center; /* Center text vertically within its 30% */
}

/* Graph Container */
.graph-container {
  height: 70%; /* Takes 70% of .motivation-container height */
  width: 90%; /* Keeps it smaller and centered */
  background-color: #2b6cb0; /* Nice blue */
  border-radius: 8px; /* Matches inputs */
  display: flex;
  justify-content: center; /* Center horizontally */
  align-items: center; /* Center content vertically */
  color: #ffffff; /* White text */
  font-size: 1em;
  text-align: center;
  margin: 0 auto; /* Center horizontally within container */
}

.graph-container img {
  max-width: 100%; /* Ensures the image doesn’t exceed the container’s width */
  max-height: 100%; /* Ensures the image doesn’t exceed the container’s height */
  object-fit: contain; /* Scales the image while preserving aspect ratio */
}

/* Responsive Design */
@media (max-width: 768px) {
  .signup-wrapper {
    flex-direction: column; /* Stack vertically */
    height: auto; /* Natural height */
  }

  .signup-left,
  .signup-right {
    width: 100%; /* Full width on small screens */
    height: auto; /* Natural height */
  }

  .signup-left {
    padding: 10px; /* Consistent padding */
  }

  .signup-container {
    margin: 0; /* Remove extra margin */
  }

  .motivation-container {
    min-height: 300px; /* Ensure visibility */
    padding-top: 20px; /* Consistent padding */
  }

  .motivation-text {
    height: auto; /* Natural height for text on mobile */
    font-size: 1.3em; /* Slightly smaller */
    padding: 20px; /* Consistent padding */
  }

  .graph-placeholder {
    height: 200px; /* Fixed height for mobile */
    width: 80%; /* Slightly wider for visibility */
    margin: 0 auto 20px auto; /* Center and space */
  }
}