/* Belépő- és regisztrációs kártya – üveg, elmosott városi háttér előtt. */

.auth {
  min-height: 100dvh; display: grid; place-items: center;
  padding: var(--s-6); position: relative; overflow: hidden;
}
.auth__bg {
  position: absolute; inset: -4%;
  background: url("/static/img/hero-varos.svg") center/cover no-repeat;
  filter: blur(10px) saturate(105%); transform: scale(1.06);
}
.auth__veil { position: absolute; inset: 0; background: rgba(255,255,255,.55); }
:root[data-theme="dark"] .auth__veil { background: rgba(16,18,22,.6); }

.authcard {
  position: relative; width: 100%; max-width: 420px;
  padding: var(--s-7); border-radius: 20px;
}
.authcard--wide { max-width: 560px; }
.authcard__brand { display: flex; align-items: center; gap: var(--s-3); justify-content: center; margin-bottom: var(--s-6); }
.authcard__title { font-size: var(--fs-lg); text-align: center; }
.authcard__lead { margin-top: var(--s-2); text-align: center; color: var(--c-ink-2); }

/* Hero-beli változat: nem áll külön lapon */
.authcard--hero { max-width: none; }

/* --- Űrlap ------------------------------------------------------------ */
.field { display: block; margin-top: var(--s-5); }
.field__label { display: block; font-size: var(--fs-xs); font-weight: 600; color: var(--c-ink-2); margin-bottom: var(--s-2); }
.field__box { position: relative; display: flex; align-items: center; }
.field input {
  width: 100%; height: 44px; padding: 0 var(--s-4);
  border: 1px solid var(--c-line); border-radius: var(--r-inner);
  background: var(--glass-inner); color: var(--c-ink); font: inherit; outline: none;
  transition: border-color var(--t-fast), box-shadow var(--t-fast);
}
.field input:focus { border-color: var(--c-red); box-shadow: 0 0 0 3px rgba(224,24,45,.14); }
.field input[aria-invalid="true"] { border-color: var(--c-red); }
.field__toggle {
  position: absolute; right: 6px; height: 34px; padding: 0 var(--s-3);
  border: 0; background: transparent; color: var(--c-ink-2); cursor: pointer; font-size: var(--fs-xs);
}
.field__hint { margin-top: var(--s-2); font-size: var(--fs-xs); color: var(--c-ink-2); min-height: 16px; }
.field__hint[data-bad="1"] { color: var(--c-red); }
.field__hint[data-good="1"] { color: var(--c-ok); }

.strength { display: flex; gap: 4px; margin-top: var(--s-3); }
.strength i { flex: 1; height: 4px; border-radius: 2px; background: var(--c-line); }
.strength i[data-on="1"] { background: var(--c-red); }
.strength i[data-on="2"] { background: var(--c-warn); }
.strength i[data-on="3"] { background: var(--c-ok); }

.check { display: flex; gap: var(--s-3); align-items: flex-start; margin-top: var(--s-5); font-size: var(--fs-xs); color: var(--c-ink-2); }
.check input { width: 18px; height: 18px; margin: 1px 0 0; accent-color: var(--c-red); flex: none; }
.check a { color: var(--c-red); text-decoration: underline; }

.formerror {
  margin-top: var(--s-5); padding: var(--s-3) var(--s-4);
  border-left: 3px solid var(--c-red); border-radius: 8px;
  background: var(--c-red-soft); color: var(--c-ink); font-size: var(--fs-xs);
}
.formok {
  margin-top: var(--s-5); padding: var(--s-3) var(--s-4);
  border-left: 3px solid var(--c-ok); border-radius: 8px;
  background: rgba(23,166,115,.10); font-size: var(--fs-xs);
}
.authcard .btn--primary { margin-top: var(--s-6); }
.divider {
  display: flex; align-items: center; gap: var(--s-4);
  margin: var(--s-5) 0; color: var(--c-ink-3); font-size: var(--fs-xs);
}
.divider::before, .divider::after { content: ""; flex: 1; height: 1px; background: var(--c-line); }
.authcard__foot { margin-top: var(--s-5); text-align: center; font-size: var(--fs-xs); color: var(--c-ink-2); }
.authcard__foot a { color: var(--c-red); font-weight: 600; }

/* --- Demo profilválasztó ---------------------------------------------- */
.demopick { display: grid; gap: var(--s-2); }
.demopick__btn {
  display: flex; align-items: center; gap: var(--s-3); width: 100%;
  padding: var(--s-3) var(--s-4); border-radius: var(--r-inner);
  border: var(--glass-border); background: var(--glass-inner); cursor: pointer; text-align: left;
}
.demopick__btn:hover { border-color: var(--c-red); }
.demopick__av {
  width: 32px; height: 32px; border-radius: 50%; flex: none;
  background: var(--c-red-soft); color: var(--c-red);
  display: grid; place-items: center; font-weight: 700; font-size: var(--fs-xs);
}
.demopick__name { font-weight: 650; }
.demopick__meta { font-size: 11px; color: var(--c-ink-2); }

/* --- Lépésjelző ------------------------------------------------------- */
.steps { display: flex; align-items: center; gap: var(--s-2); margin-bottom: var(--s-6); }
.steps__dot {
  flex: 1; height: 4px; border-radius: 2px; background: var(--c-line);
  transition: background var(--t-base);
}
.steps__dot[data-state="kesz"] { background: var(--c-red-300); }
.steps__dot[data-state="aktiv"] { background: var(--c-red); }
.steps__label { font-size: var(--fs-xs); color: var(--c-ink-2); margin-bottom: var(--s-4); text-align: center; }

/* --- Kódmezők --------------------------------------------------------- */
.codebox { display: flex; gap: var(--s-2); justify-content: center; margin-top: var(--s-6); }
.codebox input {
  width: 48px; height: 56px; text-align: center; font-size: var(--fs-lg); font-weight: 700;
  border: 1px solid var(--c-line); border-radius: var(--r-inner);
  background: var(--glass-inner); color: var(--c-ink); outline: none;
}
.codebox input:focus { border-color: var(--c-red); box-shadow: 0 0 0 3px rgba(224,24,45,.14); }

/* --- TrueYou-hitelesítés lépései -------------------------------------- */
.verify { display: grid; gap: var(--s-3); margin-top: var(--s-6); }
.verifyrow {
  display: flex; align-items: center; gap: var(--s-4);
  padding: var(--s-4) var(--s-5); border-radius: var(--r-inner);
  border: var(--glass-border); background: var(--glass-inner);
}
.verifyrow__t { flex: 1; }
.verifyrow__name { font-weight: 600; }
.verifyrow__desc { font-size: var(--fs-xs); font-weight: 450; color: var(--c-ink-2); }
.verifyrow__state {
  width: 26px; height: 26px; border-radius: 50%; flex: none;
  border: 2px solid var(--c-line); display: grid; place-items: center;
  color: transparent; font-weight: 700; font-size: 14px;
  transition: background var(--t-base), border-color var(--t-base), color var(--t-base);
}
.verifyrow[data-kesz="1"] .verifyrow__state {
  background: var(--c-ok); border-color: var(--c-ok); color: #fff;
}
.verifyrow[data-fut="1"] .verifyrow__state { border-color: var(--c-red); animation: spin 1s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

.badge-verified {
  display: inline-flex; align-items: center; gap: var(--s-2);
  padding: 6px var(--s-4); border-radius: var(--r-pill);
  background: var(--c-red-soft); color: var(--c-red); font-weight: 650; font-size: var(--fs-xs);
}

/* --- Kész képernyő ---------------------------------------------------- */
.donenums { display: flex; justify-content: center; gap: var(--s-7); margin: var(--s-6) 0; text-align: center; }
.donenums b { display: block; font-size: var(--fs-num); font-weight: 750; color: var(--c-red); }
.donenums span { font-size: var(--fs-xs); color: var(--c-ink-2); }
.nextsteps { display: grid; gap: var(--s-2); margin-top: var(--s-5); text-align: left; }
.nextstep {
  display: flex; align-items: center; gap: var(--s-3);
  padding: var(--s-3) var(--s-4); border-radius: var(--r-inner);
  background: var(--glass-inner); border: var(--glass-border); font-size: var(--fs-xs);
}
.nextstep b { color: var(--c-red); }

/* --- jelszószabályok és sikerjelzés ------------------------------------- */
.jelszoszabaly { list-style: none; margin: var(--s-2) 0 0; padding: 0;
  display: grid; grid-template-columns: 1fr 1fr; gap: 2px var(--s-3); }
.jelszoszabaly li { font-size: var(--fs-xs); color: var(--c-ink-2); }
.jelszoszabaly li[data-ok="1"] { color: var(--c-ok); }
@media (max-width: 520px) { .jelszoszabaly { grid-template-columns: 1fr; } }

.siker {
  display: flex; gap: var(--s-3); align-items: flex-start;
  margin-bottom: var(--s-5); padding: var(--s-4) var(--s-5);
  border-left: 3px solid var(--c-ok); border-radius: 10px;
  background: rgba(23,166,115,.12); font-size: var(--fs-sm);
}
.siker__pipa {
  width: 22px; height: 22px; flex: none; border-radius: 50%;
  background: var(--c-ok); color: #fff; display: grid; place-items: center;
  font-weight: 700; font-size: 13px;
}