/* Start:/local/components/ordinator/item.rating/templates/material2/style.css?17806560793401*/
/* ════════════════════════════════════════════════════════
   ВЕРХНИЙ БЛОК (сайдбар) — без изменений
   ════════════════════════════════════════════════════════ */
@keyframes rating-sidebar-appear {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}

.grade.desktop {
    opacity: 0;
    animation: rating-sidebar-appear 0.5s ease-out 0.4s forwards;
}

/* ════════════════════════════════════════════════════════
   НИЖНИЙ БЛОК (.grade.material-inline-rating)
   ════════════════════════════════════════════════════════ */

/* ── Позиционирование и появление ─────────────────────── */
.grade.material-inline-rating {
    /* padding-top вместо margin-top: не схлопывается с margin соседей */
    padding-top: 28px !important;
    width: fit-content;
    margin-left: auto;
    margin-right: auto;
    /* Начальное состояние анимации */
    opacity: 0;
    transform: translateY(12px);
    transition: opacity 0.5s ease-out, transform 0.5s ease-out;
}

/* Класс is-visible добавляет IntersectionObserver */
.grade.material-inline-rating.is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* ── Звёзды: color (path использует fill="currentColor") ─ */

/* Базовое: серые */
.grade.material-inline-rating .grade__star svg {
    color: rgba(208, 208, 208, 0.8);
    transition: color 0.1s ease;
}

/* Проголосованные (1..N помечаются через JS): золото */
.grade.material-inline-rating .grade__star svg.voted_this {
    color: #f5a623 !important;
}

/* ── Hover: заполнение диапазона 1..N (CSS sibling trick) ─
   HTML-порядок звёзд: 1→2→3→4→5 (range(1,5), без row-reverse)
   Шаг 1: container hover делает ВСЕ золотыми
   Шаг 2: svg:hover ~ svg делает ПОСЛЕДУЮЩИЕ серыми
   Итог: hover на 3 → 1,2,3 золотые; 4,5 серые
   ─────────────────────────────────────────────────────── */

/* Шаг 1: все звёзды золотые при наведении на контейнер */
.grade.material-inline-rating .grade__star:hover svg {
    color: #f5a623 !important;
}

/* Шаг 2: звёзды ПОСЛЕ наведённой — серые */
.grade.material-inline-rating .grade__star svg:hover ~ svg {
    color: rgba(208, 208, 208, 0.8) !important;
}

/* ── Мобильный отступ сверху ──────────────────────────── */
@media (max-width: 768px) {
    .grade.material-inline-rating {
        margin-top: 32px !important;
    }
}
/* End */
/* /local/components/ordinator/item.rating/templates/material2/style.css?17806560793401 */