/* ==========================================================================
   GLOBAL & LIVE TV LAYOUT
   ========================================================================== */
* {
    margin: 0; padding: 0; box-sizing: border-box;
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

body.livetv-page {
    height: 100vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    background-color: #141414;
}

video#videoPlayer {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.fixed-header-section {
    flex-shrink: 0; /* Prevent this from squishing */
    background-color: #141414;
    z-index: 100;
}

.live-tv-container {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.content-container {
    padding: 0 50px;
}

/* Fullscreen Override */
.player-section.fullscreen {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: 9999;
    border-radius: 0;
}

video.fullscreen {
    width: 100%;
    height: 100%;
    object-fit: contain; /* Or 'fill' depending on preference */
}

.hide { display: none; }

/* ==========================================================================
   TOP SECTION
   ========================================================================== */
.header-action-row { padding: 20px 50px; flex-shrink: 0; }

.back-home-btn {
    background-color: rgba(255, 255, 255, 0.1);
    color: #fff;
    border: 2px solid transparent;
    padding: 10px 25px;
    border-radius: 50px;
    outline: none;
    font-size: 16pt !important;
    cursor: pointer;
}

.back-home-btn:focus { background-color: #fff; color: #000; transform: scale(1.05); }

.top-feature-container {
    display: flex; gap: 20px; padding: 0 50px; height: 35vh; flex-shrink: 0; margin-bottom: 20px;
}

.banner-section { flex: 2; position: relative; border-radius: 12px; overflow: hidden; background-color: #222; }
.banner-bg { width: 100%; height: 100%; object-fit: cover; opacity: 0.7; }

.player-section { flex: 1.2; background: #000; border-radius: 12px; overflow: hidden; position: relative; }

/* ==========================================================================
   CONTENT & NAVIGATION
   ========================================================================== */
#channel-rows-placeholder {
    flex-grow: 1; /* Take up remaining space */
    overflow-y: hidden;
    padding: 0 50px 50px 50px;
    scrollbar-width: none; /* Hide scrollbar for TV */
    padding: 0 60pt;
}

.filter-row { color: #ffffff; display: flex; overflow: hidden; scrollbar-width: none; gap: 10px; }
.lang-text {
    font-size: 50pt;    /* Large enough for 10-foot UI legibility */
    line-height: 1.2;   /* CRITICAL: Prevents top/bottom clipping of Indic scripts */
    font-weight: bold;
    
    /* Fallback fonts ensure rendering if standard system fonts fail */
    font-family: 'Noto Sans', 'Malgun Gothic', 'Apple SD Gothic Neo', sans-serif;
    
    display: flex;
    align-items: center;
    justify-content: center;
    
    /* Slight padding helps ensure tall characters don't hit the borders */
    padding: 4px;
}

.filter-row .lang-sub {
    font-size: 14pt;
}

.filter-item-large {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 150px;       /* Adjust based on your layout grid */
    height: 150px;
    margin: 2px;
    border-radius: 8px;
    background-color: #2a2a2a;
    color: #ffffff;
    cursor: pointer;
    transition: transform 0.2s ease, background-color 0.2s ease;
    /* Prevent default TV browser outlines */
    outline: none; 
}

.filter-item-large:focus,
.filter-item-large.focused,
.filter-item-large.selected {
    background-color: #e50914; /* Example highlight color */
    transform: scale(1.1);     /* Pop-out effect for TV remotes */
    color: #ffffff;
    border-radius: 8px;
    box-shadow: 0 4px 15px rgba(229, 9, 20, 0.5);
}

.filter-item-large:focus .lang-sub {
    color: #ffffff;
}

.row-title { margin: 30px 0 10px 0; font-size: 1.4rem; color: #FFF; font-size: xx-large; }

.content-row {
    display: flex; gap: 20px; overflow-x: hidden; padding: 15px 0; scrollbar-width: none;
}

.channel-item {
    width: 250px; height: 145px; border-radius: 16px;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0; border: 6px solid transparent; transition: 0.1s; overflow: hidden;
}

.channel-item img {
    max-width: 100%; max-height: 100%; object-fit: contain; padding: 0px;
}

.channel-item:focus { border: 5px solid #e50914; transform: scale(1.1); outline: none; z-index: 10; }

.content-info { display: none; } /* Hidden unless focused or needed */