:root {
  --primary-bg: #0f1016; /* unused */
  --secondary-bg: rgba(15, 16, 22, 0.9); /* unused */
  --highlight-color: rgba(53,80,161,1); /* #1e90ff; */
  --focus-color: rgba(53,80,161,1); /* #1e90ff; */
  --text-color: 254,254,254,1; /* #ffffff; */
  --time-color: #666; /* unused */
  --program-height: 80px;
  --enhanced-program-height: 14vw;
  --channel-width: 240px;
  --live-badge-color: rgba(222, 0, 0, 1);
  --progress-bar-color: rgba(241,241,241,0.3); /* #0078ff; */

  /* Additional colors extracted from the CSS */
  --body-bg: rgba(242,242,242,1); /* #0f1214; */
  --date-arrow-bg: rgba(50, 50, 50, 0.6); /* unused */
  --date-arrow-hover-bg: rgba(70, 70, 70, 0.8); /* unused */
  --channel-header-bg: rgba(37,37,37,0.88); /* rgba(40, 40, 40, 0.88); can be removed */
  --channel-logo-bg: rgba(37,37,37,0.3); /* rgba(40, 40, 40, 0.3); can be removed */
  --skeleton-bg: #444;
  --overlay-color: rgba(53,80,161,0.9); /* rgba(12, 12, 14, 0.8); can be removed */
  --skeleton-shine: rgba(255, 255, 255, 0.1);
  --program-item-bg: rgba(40,49,75,1); /* rgba(30, 30, 30, 0.9); */
  --program-item-hover-bg: rgba(60, 60, 60, 0.8); /* hover not required */
  --progress-container-bg: rgba(241,241,241,0.3); /* rgba(30, 30, 30, 1); */
  --program-detailed-bg: rgba(40, 40, 50, 0.95); /* unused */
  --program-status-color: 254,254,254,1; /* rgba(255, 255, 255, 0.64); */
  --focus-border-color: rgba(0,138,255,1); /* #0078ff; */
  --focus-shadow-color: transparent; /* rgba(0, 120, 255, 0.7); */
  --shadow-color: rgba(0, 0, 0, 0.8); /* unused */

  /* Gradients */
  --body-gradient: linear-gradient(to right,rgba(15, 16, 22, 0.99) 0%,rgba(15, 16, 22, 0.75) 100%); /* unused */
  --program-overlay-gradient: linear-gradient(180deg, rgba(37,37,37, 0) 42.42%, rgba(37,37,37, 1) 100%);
}

/* Prevent page scrolling */
.epg-container{
  margin: 0;
  padding: 0;
  overflow: hidden;
  height: 100vh;
  width: 100vw;
  font-family: 'TV2ZFont-Regular';
  color: rgba(254,254,254,1);
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.epg-container::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 0;
}

/* Layout */
.epg-container {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  height: 100vh;
  width: 100vw;
  box-sizing: border-box;
  max-width: 100%;
}

/* Date Navigation - Now at top */
.date-navigation {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 10px 0 20px;
  width: 100%;
}

.date-section {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  border-radius: 20px;
  /* padding: 5px 15px; */
}

/* .date-arrow {
  color: var(--text-color);
  cursor: pointer;
  transition: all 0.2s ease-in-out;
  padding: 8px;
  user-select: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
}

.date-arrow svg {
  width: 20px;
  height: 20px;
  fill: currentColor;
  transform-origin: center;
}

.date-arrow:hover {
  color: rgba(53,80,161,1);
}
.epg-container .date-arrow.focused {
  border: 2px solid rgba(0,138,255,1);
  background-color: rgba(77,119,172,0.24);
} */

.date-section.flash .date-arrow svg {
  animation: flash-arrow 0.5s ease-in-out;
}

.date-display {
  font-size: 18px;
  color: rgba(254,254,254,1);
  font-weight: bold;
  padding: 8px 16px;
  cursor: pointer;
  transition: all 0.2s ease-in-out;
}

.focused .date-display {
  color: rgba(53,80,161,1);
}

/* EPG Container */
.epg-container {
  display: flex;
  flex-direction: column;
  height: 100vh;
  background-color: rgba(53,80,161,0.9);
  color: rgba(254,254,254,1);
  font-family: 'TV2ZFont-Regular';
  padding-top: 24px;
  z-index: 8;
}

/* Date Navigation */
.date-section {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding: 15px 2vw;
  position: relative;
  z-index: 10;
  gap:15px;
  width: fit-content;
}

.date-arrow {
  background: rgba(135,135,135,0.12);
  /* color: var(--text-color); */
  /* border: 2px solid rgba(254,254,254,1); */
  border-radius: 50px;
  width: auto;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background-color 0.2s;
  border: none;
  font-size:18px;
  color:rgba(254,254,254,1);
}
/* .date-arrow img{
  width:100%;
  height:100%;
} */
.date-arrow:hover, .date-arrow.focused{
  background-color: rgba(0,138,255,1);
  /* border: 2px solid rgba(254,254,254,1); */
}

#date-prev {
  padding:0px 16px 0px 10px;
}
#date-next {
  padding:0px 10px 0px 16px;
}

.date-display {
  font-size: 20px;
  font-weight: 500;
  padding: 0 20px;
  cursor: pointer;
  font-family: 'TV2ZFont-bold';
}

/* Channel Columns */
.horizontal-scroll {
  flex: 1;
  overflow-x: auto; /* Add explicit overflow-x to enable horizontal scrolling */
  scrollbar-width: none;
  width: 100%;
  -ms-overflow-style: none;
  will-change: transform, scroll-position;
  transform: translateZ(0);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  perspective: 1000;
  scroll-behavior: smooth; /* Default smooth scrolling */
}

#channelColumns {
  position: relative;
  height: calc(100vh - 70px);
  display: flex;
  flex-wrap: nowrap;
  margin-left: 2vw;
  transform: translateZ(0);
  backface-visibility: hidden;
  -webkit-transform: translateZ(0);
  -webkit-backface-visibility: hidden;
}

.channel-column-placeholder {
  height: 100%;
  width: 22vw;
  min-width: 200px;
  flex-shrink: 0;
  transform: translateZ(0);
  will-change: transform;
}

.channel-column {
  height: 100%;
  display: flex;
  flex-direction: column;
  border-radius: 0.6vw;
  margin-right: 1.5vw;
  margin-bottom: 1rem;
  transition: background-color 0.3s ease;
  position: relative; /* Add position relative for absolute child positioning */
  will-change: transform;
  transform: translateZ(0);
}

/* Channel Header */
.channel-header {
  padding: 15px;
  background-color: rgba(37,37,37, 1);
  box-shadow: 0px 8px 32px 0px #00000066;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 0.6vw;
  height: 4.8vw;
  position: absolute; /* Changed from relative to absolute */
  z-index: 10; /* Increased z-index to float over program-list */
  width: 100%; /* Ensure it spans the full width of the column */
  top: 0; /* Position at the top */
  left: 0;
}

.channel-logo {
  width: 6vw;
  height: 3vw;
  object-fit: contain;
  /* background-color: var(--channel-logo-bg); */
  background-color: rgba(37,37,37, 0.3); /* rgba(40, 40, 40, 0.3); */;
  opacity: 0;
  transition: opacity 0.3s ease-in;
}

.channel-logo.loaded {
  opacity: 1;
}

.skeleton-logo {
  width: 150px;
  height: 40px;
  background-color: #444;
  border-radius: 3px;
  animation: pulse 1.5s infinite;
  background-image: linear-gradient(
    90deg,
    #444 0px,
    rgba(255, 255, 255, 0.1) 40%,
    #444 80%
  );
  background-size: 200% 100%;
  background-repeat: no-repeat;
}

/* Program List */
.program-list {
  height: 100%; /* Changed from calc(100% - 80px) to 100% */
  overflow-y: hidden; /* Change from hidden to auto to enable vertical scrolling */
  overflow-x: hidden;
  border-radius: 0.6vw;
  /* padding: 10px; */
  /* background-color: rgba(20, 20, 20, 0.95); */
  scrollbar-width: none;
  -ms-overflow-style: none;
  position: relative;
  padding-top: 4vw; /* Add padding to accommodate the floating header height */
}

/* Add padding containers for scroll space */
.program-list::before,
.program-list::after {
  content: "";
  display: block;
  height: 50vh;
}

/* Base program item - unfocused state for ALL cards */
.epg-program-item {
  padding: 15px;
  height: 80px;
  margin-bottom: 0.5vw;
  background-color: rgba(40,49,75,1);
  border-radius: 0.6vw;
  cursor: pointer;
  position: relative;
  transition: background-color 0.3s ease, transform 0.3s ease;
  display: flex;
  flex-direction: row;
  justify-content: left;
  align-items: center;
  border: 2px solid transparent;
}

/* Add margin to all direct children of program-item except the first child */
/* .epg-program-item > *:not(:first-child) {
  margin-top: 12px;
} */

.epg-program-item:last-child {
  margin-bottom: 0;
}

.epg-program-item:hover {
  background-color: rgba(60, 60, 60, 0.8);
}

/* Only apply background image styling to center cards and focused items */
.epg-program-item.center-card.has-background,
.epg-program-item.focused.has-background {
  background-image: var(--program-bg-image);
  background-size: 100% auto;
  background-position: top center;
  background-repeat: no-repeat;
  color: rgba(254,254,254,1);
  position: relative;
}

/* Ensure the overlay only appears on items that should have it */
.epg-program-item::before {
  content: none; /* Default is to have no overlay */
  display: none;
}

/* Ensure there's a dark overlay for background images only when they're focused or center */
.epg-program-item.has-background.center-card::before,
.epg-program-item.has-background.focused::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(180deg, rgba(37,37,37, 0) 42.42%, rgba(37,37,37, 1) 100%);
  z-index: 0;
  display: block;
}

/* Gradient overlay for enhanced cards - ONLY apply to current center/focused cards */
.epg-program-item.center-card::before,
.epg-program-item.focused::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;

  z-index: 0;
  display: block;
}

/* Override default to ensure no gradient on non-focused, non-center cards */
.epg-program-item:not(.focused):not(.center-card)::before {
  content: none;
  display: none;
}

/* Time container holding both time and LIVE indicator */
.program-info-container {
  display: flex;
  flex-direction: column;
  align-items: left;
  flex-shrink: 0;
  margin-right: 12px;
}

/* LIVE indicator styling for small cards when in the program-info-container */
.program-info-container .live-indicator {
  margin-top: 4px;
  margin-left: 6px;
  margin-right: 4px;
}

/* Embedded indicator styling */
.program-info-container .live-indicator.embedded {
  font-size: 0.7vw;
  padding: 2px 5px;
  border-radius: 3px;
  background-color: rgba(222, 0, 0, 1);
  color: rgba(254,254,254,1);
  font-weight: bold;
  margin-right: 6px;
}

/* Reset right padding since we no longer need space for absolute positioning */
.epg-program-item:not(.center-card):not(.focused).live .program-title {
  max-width: 100%;
}

/* Focus-specific styling - only what makes focused items unique */
.epg-program-item.focused {
  border: 4px solid rgba(0,138,255,1);
  box-shadow: inset 0 0 10px transparent;
  z-index: 10; /* Higher z-index than center-card */
  box-sizing: border-box; /* Ensure border is included in element dimensions */
}

/* Detailed program view - both for center-card and focused */
.epg-program-item.detailed {
  position: relative;
  z-index: 10;
  transform: translateZ(0);
  transition: all 0.25s ease-out;
}

.epg-program-item.detailed .program-title {
  font-size: 16px;
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  margin-top: 8px;
}

.epg-program-item.detailed .program-time {
  font-size: 14px;
  font-weight: bold;
}

/* Style for detailed items with consistent height */
.epg-program-item.detailed.center-card,
.epg-program-item.detailed.focused {
  height: 14vw; /* Force exact height for all combinations */
  min-height: 14vw;
}

/* Override title margin when both center/focused and detailed */
.epg-program-item.center-card.detailed .program-title,
.epg-program-item.focused.detailed .program-title {
  width: 100%;
  margin-top: 0px;
}

/* Remove the conflicting rule */
.epg-program-item[style*="background-image"] {
  transition: background-image 0.3s ease-in;
}

/* We can remove this since we're using the ::before pseudo-element instead */
.program-overlay {
  display: none;
}

/* Non-special highlight for focused live items - now identical to regular focused */
.epg-program-item.live.focused {
  /* No special styling to keep all focused cards identical */
}

/* Remove the special live styling now that we're standardizing */
.epg-program-item.live {
  /* Keep only what's needed for the LIVE indicator */
  position: relative;
}

/* Remove the special overlay that was previously used on live cards */
.epg-program-item.live::before {
  display: none;
}

/* For detailed view, ensure the before element works properly */
.epg-program-item.detailed.focused::before {
  content: "";
  display: block;
}

/* Detailed program view */
.epg-program-item.detailed {
  height: auto; /* Allow detailed view to expand based on content */
  min-height: var(
    --enhanced-program-height
  ); /* Ensure minimum height matches 16:9 ratio */
  z-index: 2;
  transition: all 0.3s ease;
}

.epg-program-item.live.detailed {
  min-height: 14vw; /* Update to match 16:9 ratio */
}

.epg-program-item.detailed .program-title {
  font-size: 0vw;
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.epg-program-item.detailed .program-time {
  font-size: 0.6vw;
  font-weight: bold;
}

.epg-program-item.detailed .live-indicator {
  font-size: 0.6vw;
}

/* Style for all detailed items when focused */
.epg-program-item.focused.detailed {
  min-height: var(
    --enhanced-program-height
  ); /* Use consistent height ratio instead of fixed px value */
  height: auto; /* Allow detailed content to expand */
}

/* Override title margin when both focused and detailed */
.epg-program-item.focused.detailed .program-title {
  margin-top: 0; /* Remove the large margin-top */
}

/* No special styling for live detailed items when focused */
.epg-program-item.live.focused.detailed {
  /* All focused items should look the same */
}

/* Navigation Transitions */
.navigating * {
  transition-duration: 0.15s !important;
}

.navigating .channel-column {
  transition: transform 0.2s ease-out, box-shadow 0.2s ease-out;
}

.navigating .epg-program-item.detailed {
  transform: scale(1.02);
  transition: transform 0.3s ease-out, box-shadow 0.3s ease-out,
    border-color 0.3s ease-out !important;
}

/* Disable ALL transitions during rapid navigation to prevent stuttering */
.rapid-navigation * {
  transition: none !important;
  animation: none !important;
  will-change: auto !important;
  transform: none !important;
}

.rapid-navigation .epg-program-item.detailed {
  transform: translateZ(0) !important;
}

.rapid-navigation .horizontal-scroll,
body[class*="rapid-navigation"] .horizontal-scroll {
  scroll-behavior: auto !important;
  transition: none !important;
}

/* Improved focus styling */
.channel-column.focused {
  box-shadow: none;
  border: none;
  position: relative;
  z-index: 2;
}

/* Program focus styling */
.epg-program-item.detailed {
  position: relative;
  z-index: 10;
  transform: translateZ(0);
  transition: all 0.25s ease-out;
}

/* No special styling for live.detailed - all detailed items should look the same */

/* Center card styling - same as focused but for center cards in each channel */
.epg-program-item.center-card {
  /* Removed duplicate padding rule */
  color: rgba(254,254,254,1);
  position: relative;
  border-radius: 0.6vw;
  z-index: 5;
  will-change: transform, background-image;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

/* Text styling for center cards */
.epg-program-item.center-card .program-time,
.epg-program-item.center-card .program-title,
.epg-program-item.center-card .started-at {
  position: relative;
  z-index: 1;
}

.epg-program-item.center-card .program-title,
.epg-program-item.focused .program-title {
  font-size: 32px;
  /* font-weight: 700; */
  font-family: 'TV2ZFont-bold';
  margin-top: 0; /* Remove fixed margin-top */
  color: rgba(254,254,254,1);
  position: relative;
  z-index: 1;
  /* Add truncation to 2 lines */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: normal;
}

/* Override title margin when both focused and detailed */
.epg-program-item.focused.detailed .program-title {
  margin-top: 0; /* Remove the large margin-top */
}

/* Position text at the bottom of center/focused cards */
.epg-program-item.center-card,
.epg-program-item.focused {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding-bottom: 0.8vw; /* Ensure consistent bottom padding */
}

/* Ensure consistent bottom alignment for all enhanced cards */
.epg-program-item.center-card .program-info-container,
.epg-program-item.focused .program-info-container {
  margin-top: auto; /* Push content to the bottom of flex container */
  margin-bottom: 0.3vw;
}

/* Hide program time on center cards and focused items but keep the container */
.epg-program-item.center-card .program-time,
.epg-program-item.focused .program-time {
  display: none;
}

/* Completely hide all scrollbars throughout the application */
::-webkit-scrollbar {
  width: 0;
  height: 0;
  display: none; /* Hide scrollbars in WebKit browsers (Chrome, Safari, newer Edge) */
}

/* For Firefox */
* {
  scrollbar-width: none; /* Hide scrollbars in Firefox */
}

/* Hide scrollbars in IE and Edge */
* {
  -ms-overflow-style: none;
}

/* Skeleton loading animations */
@keyframes pulse {
  0% {
    opacity: 0.6;
    background-position: -100% 0;
  }
  50% {
    opacity: 0.9;
  }
  100% {
    opacity: 0.6;
    background-position: 200% 0;
  }
}

@keyframes shimmer {
  0% {
    background-position: -100% 0;
  }
  100% {
    background-position: 200% 0;
  }
}

/* Skeleton styles */
.channel-column.skeleton {
  background-color: rgba(37,37,37,0.88);
  opacity: 0.7;
}

.epg-program-item.skeleton {
  height: 80px;
  background-color: rgba(40,49,75,1);
  padding: 15px;
  display: flex;
  flex-direction: column;
  border-radius: 0.6vw;
  overflow: hidden;
  position: relative;
}

.epg-program-item.skeleton::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image: linear-gradient(
    90deg,
    transparent 0px,
    rgba(255, 255, 255, 0.1) 40%,
    transparent 80%
  );
  background-size: 200% 100%;
  background-repeat: no-repeat;
  animation: shimmer 1.5s infinite;
}

.epg-program-item.skeleton .skeleton-text {
  height: 14px;
  margin-bottom: 8px;
  background-color: #444;
  border-radius: 2px;
  width: 80%;
}

.epg-program-item.skeleton .skeleton-text:last-child {
  width: 60%;
}

/* Loading states */
.loading {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  font-size: 1rem;
  color: rgba(254,254,254,1);
}

.no-programs {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100px;
  font-size: 0.9rem;
  color: rgba(254,254,254,1);
  text-align: center;
  padding: 20px;
}

/* Apply no scrollbars to all possible scrollable elements */
body,
html,
.container1,
.epg-container,
.horizontal-scroll,
.program-list,
.channel-column,
.programs,
.channel {
  scrollbar-width: none;
  -ms-overflow-style: none;
}

/* Ensure scrolling functionality remains while hiding scrollbars */
.container1 {
  display: flex;
  flex-direction: column;
  height: 100vh;
  width: 100vw;
  box-sizing: border-box;
  max-width: 100%;
  overflow: hidden; /* Prevent container scrolling */
}

/* Channel title fallback */
.channel-title-fallback {
  color: rgba(254,254,254,1);
  font-size: 14px;
  font-weight: bold;
  text-align: center;
}

/* Live program styling - ensure consistency */
.epg-program-item.live {
  position: relative;
}

/* Ensure live focused items maintain the same height and text alignment */
.epg-program-item.live.focused,
.epg-program-item.live.center-card {
  height: 14vw; /* Force exact height */
  display: flex;
  flex-direction: column;
  justify-content: flex-end; /* Ensure content is at bottom */
  padding-bottom: 0.8vw; /* Consistent bottom padding */
}

/* Fix alignment for live indicators in center cards */
.epg-program-item.live.center-card .program-info-container,
.epg-program-item.live.focused .program-info-container {
  margin-top: auto; /* Push content to bottom */
  margin-bottom: 0.8vw;
}

/* Ensure detailed live items have consistent height */
.epg-program-item.live.detailed,
.epg-program-item.live.detailed.focused,
.epg-program-item.live.detailed.center-card {
  height: 14vw;
  min-height: 14vw;
}

/* Remove any auto height declarations for any combination */
.epg-program-item.detailed,
.epg-program-item.focused.detailed,
.epg-program-item.live.focused.detailed {
  height: 14vw !important; /* Force height consistency */
  min-height: 14vw;
}

/* Add animation for boundary feedback */
@keyframes boundary-pulse {
  0% {
    transform: translateY(0);
  }
  25% {
    transform: translateY(-3px);
  }
  50% {
    transform: translateY(3px);
  }
  75% {
    transform: translateY(-3px);
  }
  100% {
    transform: translateY(0);
  }
}

/* Effect applied when user tries to navigate past boundaries */
.epg-program-item.boundary-reached {
  animation: boundary-pulse 0.3s ease-in-out;
  border-color: rgba(53,80,161,1);
  box-shadow: 0 0 8px transparent;
}

/* Apply focus styling to center-card in focused channel */
.channel-column.focused .epg-program-item.center-card {
  border: 2px solid rgba(0,138,255,1);
  box-shadow: inset 0 0 20px transparent;
  box-shadow: 0 0 8px transparent;
  z-index: 10;
  box-sizing: border-box;
}

/* Remove all transitions from channel elements during rapid navigation */
.rapid-navigation .channel-column-placeholder,
.rapid-navigation .channel-column,
.rapid-navigation #channelColumns {
  transition: none !important;
}

/* Program Live Progress Bar Styling */
.progress-container {
  position: relative;
  width: 100%;
  height: 0.2vw;
  min-height: 4px;
  margin: 0.8vw 0 0 0;
  border-radius: 8px;
  background-color: rgba(241,241,241,0.3);
  z-index: 2;
}

.progress-bar {
  height: 100%;
  background-color: rgba(53,80,161,1);
  box-shadow: 0 0 12px transparent;
  transition: width 3s ease-out;
  border-radius: 8px;
}

/* Only show progress bar on center cards and focused items */
.epg-program-item:not(.center-card):not(.focused) .progress-container {
  display: none;
}

/* Only show program status text on center cards and focused items */
.epg-program-item:not(.center-card):not(.focused) .program-status {
  display: none;
}

/* Live indicator styling - show on all live programs */
.live-indicator {
  display: inline-block;
  background-color: rgba(222, 0, 0, 1);
  color: rgba(254,254,254,1);
  padding: 2px 4px;
  border-radius: 2px;
  font-size: 0.6vw;
  font-family: 'TV2ZFont-bold';
  z-index: 2;
  margin-right: 4px;
  text-transform: uppercase;
}

/* Hide embedded live indicator in non-center cards */
.epg-program-item:not(.center-card):not(.focused) .live-indicator.embedded {
  display: none;
}

/* Hide standalone live indicator in center/focused cards */
.epg-program-item.center-card
  .program-info-container
  .live-indicator:not(.embedded),
.epg-program-item.focused .program-info-container .live-indicator:not(.embedded) {
  display: none;
}

/* Program status text for future/past programs */
.program-status {
  width: 100%;
  font-size: 24px;
  color: rgba(254,254,254,1);
  margin-top: 0.2vw;
  display: flex;
  align-items: left;
  position: relative;
  z-index: 2;
  font-weight: 400;
  flex-direction: row;
}

/* Position the live indicator correctly within the status text container */
.epg-program-item.center-card .program-status,
.epg-program-item.focused .program-status {
  display: flex;
  flex-direction: row;
  align-items: center;
  flex-wrap: nowrap; /* Prevent wrapping */
}

.epg-program-item.center-card .live-indicator.embedded,
.epg-program-item.focused .live-indicator.embedded {
  position: static;
  margin-right: 6px; /* Add margin instead of using gap */
  order: -1; /* Ensure it's always first */
  align-self: center; /* Center vertically */
  font-size: 16px;
  padding: 4px 8px;
  border-radius: 3px;
  line-height: 100%;
  letter-spacing: 0.5px;
}

/* Base program item title - truncate to 1 line for non-centered cards */
.epg-program-item .program-title {
  color: rgba(254,254,254,1);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
  /* font-weight: 600; */
  font-family: 'TV2ZFont-bold';
  line-height: 1.4;
}

/* Program time styling for small cards */
.epg-program-item .program-time {
  font-size: 24px;
  font-weight: 400;
  flex-shrink: 0;
  color: rgba(254,254,254,1);
}

/* Opacity settings for non-centered cards */
.epg-program-item:not(.center-card):not(.focused) .program-time {
  opacity: 0.6;
}

/* .epg-program-item:not(.center-card):not(.focused) .program-title {
  opacity: 0.9;
} */

/* Add spacing between program-info-container and program-title */
.epg-program-item .program-info-container + .program-title {
  margin-top: 0px;
  font-size: 32px;
}

/* Enhanced program card - shared styles for both center-card and focused */
.epg-program-item.center-card,
.epg-program-item.focused,
.epg-program-item.detailed {
  padding: 0vw 1vw 0.8vw 1vw; /* Single definitive padding rule */
  color: rgba(254,254,254,1);
  height: 14vw; /* Single height definition */
  min-height: 14vw; /* Also set min-height for consistency */
  position: relative;
  border-radius: 0.6vw;
  overflow: hidden;
  z-index: 5;
  will-change: transform, background-image;
  display: flex;
  flex-direction: column;
  justify-content: flex-end; /* Ensure content is at bottom */
}

/* Hide embedded live indicator in non-center cards */
.epg-program-item:not(.center-card):not(.focused) .live-indicator.embedded {
  display: none;
}

/* Placeholder card styling */
.epg-program-item.placeholder-card {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 14vw;
  min-height: 14vw;
  margin: 0.5vw 0;
  padding: 0vw 1vw 0.8vw 1vw;
  text-align: center;
  font-size: 1rem;
  opacity: 0.8;
  border-radius: 0.6vw;
}

/* Animation control */
body.no-animations *,
body.no-animations *::before,
body.no-animations *::after {
  transition: none !important;
  animation: none !important;
}

body.no-animations .epg-program-item,
body.no-animations .channel-column,
body.no-animations .date-section {
  transition: none !important;
}

body.no-animations .epg-program-item.boundary-reached {
  animation: none !important;
}

body.no-animations .flash {
  animation: none !important;
}

body.no-animations .progress-bar {
  transition: none !important;
}

/* Add this at the top of the file */
body.no-animations .horizontal-scroll {
  scroll-behavior: auto !important;
}

.epg-program-item.center-card .program-img {
  width: 100%;
  height: 100%;
  z-index:-1;
  position:absolute;
  background-size: cover;
  top:0px;
}

.epg-empty-data {
  background: none;
}
.epg-program-item.epg-empty-data.center-card.detailed .program-title, .epg-program-item.epg-empty-data.focused.detailed .program-title{
  margin-top: 0px;
  background-color: rgba(37,37,37, 1);
}
.epg-empty-data .program-title {
	position: absolute !important;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
  display: flex!important;
  height: 100%;
  justify-content: center;
  align-items: center;
  margin: 0px;
  text-align: center;
}

/* Mouse navigation on carousel changes */
.epg-container .arrowItem {
    display: flex;
    flex-direction: row;
    align-items: center;
    /* width: 100px;
    padding: 0px 24px 0px 80px;
    height: 210px;
    margin-top: 48px; */
    width: 36px;
    padding: 6px;
    height: 36px!important;
    transform: translate(-50%, -50%);
    border-radius: 100px;
    top: 50% !important
}

.epg-container .leftArrowItem {
    justify-content: flex-start;
    position: absolute;
    background: rgba(135,135,135,0.12);
    margin-left: 40px;
    /* background: linear-gradient(90deg, rgba(242,242,242,1) 20%, rgba(0, 0, 0, 0) 100%);
    margin-left: -1px; */
}
.epg-container .rightArrowItem {
    justify-content: flex-start;
    position: absolute;
    /* right: 0;
    background: linear-gradient(270deg, rgba(242,242,242,1) 20%, rgba(0, 0, 0, 0) 100%); */
    background: rgba(135,135,135,0.12); 
    right: 0px;
}
.epg-container .leftArrowItem.focused, .epg-container .rightArrowItem.focused {
    background-color: rgba(0,138,255,1);
}
.epg-container .leftArrowImage {
    /* margin-left: -60px; */
    margin-left: 0px;
    width: 24px;
    height: 24px;
}
.epg-container .rightArrowImage {
    display: block !important;
    margin-right: 0px;
    width: 24px;
    height: 24px;
}
.epg-container .horizontal-scroll .leftArrowItem, .epg-container .horizontal-scroll .rightArrowItem {
    top: 50%;
    margin-top: 18px;
}


@media screen and (max-width: 1280px) and (min-width: 720px) {
  .date-display {
    font-size: 14px;
    padding: 0 14px;
  }
  .epg-program-item {
    padding: 10px;
    height: 53px;
  }
  .epg-program-item.skeleton {
    height: 53px;
    padding: 10px;
  }
  .epg-program-item.focused {
    border: 4px solid rgba(0,138,255,1);
  }
  .date-arrow {
    font-size: 14px;
  }
  .epg-container {
    padding-top: 16px;
  }
  .epg-program-item.center-card .live-indicator.embedded, .epg-program-item.focused .live-indicator.embedded {
    font-size: 11px;
    padding: 3px 5px;
  }
  .epg-program-item.center-card .program-title, .epg-program-item.focused .program-title {
    font-size: 21px;
  }
  .epg-program-item .program-info-container + .program-title {
    font-size: 21px;
  }
  .epg-program-item .program-time {
    font-size: 16px;
  }
  .program-status {
    font-size: 16px;
  }
}