/* Social Feed Slider — front-end styles  v1.0.0  by Raianuzzaman */

.sfs-feed-wrap{
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  width:100%;overflow:hidden;border-radius:16px;
}

.sfs-marquee{
  position:relative;width:100%;overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent);
}

.sfs-track{
  display:flex;gap:18px;width:max-content;
  animation:sfs-scroll 45s linear infinite;
}
.sfs-track.sfs-rtl{animation-direction:reverse;}

.sfs-marquee.sfs-pause:hover .sfs-track{animation-play-state:paused;}

@keyframes sfs-scroll{
  from{transform:translateX(0);}
  to{transform:translateX(-50%);}
}

.sfs-card{
  position:relative;flex:0 0 auto;width:230px;height:306px;
  border-radius:16px;overflow:hidden;display:block;text-decoration:none;
  box-shadow:0 8px 22px rgba(0,0,0,.14);
  transition:transform .3s ease,box-shadow .3s ease;
}
.sfs-card:hover{transform:translateY(-6px);box-shadow:0 16px 34px rgba(0,0,0,.22);}
.sfs-card img{width:100%;height:100%;object-fit:cover;display:block;}

/* platform pill badge (top-left) */
.sfs-badge{
  position:absolute;top:12px;left:12px;display:flex;align-items:center;gap:6px;
  height:30px;padding:0 12px 0 10px;border-radius:30px;
  background:rgba(0,0,0,.55);color:#fff;font-size:13px;font-weight:600;letter-spacing:.2px;
  backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);
  box-shadow:0 2px 8px rgba(0,0,0,.25);
}
.sfs-badge-icon{display:flex;width:17px;height:17px;}
.sfs-badge-icon svg{width:100%;height:100%;}

/* play / hover overlay */
.sfs-overlay{
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  background:rgba(0,0,0,.30);opacity:0;transition:opacity .3s ease;
}
.sfs-card:hover .sfs-overlay{opacity:1;}
.sfs-play{
  width:46px;height:46px;border-radius:50%;
  background:rgba(255,255,255,.92) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23111'%3E%3Cpath d='M8 5v14l11-7z'/%3E%3C/svg%3E") no-repeat center/22px;
}

@media (max-width:768px){
  .sfs-card{width:160px;height:213px;}
  .sfs-track{gap:12px;}
}