/*
 * auth.css — Gebündelte Styles der Auth-Seiten (ersetzt login.css,
 * notverified.css, verifyparent.css, altersgruppe_bestaetigen.css
 * und update_consent.css).
 *
 * Abschnitte:
 *   1. Gemeinsame Regeln (Überschrift der Verifizierungs-Boxen)
 *   2. Login (index.php)
 *   3. Verifizierungs-Checkliste (auth/notverified.php, Body-Klasse .page-notverified)
 *   4. Eltern-Verifizierung (auth/verifyparent.php, Body-Klasse .page-verifyparent)
 *   5. Altersgruppe bestätigen (auth/altersgruppe_bestaetigen.php)
 *
 * update_consent.php nutzt .auth-box + .auth-box small aus diesem Sheet.
 * Die Registrierung (register.css) bleibt bewusst eigenständig.
 *
 * Box, Formularfelder und Buttons kommen aus components.css
 * (.auth-box, .form-box, .btn-block, ...).
 *
 * ACHTUNG: #div_verify existiert auf notverified.php UND verifyparent.php
 * mit strukturell unterschiedlichem Layout — daher sind diese Regeln über
 * die jeweilige Body-Klasse gescopt.
 */

/* ============================================================
   1. Gemeinsame Regeln
   ============================================================ */

/* Token-Overrides für Auth-Komponenten (components.css bleibt die Basis).
   Titel 22px, Untertitel 16px, small nie unter --font-min. */
.auth-box__title,
.status-title {
  font-size: var(--font-title);
}

.status-subtitle {
  font-size: var(--font-subheader);
}

.auth-box small {
  font-size: var(--font-min);
  color: var(--color-text-muted);
}

/* Login-Fehlerbanner (index.php?error=) */
#div_error {
  position: fixed;
  top: 16px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 50;
  max-width: min(420px, 92vw);
  padding: 12px 16px;
  border-radius: var(--radius-sm);
  background-color: var(--color-accent-soft);
  color: var(--color-accent);
  font-size: var(--font-body);
  text-align: center;
  box-shadow: var(--shadow-md);
}

/* Überschrift der Verifizierungs-Boxen (notverified + verifyparent,
   bewusst nicht .page-title — zentrierte Status-Checkliste).
   Gescopt, damit Status-Seiten mit id="h1_headline" + .status-title
   deren Abstand aus components.css behalten. */
.page-notverified #h1_headline,
.page-verifyparent #h1_headline {
  margin: 0 0 20px 0;
  text-align: center;
  color: var(--color-text);
  font-size: var(--font-title);
  font-weight: 650;
  letter-spacing: -0.02em;
}

/* ============================================================
   2. Login (index.php)
   Tooltip neben der Überschrift, Link-Leiste unter dem Button,
   Tutorial-Video und Cookie-Hinweis.
   ============================================================ */

/* Info-Tooltip neben der Login-Überschrift */
#span_login_tooltip_icon {
  font-size: 1em;
  vertical-align: top;
}

/* Gestapelte rote Links unter dem Anmelden-Button */
.login-link {
  display: block;
  margin-top: 15px;
  font-size: var(--font-body);
  color: var(--color-accent);
  text-decoration: none;
}

/* Kleine Fußzeilen-Links (Hilfe, Impressum, Datenschutz, ...) */
.login-smalllink {
  display: inline-block;
  margin: 15px 5px 0 5px;
  font-size: var(--font-min);
  color: var(--red-color);
}

/* Tutorial-Video unter der Login-Box */
#div_tutorial {
  display: block;
  padding: 60px 0;
  width: calc(var(--auth-width) + 100px);
  margin: 0 auto;
}

#div_tutorial video {
  display: block;
  width: calc(100% - 10px);
  height: auto;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
}

/* Cookie-Hinweis (Vollbild-Overlay, wird per JS eingeblendet) */
#cookieConsentBanner {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.75); /* Halbtransparenter schwarzer Hintergrund */
  display: none;
  justify-content: center;
  align-items: center;
  z-index: 1000; /* Stellt sicher, dass das Banner über anderen Inhalten angezeigt wird */
}

#cookieConsentBanner div {
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  padding: 40px;
  border-radius: var(--radius-lg);
  width: 50%;
  max-width: 400px;
  text-align: left;
}

#cookieConsentBanner h3 {
  color: var(--color-text);
  font-size: var(--font-title);
  margin: 0;
}

#cookieConsentBanner p {
  color: var(--color-text);
  margin: 20px 0;
  font-size: var(--font-body);
}

#cookieConsentBanner a {
  color: var(--red-color);
  text-decoration: underline;
}

/* ============================================================
   3. Verifizierungs-Checkliste (auth/notverified.php)
   Graue Statusbox mit Häkchen-/Kreuz-Liste und Lade-Spinner.
   Navigation (Zurück/Weiter) nutzt .btn aus components.css.
   ============================================================ */

/* Graue Statusbox (gescopt, da verifyparent dieselbe ID anders nutzt) */
.page-notverified #div_verify {
  width: fit-content;
  margin: 50px auto 4% auto;
  padding: 40px 50px;

  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;

  text-align: center;
  font-size: var(--font-body);
}

#ul_notverified {
  list-style: none;
  text-align: left;
  display: block;
  margin-bottom: 0;
  padding-left: 0;
}

.span_bewertung_hover {
  margin-left: 5px;
}

.span_notverified_cross {
  color: var(--color-accent);
  font-weight: bold;
  font-size: var(--font-title);
}

.span_notverified_check {
  color: #35BB19;
  font-weight: bold;
  font-size: var(--font-section);
}

/* Kleiner Lade-Spinner für den aktuell ausstehenden Schritt */
.div_notverified_loader {
  display: inline-block;
  border: 2.5px solid #f3f3f3;
  border-top: 2.5px solid #3498db;
  border-radius: 50%;
  padding: 5px 5px;
  margin-left: -5px;
  margin-top: 2.5px;
  width: 6px;
  height: 6px;
  animation: spin 2s linear infinite;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.verify_resend {
  margin: 0 0 0 20px;
  text-align: center;
  color: var(--color-text);
  font-size: var(--font-meta);
}

/* ============================================================
   4. Eltern-Verifizierung (auth/verifyparent.php)
   Die Seite bindet das Register-Partial step-8-confirmation.php ein
   und braucht daher dessen Klassen. Alle Regeln sind über
   .page-verifyparent gescopt, damit sie nicht auf andere Auth-Seiten
   durchschlagen (dieselben Klassennamen nutzt auch register.css).
   ============================================================ */

/* Ohne Sidebar: Formular-Box zentriert (nicht an --space-page links) */
.page-verifyparent #div_verify {
  margin: 70px auto 30px;
}

/* ---- Styles für das eingebundene Bestätigungs-Partial ---- */

.page-verifyparent .register-step-content {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.page-verifyparent #register_review {
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: 20px 24px;
  color: var(--color-text);
  margin-bottom: 24px;
}

.page-verifyparent .label_register_datenschutz {
  display: inline-block;
  text-align: left;
  text-decoration: none;
  color: var(--color-text);
  margin: 8px 0px 20px 0px;
  font-size: var(--font-body);
}

.page-verifyparent small {
  font-size: var(--font-min);
  color: var(--color-text-muted);
}

.page-verifyparent .label_stars::after {
  content: "*";
  color: var(--red-color);
  padding: 5px 2px 5px 5px;
}

.page-verifyparent .consent-text {
  color: var(--color-text);
}

/* ============================================================
   5. Altersgruppe bestätigen (auth/altersgruppe_bestaetigen.php)
   Erklärungs-Box und Label-Zeile mit Tooltip.
   Box, Formularfelder, Button und Tooltip kommen aus components.css.
   ============================================================ */

/* Weiße Erklärungs-Box über dem Auswahlfeld */
.altersgruppe-explanation {
  font-size: var(--font-body);
  color: var(--color-text);
  margin: 0 0 24px 0;
  padding: 16px;
  background-color: var(--color-hover);
  border-radius: var(--radius-sm);
  line-height: 1.6;
}

.altersgruppe-explanation > strong {
  display: block;
  margin-bottom: 12px;
  font-size: var(--font-subheader);
  font-weight: 600;
}

.altersgruppe-explanation p {
  margin: 0 0 8px 0;
}

.altersgruppe-explanation p:last-child {
  margin-bottom: 0;
}

/* Label und Tooltip-Icon in einer Zeile */
.altersgruppe-label-wrapper {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 6px;
}