/* ===========================
   OLAPETTI AUTH PAGE
=========================== */

body{
    background:linear-gradient(180deg,#fafaf7,#ffffff);
}

.woocommerce-account .site-main,
.page-template-default .site-main{
    background:linear-gradient(180deg,#fafaf7,#ffffff);
}

/* Main Wrapper */

.ol-auth-wrapper{

    max-width:1200px;
    width:100%;

    margin:70px auto;

    display:flex;

    align-items:center;

    justify-content:center;

    gap:40px;

    padding:20px;

}

/* ===========================
   LEFT SIDE
=========================== */

.ol-auth-left{

    width:45%;
     max-width: 500px;
    text-align:left;

}

.ol-logo{

    width:320px;

    margin-bottom:40px;

}

.ol-auth-left h2{

    font-size:48px;

    line-height:1.2;

    color:#2d2d2d;

    margin-bottom:18px;

    font-weight:700;

}

.subtitle{

    font-size:22px;

    color:#7fa83b;

    font-weight:600;

    margin-bottom:20px;

}

.description{

    font-size:17px;

    line-height:30px;

    color:#666;

    margin-bottom:35px;

}

.feature-list{

    list-style:none;

    padding:0;

    margin:0;

}

.feature-list li{

    display:flex;

    align-items:center;

    gap:12px;

    font-size:18px;

    margin-bottom:18px;

    color:#333;

}

.feature-list i{

    color:#8DBA3F;

    font-size:20px;

}

/* ===========================
   RIGHT SIDE
=========================== */

.ol-auth-right{

    width:470px;
    min-height:560px;
    display:flex;
    align-items:center;
    justify-content:center;

    background:#fff;

    border-radius:22px;

    padding:45px;

    box-shadow:
        0 20px 60px rgba(0,0,0,.08);

}

/* Forms */

.auth-form{

    display:none;
    width:100%;

}

.auth-form.active{

    display:block;

}

.auth-form h2{

    font-size:36px;

    margin-bottom:10px;

    color:#2d2d2d;

}

.auth-form>p{

    color:#777;

    margin-bottom:35px;

}

/* Reset Password Form 
#forgot-form{
    display:none;
}
*/
/* ===========================
   FORM STYLING
=========================== */

.auth-form label{
    display:block;
    font-size:15px;
    font-weight:600;
    color:#333;
    margin-bottom:8px;
}

.auth-form input:not([type="checkbox"]){
    width:100%;
    height:54px;
    border:1px solid #ddd;
    border-radius:10px;
    padding:0 18px;
    font-size:16px;
    margin-bottom:18px;
    transition:.3s;
    box-sizing:border-box;
}

.auth-form input:focus{
    border-color:#95bf3d;
    box-shadow:0 0 0 4px rgba(149,191,61,.15);
    outline:none;
}

.auth-form button,
.auth-btn{
    width:100%;
    height:54px;
    background:#95bf3d;
    color:#fff;
    border:none;
    border-radius:10px;
    font-size:17px;
    font-weight:700;
    cursor:pointer;
    transition:.3s;
    margin-top:10px;
}

.auth-form button:hover,
.auth-btn:hover{
    background:#7ea62d;
}

.auth-links{
    margin-top:25px;
    text-align:center;
}

.auth-links a{
    color:#95bf3d;
    text-decoration:none;
    font-weight:600;
}

.auth-links a:hover{
    text-decoration:underline;
}

.validation-msg{
    display:block;
    margin-top:6px;
    font-size:13px;
    font-weight:500;
}

.validation-msg.error{
    color:#dc3545;
}

.validation-msg.success{
    color:#28a745;
}

.password-strength{
    height:6px;
    background:#ececec;
    border-radius:10px;
    margin-top:10px;
    overflow:hidden;
}

#strength-bar{
    width:0%;
    height:100%;
    background:#dc3545;
    transition:.3s;
}

/* ==========================
   Password Rules
========================== */

#password-rules{
    display:none;
    margin-top:10px;
}

#password-rules div{
    margin:6px 0;
    font-size:13px;
}

#password-rules .valid{
    color:#28a745;
}

#password-rules .invalid{
    color:#dc3545;
}

.btn-primary:disabled{
    opacity:.6;
    cursor:not-allowed;
}


/*Dashboard Account*/

.profile-header{

display:flex;
align-items:center;
gap:20px;
margin-bottom:40px;

}

.profile-avatar{

width:70px;
height:70px;

background:#95bf3d;

color:#fff;

border-radius:50%;

display:flex;

align-items:center;

justify-content:center;

font-size:28px;

font-weight:bold;

}

.setting-row{

display:flex;

justify-content:space-between;

align-items:center;

padding:20px 0;

border-bottom:1px solid #eee;

}

.setting-info{

display:flex;

flex-direction:column;

gap:8px;

}

.setting-info strong{

font-size:16px;

}

.setting-info span{

color:#666;

}

.setting-btn{

background:none;

border:none;

color:#95bf3d;

font-weight:600;

cursor:pointer;

}

.lock{

font-size:18px;

}

.edit-box{

display:none;

padding:20px 0;

}

.edit-box input{

width:100%;

padding:12px;

border:1px solid #ddd;

border-radius:8px;

margin-bottom:15px;

}

.edit-box button{

background:#95bf3d;

color:#fff;

padding:10px 20px;

border:none;

border-radius:8px;

cursor:pointer;

}


.empty-address{

    color:#888;

    font-style:italic;

    display:block;

    margin:20px 0;

}

.address-btn{

    display:inline-block;

    padding:10px 22px;

    border-radius:8px;

    text-decoration:none;

    font-weight:600;

    width:auto;

}