/* Before / After Gallery — frontend styles */

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

.bag {
	display: block;
	width: 100%;
	color: inherit;
}

.bag--empty {
	padding: 24px;
	border: 1px dashed currentColor;
	opacity: 0.6;
	text-align: center;
}

/* Tab strip — sits above the slider when manual tabs are enabled.
   The `.bag` prefix bumps specificity past theme rules like
   `.entry-content ul, .entry-content ol` which inject a default
   padding-left on every list. */
.bag .bag__tabs,
.bag__tabs {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 8px;
	margin: 0 auto 24px;
	padding: 0;
	list-style: none;
}
.bag__tab,
.bag__tab:hover,
.bag__tab:focus,
.bag__tab:active,
.bag__tab:focus-visible {
	border: 0 !important;
	outline: none;
	cursor: pointer;
}
.bag__tab {
	padding: 10px 20px;
	border-radius: 999px;
	background: #f2efe8;
	color: #5a6b66;
	font-size: 14px;
	font-weight: 500;
	line-height: 1;
	transition: background 0.15s ease, color 0.15s ease, transform 0.15s ease;
}
.bag__tab:hover {
	transform: translateY(-1px);
}
.bag__tab.is-active {
	background: #1a3a2e;
	color: #ffffff;
}
.bag__tab:focus-visible {
	box-shadow: 0 0 0 3px rgba(26, 58, 46, 0.25);
}

/* Stage (centers the active pair) */
.bag__stage {
	position: relative;
	margin: 0 auto;
	max-width: 800px;
	width: 100%;
}

/* Carousel mode — the ACTIVE pair sits in normal flow so the stage's
   height always equals the active pair's height (no white space below
   shorter pairs). Inactive pairs are lifted out of flow (absolute) and
   stacked at the top, hidden. When the active pair changes the JS runs a
   FLIP-style height animation on the stage so the height change is
   smooth instead of an instant jump.
   Tab filter still uses inline `display:none` to hide pairs that don't
   belong to the current tab. */
.bag:not(.bag--grid) .bag__pair {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	display: block;
	visibility: hidden;
	opacity: 0;
	pointer-events: none;
	/* Crossfade timing is kept in sync with the stage height transition
	   below so the fade and the resize finish together. */
	transition: opacity 0.45s cubic-bezier(0.4, 0, 0.2, 1);
}
.bag:not(.bag--grid) .bag__pair.is-active {
	position: relative;
	visibility: visible;
	opacity: 1;
	pointer-events: auto;
}
/* During an arrow / thumb navigation the JS slides the outgoing and
   incoming pairs horizontally (carousel style). Both participants carry
   this class while the slide runs: absolutely positioned, fully opaque
   (no crossfade — it's a pure slide), and transitioning `transform`.
   `transition` is set to transform-only so opacity snaps instead of
   fading. */
.bag:not(.bag--grid) .bag__pair.is-sliding {
	position: absolute;
	visibility: visible;
	opacity: 1;
	pointer-events: none;
	transition: transform 0.45s cubic-bezier(0.4, 0, 0.2, 1);
	will-change: transform;
}
/* While the JS is animating a height change between two pairs it pins an
   explicit pixel height on the stage and adds this class to transition
   it. Cleared again once the animation finishes (height returns to auto,
   tracking the active pair). */
.bag:not(.bag--grid) .bag__stage.is-height-animating {
	/* Smooth, symmetric ease — same duration & curve as the pair crossfade
	   so the resize and the fade move together as one motion. */
	transition: height 0.45s cubic-bezier(0.4, 0, 0.2, 1);
	overflow: hidden;
	will-change: height;
}

/* Grid view: lay out every pair in a CSS grid; each pair has its own slider.
   The actual `grid-template-columns` rule is written by Elementor at every
   configured breakpoint via the responsive `Columns` control's selectors map. */
.bag--grid .bag__stage {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--bag-grid-gap, 16px);
}
.bag--grid .bag__pair {
	display: block;
}
/* Inline display:none from the tab filter still wins over the grid default,
   so tab filtering inside grid view keeps working. */

/* Compare figure — its height comes from the AFTER image's natural
   proportions (the after image is in normal flow). No fixed aspect-ratio
   and no cropping: the whole image is always shown. For the before/after
   to line up, both images in a pair must share the same dimensions. */
.bag__compare {
	--start: 50%;
	--bag-badge-offset: 20px;
	position: relative;
	margin: 0;
	width: 100%;
	overflow: hidden;
	user-select: none;
	-webkit-user-select: none;
	touch-action: pan-y;
	background: #f2efe8;
	border-radius: 16px;
}

/* Images display in full — width fills the figure, height scales to the
   natural ratio. Nothing is cropped. */
.bag__img {
	display: block;
	width: 100%;
	height: auto;
	max-width: none;
	pointer-events: none;
	-webkit-user-drag: none;
}

.bag__before-wrap {
	position: absolute;
	inset: 0;
	/* Clip the right side instead of resizing the wrapper. Keeping the
	   wrapper at full figure size means the BEFORE image inside stays at
	   the same dimensions as the AFTER image — they overlap pixel-perfectly,
	   so the visible portion of BEFORE always aligns with AFTER regardless
	   of divider position. Bonus: `clip-path` is a compositor-only property,
	   so dragging the divider triggers no layout/paint — smooth on mobile. */
	clip-path: inset(0 calc(100% - var(--start)) 0 0);
	-webkit-clip-path: inset(0 calc(100% - var(--start)) 0 0);
}
/* The before image is laid over the full figure area. `object-fit:
   contain` guarantees the WHOLE before image is shown (never cropped);
   when before & after share the same dimensions it's an exact 1:1 fit
   with no letterboxing. */
.bag__before-wrap .bag__img--before {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	object-fit: contain;
	object-position: center;
}
/* AFTER image sits in normal flow — its natural height is what gives the
   figure its height. The BEFORE image above is absolutely overlaid on
   top of the exact same area. */
.bag__img--after {
	position: relative;
	z-index: 0;
}

/* Overlay tint — a per-pair hint layer that sits above the images and
   badges but below the drag handle. pointer-events:none so it never
   blocks the drag. JS adds `.is-touched` to the figure on first drag,
   which fades this pair's overlay out. The fade duration is driven by
   --bag-overlay-fade (set by the "Fade-out speed" control). */
.bag__overlay {
	position: absolute;
	inset: 0;
	z-index: 2;
	background: rgba(0, 0, 0, 0.35);
	pointer-events: none;
	opacity: 1;
	transition: opacity var(--bag-overlay-fade, 0.35s) ease;
}
.bag__compare.is-touched .bag__overlay {
	opacity: 0;
}

/* Handle — aggressive reset to override theme button styles (Astra etc. add a
   blue hover/focus background which would overlay the divider). */
.bag__handle,
.bag__handle:hover,
.bag__handle:focus,
.bag__handle:active,
.bag__handle:focus-visible,
.bag__handle:focus-within {
	background: transparent !important;
	background-color: transparent !important;
	background-image: none !important;
	border: 0 !important;
	box-shadow: none !important;
	outline: none !important;
	text-shadow: none !important;
	filter: none !important;
}
.bag__handle {
	--bag-handle-color: #c9a961;
	--bag-handle-line: 2px;
	--bag-handle-knob: 32px;
	--bag-knob-bg: #ffffff;

	position: absolute;
	top: 0;
	bottom: 0;
	left: var(--start);
	width: var(--bag-handle-knob);
	transform: translateX(-50%);
	padding: 0;
	margin: 0;
	cursor: ew-resize;
	z-index: 3;
	touch-action: none;
	-webkit-appearance: none;
	appearance: none;
	-webkit-tap-highlight-color: transparent;
}

.bag__handle-line {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 50%;
	width: var(--bag-handle-line);
	transform: translateX(-50%);
	background: var(--bag-handle-color);
}

.bag__handle-knob {
	position: absolute;
	top: 50%;
	left: 50%;
	width: var(--bag-handle-knob);
	height: var(--bag-handle-knob);
	transform: translate(-50%, -50%);
	background: var(--bag-knob-bg);
	/* Border width and color are independent CSS vars now. The color falls
	   back to the main handle color when the user hasn't overridden it. */
	border: var(--bag-knob-border-width, 2px) solid var(--bag-knob-border-color, var(--bag-handle-color));
	border-radius: 50%;
	transition: box-shadow 0.15s ease;
	display: flex;
	align-items: center;
	justify-content: center;
}
/* User-selected icons inside the knob — one slot on each side. Knob stays
   empty when neither icon is picked (no default chevrons). */
.bag__handle-icon {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: var(--bag-handle-icon-color, var(--bag-handle-color));
	font-size: var(--bag-handle-icon-size, 10px);
	line-height: 1;
	pointer-events: none;
}
.bag__handle-icon--left  { left: 18%; }
.bag__handle-icon--right { right: 18%; }
.bag__handle-icon i,
.bag__handle-icon svg {
	font-size: inherit;
	width: 1em;
	height: 1em;
	fill: currentColor;
	display: block;
}

/* Badges */
.bag__badge {
	position: absolute;
	top: var(--bag-badge-offset);
	z-index: 2;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	padding: 8px 18px;
	border-radius: 999px;
	/* Border defaults to invisible (0 width, transparent color). User can set
	   width and color from the Elementor controls. */
	border: var(--bag-badge-border-width, 0) solid var(--bag-badge-border-color, transparent);
	background: rgba(255, 255, 255, 0.95);
	color: #1a3a2e;
	pointer-events: none;
	transition: opacity 0.2s ease, border-color 0.15s ease;
}
.bag__badge--before {
	left: var(--bag-badge-offset);
}
.bag__badge--after {
	right: var(--bag-badge-offset);
}
/* The badge's `opacity` is set inline by JS as the divider moves, giving a
   smooth, continuous fade. The transition declared on .bag__badge above
   ensures non-drag opacity changes (e.g. on first init) also animate. */

/* Nav row */
.bag__nav {
	display: flex;
	align-items: center;
	gap: 16px;
	margin: 24px auto 0;
	max-width: 800px;
	width: 100%;
}

.bag__arrow {
	flex: 0 0 auto;
	width: 44px;
	height: 44px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	/* Border width is shared between prev and next; color is set per-button via
	   the --bag-arrow-prev/next-border-color vars. Defaults give an invisible
	   transparent border at 0 width (no layout impact when disabled). */
	border: var(--bag-arrow-border-width, 0) solid transparent;
	border-radius: 50%;
	/* Reset padding/margin so theme button styles can't push the icon off-center. */
	padding: 0;
	margin: 0;
	cursor: pointer;
	color: inherit;
	transition: transform 0.15s ease, opacity 0.15s ease, border-color 0.15s ease, background 0.15s ease;
	font-size: 18px;
	line-height: 1;
}
.bag__arrow--prev {
	border-color: var(--bag-arrow-prev-border-color, transparent);
}
.bag__arrow--next {
	border-color: var(--bag-arrow-next-border-color, transparent);
}
.bag__arrow svg {
	width: 1em;
	height: 1em;
	fill: currentColor;
	position: absolute;
}
.bag__arrow i {
	font-size: inherit;
	line-height: 1;
}
.bag__arrow--prev:hover {
	border-color: var(--bag-arrow-prev-border-hover-color, var(--bag-arrow-prev-border-color, transparent));
}
.bag__arrow--next:hover {
	border-color: var(--bag-arrow-next-border-hover-color, var(--bag-arrow-next-border-color, transparent));
}
.bag__arrow:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 3px;
}

/* Thumbnails — `.bag` prefix raises specificity over theme rules like
   `.entry-content ul, .entry-content ol` that add list padding-left. */
.bag .bag__thumbs,
.bag__thumbs {
	flex: 1 1 auto;
	display: flex;
	align-items: center;
	gap: 12px;
	list-style: none;
	margin: 0;
	padding: 0;
	overflow-x: auto;
	scroll-behavior: smooth;
	/* Hide the horizontal scrollbar — strip is navigated via arrows / active-thumb auto-scroll. */
	scrollbar-width: none;
	-ms-overflow-style: none;
}
/* Single-item mode (set by JS when only one thumb is visible — e.g. a tab
   with one pair). Center that lone thumb in the strip. We deliberately
   DON'T apply justify-content:center on the base rule, because when the
   strip overflows (multi-item carousel) it pushes flex content past the
   container's start edge — scrollIntoView({inline:'center'}) then can't
   actually reach the center, breaking the loop and leaving the active
   thumb left-aligned. */
.bag__thumbs.is-single {
	justify-content: center;
}
.bag__thumbs::-webkit-scrollbar {
	display: none;
	width: 0;
	height: 0;
}
.bag__thumbs > li {
	/* Width = (visible-width − total-gaps) / thumbs-per-view.
	   `--bag-thumbs-per-view` and `--bag-thumb-gap` are written by Elementor
	   controls per breakpoint. The trailing `- 1px` absorbs sub-pixel rounding
	   so the last thumb never gets cut off. */
	box-sizing: border-box;
	flex: 0 0 calc(
		(100% - var(--bag-thumb-gap, 12px) * (var(--bag-thumbs-per-view, 4) - 1) - 1px)
		/ var(--bag-thumbs-per-view, 4)
	);
	max-width: calc(
		(100% - var(--bag-thumb-gap, 12px) * (var(--bag-thumbs-per-view, 4) - 1) - 1px)
		/ var(--bag-thumbs-per-view, 4)
	);
	min-width: 0;
	margin: 0;
	padding: 0;
}

.bag__thumb {
	display: flex;
	align-items: stretch;
	width: 100%;
	height: 80px;
	padding: 0;
	/* All three states (default / hover / active) share the same border WIDTH
	   so the layout never shifts. Only the COLOR changes per state. The user
	   controls each color independently from the Elementor panel; default and
	   hover both fall back to transparent (no visible border) when unset. */
	border: var(--bag-thumb-active-width, 3px) solid var(--bag-thumb-default-color, transparent);
	background: #f2efe8;
	border-radius: 8px;
	overflow: hidden;
	cursor: pointer;
	transition: transform 0.15s ease, border-color 0.15s ease;
}
.bag__thumb:hover {
	border-color: var(--bag-thumb-hover-color, var(--bag-thumb-default-color, transparent));
}
/* Master "Enable thumbnail border" switch is OFF — force the border off in
   every state so even the layout-stabilizing transparent border is gone. */
.bag--no-thumb-border .bag__thumb,
.bag--no-thumb-border .bag__thumb:hover,
.bag--no-thumb-border .bag__thumb.is-active {
	border: 0 !important;
}
.bag__thumb img {
	display: block;
	width: 50%;
	height: 100%;
	object-fit: cover;
	pointer-events: none;
}
.bag__thumb img + img {
	border-left: 1px solid rgba(255, 255, 255, 0.6);
}
.bag__thumb.is-active {
	/* Border (not outline) — colored only when active. The transparent border
	   on the base .bag__thumb keeps the size constant. */
	border-color: var(--bag-thumb-active-color, #1a3a2e);
}
/* During the loop's silent jump the active class hops instantly between
   thumbs; JS adds this class so the border-color change is instant too
   (no 0.15s fade-in/out glitch on the wrapped-around active thumb). */
.bag__thumbs.bag-thumbs--no-transition .bag__thumb {
	transition: none !important;
}

/* Responsive */
@media (max-width: 600px) {
	.bag__nav {
		gap: 8px;
	}
	.bag__badge {
		font-size: 10px;
		padding: 6px 12px;
	}
	.bag__compare {
		--bag-badge-offset: 12px;
	}
}