/**
 * Comments: the four comment designs (Single Post › Article Features › Comment style) and the
 * small features every design shares (author badge, "Show more", calmer threads on phones).
 *
 * "Auto" adds no design class, so the active demo keeps its own comments. A chosen design is scoped
 * to #comments.ep-cs-…, which outranks the demo skins, and uses the site's own accent, fonts and
 * colours (Colours / Typography), so it fits any demo.
 */

/* ---------- Shared features (all designs, Auto too) ---------- */
.ep-c-badge { display: inline-flex; align-items: center; gap: 4px; margin-left: 6px; padding: 2px 7px; border-radius: 999px; background: color-mix(in srgb, var(--accent) 12%, transparent); color: var(--accent-text, var(--accent)); font-size: .68rem; font-weight: 700; letter-spacing: .04em; line-height: 1.5; text-transform: uppercase; vertical-align: 1px; }
.ep-c-badge i { font-size: .8rem; }
.comment-date time { color: inherit; }
.comment-list > li.ep-c-hidden { display: none !important; }
.ep-c-more { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; margin: 0 0 1rem; padding: .8rem 1rem; border: 1px solid var(--border); border-radius: 10px; background: transparent; color: var(--text-main); font: 600 .92rem/1.2 inherit; cursor: pointer; transition: border-color .15s, color .15s, background .15s; }
.ep-c-more:hover { border-color: var(--accent); color: var(--accent-text, var(--accent)); }
.ep-c-more i { font-size: 1.1rem; }
@media (max-width: 600px) {
    /* Deep threads stop stepping in, so replies keep a readable width on phones */
    .comment-list .children .children { padding-left: 0 !important; border-left: 0 !important; }
}

/* ---------- Every chosen design: a clean slate over the demo skins ---------- */
#comments[class*="ep-cs-"] .comments-title::before, #comments[class*="ep-cs-"] .comments-title::after,
#comments[class*="ep-cs-"] .comment-reply-title::before, #comments[class*="ep-cs-"] .comment-reply-title::after,
#comments[class*="ep-cs-"]::before { content: none !important; display: none !important; }
#comments[class*="ep-cs-"] .comments-title, #comments[class*="ep-cs-"] .comment-reply-title { font-family: var(--font-heading, inherit); color: var(--text-main); letter-spacing: normal; text-transform: none; }
#comments[class*="ep-cs-"] .comment-author, #comments[class*="ep-cs-"] .comment-author a { font-family: var(--font-heading, inherit); color: var(--text-main); text-transform: none; letter-spacing: normal; }
#comments[class*="ep-cs-"] .comment-date { color: var(--text-muted); font-size: .8rem; text-transform: none; letter-spacing: normal; }
#comments[class*="ep-cs-"] #commentform input[type="text"], #comments[class*="ep-cs-"] #commentform input[type="email"],
#comments[class*="ep-cs-"] #commentform input[type="url"], #comments[class*="ep-cs-"] #commentform textarea {
    border: 1px solid var(--border); border-radius: 10px; background: var(--bg-body); color: var(--text-main); font-family: inherit; box-shadow: none; }
#comments[class*="ep-cs-"] #commentform input:focus, #comments[class*="ep-cs-"] #commentform textarea:focus { border-color: var(--accent); outline: none; box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 16%, transparent); }
#comments[class*="ep-cs-"] .submit-btn { border: 0; border-radius: 10px; background: var(--accent-fill, var(--accent)); color: var(--on-accent-fill, #fff); font-family: inherit; letter-spacing: normal; text-transform: none; box-shadow: none; }
#comments[class*="ep-cs-"] .submit-btn:hover { opacity: .9; transform: none; }
#comments[class*="ep-cs-"] .comment-reply-link { color: var(--text-muted); text-transform: none; letter-spacing: normal; }
#comments[class*="ep-cs-"] .comment-reply-link:hover { color: var(--accent-text, var(--accent)); }

/* ---------- Classic: the original ExpertPulse look ---------- */
#comments.ep-cs-classic { border: 0; border-radius: 12px; background: var(--bg-card); box-shadow: 0 4px 6px -1px rgba(0, 0, 0, .1), 0 2px 4px -1px rgba(0, 0, 0, .06); }
#comments.ep-cs-classic .comments-title { padding-bottom: 1rem; border-bottom: 2px solid var(--bg-section-alt); font-size: 1.5rem; font-weight: 600; }
#comments.ep-cs-classic .comment-content-wrap { border: 1px solid var(--border); border-radius: 0 12px 12px 12px; background: var(--bg-section-alt); }
#comments.ep-cs-classic .comment-avatar img { border: 2px solid var(--bg-section-alt); border-radius: 50%; }

/* ---------- Cards: each conversation in its own card ---------- */
#comments.ep-cs-cards { border: 0; background: transparent; box-shadow: none; padding-top: 0; padding-bottom: 0; }
#comments.ep-cs-cards .comments-title { margin-bottom: 1.25rem; padding: 0; border: 0; font-size: 1.35rem; font-weight: 700; }
#comments.ep-cs-cards .comment-list > li { margin-bottom: 1rem; padding: 1.25rem 1.25rem 1.1rem; border: 1px solid var(--border); border-radius: 16px; background: var(--bg-card); box-shadow: 0 10px 28px -22px rgba(0, 0, 0, .35); }
#comments.ep-cs-cards .comment-list > li .comment { margin-bottom: 0; }
#comments.ep-cs-cards .comment-content-wrap { padding: 0; border: 0; border-radius: 0; background: transparent; }
#comments.ep-cs-cards .comment-avatar img { width: 44px; height: 44px; border: 0; border-radius: 12px; }
#comments.ep-cs-cards .children { margin-top: 1rem !important; padding: 1rem 0 0 1rem !important; border-left: 0 !important; border-top: 1px dashed var(--border) !important; }
#comments.ep-cs-cards .comment-text { margin-bottom: .75rem; }
#comments.ep-cs-cards .comment-respond { margin-top: 1.5rem; padding: 1.5rem; border: 1px solid var(--border); border-radius: 16px; background: var(--bg-card); }

/* ---------- Minimal: hairlines, no boxes ---------- */
#comments.ep-cs-minimal { border: 0; border-top: 1px solid var(--border); border-radius: 0; background: transparent; box-shadow: none; padding-top: 2rem; padding-bottom: 0; }
#comments.ep-cs-minimal .comments-title { margin-bottom: .5rem; padding: 0; border: 0; font-size: 1.15rem; font-weight: 700; }
#comments.ep-cs-minimal .comment { margin-bottom: 0; }
#comments.ep-cs-minimal .comment-body { padding: 1.1rem 0; border-bottom: 1px solid var(--border); gap: .85rem; }
#comments.ep-cs-minimal .comment-content-wrap { padding: 0; border: 0; border-radius: 0; background: transparent; }
#comments.ep-cs-minimal .comment-avatar img { width: 36px; height: 36px; border: 0; border-radius: 50%; }
#comments.ep-cs-minimal .comment-meta { justify-content: flex-start; gap: .6rem; margin-bottom: .3rem; }
#comments.ep-cs-minimal .comment-text { margin-bottom: .5rem; }
#comments.ep-cs-minimal .children { margin-top: 0 !important; padding-left: 2.6rem !important; border-left: 0 !important; }
#comments.ep-cs-minimal .comment-respond { margin-top: 2rem; padding-top: 0; border-top: 0; }
#comments.ep-cs-minimal #commentform input[type="text"], #comments.ep-cs-minimal #commentform input[type="email"],
#comments.ep-cs-minimal #commentform textarea { border-width: 0 0 1px; border-radius: 0; background: transparent; padding-left: 0; padding-right: 0; }
#comments.ep-cs-minimal #commentform input:focus, #comments.ep-cs-minimal #commentform textarea:focus { box-shadow: 0 1px 0 0 var(--accent); }
#comments.ep-cs-minimal .submit-btn { border-radius: 999px; }
@media (max-width: 992px) {
    #comments.ep-cs-minimal .comment-body { flex-direction: row !important; }
    #comments.ep-cs-minimal .comment-avatar img { width: 32px !important; height: 32px !important; }
}

/* ---------- Bubbles: a chat ---------- */
#comments.ep-cs-bubbles { border: 0; border-radius: 18px; background: var(--bg-card); box-shadow: none; }
#comments.ep-cs-bubbles .comments-title { padding: 0; border: 0; font-size: 1.3rem; font-weight: 700; }
#comments.ep-cs-bubbles .comment { margin-bottom: 1.1rem; }
#comments.ep-cs-bubbles .comment-body { align-items: flex-end; gap: .6rem; }
#comments.ep-cs-bubbles .comment-avatar img { width: 34px; height: 34px; border: 0; border-radius: 50%; }
#comments.ep-cs-bubbles .comment-content-wrap { flex: 0 1 auto; max-width: 88%; padding: .85rem 1rem .7rem; border: 0; border-radius: 18px 18px 18px 6px; background: var(--bg-section-alt); }
#comments.ep-cs-bubbles .comment-meta { justify-content: flex-start; gap: .5rem; margin-bottom: .2rem; }
#comments.ep-cs-bubbles .comment-text { margin-bottom: .45rem; }
#comments.ep-cs-bubbles .comment-actions { gap: .8rem; }
#comments.ep-cs-bubbles .bypostauthor > .comment-body { flex-direction: row-reverse !important; }
#comments.ep-cs-bubbles .bypostauthor > .comment-body .comment-content-wrap { border-radius: 18px 18px 6px 18px; background: color-mix(in srgb, var(--accent) 12%, var(--bg-card)); }
#comments.ep-cs-bubbles .children { margin-top: .9rem !important; padding-left: 2.6rem !important; border-left: 0 !important; }
#comments.ep-cs-bubbles .comment-respond { margin-top: 2rem; padding-top: 1.5rem; border-top: 1px solid var(--border); }
#comments.ep-cs-bubbles #commentform textarea { border-radius: 18px; }
#comments.ep-cs-bubbles .submit-btn { border-radius: 999px; }
@media (max-width: 992px) {
    #comments.ep-cs-bubbles .comment-body { flex-direction: row !important; gap: .5rem !important; }
    #comments.ep-cs-bubbles .comment-content-wrap { border-radius: 18px 18px 18px 6px !important; }
    #comments.ep-cs-bubbles .bypostauthor > .comment-body .comment-content-wrap { border-radius: 18px 18px 6px 18px !important; }
    #comments.ep-cs-bubbles .comment-avatar img { width: 30px !important; height: 30px !important; }
}
@media (max-width: 600px) {
    #comments.ep-cs-bubbles .children { padding-left: 1.4rem !important; }
    #comments.ep-cs-bubbles .comment-content-wrap { max-width: 100%; }
}
@media (max-width: 992px) {
    #comments.ep-cs-cards .comment-body { flex-direction: row !important; gap: .75rem !important; }
    #comments.ep-cs-cards .comment-avatar img { width: 36px !important; height: 36px !important; border-radius: 10px; }
    #comments.ep-cs-cards .comment-content-wrap { border-radius: 0 !important; }
}
@media (max-width: 600px) {
    #comments.ep-cs-cards .comment-list > li { padding: 1rem; border-radius: 14px; }
    #comments.ep-cs-cards .children { padding-left: .5rem !important; }
}