/* When the rating widget is auto-injected inside an AWG generator form,
 * the wrapper gives it a clear visual separation from the result area
 * above and inherits the generator's brand variables so it doesn't clash
 * with the form's styling.
 */
.awg-aig__rating-wrap {
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid var(--awg-border, #e8decf);
    /* The rating block is visually set apart from the form's left-aligned
     * fields by the divider above — centering everything inside the block
     * commits to that "this is a separate widget" treatment so the heading,
     * stars, summary, and status message all share one center axis. */
    text-align: center;
}

.awg-aig__rating-wrap .awg-rating {
    /* Pull the rating's own border off when nested — the wrap's top border
     * is the visual separator we want; the rating's own border would just
     * box-in-a-box. */
    border: 0;
    padding: 0;
    margin: 0;
    background: transparent;
}

.awg-aig__rating-wrap .awg-rating__heading {
    font-size: 14px;
    color: var(--awg-text, #10243c);
    margin-bottom: 8px;
}

/* Stars row defaults to flex-start (left); inside an AWG form we want it
 * centered to match the heading and status message above/below it. */
.awg-aig__rating-wrap .awg-rating__row {
    justify-content: center;
}

.awg-aig__rating-wrap .awg-rating__msg {
    text-align: center;
}

.awg-aig__rating-wrap .awg-rating__star {
    color: #d4d4d4;
}

.awg-aig__rating-wrap .awg-rating__star.is-active,
.awg-aig__rating-wrap .awg-rating__star.is-hover,
.awg-aig__rating-wrap .awg-rating__star:hover,
.awg-aig__rating-wrap .awg-rating__star:focus-visible {
    color: #f5b50a;
}

/* AuthorWings Rating widget — front-end styles
 * Self-contained, namespaced under .awg-rating. Uses CSS variables that
 * fall back to sensible defaults so it works without theme tweaks.
 */

.awg-rating {
    --awg-r-star-color: #d4d4d4;
    --awg-r-star-active: #f5b50a;
    --awg-r-text: #10243c;
    --awg-r-muted: #6c7588;
    --awg-r-bg: transparent;
    --awg-r-border: #e8decf;
    --awg-r-radius: 12px;
    --awg-r-pad: 14px 16px;

    display: block;
    background: var(--awg-r-bg);
    color: var(--awg-r-text);
    border: 1px solid var(--awg-r-border);
    border-radius: var(--awg-r-radius);
    padding: var(--awg-r-pad);
    margin: 14px 0;
    font-family: inherit;
    font-size: 14px;
    line-height: 1.4;
    max-width: 100%;
    box-sizing: border-box;
}

.awg-rating--compact {
    --awg-r-pad: 10px 12px;
    --awg-r-radius: 10px;
}

.awg-rating *,
.awg-rating *::before,
.awg-rating *::after {
    box-sizing: border-box;
}

.awg-rating__heading {
    font-weight: 600;
    font-size: 14px;
    margin: 0 0 8px;
    color: var(--awg-r-text);
}

.awg-rating--compact .awg-rating__heading {
    font-size: 13px;
    margin: 0 0 6px;
}

.awg-rating__row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 14px;
}

.awg-rating__stars {
    display: inline-flex;
    align-items: center;
    gap: 2px;
}

.awg-rating__star {
    appearance: none;
    -webkit-appearance: none;
    background: transparent;
    border: 0;
    padding: 2px;
    margin: 0;
    cursor: pointer;
    color: var(--awg-r-star-color);
    line-height: 0;
    transition: transform 0.12s ease, color 0.12s ease;
    border-radius: 4px;
}

.awg-rating__star svg {
    display: block;
    fill: currentColor;
    width: 24px;
    height: 24px;
}

.awg-rating--compact .awg-rating__star svg {
    width: 18px;
    height: 18px;
}

.awg-rating__star:hover,
.awg-rating__star:focus-visible {
    color: var(--awg-r-star-active);
    transform: scale(1.08);
    outline: none;
}

.awg-rating__star:focus-visible {
    box-shadow: 0 0 0 2px rgba(245, 181, 10, 0.35);
}

.awg-rating__star.is-active,
.awg-rating__star.is-hover {
    color: var(--awg-r-star-active);
}

.awg-rating__star[disabled] {
    cursor: default;
}

.awg-rating__star[disabled]:hover {
    transform: none;
}

.awg-rating__summary {
    color: var(--awg-r-muted);
    font-size: 13px;
    line-height: 1.2;
    white-space: nowrap;
}

.awg-rating__value {
    font-weight: 700;
    color: var(--awg-r-text);
    font-size: 15px;
}

.awg-rating__sep,
.awg-rating__max {
    color: var(--awg-r-muted);
    margin: 0 1px;
}

.awg-rating__count {
    margin-left: 6px;
    font-size: 12px;
}

.awg-rating__count--empty {
    margin-left: 0;
    font-style: italic;
    color: var(--awg-r-muted);
}

.awg-rating__msg {
    margin-top: 0;
    min-height: 0;
    font-size: 13px;
    color: #1a8038;
    transition: min-height 0.15s ease;
}

.awg-rating__msg.is-error  { color: #c0392b; }
.awg-rating__msg.is-info   { color: #2271b1; }

.awg-rating__msg:not(:empty) {
    min-height: 18px;
    margin-top: 8px;
}

.awg-rating[data-voted="1"] .awg-rating__star {
    cursor: not-allowed;
}

/* Mobile tightening */
@media (max-width: 480px) {
    .awg-rating__star svg { width: 22px; height: 22px; }
    .awg-rating__row { gap: 6px 10px; }
    .awg-rating__count { display: block; margin-left: 0; }
}