/**
 * OREM Single Coupon — estilos para Cart/Checkout Blocks.
 *
 * Tres responsabilidades, verificadas contra el DOM real del bloque:
 *
 *   1) html.orem-coupon-locked → ocultar el WRAPPER del coupon-form-block
 *      (.wp-block-woocommerce-cart-order-summary-coupon-form-block), no
 *      solo el panel interior. El wrapper tiene border-top propio: si
 *      ocultas únicamente el panel interno queda un <hr> fantasma.
 *
 *   2) Aplanar el subárbol .wc-block-components-totals-item__description
 *      con display:contents para que el <ul> del cupón viva como flex
 *      item directo de la fila de descuento — junto al label y al
 *      monto, sin la sub-fila "block" que mete WC Blocks por defecto.
 *
 *   3) Re-estilizar el chip nativo (li.wc-block-components-chip que
 *      también es .wc-block-components-totals-discount__coupon-list-item)
 *      con look premium ligero, no como widget grande.
 *
 * Mobile-first ~360px. Respeta prefers-reduced-motion. Sin animaciones de
 * layout.
 */

/* ── 1. Ocultar el wrapper del coupon-form cuando hay cupón ───────────── */

html.orem-coupon-locked .wp-block-woocommerce-cart-order-summary-coupon-form-block,
html.orem-coupon-locked .wc-block-components-totals-coupon {
	display: none !important;
}

/* ── 2. Re-layout de la fila de descuento: chip inline con label/valor ── */

/*
 * DOM verificado en staging:
 *   .wc-block-components-totals-item.wc-block-components-totals-discount
 *     ├── span.wc-block-components-totals-item__label    "Descuento"
 *     ├── span.wc-block-components-totals-item__value    "-MXN $27"
 *     └── div.wc-block-components-totals-item__description
 *         └── div
 *             └── div
 *                 └── ul.wc-block-components-totals-discount__coupon-list
 *                     └── li.wc-block-components-chip ...
 *
 * Por defecto la fila es grid (1fr auto, 2 filas) con __description
 * spanning row 2 en ancho completo → el chip aparece debajo como widget
 * suelto. Convertimos la fila a flex, aplanamos description + sus dos
 * divs intermedios con display:contents, y el <ul> queda como flex item
 * directo, ordenado entre label y value.
 *
 * margin-left:auto en value empuja el monto al borde derecho.
 */
.wc-block-components-totals-discount {
	display: flex !important;
	align-items: center;
	flex-wrap: wrap;
	column-gap: 0.5rem;
	row-gap: 0.25rem;
}

.wc-block-components-totals-discount .wc-block-components-totals-item__label {
	order: 1;
	flex: 0 0 auto;
}

/* Aplanar todo el subárbol description → el <ul> del chip llega como
   hijo directo del flex parent. display:contents elimina la caja del
   elemento dejando intactos sus descendientes. */
.wc-block-components-totals-discount .wc-block-components-totals-item__description,
.wc-block-components-totals-discount .wc-block-components-totals-item__description > div,
.wc-block-components-totals-discount .wc-block-components-totals-item__description > div > div {
	display: contents !important;
}

.wc-block-components-totals-discount .wc-block-components-totals-discount__coupon-list {
	order: 2;
	flex: 0 1 auto;
	list-style: none;
	margin: 0;
	padding: 0;
	display: inline-flex;
	flex-wrap: wrap;
	gap: 0.25rem;
	min-width: 0; /* permite que el chip se encoja si la línea se llena */
}

.wc-block-components-totals-discount .wc-block-components-totals-item__value {
	order: 3;
	flex: 0 0 auto;
	margin-left: auto; /* empuja el monto al borde derecho */
	white-space: nowrap;
}

/* ── 3. Chip premium ──────────────────────────────────────────────────── */

/*
 * El <li> nativo del cupón YA es el chip — lleva las clases
 * .wc-block-components-chip y .wc-block-components-totals-discount__coupon-list-item.
 * Look sutil: vive entre líneas de totales, no debe competir visualmente
 * con el resto del sidebar.
 */
.wc-block-components-totals-discount .wc-block-components-totals-discount__coupon-list-item,
.wc-block-components-totals-discount .wc-block-components-chip--radius-large {
	display: inline-flex;
	align-items: center;
	gap: 0.25rem;
	padding: 0.125rem 0.375rem 0.125rem 0.625rem;
	border-radius: 999px;
	background: rgba(0, 0, 0, 0.04);
	border: 1px solid rgba(0, 0, 0, 0.08);
	box-shadow: none;
	font-size: 0.8125rem;
	font-weight: 500;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	line-height: 1.2;
	transition: background 150ms ease, border-color 150ms ease;
}

.wc-block-components-totals-discount .wc-block-components-totals-discount__coupon-list-item:hover,
.wc-block-components-totals-discount .wc-block-components-chip--radius-large:hover {
	background: rgba(0, 0, 0, 0.06);
	border-color: rgba(0, 0, 0, 0.14);
}

/* Texto del chip — el code va en un <span> interior. Limpiamos el
   text-transform heredado del <li> por si hay doble efecto. */
.wc-block-components-totals-discount .wc-block-components-chip__text {
	text-transform: inherit;
}

/* Botón × — visual compacto en desktop, tap target ≥44px en móvil. */
.wc-block-components-totals-discount .wc-block-components-chip__remove,
.wc-block-components-totals-discount button.wc-block-components-chip__remove {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 18px;
	height: 18px;
	min-width: 18px;
	min-height: 18px;
	border: none;
	background: transparent;
	color: inherit;
	border-radius: 999px;
	cursor: pointer;
	padding: 0;
	margin-left: 0.125rem;
	transition: background 150ms ease, transform 150ms ease;
}

.wc-block-components-totals-discount .wc-block-components-chip__remove:hover {
	background: rgba(0, 0, 0, 0.10);
}

.wc-block-components-totals-discount .wc-block-components-chip__remove:active {
	transform: scale(0.9);
}

.wc-block-components-totals-discount .wc-block-components-chip__remove:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 2px;
}

/* WC Blocks renderiza el × como un <svg> dentro del botón — asegurar
   que el ícono escale al tamaño del botón. */
.wc-block-components-totals-discount .wc-block-components-chip__remove svg {
	width: 12px;
	height: 12px;
	flex-shrink: 0;
}

/* Móvil: tap target ≥44×44 (WCAG 2.5.5). Mantenemos el ícono pequeño,
   ampliamos el área táctil. */
@media (pointer: coarse), (max-width: 640px) {
	.wc-block-components-totals-discount .wc-block-components-chip__remove {
		width: 44px;
		height: 44px;
		min-width: 44px;
		min-height: 44px;
		margin-left: 0.25rem;
	}
	.wc-block-components-totals-discount .wc-block-components-chip__remove svg {
		width: 14px;
		height: 14px;
	}
}

/* Respeto a usuarios sensibles a animación. */
@media (prefers-reduced-motion: reduce) {
	.wc-block-components-totals-discount .wc-block-components-totals-discount__coupon-list-item,
	.wc-block-components-totals-discount .wc-block-components-chip--radius-large,
	.wc-block-components-totals-discount .wc-block-components-chip__remove {
		transition: none;
	}
	.wc-block-components-totals-discount .wc-block-components-chip__remove:active {
		transform: none;
	}
}