/* --- General Plugin Container Styles --- */
.louilink-review-container {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: 25px;
    background-color: #fcfcfc;
    border: 1px solid #e0e0e0;
    border-radius: 12px;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    gap: 40px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
}

/* --- Centering container for frontend display --- */
.louilink-review-frontend-centered {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    margin: 30px auto;
    max-width: 600px;
    background-color: #fdfdfd;
    padding: 25px 30px;
    border-radius: 12px;
    box-shadow: 0 6px 15px rgba(0,0,0,0.08);
    border: 1px solid #e0e0e0;
}

/* --- Category Ratings Section --- */
.louilink-review-categories {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.louilink-rating-category {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 8px 0;
    border-bottom: 1px dashed #eee;
}

.louilink-rating-category:last-child {
    border-bottom: none;
}

.louilink-rating-category label {
    font-weight: 600;
    color: #3a3a3a;
    width: 160px;
    flex-shrink: 0;
    font-size: 15px;
}

/* --- Star Rating UI (Admin) --- */
.louilink-stars {
    cursor: pointer;
    font-size: 20px;
    color: #cccccc;
    display: flex;
    white-space: nowrap;
}

.louilink-stars .fa-star {
    transition: transform 0.15s ease-out, color 0.15s ease-out;
    margin: 0 1px;
}

.louilink-stars .fa-star:hover,
.louilink-stars .fa-star.hovered {
    transform: scale(1.15);
}

.louilink-stars .fa-star.rated {
    /* Color handled by JS based on rating */
}

.louilink-stars .fa-star.rated-half {
    position: relative;
}

.louilink-stars .fa-star.rated-half:before {
    content: '\f089';
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    position: absolute;
    top: 0;
    left: 0;
    width: 50%;
    overflow: hidden;
    color: #cccccc;
}

/* --- Total Score Section (Admin & Frontend) --- */
.louilink-total-score-wrapper {
    flex-shrink: 0;
    width: 160px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    background-color: #ffffff;
    border-radius: 10px;
    padding: 15px 10px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.03);
}

.louilink-score-title {
    font-size: 1.25em;
    font-weight: 700;
    color: #2c5ba7;
    margin-bottom: 15px;
    border-bottom: 2px solid #e0e0e0;
    padding-bottom: 10px;
    width: 100%;
}

.louilink-total-score-container {
    position: relative;
    width: 120px;
    height: 120px;
    margin-bottom: 10px;
}

/* SVG Progress Ring */
.louilink-progress-ring {
    position: absolute;
    top: 0;
    left: 0;
}

.louilink-progress-ring-bg {
    stroke: #e6e6e6;
    stroke-width: 8;
    fill: transparent;
}

.louilink-progress-ring-fg {
    stroke: #4a90e2;
    stroke-width: 8;
    fill: transparent;
    transition: stroke-dasharray 0.6s ease-out, stroke 0.3s ease-in-out;
    stroke-linecap: round;
}

/* Centered score text inside the circle */
.louilink-score-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 2.2em;
    font-weight: 800;
    color: #222;
    display: flex;
    flex-direction: column;
    align-items: center;
    line-height: 1;
}

.louilink-score-text .louilink-max-score {
    font-size: 0.5em;
    color: #777;
    font-weight: 500;
    margin-top: -5px;
}

/* --- Color Coding for Admin & Frontend Stars and Text --- */
/* Red (1-2.5 stars) */
.louilink-stars.color-red .fa-star.rated,
.louilink-stars-frontend.color-red .fa-star.rated,
.louilink-stars.color-red .fa-star.hovered { color: #e74c3c; }
.louilink-stars.color-red .fa-star.rated-half:before,
.louilink-stars-frontend.color-red .fa-star.rated-half:before { color: #e74c3c; }

/* Orange (3-4 stars) */
.louilink-stars.color-orange .fa-star.rated,
.louilink-stars-frontend.color-orange .fa-star.rated,
.louilink-stars.color-orange .fa-star.hovered { color: #f39c12; }
.louilink-stars.color-orange .fa-star.rated-half:before,
.louilink-stars-frontend.color-orange .fa-star.rated-half:before { color: #f39c12; }

/* Yellow (4.5-6 stars) */
.louilink-stars.color-yellow .fa-star.rated,
.louilink-stars-frontend.color-yellow .fa-star.rated,
.louilink-stars.color-yellow .fa-star.hovered { color: #f1c40f; }
.louilink-stars.color-yellow .fa-star.rated-half:before,
.louilink-stars-frontend.color-yellow .fa-star.rated-half:before { color: #f1c40f; }

/* Light Green (6.5-8.5 stars) */
.louilink-stars.color-light-green .fa-star.rated,
.louilink-stars-frontend.color-light-green .fa-star.rated,
.louilink-stars.color-light-green .fa-star.hovered { color: #2ecc71; }
.louilink-stars.color-light-green .fa-star.rated-half:before,
.louilink-stars-frontend.color-light-green .fa-star.rated-half:before { color: #2ecc71; }

/* Forest Green (9-10 stars) */
.louilink-stars.color-forest-green .fa-star.rated,
.louilink-stars-frontend.color-forest-green .fa-star.rated,
.louilink-stars.color-forest-green .fa-star.hovered { color: #27ae60; }
.louilink-stars.color-forest-green .fa-star.rated-half:before,
.louilink-stars-frontend.color-forest-green .fa-star.rated-half:before { color: #27ae60; }

/* Color coding for score text */
#louilink-final-score-value-frontend.color-red { color: #e74c3c; }
#louilink-final-score-value-frontend.color-orange { color: #f39c12; }
#louilink-final-score-value-frontend.color-yellow { color: #f1c40f; }
#louilink-final-score-value-frontend.color-light-green { color: #2ecc71; }
#louilink-final-score-value-frontend.color-forest-green { color: #27ae60; }

.louilink-overall-text-frontend.color-red { color: #e74c3c; }
.louilink-overall-text-frontend.color-orange { color: #f39c12; }
.louilink-overall-text-frontend.color-yellow { color: #f1c40f; }
.louilink-overall-text-frontend.color-light-green { color: #2ecc71; }
.louilink-overall-text-frontend.color-forest-green { color: #27ae60; }


/* --- Frontend Display Styles (Shortcode Output) --- */
.louilink-review-frontend {
    background-color: #fdfdfd;
    padding: 25px 30px;
    border-radius: 12px;
    box-shadow: 0 6px 15px rgba(0,0,0,0.08);
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    border: 1px solid #e0e0e0;
}

.louilink-review-frontend h3 {
    text-align: center;
    color: #2c5ba7;
    border-bottom: 2px solid #e0e0e0;
    padding-bottom: 15px;
    margin-bottom: 25px;
    font-size: 1.8em;
    font-weight: 700;
}

.louilink-review-categories-frontend {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 30px;
    width: 100%;
}

.louilink-rating-category-frontend {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 1.05em;
    padding: 5px 0;
}

.louilink-category-label {
    font-weight: 500;
    color: #444;
}

.louilink-stars-frontend {
    display: flex;
    font-size: 20px;
    color: #cccccc;
    white-space: nowrap;
}

.louilink-stars-frontend .fa-star {
    margin: 0 1px;
}

.louilink-overall-text-frontend {
    font-size: 1.5em;
    font-weight: 700;
    margin-top: 15px;
    text-align: center;
}

/* --- Responsive Adjustments --- */
@media (max-width: 768px) {
    .louilink-review-container {
        flex-direction: column;
        align-items: center;
        gap: 25px;
        padding: 20px;
    }
    .louilink-rating-category {
        flex-direction: column;
        align-items: flex-start;
        gap: 5px;
        width: 100%;
    }
    .louilink-rating-category label {
        width: auto;
        margin-bottom: 5px;
    }
    .louilink-stars {
        justify-content: center;
        width: 100%;
    }
    .louilink-review-frontend {
        padding: 20px;
        margin: 20px 10px;
    }
}
@media (max-width: 480px) {
    .louilink-review-container {
        padding: 15px;
    }
    .louilink-review-frontend {
        padding: 15px;
    }
}