/* ===== Responsive / Mobile-First Overrides ===== */

/* ---- Tablet (max 1024px) ---- */
@media (max-width: 1024px) {
    #wrap {
        width: 100%;
        max-width: 100%;
    }
    .header-left {
        width: 30%;
    }
    .header-right {
        width: 70%;
    }
    .nav li a {
        padding: 12px 12px;
        font-size: 16px;
    }
    .movie {
        width: 33.33%;
        height: 360px;
    }
    .movie-box {
        height: 310px;
    }
}

/* ---- Mobile (max 768px) ---- */
@media (max-width: 768px) {
    #wrap {
        width: 100%;
    }
    .header {
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    .header-left {
        width: 100%;
        text-align: center;
        padding: 5px;
    }
    .header-left div {
        height: auto !important;
    }
    .header-left img {
        height: 80px !important;
        width: auto;
    }
    .header-right {
        width: 100%;
        text-align: center;
        padding: 5px;
    }
    .header-title {
        float: none;
        text-align: center;
    }
    .header-title h1 {
        padding-left: 0 !important;
        font-size: 16px !important;
        white-space: normal !important;
        text-align: center;
    }
    .header-title h2 {
        margin-left: 0 !important;
        text-align: center;
    }

    /* Navbar */
    .navbar {
        min-height: auto;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    .nav {
        display: flex;
        flex-wrap: nowrap;
        overflow-x: auto;
        white-space: nowrap;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }
    .nav::-webkit-scrollbar {
        display: none;
    }
    .nav li {
        float: none;
        flex-shrink: 0;
    }
    .nav li a {
        padding: 10px 12px;
        font-size: 14px !important;
        border-left: none;
        border-right: none;
    }

    /* Content Layout */
    .content-main {
        width: 100%;
        float: none;
        padding: 4px;
    }
    .content-right {
        width: 100%;
        float: none;
        padding: 4px;
    }
    .content-left {
        width: 100%;
        float: none;
    }
    #content {
        float: none;
    }

    /* Movie Grid */
    .movie {
        width: 33.33%;
        height: auto;
        padding: 3px;
    }
    .movie-box {
        height: 240px;
    }
    .movie-box .movie-title > a {
        font-size: 12px;
    }
    .movie-box .movie-title {
        height: 38px;
    }

    /* Notice */
    .notice {
        font-size: 13px;
        padding: 6px 8px;
    }

    /* Single Page */
    .movie-header {
        display: flex;
        flex-direction: column;
    }
    .movie-thumbnail {
        width: 100%;
        height: auto;
        max-height: 300px;
    }
    .movie-thumbnail img {
        border-radius: 4px 4px 0 0 !important;
        height: auto !important;
        max-height: 300px;
        object-fit: cover;
    }
    .movie-trailer {
        width: 100%;
        height: 220px;
    }
    .movie-trailer iframe {
        border-radius: 0 0 4px 4px !important;
        border-left: 2px solid #222 !important;
        border-top: none !important;
    }

    /* Title */
    .title {
        width: 100%;
    }
    #content .breadcrumb {
        width: 100%;
        float: none;
        text-align: left;
        margin-bottom: 8px;
    }

    /* Player iframe */
    #player_iframe {
        height: 240px !important;
    }

    /* Player container */
    .player_container {
        width: 100% !important;
    }
    .movie_player {
        padding: 8px !important;
    }

    /* Episode buttons (series) - override inline width: 21.5% */
    .episode {
        padding: 0 5px !important;
    }
    .episode_path {
        width: 30% !important;
        float: left !important;
        padding: 8px 4px !important;
        margin: 3px !important;
        font-size: 13px;
        min-height: 40px;
        display: flex !important;
        align-items: center;
        justify-content: center;
        box-sizing: border-box;
    }

    /* Server buttons */
    .server-btn {
        font-size: 12px !important;
        padding: 6px 12px !important;
        min-height: 36px;
        touch-action: manipulation;
    }

    /* Play buttons (movie type) */
    .play-ep {
        padding: 8px 12px !important;
        font-size: 13px !important;
        margin: 3px !important;
        min-height: 40px;
        touch-action: manipulation;
    }

    /* Resolution buttons */
    .resolution {
        padding: 6px 10px !important;
        font-size: 12px !important;
        margin: 2px !important;
        min-height: 36px;
        touch-action: manipulation;
    }
    .resolution_path {
        text-align: center !important;
    }

    /* Sound buttons */
    .sound_path {
        padding: 8px 12px !important;
        font-size: 13px !important;
        margin: 3px 2px !important;
        min-height: 40px;
        touch-action: manipulation;
    }

    /* Player top buttons (refresh/fix) */
    .movie_player .btn {
        font-size: 11px !important;
        padding: 5px 8px !important;
        margin: 2px !important;
    }

    /* IMDB rating in player */
    .imdb-rating {
        width: 120px !important;
        height: 28px !important;
    }
    .imdb-rating-content {
        margin-top: 0 !important;
        font-size: 14px !important;
    }
    .imdb-rating-content > span {
        font-size: 18px !important;
    }

    /* Ads banners - prevent overflow */
    .topplay img,
    .bottomplay img,
    a > img[width="547"] {
        width: 100% !important;
        height: auto !important;
    }

    /* Player header buttons layout */
    div[style*="display: inline-flex"][style*="float: inline-end"] {
        display: flex !important;
        flex-wrap: wrap !important;
        float: none !important;
        justify-content: center;
        gap: 4px;
        margin-bottom: 8px;
    }

    /* Description */
    .description {
        margin: 5px !important;
        padding: 8px !important;
        font-size: 14px;
        line-height: 1.6;
    }

    /* FB comments */
    .fb-comments {
        width: 100% !important;
    }
    .fb-comments iframe,
    .fb-comments span {
        width: 100% !important;
    }

    /* Actions */
    .actions .facebook-like-button,
    .actions .facebook-share-button,
    .actions .vote {
        width: 100%;
        text-align: center !important;
    }

    /* Footer */
    #footer {
        text-align: center;
    }
    .footerleft, .footeright {
        width: 100%;
        float: none;
        text-align: center;
    }

    /* Sidebar */
    .content-left .sidebar ul li {
        width: 100%;
    }

    /* Pagination */
    .navigation {
        overflow-x: auto;
        white-space: nowrap;
        -webkit-overflow-scrolling: touch;
    }
    .navigation li a,
    .navigation li span,
    .navigation li.active a,
    .navigation li.disabled {
        padding: 6px;
        font-size: 13px;
    }

    /* Box */
    .box {
        border-left: none;
        border-right: none;
    }

    /* Ads button */
    .btn-ads {
        width: 95% !important;
        font-size: 0.9rem !important;
    }

    /* Prevent horizontal scroll */
    .filmicerik {
        overflow-x: hidden;
    }
    .player_ep {
        text-align: center;
    }
    .player_ep div {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
    }
}

/* ---- Small Mobile (max 480px) ---- */
@media (max-width: 480px) {
    .movie {
        width: 50%;
        height: auto;
    }
    .movie-box {
        height: 220px;
    }
    .movie-box .movie-title > a {
        font-size: 11px;
    }
    .movie-corner {
        font-size: 8px;
        width: 60px;
        line-height: 16px;
        top: 6px;
        right: -16px;
    }

    .nav li a {
        padding: 8px 10px;
        font-size: 13px !important;
    }

    #player_iframe {
        height: 200px !important;
    }

    .movie-trailer {
        height: 200px;
    }

    .header-left img {
        height: 60px !important;
    }

    .header-title h1 {
        font-size: 14px !important;
    }

    /* Episode buttons smaller on very small screens */
    .episode_path {
        width: 45% !important;
        padding: 8px 2px !important;
        margin: 3px !important;
        font-size: 12px;
    }
}