/**
 * Оценки: Литрес + наша — одним столбиком.
 *
 * Раньше два бейджа позиционировались отдельно, и шаг между ними приходилось
 * угадывать числом: на крупных обложках плашка выше, шаг не совпадал — наезд,
 * на мелких — провал. Теперь оба бейджа лежат в одном контейнере
 * (.book-card__ratings-stack) обычной колонкой flex. Высоту считать не нужно:
 * они физически не могут пересечься ни на каком размере обложки.
 *
 * Родной бейдж темы при этом скрывается, чтобы не дублировался.
 */

.book-card__ratings-stack {
	position: absolute;
	/* Верхняя граница: поднимаем плашки к краю обложки наполовину —
	   на телефоне прежний отступ выглядел слишком низким. */
	top: calc(var(--kz-catalog-rating-float-top, 0.82rem) * 0.5 + calc(var(--kz-ratings-dy, 0) * 1px));
	/* Вплотную к левому краю обложки; смещение — ползунками. */
	left: calc(var(--kz-ratings-dx, 0) * 1px);
	z-index: 12;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: calc(var(--kz-ratings-gap, 3) * 1px);
	transform: none;
	pointer-events: none;

	/* Плашки чуть миниатюрнее штатных; размер — от ползунка. */
	--kz-catalog-rating-badge-font: calc(0.78rem * var(--kz-ratings-scale, 1));
	--kz-catalog-rating-badge-star: calc(0.94rem * var(--kz-ratings-scale, 1));
	--kz-catalog-rating-badge-pad: calc(0.33rem * var(--kz-ratings-scale, 1));
}

/* Родной бейдж темы уступает место столбику. */
.book-card--catalog:has(.book-card__ratings-stack) .book-card__rating-float,
.book-card--folio:has(.book-card__ratings-stack) .book-card__rating-float {
	display: none;
}

/* Плашка — свои размеры и СВОЙ фон, без переменной темы.
   Раньше фон шёл через --kz-catalog-rating-badge-bg: тема подмешивала его
   на телефоне (55% к подложке), и ползунок то не давал эффекта, то менял
   заодно чужие бейджи. Теперь заливка задана напрямую и линейно: 0 —
   совсем прозрачно, 100 — плотный тёмный фон. Работает одинаково на ПК
   и на телефоне. */
.kz-rating-pill {
	display: inline-flex;
	align-items: center;
	gap: var(--kz-catalog-rating-badge-gap, 0.3125rem);
	padding: var(--kz-catalog-rating-badge-pad, 0.375rem);
	border-radius: var(--kz-catalog-rating-badge-radius, 0.625rem);
	font: 500 var(--kz-catalog-rating-badge-font, 0.8125rem) / 1 var(--kz-font-ui, system-ui, sans-serif);
	color: var(--kz-catalog-rating-badge-fg, #fff);
	background: rgba(12, 16, 24, calc(var(--kz-rating-bg-alpha, 40) / 100));
	-webkit-backdrop-filter: blur(10px) saturate(140%);
	backdrop-filter: blur(10px) saturate(140%);
	letter-spacing: -0.01em;
	font-variant-numeric: tabular-nums;
}

.kz-rating-pill > .book-card__metric-icon,
.kz-rating-pill > .book-card__metric-icon--litres {
	display: block;
	flex: 0 0 auto;
	width: var(--kz-catalog-rating-badge-star, 1rem);
	height: var(--kz-catalog-rating-badge-star, 1rem);
	max-width: none;
	color: inherit;
	object-fit: contain;
}

/* Карусели: небольшой вылет плашек за край обложки — как на остальных карточках,
   но дозированно. Смещение только для слайдов, сетку и крупные обложки не трогаем,
   поэтому «сильнее вылезти» на других карточках не может.
   Размер вылета намеренно мал (~4 px): между слайдами есть зазор, и даже когда
   соседняя карточка приподнимается при наведении, бейджи не соприкасаются.
   Если нужно ещё — двигай ползунками сдвига. */
.kz-infinity-slider .slider__item .book-card__ratings-stack,
.kz-home-slider__item .book-card__ratings-stack,
.kz-carousel__slide .book-card__ratings-stack,
.kz-home-books__item .book-card__ratings-stack,
.kz-scroll-rail .book-card__ratings-stack {
	left: calc(-0.25rem + var(--kz-ratings-dx, 0) * 1px);
	top: calc(
		var(--kz-catalog-rating-float-top, 0.82rem) * 0.5
		- 0.25rem
		+ calc(var(--kz-ratings-dy, 0) * 1px)
	);
}

/* ——— блок «Похожие книги» на странице книги ———
   Он грузится отдельно (отложенный вывод), и в моём списке каруселей его не было,
   поэтому плашки оставались внутри обложки. Даём тот же вылет за край. */
.kz-related-books .book-card__ratings-stack,
.kz-related-books__grid .book-card__ratings-stack,
.kz-related-books__grid--skeleton .book-card__ratings-stack {
	left: calc(-0.25rem + var(--kz-ratings-dx, 0) * 1px);
	top: calc(
		var(--kz-catalog-rating-float-top, 0.82rem) * 0.5
		- 0.25rem
		+ calc(var(--kz-ratings-dy, 0) * 1px)
	);
}

/* ——— подвал: ссылки «Политика конфиденциальности | Политика cookies | Обратная связь | Правообладателям» ———
   Компактные плашки: аккуратные отступы (прошлый вариант был крупноват),
   белый текст, скругление без рамки. Разделители «|» — обычный текст в разметке,
   поэтому гасим их размером шрифта у контейнера и возвращаем размер самим ссылкам. */
.site-footer__intro p {
	font-size: 0;          /* прячем текстовые разделители «|» */
	line-height: 0;
	margin: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem;
	align-items: center;
}

.site-footer__intro a {
	display: inline-flex;
	align-items: center;
	padding: 0.22rem 0.65rem;
	border-radius: 999px;
	font-size: 0.8125rem;
	line-height: 1.35;
	font-weight: 500;
	text-decoration: none;
	color: #fff;
	background: color-mix(in srgb, var(--kz-accent, #3b84f6) 16%, transparent);
	border: 0;
	transition: background-color 0.18s ease, color 0.18s ease;
}

.site-footer__intro a:hover,
.site-footer__intro a:focus-visible {
	color: #fff;
	background: color-mix(in srgb, var(--kz-accent, #3b84f6) 30%, transparent);
}

/* Ссылка «Knigoline» в строке копирайта — в том же стиле: белая, без подчёркивания. */
.site-info a,
.site-footer__copy a,
.kz-footer-bottom a,
.site-footer__bottom a {
	color: #fff;
	text-decoration: none;
	font-weight: 500;
	transition: color 0.18s ease;
}

.site-info a:hover,
.site-footer__copy a:hover,
.kz-footer-bottom a:hover,
.site-footer__bottom a:hover {
	color: var(--kz-accent, #3b84f6);
	text-decoration: none;
}

@media (max-width: 640px) {
	.site-footer__intro a {
		padding: 0.2rem 0.55rem;
		font-size: 0.75rem;
	}
}

/* ——— блок оценок на странице книги: слева, под данными книги ——— */

.kz-single-ratings {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 0.4rem;
	margin: 0.6rem 0 0;
}

.kz-single-rating {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	padding: 0.28rem 0.7rem;
	border: 1px solid var(--kz-border, #d8e0e8);
	border-radius: 999px;
	font-size: 0.9rem;
	line-height: 1.25;
	background: color-mix(in srgb, var(--kz-surface, #ffffff) 86%, transparent);
}

.kz-single-rating__name {
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
	font-weight: 600;
	color: var(--kz-muted, #6b7a8d);
}

.kz-single-rating__value {
	font-weight: 700;
	color: var(--kz-fg, #1b2430);
}

.kz-single-rating__count {
	color: var(--kz-muted, #6b7a8d);
}

.kz-single-rating--litres .kz-single-rating__name::before {
	content: "";
	width: 15px;
	height: 15px;
	flex: 0 0 auto;
	background: url("/wp-content/themes/knigazor-theme/assets/img/litres-mark.svg") center / contain no-repeat;
}

.kz-single-rating--own .book-card__metric-icon {
	width: 15px;
	height: 15px;
}

@media (max-width: 640px) {
	.kz-single-rating {
		font-size: 0.85rem;
	}
}


/* ——— Цвета по схеме темы: на тёмной — белым, на светлой — тёмным ———
   Раньше текст плашек был всегда белым. На светлой теме белые цифры поверх
   светлых обложек не читались. Класс схемы тема ставит на <html>:
   kz-scheme-dark — тёмная; его отсутствия достаточно, чтобы считать светлой. */

html.kz-scheme-dark .kz-rating-pill,
body.kz-scheme-dark .kz-rating-pill {
	color: #fff !important;
	background: rgba(12, 16, 24, calc(var(--kz-rating-bg-alpha, 45) / 100)) !important;
}

html:not(.kz-scheme-dark):not(.kz-scheme-light) .kz-rating-pill,
html.kz-scheme-light .kz-rating-pill {
	color: #0f1620 !important;
	background: rgba(255, 255, 255, calc(var(--kz-rating-bg-alpha, 45) / 100)) !important;
}

html:not(.kz-scheme-dark):not(.kz-scheme-light) .kz-rating-pill .book-card__metric-icon,
html.kz-scheme-light .kz-rating-pill .book-card__metric-icon {
	filter: none;
}

/* Подвал: плашки «Политика…», «Обратная связь». */
html.kz-scheme-dark .site-footer__intro a,
body.kz-scheme-dark .site-footer__intro a {
	color: #fff !important;
	background: color-mix(in srgb, var(--kz-accent, #3b84f6) 16%, transparent) !important;
}

html:not(.kz-scheme-dark):not(.kz-scheme-light) .site-footer__intro a,
html.kz-scheme-light .site-footer__intro a {
	color: #12213a !important;
	background: color-mix(in srgb, var(--kz-accent, #3b84f6) 20%, transparent) !important;
}

/* Кнопки «Мне повезёт» и стрелка вверх — тема рисует их белым по белому. */
html:not(.kz-scheme-dark):not(.kz-scheme-light) .site-footer__action,
html.kz-scheme-light .site-footer__action {
	color: #12213a !important;
	background: color-mix(in srgb, var(--kz-accent, #3b84f6) 14%, transparent) !important;
	border-color: color-mix(in srgb, var(--kz-accent, #3b84f6) 26%, transparent) !important;
}

html:not(.kz-scheme-dark):not(.kz-scheme-light) .site-footer__action svg,
html.kz-scheme-light .site-footer__action svg {
	color: inherit !important;
	stroke: currentColor;
}