/**
 * El cupón de un clic.
 *
 * Dos trabajos: esconder el cupón nativo y dibujar el bloque nuevo.
 *
 * Los colores salen de variables propias (--hsc-cupon-*) que imprime
 * HSC_Cupon::assets(). Propias y no las del checkout a propósito: checkout.css
 * solo se encola en finalizar compra, y este bloque también vive en el
 * carrito. Sin valor configurado, el PHP ya resolvió el acento del checkout
 * antes de imprimirlas, así que acá no hay cadenas de var() que adivinar.
 */

/* --- El cupón nativo, fuera de la vista --------------------------------- */
/* Bloques: el panel "Añadir cupones" del resumen del pedido. */
.wp-block-woocommerce-cart-order-summary-coupon-form-block,
/* Clásico, carrito: la fila con el campo y el botón "Aplicar cupón". */
.woocommerce-cart-form .coupon,
/* Clásico, checkout: el aviso de arriba y el formulario que despliega. */
.woocommerce-form-coupon-toggle,
form.checkout_coupon {
	display: none !important;
}

/* …salvo que el comprador pida escribir un código a mano. Ahí vuelve, pero
   solo el formulario: el aviso de arriba sigue escondido para no repetir el
   mismo ofrecimiento dos veces. */
body.hsc-cupon-manual .wp-block-woocommerce-cart-order-summary-coupon-form-block,
body.hsc-cupon-manual .woocommerce-cart-form .coupon,
body.hsc-cupon-manual form.checkout_coupon {
	display: block !important;
}

body.hsc-cupon-manual .hsc-cupon__otro {
	display: none;
}

/* --- El bloque nuevo ----------------------------------------------------- */
.hsc-cupon {
	box-sizing: border-box;
	margin: 0 0 24px;
	padding: 18px 20px;
	border: 2px dashed var(--hsc-cupon-acento, #2563eb);
	border-radius: 12px;
	background: var(--hsc-cupon-fondo, #fff);
}

.hsc-cupon * {
	box-sizing: border-box;
}

.hsc-cupon__fila {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
}

.hsc-cupon__texto {
	flex: 1 1 220px;
	min-width: 0;
}

.hsc-cupon__titulo {
	margin: 0 !important;
	font-size: 18px;
	font-weight: 700;
	line-height: 1.25;
	color: #111827;
}

.hsc-cupon__bajada {
	margin: 4px 0 0 !important;
	font-size: 14px;
	line-height: 1.4;
	color: #6b7280;
}

/* El código y el botón van juntos: el código explica qué hace el botón, y
   separados en las dos puntas del bloque dejaban de leerse como una cosa
   sola. */
.hsc-cupon__accion {
	display: flex;
	align-items: center;
	gap: 12px;
	flex-wrap: wrap;
}

/* El código se ve aunque no haya que escribirlo: el comprador lo vio en un
   mail o en un cartel de la tienda y necesita reconocer que es el mismo. */
.hsc-cupon__chip {
	display: inline-block;
	padding: 7px 12px;
	border-radius: 6px;
	background: var(--hsc-cupon-suave, rgba(37, 99, 235, .08));
	color: var(--hsc-cupon-acento, #2563eb);
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	font-size: 14px;
	font-weight: 700;
	letter-spacing: .06em;
	line-height: 1;
	white-space: nowrap;
}

/* Todos los botones del bloque arrancan reseteados y con !important.
   No es manía: el tema le pone fondo, borde y sombra a cualquier <button> de
   la página, y en elsue.uy el enlace de "otro código" quedaba como una barra
   negra al pasarle el mouse por encima. */
.hsc-cupon button {
	appearance: none;
	-webkit-appearance: none;
	margin: 0 !important;
	box-shadow: none !important;
	text-transform: none !important;
	letter-spacing: normal !important;
	cursor: pointer;
}

.hsc-cupon__boton {
	padding: 13px 24px !important;
	border: 0 !important;
	border-radius: 8px !important;
	background: var(--hsc-cupon-acento, #2563eb) !important;
	color: var(--hsc-cupon-texto, #fff) !important;
	/* Grande a propósito: es el protagonista del bloque y lo va a apretar
	   gente que no acierta un botón chico en el teléfono. */
	font-size: 16px !important;
	font-weight: 600 !important;
	line-height: 1.2 !important;
	white-space: nowrap;
}

.hsc-cupon__boton:hover:not( [disabled] ),
.hsc-cupon__boton:focus:not( [disabled] ) {
	background: var(--hsc-cupon-acento, #2563eb) !important;
	color: var(--hsc-cupon-texto, #fff) !important;
	filter: brightness( .92 );
}

.hsc-cupon__boton[disabled] {
	cursor: default;
	opacity: .75;
}

.hsc-cupon__boton:focus-visible,
.hsc-cupon__otro:focus-visible {
	outline: 2px solid var(--hsc-cupon-acento, #2563eb);
	outline-offset: 2px;
}

/* Aplicado: verde, borde sólido y el código apagado. El punteado invita a
   hacer algo y acá ya no hay nada que hacer. */
.hsc-cupon--puesto {
	border-style: solid;
	border-color: #16a34a;
	background: #f0fdf4;
}

.hsc-cupon--puesto .hsc-cupon__titulo {
	color: #14532d;
}

.hsc-cupon--puesto .hsc-cupon__chip {
	background: rgba( 22, 163, 74, .12 );
	color: #15803d;
}

.hsc-cupon--puesto .hsc-cupon__boton,
.hsc-cupon--puesto .hsc-cupon__boton:hover {
	background: #16a34a !important;
}

.hsc-cupon__error {
	margin: 12px 0 0 !important;
	color: #b91c1c;
	font-size: 14px;
	line-height: 1.4;
}

.hsc-cupon__error:empty {
	display: none;
}

/* Deliberadamente discreto: es la salida para el caso raro, no una segunda
   opción al mismo nivel que el botón. */
.hsc-cupon__otro,
.hsc-cupon__otro:hover,
.hsc-cupon__otro:focus {
	display: inline-block;
	width: auto !important;
	padding: 0 !important;
	border: 0 !important;
	border-radius: 0 !important;
	background: none !important;
	color: #6b7280 !important;
	font-size: 13px !important;
	font-weight: 400 !important;
	line-height: 1.4 !important;
	text-align: left;
	text-decoration: underline !important;
}

.hsc-cupon__otro {
	margin-top: 14px !important;
}

.hsc-cupon__otro:hover {
	color: #374151 !important;
}

.hsc-cupon--puesto .hsc-cupon__otro {
	display: none;
}

@media (max-width: 600px) {
	.hsc-cupon__accion {
		flex: 1 1 100%;
	}

	.hsc-cupon__boton {
		flex: 1 1 auto;
	}
}