@charset "UTF-8";

[id^="comments-root-"]
{
    scroll-margin-top   : 100px;
}

ul.comments-root-list,
ul.comment-children-list
{
    list-style          : none;
    margin              : 0;
    padding             : 0;
}

li.comment-item
{
    list-style          : none;
    margin              : 8px 0;
    padding             : 0;
}

.comment-item
{
    margin-bottom       : 8px;
}

.comment
{
    box-sizing          : border-box;
    padding             : 10px;
    border-radius       : 4px;
    background          : #fff;
    color               : #222;
    line-height         : 1.35;
    scroll-margin-top   : 128px;
}

.comment .comment-meta
{
    font-size           : 0.85rem;
    color               : #666;
    margin-bottom       : 6px;
    display             : flex;
    gap                 : 8px;
    align-items         : baseline;
}

.comment .comment-meta strong
{
    color               : #333;
    font-weight         : 600;
}

.comment .comment-meta .comment-date
{
    font-size           : 0.78rem;
    color               : #888;
}

.comment .comment-body
{
    margin-bottom       : 8px;
    word-wrap           : break-word;
}

.comment.framed
{
    border              : 1px solid #e0e0e0;
    background          : #ffffff;
    box-shadow          : 0 0 0 rgba(0,0,0,0);
}

.comment.flat
{
    border              : none;
    background          : transparent;
    padding-left        : 16px;
}

.comment-children
{
    margin-top          : 8px;
    padding-left        : 16px;
}

.comment .comment-actions
{
    display             : flex;
    gap                 : 12px;
    align-items         : center;
    margin-top          : 6px;
}

.comment .comment-actions .btn
{
    padding             : 0;
    font-size           : 0.875rem;
    line-height         : 1;
    color               : #0d6efd;
    background          : none;
    border              : none;
    cursor              : pointer;
}

.comment .comment-actions .btn.btn-link
{
    color               : #0d6efd;
    text-decoration     : none;
    padding             : 0;
}

.comment .comment-actions .btn[disabled]
{
    color               : #999;
    cursor              : default;
}

.comment-children-controls {
    margin-top: 8px;
    margin-left: 16px;
}

.comment-reply-form-wrapper
{
    margin-top          : 8px;
}

.comment-reply-form-wrapper form
{
    display             : block;
}
.comment-reply-form .form-group
{
    margin-bottom       : 8px;
}

.comment-reply-form textarea.form-control
{
    width               : 100%;
    min-height          : 60px;
    resize              : vertical;
    padding             : 8px;
    border              : 1px solid #ddd;
    border-radius       : 4px;
    font-family         : inherit;
}

.comment-reply-form .btn-sm
{
    padding             : 4px 8px;
    font-size           : 0.82rem;
    border-radius       : 4px;
}

.comment-reply-form .btn-primary
{
    background          : #0d6efd;
    color               : #fff;
    border              : 1px solid #0d6efd;
}

.comment-reply-form .btn-secondary
{
    background          : #f1f3f5;
    color               : #333;
    border              : 1px solid #ddd;
}

.comment-reply-to
{
    margin-bottom       : 4px;
    font-size           : 0.92em;
    color               : #0d6efd;
}

.comment-reply-to a
{
    color               : #0d6efd;
    text-decoration     : none;
}

.comment-reply-to a:hover
{
    text-decoration     : underline;
}

.comments-controls
{
    margin-top          : 14px;
}

.comments-controls .btn
{
    padding             : 6px 12px;
}

.hidden
{
    display             : none !important;
}

.loading
{
    opacity             : 0.6;
    pointer-events      : none;
}

.comment .btn:focus,
.comment-reply-form .btn:focus,
.comments-controls .btn:focus
{
    outline             : 2px solid rgba(13,110,253,0.25);
    outline-offset      : 2px;
}

.comments-root-list > .comment-item > .comment.framed
{
    margin-top          : 4px;
}

ul.comment-children-list
{
    list-style          : none;
    margin              : 0;
    padding             : 0;
}

.comment-item > .comment
{
    display             : block;
}

/* Mobile adjustments */
@media ( max-width : 600px )
{
    .comment
    {
        padding             : 8px;
    }
    .comment-children
    {
        padding-left        : 10px;
    }
    .comment .comment-actions
    {
        gap                 : 8px;
    }
    .comment .comment-meta
    {
        font-size           : 0.8rem;
    }
    .comment-reply-form .btn-sm
    {
        padding             : 6px 10px;
    }
}