/* ============================================================
   OnlyTraffic CPC — image-first sidebar cards (self-contained, portable).
   Full-bleed photo; ONLINE + TRENDING pills; the same shading gradient as the
   creator cards; @username + stats + a blue CTA overlaid at the bottom.
   ============================================================ */

/* Sidebar = compact 2-col grid (keeps the column short); gallery-fill = 2 big
   cards per row in the wide main column. */
.op-cpc-list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.op-cpc-row  { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; }
/* Homepage grid: responsive multi-column of image-first cards (12 creatives). */
.op-cpc-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 18px; }
@media (max-width: 900px) { .op-cpc-grid { grid-template-columns: repeat(3, 1fr); gap: 14px; } }
@media (max-width: 560px) { .op-cpc-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; } }

/* Compact overlay for the smaller 2-col sidebar cards */
.op-cpc-list .op-cpc-info   { left: 10px; right: 10px; bottom: 10px; }
.op-cpc-list .op-cpc-name   { font-size: 0.98rem; }
.op-cpc-list .op-cpc-stats  { font-size: 0.66rem; gap: 8px; margin-top: 4px; }
.op-cpc-list .op-cpc-cta    { margin-top: 8px; padding: 7px 10px; font-size: 0.7rem; }
.op-cpc-list .op-cpc-online,
.op-cpc-list .op-cpc-badge  { font-size: 8px; padding: 3px 7px; }

.op-cpc-card {
    display: block;
    text-decoration: none;
    color: inherit;
    border-radius: 16px;
    overflow: hidden;
    background: #14141a;
    box-shadow: 0 2px 14px rgba(0, 0, 0, 0.18);
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.op-cpc-card:hover { transform: translateY(-3px); box-shadow: 0 10px 28px rgba(0, 0, 0, 0.28); }

.op-cpc-media { position: relative; aspect-ratio: 4 / 5; overflow: hidden; }
.op-cpc-media > img {
    width: 100%; height: 100%;
    object-fit: cover; object-position: center top;
    display: block;
    transition: transform 0.4s ease;
}
.op-cpc-card:hover .op-cpc-media > img { transform: scale(1.04); }

/* Same shading gradient the creator cards use */
.op-cpc-shade {
    position: absolute; inset: 0; pointer-events: none;
    background: linear-gradient(0deg, rgba(11, 8, 30, 0.92) 0%, rgba(11, 8, 30, 0.6) 40%, rgba(11, 8, 30, 0.15) 65%, rgba(11, 8, 30, 0) 80%);
}

/* ONLINE pill — identical to the creator cards (top-left) */
.op-cpc-online {
    position: absolute; top: 8px; left: 8px; z-index: 3;
    display: inline-flex; align-items: center; gap: 5px;
    padding: 3px 9px 3px 8px; border-radius: 8px;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.18);
    font-family: 'Special Gothic Expanded One', sans-serif; font-weight: 400;
    font-size: 9px; letter-spacing: 0.3px; color: #fff; text-transform: uppercase;
}
.op-cpc-online-dot {
    width: 7px; height: 7px; border-radius: 50%; background: #2bd76d; flex-shrink: 0;
    box-shadow: 0 0 6px #2bd76d, 0 0 12px rgba(43, 215, 109, 0.6);
    animation: sncOnlineDotPulse 2.4s ease-in-out infinite;
}

/* TRENDING pill — top-right, aligned with ONLINE */
.op-cpc-badge {
    position: absolute; top: 8px; right: 8px; z-index: 3;
    background: linear-gradient(-45deg, #ff5858, #f857a6, #f857a6, #ff5858);
    background-size: 400% 400%;
    animation: sncGradientShift 4s ease infinite;
    color: #fff; padding: 3px 10px; border-radius: 8px;
    font-family: 'Special Gothic Expanded One', sans-serif;
    font-weight: 400; font-size: 9px; letter-spacing: 0.3px;
}

.op-cpc-info { position: absolute; left: 14px; right: 14px; bottom: 14px; z-index: 2; }
.op-cpc-name {
    display: flex; align-items: center; gap: 6px;
    font-family: 'Special Gothic Expanded One', sans-serif; font-weight: 400;
    font-size: 1.15rem; line-height: 1.15; color: #fff;
}
.op-cpc-name span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.op-cpc-check { flex-shrink: 0; }
.op-cpc-stats {
    display: flex; gap: 12px; margin-top: 5px;
    font-size: 0.72rem; color: rgba(255, 255, 255, 0.72); font-weight: 600;
}

/* CTA inside the card, over the gradient (not a stuck bottom bar) */
.op-cpc-cta {
    display: flex; align-items: center; justify-content: center; gap: 8px;
    margin-top: 12px; padding: 9px 14px; border-radius: 999px;
    background: linear-gradient(135deg, #03aff0, #0362f0);
    color: #fff !important;
    font-family: 'Special Gothic Expanded One', sans-serif;
    font-weight: 400; font-size: 0.78rem; letter-spacing: 0.2px;
    box-shadow: 0 4px 14px rgba(3, 140, 240, 0.4);
}
.op-cpc-cta-ic { width: 18px; height: 18px; flex-shrink: 0; }

/* Discover "Hot Right Now" CPC carousel: reuses the native .discover-carousel /
   .discover-rail / .discover-card styling from the discover page CSS, so no extra
   layout rules are needed here. The only self-contained bits are the "HOT" badge
   and its keyframe — category-styles.css (where they normally live) is NOT loaded
   on the discover page, so define them here where the CPC assets always are. */
.cat-hot-badge {
  background: linear-gradient(-45deg,#ff9500,#ff2d55,#ff2d55,#ff9500);
  background-size: 400% 400%;
  animation: gradientShift 4s ease infinite;
  color: #fff; padding: 3px 8px; border-radius: 12px;
  font-family: 'Special Gothic Expanded One', sans-serif;
  font-weight: 400; font-size: 8px; letter-spacing: 0.3px;
}
@keyframes gradientShift {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* ── Skeleton placeholders (anti-CLS) ──────────────────────────────────
   Slots render these BEFORE the JS fill so revealing the real cards doesn't
   push the page down. They reserve the card's exact box via aspect-ratio;
   op-cpc.js replaces them on fill, or removes the whole slot when empty.
   The 2-class selectors below beat any single-class card background. */
.op-cpc-skel { position: relative; display: block; width: 100%; overflow: hidden;
  border-radius: 14px; background: rgba(130,130,150,.16); }
.op-cpc-skel--45 { aspect-ratio: 4 / 5; }
.cat-hot-grid .op-cpc-skel { aspect-ratio: 3 / 5.3; border-radius: 16px;
  background: rgba(130,130,150,.16); }
.op-cpc-grid  .op-cpc-skel,
.op-cpc-list  .op-cpc-skel,
.discover-rail .op-cpc-skel { background: rgba(130,130,150,.16); }
.op-cpc-skel::after { content: ""; position: absolute; inset: 0;
  transform: translateX(-100%);
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.12), transparent);
  animation: op-cpc-shim 1.3s ease-in-out infinite; }
@keyframes op-cpc-shim { to { transform: translateX(100%); } }
@media (prefers-reduced-motion: reduce) { .op-cpc-skel::after { animation: none; } }

/* Sidebar CPC repositioning (single creator page): the desktop copy lives in the
   sidebar column; a second copy sits high in the main column (after the gallery)
   for mobile. Show exactly one per breakpoint → no double impressions. */
.op-cpc-sidebar-mobile { display: none; }
@media (max-width: 1023px) {
  .op-cpc-sidebar-desktop { display: none !important; }
  .op-cpc-sidebar-mobile:not([hidden]) { display: block; }
}