/* AquariumLesson — Auth Overlay progressive styles (non-critical)
   Critical styles are inline in the modal markup. */

/* ------------------------------------------------------------
   Busy state spinner (primary/ghost + generic .al-btn)
------------------------------------------------------------ */
.al-cta.is-busy,
.al-ghost.is-busy { position: relative; }

.al-cta.is-busy::after,
.al-ghost.is-busy::after {
  content: "";
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 2px solid rgba(15,23,42,.25);
  border-top-color: rgba(15,23,42,.9);
  animation: almSpin .8s linear infinite;
}

@keyframes almSpin { to { transform: translateY(-50%) rotate(360deg); } }

.al-btn[data-busy="1"] {
  position: relative;
  pointer-events: none;
  opacity: .85;
}
.al-btn[data-busy="1"]::after {
  content: "";
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 2px solid currentColor;
  border-right-color: transparent;
  animation: alspin .7s linear infinite;
}
@keyframes alspin { to { transform: translateY(-50%) rotate(360deg); } }


/* --- Stoppt das Zusammenklappen von al-teaser auf Mobile --- */
/* Neutralisiert die fremde .grid-Utility vom Theme */
#al-auth-neo .al-teaser{
  display: block !important;          /* statt grid (Theme überschreibt) */
  width: 100% !important;
}

/* Abstand zwischen den Blöcken wie vorher per "gap" */
#al-auth-neo .al-teaser > * + *{
  margin-top: 12px !important;
}

/* Bullets und CTA weiterhin sauber untereinander */
#al-auth-neo .al-teaser .teaser-bullets{
  display: block !important;
  margin: 6px 0 2px !important;
  padding: 0 !important;
}
#al-auth-neo .al-teaser .teaser-bullets li{
  list-style: none !important;
  padding-left: 26px !important;
  position: relative !important;
}
#al-auth-neo .al-teaser .teaser-bullets li::before{
  content:"✓";
  position: absolute; left: 0; top: 0;
  font-weight: 800; color: var(--al-brand);
}
#al-auth-neo .al-teaser .cta{
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
}


/* Neue Tweeks */
#al-auth-neo .al-card{
  /* add */
  padding-bottom: calc(24px + var(--kb, 0px)) !important;
 
}
#al-auth-neo{ -webkit-text-size-adjust: 100%; }

#al-auth-neo .al-sub a[data-switch-view="reset"]{
  text-decoration: underline;
}

.al-btn-google:hover{
  border-color: rgba(15,23,42,.18);
  box-shadow:
    0 1px 0 rgba(15,23,42,.05),
    0 16px 38px rgba(15,23,42,.10);
}

.al-btn-google:active{
  transform: translateY(1px);
  box-shadow:
    0 1px 0 rgba(15,23,42,.04),
    0 10px 26px rgba(15,23,42,.08);
}

.al-g-icon{
  width: 24px;
  height: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  background: rgba(15,23,42,.03);
}

.al-btn-google-label{
  line-height: 1;
}

.al-auth-legal{
  margin: 0;
  font-size: 12px;
  color: rgba(15,23,42,.62);
  text-align: center;
}

.al-auth-legal a{
  color: rgba(15,23,42,.78);
  text-decoration: underline;
  text-underline-offset: 2px;
}


/* =========================================================
   Fix: "Forgot password?" align right (robust vs globals)
========================================================= */

#al-auth-neo .al-view[data-view="login"] .al-row{
  width: 100%;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  margin: 6px 0 10px;
}

#al-auth-neo .al-view[data-view="login"] .al-row > a.al-link{
  display: inline-flex;   /* kill global a{display:block} */
  width: auto;            /* kill global width:100% */
  margin-left: auto;      /* hard push right */
  text-align: right;
}

/* if something forces flex-basis/align-self */
#al-auth-neo .al-view[data-view="login"] .al-row > a.al-link{
  flex: 0 0 auto;
  align-self: center;
}


/* =========================================================
   TEASER MODE: hide the generic shell header (login header)
========================================================= */
#al-auth-neo .al-card.teaser-mode #al-auth-title,
#al-auth-neo .al-card.teaser-mode .al-sub,
#al-auth-neo .al-card.teaser-mode .al-hr{
  display: none !important;
  margin: 0 !important;
  padding: 0 !important;
  height: 0 !important;
}