/**
 * Aurora — Phlox Contact Form button hover animation
 *
 * Replicates the Phlox-style radial fill animation on Phlox/Elementor
 * Contact Form widget submit buttons. Because <input> elements don't
 * support pseudo-elements, we animate a radial-gradient background-image
 * (size 0% → 250%) on top of the button's normal background-color.
 *
 * Targets: .elementor-widget-aux_contact_form input[type="submit"]
 *
 * @package Aurora
 */

/* Specificity boosted with .elementor-widget to outweigh Elementor's
   per-element generated CSS. !important on background-image / background-size
   is required because Elementor's Group_Control_Background sets
   background-image: initial when only color is configured, which would
   clobber our radial gradient. Phlox main.css defaults the button bg to
   rgb(61, 61, 61) so we override that too — otherwise the dark fill default
   would equal the bg and the animation would be invisible. */
.elementor-widget.elementor-widget-aux_contact_form input[type="submit"],
.elementor-widget.elementor-widget-aux_contact_form input[type="reset"] {
	background-color: var(--aurora-cf-bg, transparent) !important;
	/* `circle farthest-corner` ensures the gradient's solid radius extends to
	   the farthest corner of the gradient image, so when bg-size grows the
	   solid disc actually reaches the button's rectangular corners. */
	background-image: radial-gradient(
		circle farthest-corner at center,
		var(--aurora-cf-fill, var(--e-global-color-text, #000000)) 0%,
		var(--aurora-cf-fill, var(--e-global-color-text, #000000)) 50%,
		transparent 51%
	) !important;
	background-size: 0% 0% !important;
	background-position: center center !important;
	background-repeat: no-repeat !important;
	transition:
		background-size 650ms cubic-bezier(0.75, 0.1, 0.25, 0.9),
		color 0.35s ease,
		border-color 0.35s ease !important;
}

.elementor-widget.elementor-widget-aux_contact_form input[type="submit"]:hover,
.elementor-widget.elementor-widget-aux_contact_form input[type="submit"]:focus-visible,
.elementor-widget.elementor-widget-aux_contact_form input[type="reset"]:hover,
.elementor-widget.elementor-widget-aux_contact_form input[type="reset"]:focus-visible {
	/* 300% gives the gradient image a generous size; combined with the
	   farthest-corner ending shape this guarantees coverage to all corners. */
	background-size: 300% 300% !important;
	color: var(--aurora-cf-text-hover, #ffffff) !important;
}