/*
 * hs41_login.css -- HUISSTIJL 4.1: het AANMELDSCHERM (clientadmin/account/login.php). 05-10-2026 (LOGIN_41).
 *
 * Wordt ALTIJD geladen door login.php (los van de schakelaar CA_HUISSTIJL_41) en geldt enkel onder
 * body.ca-hs41-login. Enkel opmaak: geen ids, velden of login-logica gewijzigd.
 * Kleuren = huisstijl41.css (groen #397960 = var(--hs41-petrol), kop #0F3540, tekst #22303A, achtergrond #EEF1F3, rand #DDE2E6).
 * Alle toestanden: form-welcome, form-login, form-logincode, form-website, form-new-password,
 * form-reminder, form-register en de foutmeldingen.
 */

body.ca-hs41-login {
    --l41-petrol: var(--hs41-petrol, #397960);
    --l41-petrol-hover: var(--hs41-petrol-hover, #2C5D4A);
    --l41-petrol-zacht: rgba(105, 184, 153, .18);
    --l41-kop: #0F3540;
    --l41-tekst: #22303A;
    --l41-zacht: #5B6770;
    --l41-bg: #EEF1F3;
    --l41-rand: #DDE2E6;
    --l41-balk: #25292D;
    font-family: 'Helvetica Now Text', Helvetica, Arial, sans-serif;
    font-weight: 300;
    color: var(--l41-tekst);
    background: #1B2126 !important;
    min-height: 100vh;
}

/* Oude look weg: donkere foto, donkere kop, ronde logo, "welcome"-veld, templatenaam */
/* (LOGIN_41_LOOK) achtergrondfoto staat weer aan: zie onderaan */
body.ca-hs41-login #page-container,
body.ca-hs41-login #main-container,
body.ca-hs41-login #page-content { background: transparent !important; min-height: 0 !important; }
body.ca-hs41-login #login-container .loginLogo-wrapper,
body.ca-hs41-login #login-container .login-title small.version_display { display: none !important; }
body.ca-hs41-login #communication_wrapper {
    height: 0 !important; overflow: hidden !important; margin: 0 !important; padding: 0 !important;
}

/* Kaart */
body.ca-hs41-login #login-container {
    /* zelfde centrering als het oude thema (absoluut, los van zijbalk-marges), maar breder en rustiger */
    position: absolute;
    top: 56px;
    left: 0;
    right: 0;
    width: 420px;
    max-width: calc(100% - 32px);
    margin: 0 auto 32px auto !important;
    background: #FFFFFF;
    border: 1px solid var(--l41-rand);
    border-radius: 8px;
    box-shadow: 0 8px 28px rgba(15, 53, 64, .08);
    overflow: hidden;
}
@media (max-width: 480px) {
    body.ca-hs41-login #login-container { top: 16px; width: calc(100% - 32px); }
}

/* Merkbalk = kopbalk van de schil: #25292D met 4px groene onderrand (accent #69b899, zoals --ca-bar-line) */
body.ca-hs41-login .ca41-login-merk {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 0 20px;
    height: 64px;
    background: var(--l41-balk);
    border-bottom: 4px solid var(--hs41-groen, #69b899);
}
body.ca-hs41-login .ca41-login-merk-icoon {
    flex: 0 0 36px;
    width: 36px; height: 36px;
    border-radius: 50%;
    background: #262A2E;
    overflow: hidden;
    display: flex; align-items: center; justify-content: center;
}
body.ca-hs41-login .ca41-login-merk-icoon img { width: 100%; height: 100%; object-fit: cover; }
body.ca-hs41-login .ca41-login-merk-tekst { display: flex; flex-direction: column; line-height: 1.15; }
body.ca-hs41-login .ca41-login-merk-titel { color: #FFFFFF; font-weight: 700; font-size: 16px; letter-spacing: -0.02em; }
body.ca-hs41-login .ca41-login-merk-van { color: #BFC6CC; font-size: 12px; font-weight: 300; }

/* Kop van de kaart (h1 uit de tabel, adres van de website) */
body.ca-hs41-login #login-container .login-title {
    background: #FFFFFF !important;
    padding: 24px 24px 4px;
    text-align: left;
}
body.ca-hs41-login #login-container .login-title h1 {
    color: var(--l41-kop);
    font-size: 22px;
    font-weight: 400;
    letter-spacing: -0.03em;
    margin: 0 0 4px;
}
body.ca-hs41-login #login-container .login-title p,
body.ca-hs41-login #login-container .login-title small { color: var(--l41-zacht); }
body.ca-hs41-login #login-container .login-title p { margin: 0 0 6px; font-size: 13px; }
body.ca-hs41-login #login-container .login-title p strong { font-weight: 400; }
body.ca-hs41-login #login-container .login-title p.ca-login-intro { color: var(--l41-tekst); font-size: 14px; line-height: 1.45; }
body.ca-hs41-login .ca-login-devbadge { background: #E8A317; color: #1E1A10; border-radius: 999px; font-size: 11px; }

/* Blok met de formulieren */
body.ca-hs41-login #login-container > .block {
    background: #FFFFFF;
    border: 0;
    margin: 0;
    padding: 8px 24px 16px;
    box-shadow: none;
}
body.ca-hs41-login #login-container .form-bordered .form-group { border-bottom: 0; padding: 8px 0; }
body.ca-hs41-login #login-container .form-bordered .form-group.form-actions { background: transparent; border-top: 0; }
body.ca-hs41-login #login-container label,
body.ca-hs41-login #login-container .help-block,
body.ca-hs41-login #login-container p,
body.ca-hs41-login #login-container small { color: var(--l41-tekst); }

/* Velden */
body.ca-hs41-login #login-container .form-control {
    border: 1px solid var(--l41-rand);
    border-radius: 4px;
    background: #FFFFFF;
    color: var(--l41-tekst);
    box-shadow: none;
    font-weight: 400;
}
body.ca-hs41-login #login-container .input-group .form-control { border-left: 0; border-radius: 0 4px 4px 0; }
body.ca-hs41-login #login-container .input-group-addon {
    background: #F5F7F8;
    border: 1px solid var(--l41-rand);
    border-right: 0;
    border-radius: 4px 0 0 4px;
    color: var(--l41-zacht);
}
body.ca-hs41-login #login-container .form-control:focus,
body.ca-hs41-login #form-logincode #login-code:focus {
    border-color: var(--l41-petrol) !important;
    box-shadow: 0 0 0 3px var(--l41-petrol-zacht) !important;
    outline: none;
}
body.ca-hs41-login #login-container .input-group:focus-within .input-group-addon { border-color: var(--l41-petrol); color: var(--l41-petrol); }
body.ca-hs41-login #form-logincode #login-code { border: 2px solid var(--l41-rand); border-radius: 4px; color: var(--l41-kop); }

/* Knoppen: alle groen/blauw -> petrol */
body.ca-hs41-login .btn-primary,
body.ca-hs41-login .btn-success {
    background-color: var(--l41-petrol) !important;
    border-color: var(--l41-petrol) !important;
    color: #FFFFFF !important;
    border-radius: 4px;
    font-weight: 700;
    letter-spacing: -0.02em;
    padding: 8px 18px;
    font-size: 14px;
}
body.ca-hs41-login .btn-primary:hover, body.ca-hs41-login .btn-primary:focus, body.ca-hs41-login .btn-primary:active,
body.ca-hs41-login .btn-success:hover, body.ca-hs41-login .btn-success:focus, body.ca-hs41-login .btn-success:active {
    background-color: var(--l41-petrol-hover) !important;
    border-color: var(--l41-petrol-hover) !important;
    color: #FFFFFF !important;
}
body.ca-hs41-login .btn-default { border-color: var(--l41-rand); color: var(--l41-tekst); background: #FFFFFF; }
body.ca-hs41-login .btn-default:hover { border-color: var(--l41-petrol); color: var(--l41-petrol); }

/* Links */
body.ca-hs41-login #login-container a,
body.ca-hs41-login #login-container a small,
body.ca-hs41-login #form-login .ca-eerste-keer a,
body.ca-hs41-login #form-logincode .ca-code-voet a { color: var(--l41-petrol); }
body.ca-hs41-login #login-container a:hover,
body.ca-hs41-login #login-container a:hover small { color: var(--l41-petrol-hover); }
body.ca-hs41-login #form-logincode .ca-code-voet a.ca-wacht { color: var(--l41-zacht); }

/* Schakelaars (onthoud mij, voorwaarden): accentgroen #69b899; vinkjes: knopgroen */
body.ca-hs41-login .switch-primary input:checked + span { background-color: var(--hs41-groen, #69b899) !important; }
body.ca-hs41-login .switch-primary span { border-color: var(--l41-rand); }
body.ca-hs41-login input[type="checkbox"] { accent-color: var(--l41-petrol); }

/* Websitekeuze */
body.ca-hs41-login .ca-websitekaart { border-color: var(--l41-rand); color: var(--l41-tekst); }
body.ca-hs41-login .ca-websitekaart:hover,
body.ca-hs41-login .ca-websitekaart:focus { border-color: var(--l41-petrol); box-shadow: 0 0 0 2px var(--l41-petrol-zacht); }
body.ca-hs41-login .ca-websitekaart .ca-label { background: #E9F4EF; color: var(--l41-petrol); }

/* Meldingen */
body.ca-hs41-login #login-container .alert,
body.ca-hs41-login #login-container > .alert { border-radius: 4px; border-width: 1px; border-style: solid; font-weight: 400; }
body.ca-hs41-login #login-container > .alert { margin: 16px 24px 0; }
body.ca-hs41-login .alert-danger { background: #FBEDEC; border-color: #F0C7C3; color: #8A2A20; }
body.ca-hs41-login .alert-info { background: #E9F3F7; border-color: #C3DDE7; color: var(--l41-kop); }
body.ca-hs41-login #form-welcome-feedback { color: #8A2A20; }
body.ca-hs41-login #login-container #error {
    background: #FBEDEC; border: 1px solid #F0C7C3; border-radius: 4px; padding: 12px 14px; margin: 8px 0 4px;
}
body.ca-hs41-login #login-container #error h3 { color: #8A2A20; font-size: 16px; font-weight: 700; margin: 0 0 4px; }
body.ca-hs41-login #login-container #error h6 { color: var(--l41-zacht); margin: 0 0 6px; text-transform: none; }
body.ca-hs41-login #login-container #error p { color: #5A1D16; margin: 0; }
body.ca-hs41-login label.error,
body.ca-hs41-login .has-error .help-block { color: #B03A2E !important; }
body.ca-hs41-login .has-error .form-control,
body.ca-hs41-login .has-error .input-group-addon { border-color: #D9786D !important; }

/* Spinners */
body.ca-hs41-login .spinner, body.ca-hs41-login .spinner-code, body.ca-hs41-login .spinner-website,
body.ca-hs41-login .spinner-new-password, body.ca-hs41-login .spinner-reminder { color: var(--l41-petrol); padding: 6px 0; }

/* Voet: rustig, zonder versie */
body.ca-hs41-login #login-container > footer {
    background: #F7F9FA;
    border-top: 1px solid var(--l41-rand);
    padding: 12px 24px;
    margin: 0;
    color: var(--l41-zacht) !important;
    text-align: center;
}
body.ca-hs41-login #login-container > footer small { color: var(--l41-zacht); font-size: 12px; }

/* Modal voorwaarden */
body.ca-hs41-login .modal-content { border-radius: 8px; border: 1px solid var(--l41-rand); }
body.ca-hs41-login .modal-title { color: var(--l41-kop); font-weight: 700; }


/* =====================================================================================================
 * LOGIN_41_LOOK (05-10-2026): terug in de huisstijl van MatAtWork. Enkel opmaak.
 * - achtergrondfoto van het oude aanmeldscherm (img.full-bg, login_full_bg.jpg) over de volle pagina,
 *   met een lichte donkere laag zodat de kaart leesbaar blijft;
 * - Helvetica Now Text LIGHT (300) als standaard; vet met strakke letterafstand;
 * - logo MatAtWork in WIT in een kleinere ronde cirkel bovenaan de kaart (svg ingebed: geen extra bestand nodig).
 * ===================================================================================================== */
@font-face { font-family: 'Helvetica Now Text'; font-style: normal; font-weight: 300; font-display: swap;
    src: url('fonts/HelveticaNowText-Light.woff2') format('woff2'); }
@font-face { font-family: 'Helvetica Now Text'; font-style: normal; font-weight: 400 500; font-display: swap;
    src: url('fonts/HelveticaNowText-Regular.woff2') format('woff2'); }
@font-face { font-family: 'Helvetica Now Text'; font-style: normal; font-weight: 600 800; font-display: swap;
    src: url('fonts/HelveticaNowText-Bold.woff2') format('woff2'); }

body.ca-hs41-login img.full-bg {
    display: block !important;
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    object-fit: cover; z-index: 0;
}
body.ca-hs41-login::before {
    content: ""; position: fixed; inset: 0; z-index: 1; pointer-events: none;
    background: linear-gradient(180deg, rgba(15, 20, 24, .45) 0%, rgba(15, 20, 24, .60) 100%);
}
body.ca-hs41-login #login-container { z-index: 2; }

/* Light als standaard voor alle tekst op het aanmeldscherm */
body.ca-hs41-login,
body.ca-hs41-login #login-container,
body.ca-hs41-login #login-container p,
body.ca-hs41-login #login-container label,
body.ca-hs41-login #login-container a,
body.ca-hs41-login #login-container small,
body.ca-hs41-login #login-container input,
body.ca-hs41-login #login-container .form-control,
body.ca-hs41-login #login-container .btn,
body.ca-hs41-login #login-container .alert {
    font-family: 'Helvetica Now Text', Helvetica, Arial, sans-serif !important;
    font-weight: 300;
}
body.ca-hs41-login #login-container h1,
body.ca-hs41-login #login-container strong,
body.ca-hs41-login #login-container b,
body.ca-hs41-login .ca41-login-merk-titel {
    font-weight: 700 !important;
    letter-spacing: -0.03em;
}
body.ca-hs41-login #login-container .btn { font-weight: 500; letter-spacing: -0.02em; }

/* Kaart iets lichter op de foto */
body.ca-hs41-login #login-container {
    top: 72px;
    background: rgba(255, 255, 255, .97);
    border: 0;
    border-radius: 10px;
    box-shadow: 0 18px 48px rgba(0, 0, 0, .35);
    overflow: visible;
}
@media (max-width: 480px) {
    body.ca-hs41-login #login-container { top: 56px; }
}

/* Merk bovenaan: wit logo in een ronde cirkel die over de bovenrand van de kaart valt */
body.ca-hs41-login .ca41-login-merk {
    flex-direction: column;
    justify-content: flex-start;
    gap: 2px;
    height: auto;
    padding: 0 20px 14px;
    background: transparent;
    border-bottom: 1px solid var(--l41-rand);
    text-align: center;
}
body.ca-hs41-login .ca41-login-merk-icoon {
    flex: 0 0 auto;
    width: 64px; height: 64px;
    margin: -34px auto 8px;
    border-radius: 50%;
    border: 3px solid #FFFFFF;
    box-shadow: 0 6px 18px rgba(0, 0, 0, .25);
    background: #25292D url("data:image/svg+xml,%3Csvg version=%221.1%22 id=%22Layer_1%22 xmlns=%22http://www.w3.org/2000/svg%22 xmlns:xlink=%22http://www.w3.org/1999/xlink%22 x=%220px%22 y=%220px%22 viewBox=%220 0 69.8 34.9%22 style=%22enable-background:new 0 0 69.8 34.9;%22 xml:space=%22preserve%22%3E %3Cstyle type=%22text/css%22%3E .st0%7Bfill:%23FFFFFF;%7D %3C/style%3E %3Cpath class=%22st0%22 d=%22M48.4,0.3l-1,17.1L46.6,0.3h-3.9l-1,17.1L40.9,0.3H17.7v14.5l6.9,2.5l-6.9,2.9v14.4h15.5l0.2-6.4h1.7l0.2,6.4 h8.2l1-14.8l1.1,14.8h4.7l1.7-34.3H48.4z M33.4,15.6l0.8-7.9l0.8,7.9H33.4z%22/%3E %3C/svg%3E") no-repeat center / 62% auto;
}
body.ca-hs41-login .ca41-login-merk-icoon img { display: none !important; }
body.ca-hs41-login .ca41-login-merk-tekst { align-items: center; }
body.ca-hs41-login .ca41-login-merk-titel { color: var(--l41-kop); font-size: 20px; }
body.ca-hs41-login .ca41-login-merk-van { color: var(--l41-zacht); font-size: 12px; letter-spacing: .02em; }


/* =====================================================================================================
 * LOGIN_V2 (06-10-2026): verfijnd aanmeldscherm. Enkel opmaak (+ kleine markup in login.php: icoon boven de
 * velden, labels voor schermlezers, links onder elkaar). Ids, namen, formulieren en login.js ongewijzigd.
 * - Kaart terug DONKER met lichte tekst, zoals het oorspronkelijke thema (main.css: #login-container
 *   .login-title { background: rgba(0,0,0,.6) }, h1 #fff, p/small #eee).
 * - Alles gecentreerd; velden enkel met een dunne onderlijn; één icoon boven elke groep velden.
 * - Groen (var(--hs41-petrol), #397960) blijft het accent (knoppen, focus); Helvetica Now Text Light 300 als basis,
 *   vet = Bold 700. Letterafstand (beslist 06-10): gewone tekst -0.03em, vet -0.02em.
 * ===================================================================================================== */
body.ca-hs41-login {
    --v2-kaart: rgba(12, 16, 19, .78);
    --v2-tekst: #F2F4F5;
    --v2-zacht: rgba(242, 244, 245, .66);
    --v2-lijn: rgba(255, 255, 255, .32);
    --v2-lijn-zacht: rgba(255, 255, 255, .12);
    --v2-fout: #FF9C8F;
    --v2-fout-bg: rgba(214, 69, 50, .16);
    --v2-fout-lijn: #E5735F;
    letter-spacing: -0.03em;
}
/* foto blijft; de donkere laag erover iets lichter, de kaart draagt nu het contrast */
body.ca-hs41-login::before { background: linear-gradient(180deg, rgba(15, 20, 24, .25) 0%, rgba(15, 20, 24, .45) 100%); }

/* ---- Kaart ---- */
body.ca-hs41-login #login-container {
    width: 400px;
    background: var(--v2-kaart);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    border: 1px solid rgba(255, 255, 255, .08);
    border-radius: 10px;
    box-shadow: 0 18px 48px rgba(0, 0, 0, .40);
    color: var(--v2-tekst);
    text-align: center;
}
body.ca-hs41-login #login-container,
body.ca-hs41-login #login-container p,
body.ca-hs41-login #login-container label,
body.ca-hs41-login #login-container a,
body.ca-hs41-login #login-container small,
body.ca-hs41-login #login-container input,
body.ca-hs41-login #login-container .form-control,
body.ca-hs41-login #login-container .alert { letter-spacing: -0.03em; }
body.ca-hs41-login #login-container h1,
body.ca-hs41-login #login-container strong,
body.ca-hs41-login #login-container b,
body.ca-hs41-login #login-container .btn,
body.ca-hs41-login .ca41-login-merk-titel { font-weight: 700 !important; letter-spacing: -0.02em; }

/* ---- Kop: logo, productnaam, websitenaam ---- */
body.ca-hs41-login .ca41-login-merk { border-bottom: 0; padding: 0 24px 4px; }
body.ca-hs41-login .ca41-login-merk-icoon { border: 2px solid rgba(255, 255, 255, .9); box-shadow: 0 6px 18px rgba(0, 0, 0, .35); }
body.ca-hs41-login .ca41-login-merk-titel { color: #FFFFFF; font-size: 20px; }
body.ca-hs41-login .ca41-login-merk-van { color: var(--v2-zacht); letter-spacing: -0.03em; }
body.ca-hs41-login #login-container .login-title { background: transparent !important; padding: 10px 28px 0; text-align: center; }
body.ca-hs41-login #login-container .login-title h1 {
    color: #FFFFFF; font-size: 17px; margin: 14px 0 2px; text-align: center; word-break: break-word;
}
body.ca-hs41-login #login-container .login-title h1::before {
    content: ""; display: block; width: 32px; height: 1px; margin: 0 auto 14px; background: var(--v2-lijn);
}
body.ca-hs41-login #login-container .login-title p,
body.ca-hs41-login #login-container .login-title small { color: var(--v2-zacht); text-align: center; }
body.ca-hs41-login #login-container .login-title p strong { font-weight: 300 !important; letter-spacing: -0.03em; }
body.ca-hs41-login #login-container .login-title p.ca-login-intro { color: var(--v2-zacht); font-size: 14px; margin-top: 12px; }

/* ---- Blok met de formulieren ---- */
body.ca-hs41-login #login-container > .block { background: transparent; padding: 4px 32px 18px; }
body.ca-hs41-login #login-container p,
body.ca-hs41-login #login-container small,
body.ca-hs41-login #login-container label,
body.ca-hs41-login #login-container .help-block { color: var(--v2-zacht); }
body.ca-hs41-login #login-container .form-bordered .form-group { padding: 6px 0; margin-left: 0; margin-right: 0; }
body.ca-hs41-login #login-container .form-group > [class*="col-"] { padding-left: 0; padding-right: 0; }
body.ca-hs41-login #form-register .form-group > .col-xs-6:first-child { padding-right: 10px; }
body.ca-hs41-login #form-register .form-group > .col-xs-6:last-child { padding-left: 10px; }
@media (max-width: 380px) {
    body.ca-hs41-login #form-register .form-group > .col-xs-6 { width: 100%; padding: 0 !important; }
    body.ca-hs41-login #form-register .form-group > .col-xs-6 + .col-xs-6 { margin-top: 12px; }
}

/* één icoon boven de groep velden */
body.ca-hs41-login .ca-veld-icoon { text-align: center; margin: 14px 0 2px; color: #FFFFFF; font-size: 20px; line-height: 1; opacity: .9; }
body.ca-hs41-login .ca-veld-icoon .gi { font-size: 20px; }

/* ---- Velden: enkel een dunne onderlijn ---- */
body.ca-hs41-login #login-container .input-group { display: block; width: 100%; }
body.ca-hs41-login #login-container .input-group-addon { display: none !important; }
body.ca-hs41-login #login-container .form-control,
body.ca-hs41-login #login-container .input-group .form-control,
body.ca-hs41-login #form-logincode #login-code {
    display: block; width: 100%; float: none;
    height: 46px;
    padding: 8px 4px;
    background: transparent !important;
    border: 0 !important;
    border-bottom: 1px solid var(--v2-lijn) !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    color: #FFFFFF !important;
    font-size: 16px;
    font-weight: 300;
    text-align: center;
    -webkit-text-fill-color: #FFFFFF;
    transition: border-color .15s ease, box-shadow .15s ease;
}
body.ca-hs41-login #login-container .form-control::placeholder { color: rgba(242, 244, 245, .55); opacity: 1; text-align: center; }
body.ca-hs41-login #login-container .form-control:hover { border-bottom-color: rgba(255, 255, 255, .55) !important; }
/* focus: onderlijn wordt dikker en wit, met petrol eronder (geen kader) */
body.ca-hs41-login #login-container .form-control:focus,
body.ca-hs41-login #form-logincode #login-code:focus {
    outline: none;
    border-bottom: 1px solid #FFFFFF !important;
    box-shadow: 0 1px 0 0 #FFFFFF, 0 3px 0 0 var(--l41-petrol) !important;
}
/* automatisch invullen (Chrome) mag geen witte/gele/grijze balk geven.
   LOGIN_V2_FIX1 (06-10-2026): ook bij hover/focus/active (daar won de focus- of basisregel en kwam de
   Chrome-kleur terug), vulling in de kaartkleur (--v2-kaart zonder transparantie) i.p.v. een lichter grijs,
   en de onderlijn blijft (border-bottom ligt buiten de inset-schaduw). De lange transition houdt de
   Chrome-achtergrondkleur zelf tegen; de inset-schaduw is het vangnet. */
body.ca-hs41-login #login-container .form-control:-webkit-autofill,
body.ca-hs41-login #login-container .form-control:-webkit-autofill:hover,
body.ca-hs41-login #login-container .form-control:-webkit-autofill:active {
    -webkit-box-shadow: 0 0 0 1000px rgb(12, 16, 19) inset !important;
    box-shadow: 0 0 0 1000px rgb(12, 16, 19) inset !important;
    -webkit-text-fill-color: var(--v2-tekst) !important;
    caret-color: #FFFFFF;
    border-bottom: 1px solid var(--v2-lijn) !important;
    border-radius: 0 !important;
    transition: background-color 600000s ease 0s, color 600000s ease 0s, border-color .15s ease;
}
body.ca-hs41-login #login-container .form-control:-webkit-autofill:hover { border-bottom-color: rgba(255, 255, 255, .55) !important; }
body.ca-hs41-login #login-container .form-control:-webkit-autofill:focus {
    -webkit-box-shadow: 0 0 0 1000px rgb(12, 16, 19) inset, 0 1px 0 0 #FFFFFF, 0 3px 0 0 var(--l41-petrol) !important;
    box-shadow: 0 0 0 1000px rgb(12, 16, 19) inset, 0 1px 0 0 #FFFFFF, 0 3px 0 0 var(--l41-petrol) !important;
    -webkit-text-fill-color: #FFFFFF !important;
    caret-color: #FFFFFF;
    border-bottom: 1px solid #FFFFFF !important;
    transition: background-color 600000s ease 0s, color 600000s ease 0s, border-color .15s ease;
}
/* inlogcode: zelfde onderlijn, grotere cijfers */
body.ca-hs41-login #form-logincode #login-code {
    height: 58px; font-family: Menlo, Consolas, monospace; font-size: 28px; font-weight: 400;
    letter-spacing: .4em; text-indent: .4em;
}
body.ca-hs41-login #form-logincode #login-code::placeholder { color: rgba(242, 244, 245, .35); letter-spacing: .4em; }

/* ---- Foutstatussen ---- */
body.ca-hs41-login #login-container .has-error .form-control,
body.ca-hs41-login #login-container .form-control.error,
body.ca-hs41-login #login-container .form-control[aria-invalid="true"] {
    border-bottom: 2px solid var(--v2-fout-lijn) !important;
}
body.ca-hs41-login #login-container .has-error .form-control:focus { box-shadow: 0 3px 0 0 var(--v2-fout-lijn) !important; }
body.ca-hs41-login #login-container .help-block.animation-slideDown,
body.ca-hs41-login #login-container div.help-block,
body.ca-hs41-login #login-container label.error,
body.ca-hs41-login #login-container .has-error .help-block {
    color: var(--v2-fout) !important; font-size: 13px; text-align: center; margin: 6px 0 0;
}
body.ca-hs41-login #login-container .alert {
    position: static; float: none; clear: both;
    margin: 10px 0 4px;
    padding: 10px 12px;
    border: 0;
    border-radius: 4px;
    text-align: center;
    font-size: 14px;
    line-height: 1.45;
    box-shadow: none;
}
body.ca-hs41-login #login-container .alert-danger {
    background: var(--v2-fout-bg) !important;
    border-left: 3px solid var(--v2-fout-lijn) !important;
    color: #FFE3DF !important;
}
body.ca-hs41-login #login-container .alert-info,
body.ca-hs41-login #login-container .alert-success {
    background: rgba(255, 255, 255, .07) !important;
    border-left: 3px solid rgba(255, 255, 255, .35) !important;
    color: var(--v2-tekst) !important;
}
body.ca-hs41-login #login-container > .alert { margin: 12px 32px 0; }
body.ca-hs41-login #login-container .login-title .ca-login-melding { margin: 12px 0 0; }
body.ca-hs41-login #form-welcome-feedback { color: var(--v2-fout) !important; text-align: center; float: none; width: 100%; }
body.ca-hs41-login #login-container #error {
    background: var(--v2-fout-bg); border: 0; border-left: 3px solid var(--v2-fout-lijn); border-radius: 4px;
    padding: 10px 12px; margin: 10px 0 4px; text-align: center;
}
body.ca-hs41-login #login-container #error h3 { color: #FFE3DF; font-size: 15px; margin: 0 0 4px; }
body.ca-hs41-login #login-container #error h6 { display: none; }
body.ca-hs41-login #login-container #error p { color: #FFE3DF; }

/* ---- Knoppen: gecentreerd, petrol, zonder icoon ---- */
body.ca-hs41-login #login-container .form-group.form-actions > [class*="col-"] {
    width: 100%; float: none; text-align: center !important;
}
body.ca-hs41-login #login-container .form-actions { display: flex; flex-direction: column; align-items: stretch; }
/* volgorde = volgorde in de HTML (ook voor Tab): onthoud mij, dan de knop, dan de melding */
body.ca-hs41-login #form-login .form-actions > .col-xs-4 { margin: 2px 0 4px; }
body.ca-hs41-login #login-container .btn-primary,
body.ca-hs41-login #login-container .btn-success {
    min-width: 200px; min-height: 44px; padding: 10px 28px;
    font-size: 15px; border-radius: 4px; margin-top: 6px;
}
body.ca-hs41-login #login-container .btn-primary .fa,
body.ca-hs41-login #login-container .btn-success .fa { display: none; }
body.ca-hs41-login #login-container .btn-default {
    background: transparent; color: var(--v2-tekst); border: 1px solid var(--v2-lijn); letter-spacing: -0.02em;
}
body.ca-hs41-login #login-container .btn-default:hover { border-color: #FFFFFF; color: #FFFFFF; }
body.ca-hs41-login #login-container .btn:focus-visible,
body.ca-hs41-login #login-container a:focus-visible,
body.ca-hs41-login #login-container input[type="checkbox"]:focus-visible + span {
    outline: 2px solid #FFFFFF !important; outline-offset: 3px;
}
body.ca-hs41-login #login-container .btn:focus { outline: 2px solid #FFFFFF; outline-offset: 3px; }

/* Onthoud mij: schakelaar + zichtbare tekst, gecentreerd */
body.ca-hs41-login #form-login .form-actions > .col-xs-4 { display: flex; align-items: center; justify-content: center; gap: 8px; }
body.ca-hs41-login #form-login .switch { margin: 0; }
body.ca-hs41-login #form-login .switch span { background: rgba(255, 255, 255, .12); border-color: var(--v2-lijn); }
body.ca-hs41-login .ca-onthoud-tekst { margin: 0; font-size: 13px; font-weight: 300; color: var(--v2-zacht); cursor: pointer; }
body.ca-hs41-login #form-logincode .checkbox-inline { padding-left: 0; display: inline-flex; align-items: center; gap: 8px; font-size: 13px; }
body.ca-hs41-login #form-logincode .checkbox-inline input[type="checkbox"] { position: static; margin: 0; }
body.ca-hs41-login #form-logincode .form-group:nth-of-type(2) > div { text-align: center; }

/* ---- Links: elk op een eigen regel, gecentreerd, rustig ---- */
body.ca-hs41-login #login-container .ca-login-links { display: flex; flex-direction: column; align-items: center; gap: 2px; padding-top: 4px; }
body.ca-hs41-login #login-container .ca-login-links a,
body.ca-hs41-login #login-container .ca-login-links .ca-eerste-keer { margin: 0; }
body.ca-hs41-login #login-container a,
body.ca-hs41-login #login-container a small,
body.ca-hs41-login #form-login .ca-eerste-keer a,
body.ca-hs41-login #form-logincode .ca-code-voet a {
    color: var(--v2-tekst) !important;
    text-decoration: none;
}
body.ca-hs41-login #login-container .ca-login-links a {
    display: inline-block; padding: 6px 4px; min-height: 32px; font-size: 14px;
    border-bottom: 1px solid transparent;
}
body.ca-hs41-login #login-container .ca-login-links a small { font-size: 14px; }
body.ca-hs41-login #login-container .ca-login-links a:hover small,
body.ca-hs41-login #login-container .ca-login-links a:hover { color: #FFFFFF !important; text-decoration: underline; text-underline-offset: 4px; }
body.ca-hs41-login #form-login .ca-eerste-keer a { padding: 6px 4px; min-height: 32px; font-size: 14px; text-decoration: none; }
body.ca-hs41-login #form-logincode .ca-code-voet a.ca-wacht,
body.ca-hs41-login #form-logincode .ca-code-voet a.ca-wacht small { color: var(--v2-zacht) !important; }

/* ---- Uitleg: kort en rustig ---- */
body.ca-hs41-login #login-container .ca-code-intro,
body.ca-hs41-login #login-container .ca-form-uitleg,
body.ca-hs41-login #form-new-password .form-group p,
body.ca-hs41-login #form-register > p.ca-login-intro { color: var(--v2-tekst); font-size: 14px; text-align: center; margin: 0 0 6px; }
body.ca-hs41-login #login-container .ca-code-uitleg { color: var(--v2-zacht); font-size: 13px; text-align: center; margin: 4px 0 0; }
body.ca-hs41-login #form-new-password small { display: block; text-align: center; margin-top: 6px; }
body.ca-hs41-login #form-new-password .form-group > div > div[style] { text-align: center; }

/* Websitekeuze (enkel met login V2 persoon) */
body.ca-hs41-login .ca-websitekaart { background: rgba(255, 255, 255, .06); border-color: var(--v2-lijn-zacht); color: var(--v2-tekst); text-align: center; }
body.ca-hs41-login .ca-websitekaart small { color: var(--v2-zacht); }

/* Spinners en voet */
body.ca-hs41-login .spinner, body.ca-hs41-login .spinner-code, body.ca-hs41-login .spinner-website,
body.ca-hs41-login .spinner-new-password, body.ca-hs41-login .spinner-reminder { color: var(--v2-tekst); }
body.ca-hs41-login #login-container > footer {
    background: transparent; border-top: 1px solid var(--v2-lijn-zacht); padding: 12px 24px; border-radius: 0 0 10px 10px;
}
body.ca-hs41-login #login-container > footer small { color: rgba(242, 244, 245, .5); }
body.ca-hs41-login .ca-login-devbadge { letter-spacing: 0; }

@media (max-width: 480px) {
    body.ca-hs41-login #login-container { top: 52px; width: calc(100% - 32px); }
    body.ca-hs41-login #login-container > .block { padding: 4px 20px 16px; }
    body.ca-hs41-login #login-container .login-title { padding: 8px 20px 0; }
}

/* LOGIN_V2: achtergrondfoto ook onder 1280px volledig (main.css zet daar left:50% + margin-left:-640px,
   wat samen met left:0 hierboven een grijze strook rechts gaf op tablet en gsm). */
body.ca-hs41-login img.full-bg { left: 0 !important; margin-left: 0 !important; min-width: 0 !important; min-height: 0 !important; }
/* LOGIN_V2: schakelaar "Onthoud mij" -- main.css (2de .switch-regel) maakt hem 30px breed en verbergt het vinkje
   (display:none = niet bereikbaar met Tab). Hier: volle maat en bereikbaar met het toetsenbord. */
body.ca-hs41-login #form-login .switch { width: auto; height: auto; float: none; margin: 0; }
body.ca-hs41-login #form-login .switch input {
    display: block; position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; z-index: 1;
}
body.ca-hs41-login #form-login .switch input:focus-visible + span { outline: 2px solid #FFFFFF; outline-offset: 3px; }

/* LOGIN_V2_FIX1 (06-10-2026): welkomscherm (#form-welcome) -- de links onderaan altijd elk op een eigen regel,
   gecentreerd, zonder scheidingsteken; zelfde uitzicht als de andere schermen. Enkel opmaak. */
body.ca-hs41-login #form-welcome .ca-login-links {
    display: flex !important; flex-direction: column !important; align-items: center; justify-content: center;
    gap: 2px; float: none; width: 100%; text-align: center;
}
body.ca-hs41-login #form-welcome .ca-login-links a { display: block; margin: 0 !important; text-align: center; }
body.ca-hs41-login #form-welcome .ca-login-links a::before,
body.ca-hs41-login #form-welcome .ca-login-links a::after { content: none !important; }