/* ============================================================================
   Страница отзывов — по «отзывыстраница.psd» (и листу карточек «отзывы2.psd»).

   Макет @2x: холст 2560×1595 = 1280×797,5 CSS, все размеры ниже уже поделены
   пополам. Шапка 0..80, подвал начинается с 720 — на содержимое отведено 640.

   Две колонки выравнивания, так нарисовано:
   • контейнер 1168 (x 56..1224) — заголовок, оценка, плашка-подсказка;
   • колонка карточек 1141,5 (x 56..1197,5) — карточки и пилюли сортировки.
   Разница в 26 px — это место, куда вылезает паучок: его правый край
   упирается ровно в 1223, то есть в край контейнера.

   Фон страницы. В макете под содержимым лежит фотография «у подножья здания»
   в режиме «осветление основы», но она задавлена тёмной подложкой почти
   в ноль: по левому краю холста фон ровно совпадает с градиентом body,
   а к правому краю добавляется +15 по синему — то есть читается не зданием,
   а мягким фиолетовым свечением справа. Поэтому свечение нарисовано здесь
   градиентом, а не выложено картинкой: у CSS-пятна нет краёв, и оно одинаково
   ложится на любую ширину окна. Картинка потребовала бы кромок, как у hero.
   ========================================================================== */

/* <main> на всех страницах отступает под шапку на 96 (шапка + 16). В макете
   заголовок стоит на 64,5 ниже полосы, поэтому лишний отступ снимаем и всё
   расстояние отмеряем внутри секции. Случай с полосой тех-работ не трогаем:
   там контент обязан опускаться. */
body:has(.bl-rev):not(.maint-on) .app-main {
    padding-top: var(--bl-header-h) !important;
}

/* Отступ снизу макетный: в файле от низа последней карточки (645) до верха
   подвала (720) ровно 75. Паучок в эти 75 и вылезает. */
.bl-rev {
    position: relative;
    padding: 60px 0 75px;
}

/* Свечение справа — та самая задавленная фотография из макета.
   z-index не нужен: у содержимого секции своя позиция, оно и так выше. */
.bl-rev::before {
    content: '';
    position: absolute;
    z-index: 0;
    inset: 0;
    pointer-events: none;
    background: radial-gradient(120% 75% at 100% 32%,
                                rgba(138, 92, 245, .13) 0%,
                                rgba(138, 92, 245, .05) 45%,
                                rgba(138, 92, 245, 0) 72%);
}
.bl-rev > .bl-container { position: relative; z-index: 1; }

/* ── Заголовок и средняя оценка ──────────────────────────────────────────── */
.bl-rev__head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 24px;
    /* Правый край оценки в макете выровнен по колонке карточек, а не по
       контейнеру: 4.9 со звездой кончается на 1196,5 при краю карточки 1197,5. */
    padding-right: 26px;
    margin-bottom: 43px;
}
.bl-rev__title {
    margin: 0;
    font-size: 40px;
    font-weight: 900;
    line-height: 1.1;
    letter-spacing: -0.01em;
}
.bl-rev__score {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex: 0 0 auto;
    font-size: 40px;
    font-weight: 900;
    line-height: 1;
    color: #FFC107;
}
.bl-rev__score img { width: 16.5px; height: 15.5px; }

/* ── Плашка-подсказка «Оставить отзыв можно после…» ──────────────────────── */
/* В макете это прямоугольник с непрозрачностью 50 % — под ней просвечивает
   фон страницы. Сведённый цвет (#4C3384 на нашем фоне) в точности даёт
   --bl-violet под половинной альфой, поэтому так и записано: полупрозрачность
   сохраняет правильный тон и если под плашкой окажется свечение. */
.bl-rev__notice {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 45px;
    padding: 10px 32px;
    border-radius: var(--bl-radius-pill);
    background: rgba(138, 92, 245, .5);
    color: rgba(255, 255, 255, .55);
    font-size: 20px;
    font-weight: 500;
    line-height: 1.2;
    text-align: center;
}
.bl-rev__notice a {
    color: rgba(255, 255, 255, .82);
    text-decoration: underline;
}
.bl-rev__notice a:hover { color: #fff; }

/* ── Форма отзыва ────────────────────────────────────────────────────────
   Формы в макете нет — нарисовано только состояние «оставить отзыв нельзя».
   Поэтому свёрнутая форма выглядит как та же плашка, только активная
   (фиолетовый градиент кнопок), а раскрытая — как карточка уведомления
   из «уведомления.psd»: тот же градиент и та же фиолетовая рамка. */
.bl-rev__form { margin: 0; }
.bl-rev__form-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 45px;
    padding: 10px 32px;
    border-radius: var(--bl-radius-pill);
    background: var(--bl-grad-primary);
    color: var(--bl-text);
    font-size: 20px;
    font-weight: 500;
    line-height: 1.2;
    text-align: center;
    cursor: pointer;
    list-style: none;
    user-select: none;
    transition: filter .18s ease, box-shadow .18s ease;
}
.bl-rev__form-toggle::-webkit-details-marker { display: none; }
.bl-rev__form-toggle:hover {
    filter: brightness(1.12);
    box-shadow: 0 8px 26px rgba(131, 87, 233, .38);
}
.bl-rev__form[open] .bl-rev__form-toggle { border-radius: var(--bl-radius-pill); }

.bl-rev__form-body {
    display: flex;
    flex-direction: column;
    gap: 20px;
    margin-top: 16px;
    padding: 28px 33px 30px;
    border-radius: 31px;
    background: linear-gradient(180deg, #231740 0%, #2F1F54 100%);
    box-shadow: inset 0 0 0 1px rgba(148, 97, 243, .35);
}
.bl-rev__row { display: flex; flex-direction: column; }
.bl-rev__row--captcha { max-width: 320px; }

/* Ввод оценки. Радиокнопки идут в обратном порядке (5→1), поэтому подсветить
   «звезду и всё после неё» удаётся одним общим селектором ~. */
.bl-rev__stars-input {
    display: inline-flex;
    flex-direction: row-reverse;
    justify-content: flex-end;
    gap: 4px;
}
.bl-rev__star-radio {
    position: absolute;
    width: 0;
    height: 0;
    opacity: 0;
}
.bl-rev__star-label {
    font-size: 30px;
    line-height: 1;
    color: rgba(255, 255, 255, .22);
    cursor: pointer;
    transition: color .12s ease, transform .12s ease;
}
.bl-rev__stars-input input:checked ~ label,
.bl-rev__star-label:hover,
.bl-rev__star-label:hover ~ label { color: #FFC107; }
.bl-rev__star-label:hover { transform: scale(1.08); }
.bl-rev__star-radio:focus-visible + .bl-rev__star-label {
    outline: 2px solid var(--bl-violet);
    outline-offset: 2px;
    border-radius: 4px;
}

/* .bl-field — пилюля высотой 47; многострочному полю она не годится. */
.bl-rev__textarea {
    height: auto;
    min-height: 120px;
    padding: 14px 24px;
    border-radius: 24px;
    line-height: 1.45;
    resize: vertical;
}
.bl-rev__submit { align-self: flex-start; }

/* ── Сортировка ──────────────────────────────────────────────────────────── */
.bl-rev__toolbar {
    display: flex;
    align-items: center;
    gap: 24px;
    /* От низа плашки до верха пилюль в макете 46,5. */
    margin: 46.5px 0 27px;
    /* Пилюли выровнены по правому краю карточек, а не контейнера. */
    padding-right: 26px;
}
.bl-rev__sort-label {
    font-size: 20px;
    font-weight: 300;
    line-height: 1;
}
.bl-rev__pills {
    display: flex;
    align-items: center;
    gap: 39px;
    margin-left: auto;
    flex-wrap: wrap;
}
/* Пилюля в макете тоже полупрозрачная (50 %), но её градиент идёт от почти
   чёрного к фиолетовому и при половинной альфе синий уходит за 255 — то есть
   ровно повторить его прозрачным нельзя. Поэтому здесь снятые с макета
   сведённые цвета: на фоне страницы они дают пиксель в пиксель то же самое. */
.bl-rev__pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 22.5px;
    padding: 0 32px;
    border-radius: var(--bl-radius-pill);
    background: linear-gradient(135deg, #291B49 0%, #593CA0 100%);
    color: var(--bl-text);
    font-size: 14px;
    font-weight: 500;
    line-height: 1;
    white-space: nowrap;
    text-decoration: none;
    transition: filter .18s ease, box-shadow .18s ease, transform .18s ease;
}
.bl-rev__pill:hover {
    color: var(--bl-text);
    filter: brightness(1.35);
    transform: translateY(-1px);
}
/* Выбранной сортировки в макете нет — там все три пилюли одинаковые. Берём
   фиолетовый градиент кнопок: он в той же гамме и сразу читается как «выбрано». */
.bl-rev__pill.is-active {
    background: var(--bl-grad-primary);
    box-shadow: 0 4px 14px rgba(131, 87, 233, .45);
}

/* ── Список карточек ─────────────────────────────────────────────────────── */
.bl-rev__list {
    display: flex;
    flex-direction: column;
    gap: 39.5px;
    /* Место справа под паучка: он вылезает за карточку на 25,5. */
    padding-right: 26px;
}

.bl-rev-card {
    position: relative;
    min-height: 119px;
    padding: 14px 33.5px 20px 33px;
    border-radius: 31px;
    /* Ровный градиент, снятый с макета: плоскость по пикселям сходится
       с точностью до единицы, никакой текстуры поверх в макете нет. */
    background: linear-gradient(182deg, #55389A 0%, #7951D6 100%);
}

.bl-rev-card__top {
    display: flex;
    align-items: flex-start;
    gap: 10.5px;
}
.bl-rev-card__avatar {
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    width: 37px;
    height: 36.5px;
    border-radius: 50%;
    background: #fff;
    color: #4A3187;
    font-size: 15px;          /* инициалов теперь две буквы, 18 упиралось в края */
    font-weight: 700;
    line-height: 1;
    letter-spacing: .02em;
    text-transform: uppercase;
}
.bl-rev-card__who {
    min-width: 0;
    padding-top: 6px;
}
.bl-rev-card__name {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    font-size: 14.8px;
    font-weight: 700;
    line-height: 1.15;
}
/* Значка «проверен» в макете нет, но признак есть в данных и он важен:
   делаем его тихой подписью в тон карточки, а не ярким бейджем. */
.bl-rev-card__verified {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-size: 9px;
    font-weight: 500;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .62);
}
.bl-rev-card__date {
    margin-top: 3px;
    font-size: 8.2px;
    font-weight: 400;
    line-height: 1;
    color: rgba(255, 255, 255, .9);
}
.bl-rev-card__stars {
    display: flex;
    gap: 6px;
    margin-left: auto;
    padding-top: .5px;
}
.bl-rev-card__stars img { width: 20.5px; height: 19.5px; }
/* В макете у карточки всегда пять жёлтых звёзд — там нарисован отзыв на пять.
   Недостающие до пяти гасим, иначе оценка на странице отзывов не читается. */
.bl-rev-card__stars img.is-off { opacity: .3; filter: grayscale(1) brightness(1.7); }

.bl-rev-card__text {
    margin: 28.5px 0 0;
    /* Паучок сидит в правом нижнем углу — текст под него не заезжает. */
    padding-right: 92px;
    font-size: 16.35px;
    font-weight: 400;
    line-height: 19.6px;
    word-break: break-word;
    white-space: pre-wrap;
}

/* Паучок вылезает за карточку вправо и вниз — как нарисовано. */
.bl-rev-card__mascot {
    position: absolute;
    right: -25.5px;
    bottom: -29px;
    width: 92px;
    height: 113px;
    pointer-events: none;
    user-select: none;
}

/* Карточка-приглашение, когда одобренных отзывов ещё нет. Текст встаёт туда же,
   где он стоит в настоящем отзыве, — как это сделано и в блоке отзывов
   на главной. Отступ сверху = аватар (36,5) + зазор до текста (28,5). */
.bl-rev__list--empty { margin-top: 46.5px; }
/* Подпись «что заказывали». На странице места больше, чем на витрине, поэтому
   стоит под текстом отдельной строкой и переносится, если ранги длинные.
   Отступ справа тот же, что у текста: под паучка в углу строка не заезжает. */
.bl-rev-card__order {
    margin-top: 14px;
    padding-right: 92px;
    font-size: 13px;
    font-weight: 500;
    letter-spacing: .01em;
    /* Приглушённый белый, а не акцентный фиолетовый: карточка сама фиолетовая,
       и акцент на ней читался тёмным пятном — контраста почти не было. */
    color: rgba(255, 255, 255, .78);
}

.bl-rev-card--empty .bl-rev-card__text { margin-top: 65px; opacity: .85; }

/* ── Пагинация ───────────────────────────────────────────────────────────── */
.bl-rev__pager {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
    margin-top: 46px;
    padding-right: 26px;
}
.bl-rev__pager .bl-rev__pill { padding: 0 24px; }
.bl-rev__pager-info {
    font-size: 15px;
    font-weight: 300;
    color: var(--bl-text-dim);
}

/* ── Адаптив ─────────────────────────────────────────────────────────────
   Ниже 1200 макета нет: страница резиновая, как и остальные. Колонка карточек
   перестаёт отличаться от контейнера — паучку места справа больше не нужно,
   он садится в угол карточки. */
@media (max-width: 1199.98px) {
    .bl-rev { padding: 40px 0 72px; }
    .bl-rev__head { padding-right: 0; margin-bottom: 34px; }
    .bl-rev__title { font-size: 32px; }
    .bl-rev__score { font-size: 32px; }
    .bl-rev__toolbar,
    .bl-rev__list,
    .bl-rev__pager { padding-right: 0; }
    .bl-rev__list { gap: 22px; }
    .bl-rev__pills { gap: 12px; }
    .bl-rev__pill { height: 30px; font-size: 13px; padding: 0 18px; }
    .bl-rev__notice,
    .bl-rev__form-toggle { font-size: 17px; }
    .bl-rev__sort-label { font-size: 17px; }
    .bl-rev-card { min-height: 0; padding: 16px 20px 18px; border-radius: 24px; }
    .bl-rev-card__text { margin-top: 18px; padding-right: 66px; }
    .bl-rev-card__mascot { right: -8px; bottom: -14px; width: 69px; height: 85px; }
}

@media (max-width: 640px) {
    .bl-rev__head {
        flex-direction: row;
        align-items: center;
        flex-wrap: wrap;
        gap: 10px;
    }
    .bl-rev__title { font-size: 26px; }
    .bl-rev__score { font-size: 26px; }
    .bl-rev__toolbar { flex-direction: column; align-items: flex-start; gap: 12px; }
    .bl-rev__pills { margin-left: 0; }
    /* На узком экране звёзды не помещаются в одну строку с именем. */
    .bl-rev-card__top { flex-wrap: wrap; }
    .bl-rev-card__stars { margin-left: 0; width: 100%; padding-top: 10px; }
    .bl-rev-card__text { padding-right: 56px; }
    .bl-rev__form-body { padding: 20px 18px 22px; border-radius: 24px; }
}