/*!
 * SF BA Slider - frontend styles.
 * License: GPL-2.0-or-later
 *
 * Everything is scoped under .sf-ba / .sf-ba__* / .sf-ba--* / .sf-ba-placeholder /
 * .sf-ba-source*. The tokens below equal the plugin defaults. PHP prints the global
 * settings as `.sf-ba{--sf-ba-...}` (wp_add_inline_style) and per-instance overrides as
 * an inline style on the root. Lengths must always carry a unit ("0px", never "0"),
 * because several of them are used inside calc().
 *
 * Elementor widget: its Style tab writes the same variables as
 * `.elementor-{doc} .elementor-element.elementor-element-{id} .sf-ba{--sf-ba-...}` (0,4,0)
 * and its Typography control writes font-family/weight/style/transform/decoration/
 * line-height/letter-spacing/word-spacing on `... .sf-ba__label` (0,4,0). Here the
 * tokens are (0,0,0), the label typography is (0,2,0), no rule uses !important or a
 * `font` shorthand, so those controls always win. Font size stays --sf-ba-label-size
 * (the cqi shrink needs it).
 */

/* ------------------------------------------------------------------ *
 * 1. Tokens - zero specificity, so the global inline rule and the
 *    per-instance inline style always win regardless of load order.
 * ------------------------------------------------------------------ */
:where(.sf-ba) {
	--sf-ba-pos: 50%;
	--sf-ba-ratio: 16 / 9;
	--sf-ba-line-width: 3px;
	--sf-ba-line-color: #ffffff;
	--sf-ba-handle-size: 48px;
	--sf-ba-handle-bg: #ffffff;
	--sf-ba-handle-color: #111111;
	--sf-ba-handle-border-width: 0px;
	--sf-ba-handle-border-color: #ffffff;
	--sf-ba-border-width: 2px;
	--sf-ba-border-color: #ffffff;
	--sf-ba-radius: 0px;
	--sf-ba-label-color: #ffffff;
	--sf-ba-label-bg: rgba(0, 0, 0, 0.55);
	--sf-ba-label-size: 14px;
}

/* ------------------------------------------------------------------ *
 * 2. Root and frame
 * ------------------------------------------------------------------ */
.sf-ba {
	position: relative;
	display: block;
	width: 100%;
	max-width: 100%;
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	line-height: normal;
}

.sf-ba *,
.sf-ba *::before,
.sf-ba *::after {
	box-sizing: border-box;
}

.sf-ba__frame {
	position: relative;
	display: block;
	width: 100%;
	aspect-ratio: var(--sf-ba-ratio);
	margin: 0;
	padding: 0;
	overflow: hidden;
	border: 0 solid var(--sf-ba-border-color);
	border-radius: var(--sf-ba-radius);
	background: rgba(127, 127, 127, 0.12);
	background-clip: padding-box;
	/* Own stacking context: keeps the z-indexes below local and helps Safari
	   clip animated children to the rounded corners. */
	isolation: isolate;
	/* Query container for the label size (cqi units, see section 5). */
	container-type: inline-size;
	cursor: ew-resize;
	/* Vertical page scroll stays with the browser; horizontal moves come to JS.
	   Second declaration keeps pinch-zoom (accessibility) where supported; an
	   engine that rejects it keeps the first one. */
	touch-action: pan-y;
	touch-action: pan-y pinch-zoom;
	-webkit-user-select: none;
	user-select: none;
	-webkit-touch-callout: none;
	-webkit-tap-highlight-color: transparent;
}

/*
 * Elementor containers turn on flex-wrap on mobile (--flex-wrap-mobile). In a
 * wrapping column container the widget is sized at its max-content width before
 * its height is set; the slider has none (every layer is absolute), so the widget
 * collapsed to 0px height and the next element covered the slider. A definite
 * width fixes it, the same rule Elementor uses for its video and map widgets.
 * (0,2,0): Elementor's Custom width (0,3,0) still wins at every breakpoint.
 */
.e-con .elementor-widget-sf-ba-slider,
.e-con .elementor-widget-sf-ba-source {
	width: 100%;
}

/* The shortcode in a Shortcode widget. Own rule: an engine without :has() drops only this one. */
.e-con .elementor-widget-shortcode:where(:has(.sf-ba)) {
	width: 100%;
}

/* ------------------------------------------------------------------ *
 * 3. Image layers. "after" is the full bottom layer, "before" sits on
 *    top and is clipped from the right at --sf-ba-pos.
 * ------------------------------------------------------------------ */
.sf-ba__layer {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0;
	overflow: hidden;
	pointer-events: none;
}

.sf-ba__layer--after {
	z-index: 1;
}

.sf-ba__layer--before {
	z-index: 2;
	-webkit-clip-path: inset(0 calc(100% - var(--sf-ba-pos)) 0 0);
	clip-path: inset(0 calc(100% - var(--sf-ba-pos)) 0 0);
}

/*
 * Image plugins (Imagify, EWWW, WebP Express) wrap the <img> in <picture> and
 * move its class onto the <picture>, so never rely on img.sf-ba__img.
 * (0,2,1) beats the usual theme/builder rules such as `img{height:auto;max-width:100%}`
 * and Elementor's `.elementor img{...}` (0,1,1) without !important.
 */
.sf-ba .sf-ba__layer picture {
	position: absolute;
	top: 0;
	left: 0;
	display: block;
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0;
}

.sf-ba .sf-ba__layer img {
	position: absolute;
	top: 0;
	left: 0;
	display: block;
	float: none;
	width: 100%;
	height: 100%;
	min-width: 0;
	min-height: 0;
	max-width: none;
	max-height: none;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	box-shadow: none;
	object-fit: cover;
	object-position: 50% 50%;
	vertical-align: top;
	pointer-events: none;
	-webkit-user-select: none;
	user-select: none;
	-webkit-user-drag: none;
	-webkit-touch-callout: none;
}

/* ------------------------------------------------------------------ *
 * 4. Divider line
 * ------------------------------------------------------------------ */
.sf-ba .sf-ba__line {
	position: absolute;
	z-index: 4;
	top: 0;
	bottom: 0;
	left: var(--sf-ba-pos);
	width: var(--sf-ba-line-width);
	margin: 0;
	padding: 0;
	border: 0;
	background: var(--sf-ba-line-color);
	transform: translateX(-50%);
	/* drop-shadow follows the painted dashes/dots, keeps a white line visible on bright images. */
	filter: drop-shadow(0 0 1px rgba(0, 0, 0, 0.35));
	pointer-events: none;
}

/* One dash period = 1em; font-size is only used as a scalable length unit here. */
.sf-ba--line-dashed .sf-ba__line {
	font-size: max(10px, calc(var(--sf-ba-line-width) * 4));
	background: repeating-linear-gradient(to bottom, var(--sf-ba-line-color) 0 0.6em, transparent 0.6em 1em);
}

.sf-ba--line-dotted .sf-ba__line {
	background: radial-gradient(circle closest-side, var(--sf-ba-line-color) 85%, transparent 100%) 50% 0 / 100% max(4px, calc(var(--sf-ba-line-width) * 2)) repeat-y;
}

/* Marching ants on the line: a taller striped layer slides down by exactly one
   period (1em) and loops. Transform-only, so it runs on the compositor. */
.sf-ba--line-ants .sf-ba__line {
	overflow: hidden;
	background: none;
}

.sf-ba--line-ants .sf-ba__line::before {
	content: "";
	position: absolute;
	top: -1em;
	right: 0;
	bottom: 0;
	left: 0;
	font-size: max(12px, calc(var(--sf-ba-line-width) * 4));
	background: repeating-linear-gradient(to bottom, var(--sf-ba-line-color) 0 0.6em, transparent 0.6em 1em);
	animation: sf-ba-line-march 0.7s linear infinite;
}

@keyframes sf-ba-line-march {
	to {
		transform: translateY(1em);
	}
}

/* ------------------------------------------------------------------ *
 * 5. Labels ("before" at the left edge, "after" at the right edge).
 *    Longhands only, (0,2,0): the Elementor Typography control (0,4,0)
 *    overrides any of them. Never add a `font` shorthand here.
 * ------------------------------------------------------------------ */
.sf-ba .sf-ba__label {
	position: absolute;
	z-index: 3;
	/* Offset grows with the corner radius so labels never sit in a rounded corner. */
	top: max(0.85em, calc(var(--sf-ba-radius) * 0.3));
	bottom: auto;
	display: block;
	max-width: calc(50% - 2em);
	margin: 0;
	padding: 0.35em 0.75em;
	border: 0;
	border-radius: 0.3em;
	background: var(--sf-ba-label-bg);
	color: var(--sf-ba-label-color);
	font-family: inherit;
	font-size: var(--sf-ba-label-size);
	font-style: normal;
	font-weight: 600;
	line-height: 1.2;
	letter-spacing: 0.02em;
	text-transform: none;
	text-decoration: none;
	text-shadow: none;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	pointer-events: none;
	opacity: 1;
	transition: opacity 0.2s ease;
}

/* Shrink with the slider width (not the viewport). Guarded by @supports because a
   declaration containing var() cannot fall back to an earlier declaration. */
@supports (width: 1cqi) {
	.sf-ba .sf-ba__label {
		font-size: clamp(10px, calc(2.6cqi + 3px), var(--sf-ba-label-size));
	}
}

.sf-ba .sf-ba__label--before {
	right: auto;
	left: max(0.85em, calc(var(--sf-ba-radius) * 0.3));
}

.sf-ba .sf-ba__label--after {
	right: max(0.85em, calc(var(--sf-ba-radius) * 0.3));
	left: auto;
}

.sf-ba--labels-middle .sf-ba__label {
	top: 50%;
	transform: translateY(-50%);
}

.sf-ba--labels-bottom .sf-ba__label {
	top: auto;
	bottom: max(0.85em, calc(var(--sf-ba-radius) * 0.3));
}

/* State rules are one step stronger than base and modifier rules (0,2,0). */
.sf-ba .sf-ba__label.sf-ba__label--covered {
	opacity: 0;
}

.sf-ba.sf-ba--labels-hidden .sf-ba__label {
	display: none;
}

/* ------------------------------------------------------------------ *
 * 6. Handle (role="slider"). Shape classes re-point --sf-ba-hw / --sf-ba-hh.
 * ------------------------------------------------------------------ */
.sf-ba .sf-ba__handle {
	--sf-ba-hw: var(--sf-ba-handle-size);
	--sf-ba-hh: var(--sf-ba-handle-size);
	position: absolute;
	z-index: 5;
	top: 50%;
	left: var(--sf-ba-pos);
	display: flex;
	align-items: center;
	justify-content: center;
	width: var(--sf-ba-hw);
	height: var(--sf-ba-hh);
	margin: 0;
	padding: 0;
	border: var(--sf-ba-handle-border-width) solid var(--sf-ba-handle-border-color);
	border-radius: 50%;
	background: var(--sf-ba-handle-bg);
	color: var(--sf-ba-handle-color);
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25), 0 4px 14px rgba(0, 0, 0, 0.2);
	font: inherit;
	line-height: 1;
	text-transform: none;
	letter-spacing: normal;
	-webkit-appearance: none;
	appearance: none;
	transform: translate(-50%, -50%);
	cursor: grab;
	/* A touch that starts on the handle is always a drag, never a page scroll. */
	touch-action: none;
}

/* Invisible hit area: at least 44x44 px even for small or "none" handles.
   Offsets are relative to the padding box, hence the extra -10px (max border width). */
.sf-ba .sf-ba__handle::before {
	content: "";
	position: absolute;
	top: min(-6px, calc((var(--sf-ba-hh) - 44px) / 2 - 10px));
	right: min(-6px, calc((var(--sf-ba-hw) - 44px) / 2 - 10px));
	bottom: min(-6px, calc((var(--sf-ba-hh) - 44px) / 2 - 10px));
	left: min(-6px, calc((var(--sf-ba-hw) - 44px) / 2 - 10px));
	border-radius: inherit;
}

.sf-ba--handle-square .sf-ba__handle {
	border-radius: 0;
}

.sf-ba--handle-rounded .sf-ba__handle {
	border-radius: 25%;
}

.sf-ba--handle-pill .sf-ba__handle {
	--sf-ba-hw: calc(var(--sf-ba-handle-size) * 1.5);
	--sf-ba-hh: calc(var(--sf-ba-handle-size) * 0.75);
	border-radius: 999px;
}

/* "none" = line only. The handle keeps its size (hit area + focus ring) but paints nothing. */
.sf-ba--handle-none .sf-ba__handle {
	border-color: transparent;
	background: transparent;
	box-shadow: none;
}

.sf-ba.sf-ba--dragging .sf-ba__frame,
.sf-ba.sf-ba--dragging .sf-ba__handle {
	cursor: grabbing;
}

/* Three-layer focus ring (dark 2px, white 3px outline, dark 2px) stays visible
   on any image and against any handle colour.
   Mouse/touch focus gets no ring; an engine without :focus-visible drops the
   first rule and keeps its default ring. */
.sf-ba .sf-ba__handle:focus:not(:focus-visible) {
	outline: none;
}

.sf-ba .sf-ba__handle:focus-visible {
	outline: 3px solid #ffffff;
	outline-offset: 2px;
	box-shadow: 0 0 0 2px #111111, 0 0 0 7px #111111;
}

/* Icon: a CSS mask filled with the handle colour. Arrows are the default. */
.sf-ba .sf-ba__icon {
	display: block;
	flex: none;
	width: calc(var(--sf-ba-handle-size) * 0.5);
	height: calc(var(--sf-ba-handle-size) * 0.5);
	margin: 0;
	padding: 0;
	background-color: currentColor;
	pointer-events: none;
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 6.5 3.5 12 9 17.5M15 6.5l5.5 5.5-5.5 5.5'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 6.5 3.5 12 9 17.5M15 6.5l5.5 5.5-5.5 5.5'/%3E%3C/svg%3E");
	-webkit-mask-position: center;
	mask-position: center;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-size: contain;
	mask-size: contain;
}

.sf-ba--icon-triangles .sf-ba__icon {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M10 6v12L3 12zM14 6v12l7-6z'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M10 6v12L3 12zM14 6v12l7-6z'/%3E%3C/svg%3E");
}

.sf-ba--icon-none .sf-ba__icon,
.sf-ba--handle-none .sf-ba__icon {
	display: none;
}

/* ------------------------------------------------------------------ *
 * 7. Border around the slider (drawn by the frame)
 * ------------------------------------------------------------------ */
.sf-ba--border-solid .sf-ba__frame {
	border-width: var(--sf-ba-border-width);
	border-style: solid;
}

.sf-ba--border-dashed .sf-ba__frame {
	border-width: var(--sf-ba-border-width);
	border-style: dashed;
}

.sf-ba--border-dotted .sf-ba__frame {
	border-width: var(--sf-ba-border-width);
	border-style: dotted;
}

/* "double" needs a width of 3px or more to show two lines. */
.sf-ba--border-double .sf-ba__frame {
	border-width: var(--sf-ba-border-width);
	border-style: double;
}

/*
 * Marching ants: the frame reserves a transparent border band and an SVG rect
 * strokes along its centre line. The SVG sits inset by half the border width with
 * overflow visible, so the stroke (centred on the rect edge) fills exactly the band
 * and follows the corner radius (rx/ry set by PHP and kept in sync by JS).
 * JS also sets pathLength so the dash pattern closes without a seam.
 */
.sf-ba__ants {
	display: none;
}

.sf-ba--border-ants .sf-ba__frame {
	border-width: var(--sf-ba-border-width);
	border-style: solid;
	border-color: transparent;
}

.sf-ba--border-ants > .sf-ba__ants {
	position: absolute;
	top: calc(var(--sf-ba-border-width) / 2);
	left: calc(var(--sf-ba-border-width) / 2);
	display: block;
	width: calc(100% - var(--sf-ba-border-width));
	height: calc(100% - var(--sf-ba-border-width));
	margin: 0;
	padding: 0;
	border: 0;
	overflow: visible;
	pointer-events: none;
}

/* Dash 8 + gap 6 = period 14. Keep in sync with ANT_PERIOD in sf-ba-slider.js. */
.sf-ba__ants-rect {
	fill: none;
	stroke: var(--sf-ba-border-color);
	stroke-width: var(--sf-ba-border-width);
	stroke-dasharray: 8 6;
	stroke-linecap: butt;
	animation: sf-ba-ants 0.8s linear infinite;
}

@keyframes sf-ba-ants {
	to {
		stroke-dashoffset: -14;
	}
}

/* ------------------------------------------------------------------ *
 * 8. Runtime states set by JS
 * ------------------------------------------------------------------ */
.sf-ba.sf-ba--animating .sf-ba__layer--before {
	transition: -webkit-clip-path 0.3s cubic-bezier(0.25, 0.8, 0.25, 1), clip-path 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.sf-ba.sf-ba--animating .sf-ba__line,
.sf-ba.sf-ba--animating .sf-ba__handle {
	transition: left 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}

/* Off-screen: pause the ants (JS toggles sf-ba--paused with an IntersectionObserver). */
.sf-ba.sf-ba--paused .sf-ba__ants-rect,
.sf-ba.sf-ba--paused .sf-ba__line::before {
	animation-play-state: paused;
}

@media (prefers-reduced-motion: reduce) {
	.sf-ba .sf-ba__ants-rect,
	.sf-ba.sf-ba--line-ants .sf-ba__line::before {
		animation: none;
	}

	.sf-ba.sf-ba.sf-ba--animating .sf-ba__layer--before,
	.sf-ba.sf-ba.sf-ba--animating .sf-ba__line,
	.sf-ba.sf-ba.sf-ba--animating .sf-ba__handle,
	.sf-ba.sf-ba .sf-ba__label {
		transition: none;
	}
}

@media (forced-colors: active) {
	.sf-ba .sf-ba__line {
		background: CanvasText;
		filter: none;
	}

	.sf-ba .sf-ba__handle {
		border: 2px solid CanvasText;
		background: Canvas;
	}

	.sf-ba .sf-ba__icon {
		background-color: CanvasText;
	}

	.sf-ba .sf-ba__handle:focus-visible {
		outline-color: Highlight;
	}

	.sf-ba .sf-ba__label {
		border: 1px solid CanvasText;
	}
}

/* ------------------------------------------------------------------ *
 * 9. Editor sample mode: no images chosen yet, Elementor editor/preview
 *    only. PHP renders the real slider with the two sample SVGs, adds
 *    the root class sf-ba--placeholder and a .sf-ba__hint badge. The badge
 *    sits on the side opposite the labels and never blocks dragging.
 * ------------------------------------------------------------------ */
.sf-ba.sf-ba--placeholder {
	outline: 2px dashed rgba(127, 127, 127, 0.7);
	outline-offset: 4px;
}

.sf-ba .sf-ba__hint {
	position: absolute;
	z-index: 1;
	top: auto;
	bottom: 0.9em;
	left: 50%;
	display: block;
	width: max-content;
	max-width: calc(100% - 2em);
	margin: 0;
	padding: 0.45em 0.9em;
	border: 0;
	border-radius: 999px;
	background: rgba(17, 17, 17, 0.82);
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
	color: #ffffff;
	font-family: inherit;
	font-size: 12px;
	font-style: normal;
	font-weight: 600;
	line-height: 1.35;
	letter-spacing: normal;
	text-align: center;
	text-transform: none;
	white-space: normal;
	transform: translateX(-50%);
	pointer-events: none;
}

.sf-ba--labels-middle .sf-ba__hint,
.sf-ba--labels-bottom .sf-ba__hint {
	top: 0.9em;
	bottom: auto;
}

/* Fallback box (optional): only if PHP ever needs a hint without a slider. */
.sf-ba-placeholder {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 0.35em;
	box-sizing: border-box;
	width: 100%;
	min-height: 160px;
	max-height: 360px;
	aspect-ratio: 16 / 9;
	margin: 0;
	padding: 1.5em;
	border: 2px dashed rgba(127, 127, 127, 0.6);
	border-radius: 6px;
	background: rgba(127, 127, 127, 0.08);
	color: inherit;
	font-size: 14px;
	line-height: 1.45;
	text-align: center;
}

.sf-ba-placeholder__title {
	display: block;
	font-size: 1.05em;
	font-weight: 600;
}

.sf-ba-placeholder__text {
	display: block;
	font-size: 1em;
	max-width: 36em;
	opacity: 0.8;
}

/* ------------------------------------------------------------------ *
 * 10. "SF Before/After images" widget (sf-ba-source): the editor card.
 *     PHP prints it only inside the Elementor editor; visitors get
 *     nothing. Own colours and system font, so it reads the same on any
 *     page background and never looks like page content.
 *     Base rules (0,1,0); element rules (0,2,0)/(0,2,1) beat theme and
 *     Elementor defaults such as `figure{margin}` and `.elementor img`.
 * ------------------------------------------------------------------ */
.sf-ba-source {
	display: block;
	box-sizing: border-box;
	width: 100%;
	max-width: 480px;
	margin: 0;
	padding: 10px 12px 12px;
	border: 1px dashed #8c9399;
	border-radius: 6px;
	background: #f6f7f7;
	color: #1f2124;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
	font-size: 13px;
	font-style: normal;
	font-weight: 400;
	line-height: 1.4;
	letter-spacing: normal;
	text-align: left;
	text-transform: none;
}

.sf-ba-source *,
.sf-ba-source *::before,
.sf-ba-source *::after {
	box-sizing: border-box;
}

.sf-ba-source .sf-ba-source__head {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 4px 8px;
	margin: 0 0 8px;
	padding: 0;
}

.sf-ba-source .sf-ba-source__title {
	display: block;
	font-size: 13px;
	font-weight: 600;
	line-height: 1.3;
}

.sf-ba-source .sf-ba-source__note {
	display: block;
	padding: 1px 8px;
	border-radius: 999px;
	background: #e3e5e8;
	color: #4d555d;
	font-size: 11px;
	font-weight: 500;
	line-height: 1.5;
	white-space: nowrap;
}

.sf-ba-source .sf-ba-source__warning {
	display: block;
	margin: 0 0 8px;
	padding: 6px 8px;
	border-left: 3px solid #b32d2e;
	background: #fcf0f1;
	color: #8a2424;
	font-size: 12px;
	font-weight: 500;
	line-height: 1.4;
}

.sf-ba-source .sf-ba-source__pair {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 8px;
	margin: 0;
	padding: 0;
}

.sf-ba-source .sf-ba-source__item {
	display: flex;
	flex-direction: column;
	gap: 4px;
	min-width: 0;
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
	font-style: normal;
}

.sf-ba-source .sf-ba-source__item img {
	display: block;
	float: none;
	width: 100%;
	max-width: none;
	height: auto;
	aspect-ratio: 16 / 10;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 4px;
	box-shadow: none;
	background: #e3e5e8;
	object-fit: cover;
	object-position: 50% 50%;
	opacity: 1;
}

.sf-ba-source .sf-ba-source__item figcaption {
	display: block;
	margin: 0;
	padding: 0;
	color: inherit;
	font-size: 12px;
	font-style: normal;
	font-weight: 500;
	line-height: 1.3;
	text-align: center;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

/* No image chosen yet: same 16:10 box as a thumbnail, with an image icon. */
.sf-ba-source .sf-ba-source__empty {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 4px;
	width: 100%;
	aspect-ratio: 16 / 10;
	margin: 0;
	padding: 6px;
	border: 1px dashed #8c9399;
	border-radius: 4px;
	background: #ffffff;
	color: #4d555d;
	font-size: 12px;
	font-weight: 500;
	line-height: 1.3;
	text-align: center;
}

.sf-ba-source .sf-ba-source__empty::before {
	content: "";
	display: block;
	flex: none;
	width: 22px;
	height: 22px;
	background-color: currentColor;
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='14' rx='2'/%3E%3Ccircle cx='9' cy='10' r='1.6'/%3E%3Cpath d='m21 16-5-5-8 8'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='14' rx='2'/%3E%3Ccircle cx='9' cy='10' r='1.6'/%3E%3Cpath d='m21 16-5-5-8 8'/%3E%3C/svg%3E");
	-webkit-mask-position: center;
	mask-position: center;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-size: contain;
	mask-size: contain;
}

@media (forced-colors: active) {
	.sf-ba-source .sf-ba-source__empty::before {
		background-color: CanvasText;
	}
}

/*
 * Frontend safety net: when a slider template feeds on the images, the images widget
 * renders nothing for visitors. Should Elementor still print an empty widget wrapper,
 * take it out of the layout (no margin, no flex/grid gap). A wrapper holding a slider
 * (1.1.1 standalone mode) or a card is never hidden, nor is any editor view
 * (.elementor-element-edit-mode). Engines without :has() drop the rule.
 */
.elementor-widget-sf-ba-source:not(.elementor-element-edit-mode):not(:has(.sf-ba, .sf-ba-source)) {
	display: none;
}

/* ------------------------------------------------------------------ *
 * 11. Standalone mode (1.1.1): on a page without a slider template the
 *     images widget renders the slider itself. In the editor only, PHP
 *     wraps it in .sf-ba-standalone with a badge; visitors get the bare
 *     slider. No visual styling beyond the badge and its spacing.
 * ------------------------------------------------------------------ */
.sf-ba-standalone {
	display: block;
	width: 100%;
	margin: 0;
	padding: 0;
}

/* Same visual family as .sf-ba-source__note; a smaller radius keeps a wrapped
   (two-line) badge tidy on narrow columns. */
.sf-ba-standalone .sf-ba-standalone__badge {
	display: block;
	box-sizing: border-box;
	width: fit-content;
	max-width: 100%;
	margin: 0 0 8px;
	padding: 1px 8px;
	border: 0;
	border-radius: 9px;
	background: #e3e5e8;
	color: #4d555d;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
	font-size: 11px;
	font-style: normal;
	font-weight: 500;
	line-height: 1.5;
	letter-spacing: normal;
	text-align: left;
	text-transform: none;
	white-space: normal;
	pointer-events: none;
}