/* Estilos gerais */
.dictionary-section {
    padding: 20px;
    background-color: #f9f9f9;
    border-radius: 8px;
    margin-bottom: 20px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
.dictionary-section h2 {
    font-size: 24px;
    margin-bottom: 15px;
    color: #333;
}
.dictionary-content {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
}
/* Visualizador de PDFs */
.pdf-viewer {
    flex: 1;
    min-width: 300px;
}
.pdf-viewer h3 {
    font-size: 20px;
    margin-bottom: 10px;
    color: #444;
}
.pdf-viewer iframe {
    border: none;
    border-radius: 4px;
    width: 100%;
    height: 500px;
    background-color: #fff;
}
/* Galeria de Imagens */
.image-gallery {
    flex: 1;
    min-width: 300px;
}
.image-gallery h3 {
    font-size: 20px;
    margin-bottom: 10px;
    color: #444;
}
.image-gallery img {
    max-width: 200px;
    height: auto;
    margin-right: 10px;
    margin-bottom: 10px;
    border-radius: 4px;
    cursor: pointer;
    transition: transform 0.2s ease;
}
.image-gallery img:hover {
    transform: scale(1.05);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}
/* Modal de Visualização */
.modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.7);
    z-index: 1000; /* Alto para garantir que o modal fique acima de tudo */
    justify-content: center;
    align-items: center;
}
#image-modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    justify-content: center;
    align-items: center;
    z-index: 1001; /* Um pouco mais alto que outros modais para prioridade */
}
.modal-content {
    background-color: #fff;
    padding: 20px;
    border-radius: 8px;
    width: 80%;
    max-width: 700px;
    position: relative;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}
.close-btn {
    position: absolute;
    top: 10px;
    right: 10px;
    font-size: 24px;
    cursor: pointer;
    color: #666;
}
.close-btn:hover {
    color: #000;
}
#modal-image {
    width: 100%;
    max-height: 70vh;
    object-fit: contain;
}
/* Responsividade */
@media (max-width: 768px) {
    .dictionary-content {
        flex-direction: column;
    }
    .pdf-viewer iframe {
        height: 300px;
    }
    .modal-content {
        width: 90%;
    }
}
/* Ajustes para tema escuro (opcional, se aplicável) */
@media (prefers-color-scheme: dark) {
    .dictionary-section {
        background-color: #2c2c2c;
        box-shadow: 0 2px 4px rgba(255, 255, 255, 0.1);
    }
    .dictionary-section h2,
    .pdf-viewer h3,
    .image-gallery h3 {
        color: #ddd;
    }
    .pdf-viewer iframe {
        background-color: #333;
    }
    .modal-content {
        background-color: #1e1e1e;
    }
    .close-btn {
        color: #bbb;
    }
    .close-btn:hover {
        color: #fff;
    }
}

.content-tab { display: none; }
.content-tab.active { display: block; }
.chord { color: #d32f2f; font-weight: bold; }

/* ESSENCIAL PARA O SCROLL FUNCIONAR */
#lyricsText, #chordsText {
    max-height: 70vh !important;
    overflow-y: auto !important;
    padding: 15px !important;
    background: #fff;
    border-radius: 12px;
    box-shadow: inset 0 2px 8px rgba(0,0,0,0.05);
    scrollbar-width: thin;
    scrollbar-color: #fda500 #f0f0f0;
}

#lyricsText::-webkit-scrollbar, #chordsText::-webkit-scrollbar {
    width: 8px;
}
#lyricsText::-webkit-scrollbar-track, #chordsText::-webkit-scrollbar-track {
    background: #f0f0f0;
    border-radius: 10px;
}
#lyricsText::-webkit-scrollbar-thumb, #chordsText::-webkit-scrollbar-thumb {
    background: #fda500;
    border-radius: 10px;
}

#scrollToggleBtn.active {
    background: #10b981 !important;
    color: white !important;
    animation: pulse 2s infinite;
}
@keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.8; }
}

.hidden-desktop {
    display: none;
}
/* Mobile video controls */
@media (max-width: 768px) {
    .mobile-video-toggle {
        display: block;
        position: fixed;
        bottom: 20px;
        right: 20px;
        z-index: 100;
    }
    
    .video-container {
        display: none; /* Começa escondido no mobile */
        order: 999;
        margin: 20px 0;
        position: relative !important;
        left: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
    }
    
    .video-container.mobile-visible {
        display: block !important;
        animation: fadeIn 0.3s ease;
    }
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

                        .modal { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.5); }
.modal-content { background: white; margin: 15% auto; padding: 20px; width: 80%; max-width: 700px; }
.pdf-viewer iframe { border: none; }
.image-gallery img { cursor: pointer; }
                        .contribution-section {
                            padding: 20px;
                            background: #f9f9f9;
                            border-radius: 8px;
                        }
                        .contribution-form {
                            max-width: 600px;
                            margin-bottom: 20px;
                        }
                        .form-group {
                            margin-bottom: 15px;
                        }
                        .form-group label {
                            display: block;
                            font-weight: bold;
                            margin-bottom: 5px;
                        }
                        .form-group input[type="text"],
                        .form-group input[type="file"],
                        .form-group textarea {
                            width: 100%;
                            padding: 8px;
                            border: 1px solid #ccc;
                            border-radius: 4px;
                        }
                        .form-group textarea {
                            resize: vertical;
                        }
                        .contribution-table {
                            width: 100%;
                            border-collapse: collapse;
                            margin-top: 20px;
                        }
                        .contribution-table th,
                        .contribution-table td {
                            padding: 10px;
                            border: 1px solid #ddd;
                            text-align: left;
                        }
                        .contribution-table th {
                            background: #fda500;
                            color: white;
                        }
                        .contribution-table tr:nth-child(even) {
                            background: #f2f2f2;
                        }
                        .contribution-table a {
                            color: #7C3AED;
                            text-decoration: none;
                        }
                        .contribution-table a:hover {
                            text-decoration: underline;
                        }
                        .contribution-table th:nth-child(4),
                        .contribution-table td:nth-child(4) {
                            width: 15%;
                           
                           
/* Adjust video-container for the 2 columns under tabs */
                        }