/**
         * VideoHub360 Frontend Styles
         * 
         * CSS custom properties are now defined in variables.css
         * which is loaded first. This file contains component-specific styles.
         */

        /* Toast notification styles - replaces inline cssText */
        .vh360-moderation-toast {
            position: fixed;
            top: 80px;
            right: 20px;
            color: var(--vh360-color-white);
            padding: 12px 20px;
            border-radius: var(--vh360-radius-md);
            font-size: 14px;
            font-weight: 500;
            /* match the system font stack used in chat.css so toast notifications remain consistent */
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
            line-height: 1.4;
            z-index: var(--vh360-z-modal);
            animation: slideInRight 0.3s ease-out;
            max-width: 300px;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
        }

        .vh360-moderation-toast.toast-success {
            background: var(--vh360-color-success);
        }

        .vh360-moderation-toast.toast-error {
            background: var(--vh360-color-error);
        }

        .vh360-moderation-toast.toast-info {
            background: var(--vh360-color-primary);
        }

        /* Modal notification styles - replaces inline cssText */
        .vh360-moderation-notification {
            position: fixed;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            color: var(--vh360-color-white);
            padding: 20px 24px;
            border-radius: var(--vh360-radius-lg);
            font-size: 16px;
            font-weight: 500;
            z-index: var(--vh360-z-modal);
            box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
            text-align: center;
            max-width: 400px;
            width: 90%;
            animation: moderationNotificationFadeIn 0.3s ease-out;
        }

        .vh360-moderation-notification.notification-error {
            background: var(--vh360-color-error);
        }

        .vh360-moderation-notification.notification-warning {
            background: var(--vh360-color-warning);
        }

        .vh360-moderation-notification.notification-info {
            background: var(--vh360-color-primary);
        }

        .vh360-moderation-notification .notification-icon {
            font-size: 32px;
            margin-bottom: 12px;
        }

        /* Animation keyframes for notifications */
        @keyframes slideInRight {
            from {
                transform: translateX(400px);
                opacity: 0;
            }
            to {
                transform: translateX(0);
                opacity: 1;
            }
        }

        @keyframes slideOutRight {
            from {
                transform: translateX(0);
                opacity: 1;
            }
            to {
                transform: translateX(400px);
                opacity: 0;
            }
        }

        @keyframes fadeInScale {
            from {
                transform: translate(-50%, -50%) scale(0.9);
                opacity: 0;
            }
            to {
                transform: translate(-50%, -50%) scale(1);
                opacity: 1;
            }
        }

        @keyframes moderationNotificationFadeIn {
            from {
                transform: translate(-50%, -50%) scale(0.9);
                opacity: 0;
            }
            to {
                transform: translate(-50%, -50%) scale(1);
                opacity: 1;
            }
        }

        @keyframes moderationNotificationFadeOut {
            from {
                transform: translate(-50%, -50%) scale(1);
                opacity: 1;
            }
            to {
                transform: translate(-50%, -50%) scale(0.9);
                opacity: 0;
            }
        }

        /* Main wrapper - consolidated layout and theme compatibility */
        .videohub360-main-wrapper {
            /* Layout properties */
            width: 85%;
            max-width: 1600px;
            margin: 20px auto;
            padding: 12px;
            background: var(--vh360-bg-white);
            border-radius: var(--vh360-radius-md);
            display: flex;
            gap: 20px;
            flex-wrap: wrap;
            /* Theme compatibility and positioning */
            clear: both;
            position: relative;
            z-index: var(--vh360-z-base);
            /* Prevent theme headers from overlapping */
            margin-top: 30px;
            margin-bottom: 30px;
            /* Prevent content from being hidden behind fixed elements */
            overflow: visible;
        }
        
        /* Content area - consolidated properties */
        .videohub360-content-area {
            position: relative;
            z-index: var(--vh360-z-base);
            flex: 1 1 380px;
            min-width: 0;
        }
        
        /* Fix for themes with sticky/fixed headers */
        body.admin-bar .videohub360-main-wrapper {
            margin-top: 50px; /* Account for admin bar */
        }
        
        /* Additional spacing for common theme header heights */
        .videohub360-video-player,
        .vh360-livestream-player-wrap {
            position: relative;
            z-index: 1;
            /* Remove top margin to eliminate 10px gap above video containers */
            margin-top: 0;
        }
        .videohub360-sidebar {
            flex: 0 0 460px;
            min-width: 280px;
            background: #f7f7f7;
            border-radius: var(--vh360-radius-md);
            padding: 16px 12px;
            max-height: 800px;
            overflow-y: auto;
        }

        /* Full-width layout styles */
        .videohub360-main-wrapper.videohub360-full-width {
            /* Remove flex layout for full-width */
            display: block;
            width: 90%;
            max-width: 1200px;
        }

        .videohub360-main-wrapper.videohub360-full-width .videohub360-content-area {
            /* Make content area take full width */
            flex: none;
            width: 100%;
            max-width: none;
        }

        .videohub360-main-wrapper.videohub360-full-width .videohub360-sidebar {
            /* Hide sidebar in full-width layout */
            display: none;
        }

        /* Responsive sidebar - gradual scaling for single video page */
        @media (max-width: 1400px) {
            .videohub360-sidebar {
                flex: 0 0 320px;
                min-width: 260px;
                max-width: 320px;
            }
            
            /* Scale down sidebar content */
            .videohub360-sidebar h2 {
                font-size: 1.1em;
            }
            
            .videohub360-sidebar-thumbnail {
                width: 110px;
                height: 62px;
            }
            
            .videohub360-sidebar-title {
                font-size: 1.05em;
            }
            
            .videohub360-sidebar-meta {
                font-size: 0.9em;
            }
        }
        
        @media (max-width: 1200px) {
            .videohub360-sidebar {
                flex: 0 0 290px;
                min-width: 240px;
                max-width: 290px;
                padding: 14px 11px;
            }
            
            /* Further scale down sidebar content */
            .videohub360-sidebar h2 {
                font-size: 1.05em;
                margin-bottom: 14px;
            }
            
            .videohub360-sidebar li {
                margin-bottom: 18px;
                gap: 12px;
            }
            
            .videohub360-sidebar-thumbnail {
                width: 100px;
                height: 56px;
            }
            
            .videohub360-sidebar-title {
                font-size: 1em;
            }
            
            .videohub360-sidebar-meta {
                font-size: 0.88em;
            }
        }
        
        @media (max-width: 1024px) {
            .videohub360-sidebar {
                flex: 0 0 260px;
                min-width: 220px;
                max-width: 260px;
                padding: 13px 9px;
            }
            
            /* More compact sidebar content */
            .videohub360-sidebar h2 {
                font-size: 1em;
                margin-bottom: 12px;
            }
            
            .videohub360-sidebar li {
                margin-bottom: 16px;
                gap: 10px;
            }
            
            .videohub360-sidebar-thumbnail {
                width: 90px;
                height: 51px;
            }
            
            .videohub360-sidebar-title {
                font-size: 0.95em;
            }
            
            .videohub360-sidebar-meta {
                font-size: 0.85em;
            }
        }
        
        @media (max-width: 900px) {
            .videohub360-sidebar {
                flex: 0 0 240px;
                min-width: 200px;
                max-width: 240px;
                padding: 12px 8px;
            }
            
            /* Continue compact scaling */
            .videohub360-sidebar h2 {
                font-size: 0.98em;
                margin-bottom: 10px;
            }
            
            .videohub360-sidebar li {
                margin-bottom: 14px;
                gap: 8px;
            }
            
            .videohub360-sidebar-thumbnail {
                width: 85px;
                height: 48px;
            }
            
            .videohub360-sidebar-title {
                font-size: 0.92em;
            }
            
            .videohub360-sidebar-meta {
                font-size: 0.82em;
            }
        }
        
        @media (max-width: 820px) {
            .videohub360-sidebar {
                flex: 0 0 220px;
                min-width: 180px;
                max-width: 220px;
                padding: 11px 7px;
            }
            
            /* Further compact scaling */
            .videohub360-sidebar h2 {
                font-size: 0.95em;
                margin-bottom: 9px;
            }
            
            .videohub360-sidebar li {
                margin-bottom: 12px;
                gap: 7px;
            }
            
            .videohub360-sidebar-thumbnail {
                width: 80px;
                height: 45px;
            }
            
            .videohub360-sidebar-title {
                font-size: 0.9em;
            }
            
            .videohub360-sidebar-meta {
                font-size: 0.8em;
            }
        }

        /* Full-width video containers - remove width restrictions and centering */
        .videohub360-main-wrapper.videohub360-full-width .videohub360-custom-embed-container,
        .videohub360-main-wrapper.videohub360-full-width .vh360-livestream-iframe,
        .videohub360-main-wrapper.videohub360-full-width .videohub360-static-poster-wrap,
        .videohub360-main-wrapper.videohub360-full-width .videohub360-video-player #videohub360-main-video {
            max-width: none;
            width: 100%;
            margin-left: 0;
            margin-right: 0;
        }
        
        /* Video player styles - enhanced for all video types */
        .videohub360-video-player {
            margin-bottom: 16px;
            position: relative;
            width: 100%;
            /* Remove top padding to eliminate gap above video */
            padding-top: 0;
        }
        
        /* Improved video responsiveness for all video types */
        .videohub360-video-player video,
        .videohub360-video-player iframe,
        .videohub360-video-player embed,
        .videohub360-video-player object {
            width: 100%;
            height: auto;
            max-width: 100%;
            display: block;
            /* Ensure videos don't get cut off */
            box-sizing: border-box;
        }
        
        /* Enhanced custom HTML embed container - matches MP4 and livestream styling */
        .videohub360-custom-embed-container {
            width: 100%;
            max-width: 1260px;
            margin: 0 auto;
            position: relative;
            background: #000;
            border-radius: var(--vh360-radius-md);
            overflow: hidden;
            /* Ensure proper aspect ratio for embeds */
            aspect-ratio: 16/9;
            display: flex;
            align-items: stretch;
            justify-content: stretch;
        }
        
        /* Style all embed content within custom HTML container */
        .videohub360-custom-embed-container iframe,
        .videohub360-custom-embed-container embed,
        .videohub360-custom-embed-container object,
        .videohub360-custom-embed-container video {
            width: 100%;
            height: 100%;
            border: none;
            display: block;
            background: #000;
            border-radius: inherit;
            margin: 0;
            padding: 0;
        }
        
        /* Handle non-video custom content */
        .videohub360-custom-embed-container > *:not(iframe):not(embed):not(object):not(video) {
            width: 100%;
            height: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        
        /* Enhanced livestream iframe container - proper responsive behavior */
        .vh360-livestream-iframe {
            width: 100%;
            aspect-ratio: 16/9;
            max-width: 1260px;
            margin: 0 auto;
            background: #000;
            display: flex;
            align-items: stretch;
            justify-content: stretch;
            position: relative;
            border-radius: var(--vh360-radius-md);
            overflow: hidden;
            z-index: 1;
        }
        
        /* Agora Interactive Mode - 4/3 aspect ratio for desktop */
        .vh360-livestream-iframe.vh360-agora-interactive-container {
            aspect-ratio: 4/3;
        }
        
        .vh360-livestream-iframe iframe,
        .vh360-livestream-iframe embed,
        .vh360-livestream-iframe object,
        .vh360-livestream-iframe video {
            width: 100%;
            height: 100%;
            aspect-ratio: 16/9;
            border: none;
            display: block;
            background: #000;
            margin: 0;
            padding: 0;
            object-fit: contain; /* Allow portrait videos to display properly */
        }
        
        /* Agora Interactive Mode nested elements - 4/3 aspect ratio for desktop */
        .vh360-livestream-iframe.vh360-agora-interactive-container iframe,
        .vh360-livestream-iframe.vh360-agora-interactive-container embed,
        .vh360-livestream-iframe.vh360-agora-interactive-container object,
        .vh360-livestream-iframe.vh360-agora-interactive-container video {
            aspect-ratio: 4/3;
        }
        
        /* Regular MP4 video player styling consistency */
        .videohub360-video-player #videohub360-main-video {
            width: 100%;
            max-width: 1260px;
            margin: 0 auto;
            display: block;
            border-radius: var(--vh360-radius-md);
            background: #000;
        }
        
        /* Poster/thumbnail styling for consistent aspect ratio */
        .videohub360-static-poster-wrap {
            width: 100%;
            aspect-ratio: 16/9;
            max-width: 1260px;
            margin: 0 auto;
            background: #000;
            position: relative;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            border-radius: var(--vh360-radius-md);
            overflow: hidden;
        }
        
        /* === ENHANCED MOBILE RESPONSIVE LAYOUT - CRITICAL FOR PROPER MOBILE DISPLAY === */
        /* Main wrapper mobile layout - stack content vertically on mobile */
        @media (max-width: 768px) {
            .videohub360-main-wrapper {
                width: 95%;
                margin: 15px auto;
                padding: 8px;
                flex-direction: column;
                gap: 16px;
                /* Ensure proper mobile margins */
                margin-top: 20px;
                margin-bottom: 20px;
            }
            
            /* Full-width layout specific mobile styles */
            .videohub360-main-wrapper.videohub360-full-width {
                width: 98%;
                max-width: none;
            }
            
            .videohub360-content-area {
                /* Full width on mobile */
                flex: none;
                width: 100%;
                margin-bottom: 16px;
            }
            
            .videohub360-sidebar {
                /* Full width on mobile, positioned below content */
                flex: none;
                width: 100%;
                min-width: auto;
                max-height: none;
                /* Reduce padding on mobile */
                padding: 12px 8px;
                margin-top: 0;
            }
        }
        
        @media (max-width: 600px) {
            .videohub360-main-wrapper {
                width: 98%;
                margin: 10px auto;
                padding: 6px;
                gap: 12px;
                /* Tighter mobile margins */
                margin-top: 15px;
                margin-bottom: 15px;
            }
            
            .videohub360-content-area {
                margin-bottom: 12px;
            }
            
            .videohub360-sidebar {
                padding: 10px 6px;
            }
            
            /* Extra small screens: even more compact overlay for broadcast mode */
            .vh360-agora-broadcast .vh360-overlay-content {
                max-width: 95%;
                padding: 6px 10px;
            }
            
            .vh360-agora-broadcast .vh360-overlay-icon {
                font-size: 1.1em;
                margin-bottom: 4px;
            }
            
            .vh360-agora-broadcast .vh360-overlay-title {
                font-size: 0.8em;
                margin-bottom: 4px;
            }
            
            .vh360-agora-broadcast .vh360-overlay-description {
                font-size: 0.65em;
                margin-bottom: 6px;
                line-height: 1.2;
            }
            
            .vh360-agora-broadcast .vh360-overlay-btn {
                padding: 5px 10px;
                font-size: 0.7em;
            }
            
            .vh360-agora-broadcast .vh360-overlay-hint {
                font-size: 0.6em;
                margin-top: 3px;
            }
            
            .vh360-agora-broadcast .vh360-overlay-waiting {
                font-size: 0.7em;
            }
        }

        /* Enhanced mobile video player fixes - all video types consistency */
        @media (max-width: 768px) {
            /* Video player containers - unified mobile styling */
            .videohub360-video-player {
                margin-bottom: 8px;
                padding-top: 0;
            }
            
            /* All video containers - consistent mobile behavior */
            .videohub360-custom-embed-container,
            .vh360-livestream-iframe,
            .videohub360-static-poster-wrap {
                margin: 0 auto;
                border-radius: var(--vh360-radius-sm);
                max-width: 100%;
                width: 100%;
            }
            
            /* MP4 video player mobile consistency */
            .videohub360-video-player #videohub360-main-video {
                margin: 0 auto;
                border-radius: var(--vh360-radius-sm);
                max-width: 100%;
                width: 100%;
            }
            
            /* Remove any spacing issues on mobile for all video types */
            .vh360-livestream-iframe iframe,
            .vh360-livestream-iframe embed,
            .vh360-livestream-iframe object,
            .vh360-livestream-iframe video,
            .videohub360-custom-embed-container iframe,
            .videohub360-custom-embed-container embed,
            .videohub360-custom-embed-container object,
            .videohub360-custom-embed-container video,
            .videohub360-video-player video {
                margin: 0;
                padding: 0;
                border-radius: var(--vh360-radius-sm);
            }
            
            /* Override iframe aspect ratios for mobile responsive viewing - excluding Agora Interactive Mode */
            .vh360-livestream-iframe:not(.vh360-agora-interactive-container) iframe,
            .vh360-livestream-iframe:not(.vh360-agora-interactive-container) embed,
            .vh360-livestream-iframe:not(.vh360-agora-interactive-container) object,
            .vh360-livestream-iframe:not(.vh360-agora-interactive-container) video,
            .videohub360-custom-embed-container:not(.vh360-agora-interactive-container) iframe,
            .videohub360-custom-embed-container:not(.vh360-agora-interactive-container) embed,
            .videohub360-custom-embed-container:not(.vh360-agora-interactive-container) object,
            .videohub360-custom-embed-container:not(.vh360-agora-interactive-container) video {
                aspect-ratio: 16/9;
            }
            
            /* Agora Interactive Mode specific aspect ratio for nested elements */
            .vh360-livestream-iframe.vh360-agora-interactive-container iframe,
            .vh360-livestream-iframe.vh360-agora-interactive-container embed,
            .vh360-livestream-iframe.vh360-agora-interactive-container object,
            .vh360-livestream-iframe.vh360-agora-interactive-container video {
                aspect-ratio: 2/3;
            }
            
            /* Responsive mobile aspect ratio for better mobile viewing - excluding Agora Interactive Mode */
            .videohub360-custom-embed-container:not(.vh360-agora-interactive-container),
            .vh360-livestream-iframe:not(.vh360-agora-interactive-container),
            .videohub360-static-poster-wrap {
                aspect-ratio: 16/9;
                min-height: auto;
            }
            
            /* Target Only Agora Interactive Mode on mobile - 2/3 aspect ratio */
            .vh360-livestream-iframe.vh360-agora-interactive-container {
                aspect-ratio: 2/3;
                min-height: auto;
            }
            
            /* Agora broadcast mode - 16/9 aspect ratio on mobile */
            .vh360-livestream-iframe:not(.vh360-agora-interactive-container) #vh360-agora-player.vh360-agora-broadcast {
                height: auto;
                aspect-ratio: 16/9;
                min-height: auto; /* Override the 400px min-height to allow proper 16:9 scaling */
            }
            
            .vh360-livestream-iframe:not(.vh360-agora-interactive-container) #vh360-agora-player.vh360-agora-broadcast #vh360-agora-local-player {
                height: auto;
                aspect-ratio: 16/9;
            }
            
            .vh360-livestream-iframe:not(.vh360-agora-interactive-container) #vh360-agora-player.vh360-agora-broadcast #vh360-agora-local-player > div,
            .vh360-livestream-iframe:not(.vh360-agora-interactive-container) #vh360-agora-player.vh360-agora-broadcast #vh360-agora-local-player video {
                width: 100%;
                height: auto;
                aspect-ratio: 16/9;
                object-fit: contain; /* Allow portrait/mobile videos to display properly without cropping */
            }
            
            /* Mobile-specific overlay styles for broadcast mode - scale down content to fit 16:9 container */
            .vh360-agora-broadcast .vh360-overlay-content {
                max-width: 90%;
                padding: 8px 12px;
            }
            
            .vh360-agora-broadcast .vh360-overlay-icon {
                font-size: 1.4em;
                margin-bottom: 6px;
            }
            
            .vh360-agora-broadcast .vh360-overlay-title {
                font-size: 0.95em;
                margin-bottom: 6px;
            }
            
            .vh360-agora-broadcast .vh360-overlay-description {
                font-size: 0.75em;
                margin-bottom: 8px;
                line-height: 1.3;
            }
            
            .vh360-agora-broadcast .vh360-overlay-btn {
                padding: 7px 14px;
                font-size: 0.8em;
            }
            
            .vh360-agora-broadcast .vh360-overlay-hint {
                font-size: 0.65em;
                margin-top: 5px;
            }
            
            .vh360-agora-broadcast .vh360-overlay-waiting {
                font-size: 0.8em;
            }
            
            
            /* Note: Responsive control layout moved to simplified-mobile-controls.css */
            
            /* Mobile video meta information positioning */
            .videohub360-meta-container {
                margin-top: 12px;
                padding: 0 8px;
            }
            
            .videohub360-title {
                font-size: 1.3rem;
                line-height: 1.3;
                margin-bottom: 8px;
            }
            
            /* Mobile-specific meta row adjustments */
            .videohub360-meta-row {
                flex-direction: column;
                gap: 8px;
                align-items: flex-start;
            }
            
            .videohub360-meta-right {
                align-self: flex-start;
                margin-top: 4px;
            }
        }
        
        @media (max-width: 480px) {
            .videohub360-main-wrapper {
                width: 100%;
                margin: 8px auto;
                padding: 4px;
                gap: 10px;
                margin-top: 10px;
                margin-bottom: 10px;
            }
            
            .videohub360-custom-embed-container,
            .vh360-livestream-iframe,
            .videohub360-static-poster-wrap,
            .videohub360-video-player #videohub360-main-video {
                margin: 0 auto;
                border-radius: 2px;
            }
            
            .videohub360-meta-container {
                padding: 0 4px;
            }
            
            .videohub360-title {
                font-size: 1.2rem;
            }
        }
        
        
        /* Agora Player Container Styles */
        #vh360-agora-player {
            width: 100%;
            height: 100%;
            min-height: 400px;
            background: var(--vh360-color-dark-alt);
            border-radius: var(--vh360-radius-md);
            position: relative;
            overflow: hidden;
        }
        
        /* Agora Local Player Default Styles */
        #vh360-agora-local-player {
            width: 100%;
            height: 100%;
            position: relative;
            background: var(--vh360-color-dark-alt);
        }
        
        /* Controls positioning for broadcast mode (without multi-view wrapper) */
        .vh360-agora-broadcast #vh360-agora-controls {
            position: absolute;
            bottom: 10px;
            left: 10px;
            right: 10px;
            z-index: 100;
        }
        
        /* Livestream player wrapper */
        .vh360-livestream-player-wrap {
            position: relative;
            max-width: 100%;
            margin: auto;
        }
        
        /* Join livestream overlay */
        #vh360-join-livestream-overlay {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: rgba(0, 0, 0, 0.8);
            display: flex;
            align-items: center;
            justify-content: center;
            z-index: 40;
        }
        
        .vh360-overlay-content {
            text-align: center;
            color: var(--vh360-color-white);
            max-width: 400px;
            padding: 20px;
        }
        
        .vh360-overlay-icon {
            font-size: 2.5em;
            margin-bottom: 16px;
        }
        
        .vh360-overlay-title {
            color: var(--vh360-color-white);
            margin-bottom: 16px;
            font-size: 1.4em;
        }
        
        .vh360-overlay-description {
            margin-bottom: 20px;
            color: var(--vh360-color-border-light);
            line-height: 1.4;
        }
        
        .vh360-overlay-btn {
            background: #e53935;
            color: var(--vh360-color-white);
            border: none;
            padding: 12px 24px;
            border-radius: 6px;
            font-size: 1.1em;
            font-weight: 600;
            cursor: pointer;
        }
        
        .vh360-overlay-btn:hover {
            background: #d32f2f;
        }
        
        .vh360-overlay-hint {
            color: #999;
            font-size: 0.9em;
            margin-top: 8px;
        }
        
        .vh360-overlay-waiting {
            color: #999;
            font-size: 1.1em;
        }
        
        /* Error messages */
        .vh360-error-message {
            background: #111;
            color: var(--vh360-color-white);
            text-align: center;
            padding: 60px 20px;
            border-radius: var(--vh360-radius-md);
        }
        
        .vh360-error-title {
            color: var(--vh360-color-white);
            margin-bottom: 16px;
        }
        
        .vh360-error-text {
            margin-bottom: 12px;
        }
        
        .vh360-error-hint {
            color: var(--vh360-color-border-light);
            font-size: 0.9em;
        }
        
        /* Loading message */
        .vh360-loading-message {
            display: flex;
            align-items: center;
            justify-content: center;
            height: 100%;
            color: var(--vh360-color-white);
            font-size: 1.2em;
        }
        
        /* Hidden class */
        .vh360-hidden {
            display: none;
        }
        
        /* Video player styles */
        #vh360-livestream-video {
            width: 100%;
            height: 100%;
        }
        
        /* No poster background */
        .vh360-no-poster {
            background: var(--vh360-color-darker);
        }
        
        /* Agora Player Styles */
        
        /* Note: Controls styling moved to ID-based selectors and simplified-mobile-controls.css */
        
        .vh360-agora-controls button.raise-hand {
            border-color: #4CAF50;
            color: #4CAF50;
        }
        
        .vh360-agora-controls button.raise-hand.active {
            background: #4CAF50;
            color: var(--vh360-color-white);
        }

        /* Note: Multi-View Layout System styles have been moved to multi-view-layouts.css 
           for better maintainability and to avoid CSS conflicts */
        
        /* Default positioning for remote players (only when multi-view is NOT active) */
        #vh360-agora-remote-players:not(.vh360-multi-view-active) {
            position: absolute;
            top: 50px;
            right: 10px;
            display: flex;
            flex-direction: column;
            gap: 10px;
            max-width: 200px;
            max-height: calc(100% - 150px);
            overflow-y: auto;
            transition: all 0.3s ease;
            z-index: 20;
        }
        
        #vh360-agora-remote-players > div {
            border: 2px solid var(--vh360-color-dark);
            border-radius: var(--vh360-radius-md);
            overflow: hidden;
            position: relative;
            background: var(--vh360-color-dark-alt);
            transition: border-color 0.3s ease, box-shadow 0.3s ease;
        }
        
        /* Active speaker visual indicators */
        #vh360-agora-remote-players > div.active-speaker {
            border: 3px solid #4CAF50;
            box-shadow: 0 0 12px rgba(76, 175, 80, 0.6);
        }
        
        .volume-indicator {
            position: absolute;
            top: 4px;
            right: 4px;
            width: 16px;
            height: 16px;
            background: rgba(76, 175, 80, 0.8);
            border-radius: var(--vh360-radius-full);
            display: none; /* Force hide the pulsating indicator */
            z-index: 15;
            font-size: 8px;
            align-items: center;
            justify-content: center;
            color: var(--vh360-color-white);
            /* animation: volumePulse 0.5s ease-in-out infinite alternate; - REMOVED */
        }
        
        .active-speaker-badge {
            position: absolute;
            top: 4px;
            left: 4px;
            background: rgba(76, 175, 80, 0.9);
            color: var(--vh360-color-white);
            padding: 2px 6px;
            border-radius: var(--vh360-radius-sm);
            font-size: 10px;
            font-weight: bold;
            z-index: 25; /* Above video content for visibility */
            text-transform: uppercase;
            display: none;
        }
        
        /* Main player active speaker indicators */
        #vh360-agora-local-player > div.active-speaker {
            border: 3px solid #4CAF50;
            box-shadow: 0 0 16px rgba(76, 175, 80, 0.8);
        }
        
        #vh360-agora-local-player .volume-indicator {
            top: 8px;
            right: 8px;
            width: 24px;
            height: 24px;
            font-size: 12px;
        }
        
        #vh360-agora-local-player .active-speaker-badge {
            top: 8px;
            left: 8px;
            padding: 4px 8px;
            font-size: 12px;
        }
        
        @media (max-width: 768px) {
            /* Note: Mobile controls styling has been moved to simplified-mobile-controls.css */
            
            /* Mobile remote players behavior - only when multi-view is NOT active */
            #vh360-agora-remote-players:not(.vh360-multi-view-active) {
                top: 40px;
                right: 5px;
                max-width: 120px;
            }
        }

        /* Tablet responsive styles */
        @media (min-width: 769px) and (max-width: 1024px) {
            #vh360-agora-remote-players:not(.vh360-multi-view-active) {
                max-width: 150px;
            }
        }

        /* Desktop styles */
        @media (min-width: 1025px) {
            #vh360-agora-remote-players:not(.vh360-multi-view-active) {
                max-width: 200px;
            }
        }
        
        /* Offline message */
        .vh360-offline-message {
            max-width: 1260px;
            margin: 40px auto 0;
            text-align: center;
            font-size: 1.4em;
            padding: 60px 24px;
            background: #111;
            color: var(--vh360-color-white);
            border-radius: var(--vh360-radius-md);
            /* Use aspect ratio instead of min-height for consistency */
            aspect-ratio: 16/9;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        /* Stream ended content styling */
        .vh360-stream-ended-content {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            width: 100%;
            height: 100%;
        }

        .vh360-stream-ended-icon {
            font-size: 4em;
            margin-bottom: 24px;
            line-height: 1;
        }

        .vh360-stream-ended-title {
            font-size: 1.5em;
            font-weight: 600;
            margin: 0 0 16px 0;
            color: var(--vh360-color-white);
        }

        .vh360-stream-ended-text {
            font-size: 0.9em;
            margin: 0;
            opacity: 0.75;
            max-width: 600px;
            line-height: 1.6;
        }

        /* Content styles */
        .videohub360-content {
            margin-top: 16px;
            line-height: 1.6;
        }
        
        /* Base Modal System - Used by all modals across the plugin */
        .videohub360-modal-overlay {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: rgba(0, 0, 0, 0.6);
            z-index: 10000;
            display: none;
            justify-content: center;
            align-items: center;
            backdrop-filter: blur(4px);
            box-sizing: border-box;
            padding: 20px;
        }
        .videohub360-modal-overlay.active {
            display: flex;
        }
        
        /* High-priority modals (like moderation) */
        .videohub360-modal-overlay.high-priority {
            z-index: 10001;
        }
        
        /* Base modal content */
        .videohub360-modal {
            background: var(--vh360-bg-white);
            border-radius: 16px;
            width: 90%;
            max-width: 480px;
            max-height: 90vh;
            overflow-y: auto;
            box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
            position: relative;
            animation: modalSlideIn 0.3s ease-out;
            margin: auto;
        }
        
        /* Modal variants */
        .videohub360-modal.wide {
            max-width: 800px;
        }
        
        .videohub360-modal.compact {
            max-width: 400px;
        }
        .videohub360-modal-header {
            padding: 24px 24px 16px;
            border-bottom: 1px solid #e5e5e5;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        .videohub360-modal-title {
            font-size: 1.3em;
            font-weight: 600;
            margin: 0;
            color: #1a1a1a;
        }
        .videohub360-modal-close {
            background: none;
            border: none;
            font-size: 1.5em;
            cursor: pointer;
            color: var(--vh360-color-medium);
            padding: 4px;
            border-radius: var(--vh360-radius-sm);
            transition: background 0.2s;
        }
        .videohub360-modal-close:hover {
            background: #f5f5f5;
            color: var(--vh360-color-dark);
        }
        .videohub360-modal-body {
            padding: 24px;
        }
        .videohub360-modal-section {
            margin-bottom: 24px;
        }
        .videohub360-modal-section:last-child {
            margin-bottom: 0;
        }
        .videohub360-modal-section h3 {
            font-size: 1em;
            font-weight: 600;
            margin: 0 0 12px 0;
            color: var(--vh360-color-dark);
        }
        .videohub360-link-copy {
            display: flex;
            gap: 8px;
            align-items: center;
        }
        .videohub360-link-input {
            flex: 1;
            padding: 12px;
            border: 1px solid #ddd;
            border-radius: var(--vh360-radius-md);
            font-size: 0.95em;
            background: #f8f9fa;
        }
        .videohub360-copy-btn {
            background: #28a745;
            color: var(--vh360-color-white);
            border: none;
            border-radius: var(--vh360-radius-md);
            padding: 12px 16px;
            cursor: pointer;
            font-weight: 600;
            transition: background 0.2s;
            white-space: nowrap;
        }
        .videohub360-copy-btn:hover {
            background: #218838;
        }
        .videohub360-copy-btn.copied {
            background: #6c757d;
        }
        .videohub360-social-icons {
            display: flex;
            gap: 12px;
            flex-wrap: wrap;
        }
        .videohub360-social-icon {
            width: 48px;
            height: 48px;
            border-radius: var(--vh360-radius-lg);
            display: flex;
            align-items: center;
            justify-content: center;
            text-decoration: none;
            transition: all 0.2s ease;
            color: var(--vh360-color-white);
        }
        .videohub360-social-icon:hover {
            transform: translateY(-2px);
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
        }
        .videohub360-social-icon svg {
            width: 24px;
            height: 24px;
            fill: currentColor;
        }
        .videohub360-social-icon.facebook { background: #1877f2; }
        .videohub360-social-icon.twitter { background: #1da1f2; }
        .videohub360-social-icon.linkedin { background: #0077b5; }
        .videohub360-social-icon.whatsapp { background: #25d366; }
        .videohub360-social-icon.telegram { background: #0088cc; }
        
        /* Email section with collapsible functionality */
        .videohub360-email-section {
            text-align: center;
        }
        .videohub360-email-toggle {
            background: #1976d2;
            color: var(--vh360-color-white);
            border: none;
            border-radius: var(--vh360-radius-md);
            padding: 12px 24px;
            cursor: pointer;
            font-weight: 600;
            font-size: 1em;
            transition: all 0.2s ease;
            display: inline-flex;
            align-items: center;
            gap: 8px;
            margin: 0 auto;
        }
        .videohub360-email-toggle:hover {
            background: #1565c0;
            transform: translateY(-1px);
        }
        .videohub360-email-toggle-icon {
            transition: transform 0.3s ease;
            fill: currentColor;
        }
        .videohub360-email-toggle.expanded .videohub360-email-toggle-icon {
            transform: rotate(180deg);
        }
        .videohub360-email-form-container {
            max-height: 0;
            overflow: hidden;
            transition: max-height 0.3s ease-out;
            text-align: left;
            margin-top: 0;
        }
        .videohub360-email-form-container.expanded {
            max-height: 500px;
            margin-top: 16px;
        }
        .videohub360-email-form {
            display: flex;
            flex-direction: column;
            gap: 16px;
        }
        .videohub360-form-group {
            display: flex;
            flex-direction: column;
            gap: 6px;
        }
        .videohub360-form-group label {
            font-weight: 600;
            color: var(--vh360-color-dark, #333);
            font-size: 0.9em;
        }
        .videohub360-form-input {
            padding: 12px;
            border: 1px solid #ddd;
            border-radius: var(--vh360-radius-md);
            font-size: 0.95em;
            transition: border-color 0.2s ease;
        }
        .videohub360-form-input:focus {
            outline: none;
            border-color: #1976d2;
            box-shadow: 0 0 0 3px rgba(25, 118, 210, 0.1);
        }
        .videohub360-email-input {
            /* Keep for backward compatibility, now uses videohub360-form-input */
        }
        .videohub360-send-btn {
            background: #1976d2;
            color: var(--vh360-color-white);
            border: none;
            border-radius: var(--vh360-radius-md);
            padding: 12px 24px;
            cursor: pointer;
            font-weight: 600;
            transition: background 0.2s;
        }
        .videohub360-send-btn:hover {
            background: #1565c0;
        }
        .videohub360-send-btn:disabled {
            background: #ccc;
            cursor: not-allowed;
        }
        .videohub360-email-message {
            margin-top: 8px;
            padding: 8px;
            border-radius: var(--vh360-radius-sm);
            font-size: 0.9em;
        }
        .videohub360-email-message.success {
            background: #d4edda;
            color: #155724;
            border: 1px solid #c3e6cb;
        }
        .videohub360-email-message.warning {
            background: #fff3cd;
            color: #856404;
            border: 1px solid #ffeaa7;
        }
        .videohub360-email-message.error {
            background: #f8d7da;
            color: #721c24;
            border: 1px solid #f5c6cb;
        }
        
        @media (max-width: 600px) {
            .videohub360-modal {
                margin: 16px;
                width: calc(100% - 32px);
            }
            .videohub360-modal-header,
            .videohub360-modal-body {
                padding: 16px;
            }
            .videohub360-link-copy {
                flex-direction: column;
            }
            .videohub360-social-icons {
                justify-content: center;
            }
        }
        
        /* Login Modal Styles - Easily Customizable */
        /* 
         * THEME INTEGRATION NOTES:
         * - Add 'videohub360-login-modal-custom' class to .videohub360-login-modal for custom styling
         * - Override .videohub360-login-modal-content for custom form layout
         * - Use videohub360_chat_login_modal_content() JS hook to replace modal content
         * - Listen for 'videohub360:login-required' event to show custom login forms
         * 
         * SHORTCODE FORM STYLING:
         * - All shortcode content is wrapped in .videohub360-shortcode-login-form
         * - Inputs automatically get proper padding to avoid icon overlap
         * - Supports common plugins: Listeo, WooCommerce, Ultimate Member, ProfilePress, User Registration
         * - Use  sparingly - most styles are designed to be overridden
         * 
         * ICON SPACING:
         * - Input fields have 45px left padding by default to accommodate icons
         * - Use .input-group, .field-with-icon, .input-icon-container classes for custom icon containers
         * - Icons should be positioned absolute with left: 12px, top: 50%, transform: translateY(-50%)
         * 
         * RESPONSIVE DESIGN:
         * - Mobile: 40px icon spacing, 44px min-height for touch targets
         * - Tablet: 42px icon spacing 
         * - Desktop: 45px icon spacing
         * - Font size increases to 16px on mobile to prevent iOS zoom
         */
        .videohub360-login-modal {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: rgba(0, 0, 0, 0.6);
            z-index: 1000000;
            display: none;
            justify-content: center;
            align-items: center;
            backdrop-filter: blur(4px);
        }
        .videohub360-login-modal.active {
            display: flex;
        }
        .videohub360-login-modal-content {
            background: var(--vh360-bg-white);
            border-radius: 16px;
            width: 90%;
            max-width: 400px;
            max-height: 90vh;
            overflow-y: auto;
            box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
            position: relative;
            animation: loginModalSlideIn 0.3s ease-out;
        }
        @keyframes loginModalSlideIn {
            from {
                opacity: 0;
                transform: scale(0.9) translateY(20px);
            }
            to {
                opacity: 1;
                transform: scale(1) translateY(0);
            }
        }
        .videohub360-login-modal-header {
            padding: 24px 24px 16px;
            border-bottom: 1px solid #e5e5e5;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        .videohub360-login-modal-title {
            font-size: 1.3em;
            font-weight: 600;
            margin: 0;
            color: #1a1a1a;
        }
        .videohub360-login-modal-close {
            background: none;
            border: none;
            font-size: 1.5em;
            cursor: pointer;
            color: var(--vh360-color-medium);
            padding: 4px;
            border-radius: var(--vh360-radius-sm);
            transition: background 0.2s;
        }
        .videohub360-login-modal-close:hover {
            background: #f5f5f5;
            color: var(--vh360-color-dark);
        }
        .videohub360-login-modal-body {
            padding: 24px;
            text-align: center;
        }
        .videohub360-login-modal-message {
            margin-bottom: 20px;
            color: var(--vh360-color-medium);
            font-size: 1em;
            line-height: 1.5;
        }
        .videohub360-login-modal-actions {
            display: flex;
            gap: 12px;
            justify-content: center;
            flex-wrap: wrap;
        }
        .videohub360-login-modal-btn {
            background: #1976d2;
            color: var(--vh360-color-white);
            border: none;
            border-radius: var(--vh360-radius-md);
            padding: 12px 24px;
            font-size: 1em;
            font-weight: 600;
            cursor: pointer;
            transition: background 0.2s;
            text-decoration: none;
            display: inline-block;
        }
        .videohub360-login-modal-btn:hover {
            background: #1565c0;
            color: var(--vh360-color-white);
            text-decoration: none;
        }
        .videohub360-login-modal-btn.secondary {
            background: #f5f5f5;
            color: var(--vh360-color-dark);
        }
        .videohub360-login-modal-btn.secondary:hover {
            background: var(--vh360-color-border);
            color: var(--vh360-color-dark);
        }
        
        /* Universal Shortcode Login Form Container - Non-intrusive approach */
        .videohub360-shortcode-login-form {
            /* Container-level styling only - preserve theme/plugin form styling */
            /* ensure no default margin pushes the form outside its container */
            margin: 0;
            text-align: left;
            position: relative;
            width: 100%;
            max-width: 100%;
        }
        
        /* Fix input field padding to prevent icon overlap */
        .videohub360-shortcode-login-form input[type="text"],
        .videohub360-shortcode-login-form input[type="email"],
        .videohub360-shortcode-login-form input[type="password"] {
            padding-left: 45px; /* Desktop: accommodate icons */
        }
        
        /* Enhanced mobile responsive login modal */
        @media (max-width: 480px) {
            .videohub360-login-modal-content {
                margin: 12px;
                width: calc(100% - 24px);
                max-height: calc(100vh - 24px);
                border-radius: var(--vh360-radius-lg);
            }
            
            .videohub360-login-modal-header {
                padding: 16px 16px 12px;
            }
            
            .videohub360-login-modal-body {
                padding: 16px;
                max-height: calc(100vh - 120px);
                overflow-y: auto;
            }
            
            .videohub360-login-modal-title {
                font-size: 1.2em;
            }
            
            .videohub360-login-modal-actions {
                flex-direction: column;
                gap: 8px;
            }
            
            .videohub360-login-modal-btn {
                width: 100%;
                padding: 14px 24px;
                font-size: 16px;
            }
            
            /* Mobile: reduce icon spacing for smaller screens */
            .videohub360-shortcode-login-form input[type="text"],
            .videohub360-shortcode-login-form input[type="email"],
            .videohub360-shortcode-login-form input[type="password"] {
                padding-left: 40px; /* Mobile: smaller icon spacing */
                font-size: 16px; /* Prevent iOS zoom */
                min-height: 44px; /* Touch target size */
            }
        }
        
        /* Medium screen adjustments */
        @media (min-width: 481px) and (max-width: 768px) {
            .videohub360-login-modal-content {
                margin: 20px;
                width: calc(100% - 40px);
                max-width: 500px;
            }
            
            .videohub360-login-modal-header,
            .videohub360-login-modal-body {
                padding: 20px;
            }
            
            /* Tablet: moderate icon spacing */
            .videohub360-shortcode-login-form input[type="text"],
            .videohub360-shortcode-login-form input[type="email"],
            .videohub360-shortcode-login-form input[type="password"] {
                padding-left: 42px; /* Tablet: moderate icon spacing */
            }
        }
        
        /* Ensure modal is properly centered on all screen sizes */
        @media (min-height: 600px) {
            .videohub360-login-modal {
                align-items: center;
            }
        }
        
        @media (max-height: 599px) {
            .videohub360-login-modal {
                align-items: flex-start;
                padding-top: 20px;
            }
            
            .videohub360-login-modal-content {
                margin-top: 0;
            }
        }
        
        /* Built-in Login Form Styles */
        .videohub360-builtin-login-form {
            padding: 0;
        }
        
        #videohub360-builtin-login-form {
            margin: 0;
        }
        
        .vh360-form-field {
            margin-bottom: 16px;
        }
        
        .vh360-form-field label {
            display: block;
            margin-bottom: 6px;
            font-weight: 600;
            font-size: 14px;
            color: var(--vh360-color-text, #333);
        }
        
        .vh360-form-field input[type="text"],
        .vh360-form-field input[type="password"] {
            width: 100%;
            padding: 10px 12px;
            border: 1px solid #ddd;
            border-radius: 6px;
            font-size: 14px;
            box-sizing: border-box;
            transition: border-color 0.2s ease;
        }
        
        .vh360-form-field input[type="text"]:focus,
        .vh360-form-field input[type="password"]:focus {
            outline: none;
            border-color: var(--vh360-color-primary, #0073aa);
            box-shadow: 0 0 0 1px var(--vh360-color-primary, #0073aa);
        }
        
        .vh360-form-checkbox {
            margin-bottom: 20px;
        }
        
        .vh360-form-checkbox label {
            display: flex;
            align-items: center;
            font-weight: normal;
            cursor: pointer;
        }
        
        .vh360-form-checkbox input[type="checkbox"] {
            width: auto;
            margin-right: 8px;
            cursor: pointer;
        }
        
        .vh360-form-message {
            padding: 12px;
            border-radius: 6px;
            margin-bottom: 16px;
            font-size: 14px;
            line-height: 1.5;
            display: none;
        }
        
        .vh360-form-message.vh360-visible {
            display: block;
        }
        
        .vh360-form-message.vh360-error {
            background: #fff3f3;
            border: 1px solid #ffc0c0;
            color: #d32f2f;
        }
        
        .vh360-form-message.vh360-success {
            background: #f0f9ff;
            border: 1px solid #b3e0ff;
            color: #0073aa;
        }
        
        .vh360-form-actions {
            margin-bottom: 16px;
        }
        
        .vh360-form-actions .videohub360-login-modal-btn {
            width: 100%;
        }
        
        .vh360-form-actions .videohub360-login-modal-btn:disabled {
            opacity: 0.6;
            cursor: not-allowed;
        }
        
        .vh360-form-footer {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding-top: 12px;
            border-top: 1px solid #eee;
            font-size: 13px;
        }
        
        .vh360-form-footer a {
            color: var(--vh360-color-primary, #0073aa);
            text-decoration: none;
            transition: color 0.2s ease;
        }
        
        .vh360-form-footer a:hover {
            color: var(--vh360-color-primary-dark, #005177);
            text-decoration: underline;
        }
        
        @media (max-width: 480px) {
            .vh360-form-footer {
                flex-direction: column;
                gap: 8px;
                align-items: flex-start;
            }
        }
        
        /* YouTube-style Meta Layout */
        .videohub360-meta-container {
            margin-bottom: 20px;
        }
        .videohub360-title {
            margin: 0 0 12px 0;
            font-size: 1.6rem;
            font-weight: 600;
            line-height: 1.2;
            color: #1a1a1a;
        }
        .videohub360-meta-row {
            display: flex;
            justify-content: space-between;
            align-items: flex-start;
            gap: 20px;
            margin-bottom: 16px;
        }
        .videohub360-meta-left {
            flex: 1;
            display: flex;
            flex-direction: column;
            gap: 8px;
        }
        .videohub360-meta-right {
            flex-shrink: 0;
        }
        
        /* Live info styles */
        .videohub360-live-info {
            display: flex;
            align-items: center;
            gap: 12px;
            flex-wrap: wrap;
        }
        .videohub360-live-badge {
            display: inline-block;
            font-weight: bold;
            font-size: 0.9em;
            padding: 4px 12px;
            border-radius: 18px;
            letter-spacing: 0.5px;
            text-transform: uppercase;
            background-color: #e53935;
            color: var(--vh360-color-white);
        }
        .videohub360-live-viewers {
            display: inline-block;
            background: rgba(0,0,0,0.7);
            color: var(--vh360-color-white);
            padding: 4px 12px;
            border-radius: 18px;
            font-size: 0.9em;
            font-weight: 500;
        }
        
        /* Views and duration info */
        .videohub360-views-info {
            display: flex;
            align-items: center;
            gap: 16px;
            flex-wrap: wrap;
            font-size: 0.95em;
            color: var(--vh360-color-medium);
        }
        .videohub360-views-count {
            font-weight: 500;
            color: #1a1a1a;
        }
        .videohub360-published-date,
        .videohub360-stream-duration {
            color: var(--vh360-color-medium);
        }
        
        /* Taxonomies */
        .videohub360-meta-taxonomies {
            font-size: 0.94em;
            color: var(--vh360-color-border-dark);
            margin-top: 8px;
            line-height: 1.5;
        }
        .videohub360-meta-taxonomies span {
            margin-right: 18px;
            display: inline-block;
        }
        .videohub360-meta-taxonomies a {
            color: #0063b1;
            text-decoration: none;
            margin-right: 4px;
        }
        .videohub360-meta-taxonomies a:hover {
            text-decoration: underline;
            color: #004e92;
        }
        
        /* Share button in meta area */
        .videohub360-share-btn {
            background: #1976d2;
            color: var(--vh360-color-white);
            border: none;
            border-radius: var(--vh360-radius-md);
            padding: 10px 20px;
            font-size: 0.95em;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.2s ease;
            display: inline-flex;
            align-items: center;
            gap: 8px;
            box-shadow: 0 2px 8px rgba(25, 118, 210, 0.2);
        }
        .videohub360-share-btn:hover {
            background: #1565c0;
            box-shadow: 0 4px 16px rgba(25, 118, 210, 0.3);
            transform: translateY(-1px);
        }
        .videohub360-share-btn svg {
            width: 16px;
            height: 16px;
            fill: currentColor;
        }
        
        /* Mobile responsiveness for meta layout */
        @media (max-width: 768px) {
            .videohub360-meta-row {
                flex-direction: column;
                gap: 12px;
            }
            .videohub360-meta-right {
                align-self: flex-start;
            }
            .videohub360-title {
                font-size: 1.4rem;
            }
            .videohub360-live-info,
            .videohub360-views-info {
                gap: 8px;
            }
            .videohub360-meta-taxonomies span {
                margin-right: 12px;
                margin-bottom: 4px;
            }
        }
        @media (max-width: 480px) {
            .videohub360-title {
                font-size: 1.3rem;
            }
            .videohub360-live-info,
            .videohub360-views-info {
                flex-direction: column;
                align-items: flex-start;
                gap: 6px;
            }
            .videohub360-share-btn {
                padding: 8px 16px;
                font-size: 0.9em;
            }
        }
        .videohub360-sidebar h2 {
            font-size: 1.2em;
            margin-bottom: 10px;
            font-weight: 600;
        }
        .videohub360-sidebar ul {
            padding: 0;
            margin: 0;
            list-style: none;
        }
        .videohub360-sidebar li {
            margin-bottom: 22px;
            display: flex;
            gap: 16px;
            align-items: flex-start;
        }
        .videohub360-sidebar-thumbnail {
            width: 120px;
            height: 68px;
            background: #ddd;
            border-radius: 6px;
            object-fit: cover;
            flex-shrink: 0;
        }
        .videohub360-sidebar-info {
            flex: 1 1 0;
            min-width: 0;
        }
        .videohub360-sidebar-title {
            color: #1a1a1a;
            font-weight: 600;
            font-size: 1.1em;
            text-decoration: none;
            display: inline-block;
            margin-bottom: 4px;
            line-height: 1.3;
        }
        .videohub360-sidebar-title:hover {
            text-decoration: underline;
        }
        .videohub360-sidebar-meta {
            font-size: 0.95em;
            color: var(--vh360-color-medium);
            margin-top: 2px;
            line-height: 1.4;
        }
        
        .videohub360-ad-skip-btn {
            position: absolute;
            top: 12px;
            right: 16px;
            z-index: 15; /* Increased to stay above overlay */
            padding: 7px 18px;
            font-size: 1rem;
            background: rgba(0,0,0,0.8);
            color: var(--vh360-color-white);
            border: none;
            border-radius: 16px;
            opacity: 0.95;
            display: none;
            cursor: pointer;
            transition: background 0.2s;
        }
        .videohub360-ad-skip-btn:hover {
            background: rgba(0,0,0,1);
        }
        .videohub360-ad-label {
            position: absolute;
            top: 12px;
            left: 18px;
            background: rgba(0,0,0,0.7);
            color: var(--vh360-color-white);
            padding: 4px 14px;
            border-radius: var(--vh360-radius-lg);
            font-size: 0.96em;
            z-index: 15; /* Increased to stay above overlay */
        }
        .videohub360-static-poster-img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            object-position: center center;
            display: block;
        }
        .videohub360-static-play-btn {
            position: absolute;
            left: 50%; top: 50%;
            transform: translate(-50%, -50%);
            background: transparent;
            border: none;
            cursor: pointer;
            z-index: 3;
            padding: 0;
            width: 72px;
            height: 72px;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        .videohub360-static-play-btn svg {
            display: block;
            width: 72px;
            height: 72px;
            filter:
                drop-shadow(0 4px 16px rgba(0,0,0,0.45))
                drop-shadow(0 1px 4px rgba(0,0,0,0.23));
        }
        .videohub360-static-play-btn polygon {
            fill: #fff;
            stroke: rgba(255,255,255,0.90);
            stroke-width: 1.5;
        }
        .videohub360-static-play-btn:active svg {
            filter:
                drop-shadow(0 4px 24px rgba(0,0,0,0.6));
        }
        .videohub360-static-play-btn:focus {
            outline: none;
        }
        .videohub360-static-play-btn:hover svg {
            filter:
                drop-shadow(0 8px 28px rgba(0,0,0,0.60))
                drop-shadow(0 1px 8px rgba(0,0,0,0.30));
            transition: filter 0.15s;
        }
        .videohub360-hide { display: none; }
        #videohub360-ad-skip-msg {
            position: absolute;
            top: 48px;
            left: 18px;
            background: rgba(0,0,0,0.7);
            color: var(--vh360-color-white);
            padding: 3px 12px;
            border-radius: 10px;
            font-size: 0.98em;
            z-index: 10;
            display: none;
        }
        
        /* === Ad Click-Through Styles === */
        
        /* Ad clickable container */
        .videohub360-ad-clickable {
            position: relative;
        }
        
        /* Click overlay - positioned over the ad video */
        .videohub360-ad-click-overlay {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: transparent;
            cursor: pointer;
            z-index: 5; /* Below skip button (z-index: 10) and ad label (z-index: 10) */
            display: flex;
            align-items: flex-end;
            justify-content: flex-end;
            padding: 16px;
            opacity: 0;
            transition: opacity 0.3s ease;
        }
        
        /* Show overlay on hover for desktop */
        @media (min-width: 768px) {
            .videohub360-ad-clickable:hover .videohub360-ad-click-overlay {
                opacity: 1;
            }
        }
        
        /* Always show on mobile/tablet */
        @media (max-width: 767px) {
            .videohub360-ad-click-overlay {
                opacity: 1;
            }
        }
        
        /* Learn More indicator */
        .videohub360-ad-click-indicator {
            background: rgba(0, 0, 0, 0.85);
            color: var(--vh360-color-white);
            padding: 10px 16px;
            border-radius: var(--vh360-radius-md);
            font-size: 0.95em;
            font-weight: 500;
            display: flex;
            align-items: center;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
            transition: all 0.2s ease;
            pointer-events: none; /* Prevent blocking clicks */
        }
        
        .videohub360-ad-click-overlay:hover .videohub360-ad-click-indicator {
            background: rgba(0, 0, 0, 0.95);
            transform: scale(1.05);
        }
        
        /* Focus state for keyboard navigation */
        .videohub360-ad-click-overlay:focus {
            outline: 2px solid #0073aa;
            outline-offset: -2px;
        }
        
        .videohub360-ad-click-overlay:focus .videohub360-ad-click-indicator {
            background: rgba(0, 115, 170, 0.9);
        }
        
        /* Mobile optimizations */
        @media (max-width: 767px) {
            .videohub360-ad-click-indicator {
                font-size: 0.85em;
                padding: 8px 12px;
            }
            
            .videohub360-ad-click-overlay {
                padding: 12px;
            }
        }
        
        /* === End Ad Click-Through Styles === */
        
        .videohub360-comments-section {
            margin-top: 30px;
            padding-top: 16px;
            border-top: 1.5px solid #eee;
        }
        .videohub360-comments-section h2 {
            font-size: 1.16em;
            margin-bottom: 10px;
        }

/* === Enhanced VideoHub360 Shortcode Styles === */

/* Pagination styles for shortcode */
.videohub360-pagination {
    margin: 20px 0;
    text-align: center;
    clear: both;
}

.videohub360-pagination .page-numbers {
    display: inline-block;
    padding: 8px 12px;
    margin: 0 4px;
    background: #f8f9fa;
    border: 1px solid #dee2e6;
    color: #0073aa;
    text-decoration: none;
    border-radius: var(--vh360-radius-sm);
    transition: all 0.2s ease;
}

.videohub360-pagination .page-numbers:hover,
.videohub360-pagination .page-numbers.current {
    background: #0073aa;
    color: var(--vh360-color-white);
    border-color: #0073aa;
}

.videohub360-pagination .page-numbers.dots {
    background: none;
    border: none;
    color: var(--vh360-color-medium);
    cursor: default;
}

/* Grid responsiveness removed - now using semantic classes below */

/* === VideoHub360 Archive Page Styles === */

/* Archive Header */
.videohub360-archive-header {
    background-image: linear-gradient(to right, #00335e, #005694);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    padding: 94px 0 76px 0;
    margin-bottom: 32px;
    border-bottom: 1px solid #e6e6e6;
    text-align: center;
}
.videohub360-archive-title {
    font-size: 2.4rem;
    font-weight: 400;
    margin: 0;
    letter-spacing: -1px;
    color: #ffffff;
}

/* Main Layout */
.videohub360-archive-mainwrap {
    max-width: 1400px;
    margin: 0 auto 80px auto;
    min-height: 72vh;
    display: flex;
    gap: 44px;
    align-items: flex-start;
}

/* Add top spacing when header is hidden */
.videohub360-archive-mainwrap.videohub360-no-header {
    margin-top: 60px;
}

/* Sidebar & Filters */
.videohub360-sidebar {
    background: var(--vh360-bg-white);
    border-radius: 14px;
    padding: 30px 26px;
    min-width: 250px;
    max-width: 375px;
    box-shadow: 0 4px 18px rgba(0,0,0,0.04);
    position: sticky;
    top: 40px;
    height: fit-content;
    display: flex;
    flex-direction: column;
    z-index: 10;
    transition: transform 0.23s cubic-bezier(.4,0,.2,1);
}
.videohub360-sidebar h2 {
    font-size: 1.15em;
    margin: 0 0 18px 0;
    font-weight: 700;
    color: #1a1a1a;
    letter-spacing: 0.1px;
}
.videohub360-filter-form {
    display: flex;
    flex-direction: column;
    gap: 18px;
}
.videohub360-filter-group {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.videohub360-filter-label {
    font-size: 1em;
    color: var(--vh360-color-darker);
    font-weight: 500;
    margin-bottom: 1px;
}
.videohub360-filter-select {
    width: 100%;
    min-width: 0;
    padding: 0 14px;
    border: 1.5px solid #ccd;
    border-radius: 22px;
    background: #f8fafc;
    font-size: 1em;
    height: 38px;
    color: var(--vh360-color-darker);
    font-weight: 400;
    box-sizing: border-box;
    appearance: none;
    outline: none;
    transition: border 0.2s;
    display: block;
    line-height: 1.3;
    background-image: url("data:image/svg+xml,%3Csvg ... %3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 18px 18px;
}
.videohub360-filter-select:focus {
    border: 1.5px solid #0063b1;
    background: var(--vh360-bg-white);
}
.videohub360-sidebar form button.videohub360-filter-go-btn,
.videohub360-filter-form button.videohub360-filter-go-btn,
button.videohub360-filter-go-btn {
    display: inline-block;
    width: 56px;
    height: 38px;
    min-width: 56px;
    min-height: 38px;
    background: #0063b1;
    color: var(--vh360-color-white);
    border: none;
    border-radius: 22px;
    font-size: 1em;
    font-weight: 600;
    margin-top: 10px;
    margin-left: 0;
    margin-right: 0;
    margin-bottom: 0;
    padding: 0;
    cursor: pointer;
    letter-spacing: 0.5px;
    transition: background 0.2s;
    vertical-align: middle;
    line-height: 1;
    text-transform: none;
    font-family: inherit;
    box-sizing: border-box;
}
.videohub360-filter-go-btn:hover, .videohub360-filter-go-btn:focus {
    background: #004e92;
}
.videohub360-filter-go-row {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    margin-top: 8px;
    gap: 0;
}
.videohub360-filter-close-btn {
    display: none;
}

/* Responsive filter sidebar/overlay */
@media (max-width: 900px) {
    .videohub360-archive-mainwrap {
        flex-direction: column;
        gap: 0;
        align-items: stretch;
    }
    .videohub360-filter-toggle-btn {
        display: block;
        position: relative;
        left: auto;
        top: auto;
        width: 92%;
        max-width: 320px;
        margin: 0 auto 18px auto;
        z-index: 30;
        font-size: 0.98em;
        padding: 7px 14px 7px 11px;
    }
    #videohub360-filter-overlay {
        display: block;
        position: fixed;
        z-index: 1000;
        background: rgba(0,0,0,0.38);
        left: 0; top: 0; width: 100vw; height: 100vh;
        transition: opacity 0.17s;
    }
    .videohub360-archive-mainwrap .videohub360-sidebar {
        position: fixed;
        left: 0;
        top: 0;
        width: 88vw;
        max-width: 350px;
        height: 100vh;
        box-sizing: border-box;
        transform: translateX(-110%);
        opacity: 0;
        visibility: hidden;
        box-shadow: 2px 0 30px 0 rgba(0,0,0,0.15);
        border-radius: 0 20px 20px 0;
        z-index: 1001;
    }
    .videohub360-archive-mainwrap .videohub360-sidebar.videohub360-show {
        transform: translateX(0);
        opacity: 1;
        visibility: visible;
    }
    #videohub360-filter-overlay.videohub360-show {
        display: block;
    }
    body.videohub360-filter-open {
        overflow: hidden;
        touch-action: none;
    }
    .videohub360-filter-close-btn {
        display: block;
        position: absolute;
        top: 12px;
        right: 18px;
        background: none;
        border: none;
        font-size: 2.1em;
        color: #888;
        z-index: 1200;
        cursor: pointer;
        padding: 0 6px;
        line-height: 1;
    }
    .videohub360-sidebar h2 {
        padding-right: 40px;
    }
}

/* Search Bar */
.videohub360-search-bar-wrap {
    width: 100%;
    margin-bottom: 22px;
    display: flex;
    justify-content: flex-start;
}
.videohub360-search-bar-form {
    width: 100%;
    max-width: 340px;
    margin: 0;
    display: flex;
    flex-direction: row;
    gap: 0;
}

/* Unified search field container */
.videohub360-search-field {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
    height: 40px;
    border: 1.5px solid #ccd;
    border-radius: 22px;
    background: #f8fafc;
    overflow: hidden;
    transition: border 0.2s;
}
.videohub360-search-field:focus-within {
    border: 1.5px solid #0063b1;
    background: var(--vh360-bg-white);
}
.videohub360-search-field input[type="search"] {
    flex: 1;
    padding: 0 16px;
    height: 100%;
    font-size: 1em;
    line-height: 1;
    border: none;
    background: transparent;
    color: var(--vh360-color-darker);
    font-weight: 400;
    box-sizing: border-box;
    outline: none;
    margin: 0;
    vertical-align: middle;
}
.videohub360-search-bar-form button.videohub360-search-submit,
.videohub360-search-field button.videohub360-search-submit,
button.videohub360-search-submit {
    padding: 0 16px;
    height: 100%;
    min-height: 40px;
    border: none;
    background: #0063b1;
    color: var(--vh360-color-white);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s;
    min-width: 50px;
    margin: 0;
    line-height: 1;
    text-transform: none;
    font-family: inherit;
    box-sizing: border-box;
    font-size: 1em;
    font-weight: 400;
}
.videohub360-search-submit:hover,
.videohub360-search-submit:focus {
    background: #004e92;
    outline: 2px solid #004e92;
    outline-offset: 2px;
}

/* Visually hidden label for accessibility */
.vh360-visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Video Grid */
.videohub360-videos-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--grid-gap, 28px); /* Use custom property or default to 28px */
    margin: 0;
    max-width: 1000px;
    flex: 1 1 0;
    min-width: 0;
}

/* Elementor container overrides - allow widget to fill container */
.elementor-widget-container .videohub360-videos-grid,
.elementor-widget-container .videohub360-videos-list {
    max-width: none;
    width: 100%;
    margin: 0;
}

/* Elementor widget wrapper ensures full width */
.videohub360-elementor-widget-wrapper {
    width: 100%;
    max-width: none;
}

.videohub360-elementor-widget-wrapper .videohub360-videos-grid,
.videohub360-elementor-widget-wrapper .videohub360-videos-list {
    max-width: none;
    width: 100%;
    margin: 0;
}

/* ================================================
   Grid Column Classes (Shortcode/Widget)
   Single source of truth for responsive behavior
   ================================================ */

/* Auto-responsive columns - adapts to available space */
.videohub360-videos-grid.auto-columns {
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}

/* Fixed column layouts for desktop */
.videohub360-videos-grid.cols-1 {
    grid-template-columns: 1fr;
}

.videohub360-videos-grid.cols-2 {
    grid-template-columns: repeat(2, 1fr);
}

.videohub360-videos-grid.cols-3 {
    grid-template-columns: repeat(3, 1fr);
}

.videohub360-videos-grid.cols-4 {
    grid-template-columns: repeat(4, 1fr);
}

/* Aspect ratio handling for grid thumbnails */
.videohub360-videos-grid.ratio-16-9 .videohub360-videos-thumb-wrap {
    aspect-ratio: 16 / 9;
}

.videohub360-videos-grid.ratio-4-3 .videohub360-videos-thumb-wrap {
    aspect-ratio: 4 / 3;
}

.videohub360-videos-grid.ratio-1-1 .videohub360-videos-thumb-wrap {
    aspect-ratio: 1 / 1;
}

/* Tablet (≤900px): reduce 3-4 column grids to 2 columns */
@media (max-width: 900px) {
    .videohub360-videos-grid.cols-3,
    .videohub360-videos-grid.cols-4 {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Mobile (≤600px): always force 1 column for all layouts */
@media (max-width: 600px) {
    .videohub360-videos-grid.auto-columns,
    .videohub360-videos-grid.cols-1,
    .videohub360-videos-grid.cols-2,
    .videohub360-videos-grid.cols-3,
    .videohub360-videos-grid.cols-4 {
        grid-template-columns: 1fr;
        gap: 16px; /* Tighter gap on mobile */
    }
}

/* ================================================
   End Grid Column Classes
   ================================================ */

.videohub360-videos-item {
    background: var(--vh360-bg-white);
    border-radius: 7px;
    overflow: visible;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    box-shadow: 0 2px 8px rgba(0,0,0,0.03);
    padding: 0;
    transition: box-shadow 0.13s;
}
.videohub360-videos-item:hover {
    box-shadow: 0 4px 18px rgba(0,99,177,.09);
}
.videohub360-videos-thumb-wrap {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    border-radius: 7px 7px 0 0;
    background: #eee;
    display: block;
}
.videohub360-videos-thumb {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    position: absolute;
    left: 0; top: 0;
}
.videohub360-videos-play-btn {
    position: absolute;
    left: 50%; top: 50%;
    transform: translate(-50%, -50%);
    width: 46px;
    height: 46px;
    background: rgba(0,0,0,0.54);
    border-radius: var(--vh360-radius-full);
    display: flex;
    align-items: center;
    justify-content: center;
}
.videohub360-videos-play-btn svg {
    display: block;
    width: 26px;
    height: 26px;
    fill: #fff;
    margin-left: 3px;
}
.videohub360-videos-title {
    font-size: 1.11em;
    margin: 16px 0 4px 0;
    color: #1a1a1a;
    font-weight: 500;
    text-decoration: none;
    display: block;
    padding: 0 14px;
}
.videohub360-videos-title:hover {
    text-decoration: underline;
}
.videohub360-videos-meta {
    font-size: 0.93em;
    color: #7a7a7a;
    margin-bottom: 10px;
    padding: 0 14px;
}

/* Live badge */
.videohub360-live-badge {
    position: absolute;
    top: 8px;
    left: 8px;
    z-index: 10;
    padding: 4px 8px;
    border-radius: var(--vh360-radius-sm);
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    color: var(--vh360-color-white);
    background-color: #e53935;
    box-shadow: 0 1px 3px rgba(0,0,0,0.3);
    letter-spacing: 0.5px;
}

/* Sidebar live badge positioning */
.videohub360-live-badge-sidebar {
    position: absolute;
    top: 6px;
    left: 6px;
    padding: 2px 4px;
    font-size: 8px;
    z-index: 5;
}

/* No videos found message */
.videohub360-no-videos-message {
    text-align: center;
    padding: 60px 20px;
    background: #f8f9fa;
    border-radius: var(--vh360-radius-md);
    font-size: 1.2em;
    color: var(--vh360-color-medium);
    margin: 40px 0 120px 0;
    min-height: 400px;
    max-height: 60vh;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* ================================================
   Shortcode/Widget List View Styles
   ================================================ */

.videohub360-videos-list {
    display: flex;
    flex-direction: column;
    gap: var(--grid-gap, 16px); /* Use custom property or default to 16px */
    margin: 18px auto;
    max-width: 1000px;
    width: 100%;
    margin-bottom: 40px;
}

.videohub360-videos-list .videohub360-videos-item {
    flex-direction: row;
    align-items: flex-start;
    gap: 16px;
    padding: 12px;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    background: #fff;
    width: 100%;
    max-width: none;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.videohub360-videos-list .videohub360-videos-item:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 16px rgba(0,0,0,0.12);
}

.videohub360-videos-list .videohub360-videos-thumb-wrap {
    flex-shrink: 0;
    width: 260px;
    height: 146px;
    margin-bottom: 0;
    background: #eee;
    border-radius: 7px;
    overflow: hidden;
    position: relative;
    display: block;
}

.videohub360-videos-list .videohub360-videos-content {
    flex: 1;
    min-width: 0;
    width: auto;
    display: flex;
    flex-direction: column;
    word-break: break-word;
    white-space: normal;
    justify-content: center;
}

.videohub360-videos-list .videohub360-videos-title {
    padding: 0; /* Remove padding for list view */
    margin: 0 0 4px 0;
    font-size: 1.08em;
}

.videohub360-videos-list .videohub360-videos-meta {
    padding: 0; /* Remove padding for list view */
}

/* Elementor container overrides for list view */
.elementor-widget-container .videohub360-videos-list,
.videohub360-elementor-widget-wrapper .videohub360-videos-list {
    margin: 0;
    margin-bottom: 40px;
}

/* Responsive list view */
@media (max-width: 600px) {
    .videohub360-videos-list {
        margin-bottom: 250px; /* Prevent last thumbnail cut-off */
        max-width: 100%;
    }
    
    .videohub360-videos-list .videohub360-videos-item {
        flex-direction: column;
        gap: 12px;
    }
    
    .videohub360-videos-list .videohub360-videos-thumb-wrap {
        width: 100%;
        height: auto;
        aspect-ratio: 4/3;
    }
    
    /* Better mobile handling for list view excerpts */
    .videohub360-videos-list .videohub360-videos-excerpt {
        -webkit-line-clamp: 2;
        font-size: 0.85em;
    }
}

/* ================================================
   Shortcode/Widget Item Content Styles
   ================================================ */

/* Grid view needs padding for content */
.videohub360-videos-grid .videohub360-videos-content {
    padding: 0 14px 14px 14px;
}

.videohub360-videos-grid .videohub360-videos-title {
    width: 100%;
    max-width: none;
    overflow-wrap: break-word;
    white-space: normal;
    font-size: 1.08em;
    margin: 10px 0 1px 0;
    padding: 0 14px; /* Keep padding for grid view */
}

.videohub360-videos-grid .videohub360-videos-meta {
    padding: 0 14px; /* Keep padding for grid view */
}

/* ================================================
   End Shortcode/Widget Styles
   ================================================ */

/* Filter info section */
.videohub360-filter-status {
    background: #f0f5fa;
    border-radius: var(--vh360-radius-md);
    padding: 12px 18px;
    margin-bottom: 20px;
    font-size: 0.95em;
    color: #444;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.videohub360-filter-status a {
    color: #0063b1;
    text-decoration: none;
    font-weight: 500;
}
.videohub360-filter-status a:hover {
    text-decoration: underline;
}
/* Responsive adjustments */
@media (max-width: 1200px) {
    .videohub360-archive-mainwrap {
        gap: 24px;
    }
    .videohub360-videos-grid {
        gap: 18px;
    }
}
@media (max-width: 900px) {
    .videohub360-search-bar-wrap {
        justify-content: center;
    }
    .videohub360-videos-grid {
        display: flex;
        flex-direction: column;
        gap: 24px;
    }
    .videohub360-videos-item {
        flex-direction: column;
        align-items: stretch;
        box-shadow: 0 1px 6px 0 rgba(0,99,177,.07);
        border-radius: 12px;
        padding: 0 0 14px 0;
        min-height: 0;
        background: var(--vh360-bg-white);
        margin: 0 0 0 0;
    }
    .videohub360-videos-thumb-wrap {
        width: 100%;
        max-width: 100%;
        min-width: 0;
        aspect-ratio: 4/3;
        border-radius: 12px 12px 0 0;
        margin: 0;
        background: #eee;
        box-sizing: border-box;
        display: block;
        overflow: hidden;
        padding: 0;
    }
    .videohub360-videos-thumb {
        border-radius: 12px 12px 0 0;
    }
    .videohub360-videos-title, .videohub360-videos-meta {
        padding-left: 18px;
        padding-right: 18px;
    }
    .videohub360-videos-title {
        margin-top: 16px;
        margin-bottom: 4px;
        font-size: 1.15em;
    }
    .videohub360-videos-meta {
        margin-bottom: 2px;
    }
}
@media (max-width: 600px) {
    .videohub360-search-bar-wrap {
        padding: 0 1vw;
        justify-content: center;
    }
    .videohub360-search-field {
        border-radius: 20px;
        height: 44px;
    }
    .videohub360-search-field input[type="search"] {
        padding: 0 12px;
        height: 100%;
        font-size: 16px; /* Prevent zoom on iOS */
        line-height: 1;
        margin: 0;
        vertical-align: middle;
    }
    .videohub360-search-submit {
        padding: 0 14px;
        height: 100%;
        min-width: 44px; /* Ensure proper touch target */
        margin: 0;
    }
    .videohub360-videos-grid {
        gap: 16px;
    }
    .videohub360-videos-thumb-wrap {
        border-radius: 10px 10px 0 0;
    }
    .videohub360-videos-thumb {
        border-radius: 10px 10px 0 0;
    }
    .videohub360-sidebar {
        padding: 14px 6px;
    }
}

/* --- Fix: Only show "Show Filters" button on mobile, and overlay only when sidebar is open --- */
.videohub360-filter-toggle-btn {
    display: none;
}
#videohub360-filter-overlay {
    display: none;
}
@media (max-width: 900px) {
    .videohub360-filter-toggle-btn {
        display: block;
        position: relative;
        left: auto;
        top: auto;
        width: 92%;
        max-width: 320px;
        margin: 0 auto 18px auto;
        z-index: 30;
        font-size: 0.98em;
        padding: 7px 14px 7px 11px;
    }
    #videohub360-filter-overlay.videohub360-show {
        display: block;
        position: fixed;
        z-index: 1000;
        background: rgba(0,0,0,0.38);
        left: 0; top: 0; width: 100vw; height: 100vh;
        transition: opacity 0.17s;
    }
}

/* Camera-Off Video Placeholders */
.video-placeholder {
    background: linear-gradient(135deg, var(--vh360-color-dark-alt) 0%, var(--vh360-color-dark-medium) 100%);
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--vh360-radius-md);
    overflow: hidden;
    transition: all 0.3s ease;
}

.video-placeholder::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: radial-gradient(circle at center, rgba(255,255,255,0.02) 0%, transparent 70%);
    pointer-events: none;
    z-index: 1;
}

.video-placeholder .active-speaker-badge {
    background: rgba(76, 175, 80, 0.95);
}

/* Responsive placeholder sizing */
@media (max-width: 768px) {
    .video-placeholder {
        min-height: 100px;
    }
}

/* Enhanced visual feedback for camera-off state */
.video-placeholder:hover {
    background: linear-gradient(135deg, #1f1f1f 0%, #323232 100%);
}

/* Ensure proper z-index for placeholder content - use CSS class selector */
.video-placeholder .vh360-video-content {
    z-index: 5;
    position: relative;
}

/* ========================================================================
   AGORA CONTROLS CONTAINER
   ======================================================================== */

.vh360-mobile-controls-simple {
    display: none;
    gap: 8px;
    align-items: center;
    background: rgba(0, 0, 0, 0.6);
    border-radius: 6px;
    padding: 8px;
    z-index: 25;
}

.vh360-controls-spacer {
    flex: 1;
}

/* ========================================================================
   AGORA CONTROL BUTTONS - Common Styles
   ======================================================================== */

/* Base control button styles */
.vh360-agora-control-btn {
    background: none;
    border: 1px solid #fff;
    color: var(--vh360-color-white);
    padding: 8px;
    border-radius: var(--vh360-radius-sm);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 32px;
    min-width: 32px;
    font-family: inherit;
    font-size: 14px;
    transition: all 0.2s ease;
    flex-shrink: 0;
}

.vh360-agora-control-btn:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: var(--vh360-color-border-light);
}

.vh360-agora-control-btn:active {
    background: rgba(255, 255, 255, 0.2);
}

.vh360-agora-control-btn svg {
    flex-shrink: 0;
}

/* Text button variant */
.vh360-agora-control-btn-text {
    padding: 6px 12px;
    gap: 4px;
    white-space: nowrap;
}

/* Icon-only button variant */
.vh360-agora-control-btn-icon {
    padding: 8px;
    min-height: 32px;
    min-width: 32px;
}

/* Special button variants */
.vh360-agora-btn-leave {
    background: #666;
    border-color: var(--vh360-color-medium);
}

.vh360-agora-btn-end {
    background: #e53935;
    border-color: #e53935;
}

/* Fullscreen button specific styles */
#vh360-agora-fullscreen-btn svg {
    flex-shrink: 0;
}

/* Hide text on smaller screens to save space */
@media (max-width: 480px) {
    .vh360-agora-control-btn-text {
        padding: 4px;
        min-width: 24px;
        justify-content: center;
        font-size: 11px;
    }
}

/* Fullscreen mode optimizations */
#vh360-agora-player:fullscreen,
#vh360-agora-player:-webkit-full-screen,
#vh360-agora-player:-moz-full-screen,
#vh360-agora-player:-ms-fullscreen {
    width: 100vw;
    height: 100vh;
    background: #000;
}

/* Temporary class to show fullscreen is being attempted */
.vh360-entering-fullscreen {
    transition: all 0.3s ease;
    border: 2px solid #4CAF50;
}

/* Ensure controls remain visible and properly positioned in fullscreen */
#vh360-agora-player:fullscreen #vh360-agora-controls,
#vh360-agora-player:-webkit-full-screen #vh360-agora-controls,
#vh360-agora-player:-moz-full-screen #vh360-agora-controls,
#vh360-agora-player:-ms-fullscreen #vh360-agora-controls {
    position: fixed;
    bottom: 20px;
    left: 20px;
    right: 20px;
    z-index: 999999;
}

/* Ensure remote players are properly positioned in fullscreen - overrides multi-view layouts */
#vh360-agora-player:fullscreen #vh360-agora-remote-players,
#vh360-agora-player:-webkit-full-screen #vh360-agora-remote-players,
#vh360-agora-player:-moz-full-screen #vh360-agora-remote-players,
#vh360-agora-player:-ms-fullscreen #vh360-agora-remote-players {
    position: fixed;
    top: 60px;
    right: 20px;
    z-index: 999998;
    max-width: 250px;
    display: flex;
    flex-direction: column;
}

/* Local player fills fullscreen space */
#vh360-agora-player:fullscreen #vh360-agora-local-player,
#vh360-agora-player:-webkit-full-screen #vh360-agora-local-player,
#vh360-agora-player:-moz-full-screen #vh360-agora-local-player,
#vh360-agora-player:-ms-fullscreen #vh360-agora-local-player {
    width: 100%;
    height: 100%;
    position: relative;
}

/* Mobile fullscreen optimizations - only apply when actually in fullscreen */
@media (max-width: 768px) {
    #vh360-agora-player:fullscreen #vh360-agora-controls,
    #vh360-agora-player:-webkit-full-screen #vh360-agora-controls,
    #vh360-agora-player:-moz-full-screen #vh360-agora-controls,
    #vh360-agora-player:-ms-fullscreen #vh360-agora-controls {
        bottom: 10px;
        left: 10px;
        right: 10px;
        flex-wrap: wrap;
        gap: 8px;
        /* Reset mobile-specific positioning when in fullscreen */
        transform: none;
        width: auto;
        max-width: calc(100% - 20px);
    }
    
    #vh360-agora-player:fullscreen #vh360-agora-remote-players,
    #vh360-agora-player:-webkit-full-screen #vh360-agora-remote-players,
    #vh360-agora-player:-moz-full-screen #vh360-agora-remote-players,
    #vh360-agora-player:-ms-fullscreen #vh360-agora-remote-players {
        top: 50px;
        right: 10px;
        max-width: 180px;
        display: flex;
        flex-direction: column;
    }
}

/* ========================================================================
   VIDEO QUALITY CONTROLS & MIRROR SETTINGS
   ======================================================================== */

/* Video Quality Controls Container */
.vh360-quality-controls {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: var(--vh360-z-ui-high);
    display: flex;
    gap: 8px;
    align-items: center;
    pointer-events: none; /* Allow clicks to pass through container */
}

.vh360-quality-controls > * {
    pointer-events: auto; /* Re-enable clicks on children */
}

/* Quality Badge */
.vh360-quality-badge {
    background: rgba(0, 0, 0, 0.8);
    color: var(--vh360-color-white);
    padding: 4px 8px;
    border-radius: var(--vh360-radius-sm);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    cursor: default;
    backdrop-filter: blur(4px);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

/* Settings Button */
.vh360-settings-button {
    background: rgba(0, 0, 0, 0.8);
    color: var(--vh360-color-white);
    border: 1px solid rgba(255, 255, 255, 0.1);
    padding: 8px;
    border-radius: var(--vh360-radius-sm);
    cursor: pointer;
    font-size: 14px;
    transition: all 0.2s ease;
    backdrop-filter: blur(4px);
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.vh360-settings-button:hover {
    background: rgba(0, 0, 0, 0.9);
    transform: scale(1.05);
}

.vh360-settings-button:focus {
    outline: 2px solid rgba(33, 150, 243, 0.5);
    outline-offset: 2px;
}

/* Quality Menu */
.vh360-quality-menu {
    position: absolute;
    top: calc(100% + 4px);
    right: 0;
    background: rgba(0, 0, 0, 0.95);
    border-radius: var(--vh360-radius-md);
    padding: 12px;
    min-width: 200px;
    max-width: 280px;
    display: none;
    backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.15);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
}

.vh360-quality-menu.show {
    display: block;
    animation: vh360FadeIn 0.2s ease;
}

@keyframes vh360FadeIn {
    from {
        opacity: 0;
        transform: translateY(-8px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Menu Sections */
.vh360-menu-section {
    margin-bottom: 16px;
}

.vh360-menu-section:last-child {
    margin-bottom: 0;
}

.vh360-menu-title {
    color: rgba(255, 255, 255, 0.7);
    font-size: 11px;
    text-transform: uppercase;
    margin-bottom: 8px;
    font-weight: 600;
    letter-spacing: 0.5px;
}

/* Menu Items */
.vh360-menu-item {
    display: block;
    color: var(--vh360-color-white);
    text-decoration: none;
    padding: 8px 12px;
    border-radius: 6px;
    font-size: 13px;
    cursor: pointer;
    transition: all 0.15s ease;
    border: none;
    background: none;
    width: 100%;
    text-align: left;
    margin-bottom: 2px;
    position: relative;
}

.vh360-menu-item:hover {
    background: rgba(255, 255, 255, 0.1);
    transform: translateX(2px);
}

.vh360-menu-item.active {
    background: rgba(33, 150, 243, 0.8);
    color: var(--vh360-color-white);
}

.vh360-menu-item.active::after {
    content: '✓';
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 12px;
}

/* Mirror Transform Classes */
.vh360-video-mirrored-horizontal {
    transform: scaleX(-1);
}

.vh360-video-mirrored-vertical {
    transform: scaleY(-1);
}

.vh360-video-mirrored-both {
    transform: scaleX(-1) scaleY(-1);
}

/* Responsive Design for Quality Controls */
@media (max-width: 768px) {
    .vh360-quality-controls {
        top: 8px;
        right: 8px;
        gap: 6px;
    }
    
    .vh360-quality-badge {
        padding: 3px 6px;
        font-size: 10px;
    }
    
    .vh360-settings-button {
        padding: 6px;
        font-size: 12px;
        width: 28px;
        height: 28px;
    }
    
    .vh360-quality-menu {
        min-width: 180px;
        padding: 10px;
        right: -8px; /* Adjust for mobile positioning */
    }
    
    .vh360-menu-item {
        padding: 10px;
        font-size: 14px;
    }
}

/* High DPI Display Optimizations */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
    .vh360-quality-badge,
    .vh360-settings-button,
    .vh360-quality-menu {
        backdrop-filter: blur(8px);
    }
}

/* Fullscreen Quality Controls */
.videohub360-player-container:fullscreen .vh360-quality-controls,
.videohub360-player-container:-webkit-full-screen .vh360-quality-controls,
.videohub360-player-container:-moz-full-screen .vh360-quality-controls {
    top: 20px;
    right: 20px;
    z-index: var(--vh360-z-system);
}

/* Quality Controls in Dark Theme */
.videohub360-dark-theme .vh360-quality-badge,
.videohub360-dark-theme .vh360-settings-button {
    background: rgba(255, 255, 255, 0.15);
    color: var(--vh360-color-white);
    border-color: rgba(255, 255, 255, 0.2);
}

.videohub360-dark-theme .vh360-quality-menu {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.2);
}

.videohub360-dark-theme .vh360-menu-item {
    color: var(--vh360-color-white);
}

.videohub360-dark-theme .vh360-menu-item:hover {
    background: rgba(255, 255, 255, 0.15);
}

/* Animation for Quality Changes */
.vh360-quality-transition {
    transition: all 0.3s ease;
}

/* Accessibility Improvements */
.vh360-settings-button:focus-visible {
    outline: 2px solid #2196F3;
    outline-offset: 2px;
}

.vh360-menu-item:focus-visible {
    outline: 2px solid #2196F3;
    outline-offset: -2px;
}

/* RTL Support */
[dir="rtl"] .vh360-quality-controls {
    right: auto;
    left: 10px;
}

[dir="rtl"] .vh360-quality-menu {
    right: auto;
    left: 0;
}

[dir="rtl"] .vh360-menu-item.active::after {
    right: auto;
    left: 8px;
}


/* ========================================
   Author Badge Styles
   ======================================== */

/* Base Author Row */
.vh360-author-row {
    display: flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    margin: 8px 0;
    transition: opacity 0.2s ease;
}

.vh360-author-row:hover {
    opacity: 0.8;
}

/* Author Avatar */
.vh360-author-avatar {
    border-radius: 50% !important;
    flex-shrink: 0;
    object-fit: cover;
    background: #e0e0e0;
    overflow: hidden;
    display: block;
}

/* Author Info Container */
.vh360-author-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

/* Author Name */
.vh360-author-name {
    font-size: 14px;
    font-weight: 500;
    color: #030303;
    line-height: 1.4;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

a.vh360-author-row:hover .vh360-author-name {
    color: #000;
}

/* Author Username */
.vh360-author-username {
    font-size: 12px;
    color: #606060;
    line-height: 1.4;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Compact Variant - Smaller for cards */
.vh360-author-row--compact {
    margin: 6px 0;
    gap: 8px;
}

.vh360-author-row--compact .vh360-author-avatar {
    width: 32px;
    height: 32px;
}

.vh360-author-row--compact .vh360-author-name {
    font-size: 13px;
}

.vh360-author-row--compact .vh360-author-username {
    font-size: 11px;
}

/* Name Only Variant - No avatar or username */
.vh360-author-row--name_only {
    margin: 4px 0;
    gap: 0;
}

.vh360-author-row--name_only .vh360-author-name {
    font-size: 12px;
    font-weight: 400;
    color: #606060;
}

.vh360-author-row--name_only:hover .vh360-author-name {
    color: #030303;
}

/* Integration with video cards */
.videohub360-videos-content .vh360-author-row {
    margin-top: 6px;
    margin-bottom: 4px;
}

/* Integration with sidebar */
.videohub360-sidebar-info .vh360-author-row {
    margin-top: 4px;
    margin-bottom: 4px;
}

/* Integration with single video page */
.videohub360-meta-container > .vh360-author-row {
    margin: 16px 0;
}

.videohub360-meta-container > .vh360-author-row .vh360-author-avatar {
    width: 56px;
    height: 56px;
}

.videohub360-meta-container > .vh360-author-row .vh360-author-name {
    font-size: 16px;
    font-weight: 600;
}

.videohub360-meta-container > .vh360-author-row .vh360-author-username {
    font-size: 14px;
}

/* Dark theme support */
.videohub360-dark-theme .vh360-author-name {
    color: #f1f1f1;
}

.videohub360-dark-theme a.vh360-author-row:hover .vh360-author-name {
    color: #fff;
}

.videohub360-dark-theme .vh360-author-username {
    color: #aaa;
}

.videohub360-dark-theme .vh360-author-row--name_only .vh360-author-name {
    color: #aaa;
}

.videohub360-dark-theme .vh360-author-row--name_only:hover .vh360-author-name {
    color: #f1f1f1;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .videohub360-meta-container > .vh360-author-row .vh360-author-avatar {
        width: 48px;
        height: 48px;
    }
    
    .videohub360-meta-container > .vh360-author-row .vh360-author-name {
        font-size: 15px;
    }
    
    .videohub360-meta-container > .vh360-author-row .vh360-author-username {
        font-size: 13px;
    }
}