/* twav-live-embed.css (V1.2 - Final Layout & Fixed Player Size) */

.twav-live-container {
    display: flex; 
    gap: 8px;
    max-width: 1400px;
    margin: 0px;
    background-color: #ffffff00!important;
    padding: 10px;
    border-radius: 8px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
    flex-direction: column-reverse;
}

/* ------------------------------------------------ */
/* 播放器區域 (800x450px) */
/* ------------------------------------------------ */
.twav-video-player-panel {
 width: 100%; 
    margin: 0 auto; 
    background: #000;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 4px 10px rgba(0,0,0,0.2);
}
#twav-video-player-container {
    width: 100%;
    height: 650px; /* 固定高度 */
	min-height:480px;
    /*position: relative;*/
    padding-top: 0; 
}
#twav-video-player-container iframe {
    /*position: absolute;*/
    /*top: 0;*/
    /*left: 0;*/
    /*width: 100%;*/
    /*height: 100%;*/
    /*border: none;*/
}

/* ------------------------------------------------ */
/* 直播列表 (橫向拉 Bar) */
/* ------------------------------------------------ */
.twav-match-list-panel {
    width: 100%;
    padding: 0 10px;
    margin-bottom: 10px;
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.05);
}
.twav-match-list-panel h3 {
    margin: 0;
    padding: 10px 0;
    font-size: 1.2em;
    color: #333;
    border-bottom: 1px solid #ddd;
}

/* 列表容器：實現橫向滑動 */
#twav-match-list {
    display: flex; 
    overflow-x: auto; 
        overflow-y: hidden;
    padding: 10px 0;
    gap: 15px; 
}

/* 列表項目：標準橫向方塊視覺效果 */
.twav-match-item {
    flex-shrink: 0; 
    width: 250px; 
    height: 90px;
    
    padding: 10px;
    background-color: #e3f2fd;
    border-left: 4px solid #1e88e5;
    cursor: pointer;
    border-radius: 4px;
    transition: background-color 0.2s;
    box-shadow: 0 1px 3px rgba(0,0,0,0.05);
}
.twav-match-item:hover {
    background-color: #bbdefb;
}

/* 列表項目的文字樣式 */
.twav-match-item h4 {
    margin: 0;
    font-size: 1em;
    color: #1e88e5;
    overflow: hidden;
    text-overflow: ellipsis;
      display: -webkit-box;         
  -webkit-line-clamp: 1;            
  -webkit-box-orient: vertical;     
}
.twav-match-item p {
    margin: 3px 0 0;
    font-size: 0.8em;
    color: #555;
    line-height: 1.3;
      display: -webkit-box;            
  -webkit-line-clamp: 1;             
  -webkit-box-orient: vertical;     
  overflow: hidden;                 
  text-overflow: ellipsis;           
}

/* 佔位符文本樣式 */
.twav-placeholder-text {
    color: #999;
    padding: 40px;
    text-align: center;
    font-size: 1em;
}
@media (max-width: 820px) {
    .twav-video-player-panel {
        /*width: 95%; */
        /* 使用 RWD 比例來適應小螢幕 */
        /*height: 0;*/
        /*padding-top: 56.25%;*/
        /*margin: 20px auto;*/
        position: relative;
    }
    #twav-video-player-container {
        height: 480px!important;
        padding-top: 0;
    }
}