/**
 * Descripción de la opción seleccionada, mostrada debajo de los select
 * (reemplaza el tooltip "?"). El contenido lo actualiza tm-epo.js al cambiar la opción.
 *
 * Personalización: edita las variables --tc-desc-*.
 * El color del check está dentro del SVG (fill=%2334c77b); si lo cambias, cambia también --tc-desc-accent.
 */

.tm-extra-product-options ul.tmcp-ul-wrap li.tmcp-field-wrap .tc-select-description {
	--tc-desc-label: "Incluye";
	--tc-desc-accent: #34c77b;

	box-sizing: border-box;
	flex: 0 0 100%;
	width: 100%;
	margin: 0.75em 0 0.25em;
	padding: 1em 1.2em;
	background-color: rgba(255, 255, 255, 0.08);
	background-color: color-mix(in srgb, currentColor 8%, transparent);
	border: 1px solid rgba(255, 255, 255, 0.18);
	border-color: color-mix(in srgb, currentColor 18%, transparent);
	border-radius: 10px;
	font-size: 1.05rem;
	font-weight: 500;
	line-height: 1.5;
	animation: tc-select-description-in 0.35s ease-out;
}

/* Encabezado con check: "Incluye". */
.tm-extra-product-options ul.tmcp-ul-wrap li.tmcp-field-wrap .tc-select-description::before {
	content: var(--tc-desc-label);
	display: block;
	margin-bottom: 0.4em;
	padding-left: 1.7em;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%2334c77b' d='M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20zm-1.2 14.2-4.1-4.1 1.4-1.4 2.7 2.7 5.7-5.7 1.4 1.4-7.1 7.1z'/%3E%3C/svg%3E") no-repeat left center / 1.25em 1.25em;
	font-size: 0.75em;
	font-weight: 700;
	letter-spacing: 0.08em;
	line-height: 1.6;
	text-transform: uppercase;
	color: var(--tc-desc-accent);
}

/* Sin opción elegida o sin descripción: no se muestra la caja vacía. */
.tm-extra-product-options ul.tmcp-ul-wrap li.tmcp-field-wrap .tc-select-description:empty {
	display: none;
}

.tm-extra-product-options ul.tmcp-ul-wrap li.tmcp-field-wrap .tc-select-description > :first-child {
	margin-top: 0;
}

.tm-extra-product-options ul.tmcp-ul-wrap li.tmcp-field-wrap .tc-select-description > :last-child {
	margin-bottom: 0;
}

@keyframes tc-select-description-in {
	from {
		opacity: 0;
		transform: translateY(-4px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

@media (prefers-reduced-motion: reduce) {
	.tm-extra-product-options ul.tmcp-ul-wrap li.tmcp-field-wrap .tc-select-description {
		animation: none;
	}
}