/* Swiper visual-parity shim - replicates the cosmetic Owl Carousel CSS that
   used to live in the compiled style.css for the carousels that are actually
   rendered on a page today (video-slide, student-slider, teacher-slider,
   video-section, link-slider - the external nav-control carousels need no
   changes, that component is untouched). Do not edit style.css/SCSS for
   this - this file is additive. */

/* ---- structural safety net ----
   Several slide contents (e.g. .join-video.single-user) carry their own
   flex-grow:1 / width:100% rules from when they lived in a wrapping flex
   grid under Owl. Swiper's own inline sizing must win instead, and slides
   must size to content rather than stretching to the tallest sibling. */
.swiper .swiper-wrapper {
	align-items: flex-start;
}
.swiper {
	/* flex items default to min-width:auto, which stops a carousel from ever
	   shrinking below its slides' natural total width when it lives inside
	   a flex row (as .video-slide does) - let overflow:hidden do its job */
	min-width: 0;
}
.swiper .swiper-slide {
	flex-grow: 0 !important;
	flex-shrink: 0 !important;
}

/* .join-video.single-user has height:auto and an inner img at height:100%,
   which was fine in normal flow but is ambiguous once the slide becomes a
   flex item - pin an explicit height (matching its own min-height) so the
   percentage-height image has something concrete to resolve against. */
.swiper.video-slide,
.swiper.video-slide .swiper-wrapper,
.swiper.video-slide .swiper-slide {
	height: 230px;
}

/* ---- video-slide (internal nav) ---- */
.swiper.video-slide .owl-nav {
	position: absolute;
	top: calc(50% - 24px);
	transform: translate(0, -50%);
}
.swiper.video-slide .owl-nav button.owl-next,
.swiper.video-slide .owl-nav button.owl-prev {
	background-color: #F4F6FA;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 20px;
	height: 20px;
	border: 0;
}
.swiper.video-slide .owl-nav button.owl-next:hover,
.swiper.video-slide .owl-nav button.owl-prev:hover {
	background-color: #3D5EE1;
}
.swiper.video-slide .owl-nav button.owl-next:hover i,
.swiper.video-slide .owl-nav button.owl-prev:hover i {
	color: #FFF;
}
.swiper.video-slide .owl-nav button.owl-next i,
.swiper.video-slide .owl-nav button.owl-prev i {
	color: #6A7287;
}
@media (max-width: 1399.98px) {
	.swiper.video-slide .owl-nav {
		width: 100%;
		display: flex;
		justify-content: space-between;
	}
}
html[data-theme=dark] .swiper.video-slide .owl-nav button {
	background: #131022 !important;
	color: rgba(185, 183, 192, .502) !important;
}

/* ---- student-slider / teacher-slider (internal nav) ---- */
.swiper.student-slider .owl-nav,
.swiper.teacher-slider .owl-nav {
	position: absolute;
	left: 50%;
	top: 30%;
	transform: translateX(-50%);
	display: flex;
	align-items: center;
	justify-content: center;
}
.swiper.student-slider .owl-nav button,
.swiper.teacher-slider .owl-nav button {
	width: 24px;
	height: 24px;
	background: #FFF;
	border: 0;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 12px;
}
.swiper.teacher-slider .owl-nav button {
	color: #202C4B;
}
.swiper.student-slider .owl-nav button.owl-prev,
.swiper.teacher-slider .owl-nav button.owl-prev {
	margin-right: 5px;
}
.swiper.student-slider .owl-nav button:hover,
.swiper.teacher-slider .owl-nav button:hover {
	background: #3D5EE1;
	color: #FFF;
}
/* RTL twins, defensive - not currently rendered on any page */
.swiper.student-slider-rtl .owl-nav button.owl-prev,
.swiper.teacher-slider-rtl .owl-nav button.owl-prev {
	margin-right: 0;
	margin-left: 5px;
}
html[data-theme=dark] .swiper.student-slider .owl-nav button,
html[data-theme=dark] .swiper.teacher-slider .owl-nav button {
	background: #131022 !important;
	color: rgba(185, 183, 192, .502) !important;
}

/* ---- video-section: dim non-visible slides (was Owl's .item / .active .item) ---- */
.video-section .item {
	opacity: .4;
	transform: scale(.8);
	transition: .4s ease all;
}
.video-section .swiper-slide-visible .item {
	opacity: 1;
	transform: scale(1);
}
@media (max-width: 1000px) {
	.video-section .item {
		margin: 0;
		transform: scale(.9);
	}
}