/* ===================================================
   Social Post Showcase — front end
   Ported from fb-style.css + ig-style.css. Every rule is
   scoped under .sps-feed (or the shared lightbox) so it
   can't leak into the theme, and the resets at the top
   stop theme styles leaking in.
=================================================== */

/* ---------- Containment / resets ---------- */
.sps-feed,
.sps-feed *,
.sps-feed *::before,
.sps-feed *::after {
  box-sizing: border-box;
}

.sps-feed :where(p, h4, div, span, img, video, button) {
  margin: 0;
  padding: 0;
  border: 0;
  max-width: none;
  text-transform: none;
  letter-spacing: normal;
  box-shadow: none;
}

/* Themes commonly style "p", "h4" and "img" inside post content with
   higher specificity than a single class; these are the ones that
   would break the mockups, so they're pinned. */
.sps-feed p,
.sps-feed h4 {
  margin: 0 !important;
}

/* Undo theme typography that targets bare elements (p, h4, span...).
   :where() keeps these at one-class strength, so the component rules
   further down still win. */
.sps-feed :where(p, h4, span, div, button) {
  font-family: inherit;
  font-size: inherit;
  font-style: normal;
  line-height: inherit;
  color: inherit;
  text-align: inherit;
  text-decoration: none;
  float: none;
}

.sps-feed :where(img, video) {
  max-width: none;
  margin: 0;
  float: none;
  border-radius: 0;
  opacity: 1;
}

.sps-feed :where(svg) {
  max-width: none;
}

/* Themes often color every <svg> (e.g. svg { fill: ... }), which would
   flood the outline icons. Restore each icon's own fill. */
.sps-feed svg[fill="none"],
.sps-lightbox svg[fill="none"],
.sps-feed svg:not([fill]) {
  fill: none;
}

.sps-feed svg[fill="currentColor"],
.sps-lightbox svg[fill="currentColor"] {
  fill: currentColor;
}

.sps-feed svg,
.sps-lightbox svg {
  stroke: none;
}

.sps-feed svg[stroke="currentColor"],
.sps-lightbox svg[stroke="currentColor"] {
  stroke: currentColor;
}


.sps-feed {
  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
  font-size: 15px;
  font-weight: 400;
  color: #050505;
  text-align: left;
  line-height: 1.34;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: flex-start;
  gap: 40px;
  max-width: 1720px;
  margin: 12px auto 0 auto;
  padding: 0 2%;
}

.sps-feed h4 {
  font-family: inherit;
  font-weight: 600;
}

.sps-feed svg {
  display: block;
  width: 100%;
  height: 100%;
}

.sps-link {
  color: #404deb;
}

.sps-admin-note {
  font: 13px/1.4 -apple-system, "Segoe UI", sans-serif;
  background: #fff8e5;
  border-left: 4px solid #dba617;
  padding: 8px 12px;
  margin-bottom: 8px;
  color: #1d2327;
}

/* ---------- Post widths ---------- */
.sps-post {
  margin: 0;
  min-width: 0;
}

.sps-post.sps-facebook  { width: 680px; max-width: 100%; }
.sps-post.sps-instagram { width: 500px; max-width: 100%; }
.sps-post.sps-reel      { width: 340px; max-width: 100%; }

/* Optional A/B label above a post */
.sps-label {
  display: inline-block;
  margin-bottom: 10px !important;
  padding: 4px 10px !important;
  border-radius: 999px;
  background: #1c1e21;
  color: #fff;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.02em;
}

/* ---------- Card ---------- */
.sps-card {
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15) !important;
  overflow: hidden;
  color: #050505;
}

.sps-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px !important;
}

.sps-info {
  display: flex;
  align-items: center;
  gap: 8px;
}

.sps-avatar {
  width: 40px !important;
  height: 40px !important;
  border-radius: 100% !important;
  object-fit: cover;
  flex: none;
}

.sps-avatar-blank {
  display: flex;
  align-items: center;
  justify-content: center;
  background: #e4e6eb;
  color: #65676b;
  font-weight: 600;
  font-size: 16px;
}

.sps-name {
  font-size: 15px;
  color: #050505;
  line-height: 1.3;
}

.sps-meta {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 13px;
  color: #65676b;
}

.sps-globe {
  display: inline-block;
  width: 12px;
  height: 12px;
  color: #65676b;
}

.sps-icons .sps-menu {
  display: block;
  width: 20px;
  height: 20px;
  margin: 8px !important;
  color: #65676b;
}

.sps-body {
  width: 100%;
}

.sps-caption {
  padding: 0 12px 12px !important;
  font-size: 15px;
  color: #414141;
  line-height: 1.34;
  overflow-wrap: anywhere;
}

.sps-facebook .sps-see-more {
  font-weight: 700;
  color: #050505;
  cursor: pointer;
}

.sps-visual {
  position: relative;
  width: 100%;
  background: #000;
  display: block;
  line-height: 0;
}

.sps-visual img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

.sps-facebook .sps-visual:not(.sps-collage) img {
  height: auto;
}

.sps-empty-media {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 1 / 1;
  width: 100%;
  background: #e4e6eb;
  color: #65676b;
  font-size: 14px;
  line-height: 1.4;
}

.sps-footer {
  width: 100%;
}

.sps-stats-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 12px !important;
  border-top: 1px solid #e4e6eb !important;
}

.sps-stats {
  display: flex;
  align-items: center;
  column-gap: 16px;
}

.sps-stat {
  display: flex;
  align-items: center;
  column-gap: 6px;
  margin-right: 10px !important;
}

.sps-stat p {
  font-size: 14px;
  color: #65676b;
}

.sps-action-icon {
  display: block;
  height: 18px !important;
  width: 18px !important;
  object-fit: cover;
  color: #65676b;
}

.sps-reactions {
  display: flex;
  align-items: center;
}

.sps-reaction {
  display: block;
  height: 20px !important;
  width: 20px !important;
  object-fit: cover;
  border-radius: 100% !important;
  background-color: #fff;
  border: 1.5px solid #fff !important;
  box-shadow: 0 0 1px rgba(0, 0, 0, 0.2) !important;
}

.sps-reactions .sps-reaction:not(:first-child) {
  margin-left: -6px !important;
}

/* ===================================================
   Facebook collage
   2 -> stacked, 3 -> wide + 2, 4 -> wide + 3,
   5+ -> 2 + 3 (6+ shows "+N" on the 5th tile)
=================================================== */
.sps-visual.sps-collage {
  display: grid;
  gap: 2px;
  background: #fff;
  aspect-ratio: 1 / 1;
}

.sps-collage-tile {
  position: relative;
  overflow: hidden;
  min-width: 0;
  min-height: 0;
  background: #e4e6eb;
  cursor: pointer;
  container-type: inline-size;
}

.sps-collage-tile img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  pointer-events: none;
}

.sps-collage-2 { grid-template-rows: repeat(2, minmax(0, 1fr)); }

.sps-collage-3 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-rows: repeat(2, minmax(0, 1fr));
}
.sps-collage-3 .sps-collage-tile:first-child { grid-column: 1 / -1; }

.sps-collage-4 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-template-rows: minmax(0, 2fr) minmax(0, 1fr);
}
.sps-collage-4 .sps-collage-tile:first-child { grid-column: 1 / -1; }

.sps-visual.sps-collage-5 {
  aspect-ratio: 6 / 5;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  grid-template-rows: minmax(0, 3fr) minmax(0, 2fr);
}
.sps-collage-5 .sps-collage-tile { grid-column: span 2; }
.sps-collage-5 .sps-collage-tile:nth-child(-n + 2) { grid-column: span 3; }

.sps-collage-more {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.4);
  color: #fff;
  font-size: clamp(20px, 24cqw, 64px);
  font-weight: 600;
  line-height: 1;
  pointer-events: none;
}

/* ===================================================
   Photo viewer (one shared instance, appended to <body>)
=================================================== */
.sps-lightbox {
  position: fixed;
  inset: 0;
  z-index: 100000;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.9);
  padding: 48px 72px;
  box-sizing: border-box;
}

.sps-lightbox[hidden] { display: none; }

.sps-lightbox-img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  display: block;
  user-select: none;
}

.sps-lightbox button {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.15);
  color: #fff;
  cursor: pointer;
  width: 44px;
  height: 44px;
  padding: 12px;
  margin: 0;
  box-shadow: none;
  transition: background-color 0.2s ease;
}

.sps-lightbox button:hover,
.sps-lightbox button:focus-visible {
  background: rgba(255, 255, 255, 0.3);
}

.sps-lightbox button svg { width: 100%; height: 100%; display: block; }

.sps-lightbox-close { top: 16px; right: 16px; }
.sps-lightbox-prev,
.sps-lightbox-next { top: 50%; transform: translateY(-50%); }
.sps-lightbox-prev { left: 16px; }
.sps-lightbox-next { right: 16px; }
.sps-lightbox button[hidden] { display: none; }

.sps-lightbox-counter {
  position: absolute;
  bottom: 16px;
  left: 50%;
  transform: translateX(-50%);
  color: rgba(255, 255, 255, 0.85);
  font: 14px/1.2 "Segoe UI", Tahoma, sans-serif;
}

/* ===================================================
   Carousel (Instagram feed + Reel phone mockup)
=================================================== */
.sps-carousel {
  position: relative;
  overflow: hidden;
  touch-action: pan-y;
  user-select: none;
}

.sps-track {
  display: flex;
  height: 100%;
  transition: transform 0.35s ease;
  will-change: transform;
}

.sps-track.is-dragging { transition: none; }

.sps-slide {
  flex: 0 0 100%;
  height: 100%;
}

.sps-slide img,
.sps-slide video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  pointer-events: none;
}

.sps-feed .sps-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  padding: 9px;
  border: none;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.9);
  color: #262626;
  cursor: pointer;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25) !important;
  transition: opacity 0.2s ease;
}

.sps-feed .sps-arrow svg { width: 100%; height: 100%; }
.sps-arrow.sps-prev { left: 10px; }
.sps-arrow.sps-next { right: 10px; }
.sps-feed .sps-arrow[hidden] { display: none; }

.sps-counter {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 2;
  padding: 4px 8px !important;
  border-radius: 999px;
  background: rgba(18, 18, 18, 0.7);
  color: #fff;
  font-size: 12px;
  line-height: 1.2;
  pointer-events: none;
}

/* Dots: at most 5 visible; a track slides inside a clipped window */
.sps-dots {
  display: flex;
  justify-content: center;
  line-height: 0;
}

.sps-dots-window {
  overflow: hidden;
  width: calc(var(--dot-visible, 5) * var(--dot) + (var(--dot-visible, 5) - 1) * var(--dot-gap));
}

.sps-dots-track {
  display: flex;
  gap: var(--dot-gap);
  transform: translateX(calc(var(--dot-offset, 0) * (var(--dot) + var(--dot-gap)) * -1));
  transition: transform 0.25s ease;
}

.sps-dots-track span {
  flex: none;
  width: var(--dot);
  height: var(--dot);
  border-radius: 50%;
  cursor: pointer;
  transition: transform 0.25s ease, background-color 0.2s ease;
}

.sps-dots-track span[data-size="medium"] { transform: scale(0.67); }
.sps-dots-track span[data-size="small"]  { transform: scale(0.4); }
.sps-dots-track span[data-size="hidden"] { transform: scale(0); }

/* ===================================================
   Instagram
=================================================== */
.sps-instagram .sps-avatar {
  width: 32px !important;
  height: 32px !important;
}

.sps-instagram .sps-name { font-size: 14px; }

.sps-instagram .sps-icons .sps-menu { margin: 0 !important; }

.sps-instagram .sps-visual {
  aspect-ratio: 1 / 1; /* overridden inline for 4:5 posts */
  min-height: 0;
  overflow: hidden;
}

.sps-instagram .sps-visual .sps-empty-media { height: 100%; aspect-ratio: auto; }

.sps-instagram .sps-footer { padding-top: 8px !important; }

.sps-instagram .sps-stats-row {
  border-top: none !important;
  padding: 10px 12px 6px !important;
}

.sps-instagram .sps-action-icon {
  height: 24px !important;
  width: 24px !important;
  color: #000;
}

.sps-instagram .sps-stat {
  margin-right: 0 !important;
  column-gap: 8px;
}

.sps-instagram .sps-stat p {
  font-size: 15px;
  color: #000;
}

.sps-stats-right {
  display: flex;
  align-items: center;
}

.sps-instagram .sps-caption {
  padding: 2px 12px 4px !important;
  color: #050505;
}

.sps-caption-user {
  font-weight: 600;
  margin-right: 4px !important;
}

.sps-instagram .sps-more {
  color: #8e8e8e;
  cursor: pointer;
}

.sps-date {
  padding: 0 12px 12px !important;
  font-size: 12px;
  color: #8e8e8e;
}

.sps-instagram .sps-dots {
  --dot: 6px;
  --dot-gap: 4px;
  padding: 4px 0 0 !important;
}

.sps-instagram .sps-dots-track span { background: #dbdbdb; }
.sps-instagram .sps-dots-track span.is-active { background: #0095f6; }

/* ===================================================
   Reel / phone mockup
=================================================== */
.sps-phone {
  width: 100%;
  aspect-ratio: 1320 / 2868;
  padding: 8px !important;
  border-radius: 54px;
  background: linear-gradient(145deg, #5a5d65 0%, #14151a 30%, #464951 72%, #0e0f13 100%);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.18) !important; /* edge highlight only, no drop shadow */
}

.sps-screen {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  border-radius: 47px;
  background: #000;
  container-type: inline-size;
}

/* Image area starts 12% of the screen width from the top */
.sps-reel-media {
  position: absolute;
  top: -1px;
  left: -1px;
  width: calc(100% + 2px);
  margin-top: 12% !important;
}

.sps-reel-media > img,
.sps-reel-media > video {
  display: block;
  width: 100%;
  height: auto;
  background: #000;
}

.sps-reel-media .sps-empty-media {
  aspect-ratio: 4 / 5;
  background: #222;
  color: #aaa;
}

.sps-overlay {
  position: absolute;
  z-index: 10;
  inset: 0;
  width: 100% !important;
  height: 100% !important;
  pointer-events: none;
}

.sps-reel-viewport {
  position: relative;
  overflow: hidden;
  aspect-ratio: 4 / 5; /* locked to the first image by sps.js */
  touch-action: pan-y;
  user-select: none;
  background: #000;
}

.sps-reel .sps-counter {
  top: 3.4cqw;
  right: 3.4cqw;
  z-index: 11;
  padding: 1.35cqw 2.3cqw !important;
  background: rgba(38, 38, 38, 0.8);
  font-size: max(8px, 2.4cqw);
  font-weight: 500;
}

/* Arrows appear on hover only (the real app is swipe-only) */
.sps-reel .sps-arrow {
  z-index: 11;
  width: max(22px, 7cqw);
  height: max(22px, 7cqw);
  padding: max(6px, 2cqw);
  opacity: 0;
}
.sps-reel .sps-arrow.sps-prev { left: 2.5cqw; }
.sps-reel .sps-arrow.sps-next { right: 2.5cqw; }
.sps-reel .sps-reel-viewport:hover .sps-arrow,
.sps-reel .sps-arrow:focus-visible { opacity: 1; }

/* Dot pill anchored to the screen, just above the overlay's
   "Learn more" button. Height is set per profile
   (--sps-dots-bottom, default 30.8%). */
.sps-reel .sps-dots {
  --dot: max(4px, 1.3cqw);
  --dot-gap: max(3px, 1cqw);
  position: absolute;
  bottom: var(--sps-dots-bottom, 30.8%);
  left: 50%;
  transform: translateX(-50%);
  z-index: 11;
  padding: max(5px, 1.45cqw) max(6px, 1.9cqw) !important;
  border-radius: 999px;
  background: rgba(40, 40, 40, 0.6);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}

.sps-reel .sps-dots-track span { background: rgba(255, 255, 255, 0.5); }
.sps-reel .sps-dots-track span.is-active { background: #fff; }

/* ===================================================
   Pinned media sizing
   Some themes resize every image with !important rules
   (e.g. "img { width: auto !important }"), which makes
   photos render at their full pixel size and overflow the
   frame. These selectors are deliberately specific and
   !important so the mockups always control their media.
=================================================== */

/* Fill the frame, cropped to fit: carousel slides, collage
   tiles, and single Instagram images */
.sps-feed .sps-post .sps-slide > img,
.sps-feed .sps-post .sps-slide > video,
.sps-feed .sps-post .sps-collage-tile > img,
.sps-feed .sps-post.sps-instagram .sps-visual:not(.sps-carousel) > img {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  min-width: 0 !important;
  min-height: 0 !important;
  max-width: none !important;
  max-height: none !important;
  object-fit: cover !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  transform: none !important;
  position: static !important;
}

/* Full width at natural shape: single Facebook image, single
   phone-mockup image or video */
.sps-feed .sps-post.sps-facebook .sps-visual:not(.sps-collage) > img,
.sps-feed .sps-post .sps-reel-media > img,
.sps-feed .sps-post .sps-reel-media > video {
  display: block !important;
  width: 100% !important;
  height: auto !important;
  min-width: 0 !important;
  min-height: 0 !important;
  max-width: none !important;
  max-height: none !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  transform: none !important;
  position: static !important;
}

/* The frames the media sits in */
.sps-feed .sps-post .sps-track {
  display: flex !important;
  height: 100% !important;
}

.sps-feed .sps-post .sps-slide {
  flex: 0 0 100% !important;
  width: 100% !important;
  height: 100% !important;
  min-width: 0 !important;
  overflow: hidden !important;
}

.sps-feed .sps-post .sps-carousel,
.sps-feed .sps-post .sps-reel-viewport,
.sps-feed .sps-post .sps-collage-tile,
.sps-feed .sps-post.sps-instagram .sps-visual {
  overflow: hidden !important;
}

/* Small images: avatar, icons, reactions, overlay */
.sps-feed .sps-post img.sps-avatar,
.sps-feed .sps-post img.sps-action-icon,
.sps-feed .sps-post img.sps-reaction,
.sps-feed .sps-post img.sps-menu {
  min-width: 0 !important;
  min-height: 0 !important;
  max-width: none !important;
  max-height: none !important;
  margin: 0;
}

.sps-feed .sps-post img.sps-avatar { width: 40px !important; height: 40px !important; }
.sps-feed .sps-post.sps-instagram img.sps-avatar { width: 32px !important; height: 32px !important; }
.sps-feed .sps-post img.sps-action-icon { width: 18px !important; height: 18px !important; }
.sps-feed .sps-post.sps-instagram img.sps-action-icon { width: 24px !important; height: 24px !important; }
.sps-feed .sps-post img.sps-reaction { width: 20px !important; height: 20px !important; }
.sps-feed .sps-post img.sps-menu { width: 20px !important; height: 20px !important; }

.sps-feed .sps-post img.sps-overlay {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  max-height: none !important;
  margin: 0 !important;
  transform: none !important;
}

/* Lightbox (outside the feed) */
.sps-lightbox img.sps-lightbox-img {
  width: auto !important;
  height: auto !important;
  max-width: 100% !important;
  max-height: 100% !important;
  object-fit: contain !important;
  margin: 0 !important;
}