/*
 * Globo del pedido (CR-04, C17). Calcado del artefacto aprobado por Adriano
 * el 21/09/2026. Mismo negro y misma sombra que el aviso breve del sitio
 * (`.ace-toast`), al que reemplaza cuando el boton de pedido esta a la vista.
 */
.ace-cart-bubble {
	--ace-bubble-tail: 12px;
	--ace-bubble-from: 6px;
	align-items: center;
	background: var(--wp--preset--color--contrast, #1c1c1c);
	border-radius: 12px;
	box-shadow: 0 0.375rem 1.125rem rgb(0 0 0 / 25%);
	color: var(--wp--preset--color--contrast-contrast, #fafaf9);
	display: flex;
	font-size: 0.875rem;
	gap: 0.75rem;
	min-block-size: 3rem;
	opacity: 0;
	padding: 0.375rem 0.375rem 0.375rem 0.875rem;
	pointer-events: none;
	position: fixed;
	transform: translateY(var(--ace-bubble-from));
	transition: opacity 150ms ease-out, transform 150ms ease-out, visibility 0s linear 150ms;
	visibility: hidden;
	white-space: nowrap;
	z-index: var(--wp--custom--layer--toast, 400);
}

.ace-cart-bubble.is-below {
	--ace-bubble-from: -6px;
}

.ace-cart-bubble.is-open {
	opacity: 1;
	pointer-events: auto;
	transform: none;
	transition: opacity 200ms cubic-bezier(0.25, 1, 0.5, 1), transform 200ms cubic-bezier(0.25, 1, 0.5, 1), visibility 0s;
	visibility: visible;
}

.ace-cart-bubble.is-nudging {
	animation: ace-cart-bubble-nudge 200ms cubic-bezier(0.25, 1, 0.5, 1);
}

@keyframes ace-cart-bubble-nudge {
	0% { transform: scale(1); }
	40% { transform: scale(1.04); }
	100% { transform: scale(1); }
}

/* La punta: un cuadradito girado, pegado al lado que mira al boton. */
.ace-cart-bubble::after {
	background: inherit;
	border-radius: 2px;
	content: '';
	block-size: var(--ace-bubble-tail);
	inline-size: var(--ace-bubble-tail);
	inset-inline-start: var(--ace-bubble-tail-x, 50%);
	position: absolute;
	transform: translateX(-50%) rotate(45deg);
}

.ace-cart-bubble.is-above::after {
	inset-block-end: calc(var(--ace-bubble-tail) / -2 + 1px);
}

.ace-cart-bubble.is-below::after {
	inset-block-start: calc(var(--ace-bubble-tail) / -2 + 1px);
}

.ace-cart-bubble__msg {
	align-items: center;
	display: flex;
	font-weight: 600;
	gap: 0.5rem;
}

.ace-cart-bubble__icon {
	block-size: 1.25rem;
	color: #57b985;
	flex-shrink: 0;
	inline-size: 1.25rem;
}

.ace-cart-bubble__action {
	align-items: center;
	appearance: none;
	background: rgb(255 255 255 / 14%);
	border: 0;
	border-radius: 8px;
	color: inherit;
	cursor: pointer;
	display: inline-flex;
	font: inherit;
	font-size: 0.8125rem;
	font-weight: 600;
	gap: 0.125rem;
	min-block-size: 2.25rem;
	padding: 0 0.625rem 0 0.75rem;
	position: relative;
}

/* El botoncito se ve de 36 px, pero el area que responde al toque llega a 44. */
.ace-cart-bubble__action::before {
	content: '';
	inset: -4px;
	position: absolute;
}

.ace-cart-bubble__action:hover {
	background: rgb(255 255 255 / 24%);
}

.ace-cart-bubble__action:focus-visible {
	outline: 2px solid #fff;
	outline-offset: 2px;
}

.ace-cart-bubble__action svg {
	block-size: 1rem;
	inline-size: 1rem;
}

/* El numerito del boton de pedido hace un saltito cuando sube. */
.ace-header__badge.is-bump,
.ace-mobile-nav__badge.is-bump {
	animation: ace-cart-badge-bump 260ms cubic-bezier(0.25, 1, 0.5, 1);
}

@keyframes ace-cart-badge-bump {
	0% { transform: scale(1); }
	40% { transform: scale(1.35); }
	100% { transform: scale(1); }
}

@media (prefers-reduced-motion: reduce) {
	.ace-cart-bubble,
	.ace-cart-bubble.is-open {
		transform: none;
		transition: opacity 150ms linear, visibility 0s;
	}

	.ace-cart-bubble.is-nudging,
	.ace-header__badge.is-bump,
	.ace-mobile-nav__badge.is-bump {
		animation: none;
	}
}