/* ========================================================================== */
/* MOBILE-ONLY: Advanced UX & Accessibility Enhancements                     */
/* Import this file in index.php for enhanced mobile experience              */
/* ========================================================================== */

@media (max-width: 768px) {

    /* Skeleton loading animation for better perceived performance */
    .loading {
        background: linear-gradient(90deg,
                rgba(16, 185, 129, 0.05) 0%,
                rgba(16, 185, 129, 0.15) 50%,
                rgba(16, 185, 129, 0.05) 100%);
        background-size: 200% 100%;
        animation: shimmer 1.8s ease-in-out infinite;
    }

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

        100% {
            background-position: 200% 0;
        }
    }

    /* Enhanced focus states for keyboard/screen reader accessibility */
    button:focus-visible,
    a:focus-visible,
    input:focus-visible,
    textarea:focus-visible,
    .nav-link:focus-visible,
    .category-btn:focus-visible {
        outline: 3px solid var(--primary);
        outline-offset: 3px;
        border-radius: 6px;
    }

    /* Haptic-style visual feedback on all buttons */
    .add-btn:active,
    .category-btn:active,
    .search-action-btn:active,
    .cart-button:active,
    .menu-toggle:active {
        transform: scale(0.94);
        box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25);
        transition: transform 0.1s ease;
    }

    /* Smooth transitions for better perceived performance */
    button,
    a,
    .medicine-card,
    .category-btn,
    .nav-link {
        transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    }

    /* Fade-in animation for empty state */
    .empty-state {
        animation: fadeInUp 0.6s ease-out;
    }

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

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

    /* Enhanced modal backdrop with stronger blur */
    .modal-overlay {
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
        background: rgba(0, 0, 0, 0.65);
    }

    /* Prevent overscroll bounce on iOS for better UX */
    body {
        overscroll-behavior-y: contain;
    }

    /* Optimize image rendering for mobile screens */
    img {
        image-rendering: -webkit-optimize-contrast;
        image-rendering: crisp-edges;
    }

    /* Better text rendering on mobile */
    body,
    button,
    input,
    textarea {
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
        text-rendering: optimizeLegibility;
    }

    /* Reduce motion for users who prefer it (accessibility) */
    @media (prefers-reduced-motion: reduce) {

        *,
        *::before,
        *::after {
            animation-duration: 0.01ms !important;
            animation-iteration-count: 1 !important;
            transition-duration: 0.01ms !important;
            scroll-behavior: auto !important;
        }
    }

    /* High contrast mode support (accessibility) */
    @media (prefers-contrast: high) {

        .medicine-card,
        .category-btn,
        .search-box {
            border-width: 2px;
            border-color: var(--text-main);
        }
    }

    /* Improve touch target sizes for better accessibility */
    .nav-link,
    .category-btn,
    .add-btn,
    .cart-button,
    .menu-toggle {
        min-width: 44px;
        min-height: 44px;
    }

    /* Prevent accidental text selection on interactive elements */
    button,
    .category-btn,
    .add-btn,
    .nav-link,
    .medicine-card {
        -webkit-user-select: none;
        -moz-user-select: none;
        user-select: none;
    }

    /* Allow text selection on content */
    .medicine-name,
    .medicine-description,
    .medicine-price,
    p {
        -webkit-user-select: text;
        -moz-user-select: text;
        user-select: text;
    }

    /* Improve scrolling performance */
    .main-nav,
    .modal-window,
    .category-buttons,
    .medicines-grid {
        -webkit-overflow-scrolling: touch;
        scroll-behavior: smooth;
    }

    /* Add subtle pulse animation to loading state */
    .loading div:first-child {
        animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
    }

    @keyframes pulse {

        0%,
        100% {
            opacity: 1;
        }

        50% {
            opacity: 0.5;
        }
    }

    /* Improve button press feedback */
    button:active::after,
    .add-btn:active::after {
        content: '';
        position: absolute;
        inset: 0;
        background: rgba(0, 0, 0, 0.1);
        border-radius: inherit;
        pointer-events: none;
    }

    /* Better visual hierarchy with shadows */
    .medicine-card:active {
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    }

    /* Smooth color transitions */
    * {
        transition-property: background-color, border-color, color, fill, stroke;
        transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
        transition-duration: 150ms;
    }
}