/* public/css/auth.css */

/* Page wrapper to center form and keep footer at bottom */
.auth-page { min-height: calc(100vh - 80px); display:flex; align-items:center; justify-content:center; padding: 24px 16px; box-sizing:border-box; }
body { background: radial-gradient(1200px 800px at 10% -10%, rgba(0,0,0,0.05), transparent), radial-gradient(1200px 800px at 110% 110%, rgba(0,0,0,0.04), transparent), #f7f9fc; }

/* Form wrapper */
.auth-form { background:#fff; padding:2rem; border-radius: var(--card-radius); box-shadow: var(--card-shadow); border:1px solid rgba(0,0,0,.08); width:100%; max-width: 420px; box-sizing:border-box; }

/* Heading */
.auth-form h1 {
  margin-bottom: 1rem;
  text-align: center;
  color: var(--color-primary);
}

/* Labels */
.auth-form label {
  display: block;
  margin-top: 1rem;
  font-weight: 600;
  color: var(--color-secondary);
}

/* Inputs & selects */
.auth-form input, .auth-form select { width:100%; padding:.7rem .9rem; margin-top:.5rem; border:1px solid rgba(0,0,0,.16); border-radius:12px; font-family:inherit; font-size:1rem; box-sizing:border-box; transition: border-color .15s, box-shadow .15s; }
.auth-form input:focus, .auth-form select:focus { outline:none; border-color: var(--color-primary); box-shadow:0 0 0 4px rgba(0,0,0,.06); }

/* File input */
.auth-form input[type="file"] {
  padding: 0.2rem;
}

/* File help text */
.file-help-text {
  margin-top: 0.25rem;
  padding: 0.5rem 0.75rem;
  background-color: #fef3c7;
  color: #92400e;
  border: 1px solid #f59e0b;
  border-radius: 8px;
  font-size: 0.875rem;
  font-weight: 500;
  text-align: center;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

/* Field help text */
.field-help-text {
  margin-top: 0.25rem;
  padding: 0.5rem 0.75rem;
  background-color: #e0f2fe;
  color: #0369a1;
  border: 1px solid #0ea5e9;
  border-radius: 8px;
  font-size: 0.875rem;
  font-weight: 500;
  text-align: center;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

/* Buttons */
.auth-form button { width:100%; margin-top:1.5rem; padding:.9rem; background:var(--color-primary); color:#fff; border:none; border-radius:999px; font-size:1rem; cursor:pointer; box-shadow:0 8px 20px rgba(0,0,0,.12); transition: transform .16s ease, box-shadow .16s ease, opacity .16s ease; }
.auth-form button:hover { transform: translateY(-1px); opacity:.95; box-shadow:0 12px 28px rgba(0,0,0,.16); }

/* Alert messages */
.auth-form .alert {
  margin-bottom: 1rem;
  padding: 0.75rem;
  border-radius: 4px;
}
.auth-form .alert-error {
  background: #ffe5e5;
  color: #b00020;
  border: 1px solid #f5c2c7;
}
/* Thumb wrapper: center the preview below the file input */
.thumb-wrapper {
  display: flex;
  justify-content: center;
  margin-top: 0.5rem;
}

/* Profile‐preview image */
.thumb-wrapper .thumb {
  width: 100px;           /* fixed square */
  height: 100px;
  border-radius: 50%;     /* make it a circle */
  object-fit: cover;      /* crop/scale to fill */
  display: block;         /* ensure it shows as a block */
}
/* Footer text */
.auth-form p {
  margin-top: 1rem;
  text-align: center;
  font-size: 0.9rem;
  color: var(--color-secondary);
}
.auth-form a {
  color: var(--color-primary);
  text-decoration: none;
}
.auth-form a:hover {
  text-decoration: underline;
}

/* Hide by default */
.error-text {
  display: none;
}

/* Show & style when non-empty */
.error-text:not(:empty) {
  display: block;               /* take full width */
  margin-top: 0.25rem;
  padding: 0.5rem;              /* breathing room */
  background-color: #ffe5e5;    /* light red background */
  color: #b00020;               /* dark red text */
  border: 1px solid #f5c2c7;    /* red border */
  border-radius: 4px;           /* soften corners */
  font-size: 0.875rem;
}

/* Responsive small screens */
@media (max-width: 480px) {
  .auth-form {
    padding: 1rem;
    margin: 1rem;
  }
}