/* =====================================================
   PART 5
   MAIN LAYOUT + BRAND PANEL + LOGIN/ROLE LAYOUT
===================================================== */

.arova-login-page{

    width:100%;
    min-height:100vh;
    background:#f6f9fc;
    padding:15px 20px 40px;

}

.arova-login-wrapper{

    max-width:1450px;
    margin:0 auto;

    display:flex;
    flex-direction:column;

    gap:10px;

}

/* =====================================================
   BRAND PANEL
===================================================== */

.arova-brand{

    width:100%;

    min-height:95px;

    padding:16px 30px;

    background:linear-gradient(135deg,#18b856,#0f9f45);

    border-radius:24px;

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:40px;

    margin-bottom:5px;

    border:1.5px solid rgba(255,223,120,.65);

    box-shadow:
    0 18px 45px rgba(0,0,0,.08),
    0 0 15px rgba(255,223,120,.15);

}

/* ---------- LEFT ---------- */

.arova-brand-left{

    flex:1.2;

    display:flex;

    align-items:center;

}

.brand-text{

    display:flex;

    flex-direction:column;

}

.brand-text h2{

    margin:0;

    color:#fff;

    font-size:20px;

    font-weight:700;

    line-height:1.2;

}

.brand-tagline{

    margin-top:6px;

    color:#eefcf5;

    font-size:15px;

    font-weight:500;

}

/* ---------- CENTER ---------- */

.arova-brand-center{

    flex:1;

    text-align:center;

}

.arova-brand-center h1{

    margin:0;

    color:#fff;

    font-size:28px;

    font-weight:800;

}

.system-name{

    margin-top:8px;

    color:#eefcf5;

    font-size:17px;

    font-weight:500;

}

/* ---------- RIGHT ---------- */

.brand-features{

    flex:1.3;

    display:grid;

    grid-template-columns:repeat(2,1fr);

    gap:10px;

}

.feature-item{

    display:flex;
    height:48px;
    justify-content:flex-start;

    align-items:center;

    gap:10px;

    padding:10px 12px;

    background:rgba(255,255,255,.12);

    border-radius:14px;

}

.feature-item img{

    width:20px;

    height:20px;

}

.feature-item span{

    color:#fff;

    font-size:13px;

    font-weight:600;

}

/* =====================================================
   LOGIN + ROLE
===================================================== */

.arova-main-container{

    display:flex;

    flex-direction:column;

    gap:15px;
    align-items:center;

}

.arova-login-box{

    background:#fff;

    border-radius:28px;

    padding:40px;
    width:100%;
    max-width:1450px;
    margin:0 auto;
    display:flex;
    flex-direction:column;
    justify-content:flex-start;
    box-shadow:0 18px 40px rgba(0,0,0,.08);

}
.arova-login-box input{

    width:100%;

    max-width:420px;

    height:54px;

    border:1px solid #dbe3ec;

    border-radius:14px;

    padding:0 16px;

    font-size:15px;

    background:#fff;
    
    margin-bottom:20px;

}

.arova-right{
    width:100%;
    max-width:100%;
    
    display:flex;

    flex-direction:column;

    gap:20px;

}

.arova-role-header{

    background:#fff;

    border-radius:24px;

    padding:14px;

    text-align:center;

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

}

.arova-role-header h2{

    font-size:28px;

    font-weight:700;

}

.role-line{
    
     width:60px;

    height:3px;

    margin:8px auto 0;

    background:#18b856;

    border-radius:20px;

}

.arova-role-grid{

    display:grid;

    grid-template-columns:repeat(4,1fr);

    gap:20px;

}
/* =====================================================
   PART 6
   ROLE CARDS + SUPPORT + RESPONSIVE
===================================================== */

.arova-role-card{

    background:#ffffff;

    border:2px solid #eef2f7;

    border-radius:22px;

    padding:15px 22px 10px;

    text-align:center;

    cursor:pointer;

    transition:.30s;

    box-shadow:0 15px 35px rgba(15,23,42,.08);

}

.arova-role-card:hover{

    transform:translateY(-5px);

    border-color:#16a34a;

}

.arova-role-card.active{

    border-color:#16a34a;

    background:#f3fff7;

}

.role-avatar{

    width:55px;

    height:55px;

    margin:0;

    border-radius:50%;

    background:#f8fafc;

    display:flex;

    align-items:center;

    justify-content:center;

}

.role-avatar img{

    width:38px;

    height:38px;

    object-fit:contain;

}

.arova-role-card h3{

    font-size:24px;

    font-weight:700;

    margin:0;

    color:#111827;

}

.arova-role-card p{

    font-size:13px;

    color:#6b7280;

    line-height:1.4;
    
    margin-top:0;
    
    margin-bottom:10px;

    min-height:50px;

}
   .role-header{

    display:flex;

    align-items:center;

    justify-content:center;

    gap:8px;

    margin-bottom:4px;

}

/* ==========================================
ROLE BUTTONS
========================================== */

.doctor-btn,
.staff-btn,
.admin-btn,
.patient-btn{

    width:100%;

    height:46px;

    border:none;

    border-radius:14px;

    color:#fff;

    font-size:15px;

    font-weight:700;

    cursor:pointer;

    transition:.30s;
    
   margin-top:auto;

}

.doctor-btn{

    background:#16a34a;

}

.staff-btn{

    background:#16a34a;

}

.admin-btn{

    background:#16a34a;

}

.patient-btn{

    background:#16a34a;

}

.doctor-btn:hover,
.staff-btn:hover,
.admin-btn:hover,
.patient-btn:hover{

    transform:translateY(-2px);

}

/* ==========================================
SUPPORT CARD
========================================== */

.arova-support-card{

    width:100%;

    

    margin:10px auto 0;

    background:#ffffff;

    border-radius:24px;
    padding:24px;
    

    text-align:center;

    box-shadow:
    0 15px 35px rgba(15,23,42,.08);

}

.support-icon{

    width:64px;

    height:64px;

    border-radius:18px;

    background:#eefcf5;

    display:flex;

    align-items:center;

    justify-content:center;

}

.support-icon img{

    width:34px;

    height:34px;

}

.support-content h4{

    font-size:18px;

    margin-bottom:6px;

}

.support-content p{

    color:#6b7280;

    line-height:22px;

}

/* ==========================================
RESPONSIVE
========================================== */

@media (max-width:1100px){

    .arova-main-container{

        grid-template-columns:1fr;

    }

    .arova-role-grid{

       grid-template-columns:repeat(4,1fr);

    }

}

@media (max-width:768px){
    
    .arova-brand-left,
    .arova-brand-center,
    .brand-features{

    width:100%;

}
.arova-help-buttons{

    display:flex;

    justify-content:center;

    gap:15px;

    flex-wrap:wrap;

}
    
.feature-item{

    height:42px;

    padding:8px 10px;

}
.feature-item span{

    font-size:12px;

}
.brand-features{

    grid-template-columns:repeat(2,1fr);

}
.arova-brand-left{

    justify-content:center;

}

.brand-text{

    align-items:center;

}

    .arova-login-page{

        padding:20px 15px;

    }

    .arova-brand{

    padding:25px;

    flex-direction:column;

    text-align:center;

    gap:15px;

}

    .arova-login-box{

        padding:25px;

    }

    .arova-role-grid{

        grid-template-columns:1fr;

    }

    .arova-support-card{

        flex-direction:column;

        text-align:center;
        padding:15px;

        border-radius:16px;
    }

}

@media (max-width:480px){

    .arova-brand h1{

        font-size:30px;

    }

    .arova-role-header h2{

        font-size:24px;

    }

    .login-header h2{

        font-size:28px;

    }

    .doctor-btn,
    .staff-btn,
    .admin-btn,
    .patient-btn{

        height:44px;

        font-size:14px;

    }
    
}
.arova-login-header{

    display:flex;

    align-items:center;

    gap:15px;

    margin-bottom:10px;

}

.login-icon img{

    width:32px;

    height:32px;

    object-fit:contain;

}
.login-header{

    text-align:left;

}

#login-title{

    margin:0;

    font-size:32px;

}
.password-toggle{

    width:36px;

    height:36px;

    border:none;

    background:transparent;

    cursor:pointer;

    font-size:16px;

    border-radius:10px;

}
.arova-login-btn{

    width:100%;

    max-width:420px;

    height:54px;

    border-radius:14px;

    font-size:16px;

    font-weight:700;
    
    margin-top:15px;

}
.arova-form-options{

    display:flex;

    align-items:center;

    gap:12px;

    margin-top:15px;

    flex-wrap:wrap;

}

.remember-me{
    display:flex;
    align-items:center;
    gap:8px;
    white-space:nowrap;
}

.forgot-password{

    margin-left:15px;

}
.support-tagline{

    margin-top:10px;
    color:#6b7280;
    font-size:14px;

}

.support-actions{

    display:flex;

    gap:12px;

    margin-top:18px;

    flex-wrap:wrap;

}

.appointment-btn,
.whatsapp-btn{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    min-width:180px;

    height:48px;

    padding:0 18px;

    border-radius:14px;

    text-decoration:none;

    font-size:14px;

    font-weight:700;

    transition:.30s;

}

.appointment-btn{

    background:#16a34a;

    color:#fff;

}

.whatsapp-btn{

    background:#25d366;

    color:#fff;

}

.appointment-btn:hover,
.whatsapp-btn:hover{

    transform:translateY(-2px);

}
.arova-help-buttons{

    display:grid;

    grid-template-columns:
    repeat(4,1fr);

    gap:15px;

    margin-top:20px;

}

.help-btn{

    width:150px;

    height:90px;
    
    min-width:150px;

    min-height:90px;

    border-radius:15px;

    display:flex;

    flex-direction:column;

    justify-content:center;

    align-items:center;

    text-decoration:none;

    color:#fff;

    font-weight:600;

    font-size:14px;

    text-align:center;

    box-shadow:
    0 10px 25px rgba(0,0,0,.12);

    transition:.30s;

}

.help-btn:hover{

    transform:
    translateY(-5px);

}

.help-btn i{

    font-size:24px;

    margin-bottom:8px;

}

.help-btn span{

    margin-top:12px;

    line-height:1.3;

}

.appointment-btn,
.whatsapp-btn,
.call-btn,
.email-btn{

    background:#16A34A;

}

.support-header{

    display:flex;

    align-items:center;

    gap:12px;

    margin-bottom:10px;

}

.support-header h4{

    margin:0;

}

.support-icon{

    width:50px;

    height:50px;

}