/* =============================================================================
 * Creator Studio — banner CTA shown above progress bar in shorts player
 * Loaded globally (small footprint, only renders when present in DOM).
 * ========================================================================== */

.creator-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 9px 14px;
  border-radius: 6px;
  text-decoration: none;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.02em;
  white-space: nowrap;
  overflow: hidden;
  box-shadow: 0 2px 14px rgba(0, 0, 0, 0.5);
  -webkit-tap-highlight-color: transparent;
  transition: transform 0.12s, box-shadow 0.12s;
}

/* Quando il banner è figlio diretto di .short-player (reel del feed shorts),
   lo posizioniamo absolute sopra la progress bar (.short-player__progress
   è anch'essa absolute con bottom:0; meta è a bottom:36px).
   Banner si posiziona sopra meta a bottom:38px → ma poi serve pushare meta
   in alto per non sovrapporsi (vedi sotto). */
.short-player > .creator-banner {
  position: absolute;
  left: 14px;
  right: 76px;          /* allineato con meta che ha right:76px */
  bottom: 36px;
  z-index: 8;
  margin: 0;
}

/* Quando il banner è presente, spostiamo il meta più in alto per non
   sovrapporsi. CSS :has() supportato da tutti i browser moderni. */
.short-player:has(.creator-banner) > .short-player__meta {
  bottom: 86px;         /* 36 (banner bottom) + ~38 (banner h) + 12 gap */
}
.creator-banner:active { transform: scale(0.98); }

/* External: yellow CTA matching widget pattern */
.creator-banner--external {
  background: #ffcc00;
  color: #111;
}
.creator-banner--external:hover {
  background: #ffd633;
  box-shadow: 0 4px 18px rgba(255, 204, 0, 0.35);
}

/* Internal channel: brand-color CTA (matches gayqueer accent) */
.creator-banner--internal {
  background: linear-gradient(135deg, #ff1f4b, #ff6b35);
  color: #fff;
}
.creator-banner--internal:hover {
  filter: brightness(1.08);
  box-shadow: 0 4px 18px rgba(255, 31, 75, 0.35);
}

.creator-banner__label {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  pointer-events: none;
}
.creator-banner__icon {
  flex-shrink: 0;
  pointer-events: none;
}

/* Position fix: stay above progress bar within the .short-player.
   The reel container is position:relative, banner sits naturally in flow
   with margin-bottom that pushes the progress bar down. */
.short-player .creator-banner {
  /* nothing needed if rendered in flow above progress */
}