.mobile-search-box {
    display: none;
}

@media (max-width: 767px) {

    .mobile-search-box {
        display: block;
        width: 100%;
        padding: 0px 15px 14px;
        background: #fff;
    }

    .mobile-search-wrapper {
        display: flex;
        align-items: center;
        width: 100%;
        height: 48px;
        border: 1px solid #d8d8d8;
        border-radius: 3px;
        background: #fff;
        overflow: hidden;
        box-shadow: none;
    }

    .mobile-search-input {
        flex: 1;
        width: 100%;
        height: 100%;
        border: 0;
        outline: 0;
        background: #fff;
        padding: 0 16px;
        font-size: 14px;
        color: #333;
        margin: 0;
    }

    .mobile-search-button {
        width: 52px;
        height: 100%;
        flex-shrink: 0;
        border: 0;
        outline: 0;
        background: #f5f5f5;
        cursor: pointer;
        font-size: 17px;
        color: #333;
        margin: 0;
        padding: 0;
    }

    .mobile-search-button:hover {
        background: #eeeeee;
    }

    .mobile-search-button i {
        font-size: 16px;
    }

    .mobile-search-input::placeholder {
        color: #888;
        opacity: 1;
    }

    .mobile-search-input:focus {
        outline: none;
        box-shadow: none;
    }

    /* فارسی */
    .mobile-search-input.search-rtl {
        direction: rtl !important;
        text-align: right !important;
    }

    .mobile-search-input.search-rtl::placeholder {
        direction: rtl !important;
        text-align: right !important;
    }

    /* انگلیسی */
    .mobile-search-input.search-ltr {
        direction: ltr !important;
        text-align: left !important;
    }

    .mobile-search-input.search-ltr::placeholder {
        direction: ltr !important;
        text-align: left !important;
    }
}