/* =========================================================
   LOGIN PAGINA
========================================================= */

.login-section{
  display:flex;
  justify-content:center;
  align-items:center;

  min-height:calc(100vh - 220px);

  padding:
    clamp(24px,6vw,60px);
}

/* =========================================================
   LOGIN CARD
========================================================= */

.login-card{
  width:100%;
  max-width:540px;

  background:
    linear-gradient(
      180deg,
      rgba(255,255,255,.98) 0%,
      rgba(248,250,252,.98) 100%
    );

  border:1px solid rgba(0,0,0,.08);

  border-radius:24px;

  box-shadow:
    0 24px 60px rgba(0,0,0,.14);

  padding:
    clamp(24px,4vw,40px);

  position:relative;

  overflow:hidden;
}

.login-card::before{
  content:"";

  position:absolute;

  inset:0 auto auto 0;

  width:100%;
  height:6px;

  background:
    linear-gradient(
      90deg,
      var(--brand),
      var(--brand-2)
    );
}

/* =========================================================
   TITELS
========================================================= */

.login-card h1{
  margin:0 0 14px;

  text-align:center;

  color:var(--brand);

  font-size:
    clamp(30px,5vw,42px);

  font-weight:900;

  line-height:1.1;
}

.login-intro{
  text-align:center;

  color:var(--muted);

  margin:0 auto 28px;

  max-width:42ch;

  line-height:1.7;

  font-size:15px;
}

/* =========================================================
   FORMULIER
========================================================= */

.login-form{
  display:grid;
  gap:20px;
}

.form-row{
  display:grid;
  gap:8px;
}

.form-row label{
  font-weight:800;
  color:var(--text);
  font-size:15px;
}

/* =========================================================
   INPUTS
========================================================= */

.form-row input{
  width:100%;

  min-height:54px;

  padding:14px 16px;

  border:
    1px solid rgba(0,0,0,.14);

  border-radius:14px;

  font:inherit;

  background:#fff;

  color:#111827;

  transition:
    border-color .18s ease,
    box-shadow .18s ease,
    transform .12s ease;
}

.form-row input:hover{
  border-color:
    rgba(139,0,0,.35);
}

.form-row input:focus{
  outline:none;

  border-color:
    var(--brand);

  box-shadow:
    0 0 0 4px rgba(139,0,0,.12);

  transform:
    translateY(-1px);
}

.form-row input::placeholder{
  color:#9ca3af;
}

/* =========================================================
   LOGIN BUTTON
========================================================= */

.login-form .btn-primary{
  appearance:none;

  border:0;

  border-radius:16px;

  background:
    linear-gradient(
      180deg,
      var(--brand),
      var(--brand-2)
    );

  color:#fff;

  font-weight:900;

  font-size:16px;

  min-height:56px;

  padding:14px 22px;

  cursor:pointer;

  transition:
    transform .14s ease,
    box-shadow .18s ease,
    opacity .18s ease;

  box-shadow:
    0 12px 30px rgba(139,0,0,.25);
}

.login-form .btn-primary:hover{
  transform:
    translateY(-2px);

  opacity:.96;
}

.login-form .btn-primary:active{
  transform:
    translateY(0);
}

/* =========================================================
   LINKS
========================================================= */

.login-links{
  margin-top:22px;

  text-align:center;

  display:flex;
  flex-direction:column;
  gap:10px;
}

.login-links a{
  color:var(--brand);

  font-weight:800;

  text-decoration:none;

  transition:
    opacity .15s ease;
}

.login-links a:hover{
  opacity:.8;
  text-decoration:underline;
}

/* =========================================================
   FOUTMELDING
========================================================= */

.login-error{
  margin-bottom:22px;

  padding:14px 16px;

  border-radius:14px;

  background:#fee2e2;

  color:#991b1b;

  border:
    1px solid #fecaca;

  font-weight:700;

  text-align:center;

  line-height:1.5;
}

/* =========================================================
   SUCCESS MELDING
========================================================= */

.login-success{
  margin-bottom:22px;

  padding:14px 16px;

  border-radius:14px;

  background:#dcfce7;

  color:#166534;

  border:
    1px solid #bbf7d0;

  font-weight:700;

  text-align:center;

  line-height:1.5;
}

/* =========================================================
   DARK MODE
========================================================= */

@media (prefers-color-scheme:dark){

  .login-card{
    background:
      linear-gradient(
        180deg,
        rgba(17,24,39,.98) 0%,
        rgba(12,18,31,.98) 100%
      );

    border:
      1px solid rgba(255,255,255,.08);
  }

  .form-row input{
    background:#0f172a;

    color:#f3f4f6;

    border:
      1px solid rgba(255,255,255,.12);
  }

  .form-row input::placeholder{
    color:#94a3b8;
  }
}

/* =========================================================
   RESPONSIVE
========================================================= */

@media (max-width:640px){

  .login-section{
    padding:18px;
  }

  .login-card{
    border-radius:20px;

    padding:24px 18px;
  }

  .login-card h1{
    font-size:32px;
  }

  .login-intro{
    font-size:14px;
  }

  .form-row input{
    min-height:50px;
  }

  .login-form .btn-primary{
    min-height:52px;
  }
}