/* Login Modal Modernization Styles */

#loginModal .modal-content {
    border-radius: 1.25rem;
    border: none;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(10px);
    overflow: hidden;
}

[data-bs-theme="dark"] #loginModal .modal-content {
    background: rgba(30, 41, 59, 0.9);
    border: 1px solid rgba(255, 255, 255, 0.05);
}

#loginModal .modal-header {
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.1), rgba(139, 92, 246, 0.1));
    padding: 1.5rem;
}

#loginModal .modal-title {
    font-weight: 700;
    color: #1e293b;
    display: flex;
    align-items: center;
}

[data-bs-theme="dark"] #loginModal .modal-title {
    color: #f1f5f9;
}

#loginModal .modal-body {
    padding: 2rem;
}

/* Input Styling */
.login-step .input-group-text {
    background-color: transparent;
    border-right: none;
    color: #64748b;
    padding-left: 1rem;
}

.login-step .form-control {
    border-left: none;
    padding: 0.75rem 1rem;
    border-color: #e2e8f0;
    transition: all 0.3s ease;
}

[data-bs-theme="dark"] .login-step .form-control {
    background-color: rgba(15, 23, 42, 0.5);
    border-color: rgba(255, 255, 255, 0.1);
    color: #f1f5f9;
}

.login-step .form-control:focus {
    box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.15);
    border-color: #3b82f6;
}

/* Button Modernization */
.btn-primary {
    background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
    border: none;
    font-weight: 600;
    padding: 0.75rem 1.5rem;
    border-radius: 0.75rem;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 15px -3px rgba(59, 130, 246, 0.4);
    background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%);
}

/* Step Animatons */
.login-step {
    transition: all 0.4s ease-in-out;
}

/* Password Toggle Icon */
#togglePassword {
    border-left: none;
    background: transparent;
    border-color: #e2e8f0;
    color: #64748b;
}

[data-bs-theme="dark"] #togglePassword {
    border-color: rgba(255, 255, 255, 0.1);
}

#togglePassword:hover {
    color: #3b82f6;
}

/* Username Display in Step 2 */
#displayUsername {
    font-size: 0.9rem;
    background: rgba(59, 130, 246, 0.1);
    padding: 0.25rem 0.75rem;
    border-radius: 2rem;
}

/* Animate.css Helpers (if not already loaded) */
.animate__animated {
    animation-duration: 0.5s;
    animation-fill-mode: both;
}

@keyframes fadeInRight {
    from {
        opacity: 0;
        transform: translate3d(20px, 0, 0);
    }

    to {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }
}

.animate__fadeInRight {
    animation-name: fadeInRight;
}

@keyframes fadeInLeft {
    from {
        opacity: 0;
        transform: translate3d(-20px, 0, 0);
    }

    to {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }
}

.animate__fadeInLeft {
    animation-name: fadeInLeft;
}

@keyframes zoomIn {
    from {
        opacity: 0;
        transform: scale3d(0.3, 0.3, 0.3);
    }

    50% {
        opacity: 1;
    }
}

.animate__zoomIn {
    animation-name: zoomIn;
}

@keyframes shakeX {

    from,
    to {
        transform: translate3d(0, 0, 0);
    }

    10%,
    30%,
    50%,
    70%,
    90% {
        transform: translate3d(-10px, 0, 0);
    }

    20%,
    40%,
    60%,
    80% {
        transform: translate3d(10px, 0, 0);
    }
}

.animate__shakeX {
    animation-name: shakeX;
}