/* ═══════════════════════════════════════════════════════════════════════
   Siluette — отзывы (Amazon-структура). Префикс .silr-, всё в scope
   корня .silr-root. Гамма: текст #0F1111, вторичный #565959,
   тонкие рамки #D5D9D9/#888C8C, бейдж verified — зелёная пилюля,
   полоски гистограммы — белое поле с чёткой рамкой и оранжевым
   заполнением (--silr-fill), тёплый акцент — янтарь #F59E0B
   (--silr-accent; ржавый Amazon #C45500 убран по просьбе владельца
   21.08.2026). Звёзды и шрифты — сайта (sil-stars
   подхватываются через wc_get_rating_html, размеры переопределены
   только для крупной сводки).
   ═══════════════════════════════════════════════════════════════════════ */

.silr-root {
	--silr-text: #0f1111;
	--silr-muted: #565959;
	--silr-line: #e7e7e7;
	--silr-border: #d5d9d9;
	--silr-border-strong: #888c8c;
	color: var(--silr-text);
}

.silr-root * {
	box-sizing: border-box;
}

.silr-heading {
	font-size: 21px;
	font-weight: 700;
	margin: 0 0 16px;
}

/* ── Раскладка: слева сводка, справа контент; мобильные — в столбик ── */
.silr-grid {
	display: grid;
	/* 280px под фиксированные колонки гистограммы (56+160+40+2×8) */
	grid-template-columns: 280px minmax(0, 1fr);
	gap: 16px 36px;
}
@media (max-width: 768px) {
	.silr-grid {
		grid-template-columns: 1fr;
	}
}

/* ═══ Сводка: средний рейтинг + гистограмма ═══ */

.silr-summary__avg {
	display: flex;
	align-items: center;
	gap: 10px;
}

/* Крупные звёзды в сводке: sil-stars из child-темы, но 22px. */
.silr-summary__stars .star-rating.sil-stars {
	width: 110px;
	height: 22px;
}
.silr-summary__stars .star-rating.sil-stars svg {
	width: 22px;
	height: 22px;
}

.silr-summary__score {
	font-size: 16px;
	font-weight: 700;
	white-space: nowrap;
}

.silr-summary__total {
	margin: 4px 0 14px;
	font-size: 13px;
	color: var(--silr-muted);
}

/* Щит «подтвержденный покупатель» перед счётчиком отзывов (0.6.0). */
.silr-verified-ico {
	width: 13px;
	height: 13px;
	color: #16a34a;
	margin-right: 5px;
	vertical-align: -2px;
}

.silr-hist {
	list-style: none;
	margin: 0 0 14px;
	padding: 0;
}

.silr-hrow {
	/* ФИКСИРОВАННЫЕ колонки у всех строк одинаковые: полоски строго
	   друг под другом и одной длины, проценты — одной колонкой правее.
	   Ширина кнопки — по содержимому (на мобильном не растягиваем
	   блок на весь экран — решение владельца 20.08.2026). */
	display: grid;
	grid-template-columns: 56px 160px 40px;
	align-items: center;
	gap: 8px;
	padding: 2px 0;
	border: 0;
	margin: 0;
	background: none;
	font: inherit;
	text-align: left;
	cursor: pointer;
}

.silr-hrow:hover .silr-hrow__label,
.silr-hrow.is-active .silr-hrow__label,
.silr-hrow.is-active .silr-hrow__pct {
	text-decoration: underline;
}

.silr-hrow__label,
.silr-hrow__pct {
	font-size: 13px;
	line-height: 20px;
	color: var(--silr-muted);
	white-space: nowrap;
	font-variant-numeric: tabular-nums;
}

.silr-hrow__meter {
	display: block;
	height: 20px;
	border: 1px solid var(--silr-border-strong);
	border-radius: 4px;
	background: #fff; /* незаполненная часть — белая, не серая (просьба владельца) */
	overflow: hidden;
}

.silr-hrow__fill {
	display: block;
	height: 100%;
	background: var(--silr-fill, #ff8a00);
	transition: width 0.25s ease;
}

.silr-hrow__pct {
	text-align: right;
}

/* ═══ ИИ-сводка: пилюли-кнопки ═══ */

/* Пилюля с расширенными данными — кнопка: открывает дровер на теме. */
button.silr-pill {
	cursor: pointer;
	transition: border-color 0.15s, background 0.15s;
}
button.silr-pill:hover,
button.silr-pill:focus-visible {
	border-color: var(--silr-border-strong);
	background: #fafafa;
}
button.silr-pill:focus-visible {
	outline: 2px solid var(--silr-accent, #f59e0b);
	outline-offset: 1px;
}

/* ═══ Ссылка «Смотреть сводку отзывов» у звёздочек товара ═══
   Живёт вне .silr-root (в блоке рейтинга шапки) — цвета напрямую. */

/* Специфичность: тема красит ссылки правилом `.product
   .woocommerce-product-rating a` (0,3,1) и грузится ПОСЛЕ плагина —
   поэтому !important, иначе ссылка получается серой. Кегль 12px:
   функция вторичная, не спорит со звёздами (владелец 21.08). */
.silr-ai-link {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	margin-left: 10px;
	font-size: 12px !important; /* тема перебивает и кегль своим (0,3,1) */
	color: var(--silr-accent, #f59e0b) !important;
	text-decoration: underline;
	cursor: pointer;
}
.silr-ai-link__icon {
	flex-shrink: 0;
}
.silr-ai-link:hover,
.silr-ai-link:focus-visible {
	color: #d97706 !important;
}

/* ═══ Дровер ИИ-сводки (панель справа, как корзина) ═══
   Разметка от woocommerce-product-rating (вне .silr-root): собственная
   палитра. Общий вид — карточки тем; детальный — счётчики и цитаты. */

.silr-drawer {
	position: fixed;
	inset: 0;
	z-index: 99990;
	visibility: hidden;
	pointer-events: none;
}
.silr-drawer.is-open {
	visibility: visible;
	pointer-events: auto;
}
.silr-drawer__overlay {
	position: absolute;
	inset: 0;
	background: rgba(15, 17, 17, 0.45);
	opacity: 0;
	transition: opacity 0.25s ease;
	cursor: pointer;
}
.silr-drawer.is-open .silr-drawer__overlay {
	opacity: 1;
}
.silr-drawer__panel {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	width: min(460px, 100%);
	background: #fff;
	color: #0f1111;
	box-shadow: -8px 0 24px rgba(15, 17, 17, 0.14);
	transform: translateX(100%);
	transition: transform 0.3s ease;
	overflow-y: auto;
	padding: 20px 22px 30px;
	box-sizing: border-box;
}
.silr-drawer.is-open .silr-drawer__panel {
	transform: none;
}
.silr-drawer__close {
	position: absolute;
	top: 8px;
	right: 10px;
	border: 0;
	background: none;
	font-size: 28px;
	line-height: 1;
	color: #565959;
	padding: 8px 12px;
	cursor: pointer;
	border-radius: 6px;
}
.silr-drawer__close:hover {
	background: #f5f5f5;
	color: #0f1111;
}
.silr-drawer__title {
	font-size: 20px;
	font-weight: 700;
	margin: 6px 0 8px;
	padding-right: 36px;
}
.silr-drawer__text {
	font-size: 14px;
	line-height: 1.5;
	margin: 0 0 16px;
}

/* Карточки тем (общий вид, Amerisleep-стиль). */
.silr-drawer__cards {
	display: flex;
	flex-direction: column;
	gap: 10px;
}
.silr-tcard {
	text-align: left;
	border: 1px solid #e7e7e7;
	border-radius: 10px;
	background: #fff;
	padding: 12px 14px;
	cursor: pointer;
	display: flex;
	flex-direction: column;
	gap: 3px;
	font: inherit;
	color: inherit;
	transition: border-color 0.15s, box-shadow 0.15s;
}
.silr-tcard:hover,
.silr-tcard:focus-visible {
	border-color: #d5d9d9;
	box-shadow: 0 1px 5px rgba(15, 17, 17, 0.07);
}
.silr-tcard:focus-visible {
	outline: 2px solid var(--silr-accent, #f59e0b);
	outline-offset: 1px;
}
.silr-tcard__top {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 10px;
}
.silr-tcard__name {
	font-size: 14px;
	font-weight: 700;
}
.silr-tcard__pct {
	/* Пилюля-бейдж в стиле Flowbite «bordered badge»: мягкий фон в тон
	   тексту + тонкая рамка (как бейдж verified на сайте). */
	display: inline-flex;
	align-items: center;
	padding: 1px 8px;
	border-radius: 9999px;
	border: 1px solid;
	font-size: 12px;
	font-weight: 600;
	line-height: 18px;
	white-space: nowrap;
}
.silr-tcard__pct.is-good {
	color: #16a34a;
	background: #f0fdf4;
	border-color: #bbf7d0;
}
.silr-tcard__pct.is-mid {
	color: #d97706;
	background: #fffbeb;
	border-color: #fde68a;
}
.silr-tcard__pct.is-bad {
	color: #dc2626;
	background: #fef2f2;
	border-color: #fecaca;
}
.silr-tcard__meta {
	font-size: 12px;
	color: #565959;
}
.silr-tcard__note {
	font-size: 13px;
	line-height: 1.4;
}
/* Явная подсказка, что карточка раскрывается в цитаты (владелец 21.08):
   мельче, справа внизу, тёмным цветом текста сайта с подчёркиванием —
   зелёный оставлен бейджам, акцент не конкурирует. */
.silr-tcard__more {
	align-self: flex-end;
	display: inline-flex;
	align-items: center;
	gap: 2px;
	margin-top: 4px;
	font-size: 12px;
	font-weight: 600;
	color: #0f1111;
	text-decoration: underline;
	text-underline-offset: 2px;
}
.silr-tcard__arrow {
	font-size: 15px;
	line-height: 1;
	transition: transform 0.15s ease;
}
.silr-tcard:hover .silr-tcard__arrow,
.silr-tcard:focus-visible .silr-tcard__arrow {
	transform: translateX(2px);
}

/* Детальный вид темы (Amazon-стиль). */
.silr-drawer__back {
	border: 0;
	background: none;
	padding: 0 0 12px;
	margin: 0;
	font-size: 13px;
	color: var(--silr-accent, #f59e0b);
	cursor: pointer;
}
.silr-drawer__back:hover,
.silr-drawer__back:focus-visible {
	text-decoration: underline;
}
.silr-drawer__mentions {
	font-size: 14px;
	margin: 0 0 6px;
}
.silr-drawer__posneg {
	font-size: 13px;
	margin: 0 0 8px;
	display: flex;
	gap: 14px;
	flex-wrap: wrap;
}
.silr-drawer__posneg .is-pos { color: #16a34a; }
.silr-drawer__posneg .is-neg { color: #dc2626; }
.silr-drawer__topicnote {
	font-size: 14px;
	line-height: 1.45;
	margin: 0 0 6px;
}

/* Цитаты покупателей. */
.silr-quote {
	margin: 12px 0 0;
	padding: 10px 14px;
	border-left: 3px solid #ff8a00;
	background: #fbf8f4;
	border-radius: 0 8px 8px 0;
}
.silr-quote__text {
	font-size: 13px;
	line-height: 1.5;
	font-style: italic;
}
.silr-quote__foot {
	margin-top: 6px;
	font-size: 12px;
	color: #565959;
	display: flex;
	align-items: center;
	gap: 8px;
	flex-wrap: wrap;
}
.silr-quote__author {
	font-weight: 500;
	color: #0f1111;
}
.silr-quote__stars .star-rating.sil-stars {
	width: 60px;
	height: 12px;
}
.silr-quote__stars .star-rating.sil-stars svg {
	width: 12px;
	height: 12px;
}
.silr-quote__foot .silr-badge {
	flex-shrink: 0;
}

.silr-ai {
	margin: 0 0 18px;
}
.silr-ai__title {
	font-size: 20px;
	font-weight: 700;
	margin: 0 0 8px;
}
.silr-ai__text {
	font-size: 14px;
	line-height: 1.45;
	margin: 0 0 10px;
}
.silr-ai__pills {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0 0 10px;
}
.silr-pill {
	display: inline-flex;
	align-items: center;
	gap: 2px;
	border: 1px solid var(--silr-border);
	border-radius: 16px;
	padding: 4px 12px;
	font-size: 13px;
	background: #fff;
}
.silr-pill b {
	font-weight: 400;
	color: var(--silr-muted);
}

/* ═══ Список карточек ═══ */

.silr-list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.silr-card {
	padding: 18px 0;
	border-top: 1px solid var(--silr-line);
}
.silr-card:first-child {
	border-top: 0;
	padding-top: 4px;
}

.silr-card__name {
	font-size: 13px;
	font-weight: 500;
}

.silr-card__rating {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 8px;
	margin: 4px 0 2px;
}

.silr-card__title {
	font-size: 14px;
	font-weight: 700;
	margin: 0;
	display: inline;
}

.silr-card__meta {
	margin: 2px 0 8px;
	font-size: 13px;
	color: var(--silr-muted);
}

/* Бейдж «Подтвержденный клиент» — пилюля в стиле Flowbite
   «Badges with icon» (soft фон + тонкая рамка + иконка 12px + текст
   12px/500), зелёный сайта: #16a34a (галочки siluette-ui), фон и рамка
   — светло-зелёная гамма; владелец 19.08.2026: «как кнопка Купить». */
.silr-badge {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	padding: 1px 8px;
	border: 1px solid #bbf7d0;
	border-radius: 9999px;
	background: #f0fdf4;
	color: #16a34a;
	font-size: 12px;
	font-weight: 500;
	line-height: 18px;
}
.silr-badge__icon {
	width: 12px;
	height: 12px;
	fill: currentColor;
}

/* Текст отзыва со сворачиванием длинных (высоту задаёт JS через
   --silr-clamp; градиент подчёркивает, что текст продолжается). */
.silr-text {
	font-size: 14px;
	line-height: 1.5;
}
.silr-text.is-clamped {
	max-height: var(--silr-clamp, 220px);
	overflow: hidden;
	position: relative;
}
.silr-text.is-clamped::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 44px;
	background: linear-gradient(rgba(255, 255, 255, 0), #fff);
	pointer-events: none;
}

.silr-readmore {
	border: 0;
	background: none;
	padding: 4px 0;
	margin: 0;
	font-size: 13px;
	font-weight: 700;
	color: var(--silr-text);
	cursor: pointer;
}
.silr-readmore:hover {
	text-decoration: underline;
}

/* Фото отзыва */
.silr-card__photos {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 10px 0 4px;
}
.silr-photo {
	padding: 0;
	border: 1px solid var(--silr-border);
	border-radius: 6px;
	background: none;
	cursor: zoom-in;
	line-height: 0;
}
.silr-photo img {
	width: 64px;
	height: 64px;
	object-fit: cover;
	border-radius: 5px;
	display: block;
}

/* Низ списка: счётчик + «Показать ещё» */
.silr-listfoot {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 12px;
	padding: 14px 0 4px;
}
.silr-count {
	font-size: 13px;
	color: var(--silr-muted);
}
.silr-more {
	border: 1px solid var(--silr-border);
	border-radius: 16px;
	background: #fff;
	padding: 5px 13px;
	font-size: 13px;
	line-height: 20px;
	cursor: pointer;
	transition: border-color 0.15s;
}
.silr-more:hover {
	border-color: var(--silr-border-strong);
}
.silr-more[hidden] {
	display: none;
}

.silr-empty {
	font-size: 14px;
	color: var(--silr-muted);
}

.silr-notice {
	border: 1px solid var(--silr-accent, #f59e0b);
	border-radius: 8px;
	padding: 10px 14px;
	font-size: 13px;
	color: var(--silr-accent, #f59e0b);
	background: #fff;
}

/* ═══ Форма отзыва ═══ */

.silr-form-wrap {
	margin-top: 28px;
	border-top: 1px solid var(--silr-line);
	padding-top: 20px;
}

.silr-form__title {
	font-size: 18px;
	font-weight: 700;
	margin: 0 0 14px;
}

.silr-form__logged {
	font-size: 13px;
	color: var(--silr-muted);
	margin: 0 0 12px;
}

/* Гостю при comment_registration — приглашение войти вместо формы. */
.silr-form__login {
	font-size: 14px;
}
.silr-form__login-link {
	font-weight: 600;
}

.silr-form__cols {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 0 16px;
}
@media (max-width: 600px) {
	.silr-form__cols {
		grid-template-columns: 1fr;
	}
}

.silr-field {
	margin-bottom: 14px;
}
.silr-field label,
.silr-field .silr-field__label {
	display: block;
	font-size: 13px;
	font-weight: 600;
	margin-bottom: 6px;
}
.silr-field input[type="text"],
.silr-field input[type="email"],
.silr-field textarea {
	width: 100%;
	border: 1px solid var(--silr-border-strong);
	border-radius: 6px;
	padding: 9px 10px;
	font: inherit;
	font-size: 14px;
	background: #fff;
}
.silr-field textarea {
	resize: vertical;
}
.silr-field input[type="file"] {
	font-size: 13px;
}
.silr-field__hint {
	display: block;
	margin-top: 4px;
	font-size: 12px;
	color: var(--silr-muted);
}

/* Выбор оценки звёздами: радиокнопки + чистый CSS. Порядок DOM 5..1,
   визуально row-reverse даёт 1..5 СЛЕВА направо; селекторы «~» и «+»
   берут метки ПОСЛЕ input'а в DOM = ЛЕВЕЕ на экране, поэтому наведение
   или выбор N-й звезды заливают звёзды 1..N включительно. */
.silr-pick {
	display: inline-flex;
	flex-direction: row-reverse;
	gap: 2px;
}
.silr-pick input {
	position: absolute;
	width: 1px;
	height: 1px;
	opacity: 0;
	pointer-events: none;
}
.silr-pick label {
	cursor: pointer;
	display: inline-flex;
	margin: 0 !important;
	padding: 0 !important;
}
.silr-pick svg {
	width: 28px;
	height: 28px;
	fill: #d5d9d9;
	stroke: var(--silr-border-strong);
	stroke-width: 1.7;
	stroke-linejoin: round;
	transition: fill 0.12s;
}
.silr-pick label:hover svg,
.silr-pick label:hover ~ label svg,
.silr-pick input:checked ~ label svg,
.silr-pick input:focus-visible + label svg {
	fill: #f59e00;
	stroke: #f59e00;
}
.silr-pick input:focus-visible + label svg {
	outline: 2px solid var(--silr-accent, #f59e0b);
	outline-offset: 2px;
	border-radius: 4px;
}

.silr-form__submit {
	margin-top: 4px;
}

/* ═══ Лайтбокс для фото ═══ */

.silr-lightbox {
	position: fixed;
	inset: 0;
	z-index: 99999;
	background: rgba(15, 17, 17, 0.88);
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: zoom-out;
}
.silr-lightbox img {
	max-width: 92vw;
	max-height: 88vh;
	border-radius: 6px;
	background: #fff;
}
.silr-lightbox__btn {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	border: 0;
	background: rgba(255, 255, 255, 0.14);
	color: #fff;
	font-size: 28px;
	line-height: 1;
	padding: 14px 12px;
	border-radius: 8px;
	cursor: pointer;
}
.silr-lightbox__btn:hover {
	background: rgba(255, 255, 255, 0.28);
}
.silr-lightbox__prev {
	left: 12px;
}
.silr-lightbox__next {
	right: 12px;
}
.silr-lightbox__close {
	top: 16px;
	right: 12px;
	transform: none;
	font-size: 26px;
	line-height: 1;
}

/* ═══ Сообщение об ошибке загрузки списка (0.9.0) ═══ */

.silr-error {
	margin: 10px 0 0;
	color: #b32d2e;
	font-size: 0.92em;
}