/* ==========================================================================
   HERO SLIDER — Ocean Multivision
   Fade transition slider wrapping the existing .om-hero design.
   ========================================================================== */

/* ── Wrapper ── */
.om-hero-slider {
	position: relative;
	width: 100%;
	overflow: hidden;
}

/* ── Each slide ── */
.om-hero-slide {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	opacity: 0;
	transition: opacity 0.9s ease;
	pointer-events: none;
	z-index: 1;
}

.om-hero-slide.is-active {
	position: relative;
	opacity: 1;
	pointer-events: auto;
	z-index: 2;
}

/* Single slide: no transition needed */
.om-hero-slider--single .om-hero-slide {
	position: relative;
	opacity: 1;
	pointer-events: auto;
}

/* ── Full Banner Slide ── */
.om-hero-slide--banner {
	width: 100%;
	min-height: 700px;
	background-size: cover;
	background-position: center center;
	background-repeat: no-repeat;
	display: block;
}

.om-hero-slide--banner img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	min-height: 700px;
}

/* ── Navigation Arrows ── */
.om-hero-arrow {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: 10;
	width: 48px;
	height: 48px;
	background: rgba(13, 48, 64, 0.75);
	border: 2px solid rgba(255, 255, 255, 0.3);
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	transition: background 0.3s ease, border-color 0.3s ease;
	outline: none;
}

.om-hero-arrow:hover {
	background: var(--om-teal, #1bb87c);
	border-color: var(--om-teal, #1bb87c);
}

.om-hero-arrow--prev { left: 24px; }
.om-hero-arrow--next { right: 24px; }

.om-hero-arrow svg {
	width: 20px;
	height: 20px;
	fill: none;
	stroke: #ffffff;
	stroke-width: 2.5;
	stroke-linecap: round;
	stroke-linejoin: round;
}

/* ── Pagination Dots ── */
.om-hero-dots {
	position: absolute;
	bottom: 16px;
	left: 50%;
	transform: translateX(-50%);
	z-index: 10;
	display: flex;
	align-items: center;
	gap: 8px;
}

.om-hero-dot {
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.45);
	border: 2px solid rgba(255, 255, 255, 0.6);
	cursor: pointer;
	transition: background 0.3s ease, transform 0.3s ease;
	outline: none;
	padding: 0;
}

.om-hero-dot.is-active {
	background: var(--om-teal, #1bb87c);
	border-color: var(--om-teal, #1bb87c);
	transform: scale(1.3);
}

/* When the scroll indicator is present and dots are showing, push dots up */
.om-hero-slider .om-hero__scroll {
	bottom: 52px;
}

/* ── Hide arrows/dots when only 1 slide ── */
.om-hero-slider--single .om-hero-arrow,
.om-hero-slider--single .om-hero-dots {
	display: none;
}

/* ── Responsive ── */
@media (max-width: 768px) {
	.om-hero-slide--banner,
	.om-hero-slide--banner img {
		min-height: 260px;
	}

	.om-hero-arrow {
		width: 38px;
		height: 38px;
	}

	.om-hero-arrow--prev { left: 12px; }
	.om-hero-arrow--next { right: 12px; }

	.om-hero-arrow svg {
		width: 16px;
		height: 16px;
	}
}

@media (max-width: 480px) {
	.om-hero-slide--banner,
	.om-hero-slide--banner img {
		min-height: 200px;
	}
}