/* AJAW Trade — voice search mic button.
Companion stylesheet to voice-search.js. That script only ever injects
`.voice-search-btn` into `.search-box .search-input` when the browser
supports SpeechRecognition, so every rule below is a no-op in browsers
that never get the button.
Layout note: under 700px, mobile-navigation.css turns `.search-input`
into a 2-column grid (`minmax(0,1fr) auto`) sized for field + "Buscar".
Adding a third visible item (the mic) needs a third column. The repeated
class selector below (`.search-box.search-box`) bumps specificity to
(0,3,0) so it wins over that file's (0,2,0) rule regardless of which
loads last - safer than depending on order or !important.
Above 700px `.search-input` is a plain flex row (style.css), so the mic
just becomes another flex child with no override needed. */
@media (max-width: 700px) {
.search-box.search-box .search-input {
grid-template-columns: minmax(0, 1fr) auto auto;
}
}
.voice-search-btn {
--vs-size: 36px;
flex: none;
width: var(--vs-size);
height: var(--vs-size);
min-width: var(--vs-size);
min-height: var(--vs-size);
padding: 0;
border-radius: 50%;
border: 1.5px solid transparent;
background: transparent;
color: var(--gray, #5b5f73);
display: inline-flex;
align-items: center;
justify-content: center;
position: relative;
cursor: pointer;
transition: color 0.15s ease, background-color 0.15s ease, border-color 0.15s ease;
}
.voice-search-btn .icon {
width: 18px;
height: 18px;
}
.voice-search-btn:hover {
color: var(--violet, #3e34f9);
background: var(--tint, #eeedfe);
}
.voice-search-btn:focus-visible {
color: var(--violet, #3e34f9);
}
.voice-search-btn.is-listening {
color: var(--violet, #3e34f9);
background: var(--tint, #eeedfe);
border-color: var(--violet, #3e34f9);
}
/* Pulsing ring while listening. Purely decorative, so it is skipped for
anyone who asked for reduced motion - the violet fill + border above is
already an obvious, motion-free "listening" signal on its own. */
@media (prefers-reduced-motion: no-preference) {
.voice-search-btn.is-listening::after {
content: '';
position: absolute;
inset: -5px;
border-radius: 50%;
border: 1.5px solid var(--violet, #3e34f9);
animation: voice-search-pulse 1.4s ease-out infinite;
}
}
@keyframes voice-search-pulse {
0% {
transform: scale(0.85);
opacity: 0.8;
}
100% {
transform: scale(1.55);
opacity: 0;
}
}
.voice-search-btn.is-error {
color: #c0392b;
background: #fdecea;
border-color: #f3b7b0;
}
/* Visually hidden aria-live status region voice-search.js appends to
. Screen-reader-only pattern, kept local to this feature so it
never depends on a class defined elsewhere. */
.voice-search-sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}