/* ==========================================================================
   MADA Slider
========================================================================== */

.wp-block-gallery.mada-slider,
.wp-block-gallery.mada-carousel {
	display: block;
	position: relative;
	width: 100%;
}

.mada-slider .splide__track,
.mada-carousel .splide__track {
	overflow: hidden;
}

.mada-slider .splide__list,
.mada-carousel .splide__list {
	display: flex;
	align-items: stretch;
	margin: 0 !important;
	padding: 0 !important;
}

.mada-slider .splide__slide,
.mada-carousel .splide__slide {
	flex-grow: 0 !important;
	flex-shrink: 0 !important;
	margin: 0 !important;
}

.mada-slider .splide__slide img,
.mada-carousel .splide__slide img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Flechas
========================================================================== */

.mada-slider .splide__arrow,
.mada-carousel .splide__arrow {
	position: absolute;
	top: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: #fff;
	color: #000;
	cursor: pointer;
	transform: translateY(-50%);
	z-index: 5;
	transition:
		background-color 0.3s var(--cubic),
		color 0.3s var(--cubic),
		transform 0.3s var(--cubic);
}

.mada-slider .splide__arrow:hover,
.mada-carousel .splide__arrow:hover {
	background: #104F9E;
	color: #fff;
	transform: translateY(-50%) scale(1.05);
}

.mada-slider .splide__arrow--prev,
.mada-carousel .splide__arrow--prev {
	left: 20px;
    transform: translateY(-50%) rotate(180deg);
}
.mada-slider .splide__arrow--prev:hover,
.mada-carousel .splide__arrow--prev:hover {
	left: 20px;
    transform: translateY(-50%) scale(1.05) rotate(180deg);
}

.mada-slider .splide__arrow--next,
.mada-carousel .splide__arrow--next {
	right: 20px;
}

.mada-slider .splide__arrow svg,
.mada-carousel .splide__arrow svg {
	width: 16px;
	height: 16px;
	fill: currentColor;
}

/* Paginación sobre las imágenes
========================================================================== */

.wp-block-gallery.mada-slider,
.wp-block-gallery.mada-carousel {
	position: relative;
}

.mada-slider .splide__pagination,
.mada-carousel .splide__pagination {
	position: absolute;
	right: 0;
	bottom: 20px;
	left: 0;
	z-index: 5;

	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;

	margin: 0;
	padding: 0;
	list-style: none;
}

.mada-slider .splide__pagination__page,
.mada-carousel .splide__pagination__page {
	display: block;
	width: 8px;
	height: 8px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.6);
	cursor: pointer;

	transition:
		width 0.3s var(--cubic),
		border-radius 0.3s var(--cubic),
		background-color 0.3s var(--cubic);
}

.mada-slider .splide__pagination__page.is-active,
.mada-carousel .splide__pagination__page.is-active {
	width: 24px;
	border-radius: 10px;
	background: #fff;
}

/* Responsive
========================================================================== */

@media only screen and (max-width: 767px) {

	.mada-slider .splide__arrow,
	.mada-carousel .splide__arrow {
		width: 40px;
		height: 40px;
	}

	.mada-slider .splide__arrow--prev,
	.mada-carousel .splide__arrow--prev {
		left: 12px;
	}

	.mada-slider .splide__arrow--next,
	.mada-carousel .splide__arrow--next {
		right: 12px;
	}
}