/* ================================================
   MC Hero Slider – Stylesheet
   ================================================ */

.mc-hero-slider {
	position: relative;
	width: 100%;
	font-family: inherit;
}

/* ── Slides wrapper: the height-setter ── */
.mc-slides-wrapper {
	position: relative;
	overflow: hidden;
	min-height: 620px; /* fallback; overridden by Elementor selector */
}

/* ── Every slide: always in the DOM, stacked absolutely ── */
.mc-slide {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	opacity: 0;
	pointer-events: none;
	z-index: 0;
	/* smooth fade-out when leaving (applies to all modes) */
	transition: opacity 0.5s ease;
}

/* ── Active slide ── */
.mc-slide--active {
	opacity: 1;
	pointer-events: auto;
	z-index: 1;
	transition: none; /* entry is handled by animation, not transition */
}

/* ── Background ── */
.mc-slide__bg {
	position: absolute;
	inset: 0;
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
}
.mc-slide__bg--placeholder {
	background-color: #1a1a2e;
}
.mc-slide__overlay {
	position: absolute;
	inset: 0;
}

/* ── Content ── */
.mc-slide__content {
	position: relative;
	z-index: 2;
	padding: 60px 40px;
	max-width: 820px;
	width: 100%;
}
.mc-align-center { text-align: center; margin: 0 auto; }
.mc-align-left   { text-align: left; }
.mc-align-right  { text-align: right; margin-left: auto; }

.mc-slide__tagline {
	margin: 0 0 12px;
	letter-spacing: 0.04em;
	font-style: italic;
}
.mc-slide__heading {
	margin: 0 0 18px;
	line-height: 1.15;
	font-weight: 700;
}
.mc-slide__description {
	margin: 0 0 32px;
	line-height: 1.65;
	max-width: 640px;
}
.mc-align-center .mc-slide__description { margin-left: auto; margin-right: auto; }

.mc-slide__btn {
	display: inline-block;
	padding: 14px 32px;
	border-radius: 4px;
	text-decoration: none;
	font-weight: 600;
	cursor: pointer;
	border: none;
	transition: opacity 0.2s, transform 0.2s;
}
.mc-slide__btn:hover {
	opacity: 0.88;
	transform: translateY(-2px);
}

/* ════════════════════════════════════════════════
   ENTER animations  (.mc-slide--animate-in)
   EXIT  animations  (.mc-slide--animate-out)
   ════════════════════════════════════════════════ */

/* Suppress the default opacity transition while an animation is running */
.mc-slide--animate-in,
.mc-slide--animate-out {
	transition: none;
}

/* ── Keyframes ── */
@keyframes mcEnterFromLeft {
	from { opacity: 0; transform: translateX(-100%); }
	to   { opacity: 1; transform: translateX(0); }
}
@keyframes mcExitToRight {
	from { opacity: 1; transform: translateX(0); }
	to   { opacity: 0; transform: translateX(100%); }
}
@keyframes mcEnterFromRight {
	from { opacity: 0; transform: translateX(100%); }
	to   { opacity: 1; transform: translateX(0); }
}
@keyframes mcExitToLeft {
	from { opacity: 1; transform: translateX(0); }
	to   { opacity: 0; transform: translateX(-100%); }
}
@keyframes mcFadeIn {
	from { opacity: 0; transform: scale(1.04); }
	to   { opacity: 1; transform: scale(1); }
}
@keyframes mcFadeOut {
	from { opacity: 1; transform: scale(1); }
	to   { opacity: 0; transform: scale(0.97); }
}
@keyframes mcSpinIn {
	from { opacity: 0; transform: rotate(-180deg) scale(0.25); }
	to   { opacity: 1; transform: rotate(0deg)    scale(1); }
}
@keyframes mcSpinOut {
	from { opacity: 1; transform: rotate(0deg)   scale(1); }
	to   { opacity: 0; transform: rotate(180deg) scale(0.25); }
}

/* ── LTR: new slide enters from left, old exits to right ── */
.mc-hero-slider[data-transition="ltr"] .mc-slide--animate-in {
	animation: mcEnterFromLeft 0.55s ease forwards;
	z-index: 2;
}
.mc-hero-slider[data-transition="ltr"] .mc-slide--animate-out {
	animation: mcExitToRight 0.55s ease forwards;
	z-index: 2;
}

/* ── RTL: new slide enters from right, old exits to left ── */
.mc-hero-slider[data-transition="rtl"] .mc-slide--animate-in {
	animation: mcEnterFromRight 0.55s ease forwards;
	z-index: 2;
}
.mc-hero-slider[data-transition="rtl"] .mc-slide--animate-out {
	animation: mcExitToLeft 0.55s ease forwards;
	z-index: 2;
}

/* ── Fade ── */
.mc-hero-slider[data-transition="fade"] .mc-slide--animate-in {
	animation: mcFadeIn  0.55s ease forwards;
	z-index: 2;
}
.mc-hero-slider[data-transition="fade"] .mc-slide--animate-out {
	animation: mcFadeOut 0.55s ease forwards;
	z-index: 1;
}

/* ── Spin ── */
.mc-hero-slider[data-transition="spin"] .mc-slide--animate-in {
	animation: mcSpinIn  0.6s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
	z-index: 2;
}
.mc-hero-slider[data-transition="spin"] .mc-slide--animate-out {
	animation: mcSpinOut 0.5s ease forwards;
	z-index: 1;
}

/* ── Arrow navigation ── */
.mc-arrow {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: 10;
	background: rgba(255,255,255,0.15);
	color: #fff;
	border: none;
	width: 46px;
	height: 46px;
	border-radius: 50%;
	font-size: 28px;
	line-height: 1;
	cursor: pointer;
	transition: background 0.2s;
	display: flex;
	align-items: center;
	justify-content: center;
	backdrop-filter: blur(4px);
}
.mc-arrow:hover { background: rgba(255,255,255,0.3); }
.mc-arrow--prev { left: 20px; }
.mc-arrow--next { right: 20px; }

/* ── Tab navigation bar ── */
.mc-tabs {
	display: flex;
	flex-wrap: nowrap;
	overflow-x: auto;
	border-top: 1px solid rgba(0,0,0,0.1);
	background: #f5f5f5;
}
.mc-tabs::-webkit-scrollbar { height: 4px; }
.mc-tabs::-webkit-scrollbar-thumb { background: #ccc; }

.mc-tab {
	flex: 1 0 auto;
	padding: 16px 24px;
	border: none;
	border-right: 1px solid rgba(0,0,0,0.08);
	cursor: pointer;
	font-weight: 600;
	white-space: nowrap;
	transition: background 0.25s, color 0.25s;
	letter-spacing: 0.02em;
}
.mc-tab:last-child { border-right: none; }
.mc-tab:hover { filter: brightness(0.93); }

/* ── Responsive ── */
@media (max-width: 768px) {
	.mc-slides-wrapper { min-height: 420px !important; }
	.mc-slide__heading { font-size: 28px !important; }
	.mc-slide__content { padding: 40px 20px; }
	.mc-tabs { flex-wrap: wrap; }
	.mc-tab { flex: 0 0 50%; border-bottom: 1px solid rgba(0,0,0,0.08); }
}
@media (max-width: 480px) {
	.mc-slides-wrapper { min-height: 320px !important; }
	.mc-tab { flex: 0 0 100%; }
}