/*
 * Блок отзывов Яндекс.Карт — своя замена виджету SmartWidgets.
 * Все размеры/цвета сняты с живого виджета (см. отзывы-яндекс-свой-блок-тз.md).
 *
 * Почему так много «лишних» объявлений: на странице живут Bootstrap 3 и front.css,
 * поэтому внутри блока явно задаём шрифт, кегль, интерлиньяж и box-sizing —
 * у виджета ровно для этого был свой сброс на `#sw-app-… *`.
 * Ховеры — только в @media (hover: hover), чтобы на тачах не залипали.
 */

.ya-rev { position: relative; display: flex; flex-direction: column; width: 100%; max-width: 100%; height: auto; margin: 0 auto; padding: 0; color: #212121; font-family: -apple-system, BlinkMacSystemFont, Roboto, Oxygen-Sans, Ubuntu, Cantarell, sans-serif; font-size: 14px; font-weight: 400; /* тот же интерлиньяж, что у виджета (он наследовал его от body Bootstrap) */ line-height: 1.42857143; text-align: left; background-color: transparent; -webkit-tap-highlight-color: transparent; }

.ya-rev *, .ya-rev *:before, .ya-rev *:after { box-sizing: border-box; outline: 0; }

.ya-rev a { color: #212121; text-decoration: none; box-shadow: none; }
.ya-rev svg { display: block; }
/* стрелки рисуем обводкой: заливка у них должна остаться пустой при любых стилях страницы */
.ya-rev-arrow svg path, .ya-rev-lb-arrow svg path { fill: none; }

.ya-rev-body { display: flex; flex-direction: row; align-content: flex-start; width: 1200px; max-width: 100%; margin: 0 auto; padding: 0; }

/* ——— блок-итог слева ——— */

.ya-rev-box { position: relative; display: flex; flex: 0 0 auto; flex-direction: column; align-items: center; justify-content: flex-start; width: 240px; min-width: 200px; margin: 5px 10px 0 0; padding: 15px; background-color: #fffbf2; border-radius: 4px; }

.ya-rev-box > * { margin-top: 10px; }
.ya-rev-box > *:first-child { margin-top: 0; }

.ya-rev-rating { display: flex; flex-direction: row; align-items: center; justify-content: center; font-size: 20px; font-weight: 500; color: #212121; }

.ya-rev-box .ya-rev-stars { margin-top: 10px; margin-bottom: 3px; }

.ya-rev-source { margin: 30px 0 10px; }
/* картинку намеренно оставляем строчной: у виджета высота этой строки 20.3px, а не 18 */
.ya-rev-source img { height: 18px; width: auto; }

.ya-rev-count { font-size: 12px; color: #757575; }

/* ——— звёзды ——— */

.ya-rev-stars { display: flex; align-items: center; justify-content: flex-start; /* да, 16px при 22px звёздах в шапке — звёзды намеренно вылезают, как у виджета */ height: 16px; margin: 5px 0 3px; }

.ya-rev-star { position: static; flex-shrink: 0; width: 16px; height: 16px; min-width: auto; min-height: auto; margin: 0 2px 0 0; padding: 0; border: 0; background: none; }

/* серые по умолчанию, жёлтыми красим первые N — так короче, чем цепочка «~» у виджета */
.ya-rev-stars > .ya-rev-star use { fill: #d8d8d8; }
.ya-rev-stars[data-stars="1"] > .ya-rev-star:nth-child(-n+1) use,
.ya-rev-stars[data-stars="2"] > .ya-rev-star:nth-child(-n+2) use,
.ya-rev-stars[data-stars="3"] > .ya-rev-star:nth-child(-n+3) use,
.ya-rev-stars[data-stars="4"] > .ya-rev-star:nth-child(-n+4) use,
.ya-rev-stars[data-stars="5"] > .ya-rev-star:nth-child(-n+5) use { fill: #ffcc00; }

/* звезда с дробной заливкой: серая подложка + жёлтая копия, обрезанная clip-path */
.ya-rev-star-block { position: relative; flex-shrink: 0; /* 24, а не 22: у виджета блок раздувался до min-content (звезда 22 + её отступ 2) */ width: 24px; height: 22px; margin: 0 2px 0 0; }

.ya-rev-stars-big .ya-rev-star { width: 22px; height: 22px; }
.ya-rev-star-block > .ya-rev-star use { fill: #d8d8d8; }

.ya-rev-clip { position: absolute; top: 0; left: 0; width: 100%; height: 100%; margin: 0; padding: 0; background: none; border-radius: 0; box-shadow: none; }

.ya-rev-clip .ya-rev-star use { fill: #ffcc00; }

/* дробная заливка: у звёзд правее рейтинга жёлтая копия обрезается полностью */
.ya-rev-stars-big .ya-rev-clip { clip-path: inset(0 100% 0 0); }
.ya-rev-stars-big[data-stars="1"] .ya-rev-star-block:nth-child(-n+1) > .ya-rev-clip,
.ya-rev-stars-big[data-stars="2"] .ya-rev-star-block:nth-child(-n+2) > .ya-rev-clip,
.ya-rev-stars-big[data-stars="3"] .ya-rev-star-block:nth-child(-n+3) > .ya-rev-clip,
.ya-rev-stars-big[data-stars="4"] .ya-rev-star-block:nth-child(-n+4) > .ya-rev-clip,
.ya-rev-stars-big[data-stars="5"] .ya-rev-star-block:nth-child(-n+5) > .ya-rev-clip { clip-path: inset(0 0 0 0); }

/* ——— карусель ——— */

.ya-rev-list { position: relative; display: flex; flex: 1 1 auto; flex-direction: column; width: 100%; min-width: 0; min-height: 180px; padding: 7px 5px 0; overflow: hidden; }

.ya-rev-track { position: relative; display: flex; flex-direction: row; align-items: flex-start; justify-content: flex-start; width: 100%; padding-bottom: 5px; transform: translate3d(0, 0, 0); transition: transform .3s ease-out; }

.ya-rev-track.ya-rev-nofx { transition: none; }

.ya-rev-item { position: relative; display: flex; flex-direction: column; flex-shrink: 0; width: 360px; margin-right: 30px; padding: 15px; background-color: #fff; border: 0; border-radius: 10px; box-shadow: 0 2px 2px 0 rgba(0, 0, 0, .14), 0 3px 1px -2px rgba(0, 0, 0, .12), 0 1px 5px 0 rgba(0, 0, 0, .2); }

/* ——— карточка: шапка ——— */

.ya-rev-item-header { position: relative; display: flex; flex-wrap: nowrap; margin-bottom: 20px; text-align: left; }

.ya-rev-item-col-left { position: relative; display: flex; align-items: center; flex-shrink: 0; }

/* без аватара блок остаётся пустым и нулевой ширины — так же, как у виджета */
.ya-rev-item-photo { position: relative; display: flex; align-items: center; margin-right: 20px; }

.ya-rev-avatar { width: 60px; height: 60px; max-width: none; border-radius: 50%; }

.ya-rev-item-col-right { position: relative; display: flex; flex-flow: row; justify-content: center; width: 100%; min-width: 0; }

.ya-rev-item-user { display: flex; flex-flow: column; align-items: flex-start; justify-content: center; min-width: 0; font-size: 12px; line-height: 1.5em; font-weight: 400; }

.ya-rev-item-date { margin: 5px 0 0; font-size: 6.67px; line-height: 13px; letter-spacing: .8px; color: #999; }

.ya-rev-item-name { display: flex; flex-direction: row; align-items: center; justify-content: center; width: 100%; min-width: 0; }

.ya-rev-item-name a { color: #212121; text-decoration: none; }

.ya-rev-item-info { display: flex; flex-grow: 1; align-items: center; justify-content: flex-end; padding-left: 12px; }

/* ——— карточка: тело ——— */

.ya-rev-item-message { flex: 1; }

.ya-rev-item-images { position: relative; max-width: 100%; margin: 0 0 12px; }

.ya-rev-item-images-list { display: flex; flex-direction: row; align-items: center; justify-content: flex-start; padding-bottom: 5px; padding-right: 3px; overflow-x: auto; overflow-y: hidden; overscroll-behavior: contain; }

.ya-rev-item-image { display: flex; align-items: center; justify-content: center; flex-shrink: 0; height: 60px; max-width: 90px; margin: 4px 4px 0 0; background: #fff; border-radius: 5px; overflow: hidden; cursor: pointer; }

.ya-rev-item-image:last-child { margin-right: 0; }
.ya-rev-item-image > img { height: 60px; width: auto; }

.ya-rev-item-body { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; align-items: start; /* 3 строки по 20.8px: жёстко в px, потому что единица lh есть не во всех браузерах */ min-height: 62.4px; max-height: 62.4px; overflow: hidden; font-size: 16px; line-height: 1.3; color: #212121; text-align: left; }

.ya-rev-item-body.ya-rev-full { display: block; height: auto; max-height: none; -webkit-line-clamp: unset; }

.ya-rev-item-text { width: 100%; }

.ya-rev-item-message-btn { display: flex; align-items: center; justify-content: space-between; margin-top: 10px; }

.ya-rev-readmore { font-size: 13px; color: #212121; }
/* пустая кнопка всё равно держит высоту строки, иначе карточки разъезжаются */
.ya-rev-readmore:empty:after { content: "-"; color: transparent; }
.ya-rev-readmore:not(:empty) { font-weight: 300; cursor: pointer; }

/* ——— карточка: низ ——— */

.ya-rev-item-bottom { display: flex; min-height: 20px; margin-top: 15px; }

/* селектор с тегом — иначе общий сброс `.ya-rev a { text-decoration:none }` съест подчёркивание */
.ya-rev a.ya-rev-source-link { display: flex; align-items: center; font-size: 12px; color: #212121; text-decoration: underline; cursor: pointer; }

.ya-rev-reaction { display: flex; flex-grow: 1; align-items: center; justify-content: flex-end; }

.ya-rev-thumbs-up { display: flex; flex-flow: row; align-items: center; font-size: 8px; color: #212121; }

.ya-rev-reaction-ico { width: 20px; height: 20px; margin-right: 3px; }
.ya-rev-reaction-ico use { fill: #4caf50; stroke: #4caf50; }

/* ——— стрелки и пагинация ——— */

.ya-rev-bottom { display: flex; flex-direction: row; align-items: center; justify-content: flex-end; }

.ya-rev-arrow { position: relative; z-index: 10; display: flex; /* не сжимаем: всю нехватку ширины должна съедать полоска пагинации, как у виджета */ flex: 0 0 32px; align-items: center; justify-content: center; width: 32px; height: 32px; margin: 20px 10px 0 0; border-radius: 50%; background-color: #f5f5f5; color: #212121; cursor: pointer; transition: transform .2s ease-out; }

.ya-rev-next { margin-right: 20px; }
.ya-rev-arrow svg { width: 16px; height: 16px; }

.ya-rev-pag { position: relative; z-index: 10; display: flex; flex-shrink: 1; align-items: center; justify-content: center; width: 100%; min-width: 0; /* высоту задают сами полоски: на мобильном они скрыты, и ряд схлопывается в ноль */ margin: 20px 20px 0 0; }

.ya-rev-pag > span { flex-grow: 1; width: auto; height: 2px; margin: 0; border-radius: 0; background: #000; opacity: .05; cursor: pointer; }

/* фирменная терракота вместо синего цвета виджета */
.ya-rev-pag > span.ya-rev-on { background: #d9531e; opacity: 1; }
.ya-rev-pag > span:first-child { border-radius: 1px 0 0 1px; }
.ya-rev-pag > span:last-child { border-radius: 0 1px 1px 0; }

/* ——— тонкий скроллбар ленты фото ——— */

.ya-rev-scroll::-webkit-scrollbar { width: 4px; height: 4px; background-color: rgba(158, 158, 158, .12); }
.ya-rev-scroll::-webkit-scrollbar-thumb { background-color: #9e9e9e; border-radius: 2px; }

/* ——— лайтбокс ——— */

.ya-rev-lb-root, .ya-rev-lb-root * { box-sizing: border-box; }

.ya-rev-lb-overlay { position: fixed; top: 0; left: 0; z-index: 10001; width: 100%; height: 100%; background: #000; opacity: .5; }

.ya-rev-lb { position: fixed; top: 10%; left: 10%; z-index: 10002; display: flex; flex-flow: row wrap; align-items: center; justify-content: center; width: 80%; height: 60%; background-color: #fff; border-radius: 5px; font-family: -apple-system, BlinkMacSystemFont, Roboto, Oxygen-Sans, Ubuntu, Cantarell, sans-serif; }

.ya-rev-lb-close { position: absolute; top: 10px; right: 10px; width: 20px; height: 20px; cursor: pointer; background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Crect x='1.41431' width='20' height='2' rx='1' transform='rotate(45 1.41431 0)' fill='%238b8b8b'/%3E%3Crect y='14.1421' width='20' height='2' rx='1' transform='rotate(-45 0 14.1421)' fill='%238b8b8b'/%3E%3C/svg%3E"); background-position: center center; background-repeat: no-repeat; background-size: 80%; transition: transform .6s; }

.ya-rev-lb-main { width: 80%; height: 100%; padding: 20px; }

.ya-rev-lb-image { position: relative; width: 100%; height: 100%; background-repeat: no-repeat; background-size: contain; background-position: center center; }

.ya-rev-lb-arrow { position: absolute; top: 50%; z-index: 2; display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; margin-top: -20px; background-color: rgba(0, 0, 0, .46); border-radius: 5px; color: #fff; cursor: pointer; }

.ya-rev-lb-arrow svg { width: 18px; height: 18px; }
.ya-rev-lb-prev { left: 0; }
.ya-rev-lb-next { right: 0; }

.ya-rev-lb-list { width: 20%; height: 100%; padding: 40px 10px 20px; }

.ya-rev-lb-list-body { display: flex; flex-direction: column; align-items: center; justify-content: flex-start; width: 100%; height: 100%; overflow-x: hidden; overflow-y: auto; }

.ya-rev-lb-list-body img { flex-shrink: 0; width: 90px; height: auto; margin-top: 10px; background: #fff; border-radius: 5px; opacity: .5; cursor: pointer; }

.ya-rev-lb-list-body img:first-child { margin-top: 0; }
.ya-rev-lb-list-body img.ya-rev-on { opacity: 1; }

@media only screen and (min-width: 1280px) {
    .ya-rev-lb { width: 60%; left: 20%; }
}

/* ——— единственный брейкпоинт, как у виджета ——— */

@media only screen and (max-width: 480px) {
    .ya-rev { width: auto; max-width: 100%; min-width: 100%; margin: 0; padding: 0; }
    .ya-rev-body { width: auto; max-width: 100%; flex-direction: column; margin: 0; padding: 0; }
    /* верхние 5px отступа виджет на мобильном не сбрасывал — оставляем как есть */
    .ya-rev-box { width: auto; margin-right: 0; margin-bottom: 40px; }
    .ya-rev-box .ya-rev-source { margin-top: 10px; margin-bottom: 0; }
    .ya-rev-bottom { flex-wrap: wrap; justify-content: center; }
    .ya-rev-pag { margin-right: 0; }
    /* полоски на узком экране виджет прятал, оставались только стрелки по центру */
    .ya-rev-pag > span { display: none; }
    .ya-rev-next { margin-right: 0; }
    .ya-rev-item-col-right { flex-flow: column; }
    .ya-rev-item-info { justify-content: flex-start; padding-left: 0; }
    .ya-rev-item-user { font-size: 11px; }

    .ya-rev-lb { flex-flow: column; width: 90%; left: 5%; height: 80%; }
    .ya-rev-lb-main { width: 100%; height: 75%; padding-top: 40px; }
    .ya-rev-lb-list { width: 100%; height: 25%; padding: 20px; }
    .ya-rev-lb-list-body { flex-direction: row; justify-content: flex-start; overflow-x: auto; overflow-y: hidden; }
    .ya-rev-lb-list-body img { width: auto; height: 80%; margin-top: 0; margin-right: 10px; }
    .ya-rev-lb-list-body img:last-child { margin-right: 0; }
}

/*
 * Ховеры у виджета: подсветка стрелки синим (это правило у них не было привязано
 * к «анимации») и поворот крестика. Подпрыгивание карточки и scale стрелки жили
 * только под классом sw-animation, который у нашего аккаунта выключен, — не переносим.
 */
@media (hover: hover) {
    .ya-rev-arrow:hover { background-color: #2f75ff; color: #fff; }
    .ya-rev-lb-close:hover { transform: rotate(180deg); }
    .ya-rev-scroll::-webkit-scrollbar-thumb:hover { background-color: #424242; }
}