/**
 * Majestic Before After Image - Main Stylesheet
 *
 * Replaces third-party twentytwenty.css + old mbai-elementor.css.
 * Pure CSS, no framework dependencies.
 *
 * Backwards compatibility: legacy .twentytwenty-* class names are kept as
 * aliases so custom CSS targeting v2 class names continues to work after
 * upgrading to v3. Both class names are output by the JS engine.
 *
 * @package MBAI
 */

/* ==========================================================================
   Core container & image layout
   ========================================================================== */

.mbai-before-after-wrap {
	width: 100%;
	display: block;
}

/* Alignment variants */
.mbai-align-wrap { display: block; width: 100%; }
.mbai-align-wrap.mbai-align-left   { text-align: left; }
.mbai-align-wrap.mbai-align-center { text-align: center; }
.mbai-align-wrap.mbai-align-right  { text-align: right; }

.mbai-wrapper {
	display: block;
	line-height: 0;
	width: 100%;
	text-align: inherit; /* honour alignment from .mbai-align-wrap */
}

.mbai-container {
	box-sizing: content-box;
	position: relative;
	display: inline-block; /* shrink-wrap to the before image so labels & divider match its size */
	overflow: hidden;
	user-select: none;
	-webkit-user-select: none;
	z-index: 0;
	max-width: 100%;
	vertical-align: top;
	text-align: left; /* reset so inner content isn't affected by alignment */
}

.mbai-container * {
	box-sizing: content-box;
}

/* Before image stays in normal flow so the container takes its real size. */
.mbai-container img.mbai-before {
	display: block;
	max-width: 100%;
	height: auto;
	position: relative;
	top: auto;
	left: auto;
}

/* After image is overlaid on top, matching the before image's box. */
.mbai-container img.mbai-after {
	display: block;
	max-width: 100%;
	height: auto;
	position: absolute;
	top: 0;
	left: 0;
}

/* ==========================================================================
   Before / After image z-index
   ========================================================================== */

.mbai-before { z-index: 20; }
.mbai-after  { z-index: 10; }

/* ==========================================================================
   Divider lines (::before / ::after pseudo-elements on the handle)
   ========================================================================== */

.mbai-horizontal .mbai-handle::before,
.mbai-horizontal .mbai-handle::after,
.mbai-vertical   .mbai-handle::before,
.mbai-vertical   .mbai-handle::after {
	content: " ";
	display: block;
	background: white;
	position: absolute;
	z-index: 30;
	box-shadow: 0 0 12px rgba(51, 51, 51, 0.5);
}

.mbai-horizontal .mbai-handle::before,
.mbai-horizontal .mbai-handle::after {
	width: 3px;
	height: 9999px;
	left: 50%;
	margin-left: -1.5px;
}

.mbai-vertical .mbai-handle::before,
.mbai-vertical .mbai-handle::after {
	width: 9999px;
	height: 3px;
	top: 50%;
	margin-top: -1.5px;
}

/* ==========================================================================
   Labels & Overlay
   ========================================================================== */

.mbai-before-label,
.mbai-after-label,
.mbai-overlay {
	position: absolute;
	top: 0;
	width: 100%;
	height: 100%;
}

.mbai-before-label,
.mbai-after-label {
	transition: opacity 0.5s;
	opacity: 0;
	z-index: 26; /* above overlay (25) so labels are always clickable/visible */
	pointer-events: none;
}

.mbai-before-label::before,
.mbai-after-label::before {
	content: attr(data-content);
	color: white;
	font-size: 13px;
	letter-spacing: 0.1em;
	position: absolute;
	background: rgba(0, 0, 0, 0.2);
	line-height: 38px;
	padding: 0 20px;
	border-radius: 2px;
}

/* Horizontal label positions */
.mbai-horizontal .mbai-before-label::before,
.mbai-horizontal .mbai-after-label::before {
	top: 50%;
	margin-top: -19px;
}

.mbai-horizontal .mbai-before-label::before { left: 10px; }
.mbai-horizontal .mbai-after-label::before  { right: 10px; }

/* Vertical label positions */
.mbai-vertical .mbai-before-label::before,
.mbai-vertical .mbai-after-label::before {
	left: 50%;
	margin-left: -45px;
	text-align: center;
	width: 90px;
}

.mbai-vertical .mbai-before-label::before { top: 10px; }
.mbai-vertical .mbai-after-label::before  { bottom: 10px; }

/* Overlay */
.mbai-overlay {
	transition: background 0.5s;
	background: rgba(0, 0, 0, 0);
	z-index: 25;
}

/* Labels show on hover — triggered by hovering the container, not the overlay */
.mbai-container:hover .mbai-before-label,
.mbai-container:hover .mbai-after-label {
	opacity: 1;
}

/* Overlay darkens on hover */
.mbai-overlay:hover,
.mbai-container:hover .mbai-overlay.overlay-enabled {
	background: rgba(0, 0, 0, 0.5);
}

/* Always-visible labels */
.mbai-labels-status-always .mbai-before-label,
.mbai-labels-status-always .mbai-after-label {
	opacity: 1;
}

/* Hide labels while actively dragging */
.mbai-container.active .mbai-before-label,
.mbai-container.active .mbai-after-label,
.mbai-container.active:hover .mbai-before-label,
.mbai-container.active:hover .mbai-after-label {
	opacity: 0 !important;
}

/* Clear overlay background while dragging */
.mbai-container.active .mbai-overlay {
	background: rgba(0, 0, 0, 0) !important;
}

/* Disabled overlay — no background at all */
.mbai-overlay.overlay-disabled {
	background: none !important;
	pointer-events: none;
}

/* ==========================================================================
   Handle
   ========================================================================== */

.mbai-handle {
	height: 38px;
	width: 38px;
	position: absolute;
	left: 50%;
	top: 50%;
	margin-left: -22px;
	margin-top: -22px;
	border: 3px solid white;
	border-radius: 1000px;
	box-shadow: 0 0 12px rgba(51, 51, 51, 0.5);
	z-index: 40;
	cursor: pointer;
	transform: translateZ(0); /* GPU layer */
}

/* Divider offsets from handle centre */
.mbai-horizontal .mbai-handle::before {
	bottom: 50%;
	margin-bottom: 22px;
	box-shadow: 0 3px 0 white, 0 0 12px rgba(51, 51, 51, 0.5);
}
.mbai-horizontal .mbai-handle::after {
	top: 50%;
	margin-top: 22px;
	box-shadow: 0 -3px 0 white, 0 0 12px rgba(51, 51, 51, 0.5);
}

.mbai-vertical .mbai-handle::before {
	left: 50%;
	margin-left: 22px;
	box-shadow: 3px 0 0 white, 0 0 12px rgba(51, 51, 51, 0.5);
}
.mbai-vertical .mbai-handle::after {
	right: 50%;
	margin-right: 22px;
	box-shadow: -3px 0 0 white, 0 0 12px rgba(51, 51, 51, 0.5);
}

/* ==========================================================================
   Arrow indicators
   ========================================================================== */

.mbai-left-arrow,
.mbai-right-arrow,
.mbai-up-arrow,
.mbai-down-arrow {
	width: 0;
	height: 0;
	border: 6px inset transparent;
	position: absolute;
}

/* Horizontal arrows */
.mbai-left-arrow,
.mbai-right-arrow {
	top: 50%;
	margin-top: -6px;
}

.mbai-left-arrow {
	border-right: 6px solid white;
	left: 50%;
	margin-left: -17px;
}

.mbai-right-arrow {
	border-left: 6px solid white;
	right: 50%;
	margin-right: -17px;
}

/* Vertical arrows */
.mbai-up-arrow,
.mbai-down-arrow {
	left: 50%;
	margin-left: -6px;
}

.mbai-up-arrow {
	border-bottom: 6px solid white;
	top: 50%;
	margin-top: -17px;
}

.mbai-down-arrow {
	border-top: 6px solid white;
	bottom: 50%;
	margin-bottom: -17px;
}

/* ==========================================================================
   Handle Styles (arrows)
   ========================================================================== */

/* Style 1 – default: white border, white arrows, no divider box-shadow */
.mbai-before-after-wrap.handle-type-arrows .mbai-horizontal .mbai-handle::before,
.mbai-before-after-wrap.handle-type-arrows .mbai-horizontal .mbai-handle::after {
	box-shadow: none;
}

/* Style 2 – white fill, dark arrows */
.mbai-before-after-wrap.handle-type-arrows.handle-style-2 .mbai-horizontal .mbai-handle,
.mbai-before-after-wrap.handle-type-arrows.handle-style-2 .mbai-vertical   .mbai-handle {
	background-color: #fff;
}

.mbai-before-after-wrap.handle-type-arrows.handle-style-2 .mbai-left-arrow  { border-right-color: #000; }
.mbai-before-after-wrap.handle-type-arrows.handle-style-2 .mbai-right-arrow { border-left-color:  #000; }
.mbai-before-after-wrap.handle-type-arrows.handle-style-2 .mbai-down-arrow  { border-top-color:   #000; }
.mbai-before-after-wrap.handle-type-arrows.handle-style-2 .mbai-up-arrow    { border-bottom-color:#000; }

/* Style 3 – square handle */
.mbai-before-after-wrap.handle-type-arrows.handle-style-3 .mbai-horizontal .mbai-handle,
.mbai-before-after-wrap.handle-type-arrows.handle-style-3 .mbai-vertical   .mbai-handle {
	border-radius: 0;
}

/* Style 4 – square + white fill + dark arrows */
.mbai-before-after-wrap.handle-type-arrows.handle-style-4 .mbai-horizontal .mbai-handle,
.mbai-before-after-wrap.handle-type-arrows.handle-style-4 .mbai-vertical   .mbai-handle {
	border-radius: 0;
	background-color: #fff;
}

.mbai-before-after-wrap.handle-type-arrows.handle-style-4 .mbai-left-arrow  { border-right-color: #000; }
.mbai-before-after-wrap.handle-type-arrows.handle-style-4 .mbai-right-arrow { border-left-color:  #000; }
.mbai-before-after-wrap.handle-type-arrows.handle-style-4 .mbai-down-arrow  { border-top-color:   #000; }
.mbai-before-after-wrap.handle-type-arrows.handle-style-4 .mbai-up-arrow    { border-bottom-color:#000; }

/* Style 5 – tall handle */
.mbai-before-after-wrap.handle-type-arrows.handle-style-5 .mbai-horizontal .mbai-handle          { height: 70px; }
.mbai-before-after-wrap.handle-type-arrows.handle-style-5 .mbai-horizontal .mbai-handle::before  { margin-bottom: 38px; }
.mbai-before-after-wrap.handle-type-arrows.handle-style-5 .mbai-horizontal .mbai-handle::after   { margin-top:    38px; }
.mbai-before-after-wrap.handle-type-arrows.handle-style-5 .mbai-vertical   .mbai-handle          { width: 70px; }
.mbai-before-after-wrap.handle-type-arrows.handle-style-5 .mbai-vertical   .mbai-handle::before  { margin-left:  35px; }
.mbai-before-after-wrap.handle-type-arrows.handle-style-5 .mbai-vertical   .mbai-handle::after   { margin-right: 35px; }

/* Style 6 – tall handle + white fill + dark arrows */
.mbai-before-after-wrap.handle-type-arrows.handle-style-6 .mbai-horizontal .mbai-handle,
.mbai-before-after-wrap.handle-type-arrows.handle-style-6 .mbai-vertical   .mbai-handle {
	background-color: #fff;
}

.mbai-before-after-wrap.handle-type-arrows.handle-style-6 .mbai-left-arrow  { border-right-color: #000; }
.mbai-before-after-wrap.handle-type-arrows.handle-style-6 .mbai-right-arrow { border-left-color:  #000; }
.mbai-before-after-wrap.handle-type-arrows.handle-style-6 .mbai-down-arrow  { border-top-color:   #000; }
.mbai-before-after-wrap.handle-type-arrows.handle-style-6 .mbai-up-arrow    { border-bottom-color:#000; }

.mbai-before-after-wrap.handle-type-arrows.handle-style-6 .mbai-horizontal .mbai-handle          { height: 70px; }
.mbai-before-after-wrap.handle-type-arrows.handle-style-6 .mbai-horizontal .mbai-handle::before  { margin-bottom: 38px; }
.mbai-before-after-wrap.handle-type-arrows.handle-style-6 .mbai-horizontal .mbai-handle::after   { margin-top:    38px; }
.mbai-before-after-wrap.handle-type-arrows.handle-style-6 .mbai-vertical   .mbai-handle          { width: 70px; }
.mbai-before-after-wrap.handle-type-arrows.handle-style-6 .mbai-vertical   .mbai-handle::before  { margin-left:  35px; }
.mbai-before-after-wrap.handle-type-arrows.handle-style-6 .mbai-vertical   .mbai-handle::after   { margin-right: 35px; }

/* ==========================================================================
   Handle Type: Text
   ========================================================================== */

.mbai-before-after-wrap.handle-type-text .mbai-horizontal .mbai-handle::before,
.mbai-before-after-wrap.handle-type-text .mbai-horizontal .mbai-handle::after {
	box-shadow: none;
}

.mbai-before-after-wrap.handle-type-text .mbai-handle {
	background-color: #fff;
	height: 50px;
	width: 50px;
	margin-left: -28px;
	margin-top: -28px;
}

.mbai-before-after-wrap.handle-type-text .mbai-handle-text {
	display: flex;
	justify-content: center;
	align-items: center;
	height: 50px;
	border-radius: 100%;
	text-align: center;
}

.mbai-before-after-wrap.handle-type-text .mbai-handle::before,
.mbai-before-after-wrap.handle-type-text .mbai-handle::after {
	z-index: -1;
}

.mbai-before-after-wrap.handle-type-text .mbai-horizontal .mbai-handle::before { margin-bottom: 28px; }
.mbai-before-after-wrap.handle-type-text .mbai-horizontal .mbai-handle::after  { margin-top:    28px; }
.mbai-before-after-wrap.handle-type-text .mbai-vertical   .mbai-handle::before { margin-left:   28px; }
.mbai-before-after-wrap.handle-type-text .mbai-vertical   .mbai-handle::after  { margin-right:  28px; }

/* ==========================================================================
   Slider Colour (line, circle/handle & arrows)

   Colours are driven by three CSS custom properties so they can be set both
   by a preset class (.mbai-color-white / .mbai-color-black) and by per-element
   custom colours passed as inline styles (Pro):
     --mbai-line-color   — the divider line
     --mbai-circle-color — the handle circle border (and fill for filled styles)
     --mbai-arrow-color  — the arrow glyphs

   Defaults to white. The text handle flips its text colour for contrast.
   ========================================================================== */

.mbai-before-after-wrap {
	--mbai-line-color: #fff;
	--mbai-circle-color: #fff;
	--mbai-arrow-color: #fff;
	--mbai-handle-text-color: #000;
}

.mbai-before-after-wrap.mbai-color-black {
	--mbai-line-color: #000;
	--mbai-circle-color: #000;
	--mbai-arrow-color: #000;
	--mbai-handle-text-color: #fff;
}

/* ---- Handle circle border ---- */
.mbai-before-after-wrap .mbai-handle {
	border-color: var( --mbai-circle-color );
}

/* ---- Divider lines ---- */
.mbai-before-after-wrap .mbai-horizontal .mbai-handle::before,
.mbai-before-after-wrap .mbai-horizontal .mbai-handle::after,
.mbai-before-after-wrap .mbai-vertical   .mbai-handle::before,
.mbai-before-after-wrap .mbai-vertical   .mbai-handle::after {
	background: var( --mbai-line-color );
}

/* Divider line continuation drawn either side of the handle. */
.mbai-before-after-wrap .mbai-horizontal .mbai-handle::before { box-shadow: 0 3px 0 var( --mbai-line-color ), 0 0 12px rgba(51, 51, 51, 0.5); }
.mbai-before-after-wrap .mbai-horizontal .mbai-handle::after  { box-shadow: 0 -3px 0 var( --mbai-line-color ), 0 0 12px rgba(51, 51, 51, 0.5); }
.mbai-before-after-wrap .mbai-vertical   .mbai-handle::before { box-shadow: 3px 0 0 var( --mbai-line-color ), 0 0 12px rgba(51, 51, 51, 0.5); }
.mbai-before-after-wrap .mbai-vertical   .mbai-handle::after  { box-shadow: -3px 0 0 var( --mbai-line-color ), 0 0 12px rgba(51, 51, 51, 0.5); }

/* Keep arrow style 1 lines clean (no shadow) on the horizontal axis. */
.mbai-before-after-wrap.handle-type-arrows .mbai-horizontal .mbai-handle::before,
.mbai-before-after-wrap.handle-type-arrows .mbai-horizontal .mbai-handle::after { box-shadow: none; }

/* ---- Arrow glyphs ---- */
.mbai-before-after-wrap .mbai-left-arrow  { border-right-color:  var( --mbai-arrow-color ); }
.mbai-before-after-wrap .mbai-right-arrow { border-left-color:   var( --mbai-arrow-color ); }
.mbai-before-after-wrap .mbai-up-arrow    { border-bottom-color: var( --mbai-arrow-color ); }
.mbai-before-after-wrap .mbai-down-arrow  { border-top-color:    var( --mbai-arrow-color ); }

/* ---- Text handle: circle fill follows circle colour, text flips for contrast ---- */
.mbai-before-after-wrap.handle-type-text .mbai-handle      { background-color: var( --mbai-circle-color ); }
.mbai-before-after-wrap.handle-type-text .mbai-handle-text { color: var( --mbai-handle-text-color ); }

/* ==========================================================================
   Three-image comparison (Pro)
   ========================================================================== */

/* Middle image sits between the two handles. */
.mbai-container img.mbai-middle {
	display: block;
	max-width: 100%;
	height: auto;
	position: absolute;
	top: 0;
	left: 0;
	z-index: 15; /* between before (20) and after (10) */
}

/* Middle label — centred horizontally, vertically centred. */
.mbai-middle-label {
	position: absolute;
	top: 0;
	width: 100%;
	height: 100%;
	pointer-events: none;
	z-index: 27;
	opacity: 0;
	transition: opacity 0.5s;
}

.mbai-container:hover .mbai-middle-label,
.mbai-labels-status-always .mbai-middle-label {
	opacity: 1;
}

/* Hide middle label while actively dragging (must come after the hover rule above) */
.mbai-container.active .mbai-middle-label,
.mbai-container.active:hover .mbai-middle-label {
	opacity: 0 !important;
}

.mbai-horizontal .mbai-middle-label::before {
	content: attr(data-content);
	color: white;
	font-size: 13px;
	letter-spacing: 0.1em;
	position: absolute;
	background: rgba(0,0,0,0.2);
	line-height: 38px;
	padding: 0 20px;
	border-radius: 2px;
	top: 50%;
	margin-top: -19px;
	left: 50%;
	transform: translateX(-50%);
}

/* Static middle-boundary divider line (three-image mode).
   Marks the right/bottom edge of the middle image zone.
   Same visual weight as the handle divider lines but has no drag circle. */
.mbai-middle-divider {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 35; /* above images, below handle */
	pointer-events: none;
}

/* Horizontal: a full-height vertical line */
.mbai-horizontal .mbai-middle-divider {
	width: 3px;
	height: 100%;
	margin-left: -1.5px;
	background: var( --mbai-line-color, #fff );
	box-shadow: 0 0 12px rgba(51, 51, 51, 0.5);
}

/* Vertical: a full-width horizontal line */
.mbai-vertical .mbai-middle-divider {
	width: 100%;
	height: 3px;
	margin-top: -1.5px;
	background: var( --mbai-line-color, #fff );
	box-shadow: 0 0 12px rgba(51, 51, 51, 0.5);
	top: auto;
	left: 0;
}

/* Second handle — identical styling, just an additional element. */
.mbai-handle-2 {
	z-index: 41; /* one above the first handle */
}

/* The second handle draws no divider lines — the middle image boundary
   is implied by the position of the handles themselves. */
.mbai-handle-2::before,
.mbai-handle-2::after,
.mbai-horizontal .mbai-handle-2::before,
.mbai-horizontal .mbai-handle-2::after,
.mbai-vertical   .mbai-handle-2::before,
.mbai-vertical   .mbai-handle-2::after,
.twentytwenty-horizontal .mbai-handle-2::before,
.twentytwenty-horizontal .mbai-handle-2::after,
.twentytwenty-vertical   .mbai-handle-2::before,
.twentytwenty-vertical   .mbai-handle-2::after {
	display: none !important;
	content: none !important;
	background: transparent !important;
	box-shadow: none !important;
	width: 0 !important;
	height: 0 !important;
}

/* Prevent + add cursor on middle button in builder. */
.mbai-add-middle-btn {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin-top: 6px;
	cursor: pointer;
	font-size: 13px;
	color: #2271b1;
	background: none;
	border: 1px dashed #2271b1;
	border-radius: 4px;
	padding: 4px 10px;
	transition: background 0.15s;
}
.mbai-add-middle-btn:hover { background: #f0f6fc; }

.mbai-before-after-wrap.mbai-template-rounded-sm   .mbai-container { border-radius: 6px; }
.mbai-before-after-wrap.mbai-template-rounded      .mbai-container { border-radius: 12px; }
.mbai-before-after-wrap.mbai-template-rounded-lg   .mbai-container { border-radius: 24px; }
.mbai-before-after-wrap.mbai-template-rounded-full .mbai-container { border-radius: 9999px; }

/* ==========================================================================
   Full-screen view (Pro)
   ========================================================================== */

/* The trigger button shown in the corner of the slider. */
.mbai-fullscreen-btn {
	position: absolute;
	top: var( --mbai-fs-btn-top, 10px );
	bottom: var( --mbai-fs-btn-bottom, auto );
	left: var( --mbai-fs-btn-left, auto );
	right: var( --mbai-fs-btn-right, 10px );
	z-index: 45;
	width: auto !important;
	height: auto !important;
	min-width: 0 !important;
	min-height: 0 !important;
	padding: 0 !important;
	margin: 0 !important;
	border: none !important;
	outline: none !important;
	border-radius: 0 !important;
	background: none !important;
	background-color: transparent !important;
	box-shadow: none !important;
	backdrop-filter: none !important;
	-webkit-backdrop-filter: none !important;
	-webkit-appearance: none !important;
	appearance: none !important;
	color: var( --mbai-fs-btn-color, #fff );
	cursor: pointer;
	display: flex !important;
	align-items: center;
	justify-content: center;
	transition: opacity 0.2s, transform 0.15s;
	opacity: 0;
	line-height: 1;
	font-size: 0;
}

.mbai-container:hover .mbai-fullscreen-btn,
.mbai-fullscreen-btn:focus,
.mbai-fullscreen-btn:focus-visible {
	opacity: 1;
	outline: none !important;
	box-shadow: none !important;
}

.mbai-fullscreen-btn:hover {
	transform: scale( 1.15 );
	opacity: 1;
}

.mbai-fullscreen-btn svg {
	display: block;
	width: var( --mbai-fs-btn-size, 34px );
	height: var( --mbai-fs-btn-size, 34px );
	fill: currentColor;
	filter: drop-shadow( 0 1px 3px rgba(0,0,0,0.8) );
	pointer-events: none;
}

/* The full-screen overlay container. */
.mbai-fullscreen-overlay {
	position: fixed;
	inset: 0;
	z-index: 999999;
	background: rgba( 0, 0, 0, 0.94 );
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 4vmin;
	box-sizing: border-box;
}

.mbai-fullscreen-overlay .mbai-fullscreen-stage {
	max-width: 96vw;
	max-height: 92vh;
	width: auto;
	display: flex;
	align-items: center;
	justify-content: center;
}

.mbai-fullscreen-overlay .mbai-before-after-wrap {
	width: auto;
	max-width: 96vw;
}

.mbai-fullscreen-overlay .mbai-container {
	max-width: 96vw;
	max-height: 92vh;
}

/* The before image stays in flow and sizes the container. */
.mbai-fullscreen-overlay .mbai-container img.mbai-before {
	max-height: 92vh;
	width: auto;
}

/* The overlaid after/middle images fill the container so they always match
   the before image's box exactly. Without this, a middle image whose source
   is smaller than the 92vh cap would render at its own (smaller) natural size
   and sit shifted in the top-left corner. */
.mbai-fullscreen-overlay .mbai-container img.mbai-after,
.mbai-fullscreen-overlay .mbai-container img.mbai-middle {
	width: 100%;
	height: 100%;
	max-width: none;
	max-height: none;
}

/* Close button in the overlay — mirrors the expand button's corner. */
.mbai-fullscreen-close {
	position: fixed;
	z-index: 1000000;
	width: auto !important;
	height: auto !important;
	min-width: 0 !important;
	min-height: 0 !important;
	padding: 0 !important;
	margin: 0 !important;
	border: none !important;
	outline: none !important;
	border-radius: 0 !important;
	background: none !important;
	background-color: transparent !important;
	box-shadow: none !important;
	-webkit-appearance: none !important;
	appearance: none !important;
	color: #fff;
	cursor: pointer;
	display: flex !important;
	align-items: center;
	justify-content: center;
	transition: opacity 0.2s, transform 0.15s;
	line-height: 1;
	font-size: 0;
	/* Default position: top-right */
	top: 16px;
	right: 20px;
	bottom: auto;
	left: auto;
}

/* Position variants. */
.mbai-fullscreen-close.mbai-close-top-left     { top: 16px;   left: 20px;  right: auto; bottom: auto; }
.mbai-fullscreen-close.mbai-close-top-right    { top: 16px;   right: 20px; left: auto;  bottom: auto; }
.mbai-fullscreen-close.mbai-close-bottom-left  { bottom: 20px; left: 20px;  right: auto; top: auto; }
.mbai-fullscreen-close.mbai-close-bottom-right { bottom: 20px; right: 20px; left: auto;  top: auto; }

.mbai-fullscreen-close:focus,
.mbai-fullscreen-close:focus-visible {
	outline: none !important;
	box-shadow: none !important;
}

.mbai-fullscreen-close:hover {
	transform: scale( 1.15 );
}

.mbai-fullscreen-close svg {
	display: block;
	pointer-events: none;
	filter: drop-shadow( 0 1px 3px rgba(0,0,0,0.8) );
}

/* Lock body scroll while the overlay is open. */
body.mbai-fullscreen-open {
	overflow: hidden;
}

/* ==========================================================================
   Backwards-compatibility aliases — .twentytwenty-* → .mbai-*
   Sites upgrading from v2 with custom CSS targeting twentytwenty class names
   will continue to work without any changes on their end.
   ========================================================================== */

/* Map legacy wrapper/container names */
.twentytwenty-wrapper { display: block; line-height: 0; }
.twentytwenty-container { box-sizing: content-box; position: relative; overflow: hidden; user-select: none; -webkit-user-select: none; z-index: 0; }
.twentytwenty-container * { box-sizing: content-box; }
.twentytwenty-container img { max-width: 100%; position: absolute; top: 0; left: 0; display: block; }

/* Image layers */
.twentytwenty-before { z-index: 20; }
.twentytwenty-after  { z-index: 10; }

/* Overlay */
.twentytwenty-overlay { transition: background 0.5s; background: rgba(0,0,0,0); z-index: 25; position: absolute; top: 0; width: 100%; height: 100%; }
.twentytwenty-overlay:hover { background: rgba(0,0,0,0.5); }
.twentytwenty-overlay:hover .twentytwenty-before-label,
.twentytwenty-overlay:hover .twentytwenty-after-label { opacity: 1; }
.twentytwenty-container.active .twentytwenty-overlay,
.twentytwenty-container.active .twentytwenty-overlay:hover { background: rgba(0,0,0,0); }
.twentytwenty-container.active .twentytwenty-overlay .twentytwenty-before-label,
.twentytwenty-container.active .twentytwenty-overlay .twentytwenty-after-label,
.twentytwenty-container.active .twentytwenty-overlay:hover .twentytwenty-before-label,
.twentytwenty-container.active .twentytwenty-overlay:hover .twentytwenty-after-label { opacity: 0; }
.twentytwenty-overlay.overlay-disabled { background: none !important; }

/* Labels */
.twentytwenty-before-label,
.twentytwenty-after-label { position: absolute; top: 0; width: 100%; height: 100%; transition: opacity 0.5s; opacity: 0; z-index: 26; pointer-events: none; }
.twentytwenty-before-label::before,
.twentytwenty-after-label::before { content: attr(data-content); color: white; font-size: 13px; letter-spacing: 0.1em; position: absolute; background: rgba(0,0,0,0.2); line-height: 38px; padding: 0 20px; border-radius: 2px; }
.twentytwenty-horizontal .twentytwenty-before-label::before,
.twentytwenty-horizontal .twentytwenty-after-label::before { top: 50%; margin-top: -19px; }
.twentytwenty-horizontal .twentytwenty-before-label::before { left: 10px; }
.twentytwenty-horizontal .twentytwenty-after-label::before  { right: 10px; }
.twentytwenty-vertical .twentytwenty-before-label::before,
.twentytwenty-vertical .twentytwenty-after-label::before { left: 50%; margin-left: -45px; text-align: center; width: 90px; }
.twentytwenty-vertical .twentytwenty-before-label::before { top: 10px; }
.twentytwenty-vertical .twentytwenty-after-label::before  { bottom: 10px; }
.twentytwenty-container:hover .twentytwenty-before-label,
.twentytwenty-container:hover .twentytwenty-after-label { opacity: 1; }
.twentytwenty-labels-status-always .twentytwenty-before-label,
.twentytwenty-labels-status-always .twentytwenty-after-label { opacity: 1; }
.twentytwenty-container.active .twentytwenty-before-label,
.twentytwenty-container.active .twentytwenty-after-label { opacity: 0; }

/* Handle */
.twentytwenty-handle { height: 38px; width: 38px; position: absolute; left: 50%; top: 50%; margin-left: -22px; margin-top: -22px; border: 3px solid white; border-radius: 1000px; box-shadow: 0 0 12px rgba(51,51,51,0.5); z-index: 40; cursor: pointer; transform: translateZ(0); }
.twentytwenty-horizontal .twentytwenty-handle::before,
.twentytwenty-horizontal .twentytwenty-handle::after,
.twentytwenty-vertical   .twentytwenty-handle::before,
.twentytwenty-vertical   .twentytwenty-handle::after { content: " "; display: block; background: white; position: absolute; z-index: 30; box-shadow: 0 0 12px rgba(51,51,51,0.5); }
.twentytwenty-horizontal .twentytwenty-handle::before,
.twentytwenty-horizontal .twentytwenty-handle::after { width: 3px; height: 9999px; left: 50%; margin-left: -1.5px; }
.twentytwenty-vertical .twentytwenty-handle::before,
.twentytwenty-vertical .twentytwenty-handle::after { width: 9999px; height: 3px; top: 50%; margin-top: -1.5px; }
.twentytwenty-horizontal .twentytwenty-handle::before { bottom: 50%; margin-bottom: 22px; box-shadow: 0 3px 0 white, 0 0 12px rgba(51,51,51,0.5); }
.twentytwenty-horizontal .twentytwenty-handle::after  { top: 50%; margin-top: 22px; box-shadow: 0 -3px 0 white, 0 0 12px rgba(51,51,51,0.5); }
.twentytwenty-vertical .twentytwenty-handle::before { left: 50%; margin-left: 22px; box-shadow: 3px 0 0 white, 0 0 12px rgba(51,51,51,0.5); }
.twentytwenty-vertical .twentytwenty-handle::after  { right: 50%; margin-right: 22px; box-shadow: -3px 0 0 white, 0 0 12px rgba(51,51,51,0.5); }

/* Arrows */
.twentytwenty-left-arrow, .twentytwenty-right-arrow, .twentytwenty-up-arrow, .twentytwenty-down-arrow { width: 0; height: 0; border: 6px inset transparent; position: absolute; }
.twentytwenty-left-arrow, .twentytwenty-right-arrow { top: 50%; margin-top: -6px; }
.twentytwenty-up-arrow, .twentytwenty-down-arrow { left: 50%; margin-left: -6px; }
.twentytwenty-left-arrow  { border-right: 6px solid white; left: 50%; margin-left: -17px; }
.twentytwenty-right-arrow { border-left:  6px solid white; right: 50%; margin-right: -17px; }
.twentytwenty-up-arrow    { border-bottom: 6px solid white; top: 50%; margin-top: -17px; }
.twentytwenty-down-arrow  { border-top:   6px solid white; bottom: 50%; margin-bottom: -17px; }

/* Handle text */
.twentytwenty-handle-text { display: flex; justify-content: center; align-items: center; height: 50px; border-radius: 100%; text-align: center; }

/* ==========================================================================
   WooCommerce integration
   ========================================================================== */

.mbai-woo-wrap {
	margin-top: 1em;
}

.mbai-woo-wrap .mbai-before-after-wrap {
	width: 100%;
}

/* Gallery mode — sits in WooCommerce's product image column.
   Reset the float/margins so it fills the column cleanly and the summary
   column lines up beside it the same way the default gallery would. */
.mbai-woo-location-gallery {
	margin-top: 0;
	margin-bottom: 1.5em;
	float: none;
}

.mbai-woo-location-gallery .mbai-before-after-wrap,
.mbai-woo-location-gallery .mbai-container {
	max-width: 100%;
}

/* Let the chosen image size determine the display size (capped to the
   column width). We intentionally do NOT force width:100% here, otherwise a
   small size like "thumbnail" would be stretched to full width and blur. */
.mbai-woo-location-gallery .mbai-container {
	display: inline-block;
}

/* Override WooCommerce/theme `.woocommerce-product-gallery img { width:100% }`
   so our images render at their real (chosen) size instead of being stretched. */
.mbai-woo-location-gallery .mbai-container img.mbai-before,
.mbai-woo-location-gallery .mbai-container img.mbai-after {
	width: auto;
	max-width: 100%;
	height: auto;
}

/* Alongside-gallery mode — injected as a slide inside the product gallery. */
.mbai-woo-location-alongside_gallery {
	margin: 0;
}

.mbai-woo-location-alongside_gallery .mbai-before-after-wrap,
.mbai-woo-location-alongside_gallery .mbai-container {
	max-width: 100%;
}

/* Fill the gallery slide width, matching WooCommerce's own gallery images. */
.mbai-woo-location-alongside_gallery .mbai-container {
	display: block;
	width: 100%;
}

.mbai-woo-location-alongside_gallery .mbai-container img.mbai-before {
	width: 100%;
}

.mbai-woo-location-alongside_gallery .mbai-container img.mbai-after {
	max-width: none;
}

/* Hide WooCommerce's zoom/lightbox trigger while our comparison slide is the
   active gallery slide (toggled from JS). */
.woocommerce-product-gallery.mbai-hide-zoom .woocommerce-product-gallery__trigger {
	display: none !important;
}

/* ---- Decorated gallery thumbnail ----
   A single overlay div covers the comparison's nav thumbnail and shows the
   "before" image + "after" image split, with a divider and handle. Covering
   the whole thumbnail keeps hover behaviour uniform.
   Purely decorative — the thumbnail is just gallery navigation. */
.flex-control-thumbs li.mbai-gallery-thumb {
	position: relative;
	overflow: hidden;
}

.mbai-thumb-overlay {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 2;
	pointer-events: none;
	/* Before image fills the whole overlay. */
	background-image: var( --mbai-before-thumb );
	background-size: cover;
	background-position: center;
	/* Match WooCommerce's default thumbnail opacity (inactive = .5). */
	opacity: 0.5;
}

/* Match WooCommerce: active or hovered thumbnail shows at full opacity. */
.flex-control-thumbs li img.flex-active ~ .mbai-thumb-overlay,
.flex-control-thumbs li:hover .mbai-thumb-overlay {
	opacity: 1;
}

/* ---- Horizontal split: after image on the right half ---- */
.mbai-thumb-overlay--split.mbai-thumb-overlay--horizontal::before {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	left: 50%;
	right: 0;
	background-image: var( --mbai-after-thumb );
	background-size: cover;
	background-position: right center;
	border-left: 2px solid #fff;
	box-shadow: -1px 0 3px rgba(0, 0, 0, 0.5);
}

/* ---- Vertical split: after image on the bottom half ---- */
.mbai-thumb-overlay--split.mbai-thumb-overlay--vertical::before {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	top: 50%;
	bottom: 0;
	background-image: var( --mbai-after-thumb );
	background-size: cover;
	background-position: center bottom;
	border-top: 2px solid #fff;
	box-shadow: 0 -1px 3px rgba(0, 0, 0, 0.5);
}

/* Handle circle in the centre (both orientations). */
.mbai-thumb-overlay::after {
	content: "";
	position: absolute;
	top: 50%;
	left: calc( 50% + 1px );
	width: 18px;
	height: 18px;
	margin: 0;
	transform: translate( -50%, -50% );
	border: 2px solid #fff;
	border-radius: 50%;
	background: rgba(0, 0, 0, 0.15);
	box-shadow: 0 0 3px rgba(0, 0, 0, 0.6);
	box-sizing: border-box;
}

/* Tiny arrow glyphs inside the handle circle. */
.mbai-thumb-handle-arrows {
	position: absolute;
	top: 50%;
	left: calc( 50% + 1px );
	transform: translate( -50%, -50% );
	z-index: 3;
	display: flex;
	align-items: center;
	gap: 4px;
	pointer-events: none;
}

.mbai-thumb-handle-arrows span {
	width: 0;
	height: 0;
	border: 2.5px solid transparent;
}

.mbai-thumb-handle-arrows .mbai-thumb-arrow-left  { border-right-color: #fff; }
.mbai-thumb-handle-arrows .mbai-thumb-arrow-right { border-left-color:  #fff; }

/* Vertical orientation: stack arrows and point up / down. */
.mbai-thumb-handle-arrows--vertical { flex-direction: column; }
.mbai-thumb-handle-arrows .mbai-thumb-arrow-up   { border-bottom-color: #fff; }
.mbai-thumb-handle-arrows .mbai-thumb-arrow-down { border-top-color:    #fff; }

/* Black variant arrows. */
.mbai-thumb-overlay--black .mbai-thumb-handle-arrows .mbai-thumb-arrow-left  { border-right-color: #000; }
.mbai-thumb-overlay--black .mbai-thumb-handle-arrows .mbai-thumb-arrow-right { border-left-color:  #000; }
.mbai-thumb-overlay--black .mbai-thumb-handle-arrows .mbai-thumb-arrow-up    { border-bottom-color: #000; }
.mbai-thumb-overlay--black .mbai-thumb-handle-arrows .mbai-thumb-arrow-down  { border-top-color:    #000; }

/* No after image: show a plain centred divider line over the before image. */
.mbai-thumb-overlay--horizontal:not(.mbai-thumb-overlay--split)::before {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	left: 50%;
	width: 2px;
	margin-left: -1px;
	background: #fff;
	box-shadow: 0 0 3px rgba(0, 0, 0, 0.6);
}

.mbai-thumb-overlay--vertical:not(.mbai-thumb-overlay--split)::before {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	top: 50%;
	height: 2px;
	margin-top: -1px;
	background: #fff;
	box-shadow: 0 0 3px rgba(0, 0, 0, 0.6);
}

/* ---- Black slider colour variant for the decorated gallery thumbnail ---- */
.mbai-thumb-overlay--black.mbai-thumb-overlay--split.mbai-thumb-overlay--horizontal::before {
	border-left-color: #000;
	box-shadow: -1px 0 3px rgba(255, 255, 255, 0.5);
}

.mbai-thumb-overlay--black.mbai-thumb-overlay--split.mbai-thumb-overlay--vertical::before {
	border-top-color: #000;
	box-shadow: 0 -1px 3px rgba(255, 255, 255, 0.5);
}

.mbai-thumb-overlay--black::after {
	border-color: #000;
	box-shadow: 0 0 3px rgba(255, 255, 255, 0.6);
}

.mbai-thumb-overlay--black.mbai-thumb-overlay--horizontal:not(.mbai-thumb-overlay--split)::before,
.mbai-thumb-overlay--black.mbai-thumb-overlay--vertical:not(.mbai-thumb-overlay--split)::before {
	background: #000;
	box-shadow: 0 0 3px rgba(255, 255, 255, 0.6);
}