/* GeoSuperStore Mobile Voice Search v3 */

/* Desktop: microphone is hidden. */
.gss-voice-search-button {
	display: none !important;
}

/* Mobile only */
@media (max-width: 767px) {

	/*
	 * The X in the supplied WoodMart HTML is:
	 * <span class="wd-clear-search wd-role-btn">...</span>
	 *
	 * Hide only this clear-search control on mobile.
	 */
	form.searchform .wd-clear-search,
	form.searchform .wd-clear-search.wd-role-btn {
		display: none !important;
		visibility: hidden !important;
		opacity: 0 !important;
		pointer-events: none !important;
	}

	form.searchform.gss-has-voice-search {
		position: relative;
	}

	/* Microphone immediately before the green search button. */
	form.searchform.gss-has-voice-search .gss-voice-search-button {
		display: flex !important;
		position: absolute;
		top: 50%;
		right: var(--wd-search-btn-w, 48px);
		transform: translateY(-50%);
		align-items: center;
		justify-content: center;
		width: 44px;
		height: 44px;
		margin: 0;
		padding: 0;
		border: 0;
		border-radius: 0;
		background: transparent !important;
		box-shadow: none !important;
		color: #333;
		cursor: pointer;
		z-index: 20;
		-webkit-tap-highlight-color: transparent;
	}

	form.searchform.gss-has-voice-search .gss-voice-search-button svg {
		display: block;
		width: 22px;
		height: 22px;
		fill: none;
		stroke: currentColor;
		stroke-width: 1.8;
		stroke-linecap: round;
		stroke-linejoin: round;
	}

	form.searchform.gss-has-voice-search .gss-voice-search-button:hover svg,
	form.searchform.gss-has-voice-search .gss-voice-search-button:focus svg {
		color: #008b16;
	}

	form.searchform.gss-has-voice-search .gss-voice-search-button:focus {
		outline: none;
	}

	form.searchform.gss-has-voice-search .gss-voice-search-button:focus-visible {
		border-radius: 6px;
		box-shadow: 0 0 0 2px rgba(0, 139, 22, .18) !important;
	}

	/*
	 * Reserve room for the microphone + green search button.
	 * The X is hidden, so the microphone is the only control inside
	 * this part of the input.
	 */
	form.searchform.gss-has-voice-search input.s.wd-search-input,
	form.searchform.gss-has-voice-search input.s[name="s"] {
		padding-right: calc(var(--wd-search-btn-w, 48px) + 48px) !important;
	}

	/* Listening state */
	form.searchform.gss-has-voice-search .gss-voice-search-button.is-listening {
		color: #d71920;
	}

	form.searchform.gss-has-voice-search .gss-voice-search-button.is-listening svg {
		animation: gss-voice-pulse 1s ease-in-out infinite;
		transform-origin: center;
	}
}

@keyframes gss-voice-pulse {
	0%, 100% {
		transform: scale(1);
		opacity: 1;
	}
	50% {
		transform: scale(1.12);
		opacity: .55;
	}
}