/*
 * ── TV MODE (10-foot UI) ────────────────────────────────────────────────
 * Applied when body has class="tv-mode".
 * Optimised for remote control navigation on Smart TVs, Fire Sticks,
 * Roku, Android TV, LG WebOS, Samsung Tizen, etc.
 */

/* ── Base scale & typography ───────────────────────────────────────────── */
body.tv-mode {
    font-size: 18px;
    cursor: none;          /* hide mouse cursor on TV */
}

/* ── TV top bar (always-visible mode indicator) ───────────────────────── */
#ym-tv-badge {
    position: fixed;
    bottom: 20px;
    right: 24px;
    background: rgba(229,9,20,.85);
    color: #fff;
    font-size: .7rem;
    font-weight: 800;
    letter-spacing: .1em;
    padding: 5px 12px;
    border-radius: 20px;
    z-index: 9998;
    display: flex;
    align-items: center;
    gap: 6px;
    backdrop-filter: blur(4px);
    box-shadow: 0 2px 16px rgba(0,0,0,.6);
    pointer-events: none;
}
#ym-tv-badge svg { width: 14px; height: 14px; fill: #fff; }

/* ── D-pad navigation tooltip ─────────────────────────────────────────── */
#ym-tv-hint {
    position: fixed;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(0,0,0,.82);
    color: #aaa;
    font-size: .7rem;
    padding: 6px 16px;
    border-radius: 20px;
    z-index: 9997;
    border: 1px solid #222;
    pointer-events: none;
    opacity: 0;
    transition: opacity .4s;
}
#ym-tv-hint.show { opacity: 1; }

/* ── Focus ring — the most important TV UX element ────────────────────── */
body.tv-mode *:focus {
    outline: none !important;
}
body.tv-mode .ym-tv-focus {
    outline: 3px solid #e50914 !important;
    outline-offset: 3px !important;
    box-shadow: 0 0 0 6px rgba(229,9,20,.25), 0 0 24px rgba(229,9,20,.4) !important;
    border-radius: 6px;
    z-index: 10;
    position: relative;
}
body.tv-mode .ym-tv-focus .movie-thumb-wrap,
body.tv-mode a.movie-card.ym-tv-focus .movie-thumb-wrap {
    box-shadow: 0 0 0 3px #e50914, 0 0 32px rgba(229,9,20,.5) !important;
}

/* ── Navbar ────────────────────────────────────────────────────────────── */
body.tv-mode #site-nav {
    padding: 6px 24px;
    background: linear-gradient(90deg, #0a0000 0%, #0d0d0d 100%) !important;
    border-bottom: 2px solid #e50914;
}
body.tv-mode #site-nav .navbar-brand {
    font-size: 2rem;
}
body.tv-mode #site-nav .nav-link {
    font-size: 1rem;
    padding: .5rem 1rem;
    border-radius: 6px;
}
body.tv-mode #site-nav .nav-link.ym-tv-focus {
    background: rgba(229,9,20,.15);
    color: #fff !important;
}
/* Hide mobile hamburger on TV */
body.tv-mode .ym-hamburger,
body.tv-mode .d-flex.d-lg-none { display: none !important; }
/* Always show desktop nav on TV */
body.tv-mode #navMenu { display: flex !important; }

/* ── Movie cards ───────────────────────────────────────────────────────── */
body.tv-mode .movie-card.ym-tv-focus {
    transform: scale(1.08) translateY(-6px) !important;
    z-index: 20;
}
body.tv-mode .movie-card.ym-tv-focus .movie-overlay { opacity: 1 !important; }
body.tv-mode .movie-card.ym-tv-focus .movie-play { transform: scale(1.15) !important; }
body.tv-mode .movie-thumb-wrap { border-radius: 8px; }
body.tv-mode .movie-title { font-size: .95rem; font-weight: 700; }
body.tv-mode .movie-year  { font-size: .78rem; }
body.tv-mode .movie-info  { padding-top: 6px; }

/* ── Buttons ───────────────────────────────────────────────────────────── */
body.tv-mode .btn {
    min-height: 44px;
    font-size: 1rem;
    padding: .55rem 1.2rem;
    border-radius: 8px;
}
body.tv-mode .btn.ym-tv-focus {
    background: #e50914 !important;
    border-color: #e50914 !important;
    color: #fff !important;
}
body.tv-mode .server-btn { min-height: 40px; font-size: .9rem; }
body.tv-mode .server-btn.ym-tv-focus {
    background: #e50914 !important;
    border-color: #e50914 !important;
    color: #fff !important;
}

/* ── Section headings ──────────────────────────────────────────────────── */
body.tv-mode h2, body.tv-mode h3, body.tv-mode h4, body.tv-mode h5 {
    font-size: 1.4rem !important;
}
body.tv-mode .section-title { font-size: 1.5rem; }

/* ── Content grid — bigger cards on TV ─────────────────────────────────── */
body.tv-mode .row.row-cols-2   { --bs-columns: 3 !important; }
body.tv-mode .row.row-cols-lg-5,
body.tv-mode .row.row-cols-lg-6 { --bs-columns: 4 !important; }

/* ── Watch page — player shell ─────────────────────────────────────────── */
body.tv-mode .ym-shell { box-shadow: 0 0 0 3px rgba(229,9,20,.3); }
body.tv-mode .ym-serverbar { padding: 12px 18px; gap: 10px; }
body.tv-mode .ym-topbar { min-height: 52px; }
body.tv-mode .ym-topbar-btn { font-size: 1.2rem; padding: 6px 10px; }
body.tv-mode #ym-cast-btn,
body.tv-mode #ym-topbar-cast { font-size: 1.1rem; }

/* ── Controls (native player) ──────────────────────────────────────────── */
body.tv-mode .ym-ctrl { opacity: 1 !important; }   /* always show on TV */
body.tv-mode .ym-ctrl-bar { height: 56px; }
body.tv-mode .ym-cbtn { width: 48px; height: 48px; font-size: 1.2rem; }
body.tv-mode #ym-native-wrap:hover .ym-ctrl { opacity: 1 !important; }

/* ── Similar / sidebar cards ───────────────────────────────────────────── */
body.tv-mode .similar-card { padding: 10px; }
body.tv-mode .similar-card.ym-tv-focus { background: rgba(229,9,20,.1); border-color: #e50914; }
body.tv-mode .similar-card img { border-radius: 6px; }

/* ── Auth forms ─────────────────────────────────────────────────────────── */
body.tv-mode .auth-card { max-width: 560px; padding: 2.5rem; }
body.tv-mode .form-control { font-size: 1.1rem; height: 52px; border-radius: 8px; }
body.tv-mode .form-label   { font-size: 1rem; }
body.tv-mode .form-control.ym-tv-focus { border-color: #e50914 !important; box-shadow: 0 0 0 3px rgba(229,9,20,.25) !important; }

/* ── Dropdowns ──────────────────────────────────────────────────────────── */
body.tv-mode .dropdown-item { padding: .7rem 1.2rem; font-size: .95rem; }
body.tv-mode .dropdown-item.ym-tv-focus { background: rgba(229,9,20,.15) !important; color: #fff !important; }

/* ── Footer ─────────────────────────────────────────────────────────────── */
body.tv-mode footer { font-size: 1rem; }

/* ── Genre / tag badges ─────────────────────────────────────────────────── */
body.tv-mode .badge { font-size: .75rem; padding: .4em .75em; }

/* ── Episode panel (show page) ──────────────────────────────────────────── */
body.tv-mode .ep-item { padding: 12px 14px; }
body.tv-mode .ep-item.ym-tv-focus { background: rgba(229,9,20,.12) !important; border-color: #e50914 !important; }

/* ── Scroll snap for content rows (makes D-pad scroll feel snappy) ───────── */
body.tv-mode .content-scroll-row {
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
}
body.tv-mode .content-scroll-row > * {
    scroll-snap-align: start;
}

/* ── TV cursor (optional: large crosshair when mouse moves) ─────────────── */
body.tv-mode.tv-cursor-active { cursor: default !important; }