/* WDB A11y Slider - fallback layout to ensure horizontal flow */
.wdb-a11y-slider {
  display: flex;
  overflow-x: auto;
	/*height: 50vh;*/
	border-radius: var(--btn-radius) !important;
	box-shadow: 4px 4px 12px #0006;
}
.wdb-a11y-slider > .wdb-a11y-slide {
  flex: 0 0 auto;
  width: 100%;
	text-align: center;
	align-content: center;
}

/* Images */
.wdb-a11y-slide img {
	height: 100%;
	width: 100%;
	object-fit: cover;#
}

/* Optional small gap; override in theme if desired */
/* .wdb-a11y-slider { gap: 1rem; } */

/* Navigation arrows */
.wdb-a11y-container > button {
	display: flex;
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	align-items: center;
	justify-content: center;
	cursor: pointer;
	color: transparent;
	background-color: transparent;
	border: none;
	padding: 0;
	padding-block-end: 0;
	padding-block-start: 0;
	padding-inline-end: 0;
	padding-inline-start: 0;
	height: clamp(2rem, calc(1.286rem + 1.905vw), 3rem);
	width: clamp(2rem, calc(1.286rem + 1.905vw), 3rem);
	opacity: 0.3;
	transition: opacity 0.6s;
	z-index: 10;
	left: -10%;
	.dashicons-arrow-left-alt2:before, .dashicons-arrow-right-alt2:before {
		display: block;
		position: relative;
		transform: translate(50%, 50%);
		left: -50%;
		top: -50%;
		line-height: 1;
		padding-right: 0.9em;
		background: #ffffff;
		color: var(--base);
		border-radius: var(--btn-radius);
	}
}
.wdb-a11y-container > button.wdb-a11y-next {
	left: auto;
	right: -10%;
}
.wdb-a11y-container > button:hover,
.wdb-a11y-container:hover > button {
	opacity: 1;
	color: transparent !important;
	background-color: transparent !important;
}
button span {
	font-size: 20px;
	line-height: 1;
}
.wdb-a11y-container > button img {
	display: block;
	width: 20px;
	height: 20px;
	object-fit: contain;
}
/* Optional adaptive height */
.wdb-a11y-container > span.dashicons-arrow-left-alt2:before,
.wdb-a11y-container > span.dashicons-arrow-right-alt2:before {
	content: "";
	display: block;
	background: url(../images/arrow-prev-big.svg);
	background-repeat: no-repeat;
	background-size: contain;
	color: var(--wdb-color-base);
	height: 100%;
	width: 100%;
	font-size: clamp(2rem, calc(1.286rem + 1.905vw), 3rem);
	margin-left: 4%;
	background-position-y: 0.2rem;
}

/* Autoplay toggle button */
.wdb-a11y-container > button.wdb-a11y-autoplay {
	position: absolute;
	top: auto;
	bottom: -1px;
	left: auto;
	right: 0;
	margin: 8px 0 0;
	transform: translateY(0%);
	text-indent: -9999px;
	overflow: hidden;
	z-index: 1; /* on top of images */
}

/* Render Dashicon via pseudo-element, toggled by data-autoplaying */
.wdb-a11y-container .wdb-a11y-autoplay::before {
    content: "\f522"; /* controls-play by default */
    font-family: dashicons;
    font-size: 20px;
    line-height: 1;
    text-indent: 0;
    display: inline-block;
}
.wdb-a11y-container .wdb-a11y-autoplay[data-autoplaying="true"]::before {
    content: "\f523"; /* controls-pause when autoplay is running */
}

/* Dots */
.wdb-a11y-dots {
  display: flex;
  justify-content: center;
  gap: 8px;
  list-style: none;
  margin: 8px 0 0;
  padding: 0;
}
.wdb-a11y-dots li { display: inline-block; }
.wdb-a11y-dots button {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  border: 0;
  padding: 0;
  background: #c4c4c4;
  text-indent: -9999px; /* hide text */
  cursor: pointer;
}
.wdb-a11y-dots button.active,
.wdb-a11y-dots button[aria-current="true"] { background: #333; }
