/*
 * NA Core - controles de cantidad (- / +) y boton de quitar del carrito y del mini carrito.
 *
 * Todo se ancla a clases PROPIAS (.na-qty*, .na-qty-remove) que pone nuestro JS. Lo unico
 * que se toca de fuera es el `input[type=number]` que ya estaba en el DOM, para quitarle
 * las flechitas nativas del navegador: ese es justo el componente que el usuario pidio
 * sustituir.
 *
 * Sin rutas relativas ni webfonts: el minify de WP-Optimize concatena las hojas en OTRO
 * directorio y cualquier url() relativa dejaria de resolver. Los iconos son SVG en linea
 * inyectados por el JS.
 */

.na-qty {
	display: inline-flex;
	align-items: stretch;
	gap: 0;
	border: 1px solid rgba(0, 0, 0, 0.14);
	border-radius: 999px;
	background: #fff;
	overflow: hidden;
	max-width: 100%;
	vertical-align: middle;
	line-height: 1;
}

/*
 * ESPECIFICIDAD Y !important A PROPOSITO.
 *
 * El kit de Elementor y el tema estilan `button` globalmente (pastilla azul marino, radio
 * grande, padding propio, box-shadow). En la primera pasada los controles salieron como dos
 * pastillas azul marino SIN icono visible: el SVG va con `stroke: currentColor` y `color`
 * tambien lo pisaba el tema, asi que quedaba azul marino sobre azul marino. Se veia
 * perfectamente en la captura y no en las medidas (por eso hay que mirar la captura).
 *
 * El selector va con el padre (`.na-qty > button.na-qty__btn`) y las propiedades que el kit
 * pisa llevan `!important`: es la unica forma de ganarle a un `.elementor-kit-369 button`
 * sin tocar el tema padre, que es intocable.
 */
.na-qty > button.na-qty__btn {
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: 40px !important;
	min-width: 40px !important;
	max-width: 40px !important;
	height: 40px !important;
	min-height: 40px !important;
	padding: 0 !important;
	margin: 0 !important;
	border: 0 !important;
	border-radius: 0 !important;
	background: #f4f6f4 !important;
	background-image: none !important;
	box-shadow: none !important;
	color: #14304b !important;      /* azul marino de marca: el icono es currentColor */
	fill: none !important;
	cursor: pointer;
	line-height: 1 !important;
	font-size: 0 !important;        /* por si el tema mete texto/letter-spacing */
	text-shadow: none !important;
	-webkit-appearance: none;
	appearance: none;
	transition: background-color 0.15s ease, color 0.15s ease;
}

.na-qty > button.na-qty__btn i.na-qty__ico {
	/*
	 * Iconos de la fuente `theme-icons`. El propio boton lleva `font-size: 0 !important`
	 * (defensa contra el texto del tema), asi que aqui hay que re-declararlo con
	 * !important o el glifo saldria de tamano cero.
	 */
	position: static !important;
	display: block !important;
	font-size: 18px !important;
	line-height: 1 !important;
	font-style: normal !important;
	color: currentColor !important;
	opacity: 1 !important;
	visibility: visible !important;
}

.na-qty > button.na-qty__btn svg {
	/*
	 * En el MINI carrito el tema pone `position:absolute` y `fill` a los svg de sus
	 * botones: los iconos - y + existian (16x16, color correcto) pero quedaban fuera de la
	 * caja, que tiene overflow:hidden. Medido en el DOM: `pos:"absolute"`, `fill:"rgb(20,
	 * 48, 75)"`. De ahi el !important tambien aqui.
	 */
	position: static !important;
	display: block !important;
	width: 18px !important;
	height: 18px !important;
	stroke: currentColor !important;
	stroke-width: 2.4;
	fill: none !important;
	opacity: 1 !important;
	visibility: visible !important;
}

/*
 * Y el remate: en el mini carrito hay una regla que pone `stroke-width: 0` a los PATH de
 * los svg. El icono estaba ahi, del tamano correcto y del color correcto, con
 * `stroke-width: 0px` medido en el DOM: es decir, se dibujaba una linea de grosor cero.
 * `stroke-width` se hereda, pero una regla directa sobre `path` gana a la herencia, asi que
 * hay que declararlo sobre el propio path.
 */
.na-qty > button.na-qty__btn svg path,
.na-qty > button.na-qty__btn svg line,
.na-qty > button.na-qty__btn svg polyline {
	stroke: currentColor !important;
	stroke-width: 2.4 !important;
	fill: none !important;
	opacity: 1 !important;
	visibility: visible !important;
}

.na-qty > button.na-qty__btn:hover:not(:disabled),
.na-qty > button.na-qty__btn:focus-visible:not(:disabled) {
	background: #e3efd7 !important;
	color: #4b7c26 !important;
}

.na-qty > button.na-qty__btn:active:not(:disabled) {
	background: #d5e7c4 !important;
}

.na-qty > button.na-qty__btn:focus-visible {
	outline: 2px solid #7ab648 !important;
	outline-offset: -2px;
}

.na-qty > button.na-qty__btn:disabled {
	opacity: 0.4;
	cursor: not-allowed;
	background: #f4f6f4 !important;
	color: #9aa3a9 !important;
}

/*
 * El input sigue siendo la fuente de verdad (WooCommerce lee su `name` al enviar el
 * formulario), pero se le quitan los spinners nativos, que son el "componente
 * predeterminado de html" que habia que sustituir.
 */
.na-qty__input[type="number"] {
	-moz-appearance: textfield;
	appearance: textfield;
}

.na-qty__input[type="number"]::-webkit-outer-spin-button,
.na-qty__input[type="number"]::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

/*
 * MISMA DEFENSA QUE LOS BOTONES, y por el mismo motivo.
 *
 * Estas reglas iban con `.na-qty .na-qty__input` (0-2-0) y sin `!important`, y el tema
 * las estaba ganando: en el carrito el input salia a 64x46 en vez de 46x40, con el
 * borde `#E6E6E6` del tema. En la FICHA DE PRODUCTO es mucho peor, porque alli el
 * input trae `border: 2px solid #000` y `border-radius: 12px`: dentro de la pildora
 * quedaba un rectangulo negro de esquinas redondeadas.
 *
 * `> input.na-qty__input` sube a 0-2-1 y ademas se marcan las propiedades de
 * geometria, que son justo las que perdian.
 */
.na-qty > input.na-qty__input {
	width: 46px !important;
	min-width: 46px !important;
	max-width: 46px !important;
	height: 40px !important;
	padding: 0 2px !important;
	margin: 0 !important;
	border: 0 !important;
	border-left: 1px solid rgba(0, 0, 0, 0.08) !important;
	border-right: 1px solid rgba(0, 0, 0, 0.08) !important;
	border-radius: 0 !important;
	background: transparent !important;
	box-shadow: none !important;
	text-align: center;
	font-size: 15px;
	font-weight: 600;
	color: #2f3a33;
	line-height: 40px;
}

.na-qty .na-qty__input:focus {
	outline: 2px solid #7ab648;
	outline-offset: -2px;
}

.na-qty--ocupado {
	opacity: 0.55;
	pointer-events: none;
}

/* --------------------------------------------------------------------------
 * Boton de quitar. El enlace de Woo se queda (lleva su nonce y funciona sin JS),
 * pero se le da area tactil y un icono propio.
 * -------------------------------------------------------------------------- */
/*
 * QUITAR. En el mini carrito el enlace venia con `display:none; opacity:0;
 * position:absolute` y su celda `.elementor-menu-cart__product-remove` con `width:0;
 * overflow:hidden`: el widget Menu Cart lo revela al pasar el raton con SU CSS, que en
 * nuestro header (que no es un widget de Elementor) no se encola NUNCA. Resultado: no habia
 * ningun boton de quitar visible en el mini carrito, aunque el clic por JS si funcionaba.
 * Aqui se revela la celda y el enlace.
 */
.elementor-menu-cart__product-remove,
.elementor-menu-cart__product-remove.product-remove {
	width: auto !important;
	overflow: visible !important;
	opacity: 1 !important;
}

/* Misma reparacion sin depender de la clase de Elementor, para cuando el widget cambie.
   Va en una regla APARTE: si el navegador no entiende :has(), un selector invalido en una
   lista tumba la regla ENTERA. */
:where(td, div, span, li):has(> a.na-qty-remove) {
	width: auto !important;
	overflow: visible !important;
}

a.na-qty-remove.na-qty-remove {
	display: inline-flex !important;
	opacity: 1 !important;
	visibility: visible !important;
	position: static !important;
	width: 36px !important;
	height: 36px !important;
	min-width: 36px !important;
	font-size: 0 !important;
	overflow: visible !important;
	align-items: center;
	justify-content: center;
	padding: 0;
	border-radius: 999px;
	background: transparent;
	color: #6b7a70;
	text-decoration: none;
	transition: background-color 0.15s ease, color 0.15s ease;
}

/* Doble clase tambien en hover/foco: si no, la regla base (0,3,1) le gana a un
   `a.na-qty-remove:hover` (0,2,1) y el hover no se veria nunca. */
a.na-qty-remove.na-qty-remove:hover,
a.na-qty-remove.na-qty-remove:focus-visible {
	background: #fdecec !important;
	color: #c0392b !important;
	text-decoration: none;
}

a.na-qty-remove.na-qty-remove:focus-visible {
	outline: 2px solid #c0392b !important;
	outline-offset: 1px;
}

a.na-qty-remove.na-qty-remove svg {
	position: static !important;
	display: block !important;
	width: 18px !important;
	height: 18px !important;
	stroke: currentColor !important;
	fill: none !important;
	opacity: 1 !important;
	visibility: visible !important;
}

a.na-qty-remove.na-qty-remove svg path,
a.na-qty-remove.na-qty-remove svg line,
a.na-qty-remove.na-qty-remove svg polyline {
	stroke: currentColor !important;
	stroke-width: 2 !important;
	fill: none !important;
	opacity: 1 !important;
	visibility: visible !important;
}

a.na-qty-remove--ocupado {
	opacity: 0.45;
	pointer-events: none;
}

/*
 * El segundo enlace de quitar que emite Elementor en cada linea del mini carrito. El JS
 * ya lo saca del arbol accesible; aqui se saca de la vista.
 */
a.na-qty-remove--duplicado,
.elementor-menu-cart__product-remove > a:not(:first-child) {
	display: none !important;
}

.na-qty-linea--yendose {
	opacity: 0.4;
	transition: opacity 0.15s ease;
}

/* --------------------------------------------------------------------------
 * Encaje en cada superficie.
 * -------------------------------------------------------------------------- */

/* Pagina de carrito: la celda de cantidad no debe estrujar el control. */
td.product-quantity .na-qty,
.product-quantity .na-qty {
	margin: 0;
}

/* Mini carrito: el control comparte celda con el precio. */
.elementor-menu-cart__product-price .na-qty,
.widget_shopping_cart_content .na-qty {
	margin: 4px 8px 4px 0;
}

.elementor-menu-cart__product-price .quantity,
.widget_shopping_cart_content .quantity {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 6px;
}

/*
 * FICHA DE PRODUCTO.
 *
 * `div.quantity` de WooCommerce es un bloque de 110px: sin esto la pildora hereda ese
 * ancho de bloque y queda descolgada del boton "Anadir al carrito", que es su vecino
 * en el formulario. `width: auto` la deja medir lo que mide el control.
 */
form.cart div.quantity {
	display: inline-flex;
	align-items: center;
	width: auto;
	margin-right: 10px;
}

/* Sin JS no hay `.na-qty` y el input queda solo: que al menos no se estire. */
form.cart div.quantity > input.qty {
	margin: 0;
}


/* Movil: mismo control, sin desbordar. */
@media (max-width: 480px) {
	.na-qty__btn {
		width: 38px;
		min-width: 38px;
		height: 38px;
	}

	.na-qty .na-qty__input {
		width: 40px;
		min-width: 40px;
		max-width: 40px;
		height: 38px;
		line-height: 38px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.na-qty__btn,
	a.na-qty-remove,
	.na-qty-linea--yendose {
		transition: none;
	}
}