/* ── Elemance Buttons Widget ───────────────────── */
.elmc-btn-wrap,
.elmc-btn-wrap * ,
.elmc-btn-wrap *::before,
.elmc-btn-wrap *::after {
	box-sizing: border-box;
}

.elmc-btn {
	position: relative;
	display: inline-block;
	text-decoration: none;
	border-radius: 10px;
	cursor: pointer;
	max-width: 100%;
}

.elmc-btn:hover,
.elmc-btn:focus {
	text-decoration: none;
}

.elmc-btn__content {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	background-color: #6c63ff;
	color: #ffffff;
	border-radius: 8px;
	border: 2px solid transparent;
	font-weight: 700;
	white-space: nowrap;
	transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease;
	z-index: 1;
}

.elmc-btn__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 16px;
	line-height: 1;
}

.elmc-btn__icon svg { width: 1em; height: 1em; fill: currentColor; }

/* ── Sizes ─────────────────────────────────────── */
.elmc-btn--sm .elmc-btn__content { padding: 8px 18px;  font-size: 13px; }
.elmc-btn--md .elmc-btn__content { padding: 13px 28px; font-size: 15px; }
.elmc-btn--lg .elmc-btn__content { padding: 17px 38px; font-size: 17px; }

/* ── Shadow toggle ─────────────────────────────── */
.elmc-btn--shadow .elmc-btn__content {
	box-shadow: 0 8px 24px rgba(108,99,255,0.4);
}

/* ════ 1. SOLID ═══════════════════════════════════ */
.elmc-btn--solid:hover .elmc-btn__content {
	transform: translateY(-3px);
	box-shadow: 0 10px 28px rgba(0,0,0,0.18);
}

/* ════ 2. OUTLINE ═════════════════════════════════ */
.elmc-btn--outline .elmc-btn__content {
	background-color: transparent;
	color: #6c63ff;
	border-color: #6c63ff;
}

.elmc-btn--outline:hover .elmc-btn__content {
	background-color: #6c63ff;
	color: #ffffff;
}

/* ════ 3. GRADIENT ════════════════════════════════ */
.elmc-btn--gradient .elmc-btn__content {
	--elmc-grad-a: #6c63ff;
	--elmc-grad-b: #a29bfe;
	--elmc-grad-c: #00c9a7;
	background: linear-gradient(120deg, var(--elmc-grad-a), var(--elmc-grad-b), var(--elmc-grad-c));
	background-size: 200% auto;
	background-position: 0% 50%;
	border: none;
	transition: background-position 0.5s ease, transform 0.25s ease, box-shadow 0.25s ease;
}

.elmc-btn--gradient:hover .elmc-btn__content {
	background-position: 100% 50%;
	transform: translateY(-2px);
}

/* ════ 4. ICON SLIDE ═══════════════════════════════ */
.elmc-btn--icon-slide .elmc-btn__icon {
	opacity: 0;
	max-width: 0;
	overflow: hidden;
	transition: opacity 0.3s ease, max-width 0.3s ease, transform 0.3s ease, margin 0.3s ease;
}

.elmc-btn--icon-slide .elmc-btn__icon:first-child {
	transform: translateX(-12px);
}

.elmc-btn--icon-slide .elmc-btn__icon:last-child {
	transform: translateX(12px);
}

.elmc-btn--icon-slide:hover .elmc-btn__icon {
	opacity: 1;
	max-width: 40px;
	transform: translateX(0);
}

.elmc-btn--icon-slide:hover .elmc-btn__icon:first-child {
	margin-right: 2px;
}

.elmc-btn--icon-slide:hover .elmc-btn__icon:last-child {
	margin-left: 2px;
}

/* ════ 5. BORDER GLOW (rotating light) ════════════ */
.elmc-btn--border-glow {
	--elmc-glow-a: #6c63ff;
	--elmc-glow-b: #00c9a7;
	--elmc-glow-speed: 3s;
	padding: 2px;
	overflow: hidden;
	background: #13131f;
}

.elmc-btn--border-glow::before {
	content: '';
	position: absolute;
	top: 50%;
	left: 50%;
	width: 250%;
	padding-top: 250%;
	background: conic-gradient(
		from 0deg,
		transparent 0%,
		transparent 78%,
		var(--elmc-glow-a) 92%,
		var(--elmc-glow-b) 98%,
		transparent 100%
	);
	transform: translate(-50%, -50%) rotate(0deg);
	animation: elmc-btn-glow-spin var(--elmc-glow-speed) linear infinite;
	z-index: 0;
}

.elmc-btn--border-glow .elmc-btn__content {
	background-color: #13131f;
	border: none;
	position: relative;
	z-index: 1;
}

@keyframes elmc-btn-glow-spin {
	to { transform: translate(-50%, -50%) rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
	.elmc-btn--border-glow::before { animation: none; }
	.elmc-btn--solid:hover .elmc-btn__content,
	.elmc-btn--gradient:hover .elmc-btn__content { transform: none; }
}