/* Лента отзывов.
 *
 * Цвета не задаются жёстко: у тем свой способ переключать светлую и тёмную
 * версию (seller 2 вешает html.dark, другие темы — свои классы), и любой
 * фиксированный #fff рано или поздно окажется белой плашкой на тёмном фоне
 * или наоборот. Поэтому всё строится от currentColor — цвета текста, который
 * тема уже выбрала для этого места страницы. Значения в rgba идут первыми:
 * браузеры без color-mix() возьмут их.
 */
.requests-reviews {
    --rv-gap: 16px;
    --rv-radius: 14px;
    --rv-surface: rgba(127, 127, 127, .06);
    --rv-surface: color-mix(in srgb, currentColor 5%, transparent);
    --rv-surface-strong: rgba(127, 127, 127, .12);
    --rv-surface-strong: color-mix(in srgb, currentColor 9%, transparent);
    --rv-border: rgba(127, 127, 127, .28);
    --rv-border: color-mix(in srgb, currentColor 16%, transparent);
    --rv-muted: .62;
    --rv-star: #f5a524;
    --rv-verified: #16a34a;

    color: inherit;
}

.requests-reviews *,
.requests-reviews *::before,
.requests-reviews *::after { box-sizing: border-box; }

/* ── шапка: средний балл и распределение оценок ──────────────────────── */
.requests-reviews__header {
    display: flex; flex-wrap: wrap; gap: 32px;
    align-items: center;
    margin-bottom: 28px;
}
.requests-reviews__score { flex: 0 0 auto; min-width: 180px; }
.requests-reviews__title {
    margin: 0 0 12px; font-size: 22px; font-weight: 600; line-height: 1.25;
}
.requests-reviews__average {
    font-size: 44px; font-weight: 700; line-height: 1; margin-bottom: 6px;
}
.requests-reviews__count { margin: 6px 0 0; font-size: 14px; opacity: var(--rv-muted); }

.requests-reviews__bars {
    flex: 1 1 260px; min-width: 0;
    display: flex; flex-direction: column; gap: 6px;
}
.requests-reviews__bar-row { display: flex; align-items: center; gap: 10px; font-size: 13px; }
.requests-reviews__bar-star {
    display: inline-flex; align-items: center; gap: 3px;
    width: 34px; flex: 0 0 auto; opacity: var(--rv-muted);
}
.requests-reviews__bar {
    flex: 1 1 auto; height: 8px; border-radius: 999px;
    background: var(--rv-surface-strong); overflow: hidden;
}
.requests-reviews__bar-fill {
    display: block; height: 100%; border-radius: 999px;
    background: currentColor; opacity: .55;
}
.requests-reviews__bar-count { width: 28px; text-align: right; opacity: var(--rv-muted); }

/* ── звёзды ──────────────────────────────────────────────────────────── */
.requests-reviews__stars { display: inline-flex; align-items: center; gap: 2px; }
.requests-reviews__star {
    width: 18px; height: 18px; flex: 0 0 auto;
    fill: none; stroke: var(--rv-star); stroke-width: 2;
    stroke-linecap: round; stroke-linejoin: round;
    opacity: .35;
}
.requests-reviews__star.is-filled { fill: var(--rv-star); opacity: 1; }
.requests-reviews__bar-star .requests-reviews__star { width: 12px; height: 12px; }

/* ── список ─────────────────────────────────────────────────────────── */
.requests-reviews__list { display: flex; flex-direction: column; gap: var(--rv-gap); }

.requests-reviews__item {
    padding: 18px;
    border: 1px solid var(--rv-border);
    border-radius: var(--rv-radius);
    background: var(--rv-surface);
}

/* ── появление при прокрутке ────────────────────────────────────────────
   Стартовое «спрятанное» состояние действует только под модификатором
   --animated, который добавляет сам скрипт после проверки настройки формы
   reviews_animation и prefers-reduced-motion. Без JS (и пока JS не
   отработал) карточки всегда видны — этого правила ни на что не влияет.
   Тот же модификатор нужен и стороннему элементу с атрибутом
   data-requests-reviews-animate — контракт для своей вёрстки темы, см. ниже
   и раздел «Лента отзывов и её проверка» в CLAUDE.md. */
.requests-reviews--animated .requests-reviews__item,
.requests-reviews--animated [data-requests-reviews-animate] {
    opacity: 0;
    transform: translateY(16px);
    transition: opacity .4s ease-out, transform .4s ease-out, box-shadow .18s ease-out;
}
.requests-reviews--animated .requests-reviews__item.is-visible,
.requests-reviews--animated [data-requests-reviews-animate].is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* Разметка темы без .requests-reviews в предках вовсе (items() без
   render()) — тот же приём, но без родительского модификатора: класс ставит
   сам скрипт прямо на элемент с data-requests-reviews-animate. */
[data-requests-reviews-animate].requests-reviews--animate-standalone {
    opacity: 0;
    transform: translateY(16px);
    transition: opacity .4s ease-out, transform .4s ease-out;
}
[data-requests-reviews-animate].requests-reviews--animate-standalone.is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* Едва заметный подъём при наведении — только там, где карточка выглядит
   карточкой (список и плитки); у «Простого списка» нет ни фона, ни рамки,
   и подъём смотрелся бы посторонним. transform не двигает соседей —
   раскладка не прыгает. */
.requests-reviews--animated.requests-reviews--list .requests-reviews__item:hover,
.requests-reviews--animated.requests-reviews--cards .requests-reviews__item:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 24px rgba(0, 0, 0, .10);
}
.requests-reviews__head {
    display: flex; align-items: flex-start; gap: 12px; margin-bottom: 10px;
}
.requests-reviews__avatar {
    width: 36px; height: 36px; flex: 0 0 auto;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 999px; background: var(--rv-surface-strong);
    font-size: 13px; font-weight: 600; letter-spacing: .02em;
}
.requests-reviews__who {
    display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px;
    min-width: 0; flex: 1 1 auto;
}
.requests-reviews__author { font-weight: 600; }
.requests-reviews__buyer {
    display: inline-flex; align-items: center; gap: 4px;
    font-size: 12px; color: var(--rv-verified);
}
.requests-reviews__buyer svg {
    width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2;
    stroke-linecap: round; stroke-linejoin: round;
}
.requests-reviews__date { font-size: 13px; opacity: var(--rv-muted); }
.requests-reviews__rating { flex: 0 0 auto; margin-left: auto; }
.requests-reviews__text { line-height: 1.6; }

/* Несколько текстовых полей формы («Достоинства», «Недостатки», «Комментарий») */
.requests-reviews__part { margin-top: 10px; }
.requests-reviews__part:first-child { margin-top: 0; }
.requests-reviews__part-label { display: block; font-weight: 600; margin-bottom: 2px; }

.requests-reviews__files { display: flex; gap: 8px; margin-top: 12px; flex-wrap: wrap; }
.requests-reviews__file { display: block; cursor: zoom-in; }
.requests-reviews__file img {
    width: 84px; height: 84px; object-fit: cover; border-radius: 10px; display: block;
    border: 1px solid var(--rv-border);
}

.requests-reviews__answer {
    margin-top: 14px; padding: 12px 14px; border-radius: 10px;
    background: var(--rv-surface-strong);
    border-left: 3px solid var(--rv-border);
}
.requests-reviews__answer-label {
    display: block; font-size: 12px; font-weight: 600; opacity: var(--rv-muted); margin-bottom: 4px;
}

.requests-reviews__foot { margin-top: 14px; }
.requests-reviews__useful {
    display: inline-flex; align-items: center; gap: 6px;
    border: 1px solid var(--rv-border); background: transparent; color: inherit;
    border-radius: 999px; padding: 5px 14px; font-size: 13px; cursor: pointer;
    font-family: inherit; line-height: 1.4;
}
.requests-reviews__useful svg {
    width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2;
    stroke-linecap: round; stroke-linejoin: round;
}
.requests-reviews__useful:hover { background: var(--rv-surface); }
.requests-reviews__useful.is-voted { opacity: .75; cursor: default; }
.requests-reviews__useful[disabled] { opacity: .7; }
.requests-reviews__useful-count { display: inline-block; }
/* Отклик на успешный голос — короткое подпрыгивание счётчика. Ставится
   только вместе с --animated (см. reviews.js), поэтому отдельного гейта на
   reduced-motion в самом правиле нет: класс is-bump скрипт не добавит, когда
   анимации уже выключены выше по стеку. */
@keyframes rv-bump {
    0% { transform: scale(1); }
    45% { transform: scale(1.32); }
    100% { transform: scale(1); }
}
.requests-reviews__useful-count.is-bump { animation: rv-bump .32s ease-out; }

.requests-reviews__empty { opacity: var(--rv-muted); }

/* ── постраничный вывод: нумерация ──────────────────────────────────── */
.requests-reviews__paging {
    display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
    margin-top: 24px;
}
.requests-reviews__paging-link {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 34px; height: 34px; padding: 0 10px;
    border: 1px solid var(--rv-border); border-radius: 8px;
    color: inherit; text-decoration: none; font-size: 14px; line-height: 1;
}
.requests-reviews__paging-link:hover { background: var(--rv-surface); }
.requests-reviews__paging-link.is-current {
    background: var(--rv-surface-strong); border-color: var(--rv-border);
    font-weight: 700; cursor: default;
}
.requests-reviews__paging-link--nav { font-weight: 500; }
.requests-reviews__paging-ellipsis {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 34px; height: 34px; opacity: var(--rv-muted);
}

/* ── постраничный вывод: «Показать ещё» ─────────────────────────────── */
.requests-reviews__more { display: flex; justify-content: center; margin-top: 24px; }
.requests-reviews__more-btn {
    display: inline-flex; align-items: center; gap: 8px;
    border: 1px solid var(--rv-border); background: transparent; color: inherit;
    border-radius: 999px; padding: 10px 22px; font-size: 14px; font-weight: 600;
    text-decoration: none; cursor: pointer; font-family: inherit;
}
.requests-reviews__more-btn:hover { background: var(--rv-surface); }
.requests-reviews__more-btn.is-loading { opacity: .6; pointer-events: none; }
/* Пульсация вместо просто приглушённой кнопки — видимое «идёт загрузка».
   Только при отсутствии prefers-reduced-motion: reduce; под ним кнопка
   остаётся статично приглушённой из правила выше — это и есть весь сигнал
   загрузки без движения. */
@media (prefers-reduced-motion: no-preference) {
    @keyframes rv-pulse {
        0%, 100% { opacity: .5; }
        50% { opacity: .85; }
    }
    .requests-reviews__more-btn.is-loading { animation: rv-pulse 1s ease-in-out infinite; }
}

/* ── раскладка «Плитки»: отзывы в несколько колонок ─────────────────────
   Карточки в ряду тянутся до одной высоты (grid растягивает их сам), а
   кнопка «Полезно» прижата к низу — иначе она болталась бы по-разному
   в зависимости от длины отзыва. */
.requests-reviews--cards .requests-reviews__list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
}
.requests-reviews--cards .requests-reviews__item {
    display: flex;
    flex-direction: column;
}
.requests-reviews--cards .requests-reviews__foot { margin-top: auto; padding-top: 14px; }
.requests-reviews--cards .requests-reviews__answer { margin-top: 14px; }

/* ── раскладка «Простой список»: без карточек, только разделители ─────── */
.requests-reviews--plain .requests-reviews__list { gap: 0; }
.requests-reviews--plain .requests-reviews__item {
    border: 0; border-radius: 0; background: transparent;
    padding: 22px 0;
    border-bottom: 1px solid var(--rv-border);
}
.requests-reviews--plain .requests-reviews__item:last-child { border-bottom: 0; }

@media (max-width: 640px) {
    .requests-reviews__header { gap: 20px; }
    .requests-reviews__average { font-size: 36px; }
    .requests-reviews__rating { margin-left: 0; width: 100%; }
}

/* ── просмотр фотографий ─────────────────────────────────────────────
   Окно поверх страницы: фон намеренно тёмный в обеих версиях темы —
   так фотография читается одинаково и на светлом, и на тёмном сайте.

   Окно не переключается через display:none/flex — так транзишен не
   проиграть (display не анимируется). Вместо этого всегда display:flex,
   а показ/скрытие — opacity + visibility: opacity анимируется, а
   visibility переключается с задержкой, равной длительности анимации
   (0s linear .22s на закрытии), чтобы окно не ловило клики/фокус, пока
   скрыто, и не «моргало» — контент остаётся на месте, просто невидим и
   недоступен интерактивно (visibility: hidden выключает hit-testing и
   убирает элемент из таб-порядка сам, без ручного pointer-events/tabindex).
   Настройка reviews_animation выключена или reduced-motion — окно получает
   класс requests-reviews-lightbox--no-anim, обнуляющий все transition:
   тот же переключатель is-open работает, просто мгновенно. */
.requests-reviews-lightbox {
    position: fixed; inset: 0; z-index: 9999;
    display: flex; align-items: center; justify-content: center;
    gap: 8px; padding: 24px;
    background: rgba(17, 19, 24, .82);
    backdrop-filter: blur(2px);
    opacity: 0;
    visibility: hidden;
    transition: opacity .22s ease-out, visibility 0s linear .22s;
}
.requests-reviews-lightbox.is-open {
    opacity: 1;
    visibility: visible;
    transition: opacity .22s ease-out, visibility 0s linear 0s;
}
.requests-reviews-lightbox--no-anim,
.requests-reviews-lightbox--no-anim .requests-reviews-lightbox__stage,
.requests-reviews-lightbox--no-anim .requests-reviews-lightbox__image {
    transition: none !important;
}

.requests-reviews-lightbox__stage {
    position: relative;
    display: flex; align-items: center; justify-content: center;
    min-width: 120px; min-height: 120px;
    max-width: min(1100px, 92vw); max-height: 88vh;
    transform: scale(.96);
    opacity: 0;
    transition: transform .22s ease-out, opacity .22s ease-out;
}
.requests-reviews-lightbox.is-open .requests-reviews-lightbox__stage {
    transform: scale(1);
    opacity: 1;
}

.requests-reviews-lightbox__image {
    max-width: min(1100px, 92vw); max-height: 88vh;
    object-fit: contain; border-radius: 10px; display: block;
    box-shadow: 0 20px 60px rgba(0, 0, 0, .45);
    opacity: 1;
    transition: opacity .16s ease-out;
}
/* Смена кадра стрелками/клавишами: короткое затухание текущей картинки,
   пока грузится следующая (заранее предзагруженная — см. reviews.js),
   затем обратное появление. Стадия (стейдж) не двигается и не меняет
   scale — «прыжка размера» не будет, даже если у соседних фото разные
   пропорции: контейнер всегда центрирован в тех же max-width/max-height. */
.requests-reviews-lightbox__stage.is-changing .requests-reviews-lightbox__image {
    opacity: 0;
}

/* Индикатор загрузки крупной картинки — не пустота на месте фото, а
   мягкое кольцо поверх уже показанного (предыдущего) кадра: img.src не
   очищается, пока новый файл не готов, поэтому «белой вспышки» нет. */
.requests-reviews-lightbox__spinner {
    display: none;
    position: absolute; top: 50%; left: 50%;
    width: 34px; height: 34px; margin: -17px 0 0 -17px;
    border-radius: 999px;
    border: 3px solid rgba(255, 255, 255, .28);
    border-top-color: #fff;
}
.requests-reviews-lightbox__stage.is-loading .requests-reviews-lightbox__spinner { display: block; }
@media (prefers-reduced-motion: no-preference) {
    .requests-reviews-lightbox__spinner { animation: rv-spin .8s linear infinite; }
}
@keyframes rv-spin { to { transform: rotate(360deg); } }

.requests-reviews-lightbox__close,
.requests-reviews-lightbox__nav {
    border: 0; background: rgba(255, 255, 255, .14); color: #fff;
    cursor: pointer; line-height: 1; border-radius: 999px;
    font-family: inherit;
}
.requests-reviews-lightbox__close:hover,
.requests-reviews-lightbox__nav:hover { background: rgba(255, 255, 255, .26); }

.requests-reviews-lightbox__close {
    position: absolute; top: 16px; right: 20px;
    width: 40px; height: 40px; font-size: 26px;
    z-index: 1;
}
.requests-reviews-lightbox__nav {
    width: 44px; height: 44px; font-size: 30px; flex: 0 0 auto;
    display: none;
}
.requests-reviews-lightbox.has-nav .requests-reviews-lightbox__nav { display: block; }

@media (max-width: 640px) {
    .requests-reviews-lightbox { padding: 12px; }
    .requests-reviews-lightbox__nav { width: 38px; height: 38px; font-size: 24px; }
}

/* ── prefers-reduced-motion: reduce — выключает анимации плагина целиком ──
   Независимо от настройки формы и от того, добавил ли скрипт модификаторы
   --animated/--no-anim: это последний рубеж, читает его браузер, а не наш
   код, поэтому он гарантированно верен даже при ошибке в JS. Всё, что
   должно быть видимым, показывается без перехода. */
@media (prefers-reduced-motion: reduce) {
    .requests-reviews--animated .requests-reviews__item,
    .requests-reviews--animated [data-requests-reviews-animate],
    [data-requests-reviews-animate].requests-reviews--animate-standalone {
        transition: none !important;
        opacity: 1 !important;
        transform: none !important;
    }
    .requests-reviews--animated .requests-reviews__item:hover,
    .requests-reviews--animated [data-requests-reviews-animate]:hover {
        transform: none !important;
        box-shadow: none !important;
    }
    .requests-reviews__useful-count.is-bump { animation: none !important; }
    .requests-reviews-lightbox,
    .requests-reviews-lightbox__stage,
    .requests-reviews-lightbox__image {
        transition: none !important;
    }
    .requests-reviews-lightbox__spinner { animation: none !important; }
}