/* General container for the video player */
.video-player-container { 
    display: flex; 
    font-family: Arial, sans-serif; 
    background-color: #000; 
    color: #fff; 
    width: 100%; 
    max-width: 1200px; 
    margin: 20px auto; 
    border-radius: 8px; 
    overflow: hidden; 
    position: relative; 
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
    transition: all 0.3s ease-in-out;
}
.video-wrapper { flex-grow: 1; position: relative; background-color: #000; display: flex; align-items: center; justify-content: center; min-height: 360px; }
.video-element, .youtube-embed iframe { width: 100%; height: 100%; display: block; object-fit: contain; background-color: #000; }
.youtube-embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; }
.ad-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: #000; display: flex; flex-direction: column; justify-content: center; align-items: center; z-index: 10; padding: 0; box-sizing: border-box; }
.ad-label { position: absolute; top: 10px; left: 10px; background-color: rgba(255, 255, 255, 0.2); padding: 5px 10px; border-radius: 4px; font-size: 0.8em; color: #fff; }
.ad-countdown { margin-top: 10px; font-size: 1.2em; color: #ddd; }
.ad-content { width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; }
.ad-content img, .ad-content video { width: 100%; height: 100%; object-fit: cover; }
.player-controls { 
    position: absolute; 
    bottom: 0; 
    left: 0; 
    width: 100%; 
    background: linear-gradient(to top, rgba(0, 0, 0, 0.7), transparent); 
    padding: 10px; 
    box-sizing: border-box; 
    display: flex; 
    align-items: center; 
    gap: 10px; 
    transition: opacity 0.3s ease, transform 0.3s ease-in-out; 
    opacity: 1; 
    z-index: 5; 
}
.control-button { background: none; border: none; color: white; font-size: 1.5em; cursor: pointer; padding: 5px; line-height: 1; }
.control-button.active { color: #00aaff; text-shadow: 0 0 5px #00aaff; }
.play::before { content: '▶'; } .pause::before { content: '⏸'; } .volume-high::before { content: '🔊'; } .volume-muted::before { content: '🔇'; } .settings::before { content: '⚙'; } .fullscreen::before { content: '📺'; } .fullscreen.fullscreen-exit::before { content: '🗖'; } .kiosk::before { content: '🖥️'; }
.debug { font-size: 1.2em; }
.progress-bar-container { flex-grow: 1; height: 8px; background-color: rgba(255, 255, 255, 0.3); border-radius: 4px; position: relative; cursor: pointer; }
.progress-bar-fill { height: 100%; width: 0%; background-color: #007bff; border-radius: 4px; }
.progress-bar-handle { position: absolute; top: -4px; left: 0%; transform: translateX(-50%); width: 16px; height: 16px; background-color: #007bff; border: 2px solid white; border-radius: 50%; cursor: grab; }
.time-display { font-size: 0.9em; margin: 0 5px; min-width: 80px; text-align: right; }
.volume-slider { width: 80px; height: 4px; -webkit-appearance: none; appearance: none; background: rgba(255, 255, 255, 0.3); border-radius: 2px; cursor: pointer; margin-right: 10px; }
.volume-slider::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 14px; height: 14px; background: #007bff; border: 1px solid white; border-radius: 50%; cursor: pointer; }
.volume-slider::-moz-range-thumb { width: 14px; height: 14px; background: #007bff; border: 1px solid white; border-radius: 50%; cursor: pointer; }
.playlist-sidebar { 
    width: 300px; 
    background-color: #222; 
    padding: 15px; 
    box-sizing: border-box; 
    overflow-y: auto; 
    max-height: calc(100vh - 40px);
    transition: opacity 0.3s ease-in-out, transform 0.3s ease-in-out;
}
.playlist-title { font-size: 1.3em; margin-top: 0; margin-bottom: 15px; color: #eee; }
.playlist-items { list-style: none; padding: 0; margin: 0; }
.playlist-item { display: flex; align-items: center; padding: 10px; margin-bottom: 8px; background-color: #333; border-radius: 5px; cursor: pointer; transition: background-color 0.2s ease; border-left: 4px solid transparent; }
.playlist-item:hover { background-color: #444; }
.playlist-item.active { background-color: #0056b3; border-left-color: #007bff; }
.playlist-thumbnail { width: 60px; height: 40px; object-fit: cover; border-radius: 3px; margin-right: 10px; }
.playlist-details { flex-grow: 1; min-width: 0; }
.playlist-title-item { font-size: 1em; font-weight: bold; color: #fff; margin-bottom: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.playlist-duration { font-size: 0.85em; color: #bbb; }
.message-overlay { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); background-color: rgba(0, 0, 0, 0.9); padding: 20px 30px; border-radius: 8px; color: white; font-size: 1.2em; text-align: center; z-index: 20; box-shadow: 0 0 15px rgba(0, 0, 0, 0.7); }
body.kiosk-mode { 
    overflow: hidden; 
    transition: overflow 0.3s ease;
}

.kiosk-mode .video-player-container { 
    position: fixed; 
    top: 0; 
    left: 0; 
    width: 100vw; 
    height: 100vh; 
    margin: 0; 
    border-radius: 0; 
    z-index: 2147483647;
    transition: all 0.3s ease-in-out;
}

.kiosk-mode .playlist-sidebar, 
.kiosk-mode .player-controls { 
    display: none; 
    transition: opacity 0.2s ease-out;
}

.kiosk-mode .video-wrapper { 
    width: 100%; 
    height: 100%; 
    transition: all 0.3s ease-in-out;
}
.video-player-container:fullscreen { 
    width: 100%; 
    height: 100%; 
    margin: 0;
}

/* Fullscreen ad styling */
.video-player-container:fullscreen .ad-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: 2147483647;
}

.video-player-container:fullscreen .ad-content {
    width: 100vw;
    height: 100vh;
}

.video-player-container:fullscreen .ad-content video {
    width: 100vw;
    height: 100vh;
    object-fit: cover; 
    border-radius: 0; 
    background-color: black;
    transition: all 0.3s ease-in-out;
}

.video-player-container:fullscreen .playlist-sidebar { 
    display: none; 
    transition: opacity 0.2s ease-out;
}
@media (max-width: 768px) { .video-player-container { flex-direction: column; width: 100%; margin: 0; border-radius: 0; } .playlist-sidebar { width: 100%; max-height: 300px; } .player-controls { flex-wrap: wrap; justify-content: center; } }

/* Kiosk mode override to force normal layout */
body.kiosk-mode-override {
    overflow: visible !important;
}

body.kiosk-mode-override .video-player-container {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    width: 100% !important;
    max-width: 1200px !important;
    height: auto !important;
    margin: 20px auto !important;
    border-radius: 8px !important;
    z-index: auto !important;
}

body.kiosk-mode-override .playlist-sidebar,
body.kiosk-mode-override .player-controls {
    display: block !important;
    opacity: 1 !important;
}

body.kiosk-mode-override .video-wrapper {
    width: auto !important;
    height: auto !important;
}

/* Start Overlay for Autoplay Interaction */
.start-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.7); display: flex; justify-content: center; align-items: center; z-index: 30; cursor: pointer; }
.start-button { font-size: 60px; background: none; border: 3px solid white; color: white; width: 100px; height: 100px; border-radius: 50%; display: flex; justify-content: center; align-items: center; cursor: pointer; transition: background-color 0.2s ease, transform 0.2s ease; padding-left: 10px; box-sizing: border-box; }
.start-button:hover { background-color: rgba(255, 255, 255, 0.2); transform: scale(1.1); }/* Deb
ug Timer Panel */
.debug-timer-panel {
    position: absolute;
    top: 10px;
    right: 10px;
    background-color: rgba(0, 0, 0, 0.9);
    border: 1px solid #333;
    border-radius: 8px;
    padding: 15px;
    z-index: 20;
    min-width: 200px;
    font-family: monospace;
    font-size: 12px;
    color: #fff;
}

.debug-timer-panel h3 {
    margin: 0 0 10px 0;
    font-size: 14px;
    color: #00aaff;
    text-align: center;
}

.debug-timer-panel > div {
    margin-bottom: 8px;
}

.debug-timer-panel span {
    color: #00ff00;
    font-weight: bold;
}

.debug-button {
    background-color: #333;
    border: 1px solid #555;
    color: #fff;
    padding: 4px 8px;
    margin: 2px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 10px;
}

.debug-button:hover {
    background-color: #555;
}

.debug-button:active {
    background-color: #00aaff;
}