/*
 * IMPAAKT Variation Swatches Pour WooCommerce — Frontend Styles
 *
 * CSS custom properties (variables) are injected inline via PHP (class-assets.php),
 * so this file only references var(--ivs-*) tokens.
 *
 * Prefix: ivs-
 * BEM-ish notation: .ivs-block__element--modifier
 */

/* ── CSS variables fallback (overridden by PHP inline style) ── */
:root {
	--ivs-size:             32px;
	--ivs-gap:              6px;
	--ivs-border-width:     2px;
	--ivs-border-color:     #dddddd;
	--ivs-selected-color:   #2c2c2c;
	--ivs-hover-border:     #888888;
	--ivs-disabled-opacity: 0.35;
	--ivs-radius:           50%;	--ivs-text-radius:      4px;  /* Safe radius for text/button (never oval) */	--ivs-tooltip-bg:       #333333;
	--ivs-tooltip-color:    #ffffff;
}

/* ── Hide native select ────────────────────────────────────── */
.ivs-select-wrapper select,
.ivs-select-wrapper .select {
	display: none !important;
}

/* ── Swatch group wrapper ──────────────────────────────────── */
.ivs-swatches-group {
	display: block;
}

/* ── Swatch list ───────────────────────────────────────────── */
.ivs-swatches {
	display: flex;
	flex-wrap: wrap;
	gap: var(--ivs-gap);
	align-items: center;
	margin: 6px 0 10px;
	padding: 0;
	list-style: none;
}

/* ── Single swatch ─────────────────────────────────────────── */
.ivs-swatch {
	position:        relative;
	display:         inline-flex;
	align-items:     center;
	justify-content: center;
	width:           var(--ivs-size);
	height:          var(--ivs-size);
	border-radius:   var(--ivs-radius);
	border:          var(--ivs-border-width) solid var(--ivs-border-color);
	cursor:          pointer;
	overflow:        hidden;
	transition:      border-color 0.15s ease, transform 0.1s ease, box-shadow 0.15s ease;
	flex-shrink:     0;
	user-select:     none;
	outline:         none;
	box-sizing:      border-box;
	/* Reset browser/theme overrides on <a> tags used in archive */
	text-decoration: none;
	color:           inherit;
	font-size:       inherit;
	line-height:     1;
	vertical-align:  middle;
}

/* Color swatches — enforce perfect circle regardless of theme CSS */
.ivs-swatch--color {
	width:            var(--ivs-size) !important;
	height:           var(--ivs-size) !important;
	min-width:        var(--ivs-size) !important;
	max-width:        var(--ivs-size) !important;
	min-height:       var(--ivs-size);
	max-height:       var(--ivs-size);
	aspect-ratio:     1 / 1;
	padding:          0 !important;
	background-color: #e0e0e0; /* visible fallback when no color is configured */
}

/* Image swatches — same strict sizing as color */
.ivs-swatch--image {
	width:        var(--ivs-size) !important;
	height:       var(--ivs-size) !important;
	min-width:    var(--ivs-size) !important;
	max-width:    var(--ivs-size) !important;
	min-height:   var(--ivs-size);
	max-height:   var(--ivs-size);
	aspect-ratio: 1 / 1;
	padding:      0 !important;
}

/* Image swatch — stretch image to fill */
.ivs-swatch--image img {
	width:      100%;
	height:     100%;
	object-fit: cover;
	display:    block;
}

/* Text / button inner span */
.ivs-swatch__inner {
	font-size:      calc(var(--ivs-size) * 0.38);
	font-weight:    600;
	line-height:    1;
	color:          #333;
	white-space:    nowrap;
	padding:        0 6px;
	pointer-events: none;
}

/* Text/button swatches — auto width, never circular */
.ivs-swatch--text,
.ivs-swatch--button {
	width:         auto !important;
	min-width:     var(--ivs-size);
	height:        var(--ivs-size);
	aspect-ratio:  unset;
	padding:       0 10px !important;
	/* Use --ivs-text-radius: PHP sets it to 4px when global shape is 'round'
	   (preventing oval deformation), and to the shape value otherwise. */
	border-radius: var(--ivs-text-radius) !important;
	background:    transparent;
}

/* Ensure text/button parent containers don't inherit circle radius */
.ivs-swatches--text .ivs-swatch,
.ivs-swatches--button .ivs-swatch {
	border-radius: var(--ivs-text-radius) !important;
}

/* ── Per-term / per-attribute shape override ──────────────────── */
/* data-ivs-shape is set by PHP when a term or attribute has an explicit shape.
   These rules override both the CSS custom property AND the text-radius default. */
.ivs-swatch[data-ivs-shape="round"]       { border-radius: 50% !important; }
.ivs-swatch[data-ivs-shape="square"]      { border-radius: 0px !important; }
.ivs-swatch[data-ivs-shape="rounded"]     { border-radius: 8px !important; }
.ivs-swatch[data-ivs-shape="rectangular"] { border-radius: 4px !important; }

/* Text/button with 'round' shape: cap at 8px to avoid oval deformation.
   A user who explicitly sets shape=round on a text swatch wants a pill shape. */
.ivs-swatch--text[data-ivs-shape="round"],
.ivs-swatch--button[data-ivs-shape="round"] {
	border-radius: 8px !important;
}

/* ── States ─────────────────────────────────────────────────── */

/* Hover */
.ivs-swatch:hover:not(.ivs--disabled) {
	border-color: var(--ivs-hover-border);
	transform:    scale(1.08);
	z-index:      1;
}

/* Focus (keyboard) */
.ivs-swatch:focus-visible {
	outline:        2px solid var(--ivs-selected-color);
	outline-offset: 2px;
}

/* Selected */
.ivs-swatch.ivs--selected {
	border-color: var(--ivs-selected-color);
	box-shadow:   0 0 0 1px var(--ivs-selected-color);
}

/* Disabled — opacity style */
.ivs-swatch.ivs--disabled {
	opacity: var(--ivs-disabled-opacity);
	cursor:  not-allowed;
	transform: none !important;
}

/* Disabled — crossed style */
.ivs--style-crossed .ivs-swatch.ivs--disabled::after,
.ivs-swatch.ivs--disabled.ivs--crossed::after {
	content:    '';
	position:   absolute;
	top:        50%;
	left:       -2px;
	right:      -2px;
	height:     2px;
	background: rgba(0, 0, 0, 0.4);
	transform:  rotate(-45deg) translateY(-50%);
	transform-origin: center;
}

/* Disabled — hidden style */
.ivs--style-hidden .ivs-swatch.ivs--disabled,
.ivs-swatch.ivs--disabled.ivs--hidden {
	display: none !important;
}

/* ── Tooltip ─────────────────────────────────────────────────── */
.ivs-swatch__tooltip {
	position:       absolute;
	bottom:         calc(100% + 8px);
	left:           50%;
	transform:      translateX(-50%);
	background:     var(--ivs-tooltip-bg);
	color:          var(--ivs-tooltip-color);
	font-size:      12px;
	font-weight:    500;
	line-height:    1.3;
	padding:        5px 8px;
	border-radius:  4px;
	white-space:    nowrap;
	pointer-events: none;
	opacity:        0;
	visibility:     hidden;
	transition:     opacity 0.15s ease, visibility 0.15s ease;
	z-index:        100;
}

/* Tooltip arrow */
.ivs-swatch__tooltip::after {
	content:      '';
	position:     absolute;
	top:          100%;
	left:         50%;
	transform:    translateX(-50%);
	border:       5px solid transparent;
	border-top-color: var(--ivs-tooltip-bg);
}

/* Show tooltip on hover */
.ivs-swatch:hover .ivs-swatch__tooltip,
.ivs-swatch:focus-visible .ivs-swatch__tooltip {
	opacity:    1;
	visibility: visible;
}

/* ── Archive swatches ─────────────────────────────────────────── */
.ivs-archive-swatches {
	margin: 8px 0 6px;
	text-align: center;
}

.ivs-archive-swatches .ivs-swatches {
	margin: 0;
	justify-content: center;
}

/* Archive swatch links — reset all browser/theme <a> defaults */
.ivs-archive-swatches .ivs-swatch {
	text-decoration: none !important;
	color:           inherit !important;
	display:         inline-flex !important;
	box-sizing:      border-box;
}

/* "+N more" badge */
.ivs-swatches__more {
	display:        inline-flex;
	align-items:    center;
	justify-content: center;
	height:         var(--ivs-size);
	padding:        0 8px;
	font-size:      11px;
	font-weight:    600;
	color:          #555;
	background:     #f5f5f5;
	border:         1px solid #ddd;
	border-radius:  var(--ivs-radius);
	white-space:    nowrap;
	cursor:         default;
}

/* ── Responsive ──────────────────────────────────────────────── */
@media (max-width: 600px) {
	.ivs-swatches {
		gap: max(4px, calc(var(--ivs-gap) - 2px));
	}

	.ivs-swatch__tooltip {
		display: none; /* Hide tooltips on touch screens. */
	}
}