/* Responsive Design - إصلاح شامل واحترافي */
/* ================================= */

/* إصلاحات عامة */
.container {
    width: 100%;
    padding-right: 15px;
    padding-left: 15px;
    margin-right: auto;
    margin-left: auto;
}

/* تنسيق عناصر Select */
.filter-select, select {
    background: rgba(255, 255, 255, 0.1) !important;
    border: 1px solid rgba(139, 0, 0, 0.5) !important;
    border-radius: 8px !important;
    padding: 10px 15px !important;
    color: #fff !important;
    font-family: 'Cairo', sans-serif !important;
    outline: none !important;
    cursor: pointer !important;
    appearance: none !important;
    -webkit-appearance: none !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='white' viewBox='0 0 16 16'%3E%3Cpath d='M7.247 11.14 2.451 5.658C1.885 5.013 2.345 4 3.204 4h9.592a1 1 0 0 1 .753 1.659l-4.796 5.48a1 1 0 0 1-1.506 0z'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: left 10px center !important;
    padding-left: 35px !important;
}

/* Large Screens (1200px and up) */
@media (min-width: 1200px) {
    .container { max-width: 1140px; }
    .series-grid { grid-template-columns: repeat(5, 1fr); gap: 25px; }
}

/* Tablets (768px to 991px) */
@media (max-width: 991px) {
    .series-grid { grid-template-columns: repeat(3, 1fr); gap: 15px; }
}

/* Mobile Portrait (up to 767px) */
@media (max-width: 767px) {
    body {
        padding-top: 60px;
    }

    /* إصلاح الكروت لتكون متوافقة مع الصور */
    .series-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 10px !important;
        margin: 15px 10px !important;
    }
    
    .series-card, .series-card-v2, .series-card-v3, .result-card {
        height: auto !important;
        border-radius: 10px !important;
    }
    
    .series-poster, .card-poster, .poster-wrapper, .result-poster {
        height: 200px !important;
        aspect-ratio: 2/3 !important;
    }
    
    .poster-img, .card-poster img, .poster-wrapper img, .result-poster img {
        height: 100% !important;
        width: 100% !important;
        object-fit: cover !important;
    }
    
    .series-info, .card-info, .info-wrapper, .result-info {
        padding: 10px !important;
    }
    
    .series-title, .card-info h3, .info-wrapper h3, .result-title {
        font-size: 14px !important;
        height: auto !important;
        margin-bottom: 5px !important;
    }
    
    .series-meta, .meta-wrapper {
        font-size: 10px !important;
        gap: 5px !important;
    }

    /* Hero Section */
    .hero-section {
        padding: 40px 15px !important;
        min-height: auto !important;
    }

    .hero-title {
        font-size: 32px !important;
    }

    .hero-subtitle {
        font-size: 14px !important;
    }

    .hero-actions {
        flex-direction: column;
        gap: 10px;
    }

    .btn-primary, .btn-secondary {
        width: 100%;
        justify-content: center;
    }
    
    /* Navbar Fixes */
    .glass-navbar {
        height: 60px !important;
    }

    .logo-text {
        font-size: 18px !important;
    }

    .logo-sub {
        font-size: 9px !important;
    }

    /* Watch Page Fixes */
    .watch-wrapper {
        padding-top: 10px !important;
    }

    .player-section {
        margin: 0 -15px 20px !important;
        border-radius: 0 !important;
    }

    .episode-header {
        padding: 15px !important;
        border-radius: 10px !important;
    }

    .episode-title {
        font-size: 20px !important;
    }

    .episode-nav {
        grid-template-columns: 1fr !important;
    }

    /* Series Page Fixes */
    .series-header-flex {
        flex-direction: column !important;
        align-items: center !important;
        text-align: center !important;
    }

    .series-poster-box {
        width: 180px !important;
        margin-bottom: 20px !important;
    }

    .series-main-title {
        font-size: 24px !important;
    }

    .series-meta-info {
        justify-content: center !important;
    }

    .episodes-grid {
        grid-template-columns: 1fr !important;
    }

    /* Mobile Player Fixes */
    .video-container {
        aspect-ratio: 16 / 9 !important;
        width: 100% !important;
    }

    .video-js {
        width: 100% !important;
        height: auto !important;
    }

    .vjs-quality-menu {
        right: auto !important;
        left: 0 !important;
    }
}

/* Fix for touch interactions */
.series-card, .episode-card, .nav-link, .btn-primary, .btn-secondary, .overlay-btn, .btn-play, .btn-view, .episode-item, .series-card-v2, .series-card-v3 {
    cursor: pointer;
    touch-action: manipulation;
    -webkit-tap-highlight-color: rgba(139, 0, 0, 0.2);
    pointer-events: auto !important;
}

/* Ensure 3D background doesn't block clicks */
#bg-3d {
    pointer-events: none !important;
    z-index: -1 !important;
}