/* ════════════════════════════════════════════════════════════════════════════════
   SB CAROUSEL BLOCK — Frontend Styles
   ════════════════════════════════════════════════════════════════════════════════ */

/* Root wrapper */
.wp-block-sb-carousel-carousel {
	position: relative;
}

/* Margin below swiper for pagination dots */
.wp-block-sb-carousel-carousel[data-scb-pagination="true"] .swiper-horizontal {
	margin-bottom: calc(var(--wp--custom--scb--pagination-bullet-size, 8px) * 4);
}

/* ────────────────────────────────────────────────────────────────────────────────
   NAVIGATION ARROWS — CSS custom properties
   ──────────────────────────────────────────────────────────────────────────────── */

.wp-block-sb-carousel-carousel .scb-button-prev,
.wp-block-sb-carousel-carousel .scb-button-next {
	color: var(--wp--custom--scb--navigation-color, #000);
	height: var(--wp--custom--scb--navigation-size, 22px);
	width: calc(var(--wp--custom--scb--navigation-size, 22px) / 44 * 27);
	margin-top: calc(0px - var(--wp--custom--scb--navigation-size, 22px) / 2);
}

.wp-block-sb-carousel-carousel .scb-button-prev:after,
.wp-block-sb-carousel-carousel .scb-button-next:after {
	font-size: var(--wp--custom--scb--navigation-size, 22px);
}

.wp-block-sb-carousel-carousel .scb-button-prev:hover,
.wp-block-sb-carousel-carousel .scb-button-next:hover {
	color: var(--wp--custom--scb--navigation-hover-color,
			   var(--wp--custom--scb--navigation-color, #000));
}

/* LTR: arrows outside the carousel area */
.wp-block-sb-carousel-carousel .scb-button-prev {
	left: calc(var(--wp--custom--scb--navigation-size, 22px) * -1 / 44 * 27
			   - var(--wp--custom--scb--navigation-sides-offset, 10px));
	right: auto;
}

.wp-block-sb-carousel-carousel .scb-button-next {
	left: auto;
	right: calc(var(--wp--custom--scb--navigation-size, 22px) * -1 / 44 * 27
				- var(--wp--custom--scb--navigation-sides-offset, 10px));
}

/* RTL: swap sides + mirror the icon */
.wp-block-sb-carousel-carousel.scb-rtl .scb-button-prev {
	transform: scaleX(-1);
}

.wp-block-sb-carousel-carousel.scb-rtl .scb-button-next {
	transform: scaleX(-1);
}

/* alignfull: arrows go INSIDE the carousel */
.wp-block-sb-carousel-carousel.alignfull .scb-button-prev {
	left: var(--wp--custom--scb--navigation-sides-offset, 10px);
	right: auto;
}

.wp-block-sb-carousel-carousel.alignfull .scb-button-next {
	left: auto;
	right: var(--wp--custom--scb--navigation-sides-offset, 10px);
}

.wp-block-sb-carousel-carousel.alignfull .scb-button-prev,
.wp-block-sb-carousel-carousel.alignfull .scb-button-next {
	color: var(--wp--custom--scb--navigation-alignfull-color, #000);
}

/* ────────────────────────────────────────────────────────────────────────────────
   PAGINATION DOTS — CSS custom properties
   ──────────────────────────────────────────────────────────────────────────────── */

.wp-block-sb-carousel-carousel .scb-pagination.swiper-pagination-horizontal {
	bottom: var(--wp--custom--scb--pagination-bottom, -35px);
	display: flex;
	justify-content: center;
	top: var(--wp--custom--scb--pagination-top, auto);
}

.wp-block-sb-carousel-carousel .scb-pagination .scb-pagination-bullet {
	background: var(--wp--custom--scb--pagination-bullet-inactive-color, #000);
	height: var(--wp--custom--scb--pagination-bullet-size, 8px);
	opacity: var(--wp--custom--scb--pagination-bullet-inactive-opacity, .2);
	width: var(--wp--custom--scb--pagination-bullet-size, 8px);
	margin: 0 var(--wp--custom--scb--pagination-bullet-horizontal-gap, 4px);
}

.wp-block-sb-carousel-carousel .scb-pagination .scb-pagination-bullet.swiper-pagination-bullet-active {
	background: var(--wp--custom--scb--pagination-bullet-active-color, #000);
	opacity: var(--wp--custom--scb--pagination-bullet-active-opacity, 1);
}

.wp-block-sb-carousel-carousel .scb-pagination .scb-pagination-bullet:not(.swiper-pagination-bullet-active):hover {
	background: var(--wp--custom--scb--pagination-bullet-inactive-hover-color,
					var(--wp--custom--scb--pagination-bullet-active-color, #000));
	opacity: var(--wp--custom--scb--pagination-bullet-inactive-hover-opacity,
				 var(--wp--custom--scb--pagination-bullet-inactive-opacity, .2));
}

/* ────────────────────────────────────────────────────────────────────────────────
   HERO SLIDER — theme overrides for white arrows and dots
   ──────────────────────────────────────────────────────────────────────────────── */

.wp-block-sb-carousel-carousel.alignfull.scb-hero-slider {
	--wp--custom--scb--navigation-alignfull-color: #fff;
	--wp--custom--scb--pagination-bottom: 24px;
	--wp--custom--scb--pagination-bullet-active-color: #fff;
	--wp--custom--scb--pagination-bullet-inactive-color: #fff;
}

/* ────────────────────────────────────────────────────────────────────────────────
   INNER BLOCK MARGIN RESETS
   ──────────────────────────────────────────────────────────────────────────────── */

.wp-block-sb-carousel-carousel .wp-block-image {
	margin-top: var(--wp--custom--scb--image-margin-top, 0);
	margin-bottom: var(--wp--custom--scb--image-margin-bottom, 0);
}

.wp-block-sb-carousel-carousel .wp-block-cover {
	margin-top: var(--wp--custom--scb--cover-margin-top, 0);
	margin-bottom: var(--wp--custom--scb--cover-margin-bottom, 0);
}

.wp-block-sb-carousel-carousel .wp-block-cover.aligncenter,
.wp-block-sb-carousel-carousel .wp-block-image.aligncenter {
	margin-left: auto !important;
	margin-right: auto !important;
}

/* ════════════════════════════════════════════════════════════════════════════════
   LIGHTBOX STYLES
   ════════════════════════════════════════════════════════════════════════════════ */

.scb-lb {
	position: fixed;
	inset: 0;
	z-index: 999999;
	display: flex;
	align-items: center;
	justify-content: center;
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.2s ease;
}

.scb-lb--open {
	opacity: 1;
	pointer-events: auto;
}

.scb-lb__backdrop {
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, 0.88);
}

.scb-lb__box {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	max-width: 92vw;
	max-height: 92vh;
	z-index: 1;
}

.scb-lb__img {
	max-width: 92vw;
	max-height: 80vh;
	object-fit: contain;
	border-radius: 4px;
	box-shadow: 0 12px 48px rgba(0, 0, 0, 0.6);
	display: block;
	transition: opacity 0.15s ease;
}

.scb-lb__img--loading {
	opacity: 0.35;
}

.scb-lb__caption {
	color: #ddd;
	font-size: 0.9em;
	margin: 12px 0 0;
	text-align: center;
	max-width: 640px;
}

.scb-lb__close {
	position: absolute;
	top: 16px;
	right: 16px;
	background: rgba(0, 0, 0, 0.5);
	border: none;
	color: #fff;
	font-size: 20px;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	z-index: 2;
	padding: 0;
}

.scb-lb__close:hover {
	background: rgba(0, 0, 0, 0.7);
}

.scb-lb__nav {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	background: rgba(0, 0, 0, 0.45);
	border: none;
	color: #fff;
	font-size: 24px;
	width: 48px;
	height: 48px;
	border-radius: 50%;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 2;
	padding: 0;
}

.scb-lb__nav:hover {
	background: rgba(0, 0, 0, 0.65);
}

.scb-lb__prev {
	left: 12px;
}

.scb-lb__next {
	right: 12px;
}