.comments-area {
    font-family: Inter, sans-serif;
}


#commentform.comment-form {
    flex-wrap: nowrap;
}


#comments .comments-title {
    font-size: 20px;
    font-weight: 600;
}

.comment-form-comment__avatar {
    display: none;
}

.comments-boosting__editor-heading label {
    font-size: 14px;
    font-weight: 600;
}

.comments-boosting__counter {
    display: block;
    padding: 0 10px 8px;
    font-size: 12px;
    text-align: right;
    white-space: nowrap;
    color: #4c555e;
}

#commentform {
    gap: 12px;
}

#commentform .comment-form-comment {
    margin-bottom: 0;
}

/* Edit instruments */

#commentform #wp-comment-editor-container {
    border: 0;
    border-radius: 0;
    overflow: hidden;
    padding: 8px 10px 0;
}

#commentform #wp-comment-editor-container > .mce-tinymce {
    border: 0 !important;
}

.comments-boosting__editor-field .mce-top-part::before {
    box-shadow: none;
    -webkit-box-shadow: none;
}

.comments-boosting__editor-field .mce-top-part,
.comments-boosting__editor-field .mce-toolbar-grp,
.comments-boosting__editor-field .mce-toolbar {
    background: transparent !important;
    border: none;
}

.comments-boosting__editor-field .mce-container-body.mce-stack-layout {
    padding: 0;
}

.comments-boosting__editor-field .mce-toolbar .mce-btn-group {
    padding: 0 !important;
}

.comments-boosting__editor-field .mce-toolbar .mce-btn-group > div[id$="-body"] {
    border-bottom: 1px solid #e0e3e8 !important;
}

.comments-boosting__editor-field .mce-tinymce,
.comments-boosting__editor-field .mce-panel,
.comments-boosting__editor-field .mce-edit-area,
.comments-boosting__editor-field .mce-edit-area iframe {
    background: transparent !important;
}

/* Dark-theme (night) */
html[theme="dark"] .comments-boosting__editor-field .mce-toolbar .mce-btn:hover,
html[theme="dark"] .comments-boosting__editor-field .mce-toolbar .mce-btn:focus,
html[theme="dark"] .comments-boosting__editor-field .mce-toolbar .mce-btn.mce-active {
    background: rgba(255, 255, 255, 0.12) !important;
}

/* Fields under textarea: name and email */
#commentform .comment-fields {
    gap: 12px;
}

#commentform .comment-fields .comment-form-cookies-consent {
    margin-bottom: 0;
}

#commentform .comment-fields .comment-form-cookies-consent::before {
    display: none;
}

#commentform .comment-fields .comment-form-cookies-consent label {
    font-family: Inter, sans-serif;
    font-size: 13px;
    color: #DEDEDE99;
}

/* Button "Sent Comment" */
#commentform .comment-form-submit .btn {
    padding: 11px 18px;
    font-size: 14px;
    border-radius: 8px;
    display: block;
    width: 100% !important;
}

.comment #respond #commentform .comments-boosting__form-actions #comment-form-submit #submit {
    display: block;
    width: 100% !important;
    max-width: none !important;
}

.comments-boosting__files {
    margin-top: 0;
    min-width: 0;
    max-width: 100%;
}

.comments-boosting__files-help {
    margin: 0;
    font-size: 13px;
    color: #4c555e;
}
html[theme="dark"] .comments-boosting__files-help {
    color: #DEDEDE99;
}

/* Button "Редактировать" */
.comments-boosting__edit-toggle {
    color: #4c555e;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    font: inherit;
    line-height: inherit;

}

html[theme="dark"] .comments-boosting__edit-toggle {
    color: #DEDEDE99;
}

.comments-boosting__edit-toggle:hover,
.comments-boosting__edit-toggle:focus {
    background-color: transparent!important;
    background-image: none;
}

.comments-boosting__validation {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin: 6px 0 0;
    color: #D13333;
    font-size: 12px;
}

.comments-boosting__validation::before {
    display: inline-block;
    width: 14px;
    height: 14px;
    flex: 0 0 14px;
    background: url("../images/icon-error.svg") center / contain no-repeat;
}

/* Buttons "Отмена" and "Сохранить изменения" in edit of comment */
.comments-boosting__edit-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-block: 16px;
}

.comments-boosting__edit-actions > .comments-boosting__edit-cancel,
.comments-boosting__edit-actions > button[type="submit"] {
    flex: 1 1 180px;
    width: auto;
    min-width: 0;
    margin: 0;
}

.comments-boosting__edit-actions > .comments-boosting__edit-cancel,
.comments-boosting__form-actions #cancel-comment-reply-link {
    background-color: transparent;
    color: #494848;
    border: 1px solid #494848;
}
.comments-boosting__edit-actions > .comments-boosting__edit-cancel:hover,
.comments-boosting__form-actions #cancel-comment-reply-link:hover,
.comments-boosting__edit-actions > .comments-boosting__edit-cancel:focus,
.comments-boosting__form-actions #cancel-comment-reply-link:focus {
    background-color: #e3e3e3;
    background-image: none;
}

html[theme="dark"] .comments-boosting__edit-actions > .comments-boosting__edit-cancel,
html[theme="dark"] .comments-boosting__form-actions #cancel-comment-reply-link {
    color: #e3e3e3;
    border: 1px solid #e3e3e3;
}
html[theme="dark"] .comments-boosting__edit-actions > .comments-boosting__edit-cancel:hover,
html[theme="dark"] .comments-boosting__form-actions #cancel-comment-reply-link:hover,
html[theme="dark"] .comments-boosting__edit-actions > .comments-boosting__edit-cancel:focus,
html[theme="dark"] .comments-boosting__form-actions #cancel-comment-reply-link:focus {
    background-color: #3e3e3e;
    background-image: none;
}

#commentform #cancel-comment-reply-link {
    -webkit-transition: none;
    transition: none;
}

.comments-boosting__existing-files legend {
    display: none;
}

.comments-boosting__files input[type="file"] {
    display: none;
}

/* preview of images =========================================== */
.comments-boosting-file-preview {
    --preview-item-size: 60px;

    display: flex;
    align-items: flex-start;
    gap: 12px;
    max-width: 100%;
    /*margin: 12px 0;*/
    padding: 3px;
    overflow-x: auto;
}

.comments-boosting-file-preview[hidden] {
    display: none;
}

.comments-boosting-file-preview__list {
    display: flex;
    flex-wrap: wrap;
    flex: 0 0 auto;
    gap: 8px;
}

/* Карточка одного изображения */
.comments-boosting-file-preview__item {
    position: relative;
    flex: 0 0 var(--preview-item-size);
    width: var(--preview-item-size);
    height: var(--preview-item-size);
    box-sizing: border-box;
    overflow: hidden;
    border: 1px solid #d9dde3;
    border-radius: 12px;
    background-color: #f5f6f8;
}

/* preview img */
.comments-boosting-file-preview__image {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* delete file btn */
.comments-boosting-file-preview__remove {
    position: absolute;
    z-index: 1;
    top: 3px;
    right: 3px;

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

    width: 20px;
    min-width: 20px;
    height: 20px;
    margin: 0;
    padding: 0;

    border: 0;
    border-radius: 50%;
    background: #73777f;
    box-shadow: none;

    color: #ffffff;
    font-family: Arial, sans-serif;
    font-size: 15px;
    font-weight: 400;
    line-height: 1;

    cursor: pointer;
    appearance: none;
}

.comments-boosting-file-preview__remove:hover,
.comments-boosting-file-preview__remove:focus {
    border: 0;
    background: #555a63;
    background-image: none;
    color: #ffffff;
}

.comments-boosting-file-preview__remove:focus-visible {
    outline: 2px solid #2f72ff;
    outline-offset: 2px;
}

/* Add previe btn */
.comments-boosting-file-preview__add {
    display: flex;
    flex: 0 0 var(--preview-item-size);
    align-items: center;
    justify-content: center;

    width: var(--preview-item-size)x;
    min-width: var(--preview-item-size);
    height: var(--preview-item-size);
    margin: 0;
    padding: 0;

    border: 1px dashed #bfc5ce;
    border-radius: 12px;
    background: #f8f9fb;
    box-shadow: none;

    color: #737b87;
    font-family: Arial, sans-serif;
    font-size: 38px;
    font-weight: 300;
    line-height: 1;

    cursor: pointer;
    appearance: none;
}

.comments-boosting-file-preview__add:hover,
.comments-boosting-file-preview__add:focus {
    border-color: #2f72ff;
    background: #f1f5ff;
    background-image: none;
    color: #2f72ff;
}

.comments-boosting-file-preview__add:focus-visible {
    outline: 2px solid #2f72ff;
    outline-offset: 2px;
}

/* Respond to comment */
.comment  footer.comment-footer {
    margin-top: 6px;
}

/* Reply to comment mode */
/* Buttons "Отменить" and "Отправить комментарий" */
#commentform .comments-boosting__form-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    width: 100%;
    gap: 10px;
    margin-block: 5px 16px;
}

#commentform .comments-boosting__form-actions > .cancel-comment-reply-link {
    display: contents;
}

#commentform .comments-boosting__form-actions > .comment-form-submit #submit,
#commentform .comments-boosting__form-actions #cancel-comment-reply-link {
    flex: 1 1 180px;
    width: auto;
    margin: 0;
    min-width: 0;
    align-items: center;
    justify-content: center;
    padding: 11px 18px;
    border-radius: .25rem;
    font-size: 14px;
    text-decoration: none;
    box-sizing: border-box;
    line-height: 100%;
    display: inline-flex;
}

#commentform .comments-boosting__form-actions #cancel-comment-reply-link {
    position: static;
}

#commentform .comments-boosting__form-actions > .comment-form-submit #submit {
    min-width: 0;
    box-sizing: border-box;
    border: 1px solid #3276ff;
}
#commentform .comments-boosting__form-actions > .comment-form-submit #submit:hover,
#commentform .comments-boosting__form-actions > .comment-form-submit #submit:focus {
    border-color: #205cd3;
}

#commentform .comments-boosting__form-actions > .comment-form-submit,
#commentform .comments-boosting__form-actions #cancel-comment-reply-link {
    flex: 1 1 180px;
    min-width: 0;
    margin: 0;
}

#commentform .comments-boosting__form-actions > .comment-form-submit #submit {
    width: 100% !important;
}

html[theme="dark"] .comments-boosting__editor-field .mce-toolbar .mce-btn .mce-ico {
    color: #e3e3e3!important;
}

/* Tooltip with data of last changes in mobile */
.comment-header .comment-header__author,
.comment-header .comment-header__author-name {
    overflow: visible !important;
}

.comment-header__author-name .comments-boosting__edited {
    position: relative;
    z-index: 10;
    display: inline-flex;
    align-items: center;
    overflow: visible;
    font-size: 11px;
}

.comment-header__author-name .comments-boosting__edited:focus-visible {
    outline: 2px solid #2f72ff;
    outline-offset: 2px;
    border-radius: 2px;
}

.comment-header__author-name .comments-boosting__edited::after {
    all: initial;

    content: attr(data-tooltip);
    display: block;

    position: absolute;
    z-index: 10000;
    top: calc(100% + 6px);
    right: auto;
    bottom: auto;
    left: 0;

    box-sizing: border-box;
    width: max-content;
    max-width: calc(100vw - 32px);
    padding: 5px 8px;

    border: 1px solid #767676;
    border-radius: 6px;
    background: #ffffff;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);

    color: #222222;
    font-family: Inter, Arial, sans-serif;
    font-size: 12px;
    font-weight: 400;
    line-height: 16px;
    text-align: left;
    white-space: nowrap;

    opacity: 0;
    visibility: hidden;
    pointer-events: none;

    transform: translateY(-2px);
    transition:
            opacity 80ms ease,
            transform 80ms ease,
            visibility 0s linear 80ms;
}

.comment-header__author-name .comments-boosting__edited:hover::after,
.comment-header__author-name .comments-boosting__edited:focus::after {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    transition-delay: 0s;
}

/* Modal with files gallery */
body.comments-boosting-modal-open {
    overflow: hidden;
}

.comments-boosting-modal[hidden] {
    display: none;
}

.comments-boosting-modal {
    position: fixed;
    inset: 0;
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px 80px;
    background: rgba(0, 0, 0, 0.85);
}

.comments-boosting-modal__content {
    position: relative;
    display: flex;
    width: fit-content;
    height: fit-content;
    max-width: 100%;
    max-height: calc(100vh - 80px);
}

.comments-boosting-modal__image {
    display: block;
    max-width: 100%;
    max-height: calc(100vh - 80px);
    object-fit: contain;
    border-radius: 6px;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.6);
    user-select: none;
}

.comments-boosting-modal__close,
.comments-boosting-modal__navigation {
    position: absolute;
    padding: 0;
    border: 0;
    color: #fff;
    background: rgba(0, 0, 0, 0.45);
    cursor: pointer;
}

.comments-boosting-modal__close:hover,
.comments-boosting-modal__navigation:hover {
    background: rgba(50, 118, 255, 0.85);
}

.comments-boosting-modal__close:focus-visible,
.comments-boosting-modal__navigation:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 2px;
}

.comments-boosting-modal__close {
    top: 0;
    right: -56px;
    width: 44px;
    height: 44px;
    min-width: 0;
    padding: 0;
    border-radius: 50%;
    box-sizing: border-box;
    font-size: 0;
    line-height: 0;
}
.comments-boosting-modal__close::before,
.comments-boosting-modal__close::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 18px;
    height: 2px;
    border-radius: 2px;
    background: currentColor;
    transform-origin: center;
}

.comments-boosting-modal__close::before {
    transform: translate(-50%, -50%) rotate(45deg);
}

.comments-boosting-modal__close::after {
    transform: translate(-50%, -50%) rotate(-45deg);
}

.comments-boosting-modal__navigation {
    width: 48px;
    height: 64px;
    min-width: 0;
    padding: 0;
    box-sizing: border-box;
    font-size: 0;
    line-height: 0;
}

.comments-boosting-modal__navigation::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 14px;
    height: 14px;
    border-top: 3px solid currentColor;
    border-right: 3px solid currentColor;
}

.comments-boosting-modal__next::before {
    transform: translate(-65%, -50%) rotate(45deg);
}

.comments-boosting-modal__previous::before {
    transform: translate(-35%, -50%) rotate(-135deg);
}

.comments-boosting-modal__previous {
    left: 20px;
}

.comments-boosting-modal__next {
    right: 20px;
}

/*==========================================================*/

.comment-form-comment {
    position: relative;
}

#cancel-comment-reply-link {
    position: relative;
    z-index: 1;
}

.comments-boosting__editor-field {
    min-width: 0;
    max-width: 100%;
}

.comment-form-comment > .comments-boosting__editor-field {
    flex: 1 1 0;
    align-self: flex-start;
    width: 0;
}

.comments-boosting__editor-field .wp-editor-wrap,
.comments-boosting__editor-field .wp-editor-container,
.comments-boosting__editor-field .mce-tinymce {
    width: 100% !important;
}

.comments-boosting__editor-heading {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 6px;
}

.comments-boosting__editor-box {
    overflow: hidden;
    border: 1px solid #e0e3e8;
    border-radius: 10px;
}

.comments-boosting__editor-box .wp-editor-container {
    border: 0;
}

.comments-boosting__editor-field .comments-boosting__editor-box textarea {
    display: block;
    box-sizing: border-box;
    width: 100%;
    margin: 0;
    border: 0;
    border-radius: 0;
}


.comments-boosting__counter.is-over-limit {
    color: #e53935;
}

.comments-boosting__comment-tools {
    display: inline-flex;
    align-items: center;
    margin-left: 12px;
}

.comments-boosting__edited-icon {
    margin-right: 3px;
}

.comments-boosting__edit-toggle,
.comments-boosting__edit-cancel {
    cursor: pointer;
}

.comments-boosting__edit-form {
    margin-top: 12px;
}

.comments-boosting__edit-form .wp-editor-wrap,
.comments-boosting__edit-form .wp-editor-container,
.comments-boosting__edit-form .mce-tinymce {
    width: 100% !important;
}

.comments-boosting__existing-files {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: 16px 0 0;
    padding: 0;
    border: 0;
}

.comments-boosting__existing-files legend {
    width: 100%;
    margin-bottom: 6px;
}

.comments-boosting__existing-file {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 0;
}

.comments-boosting__existing-file img {
    width: 40px;
    height: 40px;
    object-fit: cover;
    border-radius: 6px;
}

.comments-boosting__gallery {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 10px;
}

.comments-boosting__image-link {
    display: block;
    width: 100px;
    height: 100px;
    overflow: hidden;
    border-radius: 6px;
}

.comments-boosting__image-link img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    color: #b5b5b5;
}

/*==============================================================*/
@media (max-width: 600px) {
    .comments-boosting-modal__navigation {
        width: 30px;
        height: 40px;
    }

    .comments-boosting-modal__navigation::before {
        width: 8px;
        height: 8px;
    }
}