/* My account */
.wp-site-blocks main {
    padding-top: 140px;

    h1.wp-block-post-title {
        display: none !important;
    } 
}

.woocommerce-form-login {
    a {
        color: var(--wp--preset--color--primary);
    }
}

.woocommerce-form__label-for-checkbox {
    margin-top: 10px !important;
}

.woocommerce-order-details .order-actions-button,
.woocommerce-ResetPassword button,
.woocommerce-form-login__submit {
    background-color: var(--wp--preset--color--primary);
    color: white;
    border-radius: 64px;
}

.password-input {
    margin-bottom: 32px;
}

.woocommerce-MyAccount-navigation {
    li {
        a {
            color: var(--wp--preset--color--dark-text);
            font-weight: 600;
        }

        &.is-active a {
            color: var(--wp--preset--color--primary);
            text-decoration: none !important;
        }
    }
}

.woocommerce-MyAccount-content {
    a {
        color: var(--wp--preset--color--primary);
    }

    button[type="submit"] {
        margin-top: 16px;
        border-radius: 48px;
    }
}

.woocommerce-orders-table__cell.woocommerce-orders-table__cell-order-actions {
    .woocommerce-button {
        color: white;
        border-radius: 64px;
    }
}

.addresses {
    .woocommerce-column__title {
        font-size: var(--wp--preset--font-size--h-6) !important;
    }   
}

/* LOGIN PAGE */
.woocommerce {
    max-width: 100% !important;
    padding-left: clamp(24px, 4.17vw, 80px);
    padding-right: clamp(24px, 4.17vw, 80px);
}

#customer_login {
    padding-bottom: 32px;

    h2 {
        font-weight: 600;
    }

    .login, .register {
        border: none;
        padding: 0;

        .woocommerce-form-login__submit,
        .woocommerce-form-register__submit {
            border-radius: 10px;
            width: 100%;
        }
    }

    .u-column1,
    .u-column2 {
        border-radius: 24px;
        border: none;
        padding: 24px;
        width: fit-content;
        margin-bottom: 32px;
    }

    .u-column1 {
        background-color: var(--wp--preset--color--white-text);
    }

    .u-column2  {
        background-color: var(--wp--preset--color--dark-text);

        h2 {
            color: var(--wp--preset--color--white-text);
        }

        .register__advice {
            color: var(--wp--preset--color--white-text);

            p {
                display: flex;
                align-items: center;
                gap: 10px;
                font-size: 14px;
            }
        }
    }

    .login {

        label {
            margin: 0;
        }

        input {
            background-color: rgba(242, 242, 242, 1);
            border-color: rgba(210, 210, 210, 1);
            border-radius: 32px;
        }

        .password-input {
            margin-bottom: 0;
        }

        .woocommerce-form-login__submit {
            background-color: var(--wp--preset--color--dark-text);
            border-radius: 32px;
        }

        .lost_password {
            padding-bottom: 24px;
            border-bottom: 1px solid rgba(210, 210, 210, 1);
        }
    }

    .register {
        color: var(--wp--preset--color--white-text);

        input {
            background-color: rgba(242, 242, 242, 1);
            border-color: rgba(210, 210, 210, 1);
            border-radius: 32px;
        }
    
        a {
            color: var(--wp--preset--color--white-text);
        }

        .woocommerce-form-register__submit {
            background-color: var(--wp--preset--color--primary);
            border-radius: 32px;
        }
    
        & > p:last-child {
            padding-bottom: 24px;
            border-bottom: 1px solid var(--wp--preset--color--white-text);
        }
    }

    .switch-rememberme {
        display: flex;
        align-items: center;
        gap: 10px;
        cursor: pointer;
        user-select: none;
        margin-top: 0 !important;
        margin-bottom: 24px !important;
    }

    .switch-rememberme input {
        display: none;
    }

    .switch-rememberme .slider {
        width: 40px;
        height: 20px;
        background-color: #ccc;
        border-radius: 20px;
        position: relative;
        transition: background-color 0.3s;
    }

    .switch-rememberme .slider::before {
        content: "";
        position: absolute;
        width: 16px;
        height: 16px;
        border-radius: 50%;
        background-color: white;
        top: 2px;
        left: 2px;
        transition: transform 0.3s;
    }

    .switch-rememberme input:checked + .slider {
        background-color: var(--wp--preset--color--primary);
    }

    .switch-rememberme input:checked + .slider::before {
        transform: translateX(20px);
    }

    .switch-rememberme .label-text {
        font-size: 14px;
    }
}


@media only screen and (min-width: 768px) {
    #customer_login {
        padding-top: 64px;
        display: flex;
        flex-direction: row;
        gap: 32px;
        justify-content: center;

        .u-column1,
        .u-column2 {
            width: 300px !important;
        }
    }

}


@media only screen and (max-width: 1100px) {

    .wp-site-blocks main {
        padding-top: 64px;
        /* padding-left: 24px;
        padding-right: 24px;
        padding-bottom: 32px; */
    }

    .woocommerce-account main .woocommerce {
        max-width: 100% !important;
    }

    .woocommerce-MyAccount-navigation,
    .woocommerce-MyAccount-content {
        width: 100% !important;
        max-width: 100% !important;
    }
    
    .woocommerce-orders-table__cell.woocommerce-orders-table__cell-order-actions {
        .woocommerce-button {
            display: inline-block !important;
            color: white;
            border-radius: 64px;
        }
    }

    .woocommerce-customer-details {
        .woocommerce-column--2 {
            h2 {
                padding-top: 32px;
            }
        }
    }

    .wp-site-blocks main {
        padding-top: 160px;
        padding-bottom: 64px;
    }
}


@media only screen and (min-width: 1100px) {
    #customer_login {
        padding-top: 0;
        padding-bottom: 96px;
        display: flex;
        flex-direction: row;
        gap: 32px;
        justify-content: center;

        .u-column1,
        .u-column2 {
            width: 100% !important;
            padding: 2em 4em;
        }
    }

}

@media only screen and (min-width: 1500px) {
    #customer_login {
        .u-column1,
        .u-column2 {
            padding: 3em 8em;
        }
    }
}

@media only screen and (max-width: 768px) {
    #customer_login {
        flex-direction: column;

        .u-column1, .u-column2 {
            width: calc(100% - 2 * clamp(24px, 4.17vw, 80px)) !important;
        }
    }
}

@media only screen and (max-width: 576px) {
    #customer_login {
        padding-top: 32px;
    }

    
    .wp-site-blocks main {
        padding-top: 130px;
        padding-bottom: 64px;
    }

}