/* ============================================================
   /register – prihlásenie, registrácia, onboarding, upgrade.
   Načítava sa PO style.css -> dedí premenné, dark mode aj accent.js.
   ============================================================ */

/* Na registrácii nebeží prehrávač -> zruš miesto vyhradené preň */
body:has(.auth-wrap) { padding-bottom: 0; }

.auth-wrap {
  min-height: 100dvh;
  display: flex; align-items: center; justify-content: center;
  padding: 40px 16px calc(40px + env(safe-area-inset-bottom));
  background-color: var(--bg);
  background-image: radial-gradient(120% 90% at 50% 0%,
      var(--surface) 0%, var(--bg) 56%, rgba(var(--accent-rgb), .18) 100%);
}

.auth-card {
  width: 100%; max-width: 420px;
  display: flex; flex-direction: column; align-items: center; gap: 6px;
}
.auth-card h1 {
  font-size: 1.9rem; font-weight: 800; letter-spacing: -0.02em; text-align: center;
}
.auth-card h1 span { color: var(--accent); }
.auth-card > .muted { text-align: center; margin-bottom: 22px; max-width: 340px; }
.auth-card > .muted:empty { margin-bottom: 0; }

/* Clerk si kreslí VLASTNÚ kartu -> obal necháme priehľadný (žiadna karta v karte) */
#clerk-mount { width: 100%; display: flex; justify-content: center; }

/* Onboarding / upgrade – .card v style.css nemá pozadie, tu ho doplníme */
.auth-card .card {
  width: 100%; margin: 0; padding: 24px; text-align: left;
  background: var(--surface);
  border: 1px solid var(--border);
  box-shadow: var(--shadow);
}
.auth-card .card h2 { font-size: 1.25rem; font-weight: 700; margin-bottom: 6px; }
.auth-card .card > .muted { margin-bottom: 16px; }
#onboarding-email, #upgrade-email { color: var(--text); font-weight: 600; }

/* Súhlas so stratou práva na odstúpenie */
.consent {
  display: flex; align-items: flex-start; gap: 10px;
  margin: 14px 0 18px;
  font-size: .85rem; line-height: 1.5; color: var(--text-secondary); cursor: pointer;
}
/* globálne `input { width:100% }` zo style.css roztiahne aj checkbox -> vráť späť */
.consent input[type="checkbox"] {
  width: 18px; height: 18px; flex: none;
  margin: 2px 0 0; padding: 0;
  accent-color: var(--accent); cursor: pointer;
}
.consent:hover span { color: var(--text); }

.auth-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.auth-actions .btn { padding: 11px 20px; }
.auth-actions .btn.primary { flex: 1 1 auto; }

#auth-error { width: 100%; text-align: center; margin-top: 14px; }
#auth-error:empty { display: none; }

.auth-legal {
  margin-top: 22px; text-align: center;
  font-size: .76rem; color: var(--text-muted);
}
.auth-legal a { color: var(--text-secondary); text-decoration: none; }
.auth-legal a:hover { color: var(--accent); text-decoration: underline; }

@media (max-width: 480px) {
  .auth-wrap { align-items: flex-start; padding: 24px 14px calc(24px + env(safe-area-inset-bottom)); }
  .auth-card h1 { font-size: 1.6rem; }
  .auth-card .card { padding: 18px; }
  .auth-card input, .auth-card select { font-size: 16px; }  /* iOS nezoomuje pri fokuse */
}

/* Odkazy na podmienky pod súhlasom – menšie a tlmené, nech neprebíjajú
   samotné zaškrtávacie políčko. */
.consent-links {
  margin: -4px 2px 14px;
  font-size: .78rem;
  line-height: 1.5;
}
.consent-links a { color: var(--accent); text-decoration: underline; }
/* Vlastné Google tlačidlo nad Clerk formulárom (len v natívnej appke) */
.native-app .cl-socialButtons,
.native-app .cl-socialButtonsRoot,
.native-app .cl-dividerRow { display: none !important; }

#native-auth { width: 100%; max-width: 400px; margin: 0 auto 4px; }

#native-auth .gbtn {
  width: 100%;
  display: flex; align-items: center; justify-content: center; gap: 10px;
  padding: 12px 18px;
  background: var(--surface);
  border: 1px solid var(--border);
  box-shadow: var(--shadow);
  font-weight: 600;
}
#native-auth .gbtn svg { flex: none; }

#native-auth .gdiv {
  display: flex; align-items: center; gap: 12px;
  margin: 16px 2px 12px;
  font-size: .8rem; color: var(--text-muted);
}
#native-auth .gdiv::before,
#native-auth .gdiv::after { content: ""; flex: 1; height: 1px; background: var(--border); }