/* ================================================
   Ad Display Styles
   Shared styles for all ad placements across the site.
   ================================================ */

.ad-display-slot {
  position: relative;
  overflow: hidden;
  
}

.ad-display-link {
  display: block;
  position: relative;
  text-decoration: none;
  color: inherit;
  overflow: hidden;
  height: 100%;
}

.ad-display-img {
  width: 100%;
  height: auto;
  display: block;
  transition: transform 0.3s ease;
}

.ad-display-link:hover .ad-display-img {
  transform: scale(1.02);
}

.ad-display-overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 8px 12px;
  background: linear-gradient(transparent, rgba(0,0,0,0.7));
  border-radius: 0 0 8px 8px;
  pointer-events: none;
}

.ad-display-title {
  color: #fff;
  font-size: 0.85rem;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ad-display-cta {
  display: inline-block;
  margin-top: 2px;
  padding: 2px 8px;
  font-size: 0.7rem;
  font-weight: 600;
  background: rgba(255,255,255,0.2);
  color: #fff;
  border-radius: 4px;
}

/* Tiny "Ad" label */
.ad-display-label {
  position: absolute;
  top: 4px;
  right: 6px;
  font-size: 0.55rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: rgba(255,255,255,0.6);
  background: rgba(0,0,0,0.35);
  padding: 1px 5px;
  border-radius: 3px;
  pointer-events: none;
  z-index: 5;
}

/* ── Banner slots ── */
.ad-banner-slot {
  width: 100%;
  margin-bottom: 8px;
}

.ad-banner-slot .ad-display-slot {
  
}

/* ── Gallery ad cards ── */
.ad-gallery-card {
  /* Match the gallery grid sizing */
  overflow: hidden;
}

.ad-gallery-card .ad-display-slot {
  height: 100%;
}

.ad-gallery-card .ad-display-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ── Chat leaderboard ad ── */
.ad-chat-leaderboard {
  padding: 4px 8px 0;
}

.ad-chat-leaderboard .ad-display-img {
  max-height: 60px;
  object-fit: cover;
}

/* ── Sidebar banner ── */
.ad-sidebar-banner .ad-display-img {
  max-height: 100px;
  object-fit: cover;
}

/* ── Chat list inline ad ── */
.ad-chat-list-item {
  background: linear-gradient(135deg, rgba(139, 76, 248, 0.08), rgba(181, 138, 254, 0.05)) !important;
  border: 1px solid rgba(139, 76, 248, 0.25) !important;
}

.ad-chat-list-item:hover {
  background: linear-gradient(135deg, rgba(139, 76, 248, 0.15), rgba(181, 138, 254, 0.1)) !important;
  border-color: rgba(139, 76, 248, 0.4) !important;
}

.ad-chat-list-item .cl-chat-avatar {
  border-color: rgba(139, 76, 248, 0.5);
}

/* ── Sidebar portrait (2:3) ── */
.ad-sidebar-portrait {
  text-align: center;
}

.ad-sidebar-portrait .ad-display-img {
  
  max-height: 260px;
  width: 100%;
  object-fit: cover;
}

/* ── Studio banner ── */
.ad-studio-banner .ad-display-img {
  border-radius: 6px;
}

/* ── Dashboard leaderboard ── */
.ad-dashboard-leaderboard {
  margin-bottom: 12px;
}

.ad-dashboard-leaderboard .ad-display-img {
  border-radius: 10px;
  max-height: 80px;
  object-fit: cover;
}

/* ── Chat list banner ── */
.ad-chatlist-banner {
  margin-bottom: 8px;
}

.ad-chatlist-banner .ad-display-img {
  border-radius: 8px;
  max-height: 70px;
  object-fit: cover;
}

/* ── Character profile leaderboard ── */
.ad-character-leaderboard {
  margin-bottom: 12px;
}

.ad-character-leaderboard .ad-display-img {
  border-radius: 10px;
  max-height: 80px;
  object-fit: cover;
}

/* ── Sticky bottom nav banner ── */
.ad-sticky-nav-banner {
  margin-bottom: 0;
}

.ad-sticky-nav-banner .ad-display-img {
  max-height: 60px;
  object-fit: cover;
}

/* ── Footer banner ── */
.ad-footer-banner {
  margin-bottom: 0;
}

.ad-footer-banner .ad-display-img {
  max-height: 200px;
  object-fit: contain;
}

/* ── Stories leaderboard ── */
.ad-stories-leaderboard {
  margin-bottom: 4px;
}

.ad-stories-leaderboard .ad-display-img {
  max-height: 60px;
  object-fit: cover;
}

/* ── Chat thumbnail leaderboard ── */
.ad-chat-thumbnail-leaderboard {
  margin-bottom: 4px;
}

.ad-chat-thumbnail-leaderboard .ad-display-img {
  max-height: 60px;
  object-fit: cover;
}

/* ── Search page Swiper ad slides ── */
.ad-swiper-slide {
  background: #0d0d0d;
}

.ad-swiper-slide .ad-display-slot {
  width: 100%;
  height: 100%;
}

.ad-swiper-slide .ad-display-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* ── Affiliate embeds ── */
.ad-display-slot[data-ad-type="affiliate"] {
  /* Ensure affiliate embeds don't overflow */
  overflow: hidden;
  max-width: 100%;
}

.ad-display-slot[data-ad-type="affiliate"] iframe,
.ad-display-slot[data-ad-type="affiliate"] img {
  max-width: 100%;
}

/* Hide ads on very small screens if needed */
@media (max-width: 359px) {
  .ad-chat-leaderboard {
    display: none;
  }
}