/**
 * /assets/css/pages/auth.css
 * Auth Layout Consolidation - SSOT für Login, Register, Forgot/Reset Password
 * Glow-Design Basis
 */

/* =====================================================
   CSS VARIABLES
   ===================================================== */
:root {
  --auth-text-primary: #f5f5f0;
  --auth-text-secondary: #e0e0d8;
  --auth-text-accent: #d4af37;
  --auth-bg-dark: #0a0a0a;
  --auth-bg-card: rgba(26, 26, 26, 0.9);
  --auth-gold: #d4af37;
  --auth-gold-dark: #b8941f;
}

/* =====================================================
   BASE LAYOUT
   ===================================================== */
body.auth-page {
  color: var(--auth-text-primary);
  background: var(--auth-bg-dark);
  overflow: hidden;
  height: 100vh;
  margin: 0;
  padding: 0;
  font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
}

/* =====================================================
   GLOW BOX CONTAINER
   ===================================================== */
.glow-box-container {
  min-height: calc(100vh - 30px);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  padding: 15px;
  box-sizing: border-box;
}

.glow-box-container::before {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(135deg, #0a0a0a 0%, #1a1a1a 100%);
  z-index: -2;
}

.glow-box-container::after {
  content: '';
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100vw;
  height: 100vh;
  background: radial-gradient(
    circle at center,
    rgba(212, 175, 55, 0.08) 0%,
    rgba(212, 175, 55, 0.04) 25%,
    rgba(212, 175, 55, 0.02) 50%,
    transparent 70%
  );
  z-index: -1;
  animation: glowPulse 8s ease-in-out infinite alternate;
}

@keyframes glowPulse {
  0% {
    opacity: 0.6;
    transform: translate(-50%, -50%) scale(1);
  }
  100% {
    opacity: 0.8;
    transform: translate(-50%, -50%) scale(1.05);
  }
}

/* =====================================================
   LUXURY CARD (Login/Register/Reset)
   ===================================================== */
.luxury-card.login-card {
  background: var(--auth-bg-card);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(212, 175, 55, 0.2);
  border-radius: 18px;
  padding: 1.5rem;
  width: 100%;
  max-width: 440px;
  position: relative;
  overflow: hidden;
  box-shadow: 
    0 15px 30px rgba(0, 0, 0, 0.4),
    0 0 80px rgba(212, 175, 55, 0.12),
    inset 0 0 30px rgba(212, 175, 55, 0.05);
  box-sizing: border-box;
}

.luxury-card.login-card::before {
  content: '';
  position: absolute;
  top: -2px;
  left: -2px;
  right: -2px;
  bottom: -2px;
  background: linear-gradient(
    135deg,
    rgba(212, 175, 55, 0.4) 0%,
    rgba(212, 175, 55, 0.1) 25%,
    rgba(212, 175, 55, 0.05) 50%,
    transparent 100%
  );
  border-radius: 20px;
  z-index: -1;
  animation: borderGlow 4s ease-in-out infinite alternate;
}

@keyframes borderGlow {
  0% {
    opacity: 0.5;
    transform: scale(1);
  }
  100% {
    opacity: 0.8;
    transform: scale(1.02);
  }
}

/* =====================================================
   LOGO
   ===================================================== */
.logo-corner {
  position: absolute;
  top: 1rem;
  left: 1rem;
  z-index: 5;
}

.logo-corner img {
  width: 56px;
  height: 56px;
  object-fit: contain;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3));
}

/* =====================================================
   TYPOGRAPHY
   ===================================================== */
.text-gradient,
.dd-form-header h1,
.dd-form-label,
.dd-form-hint,
.dd-form-footer-text,
.dd-alert-title,
.dd-alert-text,
.dd-form-radio span,
.dd-form-check-label span,
body.auth-page {
  color: var(--auth-text-primary) !important;
}

.text-secondary {
  color: var(--auth-text-secondary) !important;
}

.text-accent {
  color: var(--auth-text-accent) !important;
}

/* =====================================================
   FORM HEADER
   ===================================================== */
.dd-form-header {
  text-align: center;
  margin-bottom: 1.5rem;
  margin-top: 0.5rem;
}

.dd-form-header h1 {
  font-size: 1.4rem;
  margin: 0;
  background: linear-gradient(135deg, #f5f5f0 0%, #d4af37 50%, #f5f5f0 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.dd-form-header p {
  color: var(--auth-text-secondary);
  font-size: 0.9rem;
  margin: 0.3rem 0 0 0;
}

/* =====================================================
   FORM GROUPS
   ===================================================== */
.dd-form-group {
  margin-bottom: 1rem;
}

.dd-form-label {
  display: block;
  margin-bottom: 0.3rem;
  font-size: 0.8rem;
  font-weight: 500;
}

.dd-form-input {
  width: 100%;
  background: rgba(40, 40, 40, 0.7);
  border: 1px solid rgba(212, 175, 55, 0.1);
  border-radius: 8px;
  padding: 0.7rem 0.85rem;
  font-size: 0.85rem;
  transition: all 0.2s ease;
  color: var(--auth-text-primary);
  box-sizing: border-box;
}

.dd-form-input:focus {
  background: rgba(50, 50, 50, 0.8);
  border-color: rgba(212, 175, 55, 0.4);
  box-shadow: 0 0 0 2px rgba(212, 175, 55, 0.1);
  outline: none;
}

.dd-form-input::placeholder {
  color: rgba(245, 245, 240, 0.4);
  font-size: 0.8rem;
}

/* =====================================================
   PASSWORD WRAP + EYE TOGGLE
   Auge ist optisch ein integrierter Bestandteil des Inputs —
   kein Button-Look, keine Hover/Active/Focus-Effekte.
   ===================================================== */
.dd-password-wrap {
  position: relative;
  display: block;
  width: 100%;
  isolation: isolate; /* eigener Stacking-Context, falls andere Regeln reinfunken */
}

.dd-password-wrap .dd-form-input {
  /* Platz für Auge rechts, kein Layout-Shift */
  padding-right: 2.75rem;
}

/* Auge: komplett unsichtbarer Button — nur das Icon ist sichtbar */
.dd-password-toggle,
.dd-password-toggle:hover,
.dd-password-toggle:focus,
.dd-password-toggle:focus-visible,
.dd-password-toggle:active,
.dd-password-toggle.is-active,
.dd-password-toggle.is-active:hover {
  position: absolute;
  top: 50%;
  right: 12px;
  transform: translateY(-50%);
  width: auto;
  height: auto;
  min-width: 0;
  min-height: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  box-shadow: none;
  outline: none;
  border-radius: 0;
  padding: 0;
  margin: 0;
  cursor: pointer;
  color: rgba(245, 245, 240, 0.55);
  transition: none;
  -webkit-tap-highlight-color: transparent;
  flex-shrink: 0;
  z-index: 2;
  pointer-events: auto;
  animation: none;
}

.dd-password-toggle svg {
  display: block;
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  stroke: currentColor;
}

/* Default: offenes Auge zeigen, verstecktes ausblenden */
.dd-eye-icon--shown { display: none; }
.dd-eye-icon--hidden { display: inline-flex; }
.dd-password-toggle.is-active .dd-eye-icon--hidden { display: none; }
.dd-password-toggle.is-active .dd-eye-icon--shown { display: inline-flex; }

/* =====================================================
   RADIO GROUP (Register)
   ===================================================== */
.dd-form-radio-group {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.dd-form-radio {
  display: flex;
  align-items: center;
  background: rgba(40, 40, 40, 0.7);
  border: 1px solid rgba(212, 175, 55, 0.1);
  border-radius: 8px;
  padding: 0.7rem 0.85rem;
  transition: all 0.2s ease;
  cursor: pointer;
}

.dd-form-radio:hover {
  border-color: rgba(212, 175, 55, 0.3);
  background: rgba(50, 50, 50, 0.7);
}

.dd-form-radio input[type="radio"] {
  margin-right: 0.5rem;
  accent-color: var(--auth-text-accent);
  width: 14px;
  height: 14px;
}

.dd-form-hint {
  margin-top: 0.3rem;
  font-size: 0.7rem;
  line-height: 1.2;
  color: var(--auth-text-secondary);
}

/* =====================================================
   CHECKBOX
   ===================================================== */
.dd-form-check {
  display: flex;
  align-items: center;
  background: rgba(40, 40, 40, 0.7);
  border: 1px solid rgba(212, 175, 55, 0.1);
  border-radius: 8px;
  padding: 0.7rem 0.85rem;
}

.dd-form-check-input {
  margin-right: 0.5rem;
  accent-color: var(--auth-text-accent);
  width: 14px;
  height: 14px;
  flex-shrink: 0;
}

.dd-form-check-label {
  font-size: 0.8rem;
  line-height: 1.3;
}

.dd-form-check-label a {
  transition: color 0.2s ease;
}

.dd-form-check-label a:hover {
  color: #b8941f;
  text-decoration: underline;
}

/* =====================================================
   BUTTONS
   ===================================================== */
.dd-button {
  padding: 0.75rem 1.25rem;
  font-weight: 600;
  font-size: 0.85rem;
  border-radius: 8px;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  position: relative;
  overflow: hidden;
  color: #000;
}

.dd-button-primary {
  background: linear-gradient(135deg, #d4af37 0%, #b8941f 100%);
  border: none;
  box-shadow: 
    0 3px 10px rgba(212, 175, 55, 0.3),
    0 0 20px rgba(212, 175, 55, 0.1);
}

.dd-button-primary:hover {
  transform: translateY(-1px);
  box-shadow: 
    0 5px 15px rgba(212, 175, 55, 0.4),
    0 0 25px rgba(212, 175, 55, 0.2);
}

.dd-button-primary:active {
  transform: translateY(0);
}

.dd-button-full {
  width: 100%;
  margin-top: 0.4rem;
}

/* =====================================================
   FORM FOOTER
   ===================================================== */
.dd-form-footer {
  text-align: center;
  margin-top: 1rem;
  padding-top: 0.9rem;
  border-top: 1px solid rgba(212, 175, 55, 0.1);
}

.dd-form-footer-text {
  font-size: 0.8rem;
  margin-bottom: 0.4rem;
}

.dd-form-footer-text:last-child {
  margin-bottom: 0;
}

.dd-form-footer-text a {
  transition: color 0.2s ease;
}

.dd-form-footer-text a:hover {
  color: #b8941f;
  text-decoration: underline;
}

/* =====================================================
   ALERTS
   ===================================================== */
.dd-alert {
  border-radius: 8px;
  padding: 0.7rem 0.85rem;
  margin-bottom: 1rem;
}

.dd-alert-error {
  background: rgba(220, 53, 69, 0.1);
  border: 1px solid rgba(220, 53, 69, 0.3);
}

.dd-alert-success {
  background: rgba(40, 167, 69, 0.1);
  border: 1px solid rgba(40, 167, 69, 0.3);
}

.dd-alert-info {
  background: rgba(212, 175, 55, 0.1);
  border: 1px solid rgba(212, 175, 55, 0.3);
}

.dd-alert-title {
  font-size: 0.8rem;
  margin-bottom: 0.25rem;
  color: #ff6b6b !important;
}

.dd-alert-success .dd-alert-title {
  color: #51cf66 !important;
}

.dd-alert-info .dd-alert-title {
  color: #d4af37 !important;
}

.dd-alert-text {
  font-size: 0.7rem;
  margin: 0;
}

.dd-alert-content ul {
  margin: 0;
  padding-left: 0.85rem;
}

.dd-alert-content li {
  margin-bottom: 0.1rem;
}

.dd-alert-icon {
  margin-right: 0.5rem;
  font-size: 0.9rem;
}

/* =====================================================
   AUTH PAGES – Flex Layout Fix
   Login / Register / Forgot Password
   ===================================================== */
body.auth-page {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

body.auth-page .glow-box-container {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  padding: 15px;
  box-sizing: border-box;
  min-height: unset;
}

body.auth-page .page-footer {
  position: relative;
  bottom: auto;
  left: auto;
  right: auto;
  margin-top: 0;
  padding: 20px 15px;
  border-top: 1px solid rgba(212, 175, 55, 0.1);
  z-index: 10;
}

/* =====================================================
   PAGE FOOTER (DEFAULT – für Konsistenz dokumentiert)
   ===================================================== */
.page-footer {
  position: fixed;
  bottom: 20px;
  left: 0;
  right: 0;
  text-align: center;
  padding: 0 15px;
  z-index: 10;
}

.footer-links {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.8rem;
  margin-bottom: 0.5rem;
}

.footer-links a {
  color: var(--auth-text-secondary);
  text-decoration: none;
  font-size: 0.7rem;
  transition: color 0.2s ease;
  white-space: nowrap;
}

.footer-links a:hover {
  color: var(--auth-text-accent);
}

.copyright {
  color: var(--auth-text-secondary);
  font-size: 0.65rem;
  line-height: 1.2;
}

/* =====================================================
   RESPONSIVE
   ===================================================== */
@media (max-width: 768px) {
  .glow-box-container {
    padding: 15px;
    align-items: flex-start;
    min-height: calc(100vh - 30px);
  }

  .luxury-card.login-card {
    padding: 1.5rem 1.5rem 1.35rem;
    max-width: 100%;
    border-radius: 16px;
    margin-top: 0;
    box-shadow:
      0 18px 36px rgba(0, 0, 0, 0.45),
      0 0 100px rgba(212, 175, 55, 0.16),
      inset 0 0 36px rgba(212, 175, 55, 0.06);
  }

  .logo-corner {
    top: 0.85rem;
    left: 0.85rem;
  }

  .logo-corner img {
    width: 56px;
    height: 56px;
  }

  .dd-form-header {
    margin-bottom: 1.25rem;
    margin-top: 0.3rem;
  }

  .dd-form-header h1 {
    font-size: 1.2rem;
  }

  .dd-form-header p {
    font-size: 0.85rem;
  }

  .dd-form-group {
    margin-bottom: 0.9rem;
  }

  .dd-form-input,
  .dd-form-radio {
    padding: 0.65rem 0.75rem;
    font-size: 0.85rem;
  }

  /* Checkbox-Zeile kompakter, bleibt gut klickbar */
  .dd-form-check {
    padding: 0.5rem 0.75rem;
    font-size: 0.85rem;
  }

  .dd-button {
    padding: 0.65rem 1rem;
    font-size: 0.8rem;
  }

  .page-footer {
    bottom: 15px;
    position: relative;
    margin-top: 1rem;
  }

  body.auth-page .page-footer {
    bottom: auto;
  }

  .footer-links {
    gap: 0.6rem;
  }

  .footer-links a {
    font-size: 0.65rem;
  }

  .copyright {
    font-size: 0.6rem;
  }
}

@media (max-width: 480px) {
  .luxury-card.login-card {
    padding: 1.1rem 1.1rem 1rem;
    border-radius: 14px;
  }

  .logo-corner img {
    width: 52px;
    height: 52px;
  }

  .dd-form-header h1 {
    font-size: 1.1rem;
  }

  .dd-form-check-label {
    font-size: 0.75rem;
  }
}

@media (max-height: 700px) {
  .glow-box-container {
    align-items: flex-start;
    padding-top: 20px;
  }
  
  .luxury-card.login-card {
    padding: 1rem;
  }
  
  .logo-corner {
    top: 0.5rem;
    left: 0.5rem;
  }
  
  .dd-form-group {
    margin-bottom: 0.8rem;
  }
}

/* Touch-Geräte */
@media (hover: none) and (pointer: coarse) {
  .dd-button-primary:hover {
    transform: none;
    box-shadow: 0 3px 10px rgba(212, 175, 55, 0.3);
  }

  .dd-form-input,
  .dd-form-radio,
  .dd-form-check {
    font-size: 16px;
  }
  
  .dd-form-radio,
  .dd-form-check {
    min-height: 44px;
  }
  
  .dd-button {
    min-height: 44px;
  }
}

/* =====================================================
   REGISTER-PAGE – MOBILE SCROLL FIX (≤768px)
   Nur fuer body.auth-page.dd-auth-register.
   Login / Passwort-vergessen sind nicht betroffen,
   weil sie .dd-auth-login bzw. .dd-auth-forgot nutzen.

   Problem:
   - body.auth-page setzt overflow:hidden + height:100vh
   - mobile Browserleisten (Samsung Internet, Chrome Android)
     ueberdecken den unteren Teil der Karte
   - .dd-form-footer mit "Jetzt einloggen" liegt dadurch
     hinter der Browserleiste und ist nicht erreichbar
   - .glow-box-container ist flex:1 und drueckt die Karte
     in den sichtbaren Bereich, scrolled aber nicht mit

   Loesung (nur Mobile, nur Register):
   - Body darf auf Mobile vertikal scrollen
   - height zuerst 100vh (Fallback), dann 100dvh (modern)
   - min-height folgt der dynamischen Viewporthoehe
   - horizontal weiterhin gesperrt
   - .glow-box-container nicht mehr als flex:1-Restplatz
   - .page-footer bleibt im natuerlichen Scrollfluss
     mit ausreichend bottom-padding inkl. Safe-Area
   ===================================================== */
@media (max-width: 768px) {
  /* Body der Register-Seite: vertikal scrollbar, dynamische Hoehe */
  body.auth-page.dd-auth-register {
    height: 100vh;            /* Fallback fuer Browser ohne dvh */
    height: 100dvh;           /* dynamische Viewporthoehe, schrumpft mit Browserleiste */
    min-height: 100vh;        /* Fallback */
    min-height: 100dvh;       /* Karte darf nie unter Body-Hoehe rutschen */
    overflow-x: hidden;       /* horizontal weiterhin gesperrt */
    overflow-y: auto;         /* vertikal scrollbar machen */
    -webkit-overflow-scrolling: touch; /* iOS Momentum-Scrollen */
  }

  /* Container nicht mehr als flexibler Restplatz,
     damit die volle Karte incl. .dd-form-footer
     Teil des scrollbaren Flusses ist. */
  body.auth-page.dd-auth-register .glow-box-container {
    flex: 0 0 auto;           /* nicht mehr flex:1 — eigene Inhaltshoehe */
    min-height: 0;            /* globales min-height calc(100vh-30px) aushebeln */
    align-items: flex-start;  /* Karte beginnt oben, nicht mittig */
  }

  /* Seitenfooter bleibt im Scrollfluss,
      bekommt unten Sicherheitsabstand inkl. Safe-Area
      fuer Samsung-/Chrome-Browserleisten. */
  body.auth-page.dd-auth-register .page-footer {
    position: relative;       /* nicht fixed/sticky — im natuerlichen Fluss */
    bottom: auto;
    padding-bottom: calc(1rem + env(safe-area-inset-bottom, 0px));
  }
}

/* =====================================================
   LOGIN + FORGOT-PASSWORD – MOBILE FOOTER SICHTBAR (≤768px)
   Nur fuer body.auth-page.dd-auth-login und .dd-auth-forget.
   Register (.dd-auth-register) ist absichtlich NICHT betroffen —
   der bestehende Register-Mobile-Fix (siehe Block davor) bleibt
   die SSOT fuer die Registrierungsseite.

   Problem:
   - body.auth-page setzt global overflow:hidden + height:100vh
   - .glow-box-container ist flex:1 und spannt den kompletten
     Restplatz auf, Karte wird mittig in diesem Container zentriert
   - .page-footer haengt dadurch ganz weit unten, hinter der
     Android-Drei-Tasten-Navigation
   - Login- und Forgot-Karten sind klein genug, dass Karte + Footer
     in den sichtbaren Bereich passen — flex:1 erzeugt nur einen
     kuenstlichen schwarzen Leerraum

   Loesung (nur Mobile, nur Login + Forgot):
   - Body darf vertikal scrollen, ABER overflow-y nur als Fallback
   - Dynamische Hoehe (100dvh) statt 100vh
   - Moderate Bodenreserve fuer Android-Systemnavigation
     + env(safe-area-inset-bottom)
   - .glow-box-container nicht mehr flex:1 — eigene Inhaltshoehe
   - .page-footer direkt unter der Karte, Teil der zentrierten
     Gruppe (margin-top:auto am Container, margin-bottom:auto am
     Footer verteilen den freien Platz)
   ===================================================== */
@media (max-width: 768px) {
  /* Body: dynamische mobile Hoehe + Sicherheitsfallback fuer Scroll.
     overflow-y: auto ist nur Notnagel, wenn Karte + Footer
     nicht in den sichtbaren Bereich passen (kleines Display,
     Tastatur, lange Fehlermeldung). */
  body.auth-page.dd-auth-login,
  body.auth-page.dd-auth-forgot {
    height: 100vh;            /* Fallback fuer Browser ohne dvh */
    height: 100dvh;           /* dynamische Viewporthoehe */
    min-height: 100vh;        /* Fallback */
    min-height: 100dvh;       /* Karte darf nie unter Body-Hoehe rutschen */
    box-sizing: border-box;
    overflow-x: hidden;       /* horizontal weiterhin gesperrt */
    overflow-y: auto;         /* vertikal scrollbar — Sicherheitsfallback */
    -webkit-overflow-scrolling: touch; /* iOS Momentum-Scrollen */
    padding-bottom: calc(4rem + env(safe-area-inset-bottom, 0px));
  }

  /* Container: nicht mehr als flexibler Restplatz.
     Bekommt nur die tatsaechlich benoetigte Hoehe der Karte.
     margin-top:auto + margin-bottom:auto am Footer verteilen
     den freien Platz so, dass Karte+Footer als Gruppe
     ungefaehr mittig im nutzbaren Bereich sitzen. */
  body.auth-page.dd-auth-login .glow-box-container,
  body.auth-page.dd-auth-forgot .glow-box-container {
    flex: 0 0 auto;           /* nicht mehr flex:1 — eigene Inhaltshoehe */
    min-height: 0;            /* globales min-height calc(100vh-30px) aushebeln */
    width: 100%;
    box-sizing: border-box;
    align-items: center;
    justify-content: center;
    margin-top: auto;         /* gemeinsam mit Footer-margin-bottom:auto: Gruppe zentrieren */
  }

  /* Footer: direkt unter der Karte, Teil der zentrierten Gruppe.
     NICHT fixed/sticky/absolute — bleibt im natuerlichen Fluss. */
  body.auth-page.dd-auth-login .page-footer,
  body.auth-page.dd-auth-forgot .page-footer {
    position: relative;
    left: auto;
    right: auto;
    bottom: auto;
    flex: 0 0 auto;
    width: 100%;
    box-sizing: border-box;
    margin-top: 0.75rem;       /* kleiner Abstand Karte -> Footer */
    margin-bottom: auto;       /* verteilt freien Platz unterhalb der Gruppe */
    padding: 0.9rem 15px 0;
  }
}