/* Basic Resets and Body Styling */
body {
    margin: 0;
    padding: 20px; /* Add some padding around the player for visibility */
    background-color: #1a1a1a; /* Dark background to mimic the original site's feel */
    font-family: Arial, sans-serif; /* A common sans-serif font */
    display: flex;
    flex-direction: column; /* Arrange content vertically */
    align-items: center; /* Center horizontally */
    min-height: 100vh; /* Ensure body takes full viewport height */
    box-sizing: border-box; /* Include padding in element's total width/height */
}

/* LiveLeak Website Logo (outside player) */
.website-logo-container {
    width: 780px; /* Match player width for alignment */
    text-align: left; /* Align logo to the left within its container */
    margin-bottom: 20px; /* Space below the logo */
}

.website-logo {
    width: 200px; /* Adjust size as needed */
    height: auto;
    display: block; /* Ensures it behaves like a block element */
}

/* Main Player Container */
.liveleak-video-player-standalone {
    width: 780px; /* Approximate width based on common video player sizes */
    background-color: #000; /* Main player background */
    border: 1px solid #333; /* Subtle border */
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.5); /* Soft shadow */
    position: relative;
    overflow: hidden; /* Ensures nothing spills out */
    box-sizing: border-box;
}

/* Video Header (Title and Quote) */
.video-header {
    background-color: #222; /* Darker grey background for header */
    padding: 10px 15px;
    color: #fff;
    border-bottom: 1px solid #333;
}

.video-header h2 {
    margin: 0;
    font-size: 18px;
    font-weight: bold;
    color: #eee; /* Lighter white for title */
    display: flex;
    align-items: center;
    gap: 5px; /* Space between title, HD, and smiley */
}

.video-header .hd-icon {
    background-color: #C00; /* Red background for HD */
    color: #fff;
    font-size: 10px;
    font-weight: bold;
    padding: 2px 4px;
    border-radius: 2px;
    line-height: 1; /* Adjust line-height to center text vertically */
}

.video-header .smiley {
    font-size: 16px; /* Adjust size of emoji */
    line-height: 1;
}

.video-header .staff-quote {
    margin-top: 5px;
    font-size: 11px;
    color: #bbb; /* Slightly lighter grey for quote */
}

/* Video Display Area (Contains video element, watermark, and sidebar) */
.video-display-area {
    position: relative;
    width: 100%;
    /* Aspect Ratio Calculation: 9 / 16 * 100% for 16:9 aspect ratio */
    padding-top: 56.25%;
    background-color: #000; /* Black background behind the video */
    overflow: hidden;
}

.video-element {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover; /* Ensures video fills the area, cropping if necessary */
    display: block;
}

.video-display-area .watermark {
    position: absolute;
    top: 15px;
    left: 15px;
    width: 100px; /* Adjust size of watermark */
    opacity: 0.6; /* Semi-transparent */
    pointer-events: none; /* Allows clicks to pass through */
    z-index: 2; /* Ensure it's above the video */
}

/* Video Sidebar (Related, Share, HD Status) */
.video-sidebar {
    position: absolute;
    top: 15px;
    right: 15px;
    display: flex;
    flex-direction: column;
    gap: 8px; /* Space between sidebar items */
    z-index: 3; /* Ensure it's above the video and watermark */
}

.video-sidebar .sidebar-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    background-color: rgba(0, 0, 0, 0.7); /* Semi-transparent black background */
    border-radius: 3px;
    padding: 5px 8px;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.video-sidebar .sidebar-item:hover {
    background-color: rgba(0, 0, 0, 0.9);
}

.video-sidebar .sidebar-item img {
    width: 24px; /* Icon size */
    height: 24px;
    filter: invert(1); /* Makes icons white if they are dark */
}

.video-sidebar .sidebar-item span {
    color: #fff;
    font-size: 10px;
    margin-top: 3px;
    text-transform: uppercase;
}

/* HD Toggle Button Specific Styles */
.video-sidebar .hd-status {
    background-color: #D00; /* Red background when ON */
    color: #fff;
    padding: 5px 8px;
    border-radius: 3px;
    text-align: center;
    line-height: 1.2;
    cursor: pointer;
    border: none; /* Remove default button border */
    outline: none; /* Remove outline on focus */
    transition: background-color 0.2s ease;
    display: flex; /* Use flex to align text */
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.video-sidebar .hd-status:hover {
    background-color: #A00; /* Darker red on hover */
}

.video-sidebar .hd-status #hdText {
    font-weight: bold;
    font-size: 14px;
    display: block; /* Make HD and "is on" stack */
}

.video-sidebar .hd-status #hdStatusText {
    font-size: 10px;
    display: block;
}

/* State for HD "off" */
.video-sidebar .hd-status.is-off {
    background-color: #555; /* Grey when HD is off */
}
.video-sidebar .hd-status.is-off #hdText,
.video-sidebar .hd-status.is-off #hdStatusText {
    color: #bbb; /* Slightly dimmer text when off */
}

/* Video Controls Bar */
.video-controls-bar {
    background-color: #111; /* Very dark grey */
    padding: 8px 15px;
    display: flex;
    align-items: center;
    gap: 10px; /* Space between elements */
    border-top: 1px solid #333;
    box-sizing: border-box;
}

/* Control Buttons (Play/Pause, Mute) */
.video-controls-bar .control-button {
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px; /* Adjust size as needed */
    height: 30px; /* Adjust size as needed */
    flex-shrink: 0; /* Prevent buttons from shrinking */
}

.video-controls-bar .control-button img {
    width: 20px; /* Icon size */
    height: 20px;
    filter: invert(1); /* Makes icons white */
    transition: transform 0.1s ease; /* Subtle hover effect */
}

.video-controls-bar .control-button:hover img {
    transform: scale(1.1);
}

/* Progress Bar */
.video-controls-bar .progress-bar-container {
    flex-grow: 1; /* Takes up available space */
    height: 6px;
    background-color: #444; /* Background of the empty progress bar */
    border-radius: 3px;
    position: relative; /* For the filled part */
    cursor: pointer;
}

.video-controls-bar .progress-bar-filled {
    height: 100%;
    width: 0%; /* Initial state: 0% filled */
    background-color: #C00; /* Red filled portion */
    border-radius: 3px;
    position: relative;
    transition: width 0.1s linear; /* Smooth progress bar movement */
}

.video-controls-bar .progress-bar-filled::after {
    content: '';
    position: absolute;
    right: -5px; /* Half the width of the thumb */
    top: 50%;
    transform: translateY(-50%);
    width: 10px; /* Thumb width */
    height: 10px; /* Thumb height */
    background-color: #fff; /* White thumb */
    border-radius: 50%; /* Circular thumb */
    box-shadow: 0 0 3px rgba(0, 0, 0, 0.5);
    display: block; /* Ensures the pseudo-element is visible */
}


/* Time Display */
.video-controls-bar .current-time,
.video-controls-bar .total-time {
    color: #fff;
    font-size: 12px;
    white-space: nowrap; /* Prevent time from wrapping */
}

/* Optional: Hide scrollbar if content slightly overflows */
.liveleak-video-player-standalone {
    scrollbar-width: none; /* Firefox */
}
.liveleak-video-player-standalone::-webkit-scrollbar {
    display: none; /* Chrome, Safari, Opera */
}

/* ... (Keep all your existing CSS above this section, including the website logo and sidebar styles) ... */

/* Control Buttons (Play/Pause, Mute) */
.video-controls-bar .control-button {
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    display: flex; /* Use flex to center text */
    align-items: center;
    justify-content: center;
    min-width: 45px; /* Give them a bit more width for words */
    height: 30px; /* Adjust height as needed */
    flex-shrink: 0;
    font-size: 14px; /* Adjust font size for the words */
    font-weight: bold; /* Make the words bold */
    color: #fff; /* Make the words white */
    transition: transform 0.1s ease; /* Subtle hover effect */
    text-transform: uppercase; /* Optional: Make words uppercase */
    white-space: nowrap; /* Prevent words from wrapping */
}

.video-controls-bar .control-button:hover {
    transform: scale(1.05); /* Slight scale on hover */
    /* You could also add a subtle background color on hover if desired: */
    /* background-color: rgba(255, 255, 255, 0.1); */
}

/* REMOVE THIS ENTIRE SECTION from your style.css: */
/*
.video-controls-bar .control-button img {
    width: 20px;
    height: 20px;
    filter: invert(1);
    transition: transform 0.1s ease;
}
*/

/* No longer needed for text buttons */
/*
.video-controls-bar .control-button:hover img {
    transform: scale(1.1);
}
*/

/* Specific button margins (keep these) */
.video-controls-bar .play-pause {
    margin-right: 10px;
}

.video-controls-bar .mute {
    margin-left: 10px;
}

/* Progress bar and time display styles remain the same */

/* ... (Keep all your existing CSS below this section) ... */