/**
 * 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;

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

/**
 * Especificidad: el wrapper siempre tiene .quantity ademas de .dgqb, asi que
 * encadenar las dos gana contra reglas de tema del tipo
 * .woocommerce div.quantity button. Sin esto, los estilos globales de boton de
 * Elementor pisan tamano, color y margenes.
 */
.dgqb .dgqb-btn,
.quantity.dgqb .dgqb-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: var(--dgqb-size);
	height: var(--dgqb-size);
	min-width: var(--dgqb-size);
	min-height: var(--dgqb-size);
	max-width: none;
	padding: 0;
	margin: 0;
	line-height: 1;
	text-transform: none;
	letter-spacing: normal;
	text-decoration: none;
	-webkit-appearance: none;
	appearance: none;
	float: none;
	font-size: calc(var(--dgqb-font-size) + 3px);
	font-weight: 500;
	cursor: pointer;
	user-select: none;
	-webkit-tap-highlight-color: transparent;
	background: var(--dgqb-btn-bg);
	color: var(--dgqb-btn-color);
	border: var(--dgqb-border-width) solid var(--dgqb-btn-border);
	border-radius: var(--dgqb-radius);
	box-shadow: none;
	transition: background-color 0.18s ease, color 0.18s ease, border-color 0.18s ease;
}

.dgqb .dgqb-btn:hover,
.dgqb .dgqb-btn:focus-visible,
.quantity.dgqb .dgqb-btn:hover,
.quantity.dgqb .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 {
	background: var(--dgqb-btn-bg);
	color: var(--dgqb-btn-color);
	border-color: var(--dgqb-btn-border);
}

/**
 * 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.
 */
.dgqb input.qty,
.quantity.dgqb input.qty,
.quantity.dgqb input[type="number"].qty {
	display: block;
	visibility: visible;
	opacity: 1;
	flex: 0 0 var(--dgqb-input-width);
	width: var(--dgqb-input-width);
	min-width: var(--dgqb-input-width);
	max-width: none;
	height: var(--dgqb-size);
	min-height: var(--dgqb-size);
	padding: 0 4px;
	margin: 0;
	float: none;
	text-align: center;
	font-size: var(--dgqb-font-size);
	line-height: 1;
	background: var(--dgqb-input-bg);
	color: var(--dgqb-input-color);
	border: var(--dgqb-border-width) solid var(--dgqb-input-border);
	border-radius: var(--dgqb-radius);
	box-shadow: none;
}

/**
 * Sin separacion el control se comporta como una sola pieza: bordes colapsados
 * y esquinas internas rectas. Con separacion, cada pieza recupera su radio.
 * --dgqb-inner-radius y --dgqb-overlap las calcula el PHP a partir del gap.
 */
.dgqb .dgqb-btn--minus,
.quantity.dgqb .dgqb-btn--minus {
	border-top-right-radius: var(--dgqb-inner-radius, 0px);
	border-bottom-right-radius: var(--dgqb-inner-radius, 0px);
}

.dgqb .dgqb-btn--plus,
.quantity.dgqb .dgqb-btn--plus {
	border-top-left-radius: var(--dgqb-inner-radius, 0px);
	border-bottom-left-radius: var(--dgqb-inner-radius, 0px);
}

.dgqb input.qty,
.quantity.dgqb input.qty {
	border-radius: var(--dgqb-inner-radius, 0px);
	margin-left: var(--dgqb-overlap, -1px);
	margin-right: var(--dgqb-overlap, -1px);
}

.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;
}

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

@media (max-width: 767px) {
	.dgqb {
		--dgqb-size: max(40px, var(--dgqb-size));
	}
}

@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. */
.dgqb-off .quantity {
	display: inline-block;
}

/* ---------------------------------------------------------------------------
 * Blindaje de color
 *
 * Elementor y varios temas apuntan a los hijos de la celda, no al boton:
 *   .elementor-widget-woocommerce-cart .woocommerce table.cart td span
 * Eso es (0,3,3), y una declaracion propia sobre el hijo le gana a cualquier
 * color heredado del padre por mas especifico que sea el padre.
 *
 * La clase repetida sube a (0,4,0). La cantidad de clases se compara antes que
 * la de elementos, asi que 4 clases le gana a 3 clases + 3 elementos.
 * ------------------------------------------------------------------------ */

.quantity.dgqb .dgqb-btn.dgqb-btn,
.quantity.dgqb .dgqb-btn.dgqb-btn * {
	color: var(--dgqb-btn-color);
}

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

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

.quantity.dgqb input.qty.qty {
	color: var(--dgqb-input-color);
	background-color: var(--dgqb-input-bg);
}