/* /assets/css/auth.css */

/* =========================================
   Auth Card Layout
   ========================================= */
.auth-card{
  background-color: #F5FCFB;
  border: 1px solid #40E0D0;
  border-radius: 15px;
  padding: 50px;
}

@media (max-width: 576px){
  .auth-card{
    padding: 28px;
    border-radius: 14px;
  }
}

.form-hint{
  color: rgba(0,0,0,.65);
  font-size: .95rem;
  line-height: 1.35;
  margin-bottom: 0;
}

.auth-bg-login{
  background-image: url('../img/background_login.jpg');
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  min-height: 100vh;
}

.auth-bg-register{
  background-image: url('../img/background_register.jpg');
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  min-height: 100vh;
}

.auth-club-logo{
  max-height: 120px;
  object-fit: contain;
}

.turnstile-feedback-hidden{
  display: none;
}

/* =========================================
   Guest-Auth Buttons (Pillenform)
   Diese Klassen werden typischerweise in navbar.php verwendet
   ========================================= */
.te-auth-actions{
  display: flex;
  align-items: center;
  gap: .6rem;
  margin-left: .5rem;
}

/* verhindert unschönes Umbrücken auf sehr kleinen Breiten */
.te-auth-actions .te-auth-pill{
  white-space: nowrap;
}

.te-auth-pill{
  margin-right: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .35rem;

  padding: .55rem 1.05rem;
  border-radius: 999px;

  font-weight: 600;
  line-height: 1;
  text-decoration: none;

  transition: background-color .18s ease, color .18s ease, border-color .18s ease, box-shadow .18s ease, transform .12s ease;
  user-select: none;
}

/* Primär (gefüllt) */
.te-auth-pill--primary{
  background: #2f6bff;
  border: 1px solid #2f6bff;
  color: #ffffff;
}
.te-auth-pill--primary:hover{
  background: #2559d8;
  border-color: #2559d8;
  color: #ffffff;
}
.te-auth-pill--primary:active{
  transform: translateY(1px);
}

/* Sekundär (Outline / leichtes Glas) */
.te-auth-pill--secondary{
  background: rgba(255,255,255,.70);
  border: 1px solid rgba(0,0,0,.20);
  color: #111111;
  backdrop-filter: saturate(120%) blur(6px);
}
.te-auth-pill--secondary:hover{
  background: rgba(255,255,255,.92);
  border-color: rgba(0,0,0,.35);
  color: #111111;
}
.te-auth-pill--secondary:active{
  transform: translateY(1px);
}

/* Fokus sichtbar (Tastatur) */
.te-auth-pill:focus{
  outline: none;
}
.te-auth-pill:focus-visible{
  box-shadow: 0 0 0 .2rem rgba(47, 107, 255, .35);
}

/* Mobile: etwas kompakter */
@media (max-width: 420px){
  .te-auth-pill{
    padding: .5rem .9rem;
    font-size: .95rem;
  }
}