:root {
    --cpx-login-toggle-speed: 0.4s;
    --cpx-login-toggle-easing: cubic-bezier(0.4, 0, 0.2, 1);
    --cpx-login-toggle-link-color: inherit;
}

/* Container: gebruik grid zodat beide kolommen dezelfde cel bezetten */
#customer_login[data-cpx-view] {
    display: grid;
    grid-template-columns: 1fr;

    overflow: hidden;
}

/* Voorkom flits: verberg registratie-kolom totdat JS het overneemt */
#customer_login .u-column2 {
    opacity: 0;

    pointer-events: none;
}

#customer_login[data-cpx-view] .u-column1,
#customer_login[data-cpx-view] .u-column2 {
    grid-column: 1;
    grid-row: 1;

    width: 100%;

    transition: opacity var(--cpx-login-toggle-speed) var(--cpx-login-toggle-easing),
        transform var(--cpx-login-toggle-speed) var(--cpx-login-toggle-easing);
}

/* Login zichtbaar (standaard) */
#customer_login[data-cpx-view="login"] .u-column1 {
    opacity: 1;
    transform: translateX(0);

    pointer-events: auto;
}

#customer_login[data-cpx-view="login"] .u-column2 {
    opacity: 0;
    transform: translateX(40px);

    pointer-events: none;
}

/* Registratie zichtbaar */
#customer_login[data-cpx-view="register"] .u-column1 {
    opacity: 0;
    transform: translateX(-40px);

    pointer-events: none;
}

#customer_login[data-cpx-view="register"] .u-column2 {
    opacity: 1;
    transform: translateX(0);

    pointer-events: auto;
}

/* Toggle links */
.cpx-login-toggle__switch {
    margin-top: 1em;

    text-align: center;
}

.cpx-login-toggle__link {
    color: var(--cpx-login-toggle-link-color);

    text-decoration: underline;
    cursor: pointer;
}

.cpx-login-toggle__link:hover {
    text-decoration: none;
}

@media screen and (min-width: 768px) {

    .woocommerce-form-login,
    .woocommerce-form-register,
    form.woocommerce-ResetPassword {
        width: 500px;
        max-width: 100%;
        margin-left: auto !important;
        margin-right: auto !important;
    }
}

#customer_login {
    h2 {
        text-align: center;
    }

    .woocommerce-form-login__rememberme {
        width: 100%;
    }

    .lost_password a {
        font-size: 16px !important;
        font-family: var(--e-global-typography-text-font-family), Sans-serif;
        font-size: var(--e-global-typography-text-font-size);
        font-weight: var(--e-global-typography-text-font-weight);
        line-height: var(--e-global-typography-text-line-height);
        transition: color .3s ease;
    }
}