/**
 * Botones de pedido por WhatsApp.
 *
 * Solo se anima transform y opacity para que el navegador resuelva todo en el
 * compositor y no dispare reflows en paginas de carrito con muchas filas.
 */

:root {
	--lunatech-wa-green: #1faa59;
	--lunatech-wa-green-strong: #15803d;
	--lunatech-wa-green-deep: #0f5132;
	--lunatech-wa-ink: #ffffff;
	--lunatech-wa-ring: rgba(31, 170, 89, 0.35);

	--lunatech-wa-radius: 10px;
	--lunatech-wa-gap: 0.6em;
	--lunatech-wa-duration: 180ms;
	--lunatech-wa-ease: cubic-bezier(0.16, 1, 0.3, 1);

	--lunatech-wa-float-size: 56px;
	--lunatech-wa-float-offset: 24px;
}

/* --------------------------------------------------------------------------
   Boton en linea (carrito, mini-carrito, ficha de producto)
   -------------------------------------------------------------------------- */

.lunatech-wa-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--lunatech-wa-gap);
	box-sizing: border-box;
	padding: 0.85em 1.4em;
	border: 0;
	border-radius: var(--lunatech-wa-radius);
	background-color: var(--lunatech-wa-green);
	color: var(--lunatech-wa-ink);
	font-weight: 600;
	line-height: 1.2;
	text-align: center;
	text-decoration: none;
	cursor: pointer;
	transition:
		background-color var(--lunatech-wa-duration) var(--lunatech-wa-ease),
		transform var(--lunatech-wa-duration) var(--lunatech-wa-ease),
		box-shadow var(--lunatech-wa-duration) var(--lunatech-wa-ease);
}

.lunatech-wa-button:hover,
.lunatech-wa-button:focus {
	background-color: var(--lunatech-wa-green-strong);
	color: var(--lunatech-wa-ink);
	text-decoration: none;
	transform: translateY(-1px);
	box-shadow: 0 6px 18px -8px var(--lunatech-wa-green-deep);
}

.lunatech-wa-button:focus-visible {
	outline: 3px solid var(--lunatech-wa-ring);
	outline-offset: 2px;
}

.lunatech-wa-button:active {
	background-color: var(--lunatech-wa-green-deep);
	transform: translateY(0);
	box-shadow: none;
}

.lunatech-wa-icon {
	flex: 0 0 auto;
	width: 1.25em;
	height: 1.25em;
}

/* El carrito y el mini-carrito necesitan ancho completo para no quedar
   flotando sueltos al lado de los botones del tema. */
.lunatech-wa-button--cart,
.lunatech-wa-button--mini {
	display: flex;
	width: 100%;
	margin-top: 10px;
}

/* En la ficha de producto convive con "Añadir al carrito" de Woodmart. */
.lunatech-wa-button--product {
	margin-top: 12px;
}

.woocommerce div.product form.cart .lunatech-wa-button--product {
	flex-basis: 100%;
}

/* --------------------------------------------------------------------------
   Burbuja flotante
   -------------------------------------------------------------------------- */

.lunatech-wa-float {
	position: fixed;
	right: var(--lunatech-wa-float-offset);
	bottom: var(--lunatech-wa-float-offset);
	z-index: 380;
	display: flex;
	align-items: center;
	justify-content: center;
	width: var(--lunatech-wa-float-size);
	height: var(--lunatech-wa-float-size);
	border-radius: 50%;
	background-color: var(--lunatech-wa-green);
	color: var(--lunatech-wa-ink);
	box-shadow: 0 8px 24px -6px rgba(15, 81, 50, 0.45);
	transition:
		background-color var(--lunatech-wa-duration) var(--lunatech-wa-ease),
		transform var(--lunatech-wa-duration) var(--lunatech-wa-ease);
}

.lunatech-wa-float:hover,
.lunatech-wa-float:focus {
	background-color: var(--lunatech-wa-green-strong);
	color: var(--lunatech-wa-ink);
	transform: scale(1.06);
}

.lunatech-wa-float:focus-visible {
	outline: 3px solid var(--lunatech-wa-ring);
	outline-offset: 3px;
}

.lunatech-wa-float:active {
	transform: scale(0.97);
}

.lunatech-wa-float .lunatech-wa-icon {
	width: 28px;
	height: 28px;
}

/* Woodmart planta una barra de navegacion fija abajo en movil: subimos la
   burbuja para no taparla. */
@media (max-width: 768px) {
	.lunatech-wa-float {
		--lunatech-wa-float-size: 50px;
		--lunatech-wa-float-offset: 16px;

		bottom: calc(var(--lunatech-wa-float-offset) + 56px);
	}
}

@media (prefers-reduced-motion: reduce) {
	.lunatech-wa-button,
	.lunatech-wa-float {
		transition: background-color var(--lunatech-wa-duration) linear;
	}

	.lunatech-wa-button:hover,
	.lunatech-wa-button:focus,
	.lunatech-wa-float:hover,
	.lunatech-wa-float:focus,
	.lunatech-wa-float:active,
	.lunatech-wa-button:active {
		transform: none;
	}
}