/**
 * Mini-carrito (panel lateral del icono del carrito).
 *
 * Misma paleta y mismos recursos que el panel de reserva del checkout
 * (idt_booking_summary_panel.css), para que el cliente reconozca la misma
 * información al pasar de un sitio a otro.
 *
 * El marcado lo pinta woocommerce/cart/mini-cart.php. Las clases .elementor-*
 * se conservan y no se tocan más de lo justo: son las que usan los ajustes del
 * widget de Elementor.
 */

:root {
	--idt-mc-line: #e6e9ef;
	--idt-mc-muted: #6b7684;
	--idt-mc-text: #1c2733;
	--idt-mc-accent: #0b7a5c;
	--idt-mc-soft: #f6f8fa;
}

/* ── El panel ────────────────────────────────────────────────────────────── */

/*
 * Estas cuatro cosas —ancho, fondo, aviso de carrito vacío y botones— estaban
 * escritas a mano en el CSS personalizado de Elementor, todas con !important,
 * y desde ahí ganaban a la hoja del módulo: mientras estuvieran allí, cualquier
 * ajuste hecho aquí no servía de nada. Se han quitado de Elementor y se
 * mantienen aquí con el mismo aspecto, ya en un único sitio.
 *
 * Lo que sigue en Elementor es el icono del carrito de la cabecera
 * (.elementor-menu-cart__toggle), que es del diseño del sitio y no del panel.
 */
.elementor-menu-cart__main {
	width: 100%;
	max-width: 500px;
	background: #f0f0f0;
}

.elementor-menu-cart__main .widget_shopping_cart_content .woocommerce-mini-cart__empty-message {
	color: #31c89f;
	font-size: 20px;
}

.elementor-widget-woocommerce-menu-cart .elementor-menu-cart__footer-buttons a.elementor-button--view-cart,
.elementor-widget-woocommerce-menu-cart .elementor-menu-cart__footer-buttons a.elementor-button--checkout {
	border-radius: 5px;
	font-size: 0.9rem;
	letter-spacing: 0.1px;
	text-transform: uppercase;
}

/* ── Lista de artículos ──────────────────────────────────────────────────── */

.elementor-menu-cart__main .idt-mc {
	padding: 0;
}

/*
 * Los selectores llevan .idt-mc delante a propósito.
 *
 * Elementor coloca las piezas de cada artículo con su propia rejilla y con
 * reglas de una sola clase (.elementor-menu-cart__product-price, etc.). Con la
 * misma especificidad ganaría él en unas propiedades y yo en otras, y salía una
 * mezcla: el precio se quedaba sin altura y en gris casi blanco. Añadiendo el
 * contenedor delante, la colocación es entera de aquí y no hace falta !important.
 */
.idt-mc .idt-mc__item {
	position: relative;
	display: grid;
	grid-template-columns: 72px 1fr;
	grid-template-areas:
		'thumb body'
		'thumb price';
	gap: 4px 14px;
	align-items: start;
	padding: 16px 40px 16px 0;
	border-bottom: 1px solid var(--idt-mc-line);
}

.idt-mc .idt-mc__thumb {
	grid-area: thumb;
	width: 72px;
	padding: 0;
}

.idt-mc__thumb img {
	display: block;
	width: 72px;
	height: 72px;
	border-radius: 10px;
	object-fit: cover;
}

.idt-mc .idt-mc__body {
	grid-area: body;
	min-width: 0;
	padding: 0;
}

.idt-mc__title,
.idt-mc__title a {
	color: var(--idt-mc-text);
	font-size: 15px;
	font-weight: 700;
	line-height: 1.3;
	text-decoration: none;
}

/* ── Datos de la reserva ─────────────────────────────────────────────────── */

/*
 * Sustituyen a la tabla con bordes que el plugin mete en los datos de la línea.
 * Aquí el ancho es la mitad, así que la etiqueta va pequeña encima del valor en
 * lugar de compartir fila con él.
 */
.idt-mc__meta {
	margin: 8px 0 0;
	padding: 0;
	list-style: none;
}

.idt-mc__meta li {
	display: flex;
	justify-content: space-between;
	gap: 10px;
	margin: 0;
	padding: 3px 0;
	list-style: none;
}

.idt-mc__meta-label {
	flex: 1 1 auto;
	min-width: 0;
	color: var(--idt-mc-muted);
	font-size: 12.5px;
}

/*
 * La fecha no se parte. En un móvil estrecho, «16 de septiembre de 2026»
 * caía en dos líneas y el «de 2026» quedaba suelto debajo; la etiqueta, que sí
 * se puede encoger, cede el sitio.
 */
.idt-mc__meta-value {
	flex: 0 0 auto;
	color: var(--idt-mc-text);
	font-size: 12.5px;
	font-weight: 600;
	text-align: right;
	white-space: nowrap;
}

/*
 * Por si algún producto que no es alquiler acaba en el panel: la tabla del
 * plugin y el <dl> de WooCommerce se leen, no se salen del ancho, y sin los dos
 * puntos sueltos que deja una etiqueta vacía.
 */
.idt-mc__body .variation dt:empty,
.idt-mc__body .variation dt.variation- {
	display: none;
}

.idt-mc__body .variation,
.idt-mc__body .variation dd {
	margin: 0;
	padding: 0;
}

.idt-mc__body table.rbfw_room_cart_table {
	width: 100%;
	margin: 8px 0 0;
	border: 0;
	font-size: 12.5px;
	table-layout: fixed;
}

.idt-mc__body table.rbfw_room_cart_table th,
.idt-mc__body table.rbfw_room_cart_table td {
	padding: 3px 0;
	border: 0;
	background: none;
	font-size: 12.5px;
	line-height: 1.4;
}

.idt-mc__body table.rbfw_room_cart_table th {
	color: var(--idt-mc-muted);
	font-weight: 400;
	text-align: left;
}

.idt-mc__body table.rbfw_room_cart_table td {
	color: var(--idt-mc-text);
	font-weight: 600;
	text-align: right;
}

/* ── Importe de la línea ─────────────────────────────────────────────────── */

/*
 * Elementor lo pinta en gris muy claro (#d5d8dc) y lo coloca con su propia
 * rejilla, lo que aquí lo dejaba sin altura y prácticamente ilegible. Es el
 * importe de la línea: tiene que leerse.
 */
.idt-mc .idt-mc__price {
	grid-area: price;
	grid-column: 2 / 3;
	align-self: start;
	margin-top: 6px;
	padding: 0;
	color: var(--idt-mc-text);
	font-size: 15px;
	font-weight: 700;
}

.idt-mc .idt-mc__price .quantity {
	color: inherit;
	font-size: inherit;
	font-weight: inherit;
}

/* ── Quitar el artículo ──────────────────────────────────────────────────── */

/*
 * Antes era una aspa dentro de un círculo, idéntica a la de cerrar el panel y
 * a media altura entre las dos: una cierra y la otra borra la reserva, y no
 * había forma de distinguirlas. Ahora es una papelera gris anclada arriba a la
 * derecha DE LA FICHA del vehículo, de modo que se ve a qué pertenece.
 *
 * Ojo: el círculo y el aspa NO los dibuja el enlace, sino este contenedor —el
 * borde redondo y dos barras giradas en ::before y ::after—. Cambiar el icono
 * del enlace no quitaba nada; hay que apagarlos aquí.
 */
.idt-mc .idt-mc__item .idt-mc__remove {
	position: absolute;
	top: 12px;
	right: 2px;
	bottom: auto;
	width: 28px;
	height: 28px;
	border: 0;
	border-radius: 8px;
	overflow: visible;
	transition: background-color 0.15s ease;
}

.idt-mc .idt-mc__remove::before,
.idt-mc .idt-mc__remove::after,
.idt-mc .idt-mc__remove:hover::before,
.idt-mc .idt-mc__remove:hover::after {
	content: none;
}

.idt-mc .idt-mc__remove:hover {
	border: 0;
	background-color: #fdecee;
}

/*
 * El opacity: 1 no sobra: Elementor deja el enlace a cero a propósito, porque
 * en su diseño el icono lo pinta el contenedor y el enlace sólo recoge la
 * pulsación. Aquí el icono es del enlace, así que tiene que verse.
 */
.idt-mc .elementor-menu-cart__product-remove > a.idt-mc__remove-link {
	display: block;
	width: 100%;
	height: 100%;
	opacity: 1;
	border: 0;
	border-radius: 8px;
	background-color: transparent;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236b7684' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 6h18M8 6V4h8v2M19 6l-1 14H6L5 6M10 11v6M14 11v6'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: center;
	background-size: 15px 15px;
	color: transparent;
	font-size: 0;
	line-height: 0;
	text-decoration: none;
	transition: background-color 0.15s ease;
}

/* El segundo enlace lo esconde Elementor con su variable; se respeta. */
.idt-mc .elementor-menu-cart__product-remove > a.elementor_remove_from_cart_button.idt-mc__remove-link {
	display: var(--elementor-remove-from-cart-button, none);
}

.idt-mc .elementor-menu-cart__product-remove > a.idt-mc__remove-link:hover,
.idt-mc .elementor-menu-cart__product-remove > a.idt-mc__remove-link:focus-visible {
	background-color: #fdecee;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23c1121f' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 6h18M8 6V4h8v2M19 6l-1 14H6L5 6M10 11v6M14 11v6'/%3E%3C/svg%3E");
	outline: none;
}

/* Por si el tema añadiera algún icono al propio enlace. */
.idt-mc .elementor-menu-cart__product-remove > a.idt-mc__remove-link::before,
.idt-mc .elementor-menu-cart__product-remove > a.idt-mc__remove-link::after {
	content: none;
}

.idt-mc__remove-link .screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
}

/* ── Reparto del pago ────────────────────────────────────────────────────── */

/*
 * Lo que antes era una sola línea, «Subtotal: 252,00 €», que el cliente leía
 * como el precio de la reserva cuando en realidad es el adelanto.
 */
.elementor-menu-cart__subtotal.idt-mc__totals {
	display: block;
	margin: 0;
	padding: 16px 0 14px;
	border-top: 0;
	color: var(--idt-mc-text);
	font-size: 14px;
	text-align: left;
}

.idt-mc__total-row {
	display: flex;
	justify-content: space-between;
	gap: 12px;
	align-items: baseline;
	padding: 5px 0;
	line-height: 1.35;
}

.idt-mc__total-value {
	flex: 0 0 auto;
	font-weight: 700;
	white-space: nowrap;
}

/* Lo que se cobra hoy: es la cifra que importa, y va destacada. */
.idt-mc__total-row--now {
	margin-top: 6px;
	padding-top: 11px;
	border-top: 1px solid var(--idt-mc-line);
	color: var(--idt-mc-accent);
	font-size: 16px;
	font-weight: 700;
}

.idt-mc__total-row--now .idt-mc__total-value {
	font-size: 19px;
}

.idt-mc__total-row--later {
	color: var(--idt-mc-muted);
	font-size: 13.5px;
}

.idt-mc__total-row--later .idt-mc__total-value {
	font-weight: 600;
}

.idt-mc__note {
	margin: 8px 0 0;
	color: var(--idt-mc-muted);
	font-size: 12.5px;
	line-height: 1.45;
}

/* ── Botones ─────────────────────────────────────────────────────────────── */

.elementor-menu-cart__footer-buttons.idt-mc__buttons {
	display: grid;
	grid-template-columns: 1fr;
	gap: 8px;
}

/*
 * «Pagar ahora 252,00 €» es más largo que «Finalizar compra»; el precio no se
 * parte en dos líneas.
 */
.idt-mc__buttons .elementor-button-text .woocommerce-Price-amount {
	white-space: nowrap;
}

@media (max-width: 480px) {
	.idt-mc .idt-mc__item {
		grid-template-columns: 60px 1fr;
		padding-right: 36px;
	}

	.idt-mc .idt-mc__thumb,
	.idt-mc .idt-mc__thumb img {
		width: 60px;
	}

	.idt-mc .idt-mc__thumb img {
		height: 60px;
	}
}