/**
 * Aproxian Section Slider
 * All colours, sizes and offsets are driven by Elementor controls.
 */

.apxss {
	--apxss-per-view: 1;
	--apxss-gap: 0px;
	--apxss-speed: 700ms;
	--apxss-easing: cubic-bezier(0.25, 0.46, 0.45, 0.94);
	--apxss-arrow-offset-x: 24px;
	--apxss-arrow-offset-y: 0px;
	--apxss-arrow-scale: 1;
	--apxss-arrow-icon: 18px;
	/* Button size follows the icon unless the Button size control overrides it. */
	--apxss-arrow-box: calc(var(--apxss-arrow-icon) * 2.9);
	--apxss-dot-size: 10px;
	--apxss-dot-active-width: 34px;
	--apxss-pagination-offset: 24px;
	position: relative;
}

.apxss__viewport {
	position: relative;
	overflow: hidden;
	width: 100%;
}

.apxss__track {
	display: flex;
	align-items: stretch;
	will-change: transform;
	backface-visibility: hidden;
}

.apxss__slide {
	position: relative;
	flex: 0 0 auto;
	min-width: 0;
	width: calc((100% - (var(--apxss-per-view) - 1) * var(--apxss-gap)) / var(--apxss-per-view));
	margin-right: var(--apxss-gap);
}

.apxss__slide-inner {
	height: 100%;
}

/* Elementor containers rendered inside a slide should fill it. */
.apxss__slide-inner > .elementor-element,
.apxss__slide-inner > .elementor,
.apxss__slide-inner > .elementor > .elementor-element {
	width: 100%;
}

/* --------------------------------------------------------------------- */
/* Fade effect                                                           */
/* --------------------------------------------------------------------- */

.apxss--effect-fade .apxss__track {
	display: grid;
	grid-template-columns: 100%;
}

.apxss--effect-fade .apxss__slide {
	grid-area: 1 / 1 / 2 / 2;
	width: 100%;
	margin-right: 0;
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transition: opacity var(--apxss-speed) var(--apxss-easing), visibility 0s linear var(--apxss-speed);
}

.apxss--effect-fade .apxss__slide.is-active {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
	z-index: 2;
	transition-delay: 0s;
}

/* --------------------------------------------------------------------- */
/* Dragging                                                              */
/* --------------------------------------------------------------------- */

.apxss--draggable .apxss__viewport {
	touch-action: pan-y;
	cursor: grab;
}

.apxss--dragging .apxss__viewport {
	cursor: grabbing;
}

.apxss--dragging .apxss__slide a,
.apxss--dragging .apxss__slide button {
	pointer-events: none;
}

.apxss--dragging * {
	user-select: none;
}

/* --------------------------------------------------------------------- */
/* Controls row                                                          */
/* --------------------------------------------------------------------- */

.apxss__controls {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 16px;
}

/*
 * When arrows sit over or outside the slides they are absolutely positioned,
 * so this row has no in-flow children and already collapses to zero height.
 * It must NOT be set to display:none — that removes the whole subtree from the
 * box tree, arrows included, which is exactly how they vanish when pagination
 * is turned off.
 */
.apxss--arrows-inside .apxss__controls,
.apxss--arrows-outside .apxss__controls {
	gap: 0;
	min-height: 0;
}

/* --------------------------------------------------------------------- */
/* Control reset                                                         */
/* --------------------------------------------------------------------- */

/*
 * Themes routinely style bare <button> elements, sometimes at a specificity
 * that outranks any sane plugin selector (e.g. `.elementor .widget button`).
 * The properties below are locked because no Elementor control in this widget
 * writes them — every style control writes either a CSS variable or a property
 * absent from this list, so the Style tab keeps full authority.
 */
.apxss .apxss__arrow,
.apxss .apxss__dot {
	-webkit-appearance: none !important;
	appearance: none !important;
	box-sizing: border-box !important;
	padding: 0 !important;
	margin: 0 !important;
	flex: 0 0 auto !important;
	background-image: none !important;
	text-shadow: none !important;
	float: none !important;
	position: relative;
}

/* Typography is locked on arrows only: they carry an icon, never text. Dots
   can show numbers, so the Pagination typography control must stay in charge. */
.apxss .apxss__arrow {
	font-family: inherit !important;
	line-height: 1 !important;
	letter-spacing: normal !important;
	text-transform: none !important;
	text-decoration: none !important;
}

.apxss .apxss__dot {
	line-height: 1;
	text-decoration: none;
}

.apxss .apxss__arrow::before,
.apxss .apxss__arrow::after,
.apxss .apxss__dot::before,
.apxss .apxss__dot::after {
	display: none !important;
	content: none !important;
}

/* --------------------------------------------------------------------- */
/* Arrows                                                                */
/* --------------------------------------------------------------------- */

.apxss .apxss__arrow {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	box-sizing: border-box;
	/*
	 * Width and height are pinned from the same variable, and min/max repeat it
	 * so the icon inside can never stretch the box into an ellipse.
	 */
	width: var(--apxss-arrow-box) !important;
	height: var(--apxss-arrow-box) !important;
	min-width: var(--apxss-arrow-box) !important;
	min-height: var(--apxss-arrow-box) !important;
	max-width: var(--apxss-arrow-box) !important;
	max-height: var(--apxss-arrow-box) !important;
	aspect-ratio: 1 / 1;
	padding: 0;
	margin: 0;
	border: none;
	background: rgba(0, 0, 0, 0.35);
	color: #fff;
	font-size: var(--apxss-arrow-icon) !important;
	line-height: 1;
	overflow: hidden;
	cursor: pointer;
	border-radius: 50%;
	transition-property: background-color, color, border-color, opacity, transform, box-shadow;
	transition-duration: 250ms;
	transition-timing-function: ease;
	transform: scale(var(--apxss-arrow-scale));
	z-index: 5;
}

/* The icon is sized purely in em, so it scales with the button's font-size
   without ever contributing to the button's own layout size. */
.apxss .apxss__arrow > svg,
.apxss .apxss__arrow svg {
	width: 1em;
	height: 1em;
	flex: 0 0 auto;
	display: block;
	fill: currentColor;
}

.apxss .apxss__arrow > i,
.apxss .apxss__arrow i {
	font-size: 1em;
	line-height: 1;
	width: auto;
	height: auto;
	flex: 0 0 auto;
	margin: 0;
	padding: 0;
}

.apxss__arrow:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 3px;
}

.apxss__arrow.is-disabled {
	cursor: default;
	opacity: 0.35;
}

/* Inside / outside placements pin the arrows to the slider box. */
.apxss--arrows-inside .apxss__arrow,
.apxss--arrows-outside .apxss__arrow {
	position: absolute;
	top: 50%;
	transform: translateY(calc(-50% + var(--apxss-arrow-offset-y))) scale(var(--apxss-arrow-scale));
}

.apxss--arrows-inside .apxss__arrow--prev {
	left: var(--apxss-arrow-offset-x);
}

.apxss--arrows-inside .apxss__arrow--next {
	right: var(--apxss-arrow-offset-x);
}

.apxss--arrows-outside .apxss__arrow--prev {
	right: calc(100% + var(--apxss-arrow-offset-x));
}

.apxss--arrows-outside .apxss__arrow--next {
	left: calc(100% + var(--apxss-arrow-offset-x));
}

.apxss--arrows-on-hover .apxss__arrow {
	opacity: 0;
	visibility: hidden;
}

.apxss--arrows-on-hover:hover .apxss__arrow,
.apxss--arrows-on-hover:focus-within .apxss__arrow {
	opacity: 1;
	visibility: visible;
}

.apxss--arrows-on-hover .apxss__arrow.is-disabled {
	opacity: 0;
}

.apxss--arrows-on-hover:hover .apxss__arrow.is-disabled,
.apxss--arrows-on-hover:focus-within .apxss__arrow.is-disabled {
	opacity: 0.35;
}

/* --------------------------------------------------------------------- */
/* Pagination                                                            */
/* --------------------------------------------------------------------- */

.apxss__pagination {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
	gap: 10px;
	line-height: 1;
}

.apxss--pagination-inside .apxss__pagination {
	position: absolute;
	left: 0;
	right: 0;
	bottom: var(--apxss-pagination-offset);
	z-index: 5;
}

.apxss--pagination-outside .apxss__pagination {
	margin-top: var(--apxss-pagination-offset);
}

.apxss--arrows-below .apxss__pagination {
	position: static;
	margin-top: 0;
}

.apxss--arrows-below .apxss__controls {
	margin-top: var(--apxss-pagination-offset);
}

.apxss .apxss__dot {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: var(--apxss-dot-size) !important;
	height: var(--apxss-dot-size) !important;
	min-width: 0 !important;
	min-height: 0 !important;
	border: none;
	background: rgba(255, 255, 255, 0.4);
	border-radius: 50%;
	cursor: pointer;
	transition: background-color 250ms ease, width 350ms var(--apxss-easing), border-color 250ms ease, color 250ms ease;
}

.apxss .apxss__dot.is-active {
	width: var(--apxss-dot-active-width, var(--apxss-dot-size)) !important;
}

.apxss .apxss__pagination--numbers .apxss__dot {
	width: auto !important;
	height: auto !important;
	min-width: 2.2em !important;
	padding: 0.45em 0.7em !important;
	background: transparent;
	color: #fff;
	font-size: 14px;
}

.apxss .apxss__pagination--numbers .apxss__dot.is-active {
	width: auto !important;
}

.apxss__dot:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 3px;
}

.apxss__fraction {
	font-size: 14px;
	letter-spacing: 0.04em;
	color: rgba(255, 255, 255, 0.6);
}

.apxss__fraction .apxss__current {
	color: #fff;
}

/* --------------------------------------------------------------------- */
/* Autoplay progress bar                                                 */
/* --------------------------------------------------------------------- */

.apxss__progress {
	position: absolute;
	left: 0;
	right: 0;
	height: 4px;
	background: rgba(255, 255, 255, 0.25);
	overflow: hidden;
	z-index: 6;
	pointer-events: none;
}

.apxss--progress-top .apxss__progress {
	top: 0;
}

.apxss--progress-bottom .apxss__progress {
	bottom: 0;
}

.apxss__progress-bar {
	display: block;
	width: 100%;
	height: 100%;
	background: #fff;
	transform: scaleX(0);
	transform-origin: left center;
}

/* --------------------------------------------------------------------- */
/* Editor helpers                                                        */
/* --------------------------------------------------------------------- */

.apxss__notice,
.apxss__relocate .apxss__placeholder {
	display: block;
	padding: 24px;
	border: 1px dashed rgba(125, 125, 125, 0.5);
	border-radius: 4px;
	color: #7a7a7a;
	font-size: 13px;
	text-align: center;
}

body:not(.elementor-editor-active) .apxss__relocate .apxss__placeholder {
	display: none;
}

.apxss__relocated {
	width: 100%;
}

/* --------------------------------------------------------------------- */
/* Responsive arrow visibility (Elementor default breakpoints)           */
/* --------------------------------------------------------------------- */

@media (max-width: 767px) {
	.apxss--hide-arrows-mobile .apxss__arrow,
	.apxss--hide-arrows-tablet .apxss__arrow {
		display: none;
	}
}

@media (min-width: 768px) and (max-width: 1024px) {
	.apxss--hide-arrows-tablet .apxss__arrow {
		display: none;
	}
}

@media (prefers-reduced-motion: reduce) {
	.apxss__track,
	.apxss--effect-fade .apxss__slide {
		transition-duration: 1ms !important;
	}

	.apxss__progress-bar {
		transition: none !important;
	}
}