/* ==========================================================================
   Velas Velia — Modal "¡Agregado al carrito!" + estado de carga del botón
   --------------------------------------------------------------------------
   Confirmación de marca al agregar por AJAX desde la ficha de producto
   (inc/cart-ajax.php imprime el markup; main.js lo abre/cierra). Dos acciones:
   "Pagar la compra" (primario) y "Seguir viendo productos" (ghost).
   Consume solo tokens del sistema. Respeta prefers-reduced-motion.
   ========================================================================== */

/* --- Capa del modal ------------------------------------------------------- */
.vv-cart-modal {
	position: fixed;
	inset: 0;
	z-index: 100001; /* por encima del header sticky (50) y de photoswipe (100000) */
	display: flex;
	align-items: center;
	justify-content: center;
	padding: var(--space-5);
}

.vv-cart-modal[hidden] {
	display: none;
}

/* Fondo: velo cálido oscurecido con desenfoque sutil. */
.vv-cart-modal__backdrop {
	position: absolute;
	inset: 0;
	background: rgba(59, 52, 43, 0.45); /* ink-900 al 45% */
	-webkit-backdrop-filter: blur(3px);
	backdrop-filter: blur(3px);
}

/* --- Tarjeta -------------------------------------------------------------- */
.vv-cart-modal__card {
	position: relative;
	width: min(420px, 100%);
	/* En viewports bajos (teclado abierto, landscape) la tarjeta no debe cortar
	   los botones: se acota y hace scroll interno. */
	max-height: calc(100vh - 2 * var(--space-5));
	max-height: calc(100dvh - 2 * var(--space-5));
	overflow-y: auto;
	padding: var(--space-10) var(--space-8) var(--space-8);
	border: var(--border-w) solid var(--gold-200);
	border-radius: var(--radius-xl);
	background: var(--cream);
	box-shadow: var(--shadow-lg);
	text-align: center;
	animation: vv-modal-in 0.28s var(--ease-out) both;
}

@keyframes vv-modal-in {
	from {
		opacity: 0;
		transform: translateY(14px) scale(0.97);
	}
	to {
		opacity: 1;
		transform: translateY(0) scale(1);
	}
}

/* Botón cerrar (X) discreto en la esquina. Los !important ganan al estilo de
   botón del tema padre (fondo/borde magenta en button genérico). */
.vv-cart-modal .vv-cart-modal__close {
	position: absolute;
	top: var(--space-3);
	right: var(--space-3);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	padding: 0 !important;
	border: 0 !important;
	border-radius: var(--radius-pill) !important;
	background: transparent !important;
	color: var(--ink-500) !important;
	cursor: pointer;
	transition: background var(--dur) var(--ease-out), color var(--dur) var(--ease-out);
}

.vv-cart-modal .vv-cart-modal__close:hover {
	background: var(--gold-100) !important;
	color: var(--ink-900) !important;
}

.vv-cart-modal__close:focus-visible {
	outline: 2px solid var(--focus-ring);
	outline-offset: 2px;
}

/* Sello de confirmación: sparkle dorado en un círculo suave. */
.vv-cart-modal__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 56px;
	height: 56px;
	margin-bottom: var(--space-4);
	border-radius: var(--radius-pill);
	background: var(--gold-100);
	color: var(--gold-600);
}

.vv-cart-modal__title {
	margin: 0 0 var(--space-2);
	font-family: var(--font-display);
	font-size: var(--text-2xl);
	font-weight: var(--fw-regular);
	color: var(--ink-900);
	line-height: var(--leading-tight);
}

/* Nombre del producto agregado (lo rellena el JS). */
.vv-cart-modal__product {
	margin: 0 0 var(--space-6);
	font-family: var(--font-sans);
	font-size: var(--text-sm);
	color: var(--ink-600);
}

.vv-cart-modal__actions {
	display: flex;
	flex-direction: column;
	gap: var(--space-3);
}

/* --- Estado de carga del botón "Agregar al carrito" ----------------------- */
/* El JS añade .is-loading al form durante la petición: el contenido del botón
   se atenúa y aparece un spinner centrado (sin tocar el HTML interno). */
.vv-single__cart.is-loading .single_add_to_cart_button {
	position: relative;
	pointer-events: none;
	/* El texto del botón es un nodo de texto suelto (no un elemento): se oculta
	   con color transparente — el SVG interno usa currentColor y desaparece
	   también — y el spinner blanco queda solo sobre el fondo camel. */
	color: transparent !important;
}

.vv-single__cart.is-loading .single_add_to_cart_button::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 20px;
	height: 20px;
	margin: -10px 0 0 -10px;
	border: 2.5px solid rgba(255, 255, 255, 0.35);
	border-top-color: var(--white);
	border-radius: var(--radius-pill);
	animation: vv-spin 0.7s linear infinite;
}

@keyframes vv-spin {
	to {
		transform: rotate(360deg);
	}
}

/* --- Móvil: el modal sube desde abajo, tipo hoja -------------------------- */
@media (max-width: 560px) {
	.vv-cart-modal {
		align-items: flex-end;
		padding: 0;
	}

	.vv-cart-modal__card {
		width: 100%;
		max-height: 92vh;
		max-height: 92dvh;
		border-radius: var(--radius-xl) var(--radius-xl) 0 0;
		border-bottom: 0;
		padding-bottom: max(var(--space-8), env(safe-area-inset-bottom));
		animation-name: vv-modal-up;
	}

	@keyframes vv-modal-up {
		from {
			opacity: 0;
			transform: translateY(36px);
		}
		to {
			opacity: 1;
			transform: translateY(0);
		}
	}
}

/* --- Accesibilidad: sin animaciones si el usuario las reduce -------------- */
@media (prefers-reduced-motion: reduce) {
	.vv-cart-modal__card {
		animation: none;
	}

	.vv-single__cart.is-loading .single_add_to_cart_button::after {
		animation-duration: 1.5s;
	}
}