/* Voice input for search fields */
.vm-voice-search-host {
    position: relative;
}

.vm-voice-search-host.has-voice-search .vm-voice-search-input {
    padding-right: 54px;
}

.filter-search-wrapper.has-voice-search .filter-search-field,
.vm-site-search .filter-search-wrapper.has-voice-search .filter-search-field,
.homepage-search-form.vm-site-search .filter-search-wrapper.has-voice-search .filter-search-field {
    padding-right: 112px;
}

.vm-voice-search-btn {
    position: absolute;
    right: 8px;
    top: 50%;
    z-index: 4;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    padding: 0;
    border: 1px solid #e2e8f0;
    border-radius: 9px;
    background: #f8fafc;
    color: #64748b;
    cursor: pointer;
    transform: translateY(-50%);
    transition: background-color .16s ease, color .16s ease, border-color .16s ease, box-shadow .16s ease, transform .16s ease;
}

.filter-search-wrapper.has-voice-search .vm-voice-search-btn {
    right: 58px;
}

.vm-site-search .filter-search-wrapper.has-voice-search .vm-voice-search-btn,
.homepage-search-form.vm-site-search .filter-search-wrapper.has-voice-search .vm-voice-search-btn {
    right: 62px;
    width: 40px;
    height: 40px;
}

.vm-voice-search-btn:hover {
    background: #fff7ed;
    border-color: #fed7aa;
    color: #ea580c;
    box-shadow: 0 6px 16px rgba(234, 88, 12, .13);
}

.vm-voice-search-btn:active {
    transform: translateY(-50%) scale(.96);
}

.vm-voice-search-btn.is-listening {
    background: #ff6600;
    border-color: #ff6600;
    color: #fff;
    box-shadow: 0 0 0 4px rgba(255, 102, 0, .16), 0 8px 20px rgba(255, 102, 0, .24);
}

.vm-voice-search-btn.is-listening i {
    animation: vmVoicePulse 1s ease-in-out infinite;
}

.imported-seller-search-box.voice-search-inline {
    grid-template-columns: minmax(0, 1fr) 46px auto;
}

.imported-seller-search-box.voice-search-inline .vm-voice-search-btn {
    position: static;
    width: 46px;
    height: 46px;
    border: 1px solid #e5e7eb;
    background: #f8fafc;
    color: #64748b;
    transform: none;
    box-shadow: none;
}

.imported-seller-search-box.voice-search-inline .vm-voice-search-btn:hover {
    background: #fff7ed;
    border-color: #fed7aa;
    color: #ea580c;
}

.imported-seller-search-box.voice-search-inline .vm-voice-search-btn.is-listening {
    background: #ff6600;
    border-color: #ff6600;
    color: #fff;
}

.seller-search-field.has-voice-search .vm-voice-search-btn {
    right: 8px;
}

.seller-search-wrapper.has-voice-search {
    grid-template-columns: minmax(0, 1fr) 46px auto;
}

.seller-search-wrapper.has-voice-search .seller-search-input {
    padding-right: 44px;
}

.seller-search-wrapper.has-voice-search .vm-voice-search-btn {
    position: static;
    width: 46px;
    height: 48px;
    border: 1px solid #e5e7eb;
    background: #f8fafc;
    color: #64748b;
    transform: none;
    box-shadow: none;
}

.seller-search-wrapper.has-voice-search .vm-voice-search-btn:hover {
    background: #fff7ed;
    border-color: #fed7aa;
    color: #ea580c;
}

.seller-search-wrapper.has-voice-search .vm-voice-search-btn:active {
    transform: scale(.96);
}

.seller-search-wrapper.has-voice-search .vm-voice-search-btn.is-listening {
    background: #ff6600;
    border-color: #ff6600;
    color: #fff;
}

@keyframes vmVoicePulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.16); }
}

@media (max-width: 600px) {
    .filter-search-wrapper.has-voice-search .filter-search-field,
    .vm-site-search .filter-search-wrapper.has-voice-search .filter-search-field,
    .homepage-search-form.vm-site-search .filter-search-wrapper.has-voice-search .filter-search-field {
        padding-right: 104px;
    }

    .filter-search-wrapper.has-voice-search .vm-voice-search-btn,
    .vm-site-search .filter-search-wrapper.has-voice-search .vm-voice-search-btn,
    .homepage-search-form.vm-site-search .filter-search-wrapper.has-voice-search .vm-voice-search-btn {
        right: 58px;
        width: 38px;
        height: 38px;
    }

    .imported-seller-search-box.voice-search-inline {
        grid-template-columns: minmax(0, 1fr) 42px 46px;
    }

    .imported-seller-search-box.voice-search-inline .vm-voice-search-btn {
        width: 42px;
        height: 46px;
    }

    .seller-search-wrapper.has-voice-search {
        grid-template-columns: minmax(0, 1fr) 42px 48px;
    }

    .seller-search-wrapper.has-voice-search .vm-voice-search-btn {
        width: 42px;
        height: 46px;
    }
}