/**
 * Cooking B — shared Swiper theme layer (one look for all sliders).
 */

.cb-swiper-root {
	position: relative;
	overflow-x: clip;
}

.cb-swiper-root .swiper {
	overflow: hidden;
}

.cb-swiper__controls {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--space-4);
	margin-top: var(--space-8);
}

.cb-swiper__prev,
.cb-swiper__next {
	width: 46px;
	height: 46px;
	border-radius: 50%;
	background: var(--color-bg-elevated);
	color: var(--color-text);
	border: 1px solid var(--color-border);
	display: grid;
	place-items: center;
	box-shadow: var(--shadow-sm);
	cursor: pointer;
	padding: 0;
	-webkit-tap-highlight-color: transparent;
	tap-highlight-color: transparent;
	user-select: none;
	transition:
		background 0.3s ease,
		color 0.3s ease,
		transform 0.3s ease,
		border-color 0.3s ease;
}

.cb-swiper__prev:focus,
.cb-swiper__next:focus {
	outline: none;
}

.cb-swiper__prev:hover,
.cb-swiper__next:hover,
.cb-swiper__prev:focus-visible,
.cb-swiper__next:focus-visible {
	background: var(--gradient-rose);
	color: var(--color-cream);
	border-color: transparent;
	transform: translateY(-2px);
	outline: none;
}

.cb-swiper__prev:disabled,
.cb-swiper__next:disabled {
	opacity: 0.35;
	cursor: not-allowed;
	transform: none;
}

.cb-swiper__pagination {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--space-2);
	position: static;
	width: auto;
}

.cb-swiper__bullet {
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background: var(--color-border-strong);
	border: none;
	padding: 0;
	margin: 0;
	cursor: pointer;
	opacity: 1;
	-webkit-tap-highlight-color: transparent;
	tap-highlight-color: transparent;
	transition:
		background 0.3s ease,
		width 0.3s ease,
		transform 0.3s ease;
}

.cb-swiper__bullet:focus {
	outline: none;
}

.cb-swiper__bullet.is-active {
	background: var(--color-primary);
	width: 28px;
	border-radius: var(--radius-pill);
}

/* Hide default Swiper chrome when using custom controls */
.cb-swiper-root .swiper-button-prev,
.cb-swiper-root .swiper-button-next {
	display: none;
}