/* Custom Shortcode Slider - frontend
   Original v5 class names are kept so any custom theme CSS still works. */

.css-slider-wrapper{
	width:100%;
	overflow:hidden;
	position:relative;
	touch-action:pan-y;
	--cssl-color:#fff;
}

.css-slider-track{
	display:flex;
	width:100%;
	transition:transform var(--cssl-speed,500ms) ease;
	will-change:transform;
}

.css-slider-track.is-dragging{
	transition:none;
}

.css-slide-item{
	min-width:100%;
	width:100%;
	flex:0 0 100%;
	position:relative;
}

.css-slide-item a{
	display:block;
	position:relative;
}

.css-slide-item img{
	width:100%;
	height:auto;
	display:block;
	user-select:none;
	-webkit-user-drag:none;
	pointer-events:none;
}

/* ---------- fade effect ---------- */

.css-effect-fade .css-slider-track{
	display:grid;
	transform:none !important;
	transition:none;
}

.css-effect-fade .css-slide-item{
	grid-area:1 / 1;
	opacity:0;
	visibility:hidden;
	transition:opacity var(--cssl-speed,500ms) ease, visibility 0s linear var(--cssl-speed,500ms);
}

.css-effect-fade .css-slide-item.is-active{
	opacity:1;
	visibility:visible;
	z-index:1;
	transition-delay:0s;
}

/* ---------- caption ---------- */

.css-slide-caption{
	position:absolute;
	left:0;
	right:0;
	bottom:0;
	padding:40px 20px 36px;
	color:#fff;
	font-size:18px;
	line-height:1.4;
	text-shadow:0 1px 3px rgba(0,0,0,.5);
	background:linear-gradient(to top,rgba(0,0,0,.6),rgba(0,0,0,0));
	pointer-events:none;
}

/* ---------- arrows ---------- */

.css-slider-arrow{
	position:absolute;
	top:50%;
	z-index:5;
	width:42px;
	height:42px;
	margin:-21px 0 0;
	padding:0;
	border:0;
	border-radius:50%;
	display:flex;
	align-items:center;
	justify-content:center;
	background:rgba(0,0,0,.45);
	color:var(--cssl-color,#fff);
	cursor:pointer;
	opacity:.85;
	transition:opacity .2s ease, background .2s ease;
	-webkit-appearance:none;
	appearance:none;
}

.css-slider-arrow:hover,
.css-slider-arrow:focus-visible{
	opacity:1;
	background:rgba(0,0,0,.7);
}

.css-slider-arrow:disabled{
	opacity:.3;
	cursor:default;
}

.css-slider-prev{ left:12px; }
.css-slider-next{ right:12px; }

/* ---------- dots ---------- */

.css-slider-dots{
	position:absolute;
	left:0;
	right:0;
	bottom:10px;
	z-index:5;
	display:flex;
	justify-content:center;
	gap:8px;
	pointer-events:none;
}

.css-slider-dot{
	width:10px;
	height:10px;
	padding:0;
	border:0;
	border-radius:50%;
	background:var(--cssl-color,#fff);
	opacity:.45;
	cursor:pointer;
	pointer-events:auto;
	box-shadow:0 0 0 1px rgba(0,0,0,.25);
	transition:opacity .2s ease, transform .2s ease;
	-webkit-appearance:none;
	appearance:none;
}

.css-slider-dot.is-active{
	opacity:1;
	transform:scale(1.25);
}

/* ---------- mobile ---------- */

@media(max-width:767px){

	.css-slider-wrapper{ overflow:hidden; }
	.css-slider-track{ width:100%; }
	.css-slide-item{ width:100%; min-width:100%; }

	.css-slider-arrow{ width:34px; height:34px; margin-top:-17px; }
	.css-slider-prev{ left:6px; }
	.css-slider-next{ right:6px; }
	.css-slide-caption{ font-size:15px; padding:30px 14px 32px; }
}

@media(prefers-reduced-motion:reduce){
	.css-slider-track,
	.css-effect-fade .css-slide-item{ transition:none !important; }
}