/* Custom CSS for Header Improvements */

/* =============================================================
   ROOT FIX 1 — UNIVERSAL SWIPER FOUC PREVENTION
   
   PROBLEM: Before Swiper.js initialises, every .swiper-slide is a
   block-level element and stacks VERTICALLY. The page becomes
   extremely tall, all content below swipers jumps far down.
   When Swiper.js runs it arranges slides in a flex row — everything
   snaps back up. User sees: content drops → disappears → comes back.
   
   FIX: Use :not(.swiper-initialized) to pre-apply the correct
   flex layout on EVERY swiper on the page BEFORE JS runs.
   Once Swiper adds .swiper-initialized, it takes full control
   with inline styles — these rules stop matching automatically.
   ============================================================= */

/* Step 1: clip the swiper container so overflow slides are hidden */
.swiper:not(.swiper-initialized) {
    overflow: hidden !important;
    max-height: 500px !important; /* Hard limit for home slider and others */
}

/* Step 2: force flex row on wrapper — same as what Swiper does */
.swiper:not(.swiper-initialized) .swiper-wrapper {
    display: flex !important;
    flex-wrap: nowrap !important;
    height: auto !important;
}

/* Step 3: pre-constrain each slide to roughly 1 visible slide width
   so no slide takes 100% width and forces the page to be wide.
   Swiper overrides this with inline styles after init. */
.swiper:not(.swiper-initialized) .swiper-slide {
    flex-shrink: 0 !important;
    width: 25% !important;      /* safe default ≈ ~4 slides visible */
    min-width: 0 !important;
}

/* Specific fix for Main Slider (Home Page) Pre-Init */
.mySwiper2:not(.swiper-initialized) .swiper-slide {
    width: 100% !important;
    height: 400px !important;
}

/* Specific fix for Trending Slider Pre-Init */
.tr-trending-swiper:not(.swiper-initialized) {
    max-height: 320px !important;
}

.tr-trending-swiper:not(.swiper-initialized) .swiper-slide {
    width: 180px !important; 
    max-width: 30vw !important;
    height: 270px !important;
}

.tr-trending-swiper:not(.swiper-initialized) .tr-poster-box {
    transform: none !important; /* Disable scale before JS runs */
    width: 100% !important;
}

/* Global Image Constraint before Init */
.swiper:not(.swiper-initialized) img {
    width: 100% !important;
    max-width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
}

/* Step 4: prevent slides from going opacity:0 / invisible */
.swiper .swiper-slide {
    opacity: 1 !important;
    visibility: visible !important;
}

/* =============================================================
   ROOT FIX 2 — GLOBAL ANIMATION KILL
   pub.min.css defined 3 animations causing visual glitches:
     .anm-a  → fadeIn     (opacity 0→1)         → black screen flash
     .anm-b  → fadeInUp   (slides from below)   → jump animation  
     .anm-c  → spin       (rotating)            → unnecessary
   All three @keyframes have been deleted from pub.min.css.
   This CSS block ensures any remaining references are neutered.
   ============================================================= */
[class*="anm-"],
.anm-a,
.anm-b,
.anm-c {
    animation: none !important;
    animation-duration: 0s !important;
    animation-delay: 0s !important;
    animation-fill-mode: none !important;
    opacity: 1 !important;
    transform: none !important;
    visibility: visible !important;
}

/* Kill fadeIn on sub-menus and tooltips */
.sub-menu,
.tooltipster-base {
    animation: none !important;
    animation-duration: 0s !important;
}

/* =============================================================
   ROOT FIX 3 — ALPINE.JS FOUC PREVENTION
   Elements with x-cloak should be invisible until Alpine runs.
   Alpine removes x-cloak once it processes the element,
   making it appear instantly without any layout flash.
   ============================================================= */
[x-cloak] {
    display: none !important;
}

/* aa-tb tabs: no fade, instant show/hide */
.aa-tb {
    animation: none !important;
    opacity: 1 !important;
}

/* Hidden tabs stay hidden */
.aa-tb.hdd:not(.on) {
    display: none !important;
    opacity: 0 !important;
}

/* Rock-solid Tab and Carousel Visibility */
.aa-tb.on {
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
}

/* Fix: Ensure the first tab is visible even before Alpine.js fully kicks in */
.movies-tbs-cn > .aa-tb:first-child,
.series-tbs-cn > .aa-tb:first-child {
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
}

/* Critical Layout Pull-Ups (Moved from layout-scale.css to prevent Bounce) */
.bd.cont {
    margin-top: -0.1rem !important;
    position: relative;
    z-index: 50;
    padding-top: 0 !important;
}

.movies-tbs-cn, .series-tbs-cn {
    margin-top: -4.2rem !important; /* Slightly increased to perfectly align posters over the strip */
    position: relative;
    z-index: 60;
}

/* Carousel Stability Fixes for Movies/Series */
.mySwipers:not(.swiper-initialized) {
    display: flex !important;
    overflow: hidden !important;
}

.mySwipers:not(.swiper-initialized) .swiper-wrapper {
    display: flex !important;
}

/* Stable Poster Aspect Ratio to prevent jumps */
.post .post-thumbnail {
    aspect-ratio: 2 / 3 !important;
    background: rgba(255, 255, 255, 0.03); /* Subtle placeholder feel */
    overflow: hidden;
    position: relative;
    z-index: 1;
}

.post .post-thumbnail img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
}

/* =========================================
   LOGO IMAGE STYLES (Banner Logo Class)
   Keep this separate and don't mix with others.
   ========================================= */
header.hd figure.logo img {
    /* Dimensions */
    height: 32px;
    /* Default height */
    width: auto;
    /* Maintain aspect ratio */
    max-width: 100%;
    /* Prevent overflow */

    /* Display & Positioning */
    display: block;
    object-fit: contain;

    /* Effects */
    transition: all 0.3s ease;
}

/* Mobile Responsiveness for Logo */
@media (max-width: 768px) {
    header.hd figure.logo img {
        height: 28px;
        /* Smaller height on mobile */
        width: auto;
    }
}

/* 2. Search Component Logic */
/* Desktop State (> 768px) */
.search-wrap-main {
    flex-grow: 1;
    display: flex;
    justify-content: center;
    /* Center horizontally */
    align-items: center;
    margin-left: 20px;
    /* Adjust left margin */
    margin-right: 220px;
    /* Push search box slightly left by increasing right margin */
    position: relative;
}

.search-trigger-mobile {
    display: none;
}

/* Desktop Search Form - Ensure visibility and styling */
.search-form-container {
    display: block;
    width: 100%;
    max-width: 580px;
    /* Slightly reduced width for better proportion */
}

/* Override any theme hidden classes if present */
.search-form-container form.search {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    position: relative !important;
    background: #1f1f1f;
    /* Slightly lighter dark background to match screenshot */
    border-radius: 50px;
    /* Pill shape */
    padding: 0;
    /* Remove padding from form container */
    border: 1px solid rgba(255, 255, 255, 0.08);
    /* Subtle border */
    align-items: center;
    box-shadow: none !important;
    /* Prevent white strip */
    height: 48px;
    /* Slightly taller for better touch target */
}

/* Prevent white background on focus/active if theme adds it */
.search-form-container form.search.on,
.search-form-container form.search:focus-within {
    background: #2a2a2a !important;
    box-shadow: none !important;
    outline: none !important;
}

/* Move button (icon) to LEFT */
.search-form-container form.search button {
    order: -1;
    /* Move to start */
    background: transparent;
    border: none;
    color: #bbb;
    /* Slightly lighter icon color */
    cursor: pointer;
    padding: 0 12px 0 15px;
    /* Adjust padding: right 12px, left 15px */
    font-size: 16px;
    display: flex;
    align-items: center;
    height: 100%;
    /* Match container height */
}

/* Fix vertical alignment of icon */
.search-form-container form.search button i {
    vertical-align: middle;
    line-height: 1;
    font-size: 16px;
    /* Ensure icon size */
}

/* Input styling */
.search-form-container form.search input {
    background: transparent;
    border: none;
    color: #fff;
    width: 100%;
    outline: none !important;
    box-shadow: none !important;
    /* Prevent white strip */
    padding: 0 20px 0 0;
    /* Padding right */
    font-size: 15px;
    /* Slightly larger font */
    height: 100%;
    /* Match container height */
    line-height: normal;
}

.search-form-container form.search input::placeholder {
    color: #888;
}

/* Live Search Results Dropdown */
.live-search-results {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: #1f1f1f;
    border-radius: 12px;
    margin-top: 8px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.8);
    border: 1px solid rgba(255, 255, 255, 0.08);
    overflow: hidden;
    z-index: 1000;
    max-height: 400px;
    overflow-y: auto;
}

.live-search-results ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.live-search-results li {
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.live-search-results li:last-child {
    border-bottom: none;
}

.live-search-results a {
    display: flex;
    align-items: center;
    padding: 10px 15px;
    color: #fff;
    text-decoration: none;
    transition: background 0.2s;
}

.live-search-results a:hover {
    background: rgba(255, 255, 255, 0.05);
}

.live-search-results .thumb {
    width: 40px;
    height: 60px;
    margin-right: 15px;
    border-radius: 4px;
    overflow: hidden;
    background: #111;
    flex-shrink: 0;
}

.live-search-results .thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.live-search-results .info {
    flex-grow: 1;
}

.live-search-results .title {
    display: block;
    font-size: 14px;
    font-weight: 500;
    margin-bottom: 4px;
}

.live-search-results .meta {
    display: block;
    font-size: 12px;
    color: #9ca3af;
}

.live-search-results .no-results {
    padding: 15px;
    text-align: center;
    color: #9ca3af;
    font-size: 14px;
}

/* Mobile State (< 768px) */
@media (max-width: 768px) {
    .search-wrap-main {
        flex-grow: 0;
        margin: 0 10px 0 0;
        position: static;
        /* For absolute dropdown positioning */
    }

    .search-trigger-mobile {
        display: flex;
        background: transparent;
        border: none;
        color: #fff;
        padding: 8px;
        cursor: pointer;
        align-items: center;
        justify-content: center;
    }

    .search-trigger-mobile:hover {
        color: #ff9800;
    }

    /* Mobile Dropdown Search Form - Transparent Overlay Style */
    .search-form-container {
        display: none;
        /* Hidden by default */
        position: absolute;
        top: 100%;
        /* Below header */
        left: 0;
        right: 0;
        width: 100%;
        max-width: none;
        background: transparent;
        /* Fully transparent background */
        padding: 8px 15px;
        /* Adjust padding */
        box-shadow: none;
        /* Remove background shadow */
        z-index: 999;
        margin-top: 2px;
        /* Very slight gap */
        backdrop-filter: none;
        /* Remove blur from container */
    }

    .search-form-container.mobile-show {
        display: block;
        animation: slideDown 0.2s ease-out;
        /* Faster, snappier animation */
    }

    /* Input box styling for mobile */
    .search-form-container form.search {
        border-radius: 8px;
        /* Softer, more modern rounded rectangle */
        background: rgba(35, 35, 35, 0.95);
        /* Elegant dark grey with slight transparency */
        border: 1px solid rgba(255, 255, 255, 0.08);
        /* Very subtle border */
        padding: 0;
        /* Let internal elements handle spacing */
        height: 42px;
        /* Slimmer, sleeker height */
        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4) !important;
        /* Elegant floating shadow */
        outline: none !important;
        /* Prevent focus outline */
        align-items: center;
        /* Ensure contents are centered vertically */
        backdrop-filter: blur(8px);
        /* Add blur directly to the bar for a premium glass feel */
    }

    /* Move button (icon) styling for mobile */
    .search-form-container form.search button {
        color: #9ca3af;
        /* Soft grey icon, not harsh white */
        padding: 0 12px;
        /* Adjust padding */
        transition: color 0.2s;
    }

    .search-form-container form.search button i {
        font-size: 16px;
        /* perfectly sized icon */
    }

    /* Prevent white background on focus for mobile */
    .search-form-container form.search.on,
    .search-form-container form.search:focus-within,
    .search-form-container form.search:active {
        background: rgba(45, 45, 45, 0.98) !important;
        /* Slightly lighter when active */
        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5) !important;
        outline: none !important;
        border: 1px solid rgba(255, 255, 255, 0.15) !important;
        /* Slightly visible border on focus */
    }

    .search-form-container form.search:focus-within button {
        color: #ffffff;
        /* Icon brightens when focused */
    }

    /* Ensure input stays transparent on focus and styling */
    .search-form-container form.search input,
    .search-form-container form.search input:focus,
    .search-form-container form.search input:active {
        background: transparent !important;
        outline: none !important;
        box-shadow: none !important;
        color: #f3f4f6;
        /* Off-white text, easier on eyes */
        font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
        font-size: 15px;
        /* Perfect reading size */
        padding-left: 0;
        /* Icon already has padding */
        width: 100%;
    }

    /* Placeholder styling */
    .search-form-container form.search input::placeholder {
        color: #6b7280;
        /* Elegant muted placeholder */
        font-weight: 400;
    }
}

@keyframes slideDown {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* 3. User Menu / Auth Buttons Logic */

/* Shared Styles */
.user-menu {
    display: flex;
    align-items: center;
    gap: 10px;
}

.user-menu button.btn {
    transition: all 0.3s ease;
}

/* Mobile Styles (< 768px) */
@media (max-width: 768px) {

    /* Hide Sign Up Button on Mobile */
    .signup-btn {
        display: none !important;
    }

    /* Modify Login Button to be Icon Only */
    .login-btn span {
        display: none !important;
        /* Hide "Log in" text */
    }

    .login-btn {
        padding: 0 !important;
        border-radius: 50% !important;
        width: 40px;
        height: 40px;
        min-width: 40px;
        /* Prevent shrinking */
        display: flex !important;
        align-items: center;
        justify-content: center;
        border: 1px solid rgba(255, 255, 255, 0.2) !important;
        background: transparent !important;
    }

    /* Ensure Icon is visible and perfectly centered */
    .login-btn .avatar {
        display: block !important;
        font-size: 18px;
        color: #fff;
        margin: 0 !important;
    }

    /* Fix the inner icon positioning as requested */
    .login-btn .avatar:before {
        width: 18px !important;
        height: 18px !important;
        position: absolute;
        left: 0;
        top: 0;
        right: 0;
        bottom: 0;
        margin: auto;
        line-height: 1 !important;
    }

    /* Logged In User Avatar */
    .user-menu .avatar {
        width: 35px;
        height: 35px;
        border-radius: 50%;
        border: 2px solid rgba(255, 255, 255, 0.2);
    }

    /* Dropdown position adjustment for mobile */
    .user-menu .sub-menu {
        right: 10px;
        left: auto;
    }
}

/* Ensure logged-in dropdown styles are consistent */
.user-menu .sub-menu {
    background: #1f1f1f;
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 8px;
    padding: 10px 0;
    min-width: 150px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
    position: absolute;
    top: 100%;
    right: 0;
    z-index: 101;
    display: none;
    margin-top: 10px;
}

.user-menu.on .sub-menu {
    display: block;
    animation: fadeIn 0.2s ease;
}

.user-menu .sub-menu li {
    list-style: none;
}

.user-menu .sub-menu li a {
    color: #ccc;
    padding: 10px 20px;
    display: block;
    transition: all 0.2s;
    text-decoration: none;
    font-size: 14px;
}

.user-menu .sub-menu li a:hover {
    background: rgba(255, 255, 255, 0.05);
    color: #fff;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* 4. Section Header View All Button (AnimoHub Pro Style) */
.view-all-wrap {
    margin-left: auto !important;
    /* Forces to the right */
    display: flex !important;
    align-items: center;
}

/* Ensuring the parent row allows flex items to move freely */
.section-header .rw.alg-cr {
    display: flex !important;
    width: 100% !important;
    align-items: center !important;
}

.view-all-btn {
    background: #FF1B2D !important;
    /* Bright, aggressive red matching the screenshot */
    color: #ffffff !important;
    padding: 0.5rem 1.4rem !important;
    /* Increased padding to match homepage */
    font-size: 0.85rem !important;
    /* Slightly larger font */
    font-weight: 700 !important;
    border-radius: 6px !important;
    /* AnimoHub Pro style slightly rounded rectangle */
    border: none !important;
    line-height: 1 !important;
    display: inline-flex !important;
    align-items: center;
    transition: all 0.2s ease;
}

.view-all-btn i {
    font-size: 0.75rem !important;
    margin-left: 8px !important;
    transform: translateY(1px);
}

.view-all-btn:hover {
    background: #e50914 !important;
    transform: scale(1.02);
}

/* 5. Widget Header Adjustments */
.widget-header-flex .widget-title {
    border-bottom: none !important;
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
    margin-right: 1.5rem !important;
    font-size: 1.5rem !important;
    /* Force same size as homepage sections */
    text-transform: capitalize !important;
    /* Ensure 'Movies' instead of 'movies' */
}

/* We removed the shrinking media query to keep buttons consistent size */

/* 6. Trending Widget (Unique 'tr-' classes for full control) */
/* 
   FIX: Prevent layout flash on page load.
   Before Swiper initialises, the slides have no width and
   spill across the full viewport.  We lock the container to a
   safe height and hide overflow so nothing can "flash" outside
   its box.  Once JS adds the .swiper-initialized class the
   height rule is lifted and Swiper controls the layout.
*/
.tr-trending-container {
    margin-top: 1.5rem;
    position: relative;
    overflow: hidden;          /* clips slides before JS runs */
    /* Pre-reserve height so the container never collapses to 0
       and content below doesn't jump up then back down.
       240px ≈ poster height × scale(1.26) + bottom padding. */
    min-height: 240px;
}

/* Once Swiper has initialised (class added by our JS), release
   the artificial height clamp so Swiper's own sizing takes over */
.tr-trending-container.swiper-initialized-wrapper {
    min-height: unset;
}

/* Individual Card */
.tr-trending-card {
    position: relative;
    padding-left: 1.2rem;
    /* Reduced from 2rem for a tighter look */
    margin-top: 1rem;
    margin-bottom: 1rem;
    transition: transform 0.3s ease;
}

.tr-trending-card:hover {
    transform: scale(1.1);
    z-index: 100;
}

/* Rank Number Container */
.tr-rank-container {
    position: absolute;
    left: -2rem;
    /* Reduced from -3rem as requested */
    bottom: 1rem;
    z-index: 10;
    pointer-events: none;
    line-height: 0.8;
}

/* Rank Digit Typography */
.tr-rank-digit {
    font-size: 7.5rem;
    font-weight: 900;
    font-family: 'Outfit', 'Inter', sans-serif;

    /* Custom Solid Color: Premium JioHotstar Silver-Grey */
    color: #b0b3b8;
    background: none;
    -webkit-text-fill-color: initial;

    /* Using multi-directional text-shadow to simulate a stroke to fix font path intersection bugs */
    text-shadow:
        -1px -1px 0 rgba(0, 0, 0, 0.4),
        1px -1px 0 rgba(0, 0, 0, 0.4),
        -1px 1px 0 rgba(0, 0, 0, 0.4),
        1px 1px 0 rgba(0, 0, 0, 0.4),
        /* Softened drop shadow for an elegant contrast */
        2px 2px 4px rgba(0, 0, 0, 0.6),
        0px 0px 30px rgba(0, 0, 0, 0.8);
    /* Deep glow shadow */

    letter-spacing: -6px;
    display: block;
    line-height: 1;
    z-index: 20;
}

/* Poster Box / Thumbnail */
.tr-poster-box {
    position: relative;
    z-index: 2;
    border-radius: 4px;
    /* Matched with Movies/Series corners */
    overflow: hidden;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.6);
    width: 100%;
    aspect-ratio: 2 / 3;
    transform: scale(1.26) !important;
    /* Set to exactly 1.26 as requested */
    transform-origin: bottom center;
}

.tr-poster-box figure {
    width: 100%;
    height: 100%;
    margin: 0;
}

.tr-poster-box figure img {
    width: 100%;
    height: 100%;
    /* Fill the reserved aspect ratio space */
    object-fit: cover;
    display: block;
}

/* Grid Layout (Vertical List) Control for Trending */
.tr-trending-grid {
    display: grid;
    gap: 45px;
    /* Increased from 30px to prevent numbers touching */
    padding: 3rem 0;
    padding-left: 3rem;
    /* Balanced for stick-out numbers */
    grid-template-columns: repeat(3, 1fr);
    /* Mobile default */
}

@media (min-width: 577px) {
    .tr-trending-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

@media (min-width: 769px) {
    .tr-trending-grid {
        grid-template-columns: repeat(5, 1fr);
        padding-left: 4rem;
    }
}

@media (min-width: 993px) {
    .tr-trending-grid {
        grid-template-columns: repeat(6, 1fr);
    }
}

@media (min-width: 1201px) {
    .tr-trending-grid {
        grid-template-columns: repeat(7, 1fr);
    }
}

@media (min-width: 1601px) {
    .tr-trending-grid {
        grid-template-columns: repeat(8, 1fr);
    }
}

/* 
   === PERMANENT FLASH FIX (Layer 1 — Animation Kill) ===
   The theme's pub.min.css applies @keyframes fadeIn (opacity 0→1) to
   any element with class 'anm-a'.  Trending slides inherit this and
   become invisible while Swiper measures widths → full-viewport flash.
   Kill all animations before Swiper runs.
*/
.tr-trending-swiper,
.tr-trending-swiper .swiper-wrapper,
.tr-trending-swiper .swiper-slide,
.tr-trending-swiper [class*="anm-"] {
    animation: none !important;
    opacity: 1 !important;
    visibility: visible !important;
}

/*
   === PERMANENT FLASH FIX (Layer 2 — Pre-constrain Layout) ===
   Before Swiper initialises it adds '.swiper-initialized' to the
   swiper element.  We use :not(.swiper-initialized) to lock each
   slide to a safe pre-calculated width and hide overflow so no slide
   can bleed outside the container before JS runs.
   Once Swiper inits, it sets inline width on each slide and this rule
   stops matching — no conflict.
*/
.tr-trending-swiper:not(.swiper-initialized) {
    overflow: hidden !important;  /* clip before JS */
}
.tr-trending-swiper:not(.swiper-initialized) .swiper-slide {
    width: calc(100% / 3.02) !important;  /* matches slidesPerView:3.02 */
    flex-shrink: 0;
}

/* Swiper Control for Trending (after init — normal state) */
.tr-trending-swiper {
    overflow: visible !important;
    padding-top: 1rem;
    padding-bottom: 0.5rem;
    padding-left: 3rem !important;
}

@media (max-width: 576px) {
    .tr-rank-digit {
        font-size: 5.5rem;
        bottom: 0.5rem;
    }

    .tr-rank-container {
        bottom: 0.5rem;
        left: -0.8rem;
        /* Pulled slightly inward to prevent touching the scaled poster to the left */
        overflow: visible;
        /* Ensure numbers aren't clipped */
    }

    .tr-trending-card {
        padding-left: 1.5rem;
        /* Increased to make room for sticking out number */
    }

    .tr-poster-box {
        transform: scale(1.20);
        /* Increased scale on mobile for better visibility */
    }

    .tr-trending-swiper {
        padding: 2rem 0;
        /* Keeps overall vertical padding */
        padding-top: 1rem;
        /* Specifically reduces top spacing */
        padding-left: 1.5rem !important;
    }

    .tr-trending-grid {
        gap: 25px;
        /* Balanced gap spacing */
        padding: 3rem 18px;
        /* Final user optimization for perfect edge buffer */
    }
}

/* 6. Mobile Slider "Peek" Effect & Edge Bleed (AnimoHub/JioHotstar Style) */
@media (max-width: 576px) {

    /* Allow the carousel row to reach the right edge of the screen */
    .movies-tbs-cn,
    .series-tbs-cn,
    .nt-tb-carousel .cont {
        padding-left: 0 !important;
        padding-right: 0 !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        max-width: 100% !important;
    }

    /* Break out of standard Toronites widget padding on mobile */
    .tr-trending-container {
        margin-left: -15px;
        /* Negative margin to break out of left padding */
        margin-right: -15px;
        /* Negative margin to break out of right padding */
        overflow: visible;
        /* Prevent edge cutoffs */
    }

    /* Ensure the section header (Title + View All) keeps its normal padding */
    .section-header {
        padding-right: 1.2rem !important;
        padding-left: 1.2rem !important;
    }

    /* Make the Swiper visible outside its container on the right for the peek effect */
    .mySwipers {
        overflow: visible !important;
        padding-right: 20px;
        /* Small buffer for the peeking slide */
    }

    /* Remove trailing black space/empty gap at the end of the slider */
    .swiper-wrapper {
        margin-right: 0 !important;
    }

    /* Hide the dots and arrows below the containers as requested */
    .mySwipers .swiper-pagination,
    .mySwipers .swiper-button-prev,
    .mySwipers .swiper-button-next,
    .mySwipers .mt-3.dfx.alg-cr.jst-sb {
        display: none !important;
    }
}

/* Ensure they are hidden globally if desired, or at least declutter the rows */
.mySwipers .swiper-pagination,
.mySwipers .swiper-button-prev,
.mySwipers .swiper-button-next {
    display: none !important;
}

/* Mobile Bottom Navigation Styles */
.mobile-bottom-nav {
    display: none; /* Hidden by default */
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 65px;
    background: #0f0f0f; /* Match theme background */
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    z-index: 1000; /* Above all content */
    padding-bottom: env(safe-area-inset-bottom);
    justify-content: space-around;
    align-items: center;
    box-shadow: 0 -5px 25px rgba(0, 0, 0, 0.7);
}

.mobile-bottom-nav .nav-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    color: rgba(255, 255, 255, 0.5);
    text-decoration: none;
    font-size: 11px;
    font-weight: 500;
    transition: all 0.3s ease;
    flex: 1;
    padding: 10px 0;
}

.mobile-bottom-nav .nav-item svg {
    width: 24px;
    height: 24px;
    margin-bottom: 4px;
    transition: all 0.3s ease;
    stroke-width: 1.5;
}

.mobile-bottom-nav .nav-item span {
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.mobile-bottom-nav .nav-item.active {
    color: #FF1B2D; /* Primary Red */
}

.mobile-bottom-nav .nav-item.active svg {
    stroke: #FF1B2D;
    transform: translateY(-2px);
}

/* Mobile Visibility Only */
@media (max-width: 768px) {
    .mobile-bottom-nav {
        display: flex;
    }
    
    /* Ensure page content doesn't get hidden behind the nav bar */
    footer.ft {
        padding-bottom: 80px !important;
    }
    
    /* Adjust body padding to avoid scroll issues */
    body {
        padding-bottom: 65px;
    }
}