/**
 * A11y fix — Priority #3 (search modal): Elementor Pro's own frontend CSS
 * for this widget (widget-search-form.min.css) sets
 * `.elementor-search-form button:focus { outline: 0 }`, which strips focus
 * outline from any real <button> inside the form. The modal's close control
 * is a div with role="button", so it's unaffected and keeps its native
 * outline, but the submit button added by a11y-elementor-search-modal.js is
 * a real <button>, so it loses its outline to that rule.
 *
 * That selector's specificity (.elementor-search-form button:focus) beats a
 * same-depth class selector like .elementor-search-form__submit:focus-visible
 * (one more element in the chain), so !important is needed here — confirmed
 * against the actual shipped widget-search-form.min.css rule, not assumed.
 */
/**
 * Both rules below are scoped to .beaverrun-a11y-search-submit specifically
 * (not the bare .elementor-search-form__submit class) so they only ever
 * touch the button a11y-elementor-search-modal.js creates — never a native
 * submit button the plugin might start rendering for this skin in some
 * future update, which could ship with its own intentional background/
 * outline styling we shouldn't force override.
 */

/**
 * The plugin's own CSS never sets a background-color for this skin (that
 * control only renders for the 'classic' skin), so the browser's default
 * <button> background (OS-themed grey) shows through on the button added
 * by a11y-elementor-search-modal.js.
 */
.elementor-search-form__submit.beaverrun-a11y-search-submit {
	background: transparent !important;
}

.elementor-search-form__submit.beaverrun-a11y-search-submit:focus-visible {
	outline: revert !important;
}

/**
 * The plugin's own flex layout for this skin's container was only ever
 * authored for two children (input, flex-basis:100%, then the close
 * button) — confirmed in widget-search-form.min.css, no gap/margin exists
 * for a third flex item. Our submit button sits between them with nothing
 * pushing it away from the close button, so it visually runs into it.
 */
.elementor-search-form__submit.beaverrun-a11y-search-submit {
	margin-inline-end: 16px;
}

/**
 * The close control (a div with role="button", not a real <button>) never
 * gets a cursor:pointer rule anywhere in the plugin's CSS — confirmed
 * directly, unlike .elementor-search-form__toggle, which does. Pre-existing
 * plugin gap, not something introduced by this file; scoped to this
 * widget's own container rather than the bare .dialog-lightbox-close-button
 * class, which Elementor also reuses for unrelated dialogs (e.g. the image
 * lightbox) elsewhere on the site.
 */
.elementor-search-form__container .dialog-lightbox-close-button {
	cursor: pointer;
}