/*
 * ===================================================================
 * Kickflip Accordion CSS - GENÉRICO E ESTRUTURAL
 * Versão: 1.0
 * Descrição: Fornece apenas o layout e a funcionalidade do acordeão.
 *            O tema é responsável pelo estilo visual (cores, fontes, etc.).
 * ===================================================================
 */

/* --- Layout Estrutural --- */
.kce-independent-accordion {
    width: 100%;
    margin-top: 10px; /* Espaçamento base, pode ser sobrescrito pelo tema */
    clear: both;
}

.kce-accordion-button {
    display: flex;
    align-items: center;
    width: 100%;
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    text-align: left;
}

/* Reseta o foco para que o tema possa aplicar seu próprio estilo */
.kce-accordion-button:focus,
.kce-accordion-button:focus-visible {
    outline: none !important;
    box-shadow: none !important;
}

.kce-accordion-title-wrapper {
    order: 1; /* Título vem primeiro */
}

/* Remove a estilização de fonte, deixando para o tema */
.kce-accordion-title {
    text-decoration: none !important;
}

/* --- Ícone Estrutural (+/-) --- */
.kce-accordion-icon {
    order: 2; /* Ícone vem depois */
    position: relative;
    width: 16px;
    height: 16px;
    margin-left: 8px; /* Espaçamento base */
}

.kce-accordion-icon::before,
.kce-accordion-icon::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 12px;
    height: 1.5px;
    /* Cor removida - o tema deve definir isso */
    background-color: currentColor; /* Herda a cor do texto do botão */
    transition: transform 0.3s ease-out;
    transform-origin: center;
}

.kce-accordion-icon::before { transform: translate(-50%, -50%) rotate(90deg); }
.kce-accordion-icon::after { transform: translate(-50%, -50%) rotate(0deg); }
.kce-accordion-button[aria-expanded="true"] .kce-accordion-icon::before { transform: translate(-50%, -50%) rotate(180deg); }
.kce-accordion-button[aria-expanded="true"] .kce-accordion-icon::after { transform: translate(-50%, -50%) rotate(180deg); }

/* --- Animação e Conteúdo Estrutural --- */
.kce-accordion-content {
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    transition: max-height 0.4s ease-out, opacity 0.3s ease-in-out, margin-top 0.3s;
    margin-top: 0;
}
.kce-accordion-button[aria-expanded="true"] + .kce-accordion-content {
    max-height: 2000px; /* Limite alto para acomodar o conteúdo */
    opacity: 1;
    margin-top: 14px; /* Espaçamento base quando aberto */
}

.kce-accordion-content-inner {
    overflow-wrap: break-word;
    word-break: break-word;
}

/* Estrutura da imagem do invocador, se houver */
.kce-summoner-icon {
    display: block;
    max-width: 64px;
    height: auto;
    margin-top: 5px;
}