/* Mobile-specific enhancements for better touch experience */

/* Ensure all interactive elements have adequate touch targets (minimum 44x44px) */
@media (max-width: 767px) {
    /* Better touch targets */
    button, 
    a.auth-btn,
    a.mobile-auth-btn,
    .lang-btn,
    .mobile-menu-item,
    .app-scroll-card,
    .category-card {
        -webkit-tap-highlight-color: rgba(0, 0, 0, 0.1);
        touch-action: manipulation;
    }
    
    /* Prevent text selection on buttons */
    button,
    .lang-btn,
    .auth-btn,
    .mobile-auth-btn {
        -webkit-user-select: none;
        user-select: none;
    }
    
    /* Smooth scrolling for mobile */
    html {
        scroll-behavior: smooth;
        -webkit-overflow-scrolling: touch;
    }
    
    /* Better mobile navigation */
    .mobile-nav-menu {
        box-shadow: -5px 0 15px rgba(0, 0, 0, 0.2);
    }
    
    /* Improve carousel touch experience */
    .carousel {
        touch-action: pan-y;
    }
    
    /* Better scroll containers */
    .scroll-container {
        scroll-snap-type: x proximity;
        -webkit-overflow-scrolling: touch;
    }
    
    .app-scroll-card {
        scroll-snap-align: start;
    }
    
    /* Improve form inputs on mobile */
    input[type="text"],
    input[type="search"] {
        font-size: 16px; /* Prevents zoom on iOS */
        -webkit-appearance: none;
        appearance: none;
    }
    
    /* Better mobile footer */
    footer {
        padding: 1.5rem 1rem 5rem;
    }
    
    /* Optimize images for mobile */
    img {
        max-width: 100%;
        height: auto;
    }
    
    /* Better mobile cards */
    .app-list-item {
        padding: 0.8rem;
    }
    
    /* Improve mobile menu spacing */
    .mobile-nav-header {
        margin-bottom: 1rem;
    }
    
    /* Better mobile search */
    .mobile-search {
        margin: 1rem 0 1.5rem;
    }
}

/* Extra small devices (phones in portrait mode) */
@media (max-width: 375px) {
    .logo {
        font-size: 0.9rem;
    }
    
    .logo-icon {
        font-size: 1.1rem;
    }
    
    .lang-btn {
        padding: 0.3rem 0.5rem;
        font-size: 0.7rem;
        min-width: 36px;
    }
    
    .carousel {
        height: 140px;
    }
    
    .slide-content h2 {
        font-size: 0.85rem;
    }
    
    .slide-content p {
        font-size: 0.65rem;
    }
    
    .app-scroll-card {
        width: 110px;
    }
    
    .section-title h2 {
        font-size: 0.95rem;
    }
}

/* Landscape mode optimizations */
@media (max-width: 767px) and (orientation: landscape) {
    .carousel {
        height: 200px;
    }
    
    .mobile-menu {
        padding: 0.5rem;
    }
    
    .mobile-menu-item {
        font-size: 0.7rem;
    }
    
    .mobile-menu-item i {
        font-size: 1rem;
    }
}

/* High DPI displays */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
    .img-icon,
    .img-icon-list,
    .app-icon img {
        image-rendering: -webkit-optimize-contrast;
        image-rendering: crisp-edges;
    }
}

/* Dark mode support (optional) */
@media (prefers-color-scheme: dark) {
    /* Add dark mode styles if needed in the future */
}

/* Reduce motion for accessibility */
@media (prefers-reduced-motion: reduce) {
    * {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}