/* =========================================
   ROOT
========================================= */
.ud-component-wrapper-37132 {
	--ud-primary: #1188ff;
	--ud-text: #111111;
	--ud-text-light: #666666;
	--ud-bg: #ffffff;
	--ud-bg-alt: #f6f6f6;
	--ud-border: #eaeaea;

	width: 100%;
	font-family: inherit;
	color: var(--ud-text);
}

/* =========================================
   MODAL / WRAPPER
========================================= */
.ud-component-wrapper-37132 .ud-modal {
	background: var(--ud-bg);
	width: 100%;
}

.ud-component-wrapper-37132 .ud-header {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 18px 16px;
	border-bottom: 1px solid var(--ud-border);
}

.ud-component-wrapper-37132 .ud-brand {
	display: flex;
	align-items: center;
	gap: 12px;
	font-weight: 700;
	font-size: 18px;
}

.ud-component-wrapper-37132 .ud-brand img {
	width: 28px;
	height: 28px;
	object-fit: contain;
	display: block;
}

.ud-component-wrapper-37132 .ud-modal-content {
	padding: 18px 16px 22px;
}

/* =========================================
   HERO AREA
========================================= */
.ud-component-wrapper-37132 .ud-hero-area {
	width: 100%;
	margin-bottom: 14px;
}

/* =========================================
   ASPECT RATIO SYSTEM
========================================= */
.aspect-1-1 {
	aspect-ratio: 1 / 1;
}

.aspect-4-3 {
	aspect-ratio: 4 / 3;
}

.aspect-3-2 {
	aspect-ratio: 3 / 2;
}

.aspect-16-9 {
	aspect-ratio: 16 / 9;
}

.aspect-21-9 {
	aspect-ratio: 21 / 9;
}

/* =========================================
   MAIN COMPARISON SLIDER
========================================= */
.ud-component-wrapper-37132 .ba-carousel-main-container {
	position: relative;
	width: 100%;
	overflow: hidden;
	border-radius: 20px;
	background: var(--ud-bg-alt);
	margin: 0;
	padding: 0;
}

.ud-component-wrapper-37132 .ba-slides-wrapper,
.ud-component-wrapper-37132 .ba-slide {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
}

.ud-component-wrapper-37132 .ba-image {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	overflow: hidden;
}

.ud-component-wrapper-37132 .ba-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center center;
	display: block;
}

.ud-component-wrapper-37132 .ba-image-after {
	z-index: 1;
}

.ud-component-wrapper-37132 .ba-image-before {
	z-index: 2;
}

.ud-component-wrapper-37132 .ba-divider {
	position: absolute;
	top: 0;
	bottom: 0;
	width: 2px;
	background: rgba(255,255,255,0.92);
	transform: translateX(-50%);
	z-index: 15;
	pointer-events: none;
}

.ud-component-wrapper-37132 .ba-handle {
	position: absolute;
	top: 50%;
	transform: translate(-50%, -50%);
	z-index: 20;
	width: 46px;
	height: 46px;
	border-radius: 999px;
	background: #ffffff;
	border: 1px solid rgba(0,0,0,0.08);
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 6px 18px rgba(0,0,0,0.14);
	cursor: ew-resize;
}

.ud-component-wrapper-37132 .ba-handle svg {
	width: 20px;
	height: 20px;
	display: block;
}

.ud-component-wrapper-37132 .ba-label {
	position: absolute;
	top: 16px;
	z-index: 21;
	padding: 10px 18px;
	border-radius: 999px;
	background: rgba(0,0,0,0.62);
	color: #ffffff;
	font-size: 13px;
	font-weight: 700;
	line-height: 1;
}

.ud-component-wrapper-37132 .ba-label-before,
.ud-component-wrapper-37132 .ba-label.before {
	left: 16px;
}

.ud-component-wrapper-37132 .ba-label-after,
.ud-component-wrapper-37132 .ba-label.after {
	right: 16px;
}

/* =========================================
   SINGLE HERO CAROUSEL (BEFORE / AFTER TABS)
========================================= */
.ud-component-wrapper-37132 .ud-single-hero-carousel {
	position: relative;
	width: 100%;
	overflow: hidden;
	border-radius: 20px;
	background: var(--ud-bg-alt);
}

.ud-component-wrapper-37132 .ud-single-image-wrap {
	position: relative;
	width: 100%;
	height: 100%;
}

.ud-component-wrapper-37132 .ud-single-image {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center center;
	display: block;
}

.ud-component-wrapper-37132 .ud-single-nav {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: 20;
	width: 42px;
	height: 42px;
	border: none;
	border-radius: 999px;
	background: rgba(255,255,255,0.94);
	box-shadow: 0 4px 12px rgba(0,0,0,0.12);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 24px;
	line-height: 1;
	cursor: pointer;
	color: #111;
	padding: 0;
}

.ud-component-wrapper-37132 .ud-single-prev {
	left: 12px;
}

.ud-component-wrapper-37132 .ud-single-next {
	right: 12px;
}

/* =========================================
   TABS
========================================= */
.ud-component-wrapper-37132 .ud-tabs-wrap,
.ud-component-wrapper-37132 .ud-tabs {
	display: flex;
	gap: 10px;
	flex-wrap: wrap;
	margin: 14px 0 18px;
}

.ud-component-wrapper-37132 .ud-tab-btn {
	appearance: none;
	border: 2px solid #222;
	background: #ffffff;
	color: #111111;
	padding: 10px 16px;
	border-radius: 999px;
	font-size: 14px;
	font-weight: 700;
	line-height: 1;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	transition: all 0.2s ease;
	box-shadow: none;
}

.ud-component-wrapper-37132 .ud-tab-btn.active {
	background: linear-gradient(90deg, #2f6bff, #5aa0ff);
	border-color: #1d5eff;
	color: #ffffff;
}

.ud-component-wrapper-37132 .ud-tab-count {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 24px;
	height: 24px;
	padding: 0 8px;
	border-radius: 999px;
	background: rgba(0,0,0,0.08);
	font-size: 13px;
	font-weight: 700;
}

.ud-component-wrapper-37132 .ud-tab-btn.active .ud-tab-count {
	background: rgba(255,255,255,0.22);
}

/* =========================================
   CONTENT GRID
========================================= */
.ud-component-wrapper-37132 .ud-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 18px;
}

.ud-component-wrapper-37132 .ud-title {
	font-size: 22px;
	line-height: 1.15;
	font-weight: 800;
	margin: 0 0 12px;
	color: var(--ud-text);
}

.ud-component-wrapper-37132 .ud-desc {
	font-size: 15px;
	line-height: 1.6;
	color: var(--ud-text-light);
	margin-bottom: 14px;
}

.ud-component-wrapper-37132 .ud-desc.summary {
	font-size: 16px;
	line-height: 1.5;
	color: var(--ud-text);
	margin-bottom: 16px;
}

.ud-component-wrapper-37132 .ud-desc p {
	margin: 0 0 12px;
}

.ud-component-wrapper-37132 .ud-desc p:last-child {
	margin-bottom: 0;
}

/* =========================================
   SERVICES
========================================= */
.ud-component-wrapper-37132 .ud-services-wrap {
	margin-top: 8px;
}

.ud-component-wrapper-37132 .ud-section-subtitle {
	font-size: 15px;
	font-weight: 800;
	margin: 0 0 12px;
	color: var(--ud-text);
}

.ud-component-wrapper-37132 .ud-services-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.ud-component-wrapper-37132 .ud-services-list li {
	display: flex;
	align-items: center;
	gap: 10px;
	font-size: 15px;
	color: var(--ud-text);
}

.ud-component-wrapper-37132 .ud-services-list svg {
	flex: 0 0 20px;
	color: #3ba55d;
}

/* =========================================
   META CARD
========================================= */
.ud-component-wrapper-37132 .ud-meta-card {
	background: #fafafa;
	border: 1px solid var(--ud-border);
	border-radius: 18px;
	padding: 18px 16px;
}

.ud-component-wrapper-37132 .ud-price-label {
	font-size: 14px;
	color: var(--ud-text-light);
	margin-bottom: 6px;
}

.ud-component-wrapper-37132 .ud-price {
	font-size: 24px;
	line-height: 1.1;
	font-weight: 800;
	color: var(--ud-text);
	margin-bottom: 10px;
}

.ud-component-wrapper-37132 .ud-duration {
	font-size: 14px;
	line-height: 1.5;
	color: var(--ud-text-light);
	margin-bottom: 6px;
}

.ud-component-wrapper-37132 .ud-vehicle-row {
	margin-bottom: 0;
}

/* =========================================
   GALLERY
========================================= */
.ud-component-wrapper-37132 .ud-gallery,
.ud-component-wrapper-37132 #ud-gallery-container {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 10px;
	margin-top: 16px;
}

.ud-component-wrapper-37132 .ud-gallery-item {
	position: relative;
	width: 100%;
	border-radius: 14px;
	overflow: hidden;
	background: #f5f5f5;
	cursor: pointer;
}

.ud-component-wrapper-37132 .ud-gallery-item img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center center;
	display: block;
}

.ud-component-wrapper-37132 .ud-gallery-empty {
	font-size: 14px;
	color: var(--ud-text-light);
	padding: 8px 0;
}

/* =========================================
   CTA
========================================= */
.ud-component-wrapper-37132 .ud-cta-wrap {
	margin-top: 18px;
}

.ud-component-wrapper-37132 .ud-cta-btn {
	display: block;
	width: 100%;
	text-align: center;
	text-decoration: none;
	padding: 14px 18px;
	border-radius: 999px;
	background: linear-gradient(90deg, #2f6bff, #5aa0ff);
	color: #ffffff;
	font-size: 16px;
	font-weight: 700;
	line-height: 1.2;
	box-shadow: 0 8px 20px rgba(47,107,255,0.22);
}

/* =========================================
   FIXES
========================================= */
.ud-component-wrapper-37132 .ba-carousel-main-container,
.ud-component-wrapper-37132 .ud-single-hero-carousel {
	margin-bottom: 0 !important;
	padding-bottom: 0 !important;
	display: block;
}

.ud-component-wrapper-37132 .ba-image,
.ud-component-wrapper-37132 .ud-single-image-wrap {
	background: var(--ud-bg-alt);
}

/* =========================================
   MOBILE / DESKTOP
========================================= */
@media (min-width: 768px) {
	.ud-component-wrapper-37132 .ud-modal-content {
		padding: 22px;
	}

	.ud-component-wrapper-37132 .ud-grid {
		grid-template-columns: minmax(0, 1fr) 280px;
		align-items: start;
	}

	.ud-component-wrapper-37132 .ud-gallery,
	.ud-component-wrapper-37132 #ud-gallery-container {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

@media (max-width: 767px) {
	.ud-component-wrapper-37132 .ud-title {
		font-size: 20px;
	}

	.ud-component-wrapper-37132 .ud-modal-content {
		padding: 16px;
	}

	.ud-component-wrapper-37132 .ud-gallery,
	.ud-component-wrapper-37132 #ud-gallery-container {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}" and here is the current js "class BeforeAfterJobPopupHandler extends elementorModules.frontend.handlers.Base {
	getDefaultSettings() {
		return {
			selectors: {
				heroContainer: '#ud-hero-container',
				galleryContainer: '#ud-gallery-container',
				tabs: '.ud-tab-btn',
				dataScript: '.ud-popup-data-37132'
			}
		};
	}

	getDefaultElements() {
		const s = this.getSettings('selectors');

		return {
			$heroContainer: this.$element.find(s.heroContainer),
			$galleryContainer: this.$element.find(s.galleryContainer),
			$tabs: this.$element.find(s.tabs),
			$dataScript: this.$element.find(s.dataScript)
		};
	}

	onInit() {
		super.onInit();
		this.activeTab = 'all';
		this.currentBeforeIndex = 0;
		this.currentAfterIndex = 0;
		this.bindEvents();
		this.renderCurrentView();
	}

	bindEvents() {
		this.elements.$tabs.off('click.udPopup').on('click.udPopup', (e) => {
			const $btn = jQuery(e.currentTarget);
			const tab = $btn.data('tab');

			this.elements.$tabs.removeClass('active');
			$btn.addClass('active');

			this.activeTab = tab;
			this.renderCurrentView();
		});

		this.elements.$galleryContainer.off('click.udGallery').on('click.udGallery', '.ud-gallery-item', (e) => {
			const $item = jQuery(e.currentTarget);
			const index = parseInt($item.attr('data-index'), 10);
			if (Number.isNaN(index)) return;

			this.handleGalleryClick(index);
		});
	}

	getData() {
		try {
			const raw = this.elements.$dataScript.text();
			return raw ? JSON.parse(raw) : null;
		} catch (e) {
			return null;
		}
	}

	getValidImages(images) {
		if (!Array.isArray(images)) return [];
		return images.filter(img => typeof img === 'string' && img.trim() !== '');
	}

	buildComparisonHero(beforeImage, afterImage, aspectClass = 'aspect-4-3') {
		return `
			<div class="ba-carousel-main-container ${aspectClass}" data-initial-pos="50">
				<div class="ba-slides-wrapper">
					<div class="ba-slide active" data-index="0">
						<div class="ba-image ba-image-after">
							<img src="${afterImage}" alt="">
						</div>

						<div class="ba-image ba-image-before">
							<img src="${beforeImage}" alt="">
						</div>

						<div class="ba-label ba-label-before">Before</div>
						<div class="ba-label ba-label-after">After</div>

						<div class="ba-divider"></div>

						<div class="ba-handle" aria-label="Comparison slider handle">
							<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
								<polyline points="15 18 9 12 15 6"></polyline>
								<polyline points="9 18 15 12 9 6"></polyline>
							</svg>
						</div>
					</div>
				</div>
			</div>
		`;
	}

	buildSingleHero(imageUrl, label = '', aspectClass = 'aspect-4-3', images = [], activeIndex = 0) {
		const hasMultiple = Array.isArray(images) && images.length > 1;

		return `
			<div class="ud-single-hero-carousel ${aspectClass}" data-active-index="${activeIndex}">
				<div class="ud-single-image-wrap">
					<img src="${imageUrl}" class="ud-single-image" alt="">
					${label ? `<div class="ba-label ${label.toLowerCase() === 'before' ? 'ba-label-before' : 'ba-label-after'}">${label}</div>` : ''}
				</div>

				${hasMultiple ? `
					<button class="ud-single-nav ud-single-prev" type="button" aria-label="Previous image">‹</button>
					<button class="ud-single-nav ud-single-next" type="button" aria-label="Next image">›</button>
				` : ''}
			</div>
		`;
	}

	buildGalleryHtml(images, aspectClass = 'aspect-4-3') {
		const validImages = this.getValidImages(images);

		if (!validImages.length) {
			return '<div class="ud-gallery-empty">No gallery images available.</div>';
		}

		return validImages.map((img, index) => `
			<div class="ud-gallery-item ${aspectClass}" data-index="${index}">
				<img src="${img}" loading="lazy" alt="">
			</div>
		`).join('');
	}

	renderCurrentView() {
		const data = this.getData();
		if (!data) return;

		const aspectClass = data.aspect_class || 'aspect-4-3';
		const beforeMain = data.before_image || '';
		const afterMain = data.after_image || '';
		const beforeGallery = this.getValidImages(data.before_gallery || []);
		const afterGallery = this.getValidImages(data.after_gallery || []);

		const beforeImages = beforeGallery.length ? beforeGallery : (beforeMain ? [beforeMain] : []);
		const afterImages = afterGallery.length ? afterGallery : (afterMain ? [afterMain] : []);
		const allImages = [...beforeImages, ...afterImages];

		if (this.activeTab === 'all') {
			const currentBefore = beforeImages[this.currentBeforeIndex] || beforeImages[0] || beforeMain;
			const currentAfter = afterImages[this.currentAfterIndex] || afterImages[0] || afterMain;

			this.elements.$heroContainer.html(
				this.buildComparisonHero(currentBefore, currentAfter, aspectClass)
			);

			this.elements.$galleryContainer.html(
				this.buildGalleryHtml(allImages, aspectClass)
			);

			this.initComparisonSlider();
			return;
		}

		if (this.activeTab === 'before') {
			const currentBefore = beforeImages[this.currentBeforeIndex] || beforeImages[0] || beforeMain;

			this.elements.$heroContainer.html(
				this.buildSingleHero(currentBefore, 'Before', aspectClass, beforeImages, this.currentBeforeIndex)
			);

			this.elements.$galleryContainer.html(
				this.buildGalleryHtml(beforeImages, aspectClass)
			);

			this.bindSingleHeroNav(beforeImages, 'before', aspectClass);
			return;
		}

		if (this.activeTab === 'after') {
			const currentAfter = afterImages[this.currentAfterIndex] || afterImages[0] || afterMain;

			this.elements.$heroContainer.html(
				this.buildSingleHero(currentAfter, 'After', aspectClass, afterImages, this.currentAfterIndex)
			);

			this.elements.$galleryContainer.html(
				this.buildGalleryHtml(afterImages, aspectClass)
			);

			this.bindSingleHeroNav(afterImages, 'after', aspectClass);
		}
	}

	handleGalleryClick(index) {
		const data = this.getData();
		if (!data) return;

		const aspectClass = data.aspect_class || 'aspect-4-3';
		const beforeMain = data.before_image || '';
		const afterMain = data.after_image || '';
		const beforeGallery = this.getValidImages(data.before_gallery || []);
		const afterGallery = this.getValidImages(data.after_gallery || []);

		const beforeImages = beforeGallery.length ? beforeGallery : (beforeMain ? [beforeMain] : []);
		const afterImages = afterGallery.length ? afterGallery : (afterMain ? [afterMain] : []);

		if (this.activeTab === 'before') {
			this.currentBeforeIndex = index;
			this.elements.$heroContainer.html(
				this.buildSingleHero(beforeImages[this.currentBeforeIndex], 'Before', aspectClass, beforeImages, this.currentBeforeIndex)
			);
			this.bindSingleHeroNav(beforeImages, 'before', aspectClass);
			return;
		}

		if (this.activeTab === 'after') {
			this.currentAfterIndex = index;
			this.elements.$heroContainer.html(
				this.buildSingleHero(afterImages[this.currentAfterIndex], 'After', aspectClass, afterImages, this.currentAfterIndex)
			);
			this.bindSingleHeroNav(afterImages, 'after', aspectClass);
			return;
		}

		const totalBefore = beforeImages.length;

		if (index < totalBefore) {
			this.currentBeforeIndex = index;
		} else {
			this.currentAfterIndex = index - totalBefore;
		}

		const currentBefore = beforeImages[this.currentBeforeIndex] || beforeImages[0] || beforeMain;
		const currentAfter = afterImages[this.currentAfterIndex] || afterImages[0] || afterMain;

		this.elements.$heroContainer.html(
			this.buildComparisonHero(currentBefore, currentAfter, aspectClass)
		);

		this.initComparisonSlider();
	}

	bindSingleHeroNav(images, type, aspectClass) {
		const $hero = this.elements.$heroContainer;

		$hero.off('click.udSingleNav').on('click.udSingleNav', '.ud-single-nav', (e) => {
			const isPrev = jQuery(e.currentTarget).hasClass('ud-single-prev');

			if (type === 'before') {
				this.currentBeforeIndex = isPrev
					? (this.currentBeforeIndex - 1 + images.length) % images.length
					: (this.currentBeforeIndex + 1) % images.length;

				$hero.html(
					this.buildSingleHero(images[this.currentBeforeIndex], 'Before', aspectClass, images, this.currentBeforeIndex)
				);
				this.bindSingleHeroNav(images, 'before', aspectClass);
			} else {
				this.currentAfterIndex = isPrev
					? (this.currentAfterIndex - 1 + images.length) % images.length
					: (this.currentAfterIndex + 1) % images.length;

				$hero.html(
					this.buildSingleHero(images[this.currentAfterIndex], 'After', aspectClass, images, this.currentAfterIndex)
				);
				this.bindSingleHeroNav(images, 'after', aspectClass);
			}
		});

		const carousel = $hero.find('.ud-single-hero-carousel')[0];
		if (!carousel || images.length < 2) return;

		let startX = 0;
		let startY = 0;
		let isSwiping = false;

		carousel.addEventListener('touchstart', (e) => {
			if (!e.touches || !e.touches.length) return;
			startX = e.touches[0].clientX;
			startY = e.touches[0].clientY;
			isSwiping = true;
		}, { passive: true });

		carousel.addEventListener('touchend', (e) => {
			if (!isSwiping || !e.changedTouches || !e.changedTouches.length) return;

			const endX = e.changedTouches[0].clientX;
			const endY = e.changedTouches[0].clientY;
			const diffX = endX - startX;
			const diffY = endY - startY;

			isSwiping = false;

			if (Math.abs(diffX) < 40) return;
			if (Math.abs(diffY) > Math.abs(diffX)) return;

			if (type === 'before') {
				this.currentBeforeIndex = diffX < 0
					? (this.currentBeforeIndex + 1) % images.length
					: (this.currentBeforeIndex - 1 + images.length) % images.length;

				$hero.html(
					this.buildSingleHero(images[this.currentBeforeIndex], 'Before', aspectClass, images, this.currentBeforeIndex)
				);
				this.bindSingleHeroNav(images, 'before', aspectClass);
			} else {
				this.currentAfterIndex = diffX < 0
					? (this.currentAfterIndex + 1) % images.length
					: (this.currentAfterIndex - 1 + images.length) % images.length;

				$hero.html(
					this.buildSingleHero(images[this.currentAfterIndex], 'After', aspectClass, images, this.currentAfterIndex)
				);
				this.bindSingleHeroNav(images, 'after', aspectClass);
			}
		}, { passive: true });
	}

	initComparisonSlider() {
		const container = this.elements.$heroContainer.find('.ba-carousel-main-container')[0];
		const beforeLayer = this.elements.$heroContainer.find('.ba-image-before')[0];
		const divider = this.elements.$heroContainer.find('.ba-divider')[0];
		const handle = this.elements.$heroContainer.find('.ba-handle')[0];

		if (!container || !beforeLayer || !divider || !handle) return;

		let isDragging = false;

		const setPosition = (percent) => {
			percent = Math.max(0, Math.min(100, percent));
			beforeLayer.style.clipPath = `polygon(0 0, ${percent}% 0, ${percent}% 100%, 0 100%)`;
			divider.style.left = `${percent}%`;
			handle.style.left = `${percent}%`;
		};

		const move = (e) => {
			if (!isDragging) return;

			const rect = container.getBoundingClientRect();
			let clientX;

			if (e.touches && e.touches.length) {
				clientX = e.touches[0].clientX;
			} else {
				clientX = e.clientX;
			}

			const x = clientX - rect.left;
			const percent = (x / rect.width) * 100;
			setPosition(percent);
		};

		const start = (e) => {
			isDragging = true;
			move(e);
		};

		const stop = () => {
			isDragging = false;
		};

		container.addEventListener('mousedown', start);
		window.addEventListener('mousemove', move);
		window.addEventListener('mouseup', stop);

		container.addEventListener('touchstart', start, { passive: false });
		window.addEventListener('touchmove', move, { passive: false });
		window.addEventListener('touchend', stop);
		window.addEventListener('touchcancel', stop);

		setPosition(50);
	}
}

jQuery(window).on('elementor/frontend/init', () => {
	elementorFrontend.hooks.addAction(
		'frontend/element_ready/before_after_job_popup_37132.default',
		($element) => {
			elementorFrontend.elementsHandler.addHandler(BeforeAfterJobPopupHandler, { $element });
		}
	);
});" please update the full css file if needed, but if it's actually the JS that needs updating or both, can you just send me the full replacements for both files so I can just replace them and be done.