/* ============================================================================
   V4 auth pages (W16, webapp-v4/seiten/25-registrierung): registration,
   "check your e-mail", sign-in. Mockup page classes registrierung-X are
   bl-reg-X here. Scoped under .bl-v4 (layouts/devise with the v4_design
   switch); light auth layout from v4.css (.bl-layout-auth, .bl-auth-card).
   ========================================================================= */

/* v4-busy forms: busy.js already puts its spinner into the button, so the
   global form[aria-busy] pseudo spinner and fade (loading_states.css) would
   double it. Applies to every V4 page (this file loads everywhere). */
.bl-v4 form[aria-busy] .bl-btn.is-busy { opacity: 1; }
.bl-v4 form[aria-busy] .bl-btn.is-busy:disabled::before { content: none; display: none; }

.bl-v4 .bl-reg { display: flex; flex-direction: column; align-items: center; width: 100%; max-width: 440px; }
.bl-v4 .bl-reg-brand { color: var(--ink); }
.bl-v4 .bl-reg-logo { height: 40px; max-width: 180px; object-fit: contain; border-radius: 10px; }
.bl-v4 .bl-reg-plan { margin: -16px 0 20px; }

/* Card head, banners */
.bl-v4 .bl-reg-head { margin-bottom: 24px; }
.bl-v4 .bl-reg-head .bl-page-sub,
.bl-v4 .bl-auth-card .bl-page-sub { margin-top: 6px; font-size: 14px; line-height: 1.5; color: var(--muted); }
.bl-v4 .bl-reg-banner { margin-bottom: 24px; }
.bl-v4 .bl-reg-banner:focus,
.bl-v4 .bl-reg-banner:focus-visible { outline: none; }
.bl-v4 .bl-reg-banner ul { margin-top: 6px; padding-left: 18px; list-style: disc; }
.bl-v4 .bl-reg-banner li + li { margin-top: 2px; }
.bl-v4 .bl-reg-banner .bl-help { margin-top: 8px; color: var(--ink-2); opacity: .8; }

/* Business / agency switch */
.bl-v4 .bl-reg-tabs { display: flex; width: 100%; margin-bottom: 24px; }
.bl-v4 .bl-reg-tabs .bl-seg-item { flex: 1 1 0; height: 36px; font-size: 13.5px; cursor: pointer; }

/* Start credits hint */
.bl-v4 .bl-reg-gift { display: inline-flex; align-items: center; gap: 6px; height: 26px; margin-bottom: 20px; padding: 0 10px; border-radius: 999px; font-size: 12px; font-weight: 600; background: var(--accent-soft); border: 1px solid var(--accent-line); color: var(--accent-ink); }
.bl-v4 .bl-reg-gift .bl-ic { color: var(--accent); }

/* Fields (the legacy .bl-input brings width and padding) */
.bl-v4 .bl-auth-card .bl-input { width: 100%; height: 46px; padding: 0 14px; }
.bl-v4 .bl-reg-names { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.bl-v4 .bl-reg-names > * { min-width: 0; }
.bl-v4 .bl-reg-labelrow { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.bl-v4 .bl-reg-labelrow .bl-help { font-size: 12px; }
.bl-v4 .bl-reg-pw { position: relative; }
.bl-v4 .bl-reg-pw .bl-input { padding-right: 52px; }
.bl-v4 .bl-reg-eye { position: absolute; top: 0; right: 2px; display: inline-grid; place-items: center; width: 44px; height: 100%; border-radius: 12px; color: var(--muted-2); cursor: pointer; transition: color .15s ease; }
.bl-v4 .bl-reg-eye:hover { color: var(--ink); }
.bl-v4 .bl-reg-eye[aria-pressed="true"] { color: var(--accent); }
.bl-v4 .bl-reg-meter { height: 4px; margin-top: 2px; border-radius: 999px; background: var(--track); overflow: hidden; }
.bl-v4 .bl-reg-meter > span { display: block; width: 0; height: 100%; border-radius: inherit; background: var(--track); transition: width .3s ease, background-color .3s ease; }
.bl-v4 .bl-reg-meter[data-level="weak"] > span { width: 25%; background: var(--bad); }
.bl-v4 .bl-reg-meter[data-level="fair"] > span { width: 50%; background: var(--warn); }
.bl-v4 .bl-reg-meter[data-level="good"] > span { width: 75%; background: color-mix(in srgb, var(--good) 70%, var(--surface)); }
.bl-v4 .bl-reg-meter[data-level="strong"] > span { width: 100%; background: var(--good); }
.bl-v4 .bl-reg-strength { margin-top: -2px; font-size: 12px; font-weight: 600; }
.bl-v4 .bl-reg-strength:empty { display: none; }
.bl-v4 .bl-reg-strength[data-level="weak"] { color: var(--bad); }
.bl-v4 .bl-reg-strength[data-level="fair"] { color: var(--warn); }
.bl-v4 .bl-reg-strength[data-level="good"],
.bl-v4 .bl-reg-strength[data-level="strong"] { color: var(--good); }
.bl-v4 .bl-reg-code { text-transform: uppercase; letter-spacing: .06em; }
.bl-v4 .bl-reg-code::placeholder { text-transform: none; letter-spacing: 0; }
.bl-v4 .bl-reg-input-ok { border-color: var(--good-line); }

/* Invitation code feedback (invitation_code_controller.js, V4 mode) */
.bl-v4 .bl-reg-feedback { display: flex; align-items: flex-start; gap: 6px; font-size: 12.5px; font-weight: 600; line-height: 1.45; }
.bl-v4 .bl-reg-feedback.hidden { display: none; }
.bl-v4 .bl-reg-feedback .bl-ic { flex: none; margin-top: 1px; }
.bl-v4 .bl-reg-feedback .busy-spinner { flex: none; margin-top: 2px; }
.bl-v4 .bl-reg-feedback.bl-is-ok { color: var(--good); }
.bl-v4 .bl-reg-feedback.bl-is-warn { color: var(--warn); }
.bl-v4 .bl-reg-feedback.bl-is-checking { color: var(--muted); font-weight: 500; }

/* Terms and privacy */
.bl-v4 .bl-reg-legal { display: flex; flex-direction: column; gap: 8px; }
.bl-v4 .bl-reg-terms { align-items: flex-start; white-space: normal; font-size: 13.5px; font-weight: 500; line-height: 1.45; color: var(--ink-2); }
.bl-v4 .bl-reg-terms .bl-check-box { margin-top: 0; }
.bl-v4 .bl-reg-legal a,
.bl-v4 .bl-reg-flow a { color: var(--accent-ink); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--accent-line); }
.bl-v4 .bl-reg-legal a:hover { text-decoration-color: currentColor; }
.bl-v4 .bl-reg-legal .bl-help { padding-left: 30px; font-size: 12px; }
.bl-v4 .bl-reg-submit { width: 100%; height: 48px; font-size: 14.5px; }

/* Agency flow hint */
.bl-v4 .bl-reg-flow { display: flex; align-items: flex-start; gap: 10px; padding: 12px 14px; border-radius: 12px; background: var(--surface-2); border: 1px solid var(--line); font-size: 12.5px; line-height: 1.5; color: var(--muted); }
.bl-v4 .bl-reg-flow .bl-ic { flex: none; margin-top: 2px; color: var(--muted-2); }
.bl-v4 .bl-reg-flow strong { color: var(--ink-2); font-weight: 700; }

/* Sign-in extras */
.bl-v4 .bl-reg-signin-row { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px 16px; }
.bl-v4 .bl-reg-remember { font-size: 13.5px; font-weight: 500; color: var(--ink-2); }
.bl-v4 .bl-reg-card-foot { margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--line); text-align: center; }
.bl-v4 .bl-reg-card-foot .bl-link { font-size: 12.5px; font-weight: 500; }

/* Below the card */
.bl-v4 .bl-reg .bl-auth-foot { font-size: 14px; }
.bl-v4 .bl-reg-foot-sub { margin-top: 8px; font-size: 13px; }
.bl-v4 .bl-reg-trust { display: flex; flex-direction: column; align-items: center; gap: 12px; margin-top: 32px; font-size: 12px; color: var(--muted); }
.bl-v4 .bl-reg-trust-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px 20px; }
.bl-v4 .bl-reg-trust-row > span { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; }
.bl-v4 .bl-reg-trust-row > span .bl-ic { color: var(--accent); }
.bl-v4 .bl-reg-trust-row a { color: var(--muted); }
.bl-v4 .bl-reg-trust-row a:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.bl-v4 .bl-reg-trust .bl-seg-item { height: 24px; min-width: 32px; padding: 0 8px; font-size: 11.5px; }
.bl-v4 .bl-reg-copy { color: var(--muted-2); }

/* Check your e-mail */
.bl-v4 .bl-reg-pending { text-align: center; }
.bl-v4 .bl-reg-mailic { display: inline-grid; place-items: center; width: 56px; height: 56px; margin-bottom: 20px; border-radius: 16px; background: var(--accent-soft); color: var(--accent); }
.bl-v4 .bl-reg-mailic .bl-ic { width: 26px; height: 26px; }
.bl-v4 .bl-reg-pending .bl-page-sub { margin-top: 8px; line-height: 1.55; }
.bl-v4 .bl-reg-pending .bl-page-sub strong { display: block; margin-top: 2px; font-size: 15px; color: var(--ink); overflow-wrap: anywhere; }
.bl-v4 .bl-reg-pending .bl-steps { margin-top: 20px; text-align: left; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.bl-v4 .bl-reg-pending .bl-step { grid-template-columns: 28px minmax(0, 1fr); align-items: center; gap: 12px; padding: 12px 0; }
.bl-v4 .bl-reg-pending .bl-step-dot { width: 28px; height: 28px; font-size: 12.5px; }
.bl-v4 .bl-reg-pending .bl-step-title { font-size: 14px; font-weight: 600; color: var(--ink-2); }
.bl-v4 .bl-reg-resend { margin: 24px 0 0; }
.bl-v4 .bl-reg-resend .bl-btn,
.bl-v4 .bl-reg-resend-link { width: 100%; height: 46px; }
.bl-v4 .bl-reg-resend-link { margin-top: 24px; }
.bl-v4 .bl-reg-pending .bl-help { margin-top: 14px; }

@media (max-width: 767.98px) {
  .bl-v4 .bl-reg .bl-auth-brand { margin-bottom: 24px; }
  .bl-v4 .bl-reg-tabs .bl-seg-item { height: 40px; }
  .bl-v4 .bl-reg-eye { width: 48px; }
  .bl-v4 .bl-reg-trust { margin-top: 24px; }
  .bl-v4 .bl-reg-pending .bl-page-title { font-size: 20px; }
}

/* ---------- Other auth pages, still on the old markup ----------
   Password reset, confirmation, unlock and invitation pages keep their markup
   in V4 mode; the dark auth-shell becomes the light auth layout (B11) and the
   white-on-brand texts take the V4 ink. The partner signup's brand panel
   (aside.auth-shell, no min-h-screen) is left alone. */
.bl-v4 .auth-shell.min-h-screen { background: radial-gradient(80% 50% at 50% 0%, color-mix(in srgb, var(--brand-bright) 10%, transparent), transparent 70%), var(--bg); }
.bl-v4 .auth-shell.min-h-screen::before { display: none; }
.bl-v4 .auth-shell.min-h-screen .text-white { color: var(--ink); }
.bl-v4 .auth-shell.min-h-screen :is(.text-white\/70, .text-white\/60, .text-white\/50, .text-white\/45, .text-white\/35) { color: var(--muted); }
.bl-v4 .auth-shell.min-h-screen .text-brand-bright { color: var(--accent-ink); }
.bl-v4 .auth-shell.min-h-screen .bg-white\/10 { background: var(--brand); border-color: transparent; color: #fff; }
.bl-v4 .auth-shell.min-h-screen .auth-card { background: var(--surface); border-color: var(--line); border-radius: 16px; box-shadow: var(--shadow); }
.bl-v4 .auth-flash-ok { background: var(--good-soft); border-color: var(--good-line); color: var(--good); }
.bl-v4 .auth-flash-bad { background: var(--bad-soft); border-color: var(--bad-line); color: var(--bad); }
.bl-v4 .auth-checkbox { accent-color: var(--accent); }