/* Container que agrupa as Abas e o Vídeo lado a lado */
.main-content-wrapper {
    display: flex;
    flex-direction: row;
    align-items: flex-start; /* Alinha ambos no topo */
    gap: 30px;
    position: relative;
    width: 100%;
}

/* Coluna da Esquerda (Letras, Cifras, Contribuições) */
.tabs-column {
    flex: 1; /* Ocupa todo o espaço restante */
    min-width: 0; /* Evita que o pre transborde */
}

/* Coluna da Direita (Onde o vídeo "mora") */
.video-column {
    width: 450px; /* Largura fixa do vídeo no desktop */
    position: sticky; /* A MÁGICA: Ele fixa na tela ao rolar */
    top: 20px; /* Distância do topo da tela quando estiver fixo */
    z-index: 10;
}

/* Ajuste do Container do Vídeo */
.video-container {
    width: 100% !important;
    position: relative !important;
    margin: 0 !important;
    left: 0 !important;
    border-radius: 12px;
    overflow: hidden;
    background: #000;
    box-shadow: 0 4px 20px rgba(0,0,0,0.15);
}

.video-wrapper {
    position: relative;
    padding-top: 56.25%; /* Proporção 16:9 */
    height: 0;
}

.video-wrapper iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100% !important;
    height: 100% !important;
    border: 0;
}

/* Responsividade: No Celular o vídeo volta para cima do texto */
@media (max-width: 991px) {
    .main-content-wrapper {
        flex-direction: column;
    }
    .video-column {
        width: 100%;
        position: relative;
        top: 0;
        order: -1; /* Vídeo aparece primeiro no mobile */
        margin-bottom: 20px;
    }
}

/* Esconde o botão no Desktop */
.mobile-only-btn {
    display: none;
}

@media (max-width: 991px) {
    .mobile-only-btn {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        position: fixed;
        bottom: 20px;
        left: 50%;
        transform: translateX(-50%); /* Centraliza exatamente no meio */
        z-index: 9999;
        background-color: #ff9800;
        color: white;
        border: none;
        padding: 12px 20px;
        border-radius: 50px;
        font-weight: bold;
        box-shadow: 0 4px 15px rgba(0,0,0,0.3);
        font-family: 'Inter', sans-serif;
    }

    /* Classe para quando o vídeo estiver no fundo */
    .video-at-bottom {
        order: 10 !important; 
        margin-top: 40px !important;
    }
    
    /* Ajuste para o botão mudar de cor quando o vídeo já estiver lá embaixo */
    .btn-active-bottom {
        background-color: #34495e !important;
    }
}

/* ==================== MOBILE (≤768px) ==================== */
@media (max-width: 768px) {
    .video-container {
        order: -1;                /* Vídeo no topo */
        margin: 20px auto;        /* Centralizado */
        max-width: 100%;
        padding: 0 10px;
        display: block;           /* Visível por padrão */
        position: relative;
        left: auto;               /* Remove posicionamento absoluto */
        margin-top: 0 !important; /* Remove margins negativas */
    }
    
    /* Quando sticky no mobile */
    .video-container.sticky {
        position: sticky;
        top: 10px;
        z-index: 100;
        background: #000;
        border-radius: 8px;
        box-shadow: 0 4px 12px rgba(0,0,0,0.3);
        margin-bottom: 20px;
    }
    
    .video-wrapper iframe {
        max-height: 260px;
        border-radius: 8px;
    }
    
    /* Esconder vídeo inicialmente no mobile (se desejar) */
    .video-container.mobile-hidden {
        display: none;
    }
    
    .video-container.mobile-visible {
        display: block !important;
        animation: fadeIn 0.3s ease;
    }
    
    /* Botão toggle do vídeo no mobile */
    .mobile-video-toggle {
        display: block;
        position: fixed;
        bottom: 20px;
        right: 20px;
        z-index: 100;
    }
}

/* ==================== SE NÃO HOUVER VÍDEO ==================== */
.no-video {
    padding: 40px;
    text-align: center;
    background: #f5f5f5;
    border-radius: 8px;
    color: #666;
    margin-bottom: 20px;
}

/* Animações */
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

/* ==================== LAYOUT PRINCIPAL (CORREÇÃO DO FLUXO) ==================== */
.main-content-wrapper {
    display: flex;
    flex-direction: column;
    width: 100%;
}

/* Para garantir que as abas fiquem na ordem correta */
.content-tab {
    display: none;
    width: 100%;
    clear: both;
}

.content-tab.active {
    display: block;
}

/* Ajuste para o wrapper do vídeo não interferir */
#video-container {
    position: relative;
    z-index: 3;