/* =========================================================
   JTLoaded — Supplemental fixes
   1) Dark-mode background for "Top 10 Movies"
   2) Dark-mode background for "Trending Podcasts"
   3) Extra mobile / iPhone responsiveness for Top 10 Movies
   4) Prev / Next arrow buttons for Trending Podcasts
   (Loaded after jt.css so these rules take priority without
   needing to touch the original stylesheet.)
   ========================================================= */

/* ---------------------------------------------------------
   1) TOP 10 MOVIES — Dark mode
   The dark toggle adds a ".dark-mode" class directly onto
   .top10-Section. These rules re-skin every child element so
   the whole block (not just the outer background) goes dark.
--------------------------------------------------------- */
.top10-Section.dark-mode {
    background: #0a0a0a;
}

.top10-Section.dark-mode .top10-header h2 {
    color: #fff;
}

.top10-Section.dark-mode .top10-see-all {
    color: #c58fff;
    border-color: #c58fff;
}

.top10-Section.dark-mode .top10-see-all:hover {
    background: #6c2bd9;
    color: #fff;
}

.top10-Section.dark-mode .top10-card {
    background: #1a1a1a;
    border-color: #333;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .5);
}

.top10-Section.dark-mode .top10-card:hover {
    border-color: #c58fff;
    box-shadow: 0 6px 20px rgba(108, 43, 217, .3);
}

.top10-Section.dark-mode .top10-info h4 {
    color: #fff;
}

.top10-Section.dark-mode .top10-genre {
    color: #c58fff;
}

.top10-Section.dark-mode .top10-rank {
    -webkit-text-stroke-color: #444;
}

.top10-Section.dark-mode .top10-card:hover .top10-rank {
    -webkit-text-stroke-color: #c58fff;
}

.top10-Section.dark-mode .top10-dl {
    color: #c58fff;
    border-color: #c58fff;
}

.top10-Section.dark-mode .top10-dl:hover {
    background: #6c2bd9;
    color: #fff;
}

/* ---------------------------------------------------------
   2) TRENDING PODCASTS — Dark mode
--------------------------------------------------------- */
.podcast-Section.dark-mode {
    background: #0a0a0a;
}

.podcast-Section.dark-mode .podcast-Section-title {
    color: #fff;
}

.podcast-Section.dark-mode .podcast-Section-subtitle {
    color: #bbb;
}

.podcast-Section.dark-mode .pod-loading {
    color: #bbb;
}

/* ---------------------------------------------------------
   3) TOP 10 MOVIES — extra responsive rules (mobile-first)
   Existing rules already switch to 1 column at 768px; these
   fine-tune spacing/sizing for common iPhone widths so
   nothing overlaps or overflows horizontally.
--------------------------------------------------------- */
.top10-Section {
    overflow: hidden;
    box-sizing: border-box;
}

.top10-grid {
    box-sizing: border-box;
}

.top10-card {
    box-sizing: border-box;
    max-width: 100%;
}

@media (max-width: 600px) {
    .top10-grid {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .top10-header {
        flex-wrap: wrap;
        gap: 8px;
    }
}

@media (max-width: 430px) {
    .top10-Section {
        padding: 24px 12px;
    }

    .top10-header h2 {
        font-size: 20px;
    }

    .top10-card {
        gap: 10px;
        padding: 8px 10px 8px 8px;
    }

    .top10-poster {
        width: 50px;
        height: 68px;
    }

    .top10-rank {
        font-size: 30px;
        min-width: 36px;
    }

    .top10-info h4 {
        font-size: 13px;
    }

    .top10-dl {
        font-size: 10px;
        padding: 5px 8px;
    }
}

@media (max-width: 360px) {
    .top10-Section {
        padding: 20px 8px;
    }

    .top10-card {
        gap: 8px;
        padding: 6px 8px 6px 6px;
    }

    .top10-poster {
        width: 44px;
        height: 60px;
    }

    .top10-rank {
        font-size: 24px;
        min-width: 30px;
    }
}

/* ---------------------------------------------------------
   4) TRENDING PODCASTS — Prev / Next arrow buttons
   Mirrors the styling of the Trending section's .nav-btn67
   arrows so both carousels feel consistent.
--------------------------------------------------------- */
.podcast-nav-wrapper {
    position: relative;
}

.pod-nav-btn {
    position: absolute;
    top: 42%;
    transform: translateY(-50%);
    z-index: 10;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: none;
    background-color: #6c2bd9;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .3);
    transition: .3s;
}

.pod-nav-btn:hover {
    background-color: #1e3a8a;
    transform: translateY(-50%) scale(1.1);
}

.pod-nav-btn.prev {
    left: 2px;
}

.pod-nav-btn.next {
    right: 2px;
}

.podcast-Section.dark-mode .pod-nav-btn {
    background-color: #6c2bd9;
    color: #fff;
}

@media (max-width: 480px) {
    .pod-nav-btn {
        width: 34px;
        height: 34px;
    }

    .pod-nav-btn.prev {
        left: 0;
    }

    .pod-nav-btn.next {
        right: 0;
    }
}

/* =========================================================
   5) GLOBAL DARK MODE — full-page coverage, no white gaps
   The dark-mode toggle historically only added ".dark-mode"
   to a list of inner containers and never to <html>/<body>
   themselves, so the real page background (and any container
   not on that list, e.g. .main-content, .mobile-menu) stayed
   light. These rules make the toggle cover the whole page.
   (scripts/fixes.js keeps html/body in sync with the toggle.)
   ========================================================= */
html.dark-mode,
body.dark-mode {
    background-color: #0a0a0a !important;
    color: #fff;
}

body.dark-mode .main-content,
body.dark-mode .page-content,
body.dark-mode .podcast-nav-wrapper {
    background-color: transparent;
}

body.dark-mode .mobile-menu {
    background-color: #0a0a0a;
    color: #fff;
}

body.dark-mode .mobile-menu-content ul li a,
body.dark-mode .mobile-menu h2 {
    color: #fff;
}

/* ---------------------------------------------------------
   6) TOP 10 MOVIES — keep header / numbers clear of the
   fixed left sidebar at every breakpoint (sidebar widths:
   50px desktop, 30px <=768px, 35px <=576px).
--------------------------------------------------------- */
.top10-Section {
    margin-left: 60px;
    width: auto;
    box-sizing: border-box;
}

.top10-header {
    flex-wrap: wrap;
}

.top10-header h2 {
    max-width: 100%;
}

@media (max-width: 768px) {
    .top10-Section {
        margin-left: 44px;
    }
}

@media (max-width: 576px) {
    .top10-Section {
        margin-left: 46px;
    }
}

@media (max-width: 430px) {
    .top10-Section {
        margin-left: 48px;
        padding-left: 10px;
    }
}

/* ---------------------------------------------------------
   7) TOP 10 MOVIES — responsive grid columns
   1 column on phones, 2 on tablets, 3-4 on desktop.
   (Loaded after jt.css's own breakpoints, so these win.)
--------------------------------------------------------- */
@media (max-width: 599px) {
    .top10-grid {
        grid-template-columns: 1fr;
    }
}

@media (min-width: 600px) and (max-width: 1023px) {
    .top10-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 1024px) and (max-width: 1439px) {
    .top10-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

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

/* ---------------------------------------------------------
   8) TRENDING SECTION — bring back the </> arrows on small
   phones / iPhones (jt.css hides .nav-btn67 below 480px).
   Re-shown here, resized and repositioned so they stay on
   screen and are easy to tap.
--------------------------------------------------------- */
@media (max-width: 480px) {
    .nav-btn67 {
        display: flex !important;
        width: 32px;
        height: 32px;
        margin-left: 0;
    }

    .nav-btn67.prev {
        left: 4px;
        margin-left: 0;
    }

    .nav-btn67.next {
        right: 4px;
        margin-right: 0;
    }

    .nav-btn67 i {
        font-size: 14px;
    }

    .touch-indicator67 {
        display: none;
    }
}

@media (min-width: 481px) and (max-width: 767px) {
    .nav-btn67.next {
        margin-right: 0;
        right: 8px;
    }

    .nav-btn67.prev {
        margin-left: 0;
        left: 8px;
    }
}

/* ---------------------------------------------------------
   9) Podcast + trending cards — never overflow tiny screens
--------------------------------------------------------- */
@media (max-width: 380px) {
    .pod-card {
        width: clamp(120px, 40vw, 155px);
    }

    .movie-card67 {
        width: clamp(120px, 40vw, 140px);
    }
}

.popular-movies-grid67,
.podcast-scroll-row {
    touch-action: pan-x;
    scroll-snap-type: x proximity;
}

.pod-card,
.movie-card67 {
    scroll-snap-align: start;
}

/* ---------------------------------------------------------
   10) DMCA BOX — fully responsive & visible on every device
   Same root cause as the Top 10 section: .dmca-box had no
   margin-left, so its left edge (and on desktop, part of its
   background) sat directly behind the fixed sidebar. It also
   had only one breakpoint (768px), so very small phones got
   no extra shrinking. This clears the sidebar at every width
   and scales text/padding down smoothly to ~280px screens.

   NOTE: margin-left is set to match the sidebar's own width
   exactly (50px desktop / 30px <=768px / 35px <=576px) — no
   extra buffer — so the dark box background sits flush against
   the sidebar with no light body-colored sliver ("white
   border") between them. Breathing room for the text comes
   from padding-left instead, which stays inside the dark box.
--------------------------------------------------------- */
.dmca-box {
    margin-left: 50px;
    width: auto;
    box-sizing: border-box;
    overflow-wrap: break-word;
    padding-left: 24px;
    border: none;
    outline: none;
}

.dmca-box h4,
.dmca-box p {
    box-sizing: border-box;
    max-width: 100%;
    border: none;
}

@media (max-width: 768px) {
    .dmca-box {
        margin-left: 30px;
        padding-left: 18px;
    }
}

@media (max-width: 576px) {
    .dmca-box {
        margin-left: 35px;
        padding-left: 16px;
    }
}

@media (max-width: 430px) {
    .dmca-box {
        margin-left: 35px;
        padding: 18px 14px 18px 14px;
    }

    .dmca-box h4 {
        font-size: 19px;
        margin-bottom: 8px;
    }

    .dmca-box p {
        font-size: 12.5px;
        line-height: 1.55;
        padding: 0 6px;
    }
}

@media (max-width: 360px) {
    .dmca-box {
        margin-left: 35px;
        padding: 16px 10px 16px 12px;
    }

    .dmca-box h4 {
        font-size: 17px;
    }

    .dmca-box p {
        font-size: 12px;
        line-height: 1.5;
        padding: 0 4px;
    }
}

@media (max-width: 320px) {
    .dmca-box {
        margin-left: 35px;
        padding: 14px 8px 14px 10px;
    }

    .dmca-box h4 {
        font-size: 16px;
    }

    .dmca-box p {
        font-size: 11.5px;
    }
}

body.dark-mode .dmca-box {
    background-color: #0a0a0a;
    border: none;
}