/* login.css — keep this page-scoped. Do NOT override #header/.wrapper globally. */

/* Optional: only affects this page background if you want it */
body {
  background: #fafafa;
}

/* Scope everything to the login page section to avoid impacting the nav/header */
#main.wrapper.style1 {
  /* leave theme padding alone; only adjust if you want more space */
}

/* Use a dedicated card wrapper. Since your markup uses .container, scope it to #main */
#main .container {
  max-width: 620px;
  margin: 5vh auto;
  padding: 24px;
  border: 1px solid #eee;
  border-radius: 12px;
  background: #fff;

  /* critical for inputs/absolute elements */
  box-sizing: border-box;
}

/* Alerts */
#main .alert {
  padding: 0.75rem 1rem;
  border-radius: 6px;
  margin: 0.5rem 0;
}
#main .alert-ok {
  background: #e8f8ef;
  color: #1d7f43;
  border: 1px solid #bfe8cf;
}
#main .alert-err {
  background: #fdecea;
  color: #611a15;
  border: 1px solid #f5c6cb;
}

/* Labels + inputs */
#main label {
  display: block;
  margin: 0.5rem 0 0.25rem;
}

#main input[type='email'],
#main input[type='password'],
#main input[type='text'] {
  width: 100%;
  padding: 0.65rem 0.75rem;
  border: 1px solid #ccc;
  border-radius: 8px;
  box-sizing: border-box;
}

/* Password field with eye button */
#main .password-wrapper {
  position: relative;
}

#main .password-wrapper input {
  width: 100%;
  padding: 0.65rem 0.75rem;
  padding-right: 42px; /* room for eye */
  border: 1px solid #ccc;
  border-radius: 8px;
  box-sizing: border-box;
}

#main .pw-toggle {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  border: 0;
  background: transparent;
  padding: 4px;
  cursor: pointer;
  line-height: 0;
}

#main .pw-toggle img {
  width: 22px;
  height: 22px;
  display: block;
  object-fit: contain;
}

/* Remember row */
#main .auth-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0.75rem 0 0.25rem;
}

/* Actions row */
#main .auth-actions {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  justify-content: space-between;
  flex-wrap: wrap;
  margin-top: 0.9rem;
}

/* Button */

#main .muted {
  color: #666;
  font-size: 0.9rem;
}

/* Mobile: keep the card within viewport without changing the header */
@media (max-width: 768px) {
  #main .container {
    max-width: 100%;
    margin: 3vh auto;
    padding: 16px;
    border-radius: 12px;
  }

  #main .auth-actions {
    flex-direction: column;
    align-items: stretch;
  }

  #main .auth-actions .button {
    width: 100%;
  }
}