.xtool-btn-group {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 16px;
}

.xtool-btn-group__item {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	text-decoration: none;
	line-height: 1;
	white-space: nowrap;
}

.xtool-btn-group__icon {
	display: inline-flex;
	flex-shrink: 0;
	font-size: 18px;
}

.xtool-btn-group__icon svg {
	width: 1em;
	height: 1em;
	fill: currentColor;
}

.xtool-btn-group__text {
	font-size: 15px;
	font-weight: 500;
}

/* Text variant — icon + text, no background */
.xtool-btn-group__item--text {
	color: #1a1814;
	transition: color 0.15s ease;
}

/* Filled variant — solid pill */
.xtool-btn-group__item--filled {
	position: relative;
	isolation: isolate;
	padding: 16px 32px;
	border-radius: 50px;
	background: #1c1c1e;
	color: #fff;
	transition: background-color 0.4s ease, color 0.4s ease;
}

/* Gradient hover crossfade. A gradient is an image, not a value the
   browser can interpolate, so it can never transition directly the way a
   plain background-color does — switching a background-image snaps
   instantly regardless of any `transition` declared on it. The hover
   gradient is painted on this ::before overlay instead (see the
   filled_hover_gradient control, which targets this selector), sitting
   behind the button's own icon/text and fading in via `opacity` — the
   normal gradient never moves, the hover gradient just fades over it.
   Harmless when no hover gradient is set (nothing to paint, opacity does
   nothing visible) and in Solid Color mode (the instant background-color
   swap on :hover already transitions smoothly on its own). */
.xtool-btn-group__item--filled::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 0;
	border-radius: inherit;
	opacity: 0;
	transition: opacity 0.4s ease;
	pointer-events: none;
}

.xtool-btn-group__item--filled:hover::before,
.xtool-btn-group__item--filled:focus-visible::before {
	opacity: 1;
}

.xtool-btn-group__item--filled .xtool-btn-group__icon,
.xtool-btn-group__item--filled .xtool-btn-group__text {
	position: relative;
	z-index: 1;
}

.xtool-btn-group__item--filled .xtool-btn-group__text {
	text-transform: uppercase;
	letter-spacing: 1px;
	font-weight: 600;
	font-size: 13px;
}

/* Outline variant — border only */
.xtool-btn-group__item--outline {
	padding: 16px 32px;
	border-radius: 50px;
	border-style: solid;
	border-width: 1.5px;
	border-color: #1a1814;
	background: transparent;
	color: #1a1814;
	transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease, border-width 0.15s ease;
}

.xtool-btn-group__item--outline .xtool-btn-group__text {
	text-transform: uppercase;
	letter-spacing: 1px;
	font-weight: 600;
	font-size: 13px;
}

/* Per-button responsive visibility (Content tab -> each Item ->
   Responsive Visibility). Deliberately self-contained media queries rather
   than reusing Elementor core's own `elementor-hidden-desktop`/`-tablet`/
   `-mobile` classes: those are Elementor internals with no stability
   guarantee, and this widget's own breakpoints then can't drift out of
   sync with the rest of Xtool (mobile <=767 / tablet 768-1024 /
   desktop >=1025 is the split used throughout this codebase).

   `display: none !important` is needed, not just `display: none`: the
   variant rules above set `display: inline-flex` on the same element at
   the same specificity, and Elementor's own per-instance generated CSS for
   this widget loads after this stylesheet — without the extra weight a
   hidden button would keep rendering. */
@media (max-width: 767px) {
	.xtool-btn-group__item--hide-mobile {
		display: none !important;
	}
}

@media (min-width: 768px) and (max-width: 1024px) {
	.xtool-btn-group__item--hide-tablet {
		display: none !important;
	}
}

@media (min-width: 1025px) {
	.xtool-btn-group__item--hide-desktop {
		display: none !important;
	}
}