/* goonxxx: hands-free Session player + Creator spotlight cards (public/js/tiktok-feed.js).
   The feed overlay is always dark, so text is light whatever the site theme. */

.fp-session-ui { position: fixed; inset: 0 0 auto 0; z-index: 9996; pointer-events: none; }
.fp-session-bar { height: 3px; background: rgba(255,255,255,.08); }
.fp-session-bar i { display: block; height: 100%; width: 0; background: var(--fp-pink); transition: width .25s linear; }
.fp-session-ui:not(.is-on) .fp-session-bar { visibility: hidden; }

.fp-session-ctl {
    position: absolute; top: 12px; left: 50%; transform: translateX(-50%);
    display: flex; gap: 6px; pointer-events: auto;
}
.fp-session-ctl button {
    min-height: 36px; padding: 0 14px; border-radius: 999px; cursor: pointer;
    border: 1px solid rgba(255,255,255,.22); background: rgba(0,0,0,.45); color: #fff;
    font-size: 13px; font-weight: 600; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.fp-session-ctl button:hover { background: rgba(0,0,0,.65); }
.fp-session-ui.is-on .fp-session-toggle { background: var(--fp-pink); border-color: var(--fp-pink); }
.fp-session-ui.is-on .fp-session-toggle b { font-weight: 800; }
.fp-session-pause, .fp-session-next { width: 36px; padding: 0 !important; }
.fp-session-ui:not(.is-on) .fp-session-pause,
.fp-session-ui:not(.is-on) .fp-session-next { display: none; }
.fp-session-ui.is-paused .fp-session-bar i { background: rgba(255,255,255,.45); }

/* Mobile: the slide's own Back button sits top-left, keep clear of it. */
@media (max-width: 767px) {
    .fp-session-ctl { top: 54px; }
}
/* Desktop: centre over the media column, not the 300px info panel. */
@media (min-width: 768px) {
    .fp-session-ctl { left: calc((100% - 300px) / 2); }
}

/* ── Spotlight slide ── */
.fp-slide-spot { align-items: center; justify-content: center; }
.fp-spot-card {
    position: relative; z-index: 2; width: min(92%, 380px);
    display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center;
    padding: 28px 22px 18px; border-radius: 18px;
    background: rgba(14,13,18,.72); border: 1px solid rgba(var(--fp-pink-rgb), .35);
    box-shadow: 0 10px 40px rgba(0,0,0,.45); color: #fff;
}
.fp-spot-badge {
    font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
    padding: 4px 10px; border-radius: 999px; background: rgba(var(--fp-pink-rgb), .22); color: #fff;
}
.fp-spot-avatar { width: 112px; height: 112px; border-radius: 50%; object-fit: cover; border: 3px solid var(--fp-pink); }
.fp-spot-name { font-size: 20px; font-weight: 700; }
.fp-spot-tick { color: var(--fp-pink); font-size: 16px; }
.fp-spot-title { font-size: 26px; font-weight: 800; line-height: 1.15; }
.fp-spot-sub { margin: 0; font-size: 14px; color: rgba(255,255,255,.78); }
.fp-spot-meta { font-size: 13px; color: rgba(255,255,255,.7); }
.fp-spot-niches { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; }
.fp-spot-niches span { font-size: 12px; padding: 3px 10px; border-radius: 999px; border: 1px solid rgba(255,255,255,.22); color: rgba(255,255,255,.85); }
.fp-spot-cta {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    min-height: 46px; padding: 0 22px; margin-top: 6px; width: 100%;
    border-radius: 999px; background: var(--fp-pink); color: #fff !important;
    font-size: 15px; font-weight: 700; text-decoration: none !important;
}
.fp-spot-cta span { opacity: .85; font-weight: 600; }
.fp-spot-alt { font-size: 13px; color: rgba(255,255,255,.75) !important; }
.fp-spot-skip {
    margin-top: 4px; border: none; background: none; cursor: pointer;
    font-size: 13px; color: rgba(255,255,255,.6);
}
.fp-spot-skip:hover { color: #fff; }