/**
 * Gravity Forms submit button -- matches core/button's Primary CTA - Fill
 * style (see assets/css/buttons.css and theme.json's
 * styles.blocks["core/button"].variations.primary-fill).
 *
 * Gravity Forms renders its own markup, not a core/button block, so none of
 * the theme.json variations or the is-style-primary-fill class apply here
 * at all. Confirmed live against this site's actual rendered form output
 * (the lead form embedded on the sample page and homepage, form ID 1):
 *
 *   <input type="submit" id="gform_submit_button_1"
 *          class="gform_button button" ... value="Submit" />
 *
 * "gform_button button" is the stable, form-instance-independent class
 * pair (the numeric "gform_submit_button_1" id is specific to this one
 * form and not something to select on); "input.gform_button.button" below
 * targets that reliably across any Gravity Forms instance on this site.
 *
 * This is a plain <input type="submit">, not a <button> or <a> -- this
 * matters for what actually ports over from buttons.css:
 *
 * - Default look, :hover, and :focus-visible/:focus all port over
 *   directly. background, border, border-radius, box-shadow, outline, and
 *   transitions all apply completely normally to <input> elements; there
 *   is nothing input-specific to work around for these.
 *
 * - The :active fade can NOT reuse the ::before overlay technique from
 *   buttons.css. Generated content (::before/::after) does not apply to
 *   replaced elements like <input> in any browser -- this is a CSS
 *   specification restriction (replaced elements don't have a principal
 *   box that generated content can attach to), not a browser support gap,
 *   so there's no vendor-prefix or version workaround for it on the input
 *   itself.
 *
 *   The obvious alternative -- putting the overlay on the surrounding
 *   .gform_footer wrapper instead -- was checked against Gravity Forms'
 *   own shipped CSS (wp-content/plugins/gravityforms/assets/css/dist/
 *   theme.min.css) and rejected: .gform_footer has its own padding
 *   (16px 0, or 16px 0 10px 30% for left/right-label form layouts) and is
 *   a flex container that can hold more than just the submit button (e.g.
 *   a "Previous" button, save-and-continue link). An overlay sized to that
 *   box would not hug the button's own edges -- it would render as an
 *   oversized, offset panel, not a precise fill of the button itself.
 *
 *   Given that, :active here falls back to a direct background transition
 *   on the input itself. Because the default background is a gradient and
 *   the active background is a solid color, this will SNAP instantly
 *   rather than cross-fade smoothly -- the same underlying CSS limitation
 *   (browsers don't interpolate a background-image/gradient to a solid
 *   color via transition) that the ::before overlay in buttons.css was
 *   built specifically to work around on core/button. That workaround's
 *   mechanism isn't available on a replaced element, so this is a known,
 *   deliberately-accepted visual difference from the core button's active
 *   state on this one specific control, not an oversight.
 *
 * Verified against Gravity Forms' own CSS (theme.min.css and
 * gravity-forms-theme-foundation.min.css) that nothing there sets
 * border, border-radius, padding, or font on the submit button beyond a
 * bare ".button{background-color:#fff;color:#6b7280;...}" rule (no
 * !important on those two properties) -- "input.gform_button.button"
 * below is more specific (0,2,1 vs 0,1,0) and safely overrides it
 * regardless of stylesheet load order.
 */

input.gform_button.button {
	background: var(--wp--preset--gradient--green-gradient);
	border: 3px solid var(--wp--preset--color--green);
	border-radius: 9999px;
	color: var(--wp--preset--color--light);
	font-family: var(--wp--preset--font-family--poppins);
	font-size: var(--wp--preset--font-size--body);
	font-weight: 600;
	text-transform: uppercase;
	padding: 12px 33px 13.19px;
	transition: background 0.15s ease, background-color 0.15s ease, box-shadow 0.15s ease;
}

input.gform_button.button:hover {
	box-shadow: inset 0 0 0 5px #FFFFFF;
}

input.gform_button.button:active {
	background: var(--wp--preset--color--green);
	color: var(--wp--preset--color--light);
}

input.gform_button.button:focus {
	outline-color: transparent;
	outline-offset: 0;
	outline-style: none;
	outline-width: 0;
}

input.gform_button.button:focus-visible {
	outline-color: var(--wp--preset--color--secondary-blue);
	outline-offset: 2px;
	outline-style: solid;
	outline-width: 2px;
}