/* ===========================
   MODERN COMMENTS v1
   =========================== */

.comments{
    margin:35px 0;
}

/* ===========================
   Karta komentarza
   =========================== */

.comment-card{
    display:flex;
    align-items:flex-start;
    gap:18px;
    background:#fff;
    border:1px solid #cfd6df;
    border-radius:14px;
    padding:22px;
    margin-bottom:8px;
    box-shadow:
        0 0 0 1px rgba(255,255,255,.8),
        0 2px 8px rgba(0,0,0,.05),
        0 1px 3px rgba(0,0,0,.08);
    transition:
        border-color .2s ease,
        box-shadow .2s ease,
        transform .2s ease;
}

.comment-card:hover{
    border-color:#b7c2cf;
    box-shadow:
        0 12px 30px rgba(0,0,0,.16),
        0 4px 10px rgba(0,0,0,.08);
    transform:translateY(-2px);
}

/* ===========================
   Avatar
   =========================== */

.comment-avatar{
    width:42px;
    min-width:42px;
    height:42px;
    border-radius:50%;
    overflow:hidden;
    display:flex;
    align-items:center;
    justify-content:center;
    background:#2f80ed;
    color:#fff;
    font-size:24px;
    font-weight:bold;
}

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

/* ===========================
   Treść
   =========================== */

.comment-content{
    flex:1;
}

.comment-header{
    display:flex;
    justify-content:space-between;
    align-items:flex-start;
    margin-bottom:6px;
}

.comment-author{
    font-size:16px;
    font-weight:700;
    line-height:1.2;
    color:#1d3f91;
}

.comment-date{
    font-size:12px;
    color:#999;
    font-weight:400;
}

.comment-text{
    margin:0 0 16px;
    font-size:15px;
    line-height:22px;
    color:#1f1f1f;
    overflow-wrap:anywhere;
    word-break:break-word;
}

/* ===========================
   Zwijanie długich komentarzy
   =========================== */

.comment-text.collapsed{
    max-height:110px;
    overflow:hidden;
    position:relative;
}

.comment-more{
    display:block;
    margin-top:10px;
    font-size:13px;
    font-weight:600;
    color:#1976d2;
    cursor:pointer;
    user-select:none;
}

.comment-more:hover{
    text-decoration:underline;
}

/* ===========================
   Stopka
   =========================== */

.comment-footer{
    display:flex;
    justify-content:space-between;
    align-items:center;
    margin-top:16px;
    padding-top:12px;
    border-top:1px solid #d1d5db;
    font-size:14px;
}

.comment-reactions{
    display:flex;
    gap:10px;
}

.comment-reactions span{
    cursor:pointer;
    user-select:none;
}

.comment-actions{
    display:flex;
    align-items:center;
    gap:18px;
}

.comment-report{
    color:#888;
    text-decoration:none;
    font-size:14px;
}

.comment-report:hover{
    color:#d32f2f;
}

.comment-reply{
    color:#1976d2;
    text-decoration:none;
    font-weight:600;
    cursor:pointer;
}

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

/* ===========================
   Odpowiedzi
   =========================== */

.comment-children{
    margin-top:4px;
    margin-left:40px;
    padding-left:14px;
    border-left:2px solid #e5e5e5;
}

.comment-show-more{
    display:inline-block;
    margin-top:10px;
    color:#1976d2;
    font-weight:600;
    cursor:pointer;
}

.comment-show-more:hover{
    text-decoration:underline;
}

/* ===========================
   Przyciski reakcji
   =========================== */

.reaction-btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    padding:4px;
    border-radius:8px;
    font-size:20px;
    cursor:pointer;
    transition:.15s;
}

.reaction-btn:hover{
    background:#f5f8fc;
    transform:scale(1.08);
}

/* ===========================
   Mobile
   =========================== */

@media (max-width:768px){

    .comment-card{
        padding:16px;
        gap:14px;
    }

    .comment-avatar{
        width:46px;
        min-width:46px;
        height:46px;
    }

    .comment-author{
        font-size:16px;
    }

    .comment-footer{
        flex-wrap:wrap;
        gap:10px;
    }

    .reply-card{
        margin-bottom:6px;
    }

    .comment-children .comment-card{
        margin-left:-26px;
    }

}

.comment-image{
    margin:14px 0;
}

.comment-image img{
    display:block;
    max-width:100%;
    max-height:500px;
    border:1px solid #d9d9d9;
    border-radius:10px;
    cursor:pointer;
}
/* ===== FORMULARZ ===== */

#commentForm{
    display:flex;
    flex-direction:column;
    gap:8px;
}

.cf-title{
    font-size:18px;
    font-weight:600;
    color:#1f2937;
    margin:0 0 6px;
}

.cf-input,
.cf-textarea{
    width:100%;
    border:1px solid #cfd8e3;
    border-radius:10px;
    padding:14px 16px;
    font-size:16px;
    font-family:inherit;
    box-sizing:border-box;
    outline:none;
    transition:.2s;
    background:#fafbfc;
}

.cf-input:focus,
.cf-textarea:focus{
    border-color:#1877f2;
    box-shadow:0 0 0 3px rgba(24,119,242,.12);
}

.cf-textarea{
    min-height:120px;
    resize:none;
}

.cf-toolbar{
    display:flex;
    justify-content:space-between;
    align-items:center;
    margin-top:4px;
    padding-top:10px;
    border-top:1px solid #eceff3;
}

.cf-toolbar > :first-child{
    display:flex;
    align-items:center;
    gap:6px;
}
.cf-right{
    display:flex;
    align-items:center;
    gap:12px;
}

.cf-tool{
    width:34px;
    height:34px;
    border:none;
    border-radius:8px;
    background:transparent;
    display:flex;
    align-items:center;
    justify-content:center;
    cursor:pointer;
    transition:.2s;
    font-size:18px;
    color:#666;
}

.cf-tool:hover{
    background:#eef2f6;
}

.cf-submit{
    background:#1877f2;
    color:#fff;
    border:none;
    border-radius:8px;
    padding:10px 24px;
    font-size:15px;
    font-weight:600;
    cursor:pointer;
    transition:.2s;
}

.cf-submit:hover{
    background:#1668d4;
}

.cf-info{
    font-size:13px;
    color:#777;
    line-height:1.5;
}

#captchaContainer{
    display:flex;
    align-items:center;
    margin-right:10px;
}
#tinyForm{
    background:#fff;
    border:1px solid #dfe3e8;
    border-radius:16px;
    padding:20px 22px;
    margin-bottom:18px;
}
#tinyForm{
    background:#ffffff;
    border:1px solid #d6dde8;
    border-radius:16px;
    padding:20px 22px;
    margin-bottom:18px;
    box-shadow:
        0 1px 2px rgba(0,0,0,.06),
        0 4px 12px rgba(0,0,0,.05);
    transition:.2s;
}

#tinyForm:hover{
    border-color:#1877f2;
    box-shadow:
        0 2px 6px rgba(24,119,242,.12),
        0 10px 26px rgba(24,119,242,.16);
}
.cf-tools{
    display:flex;
    align-items:center;
    gap:6px;
}
.cf-icon{
    width:22px;
    height:22px;
    fill:none;
    stroke:#5f6b7a;
    stroke-width:1.8;
    stroke-linecap:round;
    stroke-linejoin:round;
}

.gif-btn text{
    fill:#5f6b7a;
    stroke:none;
}

.cf-tool:hover .cf-icon{
    stroke:#1877f2;
}

.gif-btn:hover text{
    fill:#1877f2;
}
#captchaContainer{
    margin-right:10px;
}

.reply-info{
    display:none;
    align-items:center;
    justify-content:space-between;
    margin:12px 0;
    padding:10px 14px;
    background:#eef6ff;
    border:1px solid #c7dcff;
    border-radius:8px;
    font-size:14px;
}

.reply-info button{
    background:#f97316;
    color:#fff;
    border:0;
    border-radius:6px;
    padding:6px 12px;
    cursor:pointer;
    font-size:13px;
    transition:.2s;
}

.reply-info button:hover{
    background:#ea580c;
}
.cf-submit.reply-mode{
    background:#f97316;
}

.cf-submit.reply-mode:hover{
    background:#ea580c;
}
.emoji-picker{
    position:fixed;
    left:40px;
    top:180px;
    width:360px;
    height:260px;
    background:#ffffff;
    border:1px solid #cccccc;
    border-radius:10px;
    padding:10px;
    overflow:auto;
    z-index:999999999;
    box-shadow:0 0 20px rgba(0,0,0,.3);
}

.emoji-picker span{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:36px;
    height:36px;
    cursor:pointer;
    font-size:24px;
    border-radius:6px;
    transition:.15s;
}

.emoji-picker span:hover{
    background:#f1f5f9;
}
.emoji-picker {
    border-radius: 10px;
}
.comment-modal{
    position:fixed;
    inset:0;
    display:none;
    align-items:center;
    justify-content:center;
    background:rgba(0,0,0,.45);
    z-index:99999;
}

.comment-modal-window{
    width:420px;
    max-width:90%;
    background:#fff;
    border-radius:10px;
    box-shadow:0 10px 35px rgba(0,0,0,.35);
    padding:28px;
    text-align:center;
}

.comment-modal-message{
    font-size:17px;
    line-height:1.6;
    margin-bottom:24px;
}

.comment-modal-buttons{
    text-align:center;
}

#commentModalOk{
    min-width:110px;
    padding:10px 26px;
    border:none;
    border-radius:6px;
    background:#1d4ed8;
    color:#fff;
    font-size:15px;
    cursor:pointer;
}

#commentModalOk:hover{
    background:#1e40af;
}
.comment-edit-textarea {
    width: 100%;
    min-height: 110px;
    box-sizing: border-box;
    resize: vertical;
}
#commentReportForm{
    display:flex;
    flex-direction:column;
    gap:14px;
    margin-top:15px;
}

#commentReportForm label{
    display:flex;
    align-items:center;
    gap:10px;
    width:260px;
    min-height:30px;
    cursor:pointer;
    font-size:16px;
}

#commentReportForm input[type=radio]{
    margin:0;
}

#reportDetails{
    width:100%;
    min-height:100px;
    padding:10px;
    border:1px solid #cfcfcf;
    border-radius:6px;
    resize:vertical;
    font-size:14px;
    box-sizing:border-box;
}
#commentToast{
    position:fixed;
    right:24px;
    bottom:24px;
   background: rgba(60,60,60,.55);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    color:#fff;
    padding:14px 18px;
    border-radius:12px;
    box-shadow:0 12px 35px rgba(0,0,0,.25);
    font-size:14px;
    z-index:99999;

    opacity:0;
    transform:translateY(20px);

    transition:.25s;
    pointer-events:none;
}

#commentToast.show{
    opacity:1;
    transform:translateY(0);
}
.comments-sort{
    display:flex;
    justify-content:center;
    gap:16px;
    margin:22px 0 24px;
}

.comments-sort-btn{
    min-width:160px;
    height:30px;

    border:1px solid #cfd7e6;
    border-radius:10px;

    background:#fff;
    color:#4b5563;

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

    cursor:pointer;

    transition:.2s;
}

.comments-sort-btn:hover{
    background:#f5f8fc;
}

.comments-sort-btn.active{
    background:#1877f2;
    border-color:#1877f2;
    color:#fff;
}
/* =========================================================
   MOBILE — KOMENTARZE
   DODANE BEZ ZMIANY ISTNIEJĄCYCH KLAS
   ========================================================= */

@media (max-width:768px){

    .comments{
        margin:20px 0;
        width:100%;
        box-sizing:border-box;
    }

    .comment-header{
        gap:8px;
        flex-wrap:wrap;
    }

    .comment-date{
        margin-left:auto;
    }

    .comment-actions{
        gap:10px;
        flex-wrap:wrap;
    }

    .comment-footer{
        width:100%;
        box-sizing:border-box;
    }

    .comment-reactions{
        gap:6px;
    }

    .comment-children{
        margin-left:20px;
        padding-left:10px;
    }

    .comment-text{
        font-size:15px;
        line-height:21px;
    }

    #commentForm{
        width:100%;
        box-sizing:border-box;
    }

    #tinyForm{
        width:100%;
        box-sizing:border-box;
        padding:15px;
    }

    .cf-toolbar{
        flex-wrap:wrap;
        gap:10px;
    }

    .cf-right{
        flex-wrap:wrap;
        gap:8px;
    }

    .cf-submit{
        min-height:42px;
        padding:10px 18px;
    }

    #captchaContainer{
        max-width:100%;
        margin-right:0;
        overflow:hidden;
    }

    .emoji-picker{
        left:10px;
        right:10px;
        top:auto;
        bottom:10px;
        width:auto;
        max-width:none;
        height:250px;
        box-sizing:border-box;
    }

    .comment-modal-window{
        width:calc(100% - 30px);
        max-width:none;
        box-sizing:border-box;
        padding:22px 18px;
    }

    .comment-modal-message{
        font-size:16px;
    }

    #commentReportForm label{
        width:100%;
        box-sizing:border-box;
    }

    #commentToast{
        left:15px;
        right:15px;
        bottom:15px;
        text-align:center;
        box-sizing:border-box;
    }

    .comments-sort{
        width:100%;
        gap:8px;
        flex-wrap:wrap;
    }

    .comments-sort-btn{
        min-width:0;
        flex:1;
        width:100%;
        max-width:220px;
    }

}