:root {
	--primary-color: #ea2a33;
}

body {
	min-height: max(884px, 100dvh);
}

span, a {
	text-decoration: none;
	outline: none;
	user-select: none;
}

/* Notification Badge for the settings icon */
#settings.notification-badge {
    position: relative;
}
#settings.notification-badge::after {
    content: '';
    position: absolute;
    top: 0.25rem; /* 4px */
    right: 0.5rem; /* 8px on mobile */
    width: 8px;
    height: 8px;
    background-color: #EF4444; /* red-500 */
    border-radius: 50%;
    border: 1.5px solid #121212; /* Match the body background */
}

.selected {
	color: var(--primary-color);
}

.selected_channel {
  background-color: #27272a;   /* Tailwind neutral-800 */
  color: white;                /* text color if needed */
  transition: background-color 0.3s ease; /* smooth transition if toggled */
  cursor: pointer;             /* pointer indicates clickable item */
  padding: 0.5rem 1rem;        /* optional padding */
  border-radius: 0.5rem;       /* optional rounded corners */
}

/* Optional: hover effect even when selected */
.selected_channel:hover {
  background-color: #3f3f46;   /* slightly lighter on hover */
}

nav a:hover{
	cursor: pointer;
}

#search:hover, #settings:hover{
	cursor: pointer;
}

/* Scrollbar base */
::-webkit-scrollbar {
	width: 5px;  
	height: 5px; 
}

/* Track */
::-webkit-scrollbar-track {
	
}

/* Thumb */
::-webkit-scrollbar-thumb {
	background: rgba(255, 255, 255, 0.5);
	border-radius: 2px;
	cursor: pointer;
}

::-webkit-scrollbar-thumb:active{
	background: rgba(255, 255, 255, 0.9);
}

::-webkit-scrollbar-thumb:hover{
	background: rgba(255, 255, 255, 0.9);
}


/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
	background: rgba(50, 50, 50, 0.5);
}

/* Corner where scrollbars meet */
::-webkit-scrollbar-corner {
    background: transparent;
}

video::-webkit-media-controls {
	display: none !important;
}

video::-webkit-media-controls-enclosure {
	display: none !important;
}

video::-webkit-media-controls-panel {
	display: none !important;
}

video::-webkit-media-controls-overlay-enclosure {
	display: none !important;
}

video::-webkit-media-controls-play-button {
	display: none !important;
}

video::-webkit-media-controls-fullscreen-button {
	display: none !important;
}

video {
    -webkit-tap-highlight-color: transparent;
    -webkit-touch-callout: none;
}

video::cue{
	background: rgba(0, 0, 0, 0);
}

#video_controls {
	transition: opacity 0.3s ease;
}

@keyframes glowPulse {
	0%, 100% { box-shadow: 0 0 40px rgba(255, 255, 255, 0.2); }
	50% { box-shadow: 0 0 60px rgba(255, 255, 255, 0.4); }
}

#video_container {
	animation: glowPulse 3s ease-in-out infinite;
}

#player:not(.playing) {
	object-fit: cover;
}

#player.playing {
	object-fit: contain;
}

.scaled-down #video_middle #play_video span {
	font-size: 4rem;
}

.scaled-down #video_middle #video_back_10 span {
	font-size: 2rem;
}

.scaled-down #video_middle #video_back_30 span {
	font-size: 3rem;
}

.scaled-down #video_middle #video_forward_10 span {
	font-size: 2rem;
}

.scaled-down #video_middle #video_forward_30 span {
	font-size: 3rem;
}

.scaled-down #video_bottom {
	padding-bottom: 0.6rem;
}

#video_player {
	overflow: auto;
	min-width: 300px;
	min-height: 200px;
	max-width: 100%;      
	max-height: 100%;
}

#content.wallpaper-active {
    position: relative;
    z-index: 0;
}

#content.wallpaper-active::before {
    content: '';
    position: absolute;
    inset: 0;
    backdrop-filter: blur(16px); /* Corresponds to backdrop-blur-lg */
    background-color: rgba(18, 18, 18, 0.5); /* Corresponds to bg-black/50 */
    z-index: -1;
}

/* --- TV Guide ---
   These styles are for the grid layout and sticky elements which are
   not easily achievable with just Tailwind CDN classes. */
.guide-container {
    display: grid;
    grid-template-columns: 120px 1fr; /* Channel Logo Column | Program Timeline Column */
    grid-auto-rows: 80px;
}

/* These elements are direct children of the grid and need `display: contents` to pass the grid layout down to their own children. */
.guide-header,
.guide-body,
.guide-row {
    display: contents;
}

.guide-channel-logo-header,
.guide-channel-info {
    grid-column: 1;
    position: sticky;
    display: flex;
    align-items: center;
    justify-content: center;
}

.guide-channel-logo-header {
    top: 0;
    z-index: 20;
    background-color: #181818; /* Match modal header */
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    border-right: 1px solid rgba(255, 255, 255, 0.1);
    font-weight: bold;
}

.guide-timeline-header {
    grid-column: 2;
    position: sticky;
    top: 0;
    z-index: 20;
    display: flex;
    position: relative;
    background-color: #181818; /* Match modal header */
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.guide-time-slot {
    flex-shrink: 0;
    border-right: 1px solid rgba(255, 255, 255, 0.05);
    padding-left: 0.5rem;
    padding-right: 0.5rem;
    display: flex;
    align-items: center;
}

.guide-channel-info {
    left: 0;
    z-index: 10;
    background-color: #1E1E1E; /* Match guide background */
    border-right: 1px solid rgba(255, 255, 255, 0.1);
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    padding: 0.5rem;
}

.guide-programs {
    grid-column: 2;
    position: relative;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.guide-now-line {
    position: absolute;
    top: 0; bottom: 0;
    width: 3px;
    background-color: var(--primary-color, #ef4444);
    grid-column: 2; /* Align with the programs column */
    z-index: 25; /* Above programs */
    opacity: 0.8;
}

.program {
    position: absolute;
    top: 0.25rem; bottom: 0.25rem;
    padding: 0.25rem;
    border-radius: 0.25rem;
    border-width: 1px;
    font-size: 0.875rem;
    overflow: hidden;
    white-space: nowrap;
    cursor: pointer;
    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 150ms;
    background-color: #2a2a2a;
    border-color: #3c3c3c;
}
.program:hover {
    background-color: #3c3c3c;
    border-color: #555;
}
.program.live {
    border-left: 4px solid var(--primary-color, #ef4444);
}