/* VALU5_AUTH_UI_V1
   Publieke toegangsschermen:
   login, wachtwoordherstel, organisatie-aanmelding en uitnodigingsactivatie.
   De overige publieke website blijft buiten deze scope.
*/

.v5-auth-ui{
    --v5-auth-navy:#061D3A;
    --v5-auth-blue:#0A315B;
    --v5-auth-teal:#0D8587;
    --v5-auth-aqua:#43CBC3;
    --v5-auth-ink:#17334D;
    --v5-auth-muted:#607183;
    --v5-auth-line:#DCE8EA;
    --v5-auth-soft:#F4F8F8;
    --v5-auth-white:#FFFFFF;
    --v5-auth-shadow:0 20px 58px rgba(7,31,62,.09);

    --navy:var(--v5-auth-navy);
    --teal:var(--v5-auth-teal);
    --green:var(--v5-auth-teal);
    --text:var(--v5-auth-ink);
    --muted:var(--v5-auth-muted);
    --line:var(--v5-auth-line);

    background:var(--v5-auth-soft);
    color:var(--v5-auth-ink);
}

.v5-auth-ui .topbar{
    position:sticky;
    top:0;
    z-index:100;
    border-bottom:1px solid rgba(6,29,58,.08);
    background:rgba(255,255,255,.96);
    box-shadow:0 9px 30px rgba(7,31,62,.045);
    backdrop-filter:blur(16px);
}

.v5-auth-ui .topbar nav{
    min-height:80px;
}

.v5-auth-ui .brand-logo{
    width:210px;
    max-height:53px;
}

.v5-auth-ui .public-link{
    border-radius:11px;
    color:#53677A;
}

.v5-auth-ui .public-link:hover,
.v5-auth-ui .public-link:focus-visible,
.v5-auth-ui .public-link.is-active{
    background:#EAF5F4;
    color:var(--v5-auth-teal);
}

.v5-auth-ui #main-content{
    min-height:calc(100svh - 80px);
    background:
        radial-gradient(
            circle at 93% 6%,
            rgba(67,203,195,.10),
            transparent 27%
        ),
        linear-gradient(
            180deg,
            #FAFCFC 0%,
            #F3F8F8 100%
        );
}

/* Gemeenschappelijke auth-cards */
.v5-auth-ui .card{
    border:1px solid var(--v5-auth-line);
    border-radius:28px;
    background:rgba(255,255,255,.985);
    box-shadow:var(--v5-auth-shadow);
}

.v5-auth-ui .btn{
    min-height:50px;
    padding:0 20px;
    border-radius:14px;
    font-size:14px;
    font-weight:820;
    transition:
        transform .18s ease,
        background .18s ease,
        border-color .18s ease,
        box-shadow .18s ease;
}

.v5-auth-ui .btn:hover{
    transform:translateY(-1px);
}

.v5-auth-ui .btn-primary{
    border-color:var(--v5-auth-navy);
    background:var(--v5-auth-navy);
    color:#FFFFFF;
    box-shadow:0 11px 28px rgba(6,29,58,.16);
}

.v5-auth-ui .btn-primary:hover{
    border-color:var(--v5-auth-blue);
    background:var(--v5-auth-blue);
}

/* Login */
.v5-auth-ui .auth{
    min-height:calc(100svh - 80px);
    grid-template-columns:minmax(0,.92fr) minmax(520px,1.08fr);
    background:#F7FAFA;
}

.v5-auth-ui .auth .info{
    position:relative;
    isolation:isolate;
    overflow:hidden;
    padding:clamp(58px,7vw,94px);
    background:
        radial-gradient(
            circle at 83% 15%,
            rgba(67,203,195,.21),
            transparent 30%
        ),
        linear-gradient(
            145deg,
            var(--v5-auth-navy),
            #0A315B 72%,
            #0D6C72
        );
}

.v5-auth-ui .auth .info::after{
    content:"";
    position:absolute;
    z-index:-1;
    width:360px;
    height:360px;
    right:-135px;
    bottom:-145px;
    border:1px solid rgba(255,255,255,.12);
    border-radius:50%;
    box-shadow:
        0 0 0 55px rgba(255,255,255,.035),
        0 0 0 110px rgba(255,255,255,.025);
}

.v5-auth-ui .auth .info h1{
    max-width:610px;
    color:#FFFFFF;
    font-size:clamp(44px,5.2vw,66px);
    line-height:1.02;
    letter-spacing:-.05em;
}

.v5-auth-ui .auth .info p{
    max-width:580px;
    color:#C5D8E2;
    font-size:17px;
    line-height:1.75;
}

.v5-auth-ui .auth .panel{
    padding:clamp(34px,5vw,70px);
    background:
        radial-gradient(
            circle at 95% 5%,
            rgba(67,203,195,.08),
            transparent 28%
        ),
        #F7FAFA;
}

.v5-auth-ui .login-card{
    width:min(100%,480px);
    padding:clamp(29px,4vw,40px);
}

.v5-auth-ui .login-card h2{
    color:var(--v5-auth-navy);
    font-size:clamp(32px,4vw,40px);
    letter-spacing:-.035em;
}

.v5-auth-ui .login-card .note{
    color:var(--v5-auth-muted);
    line-height:1.65;
}

.v5-auth-ui .login-card .field{
    gap:8px;
    margin:20px 0;
}

.v5-auth-ui .login-card label{
    color:var(--v5-auth-navy);
    font-size:13px;
    font-weight:800;
}

.v5-auth-ui .login-card input[type="email"],
.v5-auth-ui .login-card input[type="password"]{
    height:52px;
    border:1px solid #C9D8DE;
    border-radius:14px;
    background:#FFFFFF;
    color:var(--v5-auth-ink);
    padding:0 14px;
}

.v5-auth-ui .login-card input:focus{
    border-color:var(--v5-auth-teal);
    outline:none;
    box-shadow:0 0 0 4px rgba(13,133,135,.10);
}

.v5-auth-ui .login-card .remember{
    color:var(--v5-auth-muted);
    font-weight:700;
}

.v5-auth-ui .login-card input[type="checkbox"]{
    accent-color:var(--v5-auth-teal);
}

.v5-auth-ui .login-card a{
    color:var(--v5-auth-teal)!important;
}

.v5-auth-ui .login-card .error{
    border:1px solid #F0CACA;
    border-radius:14px!important;
    background:#FFF5F5!important;
    color:#8F3131!important;
}

/* Password reset */
.v5-auth-ui .password-page{
    min-height:calc(100svh - 80px);
    padding:58px 20px;
    background:
        radial-gradient(
            circle at 87% 7%,
            rgba(67,203,195,.10),
            transparent 25%
        ),
        linear-gradient(180deg,#FAFCFC 0%,#F3F8F8 100%);
}

.v5-auth-ui .password-card{
    width:min(100%,540px);
    padding:clamp(29px,4vw,40px);
}

.v5-auth-ui .password-card h1{
    color:var(--v5-auth-navy);
    font-size:clamp(31px,4vw,39px);
    line-height:1.1;
    letter-spacing:-.035em;
}

.v5-auth-ui .password-note{
    color:var(--v5-auth-muted);
    line-height:1.7;
}

.v5-auth-ui .password-field{
    gap:8px;
    margin:20px 0;
}

.v5-auth-ui .password-field label{
    color:var(--v5-auth-navy);
    font-weight:800;
}

.v5-auth-ui .password-field input{
    height:52px;
    border:1px solid #C9D8DE;
    border-radius:14px;
    background:#FFFFFF;
    color:var(--v5-auth-ink);
}

.v5-auth-ui .password-field input:focus{
    border-color:var(--v5-auth-teal);
    outline:none;
    box-shadow:0 0 0 4px rgba(13,133,135,.10);
}

.v5-auth-ui .password-status{
    border-color:#BFE3DB;
    border-radius:14px;
    background:#F0FAF7;
    color:#176B60;
}

.v5-auth-ui .password-error{
    border-color:#F0CACA;
    border-radius:14px;
    background:#FFF5F5;
    color:#8F3131;
}

.v5-auth-ui .password-back{
    color:var(--v5-auth-teal);
    font-weight:750;
}

/* Organisatie registreren */
.v5-auth-ui .organization-register{
    padding:64px 0 86px;
    background:
        radial-gradient(
            circle at 93% 3%,
            rgba(67,203,195,.10),
            transparent 28%
        ),
        linear-gradient(180deg,#FAFCFC 0%,#F3F8F8 100%);
}

.v5-auth-ui .organization-register-grid{
    grid-template-columns:minmax(0,.88fr) minmax(460px,1.12fr);
    gap:58px;
}

.v5-auth-ui .organization-register-kicker{
    color:var(--v5-auth-teal);
}

.v5-auth-ui .organization-register-kicker::before{
    background:var(--v5-auth-aqua);
}

.v5-auth-ui .organization-register-copy h1{
    color:var(--v5-auth-navy);
    font-size:clamp(43px,5vw,62px);
}

.v5-auth-ui .organization-register-copy h1 span{
    color:var(--v5-auth-teal);
}

.v5-auth-ui .organization-register-lead{
    color:var(--v5-auth-muted);
}

.v5-auth-ui .organization-register-check{
    border:1px solid #CDE6E2;
    background:#EAF7F5;
    color:var(--v5-auth-teal);
}

.v5-auth-ui .organization-register-benefit strong{
    color:var(--v5-auth-navy);
}

.v5-auth-ui .organization-register-benefit span,
.v5-auth-ui .organization-register-login{
    color:var(--v5-auth-muted);
}

.v5-auth-ui .organization-register-login a{
    color:var(--v5-auth-teal);
}

.v5-auth-ui .organization-register-card{
    padding:clamp(27px,4vw,39px);
    border-color:var(--v5-auth-line);
    border-radius:28px;
    box-shadow:var(--v5-auth-shadow);
}

.v5-auth-ui .organization-register-card h2{
    color:var(--v5-auth-navy);
}

.v5-auth-ui .organization-register-card > p{
    color:var(--v5-auth-muted);
}

.v5-auth-ui .organization-register-field label{
    color:var(--v5-auth-navy);
}

.v5-auth-ui .organization-register-field input{
    min-height:51px;
    border-color:#C9D8DE;
    border-radius:14px;
}

.v5-auth-ui .organization-register-field input:focus{
    border-color:var(--v5-auth-teal);
    box-shadow:0 0 0 4px rgba(13,133,135,.10);
}

.v5-auth-ui .organization-register-option{
    border-color:var(--v5-auth-line);
    border-radius:18px;
    background:#F8FBFB;
}

.v5-auth-ui .organization-register-option h2{
    color:var(--v5-auth-navy);
}

.v5-auth-ui .organization-register-option p,
.v5-auth-ui .organization-register-terms{
    color:var(--v5-auth-muted);
}

.v5-auth-ui .organization-register-terms input{
    accent-color:var(--v5-auth-teal);
}

.v5-auth-ui .organization-register-submit{
    min-height:54px;
    border-radius:14px;
    background:var(--v5-auth-navy);
    box-shadow:0 12px 30px rgba(6,29,58,.16);
}

.v5-auth-ui .organization-register-submit:hover{
    background:var(--v5-auth-blue);
}

/* Uitnodiging activeren */
.v5-auth-ui .page{
    min-height:calc(100svh - 80px);
    padding:52px 0 72px;
    background:
        radial-gradient(
            circle at 90% 5%,
            rgba(67,203,195,.09),
            transparent 27%
        ),
        linear-gradient(180deg,#FAFCFC 0%,#F3F8F8 100%);
}

.v5-auth-ui .activation{
    width:min(100%,780px);
    padding:clamp(27px,4vw,42px);
}

.v5-auth-ui .activation h1{
    color:var(--v5-auth-navy);
    font-size:clamp(33px,4.5vw,43px);
    line-height:1.1;
    letter-spacing:-.035em;
}

.v5-auth-ui .activation h2{
    color:var(--v5-auth-navy);
}

.v5-auth-ui .activation p{
    color:var(--v5-auth-muted);
}

.v5-auth-ui .theme-badge{
    border:1px solid #CBE5E1;
    background:#EAF7F5;
    color:#0B716B;
}

.v5-auth-ui .context{
    gap:14px;
}

.v5-auth-ui .context-card{
    padding:20px;
    border-color:var(--v5-auth-line);
    border-radius:18px;
    background:#F8FBFB;
}

.v5-auth-ui .context-label{
    color:#6D7F8F;
}

.v5-auth-ui .privacy-box{
    border:1px solid #C7E5E0;
    border-left:4px solid var(--v5-auth-teal);
    border-radius:16px;
    background:#F0FAF7;
}

.v5-auth-ui .privacy-box ul{
    color:#526A79;
}

.v5-auth-ui .activation .field label{
    color:var(--v5-auth-navy);
    font-weight:800;
}

.v5-auth-ui .activation .field input[type="password"]{
    height:52px;
    border-color:#C9D8DE;
    border-radius:14px;
}

.v5-auth-ui .activation .field input[type="password"]:focus{
    border-color:var(--v5-auth-teal);
    outline:none;
    box-shadow:0 0 0 4px rgba(13,133,135,.10);
}

.v5-auth-ui .confirmation{
    border-color:#C9D8DE;
    border-radius:16px;
    background:#FFFFFF;
}

.v5-auth-ui .confirmation input{
    accent-color:var(--v5-auth-teal);
}

.v5-auth-ui .confirmation label{
    color:var(--v5-auth-navy);
}

.v5-auth-ui .decline-area{
    border-top-color:#E0E9EB;
}

.v5-auth-ui .decline-button{
    color:#687B8C;
}

/* Uitnodiging geweigerd */
.v5-auth-ui .result-card{
    width:min(100%,640px);
    padding:clamp(30px,5vw,44px);
}

.v5-auth-ui .result-card h1{
    color:var(--v5-auth-navy);
    font-size:clamp(32px,4vw,40px);
    letter-spacing:-.035em;
}

.v5-auth-ui .result-card p{
    color:var(--v5-auth-muted);
}

/* Toegankelijkheid */
.v5-auth-ui a:focus-visible,
.v5-auth-ui button:focus-visible{
    outline:3px solid rgba(67,203,195,.45);
    outline-offset:3px;
}

@media(max-width:900px){
    .v5-auth-ui .auth{
        grid-template-columns:1fr;
    }

    .v5-auth-ui .auth .info{
        min-height:280px;
        padding:48px 30px;
    }

    .v5-auth-ui .auth .info h1{
        font-size:clamp(38px,8vw,52px);
    }

    .v5-auth-ui .organization-register-grid{
        grid-template-columns:1fr;
        gap:38px;
    }
}

@media(max-width:700px){
    .v5-auth-ui .auth .info{
        display:block;
        min-height:auto;
        padding:40px 24px;
    }

    .v5-auth-ui .auth .info p{
        margin-bottom:0;
        font-size:15px;
    }

    .v5-auth-ui .auth .panel{
        padding:28px 16px 46px;
    }
}

@media(max-width:620px){
    .v5-auth-ui .organization-register{
        padding:40px 0 58px;
    }

    .v5-auth-ui .organization-register-card{
        padding:24px 19px;
        border-radius:22px;
    }

    .v5-auth-ui .organization-register-row{
        grid-template-columns:1fr;
    }

    .v5-auth-ui .page{
        padding:30px 0 54px;
    }

    .v5-auth-ui .activation{
        padding:24px 19px;
        border-radius:22px;
    }
}

@media(prefers-reduced-motion:reduce){
    .v5-auth-ui *,
    .v5-auth-ui *::before,
    .v5-auth-ui *::after{
        transition-duration:.01ms!important;
        animation-duration:.01ms!important;
        animation-iteration-count:1!important;
    }
}