/* Container that Fancybox uses for your AJAX content */
.news-post-popup .fancybox__content {
    display: flex;
    flex-direction: row;
    width: 90vw;
    max-width: 1200px;
    height: 90vh; /* full visible height */
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 4px 25px rgba(0,0,0,0.3);
    overflow: hidden; /* hide global scroll */
    margin: auto;
}

/* Left side (news article) */
.popup-left {
    flex: 2;
    overflow-y: auto;
    padding: 20px;
    height: 100%;
    box-sizing: border-box;
}

/* Right side (comments) */
.popup-right {
    flex: 1;
    overflow-y: auto;
    padding: 15px;
    border-left: 1px solid #eee;
    height: 100%;
    box-sizing: border-box;
}

    /* Allow scrollbar visibility */
    .popup-left::-webkit-scrollbar,
    .popup-right::-webkit-scrollbar {
        width: 6px;
    }

    .popup-left::-webkit-scrollbar-thumb,
    .popup-right::-webkit-scrollbar-thumb {
        background: #aaa;
        border-radius: 10px;
    }

/* Responsive stacking */
@media (max-width: 768px) {
    .news-post-popup .fancybox__content {
        flex-direction: column;
        height: 90vh;
    }

    .popup-left, .popup-right {
        flex: none;
        height: 50%;
        border-left: none;
    }


/* name input */
.author-input{
    height:32px !important;
    font-size:13px;
    padding:6px 10px;
    border-radius:18px;
}

/* comment row tighter */
.comment-row{
    gap:6px;
}

/* textarea → make compact */
.comment-textarea{
    height:32px !important;
    min-height:32px !important;
    max-height:60px;
    font-size:13px;
    padding:6px 10px;
    border-radius:18px;
}

/* send button smaller */
.send-btn{
    width:32px !important;
    height:32px !important;
    font-size:14px;
}

/* reduce comment list padding */
.comments-list{
    padding:6px !important;
}


}



.news-header h2 {
    margin: 0;
    font-size: 1.5rem;
}

.image-gallery img {
    width: 100%;
    margin-bottom: 10px;
    border-radius: 8px;
}

.news-actions {
    margin-top: 15px;
    display: flex;
    gap: 1rem;
}

.like-btn, .share-btn {
    background: none;
    border: none;
    color: #007bff;
    cursor: pointer;
    font-size: 1rem;
}

#comments-list {
    max-height: 70vh;
    overflow-y: auto;
}

.comment-item {
    background: #f9f9f9;
    padding: 6px 8px;
    margin-bottom: 6px;
    border-radius: 6px;
}