.content-rating {
    --rating-accent: var(--client-primary, #a45f57);
    --rating-accent-strong: var(--client-primary-hover, #8e4f49);
    --rating-accent-soft: var(--client-warm-surface, #f4ece7);
    --rating-surface: #fffaf8;
    --rating-border: var(--client-border, #e6dad4);
    --rating-text: var(--client-primary-text, #211b1d);
    --rating-muted: var(--client-secondary-text, #6f6361);
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: .65rem 1rem;
    min-width: 0;
    padding: .8rem .9rem;
    color: var(--rating-text);
    border: 1px solid var(--rating-border);
    border-radius: 16px;
    background: linear-gradient(135deg, #fff 0%, var(--rating-surface) 100%);
    box-shadow: 0 7px 20px rgba(65, 42, 38, .045);
    font-size: .875rem;
}

.content-rating [hidden] {
    display: none !important;
}

.content-rating__summary {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .35rem .55rem;
    min-width: 0;
}

.content-rating__label,
.content-rating__score,
.content-rating__empty,
.content-rating__availability {
    display: inline-flex;
    align-items: center;
}

.content-rating__label {
    gap: .32rem;
    min-height: 28px;
    padding: .25rem .55rem;
    color: var(--rating-accent-strong);
    border-radius: 999px;
    background: var(--rating-accent-soft);
    font-size: .73rem;
    font-weight: 850;
    letter-spacing: .035em;
    text-transform: uppercase;
}

.content-rating__score {
    gap: .16rem;
    white-space: nowrap;
}

.content-rating__score > i {
    margin-inline-end: .12rem;
    color: var(--rating-accent);
}

.content-rating__score strong {
    color: var(--rating-text);
    font-size: 1rem;
    font-variant-numeric: tabular-nums;
}

.content-rating__summary > small {
    color: var(--rating-muted);
    font-size: .76rem;
    font-weight: 650;
}

.content-rating__empty {
    gap: .32rem;
    color: var(--rating-muted);
    font-size: .79rem;
    font-weight: 700;
}

.content-rating__empty > i {
    color: #b3948d;
}

.content-rating__action {
    display: grid;
    grid-template-columns: auto auto;
    align-items: center;
    justify-items: end;
    gap: .15rem .55rem;
    min-width: 0;
}

.content-rating__prompt {
    grid-column: 1 / -1;
    justify-self: start;
    color: var(--rating-text);
    font-size: .78rem;
    font-weight: 800;
}

.content-rating__stars {
    display: inline-flex;
    align-items: center;
    gap: .12rem;
    min-width: 0;
}

.content-rating__star {
    display: inline-grid;
    flex: 0 0 40px;
    width: 40px;
    height: 40px;
    place-items: center;
    padding: 0;
    color: #b9aaa5;
    border: 0;
    border-radius: 999px;
    background: transparent;
    font-size: 1.02rem;
    line-height: 1;
    cursor: pointer;
    transition: color .16s ease, background-color .16s ease, transform .16s ease, box-shadow .16s ease;
}

.content-rating__star:hover,
.content-rating__star:focus-visible,
.content-rating__star.is-preview,
.content-rating__star.is-selected {
    color: var(--rating-accent);
}

.content-rating__star:hover,
.content-rating__star:focus-visible {
    background: var(--rating-accent-soft);
    box-shadow: inset 0 0 0 1px rgba(164, 95, 87, .12);
    outline: none;
}

.content-rating__star:focus-visible {
    box-shadow: 0 0 0 3px rgba(164, 95, 87, .2);
}

.content-rating__star:active {
    transform: scale(.92);
}

.content-rating__star:disabled {
    cursor: wait;
    opacity: .62;
}

.content-rating__selection {
    color: var(--rating-muted);
    font-size: .72rem;
    font-weight: 650;
    white-space: nowrap;
}

.content-rating__availability {
    justify-self: end;
    gap: .42rem;
    max-width: 250px;
    color: var(--rating-muted);
    font-size: .75rem;
    font-weight: 650;
    line-height: 1.35;
    text-align: end;
}

.content-rating__availability > i {
    flex: 0 0 auto;
    color: var(--rating-accent);
}

.content-rating__status {
    display: none;
    grid-column: 1 / -1;
    align-items: center;
    min-width: 0;
    padding: .48rem .65rem;
    color: #25623f;
    border-radius: 10px;
    background: #edf8f1;
    font-size: .78rem;
    font-weight: 750;
    line-height: 1.35;
}

.content-rating__status:not(:empty) {
    display: flex;
}

.content-rating__status.is-error {
    color: #9d302c;
    background: #fff0ef;
}

.frexima-community-wall-page .cw-card-body > .content-rating {
    order: 6;
    margin: 12px 18px 0;
}

.content-rating--post {
    box-shadow: none;
}

.content-rating--forum-topic {
    margin-top: 1rem;
}

.content-rating--forum-reply {
    flex: 1 1 100%;
    width: 100%;
    box-shadow: none;
}

.content-rating-mount {
    padding: .7rem .8rem;
    border-top: 1px solid rgba(255, 255, 255, .12);
    background: rgba(255, 255, 255, .97);
}

.video-hub-card > .content-rating-mount,
.short-video-card > .content-rating-mount {
    position: relative;
    z-index: 2;
}

.content-rating-mount .content-rating {
    width: 100%;
    box-shadow: none;
}

.salon-rating-card {
    display: grid;
    gap: 1rem;
}

.salon-rating-card__aggregate {
    display: grid;
    grid-template-columns: auto auto minmax(0, 1fr);
    align-items: center;
    gap: .55rem;
    padding: .9rem 1rem;
    color: var(--rating-text, #211b1d);
    border: 1px solid #eaded8;
    border-radius: 16px;
    background: linear-gradient(135deg, #fff8f5, #f7eee9);
}

.salon-rating-card__aggregate i {
    color: var(--rating-accent, #a45f57);
    font-size: 1.35rem;
}

.salon-rating-card__aggregate strong {
    font-size: 1.25rem;
}

.salon-rating-card__aggregate span {
    color: #6f6361;
    font-size: .82rem;
}

.salon-rating-form {
    display: grid;
    gap: .9rem;
    padding: 1rem;
    border: 1px solid #e6dad4;
    border-radius: 18px;
    background: #fffaf8;
}

.salon-rating-form__booking {
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr);
    align-items: center;
    gap: .7rem;
}

.salon-rating-form__booking > i {
    display: grid;
    width: 42px;
    height: 42px;
    place-items: center;
    color: #8e4f49;
    border-radius: 13px;
    background: #f4ece7;
}

.salon-rating-form__booking strong,
.salon-rating-form__booking small {
    display: block;
}

.salon-rating-form__booking small {
    margin-top: .15rem;
    color: #6f6361;
    font-size: .8rem;
}

.salon-rating-form__rating {
    display: grid;
    gap: .3rem;
    padding: .75rem;
    border-radius: 15px;
    background: #fff;
}

.salon-rating-form__prompt {
    color: #211b1d;
    font-size: .84rem;
    font-weight: 850;
}

.salon-rating-form__stars {
    display: flex;
    gap: .2rem;
    width: max-content;
    max-width: 100%;
}

.salon-rating-form__stars label {
    cursor: pointer;
}

.salon-rating-form__stars input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.salon-rating-form__stars label > span {
    display: grid;
    width: 46px;
    height: 46px;
    place-items: center;
    color: #b9aaa5;
    border-radius: 999px;
    font-size: 1.25rem;
    transition: color .16s ease, background-color .16s ease, transform .16s ease;
}

.salon-rating-form__stars label > span.is-selected,
.salon-rating-form__stars label:hover > span,
.salon-rating-form__stars label:focus-within > span {
    color: #a45f57;
    background: #f4ece7;
}

.salon-rating-form__stars label:active > span {
    transform: scale(.94);
}

.salon-rating-form__rating > small {
    color: #6f6361;
    font-size: .75rem;
    font-weight: 650;
}

.salon-rating-form > .btn {
    min-height: 44px;
    justify-self: start;
}

@media (max-width: 767.98px) {
    .content-rating {
        grid-template-columns: minmax(0, 1fr);
        gap: .65rem;
        padding: .75rem;
        border-radius: 14px;
    }

    .client-body .frexima-community-wall-page:not(.salon-community-page) .cw-card-body > .content-rating,
    .frexima-community-wall-page .cw-card-body > .content-rating {
        order: 7;
        margin: 10px 14px 0;
    }

    .content-rating__action {
        grid-template-columns: minmax(0, 1fr);
        justify-items: start;
        gap: .25rem;
    }

    .content-rating__prompt,
    .content-rating__selection {
        grid-column: 1;
    }

    .content-rating__star {
        flex-basis: 44px;
        width: 44px;
        height: 44px;
        font-size: 1.08rem;
    }

    .content-rating__availability {
        justify-self: start;
        max-width: none;
        text-align: start;
    }

    .content-rating-mount {
        padding: .65rem;
    }

    .salon-rating-card__aggregate {
        grid-template-columns: auto minmax(0, 1fr);
    }

    .salon-rating-card__aggregate span {
        grid-column: 1 / -1;
    }

    .salon-rating-form {
        padding: .85rem;
    }

    .salon-rating-form > .btn {
        width: 100%;
        justify-self: stretch;
    }
}

@media (max-width: 359.98px) {
    .content-rating__summary {
        gap: .3rem .4rem;
    }

    .content-rating__stars,
    .salon-rating-form__stars {
        justify-content: space-between;
        width: 100%;
    }

    .content-rating__star {
        flex: 0 0 44px;
    }

    .salon-rating-form__stars label > span {
        width: 44px;
        height: 44px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .content-rating__star,
    .salon-rating-form__stars label > span {
        transition: none;
    }
}