/* =========================================================
   ENGAGE V5.2
   ========================================================= */

:root{
    --engage-accent:#7aa2ff;
    --engage-accent-hover:#98b7ff;
}

.engage-wrap{
    margin-top:40px;
}

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

.engage-header{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:20px;
    margin-bottom:28px;
}

.engage-title{
    margin:0;
    color:#fff;
    font-size:44px;
    line-height:1.1;
}

.engage-sort{
    min-width:220px;
    height:48px;
    padding:0 16px;
    border-radius:16px;
    background:#1c2128;
    color:#fff;
    font-weight:600;
    border:1px solid rgba(255,255,255,.06);
}

.engage-sort:focus{
    outline:none;
    border-color:var(--engage-accent);
}

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

.engage-comment{
    display:flex;
    gap:20px;
    margin-bottom:22px;
    padding:24px;
    border-radius:30px;
    background:#171b20;
    border:1px solid rgba(255,255,255,.06);
    box-shadow:
        0 10px 30px rgba(0,0,0,.22),
        inset 0 1px 0 rgba(255,255,255,.02);
}

.engage-avatar{
    flex-shrink:0;
}

.engage-avatar img{
    width:64px;
    height:64px;
    border-radius:50%;
    object-fit:cover;
    border:2px solid rgba(255,255,255,.06);
}

.engage-body{
    flex:1;
    min-width:0;
}

/* =========================================================
   TOP BAR
   ========================================================= */

.engage-top{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:20px;
    margin-bottom:16px;
}

.engage-author{
    display:flex;
    align-items:center;
    flex-wrap:wrap;
    gap:10px;
    min-width:0;
    flex:1;
}

.engage-author strong{
    color:#fff;
    font-size:17px;
    font-weight:700;
}

.engage-author-link{
    text-decoration:none;
}

.engage-time{
    color:#9098a2;
    font-size:14px;
}

.engage-crew{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-height:24px;
    padding:0 10px;
    border-radius:999px;
    background:rgba(122,162,255,.14);
    color:#a8c5ff;
    font-size:12px;
    font-weight:700;
    letter-spacing:.08em;
    text-transform:uppercase;
}

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

.engage-content{
    color:#d5dae0;
    line-height:1.9;
    font-size:15px;
}

.engage-content p:last-child{
    margin-bottom:0;
}

/* =========================================================
   TOP RIGHT ACTIONS
   ========================================================= */

.engage-actions{
    display:flex;
    align-items:center;
    justify-content:flex-end;
    gap:8px;
    flex-shrink:0;
    margin:0;
}

.engage-actions button{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    height:38px;
    padding:0 14px;
    border:none;
    border-radius:999px;
    background:#232932;
    color:#dce2ea;
    font-size:13px;
    font-weight:600;
    line-height:1;
    cursor:pointer;
    transition:
        background .2s ease,
        transform .2s ease,
        color .2s ease;
}

.engage-actions button i{
    font-size:13px;
}

.engage-actions button:hover{
    background:#2d3440;
    color:#fff;
    transform:translateY(-1px);
}

.engage-actions{
    display:flex;
    align-items:center;
    gap:8px;
    flex-wrap:wrap;
}

.engage-admin-action{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:6px;
    height:34px;
    min-width:34px;
    padding:0 12px;
    border:none;
    border-radius:999px;
    background:rgba(255,255,255,0.04);
    color:#bdbdbd;
    text-decoration:none;
    font-size:13px;
    line-height:1;
    cursor:pointer;
    transition:all 0.2s ease;
}

.engage-admin-action i{
    font-size:13px;
    line-height:1;
}

.engage-admin-action:hover{
    background:rgba(255,255,255,0.08);
    color:#fff;
}

.engage-edit:hover{
    color:#7aa2ff;
}

.engage-delete:hover{
    color:#ff6b6b;
}

/* =========================================================
   LIKE BUTTON
   ========================================================= */

.engage-heart.active{
    background:#311f27;
    color:#ffbfd0;
}

.engage-heart.active i{
    color:#ff6b97;
}

/* =========================================================
   REPLY BUTTON
   ========================================================= */

.engage-reply-toggle{
    background:#1f2a38 !important;
    color:#b7d1ff !important;
}

.engage-reply-toggle:hover{
    background:#2a3950 !important;
    color:#dbe7ff !important;
}

/* =========================================================
   FLAG BUTTON
   ========================================================= */

.engage-flag{
    color:#c6ccd5;
}

.engage-flag.flagged{
    opacity:.45;
    pointer-events:none;
}

/* =========================================================
   CHILD COMMENTS
   ========================================================= */

.engage-children{
    margin-top:22px;
    padding-left:30px;
    border-left:1px solid rgba(255,255,255,.06);
}

.depth-1,
.depth-2,
.depth-3{
    margin-top:18px;
}

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

.engage-form-wrap{
    margin-top:40px;
    padding:34px;
    border-radius:32px;
    background:#171b20;
    border:1px solid rgba(255,255,255,.06);
    box-shadow:
        0 10px 30px rgba(0,0,0,.22),
        inset 0 1px 0 rgba(255,255,255,.02);
}

.engage-form-wrap h3,
.comment-reply-title{
    margin:0 0 18px;
    color:#fff;
    font-size:34px;
    line-height:1.2;
    font-weight:800;
}

.comment-reply-title span{
    color:#9bb8ff;
}

.comment-reply-title small{
    margin-left:12px;
}

.comment-reply-title a{
    color:#9bb8ff;
    font-size:14px;
    text-decoration:none;
    font-weight:600;
}

.comment-reply-title a:hover{
    color:#c4d6ff;
}

/* =========================================================
   HIDE CANCEL REPLY BY DEFAULT
   ========================================================= */

#cancel-comment-reply-link[hidden]{
    display:none !important;
}

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

.comment-form,
.engage-form,
.engage-inline-form{
    display:block;
    width:100%;
}

.comment-notes{
    margin:0 0 22px;
    color:#a5afba;
    font-size:14px;
    line-height:1.7;
}

/* =========================================================
   INPUTS
   ========================================================= */

.comment-form-author,
.comment-form-email{
    margin:0 0 18px;
}

.comment-form-author label,
.comment-form-email label{
    display:block;
    margin-bottom:10px;
    color:#d7dde5;
    font-size:14px;
    font-weight:600;
}

.comment-form input[type="text"],
.comment-form input[type="email"]{
    width:100%;
    height:54px;
    padding:0 18px;
    border-radius:18px;
    background:#1d2229;
    border:1px solid #2d333c;
    color:#fff;
    font-size:15px;
    transition:.2s ease;
    box-sizing:border-box;
}

.comment-form input::placeholder{
    color:#7d8794;
}

.comment-form input:focus{
    outline:none;
    border-color:var(--engage-accent);
    box-shadow:0 0 0 4px rgba(122,162,255,.08);
}

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

.engage-comment-field,
.comment-form-comment{
    display:block;
    width:100%;
    margin:0 0 20px;
}

.engage-comment-field textarea,
.comment-form textarea,
.engage-form textarea,
.engage-inline-form textarea,
textarea#comment{
    display:block !important;
    width:100% !important;
    min-width:100%;
    max-width:100%;
    min-height:180px !important;
    padding:22px !important;
    border-radius:24px;
    background:#1d2229 !important;
    border:1px solid #2d333c !important;
    color:#fff !important;
    font-size:15px;
    line-height:1.7;
    resize:vertical;
    box-sizing:border-box;
    appearance:none;
    -webkit-appearance:none;
    opacity:1 !important;
    visibility:visible !important;
}

.engage-comment-field textarea::placeholder,
.comment-form textarea::placeholder,
.engage-form textarea::placeholder,
.engage-inline-form textarea::placeholder{
    color:#7d8794;
}

.engage-comment-field textarea:focus,
.comment-form textarea:focus,
.engage-form textarea:focus,
.engage-inline-form textarea:focus,
textarea#comment:focus{
    outline:none;
    border-color:var(--engage-accent) !important;
    box-shadow:0 0 0 4px rgba(122,162,255,.08);
}

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

.comment-form .form-submit{
    margin:0;
}

.comment-form .submit,
.engage-submit{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:10px;
    width:100%;
    min-height:54px;
    padding:0 28px;
    border:none;
    border-radius:999px;
    background:linear-gradient(
        135deg,
        var(--engage-accent),
        #8aa8ff
    );
    color:#fff;
    font-weight:700;
    font-size:15px;
    cursor:pointer;
    transition:.22s ease;
    box-shadow:0 10px 24px rgba(122,162,255,.18);
}

.comment-form .submit:hover,
.engage-submit:hover{
    background:linear-gradient(
        135deg,
        var(--engage-accent-hover),
        #a6c0ff
    );
    transform:translateY(-2px);
    box-shadow:0 14px 30px rgba(122,162,255,.24);
}

/* =========================================================
   INLINE BOTTOM
   ========================================================= */

.engage-inline-bottom{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:20px;
    margin-top:18px;
}

.engage-cancel-reply{
    display:inline-flex;
    align-items:center;
    gap:8px;
    color:#9ea7b2;
    font-size:14px;
    font-weight:600;
    text-decoration:none;
    transition:.2s ease;
}

.engage-cancel-reply:hover{
    color:#fff;
}

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

.engage-empty{
    padding:30px;
    border-radius:28px;
    background:#171b20;
    border:1px solid rgba(255,255,255,.06);
    text-align:center;
}

.engage-empty p{
    margin:0;
    color:#b8c0ca;
}

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

@media(max-width:700px){

    .engage-header{
        flex-direction:column;
        align-items:flex-start;
    }

    .engage-title{
        font-size:34px;
    }

    .engage-comment{
        flex-direction:column;
        padding:20px;
        border-radius:24px;
    }

    .engage-top{
        flex-direction:column;
        align-items:flex-start;
        gap:14px;
    }

    .engage-actions{
        width:100%;
        justify-content:flex-start;
        flex-wrap:wrap;
    }

    .engage-actions button{
        flex:1 1 auto;
        min-width:0;
        padding:0 14px;
    }

    .engage-children{
        padding-left:18px;
    }

    .engage-form-wrap{
        padding:22px;
        border-radius:24px;
    }

    .engage-form-wrap h3,
    .comment-reply-title{
        font-size:28px;
    }

    .engage-inline-bottom{
        flex-direction:column;
        align-items:flex-start;
    }

}