/* ========================================
   MOBILE RESPONSIVE STYLES - APE TV
   ======================================== */

/* Base Mobile Optimizations */
@media (max-width: 768px) {
    body {
        font-size: 14px;
        overflow-x: hidden;
    }
    
    .container {
        padding: 0 15px !important;
    }
    
    /* Hero Section Mobile */
    .hero-4k {
        min-height: 50vh !important;
        padding: 80px 20px 40px !important;
    }
    
    .hero-title {
        font-size: 28px !important;
        line-height: 1.2 !important;
    }
    
    .hero-subtitle {
        font-size: 16px !important;
    }
    
    .hero-buttons {
        flex-direction: column !important;
        gap: 12px !important;
        width: 100%;
    }
    
    .btn-primary, .btn-secondary {
        width: 100% !important;
        padding: 14px 20px !important;
        font-size: 15px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        text-align: center !important;
    }
    
    /* Content Grid Mobile */
    .content-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 10px !important;
    }
    
    .trending-card, .popular-card {
        min-width: auto !important;
    }
    
    .trending-title, .popular-title {
        font-size: 12px !important;
        -webkit-line-clamp: 2 !important;
    }
    
    .trending-meta, .popular-meta {
        font-size: 10px !important;
        gap: 8px !important;
    }
    
    .trending-actions, .popular-actions {
        flex-wrap: wrap !important;
        gap: 6px !important;
    }
    
    .trend-btn, .pop-btn {
        font-size: 11px !important;
        padding: 3px 6px !important;
    }
    
    /* Video Controls Mobile */
    .video-controls {
        opacity: 1 !important;
        bottom: 5px !important;
        left: 5px !important;
        right: 5px !important;
        gap: 5px !important;
    }
    
    .play-btn, .pause-btn, .more-btn {
        width: 32px !important;
        height: 32px !important;
        font-size: 12px !important;
    }
    
    /* Section Headers Mobile */
    .section-header {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 10px !important;
        margin-bottom: 16px !important;
    }
    
    .section-title {
        font-size: 18px !important;
    }
    
    /* Features Section Mobile */
    .features-showcase {
        gap: 30px !important;
    }
    
    .feature-premium, .feature-premium.reverse {
        grid-template-columns: 1fr !important;
    }
    
    .feature-premium.reverse .feature-media {
        order: 1 !important;
    }
    
    .feature-premium.reverse .feature-content {
        order: 2 !important;
    }
    
    .feature-media {
        height: 250px !important;
    }
    
    .feature-content {
        padding: 25px 15px !important;
    }
    
    .feature-content h3 {
        font-size: 20px !important;
    }
    
    .feature-content p {
        font-size: 14px !important;
    }
    
    .feature-list li {
        font-size: 13px !important;
        padding: 8px 0 !important;
    }
    
    /* Stats Section Mobile */
    .features-stats {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 15px !important;
        padding: 25px 15px !important;
    }
    
    .stat-item {
        text-align: center !important;
    }
    
    .stat-number {
        font-size: 24px !important;
        flex-direction: column !important;
        gap: 5px !important;
    }
    
    .stat-number i {
        font-size: 20px !important;
    }
    
    .stat-label {
        font-size: 12px !important;
    }
    
    /* Footer Mobile */
    .footer-newsletter {
        flex-direction: column !important;
        padding: 25px 15px !important;
        text-align: center !important;
    }
    
    .newsletter-content h3 {
        font-size: 20px !important;
        justify-content: center !important;
    }
    
    .newsletter-content p {
        font-size: 14px !important;
    }
    
    .newsletter-form {
        flex-direction: column !important;
        width: 100% !important;
        min-width: auto !important;
        gap: 10px !important;
    }
    
    .newsletter-input, .newsletter-btn {
        width: 100% !important;
    }
    
    .footer-grid {
        grid-template-columns: 1fr !important;
        gap: 30px !important;
    }
    
    .footer-bottom {
        flex-direction: column !important;
        gap: 20px !important;
        text-align: center !important;
        padding: 20px 0 !important;
    }
    
    .footer-bottom-left {
        flex-direction: column !important;
        gap: 15px !important;
    }
    
    .footer-badges {
        flex-wrap: wrap !important;
        justify-content: center !important;
        gap: 10px !important;
    }
    
    .badge-item {
        font-size: 11px !important;
        padding: 5px 10px !important;
    }
    
    /* Modal Mobile */
    #commentModal > div {
        margin: 15px !important;
        max-width: 100% !important;
    }
    
    #commentModal > div > div:first-child {
        grid-template-columns: 1fr !important;
    }
    
    #commentModal .quality-dashboard {
        display: none !important;
    }
    
    #videoPlayerContainer {
        aspect-ratio: 16/9 !important;
    }
    
    /* Video Info Mobile */
    #commentModal > div > div:last-child > div {
        grid-template-columns: 1fr !important;
        gap: 20px !important;
        padding: 20px 15px !important;
    }
    
    #videoTitleDisplay {
        font-size: 20px !important;
    }
    
    .video-info-buttons {
        flex-wrap: wrap !important;
        gap: 8px !important;
    }
    
    .video-info-buttons button {
        font-size: 13px !important;
        padding: 10px 16px !important;
    }
    
    /* Search Page Mobile */
    .search-container > div {
        grid-template-columns: 1fr !important;
        gap: 20px !important;
    }
    
    .search-sidebar {
        position: sticky !important;
        top: 70px !important;
        z-index: 100 !important;
    }
    
    #searchResults {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 12px !important;
    }
    
    /* Help Center Mobile */
    .faq-question h4 {
        font-size: 14px !important;
    }
    
    .faq-answer p {
        font-size: 13px !important;
    }
    
    /* Contact Page Mobile */
    .contact-grid {
        grid-template-columns: 1fr !important;
    }
    
    /* Watchlist Mobile */
    #watchlistGrid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 12px !important;
    }
    
    /* Subscription Plans Mobile */
    .pricing-grid {
        grid-template-columns: 1fr !important;
        gap: 20px !important;
    }
    
    .pricing-card {
        padding: 25px 20px !important;
    }
    
    .plan-header h3 {
        font-size: 20px !important;
    }
    
    .price {
        font-size: 36px !important;
    }
    
    /* Genres Page Mobile */
    #genres-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 12px !important;
    }
    
    .genre-card {
        height: 140px !important;
    }
    
    .genre-icon {
        font-size: 28px !important;
    }
    
    .genre-name {
        font-size: 14px !important;
    }
    
    .genre-stats {
        font-size: 11px !important;
    }
    
    /* Series/Animation Pages Mobile */
    #series-grid, #animation-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 12px !important;
    }
    
    .series-card, .animation-card {
        min-width: auto !important;
    }
    
    .series-title, .animation-title {
        font-size: 13px !important;
    }
    
    .series-meta, .animation-meta {
        font-size: 11px !important;
    }
    
    /* Filter Chips Mobile */
    .filter-chips {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
        scrollbar-width: none !important;
        padding: 12px 0 !important;
    }
    
    .filter-chips::-webkit-scrollbar {
        display: none !important;
    }
    
    .filter-chip {
        white-space: nowrap !important;
        font-size: 13px !important;
        padding: 6px 14px !important;
    }
    
    /* Dashboard Mobile */
    .dashboard-grid {
        grid-template-columns: 1fr !important;
        gap: 20px !important;
    }
    
    .dashboard-card {
        padding: 20px !important;
    }
    
    .stat-box h4 {
        font-size: 24px !important;
    }
    
    /* Touch Optimizations */
    button, a, .clickable {
        min-height: 44px !important;
        min-width: 44px !important;
    }
    
    input, select, textarea {
        font-size: 16px !important;
    }
    
    /* Prevent zoom on input focus */
    input:focus, select:focus, textarea:focus {
        font-size: 16px !important;
    }
}

/* Small Mobile (320px - 480px) */
@media (max-width: 480px) {
    .content-grid {
        grid-template-columns: 1fr !important;
        gap: 12px !important;
    }
    
    .hero-title {
        font-size: 24px !important;
    }
    
    .section-title {
        font-size: 16px !important;
    }
    
    .trending-card, .popular-card {
        max-width: 100% !important;
    }
    
    #searchResults, #watchlistGrid, #genres-grid {
        grid-template-columns: 1fr !important;
    }
    
    .footer-social {
        justify-content: center !important;
    }
    
    .features-stats {
        grid-template-columns: 1fr !important;
    }
}

/* Tablet (769px - 1024px) */
@media (min-width: 769px) and (max-width: 1024px) {
    .content-grid {
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 14px !important;
    }
    
    .footer-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }
    
    .features-stats {
        grid-template-columns: repeat(4, 1fr) !important;
    }
    
    #searchResults, #watchlistGrid {
        grid-template-columns: repeat(3, 1fr) !important;
    }
    
    #genres-grid {
        grid-template-columns: repeat(3, 1fr) !important;
    }
}

/* Landscape Mobile */
@media (max-height: 500px) and (orientation: landscape) {
    .hero-4k {
        min-height: 100vh !important;
    }
    
    .navbar-premium {
        height: 50px !important;
    }
    
    .nav-container-premium {
        height: 50px !important;
    }
}

/* High DPI Displays */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
    img {
        image-rendering: -webkit-optimize-contrast;
    }
}

/* Dark Mode Support */
@media (prefers-color-scheme: dark) {
    body {
        background: #0f0f0f;
        color: #fff;
    }
}

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

/* Print Styles */
@media print {
    .navbar-premium, .footer-premium, .video-controls, .trending-actions, .popular-actions {
        display: none !important;
    }
}