/*
Theme name: Anime Online Theme v3 - New
Theme URI: https://www.lucodeia.com/
Description: Anime Online Wordpress Theme
Author: Lucodeia
Author URI: https://www.lucodeia.com/
Version: 3.1
*/

/* Mobile menu font fix */
.mobile-menu {
    font-family: 'Cairo', sans-serif !important;
}

/* Restore FontAwesome font for icons inside the menu button */
.mobile-menu i,
.mobile-menu .fa,
.mobile-menu .fas,
.mobile-menu .far,
.mobile-menu .fab {
    font-family: 'Font Awesome 5 Free', 'FontAwesome', sans-serif !important;
}


/* =============================================
   Watch Page - Episode Selector Font Fix
   ============================================= */

/* Ensure scrollbar appears when episodes > 12 */
.scroll-episodes-list,
ul.scroll-episodes-list,
#ULEpisodesList {
    max-height: 448px;
    overflow-y: auto !important;
    overflow-x: hidden;
    scrollbar-width: thin;
    scrollbar-color: #000000 #1a1a1a;
}

/* Scrollbar styling - black */
.scroll-episodes-list::-webkit-scrollbar,
#ULEpisodesList::-webkit-scrollbar {
    width: 6px;
}

.scroll-episodes-list::-webkit-scrollbar-track,
#ULEpisodesList::-webkit-scrollbar-track {
    background: #1a1a1a;
    border-radius: 3px;
}

.scroll-episodes-list::-webkit-scrollbar-thumb,
#ULEpisodesList::-webkit-scrollbar-thumb {
    background-color: #000000;
    border-radius: 3px;
    border: 1px solid #333;
}

.scroll-episodes-list::-webkit-scrollbar-thumb:hover,
#ULEpisodesList::-webkit-scrollbar-thumb:hover {
    background-color: #222222;
}

.all-episodes,
.all-episodes-head,
.all-episodes-list,
.all-episodes-list li,
.all-episodes-list li a,
.all-episodes-list .episode-active a,
.search-in-episodes-list,
.search-in-episodes-list input,
.search-in-episodes-list .form-control,
.search-in-episodes-list label,
#inputEpisode {
    font-family: 'NeoSansArabic-Bold', 'NeoSansArabic', 'Cairo', Arial, sans-serif !important;
}

/* =============================================
   Anime Detail Page - Mobile / Tablet Layout
   ============================================= */

/* On mobile & tablet: poster first, then details */
@media (max-width: 991px) {
    .anime-info-container {
        display: flex;
        flex-direction: column;
    }

    /* Poster comes first */
    .anime-info-right {
        order: 1;
        width: 100% !important;
        float: none !important;
        text-align: center;
        margin-bottom: 15px;
    }

    /* Details come second */
    .anime-info-left {
        order: 2;
        width: 100% !important;
        float: none !important;
    }

    /* Center the poster image on mobile */
    .anime-thumbnail {
        display: flex;
        justify-content: center;
    }

    .anime-thumbnail img {
        max-width: 200px;
        width: 100%;
        height: auto;
    }
}

/* =============================================
   Episode Cards - Fixed Aspect Ratio (16:9)
   Like competitor site approach
   ============================================= */

/* الحاوية الخارجية */
/* Fix: منع امتداد الأعمدة لنفس الارتفاع - يسبب مساحة سوداء في الديسكتوب */
.episodes-list-content .row.display-flex,
.episodes-list-content .row[class*="display-flex"] {
    align-items: flex-start !important;
}

.episodes-card-container {
    background: transparent;
    overflow: hidden;
}

/* البطاقة نفسها */
.episodes-card {
    position: relative;
    overflow: hidden;
    height: auto !important;
    /* تجاوز height:175px الأصلي */
}

/* الحاوية الداخلية ehover6 */
.episodes-card .hover,
.episodes-card .ehover6,
.episodes-card .hover.ehover6 {
    height: auto !important;
    display: block;
    position: relative;
    overflow: hidden;
}

/* الصورة تأخذ نسبة 16:9 دائماً (مثل 279×157) */
.episodes-card .hover.ehover6,
.episodes-card>.hover {
    position: relative;
    overflow: hidden;
    display: block;
}

.episodes-card img,
.episodes-card img.img-responsive {
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    object-position: center;
    display: block;
    max-width: 100% !important;
}