/**
 * twist-auto.com.ua — FTsearch 1.35.4 live search, site layer.
 *
 * Port of the site edits made to UP Search Normalize 1.13.0
 * (usn-livesearch.css: "SalonPro mobile inline live-search" block and the
 * .usn-ls-mobile-close button). Kept in the theme stylesheet so module
 * updates do not wipe it.
 *
 * Works together with the [twist-auto] edits in ftsearch.livesearch.js:
 *   - every dropdown gets .ftsearch-ls--inline-mobile and a
 *     .ftsearch-ls-mobile-close button;
 *   - on phones (<= 767px) the script sets --ftsearch-ls-mobile-top
 *     (bottom of the theme search field + 12px) on the dropdown.
 * Breakpoint 767px = CyberStore phone layout = UP 1.13.0 site breakpoint.
 */

/* Vendor CSS hides the dropdown at <= 991.98px because it opens a full-screen
   overlay there. The site keeps the inline dropdown on every width. */
.ftsearch-ls.ftsearch-ls--inline-mobile {
    display: flex !important;
}

/* Close button: phones only. */
.ftsearch-ls .ftsearch-ls-mobile-close {
    display: none;
}

@media (max-width: 767px) {
    /* Full-width panel from just under the theme field to the bottom of the
       viewport; results scroll inside, "show all" stays at the bottom. */
    .ftsearch-ls.ftsearch-ls--inline-mobile {
        top: var(--ftsearch-ls-mobile-top, 0px) !important;
        right: 0 !important;
        bottom: auto !important;
        left: 0 !important;
        width: auto !important;
        height: calc(100vh - var(--ftsearch-ls-mobile-top, 0px)) !important;
        height: calc(100dvh - var(--ftsearch-ls-mobile-top, 0px)) !important;
        max-height: calc(100vh - var(--ftsearch-ls-mobile-top, 0px)) !important;
        max-height: calc(100dvh - var(--ftsearch-ls-mobile-top, 0px)) !important;
        padding-top: 24px;
    }

    .ftsearch-ls.ftsearch-ls--inline-mobile > .ftsearch-ls-results {
        flex: 1 1 auto;
        min-height: 0;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }

    .ftsearch-ls.ftsearch-ls--inline-mobile > .ftsearch-ls-search-footer {
        flex: 0 0 auto;
        padding-bottom: calc(11px + env(safe-area-inset-bottom, 0px));
        box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.06);
    }

    /* Keep the correction text clear of the close button. */
    .ftsearch-ls.ftsearch-ls--inline-mobile .ftsearch-ls-search-correction {
        padding-right: 48px;
    }

    .ftsearch-ls.ftsearch-ls--inline-mobile .ftsearch-ls-mobile-close {
        position: absolute;
        top: 8px;
        right: 12px;
        z-index: 5;
        display: block;
        width: 30px;
        height: 30px;
        padding: 0;
        margin: 0;
        color: #9fa4ad;
        font-family: Arial, sans-serif;
        font-size: 30px;
        font-weight: 400;
        line-height: 30px;
        text-align: center;
        cursor: pointer;
        background: transparent;
        border: 0;
        border-radius: 0;
        box-shadow: none;
        -webkit-appearance: none;
        appearance: none;
    }

    .ftsearch-ls.ftsearch-ls--inline-mobile .ftsearch-ls-mobile-close:hover {
        color: #6b7280;
        background: transparent;
    }
}

/* Vendor CSS hides the product code (SKU) at <= 560px; the site showed it. */
@media (max-width: 560px) {
    .ftsearch-ls.ftsearch-ls--inline-mobile .ftsearch-ls-code {
        display: inline;
    }
}