/*
|--------------------------------------------------------------------------
| Rating Widget (includes/partials/rating-widget.php)
|--------------------------------------------------------------------------
|
| Loaded site-wide, unconditionally (includes/layouts/header.php) since
| the widget appears on 4 different templates (award/person/category/
| segment) and person.php isn't part of the per-page $pageStylesMap
| there — same reasoning as navbar.css/footer.css/search-form.css.
| Uses the shared --yo-* tokens from design-tokens.css (loaded first).
|--------------------------------------------------------------------------
*/

.yo-rating-widget {
    margin-bottom: 1.5rem;
}

.yo-rating-stars {
    display: flex;
    align-items: center;
    gap: .35rem;
}

.yo-rating-star {
    background: none;
    border: none;
    padding: .2rem;
    line-height: 1;
    font-size: 1.5rem;
    color: var(--yo-border-strong, #CBD5E1);
    cursor: pointer;
    transition: color .15s, transform .1s;
}

.yo-rating-star:hover:not(:disabled),
.yo-rating-star:focus-visible:not(:disabled) {
    transform: scale(1.08);
}

.yo-rating-star:disabled {
    cursor: default;
}

.yo-rating-star.is-filled,
.yo-rating-star.is-preview {
    color: var(--yo-gold);
}

.yo-rating-star:focus-visible {
    outline: 2px solid var(--yo-gold);
    outline-offset: 2px;
    border-radius: .25rem;
}

.yo-rating-widget.is-voted .yo-rating-star {
    cursor: default;
}

.yo-rating-feedback {
    min-height: 1.1em;
    color: var(--yo-text-muted);
}

.yo-rating-feedback.is-success {
    color: #15803d;
}

.yo-rating-feedback.is-error {
    color: #b91c1c;
}

/*
|--------------------------------------------------------------------------
| Overlay Variant — award.php / segment.php hero photo
|--------------------------------------------------------------------------
|
| Used when includes/partials/rating-widget.php is rendered with
| $ratingVariant = 'overlay': a compact, background-less row meant to
| sit directly on the hero photo's own dark gradient (see .yo-award-
| hero-bottom-stack in assets/css/award.css / segment.css), matching
| the existing .yo-hero-meta-item white-text-with-shadow treatment
| right below it instead of the default card/eyebrow layout above.
*/

.yo-rating-widget--overlay {
    margin-bottom: 0;
}

.yo-rating-stars--overlay {
    gap: .15rem;
}

.yo-rating-stars--overlay .yo-rating-star {
    padding: 0;
    font-size: 1.05rem;
    color: rgba(255, 255, 255, .5);
    text-shadow: 0 1px 3px rgba(0, 0, 0, .5);
}

.yo-rating-stars--overlay .yo-rating-star.is-filled,
.yo-rating-stars--overlay .yo-rating-star.is-preview {
    color: var(--yo-gold-light);
}

.yo-rating-stars--overlay .yo-rating-star:focus-visible {
    outline-color: var(--yo-gold-light);
}

.yo-rating-summary--overlay {
    display: inline-flex;
    align-items: center;
    color: #fff;
    font-size: .78rem;
    font-weight: 500;
    text-shadow: 0 1px 3px rgba(0, 0, 0, .5);
    white-space: nowrap;
    margin-left: .35rem;
}

.yo-rating-feedback--overlay {
    min-height: 0;
    color: #fff;
    text-shadow: 0 1px 3px rgba(0, 0, 0, .5);
}

.yo-rating-feedback--overlay:empty {
    display: none;
}

/*
|--------------------------------------------------------------------------
| Inline Variant — category.php overview card
|--------------------------------------------------------------------------
|
| Used when includes/partials/rating-widget.php is rendered with
| $ratingVariant = 'inline': structurally the same compact layout as
| the overlay variant above (no card, no eyebrow, summary inline next
| to the stars) but with the ordinary gold/grey star colours instead
| of overlay's white-on-photo treatment, since this one sits next to
| the "Award Category" eyebrow at the top of the Category Overview
| card's plain light background, not on a photo.
*/

.yo-rating-widget--inline {
    margin-bottom: 0;
}

.yo-rating-stars--inline {
    gap: .15rem;
}

.yo-rating-stars--inline .yo-rating-star {
    padding: 0;
    font-size: 1.05rem;
}

.yo-rating-summary--inline {
    display: inline-flex;
    align-items: center;
    color: var(--yo-text-muted);
    font-size: .78rem;
    font-weight: 500;
    white-space: nowrap;
    margin-left: .35rem;
}

.yo-rating-feedback--inline {
    min-height: 0;
}

.yo-rating-feedback--inline:empty {
    display: none;
}