/**
 * Stili per Squiddi Variation Filter.
 *
 * Lo stile .squiddi-swatch-disabled replica il comportamento visivo
 * di YITH per gli swatches out-of-stock: linea diagonale sovrapposta,
 * opacità ridotta e cursor not-allowed.
 *
 * Supporta sia le classi YITH con trattino (yith-wccl-*)
 * che con underscore (yith_wccl_*) per compatibilità con diverse
 * versioni di YITH WooCommerce Color and Label Variation Swatches.
 *
 * Usa selettori ad alta specificità con !important per sovrascrivere
 * gli stili YITH che potrebbero impostare display, opacity o pointer-events.
 * YITH usa selettori tipo ".select_box_colorpicker .yith_wccl_value"
 * (specificità 0,2,0), quindi i nostri devono essere almeno altrettanto specifici.
 */

/* ===================================================================
 * PRE-HIDE: i container swatches level2/level3 sono nascosti via CSS
 * inline generato dal PHP (wp_add_inline_style) finché il JS non ha
 * caricato la mappa e applicato il filtraggio. La classe .svf-filtered
 * viene aggiunta dal JS e rimuove il pre-hide.
 * Previene il flash of unfiltered content (FOUC).
 * ===================================================================
 */

/* ===================================================================
 * ANIMAZIONE LOADING (dots) durante il filtraggio
 * ===================================================================
 */

/* Overlay con dots sul container durante il caricamento/cambio */
.svf-loading {
	position: relative;
	pointer-events: none;
}

.svf-loading::after {
	content: '•  •  •';
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	font-size: 24px;
	letter-spacing: 4px;
	color: #666;
	z-index: 10;
	animation: svf-dots-pulse 1s ease-in-out infinite;
}

.svf-loading > * {
	opacity: 0.15 !important;
	transition: opacity 0.2s ease;
}

@keyframes svf-dots-pulse {
	0%, 100% { opacity: 0.3; }
	50% { opacity: 1; }
}

/* Transizione fluida per gli swatches che appaiono/scompaiono */
.svf-filtered .select_option,
.svf-filtered .select_option_colorpicker,
.svf-filtered .select_option_label,
.svf-filtered .yith_wccl_value {
	transition: opacity 0.15s ease;
}

/* ===================================================================
 * MODALITA' "NASCONDI" (display_mode = "hide")
 * Rimuove completamente gli swatches non disponibili.
 * ===================================================================
 */

/* Selettore base */
.squiddi-swatch-hidden {
	display: none !important;
}

/* Selettori ad alta specificità per sovrascrivere YITH colorpicker */
.select_box_colorpicker .yith_wccl_value.squiddi-swatch-hidden,
.select_box_colorpicker .yith-wccl-value.squiddi-swatch-hidden,
.select_box .yith_wccl_value.squiddi-swatch-hidden,
.select_box .yith-wccl-value.squiddi-swatch-hidden {
	display: none !important;
}

/* Selettori per label swatches (qualità, taglia) */
.select_box_label .select_option_label.squiddi-swatch-hidden,
.select_box .select_option_label.squiddi-swatch-hidden {
	display: none !important;
}

/* Selettori generici con doppia classe per massima specificità */
.yith_wccl_value.squiddi-swatch-hidden,
.yith-wccl-value.squiddi-swatch-hidden,
.select_option_label.squiddi-swatch-hidden {
	display: none !important;
}

/* ===================================================================
 * MODALITA' "DISABILITA" (display_mode = "disable")
 * Mostra gli swatches non disponibili con opacità ridotta e linea diagonale.
 * ===================================================================
 */

/* Selettore base */
.squiddi-swatch-disabled {
	position: relative !important;
	opacity: 0.35 !important;
	cursor: not-allowed !important;
	pointer-events: none !important;
}

/* Selettori ad alta specificità per sovrascrivere YITH colorpicker */
.select_box_colorpicker .yith_wccl_value.squiddi-swatch-disabled,
.select_box_colorpicker .yith-wccl-value.squiddi-swatch-disabled,
.select_box .yith_wccl_value.squiddi-swatch-disabled,
.select_box .yith-wccl-value.squiddi-swatch-disabled {
	position: relative !important;
	opacity: 0.35 !important;
	cursor: not-allowed !important;
	pointer-events: none !important;
}

/* Selettori per label swatches */
.select_box_label .select_option_label.squiddi-swatch-disabled,
.select_box .select_option_label.squiddi-swatch-disabled {
	position: relative !important;
	opacity: 0.35 !important;
	cursor: not-allowed !important;
	pointer-events: none !important;
}

/* Selettori generici con doppia classe */
.yith_wccl_value.squiddi-swatch-disabled,
.yith-wccl-value.squiddi-swatch-disabled,
.select_option_label.squiddi-swatch-disabled {
	position: relative !important;
	opacity: 0.35 !important;
	cursor: not-allowed !important;
	pointer-events: none !important;
}

/* Overflow visible per mostrare la linea diagonale */
.yith-wccl-value.squiddi-swatch-disabled,
.yith_wccl_value.squiddi-swatch-disabled {
	overflow: visible !important;
}

/* ===================================================================
 * LINEA DIAGONALE sugli swatches disabilitati
 * ===================================================================
 */
.squiddi-swatch-disabled::after {
	content: '' !important;
	position: absolute !important;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: linear-gradient(
		to top left,
		transparent 43%,
		#cc3333 43%,
		#cc3333 57%,
		transparent 57%
	) !important;
	pointer-events: none;
	z-index: 1;
}

/* Bordi arrotondati per swatches colore/immagine circolari */
.yith-wccl-value.yith-wccl-color.squiddi-swatch-disabled::after,
.yith-wccl-value.yith-wccl-image.squiddi-swatch-disabled::after,
.yith_wccl_value.yith_wccl_color.squiddi-swatch-disabled::after,
.yith_wccl_value.yith_wccl_image.squiddi-swatch-disabled::after {
	border-radius: inherit;
}

/* Linea diagonale anche con selettori YITH ad alta specificità */
.select_box_colorpicker .yith_wccl_value.squiddi-swatch-disabled::after,
.select_box_colorpicker .yith-wccl-value.squiddi-swatch-disabled::after,
.select_box .yith_wccl_value.squiddi-swatch-disabled::after,
.select_box .yith-wccl-value.squiddi-swatch-disabled::after {
	content: '' !important;
	position: absolute !important;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: linear-gradient(
		to top left,
		transparent 43%,
		#cc3333 43%,
		#cc3333 57%,
		transparent 57%
	) !important;
	pointer-events: none;
	z-index: 1;
	border-radius: inherit;
}

/* Barrato per swatches label/testo disabilitati */
.yith-wccl-value.yith-wccl-label.squiddi-swatch-disabled,
.yith_wccl_value.yith_wccl_label.squiddi-swatch-disabled,
.select_option_label.squiddi-swatch-disabled {
	text-decoration: line-through;
	text-decoration-color: #cc3333;
}

/* ===================================================================
 * RIMUOVI EFFETTI HOVER sugli swatches disabilitati
 * ===================================================================
 */
.squiddi-swatch-disabled:hover,
.yith_wccl_value.squiddi-swatch-disabled:hover,
.yith-wccl-value.squiddi-swatch-disabled:hover,
.select_option_label.squiddi-swatch-disabled:hover {
	opacity: 0.35 !important;
	cursor: not-allowed !important;
}