/* ============================================
   auth.css
   Login, register, set-password pages.
   Uses ONLY var(--xxx) from variables.css.
   Zero theme overrides needed.
   ============================================ */

.auth-card {
  width: 100%;
  max-width: 440px;
  padding: 40px 36px 36px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius2);
  box-shadow: var(--shadow-card);
  backdrop-filter: blur(12px);
  animation: cardIn 0.4s ease-out;
}

@keyframes cardIn {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}

@media (max-width: 480px) {
  .auth-card { padding: 32px 24px 28px; }
}


/* ---- Brand ---- */

.auth-brand {
  text-align: center;
  margin-bottom: 8px;
}

.auth-brand-logo {
  max-height: 100px;
  width: auto;
  object-fit: contain;
}

.auth-brand-sub {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 3px;
  color: var(--gold);
  margin-top: 2px;
  opacity: 0.8;
}


/* ---- Divider ---- */

.auth-divider {
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--line-strong), transparent);
  margin: 20px 0;
}


/* ---- Heading ---- */

.auth-heading {
  font-family: var(--font);
  font-size: 22px;
  font-weight: 700;
  margin: 0 0 4px;
  color: var(--text);
}

.auth-sub {
  font-size: 14px;
  color: var(--muted);
  margin: 0 0 20px;
}


/* ---- Info ---- */

.auth-info {
  display: none;
  padding: 10px 14px;
  border-radius: 8px;
  background: var(--gold-focus-ring);
  border: 1px solid var(--gold2);
  color: var(--gold);
  font-size: 13px;
}

.auth-info.visible { display: block; }


/* ---- Form ---- */

.auth-form {
  display: grid;
  gap: 16px;
  margin: 0;
}


/* ---- Fields ---- */

.auth-field label {
  display: block;
  font-size: 12px;
  color: var(--muted);
  margin-bottom: 6px;
  letter-spacing: 0.3px;
}

.auth-field input {
  width: 100%;
  padding: 12px 14px;
  background: var(--input-bg);
  border: 1px solid var(--input-border);
  border-radius: var(--radius);
  color: var(--input-color);
  font-size: 15px;
  outline: none;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.auth-field input::placeholder {
  color: var(--placeholder);
}

.auth-field input:focus {
  border-color: var(--gold);
  box-shadow: 0 0 0 3px var(--gold-focus-ring);
}

/* Autofill fix */
.auth-field input:-webkit-autofill,
.auth-field input:-webkit-autofill:hover,
.auth-field input:-webkit-autofill:focus {
  -webkit-box-shadow: 0 0 0 40px var(--input-autofill) inset !important;
  -webkit-text-fill-color: var(--input-color) !important;
  caret-color: var(--input-color);
  border-color: var(--input-border) !important;
  transition: background-color 5000s ease-in-out 0s;
}


/* ---- Submit button ---- */

.auth-submit {
  width: 100%;
  padding: 13px 20px;
  border: 1px solid var(--btn-submit-border);
  border-radius: var(--radius);
  background: linear-gradient(180deg, var(--btn-submit-from), var(--btn-submit-to));
  color: var(--text);
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  letter-spacing: 0.3px;
  margin-top: 4px;
}

.auth-submit:hover {
  border-color: var(--gold);
  box-shadow: 0 0 16px var(--gold-focus-ring);
}

.auth-submit:active {
  transform: translateY(1px);
}


/* ---- Footer link ---- */

/* Several links since 18.09: the sign-in page now carries "create an account"
   and "forgotten password" side by side. The gap is what keeps them from
   running into one another, and the wrap is for the languages where both
   labels are long -- German fits on one line at 400px and not at 320px. */
.auth-footer {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 6px 18px;
  margin-top: 8px;
}

.auth-footer a {
  font-size: 13px;
  color: var(--muted);
  transition: color 0.15s ease;
}

.auth-footer a:hover {
  color: var(--gold);
}


/* ---- Error ---- */

.auth-error {
  color: var(--danger);
  font-size: 13px;
  min-height: 18px;
  margin-top: 4px;
}


/* ---- Language bar ---- */

.auth-lang-bar {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 2px;
  margin-top: 24px;
  padding-top: 16px;
  border-top: 1px solid var(--gold-focus-ring);
}

.lang-btn {
  padding: 6px 12px;
  border: none;
  border-radius: 6px;
  background: transparent;
  color: var(--muted);
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.15s ease;
  letter-spacing: 0.3px;
}

.lang-btn:hover {
  color: var(--text);
  background: var(--gold-focus-ring);
}

.lang-btn.active {
  color: var(--gold);
  background: var(--gold-focus-ring);
}

/* Theme toggle in lang bar */
.auth-lang-bar #themeToggleBtn {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  border-radius: 6px;
  padding: 6px 10px;
  font-size: 14px;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.auth-lang-bar #themeToggleBtn:hover {
  background: var(--gold-focus-ring) !important;
}


/* ---- Password strength ---- */

.pwd-requirements {
  margin-top: 8px;
  padding: 0;
  list-style: none;
}

.pwd-requirements li {
  font-size: 13px;
  line-height: 1.8;
  color: var(--muted);
  transition: all 0.25s ease;
  display: flex;
  align-items: center;
  gap: 6px;
  overflow: hidden;
  max-height: 30px;
  opacity: 1;
}

.pwd-requirements li::before {
  content: "\25CB";
  font-size: 10px;
  flex-shrink: 0;
}

.pwd-requirements li.met {
  max-height: 0;
  opacity: 0;
  margin: 0;
  line-height: 0;
}
/* Password hints */
.pwd-hints {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 14px;
    padding: 0 2px;
    margin-top: -4px;
    margin-bottom: 8px;
}

.pwd-hint {
    font-size: 12px;
    color: var(--muted);
    display: flex;
    align-items: center;
    gap: 4px;
    max-height: 24px;
    opacity: 1;
    transition: all 0.3s ease;
    overflow: hidden;
}
.pwd-hint.valid {
    max-height: 0;
    opacity: 0;
    margin: 0;
    padding: 0;
}
.pwd-hint-icon {
    font-size: 11px;
    color: var(--danger-text, #e05555);
    transition: color 0.2s;
}