/* Shared frontend pagination for featured reviews, shop benefits and UGC videos. */
.ast-pagination-arrow {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	flex: none;
	width: var(--ast-pagination-arrow-width, var(--ast-pagination-arrow-size, 40px));
	height: var(--ast-pagination-arrow-height, var(--ast-pagination-arrow-size, 40px));
	min-width: var(--ast-pagination-arrow-size, 40px);
	min-height: var(--ast-pagination-arrow-size, 40px);
	margin: 0;
	padding: var(--ast-pagination-arrow-padding, 0);
	border: var(--astrashoptoolkit-border);
	border-radius: var(--ast-pagination-arrow-radius, 50%);
	background: var(--ast-pagination-arrow-background, var(--astrashoptoolkit-astra-color-5));
	color: var(--ast-pagination-arrow-color, var(--astrashoptoolkit-astra-color-3));
	box-shadow: var(--astrashoptoolkit-shadow-sm);
	cursor: pointer;
	transition: color .2s, border-color .2s, background-color .2s, box-shadow .2s;
}

.ast-pagination-arrow svg {
	display: block;
	flex: none;
	width: var(--ast-pagination-arrow-icon-size, 18px);
	height: var(--ast-pagination-arrow-icon-size, 18px);
}

.ast-pagination-arrow:hover {
	border-color: var(--ast-pagination-arrow-hover-border-color, var(--astrashoptoolkit-border-color));
	background: var(--ast-pagination-arrow-hover-background, color-mix(in srgb, var(--astrashoptoolkit-astra-color-3) 3%, var(--astrashoptoolkit-astra-color-5)));
	color: var(--ast-pagination-arrow-hover-color, var(--ast-pagination-arrow-color, var(--astrashoptoolkit-astra-color-3)));
}

.ast-pagination-arrow:disabled,
.ast-pagination-arrow.swiper-button-disabled { opacity: .35; cursor: default; }

.ast-pagination-arrow:focus-visible {
	outline: 2px solid var(--ast-pagination-arrow-color, var(--astrashoptoolkit-astra-color-3));
	outline-offset: 4px;
}

.ast-pagination-dot {
	display: block;
	width: var(--ast-pagination-dot-size, 7px);
	height: var(--ast-pagination-dot-size, 7px);
	min-height: 0;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: var(--ast-pagination-dot-radius, 10px);
	background: var(--ast-pagination-dot-background, currentColor);
	color: var(--ast-pagination-dot-color, inherit);
	opacity: .25;
	cursor: pointer;
	transition: width .2s ease, opacity .2s ease;
}

.ast-pagination-dot--active {
	width: var(--ast-pagination-dot-active-width, 24px);
	background: var(--ast-pagination-dot-active-background, var(--ast-pagination-dot-background, currentColor));
	opacity: 1;
}

.ast-pagination-dot:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
	.ast-pagination-arrow,
	.ast-pagination-dot { transition: none; }
}