/**
 * Tarjeta de extra en la ficha de producto (hoy: cambio de batería).
 *
 * Reglas duras:
 *  - CERO saltos de layout. El precio se pinta siempre, marcada o no, así que
 *    nada cambia de tamaño al pulsar: solo cambian colores y el marco.
 *  - Toda la tarjeta es el blanco pulsable (es un <label>), muy por encima de
 *    los 44 px que necesita un dedo.
 *  - El verde de marca es relleno y marco, jamás texto sobre blanco: #82bbac
 *    sobre blanco da 1,9:1 y no llega ni de lejos a AA.
 *  - Funciona sin JavaScript: el estado visual sale de :has() y :checked, y si
 *    el navegador no soporta :has() la casilla nativa sigue contándolo todo.
 */

/* ⚠️ El selector de cantidad de Kadence (.quantity) va con float:left, así que sin
   este `clear` la tarjeta fluye POR DEBAJO del flotante y se lo come. No se veía en
   casi ninguna ficha porque un producto con stock 1 no pinta selector de cantidad:
   solo salía en los que tienen 2 o más unidades.

   El hueco va como RELLENO de este envoltorio y no como margen de la tarjeta: en un
   elemento con `clear`, el margen superior se consume al esquivar el flotante y la
   tarjeta acababa pegada al selector. El relleno sobrevive, y da los mismos 18 px
   haya flotante o no. */
.mrx-extra-wrap {
	clear: both;
	padding-top: 18px;
}

.mrx-extra {
	display: block;
	margin: 0 0 18px;
	padding: 14px 16px;
	border: 1px solid #dfe3e2;
	border-radius: 12px;
	background: #fbfcfc;
	cursor: pointer;
	/* El marco engorda al marcar; se compensa con el fondo, no con el tamaño. */
	transition: border-color .15s ease, background-color .15s ease, box-shadow .15s ease;
}

.mrx-extra:hover {
	border-color: #c3cbc9;
	background: #f7f9f9;
}

/* Marcada: relleno suave + marco de marca. Ni un píxel de diferencia de caja. */
.mrx-extra:has(.mrx-extra__check:checked) {
	border-color: #82bbac;
	background: #f2f8f6;
	box-shadow: inset 0 0 0 1px #82bbac;
}

/* Foco de teclado en la tarjeta entera, no solo en la casilla: es lo que se ve. */
.mrx-extra:has(.mrx-extra__check:focus-visible) {
	outline: 2px solid #15191b;
	outline-offset: 2px;
}

.mrx-extra__head {
	display: flex;
	align-items: center;
	gap: 7px;
	font-size: 15.5px;
	font-weight: 700;
	line-height: 1.3;
	color: #15191b;
	letter-spacing: -0.01em;
}

/* Icono SVG decorativo. Tamaño fijo: nunca escala con el texto, así el titular
   no se mueve. Hereda la tinta por currentColor; el relleno verde va en el SVG. */
.mrx-extra__icon {
	flex: none;
	display: block;
	color: #15191b;
}

/* La promesa, en una frase. Antes aquí había una comparación en dos filas con
   la batería que trae el teléfono; sobraba. La tarjeta dice UNA cosa: lo que se
   le pone. El dato del 85 % sigue en el aviso del carrito (snippet 7). */
.mrx-extra__lead {
	display: block;
	margin-top: 5px;
	font-size: 14px;
	line-height: 1.45;
	color: #2c3532;
}

.mrx-extra__pick {
	display: flex;
	align-items: center;
	gap: 9px;
	margin-top: 11px;
}

.mrx-extra__check {
	flex: none;
	width: 19px;
	height: 19px;
	margin: 0;
	accent-color: #82bbac;
	cursor: pointer;
}

.mrx-extra__label {
	flex: 1 1 auto;
	font-size: 14.5px;
	font-weight: 600;
	line-height: 1.35;
	color: #15191b;
}

/* El precio no se mueve nunca de la derecha: es el dato que se compara. Y va
   al doble de cuerpo que el resto — es la cifra que decide la compra, no una
   nota al pie. `tabular-nums` mantiene el ancho estable si algún día cambia. */
.mrx-extra__price {
	flex: none;
	font-size: 30px;
	font-weight: 700;
	line-height: 1.05;
	letter-spacing: -0.02em;
	color: #15191b;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

/* La advertencia de iOS. Va en letra pequeña pero NO escondida: decirlo antes
   de cobrar cuesta una línea; que lo descubra el cliente al recibir el teléfono
   cuesta una devolución. Contraste 4,6:1 sobre el fondo de la tarjeta. */
.mrx-extra__note {
	display: block;
	margin-top: 9px;
	padding-top: 8px;
	border-top: 1px solid #eaeeed;
	font-size: 12px;
	line-height: 1.5;
	color: #6a736f;
}

/* WooCommerce mete el precio en <span class="woocommerce-Price-amount">, que en
   algunas plantillas de Kadence hereda tamaños grandes. Se ancla aquí. */
.mrx-extra__price .woocommerce-Price-amount {
	font-size: inherit;
	font-weight: inherit;
	color: inherit;
}

/* El snippet 8 pega su coletilla de IVA a todo precio pintado con wc_price().
   Dentro de la tarjeta sobra: el precio del extra ya se explica solo. */
.mrx-extra .gastosenvio {
	display: none;
}

@media (max-width: 420px) {
	.mrx-extra {
		padding: 13px 13px;
	}

	/* ⚠️ El precio NO baja a su propia línea en móvil.
	   Lo hacía, alineado a la izquierda, y ahí es exactamente donde flota el
	   botón de WhatsApp de Joinchat: a 390 px tapaba el «+49,00 €», que es el
	   dato que el cliente está comparando. Medido en el clon.
	   Se queda anclado a la derecha y quien parte en dos líneas es la etiqueta,
	   que es texto y se lee igual de bien partida. */
	.mrx-extra__label {
		font-size: 13.5px;
	}

	/* A 390 px un precio de 30 px se come casi la mitad del ancho, así que la
	   etiqueta parte en dos líneas. Es texto y se lee igual; el precio no puede
	   encogerse sin dejar de ser lo primero que se ve. */
	.mrx-extra__price {
		font-size: 27px;
	}
}