/* ==============================================
   ULTIMATE SOLID LOGIN UI (Fixed Conditions, Animation, Slider)
   ============================================== */

/* Layout fixes so background animation shows clearly */
.back_login::before { display: none !important; }

/* The Solid Premium Login Card */
.modern_login_card {
    background: #1c1b1b !important;
    border: 1px solid #333 !important;
    border-radius: 16px !important;
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.9) !important;
    width: 100%;
    padding: 40px 30px !important;
    transition: all 0.3s ease;
    box-sizing: border-box;
}

/* Titles and Texts */
.intro_title { 
    color: #fff !important; 
    font-size: 28px !important; 
    text-shadow: 0 2px 5px rgba(0,0,0,0.8); 
    letter-spacing: 1px; 
    font-weight: bold !important;
}
.intro_sub { color: #aaa !important; font-size: 15px !important; }

/* ==================================
   BUTTONS STYLING
   ================================== */
.modern_btn {
    width: 100% !important;
    height: 50px !important;
    border-radius: 12px !important; 
    font-size: 16px !important;
    font-weight: bold !important;
    letter-spacing: 1px;
    transition: all 0.3s ease !important;
    border: none !important;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    box-sizing: border-box;
}

/* Main Login Button */
.primary_login_btn {
    background: linear-gradient(135deg, #e24e03, #ff752f) !important; 
    color: #fff !important;
    box-shadow: 0 5px 15px rgba(226, 78, 3, 0.4) !important;
    text-transform: uppercase;
}
.primary_login_btn:hover {
    background: linear-gradient(135deg, #ff752f, #ff8c4f) !important;
    transform: translateY(-2px);
}

/* Biometric Button */
.bio_btn {
    background: #2b2b2b !important;
    color: #fff !important;
    border: 1px solid #444 !important;
    box-shadow: 0 4px 10px rgba(0,0,0,0.3) !important;
}
.bio_btn:hover { background: #333 !important; border-color: #e24e03 !important; transform: translateY(-2px); }
.bio_icon { color: #00e676; font-size: 20px !important; }

/* Guest Button */
.guest_btn {
    background: transparent !important;
    color: #bbb !important;
    border: 2px solid #444 !important;
}
.guest_btn:hover { background: #2b2b2b !important; color: #fff !important; border-color: #554c53 !important; transform: translateY(-2px); }

/* Registration Button (Fixed & Attractive) */
.reg_btn {
    background: #111 !important;
    color: #e24e03 !important;
    border: 1px solid #e24e03 !important;
    text-transform: uppercase;
}
.reg_btn:hover {
    background: #e24e03 !important;
    color: #fff !important;
    box-shadow: 0 4px 12px rgba(226, 78, 3, 0.4) !important;
    transform: translateY(-2px);
}

/* ==================================
   ACTIVE USERS SLIDER CSS
   ================================== */
#last_active { position: relative; width: 100%; display: flex; align-items: center; justify-content: center; }
.last-clip { overflow: hidden; width: 100%; position: relative; height: 55px; }
.last_10 { position: absolute; left: 0; white-space: nowrap; display: flex; }
.active_user { display: inline-block; text-align: center; }
.active_user img { 
    width: 45px !important; 
    height: 45px !important; 
    border-radius: 50% !important; 
    border: 2px solid #554c53 !important; 
    object-fit: cover !important;
    box-shadow: 0 4px 8px rgba(0,0,0,0.5) !important;
    transition: all 0.3s ease;
}
.active_user img:hover { border-color: #e24e03 !important; transform: scale(1.1); }
.left-arrow, .right-arrow { display: none; } 

/* Mobile Responsive */
@media screen and (max-width: 576px) {
    .modern_login_card { width: 92% !important; padding: 30px 20px !important; }
    .intro_title { font-size: 24px !important; }
    .modern_btn { height: 45px !important; font-size: 14px !important; }
}