/* Selic Chart Plugin Styles */

.selic-chart-container {
    position: relative;
    box-sizing: border-box;
    overflow: visible !important;
    height: 360px; /* altura garantida para o container */
    margin-bottom: 80px !important; /* espaçamento extra após o gráfico */
}

.selic-chart-container canvas {
    width: 100% !important;
    max-width: 100%; /* Garante que o gráfico não exceda a largura do contêiner pai */
    height: 100% !important; /* ocupa toda a altura do container */
}

/* Chart info box styles */
.selic-chart-info-box {
    text-align: center;
    margin: 20px 0 0 0;
    padding: 12px 15px;
    background: rgba(249, 249, 249, 0.9);
    border-radius: 6px;
    font-size: 11px;
    color: #666;
    line-height: 1.4;
    border: 1px solid #eee;
    max-width: 400px;
    margin-left: auto;
    margin-right: auto;
}

.selic-chart-info-box div {
    margin-bottom: 4px;
}

.selic-chart-info-box div:last-child {
    margin-bottom: 0;
}

.selic-chart-info-box strong {
    color: #333;
}

/* Prevent overlap with next content */
.selic-chart-container + * {
    margin-top: 60px !important;
}

.selic-chart-container + h1,
.selic-chart-container + h2,
.selic-chart-container + h3,
.selic-chart-container + h4,
.selic-chart-container + h5,
.selic-chart-container + h6 {
    margin-top: 80px !important;
}

/* Additional utility classes for specific cases */
.selic-chart-with-extra-space {
    margin-bottom: 80px !important;
}

.selic-chart-compact {
    margin-bottom: 30px !important;
}

.selic-chart-no-info {
    margin-bottom: 30px !important;
}

/* Clear float context if needed */
.selic-chart-container::after {
    content: '';
    display: table;
    clear: both;
}

/* Specific fix for text elements that might be affected */
.entry-content p,
.entry-content h1,
.entry-content h2,
.entry-content h3,
.entry-content h4,
.entry-content h5,
.entry-content h6,
.post-content p,
.post-content h1,
.post-content h2,
.post-content h3,
.post-content h4,
.post-content h5,
.post-content h6 {
    position: relative;
    background: transparent; /* garantir fundo transparente */
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .selic-chart-container {
        padding: 15px !important;
        margin: 15px 0 !important;
        margin-bottom: 60px !important; /* mais espaço em mobile */
        height: 320px; /* altura menor em mobile */
    }

    .selic-chart-info-box {
        font-size: 10px !important;
        padding: 10px 12px !important;
        margin: 15px 0 0 0 !important;
    }

    .selic-chart-container h3 {
        font-size: 16px !important;
    }

    /* Extra spacing for next content on mobile */
    .selic-chart-container + * {
        margin-top: 80px !important;
    }

    .selic-chart-container + h1,
    .selic-chart-container + h2,
    .selic-chart-container + h3,
    .selic-chart-container + h4,
    .selic-chart-container + h5,
    .selic-chart-container + h6 {
        margin-top: 50px !important;
    }
}

@media (max-width: 480px) {
    .selic-chart-container {
        padding: 10px !important;
        margin: 10px 0 !important;
        margin-bottom: 70px !important; /* ainda mais espaço em telas pequenas */
        height: 280px; /* altura ainda menor */
    }

    .selic-chart-info-box {
        font-size: 9px !important;
        padding: 8px 10px !important;
        margin: 12px 0 0 0 !important;
    }

    .selic-chart-container h3 {
        font-size: 14px !important;
        margin-bottom: 10px !important;
    }

    /* Maximum spacing for next content on small screens */
    .selic-chart-container + * {
        margin-top: 50px !important;
    }

    .selic-chart-container + h1,
    .selic-chart-container + h2,
    .selic-chart-container + h3,
    .selic-chart-container + h4,
    .selic-chart-container + h5,
    .selic-chart-container + h6 {
        margin-top: 60px !important;
    }
}

/* Ensure emojis display properly */
.emoji {
    display: inline !important;
    width: 1em !important;
    height: 1em !important;
    vertical-align: -0.1em !important;
}