/* Profile Page & Dropdown Styles */

    /* Fade in animation for toasts */
    @keyframes fade-in-out {
        0% {
            opacity: 0;
            transform: translateY(-20px);
        }

        10% {
            opacity: 1;
            transform: translateY(0);
        }

        90% {
            opacity: 1;
            transform: translateY(0);
        }

        100% {
            opacity: 0;
            transform: translateY(-20px);
        }
    }

    .animate-fade-in-out {
        animation: fade-in-out 4s ease-in-out;
    }

    .animate-fade-in {
        animation: fade-in 0.3s ease-in;
    }

    @keyframes fade-in {
        from {
            opacity: 0;
            transform: translateY(-10px);
        }

        to {
            opacity: 1;
            transform: translateY(0);
        }
    }


    /* Pulse animation for profile incomplete indicator */
    @keyframes pulse {
        0%, 100% {
            opacity: 1;
        }

        50% {
            opacity: 0.5;
        }
    }

    .animate-pulse {
        animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
    }

    /* Smooth transitions */
    .transition-all {
        transition-property: all;
        transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
        transition-duration: 200ms;
    }

    /* Profile card hover effects */
    .profile-card-hover {
        transition: transform 0.2s ease, box-shadow 0.2s ease;
    }

        .profile-card-hover:hover {
            transform: translateY(-2px);
            box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
        }

    /* Input focus states */
    input:focus {
        outline: none;
        border-color: #3b82f6;
        box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
    }

    /* Button disabled state */
    button:disabled {
        opacity: 0.6;
        cursor: not-allowed;
    }

    /* Modal backdrop blur */
    #verificationModal.flex {
        backdrop-filter: blur(4px);
    }

    /* OTP input styling */
    #verificationOtp {
        letter-spacing: 0.5em;
    }

        #verificationOtp::placeholder {
            letter-spacing: normal;
        }

    /* Profile incomplete toast animation */
    @keyframes slide-in {
        from {
            transform: translateX(400px);
            opacity: 0;
        }

        to {
            transform: translateX(0);
            opacity: 1;
        }
    }

    .animate-slide-in {
        animation: slide-in 0.5s ease-out;
    }

    /* Responsive profile dropdown */
    @media (max-width: 768px) {
        .group:hover > div {
            position: fixed;
            right: 1rem;
            left: 1rem;
            width: auto;
        }
    }

    /* Loading spinner */
    @keyframes spin {
        to {
            transform: rotate(360deg);
        }
    }

    .animate-spin {
        animation: spin 1s linear infinite;
    }

    /* Status message animations */
    .status-enter {
        animation: status-slide-in 0.3s ease-out;
    }

    @keyframes status-slide-in {
        from {
            opacity: 0;
            transform: translateY(-10px);
        }

        to {
            opacity: 1;
            transform: translateY(0);
        }
    }

    /* Verification modal animations */
    #verificationModal.flex {
        animation: modal-fade-in 0.2s ease-out;
    }

    @keyframes modal-fade-in {
        from {
            opacity: 0;
        }

        to {
            opacity: 1;
        }
    }

    #verificationModal.flex > div {
        animation: modal-slide-up 0.3s ease-out;
    }

    @keyframes modal-slide-up {
        from {
            opacity: 0;
            transform: translateY(20px);
        }

        to {
            opacity: 1;
            transform: translateY(0);
        }
    }

    /* Profile avatar styles */
    .profile-avatar {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    }

    /* Success checkmark animation */
    @keyframes checkmark {
        0% {
            transform: scale(0);
            opacity: 0;
        }

        50% {
            transform: scale(1.2);
        }

        100% {
            transform: scale(1);
            opacity: 1;
        }
    }

    .checkmark-animate {
        animation: checkmark 0.5s ease-out;
    }

    /* Form validation states */
    input.error {
        border-color: #ef4444;
        background-color: #fef2f2;
    }

    input.success {
        border-color: #10b981;
        background-color: #f0fdf4;
    }

    /* Profile completion progress bar */
    .progress-bar {
        transition: width 0.5s ease-out;
    }

    /* Tooltip styles */
    .tooltip {
        position: relative;
    }

        .tooltip::after {
            content: attr(data-tooltip);
            position: absolute;
            bottom: 100%;
            left: 50%;
            transform: translateX(-50%);
            padding: 0.5rem 0.75rem;
            background-color: #1f2937;
            color: white;
            font-size: 0.75rem;
            border-radius: 0.375rem;
            white-space: nowrap;
            opacity: 0;
            pointer-events: none;
            transition: opacity 0.2s;
            margin-bottom: 0.5rem;
        }

        .tooltip:hover::after {
            opacity: 1;
        }

    /* Mobile responsive adjustments */
    @media (max-width: 640px) {
        #profile-incomplete-toast {
            left: 1rem;
            right: 1rem;
            transform: none;
            max-width: calc(100% - 2rem);
        }

        #verificationModal > div {
            margin: 0 1rem;
            width: calc(100% - 2rem);
        }
    }