/************************************************** 
*********************MODAL DETALHES BUSCA E VITRINE
***************************************************/
.bc-popup {
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
}

/* Quando o popup está visível */
.bc-popup.is-visible {
    opacity: 1;
    visibility: visible;
    z-index: 99999;
}

/* Fundo Escurecido com Desfoque */
.bc-popup-overlay {
    position: absolute;
    width: 100%; height: 100%;
    background: rgba(0, 0, 0, 0.8);
    backdrop-filter: blur(8px); /* Efeito de vidro fosco */
}

/* Caixa de Conteúdo */
.bc-popup-content {
    position: relative;
    width: 90%;
    max-width: 700px;
    background: #14171c;
    border: 1px solid #323944;
    border-radius: 20px;
    padding: 12px;
    transform: translateY(20px);
    transition: all 0.3s ease;
    box-shadow: 0 20px 40px rgba(0,0,0,0.5);
}

.bc-popup.is-visible .bc-popup-content {
    transform: translateY(0);
}

/* Cabeçalho */
.bc-popup-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}
.bc-popup-header img.he-logo {
    width: 40px;
}
.bc-popup-header h3 { color: #fff; margin: 0; font-family: sans-serif; }

.bc-close-btn {
    background: none; border: none;
    color: #666; font-size: 30px;
    cursor: pointer; transition: 0.2s;
}

.bc-close-btn:hover { color: #ff4d4d; }

/* Campo de Input Estilizado */
.bc-input-wrapper {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}
.bc-popup-body p.title-vitrine {
    color: #fff;
    margin: 0 0 4px;
    font-size: 16px;
    text-align: center;
}
#inputPesquisa {
    width: 100%;
    padding: 15px;
    background: transparent;
    border: 1px solid #fff;
    border-radius: 25px;
    color: #fff;
    font-size: 16px;
    outline: none;
    transition: 0.3s;
    max-width: 200px;
}
#inputPesquisa:focus {
    border-color: #00d4ff;
    box-shadow: 0 0 10px rgba(0, 212, 255, 0.2);
}

/* Área de Resultados */
.bc-resultados {
    margin-top: 20px;
    max-height: 400px;
    overflow-y: auto;
    padding-right: 5px;
}

/* Scrollbar Personalizada */
.bc-resultados::-webkit-scrollbar { width: 6px; }
.bc-resultados::-webkit-scrollbar-thumb { background: #323944; border-radius: 10px; }

/**************************************************** 
*****************************************************
CONTEÚDO DETALHES ***********************************
*****************************************************
*****************************************************/
    .modal-container { position: relative; background: #14171c; color: #fff; font-family: 'Segoe UI', Roboto, sans-serif; display: flex; flex-direction: column; min-height: 100%; border-radius: 15px; overflow: hidden; }
    .header-info { display: flex; gap: 15px; padding: 20px; align-items: flex-start; background: linear-gradient(180deg, rgba(20,23,28,0.3) 0%, rgba(20,23,28,1) 100%), url('<?php echo $backdrop; ?>'); background-size: cover; background-position: center; }
    .capa-destaque { width: 100px; height: 150px; border-radius: 10px; object-fit: cover; box-shadow: 0 5px 15px rgba(0,0,0,0.8); flex-shrink: 0; border: 1px solid #333; }
    .textos-topo { flex: 1; display: flex; flex-direction: column; text-align: left; text-shadow: 2px 2px 4px #000; }
    .titulo-filme { font-size: 19px; font-weight: bold; margin: 0 0 5px 0; color: #fff; }
    .rating-box { color: #ffc107; font-size: 14px; font-weight: bold; }
    .badges { display: flex; gap: 5px; margin: 8px 0; }
    .badge { background: rgba(255,152,0,0.2); border: 1px solid #ff9800; padding: 2px 6px; border-radius: 4px; font-size: 10px; color: #ff9800; font-weight: bold; }
    .sinopse-vtr { font-size: 13px; color: #ddd; margin-bottom: 15px; line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
    .content-body { padding: 0 20px 20px 20px; }
    .denv-row { margin: 0; font-size: 13px; color: #fff; line-height: 1.6; }
    .creat_custom { color: #aaa; margin-left: 4px; }
    .detalhes-tecnicos { border-top: 1px solid #333; padding-top: 15px; margin-top: 5px; }
    .derct-arts { font-size: 13px; color: #ff9800; }
    .btn-play-vtr { background: #25d366; color: #fff; border: none; padding: 15px; border-radius: 10px; font-weight: bold; width: 100%; font-size: 15px; text-transform: uppercase; text-decoration: none; display: block; text-align: center; margin-top: 10px; box-shadow: 0 4px 10px rgba(0,0,0,0.3); }


/**************************************************** GRID DE CANAIS LIVE (MODAL 500PX) 
*****************************************************/
/* O container que você me mostrou */
.bc-resultados {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: center;
    padding: 15px;
}

/* Onde a mágica acontece: travamos em 140px para não esticar */
.item-card {
    width: 140px; 
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
}
/* A imagem dentro da moldura */
.item-capa {
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: 0;
    border-radius: 12px;
}
.item-info {
    margin-top: 0px;
    text-align: center;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.item-cat {
    display: block;
    font-size: 12px;
    color: #0084ff;
    line-height: 1;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    max-width: 120px;
    text-align: center;
}
.item-nome {
    display: block;
    font-size: 14px;
    color: #efefef;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    width: 120px;
}

/**************************************************** 
*****************************************************
BASE DA APLICAÇÃO MAIN E RESET MAIN-APLICATION ******
*****************************************************
*****************************************************/
.main-aplication {
    display: flex;
    flex-direction: column;
    align-items: center;
    background: transparent;
    flex-wrap: wrap;
    border-radius: 20px;
    margin: 14px 4px;
}
.main-aplication-online {
    display: flex;
    flex-direction: column;
    align-items: center;
    background: transparent;
    flex-wrap: wrap;
    border-radius: 20px;
    margin: 14px 4px;
}

button.ChannelLabel_label__dz3yR [role=img] {
    width: 16px;
    height: 16px;
    margin-right: calc(var(8px) * .5);
}

/* 2. CONTAINER DA SEÇÃO (CENTRALIZADO EM 900PX) */
section.home-slider-section {
    margin: 0;
    width: 100%;
    max-width: 900px; /* Largura máxima solicitada */
    overflow: hidden;
}

.slider-title-home {
    margin: 0 20px;
    font-size: 1.4rem;
    color: #fff;
    font-weight: 300;
}
p.slider-textpr-home {
    font-size: 14px;
    margin: 0 20px;
    color: #ff7611;
}

/* 3. O TRILHO (TRACK) - MOUSE GRAB E TOUCH */
.slider-track-home {
    display: flex;
    overflow-x: auto;
    scroll-behavior: smooth;
    gap: 10px;
    padding: 15px 20px 0px 20px;
    background: transparent;
    cursor: grab; /* Indica que pode arrastar */
    
    /* Esconde barra de rolagem */
    scrollbar-width: none; 
    -ms-overflow-style: none;
    -webkit-overflow-scrolling: touch;
}

.slider-track-home:active {
    cursor: grabbing;
}

.slider-track-home::-webkit-scrollbar {
    display: none;
}

/* 4. O ITEM (CAPA) - MANTENDO SEU TAMANHO ORIGINAL */
.slider-item-home {
    flex: 0 0 120px; /* Base de 120px conforme original */
    cursor: pointer;
    transition: transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    user-select: none; /* Evita selecionar texto ao arrastar */
}

.slider-item-home:hover {
    transform: scale(1.08);
    z-index: 5;
}

.slider-item-home img {
    width: 100%;
    aspect-ratio: 2 / 3;
    object-fit: cover;
    border-radius: 8px;
    box-shadow: 0 6px 15px rgba(0,0,0,0.6);
    background: #222;
    pointer-events: none; /* Evita que a imagem atrapalhe o drag */
}

/* 5. INFOS E DESCRIÇÕES (ORIGINAIS) */
.item-info-vitrine { padding: 8px 0; text-align: left; }
.grupo-item {
    font-size: 9px; color: #0084ff; display: block;
    text-transform: uppercase; font-weight: bold;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.nome-item {
    font-size: 11px; color: #efefef;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
    overflow: hidden; line-height: 1.2; min-height: 26px;
}

/* 6. RESPONSIVIDADE */
@media (min-width: 768px) {
    .slider-item-home { flex: 0 0 150px; } /* Itens maiores em Desktop */
}

@media (max-width: 900px) {
    section.home-slider-section { max-width: 100%; }
    .main-aplication {
       margin: 10px 4px;
    }
    .main-aplication-online {
       margin: 10px 4px;
   }
}

/**************************************************** 
*****************************************************
HEADER-LINE E CAMPO DE BUSCA ************************
*****************************************************
*****************************************************/
.header-line {
    display: flex;
    justify-content: space-between;
    align-items: center;
    max-width: 900px;
    margin: 0 0 20px;
    padding: 0 15px;
    width: 100%;
}
/* Estilo do Botão de Busca */
.sidebarIcon_search {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    color: #fff;
    font-family: 'Baloo 2', cursive;
    font-size: 16px;
}

/* Estilo do Botão Online Grátis */
button.ChannelLabel_label__dz3yR {
    display: flex;
    gap: 2px;
    padding: 6px 10px;
    border-radius: 8px;
    border: none;
    cursor: pointer;
    color: #000;
    font-family: 'Baloo 2', cursive;
    font-size: 16px;
    font-weight: 300;
    box-shadow: 4px 4px 20px 0 #00000080;
    transition: transform 0.2s ease;
    user-select: none;
    justify-content: center;
}
button.ChannelLabel_hot__CWhxn {
    background: linear-gradient(90deg, #ff2f0f, #ff8b2d);
}

button.ChannelLabel_label__dz3yR:hover {
    opacity: 0.9;
    transform: scale(1.02);
}

/* Ajuste do SVG dentro do botão */
button.ChannelLabel_label__dz3yR svg {
    width: 20px;
    height: 20px;
}





/**************************************************** 
*****************************************************
VITRINE DOS AO VIVO *********************************
*****************************************************
*****************************************************/
    /* 1. CONTAINER DA SEÇÃO - AJUSTADO PARA 900PX E CENTRALIZADO */
    section.vtr-home-slider-section { 
        margin: 20px auto; /* Centraliza a seção */
        width: 100%; 
        max-width: 900px; /* Limite de 900px */
        overflow: hidden; 
        font-family: 'Segoe UI', Roboto, sans-serif;
    }

    .vtr-slider-title-home {
       margin-left: 30px;
       font-size: 1.2rem;
       color: #fff;
       font-weight: 300;
       position: absolute;
       margin-top: -12px;
       background: #09162b;
       padding: 2px;
    }

    /* 2. O TRILHO (TRACK) - SEM BARRA DE ROLAGEM */
    .vtr-slider-track-home {
       display: flex;
       overflow-x: auto;
       scroll-behavior: smooth;
       gap: 10px;
       padding: 30px 20px 10px;
       background: transparent;
       -webkit-overflow-scrolling: touch;
       justify-content: flex-start;
       align-items: flex-start;
       scrollbar-width: none;
       cursor: grab;
       border: 1px solid #fff;
       border-radius: 25px;
    }

    .vtr-slider-track-home:active { cursor: grabbing; }
    .vtr-slider-track-home::-webkit-scrollbar { display: none; }

    /* 3. O ITEM (CAPA) */
    .vtr-slider-item-home {
       flex: 0 0 100px;
       width: 190px;
       cursor: pointer;
       transition: transform 0.2s ease-in-out;
       position: relative;
       user-select: none;
    }

    .vtr-slider-item-home:hover { transform: scale(1.08); z-index: 5; }

    /* BADGE HOT */
    .ChannelLabel_hot__crl { background: linear-gradient(90deg, #ff2f0f, #ff8b2d); }
    .ChannelLabel_label__crl {
        border-radius: 8px;
        box-shadow: 4px 4px 20px 0 #00000080;
        display: inline-flex;
        padding: 3px 6px;
        justify-content: center;
        align-items: center;
        position: absolute;
        z-index: 4;
        opacity: 1;
        transition: opacity .2s linear;
        font-size: 12px;
        font-weight: 400;
        top: -4px;
        left: -4px;
        user-select: none;
        font-family: 'Baloo 2';
        color: white;
    }

    .vtr-slider-item-home img { 
        width: 100%; 
        aspect-ratio: 2 / 3; 
        object-fit: cover; 
        border-radius: 8px; 
        box-shadow: 0 4px 12px rgba(0,0,0,0.5); 
        background: #222; 
        display: block;
        pointer-events: none; /* Evita que o drag do navegador interfira no nosso script */
    }

    /* 4. INFOS EMBAIXO DA CAPA */
    .vtr-item-info-vitrine { padding: 8px 0; text-align: left; }
    .vtr-grupo-item { font-size: 9px; color: #0084ff; display: block; text-transform: uppercase; font-weight: bold; }
    .vtr-nome-item { font-size: 11px; color: #efefef; line-height: 1.2; min-height: 26px; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }

    /* 5. MODAL DE DETALHES */
    .vtr-modal-overlay { 
        display: none; position: fixed; z-index: 9999; 
        left: 0; top: 0; width: 100%; height: 100%; 
        background: rgba(0,0,0,0.9); align-items: center; justify-content: center; 
    }
    .vtr-modal-container { 
        position: relative; background: #14171c; color: #fff; 
        width: 92%; max-width: 480px; border-radius: 15px; 
        overflow: hidden; box-shadow: 0 5px 25px rgba(0,0,0,0.8);
    }
    .vtr-header-info { display: flex; gap: 15px; padding: 20px; align-items: flex-start; background-size: cover; background-position: center; position: relative; }
    .vtr-header-info::before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(180deg, rgba(20,23,28,0.3) 0%, rgba(20,23,28,1) 100%); z-index: 1; }
    .vtr-capa-destaque { width: 100px; height: 150px; border-radius: 10px; object-fit: cover; z-index: 2; border: 1px solid #333; }
    .vtr-textos-topo { flex: 1; z-index: 2; text-shadow: 2px 2px 4px #000; }
    .vtr-titulo-modal { font-size: 19px; font-weight: bold; margin: 0; }
    .vtr-badge-live { background: #f44336; padding: 2px 6px; border-radius: 4px; font-size: 10px; font-weight: bold; color: #fff; display: inline-block; margin: 8px 0; }
    .vtr-sinopse { font-size: 13px; color: #ddd; line-height: 1.4; margin-top: 10px; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; }
    .vtr-btn-play { background: #25d366; color: #fff; border: none; padding: 15px; border-radius: 10px; font-weight: bold; width: 100%; font-size: 15px; text-transform: uppercase; cursor: pointer; margin-top: 15px; }
    .vtr-close { position: absolute; top: 10px; right: 15px; color: #fff; font-size: 28px; cursor: pointer; z-index: 10; }

/* BANNER IA - VERSÃO CHAT ASSISTENTE */
.vtr-ai-banner { 
    display: flex; 
    align-items: center; 
    background: linear-gradient(135deg, #1a1e24 0%, #252a33 100%); 
    padding: 12px 18px; 
    margin: 15px 20px; 
    border-radius: 15px; 
    border: 1px solid rgba(0, 132, 255, 0.2); 
    cursor: pointer; 
    position: relative;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
}

.vtr-ai-banner:hover {
    border-color: #0084ff;
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0, 132, 255, 0.15);
}

/* Container da Imagem com Status */
.vtr-ai-avatar-wrapper {
    position: relative;
    display: flex;
    align-items: center;
}

.vtr-ai-robot-img { 
    width: 55px; 
    height: 55px; 
    border-radius: 50%; 
    margin-right: 15px; 
    border: 2px solid #0084ff;
    object-fit: cover;
}

/* Bolinha de Status Online Pulsante */
.vtr-ai-status-online {
    position: absolute;
    bottom: 3px;
    right: 18px;
    width: 12px;
    height: 12px;
    background-color: #2ecc71;
    border: 2px solid #1a1e24;
    border-radius: 50%;
}

.vtr-ai-status-online::after {
    content: '';
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background-color: #2ecc71;
    border-radius: 50%;
    animation: pulsarStatus 2s infinite;
    z-index: -1;
}

@keyframes pulsarStatus {
    0% { transform: scale(1); opacity: 1; }
    100% { transform: scale(2.5); opacity: 0; }
}

/* Texto do Assistente */
.vtr-ai-banner-text {
    flex-grow: 1;
}

.vtr-ai-banner-text strong { 
    font-size: 14px; 
    color: #fff; 
    display: flex;
    align-items: center;
    gap: 5px;
}

.vtr-ai-banner-text strong::after {
    content: 'IA';
    font-size: 9px;
    background: #0084ff;
    color: #fff;
    padding: 1px 5px;
    border-radius: 4px;
    font-weight: bold;
}

.vtr-ai-banner-text p { 
    font-size: 11.5px; 
    color: #a0a0a0; 
    margin: 3px 0 0 0; 
    line-height: 1.3;
}

/* Setinha indicativa no final */
.vtr-ai-arrow {
    color: #444;
    font-size: 14px;
    margin-left: 10px;
}

    @media (min-width: 768px) { .vtr-slider-item-home { flex: 0 0 150px; width: 150px; } }