/* 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;
    line-clamp: 8;
    /* ✅ Standard Property လေး ထည့်ပေးရန် */
    -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;
    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;
    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;
    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;
    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;
    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;
    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;
        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;
}

/* 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;
    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);
}

/* ==========================================================
   WATCH RECORDS 7-DAY AUTO-DELETE SETTINGS
   ========================================================== */
.watch-record-setting-divider {
    height: 1px;
    background-color: rgba(255, 255, 255, 0.08);
    margin: 14px 0;
}

.watch-record-setting-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}

.setting-text-col {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.setting-text-col .setting-title {
    font-size: 12.5px;
    font-weight: 700;
    color: #FFFFFF;
    line-height: 1.3;
}

.setting-date-row {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    color: rgba(255, 255, 255, 0.5);
    font-weight: 500;
    margin-top: 2px;
}

.setting-date-row strong {
    color: #FFFFFF;
    font-family: monospace;
    letter-spacing: 0.5px;
}

/* Custom Square Checkbox */
.custom-checkbox-container {
    position: relative;
    display: inline-block;
    width: 20px;
    height: 20px;
    cursor: pointer;
    flex-shrink: 0;
    margin-top: 2px;
}

.custom-checkbox-container input {
    opacity: 0;
    width: 0;
    height: 0;
    position: absolute;
}

.custom-checkmark {
    position: absolute;
    top: 0;
    left: 0;
    height: 20px;
    width: 20px;
    background-color: rgba(255, 255, 255, 0.06);
    border: 1.5px solid rgba(255, 255, 255, 0.25);
    border-radius: 5px;
    transition: all 0.2s ease;
}

.custom-checkbox-container input:checked~.custom-checkmark {
    background-color: #E50914;
    border-color: #E50914;
    box-shadow: 0 0 10px rgba(229, 9, 20, 0.5);
}

.custom-checkmark:after {
    content: "";
    position: absolute;
    display: none;
    left: 6px;
    top: 2px;
    width: 5px;
    height: 10px;
    border: solid white;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

.custom-checkbox-container input:checked~.custom-checkmark:after {
    display: block;
}

/* Footer Status & Clear Action */
.records-clean-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 10px;
    padding-top: 8px;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
    font-size: 10.5px;
    color: rgba(255, 255, 255, 0.45);
}

.records-clean-footer .status-indicator {
    display: flex;
    align-items: center;
    gap: 5px;
}

.status-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.2);
}

.status-dot.active {
    background: #10B981;
    box-shadow: 0 0 8px #10B981;
}

.btn-clear-records-now {
    background: transparent;
    border: none;
    color: rgba(255, 255, 255, 0.5);
    font-size: 10.5px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 0;
    transition: color 0.2s;
}

.btn-clear-records-now:hover {
    color: #E50914;
    text-decoration: underline;
}