/* =========================================================
   AP Image Slider — a standalone Avada Builder element.
   Fixed slide height, auto width per image (filmstrip style),
   drag/touch scroll, overlay prev/next arrows bottom-left —
   matches the reference "row of chairs" design.
   ========================================================= */

.ap-fs-slider {
	position: relative;
	width: 100%;
	box-sizing: border-box;
	overflow: visible; /* let the viewport below bleed past this box on the right */
}

.ap-fs-slider.ap-fs-slider--full-bleed {
	width: 100vw !important;
	max-width: 100vw !important;
	margin-left: calc(50% - 50vw) !important;
	margin-right: calc(50% - 50vw) !important;
}

.ap-fs-slider *,
.ap-fs-slider *::before,
.ap-fs-slider *::after {
	box-sizing: border-box;
}

.ap-fs-viewport {
	position: relative;
	width: 100%;
	overflow-x: auto;
	overflow-y: hidden;
	scroll-behavior: smooth;
	-webkit-overflow-scrolling: touch;
	cursor: grab;
	scrollbar-width: none;
	-ms-overflow-style: none;
}

/* Right-side overflow bleed: only applied when the slider is contained
   (full_width = "no"). The viewport itself is made physically wider
   than its column, anchored at the left, so the next slide isn't
   harshly clipped flush at the column's right border — it stays
   visible until it's actually scrolled past. Left edge is untouched.
   (In full-bleed mode the slider is already 100vw, so no extra bleed
   is needed.) */
.ap-fs-slider:not(.ap-fs-slider--full-bleed):not(.ap-fs-slider--bleed-right) .ap-fs-viewport {
	width: calc(100% + var(--ap-fs-right-bleed, 120px));
}

/* "Right edge to screen edge" mode: left edge stays put, right edge
   is sized in JS (frontend.js) to land exactly on the browser's right
   edge, however many columns/margins are in between. Hidden until
   that calculation is applied (see JS) so the "before" (natural
   width) state is never visible — no flash, no transition, it simply
   appears already correctly positioned. */
.ap-fs-slider--bleed-right .ap-fs-viewport {
	width: 100%;
}

.ap-fs-slider--bleed-right:not(.ap-fs-ready) {
	visibility: hidden;
}

.ap-fs-viewport--dragging {
	cursor: grabbing;
	scroll-behavior: auto;
	user-select: none;
	-webkit-user-select: none;
}

.ap-fs-viewport::-webkit-scrollbar {
	display: none;
	height: 0;
}

.ap-fs-track {
	display: flex !important;
	align-items: stretch;
	gap: var(--ap-fs-gap, 6px);
	height: var(--ap-fs-height, 520px);
	width: max-content;
}

.ap-fs-slide {
	flex: 0 0 auto;
	height: 100%;
}

.ap-fs-slide-img,
a.ap-fs-slide-link {
	display: block;
	height: 100%;
	width: auto;
}

.ap-fs-slide-img {
	height: 100% !important;
	width: auto !important;
	max-width: none !important;
	object-fit: cover;
	-webkit-user-drag: none;
	user-drag: none;
	pointer-events: none;
}

.ap-fs-nav {
	position: absolute;
	left: 24px;
	bottom: 24px;
	z-index: 5;
	display: flex;
	gap: 10px;
}

.ap-fs-arrow {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	padding: 0;
	border: none;
	background: transparent;
	color: #fff;
	cursor: pointer;
	filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.6));
	transition: opacity 0.2s ease, transform 0.15s ease;
}

.ap-fs-arrow:hover {
	opacity: 0.75;
}

.ap-fs-arrow:active {
	transform: scale(0.9);
}

.ap-fs-arrow:disabled {
	opacity: 0.3;
	cursor: default;
}

.ap-fs-arrow svg {
	pointer-events: none;
	width: 26px;
	height: auto;
}

@media (max-width: 767px) {
	.ap-fs-track {
		height: calc(var(--ap-fs-height, 520px) * 0.65);
	}
	.ap-fs-nav {
		left: 14px;
		bottom: 14px;
	}
	.ap-fs-arrow {
		width: 34px;
		height: 34px;
	}
	.ap-fs-slider:not(.ap-fs-slider--full-bleed):not(.ap-fs-slider--bleed-right) .ap-fs-viewport {
		width: calc(100% + min(var(--ap-fs-right-bleed, 120px), 40px));
	}
}