/* =========================================
   FLARE U — LISTENING PARTY
========================================= */


/* =========================
   FLOATING HEADPHONE
========================= */

.lu-party-trigger{
  position:fixed;

  right:18px;
  bottom:90px;

  width:56px;
  height:56px;

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

  padding:0;

  border:none;
  border-radius:50%;

  background:#91d3ca;
  color:#102522;

  cursor:pointer;

  box-shadow:0 10px 25px rgba(0,0,0,.18);

  z-index:9998;

  transition:.25s ease;
}


/* ICON */

.lu-party-trigger img{
  width:26px;
  height:26px;

  display:block;

  object-fit:contain;
}


/* HOVER */

.lu-party-trigger:hover{
  transform:translateY(-2px);
}


/* ACTIVE */

.lu-party-trigger:active{
  transform:scale(.95);
}


/* =========================
   LISTENING PARTY WINDOW
========================= */

.lu-party-window{
  position:fixed;

  right:18px;
  bottom:90px;

  width:540px;

  box-sizing:border-box;

  padding:30px 30px 18px;

  background:#fff;

  border:2px solid #91d3ca;

  border-radius:28px;

  box-shadow:0 12px 35px rgba(0,0,0,.16);

  z-index:9999;

  display:none;

  animation:luPartyPopupIn .3s ease;

  overflow:hidden;
}


/* =========================
   OPEN ANIMATION
========================= */

@keyframes luPartyPopupIn{

  from{
    opacity:0;

    transform:
      translateY(20px)
      scale(.96);
  }

  to{
    opacity:1;

    transform:
      translateY(0)
      scale(1);
  }

}


/* =========================
   CLOSE
========================= */

.lu-party-close{
  position:absolute;

  top:13px;
  right:14px;

  width:38px;
  height:38px;

  padding:0;

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

  border:none;

  background:transparent;

  cursor:pointer;

  z-index:5;
}


.lu-party-close img{
  width:25px;
  height:25px;
  display:flex;
  object-fit:contain;
}


.lu-party-close:hover{
  transform:scale(1.08);
}


/* =========================
   DECORATION
========================= */

.lu-party-heart{
  position:absolute;

  top:-14px;
  left:75px;

  width:48px;
  height:48px;

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

  background:#ffb0c9;

  border:4px solid #fff;

  border-radius:50%;

  color:#fff;

  font-size:28px;

  transform:rotate(-12deg);

  box-shadow:0 4px 10px rgba(0,0,0,.08);
}


.lu-party-star{
  position:absolute;

  color:#91d7d2;

  font-size:25px;
}


.lu-party-star-1{
  top:42px;
  left:28px;
}


.lu-party-star-2{
  right:32px;
  bottom:75px;

  color:#ff9fbd;
}


/* =========================
   MAIN
========================= */

.lu-party-main{
  display:flex;
  align-items:center;

  gap:24px;
}


/* =========================
   ALBUM
========================= */

.lu-party-art{
  width:190px;
  height:190px;

  flex-shrink:0;

  overflow:hidden;

  border-radius:20px;

  box-shadow:0 7px 18px rgba(0,0,0,.10);
}


.lu-party-art img{
  width:100%;
  height:100%;

  display:block;

  object-fit:cover;
}


/* =========================
   INFO
========================= */

.lu-party-info{
  flex:1;
  min-width:0;
}


/* BADGE */

.lu-party-badge{
  display:inline-flex;
  align-items:center;

  padding:7px 13px;

  background:#f58eae;

  border-radius:999px;

  color:#fff;

  font-size:12px;
  font-weight:700;
}


/* TITLE */

.lu-party-info h2{
  margin:12px 0 5px;

  color:#303030;

  font-size:34px;

  line-height:.94;

  letter-spacing:-1px;

  font-weight:800;
}


.lu-party-info h2 span{
  display:block;

  margin-top:3px;

  color:#78c9c3;
}


/* DOT LINE */

.lu-party-dots{
  width:100%;
  height:2px;

  margin:14px 0;

  background:
    repeating-linear-gradient(
      to right,
      #91d3ca 0,
      #91d3ca 4px,
      transparent 4px,
      transparent 9px
    );
}


/* SONG */

.lu-party-info h3{
  margin:0;

  color:#f18aaa;

  font-size:21px;

  font-weight:800;
}


.lu-party-subtitle{
  margin:4px 0 11px;

  color:#444;

  font-size:14px;
}


/* =========================
   DATE
========================= */

.lu-party-date{
  display:flex;
  align-items:center;

  gap:7px;

  width:fit-content;
  max-width:100%;

  box-sizing:border-box;

  padding:9px 12px;

  background:#e7f6f4;

  border-radius:999px;

  color:#444;

  font-size:11px;

  font-weight:600;
}


.lu-party-date img{
  width:17px;
  height:17px;

  flex-shrink:0;
}


/* =========================
   JOIN
========================= */

.lu-party-join{
  display:flex;
  align-items:center;
  justify-content:center;

  width:100%;

  box-sizing:border-box;

  margin-top:13px;

  padding:13px 15px;

  background:#f58eae;

  border-radius:999px;

  color:#fff;

  text-decoration:none;

  font-size:13px;

  font-weight:800;

  box-shadow:
    0 7px 17px rgba(245,142,174,.24);

  transition:.2s ease;
}


.lu-party-join img{
  width:20px;
  height:20px;

  margin-left:8px;
}


.lu-party-join:hover{
  background:#ee759d;

  transform:translateY(-2px);
}


/* =========================
   PLAYLIST
========================= */

.lu-party-playlist{
  display:flex;
  align-items:center;
  justify-content:center;

  gap:9px;

  margin-top:17px;
}


.lu-party-playlist-title{
  margin-right:3px;

  color:#444;

  font-size:13px;

  font-weight:600;
}


/* MUSIC ICON */

.lu-party-music{
  width:40px;
  height:40px;

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

  box-sizing:border-box;

  background:#fff;

  border:1.5px solid #b8e2df;

  border-radius:50%;

  transition:.2s ease;
}


.lu-party-music img{
  width:23px;
  height:23px;

  object-fit:contain;
}


.lu-party-music:hover{
  transform:translateY(-3px);

  border-color:#f58eae;

  box-shadow:0 5px 12px rgba(0,0,0,.08);
}


/* =========================
   FOOTER
========================= */

.lu-party-footer{
  margin-top:10px;

  text-align:center;

  color:#555;

  font-size:12px;

  font-weight:500;
}


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

@media (max-width:600px){

  .lu-party-trigger{
    right:18px;
    bottom:90px;

    width:56px;
    height:56px;
  }


  .lu-party-trigger img{
    width:26px;
    height:26px;
  }


  .lu-party-window{
    right:18px;
    bottom:90px;

    width:calc(100% - 36px);

    padding:22px 16px 15px;

    border-radius:24px;
  }


  .lu-party-heart{
    width:38px;
    height:38px;

    left:45px;

    font-size:22px;
  }


  .lu-party-main{
    gap:13px;

    align-items:flex-start;
  }


  .lu-party-art{
    width:105px;
    height:105px;

    border-radius:14px;
  }


  .lu-party-info{
    padding-top:4px;
  }


  .lu-party-badge{
    padding:5px 8px;

    font-size:9px;
  }


  .lu-party-info h2{
    margin-top:9px;

    font-size:23px;

    letter-spacing:-.5px;
  }


  .lu-party-dots{
    margin:9px 0;
  }


  .lu-party-info h3{
    font-size:16px;
  }


  .lu-party-subtitle{
    font-size:11px;

    margin-bottom:7px;
  }


  .lu-party-date{
    width:100%;

    padding:7px 8px;

    font-size:8px;

    gap:5px;
  }


  .lu-party-date img{
    width:14px;
    height:14px;
  }


  .lu-party-join{
    margin-top:9px;

    padding:10px 8px;

    font-size:10px;
  }


  .lu-party-join img{
    width:16px;
    height:16px;
  }


  .lu-party-playlist{
    gap:7px;

    margin-top:13px;
  }


  .lu-party-playlist-title{
    font-size:10px;
  }


  .lu-party-music{
    width:32px;
    height:32px;
  }


  .lu-party-music img{
    width:18px;
    height:18px;
  }


  .lu-party-footer{
    margin-top:7px;

    font-size:10px;
  }


  .lu-party-close{
    top:7px;
    right:8px;

    width:30px;
    height:30px;
  }


  .lu-party-close img{
    width:21px;
    height:21px;
  }

}