/* Estilos para o shortcode [parcelamento_atual] */
.celes-parcelamento-texto-principal {
    /* Estilos globais para o P */
}

/* Classes para controle individual */
.celes-texto-antes { /* Para 'Em até' */ }
.celes-num-parcelas { /* Para '10x' */ font-weight: bold; }
.celes-valor-parcela { /* Para 'R$ X,XX' */ font-weight: bold; }
.celes-texto-depois { /* Para 'sem juros' */ }


/* Estilos para a tabela do shortcode [parcelas_produto] */
.celes-parcelamento-table {
    width: 100%;
    border-collapse: collapse;
}

.celes-parcelamento-table th, 
.celes-parcelamento-table td {
    border: 1px solid #ddd;
    padding: 8px;
    text-align: center;
}

.celes-parcelamento-table th {
    background-color: #f2f2f2;
    font-weight: bold;
}

/* Contêiner da tabela que terá o efeito de "Ver Mais" */
.celes-parcelamento-container {
    max-height: 200px; /* Altura limite para esconder parte da tabela */
    overflow: hidden;
    position: relative; /* Necessário para o degrade */
    transition: max-height 0.3s ease-out; /* Para uma transição suave */
}

/* Classe do degrade (50px de altura transparente) */
.celes-parcelamento-container.celes-fade-out::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 50px; /* Altura do degrade */
    /* Cria o efeito degrade (de branco para transparente) */
    background: linear-gradient(to top, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0) 100%);
    pointer-events: none; /* Permite clicar no conteúdo abaixo */
}

/* Oculta o botão 'Ver Mais' quando a tabela estiver totalmente visível */
.celes-parcelamento-wrapper.expanded .celes-ver-mais-btn {
    display: none;
}

/* Remove o degrade e a altura limite quando a tabela é expandida */
.celes-parcelamento-wrapper.expanded .celes-parcelamento-container {
    max-height: 5000px; /* Um valor grande o suficiente para mostrar tudo */
}

.celes-parcelamento-wrapper.expanded .celes-parcelamento-container::after {
    display: none;
}

/* Estilo do botão */
.celes-ver-mais-btn {
    display: block;
    width: 100%;
    padding: 10px;
    margin-top: 10px;
    background-color: #f9f9f9;
    border: 1px solid #ddd;
    cursor: pointer;
    font-weight: bold;
    text-align: center;
}