/* Reddgifs Xvids-Style single video template
 * Tube-site-style video page layout. Scoped to .xv-* classes.
 */

.xv-page {
    background: #000;
    color: #ccc;
    font-size: 14px;
    line-height: 1.4;
    padding-bottom: 24px;
}
.xv-page a { color: #ccc; text-decoration: none; }
.xv-page a:hover { color: #fff; }

/* ---- header ---- */
.xv-header {
    padding: 14px 16px 6px;
    max-width: 1700px;
    margin: 0 auto;
}
.xv-title {
    color: #fff;
    font-size: 20px;
    font-weight: 700;
    margin: 0 0 8px;
    line-height: 1.25;
}
.xv-badge {
    display: inline-block;
    font-size: 11px;
    font-weight: 600;
    padding: 2px 6px;
    border-radius: 3px;
    background: #333;
    color: #ccc;
    margin-left: 6px;
    vertical-align: middle;
    text-transform: uppercase;
    letter-spacing: 0.02em;
}
.xv-badge--duration { background: #444; }
.xv-badge--quality  { background: #555; color: #fff; }

/* ---- chips row (tags + author) ----
   Two sub-rows: .xv-chips__primary (channel + pornstars, always visible)
   and .xv-chips__more (categories + tags, row-clamped on small screens).
   .xv-chips itself is a vertical flex column so the two sub-rows stack
   cleanly; each sub-row is its own horizontal flex-wrap. The visual gap
   between sub-rows matches the in-row chip gap so it still reads as one
   continuous strip. */
.xv-chips {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin: 4px 0 6px;
    /* Default row clamp on mobile = 1 row of "more" chips visible. CSS
       sets a coarse approximation (1.95em ~= one 12px chip row + padding)
       so there is no FOUC before JS measures; chips-truncate.js then
       overrides .xv-chips__more.style.maxHeight with the exact pixel
       height of the row boundary it found. */
    --xv-chip-rows: 1;
}
.xv-chips__primary,
.xv-chips__more {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}
.xv-chips__more {
    position: relative;
}
/* Clamp only kicks in once JS has attached. Without JS the toggle button
   never appears, so clamping would hide chips with no escape. With JS
   attached, .xv-chips gets .js-ready immediately on init, so the visible
   flash of full chips is at most one frame. */
.xv-chips.js-ready .xv-chips__more {
    overflow: hidden;
    max-height: 1.95em;
}
/* Soft fade on the bottom edge of the clamped row hints at hidden chips. */
.xv-chips__more::after {
    content: '';
    position: absolute;
    left: 0; right: 0; bottom: 0;
    height: 14px;
    background: linear-gradient(to bottom, rgba(26,26,26,0), #1a1a1a 90%);
    pointer-events: none;
}
.xv-chips.is-expanded .xv-chips__more {
    max-height: none;
    overflow: visible;
}
.xv-chips.is-expanded .xv-chips__more::after { display: none; }
/* When JS finds no overflow, drop the clamp entirely. */
.xv-chips.no-overflow .xv-chips__more {
    max-height: none;
    overflow: visible;
}
.xv-chips.no-overflow .xv-chips__more::after { display: none; }

.xv-chips__toggle {
    align-self: flex-start;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    background: #2a2a2a;
    border: 1px solid #3a3a3a;
    border-radius: 3px;
    font-size: 12px;
    font-weight: 600;
    color: #d0d0d0;
    line-height: 1.2;
    cursor: pointer;
    transition: background 0.12s;
}
.xv-chips__toggle:hover { background: #3a3a3a; color: #fff; }
.xv-chips__toggle-icon { font-size: 10px; transition: transform 0.15s; }
.xv-chips.is-expanded .xv-chips__toggle-icon { transform: rotate(180deg); }

/* Desktop: more room, so allow 2 rows of "more" chips before clamp. */
@media (min-width: 768px) {
    .xv-chips { --xv-chip-rows: 2; }
    .xv-chips.js-ready .xv-chips__more { max-height: 4em; }
}
.xv-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    background: #1f1f1f;
    border: 1px solid #2a2a2a;
    border-radius: 3px;
    font-size: 12px;
    color: #d0d0d0;
    line-height: 1.2;
    white-space: nowrap;
    transition: background 0.12s;
}
.xv-chip:hover { background: #2a2a2a; color: #fff; }
/* Author + pornstar pills share the star-on-red treatment. Matches the
   common visual convention where star-icon pills (people) cluster at
   the start of the chip row, visually distinct from regular tag pills.
   Note: on reddgifs the "author" is always the ingest user — pornstar
   pills are the more semantically useful pills, but the styling is
   identical so they read as a unified group. */
.xv-chip--author,
.xv-chip--pornstar {
    background: #d63a30;
    border-color: #d63a30;
    color: #fff;
    font-weight: 600;
}
.xv-chip--author:hover,
.xv-chip--pornstar:hover { background: #c12d24; color: #fff; }
.xv-chip__star { color: #ffd54a; }

/* Channel icon on the author chip — small TV/camera SVG. inline-flex
   keeps it baseline-aligned with the chip text; explicit color sets
   the SVG fill via currentColor. Yellow on red mirrors the star
   treatment so the two icon types feel like the same family. */
.xv-chip__channel {
    display: inline-flex;
    align-items: center;
    color: #ffd54a;
    line-height: 0;
}
.xv-chip__count {
    background: rgba(0,0,0,0.25);
    padding: 1px 6px;
    border-radius: 2px;
    font-size: 11px;
    font-weight: 600;
}
.xv-chip--cat {
    background: #ffd54a;
    border-color: #ffd54a;
    color: #1a1a1a;
    font-weight: 600;
}
.xv-chip--cat:hover { background: #f0c432; color: #1a1a1a; }

.xv-subchips {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    font-size: 12px;
    color: #888;
    margin-top: 2px;
}
.xv-subchip { color: #999; }
.xv-subchip:hover { color: #ccc; }
.xv-subchip--edit { color: #999; }

/* ---- main row (player + sidebar ad) ---- */
.xv-main {
    padding: 6px 16px;
    max-width: 1700px;
    margin: 0 auto;
}
.xv-row {
    display: flex;
    gap: 16px;
    align-items: flex-start;
}
.xv-player-col {
    flex: 1 1 auto;
    min-width: 0;
}
.xv-player-col .post-main,
.xv-player-col .video-js,
.xv-player-col .embed-responsive,
.xv-player-col video {
    width: 100%;
    background: #000;
    border-radius: 0;
}
.xv-sidebar-col {
    flex: 0 0 304px;
    max-width: 304px;
}
.xv-sidebar-ad {
    width: 300px;
    min-height: 600px;
    background: #111;
    border: 1px solid #2a2a2a;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}
.xv-sidebar-ad img,
.xv-sidebar-ad iframe { max-width: 100%; height: auto; display: block; }
.xv-sidebar-ad__placeholder {
    color: #555;
    font-size: 13px;
    padding: 24px;
}
.xv-sidebar-ad__placeholder small {
    display: block;
    margin-top: 8px;
    font-size: 10px;
    color: #444;
}

/* ---- actions row ---- */
.xv-actions {
    padding: 8px 16px;
    max-width: 1700px;
    margin: 0 auto;
}
.xv-actions-row {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 10px 0;
    border-top: 1px solid #1a1a1a;
}
.xv-actions-left {
    display: flex;
    gap: 18px;
    align-items: center;
}
.xv-actions-right {
    display: flex;
    gap: 14px;
    align-items: center;
    margin-left: auto;
}
.xv-stat {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    color: #aaa;
    font-size: 13px;
}
.xv-stat--like    { color: #6ec06e; }
.xv-stat--dislike { color: #c06e6e; }
.xv-stat--link    { cursor: pointer; text-decoration: none; }
.xv-stat--link:hover { color: #fff; }

/* ---- wp-post-like buttons inline-styled ----
   wppl_button_like() outputs a Bootstrap-styled <button> with absolutely-
   positioned badge — bulky and out of place in our inline xv-stat row.
   Override to render as inline-flex text+icon+count, matching .xv-stat. */
.xv-actions-left .wppl-button-wrap {
    background: none;
    padding: 0;
    margin: 0;
}
.xv-actions-left .wppl-button-wrap .like-progress { display: none; }
.xv-actions-left .wppl-button-wrap .d-flex {
    display: inline-flex !important;
    gap: 18px !important;
    align-items: center;
}
.xv-actions-left .wppl-button-wrap .form-post-like { margin: 0; }
.xv-actions-left .wppl-like-button,
.xv-actions-left .wppl-dislike-button {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: transparent;
    border: 0;
    padding: 0;
    color: #aaa;
    font-size: 13px;
    line-height: 1.4;
    cursor: pointer;
    box-shadow: none;
}
.xv-actions-left .wppl-like-button:hover,
.xv-actions-left .wppl-like-button.active     { color: #6ec06e; }
.xv-actions-left .wppl-dislike-button:hover,
.xv-actions-left .wppl-dislike-button.active  { color: #c06e6e; }
/* Flatten the absolutely-positioned badge into inline text matching the
   other xv-stat counts (no pill, no background, same font). */
.xv-actions-left .wppl-button-wrap .btn__badge {
    position: static !important;
    background: transparent !important;
    color: inherit !important;
    padding: 0 !important;
    font-size: 13px;
    font-weight: normal;
}
.xv-actions-left .wppl-button-wrap .btn__icon { display: inline-flex; }

html { scroll-behavior: smooth; }
#comments { scroll-margin-top: 80px; }
.xv-action {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    color: #aaa;
    font-size: 13px;
    cursor: pointer;
}
.xv-action:hover { color: #fff; }

/* ---- promo strip ---- */
.xv-promo {
    max-width: 1700px;
    margin: 0 auto;
    padding: 6px 16px;
}
.xv-promo:empty { display: none; }

/* ---- related ---- */
.xv-related {
    padding: 12px 16px;
    max-width: 1700px;
    margin: 0 auto;
}
.xv-related-tabs {
    border-bottom: 1px solid #222;
    padding-bottom: 6px;
    margin-bottom: 12px;
}
.xv-related-tab {
    display: inline-block;
    padding: 6px 14px 8px;
    color: #ccc;
    font-size: 13px;
    border-bottom: 2px solid transparent;
    margin-bottom: -7px;
}
.xv-related-tab.is-active {
    color: #fff;
    border-bottom-color: #d63a30;
    font-weight: 600;
}

.xv-related-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 12px 10px;
}
.xv-related-card { display: block; color: #ccc; }
.xv-related-card:hover .xv-related-title { color: #fff; }
.xv-related-thumbwrap {
    position: relative;
    aspect-ratio: 16/9;
    background: #111;
    overflow: hidden;
    border-radius: 0;
}
.xv-related-thumb,
.xv-related-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    border-radius: 0;
}
.xv-related-thumb--empty { background: #222; }
.xv-related-quality {
    position: absolute;
    top: 4px;
    right: 4px;
    background: rgba(0,0,0,0.75);
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    padding: 1px 5px;
    border-radius: 2px;
}
.xv-related-title {
    margin-top: 6px;
    font-size: 13px;
    color: #ddd;
    line-height: 1.3;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.xv-related-meta {
    margin-top: 3px;
    font-size: 11px;
    color: #888;
    display: flex;
    gap: 4px;
}
/* inline-flex so the icon-eye glyph (added in reddgifs-xvids-template.php
   `reddgifs_xvids_render_related`) baselines cleanly with the "210 Views"
   text instead of riding above or below it depending on font metrics. */
.xv-related-views {
    color: #888;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.xv-related-views .icon-eye { font-size: 1em; line-height: 1; }

/* ---- banner ad ---- */
.xv-banner {
    max-width: 1700px;
    margin: 0 auto;
    padding: 10px 16px;
    text-align: center;
}
.xv-banner__placeholder {
    background: #111;
    border: 1px solid #2a2a2a;
    color: #555;
    padding: 30px;
    font-size: 13px;
}
.xv-banner__placeholder small {
    display: block;
    margin-top: 6px;
    font-size: 10px;
    color: #444;
}

/* ---- comments ---- */
.xv-comments {
    max-width: 1700px;
    margin: 0 auto;
    padding: 12px 16px 24px;
    border-top: 1px solid #1a1a1a;
}
.xv-comments .comments-area,
.xv-comments .comment-list,
.xv-comments .comment-respond { max-width: 100%; }

/* ---- responsive ---- */
@media (max-width: 1199.98px) {
    .xv-related-grid { grid-template-columns: repeat(4, 1fr); }
}
@media (max-width: 991.98px) {
    .xv-row { flex-direction: column; }
    /* Without explicit width, .xv-player-col collapses to 0px on mobile:
       align-items: flex-start on .xv-row + flex-direction: column makes the
       cross axis horizontal, and the player content (position: absolute inside
       Bootstrap's .ratio.ratio-21x9) contributes zero intrinsic width. The
       0-wide ratio box then computes 0 height too, hiding the player. */
    .xv-player-col { width: 100%; }
    /* Hide the 300×600 sidebar ad on mobile — the .xv-banner slot below the
       actions row is purpose-built for the horizontal mobile shape, and a
       vertical ad here would push the player far below the fold. */
    .xv-sidebar-col { display: none; }
    .xv-related-grid { grid-template-columns: repeat(3, 1fr); }
    /* Scale the bottom banner ad down to fit narrow viewports — desktop ads
       (728×90, 970×250) overflow on phones at native size. !important is
       required because ad networks usually hardcode width/height in inline
       style or HTML attributes; without it our rule loses the cascade. */
    .xv-banner img,
    .xv-banner iframe,
    .xv-banner embed,
    .xv-banner object,
    .xv-banner ins {
        max-width: 100% !important;
        height: auto !important;
    }
}
@media (max-width: 575.98px) {
    .xv-title { font-size: 16px; }
    .xv-related-grid { grid-template-columns: repeat(2, 1fr); gap: 10px 6px; }
    .xv-actions-row { flex-wrap: wrap; }
    .xv-actions-right { width: 100%; justify-content: flex-end; }
    .xv-header,
    .xv-main,
    .xv-actions,
    .xv-related,
    .xv-banner,
    .xv-comments { padding-left: 8px; padding-right: 8px; }
}

/* ---- override theme defaults that fight us ---- */
/* Reset Bootstrap default gutter on nested containers, but skip the .xv-*
   section wrappers (which carry container-fluid AND need their own 16px gutter). */
.xv-page .container:not([class*="xv-"]),
.xv-page .container-fluid:not([class*="xv-"]) { padding-left: 0; padding-right: 0; }
.xv-page .post-bottom,
.xv-page .post-meta__items,
.xv-page .video-small-controls { display: none !important; }


/* ================================================================
 * STRATEGY B PHASE 3.3 — DUAL-CLASS TRANSITION (2026-06-03)
 *
 * Below: full duplicate of every rule above, with `xv-` rewritten as
 * `rg-single-`. During the transition markup carries BOTH prefixes;
 * Phase 6 strips the upper (original) half and keeps this clone.
 * ================================================================ */

.rg-single-page {
    background: #000;
    color: #ccc;
    font-size: 14px;
    line-height: 1.4;
    padding-bottom: 24px;
}
.rg-single-page a { color: #ccc; text-decoration: none; }
.rg-single-page a:hover { color: #fff; }

/* ---- header ---- */
.rg-single-header {
    padding: 14px 16px 6px;
    max-width: 1700px;
    margin: 0 auto;
}
.rg-single-title {
    color: #fff;
    font-size: 20px;
    font-weight: 700;
    margin: 0 0 8px;
    line-height: 1.25;
}
.rg-single-badge {
    display: inline-block;
    font-size: 11px;
    font-weight: 600;
    padding: 2px 6px;
    border-radius: 3px;
    background: #333;
    color: #ccc;
    margin-left: 6px;
    vertical-align: middle;
    text-transform: uppercase;
    letter-spacing: 0.02em;
}
.rg-single-badge--duration { background: #444; }
.rg-single-badge--quality  { background: #555; color: #fff; }

/* ---- chips row (tags + author) ----
   Two sub-rows: .rg-single-chips__primary (channel + pornstars, always visible)
   and .rg-single-chips__more (categories + tags, row-clamped on small screens).
   .rg-single-chips itself is a vertical flex column so the two sub-rows stack
   cleanly; each sub-row is its own horizontal flex-wrap. The visual gap
   between sub-rows matches the in-row chip gap so it still reads as one
   continuous strip. */
.rg-single-chips {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin: 4px 0 6px;
    /* Default row clamp on mobile = 1 row of "more" chips visible. CSS
       sets a coarse approximation (1.95em ~= one 12px chip row + padding)
       so there is no FOUC before JS measures; chips-truncate.js then
       overrides .rg-single-chips__more.style.maxHeight with the exact pixel
       height of the row boundary it found. */
    --rg-single-chip-rows: 1;
}
.rg-single-chips__primary,
.rg-single-chips__more {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}
.rg-single-chips__more {
    position: relative;
}
/* Clamp only kicks in once JS has attached. Without JS the toggle button
   never appears, so clamping would hide chips with no escape. With JS
   attached, .rg-single-chips gets .js-ready immediately on init, so the visible
   flash of full chips is at most one frame. */
.rg-single-chips.js-ready .rg-single-chips__more {
    overflow: hidden;
    max-height: 1.95em;
}
/* Soft fade on the bottom edge of the clamped row hints at hidden chips. */
.rg-single-chips__more::after {
    content: '';
    position: absolute;
    left: 0; right: 0; bottom: 0;
    height: 14px;
    background: linear-gradient(to bottom, rgba(26,26,26,0), #1a1a1a 90%);
    pointer-events: none;
}
.rg-single-chips.is-expanded .rg-single-chips__more {
    max-height: none;
    overflow: visible;
}
.rg-single-chips.is-expanded .rg-single-chips__more::after { display: none; }
/* When JS finds no overflow, drop the clamp entirely. */
.rg-single-chips.no-overflow .rg-single-chips__more {
    max-height: none;
    overflow: visible;
}
.rg-single-chips.no-overflow .rg-single-chips__more::after { display: none; }

.rg-single-chips__toggle {
    align-self: flex-start;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    background: #2a2a2a;
    border: 1px solid #3a3a3a;
    border-radius: 3px;
    font-size: 12px;
    font-weight: 600;
    color: #d0d0d0;
    line-height: 1.2;
    cursor: pointer;
    transition: background 0.12s;
}
.rg-single-chips__toggle:hover { background: #3a3a3a; color: #fff; }
.rg-single-chips__toggle-icon { font-size: 10px; transition: transform 0.15s; }
.rg-single-chips.is-expanded .rg-single-chips__toggle-icon { transform: rotate(180deg); }

/* Desktop: more room, so allow 2 rows of "more" chips before clamp. */
@media (min-width: 768px) {
    .rg-single-chips { --rg-single-chip-rows: 2; }
    .rg-single-chips.js-ready .rg-single-chips__more { max-height: 4em; }
}
.rg-single-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    background: #1f1f1f;
    border: 1px solid #2a2a2a;
    border-radius: 3px;
    font-size: 12px;
    color: #d0d0d0;
    line-height: 1.2;
    white-space: nowrap;
    transition: background 0.12s;
}
.rg-single-chip:hover { background: #2a2a2a; color: #fff; }
/* Author + pornstar pills share the star-on-red treatment. Matches the
   common visual convention where star-icon pills (people) cluster at
   the start of the chip row, visually distinct from regular tag pills.
   Note: on reddgifs the "author" is always the ingest user — pornstar
   pills are the more semantically useful pills, but the styling is
   identical so they read as a unified group. */
.rg-single-chip--author,
.rg-single-chip--pornstar {
    background: #d63a30;
    border-color: #d63a30;
    color: #fff;
    font-weight: 600;
}
.rg-single-chip--author:hover,
.rg-single-chip--pornstar:hover { background: #c12d24; color: #fff; }
.rg-single-chip__star { color: #ffd54a; }

/* Channel icon on the author chip — small TV/camera SVG. inline-flex
   keeps it baseline-aligned with the chip text; explicit color sets
   the SVG fill via currentColor. Yellow on red mirrors the star
   treatment so the two icon types feel like the same family. */
.rg-single-chip__channel {
    display: inline-flex;
    align-items: center;
    color: #ffd54a;
    line-height: 0;
}
.rg-single-chip__count {
    background: rgba(0,0,0,0.25);
    padding: 1px 6px;
    border-radius: 2px;
    font-size: 11px;
    font-weight: 600;
}
.rg-single-chip--cat {
    background: #ffd54a;
    border-color: #ffd54a;
    color: #1a1a1a;
    font-weight: 600;
}
.rg-single-chip--cat:hover { background: #f0c432; color: #1a1a1a; }

.rg-single-subchips {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    font-size: 12px;
    color: #888;
    margin-top: 2px;
}
.rg-single-subchip { color: #999; }
.rg-single-subchip:hover { color: #ccc; }
.rg-single-subchip--edit { color: #999; }

/* ---- main row (player + sidebar ad) ---- */
.rg-single-main {
    padding: 6px 16px;
    max-width: 1700px;
    margin: 0 auto;
}
.rg-single-row {
    display: flex;
    gap: 16px;
    align-items: flex-start;
}
.rg-single-player-col {
    flex: 1 1 auto;
    min-width: 0;
}
.rg-single-player-col .post-main,
.rg-single-player-col .video-js,
.rg-single-player-col .embed-responsive,
.rg-single-player-col video {
    width: 100%;
    background: #000;
    border-radius: 0;
}
.rg-single-sidebar-col {
    flex: 0 0 304px;
    max-width: 304px;
}
.rg-single-sidebar-ad {
    width: 300px;
    min-height: 600px;
    background: #111;
    border: 1px solid #2a2a2a;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}
.rg-single-sidebar-ad img,
.rg-single-sidebar-ad iframe { max-width: 100%; height: auto; display: block; }
.rg-single-sidebar-ad__placeholder {
    color: #555;
    font-size: 13px;
    padding: 24px;
}
.rg-single-sidebar-ad__placeholder small {
    display: block;
    margin-top: 8px;
    font-size: 10px;
    color: #444;
}

/* ---- actions row ---- */
.rg-single-actions {
    padding: 8px 16px;
    max-width: 1700px;
    margin: 0 auto;
}
.rg-single-actions-row {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 10px 0;
    border-top: 1px solid #1a1a1a;
}
.rg-single-actions-left {
    display: flex;
    gap: 18px;
    align-items: center;
}
.rg-single-actions-right {
    display: flex;
    gap: 14px;
    align-items: center;
    margin-left: auto;
}
.rg-single-stat {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    color: #aaa;
    font-size: 13px;
}
.rg-single-stat--like    { color: #6ec06e; }
.rg-single-stat--dislike { color: #c06e6e; }
.rg-single-stat--link    { cursor: pointer; text-decoration: none; }
.rg-single-stat--link:hover { color: #fff; }

/* ---- wp-post-like buttons inline-styled ----
   wppl_button_like() outputs a Bootstrap-styled <button> with absolutely-
   positioned badge — bulky and out of place in our inline rg-single-stat row.
   Override to render as inline-flex text+icon+count, matching .rg-single-stat. */
.rg-single-actions-left .wppl-button-wrap {
    background: none;
    padding: 0;
    margin: 0;
}
.rg-single-actions-left .wppl-button-wrap .like-progress { display: none; }
.rg-single-actions-left .wppl-button-wrap .d-flex {
    display: inline-flex !important;
    gap: 18px !important;
    align-items: center;
}
.rg-single-actions-left .wppl-button-wrap .form-post-like { margin: 0; }
.rg-single-actions-left .wppl-like-button,
.rg-single-actions-left .wppl-dislike-button {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: transparent;
    border: 0;
    padding: 0;
    color: #aaa;
    font-size: 13px;
    line-height: 1.4;
    cursor: pointer;
    box-shadow: none;
}
.rg-single-actions-left .wppl-like-button:hover,
.rg-single-actions-left .wppl-like-button.active     { color: #6ec06e; }
.rg-single-actions-left .wppl-dislike-button:hover,
.rg-single-actions-left .wppl-dislike-button.active  { color: #c06e6e; }
/* Flatten the absolutely-positioned badge into inline text matching the
   other rg-single-stat counts (no pill, no background, same font). */
.rg-single-actions-left .wppl-button-wrap .btn__badge {
    position: static !important;
    background: transparent !important;
    color: inherit !important;
    padding: 0 !important;
    font-size: 13px;
    font-weight: normal;
}
.rg-single-actions-left .wppl-button-wrap .btn__icon { display: inline-flex; }

html { scroll-behavior: smooth; }
#comments { scroll-margin-top: 80px; }
.rg-single-action {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    color: #aaa;
    font-size: 13px;
    cursor: pointer;
}
.rg-single-action:hover { color: #fff; }

/* ---- promo strip ---- */
.rg-single-promo {
    max-width: 1700px;
    margin: 0 auto;
    padding: 6px 16px;
}
.rg-single-promo:empty { display: none; }

/* ---- related ---- */
.rg-single-related {
    padding: 12px 16px;
    max-width: 1700px;
    margin: 0 auto;
}
.rg-single-related-tabs {
    border-bottom: 1px solid #222;
    padding-bottom: 6px;
    margin-bottom: 12px;
}
.rg-single-related-tab {
    display: inline-block;
    padding: 6px 14px 8px;
    color: #ccc;
    font-size: 13px;
    border-bottom: 2px solid transparent;
    margin-bottom: -7px;
}
.rg-single-related-tab.is-active {
    color: #fff;
    border-bottom-color: #d63a30;
    font-weight: 600;
}

.rg-single-related-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 12px 10px;
}
.rg-single-related-card { display: block; color: #ccc; }
.rg-single-related-card:hover .rg-single-related-title { color: #fff; }
.rg-single-related-thumbwrap {
    position: relative;
    aspect-ratio: 16/9;
    background: #111;
    overflow: hidden;
    border-radius: 0;
}
.rg-single-related-thumb,
.rg-single-related-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    border-radius: 0;
}
.rg-single-related-thumb--empty { background: #222; }
.rg-single-related-quality {
    position: absolute;
    top: 4px;
    right: 4px;
    background: rgba(0,0,0,0.75);
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    padding: 1px 5px;
    border-radius: 2px;
}
.rg-single-related-title {
    margin-top: 6px;
    font-size: 13px;
    color: #ddd;
    line-height: 1.3;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.rg-single-related-meta {
    margin-top: 3px;
    font-size: 11px;
    color: #888;
    display: flex;
    gap: 4px;
}
/* inline-flex so the icon-eye glyph (added in reddgifs-xvids-template.php
   `reddgifs_xvids_render_related`) baselines cleanly with the "210 Views"
   text instead of riding above or below it depending on font metrics. */
.rg-single-related-views {
    color: #888;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.rg-single-related-views .icon-eye { font-size: 1em; line-height: 1; }

/* ---- banner ad ---- */
.rg-single-banner {
    max-width: 1700px;
    margin: 0 auto;
    padding: 10px 16px;
    text-align: center;
}
.rg-single-banner__placeholder {
    background: #111;
    border: 1px solid #2a2a2a;
    color: #555;
    padding: 30px;
    font-size: 13px;
}
.rg-single-banner__placeholder small {
    display: block;
    margin-top: 6px;
    font-size: 10px;
    color: #444;
}

/* ---- comments ---- */
.rg-single-comments {
    max-width: 1700px;
    margin: 0 auto;
    padding: 12px 16px 24px;
    border-top: 1px solid #1a1a1a;
}
.rg-single-comments .comments-area,
.rg-single-comments .comment-list,
.rg-single-comments .comment-respond { max-width: 100%; }

/* ---- responsive ---- */
@media (max-width: 1199.98px) {
    .rg-single-related-grid { grid-template-columns: repeat(4, 1fr); }
}
@media (max-width: 991.98px) {
    .rg-single-row { flex-direction: column; }
    /* Without explicit width, .rg-single-player-col collapses to 0px on mobile:
       align-items: flex-start on .rg-single-row + flex-direction: column makes the
       cross axis horizontal, and the player content (position: absolute inside
       Bootstrap's .ratio.ratio-21x9) contributes zero intrinsic width. The
       0-wide ratio box then computes 0 height too, hiding the player. */
    .rg-single-player-col { width: 100%; }
    /* Hide the 300×600 sidebar ad on mobile — the .rg-single-banner slot below the
       actions row is purpose-built for the horizontal mobile shape, and a
       vertical ad here would push the player far below the fold. */
    .rg-single-sidebar-col { display: none; }
    .rg-single-related-grid { grid-template-columns: repeat(3, 1fr); }
    /* Scale the bottom banner ad down to fit narrow viewports — desktop ads
       (728×90, 970×250) overflow on phones at native size. !important is
       required because ad networks usually hardcode width/height in inline
       style or HTML attributes; without it our rule loses the cascade. */
    .rg-single-banner img,
    .rg-single-banner iframe,
    .rg-single-banner embed,
    .rg-single-banner object,
    .rg-single-banner ins {
        max-width: 100% !important;
        height: auto !important;
    }
}
@media (max-width: 575.98px) {
    .rg-single-title { font-size: 16px; }
    .rg-single-related-grid { grid-template-columns: repeat(2, 1fr); gap: 10px 6px; }
    .rg-single-actions-row { flex-wrap: wrap; }
    .rg-single-actions-right { width: 100%; justify-content: flex-end; }
    .rg-single-header,
    .rg-single-main,
    .rg-single-actions,
    .rg-single-related,
    .rg-single-banner,
    .rg-single-comments { padding-left: 8px; padding-right: 8px; }
}

/* ---- override theme defaults that fight us ---- */
/* Reset Bootstrap default gutter on nested containers, but skip the .rg-single-*
   section wrappers (which carry container-fluid AND need their own 16px gutter). */
.rg-single-page .container:not([class*="rg-single-"]),
.rg-single-page .container-fluid:not([class*="rg-single-"]) { padding-left: 0; padding-right: 0; }
.rg-single-page .post-bottom,
.rg-single-page .post-meta__items,
.rg-single-page .video-small-controls { display: none !important; }