/*
* ============================================================================
* FILE: auth.css
*
* DESCRIPTION:
* Contains all styles specific to the Login and Sign-up pages.
* ============================================================================
*/

/* The main container that centers the form on the page */
.auth-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 80vh; /* Takes up most of the viewport height */
  padding: var(--space-lg);
}

/* The form itself, with a max-width for readability */
.auth-form {
  width: 100%;
  max-width: 450px; /* A good width for auth forms */
  padding: var(--space-xl);
  border: 1px solid var(--color-border);
  border-radius: var(--border-radius);
  background-color: #fff;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

/* Grouping form elements */
.auth-form .form-group {
  margin-bottom: var(--space-lg);
}

/* Auth-specific input styles */
.auth-form-input {
  width: 100%;
  padding: var(--space-md);
  border: 1px solid var(--color-border);
  border-radius: var(--border-radius);
  background-color: #fff;
  font-family: var(--font-sans);
  font-size: 1rem;
  transition:
    border-color 0.2s ease,
    box-shadow 0.2s ease;
}

.auth-form-input:focus {
  outline: none;
  border-color: var(--color-accent);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--color-accent) 25%, transparent);
}

.auth-form-subtext {
  width: 100%;
  text-align: right;
  margin-top: calc(
    -1 * var(--space-md)
  ); /* Pull it a bit closer to the input above */
  margin-bottom: var(--space-lg);
  font-size: 0.9rem;
}

/* Specific styling for the submit button */
.auth-form-button {
  width: 100%;
  margin-top: var(--space-md);
}

/* Styling for links like "Need an account?" */
.auth-link {
  display: block;
  text-align: center;
  margin-top: var(--space-lg);
  font-family: var(--font-sans);
}

.auth-form-subtext .auth-link {
  display: inline; /* Make it behave like normal text, not a block */
  text-align: inherit; /* Tell it to inherit the text-align from its parent (which is 'right') */
  margin-top: 0; /* Remove the large top margin */
}

/*
* ============================================================================
* Third-Party Authentication Styles
* ============================================================================
*/

/* --- The "OR" Divider --- */
.auth-divider {
  position: relative; /* Required for the line pseudo-element */
  display: flex;
  justify-content: center;
  align-items: center;
  margin: var(--space-lg) 0; /* Vertical spacing */
  color: var(--color-text-secondary);
  font-family: var(--font-sans);
  font-size: 0.9rem;
}

/* The horizontal line that sits behind the text */
.auth-divider::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  height: 1px;
  background-color: var(--color-border); /* Use your subtle border color */
}

/* The text itself, with a background to create the "gap" effect */
.auth-divider span {
  position: relative;
  background-color: #fff; /* Match the .auth-form background */
  padding: 0 var(--space-md);
}

/* --- Google Sign-In Button --- */
.btn-google {
  display: flex; /* Overrides .btn's inline-flex to ensure it takes full width */
  width: 100%;
  background-color: #fff;
  color: var(--color-text-primary);
  border: 1px solid var(--color-border); /* A subtle border */
  font-family: var(--font-sans); /* Use sans-serif for UI buttons */
  font-weight: 500;
  margin-bottom: var(--space-lg);
}

.btn-google:hover {
  border-color: var(--color-accent);
  background-color: #fff; /* Keep background white on hover */
}

.btn-google img {
  width: 18px;
  height: 18px;
  margin-right: var(--space-md);
}