/**
 * Wallxer Core: styles shared by every widget.
 * Tokens come from the theme (--wlx-*); each use carries a fallback so the
 * widgets still render if the theme changes.
 */

/* --------------------------------------------------------------------------
   Full window width: neutralise the parent Elementor container.
   -------------------------------------------------------------------------- */

.elementor .e-con:has(> .elementor-widget.wlx-full-yes),
.elementor .e-con:has(> .e-con-inner > .elementor-widget.wlx-full-yes) {
	--content-width: 100%;
	--padding-top: 0px;
	--padding-right: 0px;
	--padding-bottom: 0px;
	--padding-left: 0px;
}

/* --------------------------------------------------------------------------
   Button with the round arrow
   -------------------------------------------------------------------------- */

.wlx-btn {
	--wlx-btn-bg: var(--wlx-ink, #14141c);
	--wlx-btn-bg-hover: var(--wlx-ink-2, #26263a);
	--wlx-btn-color: #ffffff;
	--wlx-btn-arrow-bg: var(--wlx-brand, #5b63d3);
	--wlx-btn-arrow-color: #ffffff;

	display: inline-flex;
	gap: 14px;
	align-items: center;
	padding: 15px 26px;
	border-radius: var(--wlx-radius-pill, 999px);
	font-size: 16.5px;
	font-weight: 600;
	line-height: 1.4;
	color: var(--wlx-btn-color);
	text-decoration: none;
	background: var(--wlx-btn-bg);
	box-shadow: var(--wlx-shadow-button, 0 10px 26px rgba(20, 20, 40, 0.18));
	transition: transform 0.24s cubic-bezier(0.3, 0.8, 0.3, 1), box-shadow 0.24s, background-color 0.24s;
}

.wlx-btn--arrow {
	padding: 9px 12px 9px 26px;
}

.wlx-btn:hover,
.wlx-btn:focus-visible {
	color: var(--wlx-btn-color);
	background: var(--wlx-btn-bg-hover);
	box-shadow: 0 18px 34px rgba(20, 20, 40, 0.24);
	transform: translateY(-3px);
}

.wlx-btn__arrow {
	display: grid;
	flex: none;
	place-items: center;
	width: 38px;
	height: 38px;
	border-radius: 50%;
	font-size: 17px;
	line-height: 1;
	color: var(--wlx-btn-arrow-color);
	background: var(--wlx-btn-arrow-bg);
	transition: transform 0.24s cubic-bezier(0.3, 0.8, 0.3, 1), background-color 0.24s, color 0.24s;
}

.wlx-btn:hover .wlx-btn__arrow,
.wlx-btn:focus-visible .wlx-btn__arrow {
	color: var(--wlx-btn-arrow-bg);
	background: var(--wlx-btn-arrow-color);
	transform: translateX(3px) rotate(-8deg);
}

@media (prefers-reduced-motion: reduce) {

	.wlx-btn,
	.wlx-btn__arrow {
		transition: none !important;
	}

	.wlx-btn:hover,
	.wlx-btn:focus-visible,
	.wlx-btn:hover .wlx-btn__arrow,
	.wlx-btn:focus-visible .wlx-btn__arrow {
		transform: none !important;
	}
}

/* --------------------------------------------------------------------------
   Section heading block shared by widgets (label pill, heading, text)
   -------------------------------------------------------------------------- */

.wlx-head {
	margin-bottom: clamp(40px, 5vw, 64px);
	text-align: center;
}

.wlx-head__eyebrow {
	display: inline-flex;
	gap: 9px;
	align-items: center;
	margin: 0 0 22px;
	padding: 7px 16px;
	border: 1px solid var(--wlx-line-strong, #dcdef0);
	border-radius: 999px;
	font-size: 13.5px;
	font-weight: 600;
	line-height: 1.6;
	letter-spacing: 0.06em;
	color: var(--wlx-muted-2, #5a5a6e);
	text-transform: uppercase;
	white-space: nowrap;
	background-color: var(--wlx-tint, #fbfbfe);
}

.wlx-head--dot .wlx-head__eyebrow::before {
	content: "";
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background-color: var(--wlx-brand, #5b63d3);
}

.elementor .wlx-head__title,
.wlx-head .wlx-head__title {
	max-width: 20em;
	margin: 0 0 16px;
	font-family: var(--wlx-font-heading, "Anek Bangla", "Hind Siliguri", sans-serif);
	font-size: clamp(28px, 4vw, 44px);
	font-weight: 700;
	line-height: 1.3;
	letter-spacing: -0.015em;
	color: var(--wlx-ink, #14141c);
}

.wlx-head__title .wlx-hl {
	font-family: var(--wlx-font-accent, "Baloo Da 2", "Anek Bangla", sans-serif);
	font-weight: 700;
	color: var(--wlx-brand, #5b63d3);
}

.wlx-head .wlx-head__text {
	max-width: 50ch;
	margin: 0;
	font-size: 18px;
	line-height: 1.85;
	color: var(--wlx-muted, #4e4e63);
}

/*
 * Width-limited lines sit in the middle when centred. The alignment control
 * sets --wlx-head-ml to 0 for left alignment.
 */
.wlx-head .wlx-head__title,
.wlx-head .wlx-head__text {
	margin-right: auto;
	margin-left: var(--wlx-head-ml, auto);
}

.wlx-head > :last-child {
	margin-bottom: 0;
}