/* ==========================================================================
   SHIKSITE Carousel — 3D ring carousel of nested Elementor containers.
   3D placement is computed in CSS from --pos / --abs (injected by the JS).
   Sizing uses a 3-tier responsive system:
     >= 1920px ............ fixed PX (design baseline)
     768–1919.98px ....... VW relative to a 1920px design  (px / 19.2)
     <= 767.98px ......... VW relative to a 767px screen    (px / 7.67)
   ========================================================================== */

.aic {
	/* constants (not size-bound) */
	--aic-fade: 0;                /* image 1: side cards stay opaque */
	--aic-scale: 1;              /* per-rank scale set below (uniform base size) */
	--aic-tx: 0;                 /* per-rank horizontal offset set below */
	--aic-transition: 600ms;
	--aic-radius: 18px;
	--aic-text: #EAF0F6;

	/* gradient-border-with-gap (card) */
	--aic-border-w: 2px;          /* border thickness */
	--aic-gap: 4px;               /* thin gap between border and fill */
	--aic-gap-color: rgba(255,255,255,1); /* soft separator (not solid white) */
	--aic-pad: 22px;              /* inner content padding (also a Style control) */

	/* gradient palettes */
	--grad-active:  linear-gradient(135deg, #b85b23, #d49645);  /* active fill + border */
	--grad-fill:    linear-gradient(160deg, #000406, #313d42);  /* inactive fill (all)  */
	--bd-rank1:     linear-gradient(135deg, #1f4b7c, #008bb3);  /* 1st from sides       */
	--bd-rank2:     linear-gradient(135deg, #b0683f, #b0683f);  /* 2nd from sides       */
	--bd-rank3:     linear-gradient(135deg, #a0ae9d, #a0ae9d);  /* 3rd from sides       */
	--dot-grad:     linear-gradient(135deg, #008bb3, #1f4b7d);  /* dots border + active */
	--dot-grad-dim: linear-gradient(135deg, #b3dbe7, #bbcad9); /* inactive 30% */

	/* per-card resolved gradients (overridden by rank/active below) */
	--aic-fill-grad:   var(--grad-fill);
	--aic-border-grad: var(--bd-rank1);
	--dot-fill:        var(--dot-grad-dim);

	/* dots gradient-border-with-gap */
	--aic-dot-border-w: 1px;
	--aic-dot-gap: 2px;

	/* responsive size defaults = laptop tier (overridden by the media bands) */
	--w-0: 29.375vw;   /* active  (564px @1920) */
	--w-1: 15.7292vw;  /* second  (302px) */
	--w-2: 15.1562vw;  /* third   (291px) */
	--w-3: 10.9375vw;  /* fourth  (210px) */
	--aic-dot-size: 0.5729vw;  /* bullet (11px) */
	--aic-spread: 13.0208vw;    /* center-to-center step (300px) */
	--aic-depth: 4.6875vw;     /* translateZ per rank   (90px) */
	--aic-perspective: 78.125vw; /* (1500px) */
	--aic-stage-h: 19.7917vw;  /* (380px) */
	--aic-card-minh: 15.625vw; /* (300px) */
	--aic-visible-side: 3;

	position: relative;
	width: 100%;
	box-sizing: border-box;
	direction: rtl;
}

/* ---- large screens — PX ---- */
@media (min-width: 1920px) {
	.aic {
		--w-0: 564px;
		--w-1: 302px;
		--w-2: 291px;
		--w-3: 210px;
		--aic-dot-size: 18px;
		--aic-spread: 250px;
		--aic-depth: 90px;
		--aic-perspective: 1500px;
		--aic-stage-h: 380px;
		--aic-card-minh: 300px;
		--aic-visible-side: 3;
	}
}

/* ---- laptops — VW relative to a 1920px design (px / 19.2) ---- */
@media (min-width: 768px) and (max-width: 1919.98px) {
	.aic {
		--w-0: 29.375vw;
		--w-1: 15.7292vw;
		--w-2: 15.1562vw;
		--w-3: 10.9375vw;
		--aic-dot-size: 1vw;
		--aic-spread: 13.0208vw;
		--aic-depth: 4.6875vw;
		--aic-perspective: 78.125vw;
		--aic-stage-h: 19.7917vw;
		--aic-card-minh: 15.625vw;
		--aic-visible-side: 3;
	}
}

/* ---- mobile — VW relative to a 767px screen (px / 7.67) ---- */
@media (max-width: 767.98px) {
	.aic {
		--w-0: 73.5332vw;
		--w-1: 39.3742vw;
		--w-2: 37.94vw;
		--w-3: 27.3794vw;
		--aic-dot-size: 2.5vw;
		--aic-spread: 32.5945vw;
		--aic-depth: 11.734vw;
		--aic-perspective: 195.5671vw;
		--aic-stage-h: 49.5437vw;
		--aic-card-minh: 39.1134vw;
		--aic-visible-side: 1;
	}
}

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

/* ---- stage / track ---- */
.aic-stage {
	position: relative;
	width: 100%;
	/* fit the active (scale 1) card: its layout height = min-height + paddings + borders */
	height: max(
		var(--aic-stage-h),
		calc(var(--aic-card-minh) + 2 * (var(--aic-gap) + var(--aic-pad) + var(--aic-border-w)))
	);
	overflow: hidden;
}

.aic-track {
	position: absolute;
	inset: 0;
}

/* ---- card ---- */
.aic-card {
	--pos: 0;
	--abs: 0;

	position: absolute;
	top: 50%;
	left: 50%;
	width: var(--w-0);              /* uniform base size — ranks differ via scale */
	min-height: var(--aic-card-minh);
	display: flex;
	align-items: center;
	justify-content: center;
	padding: calc(var(--aic-gap) + var(--aic-pad));
	border: var(--aic-border-w) solid transparent;
	border-radius: var(--aic-radius);
	color: var(--aic-text);
	background:
		var(--aic-fill-grad) padding-box,
		var(--aic-border-grad) border-box;
	box-shadow: inset 0 0 0 var(--aic-gap) var(--aic-gap-color); /* the gap ring */
	will-change: transform;
	transition:
		transform var(--aic-transition) cubic-bezier(.22,.61,.36,1),
		opacity var(--aic-transition) ease,
		background var(--aic-transition) ease;
	transform:
		translate(-50%, -50%)
		translateX(var(--aic-tx))
		scale(var(--aic-scale));
	opacity: calc(1 - var(--abs) * var(--aic-fade));
	cursor: pointer;
	overflow: hidden;
}

/* per-rank scale (×0.8 steps) + explicit offset + border gradient.
   offsets (× base width): rank1 = gap from active; rank2/3 = half behind the one in front. */
.aic-card[data-pos="0"]  { --aic-scale: 1;     --aic-tx: 0; }

.aic-card[data-pos="1"]  { --aic-scale: .6;   --aic-tx: calc(var(--w-0) *  0.85); --aic-border-grad: var(--bd-rank1); }
.aic-card[data-pos="-1"] { --aic-scale: .6;   --aic-tx: calc(var(--w-0) * -0.85); --aic-border-grad: var(--bd-rank1); }

.aic-card[data-pos="2"]  { --aic-scale: .52;  --aic-tx: calc(var(--w-0) *  1.1); --aic-border-grad: var(--bd-rank2); }
.aic-card[data-pos="-2"] { --aic-scale: .52;  --aic-tx: calc(var(--w-0) * -1.1); --aic-border-grad: var(--bd-rank2); }

.aic-card[data-pos="3"],
.aic-card[data-pos="4"]  { --aic-scale: .45; --aic-tx: calc(var(--w-0) *  1.3); --aic-border-grad: var(--bd-rank3); }
.aic-card[data-pos="-3"],
.aic-card[data-pos="-4"] { --aic-scale: .45; --aic-tx: calc(var(--w-0) * -1.3); --aic-border-grad: var(--bd-rank3); }

@media (max-width:767px){
	.aic-card[data-pos="1"]  { --aic-scale: .6;   --aic-tx: calc(var(--w-0) *  0.3); --aic-border-grad: var(--bd-rank1); }
	.aic-card[data-pos="-1"] { --aic-scale: .6;   --aic-tx: calc(var(--w-0) * -0.3); --aic-border-grad: var(--bd-rank1); }
	.aic-card[data-pos="2"],.aic-card[data-pos="-2"],.aic-card[data-pos="3"],.aic-card[data-pos="-3"],.aic-card[data-pos="4"],.aic-card[data-pos="-4"]{opacity:0!important;}
}

.aic-card.is-active {
	--aic-fill-grad: var(--grad-active);
	--aic-border-grad: var(--grad-active);
	cursor: default;
}

.aic-card.is-far {
	opacity: 0;
	pointer-events: none;
}

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

/* ---- navigation dots ---- */
.aic-dots {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 10px;
	margin-top:0!important;
}

.aic-dot {
	position: relative;
	flex: 0 0 auto;
	width: var(--aic-dot-size);
	height: var(--aic-dot-size);
	aspect-ratio: 1;
	padding: 0;
	border: var(--aic-dot-border-w) solid transparent;
	border-radius: 50%;
	background:
		var(--dot-fill) padding-box,
		var(--dot-grad) border-box;
	box-shadow: inset 0 0 0 var(--aic-dot-gap) var(--aic-gap-color);
	cursor: pointer;
	user-select: none;
	-webkit-user-select: none;
	transition: transform .2s ease, background .2s ease;
	-webkit-appearance: none;
	appearance: none;
}

.aic-dot:hover { transform: scale(1.15); }
.aic-dot.is-active { --dot-fill: var(--dot-grad); transform: scale(1.2); }

.aic-card:focus-visible,
.aic-dot:focus-visible {
	outline: 2px solid #1E6FA8;
	outline-offset: 3px;
}

/* ---- reduced motion ---- */
@media (prefers-reduced-motion: reduce) {
	.aic-card {
		transition: opacity .2s ease, background .2s ease;
		transform:
			translate(-50%, -50%)
			translateX(var(--aic-tx))
			scale(var(--aic-scale));
	}
}

/* ==========================================================================
   Editor carousel mode (v1.1.0) — the carousel runs inside the Elementor
   editor too. Side cards are "click to center" only: their inner container
   ignores the pointer so a click centers the slide instead of editing a
   scaled-down element. The active slide is fully editable.
   ========================================================================== */
.aic.is-ready.is-editor .aic-card:not(.is-active) > * {
	pointer-events: none;
}
.aic.is-ready.is-editor .aic-card:not(.is-active):hover {
	filter: brightness(1.15);
}

/* ==========================================================================
   Editor / no-JS fallback: when the carousel controller hasn't initialised
   (Elementor editor, or JS disabled) show the slides as a simple editable
   grid so each container can be edited comfortably.
   ========================================================================== */
.aic:not(.is-ready) .aic-stage {
	height: auto;
	overflow: visible;
	perspective: none;
}
.aic:not(.is-ready) .aic-track {
	position: static;
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
	justify-content: center;
	transform: none;
}
.aic:not(.is-ready) .aic-card {
	position: relative;
	top: auto;
	left: auto;
	transform: none;
	opacity: 1;
	width: 100%;
	max-width: 560px;
}
.aic:not(.is-ready) .aic-dots { display: none; }