/* Main rating styles */
.clc-pv-container {
    margin: 20px 0;
}

.clc-pv-rating {
    display: flex;
    gap: 5px;
    justify-content: center;
    align-items: center;
}

.clc-pv-icon img {
    width: 40px;
    height: 40px;
    cursor: pointer;
    transition: filter 0.3s, transform 0.3s;
    filter: grayscale(100%) brightness(100%);
    transform: scale(1);
}

/* Ikon yang dipilih (berwarna) */
.clc-pv-icon.selected img {
    filter: grayscale(0%) brightness(100%);
    transform: scale(1);
}

/* Ikon yang di-hover */
.clc-pv-icon.hovered img {
    filter: grayscale(0%) brightness(110%);
    transform: scale(1.1);
}

/* Stats below the rating */
.clc-pv-stats {
    margin-top: 5px;
    font-size: 14px;
    color: #555;
    text-align: center;
}

/* Criteria voting styling */
.clc-pv-comment-criteria {
    margin-bottom: 20px;
}

.clc-pv-comment-criteria .clc-pv-criterion {
    margin-bottom: 15px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #cccccc;
    padding-bottom: 10px;
}

.clc-pv-comment-criteria .clc-pv-criterion label {
    font-weight: bold;
    margin-right: 10px;
}

.clc-pv-comment-criteria .clc-pv-rating-criterion {
    display: flex;
    gap: 5px;
    flex-shrink: 0;
}

.clc-pv-comment-criteria .clc-pv-rating-criterion .clc-pv-icon img {
    width: 24px;
    height: 24px;
    cursor: pointer;
    transition: filter 0.3s, transform 0.3s;
    filter: grayscale(100%) brightness(100%);
    transform: scale(1);
}

/* Ikon yang dipilih (berwarna) dalam kriteria */
.clc-pv-comment-criteria .clc-pv-icon.selected img {
    filter: grayscale(0%) brightness(100%);
    transform: scale(1);
}

/* Ikon yang di-hover dalam kriteria */
.clc-pv-comment-criteria .clc-pv-icon.hovered img {
    filter: grayscale(0%) brightness(110%);
    transform: scale(1.1);
}

/* Styling for selected value display */
.clc-pv-selected-value {
    margin-top: 5px;
    font-size: 14px;
    color: #333;
}

/* Menghapus efek greyscale pada ikon dalam komentar */
.clc-pv-comment-ratings .clc-pv-comment-icon img {
    filter: none;
    transform: none;
}

/* Sembunyikan rating criteria saat dalam mode reply */
.in-reply-mode .clc-pv-comment-criteria {
    display: none;
}

/* Container utama kriteria + box overall */
.clc-pv-comment-ratings-container {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: stretch;
    gap: 10px;
}

.clc-pv-criteria-ratings {
    width: 60%;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

/* Baris per-kriteria, 3 kolom */
.clc-pv-criteria-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 0px;
    border-bottom: 1px solid #ccc;
}
.clc-pv-col-kriteria {
    width: 30%;
    font-weight: bold;
}
.clc-pv-col-icons {
    width: 60%;
    text-align: right; /* atur left/center/right sesuai kebutuhan */
}
.clc-pv-col-value {

    text-align: right;
}

/* Box overall rating */
.clc-pv-average-rating-box {
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: 35%;
    text-align: center;
    background-color: #1a1a40;
    color: white;
    padding: 20px 0px;
    border-radius: 8px;
}

.clc-pv-score-title {
    font-size: 16px;
    font-weight: bold;
    margin-bottom: 5px;
}

.clc-pv-average-score {
    font-size: 36px;
    font-weight: bold;
    margin-bottom: 10px;
}

.clc-pv-overall-label {
    font-size: 16px;
    font-weight: bold;
    margin-bottom: 10px;
}

.clc-pv-overall-stars img {
    margin-left: 5px;
}

.clc-pv-overall-stars img:hover {
    filter: none;
    transform: none;
    cursor: default;
}

@media (max-width: 768px) {
    .clc-pv-comment-ratings-container {
        flex-direction: column;
    }

    .clc-pv-criteria-ratings {
        width: 100%;
        margin-bottom: 20px;
    }

    .clc-pv-average-rating-box {
        width: 100%;
        text-align: center;
    }
}