/*
 * Ficha de producto — toggle "para mí / regalo", campos de destinatario,
 * idioma del vale y precio libre (Frontend\ProductFormRenderer, docs/11).
 * Mismos tokens var(--mt-*, fallback) que checkout-voucher.css/order-downloads.css
 * (docs/12-estilo-visual.md sec. 1/2/6) — el bloque no debe desentonar con el
 * resto del formulario `.cart` que sí pinta el tema. Reproduce fielmente el
 * diseño de fuentes/tema-actual/woo-vou-recipient-fields.php (plugin PDF
 * Vouchers) para que la migración no cambie el aspecto de cara al cliente.
 */

.vra-product-form {
	/* El <form class="cart"> del tema es display:flex (pensado para el input de
	   cantidad + botón en fila de los productos simples) — como hijo flex
	   de este contenedor, sin width explícito este bloque se hacía ~21px
	   más ancho que el resto de la página y se salía del margen derecho (QA
	   2026-07-17, medido y verificado en vivo con DevTools antes de
	   publicar: 24px/3px → 24px/24px). */
	width: 100%;
	margin: var(--mt-space-5, 1.25rem) 0;
	font-family: var(--mt-font-body, 'Montserrat', sans-serif);
	color: var(--mt-color-text-body, #333);
}

/* --------------------------------------------------------------------------
   TARJETA — envuelve info de modos, toggle y campos del destinatario
   -------------------------------------------------------------------------- */

.vra-fields-card {
	margin-top: var(--mt-space-6, 1.5rem);
	padding: var(--mt-space-6, 1.5rem);
	background-color: var(--mt-color-bg-subtle, #FAFAFA);
	border: 1px solid var(--mt-color-border, #E0E0E0);
	border-radius: var(--mt-radius-lg, 16px);
}

/* --------------------------------------------------------------------------
   INFO — diferencia entre regalar y comprar para uno mismo
   -------------------------------------------------------------------------- */

.vra-mode-info {
	display: flex;
	flex-direction: column;
	gap: var(--mt-space-3, 0.75rem);
	margin-bottom: var(--mt-space-5, 1.25rem);
	padding: var(--mt-space-4, 1rem);
	/* El tinte y el borde salen de tokens del tema, no de un color-mix propio.

	   Un color-mix sobre --mt-color-primary se ve bien en modo normal pero no
	   se entera del alto contraste: allí el tema pasa los fondos de marca a
	   blanco puro a propósito —«un tint suau és justament el que no distingeix qui
	   té baixa visió», variables.css— y este bloque se quedaba tintado igual,
	   porque el 6 % de un azul oscuro sobre blanco vuelve a ser un tinte claro. Con
	   --mt-color-primary-light el tema ya lo lleva a #FFFFFF, y
	   --mt-color-border a #000000: el bloque queda plano con el borde marcado, que
	   es lo que quiere el alto contraste. */
	background: var(--mt-color-primary-light, #E8F8FA);
	border: 1px solid var(--mt-color-border, #E0E0E0);
	border-radius: var(--mt-radius-md, 8px);
}

.vra-mode-info__item {
	display: flex;
	align-items: flex-start;
	gap: var(--mt-space-3, 0.75rem);
}

.vra-mode-info__icon {
	flex-shrink: 0;
	display: flex;
	/* primary-dark, no primary. El azul de marca (#14B5C5) es el tono claro de la
	   paleta: sobre este fondo da 2,18:1, y el criterio 1.4.11 de la WCAG
	   pide 3:1 para un icono. El tema ya tiene documentado que primary-dark es
	   el tono para texto y grafismos sobre blanco (variables.css). */
	color: var(--mt-color-primary-dark, #0A7A87);
	margin-top: 2px;
}

.vra-mode-info__text {
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.vra-mode-info__text strong {
	font-size: var(--mt-font-size-sm, 0.875rem);
	font-weight: var(--mt-font-weight-semibold, 600);
	color: var(--mt-color-text-primary, #14252b);
	line-height: 1.3;
}

.vra-mode-info__text span {
	font-size: var(--mt-font-size-xs, 0.75rem);
	color: var(--mt-color-text-secondary, #757575);
	line-height: 1.5;
}

/* --------------------------------------------------------------------------
   TOGGLE — control segmentado "Comprar para mí / Regalar a alguien"
   -------------------------------------------------------------------------- */

.vra-item__mode {
	display: flex;
	gap: 3px;
	padding: 3px;
	margin-bottom: var(--mt-space-5, 1.25rem);
	border: 1px solid var(--mt-color-border, #E0E0E0);
	border-radius: var(--mt-radius-md, 8px);
	background: var(--mt-color-bg-white, #fff);
	width: 100%;
}

.vra-mode-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	/* Móvil-first: "Regalar a algú" + icono no cabían con el padding/
	   font-size de desktop dentro del ancho real del toggle en móvil (QA
	   2026-07-17, verificado en vivo que el texto quedaba cortado contra el
	   borde del pill) — reducidos aquí y restaurados a partir de 768px, mismo
	   patrón que el resto de botones responsivos del tema. */
	gap: 4px;
	flex: 1;
	padding: var(--mt-space-2, 8px) 6px;
	font-family: var(--mt-font-body, 'Montserrat', sans-serif);
	font-size: 13px;
	font-weight: var(--mt-font-weight-medium, 500);
	color: var(--mt-color-text-secondary, #757575);
	background: transparent;
	border: none;
	border-radius: var(--mt-radius-sm, 4px);
	cursor: pointer;
	transition: background 0.18s ease, color 0.18s ease;
	white-space: nowrap;
	line-height: 1;
}

@media (min-width: 768px) {
	.vra-mode-btn {
		gap: 6px;
		padding: var(--mt-space-2, 8px) var(--mt-space-4, 16px);
		font-size: var(--mt-font-size-sm, 0.875rem);
	}
}

/* El pill activo del selector "Comprar per a mi / Regalar a algú".

   Iba con --mt-color-primary y texto blanco encima: 2,49:1, cuando la AA pide
   4,5:1 para texto. Es el tono claro de la paleta y no es el que el tema usa
   para un botón lleno; variables.css lo dice explícitamente: «primary-dark ... fons
   de botó en repòs amb text blanc», 5,06:1. Este mismo error, con este
   mismo 2,49:1, ya se había corregido otra vez en la hoja del tema. */
.vra-mode-btn.is-active {
	background: var(--mt-color-primary-dark, #0A7A87);
	color: var(--mt-color-white, #fff);
}

.vra-mode-btn:not(.is-active):hover {
	background: var(--mt-color-bg-subtle, #FAFAFA);
	color: var(--mt-color-text-primary, #14252b);
}

/* --------------------------------------------------------------------------
   AVISO "comprar para mí"
   -------------------------------------------------------------------------- */

.vra-item__self-notice {
	display: flex;
	align-items: flex-start;
	gap: var(--mt-space-3, 0.75rem);
	margin: 0;
	padding: var(--mt-space-4, 1rem) var(--mt-space-5, 1.25rem);
	/* Mismo motivo que en .vra-mode-info: tokens del tema en lugar de un color-mix
	   propio, para que el alto contraste pueda aplanarlos. */
	background: var(--mt-color-primary-light, #E8F8FA);
	border: 1px solid var(--mt-color-border, #E0E0E0);
	border-radius: var(--mt-radius-md, 8px);
	color: var(--mt-color-text-body, #333);
}

.vra-item__self-notice svg {
	flex-shrink: 0;
	/* primary-dark, como en .vra-mode-info__icon: con primary quedaba a 2,08:1. */
	color: var(--mt-color-primary-dark, #0A7A87);
	margin-top: 2px;
}

.vra-item__self-notice p {
	margin: 0;
	font-size: var(--mt-font-size-sm, 0.875rem);
	line-height: 1.5;
}

/* El campo de idioma es hermano tanto de `.vra-item__gift` (margen inferior 12px)
   como de `.vra-item__self` (sin margen propio) — sin margen superior propio,
   el espacio por encima dependía de cuál de los dos estaba visible y quedaba
   inconsistente entre modos (0px vs 12px). Margen fijo para que siempre sea el
   mismo. Igual a --mt-space-4 (no space-5): es el mismo `gap` que usa
   `.vra-item__gift-grid` entre nombre/email/mensaje/fecha, para que
   el espacio entre "mensaje" e "idioma del vale" no quede mayor que entre
   el resto de campos (QA 2026-07-17). */
.vra-fields-card > .vra-field[data-field="vra_language"] {
	margin-top: var(--mt-space-4, 1rem);
	/* Es siempre el último campo de la tarjeta — sin esto su propio
	   margin-bottom (herencia de .vra-field, 12px) se sumaba al
	   padding-bottom de .vra-fields-card (24px), dejando más espacio abajo
	   (~37px) que arriba (24px) en ambos modos. Verificado en vivo con
	   DevTools antes de publicar (QA 2026-07-17): 24.8px / 24.8px. */
	margin-bottom: 0;
}

/* El select de idioma no tiene nunca validación JS propia (siempre lleva un valor
   por defecto válido, ningún camino del código rellena su error) — igual que el
   mensaje, su .vra-field__error vacío (min-height:1em, ~14px) inflaba
   el espacio hasta el borde inferior de la tarjeta por encima del padding
   (38.8px en lugar de los 24.8px de arriba). Verificado en vivo con DevTools
   antes de publicar (QA 2026-07-17): vuelve a 24.8px en ambos modos. */
.vra-fields-card > .vra-field[data-field="vra_language"] .vra-field__error {
	min-height: 0;
}

/* --------------------------------------------------------------------------
   SECCIÓN REGALO — título, intro y grid de campos del destinatario
   -------------------------------------------------------------------------- */

.vra-item__gift {
	margin-bottom: var(--mt-space-3, 0.75rem);
}

.vra-item__gift-title {
	font-family: var(--mt-font-heading, 'Bebas Neue', sans-serif);
	font-weight: var(--mt-font-weight-regular, 400);
	font-size: var(--mt-font-size-lg, 1.25rem);
	letter-spacing: var(--mt-letter-spacing-wide, 0.03em);
	color: var(--mt-color-text-primary, #14252b);
	margin: 0 0 var(--mt-space-2, 0.5rem);
}

.vra-item__gift-intro {
	font-size: var(--mt-font-size-sm, 0.875rem);
	color: var(--mt-color-text-secondary, #757575);
	margin: 0 0 var(--mt-space-5, 1.25rem);
	line-height: 1.5;
}

.vra-item__gift-grid {
	display: flex;
	flex-direction: column;
	gap: var(--mt-space-4, 1rem);
}

/* El correo y la fecha se ocultan con `hidden` cuando el regalo «m'arriba a mi i
   el dono jo»; que ninguna regla del tema con `display` los vuelva a mostrar. */
.vra-item__gift-grid .vra-field[hidden] {
	display: none;
}

/* --------------------------------------------------------------------------
   «COM LI VOLS FER ARRIBAR?» — per correu / m'arriba a mi i el dono jo
   -------------------------------------------------------------------------- */

.vra-delivery {
	display: flex;
	flex-direction: column;
	gap: var(--mt-space-2, 0.5rem);
	margin: 0 0 var(--mt-space-5, 1.25rem);
	padding: 0;
	border: 0;
	min-width: 0;
}

.vra-delivery__legend {
	padding: 0;
	margin: 0 0 var(--mt-space-2, 0.5rem);
	font-size: var(--mt-font-size-sm, 0.875rem);
	font-weight: var(--mt-font-weight-semibold, 600);
	color: var(--mt-color-text-primary, #14252b);
}

.vra-delivery__option {
	display: flex;
	align-items: flex-start;
	gap: var(--mt-space-3, 0.75rem);
	padding: var(--mt-space-3, 0.75rem) var(--mt-space-4, 1rem);
	border: 1px solid var(--mt-color-border, #E0E0E0);
	border-radius: var(--mt-radius-md, 8px);
	background: var(--mt-color-bg-white, #fff);
	cursor: pointer;
	transition: border-color 0.18s ease, background 0.18s ease;
}

.vra-delivery__option:hover {
	background: var(--mt-color-bg-subtle, #FAFAFA);
}

/* Mismo tono que el pill activo del selector de modo (5,06:1, véase más arriba). */
.vra-delivery__option:has(.vra-delivery__input:checked) {
	border-color: var(--mt-color-primary-dark, #0A7A87);
	box-shadow: inset 0 0 0 1px var(--mt-color-primary-dark, #0A7A87);
}

.vra-delivery__input {
	flex: 0 0 auto;
	width: 18px;
	height: 18px;
	margin: 2px 0 0;
	accent-color: var(--mt-color-primary-dark, #0A7A87);
}

.vra-delivery__input:focus-visible {
	outline: 2px solid var(--mt-color-primary-dark, #0A7A87);
	outline-offset: 2px;
}

.vra-delivery__text {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}

.vra-delivery__text strong {
	font-size: var(--mt-font-size-sm, 0.875rem);
	font-weight: var(--mt-font-weight-semibold, 600);
	color: var(--mt-color-text-primary, #14252b);
}

.vra-delivery__text span {
	font-size: var(--mt-font-size-xs, 0.8125rem);
	line-height: 1.45;
	color: var(--mt-color-text-secondary, #757575);
}

/* --------------------------------------------------------------------------
   CAMPOS
   -------------------------------------------------------------------------- */

.vra-field {
	margin-bottom: var(--mt-space-3, 0.75rem);
}

.vra-item__gift-grid .vra-field {
	margin-bottom: 0;
}

.vra-field__label {
	display: block;
	font-size: var(--mt-font-size-sm, 0.875rem);
	font-weight: var(--mt-font-weight-semibold, 600);
	color: var(--mt-color-text-primary, #14252b);
	margin-bottom: var(--mt-space-1, 0.25rem);
}

.vra-field__optional {
	font-weight: var(--mt-font-weight-regular, 400);
	color: var(--mt-color-text-secondary, #757575);
	font-size: var(--mt-font-size-xs, 0.75rem);
}

.vra-field__input {
	width: 100%;
	max-width: 400px;
	padding: var(--mt-space-3, 0.75rem) var(--mt-space-4, 1rem);
	font-family: var(--mt-font-body, 'Montserrat', sans-serif);
	/* 16px en móvil, 14px a partir de 768px — el mismo patrón que usa el tema para
	   los campos del checkout, y por el mismo motivo: por debajo de 16px, Safari en iOS
	   HACE ZOOM en el campo al enfocarlo y deja la página descentrada hasta que el
	   visitante vuelve a pellizcar. Estos campos están en la página de producto, donde
	   alguien en un móvil escribe el nombre y el email de un destinatario, así que es
	   exactamente el sitio donde no hay que hacer eso. La media query está debajo de la regla. */
	font-size: var(--mt-font-size-base, 1rem);
	color: var(--mt-color-text-body, #333);
	background-color: var(--mt-color-bg-white, #fff);
	border: 1px solid var(--mt-color-border, #E0E0E0);
	border-radius: var(--mt-radius-md, 8px);
	transition: border-color 0.2s ease, box-shadow 0.2s ease;
	appearance: none;
}

@media (min-width: 768px) {
	.vra-field__input {
		font-size: var(--mt-font-size-sm, 0.875rem);
	}
}

.vra-fields-card .vra-field__input {
	max-width: none;
}

select.vra-field__input {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23757575' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right var(--mt-space-4, 1rem) center;
	padding-right: var(--mt-space-10, 2.5rem);
	cursor: pointer;
}

textarea.vra-field__input {
	resize: vertical;
	min-height: 90px;
}

/* Aquí se quita el outline del navegador, así que lo que marca el foco es
   este borde — y tiene que cumplir por sí solo el 3:1 del criterio 1.4.11. Con
   --mt-color-primary se quedaba a 2,49:1 contra el blanco, y el halo de 3 px no
   ayudaba: --mt-color-primary-light vale #E8F8FA, 1,09:1, o sea casi nada.
   Con primary-dark el borde va a 5,06:1 y el halo se queda como lo que es, un
   acompañamiento. En alto contraste manda la regla global del tema, que pone
   un outline negro de 3 px con !important. */
.vra-field__input:focus {
	outline: none;
	border-color: var(--mt-color-primary-dark, #0A7A87);
	box-shadow: 0 0 0 3px var(--mt-color-primary-light, rgba(20, 181, 197, 0.15));
}

.vra-field__input:focus-visible {
	outline: none;
}

.vra-field.has-error .vra-field__input {
	border-color: var(--mt-color-error, #EF4444);
}

/* El mensaje de error del campo, con el mismo aspecto que tiene en todo el
   sitio: el icono de círculo con exclamación delante del texto.

   El icono viene de `--mt-icon-error`, que el tema declara en
   variables.css — el mismo sitio del que este archivo ya toma sus colores y
   espaciados. El SVG en línea es solo un respaldo para un tema que no lo
   declare; la copia del tema es la fuente, esta es la de repuesto.

   Antes fallaban tres cosas. No había icono, mientras que el tema ponía uno en
   los campos del checkout y en los errores de MONEI, así que el mismo tipo de aviso
   se veía distinto según el formulario en el que estuvieras. El tamaño era `sm`
   donde el resto del sitio usa `xs`. Y el color de reserva era #EF4444
   frente al #DC2626 del tema — invisible mientras la variable se resuelve, que es
   siempre, y erróneo la única vez que no lo hace. */
.vra-field__error {
	display: flex;
	align-items: flex-start;
	gap: 4px;
	color: var(--mt-color-error, #DC2626);
	font-size: var(--mt-font-size-xs, 0.75rem);
	font-weight: var(--mt-font-weight-medium, 500);
	line-height: 1.4;
	min-height: 1em;
}

.vra-field__error::before {
	content: '';
	flex-shrink: 0;
	display: inline-block;
	width: 12px;
	height: 12px;
	/* 0.2em y no 1px: la línea del mensaje mide 1,4em y el icono 12px, así que para
	   centrarlo hacen falta (16,8 - 12) / 2 = 2,4px a 12px de letra. Con 1px fijo
	   quedaba alto, y además no seguía el tamaño del texto si algún día cambia. */
	margin-top: 0.2em;
	/* `currentColor`, no un rojo fijo: el icono sigue el color del TEXTO del
	   mensaje. Un tema puede recolorear ese texto donde el fondo lo pida
	   —la franja de newsletter del pie lo pasa a blanco sobre azul—
	   y un icono clavado en rojo seguiría rojo junto a un texto blanco. Por defecto
	   el texto ya es `--mt-color-error`, así que en el resto no cambia nada. */
	background-color: currentColor;
	mask-image: var(--mt-icon-error, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cline x1='12' y1='8' x2='12' y2='12'/%3E%3Cline x1='12' y1='16' x2='12.01' y2='16'/%3E%3C/svg%3E"));
	mask-size: contain;
	mask-repeat: no-repeat;
	-webkit-mask-image: var(--mt-icon-error, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cline x1='12' y1='8' x2='12' y2='12'/%3E%3Cline x1='12' y1='16' x2='12.01' y2='16'/%3E%3C/svg%3E"));
	-webkit-mask-size: contain;
	-webkit-mask-repeat: no-repeat;
}

/* Sin mensaje, sin icono — pero el hueco sigue reservado, para que el formulario no salte
   cuando aparezca el primer error. Ese espacio reservado es la razón de que `min-height` esté
   ahí y de que el elemento no se oculte del todo. */
.vra-field__error:empty::before {
	content: none;
}

/* El campo de mensaje (textarea) recibe un .mt-char-counter (assets/js/main.js del
   tema) — sumado al espacio reservado de .vra-field__error de arriba, la separación
   hasta el campo siguiente quedaba mucho mayor que entre el resto de campos (QA
   2026-07-17, medido desde el borde del input, no del wrapper). El campo de
   mensaje es opcional y sin validación de formato, así que su error nunca
   llega a mostrarse — no hace falta reservarle el espacio. */
.vra-field:has(.mt-char-counter) .vra-field__error {
	min-height: 0;
}

/* Con el error ya sin espacio reservado, todavía sobran ~10px respecto al
   resto de campos: la altura propia del .mt-char-counter (línea + su
   margin-top). Margen negativo calculado para compensarlo exactamente (medido
   en vivo con DevTools, QA 2026-07-17): input→label del campo de mensaje
   pasa de 39,8px a 30px, igual que entre el resto de campos del grid. */
.vra-field:has(.mt-char-counter) {
	margin-bottom: -10px;
}

/* --------------------------------------------------------------------------
   PRECIO LIBRE (Pay-Your-Price)
   -------------------------------------------------------------------------- */

.vra-pyp__input[type="range"] {
	width: 100%;
	padding: 0;
	/* Mismo tono que el resto de controles llenos del formulario: con primary el
	   recorrido del control se quedaba a 2,49:1 contra el fondo, por debajo del
	   3:1 que el criterio 1.4.11 pide a un componente de interfaz. */
	accent-color: var(--mt-color-primary-dark, #0A7A87);
}

.vra-pyp__input[type="number"] {
	font-size: var(--mt-font-size-base, 1rem);
	font-weight: var(--mt-font-weight-medium, 500);
	color: var(--mt-color-text-primary, #14252b);
}

.vra-currency-input-wrap {
	position: relative;
	display: block;
}

.vra-currency-input-wrap .vra-field__input {
	max-width: none;
	padding-right: 2rem;
}

.vra-currency-input-wrap::after {
	content: attr(data-currency-suffix);
	position: absolute;
	right: var(--mt-space-3, 0.75rem);
	top: 50%;
	transform: translateY(-50%);
	color: var(--mt-color-text-secondary, #757575);
	font-family: var(--mt-font-body, 'Montserrat', sans-serif);
	font-size: var(--mt-font-size-base, 1rem);
	font-weight: var(--mt-font-weight-medium, 500);
	pointer-events: none;
	line-height: 1;
}

.vra-pyp__value {
	display: inline-block;
	margin-left: var(--mt-space-2, 0.5rem);
	font-weight: var(--mt-font-weight-semibold, 600);
	color: var(--mt-color-primary-dark, #0A7A87);
}

/* Pista bajo un campo: explica qué pasa si se deja en blanco.
   La de la fecha de entrega dice que, sin fecha, el vale sale enseguida al
   hacer la compra — sin esto, "(opcional)" no decía en ningún sitio qué pasaba. */
.vra-field__hint {
	display: block;
	margin: var(--mt-space-1, 0.25rem) 0 0;
	color: var(--mt-color-text-secondary, #757575);
	font-size: var(--mt-font-size-sm, 0.875rem);
	line-height: 1.35;
}

.vra-pyp__hint {
	margin: var(--mt-space-1, 0.25rem) 0 0;
	color: var(--mt-color-text-secondary, #757575);
	font-size: var(--mt-font-size-sm, 0.875rem);
}

.required {
	color: var(--mt-color-error, #EF4444);
}