/* Evolving Poet comments pop-up compatibility */

.ep-blog-comments-overlay .ep-blog-popup-comments.ep-comments-v2 {
    background: var(--surface) !important;
    background-color: var(--surface) !important;
    color: var(--text) !important;
    border: 1px solid var(--border) !important;
    border-radius: 20px;
    padding: clamp(16px, 3vw, 30px);
    max-width: 800px;
}

.ep-blog-comments-overlay .ep-blog-popup-comments .ep-c2-heading h2,
.ep-blog-comments-overlay .ep-blog-popup-comments .ep-c2-author strong,
.ep-blog-comments-overlay .ep-blog-popup-comments .ep-c2-body {
    color: var(--text) !important;
}

.ep-blog-comments-overlay .ep-blog-popup-comments .ep-c2-heading p,
.ep-blog-comments-overlay .ep-blog-popup-comments .ep-c2-author .meta {
    color: var(--muted) !important;
}

.ep-blog-comments-overlay .ep-blog-popup-comments .ep-c2-composer {
    background: var(--surface2) !important;
    border: 1px solid var(--border) !important;
    border-radius: 16px;
    padding: 18px;
}

.ep-blog-comments-overlay .ep-blog-popup-comments textarea {
    background: var(--surface) !important;
    color: var(--text) !important;
    border: 1px solid var(--border) !important;
}

.ep-blog-comments-overlay .ep-blog-popup-comments .ep-c2-comment {
    display: flex;
    gap: 14px;
    padding: 22px 0;
    border-bottom: 1px solid var(--border);
    background: transparent !important;
}

.ep-blog-comments-overlay .ep-blog-popup-comments .ep-c2-reply {
    display: flex;
    gap: 10px;
    margin: 16px 0 0;
    padding: 16px 0 0;
    border: 0;
    border-top: 1px solid var(--border);
    background: transparent !important;
}

.ep-blog-comments-overlay .ep-blog-popup-comments .ep-c2-avatar {
    background: var(--surface2);
    color: var(--text);
    border: 1px solid var(--border);
}

.ep-blog-comments-overlay .ep-blog-popup-comments .ep-c2-menu-items {
    background: var(--surface2);
    border: 1px solid var(--border);
}

.ep-blog-comments-overlay .ep-blog-popup-comments .ep-c2-menu-items a,
.ep-blog-comments-overlay .ep-blog-popup-comments .ep-c2-menu-items button {
    color: var(--text) !important;
}

.ep-blog-comments-overlay .ep-blog-popup-comments .ep-blog-reply-button {
    color: var(--accent);
    font-weight: 650;
}

@media (max-width: 600px) {
    .ep-blog-comments-overlay .ep-blog-popup-comments.ep-comments-v2 {
        padding: 16px;
        border-radius: 14px;
    }
}