/*
 * USIT Animated Button — scoped styles.
 * Everything is namespaced under .usit-wrap / .usit-btn. No global selectors.
 *
 * Animation model (pure CSS, no JS):
 *   - Icon box is absolutely positioned; it travels from the start edge to the
 *     end edge by transitioning `inset-inline-start/end` between two calc() values.
 *   - Text is padded to make room for the icon, then slides the opposite way by
 *     exactly (icon width + gap), so the two swap places.
 */

.usit-wrap {
	/* Variant defaults live on the wrapper so Elementor controls
	   (set on .usit-btn) always win by inheritance order. */
	--usit-bg: #0b6661;
	--usit-color: #c7ff70;
	--usit-border-color: transparent;
	--usit-icon-bg: #c7ff70;
	--usit-icon-color: #0b6661;
	--usit-shadow: none;
	display: flex;
	width: 100%;
}

.usit-wrap.usit--light {
	--usit-bg: #ffffff;
	--usit-color: #1a1a1a;
	--usit-border-color: rgba(0, 0, 0, 0.06);
	--usit-icon-bg: #0b6661;
	--usit-icon-color: #c7ff70;
	--usit-shadow: 0 6px 18px rgba(11, 102, 97, 0.12);
}

.usit-btn {
	/* Geometry (overridable via Elementor controls). */
	--usit-pt: 4px;
	--usit-pr: 4px;
	--usit-pb: 4px;
	--usit-pl: 4px;
	--usit-icon-w: 50px;
	--usit-icon-h: 40px;
	--usit-icon-radius: 999px;
	--usit-glyph: 20px;
	--usit-gap: 12px;
	--usit-text-end: 20px;
	--usit-duration: 700ms;
	--usit-ease: ease-in-out;
	--usit-bw: 1px;
	/* Distance the text travels: it ends up inset by --usit-text-end from the edge. */
	--usit-shift: calc(var(--usit-icon-w) + var(--usit-gap) - var(--usit-text-end));

	position: relative;
	display: inline-flex;
	align-items: center;
	box-sizing: border-box;
	overflow: hidden;
	/* The icon is absolutely positioned, so reserve its height explicitly. */
	min-height: calc(var(--usit-icon-h) + var(--usit-pt) + var(--usit-pb) + (2 * var(--usit-bw)));
	padding: var(--usit-pt) var(--usit-pr) var(--usit-pb) var(--usit-pl);
	border: var(--usit-bw) solid var(--usit-border-color);
	border-radius: 999px;
	background-color: var(--usit-bg);
	color: var(--usit-color);
	box-shadow: var(--usit-shadow);
	text-decoration: none;
	cursor: pointer;
	isolation: isolate;
	transition:
		background-color var(--usit-duration) var(--usit-ease),
		border-color var(--usit-duration) var(--usit-ease),
		color var(--usit-duration) var(--usit-ease),
		box-shadow var(--usit-duration) var(--usit-ease);
}

.usit-btn:hover,
.usit-btn:focus-visible {
	background-color: var(--usit-bg-h, var(--usit-bg));
	border-color: var(--usit-border-color-h, var(--usit-border-color));
	color: var(--usit-color-h, var(--usit-color));
	text-decoration: none;
}

.usit-btn:focus-visible {
	outline: 2px solid var(--usit-focus, #0b6661);
	outline-offset: 3px;
}

/* ---------- Icon ---------- */
.usit-icon {
	position: absolute;
	top: 50%;
	z-index: 2;
	display: flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	width: var(--usit-icon-w);
	height: var(--usit-icon-h);
	border-radius: var(--usit-icon-radius);
	background-color: var(--usit-icon-bg);
	color: var(--usit-icon-color);
	font-size: var(--usit-glyph);
	line-height: 1;
	overflow: hidden;
	transform: translateY(-50%);
	transition:
		inset-inline-start var(--usit-duration) var(--usit-ease),
		inset-inline-end var(--usit-duration) var(--usit-ease),
		background-color var(--usit-duration) var(--usit-ease),
		color var(--usit-duration) var(--usit-ease);
}

.usit-btn:hover .usit-icon,
.usit-btn:focus-visible .usit-icon {
	background-color: var(--usit-icon-bg-h, var(--usit-icon-bg));
	color: var(--usit-icon-color-h, var(--usit-icon-color));
}

.usit-icon i,
.usit-icon svg,
.usit-icon img {
	display: block;
	width: var(--usit-glyph);
	height: var(--usit-glyph);
	font-size: var(--usit-glyph);
	line-height: 1;
	object-fit: contain;
	flex: none;
}
.usit-icon svg { fill: currentColor; }

/* ---------- Text ---------- */
.usit-text {
	display: block;
	white-space: nowrap;
	padding-inline: calc(var(--usit-icon-w) + var(--usit-gap)) var(--usit-text-end);
	transition: transform var(--usit-duration) var(--usit-ease);
}

/* ---------- Icon at start (default): icon moves to the end on hover ---------- */
.usit--icon-start .usit-icon {
	inset-inline-start: var(--usit-pl);
	inset-inline-end: auto;
}
.usit--icon-start .usit-btn:hover .usit-icon,
.usit--icon-start .usit-btn:focus-visible .usit-icon {
	inset-inline-start: calc(100% - var(--usit-icon-w) - var(--usit-pr));
}
.usit--icon-start .usit-btn:hover .usit-text,
.usit--icon-start .usit-btn:focus-visible .usit-text {
	transform: translateX(calc(-1 * var(--usit-shift)));
}
[dir="rtl"] .usit--icon-start .usit-btn:hover .usit-text,
[dir="rtl"] .usit--icon-start .usit-btn:focus-visible .usit-text {
	transform: translateX(var(--usit-shift));
}

/* ---------- Icon at end: mirrored, icon moves to the start on hover ---------- */
.usit--icon-end .usit-icon {
	inset-inline-end: var(--usit-pr);
	inset-inline-start: auto;
}
.usit--icon-end .usit-btn:hover .usit-icon,
.usit--icon-end .usit-btn:focus-visible .usit-icon {
	inset-inline-end: calc(100% - var(--usit-icon-w) - var(--usit-pl));
}
.usit--icon-end .usit-text {
	padding-inline: var(--usit-text-end) calc(var(--usit-icon-w) + var(--usit-gap));
}
.usit--icon-end .usit-btn:hover .usit-text,
.usit--icon-end .usit-btn:focus-visible .usit-text {
	transform: translateX(var(--usit-shift));
}
[dir="rtl"] .usit--icon-end .usit-btn:hover .usit-text,
[dir="rtl"] .usit--icon-end .usit-btn:focus-visible .usit-text {
	transform: translateX(calc(-1 * var(--usit-shift)));
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
	.usit-btn,
	.usit-icon,
	.usit-text {
		transition-duration: 0.01ms !important;
	}
}