/**
 * Login Page Styles
 * Custom styles for the enhanced login page with background support
 */

.login-background {
    background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('../img/backgrounds/default-bg.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.glass-card {
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.37);
}

[data-theme="dark"] .glass-card {
    background: rgba(15, 23, 42, 0.7);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.login-btn {
    background: linear-gradient(135deg, var(--accent-primary), var(--accent-secondary));
    transition: all 0.3s ease;
    box-shadow: 0 4px 6px -1px rgba(249, 115, 22, 0.2), 0 2px 4px -1px rgba(249, 115, 22, 0.1);
}

.login-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 15px -3px rgba(249, 115, 22, 0.3), 0 4px 6px -2px rgba(249, 115, 22, 0.2);
}

.login-input {
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: white;
    transition: all 0.3s ease;
}

.login-input:focus {
    background: rgba(255, 255, 255, 0.15);
    border-color: var(--accent-primary);
    box-shadow: 0 0 0 2px rgba(249, 115, 22, 0.2);
}

.login-input::placeholder {
    color: rgba(255, 255, 255, 0.6);
}

.theme-toggle-btn, .language-toggle-btn {
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: white;
    padding: 0.5rem;
    border-radius: 9999px;
    transition: all 0.3s ease;
}

.theme-toggle-btn:hover, .language-toggle-btn:hover {
    background: rgba(255, 255, 255, 0.2);
}