/* =====================================================================
   SCOUTR 2.0 - de inlogschermen

   Dit blok stond in themes/scoutr/login.php en nog een keer in
   register.php. Vier andere schermen gebruiken dezelfde opbouw maar
   hadden het niet:

       /forgot          wachtwoord vergeten
       /reset           nieuw wachtwoord kiezen
       /mail-otp        code uit de e-mail
       /unusual-login   aanmelding op een nieuw apparaat

   Daar stond dus nog de achtergrond van de leverancier: een paars vlak
   over de volle hoogte,
   `linear-gradient(0deg, transparent, rgb(134 22 139 / 50%))`
   (style.css regel 1379). Gemeten en gevonden op 2026-09-14.

   Alles hieronder hangt aan `.dt_login_body`, dus het raakt geen enkel
   ander scherm. style.php laadt dit bestand alleen op die zes schermen.
   ===================================================================== */

/* De globale nav en voet worden verborgen: deze pagina heeft een eigen kop. */
body > #container { padding: 0 !important; }
#nav-not-logged-in,
.page_footer:not(.dt_auth_footr_page) { display: none !important; visibility: hidden !important; }

.dt_login_body { min-height: 100vh; background: var(--sc-nachtgroen); }
.dt_login_body_inner {
  min-height: 100vh;
  padding-top: var(--sc-r-4);
  background:
    radial-gradient(90% 60% at 85% 0%, rgba(var(--sc-roze-rgb), .14), transparent 60%),
    radial-gradient(70% 50% at 5% 100%, rgba(var(--sc-den-rgb), .16), transparent 60%),
    var(--sc-nachtgroen);
}
/* Het motief: de geweven band, bovenaan. */
.dt_login_body_inner::before {
  content: ""; position: fixed; left: 0; right: 0; top: 0; height: 14px; z-index: 5;
  background: var(--sc-band); background-size: var(--sc-band-maat);
  animation: sc-band-schuif 7s linear infinite;
}
@media (prefers-reduced-motion: reduce) { .dt_login_body_inner::before { animation: none; } }

.dt_login_body nav, .dt_login_body nav .nav-wrapper {
  background: transparent !important; border-bottom: 0 !important; backdrop-filter: none !important;
}
.dt_login_body .not_usr_nav { display: flex; align-items: center; gap: var(--sc-r-3); margin-top: var(--sc-r-3); }

/* De kaart met het formulier */
.dt_login_body .dt_login {
  background: var(--sc-kampdoek) !important;
  background-image: none !important;
  border: 1px solid var(--sc-rand-stil);
  border-radius: var(--sc-rond-lg);
  box-shadow: var(--sc-schaduw-lg);
  position: relative; overflow: hidden;
  padding: var(--sc-r-6) var(--sc-r-6) var(--sc-r-5) !important;
  max-width: 480px; margin-inline: auto;
}
.dt_login_body .dt_login::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 5px;
  background: var(--sc-band); background-size: var(--sc-band-maat);
}
.dt_login_body form > p {
  color: var(--sc-tekst-zacht) !important;
  font-size: var(--sc-t-base); line-height: 1.5;
  margin-bottom: var(--sc-r-5);
}
.dt_login_body form > p .bold {
  display: block; color: var(--sc-tekst) !important;
  --sc-eigen-letter: var(--sc-font-kop);
  font-size: var(--sc-t-2xl); font-weight: 800; letter-spacing: -.02em;
  line-height: var(--sc-lh-strak); margin-bottom: var(--sc-r-2);
}

.dt_login_body .dt_login_footer {
  margin-top: var(--sc-r-6); display: flex; flex-wrap: wrap;
  align-items: center; gap: var(--sc-r-4);
}
.dt_login_body .terms_check { display: flex; align-items: flex-start; gap: var(--sc-r-3); margin-top: var(--sc-r-5); }
.dt_login_body .terms_check span { color: var(--sc-tekst-zacht) !important; font-size: var(--sc-t-sm); line-height: 1.6; }

.dt_login_body .dt_social_login { margin-top: var(--sc-r-6); display: flex; flex-wrap: wrap; gap: var(--sc-r-3); }
.dt_login_body .btn_social {
  background: var(--sc-vlies-1) !important;
  border: 1px solid var(--sc-rand) !important;
  color: var(--sc-tekst) !important;
  font-size: var(--sc-t-sm);
  border-radius: var(--sc-rond-pil); padding: var(--sc-r-3) var(--sc-r-4);
  min-height: var(--sc-raak); display: inline-flex; align-items: center;
  font-weight: 600; text-decoration: none;
}
.dt_login_body .btn_social:hover { background: var(--sc-vlies-2) !important; border-color: var(--sc-roze) !important; }

@media (max-width: 700px) {
  .dt_login_body .dt_login { padding: var(--sc-r-5) var(--sc-r-4) !important; border-radius: var(--sc-rond-md); }
  .dt_login_body .dt_login_footer { flex-direction: column; align-items: stretch; }
  .dt_login_body .dt_login_footer .btn, .dt_login_body #sign_submit { width: 100%; }
  .dt_login_body .btn_social { width: 100%; justify-content: center; }
}