/* 
 * LuckysCloud - Auth Redesign System
 * Professional Split-Screen Layouts
 */

.auth-split-wrapper {
    min-height: 100vh;
    display: flex;
    background: #ffffff;
}

/* 🖼️ HERO SIDE (LEFT) */
.auth-hero-side {
    flex: 1.2;
    background: linear-gradient(135deg, rgba(15, 23, 42, 0.9) 0%, rgba(30, 41, 59, 0.8) 100%), url('/assets/images/login_hero.png');
    background-size: cover;
    background-position: center;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 5rem;
    color: #ffffff;
    overflow: hidden;
}

/* Specific Hero for Register if needed */
.auth-hero-side.register-hero {
    background: linear-gradient(135deg, rgba(15, 23, 42, 0.9) 0%, rgba(30, 41, 59, 0.8) 100%), url('/assets/images/register_hero.png');
    background-size: cover;
    background-position: center;
}

.auth-hero-side::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: 
        radial-gradient(circle at 20% 30%, rgba(249, 115, 22, 0.15) 0%, transparent 50%),
        radial-gradient(circle at 80% 70%, rgba(8, 145, 178, 0.1) 0%, transparent 50%);
    z-index: 1;
}

.auth-hero-content {
    position: relative;
    z-index: 2;
    max-width: 600px;
}

/* 📝 FORM SIDE (RIGHT) */
.auth-form-side {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 4rem;
    background: #f8fafc;
}

.auth-form-container {
    width: 100%;
    max-width: 480px;
}

/* 👁️ PASSWORD TOGGLE */
.password-field-wrapper {
    position: relative;
}

.password-toggle-btn {
    position: absolute;
    right: 1.25rem;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    color: var(--nebula-text-muted);
    cursor: pointer;
    z-index: 5;
    padding: 0.5rem;
    transition: color 0.2s;
}

.password-toggle-btn:hover {
    color: var(--accent-orange);
}

/* 📊 STRENGTH METER */
.strength-meter {
    height: 4px;
    background: #e2e8f0;
    border-radius: 2px;
    margin-top: 0.75rem;
    overflow: hidden;
}

.strength-bar {
    height: 100%;
    width: 0;
    transition: width 0.3s ease, background 0.3s ease;
}

/* Form Styles Override for Auth */
.auth-form-side .form-control {
    background: #ffffff !important;
    border: 1.5px solid #e2e8f0 !important;
    padding: 0.85rem 1.25rem !important;
    font-weight: 500;
}

.auth-form-side .form-control:focus {
    border-color: var(--accent-orange) !important;
    box-shadow: 0 0 0 4px rgba(249, 115, 22, 0.08) !important;
}

/* Responsive */
@media (max-width: 1100px) {
    .auth-hero-side {
        display: none;
    }
    .auth-form-side {
        flex: 1;
        padding: 2rem;
    }
}