/**
 * Swiper Brand Overrides
 *
 * Custom navigation arrows, pagination dots, and wrapper styling
 * for the Bury Golf Club Swiper carousel components.
 * Loaded AFTER bgc-swiper-css (CDN) via enqueue dependency.
 *
 * @package BuryGolfClub
 * @since   1.0.0
 */

/* ==========================================================================
   Swiper Wrapper
   ========================================================================== */

.bgc-swiper {
	position: relative;
	padding-bottom: 3rem;
}

/* ==========================================================================
   Navigation Arrows — Circular with Green Border
   ========================================================================== */

.bgc-swiper .swiper-button-next,
.bgc-swiper .swiper-button-prev {
	width: 3.375rem;
	height: 3.375rem;
	border: 2px solid var(--wp--preset--color--accent);
	border-radius: var(--wp--custom--border-radius--pill);
	background: transparent;
	transition: background-color 0.2s ease-out,
		border-color 0.2s ease-out;
}

@media (min-width: 1024px) {
	.bgc-swiper .swiper-button-next,
	.bgc-swiper .swiper-button-prev {
		width: 4.5rem;
		height: 4.5rem;
	}
}

.bgc-swiper .swiper-button-next:hover,
.bgc-swiper .swiper-button-prev:hover {
	background-color: var(--wp--preset--color--accent);
	border-color: var(--wp--preset--color--accent);
}

.bgc-swiper .swiper-button-next::after,
.bgc-swiper .swiper-button-prev::after {
	font-size: 1rem;
	color: var(--wp--preset--color--accent);
	transition: color 0.2s ease-out;
}

.bgc-swiper .swiper-button-next:hover::after,
.bgc-swiper .swiper-button-prev:hover::after {
	color: var(--wp--preset--color--white);
}

.bgc-swiper .swiper-button-next:focus-visible,
.bgc-swiper .swiper-button-prev:focus-visible {
	outline: 3px solid var(--wp--preset--color--gold);
	outline-offset: 2px;
}

.bgc-swiper .swiper-button-next.swiper-button-disabled,
.bgc-swiper .swiper-button-prev.swiper-button-disabled {
	opacity: 0.3;
}

/* ==========================================================================
   Pagination Dots — Gold Active
   ========================================================================== */

.bgc-swiper .swiper-pagination-bullet {
	background: var(--wp--preset--color--text-secondary);
	opacity: 0.4;
}

.bgc-swiper .swiper-pagination-bullet-active {
	background: var(--wp--preset--color--gold);
	opacity: 1;
}

/* ==========================================================================
   Controls — Below-Carousel Navigation Placement
   ========================================================================== */

.bgc-swiper__controls {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: var(--wp--preset--spacing--20);
	margin-top: var(--wp--preset--spacing--30);
}