/**
 * YK WC Swatches — Single product page (and the products inside a set).
 *
 * Reproduces the look Lavie had with WPC Variation Swatches, so replacing that plugin
 * changes nothing a shopper can see. Every value below is the RESULT of three stylesheets
 * that used to stack, folded into one:
 *
 *   1. wpc-variation-swatches/assets/css/frontend.css   — base layout, "rounded" style
 *   2. wpc-variation-swatches/assets/libs/hint/hint.css — the tooltip, position "top"
 *   3. themes/n0_lv/css/woocommerce.css, ~L248–350      — Lavie's overrides on both
 *
 * When a value looks odd (a 20px-high inner box holding a label with 1rem margins), it is
 * because that is what the cascade above produced. Keep it — "fixing" it is a design change.
 *
 * Markup (built by yk-lv-product.js):
 *
 *   .yk-lv-terms.yk-lv-type-color|.yk-lv-type-button
 *     .yk-lv-term[data-value][data-tooltip] (.is-selected, .is-disabled)
 *       .yk-lv-term-inner
 *         .yk-lv-term-color   — colour swatches
 *         .yk-lv-term-label   — buttons (sizes)
 */

/* ── Row layout ─────────────────────────────────────────────────────────────
   WPC added .wpcvs-initialized to the main form's table; the JS adds this class. */
table.variations.yk-lv-initialized tr {
	display: flex;
	align-items: flex-start !important;
}

table.variations.yk-lv-initialized tr .label {
	width: 100px;
	flex: 0 0 100px;
}

table.variations.yk-lv-initialized tr .value {
	flex-grow: 1;
}

/* The native select stays in the DOM as WooCommerce's state holder. */
.yk-lv-terms + select {
	display: none !important;
}

/* ── Group ───────────────────────────────────────────────────────────────── */
.yk-lv-terms {
	display: inline-flex;
	align-items: center;
	flex-wrap: wrap;
	margin-left: 0;
	margin-right: 0;
}

/* ── One option ──────────────────────────────────────────────────────────── */
.yk-lv-term {
	display: inline-block;
	cursor: pointer;
	text-align: center;
	margin: 3px 6px 3px 0;
	padding: 3px;
	border-radius: 21px;
	border: 1px solid #dddddd;
	background-color: #ffffff;
	position: relative;
	box-sizing: border-box;
	float: none;
}

.yk-lv-term-inner {
	display: flex;
	align-items: center;
	height: 20px;
	line-height: 20px;
	width: 100%;
	position: relative;
	border-radius: 17px;
	background-color: #ffffff;
}

.yk-lv-term.is-selected {
	border-color: #000000;
}

/* Selected badge: black 16px disc with a white ring and the white check icon, overhanging
   the top-right corner. Same icon file the theme pointed WPC's badge at. */
.yk-lv-term.is-selected .yk-lv-term-inner::before {
	content: '';
	display: block;
	width: 16px;
	height: 16px;
	border-radius: 10px;
	background-color: #000000;
	background-image: url(https://lavie-home.ch/cms/wp-content/uploads/2023/04/check-white.svg);
	background-repeat: no-repeat;
	position: absolute;
	top: -10px;
	right: -10px;
	z-index: 9;
	border: 2px solid #ffffff;
}

.yk-lv-term.is-disabled {
	opacity: 0.4;
	cursor: default;
}

.yk-lv-term:focus-visible {
	outline: 2px solid #000000;
	outline-offset: 2px;
}

/* ── Colour ──────────────────────────────────────────────────────────────── */
.yk-lv-type-color .yk-lv-term {
	width: 28px;
	height: 28px;
}

.yk-lv-term-color {
	display: block;
	width: 20px;
	height: 20px;
	flex: 0 0 20px;
	font-size: 0;
	border-radius: 17px;
}

/* ── Button (size) ───────────────────────────────────────────────────────── */
.yk-lv-type-button .yk-lv-term {
	height: 42px;
	min-width: 42px;
	line-height: 40px;
}

.yk-lv-term-label {
	padding: 15px 10px 0 !important;
	margin: 1rem !important;
	font-weight: 300;
	font-size: 1rem;
}

/* ── Tooltip (hint.css "top", with Lavie's white bubble) ───────────────────
   hint.css drew an arrow in ::before; the theme made it transparent, so it is left out. */
.yk-lv-term[data-tooltip]::after {
	content: attr(data-tooltip);
	position: absolute;
	bottom: 100%;
	left: 50%;
	transform: translateX(-50%);
	visibility: hidden;
	opacity: 0;
	z-index: 1000000;
	pointer-events: none;
	transition: 0.3s ease;
	transition-delay: 0ms;
	background: #ffffff;
	color: #000000;
	padding: 8px 10px;
	font-size: 13px;
	font-family: europa, sans-serif;
	font-weight: 400;
	line-height: 12px;
	border: 0.5pt #d0d0d0 solid;
	white-space: nowrap;
	text-shadow: 0 0 0 grey;
	box-shadow: 4px 4px 8px rgba(0, 0, 0, 0.1);
}

.yk-lv-term[data-tooltip]:hover::after {
	visibility: visible;
	opacity: 1;
	transform: translateX(-50%) translateY(-8px);
	transition-delay: 100ms;
}

/* WPC never showed a tooltip on an unavailable option. */
.yk-lv-term.is-disabled::after {
	display: none !important;
}