/* ============================================================
   Shiverex — Single Article Page (v3.0)
   Reference geometry: 1440px canvas — hero 81.5% rx32, text col 720px,
   TOC card 73% rx12 (2-col), quote rx24 glass, inline-img rx24.
   Colors come from site theme vars; glass groups from admin panel.
   ============================================================ */

.article-page {
    padding-top: 26px;
    padding-bottom: 40px;
}

/* ---------- 1. Breadcrumbs ---------- */
.article-breadcrumb {
    width: calc(100% - 32px);
    max-width: var(--container);
    /* v1.0.8 — granular spacing vars (Articles tab card). Rendered by
       inc/render.php only when the admin sets a value; the fallbacks below
       reproduce the original theme geometry exactly. */
    margin: 0 auto var(--fx-sp-crumb, 18px);
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    color: var(--muted);
}
.article-breadcrumb a {
    color: var(--muted);
    text-decoration: none;
    transition: color .2s ease;
}
.article-breadcrumb a:hover {
    color: var(--accent);
}
.article-breadcrumb .bc-current {
    color: var(--text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 55%;
}
.article-breadcrumb .bc-sep { opacity: .55; }

/* ---------- 2. Featured hero ---------- */
.article-hero {
    position: relative;
    width: calc(100% - 32px);
    max-width: var(--container);
    margin: 0 auto;
    border-radius: 32px;
    overflow: hidden;
    background: var(--glass-feature_card-bg, var(--glass-bg));
}
.article-hero img {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
}
.article-cat {
    position: absolute;
    top: 24px;
    inset-inline-start: 24px;
    color: var(--box-text-glass);
    font-size: 12.5px;
    font-weight: 600;
    padding: 6px 14px;
    border-radius: 15px;
    box-shadow: 0 4px 14px rgba(0,0,0,.14);
}

/* ---------- 3. Title + meta ---------- */
.article-titlewrap {
    width: calc(100% - 32px);
    max-width: var(--container);
    margin: var(--fx-sp-hero-title, 34px) auto 0;
    text-align: center;
    position: relative;
    z-index: 2;
}
.article-title {
    margin: 0 auto;
    font-weight: 800;
    line-height: 1.5;
}
.article-subtitle {
    margin: var(--fx-sp-title-sub, 14px) auto 0;
    max-width: 720px;
    color: var(--muted);
    line-height: 1.9;
}
/* v1.0.9 — dual subtitle (desktop/mobile pair), same mechanism as the
   v1.0.7 paragraph pair: both versions carry .article-subtitle so the
   shared post_subtitle typography level and spacing vars keep applying. */
.article-subtitle--mobile { display: none; }
@media (max-width: 767px) {
    .article-subtitle--desktop { display: none; }
    .article-subtitle--mobile  { display: block; }
}
.article-meta {
    /* also serves as title→meta when no subtitle is present */
    margin-top: var(--fx-sp-meta-top, 18px);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 10px;
    font-size: 13px;
    color: var(--muted);
}
.article-meta .meta-item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.article-meta svg {
    width: 16px;
    height: 16px;
    opacity: .8;
}
.article-meta .meta-dot { opacity: .5; }

/* ---------- 4. Table of contents ---------- */
.article-toc-title {
    text-align: center;
    margin: var(--fx-sp-meta-toc, 0px) 0 var(--fx-sp-toc-title, 24px);
    position: relative;
    z-index: 2;
}
.article-toc {
    position: relative;
    z-index: 2;
    width: calc(100% - 32px);
    /* v1.0.6 — balanced TOC width: the full-container card felt oversized.
       934px ≈ 73% of the 1280px container (the documented reference
       proportion) — clearly narrower, still comfortable for 2 columns. */
    max-width: min(934px, var(--container));
    margin: 0 auto;
    border-radius: 12px;
    padding: 36px 40px;
}
.toc-grid {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 22px 48px;
    counter-reset: toc;
}
.toc-item a {
    display: flex;
    align-items: center;
    gap: 14px;
    text-decoration: none;
    color: var(--text);
}
.toc-badge {
    flex: 0 0 48px;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: radial-gradient(75% 75% at 28% 22%, rgba(255,255,255,0.42) 0%, rgba(255,255,255,0.10) 55%, rgba(255,255,255,0.20) 100%);
    -webkit-backdrop-filter: blur(8px) saturate(205%);
    backdrop-filter: blur(8px) saturate(205%);
    box-shadow: inset 2px 3px 8px -2px rgba(255,255,255,0.6), inset -2px -2px 6px -2px rgba(255,255,255,0.24);
    border: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 17px;
    font-weight: 700;
    transition: border-color .2s ease, color .2s ease;
}
.toc-item a:hover .toc-badge {
    border-color: var(--accent);
    color: var(--accent);
}
.toc-text {
    font-weight: 600;
    font-size: 15.5px;
    line-height: 1.6;
}

/* ---------- 5. Body ---------- */
.article-body {
    width: 720px;
    max-width: calc(100% - 40px);
    margin: var(--fx-sp-body-top, 48px) auto 0;
}
/* v1.0.5/v1.0.8: global block gap (Articles tab). --fx-art-gap is emitted
   from the panel value by inc/render.php. v1.0.8 — the gap is now UNIFORM:
   every pair of adjacent body blocks (paragraph, heading, quote, image) is
   separated by exactly the same value — the old hidden multipliers
   (h2 ×2.334/×0.889, quote ×1.556) and the image's independent inline
   margins made some gaps differ from others, which the admin read as a bug.
   Images can add a per-image offset through --fx-img-extra (single.php maps
   the stored v_margin around its 24px default); the result never drops
   below 6px. */
.article-body > .article-p {
    margin: 0 0 var(--fx-art-gap, 18px);
    line-height: 1.9;
    color: var(--text);
}
/* v1.0.6 — paragraph width lock. Text must ALWAYS wrap inside the article
   body column: overflow-wrap guards against unbreakable runs (long URLs,
   NBSP sequences, fused words) escaping the frame — while height and the
   number of rendered lines stay completely unlimited. */
.article-body > .article-p,
.article-body--gutenberg > p,
.article-body .article-quote .quote-text {
    max-width: 100%;
    overflow-wrap: anywhere;
    word-break: normal;
    overflow: visible;
}
/* v1.0.7 — dual paragraph text (desktop/mobile pair). The pair is emitted
   only when the admin filled the mobile box; both versions carry .article-p
   so the shared typography, width lock and gap rules keep applying. The
   switch mechanism mirrors the blog-card titles (767px breakpoint). */
.article-p--mobile { display: none; }
@media (max-width: 767px) {
    .article-p--desktop { display: none; }
    .article-p--mobile  { display: block; }
}
.article-body > .article-h2 {
    margin: 0 0 var(--fx-art-gap, 18px);
    line-height: 1.6;
}
/* v1.0.8 — quote centering fix: margin-block (vertical gap) and margin-inline
   (centering) are now declared in the SAME high-specificity rule. The old
   low-specificity `.article-quote { margin-inline: auto }` lost to
   `.article-body > .article-quote { margin: X 0 }`, so on mobile the box
   hugged the inline-start edge (right in RTL) instead of centering. */
.article-body > .article-quote {
    margin-block: 0 var(--fx-art-gap, 18px);
    margin-inline: auto;
}
.article-body > .article-img {
    margin-block: max(6px, calc(var(--fx-art-gap, 18px) + var(--fx-img-extra, 0px)));
}

/* Quote block — liquid glass with specular highlight.
   v1.0.8: vertical margins moved to the .article-body > .article-quote gap
   rules above (uniform block gap); the quote always centers via
   margin-inline: auto there. */
.article-quote {
    color: var(--box-text-glass);
    position: relative;
    overflow: hidden;
    padding: 30px 34px;
    border-radius: 24px;
}
.article-quote::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(160deg, rgba(255,255,255,.2), rgba(255,255,255,0) 60%);
    pointer-events: none;
}
.article-quote .quote-mark {
    width: 30px;
    height: 30px;
    opacity: .55;
    margin-bottom: 8px;
    display: block;
}
.article-quote .quote-text {
    margin: 0;
    font-weight: 700;
    font-size: 17px;
    line-height: 1.9;
    position: relative;
    z-index: 1;
}

/* Inline image block */
.article-img {
    margin-inline: auto;
}
.article-img-frame {
    overflow: hidden;
    background: var(--glass-feature_card-bg, var(--glass-bg));
}
.article-img-frame img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.article-img-frame--natural {
    height: auto;
}
.article-img-frame--natural img {
    height: auto;
    object-fit: contain;
}

/* ---------- 6. Tags + share bar ---------- */
.article-endbar {
    width: 720px;
    max-width: calc(100% - 40px);
    margin: var(--fx-sp-endbar-top, 48px) auto 0;
    padding-top: 26px;
    border-top: 1px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 16px;
}
.article-endbar .tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.article-tag {
    color: var(--box-text-glass);
    display: inline-flex;
    align-items: center;
    padding: 5px 14px;
    border-radius: 13px;
    font-size: 12.5px;
    white-space: nowrap;
}
.article-endbar .share {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
}
.share-label {
    font-size: 12.5px;
    color: var(--muted);
    margin-inline-end: 4px;
}
.share-btn {
    color: var(--box-text-glass);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    color: var(--text);
    text-decoration: none;
    border: none;
    cursor: pointer;
    padding: 0;
    transition: transform .18s ease, color .18s ease;
}
.share-btn svg {
    width: 18px;
    height: 18px;
}
.share-btn:hover {
    transform: translateY(-2px);
    color: var(--accent);
}
.share-btn.copied {
    color: var(--primary);
}

/* ============================================================
   Responsive — phone reference: hero 97% rx11, TOC 1-col rx32,
   text col ~83%, quote 68%, accent circle hidden.
   ============================================================ */
@media (max-width: 1024px) {
}

@media (max-width: 767px) {
    .article-breadcrumb,
    .article-hero,
    .article-titlewrap {
        width: calc(100% - 32px);
        max-width: var(--container);
    }
    .article-hero {
        border-radius: 11px;
    }
    .article-cat {
        top: 14px;
        inset-inline-start: 14px;
        font-size: 11.5px;
        padding: 5px 11px;
    }
    .article-titlewrap {
        margin-top: var(--fx-sp-hero-title-m, var(--fx-sp-hero-title, 34px));
    }
    .article-subtitle {
        margin-top: var(--fx-sp-title-sub-m, var(--fx-sp-title-sub, 14px));
    }
    .article-meta {
        margin-top: var(--fx-sp-meta-top-m, var(--fx-sp-meta-top, 18px));
    }
    .article-toc-title {
        margin-top: var(--fx-sp-meta-toc-m, var(--fx-sp-meta-toc, 0px));
        margin-bottom: var(--fx-sp-toc-title-m, var(--fx-sp-toc-title, 24px));
    }
    .article-toc {
        width: calc(100% - 32px);
        max-width: var(--container);
        border-radius: 32px;
        padding: 28px 22px;
    }
    .toc-grid {
        grid-template-columns: 1fr;
        gap: 18px;
    }
    .article-body {
        width: calc(100% - 32px);
        max-width: none;
        margin-top: var(--fx-sp-body-top-m, var(--fx-sp-body-top, 48px));
    }
    /* v1.0.6 — mobile block-gap variant (Articles tab). Resolves to the
       mobile value when set, else follows the desktop value, else 18px.
       v1.0.8 — uniform: all four block kinds share the same rule. */
    .article-body {
        --fx-art-gap-m: var(--fx-art-gap-mobile, var(--fx-art-gap, 18px));
    }
    .article-body > .article-p,
    .article-body > .article-h2 {
        margin: 0 0 var(--fx-art-gap-m, 18px);
    }
    .article-body > .article-quote {
        margin-block: 0 var(--fx-art-gap-m, 18px);
        /* v1.0.8 — centering declared here too so it can never lose to a
           margin shorthand again (the v1.0.6 cascade bug that pushed the
           quote box to the inline-start edge in RTL). */
        margin-inline: auto;
        width: 68%;
    }
    .article-body > .article-img {
        margin-block: max(6px, calc(var(--fx-art-gap-m, var(--fx-art-gap, 18px)) + var(--fx-img-extra, 0px)));
    }
    .article-endbar {
        margin-top: var(--fx-sp-endbar-top-m, var(--fx-sp-endbar-top, 48px));
    }
    .article-img {
        width: 82% !important;
    }
    .article-endbar {
        width: calc(100% - 32px);
        flex-direction: column;
        align-items: flex-start;
    }
}

@media (prefers-reduced-motion: reduce) {
    .article-page * {
        scroll-behavior: auto !important;
        transition: none !important;
    }
}

/* ================= v1.5.0 — article meta chips =========================== */
/* The existing meta row (author / date / reading time) graduates from loose
   text runs to a quiet chip language consistent with the theme accents. */
.article-meta {
    gap: 8px;
}
.article-meta .meta-item {
    padding: 5px 12px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--accent) 7%, transparent);
    border: 1px solid color-mix(in srgb, var(--accent) 18%, transparent);
    color: var(--accent);
    font-size: 12px;
    font-weight: 600;
    line-height: 1.5;
}
.article-meta svg {
    width: 13px;
    height: 13px;
    opacity: 1;
}
.article-meta .meta-dot { display: none; }

@media (max-width: 640px) {
    .article-meta .meta-item { font-size: 11.5px; padding: 4px 10px; }
}

/* ================= v1.6.0 — TOC hover detail ============================= */
/* The whole TOC row responds to the pointer: the text slides toward the
   reading direction and the badge keeps its existing accent transition. */
.toc-item a {
    border-radius: 10px;
    transition: transform .16s ease;
}
.toc-item a:hover .toc-text { color: var(--accent); }
.toc-item a:hover { transform: translateX(-3px); }
html[dir="ltr"] .toc-item a:hover { transform: translateX(3px); }
.toc-item a:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 3px;
    border-radius: 10px;
}

@media (prefers-reduced-motion: reduce) {
    .toc-item a { transition: none; }
    .toc-item a:hover { transform: none; }
}

/* ================= v1.7.0 — reading position ============================= */
/* Fixed 3px accent bar at the very top of the viewport (above the sticky
   header, below modals). The fill grows from the RIGHT — the reading
   origin of this RTL theme — and is only rendered while actually scrolled
   (`.article-progress--on` is toggled from single.php), so it never draws
   attention on a freshly opened page. */
.article-progress {
    position: fixed;
    top: 0;
    right: 0;
    left: 0;
    height: 3px;
    z-index: 1040;
    pointer-events: none;
    opacity: 0;
    transition: opacity .25s ease;
}
.article-progress--on { opacity: 1; }
.article-progress-bar {
    display: block;
    height: 100%;
    width: 100%;
    background: var(--accent, #c9522f);
    transform: scaleX(0);
    transform-origin: 100% 50%; /* RTL: progress starts at the right edge */
}
html[dir="ltr"] .article-progress-bar { transform-origin: 0 50%; }

/* Scrollspy state: the TOC row matching the section currently on screen.
   Mirrors the v1.6.0 hover language (accent text) plus a filled badge so
   the active row is recognizable at a glance, not only on hover. */
.toc-item a.toc-active .toc-text { color: var(--accent); font-weight: 600; }
.toc-item a.toc-active .toc-badge { background: var(--accent); color: #fff; }
.toc-item a.toc-active {
    transform: translateX(-3px);
}
html[dir="ltr"] .toc-item a.toc-active { transform: translateX(3px); }

@media (prefers-reduced-motion: reduce) {
    .article-progress { transition: none; }
    .toc-item a.toc-active { transform: none; }
}

/* ================= v1.8.0 — last-revised chip detail ===================== */
/* Same quiet chip family as the other meta items; the refresh glyph gets a
   slightly stronger tint so "بازنگری" reads as status, not author info. */
.article-meta .meta-item--updated svg {
    opacity: .85;
}
.article-meta .meta-item--updated {
    background: color-mix(in srgb, var(--accent) 11%, transparent);
}
@media (prefers-reduced-motion: reduce) {
    .article-meta .meta-item--updated { transition: none; }
}

/* =========================================================================
   v1.9.0 — Print stylesheet for single articles (چاپ / ذخیره PDF)
   The reading surface is the document: chrome (header, footer, floating
   controls), the TOC, the progress bar and the share/print tools drop out;
   the body keeps its typography at print-safe sizes, blocks never split
   mid-row, and in-body links print their target after the text so a paper
   copy keeps the references.
   ========================================================================= */
@media print {
    /* comfortable paper margins; the theme never sets them globally */
    @page {
        margin: 18mm 16mm;
    }
    .site-header-wrap,
    .site-footer-wrap,
    .fx-to-top,
    .article-progress,
    .article-toc,
    .article-toc-title,
    .article-endbar,
    .article-breadcrumb,
    .share-label,
    .share-btn,
    .glass-group-article_share,
    .glass-group-article_toc {
        display: none !important;
    }
    html, body {
        background: #fff !important;
        color: #000 !important;
    }
    .article-page {
        max-width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        box-shadow: none !important;
        background: transparent !important;
    }
    .article-hero,
    .article-titlewrap,
    .article-meta,
    .article-body,
    .article-quote,
    .article-img,
    .article-img-frame,
    .article-h2,
    .article-p {
        background: transparent !important;
        box-shadow: none !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
        color: #000 !important;
        break-inside: avoid;
        page-break-inside: avoid;
    }
    .article-title {
        font-size: 26pt !important;
        line-height: 1.35 !important;
        color: #000 !important;
    }
    .article-subtitle {
        font-size: 13pt !important;
        color: #222 !important;
    }
    .article-h2 {
        font-size: 16pt !important;
        break-after: avoid;
        page-break-after: avoid;
    }
    .article-p,
    .article-meta,
    .article-tag {
        font-size: 11.5pt !important;
        line-height: 1.8 !important;
    }
    .article-quote {
        border-inline-start: 3px solid #444 !important;
        background: #f5f5f5 !important;
    }
    .article-img img {
        max-width: 100% !important;
        height: auto !important;
    }
    /* Paper copies keep their references: inline links print as text + URL. */
    .article-body a,
    .article-p a {
        color: #000 !important;
        text-decoration: underline !important;
    }
    .article-body a[href^="http"]::after,
    .article-p a[href^="http"]::after {
        content: " (" attr(href) ")";
        font-size: 9.5pt;
        color: #444;
        word-break: break-all;
        unicode-bidi: plaintext;
    }
}

/* ---------------------------------------------------------------------------
   v1.10.0 — Related articles (single article page)
   Static 3-up grid of the same blog cards the home section renders (no
   carousel controls). Same content width as the TOC above (min(934px,
   var(--container))) so the section reads as part of the article body. */
.related-articles {
    width: calc(100% - 32px);
    max-width: min(934px, var(--container));
    margin: 56px auto 8px;
}
.related-articles .article-toc-title {
    margin-bottom: 20px;
}
.related-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}
.related-grid .blog-card {
    flex: none; /* neutralize the carousel flex-basis from furex-base.css */
    width: 100%;
    transition: transform .25s ease, box-shadow .25s ease;
}
.related-grid .blog-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 16px 34px rgba(0, 0, 0, .16);
}
.related-grid .blog-card:focus-visible {
    outline: 2px solid var(--accent, #c9522f);
    outline-offset: 3px;
}
@media (max-width: 900px) {
    .related-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 16px;
    }
}
@media (max-width: 560px) {
    .related-articles { margin-top: 40px; }
    .related-grid { grid-template-columns: 1fr; }
    .related-grid .blog-card { aspect-ratio: 16 / 9; }
}
@media (prefers-reduced-motion: reduce) {
    .related-grid .blog-card { transition: none; }
    .related-grid .blog-card:hover { transform: none; }
}
@media print {
    .related-articles { display: none !important; }
}

/* v1.11.0 — advanced blocks synced from the WordPress editor (tables,
   galleries, embeds, lists, h3…) follow the same body column + block gap. */
.article-body > .article-wp-block {
    margin: 0 0 var(--fx-art-gap, 18px);
    max-width: 100%;
    line-height: 1.9;
    color: var(--text);
    overflow-wrap: anywhere;
}
.article-wp-block > *:first-child { margin-top: 0; }
.article-wp-block > *:last-child { margin-bottom: 0; }
.article-wp-block img,
.article-wp-block video,
.article-wp-block iframe { max-width: 100%; height: auto; border-radius: 16px; }
.article-wp-block table { width: 100%; border-collapse: collapse; }
.article-wp-block th,
.article-wp-block td { padding: 10px 12px; border: 1px solid var(--border); text-align: start; }
.article-wp-block ul,
.article-wp-block ol { padding-inline-start: 1.4em; }
.article-wp-block h3,
.article-wp-block h4 { margin: 0 0 .6em; line-height: 1.6; }
.article-wp-block a { color: var(--accent); }
.article-wp-block figcaption { font-size: .88em; color: var(--muted); margin-top: 8px; text-align: center; }


/* =========================================================================
   v1.31.0 — Single Article Comments Section (Liquid Glass 4.0 & Auth Gate)
   Matches .related-articles and .article-toc width (min(934px, var(--container))).
   ========================================================================= */

.article-comments-wrap,
.fx-comments-section {
    width: calc(100% - 32px);
    max-width: min(934px, var(--container));
    margin: 56px auto 16px;
}

.fx-comments-head .article-toc-title {
    margin: 0 0 22px;
    width: 100%;
    max-width: none;
}

.fx-comment-list {
    list-style: none;
    padding: 0;
    margin: 0 0 32px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.fx-comment-item {
    list-style: none;
}

.fx-comment-item ul.children,
.fx-comment-item ol.children {
    list-style: none;
    padding: 0;
    margin: 14px 28px 0 0;
    display: flex;
    flex-direction: column;
    gap: 14px;
    border-inline-start: 2px solid var(--border);
    padding-inline-start: 18px;
}

.fx-comment-card {
    padding: clamp(18px, 2.8vw, 26px);
    border-radius: var(--radius-lg, 22px);
}

.fx-comment-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 14px;
}

.fx-comment-author {
    display: flex;
    align-items: center;
    gap: 12px;
}

.fx-comment-avatar {
    width: 44px;
    height: 44px;
    flex: 0 0 44px;
    border-radius: 50%;
    background: var(--icon-chip-bg);
    color: var(--text);
    display: grid;
    place-items: center;
    font-size: 16px;
    font-weight: 800;
    overflow: hidden;
}

.fx-comment-item.is-admin-comment > .fx-comment-card .fx-comment-avatar {
    background: var(--primary);
    color: var(--box-text-colored, #fff);
}

.fx-comment-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.fx-comment-name-row {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.fx-comment-name {
    font-size: 15px;
    font-weight: 800;
    color: var(--text);
}

.fx-comment-role-badge {
    display: inline-block;
    padding: 2px 10px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
    background: var(--primary);
    color: var(--box-text-colored, #fff);
}

.fx-comment-role-badge.is-member {
    background: var(--icon-chip-bg);
    color: var(--muted);
}

.fx-comment-date {
    display: block;
    font-size: 12px;
    color: var(--muted);
    margin-top: 2px;
}

.fx-comment-reply-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    border-radius: 999px;
    border: none;
    color: var(--text);
    font-family: inherit;
    font-size: 12.5px;
    font-weight: 700;
    cursor: pointer;
    transition: transform .2s ease, color .2s ease;
}

.fx-comment-reply-btn:hover {
    transform: translateY(-1px);
    color: var(--accent);
}

.fx-comment-reply-btn svg {
    width: 14px;
    height: 14px;
}

.fx-comment-awaiting {
    margin: 0 0 10px;
    padding: 8px 14px;
    border-radius: 10px;
    background: rgba(245, 158, 11, 0.14);
    color: #f59e0b;
    font-size: 12.5px;
    font-weight: 600;
}

.fx-comment-body {
    font-size: var(--body-size);
    line-height: 1.9;
    color: var(--text);
}

.fx-comment-body p {
    margin: 0 0 10px;
}

.fx-comment-body p:last-child {
    margin-bottom: 0;
}

/* Compose Comment Card & Auth Gate Card */
.fx-comment-compose,
.fx-comment-auth-gate {
    max-width: none !important;
    margin: 24px 0 0 !important;
    padding: clamp(22px, 3.5vw, 34px);
    border-radius: var(--radius-xl, 26px);
}

.fx-comment-compose-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 18px;
}

.fx-comment-user-pill {
    display: flex;
    align-items: center;
    gap: 12px;
}

.fx-comment-user-name {
    display: block;
    font-size: 14.5px;
    font-weight: 800;
}

.fx-comment-user-sub {
    display: block;
    font-size: 12px;
    color: var(--muted);
}

.fx-comment-reply-indicator {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 6px 14px;
    border-radius: 999px;
    background: var(--icon-chip-bg);
    font-size: 12.5px;
    font-weight: 700;
    color: var(--accent);
}

.fx-cancel-reply-btn {
    background: none;
    border: none;
    color: var(--text);
    font-family: inherit;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    padding: 0;
}

.fx-comment-submit-row {
    display: flex;
    justify-content: flex-end;
}

.fx-comment-submit-btn {
    width: auto !important;
    min-width: 190px;
    padding: 13px 28px !important;
}

/* Login Gate for Guest Readers */
.fx-comment-auth-gate {
    display: flex;
    align-items: center;
    gap: 22px;
    text-align: right;
}

.fx-comment-auth-gate__icon {
    width: 60px;
    height: 60px;
    flex: 0 0 60px;
    border-radius: 50%;
    background: var(--icon-chip-bg);
    color: var(--accent);
    display: grid;
    place-items: center;
}

.fx-comment-auth-gate__icon svg {
    width: 28px;
    height: 28px;
}

.fx-comment-auth-gate__body {
    flex: 1;
}

.fx-comment-auth-gate__title {
    margin: 0 0 6px;
    font-size: 18px;
    font-weight: 800;
}

.fx-comment-auth-gate__desc {
    margin: 0 0 16px;
    font-size: 13.5px;
    color: var(--muted);
    line-height: 1.85;
}

.fx-comment-auth-gate__actions .fx-submit {
    width: auto;
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 13px 24px;
    cursor: pointer;
}

.fx-comment-auth-gate__actions .fx-submit svg {
    width: 18px;
    height: 18px;
}

@media (max-width: 680px) {
    .fx-comment-auth-gate {
        flex-direction: column;
        text-align: center;
    }
    .fx-comment-auth-gate__actions .fx-submit,
    .fx-comment-submit-btn {
        width: 100% !important;
        justify-content: center;
    }
    .fx-comment-item ul.children,
    .fx-comment-item ol.children {
        margin-right: 14px;
        padding-inline-start: 12px;
    }
}