/* Custom Swiper – baseline styles.
 *
 * These styles mirror Swiper's official CSS for pagination / scrollbar
 * positioning (bullets, fraction, progressbar, scrollbar), because Bricks
 * scopes its bundled Swiper CSS to its OWN slider element only – our
 * `.bricks-custom-swiper` container doesn't inherit that positioning.
 *
 * IMPORTANT: For dynamic bullets, Swiper's JS sets inline `left`, `width`
 * and `transform` on the pagination container. Inline styles always beat
 * external CSS, so our rules below do NOT break dynamic centering – they
 * only provide a baseline for non-dynamic modes. Do not add !important
 * to left / right / width / transform on `.swiper-pagination`.
 */

.bricks-custom-swiper {
	position: relative;
	width: 100%;
	overflow: hidden;   /* required for slide-peek effect */
}

.bricks-custom-swiper .swiper-slide {
	height: auto;
	box-sizing: border-box;
}

/* ------------------------------------------------------------------ *
 * Navigation buttons (built-in)
 * ------------------------------------------------------------------ */

.bricks-custom-swiper .swiper-button-prev,
.bricks-custom-swiper .swiper-button-next {
	all: unset;
	position: absolute;
	z-index: 11;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	top: 50%;
	transform: translateY(-50%);
	width: 2.5rem;
	height: 2.5rem;
	border-radius: 9999px;
	background: rgba(0, 0, 0, 0.55);
	color: #fff;
	font-size: 1rem;
	line-height: 1;
	cursor: pointer;
	transition: background 0.15s ease;
}

.bricks-custom-swiper .swiper-button-prev { left: 12px; }
.bricks-custom-swiper .swiper-button-next { right: 12px; }

.bricks-custom-swiper .swiper-button-prev:hover,
.bricks-custom-swiper .swiper-button-next:hover {
	background: rgba(0, 0, 0, 0.8);
}

.bricks-custom-swiper .swiper-button-prev:focus-visible,
.bricks-custom-swiper .swiper-button-next:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 2px;
}

.bricks-custom-swiper .swiper-button-disabled {
	opacity: 0.35;
	pointer-events: none;
}

.bricks-custom-swiper .swiper-button-prev i,
.bricks-custom-swiper .swiper-button-next i,
.bricks-custom-swiper .swiper-button-prev svg,
.bricks-custom-swiper .swiper-button-next svg {
	width: 1em;
	height: 1em;
	font-size: inherit;
	line-height: 1;
}

.bricks-custom-swiper .swiper-button-prev:empty::before { content: "‹"; font-size: 1.5em; line-height: 1; }
.bricks-custom-swiper .swiper-button-next:empty::before { content: "›"; font-size: 1.5em; line-height: 1; }

/* ------------------------------------------------------------------ *
 * Pagination container – positioning (mirrors Swiper's own CSS).
 * Dynamic bullets: Swiper's JS sets inline left/width/transform –
 * those will override the rules below automatically.
 * ------------------------------------------------------------------ */

.bricks-custom-swiper .swiper-pagination {
	position: absolute;
	display: block;
	text-align: center;
	transition: 300ms opacity;
	transform: translate3d(0, 0, 0);
	z-index: 10;
}

.bricks-custom-swiper .swiper-pagination.swiper-pagination-hidden {
	opacity: 0;
}

/* Horizontal bullets / fraction / custom: bottom-center */
.bricks-custom-swiper.swiper-horizontal > .swiper-pagination-bullets,
.bricks-custom-swiper .swiper-pagination-bullets.swiper-pagination-horizontal,
.bricks-custom-swiper.swiper-horizontal > .swiper-pagination-fraction,
.bricks-custom-swiper .swiper-pagination-fraction.swiper-pagination-horizontal,
.bricks-custom-swiper.swiper-horizontal > .swiper-pagination-custom,
.bricks-custom-swiper .swiper-pagination-custom.swiper-pagination-horizontal {
	bottom: var(--swiper-pagination-bottom, 8px);
	top: var(--swiper-pagination-top, auto);
	left: 0;
	width: 100%;
}

/* Progressbar: top, full width */
.bricks-custom-swiper.swiper-horizontal > .swiper-pagination-progressbar,
.bricks-custom-swiper .swiper-pagination-progressbar.swiper-pagination-horizontal {
	width: 100%;
	height: 4px;
	left: 0;
	top: 0;
}

/* ------------------------------------------------------------------ *
 * Pagination – BULLET appearance.
 * ------------------------------------------------------------------ */

.bricks-custom-swiper .swiper-pagination-bullet {
	width: 8px;
	height: 8px;
	margin: 0 4px;
	padding: 0;
	border: 0;
	border-radius: 9999px;
	background: rgba(0, 0, 0, 0.35);
	opacity: 1;
	cursor: pointer;
	display: inline-block;
	vertical-align: middle;
	/* Animate width (for pill effect) and color. No transform — Swiper's
	 * dynamic mode uses transform: scale() and we must not interfere. */
	transition: width 0.3s ease, background-color 0.25s ease;
}

/* Two-class selector for higher specificity – ensures it wins over
 * `.swiper-pagination-bullet` when both controls have a color set. */
.bricks-custom-swiper .swiper-pagination-bullet.swiper-pagination-bullet-active {
	background: rgba(0, 0, 0, 0.85);
	/* Set "Active width" in the builder to enlarge for a pill look
	 * (recommended only when Dynamic bullets is off). */
}

/* Fraction */
.bricks-custom-swiper .swiper-pagination-fraction {
	font-size: 0.875rem;
	line-height: 1.2;
}

/* Progressbar */
.bricks-custom-swiper .swiper-pagination-progressbar {
	background: rgba(0, 0, 0, 0.12);
	position: absolute;
}

.bricks-custom-swiper .swiper-pagination-progressbar .swiper-pagination-progressbar-fill {
	background: rgba(0, 0, 0, 0.85);
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	transform: scale(0);
	transform-origin: left top;
}

/* ------------------------------------------------------------------ *
 * Scrollbar – positioning + colors (mirrors Swiper's own CSS).
 * ------------------------------------------------------------------ */

.bricks-custom-swiper.swiper-horizontal > .swiper-scrollbar,
.bricks-custom-swiper .swiper-scrollbar.swiper-scrollbar-horizontal {
	position: absolute;
	left: 1%;
	bottom: 4px;
	z-index: 50;
	height: 4px;
	width: 98%;
}

.bricks-custom-swiper .swiper-scrollbar {
	background: rgba(0, 0, 0, 0.12);
	border-radius: 9999px;
}

.bricks-custom-swiper .swiper-scrollbar-drag {
	position: relative;
	height: 100%;
	width: 100%;
	background: rgba(0, 0, 0, 0.55);
	border-radius: 9999px;
	left: 0;
	top: 0;
}