/* ============================================================================
   Carrito flotante (widget «Carrito del menú» de Elementor Pro) con la piel de la
   tienda. Va en su propia hoja porque este panel puede salir en CUALQUIER página,
   no solo en las de WooCommerce, y `wcab-shop.css` solo se carga en esas.
   El marcado lo pone Elementor: aquí solo se le da forma.
   ========================================================================== */

.elementor-menu-cart__main{
	padding:22px 20px 24px;
	background:var(--wcab-bg,#fff);
	color:var(--wcab-primary,#17354d);
	font-family:var(--wcab-font-body,inherit);
}
.elementor-menu-cart__close-button{color:var(--wcab-secondary,#5b7186)}
.elementor-menu-cart__close-button:hover{color:var(--wcab-accent,#e48e45)}

/* ---------- La lista de reservas ---------- */
.elementor-menu-cart__main .elementor-menu-cart__products{
	display:grid;gap:12px;margin:0 0 4px;padding:0;max-height:none;
}
.elementor-menu-cart__main .elementor-menu-cart__product{
	/* Tres filas: la primera mide justo la miniatura, para que la papelera —que va debajo, en
	   la misma columna— arranque pegada a ella y el texto se quede con toda la anchura.
	   El nombre (que arrastra dentro los datos de la reserva) ocupa las dos primeras. */
	display:grid;grid-template-columns:60px 1fr;grid-template-rows:60px auto auto;
	grid-template-areas:"img nombre" "quitar nombre" "quitar precio";
	align-items:start;gap:2px 12px;margin:0;padding:14px;
	background:var(--wcab-surface,#fff);
	border:1px solid var(--wcab-border,rgba(0,0,0,.10));
	border-radius:var(--wcab-r-card,16px);
	border-bottom:1px solid var(--wcab-border,rgba(0,0,0,.10)); /* Elementor pone una raya inferior propia. */
}
.elementor-menu-cart__main .elementor-menu-cart__product-image{grid-area:img;width:60px;margin:0;padding:0;float:none}
.elementor-menu-cart__main .elementor-menu-cart__product-image img{
	width:60px;height:60px;display:block;object-fit:cover;border-radius:var(--wcab-r-sm,10px);
}
.elementor-menu-cart__main .elementor-menu-cart__product-name{
	grid-area:nombre;margin:0;padding:0;font-size:15px;line-height:1.3;
}
.elementor-menu-cart__main .elementor-menu-cart__product-name > a{
	font-family:var(--wcab-font-head,inherit);font-weight:800;text-decoration:none;
	color:var(--wcab-primary,#17354d);
}
.elementor-menu-cart__main .elementor-menu-cart__product-name > a:hover{color:var(--wcab-accent,#e48e45)}

/* Los datos de la reserva (fecha, duración, plazas, extras) llegan como una lista de
   definición. El panel es estrecho: con la etiqueta ENCIMA y el valor debajo se aprovecha
   todo el ancho y los valores largos («1× Adultos (13 - 65 años)») dejan de partirse. */
.elementor-menu-cart__main .elementor-menu-cart__product-name .variation{
	grid-area:meta;display:block;margin:8px 0 0;font-size:13px;line-height:1.4;
	color:var(--wcab-primary,#17354d);
}
.elementor-menu-cart__main .elementor-menu-cart__product-name .variation dt{
	margin:8px 0 0;padding:0;float:none;clear:none;
	font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.05em;
	color:var(--wcab-secondary,#5b7186);
}
.elementor-menu-cart__main .elementor-menu-cart__product-name .variation dt:first-child{margin-top:0}
.elementor-menu-cart__main .elementor-menu-cart__product-name .variation dd{
	margin:1px 0 0;padding:0;float:none;clear:none;font-weight:600;
}
.elementor-menu-cart__main .elementor-menu-cart__product-name .variation dd p{margin:0;font-size:inherit;line-height:inherit}

.elementor-menu-cart__main .elementor-menu-cart__product-price{
	grid-area:precio;margin:8px 0 0;padding:0;
	font-size:14px;font-weight:700;color:var(--wcab-primary,#17354d);
}
.elementor-menu-cart__main .elementor-menu-cart__product-price .product-quantity{
	font-weight:400;color:var(--wcab-secondary,#5b7186);
}
/* Quitar la reserva: una papelera, que se entiende sin pensar. Elementor dibuja ahí un aspa
   con dos barras absolutas que ocupan TODO el ancho de su caja (al ensanchar la caja salía
   una X gigante sobre la tarjeta): se apagan las dos y el icono se pinta con una máscara,
   que es lo que permite que herede el color y cambie al pasar por encima. */
.elementor-menu-cart__main .elementor-menu-cart__product-remove{
	/* Elementor la coloca en absoluto con `bottom:20px`; al pasarla a relativa ese `bottom`
	   seguía tirando de ella 20 px hacia arriba y se subía encima de la miniatura. */
	grid-area:quitar;position:relative;inset:auto;width:26px;height:26px;flex:none;
	margin:10px 0 0;padding:0;justify-self:center;align-self:start;
	/* Elementor le pone un aro alrededor del aspa: con la papelera sobra. */
	border:0;border-radius:var(--wcab-r-sm,8px);
}
.elementor-menu-cart__main .elementor-menu-cart__product-remove:hover{
	background:color-mix(in srgb,var(--wcab-c-full,#b32d2e) 10%,transparent);
}
.elementor-menu-cart__main .elementor-menu-cart__product-remove::before,
.elementor-menu-cart__main .elementor-menu-cart__product-remove::after{display:none}
.elementor-menu-cart__main .elementor-menu-cart__product-remove a{
	position:absolute;inset:0;display:block;border-radius:var(--wcab-r-sm,8px);
	/* Elementor deja el enlace a opacidad 0 (solo le sirve de zona de clic, porque el aspa la
	   pintaba con los pseudoelementos): aquí ES el icono, así que se ve. */
	opacity:1;background-color:var(--wcab-secondary,#5b7186);
	-webkit-mask:var(--wcab-icono-papelera) center/16px 16px no-repeat;
	mask:var(--wcab-icono-papelera) center/16px 16px no-repeat;
	transition:background-color .15s;
}
.elementor-menu-cart__main .elementor-menu-cart__product-remove a:hover{
	background-color:var(--wcab-c-full,#b32d2e);
}
.elementor-menu-cart__main{
	--wcab-icono-papelera:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 7h16M10 11v6M14 11v6M6 7l1 12a2 2 0 0 0 2 2h6a2 2 0 0 0 2-2l1-12M9 7V4h6v3'/%3E%3C/svg%3E");
}
/* El segundo enlace de quitar (el de AJAX y el de recarga van juntos) sobra a la vista. */
.elementor-menu-cart__main .elementor-menu-cart__product-remove a + a{display:none}

/* ---------- Subtotal y botones ---------- */
.elementor-menu-cart__main .elementor-menu-cart__subtotal{
	display:flex;align-items:baseline;justify-content:space-between;gap:12px;
	margin:16px 0 0;padding:14px 0;border-top:1px solid var(--wcab-border,rgba(0,0,0,.10));
	font-family:var(--wcab-font-head,inherit);font-size:17px;font-weight:800;
	color:var(--wcab-primary,#17354d);
}
.elementor-menu-cart__main .elementor-menu-cart__footer-buttons{
	display:grid;gap:10px;margin:16px 0 0;padding:0;border:0;
}
.elementor-menu-cart__main .elementor-menu-cart__footer-buttons .elementor-button{
	display:block;width:100%;padding:13px 18px;text-align:center;text-decoration:none;
	font-family:var(--wcab-font-head,inherit);font-size:15px;font-weight:800;line-height:1.2;
	border-radius:var(--wcab-r-sm,10px);transition:background .15s,color .15s,border-color .15s;
}
.elementor-menu-cart__main .elementor-menu-cart__footer-buttons .elementor-button--view-cart{
	background:transparent;color:var(--wcab-primary,#17354d);
	border:1.5px solid var(--wcab-primary,#17354d);
}
.elementor-menu-cart__main .elementor-menu-cart__footer-buttons .elementor-button--view-cart:hover{
	border-color:var(--wcab-accent,#e48e45);color:var(--wcab-accent,#e48e45);background:transparent;
}
.elementor-menu-cart__main .elementor-menu-cart__footer-buttons .elementor-button--checkout{
	background:var(--wcab-accent,#e48e45);color:#fff;border:1.5px solid var(--wcab-accent,#e48e45);
}
.elementor-menu-cart__main .elementor-menu-cart__footer-buttons .elementor-button--checkout:hover{
	background:var(--wcab-accent-d,#cf7526);border-color:var(--wcab-accent-d,#cf7526);color:#fff;
}

/* ---------- Carrito vacío ---------- */
.elementor-menu-cart__main .woocommerce-mini-cart__empty-message{
	margin:24px 0;text-align:center;font-size:15px;color:var(--wcab-secondary,#5b7186);
}