/* ============================================================
 * Fabavio sponsored ad units (item #7, 2026-09-29).
 * Self-styled so slots render identically on every surface (feed,
 * For You, browse rails, watch sidebar, profile sidebar) without
 * depending on page-specific stylesheets. Dark + violet identity.
 * The mandatory "Sponsored · <advertiser>" label is part of the
 * markup, never optional.
 * ============================================================ */
.fvad {
    --fvad-violet: #8b5cf6;
    --fvad-violet-deep: #6d28d9;
    --fvad-bg: #121218;
    --fvad-bg2: #0c0c11;
    --fvad-text: #f4f2fa;
    --fvad-muted: #a7a3bd;
    --fvad-line: rgba(139, 92, 246, 0.22);
    box-sizing: border-box;
    font-family: inherit;
}
.fvad *, .fvad *::before, .fvad *::after { box-sizing: inherit; }

/* ---------- in-feed / rail card (16:9) ---------- */
.fvad-card {
    background: var(--fvad-bg);
    border: 1px solid var(--fvad-line);
    border-radius: 14px;
    overflow: hidden;
    max-width: 640px;
    margin: 12px auto;
}
.fvad-media {
    display: block;
    position: relative;
    aspect-ratio: 16 / 9;
    background: var(--fvad-bg2);
    overflow: hidden;
}
.fvad-media img, .fvad-media video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.fvad-flag {
    position: absolute;
    top: 10px;
    left: 10px;
    background: rgba(10, 8, 18, 0.78);
    border: 1px solid var(--fvad-line);
    color: #d9ccff;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: 4px 9px;
    border-radius: 999px;
    backdrop-filter: blur(4px);
}
.fvad-body { padding: 12px 14px 14px; }
.fvad-headline {
    color: var(--fvad-text);
    font-size: 16px;
    font-weight: 700;
    line-height: 1.35;
    margin: 0 0 4px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.fvad-headline a { color: inherit; text-decoration: none; }
.fvad-headline a:hover { text-decoration: underline; }
.fvad-sub {
    color: var(--fvad-muted);
    font-size: 12.5px;
    margin: 0 0 10px;
}
.fvad-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.fvad-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: 700;
    padding: 8px 16px;
    border-radius: 999px;
    text-decoration: none;
    cursor: pointer;
    border: 1px solid transparent;
}
.fvad-btn-primary {
    background: linear-gradient(135deg, var(--fvad-violet), var(--fvad-violet-deep));
    color: #fff;
}
.fvad-btn-primary:hover { filter: brightness(1.1); color: #fff; }
.fvad-btn-ghost {
    background: transparent;
    border-color: var(--fvad-line);
    color: #d9ccff;
}
.fvad-btn-ghost:hover { background: rgba(139, 92, 246, 0.12); color: #fff; }

/* ---------- sidebar unit (compact) ---------- */
.fvad-side {
    background: var(--fvad-bg);
    border: 1px solid var(--fvad-line);
    border-radius: 12px;
    overflow: hidden;
    margin: 0 0 16px;
}
.fvad-side .fvad-media { aspect-ratio: 16 / 9; }
.fvad-side .fvad-body { padding: 10px 12px 12px; }
.fvad-side .fvad-headline { font-size: 14px; }
.fvad-side .fvad-sub { font-size: 11.5px; margin-bottom: 8px; }
.fvad-side .fvad-btn { font-size: 12px; padding: 7px 14px; width: 100%; }

/* ---------- player overlay unit (compact dismissible banner) ---------- */
.fvad-overlay {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: calc(76px + env(safe-area-inset-bottom, 0px));
    z-index: 40;
    width: min(420px, calc(100% - 24px));
    background: rgba(14, 14, 20, 0.96);
    border: 1px solid var(--fvad-line);
    border-radius: 12px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.55);
    backdrop-filter: blur(8px);
}
.fvad-overlay-link {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    text-decoration: none;
    color: inherit;
}
.fvad-overlay-thumb { flex: none; width: 84px; aspect-ratio: 16/9; border-radius: 8px; overflow: hidden; background: var(--fvad-bg2); }
.fvad-overlay-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.fvad-overlay-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.fvad-overlay-flag { color: var(--fvad-muted); font-size: 10.5px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; }
.fvad-overlay-headline {
    color: var(--fvad-text); font-size: 13px; font-weight: 700; line-height: 1.3;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.fvad-overlay-cta { flex: none; font-size: 12px; padding: 7px 12px; }
.fvad-overlay-close {
    position: absolute; top: -10px; right: -10px;
    width: 26px; height: 26px; border-radius: 999px;
    background: #1c1c26; border: 1px solid var(--fvad-line);
    color: var(--fvad-muted); font-size: 15px; line-height: 1; cursor: pointer;
    display: flex; align-items: center; justify-content: center; padding: 0;
}
.fvad-overlay-close:hover { color: #fff; border-color: var(--fvad-violet); }

/* ---------- rail wrapper ---------- */
.fvad-rail-wrap { padding: 4px 0 8px; }
.fvad-rail-wrap .fvad-card { margin: 0; max-width: 420px; }

@media (max-width: 640px) {
    .fvad-card { border-radius: 10px; margin: 10px 0; max-width: none; }
    .fvad-headline { font-size: 15px; }
}

/* Homepage hero billboard ad slot (2026-10-10, #6/#7, per Fabian). */
.fv-hero-ad { margin: 0 auto 20px; max-width: 970px; min-height: 0; }
.fv-hero-ad:empty { display: none; }
.fv-hero-ad .platform-ad-card { border-radius: 12px; overflow: hidden; }