/* H-Lead Button — Primary / Secondary / Ghost / Link / Link-02 */

.hl-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--hl-space-8);
	font-family: var(--hl-font-family);
	font-weight: var(--hl-font-weight-semibold);
	font-size: var(--hl-text-h5-size);
	line-height: var(--hl-text-h5-line-height);
	text-decoration: none;
	cursor: pointer;
	border: none;
	box-sizing: border-box;
	transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease, opacity 0.6s ease, transform 0.6s ease;
}

.hl-btn--disabled {
	cursor: not-allowed;
	pointer-events: none;
}

/* Filled styles share the same box shape */
.hl-btn--primary,
.hl-btn--secondary,
.hl-btn--ghost,
.hl-btn--ghost-02 {
	padding: var(--hl-space-12) var(--hl-space-32);
	border-radius: var(--hl-radius-8);
}

/* Primary */
.hl-btn--primary {
	background-color: var(--hl-btn-primary-surface);
	color: var(--hl-btn-primary-content) !important;
}

.hl-btn--primary:hover,
.hl-btn--primary:active {
	background-color: var(--hl-btn-primary-surface-hover);
}

.hl-btn--primary:focus-visible {
	background-color: var(--hl-btn-primary-surface);
	box-shadow: 0 0 0 3px var(--hl-btn-primary-focus-ring);
}

.hl-btn--primary.hl-btn--disabled {
	background-color: var(--hl-btn-primary-surface-disabled);
	color: var(--hl-btn-primary-content-disabled);
}

/* Secondary */
.hl-btn--secondary {
	background-color: var(--hl-btn-secondary-surface);
	color: var(--hl-btn-secondary-content);
}

.hl-btn--secondary:hover {
	background-color: var(--hl-btn-secondary-surface-hover);
}

.hl-btn--secondary:active {
	background-color: var(--hl-btn-secondary-surface-pressed);
	color: var(--hl-btn-secondary-content-pressed);
}

.hl-btn--secondary:focus-visible {
	box-shadow: 0 0 0 3px var(--hl-btn-secondary-focus-ring);
}

.hl-btn--secondary.hl-btn--disabled {
	background-color: var(--hl-btn-secondary-surface-disabled);
	color: var(--hl-btn-secondary-content-disabled);
}

/* Ghost */
.hl-btn--ghost {
	background-color: transparent;
	border: 1px solid var(--hl-btn-ghost-stroke-default);
	color: var(--hl-btn-ghost-content-default);
}

.hl-btn--ghost:hover {
	background-color: var(--hl-btn-ghost-surface-hover);
}

.hl-btn--ghost:active {
	border-color: var(--hl-btn-ghost-stroke-pressed);
	color: var(--hl-btn-ghost-content-pressed);
}

.hl-btn--ghost:focus-visible {
	background-color: var(--hl-btn-ghost-surface-hover);
	box-shadow: 0 0 0 3px var(--hl-btn-ghost-focus-ring);
}

.hl-btn--ghost.hl-btn--disabled {
	border-color: var(--hl-btn-ghost-stroke-disabled);
	color: var(--hl-btn-ghost-content-disabled);
}

/* Ghost-02 — white outline variant for dark surfaces (hero, banners).
 * Figma: hero 'Button Set' ghost button, stroke #ffffff. */
.hl-btn--ghost-02 {
	background-color: transparent;
	border: 1px solid var(--hl-color-white);
	color: var(--hl-color-white);
}

.hl-btn--ghost-02:hover {
	background-color: var(--hl-btn-ghost-surface-hover);
	color: var(--hl-btn-ghost-content-default);
	border-color: var(--hl-btn-ghost-surface-hover);
	/* no token for white@12% overlay */
}

/* Link / Link-02 */
.hl-btn--link,
.hl-btn--link-02 {
	padding: 0;
	background: none;
	font-size: var(--hl-text-link-size);
	line-height: var(--hl-text-link-line-height);
	gap: var(--hl-space-8);
}

.hl-btn--link {
	color: var(--hl-btn-link-content-default);
}

.hl-btn--link:hover {
	color: var(--hl-btn-link-content-hover);
}

.hl-btn--link:active {
	color: var(--hl-btn-link-content-pressed);
}

.hl-btn--link.hl-btn--disabled {
	color: var(--hl-btn-link-content-disabled);
}

.hl-btn--link-02 {
	color: var(--hl-color-white);
}

.hl-btn--link-02:hover {
	color: var(--hl-color-yellow-500);
}

.hl-btn__icon {
	display: inline-block;
	width: var(--hl-space-20);
	height: var(--hl-space-20);
	flex-shrink: 0;
	background-color: currentColor;
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='5' y1='12' x2='19' y2='12'/%3E%3Cpolyline points='12 5 19 12 12 19'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='5' y1='12' x2='19' y2='12'/%3E%3Cpolyline points='12 5 19 12 12 19'/%3E%3C/svg%3E");
	-webkit-mask-size: contain;
	mask-size: contain;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
}

.elementor-widget-hl-accordion+.elementor-widget-hl-section-title+.elementor-widget-hl-button {
	text-align: center;
}