/* =========================================================
   Spiraalcheck — login.css
   Stijl-laag voor de inlogpagina (auth/login.blade.php) en
   de wachtwoord-reset-pagina (auth/reset-password.blade.php).

   Bouwt voort op de design-tokens (--magenta, --ink, --cream, radii,
   schaduwen…) en de globale .btn / .eyebrow / .wrap / header / footer
   die al live staan sinds het homepage-herontwerp.

   BLOK A = gedeelde formulier-primitieven (identiek aan 'reminder
   instellen'). Staan die al in je productie-CSS? Dan is dit blok puur
   ter zekerheid — dubbele, identieke regels zijn onschadelijk.
   BLOK B = de login-specifieke opmaak.
========================================================= */

/* ── token-aliassen: ontbreken in de huidige :root? Dan hier als fallback ── */
:root {
    --accent:       #D91762;
    --accent-strong:#A50B49;
    --font:         'Poppins', sans-serif;
}

/* ── globale hulpklassen die op deze pagina's nodig zijn ── */
.wrap { width: 100%; max-width: 1180px; margin: 0 auto; padding: 0 28px; }
@media (max-width: 720px) { .wrap { padding: 0 22px; } }
.btn-block { display: block; width: 100%; text-align: center; }

/* ============== BLOK A — gedeelde formulier-primitieven ============== */

.set-back{ display:inline-flex; align-items:center; gap:8px; font-size:14px; color:var(--ink-2); margin-bottom:28px; }
.set-back:hover{ color:var(--accent); }
.set-back svg{ width:16px; height:16px; }

.field{ margin-top:22px; }
.field label{ display:block; font-size:13.5px; font-weight:600; color:var(--ink); margin-bottom:9px; }
.field .hint{ font-weight:400; color:var(--ink-3); font-size:12.5px; }
.field-head{ display:flex; align-items:center; justify-content:space-between; }
.field-head label{ margin-bottom:9px; }
.field-head-link{ font-size:12.5px; font-weight:500; color:var(--accent); margin-bottom:9px; }
.field-head-link:hover{ text-decoration:underline; }

.input{
    width:100%; font-family:var(--font); font-size:15.5px; color:var(--ink);
    padding:15px 17px; border-radius:var(--r); border:1.5px solid var(--line);
    background:var(--cream); transition:border-color .15s, box-shadow .15s, background .15s;
}
.input::placeholder{ color:var(--ink-3); }
.input:focus{ outline:none; border-color:var(--accent); background:#fff; box-shadow:0 0 0 4px rgba(217,23,98,.12); }

.input-icon{ position:relative; }
.input-icon svg{ position:absolute; left:16px; top:50%; transform:translateY(-50%); width:19px; height:19px; color:var(--ink-3); }
.input-icon .input{ padding-left:46px; }

.check{ display:flex; align-items:flex-start; gap:12px; margin-top:26px; cursor:pointer; }
.check input{ position:absolute; opacity:0; }
.check .box{ width:24px; height:24px; border-radius:8px; border:1.5px solid var(--line); background:var(--cream); flex:0 0 auto; display:grid; place-items:center; color:transparent; transition:all .14s ease; margin-top:1px; }
.check .box svg{ width:15px; height:15px; }
.check input:checked + .box{ background:var(--accent); border-color:var(--accent); color:#fff; }
.check span{ font-size:13.5px; color:var(--ink-2); line-height:1.5; }

.turnstile-mock{ display:flex; align-items:center; gap:12px; padding:14px 18px; border:1.5px solid var(--line); border-radius:var(--r); background:var(--cream); font-size:13.5px; color:var(--ink-2); }
.turnstile-mock .tm-check{ width:24px; height:24px; border-radius:6px; background:#16a34a; display:grid; place-items:center; color:#fff; }
.turnstile-mock .tm-check svg{ width:15px; height:15px; }
.turnstile-mock .tm-brand{ margin-left:auto; font-size:11px; color:var(--ink-3); text-align:right; line-height:1.3; }

/* ============== BLOK B — login-specifiek ============== */

.login-main{ padding-top:56px; padding-bottom:90px; position:relative; }
.login-main::before{
    content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
    background:
        radial-gradient(900px 520px at 86% -10%, rgba(255,130,100,.16), transparent 60%),
        radial-gradient(720px 520px at 4% 2%, rgba(255,255,255,.7), transparent 55%);
}
.login-grid{ display:grid; grid-template-columns:1fr .92fr; gap:40px; align-items:stretch; }

/* Form card */
.login-card{ background:#fff; border:1px solid var(--line-soft); border-radius:var(--r-xl); box-shadow:var(--sh-2); padding:44px; }
.login-card .eyebrow{ margin-bottom:16px; }
.login-card h1{ font-size:clamp(28px, 3.4vw, 38px); }
.login-card > p{ margin-top:12px; font-size:15.5px; max-width:42ch; }

/* Label-rij met hulplink ("Wachtwoord vergeten?") */
.field-head{ display:flex; align-items:baseline; justify-content:space-between; gap:12px; margin-bottom:9px; }
.field-head label{ margin:0; }
.field-head a{ font-size:12.5px; font-weight:600; color:var(--accent-strong); }
.field-head a:hover{ text-decoration:underline; }

/* Wachtwoordveld met toon/verberg-knop */
.pw-wrap{ position:relative; }
.pw-wrap .input{ padding-right:50px; }
.pw-toggle{
    position:absolute; right:8px; top:50%; transform:translateY(-50%);
    width:36px; height:36px; border-radius:10px; border:none; background:transparent;
    color:var(--ink-3); display:grid; place-items:center; cursor:pointer; transition:color .14s, background .14s;
}
.pw-toggle:hover{ color:var(--accent-strong); background:rgba(217,23,98,.07); }
.pw-toggle svg{ width:19px; height:19px; }
.pw-toggle .eye-off{ display:none; }
.pw-wrap.show .pw-toggle .eye-on{ display:none; }
.pw-wrap.show .pw-toggle .eye-off{ display:block; }

/* "Ingelogd blijven"-rij */
.remember-row{ display:flex; align-items:center; justify-content:space-between; gap:14px; margin-top:20px; flex-wrap:wrap; }
.remember-row .check{ margin-top:0; align-items:center; }
.remember-row .check .box{ margin-top:0; }
.remember-row .check span{ color:var(--ink); font-size:14px; }
.remember-row > a{ font-size:13.5px; font-weight:600; color:var(--accent-strong); }
.remember-row > a:hover{ text-decoration:underline; }

/* Scheiding + registratie-CTA */
.login-or{ display:flex; align-items:center; gap:16px; margin:26px 0; color:var(--ink-3); font-size:12.5px; font-weight:600; letter-spacing:.04em; text-transform:uppercase; }
.login-or::before, .login-or::after{ content:""; height:1px; flex:1; background:var(--line); }
.login-signup{ text-align:center; font-size:14.5px; color:var(--ink-2); }
.login-signup a{ font-weight:700; color:var(--accent-strong); }
.login-signup a:hover{ text-decoration:underline; }

/* Aside — warm magenta paneel */
.login-aside{ display:grid; gap:18px; align-content:start; }
.login-promo{
    background:linear-gradient(160deg, var(--magenta) 0%, var(--magenta-deep) 100%);
    color:#fff; border-radius:var(--r-xl); padding:38px; box-shadow:var(--sh-2);
    position:relative; overflow:hidden; height:100%;
}
.login-promo::before{ content:""; position:absolute; right:-80px; top:-80px; width:300px; height:300px; border-radius:50%; background:radial-gradient(circle, rgba(255,130,100,.45), transparent 70%); }
.login-promo .lp-inner{ position:relative; z-index:1; display:flex; flex-direction:column; height:100%; }
.login-promo h3{ color:#fff; font-size:clamp(22px, 2.4vw, 27px); }
.login-promo > .lp-inner > p{ color:rgba(255,255,255,.82); font-size:15px; margin-top:12px; max-width:34ch; }
.lp-feats{ margin-top:26px; display:grid; gap:14px; }
.lp-feat{ display:flex; gap:15px; align-items:flex-start; }
.lp-feat .lf-ic{ width:44px; height:44px; border-radius:13px; background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.16); display:grid; place-items:center; color:#fff; flex:0 0 auto; }
.lp-feat .lf-ic svg{ width:21px; height:21px; }
.lp-feat b{ color:#fff; font-size:15px; font-weight:600; display:block; margin-bottom:3px; }
.lp-feat span{ color:rgba(255,255,255,.7); font-size:13px; line-height:1.55; }

/* Gecentreerde auth-variant (wachtwoord-reset-pagina) */
.auth-center{ max-width:520px; margin:0 auto; }
.pw-meter{ display:flex; gap:6px; margin-top:10px; }
.pw-meter span{ flex:1; height:5px; border-radius:999px; background:var(--line); transition:background .2s; }
.pw-meter.s1 span:nth-child(1){ background:#e0683c; }
.pw-meter.s2 span:nth-child(1), .pw-meter.s2 span:nth-child(2){ background:#e0a23c; }
.pw-meter.s3 span{ background:#16a34a; }
.field-note{ margin-top:8px; font-size:12.5px; color:var(--ink-3); display:flex; align-items:center; gap:7px; }
.field-note svg{ width:14px; height:14px; flex:0 0 auto; }
.field-note.ok{ color:#15803d; }
.field-note.bad{ color:#c0362c; }
.auth-back{ display:flex; justify-content:center; margin-top:18px; }
.auth-back a{ font-size:14px; font-weight:600; color:var(--accent-strong); display:inline-flex; align-items:center; gap:8px; }
.auth-back a:hover{ text-decoration:underline; }
.auth-back svg{ width:16px; height:16px; }

@media (max-width: 920px){
    .login-grid{ grid-template-columns:1fr; gap:26px; }
    .login-card{ padding:32px 24px; }
    .login-promo{ padding:30px 24px; }
}
@media (max-width: 640px){
    /* let op: geen padding-shorthand die links/rechts op 0 zet — de
       horizontale marge komt van .wrap (0 22px op mobiel). */
    .login-main{ padding-top:28px; padding-bottom:64px; }
    .remember-row{ gap:10px; }
    .lp-feat .lf-ic{ width:40px; height:40px; }
}