/* Лента отзывов.
 *
 * Цвета не задаются жёстко: у тем свой способ переключать светлую и тёмную
 * версию (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);
}
.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__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__empty { opacity: var(--rv-muted); }

/* ── раскладка «Плитки»: отзывы в несколько колонок ─────────────────────
   Карточки в ряду тянутся до одной высоты (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%; }
}

/* ── просмотр фотографий ─────────────────────────────────────────────
   Окно поверх страницы: фон намеренно тёмный в обеих версиях темы —
   так фотография читается одинаково и на светлом, и на тёмном сайте. */
.requests-reviews-lightbox {
    position: fixed; inset: 0; z-index: 9999;
    display: none; align-items: center; justify-content: center;
    gap: 8px; padding: 24px;
    background: rgba(17, 19, 24, .82);
    backdrop-filter: blur(2px);
}
.requests-reviews-lightbox.is-open { display: flex; }

.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);
}

.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;
}
.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; }
}