/* Reset e stili base */
* {
   box-sizing: border-box;
   margin: 0;
   padding: 0;
}

body {
   font-family: Arial, sans-serif;
   background-color: #000;
   color: #fff;
}

header {
   background-color: #111;
   padding: 1rem;
   border-bottom: 1px solid #333;
   display: flex;
   align-items: center;
   justify-content: left;
}

header img {
   height: 50px;
   margin-right: 10px;
}

/* Layout principale in flex: player e lista canali */
.main-container {
   display: flex;
}

.player-container {
   flex: 3;
   /* Use sticky so the player can pin to the top when scrolling.
          Include -webkit- prefix and align-self to improve Safari behavior in flex layouts. */
   position: -webkit-sticky;
   position: sticky;
   top: 0;
   align-self: flex-start;
   -webkit-transform: translateZ(0);
   /* create a new stacking context for Safari */
   transform: translateZ(0);
   background-color: #000;
   display: flex;
   align-items: center;
   justify-content: center;
   z-index: 100;
}

/* .player-container video {
       width: 100%;
       height: 100%;
       background-color: #000;
       position: relative;
       z-index: 0;
    } */
/* Spinner overlay per il caricamento */
.spinner-overlay {
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   background: rgba(0, 0, 0, 0.6);
   /* keep hidden by default; show by toggling .show class */
   display: none;
   align-items: center;
   justify-content: center;
   z-index: 110;
   pointer-events: none;
   /* avoid intercepting pointer when hidden */
}

.spinner-overlay.show {
   display: flex;
   pointer-events: auto;
}

.spinner {
   border: 8px solid #f3f3f3;
   border-top: 8px solid #3498db;
   border-radius: 50%;
   width: 60px;
   height: 60px;
   animation: spin 1s linear infinite;
}

@keyframes spin {
   100% {
      transform: rotate(360deg);
   }
}

/* Aside della lista dei canali */
.channel-list {
   flex: 1;
   background-color: #222;
   padding: 10px;
   overflow-y: auto;
}

/* 频道分类样式 */
.channel-category {
   margin-bottom: 10px;
}

.category-header {
   padding: 10px;
   background-color: #333;
   cursor: pointer;
   display: flex;
   justify-content: space-between;
   align-items: center;
   border-radius: 4px;
}

.category-header:hover {
   background-color: #444;
}

.category-name {
   font-weight: bold;
}

.category-toggle {
   transition: transform 0.3s ease;
}

.category-toggle.collapsed {
   transform: rotate(-90deg);
}

.category-content {
   overflow: hidden;
   transition: max-height 0.3s ease-out;
}

.category-content.collapsed {
   max-height: 0;
}

/* 频道项样式 */
.channel {
   padding: 10px 10px 10px 20px;
   /* 左侧增加缩进 */
   margin-bottom: 5px;
   border-bottom: 1px solid #444;
   cursor: pointer;
   transition: background 0.15s ease;
   display: flex;
   align-items: center;
   gap: 10px;
}

.channel:hover {
   background-color: #444;
}

.channel.selected {
   background-color: #666;
}

/* 频道图标样式 */
.channel-icon {
   width: 28px;
   height: 53px;
   object-fit: contain;
   flex-shrink: 0;
}

/* Footer */
footer {
   background-color: #111;
   padding: 10px;
   text-align: center;
   border-top: 1px solid #333;
   font-size: 0.9rem;
}

/* Responsive: layout a colonna se la larghezza è bassa */
@media (max-width: 768px) {
   .main-container {
      flex-direction: column;
   }

   .player-container,
   .channel-list {
      flex: none;
      width: 100%;
   }
}

.full-width-iframe {
   width: 100%;
   height: 300px;
   /* 你需要自己定义一个高度 */
   border: none;
   /* 移除默认边框 */
   display: block;
   /* 确保它是一个块级元素，消除下方小间隙 */
}