/*=========================
      LOGIN PAGE
==========================*/

.login-section{

padding:90px 0;

background:#F8FAF7;

min-height:80vh;

display:flex;

align-items:center;

}

.login-card{

background:#fff;

padding:45px;

border-radius:25px;

box-shadow:0 15px 40px rgba(0,0,0,.08);

}

.login-header{

text-align:center;

margin-bottom:35px;

}

.login-header img{

width:90px;

margin-bottom:20px;

}

.login-header h2{

font-weight:700;

color:#2E7D32;

}

.form-group{

margin-bottom:22px;

}

.form-group label{

display:block;

margin-bottom:8px;

font-weight:600;

}

.form-control{

border:2px solid #ddd;

padding:14px;

border-radius:12px;

}

.form-control:focus{

border-color:#2E7D32;

box-shadow:none;

}

.password-box{

position:relative;

}

.password-box button{

position:absolute;

right:10px;

top:50%;

transform:translateY(-50%);

border:none;

background:none;

font-size:18px;

color:#777;

}

.login-options{

display:flex;

justify-content:space-between;

margin-bottom:25px;

font-size:15px;

}

.login-btn{

width:100%;

padding:15px;

border:none;

border-radius:50px;

background:#2E7D32;

color:#fff;

font-weight:600;

transition:.3s;

}

.login-btn:hover{

background:#1B5E20;

}

.divider{

text-align:center;

margin:25px 0;

position:relative;

}

.divider span{

background:#fff;

padding:0 15px;

position:relative;

z-index:2;

}

.divider::before{

content:"";

position:absolute;

top:50%;

left:0;

width:100%;

height:1px;

background:#ddd;

}

.google-btn{

width:100%;

padding:15px;

border:2px solid #ddd;

background:#fff;

border-radius:50px;

font-weight:600;

transition:.3s;

}

.google-btn:hover{

background:#F5F5F5;

}

.register-link{

text-align:center;

margin-top:25px;

}

.register-link a{

color:#2E7D32;

font-weight:600;

text-decoration:none;

}

/*=========================================
   FORGOT PASSWORD & WHATSAPP OTP FLOW
=========================================*/

.auth-icon-wrap {
    width: 64px;
    height: 64px;
    margin: 0 auto;
    border-radius: 50%;
    background: rgba(46, 125, 50, 0.1);
    color: #2E7D32;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
}

/* WhatsApp Action Card & Button */
.whatsapp-action-card {
    background: #F4FBF7 !important;
    border: 1.5px dashed #A7F3D0 !important;
    border-radius: 16px;
    padding: 16px 14px;
}

.btn-whatsapp-chat {
    background: #25D366 !important;
    color: #ffffff !important;
    font-size: 15px;
    font-weight: 600;
    border-radius: 50px;
    transition: all 0.25s ease;
    box-shadow: 0 4px 14px rgba(37, 211, 102, 0.3);
}

.btn-whatsapp-chat:hover,
.btn-whatsapp-chat:focus {
    background: #1EBE5D !important;
    color: #ffffff !important;
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(37, 211, 102, 0.45);
}


.custom-alert {
    border-radius: 12px;
    padding: 12px 16px;
    font-size: 14px;
    border: none;
}

.phone-input-group {
    border-radius: 12px;
    overflow: hidden;
}

.phone-input-group .input-group-text {
    border: 2px solid #ddd;
    border-right: none;
    border-radius: 12px 0 0 12px;
    padding: 12px 14px;
    font-size: 15px;
}

.phone-input-group .form-control {
    border-radius: 0 12px 12px 0;
}

.phone-input-group .form-control:focus {
    border-color: #2E7D32;
    box-shadow: none;
}

/* 6-Digit OTP Inputs */
.otp-inputs-container {
    max-width: 360px;
    margin: 0 auto;
}

.otp-digit {
    width: 48px;
    height: 54px;
    text-align: center;
    font-size: 22px;
    font-weight: 700;
    color: #2E7D32;
    border: 2px solid #ddd;
    border-radius: 12px;
    padding: 0;
    transition: all 0.2s ease;
}

.otp-digit:focus {
    border-color: #2E7D32;
    background: rgba(46, 125, 50, 0.04);
    box-shadow: 0 0 0 4px rgba(46, 125, 50, 0.15);
    outline: none;
}

/* Password Toggle & Strength */
.btn-toggle-pwd {
    position: absolute;
    right: 14px;
    top: 50%;
    transform: translateY(-50%);
    background: transparent;
    border: none;
    color: #777;
    cursor: pointer;
    font-size: 16px;
    padding: 4px 8px;
    z-index: 5;
}

.btn-toggle-pwd:hover {
    color: #2E7D32;
}

.password-strength-bar {
    text-align: left;
}

.password-strength-bar .progress {
    background-color: #e9ecef;
    border-radius: 10px;
    overflow: hidden;
}

/* Success Card */
.reset-success-card {
    padding: 50px 40px;
}

.success-circle {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: #E8F5E9;
    color: #2E7D32;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 38px;
    box-shadow: 0 10px 25px rgba(46, 125, 50, 0.2);
}

.btn-login-now {
    display: inline-block;
    max-width: 260px;
    text-align: center;
    border-radius: 50px;
    text-decoration: none;
}

@media (max-width: 576px) {
    .login-section {
        padding: 50px 0;
    }
    .login-card {
        padding: 28px 18px;
        border-radius: 18px;
    }
    .login-header h2 {
        font-size: 24px;
    }
    .otp-digit {
        width: 38px;
        height: 46px;
        font-size: 18px;
    }
}

@media (max-width: 380px) {
    .login-card {
        padding: 22px 12px;
    }
    .login-header h2 {
        font-size: 21px;
    }
    .otp-digit {
        width: 34px;
        height: 42px;
        font-size: 16px;
        border-radius: 8px;
    }
    .otp-inputs-container {
        gap: 4px !important;
    }
}