/**
 * Carrito deslizante.
 *
 * Comparte medidas y tiempos con el panel lateral del menu (style.css) para que
 * los dos se sientan el mismo objeto: mismo ancho, misma curva, mismo velo.
 */

/* El atributo hidden solo vale display:none desde la hoja del navegador, asi que
   CUALQUIER regla display de aca lo pisa. Varias partes del panel son flex y se
   mostraban aunque el JS las marcara ocultas. Esto lo deja zanjado de una vez
   para todo el carrito, en vez de repetir una excepcion por selector.
   El badge del encabezado entra aca porque .vrlz-cart-badge es flex en
   style.css: sin esto mostraba un "0" con el carrito vacio. */
.vrlz-cart-panel [hidden],
.vrlz-cart-overlay[hidden],
.vrlz-cart-flotante[hidden],
.vrlz-cart-badge[hidden] {
	display: none !important;
}

/* ============================================================ Velo */

/* Por que 10000 y no 200 como el panel del menu: la barra sticky del
   configurador (.vc-sticky-bar, shop.css) esta declarada en z-index 9999
   !important y en movil se dibujaba ENCIMA del carrito abierto. El carrito es
   lo ultimo con lo que interactua el usuario, asi que va arriba de todo. */
.vrlz-cart-overlay {
	position: fixed;
	inset: 0;
	z-index: 10000;
	background-color: rgba(20, 20, 30, 0.45);
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.25s ease;
}

.vrlz-cart-overlay.is-open {
	opacity: 1;
	pointer-events: auto;
}

/* =========================================================== Panel */

.vrlz-cart-panel {
	position: fixed;
	top: 0;
	right: 0;
	z-index: 10001;
	display: flex;
	flex-direction: column;
	width: 100%;
	max-width: 400px;
	height: 100%;
	background-color: var(--wp--preset--color--surface);
	border-left: 1px solid var(--wp--preset--color--border);
	box-shadow: -24px 0 60px rgba(0, 0, 0, 0.55);
	transform: translateX(100%);
	transition: transform 0.3s cubic-bezier(0.34, 1, 0.64, 1);
}

.vrlz-cart-panel.is-open {
	transform: translateX(0);
}

/* Mientras hay una peticion en curso el panel no acepta clics: evita que se
   acumulen acciones sobre cantidades que ya cambiaron. */
.vrlz-cart-panel.is-ocupado .vrlz-cart-body,
.vrlz-cart-panel.is-ocupado .vrlz-cart-foot {
	opacity: 0.55;
	pointer-events: none;
}

.admin-bar .vrlz-cart-panel,
.admin-bar .vrlz-cart-overlay {
	top: 32px;
}

.admin-bar .vrlz-cart-panel {
	height: calc(100% - 32px);
}

@media (max-width: 782px) {
	.admin-bar .vrlz-cart-panel,
	.admin-bar .vrlz-cart-overlay {
		top: 46px;
	}

	.admin-bar .vrlz-cart-panel {
		height: calc(100% - 46px);
	}
}

/* -------------------------------------------------------- Cabecera */

.vrlz-cart-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--wp--preset--spacing--30);
	padding: 16px 20px;
	border-bottom: 1px solid var(--wp--preset--color--border);
	background-color: var(--wp--preset--color--base);
	flex-shrink: 0;
}

.vrlz-cart-title {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 0;
	font-size: var(--wp--preset--font-size--lg);
	font-weight: 800;
}

/* El icono acompaña al titulo: va un punto por debajo para no competir con el
   texto, y no se encoge si el nombre del panel se traduce mas largo. */
.vrlz-cart-title-ico {
	width: 22px;
	height: 22px;
	flex-shrink: 0;
	color: var(--wp--preset--color--accent);
}

/*
 * `grid`, no `flex`, y la cruz dibujada con CSS. Los dos motivos son el mismo y
 * estan explicados en la nota larga de .vrlz-burger en style.css: ese WebKit no
 * aplica `display:flex` a un <button>, y este boton no muestra nada mas que el
 * icono. Con flex y un <svg> adentro, en un iPhone 8 Plus el boton de cerrar el
 * carrito quedaba invisible aunque seguia cerrando.
 *
 * El simbolo `close` medido a 18px daba brazos de unos 11,6: dos barras de
 * 14 x 1,8 cruzadas dan lo mismo a ojo.
 */
.vrlz-cart-close {
	display: grid;
	place-items: center;
	width: 36px;
	height: 36px;
	background: transparent;
	border: none;
	border-radius: var(--wp--custom--radius--sm);
	color: var(--wp--preset--color--muted);
	cursor: pointer;
	font-size: 18px;
	transition: color 0.2s ease, background-color 0.2s ease;
}

.vrlz-cart-close::before,
.vrlz-cart-close::after {
	content: "";
	display: block;
	grid-area: 1 / 1;
	width: 14px;
	height: 1.8px;
	background: currentColor;
	position: relative;
	z-index: 1;
}

.vrlz-cart-close::before { transform: rotate(45deg); }
.vrlz-cart-close::after  { transform: rotate(-45deg); }

.vrlz-cart-close:hover {
	color: var(--wp--preset--color--contrast);
	background-color: var(--wp--preset--color--border);
}

/* ----------------------------------------------------------- Cuerpo */

.vrlz-cart-body {
	flex: 1;
	overflow-y: auto;
	overscroll-behavior: contain;
	padding: 8px 20px;
}

.vrlz-cart-cargando {
	margin: 0;
	color: var(--wp--preset--color--muted);
	font-size: var(--wp--preset--font-size--sm);
}

.vrlz-cart-cargando {
	padding: 32px 0;
	text-align: center;
}

.vrlz-cart-aviso {
	margin: 12px 0 0;
	padding: 10px 12px;
	border: 1px solid #7f1d1d;
	border-radius: var(--wp--custom--radius--sm);
	background-color: rgba(127, 29, 29, 0.18);
	color: #fca5a5;
	font-size: var(--wp--preset--font-size--sm);
}

/* Estado vacio */

.vrlz-cart-vacio {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
	padding: 48px 16px;
	text-align: center;
}

.vrlz-cart-vacio-ico {
	width: 40px;
	height: 40px;
	color: var(--wp--preset--color--border);
}

.vrlz-cart-vacio-titulo {
	margin: 8px 0 0;
	font-size: var(--wp--preset--font-size--lg);
	font-weight: 700;
}

.vrlz-cart-vacio-texto {
	margin: 0 0 8px;
	color: var(--wp--preset--color--muted);
	font-size: var(--wp--preset--font-size--sm);
}

/* ---------------------------------------------------------- Articulos */

.vrlz-cart-items {
	margin: 0;
	padding: 0;
	list-style: none;
}

.vrlz-cart-item {
	display: flex;
	gap: 12px;
	padding: 16px 0;
	border-bottom: 1px solid var(--wp--preset--color--border);
}

.vrlz-cart-item:last-child {
	border-bottom: none;
}

.vrlz-cart-item-img {
	flex-shrink: 0;
	width: 56px;
	height: 56px;
	border-radius: var(--wp--custom--radius--sm);
	overflow: hidden;
	background-color: var(--wp--preset--color--base);
}

.vrlz-cart-item-img img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* Los servicios pueden no tener imagen. Un hueco con el degrade de marca es
   mas prolijo que un cuadro vacio o un icono genérico repetido. */
.vrlz-cart-item-img.is-vacia {
	background-image: var(--wp--preset--gradient--brand);
	opacity: 0.25;
}

.vrlz-cart-item-info {
	flex: 1;
	min-width: 0;
}

.vrlz-cart-item-nombre {
	display: block;
	color: var(--wp--preset--color--contrast);
	font-size: var(--wp--preset--font-size--sm);
	font-weight: 600;
	line-height: 1.35;
	text-decoration: none;
}

.vrlz-cart-item-nombre:hover {
	color: var(--wp--preset--color--accent);
	text-decoration: none;
}

.vrlz-cart-item-meta {
	margin: 4px 0 0;
	color: var(--wp--preset--color--muted);
	font-size: var(--wp--preset--font-size--xs);
	line-height: 1.4;
}

/* Selector de cantidad */

.vrlz-cart-qty {
	display: inline-flex;
	align-items: center;
	margin-top: 10px;
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--wp--custom--radius--pill);
	overflow: hidden;
}

.vrlz-cart-qty-btn {
	width: 28px;
	height: 28px;
	background: transparent;
	border: none;
	color: var(--wp--preset--color--contrast);
	cursor: pointer;
	font-size: 15px;
	line-height: 1;
	transition: background-color 0.2s ease;
}

.vrlz-cart-qty-btn:hover:not(:disabled) {
	background-color: var(--wp--preset--color--border);
}

.vrlz-cart-qty-btn:disabled {
	opacity: 0.35;
	cursor: default;
}

.vrlz-cart-qty-num {
	min-width: 30px;
	text-align: center;
	font-size: var(--wp--preset--font-size--sm);
	font-weight: 700;
	font-variant-numeric: tabular-nums;
}

.vrlz-cart-item-derecha {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	justify-content: space-between;
	gap: 8px;
	flex-shrink: 0;
}

.vrlz-cart-item-precio {
	font-size: var(--wp--preset--font-size--sm);
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

.vrlz-cart-item-quitar {
	width: 24px;
	height: 24px;
	background: transparent;
	border: none;
	border-radius: var(--wp--custom--radius--sm);
	color: var(--wp--preset--color--muted);
	cursor: pointer;
	font-size: 18px;
	line-height: 1;
	transition: color 0.2s ease, background-color 0.2s ease;
}

.vrlz-cart-item-quitar:hover {
	color: #fca5a5;
	background-color: rgba(127, 29, 29, 0.25);
}

/* --------------------------------------------------------------- Pie */

.vrlz-cart-foot {
	flex-shrink: 0;
	padding: 16px 20px calc(16px + env(safe-area-inset-bottom));
	border-top: 1px solid var(--wp--preset--color--border);
	background-color: var(--wp--preset--color--base);
}

/* Cupon */

.vrlz-cart-cupon-toggle {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	width: 100%;
	padding: 8px 0;
	background: transparent;
	border: none;
	color: var(--wp--preset--color--muted);
	cursor: pointer;
	font-size: var(--wp--preset--font-size--sm);
	font-weight: 600;
	text-align: left;
}

.vrlz-cart-cupon-toggle:hover {
	color: var(--wp--preset--color--contrast);
}

.vrlz-cart-cupon-toggle .vrlz-chevron {
	transition: transform 0.2s ease;
}

.vrlz-cart-cupon-toggle[aria-expanded="true"] .vrlz-chevron {
	transform: rotate(180deg);
}

.vrlz-cart-cupon-form {
	display: flex;
	gap: 8px;
	margin: 8px 0 4px;
}

.vrlz-cart-cupon-input {
	flex: 1;
	min-width: 0;
	padding: 9px 12px;
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--wp--custom--radius--sm);
	background-color: var(--wp--preset--color--surface);
	color: var(--wp--preset--color--contrast);
	font-size: var(--wp--preset--font-size--sm);
	text-transform: uppercase;
}

.vrlz-cart-cupon-input:focus {
	outline: 2px solid var(--wp--preset--color--primary);
	outline-offset: 1px;
}

.vrlz-cart-cupon-btn {
	padding: 9px 16px;
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--wp--custom--radius--sm);
	background-color: var(--wp--preset--color--surface);
	color: var(--wp--preset--color--contrast);
	cursor: pointer;
	font-size: var(--wp--preset--font-size--sm);
	font-weight: 700;
	transition: border-color 0.2s ease, color 0.2s ease;
}

.vrlz-cart-cupon-btn:hover:not(:disabled) {
	border-color: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--accent);
}

.vrlz-cart-cupon-btn:disabled {
	opacity: 0.5;
	cursor: default;
}

.vrlz-cart-cupon-error {
	margin: 4px 0 0;
	color: #fca5a5;
	font-size: var(--wp--preset--font-size--xs);
}

.vrlz-cart-cupones {
	margin: 8px 0 0;
	padding: 0;
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
}

.vrlz-cart-cupon-item {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 3px 6px 3px 10px;
	border: 1px dashed var(--wp--preset--color--accent);
	border-radius: var(--wp--custom--radius--pill);
	color: var(--wp--preset--color--accent);
	font-size: var(--wp--preset--font-size--xs);
	font-weight: 700;
	text-transform: uppercase;
}

.vrlz-cart-cupon-quitar {
	background: transparent;
	border: none;
	color: inherit;
	cursor: pointer;
	font-size: 15px;
	line-height: 1;
	padding: 0 2px;
}

/* Totales */

.vrlz-cart-totales {
	margin: 12px 0;
	padding-top: 12px;
	border-top: 1px solid var(--wp--preset--color--border);
}

.vrlz-cart-linea {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 12px;
	margin-bottom: 6px;
}

.vrlz-cart-linea--total {
	font-size: var(--wp--preset--font-size--lg);
	font-weight: 800;
}

.vrlz-cart-linea--descuento {
	color: var(--wp--preset--color--accent);
	font-size: var(--wp--preset--font-size--sm);
	font-weight: 600;
}

.vrlz-cart-subtotal,
.vrlz-cart-descuento {
	font-variant-numeric: tabular-nums;
}

/* Botones */

.vrlz-cart-btn {
	display: block;
	width: 100%;
	padding: 13px 20px;
	border: none;
	border-radius: var(--wp--custom--radius--pill);
	font-size: var(--wp--preset--font-size--md);
	font-weight: 800;
	text-align: center;
	text-decoration: none;
	cursor: pointer;
	transition: filter 0.2s ease, transform 0.15s ease;
}

/*
 * "Finalizar compra" va en verde, no en el gradiente de marca.
 *
 * El verde no esta en la paleta del theme y no se agrega ahi: es el color de
 * UN boton, no un color de la marca. Vive en esta variable para que exista en
 * un solo lugar.
 *
 * El tono no es libre: sobre #15803D el texto blanco da 5,0:1 de contraste y
 * pasa AA. Los verdes mas brillantes que se probaron (#16A34A da 3,3:1) no
 * llegan, y el texto del boton es de 15px, que no cuenta como texto grande.
 */
.vrlz-cart-btn--principal {
	--vrlz-cart-verde: #15803D;

	background-image: none;
	background-color: var(--vrlz-cart-verde);
	color: var(--wp--preset--color--light);
}

.vrlz-cart-btn--principal:hover {
	filter: brightness(1.12);
	text-decoration: none;
	transform: translateY(-1px);
}

.vrlz-cart-btn--fantasma {
	border: 1px solid var(--wp--preset--color--border);
	background: transparent;
	color: var(--wp--preset--color--contrast);
}

.vrlz-cart-btn--fantasma:hover {
	border-color: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--accent);
	text-decoration: none;
}

/* Borde blanco. Lo usa el boton del carrito vacio, donde es lo unico que hay
   en pantalla y el borde gris de --border casi no se ve sobre el panel. */
.vrlz-cart-btn--claro {
	border-color: var(--wp--preset--color--light);
}

/*
 * "Seguir comprando" del pie: cierra el panel y no navega.
 *
 * Es un <button>, asi que arranca con los estilos del navegador. Se los quita
 * y toma la misma pinta de enlace discreto que tenia el "Ver el carrito" al que
 * reemplaza.
 */
.vrlz-cart-seguir {
	display: block;
	width: 100%;
	margin-top: 10px;
	padding: 4px 0;
	background: none;
	border: none;
	color: var(--wp--preset--color--muted);
	font-family: inherit;
	font-size: var(--wp--preset--font-size--sm);
	font-weight: 600;
	text-align: center;
	cursor: pointer;
	transition: color 0.2s ease;
}

.vrlz-cart-seguir:hover {
	color: var(--wp--preset--color--contrast);
	text-decoration: underline;
}

/* ================================================ Boton flotante */

.vrlz-cart-flotante {
	position: fixed;
	right: 20px;
	bottom: 20px;
	z-index: 9998; /* Debajo del carrito abierto, encima del resto de la pagina. */
	/*
	 * `grid` por lo mismo que .vrlz-cart-close: es un <button> que solo muestra
	 * un icono. El numerito va `position:absolute`, asi que en el flujo hay un
	 * solo hijo y centrarlo con place-items da igual que con flex.
	 * El icono del carrito sigue siendo SVG: no es una forma que se dibuje con
	 * dos barras, y con grid el <svg> ya toma su medida.
	 */
	display: grid;
	place-items: center;
	width: 56px;
	height: 56px;
	padding: 0;
	border: none;
	border-radius: var(--wp--custom--radius--pill);
	background-image: var(--wp--preset--gradient--brand);
	color: var(--wp--preset--color--light);
	cursor: pointer;
	font-size: 22px;
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45), 0 0 0 1px rgba(255, 255, 255, 0.08) inset;
	transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.2s ease;
}

.vrlz-cart-flotante:hover {
	transform: scale(1.08);
}

.vrlz-cart-flotante:active {
	transform: scale(0.94);
}

/* Con el panel abierto el boton sobra: abre algo que ya esta abierto, y ademas
   quedaria pegado al borde del panel. */
body.vrlz-cart-abierto .vrlz-cart-flotante {
	opacity: 0;
	transform: scale(0.8);
	pointer-events: none;
}

.vrlz-cart-flotante-num {
	position: absolute;
	top: -2px;
	right: -2px;
	display: flex;
	align-items: center;
	justify-content: center;
	min-width: 22px;
	height: 22px;
	padding: 0 5px;
	border: 2px solid var(--wp--preset--color--base);
	border-radius: var(--wp--custom--radius--pill);
	background-color: var(--wp--preset--color--light);
	color: var(--wp--preset--color--base);
	font-size: 11px;
	font-weight: 800;
	font-variant-numeric: tabular-nums;
}

/* Un salto corto al aparecer o al cambiar la cantidad: es la unica senal de que
   algo entro al carrito cuando el panel no se abre. */
.vrlz-cart-flotante.is-nuevo {
	animation: vrlz-cart-salto 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes vrlz-cart-salto {
	0%   { transform: scale(0.6); }
	55%  { transform: scale(1.15); }
	100% { transform: scale(1); }
}

/*
 * En movil, el configurador levanta su propia barra fija abajo
 * (.vc-sticky-bar, shop.css) y el boton le quedaria encima. Con :has() se
 * detecta que la barra esta desplegada y el boton sube por arriba de ella.
 */
body:has(.vc-sticky-bar.show) .vrlz-cart-flotante {
	bottom: 92px;
}

@media (max-width: 600px) {
	.vrlz-cart-flotante {
		right: 16px;
		bottom: 16px;
		width: 52px;
		height: 52px;
	}
}

/* Sin animaciones para quien las pidió apagadas en su sistema. */
@media (prefers-reduced-motion: reduce) {
	.vrlz-cart-panel,
	.vrlz-cart-overlay,
	.vrlz-cart-btn,
	.vrlz-cart-flotante {
		transition: none;
	}

	.vrlz-cart-flotante.is-nuevo {
		animation: none;
	}
}