/**
 * TDP · Variaciones en Círculos — estilos del front.
 *
 * @package TDP_Variaciones_Colores
 */

.tdp-vc-form {
	--tdp-vc-size: 46px;
	--tdp-vc-accent: #8bc34a;
	--tdp-vc-gap: 12px;
	--tdp-vc-ring: rgba( 0, 0, 0, 0.12 );
}

/* Oculta el <select> nativo y los swatches del tema (XStore) en la celda. */
.tdp-vc-enhanced select,
.tdp-vc-enhanced .select2-container,
.tdp-vc-enhanced .st-swatch-preview,
.tdp-vc-enhanced ul.st-swatch-preview-single-product {
	display: none !important;
}

/* ── Lista de círculos ──────────────────────────────────────────────────── */

.tdp-vc {
	margin: 4px 0 2px;
}

.tdp-vc-list {
	display: flex;
	flex-wrap: wrap;
	gap: var( --tdp-vc-gap );
	margin: 0;
	padding: 0;
	list-style: none;
}

.tdp-vc-swatch {
	position: relative;
	width: var( --tdp-vc-size );
	height: var( --tdp-vc-size );
	padding: 0;
	border-radius: 50%;
	cursor: pointer;
	outline: none;
	transition: transform 0.18s cubic-bezier( 0.34, 1.56, 0.64, 1 );
	-webkit-tap-highlight-color: transparent;
}

.tdp-vc-dot {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	border-radius: 50%;
	background: #eee;
	border: 2px solid #fff;
	box-shadow:
		0 0 0 1px var( --tdp-vc-ring ),
		inset 0 2px 5px rgba( 0, 0, 0, 0.12 ),
		0 3px 7px rgba( 0, 0, 0, 0.14 );
	overflow: hidden;
	transition: box-shadow 0.2s ease;
}

.tdp-vc-swatch.has-image .tdp-vc-dot,
.tdp-vc-swatch.is-text .tdp-vc-dot {
	background: #fff;
}

.tdp-vc-dot img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 50%;
}

.tdp-vc-swatch.is-text .tdp-vc-dot {
	font-size: calc( var( --tdp-vc-size ) * 0.34 );
	font-weight: 700;
	color: #333;
	letter-spacing: 0.02em;
}

/* Hover / focus */
.tdp-vc-swatch:hover,
.tdp-vc-swatch:focus-visible {
	transform: translateY( -2px ) scale( 1.12 );
	z-index: 2;
}

.tdp-vc-swatch:focus-visible .tdp-vc-dot {
	box-shadow:
		0 0 0 2px #fff,
		0 0 0 4px var( --tdp-vc-accent ),
		0 4px 10px rgba( 0, 0, 0, 0.2 );
}

/* Seleccionado: anillo de acento + pulso */
.tdp-vc-swatch.is-selected .tdp-vc-dot {
	box-shadow:
		0 0 0 2px #fff,
		0 0 0 4px var( --tdp-vc-accent ),
		0 4px 12px rgba( 0, 0, 0, 0.2 );
}

.tdp-vc-swatch.is-selected {
	transform: scale( 1.08 );
}

.tdp-vc-swatch.is-selected::after {
	content: "";
	position: absolute;
	inset: -3px;
	border-radius: 50%;
	border: 2px solid var( --tdp-vc-accent );
	opacity: 0;
	pointer-events: none;
}

.is-animated .tdp-vc-swatch.is-selected::after {
	animation: tdp-vc-pulse 1.6s ease-out infinite;
}

/* Marca de verificación */
.tdp-vc-check {
	position: absolute;
	top: 50%;
	left: 50%;
	width: calc( var( --tdp-vc-size ) * 0.4 );
	height: calc( var( --tdp-vc-size ) * 0.4 );
	transform: translate( -50%, -50% ) scale( 0 );
	opacity: 0;
	pointer-events: none;
	transition: transform 0.22s cubic-bezier( 0.34, 1.56, 0.64, 1 ), opacity 0.18s ease;
}

.tdp-vc-check::before {
	content: "";
	position: absolute;
	top: 46%;
	left: 50%;
	width: 32%;
	height: 62%;
	border: solid #fff;
	border-width: 0 3px 3px 0;
	transform: translate( -50%, -55% ) rotate( 45deg );
	filter: drop-shadow( 0 1px 1px rgba( 0, 0, 0, 0.45 ) );
}

/* Solo mostramos el check en swatches de color/duo (donde contrasta). */
.tdp-vc-type-color.is-selected .tdp-vc-check,
.tdp-vc-type-duo.is-selected .tdp-vc-check {
	opacity: 1;
	transform: translate( -50%, -50% ) scale( 1 );
}

/* No disponible */
.tdp-vc-swatch.is-unavailable {
	cursor: not-allowed;
	opacity: 0.4;
	filter: grayscale( 0.7 );
}

.tdp-vc-swatch.is-unavailable:hover {
	transform: none;
}

.tdp-vc-swatch.is-unavailable::before {
	content: "";
	position: absolute;
	top: 50%;
	left: 6%;
	width: 88%;
	height: 2px;
	background: #b0b0b0;
	transform: rotate( -45deg );
	transform-origin: center;
	border-radius: 2px;
	pointer-events: none;
}

/* Etiqueta seleccionada (nombre de la opción) */
.tdp-vc-selected-label {
	display: block;
	margin-top: 8px;
	font-size: 0.9em;
	font-weight: 600;
	color: #444;
	min-height: 1.2em;
}

/* ── Etiqueta flotante "MÁS VENDIDO" ────────────────────────────────────── */

/* Reserva espacio arriba en toda la fila para la etiqueta flotante. */
.tdp-vc-list.has-badge {
	padding-top: 24px;
}

.tdp-vc-badge {
	position: absolute;
	bottom: calc( 100% + 9px );
	left: 50%;
	transform: translateX( -50% );
	white-space: nowrap;
	background: var( --tdp-vc-accent );
	color: #fff;
	font-size: 10px;
	font-weight: 800;
	line-height: 1;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	padding: 5px 9px;
	border-radius: 20px;
	box-shadow: 0 4px 10px rgba( 0, 0, 0, 0.22 );
	pointer-events: none;
	z-index: 3;
}

.tdp-vc-badge::after {
	content: "";
	position: absolute;
	top: 100%;
	left: 50%;
	transform: translateX( -50% );
	border: 5px solid transparent;
	border-top-color: var( --tdp-vc-accent );
}

.is-animated .tdp-vc-badge {
	animation: tdp-vc-float 2.2s ease-in-out infinite;
}

/* ── Animaciones ────────────────────────────────────────────────────────── */

/* Entrada escalonada de los círculos */
.is-animated .tdp-vc-swatch {
	animation: tdp-vc-pop 0.45s cubic-bezier( 0.34, 1.56, 0.64, 1 ) both;
	animation-delay: calc( var( --i, 0 ) * 60ms );
}

/* "Toque" al seleccionar */
.tdp-vc-swatch.just-picked {
	animation: tdp-vc-tap 0.4s ease;
}

@keyframes tdp-vc-pop {
	0% {
		opacity: 0;
		transform: scale( 0.2 );
	}
	100% {
		opacity: 1;
		transform: scale( 1 );
	}
}

@keyframes tdp-vc-tap {
	0% {
		transform: scale( 1.08 );
	}
	40% {
		transform: scale( 0.86 );
	}
	100% {
		transform: scale( 1.08 );
	}
}

@keyframes tdp-vc-pulse {
	0% {
		opacity: 0.9;
		transform: scale( 1 );
	}
	70% {
		opacity: 0;
		transform: scale( 1.35 );
	}
	100% {
		opacity: 0;
		transform: scale( 1.35 );
	}
}

@keyframes tdp-vc-float {
	0%,
	100% {
		transform: translateX( -50% ) translateY( 0 );
	}
	50% {
		transform: translateX( -50% ) translateY( -3px );
	}
}

/* Accesibilidad: respeta reduce-motion */
@media ( prefers-reduced-motion: reduce ) {
	.tdp-vc-swatch,
	.tdp-vc-check,
	.tdp-vc-dot {
		transition: none;
	}
	.is-animated .tdp-vc-swatch,
	.is-animated .tdp-vc-badge,
	.is-animated .tdp-vc-swatch.is-selected::after,
	.tdp-vc-swatch.just-picked {
		animation: none;
	}
}

/* Móvil: círculos un poco más juntos */
@media ( max-width: 480px ) {
	.tdp-vc-form {
		--tdp-vc-gap: 10px;
	}
}