/**
 * Brand buttons. PHP uses class on the <a>. Elementor CSS Classes land on the
 * widget wrapper — styles are forwarded to the inner .elementor-button.
 */

.btn-primary:not(.elementor-widget),
.btn-secondary:not(.elementor-widget),
.btn-text:not(.elementor-widget),
.elementor-widget-button.btn-primary .elementor-button,
.elementor-widget-button.btn-secondary .elementor-button,
.elementor-widget-button.btn-text .elementor-button,
.elementor-widget-html.btn-primary :is(a, button),
.elementor-widget-html.btn-secondary :is(a, button),
.elementor-widget-html.btn-text :is(a, button) {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--heinz-btn-gap);
	padding: var(--heinz-btn-pad-y) var(--heinz-btn-pad-x);
	border-radius: 0;
	border-style: solid;
	border-width: 1px;
	font-family: var(--heinz-font-body);
	font-size: var(--text-sm);
	line-height: var(--text-sm--line-height);
	font-weight: 500;
	letter-spacing: 0;
	text-transform: capitalize;
	text-decoration: none;
	cursor: pointer;
	box-shadow: none;
	fill: currentColor;
	transition: background-color var(--heinz-btn-transition), border-color var(--heinz-btn-transition), color var(--heinz-btn-transition), fill var(--heinz-btn-transition);
}

.btn-primary .elementor-button-content-wrapper,
.btn-secondary .elementor-button-content-wrapper,
.btn-text .elementor-button-content-wrapper {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--heinz-btn-gap);
}

.btn-primary svg,
.btn-primary i,
.btn-primary .btn-icon,
.btn-primary .elementor-button-icon,
.btn-secondary svg,
.btn-secondary i,
.btn-secondary .btn-icon,
.btn-secondary .elementor-button-icon,
.btn-text svg,
.btn-text i,
.btn-text .btn-icon,
.btn-text .elementor-button-icon {
	display: inline-flex;
	align-items: center;
	color: inherit;
	fill: currentColor;
	transition: transform var(--heinz-btn-transition), color var(--heinz-btn-transition), fill var(--heinz-btn-transition), opacity var(--heinz-btn-transition);
}

.btn-primary:hover svg,
.btn-primary:hover i,
.btn-primary:hover .btn-icon,
.btn-primary:hover .elementor-button-icon,
.btn-primary:focus-visible svg,
.btn-primary:focus-visible i,
.btn-primary:focus-visible .btn-icon,
.btn-primary:focus-visible .elementor-button-icon,
.btn-secondary:hover svg,
.btn-secondary:hover i,
.btn-secondary:hover .btn-icon,
.btn-secondary:hover .elementor-button-icon,
.btn-secondary:focus-visible svg,
.btn-secondary:focus-visible i,
.btn-secondary:focus-visible .btn-icon,
.btn-secondary:focus-visible .elementor-button-icon,
.elementor-widget-button.btn-primary .elementor-button:hover .elementor-button-icon,
.elementor-widget-button.btn-primary .elementor-button:focus-visible .elementor-button-icon,
.elementor-widget-button.btn-secondary .elementor-button:hover .elementor-button-icon,
.elementor-widget-button.btn-secondary .elementor-button:focus-visible .elementor-button-icon,
.elementor-widget-html.btn-primary :is(a, button):hover .btn-icon,
.elementor-widget-html.btn-primary :is(a, button):focus-visible .btn-icon,
.elementor-widget-html.btn-secondary :is(a, button):hover .btn-icon,
.elementor-widget-html.btn-secondary :is(a, button):focus-visible .btn-icon,
.btn-text:hover svg,
.btn-text:hover i,
.btn-text:hover .btn-icon,
.btn-text:hover .elementor-button-icon,
.btn-text:focus-visible svg,
.btn-text:focus-visible i,
.btn-text:focus-visible .btn-icon,
.btn-text:focus-visible .elementor-button-icon,
.elementor-widget-button.btn-text .elementor-button:hover .elementor-button-icon,
.elementor-widget-button.btn-text .elementor-button:focus-visible .elementor-button-icon,
.elementor-widget-html.btn-text :is(a, button):hover .btn-icon,
.elementor-widget-html.btn-text :is(a, button):focus-visible .btn-icon {
	transform: translateX(1px);
}

.btn-primary:not(.elementor-widget),
.elementor-widget-button.btn-primary .elementor-button,
.elementor-widget-html.btn-primary :is(a, button) {
	background-color: var(--heinz-color-primary);
	border-color: var(--heinz-color-primary);
	color: var(--heinz-color-text-dark) !important;
}

.btn-primary:not(.elementor-widget):hover,
.btn-primary:not(.elementor-widget):focus,
.elementor-widget-button.btn-primary .elementor-button:hover,
.elementor-widget-button.btn-primary .elementor-button:focus,
.elementor-widget-html.btn-primary :is(a, button):hover,
.elementor-widget-html.btn-primary :is(a, button):focus {
	background-color: var(--heinz-color-primary-hover);
	border-color: var(--heinz-color-primary-hover);
	color: var(--heinz-color-text-dark) !important;
	text-decoration: none;
}

.btn-secondary:not(.elementor-widget),
.elementor-widget-button.btn-secondary .elementor-button,
.elementor-widget-html.btn-secondary :is(a, button) {
	background-color: transparent;
	border-color: var(--heinz-color-border-subtle);
	color: var(--heinz-color-title) !important;
}

.btn-secondary:not(.elementor-widget):hover,
.btn-secondary:not(.elementor-widget):focus,
.elementor-widget-button.btn-secondary .elementor-button:hover,
.elementor-widget-button.btn-secondary .elementor-button:focus,
.elementor-widget-html.btn-secondary :is(a, button):hover,
.elementor-widget-html.btn-secondary :is(a, button):focus {
	background-color: var(--heinz-color-dark-surface);
	border-color: var(--heinz-color-border-subtle);
	color: var(--heinz-color-title) !important;
	text-decoration: none;
}

.btn-text:not(.elementor-widget),
.elementor-widget-button.btn-text .elementor-button,
.elementor-widget-html.btn-text :is(a, button) {
	padding-inline: 0;
	background-color: transparent;
	border-color: transparent;
	color: var(--heinz-color-primary) !important;
}

.btn-text:not(.elementor-widget):hover,
.btn-text:not(.elementor-widget):focus,
.elementor-widget-button.btn-text .elementor-button:hover,
.elementor-widget-button.btn-text .elementor-button:focus,
.elementor-widget-html.btn-text :is(a, button):hover,
.elementor-widget-html.btn-text :is(a, button):focus {
	background-color: transparent;
	border-color: transparent;
	color: var(--heinz-color-title) !important;
	text-decoration: none;
}

.btn-text:not(.elementor-widget):hover .btn-icon,
.btn-text:not(.elementor-widget):hover svg,
.btn-text:not(.elementor-widget):hover i,
.btn-text:not(.elementor-widget):focus .btn-icon,
.btn-text:not(.elementor-widget):focus svg,
.btn-text:not(.elementor-widget):focus i,
.elementor-widget-button.btn-text .elementor-button:hover .elementor-button-icon,
.elementor-widget-button.btn-text .elementor-button:focus .elementor-button-icon,
.elementor-widget-html.btn-text :is(a, button):hover .btn-icon,
.elementor-widget-html.btn-text :is(a, button):focus .btn-icon {
	color: var(--heinz-color-title);
	fill: currentColor;
}

.btn-primary:not(.elementor-widget):focus-visible,
.btn-secondary:not(.elementor-widget):focus-visible,
.btn-text:not(.elementor-widget):focus-visible,
.elementor-widget-button.btn-primary .elementor-button:focus-visible,
.elementor-widget-button.btn-secondary .elementor-button:focus-visible,
.elementor-widget-button.btn-text .elementor-button:focus-visible,
.elementor-widget-html.btn-primary :is(a, button):focus-visible,
.elementor-widget-html.btn-secondary :is(a, button):focus-visible,
.elementor-widget-html.btn-text :is(a, button):focus-visible {
	outline: 2px solid var(--heinz-color-primary);
	outline-offset: 3px;
}

.heinz-btn {
	position: relative;
	overflow: hidden;
}

.heinz-btn__bar {
	position: absolute;
	inset-inline: 0;
	inset-block-end: 0;
	height: 2px;
	opacity: 0;
	transform: scaleX(0);
	transform-origin: left center;
	pointer-events: none;
	background: var(--heinz-color-primary);
}

.btn-primary.heinz-btn .heinz-btn__bar {
	background: var(--heinz-color-text-dark);
}

.heinz-btn.is-loading {
	cursor: wait;
	pointer-events: none;
}

.heinz-btn.is-loading .btn-icon {
	opacity: 0;
	transform: translateX(6px);
}

.heinz-btn.is-loading .heinz-btn__bar {
	opacity: 1;
	animation: heinz-btn-bar 1.35s ease-in-out infinite;
}

@keyframes heinz-btn-bar {
	0% {
		transform: scaleX(0.08);
		transform-origin: left center;
	}

	50% {
		transform: scaleX(1);
		transform-origin: left center;
	}

	51% {
		transform-origin: right center;
	}

	100% {
		transform: scaleX(0.08);
		transform-origin: right center;
	}
}

@media (prefers-reduced-motion: reduce) {
	.heinz-btn.is-loading .heinz-btn__bar {
		animation: none;
		transform: scaleX(1);
		opacity: 1;
	}
}