/* ==========================================================================
   EcoDBX Auth Pages - Stunning Gradient Theme
   ========================================================================== */

:root {
    --auth-dark: #050208;
    --neon-green: #00ff9d;
    --electric-blue: #00f2fe;
    --deep-purple: #741e78;
    --primary-light: #9b2d9f;
}

/* ==========================================================================
   Left Panel - Dark Purple Gradient (matches Landing Page Hero)
   ========================================================================== */

.account-info-area {
    background: linear-gradient(180deg, #050208 0%, #0f0515 50%, #050208 100%) !important;
    position: relative;
    overflow: hidden;
}

/* Glow effects matching landing page */
.account-info-area::before {
    content: '';
    position: absolute;
    top: -100px;
    left: -100px;
    width: 400px;
    height: 400px;
    background: #741e78;
    filter: blur(80px);
    opacity: 0.4;
    border-radius: 50%;
    animation: pulseGlow 8s infinite alternate;
    z-index: 0;
}

.account-info-area::after {
    content: '';
    position: absolute;
    bottom: 20%;
    right: -100px;
    width: 350px;
    height: 350px;
    background: #1e8449;
    filter: blur(80px);
    opacity: 0.5;
    border-radius: 50%;
    animation: pulseGlow 8s infinite alternate 2s;
    z-index: 1;
}

@keyframes pulseGlow {
    0% { transform: scale(1); opacity: 0.3; }
    100% { transform: scale(1.2); opacity: 0.5; }
}

/* Override the portal's teal :after overlay - use green glow instead */
.login-account .account-info-area:after {
    content: '' !important;
    position: absolute !important;
    bottom: 10% !important;
    right: -50px !important;
    left: auto !important;
    top: auto !important;
    width: 400px !important;
    height: 400px !important;
    background: #1e8449 !important;
    filter: blur(80px) !important;
    opacity: 0.6 !important;
    border-radius: 50% !important;
    animation: pulseGlow 8s infinite alternate 2s !important;
    z-index: 1 !important;
}

/* Animated Accent Line */
.login-content::after {
    content: '';
    position: absolute;
    bottom: 30px;
    left: 15%;
    right: 15%;
    height: 2px;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.5), #00ff9d, rgba(255, 255, 255, 0.5), transparent);
    background-size: 200% 100%;
    animation: lineGlow 3s linear infinite;
    z-index: 0;
}

@keyframes lineGlow {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* Content Container - Always on Top */
.login-content {
    position: relative;
    z-index: 10;
}

/* Ensure all text is above effects */
.login-content .sub-title,
.login-content .title,
.login-content .text {
    position: relative;
    z-index: 10;
}

/* Text Styling */
.login-content .title {
    color: #ffffff !important;
    text-shadow: 0 4px 30px rgba(0, 0, 0, 0.3);
}

/* Brand Name - EcoDBx Logo Colors (no animation override) */

/* Brand Name - EcoDBx Logo Colors */
.brand-name {
    font-weight: 700;
    display: inline;
}

/* E and D - Dark Teal to Cyan Gradient */
.brand-e,
.brand-d {
    background:linear-gradient(90deg, #1a4a5c 0%, var(--eco-primary) 100%) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
    display: inline;
}

/* co - Green to Cyan Gradient */
.brand-co {
    background: linear-gradient(90deg, #00ff9d 0%, #00f2fe 100%) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
    display: inline;
}

/* Bx - Purple */
.brand-bx {
    color: #a855f7 !important;
    -webkit-text-fill-color: #781e76 !important;
    display: inline;
}

.login-content .sub-title,
.login-content .text {
    color: rgba(255, 255, 255, 0.85) !important;
}

/* ==========================================================================
   Right Panel - Form Area with Purple Accents
   ========================================================================== */

.login-form {
    background: #ffffff;
}

.login-head .title {
    color: #741e78 !important;
}

.login-title span {
    background: linear-gradient(135deg, #741e78 0%, #9b2d9f 100%) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
}

/* Form Controls */
.login-form .form-control {
    border-radius: 10px !important;
    border: 2px solid #e2e8f0 !important;
    padding: 12px 16px !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    background: #fafafa !important;
}

.login-form .form-control:focus {
    border-color: #741e78 !important;
    box-shadow: 0 0 0 4px rgba(116, 30, 120, 0.15) !important;
    background: #ffffff !important;
}

/* Primary Button - Purple Gradient with Shine */
.login-form .btn-primary {
    background: linear-gradient(135deg, #741e78 0%, #9b2d9f 100%) !important;
    border: none !important;
    border-radius: 12px !important;
    padding: 14px 24px !important;
    font-weight: 600 !important;
    color: #ffffff !important;
    box-shadow: 0 4px 20px rgba(116, 30, 120, 0.35) !important;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1) !important;
    position: relative;
    overflow: hidden;
}

.login-form .btn-primary::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
    transition: left 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.login-form .btn-primary:hover {
    transform: translateY(-3px) !important;
    box-shadow: 0 8px 30px rgba(116, 30, 120, 0.5) !important;
}

.login-form .btn-primary:hover::before {
    left: 100%;
}

/* Links - Purple */
.login-form .btn-link.text-primary,
.login-form a.text-primary {
    color: #741e78 !important;
    font-weight: 500 !important;
    text-decoration: none !important;
    transition: all 0.3s ease !important;
}

.login-form .btn-link.text-primary:hover,
.login-form a.text-primary:hover {
    color: #9b2d9f !important;
}

/* Checkbox - Purple */
.form-check-input:checked {
    background-color: #741e78 !important;
    border-color: #741e78 !important;
}

.form-check-input:focus {
    box-shadow: 0 0 0 4px rgba(116, 30, 120, 0.15) !important;
}

/* Alerts */
.alert-success {
    background: rgba(116, 30, 120, 0.1) !important;
    border-color: rgba(116, 30, 120, 0.2) !important;
    color: #741e78 !important;
}

.alert-danger {
    background: rgba(239, 68, 68, 0.1) !important;
    border-color: rgba(239, 68, 68, 0.2) !important;
    color: #dc2626 !important;
}

/* Password Toggle */
.show-pass {
    cursor: pointer;
    color: #64748b;
    transition: color 0.3s ease;
}

.show-pass:hover {
    color: #741e78;
}

/* Has Error State */
.has-error .form-control {
    border-color: #EF4444 !important;
}

/* ==========================================================================
   Mobile Responsive
   ========================================================================== */

@media (max-width: 991px) {
    .account-info-area {
        min-height: 280px;
    }
    
    .login-content .title {
        font-size: 1.75rem !important;
    }
}

@media (max-width: 767px) {
    .account-info-area {
        min-height: 220px;
        padding: 2rem !important;
    }
    
    .login-content .title {
        font-size: 1.5rem !important;
    }
    
    .login-form {
        padding: 2rem !important;
    }
    
    .login-form .btn-primary {
        padding: 12px 20px !important;
    }
}

/* Reduce animations for users who prefer it */
@media (prefers-reduced-motion: reduce) {
    .account-info-area,
    .account-info-area::before,
    .account-info-area::after,
    .login-content::before,
    .login-content::after {
        animation: none !important;
    }
}