/* Navigation icons for slides */
.slides-navigation {
	display: flex;
	gap: 8px;
	align-items: center;
}
.slides-navigation .icon {
	display: inline-block;
	width: 36px;
	height: 36px;
	background-repeat: no-repeat;
	background-position: center;
	/* background-size: 18px 18px; */
    background-size: 36px 36px;
	vertical-align: middle;
    opacity: 0.2;
}

/* Next arrow (right-pointing chevron) */
.slides-navigation .icon-next {
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='9 18 15 12 9 6'/></svg>");
}

/* Prev arrow (left-pointing chevron) */
.slides-navigation .icon-prev {
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='15 18 9 12 15 6'/></svg>");
}

/* Clickable links styling */
/* .slides-navigation a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border-radius: 6px;
	text-decoration: none;
	background: transparent;
}
.slides-navigation a:hover { background-color: rgba(0,0,0,0.06); } */

/* Invert color for dark backgrounds */
@media (prefers-color-scheme: dark) {
	.slides-navigation .icon { background-size: 18px 18px; }
	.slides-navigation .icon-next,
	.slides-navigation .icon-prev {
		background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='9 18 15 12 9 6'/></svg>");
	}
}