/**
 * MetaTech Template Slider - frontend styles
 */

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

.metatech-template-slider {
	position: relative;
	width: 100%;
	overflow: hidden;
}

.metatech-template-slider .swiper-wrapper {
	height: 100%;
}

/*
 * Each slide is a flex column so the Elementor template inside
 * can stretch to the full slide height.
 */
.metatech-template-slider .swiper-slide {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	width: 100%;
	overflow: hidden;
}

/*
 * The outer wrapper that get_builder_content_for_display() prints.
 * Make it fill the slide and behave as a flex column so its children
 * can grow with flex.
 */
.metatech-template-slider .swiper-slide > .elementor {
	width: 100%;
	flex: 1 1 100%;
	display: flex;
	flex-direction: column;
}

/*
 * Force every direct child of the .elementor wrapper to fill the slide.
 * Covers: legacy <section> elements, .elementor-section-wrap
 * (page templates with multiple sections), and Flexbox containers (.e-con).
 */
.metatech-template-slider .swiper-slide > .elementor > * {
	flex: 1 1 100%;
	min-height: 100%;
	width: 100%;
}

/*
 * When the template is a "page" type, Elementor wraps sections in
 * .elementor-section-wrap. Stretch that wrapper and its children too.
 */
.metatech-template-slider .swiper-slide .elementor-section-wrap {
	display: flex;
	flex-direction: column;
	width: 100%;
}

.metatech-template-slider .swiper-slide .elementor-section-wrap > .elementor-section,
.metatech-template-slider .swiper-slide .elementor-section-wrap > .e-con {
	flex: 1 1 100%;
	min-height: 100%;
	width: 100%;
}

/* Side arrows */
.metatech-slider-arrow {
	position: absolute;
	top: 50%;
	transform: translateY( -50% );
	z-index: 10;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	border: none;
	cursor: pointer;
	transition: background-color 0.25s ease, opacity 0.25s ease, transform 0.25s ease;
	-webkit-appearance: none;
	appearance: none;
}

.metatech-slider-arrow:focus {
	outline: 2px solid rgba( 255, 255, 255, 0.6 );
	outline-offset: 2px;
}

.metatech-slider-arrow svg {
	width: 22px;
	height: 22px;
	fill: currentColor;
	pointer-events: none;
}

.metatech-slider-arrow.swiper-button-disabled {
	opacity: 0.35;
	cursor: not-allowed;
}

/* Pagination position */
.metatech-slider-pagination {
	position: absolute;
	bottom: 12px;
	left: 0;
	right: 0;
	text-align: center;
	z-index: 10;
}