/* Swiper theming (overrides on top of the CDN bundle) */

.swiper { width: 100%; padding-bottom: var(--zgb-space-8); }
.swiper-slide { height: auto; display: flex; }
.swiper-slide > * { width: 100%; }

/* Bullets: 24px hit area for a11y/touch; the visible dot grows into a brand
   "pill" when active. !important overrides Swiper's bundle CSS. */
.swiper-pagination-bullet {
	width: 24px !important; height: 24px !important;
	opacity: 1;
	display: inline-flex; align-items: center; justify-content: center;
	position: relative; background: transparent;
	cursor: pointer;
	transition: none;
}
.swiper-pagination-bullet::before {
	content: ""; width: 8px; height: 8px; border-radius: var(--zgb-radius-pill);
	background: color-mix(in srgb, var(--zgb-ink) 22%, transparent);
	transition: width var(--zgb-dur-fast) var(--zgb-ease-out),
	            background var(--zgb-dur-fast);
}
.swiper-pagination-bullet:hover::before { background: var(--zgb-blue); }
.swiper-pagination-bullet-active::before {
	width: 26px;
	background: linear-gradient(90deg, var(--zgb-green), var(--zgb-blue));
}
.swiper-horizontal > .swiper-pagination-bullets .swiper-pagination-bullet,
.swiper-pagination-bullets .swiper-pagination-bullet { margin: 0 3px; }

.swiper-button-prev, .swiper-button-next {
	color: var(--zgb-blue-dark);
	background: #fff;
	width: 46px; height: 46px;
	border-radius: 50%;
	box-shadow: var(--zgb-shadow-soft);
	cursor: pointer;
	transition: background var(--zgb-dur-fast) var(--zgb-ease-out),
	            color var(--zgb-dur-fast), transform var(--zgb-dur-fast),
	            box-shadow var(--zgb-dur-fast);
}
.swiper-button-prev:hover, .swiper-button-next:hover {
	background: var(--zgb-blue); color: #fff;
	transform: scale(1.08); box-shadow: var(--zgb-shadow-warm);
}
.swiper-button-prev::after, .swiper-button-next::after { font-size: 1rem; font-weight: 700; }
.swiper-button-disabled { opacity: .35; cursor: default; }

/* Guides + reviews sliders show multiple per view on wider screens */
.zgb-guides-swiper .swiper-slide,
.zgb-reviews-swiper .swiper-slide { padding: var(--zgb-space-2); }

/* The tour gallery is a justified grid now, not a Swiper — see components/gallery.css. */