/* ==========================================================================
   Home Inline Styles
   Scoped to homepage sections — does not affect browse/category grids.
   ========================================================================== */

/* -- Page H1 ------------------------------------------------------------ */
.home-h1 {
    font-size: clamp(1.25rem, 3vw, 1.75rem);
    font-weight: 600;
    color: var(--color-text, #fff);
    margin: var(--space-xl, 2rem) 0 var(--space-lg, 1.5rem);
    line-height: 1.3;
    text-align: center;
}

/* -- TOP 10 Grid -------------------------------------------------------- */
.top10-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-sm, 0.5rem) var(--space-lg, 1.5rem);
}

.top10-card {
    display: flex;
    align-items: center;
    gap: var(--space-md, 1rem);
    padding: var(--space-sm, 0.5rem) 0;
    border-bottom: 1px solid var(--color-border, rgba(255,255,255,0.1));
    text-decoration: none;
    color: var(--color-text, #fff);
    transition: color 0.2s ease;
}

.top10-card:hover { color: var(--color-primary, #FFBADE); }
.top10-card:hover .top10-poster { transform: scale(1.05); }

.top10-rank {
    font-size: clamp(1.75rem, 4vw, 2.75rem);
    font-weight: 700;
    line-height: 1;
    color: transparent;
    -webkit-text-stroke: 2px var(--color-primary, #FFBADE);
    min-width: 2.5ch;
    text-align: center;
    flex-shrink: 0;
}

.top10-poster-link {
    flex-shrink: 0;
    width: 55px;
    border-radius: var(--radius-sm, 4px);
    overflow: hidden;
}

.top10-poster {
    display: block;
    width: 55px;
    height: 78px;
    object-fit: cover;
    border-radius: var(--radius-sm, 4px);
    transition: transform 0.3s ease;
}

.top10-info {
    flex: 1;
    min-width: 0;
}

.top10-title {
    font-size: var(--font-size-sm, 13px);
    font-weight: 500;
    margin: 0 0 4px;
    line-height: 1.3;
}

.top10-title a {
    color: inherit;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.top10-badges {
    display: flex;
    gap: 4px;
    flex-wrap: wrap;
}

.top10-badges .tick-item {
    font-size: 11px;
    font-weight: 600;
    padding: 1px 6px;
    border-radius: 3px;
    color: #111;
}

.top10-badges .tick-sub { background: var(--color-badge-sub, #b0eacd); }
.top10-badges .tick-dub { background: var(--color-badge-dub, #b9e7ff); }

@media (max-width: 767px) {
    .top10-grid { grid-template-columns: 1fr; }
}

/* ── Horizontal Slider ─────────────────────────────────────────────────── */
/*
 * Override the wrapping flexbox grid from styles.css / responsive-grid.css
 * ONLY inside .slider-wrap — turns it into a horizontal scroll strip.
 */
.slider-wrap .film_list .film_list-wrap {
    flex-wrap: nowrap !important;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-behavior: smooth;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    margin: 0 !important;
    gap: var(--space-md, 1rem);
    padding-bottom: var(--space-sm, 0.5rem);
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.slider-wrap .film_list .film_list-wrap::-webkit-scrollbar { display: none; }

/* Card sizing inside sliders — fixed widths, not percentage grid
   Uses double class specificity to beat responsive-grid.css !important rules */
.slider-wrap .film_list .film_list-wrap.film_list-wrap .flw-item,
.slider-wrap .film_list .film_list-wrap.film_list-wrap > li {
    flex: 0 0 auto !important;
    width: 160px !important;
    margin: 0 !important;
    scroll-snap-align: start;
}

.slider-wrap .film_list .film_list-wrap.film_list-wrap > li .flw-item {
    width: 100% !important;
    margin: 0 !important;
}

.slider-wrap .flw-item .film-poster {
    padding-bottom: 140%;
    border-radius: var(--radius-sm, 4px);
}

@media (min-width: 576px) {
    .slider-wrap .film_list .film_list-wrap.film_list-wrap .flw-item,
    .slider-wrap .film_list .film_list-wrap.film_list-wrap > li { width: 170px !important; }
}

@media (min-width: 992px) {
    .slider-wrap .film_list .film_list-wrap.film_list-wrap .flw-item,
    .slider-wrap .film_list .film_list-wrap.film_list-wrap > li { width: 185px !important; }
}

@media (min-width: 1400px) {
    .slider-wrap .film_list .film_list-wrap.film_list-wrap .flw-item,
    .slider-wrap .film_list .film_list-wrap.film_list-wrap > li { width: 200px !important; }
}

/* Slider prev/next — overlay approach (buttons float over scroll edges) */
.slider-wrap {
    position: relative !important;
    display: block !important;
}

.slider-wrap .film_list {
    overflow: hidden !important;
}

.slider-wrap .slider-btn {
    position: absolute !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    z-index: 10;
    background: rgba(32, 31, 49, 0.92);
    border: 1px solid rgba(255, 255, 255, 0.15);
    color: var(--color-text, #fff);
    width: 40px;
    height: 40px;
    border-radius: var(--radius-md, 8px);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    transition: opacity 0.2s ease, background 0.2s ease;
    opacity: 0;
    pointer-events: none;
}

.slider-wrap .slider-prev { left: 4px !important; right: auto !important; }
.slider-wrap .slider-next { right: 4px !important; left: auto !important; }

.slider-wrap:hover .slider-btn { opacity: 1; pointer-events: auto; }
.slider-wrap .slider-btn:hover { background: var(--color-primary, #FFBADE); color: #000; }

@media (hover: none) {
    .slider-wrap .slider-btn { opacity: 0.7; pointer-events: auto; }
}

/* ── Trending Swiper ───────────────────────────────────────────────────── */
.trending-slide {
    width: 38% !important;
    margin-right: 15px;
    flex-shrink: 0;
}

@media (min-width: 576px)  { .trending-slide { width: 28% !important; } }
@media (min-width: 768px)  { .trending-slide { width: 24% !important; } }
@media (min-width: 992px)  { .trending-slide { width: 20% !important; } }
@media (min-width: 1200px) { .trending-slide { width: calc(20% - 15px) !important; } }

.trending-list .swiper-wrapper::-webkit-scrollbar { display: none; }
.trending-list .swiper-wrapper { -ms-overflow-style: none; scrollbar-width: none; }

/* ── Featured Blocks (sidebar lists) ───────────────────────────────────── */
.anif-block-ul li {
    display: flex;
    align-items: flex-start;
    padding: 10px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.anif-block-ul li:last-child { border-bottom: none; }

.anif-block-ul li .film-poster {
    width: 50px !important;
    padding-bottom: 70px !important;
    flex-shrink: 0;
    border-radius: 4px;
    overflow: hidden;
}

.anif-block-ul li .film-detail {
    padding-left: 15px !important;
    flex-grow: 1;
    min-width: 0;
}

.anif-block-ul li .film-name {
    font-size: 14px !important;
    margin-bottom: 5px !important;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box !important;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    line-clamp: 2;
    line-height: 1.4;
    font-weight: 500;
    color: #fff;
}

.anif-block-ul li .fd-infor { display: flex; align-items: center; gap: 0; }

.anif-block-ul li .tick-item {
    color: #111 !important;
    border-radius: 3px;
    padding: 0 5px;
    font-size: 11px !important;
    height: 18px;
    font-weight: 600;
    display: flex;
    align-items: center;
    margin-right: 4px;
}

.anif-block-ul li .tick-item.tick-sub { background: var(--color-badge-sub, #b0eacd) !important; }
.anif-block-ul li .tick-item.tick-dub { background: var(--color-badge-dub, #b9e7ff) !important; margin-right: 10px; }
.anif-block-ul li .tick { gap: 0 !important; }
.anif-block-ul li .tick .tick-item { margin-left: 0 !important; }
.anif-block-ul li .tick .tick-item + .tick-item { margin-left: 0 !important; }
.anif-block-ul li .tick-item.tick-eps { background: transparent !important; color: #fff !important; padding-left: 0; }
.anif-block-ul li .tick-item i { font-size: 10px; margin-right: 3px; }
.anif-block-ul li .fdi-item { font-size: 12px; color: var(--color-text-muted, #aaa); }

.anif-block .anif-block-header {
    color: var(--color-primary, #FFBADE);
    font-weight: 600;
    font-size: 18px;
    margin-bottom: 15px;
}

/* Spotlight navigation — bottom-right corner */
.deslide-wrap .swiper-navigation {
    bottom: 30px;
    top: auto;
    right: 30px;
    transform: none;
    display: flex;
    flex-direction: column;
    gap: 4px;
    pointer-events: none;
}

.deslide-wrap .swiper-button {
    width: 40px;
    height: 40px;
    line-height: 40px;
    background: rgba(255, 255, 255, 0.08);
    border-radius: 6px;
    pointer-events: auto;
    font-size: 16px;
}

@media (min-width: 992px) {
    .deslide-wrap .swiper-navigation { display: flex; }
    .deslide-pagination { display: none; }
}

@media (max-width: 991px) {
    .deslide-wrap .swiper-navigation { display: none; }
    .deslide-pagination { display: flex; }
}

/* ── Trending Mobile Nav ───────────────────────────────────────────────── */
@media (max-width: 768px) {
    #trending-home .trending-navi { display: none !important; }
}

.trending-header-nav { display: none; gap: 8px; margin-left: auto; }

@media (max-width: 768px) {
    .trending-header-nav { display: flex !important; }
}

.trending-header-nav .thn-prev,
.trending-header-nav .thn-next {
    width: 32px;
    height: 32px;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: #fff;
    font-size: 12px;
    transition: all 0.2s ease;
}

.trending-header-nav .thn-prev:hover,
.trending-header-nav .thn-next:hover {
    background: var(--color-primary, #FFBADE);
    color: #111;
    border-color: var(--color-primary, #FFBADE);
}

/* ── Section header ────────────────────────────────────────────────────── */
.block_area-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--space-lg, 1.5rem);
}

.block_area-header .bah-heading { flex: 1; }

/* Slider section overflow clipping */
.block_area {
    overflow: hidden;
    margin-bottom: var(--space-xl, 2rem);
}

/* ── Reduced motion ────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    .slider-wrap .film_list .film_list-wrap { scroll-behavior: auto; }
    .top10-card, .top10-poster, .slider-btn, .swiper-button { transition: none !important; }
}

/* ── Four-Column Category Lists ────────────────────────────────────────── */
.home-lists {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-xl, 2rem);
    margin-bottom: var(--space-2xl, 3rem);
}

.home-list-col .cat-heading {
    font-size: var(--font-size-md, 18px);
    font-weight: 600;
    color: var(--color-primary, #FFBADE);
    margin: 0 0 var(--space-lg, 1.5rem);
}

.home-list-col .hl-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.home-list-col .hl-item {
    display: flex;
    align-items: flex-start;
    gap: var(--space-md, 1rem);
    padding: 10px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.home-list-col .hl-item:last-child { border-bottom: none; }

.home-list-col .hl-poster {
    flex-shrink: 0;
    width: 50px;
    height: 70px;
    border-radius: var(--radius-sm, 4px);
    overflow: hidden;
    position: relative;
    background: rgba(255, 255, 255, 0.1);
}

.home-list-col .hl-poster img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.home-list-col .hl-info {
    flex: 1;
    min-width: 0;
}

.home-list-col .hl-title {
    font-size: 14px;
    font-weight: 500;
    margin: 0 0 5px;
    line-height: 1.4;
}

.home-list-col .hl-title a {
    color: var(--color-text, #fff);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.home-list-col .hl-title a:hover { color: var(--color-primary, #FFBADE); }

.home-list-col .hl-meta {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-wrap: wrap;
}

.home-list-col .hl-meta .tick-item {
    font-size: 11px;
    font-weight: 600;
    padding: 0 5px;
    height: 18px;
    display: inline-flex;
    align-items: center;
    border-radius: 3px;
    color: #111;
}

.home-list-col .hl-meta .tick-sub { background: var(--color-badge-sub, #b0eacd); }
.home-list-col .hl-meta .tick-dub { background: var(--color-badge-dub, #b9e7ff); }
.home-list-col .hl-meta .tick-eps {
    background: transparent;
    color: var(--color-text-muted, #aaa);
    padding-left: 4px;
    font-weight: 400;
}

.home-list-col .hl-meta .fdi-item {
    font-size: 12px;
    color: var(--color-text-muted, #aaa);
}

.home-list-col .hl-meta .dot {
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.3);
    display: inline-block;
}

.home-list-col .hl-viewmore {
    display: block;
    padding-top: 12px;
    font-size: 13px;
    color: var(--color-text-muted, #aaa);
}

.home-list-col .hl-viewmore:hover { color: var(--color-primary, #FFBADE); }

/* Responsive: 4 → 2 → 1 columns */
@media (max-width: 991px) {
    .home-lists { grid-template-columns: repeat(2, 1fr); gap: var(--space-lg, 1.5rem); }
}

@media (max-width: 575px) {
    .home-lists { grid-template-columns: 1fr; }
}

/* ─── Mobile Card Title & Detail Fix ─── */
@media (max-width: 768px) {
    /* Title Font Size & Line Clamping */
    .film-detail .film-name,
    .flw-item .film-name,
    .flw-item .film-name a {
        font-size: 12.5px !important;
        font-weight: 600 !important;
        line-height: 1.3 !important;
        margin-top: 6px !important;
        margin-bottom: 2px !important;
        
        /* Max 2 lines tak limit karein aur baqi par ellipsis (...) lagayein */
        display: -webkit-box !important;
        -webkit-line-clamp: 2 !important;
        -webkit-box-orient: vertical !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        word-break: break-word !important;
    }

    /* Sub/Dub Badges Size on Mobile */
    .film-poster .tick .tick-item {
        font-size: 9.5px !important;
        padding: 1px 4px !important;
        height: auto !important;
        line-height: 1.2 !important;
    }

    /* Meta Info (Type, Ep) */
    .film-detail .fd-infor {
        font-size: 11px !important;
        color: #94a3b8 !important;
        margin-top: 2px !important;
    }

    .film-detail .fd-infor .fdi-item {
        font-size: 11px !important;
    }
}

/* ─── Desktop & Laptop Card Typography Fix ─── */
.film-detail,
.flw-item .film-detail {
    padding: 10px 0 0 0 !important;
}

/* Anime Title (Clean, 14px, 2 Lines Clamped) */
.film-detail .film-name,
.flw-item .film-name,
h3.film-name {
    font-size: 14px !important;
    font-weight: 600 !important;
    line-height: 1.35 !important;
    margin: 0 0 4px 0 !important;
    min-height: 38px !important; /* Dono lines ka fixed height taake cards upar neeche na hon */
    
    /* 2 lines tak clamp karein, baqi par (...) lag jaye */
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    word-break: break-word !important;
}

.film-detail .film-name a,
.flw-item .film-name a {
    color: #f1f5f9 !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    text-decoration: none !important;
    transition: color 0.15s ease;
}

.film-detail .film-name a:hover,
.flw-item .film-name a:hover {
    color: #ffbade !important;
}

/* Sub Meta Info (ONA / TV • Duration) */
.film-detail .fd-infor {
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    font-size: 12px !important;
    color: #94a3b8 !important;
    font-weight: 500 !important;
    line-height: 1.2 !important;
}

.film-detail .fd-infor .fdi-item {
    font-size: 12px !important;
    color: #94a3b8 !important;
}

.film-detail .fd-infor .dot {
    width: 3px !important;
    height: 3px !important;
    border-radius: 50% !important;
    background: #64748b !important;
    display: inline-block !important;
}

/* ─── Allow Dropdowns to Flow Outside Header ─── */
#header,
#header .container,
#header .container-fluid,
.header-container-mobile,
.desktop-nav-area,
.header-setting {
    overflow: visible !important;
}

/* ─── Dropdown Positioning & Display Logic ─── */
details.hst-details {
    position: relative !important;
}

/* Browser default arrow marker hide */
details.hst-details summary::-webkit-details-marker,
details.hst-details summary::marker {
    display: none !important;
}

details.hst-details summary {
    list-style: none !important;
    outline: none !important;
    cursor: pointer !important;
}

/* Default Submenu State (Hidden) */
.header_menu-sub {
    position: absolute !important;
    top: calc(100% + 6px) !important;
    left: 0;
    z-index: 99999 !important;
    display: none !important;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s ease, transform 0.2s ease;
    transform: translateY(6px);
}

/* 1. Click State: Jab User Click kare (details[open]) */
details.hst-details[open] > .header_menu-sub {
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
    transform: translateY(0) !important;
    pointer-events: auto !important;
}

/* 2. Hover State: Desktop Laptop par mouse le jate hi khule */
@media (min-width: 992px) {
    details.hst-details:hover > .header_menu-sub {
        display: block !important;
        opacity: 1 !important;
        visibility: visible !important;
        transform: translateY(0) !important;
        pointer-events: auto !important;
    }
}

/* Submenu container appearance */
.header_menu-sub .sub-menu {
    background: #181b24 !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-radius: 8px !important;
    padding: 8px 0 !important;
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.7) !important;
    list-style: none !important;
    margin: 0 !important;
}

/* Genre Dropdown Specific Width & Alignment */
.genre-dropdown {
    width: 480px !important;
    left: -140px !important;
}