/* Sisira Instagram Shoppable Reels – Frontend Player */
:root {
  --sir-radius: 12px;
  --sir-green:  #00a651;
  --sir-accent: #e94560;
}

.sisira-reels-widget { width:100%; }

/* ── Carousel layout ──────────────────────────────────────── */
.sir-carousel {
  display:flex; gap:12px; overflow-x:auto; scroll-snap-type:x mandatory;
  scrollbar-width:thin; padding-bottom:8px;
}
.sir-carousel::-webkit-scrollbar { height:4px; }
.sir-carousel::-webkit-scrollbar-thumb { background:#ccc; border-radius:4px; }

/* ── Reel item ────────────────────────────────────────────── */
.sir-reel-item {
  flex-shrink:0; width:220px; height:380px; border-radius:var(--sir-radius);
  overflow:hidden; position:relative; background:#111; scroll-snap-align:start;
  cursor:pointer; transition:transform .2s;
}
.sir-reel-item:hover { transform:scale(1.02); }

.sir-reel-item video,
.sir-reel-item img {
  width:100%; height:100%; object-fit:cover; display:block; border-radius:var(--sir-radius);
}

/* Overlay gradient */
.sir-reel-overlay {
  position:absolute; inset:0;
  background:linear-gradient(to top, rgba(0,0,0,.8) 0%, rgba(0,0,0,.2) 40%, transparent 70%);
  border-radius:var(--sir-radius);
}

/* ── Controls ─────────────────────────────────────────────── */
.sir-reel-controls {
  position:absolute; bottom:0; left:0; right:0; padding:12px;
  display:flex; flex-direction:column; gap:6px;
}

.sir-reel-title-text {
  color:#fff; font-size:12px; font-weight:600; line-height:1.3;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}

/* ── Product tags ─────────────────────────────────────────── */
.sir-product-tags { display:flex; flex-direction:column; gap:4px; margin-top:4px; }
.sir-product-tag-btn {
  display:flex; align-items:center; gap:6px; background:rgba(255,255,255,.15);
  backdrop-filter:blur(8px); border:none; border-radius:20px; padding:5px 10px 5px 5px;
  cursor:pointer; text-decoration:none; transition:background .2s;
}
.sir-product-tag-btn:hover { background:rgba(255,255,255,.3); }
.sir-product-tag-img {
  width:28px; height:28px; border-radius:50%; object-fit:cover; background:#fff;
  flex-shrink:0;
}
.sir-product-tag-info { text-align:left; }
.sir-product-tag-name { color:#fff; font-size:11px; font-weight:600; display:block; }
.sir-product-tag-price { color:rgba(255,255,255,.8); font-size:10px; }

/* ── CTA Buttons ──────────────────────────────────────────── */
.sir-cta-buttons { display:flex; flex-direction:column; gap:4px; margin-top:4px; }
.sir-cta-link {
  display:block; background:var(--sir-green); color:#fff !important; text-align:center;
  padding:7px 12px; border-radius:20px; font-size:12px; font-weight:700;
  text-decoration:none; transition:background .2s;
}
.sir-cta-link:hover { background:#009944; }

/* ── Mute button ──────────────────────────────────────────── */
.sir-mute-btn {
  position:absolute; top:10px; right:10px; background:rgba(0,0,0,.4);
  border:none; color:#fff; width:30px; height:30px; border-radius:50%;
  font-size:14px; cursor:pointer; display:flex; align-items:center; justify-content:center;
  backdrop-filter:blur(4px);
}

/* ── Grid layout ──────────────────────────────────────────── */
.sir-grid {
  display:grid; grid-template-columns:repeat(auto-fill, minmax(180px, 1fr)); gap:12px;
}

/* ── Stories layout ───────────────────────────────────────── */
.sir-stories { display:flex; gap:12px; overflow-x:auto; padding-bottom:4px; }
.sir-story-bubble {
  flex-shrink:0; display:flex; flex-direction:column; align-items:center; gap:4px; cursor:pointer;
}
.sir-story-ring {
  width:64px; height:64px; border-radius:50%; padding:2px;
  background:linear-gradient(45deg,#f09433,#e6683c,#dc2743,#cc2366,#bc1888);
}
.sir-story-thumb {
  width:100%; height:100%; border-radius:50%; object-fit:cover; border:2px solid #fff;
  background:#111;
}
.sir-story-label { font-size:11px; text-align:center; max-width:64px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

/* ── Full-screen modal player ─────────────────────────────── */
.sir-modal-overlay {
  position:fixed; inset:0; background:rgba(0,0,0,.9); z-index:999999;
  display:flex; align-items:center; justify-content:center;
}
.sir-modal-player {
  position:relative; width:100%; max-width:400px; height:100vh; max-height:720px;
  background:#000; border-radius:var(--sir-radius); overflow:hidden;
}
.sir-modal-video {
  width:100%; height:100%; object-fit:cover;
}
.sir-modal-overlay-gradient {
  position:absolute; inset:0;
  background:linear-gradient(to top, rgba(0,0,0,.85) 0%, rgba(0,0,0,.1) 50%, transparent 80%);
  pointer-events:none;
}
.sir-modal-close {
  position:absolute; top:14px; right:14px; background:rgba(0,0,0,.5); border:none;
  color:#fff; width:36px; height:36px; border-radius:50%; font-size:18px;
  cursor:pointer; display:flex; align-items:center; justify-content:center;
}
.sir-modal-prev, .sir-modal-next {
  position:absolute; top:50%; transform:translateY(-50%); background:rgba(255,255,255,.2);
  border:none; color:#fff; width:40px; height:40px; border-radius:50%;
  font-size:20px; cursor:pointer; display:flex; align-items:center; justify-content:center;
}
.sir-modal-prev { left:8px; }
.sir-modal-next { right:8px; }
.sir-modal-info {
  position:absolute; bottom:0; left:0; right:0; padding:16px;
}
.sir-modal-title { color:#fff; font-size:14px; font-weight:700; margin-bottom:8px; }
.sir-modal-products { display:flex; flex-direction:column; gap:6px; margin-bottom:10px; max-height:180px; overflow-y:auto; }
.sir-modal-product {
  display:flex; align-items:center; gap:10px; background:rgba(255,255,255,.1);
  backdrop-filter:blur(8px); border-radius:10px; padding:8px; text-decoration:none;
  transition:background .2s;
}
.sir-modal-product:hover { background:rgba(255,255,255,.2); }
.sir-modal-product-img { width:44px; height:44px; border-radius:8px; object-fit:cover; background:#fff; }
.sir-modal-product-name { color:#fff; font-size:13px; font-weight:600; display:block; }
.sir-modal-product-price { color:rgba(255,255,255,.8); font-size:12px; }
.sir-modal-atc {
  display:inline-block; background:var(--sir-green); color:#fff !important;
  padding:4px 10px; border-radius:12px; font-size:11px; font-weight:700; text-decoration:none; margin-top:4px;
}
.sir-modal-ctas { display:flex; flex-direction:column; gap:6px; }
.sir-modal-cta-btn {
  display:block; text-align:center; background:var(--sir-green); color:#fff !important;
  padding:10px; border-radius:24px; font-size:14px; font-weight:700; text-decoration:none;
}
.sir-modal-mute {
  position:absolute; top:60px; right:14px; background:rgba(0,0,0,.4); border:none;
  color:#fff; width:36px; height:36px; border-radius:50%; font-size:15px;
  cursor:pointer; display:flex; align-items:center; justify-content:center;
}
.sir-modal-ig-link {
  position:absolute; top:14px; left:14px; background:rgba(0,0,0,.4);
  border-radius:6px; padding:4px 8px; color:#fff; font-size:11px; text-decoration:none;
}

@media (max-width: 600px) {
  .sir-reel-item { width:160px; height:285px; }
  .sir-modal-player { max-width:100vw; max-height:100vh; border-radius:0; }
}