.wts-template-slider {
	position: relative;
	width: 100%;
}

.wts-template-slider .wts-swiper {
	width: 100%;
	overflow: hidden;
}

.wts-template-slider .wts-swiper-slide {
	height: auto;
	display: flex;
	/* Swiper limita la selección de texto por defecto para que no
	   interfiera con el gesto de arrastre al deslizar; la recuperamos
	   para que el contenido de cada slide siga siendo texto real
	   seleccionable, no algo que "se sienta" como una imagen. */
	user-select: text;
	-webkit-user-select: text;
	-moz-user-select: text;
	-ms-user-select: text;
}

.wts-template-slider .wts-swiper-slide * {
	user-select: text;
	-webkit-user-select: text;
	-moz-user-select: text;
	-ms-user-select: text;
}

.wts-template-slider .wts-swiper-slide > * {
	width: 100%;
}

/* ---------------------------------
   Flechas: botón + chevron (no usamos la fuente de íconos de Swiper,
   dibujamos el chevron con bordes para que sea 100% personalizable)
--------------------------------- */
.wts-template-slider .wts-swiper-button-next,
.wts-template-slider .wts-swiper-button-prev {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	background-color: rgba( 0, 0, 0, 0.35 );
	color: #ffffff;
	border-radius: 8px;
	cursor: pointer;
	transition: background-color 0.2s ease;
	margin-top: 0; /* anulamos el cálculo por defecto de Swiper */
}

.wts-template-slider .wts-swiper-button-next::after,
.wts-template-slider .wts-swiper-button-prev::after {
	content: '';
	display: block;
	border-style: solid;
	border-color: currentColor;
	box-sizing: border-box;
}

.wts-template-slider .wts-swiper-button-next::after {
	transform: rotate( -45deg );
	margin-left: -3px;
}

.wts-template-slider .wts-swiper-button-prev::after {
	transform: rotate( 135deg );
	margin-right: -3px;
}

.wts-template-slider .wts-swiper-button-next.swiper-button-disabled,
.wts-template-slider .wts-swiper-button-prev.swiper-button-disabled {
	opacity: 0.35;
	cursor: default;
}

/* Flechas "sobre el slide" (flotantes, superpuestas) */
.wts-template-slider.wts-arrows-inside .wts-swiper .wts-swiper-button-next,
.wts-template-slider.wts-arrows-inside .wts-swiper .wts-swiper-button-prev {
	position: absolute;
	top: 50%;
	transform: translateY( -50% );
	z-index: 10;
}

/* ---------------------------------
   Puntos (paginación)
--------------------------------- */
.wts-template-slider .wts-swiper-pagination {
	display: flex;
	align-items: center;
	justify-content: center;
	width: auto;
	left: 50%;
	transform: translateX( -50% );
}

.wts-template-slider .wts-swiper-pagination .swiper-pagination-bullet {
	opacity: 1;
	background: rgba( 255, 255, 255, 0.5 );
	transition: background-color 0.2s ease, transform 0.2s ease;
}

.wts-template-slider .wts-swiper-pagination .swiper-pagination-bullet-active {
	background: #ffffff;
}

.wts-template-slider.wts-dots-inside .wts-swiper .wts-swiper-pagination {
	position: absolute;
	z-index: 10;
}

/* ---------------------------------
   Fila "fuera del slide" para flechas y/o puntos
--------------------------------- */
.wts-template-slider .wts-controls-outside {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 16px;
	margin-top: 14px;
}

.wts-template-slider .wts-controls-outside .wts-swiper-button-prev,
.wts-template-slider .wts-controls-outside .wts-swiper-button-next {
	position: static;
	top: auto;
	left: auto;
	right: auto;
	transform: none;
}

.wts-template-slider .wts-controls-outside .wts-swiper-pagination {
	position: static;
	left: auto;
	transform: none;
}

.wts-empty-notice {
	padding: 20px;
	text-align: center;
	background: #f5f5f5;
	border: 1px dashed #ccc;
	color: #666;
	font-size: 14px;
}