/* ============================================================
   FII-CONSTIENT.RO
   COMENTARII — EDITORIAL PREMIUM
============================================================ */

.comments-page {

    --paper: #eee2bf;
    --paper-soft: rgba(255, 250, 232, .42);
    --paper-strong: rgba(255, 250, 232, .72);

    --ink: #211b14;
    --ink-soft: #403629;

    --muted: #716450;
    --muted-soft: #8b7c64;

    --line: rgba(33, 27, 20, .50);
    --soft-line: rgba(33, 27, 20, .20);
    --soft-line-2: rgba(33, 27, 20, .10);

    --soft: rgba(33, 27, 20, .055);
    --soft-2: rgba(33, 27, 20, .085);

    width: 100%;
    color: var(--ink);

}


/* ============================================================
   BREADCRUMB
============================================================ */

.comments-breadcrumb {

    display: flex;
    flex-wrap: wrap;
    align-items: center;

    gap: 9px;

    margin: 19px 0 13px;

    font-size: 11px;
    font-weight: 700;
    line-height: 1.4;

    text-transform: uppercase;

    color: var(--muted);

}


.comments-breadcrumb a {

    color: inherit;
    text-decoration: none;

}


.comments-breadcrumb a:hover {

    color: var(--ink);

}


.comments-breadcrumb strong {

    color: var(--ink);

}


/* ============================================================
   HEADER PAGINĂ
============================================================ */

.comments-header {

    padding: 31px 0 27px;

    border-top: 5px double var(--ink);
    border-bottom: 1px solid var(--ink);

}


.comments-header-label {

    margin-bottom: 9px;

    font-size: 11px;
    font-weight: 900;

    letter-spacing: 1.5px;
    line-height: 1.2;

    text-transform: uppercase;

    color: var(--muted);

}


.comments-header h1 {

    display: flex;
    align-items: baseline;
    flex-wrap: wrap;

    gap: 14px;

    margin: 0;

    font-size: clamp(46px, 7vw, 80px);

    font-weight: 900;
    line-height: .9;

    letter-spacing: -2.3px;

}


.comments-header h1 span {

    font-size: .40em;
    font-weight: 900;

    letter-spacing: 0;

    color: var(--muted);

}


.comments-header p {

    max-width: 680px;

    margin: 18px 0 0;

    font-size: 14px;
    line-height: 1.65;

    color: var(--muted);

}


/* ============================================================
   ARTICOL REFERINȚĂ
============================================================ */

.comments-article {

    display: grid;

    grid-template-columns: 105px minmax(0, 1fr);

    gap: 25px;

    padding: 27px 0;

    border-bottom: 4px double var(--ink);

}


.comments-article-number {

    padding-top: 4px;

    font-size: 11px;
    font-weight: 900;

    letter-spacing: 1.15px;
    line-height: 1.2;

    text-transform: uppercase;

    color: var(--muted);

}


.comments-article-content {

    min-width: 0;

}


.comments-category {

    display: inline-block;

    margin-bottom: 8px;
    padding-bottom: 2px;

    border-bottom: 1px solid transparent;

    color: var(--muted);

    font-size: 11px;
    font-weight: 900;

    letter-spacing: 1.05px;

    text-decoration: none;
    text-transform: uppercase;

}


.comments-category:hover {

    border-color: var(--ink);
    color: var(--ink);

}


.comments-article h2 {

    max-width: 880px;

    margin: 0 0 11px;

    font-size: clamp(28px, 3.7vw, 44px);

    font-weight: 900;
    line-height: 1;

    letter-spacing: -.8px;

}


.comments-article h2 a {

    color: var(--ink);
    text-decoration: none;

}


.comments-article h2 a:hover {

    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 4px;

}


/* ============================================================
   META ARTICOL
============================================================ */

.comments-article-meta {

    display: flex;
    flex-wrap: wrap;
    align-items: center;

    gap: 7px;

    margin: 0 0 12px;

    font-size: 10px;
    font-weight: 700;

    text-transform: uppercase;

    color: var(--muted);

}


/* ============================================================
   ÎNAPOI ARTICOL
============================================================ */

.comments-back-article {

    display: inline-block;

    padding-bottom: 3px;

    border-bottom: 1px solid var(--ink);

    color: var(--ink);

    font-size: 11px;
    font-weight: 900;

    text-decoration: none;

}


/* ============================================================
   FORMULAR COMENTARII
============================================================ */

.fc-comments-compose {

    display: block !important;

    position: relative;

    width: 100%;

    margin: 33px 0 0;

    padding: 28px;

    border: 1px solid var(--ink);

    background: rgba(33, 27, 20, .025);

    box-sizing: border-box;

}


/* ============================================================
   HEADER FORMULAR
============================================================ */

.fc-comments-compose-head {

    display: flex;
    align-items: flex-end;
    justify-content: space-between;

    gap: 25px;

    margin-bottom: 24px;
    padding-bottom: 18px;

    border-bottom: 1px solid var(--ink);

}


.fc-comments-kicker {

    display: block;

    margin-bottom: 6px;

    font-size: 11px;
    font-weight: 900;

    letter-spacing: 1.4px;
    line-height: 1.2;

    text-transform: uppercase;

    color: var(--muted);

}


.fc-comments-compose-head h2 {

    margin: 0;

    font-size: clamp(30px, 4vw, 39px);

    font-weight: 900;
    line-height: 1;

    letter-spacing: -.6px;

}


.fc-comments-limit {

    flex: 0 0 auto;

    padding-bottom: 2px;

    font-size: 10px;
    font-weight: 800;

    letter-spacing: .8px;

    white-space: nowrap;

    color: var(--muted);

}


/* ============================================================
   CONTEXT RĂSPUNS
============================================================ */

.fc-reply-context {

    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 15px;

    margin: 0 0 20px;

    padding: 12px 14px;

    border-left: 3px solid var(--ink);
    border-top: 1px solid var(--soft-line);
    border-right: 1px solid var(--soft-line);
    border-bottom: 1px solid var(--soft-line);

    background: var(--soft);

    color: var(--muted);

    font-size: 12px;
    line-height: 1.45;

}


.fc-reply-context[hidden] {

    display: none !important;

}


.fc-reply-context strong {

    color: var(--ink);

}


.fc-reply-context button {

    appearance: none;
    -webkit-appearance: none;

    width: 30px;
    height: 30px;

    flex: 0 0 auto;

    display: flex;
    align-items: center;
    justify-content: center;

    padding: 0;

    border: 1px solid var(--soft-line);
    border-radius: 50%;

    background: transparent;

    color: var(--ink);

    font-size: 18px;
    line-height: 1;

    cursor: pointer;

}


.fc-reply-context button:hover {

    background: var(--soft);

}


/* ============================================================
   MESAJ SUCCES / EROARE
============================================================ */

.fc-comments-message {

    display: block;

    margin: 0 0 20px;

    padding: 13px 15px;

    border: 1px solid var(--ink);

    font-size: 13px;
    font-weight: 700;
    line-height: 1.5;

}


.fc-comments-success {

    background: rgba(33, 27, 20, .07);

}


.fc-comments-error {

    border-style: double;

}


/* ============================================================
   FORM
============================================================ */

.fc-comments-form {

    display: block !important;

    position: relative;

    width: 100%;

    height: auto !important;
    max-height: none !important;

    margin: 0;
    padding: 0;

    overflow: visible !important;

    opacity: 1 !important;
    visibility: visible !important;

}


/* ============================================================
   FIELD
============================================================ */

.fc-comments-field {

    display: block !important;

    width: 100%;

    margin-bottom: 22px;

}


/* ============================================================
   LABEL
============================================================ */

.fc-comments-field label {

    display: block;

    margin-bottom: 8px;

    font-size: 14px;
    font-weight: 900;
    line-height: 1.3;

}


/* ============================================================
   LABEL ROW
============================================================ */

.fc-comments-label-row {

    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 15px;

}


.fc-comments-label-row > span {

    font-size: 11px;
    font-weight: 700;

    color: var(--muted);

}


.fc-comments-label-row > span.near-limit {

    color: var(--ink);
    font-weight: 900;

}


.fc-comments-label-row > span.at-limit {

    text-decoration: underline;
    text-decoration-thickness: 2px;
    text-underline-offset: 3px;

}


/* ============================================================
   INPUT NUME
============================================================ */

.fc-comments-field input[type="text"] {

    display: block !important;

    width: 100% !important;

    height: 54px !important;
    min-height: 54px !important;

    margin: 0 !important;

    padding: 0 15px !important;

    border: 1px solid var(--ink) !important;
    border-radius: 0 !important;

    outline: 0 !important;

    background: rgba(255, 255, 255, .10) !important;

    color: var(--ink) !important;

    -webkit-text-fill-color: var(--ink) !important;

    font-family:
        Georgia,
        "Times New Roman",
        serif !important;

    font-size: 16px !important;
    font-weight: 400 !important;
    line-height: 1 !important;

    box-sizing: border-box !important;

    box-shadow: none !important;

    opacity: 1 !important;
    visibility: visible !important;

    appearance: none !important;
    -webkit-appearance: none !important;

}


/* ============================================================
   TEXTAREA
============================================================ */

.fc-comments-field textarea {

    display: block !important;

    width: 100% !important;

    min-height: 195px !important;
    height: auto !important;

    margin: 0 !important;

    padding: 15px !important;

    border: 1px solid var(--ink) !important;
    border-radius: 0 !important;

    outline: 0 !important;

    resize: vertical !important;

    background: rgba(255, 255, 255, .10) !important;

    color: var(--ink) !important;

    -webkit-text-fill-color: var(--ink) !important;

    font-family:
        Georgia,
        "Times New Roman",
        serif !important;

    font-size: 16px !important;
    font-weight: 400 !important;
    line-height: 1.65 !important;

    box-sizing: border-box !important;

    box-shadow: none !important;

    opacity: 1 !important;
    visibility: visible !important;

    appearance: none !important;
    -webkit-appearance: none !important;

}


/* ============================================================
   PLACEHOLDERS
============================================================ */

.fc-comments-field input::placeholder,
.fc-comments-field textarea::placeholder {

    color: #83745d !important;

    -webkit-text-fill-color: #83745d !important;

    opacity: 1 !important;

}


/* ============================================================
   FOCUS
============================================================ */

.fc-comments-field input:focus,
.fc-comments-field textarea:focus {

    background: rgba(255, 255, 255, .16) !important;

    box-shadow: inset 0 0 0 1px var(--ink) !important;

}


/* ============================================================
   NOTĂ NUME
============================================================ */

.fc-comments-field-note {

    display: block;

    margin-top: 7px;

    font-size: 11px;
    font-style: italic;
    line-height: 1.45;

    color: var(--muted);

}


/* ============================================================
   PREVIZUALIZARE
============================================================ */

.comment-preview {

    margin: 0 0 22px;

    padding: 18px;

    border: 1px solid var(--ink);

    background: rgba(255, 255, 255, .08);

}


.comment-preview[hidden] {

    display: none !important;

}


.comment-preview-header {

    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 15px;

    margin-bottom: 16px;
    padding-bottom: 10px;

    border-bottom: 1px solid var(--soft-line);

}


.comment-preview-header strong {

    font-size: 10px;
    font-weight: 900;

    letter-spacing: 1.2px;

    color: var(--muted);

}


.comment-preview-header button {

    appearance: none;
    -webkit-appearance: none;

    width: 28px;
    height: 28px;

    display: flex;
    align-items: center;
    justify-content: center;

    padding: 0;

    border: 0;

    background: transparent;

    color: var(--ink);

    font-size: 19px;
    line-height: 1;

    cursor: pointer;

}


.comment-preview-card {

    display: grid;

    grid-template-columns: 48px minmax(0, 1fr);

    gap: 14px;

}


/* ============================================================
   TOOLBAR FORMULAR
============================================================ */

.fc-comments-tools {

    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 18px;

    width: 100%;

}


.fc-comments-tools-left {

    display: flex;
    align-items: center;
    flex-wrap: wrap;

    gap: 8px;

}


/* ============================================================
   EMOJI WRAPPER
============================================================ */

.fc-emoji-wrap {

    position: relative;

}


/* ============================================================
   BUTOANE TOOLBAR
============================================================ */

.fc-emoji-toggle,
.fc-comments-preview-button {

    appearance: none;
    -webkit-appearance: none;

    min-height: 46px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    gap: 8px;

    margin: 0;

    padding: 0 14px;

    border: 1px solid var(--ink);
    border-radius: 0;

    background: transparent;

    color: var(--ink);

    -webkit-text-fill-color: var(--ink);

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size: 12px;
    font-weight: 800;

    cursor: pointer;

    transition:
        background .18s ease,
        color .18s ease;

}


.fc-emoji-toggle {

    min-width: 116px;

}


.fc-comments-preview-button {

    min-width: 145px;

}


.fc-emoji-toggle:hover,
.fc-comments-preview-button:hover {

    background: var(--soft);

}


/* ============================================================
   EMOJI PANEL
============================================================ */

.fc-emoji-panel {

    position: absolute;

    z-index: 1000;

    left: 0;
    top: calc(100% + 8px);

    width: 280px;

    display: none;

    grid-template-columns: repeat(5, 1fr);

    gap: 4px;

    padding: 9px;

    border: 1px solid var(--ink);

    background: var(--paper);

    box-shadow:
        5px
        5px
        0
        rgba(33, 27, 20, .15);

}


.fc-emoji-panel.active {

    display: grid;

}


/* ============================================================
   EMOJI BUTTON
============================================================ */

.fc-emoji-button {

    appearance: none;
    -webkit-appearance: none;

    width: 48px;
    height: 44px;

    display: flex;
    align-items: center;
    justify-content: center;

    margin: 0;
    padding: 0;

    border: 0;

    background: transparent;

    cursor: pointer;

    font-size: 22px;

}


.fc-emoji-button:hover {

    background: var(--soft);

}


/* ============================================================
   SUBMIT
============================================================ */

.fc-comments-submit {

    appearance: none;
    -webkit-appearance: none;

    min-width: 220px;
    min-height: 48px;

    display: inline-flex;
    align-items: center;
    justify-content: space-between;

    gap: 18px;

    margin: 0;

    padding: 0 18px;

    border: 1px solid var(--ink);
    border-radius: 0;

    background: var(--ink);

    color: var(--paper);

    -webkit-text-fill-color: var(--paper);

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size: 13px;
    font-weight: 900;

    cursor: pointer;

    transition:
        opacity .2s ease,
        transform .18s ease;

}


.fc-comments-submit:hover {

    opacity: .88;

}


.fc-comments-submit:active {

    transform: translateY(1px);

}


.fc-comments-submit:disabled {

    opacity: .50;

    cursor: wait;

}


/* ============================================================
   RULES
============================================================ */

.fc-comments-rules {

    margin-top: 21px;
    padding-top: 15px;

    border-top: 1px dotted var(--line);

    font-size: 12px;
    line-height: 1.6;

    color: var(--muted);

}


.fc-comments-rules strong {

    color: var(--ink);

}


/* ============================================================
   LIST SECTION
============================================================ */

.comments-list-section {

    margin-top: 38px;

}


/* ============================================================
   LIST HEADER
============================================================ */

.comments-list-header {

    display: flex;
    align-items: flex-end;
    justify-content: space-between;

    gap: 25px;

    padding: 14px 0;

    border-top: 5px double var(--ink);
    border-bottom: 1px solid var(--ink);

}


.comments-list-header span {

    font-size: 10px;
    font-weight: 900;

    letter-spacing: 1.2px;

    text-transform: uppercase;

    color: var(--muted);

}


.comments-list-header h2 {

    margin: 4px 0 0;

    font-size: 31px;
    line-height: 1;

}


.comments-list-header > div:last-child {

    padding-bottom: 4px;

    font-size: 10px;
    font-weight: 700;

    text-transform: uppercase;

    color: var(--muted);

}


/* ============================================================
   LISTĂ
============================================================ */

.comments-list {

    width: 100%;

}


/* ============================================================
   COMMENT ITEM
============================================================ */

.comment-item {

    position: relative;

    display: grid;

    grid-template-columns: 56px minmax(0, 1fr);

    gap: 18px;

    padding: 25px 0 27px;

    border-bottom: 1px solid var(--soft-line);

}


/* ============================================================
   AVATAR
============================================================ */

.comment-avatar {

    width: 52px;
    height: 52px;

    display: flex;
    align-items: center;
    justify-content: center;

    border: 1px solid var(--ink);

    background: rgba(33, 27, 20, .035);

    color: var(--ink);

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size: 22px;
    font-weight: 900;
    line-height: 1;

}


/* ============================================================
   COMMENT CONTENT
============================================================ */

.comment-content {

    min-width: 0;

}


/* ============================================================
   META
============================================================ */

.comment-meta {

    display: flex;
    align-items: flex-start;
    justify-content: space-between;

    gap: 18px;

    margin-bottom: 11px;

}


.comment-meta > div {

    display: flex;
    flex-wrap: wrap;
    align-items: baseline;

    gap: 3px 8px;

    min-width: 0;

}


.comment-meta strong {

    display: inline-block;

    margin: 0;

    font-size: 15px;
    font-weight: 900;

}


.comment-meta span {

    display: inline-block;

    font-size: 10px;
    font-weight: 700;

    text-transform: uppercase;

    color: var(--muted);

}


.comment-meta .comment-edited {

    font-size: 9px;

    letter-spacing: .6px;

    color: var(--muted-soft);

}


/* ============================================================
   PERMALINK
============================================================ */

.comment-permalink {

    flex: 0 0 auto;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-width: 36px;
    min-height: 30px;

    padding: 2px 7px;

    border: 1px solid transparent;
    border-radius: 3px;

    color: #6f4e26;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size: 14px;
    font-weight: 900;

    text-decoration: none;

    transition:
        background .18s ease,
        border-color .18s ease,
        color .18s ease;

}


.comment-permalink:hover {

    border-color: var(--soft-line);

    background: var(--soft);

    color: var(--ink);

}


/* ============================================================
   COMMENT TEXT
============================================================ */

.comment-text {

    max-width: 860px;

    color: var(--ink);

    font-size: 15px;
    line-height: 1.72;

    overflow-wrap: anywhere;
    word-break: normal;

}


/* ============================================================
   ACTION BAR
============================================================ */

.comment-actions {

    display: flex;
    flex-wrap: wrap;
    align-items: center;

    gap: 8px;

    margin-top: 17px;
    padding-top: 13px;

    border-top: 1px solid var(--soft-line-2);

}


/* ============================================================
   REACȚII
============================================================ */

.comment-reactions {

    display: flex;
    flex-wrap: wrap;
    align-items: center;

    gap: 6px;

    width: 100%;

    margin-bottom: 2px;

}


.comment-reaction-form {

    display: inline-flex;

    margin: 0;
    padding: 0;

}


.comment-reaction {

    appearance: none;
    -webkit-appearance: none;

    min-height: 36px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    gap: 6px;

    margin: 0;

    padding: 6px 11px;

    border: 1px solid rgba(33, 27, 20, .28);
    border-radius: 999px;

    background: rgba(255, 250, 232, .30);

    color: var(--ink);

    font-family:
        Arial,
        Helvetica,
        sans-serif;

    font-size: 12px;
    font-weight: 700;
    line-height: 1;

    cursor: pointer;

    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .35);

    transition:
        background .18s ease,
        color .18s ease,
        border-color .18s ease,
        transform .18s ease,
        box-shadow .18s ease;

}


.comment-reaction span {

    white-space: nowrap;

}


.comment-reaction strong {

    min-width: 19px;
    height: 19px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    padding: 0 5px;

    border-radius: 999px;

    background: rgba(33, 27, 20, .09);

    font-size: 10px;
    font-weight: 900;

}


.comment-reaction:hover {

    border-color: rgba(33, 27, 20, .50);

    background: var(--soft);

    transform: translateY(-1px);

}


.comment-reaction.active {

    border-color: var(--ink);

    background: var(--ink);

    color: var(--paper);

    box-shadow:
        0
        4px
        12px
        rgba(33, 27, 20, .13);

}


.comment-reaction.active strong {

    background: rgba(255, 255, 255, .14);

    color: var(--paper);

}


.comment-reaction:disabled {

    opacity: .55;

    cursor: wait;

    transform: none;

}


/* ============================================================
   BUTOANE ACȚIUNE
============================================================ */

.comment-action-button {

    appearance: none;
    -webkit-appearance: none;

    min-height: 34px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    gap: 5px;

    margin: 0;

    padding: 5px 9px;

    border: 1px solid transparent;
    border-radius: 4px;

    background: transparent;

    color: var(--muted);

    font-family:
        Arial,
        Helvetica,
        sans-serif;

    font-size: 11px;
    font-weight: 700;
    line-height: 1.2;

    cursor: pointer;

    transition:
        background .18s ease,
        color .18s ease,
        border-color .18s ease;

}


.comment-action-button:hover {

    border-color: var(--soft-line);

    background: var(--soft);

    color: var(--ink);

}


/* ============================================================
   TIMER EDITARE
============================================================ */

.comment-edit-time {

    display: inline-flex;
    align-items: center;

    min-height: 30px;

    margin-left: 2px;

    padding: 0 9px;

    border-left: 1px solid var(--soft-line);

    color: var(--muted);

    font-family:
        Arial,
        Helvetica,
        sans-serif;

    font-size: 10px;
    font-weight: 700;

    letter-spacing: .3px;

    white-space: nowrap;

}


/* ============================================================
   FORM EDITARE
============================================================ */

.comment-edit-form {

    margin-top: 15px;
    padding: 15px;

    border: 1px solid var(--soft-line);

    background: rgba(255, 250, 232, .22);

}


.comment-edit-form[hidden] {

    display: none !important;

}


.comment-edit-form textarea {

    display: block;

    width: 100%;
    min-height: 135px;

    box-sizing: border-box;

    padding: 13px 14px;

    border: 1px solid var(--line);
    border-radius: 0;

    outline: 0;

    resize: vertical;

    background: rgba(255, 255, 255, .12);

    color: var(--ink);

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size: 15px;
    line-height: 1.6;

}


.comment-edit-form textarea:focus {

    box-shadow:
        inset
        0
        0
        0
        1px
        var(--ink);

}


/* ============================================================
   ACȚIUNI EDITARE
============================================================ */

.comment-edit-actions {

    display: flex;
    align-items: center;
    justify-content: flex-end;

    gap: 8px;

    margin-top: 10px;

}


.comment-edit-actions button {

    appearance: none;
    -webkit-appearance: none;

    min-height: 38px;

    padding: 7px 12px;

    border: 1px solid var(--ink);
    border-radius: 0;

    background: transparent;

    color: var(--ink);

    font-family:
        Arial,
        Helvetica,
        sans-serif;

    font-size: 11px;
    font-weight: 800;

    cursor: pointer;

}


.comment-edit-actions button[type="submit"] {

    background: var(--ink);

    color: var(--paper);

}


/* ============================================================
   RĂSPUNSURI
============================================================ */

.comment-replies {

    position: relative;

    margin: 3px 0 6px 72px;

    padding-left: 21px;

    border-left: 2px solid var(--soft-line);

}


.comment-replies .comment-item {

    grid-template-columns: 44px minmax(0, 1fr);

    gap: 13px;

    padding: 20px 0 22px;

}


.comment-replies .comment-avatar {

    width: 42px;
    height: 42px;

    font-size: 18px;

}


.comment-replies .comment-text {

    font-size: 14px;

}


/* ============================================================
   HIGHLIGHT LINK DIRECT
============================================================ */

.comment-item.comment-highlight {

    animation:
        comment-highlight-animation
        2.8s
        ease;

}


@keyframes comment-highlight-animation {

    0%,
    28% {

        background:
            rgba(118, 82, 41, .11);

    }

    100% {

        background:
            transparent;

    }

}


/* ============================================================
   PAGINARE
============================================================ */

.comments-pagination {

    display: grid;

    grid-template-columns:
        minmax(0, 1fr)
        auto
        minmax(0, 1fr);

    align-items: center;

    gap: 20px;

    padding: 25px 0;

    border-bottom: 5px double var(--ink);

}


.comments-pagination-prev,
.comments-pagination-next {

    display: inline-flex;
    align-items: center;

    min-height: 38px;

    color: var(--ink);

    font-size: 11px;
    font-weight: 900;

    text-decoration: none;

}


.comments-pagination-next {

    justify-content: flex-end;

}


.comments-pagination-prev:hover,
.comments-pagination-next:hover {

    text-decoration: underline;
    text-underline-offset: 4px;

}


.comments-pagination .disabled {

    opacity: .35;

    cursor: default;

}


/* ============================================================
   NUMERE PAGINARE
============================================================ */

.comments-pagination-pages {

    display: flex;
    align-items: center;
    justify-content: center;

    gap: 5px;

}


.comments-pagination-pages a,
.comments-pagination-pages > span {

    min-width: 34px;
    height: 34px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    padding: 0 6px;

    border: 1px solid transparent;

    color: var(--ink);

    font-family:
        Arial,
        Helvetica,
        sans-serif;

    font-size: 11px;
    font-weight: 800;

    text-decoration: none;

    box-sizing: border-box;

}


.comments-pagination-pages a:hover {

    border-color: var(--soft-line);

    background: var(--soft);

}


.comments-pagination-pages .active {

    border-color: var(--ink);

    background: var(--ink);

    color: var(--paper);

}


/* ============================================================
   EMPTY
============================================================ */

.comments-empty {

    padding: 52px 20px;

    border-bottom: 5px double var(--ink);

    text-align: center;

}


.comments-empty > strong {

    display: block;

    font-size: 92px;
    font-weight: 900;
    line-height: .8;

    opacity: .10;

}


.comments-empty h3 {

    margin: 20px 0 8px;

    font-size: 29px;
    line-height: 1;

}


.comments-empty p {

    margin: 0;

    color: var(--muted);

}


.comments-empty a {

    display: inline-block;

    margin-top: 14px;
    padding-bottom: 2px;

    border-bottom: 1px solid var(--ink);

    color: var(--ink);

    font-size: 12px;
    font-weight: 900;

}


/* ============================================================
   TOAST
============================================================ */

.comment-toast {

    position: fixed;

    z-index: 9999;

    left: 50%;
    bottom: 26px;

    max-width: calc(100% - 36px);

    transform: translate(-50%, 12px);

    padding: 11px 16px;

    border: 1px solid rgba(255, 255, 255, .10);

    background: var(--ink);

    color: var(--paper);

    font-family:
        Arial,
        Helvetica,
        sans-serif;

    font-size: 11px;
    font-weight: 800;

    box-shadow:
        0
        10px
        28px
        rgba(0, 0, 0, .22);

    opacity: 0;

    pointer-events: none;

    transition:
        opacity .2s ease,
        transform .2s ease;

}


.comment-toast.active {

    opacity: 1;

    transform: translate(-50%, 0);

}


/* ============================================================
   404
============================================================ */

.comments-not-found {

    padding: 60px 0;

    text-align: center;

}


.comments-not-found > strong {

    display: block;

    font-size: 110px;

    opacity: .10;

}


/* ============================================================
   TABLETĂ
============================================================ */

@media (max-width: 800px) {

    .comments-article {

        grid-template-columns:
            85px
            minmax(0, 1fr);

        gap: 20px;

    }


    .fc-comments-compose {

        padding: 23px;

    }


    .comment-replies {

        margin-left: 50px;

    }

}


/* ============================================================
   MOBILE
============================================================ */

@media (max-width: 650px) {

    .comments-breadcrumb {

        margin-top: 16px;

        font-size: 10px;

    }


    .comments-header {

        padding: 26px 0 24px;

    }


    .comments-header h1 {

        gap: 10px;

        font-size: 48px;

        letter-spacing: -1.4px;

    }


    .comments-header h1 span {

        font-size: 20px;

    }


    .comments-header p {

        margin-top: 15px;

        font-size: 14px;

    }


    /* ========================================================
       ARTICLE REFERENCE
    ======================================================== */

    .comments-article {

        grid-template-columns: 1fr;

        gap: 8px;

        padding: 24px 0;

    }


    .comments-article-number {

        font-size: 10px;

    }


    .comments-article h2 {

        font-size: 31px;

    }


    /* ========================================================
       FORMULAR
    ======================================================== */

    .fc-comments-compose {

        margin-top: 25px;

        padding: 19px 14px;

    }


    .fc-comments-compose-head {

        display: block;

        margin-bottom: 21px;
        padding-bottom: 16px;

    }


    .fc-comments-compose-head h2 {

        font-size: 31px;

    }


    .fc-comments-limit {

        display: block;

        margin-top: 9px;

        font-size: 10px;

    }


    .fc-comments-field {

        margin-bottom: 20px;

    }


    .fc-comments-field label {

        font-size: 14px;

    }


    .fc-comments-field input[type="text"] {

        height: 52px !important;
        min-height: 52px !important;

        font-size: 16px !important;

    }


    .fc-comments-field textarea {

        min-height: 185px !important;

        font-size: 16px !important;

    }


    .fc-comments-tools {

        display: grid;

        grid-template-columns: 1fr;

        gap: 9px;

    }


    .fc-comments-tools-left {

        display: grid;

        grid-template-columns:
            minmax(0, .8fr)
            minmax(0, 1.2fr);

        width: 100%;

        gap: 8px;

    }


    .fc-emoji-wrap {

        width: 100%;

    }


    .fc-emoji-toggle,
    .fc-comments-preview-button {

        width: 100%;
        min-width: 0;
        min-height: 46px;

    }


    .fc-comments-submit {

        width: 100%;

        min-width: 0;
        min-height: 50px;

        font-size: 12px;

    }


    .fc-emoji-panel {

        width: 270px;

    }


    /* ========================================================
       LIST HEADER
    ======================================================== */

    .comments-list-section {

        margin-top: 31px;

    }


    .comments-list-header {

        display: block;

    }


    .comments-list-header h2 {

        font-size: 28px;

    }


    .comments-list-header > div:last-child {

        margin-top: 8px;

    }


    /* ========================================================
       COMMENT
    ======================================================== */

    .comment-item {

        grid-template-columns:
            44px
            minmax(0, 1fr);

        gap: 11px;

        padding: 21px 0;

    }


    .comment-avatar {

        width: 42px;
        height: 42px;

        font-size: 18px;

    }


    .comment-meta {

        gap: 8px;

    }


    .comment-meta strong {

        font-size: 14px;

    }


    .comment-text {

        font-size: 14px;
        line-height: 1.7;

    }


    /* ========================================================
       REACȚII MOBILE
    ======================================================== */

    .comment-reactions {

        display: grid;

        grid-template-columns:
            minmax(0, 1.45fr)
            minmax(0, .75fr)
            minmax(0, .75fr);

        gap: 6px;

    }


    .comment-reaction-form {

        width: 100%;

    }


    .comment-reaction {

        width: 100%;

        min-width: 0;
        min-height: 36px;

        padding: 6px 8px;

        font-size: 11px;

    }


    .comment-reaction strong {

        min-width: 18px;

        padding: 0 4px;

    }


    /* ========================================================
       ACȚIUNI MOBILE
    ======================================================== */

    .comment-actions {

        gap: 4px;

    }


    .comment-action-button {

        min-height: 32px;

        padding: 4px 7px;

        font-size: 10px;

    }


    .comment-edit-time {

        min-height: 28px;

        padding: 0 6px;

        font-size: 9px;

    }


    /* ========================================================
       RĂSPUNSURI MOBILE
    ======================================================== */

    .comment-replies {

        margin-left: 20px;

        padding-left: 11px;

    }


    .comment-replies .comment-item {

        grid-template-columns:
            37px
            minmax(0, 1fr);

        gap: 9px;

    }


    .comment-replies .comment-avatar {

        width: 35px;
        height: 35px;

        font-size: 15px;

    }


    /* ========================================================
       PAGINARE MOBILE
    ======================================================== */

    .comments-pagination {

        grid-template-columns:
            1fr
            1fr;

        gap: 12px;

    }


    .comments-pagination-pages {

        grid-column:
            1
            /
            -1;

        grid-row: 1;

        flex-wrap: wrap;

    }


    .comments-pagination-prev {

        grid-column: 1;
        grid-row: 2;

    }


    .comments-pagination-next {

        grid-column: 2;
        grid-row: 2;

    }

}


/* ============================================================
   SMALL MOBILE
============================================================ */

@media (max-width: 430px) {

    .comments-header h1 {

        font-size: 44px;

    }


    .comments-article h2 {

        font-size: 29px;

    }


    .fc-comments-compose {

        padding: 17px 12px;

    }


    .fc-comments-compose-head h2 {

        font-size: 29px;

    }


    .fc-emoji-panel {

        width:
            min(
                280px,
                calc(100vw - 70px)
            );

    }


    .comment-meta {

        align-items: flex-start;

    }


    .comment-permalink {

        min-width: 31px;

        padding-left: 4px;
        padding-right: 4px;

        font-size: 12px;

    }


    .comment-reactions {

        grid-template-columns:
            minmax(0, 1.4fr)
            minmax(0, .7fr)
            minmax(0, .7fr);

    }


    .comment-reaction {

        gap: 4px;

        padding-left: 6px;
        padding-right: 6px;

    }


    .comment-action-button {

        padding-left: 5px;
        padding-right: 5px;

    }


    .comment-edit-time {

        width: 100%;

        margin-top: 1px;
        margin-left: 0;

        padding-left: 0;

        border-left: 0;

    }


    .comment-replies {

        margin-left: 12px;

        padding-left: 9px;

    }


    .comment-edit-actions {

        display: grid;

        grid-template-columns:
            1fr
            1fr;

    }


    .comment-edit-actions button {

        width: 100%;

    }

}

/* ============================================================
   BUTON DESCHIDE SURSA — MEDIA
============================================================ */

.comment-media-head a,
.comment-media-image figcaption a {

    appearance: none;
    -webkit-appearance: none;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    gap: 6px;

    min-height: 30px;

    padding: 5px 10px;

    border: 1px solid rgba(33, 27, 20, .34);
    border-radius: 999px;

    background: rgba(255, 250, 232, .32);

    color: var(--ink);

    font-family:
        Arial,
        Helvetica,
        sans-serif;

    font-size: 9px;
    font-weight: 800;
    line-height: 1;

    letter-spacing: .05em;

    text-decoration: none !important;
    text-transform: uppercase;

    white-space: nowrap;

    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .35);

    transition:
        background .18s ease,
        color .18s ease,
        border-color .18s ease,
        transform .18s ease;

}


/* ============================================================
   HOVER
============================================================ */

.comment-media-head a:hover,
.comment-media-image figcaption a:hover {

    border-color: var(--ink);

    background: var(--ink);

    color: var(--paper);

    text-decoration: none !important;

    transform: translateY(-1px);

}


/* ============================================================
   HEADER MEDIA
============================================================ */

.comment-media-head {

    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 12px;

    min-height: 43px;

    padding: 6px 8px 6px 11px;

    border: 1px solid var(--soft-line);
    border-bottom: 0;

    background:
        rgba(33, 27, 20, .035);

}


/* ============================================================
   YOUTUBE / RUMBLE LABEL
============================================================ */

.comment-media-type {

    display: inline-flex;
    align-items: center;

    min-height: 28px;

    color: var(--muted);

    font-family:
        Arial,
        Helvetica,
        sans-serif;

    font-size: 9px;
    font-weight: 900;

    line-height: 1;

    letter-spacing: 1.3px;

}


/* ============================================================
   ICONIȚĂ EXTERNĂ MAI CURATĂ
============================================================ */

.comment-media-head a::after,
.comment-media-image figcaption a::after {

    content: "↗";

    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: 16px;
    height: 16px;

    border-radius: 50%;

    background: rgba(33, 27, 20, .08);

    font-size: 10px;
    line-height: 1;

}


.comment-media-head a:hover::after,
.comment-media-image figcaption a:hover::after {

    background: rgba(255, 255, 255, .14);

}


/* ============================================================
   MOBILE
============================================================ */

@media (max-width: 650px) {

    .comment-media-head {

        min-height: 40px;

        padding:
            6px
            7px
            6px
            9px;

    }


    .comment-media-head a,
    .comment-media-image figcaption a {

        min-height: 28px;

        padding:
            4px
            8px;

        font-size: 8px;

        letter-spacing: .04em;

    }


    .comment-media-type {

        font-size: 8px;

    }

}