/*
 * Büchler Musikproduktion
 * Warteschlangen-Plus auf Mediathek-Covern
 */

.bmp-med-card{
    position:relative!important;
}

.bmp-med-cover{
    position:relative!important;
    overflow:hidden!important;
}

.bmp-med-queue-plus{
    bottom:78px!important;
    position:absolute!important;
    top:auto!important;
    right:14px!important;
    z-index:60!important;

    width:48px!important;
    height:48px!important;
    min-width:48px!important;
    min-height:48px!important;

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

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

    border:2px solid #9affba!important;
    border-radius:16px!important;

    background:linear-gradient(
        145deg,
        #7dffad,
        #1ed760 58%,
        #078637
    )!important;

    color:#021007!important;

    box-shadow:
        0 0 0 5px rgba(2,15,7,.68),
        0 0 28px rgba(30,215,96,.52),
        0 10px 25px rgba(0,0,0,.55)!important;

    opacity:1!important;
    visibility:visible!important;

    cursor:pointer!important;

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

.bmp-med-queue-plus:hover{
    transform:scale(1.08)!important;

    background:linear-gradient(
        145deg,
        #a3ffc3,
        #35e574 58%,
        #07963d
    )!important;

    box-shadow:
        0 0 0 6px rgba(2,15,7,.72),
        0 0 38px rgba(30,215,96,.68),
        0 12px 28px rgba(0,0,0,.6)!important;
}

.bmp-med-queue-plus:active{
    transform:scale(.94)!important;
}

.bmp-med-queue-plus:focus-visible{
    outline:3px solid rgba(117,255,166,.55)!important;
    outline-offset:3px!important;
}

.bmp-med-queue-plus svg{
    width:25px!important;
    height:25px!important;
    display:block!important;
    fill:currentColor!important;
    pointer-events:none!important;
}

.bmp-med-queue-plus.is-loading{
    opacity:.55!important;
    pointer-events:none!important;
}

.bmp-med-queue-plus.is-added{
    border-color:#ffffff!important;

    background:linear-gradient(
        145deg,
        #ffffff,
        #aaffc7
    )!important;
}

.bmp-med-queue-plus-tooltip{
    position:absolute!important;
    top:auto!important;
    bottom:55px!important;
    right:0!important;

    min-width:max-content!important;
    padding:7px 10px!important;

    border:1px solid rgba(30,215,96,.52)!important;
    border-radius:10px!important;

    background:rgba(2,14,7,.98)!important;
    color:#f1fff5!important;

    box-shadow:0 12px 30px rgba(0,0,0,.58)!important;

    font-size:11px!important;
    font-weight:900!important;
    white-space:nowrap!important;

    opacity:0!important;
    visibility:hidden!important;
    pointer-events:none!important;

    transition:
        opacity .16s ease,
        visibility .16s ease!important;
}

.bmp-med-queue-plus:hover .bmp-med-queue-plus-tooltip,
.bmp-med-queue-plus:focus-visible .bmp-med-queue-plus-tooltip{
    opacity:1!important;
    visibility:visible!important;
}

.bmp-med-queue-toast{
    position:fixed!important;
    left:50%!important;
    bottom:130px!important;
    z-index:1000020!important;

    max-width:calc(100vw - 30px)!important;
    padding:13px 18px!important;

    border:1px solid rgba(30,215,96,.62)!important;
    border-radius:15px!important;

    background:rgba(3,15,8,.98)!important;
    color:#effff4!important;

    box-shadow:
        0 20px 60px rgba(0,0,0,.65),
        0 0 28px rgba(30,215,96,.14)!important;

    font-size:13px!important;
    font-weight:900!important;

    opacity:0!important;
    pointer-events:none!important;

    transform:translate(-50%,12px)!important;

    transition:
        opacity .18s ease,
        transform .18s ease!important;
}

.bmp-med-queue-toast.show{
    opacity:1!important;
    transform:translate(-50%,0)!important;
}

.bmp-med-queue-toast.error{
    border-color:rgba(255,74,74,.8)!important;
    background:rgba(48,5,5,.98)!important;
    color:#ffecec!important;
}

@media(max-width:700px){
    .bmp-med-queue-plus{
        top:10px!important;
        right:10px!important;
        width:44px!important;
        height:44px!important;
        min-width:44px!important;
        min-height:44px!important;
    }

    .bmp-med-queue-toast{
        bottom:235px!important;
    }
}


/* PLUS UNTEN RECHTS IM KARTENBEREICH */

.bmp-med-card{
    position:relative!important;
    padding-bottom:74px!important;
}

/*
 * Das Plus liegt jetzt unten rechts im Kartenkörper,
 * genau unter Titel, Künstler und Tags.
 */
.bmp-med-card > .bmp-med-queue-plus{
    position:absolute!important;

    top:auto!important;
    right:18px!important;
    bottom:18px!important;
    left:auto!important;

    z-index:40!important;

    width:48px!important;
    height:48px!important;
    min-width:48px!important;
    min-height:48px!important;
    max-width:48px!important;
    max-height:48px!important;

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

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

    border:2px solid #91ffb4!important;
    border-radius:16px!important;

    background:
        linear-gradient(
            145deg,
            #7effad,
            #1ed760 58%,
            #078637
        )!important;

    color:#021007!important;

    box-shadow:
        0 0 0 4px rgba(2,15,7,.45),
        0 0 24px rgba(30,215,96,.36),
        0 10px 24px rgba(0,0,0,.46)!important;

    opacity:1!important;
    visibility:visible!important;
    transform:none!important;

    cursor:pointer!important;

    transition:
        transform .16s ease,
        background .16s ease,
        box-shadow .16s ease,
        border-color .16s ease!important;
}

.bmp-med-card > .bmp-med-queue-plus:hover{
    transform:translateY(-2px) scale(1.06)!important;

    border-color:#c1ffd5!important;

    background:
        linear-gradient(
            145deg,
            #a6ffc6,
            #39e677 58%,
            #07963d
        )!important;

    box-shadow:
        0 0 0 5px rgba(2,15,7,.52),
        0 0 34px rgba(30,215,96,.54),
        0 13px 28px rgba(0,0,0,.52)!important;
}

.bmp-med-card > .bmp-med-queue-plus:active{
    transform:scale(.94)!important;
}

.bmp-med-card > .bmp-med-queue-plus:focus-visible{
    outline:3px solid rgba(113,255,163,.48)!important;
    outline-offset:3px!important;
}

.bmp-med-card > .bmp-med-queue-plus svg{
    width:25px!important;
    height:25px!important;
    display:block!important;
    fill:currentColor!important;
    pointer-events:none!important;
}

.bmp-med-card > .bmp-med-queue-plus.is-loading{
    opacity:.55!important;
    pointer-events:none!important;
}

.bmp-med-card > .bmp-med-queue-plus.is-added{
    border-color:#ffffff!important;

    background:
        linear-gradient(
            145deg,
            #ffffff,
            #adffca
        )!important;
}

/*
 * Tooltip öffnet sich oberhalb des Buttons.
 */
.bmp-med-card > .bmp-med-queue-plus .bmp-med-queue-plus-tooltip{
    position:absolute!important;

    top:auto!important;
    right:0!important;
    bottom:58px!important;

    min-width:max-content!important;

    padding:7px 10px!important;

    border:1px solid rgba(30,215,96,.52)!important;
    border-radius:10px!important;

    background:rgba(2,14,7,.98)!important;
    color:#f1fff5!important;

    box-shadow:0 12px 30px rgba(0,0,0,.58)!important;

    font-size:11px!important;
    font-weight:900!important;
    white-space:nowrap!important;

    opacity:0!important;
    visibility:hidden!important;
    pointer-events:none!important;

    transition:
        opacity .16s ease,
        visibility .16s ease!important;
}

.bmp-med-card > .bmp-med-queue-plus:hover .bmp-med-queue-plus-tooltip,
.bmp-med-card > .bmp-med-queue-plus:focus-visible .bmp-med-queue-plus-tooltip{
    opacity:1!important;
    visibility:visible!important;
}

@media(max-width:700px){
    .bmp-med-card{
        padding-bottom:68px!important;
    }

    .bmp-med-card > .bmp-med-queue-plus{
        right:14px!important;
        bottom:14px!important;

        width:44px!important;
        height:44px!important;
        min-width:44px!important;
        min-height:44px!important;
        max-width:44px!important;
        max-height:44px!important;
    }
}

/* DAUERHAFTER HAKEN FÜR TITEL IN DER WARTESCHLANGE */

.bmp-med-card > .bmp-med-queue-plus.is-added{
    border-color:#b9ffd0!important;

    background:
        linear-gradient(
            145deg,
            #8dffb6,
            #1ed760 58%,
            #078637
        )!important;

    color:#021007!important;

    box-shadow:
        0 0 0 4px rgba(2,15,7,.46),
        0 0 28px rgba(30,215,96,.46),
        0 10px 24px rgba(0,0,0,.46)!important;
}

.bmp-med-card > .bmp-med-queue-plus.is-added:hover{
    border-color:#ff9b9b!important;

    background:
        linear-gradient(
            145deg,
            #ff8989,
            #dd3434 58%,
            #8f1111
        )!important;

    color:#ffffff!important;

    box-shadow:
        0 0 0 4px rgba(25,2,2,.48),
        0 0 28px rgba(255,64,64,.35),
        0 10px 24px rgba(0,0,0,.48)!important;
}

.bmp-med-card > .bmp-med-queue-plus[aria-pressed="true"]{
    border-color:#b9ffd0!important;
}

.bmp-med-card > .bmp-med-queue-plus.is-loading{
    cursor:wait!important;
    opacity:.55!important;
    pointer-events:none!important;
}