/* Samdle Mobile-Specific Styles */

/* Mobile Touch Optimizations */
@media (max-width: 768px) {
    /* Disable hover effects on touch devices */
    @media (hover: none) and (pointer: coarse) {
        .btn:hover,
        .teacher-card:hover,
        .navbar-link:hover,
        a:hover {
            transform: none !important;
            box-shadow: none !important;
        }
    }
    
    /* iOS-specific fixes */
    @supports (-webkit-touch-callout: none) {
        /* Fix iOS bounce scroll without breaking scrolling */
        html, body {
            height: 100%;
            overflow: auto;
            -webkit-overflow-scrolling: touch;
        }
        
        /* Fix iOS input zoom */
        input[type="text"],
        input[type="email"],
        input[type="password"],
        input[type="search"],
        input[type="tel"],
        input[type="url"],
        textarea,
        select {
            font-size: 16px !important;
        }
        
        /* Fix iOS tap delay */
        a, button, input, select, textarea {
            touch-action: manipulation;
        }
    }
    
    /* Android-specific fixes */
    @media screen and (-webkit-min-device-pixel-ratio: 0) {
        /* Fix Android keyboard issues */
        input:focus,
        textarea:focus,
        select:focus {
            outline: none;
        }
    }
    
    /* Safe area insets for notched devices */
    @supports (padding: max(0px)) {
        .navbar {
            padding-top: max(0px, env(safe-area-inset-top));
        }
        
        .container {
            padding-left: max(16px, env(safe-area-inset-left));
            padding-right: max(16px, env(safe-area-inset-right));
        }
        
        footer {
            padding-bottom: max(20px, env(safe-area-inset-bottom));
        }
    }
    
    /* Improve scroll performance */
    * {
        -webkit-backface-visibility: hidden;
        -webkit-perspective: 1000;
        backface-visibility: hidden;
        perspective: 1000;
    }
    
    /* Optimize images */
    img {
        max-width: 100%;
        height: auto;
        -webkit-touch-callout: none;
        -webkit-user-select: none;
        user-select: none;
    }
    
    /* Optimize animations */
    @media (prefers-reduced-motion: reduce) {
        *,
        *::before,
        *::after {
            animation-duration: 0.01ms !important;
            animation-iteration-count: 1 !important;
            transition-duration: 0.01ms !important;
        }
    }
    
    /* Touch-friendly spacing */
    .navbar-link,
    .mobile-menu a,
    .btn,
    .form-input,
    .page-link {
        min-height: 44px;
        display: flex;
        align-items: center;
    }
    
    /* Improve form usability */
    .form-group {
        margin-bottom: 20px;
    }
    
    .form-label {
        display: block;
        margin-bottom: 8px;
        font-weight: 600;
        touch-action: manipulation;
    }
    
    /* Loading states */
    .teacher-card {
        will-change: transform;
    }
    
    .teacher-card.loading {
        opacity: 0.6;
        pointer-events: none;
    }
    
    /* Skeleton loading */
    @keyframes skeleton-loading {
        0% {
            background-color: #f0f0f0;
        }
        50% {
            background-color: #e0e0e0;
        }
        100% {
            background-color: #f0f0f0;
        }
    }
    
    .skeleton {
        animation: skeleton-loading 1.5s infinite;
        border-radius: 4px;
    }
    
    /* Pull to refresh indicator */
    .pull-to-refresh {
        position: fixed;
        top: -60px;
        left: 50%;
        transform: translateX(-50%);
        width: 40px;
        height: 40px;
        background: white;
        border-radius: 50%;
        box-shadow: 0 2px 8px rgba(0,0,0,0.1);
        display: flex;
        align-items: center;
        justify-content: center;
        transition: top 0.3s ease;
        z-index: 1001;
    }
    
    .pull-to-refresh.active {
        top: 80px;
    }
    
    /* Smooth scrolling */
    html {
        scroll-behavior: smooth;
    }
    
    /* Hide scrollbars but keep functionality */
    .features-strip::-webkit-scrollbar,
    .mobile-menu::-webkit-scrollbar {
        display: none;
    }
    
    .features-strip,
    .mobile-menu {
        -ms-overflow-style: none;
        scrollbar-width: none;
    }
    
    /* Better touch targets */
    .subject-tag,
    .tag {
        padding: 6px 12px;
        min-height: 32px;
        display: inline-flex;
        align-items: center;
    }
    
    /* Optimize card layout */
    .teacher-card {
        contain: layout style paint;
    }
    
    /* Fix position sticky on iOS */
    .filter-section {
        position: -webkit-sticky;
        position: sticky;
    }
    
    /* Prevent text selection on interactive elements */
    .btn,
    .navbar-link,
    .teacher-card,
    .page-link {
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
    }
    
    /* Improve readability */
    body {
        text-rendering: optimizeLegibility;
        -webkit-font-smoothing: antialiased;
    }
    
    /* Fix mobile menu z-index */
    .mobile-menu {
        z-index: 1100;
    }
    
    /* Ensure modals are on top */
    .modal,
    .overlay,
    #Alert_Overlay {
        z-index: 2000;
    }
}

/* Landscape orientation fixes */
@media (max-width: 768px) and (orientation: landscape) {
    .hero {
        min-height: auto;
        padding: 60px 0 20px;
    }
    
    .hero-title {
        font-size: 24px;
    }
    
    .navbar-container {
        height: 50px;
    }
    
    body {
        padding-top: 50px;
    }
}

/* High contrast mode support */
@media (prefers-contrast: high) {
    .teacher-card {
        border: 2px solid var(--gray-900);
    }
    
    .btn-primary {
        border: 2px solid transparent;
    }
    
    .form-input:focus {
        outline: 3px solid var(--primary-color);
        outline-offset: 2px;
    }
}

/* Dark mode support (if needed in future) */
@media (prefers-color-scheme: dark) {
    /* Dark mode styles can be added here */
}