/* ── Login card text ── */
.login-logo {
  display: flex; align-items: center; justify-content: center;
  gap: 10px; font-size: 20px; font-weight: 800;
  margin-bottom: 32px; color: #fff;
}
.login-card h2 { font-size: 22px; margin-bottom: 6px; color: #fff; }
.login-card p  { font-family: 'Noto Sans', sans-serif; font-weight: 400; font-size: 14px; color: rgba(255,255,255,0.65); margin-bottom: 28px; }
.login-card label {
  color: rgba(255,255,255,0.75); font-size: 12px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.06em; text-align: left;
}
.login-error { color: #ff8080; font-size: 13px; margin-top: 10px; display: none; }

/* ── Form elements ── */
.form-group { margin-bottom: 16px; }
.form-group label { text-align: left; }
label {
  display: block; font-size: 12px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .06em;
  color: var(--charcoal, #121417); margin-bottom: 6px;
}
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="date"] {
  width: 100%; padding: 11px 14px;
  font-family: var(--body-font); font-size: 14px;
  border: 1.5px solid var(--border, #E5E7EB);
  border-radius: 9px; outline: none;
  transition: border-color .15s; background: #fff;
}
input:focus { border-color: var(--brand-primary, #033436); }

/* ── Buttons ── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  padding: 11px 22px; font-family: var(--body-font); font-size: 14px; font-weight: 700;
  border: none; border-radius: 9px; cursor: pointer; transition: all .18s;
}
.btn-primary { background: var(--brand-highlight, #76bd43); color: #fff; font-size: 15px; font-weight: 600; }
.btn-primary:hover { background: var(--brand-highlight, #76bd43); filter: brightness(0.85); }
.btn-full { width: 100%; }
.btn:disabled { opacity: .45; cursor: not-allowed; }

/* ── Password show/hide toggle ── */
.pw-wrap { position: relative; display: block; }
.pw-wrap input[type="password"],
.pw-wrap input[type="text"] { padding-right: 40px; }
.pw-toggle {
  position: absolute; right: 10px; top: 50%; transform: translateY(-50%);
  background: none; border: none; padding: 4px; cursor: pointer;
  color: #9CA3AF; display: flex; align-items: center; line-height: 1;
}
.pw-toggle:hover { color: #6B7280; }
.pw-toggle:focus-visible { outline: 2px solid var(--brand-primary, #033436); outline-offset: 2px; border-radius: 4px; }