/**
 * ChocoBox - estilos del selector.
 * Los colores salen de variables: cambiá solo el bloque .chocobox de abajo
 * para adaptarlo a tu marca.
 */

.chocobox {
	--cb-accent: #a89083;
	--cb-accent-dark: #8a7166;
	--cb-empty: #c9b6ac;
	--cb-empty-hover: #b8a196;
	--cb-text: #3f3733;
	--cb-muted: #8a7f79;
	--cb-line: #e6ddd7;
	--cb-radius: 10px;

	margin: 0 0 1.75em;
	color: var(--cb-text);
	font-size: 16px;
	line-height: 1.5;
}

.chocobox-defs {
	position: absolute;
	width: 0;
	height: 0;
	overflow: hidden;
}

/**
 * Todo lo clickeable del plugin es un <button> pelado, así que hereda el
 * :hover/:focus de los botones del tema. Eso es lo que pintaba un rectángulo
 * de color sobre el hueco activo, tapando la silueta del bombón.
 */
.chocobox button:hover,
.chocobox button:focus,
.chocobox button:focus-visible,
.chocobox button:active {
	background: none;
	box-shadow: none;
	text-shadow: none;
}

.chocobox .chocobox__picker-close:hover {
	color: var(--cb-text);
}

.chocobox-warning {
	padding: 12px 14px;
	border-left: 3px solid #d3a04a;
	background: #fdf6e8;
	font-size: 14px;
}

/* --- Selector de tamaño ------------------------------------------------- */

.chocobox__sizes {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 0;
	margin-bottom: 1.25em;
}

.chocobox__size {
	position: relative;
	padding: 4px 0;
	margin: 0;
	border: 0;
	background: none;
	color: var(--cb-accent);
	font-size: 1.05em;
	line-height: 1.3;
	cursor: pointer;
	transition: color 0.15s ease;
}

.chocobox__size + .chocobox__size::before {
	content: "/";
	margin: 0 0.6em;
	color: var(--cb-line);
}

.chocobox__size:hover {
	color: var(--cb-accent-dark);
}

.chocobox__size.is-active {
	color: var(--cb-accent-dark);
	font-weight: 600;
	text-decoration: underline;
	text-underline-offset: 5px;
}

/* Con variaciones, cada tamaño tiene su propio stock. */
.chocobox__size.is-sold-out {
	color: var(--cb-muted);
	cursor: not-allowed;
	text-decoration: line-through;
	text-decoration-thickness: 1px;
}

.chocobox__size.is-sold-out:hover {
	color: var(--cb-muted);
}

.chocobox__size-badge {
	margin-left: 0.4em;
	font-size: 0.7em;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	text-decoration: none;
	vertical-align: middle;
}

/* --- Encabezado y huecos ------------------------------------------------ */

.chocobox__heading {
	margin: 0 0 0.9em;
	text-align: center;
	color: var(--cb-muted);
	font-size: 1em;
}

/**
 * El número de columnas lo calcula el JS según el tamaño de la caja
 * (--cb-cols), para que 2, 5 y 15 den filas parejas. El bombón tiene ancho
 * fijo: así una caja de 2 no dibuja dos bombones gigantes.
 */
.chocobox__slots {
	display: grid;
	grid-template-columns: repeat(var(--cb-cols, 5), var(--cb-slot, 68px));
	gap: 12px;
	justify-content: center;
	margin-bottom: 0.9em;
}

/* 179 x 154: la proporción real del bombón, medida sobre la foto. */
.chocobox__slot {
	position: relative;
	display: block;
	width: 100%;
	aspect-ratio: 179 / 154;
	padding: 0;
	border: 0;
	background: none;
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
	transition: transform 0.15s ease;
}

.chocobox__slot:hover {
	transform: translateY(-2px);
}

.chocobox__slot:focus-visible {
	outline: 2px solid var(--cb-accent-dark);
	outline-offset: 3px;
	border-radius: 6px;
}

/**
 * Hueco vacío: silueta con la forma exacta del bombón, recortada con la
 * máscara SVG (fallback a border-radius si el navegador no la soporta).
 */
.chocobox__bonbon {
	display: block;
	width: 100%;
	height: 100%;
	background-color: var(--cb-empty);
	background-repeat: no-repeat;
	border-radius: 50% 50% 14% 14% / 66% 66% 34% 34%;
	-webkit-clip-path: url(#chocobox-dome);
	clip-path: url(#chocobox-dome);
	transition: background-color 0.2s ease, transform 0.2s ease;
}

/**
 * Con foto no recortamos nada: el PNG ya trae la silueta del bombón y el
 * background-size/position calculados en PHP lo calzan justo en el hueco.
 * Recortarlo otra vez es lo que dejaba el borde asomando.
 */
.chocobox__slot.has-photo .chocobox__bonbon,
.chocobox__flavor.has-photo .chocobox__bonbon {
	background-color: transparent;
	border-radius: 0;
	-webkit-clip-path: none;
	clip-path: none;
}

.chocobox__slot:hover .chocobox__bonbon {
	background-color: var(--cb-empty-hover);
}

/* 57%: el centro óptico del domo, no el geométrico. */
.chocobox__slot-plus {
	position: absolute;
	top: 57%;
	left: 50%;
	transform: translate(-50%, -50%);
	color: #fff;
	font-size: 1.6em;
	font-weight: 300;
	line-height: 1;
	pointer-events: none;
	transition: opacity 0.15s ease;
}

.chocobox__slot-remove {
	position: absolute;
	top: -4px;
	right: -4px;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 20px;
	height: 20px;
	border-radius: 50%;
	background: var(--cb-accent-dark);
	color: #fff;
	font-size: 14px;
	line-height: 1;
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.15s ease;
}

/* Hueco lleno: se ve el bombón, desaparece el "+" y aparece la X. */
.chocobox__slot.is-filled .chocobox__slot-plus {
	opacity: 0;
}

.chocobox__slot.is-filled .chocobox__bonbon {
	animation: chocobox-pop 0.3s ease;
}

.chocobox__slot.is-filled:hover .chocobox__slot-remove,
.chocobox__slot.is-filled:focus-within .chocobox__slot-remove {
	opacity: 1;
	pointer-events: auto;
	cursor: pointer;
}

/**
 * Hueco que está esperando que elijas sabor. Usamos drop-shadow en vez de
 * box-shadow: sigue el contorno real de la silueta y también el del PNG,
 * mientras que box-shadow dibujaría un rectángulo.
 */
.chocobox__slot.is-active .chocobox__bonbon {
	filter:
		drop-shadow(2px 0 0 var(--cb-accent-dark))
		drop-shadow(-2px 0 0 var(--cb-accent-dark))
		drop-shadow(0 2px 0 var(--cb-accent-dark))
		drop-shadow(0 -2px 0 var(--cb-accent-dark));
	animation: chocobox-pulse 1.4s ease-in-out infinite;
}

@keyframes chocobox-pop {
	0% {
		transform: scale(0.4);
		opacity: 0;
	}

	60% {
		transform: scale(1.12);
		opacity: 1;
	}

	100% {
		transform: scale(1);
	}
}

@keyframes chocobox-pulse {
	0%,
	100% {
		opacity: 1;
	}

	50% {
		opacity: 0.65;
	}
}

@media (prefers-reduced-motion: reduce) {
	.chocobox__slot,
	.chocobox__bonbon,
	.chocobox__slot.is-filled .chocobox__bonbon,
	.chocobox__slot.is-active .chocobox__bonbon {
		animation: none;
		transition: none;
	}
}

/* --- Contador, acciones y precio ---------------------------------------- */

.chocobox__status {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 14px;
	margin-bottom: 0.75em;
	font-size: 0.9em;
}

.chocobox__counter {
	color: var(--cb-muted);
}

.chocobox__counter.is-complete {
	color: #2c7a2c;
	font-weight: 600;
}

.chocobox__link {
	padding: 0;
	border: 0;
	background: none;
	color: var(--cb-accent);
	font-size: inherit;
	text-decoration: underline;
	text-underline-offset: 3px;
	cursor: pointer;
}

.chocobox__link:hover {
	color: var(--cb-accent-dark);
}

.chocobox__price {
	margin-bottom: 1em;
	text-align: center;
	font-size: 1.5em;
	font-weight: 600;
	color: var(--cb-accent-dark);
}

/**
 * En variable, el total con los extras lo muestra el bloque de ChocoBox, así que
 * escondemos el precio que WooCommerce pinta para la variación. La clase la pone
 * el JS en el formulario cuando toma el mando del selector de variaciones.
 */
.chocobox-has-price .woocommerce-variation-price {
	display: none;
}

/* --- Panel de sabores ---------------------------------------------------- */

.chocobox__picker {
	margin-bottom: 1.1em;
	padding: 14px;
	border: 1px solid var(--cb-line);
	border-radius: var(--cb-radius);
	background: #fff;
	animation: chocobox-slide 0.2s ease;
}

@keyframes chocobox-slide {
	from {
		opacity: 0;
		transform: translateY(-6px);
	}

	to {
		opacity: 1;
		transform: none;
	}
}

.chocobox__picker-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 12px;
}

.chocobox__picker-title {
	font-weight: 600;
	font-size: 0.95em;
}

.chocobox__picker-close {
	padding: 0 4px;
	border: 0;
	background: none;
	color: var(--cb-muted);
	font-size: 1.5em;
	line-height: 1;
	cursor: pointer;
}

.chocobox__flavors {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(84px, 1fr));
	gap: 10px;
	max-height: 320px;
	overflow-y: auto;
}

.chocobox__flavor {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 6px;
	padding: 8px 4px;
	border: 1px solid transparent;
	border-radius: 8px;
	background: none;
	color: inherit;
	font-size: 0.78em;
	line-height: 1.25;
	text-align: center;
	cursor: pointer;
	transition: border-color 0.15s ease, background 0.15s ease;
}

/**
 * El sabor es un <button>, así que hereda el :hover de los botones del tema:
 * fondo oscuro y letra blanca, que sobre nuestro panel claro no se lee. Fijamos
 * color y fondo en todos los estados para que el tema no nos los pise; el
 * selector va con .chocobox delante solo para ganarle en especificidad.
 */
.chocobox .chocobox__flavor,
.chocobox .chocobox__flavor:hover,
.chocobox .chocobox__flavor:focus,
.chocobox .chocobox__flavor:focus-visible,
.chocobox .chocobox__flavor:active,
.chocobox .chocobox__flavor[disabled] {
	background: none;
	color: var(--cb-text);
	box-shadow: none;
	text-decoration: none;
	text-shadow: none;
}

.chocobox .chocobox__flavor:hover,
.chocobox .chocobox__flavor:focus-visible {
	border-color: var(--cb-line);
	background: #faf7f5;
}

.chocobox .chocobox__flavor-name {
	color: var(--cb-text);
}

.chocobox .chocobox__flavor-extra {
	color: var(--cb-muted);
}

.chocobox__flavor .chocobox__bonbon {
	width: 54px;
	height: auto;
	aspect-ratio: 179 / 154;
	flex: 0 0 auto;
}

.chocobox__flavor-name {
	display: block;
}

.chocobox__flavor-extra {
	color: var(--cb-muted);
	font-size: 0.92em;
}

.chocobox__flavor.is-disabled,
.chocobox__flavor.is-used {
	opacity: 0.4;
	cursor: not-allowed;
}

.chocobox__flavor.is-used {
	cursor: default;
}

.chocobox__flavor-badge {
	position: absolute;
	top: 4px;
	right: 4px;
	padding: 1px 5px;
	border-radius: 3px;
	background: #b32d2e;
	color: #fff;
	font-size: 9px;
	text-transform: uppercase;
	letter-spacing: 0.04em;
}

/* --- Avisos -------------------------------------------------------------- */

.chocobox__notice {
	margin-bottom: 1em;
	padding: 10px 12px;
	border-radius: 6px;
	font-size: 0.88em;
}

.chocobox__notice.is-success {
	background: #eaf6ea;
	color: #2c7a2c;
}

.chocobox__notice.is-warning {
	background: #fdf6e8;
	color: #8a6516;
}

.chocobox__notice.is-error {
	background: #fdecec;
	color: #b32d2e;
}

.chocobox__notice-link {
	color: inherit;
	font-weight: 600;
	text-decoration: underline;
}

/* --- Botón de añadir al carrito ------------------------------------------ */

.single_add_to_cart_button.chocobox-disabled {
	opacity: 0.5;
	cursor: not-allowed;
}

/* --- Responsive ---------------------------------------------------------- */

@media (max-width: 600px) {
	.chocobox__slots {
		--cb-slot: 58px;
		gap: 10px;
	}

	.chocobox__flavors {
		grid-template-columns: repeat(auto-fill, minmax(72px, 1fr));
	}
}

@media (max-width: 380px) {
	.chocobox__slots {
		--cb-slot: 46px;
		gap: 8px;
	}
}