/* Estilos para o componente de categorias de canais */
.categories-section {
    display: flex;
    flex-direction: column;
}

.categories-container {
    width: 14vw;
    height: 100%;
    padding: 1.5vh 1vh;
}

.channels-section {
    display: flex;
    flex-direction: column;
}

.categories-wrapper {
    height: 100vw;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.category-item {
    padding: 1vh;
    margin: 0.5vh;
    flex-direction: column;
    background: rgba(20, 20, 20, 0.8);
    border-radius: var(--chn-category-item-radius);
    cursor: pointer;
    border: transparent;
    min-height: 5vh;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    transform: translateZ(0);
    backface-visibility: hidden;
    will-change: transform, background;
}

.category-item:hover,
.category-item:focus {
    background: linear-gradient(var(--color-app-secondary), var(--color-app-primary));
    border-color: var(--color-app-primary);
    outline: none;
    transform: scale(1.05); 
    transition: transform 0.2s ease !important;
}

.category-item:hover .category-text,
.category-item:focus .category-text {
    color: var(--color-font-selected);
}

.category-item.selected {
    background: linear-gradient(var(--color-app-secondary), var(--color-app-primary));
    border-color: var(--color-app-primary);
}

.category-text {
    color: var(--color-font-primary);
    font-size: 2.5vh;
    font-weight: 700;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    width: 100%;
}

.category-item.selected .category-text {
    color: var(--color-font-selected);
}

/* Scrollbar personalizada */
.categories-wrapper::-webkit-scrollbar {
    width: 0.5vh;
}

.categories-wrapper::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.1);
    border-radius: 0.25vh;
}

.categories-wrapper::-webkit-scrollbar-thumb {
    background: var(--color-app-primary);
    border-radius: 0.25vh;
}

.categories-wrapper::-webkit-scrollbar-thumb:hover {
    background: var(--color-app-secondary);
}

/* Estilos para EPG dos canais */
.channel-container {
    display: flex;
    justify-content: center !important;
    align-items: center !important;
    border: 2px solid transparent;
    border-radius: var(--chn-card-border-radius);
    max-width: 12vw !important;
    margin-bottom: 1vh;
}

.channel-container:focus {
    background: linear-gradient(var(--color-app-secondary), var(--color-app-primary));
    animation: none !important;
    border: none !important;
    transform: scale(1) !important; 
    transition: transform 0.2s ease !important;

}

.channel-container:focus .channel-slide {
    /* filter: invert(0); */
    width: 18vh;
    height: 17vh;
    transform: scale(1);
    transition: transform 0.2s ease !important;
    /* Removido invert */
}

/* .channel-container.playing {
    background: rgba(255, 255, 255, 0.5);
} */

/* Remover EPG interno do card */
.channel-epg-container {
    display: none;
}

.channel-slide {
    background-color: rgba(30, 30, 30, 0.8);
    width: 15vh ;
    height: 15vh ;
    border-radius: 1vh !important;
    padding: 0.5vh;
    /* transition: none !important; */
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    transform: scale(0.95); 
    animation: none !important;
}

.channel-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 2.5vh;
    display: block;
    image-rendering: auto;
}

.channel-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* --- NOVOS ESTILOS PARA LAYOUT --- */

/* Container geral (Overlay) */
#channels-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: 100;
    pointer-events: none;
    display: flex;
}

#channels-overlay.withBackground {
    background: rgba(0, 0, 0, 0.8);
}

/* Painel de Informações do Canal Atual (Ao lado da lista) */
.now-playing-panel {
    position: fixed;
    top: 20%;
    transform: translateY(-50%);
    left: 75vw;
    /* Ajustado para ficar ao lado da lista de canais */
    width: 20vw;
    height: auto;
    background: transparent;
    border-radius: 0;
    padding: 2vh;
    z-index: 110;
    /* transition: opacity 0.3s ease, left 0.3s ease; */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border-left: none;
    box-shadow: none;
    opacity: 0;
    pointer-events: none;
    transform: translateZ(0) translateY(-50%);
    backface-visibility: hidden;
    will-change: opacity, transform;
}

.now-playing-panel.visible {
    right: auto;
    opacity: 1;
}

.now-playing-label {
    color: var(--color-app-primary);
    font-size: 2vh;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 2px;
    width: 100%;
    text-align: center;

}

.now-playing-logo {
    max-width: 100%;
    max-height: 20vh;
    object-fit: contain;
    margin-bottom: 2vh;
    align-self: center;
}

.now-playing-name {
    color: white;
    font-size: 3.5vh;
    font-weight: bold;
    text-align: left;
    text-shadow: 1px 1px 2px black;
}

/* Painel de Categorias (Esquerda) */
.categories-panel {
    width: 15vw;
    height: 100vw;
    transform: translateX(-100%);
    /* transition: transform 0.3s ease; */
    pointer-events: auto;
    align-self: center;
    justify-self: center;
    z-index: 102;
    position: absolute;
    padding: 2vh;
    left: 0;
    transform: translateZ(0) translateX(-100%);
    backface-visibility: hidden;
    will-change: transform;
}

.categories-panel.visible {
    transform: translateX(0);
}

/* Painel de Canais (Lista) */
.channels-panel {
    position: absolute;
    left: 2vw;
    width: 100vw;
    /* Largura da lista */
    height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    pointer-events: auto;
    transform: translateX(-100vh);
    z-index: 101;
    padding: 0 6vh;
    transform: translateZ(0) translateX(-100vh);
    backface-visibility: hidden;
    will-change: transform;
}

.channels-panel.visible {
    transform: translateX(0);
}

.channels-panel.with-categories {
    transform: translateX(12vw);
    /* Empurra quando categorias abrem */
}

/* Ajuste do Swiper para caber na lista lateral */
.swiper-channel-container {
    height: 100vh !important;
}

/* Painel Inferior (EPG + Nav Info) */
.bottom-info-panel {
    position: fixed;
    bottom: 3vh;
    /* Levantado um pouco da borda */
    left: 20vw;
    /* Ajustado levemente para a esquerda para dar mais espaço */
    width: 70vw;
    /* Aumentado de 55vw para 60vw */
    height: auto;
    /* Altura automática baseada no conteúdo */
    min-height: 18vh;
    /* Aumentado de 15vh para 18vh */
    z-index: 103;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    padding: 2.5vh 3.5vh;
    /* Padding aumentado levemente */
    opacity: 0;
    /* transition: opacity 0.3s ease, left 0.3s ease; */
    pointer-events: none;
    border-radius: 1.2vh;
    /* Bordas arredondadas */
    transform: translateZ(0);
    backface-visibility: hidden;
    will-change: opacity, left;
}

.bottom-info-panel.visible {
    opacity: 1;
}

.bottom-info-panel.with-categories {
    left: 32vw;
    /* Empurra quando categorias abrem */
}

/* Conteúdo do EPG no painel inferior */
.bottom-epg-content {
    flex: 1;
    margin-right: 2.5vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding-bottom: 0;
    text-align: left;
    /* Garante alinhamento à esquerda */
}

.bottom-epg-title {
    font-size: 3vh;
    /* Aumentado de 2.2vh */
    font-weight: 800;
    color: var(--color-font-primary);
    margin-bottom: 0.8vh;
}

.channel-name-highlight {
    color: var(--color-app-primary);
    font-weight: 800;
    margin-right: 0.5vh;
}

.next-program-info {
    color: var(--color-app-primary);
    font-weight: 400;
    display: block;
    margin-top: 0.5vh;
    font-weight: 500;
}

.bottom-epg-time {
    font-size: 1.8vh;
    /* Aumentado de 1.6vh */
    color: var(--color-app-primary);
    margin-bottom: 0.8vh;
    font-weight: 600;
}

.bottom-epg-desc {
    font-size: 2vh;
    /* Aumentado de 1.4vh */
    color: var(--color-font-primary);
    opacity: 0.8;
    max-width: 100vw;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    line-height: 1.4;
    font-weight: 500;
}

.bottom-epg-progress {
    width: 100%;
    height: 0.6vh;
    /* Aumentado de 0.4vh */
    background: rgba(255, 255, 255, 0.1);
    border-radius: 0.3vh;
    margin-top: 1.2vh;
    overflow: hidden;
}

.bottom-epg-progress-bar {
    height: 100%;
    background: var(--color-app-primary);
    width: 0vw;
}

/* Conteúdo de Navegação (Próximo/Anterior) */
.bottom-nav-info {
    width: 20vw;
    /* Aumentado de 18vw */
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    /* Alinhado à direita */
    justify-content: center;
    padding-bottom: 0;
    border-left: 1px solid rgba(255, 255, 255, 0.1);
    /* Separador */
    padding-left: 1.5vh;
}

.nav-channel-item {
    display: flex;
    align-items: center;
    width: 100%;
    margin: 0.6vh 0;
    opacity: 1;
}

.nav-channel-item.next,
.nav-channel-item.prev {
    /* transform: scale(1); */
    /* Reset scale */
}

.nav-arrow {
    font-size: 1.8vh;
    /* Aumentado de 1.5vh */
    color: var(--color-app-primary);
    margin-right: 1.2vh;
    width: auto;
}

.nav-channel-logo {
    width: 5vh;
    /* Aumentado de 4vh */
    height: 5vh;
    object-fit: contain;
    margin-right: 1.2vh;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 0.4vh;
}

.nav-channel-name {
    font-size: 1.6vh;
    /* Aumentado de 1.4vh */
    color: white;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-align: right;
    max-width: 12vw;
}

.nav-label {
    font-size: 1.5vh;
    color: #aaa;
    margin-bottom: 0.5vh;
    align-self: flex-start;
    padding-left: 4.5vh;
    /* Alinhar com logo */
}

/* Seta indicativa para categorias */
.categories-hint-arrow {
    position: absolute;
    left: 1vw;
    top: 50vh;
    animation: bounceLeft 1.5s infinite;
    z-index: 105;
    transform: translateY(-50vh);
    font-size: 3vh;
    color: var(--color-font-primary);
}

.categories-hint-arrow img {
    width: 4vw;
    height: 4vw;
    object-fit: contain;
}

.zapping-tip {
    position: fixed;
    bottom: 2vw;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(0, 0, 0, 0.7);
    color: var(--color-font-primary);
    padding: 1vh 2vh;
    font-size: 2vh;
    font-weight: 500;
    border-radius: var(--ch-zipping-tip-radius);
    z-index: 9999;
    pointer-events: none;
    display: none;
}

@keyframes bounceLeft {

    0%,
    100% {
        transform: translateY(-50%) translateX(0);
    }

    50% {
        transform: translateY(-50%) translateX(-1vh);
    }
}

@media (max-width: 1000px) {
    .categories-container {
        width: 14.3vw;
    }
}

@media (min-width:1000px) and (max-width: 1300px) {
    .categories-container {
        width: 14vw;
    }

    .channels-panel {
        left: 3vw;
    }


}