/**
 * WC Finish Swatches — Frontend Styles
 *
 * Scope: product page swatches + loop swatches + tooltip + states.
 * Designed to sit cleanly on top of Flatsome without conflicts.
 * Uses specific class names to avoid selector collisions.
 *
 * @package WC_Finish_Swatches
 */

/* ============================================================
   Shared token: swatch sizing, radius, border colours.
   Override in child theme if needed.
   ============================================================ */
:root {
	--wc-fs-swatch-size:         36px;
	--wc-fs-swatch-size-loop:    28px;
	--wc-fs-swatch-radius:       50%;  /* circle; set to 4px for square */
	--wc-fs-border-color:        #d0d0d0;
	--wc-fs-border-selected:     #1a1a1a;
	--wc-fs-border-width:        2px;
	--wc-fs-disabled-opacity:    0.38;
	--wc-fs-tooltip-bg:          #1a1a1a;
	--wc-fs-tooltip-color:       #ffffff;
	--wc-fs-gap:                 8px;
	--wc-fs-ring-offset:         2px;
}

/* ============================================================
   Hide the original <select> — kept in DOM for WC JS.
   ============================================================ */
.wc-fs-hidden-select {
	position: absolute !important;
	width:    1px      !important;
	height:   1px      !important;
	overflow: hidden   !important;
	clip:     rect(0 0 0 0) !important;
	white-space: nowrap !important;
	border: 0 !important;
	padding: 0 !important;
	margin:  0 !important;
}

/* ============================================================
   Product page swatch list
   ============================================================ */
.wc-fs-swatches {
	display:   flex;
	flex-wrap: wrap;
	gap:       var(--wc-fs-gap);
	margin:    8px 0 12px;
	padding:   0;
	list-style: none;
}

/* ---- Individual swatch button ---- */
.wc-fs-swatch {
	position:         relative;
	display:          inline-flex;
	align-items:      center;
	justify-content:  center;
	width:            var(--wc-fs-swatch-size);
	height:           var(--wc-fs-swatch-size);
	border-radius:    var(--wc-fs-swatch-radius);
	border:           var(--wc-fs-border-width) solid var(--wc-fs-border-color);
	cursor:           pointer;
	transition:       border-color 0.15s ease, box-shadow 0.15s ease, opacity 0.15s ease;
	background-color: #e8e8e8; /* fallback when no colour or image is set */
	padding:          0;
	overflow:         hidden;
	flex-shrink:      0;
}

/* Hover state */
.wc-fs-swatch:hover:not(.is-disabled):not(.is-selected) {
	border-color: #888;
	box-shadow:   0 0 0 var(--wc-fs-ring-offset) #fff,
	              0 0 0 calc(var(--wc-fs-ring-offset) + 1px) #888;
}

/* Selected state */
.wc-fs-swatch.is-selected {
	border-color: var(--wc-fs-border-selected);
	box-shadow:   0 0 0 var(--wc-fs-ring-offset) #fff,
	              0 0 0 calc(var(--wc-fs-ring-offset) + 2px) var(--wc-fs-border-selected);
}

/* Disabled / out-of-stock state */
.wc-fs-swatch.is-disabled {
	opacity: var(--wc-fs-disabled-opacity);
	cursor:  not-allowed;
}

/* Disabled cross-out line */
.wc-fs-swatch.is-disabled::after {
	content:          '';
	position:         absolute;
	inset:            0;
	background:       linear-gradient(
		to bottom right,
		transparent calc(50% - 0.5px),
		rgba(0,0,0,0.55) calc(50% - 0.5px),
		rgba(0,0,0,0.55) calc(50% + 0.5px),
		transparent calc(50% + 0.5px)
	);
	border-radius:    var(--wc-fs-swatch-radius);
	pointer-events:   none;
}

/* ---- Tooltip ---- */
.wc-fs-swatch-tooltip {
	position:         absolute;
	bottom:           calc(100% + 6px);
	left:             50%;
	transform:        translateX(-50%);
	white-space:      nowrap;
	background:       var(--wc-fs-tooltip-bg);
	color:            var(--wc-fs-tooltip-color);
	font-size:        11px;
	line-height:      1.3;
	padding:          4px 8px;
	border-radius:    4px;
	pointer-events:   none;
	opacity:          0;
	transition:       opacity 0.15s ease;
	z-index:          999;
}

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

.wc-fs-swatch:hover .wc-fs-swatch-tooltip,
.wc-fs-swatch:focus .wc-fs-swatch-tooltip {
	opacity: 1;
}

/* Focus ring (accessibility) */
.wc-fs-swatch:focus-visible {
	outline:        2px solid #0073aa;
	outline-offset: 3px;
}

/* ============================================================
   Loop swatches (shop / category / search / related etc.)
   ============================================================ */
.wc-fs-loop-swatches {
	display:     flex;
	flex-wrap:   wrap;
	gap:         6px;
	margin:      6px 0 4px;
	padding:     0;
}

.wc-fs-loop-swatch {
	position:         relative;
	display:          inline-block;
	width:            var(--wc-fs-swatch-size-loop);
	height:           var(--wc-fs-swatch-size-loop);
	border-radius:    var(--wc-fs-swatch-radius);
	border:           1px solid var(--wc-fs-border-color);
	background-color: #e8e8e8;
	cursor:           pointer;
	transition:       border-color 0.12s ease, box-shadow 0.12s ease;
	overflow:         hidden;
	flex-shrink:      0;
	text-decoration:  none;
}

.wc-fs-loop-swatch:hover:not(.is-disabled) {
	border-color: #555;
	box-shadow:   0 0 0 1px #fff,
	              0 0 0 2px #555;
}

.wc-fs-loop-swatch.is-disabled {
	opacity: var(--wc-fs-disabled-opacity);
	cursor:  default;
}

.wc-fs-loop-swatch.is-disabled::after {
	content:          '';
	position:         absolute;
	inset:            0;
	background:       linear-gradient(
		to bottom right,
		transparent calc(50% - 0.5px),
		rgba(0,0,0,0.5) calc(50% - 0.5px),
		rgba(0,0,0,0.5) calc(50% + 0.5px),
		transparent calc(50% + 0.5px)
	);
	border-radius:    var(--wc-fs-swatch-radius);
}

/* Loop swatch tooltip (same as product page) */
.wc-fs-loop-swatch .wc-fs-swatch-tooltip {
	position:         absolute;
	bottom:           calc(100% + 5px);
	left:             50%;
	transform:        translateX(-50%);
	white-space:      nowrap;
	background:       var(--wc-fs-tooltip-bg);
	color:            var(--wc-fs-tooltip-color);
	font-size:        10px;
	padding:          3px 7px;
	border-radius:    3px;
	pointer-events:   none;
	opacity:          0;
	transition:       opacity 0.12s ease;
	z-index:          99;
}

.wc-fs-loop-swatch .wc-fs-swatch-tooltip::after {
	content:          '';
	position:         absolute;
	top:              100%;
	left:             50%;
	transform:        translateX(-50%);
	border:           4px solid transparent;
	border-top-color: var(--wc-fs-tooltip-bg);
}

.wc-fs-loop-swatch:hover .wc-fs-swatch-tooltip,
.wc-fs-loop-swatch:focus .wc-fs-swatch-tooltip {
	opacity: 1;
}

.wc-fs-loop-swatch:focus-visible {
	outline:        2px solid #0073aa;
	outline-offset: 2px;
}

/* ============================================================
   Flatsome-specific adjustments
   ============================================================ */

/* Flatsome UX product card image container (class: .product-image-wrapper
   or .woocommerce-LoopProduct-link). Ensure image transition is smooth. */
.product-image-wrapper img,
.woocommerce-LoopProduct-link img,
.product-image img {
	transition: opacity 0.25s ease !important;
}

/* When image-swap JS adds the transitioning class */
.wc-fs-img-fading {
	opacity: 0 !important;
}

/* ============================================================
   Reduced motion
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
	.wc-fs-swatch,
	.wc-fs-swatch-tooltip,
	.wc-fs-loop-swatch,
	.wc-fs-loop-swatch .wc-fs-swatch-tooltip,
	.product-image-wrapper img,
	.woocommerce-LoopProduct-link img {
		transition: none !important;
	}
}

/* ============================================================
   Responsive: smaller swatches on very narrow screens
   ============================================================ */
@media (max-width: 480px) {
	:root {
		--wc-fs-swatch-size:      30px;
		--wc-fs-swatch-size-loop: 24px;
		--wc-fs-gap:              6px;
	}
}