/* --- Flexi Recent Comments Styles v1.5.2.3 --- */

/* Reset box model untuk semua elemen plugin */
.flexicomments_list,
.flexicomments_list * {
    box-sizing: border-box;
}

/* Daftar utama - hapus bullet dan padding dengan specificity tinggi */
ul.flexicomments_list,
ul.flexicomments_list.flexicomments_list {
    list-style-type: none;
    list-style: none;
    list-style-image: none;
    padding-left: 0;
    padding-right: 0;
    margin: 0 0 1.5em 0;
}

/* Ensure no bullets pada list items - override tema agresif */
ul.flexicomments_list > li,
ul.flexicomments_list > li.flexicomments_item,
ul.flexicomments_list li::before,
ul.flexicomments_list li::after {
    list-style-type: none;
    list-style: none;
    list-style-image: none;
}

/* CRITICAL: Remove ::marker pseudo-element untuk Chrome/modern browsers */
ul.flexicomments_list > li::marker,
ul.flexicomments_list > li.flexicomments_item::marker {
    content: none;
    display: none;
    font-size: 0;
    color: transparent;
}

/* Remove pseudo-elements yang mungkin ditambahkan tema */
ul.flexicomments_list li::before,
ul.flexicomments_list li::after {
    content: none;
    display: none;
}

/* Item komentar - layout flexbox dengan specificity tinggi */
ul.flexicomments_list > li,
ul.flexicomments_list > li.flexicomments_item {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    margin-bottom: 15px;
    margin-top: 0;
    margin-left: 0;
    margin-right: 0;
    padding-bottom: 15px;
    padding-top: 0;
    padding-left: 0;
    padding-right: 0;
    border-bottom: 1px solid #eee;
    border-left: none;
    border-right: none;
    border-top: none;
    background: none;
    background-image: none;
    list-style-type: none;
    list-style: none;
    list-style-position: outside;
}

/* Hapus border untuk item terakhir */
ul.flexicomments_list > li:last-child,
ul.flexicomments_list > li.flexicomments_item:last-child {
    margin-bottom: 0;
    padding-bottom: 0;
    border-bottom: none;
}

/* Wrapper avatar - tetap berukuran tetap */
.flexicomments_avatar_wrapper {
    flex-shrink: 0;
    margin-right: 12px;
    margin-left: 0;
    margin-top: 0;
    margin-bottom: 0;
    line-height: 0; /* Hapus spasi ekstra */
}

/* Gambar avatar */
.flexicomments_avatar,
img.flexicomments_avatar {
    display: block;
    border-radius: 3px;
    max-width: 100%;
    height: auto;
    margin: 0;
    padding: 0;
    vertical-align: top;
}

/* Wrapper konten - mengisi sisa ruang */
.flexicomments_content_wrapper {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    min-width: 0; /* Fix overflow issue */
    gap: 3px;
}

/* Individual elements */
.flexicomments_author,
.flexicomments_meta {
    line-height: 1;
    margin: 0;
    padding: 0;
}
.flexicomments_content {
    line-height: 1.5;
    margin: 0;
    padding: 0;
}

/* Author section */
.flexicomments_author {
    font-size: 1em;
	font-weight: 700;
}

.flexicomments_author a {
    font-weight: 700;
    color: #D50000;
    text-decoration: none;
    transition: color 0.2s ease, text-decoration 0.2s ease;
}

.flexicomments_author a:hover,
.flexicomments_author a:focus {
    color: #263238;
    text-decoration: underline;
}

/* Improved focus state untuk accessibility */
.flexicomments_author a:focus,
.flexicomments_meta a:focus {
    outline: 2px solid #D50000;
    outline-offset: 2px;
}

/* Meta info container */
.flexicomments_meta {
    font-size: 0.85em;
    color: #777;
    margin-bottom: 5px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

/* Meta links */
.flexicomments_meta a {
    color: #555;
    text-decoration: none;
    transition: color 0.2s ease, text-decoration 0.2s ease;
}

.flexicomments_meta a:hover,
.flexicomments_meta a:focus {
    color: #D50000;
    text-decoration: underline;
}

/* Separator styling */
.flexicomments_separator {
    color: #ccc;
    user-select: none;
    font-weight: normal;
}

/* Individual meta elements */
.flexicomments_date,
.flexicomments_post_title {
    display: inline;
    margin: 0;
    padding: 0;
}

/* Comment content */
.flexicomments_content {
    word-wrap: break-word;
    overflow-wrap: break-word;
    word-break: break-word;
    font-size: 1em;
    margin-top: 5px;
    color: #333;
}

/* Empty state message */
.flexicomments_empty {
    color: #777;
    font-style: italic;
    margin: 1em 0;
    padding: 1em;
    text-align: center;
    background: #f9f9f9;
    border: 1px dashed #ddd;
    border-radius: 4px;
}

/* Responsive: Stack vertically on small screens */
@media (max-width: 480px) {
    ul.flexicomments_list > li,
    ul.flexicomments_list > li.flexicomments_item {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }
    
    .flexicomments_avatar_wrapper {
        margin-right: 0;
        margin-bottom: 10px;
    }
    
    .flexicomments_content_wrapper {
        align-items: center;
        width: 100%;
    }
    
    .flexicomments_meta {
        justify-content: center;
    }
}

/* Print styles - optional tapi bagus untuk accessibility */
@media print {
    .flexicomments_avatar_wrapper {
        display: none;
    }
    
    ul.flexicomments_list > li,
    ul.flexicomments_list > li.flexicomments_item {
        page-break-inside: avoid;
        border-bottom: 1px solid #999;
    }
    
    .flexicomments_author a,
    .flexicomments_meta a {
        color: #000;
        text-decoration: underline;
    }
}