html, body {
            max-width: 100%;
            overflow-x: hidden;
        }
        html {
            overflow-y: scroll;
            scrollbar-gutter: stable;
        }
        body.modal-open {
            padding-right: 0 !important;
        }
        :root{
            --bg:#0b0c0e;
            --panel:#141619;
            --card:#1a1c1f;
            --text:#f1f2f4;
            --muted:#98a0aa;
            --accent:#22c55e;
            --red:#ef4444;
            --ring:#2a2f35;
            --border:rgba(255,255,255,.08);
            --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
        }
        html, body {
            font-family: var(--font-sans);
        }
        body {
            background-color: var(--bg);
            color: var(--text);
            font-feature-settings: "cv11", "ss01";
            -webkit-font-smoothing: antialiased;
        }
        h1, h2, h3, h4, h5, h6, .navbar-brand, button, input, select, textarea {
            font-family: var(--font-sans);
        }
        .navbar {
            background-color: var(--panel) !important;
            border-bottom: 1px solid var(--border);
            transition: box-shadow .2s, background-color .2s;
        }
        .navbar.scrolled { box-shadow: 0 6px 24px rgba(0,0,0,.4); }
        .wl-btn {
            position: absolute;
            top: 8px; left: 8px;
            z-index: 3;
            background: rgba(0,0,0,.55);
            border: none;
            border-radius: 50%;
            width: 28px; height: 28px;
            display: flex; align-items: center; justify-content: center;
            color: #9aa0a6;
            cursor: pointer;
            font-size: .74rem;
            transition: color .15s ease, background .15s ease, transform .15s ease;
            padding: 0;
        }
        .wl-btn:hover { background: rgba(0,0,0,.85); color: #fff; transform: scale(1.12); }
        .wl-btn:active { transform: scale(.88); }
        .wl-btn.wl-saved { color: #ef4444; animation: wlPop .35s ease; }
        @keyframes wlPop { 0% { transform: scale(1); } 45% { transform: scale(1.35); } 100% { transform: scale(1); } }
        .wl-search-btn {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            background: rgba(239,68,68,.1);
            border: 1px solid rgba(239,68,68,.25);
            color: #fff;
            border-radius: 8px;
            width: 38px;
            height: 38px;
            text-decoration: none;
            font-size: .95rem;
            flex-shrink: 0;
            transition: background .15s ease, border-color .15s ease, transform .15s ease;
            position: relative;
        }
        .wl-search-btn:hover { background: rgba(239,68,68,.18); border-color: rgba(239,68,68,.4); color: #fff; transform: translateY(-1px); }
        .wl-search-btn:active { transform: translateY(0) scale(.94); }
        .card-info { padding: 10px 8px 6px; text-align: left; flex: 1; }
        .card-title { font-size: .85rem; font-weight: 700; color: var(--text); line-height: 1.3; margin-bottom: 10px; }
        .card-meta { font-size: .72rem; color: rgba(255,255,255,.55); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
        .wl-nav-dot {
            position: absolute;
            top: 4px; right: 4px;
            width: 6px; height: 6px;
            background: #4ade80;
            border-radius: 50%;
            display: none;
        }
        .search-bar { width: 100%; background-color: var(--panel) !important; color: var(--text); border: 1px solid #23262a; }
        .input-color{
            background-color: var(--panel) !important;
            border: 1px solid #23262a;
            color: var(--text);
        }
        .input-color {
            transition: border-color .15s ease, background-color .15s ease;
        }
        .input-color:focus {
            background-color: var(--panel) !important;
            border-color: var(--red);
            box-shadow: none;
            color: var(--text);
        }
        .input-color::placeholder{
            color: rgb(81, 81, 81);
        }
        .movie-card img { border-radius: 10px; width: 100%; }
        .movie-card {
            text-align: center; background: var(--card); border-radius: 10px; padding: 10px;
            position: relative; border: 2px solid transparent;
            transition: border-color .3s ease, box-shadow .3s ease, transform .35s cubic-bezier(.22,1,.36,1);
        }
        .movie-card:hover {
            transform: translateY(-6px);
            border-color: var(--red);
            box-shadow: 0 0 8px rgba(239,68,68,.5), 0 0 18px rgba(239,68,68,.25), 0 18px 32px rgba(0,0,0,.5);
        }
        .movie-card a { text-decoration: none; color: var(--text); }
        .movie-card .image-container { overflow: hidden; }
        .movie-card .lazy-image { transition: transform .5s cubic-bezier(.22,1,.36,1); backface-visibility: hidden; }
        .movie-card .lazy-image.loaded { transform: scale(1.03); }
        .movie-card:hover .lazy-image.loaded { transform: scale(1.08); }

        #movieCarousel { height: 500px; overflow: hidden; }
        #movieCarousel .carousel-item { position: relative; }
        #movieCarousel .carousel-item::before {
            content: '';
            position: absolute;
            inset: 0;
            background: linear-gradient(180deg, rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.2)),
                        linear-gradient(90deg, rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.2));
            z-index: 1;
        }
        #movieCarousel .carousel-item img {
            height: 500px;
            width: 100%;
            object-fit: cover;
        }
        #movieCarousel .carousel-caption {
            left: 50%;
            transform: translateX(-50%);
            z-index: 2;
        }

        ::-webkit-scrollbar { width: 8px; }
        ::-webkit-scrollbar-track { background: var(--card); }
        ::-webkit-scrollbar-thumb { background: #343a40; border-radius: 10px; }
        ::-webkit-scrollbar-thumb:hover { background: var(--red); }

        .footer {
            background-color: var(--panel);
            color: var(--text);
            border-top: 1px solid var(--border);
            padding: 22px 0;
            margin-top: 48px;
            text-align: center;
        }
        .footer p {
            margin: 0;
            font-size: .85rem;
            color: var(--muted);
        }

        .pagination {
            justify-content: center;
            gap: 8px;
        }
        .pagination .page-link {
            background-color: #343a40;
            border-color: #343a40;
            color: var(--text);
            margin-left: 0;
            border-radius: 6px;
            transition: background-color .15s ease, border-color .15s ease, transform .15s ease;
        }
        .pagination .page-link:hover {
            background-color: var(--red);
            border-color: var(--red);
            transform: translateY(-1px);
        }
        .pagination .page-link:active { transform: translateY(0) scale(.94); }
        .pagination .page-item.active .page-link {
            background-color: var(--red);
            border-color: var(--red);
        }

        .fa-telegram {
            color:#2C96CF;
        }

        /* ── Global search ── */
        .global-search-wrap {
            background: var(--bg);
            padding: 14px 0 0;
            position: relative;
            z-index: 1019;
        }
        .search-input-container { position: relative; flex: 1; }
        /* Hide the browser's own type="search" clear button — we render our
           own (.search-clear-btn), and both together showed two X icons. */
        input[type="search"]::-webkit-search-cancel-button,
        input[type="search"]::-webkit-search-decoration { -webkit-appearance: none; appearance: none; }
        input[type="search"]::-ms-clear { display: none; width: 0; height: 0; }
        .search-clear-btn {
            position: absolute; right: 8px; top: 50%; transform: translateY(-50%);
            background: none; border: none; color: var(--muted); cursor: pointer;
            padding: 4px; display: none; z-index: 10;
        }
        .search-clear-btn.show { display: block; }
        .search-dropdown {
            position: absolute;
            top: calc(100% + 8px); left: 0; right: 0;
            background: var(--panel);
            border: 1px solid #23262a;
            border-radius: 8px;
            max-height: 300px;
            overflow-y: auto;
            z-index: 1055;
            display: none;
            box-shadow: 0 8px 32px rgba(0,0,0,.6);
        }
        .search-dropdown {
            animation: dropdownIn .18s ease;
        }
        @keyframes dropdownIn {
            from { opacity: 0; transform: translateY(-4px); }
            to   { opacity: 1; transform: translateY(0); }
        }
        .search-dropdown-item {
            padding: 11px 16px;
            border-bottom: 1px solid #1e2228;
            cursor: pointer;
            transition: background .15s ease;
        }
        .search-dropdown-item:hover { background: var(--card); }
        .search-dropdown-item:last-child { border-bottom: none; }
        .search-dropdown-item-title { font-weight: 700; color: var(--text); font-size: .88rem; }
        .search-dropdown-item-year  { color: var(--muted); font-size: .78rem; margin-top: 2px; }

        /* ── Category bar ── */
        .global-cat-bar {
            padding: 12px 0 12px;
            background: var(--bg);
            position: relative;
            z-index: 10;
        }
        .catButton {
            background: #1c2026 !important;
            color: #ffffff !important;
            border: 2px solid #363c47 !important;
            border-radius: 20px !important;
            box-shadow: 0 2px 8px rgba(0,0,0,.35) !important;
            font-size: .82rem;
            font-weight: 600;
            padding: 6px 17px;
            cursor: pointer;
            transition: background .18s ease, border-color .18s ease, box-shadow .2s ease, transform .15s ease;
        }
        .catButton:hover {
            background: #262b33 !important;
            border-color: var(--red) !important;
            color: #ffffff !important;
            box-shadow: 0 0 8px rgba(239,68,68,.5), 0 0 18px rgba(239,68,68,.25), 0 4px 14px rgba(0,0,0,.35) !important;
            transform: translateY(-1px);
        }
        .catButton:active { transform: translateY(0) scale(.96); }
        .catButton.cat-active {
            background: var(--red) !important;
            border-color: var(--red) !important;
            color: #ffffff !important;
            box-shadow: 0 0 8px rgba(239,68,68,.5), 0 0 18px rgba(239,68,68,.25) !important;
        }
        /* On mobile, a wrapped multi-row flex layout of pills reads as
           ragged/uneven (different pill counts per row, centered so the
           short last row floats in the middle) — a fixed 3-column grid gives
           every pill the same width and keeps everything visible with no
           scrolling. The last item (Join Telegram) spans 2 columns to fill
           out the final row evenly, since 8 items over 3 columns leaves a
           lone item on the last row otherwise. */
        @media (max-width: 767px) {
            .cat-mobile-grid {
                display: grid !important;
                grid-template-columns: repeat(3, 1fr);
                gap: 6px;
            }
            .cat-mobile-grid .catButton {
                font-size: .72rem;
                font-weight: 700;
                padding: 8px 2px;
                border-radius: 9px !important;
                text-align: center;
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
            }
            .cat-mobile-grid .catButton:last-child { grid-column: span 2; }
        }
        .genre-pick {
            display: inline-block;
            background: var(--panel);
            border: 2px solid #2d3340;
            border-radius: 20px;
            color: #fff;
            font-size: .82rem;
            font-weight: 600;
            padding: 6px 15px;
            text-decoration: none;
            transition: background .18s ease, border-color .18s ease, color .18s ease, box-shadow .2s ease, transform .15s ease;
        }
        .genre-pick:hover {
            background: #23262a;
            border-color: var(--red);
            color: #fff;
            box-shadow: 0 0 8px rgba(239,68,68,.5), 0 0 18px rgba(239,68,68,.25);
            transform: translateY(-1px);
        }
        .genre-pick:active { transform: translateY(0) scale(.96); }
        .genre-pick.genre-pick-active {
            background: var(--red);
            border-color: var(--red);
            color: #fff;
            box-shadow: 0 0 8px rgba(239,68,68,.5), 0 0 18px rgba(239,68,68,.25);
        }

        .nav-home-btn {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            background: rgba(239,68,68,.1);
            border: 1px solid rgba(239,68,68,.25);
            color: #fff;
            border-radius: 8px;
            height: 38px;
            padding: 0 14px;
            text-decoration: none;
            font-size: .88rem;
            font-weight: 600;
            flex-shrink: 0;
            transition: background .15s ease, border-color .15s ease, transform .15s ease;
        }
        .nav-home-btn:hover { background: rgba(239,68,68,.18); border-color: rgba(239,68,68,.4); color: #fff; transform: translateY(-1px); }
        .nav-home-btn:active { transform: translateY(0) scale(.96); }
    


          .movie-type-badge {
            position: absolute;
            z-index: 2;
            top: 8px; right: 10px;
            font-size: 11px;
            line-height: 1;
            padding: 4px 8px;
            border-radius: 6px;
            font-weight: 800;
            color: #fff;
            border: 1px solid rgba(255,255,255,.08);
            text-transform: uppercase;
            box-shadow: 0 2px 8px rgba(0,0,0,.35);
            pointer-events: none;
        }
        .movie-badge-movie  { background: #e53935; }
        .movie-badge-series { background: #7b61ff; }
        .movie-card {
            position: relative;
            background: var(--card);
            border-radius: 10px;
            overflow: hidden;
            height: 100%;
            display: flex;
            flex-direction: column;
        }
        .movie-card > a {
            display: flex;
            flex-direction: column;
            flex: 1;
            text-decoration: none;
            color: inherit;
        }
        .image-container {
            position: relative;
            width: 100%;
            height: 0;
            padding-bottom: 130%;
            overflow: hidden;
            background-color: var(--bg);
        }
        .lazy-image {
            position: absolute;
            top: 0; left: 0;
            width: 100%; height: 100%;
            object-fit: contain;
            transition: all 0.3s ease;
            backface-visibility: hidden;
        }
        .lazy-image.loaded { object-fit: cover; }
        .custom_line {
            display: block;
            text-align: center;
            margin-top: 8px;
            font-size: 0.9rem;
            font-weight: bold;
            height: 2.7em;
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
        }
        .domain-banner {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 6px;
            background: linear-gradient(90deg, rgba(239,68,68,.16), rgba(239,68,68,.06));
            border: 1px solid rgba(239,68,68,.35);
            color: #fff;
            border-radius: 8px;
            padding: 10px 36px 10px 14px;
            margin-bottom: 12px;
            font-weight: 600;
            font-size: .95rem;
            text-decoration: none;
            position: relative;
            text-align: center;
            line-height: 1.4;
            transition: background .2s ease;
            animation: bannerIn .3s ease;
        }
        @keyframes bannerIn {
            from { opacity: 0; transform: translateY(-6px); }
            to   { opacity: 1; transform: translateY(0); }
        }
        .domain-banner:hover { background: linear-gradient(90deg, rgba(239,68,68,.24), rgba(239,68,68,.1)); color: #fff; }
        .domain-banner strong { color: #ff3131; }
        .domain-banner button {
            position: absolute;
            top: 50%; right: 8px;
            transform: translateY(-50%);
            background: none;
            border: none;
            color: rgba(255,255,255,.55);
            font-size: .78rem;
            cursor: pointer;
            padding: 4px;
            line-height: 1;
            transition: color .15s ease, transform .15s ease;
        }
        .domain-banner button:hover { color: #fff; transform: translateY(-50%) scale(1.15); }

        /* ── Independence Day banner (auto-shows Aug 14–16 every year) ── */
        .iday-banner {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 10px;
            background: linear-gradient(90deg, rgba(255,153,51,.14), rgba(255,255,255,.05), rgba(19,136,8,.16));
            border: 1px solid rgba(255,255,255,.12);
            border-top: 3px solid #FF9933;
            border-bottom: 3px solid #138808;
            border-radius: 10px;
            padding: 11px 36px 11px 14px;
            margin-bottom: 12px;
            color: #fff;
            font-weight: 600;
            font-size: .92rem;
            text-align: center;
            line-height: 1.4;
            position: relative;
            animation: bannerIn .3s ease;
        }
        .iday-chakra {
            display: inline-block;
            width: 16px; height: 16px;
            border: 2px solid #1a4fa0;
            border-radius: 50%;
            position: relative;
            flex-shrink: 0;
            animation: idaySpin 6s linear infinite;
        }
        .iday-chakra::before {
            content: '';
            position: absolute;
            inset: -2px;
            border-radius: 50%;
            background:
                repeating-conic-gradient(#1a4fa0 0deg 3deg, transparent 3deg 15deg);
        }
        @keyframes idaySpin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
        .iday-banner button {
            position: absolute;
            top: 50%; right: 8px;
            transform: translateY(-50%);
            background: none;
            border: none;
            color: rgba(255,255,255,.55);
            font-size: .78rem;
            cursor: pointer;
            padding: 4px;
            line-height: 1;
            transition: color .15s ease, transform .15s ease;
        }
        .iday-banner button:hover { color: #fff; transform: translateY(-50%) scale(1.15); }

        .iday-confetti-wrap {
            position: fixed;
            inset: 0;
            pointer-events: none;
            overflow: hidden;
            z-index: 1998;
        }
        .iday-confetti-piece {
            position: absolute;
            top: -20px;
            width: 8px;
            height: 14px;
            opacity: .9;
            animation-name: idayFall;
            animation-timing-function: linear;
            animation-fill-mode: forwards;
        }
        @keyframes idayFall {
            0%   { transform: translateY(0) rotate(0deg); opacity: .95; }
            100% { transform: translateY(110vh) rotate(540deg); opacity: .4; }
        }

        .section-heading {
            display: flex;
            align-items: center;
            gap: 12px;
            background: var(--card);
            border-radius: 8px;
            padding: 11px 18px;
            border-left: 4px solid var(--red);
            position: relative;
            overflow: hidden;
            margin-bottom: 12px;
        }
        .section-heading::before {
            content: '';
            position: absolute;
            inset: 0;
            width: 160px;
            background: linear-gradient(90deg, rgba(239,68,68,.1), transparent);
            pointer-events: none;
        }
        .section-heading-icon {
            font-size: 1.05rem;
            color: #f97316;
            position: relative;
        }
        .section-heading-text {
            font-size: 1.05rem;
            font-weight: 700;
            color: #fff;
            letter-spacing: .3px;
            position: relative;
        }
        .btn-danger {
            background-color: var(--red) !important;
            border-color: var(--red) !important;
        }
        .btn-danger:hover, .btn-danger:focus, .btn-danger:active {
            background-color: #c82333 !important;
            border-color: #bd2130 !important;
            box-shadow: none;
        }
        


      html, body {
            max-width: 100%;
            overflow-x: hidden;
        }
        html {
            overflow-y: scroll;
            scrollbar-gutter: stable;
        }
        body.modal-open {
            padding-right: 0 !important;
        }
        :root{
            --bg:#0b0c0e;
            --panel:#141619;
            --card:#1a1c1f;
            --text:#f1f2f4;
            --muted:#98a0aa;
            --accent:#22c55e;
            --red:#ef4444;
            --ring:#2a2f35;
            --border:rgba(255,255,255,.08);
            --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
        }
        html, body {
            font-family: var(--font-sans);
        }
        body {
            background-color: var(--bg);
            color: var(--text);
            font-feature-settings: "cv11", "ss01";
            -webkit-font-smoothing: antialiased;
        }
        h1, h2, h3, h4, h5, h6, .navbar-brand, button, input, select, textarea {
            font-family: var(--font-sans);
        }
        .navbar {
            background-color: var(--panel) !important;
            border-bottom: 1px solid var(--border);
            transition: box-shadow .2s, background-color .2s;
        }
        .navbar.scrolled { box-shadow: 0 6px 24px rgba(0,0,0,.4); }
        .wl-btn {
            position: absolute;
            top: 8px; left: 8px;
            z-index: 3;
            background: rgba(0,0,0,.55);
            border: none;
            border-radius: 50%;
            width: 28px; height: 28px;
            display: flex; align-items: center; justify-content: center;
            color: #9aa0a6;
            cursor: pointer;
            font-size: .74rem;
            transition: color .15s ease, background .15s ease, transform .15s ease;
            padding: 0;
        }
        .wl-btn:hover { background: rgba(0,0,0,.85); color: #fff; transform: scale(1.12); }
        .wl-btn:active { transform: scale(.88); }
        .wl-btn.wl-saved { color: #ef4444; animation: wlPop .35s ease; }
        @keyframes wlPop { 0% { transform: scale(1); } 45% { transform: scale(1.35); } 100% { transform: scale(1); } }
        .wl-search-btn {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            background: rgba(239,68,68,.1);
            border: 1px solid rgba(239,68,68,.25);
            color: #fff;
            border-radius: 8px;
            width: 38px;
            height: 38px;
            text-decoration: none;
            font-size: .95rem;
            flex-shrink: 0;
            transition: background .15s ease, border-color .15s ease, transform .15s ease;
            position: relative;
        }
        .wl-search-btn:hover { background: rgba(239,68,68,.18); border-color: rgba(239,68,68,.4); color: #fff; transform: translateY(-1px); }
        .wl-search-btn:active { transform: translateY(0) scale(.94); }
        .card-info { padding: 10px 8px 6px; text-align: left; flex: 1; }
        .card-title { font-size: .85rem; font-weight: 700; color: var(--text); line-height: 1.3; margin-bottom: 10px; }
        .card-meta { font-size: .72rem; color: rgba(255,255,255,.55); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
        .wl-nav-dot {
            position: absolute;
            top: 4px; right: 4px;
            width: 6px; height: 6px;
            background: #4ade80;
            border-radius: 50%;
            display: none;
        }
        .search-bar { width: 100%; background-color: var(--panel) !important; color: var(--text); border: 1px solid #23262a; }
        .input-color{
            background-color: var(--panel) !important;
            border: 1px solid #23262a;
            color: var(--text);
        }
        .input-color {
            transition: border-color .15s ease, background-color .15s ease;
        }
        .input-color:focus {
            background-color: var(--panel) !important;
            border-color: var(--red);
            box-shadow: none;
            color: var(--text);
        }
        .input-color::placeholder{
            color: rgb(81, 81, 81);
        }
        .movie-card img { border-radius: 10px; width: 100%; }
        .movie-card {
            text-align: center; background: var(--card); border-radius: 10px; padding: 10px;
            position: relative; border: 2px solid transparent;
            transition: border-color .3s ease, box-shadow .3s ease, transform .35s cubic-bezier(.22,1,.36,1);
        }
        .movie-card:hover {
            transform: translateY(-6px);
            border-color: var(--red);
            box-shadow: 0 0 8px rgba(239,68,68,.5), 0 0 18px rgba(239,68,68,.25), 0 18px 32px rgba(0,0,0,.5);
        }
        .movie-card a { text-decoration: none; color: var(--text); }
        .movie-card .image-container { overflow: hidden; }
        .movie-card .lazy-image { transition: transform .5s cubic-bezier(.22,1,.36,1); backface-visibility: hidden; }
        .movie-card .lazy-image.loaded { transform: scale(1.03); }
        .movie-card:hover .lazy-image.loaded { transform: scale(1.08); }

        #movieCarousel { height: 500px; overflow: hidden; }
        #movieCarousel .carousel-item { position: relative; }
        #movieCarousel .carousel-item::before {
            content: '';
            position: absolute;
            inset: 0;
            background: linear-gradient(180deg, rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.2)),
                        linear-gradient(90deg, rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.2));
            z-index: 1;
        }
        #movieCarousel .carousel-item img {
            height: 500px;
            width: 100%;
            object-fit: cover;
        }
        #movieCarousel .carousel-caption {
            left: 50%;
            transform: translateX(-50%);
            z-index: 2;
        }

        ::-webkit-scrollbar { width: 8px; }
        ::-webkit-scrollbar-track { background: var(--card); }
        ::-webkit-scrollbar-thumb { background: #343a40; border-radius: 10px; }
        ::-webkit-scrollbar-thumb:hover { background: var(--red); }

        .footer {
            background-color: var(--panel);
            color: var(--text);
            border-top: 1px solid var(--border);
            padding: 22px 0;
            margin-top: 48px;
            text-align: center;
        }
        .footer p {
            margin: 0;
            font-size: .85rem;
            color: var(--muted);
        }

        .pagination {
            justify-content: center;
            gap: 8px;
        }
        .pagination .page-link {
            background-color: #343a40;
            border-color: #343a40;
            color: var(--text);
            margin-left: 0;
            border-radius: 6px;
            transition: background-color .15s ease, border-color .15s ease, transform .15s ease;
        }
        .pagination .page-link:hover {
            background-color: var(--red);
            border-color: var(--red);
            transform: translateY(-1px);
        }
        .pagination .page-link:active { transform: translateY(0) scale(.94); }
        .pagination .page-item.active .page-link {
            background-color: var(--red);
            border-color: var(--red);
        }

        .fa-telegram {
            color:#2C96CF;
        }

        /* ── Global search ── */
        .global-search-wrap {
            background: var(--bg);
            padding: 14px 0 0;
            position: relative;
            z-index: 1019;
        }
        .search-input-container { position: relative; flex: 1; }
        /* Hide the browser's own type="search" clear button — we render our
           own (.search-clear-btn), and both together showed two X icons. */
        input[type="search"]::-webkit-search-cancel-button,
        input[type="search"]::-webkit-search-decoration { -webkit-appearance: none; appearance: none; }
        input[type="search"]::-ms-clear { display: none; width: 0; height: 0; }
        .search-clear-btn {
            position: absolute; right: 8px; top: 50%; transform: translateY(-50%);
            background: none; border: none; color: var(--muted); cursor: pointer;
            padding: 4px; display: none; z-index: 10;
        }
        .search-clear-btn.show { display: block; }
        .search-dropdown {
            position: absolute;
            top: calc(100% + 8px); left: 0; right: 0;
            background: var(--panel);
            border: 1px solid #23262a;
            border-radius: 8px;
            max-height: 300px;
            overflow-y: auto;
            z-index: 1055;
            display: none;
            box-shadow: 0 8px 32px rgba(0,0,0,.6);
        }
        .search-dropdown {
            animation: dropdownIn .18s ease;
        }
        @keyframes dropdownIn {
            from { opacity: 0; transform: translateY(-4px); }
            to   { opacity: 1; transform: translateY(0); }
        }
        .search-dropdown-item {
            padding: 11px 16px;
            border-bottom: 1px solid #1e2228;
            cursor: pointer;
            transition: background .15s ease;
        }
        .search-dropdown-item:hover { background: var(--card); }
        .search-dropdown-item:last-child { border-bottom: none; }
        .search-dropdown-item-title { font-weight: 700; color: var(--text); font-size: .88rem; }
        .search-dropdown-item-year  { color: var(--muted); font-size: .78rem; margin-top: 2px; }

        /* ── Category bar ── */
        .global-cat-bar {
            padding: 12px 0 12px;
            background: var(--bg);
            position: relative;
            z-index: 10;
        }
        .catButton {
            background: #1c2026 !important;
            color: #ffffff !important;
            border: 2px solid #363c47 !important;
            border-radius: 20px !important;
            box-shadow: 0 2px 8px rgba(0,0,0,.35) !important;
            font-size: .82rem;
            font-weight: 600;
            padding: 6px 17px;
            cursor: pointer;
            transition: background .18s ease, border-color .18s ease, box-shadow .2s ease, transform .15s ease;
        }
        .catButton:hover {
            background: #262b33 !important;
            border-color: var(--red) !important;
            color: #ffffff !important;
            box-shadow: 0 0 8px rgba(239,68,68,.5), 0 0 18px rgba(239,68,68,.25), 0 4px 14px rgba(0,0,0,.35) !important;
            transform: translateY(-1px);
        }
        .catButton:active { transform: translateY(0) scale(.96); }
        .catButton.cat-active {
            background: var(--red) !important;
            border-color: var(--red) !important;
            color: #ffffff !important;
            box-shadow: 0 0 8px rgba(239,68,68,.5), 0 0 18px rgba(239,68,68,.25) !important;
        }
        /* On mobile, a wrapped multi-row flex layout of pills reads as
           ragged/uneven (different pill counts per row, centered so the
           short last row floats in the middle) — a fixed 3-column grid gives
           every pill the same width and keeps everything visible with no
           scrolling. The last item (Join Telegram) spans 2 columns to fill
           out the final row evenly, since 8 items over 3 columns leaves a
           lone item on the last row otherwise. */
        @media (max-width: 767px) {
            .cat-mobile-grid {
                display: grid !important;
                grid-template-columns: repeat(3, 1fr);
                gap: 6px;
            }
            .cat-mobile-grid .catButton {
                font-size: .72rem;
                font-weight: 700;
                padding: 8px 2px;
                border-radius: 9px !important;
                text-align: center;
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
            }
            .cat-mobile-grid .catButton:last-child { grid-column: span 2; }
        }
        .genre-pick {
            display: inline-block;
            background: var(--panel);
            border: 2px solid #2d3340;
            border-radius: 20px;
            color: #fff;
            font-size: .82rem;
            font-weight: 600;
            padding: 6px 15px;
            text-decoration: none;
            transition: background .18s ease, border-color .18s ease, color .18s ease, box-shadow .2s ease, transform .15s ease;
        }
        .genre-pick:hover {
            background: #23262a;
            border-color: var(--red);
            color: #fff;
            box-shadow: 0 0 8px rgba(239,68,68,.5), 0 0 18px rgba(239,68,68,.25);
            transform: translateY(-1px);
        }
        .genre-pick:active { transform: translateY(0) scale(.96); }
        .genre-pick.genre-pick-active {
            background: var(--red);
            border-color: var(--red);
            color: #fff;
            box-shadow: 0 0 8px rgba(239,68,68,.5), 0 0 18px rgba(239,68,68,.25);
        }

        .nav-home-btn {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            background: rgba(239,68,68,.1);
            border: 1px solid rgba(239,68,68,.25);
            color: #fff;
            border-radius: 8px;
            height: 38px;
            padding: 0 14px;
            text-decoration: none;
            font-size: .88rem;
            font-weight: 600;
            flex-shrink: 0;
            transition: background .15s ease, border-color .15s ease, transform .15s ease;
        }
        .nav-home-btn:hover { background: rgba(239,68,68,.18); border-color: rgba(239,68,68,.4); color: #fff; transform: translateY(-1px); }
        .nav-home-btn:active { transform: translateY(0) scale(.96); }
    


          .movie-type-badge {
            position: absolute;
            z-index: 2;
            top: 8px; right: 10px;
            font-size: 11px;
            line-height: 1;
            padding: 4px 8px;
            border-radius: 6px;
            font-weight: 800;
            color: #fff;
            border: 1px solid rgba(255,255,255,.08);
            text-transform: uppercase;
            box-shadow: 0 2px 8px rgba(0,0,0,.35);
            pointer-events: none;
        }
        .movie-badge-movie  { background: #e53935; }
        .movie-badge-series { background: #7b61ff; }
        .movie-card {
            position: relative;
            background: var(--card);
            border-radius: 10px;
            overflow: hidden;
            height: 100%;
            display: flex;
            flex-direction: column;
        }
        .movie-card > a {
            display: flex;
            flex-direction: column;
            flex: 1;
            text-decoration: none;
            color: inherit;
        }
        .image-container {
            position: relative;
            width: 100%;
            height: 0;
            padding-bottom: 130%;
            overflow: hidden;
            background-color: var(--bg);
        }
        .lazy-image {
            position: absolute;
            top: 0; left: 0;
            width: 100%; height: 100%;
            object-fit: contain;
            transition: all 0.3s ease;
            backface-visibility: hidden;
        }
        .lazy-image.loaded { object-fit: cover; }
        .custom_line {
            display: block;
            text-align: center;
            margin-top: 8px;
            font-size: 0.9rem;
            font-weight: bold;
            height: 2.7em;
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
        }
        .domain-banner {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 6px;
            background: linear-gradient(90deg, rgba(239,68,68,.16), rgba(239,68,68,.06));
            border: 1px solid rgba(239,68,68,.35);
            color: #fff;
            border-radius: 8px;
            padding: 10px 36px 10px 14px;
            margin-bottom: 12px;
            font-weight: 600;
            font-size: .95rem;
            text-decoration: none;
            position: relative;
            text-align: center;
            line-height: 1.4;
            transition: background .2s ease;
            animation: bannerIn .3s ease;
        }
        @keyframes bannerIn {
            from { opacity: 0; transform: translateY(-6px); }
            to   { opacity: 1; transform: translateY(0); }
        }
        .domain-banner:hover { background: linear-gradient(90deg, rgba(239,68,68,.24), rgba(239,68,68,.1)); color: #fff; }
        .domain-banner strong { color: #ff3131; }
        .domain-banner button {
            position: absolute;
            top: 50%; right: 8px;
            transform: translateY(-50%);
            background: none;
            border: none;
            color: rgba(255,255,255,.55);
            font-size: .78rem;
            cursor: pointer;
            padding: 4px;
            line-height: 1;
            transition: color .15s ease, transform .15s ease;
        }
        .domain-banner button:hover { color: #fff; transform: translateY(-50%) scale(1.15); }

        /* ── Independence Day banner (auto-shows Aug 14–16 every year) ── */
        .iday-banner {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 10px;
            background: linear-gradient(90deg, rgba(255,153,51,.14), rgba(255,255,255,.05), rgba(19,136,8,.16));
            border: 1px solid rgba(255,255,255,.12);
            border-top: 3px solid #FF9933;
            border-bottom: 3px solid #138808;
            border-radius: 10px;
            padding: 11px 36px 11px 14px;
            margin-bottom: 12px;
            color: #fff;
            font-weight: 600;
            font-size: .92rem;
            text-align: center;
            line-height: 1.4;
            position: relative;
            animation: bannerIn .3s ease;
        }
        .iday-chakra {
            display: inline-block;
            width: 16px; height: 16px;
            border: 2px solid #1a4fa0;
            border-radius: 50%;
            position: relative;
            flex-shrink: 0;
            animation: idaySpin 6s linear infinite;
        }
        .iday-chakra::before {
            content: '';
            position: absolute;
            inset: -2px;
            border-radius: 50%;
            background:
                repeating-conic-gradient(#1a4fa0 0deg 3deg, transparent 3deg 15deg);
        }
        @keyframes idaySpin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
        .iday-banner button {
            position: absolute;
            top: 50%; right: 8px;
            transform: translateY(-50%);
            background: none;
            border: none;
            color: rgba(255,255,255,.55);
            font-size: .78rem;
            cursor: pointer;
            padding: 4px;
            line-height: 1;
            transition: color .15s ease, transform .15s ease;
        }
        .iday-banner button:hover { color: #fff; transform: translateY(-50%) scale(1.15); }

        .iday-confetti-wrap {
            position: fixed;
            inset: 0;
            pointer-events: none;
            overflow: hidden;
            z-index: 1998;
        }
        .iday-confetti-piece {
            position: absolute;
            top: -20px;
            width: 8px;
            height: 14px;
            opacity: .9;
            animation-name: idayFall;
            animation-timing-function: linear;
            animation-fill-mode: forwards;
        }
        @keyframes idayFall {
            0%   { transform: translateY(0) rotate(0deg); opacity: .95; }
            100% { transform: translateY(110vh) rotate(540deg); opacity: .4; }
        }

        .section-heading {
            display: flex;
            align-items: center;
            gap: 12px;
            background: var(--card);
            border-radius: 8px;
            padding: 11px 18px;
            border-left: 4px solid var(--red);
            position: relative;
            overflow: hidden;
            margin-bottom: 12px;
        }
        .section-heading::before {
            content: '';
            position: absolute;
            inset: 0;
            width: 160px;
            background: linear-gradient(90deg, rgba(239,68,68,.1), transparent);
            pointer-events: none;
        }
        .section-heading-icon {
            font-size: 1.05rem;
            color: #f97316;
            position: relative;
        }
        .section-heading-text {
            font-size: 1.05rem;
            font-weight: 700;
            color: #fff;
            letter-spacing: .3px;
            position: relative;
        }
        .btn-danger {
            background-color: var(--red) !important;
            border-color: var(--red) !important;
        }
        .btn-danger:hover, .btn-danger:focus, .btn-danger:active {
            background-color: #c82333 !important;
            border-color: #bd2130 !important;
            box-shadow: none;
        }
        


      html, body {
            max-width: 100%;
            overflow-x: hidden;
        }
        html {
            overflow-y: scroll;
            scrollbar-gutter: stable;
        }
        body.modal-open {
            padding-right: 0 !important;
        }
        :root{
            --bg:#0b0c0e;
            --panel:#141619;
            --card:#1a1c1f;
            --text:#f1f2f4;
            --muted:#98a0aa;
            --accent:#22c55e;
            --red:#ef4444;
            --ring:#2a2f35;
            --border:rgba(255,255,255,.08);
            --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
        }
        html, body {
            font-family: var(--font-sans);
        }
        body {
            background-color: var(--bg);
            color: var(--text);
            font-feature-settings: "cv11", "ss01";
            -webkit-font-smoothing: antialiased;
        }
        h1, h2, h3, h4, h5, h6, .navbar-brand, button, input, select, textarea {
            font-family: var(--font-sans);
        }
        .navbar {
            background-color: var(--panel) !important;
            border-bottom: 1px solid var(--border);
            transition: box-shadow .2s, background-color .2s;
        }
        .navbar.scrolled { box-shadow: 0 6px 24px rgba(0,0,0,.4); }
        .wl-btn {
            position: absolute;
            top: 8px; left: 8px;
            z-index: 3;
            background: rgba(0,0,0,.55);
            border: none;
            border-radius: 50%;
            width: 28px; height: 28px;
            display: flex; align-items: center; justify-content: center;
            color: #9aa0a6;
            cursor: pointer;
            font-size: .74rem;
            transition: color .15s ease, background .15s ease, transform .15s ease;
            padding: 0;
        }
        .wl-btn:hover { background: rgba(0,0,0,.85); color: #fff; transform: scale(1.12); }
        .wl-btn:active { transform: scale(.88); }
        .wl-btn.wl-saved { color: #ef4444; animation: wlPop .35s ease; }
        @keyframes wlPop { 0% { transform: scale(1); } 45% { transform: scale(1.35); } 100% { transform: scale(1); } }
        .wl-search-btn {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            background: rgba(239,68,68,.1);
            border: 1px solid rgba(239,68,68,.25);
            color: #fff;
            border-radius: 8px;
            width: 38px;
            height: 38px;
            text-decoration: none;
            font-size: .95rem;
            flex-shrink: 0;
            transition: background .15s ease, border-color .15s ease, transform .15s ease;
            position: relative;
        }
        .wl-search-btn:hover { background: rgba(239,68,68,.18); border-color: rgba(239,68,68,.4); color: #fff; transform: translateY(-1px); }
        .wl-search-btn:active { transform: translateY(0) scale(.94); }
        .card-info { padding: 10px 8px 6px; text-align: left; flex: 1; }
        .card-title { font-size: .85rem; font-weight: 700; color: var(--text); line-height: 1.3; margin-bottom: 10px; }
        .card-meta { font-size: .72rem; color: rgba(255,255,255,.55); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
        .wl-nav-dot {
            position: absolute;
            top: 4px; right: 4px;
            width: 6px; height: 6px;
            background: #4ade80;
            border-radius: 50%;
            display: none;
        }
        .search-bar { width: 100%; background-color: var(--panel) !important; color: var(--text); border: 1px solid #23262a; }
        .input-color{
            background-color: var(--panel) !important;
            border: 1px solid #23262a;
            color: var(--text);
        }
        .input-color {
            transition: border-color .15s ease, background-color .15s ease;
        }
        .input-color:focus {
            background-color: var(--panel) !important;
            border-color: var(--red);
            box-shadow: none;
            color: var(--text);
        }
        .input-color::placeholder{
            color: rgb(81, 81, 81);
        }
        .movie-card img { border-radius: 10px; width: 100%; }
        .movie-card {
            text-align: center; background: var(--card); border-radius: 10px; padding: 10px;
            position: relative; border: 2px solid transparent;
            transition: border-color .3s ease, box-shadow .3s ease, transform .35s cubic-bezier(.22,1,.36,1);
        }
        .movie-card:hover {
            transform: translateY(-6px);
            border-color: var(--red);
            box-shadow: 0 0 8px rgba(239,68,68,.5), 0 0 18px rgba(239,68,68,.25), 0 18px 32px rgba(0,0,0,.5);
        }
        .movie-card a { text-decoration: none; color: var(--text); }
        .movie-card .image-container { overflow: hidden; }
        .movie-card .lazy-image { transition: transform .5s cubic-bezier(.22,1,.36,1); backface-visibility: hidden; }
        .movie-card .lazy-image.loaded { transform: scale(1.03); }
        .movie-card:hover .lazy-image.loaded { transform: scale(1.08); }

        #movieCarousel { height: 500px; overflow: hidden; }
        #movieCarousel .carousel-item { position: relative; }
        #movieCarousel .carousel-item::before {
            content: '';
            position: absolute;
            inset: 0;
            background: linear-gradient(180deg, rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.2)),
                        linear-gradient(90deg, rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.2));
            z-index: 1;
        }
        #movieCarousel .carousel-item img {
            height: 500px;
            width: 100%;
            object-fit: cover;
        }
        #movieCarousel .carousel-caption {
            left: 50%;
            transform: translateX(-50%);
            z-index: 2;
        }

        ::-webkit-scrollbar { width: 8px; }
        ::-webkit-scrollbar-track { background: var(--card); }
        ::-webkit-scrollbar-thumb { background: #343a40; border-radius: 10px; }
        ::-webkit-scrollbar-thumb:hover { background: var(--red); }

        .footer {
            background-color: var(--panel);
            color: var(--text);
            border-top: 1px solid var(--border);
            padding: 22px 0;
            margin-top: 48px;
            text-align: center;
        }
        .footer p {
            margin: 0;
            font-size: .85rem;
            color: var(--muted);
        }

        .pagination {
            justify-content: center;
            gap: 8px;
        }
        .pagination .page-link {
            background-color: #343a40;
            border-color: #343a40;
            color: var(--text);
            margin-left: 0;
            border-radius: 6px;
            transition: background-color .15s ease, border-color .15s ease, transform .15s ease;
        }
        .pagination .page-link:hover {
            background-color: var(--red);
            border-color: var(--red);
            transform: translateY(-1px);
        }
        .pagination .page-link:active { transform: translateY(0) scale(.94); }
        .pagination .page-item.active .page-link {
            background-color: var(--red);
            border-color: var(--red);
        }

        .fa-telegram {
            color:#2C96CF;
        }

        /* ── Global search ── */
        .global-search-wrap {
            background: var(--bg);
            padding: 14px 0 0;
            position: relative;
            z-index: 1019;
        }
        .search-input-container { position: relative; flex: 1; }
        /* Hide the browser's own type="search" clear button — we render our
           own (.search-clear-btn), and both together showed two X icons. */
        input[type="search"]::-webkit-search-cancel-button,
        input[type="search"]::-webkit-search-decoration { -webkit-appearance: none; appearance: none; }
        input[type="search"]::-ms-clear { display: none; width: 0; height: 0; }
        .search-clear-btn {
            position: absolute; right: 8px; top: 50%; transform: translateY(-50%);
            background: none; border: none; color: var(--muted); cursor: pointer;
            padding: 4px; display: none; z-index: 10;
        }
        .search-clear-btn.show { display: block; }
        .search-dropdown {
            position: absolute;
            top: calc(100% + 8px); left: 0; right: 0;
            background: var(--panel);
            border: 1px solid #23262a;
            border-radius: 8px;
            max-height: 300px;
            overflow-y: auto;
            z-index: 1055;
            display: none;
            box-shadow: 0 8px 32px rgba(0,0,0,.6);
        }
        .search-dropdown {
            animation: dropdownIn .18s ease;
        }
        @keyframes dropdownIn {
            from { opacity: 0; transform: translateY(-4px); }
            to   { opacity: 1; transform: translateY(0); }
        }
        .search-dropdown-item {
            padding: 11px 16px;
            border-bottom: 1px solid #1e2228;
            cursor: pointer;
            transition: background .15s ease;
        }
        .search-dropdown-item:hover { background: var(--card); }
        .search-dropdown-item:last-child { border-bottom: none; }
        .search-dropdown-item-title { font-weight: 700; color: var(--text); font-size: .88rem; }
        .search-dropdown-item-year  { color: var(--muted); font-size: .78rem; margin-top: 2px; }

        /* ── Category bar ── */
        .global-cat-bar {
            padding: 12px 0 12px;
            background: var(--bg);
            position: relative;
            z-index: 10;
        }
        .catButton {
            background: #1c2026 !important;
            color: #ffffff !important;
            border: 2px solid #363c47 !important;
            border-radius: 20px !important;
            box-shadow: 0 2px 8px rgba(0,0,0,.35) !important;
            font-size: .82rem;
            font-weight: 600;
            padding: 6px 17px;
            cursor: pointer;
            transition: background .18s ease, border-color .18s ease, box-shadow .2s ease, transform .15s ease;
        }
        .catButton:hover {
            background: #262b33 !important;
            border-color: var(--red) !important;
            color: #ffffff !important;
            box-shadow: 0 0 8px rgba(239,68,68,.5), 0 0 18px rgba(239,68,68,.25), 0 4px 14px rgba(0,0,0,.35) !important;
            transform: translateY(-1px);
        }
        .catButton:active { transform: translateY(0) scale(.96); }
        .catButton.cat-active {
            background: var(--red) !important;
            border-color: var(--red) !important;
            color: #ffffff !important;
            box-shadow: 0 0 8px rgba(239,68,68,.5), 0 0 18px rgba(239,68,68,.25) !important;
        }
        /* On mobile, a wrapped multi-row flex layout of pills reads as
           ragged/uneven (different pill counts per row, centered so the
           short last row floats in the middle) — a fixed 3-column grid gives
           every pill the same width and keeps everything visible with no
           scrolling. The last item (Join Telegram) spans 2 columns to fill
           out the final row evenly, since 8 items over 3 columns leaves a
           lone item on the last row otherwise. */
        @media (max-width: 767px) {
            .cat-mobile-grid {
                display: grid !important;
                grid-template-columns: repeat(3, 1fr);
                gap: 6px;
            }
            .cat-mobile-grid .catButton {
                font-size: .72rem;
                font-weight: 700;
                padding: 8px 2px;
                border-radius: 9px !important;
                text-align: center;
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
            }
            .cat-mobile-grid .catButton:last-child { grid-column: span 2; }
        }
        .genre-pick {
            display: inline-block;
            background: var(--panel);
            border: 2px solid #2d3340;
            border-radius: 20px;
            color: #fff;
            font-size: .82rem;
            font-weight: 600;
            padding: 6px 15px;
            text-decoration: none;
            transition: background .18s ease, border-color .18s ease, color .18s ease, box-shadow .2s ease, transform .15s ease;
        }
        .genre-pick:hover {
            background: #23262a;
            border-color: var(--red);
            color: #fff;
            box-shadow: 0 0 8px rgba(239,68,68,.5), 0 0 18px rgba(239,68,68,.25);
            transform: translateY(-1px);
        }
        .genre-pick:active { transform: translateY(0) scale(.96); }
        .genre-pick.genre-pick-active {
            background: var(--red);
            border-color: var(--red);
            color: #fff;
            box-shadow: 0 0 8px rgba(239,68,68,.5), 0 0 18px rgba(239,68,68,.25);
        }

        .nav-home-btn {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            background: rgba(239,68,68,.1);
            border: 1px solid rgba(239,68,68,.25);
            color: #fff;
            border-radius: 8px;
            height: 38px;
            padding: 0 14px;
            text-decoration: none;
            font-size: .88rem;
            font-weight: 600;
            flex-shrink: 0;
            transition: background .15s ease, border-color .15s ease, transform .15s ease;
        }
        .nav-home-btn:hover { background: rgba(239,68,68,.18); border-color: rgba(239,68,68,.4); color: #fff; transform: translateY(-1px); }
        .nav-home-btn:active { transform: translateY(0) scale(.96); }
    


          .movie-type-badge {
            position: absolute;
            z-index: 2;
            top: 8px; right: 10px;
            font-size: 11px;
            line-height: 1;
            padding: 4px 8px;
            border-radius: 6px;
            font-weight: 800;
            color: #fff;
            border: 1px solid rgba(255,255,255,.08);
            text-transform: uppercase;
            box-shadow: 0 2px 8px rgba(0,0,0,.35);
            pointer-events: none;
        }
        .movie-badge-movie  { background: #e53935; }
        .movie-badge-series { background: #7b61ff; }
        .movie-card {
            position: relative;
            background: var(--card);
            border-radius: 10px;
            overflow: hidden;
            height: 100%;
            display: flex;
            flex-direction: column;
        }
        .movie-card > a {
            display: flex;
            flex-direction: column;
            flex: 1;
            text-decoration: none;
            color: inherit;
        }
        .image-container {
            position: relative;
            width: 100%;
            height: 0;
            padding-bottom: 130%;
            overflow: hidden;
            background-color: var(--bg);
        }
        .lazy-image {
            position: absolute;
            top: 0; left: 0;
            width: 100%; height: 100%;
            object-fit: contain;
            transition: all 0.3s ease;
            backface-visibility: hidden;
        }
        .lazy-image.loaded { object-fit: cover; }
        .custom_line {
            display: block;
            text-align: center;
            margin-top: 8px;
            font-size: 0.9rem;
            font-weight: bold;
            height: 2.7em;
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
        }
        .domain-banner {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 6px;
            background: linear-gradient(90deg, rgba(239,68,68,.16), rgba(239,68,68,.06));
            border: 1px solid rgba(239,68,68,.35);
            color: #fff;
            border-radius: 8px;
            padding: 10px 36px 10px 14px;
            margin-bottom: 12px;
            font-weight: 600;
            font-size: .95rem;
            text-decoration: none;
            position: relative;
            text-align: center;
            line-height: 1.4;
            transition: background .2s ease;
            animation: bannerIn .3s ease;
        }
        @keyframes bannerIn {
            from { opacity: 0; transform: translateY(-6px); }
            to   { opacity: 1; transform: translateY(0); }
        }
        .domain-banner:hover { background: linear-gradient(90deg, rgba(239,68,68,.24), rgba(239,68,68,.1)); color: #fff; }
        .domain-banner strong { color: #ff3131; }
        .domain-banner button {
            position: absolute;
            top: 50%; right: 8px;
            transform: translateY(-50%);
            background: none;
            border: none;
            color: rgba(255,255,255,.55);
            font-size: .78rem;
            cursor: pointer;
            padding: 4px;
            line-height: 1;
            transition: color .15s ease, transform .15s ease;
        }
        .domain-banner button:hover { color: #fff; transform: translateY(-50%) scale(1.15); }

        /* ── Independence Day banner (auto-shows Aug 14–16 every year) ── */
        .iday-banner {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 10px;
            background: linear-gradient(90deg, rgba(255,153,51,.14), rgba(255,255,255,.05), rgba(19,136,8,.16));
            border: 1px solid rgba(255,255,255,.12);
            border-top: 3px solid #FF9933;
            border-bottom: 3px solid #138808;
            border-radius: 10px;
            padding: 11px 36px 11px 14px;
            margin-bottom: 12px;
            color: #fff;
            font-weight: 600;
            font-size: .92rem;
            text-align: center;
            line-height: 1.4;
            position: relative;
            animation: bannerIn .3s ease;
        }
        .iday-chakra {
            display: inline-block;
            width: 16px; height: 16px;
            border: 2px solid #1a4fa0;
            border-radius: 50%;
            position: relative;
            flex-shrink: 0;
            animation: idaySpin 6s linear infinite;
        }
        .iday-chakra::before {
            content: '';
            position: absolute;
            inset: -2px;
            border-radius: 50%;
            background:
                repeating-conic-gradient(#1a4fa0 0deg 3deg, transparent 3deg 15deg);
        }
        @keyframes idaySpin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
        .iday-banner button {
            position: absolute;
            top: 50%; right: 8px;
            transform: translateY(-50%);
            background: none;
            border: none;
            color: rgba(255,255,255,.55);
            font-size: .78rem;
            cursor: pointer;
            padding: 4px;
            line-height: 1;
            transition: color .15s ease, transform .15s ease;
        }
        .iday-banner button:hover { color: #fff; transform: translateY(-50%) scale(1.15); }

        .iday-confetti-wrap {
            position: fixed;
            inset: 0;
            pointer-events: none;
            overflow: hidden;
            z-index: 1998;
        }
        .iday-confetti-piece {
            position: absolute;
            top: -20px;
            width: 8px;
            height: 14px;
            opacity: .9;
            animation-name: idayFall;
            animation-timing-function: linear;
            animation-fill-mode: forwards;
        }
        @keyframes idayFall {
            0%   { transform: translateY(0) rotate(0deg); opacity: .95; }
            100% { transform: translateY(110vh) rotate(540deg); opacity: .4; }
        }

        .section-heading {
            display: flex;
            align-items: center;
            gap: 12px;
            background: var(--card);
            border-radius: 8px;
            padding: 11px 18px;
            border-left: 4px solid var(--red);
            position: relative;
            overflow: hidden;
            margin-bottom: 12px;
        }
        .section-heading::before {
            content: '';
            position: absolute;
            inset: 0;
            width: 160px;
            background: linear-gradient(90deg, rgba(239,68,68,.1), transparent);
            pointer-events: none;
        }
        .section-heading-icon {
            font-size: 1.05rem;
            color: #f97316;
            position: relative;
        }
        .section-heading-text {
            font-size: 1.05rem;
            font-weight: 700;
            color: #fff;
            letter-spacing: .3px;
            position: relative;
        }
        .btn-danger {
            background-color: var(--red) !important;
            border-color: var(--red) !important;
        }
        .btn-danger:hover, .btn-danger:focus, .btn-danger:active {
            background-color: #c82333 !important;
            border-color: #bd2130 !important;
            box-shadow: none;
        }
        


      html, body {
            max-width: 100%;
            overflow-x: hidden;
        }
        html {
            overflow-y: scroll;
            scrollbar-gutter: stable;
        }
        body.modal-open {
            padding-right: 0 !important;
        }
        :root{
            --bg:#0b0c0e;
            --panel:#141619;
            --card:#1a1c1f;
            --text:#f1f2f4;
            --muted:#98a0aa;
            --accent:#22c55e;
            --red:#ef4444;
            --ring:#2a2f35;
            --border:rgba(255,255,255,.08);
            --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
        }
        html, body {
            font-family: var(--font-sans);
        }
        body {
            background-color: var(--bg);
            color: var(--text);
            font-feature-settings: "cv11", "ss01";
            -webkit-font-smoothing: antialiased;
        }
        h1, h2, h3, h4, h5, h6, .navbar-brand, button, input, select, textarea {
            font-family: var(--font-sans);
        }
        .navbar {
            background-color: var(--panel) !important;
            border-bottom: 1px solid var(--border);
            transition: box-shadow .2s, background-color .2s;
        }
        .navbar.scrolled { box-shadow: 0 6px 24px rgba(0,0,0,.4); }
        .wl-btn {
            position: absolute;
            top: 8px; left: 8px;
            z-index: 3;
            background: rgba(0,0,0,.55);
            border: none;
            border-radius: 50%;
            width: 28px; height: 28px;
            display: flex; align-items: center; justify-content: center;
            color: #9aa0a6;
            cursor: pointer;
            font-size: .74rem;
            transition: color .15s ease, background .15s ease, transform .15s ease;
            padding: 0;
        }
        .wl-btn:hover { background: rgba(0,0,0,.85); color: #fff; transform: scale(1.12); }
        .wl-btn:active { transform: scale(.88); }
        .wl-btn.wl-saved { color: #ef4444; animation: wlPop .35s ease; }
        @keyframes wlPop { 0% { transform: scale(1); } 45% { transform: scale(1.35); } 100% { transform: scale(1); } }
        .wl-search-btn {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            background: rgba(239,68,68,.1);
            border: 1px solid rgba(239,68,68,.25);
            color: #fff;
            border-radius: 8px;
            width: 38px;
            height: 38px;
            text-decoration: none;
            font-size: .95rem;
            flex-shrink: 0;
            transition: background .15s ease, border-color .15s ease, transform .15s ease;
            position: relative;
        }
        .wl-search-btn:hover { background: rgba(239,68,68,.18); border-color: rgba(239,68,68,.4); color: #fff; transform: translateY(-1px); }
        .wl-search-btn:active { transform: translateY(0) scale(.94); }
        .card-info { padding: 10px 8px 6px; text-align: left; flex: 1; }
        .card-title { font-size: .85rem; font-weight: 700; color: var(--text); line-height: 1.3; margin-bottom: 10px; }
        .card-meta { font-size: .72rem; color: rgba(255,255,255,.55); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
        .wl-nav-dot {
            position: absolute;
            top: 4px; right: 4px;
            width: 6px; height: 6px;
            background: #4ade80;
            border-radius: 50%;
            display: none;
        }
        .search-bar { width: 100%; background-color: var(--panel) !important; color: var(--text); border: 1px solid #23262a; }
        .input-color{
            background-color: var(--panel) !important;
            border: 1px solid #23262a;
            color: var(--text);
        }
        .input-color {
            transition: border-color .15s ease, background-color .15s ease;
        }
        .input-color:focus {
            background-color: var(--panel) !important;
            border-color: var(--red);
            box-shadow: none;
            color: var(--text);
        }
        .input-color::placeholder{
            color: rgb(81, 81, 81);
        }
        .movie-card img { border-radius: 10px; width: 100%; }
        .movie-card {
            text-align: center; background: var(--card); border-radius: 10px; padding: 10px;
            position: relative; border: 2px solid transparent;
            transition: border-color .3s ease, box-shadow .3s ease, transform .35s cubic-bezier(.22,1,.36,1);
        }
        .movie-card:hover {
            transform: translateY(-6px);
            border-color: var(--red);
            box-shadow: 0 0 8px rgba(239,68,68,.5), 0 0 18px rgba(239,68,68,.25), 0 18px 32px rgba(0,0,0,.5);
        }
        .movie-card a { text-decoration: none; color: var(--text); }
        .movie-card .image-container { overflow: hidden; }
        .movie-card .lazy-image { transition: transform .5s cubic-bezier(.22,1,.36,1); backface-visibility: hidden; }
        .movie-card .lazy-image.loaded { transform: scale(1.03); }
        .movie-card:hover .lazy-image.loaded { transform: scale(1.08); }

        #movieCarousel { height: 500px; overflow: hidden; }
        #movieCarousel .carousel-item { position: relative; }
        #movieCarousel .carousel-item::before {
            content: '';
            position: absolute;
            inset: 0;
            background: linear-gradient(180deg, rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.2)),
                        linear-gradient(90deg, rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.2));
            z-index: 1;
        }
        #movieCarousel .carousel-item img {
            height: 500px;
            width: 100%;
            object-fit: cover;
        }
        #movieCarousel .carousel-caption {
            left: 50%;
            transform: translateX(-50%);
            z-index: 2;
        }

        ::-webkit-scrollbar { width: 8px; }
        ::-webkit-scrollbar-track { background: var(--card); }
        ::-webkit-scrollbar-thumb { background: #343a40; border-radius: 10px; }
        ::-webkit-scrollbar-thumb:hover { background: var(--red); }

        .footer {
            background-color: var(--panel);
            color: var(--text);
            border-top: 1px solid var(--border);
            padding: 22px 0;
            margin-top: 48px;
            text-align: center;
        }
        .footer p {
            margin: 0;
            font-size: .85rem;
            color: var(--muted);
        }

        .pagination {
            justify-content: center;
            gap: 8px;
        }
        .pagination .page-link {
            background-color: #343a40;
            border-color: #343a40;
            color: var(--text);
            margin-left: 0;
            border-radius: 6px;
            transition: background-color .15s ease, border-color .15s ease, transform .15s ease;
        }
        .pagination .page-link:hover {
            background-color: var(--red);
            border-color: var(--red);
            transform: translateY(-1px);
        }
        .pagination .page-link:active { transform: translateY(0) scale(.94); }
        .pagination .page-item.active .page-link {
            background-color: var(--red);
            border-color: var(--red);
        }

        .fa-telegram {
            color:#2C96CF;
        }

        /* ── Global search ── */
        .global-search-wrap {
            background: var(--bg);
            padding: 14px 0 0;
            position: relative;
            z-index: 1019;
        }
        .search-input-container { position: relative; flex: 1; }
        /* Hide the browser's own type="search" clear button — we render our
           own (.search-clear-btn), and both together showed two X icons. */
        input[type="search"]::-webkit-search-cancel-button,
        input[type="search"]::-webkit-search-decoration { -webkit-appearance: none; appearance: none; }
        input[type="search"]::-ms-clear { display: none; width: 0; height: 0; }
        .search-clear-btn {
            position: absolute; right: 8px; top: 50%; transform: translateY(-50%);
            background: none; border: none; color: var(--muted); cursor: pointer;
            padding: 4px; display: none; z-index: 10;
        }
        .search-clear-btn.show { display: block; }
        .search-dropdown {
            position: absolute;
            top: calc(100% + 8px); left: 0; right: 0;
            background: var(--panel);
            border: 1px solid #23262a;
            border-radius: 8px;
            max-height: 300px;
            overflow-y: auto;
            z-index: 1055;
            display: none;
            box-shadow: 0 8px 32px rgba(0,0,0,.6);
        }
        .search-dropdown {
            animation: dropdownIn .18s ease;
        }
        @keyframes dropdownIn {
            from { opacity: 0; transform: translateY(-4px); }
            to   { opacity: 1; transform: translateY(0); }
        }
        .search-dropdown-item {
            padding: 11px 16px;
            border-bottom: 1px solid #1e2228;
            cursor: pointer;
            transition: background .15s ease;
        }
        .search-dropdown-item:hover { background: var(--card); }
        .search-dropdown-item:last-child { border-bottom: none; }
        .search-dropdown-item-title { font-weight: 700; color: var(--text); font-size: .88rem; }
        .search-dropdown-item-year  { color: var(--muted); font-size: .78rem; margin-top: 2px; }

        /* ── Category bar ── */
        .global-cat-bar {
            padding: 12px 0 12px;
            background: var(--bg);
            position: relative;
            z-index: 10;
        }
        .catButton {
            background: #1c2026 !important;
            color: #ffffff !important;
            border: 2px solid #363c47 !important;
            border-radius: 20px !important;
            box-shadow: 0 2px 8px rgba(0,0,0,.35) !important;
            font-size: .82rem;
            font-weight: 600;
            padding: 6px 17px;
            cursor: pointer;
            transition: background .18s ease, border-color .18s ease, box-shadow .2s ease, transform .15s ease;
        }
        .catButton:hover {
            background: #262b33 !important;
            border-color: var(--red) !important;
            color: #ffffff !important;
            box-shadow: 0 0 8px rgba(239,68,68,.5), 0 0 18px rgba(239,68,68,.25), 0 4px 14px rgba(0,0,0,.35) !important;
            transform: translateY(-1px);
        }
        .catButton:active { transform: translateY(0) scale(.96); }
        .catButton.cat-active {
            background: var(--red) !important;
            border-color: var(--red) !important;
            color: #ffffff !important;
            box-shadow: 0 0 8px rgba(239,68,68,.5), 0 0 18px rgba(239,68,68,.25) !important;
        }
        /* On mobile, a wrapped multi-row flex layout of pills reads as
           ragged/uneven (different pill counts per row, centered so the
           short last row floats in the middle) — a fixed 3-column grid gives
           every pill the same width and keeps everything visible with no
           scrolling. The last item (Join Telegram) spans 2 columns to fill
           out the final row evenly, since 8 items over 3 columns leaves a
           lone item on the last row otherwise. */
        @media (max-width: 767px) {
            .cat-mobile-grid {
                display: grid !important;
                grid-template-columns: repeat(3, 1fr);
                gap: 6px;
            }
            .cat-mobile-grid .catButton {
                font-size: .72rem;
                font-weight: 700;
                padding: 8px 2px;
                border-radius: 9px !important;
                text-align: center;
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
            }
            .cat-mobile-grid .catButton:last-child { grid-column: span 2; }
        }
        .genre-pick {
            display: inline-block;
            background: var(--panel);
            border: 2px solid #2d3340;
            border-radius: 20px;
            color: #fff;
            font-size: .82rem;
            font-weight: 600;
            padding: 6px 15px;
            text-decoration: none;
            transition: background .18s ease, border-color .18s ease, color .18s ease, box-shadow .2s ease, transform .15s ease;
        }
        .genre-pick:hover {
            background: #23262a;
            border-color: var(--red);
            color: #fff;
            box-shadow: 0 0 8px rgba(239,68,68,.5), 0 0 18px rgba(239,68,68,.25);
            transform: translateY(-1px);
        }
        .genre-pick:active { transform: translateY(0) scale(.96); }
        .genre-pick.genre-pick-active {
            background: var(--red);
            border-color: var(--red);
            color: #fff;
            box-shadow: 0 0 8px rgba(239,68,68,.5), 0 0 18px rgba(239,68,68,.25);
        }

        .nav-home-btn {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            background: rgba(239,68,68,.1);
            border: 1px solid rgba(239,68,68,.25);
            color: #fff;
            border-radius: 8px;
            height: 38px;
            padding: 0 14px;
            text-decoration: none;
            font-size: .88rem;
            font-weight: 600;
            flex-shrink: 0;
            transition: background .15s ease, border-color .15s ease, transform .15s ease;
        }
        .nav-home-btn:hover { background: rgba(239,68,68,.18); border-color: rgba(239,68,68,.4); color: #fff; transform: translateY(-1px); }
        .nav-home-btn:active { transform: translateY(0) scale(.96); }
    


          .movie-type-badge {
            position: absolute;
            z-index: 2;
            top: 8px; right: 10px;
            font-size: 11px;
            line-height: 1;
            padding: 4px 8px;
            border-radius: 6px;
            font-weight: 800;
            color: #fff;
            border: 1px solid rgba(255,255,255,.08);
            text-transform: uppercase;
            box-shadow: 0 2px 8px rgba(0,0,0,.35);
            pointer-events: none;
        }
        .movie-badge-movie  { background: #e53935; }
        .movie-badge-series { background: #7b61ff; }
        .movie-card {
            position: relative;
            background: var(--card);
            border-radius: 10px;
            overflow: hidden;
            height: 100%;
            display: flex;
            flex-direction: column;
        }
        .movie-card > a {
            display: flex;
            flex-direction: column;
            flex: 1;
            text-decoration: none;
            color: inherit;
        }
        .image-container {
            position: relative;
            width: 100%;
            height: 0;
            padding-bottom: 130%;
            overflow: hidden;
            background-color: var(--bg);
        }
        .lazy-image {
            position: absolute;
            top: 0; left: 0;
            width: 100%; height: 100%;
            object-fit: contain;
            transition: all 0.3s ease;
            backface-visibility: hidden;
        }
        .lazy-image.loaded { object-fit: cover; }
        .custom_line {
            display: block;
            text-align: center;
            margin-top: 8px;
            font-size: 0.9rem;
            font-weight: bold;
            height: 2.7em;
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
        }
        .domain-banner {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 6px;
            background: linear-gradient(90deg, rgba(239,68,68,.16), rgba(239,68,68,.06));
            border: 1px solid rgba(239,68,68,.35);
            color: #fff;
            border-radius: 8px;
            padding: 10px 36px 10px 14px;
            margin-bottom: 12px;
            font-weight: 600;
            font-size: .95rem;
            text-decoration: none;
            position: relative;
            text-align: center;
            line-height: 1.4;
            transition: background .2s ease;
            animation: bannerIn .3s ease;
        }
        @keyframes bannerIn {
            from { opacity: 0; transform: translateY(-6px); }
            to   { opacity: 1; transform: translateY(0); }
        }
        .domain-banner:hover { background: linear-gradient(90deg, rgba(239,68,68,.24), rgba(239,68,68,.1)); color: #fff; }
        .domain-banner strong { color: #ff3131; }
        .domain-banner button {
            position: absolute;
            top: 50%; right: 8px;
            transform: translateY(-50%);
            background: none;
            border: none;
            color: rgba(255,255,255,.55);
            font-size: .78rem;
            cursor: pointer;
            padding: 4px;
            line-height: 1;
            transition: color .15s ease, transform .15s ease;
        }
        .domain-banner button:hover { color: #fff; transform: translateY(-50%) scale(1.15); }

        /* ── Independence Day banner (auto-shows Aug 14–16 every year) ── */
        .iday-banner {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 10px;
            background: linear-gradient(90deg, rgba(255,153,51,.14), rgba(255,255,255,.05), rgba(19,136,8,.16));
            border: 1px solid rgba(255,255,255,.12);
            border-top: 3px solid #FF9933;
            border-bottom: 3px solid #138808;
            border-radius: 10px;
            padding: 11px 36px 11px 14px;
            margin-bottom: 12px;
            color: #fff;
            font-weight: 600;
            font-size: .92rem;
            text-align: center;
            line-height: 1.4;
            position: relative;
            animation: bannerIn .3s ease;
        }
        .iday-chakra {
            display: inline-block;
            width: 16px; height: 16px;
            border: 2px solid #1a4fa0;
            border-radius: 50%;
            position: relative;
            flex-shrink: 0;
            animation: idaySpin 6s linear infinite;
        }
        .iday-chakra::before {
            content: '';
            position: absolute;
            inset: -2px;
            border-radius: 50%;
            background:
                repeating-conic-gradient(#1a4fa0 0deg 3deg, transparent 3deg 15deg);
        }
        @keyframes idaySpin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
        .iday-banner button {
            position: absolute;
            top: 50%; right: 8px;
            transform: translateY(-50%);
            background: none;
            border: none;
            color: rgba(255,255,255,.55);
            font-size: .78rem;
            cursor: pointer;
            padding: 4px;
            line-height: 1;
            transition: color .15s ease, transform .15s ease;
        }
        .iday-banner button:hover { color: #fff; transform: translateY(-50%) scale(1.15); }

        .iday-confetti-wrap {
            position: fixed;
            inset: 0;
            pointer-events: none;
            overflow: hidden;
            z-index: 1998;
        }
        .iday-confetti-piece {
            position: absolute;
            top: -20px;
            width: 8px;
            height: 14px;
            opacity: .9;
            animation-name: idayFall;
            animation-timing-function: linear;
            animation-fill-mode: forwards;
        }
        @keyframes idayFall {
            0%   { transform: translateY(0) rotate(0deg); opacity: .95; }
            100% { transform: translateY(110vh) rotate(540deg); opacity: .4; }
        }

        .section-heading {
            display: flex;
            align-items: center;
            gap: 12px;
            background: var(--card);
            border-radius: 8px;
            padding: 11px 18px;
            border-left: 4px solid var(--red);
            position: relative;
            overflow: hidden;
            margin-bottom: 12px;
        }
        .section-heading::before {
            content: '';
            position: absolute;
            inset: 0;
            width: 160px;
            background: linear-gradient(90deg, rgba(239,68,68,.1), transparent);
            pointer-events: none;
        }
        .section-heading-icon {
            font-size: 1.05rem;
            color: #f97316;
            position: relative;
        }
        .section-heading-text {
            font-size: 1.05rem;
            font-weight: 700;
            color: #fff;
            letter-spacing: .3px;
            position: relative;
        }
        .btn-danger {
            background-color: var(--red) !important;
            border-color: var(--red) !important;
        }
        .btn-danger:hover, .btn-danger:focus, .btn-danger:active {
            background-color: #c82333 !important;
            border-color: #bd2130 !important;
            box-shadow: none;
        }
        


      html, body {
            max-width: 100%;
            overflow-x: hidden;
        }
        html {
            overflow-y: scroll;
            scrollbar-gutter: stable;
        }
        body.modal-open {
            padding-right: 0 !important;
        }
        :root{
            --bg:#0b0c0e;
            --panel:#141619;
            --card:#1a1c1f;
            --text:#f1f2f4;
            --muted:#98a0aa;
            --accent:#22c55e;
            --red:#ef4444;
            --ring:#2a2f35;
            --border:rgba(255,255,255,.08);
            --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
        }
        html, body {
            font-family: var(--font-sans);
        }
        body {
            background-color: var(--bg);
            color: var(--text);
            font-feature-settings: "cv11", "ss01";
            -webkit-font-smoothing: antialiased;
        }
        h1, h2, h3, h4, h5, h6, .navbar-brand, button, input, select, textarea {
            font-family: var(--font-sans);
        }
        .navbar {
            background-color: var(--panel) !important;
            border-bottom: 1px solid var(--border);
            transition: box-shadow .2s, background-color .2s;
        }
        .navbar.scrolled { box-shadow: 0 6px 24px rgba(0,0,0,.4); }
        .wl-btn {
            position: absolute;
            top: 8px; left: 8px;
            z-index: 3;
            background: rgba(0,0,0,.55);
            border: none;
            border-radius: 50%;
            width: 28px; height: 28px;
            display: flex; align-items: center; justify-content: center;
            color: #9aa0a6;
            cursor: pointer;
            font-size: .74rem;
            transition: color .15s ease, background .15s ease, transform .15s ease;
            padding: 0;
        }
        .wl-btn:hover { background: rgba(0,0,0,.85); color: #fff; transform: scale(1.12); }
        .wl-btn:active { transform: scale(.88); }
        .wl-btn.wl-saved { color: #ef4444; animation: wlPop .35s ease; }
        @keyframes wlPop { 0% { transform: scale(1); } 45% { transform: scale(1.35); } 100% { transform: scale(1); } }
        .wl-search-btn {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            background: rgba(239,68,68,.1);
            border: 1px solid rgba(239,68,68,.25);
            color: #fff;
            border-radius: 8px;
            width: 38px;
            height: 38px;
            text-decoration: none;
            font-size: .95rem;
            flex-shrink: 0;
            transition: background .15s ease, border-color .15s ease, transform .15s ease;
            position: relative;
        }
        .wl-search-btn:hover { background: rgba(239,68,68,.18); border-color: rgba(239,68,68,.4); color: #fff; transform: translateY(-1px); }
        .wl-search-btn:active { transform: translateY(0) scale(.94); }
        .card-info { padding: 10px 8px 6px; text-align: left; flex: 1; }
        .card-title { font-size: .85rem; font-weight: 700; color: var(--text); line-height: 1.3; margin-bottom: 10px; }
        .card-meta { font-size: .72rem; color: rgba(255,255,255,.55); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
        .wl-nav-dot {
            position: absolute;
            top: 4px; right: 4px;
            width: 6px; height: 6px;
            background: #4ade80;
            border-radius: 50%;
            display: none;
        }
        .search-bar { width: 100%; background-color: var(--panel) !important; color: var(--text); border: 1px solid #23262a; }
        .input-color{
            background-color: var(--panel) !important;
            border: 1px solid #23262a;
            color: var(--text);
        }
        .input-color {
            transition: border-color .15s ease, background-color .15s ease;
        }
        .input-color:focus {
            background-color: var(--panel) !important;
            border-color: var(--red);
            box-shadow: none;
            color: var(--text);
        }
        .input-color::placeholder{
            color: rgb(81, 81, 81);
        }
        .movie-card img { border-radius: 10px; width: 100%; }
        .movie-card {
            text-align: center; background: var(--card); border-radius: 10px; padding: 10px;
            position: relative; border: 2px solid transparent;
            transition: border-color .3s ease, box-shadow .3s ease, transform .35s cubic-bezier(.22,1,.36,1);
        }
        .movie-card:hover {
            transform: translateY(-6px);
            border-color: var(--red);
            box-shadow: 0 0 8px rgba(239,68,68,.5), 0 0 18px rgba(239,68,68,.25), 0 18px 32px rgba(0,0,0,.5);
        }
        .movie-card a { text-decoration: none; color: var(--text); }
        .movie-card .image-container { overflow: hidden; }
        .movie-card .lazy-image { transition: transform .5s cubic-bezier(.22,1,.36,1); backface-visibility: hidden; }
        .movie-card .lazy-image.loaded { transform: scale(1.03); }
        .movie-card:hover .lazy-image.loaded { transform: scale(1.08); }

        #movieCarousel { height: 500px; overflow: hidden; }
        #movieCarousel .carousel-item { position: relative; }
        #movieCarousel .carousel-item::before {
            content: '';
            position: absolute;
            inset: 0;
            background: linear-gradient(180deg, rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.2)),
                        linear-gradient(90deg, rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.2));
            z-index: 1;
        }
        #movieCarousel .carousel-item img {
            height: 500px;
            width: 100%;
            object-fit: cover;
        }
        #movieCarousel .carousel-caption {
            left: 50%;
            transform: translateX(-50%);
            z-index: 2;
        }

        ::-webkit-scrollbar { width: 8px; }
        ::-webkit-scrollbar-track { background: var(--card); }
        ::-webkit-scrollbar-thumb { background: #343a40; border-radius: 10px; }
        ::-webkit-scrollbar-thumb:hover { background: var(--red); }

        .footer {
            background-color: var(--panel);
            color: var(--text);
            border-top: 1px solid var(--border);
            padding: 22px 0;
            margin-top: 48px;
            text-align: center;
        }
        .footer p {
            margin: 0;
            font-size: .85rem;
            color: var(--muted);
        }

        .pagination {
            justify-content: center;
            gap: 8px;
        }
        .pagination .page-link {
            background-color: #343a40;
            border-color: #343a40;
            color: var(--text);
            margin-left: 0;
            border-radius: 6px;
            transition: background-color .15s ease, border-color .15s ease, transform .15s ease;
        }
        .pagination .page-link:hover {
            background-color: var(--red);
            border-color: var(--red);
            transform: translateY(-1px);
        }
        .pagination .page-link:active { transform: translateY(0) scale(.94); }
        .pagination .page-item.active .page-link {
            background-color: var(--red);
            border-color: var(--red);
        }

        .fa-telegram {
            color:#2C96CF;
        }

        /* ── Global search ── */
        .global-search-wrap {
            background: var(--bg);
            padding: 14px 0 0;
            position: relative;
            z-index: 1019;
        }
        .search-input-container { position: relative; flex: 1; }
        /* Hide the browser's own type="search" clear button — we render our
           own (.search-clear-btn), and both together showed two X icons. */
        input[type="search"]::-webkit-search-cancel-button,
        input[type="search"]::-webkit-search-decoration { -webkit-appearance: none; appearance: none; }
        input[type="search"]::-ms-clear { display: none; width: 0; height: 0; }
        .search-clear-btn {
            position: absolute; right: 8px; top: 50%; transform: translateY(-50%);
            background: none; border: none; color: var(--muted); cursor: pointer;
            padding: 4px; display: none; z-index: 10;
        }
        .search-clear-btn.show { display: block; }
        .search-dropdown {
            position: absolute;
            top: calc(100% + 8px); left: 0; right: 0;
            background: var(--panel);
            border: 1px solid #23262a;
            border-radius: 8px;
            max-height: 300px;
            overflow-y: auto;
            z-index: 1055;
            display: none;
            box-shadow: 0 8px 32px rgba(0,0,0,.6);
        }
        .search-dropdown {
            animation: dropdownIn .18s ease;
        }
        @keyframes dropdownIn {
            from { opacity: 0; transform: translateY(-4px); }
            to   { opacity: 1; transform: translateY(0); }
        }
        .search-dropdown-item {
            padding: 11px 16px;
            border-bottom: 1px solid #1e2228;
            cursor: pointer;
            transition: background .15s ease;
        }
        .search-dropdown-item:hover { background: var(--card); }
        .search-dropdown-item:last-child { border-bottom: none; }
        .search-dropdown-item-title { font-weight: 700; color: var(--text); font-size: .88rem; }
        .search-dropdown-item-year  { color: var(--muted); font-size: .78rem; margin-top: 2px; }

        /* ── Category bar ── */
        .global-cat-bar {
            padding: 12px 0 12px;
            background: var(--bg);
            position: relative;
            z-index: 10;
        }
        .catButton {
            background: #1c2026 !important;
            color: #ffffff !important;
            border: 2px solid #363c47 !important;
            border-radius: 20px !important;
            box-shadow: 0 2px 8px rgba(0,0,0,.35) !important;
            font-size: .82rem;
            font-weight: 600;
            padding: 6px 17px;
            cursor: pointer;
            transition: background .18s ease, border-color .18s ease, box-shadow .2s ease, transform .15s ease;
        }
        .catButton:hover {
            background: #262b33 !important;
            border-color: var(--red) !important;
            color: #ffffff !important;
            box-shadow: 0 0 8px rgba(239,68,68,.5), 0 0 18px rgba(239,68,68,.25), 0 4px 14px rgba(0,0,0,.35) !important;
            transform: translateY(-1px);
        }
        .catButton:active { transform: translateY(0) scale(.96); }
        .catButton.cat-active {
            background: var(--red) !important;
            border-color: var(--red) !important;
            color: #ffffff !important;
            box-shadow: 0 0 8px rgba(239,68,68,.5), 0 0 18px rgba(239,68,68,.25) !important;
        }
        /* On mobile, a wrapped multi-row flex layout of pills reads as
           ragged/uneven (different pill counts per row, centered so the
           short last row floats in the middle) — a fixed 3-column grid gives
           every pill the same width and keeps everything visible with no
           scrolling. The last item (Join Telegram) spans 2 columns to fill
           out the final row evenly, since 8 items over 3 columns leaves a
           lone item on the last row otherwise. */
        @media (max-width: 767px) {
            .cat-mobile-grid {
                display: grid !important;
                grid-template-columns: repeat(3, 1fr);
                gap: 6px;
            }
            .cat-mobile-grid .catButton {
                font-size: .72rem;
                font-weight: 700;
                padding: 8px 2px;
                border-radius: 9px !important;
                text-align: center;
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
            }
            .cat-mobile-grid .catButton:last-child { grid-column: span 2; }
        }
        .genre-pick {
            display: inline-block;
            background: var(--panel);
            border: 2px solid #2d3340;
            border-radius: 20px;
            color: #fff;
            font-size: .82rem;
            font-weight: 600;
            padding: 6px 15px;
            text-decoration: none;
            transition: background .18s ease, border-color .18s ease, color .18s ease, box-shadow .2s ease, transform .15s ease;
        }
        .genre-pick:hover {
            background: #23262a;
            border-color: var(--red);
            color: #fff;
            box-shadow: 0 0 8px rgba(239,68,68,.5), 0 0 18px rgba(239,68,68,.25);
            transform: translateY(-1px);
        }
        .genre-pick:active { transform: translateY(0) scale(.96); }
        .genre-pick.genre-pick-active {
            background: var(--red);
            border-color: var(--red);
            color: #fff;
            box-shadow: 0 0 8px rgba(239,68,68,.5), 0 0 18px rgba(239,68,68,.25);
        }

        .nav-home-btn {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            background: rgba(239,68,68,.1);
            border: 1px solid rgba(239,68,68,.25);
            color: #fff;
            border-radius: 8px;
            height: 38px;
            padding: 0 14px;
            text-decoration: none;
            font-size: .88rem;
            font-weight: 600;
            flex-shrink: 0;
            transition: background .15s ease, border-color .15s ease, transform .15s ease;
        }
        .nav-home-btn:hover { background: rgba(239,68,68,.18); border-color: rgba(239,68,68,.4); color: #fff; transform: translateY(-1px); }
        .nav-home-btn:active { transform: translateY(0) scale(.96); }
    


          .movie-type-badge {
            position: absolute;
            z-index: 2;
            top: 8px; right: 10px;
            font-size: 11px;
            line-height: 1;
            padding: 4px 8px;
            border-radius: 6px;
            font-weight: 800;
            color: #fff;
            border: 1px solid rgba(255,255,255,.08);
            text-transform: uppercase;
            box-shadow: 0 2px 8px rgba(0,0,0,.35);
            pointer-events: none;
        }
        .movie-badge-movie  { background: #e53935; }
        .movie-badge-series { background: #7b61ff; }
        .movie-card {
            position: relative;
            background: var(--card);
            border-radius: 10px;
            overflow: hidden;
            height: 100%;
            display: flex;
            flex-direction: column;
        }
        .movie-card > a {
            display: flex;
            flex-direction: column;
            flex: 1;
            text-decoration: none;
            color: inherit;
        }
        .image-container {
            position: relative;
            width: 100%;
            height: 0;
            padding-bottom: 130%;
            overflow: hidden;
            background-color: var(--bg);
        }
        .lazy-image {
            position: absolute;
            top: 0; left: 0;
            width: 100%; height: 100%;
            object-fit: contain;
            transition: all 0.3s ease;
            backface-visibility: hidden;
        }
        .lazy-image.loaded { object-fit: cover; }
        .custom_line {
            display: block;
            text-align: center;
            margin-top: 8px;
            font-size: 0.9rem;
            font-weight: bold;
            height: 2.7em;
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
        }
        .domain-banner {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 6px;
            background: linear-gradient(90deg, rgba(239,68,68,.16), rgba(239,68,68,.06));
            border: 1px solid rgba(239,68,68,.35);
            color: #fff;
            border-radius: 8px;
            padding: 10px 36px 10px 14px;
            margin-bottom: 12px;
            font-weight: 600;
            font-size: .95rem;
            text-decoration: none;
            position: relative;
            text-align: center;
            line-height: 1.4;
            transition: background .2s ease;
            animation: bannerIn .3s ease;
        }
        @keyframes bannerIn {
            from { opacity: 0; transform: translateY(-6px); }
            to   { opacity: 1; transform: translateY(0); }
        }
        .domain-banner:hover { background: linear-gradient(90deg, rgba(239,68,68,.24), rgba(239,68,68,.1)); color: #fff; }
        .domain-banner strong { color: #ff3131; }
        .domain-banner button {
            position: absolute;
            top: 50%; right: 8px;
            transform: translateY(-50%);
            background: none;
            border: none;
            color: rgba(255,255,255,.55);
            font-size: .78rem;
            cursor: pointer;
            padding: 4px;
            line-height: 1;
            transition: color .15s ease, transform .15s ease;
        }
        .domain-banner button:hover { color: #fff; transform: translateY(-50%) scale(1.15); }

        /* ── Independence Day banner (auto-shows Aug 14–16 every year) ── */
        .iday-banner {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 10px;
            background: linear-gradient(90deg, rgba(255,153,51,.14), rgba(255,255,255,.05), rgba(19,136,8,.16));
            border: 1px solid rgba(255,255,255,.12);
            border-top: 3px solid #FF9933;
            border-bottom: 3px solid #138808;
            border-radius: 10px;
            padding: 11px 36px 11px 14px;
            margin-bottom: 12px;
            color: #fff;
            font-weight: 600;
            font-size: .92rem;
            text-align: center;
            line-height: 1.4;
            position: relative;
            animation: bannerIn .3s ease;
        }
        .iday-chakra {
            display: inline-block;
            width: 16px; height: 16px;
            border: 2px solid #1a4fa0;
            border-radius: 50%;
            position: relative;
            flex-shrink: 0;
            animation: idaySpin 6s linear infinite;
        }
        .iday-chakra::before {
            content: '';
            position: absolute;
            inset: -2px;
            border-radius: 50%;
            background:
                repeating-conic-gradient(#1a4fa0 0deg 3deg, transparent 3deg 15deg);
        }
        @keyframes idaySpin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
        .iday-banner button {
            position: absolute;
            top: 50%; right: 8px;
            transform: translateY(-50%);
            background: none;
            border: none;
            color: rgba(255,255,255,.55);
            font-size: .78rem;
            cursor: pointer;
            padding: 4px;
            line-height: 1;
            transition: color .15s ease, transform .15s ease;
        }
        .iday-banner button:hover { color: #fff; transform: translateY(-50%) scale(1.15); }

        .iday-confetti-wrap {
            position: fixed;
            inset: 0;
            pointer-events: none;
            overflow: hidden;
            z-index: 1998;
        }
        .iday-confetti-piece {
            position: absolute;
            top: -20px;
            width: 8px;
            height: 14px;
            opacity: .9;
            animation-name: idayFall;
            animation-timing-function: linear;
            animation-fill-mode: forwards;
        }
        @keyframes idayFall {
            0%   { transform: translateY(0) rotate(0deg); opacity: .95; }
            100% { transform: translateY(110vh) rotate(540deg); opacity: .4; }
        }

        .section-heading {
            display: flex;
            align-items: center;
            gap: 12px;
            background: var(--card);
            border-radius: 8px;
            padding: 11px 18px;
            border-left: 4px solid var(--red);
            position: relative;
            overflow: hidden;
            margin-bottom: 12px;
        }
        .section-heading::before {
            content: '';
            position: absolute;
            inset: 0;
            width: 160px;
            background: linear-gradient(90deg, rgba(239,68,68,.1), transparent);
            pointer-events: none;
        }
        .section-heading-icon {
            font-size: 1.05rem;
            color: #f97316;
            position: relative;
        }
        .section-heading-text {
            font-size: 1.05rem;
            font-weight: 700;
            color: #fff;
            letter-spacing: .3px;
            position: relative;
        }
        .btn-danger {
            background-color: var(--red) !important;
            border-color: var(--red) !important;
        }
        .btn-danger:hover, .btn-danger:focus, .btn-danger:active {
            background-color: #c82333 !important;
            border-color: #bd2130 !important;
            box-shadow: none;
        }
        


      html, body {
            max-width: 100%;
            overflow-x: hidden;
        }
        html {
            overflow-y: scroll;
            scrollbar-gutter: stable;
        }
        body.modal-open {
            padding-right: 0 !important;
        }
        :root{
            --bg:#0b0c0e;
            --panel:#141619;
            --card:#1a1c1f;
            --text:#f1f2f4;
            --muted:#98a0aa;
            --accent:#22c55e;
            --red:#ef4444;
            --ring:#2a2f35;
            --border:rgba(255,255,255,.08);
            --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
        }
        html, body {
            font-family: var(--font-sans);
        }
        body {
            background-color: var(--bg);
            color: var(--text);
            font-feature-settings: "cv11", "ss01";
            -webkit-font-smoothing: antialiased;
        }
        h1, h2, h3, h4, h5, h6, .navbar-brand, button, input, select, textarea {
            font-family: var(--font-sans);
        }
        .navbar {
            background-color: var(--panel) !important;
            border-bottom: 1px solid var(--border);
            transition: box-shadow .2s, background-color .2s;
        }
        .navbar.scrolled { box-shadow: 0 6px 24px rgba(0,0,0,.4); }
        .wl-btn {
            position: absolute;
            top: 8px; left: 8px;
            z-index: 3;
            background: rgba(0,0,0,.55);
            border: none;
            border-radius: 50%;
            width: 28px; height: 28px;
            display: flex; align-items: center; justify-content: center;
            color: #9aa0a6;
            cursor: pointer;
            font-size: .74rem;
            transition: color .15s ease, background .15s ease, transform .15s ease;
            padding: 0;
        }
        .wl-btn:hover { background: rgba(0,0,0,.85); color: #fff; transform: scale(1.12); }
        .wl-btn:active { transform: scale(.88); }
        .wl-btn.wl-saved { color: #ef4444; animation: wlPop .35s ease; }
        @keyframes wlPop { 0% { transform: scale(1); } 45% { transform: scale(1.35); } 100% { transform: scale(1); } }
        .wl-search-btn {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            background: rgba(239,68,68,.1);
            border: 1px solid rgba(239,68,68,.25);
            color: #fff;
            border-radius: 8px;
            width: 38px;
            height: 38px;
            text-decoration: none;
            font-size: .95rem;
            flex-shrink: 0;
            transition: background .15s ease, border-color .15s ease, transform .15s ease;
            position: relative;
        }
        .wl-search-btn:hover { background: rgba(239,68,68,.18); border-color: rgba(239,68,68,.4); color: #fff; transform: translateY(-1px); }
        .wl-search-btn:active { transform: translateY(0) scale(.94); }
        .card-info { padding: 10px 8px 6px; text-align: left; flex: 1; }
        .card-title { font-size: .85rem; font-weight: 700; color: var(--text); line-height: 1.3; margin-bottom: 10px; }
        .card-meta { font-size: .72rem; color: rgba(255,255,255,.55); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
        .wl-nav-dot {
            position: absolute;
            top: 4px; right: 4px;
            width: 6px; height: 6px;
            background: #4ade80;
            border-radius: 50%;
            display: none;
        }
        .search-bar { width: 100%; background-color: var(--panel) !important; color: var(--text); border: 1px solid #23262a; }
        .input-color{
            background-color: var(--panel) !important;
            border: 1px solid #23262a;
            color: var(--text);
        }
        .input-color {
            transition: border-color .15s ease, background-color .15s ease;
        }
        .input-color:focus {
            background-color: var(--panel) !important;
            border-color: var(--red);
            box-shadow: none;
            color: var(--text);
        }
        .input-color::placeholder{
            color: rgb(81, 81, 81);
        }
        .movie-card img { border-radius: 10px; width: 100%; }
        .movie-card {
            text-align: center; background: var(--card); border-radius: 10px; padding: 10px;
            position: relative; border: 2px solid transparent;
            transition: border-color .3s ease, box-shadow .3s ease, transform .35s cubic-bezier(.22,1,.36,1);
        }
        .movie-card:hover {
            transform: translateY(-6px);
            border-color: var(--red);
            box-shadow: 0 0 8px rgba(239,68,68,.5), 0 0 18px rgba(239,68,68,.25), 0 18px 32px rgba(0,0,0,.5);
        }
        .movie-card a { text-decoration: none; color: var(--text); }
        .movie-card .image-container { overflow: hidden; }
        .movie-card .lazy-image { transition: transform .5s cubic-bezier(.22,1,.36,1); backface-visibility: hidden; }
        .movie-card .lazy-image.loaded { transform: scale(1.03); }
        .movie-card:hover .lazy-image.loaded { transform: scale(1.08); }

        #movieCarousel { height: 500px; overflow: hidden; }
        #movieCarousel .carousel-item { position: relative; }
        #movieCarousel .carousel-item::before {
            content: '';
            position: absolute;
            inset: 0;
            background: linear-gradient(180deg, rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.2)),
                        linear-gradient(90deg, rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.2));
            z-index: 1;
        }
        #movieCarousel .carousel-item img {
            height: 500px;
            width: 100%;
            object-fit: cover;
        }
        #movieCarousel .carousel-caption {
            left: 50%;
            transform: translateX(-50%);
            z-index: 2;
        }

        ::-webkit-scrollbar { width: 8px; }
        ::-webkit-scrollbar-track { background: var(--card); }
        ::-webkit-scrollbar-thumb { background: #343a40; border-radius: 10px; }
        ::-webkit-scrollbar-thumb:hover { background: var(--red); }

        .footer {
            background-color: var(--panel);
            color: var(--text);
            border-top: 1px solid var(--border);
            padding: 22px 0;
            margin-top: 48px;
            text-align: center;
        }
        .footer p {
            margin: 0;
            font-size: .85rem;
            color: var(--muted);
        }

        .pagination {
            justify-content: center;
            gap: 8px;
        }
        .pagination .page-link {
            background-color: #343a40;
            border-color: #343a40;
            color: var(--text);
            margin-left: 0;
            border-radius: 6px;
            transition: background-color .15s ease, border-color .15s ease, transform .15s ease;
        }
        .pagination .page-link:hover {
            background-color: var(--red);
            border-color: var(--red);
            transform: translateY(-1px);
        }
        .pagination .page-link:active { transform: translateY(0) scale(.94); }
        .pagination .page-item.active .page-link {
            background-color: var(--red);
            border-color: var(--red);
        }

        .fa-telegram {
            color:#2C96CF;
        }

        /* ── Global search ── */
        .global-search-wrap {
            background: var(--bg);
            padding: 14px 0 0;
            position: relative;
            z-index: 1019;
        }
        .search-input-container { position: relative; flex: 1; }
        /* Hide the browser's own type="search" clear button — we render our
           own (.search-clear-btn), and both together showed two X icons. */
        input[type="search"]::-webkit-search-cancel-button,
        input[type="search"]::-webkit-search-decoration { -webkit-appearance: none; appearance: none; }
        input[type="search"]::-ms-clear { display: none; width: 0; height: 0; }
        .search-clear-btn {
            position: absolute; right: 8px; top: 50%; transform: translateY(-50%);
            background: none; border: none; color: var(--muted); cursor: pointer;
            padding: 4px; display: none; z-index: 10;
        }
        .search-clear-btn.show { display: block; }
        .search-dropdown {
            position: absolute;
            top: calc(100% + 8px); left: 0; right: 0;
            background: var(--panel);
            border: 1px solid #23262a;
            border-radius: 8px;
            max-height: 300px;
            overflow-y: auto;
            z-index: 1055;
            display: none;
            box-shadow: 0 8px 32px rgba(0,0,0,.6);
        }
        .search-dropdown {
            animation: dropdownIn .18s ease;
        }
        @keyframes dropdownIn {
            from { opacity: 0; transform: translateY(-4px); }
            to   { opacity: 1; transform: translateY(0); }
        }
        .search-dropdown-item {
            padding: 11px 16px;
            border-bottom: 1px solid #1e2228;
            cursor: pointer;
            transition: background .15s ease;
        }
        .search-dropdown-item:hover { background: var(--card); }
        .search-dropdown-item:last-child { border-bottom: none; }
        .search-dropdown-item-title { font-weight: 700; color: var(--text); font-size: .88rem; }
        .search-dropdown-item-year  { color: var(--muted); font-size: .78rem; margin-top: 2px; }

        /* ── Category bar ── */
        .global-cat-bar {
            padding: 12px 0 12px;
            background: var(--bg);
            position: relative;
            z-index: 10;
        }
        .catButton {
            background: #1c2026 !important;
            color: #ffffff !important;
            border: 2px solid #363c47 !important;
            border-radius: 20px !important;
            box-shadow: 0 2px 8px rgba(0,0,0,.35) !important;
            font-size: .82rem;
            font-weight: 600;
            padding: 6px 17px;
            cursor: pointer;
            transition: background .18s ease, border-color .18s ease, box-shadow .2s ease, transform .15s ease;
        }
        .catButton:hover {
            background: #262b33 !important;
            border-color: var(--red) !important;
            color: #ffffff !important;
            box-shadow: 0 0 8px rgba(239,68,68,.5), 0 0 18px rgba(239,68,68,.25), 0 4px 14px rgba(0,0,0,.35) !important;
            transform: translateY(-1px);
        }
        .catButton:active { transform: translateY(0) scale(.96); }
        .catButton.cat-active {
            background: var(--red) !important;
            border-color: var(--red) !important;
            color: #ffffff !important;
            box-shadow: 0 0 8px rgba(239,68,68,.5), 0 0 18px rgba(239,68,68,.25) !important;
        }
        /* On mobile, a wrapped multi-row flex layout of pills reads as
           ragged/uneven (different pill counts per row, centered so the
           short last row floats in the middle) — a fixed 3-column grid gives
           every pill the same width and keeps everything visible with no
           scrolling. The last item (Join Telegram) spans 2 columns to fill
           out the final row evenly, since 8 items over 3 columns leaves a
           lone item on the last row otherwise. */
        @media (max-width: 767px) {
            .cat-mobile-grid {
                display: grid !important;
                grid-template-columns: repeat(3, 1fr);
                gap: 6px;
            }
            .cat-mobile-grid .catButton {
                font-size: .72rem;
                font-weight: 700;
                padding: 8px 2px;
                border-radius: 9px !important;
                text-align: center;
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
            }
            .cat-mobile-grid .catButton:last-child { grid-column: span 2; }
        }
        .genre-pick {
            display: inline-block;
            background: var(--panel);
            border: 2px solid #2d3340;
            border-radius: 20px;
            color: #fff;
            font-size: .82rem;
            font-weight: 600;
            padding: 6px 15px;
            text-decoration: none;
            transition: background .18s ease, border-color .18s ease, color .18s ease, box-shadow .2s ease, transform .15s ease;
        }
        .genre-pick:hover {
            background: #23262a;
            border-color: var(--red);
            color: #fff;
            box-shadow: 0 0 8px rgba(239,68,68,.5), 0 0 18px rgba(239,68,68,.25);
            transform: translateY(-1px);
        }
        .genre-pick:active { transform: translateY(0) scale(.96); }
        .genre-pick.genre-pick-active {
            background: var(--red);
            border-color: var(--red);
            color: #fff;
            box-shadow: 0 0 8px rgba(239,68,68,.5), 0 0 18px rgba(239,68,68,.25);
        }

        .nav-home-btn {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            background: rgba(239,68,68,.1);
            border: 1px solid rgba(239,68,68,.25);
            color: #fff;
            border-radius: 8px;
            height: 38px;
            padding: 0 14px;
            text-decoration: none;
            font-size: .88rem;
            font-weight: 600;
            flex-shrink: 0;
            transition: background .15s ease, border-color .15s ease, transform .15s ease;
        }
        .nav-home-btn:hover { background: rgba(239,68,68,.18); border-color: rgba(239,68,68,.4); color: #fff; transform: translateY(-1px); }
        .nav-home-btn:active { transform: translateY(0) scale(.96); }
    


          .movie-type-badge {
            position: absolute;
            z-index: 2;
            top: 8px; right: 10px;
            font-size: 11px;
            line-height: 1;
            padding: 4px 8px;
            border-radius: 6px;
            font-weight: 800;
            color: #fff;
            border: 1px solid rgba(255,255,255,.08);
            text-transform: uppercase;
            box-shadow: 0 2px 8px rgba(0,0,0,.35);
            pointer-events: none;
        }
        .movie-badge-movie  { background: #e53935; }
        .movie-badge-series { background: #7b61ff; }
        .movie-card {
            position: relative;
            background: var(--card);
            border-radius: 10px;
            overflow: hidden;
            height: 100%;
            display: flex;
            flex-direction: column;
        }
        .movie-card > a {
            display: flex;
            flex-direction: column;
            flex: 1;
            text-decoration: none;
            color: inherit;
        }
        .image-container {
            position: relative;
            width: 100%;
            height: 0;
            padding-bottom: 130%;
            overflow: hidden;
            background-color: var(--bg);
        }
        .lazy-image {
            position: absolute;
            top: 0; left: 0;
            width: 100%; height: 100%;
            object-fit: contain;
            transition: all 0.3s ease;
            backface-visibility: hidden;
        }
        .lazy-image.loaded { object-fit: cover; }
        .custom_line {
            display: block;
            text-align: center;
            margin-top: 8px;
            font-size: 0.9rem;
            font-weight: bold;
            height: 2.7em;
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
        }
        .domain-banner {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 6px;
            background: linear-gradient(90deg, rgba(239,68,68,.16), rgba(239,68,68,.06));
            border: 1px solid rgba(239,68,68,.35);
            color: #fff;
            border-radius: 8px;
            padding: 10px 36px 10px 14px;
            margin-bottom: 12px;
            font-weight: 600;
            font-size: .95rem;
            text-decoration: none;
            position: relative;
            text-align: center;
            line-height: 1.4;
            transition: background .2s ease;
            animation: bannerIn .3s ease;
        }
        @keyframes bannerIn {
            from { opacity: 0; transform: translateY(-6px); }
            to   { opacity: 1; transform: translateY(0); }
        }
        .domain-banner:hover { background: linear-gradient(90deg, rgba(239,68,68,.24), rgba(239,68,68,.1)); color: #fff; }
        .domain-banner strong { color: #ff3131; }
        .domain-banner button {
            position: absolute;
            top: 50%; right: 8px;
            transform: translateY(-50%);
            background: none;
            border: none;
            color: rgba(255,255,255,.55);
            font-size: .78rem;
            cursor: pointer;
            padding: 4px;
            line-height: 1;
            transition: color .15s ease, transform .15s ease;
        }
        .domain-banner button:hover { color: #fff; transform: translateY(-50%) scale(1.15); }

        /* ── Independence Day banner (auto-shows Aug 14–16 every year) ── */
        .iday-banner {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 10px;
            background: linear-gradient(90deg, rgba(255,153,51,.14), rgba(255,255,255,.05), rgba(19,136,8,.16));
            border: 1px solid rgba(255,255,255,.12);
            border-top: 3px solid #FF9933;
            border-bottom: 3px solid #138808;
            border-radius: 10px;
            padding: 11px 36px 11px 14px;
            margin-bottom: 12px;
            color: #fff;
            font-weight: 600;
            font-size: .92rem;
            text-align: center;
            line-height: 1.4;
            position: relative;
            animation: bannerIn .3s ease;
        }
        .iday-chakra {
            display: inline-block;
            width: 16px; height: 16px;
            border: 2px solid #1a4fa0;
            border-radius: 50%;
            position: relative;
            flex-shrink: 0;
            animation: idaySpin 6s linear infinite;
        }
        .iday-chakra::before {
            content: '';
            position: absolute;
            inset: -2px;
            border-radius: 50%;
            background:
                repeating-conic-gradient(#1a4fa0 0deg 3deg, transparent 3deg 15deg);
        }
        @keyframes idaySpin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
        .iday-banner button {
            position: absolute;
            top: 50%; right: 8px;
            transform: translateY(-50%);
            background: none;
            border: none;
            color: rgba(255,255,255,.55);
            font-size: .78rem;
            cursor: pointer;
            padding: 4px;
            line-height: 1;
            transition: color .15s ease, transform .15s ease;
        }
        .iday-banner button:hover { color: #fff; transform: translateY(-50%) scale(1.15); }

        .iday-confetti-wrap {
            position: fixed;
            inset: 0;
            pointer-events: none;
            overflow: hidden;
            z-index: 1998;
        }
        .iday-confetti-piece {
            position: absolute;
            top: -20px;
            width: 8px;
            height: 14px;
            opacity: .9;
            animation-name: idayFall;
            animation-timing-function: linear;
            animation-fill-mode: forwards;
        }
        @keyframes idayFall {
            0%   { transform: translateY(0) rotate(0deg); opacity: .95; }
            100% { transform: translateY(110vh) rotate(540deg); opacity: .4; }
        }

        .section-heading {
            display: flex;
            align-items: center;
            gap: 12px;
            background: var(--card);
            border-radius: 8px;
            padding: 11px 18px;
            border-left: 4px solid var(--red);
            position: relative;
            overflow: hidden;
            margin-bottom: 12px;
        }
        .section-heading::before {
            content: '';
            position: absolute;
            inset: 0;
            width: 160px;
            background: linear-gradient(90deg, rgba(239,68,68,.1), transparent);
            pointer-events: none;
        }
        .section-heading-icon {
            font-size: 1.05rem;
            color: #f97316;
            position: relative;
        }
        .section-heading-text {
            font-size: 1.05rem;
            font-weight: 700;
            color: #fff;
            letter-spacing: .3px;
            position: relative;
        }
        .btn-danger {
            background-color: var(--red) !important;
            border-color: var(--red) !important;
        }
        .btn-danger:hover, .btn-danger:focus, .btn-danger:active {
            background-color: #c82333 !important;
            border-color: #bd2130 !important;
            box-shadow: none;
        }
        


      html, body {
            max-width: 100%;
            overflow-x: hidden;
        }
        html {
            overflow-y: scroll;
            scrollbar-gutter: stable;
        }
        body.modal-open {
            padding-right: 0 !important;
        }
        :root{
            --bg:#0b0c0e;
            --panel:#141619;
            --card:#1a1c1f;
            --text:#f1f2f4;
            --muted:#98a0aa;
            --accent:#22c55e;
            --red:#ef4444;
            --ring:#2a2f35;
            --border:rgba(255,255,255,.08);
            --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
        }
        html, body {
            font-family: var(--font-sans);
        }
        body {
            background-color: var(--bg);
            color: var(--text);
            font-feature-settings: "cv11", "ss01";
            -webkit-font-smoothing: antialiased;
        }
        h1, h2, h3, h4, h5, h6, .navbar-brand, button, input, select, textarea {
            font-family: var(--font-sans);
        }
        .navbar {
            background-color: var(--panel) !important;
            border-bottom: 1px solid var(--border);
            transition: box-shadow .2s, background-color .2s;
        }
        .navbar.scrolled { box-shadow: 0 6px 24px rgba(0,0,0,.4); }
        .wl-btn {
            position: absolute;
            top: 8px; left: 8px;
            z-index: 3;
            background: rgba(0,0,0,.55);
            border: none;
            border-radius: 50%;
            width: 28px; height: 28px;
            display: flex; align-items: center; justify-content: center;
            color: #9aa0a6;
            cursor: pointer;
            font-size: .74rem;
            transition: color .15s ease, background .15s ease, transform .15s ease;
            padding: 0;
        }
        .wl-btn:hover { background: rgba(0,0,0,.85); color: #fff; transform: scale(1.12); }
        .wl-btn:active { transform: scale(.88); }
        .wl-btn.wl-saved { color: #ef4444; animation: wlPop .35s ease; }
        @keyframes wlPop { 0% { transform: scale(1); } 45% { transform: scale(1.35); } 100% { transform: scale(1); } }
        .wl-search-btn {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            background: rgba(239,68,68,.1);
            border: 1px solid rgba(239,68,68,.25);
            color: #fff;
            border-radius: 8px;
            width: 38px;
            height: 38px;
            text-decoration: none;
            font-size: .95rem;
            flex-shrink: 0;
            transition: background .15s ease, border-color .15s ease, transform .15s ease;
            position: relative;
        }
        .wl-search-btn:hover { background: rgba(239,68,68,.18); border-color: rgba(239,68,68,.4); color: #fff; transform: translateY(-1px); }
        .wl-search-btn:active { transform: translateY(0) scale(.94); }
        .card-info { padding: 10px 8px 6px; text-align: left; flex: 1; }
        .card-title { font-size: .85rem; font-weight: 700; color: var(--text); line-height: 1.3; margin-bottom: 10px; }
        .card-meta { font-size: .72rem; color: rgba(255,255,255,.55); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
        .wl-nav-dot {
            position: absolute;
            top: 4px; right: 4px;
            width: 6px; height: 6px;
            background: #4ade80;
            border-radius: 50%;
            display: none;
        }
        .search-bar { width: 100%; background-color: var(--panel) !important; color: var(--text); border: 1px solid #23262a; }
        .input-color{
            background-color: var(--panel) !important;
            border: 1px solid #23262a;
            color: var(--text);
        }
        .input-color {
            transition: border-color .15s ease, background-color .15s ease;
        }
        .input-color:focus {
            background-color: var(--panel) !important;
            border-color: var(--red);
            box-shadow: none;
            color: var(--text);
        }
        .input-color::placeholder{
            color: rgb(81, 81, 81);
        }
        .movie-card img { border-radius: 10px; width: 100%; }
        .movie-card {
            text-align: center; background: var(--card); border-radius: 10px; padding: 10px;
            position: relative; border: 2px solid transparent;
            transition: border-color .3s ease, box-shadow .3s ease, transform .35s cubic-bezier(.22,1,.36,1);
        }
        .movie-card:hover {
            transform: translateY(-6px);
            border-color: var(--red);
            box-shadow: 0 0 8px rgba(239,68,68,.5), 0 0 18px rgba(239,68,68,.25), 0 18px 32px rgba(0,0,0,.5);
        }
        .movie-card a { text-decoration: none; color: var(--text); }
        .movie-card .image-container { overflow: hidden; }
        .movie-card .lazy-image { transition: transform .5s cubic-bezier(.22,1,.36,1); backface-visibility: hidden; }
        .movie-card .lazy-image.loaded { transform: scale(1.03); }
        .movie-card:hover .lazy-image.loaded { transform: scale(1.08); }

        #movieCarousel { height: 500px; overflow: hidden; }
        #movieCarousel .carousel-item { position: relative; }
        #movieCarousel .carousel-item::before {
            content: '';
            position: absolute;
            inset: 0;
            background: linear-gradient(180deg, rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.2)),
                        linear-gradient(90deg, rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.2));
            z-index: 1;
        }
        #movieCarousel .carousel-item img {
            height: 500px;
            width: 100%;
            object-fit: cover;
        }
        #movieCarousel .carousel-caption {
            left: 50%;
            transform: translateX(-50%);
            z-index: 2;
        }

        ::-webkit-scrollbar { width: 8px; }
        ::-webkit-scrollbar-track { background: var(--card); }
        ::-webkit-scrollbar-thumb { background: #343a40; border-radius: 10px; }
        ::-webkit-scrollbar-thumb:hover { background: var(--red); }

        .footer {
            background-color: var(--panel);
            color: var(--text);
            border-top: 1px solid var(--border);
            padding: 22px 0;
            margin-top: 48px;
            text-align: center;
        }
        .footer p {
            margin: 0;
            font-size: .85rem;
            color: var(--muted);
        }

        .pagination {
            justify-content: center;
            gap: 8px;
        }
        .pagination .page-link {
            background-color: #343a40;
            border-color: #343a40;
            color: var(--text);
            margin-left: 0;
            border-radius: 6px;
            transition: background-color .15s ease, border-color .15s ease, transform .15s ease;
        }
        .pagination .page-link:hover {
            background-color: var(--red);
            border-color: var(--red);
            transform: translateY(-1px);
        }
        .pagination .page-link:active { transform: translateY(0) scale(.94); }
        .pagination .page-item.active .page-link {
            background-color: var(--red);
            border-color: var(--red);
        }

        .fa-telegram {
            color:#2C96CF;
        }

        /* ── Global search ── */
        .global-search-wrap {
            background: var(--bg);
            padding: 14px 0 0;
            position: relative;
            z-index: 1019;
        }
        .search-input-container { position: relative; flex: 1; }
        /* Hide the browser's own type="search" clear button — we render our
           own (.search-clear-btn), and both together showed two X icons. */
        input[type="search"]::-webkit-search-cancel-button,
        input[type="search"]::-webkit-search-decoration { -webkit-appearance: none; appearance: none; }
        input[type="search"]::-ms-clear { display: none; width: 0; height: 0; }
        .search-clear-btn {
            position: absolute; right: 8px; top: 50%; transform: translateY(-50%);
            background: none; border: none; color: var(--muted); cursor: pointer;
            padding: 4px; display: none; z-index: 10;
        }
        .search-clear-btn.show { display: block; }
        .search-dropdown {
            position: absolute;
            top: calc(100% + 8px); left: 0; right: 0;
            background: var(--panel);
            border: 1px solid #23262a;
            border-radius: 8px;
            max-height: 300px;
            overflow-y: auto;
            z-index: 1055;
            display: none;
            box-shadow: 0 8px 32px rgba(0,0,0,.6);
        }
        .search-dropdown {
            animation: dropdownIn .18s ease;
        }
        @keyframes dropdownIn {
            from { opacity: 0; transform: translateY(-4px); }
            to   { opacity: 1; transform: translateY(0); }
        }
        .search-dropdown-item {
            padding: 11px 16px;
            border-bottom: 1px solid #1e2228;
            cursor: pointer;
            transition: background .15s ease;
        }
        .search-dropdown-item:hover { background: var(--card); }
        .search-dropdown-item:last-child { border-bottom: none; }
        .search-dropdown-item-title { font-weight: 700; color: var(--text); font-size: .88rem; }
        .search-dropdown-item-year  { color: var(--muted); font-size: .78rem; margin-top: 2px; }

        /* ── Category bar ── */
        .global-cat-bar {
            padding: 12px 0 12px;
            background: var(--bg);
            position: relative;
            z-index: 10;
        }
        .catButton {
            background: #1c2026 !important;
            color: #ffffff !important;
            border: 2px solid #363c47 !important;
            border-radius: 20px !important;
            box-shadow: 0 2px 8px rgba(0,0,0,.35) !important;
            font-size: .82rem;
            font-weight: 600;
            padding: 6px 17px;
            cursor: pointer;
            transition: background .18s ease, border-color .18s ease, box-shadow .2s ease, transform .15s ease;
        }
        .catButton:hover {
            background: #262b33 !important;
            border-color: var(--red) !important;
            color: #ffffff !important;
            box-shadow: 0 0 8px rgba(239,68,68,.5), 0 0 18px rgba(239,68,68,.25), 0 4px 14px rgba(0,0,0,.35) !important;
            transform: translateY(-1px);
        }
        .catButton:active { transform: translateY(0) scale(.96); }
        .catButton.cat-active {
            background: var(--red) !important;
            border-color: var(--red) !important;
            color: #ffffff !important;
            box-shadow: 0 0 8px rgba(239,68,68,.5), 0 0 18px rgba(239,68,68,.25) !important;
        }
        /* On mobile, a wrapped multi-row flex layout of pills reads as
           ragged/uneven (different pill counts per row, centered so the
           short last row floats in the middle) — a fixed 3-column grid gives
           every pill the same width and keeps everything visible with no
           scrolling. The last item (Join Telegram) spans 2 columns to fill
           out the final row evenly, since 8 items over 3 columns leaves a
           lone item on the last row otherwise. */
        @media (max-width: 767px) {
            .cat-mobile-grid {
                display: grid !important;
                grid-template-columns: repeat(3, 1fr);
                gap: 6px;
            }
            .cat-mobile-grid .catButton {
                font-size: .72rem;
                font-weight: 700;
                padding: 8px 2px;
                border-radius: 9px !important;
                text-align: center;
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
            }
            .cat-mobile-grid .catButton:last-child { grid-column: span 2; }
        }
        .genre-pick {
            display: inline-block;
            background: var(--panel);
            border: 2px solid #2d3340;
            border-radius: 20px;
            color: #fff;
            font-size: .82rem;
            font-weight: 600;
            padding: 6px 15px;
            text-decoration: none;
            transition: background .18s ease, border-color .18s ease, color .18s ease, box-shadow .2s ease, transform .15s ease;
        }
        .genre-pick:hover {
            background: #23262a;
            border-color: var(--red);
            color: #fff;
            box-shadow: 0 0 8px rgba(239,68,68,.5), 0 0 18px rgba(239,68,68,.25);
            transform: translateY(-1px);
        }
        .genre-pick:active { transform: translateY(0) scale(.96); }
        .genre-pick.genre-pick-active {
            background: var(--red);
            border-color: var(--red);
            color: #fff;
            box-shadow: 0 0 8px rgba(239,68,68,.5), 0 0 18px rgba(239,68,68,.25);
        }

        .nav-home-btn {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            background: rgba(239,68,68,.1);
            border: 1px solid rgba(239,68,68,.25);
            color: #fff;
            border-radius: 8px;
            height: 38px;
            padding: 0 14px;
            text-decoration: none;
            font-size: .88rem;
            font-weight: 600;
            flex-shrink: 0;
            transition: background .15s ease, border-color .15s ease, transform .15s ease;
        }
        .nav-home-btn:hover { background: rgba(239,68,68,.18); border-color: rgba(239,68,68,.4); color: #fff; transform: translateY(-1px); }
        .nav-home-btn:active { transform: translateY(0) scale(.96); }
    


        /* ── Hero Backdrop ── */
.hero-backdrop {
    width: 100%;
    height: 480px;
    min-height: 480px;
    background-color: #101216;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center 25%;
    position: relative;
    flex-shrink: 0;
    overflow: hidden;
    margin-top: -65px;
}
.hero-poster-bg {
    position: absolute;
    inset: -30px;          /* extra bleed so blur edge is outside the container */
    width: calc(100% + 60px);
    height: calc(100% + 60px);
    object-fit: cover;
    object-position: center center;
    filter: blur(28px);
    display: none;
}
.hero-overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
    background:
        linear-gradient(to bottom,
            rgba(11,12,14,.2) 0%,
            rgba(11,12,14,.05) 20%,
            transparent 35%,
            rgba(11,12,14,.6) 72%,
            var(--bg) 100%
        ),
        linear-gradient(to right, rgba(11,12,14,.5) 0%, transparent 30%, transparent 70%, rgba(11,12,14,.5) 100%);
}

/* ── Fade from cat-bar into hero (video page only) ── */
.global-cat-bar::after {
    content: '';
    position: absolute;
    left: 0; right: 0;
    bottom: -60px;
    height: 60px;
    background: linear-gradient(to bottom, var(--bg), transparent);
    z-index: 10;
    pointer-events: none;
}

/* ── Main content overlapping hero ── */
.movie-main {
    margin-top: -220px;
    position: relative;
    z-index: 2;
}

/* ── Poster ── */
.movie-poster {
    width: 260px;
    min-width: 240px;
    border-radius: 14px;
    box-shadow: 0 24px 64px rgba(0,0,0,.85), 0 4px 16px rgba(0,0,0,.5);
    display: block;
}

/* ── Movie info ── */
.movie-info { padding-top: 210px; }
.movie-title-text {
    font-size: 1.65rem;
    font-weight: 800;
    line-height: 1.25;
    color: #fff;
    text-shadow: 0 2px 12px rgba(0,0,0,.5);
}

/* ── Meta pills ── */
.meta-pills { display: flex; flex-wrap: wrap; gap: 7px; margin: 12px 0 14px; }
.meta-pill {
    border: 1px solid rgba(255,255,255,.12);
    border-radius: 6px;
    padding: 4px 11px;
    font-size: .77rem;
    font-weight: 600;
    color: var(--muted);
    background: rgba(255,255,255,.05);
    white-space: normal;
    word-break: break-word;
    max-width: 100%;
    display: inline-flex;
    align-items: center;
    gap: 5px;
}
.meta-pill.hot  { background: rgba(239,68,68,.15);   border-color: rgba(239,68,68,.35);   color: #fca5a5; }
.meta-pill.lang { background: rgba(245,158,11,.15);  border-color: rgba(245,158,11,.4);   color: #fcd34d; white-space: normal; word-break: break-word; max-width: 220px; }
.meta-pill.q-4k,
.meta-pill.q-1080,
.meta-pill.q-720,
.meta-pill.q-480  { background: rgba(29,78,216,.2);  border-color: rgba(29,78,216,.5);    color: #93c5fd; }
/* make the dynamic pill container invisible so its children join the flex row with correct gaps */
#metaQualPills { display: contents; }

/* ── Genre pills ── */
.genre-pill {
    padding: 3px 12px;
    border-radius: 20px;
    border: 1px solid #2d3340;
    font-size: .74rem;
    color: var(--muted);
    white-space: nowrap;
    display: inline-block;
    margin: 2px 3px 2px 0;
}

/* ── Overview ── */
.overview-text {
    font-size: .9rem;
    line-height: 1.72;
    color: #8a9199;
    margin-top: 14px;
    max-width: 660px;
}

/* ── Download section wrapper ── */
.dl-wrap {
    margin-top: 40px;
    background: var(--panel);
    border: 1px solid #1d2129;
    border-radius: 16px;
    overflow: hidden;
}
.dl-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 22px;
    border-bottom: 1px solid #1d2129;
}
.dl-header-left { display: flex; align-items: center; gap: 10px; }
.dl-header-icon {
    width: 34px; height: 34px;
    background: rgba(239,68,68,.15);
    border-radius: 8px;
    display: flex; align-items: center; justify-content: center;
    color: var(--red);
    font-size: .9rem;
}
.dl-header-title {
    font-size: .95rem;
    font-weight: 700;
    color: var(--text);
}
.dl-header-sub {
    font-size: .75rem;
    color: var(--muted);
    margin-top: 1px;
}
.dl-count-badge {
    font-size: .72rem;
    font-weight: 700;
    padding: 3px 10px;
    border-radius: 20px;
    background: rgba(255,255,255,.06);
    border: 1px solid #2a2f38;
    color: var(--muted);
    white-space: nowrap;
    flex-shrink: 0;
}

/* ── Share button + modal ── */
.share-row {
    margin: 12px 0;
}
.share-trigger-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: var(--panel);
    border: 1px solid #2a2f38;
    color: var(--text);
    font-size: .72rem;
    font-weight: 600;
    padding: 5px 12px;
    border-radius: 16px;
    transition: background .15s, border-color .15s;
}
.share-trigger-btn:hover { background: #20242a; border-color: #343a44; color: var(--text); }
.share-trigger-btn i { color: var(--red); }

.share-modal-content {
    background: var(--card);
    color: var(--text);
    border: 1px solid #2a2f38;
    border-radius: 14px;
}
.share-modal-content .modal-title { font-weight: 700; font-size: .95rem; }
.share-options-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
}
.share-option {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    background: none;
    border: none;
    color: var(--text);
    font-size: .74rem;
    padding: 6px 2px;
    text-decoration: none;
}
.share-option:hover { color: var(--text); opacity: .85; }
.share-icon-circle {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 1.25rem;
}
.share-ic-tg { background: #2C96CF; }
.share-ic-tg .fa-telegram { color: #fff; }
.share-ic-wa { background: #25d366; }
.share-ic-ig { background: radial-gradient(circle at 30% 110%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285AEB 90%); }
.share-ic-cp { background: #5f6470; }
.share-toast {
    display: none;
    margin-top: 14px;
    text-align: center;
    font-size: .78rem;
    color: var(--accent);
}

/* ── My List button ── */
.wl-page-wrap {
    position: relative;
    display: inline-flex;
    align-items: center;
}
.wl-page-btn {
    width: 30px; height: 30px;
    border-radius: 50%;
    background: none;
    border: 1.5px solid rgba(255,255,255,.4);
    color: #fff;
    font-size: .8rem;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer;
    transition: border-color .15s, background .15s, color .15s;
    padding: 0;
}
.wl-page-btn:hover { border-color: #fff; background: rgba(255,255,255,.08); }
.wl-page-btn.wl-saved { border-color: var(--red); color: var(--red); }
.wl-page-tooltip {
    position: absolute;
    bottom: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%);
    background: #fff;
    color: #000;
    font-size: .75rem;
    font-weight: 700;
    padding: 5px 10px;
    border-radius: 5px;
    white-space: nowrap;
    pointer-events: none;
    opacity: 0;
    transition: opacity .15s;
}
.wl-page-tooltip::after {
    content: '';
    position: absolute;
    top: 100%; left: 50%;
    transform: translateX(-50%);
    border: 5px solid transparent;
    border-top-color: #fff;
}
.wl-page-wrap:hover .wl-page-tooltip { opacity: 1; }

/* ── Download rows ── */
.dl-rows { padding: 4px 0; }
.dl-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 18px 10px 15px;
    border-bottom: 1px solid rgba(255,255,255,.04);
    border-left: 3px solid transparent;
    transition: background .15s ease, border-left-color .15s ease;
    text-decoration: none;
}
.dl-row:last-child { border-bottom: none; }
.dl-row:hover { background: rgba(255,255,255,.04); border-left-color: var(--red); }

/* Quality badge */
.dl-q {
    font-size: .7rem;
    font-weight: 900;
    letter-spacing: .6px;
    text-transform: uppercase;
    padding: 4px 9px;
    border-radius: 6px;
    color: #fff;
    flex-shrink: 0;
    min-width: 46px;
    text-align: center;
}
.dl-q-4k    { background: #6d28d9; }
.dl-q-1080  { background: #1d4ed8; }
.dl-q-720   { background: #059669; }
.dl-q-480   { background: #b45309; }
.dl-q-other { background: #374151; }

/* Row content */
.dl-row-info { flex: 1; min-width: 0; }
.dl-row-name {
    font-size: .8rem;
    font-weight: 600;
    color: var(--text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.dl-row-meta {
    font-size: .75rem;
    color: var(--muted);
    margin-top: 2px;
    display: flex;
    align-items: center;
    gap: 8px;
}

/* Size chip */
.dl-size-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: .75rem;
    color: var(--muted);
    white-space: nowrap;
    flex-shrink: 0;
}

/* Download button */
.dl-btn {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 9px 18px;
    background: var(--red);
    color: #fff;
    border-radius: 8px;
    font-size: .82rem;
    font-weight: 700;
    white-space: nowrap;
    flex-shrink: 0;
    text-decoration: none;
    transition: background .15s, transform .15s, box-shadow .15s;
}
.dl-btn:hover {
    background: #dc2626;
    color: #fff;
    transform: translateY(-1px);
    box-shadow: 0 0 8px rgba(239,68,68,.55), 0 0 18px rgba(239,68,68,.25), 0 4px 12px rgba(0,0,0,.3);
}

/* Inline Telegram file button */
.dl-file-btn {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 7px 14px;
    background: rgba(44,150,207,.1); border: 1px solid rgba(44,150,207,.3);
    border-radius: 8px; color: #2C96CF;
    font-size: .82rem; font-weight: 700;
    white-space: nowrap; flex-shrink: 0; text-decoration: none;
    transition: all .2s;
}
.dl-file-btn:hover {
    background: rgba(44,150,207,.2);
    border-color: rgba(44,150,207,.6);
    color: #2C96CF;
    box-shadow: 0 0 8px rgba(44,150,207,.4), 0 0 18px rgba(44,150,207,.2);
}

/* ── Section labels ── */
.section-label {
    font-size: .7rem;
    font-weight: 800;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--muted);
    margin-bottom: 16px;
    display: block;
}
.section-label-center {
    display: flex;
    align-items: center;
    gap: 12px;
    justify-content: center;
    font-size: .72rem;
    font-weight: 800;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--muted);
    margin-bottom: 16px;
}
.section-label-center::before,
.section-label-center::after {
    content: '';
    flex: 1;
    height: 1px;
    background: linear-gradient(to right, transparent, #2d3340);
}
.section-label-center::after {
    background: linear-gradient(to left, transparent, #2d3340);
}

/* ── Screenshots ── */
.carousel-thumb {
    width: 80px; height: 52px;
    object-fit: cover;
    border-radius: 6px;
    cursor: pointer;
    border: 2px solid transparent;
    transition: border-color .15s;
}
.carousel-thumb:hover { border-color: rgba(239,68,68,.5); }

/* ── Rec / "You May Also Like" — same card style as home ── */
.movie-card {
    position: relative;
    background: var(--card);
    border-radius: 10px;
    overflow: hidden;
    height: 100%;
    display: flex;
    flex-direction: column;
}
.movie-card > a {
    display: flex;
    flex-direction: column;
    flex: 1;
    text-decoration: none;
    color: inherit;
}
.image-container {
    position: relative;
    width: 100%;
    height: 0;
    padding-bottom: 130%;
    overflow: hidden;
    background-color: var(--bg);
}
.lazy-image {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    object-fit: contain;
    transition: all 0.3s ease;
    backface-visibility: hidden;
}
.lazy-image.loaded { object-fit: cover; }
.custom_line {
    display: block;
    text-align: center;
    margin-top: 8px;
    font-size: 0.9rem;
    font-weight: bold;
    height: 2.7em;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}
.movie-type-badge {
    position: absolute;
    z-index: 2;
    top: 8px; right: 10px;
    font-size: 11px; line-height: 1;
    padding: 4px 8px; border-radius: 6px;
    font-weight: 800; color: #fff;
    border: 1px solid rgba(255,255,255,.08);
    text-transform: uppercase;
    box-shadow: 0 2px 8px rgba(0,0,0,.35);
    pointer-events: none;
}
.movie-badge-movie  { background: #e53935; }
.movie-badge-series { background: #7b61ff; }

/* ── Episode collapse ── */
.ep-toggle-wrap { padding: 10px 16px; border-bottom: 1px solid rgba(255,255,255,.04); }
.ep-toggle-btn {
    display: flex; align-items: center; gap: 10px;
    background: none; border: 1px solid #2d3340; border-radius: 8px;
    padding: 10px 16px; color: var(--text); cursor: pointer;
    font-size: .88rem; font-weight: 700; width: 100%;
    transition: border-color .15s, background .15s;
}
.ep-toggle-btn:hover { border-color: var(--red); background: rgba(239,68,68,.06); }
.ep-badge {
    margin-left: auto; font-size: .72rem;
    padding: 2px 9px; border-radius: 20px;
    background: rgba(255,255,255,.06); border: 1px solid #2a2f38; color: var(--muted);
}
.ep-collapse { display: none; }
.ep-collapse.open { display: block; }
.ep-sep { height: 1px; background: rgba(255,255,255,.06); margin: 4px 0; }

/* ── Responsive ── */
@media (max-width: 767px) {
    .hero-backdrop { height: 300px; min-height: 300px; background-position: center 20%; }
    .movie-main { margin-top: -100px; }
    .movie-poster { width: 160px; min-width: 150px; }
    .movie-info { padding-top: 0; }
    .movie-title-text { font-size: 1.3rem; }
    .dl-header { padding: 13px 16px; }
    .dl-row { padding: 12px 16px; gap: 10px; }
    .dl-bot-row { padding-left: 70px; }
    .dl-btn { padding: 8px 14px; font-size: .78rem; }
}
@media (max-width: 480px) {
    .dl-btn { padding: 8px 12px; }
}
      


      html, body {
            max-width: 100%;
            overflow-x: hidden;
        }
        html {
            overflow-y: scroll;
            scrollbar-gutter: stable;
        }
        body.modal-open {
            padding-right: 0 !important;
        }
        :root{
            --bg:#0b0c0e;
            --panel:#141619;
            --card:#1a1c1f;
            --text:#f1f2f4;
            --muted:#98a0aa;
            --accent:#22c55e;
            --red:#ef4444;
            --ring:#2a2f35;
            --border:rgba(255,255,255,.08);
            --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
        }
        html, body {
            font-family: var(--font-sans);
        }
        body {
            background-color: var(--bg);
            color: var(--text);
            font-feature-settings: "cv11", "ss01";
            -webkit-font-smoothing: antialiased;
        }
        h1, h2, h3, h4, h5, h6, .navbar-brand, button, input, select, textarea {
            font-family: var(--font-sans);
        }
        .navbar {
            background-color: var(--panel) !important;
            border-bottom: 1px solid var(--border);
            transition: box-shadow .2s, background-color .2s;
        }
        .navbar.scrolled { box-shadow: 0 6px 24px rgba(0,0,0,.4); }
        .wl-btn {
            position: absolute;
            top: 8px; left: 8px;
            z-index: 3;
            background: rgba(0,0,0,.55);
            border: none;
            border-radius: 50%;
            width: 28px; height: 28px;
            display: flex; align-items: center; justify-content: center;
            color: #9aa0a6;
            cursor: pointer;
            font-size: .74rem;
            transition: color .15s ease, background .15s ease, transform .15s ease;
            padding: 0;
        }
        .wl-btn:hover { background: rgba(0,0,0,.85); color: #fff; transform: scale(1.12); }
        .wl-btn:active { transform: scale(.88); }
        .wl-btn.wl-saved { color: #ef4444; animation: wlPop .35s ease; }
        @keyframes wlPop { 0% { transform: scale(1); } 45% { transform: scale(1.35); } 100% { transform: scale(1); } }
        .wl-search-btn {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            background: rgba(239,68,68,.1);
            border: 1px solid rgba(239,68,68,.25);
            color: #fff;
            border-radius: 8px;
            width: 38px;
            height: 38px;
            text-decoration: none;
            font-size: .95rem;
            flex-shrink: 0;
            transition: background .15s ease, border-color .15s ease, transform .15s ease;
            position: relative;
        }
        .wl-search-btn:hover { background: rgba(239,68,68,.18); border-color: rgba(239,68,68,.4); color: #fff; transform: translateY(-1px); }
        .wl-search-btn:active { transform: translateY(0) scale(.94); }
        .card-info { padding: 10px 8px 6px; text-align: left; flex: 1; }
        .card-title { font-size: .85rem; font-weight: 700; color: var(--text); line-height: 1.3; margin-bottom: 10px; }
        .card-meta { font-size: .72rem; color: rgba(255,255,255,.55); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
        .wl-nav-dot {
            position: absolute;
            top: 4px; right: 4px;
            width: 6px; height: 6px;
            background: #4ade80;
            border-radius: 50%;
            display: none;
        }
        .search-bar { width: 100%; background-color: var(--panel) !important; color: var(--text); border: 1px solid #23262a; }
        .input-color{
            background-color: var(--panel) !important;
            border: 1px solid #23262a;
            color: var(--text);
        }
        .input-color {
            transition: border-color .15s ease, background-color .15s ease;
        }
        .input-color:focus {
            background-color: var(--panel) !important;
            border-color: var(--red);
            box-shadow: none;
            color: var(--text);
        }
        .input-color::placeholder{
            color: rgb(81, 81, 81);
        }
        .movie-card img { border-radius: 10px; width: 100%; }
        .movie-card {
            text-align: center; background: var(--card); border-radius: 10px; padding: 10px;
            position: relative; border: 2px solid transparent;
            transition: border-color .3s ease, box-shadow .3s ease, transform .35s cubic-bezier(.22,1,.36,1);
        }
        .movie-card:hover {
            transform: translateY(-6px);
            border-color: var(--red);
            box-shadow: 0 0 8px rgba(239,68,68,.5), 0 0 18px rgba(239,68,68,.25), 0 18px 32px rgba(0,0,0,.5);
        }
        .movie-card a { text-decoration: none; color: var(--text); }
        .movie-card .image-container { overflow: hidden; }
        .movie-card .lazy-image { transition: transform .5s cubic-bezier(.22,1,.36,1); backface-visibility: hidden; }
        .movie-card .lazy-image.loaded { transform: scale(1.03); }
        .movie-card:hover .lazy-image.loaded { transform: scale(1.08); }

        #movieCarousel { height: 500px; overflow: hidden; }
        #movieCarousel .carousel-item { position: relative; }
        #movieCarousel .carousel-item::before {
            content: '';
            position: absolute;
            inset: 0;
            background: linear-gradient(180deg, rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.2)),
                        linear-gradient(90deg, rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.2));
            z-index: 1;
        }
        #movieCarousel .carousel-item img {
            height: 500px;
            width: 100%;
            object-fit: cover;
        }
        #movieCarousel .carousel-caption {
            left: 50%;
            transform: translateX(-50%);
            z-index: 2;
        }

        ::-webkit-scrollbar { width: 8px; }
        ::-webkit-scrollbar-track { background: var(--card); }
        ::-webkit-scrollbar-thumb { background: #343a40; border-radius: 10px; }
        ::-webkit-scrollbar-thumb:hover { background: var(--red); }

        .footer {
            background-color: var(--panel);
            color: var(--text);
            border-top: 1px solid var(--border);
            padding: 22px 0;
            margin-top: 48px;
            text-align: center;
        }
        .footer p {
            margin: 0;
            font-size: .85rem;
            color: var(--muted);
        }

        .pagination {
            justify-content: center;
            gap: 8px;
        }
        .pagination .page-link {
            background-color: #343a40;
            border-color: #343a40;
            color: var(--text);
            margin-left: 0;
            border-radius: 6px;
            transition: background-color .15s ease, border-color .15s ease, transform .15s ease;
        }
        .pagination .page-link:hover {
            background-color: var(--red);
            border-color: var(--red);
            transform: translateY(-1px);
        }
        .pagination .page-link:active { transform: translateY(0) scale(.94); }
        .pagination .page-item.active .page-link {
            background-color: var(--red);
            border-color: var(--red);
        }

        .fa-telegram {
            color:#2C96CF;
        }

        /* ── Global search ── */
        .global-search-wrap {
            background: var(--bg);
            padding: 14px 0 0;
            position: relative;
            z-index: 1019;
        }
        .search-input-container { position: relative; flex: 1; }
        /* Hide the browser's own type="search" clear button — we render our
           own (.search-clear-btn), and both together showed two X icons. */
        input[type="search"]::-webkit-search-cancel-button,
        input[type="search"]::-webkit-search-decoration { -webkit-appearance: none; appearance: none; }
        input[type="search"]::-ms-clear { display: none; width: 0; height: 0; }
        .search-clear-btn {
            position: absolute; right: 8px; top: 50%; transform: translateY(-50%);
            background: none; border: none; color: var(--muted); cursor: pointer;
            padding: 4px; display: none; z-index: 10;
        }
        .search-clear-btn.show { display: block; }
        .search-dropdown {
            position: absolute;
            top: calc(100% + 8px); left: 0; right: 0;
            background: var(--panel);
            border: 1px solid #23262a;
            border-radius: 8px;
            max-height: 300px;
            overflow-y: auto;
            z-index: 1055;
            display: none;
            box-shadow: 0 8px 32px rgba(0,0,0,.6);
        }
        .search-dropdown {
            animation: dropdownIn .18s ease;
        }
        @keyframes dropdownIn {
            from { opacity: 0; transform: translateY(-4px); }
            to   { opacity: 1; transform: translateY(0); }
        }
        .search-dropdown-item {
            padding: 11px 16px;
            border-bottom: 1px solid #1e2228;
            cursor: pointer;
            transition: background .15s ease;
        }
        .search-dropdown-item:hover { background: var(--card); }
        .search-dropdown-item:last-child { border-bottom: none; }
        .search-dropdown-item-title { font-weight: 700; color: var(--text); font-size: .88rem; }
        .search-dropdown-item-year  { color: var(--muted); font-size: .78rem; margin-top: 2px; }

        /* ── Category bar ── */
        .global-cat-bar {
            padding: 12px 0 12px;
            background: var(--bg);
            position: relative;
            z-index: 10;
        }
        .catButton {
            background: #1c2026 !important;
            color: #ffffff !important;
            border: 2px solid #363c47 !important;
            border-radius: 20px !important;
            box-shadow: 0 2px 8px rgba(0,0,0,.35) !important;
            font-size: .82rem;
            font-weight: 600;
            padding: 6px 17px;
            cursor: pointer;
            transition: background .18s ease, border-color .18s ease, box-shadow .2s ease, transform .15s ease;
        }
        .catButton:hover {
            background: #262b33 !important;
            border-color: var(--red) !important;
            color: #ffffff !important;
            box-shadow: 0 0 8px rgba(239,68,68,.5), 0 0 18px rgba(239,68,68,.25), 0 4px 14px rgba(0,0,0,.35) !important;
            transform: translateY(-1px);
        }
        .catButton:active { transform: translateY(0) scale(.96); }
        .catButton.cat-active {
            background: var(--red) !important;
            border-color: var(--red) !important;
            color: #ffffff !important;
            box-shadow: 0 0 8px rgba(239,68,68,.5), 0 0 18px rgba(239,68,68,.25) !important;
        }
        /* On mobile, a wrapped multi-row flex layout of pills reads as
           ragged/uneven (different pill counts per row, centered so the
           short last row floats in the middle) — a fixed 3-column grid gives
           every pill the same width and keeps everything visible with no
           scrolling. The last item (Join Telegram) spans 2 columns to fill
           out the final row evenly, since 8 items over 3 columns leaves a
           lone item on the last row otherwise. */
        @media (max-width: 767px) {
            .cat-mobile-grid {
                display: grid !important;
                grid-template-columns: repeat(3, 1fr);
                gap: 6px;
            }
            .cat-mobile-grid .catButton {
                font-size: .72rem;
                font-weight: 700;
                padding: 8px 2px;
                border-radius: 9px !important;
                text-align: center;
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
            }
            .cat-mobile-grid .catButton:last-child { grid-column: span 2; }
        }
        .genre-pick {
            display: inline-block;
            background: var(--panel);
            border: 2px solid #2d3340;
            border-radius: 20px;
            color: #fff;
            font-size: .82rem;
            font-weight: 600;
            padding: 6px 15px;
            text-decoration: none;
            transition: background .18s ease, border-color .18s ease, color .18s ease, box-shadow .2s ease, transform .15s ease;
        }
        .genre-pick:hover {
            background: #23262a;
            border-color: var(--red);
            color: #fff;
            box-shadow: 0 0 8px rgba(239,68,68,.5), 0 0 18px rgba(239,68,68,.25);
            transform: translateY(-1px);
        }
        .genre-pick:active { transform: translateY(0) scale(.96); }
        .genre-pick.genre-pick-active {
            background: var(--red);
            border-color: var(--red);
            color: #fff;
            box-shadow: 0 0 8px rgba(239,68,68,.5), 0 0 18px rgba(239,68,68,.25);
        }

        .nav-home-btn {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            background: rgba(239,68,68,.1);
            border: 1px solid rgba(239,68,68,.25);
            color: #fff;
            border-radius: 8px;
            height: 38px;
            padding: 0 14px;
            text-decoration: none;
            font-size: .88rem;
            font-weight: 600;
            flex-shrink: 0;
            transition: background .15s ease, border-color .15s ease, transform .15s ease;
        }
        .nav-home-btn:hover { background: rgba(239,68,68,.18); border-color: rgba(239,68,68,.4); color: #fff; transform: translateY(-1px); }
        .nav-home-btn:active { transform: translateY(0) scale(.96); }
    


          .movie-type-badge {
            position: absolute;
            z-index: 2;
            top: 8px; right: 10px;
            font-size: 11px;
            line-height: 1;
            padding: 4px 8px;
            border-radius: 6px;
            font-weight: 800;
            color: #fff;
            border: 1px solid rgba(255,255,255,.08);
            text-transform: uppercase;
            box-shadow: 0 2px 8px rgba(0,0,0,.35);
            pointer-events: none;
        }
        .movie-badge-movie  { background: #e53935; }
        .movie-badge-series { background: #7b61ff; }
        .movie-card {
            position: relative;
            background: var(--card);
            border-radius: 10px;
            overflow: hidden;
            height: 100%;
            display: flex;
            flex-direction: column;
        }
        .movie-card > a {
            display: flex;
            flex-direction: column;
            flex: 1;
            text-decoration: none;
            color: inherit;
        }
        .image-container {
            position: relative;
            width: 100%;
            height: 0;
            padding-bottom: 130%;
            overflow: hidden;
            background-color: var(--bg);
        }
        .lazy-image {
            position: absolute;
            top: 0; left: 0;
            width: 100%; height: 100%;
            object-fit: contain;
            transition: all 0.3s ease;
            backface-visibility: hidden;
        }
        .lazy-image.loaded { object-fit: cover; }
        .custom_line {
            display: block;
            text-align: center;
            margin-top: 8px;
            font-size: 0.9rem;
            font-weight: bold;
            height: 2.7em;
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
        }
        .domain-banner {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 6px;
            background: linear-gradient(90deg, rgba(239,68,68,.16), rgba(239,68,68,.06));
            border: 1px solid rgba(239,68,68,.35);
            color: #fff;
            border-radius: 8px;
            padding: 10px 36px 10px 14px;
            margin-bottom: 12px;
            font-weight: 600;
            font-size: .95rem;
            text-decoration: none;
            position: relative;
            text-align: center;
            line-height: 1.4;
            transition: background .2s ease;
            animation: bannerIn .3s ease;
        }
        @keyframes bannerIn {
            from { opacity: 0; transform: translateY(-6px); }
            to   { opacity: 1; transform: translateY(0); }
        }
        .domain-banner:hover { background: linear-gradient(90deg, rgba(239,68,68,.24), rgba(239,68,68,.1)); color: #fff; }
        .domain-banner strong { color: #ff3131; }
        .domain-banner button {
            position: absolute;
            top: 50%; right: 8px;
            transform: translateY(-50%);
            background: none;
            border: none;
            color: rgba(255,255,255,.55);
            font-size: .78rem;
            cursor: pointer;
            padding: 4px;
            line-height: 1;
            transition: color .15s ease, transform .15s ease;
        }
        .domain-banner button:hover { color: #fff; transform: translateY(-50%) scale(1.15); }

        /* ── Independence Day banner (auto-shows Aug 14–16 every year) ── */
        .iday-banner {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 10px;
            background: linear-gradient(90deg, rgba(255,153,51,.14), rgba(255,255,255,.05), rgba(19,136,8,.16));
            border: 1px solid rgba(255,255,255,.12);
            border-top: 3px solid #FF9933;
            border-bottom: 3px solid #138808;
            border-radius: 10px;
            padding: 11px 36px 11px 14px;
            margin-bottom: 12px;
            color: #fff;
            font-weight: 600;
            font-size: .92rem;
            text-align: center;
            line-height: 1.4;
            position: relative;
            animation: bannerIn .3s ease;
        }
        .iday-chakra {
            display: inline-block;
            width: 16px; height: 16px;
            border: 2px solid #1a4fa0;
            border-radius: 50%;
            position: relative;
            flex-shrink: 0;
            animation: idaySpin 6s linear infinite;
        }
        .iday-chakra::before {
            content: '';
            position: absolute;
            inset: -2px;
            border-radius: 50%;
            background:
                repeating-conic-gradient(#1a4fa0 0deg 3deg, transparent 3deg 15deg);
        }
        @keyframes idaySpin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
        .iday-banner button {
            position: absolute;
            top: 50%; right: 8px;
            transform: translateY(-50%);
            background: none;
            border: none;
            color: rgba(255,255,255,.55);
            font-size: .78rem;
            cursor: pointer;
            padding: 4px;
            line-height: 1;
            transition: color .15s ease, transform .15s ease;
        }
        .iday-banner button:hover { color: #fff; transform: translateY(-50%) scale(1.15); }

        .iday-confetti-wrap {
            position: fixed;
            inset: 0;
            pointer-events: none;
            overflow: hidden;
            z-index: 1998;
        }
        .iday-confetti-piece {
            position: absolute;
            top: -20px;
            width: 8px;
            height: 14px;
            opacity: .9;
            animation-name: idayFall;
            animation-timing-function: linear;
            animation-fill-mode: forwards;
        }
        @keyframes idayFall {
            0%   { transform: translateY(0) rotate(0deg); opacity: .95; }
            100% { transform: translateY(110vh) rotate(540deg); opacity: .4; }
        }

        .section-heading {
            display: flex;
            align-items: center;
            gap: 12px;
            background: var(--card);
            border-radius: 8px;
            padding: 11px 18px;
            border-left: 4px solid var(--red);
            position: relative;
            overflow: hidden;
            margin-bottom: 12px;
        }
        .section-heading::before {
            content: '';
            position: absolute;
            inset: 0;
            width: 160px;
            background: linear-gradient(90deg, rgba(239,68,68,.1), transparent);
            pointer-events: none;
        }
        .section-heading-icon {
            font-size: 1.05rem;
            color: #f97316;
            position: relative;
        }
        .section-heading-text {
            font-size: 1.05rem;
            font-weight: 700;
            color: #fff;
            letter-spacing: .3px;
            position: relative;
        }
        .btn-danger {
            background-color: var(--red) !important;
            border-color: var(--red) !important;
        }
        .btn-danger:hover, .btn-danger:focus, .btn-danger:active {
            background-color: #c82333 !important;
            border-color: #bd2130 !important;
            box-shadow: none;
        }
        


      html, body {
            max-width: 100%;
            overflow-x: hidden;
        }
        html {
            overflow-y: scroll;
            scrollbar-gutter: stable;
        }
        body.modal-open {
            padding-right: 0 !important;
        }
        :root{
            --bg:#0b0c0e;
            --panel:#141619;
            --card:#1a1c1f;
            --text:#f1f2f4;
            --muted:#98a0aa;
            --accent:#22c55e;
            --red:#ef4444;
            --ring:#2a2f35;
            --border:rgba(255,255,255,.08);
            --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
        }
        html, body {
            font-family: var(--font-sans);
        }
        body {
            background-color: var(--bg);
            color: var(--text);
            font-feature-settings: "cv11", "ss01";
            -webkit-font-smoothing: antialiased;
        }
        h1, h2, h3, h4, h5, h6, .navbar-brand, button, input, select, textarea {
            font-family: var(--font-sans);
        }
        .navbar {
            background-color: var(--panel) !important;
            border-bottom: 1px solid var(--border);
            transition: box-shadow .2s, background-color .2s;
        }
        .navbar.scrolled { box-shadow: 0 6px 24px rgba(0,0,0,.4); }
        .wl-btn {
            position: absolute;
            top: 8px; left: 8px;
            z-index: 3;
            background: rgba(0,0,0,.55);
            border: none;
            border-radius: 50%;
            width: 28px; height: 28px;
            display: flex; align-items: center; justify-content: center;
            color: #9aa0a6;
            cursor: pointer;
            font-size: .74rem;
            transition: color .15s ease, background .15s ease, transform .15s ease;
            padding: 0;
        }
        .wl-btn:hover { background: rgba(0,0,0,.85); color: #fff; transform: scale(1.12); }
        .wl-btn:active { transform: scale(.88); }
        .wl-btn.wl-saved { color: #ef4444; animation: wlPop .35s ease; }
        @keyframes wlPop { 0% { transform: scale(1); } 45% { transform: scale(1.35); } 100% { transform: scale(1); } }
        .wl-search-btn {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            background: rgba(239,68,68,.1);
            border: 1px solid rgba(239,68,68,.25);
            color: #fff;
            border-radius: 8px;
            width: 38px;
            height: 38px;
            text-decoration: none;
            font-size: .95rem;
            flex-shrink: 0;
            transition: background .15s ease, border-color .15s ease, transform .15s ease;
            position: relative;
        }
        .wl-search-btn:hover { background: rgba(239,68,68,.18); border-color: rgba(239,68,68,.4); color: #fff; transform: translateY(-1px); }
        .wl-search-btn:active { transform: translateY(0) scale(.94); }
        .card-info { padding: 10px 8px 6px; text-align: left; flex: 1; }
        .card-title { font-size: .85rem; font-weight: 700; color: var(--text); line-height: 1.3; margin-bottom: 10px; }
        .card-meta { font-size: .72rem; color: rgba(255,255,255,.55); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
        .wl-nav-dot {
            position: absolute;
            top: 4px; right: 4px;
            width: 6px; height: 6px;
            background: #4ade80;
            border-radius: 50%;
            display: none;
        }
        .search-bar { width: 100%; background-color: var(--panel) !important; color: var(--text); border: 1px solid #23262a; }
        .input-color{
            background-color: var(--panel) !important;
            border: 1px solid #23262a;
            color: var(--text);
        }
        .input-color {
            transition: border-color .15s ease, background-color .15s ease;
        }
        .input-color:focus {
            background-color: var(--panel) !important;
            border-color: var(--red);
            box-shadow: none;
            color: var(--text);
        }
        .input-color::placeholder{
            color: rgb(81, 81, 81);
        }
        .movie-card img { border-radius: 10px; width: 100%; }
        .movie-card {
            text-align: center; background: var(--card); border-radius: 10px; padding: 10px;
            position: relative; border: 2px solid transparent;
            transition: border-color .3s ease, box-shadow .3s ease, transform .35s cubic-bezier(.22,1,.36,1);
        }
        .movie-card:hover {
            transform: translateY(-6px);
            border-color: var(--red);
            box-shadow: 0 0 8px rgba(239,68,68,.5), 0 0 18px rgba(239,68,68,.25), 0 18px 32px rgba(0,0,0,.5);
        }
        .movie-card a { text-decoration: none; color: var(--text); }
        .movie-card .image-container { overflow: hidden; }
        .movie-card .lazy-image { transition: transform .5s cubic-bezier(.22,1,.36,1); backface-visibility: hidden; }
        .movie-card .lazy-image.loaded { transform: scale(1.03); }
        .movie-card:hover .lazy-image.loaded { transform: scale(1.08); }

        #movieCarousel { height: 500px; overflow: hidden; }
        #movieCarousel .carousel-item { position: relative; }
        #movieCarousel .carousel-item::before {
            content: '';
            position: absolute;
            inset: 0;
            background: linear-gradient(180deg, rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.2)),
                        linear-gradient(90deg, rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.2));
            z-index: 1;
        }
        #movieCarousel .carousel-item img {
            height: 500px;
            width: 100%;
            object-fit: cover;
        }
        #movieCarousel .carousel-caption {
            left: 50%;
            transform: translateX(-50%);
            z-index: 2;
        }

        ::-webkit-scrollbar { width: 8px; }
        ::-webkit-scrollbar-track { background: var(--card); }
        ::-webkit-scrollbar-thumb { background: #343a40; border-radius: 10px; }
        ::-webkit-scrollbar-thumb:hover { background: var(--red); }

        .footer {
            background-color: var(--panel);
            color: var(--text);
            border-top: 1px solid var(--border);
            padding: 22px 0;
            margin-top: 48px;
            text-align: center;
        }
        .footer p {
            margin: 0;
            font-size: .85rem;
            color: var(--muted);
        }

        .pagination {
            justify-content: center;
            gap: 8px;
        }
        .pagination .page-link {
            background-color: #343a40;
            border-color: #343a40;
            color: var(--text);
            margin-left: 0;
            border-radius: 6px;
            transition: background-color .15s ease, border-color .15s ease, transform .15s ease;
        }
        .pagination .page-link:hover {
            background-color: var(--red);
            border-color: var(--red);
            transform: translateY(-1px);
        }
        .pagination .page-link:active { transform: translateY(0) scale(.94); }
        .pagination .page-item.active .page-link {
            background-color: var(--red);
            border-color: var(--red);
        }

        .fa-telegram {
            color:#2C96CF;
        }

        /* ── Global search ── */
        .global-search-wrap {
            background: var(--bg);
            padding: 14px 0 0;
            position: relative;
            z-index: 1019;
        }
        .search-input-container { position: relative; flex: 1; }
        /* Hide the browser's own type="search" clear button — we render our
           own (.search-clear-btn), and both together showed two X icons. */
        input[type="search"]::-webkit-search-cancel-button,
        input[type="search"]::-webkit-search-decoration { -webkit-appearance: none; appearance: none; }
        input[type="search"]::-ms-clear { display: none; width: 0; height: 0; }
        .search-clear-btn {
            position: absolute; right: 8px; top: 50%; transform: translateY(-50%);
            background: none; border: none; color: var(--muted); cursor: pointer;
            padding: 4px; display: none; z-index: 10;
        }
        .search-clear-btn.show { display: block; }
        .search-dropdown {
            position: absolute;
            top: calc(100% + 8px); left: 0; right: 0;
            background: var(--panel);
            border: 1px solid #23262a;
            border-radius: 8px;
            max-height: 300px;
            overflow-y: auto;
            z-index: 1055;
            display: none;
            box-shadow: 0 8px 32px rgba(0,0,0,.6);
        }
        .search-dropdown {
            animation: dropdownIn .18s ease;
        }
        @keyframes dropdownIn {
            from { opacity: 0; transform: translateY(-4px); }
            to   { opacity: 1; transform: translateY(0); }
        }
        .search-dropdown-item {
            padding: 11px 16px;
            border-bottom: 1px solid #1e2228;
            cursor: pointer;
            transition: background .15s ease;
        }
        .search-dropdown-item:hover { background: var(--card); }
        .search-dropdown-item:last-child { border-bottom: none; }
        .search-dropdown-item-title { font-weight: 700; color: var(--text); font-size: .88rem; }
        .search-dropdown-item-year  { color: var(--muted); font-size: .78rem; margin-top: 2px; }

        /* ── Category bar ── */
        .global-cat-bar {
            padding: 12px 0 12px;
            background: var(--bg);
            position: relative;
            z-index: 10;
        }
        .catButton {
            background: #1c2026 !important;
            color: #ffffff !important;
            border: 2px solid #363c47 !important;
            border-radius: 20px !important;
            box-shadow: 0 2px 8px rgba(0,0,0,.35) !important;
            font-size: .82rem;
            font-weight: 600;
            padding: 6px 17px;
            cursor: pointer;
            transition: background .18s ease, border-color .18s ease, box-shadow .2s ease, transform .15s ease;
        }
        .catButton:hover {
            background: #262b33 !important;
            border-color: var(--red) !important;
            color: #ffffff !important;
            box-shadow: 0 0 8px rgba(239,68,68,.5), 0 0 18px rgba(239,68,68,.25), 0 4px 14px rgba(0,0,0,.35) !important;
            transform: translateY(-1px);
        }
        .catButton:active { transform: translateY(0) scale(.96); }
        .catButton.cat-active {
            background: var(--red) !important;
            border-color: var(--red) !important;
            color: #ffffff !important;
            box-shadow: 0 0 8px rgba(239,68,68,.5), 0 0 18px rgba(239,68,68,.25) !important;
        }
        /* On mobile, a wrapped multi-row flex layout of pills reads as
           ragged/uneven (different pill counts per row, centered so the
           short last row floats in the middle) — a fixed 3-column grid gives
           every pill the same width and keeps everything visible with no
           scrolling. The last item (Join Telegram) spans 2 columns to fill
           out the final row evenly, since 8 items over 3 columns leaves a
           lone item on the last row otherwise. */
        @media (max-width: 767px) {
            .cat-mobile-grid {
                display: grid !important;
                grid-template-columns: repeat(3, 1fr);
                gap: 6px;
            }
            .cat-mobile-grid .catButton {
                font-size: .72rem;
                font-weight: 700;
                padding: 8px 2px;
                border-radius: 9px !important;
                text-align: center;
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
            }
            .cat-mobile-grid .catButton:last-child { grid-column: span 2; }
        }
        .genre-pick {
            display: inline-block;
            background: var(--panel);
            border: 2px solid #2d3340;
            border-radius: 20px;
            color: #fff;
            font-size: .82rem;
            font-weight: 600;
            padding: 6px 15px;
            text-decoration: none;
            transition: background .18s ease, border-color .18s ease, color .18s ease, box-shadow .2s ease, transform .15s ease;
        }
        .genre-pick:hover {
            background: #23262a;
            border-color: var(--red);
            color: #fff;
            box-shadow: 0 0 8px rgba(239,68,68,.5), 0 0 18px rgba(239,68,68,.25);
            transform: translateY(-1px);
        }
        .genre-pick:active { transform: translateY(0) scale(.96); }
        .genre-pick.genre-pick-active {
            background: var(--red);
            border-color: var(--red);
            color: #fff;
            box-shadow: 0 0 8px rgba(239,68,68,.5), 0 0 18px rgba(239,68,68,.25);
        }

        .nav-home-btn {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            background: rgba(239,68,68,.1);
            border: 1px solid rgba(239,68,68,.25);
            color: #fff;
            border-radius: 8px;
            height: 38px;
            padding: 0 14px;
            text-decoration: none;
            font-size: .88rem;
            font-weight: 600;
            flex-shrink: 0;
            transition: background .15s ease, border-color .15s ease, transform .15s ease;
        }
        .nav-home-btn:hover { background: rgba(239,68,68,.18); border-color: rgba(239,68,68,.4); color: #fff; transform: translateY(-1px); }
        .nav-home-btn:active { transform: translateY(0) scale(.96); }
    


          .movie-type-badge {
            position: absolute;
            z-index: 2;
            top: 8px; right: 10px;
            font-size: 11px;
            line-height: 1;
            padding: 4px 8px;
            border-radius: 6px;
            font-weight: 800;
            color: #fff;
            border: 1px solid rgba(255,255,255,.08);
            text-transform: uppercase;
            box-shadow: 0 2px 8px rgba(0,0,0,.35);
            pointer-events: none;
        }
        .movie-badge-movie  { background: #e53935; }
        .movie-badge-series { background: #7b61ff; }
        .movie-card {
            position: relative;
            background: var(--card);
            border-radius: 10px;
            overflow: hidden;
            height: 100%;
            display: flex;
            flex-direction: column;
        }
        .movie-card > a {
            display: flex;
            flex-direction: column;
            flex: 1;
            text-decoration: none;
            color: inherit;
        }
        .image-container {
            position: relative;
            width: 100%;
            height: 0;
            padding-bottom: 130%;
            overflow: hidden;
            background-color: var(--bg);
        }
        .lazy-image {
            position: absolute;
            top: 0; left: 0;
            width: 100%; height: 100%;
            object-fit: contain;
            transition: all 0.3s ease;
            backface-visibility: hidden;
        }
        .lazy-image.loaded { object-fit: cover; }
        .custom_line {
            display: block;
            text-align: center;
            margin-top: 8px;
            font-size: 0.9rem;
            font-weight: bold;
            height: 2.7em;
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
        }
        .domain-banner {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 6px;
            background: linear-gradient(90deg, rgba(239,68,68,.16), rgba(239,68,68,.06));
            border: 1px solid rgba(239,68,68,.35);
            color: #fff;
            border-radius: 8px;
            padding: 10px 36px 10px 14px;
            margin-bottom: 12px;
            font-weight: 600;
            font-size: .95rem;
            text-decoration: none;
            position: relative;
            text-align: center;
            line-height: 1.4;
            transition: background .2s ease;
            animation: bannerIn .3s ease;
        }
        @keyframes bannerIn {
            from { opacity: 0; transform: translateY(-6px); }
            to   { opacity: 1; transform: translateY(0); }
        }
        .domain-banner:hover { background: linear-gradient(90deg, rgba(239,68,68,.24), rgba(239,68,68,.1)); color: #fff; }
        .domain-banner strong { color: #ff3131; }
        .domain-banner button {
            position: absolute;
            top: 50%; right: 8px;
            transform: translateY(-50%);
            background: none;
            border: none;
            color: rgba(255,255,255,.55);
            font-size: .78rem;
            cursor: pointer;
            padding: 4px;
            line-height: 1;
            transition: color .15s ease, transform .15s ease;
        }
        .domain-banner button:hover { color: #fff; transform: translateY(-50%) scale(1.15); }

        /* ── Independence Day banner (auto-shows Aug 14–16 every year) ── */
        .iday-banner {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 10px;
            background: linear-gradient(90deg, rgba(255,153,51,.14), rgba(255,255,255,.05), rgba(19,136,8,.16));
            border: 1px solid rgba(255,255,255,.12);
            border-top: 3px solid #FF9933;
            border-bottom: 3px solid #138808;
            border-radius: 10px;
            padding: 11px 36px 11px 14px;
            margin-bottom: 12px;
            color: #fff;
            font-weight: 600;
            font-size: .92rem;
            text-align: center;
            line-height: 1.4;
            position: relative;
            animation: bannerIn .3s ease;
        }
        .iday-chakra {
            display: inline-block;
            width: 16px; height: 16px;
            border: 2px solid #1a4fa0;
            border-radius: 50%;
            position: relative;
            flex-shrink: 0;
            animation: idaySpin 6s linear infinite;
        }
        .iday-chakra::before {
            content: '';
            position: absolute;
            inset: -2px;
            border-radius: 50%;
            background:
                repeating-conic-gradient(#1a4fa0 0deg 3deg, transparent 3deg 15deg);
        }
        @keyframes idaySpin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
        .iday-banner button {
            position: absolute;
            top: 50%; right: 8px;
            transform: translateY(-50%);
            background: none;
            border: none;
            color: rgba(255,255,255,.55);
            font-size: .78rem;
            cursor: pointer;
            padding: 4px;
            line-height: 1;
            transition: color .15s ease, transform .15s ease;
        }
        .iday-banner button:hover { color: #fff; transform: translateY(-50%) scale(1.15); }

        .iday-confetti-wrap {
            position: fixed;
            inset: 0;
            pointer-events: none;
            overflow: hidden;
            z-index: 1998;
        }
        .iday-confetti-piece {
            position: absolute;
            top: -20px;
            width: 8px;
            height: 14px;
            opacity: .9;
            animation-name: idayFall;
            animation-timing-function: linear;
            animation-fill-mode: forwards;
        }
        @keyframes idayFall {
            0%   { transform: translateY(0) rotate(0deg); opacity: .95; }
            100% { transform: translateY(110vh) rotate(540deg); opacity: .4; }
        }

        .section-heading {
            display: flex;
            align-items: center;
            gap: 12px;
            background: var(--card);
            border-radius: 8px;
            padding: 11px 18px;
            border-left: 4px solid var(--red);
            position: relative;
            overflow: hidden;
            margin-bottom: 12px;
        }
        .section-heading::before {
            content: '';
            position: absolute;
            inset: 0;
            width: 160px;
            background: linear-gradient(90deg, rgba(239,68,68,.1), transparent);
            pointer-events: none;
        }
        .section-heading-icon {
            font-size: 1.05rem;
            color: #f97316;
            position: relative;
        }
        .section-heading-text {
            font-size: 1.05rem;
            font-weight: 700;
            color: #fff;
            letter-spacing: .3px;
            position: relative;
        }
        .btn-danger {
            background-color: var(--red) !important;
            border-color: var(--red) !important;
        }
        .btn-danger:hover, .btn-danger:focus, .btn-danger:active {
            background-color: #c82333 !important;
            border-color: #bd2130 !important;
            box-shadow: none;
        }
        


      html, body {
            max-width: 100%;
            overflow-x: hidden;
        }
        html {
            overflow-y: scroll;
            scrollbar-gutter: stable;
        }
        body.modal-open {
            padding-right: 0 !important;
        }
        :root{
            --bg:#0b0c0e;
            --panel:#141619;
            --card:#1a1c1f;
            --text:#f1f2f4;
            --muted:#98a0aa;
            --accent:#22c55e;
            --red:#ef4444;
            --ring:#2a2f35;
            --border:rgba(255,255,255,.08);
            --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
        }
        html, body {
            font-family: var(--font-sans);
        }
        body {
            background-color: var(--bg);
            color: var(--text);
            font-feature-settings: "cv11", "ss01";
            -webkit-font-smoothing: antialiased;
        }
        h1, h2, h3, h4, h5, h6, .navbar-brand, button, input, select, textarea {
            font-family: var(--font-sans);
        }
        .navbar {
            background-color: var(--panel) !important;
            border-bottom: 1px solid var(--border);
            transition: box-shadow .2s, background-color .2s;
        }
        .navbar.scrolled { box-shadow: 0 6px 24px rgba(0,0,0,.4); }
        .wl-btn {
            position: absolute;
            top: 8px; left: 8px;
            z-index: 3;
            background: rgba(0,0,0,.55);
            border: none;
            border-radius: 50%;
            width: 28px; height: 28px;
            display: flex; align-items: center; justify-content: center;
            color: #9aa0a6;
            cursor: pointer;
            font-size: .74rem;
            transition: color .15s ease, background .15s ease, transform .15s ease;
            padding: 0;
        }
        .wl-btn:hover { background: rgba(0,0,0,.85); color: #fff; transform: scale(1.12); }
        .wl-btn:active { transform: scale(.88); }
        .wl-btn.wl-saved { color: #ef4444; animation: wlPop .35s ease; }
        @keyframes wlPop { 0% { transform: scale(1); } 45% { transform: scale(1.35); } 100% { transform: scale(1); } }
        .wl-search-btn {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            background: rgba(239,68,68,.1);
            border: 1px solid rgba(239,68,68,.25);
            color: #fff;
            border-radius: 8px;
            width: 38px;
            height: 38px;
            text-decoration: none;
            font-size: .95rem;
            flex-shrink: 0;
            transition: background .15s ease, border-color .15s ease, transform .15s ease;
            position: relative;
        }
        .wl-search-btn:hover { background: rgba(239,68,68,.18); border-color: rgba(239,68,68,.4); color: #fff; transform: translateY(-1px); }
        .wl-search-btn:active { transform: translateY(0) scale(.94); }
        .card-info { padding: 10px 8px 6px; text-align: left; flex: 1; }
        .card-title { font-size: .85rem; font-weight: 700; color: var(--text); line-height: 1.3; margin-bottom: 10px; }
        .card-meta { font-size: .72rem; color: rgba(255,255,255,.55); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
        .wl-nav-dot {
            position: absolute;
            top: 4px; right: 4px;
            width: 6px; height: 6px;
            background: #4ade80;
            border-radius: 50%;
            display: none;
        }
        .search-bar { width: 100%; background-color: var(--panel) !important; color: var(--text); border: 1px solid #23262a; }
        .input-color{
            background-color: var(--panel) !important;
            border: 1px solid #23262a;
            color: var(--text);
        }
        .input-color {
            transition: border-color .15s ease, background-color .15s ease;
        }
        .input-color:focus {
            background-color: var(--panel) !important;
            border-color: var(--red);
            box-shadow: none;
            color: var(--text);
        }
        .input-color::placeholder{
            color: rgb(81, 81, 81);
        }
        .movie-card img { border-radius: 10px; width: 100%; }
        .movie-card {
            text-align: center; background: var(--card); border-radius: 10px; padding: 10px;
            position: relative; border: 2px solid transparent;
            transition: border-color .3s ease, box-shadow .3s ease, transform .35s cubic-bezier(.22,1,.36,1);
        }
        .movie-card:hover {
            transform: translateY(-6px);
            border-color: var(--red);
            box-shadow: 0 0 8px rgba(239,68,68,.5), 0 0 18px rgba(239,68,68,.25), 0 18px 32px rgba(0,0,0,.5);
        }
        .movie-card a { text-decoration: none; color: var(--text); }
        .movie-card .image-container { overflow: hidden; }
        .movie-card .lazy-image { transition: transform .5s cubic-bezier(.22,1,.36,1); backface-visibility: hidden; }
        .movie-card .lazy-image.loaded { transform: scale(1.03); }
        .movie-card:hover .lazy-image.loaded { transform: scale(1.08); }

        #movieCarousel { height: 500px; overflow: hidden; }
        #movieCarousel .carousel-item { position: relative; }
        #movieCarousel .carousel-item::before {
            content: '';
            position: absolute;
            inset: 0;
            background: linear-gradient(180deg, rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.2)),
                        linear-gradient(90deg, rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.2));
            z-index: 1;
        }
        #movieCarousel .carousel-item img {
            height: 500px;
            width: 100%;
            object-fit: cover;
        }
        #movieCarousel .carousel-caption {
            left: 50%;
            transform: translateX(-50%);
            z-index: 2;
        }

        ::-webkit-scrollbar { width: 8px; }
        ::-webkit-scrollbar-track { background: var(--card); }
        ::-webkit-scrollbar-thumb { background: #343a40; border-radius: 10px; }
        ::-webkit-scrollbar-thumb:hover { background: var(--red); }

        .footer {
            background-color: var(--panel);
            color: var(--text);
            border-top: 1px solid var(--border);
            padding: 22px 0;
            margin-top: 48px;
            text-align: center;
        }
        .footer p {
            margin: 0;
            font-size: .85rem;
            color: var(--muted);
        }

        .pagination {
            justify-content: center;
            gap: 8px;
        }
        .pagination .page-link {
            background-color: #343a40;
            border-color: #343a40;
            color: var(--text);
            margin-left: 0;
            border-radius: 6px;
            transition: background-color .15s ease, border-color .15s ease, transform .15s ease;
        }
        .pagination .page-link:hover {
            background-color: var(--red);
            border-color: var(--red);
            transform: translateY(-1px);
        }
        .pagination .page-link:active { transform: translateY(0) scale(.94); }
        .pagination .page-item.active .page-link {
            background-color: var(--red);
            border-color: var(--red);
        }

        .fa-telegram {
            color:#2C96CF;
        }

        /* ── Global search ── */
        .global-search-wrap {
            background: var(--bg);
            padding: 14px 0 0;
            position: relative;
            z-index: 1019;
        }
        .search-input-container { position: relative; flex: 1; }
        /* Hide the browser's own type="search" clear button — we render our
           own (.search-clear-btn), and both together showed two X icons. */
        input[type="search"]::-webkit-search-cancel-button,
        input[type="search"]::-webkit-search-decoration { -webkit-appearance: none; appearance: none; }
        input[type="search"]::-ms-clear { display: none; width: 0; height: 0; }
        .search-clear-btn {
            position: absolute; right: 8px; top: 50%; transform: translateY(-50%);
            background: none; border: none; color: var(--muted); cursor: pointer;
            padding: 4px; display: none; z-index: 10;
        }
        .search-clear-btn.show { display: block; }
        .search-dropdown {
            position: absolute;
            top: calc(100% + 8px); left: 0; right: 0;
            background: var(--panel);
            border: 1px solid #23262a;
            border-radius: 8px;
            max-height: 300px;
            overflow-y: auto;
            z-index: 1055;
            display: none;
            box-shadow: 0 8px 32px rgba(0,0,0,.6);
        }
        .search-dropdown {
            animation: dropdownIn .18s ease;
        }
        @keyframes dropdownIn {
            from { opacity: 0; transform: translateY(-4px); }
            to   { opacity: 1; transform: translateY(0); }
        }
        .search-dropdown-item {
            padding: 11px 16px;
            border-bottom: 1px solid #1e2228;
            cursor: pointer;
            transition: background .15s ease;
        }
        .search-dropdown-item:hover { background: var(--card); }
        .search-dropdown-item:last-child { border-bottom: none; }
        .search-dropdown-item-title { font-weight: 700; color: var(--text); font-size: .88rem; }
        .search-dropdown-item-year  { color: var(--muted); font-size: .78rem; margin-top: 2px; }

        /* ── Category bar ── */
        .global-cat-bar {
            padding: 12px 0 12px;
            background: var(--bg);
            position: relative;
            z-index: 10;
        }
        .catButton {
            background: #1c2026 !important;
            color: #ffffff !important;
            border: 2px solid #363c47 !important;
            border-radius: 20px !important;
            box-shadow: 0 2px 8px rgba(0,0,0,.35) !important;
            font-size: .82rem;
            font-weight: 600;
            padding: 6px 17px;
            cursor: pointer;
            transition: background .18s ease, border-color .18s ease, box-shadow .2s ease, transform .15s ease;
        }
        .catButton:hover {
            background: #262b33 !important;
            border-color: var(--red) !important;
            color: #ffffff !important;
            box-shadow: 0 0 8px rgba(239,68,68,.5), 0 0 18px rgba(239,68,68,.25), 0 4px 14px rgba(0,0,0,.35) !important;
            transform: translateY(-1px);
        }
        .catButton:active { transform: translateY(0) scale(.96); }
        .catButton.cat-active {
            background: var(--red) !important;
            border-color: var(--red) !important;
            color: #ffffff !important;
            box-shadow: 0 0 8px rgba(239,68,68,.5), 0 0 18px rgba(239,68,68,.25) !important;
        }
        /* On mobile, a wrapped multi-row flex layout of pills reads as
           ragged/uneven (different pill counts per row, centered so the
           short last row floats in the middle) — a fixed 3-column grid gives
           every pill the same width and keeps everything visible with no
           scrolling. The last item (Join Telegram) spans 2 columns to fill
           out the final row evenly, since 8 items over 3 columns leaves a
           lone item on the last row otherwise. */
        @media (max-width: 767px) {
            .cat-mobile-grid {
                display: grid !important;
                grid-template-columns: repeat(3, 1fr);
                gap: 6px;
            }
            .cat-mobile-grid .catButton {
                font-size: .72rem;
                font-weight: 700;
                padding: 8px 2px;
                border-radius: 9px !important;
                text-align: center;
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
            }
            .cat-mobile-grid .catButton:last-child { grid-column: span 2; }
        }
        .genre-pick {
            display: inline-block;
            background: var(--panel);
            border: 2px solid #2d3340;
            border-radius: 20px;
            color: #fff;
            font-size: .82rem;
            font-weight: 600;
            padding: 6px 15px;
            text-decoration: none;
            transition: background .18s ease, border-color .18s ease, color .18s ease, box-shadow .2s ease, transform .15s ease;
        }
        .genre-pick:hover {
            background: #23262a;
            border-color: var(--red);
            color: #fff;
            box-shadow: 0 0 8px rgba(239,68,68,.5), 0 0 18px rgba(239,68,68,.25);
            transform: translateY(-1px);
        }
        .genre-pick:active { transform: translateY(0) scale(.96); }
        .genre-pick.genre-pick-active {
            background: var(--red);
            border-color: var(--red);
            color: #fff;
            box-shadow: 0 0 8px rgba(239,68,68,.5), 0 0 18px rgba(239,68,68,.25);
        }

        .nav-home-btn {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            background: rgba(239,68,68,.1);
            border: 1px solid rgba(239,68,68,.25);
            color: #fff;
            border-radius: 8px;
            height: 38px;
            padding: 0 14px;
            text-decoration: none;
            font-size: .88rem;
            font-weight: 600;
            flex-shrink: 0;
            transition: background .15s ease, border-color .15s ease, transform .15s ease;
        }
        .nav-home-btn:hover { background: rgba(239,68,68,.18); border-color: rgba(239,68,68,.4); color: #fff; transform: translateY(-1px); }
        .nav-home-btn:active { transform: translateY(0) scale(.96); }
    


          .movie-card { position:relative; background:var(--card); border-radius:10px; overflow:hidden; height:100%; display:flex; flex-direction:column; }
.movie-card > a { display:flex; flex-direction:column; flex:1; text-decoration:none; color:inherit; }
.image-container { position:relative; width:100%; height:0; padding-bottom:130%; overflow:hidden; background-color:var(--bg); }
.lazy-image { position:absolute; top:0; left:0; width:100%; height:100%; object-fit:contain; transition:all .3s ease; backface-visibility:hidden; }
.lazy-image.loaded { object-fit:cover; }
.custom_line { display:block; text-align:center; margin-top:8px; font-size:.9rem; font-weight:bold; height:2.7em; overflow:hidden; -webkit-line-clamp:2; -webkit-box-orient:vertical; display:-webkit-box; }
.section-heading { display:flex; align-items:center; gap:12px; background:var(--card); border-radius:8px; padding:11px 18px; border-left:4px solid var(--red); position:relative; overflow:hidden; }
.section-heading::before { content:''; position:absolute; inset:0; width:160px; background:linear-gradient(90deg,rgba(239,68,68,.1),transparent); pointer-events:none; }
.section-heading-icon { font-size:1.05rem; color:#f97316; position:relative; }
.section-heading-text { font-size:1.05rem; font-weight:700; color:#fff; letter-spacing:.3px; position:relative; flex:1; }
.wl-count-badge {
    font-size:.72rem; font-weight:700;
    padding:3px 11px; border-radius:20px;
    background:rgba(255,255,255,.06);
    border:1px solid #2a2f38; color:var(--muted);
    white-space:nowrap; position:relative;
}
.wl-empty-wrap {
    max-width:360px; margin:0 auto; padding:72px 20px;
    text-align:center; display:none;
}
.wl-empty-icon {
    width:64px; height:64px; margin:0 auto 20px;
    border-radius:50%; background:rgba(239,68,68,.1);
    border:1px solid rgba(239,68,68,.25);
    display:flex; align-items:center; justify-content:center;
    font-size:1.4rem; color:var(--red);
}
.wl-empty-wrap h5 { color:#fff; font-weight:700; font-size:1.05rem; margin-bottom:8px; }
.wl-empty-wrap p { color:var(--muted); font-size:.85rem; margin-bottom:22px; }
.wl-empty-cta {
    display:inline-flex; align-items:center; gap:8px;
    background:var(--red); color:#fff; border-radius:8px;
    padding:10px 24px; text-decoration:none;
    font-weight:700; font-size:.88rem;
    transition:background .15s, transform .15s, box-shadow .15s;
}
.wl-empty-cta:hover { background:#dc2626; color:#fff; transform:translateY(-1px); box-shadow:0 4px 16px rgba(239,68,68,.35); }
        

.inline-style-ffc43dd6b2{background:var(--card);border:1px solid #23262a;color:var(--text);}
.inline-style-fd3897bf5f{border-color:#23262a;}
.inline-style-d096b30388{font-size:1rem;font-weight:700;}
.inline-style-93b8ea5b2f{display:none;}
.inline-style-db52c0dfef{display:inline-block;vertical-align:-4px;overflow:visible;}
.inline-style-005b37cafc{display:none;position:fixed;inset:0;background:rgba(0,0,0,.65);backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);z-index:1999;}
.inline-style-197a7518ed{display:none;position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);width:360px;max-width:calc(100vw - 20px);background:#16191d;border:1px solid #23262a;border-radius:18px;z-index:2000;overflow:hidden;box-shadow:0 20px 60px rgba(0,0,0,.7);}
.inline-style-ba8a67b177{position:absolute;top:12px;right:12px;background:#23262a;border:none;border-radius:50%;width:28px;height:28px;color:#9aa0a6;cursor:pointer;font-size:1rem;display:flex;align-items:center;justify-content:center;}
.inline-style-5d21ddd7f7{padding:24px 20px 0;}
.inline-style-90dbd82b14{width:44px;height:44px;border-radius:12px;background:#1e2228;border:1px solid #2a2f35;display:flex;align-items:center;justify-content:center;margin-bottom:16px;}
.inline-style-3dd845be5c{color:#e8eaed;font-size:1.1rem;}
.inline-style-2756255453{display:flex;align-items:center;gap:6px;margin-bottom:8px;}
.inline-style-b4e7011e38{width:7px;height:7px;border-radius:50%;background:#ef4444;flex-shrink:0;}
.inline-style-a5e8146a87{font-size:.67rem;font-weight:600;letter-spacing:.09em;color:#9aa0a6;text-transform:uppercase;}
.inline-style-1f8dfe0f45{font-size:1.2rem;font-weight:700;color:#e8eaed;line-height:1.35;margin-bottom:20px;}
.inline-style-cc130b3f58{color:#ef4444;font-style:italic;}
.inline-style-8dc7378f8a{padding:0 20px 12px;}
.inline-style-c041bd174c{width:100%;background:rgba(239,68,68,.08);border:1px solid rgba(239,68,68,.2);border-radius:12px;padding:14px 16px;cursor:pointer;display:flex;align-items:center;justify-content:space-between;text-align:left;transition:background .15s;}
.inline-style-749248fbbd{font-size:.67rem;color:#9aa0a6;text-transform:uppercase;letter-spacing:.08em;font-weight:600;margin-bottom:2px;}
.inline-style-12ccc0fcb8{font-size:.92rem;font-weight:700;color:#e8eaed;}
.inline-style-9fe6f3663f{width:34px;height:34px;border-radius:50%;background:#ef4444;display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.inline-style-53767f6343{color:#fff;font-size:.8rem;}
.inline-style-99eeca70c3{display:flex;align-items:center;justify-content:space-between;padding:12px 20px;border-top:1px solid #1e2228;}
.inline-style-bced8ceaed{background:none;border:none;color:#e8eaed;cursor:pointer;font-size:.855rem;font-weight:600;padding:0;}
.inline-style-f0597c63ae{background:none;border:none;color:#9aa0a6;cursor:pointer;font-size:.78rem;padding:0;}
.inline-style-b202c6d437{cursor:pointer}
.inline-style-9a2e9d30ba{background-image:url('https://image.tmdb.org/t/p/original/n7sOB4pgW9sv7jZT6DXk1Rdmwjb.jpg')}
.inline-style-3b6fff87a0{display:flex;align-items:center;gap:10px;}

/* Static demo functionality */
.search-live-empty { padding: 22px; text-align:center; color: var(--muted, #999); }
.static-search-results .movie-card { height: 100%; }
.static-search-results .movie-card.is-hidden { display:none !important; }
.wl-saved { opacity: 1 !important; }
.wl-saved i { color: #ef4444 !important; }
#wl-grid .static-wl-card { display:block; }
#wl-grid .static-wl-empty { width:100%; padding:50px 15px; text-align:center; }
#wl-grid .static-wl-card .movie-card { height:100%; }
.static-search-count { margin-bottom:16px; opacity:.8; }

.static-old-empty{display:none !important;}

/* Final details hero: use the TMDB backdrop supplied by details.php.
   Only fall back to the poster when TMDB has no backdrop. */
#heroBackdrop{
  background-size:cover !important;
  background-repeat:no-repeat !important;
  background-position:center 25% !important;
}
#heroBackdrop .hero-poster-bg{
  display:none;
}


/* ── Series episode quality selector ─────────────────────────────────── */
.episode-quality-page {
  position: relative;
  min-height: calc(100vh - 55px);
  background:
    radial-gradient(circle at 12% 28%, rgba(255, 44, 68, .13), transparent 26%),
    radial-gradient(circle at 88% 82%, rgba(42, 92, 180, .12), transparent 28%),
    #090a0c;
}
.episode-quality-shell {
  width: 100%;
  max-width: 1180px;
  margin: 0 auto;
  padding: 210px 24px 110px;
}
.episode-quality-card {
  max-width: 640px;
  margin: 0 auto;
  background: #141619;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 18px 55px rgba(0,0,0,.45);
}
.episode-quality-head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 18px 20px;
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.episode-quality-icon {
  width: 34px;
  height: 34px;
  flex: 0 0 34px;
  display: grid;
  place-items: center;
  border-radius: 9px;
  background: rgba(244, 66, 75, .18);
  color: #ff4b55;
}
.episode-quality-heading { min-width: 0; flex: 1; }
.episode-quality-heading h1 {
  margin: 0;
  color: #f5f5f6;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.35;
}
.episode-quality-subtitle {
  margin-top: 4px;
  color: #969aa2;
  font-size: 12px;
}
.episode-quality-rows { padding: 0; }
.episode-quality-row {
  min-height: 64px;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  border-bottom: 1px solid rgba(255,255,255,.06);
}
.episode-quality-row:last-child { border-bottom: 0; }
.episode-quality-row:hover { background: rgba(255,255,255,.025); }
.episode-quality-name {
  flex: 1;
  min-width: 0;
  color: #ededee;
  font-size: 14px;
  font-weight: 700;
}
.episode-quality-name .dl-format-chip { margin-left: 7px; }
.episode-quality-row .dl-btn { flex: 0 0 auto; }
.episode-back-link {
  display: block;
  margin: 14px 18px 18px;
  color: #aeb2ba;
  font-size: 13px;
  text-decoration: none;
  text-align: center;
}
.episode-back-link:hover { color: #fff; }

@media (max-width: 700px) {
  .episode-quality-shell { padding: 110px 12px 60px; }
  .episode-quality-card { border-radius: 14px; }
  .episode-quality-head { padding: 14px 13px; gap: 9px; }
  .episode-quality-heading h1 { font-size: 13px; }
  .episode-quality-subtitle { font-size: 11px; }
  .episode-quality-row { min-height: 58px; padding: 10px 12px; gap: 8px; }
  .episode-quality-name { font-size: 12px; }
  .episode-quality-row .dl-size-chip { font-size: 10px; }
  .episode-quality-row .dl-btn { padding: 8px 11px; font-size: 11px; }
}
/* GLOBAL WEBSITE FONT */
*,
*::before,
*::after {
    font-family: "Inter", Arial, sans-serif !important;
}

/* FIX FONT AWESOME ICONS */
.fa,
.fa::before,
.fa::after {
    font-family: FontAwesome !important;
}
/* =========================================================
   MOBILE DETAIL PAGE — clean single-column layout
   Keeps desktop layout unchanged; applies below 768px only.
   ========================================================= */
@media (max-width: 767px) {
    /* Keep the cinematic backdrop, but make the detail content stack. */
    .movie-main {
        margin-top: -92px !important;
        padding-left: 14px;
        padding-right: 14px;
    }

    .movie-main > .row {
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    /* Poster becomes a centered block instead of sharing the row with info. */
    .movie-main > .row > .col-auto {
        width: 100% !important;
        max-width: 100% !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        display: flex !important;
        justify-content: center !important;
    }

    .movie-poster {
        width: min(78vw, 320px) !important;
        min-width: 0 !important;
        max-width: 320px !important;
        height: auto !important;
        margin: 0 auto !important;
        border-radius: 16px !important;
    }

    /* Movie information starts below the poster. */
    .movie-main > .row > .movie-info,
    .movie-info {
        width: 100% !important;
        max-width: 100% !important;
        flex: 0 0 auto !important;
        padding-top: 18px !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        margin: 0 !important;
    }

    .movie-title-text {
        font-size: 1.42rem !important;
        line-height: 1.25 !important;
        margin: 0 0 12px !important;
    }

    .meta-pills {
        gap: 7px !important;
        margin: 10px 0 13px !important;
    }

    .meta-pill {
        max-width: 100% !important;
        font-size: .78rem !important;
        padding: 6px 10px !important;
    }

    .meta-pill.lang {
        max-width: 100% !important;
    }

    #movieGenresBox {
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 5px !important;
        margin-top: 4px !important;
    }

    .genre-pill {
        margin: 0 !important;
        padding: 5px 11px !important;
        font-size: .76rem !important;
    }

    .share-row {
        display: flex !important;
        align-items: center !important;
        gap: 8px !important;
        margin: 14px 0 10px !important;
    }

    .overview-text {
        max-width: none !important;
        font-size: .92rem !important;
        line-height: 1.65 !important;
        margin-top: 14px !important;
    }

    /* Download card: full-width and easy to scan on a phone. */
    .dl-wrap {
        width: 100% !important;
        margin-top: 28px !important;
        border-radius: 16px !important;
    }

    .dl-header {
        padding: 14px 15px !important;
        gap: 10px !important;
    }

    .dl-header-title {
        font-size: .9rem !important;
        line-height: 1.35 !important;
    }

    .dl-row {
        display: flex !important;
        align-items: center !important;
        gap: 9px !important;
        padding: 13px 12px !important;
    }

    .dl-row-info {
        min-width: 0 !important;
    }

    .dl-row-name {
        font-size: .82rem !important;
    }

    .dl-size-chip {
        font-size: .7rem !important;
    }

    .dl-btn {
        flex: 0 0 auto !important;
        padding: 9px 13px !important;
        font-size: .76rem !important;
        white-space: nowrap !important;
    }

    .cast-line {
        line-height: 1.55 !important;
    }
}

@media (max-width: 480px) {
    .movie-main {
        padding-left: 12px;
        padding-right: 12px;
    }

    .movie-poster {
        width: min(82vw, 300px) !important;
        max-width: 300px !important;
    }

    .movie-title-text {
        font-size: 1.3rem !important;
    }

    .dl-row {
        padding: 12px 10px !important;
    }

    .dl-btn {
        padding: 8px 11px !important;
        font-size: .72rem !important;
    }
}


/* M4MOVIES FIX: keep the main site header pinned while the page scrolls */
#mainNavbar {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    z-index: 2050 !important;
    margin: 0 !important;
}
/* Reserve the navbar's space so page content does not sit underneath it. */
body {
    padding-top: 62px !important;
}
@media (max-width: 991.98px) {
    #mainNavbar .navbar-collapse {
        max-height: calc(100vh - 62px);
        overflow-y: auto;
    }
}