/*
 * Makaz — таблица с размери (popup на продуктовата страница).
 * Markup: inc/makaz-size-guides.php
 * Визия: като продуктовата страница и „Често задавани въпроси“ — светлосив фон, бели карти,
 * бордо акцент, шрифтът на темата (Lora).
 */

.makaz-sg {
	--makaz-sg-accent: var(--wd-primary-color, #7d1d1c);
	--makaz-sg-accent-hover: color-mix(in srgb, var(--makaz-sg-accent) 85%, #000);
	--makaz-sg-cream: #fbf7f2;
	--makaz-sg-page: #f7f7f7;
	--makaz-sg-card: #fff;
	--makaz-sg-title: var(--wd-title-color, #333);
	--makaz-sg-text: #3c4043;
	--makaz-sg-muted: #77716c;
	--makaz-sg-line: rgba(60, 64, 67, 0.1);
	--makaz-sg-radius: 18px;
	--makaz-sg-table-radius: var(--wd-brd-radius, 10px);
	--makaz-sg-shadow: 0 4px 24px rgba(0, 0, 0, 0.055);
	--makaz-sg-ease: cubic-bezier(0.33, 1, 0.68, 1);
	font-family: var(--wd-text-font, inherit);
}

/* Popup — ширината следва таблицата, без празно място отстрани */
.makaz-sg-wrap .mfp-content {
	width: fit-content;
	max-width: 100%;
}

.wd-popup.makaz-sg {
	width: fit-content;
	max-width: min(960px, 100%);
	position: relative;
	padding: 44px 24px 24px; /* отгоре — място за бутона за затваряне */
	border-radius: var(--makaz-sg-radius);
	background: var(--makaz-sg-page);
	box-shadow: 0 16px 48px rgba(0, 0, 0, 0.12);
	color: var(--makaz-sg-text);
	--wd-scroll-h: 88dvh;
}

.makaz-sg *,
.makaz-sg *::before,
.makaz-sg *::after {
	box-sizing: border-box;
}

/* Бутон за затваряне — в горния ъгъл на попъпа, вместо над него (WoodMart го слага в .mfp-content) */
.makaz-sg-wrap .wd-popup-close {
	top: 0;
	inset-inline-end: 0;
	--wd-action-color: var(--makaz-sg-title);
	--wd-action-color-hover: var(--makaz-sg-accent);
}

/* Секции */
.makaz-sg__section + .makaz-sg__section {
	margin-top: 26px;
}

.makaz-sg .makaz-sg__section-title {
	margin: 0 0 12px;
	font-family: var(--wd-title-font, inherit);
	font-size: 17px;
	font-weight: 500;
	line-height: 1.35;
	text-transform: none;
	color: var(--makaz-sg-accent);
}

/* Иконка + таблица */
.makaz-sg__row {
	display: flex;
	align-items: center;
	gap: 24px;
}

.makaz-sg-fig {
	flex: 0 0 auto;
	width: 88px;
	height: auto;
}

.makaz-sg-fig__line {
	fill: none;
	stroke: var(--makaz-sg-title);
	stroke-width: 2.4;
	stroke-linejoin: round;
	stroke-linecap: round;
}

.makaz-sg-fig__dots {
	fill: none;
	stroke: var(--makaz-sg-accent);
	stroke-width: 2.6;
	stroke-linecap: round;
	stroke-linejoin: round;
	stroke-dasharray: 0 5;
}

.makaz-sg-fig__text {
	font-family: var(--wd-title-font, inherit);
	font-size: 19px;
	font-weight: 600;
	fill: var(--makaz-sg-accent);
}

/* Карта с таблицата */
.makaz-sg__tables {
	flex: 1 1 auto;
	min-width: 0;
}

.makaz-sg__scroll {
	overflow-x: auto;
	border-radius: var(--makaz-sg-table-radius);
	background: var(--makaz-sg-card);
	box-shadow: var(--makaz-sg-shadow);
	-webkit-overflow-scrolling: touch;
	scrollbar-width: thin;
}

.makaz-sg__scroll:focus-visible {
	outline: 2px solid var(--makaz-sg-accent);
	outline-offset: 2px;
}

.makaz-sg .makaz-sg__table {
	width: 100%;
	min-width: max-content;
	margin: 0;
	border: 0;
	border-collapse: separate;
	border-spacing: 0;
	font-variant-numeric: lining-nums;
}

.makaz-sg .makaz-sg__table :is(th, td) {
	padding: 14px 14px;
	border: 0;
	border-bottom: 1px solid var(--makaz-sg-line);
	background: var(--makaz-sg-card);
	font-family: inherit;
	font-size: 15px;
	line-height: 1.3;
	text-align: center;
	white-space: nowrap;
	vertical-align: middle;
	transition: background-color 0.3s var(--makaz-sg-ease), color 0.3s var(--makaz-sg-ease);
}

.makaz-sg .makaz-sg__table tbody tr:last-child :is(th, td) {
	border-bottom: 0;
}

/* Заглавен ред — като основния бутон на сайта.
   Фонът е на реда, за да няма светли фуги между клетките. */
.makaz-sg .makaz-sg__table thead tr {
	background: var(--makaz-sg-accent);
}

.makaz-sg .makaz-sg__table thead th {
	padding-block: 13px;
	border-bottom: 0;
	background: transparent;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.03em;
	text-transform: uppercase;
	color: #fff;
}

.makaz-sg .makaz-sg__table thead th:first-child {
	background: var(--makaz-sg-accent); /* закованата колона покрива скролнатото съдържание */
	text-transform: none;
	letter-spacing: 0;
	font-weight: 500;
	color: rgba(255, 255, 255, 0.78);
}

.makaz-sg .makaz-sg__table td {
	color: var(--makaz-sg-text);
}

/* Колони с размери — равни и с въздух */
.makaz-sg .makaz-sg__scroll--wide :is(th, td):not(:first-child) {
	min-width: 76px;
}

/* Първа колона — закована при хоризонтален скрол */
.makaz-sg .makaz-sg__table :is(thead th, tbody th):first-child {
	position: sticky;
	left: 0;
	z-index: 1;
	min-width: 132px;
	padding-inline-start: 20px;
	text-align: start;
}

.makaz-sg .makaz-sg__table tbody th {
	background: var(--makaz-sg-cream);
	font-weight: 500;
	color: var(--makaz-sg-title);
}

/* Подсветка на ред и колона (JS добавя .is-col) */
.makaz-sg .makaz-sg__table tbody tr:hover td {
	background: var(--makaz-sg-cream);
}

.makaz-sg .makaz-sg__table td.is-col {
	background: var(--makaz-sg-cream);
	color: var(--makaz-sg-accent);
	font-weight: 600;
}

.makaz-sg .makaz-sg__table thead th.is-col {
	background: var(--makaz-sg-accent-hover);
}

/* Буква на мярката — като баджовете в хедъра */
.makaz-sg__key {
	display: inline-grid;
	place-items: center;
	width: 20px;
	height: 20px;
	margin-inline-end: 10px;
	border-radius: 999px;
	background: var(--makaz-sg-accent);
	font-size: 11px;
	font-weight: 600;
	line-height: 1;
	color: #fff;
	vertical-align: 1px;
}

/* Обърната таблица за телефон (скрита на по-широки екрани) */
.makaz-sg__scroll--stacked {
	display: none;
}

/* Съдържание, добавено от админа към таблицата (по желание) */
.makaz-sg__note {
	margin-top: 20px;
	font-size: 14px;
	line-height: 1.6;
	color: var(--makaz-sg-muted);
}

.makaz-sg__note > :last-child {
	margin-bottom: 0;
}

/* Бутон „Таблица с размери“ — като „Добави в любими“ */
.wd-sizeguide-btn.wd-style-text > a {
	transition: color 0.25s ease;
}

.wd-sizeguide-btn.wd-style-text > a:hover {
	color: var(--wd-primary-color, #7d1d1c);
}

@media (max-width: 575px) {
	.wd-popup.makaz-sg {
		padding: 44px 14px 16px;
	}

	.makaz-sg__section + .makaz-sg__section {
		margin-top: 22px;
	}

	/* Иконката отгоре, таблицата на цялата ширина */
	.makaz-sg__row {
		flex-direction: column;
		align-items: stretch;
		gap: 12px;
	}

	.makaz-sg-fig {
		align-self: center;
		width: 72px;
	}

	.makaz-sg__scroll--wide {
		display: none;
	}

	.makaz-sg__scroll--stacked {
		display: block;
	}

	.makaz-sg .makaz-sg__table--stacked {
		min-width: 0;
		table-layout: fixed;
	}

	.makaz-sg .makaz-sg__table--stacked :is(th, td) {
		padding: 12px 8px;
		font-size: 15px;
		white-space: normal;
	}

	.makaz-sg .makaz-sg__table--stacked thead th {
		font-size: 13px;
		letter-spacing: 0;
		line-height: 1.25;
		text-transform: none;
		color: #fff;
	}

	.makaz-sg .makaz-sg__table--stacked :is(thead th, tbody th):first-child {
		position: static;
		min-width: 0;
		padding-inline-start: 16px;
	}

	.makaz-sg .makaz-sg__table--stacked tbody th {
		font-weight: 600;
	}

	/* Буквата върху бордо фона на заглавния ред */
	.makaz-sg .makaz-sg__table--stacked thead .makaz-sg__key {
		width: 18px;
		height: 18px;
		margin-inline-end: 6px;
		background: #fff;
		color: var(--makaz-sg-accent);
	}

	/* Докосване на ред (няма hover на телефон) */
	.makaz-sg .makaz-sg__table tbody tr:active :is(th, td) {
		background: var(--makaz-sg-cream);
		color: var(--makaz-sg-accent);
	}
}

@media (prefers-reduced-motion: reduce) {
	.makaz-sg * {
		transition: none !important;
	}
}