/* ==========================================================================
   Campus Front-End Form Styles
   ========================================================================== */

/* --- Layout for the new Auth Page --- */
.campus-auth-wrapper {
  margin: 40px auto;
  padding: 150px 0;
  padding-bottom: 100px;
}

.auth-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px; /* Increased gap */
  align-items: start;
}

.auth-grid-right {
  background-color: #f7f7f7;
  padding: 40px;
  border-radius: 8px;
}

.auth-grid-right h2 {
  margin-top: 0;
  font-size: 1.8rem; /* Example size */
  color: #072e48;
}

.auth-grid-right p {
  line-height: 1.6;
}

.auth-grid-right .button {
  background-color: #006ab3;
  color: #ffffff !important;
  padding: 12px 24px;
  text-decoration: none;
  border-radius: 8px;
  display: inline-block;
  margin-top: 20px;
  font-weight: 600;
  transition: background-color 0.3s ease-in-out;
}

.auth-grid-right .button:hover {
  background-color: #00528c;
}

/* Responsive for tablets and mobile */
@media (max-width: 991px) {
  .auth-grid {
    grid-template-columns: 1fr;
    gap: 40px;
  }
}

/* --- General Form Styling (re-applying your styles) --- */
.campus-form {
  margin-top: 2rem;
}

.campus-form p {
  margin-bottom: 1.5rem;
}

/* --- Input Fields (Text, Password, Email) --- */
.campus-form input[type="text"],
.campus-form input[type="password"],
.campus-form input[type="email"] {
  width: 100%;
  border: 1.5px solid #dcdcdc !important;
  border-radius: 8px !important;
  background: transparent !important;
  padding: 12px 15px !important;
  font-weight: 400 !important;
  color: #072e48 !important;
  transition: border-color 0.3s ease-in-out;
  box-shadow: none !important;
  outline: none !important;
}

/* --- Focus State for Inputs --- */
.campus-form input[type="text"]:focus,
.campus-form input[type="password"]:focus,
.campus-form input[type="email"]:focus {
  border-color: #006ab3 !important;
}

/* --- Labels --- */
.campus-form label {
  display: block;
  font-weight: 600;
  margin-bottom: 0.5rem;
  color: #072e48;
}

/* --- Checkbox Styling --- */
.campus-form .forgetmenot label {
  font-weight: 400;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.campus-form .forgetmenot input[type="checkbox"] {
  width: 1.2em;
  height: 1.2em;
}

/* --- Submit Button --- */
.campus-form .button.button-primary {
  width: 100%;
  background-color: #f59d0e !important;
  border: 1px solid #f59d0e !important;
  color: #ffffff !important;
  border-radius: 8px !important;
  font-weight: 600;
  font-size: 1rem;
  padding: 12px 30px;
  transition: background-color 0.3s ease-in-out, border-color 0.3s ease-in-out;
  cursor: pointer;
}

.campus-form .button.button-primary:hover {
  background-color: #d6890c !important;
  border-color: #d6890c !important;
}

/* --- Helper Links & Messages --- */
.lost-password-link,
.back-to-login {
  margin-top: 1.5rem;
  text-align: center;
}

.lost-password-link a,
.back-to-login a {
  color: #006ab3;
  text-decoration: none;
}

.login-error {
  color: #d63638;
  background-color: #fbeaea;
  border: 1px solid #d63638;
  padding: 1rem;
  border-radius: 8px;
  margin-bottom: 1.5rem;
}

.login-message {
  color: #0f5132;
  background-color: #d1e7dd;
  border: 1px solid #0f5132;
  padding: 1rem;
  border-radius: 8px;
  margin-bottom: 1.5rem;
}