/* ==========================================================
   Global Button System
   File: /css/buttons.css

   Requires component and design tokens from variables.css.
   All standard Avada buttons and form submit buttons use the
   primary button style by default.
   ========================================================== */


/* ==========================================================
   1. DEFAULT BUTTONS
   ========================================================== */

a.fusion-button,
button.fusion-button,
input.fusion-button,
form button[type="submit"],
form input[type="submit"],
.fusion-form button[type="submit"],
.fusion-form input[type="submit"],
.fusion-form .fusion-button {
	background: var(--button-primary-background) !important;

	border-width: var(--border-width-button) !important;
	border-style: solid !important;
	border-color: var(--button-primary-border) !important;
	border-radius: var(--radius-button) !important;

	color: var(--button-primary-text) !important;
	font-size: var(--type-button-size) !important;

	padding:
		var(--button-padding-block)
		var(--button-padding-inline) !important;

	box-sizing: border-box;

	position: relative;

	cursor: pointer;

	box-shadow: var(--shadow-button) !important;

	transform:
		translateY(0)
		rotate(0deg)
		scale(1);

	transform-origin: center center;

	will-change:
		transform,
		box-shadow;

	transition:
		background-color var(--transition-standard),
		border-color var(--transition-standard),
		color var(--transition-standard),
		box-shadow var(--transition-shadow),
		transform var(--transition-spring);
}


/* ----------------------------------------------------------
   Avada nested button text
   ---------------------------------------------------------- */

a.fusion-button .fusion-button-text,
button.fusion-button .fusion-button-text,
.fusion-form .fusion-button .fusion-button-text,
a.fusion-button span,
button.fusion-button span {
	color: var(--button-primary-text) !important;
	transition: color var(--transition-standard);
}


/* ==========================================================
   2. HOVER STATE
   ========================================================== */

a.fusion-button:hover,
button.fusion-button:hover,
input.fusion-button:hover,
form button[type="submit"]:hover,
form input[type="submit"]:hover,
.fusion-form button[type="submit"]:hover,
.fusion-form input[type="submit"]:hover,
.fusion-form .fusion-button:hover {
	background: var(--button-primary-background-hover) !important;
	border-color: var(--button-primary-border-hover) !important;
	color: var(--button-primary-text-hover) !important;

	transform:
		translateY(-4px)
		rotate(1.25deg)
		scale(1.05);

	box-shadow: var(--shadow-button-hover) !important;
}


a.fusion-button:hover .fusion-button-text,
button.fusion-button:hover .fusion-button-text,
.fusion-form .fusion-button:hover .fusion-button-text,
a.fusion-button:hover span,
button.fusion-button:hover span {
	color: var(--button-primary-text-hover) !important;
}


/* ==========================================================
   3. ACTIVE / PRESSED STATE
   ========================================================== */

a.fusion-button:active,
button.fusion-button:active,
input.fusion-button:active,
form button[type="submit"]:active,
form input[type="submit"]:active,
.fusion-form button[type="submit"]:active,
.fusion-form input[type="submit"]:active,
.fusion-form .fusion-button:active {
	background: var(--button-primary-background-active) !important;

	transform:
		translateY(-1px)
		rotate(3.125deg)
		scale(1);

	box-shadow: var(--shadow-button-active) !important;

	transition-duration: var(--duration-fast);
}


/* ==========================================================
   4. KEYBOARD FOCUS
   ========================================================== */

a.fusion-button:focus-visible,
button.fusion-button:focus-visible,
input.fusion-button:focus-visible,
form button[type="submit"]:focus-visible,
form input[type="submit"]:focus-visible,
.fusion-form button[type="submit"]:focus-visible,
.fusion-form input[type="submit"]:focus-visible,
.fusion-form .fusion-button:focus-visible {
	outline:
		3px solid
		var(--color-focus) !important;

	outline-offset: 4px;
}


/* ==========================================================
   5. SECONDARY BUTTON
   Add the CSS class: secondary-button
   ========================================================== */

a.fusion-button.secondary-button,
button.fusion-button.secondary-button,
input.fusion-button.secondary-button,
.fusion-form .fusion-button.secondary-button {
	background: var(--button-secondary-background) !important;

	border-width: var(--border-width-button) !important;
	border-style: solid !important;
	border-color: var(--button-secondary-border) !important;

	color: var(--button-secondary-text) !important;
}


a.fusion-button.secondary-button .fusion-button-text,
button.fusion-button.secondary-button .fusion-button-text,
.fusion-form .fusion-button.secondary-button .fusion-button-text,
a.fusion-button.secondary-button span,
button.fusion-button.secondary-button span {
	color: var(--button-secondary-text) !important;
}


/* Secondary hover */

a.fusion-button.secondary-button:hover,
button.fusion-button.secondary-button:hover,
input.fusion-button.secondary-button:hover,
.fusion-form .fusion-button.secondary-button:hover {
	background: var(--button-secondary-background-hover) !important;
	border-color: var(--button-secondary-border-hover) !important;
	color: var(--button-secondary-text-hover) !important;

	transform:
		translateY(-4px)
		rotate(1.25deg)
		scale(1.05);

	box-shadow: var(--shadow-button-hover) !important;
}


a.fusion-button.secondary-button:hover .fusion-button-text,
button.fusion-button.secondary-button:hover .fusion-button-text,
.fusion-form .fusion-button.secondary-button:hover .fusion-button-text,
a.fusion-button.secondary-button:hover span,
button.fusion-button.secondary-button:hover span {
	color: var(--button-secondary-text-hover) !important;
}


/* Secondary active */

a.fusion-button.secondary-button:active,
button.fusion-button.secondary-button:active,
input.fusion-button.secondary-button:active,
.fusion-form .fusion-button.secondary-button:active {
	background: var(--color-action-active) !important;
	border-color: var(--color-action-active) !important;
	color: var(--button-secondary-text-hover) !important;

	transform:
		translateY(-1px)
		rotate(3.125deg)
		scale(1);

	box-shadow: var(--shadow-button-active) !important;
}


/* ==========================================================
   6. PLAIN BUTTON
   Add the CSS class: plain-button

   Keeps the button colors but removes the tactile animation
   and offset shadow.
   ========================================================== */

a.fusion-button.plain-button,
button.fusion-button.plain-button,
input.fusion-button.plain-button,
.fusion-form .fusion-button.plain-button {
	box-shadow: none !important;
	transform: none !important;
}


a.fusion-button.plain-button:hover,
button.fusion-button.plain-button:hover,
input.fusion-button.plain-button:hover,
.fusion-form .fusion-button.plain-button:hover,
a.fusion-button.plain-button:active,
button.fusion-button.plain-button:active,
input.fusion-button.plain-button:active,
.fusion-form .fusion-button.plain-button:active {
	box-shadow: none !important;
	transform: none !important;
}


/* ==========================================================
   7. DISABLED BUTTONS
   ========================================================== */

a.fusion-button[aria-disabled="true"],
button.fusion-button:disabled,
input.fusion-button:disabled,
form button[type="submit"]:disabled,
form input[type="submit"]:disabled,
.fusion-form button[type="submit"]:disabled,
.fusion-form input[type="submit"]:disabled,
.fusion-form .fusion-button[aria-disabled="true"] {
	background: var(--color-action-disabled) !important;
	border-color: var(--color-action-disabled) !important;
	color: var(--color-text-muted) !important;

	cursor: not-allowed;

	box-shadow: none !important;
	transform: none !important;

	opacity: 0.7;
}


/* ==========================================================
   8. ICONS
   Keeps Avada button icons aligned with the text color
   ========================================================== */

a.fusion-button i,
button.fusion-button i,
.fusion-form .fusion-button i,
a.fusion-button svg,
button.fusion-button svg,
.fusion-form .fusion-button svg {
	color: currentColor !important;
	fill: currentColor;
}


/* ==========================================================
   9. WRAPPER OVERFLOW
   Prevents tactile shadows from being clipped
   ========================================================== */

.fusion-button-wrapper,
.fusion-form .fusion-form-submit-field,
.fusion-form .fusion-form-field {
	overflow: visible !important;
}


/* ==========================================================
   10. REDUCED MOTION
   ========================================================== */

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

	a.fusion-button,
	button.fusion-button,
	input.fusion-button,
	form button[type="submit"],
	form input[type="submit"],
	.fusion-form button[type="submit"],
	.fusion-form input[type="submit"],
	.fusion-form .fusion-button {
		transition:
			background-color var(--transition-fast),
			border-color var(--transition-fast),
			color var(--transition-fast),
			box-shadow var(--transition-fast) !important;
	}

	a.fusion-button:hover,
	button.fusion-button:hover,
	input.fusion-button:hover,
	form button[type="submit"]:hover,
	form input[type="submit"]:hover,
	.fusion-form button[type="submit"]:hover,
	.fusion-form input[type="submit"]:hover,
	.fusion-form .fusion-button:hover,
	a.fusion-button:active,
	button.fusion-button:active,
	input.fusion-button:active,
	form button[type="submit"]:active,
	form input[type="submit"]:active,
	.fusion-form button[type="submit"]:active,
	.fusion-form input[type="submit"]:active,
	.fusion-form .fusion-button:active {
		transform: none !important;
	}
}


/* ==========================================================
   11. AVADA FLAT BUTTON SHADOW OVERRIDE

   Avada applies:
   .fusion-button.button-flat { box-shadow: none !important; }

   These selectors restore the design-system shadow tokens.
   Keep this section after the reduced-motion media query.
   ========================================================== */

html body a.fusion-button.button-flat,
html body button.fusion-button.button-flat,
html body input.fusion-button.button-flat,
html body .fusion-form .fusion-button.button-flat,
html body form button[type="submit"].fusion-button.button-flat,
html body form input[type="submit"].fusion-button.button-flat {
	box-shadow: var(--shadow-button) !important;
}


html body a.fusion-button.button-flat:hover,
html body button.fusion-button.button-flat:hover,
html body input.fusion-button.button-flat:hover,
html body .fusion-form .fusion-button.button-flat:hover,
html body form button[type="submit"].fusion-button.button-flat:hover,
html body form input[type="submit"].fusion-button.button-flat:hover {
	box-shadow: var(--shadow-button-hover) !important;
}


html body a.fusion-button.button-flat:active,
html body button.fusion-button.button-flat:active,
html body input.fusion-button.button-flat:active,
html body .fusion-form .fusion-button.button-flat:active,
html body form button[type="submit"].fusion-button.button-flat:active,
html body form input[type="submit"].fusion-button.button-flat:active {
	box-shadow: var(--shadow-button-active) !important;
}


/* Preserve intentional no-shadow states after the Avada override */

html body a.fusion-button.button-flat.plain-button,
html body button.fusion-button.button-flat.plain-button,
html body input.fusion-button.button-flat.plain-button,
html body .fusion-form .fusion-button.button-flat.plain-button,
html body a.fusion-button.button-flat[aria-disabled="true"],
html body button.fusion-button.button-flat:disabled,
html body input.fusion-button.button-flat:disabled,
html body .fusion-form .fusion-button.button-flat[aria-disabled="true"] {
	box-shadow: none !important;
}


/* ==========================================================
   12. TOUCH INPUT

   Prevent touch browsers from latching the hover state after
   a tap. The existing :active state remains the single source
   of press animation for all buttons.
   ========================================================== */

@media (hover: none) and (pointer: coarse) {

	a.fusion-button:hover:not(:active),
	button.fusion-button:hover:not(:active),
	input.fusion-button:hover:not(:active),
	form button[type="submit"]:hover:not(:active),
	form input[type="submit"]:hover:not(:active),
	.fusion-form .fusion-button:hover:not(:active) {
		background: var(--button-primary-background) !important;
		border-color: var(--button-primary-border) !important;
		color: var(--button-primary-text) !important;
		box-shadow: var(--shadow-button) !important;
		transform: translateY(0) rotate(0deg) scale(1);
	}

	a.fusion-button.secondary-button:hover:not(:active),
	button.fusion-button.secondary-button:hover:not(:active),
	input.fusion-button.secondary-button:hover:not(:active),
	.fusion-form .fusion-button.secondary-button:hover:not(:active) {
		background: var(--button-secondary-background) !important;
		border-color: var(--button-secondary-border) !important;
		color: var(--button-secondary-text) !important;
	}
}