/* ==========================================================================
   The header search field's magnifier (Components/SearchBox, search-field.js): it sits at
   the start of the field, right before the words, as a part of the field.
   - phone, field at rest: the word «جستجو» 8px from the icon (it was 26px away);
   - desktop: the icon moves from the far end (beside the voice and lens buttons) to the
     start of the field, where the input already kept room for it.
   ========================================================================== */

@media only screen and (max-width: 959px) {

    html body:not(:has(.vp-search-box-result.vp-over-page.vp-show)) #vp-header .vp-search-box .vp-form form button.vp-btn[type="submit"] {
        width: 40px !important;
        min-width: 40px !important;
        flex: 0 0 40px !important;
        justify-content: flex-start !important; /* RTL: the right-hand edge */
        padding: 0 12px 0 0 !important;
        cursor: text;
    }

    html body:not(:has(.vp-search-box-result.vp-over-page.vp-show)) #vp-header .vp-search-box .vp-form form button.vp-btn[type="submit"] svg {
        margin: 0 !important;
    }

    html body:not(:has(.vp-search-box-result.vp-over-page.vp-show)) #vp-header .vp-search-box .vp-form form input[type="search"] {
        padding-right: 0 !important;
    }
}

@media only screen and (min-width: 960px) {

    html body #vp-header .vp-search-box .vp-form form button.vp-btn[type="submit"] {
        position: absolute !important;
        top: 50% !important;
        right: 18px !important;
        left: auto !important;
        z-index: 2;
        width: 20px !important;
        height: 20px !important;
        margin: 0 !important;
        padding: 0 !important;
        transform: translateY(-50%) !important;
        cursor: text;
    }

    html body #vp-header .vp-search-box .vp-form form button.vp-btn[type="submit"] svg {
        width: 18px !important;
        height: 18px !important;
    }

    html body #vp-header .vp-search-box .vp-form form input[type="search"] {
        padding-right: 28px !important;
    }
}