/* Container */
#autocompleteResult {
    position: fixed;
    visibility: hidden;
    top: var(--mb-stick-height);
    background: var(--pico-card-background-color); 
    box-shadow: var(--pico-card-box-shadow);
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-user-drag: none;
    width: 100vw; 
    height: calc(100vh - var(--mb-stick-height));
    z-index: 6;
}

#autocompleteResult.open {
    top: 70px;
    left: 0;
    visibility: visible;
}


@keyframes autocompleteFade {
    from { opacity: 0; transform: translateY(-5px);}
    to { opacity: 1; transform: translateY(0);}
}


/* Item */
#autocompleteResult .item {
    padding: 8px 10px;
    cursor: pointer;
    transition: background 0.12s;
    border-bottom: 1px solid var(--pico-muted-border-color);
}

#autocompleteResult .item:hover {
    background: var(--pico-dropdown-hover-background-color)
}

#autocompleteResult .item .item-basic { 
    display: flex;
    justify-content: space-between;
}

#autocompleteResult div.item-image > a > img 
{
    margin-top: 10px;
    max-width: 100%;
}

#autocompleteResult .item .item-basic a {font-weight: bold; font-size: large;}

#autocompleteResult .item .item-basic .licenses {
    background: var(--pico-form-element-background-color);
    border: var(--pico-border-width) solid var(--pico-form-element-border-color);
    color: var(--pico-secondary);
    padding: 4px 10px;
    border-radius: 5px;
    font-size: small;

}

#autocompleteResult .item .item-details { 
    display: flex;
    justify-content: space-between;
    vertical-align: bottom;
}
#autocompleteResult .item .item-details .item-meta { 
    display: flex;
    flex-direction: column;
}

#autocompleteResult .item-meta > span.stats  {
    background: var(--pico-form-element-background-color);
    border: var(--pico-border-width) solid var(--pico-form-element-border-color);
    color: var(--pico-secondary);
    padding: 2px 5px;
    border-radius: 5px;
    font-size: small;
    margin-top: 5px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 5px;
}

#autocompleteResult .item-meta span.rates {
    color: #f6b800
}
#autocompleteResult div.bottom {
    text-align: right;
    padding: 10px;
}
/* ≥ 576px: tablet / small desktop */
@media (min-width: 576px) {

    
    #autocompleteResult.open {
        width: inherit;
        margin: auto;
        left: auto;
        height:auto;
        max-height: 500px;
    }
}

/* ≥ 1024px: desktop */
@media (min-width: 1024px) {

    #formSearch input[type=search] {
        width: var(--search-width);
    }
    #autocompleteResult.open {
        width: var(--search-width);
        margin: auto;
        left: auto;
    }
}

@media (min-width: 1280px) {
 
}
@media (min-width: 1536px) {
 
}