/*
|--------------------------------------------------------------------------
| ZOVALY LIVE SEARCH
|--------------------------------------------------------------------------
*/

:root {
    --fv-search-primary: #ff587d;
    --fv-search-primary-hover: #e9476c;

    --fv-search-soft: #fff0f4;

    --fv-search-text: #172033;

    --fv-search-muted: #8a93a3;

    --fv-search-border: #e7e9ee;

    --fv-search-bg: #f7f7f8;

    --fv-search-white: #ffffff;
}


/*
|--------------------------------------------------------------------------
| ROOT
|--------------------------------------------------------------------------
*/

.fv-live-search {
    width: 100%;

    min-width: 0;

    position: relative;
}


/*
|--------------------------------------------------------------------------
| FORM
|--------------------------------------------------------------------------
*/

.fv-live-search-form {
    width: 100%;

    display: grid;

    align-items: center;

    overflow: hidden;

    background:
        var(
            --fv-search-white
        );

    transition:
        border-color
            0.18s ease,
        box-shadow
            0.18s ease,
        background
            0.18s ease;
}


/*
|--------------------------------------------------------------------------
| INPUT WRAPPER
|--------------------------------------------------------------------------
*/

.fv-live-search-input-wrap {
    width: 100%;

    min-width: 0;

    height: 100%;

    position: relative;

    display: flex;

    align-items: center;
}


/*
|--------------------------------------------------------------------------
| INPUT
|--------------------------------------------------------------------------
*/

.fv-live-search-form input {
    width: 100%;

    min-width: 0;

    height: 100%;

    border: 0;

    outline: 0;

    background:
        transparent;

    color:
        var(
            --fv-search-text
        );

    font-family:
        inherit;

    box-shadow:
        none;
}


/*
|--------------------------------------------------------------------------
| REMOVE NATIVE SEARCH X
|--------------------------------------------------------------------------
*/

.fv-live-search-form
input::-webkit-search-cancel-button {
    display: none;

    -webkit-appearance:
        none;
}


/*
|--------------------------------------------------------------------------
| CUSTOM CLEAR BUTTON
|--------------------------------------------------------------------------
*/

.fv-live-search-clear {
    width: 30px;

    height: 30px;

    position: absolute;

    right: 8px;

    top: 50%;

    transform:
        translateY(-50%);

    display: inline-flex;

    align-items: center;

    justify-content: center;

    border: 0;

    border-radius: 50%;

    background:
        transparent;

    color:
        #68758a;

    cursor: pointer;

    font-size: 13px;

    transition:
        color
            0.16s ease,
        background
            0.16s ease;
}

.fv-live-search-clear:hover {
    color:
        var(
            --fv-search-primary
        );

    background:
        var(
            --fv-search-soft
        );
}


/*
|--------------------------------------------------------------------------
| DESKTOP
|--------------------------------------------------------------------------
*/

.fv-live-search.desktop
.fv-live-search-form {
    grid-template-columns:
        minmax(0, 1fr)
        56px;

    height: 46px;

    overflow: hidden;

    border:
        1px solid
        var(
            --fv-search-border
        );

    border-radius:
        8px;

    background:
        var(
            --fv-search-bg
        );

    box-shadow:
        0 1px 2px
        rgba(
            15,
            23,
            42,
            0.02
        );
}


/*
|--------------------------------------------------------------------------
| DESKTOP FOCUS
|--------------------------------------------------------------------------
*/

.fv-live-search.desktop
.fv-live-search-form:focus-within {
    border-color:
        var(
            --fv-search-primary
        );

    background:
        #ffffff;

    box-shadow:
        0 0 0 3px
        rgba(
            255,
            88,
            125,
            0.10
        );
}


/*
|--------------------------------------------------------------------------
| DESKTOP INPUT
|--------------------------------------------------------------------------
*/

.fv-live-search.desktop
.fv-live-search-form
input {
    padding:
        0 42px 0 18px;

    font-size: 13px;

    font-weight: 400;

    color:
        #283347;
}

.fv-live-search.desktop
.fv-live-search-form
input::placeholder {
    color:
        #9299a5;
}


/*
|--------------------------------------------------------------------------
| DESKTOP SEARCH BUTTON
|--------------------------------------------------------------------------
*/

.fv-live-search.desktop
.fv-live-search-submit {
    width: 56px;

    height: 46px;

    display: grid;

    place-items: center;

    border: 0;

    border-left:
        1px solid
        rgba(
            255,
            88,
            125,
            0.08
        );

    border-radius: 0;

    background:
        var(
            --fv-search-soft
        );

    color:
        var(
            --fv-search-primary
        );

    cursor: pointer;

    font-size: 18px;

    transition:
        background
            0.18s ease,
        color
            0.18s ease;
}

.fv-live-search.desktop
.fv-live-search-submit:hover {
    background:
        var(
            --fv-search-primary
        );

    color:
        #ffffff;
}


/*
|--------------------------------------------------------------------------
| MOBILE
|--------------------------------------------------------------------------
*/

.fv-live-search.mobile {
    width: 100%;
}

.fv-live-search.mobile
.fv-live-search-form {
    grid-template-columns:
        30px
        minmax(0, 1fr)
        auto;

    height: 38px;

    padding-left: 8px;

    border:
        1.5px solid
        var(
            --fv-search-primary
        );

    border-radius:
        20px;

    background:
        #ffffff;
}


/*
|--------------------------------------------------------------------------
| MOBILE FOCUS
|--------------------------------------------------------------------------
*/

.fv-live-search.mobile
.fv-live-search-form:focus-within {
    box-shadow:
        0 0 0 3px
        rgba(
            255,
            88,
            125,
            0.09
        );
}


/*
|--------------------------------------------------------------------------
| MOBILE LEADING ICON
|--------------------------------------------------------------------------
*/

.fv-live-search-leading {
    display: grid;

    place-items: center;

    color:
        #8f99aa;

    font-size: 13px;
}


/*
|--------------------------------------------------------------------------
| MOBILE INPUT
|--------------------------------------------------------------------------
*/

.fv-live-search.mobile
.fv-live-search-form
input {
    padding:
        0 36px 0 2px;

    color:
        #4f5968;

    font-size: 12px;
}


/*
|--------------------------------------------------------------------------
| MOBILE SUBMIT
|--------------------------------------------------------------------------
*/

.fv-live-search.mobile
.fv-live-search-submit {
    height: 31px;

    margin-right: 3px;

    padding:
        0 16px;

    border: 0;

    border-radius:
        18px;

    background:
        var(
            --fv-search-primary
        );

    color: #ffffff;

    cursor: pointer;

    font-size: 11px;

    font-weight: 700;
}

.fv-live-search.mobile
.fv-live-search-submit:hover {
    background:
        var(
            --fv-search-primary-hover
        );
}


/*
|--------------------------------------------------------------------------
| PORTAL DROPDOWN
|--------------------------------------------------------------------------
|
| IMPORTANT:
|
| এটা document.body-এর child।
|
| তাই:
| - Header stacking context
| - Category menu
| - Hero
| - Banner
| - Footer
|
| কোনোটাই এর উপরে উঠবে না।
|
|--------------------------------------------------------------------------
*/

.fv-live-search-dropdown {
    /*
    | position/top/left/width React inline style থেকে আসে।
    */

    z-index:
        2147483000
        !important;

    isolation:
        isolate;

    max-height:
        min(
            560px,
            72vh
        );

    overflow-x:
        hidden;

    overflow-y:
        auto;

    overscroll-behavior:
        contain;

    border:
        1px solid
        #e7e9ed;

    border-radius:
        10px;

    background:
        #ffffff;

    box-shadow:
        0 18px 50px
        rgba(
            15,
            23,
            42,
            0.20
        );

    animation:
        fvSearchDropIn
        0.12s ease-out;

    scrollbar-width:
        thin;

    scrollbar-color:
        #d7dbe2
        transparent;
}

.fv-live-search-dropdown::-webkit-scrollbar {
    width: 6px;
}

.fv-live-search-dropdown::-webkit-scrollbar-track {
    background:
        transparent;
}

.fv-live-search-dropdown::-webkit-scrollbar-thumb {
    border-radius:
        999px;

    background:
        #d7dbe2;
}


/*
|--------------------------------------------------------------------------
| DROPDOWN ANIMATION
|--------------------------------------------------------------------------
*/

@keyframes fvSearchDropIn {
    from {
        opacity: 0;

        transform:
            translateY(-4px);
    }

    to {
        opacity: 1;

        transform:
            translateY(0);
    }
}


/*
|--------------------------------------------------------------------------
| SECTIONS
|--------------------------------------------------------------------------
*/

.fv-live-search-dropdown
section {
    border-bottom:
        1px solid
        #eef0f3;
}

.fv-live-search-dropdown
section:last-child {
    border-bottom: 0;
}


/*
|--------------------------------------------------------------------------
| SECTION HEADER
|--------------------------------------------------------------------------
*/

.fv-live-search-group-title {
    min-height: 38px;

    display: flex;

    align-items: center;

    justify-content:
        space-between;

    gap: 10px;

    padding:
        0 14px;

    background:
        #fafafb;

    border-bottom:
        1px solid
        #f0f1f3;
}

.fv-live-search-group-title
span {
    color:
        #697386;

    font-size:
        10px;

    font-weight:
        800;

    text-transform:
        uppercase;

    letter-spacing:
        0.055em;
}

.fv-live-search-group-title
button {
    padding: 5px;

    border: 0;

    background:
        transparent;

    color:
        var(
            --fv-search-primary
        );

    cursor: pointer;

    font-size:
        10px;

    font-weight:
        700;
}

.fv-live-search-group-title
button:hover {
    text-decoration:
        underline;
}


/*
|--------------------------------------------------------------------------
| PRODUCT LIST
|--------------------------------------------------------------------------
*/

.fv-live-search-product-list {
    background:
        #ffffff;
}


/*
|--------------------------------------------------------------------------
| PRODUCT
|--------------------------------------------------------------------------
*/

.fv-live-search-product {
    min-height: 64px;

    display: grid;

    grid-template-columns:
        48px
        minmax(0, 1fr)
        auto;

    align-items: center;

    gap: 11px;

    padding:
        8px 13px;

    color:
        #293241;

    text-decoration:
        none;

    border-bottom:
        1px solid
        #f3f4f6;

    transition:
        background
            0.15s ease;
}

.fv-live-search-product:last-child {
    border-bottom: 0;
}

.fv-live-search-product:hover {
    background:
        var(
            --fv-search-soft
        );
}


/*
|--------------------------------------------------------------------------
| PRODUCT IMAGE
|--------------------------------------------------------------------------
*/

.fv-live-search-product-image {
    width: 48px;

    height: 48px;

    display: grid;

    place-items: center;

    overflow: hidden;

    border:
        1px solid
        #eceef1;

    border-radius:
        7px;

    background:
        #fafafa;

    color:
        #b8bec6;
}

.fv-live-search-product-image
img {
    width: 100%;

    height: 100%;

    object-fit:
        contain;
}


/*
|--------------------------------------------------------------------------
| PRODUCT COPY
|--------------------------------------------------------------------------
*/

.fv-live-search-product-copy {
    min-width: 0;
}

.fv-live-search-product-copy
strong,
.fv-live-search-product-copy
small {
    display: block;

    overflow: hidden;

    white-space:
        nowrap;

    text-overflow:
        ellipsis;
}

.fv-live-search-product-copy
strong {
    color:
        #273142;

    font-size: 12px;

    line-height: 17px;

    font-weight: 600;
}

.fv-live-search-product-copy
small {
    margin-top:
        3px;

    color:
        #9299a5;

    font-size:
        9px;
}


/*
|--------------------------------------------------------------------------
| PRODUCT PRICE
|--------------------------------------------------------------------------
*/

.fv-live-search-product
> b {
    padding-left:
        10px;

    color:
        var(
            --fv-search-primary
        );

    font-size:
        12px;

    white-space:
        nowrap;
}


/*
|--------------------------------------------------------------------------
| CATEGORY / BRAND LINKS
|--------------------------------------------------------------------------
*/

.fv-live-search-links {
    display: flex;

    flex-wrap: wrap;

    gap: 7px;

    padding:
        11px 12px
        13px;

    background:
        #ffffff;
}

.fv-live-search-links
a {
    min-height: 31px;

    max-width: 100%;

    display:
        inline-flex;

    align-items: center;

    gap: 6px;

    padding:
        0 11px;

    border:
        1px solid
        #e1e5eb;

    border-radius:
        999px;

    background:
        #ffffff;

    color:
        #566072;

    text-decoration:
        none;

    font-size:
        9px;

    transition:
        color
            0.15s ease,
        border-color
            0.15s ease,
        background
            0.15s ease;
}

.fv-live-search-links
a i {
    color:
        #8d96a5;

    font-size:
        9px;
}

.fv-live-search-links
a:hover {
    border-color:
        var(
            --fv-search-primary
        );

    background:
        var(
            --fv-search-soft
        );

    color:
        var(
            --fv-search-primary
        );
}

.fv-live-search-links
a:hover i {
    color:
        var(
            --fv-search-primary
        );
}


/*
|--------------------------------------------------------------------------
| EMPTY
|--------------------------------------------------------------------------
*/

.fv-live-search-empty {
    min-height: 88px;

    display: flex;

    align-items: center;

    justify-content: center;

    flex-direction:
        column;

    gap: 8px;

    padding:
        18px;

    background:
        #ffffff;

    color:
        #9098a5;

    font-size:
        10px;

    line-height:
        16px;

    text-align:
        center;
}

.fv-live-search-empty-icon {
    width: 30px;

    height: 30px;

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    border-radius:
        50%;

    background:
        var(
            --fv-search-soft
        );

    color:
        var(
            --fv-search-primary
        );

    font-size:
        12px;
}


/*
|--------------------------------------------------------------------------
| TABLET / MOBILE DROPDOWN
|--------------------------------------------------------------------------
*/

@media (
    max-width: 767px
) {
    .fv-live-search-dropdown {
        max-height:
            66vh;

        border-radius:
            10px;
    }

    .fv-live-search-product {
        min-height:
            60px;

        grid-template-columns:
            43px
            minmax(0, 1fr)
            auto;

        gap: 8px;

        padding:
            8px 10px;
    }

    .fv-live-search-product-image {
        width: 43px;

        height: 43px;
    }

    .fv-live-search-product-copy
    strong {
        font-size:
            11px;
    }

    .fv-live-search-product
    > b {
        font-size:
            10px;
    }
}


/*
|--------------------------------------------------------------------------
| VERY SMALL MOBILE
|--------------------------------------------------------------------------
*/

@media (
    max-width: 430px
) {
    .fv-live-search-links
    a {
        font-size:
            8px;
    }

    .fv-live-search-product {
        grid-template-columns:
            40px
            minmax(0, 1fr)
            auto;
    }

    .fv-live-search-product-image {
        width: 40px;

        height: 40px;
    }
}