/* ============================================
   REELS - TikTok-style vertical video viewer
   ============================================ */

/* Reset & base */
.reels-body {
  margin: 0;
  padding: 0;
  overflow: hidden;
  background: #000;
  height: 100vh;
  height: 100dvh;
  -webkit-overflow-scrolling: touch;
  /* The page never set a base family: ten elements declared 'Roboto' one by one
     and everything else fell back to the browser serif. Setting it here fixes
     the comments sheet, the tag badge and the toast in one go. */
  font-family: 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

.reels-body input,
.reels-body textarea,
.reels-body button {
  font-family: inherit;
}

#reels-app {
  position: relative;
  width: 100%;
  height: 100vh;
  height: 100dvh;
  margin: 0 auto;
  overflow: hidden;
}

/* Header bar */
.reels-header {
  position: fixed;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  max-width: 500px;
  z-index: 100;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  background: linear-gradient(to bottom, rgba(0,0,0,0.6) 0%, transparent 100%);
  box-sizing: border-box;
}

.reels-back-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(255,255,255,0.1);
  text-decoration: none;
  transition: background 0.2s;
}

.reels-back-btn:hover {
  background: rgba(255,255,255,0.2);
}

.reels-logo {
  color: #fff;
  font-family: 'Roboto', sans-serif;
  font-size: 18px;
  font-weight: 700;
  letter-spacing: 0.5px;
}

/* Swiper container */
.reels-swiper {
  width: 100%;
  height: 100vh;
  height: 100dvh;
}

.reels-swiper .swiper-wrapper {
  will-change: transform;
}

/* Each slide */
.reels-slide {
  height: 100vh;
  height: 100dvh;
  width: 100%;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #000;
  overflow: hidden;
}

/* Video element */
.reels-video-container {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

/* Blurred backdrop: 15% of the "vertical" catalogue is not exactly 9:16
   (3:4, 1:1, wider or narrower). object-fit:contain never crops them, and this
   fills the leftover bands instead of showing black bars. */
.reels-poster {
  position: absolute;
  top: -6%;
  left: -6%;
  width: 112%;
  height: 112%;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  filter: blur(22px) brightness(0.45) saturate(1.2);
  transform: scale(1.04);
  z-index: 1;
}

.reels-slide-loader {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 4;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,0.3);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

/* Phones are narrower than 9:16 (390/844 = 0.46), so cover keeps the video
   full-bleed there, as every vertical-video app does. */
.reels-video {
  position: relative;
  z-index: 3;
  width: 100%;
  height: 100%;
  object-fit: cover;
  background: transparent;
}

/* As soon as the container is 9:16 or wider — desktop page and overlay iframe
   alike — switch to contain so nothing is ever cropped. Keying on the viewport
   ratio rather than its width is what makes this work inside the iframe, whose
   420px width falls below every width breakpoint. */
@media (min-aspect-ratio: 9 / 16) {
  .reels-video { object-fit: contain; }
}

/* Tap zone overlay (for mute/unmute) */
.reels-tap-zone {
  position: absolute;
  top: 0;
  left: 0;
  right: 80px;
  bottom: 160px;
  z-index: 10;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

/* Progress bar (seekable) */
.reels-progress {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: rgba(255,255,255,0.2);
  background-clip: content-box;
  z-index: 20;
  cursor: pointer;
  padding-top: 12px;
  margin-top: -12px;
}

.reels-progress:active,
.reels-progress.seeking {
  height: 6px;
}

.reels-progress-bar {
  height: 100%;
  width: 0%;
  background: #fff;
  pointer-events: none;
}

.reels-progress-handle {
  position: absolute;
  top: 50%;
  left: 0%;
  transform: translate(-50%, -50%);
  width: 0;
  height: 0;
  border-radius: 50%;
  background: #fff;
  pointer-events: none;
  transition: width 0.15s, height 0.15s;
}

.reels-progress:active .reels-progress-handle,
.reels-progress.seeking .reels-progress-handle {
  width: 14px;
  height: 14px;
}

/* Mute indicator (centered) */
.reels-mute-indicator {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 30;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: rgba(0,0,0,0.5);
  animation: reelsFadeOut 0.8s ease-out forwards;
}

/* Play/pause indicator (centered) */
.reels-play-indicator,
.reels-pause-indicator {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 30;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: rgba(0,0,0,0.4);
  animation: reelsFadeOut 0.6s ease-out forwards;
}

@keyframes reelsFadeOut {
  0% { opacity: 1; }
  70% { opacity: 1; }
  100% { opacity: 0; }
}

/* Right sidebar actions (TikTok-style) */
.reels-sidebar {
  position: absolute;
  right: 8px;
  bottom: 160px;
  z-index: 15;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
}

.reels-action {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  color: #fff;
  text-decoration: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.reels-action svg {
  filter: drop-shadow(0 1px 3px rgba(0,0,0,0.5));
  transition: transform 0.15s ease;
}

.reels-action:active svg {
  transform: scale(1.2);
}

.reels-action-count {
  font-family: 'Roboto', sans-serif;
  font-size: 12px;
  font-weight: 500;
  text-shadow: 0 1px 3px rgba(0,0,0,0.7);
}

.reels-action.liked svg {
  fill: #ff2d55;
  animation: reelsLikePop 0.4s ease;
}

.reels-action.voting svg {
  opacity: 0.5;
}

@keyframes reelsLikePop {
  0% { transform: scale(1); }
  30% { transform: scale(1.4); }
  60% { transform: scale(0.9); }
  100% { transform: scale(1); }
}

/* Bottom info overlay (TikTok-style) */
.reels-info {
  position: absolute;
  bottom: 12px;
  left: 12px;
  right: 80px;
  z-index: 15;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.reels-user {
  display: flex;
  align-items: center;
  gap: 8px;
}

.reels-user-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 2px solid #fff;
  object-fit: cover;
}

.reels-username {
  color: #fff;
  font-family: 'Roboto', sans-serif;
  font-size: 14px;
  font-weight: 700;
  text-shadow: 0 1px 4px rgba(0,0,0,0.8);
  text-decoration: none;
}

a.reels-username:hover {
  text-decoration: underline;
}

.reels-title {
  color: #fff;
  font-family: 'Roboto', sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.3;
  text-shadow: 0 1px 4px rgba(0,0,0,0.8);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.reels-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  max-height: 52px;
  overflow: hidden;
}

.reels-tag {
  color: #fff;
  font-family: 'Roboto', sans-serif;
  font-size: 13px;
  font-weight: 500;
  text-shadow: 0 1px 3px rgba(0,0,0,0.7);
  text-decoration: none;
  background: rgba(255,255,255,0.15);
  padding: 2px 8px;
  border-radius: 4px;
  transition: background 0.2s;
}

.reels-tag:hover {
  background: rgba(255,255,255,0.3);
}

/* View full page link */
.reels-view-full {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: rgba(255,255,255,0.7);
  font-family: 'Roboto', sans-serif;
  font-size: 12px;
  text-decoration: none;
  margin-top: 2px;
}

.reels-view-full:hover {
  color: #fff;
}

/* Loading state */
.reels-loading {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 200;
}

.reels-spinner {
  width: 48px;
  height: 48px;
  border: 3px solid rgba(255,255,255,0.15);
  border-top-color: #fff;
  border-right-color: rgba(255,255,255,0.6);
  border-radius: 50%;
  animation: reelsSpin 0.7s linear infinite;
  box-shadow: 0 0 20px rgba(255,255,255,0.1);
}

@keyframes reelsSpin {
  to { transform: rotate(360deg); }
}

/* Empty state */
.reels-empty {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  color: rgba(255,255,255,0.6);
  font-family: 'Roboto', sans-serif;
}

.reels-empty-icon {
  font-size: 48px;
  margin-bottom: 12px;
}

.reels-empty-text {
  font-size: 16px;
}

/* Promo slide (live cam) */
.reels-promo-slide {
  background: #000;
}

.reels-promo-container {
  position: relative;
  width: 100%;
  height: 100%;
}

.reels-promo-swipe-top {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 15%;
  z-index: 12;
  background: linear-gradient(to bottom, rgba(0,0,0,0.4) 0%, transparent 100%);
}

.reels-promo-iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: none;
}

.reels-promo-overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 15;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 50px 16px 32px;
  background: linear-gradient(to top, rgba(0,0,0,0.9) 0%, rgba(0,0,0,0.5) 70%, transparent 100%);
}

.reels-promo-label {
  color: #fff;
  font-family: 'Roboto', sans-serif;
  font-size: 14px;
  font-weight: 700;
  text-shadow: 0 1px 4px rgba(0,0,0,0.8);
}

.reels-promo-btn {
  display: block;
  width: 90%;
  max-width: 400px;
  padding: 14px 0;
  background: #c0392b;
  color: #fff;
  font-family: 'Roboto', sans-serif;
  font-size: 16px;
  font-weight: 700;
  text-align: center;
  text-decoration: none;
  border-radius: 50px;
  transition: background 0.2s;
}

.reels-promo-btn:hover {
  background: #e74c3c;
}

/* ── Social promo CTA (OnlyFans / X) — inside .reels-info ── */
.reels-social-promo {
  display: flex;
  flex-direction: column;
  gap: 6px;
  animation: reelsSocialIn 0.5s ease 1s both;
}

@keyframes reelsSocialIn {
  0% { opacity: 0; transform: translateY(8px); }
  100% { opacity: 1; transform: translateY(0); }
}

.reels-social-cta {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-radius: 12px;
  text-decoration: none;
  color: #fff;
  transition: background 0.2s, border-color 0.2s, transform 0.15s;
  max-width: 340px;
}
.reels-social-cta:active {
  transform: scale(0.97);
}

/* OnlyFans CTA — gold tint */
.reels-social-of {
  background: linear-gradient(135deg, rgba(212,168,83,0.15) 0%, rgba(184,142,58,0.1) 100%);
  border: 1.5px solid rgba(212,168,83,0.35);
  animation: reelsSocialGlow 4s ease-in-out 2.5s infinite;
}
.reels-social-of:hover,
.reels-social-of:focus {
  background: rgba(212,168,83,0.22);
  border-color: rgba(212,168,83,0.5);
}

/* X/Twitter CTA — gold tint */
.reels-social-x {
  background: linear-gradient(135deg, rgba(212,168,83,0.12) 0%, rgba(184,142,58,0.08) 100%);
  border: 1.5px solid rgba(212,168,83,0.3);
}
.reels-social-x:hover,
.reels-social-x:focus {
  background: rgba(212,168,83,0.2);
  border-color: rgba(212,168,83,0.45);
}

.reels-social-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 8px;
  flex-shrink: 0;
}

.reels-social-of .reels-social-icon {
  background: linear-gradient(135deg, #D4A853 0%, #B88E3A 100%);
  color: #000;
}
.reels-social-x .reels-social-icon {
  background: rgba(212,168,83,0.2);
  color: #D4A853;
}

.reels-social-text {
  font-family: 'Roboto', sans-serif;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.3;
  text-shadow: 0 1px 3px rgba(0,0,0,0.6);
  overflow: hidden;
  text-overflow: ellipsis;
}
.reels-social-text strong {
  font-weight: 700;
}
.reels-social-sub {
  display: block;
  font-size: 11px;
  font-weight: 400;
  color: rgba(212,168,83,0.7);
  margin-top: 1px;
}

.reels-social-arrow {
  font-size: 20px;
  font-weight: 300;
  opacity: 0.5;
  margin-left: auto;
  flex-shrink: 0;
}

@keyframes reelsSocialGlow {
  0%, 100% { box-shadow: 0 0 0 0 rgba(212,168,83,0); }
  50%      { box-shadow: 0 0 14px 3px rgba(212,168,83,0.2); }
}

/* Desktop responsiveness — lock 9:16 aspect ratio */
@media (min-width: 768px) {
  .reels-body {
    display: flex;
    align-items: center;
    justify-content: center;
  }

  #reels-app {
    /* Width is the smaller of 560px or what 9:16 gives at viewport height */
    width: min(560px, calc(100vh * 9 / 16));
    width: min(560px, calc(100dvh * 9 / 16));
    height: auto;
    aspect-ratio: 9 / 16;
    max-width: none;
    border-left: 1px solid #222;
    border-right: 1px solid #222;
    border-radius: 12px;
  }

  .reels-swiper,
  .reels-slide {
    height: 100%;
  }

  .reels-header {
    position: absolute;
    left: 0;
    width: 100%;
    max-width: none;
    transform: none;
  }
}

/* Safe area for iOS notch */
@supports (padding-top: env(safe-area-inset-top)) {
  .reels-header {
    padding-top: calc(12px + env(safe-area-inset-top));
  }
  .reels-info {
    bottom: calc(12px + env(safe-area-inset-bottom));
  }
  .reels-progress {
    bottom: env(safe-area-inset-bottom);
  }
}
/* ── Tag filter badge & toast ─────────────────────────────────────────────
   Tapping a #tag now filters the feed in place instead of leaving the player,
   so the viewer needs a visible, dismissable indicator of the active scope. */
.reels-tagbar {
  position: absolute;
  top: 58px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 60;
  display: flex;
  align-items: center;
  gap: 8px;
  max-width: calc(100% - 32px);
  padding: 6px 8px 6px 14px;
  border-radius: 999px;
  background: rgba(20, 20, 20, 0.72);
  -webkit-backdrop-filter: blur(18px) saturate(180%);
  backdrop-filter: blur(18px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, 0.14);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4);
  animation: reelsTagIn 0.25s ease-out;
}

@keyframes reelsTagIn {
  from { opacity: 0; transform: translateX(-50%) translateY(-8px); }
  to   { opacity: 1; transform: translateX(-50%) translateY(0); }
}

.reels-tagbar-label {
  font-size: 14px;
  font-weight: 600;
  color: #fff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.reels-tagbar-clear {
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  border: none;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.16);
  color: #fff;
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}

.reels-tagbar-clear:hover { background: rgba(255, 255, 255, 0.28); }

.reels-toast {
  position: absolute;
  left: 50%;
  bottom: 96px;
  transform: translateX(-50%) translateY(10px);
  z-index: 70;
  max-width: calc(100% - 40px);
  padding: 10px 16px;
  border-radius: 12px;
  background: rgba(20, 20, 20, 0.86);
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: #fff;
  font-size: 14px;
  text-align: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease, transform 0.25s ease;
}

.reels-toast.visible {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* The tag chips are buttons now, not navigation */
.reels-tag { cursor: pointer; }
.reels-tag:hover { background: rgba(255, 255, 255, 0.28); }

/* ── Comments sheet ───────────────────────────────────────────────────────
   gold.min.css is not loaded on /reels/, so nothing from the site's comment
   styling is available here — everything below is self-contained. */
.reels-comments-backdrop {
  position: absolute;
  inset: 0;
  z-index: 190;
  background: rgba(0, 0, 0, 0.5);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.25s ease, visibility 0.25s ease;
}

.reels-comments-backdrop.open { opacity: 1; visibility: visible; }

.reels-comments {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 200;
  display: flex;
  flex-direction: column;
  max-height: 72%;
  background: #16161a;
  border-radius: 16px 16px 0 0;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 -12px 40px rgba(0, 0, 0, 0.5);
  transform: translateY(101%);
  transition: transform 0.3s cubic-bezier(0.32, 0.72, 0, 1);
  padding-bottom: env(safe-area-inset-bottom, 0px);
}

.reels-comments.open { transform: translateY(0); }

.reels-comments-handle { padding: 8px 0 4px; text-align: center; flex: 0 0 auto; }
.reels-comments-handle span {
  display: inline-block;
  width: 36px;
  height: 4px;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.25);
}

.reels-comments-head {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 14px 10px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.reels-comments-title { font-size: 15px; font-weight: 700; color: #fff; }
.reels-comments-total { font-size: 13px; color: rgba(255, 255, 255, 0.5); flex: 1 1 auto; }

.reels-comments-close {
  flex: 0 0 auto;
  width: 28px;
  height: 28px;
  border: none;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  padding: 0;
}

.reels-comments-list {
  flex: 1 1 auto;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 12px 14px;
  min-height: 80px;
}

.reels-comments-empty {
  padding: 28px 8px;
  text-align: center;
  color: rgba(255, 255, 255, 0.45);
  font-size: 14px;
}

.reels-comment { display: flex; gap: 10px; margin-bottom: 16px; }

.reels-comment-avatar {
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  object-fit: cover;
  background: #2a2a30;
}

.reels-comment-avatar--empty {
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 14px;
  font-weight: 700;
}

.reels-comment-body { flex: 1 1 auto; min-width: 0; }

.reels-comment-meta { display: flex; align-items: baseline; gap: 8px; margin-bottom: 2px; }
.reels-comment-name { font-size: 13px; font-weight: 700; color: #fff; }
.reels-comment-ago { font-size: 11px; color: rgba(255, 255, 255, 0.4); }

.reels-comment-text {
  font-size: 14px;
  line-height: 1.45;
  color: rgba(255, 255, 255, 0.88);
  word-wrap: break-word;
  overflow-wrap: anywhere;
}

.reels-comments-more {
  display: block;
  width: 100%;
  padding: 10px;
  border: none;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
  font-size: 13px;
  cursor: pointer;
}

.reels-comments-status {
  flex: 0 0 auto;
  padding: 0 14px;
  font-size: 12.5px;
  line-height: 1.4;
  color: #e2bc6a;
  min-height: 0;
}
.reels-comments-status:not(:empty) { padding-bottom: 8px; }

.reels-comments-form {
  flex: 0 0 auto;
  padding: 10px 14px 14px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

/* Honeypot: off-screen rather than display:none, which some bots skip */
.reels-comments-hp {
  position: absolute !important;
  left: -9999px !important;
  width: 1px !important;
  height: 1px !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

.reels-comments-name {
  width: 100%;
  box-sizing: border-box;
  margin-bottom: 8px;
  padding: 8px 12px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.06);
  color: #fff;
  font-size: 13px;
  font-family: inherit;
}

.reels-comments-row { display: flex; align-items: flex-end; gap: 8px; }

.reels-comments-input {
  flex: 1 1 auto;
  min-width: 0;
  resize: none;
  max-height: 110px;
  padding: 10px 14px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.06);
  color: #fff;
  font-size: 14px;
  line-height: 1.35;
  font-family: inherit;
}

.reels-comments-input::placeholder,
.reels-comments-name::placeholder { color: rgba(255, 255, 255, 0.35); }

.reels-comments-input:focus,
.reels-comments-name:focus { outline: none; border-color: rgba(226, 188, 106, 0.6); }

.reels-comments-send {
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  border: none;
  border-radius: 50%;
  background: #D4A853;
  color: #000;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}

.reels-comments-send:disabled { opacity: 0.45; cursor: default; }
.reels-comments-send svg { width: 20px; height: 20px; }

/* ── VAST ad slide ────────────────────────────────────────────────────────
   Same shape as an organic slide so the swipe rhythm is unchanged, with a
   clear "Ad" label and a call to action. */
.reels-ad-slide .reels-video { background: #000; }

.reels-ad-badge {
  position: absolute;
  top: 62px;
  left: 12px;
  z-index: 25;
  padding: 3px 9px;
  border-radius: 4px;
  background: rgba(0, 0, 0, 0.72);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  color: rgba(255, 255, 255, 0.92);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.reels-ad-cta {
  position: absolute;
  left: 16px;
  right: 16px;
  bottom: 28px;
  z-index: 25;
  display: block;
  padding: 13px 16px;
  border-radius: 12px;
  background: #D4A853;
  color: #000;
  font-size: 15px;
  font-weight: 700;
  text-align: center;
  text-decoration: none;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4);
}

.reels-ad-cta:active { transform: scale(0.98); }

/* ── Desktop side banner (300x500) ────────────────────────────────────────
   Fills the empty margin beside the 9:16 player. Hidden below 1100px, where
   there is no room, and never rendered inside the overlay iframe. */
.reels-side-ad {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(calc(-50% - min(560px, 100dvh * 9 / 16) / 2 - 24px - 150px), -50%);
  z-index: 90;
  width: 300px;
  min-height: 500px;
}

.reels-side-ad--overlay {
  position: static;
  transform: none;
  z-index: 10002;
  flex: 0 0 auto;
}

.reels-side-ad-close {
  position: absolute;
  top: -12px;
  right: -12px;
  z-index: 2;
  width: 26px;
  height: 26px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 50%;
  background: rgba(20, 20, 20, 0.9);
  color: #fff;
  font-size: 17px;
  line-height: 1;
  cursor: pointer;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.reels-side-ad-close:hover { background: rgba(40, 40, 40, 0.95); }

@media (max-width: 1099px) {
  .reels-side-ad { display: none !important; }
}

/* Saved state on the favourites action */
.reels-action.saved svg { fill: #D4A853; }
.reels-action.saving { opacity: 0.5; }

/* ── End-of-feed slide ────────────────────────────────────────────────────
   Appended once the catalogue is drained, so the scroll ends on something
   actionable instead of stopping dead. */
.reels-end-slide {
  background: radial-gradient(circle at 50% 35%, #1c1c22 0%, #0a0a0c 70%);
}

.reels-end-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 32px 26px;
  text-align: center;
  max-width: 420px;
}

.reels-end-icon {
  width: 52px;
  height: 52px;
  color: #D4A853;
  opacity: 0.9;
}

.reels-end-icon svg { width: 100%; height: 100%; }

.reels-end-title {
  font-size: 20px;
  font-weight: 700;
  color: #fff;
  line-height: 1.25;
}

.reels-end-text {
  font-size: 14px;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.62);
}

.reels-end-label {
  margin-top: 6px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.4);
}

.reels-end-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
}

.reels-end-restart {
  margin-top: 10px;
  padding: 12px 28px;
  border: none;
  border-radius: 24px;
  background: #D4A853;
  color: #000;
  font-family: inherit;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
}

.reels-end-restart:active { transform: scale(0.97); }