/* Long Pause Media header utilities — 0.15.62 */

.lpm-header-utility{
    position:relative;
    display:grid;
    width:40px;
    height:40px;
    flex:0 0 40px;
    place-items:center;
    border:0;
    border-radius:999px;
    background:transparent;
    color:#d9e5ef;
    cursor:pointer;
    transition:background .15s ease,color .15s ease,transform .15s ease
}
.lpm-header-utility:hover,
.lpm-header-utility[aria-expanded="true"]{
    color:#fff;
    background:rgba(255,255,255,.09)
}
.lpm-header-utility:active{transform:scale(.96)}
.lpm-header-utility svg{
    width:22px;
    height:22px;
    fill:none;
    stroke:currentColor;
    stroke-width:1.8;
    stroke-linecap:round;
    stroke-linejoin:round
}
.lpm-utility-badge{
    position:absolute;
    top:-2px;
    right:-3px;
    display:grid;
    min-width:18px;
    height:18px;
    place-items:center;
    padding:0 4px;
    border:2px solid #121212;
    border-radius:999px;
    font-size:10px;
    font-weight:950;
    line-height:1
}
.lpm-utility-badge[hidden]{display:none!important}
.lpm-utility-badge.is-notification{background:#e53935;color:#fff}
.lpm-utility-badge.is-cart{background:#65dcff;color:#06111c}

.lpm-utility-scrim{
    position:fixed;
    z-index:118;
    inset:0;
    background:rgba(0,0,0,.42);
    backdrop-filter:blur(2px);
    opacity:1
}
.lpm-utility-scrim[hidden]{display:none!important}

.lpm-utility-drawer{
    position:fixed;
    z-index:120;
    display:grid;
    grid-template-rows:auto minmax(0,1fr) auto;
    overflow:hidden;
    border:1px solid rgba(134,211,255,.18);
    background:rgba(7,18,31,.985);
    box-shadow:0 28px 80px rgba(0,0,0,.52);
    color:#f6fbff;
    transform-origin:top center;
    animation:lpm-drawer-drop .16s ease-out both
}
.lpm-utility-drawer[hidden]{display:none!important}
.lpm-utility-drawer-head{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:14px;
    min-height:68px;
    padding:13px 16px;
    border-bottom:1px solid rgba(255,255,255,.08)
}
.lpm-utility-drawer-head>div:first-child{
    display:grid;
    gap:2px
}
.lpm-utility-drawer-head>div:first-child>span{
    color:#72defa;
    font-size:10px;
    font-weight:900;
    letter-spacing:.12em;
    text-transform:uppercase
}
.lpm-utility-drawer-head>div:first-child>strong{font-size:17px}
.lpm-utility-drawer-head>div:last-child{
    display:flex;
    align-items:center;
    gap:6px
}
.lpm-drawer-close,
.lpm-drawer-text-action{
    border:0;
    background:transparent;
    color:#aebfd0;
    cursor:pointer
}
.lpm-drawer-close{
    display:grid;
    width:40px;
    height:40px;
    place-items:center;
    border-radius:999px;
    font-size:27px;
    font-weight:350
}
.lpm-drawer-close:hover{background:rgba(255,255,255,.08);color:#fff}
.lpm-drawer-text-action{
    min-height:38px;
    padding:0 9px;
    border-radius:999px;
    font:inherit;
    font-size:12px;
    font-weight:800
}
.lpm-drawer-text-action:hover{color:#fff;background:rgba(255,255,255,.07)}
.lpm-utility-drawer-body{
    min-height:0;
    overflow-y:auto;
    overscroll-behavior:contain
}
.lpm-utility-drawer-foot{
    display:flex;
    align-items:center;
    justify-content:flex-end;
    min-height:54px;
    padding:9px 15px;
    border-top:1px solid rgba(255,255,255,.08)
}
.lpm-utility-drawer-foot a{
    color:#73e3ff;
    font-size:12px;
    font-weight:850;
    text-decoration:none
}
.lpm-drawer-empty{
    display:grid;
    min-height:220px;
    place-items:center;
    align-content:center;
    gap:5px;
    padding:30px;
    color:#8fa5ba;
    text-align:center
}
.lpm-drawer-empty strong{color:#eef7ff;font-size:16px}
.lpm-drawer-empty a{
    display:inline-flex;
    min-height:40px;
    align-items:center;
    justify-content:center;
    margin-top:10px;
    padding:0 14px;
    border-radius:999px;
    background:#65dcff;
    color:#06111c;
    font-weight:900;
    text-decoration:none
}

/* Notification drawer */
.lpm-drawer-notification{
    position:relative;
    display:grid;
    grid-template-columns:auto minmax(0,1fr);
    gap:11px;
    padding:14px 14px 12px;
    border-bottom:1px solid rgba(255,255,255,.065);
    background:transparent
}
.lpm-drawer-notification.is-unread{background:rgba(101,220,255,.055)}
.lpm-drawer-notification.is-pinned{background:linear-gradient(90deg,rgba(101,220,255,.075),rgba(255,255,255,.018))}
.lpm-drawer-notification-dot{
    width:8px;
    height:8px;
    margin-top:7px;
    border-radius:999px;
    background:transparent
}
.lpm-drawer-notification.is-unread .lpm-drawer-notification-dot{
    background:#65dcff;
    box-shadow:0 0 12px rgba(101,220,255,.65)
}
.lpm-drawer-notification-main{
    display:grid;
    min-width:0;
    gap:5px
}
.lpm-drawer-notification-link{
    display:grid;
    min-width:0;
    gap:4px;
    color:inherit;
    text-decoration:none
}
.lpm-drawer-notification-title{
    display:flex;
    align-items:flex-start;
    gap:6px;
    font-size:13px;
    line-height:1.35
}
.lpm-drawer-notification-title i{
    color:#71e2ff;
    font-style:normal
}
.lpm-drawer-notification-body{
    display:-webkit-box;
    overflow:hidden;
    color:#9eb0c2;
    font-size:12px;
    line-height:1.42;
    -webkit-box-orient:vertical;
    -webkit-line-clamp:2
}
.lpm-drawer-notification-time{
    color:#647a90;
    font-size:10px;
    font-weight:750
}
.lpm-drawer-notification-actions{
    display:flex;
    flex-wrap:wrap;
    gap:4px;
    margin-top:2px
}
.lpm-drawer-notification-actions button{
    min-height:30px;
    padding:0 8px;
    border:0;
    border-radius:8px;
    background:transparent;
    color:#8fa4b8;
    font:inherit;
    font-size:10px;
    font-weight:800;
    cursor:pointer
}
.lpm-drawer-notification-actions button:hover{
    color:#fff;
    background:rgba(255,255,255,.07)
}
.lpm-drawer-notification-actions button.is-danger:hover{
    color:#ffb0b0;
    background:rgba(255,75,75,.08)
}

/* Header cart */
.lpm-cart-item{
    display:grid;
    grid-template-columns:60px minmax(0,1fr);
    gap:12px;
    padding:13px 14px;
    border-bottom:1px solid rgba(255,255,255,.065)
}
.lpm-cart-item-art{
    display:grid;
    width:60px;
    height:60px;
    place-items:center;
    overflow:hidden;
    border-radius:11px;
    background:#12283c;
    color:#6fe0ff;
    font-size:20px;
    font-weight:900
}
.lpm-cart-item-art img{width:100%;height:100%;object-fit:cover}
.lpm-cart-item-copy{
    display:grid;
    min-width:0;
    gap:4px
}
.lpm-cart-item-copy strong{
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
    font-size:13px
}
.lpm-cart-item-copy small{color:#91a5b8;font-size:11px}
.lpm-cart-item-copy em{color:#fff;font-size:12px;font-style:normal;font-weight:850}
.lpm-cart-item-actions{
    display:flex;
    align-items:center;
    gap:7px;
    margin-top:3px
}
.lpm-cart-item-actions a,
.lpm-cart-item-actions button{
    display:inline-flex;
    min-height:32px;
    align-items:center;
    justify-content:center;
    padding:0 10px;
    border:0;
    border-radius:999px;
    font:inherit;
    font-size:10px;
    font-weight:900;
    text-decoration:none;
    cursor:pointer
}
.lpm-cart-item-actions a{background:#65dcff;color:#06111c}
.lpm-cart-item-actions button{background:rgba(255,255,255,.06);color:#aabaca}
.lpm-cart-item-actions button:hover{color:#fff}
[data-cart-add].is-in-cart{opacity:.74}

/* Desktop */
@media(min-width:761px){
    body.desktop-listener-app .desktop-stream-top-actions{
        gap:5px
    }
    body.desktop-listener-app .lpm-header-utility{
        width:36px;
        height:36px;
        flex-basis:36px
    }
    .lpm-utility-scrim{
        background:transparent;
        backdrop-filter:none
    }
    .lpm-utility-drawer{
        top:66px;
        right:16px;
        width:min(430px,calc(100vw - 40px));
        max-height:min(690px,calc(100vh - 178px));
        border-radius:16px
    }
}

/* PWA/mobile */
@media(max-width:760px){
    .mobile-app-header{
        grid-template-columns:42px minmax(0,1fr) auto!important
    }
    .mobile-app-header-actions{
        grid-column:3;
        display:flex;
        align-items:center;
        justify-content:flex-end;
        gap:2px
    }
    .mobile-app-header-actions .mobile-app-avatar{
        grid-column:auto;
        margin-left:2px
    }
    .mobile-app-header-actions .lpm-header-utility{
        width:38px;
        height:38px;
        flex-basis:38px
    }
    .mobile-app-header-actions .lpm-header-utility svg{width:21px;height:21px}
    .lpm-utility-badge{
        top:-1px;
        right:-2px;
        border-color:#07101d
    }
    .lpm-utility-drawer{
        top:calc(64px + env(safe-area-inset-top));
        left:0;
        right:0;
        width:100%;
        max-height:min(72dvh,680px);
        border-width:0 0 1px;
        border-radius:0 0 20px 20px
    }
    .lpm-utility-scrim{
        top:calc(64px + env(safe-area-inset-top))
    }
    .lpm-utility-drawer-head{
        min-height:60px;
        padding:10px 14px
    }
    .lpm-utility-drawer-foot{
        padding-bottom:calc(10px + env(safe-area-inset-bottom))
    }
    .lpm-drawer-notification-actions button{min-height:34px;padding-inline:9px}
}
@keyframes lpm-drawer-drop{
    from{opacity:0;transform:translateY(-14px)}
    to{opacity:1;transform:translateY(0)}
}
@media(prefers-reduced-motion:reduce){
    .lpm-utility-drawer{animation:none!important}
}