#sss-url-slider{
  --sss-width:380px;
  --sss-top:180px;
  position:fixed;
  top:var(--sss-top);
  right:calc(var(--sss-width) * -1);
  width:var(--sss-width);
  z-index:999999;
  transition:right .3s ease;
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
}
#sss-url-slider.is-open{right:0}

.sss-tabs{
  position:absolute;
  right:100%;
  top:0;
  display:flex;
  flex-direction:column;
  gap:7px;
}
.sss-tab{
  width:54px;
  height:54px;
  border:0;
  border-radius:12px 0 0 12px;
  cursor:pointer;
  color:#fff;
  box-shadow:0 8px 25px rgba(0,0,0,.2);
}
.sss-fb-tab{background:#1877f2}
.sss-ig-tab{background:linear-gradient(135deg,#833ab4,#fd1d1d,#fcb045)}
.sss-social-svg{display:block;width:31px;height:31px;margin:auto;color:#fff}
.sss-brand .sss-social-svg{width:25px;height:25px}
.sss-instagram-logo .sss-social-svg{width:72px;height:72px;color:#d62976}

.sss-panel{
  position:relative;
  background:#fff;
  color:#202124;
  border-radius:0 0 0 18px;
  box-shadow:0 18px 50px rgba(0,0,0,.26);
  overflow:auto;
  max-height:calc(100vh - var(--sss-top) - 16px);
  min-height:290px;
}
.sss-close{
  position:absolute;
  right:10px;
  top:8px;
  z-index:5;
  width:52px;
  height:52px;
  padding:0;
  border:0;
  border-radius:0;
  background:transparent;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
}
.sss-close img{
  display:block;
  width:50px;
  height:50px;
  object-fit:contain;
}
.sss-close:hover img{transform:scale(1.05)}
.sss-view{display:none;padding:18px}
.sss-view.is-active{display:block}

.sss-header{
  display:flex;
  align-items:center;
  gap:12px;
  padding-right:68px;
  margin-bottom:16px;
}
.sss-header strong{display:block;font-size:18px}
.sss-header small{display:block;opacity:.68;margin-top:2px}
.sss-brand{
  width:42px;height:42px;border-radius:50%;
  color:#fff;display:flex;align-items:center;justify-content:center;
  font-size:24px;font-weight:800;flex:0 0 auto;
}
.sss-brand-fb{background:#1877f2}
.sss-brand-ig{background:linear-gradient(135deg,#833ab4,#fd1d1d,#fcb045)}

.sss-fb-frame{width:100%;overflow:hidden}
.sss-fb-frame iframe{width:100%!important;min-height:520px}

.sss-instagram-card{
  min-height:330px;
  border-radius:18px;
  background:linear-gradient(145deg,#fff,#faf7fb);
  border:1px solid #ece7ee;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  padding:28px;
}
.sss-instagram-logo{font-size:68px;line-height:1}
.sss-instagram-card h3{font-size:22px;margin:14px 0 6px}
.sss-instagram-card p{margin:0 0 22px;opacity:.7;line-height:1.5}

.sss-open{
  display:block;
  margin-top:12px;
  padding:12px 16px;
  border-radius:10px;
  text-decoration:none!important;
  text-align:center;
  font-weight:700;
  color:#fff!important;
}
.sss-open-fb{background:#1877f2}
.sss-open-ig{background:linear-gradient(90deg,#833ab4,#fd1d1d,#fcb045)}
.sss-empty{padding:60px 20px;text-align:center;opacity:.65}

@media(max-width:782px){
  #sss-url-slider{
    --sss-width:min(340px,calc(100vw - 58px));
    top:110px;
  }
}

/* v1.3.0 – YouTube + dynamiczne otwieranie po najechaniu */
.sss-yt-tab{background:#ff0000;position:relative}
.sss-brand-yt{background:#ff0000}
.sss-coming-badge{
  position:absolute;
  right:58px;
  top:50%;
  transform:translateY(-50%);
  background:#111827;
  color:#fff;
  font-size:10px;
  line-height:1;
  font-weight:800;
  letter-spacing:.04em;
  padding:5px 7px;
  border-radius:999px;
  opacity:0;
  pointer-events:none;
  white-space:nowrap;
  transition:opacity .18s ease,transform .18s ease;
}
.sss-yt-tab:hover .sss-coming-badge,
.sss-yt-tab:focus-visible .sss-coming-badge{
  opacity:1;
  transform:translateY(-50%) translateX(-2px);
}
.sss-youtube-card{
  min-height:330px;
  border-radius:18px;
  background:linear-gradient(145deg,#fff,#fff7f7);
  border:1px solid #f1e2e2;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  padding:28px;
}
.sss-youtube-logo{width:92px;height:64px;color:#ff0000}
.sss-youtube-logo svg{display:block;width:100%;height:100%}
.sss-youtube-card h3{font-size:24px;margin:16px 0 8px}
.sss-youtube-card p{margin:16px 0 0;opacity:.7;line-height:1.5;max-width:285px}
.sss-soon-pill{
  display:inline-flex;align-items:center;justify-content:center;
  background:#ff0000;color:#fff;font-size:12px;font-weight:900;
  letter-spacing:.08em;padding:7px 11px;border-radius:999px;
}
@media (hover:hover) and (pointer:fine){
  #sss-url-slider{transition:right .24s ease}
  .sss-tab{transition:transform .16s ease,filter .16s ease,box-shadow .16s ease}
  .sss-tab:hover{transform:translateX(-5px);filter:brightness(1.04);box-shadow:0 10px 30px rgba(0,0,0,.28)}
}

/* v1.3.1 – przesłane logo YouTube */
.sss-yt-tab{overflow:hidden;padding:0;background:#fff}
.sss-youtube-tab-image{
  display:block;
  width:48px;
  height:48px;
  object-fit:contain;
  margin:auto;
}
.sss-youtube-logo{
  width:210px;
  height:auto;
  color:initial;
}
.sss-youtube-logo img{
  display:block;
  width:100%;
  height:auto;
  object-fit:contain;
}

/* v1.3.2 – większa i wyraźniejsza ikona YouTube na bocznym pasku */
.sss-yt-tab{
  width:64px;
  height:58px;
  background:#ff0000;
  border:2px solid #fff;
  box-shadow:0 8px 26px rgba(255,0,0,.35),0 4px 16px rgba(0,0,0,.22);
}
.sss-yt-tab .sss-youtube-tab-image{
  width:60px;
  height:54px;
  object-fit:cover;
  object-position:left center;
  transform:scale(1.45);
  transform-origin:left center;
  filter:contrast(1.08) saturate(1.12);
}
@media (hover:hover) and (pointer:fine){
  .sss-yt-tab:hover{transform:translateX(-7px) scale(1.04)}
}

/* v1.3.3 – czytelna ikona YouTube bez fragmentu napisu */
.sss-yt-tab{
  width:54px;
  height:54px;
  padding:0;
  background:#ff0000;
  border:0;
  overflow:hidden;
}
.sss-yt-tab .sss-youtube-tab-image{
  width:100%;
  height:100%;
  margin:0;
  padding:0;
  object-fit:cover;
  object-position:left center;
  transform:none;
  filter:none;
  clip-path:inset(0 55% 0 0);
  transform-origin:center;
}
/* Ponieważ źródłowy obraz zawiera znak + napis YouTube, na zakładce
   pokazujemy tylko lewy czerwony znak Play i powiększamy go w obrębie przycisku. */
.sss-yt-tab{position:relative}
.sss-yt-tab .sss-youtube-tab-image{
  position:absolute;
  left:0; top:0;
  width:122px;
  height:54px;
  max-width:none;
  object-fit:fill;
  clip-path:none;
  transform:translateX(-2px);
}
.sss-yt-tab::after{
  content:"";
  position:absolute;
  top:0; right:0;
  width:5px; height:100%;
  background:#ff0000;
}
@media (hover:hover) and (pointer:fine){
  .sss-yt-tab:hover{transform:translateX(-5px)}
}

/* v1.3.4 – prawdziwie wykadrowana ikona YouTube */
.sss-yt-tab{
  width:54px!important;
  height:54px!important;
  padding:5px!important;
  background:#fff!important;
  border:0!important;
  overflow:hidden!important;
}
.sss-yt-tab .sss-youtube-tab-image{
  position:static!important;
  display:block!important;
  width:44px!important;
  height:44px!important;
  max-width:44px!important;
  margin:auto!important;
  padding:0!important;
  object-fit:contain!important;
  object-position:center!important;
  transform:none!important;
  clip-path:none!important;
  filter:none!important;
}
.sss-yt-tab::after{display:none!important}