/* Global responsive overrides for mobile/tablet without recompiling app.css */
html,
body {
    overflow-x: hidden;
}

body.mobile-menu-open {
    overflow: hidden;
}

#view-container {
    position: relative;
    min-height: 100vh;
}

#mobile-sidebar-toggle {
    display: none;
    position: fixed;
    top: 0.75rem;
    left: 0.75rem;
    z-index: 1300;
    width: 42px;
    height: 42px;
    border: 0;
    border-radius: 10px;
    background: rgba(0, 0, 0, 0.75);
    color: #fff;
    cursor: pointer;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    backdrop-filter: blur(4px);
    box-shadow: 0 6px 14px rgba(0, 0, 0, 0.3);
    transition: transform 0.2s ease, background-color 0.2s ease;
}

#mobile-sidebar-toggle:hover {
    background: rgba(0, 0, 0, 0.9);
    transform: translateY(-1px);
}

#mobile-sidebar-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease;
    z-index: 1180;
}

#mobile-sidebar-overlay.active {
    opacity: 1;
    pointer-events: auto;
}

/* Categories sidebar toggle button (created by JS, hidden on desktop) */
#mobile-cat-toggle {
    display: none;
    position: fixed;
    top: 0;
    right: 0;
    z-index: 1310;
    height: 3.25rem;
    padding: 0 1rem;
    background: rgba(0, 0, 0, 0.75);
    border: 0;
    border-left: 1px solid rgba(255, 255, 255, 0.12);
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
    border-bottom-left-radius: 8px;
    color: rgba(255, 255, 255, 0.9);
    cursor: pointer;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.85rem;
    backdrop-filter: blur(4px);
    font-family: 'Roboto', sans-serif;
    white-space: nowrap;
    transition: transform 0.2s ease, background-color 0.2s ease;
}

#mobile-cat-toggle:hover {
    background: rgba(0, 0, 0, 0.9);
    transform: translateY(-1px);
}

#mobile-sidebar-toggle:focus-visible,
#mobile-cat-toggle:focus-visible,
#sidebar a:focus-visible,
#sidebarCategories a:focus-visible {
    outline: 2px solid rgba(16, 185, 129, 0.9);
    outline-offset: 2px;
}

/* Desktop: sidebar categories keeps its fixed width */
#sidebarCategories {
    width: 280px;
    min-width: 280px;
    max-height: 100vh;
    overflow-y: auto;
}

.live-content,
.movies-content,
.series-content,
.lives-grid,
.series-grid {
    min-width: 0;
}

.loading-spinner,
.error-message {
    min-height: 260px !important;
}

/* =================== TABLET / MOBILE (<= 1024px) =================== */
@media (max-width: 1024px) {
    #mobile-sidebar-toggle {
        display: inline-flex;
    }

    #mobile-cat-toggle {
        display: inline-flex;
    }

    #view-container > .fixed {
        position: static;
        height: auto;
        z-index: auto;
    }

    #sidebar {
        width: min(280px, 86vw);
        min-height: 100vh;
        transform: translateX(-105%);
        transition: transform 0.25s ease;
        z-index: 1240;
    }

    #sidebar.mobile-open {
        transform: translateX(0);
    }

    #content-container,
    #view-container.collapsed #content-container {
        margin-left: 0 !important;
        width: 100% !important;
        padding-top: 4rem;
    }

    #view-container > .fixed #sidebar {
        position: fixed;
        left: 0;
        top: 0;
    }

    /* Categories sidebar: off-canvas on mobile, same pattern as #sidebar */
    #sidebarCategories {
        position: fixed;
        left: 0;
        top: 0;
        height: 100vh;
        z-index: 1250;
        width: min(300px, 86vw);
        min-width: 0;
        transform: translateX(-105%);
        transition: transform 0.25s ease;
        overflow-y: auto;
        overflow-x: hidden;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior: contain;
        touch-action: pan-y;
        background: #1c1917;
        box-shadow: 4px 0 20px rgba(0, 0, 0, 0.5);
    }

    #sidebarCategories.categories-open {
        transform: translateX(0);
    }

    .sidebarCategories-title {
        font-size: 1rem;
        padding: 0.75rem 1rem 0.25rem;
    }

    .sidebarSearch {
        margin-bottom: 0.5rem;
        padding: 0.5rem 0.75rem;
    }

    .sidebarSearch input[type="text"] {
        min-width: 0;
        width: 100%;
    }

    .categories-menu {
        margin-bottom: 0.5rem;
    }

    .categories-menu .category-item a,
    .categories-menu .navbar-category-item a {
        padding: 0.45rem 0.65rem;
        font-size: 0.9rem;
        margin: 0.2rem;
    }

    #selectedMovie,
    #selectedSerie {
        min-height: auto;
        padding: 4.8rem 1rem 1rem !important;
    }

    .movie-details,
    .serie-details {
        flex-direction: column;
        gap: 1rem;
        padding: 1rem !important;
    }

    .movie-details .min-w-60,
    .serie-details .min-w-60 {
        min-width: 0;
        width: min(220px, 68vw);
        margin: 0 auto;
    }

    #movieDetails,
    #serieDetails {
        flex-wrap: wrap;
        gap: 0.5rem !important;
        font-size: 0.95rem !important;
    }

    #movieTitle,
    #serieTitle {
        padding: 0.75rem !important;
    }

    #movieTitle h1,
    #serieTitle h1,
    .movie-details h1,
    .serie-details h1,
    #selectedMovie h1,
    #selectedSerie h1 {
        font-size: 1.55rem !important;
        line-height: 1.25;
    }

    .movie-details p,
    .serie-details p,
    #selectedMovie #moviePlot,
    #selectedSerie #seriePlot {
        font-size: 0.95rem !important;
    }

    .movie-details .flex.gap-4.mt-4,
    .serie-details .flex.gap-4.mt-4,
    #selectedMovie .flex.gap-4.mt-4,
    #selectedSerie .flex.gap-4.mt-4 {
        width: 100%;
        flex-direction: column;
    }

    .movie-details .btn-action,
    .serie-details .btn-action,
    #selectedMovie .btn-action-play,
    #selectedSerie .btn-action-play {
        width: 100%;
        text-align: center;
        padding: 0.75rem 1rem !important;
        font-size: 1rem !important;
    }

    .live-play {
        width: 100% !important;
        padding: 1rem !important;
    }

    #moviePlay,
    #seriePlay {
        padding: 0.25rem !important;
    }

    #moviePlayer,
    #seriePlayer {
        min-height: 220px !important;
    }

    .lives-grid,
    .series-grid,
    .movies-content,
    .live-content {
        padding: 1rem !important;
    }
}

/* =================== MOBILE (<= 768px) =================== */
@media (max-width: 768px) {
    #content-container {
        padding-top: 3.6rem;
    }

    #prevBtnMovie,
    #nextBtnMovie,
    #prevBtnSerie,
    #nextBtnSerie {
        display: none;
    }

    #movieSlider li,
    #serieSlider li {
        min-width: 124px !important;
        width: 36% !important;
    }

    #serieSeasons {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    .episode {
        flex-direction: column;
        gap: 0.75rem !important;
    }

    .episode .w-40 {
        width: 100%;
    }

    .episode h3 {
        font-size: 1rem !important;
    }

    .episode p {
        font-size: 0.9rem !important;
    }

    footer .max-w-7xl {
        padding-left: 0.75rem;
        padding-right: 0.75rem;
    }
}

/* =================== SMALL MOBILE (<= 480px) =================== */
@media (max-width: 480px) {
    #movieSlider li,
    #serieSlider li {
        width: 52% !important;
    }

    .movie-details h1,
    .serie-details h1,
    #selectedMovie h1,
    #selectedSerie h1 {
        font-size: 1.3rem !important;
    }

    .sidebarSearch::before {
        right: 22px;
    }

    .categories-menu .category-item a,
    .categories-menu .navbar-category-item a {
        font-size: 0.84rem;
        padding: 0.4rem 0.55rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}