/* assets/css/profile.css
   Profile page (player + share + favorites toast) styles only.
   Keep app.css as your global bundle; this file is profile-specific.
*/

.player-wrap{
  position:relative;
  border-radius:.75rem;
  overflow:hidden;
  background:#000;
}
.player-wrap video{
  width:100%;
  height:100%;
  max-height:520px;
  background:#000;
}
.player-overlay{
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  color:#fff;
  background:linear-gradient(180deg,rgba(0,0,0,.35),rgba(0,0,0,.6));
  text-align:center;
  padding:1rem;
}
.nav-arrow{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  z-index:6;
  background:rgba(0,0,0,.45);
  color:#fff;
  border:none;
  width:42px;
  height:42px;
  border-radius:999px;
  display:flex;
  align-items:center;
  justify-content:center;
  text-decoration:none;
}
.nav-arrow:hover{ background:rgba(0,0,0,.65); }
.nav-prev{ left:.5rem; }
.nav-next{ right:.5rem; }

.poster{
  width:100%;
  height:100%;
  object-fit:cover;
  position:absolute;
  inset:0;
  filter:brightness(.85);
}

.share-grid .btn{ min-width:9.5rem; }

.qr-box .qrd{
  width:120px;
  height:120px;
  border:1px solid rgba(0,0,0,.1);
  border-radius:.5rem;
  display:flex;
  align-items:center;
  justify-content:center;
}

.flag-img{
  vertical-align:baseline;
  border-radius:2px;
}

.player-tap-unmute{
  position:absolute;
  left:50%;
  transform:translateX(-50%);
  bottom:.75rem;
  z-index:7;
}

#favToast{
  position:fixed;
  left:50%;
  transform:translateX(-50%);
  bottom:16px;
  z-index:1090;
  display:none;
}

.mobile-share-row{
  display:flex;
  gap:.5rem;
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
  padding-top:.25rem;
}
.mobile-share-row .btn{ flex:0 0 auto; }