/* ===================================
   SNRT Live Player - Modern CSS
   Rewritten from scratch for clarity
   =================================== */

/* ===================================
   CSS Variables (Design Tokens)
   =================================== */
:root {
  /* Colors */
  --primary-bg: #0a0e27;
  --secondary-bg: #151932;
  --card-bg: rgba(255, 255, 255, 0.03);
  --border-color: rgba(255, 255, 255, 0.1);

  /* Text */
  --text-primary: #e8eaf6;
  --text-secondary: #9fa8da;

  /* Accents */
  --accent-primary: #667eea;
  --accent-secondary: #4ecdc4;
  --accent-gradient: linear-gradient(135deg, #667eea 0%, #4ecdc4 100%);

  /* Spacing */
  --spacing-xs: 0.5rem;
  --spacing-sm: 0.75rem;
  --spacing-md: 1rem;
  --spacing-lg: 1.5rem;
  --spacing-xl: 2rem;

  /* Border Radius */
  --radius-sm: 0.375rem;
  --radius-md: 0.5rem;
  --radius-lg: 0.75rem;
  --radius-xl: 1rem;

  /* Transitions */
  --transition-fast: 0.15s ease;
  --transition-normal: 0.3s ease;
  --transition-slow: 0.5s ease;
}

/* ===================================
   Reset & Base Styles
   =================================== */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    sans-serif;
  background: var(--primary-bg);
  color: var(--text-primary);
  line-height: 1.6;
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ===================================
   Layout Structure
   =================================== */
/* ===================================
   Layout Structure
   =================================== */
.main-layout {
  position: relative;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  background: black;
}

/* ===================================
   Sidebar (TV Drawer Style)
   =================================== */
.sidebar {
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: 320px;
  background: rgba(15, 20, 35, 0.85);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-right: 1px solid rgba(255, 255, 255, 0.05);
  display: flex;
  flex-direction: column;
  z-index: 100;
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 10px 0 30px rgba(0, 0, 0, 0.5);
  text-align: left;
}

.sidebar-header {
  padding: var(--spacing-lg);
  background: linear-gradient(
    135deg,
    rgba(30, 35, 60, 0.9) 0%,
    rgba(21, 25, 50, 0.95) 100%
  );
  backdrop-filter: blur(10px);
  border-bottom: 2px solid var(--border-color);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

.sidebar-header h2 {
  font-size: 1.375rem;
  font-weight: 800;
  margin: 0;
  background: var(--accent-gradient);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  text-align: left;
}

.channels-list {
  flex: 1;
  overflow-y: auto;
  padding: var(--spacing-lg) var(--spacing-md);
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.2) transparent;
}

.channels-list::-webkit-scrollbar {
  width: 6px;
}

.channels-list::-webkit-scrollbar-track {
  background: var(--secondary-bg);
}

.channels-list::-webkit-scrollbar-thumb {
  background: var(--accent-primary);
  border-radius: 3px;
}

.channels-list::-webkit-scrollbar-thumb:hover {
  background: var(--accent-secondary);
}

/* ===================================
   Channel Items
   =================================== */
/* ===================================
   Channel Items (TV Card Style)
   =================================== */
.channel-item {
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
  padding: var(--spacing-md);
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--radius-lg);
  margin-bottom: var(--spacing-sm);
  cursor: pointer;
  transition: all 0.2s ease;
  position: relative;
  overflow: hidden;
}

/* Hover / Focus State */
.channel-item:hover,
.channel-item:focus,
.channel-item.focused {
  background: rgba(255, 255, 255, 0.1);
  transform: scale(1.02);
}

/* Active State */
.channel-item.active {
  background: var(--accent-gradient);
  box-shadow: 0 8px 20px rgba(102, 126, 234, 0.3);
  border: none;
}

.channel-item.active .channel-item-info h3,
.channel-item.active .channel-item-info p,
.channel-item.active .channel-item-icon {
  color: white;
}

/* Channel logo */
.channel-item-logo {
  width: 64px;
  height: 64px;
  border-radius: var(--radius-md);
  object-fit: contain;
  background: rgba(255, 255, 255, 0.08);
  padding: 8px;
  flex-shrink: 0;
  transition: all var(--transition-normal);
  position: relative;
  z-index: 1;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

.channel-item:hover .channel-item-logo {
  transform: scale(1.1) rotate(2deg);
  box-shadow: 0 4px 16px rgba(102, 126, 234, 0.4);
}

.channel-item.active .channel-item-logo {
  background: rgba(78, 205, 196, 0.15);
  box-shadow: 0 4px 16px rgba(78, 205, 196, 0.5);
}

/* Channel info */
.channel-item-info {
  flex: 1;
  min-width: 0;
  position: relative;
  z-index: 1;
}

.channel-item-info h3 {
  font-size: 1.0625rem;
  font-weight: 700;
  margin-bottom: 0.375rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--text-primary);
  transition: color var(--transition-fast);
}

.channel-item:hover .channel-item-info h3 {
  color: #fff;
}

.channel-item.active .channel-item-info h3 {
  background: linear-gradient(135deg, #4ecdc4 0%, #667eea 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.channel-item-info p {
  font-size: 0.8125rem;
  color: var(--text-secondary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.4;
  transition: color var(--transition-fast);
}

.channel-item:hover .channel-item-info p {
  color: var(--text-primary);
}

/* Channel icon */
.channel-item-icon {
  font-size: 1.5rem;
  color: var(--text-secondary);
  flex-shrink: 0;
  transition: all var(--transition-normal);
  position: relative;
  z-index: 1;
  opacity: 0.6;
}

.channel-item:hover .channel-item-icon {
  color: var(--accent-secondary);
  transform: scale(1.3) translateX(4px);
  opacity: 1;
}

.channel-item.active .channel-item-icon {
  color: var(--accent-secondary);
  transform: scale(1.2);
  opacity: 1;
  animation: pulse-icon 2s ease-in-out infinite;
}

@keyframes pulse-icon {
  0%,
  100% {
    transform: scale(1.2);
    opacity: 1;
  }
  50% {
    transform: scale(1.35);
    opacity: 0.8;
  }
}

/* ===================================
   Content Area (Player)
   =================================== */
/* ===================================
   Content Area (Full Screen Player)
   =================================== */
.content-area {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 320px; /* Adjusted to sidebar width */
  width: auto;
  height: 100%;
  padding: 0;
  z-index: 1;
}

.player-section {
  width: 100%;
  height: 100%;
}

.player-wrapper {
  width: 100%;
  height: 100%;
  border-radius: 0;
  background: black;
}

/* ===================================
   Video Container
   =================================== */
.video-container {
  position: relative;
  width: 100%;
  height: 100%;
  padding-top: 0;
  background: #000;
  overflow: hidden;
}

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

/* Player overlay (when no video) */
.player-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: linear-gradient(
    135deg,
    rgba(10, 14, 39, 0.95) 0%,
    rgba(21, 25, 50, 0.95) 100%
  );
  backdrop-filter: blur(10px);
  z-index: 10;
  transition: opacity var(--transition-normal);
}

.player-overlay.hidden {
  opacity: 0;
  pointer-events: none;
}

.player-overlay-icon {
  font-size: 5rem;
  margin-bottom: var(--spacing-lg);
  opacity: 0.5;
  animation: float 3s ease-in-out infinite;
}

@keyframes float {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-20px);
  }
}

.player-overlay-text {
  font-size: 1.25rem;
  color: var(--text-secondary);
  text-align: center;
}

/* ===================================
   Player Controls
   =================================== */
/* Player controls removed */

/* ===================================
   Toast Notification
   =================================== */
.toast {
  position: fixed;
  bottom: 2rem;
  left: 50%;
  transform: translateX(-50%) translateY(100px);
  background: rgba(239, 68, 68, 0.95);
  color: white;
  padding: 1rem 1.5rem;
  border-radius: var(--radius-md);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  gap: 0.75rem;
  z-index: 2000;
  opacity: 0;
  transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  pointer-events: none;
  font-weight: 500;
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.toast.visible {
  transform: translateX(-50%) translateY(0);
  opacity: 1;
}

.toast-icon {
  font-size: 1.25rem;
}

/* ===================================
   Responsive Design
   =================================== */
@media (max-width: 1024px) {
  .sidebar {
    width: 280px;
  }
}

@media (max-width: 768px) {
  .main-layout {
    flex-direction: column;
    height: auto;
    min-height: 100vh;
    display: flex; /* Ensure flex behavior */
    overflow-y: auto; /* Allow scrolling on body/main */
  }

  .sidebar {
    position: relative; /* Reset absolute positioning */
    width: 100%;
    height: auto;
    left: auto;
    top: auto;
    border-left: none;
    border-bottom: 1px solid var(--border-color);
    max-height: none; /* remove max-height restriction if we want it to flow, or keep it fixed. User constraint wasn't specific, but usually headers are fixed. Let's keep the list horizontal or just stack it. The previous code had it horizontal. */
    flex-shrink: 0;
  }

  /* Reset Sidebar Header styles if needed */
  .sidebar-header {
    padding: var(--spacing-md);
  }

  .sidebar-header h2 {
    font-size: 1.125rem;
  }

  /* Horizontal scrolling for channels on mobile */
  .channels-list {
    display: flex;
    flex-direction: row;
    overflow-x: auto;
    overflow-y: hidden;
    padding: var(--spacing-sm);
    height: auto;
    -webkit-overflow-scrolling: touch;
  }

  .channel-item {
    min-width: 200px; /* Slightly smaller for mobile */
    margin-right: var(--spacing-sm);
    margin-bottom: 0;
    flex-shrink: 0;
  }

  .channel-item:hover {
    transform: scale(1.02);
  }

  /* Content Area fixes */
  .content-area {
    position: relative;
    left: auto;
    top: auto;
    width: 100%;
    padding: 0;
    display: block; /* Simpler than flex for this case */
    height: auto;
    overflow: visible;
  }

  .player-section {
    width: 100%;
    display: block;
  }

  .player-wrapper {
    width: 100%;
    background: #000;
  }

  /* Force video container to have height */
  .video-container {
    position: relative;
    width: 100%;
    height: 0;
    padding-bottom: 56.25%; /* 16:9 Aspect Ratio */
    background: #000;
  }

  /* Ensure video fills the container */
  #video-player,
  #video-iframe,
  .player-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }
}

@media (max-width: 480px) {
  .channel-item {
    min-width: 240px;
  }

  .channel-item-logo {
    width: 48px;
    height: 48px;
  }

  .channel-item-info h3 {
    font-size: 0.9375rem;
  }

  .channel-item-info p {
    font-size: 0.75rem;
  }

  .player-overlay-icon {
    font-size: 3rem;
  }

  .player-overlay-text {
    font-size: 1rem;
  }
}

/* ===================================
   Fullscreen Mode
   =================================== */
.fullscreen-mode .sidebar {
  transform: translateX(-100%);
}

.fullscreen-mode .content-area {
  left: 0;
  width: 100%;
}