/**
 * Poster Overlay Customization
 * - Removes play button icon from poster overlays
 * - Keeps the clickable overlay for navigation
 * - Mobile-optimized badge styling
 * - NEW: Top badges for Duration/Type, Bottom badges for SUB/DUB
 */

/* Hide the play icon completely */
.flw-item .film-poster .film-poster-ahref i {
    display: none !important;
}

/* ===========================================
   SPOTLIGHT METADATA LAYOUT
   =========================================== */
.sc-detail {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 15px;
    margin-bottom: 20px;
}

.scd-item {
    display: flex;
    align-items: center;
    font-size: 14px;
    color: #fff;
    font-weight: 500;
    white-space: nowrap;
}

.scd-item i {
    color: #ffbade;
    /* HiAnime Pink accent */
    font-size: 14px;
}

.scd-item .quality {
    background: #ffbade;
    color: #111;
    font-weight: 700;
    padding: 2px 5px;
    border-radius: 4px;
    font-size: 11px;
}

.scd-item .tick-item {
    padding: 2px 6px !important;
    font-size: 11px !important;
    height: 20px;
    border-radius: 4px;
    display: flex;
    align-items: center;
}

/* Mobile adjustments for Spotlight */
@media (max-width: 576px) {
    .sc-detail {
        gap: 10px;
        margin-bottom: 15px;
    }

    .scd-item {
        font-size: 12px;
    }

    .scd-item i {
        font-size: 12px;
    }
}

/* Keep the overlay functional but remove the blur effect on hover */
.flw-item .film-poster:hover .film-poster-ahref:after {
    opacity: 0 !important;
}

/* Ensure the poster link is still clickable across the entire poster */
.flw-item .film-poster .film-poster-ahref {
    cursor: pointer;
}

/* Remove any border/outline that appears on hover or focus */
.flw-item .film-poster .film-poster-ahref:hover,
.flw-item .film-poster .film-poster-ahref:focus {
    outline: none !important;
    border: none !important;
}

/* Hide any text content on poster overlay */
.flw-item .film-poster .film-poster-ahref::before,
.flw-item .film-poster .film-poster-ahref::after {
    content: none !important;
    display: none !important;
}

.flw-item .film-poster .film-poster-ahref {
    font-size: 0 !important;
    color: transparent !important;
}

.flw-item:hover,
.flw-item:focus {
    outline: none !important;
    border: none !important;
}

.film-poster:hover,
.film-poster:focus {
    outline: none !important;
    border: none !important;
}

/* Disable the hover transform effect that moves posters up */
.flw-item:hover {
    transform: none !important;
    box-shadow: none !important;
}

/* ===========================================
   BADGE BASE STYLES
   =========================================== */

/* Ensure tick containers are flex */
.film-poster .tick {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    align-items: center;
    position: absolute !important;
    z-index: 5;
    flex-wrap: nowrap;
}

/* Common style for all badge items */
.film-poster .tick .tick-item {
    margin: 0 !important;
    padding: 3px 6px !important;
    font-size: 11px !important;
    font-weight: 600;
    line-height: 1;
    display: flex;
    align-items: center;
    height: 20px;
    white-space: nowrap;
    border-radius: 4px;
}

/* Icon styling */
.film-poster .tick .tick-item i {
    font-size: 10px;
    margin-right: 3px !important;
}

/* ===========================================
   TOP BADGES (Duration & Type)
   =========================================== */

/* Top-Left: Duration */
.film-poster .tick.ltr.tick-top {
    top: 8px !important;
    left: 8px !important;
    bottom: auto !important;
    right: auto !important;
}

/* Top-Right: Type */
.film-poster .tick.rtl.tick-top {
    top: 8px !important;
    right: 8px !important;
    bottom: auto !important;
    left: auto !important;
}

/* ===========================================
   BOTTOM BADGES (Merged Row)
   =========================================== */

.film-poster .tick.ltr.tick-bottom {
    bottom: 8px !important;
    left: 0 !important;
    right: 0 !important;
    top: auto !important;
    gap: 2px !important;
    justify-content: center !important;
    flex-wrap: nowrap !important;
    width: 100% !important;
    max-width: 100% !important;
}

/* Rounded squares for bottom badges */
.film-poster .tick.ltr.tick-bottom .tick-item {
    border-radius: 4px !important;
    margin-right: 0 !important;
}

/* ===========================================
   BOTTOM-RIGHT BADGES (Duration)
   =========================================== */

.film-poster .tick.rtl.tick-bottom {
    bottom: 8px !important;
    right: 8px !important;
    top: auto !important;
    left: auto !important;
}

/* ===========================================
   BADGE COLORS
   =========================================== */

/* Status Badge - White/Modern */
.tick-item.tick-status {
    background-color: #fff !important;
    color: #111 !important;
    font-weight: 700;
}

/* SUB Badge - Green with Pink Icon */
.tick-item.tick-sub {
    background-color: #B0E3AF !important;
    color: #201F31 !important;
}

.tick-item.tick-sub i {
    color: #111 !important;
    /* Black for Icon */
}

/* DUB Badge - Blue with Black Icon */
.tick-item.tick-dub {
    background-color: #BBE1FA !important;
    color: #201F31 !important;
}

.tick-item.tick-dub i {
    color: #111 !important;
    /* Black for Icon */
}

/* Duration/Episode Badge - White */
.tick-item.tick-eps {
    background-color: #fff !important;
    color: #201F31 !important;
}

/* Type Badge (TV/MOVIE) - Pink */
.film-poster .tick.rtl .tick-item.tick-rate,
.film-poster .tick.rtl.tick-top .tick-item.tick-rate {
    background: #FFBADE !important;
    color: #201F31 !important;
    font-weight: 700;
    text-transform: uppercase;
}

/* ===========================================
   MOBILE OPTIMIZATIONS
   =========================================== */

@media (max-width: 768px) {

    /* Smaller badges on tablets */
    .film-poster .tick .tick-item {
        padding: 2px 5px !important;
        font-size: 10px !important;
        height: 18px;
    }

    .film-poster .tick .tick-item i {
        font-size: 9px;
        margin-right: 2px !important;
    }

    .film-poster .tick.ltr.tick-top,
    .film-poster .tick.rtl.tick-top {
        top: 6px !important;
    }

    .film-poster .tick.ltr.tick-top {
        left: 6px !important;
    }

    .film-poster .tick.rtl.tick-top {
        right: 6px !important;
    }

    .film-poster .tick.ltr.tick-bottom {
        bottom: 6px !important;
        left: 6px !important;
    }
}

@media (max-width: 576px) {

    /* Even smaller badges on mobile */
    .film-poster .tick .tick-item {
        padding: 2px 4px !important;
        font-size: 9px !important;
        height: 16px;
    }

    .film-poster .tick .tick-item i {
        font-size: 8px;
        margin-right: 1px !important;
    }

    .film-poster .tick.ltr.tick-top,
    .film-poster .tick.rtl.tick-top {
        top: 5px !important;
    }

    .film-poster .tick.ltr.tick-top {
        left: 5px !important;
    }

    .film-poster .tick.rtl.tick-top {
        right: 5px !important;
    }

    .film-poster .tick.ltr.tick-bottom {
        bottom: 5px !important;
        left: 5px !important;
    }
}

@media (max-width: 400px) {

    /* Ultra compact on very small screens */
    .film-poster .tick .tick-item {
        padding: 1px 3px !important;
        font-size: 8px !important;
        height: 14px;
    }

    .film-poster .tick .tick-item i {
        font-size: 7px;
        margin-right: 1px !important;
    }

    .film-poster .tick.ltr.tick-top,
    .film-poster .tick.rtl.tick-top {
        top: 4px !important;
    }

    .film-poster .tick.ltr.tick-top {
        left: 4px !important;
    }

    .film-poster .tick.rtl.tick-top {
        right: 4px !important;
    }

    .film-poster .tick.ltr.tick-bottom {
        bottom: 4px !important;
        left: 4px !important;
    }
}