/**
 * Wygląd kafelków wariantów wtyczki Stylove Warianty produktów.
 *
 * Świadomie PORT (przeniesienie), nie kopia 1:1, wizualnych reguł
 * dotychczas żyjących w motywie (stylove-azury-theme/style.css,
 * bloki ".option-group"/".width-pill"/".color-swatch"/".edge-card"/
 * ".generic-pill") — pod własnymi, namespace'owanymi klasami
 * ".sl-vui-*", żeby wygląd na karcie produktu pozostał identyczny,
 * a CSS wtyczki nie zależał od obecności konkretnych reguł motywu.
 * Design tokeny (--ink, --sage-deep, --line, itd.) to zmienne
 * zdefiniowane globalnie w motywie na :root — czytamy je var(), nie
 * duplikujemy wartości, więc paleta zostaje spójna z resztą sklepu
 * automatycznie. Patrz docs/current-system-audit.md.
 */

/* --- Prawdziwy <select> WooCommerce: ukryty wizualnie, dostępny dla
   czytników ekranu i klawiatury (bez display:none). --- */
.sl-vui-visually-hidden {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* --- Rodzaj "Lista rozwijana" (natywny <select>, bez kafelków) —
   motyw ma regułę ".variations { clip:... }" bez żadnego warunku, więc
   działa na KAŻDY element z tą klasą. Wyższa specyficzność poniżej
   (".sl-vui-form .variations.sl-vui-native-visible") jawnie ją
   nadpisuje, żeby ten jeden, świadomie widoczny select faktycznie się
   pokazał — bez !important. --- */
.sl-vui-form .variations.sl-vui-native-visible {
	position: static;
	width: auto;
	height: auto;
	padding: 0;
	margin: 0 0 26px;
	overflow: visible;
	clip: auto;
	white-space: normal;
}

.sl-vui-form .woocommerce-variation {
	display: none !important;
}

.sl-vui-reset-row {
	text-align: right;
	margin-top: -10px;
	margin-bottom: 18px;
}

.sl-vui-reset-row .reset_variations {
	font-size: 12px;
	color: var(--ink-soft, #5A5F51);
	text-decoration: underline;
	text-underline-offset: 2px;
}

.sl-vui-reset-row .reset_variations:hover {
	color: var(--sage-deep, #4C5F40);
}

.sl-vui-stock-note {
	font-size: 13px;
	color: var(--danger, #A5544A);
	margin-bottom: 16px;
}

/* --- Grupa opcji (jeden atrybut) --- */

.sl-vui-option-group {
	margin-bottom: 26px;
}

.sl-vui-option-head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	margin-bottom: 12px;
}

.sl-vui-option-label {
	font-size: 13.5px;
	font-weight: 600;
	color: var(--ink, #232A20);
}

.sl-vui-option-value {
	font-family: var(--font-mono, monospace);
	font-size: 12.5px;
	color: var(--sage-deep, #4C5F40);
}

/* Reset dla wszystkich przycisków-kafelków. */
.sl-vui-pill,
.sl-vui-swatch,
.sl-vui-card,
.sl-vui-image-tile {
	font-family: inherit;
	background: none;
	text-align: center;
	cursor: pointer;
}

.sl-vui-pill:disabled,
.sl-vui-swatch:disabled,
.sl-vui-card:disabled,
.sl-vui-image-tile:disabled {
	cursor: not-allowed;
}

/* --- Tekst zwykły (np. Materiał, atrybut bez specjalnego UI) --- */

.sl-vui-group--text .sl-vui-tiles {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.sl-vui-pill--text {
	border: 1px solid var(--line, rgba(35,42,32,.14));
	border-radius: 3px;
	padding: 8px 16px;
	font-size: 13px;
	color: var(--ink, #232A20);
	transition: all 0.15s;
}

.sl-vui-pill--text:hover:not(:disabled) {
	border-color: var(--sage-deep, #4C5F40);
}

.sl-vui-pill--text.is-selected {
	border-color: var(--sage-deep, #4C5F40);
	background: var(--sage-pale, #E6EBDF);
	color: var(--sage-deep, #4C5F40);
}

/* --- Tekst "wymiarowy" (liczba + jednostka) — np. Szerokość/Wysokość
   oznaczone jako wymiar na ekranie migracji. --- */

.sl-vui-group--dimension .sl-vui-tiles {
	display: grid;
	grid-template-columns: repeat(7, 1fr);
	gap: 8px;
}

.sl-vui-pill--dimension {
	position: relative;
	border: 1px solid var(--line, rgba(35,42,32,.14));
	border-radius: 3px;
	padding: 10px 4px;
	background: #fff;
	transition: all 0.15s;
}

.sl-vui-pill-num {
	display: block;
	font-family: var(--font-mono, monospace);
	font-size: 14px;
	font-weight: 500;
	color: var(--ink, #232A20);
}

.sl-vui-pill-unit {
	display: block;
	font-size: 10px;
	color: var(--ink-soft, #5A5F51);
	margin-top: 1px;
}

.sl-vui-pill--dimension:hover:not(:disabled) {
	border-color: var(--sage-deep, #4C5F40);
}

.sl-vui-pill--dimension.is-selected {
	border-color: var(--sage-deep, #4C5F40);
	background: var(--sage-pale, #E6EBDF);
	box-shadow: inset 0 0 0 1px var(--sage-deep, #4C5F40);
}

.sl-vui-pill--dimension.is-selected .sl-vui-pill-num {
	color: var(--sage-deep, #4C5F40);
}

/* --- Kolor --- */

.sl-vui-group--color .sl-vui-tiles {
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
}

.sl-vui-swatch {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
	border: none;
	padding: 0;
}

.sl-vui-swatch-dot {
	width: 40px;
	height: 40px;
	border-radius: 50%;
	display: block;
	border: 2px solid transparent;
	box-shadow: 0 0 0 1px var(--line, rgba(35,42,32,.14));
	transition: all 0.15s;
}

.sl-vui-swatch.is-selected .sl-vui-swatch-dot {
	border-color: var(--sage-deep, #4C5F40);
	box-shadow: 0 0 0 1px var(--sage-deep, #4C5F40);
}

.sl-vui-swatch-name {
	font-size: 11.5px;
	color: var(--ink-soft, #5A5F51);
}

.sl-vui-swatch.is-selected .sl-vui-swatch-name {
	color: var(--ink, #232A20);
	font-weight: 600;
}

/* --- Obraz i Karta: siatka i wspólny "box" kafelka --- */

.sl-vui-group--image .sl-vui-tiles,
.sl-vui-group--card .sl-vui-tiles {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 12px;
}

.sl-vui-card,
.sl-vui-image-tile {
	background: #fff;
	border: 1.5px solid var(--line, rgba(35,42,32,.14));
	border-radius: 3px;
	padding: 14px 10px 12px;
	position: relative;
	transition: all 0.15s;
}

.sl-vui-card:hover:not(:disabled),
.sl-vui-image-tile:hover:not(:disabled) {
	border-color: var(--sage, #7C8F6E);
}

.sl-vui-card.is-selected,
.sl-vui-image-tile.is-selected {
	border-color: var(--sage-deep, #4C5F40);
	background: var(--sage-pale, #E6EBDF);
}

.sl-vui-card-icon,
.sl-vui-image-tile-photo {
	display: block;
	width: 100%;
	height: 36px;
	margin-bottom: 10px;
	color: var(--ink, #232A20);
}

.sl-vui-card-icon svg,
.sl-vui-image-tile-photo img {
	width: 100%;
	height: 100%;
}

.sl-vui-card-icon--anim svg {
	overflow: visible;
}

.sl-vui-card-icon--photo,
.sl-vui-image-tile-photo {
	border-radius: 2px;
	overflow: hidden;
}

.sl-vui-card-icon--photo img,
.sl-vui-image-tile-photo img {
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.sl-vui-card-name,
.sl-vui-image-tile-name {
	font-size: 12.5px;
	font-weight: 600;
	display: block;
	color: var(--ink, #232A20);
}

.sl-vui-card-desc {
	font-size: 10.5px;
	color: var(--ink-soft, #5A5F51);
	display: block;
	margin-top: 4px;
	line-height: 1.2;
	font-weight: normal;
}

.sl-vui-card-check,
.sl-vui-image-tile-check {
	position: absolute;
	top: 6px;
	right: 6px;
	width: 16px;
	height: 16px;
	border-radius: 50%;
	background: var(--sage-deep, #4C5F40);
	display: none;
	align-items: center;
	justify-content: center;
}

.sl-vui-card.is-selected .sl-vui-card-check,
.sl-vui-image-tile.is-selected .sl-vui-image-tile-check {
	display: flex;
}

.sl-vui-card-check svg,
.sl-vui-image-tile-check svg {
	width: 9px;
	height: 9px;
	margin: 0;
	stroke: #fff;
	stroke-width: 3;
}

/* --- Stan niedostępny/wyłączony, wspólny dla wszystkich rodzajów --- */

.sl-vui-pill.is-unavailable,
.sl-vui-pill.is-disabled,
.sl-vui-swatch.is-unavailable,
.sl-vui-swatch.is-disabled,
.sl-vui-card.is-unavailable,
.sl-vui-card.is-disabled,
.sl-vui-image-tile.is-unavailable,
.sl-vui-image-tile.is-disabled {
	opacity: 0.35;
	pointer-events: none;
}

/* ==========================================================================
   Animacja ikon "Karty" (np. Górna krawędź) — SVG dostarczane przez
   filtr `stylove_vui_card_icon_html` (patrz Renderer::render_card_tile)
   niosą WŁASNE klasy (.edge-anim, .rod, .zigzag, .mask, .static,
   .outline, .edge-anim--*) z tego samego źródła co dotychczas w
   motywie — port dotyczy więc tylko SELEKTORA WYZWALAJĄCEGO
   (.sl-vui-card zamiast .edge-card), reguły dla samych elementów SVG
   zostają identyczne. Patrz docs/current-system-audit.md, sekcja 5.
   ========================================================================== */

.edge-anim .zigzag,
.edge-anim .static,
.edge-anim .outline {
	vector-effect: non-scaling-stroke;
	stroke-width: 1.3;
}

.edge-anim .rod {
	fill: #898989;
	transform-box: fill-box;
	transform-origin: 0% 50%;
	transform: scaleX(0);
}

.edge-anim--gladkie .zigzag {
	/* Długość polyline z gladkie3.svg (port z motywu style.css, patrz
	   stylove_azury_edge_finish_animated_svg('gladkie') w functions.php
	   motywu): (1633.09-23.33) + (384.23-54.26) + (1633.09-23.33) = 3549.49. */
	stroke-dasharray: 3549.49;
	stroke-dashoffset: 3549.49;
	/* Cieńsza niż wspólne 1.3 (reguła ".edge-anim .zigzag..." wyżej) —
	   port z motywu style.css. */
	stroke-width: 0.8;
}

.edge-anim--rzep .zigzag {
	stroke-dasharray: 1354.42;
	stroke-dashoffset: 1354.42;
}

.edge-anim .rod,
.edge-anim .zigzag {
	transition: transform 0.5s linear, stroke-dashoffset 0.4s linear;
}

.sl-vui-card:hover .edge-anim .rod,
.sl-vui-card.is-selected .edge-anim .rod {
	transform: scaleX(1);
	transition: transform 0.5s linear, stroke-dashoffset 0.2s linear;
}

.sl-vui-card:hover .edge-anim .zigzag,
.sl-vui-card.is-selected .edge-anim .zigzag {
	stroke-dashoffset: 0;
	transition: width 1.5s linear, stroke-dashoffset 2s linear;
}

/* Rysowanie przerywanej linii "gładkiego" wykończenia 4x wolniej niż
   pozostałe ikony (8s zamiast 2s) — port z motywu style.css. Selektor z
   ".edge-anim.edge-anim--gladkie" ma o jedną klasę więcej niż reguła
   bazowa wyżej, więc wygrywa niezależnie od kolejności w pliku. */
.sl-vui-card:hover .edge-anim.edge-anim--gladkie .zigzag,
.sl-vui-card.is-selected .edge-anim.edge-anim--gladkie .zigzag {
	transition: width 1.5s linear, stroke-dashoffset 8s linear;
}

.edge-anim .mask {
	fill: #fff;
	transition: fill 0.15s;
}

.sl-vui-card.is-selected .edge-anim .mask {
	fill: var(--sage-pale, #E6EBDF);
}

/* --- Responsywność: te same progi co reszta motywu (980/620/420px). --- */

@media (max-width: 980px) {
	.sl-vui-group--dimension .sl-vui-tiles {
		grid-template-columns: repeat(4, 1fr);
	}

	.sl-vui-group--image .sl-vui-tiles,
	.sl-vui-group--card .sl-vui-tiles {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 620px) {
	.sl-vui-group--dimension .sl-vui-tiles {
		grid-template-columns: repeat(3, 1fr);
	}

	.sl-vui-group--color .sl-vui-tiles {
		gap: 18px;
	}
}

@media (max-width: 420px) {
	.sl-vui-group--image .sl-vui-tiles,
	.sl-vui-group--card .sl-vui-tiles {
		grid-template-columns: 1fr;
	}
}