/* =============================================================================
   EdTV Live - Scheduled Video Player Styles
   ========================================================================== */

:root {
	--black: #121212;
	--white: #f3f3f3;
	--gray: #808080;
	--red: #ff0000;
	--green: #00ff00;
}

/* Base styles
   ========================================================================== */
* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

body {
	font-family: Arial, sans-serif;
	background-color: var(--black);
	color: var(--white);
}


/* Header styles */
header {
	position: fixed;
	z-index: 2;
	width: 100vw;
	left: 0;
	top: 0;
}

.status-bar {
	position: fixed;
	z-index: 20;
	width: auto;
	left: 0;
	top: 0;
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 20px;
	font-size: small;
}

#status-dot {
	display: inline-block;
	width: 12px;
	height: 12px;
	border-radius: 50%;
	margin-right: 8px;
}

#status-dot.live {
	background-color: var(--red);
	box-shadow: 0 0 10px rgba(255, 0, 0, 0.7);
}

#status-dot.offline {
	background-color: var(--gray);
}

.status-bar:has(#status-dot.live) {
	animation: fadeOut 10s forwards;
}

@keyframes fadeOut {
	0% {
		opacity: 1;
	}
	80% {
		opacity: 1;
	}
	100% {
		opacity: 0;
	}
}


/* Player container */
#player-container {
	position: fixed;
	top: 0;
	left: 0;
	width: 100vw;
	height: 100vh;
	background-color: var(--black);
}

#player-container video {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	object-fit: contain;
}

/* Overlay styles */
#overlay {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
	background-color: var(--black);
	z-index: 10;
}

#overlay.hidden {
	display: none;
}

#overlay.error {
	background-color: rgba(128, 0, 0, 0.8);
}

#overlay.message-only {
	background-color: rgba(0, 0, 0, 0.5);
}

#message {
	color: var(--white);
	font-size: 1.5em;
	text-align: center;
	padding: 20px;
}

button[data-toggle-fullscreen] {
	position: fixed;
	bottom: 1rem;
	right: 1rem;
	color: var(--white);
	z-index: 10;
	background: transparent;
	appearance: none;
	border: 0;
	outline: 0;

}

:fullscreen {
  button[data-toggle-fullscreen] {
	  display: none;
  }
}

/* Utility classes
   ========================================================================== */
.hidden {
	display: none !important;
}