/* AutoStar — Section 3 "Premium Auto Care Services".
   Vertical service tabs + before/after comparison slider.
   Elementor lays everything out with flex containers; these rules only add the
   things containers can't do (tab active state, panel show/hide, the slider). */

/* ---------------- Service tabs (left, dark panel) ---------------- */
.as-svc-tab {
	cursor: pointer;
	border-radius: 10px;
	transition: background .2s ease;
}
.as-svc-tab:hover { background: rgba( 255, 255, 255, .06 ); }
.as-svc-tab.is-active { background: var( --e-global-color-primary ); }

/* orange bullet before each tab label (white when active) */
.as-svc-tab .elementor-heading-title { position: relative; padding-left: 20px; }
.as-svc-tab .elementor-heading-title::before {
	content: "";
	position: absolute;
	left: 0; top: 50%;
	width: 8px; height: 8px;
	margin-top: -4px;
	border-radius: 50%;
	background: var( --e-global-color-primary );
	transition: background .2s ease;
}
.as-svc-tab.is-active .elementor-heading-title::before { background: #fff; }

/* ---------------- Content panels (right) ---------------- */
.as-svc-panel { display: none; }
.as-svc-panel.is-active { display: flex; }

/* ---------------- Before / After comparison slider ---------------- */
.as-ba {
	position: relative;
	width: 100%;
	height: 300px;
	border-radius: 16px;
	overflow: hidden;
	user-select: none;
	touch-action: none;
}
/* The two native Elementor Image widgets fill the comparison box identically. */
.as-ba .elementor-widget-image { position: absolute; inset: 0; margin: 0; }
.as-ba .elementor-widget-image .elementor-widget-container,
.as-ba .elementor-widget-image .elementor-widget-container a,
.as-ba .elementor-widget-image img { width: 100%; height: 100%; }
.as-ba .elementor-widget-image img { object-fit: cover; display: block; border-radius: 0; }

/* After = clean car (bottom layer). */
.as-ba__after { z-index: 1; }
/* Before = same scene, revealed from the left via clip-path (updated by JS),
   with a grimy filter so it reads as "dirty". Remove the filter once you drop
   a real dirty photo into the Before image widget. */
.as-ba__before {
	z-index: 2;
	clip-path: inset( 0 50% 0 0 );
	filter: grayscale( 0.8 ) brightness( 0.5 ) contrast( 1.05 ) sepia( 0.15 );
}

.as-ba__label {
	position: absolute;
	bottom: 18px;
	color: #fff;
	font-family: "Inter", sans-serif;
	font-size: 14px;
	font-weight: 600;
	letter-spacing: .2px;
	z-index: 3;
	pointer-events: none;
}
.as-ba__label--before { left: 20px; }
.as-ba__label--after  { right: 20px; }

.as-ba__divider {
	position: absolute;
	top: 0; bottom: 0;
	left: 50%;
	width: 2px;
	margin-left: -1px;
	background: #fff;
	z-index: 4;
	pointer-events: none;
}
.as-ba__handle {
	position: absolute;
	top: 50%; left: 50%;
	width: 38px; height: 38px;
	margin: -19px 0 0 -19px;
	border-radius: 50%;
	background: #fff;
	box-shadow: 0 2px 10px rgba( 0, 0, 0, .35 );
	z-index: 5;
	pointer-events: none;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #17171a;
	font-size: 12px;
}
.as-ba__handle::before { content: "\2039\00a0\203a"; letter-spacing: 2px; font-weight: 700; }

/* The actual control: a full-cover transparent range input */
.as-ba__range {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	margin: 0;
	opacity: 0;
	cursor: ew-resize;
	z-index: 6;
}

/* ---------------- Tags (pills) ---------------- */
.as-svc-tags { display: flex; flex-wrap: wrap; gap: 8px; }
.as-svc-tag {
	display: inline-flex;
	align-items: center;
	background: #EDEDF0;
	color: #3a3a3f;
	font-family: "Inter", sans-serif;
	font-size: 12.5px;
	line-height: 1;
	padding: 8px 14px;
	border-radius: 20px;
	white-space: nowrap;
}

/* ---------------- Editor: show every panel so all are editable ---------------- */
.elementor-editor-active .as-svc-panel { display: flex !important; }

/* In the editor, un-stack the two comparison images at natural height so each
   is visible and clickable for editing. The overlay/clip/filter/height still
   apply on the front-end (these overrides are scoped to the editor only). */
.elementor-editor-active .as-ba { height: auto !important; overflow: visible; }
.elementor-editor-active .as-ba .elementor-widget-image { position: relative !important; inset: auto !important; }
.elementor-editor-active .as-ba .elementor-widget-image,
.elementor-editor-active .as-ba .elementor-widget-image .elementor-widget-container { height: auto !important; }
.elementor-editor-active .as-ba .elementor-widget-image img { height: auto !important; margin-bottom: 10px; }
.elementor-editor-active .as-ba__before { clip-path: none !important; filter: none !important; }
.elementor-editor-active .as-ba__divider,
.elementor-editor-active .as-ba__handle,
.elementor-editor-active .as-ba__range,
.elementor-editor-active .as-ba__label { display: none !important; } /* hide slider chrome while editing */

/* ---------------- Responsive ---------------- */
@media (max-width: 767px) {
	.as-ba { height: 220px; }
}