/* ==========================================================================
   Shiksite Custom Carousel — single-slide carousel (Slide / Fade).
   Tiny vanilla controller injects state classes; CSS does the rest.

   Naming: .scc (wrapper) / .scc-viewport / .scc-track / .scc-slide /
           .scc-dots / .scc-dot / .scc-arrow

   RTL: when <body class="rtl"> is present we set direction:rtl on .scc so
        the slide *content* flows RTL. Dots/arrows use logical insets so
        they auto-flip. On mobile dots are always centered (user request).
   ========================================================================== */

.scc {
	--scc-transition: 600ms;
	--scc-h: auto;

	--scc-dot-size: 12px;
	--scc-dot-color: #BBCAD9;
	--scc-dot-color-active: #1F4B7C;
	--scc-dots-offset-y: 20px;

	--scc-arrow-size: 40px;
	--scc-arrow-color: #FFFFFF;
	--scc-arrow-bg: rgba(0,0,0,0.4);
	--scc-arrow-bg-hover: rgba(0,0,0,0.7);
	--scc-arrow-offset: 16px;

	position: relative;
	width: 100%;
	max-width: 100%!important;
	box-sizing: border-box;
    overflow: hidden;
}

.scc *,
.scc *::before,
.scc *::after { box-sizing: border-box; }

/* ---- RTL content driven by site language (bilingual safe) ---- */
body.rtl .scc       { direction: rtl; }
body.rtl .scc .scc-dots { direction: rtl; }
body:not(.rtl) .scc { direction: ltr; }

/* ---- Full-width breakout: take the whole viewport regardless of section width ---- */
.scc--full {
	width: 100vw;
	max-width: 100vw;
	margin-inline: calc(50% - 50vw);
}

/* ---- Viewport: clips the track (this is what hides off-screen slides) ---- */
.scc-viewport {
	position: relative;
	overflow: hidden;
	width: 100%;
	max-width: 100%;
}

/* ---- Track ---- */
.scc-track {
	position: relative;
	width: 100%;
}

/* ==========================================================================
   SLIDE MODE — flex row, translateX moves the active slide into view
   ========================================================================== */
.scc--slide .scc-track {
	display: flex;
	flex-wrap: nowrap;
	transition: transform var(--scc-transition) cubic-bezier(.22,.61,.36,1);
	will-change: transform;
}

.scc--slide .scc-slide {
	flex: 0 0 100%;
	min-width: 0; /* prevents flex children from expanding beyond their share */
}

/* ==========================================================================
   FADE MODE — grid stack: all slides share one cell so the tallest defines
   the track height; visibility toggled via opacity. No layout shift.
   ========================================================================== */
.scc--fade .scc-track {
	display: grid;
	grid-template-areas: "stack";
}

.scc--fade .scc-slide {
	grid-area: stack;
	opacity: 0;
	visibility: hidden;
	transition:
		opacity    var(--scc-transition) ease,
		visibility 0s linear var(--scc-transition);
	pointer-events: none;
}

.scc--fade .scc-slide.is-active {
	opacity: 1;
	visibility: visible;
	transition:
		opacity    var(--scc-transition) ease,
		visibility 0s linear 0s;
	pointer-events: auto;
	z-index: 1;
}

/* ---- Slide (shared) ---- */
.scc-slide {
	position: relative;
	width: 100%;
	max-width: 100%;
	min-height: var(--scc-h, auto);
	overflow: hidden;
}

/* the injected Elementor container fills the slide */
.scc-slide > .elementor-element,
.scc-slide > .e-con,
.scc-slide > .e-con > .e-con-inner {
	width: 100%;
	max-width: 100%;
}

/* ==========================================================================
   Dots
   ========================================================================== */
.scc-dots {
	display: flex;
	align-items: center;
	gap: 10px;
	justify-content: flex-start;
	padding-inline: 24px;
	z-index:3;
}

@media (min-width: 767px) {
	.scc-dots {
		position:absolute;
		left:0;
		bottom:0;
	}
	body:not(.rtl) .scc-dots {
		right:0;
		left:auto;
	}
}

/* dots floating over the slide (default) */
.scc.scc-dots-pos-inside .scc-dots {
	position: absolute;
	inset-inline: 0;
	bottom: var(--scc-dots-offset-y);
	z-index: 5;
	pointer-events: none; /* let clicks pass to the slide except on dots themselves */
}
.scc.scc-dots-pos-inside .scc-dot { pointer-events: auto; }

/* dots below the slide */
.scc.scc-dots-pos-outside .scc-dots {
	position: relative;
	margin-top: var(--scc-dots-offset-y);
}

.scc-dot {
	display: inline-block;
	width: var(--scc-dot-size);
	height: var(--scc-dot-size);
	aspect-ratio: 1;
	border-radius: 50%;
	background: linear-gradient(135deg, #b3dbe7, #bbcad9) padding-box, linear-gradient(135deg, #008bb3, #1f4b7d) border-box;
	cursor: pointer;
	user-select: none;
	-webkit-user-select: none;
	transition: background .2s ease, transform .2s ease;
}

.scc-dot:hover         { transform: scale(1.15); }
.scc-dot.is-active     { background: var(--scc-dot-color-active); transform: scale(1.15); }

/* ==========================================================================
   Arrows
   ========================================================================== */
.scc-arrow {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: var(--scc-arrow-size);
	height: var(--scc-arrow-size);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: var(--scc-arrow-color);
	background: var(--scc-arrow-bg);
	cursor: pointer;
	user-select: none;
	-webkit-user-select: none;
	z-index: 5;
	transition: background .2s ease;
}

.scc-arrow:hover { background: var(--scc-arrow-bg-hover); }

.scc-arrow svg {
	width: 60%;
	height: 60%;
	display: block;
}

/* Logical insets auto-flip on direction: in RTL .scc-arrow--prev sits on the right. */
.scc-arrow--prev { inset-inline-start: var(--scc-arrow-offset); }
.scc-arrow--next { inset-inline-end:   var(--scc-arrow-offset); }

/* In RTL flip the chevrons so "prev" still points to the leading edge. */
body.rtl .scc-arrow svg { transform: scaleX(-1); }

/* ==========================================================================
   Mobile: dots & arrows always centered/edge-tight regardless of alignment.
   ========================================================================== */
@media (max-width: 767.98px) {
	.scc-dots {
		justify-content: center !important;
		padding-inline: 12px !important;
	}
}

/* ==========================================================================
   Focus visible (accessibility)
   ========================================================================== */
.scc-dot:focus-visible,
.scc-arrow:focus-visible {
	outline: 2px solid #1E6FA8;
	outline-offset: 3px;
}

/* ==========================================================================
   Reduced motion
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
	.scc--slide .scc-track,
	.scc--fade  .scc-slide {
		transition-duration: 0ms;
	}
}

/* ==========================================================================
   Editor / no-JS fallback.
   When the controller hasn't initialised (Elementor editor or JS disabled),
   show all slides stacked as a simple editable list so each Container is
   easy to work on. The controller adds .is-ready once it takes over.
   ========================================================================== */
.scc:not(.is-ready) .scc-viewport { overflow: visible; }

.scc:not(.is-ready) .scc-track {
	display: flex !important;
	flex-direction: column;
	gap: 16px;
}

.scc:not(.is-ready) .scc-slide {
	position: relative !important;
	width: 100% !important;
	max-width: 100% !important;
	opacity: 1 !important;
	visibility: visible !important;
	pointer-events: auto !important;
	transform: none !important;
	min-height: 120px;
}

.scc:not(.is-ready) .scc-dots,
.scc:not(.is-ready) .scc-arrow { display: none; }

.scc-slide img{pointer-events:none;}
.scc-slide:active{
  cursor: grabbing;
}
.scc-slide:hover{
	cursor:grab;
	user-select: none;
}