/* login-b 
no redirect, all appear in the same page.
*/

.woocommerce-account:has(#customer_login) h1{
    font-size: 24px;
    padding-bottom: clamp(40px,calc(40px + 24 * ((100vw - 640px) / 384)),64px);
}

.woocommerce:has(#customer_login) form .form-row label {
    font-size: 16px;
}

form.woocommerce-ResetPassword button,
.woocommerce-account:has(#customer_login) .form-row > button{
    font-size: 16px;
    color: lab(100 0 0);
    background-color: var(--contrast-lg);
    border-radius: 5px;
    padding: 14px 28px;
    margin-right: 0;
}

form.woocommerce-ResetPassword button:hover,
.woocommerce-account:has(#customer_login) .form-row > button:hover{
    background-color: var(--contrast-lg-a80);
}

@media (max-width:768px){
    form.woocommerce-ResetPassword button{
        width: 100%;
    }
}



/* login */
.woocommerce:has(#customer_login) form.login{
    display: grid;
    grid-template-columns: 1fr 1fr;
    border: 1px solid var(--contrast-lg);
}

.woocommerce:has(#customer_login) form.login > p:nth-child(1),
.woocommerce:has(#customer_login) form.login > p:nth-child(2){
    grid-column: 1 / -1;
}

.woocommerce:has(#customer_login) form.login > p:nth-child(3){
    display: flex;
    flex-direction: column;
}

.woocommerce:has(#customer_login) form.login > p:nth-child(3) input{
    accent-color:  var(--contrast-lg);
}

.woocommerce:has(#customer_login) form.login > p:nth-child(4){
    font-size: 14px;
    text-align: end;
    padding-top: 3px;
    line-height: 32px;
    margin-top: 0;
}

/* lost password */
form.woocommerce-ResetPassword{
    padding: 20px;
    border: 1px solid var(--accent-1);
    border-radius: 5px;
    margin-top: 98.4103px;
}

form.woocommerce-ResetPassword .form-row-first{
    width: 100%;
    margin-bottom: 11.2px;
}

.woocommerce:has(#customer_login) form .form-row input.input-text,
.woocommerce form.login, .woocommerce form.register{
    border: 1px solid var(--accent-1);
}

/* register */
.woocommerce:has(#customer_login) form.register{
    border-color: var(--contrast-lg) 
}

.woocommerce:has(#customer_login) form.register > .woocommerce-privacy-policy-text{
    font-size: 14px;
    margin-bottom: 11.2px;
}

.woocommerce:has(#customer_login) form.register > p:nth-child(2){
    font-size: 14px;
}

.woocommerce:has(#customer_login) form.register > p:nth-child(5){
    width: 50%;
}
.woocommerce:has(#customer_login) form.register > p:nth-child(5) button{
    width: 100%
}

.woocommerce-password-hint,
#password_strength{
    background-color: transparent;
    font-weight: 300;
    font-size: 14px;
}

@media (max-width: 500px) {
main:has(#customer_login){
    padding: 0 16px;
}
.woocommerce:has(#customer_login) .col2-set .col-1 form{
    margin-bottom: 64px;
} 

.woocommerce:has(#customer_login) form{
    padding: 20px 0;   
    border: 0px;
}

.woocommerce:has(#customer_login) form.login > p:nth-child(3),
.woocommerce:has(#customer_login) form.login > p:nth-child(4){
    grid-column: 1 / -1;
}

.woocommerce:has(#customer_login) form.register > p:nth-child(5){
    width: 100%;
}
}