/* Search Popup Widget v4.1 */

.spw-wrap {
    position: relative;
    display: inline-flex;
    z-index: 9999;
}

/* Button */
.spw-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    padding: 6px;
    cursor: pointer;
    line-height: 1;
    transition: opacity .2s, transform .2s;
}
.spw-btn:hover { opacity: .85; transform: scale(1.08); }
.spw-btn svg {
    display: block;
    width: 22px; height: 22px;
    stroke: currentColor;
    transition: color .2s;
}

/* Popup - inside the widget, absolute */
.spw-popup {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    width: 480px;
    padding: 20px;
    background: #2a2a2a;
    box-shadow: 0 6px 25px rgba(0,0,0,.3);
    z-index: 999999;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    pointer-events: none;
    transition: opacity .25s ease, transform .25s ease, visibility .25s ease;
}
.spw-popup.spw-show {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    pointer-events: auto;
}

/* Input */
.spw-input-wrap { position: relative; display: flex; align-items: center; }
.spw-input {
    width: 100%; height: 46px;
    padding: 0 50px 0 16px;
    font-size: 15px; font-family: inherit;
    color: #333; background: #fff;
    border: 1px solid #ddd; border-radius: 0;
    outline: none; -webkit-appearance: none; appearance: none;
    transition: border-color .2s;
}
.spw-input:focus { border-color: #888; }
.spw-input::placeholder { color: #999; }
.spw-submit {
    position: absolute; right: 0; top: 0;
    width: 50px; height: 46px;
    display: flex; align-items: center; justify-content: center;
    background: none; border: none; cursor: pointer; color: #555;
    transition: color .2s;
}
.spw-submit:hover { color: #222; }
.spw-submit svg { stroke: currentColor; }

@media (max-width: 520px) {
    .spw-popup { width: calc(100vw - 20px); left: -10px; }
}