/**
 * Apex Product Compare.
 *
 * Ползва брандовите шрифтове/цветове на темата през наследяване, не ги
 * преоткрива. Локалните custom properties са единствената точка за настройка.
 */

.apex-cmp,
.apex-cmp-bar,
.apex-cmp-toast {
	--cmp-red: #e30613;
	--cmp-navy: #1b1f3b;
	--cmp-ink: #12141f;
	--cmp-muted: #6b7280;
	--cmp-line: #e5e7eb;
	--cmp-bg: #f7f8fa;
	--cmp-ok-bg: #e8f7ee;
	--cmp-ok-ink: #1a7f43;
	--cmp-warn-bg: #fdeaea;
	--cmp-warn-ink: #c0392b;
	--cmp-radius: 6px;

	/* Огледало на $font__heading / $font__main в темата
	   (sass/abstracts/variables/_typography.scss). Шрифтовете са локални в темата
	   (@font-face); тук само ги ползваме — нищо не се зарежда наново. */
	--cmp-font-heading: "Akrobat", "Roboto", "Arial Narrow", system-ui, sans-serif;
	--cmp-font-body: "Roboto", -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", sans-serif;
}

/* --------------------------------------------------------------------------
 * Бутонът „Сравни" — активно състояние (markup-ът е в темата)
 * -------------------------------------------------------------------------- */

.apex-action--compare.is-active {
	color: var(--cmp-red);
}

.apex-action--compare.is-loading {
	opacity: 0.5;
	pointer-events: none;
}

/* --------------------------------------------------------------------------
 * Toast — малкият модал, auto-hide след 3s
 * -------------------------------------------------------------------------- */

.apex-cmp-toast {
	position: fixed;
	z-index: 10000;
	top: 24px;
	left: 50%;
	max-width: min(420px, calc(100vw - 32px));
	padding: 14px 20px;
	border-radius: var(--cmp-radius);
	box-shadow: 0 8px 28px rgba(0, 0, 0, 0.16);
	font-size: 15px;
	line-height: 1.4;
	text-align: center;
	opacity: 0;
	transform: translate(-50%, -12px);
	transition: opacity 0.22s ease, transform 0.22s ease;
	pointer-events: none;
}

.apex-cmp-toast.is-visible {
	opacity: 1;
	transform: translate(-50%, 0);
}

.apex-cmp-toast.is-success {
	background: var(--cmp-navy);
	color: #fff;
}

.apex-cmp-toast.is-error {
	background: var(--cmp-warn-bg);
	color: var(--cmp-warn-ink);
	border: 1px solid rgba(192, 57, 43, 0.25);
}

@media (prefers-reduced-motion: reduce) {
	.apex-cmp-toast {
		transition: none;
	}
}

/* --------------------------------------------------------------------------
 * Sticky bar
 * -------------------------------------------------------------------------- */

.apex-cmp-bar {
	position: fixed;
	z-index: 9000;
	right: 0;
	bottom: 0;
	left: 0;
	display: none;
	align-items: stretch;
	/* Съдържанието е центрирано в лентата (макет), а не притиснато вдясно. */
	justify-content: center;
	gap: 0;
	/* Фиксирана височина по макет (вкл. червената линия — border-box). */
	box-sizing: border-box;
	min-height: 188px;
	padding: 0;
	background: #fff;
	border-top: 3px solid var(--cmp-red);
	box-shadow: 0 -6px 24px rgba(0, 0, 0, 0.1);
}

.apex-cmp-bar.is-visible {
	display: flex;
}

.apex-cmp-bar__slots {
	display: flex;
	min-width: 0;
}

/* Слотовете са разделени с тънки вертикални линии (макет). */
.apex-cmp-bar__slot {
	position: relative;
	display: flex;
	align-items: center;
	gap: 16px;
	width: 300px;
	min-width: 0;
	padding: 16px 44px 16px 20px;
	border-left: 1px solid var(--cmp-line);
}

.apex-cmp-bar__thumb {
	width: 72px;
	height: 60px;
	object-fit: contain;
	flex-shrink: 0;
}

.apex-cmp-bar__info {
	display: flex;
	flex-direction: column;
	gap: 6px;
	min-width: 0;
}

.apex-cmp-bar__name {
	display: -webkit-box;
	overflow: hidden;
	color: var(--cmp-ink);
	font-size: 14px;
	font-weight: 700;
	line-height: 1.3;
	text-decoration: none;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
}

.apex-cmp-bar__name:hover {
	color: var(--cmp-red);
}

.apex-cmp-bar__remove {
	position: absolute;
	top: 16px;
	right: 14px;
	display: flex;
	padding: 0;
	background: none;
	border: 0;
	color: var(--cmp-muted);
	cursor: pointer;
}

.apex-cmp-bar__remove:hover {
	color: var(--cmp-red);
}

/* „Изчисти всички" стои НАД бутона (макет), не до него. */
.apex-cmp-bar__actions {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: center;
	gap: 14px;
	flex-shrink: 0;
	padding: 16px 24px 16px 32px;
	border-left: 1px solid var(--cmp-line);
}

.apex-cmp-bar__clear {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 0;
	background: none;
	border: 0;
	color: var(--cmp-ink);
	font-family: var(--cmp-font-body);
	font-size: 14px;
	white-space: nowrap;
	cursor: pointer;
}

.apex-cmp-bar__clear:hover {
	color: var(--cmp-red);
}

.apex-cmp-bar__cta {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 12px;
	min-width: 260px;
	padding: 16px 30px;
	background: var(--cmp-red);
	color: #fff;
	/* Брандовият заглавен шрифт — същият, който темата ползва за бутоните. */
	font-family: var(--cmp-font-heading);
	font-weight: 700;
	font-size: 15px;
	text-decoration: none;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	white-space: nowrap;
}

.apex-cmp-bar__cta:hover {
	background: var(--cmp-navy);
	color: #fff;
}

/* Не бива да закрива долната част на страницата — правим ѝ място (= височината на лентата). */
.apex-cmp-has-bar {
	padding-bottom: 188px;
}

@media (max-width: 1200px) {
	.apex-cmp-bar__slot {
		width: 240px;
		padding: 12px 38px 12px 14px;
		gap: 10px;
	}

	.apex-cmp-bar__cta {
		min-width: 0;
	}
}

@media (max-width: 900px) {
	.apex-cmp-bar {
		flex-wrap: wrap;
		justify-content: stretch;
		/* Лентата се пренарежда на два реда — фиксираната височина отпада. */
		min-height: 0;
	}

	.apex-cmp-has-bar {
		padding-bottom: 240px;
	}

	.apex-cmp-bar__slots {
		width: 100%;
		overflow-x: auto;
	}

	.apex-cmp-bar__slot {
		flex-shrink: 0;
		width: 200px;
	}

	.apex-cmp-bar__actions {
		width: 100%;
		justify-content: space-between;
		border-left: 0;
		border-top: 1px solid var(--cmp-line);
		padding: 12px 16px;
	}

	.apex-cmp-bar__cta {
		padding: 14px 20px;
		font-size: 13px;
	}
}

/* --------------------------------------------------------------------------
 * Страницата
 * -------------------------------------------------------------------------- */

/* `content-page.php` рендира заглавието на страницата („Сравнение"), а
   shortcode-ът — собствен H1 („Сравни N продукта"). Крием първото, за да няма
   две заглавия. */
.apex-compare-page .entry-header {
	display: none;
}

.apex-compare-page .entry-content {
	margin-top: 40px;
}

/* CTA банерът е full-bleed, но живее вътре в .container на page.php —
   „разчупваме" го обратно до цялата ширина на екрана. */
.apex-cmp-bleed {
	width: 100vw;
	max-width: 100vw;
	margin-left: calc(50% - 50vw);
}

/* Отстъп отгоре, за да не залепва първият ред (трохите, @see куката
   apex_cmp_before_title) за фиксираната навигация. Страницата е шорткод в
   обикновена страница и няма hero, който да го носи вместо нея.

   64px: в макета долният ръб на навигацията е на y=140, а горният ръб на
   буквите на трохите — на 201. За сравнение, каталогът е на 54px (там трохите
   са на 191). */
.apex-cmp {
	color: var(--cmp-ink);
	padding-top: 64px;
	padding-bottom: 60px;
}

@media (max-width: 900px) {
	.apex-cmp {
		padding-top: 32px;
	}
}

.apex-cmp__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	flex-wrap: wrap;
	margin-bottom: 32px;
}

.apex-cmp__title {
	margin: 0;
	text-transform: uppercase;
}

.apex-cmp__tools {
	display: flex;
	gap: 28px;
}

.apex-cmp__tool {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 0;
	background: none;
	border: 0;
	color: var(--cmp-ink);
	font-size: 15px;
	cursor: pointer;
}

.apex-cmp__tool:hover {
	color: var(--cmp-red);
}

/* Таблицата може да е по-широка от екрана — скролва в себе си, не боди-то. */
.apex-cmp__scroll {
	overflow-x: auto;
	border: 1px solid var(--cmp-line);
	border-radius: var(--cmp-radius);
}

.apex-cmp__table {
	width: 100%;
	border-collapse: collapse;
	table-layout: fixed;
}

.apex-cmp__table th,
.apex-cmp__table td {
	padding: 18px 20px;
	text-align: left;
	vertical-align: middle;
	border-bottom: 1px solid var(--cmp-line);
}

.apex-cmp__corner,
.apex-cmp__label {
	width: 260px;
	min-width: 220px;
	background: #fff;
	font-weight: 700;
	font-size: 15px;
}

.apex-cmp__col {
	width: 280px;
	min-width: 240px;
	border-left: 1px solid var(--cmp-line);
	vertical-align: top;
}

.apex-cmp__cell {
	border-left: 1px solid var(--cmp-line);
	font-size: 15px;
}

.apex-cmp__table tbody tr:nth-child(odd) .apex-cmp__label,
.apex-cmp__table tbody tr:nth-child(odd) .apex-cmp__cell {
	background: var(--cmp-bg);
}

.apex-cmp__col--empty,
.apex-cmp__cell--empty {
	background: repeating-linear-gradient(
		45deg,
		#fff,
		#fff 8px,
		#fafbfc 8px,
		#fafbfc 16px
	);
}

.apex-cmp__notice,
.apex-cmp__empty {
	padding: 40px 20px;
	text-align: center;
	color: var(--cmp-muted);
}

.apex-cmp__empty-hint {
	margin-bottom: 28px;
}

.apex-cmp__empty .apex-cmp-search {
	max-width: 420px;
	margin: 0 auto 28px;
	text-align: left;
}

.apex-cmp__empty-cta {
	display: inline-flex;
	padding: 16px 30px;
	background: var(--cmp-navy);
	color: #fff;
	font-family: var(--cmp-font-heading);
	font-weight: 700;
	letter-spacing: 0.03em;
	text-decoration: none;
	text-transform: uppercase;
}

.apex-cmp__empty-cta:hover {
	background: var(--cmp-red);
	color: #fff;
}

/* --------------------------------------------------------------------------
 * Продуктова карта в header реда
 * -------------------------------------------------------------------------- */

.apex-cmp-card {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.apex-cmp-card__remove {
	position: absolute;
	top: 0;
	right: 0;
	z-index: 2;
	display: flex;
	padding: 0;
	background: #fff;
	border: 0;
	border-radius: 50%;
	color: var(--cmp-ink);
	cursor: pointer;
}

.apex-cmp-card__remove:hover {
	color: var(--cmp-red);
}

.apex-cmp-card__image {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 180px;
}

.apex-cmp-card__image img {
	max-width: 100%;
	max-height: 100%;
	object-fit: contain;
}

.apex-cmp-card__title {
	color: var(--cmp-navy);
	font-weight: 700;
	font-size: 16px;
	line-height: 1.35;
	text-decoration: none;
}

.apex-cmp-card__title:hover {
	color: var(--cmp-red);
}

.apex-cmp-card__meta {
	display: flex;
	align-items: center;
	gap: 12px;
	flex-wrap: wrap;
}

.apex-cmp-card__stock {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	padding: 5px 10px;
	background: var(--cmp-ok-bg);
	border-radius: 3px;
	color: var(--cmp-ok-ink);
	font-size: 12px;
	font-weight: 600;
}

.apex-cmp-card__stock.is-backorder {
	background: var(--cmp-warn-bg);
	color: var(--cmp-warn-ink);
}

.apex-cmp-card__sku {
	color: var(--cmp-muted);
	font-size: 12px;
}

.apex-cmp-card__price {
	font-size: 17px;
	font-weight: 700;
	line-height: 1.3;
}

.apex-cmp-card__price-inquiry {
	font-size: 17px;
}

/* --------------------------------------------------------------------------
 * Цени — картата и редът „Цена"
 *
 * Разметката идва от темата (apex_price_html() в inc/woocommerce.php):
 *   .apex-price > .apex-price__amount > .apex-price__gross + .apex-price__net
 *   промоция: .apex-price--sale > del.--old + ins.--current
 *   вариации: .apex-price--range > .apex-price-from__label („от") + сумата
 *
 * Без правила двете суми се долепват на един ред („… с ДДС2 699,00 € без
 * ДДС"). Колоните са тесни, затова: сумата с ДДС води, сумата без ДДС е под нея
 * по-дребно и сиво, етикетите са по-леки, а самата сума не се пренася („3 238,
 * 80 €" на два реда). Размерът на сумата с ДДС се води от контейнера — картата
 * държи размера на „Цена при запитване", за да не стърчи едната колона.
 * -------------------------------------------------------------------------- */

.apex-cmp-card__price .apex-price,
.apex-cmp__cell .apex-price {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 6px;
}

.apex-cmp-card__price .apex-price__gross,
.apex-cmp-card__price .apex-price__net,
.apex-cmp__cell .apex-price__gross,
.apex-cmp__cell .apex-price__net {
	display: block;
}

.apex-cmp-card__price .apex-price__value,
.apex-cmp__cell .apex-price__value {
	white-space: nowrap;
}

.apex-cmp-card__price .apex-price__net,
.apex-cmp__cell .apex-price__net {
	margin-top: 2px;
	color: var(--cmp-muted);
	font-size: 13px;
	font-weight: 400;
}

.apex-cmp-card__price .apex-price__label,
.apex-cmp__cell .apex-price__label {
	font-size: 0.8em;
	font-weight: 400;
}

/* В клетката на таблицата сумата е обикновен текст като останалите редове —
   само леко по-плътна, за да се чете като цена. */
.apex-cmp__cell .apex-price__gross {
	font-weight: 600;
}

/* Продукт с вариации — „от" на реда на сумата с ДДС. */
.apex-cmp-card__price .apex-price--range,
.apex-cmp__cell .apex-price--range {
	flex-direction: row;
	align-items: baseline;
	gap: 5px;
}

.apex-cmp-card__price .apex-price-from__label,
.apex-cmp__cell .apex-price-from__label {
	color: var(--cmp-muted);
	font-size: 0.8em;
	font-weight: 400;
}

/* Промоция — новата цена (червена) отгоре, старата под нея, зачертана и сива,
   с двете си суми на един ред (пренасят се, ако колоната е тясна). <ins> иначе
   взима жълтия фон от темата (base/typography/_copy.scss). */
.apex-cmp-card__price ins,
.apex-cmp__cell ins {
	order: 1;
	background: none;
	color: var(--cmp-red);
	text-decoration: none;
}

.apex-cmp-card__price del,
.apex-cmp__cell del {
	order: 2;
	display: flex;
	flex-wrap: wrap;
	column-gap: 10px;
	color: var(--cmp-muted);
	font-size: 13px;
	font-weight: 400;
	text-decoration: none;
}

.apex-cmp-card__price del .apex-price__gross,
.apex-cmp-card__price del .apex-price__net,
.apex-cmp__cell del .apex-price__gross,
.apex-cmp__cell del .apex-price__net {
	margin: 0;
	font-size: inherit;
	font-weight: 400;
	text-decoration: line-through;
}

/* „Цена при запитване" от темата (нулева цена минава през get_price_html()) —
   същият вид като собствения етикет на плъгина на всяко място. */
.apex-cmp-card__price .apex-price-inquiry {
	font-size: 17px;
}

.apex-cmp__cell .apex-price-inquiry {
	font-weight: 400;
}

/* --------------------------------------------------------------------------
 * Търсачка
 * -------------------------------------------------------------------------- */

.apex-cmp-search {
	position: relative;
}

.apex-cmp-search__field {
	position: relative;
}

.apex-cmp-search__input {
	width: 100%;
	padding: 12px 40px 12px 14px;
	background: #fff;
	border: 1px solid var(--cmp-line);
	border-radius: var(--cmp-radius);
	font-size: 14px;
}

.apex-cmp-search__input:focus {
	border-color: var(--cmp-navy);
	outline: none;
}

.apex-cmp-search__input:disabled {
	background: var(--cmp-bg);
	cursor: not-allowed;
}

.apex-cmp-search__icon,
.apex-cmp-search__clear {
	position: absolute;
	top: 50%;
	right: 12px;
	display: flex;
	padding: 0;
	background: none;
	border: 0;
	color: var(--cmp-muted);
	transform: translateY(-50%);
}

.apex-cmp-search__clear {
	cursor: pointer;
}

.apex-cmp-search__clear:hover {
	color: var(--cmp-red);
}

/* Ако има ✕, лупата е излишна. */
.apex-cmp-search__clear:not([hidden]) ~ .apex-cmp-search__icon {
	display: none;
}

.apex-cmp-search__hint {
	margin: 8px 0 0;
	color: var(--cmp-muted);
	font-size: 12px;
	font-weight: 400;
}

.apex-cmp-search__results {
	position: absolute;
	z-index: 20;
	top: calc(100% + 6px);
	right: 0;
	left: 0;
	max-height: 320px;
	margin: 0;
	padding: 6px;
	overflow-y: auto;
	list-style: none;
	background: #fff;
	border: 1px solid var(--cmp-line);
	border-radius: var(--cmp-radius);
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}

.apex-cmp-search__item {
	margin: 0;
}

.apex-cmp-search__add {
	display: flex;
	align-items: center;
	gap: 10px;
	width: 100%;
	padding: 9px 10px;
	background: none;
	border: 0;
	border-radius: 4px;
	color: var(--cmp-ink);
	font-size: 13px;
	text-align: left;
	cursor: pointer;
}

.apex-cmp-search__add:hover {
	background: var(--cmp-bg);
}

.apex-cmp-search__plus {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 20px;
	height: 20px;
	flex-shrink: 0;
	border: 1px solid var(--cmp-red);
	border-radius: 50%;
	color: var(--cmp-red);
	font-size: 14px;
	line-height: 1;
}

.apex-cmp-search__text {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}

.apex-cmp-search__name {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.apex-cmp-search__sku {
	color: var(--cmp-muted);
	font-size: 11px;
}

.apex-cmp-search__empty {
	padding: 12px 10px;
	color: var(--cmp-muted);
	font-size: 13px;
}

/* --------------------------------------------------------------------------
 * Печат
 *
 * В разпечатката остава САМО таблицата — без хедър, топбар, breadcrumb, CTA
 * банер и футър.
 *
 * `visibility: hidden` НЕ върши работа: скритите елементи запазват мястото си в
 * лейаута и разпечатката излиза с празни страници. Затова compare.js клонира
 * таблицата в `.apex-cmp-print-root` директно под <body> (на `beforeprint`), а
 * тук скриваме всичко останало с `display: none` — така празно място не остава.
 * -------------------------------------------------------------------------- */

.apex-cmp-print-root {
	display: none;
}

@media print {
	/* Хоризонтално (landscape) — три продуктови колони + колоната с етикетите
	   не се събират смислено в портретна ширина. */
	@page {
		size: A4 landscape;
		margin: 12mm;
	}

	html,
	body {
		height: auto !important;
		margin: 0 !important;
		padding: 0 !important;
		background: #fff !important;
	}

	/* Всичко освен клонираната таблица отпада напълно. */
	body > *:not(.apex-cmp-print-root) {
		display: none !important;
	}

	.apex-cmp-print-root {
		display: block !important;
	}

	.apex-cmp-print-root .apex-cmp__scroll {
		overflow: visible !important;
		border: 0;
	}

	.apex-cmp__table {
		font-size: 10pt;
		table-layout: auto;
	}

	.apex-cmp__table th,
	.apex-cmp__table td {
		padding: 7px 9px;
	}

	.apex-cmp__table tr {
		break-inside: avoid;
	}

	/* Заглавният ред се повтаря, ако таблицата се пренесе на втора страница. */
	.apex-cmp__table thead {
		display: table-header-group;
	}

	.apex-cmp-card__image {
		height: 110px;
	}

	.apex-cmp-card__title {
		font-size: 12pt;
	}

	.apex-cmp-card__price {
		font-size: 12pt;
	}

	/* Фоновете на редовете — иначе браузърът ги маха при печат. */
	.apex-cmp__table,
	.apex-cmp-card__stock {
		-webkit-print-color-adjust: exact;
		print-color-adjust: exact;
	}
}