/*
 * Oller del Mas — Rediseño del bloque YITH WAPO ("Personaliza tu experiencia").
 *
 * Convierte los <select> Sí/No en tarjetas tipo "cajita" con icono,
 * título, precio y checkbox visible (mismo lenguaje que la caja
 * "¿Es para regalar?"). Oculta lo que YITH pinta por defecto y añade
 * una caja resumen con total siempre visible.
 *
 * Paleta del tema: --color-dark (#242322), --color-white (#fff),
 * --color-beige (#E5CFB4), --color-beigeDark (#CB9E69),
 * --color-light (#F8F7F5).
 */

/* ─── Reset visual del bloque WAPO ──────────────────────────────────── */

.yith-wapo-container {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 10px;
	margin: 18px 0 8px;
	padding: 0;
	background: transparent !important;
	border: 0 !important;
}
@media (max-width: 540px) {
	.yith-wapo-container {
		grid-template-columns: 1fr;
	}
}

/* Cada bloque YITH es un wrapper de un add-on; se comporta como celda del grid. */
.yith-wapo-container .yith-wapo-block {
	display: block;
	min-width: 0;
}

/* El resumen ocupa siempre la fila completa. */
.yith-wapo-container .odm-wapo-summary {
	grid-column: 1 / -1;
}

/* Cada add-on YITH es solo un envoltorio; visual reside en .odm-wapo-card. */
.yith-wapo-container .yith-wapo-addon {
	background: transparent !important;
	border: 0 !important;
	border-radius: 0 !important;
	padding: 0 !important;
	margin: 0 !important;
	box-shadow: none !important;
}

/* Cabecera de YITH (título vacío en estos add-ons): fuera. */
.yith-wapo-container .addon-header { display: none !important; }
/* Descripción duplicada (la usamos como título en la tarjeta): fuera. */
.yith-wapo-container .wapo-addon-description { display: none !important; }
/* Imagen vacía que inyecta block.php cuando no hay default: fuera. */
.yith-wapo-container .image-container:empty { display: none !important; }

.yith-wapo-container .options-container,
.yith-wapo-container .options {
	padding: 0 !important;
	margin: 0 !important;
	background: transparent !important;
	border: 0 !important;
}
/* block.php inyecta style="width:75% !important" inline en .options.
   Aumentamos especificidad para forzar ancho completo. */
.yith-wapo-container .yith-wapo-addon .options-container .options[style] {
	width: 100% !important;
}

/* ─── Tarjeta (label envolvente) ────────────────────────────────────── */

.odm-wapo-card {
	position: relative;
	display: block;
	cursor: pointer;
	margin: 0;
	font-family: var(--font-body, 'Source Sans 3', sans-serif);
	color: var(--color-dark, #242322);
}

/* Input checkbox visualmente oculto pero accesible. */
.odm-wapo-card__input,
.odm-wapo-card__select {
	position: absolute !important;
	width: 1px !important;
	height: 1px !important;
	padding: 0 !important;
	margin: -1px !important;
	overflow: hidden !important;
	clip: rect(0 0 0 0) !important;
	white-space: nowrap !important;
	border: 0 !important;
	opacity: 0 !important;
	pointer-events: none !important;
}

.odm-wapo-card__inner {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 12px 14px;
	border: 1px solid rgba(36, 35, 34, 0.18);
	border-radius: 3px;
	background-color: var(--color-light, #F8F7F5);
	transition: border-color .25s ease, background-color .25s ease, box-shadow .25s ease;
}

.odm-wapo-card:hover .odm-wapo-card__inner {
	border-color: var(--color-beigeDark, #CB9E69);
}

/* Estado seleccionado (idéntico al patrón ".odm-gift.is-gift"). */
.odm-wapo-card__input:checked + .odm-wapo-card__inner {
	background-color: var(--color-beige, #E5CFB4);
	border-color: var(--color-beigeDark, #CB9E69);
	box-shadow: 0 4px 14px rgba(203, 158, 105, 0.18);
}

/* Foco visible (accesibilidad). */
.odm-wapo-card__input:focus-visible + .odm-wapo-card__inner {
	outline: 2px solid var(--color-beigeDark, #CB9E69);
	outline-offset: 2px;
}

/* ─── Pedazos de la tarjeta ─────────────────────────────────────────── */

.odm-wapo-card__icon {
	flex: 0 0 auto;
	width: 36px;
	height: 36px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 3px;
	background-color: var(--color-white, #fff);
	color: var(--color-beigeDark, #CB9E69);
	transition: background-color .25s ease, color .25s ease;
}
.odm-wapo-card__icon svg {
	width: 20px;
	height: 20px;
	display: block;
}
.odm-wapo-card__input:checked + .odm-wapo-card__inner .odm-wapo-card__icon {
	background-color: var(--color-white, #fff);
	color: var(--color-dark, #242322);
}

.odm-wapo-card__text {
	flex: 1 1 auto;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 2px;
	line-height: 1.3;
}

.odm-wapo-card__title {
	font-family: var(--font-sans, 'DM Sans', sans-serif);
	font-size: 15px;
	font-weight: 500;
	letter-spacing: .01em;
	color: var(--color-dark, #242322);
}

.odm-wapo-card__desc {
	font-size: 12.5px;
	font-weight: 300;
	color: var(--color-dark, #242322);
	opacity: .72;
}

/* El tema fija font-family Sangbleu + bold con alta especificidad en
   .woocommerce .summary .woocommerce-Price-amount, así que aquí forzamos
   tamaño/peso/familia tanto en el wrapper como en los nodos internos
   (bdi/span) que produce wc_price(). */
.odm-wapo-card__price,
.odm-wapo-card .odm-wapo-card__price .woocommerce-Price-amount,
.odm-wapo-card .odm-wapo-card__price bdi {
	font-family: var(--font-body, 'Source Sans 3', sans-serif) !important;
	font-size: 13px !important;
	font-weight: 500 !important;
	color: var(--color-beigeDark, #CB9E69) !important;
	font-variant-numeric: tabular-nums;
	line-height: 1.3;
}
.odm-wapo-card__price {
	flex: 0 0 auto;
	white-space: nowrap;
	margin-left: auto;
}
.odm-wapo-card__price .woocommerce-Price-currencySymbol {
	margin-left: 2px;
}
.odm-wapo-card__input:checked + .odm-wapo-card__inner .odm-wapo-card__price {
	color: var(--color-dark, #242322);
}

/* Casilla del check visible (estilo idéntico a .odm-gift__check). */
.odm-wapo-card__check {
	flex: 0 0 auto;
	width: 22px;
	height: 22px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border: 1px solid var(--color-dark, #242322);
	border-radius: 2px;
	background-color: var(--color-white, #fff);
	color: transparent;
	transition: background-color .2s ease, color .2s ease;
}
.odm-wapo-card__input:checked + .odm-wapo-card__inner .odm-wapo-card__check {
	background-color: var(--color-dark, #242322);
	color: var(--color-white, #fff);
}
.odm-wapo-card__check svg {
	transform: scale(0.9);
}

/* ─── Resumen "Tu reserva" ──────────────────────────────────────────── */

.odm-wapo-summary {
	margin: 18px 0 12px;
	padding: 18px 20px;
	background-color: var(--color-light, #F8F7F5);
	border: 1px solid rgba(36, 35, 34, 0.10);
	border-radius: 4px;
	font-family: var(--font-body, 'Source Sans 3', sans-serif);
	color: var(--color-dark, #242322);
	font-size: 14px;
}

.odm-wapo-summary[hidden] { display: none; }

.odm-wapo-summary__title {
	margin: 0 0 12px;
	font-family: var(--font-sans, 'DM Sans', sans-serif);
	font-size: 12px;
	font-weight: 500;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--color-dark, #242322);
	opacity: .75;
}

.odm-wapo-summary__list {
	list-style: none;
	padding: 0;
	margin: 0 0 12px;
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.odm-wapo-summary__list li {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 12px;
	line-height: 1.3;
}

.odm-wapo-summary__row-label {
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	color: var(--color-dark, #242322);
}
.odm-wapo-summary__list li.is-base .odm-wapo-summary__row-label {
	opacity: .7;
}

.odm-wapo-summary__row-value {
	flex: 0 0 auto;
	font-variant-numeric: tabular-nums;
	font-weight: 500;
	color: var(--color-dark, #242322);
}

.odm-wapo-summary__total {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 12px;
	padding-top: 12px;
	border-top: 1px solid rgba(36, 35, 34, 0.10);
}

.odm-wapo-summary__total-label {
	font-family: var(--font-sans, 'DM Sans', sans-serif);
	font-size: 11px;
	font-weight: 500;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--color-dark, #242322);
}

.odm-wapo-summary__total-value {
	font-family: var(--font-body, 'Source Sans 3', sans-serif);
	font-size: 22px;
	font-weight: 700;
	color: var(--color-dark, #242322);
	font-variant-numeric: tabular-nums;
}

/* ─── Responsive ────────────────────────────────────────────────────── */

@media (max-width: 540px) {
	.odm-wapo-card__inner {
		padding: 10px 12px;
		gap: 10px;
	}
	.odm-wapo-card__icon { width: 32px; height: 32px; }
	.odm-wapo-card__icon svg { width: 18px; height: 18px; }
	.odm-wapo-card__title { font-size: 14px; }
	.odm-wapo-card__price,
	.odm-wapo-card .odm-wapo-card__price .woocommerce-Price-amount,
	.odm-wapo-card .odm-wapo-card__price bdi { font-size: 12px !important; }
	.odm-wapo-summary { padding: 14px 16px; }
	.odm-wapo-summary__total-value { font-size: 19px; }
}

/* ─── Fallback (sin patrón Sí/No: select visible) ───────────────────── */

.odm-wapo-control[data-odm-wapo-pattern="select"] {
	padding: 4px 0;
}
.odm-wapo-control[data-odm-wapo-pattern="select"] .yith-wapo-option-value {
	width: 100%;
	padding: 10px 14px;
	border: 1px solid rgba(36, 35, 34, 0.18);
	border-radius: 3px;
	background: var(--color-white, #fff);
	font-size: 14px;
	font-family: var(--font-body, 'Source Sans 3', sans-serif);
}