:root{
    --fin-petrol:#0f766e;
    --fin-petrol-dark:#0a4f5f;
    --fin-petrol-deep:#073b4a;
    --fin-mint:#a7f3d0;
    --fin-amber:#f59e0b;
    --fin-bg:#eefcf5;
    --fin-text:#102a43;
    --fin-muted:#667085;
    --fin-border:#d7e2e8;
    --fin-danger:#c94a44;
    --fin-danger-bg:#fff1f0;
    --fin-success:#13795b;
    --fin-success-bg:#ecfbf4;
}

html,body{min-height:100%;}
body.fincms-login-page{
    margin:0;
    min-height:100vh;
    background:linear-gradient(135deg,#073b4a 0%,#0b5f68 42%,#0f766e 100%);
    color:var(--fin-text);
    font-family:Arial,Verdana,Helvetica,sans-serif;
    -webkit-font-smoothing:antialiased;
}

.fincms-login-page *{box-sizing:border-box;}

.fincms-login-shell{
    min-height:100vh;
    display:grid;
    grid-template-columns:minmax(360px,0.95fr) minmax(520px,1.35fr);
}

.fincms-login-brand{
    position:relative;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:64px;
    overflow:hidden;
}
.fincms-login-brand:before,
.fincms-login-brand:after{
    content:"";
    position:absolute;
    border-radius:50%;
    pointer-events:none;
}
.fincms-login-brand:before{
    width:430px;height:430px;
    right:-180px;top:-120px;
    background:rgba(167,243,208,.09);
}
.fincms-login-brand:after{
    width:300px;height:300px;
    left:-110px;bottom:-120px;
    background:rgba(245,158,11,.08);
}
.fincms-login-brand-inner{position:relative;z-index:1;width:min(500px,100%);}

.fincms-login-logo{
    display:flex;
    align-items:center;
    gap:18px;
    color:#fff;
    margin-bottom:76px;
}
.fincms-login-logo-mark{
    width:66px;height:66px;
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:7px;
    transform:rotate(-1deg);
}
.fincms-login-logo-mark i{
    display:block;
    border-radius:8px;
    background:#18c7bd;
    box-shadow:0 5px 18px rgba(0,0,0,.12);
}
.fincms-login-logo-mark i:nth-child(2){background:var(--fin-amber);transform:rotate(-10deg);}
.fincms-login-logo-text{display:flex;flex-direction:column;line-height:1;}
.fincms-login-logo-text strong{font-size:42px;letter-spacing:-1.8px;font-weight:800;}
.fincms-login-logo-text small{font-size:16px;margin-top:8px;opacity:.92;}

.fincms-login-brand-copy{color:#fff;max-width:470px;}
.fincms-login-eyebrow{
    display:inline-flex;
    padding:8px 12px;
    border:1px solid rgba(255,255,255,.2);
    border-radius:999px;
    background:rgba(255,255,255,.08);
    font-size:12px;
    font-weight:700;
    letter-spacing:.08em;
    text-transform:uppercase;
}
.fincms-login-brand-copy h1{
    margin:22px 0 12px;
    color:#fff;
    font-size:56px;
    line-height:1;
    letter-spacing:-2.2px;
    font-weight:800;
}
.fincms-login-brand-copy p{
    margin:0;
    color:rgba(255,255,255,.78);
    font-size:20px;
    line-height:1.55;
}

.fincms-login-panel{
    display:flex;
    align-items:center;
    justify-content:center;
    padding:56px;
    background:
        radial-gradient(circle at 25% 20%, rgba(167,243,208,.35), transparent 32%),
        linear-gradient(180deg,#fbfffd 0%,#effaf5 100%);
}

.fincms-login-card{
    width:min(560px,100%);
    background:#fff;
    border:1px solid rgba(180,199,210,.7);
    border-radius:28px;
    padding:42px;
    box-shadow:0 28px 70px rgba(17,55,70,.18);
}
.fincms-login-card-head{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:20px;
    margin-bottom:28px;
}
.fincms-login-card-kicker{
    display:block;
    margin-bottom:8px;
    color:var(--fin-petrol);
    font-size:12px;
    font-weight:800;
    text-transform:uppercase;
    letter-spacing:.08em;
}
.fincms-login-card-head h2{
    margin:0;
    color:var(--fin-text);
    font-size:34px;
    line-height:1.1;
    letter-spacing:-1px;
}
.fincms-login-secure{
    flex:0 0 auto;
    width:42px;height:42px;
    border-radius:50%;
    display:grid;
    place-items:center;
    color:var(--fin-petrol);
    background:#eaf9f5;
    border:1px solid #c6e9df;
    font-size:18px;
    font-weight:800;
}

/* Oude widget-shell op de loginpagina neutraliseren. */
.fincms-login-page #right_column_login,
.fincms-login-page #right_column_login .widget,
.fincms-login-page #right_column_login .widget_container,
.fincms-login-page #right_column_login .widget-content,
.fincms-login-page #right_column_login .widget_middle_center,
.fincms-login-page #right_column_login .widget_bottom,
.fincms-login-page #right_column_login .widget_bottom_center{
    position:static!important;
    width:auto!important;
    height:auto!important;
    min-height:0!important;
    margin:0!important;
    padding:0!important;
    float:none!important;
    background:none!important;
    border:0!important;
    box-shadow:none!important;
}
.fincms-login-page #right_column_login .widget-head,
.fincms-login-page #right_column_login .tabs,
.fincms-login-page #right_column_login .widget_top_center{display:none!important;}

.fincms-login-page #message_login{
    display:none;
    width:100%;
    margin:0 0 20px;
    padding:14px 16px 14px 48px;
    border-radius:14px;
    border:1px solid transparent;
    position:relative;
    font-size:14px;
    font-weight:700;
    line-height:1.45;
}
.fincms-login-page #message_login:before{
    position:absolute;
    left:16px;top:50%;
    transform:translateY(-50%);
    width:22px;height:22px;
    display:grid;
    place-items:center;
    border-radius:50%;
    font-size:13px;
    font-weight:900;
}
.fincms-login-page #message_login.negative{
    color:#9f3732;
    background:var(--fin-danger-bg);
    border-color:#f0c5c1;
}
.fincms-login-page #message_login.negative:before{content:"!";color:#fff;background:var(--fin-danger);}
.fincms-login-page #message_login.positive{
    color:#116647;
    background:var(--fin-success-bg);
    border-color:#bfe8d6;
}
.fincms-login-page #message_login.positive:before{content:"✓";color:#fff;background:var(--fin-success);}
.fincms-login-page #message_login.attention{
    color:#8f6000;
    background:#fff7df;
    border-color:#f5dda2;
}
.fincms-login-page #message_login.attention:before{content:"!";color:#fff;background:#d99a16;}

.fincms-login-page #loginform,
.fincms-login-page #lostpasswordform{margin:0!important;}
.fincms-login-page #loginform dl,
.fincms-login-page #lostpasswordform dl{margin:0;display:grid;gap:10px;}
.fincms-login-page #loginform dt,
.fincms-login-page #lostpasswordform dt{margin:0;padding:0;float:none;width:auto;}
.fincms-login-page #loginform dd,
.fincms-login-page #lostpasswordform dd{margin:0 0 8px;padding:0;float:none;width:auto;}
.fincms-login-page #loginform label,
.fincms-login-page #lostpasswordform label{
    display:block;
    color:#31465b;
    font-size:14px;
    font-weight:800;
    margin-bottom:7px;
}
.fincms-login-page #loginform input[type="text"],
.fincms-login-page #loginform input[type="password"],
.fincms-login-page #lostpasswordform input[type="text"]{
    display:block;
    width:100%!important;
    height:54px;
    margin:0;
    padding:0 16px;
    border:1px solid #cbd8df;
    border-radius:14px;
    background:#fbfdfc;
    color:var(--fin-text);
    font:inherit;
    font-size:16px;
    outline:none;
    box-shadow:none;
    transition:border-color .15s ease,box-shadow .15s ease,background .15s ease;
}
.fincms-login-page #loginform input:focus,
.fincms-login-page #lostpasswordform input:focus{
    border-color:#65bfb5;
    background:#fff;
    box-shadow:0 0 0 4px rgba(15,118,110,.10);
}

.fincms-login-page #login_btn,
.fincms-login-page #send_btn{
    display:flex;
    align-items:center;
    justify-content:center;
    width:100%;
    min-height:54px;
    margin:10px 0 16px;
    padding:0 20px;
    border:0;
    border-radius:14px;
    background:linear-gradient(135deg,#0f8e83,#0f766e);
    color:#fff!important;
    text-decoration:none!important;
    cursor:pointer;
    box-shadow:0 12px 24px rgba(15,118,110,.22);
    transition:transform .15s ease,box-shadow .15s ease,filter .15s ease;
}
.fincms-login-page #login_btn:hover,
.fincms-login-page #send_btn:hover{transform:translateY(-1px);box-shadow:0 16px 28px rgba(15,118,110,.26);filter:brightness(1.02);}
.fincms-login-page #login_btn span,
.fincms-login-page #send_btn span{font-size:16px;font-weight:800;color:#fff!important;}

.fincms-login-page a.password{
    display:block;
    text-align:center;
    color:var(--fin-petrol)!important;
    font-size:14px;
    font-weight:700;
    text-decoration:none!important;
    cursor:pointer;
}
.fincms-login-page a.password:hover{text-decoration:underline!important;}

.fincms-login-card-foot{
    margin-top:30px;
    padding-top:22px;
    border-top:1px solid #e6edf0;
    color:#8a98a8;
    text-align:center;
    font-size:12px;
    font-weight:700;
}

@media (max-width:960px){
    .fincms-login-shell{grid-template-columns:1fr;}
    .fincms-login-brand{padding:36px 36px 22px;align-items:flex-start;}
    .fincms-login-brand-inner{width:100%;display:flex;align-items:center;justify-content:space-between;gap:24px;}
    .fincms-login-logo{margin:0;}
    .fincms-login-brand-copy{text-align:right;}
    .fincms-login-brand-copy h1{font-size:34px;margin:8px 0 5px;}
    .fincms-login-brand-copy p{font-size:15px;}
    .fincms-login-eyebrow{display:none;}
    .fincms-login-panel{padding:36px;align-items:flex-start;}
}

@media (max-width:620px){
    .fincms-login-brand{padding:24px;}
    .fincms-login-brand-inner{display:block;}
    .fincms-login-logo{margin-bottom:24px;}
    .fincms-login-logo-mark{width:52px;height:52px;gap:5px;}
    .fincms-login-logo-text strong{font-size:34px;}
    .fincms-login-brand-copy{text-align:left;}
    .fincms-login-brand-copy h1{font-size:30px;}
    .fincms-login-panel{padding:20px;}
    .fincms-login-card{padding:28px 22px;border-radius:22px;}
    .fincms-login-card-head h2{font-size:28px;}
}
\n\n/* Step 2L5a - initial form + compact mobile branding */\n.fincms-login-page .widget_middle_center{\n    display:block!important;\n    visibility:visible!important;\n    overflow:visible!important;\n}\n\n@media (max-width:960px){\n    .fincms-login-shell{min-height:100vh;display:block;}\n    .fincms-login-brand{\n        min-height:0;\n        padding:24px 32px;\n        align-items:center;\n    }\n    .fincms-login-brand-inner{\n        display:flex;\n        align-items:center;\n        justify-content:space-between;\n        gap:24px;\n    }\n    .fincms-login-logo{margin:0;}\n    .fincms-login-brand-copy{max-width:none;text-align:right;}\n    .fincms-login-brand-copy h1{font-size:30px;margin:4px 0 2px;}\n    .fincms-login-brand-copy p{font-size:14px;}\n    .fincms-login-panel{padding:28px;align-items:flex-start;}\n}\n\n@media (max-width:620px){\n    .fincms-login-brand{padding:18px 20px;}\n    .fincms-login-brand:before,.fincms-login-brand:after{display:none;}\n    .fincms-login-brand-inner{display:flex;align-items:center;gap:14px;}\n    .fincms-login-logo{margin:0;gap:10px;}\n    .fincms-login-logo-mark{width:40px;height:40px;gap:4px;}\n    .fincms-login-logo-mark i{border-radius:6px;}\n    .fincms-login-logo-text strong{font-size:28px;letter-spacing:-1px;}\n    .fincms-login-logo-text small{font-size:12px;margin-top:4px;}\n    .fincms-login-brand-copy{margin-left:auto;text-align:right;}\n    .fincms-login-brand-copy h1{font-size:22px;margin:0 0 2px;}\n    .fincms-login-brand-copy p{font-size:12px;line-height:1.3;}\n    .fincms-login-panel{padding:18px 14px 28px;}\n    .fincms-login-card{padding:24px 20px;border-radius:20px;}\n    .fincms-login-card-head{margin-bottom:20px;}\n    .fincms-login-card-head h2{font-size:27px;}\n    .fincms-login-secure{width:38px;height:38px;}\n}\n\n\n/* FinCMS 3.81 - Step 2L5c: login-flow + meerregelige meldingen */\n.fincms-login-page #message_login{\n    width:100%!important;\n    height:auto!important;\n    min-height:52px!important;\n    margin:0 0 20px!important;\n    padding:14px 18px 14px 54px!important;\n    display:none;\n    align-items:center;\n}\n.fincms-login-page #message_login[style*="display: block"],\n.fincms-login-page #message_login[style*="display:block"]{display:flex!important;}\n.fincms-login-page #message_login span{\n    float:none!important;\n    display:block!important;\n    width:100%!important;\n    margin:0!important;\n    padding:0!important;\n    line-height:1.45!important;\n    overflow-wrap:anywhere;\n}\n.fincms-login-page #message_login:before{left:18px;}\n.fincms-login-page #forgot_password_link,\n.fincms-login-page #login_again_link{\n    display:block;\n    text-align:center;\n    color:var(--fin-petrol)!important;\n    font-size:14px;\n    font-weight:700;\n    text-decoration:none!important;\n    cursor:pointer;\n}\n.fincms-login-page #forgot_password_link:hover,\n.fincms-login-page #login_again_link:hover{text-decoration:underline!important;}\n

/* FinCMS 3.81 - Step 2L5d: robuuste meerregelige loginmeldingen */
.fincms-login-page #message_login{
    box-sizing:border-box!important;
    min-height:58px!important;
    height:auto!important;
    padding:15px 20px 15px 62px!important;
    align-items:center!important;
    white-space:normal!important;
    overflow:visible!important;
    word-break:normal!important;
    overflow-wrap:anywhere!important;
}
.fincms-login-page #message_login:before{
    left:18px!important;
    width:30px!important;
    height:30px!important;
    font-size:17px!important;
}


/* FinCMS 3.81 - Step 2L5e: definitieve login message layout */
.fincms-login-page #message_login{
    box-sizing:border-box!important;
    width:100%!important;
    min-height:0!important;
    height:auto!important;
    max-height:none!important;
    padding:15px 20px 15px 62px!important;
    align-items:flex-start!important;
    overflow:visible!important;
    line-height:1.4!important;
}
.fincms-login-page #message_login:before{
    top:15px!important;
    left:18px!important;
    transform:none!important;
}
.fincms-login-page #message_login .fincms-login-message-text{
    display:block!important;
    float:none!important;
    width:100%!important;
    height:auto!important;
    min-height:0!important;
    margin:0!important;
    padding:0!important;
    color:inherit!important;
    font:inherit!important;
    font-weight:700!important;
    line-height:1.4!important;
    white-space:pre-line!important;
    overflow:visible!important;
    overflow-wrap:anywhere!important;
}