/* =========================================================
   DRIVERS MALL – PREMIUM PRODUCT SEARCH
   ========================================================= */

.dmsearch,
.dmsearch *{
    box-sizing:border-box;
}


.dmsearch{
    --dmsearch-red:#b60000;
    --dmsearch-red-light:#d10000;
    --dmsearch-red-dark:#980000;
    --dmsearch-gold:#d5aa43;

    position:relative;

    width:100%;
    max-width:820px;

    margin:0;

    font-family:
        Inter,
        Arial,
        sans-serif;

    z-index:100;
}


/* =========================================================
   FORM
   ========================================================= */

.dmsearch__form{
    position:relative;

    z-index:3;

    width:100%;

    display:flex;
    align-items:center;

    margin:0 !important;

    padding:6px !important;

    overflow:hidden;

    border:
        1px solid
        rgba(255,255,255,.20);

    border-radius:13px;

    background:
        rgba(255,255,255,.985);

    box-shadow:
        0 22px 58px
        rgba(0,0,0,.40),
        0 0 0 1px
        rgba(213,170,67,.08);

    transition:
        box-shadow .2s ease,
        border-color .2s ease;
}


.dmsearch.is-open
.dmsearch__form,
.dmsearch:focus-within
.dmsearch__form{
    border-color:
        rgba(213,170,67,.52);

    box-shadow:
        0 24px 65px
        rgba(0,0,0,.42),
        0 0 0 2px
        rgba(213,170,67,.10);
}


/* =========================================================
   SEARCH ICON
   ========================================================= */

.dmsearch__icon{
    width:50px;
    height:52px;

    flex:0 0 50px;

    display:flex;
    align-items:center;
    justify-content:center;

    margin:0 !important;
    padding:0 !important;

    color:#777;

    font-size:15px;

    line-height:1;
}


.dmsearch__icon i{
    display:block !important;

    margin:0 !important;
    padding:0 !important;

    line-height:1 !important;

    transform:none !important;
}


/* =========================================================
   INPUT WRAPPER
   ========================================================= */

.dmsearch__input-wrap{
    position:relative;

    min-width:0;

    flex:1;

    display:flex;
    align-items:center;
}


.dmsearch__input{
    display:block;

    width:100% !important;
    min-width:0;

    height:52px !important;

    margin:0 !important;

    padding:
        0 38px 0 2px !important;

    border:0 !important;
    outline:0 !important;

    border-radius:0 !important;

    background:
        transparent !important;

    box-shadow:
        none !important;

    color:#171717 !important;

    font-family:
        Inter,
        Arial,
        sans-serif !important;

    font-size:14px !important;

    font-weight:400 !important;

    line-height:52px !important;

    -webkit-appearance:none;
    appearance:none;
}


.dmsearch__input:focus{
    outline:0 !important;

    border:0 !important;

    box-shadow:none !important;
}


.dmsearch__input::placeholder{
    color:#8b8b8b !important;

    opacity:1;
}


/* Chrome search X weg */

.dmsearch__input::-webkit-search-cancel-button{
    display:none;
}


/* =========================================================
   CLEAR
   ========================================================= */

.dmsearch__clear{
    position:absolute;

    right:8px;
    top:50%;

    width:28px !important;
    height:28px !important;

    display:flex;
    align-items:center;
    justify-content:center;

    margin:0 !important;
    padding:0 !important;

    transform:
        translateY(-50%);

    border:0 !important;

    border-radius:50% !important;

    background:
        #f2f2f2 !important;

    color:#777 !important;

    font-size:11px !important;

    line-height:1 !important;

    cursor:pointer;

    opacity:0;

    pointer-events:none;

    transition:
        opacity .2s ease,
        background .2s ease,
        color .2s ease;
}


.dmsearch.has-value
.dmsearch__clear{
    opacity:1;

    pointer-events:auto;
}


.dmsearch__clear:hover{
    background:#e5e5e5 !important;

    color:#222 !important;
}


/* =========================================================
   BUTTON
   ========================================================= */

.dmsearch__submit{
    min-width:170px !important;
    height:52px !important;

    flex:0 0 auto;

    display:inline-flex !important;

    align-items:center !important;
    justify-content:center !important;

    gap:9px !important;

    margin:0 !important;

    padding:
        0 22px !important;

    border:0 !important;

    border-radius:9px !important;

    background:
        linear-gradient(
            180deg,
            #d10000,
            #980000
        ) !important;

    color:#fff !important;

    font-family:
        Inter,
        Arial,
        sans-serif !important;

    font-size:13px !important;

    font-weight:650 !important;

    line-height:1 !important;

    text-transform:none !important;

    cursor:pointer;

    box-shadow:
        0 8px 22px
        rgba(155,0,0,.26) !important;

    transition:
        transform .2s ease,
        background .2s ease,
        box-shadow .2s ease !important;
}


.dmsearch__submit:hover{
    transform:
        translateY(-1px);

    background:
        linear-gradient(
            180deg,
            #e00000,
            #a80000
        ) !important;

    box-shadow:
        0 11px 27px
        rgba(155,0,0,.35) !important;
}


.dmsearch__submit i{
    display:block !important;

    margin:0 !important;
    padding:0 !important;

    font-size:13px !important;

    line-height:1 !important;
}


/* =========================================================
   DROPDOWN
   ========================================================= */

.dmsearch__dropdown{
    position:absolute;

    z-index:2;

    left:0;
    right:0;

    top:calc(100% + 9px);

    display:none;

    overflow:hidden;

    border:
        1px solid
        rgba(255,255,255,.12);

    border-radius:13px;

    background:
        rgba(12,12,12,.985);

    box-shadow:
        0 28px 70px
        rgba(0,0,0,.50);

    backdrop-filter:
        blur(12px);
}


.dmsearch.is-open
.dmsearch__dropdown{
    display:block;

    animation:
        dmsearchDropIn
        .18s ease both;
}


@keyframes dmsearchDropIn{

    from{
        opacity:0;

        transform:
            translateY(-5px);
    }

    to{
        opacity:1;

        transform:
            translateY(0);
    }

}


/* =========================================================
   LOADING
   ========================================================= */

.dmsearch__loading{
    display:none;

    align-items:center;
    justify-content:center;

    gap:9px;

    min-height:78px;

    padding:18px;

    color:#aaa;

    font-size:11px;
}


.dmsearch.is-loading
.dmsearch__loading{
    display:flex;
}


.dmsearch__loading i{
    color:
        var(--dmsearch-gold);
}


/* =========================================================
   RESULT ITEM
   ========================================================= */

.dmsearch__result{
    position:relative;

    min-height:78px;

    display:grid;

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

    align-items:center;

    gap:13px;

    padding:
        10px 15px;

    border-bottom:
        1px solid
        rgba(255,255,255,.07);

    color:#fff !important;

    text-decoration:none !important;

    cursor:pointer;

    transition:
        background .18s ease;
}


.dmsearch__result:hover,
.dmsearch__result.is-active{
    background:
        rgba(213,170,67,.07);
}


/* =========================================================
   RESULT IMAGE
   ========================================================= */

.dmsearch__result-image{
    width:58px;
    height:58px;

    display:flex;
    align-items:center;
    justify-content:center;

    overflow:hidden;

    border:
        1px solid
        rgba(255,255,255,.09);

    border-radius:8px;

    background:#fff;
}


.dmsearch__result-image img{
    display:block;

    width:100% !important;
    height:100% !important;

    margin:0 !important;

    object-fit:contain;
}


/* =========================================================
   RESULT CONTENT
   ========================================================= */

.dmsearch__result-content{
    min-width:0;
}


.dmsearch__result-brand{
    display:block;

    margin-bottom:4px;

    overflow:hidden;

    color:
        var(--dmsearch-gold);

    font-size:8px;

    font-weight:700;

    letter-spacing:.9px;

    text-transform:uppercase;

    white-space:nowrap;

    text-overflow:ellipsis;
}


.dmsearch__result-title{
    display:block;

    overflow:hidden;

    color:#f4f4f4;

    font-size:12px;

    font-weight:600;

    line-height:1.35;

    white-space:nowrap;

    text-overflow:ellipsis;
}


.dmsearch__result-meta{
    display:flex;

    align-items:center;

    flex-wrap:wrap;

    gap:6px;

    margin-top:5px;

    color:#888;

    font-size:9px;
}


.dmsearch__result-stock{
    display:inline-flex;

    align-items:center;

    gap:4px;
}


.dmsearch__result-stock:before{
    content:"";

    width:5px;
    height:5px;

    flex:0 0 5px;

    border-radius:50%;

    background:#55c879;
}


.dmsearch__result-stock.is-out:before{
    background:#b94a4a;
}


/* =========================================================
   PRICE
   ========================================================= */

.dmsearch__result-side{
    min-width:95px;

    text-align:right;
}


.dmsearch__result-price{
    color:#fff;

    font-size:13px;

    font-weight:700;

    white-space:nowrap;
}


.dmsearch__result-price del{
    display:block;

    color:#777;

    font-size:9px;

    font-weight:400;
}


.dmsearch__result-price ins{
    color:#fff;

    text-decoration:none;
}


/* =========================================================
   NO RESULTS
   ========================================================= */

.dmsearch__empty{
    padding:
        25px 18px;

    text-align:center;

    color:#aaa;

    font-size:11px;
}


.dmsearch__empty i{
    display:block;

    margin-bottom:8px;

    color:
        var(--dmsearch-gold);

    font-size:20px;
}


/* =========================================================
   ALL RESULTS
   ========================================================= */

.dmsearch__all-results{
    width:100% !important;
    min-height:46px !important;

    display:none;

    align-items:center !important;
    justify-content:space-between !important;

    gap:10px;

    margin:0 !important;

    padding:
        0 16px !important;

    border:0 !important;

    background:
        linear-gradient(
            90deg,
            rgba(182,0,0,.12),
            rgba(213,170,67,.055)
        ) !important;

    color:#ddd !important;

    font-family:
        Inter,
        Arial,
        sans-serif !important;

    font-size:10px !important;

    font-weight:600 !important;

    text-align:left;

    cursor:pointer;

    border-radius:0 !important;
}


.dmsearch.has-results
.dmsearch__all-results{
    display:flex;
}


.dmsearch__all-results:hover{
    color:#fff !important;

    background:
        rgba(182,0,0,.20) !important;
}


.dmsearch__all-results i{
    color:
        var(--dmsearch-gold);
}


/* =========================================================
   MOBILE
   ========================================================= */

@media(max-width:700px){

    .dmsearch{
        max-width:none;
    }


    .dmsearch__form{
        display:block;

        padding:8px !important;
    }


    .dmsearch__icon{
        display:none;
    }


    .dmsearch__input{
        height:50px !important;

        padding:
            0 40px 0 10px !important;

        line-height:50px !important;
    }


    .dmsearch__submit{
        width:100% !important;
        min-width:0 !important;

        margin-top:6px !important;
    }


    .dmsearch__dropdown{
        top:calc(100% + 7px);
    }


    .dmsearch__result{
        grid-template-columns:
            52px minmax(0,1fr);

        min-height:72px;

        gap:10px;

        padding:
            10px 11px;
    }


    .dmsearch__result-image{
        width:52px;
        height:52px;
    }


    .dmsearch__result-side{
        grid-column:2;

        min-width:0;

        margin-top:-4px;

        text-align:left;
    }


    .dmsearch__result-price{
        font-size:11px;
    }


    .dmsearch__result-title{
        font-size:11px;
    }

}


/* =========================================================
   DRIVERS MALL PRODUKTSUCHE
   LIVE-ERGEBNISSE – LIGHT DESIGN
   ========================================================= */


/* Dropdown komplett hell */

.dmsearch .dmsearch__dropdown{
    border:1px solid #e2e2e2 !important;

    background:#ffffff !important;

    box-shadow:
        0 24px 60px rgba(0,0,0,.16) !important;

    backdrop-filter:none !important;
}


/* =========================================================
   PRODUKTZEILE
   ========================================================= */

.dmsearch .dmsearch__result{
    min-height:82px;

    border-bottom:
        1px solid #eeeeee !important;

    background:#ffffff !important;

    color:#222222 !important;

    transition:
        background .18s ease,
        box-shadow .18s ease !important;
}


.dmsearch .dmsearch__result:last-child{
    border-bottom:0 !important;
}


.dmsearch .dmsearch__result:hover,
.dmsearch .dmsearch__result.is-active{
    background:#fafafa !important;

    box-shadow:
        inset 3px 0 0 #b60000 !important;
}


/* =========================================================
   PRODUKTBILD
   ========================================================= */

.dmsearch .dmsearch__result-image{
    border:1px solid #e4e4e4 !important;

    background:#f8f8f8 !important;
}


.dmsearch .dmsearch__result-image img{
    background:#f8f8f8 !important;
}


/* =========================================================
   MARKE
   ========================================================= */

.dmsearch .dmsearch__result-brand{
    color:#b60000 !important;

    font-weight:700 !important;
}


/* =========================================================
   PRODUKTNAME
   ========================================================= */

.dmsearch .dmsearch__result-title{
    color:#222222 !important;

    font-weight:600 !important;
}


/* =========================================================
   META / SKU
   ========================================================= */

.dmsearch .dmsearch__result-meta{
    color:#858585 !important;
}


/* Lagerstatus */

.dmsearch .dmsearch__result-stock{
    color:#656565 !important;
}


.dmsearch .dmsearch__result-stock:before{
    background:#43ad67 !important;
}


.dmsearch .dmsearch__result-stock.is-out:before{
    background:#c94c4c !important;
}


/* =========================================================
   PREIS
   ========================================================= */

.dmsearch .dmsearch__result-price{
    color:#8f0000 !important;

    font-size:14px !important;

    font-weight:700 !important;
}


.dmsearch .dmsearch__result-price ins{
    color:#8f0000 !important;
}


.dmsearch .dmsearch__result-price del{
    color:#999999 !important;
}


/* =========================================================
   LOADING
   ========================================================= */

.dmsearch .dmsearch__loading{
    background:#ffffff !important;

    color:#777777 !important;
}


.dmsearch .dmsearch__loading i{
    color:#b60000 !important;
}


/* =========================================================
   KEINE ERGEBNISSE
   ========================================================= */

.dmsearch .dmsearch__empty{
    background:#ffffff !important;

    color:#777777 !important;
}


.dmsearch .dmsearch__empty i{
    color:#d5aa43 !important;
}


/* =========================================================
   ALLE ERGEBNISSE BUTTON
   ========================================================= */

.dmsearch .dmsearch__all-results{
    min-height:50px !important;

    border-top:
        1px solid #ececec !important;

    background:
        linear-gradient(
            90deg,
            #fafafa,
            #f5f5f5
        ) !important;

    color:#333333 !important;
}


.dmsearch .dmsearch__all-results:hover{
    background:#f2f2f2 !important;

    color:#b60000 !important;
}


.dmsearch .dmsearch__all-results i{
    color:#b60000 !important;
}


/* =========================================================
   MOBILE
   ========================================================= */

@media(max-width:700px){

    .dmsearch .dmsearch__dropdown{
        border-radius:11px !important;
    }


    .dmsearch .dmsearch__result{
        min-height:76px;
    }

}