#meu-validador-plugin-wrapper {
    /* O container principal do plugin */
    margin: 2em 0; /* Adiciona um espaçamento acima e abaixo */
}

.validador-main-grid {
    display: flex;
    flex-direction: column; /* No mobile, uma coluna fica em cima da outra */
    gap: 2em; /* Espaçamento entre as colunas */
}

.validador-coluna-controles {
    order: 1; /* Controles aparecem primeiro no mobile */
    display: flex;
    flex-direction: column;
    gap: 1.5em; /* Espaçamento entre os grupos de formulário */
}

.validador-coluna-preview {
    order: 2; /* Preview aparece em segundo no mobile */
}

/* --- Layout para telas maiores (Desktop) --- */
@media (min-width: 992px) {
    .validador-main-grid {
        flex-direction: row; /* Em telas grandes, as colunas ficam lado a lado */
    }
    .validador-coluna-controles {
        order: 2; /* Controles ficam na direita */
        width: 40%;
    }
    .validador-coluna-preview {
        order: 1; /* Preview fica na esquerda */
        width: 60%;
    }
}


/* --- Estilos dos Componentes (sem cores ou fontes) --- */

.validador-label {
    display: block;
    margin-bottom: 0.5em;
    font-weight: bold;
}

select#configSelect {
    width: 100%;
    padding: 0.5em;
}

.validador-botoes-grupo {
    display: flex;
    gap: 0.5em;
}

.validador-botoes-grupo .validador-botao {
    flex-grow: 1; /* Faz os botões ocuparem o espaço disponível */
    padding: 0.75em 1em;
    text-align: center;
    border: 1px solid; /* A cor da borda virá do tema */
    cursor: pointer;
}

.validador-card-info {
    border: 1px solid #e0e0e0;
    padding: 1em;
    border-radius: 4px;
}

.validador-card-info h3 {
    margin-top: 0;
}

.validador-card-info ul {
    list-style: none;
    padding: 0;
    margin: 0;
}
.validador-card-info ul li {
    padding: 0.25em 0;
}

/* Resultado da validação */
.validador-resultado {
    padding: 1em;
    border-radius: 4px;
}

.validador-resultado.aprovado {
    background-color: #e8f5e9; /* Verde claro */
    border: 1px solid #c8e6c9;
    color: #2e7d32;
}

.validador-resultado.reprovado {
    background-color: #ffeb ee; /* Vermelho claro */
    border: 1px solid #ffcdd2;
    color: #c62828;
}

/* --- Estilos do Player de Mídia --- */

.preview-wrapper {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9; 
    background-color: #f0f0f0;
    border-radius: 4px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

.preview-wrapper video,
.preview-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: contain; 
}

#videoInput, #imageInput {
    display: none;
}

.correct { font-weight: bold; color: #2e7d32; }
.incorrect { font-weight: bold; color: #c62828; }