/**
 * DG Quantity Buttons for Elementor
 *
 * Todo el estilo cuelga de custom properties. El plugin solo escribe variables;
 * este archivo nunca cambia entre instalaciones, asi que cachea bien.
 */

.dgqb {
	/* Fallbacks: si el CSS inline no llega, el control igual se ve correcto. */
	--dgqb-size: 40px;
	--dgqb-input-width: 56px;
	--dgqb-radius: 6px;
	--dgqb-border-width: 1px;
	--dgqb-gap: 0px;
	--dgqb-font-size: 15px;
	--dgqb-btn-bg: #ffffff;
	--dgqb-btn-color: #1a1a1a;
	--dgqb-btn-border: #d6d6d6;
	--dgqb-btn-bg-hover: #1a1a1a;
	--dgqb-btn-color-hover: #ffffff;
	--dgqb-btn-border-hover: #1a1a1a;
	--dgqb-input-bg: #ffffff;
	--dgqb-input-color: #1a1a1a;
	--dgqb-input-border: #d6d6d6;

	/* Piso tactil. En movil se sube (ver media query al final); en escritorio 0. Es un
	   valor por defecto: cuando el widget de Elementor fija un alto, ese control tambien
	   escribe --dgqb-touch-min: 0px y el valor cargado manda tambien en movil. */
	--dgqb-touch-min: 0px;

	/* Radio de cada esquina del control completo (arriba-izq, arriba-der, abajo-der,
	   abajo-izq). Por defecto las cuatro salen de --dgqb-radius; el widget de Elementor
	   puede fijar cada una por separado. */
	--dgqb-r-tl: var(--dgqb-radius);
	--dgqb-r-tr: var(--dgqb-radius);
	--dgqb-r-br: var(--dgqb-radius);
	--dgqb-r-bl: var(--dgqb-radius);

	/* Alto y ancho efectivos. Se derivan aca, en el mismo elemento, asi respetan los
	   overrides de contexto y de widget sin que ninguna variable se referencie a si
	   misma. El piso (24px / 32px) evita que un 0 o un campo vacio en el panel colapse
	   el control: son los minimos que ya declara el slider. */
	--dgqb-h: max(var(--dgqb-size), var(--dgqb-touch-min), 24px);
	--dgqb-w: max(var(--dgqb-input-width), 32px);

	/* Con separacion 0 el control es una sola pieza (esquinas internas rectas y
	   bordes solapados). Con cualquier separacion > 0 cada pieza recupera el radio de
	   sus esquinas. x1000 lleva cualquier gap > 0 muy por encima del radio y min() lo
	   recorta; con gap 0 da 0. */
	--dgqb-sep: calc(var(--dgqb-gap) * 1000);

	/* Grosor del borde por lado (arriba, derecha, abajo, izquierda). Por defecto los
	   cuatro salen de --dgqb-border-width; el widget de Elementor puede fijar cada uno y
	   un 0 en un lado desactiva el borde de ese lado en las tres piezas. */
	--dgqb-bw-t: var(--dgqb-border-width);
	--dgqb-bw-r: var(--dgqb-border-width);
	--dgqb-bw-b: var(--dgqb-border-width);
	--dgqb-bw-l: var(--dgqb-border-width);

	/* Sin separacion, el campo se monta sobre el borde de sus vecinos para que la
	   division entre piezas quede de un solo grosor. Con separacion, no se monta. */
	--dgqb-overlap-l: min(0px, calc(var(--dgqb-bw-l) * -1 + var(--dgqb-sep)));
	--dgqb-overlap-r: min(0px, calc(var(--dgqb-bw-r) * -1 + var(--dgqb-sep)));

	display: inline-flex;
	align-items: stretch;
	gap: var(--dgqb-gap);
	max-width: 100%;
	width: auto;
	vertical-align: middle;
}

/* El contenedor es una fila flex. Se repite la clase para que ninguna regla de tema o de
   widget del tipo ".x .quantity { display: block }" lo convierta en bloque y apile las piezas. */
.quantity.dgqb.dgqb.dgqb {
	display: inline-flex;
	align-items: stretch;
	gap: var(--dgqb-gap);
	max-width: 100%;
	width: auto;
}

/**
 * Blindaje de especificidad.
 *
 * Estos controles viven dentro de un form.cart, y los controles de estilo del widget
 * de Elementor apuntan a "{{WRAPPER}} .cart button" (boton) y "{{WRAPPER}} .quantity .qty"
 * (campo): (0,4,1) y (0,4,0), (0,5,1) en hover. Eso tambien alcanza a los <button> y al
 * input de este plugin y les pisaba radio, relleno, colores, borde y tipografia, sin
 * importar lo que se cargue en "Botones de cantidad".
 *
 * Los selectores de abajo repiten la clase hasta llegar a (0,6,0) / (0,6,1), que le gana
 * a todo eso sin usar !important. El estilo del boton "Agregar al carrito" y de la
 * tipografia del campo sigue siendo de Elementor: solo se blinda lo que este plugin
 * expone como control. La primera variante (sin repetir) cubre la vista previa del panel.
 */
.dgqb .dgqb-btn,
.quantity.dgqb .dgqb-btn.dgqb-btn.dgqb-btn.dgqb-btn {
	box-sizing: border-box;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: var(--dgqb-h);
	height: var(--dgqb-h);
	min-width: var(--dgqb-h);
	min-height: var(--dgqb-h);
	max-width: none;
	padding: 0;
	margin: 0;
	float: none;
	font-family: inherit;
	font-size: calc(var(--dgqb-font-size) + 3px);
	font-style: normal;
	font-weight: 500;
	line-height: 1;
	letter-spacing: normal;
	word-spacing: normal;
	text-transform: none;
	text-decoration: none;
	text-shadow: none;
	-webkit-appearance: none;
	appearance: none;
	cursor: pointer;
	user-select: none;
	-webkit-tap-highlight-color: transparent;
	background: var(--dgqb-btn-bg);
	color: var(--dgqb-btn-color);
	border-style: solid;
	border-color: var(--dgqb-btn-border);
	border-width: var(--dgqb-bw-t) var(--dgqb-bw-r) var(--dgqb-bw-b) var(--dgqb-bw-l);
	box-shadow: none;
	transition: background-color 0.18s ease, color 0.18s ease, border-color 0.18s ease;
}

/* Radio por pieza: las esquinas externas usan el radio de esa esquina; las internas
   (las que tocan al campo) solo se redondean si hay separacion entre piezas. */
.dgqb .dgqb-btn--minus,
.quantity.dgqb .dgqb-btn.dgqb-btn--minus.dgqb-btn.dgqb-btn--minus {
	border-radius: var(--dgqb-r-tl) min(var(--dgqb-r-tr), var(--dgqb-sep)) min(var(--dgqb-r-br), var(--dgqb-sep)) var(--dgqb-r-bl);
}

.dgqb .dgqb-btn--plus,
.quantity.dgqb .dgqb-btn.dgqb-btn--plus.dgqb-btn.dgqb-btn--plus {
	border-radius: min(var(--dgqb-r-tl), var(--dgqb-sep)) var(--dgqb-r-tr) var(--dgqb-r-br) min(var(--dgqb-r-bl), var(--dgqb-sep));
}

.dgqb .dgqb-btn:hover,
.dgqb .dgqb-btn:focus-visible,
.quantity.dgqb .dgqb-btn.dgqb-btn.dgqb-btn.dgqb-btn:hover,
.quantity.dgqb .dgqb-btn.dgqb-btn.dgqb-btn.dgqb-btn:focus-visible {
	background: var(--dgqb-btn-bg-hover);
	color: var(--dgqb-btn-color-hover);
	border-color: var(--dgqb-btn-border-hover);
}

.dgqb .dgqb-btn:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 2px;
}

.dgqb .dgqb-btn:disabled {
	opacity: 0.4;
	cursor: not-allowed;
}

.dgqb .dgqb-btn:disabled:hover,
.quantity.dgqb .dgqb-btn.dgqb-btn.dgqb-btn.dgqb-btn:disabled:hover {
	background: var(--dgqb-btn-bg);
	color: var(--dgqb-btn-color);
	border-color: var(--dgqb-btn-border);
}

/**
 * Campo. flex-shrink en cero y min-width igual al ancho: dentro de una card angosta el
 * flex colapsaba el campo a cero y quedaban los dos botones solos.
 * display/visibility explicitos: varios temas ocultan el campo de cantidad en el
 * listado de productos.
 * Forma, tamano, borde y colores: blindados (ver arriba). Relleno y tipografia quedan
 * con especificidad normal para que puedan ajustarse desde "Cantidad" en Elementor.
 */
.dgqb input.qty,
.quantity.dgqb input.qty.qty.qty.qty {
	display: block;
	visibility: visible;
	opacity: 1;
	box-sizing: border-box;
	flex: 0 0 var(--dgqb-w);
	width: var(--dgqb-w);
	min-width: var(--dgqb-w);
	height: var(--dgqb-h);
	min-height: var(--dgqb-h);
	margin: 0 var(--dgqb-overlap-r) 0 var(--dgqb-overlap-l);
	background: var(--dgqb-input-bg);
	color: var(--dgqb-input-color);
	border-style: solid;
	border-color: var(--dgqb-input-border);
	border-width: var(--dgqb-bw-t) var(--dgqb-bw-r) var(--dgqb-bw-b) var(--dgqb-bw-l);
	border-radius: min(var(--dgqb-r-tl), var(--dgqb-sep)) min(var(--dgqb-r-tr), var(--dgqb-sep)) min(var(--dgqb-r-br), var(--dgqb-sep)) min(var(--dgqb-r-bl), var(--dgqb-sep));
	box-shadow: none;
}

.dgqb input.qty,
.quantity.dgqb input.qty,
.quantity.dgqb input[type="number"].qty {
	max-width: none;
	padding: 0 4px;
	float: none;
	text-align: center;
	font-size: var(--dgqb-font-size);
	line-height: 1;
}

.dgqb .dgqb-btn:hover,
.dgqb .dgqb-btn:focus-visible {
	position: relative;
	z-index: 1;
}

.dgqb .screen-reader-text,
.dgqb label.screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	white-space: nowrap;
}

.dgqb.dgqb--busy {
	opacity: 0.6;
	pointer-events: none;
}

/* Cards de producto */
.dgqb-loop {
	display: flex;
	align-items: center;
	gap: 8px;
	flex-wrap: wrap;
}

.dgqb-loop .dgqb {
	flex: 0 0 auto;
}

/**
 * Boton "Agregar al carrito" con icono (controles del widget Add To Cart).
 * El texto de "Solo icono" queda accesible pero fuera de la vista.
 */
.dgqb-atc-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5em;
	flex: 0 0 auto;
}

.dgqb-atc-btn--icon {
	gap: 0;
	min-width: var(--dgqb-size, 40px);
	white-space: nowrap;
}

.dgqb-atc-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	line-height: 1;
	font-size: 1.15em;
}

.dgqb-atc-icon svg {
	width: 1em;
	height: 1em;
	fill: currentColor;
}

.dgqb-atc-label--sr {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	border: 0;
	overflow: hidden;
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	white-space: nowrap;
}

/* Carrito clasico: la celda de cantidad suele venir centrada */
.woocommerce-cart-form .dgqb {
	justify-content: center;
}

/* Objetivo tactil minimo en movil. Para bajarlo: .dgqb { --dgqb-touch-min: 0px; }
   en el CSS personalizado del panel. */
@media (max-width: 767px) {
	.dgqb {
		--dgqb-touch-min: 40px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.dgqb .dgqb-btn {
		transition: none;
	}
}

/* ---------------------------------------------------------------------------
 * 1.1 — Contextos remotos
 * ------------------------------------------------------------------------ */

.dgqb-remote {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	flex-wrap: wrap;
}

/* El resumen del checkout es angosto: el control no debe empujar la tabla. */
.dgqb--checkout {
	--dgqb-size: 32px;
	--dgqb-input-width: 44px;
	--dgqb-font-size: 13px;
}

.woocommerce-checkout-review-order-table .dgqb-remote {
	margin-top: 6px;
}

.woocommerce-checkout-review-order-table .product-name {
	line-height: 1.5;
}

/* Mini carrito: mismo criterio, y el precio queda al lado del control. */
.dgqb--mini-cart {
	--dgqb-size: 30px;
	--dgqb-input-width: 40px;
	--dgqb-font-size: 13px;
}

.dgqb-remote--mini {
	margin-top: 6px;
}

.dgqb-mini-price {
	font-size: 0.9em;
	white-space: nowrap;
}

/* El span.quantity del mini carrito comparte clase con el wrapper real de
   WooCommerce. Solo el que tiene botones se comporta como control. */
.widget_shopping_cart_content .quantity:not(.dgqb),
.elementor-menu-cart__product .quantity:not(.dgqb) {
	display: inline;
}

/* Widget apagado desde los controles de Elementor: se ve el campo nativo.
   Solo los que NO se mejoraron: un Add To Cart encendido dentro de un Loop Grid apagado
   si tiene los botones (gana el interruptor mas cercano) y necesita su display flex. */
.dgqb-off .quantity:not(.dgqb) {
	display: inline-block;
}