/* ================= REELS CONTAINER ================= */
.reels-clean{
  display:flex;
  gap:16px;
  overflow-x:auto;
  overflow-y:hidden;
  padding:20px;
  scroll-snap-type:x mandatory;
  -webkit-overflow-scrolling:touch;
}

.reels-clean::-webkit-scrollbar{
  display:none;
}

/* ================= SINGLE REEL ================= */
.reel-clean{
  position:relative;
  flex:0 0 25%;
  max-width:25%;
  scroll-snap-align:center;
}

/* ================= VIDEO ================= */
.reel-clean video{
  width:100%;
  height:280px;
  object-fit:cover;
  border-radius:12px;
  display:block;
  background:#000;
}

/* ================= ICON BUTTONS ================= */
.play-btn,
.sound-btn,
.fullscreen-btn{
  position:absolute;
  border:none;
  background:rgba(0,0,0,.75);
  color:#fff;
  z-index:9999;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
}

/* play */
.play-btn{
  top:50%;
  left:50%;
  transform:translate(-50%,-50%);
  width:56px;
  height:56px;
  border-radius:50%;
  font-size:22px;
}

/* sound */
.sound-btn{
  bottom:12px;
  right:12px;
  width:40px;
  height:40px;
  border-radius:50%;
  font-size:18px;
}

/* fullscreen */
.fullscreen-btn{
  bottom:12px;
  left:12px;
  width:40px;
  height:40px;
  border-radius:50%;
  font-size:18px;
}

/* ================= ARROWS (PC ONLY) ================= */
.reels-arrow{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  background:rgba(0,0,0,.6);
  color:#fff;
  border:none;
  width:44px;
  height:44px;
  border-radius:50%;
  cursor:pointer;
  z-index:99999;
}

.reels-arrow.left{ left:10px; }
.reels-arrow.right{ right:10px; }

/* ================= MOBILE ================= */
@media(max-width:768px){
  .reel-clean{
    flex:0 0 50%;
    max-width:50%;
  }
  .reel-clean video{
    height:240px;
  }
  .reels-arrow{
    display:none;
  }
}