/* CSS Variables & Base Styles */
:root {
    --bg-color: #050505;
    --panel-bg: #111111;
    --sidebar-bg: #1a1a1a;
    --text-main: #ffffff;
    --text-muted: #aaaaaa;
    --primary: #e50914;
 /* Red accent */
    --primary-hover: #f40612;
    --border: #333333;
}

        /* --- GLOBAL THEMED SCROLLBARS --- */

        /* 1. Define the width and height of the scrollbar */
::-webkit-scrollbar {
    width: 10px;
  /* Vertical bar width */
    height: 10px;
 /* Horizontal bar height (this fixes your white bar) */
    ;
}

        /* 2. Style the background 'track' of the scrollbar */
::-webkit-scrollbar-track {
    background: var(--bg-color);
 /* Makes it pure black to match your background */
    ;
}

        /* 3. Style the draggable 'thumb' part */
::-webkit-scrollbar-thumb {
    background: #333;
 /* Dark gray thumb */
    border-radius: 10px;
    border: 2px solid var(--bg-color);
 /* Adds a little gap around the thumb */
    ;
}

        /* 4. Change color when hovering over the thumb */
::-webkit-scrollbar-thumb:hover {
    background: #555;
}

        /* 5. Support for Firefox */
* {
    scrollbar-width: thin;
    scrollbar-color: #333 #050505;
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
        /* Reserves space for the scrollbar even on short pages */
    scrollbar-gutter: stable;
}

html, body {
    height: 100%;
    margin: 0;
    padding: 0;
}

body {
    display: flex;
    flex-direction: column;
    background-color: var(--bg-color);
    color: var(--text-main);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    overflow-x: hidden;
}

        /* Navigation Bar */
header {
    display: flex;
    align-items: center;
    padding: 1rem 2rem;
    background-color: #000;
    border-bottom: 1px solid var(--border);
    position: sticky;
    top: 0;
    z-index: 4000;
}

.logo {
    display: flex;
    align-items: center;
    margin-right: 3rem;
    cursor: pointer;
}
        
        /* THE FIX: Control the size of your new image logo */
.logo img {
    height: 35px;
 /* You can change this number to make the logo bigger or smaller! */
    width: auto;
    object-fit: contain;
}

/* Navigation Gap Adjustment */
nav {
    display: flex;
    gap: 0.5rem;
    align-items: center;
    flex-grow: 1;
}

/* Transform navigation links into visible, centered pills by default */
nav a {
    text-decoration: none;
    font-size: 0.85rem;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
    /* Perfect Center-Middle Alignment */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 30px;
    box-sizing: border-box;
    /* THE FIX: Strip inherited line-height and nudge the text down optically */
    line-height: 1;
    padding: 2px 1.2rem 0 1.2rem;
 /* 2px top padding, 0 bottom padding */
    /* Permanent subtle pill styling */
    background-color: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--border);
    border-radius: 9999px;
    color: var(--text-muted) !important;
}

/* Hover state for all pills */
nav a:hover {
    color: white !important;
    background-color: rgba(255, 255, 255, 0.12);
    border-color: #555;
}

/* Active standard pill state (Solid Red background) */
nav a.active {
    color: white !important;
    font-weight: bold;
    background-color: var(--primary);
    border-color: var(--primary);
}

/* Special default style for $ Earn tab (Gold text) */
#monetize-nav-link {
    color: #f1c40f !important;
    font-weight: bold;
}

/* Remove old underline effect */
nav a.active::after {
    display: none !important;
}

/* ========================================= */
/* --- CSS-ONLY NAVIGATION DROPDOWN ---      */
/* ========================================= */
.nav-dropdown {
    position: relative;
    display: inline-block;
}

.nav-dropdown-content {
    display: none;
    position: absolute;
    top: calc(100% + 6px);
 /* Aligns slightly below the button */
    left: 0;
    background-color: #111111;
    border: 1px solid var(--border);
    border-radius: 8px;
    box-shadow: 0px 8px 24px rgba(0, 0, 0, 0.9);
    min-width: 170px;
    z-index: 1000;
    padding: 6px;
}

/* Show dropdown on hover */
.nav-dropdown:hover .nav-dropdown-content {
    display: block;
}

/* Override standard pill menu styles for links inside the dropdown */
.nav-dropdown-content .nav-link {
    display: inline-flex;
    align-items: center;
          /* 🟢 Aligns the icons and text on the same middle line */
    gap: 10px;
                    /* 🟢 Adds beautiful, consistent spacing after the icons */
    width: 100%;
    height: auto !important;
    line-height: 1.5 !important;
    padding: 10px 14px !important;
    border-radius: 4px !important;
    background-color: transparent !important;
    border: none !important;
    color: var(--text-muted) !important;
    justify-content: flex-start !important;
    box-sizing: border-box;
    border-top: 1px solid rgba(255, 255, 255, 0.06) !important;
}

/* 🟢 Removes the top separator line from the first item ("Genre") so the top stays perfectly clean */
.nav-dropdown-content .nav-link:first-child {
    border-top: none !important;
}

/* Dropdown item active state adjustments */
.nav-dropdown-content .nav-link.active {
    color: white !important;
    font-weight: bold !important;
    background-color: rgba(229, 9, 20, 0.1) !important;
 /* Soft red tint */
    border-left: 3px solid var(--primary) !important;
    border-radius: 0 4px 4px 0 !important;
 /* Matches your new item border-radius */
    ;
}

/* Dropdown item hover action */
.nav-dropdown-content .nav-link:hover {
    background-color: rgba(255, 255, 255, 0.08) !important;
    color: white !important;
}

/* Dropdown Button active overrides */
.nav-dropdown:hover .dropdown-btn {
    background-color: rgba(255, 255, 255, 0.12) !important;
    color: white !important;
    border-color: #555 !important;
}

/* 🟢 THE INVISIBLE BRIDGE: Fills the empty gap so the mouse never triggers a "mouseleave" event when moving down! */
.nav-dropdown-content::before {
    content: '';
    position: absolute;
    top: -8px;
          /* Bridges the 6px gap and slightly overlaps the button */
    left: 0;
    width: 100%;
    height: 8px;
        /* Extends upwards invisibly */
    background: transparent;
 /* Completely invisible to the user */
    pointer-events: auto;
    /* Crucial: ensures it catches mouse movement */
    ;
}

/* Center-aligned circular container for the Notification Bell */
#notif-bell-container {
    position: relative;
    cursor: pointer;
    width: 38px;
    height: 30px;
 /* CHANGED: Lowered from 38px to match nav pill heights exactly */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 9999px;
 /* CHANGED: Pill shape looks cleaner inline than a circle */
    background-color: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--border);
    transition: all 0.2s;
    box-sizing: border-box;
}

#notif-bell-container:hover {
    background-color: rgba(255, 255, 255, 0.12);
    border-color: #555;
}

/* Center-aligned circular container for the Settings Gear */
#admin-settings-gear {
    width: 38px;
    height: 30px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 9999px;
    background-color: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--border);
    transition: all 0.2s;
    box-sizing: border-box;
    color: var(--text-muted);
    /* THE FIX: Emojis need a slightly stronger push to center perfectly */
    line-height: 1;
    padding: 3px 0 0 0;
 /* 3px top padding, 0 horizontal padding */
    ;
}

#admin-settings-gear:hover {
    background-color: rgba(255, 255, 255, 0.12);
    border-color: #555;
    color: white;
}

#notif-bell-icon {
    font-size: 1.1rem;
 /* Slightly reduced to prevent layout stretching */
    line-height: 1;
    /* Strips out font dead space padding */
    display: flex;
    align-items: center;
    justify-content: center;
}

.search-bar {
    background-color: var(--sidebar-bg);
    border: 1px solid var(--border);
    border-radius: 20px;
    padding: 0 1.5rem;
 /* CHANGED: Removed top/bottom padding to let line-height take over */
    height: 40px;
      /* CHANGED: Forces the search bar to lock to the exact same 30px height */
    line-height: 30px;
    color: white;
    width: 320px;
    box-sizing: border-box;
}
         /* This pushes the footer to the bottom */
main {
    flex: 1;
 /* This is the magic line that fills empty space */
    padding: 2rem;
    max-width: 1250px;
    margin: 0 auto;
    width: 100%;
}

.view-section {
    display: none;
}

.view-section.active {
    display: block;
}

        /* --- Home View --- */
        /* --- Home View (New Hero Layout) --- */
.hero-grid {
    display: grid;
    grid-template-columns: 2fr 1fr;
 /* Left side wider than right */
    gap: 1.5rem;
    margin-bottom: 3rem;
}

/* Main Featured Card (Left) */
.hero-main {
    background-color: var(--panel-bg);
    border-radius: 12px;
    padding: 1.5rem;
    display: flex;
    gap: 2rem;
 /* Increased spacing */
    align-items: center;
 /* Keeps everything looking neat and centered vertically */
    ;
}

.hero-main .tags {
    display: flex;
    flex-wrap: wrap;
    max-width: 450px;
 /* Limits the width so tags wrap into rows */
    gap: 8px;
    margin-bottom: 1rem;
}

.hero-main-info {
    display: flex;
    flex-direction: column;
    height: 100%;
    flex-grow: 1;
}

.hero-main-info h1 {
    margin-bottom: 1rem;
    font-size: 1.8rem;
}

/* 🟢 ADD THIS RULE: This forces the plain parent <div> in app.js to stretch and fill the space */
.hero-main-info > div:first-child {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    min-height: 0;
}

/* Side Cards Column (Right) */
.hero-side {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

/* 1. Collapsed State: Perfect Line Clamping & No Slicing */
.hero-desc-container {
    display: -webkit-box;
    -webkit-line-clamp: 8;
 /* 🟢 Increased from 5 to 8 lines to fill up the empty space! */
    -webkit-box-orient: vertical;
    overflow: hidden;
    color: var(--text-muted);
    font-size: 0.9rem;
    line-height: 1.5;
    margin-bottom: 10px;
    padding-right: 15px;
 /* Leaves clean breathing room for the scrollbar */
    transition: all 0.3s ease;
}

/* 2. Expanded State: Elegant Scrolling with Bottom Fade Out */
.hero-desc-container.expanded {
    display: block;
    height: 220px;
    overflow-y: auto;
    padding-bottom: 40px; /* 🟢 Cushion pushes text above the fade-out zone when scrolled to the end */
    
    /* Subtle bottom fade-out edge */
    mask-image: linear-gradient(to bottom, black 90%, transparent 100%);
    -webkit-mask-image: linear-gradient(to bottom, black 90%, transparent 100%);
}

/* 3. Modern, Ultra-Thin Scrollbar */
.hero-desc-container::-webkit-scrollbar {
    width: 4px;
 /* Super thin & elegant */
    ;
}

.hero-desc-container::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.01);
 /* Nearly invisible track */
    ;
}

.hero-desc-container::-webkit-scrollbar-thumb {
    background: #333;
 /* Blends with your dark theme */
    border-radius: 10px;
}

.hero-desc-container::-webkit-scrollbar-thumb:hover {
    background: var(--primary);
 /* Glows ATVEO red on hover */
    ;
}

/* 4. Elegant See More Button */
.see-more-btn {
    background: none;
    border: none;
    color: var(--primary);
    font-size: 0.82rem;
    font-weight: bold;
    cursor: pointer;
    padding: 0;
    margin-bottom: 10px;
    display: inline-block;
    transition: color 0.2s, transform 0.2s;
}

.see-more-btn:hover {
    color: white;
    text-decoration: none;
    transform: translateX(3px);
 /* Subtle shift right to feel interactive */
    ;
}

        /* Side Cards Column (Right) */
.side-card {
    background-color: var(--panel-bg);
    border-radius: 12px;
    padding: 1rem;
    display: flex;
    gap: 1rem;
    flex: 1;
    overflow: hidden;
            /* Removed cursor: pointer from here */
    ;
}

.side-card img {
    width: 120px;
 /* 🟢 Increased from 100px */
    border-radius: 6px;
    object-fit: cover;
    aspect-ratio: 3 / 4;
    cursor: pointer;
}
        /* --- Hero Side Card Badge Fix --- */
.hero-side .side-card {
    position: relative;
 /* Allows badges to sit on top of the card */
    ;
}

        /* If your side card uses a specific wrapper for the image, use this: */
.side-card .hero-img-zoom-wrap {
    position: relative;
    width: 120px;
 /* Matches your existing side-card img width */
    height: 190px;
 /* Matches your 3:4 aspect ratio */
    flex-shrink: 0;
}

.side-info h3 {
    font-size: 1rem;
    margin-bottom: 0.5rem;
}

.side-info p {
    color: var(--text-muted);
    font-size: 0.8rem;
    line-height: 1.4;
            /* Truncates text with an ellipsis if it gets too long */
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 1rem;
}

.tag {
    background-color: #333;
    padding: 0.3rem 0.8rem;
    border-radius: 15px;
    font-size: 0.8rem;
    color: var(--text-muted);
    cursor: pointer;
 /* Makes it a clickable finger */
    transition: background-color 0.2s, color 0.2s;
 /* Smooth color change */
    margin-right: 8px;
}
        
        /* Adds a red highlight when hovering over the tag */
.tag:hover {
    background-color: var(--primary);
    color: white;
}

.desc {
    color: var(--text-muted);
    line-height: 1.5;
    margin-bottom: 1.5rem;
    font-size: 0.9rem;
}

.btn-play {
    background-color: var(--primary);
    color: white;
    border: none;
    padding: 0.8rem 2rem;
    border-radius: 25px;
    font-size: 1rem;
    font-weight: bold;
    cursor: pointer;
    width: fit-content;
}

.section-title {
    display: inline-flex;
          /* Shrink-wraps the background to the text */
    align-items: center;
    gap: 8px;
                      /* Align emojis/icons neatly */
    padding: 0.4rem 1.4rem;
        /* Custom pill margins */
    border-radius: 9999px;
         /* Forces a perfect capsule pill shape */
    background-color: var(--primary);
 /* ATVEO Theme Red */
    color: white !important;
    font-weight: bold;
    font-size: 0.95rem;
            /* Refined text size inside the pill */
    margin-bottom: 1.5rem;
    scroll-margin-top: 20px;
      /* Safety offset for sticky header */
    box-shadow: 0 4px 15px rgba(229, 9, 20, 0.2);
 /* Soft underglow */
    ;
}

.movie-grid {
    display: grid;
            /* 135px works perfectly for a square icon layout */
    grid-template-columns: repeat(auto-fill, minmax(135px, 1fr));
    gap: 1.2rem;
    row-gap: 2.5rem;
}
        /* Movie Grids */
.movie-card {
    transition: transform 0.2s;
    height: auto !important;
      /* Forces the card to grow with its text */
    display: flex;
    flex-direction: column;
    overflow: visible !important;
 /* Ensures bottom text isn't clipped */
            margin-bottom: 10px;          /* Extra safety space */
        }
        .movie-card img { 
            width: 100%; aspect-ratio: 3 / 4; object-fit: cover; 
            border-radius: 8px; margin-bottom: 0.5rem; 
            cursor: pointer; /* Added here instead */
        }
        /* Provide vertical room in the search result grid */
        #home-search-grid {
            row-gap: 40px !important; /* Increases space between row 1 and row 2 */
            margin-top: 25px;         /* Adds space between the "X results found" text and the first row */
        }

        /* FIXED: Titles will now show two full lines clearly without bottom clipping */
        .movie-card h3 {
            font-size: 0.85rem;
            line-height: 1.4;       /* Increased line height so letters don't overlap */
    margin-top: 10px;
    margin-bottom: 5px;
     /* Added a tiny bit more space below the title */
    color: white;
    font-weight: 600;
    display: -webkit-box;
    -webkit-line-clamp: 2;
  /* Automatically adds '...' if it goes over 2 lines */
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: 2.4rem;
     /* Keeps the grid perfectly aligned even if a title is only 1 line */
    height: auto;
           /* REMOVED the rigid height that was chopping the text! */
    cursor: pointer;
}

        /* This targets the div containing the Star and 5.0 (1) */
.movie-card div:nth-of-type(2) {
    margin-top: 5px;
        /* Adds space between the title and the stars */
    display: flex;
    align-items: center;
    gap: 4px;
}

        /* This targets the Category/Tag list line */
.movie-card div[style*="font-size: 0.7rem"], 
        .movie-card div[style*="font-size: 0.65rem"] {
    margin-top: 5px;
    color: #777;
    font-size: 0.75rem !important;
    line-height: 1.4;
             /* Increased from 1.2 to 1.4 */
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    padding-bottom: 5px;
          /* Adds a buffer at the very bottom */
    ;
}

#home-search-grid .movie-card div {
    margin-top: 2px;
    color: #777;
           /* Subtler color to look more like the mockup */
    font-size: 0.75rem !important;
 /* Increased slightly for clarity */
    font-weight: 500;
            /* REMOVED: Rigid 'height: 18px' to prevent clipping */
    height: auto;
    line-height: 1.5;
      /* More vertical space between text rows */
            /* PREVENTS SIDEWAYS OVERFLOW: Cuts long tag lists into one line with "..." */
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
            /* This adds enough padding at the bottom so letter tails aren't cut */
            padding-bottom: 2px;
        }

        /* --- Updated Genre View Sidebar --- */
        .genre-layout { 
            display: flex; 
            gap: 2rem; 
            align-items: flex-start; /* Keeps the sidebar at the top */
            min-height: 100vh;       
        }

        .genre-sidebar { 
            width: 220px; 
            flex-shrink: 0; 
            border-right: 1px solid var(--border); 
            padding-right: 1rem; 
    
            position: sticky;
            top: 100px; 
    
            /* CHANGE THIS: Let height adapt, but cap it so the scrollbar still works if needed */
            height: fit-content; 
            max-height: calc(100vh - 150px); 
    
            overflow-y: auto; 
            scrollbar-width: thin; 
        }

        /* Custom Scrollbar for the Sidebar only (Chrome/Safari) */
        .genre-sidebar::-webkit-scrollbar {
            width: 5px;
        }
        .genre-sidebar::-webkit-scrollbar-track {
            background: transparent;
        }
        .genre-sidebar::-webkit-scrollbar-thumb {
            background: #333;
            border-radius: 10px;
        }
        .genre-sidebar::-webkit-scrollbar-thumb:hover {
            background: var(--primary); /* Glow red on hover */
        }

        .genre-sidebar ul { list-style: none; }
        .genre-sidebar li { padding: 0.8rem 0; color: var(--text-muted); cursor: pointer; font-size: 0.95rem; }
        .genre-sidebar li:hover, .genre-sidebar li.active { color: white; font-weight: bold; }
        
        /* Base layout for the video section */
        .main-video-section { 
            flex-grow: 1; 
            transition: max-width 0.3s ease; 
        }
        /* Mode 1: Horizontal (Standard) */
        .main-video-section.horizontal { 
            width: 100%;
            max-width: 890px; /* 🟢 Updated width to 890px */
        }
        .main-video-section.horizontal .video-container { 
            aspect-ratio: 16 / 9; 
            width: 100%;
        }

        /* Mode 2: Vertical (Short Drama) - UNIFIED EQUAL-HEIGHT LAYOUT (620px) */
        .main-video-section.vertical { 
            width: 100%;
            max-width: 890px; 
            display: block;
        }
        

        /* 🟢 SMART AUTO-FORMAT: Force vertical layout if a vertical video file is detected on load */
        .main-video-section.dynamic-vertical {
            width: 100% !important;
            max-width: 890px !important; /* 🟢 Updated from 850px to 890px to match your standard column size */
            display: block !important;
        }
        .main-video-section.vertical .video-container,
        .main-video-section.dynamic-vertical .video-container {
            height: 620px !important;
            max-height: 620px !important;
            aspect-ratio: 9 / 16 !important;
            width: auto !important;
            margin: 0 auto 1.5rem auto !important;
            display: block !important;
        }

        /* Match the sidebar height to the taller vertical video player */
        .player-layout { 
            display: flex; 
            gap: 2rem; 
            align-items: flex-start; /* 🟢 Aligns both columns perfectly to the top line */
            justify-content: center; 
        }
        .player-layout:has(.main-video-section.vertical) .episodes-sidebar,
        .player-layout:has(.main-video-section.dynamic-vertical) .episodes-sidebar {
            height: 620px !important; /* 🟢 Updated from 650px to 620px to match your height */
        }

/* Player View Description Scrollable Container */
.player-desc-container {
    display: -webkit-box;
    -webkit-line-clamp: 5; /* 🟢 Cleanly limits to exactly 5 lines (no sliced text) */
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin-bottom: 5px;
    padding-right: 15px; /* Clean breathing room for the scrollbar */
    transition: all 0.3s ease;
}

/* Expanded State: Bounded height, scrollable, with safety cushion for bottom-fade */
.player-desc-container.expanded {
    display: block; /* Disables line-clamp to allow standard block scrolling */
    max-height: 300px; /* Safe expanded limit so it doesn't push the comment sections too far */
    overflow-y: auto;
    padding-bottom: 40px; /* 🟢 Cushion pushes text above the fade-out zone when scrolled to the end */
    
    /* Subtle bottom fade-out edge */
    mask-image: linear-gradient(to bottom, black 90%, transparent 100%);
    -webkit-mask-image: linear-gradient(to bottom, black 90%, transparent 100%);
}


/* Custom scrollbar for player description box */
.player-desc-container::-webkit-scrollbar {
    width: 4px;
}

.player-desc-container::-webkit-scrollbar-thumb {
    background: #333;
    border-radius: 10px;
}

.player-desc-container::-webkit-scrollbar-thumb:hover {
    background: var(--primary);
}

/* 🟢 Prevents default margins from expanding the scrollHeight calculation */
.player-desc-container p.desc {
    margin: 0 !important;
}

/* Add comfortable breathing room below the buttons row on all layouts */
.interaction-bar {
    margin-bottom: 18px !important;
}

        /* Shared container styles */
.video-container {
    position: relative;
    width: 100%;
    background: #000;
    border-radius: 12px;
    overflow: hidden;
    margin-bottom: 1rem;
    box-shadow: 0 10px 30px rgba(0,0,0,0.6);
}

.video-metadata h2 {
    margin-bottom: 1rem;
    font-size: 1.5rem;
}


        /* 🟢 NEW: WRAPPER TO LOCK NAV BUTTONS TO THE ACTIVE VIDEO HEIGHT ONLY (EXCLUDES METADATA) */
.video-player-wrapper {
    position: relative;
    width: 100%;
}

/* Force the wrapper to center and match vertical 9:16 aspect ratio dimensions [1] */
.main-video-section.vertical .video-player-wrapper,
.main-video-section.dynamic-vertical .video-player-wrapper {
    width: auto !important;
    margin: 0 auto 1.5rem auto !important;
    display: block !important;
    max-width: 348px;
 /* Matches 9:16 aspect ratio at 620px height */
    ;
}

.video-nav-btn {
    position: absolute;
    width: 42px;
    height: 42px;
    background: rgba(15, 15, 15, 0.85);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.15);
    color: #ccc;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 100;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.5);
}

.video-nav-btn:hover {
    background: var(--primary);
 /* Glows ATVEO Red on hover */
    border-color: var(--primary);
    color: white;
    transform: scale(1.1);
}

.video-nav-btn:active {
    transform: scale(0.95);
}

/* --- HORIZONTAL 16:9 MODE POSITIONING (Centered on the middle-right side of the video) --- */
.main-video-section.horizontal .video-nav-btn.prev-btn {
    top: calc(50% - 46px);
 /* Closely stacked in the vertical center of the video player */
    right: 20px;
}

.main-video-section.horizontal .video-nav-btn.next-btn {
    top: calc(50% + 14px);
 /* Closely stacked in the vertical center of the video player */
    right: 20px;
}

/* --- VERTICAL 9:16 MODE POSITIONING (Outside the video frame, in the empty space) --- */
.main-video-section.vertical .video-nav-btn.prev-btn,
.main-video-section.dynamic-vertical .video-nav-btn.prev-btn {
    left: calc(100% + 20px);
 /* Exactly 20px to the right of the vertical video border */
    top: calc(50% - 46px);
  /* Vertically centered next to the video frame */
    ;
}

.main-video-section.vertical .video-nav-btn.next-btn,
.main-video-section.dynamic-vertical .video-nav-btn.next-btn {
    left: calc(100% + 20px);
 /* Exactly 20px to the right of the vertical video border */
    top: calc(50% + 14px);
  /* Vertically centered next to the video frame */
    ;
}

/* Disabled state when at boundaries (Episode 1 or final episode) */
.video-nav-btn:disabled {
    opacity: 0.15 !important;
    cursor: not-allowed;
    pointer-events: none;
}

        /* Adjusted sidebar height and width to match the video player height */
.episodes-sidebar {
    width: 340px;
    background-color: var(--sidebar-bg);
    border-radius: 12px;
    padding: 1rem;
    flex-shrink: 0;
    height: 600px;
 /* 🟢 Keeps a balanced 600px height */
    display: flex;
    flex-direction: column;
}

.episodes-header h3 {
    font-size: 1.1rem;
    margin-bottom: 1rem;
}

.episodes-header h3 span {
    color: var(--text-muted);
    font-weight: normal;
    font-size: 0.9rem;
}

.episode-tabs {
    display: flex;
    gap: 1rem;
    margin-bottom: 1rem;
    border-bottom: 1px solid var(--border);
    padding-bottom: 0.5rem;
}

.episode-tabs button {
    background: none;
    border: none;
    color: var(--text-muted);
    font-size: 0.9rem;
    cursor: pointer;
    padding: 0.2rem 0.5rem;
}

.episode-tabs button.active {
    color: white;
    font-weight: bold;
    border-bottom: 2px solid var(--primary);
}

.episodes-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-auto-rows: 145px;
 /* Creates a taller vertical poster shape */
    gap: 10px;
    overflow-y: auto;
    padding-right: 5px;
    flex: 1;
    min-height: 0;
    align-content: start;
}

        /* Custom Scrollbar for episodes */
.episodes-grid::-webkit-scrollbar {
    width: 6px;
}

.episodes-grid::-webkit-scrollbar-thumb {
    background: #555;
    border-radius: 4px;
}

.episode-card {
    position: relative;
    cursor: pointer;
    border-radius: 6px;
    overflow: hidden;
    height: 100%;
    border: 2px solid transparent;
    transition: border-color 0.2s;
}

.episode-card.playing {
    border-color: var(--primary);
}

.episode-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.7;
    display: block;
}

.episode-card:hover img {
    opacity: 1;
}

.episode-card .ep-number {
    position: absolute;
    bottom: 0;
 /* Snaps the overlay flush to the bottom edge */
    left: 0;
    width: 100%;
    text-align: center;
    font-size: 0.65rem;
    font-weight: bold;
    text-shadow: 1px 1px 2px rgba(0,0,0,1);
 /* Crisper shadow for readability */
    padding: 15px 5px 3px 5px;
    background: linear-gradient(to top, rgba(0,0,0,0.9) 0%, rgba(0,0,0,0) 100%);
    z-index: 15;
}

        /* This keeps the progress bar and ep number visible over the animation */
.episode-card .ep-number, 
        .episode-card .ep-badge, 
        .episode-card .ep-progress-bar {
    z-index: 15;
}

        /* Ensure the inner elements react when the sidebar card is hovered */
.episode-card:hover .hero-img-zoom-wrap img {
    transform: scale(1.12);
 /* Triggers zoom in sidebar */
    ;
}

.episode-card:hover .play-overlay {
    opacity: 1;
 /* Shows play button in sidebar */
    ;
}

.episode-card:hover .play-icon-circle {
    transform: scale(1);
 /* Pops red circle in sidebar */
    ;
}

        /* Social Sidebar */
.social-sidebar {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding-top: 1rem;
}

.social-icon {
    width: 35px;
    height: 35px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    cursor: pointer;
    font-weight: bold;
    font-size: 1.2rem;
    background-color: #333;
}

        /* --- Edit / Upload Panel View --- */
.edit-form-container {
    background-color: var(--panel-bg);
    padding: 2rem;
    border-radius: 12px;
    max-width: 600px;
    margin: 0 auto;
}

.form-group {
    margin-bottom: 1.5rem;
    display: flex;
    flex-direction: column;
}

.form-group label {
    margin-bottom: 0.5rem;
    font-weight: bold;
}

.form-group input, .form-group textarea, .form-group select {
    background-color: #111;
    border: 1px solid var(--border);
    color: white;
    padding: 0.8rem;
    border-radius: 6px;
    font-family: inherit;
}
        /* Make standard text fields fill the container, but IGNORE checkboxes */
.form-group input[type="text"], 
        .form-group input[type="url"], 
        .form-group input[type="number"],
        .form-group select {
    width: 100%;
}

        /* Specifically target the description box to lock horizontal dragging */
.form-group textarea {
    width: 100%;
    resize: vertical;
 /* Allows dragging down, but locks it sideways! */
    min-height: 100px;
}

.btn-submit {
    background-color: var(--primary);
    color: white;
    border: none;
    padding: 1rem;
    border-radius: 6px;
    cursor: pointer;
    width: 100%;
    font-weight: bold;
    font-size: 1rem;
}
        /* --- Custom Alert Modal --- */
.custom-alert-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.85);
    z-index: 9000;
 /* INCREASED from 2000 to 5000 to be above everything */
    justify-content: center;
    align-items: center;
    backdrop-filter: blur(3px);
}
        /* Automatically hide the feed UI when the Analytics modal is open */
#video-insight-modal.active ~ #feed-view #feed-fold-btn {
    display: none !important;
}

.custom-alert-overlay.active {
    display: flex;
}

.custom-alert-box {
    background-color: var(--panel-bg);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 2rem;
    width: 90%;
    max-width: 400px;
    text-align: center;
    box-shadow: 0 10px 40px rgba(0,0,0,0.8);
    animation: popIn 0.3s ease-out;
}

@keyframes popIn {
    from {
        transform: scale(0.8);
        opacity: 0;
    }

    to {
        transform: scale(1);
        opacity: 1;
    }
}

.custom-alert-box h3 {
    color: white;
    margin-bottom: 1rem;
    font-size: 1.5rem;
}

.custom-alert-box p {
    color: var(--text-muted);
    line-height: 1.5;
    margin-bottom: 1.5rem;
}

.custom-alert-btn {
    background-color: var(--primary);
    color: white;
    border: none;
    padding: 0.8rem 2rem;
    border-radius: 25px;
    font-size: 1rem;
    font-weight: bold;
    cursor: pointer;
    width: 100%;
    transition: background-color 0.2s;
}

.custom-alert-btn:hover {
    background-color: var(--primary-hover);
}

        /* --- Video Loading Overlay --- */
.video-loader {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #000;
 /* Pure black to hide the old video instantly */
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 10;
 /* Sits on top of the iframe */
    transition: opacity 0.3s ease;
 /* Smooth fade out */
    ;
}

.video-loader.hidden {
    opacity: 0;
    pointer-events: none;
 /* Lets clicks pass through to the video once hidden */
    ;
}

.spinner {
    width: 50px;
    height: 50px;
    border: 4px solid rgba(255, 255, 255, 0.2);
    border-top-color: var(--primary);
 /* Uses your ATVEO red! */
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

        /* --- Video Watermark (Centered) --- */
.video-watermark {
    position: absolute;
            /* THE FIX: Absolute centering logic */
    top: 5%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 120px;
 /* Increased size slightly for center placement */
    height: auto;
    opacity: 0.2;
 /* Lower opacity works best for a center watermark */
    z-index: 5;
            /* Magic trick: clicks pass through to the video */
    pointer-events: none;
}

.prof-tab {
    flex: 1;
    padding: 15px;
    border: none;
    background: transparent;
    color: #777;
    font-weight: bold;
    cursor: pointer;
    transition: 0.3s;
}

.prof-tab.active {
    color: white;
    background: var(--primary);
}

.prof-tab:hover:not(.active) {
    color: white;
    background: #222;
}

.price-card {
    background: #000;
    border: 1px solid #333;
    padding: 20px;
    border-radius: 10px;
    text-align: center;
    position: relative !important;  /* Anchors top-right badges */
    overflow: hidden !important;   /* Clips badge flush to rounded corners */
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important; /* Aligns Buy buttons at bottom */
    
    /* 🟢 SILKY SMOOTH GPU-ACCELERATED HOVER ANIMATION */
    transition: transform 0.25s cubic-bezier(0.2, 0, 0, 1), border-color 0.25s ease, box-shadow 0.25s ease !important;
    will-change: transform;
}

/* 🟢 SMOOTH CARD HOVER EFFECT */
.price-card:hover {
    transform: translateY(-6px) !important; /* Gentle 6px lift upwards */
    border-color: #f1c40f !important;       /* Subtle gold glow border */
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.8), 0 0 15px rgba(241, 196, 15, 0.15) !important;
}

/* 🟢 HIGHLIGHTED (POPULAR) CARD - FIXED: Removed scale(1.05) jump conflict */
.price-card.highlight {
    border-color: var(--primary) !important;
    background: #0d0202 !important;
    box-shadow: 0 0 20px rgba(229, 9, 20, 0.25) !important; /* Soft red glow */
}

.price-card.highlight:hover {
    transform: translateY(-6px) !important;
    border-color: var(--primary-hover) !important;
    box-shadow: 0 10px 30px rgba(229, 9, 20, 0.45) !important; /* Enhanced hover glow */
}

.price-card.vip {
    border-color: #f1c40f;
}

.price {
    font-size: 1.5rem;
    font-weight: bold;
    color: white;
    margin: 15px 0;
}

.price span {
    font-size: 0.8rem;
    color: #777;
}

.price-list {
    list-style: none;
    margin-bottom: 20px;
    text-align: left;
    font-size: 0.8rem;
}

.price-list li {
    padding: 5px 0;
    border-bottom: 1px solid #1a1a1a;
}

.price-card button {
    width: 100%;
    background: var(--primary);
    color: white;
    border: none;
    padding: 10px;
    border-radius: 5px;
    cursor: pointer;
    font-weight: bold;
    margin-top: auto !important; /* 🟢 LOCKS BUTTON TO BOTTOM BASELINE */
}

/* Gray theme for free/basic plans */
.price-card.standard {
    border-color: #333;
    background: #000;
}

.price-card.standard h4 {
    color: #aaa;
}

/* --- 1. TOP-RIGHT MARKETING RIBBON (Gold for BEST VALUE / POPULAR) --- */
.price-card .plan-badge-ribbon {
    position: absolute !important;
    top: 0 !important;
    right: 0 !important;
    background: linear-gradient(135deg, #f1c40f, #e67e22) !important;
    color: #000000 !important;
    padding: 5px 14px !important;
    font-size: 0.68rem !important;
    font-weight: 900 !important;
    text-transform: uppercase !important;
    border-top-right-radius: 10px !important;
    border-bottom-left-radius: 10px !important;
    border-top-left-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5) !important;
    letter-spacing: 0.5px !important;
    z-index: 10 !important;
}

/* --- 2. GLOWING GREEN BONUS PILL (For +1,000 FREE / 10% EXTRA) --- */
.bonus-pill-tag {
    background: rgba(46, 204, 113, 0.15) !important;
    border: 1px solid rgba(46, 204, 113, 0.4) !important;
    color: #2ecc71 !important;
    font-size: 0.78rem !important;
    font-weight: 800 !important;
    padding: 4px 14px !important;
    border-radius: 14px !important;
    display: inline-block !important;
    letter-spacing: 0.3px !important;
    box-shadow: 0 0 10px rgba(46, 204, 113, 0.15) !important;
}

/* --- SLEEK DARK GLASS PILL (For Package Name like Starter Pack) --- */
.desc-pill-tag {
    background: rgba(255, 255, 255, 0.08) !important;
    border: 1px solid rgba(255, 255, 255, 0.18) !important;
    color: #ffffff !important;
    font-size: 0.85rem !important; /* 🟢 Made bigger (up from 0.75rem) */
    font-weight: 700 !important;   /* 🟢 Made bolder */
    padding: 4px 14px !important;
    border-radius: 14px !important;
    display: inline-block !important;
}

/* Status Badges for Thumbnails */
.ep-badge {
    position: absolute;
    top: 4px;
    right: 4px;
    padding: 2px 4px;
    font-size: 0.55rem;
    font-weight: bold;
    border-radius: 3px;
    z-index: 10;
    text-transform: uppercase;
    box-shadow: 0 2px 4px rgba(0,0,0,0.5);
    pointer-events: none;
}

.badge-watched {
    background-color: rgba(10, 10, 10, 0.55);
 /* Soft See-through white */
    backdrop-filter: blur(4px);
                  /* Slight blur */
    border: 1px solid rgba(255, 255, 255, 0.2);
  /* Thin subtle edge */
    color: #00e038;
    font-weight: bold;
}

.badge-continue {
    background-color: var(--primary);
 /* ATVEO Red */
    color: white;
}

/* MM Sub deep purple/violet background Badge Plate (Aligned perfectly with HOT badge) */
.badge-mm-sub {
    left: 5px !important;
    background: #410096 !important;
    border: none !important;
    color: #e8edec !important;
    padding: 0 5px !important;
    font-weight: 800 !important;
}

/* Progress Bar at the bottom of thumbnail */
.ep-progress-bar {
    position: absolute;
    bottom: 0;
    left: 0;
    height: 3px;
    background: var(--primary);
    z-index: 11;
    transition: width 0.3s;
}

/* --- Episode Play Button Hover Overlay --- */
.play-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.4);
 /* Slight darkening of the image */
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 0;
 /* Hidden by default */
    transition: opacity 0.2s ease;
    z-index: 12;
 /* Sits above the image but below the badge */
    ;
}

/* Show the overlay when hovering over the card */
.episode-card:hover .play-overlay,
.movie-card:hover .play-overlay {
    opacity: 1;
    cursor: pointer;
}

.episode-card:hover .hero-img-zoom-wrap img,
.movie-card:hover .hero-img-zoom-wrap img {
    transform: scale(1.12);
}

.play-icon-circle {
    width: 38px;
    height: 38px;
    background: var(--primary);
 /* ATVEO Red */
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: 0 0 15px rgba(0,0,0,0.5);
    transform: scale(0.8);
    transition: transform 0.2s ease;
}

.episode-card:hover .play-icon-circle,
.movie-card:hover .play-icon-circle {
    transform: scale(1);
}

/* The Play Triangle SVG */
.play-icon-circle svg {
    fill: white;
    margin-left: 3px;
 /* Optically centers the triangle */
    ;
}

/* --- UNIFIED HOVER & ZOOM ANIMATION SYSTEM --- */

/* 1. THE WINDOW: Clipping andGPU layers for sharpness */
.hero-img-zoom-wrap {
    width: 100%;
        /* Follows grid size by default */
    height: 100%;
    border-radius: 6px;
    overflow: hidden;
    position: relative;
    isolation: isolate;
    background-color: #000;
    box-shadow: 0 10px 25px rgba(0,0,0,0.5);
    transform: translateZ(0);
}

/* 2. THE OVERLAY: The hidden layer with the button */
.play-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.4);
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 0;
 /* Hidden */
    transition: opacity 0.3s ease;
    z-index: 10;
}

/* 3. THE RED CIRCLE ICON */
.play-icon-circle {
    width: 40px;
    height: 40px;
    background: var(--primary);
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    transform: scale(0.7);
    transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
 /* Bouncy feel */
    ;
}

.play-icon-circle svg {
    fill: white;
    margin-left: 2px;
}

/* 4. HOVER TRIGGERS (Shared by all containers) */
.hero-img-zoom-wrap:hover img {
    transform: scale(1.1);
}

.hero-img-zoom-wrap:hover .play-overlay {
    opacity: 1;
}

.hero-img-zoom-wrap:hover .play-icon-circle {
    transform: scale(1);
}

/* 5. CLICK TRIGGERS (Recoil) */
.hero-img-zoom-wrap:active img {
    transform: scale(0.95);
    transition: 0.1s;
}

/* 6. IMAGE BASICS */
.hero-img-zoom-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    will-change: transform;
}

/* --- Legal Documents & Footer Styles --- */
footer {
            /* Remove margin-top so it sits flush at the bottom if desired */
    margin-top: auto;
    padding: 1rem 0;
    border-top: 1px solid var(--border);
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    background-color: #000;
}

.footer-links {
    display: flex;
    gap: 1rem;
 /* Reduced space */
    justify-content: center;
    flex-wrap: wrap;
}

.footer-links span {
    color: var(--text-muted);
    font-size: 0.85rem;
    cursor: pointer;
    transition: color 0.2s;
}

.footer-links span:hover {
    color: var(--primary);
}

.legal-doc-container {
    background-color: var(--panel-bg);
    border-radius: 12px;
    padding: 2.5rem;
    max-width: 900px;
    margin: 0 auto;
    line-height: 1.7;
    color: var(--text-muted);
    box-shadow: 0 10px 30px rgba(0,0,0,0.5);
    font-size: 0.95rem;
}

.legal-doc-container h1 {
    color: white;
    margin-bottom: 1rem;
    font-size: 2rem;
}

.legal-doc-container h2 {
    color: white;
    margin-top: 2rem;
    margin-bottom: 0.8rem;
    font-size: 1.3rem;
}

.legal-doc-container h3 {
    color: white;
    margin-top: 1.5rem;
    margin-bottom: 0.5rem;
    font-size: 1rem;
}

.legal-doc-container p {
    margin-bottom: 1rem;
}

.legal-doc-container ul {
    margin-left: 20px;
    margin-bottom: 1rem;
}

.legal-doc-container li {
    margin-bottom: 0.5rem;
}

.legal-contact-box {
    background: rgba(229, 9, 20, 0.05);
    border: 1px solid rgba(229, 9, 20, 0.2);
    padding: 15px;
    border-radius: 8px;
    margin-top: 20px;
    color: white;
}

/* --- Promo Badges System (Absolute Alignment) --- */
.card-badge {
    position: absolute !important;
    top: 5px !important;
    /* Forces both to the exact same top coordinate */
    height: 18px !important;
 /* Shorter, tighter height for a cleaner look */
    z-index: 25;
    border-radius: 3px;
    font-size: 0.6rem;
    font-weight: 800;
    color: white;
    text-transform: uppercase;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 5px !important;
    margin: 0 !important;
    line-height: 1 !important;
 /* Stops text from creating extra height */
    box-sizing: border-box !important;
}

/* TOP LEFT: Star */
.badge-star {
    left: 5px !important;
    background: rgba(0, 0, 0, 0.7) !important;
    border: 1px solid rgba(255, 215, 0, 0.4) !important;
    color: #f1c40f !important;
}

/* TOP RIGHT: Hot */
.badge-right {
    right: 5px !important;
}

.badge-hot {
    background: rgba(229, 9, 20, 0.8) !important;
 /* Solid red makes it easier to see alignment */
    border: none !important;
}

/* Specific Right Badges */
.badge-new {
    background: #2ecc71 !important;
    padding: 0 6px !important;
} 

/* TRIANGLE CORNER BADGE (For NEW) */
.badge-triangle-new {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 50px;
  /* Size of the triangle */
    height: 50px;
    background: #2ecc71;
 /* New badge green */
    /* THE MAGIC: This creates the triangle shape */
    clip-path: polygon(100% 0, 0 100%, 100% 100%);
    z-index: 25;
    pointer-events: none;
    display: flex;
    align-items: flex-end;
    justify-content: flex-end;
}

/* Position the "NEW" text inside the triangle */
.badge-triangle-new span {
    color: white;
    font-size: 0.6rem;
    font-weight: bold;
    text-transform: uppercase;
    /* THE FIX: Absolute positioning pins it to the corner */
    position: absolute;
    bottom: 4px;
 /* Distance from the bottom edge */
    right: 6px;
  /* Distance from the right edge */
    /* Remove any existing padding that might interfere */
    padding: 0 !important;
}

/* Caps the title at 1 line in the Watch History */
#watched-history-grid h3 {
    white-space: normal; /* CHANGED: Allows text to drop to the next line */
    overflow: visible;   /* CHANGED: Prevents the text from being clipped */
    margin-top: 10px;
}

#watched-history-grid p {
    margin-top: 2px;
    font-size: 0.7rem;
    color: var(--text-muted);
}

/* Glass Pill Style for Hover Overlay */
.hover-tag-pill {
    background: rgba(0, 0, 0, 0.5);
 /* Dark translucent base */
    backdrop-filter: blur(10px);
    /* THE MAGIC: Blurs the image behind the pill */
    -webkit-backdrop-filter: blur(10px);
 /* Support for Safari */
    border: 1px solid rgba(255, 255, 255, 0.2);
 /* Suble light edge */
    padding: 5px 15px;
    border-radius: 20px;
    color: white;
    font-size: 0.75rem;
    font-weight: bold;
    letter-spacing: 1px;
    text-transform: uppercase;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.5);
}

/* Highlights the first tag specifically */
.tags .tag:first-child {
    background-color: var(--primary);
 /* ATVEO Red */
    color: white;
    font-weight: bold;
}

/* Styling for Country Selector and specific billing inputs */
#prof-country {
    background-color: #111;
    border: 1px solid var(--border);
    color: white;
    padding: 0.8rem;
    border-radius: 6px;
    cursor: pointer;
}

#prof-country:focus {
    outline: none;
    border-color: var(--primary);
}

/* Highlights the matching keyword within titles */
.match-highlight {
    color: #e50914;
 /* ATVEO Red */
    font-weight: bold;
}

/* Container to help position the list */
.search-container {
    width: 320px;
    z-index: 1000;
}

/* The actual floating dropdown list */
.search-dropdown {
    position: absolute;
    top: 50px !important;
    left: 0;
    width: 100%;
    background: #111;
    border: 1px solid #333;
    border-top: none;
    border-bottom-left-radius: 12px;
    border-bottom-right-radius: 12px;
    box-shadow: 0 10px 25px rgba(0,0,0,0.8);
    display: none;
 /* Hidden until typing */
    max-height: 400px;
    overflow-y: auto;
 /* Keeps scroll functionality active */
    z-index: 10000;
    border-radius: 8px !important;
    /* Hides scrollbar on Firefox and IE/Edge */
    scrollbar-width: none;
    -ms-overflow-style: none;
    /* 🟢 PREVENTS SCROLL CHAINING TO THE BACKGROUND PAGE */
    overscroll-behavior: contain;
}

/* Hides scrollbar visual representation on Chrome, Safari, and Opera [1.1.1] */
.search-dropdown::-webkit-scrollbar {
    display: none;
}

/* Style for each suggestion item */
.suggestion-item {
    padding: 12px 15px;
    display: flex;
    align-items: center;
    gap: 12px;
    cursor: pointer;
    transition: background 0.2s;
    border-bottom: 1px solid #222;
}

.suggestion-item:last-child {
    border: none;
}

.suggestion-item:hover {
    background: #222;
}

.suggestion-item img {
    width: 35px;
    height: 45px;
    border-radius: 4px;
    object-fit: cover;
}

.suggestion-info {
    display: flex;
    flex-direction: column;
}

.suggestion-title {
    font-size: 0.85rem;
    color: white;
    font-weight: bold;
}

.suggestion-niche {
    font-size: 0.7rem;
    color: #777;
}

/* The 'See all results' button at bottom */
.search-all-btn {
    padding: 10px;
    text-align: center;
    font-size: 0.8rem;
    color: var(--primary);
    background: #181818;
    cursor: pointer;
    font-weight: bold;
}

/* Layout for Search Result Rows (DramaBox Style) */
#home-search-grid {
    display: flex !important;
    flex-direction: column !important;
    gap: 25px;
 /* Space between each series row */
    ;
}

.search-result-row {
    display: flex;
    gap: 20px;
    background-color: var(--panel-bg);
    padding: 1.5rem;
    border-radius: 12px;
    align-items: center;
 /* Vertically centers the row content */
    transition: transform 0.2s;
    border: 1px solid transparent;
}

.search-result-row:hover {
    border-color: #333;
    background-color: #181818;
}

/* Left: Poster */
.search-row-poster {
    width: 140px;
 /* Fixed size for consistency */
    height: 180px;
    border-radius: 8px;
    object-fit: cover;
    flex-shrink: 0;
    box-shadow: 0 5px 15px rgba(0,0,0,0.5);
    cursor: pointer;
}

/* Middle: Info */
.search-row-info {
    flex-grow: 1;
 /* Takes up the remaining center space */
    ;
}

.search-row-info h3 {
    font-size: 1.4rem;
    margin-bottom: 5px;
    color: white;
}

.search-row-meta {
    color: var(--text-muted);
    font-size: 0.85rem;
    margin-bottom: 12px;
}

.search-row-desc {
    color: var(--text-muted);
    font-size: 0.9rem;
    line-height: 1.5;
    display: -webkit-box;
    -webkit-line-clamp: 4 !important;
 /* The !important forces this rule to win */
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin-bottom: 15px;
}

/* Right: Action Button */
.search-row-action {
    flex-shrink: 0;
    margin-left: 20px;
}

.btn-search-play {
    background: linear-gradient(135deg, #e50914, #ff0055);
    color: white;
    border: none;
    padding: 10px 20px;
    border-radius: 5px;
    font-weight: bold;
    cursor: pointer;
    font-size: 1rem;
    display: flex;
    align-items: center;
    gap: 8px;
    box-shadow: 0 4px 10px rgba(229, 9, 20, 0.3);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.btn-search-play:hover {
    transform: scale(1.05);
    box-shadow: 0 4px 15px rgba(229, 9, 20, 0.4);
}

/* Styling for the numbers in the genre list */
.genre-badge {
    background-color: #222;
    color: var(--text-muted);
    font-size: 0.7rem;
    padding: 2px 8px;
    border-radius: 10px;
    margin-left: 8px;
    font-weight: normal;
    border: 1px solid #333;
}

/* Change badge color when the parent li is hovered or active */
li:hover .genre-badge, li.active .genre-badge {
    background-color: var(--primary);
    color: white;
    border-color: transparent;
}

/* --- Admin Sidebar Styles --- */
.admin-sidebar {
    position: fixed;
    top: 70px;
                  /* 🟢 Sit cleanly below your 70px header */
    right: -350px;
    width: 350px;
    height: calc(100vh - 70px);
 /* 🟢 Adjust height to fill only the remaining viewport */
    background-color: var(--sidebar-bg);
    border-left: 1px solid var(--border);
    z-index: 2500;
    transition: right 0.3s ease;
    display: flex;
    flex-direction: column;
    box-shadow: -5px 0 25px rgba(0,0,0,0.8);
}

/* 🟢 FEED MODE SIDEBAR OVERRIDE: Eliminate the 70px gap when the header is hidden on the Feed Page */
body.feed-mode-active .admin-sidebar {
    top: 0 !important;
    height: 100vh !important;
}

.admin-sidebar.active {
    right: 0;
}

.sidebar-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.5rem;
    border-bottom: 1px solid var(--border);
}

.close-sidebar {
    background: none;
    border: none;
    color: white;
    font-size: 1.2rem;
    cursor: pointer;
}

.sidebar-content {
    padding: 1.5rem;
    flex: 1;
 /* Forces the content area to respect the height of the sidebar */
    overflow-y: auto;
 /* Adds the vertical scroll magic */
    padding-bottom: 3rem;
 /* Gives a nice breathing room at the very bottom */
    ;
}

/* Optional: Style the scrollbar so it matches your dark ATVEO theme */
.sidebar-content::-webkit-scrollbar {
    width: 6px;
}

.sidebar-content::-webkit-scrollbar-thumb {
    background: #444;
    border-radius: 4px;
}

#admin-sidebar-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.6);
    z-index: 2400;
    display: none;
    opacity: 0;
    transition: opacity 0.3s ease;
}

#admin-sidebar-overlay.active {
    display: block;
    opacity: 1;
}

.reaction-btn {
    background: #222;
    border: 1px solid #333;
    color: white;
    padding: 6px 15px;
    border-radius: 20px;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
 /* Keeps items centered */
    gap: 6px;
    font-size: 0.9rem;
    white-space: nowrap;
 /* THE FIX: Prevents text from breaking into two lines */
    ;
}

.reaction-btn:hover {
    background: #333;
    border-color: #555;
    transform: translateY(-2px);
}

/* Active states for Main Player Reaction Buttons */
.reaction-btn.active-like {
    border-color: #2ecc71 !important;
    background: rgba(46, 204, 113, 0.25) !important;
}
.reaction-btn.active-love {
    border-color: #e50914 !important;
    background: rgba(229, 9, 20, 0.25) !important;
}
.reaction-btn.active-fire {
    border-color: #f39c12 !important;
    background: rgba(243, 156, 18, 0.25) !important;
}

/* Active state for the Main Player Rating Box */
#user-star-selection.active {
    border-color: #f1c40f !important;
    background: rgba(241, 196, 15, 0.15) !important;
}

/* Style for the Admin Delete Button */
.btn-admin-delete {
    background: #333;
    color: #ccc;
    border: none;
    padding: 5px 10px;
    border-radius: 4px;
    cursor: pointer;
    font-weight: bold;
    font-size: 0.7rem;
    transition: all 0.2s ease;
}

/* The Hover Effect */
.btn-admin-delete:hover {
    background: var(--primary);
 /* Turns ATVEO Red */
    color: white;
    transform: scale(1.05);
 /* Slight grow effect */
    ;
}

@keyframes warningGlow {
    from {
        box-shadow: 0 0 5px rgba(229, 9, 20, 0.2);
    }

    to {
        box-shadow: 0 0 20px rgba(229, 9, 20, 0.6);
    }
}

/* Styling for the Notification Delete Button */
.btn-notif-delete {
    background: rgba(229, 9, 20, 0.1);
    color: #e50914;
    border: 1px solid rgba(229, 9, 20, 0.3);
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 0.65rem;
    cursor: pointer;
    font-weight: bold;
    transition: 0.2s;
}

.btn-notif-delete:hover {
    background: #e50914;
    color: #ededed;
    box-shadow: 0 0 10px rgba(229, 9, 20, 0.4);
}

/* --- TIKTOK STYLE COMMUNITY FEED (Upgraded) --- */
.feed-scroll-container {
    width: 100%;
    max-width: 420px;
    /* THE CSS FIX: Dynamically fits the remaining screen space */
    height: calc(100vh - 280px);
    min-height: 450px;
 /* Safe fallback for very small laptop screens */
    margin: 0 auto;
    background: #000;
    border-radius: 0px;
    overflow-y: scroll;
    scroll-snap-type: y mandatory;
    box-shadow: 0 0 100px rgba(229, 9, 20, 0.15), 0 20px 50px rgba(0,0,0,0.9);
    border: 1px solid rgba(255,255,255,0.08);
    scrollbar-width: none;
    position: relative;
}

.feed-scroll-container::-webkit-scrollbar {
    display: none;
}

.feed-item {
    width: 100%;
    height: 100%;
    scroll-snap-align: start;
    position: relative;
    background: #050505;
}

.feed-video {
    width: auto;
 /* 🟢 Changed from 100% to auto so it shrink-wraps to the video's real aspect ratio */
    height: 100%;
    max-width: 100%; /* 🟢 Prevents landscape videos from overflowing the screen width */
    margin: 0 auto; /* 🟢 Centers the video element horizontally inside the container */
    display: block;
    object-fit: contain; 
    background: #000; 
    cursor: pointer;
}

.feed-overlay-ui {
    position: absolute;
    inset: 0;
    pointer-events: none;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 30px 20px 40px 20px; 
    background: linear-gradient(to top, rgba(0,0,0,0.95) 0%, rgba(0,0,0,0.6) 20%, rgba(0,0,0,0) 45%);
    
    /* THE FIX: These two lines keep the text above the video and visible! */
    z-index: 40; 
    opacity: 1;  
}

.feed-info h3 {
    color: white; 
    font-size: 1.25rem; 
    font-weight: 700; /* Dropped from 800 to 700 to make it less blocky */
    margin-bottom: 8px; 
    text-shadow: 1px 1px 4px rgba(0,0,0,0.9); 
    line-height: 1.3;
}

.feed-info p {
    color: #dedede; /* Slightly brighter for better contrast */
    font-size: 0.9rem; 
    display: -webkit-box; 
    -webkit-line-clamp: 2; 
    -webkit-box-orient: vertical; 
    overflow: hidden; 
    text-shadow: 1px 1px 3px black; 
    margin-bottom: 15px; 
    line-height: 1.5;
}

.feed-sidebar {
    position: absolute;
    right: 16px; 
    bottom: 60px; /* Pushes the entire block deeply downwards */
    display: flex;
    flex-direction: column;
    gap: 15px; /* Tightens the vertical space so they don't stretch so high */
    align-items: center;
    pointer-events: auto;
    z-index: 50;
}

.feed-action-btn {
    background: rgba(20, 20, 20, 0.65);
 /* Smoother, darker glassmorphism */
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255,255,255,0.1);
    width: 50px;
 /* Increased from 46px */
    height: 50px;
 /* Increased from 46px */
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    transition: all 0.2s;
    box-shadow: 0 4px 15px rgba(0,0,0,0.6);
}

        /* Centered Play Pulse Animation */
@keyframes pulse-play {
    0% {
        transform: translate(-50%, -50%) scale(1);
        opacity: 0.8;
    }

    100% {
        transform: translate(-50%, -50%) scale(1.5);
        opacity: 0;
    }
}

.feed-play-pulse {
    position: absolute;
    top: 50%;
    left: 50%;
    pointer-events: none;
    animation: pulse-play 0.5s ease-out forwards;
}

.feed-action-btn:hover {
    background: rgba(255,255,255,0.1);
    transform: scale(1.1);
}

.feed-action-btn svg {
    fill: transparent;
    stroke: white;
    stroke-width: 2;
    transition: all 0.2s;
}
        
        /* Active states for reactions */
.feed-action-btn.active-like {
    border-color: rgba(46, 204, 113, 0.5);
    background: rgba(0,0,0,0.6);
}

.feed-action-btn.active-like svg {
    stroke: #2ecc71;
    fill: #2ecc71;
}

.feed-action-btn.active-love {
    border-color: rgba(229, 9, 20, 0.5);
    background: rgba(0,0,0,0.6);
}

.feed-action-btn.active-love svg {
    stroke: #e50914;
    fill: #e50914;
}

.feed-action-btn.active-fire {
    border-color: rgba(243, 156, 18, 0.5);
    background: rgba(0,0,0,0.6);
}

.feed-action-btn.active-fire svg {
    stroke: #f39c12;
    fill: #f39c12;
}

.feed-action-text {
    font-size: 0.7rem;
    font-weight: 800;
    text-shadow: 1px 1px 3px rgba(0,0,0,0.8);
    margin-top: 4px;
    text-align: center;
    color: white;
}

.feed-center-play {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 70px;
    height: 70px;
    background: rgba(0,0,0,0.4);
    backdrop-filter: blur(5px);
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    pointer-events: none;
    transition: opacity 0.2s;
}

.global-mute-toggle {
    position: absolute;
    top: 20px;
    right: 20px;
    background: rgba(0,0,0,0.5);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255,255,255,0.2);
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    z-index: 2500;
 /* <--- Updated */
    color: white;
}

/* ========================================= */
/* --- FULL SCREEN IMMERSIVE FEED MODE ---   */
/* ========================================= */

/* Lock the body and remove background colors */
body.feed-mode-active {
    overflow: hidden !important;
    background-color: #000;
}

/* 1. Expand the Main Container */
body.feed-mode-active main {
    padding: 0;
    max-width: 100%;
}

body.feed-mode-active #feed-view {
    padding-top: 0 !important;
}

/* 2. Make the Feed edge-to-edge */
body.feed-mode-active .feed-scroll-container {
    max-width: 100%;
    height: 100vh;
    box-shadow: none;
    border: none;
    border-radius: 0;
}

/* 3. Hide the Header (Slide Up) */
body.feed-mode-active header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 2000;
    transform: translateY(-100%);
 /* Pushes it off-screen */
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    background-color: rgba(0, 0, 0, 0.85);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid rgba(255,255,255,0.1);
}

/* The Invisible Hover Catch-Zone for the Header */
body.feed-mode-active header::after {
    content: '';
    position: absolute;
    bottom: -40px;
 /* Hangs 40px below the hidden header to catch the mouse */
    left: 0;
    width: 100%;
    height: 40px;
}

body.feed-mode-active header:hover {
    transform: translateY(0);
 /* Slides down when mouse hits the catch-zone */
    ;
}

/* 4. Hide the Footer (Slide Down) */
body.feed-mode-active footer {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    z-index: 2000;
    transform: translateY(100%);
 /* Pushes it off-screen */
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    background-color: rgba(0, 0, 0, 0.85);
    backdrop-filter: blur(10px);
    margin-top: 0;
    border-top: 1px solid rgba(255,255,255,0.1);
}

/* The Invisible Hover Catch-Zone for the Footer */
body.feed-mode-active footer::before {
    content: '';
    position: absolute;
    top: -40px;
 /* Hangs 40px above the hidden footer */
    left: 0;
    width: 100%;
    height: 40px;
}

body.feed-mode-active footer:hover {
    transform: translateY(0);
 /* Slides up when mouse hits the catch-zone */
    ;
}


/* ========================================= */
/* --- DESKTOP DEAD-SPACE UI PLACEMENT ---   */
/* ========================================= */

@media (min-width: 850px) {
    /* 1. Lock the left panel safely below the header and above the footer */
    body.feed-mode-active .feed-overlay-ui {
        background: transparent;
        width: 350px;
        left: 8%;
        top: 90px;
        bottom: 40px;
        transform: none;
        padding: 0;
        pointer-events: auto;
        overflow-y: auto;
        scrollbar-width: none;
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
    }

    body.feed-mode-active .feed-overlay-ui::-webkit-scrollbar {
        display: none;
    }
    
    /* 2. Force the description to show fully (No cut-offs) */
    body.feed-mode-active .feed-info p.feed-desc {
        display: block !important;
        -webkit-line-clamp: unset !important;
        overflow: visible !important;
        color: #dedede;
        font-size: 0.95rem;
        line-height: 1.6;
        margin-bottom: 15px;
        text-shadow: 1px 1px 3px black;
    }

    /* 3. Move the Sidebar Actions to hug the video tightly */
    body.feed-mode-active .feed-sidebar {
        right: calc(50% - 350px) !important;
        top: 50% !important;
            /* 🟢 Vertically center next to video */
        transform: translateY(-50%) !important;
 /* 🟢 Offsets height perfectly */
        bottom: auto !important;
         /* 🟢 Disables bottom anchoring */
        ;
    }

    /* 4. Move the Mute Button to perfectly align with the right sidebar */
    body.feed-mode-active .global-mute-toggle {
        right: calc(50% - 350px) !important;
        top: 80px;
    }

    /* 5. Style the Movie Card Poster */
    body.feed-mode-active .feed-movie-card {
        display: block;
        width: 160px;
        aspect-ratio: 2/3;
        object-fit: cover;
        border-radius: 12px;
        margin-bottom: 20px;
        box-shadow: 0 10px 30px rgba(0,0,0,0.8);
        border: 1px solid rgba(255,255,255,0.15);
        cursor: pointer;
        transition: transform 0.2s ease;
    }

    body.feed-mode-active .feed-movie-card:hover {
        transform: scale(1.05);
    }

    /* 1. The Main Container (Darker background + Shadow for contrast) */
    body.feed-mode-active .local-progress-container {
        width: 380px !important;
        max-width: 90vw;
        height: 10px !important;
        /* CHANGED: Darker background and a shadow to lift it off the video */
        background: rgba(0, 0, 0, 0.6) !important;
        box-shadow: 0 2px 10px rgba(0,0,0,0.8);
        border: 2px solid rgba(255, 255, 255, 0.1);
        position: absolute;
        left: 50% !important;
        transform: translateX(-50%);
        bottom: 70px !important;
        overflow: hidden !important;
        border-radius: 5px;
        z-index: 100;
    }

    /* 2. The Preload Buffer Bar (Brighter white) */
    body.feed-mode-active .local-preload-bar {
        position: absolute;
        top: 0;
        left: 0;
        height: 100%;
        /* CHANGED: Increased opacity from 0.3 to 0.5 so it's easier to see */
        background: rgba(255, 255, 255, 0.5) !important; 
        width: 0%; 
        border-radius: 5px;
        z-index: 1; 
    }

    /* 3. The Active Red Progress Bar (Stays the same) */
    body.feed-mode-active .local-progress-bar {
        position: absolute;
        top: 0;
        left: 0;
        height: 100%;
        background: var(--primary) !important;
        width: 0%; 
        border-radius: 5px;
        z-index: 2; 
    }

    body.feed-mode-active .feed-item {
        background: transparent !important; /* Helps visually align things on large monitors */
    }

    /* Update the container for the Poster + Tags */
#global-feed-info .feed-info {
    display: flex;
    flex-direction: column;
}

/* Create a side-by-side wrapper for the Card and the Tags */
.feed-header-wrapper {
    display: flex;
    gap: 15px;
    align-items: flex-start;
    margin-bottom: 20px;
}

/* Ensure the tags stack vertically on the right */
#global-feed-tags {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 0 !important;
    padding-top: 50px; /* Adjust this number to move it down exactly where you want */
}

#global-feed-tags span {
    width: fit-content;
    white-space: nowrap;
}
}

/* Hide progress bar by default */
#feed-progress-container {
    display: none;
}

/* Show it ONLY when the user is looking at the Feed */
body.feed-mode-active #feed-progress-container {
    display: block;
}

/* Update your main content and right column to use Grid */
.main-content {
    display: grid;
    /* Two columns initially, one for center content, one for buttons */
    grid-template-columns: 1fr auto;
    gap: 16px;
    width: 100%;
}

.right-column {
    display: grid;
    /* Two columns when the panel is shown: buttons, then panel */
    grid-template-columns: auto 1fr;
    grid-auto-flow: dense; /* Fill the area nicely */
    gap: 16px;
    height: 100%;
}

/* ========================================= */
/* --- SEAMLESS SLIDE-IN COMMENT PANEL ---   */
/* ========================================= */

.comment-panel {
    position: fixed; 
    top: 70px;
    right: -380px; /* Hidden completely off the right edge of the screen */
    width: 380px;
    height: calc(100vh - 70px);
    background-color: #0a0a0a;
    border-left: 1px solid #222;
    z-index: 3000;
    transition: right 0.3s cubic-bezier(0.4, 0, 0.2, 1); /* Smooth slide */
    
    display: flex;
    flex-direction: column;
    padding: 1.5rem;
    box-shadow: -10px 0 30px rgba(0,0,0,0.8);
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
}

/* When the Comment button is clicked, slide it exactly to the right edge */
body.feed-mode-active.comments-open .comment-panel {
    right: 0 !important;
}

.feed-action-btn.active-follow { border-color: rgba(52, 152, 219, 0.5); background: rgba(0,0,0,0.6); }
.feed-action-btn.active-follow svg { stroke: #3498db; }

/* =========================================================================
   ATVEO OPTIMIZED VIDEO PLAYER, SUBTITLE & PROTECTION SYSTEM
   ========================================================================= */

/* 1. LAYOUT: SHORT DRAMA FEED VIEW ONLY */
#feed-view video::-webkit-media-text-track-container,
#feed-container video::-webkit-media-text-track-container {
    transform: none !important;
}

#feed-view video::-webkit-media-text-track-display,
#feed-container video::-webkit-media-text-track-display {
    position: absolute !important;
    max-width: 85% !important; 
    left: 7.5% !important;
    width: 85% !important;
    margin-left: 0 !important;
    top: auto !important;
    bottom: 6% !important; /* 🟢 Moved down closer to the bottom progress bar */
    overflow: visible !important;
}

/* --- PLAYER VIEW SUBTITLE ALIGNMENT (TOP-ANCHORED) --- */
#player-view video::-webkit-media-text-track-container {
    transform: none !important; 
}

#player-view video::-webkit-media-text-track-display {
    position: absolute !important;
    width: 100% !important; 
    max-width: 96% !important; 
    left: 50% !important; 
    transform: translateX(-50%) !important; 
    white-space: normal !important; 
    margin-left: 0 !important;
    top: 85% !important;     /* 🟢 Locks the top line in place */
    bottom: auto !important; /* 🟢 Removes bottom anchor so wrapping text grows downward */
    overflow: visible !important;
    text-align: center !important; 
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
}

/* --- UNIVERSAL SUBTITLE CUE STYLING (TOP-ANCHORED GROWTH) --- */
.feed-video::cue, #main-video-player::cue {
    background-color: transparent !important; /* 🟢 Removes the black box */
    text-shadow: 1px 1px 4px rgba(0,0,0,1), -1px -1px 4px rgba(0,0,0,1), 0px 0px 8px rgba(0,0,0,0.8) !important; /* 🟢 Adds a heavy black outline/shadow to keep text readable */
    color: #ffffff !important;
    font-family: sans-serif !important;
    line-height: 1.5 !important;
    text-align: center !important;
    padding: 3px 8px !important;
    border-radius: 4px !important;
    white-space: pre-wrap !important;
    word-break: break-word !important;
}

/* Specific Cue Font Sizes */
.feed-video::cue {
    font-size: 1.1rem; 
}

#main-video-player::cue {
    font-size: 1.1rem; 
}

/* Ensure full screen text stays consistent */
#main-video-player:fullscreen::cue,
#main-video-player:-webkit-full-screen::cue {
    font-size: 28px !important; 
}

.feed-video:fullscreen::cue,
.feed-video:-webkit-full-screen::cue {
    font-size: 20px !important; 
}

/* 5. UNIVERSAL MEDIA PROTECTION & CONTROL RESETS */
video {
    width: 100%;
    height: 100%;
    background: #000;
}

/* Strip download and overflow mechanics */
video::-internal-media-controls-download-button {
    display: none !important;
}

video::-webkit-media-controls-enclosure {
    overflow: hidden !important;
}

video::-webkit-media-controls-panel {
    width: calc(100% + 30px) !important; 
}

/* Aggressive resets to completely wipe browser focus rings from native controls */
video,
video:focus,
video:focus-visible,
video::-webkit-media-controls,
video::-webkit-media-controls-enclosure,
video::-webkit-media-controls-panel,
video::-webkit-media-controls-play-button,
video::-webkit-media-controls-mute-button,
video::-webkit-media-controls-fullscreen-button,
video::-webkit-media-controls-timeline,
video::-webkit-media-controls-volume-slider {
    outline: none !important;
    box-shadow: none !important;
    border: none !important;
    background-color: transparent !important;
    -webkit-tap-highlight-color: transparent !important;
}

/* Removes native vertical separator lines (dividers) next to the control buttons */
video::-webkit-media-controls-overflow-button,
video::-webkit-media-controls-fullscreen-button {
    border: none !important;
    border-left: none !important;
    border-right: none !important;
}


/* UNIVERSAL FULLSCREEN SUBTITLES WRAPPING */

video:fullscreen::-webkit-media-text-track-display,
video:-webkit-full-screen::-webkit-media-text-track-display {
    font-size: 28px !important; 
    width: 100% !important;         
    left: 50% !important;
    transform: translateX(-50%) !important;
    white-space: pre-wrap !important;  /* 🟢 Changed to pre-wrap */
    word-break: break-word !important; /* 🟢 Added aggressive word breaking here too */
    top: 85% !important;            
    bottom: auto !important;        
}

/* 1. If the active layout is Horizontal (16:9) -> Let the subtitles expand wide */
.main-video-section.horizontal video:fullscreen::-webkit-media-text-track-display,
.main-video-section.horizontal video:-webkit-full-screen::-webkit-media-text-track-display {
    max-width: 90% !important;
    width: 90% !important;
}

/* 2. If the active layout is Vertical (9:16) -> Constrain them inside the vertical crop area */
.main-video-section.vertical video:fullscreen::-webkit-media-text-track-display,
.main-video-section.vertical video:-webkit-full-screen::-webkit-media-text-track-display,
.main-video-section.dynamic-vertical video:fullscreen::-webkit-media-text-track-display,
.main-video-section.dynamic-vertical video:-webkit-full-screen::-webkit-media-text-track-display {
    max-width: 48vh !important; /* Fits safely inside 9:16 vertical crop bounds */
}

/* --- PREMIUM CREATOR PROFILE V2 (1200px) --- */
        .creator-profile-wrapper {
            max-width: 1200px;
            /* THE FIX: Added -2rem to BOTH top and bottom margins to completely pull the grey wrapper flush against the Header AND the Footer! */
            margin: -2rem auto -2rem auto; 
            background: #141414; 
            min-height: 100vh;
            position: relative;
            box-shadow: 0 0 50px rgba(0,0,0,0.9);
            border-left: 1px solid #333;
            border-right: 1px solid #333;
            /* Added deep bottom padding so cards have lots of breathing room */
            padding-bottom: 80px; 
        }

        .creator-cover-photo {
            width: 100%;
            height: 220px;
            background-color: #1a1a1a;
            background-size: cover;
            background-position: center;
            position: relative;
            border-bottom: 1px solid #222;
        }

        #public-creator-avatar {
            width: 150px; 
            height: 150px;
            border-radius: 50%;
            border: 5px solid #b30202; /* Matches wrapper background */
            object-fit: cover;
            background: #111;
        }

        .creator-avatar-container {
            text-align: center;
            /* THE FIX: -75px pulls exactly half of your 150px avatar up over the cover photo line */
            margin-top: -75px; 
            position: relative;
            z-index: 5;
        }

        /* --- UPDATED STATS ROW (COMPACT TIKTOK STYLE) --- */
        .creator-stats-row {
            display: flex;
            justify-content: center;
            align-items: center;
            gap: 10px; /* Brings the blocks much closer together */
            margin: 20px 0;
        }
        
        .creator-stat-item { 
            text-align: center; 
            cursor: pointer; 
            padding: 0 15px; /* Gives them a nice clickable area */
        }
        
        .creator-stat-val { 
            font-size: 1.25rem; 
            font-weight: bold; 
            color: white; 
        }
        
        .creator-stat-label { 
            font-size: 0.8rem; 
            color: #888; 
            margin-top: 2px; 
            /* Removed the harsh ALL CAPS and letter-spacing for a softer look */
        }
        
        .creator-stat-divider { 
            width: 1px; 
            background: #444; 
            height: 16px; /* MUCH shorter divider line, just like the reference app! */
        }

        /* --- PREMIUM CREATOR ACTIONS V3 (TOP RIGHT Pinned) --- */
        .creator-actions {
            position: absolute;       /* Pulls buttons out of normal layout flow to position them */
            top: 240px;               /* Sits neatly below the 220px cover photo line */
            right: 30px;              /* Align nicely against the right profile card edge */
            display: flex;
            gap: 15px;
            z-index: 20;              /* Layer safely above background layers */
        }
        
        .creator-btn {
            background: rgba(255,255,255,0.05);
            border: 1px solid rgba(255,255,255,0.15);
            color: white;
            padding: 10px 30px;
            border-radius: 8px;
            font-weight: bold;
            font-size: 0.95rem;
            cursor: pointer;
            transition: all 0.2s;
            display: flex;
            align-items: center;
            gap: 8px;
        }

        /* RESPONSIVE MOBILE FIX: Centers buttons if viewed on smaller viewport screens */
        @media (max-width: 800px) {
            .creator-actions {
                position: relative;
                top: 0;
                right: 0;
                justify-content: center;
                margin-top: 20px;
                margin-bottom: 30px;
            }
        }
        .creator-btn:hover { background: rgba(255,255,255,0.1); transform: translateY(-2px); }
        .creator-btn.primary { background: var(--primary); border: none; color: white; }
        .creator-btn.primary:hover { background: var(--primary-hover); }
        
        .creator-links-wrapper {
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            gap: 12px;
            margin-bottom: 30px;
            padding: 0 20px;
        }

        .creator-link-pill {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            background: transparent;
            border: 1px solid #444;
            padding: 8px 25px;
            border-radius: 25px;
            font-size: 0.85rem;
            font-weight: bold;
            color: #ddd;
            text-decoration: none;
            cursor: pointer;
            transition: all 0.2s;
        }
        .creator-link-pill:hover { background: rgba(255,255,255,0.08); border-color: #666; color: white; }
        
        .creator-tabs {
            display: flex;
            justify-content: center;
            gap: 60px; /* Spaced out beautifully */
            border-bottom: 1px solid #222;
            margin-bottom: 25px;
            padding: 0 20px;
        }
        
        .creator-tab {
            padding: 15px 10px;
            color: #777;
            font-weight: bold;
            cursor: pointer;
            font-size: 0.95rem;
            display: flex;
            align-items: center;
            gap: 8px;
            transition: color 0.2s;
            border-bottom: 3px solid transparent;
        }
        
        .creator-tab:hover { color: #ccc; }
        .creator-tab.active { color: white; border-bottom: 3px solid white; }

        .pinned-badge {
            position: absolute;
            top: 8px;
            left: 8px;
            background: #e50914;
            color: white;
            font-size: 0.7rem;
            padding: 3px 8px;
            border-radius: 4px;
            font-weight: bold;
            z-index: 10;
            text-transform: uppercase;
            box-shadow: 0 2px 8px rgba(0,0,0,0.6);
        }

        .desktop-back-btn {
            position: absolute;
            top: 20px;
            left: 20px;
            background: rgba(0, 0, 0, 0.6);
            border: 1px solid rgba(255, 255, 255, 0.2);
            color: white;
            padding: 8px 20px;
            border-radius: 25px;
            font-weight: bold;
            font-size: 0.9rem;
            cursor: pointer;
            backdrop-filter: blur(5px);
            transition: all 0.2s;
            z-index: 10;
        }
        .desktop-back-btn:hover {
            background: rgba(0, 0, 0, 0.9);
            transform: translateX(-4px); /* Creates a nice slide-left hover effect */
        }

        /* --- CREATOR PROFILE VIDEO GALLERY --- */
        #public-creator-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(135px, 1fr)) !important; 
            gap: 15px;
            row-gap: 40px; /* Matched the row gap to the category layout */
            padding: 0 20px 40px 20px;
            align-content: start;
        }

        /* Inline Hover Management for Creator Controls */
        .creator-video-manage-overlay {
            position: absolute;
            bottom: 8px;
            right: 8px;
            display: flex;
            gap: 6px;
            z-index: 30;
            opacity: 0; /* Hidden by default */
            transition: opacity 0.2s ease;
        }

        /* Show the Edit/Delete actions only when hovering over the card wrapper */
        .creator-prod-card-wrapper:hover .creator-video-manage-overlay {
            opacity: 1;
        }

        .btn-creator-action {
            background: rgba(0, 0, 0, 0.75);
            border: 1px solid rgba(255, 255, 255, 0.2);
            color: white;
            padding: 4px 8px;
            border-radius: 4px;
            font-size: 0.7rem;
            font-weight: bold;
            cursor: pointer;
            transition: all 0.2s;
            backdrop-filter: blur(4px);
        }

        .btn-creator-action.edit:hover { background: #3498db; border-color: transparent; }
        .btn-creator-action.delete:hover { background: #e50914; border-color: transparent; }

/* --- CREATOR CATEGORY SIDEBAR --- */
.creator-category-sidebar {
    width: 220px;
    flex-shrink: 0;
    max-height: 500px;
    overflow-y: auto;
    background: #0a0a0a;
    border: 1px solid #222;
    border-radius: 12px;
    padding: 10px;
}
.creator-category-sidebar::-webkit-scrollbar { width: 6px; }
.creator-category-sidebar::-webkit-scrollbar-thumb { background: #444; border-radius: 4px; }

.creator-category-sidebar ul { list-style: none; margin: 0; padding: 0; }
.creator-category-sidebar li {
    padding: 12px 15px;
    color: var(--text-muted);
    cursor: pointer;
    font-size: 0.9rem;
    border-radius: 6px;
    margin-bottom: 5px;
    transition: all 0.2s;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: #111;
}
.creator-category-sidebar li:hover { background: #222; color: white; }
.creator-category-sidebar li.active { background: var(--primary); color: white; font-weight: bold; }

/* --- SECURE CHROMIUM INDEPENDENT DATE INPUT WRAPPERS --- */
input[type="date"],
#auth-dob {
    color-scheme: dark !important;
    color: white !important;
    background-color: #111 !important;
    
    /* 🟢 HACK: Erase native calendar drawing and render our own pixel-perfect white SVG */
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="4" width="18" height="18" rx="2" ry="2"/><line x1="16" y1="2" x2="16" y2="6"/><line x1="8" y1="2" x2="8" y2="6"/><line x1="3" y1="10" x2="21" y2="10"/></svg>') !important;
    background-repeat: no-repeat !important;
    background-position: right 14px center !important; /* Positions it nicely on the right margin side */
    background-size: 16px 16px !important;              /* Keeps standard proportions intact */
    
    position: relative !important; /* Essential to anchor our invisible pointer area correctly */
}

/* 🟢 STRETCH INVISIBLE LINK ELEMENT OVER TARGET IMAGE BOUNDARIES */
input[type="date"]::-webkit-calendar-picker-indicator,
#auth-dob::-webkit-calendar-picker-indicator {
    position: absolute !important;
    right: 0 !important;
    top: 0 !important;
    width: 48px !important;      /* Replaces entire click targets column nicely */
    height: 100% !important;
    opacity: 0 !important;       /* native black asset is fully hidden while remaining clickable */
    margin: 0 !important;
    padding: 0 !important;
    cursor: pointer !important;
    z-index: 5 !important;
}

/* Clean up: Use specific classes for different components */
.insight-modal-box {
    background-color: var(--panel-bg);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 25px;
    width: 95%;
    max-width: 1400px; /* Wider as you requested */
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    box-shadow: 0 20px 60px rgba(0,0,0,0.9);
    scroll-behavior: smooth;
    overflow: hidden; /* Prevent double-scrollbars */
}

/* Ensure the inner content scrolls, not the whole box */
.insight-content-area {
    flex: 1;
    overflow-y: auto;
    padding-right: 5px;
}

canvas {
    width: 100% !important;
    height: 100% !important; /* Let Chart.js handle its own scale drawing internally */
    max-height: 220px;       /* Keeps it perfectly compact within your grid blocks */
}

/* ========================================= */
/* --- PROMOTION & ADVERTISEMENT POPUP ---   */
/* ========================================= */

.promo-user-overlay {
    display: none; 
    position: fixed;
    top: 0; left: 0; width: 100%; height: 100%;
    z-index: 6000;
    justify-content: center; /* Defaults to Center */
    align-items: center;     /* Defaults to Center */
    padding: 20px;
    pointer-events: none; /* Allows clicks to pass through background for corner ads */
    transition: background-color 0.3s, backdrop-filter 0.3s;
}

.promo-user-overlay.active {
    display: flex;
}

/* Background Dimmer Logic: Only dim if the Ad is set to Center */
.promo-user-overlay.dim-bg {
    background-color: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(10px);
    pointer-events: auto; /* Locks background clicks */
}

.promo-popup-card {
    background: #0f0f0f;
    border-radius: 16px;
    overflow: hidden;
    position: relative;
    border: 1px solid rgba(255,255,255,0.1);
    box-shadow: 0 25px 60px rgba(0,0,0,0.9), 0 0 40px rgba(229, 9, 20, 0.2);
    animation: promoPop 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    pointer-events: auto; /* Restores clickability to the actual card */
}

@keyframes promoPop {
    from { transform: scale(0.8) translateY(20px); opacity: 0; }
    to { transform: scale(1) translateY(0); opacity: 1; }
}

.promo-close-btn {
    position: absolute;
    top: 15px; right: 15px;
    width: 32px; height: 32px;
    background: rgba(0, 0, 0, 0.7); border-radius: 50%; display: flex;
    justify-content: center; align-items: center; color: white; cursor: pointer;
    backdrop-filter: blur(5px); border: 1px solid rgba(255,255,255,0.3); z-index: 10;
}
.promo-close-btn:hover { background: var(--primary); transform: scale(1.1); }

/* Standard Components */
.promo-img-banner { display: block; object-fit: cover; background-color: #111; cursor: pointer; width: 100%; height: 200px; }
.promo-content { padding: 20px; text-align: left; }
.promo-title { color: white; font-size: 1.3rem; font-weight: 900; margin-bottom: 8px; line-height: 1.2; }
.promo-desc { color: #aaa; font-size: 0.9rem; line-height: 1.5; margin-bottom: 15px; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;}
.promo-action-btn { background: linear-gradient(135deg, var(--primary), #ff0055); color: white; border: none; padding: 12px 20px; border-radius: 25px; font-weight: bold; cursor: pointer; width: 100%; box-shadow: 0 4px 15px rgba(229, 9, 20, 0.4); transition: transform 0.2s; display: block; text-align: center; text-decoration: none;}
.promo-action-btn:hover { transform: scale(1.03); }

/* === SHAPE VARIATIONS === */

/* 1. Square Card Modal */
.promo-card { width: 90%; max-width: 400px; }

/* 2. Vertical Poster (Like a phone shape) */
.promo-vertical { width: 90%; max-width: 320px; }
.promo-vertical .promo-img-banner { height: 380px; }

/* 3. Horizontal Banner (Great for tops and bottoms) */
.promo-horizontal { width: 90%; max-width: 600px; display: flex; }
.promo-horizontal .promo-img-banner { width: 250px; height: 100%; min-height: 160px; }
.promo-horizontal .promo-content { flex-grow: 1; display: flex; flex-direction: column; justify-content: center;}

/* === SCREEN POSITIONS (Controls the Flex Overlay) === */
.pos-center       { justify-content: center;   align-items: center; }
.pos-top          { justify-content: center;   align-items: flex-start; padding-top: 40px; }
.pos-bottom       { justify-content: center;   align-items: flex-end;   padding-bottom: 40px;}
.pos-top-left     { justify-content: flex-start; align-items: flex-start; }
.pos-top-right    { justify-content: flex-end;   align-items: flex-start; }
.pos-bottom-left  { justify-content: flex-start; align-items: flex-end; }
.pos-bottom-right { justify-content: flex-end;   align-items: flex-end; }

/* === SIZE & SCALING MODIFIERS === */
/* Small Size */
.size-sm.promo-card { max-width: 280px; }
.size-sm.promo-vertical { max-width: 230px; }
.size-sm.promo-vertical .promo-img-banner { height: 300px; }
.size-sm.promo-horizontal { max-width: 480px; }
.size-sm .promo-title { font-size: 1.1rem; margin-bottom: 5px; }
.size-sm .promo-content { padding: 15px; }

/* Large Size */
.size-lg.promo-card { max-width: 550px; }
.size-lg.promo-vertical { max-width: 400px; }
.size-lg.promo-vertical .promo-img-banner { height: 480px; }
.size-lg.promo-horizontal { max-width: 750px; }
.size-lg.promo-horizontal .promo-img-banner { width: 300px; }

/* Extra Large (Theatre) Size */
.size-xl.promo-card { max-width: 800px; }
.size-xl.promo-vertical { max-width: 550px; }
.size-xl.promo-vertical .promo-img-banner { height: 550px; }
.size-xl.promo-horizontal { max-width: 1000px; }
.size-xl.promo-horizontal .promo-img-banner { width: 450px; }
.size-xl .promo-title { font-size: 2rem; margin-bottom: 15px; }
.size-xl .promo-desc { font-size: 1.1rem; line-height: 1.6; margin-bottom: 30px;}
.size-xl .promo-action-btn { font-size: 1.25rem; padding: 18px 25px; }

/* === PROMOTIONS HIGHLIGHT DEAL PRICETAG === */
.promo-price-container {
    text-align: center;
    width: 100%;
    margin: 5px 0 15px 0;
}

.promo-price-highlight {
    font-size: 1.8rem;
    font-weight: 900;
    color: #f1c40f; /* Premium Deal Gold */
    background: rgba(241, 196, 15, 0.06);
    border: 1px dashed rgba(241, 196, 15, 0.35);
    display: inline-block;
    padding: 6px 25px;
    border-radius: 10px;
    letter-spacing: 0.5px;
    text-shadow: 0 0 10px rgba(241, 196, 15, 0.25);
    box-shadow: inset 0 0 12px rgba(241, 196, 15, 0.03);
    animation: pulseGlow 2s infinite ease-in-out;
}

@keyframes pulseGlow {
    0% { transform: scale(1); box-shadow: 0 0 15px rgba(241, 196, 15, 0.1); }
    50% { transform: scale(1.02); box-shadow: 0 0 25px rgba(241, 196, 15, 0.25); }
    100% { transform: scale(1); box-shadow: 0 0 15px rgba(241, 196, 15, 0.1); }
}

/* Automatic Size Adapting */
.size-sm .promo-price-highlight { font-size: 1.3rem; padding: 4px 15px; border-radius: 6px; }
.size-xl .promo-price-highlight { font-size: 2.6rem; padding: 12px 35px; border-radius: 14px; }

/* ========================================= */
/* --- KPAY / PAY STATION CHECKOUT VIEWS --- */
/* ========================================= */

.payment-station-grid {
    display: grid;
    grid-template-columns: 340px 1fr;
    gap: 30px;
    align-items: start;
    margin-top: 20px;
}

.payment-method-box {
    background: #000;
    border: 2px solid #333;
    padding: 20px;
    border-radius: 12px;
    margin-bottom: 15px;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    gap: 15px;
    position: relative;
    overflow: hidden;
}

.payment-method-box:hover:not(.locked) {
    border-color: #666;
    background: #0a0a0a;
}

.payment-method-box.active {
    border-color: var(--primary);
    background: #110101;
}

.payment-method-box.active::after {
    content: "✓";
    position: absolute;
    top: 8px; right: 8px;       /* Pulled closer to edge */
    background-color: #2ecc71; /* Modern Success Green */
    color: white;              /* White tick */
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;        /* Forces perfect circle shape */
    font-size: 0.8rem;
    font-weight: 900;
    box-shadow: 0 2px 6px rgba(0,0,0,0.6);
}

.currency-badge-label {
    background: rgba(241,196,15,0.08);
    border: 1px solid rgba(241,196,15,0.25);
    color: #f1c40f;
    padding: 3px 10px;
    border-radius: 4px;
    font-size: 0.7rem;
    font-weight: bold;
    display: inline-block;
}

.voucher-upload-dragzone {
    border: 2px dashed #444;
    padding: 25px;
    border-radius: 10px;
    text-align: center;
    background: #000;
    cursor: pointer;
    transition: border-color 0.2s;
    margin-top: 15px;
}
.voucher-upload-dragzone:hover { border-color: var(--primary); }

.Myanmar-paygate-instruction-card {
    background: #181818;
    border-left: 4px solid var(--primary);
    padding: 15px 20px;
    border-radius: 8px;
    margin-bottom: 20px;
    line-height: 1.5;
}

/* Proof receipt preview elements */
#payment-receipt-view-frame {
    display: none;
    max-width: 250px;
    max-height: 380px;
    border-radius: 6px;
    margin-top: 15px;
    border: 2px solid #333;
    object-fit: cover;
}

#user-list-table {
    white-space: nowrap; /* Prevents text inside cells from wrapping */
}

/* Ensure the table doesn't get squashed by the sidebar */
        .edit-form-container {
    padding: 2rem;
    }

/* Fix the Action Buttons wrap */
    #user-list-table button {
        flex-shrink: 0;
 /* Ensures buttons don't shrink to nothing */
    margin-bottom: 2px;
}

/* Add this to your <style> tag */
#user-list-table input, 
#user-list-table select {
    margin: 0 !important;
    padding: 2px 4px !important;
    height: 30px !important; /* Forces a consistent, smaller height */
    vertical-align: middle;
}

#user-list-table td {
    padding: 6px 8px !important; /* Slim down the padding */
    line-height: 1.6 !important; /* Removes default paragraph spacing */
}

/* ==========================================*/
/* --- COIN REWARDS SYSTEM STYLE SHEETS --- */
/* ==========================================*/
/* --- UPDATED RED/GOLD COIN REWARDS SYSTEM STYLE SHEETS --- */
#header-coin-wallet {
    display: flex;
    align-items: center;
    gap: 8px;
    background: rgba(241, 196, 15, 0.08);
    border: 1px solid rgba(241, 196, 15, 0.25);
    padding: 6px 14px;
    border-radius: 20px;
    cursor: pointer;
    transition: all 0.2s ease;
    margin-left: 15px;
}
#header-coin-wallet:hover {
    background: rgba(241, 196, 15, 0.15);
    transform: scale(1.05);
}

/* Rewards Modal Overlay (Uses a clean dark red underglow) */
.rewards-overlay {
    display: none;
    position: fixed;
    top: 0; left: 0; width: 100%; height: 100%;
    background-color: rgba(5, 5, 8, 0.9);
    backdrop-filter: blur(15px);
    z-index: 5500;
    justify-content: center;
    align-items: center;
}
.rewards-overlay.active {
    display: flex;
}
.rewards-card {
    background: linear-gradient(180deg, #140d0e 0%, #0a0505 100%);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 24px;
    width: 90%;
    max-width: 480px;
    max-height: 85vh;
    overflow-y: auto;
    padding: 1.8rem;
    box-shadow: 0 15px 50px rgba(0, 0, 0, 0.8), 0 0 30px rgba(229, 9, 20, 0.12); /* Subtle Red Underglow */
    scrollbar-width: none;
}
.rewards-card::-webkit-scrollbar {
    display: none;
}

/* Daily Check-In Grid */
.checkin-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
    margin: 1.2rem 0;
}
.checkin-day {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 12px;
    padding: 10px 4px;
    text-align: center;
    transition: all 0.2s ease;
    position: relative;
}
/* Active Day highlighting (Now ATVEO Red to Bright Red) */
.checkin-day.active {
    background: linear-gradient(135deg, var(--primary) 0%, #ff4d4d 100%);
    border-color: rgba(255, 255, 255, 0.2);
    box-shadow: 0 4px 15px rgba(229, 9, 20, 0.4);
}
/* 🟢 CLAIMED DAY CARDS: Stronger emerald success tint and border */
.checkin-day.claimed {
    background: rgba(46, 204, 113, 0.08) !important; /* Increased from 0.03 (8% opacity) */
    border-color: rgba(46, 204, 113, 0.35) !important; /* Increased from 0.15 (35% opacity) */
    opacity: 0.95; /* Increased from 0.85 to make the card more solid */
    transition: all 0.2s ease;
}
.checkin-day.active span {
    color: #fff !important;
}

/* Buttons and Lists */
.btn-double {
    background: linear-gradient(90deg, var(--primary) 0%, #ff4d4d 100%);
    color: white;
    border: none;
    padding: 12px;
    border-radius: 25px;
    font-size: 0.95rem;
    font-weight: bold;
    cursor: pointer;
    width: 100%;
    box-shadow: 0 4px 15px rgba(229, 9, 20, 0.3);
    transition: transform 0.2s;
    margin-bottom: 1.5rem;
}
.btn-double:hover {
    transform: scale(1.02);
}
.rewards-section-title {
    font-size: 1.1rem;
    font-weight: bold;
    color: white;
    margin-bottom: 0.8rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.rewards-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.reward-item {
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.04);
    padding: 12px 16px;
    border-radius: 16px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.reward-item-info h4 {
    font-size: 0.85rem;
    color: white;
    margin-bottom: 3px;
}
.reward-item-info p {
    font-size: 0.72rem;
    color: #888;
}
.reward-pill {
    background: rgba(241, 196, 15, 0.08);
    border: 1px solid rgba(241, 196, 15, 0.2);
    color: #f1c40f;
    padding: 5px 12px;
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: bold;
    cursor: pointer;
    transition: all 0.2s;
}
.reward-pill:hover:not(.claimed) {
    background: rgba(241, 196, 15, 0.15);
    transform: scale(1.05);
}
.reward-pill.claimed {
    background: rgba(46, 204, 113, 0.1);
    border-color: rgba(46, 204, 113, 0.2);
    color: #2ecc71;
    cursor: default;
}

/* Linear Progress for Watch Time (Red-to-Gold) */
.timeline-track {
    position: relative;
    width: 100%;
    height: 8px; /* Increased height to fit dots AND labels */
    background: #222;
    border-radius: 4px;
    margin: 25px 0 30px 0;
}
/* Style for the dynamic labels */
.timeline-labels-container {
    position: relative;
    width: 100%;
    height: 20px;
    margin-top: -20px; /* Pulls labels closer to the track */
}

.timeline-label {
    position: absolute;
    top: 15px; /* Spacing from the track */
    transform: translateX(-50%); /* Center text under the dot */
    font-size: 0.65rem;
    color: #666;
    white-space: nowrap;
}
.timeline-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--primary), #f1c40f);
    border-radius: 3px;
    width: 0%;
}
.timeline-node {
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #333;
    border: 2px solid #000;
}
.timeline-node.reached {
    background: #f1c40f;
    box-shadow: 0 0 8px #f1c40f;
}

/* --- COIN PAYOUT SYSTEM STYLE ADDITIONS --- */
.payout-progress-track {
    width: 100%;
    height: 8px;
    background: #222;
    border-radius: 4px;
    position: relative;
    margin: 12px 0;
    overflow: hidden;
}
.payout-progress-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--primary) 0%, #ff4d4d 100%);
    width: 0%;
    transition: width 0.3s ease;
}
.payout-form-input {
    width: 100%;
    padding: 10px 12px;
    background: #000;
    border: 1px solid #333;
    color: white;
    border-radius: 8px;
    font-size: 0.85rem;
    margin-top: 5px;
    box-sizing: border-box;
}
.payout-form-input:focus {
    border-color: var(--primary);
    outline: none;
}

/* --- COIN VALUATION RATE CARD STYLES --- */
.payout-rate-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-top: 10px;
}
.payout-rate-card {
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 12px;
    padding: 15px 12px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    align-items: stretch; /* CHANGED: Let child rows stretch to full width */
    text-align: center;
    position: relative;
    overflow: hidden;
    transition: all 0.2s ease;
}
.payout-rate-card:hover {
    border-color: rgba(241, 196, 15, 0.3);
    background: rgba(241, 196, 15, 0.02);
    transform: translateY(-2px);
}
.payout-rate-coins {
    font-size: 0.9rem;
    font-weight: 800;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center; /* Keeps the top coin text centered */
    gap: 4px;
    margin-bottom: 6px;
}
/* Centered alignment for payout USD value with PayPal Logo */
.payout-rate-val-usd {
    font-size: 0.85rem;
    color: #f1c40f;
    font-weight: bold;
    display: flex;
    align-items: center;      /* FIXED: Correct vertical alignment */
    justify-content: flex-start; /* CHANGED: Left-align contents */
    gap: 8px;
    padding-left: 20px;       /* CHANGED: Uniform left indent for vertical alignment */
    box-sizing: border-box;
    width: 100%;
}

/* Centered alignment for payout MMK value with KPay Logo */
.payout-rate-val-mmk {
    font-size: 0.85rem;
    color: #888;
    font-weight: bold;
    display: flex;
    align-items: center;      /* FIXED: Correct vertical alignment */
    justify-content: flex-start; /* CHANGED: Left-align contents */
    gap: 8px;
    padding-left: 20px;       /* CHANGED: Matches USD row indent perfectly */
    box-sizing: border-box;
    width: 100%;
}

/* Optimized sizes for the PayPal & KPay logos in Valuation Tiers */
.payout-rate-val-usd img, 
.payout-rate-val-mmk img {
    width: 35px !important;    /* Size adjustments for high resolution */
    height: 35px !important;
    object-fit: contain;
    flex-shrink: 0;
    border-radius: 3px;
}

/* --- ACCESSIBILITY BADGE CONTAINER --- */
.floating-claim-fab {
    position: fixed;
    bottom: 30px;
    right: 30px;
    
    /* 🟢 INCREASED SIZES (Up from 100px) */
    width: 130px; 
    height: 130px;
    
    border-radius: 50%;
    cursor: pointer;
    z-index: 1000;
    display: flex;
    justify-content: center;
    align-items: center;
    isolation: isolate;
    animation: floatRewardBadge 4s ease-in-out infinite;
}

/* --- THE IMAGE CONTAINER --- */
.claim-badge-container {
    /* 🟢 INCREASED ACTUAL CHEST GRAPHIC SIZE (Up from 80px) */
    width: 110px; 
    height: 110px;
    
    z-index: 5;
    transition: transform 0.25s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.claim-badge-container img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.85));
}

/* Hover scales and tilts internally */
.floating-claim-fab:hover .claim-badge-container {
    transform: scale(1.12) rotate(4deg);
}

/* Press Feedback */
.floating-claim-fab:active .claim-badge-container {
    transform: scale(0.92);
    transition: transform 0.05s ease;
}

/* --- TOOLTIP COORDINATE POSITION --- */
.floating-claim-fab .claim-tooltip {
    position: absolute;
    
    /* 🟢 PUSHED FURTHER UPWARD (Up from 95px to clear the new 110px asset size) [2] */
    bottom: 125px; 
    
    right: 0px;
    background: #12121c;
    color: white;
    border: 1px solid rgba(241, 196, 15, 0.2);
    padding: 5px 12px;
    border-radius: 8px;
    font-size: 0.72rem;
    font-weight: bold;
    white-space: nowrap;
    pointer-events: none;
    opacity: 0;
    box-shadow: 0 4px 15px rgba(0,0,0,0.6);
    transition: opacity 0.2s ease, transform 0.2s ease;
    transform: translateY(5px);
    z-index: 10;
}

.floating-claim-fab:hover .claim-tooltip {
    opacity: 1;
    transform: translateY(0);
}

body.feed-mode-active .floating-claim-fab {
    display: none !important;
}

/* --- ANIMATION COORDINATES (Unchanged) --- */
@keyframes floatRewardBadge {
    0% { transform: translateY(0); }
    50% { transform: translateY(-10px); }
    100% { transform: translateY(0); }
}

/* Responsive, vertical Floating position for your Daily Goal check-in widget [1, 2.4] */
.feed-checking-widget-floating {
    display: flex;
    flex-direction: column; /* 🟢 Stacks elements vertically like your other buttons */
    align-items: center;    /* Centered circle and text aligner [2.3] */
    gap: 5px;
    cursor: pointer;
    transition: transform 0.2s;
    box-sizing: border-box;
    
    position: absolute;
    top: 80px;
    right: 15px; 
    z-index: 1500;
    width: 65px; /* Compact standard sidebar column width bounds [1.2, 2.3] */
}

.feed-checking-widget-floating:hover {
    transform: scale(1.08);
}

@media (min-width: 850px) {
    /* Dynamic, independent adjustments [1.3, 2.1, 2.5] */
    body.feed-mode-active .feed-checking-widget-floating {
        /* 🟢 SHIFT TO THE RIGHT: Increase X value to move it cleanly into the black space */
        left: calc(50% - 210px) !important; 
        
        /* Adjust the Y coordinate so it lines up beautifully next to the Full Screen/Views icon block [2.5] */
        top: 85px !important; 
    }
}

/* ========================================= */
/* --- MONETIZATION & PARTNER HUB STYLES --- */
/* ========================================= */
.monetize-hero {
    background: linear-gradient(to right, #2a0808, #111111);
    border: 1px solid rgba(229, 9, 20, 0.2);
    border-radius: 12px;
    padding: 3rem 2rem;
    text-align: center;
    margin-bottom: 2rem;
    box-shadow: 0 10px 40px rgba(0,0,0,0.5);
}
.monetize-card-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; margin-bottom: 2rem; }
.monetize-track-card {
    background: #0a0a0a; border-radius: 12px; padding: 2rem; border: 1px solid #222; transition: transform 0.2s; position: relative; overflow: hidden;
}
.monetize-track-card:hover { transform: translateY(-5px); border-color: #f1c40f; }
.m-progress-container { margin-bottom: 1rem; }
.m-progress-bg { background: #222; border-radius: 20px; height: 8px; width: 100%; overflow: hidden; }
.m-progress-fill { background: linear-gradient(90deg, #e50914, #f1c40f); height: 100%; width: 0%; border-radius: 20px; transition: width 0.8s ease-out; }
.ethics-box { background: rgba(243, 156, 18, 0.05); border-left: 4px solid #f39c12; padding: 20px; border-radius: 0 8px 8px 0; margin-top: 10px; line-height: 1.6;}
@media (max-width: 800px) { .monetize-card-grid { grid-template-columns: 1fr; } }

/* ========================================= */
/* --- PREMIUM FAQ ACCORDION STYLES --- */
/* ========================================= */
.faq-container { max-width: 900px; margin: 0 auto; padding: 2rem 0; }

.faq-item {
    background: linear-gradient(145deg, #111111 0%, #080808 100%);
    border: 1px solid #222; 
    border-radius: 12px; 
    margin-bottom: 16px; 
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 4px 15px rgba(0,0,0,0.3);
    overflow: hidden; /* Keeps the border radius clean when expanding */
}

.faq-item:hover { 
    border-color: #444; 
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(0,0,0,0.6);
    background: linear-gradient(145deg, #151515 0%, #0a0a0a 100%);
}

/* 🟢 When the accordion is clicked open */
.faq-item.open {
    border-color: rgba(229, 9, 20, 0.5); /* ATVEO Red border */
    background: linear-gradient(145deg, #1a0505 0%, #0a0a0a 100%); /* Slight red tint */
    box-shadow: 0 10px 30px rgba(229, 9, 20, 0.15);
}

.faq-question {
    /* 🟢 THE FIX: Changed from 1.5rem on all sides to 1rem (top/bottom) and 1.5rem (left/right) */
    padding: 1rem 1.5rem; 
    display: flex; 
    justify-content: space-between; 
    align-items: center; 
    color: white; 
    cursor: pointer; 
    font-size: 1.05rem; 
    font-weight: bold;
    letter-spacing: 0.3px;
}

/* 🟢 Upgraded Number Badge (Glowing Red) */
.faq-num-badge {
    background: rgba(229, 9, 20, 0.1); 
    color: var(--primary); 
    border: 1px solid rgba(229, 9, 20, 0.3);
    border-radius: 6px; 
    padding: 4px 10px; 
    font-size: 0.85rem; 
    margin-right: 15px;
    font-weight: 900;
    box-shadow: 0 2px 8px rgba(229, 9, 20, 0.2);
}

/* 🟢 Upgraded Plus Icon (Perfectly Centered & Thicker using CSS Shapes) */
.faq-icon {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: #222;
    position: relative;
    color: transparent; /* Hides the ugly text '+' */
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); 
    flex-shrink: 0;
    margin-left: 15px;
}

/* Draws the horizontal line of the + */
.faq-icon::before {
    content: '';
    position: absolute;
    top: 50%; left: 50%;
    width: 16px; 
    height: 3px; /* 🟢 This makes it nice and thick! */
    background-color: #aaa;
    transform: translate(-50%, -50%);
    transition: background-color 0.3s;
    border-radius: 2px; /* Slightly rounds the edges of the plus sign */
}

/* Draws the vertical line of the + */
.faq-icon::after {
    content: '';
    position: absolute;
    top: 50%; left: 50%;
    width: 3px; /* 🟢 Matches the thickness above */
    height: 16px; 
    background-color: #aaa;
    transform: translate(-50%, -50%);
    transition: background-color 0.3s;
    border-radius: 2px;
}

/* Hover effects */
.faq-item:hover .faq-icon {
    background: #333;
}

.faq-item:hover .faq-icon::before,
.faq-item:hover .faq-icon::after {
    background-color: white; /* Brightens the plus sign on hover */
}

/* Spins into an 'X' and turns red when open */
.faq-item.open .faq-icon { 
    transform: rotate(45deg); 
    background: var(--primary);
    box-shadow: 0 0 15px rgba(229, 9, 20, 0.5);
}

.faq-item.open .faq-icon::before,
.faq-item.open .faq-icon::after {
    background-color: white;
}

.faq-answer-wrapper {
    max-height: 0; 
    overflow: hidden; 
    transition: max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.faq-answer {
    /* 🟢 THE FIX: Slimmed down the bottom padding and top padding */
    padding: 0 1.5rem 1rem 1.5rem; 
    color: #bbb; 
    line-height: 1.7; 
    font-size: 0.95rem;
    border-top: 1px dashed rgba(255,255,255,0.08); 
    margin-top: 5px;
    padding-top: 1.2rem; 
}

.faq-answer a.ref-btn {
    display: inline-flex; align-items: center; gap: 8px; background: rgba(52, 152, 219, 0.1); color: #3498db; text-decoration: none; padding: 8px 16px; border: 1px solid rgba(52, 152, 219, 0.3); border-radius: 25px; font-size: 0.85rem; font-weight: bold; margin-top: 15px; transition: all 0.2s;
}

.faq-answer a.ref-btn:hover { background: #3498db; color: white; transform: scale(1.05); box-shadow: 0 4px 15px rgba(52, 152, 219, 0.4); }

/* Custom Badge/Ribbon for Subscription & Coin Cards */
.plan-badge-ribbon {
    position: absolute;
    top: 0;
    right: 0;
    background: linear-gradient(135deg, #f1c40f, #e67e22); /* Gold for BEST VALUE / POPULAR */
    color: #000;
    padding: 5px 14px;
    font-size: 0.68rem;
    font-weight: 900;
    text-transform: uppercase;
    border-top-right-radius: 10px;   /* Fits flush with card corner */
    border-bottom-left-radius: 10px; /* Elegant ribbon slope */
    box-shadow: 0 4px 12px rgba(0,0,0,0.5);
    letter-spacing: 0.5px;
    z-index: 10;
}

/* Green theme specifically for FREE / EXTRA Bonus Badges */
.plan-badge-ribbon.bonus-badge {
    background: linear-gradient(135deg, #2ecc71, #27ae60) !important; /* Emerald Green */
    color: #ffffff !important;
    box-shadow: 0 4px 12px rgba(46, 204, 113, 0.3) !important;
}

/* Branded Pulsing Animation for the Loading Page Logo */
@keyframes pulseLogo {
    0% {
        transform: scale(1);
        opacity: 0.8;
    }

    50% {
        transform: scale(1.03);
        opacity: 1;
    }

    100% {
        transform: scale(1);
        opacity: 0.8;
    }
}

/* Reserved slots for User Management Actions */
.user-action-grid {
    display: grid;
    grid-template-columns: 65px 85px 65px 120px 55px 65px;
 /* Fixed width for each button slot */
    gap: 6px;
    align-items: center;
    justify-content: center;
}

.user-action-grid button {
    height: 30px;
    padding: 0 8px !important;
    font-size: 0.7rem !important;
    margin: 0 !important;
    width: 100%;
 /* Fill the grid slot */
    border-radius: 4px;
    font-weight: bold;
    cursor: pointer;
    white-space: nowrap;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}

/* Make the Reset Application button slightly smaller text to fit the slot */
.btn-reset-app {
    font-size: 0.65rem !important;
    background: #111;
    color: #9b59b6;
    border: 1px solid #9b59b6;
}

.btn-reset-app:hover {
    background: #9b59b6;
    color: white;
}

.table-user-cell {
    display: flex;
    align-items: center;
    gap: 12px;
}

.table-avatar {
    width: 35px;
    height: 35px;
    border-radius: 50%;
    object-fit: cover;
    border: 1px solid var(--border);
    cursor: pointer;
    transition: transform 0.2s, border-color 0.2s;
}

.table-avatar:hover {
    transform: scale(1.1);
    border-color: var(--primary);
}


/* --- COLLAPSIBLE SETTINGS MENU --- */
.feed-settings-menu {
    position: absolute;
    bottom: 65px;
 /* Sits perfectly above the Settings gear button */
    left: 0;
    display: none;
    flex-direction: column;
    gap: 12px;
    background: rgba(10, 10, 10, 0.95);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.15);
    padding: 15px;
    border-radius: 20px;
    z-index: 2100;
    box-shadow: 0 10px 40px rgba(0,0,0,0.9);
    width: max-content;
 /* Prevents text labels on the right from squishing */
    animation: slideUpFade 0.25s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

@keyframes slideUpFade {
    from {
        transform: translateY(15px);
        opacity: 0;
    }

    to {
        transform: translateY(0);
        opacity: 1;
    }
}

.feed-settings-menu.active {
    display: flex;
}

/* Responsive Rule: Hide all text labels on screens below 850px for a clean icon-only layout */
@media (max-width: 850px) {
    .feed-sidebar span,
    .feed-settings-menu span {
        display: none !important;
    }
}

/* Ensure the grid and pagination container span the full remaining width */
#genre-view .view-section {
    width: 100%;
}

#genre-pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
 /* Force full width */
    margin-top: 30px;
    margin-bottom: 20px;
    position: relative;
 /* Helps override flex-start from genre-layout */
    ;
}

/* Ensure pagination buttons look consistent */
.pagination-btn {
    padding: 5px 12px;
    background: #222;
    color: #aaa;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}

.pagination-btn.active {
    background: var(--primary) !important;
    color: white !important;
}

.pagination-btn:hover {
    background-color: var(--primary) !important;
 /* Brightens up on hover */
    color: white !important;
}

/* =========================================================================
   GOOGLE TRANSLATE SUPPRESSION & CUSTOM LANGUAGE SELECTOR
   ========================================================================= */

/* Hide default Google Translate widgets, banners, and tooltips */
iframe.goog-te-banner-frame,
.goog-te-banner-frame,
.goog-te-balloon-frame,
.skiptranslate,
.goog-te-gadget,
.goog-logo-link,
#google_translate_element,
[class*="VIpgJd"],
[id*="VIpgJd"],
iframe[class*="goog"],
iframe[id*="goog"],
iframe[class*="translate"],
iframe[id*="translate"] {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
    width: 0px !important;
    height: 0px !important;
    position: absolute !important;
    top: -9999px !important;
    left: -9999px !important;
}

body {
    top: 0px !important;
    position: static !important;
}

#goog-gt-tt,
.goog-tooltip,
.goog-tooltip:hover,
.goog-te-spinner-pos,
.goog-te-gadget-icon,
.goog-te-spinner,
.goog-te-spinner-frame {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
    width: 0px !important;
    height: 0px !important;
}

/* Prevent Google Translate from triggering hover scripts that cause flickering/disappearing text */
font {
    pointer-events: none !important;
}

/* Ensure Google's highlight class never overrides your text color */
.goog-text-highlight {
    background-color: transparent !important;
    box-shadow: none !important;
    color: inherit !important;
}

#gtx-trans,
.gtx-trans,
[id*="gtx-trans"],
[class*="gtx-trans"] {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

/* Style custom selector to match ATVEO navigation pills */
#custom-language-select {
    background-color: rgba(255, 255, 255, 0.05) !important;
    border: 1px solid var(--border) !important;
    color: var(--text-muted) !important;
    font-size: 0.85rem !important;
    font-weight: 500 !important;
    padding: 2px 1.2rem !important;
    border-radius: 9999px !important;
    cursor: pointer !important;
    outline: none !important;
    height: 30px !important;
    box-sizing: border-box !important;
    appearance: none !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    transition: all 0.2s ease;
}

#custom-language-select:hover {
    color: white !important;
    background-color: rgba(255, 255, 255, 0.12) !important;
    border-color: #555 !important;
}

#custom-language-select option {
    background-color: #111111 !important;
    color: #ffffff !important;
}

/* --- UNIFIED CUSTOM SEARCHABLE SELECT DROPDOWNS --- */
.custom-select-container {
    position: relative;
    width: 100%;
}

.custom-select-trigger {
    width: 100%;
    padding: 0.8rem;
    background: #111;
    color: white;
    border: 1px solid var(--border);
    border-radius: 6px;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.85rem;
    user-select: none;
    box-sizing: border-box;
    transition: border-color 0.2s;
}

.custom-select-trigger:hover {
    border-color: #555;
}

.custom-select-arrow {
    font-size: 0.65rem;
    color: var(--text-muted);
}

.custom-select-dropdown {
    position: absolute;
    top: calc(100% + 5px);
    left: 0;
    right: 0;
    background: #111;
    border: 1px solid var(--border);
    border-radius: 8px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.9);
    z-index: 5000;
    display: none;
    padding: 8px;
    box-sizing: border-box;
}

.custom-select-search {
    width: 100%;
    padding: 8px 12px;
    background: #000;
    border: 1px solid #333;
    color: white;
    border-radius: 4px;
    font-size: 0.8rem;
    margin-bottom: 8px;
    outline: none;
    box-sizing: border-box;
}

.custom-select-search:focus {
    border-color: var(--primary);
}

.custom-select-options {
    max-height: 250px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 2px;
    scrollbar-width: thin;
    scrollbar-color: #333 #111;
}

.custom-select-options::-webkit-scrollbar {
    width: 6px;
}

.custom-select-options::-webkit-scrollbar-thumb {
    background: #333;
    border-radius: 10px;
}

.custom-select-option {
    padding: 8px 12px;
    color: #ccc;
    cursor: pointer;
    border-radius: 4px;
    font-size: 0.8rem;
    transition: all 0.15s ease;
    text-align: left;
}

.custom-select-option:hover {
    background: var(--primary);
    color: white;
}

.custom-select-option.selected {
    background: rgba(229, 9, 20, 0.15);
    color: white;
    font-weight: bold;
    border-left: 3px solid var(--primary);
}