/* Globale stijl instellingen */
body.login {
    background-color: #FFFFFF !important;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100vh;
    position: relative; /* Voegt positionering toe voor absolute positionering van children */
}

/* Container voor het inlogformulier en logo */
.login #login {
    position: absolute; /* Maakt het mogelijk om nauwkeurig te positioneren */
    left: 25%; /* Centreert op de 25%-lijn van het scherm voor grote schermen */
    transform: translateX(-50%); /* Centreert de content gebaseerd op zijn eigen breedte */
    width: 320px; /* Stelt een specifieke breedte in voor het formulier */
}

/* Formulier stijl */
.login form {
    background: #fff;
    border: none;
    box-shadow: 0 1px 15px rgba(0,0,0,.1);
    border-radius: 10px;
    padding: 2em;
}

/* Aangepast logo boven formulier */
.login h1 a {
    background-image: url();
    background-size: contain;
    width: 100%;
    height: 80px;
    margin-bottom: 1em;
    display: block; /* Zorgt voor correcte weergave van de achtergrond */
}

/* Aangepaste achtergrond rechts */
body.login:after {
    content: "";
    position: fixed;
    right: -50%; /* Plaats de afbeelding buiten het zichtbare gebied van de pagina */
    top: 0;
    width: 50%;
    height: 100%;
    background-image: url(https://afifebeachhouse.com/wp-content/uploads/2025/03/Foto-1.png);
    background-size: cover;
    background-position: center center;
    animation: flyIn 1s forwards; /* Voeg de animatie toe */
}

/* Definieer de animatie */
@keyframes flyIn {
    from {
        right: -50%; /* Startpositie buiten het zichtbare gebied */
    }
    to {
        right: 0; /* Eindpositie op de rechterkant van het zichtbare gebied */
    }
}

/* Aanpassing voor kleinere schermen */
@media (max-width: 768px) {
    .login #login {
        left: 50%; /* Centreert op de helft van het scherm op mobiele apparaten */
    }
    body.login:after {
        display: none; /* Verbergt de achtergrondafbeelding */
    }
    .login form {
        margin: 0 auto;
        padding: 2em 1em;
    }
}

/* Taalwisselaar verbergen */
#language-switcher {
    display: none !important;
}

/* Tekstkleur aanpassingen */
.login #nav a, .login #backtoblog a, .login #nav a, .login .message {
    color: #ffffff !important;
}

/* Hover effect voor links */
.login #nav a:hover, .login #backtoblog a:hover {
    color: #0A5AD2 !important;
}

/* Stijl voor de uitlogmelding */
.login .message {
    color: #000B41 !important;
}
/* Formulier stijl */
.login form {
    box-shadow: none; /* Verwijder de doosschaduw */
}