/* Global UX Improvements */
:root {
    --primary-color: #856CF8;
    --primary-hover: #6F5CE6;
    --text-primary: #333;
    --text-secondary: #666;
    --background-light: #f5f5f5;
    --border-color: #CECECE;
    --card-shadow: 0 4px 4px #866cf833;
    --transition-speed: 0.3s;
}

/* Touch target improvements for mobile */
@media (max-width: 768px) {

    /* Add active state feedback */
    .navbar-link:active {
        transform: scale(0.95);
        background-color: #f0f0f0;
    }

    /* Better tap feedback for course cards */
    .course-card {
        cursor: pointer;
        -webkit-tap-highlight-color: transparent;
    }

    .course-card:active {
        transform: scale(0.98);
    }

    /* Prevent text selection while scrolling */
    * {
        -webkit-touch-callout: none;
        -webkit-user-select: none;
        user-select: none;
    }
}

/* Loading state improvements */
.loading {
    opacity: 0.7;
    transition: opacity var(--transition-speed) ease;
    pointer-events: none;
}

/* Smooth appearance animations */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.main > * {
    animation: fadeIn 0.3s ease-out forwards;
}

/* Better focus states for accessibility */
:focus {
    outline: 2px solid var(--primary-color);
    outline-offset: 2px;
}

/* Performance improvements */
* {
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Improved button states */
.course-button {
    position: relative;
    overflow: hidden;
}

.course-button::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 0.1);
    transform: translate(-50%, -50%) scale(0);
    border-radius: 50%;
    transition: transform 0.3s ease;
}

.course-button:active::after {
    transform: translate(-50%, -50%) scale(1.5);
}

@media (max-width: 768px) {
    ::-webkit-scrollbar {
        display: none;
    }
    
    * {
        -ms-overflow-style: none;
        scrollbar-width: none;
    }
}