/*
 * Makira Before/After Slider - frontend styles.
 *
 * Swiper's own bundled CSS (loaded as a dependency) handles the carousel
 * mechanics. This file covers everything Swiper doesn't know about: the
 * comparison reveal itself, labels, arrow positioning variants, and light
 * layout glue. Sizing/color for most elements comes from Elementor's own
 * generated CSS via the `selectors` on each control.
 */

.makira-bas {
	position: relative;
}

.makira-bas__viewport {
	width: 100%;
	--swiper-navigation-size: 40px;
}

/* Hide Swiper's own default ::after icon glyphs - we render real icon
   markup inside .makira-bas__nav-prev/.makira-bas__nav-next instead, so it can
   be freely styled/swapped like any other icon control in this widget. */
.makira-bas .swiper-button-prev::after,
.makira-bas .swiper-button-next::after {
	content: '';
	display: none;
}

.makira-bas .swiper-slide {
	height: auto;
}

/* --- Equal Height vs natural aspect ratio --- */
.makira-bas--equal-height .makira-bas-compare {
	/* Height itself comes from the Area Height control (Style tab). */
}

.makira-bas--natural-height .makira-bas-compare {
	height: auto;
}

.makira-bas--natural-height .makira-bas-compare__img {
	position: relative;
	height: auto;
}

.makira-bas--natural-height .makira-bas-compare__after,
.makira-bas--natural-height .makira-bas-compare__before {
	position: relative;
	inset: auto;
}

.makira-bas--natural-height .makira-bas-compare__before {
	position: absolute;
	inset: 0;
}

.makira-bas-compare {
	position: relative;
	width: 100%;
	overflow: hidden;
	background: #ddd; /* visible while images load */
}

.makira-bas-compare__img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* --- Draggable mode: after image is the full-size base layer --- */
.makira-bas-compare__after {
	position: absolute;
	inset: 0;
	z-index: 1;
}

.makira-bas-compare__after .makira-bas-compare__img {
	width: 100%;
	height: 100%;
}

/* The before image is clipped to the current handle position via
   clip-path, applied on this wrapper so the <img> itself stays full-size
   and doesn't need to be repositioned. */
.makira-bas-compare__before {
	position: absolute;
	inset: 0;
	z-index: 2;
	clip-path: inset( 0 calc( 100% - var( --makira-bas-position, 50% ) ) 0 0 );
}

.makira-bas-compare__before .makira-bas-compare__img {
	width: 100%;
	height: 100%;
}

.makira-bas-compare__handle {
	position: absolute;
	top: 0;
	bottom: 0;
	left: var( --makira-bas-position, 50% );
	transform: translateX( -50% );
	z-index: 4;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: ew-resize;
	touch-action: none; /* required so pointer drag isn't hijacked by page scroll on touch */
	outline-offset: 4px;
}

.makira-bas-compare__handle-line {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 50%;
	width: 3px;
	transform: translateX( -50% );
	background-color: #fff;
	pointer-events: none;
}

.makira-bas-compare__handle-circle {
	position: relative;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background-color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 2px 8px rgba( 0, 0, 0, 0.25 );
	pointer-events: none;
}

.makira-bas-compare__handle-icon {
	display: inline-flex;
	line-height: 0;
	color: inherit;
}

/* --- Side-by-side mode: two static panes, no handle --- */
.makira-bas-compare--side-by-side {
	display: flex;
}

.makira-bas-compare__side {
	position: relative;
	flex: 1 1 0%;
	overflow: hidden;
}

/* --- Labels: pinned to a corner, always fully visible regardless of
   handle position (the standard, predictable pattern for this kind of
   widget - labels are UI chrome, not spatially clipped content).

   The background/color/font-size here are only fallback defaults for
   before any styling is applied - Elementor's own generated CSS (from
   the Label Background/Color/Typography controls) naturally overrides
   these the moment a value is set in the panel. Without a fallback
   background, white label text is invisible against light images. --- */
.makira-bas-label {
	position: absolute;
	z-index: 3;
	display: inline-block;
	line-height: 1.2;
	font-size: 13px;
	color: #fff;
	background: rgba( 0, 0, 0, 0.6 );
	padding: 4px 10px;
	border-radius: 3px;
	white-space: nowrap;
	pointer-events: none;
}

.makira-bas-label--top-left {
	top: 0;
	left: 0;
}

.makira-bas-label--top-center {
	top: 0;
	left: 50%;
	transform: translateX( -50% );
}

.makira-bas-label--top-right {
	top: 0;
	right: 0;
}

.makira-bas-label--bottom-left {
	bottom: 0;
	left: 0;
}

.makira-bas-label--bottom-center {
	bottom: 0;
	left: 50%;
	transform: translateX( -50% );
}

.makira-bas-label--bottom-right {
	bottom: 0;
	right: 0;
}

/* --- Thumbnail navigation: a second, smaller Swiper instance, linked to
   the main one via Swiper's Thumbs module in the JS. --- */
.makira-bas__thumbs-wrap {
	display: flex; /* alignment control sets justify-content here */
	width: 100%;
}

.makira-bas__thumbs {
	max-width: 100%;
	/* Swiper sizes this to its content when slidesPerView is 'auto', so
	   flex alignment on the wrapper above can take effect while there's
	   room; once thumbnails overflow, Swiper's own scrolling takes over
	   regardless of alignment. */
}

.makira-bas__thumb {
	width: 80px;
	height: 60px;
	flex-shrink: 0;
	overflow: hidden;
	cursor: pointer;
	transition:
		transform 200ms ease,
		opacity 200ms ease,
		border-color 200ms ease,
		box-shadow 200ms ease,
		background-color 200ms ease;
}

.makira-bas__thumb-img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	pointer-events: none;
}

/* --- Nav arrows: a real button box (background/border/shadow all
   styleable), positioned via the Position/Alignment/Offset controls. --- */
.makira-bas__nav-prev,
.makira-bas__nav-next {
	position: absolute;
	z-index: 4;
	width: var( --makira-bas-arrow-size, 40px );
	height: var( --makira-bas-arrow-size, 40px );
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	transition: background-color 200ms ease, border-color 200ms ease, color 200ms ease;
	margin: 0; /* Elementor's Offset controls add margin on top of this */
}

.makira-bas__nav-prev svg,
.makira-bas__nav-next svg {
	display: block;
}

/* Vertical alignment */
.makira-bas--arrows-valign-center .makira-bas__nav-prev,
.makira-bas--arrows-valign-center .makira-bas__nav-next {
	top: 50%;
	transform: translateY( -50% );
}

.makira-bas--arrows-valign-top .makira-bas__nav-prev,
.makira-bas--arrows-valign-top .makira-bas__nav-next {
	top: 0;
}

.makira-bas--arrows-valign-bottom .makira-bas__nav-prev,
.makira-bas--arrows-valign-bottom .makira-bas__nav-next {
	bottom: 0;
}

/* Horizontal position: inside the image area (Swiper's classic default). */
.makira-bas--arrows-inside .makira-bas__nav-prev {
	left: 10px;
}

.makira-bas--arrows-inside .makira-bas__nav-next {
	right: 10px;
}

/* Horizontal position: outside the image area entirely. */
.makira-bas--arrows-outside .makira-bas__nav-prev {
	left: 0;
	transform: translate( calc( -100% - 10px ), -50% );
}

.makira-bas--arrows-outside.makira-bas--arrows-valign-top .makira-bas__nav-prev,
.makira-bas--arrows-outside.makira-bas--arrows-valign-bottom .makira-bas__nav-prev {
	transform: translateX( calc( -100% - 10px ) );
}

.makira-bas--arrows-outside .makira-bas__nav-next {
	right: 0;
	transform: translate( calc( 100% + 10px ), -50% );
}

.makira-bas--arrows-outside.makira-bas--arrows-valign-top .makira-bas__nav-next,
.makira-bas--arrows-outside.makira-bas--arrows-valign-bottom .makira-bas__nav-next {
	transform: translateX( calc( 100% + 10px ) );
}

.makira-bas.swiper-button-disabled .makira-bas__nav-prev,
.makira-bas .swiper-button-prev.swiper-button-disabled,
.makira-bas .swiper-button-next.swiper-button-disabled {
	opacity: 0.35;
	cursor: default;
	pointer-events: none;
}