/* ============================================================
   XION AUTH v2 — assets/css/auth-v2.css
   Login/register in de landing-v2-huisstijl. Laadt BOVENOP
   landing-v2.css (tokens, .btn, .brand komen daarvandaan).
   ============================================================ */

.auth-wrap{ min-height:100vh; display:grid; grid-template-columns:5fr 7fr; }

/* Linkerpaneel: donker merkpaneel met violet/magenta gloed */
.auth-brand{
    background:var(--n950); position:relative; overflow:hidden;
    display:flex; flex-direction:column; justify-content:space-between; gap:40px;
    padding:44px clamp(28px,4vw,64px) 40px;
}
.auth-brand::before{
    content:""; position:absolute; top:-180px; right:-160px; width:560px; height:560px;
    background:radial-gradient(closest-side, rgba(140,68,224,.22), transparent 70%);
}
.auth-brand::after{
    content:""; position:absolute; bottom:-200px; left:-160px; width:520px; height:520px;
    background:radial-gradient(closest-side, rgba(237,75,142,.12), transparent 70%);
}
.auth-brand .brand{ font-size:30px; position:relative; z-index:1; }
.ab-mid{ position:relative; z-index:1; }
.ab-mid h1{ color:#fff; font-size:clamp(38px,3.6vw,56px); font-weight:800; margin-bottom:14px; }
.ab-mid h1 em{
    font-style:normal;
    background:linear-gradient(95deg, var(--violet-400), var(--magenta-500));
    -webkit-background-clip:text; background-clip:text; color:transparent;
}
.ab-mid p{ color:var(--n400); font-size:17px; max-width:380px; }
.ab-usps{ position:relative; z-index:1; display:grid; gap:10px; }
.ab-usps span{ font-family:var(--font-m); font-size:12px; letter-spacing:.06em; color:var(--n400); }
.ab-usps b{ color:var(--jade); margin-right:8px; }

/* Rechterpaneel: formulierkaart */
.auth-side{ display:flex; flex-direction:column; align-items:center; justify-content:center; padding:48px 24px; }
.auth-card{
    width:100%; max-width:460px; background:#fff; border:1px solid var(--n200);
    border-radius:var(--rx-work); box-shadow:var(--sh-lg); padding:38px 36px;
}
.auth-card h2{ font-size:28px; font-weight:800; margin-bottom:6px; }
.auth-card .sub{ color:var(--n500); font-size:15px; margin-bottom:24px; }

.btn-oauth{
    display:flex; align-items:center; justify-content:center; gap:10px; width:100%;
    padding:13px; border:2px solid var(--n200); border-radius:12px 4px 12px 4px;
    text-decoration:none; color:var(--ink); font-weight:700; font-size:15px; background:#fff;
    transition:border-color .15s, background .15s;
}
.btn-oauth:hover{ border-color:var(--violet-400); background:var(--violet-50); }
.auth-divider{
    display:flex; align-items:center; gap:12px; margin:20px 0;
    color:var(--n400); font-family:var(--font-m); font-size:11px; letter-spacing:.08em; text-transform:uppercase;
}
.auth-divider::before, .auth-divider::after{ content:""; flex:1; height:1px; background:var(--n200); }

/* Formuliervelden (zelfde stijl als contact) */
.form-group{ margin-bottom:16px; }
.form-label{
    display:block; font-family:var(--font-m); font-size:11px; font-weight:600;
    letter-spacing:.14em; text-transform:uppercase; color:var(--n500); margin-bottom:8px;
}
.form-input{
    width:100%; border:2px solid var(--n200); border-radius:12px 4px 12px 4px;
    padding:13px 16px; font-family:var(--font-b); font-size:15.5px; color:var(--ink);
    background:var(--n50); transition:border-color .15s, box-shadow .15s; box-sizing:border-box;
}
.form-input:focus{ outline:none; border-color:var(--violet-400); box-shadow:0 0 0 4px rgba(140,68,224,.12); background:#fff; }
.form-row{ display:flex; gap:14px; }
.form-row .form-group{ flex:1; }
.field-hint{ color:var(--n400); font-size:12.5px; display:block; margin-top:6px; }

/* Meldingen */
.form-alert{ padding:13px 16px; border-radius:12px 4px 12px 4px; font-weight:600; font-size:14px; margin-bottom:16px; line-height:1.45; }
.form-alert.err{ background:var(--magenta-50); color:var(--magenta-600); border:1px solid var(--magenta-100); font-weight:700; }
.form-alert.info{ background:var(--violet-50); color:var(--violet-700); border:1px solid var(--violet-100); }
.form-alert.ok{ background:var(--jade-50); color:var(--jade); border:1px solid rgba(22,163,122,.3); }
.form-alert.fam{ background:var(--magenta-50); color:var(--magenta-600); border:1px solid var(--magenta-100); }
.form-alert svg{ vertical-align:-2px; margin-right:6px; }
.plan-banner{
    background:var(--violet-600); color:#fff; border-radius:12px 4px 12px 4px;
    padding:12px 16px; font-size:13.5px; font-weight:600; margin-bottom:18px;
    display:flex; align-items:center; gap:8px; line-height:1.45;
}
.plan-banner .material-symbols-outlined{ font-size:18px; flex:none; }

/* Links onder het formulier */
.auth-links{ text-align:center; margin-top:20px; font-size:14.5px; color:var(--n500); }
.auth-links a{ color:var(--violet-600); font-weight:700; text-decoration:none; }
.auth-links a:hover{ text-decoration:underline; }
.auth-back{ margin-top:12px; font-size:13px; }
.auth-back a{ color:var(--n400); font-weight:600; }

/* App-modus (Android-app/PWA, display-mode standalone): links naar de
   marketing-home verbergen — in de app besta je alleen binnen het product.
   De home zelf redirect bovendien naar /hub (script in index.php). */
@media (display-mode: standalone) {
    .auth-back a[href="/"],
    .back-to-home[href="/"],
    [data-app-hide] { display: none !important; }
}
.back-to-home{
    display:inline-flex; align-items:center; gap:6px; color:var(--n400); text-decoration:none;
    font-size:13px; margin-bottom:20px; font-weight:600; transition:color .15s;
}
.back-to-home:hover{ color:var(--violet-600); }

/* Voetregel */
.auth-foot{
    padding:22px; text-align:center; font-family:var(--font-m); font-size:11px;
    letter-spacing:.06em; color:var(--n400); background:var(--n50);
}
.auth-foot a{ color:var(--n500); text-decoration:none; }
.auth-foot a:hover{ color:var(--violet-600); }

@media (max-width:960px){
    .auth-wrap{ grid-template-columns:1fr; }
    .auth-brand{ padding:26px 24px; gap:16px; }
    .ab-mid h1{ font-size:30px; margin-bottom:0; }
    .ab-mid p, .ab-usps{ display:none; }
    .auth-side{ padding:34px 18px; }
    .auth-card{ padding:30px 24px; }
}
@media (max-width:480px){
    .form-row{ flex-direction:column; gap:0; }
}

/* Twee aanmeldknoppen onder elkaar (Google en Microsoft, 1-10-2026). */
.btn-oauth + .btn-oauth-volgende{ margin-top:10px; }