/* auth.css — Shared authentication page styles */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

body {
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background: linear-gradient(135deg, #FFF7F0 0%, #F9FAFB 60%, #F0F4FF 100%);
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}

/* ── Card ────────────────────────────────────────────────────────────────────── */

.auth-wrap {
  width: min(460px, 100%);
}

.auth-card {
  background: white;
  border-radius: 18px;
  border: 1.5px solid #E5E7EB;
  padding: 36px 32px;
  box-shadow: 0 4px 32px rgba(0,0,0,.07);
  animation: cardIn .3s cubic-bezier(.34,1.4,.64,1);
}
@keyframes cardIn {
  from { opacity:0; transform:translateY(14px) scale(.98); }
  to   { opacity:1; transform:translateY(0) scale(1); }
}

/* ── Brand ───────────────────────────────────────────────────────────────────── */

.auth-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 28px;
  text-decoration: none;
}
.auth-logo {
  width: 38px; height: 38px;
  background: linear-gradient(135deg, #D15000, #ff7b2e);
  border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  box-shadow: 0 2px 8px rgba(209,80,0,.3);
}
.auth-brand-name {
  font-size: 17px; font-weight: 800; color: #111827; letter-spacing: -.3px;
}

/* ── Heading ──────────────────────────────────────────────────────────────────── */

.auth-title {
  font-size: 24px; font-weight: 800; color: #111827;
  letter-spacing: -.5px; margin-bottom: 6px;
}
.auth-subtitle {
  font-size: 13px; color: #6B7280; line-height: 1.6; margin-bottom: 26px;
}

/* ── Alerts ──────────────────────────────────────────────────────────────────── */

.alert {
  padding: 11px 14px;
  border-radius: 9px;
  font-size: 13px; font-weight: 500;
  margin-bottom: 16px;
  display: none;
}
.alert.show { display: flex; align-items: flex-start; gap: 8px; }
.alert-icon { flex-shrink: 0; margin-top: 1px; }
.alert-error   { background: #FEF2F2; color: #991B1B; border: 1px solid #FECACA; }
.alert-success { background: #ECFDF5; color: #065F46; border: 1px solid #A7F3D0; }
.alert-info    { background: #EFF6FF; color: #1E40AF; border: 1px solid #BFDBFE; }

/* ── Form ────────────────────────────────────────────────────────────────────── */

.form-group { margin-bottom: 16px; }
.form-label {
  display: block; font-size: 12px; font-weight: 700;
  color: #374151; text-transform: uppercase; letter-spacing: .4px;
  margin-bottom: 6px;
}
.form-input {
  width: 100%; padding: 10px 13px;
  border: 1.5px solid #E5E7EB; border-radius: 9px;
  font-size: 14px; font-family: inherit; color: #111827;
  background: white; outline: none;
  transition: border-color .15s, box-shadow .15s;
}
.form-input:focus {
  border-color: #D15000;
  box-shadow: 0 0 0 3px rgba(209,80,0,.1);
}
.form-input::placeholder { color: #C0C4CC; }
.form-input.error { border-color: #EF4444; }

/* Password field with show/hide toggle */
.pw-wrap { position: relative; }
.pw-wrap .form-input { padding-right: 44px; }
.pw-toggle {
  position: absolute; right: 12px; top: 50%;
  transform: translateY(-50%);
  background: none; border: none; cursor: pointer;
  color: #9CA3AF; padding: 4px; display: flex;
  align-items: center; border-radius: 4px;
  transition: color .15s;
}
.pw-toggle:hover { color: #374151; }

/* Password strength bar */
.strength-bar {
  height: 3px; border-radius: 2px;
  background: #F3F4F6; margin-top: 7px; overflow: hidden;
}
.strength-fill {
  height: 100%; border-radius: 2px; width: 0;
  transition: width .35s ease, background-color .35s ease;
}
.strength-label {
  font-size: 11px; margin-top: 4px; font-weight: 600;
  min-height: 16px; transition: color .35s;
}

/* ── Buttons ─────────────────────────────────────────────────────────────────── */

.btn-auth {
  width: 100%; padding: 11px 20px;
  background: #D15000; color: white;
  border: none; border-radius: 9px;
  font-size: 14px; font-weight: 700; font-family: inherit;
  cursor: pointer; margin-top: 6px;
  transition: background .15s, transform .1s, box-shadow .15s;
  display: flex; align-items: center; justify-content: center; gap: 8px;
}
.btn-auth:hover:not(:disabled) {
  background: #B84500;
  box-shadow: 0 4px 12px rgba(209,80,0,.3);
}
.btn-auth:active:not(:disabled) { transform: scale(.99); }
.btn-auth:disabled { opacity: .6; cursor: not-allowed; }

/* ── Divider & footer ────────────────────────────────────────────────────────── */

.auth-divider {
  display: flex; align-items: center; gap: 12px;
  margin: 20px 0;
}
.auth-divider::before,
.auth-divider::after {
  content: ''; flex: 1; border-top: 1px solid #E5E7EB;
}
.auth-divider span {
  font-size: 12px; color: #9CA3AF; white-space: nowrap;
}

.auth-footer {
  margin-top: 22px; text-align: center;
  font-size: 13px; color: #6B7280;
}
.auth-footer a, .auth-link {
  color: #D15000; font-weight: 600;
  text-decoration: none; cursor: pointer;
}
.auth-footer a:hover, .auth-link:hover { text-decoration: underline; }

/* ── Success state ───────────────────────────────────────────────────────────── */

.success-state {
  text-align: center; padding: 12px 0; display: none;
}
.success-state.show { display: block; }
.success-icon {
  font-size: 48px; margin-bottom: 16px; animation: bounceIn .5s ease;
}
@keyframes bounceIn {
  0%   { transform: scale(0); opacity: 0; }
  60%  { transform: scale(1.2); opacity: 1; }
  100% { transform: scale(1); }
}
.success-title { font-size: 18px; font-weight: 800; color: #111827; margin-bottom: 8px; }
.success-sub   { font-size: 13px; color: #6B7280; line-height: 1.6; }

/* ── Forgot password link ────────────────────────────────────────────────────── */
.forgot-link {
  display: block; text-align: right;
  font-size: 12px; color: #D15000; font-weight: 600;
  text-decoration: none; margin-top: -8px; margin-bottom: 16px;
}
.forgot-link:hover { text-decoration: underline; }