/* ============================================
   ELITE ONLINE BANKING LOGIN PAGE STYLES
   Premium, Top-Tier Design
   ============================================ */

/* Additional refinements for elite design */
.elite-login-card {
    animation: fadeInUp 0.6s ease-out;
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}


/* Enhanced form input animations */
.elite-form-input:focus {
    animation: inputGlow 0.3s ease-out;
}

@keyframes inputGlow {
    0% {
        box-shadow: 
            0 0 0 0 rgba(192, 192, 192, 0),
            0 8px 24px rgba(0, 0, 0, 0.2);
    }
    50% {
        box-shadow: 
            0 0 0 8px rgba(192, 192, 192, 0.15),
            0 8px 24px rgba(0, 0, 0, 0.2);
    }
    100% {
        box-shadow: 
            0 0 0 4px rgba(192, 192, 192, 0.1),
            0 8px 24px rgba(0, 0, 0, 0.2);
    }
}

/* Enhanced button loading state */
.elite-submit-btn.loading {
    pointer-events: none;
}

.elite-submit-btn.loading .elite-submit-icon {
    animation: spin 1s linear infinite;
}

/* Smooth transitions for all interactive elements */
.elite-form-input,
.elite-submit-btn,
.elite-checkbox,
.elite-forgot-link {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Enhanced modal styling */
#pinModal .modal-content {
    animation: modalSlideIn 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

@keyframes modalSlideIn {
    from {
        opacity: 0;
        transform: translateY(-50px) scale(0.95);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* PIN input focus ring */
#pinForm input[type="text"]:focus {
    outline: none;
    border-color: var(--silver-primary);
    box-shadow: 0 0 0 4px rgba(192, 192, 192, 0.2);
    transform: scale(1.05);
}


/* Responsive enhancements */
@media (max-width: 1024px) {
    .elite-login-grid {
        max-width: 100%;
        padding: 0 1rem;
    }
}

@media (max-width: 768px) {
    .online-banking-hero {
        min-height: auto;
        padding: 2rem 0;
    }
    
    .elite-login-card {
        padding: 2rem 1.5rem;
        border-radius: 20px;
    }
    
    .elite-login-title {
        font-size: 1.75rem;
    }
    
    .elite-security-card {
        padding: 1.5rem;
        border-radius: 16px;
    }
    
    .elite-form-input {
        padding: 1rem 1.25rem;
    }
    
    .elite-submit-btn {
        padding: 1.125rem 1.5rem;
        font-size: 1rem;
    }
    
}

@media (max-width: 480px) {
    .elite-login-card {
        padding: 1.5rem;
    }
    
    .elite-login-title {
        font-size: 1.5rem;
    }
    
    .elite-security-card {
        padding: 1.25rem;
    }
    
    #pinForm input[type="text"] {
        width: 60px;
        height: 60px;
        font-size: 1.5rem;
    }
}

/* Print styles */
@media print {
    .online-banking-hero {
        background: white;
        color: black;
    }
    
    .elite-login-card,
    .elite-security-card {
        background: white;
        border: 1px solid #ddd;
        box-shadow: none;
    }
}