/**
 * Elementor Content Carousel - slider.css
 *
 * Estilos mínimos e invasivos solo lo necesario para convertir
 * un Container de Elementor en un carrusel continuo.
 *
 * No modifica el diseño interno de los widgets (Image Box, etc.).
 * Solo controla el comportamiento del contenedor (overflow, flex, ancho).
 */

/* -------------------------------------------------------------------- */
/* Contenedor raíz (el .hotel-amenities-slider original de Elementor)   */
/* -------------------------------------------------------------------- */
.hotel-amenities-slider.hacs-initialized {
	overflow: hidden;
	position: relative;

	/* Evita que el usuario seleccione texto mientras arrastra la vista */
	-webkit-user-select: none;
	user-select: none;
}

/* -------------------------------------------------------------------- */
/* Track: contenedor interno generado por JS que realmente se mueve     */
/* -------------------------------------------------------------------- */
.hacs-track {
	display: flex;
	flex-wrap: nowrap;
	align-items: stretch;

	/* El gap se controla vía variable CSS, definida dinámicamente por JS */
	gap: var( --hacs-gap, 24px );

	will-change: transform;

	/* Ancho auto: el track crece con la suma de sus hijos (original + clones) */
	width: max-content;
}

/* -------------------------------------------------------------------- */
/* Items del carrusel (los Containers hijos de Elementor)               */
/* -------------------------------------------------------------------- */
.hacs-track > .hacs-item {
	flex: 0 0 auto;

	/* Ancho calculado dinámicamente por JS según el breakpoint activo */
	width: var( --hacs-item-width, auto );

	box-sizing: border-box;
}

/* No pisar el diseño interno de Elementor: los widgets dentro del item
   conservan su comportamiento y estilos originales. */
.hacs-track > .hacs-item > * {
	width: 100%;
	height: 100%;
}