/* Voice search mic button — mobile sticky header.
 * Positioned absolutely inside .header-wow-mobile-sticky-search (which is position:relative).
 * State changes driven by data-state attribute set from voice-search.js.
 */

.header-wow-mobile-sticky-search {
    position: relative;
}

.vmarket-mic-btn {
    position: absolute;
    top: 50%;
    right: 8px;
    transform: translateY(-50%);
    width: 36px;
    height: 36px;
    padding: 0;
    margin: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: #555;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    z-index: 5;
    transition: background-color 0.15s ease, color 0.15s ease;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0.1);
}

.vmarket-mic-btn:hover,
.vmarket-mic-btn:focus {
    background-color: rgba(0, 0, 0, 0.05);
    color: #222;
    outline: none;
}

.vmarket-mic-btn[data-state="listening"] {
    color: #e53935;
    background-color: rgba(229, 57, 53, 0.08);
}

.vmarket-mic-btn[data-state="processing"] {
    color: #1e88e5;
    background-color: rgba(30, 136, 229, 0.08);
    cursor: progress;
}

/* Spinner shown while the Gemini fallback uploads + waits for transcription.
 * Replaces the mic icon visually without altering layout. */
.vmarket-mic-btn[data-state="processing"] .vmarket-mic-icon {
    opacity: 0.25;
}

.vmarket-mic-btn[data-state="processing"]::after {
    content: '';
    position: absolute;
    inset: 8px;
    border-radius: 50%;
    border: 2px solid rgba(30, 136, 229, 0.25);
    border-top-color: #1e88e5;
    animation: vmarket-mic-spin 0.7s linear infinite;
    pointer-events: none;
}

@keyframes vmarket-mic-spin {
    to { transform: rotate(360deg); }
}

.vmarket-mic-btn[data-state="disabled"],
.vmarket-mic-btn[disabled] {
    opacity: 0.4;
    cursor: not-allowed;
}

.vmarket-mic-icon {
    position: relative;
    z-index: 2;
    pointer-events: none;
}

/* Pulse ring — visible only while listening */
.vmarket-mic-pulse {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 2px solid #e53935;
    opacity: 0;
    pointer-events: none;
    will-change: transform, opacity;
}

.vmarket-mic-btn[data-state="listening"] .vmarket-mic-pulse {
    animation: vmarket-mic-pulse-anim 1.4s ease-out infinite;
}

@keyframes vmarket-mic-pulse-anim {
    0%   { transform: scale(0.6); opacity: 0.8; }
    100% { transform: scale(1.6); opacity: 0; }
}

/* Toast — appears below the search box on error or info */
.vmarket-mic-toast {
    position: absolute;
    top: calc(100% + 6px);
    right: 8px;
    max-width: 80vw;
    padding: 8px 12px;
    background: rgba(33, 33, 33, 0.92);
    color: #fff;
    font-size: 13px;
    line-height: 1.35;
    border-radius: 6px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18);
    z-index: 10;
    opacity: 0;
    transform: translateY(-4px);
    transition: opacity 0.18s ease, transform 0.18s ease;
    pointer-events: none;
}

.vmarket-mic-toast[data-visible="1"] {
    opacity: 1;
    transform: translateY(0);
}

/* Adjust input padding-right so text never sits under the mic icon.
 * Specificity must beat the existing `.header-wow-mobile-sticky-search input[type='text']`
 * rule in templates/default/css/styles.css (specificity 0,0,2,1), so we chain both selectors. */
.header-wow-mobile-sticky-search input[type='text'].ajax-live-search {
    padding-right: 48px;
}

/* Desktop: hide mic entirely — voice search is mobile-only per UX spec */
@media (min-width: 769px) {
    .vmarket-mic-btn,
    .vmarket-mic-toast {
        display: none !important;
    }

    .header-wow-mobile-sticky-search input[type='text'].ajax-live-search {
        padding-right: 15px;
    }
}