/* ===== BẮT ĐẦU: CSS CHO CHỈ BÁO BUFFER MỚI ===== */
#player-buffering-indicator {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 1000; /* Đảm bảo nó nằm trên video */
    display: flex;
    pointer-events: none;
}
.buffering-dot {
    width: 16px;
    height: 16px;
    margin: 0 8px;
    background-color: rgba(255, 255, 255, 0.8);
    border-radius: 50%;
    animation: buffering-pulse 1.4s infinite ease-in-out both;
}
.buffering-dot:nth-child(1) {
    animation-delay: -0.32s;
}
.buffering-dot:nth-child(2) {
    animation-delay: -0.16s;
}
@keyframes buffering-pulse {
    0%, 80%, 100% {
        transform: scale(0);
    }
    40% {
        transform: scale(1.0);
    }
}
/* ===== KẾT THÚC: CSS CHO CHỈ BÁO BUFFER MỚI ===== */


/* --- 2. Dòng Nguồn phim (Ép 1 dòng duy nhất) --- */
.stream-item {
    display: -webkit-flex;
    display: flex;
    -webkit-align-items: center;
    align-items: center;
    -webkit-flex-wrap: nowrap;
    flex-wrap: nowrap;   /* Ép tuyệt đối không cho rớt dòng */
    width: 100%;
    height: 55px;        /* Chiều cao cố định để cân bằng với Size/Seed */
    padding: 0 10px;
    border-bottom: 1px solid #222;
    box-sizing: border-box;
    overflow: hidden;
    white-space: nowrap;
}

.stream-item.focus, .stream-item:focus {
    background-color: #00d3a5;
    transform: scale(1.01); /* Scale cực nhẹ để không bị "nổi" đè lên Poster */
    z-index: 10;
}

/* --- 3. Phần Tiêu đề (Bên trái) --- */
.stream-title-container {
    -webkit-flex: 1;
    flex: 1;
    overflow: hidden;
    white-space: nowrap;
    margin-right: 15px;
    display: block;      /* Giữ block để text-overflow hoạt động chuẩn */
    
    /* Màu chữ mặc định khi không focus */
    color: #eeeeee; 
    /* Hiệu ứng chuyển màu mượt mà đồng bộ với background của stream-item */
    transition: color 0.2s ease; 
}

.stream-title-container span {
    display: inline-block;
    white-space: nowrap;
    vertical-align: middle;
}

/* --- LOGIC ĐỔI MÀU CHỮ KHI FOCUS --- */

/* Khi dòng stream-item có class .focus, tìm đến container tiêu đề và đổi màu chữ */
.stream-item.focus .stream-title-container,
.stream-item:focus .stream-title-container {
    color: #000000 !important; /* Ép màu đen để nổi bật trên nền xanh #00d3a5 */
}

/* --- 4. Cụm Huy hiệu & Thông số (Bên phải - KHÔNG CO) --- */
.stream-badges-and-meta-container {
    display: -webkit-flex;
    display: flex;
    -webkit-align-items: center;
    align-items: center;
    -webkit-flex-shrink: 0;
    flex-shrink: 0;      /* Không cho phép cụm này bị bóp nhỏ */
}

/* --- 5. Huy hiệu (Badges) --- */
.stream-badge {
    display: inline-block;
    background-color: #2b2b2b;
    color: #e0e0e0;
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 0.8em;
    font-weight: 600;
    border: 1px solid #444;
    text-transform: uppercase;
    margin-left: 6px;    /* Thay cho gap */
    line-height: normal;
}

/* Màu sắc đặc biệt cho Badges */
.badge-rd { background-color: #14f195 !important; color: #000 !important; border: none !important; font-weight: bold; }
.badge-4k { background-color: #e50914 !important; color: #fff !important; border: none !important; }
.badge-hdr { background-color: #f5c518 !important; color: #000 !important; border: none !important; }
.badge-lang { 
    background-color: #2962FF !important; /* Màu xanh dương */
    color: #fff !important; 
    border: none !important; 
}
/* === Source badges — Torrentio / TorrentsDB / Comet === */
.badge-source-torrentio  { background-color: #1a1a2e !important; color: #7b8cde !important; border-color: #7b8cde55 !important; }
.badge-source-torrentsdb { background-color: #1a1a2e !important; color: #a78bfa !important; border-color: #a78bfa55 !important; }
.badge-source-comet      { background-color: #1a1a2e !important; color: #6b6ef8 !important; border-color: #6b6ef855 !important; }
/* --- 6. Thông số Meta (Provider, Size, Seed) --- */
.stream-meta {
    display: -webkit-flex;
    display: flex;
    -webkit-align-items: center;
    align-items: center;
    margin-left: 15px;   /* Khoảng cách giữa cụm Badge và cụm Meta */
}

.stream-meta span, .stream-meta div {
    margin-left: 10px;   /* Thay cho gap giữa các thông số */
    font-size: 0.9em;
    color: #aaa;
    white-space: nowrap;
}

.stream-meta img.provider-logo {
    max-height: 20px;
    max-width: 80px;
    width: auto;
    object-fit: contain;
    vertical-align: middle;
}

/* --- Tagline hiển thị lúc chờ Buffering --- */
/* --- Class gốc cho Tagline chờ tải --- */
.cinematic-buffering-text {
    color: #ffffff;
    font-size: 30px;
    font-style: italic;
    font-weight: 300;
    letter-spacing: 4px;
    text-align: center;
    max-width: 100%;
    margin: 0 auto;
	line-height: 1.6;
}

/* --- PHONG CÁCH 1: NHỊP THỞ (Pulse) --- */
.anim-pulse {
    text-shadow: 0 2px 10px rgba(0,0,0,0.9);
    animation: pulse-tagline 1.5s ease-in-out infinite alternate;
}
@keyframes pulse-tagline {
    0% { opacity: 0.2; transform: scale(0.98); }
    100% { opacity: 1; transform: scale(1); }
}

/* --- PHONG CÁCH 2: LẤY NÉT ĐIỆN ẢNH (Focus Pull) --- */
.anim-focus {
    text-shadow: 0 2px 10px rgba(0,0,0,0.9);
    animation: cinematic-focus 2.5s ease-out forwards;
}
@keyframes cinematic-focus {
    0% { filter: blur(12px); opacity: 0; transform: scale(1.1); }
    100% { filter: blur(0px); opacity: 0.9; transform: scale(1); }
}

/* --- PHONG CÁCH 3: TRỒI LÊN VÀ PHÁT SÁNG (Fade Up & Glow) --- */
.anim-fade-up {
    animation: fade-up-glow 2.5s ease-out forwards;
}
@keyframes fade-up-glow {
    0% { 
        opacity: 0; 
        transform: translateY(20px); 
        text-shadow: 0 0 0px rgba(255,255,255,0); 
    }
    40% { 
        opacity: 1; 
        transform: translateY(0); 
        text-shadow: 0 0 20px rgba(255,255,255,0.8); /* Lóe sáng */
    }
    100% { 
        opacity: 0.85; 
        transform: translateY(0); 
        text-shadow: 0 2px 10px rgba(0,0,0,0.9); /* Dịu lại */
    }
}
/* --- PHONG CÁCH 4: THU NHỎ KỊCH TÍNH (Dramatic Scale) --- */
.anim-scale-down {
    text-shadow: 0 2px 10px rgba(0,0,0,0.9);
    animation: scale-down-reveal 2.5s ease-out forwards;
}
@keyframes scale-down-reveal {
    0% { opacity: 0; transform: scale(1.15); }
    100% { opacity: 0.9; transform: scale(1); }
}

/* --- PHONG CÁCH 5: DÃN CHỮ MA MỊ (Ghostly Tracking) --- */
.anim-tracking {
    text-shadow: 0 2px 10px rgba(0,0,0,0.9);
    animation: ghostly-tracking 3s ease-out forwards;
}
@keyframes ghostly-tracking {
    0% { opacity: 0; letter-spacing: 0px; }
    100% { opacity: 0.9; letter-spacing: 4px; }
}

/* --- Khối Xếp hạng góc trên bên trái khi bắt đầu phim --- */
#cinematic-rating-overlay {
    position: absolute;
    top: 40px;
    left: 0px;
    z-index: 2000; /* Nằm dưới popup nhưng trên video */
    pointer-events: none; /* Không cản trở bấm chuột/remote */
    opacity: 0;
    transition: opacity 1.5s ease-in-out; /* Mờ dần cực kỳ mượt */
}

/* Class kích hoạt hiển thị */
#cinematic-rating-overlay.rating-visible {
    opacity: 1;
}

#cinematic-rating-text {
    display: inline-block;
    border-radius: 4px;
    padding: 10px 25px;
    font-size: 30px;    /* To gấp đôi */
    font-weight: 900;
    color: #000000;      /* Chữ Đen */
    background-color: #e0e0e0; /* Nền Xám Trắng */
    box-shadow: 0 10px 30px rgba(0,0,0,0.8);
    text-transform: uppercase;
    opacity: 1 !important; /* Đảm bảo không bị mờ */
}


/* === Bookmark Markers trên timeline === */
.bookmark-marker {
    position: absolute;
    top: -3px;
    width: 3px;
    height: calc(100% + 6px);
    background: #f5c518;
    border-radius: 2px;
    transform: translateX(-50%);
    pointer-events: none;
    z-index: 5;
    box-shadow: 0 0 4px rgba(245, 197, 24, 0.8);
}

/* === Skip Intro button === */
#player-btn-skip-intro {
    background: rgba(20, 241, 149, 0.15);
    border: 2px solid #14f195;
    color: #14f195;
    border-radius: 6px;
    height: auto;
    min-width: 120px;
}
#player-btn-skip-intro.focus {
    background: #14f195;
    color: #000;
}