/* SkibidiLii → VidLii Layout Alignment
   Loaded AFTER m.css. Targeted, documented overrides only — each block
   notes what differed in SkibidiLii's m.css vs VidLii's reference. */

/* Widget header layout. SkibidiLii added `display: flex; justify-content:
   space-between` to .wdg>div:first-of-type AND `display: flex` to its inner
   anchors. VidLii uses normal block flow with .wdg_sel float-right. Reset. */
.wdg > div:first-of-type {
    display: block;
}
.wdg > div:first-of-type > a {
    display: inline;
}

/* Widget header title font. VidLii uses 16px with vertical-align:top and
   top:1px so the text aligns with the 20px icons. SkibidiLii dropped to 14px
   and removed the alignment tweaks, which is why the title looks small and
   the icons appear oversized next to it. */
.wdg > div:first-of-type > a > span,
.wdg > div:first-of-type > span {
    font-weight: 700;
    vertical-align: top;
    position: relative;
    font-size: 16px;
    top: 1px;
}

#w_dl_btn { color: #00f !important; position: relative; }
#w_dl_btn svg { color: #888; transition: color .15s; }
#w_dl_btn:hover svg { color: #c00; }
/* Yellow "+" badge on hover — matches sprite hd1 images */
#w_dl_btn .w_dl_icon_wrap {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin: 0 7px 0 0;
    vertical-align: middle;
    width: 21px;
    height: 21px;
}
#w_dl_btn .w_dl_icon_wrap::after {
    content: "+";
    position: absolute;
    bottom: -3px;
    left: -3px;
    color: #f4c800;
    font-size: 11px;
    font-weight: 900;
    line-height: 1;
    display: none;
    pointer-events: none;
    text-shadow: 0 -1px 0 #000, 0 1px 0 #000, -1px 0 0 #000, 1px 0 0 #000;
}
#w_dl_btn:hover .w_dl_icon_wrap::after { display: block; }

/* ── Download button fix ── */
#w_dl_btn { color: #00f !important; }
#w_dl_btn svg { color: #888; transition: color .15s; }
#w_dl_btn:hover svg { color: #c00; }

/* ── Wrapper width at VidLii's 1000px ──
   SkibidiLii's m.css already uses .n_head li { width: 139px } matching VidLii.
   4 tabs (Home, Videos, Channels, Community) × 139 + 3 × 8 margins = 580px.
   Wrapper is set to 1000px to match VidLii exactly so the watch page right
   panel aligns flush with the player. No tab width override needed — the
   m.css default is correct. */
.pr_hd_wrapper { max-width: 1000px !important; }
.wrapper { width: 1000px !important; }

/* ── New SkibidiLii logo (500×196 source image) ──
   Original CSS box was 157×60 (ratio 2.62:1). The new logo is wider
   (ratio ~2.55:1) and benefits from being displayed larger. Bumped
   to 200×78 to give the logo more presence on the header while keeping
   the original ratio so it doesn't stretch.
   Positioned higher and more to the left. */
#hd_vidlii {
    width: 200px !important;
    height: 78px !important;
    top: -6px !important;
    left: 0 !important;
    object-fit: contain;
}

/* ── wt_des box-sizing fix ──────────────────────────────────────────────────
   SkibidiLii's m.css applies * { box-sizing: border-box } globally.
   VidLii uses content-box. This causes the uploader box to render taller
   due to how border-box affects padding/border calculation on elements
   inside wt_des. Reset to content-box to match VidLii exactly. ── */
.wt_des,
.wt_des *,
.wt_des table,
.wt_des td,
.wt_des input,
.wt_des label,
.wt_des img {
    box-sizing: content-box !important;
}

/* ── wt_person height fix ────────────────────────────────────────────────────
   wt_person has height:50px to match the 55px avatar float beside it.
   When a user has partner badges or a channel title tag, the content overflows
   50px and the .cl clearfix expands to clear it, making the wt_des box taller.
   Fix: use min-height so the box only grows when there is actually extra
   content. ── */
.wt_person {
    height: auto !important;
    min-height: 50px !important;
    overflow: visible !important;
}

/* ── Footer column width fix ────────────────────────────────────────────────
   Two issues to fix:
   
   1. SkibidiLii's m.css changed footer>div>div from VidLii's `width: 302px`
      to `width: auto`. Restore the fixed width.
   
   2. SkibidiLii's m.css applies `* { box-sizing: border-box }` globally.
      VidLii uses content-box. With border-box, the `padding-right: 15px` on
      each footer column eats into the declared width, leaving less content
      width for the inner divs to float in. This causes the inner stacks
      (Help Center/Copyright in Help & Info, etc.) to wrap to new lines.
      Fix: reset box-sizing to content-box on footer columns so widths
      behave like VidLii's reference.
   
   3. The About column has 4 inner divs (extra Chat vs VidLii's 3) so it
      needs to be wider. To fit all 3 columns on one row alongside Your
      Account, the footer extends 80px beyond the 1000px wrapper to the
      right. The wrapper has `overflow: hidden` from m.css which would clip
      this overhang, so we override the wrapper to `overflow: visible` and
      use `display: flow-root` instead to still clear floats (same effect,
      no clipping).
      
      Math (content-box):
        Col 1 (About): 390 content + 15 + 15 + 15 + 1 = 436 outer
        Col 2 (Help): 302 + 15 + 15 + 1 = 333 outer  
        Col 3 (Account): 302 + 0 = 302 outer
        Total: 1071 outer ≤ 1080 footer width ✓
      
      Inner div margin uses VidLii's natural 51px (no override) for matching
      spacing pattern. ── */
.wrapper {
    overflow: visible !important;
    display: flow-root !important;
}
footer,
footer * {
    box-sizing: content-box !important;
}
footer {
    width: 1080px !important;
    margin-left: 0 !important;
    margin-right: -80px !important;
}
footer > div > div {
    width: 302px !important;
}
footer > div > div:first-of-type {
    width: 390px !important;
}

/* ── Thumbnail crop, not stretch ─────────────────────────────────────────────
   .vid_th images are forced into fixed width/height boxes across the site
   (176x107 on /videos, 140x88 on home widgets/related videos, etc.), but the
   underlying generated thumbnail isn't always the exact same ratio as every
   box it's dropped into. Without this, the browser stretches the image
   non-uniformly to fill the box — visibly squashing/distorting it. object-fit:
   cover crops to fill the box instead, the same way real VidLii's thumbnails
   never look stretched regardless of source aspect ratio. ── */
.vid_th {
    object-fit: cover !important;
}

/* ── Blog post image size cap ────────────────────────────────────────────────
   Images embedded in blog post content via Markdown/HTML render at their
   native size. Scoped to exclude .vid_th thumbnails which live inside .vc_r
   too: height:auto would override HTML height attrs and inflate broken-image
   cards, wrecking the float grid.
   #vc_videos .vid_th gets a hard size lock so broken thumbs never distort. ── */
.vc_r img:not(.vid_th):not(.avt2) {
    max-width: 100% !important;
    height: auto !important;
}
#vc_videos .vid_th {
    width: 176px !important;
    height: 107px !important;
    max-width: none !important;
}

/* ── Videos page layout fix (v19) ───────────────────────────────────────────
   SkibidiLii's m.css diverges from VidLii in two selectors controlling the
   videos browse page two-column layout:

   .vc_l (category sidebar):
     SkibidiLii: width: 190px; padding-right: 20px  (accidentally caught inside
                 a textarea/input selector group)
     VidLii:     width: 200px; margin: 0 20px 0 0

   .vc_r (video grid column):
     SkibidiLii: width: 81%  → at 1000px wrapper = 810px
     VidLii:     width: 780px (fixed)

   With .vc_r at 810px, the v_v_bx { display:table; margin:0 auto } centres
   the 780px grid (4×180px items + 3×20px gaps) inside 810px. The extra 30px
   of centering space pushes the 4th item past the line width, dropping it to
   the next row — the misaligned thumbnail bug. ── */
.vc_l {
    width: 200px !important;
    padding-right: 0 !important;
    margin: 0 20px 0 0 !important;
}
.vc_r {
    width: 780px !important;
}

/* ── Video browse grid thumbnail container lock ──────────────────────────────
   Belt-and-suspenders fix for broken thumbnails in #vc_videos.
   Even with explicit HTML width/height attrs and the .vid_th CSS lock above,
   some browsers render a broken <img> at non-standard dimensions. Constraining
   the .th container to exactly the thumbnail dimensions prevents any broken
   image from inflating the card height, which would cause subsequent floated
   cards to skip to the next row and leave visible gaps. ── */
#vc_videos .th {
    width: 176px;
    height: 107px;
    overflow: hidden;
    display: block;
    margin-bottom: 4px;
}

/* ── Globe icon double-separator fix ────────────────────────────────────────
   SkibidiLii's header.php gives .language-toggle-container an inline style of
   display:inline-block plus border-left:1px solid #aaa in its <style> block.
   This creates a second visual line next to the globe, making it look like
   "Sign In | | globe" instead of VidLii's "Sign In | globe".
   VidLii's m.css sets display:inline with no border-left. Override. ── */
.language-toggle-container {
    display: inline !important;
    border-left: 0 !important;
    padding-left: 0 !important;
    margin-left: 0 !important;
    vertical-align: baseline !important;
    top: 0 !important;
}

/* ── Last 5 Users Online title font size ─────────────────────────────────────
   SkibidiLii m.css: .last_5>strong { font-size: 14px }
   VidLii:           .last_5>strong { font-size: 16px }
   Override to match. ── */
.last_5 > strong {
    font-size: 16px !important;
}

/* ── Homepage spotlight player rounded corners fix ───────────────────────────
   SkibidiLii m.css: .mv_wr { border-top-left-radius:0; border-top-right-radius:0 }
   VidLii:           .mv_wr { border-top-left-radius:8px; border-top-right-radius:8px }
   Also .mv_under>div needs width:237px to constrain the title+ratings column
   exactly as VidLii does, preventing the title from overflowing. ── */
.mv_wr {
    border-top-left-radius: 8px !important;
    border-top-right-radius: 8px !important;
    overflow: hidden;
}
.mv_under > div {
    width: 237px !important;
}

/* ── Homepage spotlight thumbnail preview cover fix ───────────────────────
   The vlPreview div shows the thumbnail before the video starts playing.
   It uses background-size:cover by default (from skin.css) which crops to fill.
   Force background-size:100% 100% so the full thumbnail fills the player area
   without black bars — matching VidLii\'s behaviour. Only applies before playback
   (.started class is added when video plays, hiding .vlPreview). ── */
.mv_wr .vlPreview {
    background-size: 100% 100% !important;
}

/* ── wdg header flex override fix ───────────────────────────────────────────
   SkibidiLii's m.css adds display:flex + align-items + justify-content to
   .wdg>div:first-of-type AND uses padding:0.3rem 0.6rem.
   VidLii uses padding:5px 10px 1.5px with NO flex on this element.
   The flex layout overrides the inline height:23px on colored wdg headers
   (e.g. contests yellow bar, recent comments green bar) making them too short.
   Restore VidLii's exact padding and remove flex so inline bg/height work.
   The wdg_sel div uses float:right so it still right-aligns without flex. ── */
.wdg > div:first-of-type {
    display: block !important;
    padding: 5px 10px 1.5px !important;
    align-items: unset !important;
    justify-content: unset !important;
    box-sizing: content-box !important;
    height: 23px !important;
}



/* ── Channel page (Theme 1.0) – pr_lks + Videos search fixes ────────────────
   v30 — bumped for channel theme 1.0 alignment pass
   ── */

/* pr_lks active tab: VidLii marks the current tab with underline+bold */
/* VidLii does not mark the current pr_lks tab with any special style -
   all tabs look identical regardless of which page you're on. */
.pr_lks > a.active {
    font-weight: normal;
    text-decoration: none;
}

/* connect_lnk: PHP template used to emit style="display:flex;justify-content:center"
   inline. Now removed from template. This rule guards against any cached output. */
.connect_lnk {
    display: block !important;
    justify-content: unset !important;
    text-align: center;
}



/* ── pr_lks font-size fix ────────────────────────────────────────────────────
   SkibidiLii profile.css: .pr_lks { font-size: 13px }
   VidLii profile.css:     .pr_lks { font-size: 15px }
   Override to match VidLii. ── */
.pr_lks {
    font-size: 15px !important;
}

/* ── Profile channel page: ft_video_info gap fix ─────────────────────────────
   The outer player div uses content-box; height:360px; padding-bottom:32px.
   This means total height = 392px, with 32px padding space below the vlPlayer.
   Pull ft_video_info up by 32px to sit flush against the controls bar,
   matching VidLii exactly (same pattern as Community.php: margin:-32px 0 11px). ── */
.ft_video_info {
    margin-top: -32px !important;
}



/* ── Channel 1.0 Videos search bar — exact match to VidLii m.css ─────────────
   VidLii m.css uses ONLY these two rules for the sort/search bar layout.
   The form floats right; the sorts div flows left naturally.
   No custom font-size (inherits prbx_in 12px). No padding override.
   ── */
#channel1-videos-search-container {
    margin: 5px 0 10px 5px;
}
#channel1-videos-search-form {
    float: right;
    position: relative;
    bottom: 5px;
}
.channel1-videos-search-option-selected {
    font-weight: bold;
}

/* ── Search page fixes — match VidLii exactly ───────────────────────────────
   Sources: VidLii m.css search_hd, result, r_title, r_descr, blue-gradient-dropdown
   ── */

/* search_hd: filter links left, result count right */
.search_hd {
    padding: 0 3px 8px;
    border-bottom: 1px solid #ccc;
    overflow: hidden;
}
.search_hd > div:first-of-type {
    word-spacing: 6px;
    float: left;
}
.search_hd > div:last-of-type {
    float: right;
}

/* Sort by dropdown — VidLii blue gradient style */
.blue-gradient-dropdown {
    background: linear-gradient(to bottom, #f4fbff 0, #96d3f7 100%);
    border-radius: 4px;
    color: #1b35d1;
    border: 1px solid #a8b5dd;
    font-weight: bold;
}
.small-gray {
    color: gray;
    font-size: 12px;
}

/* Result row */
.result {
    overflow: hidden;
    margin: 20px 0 0;
    width: 657px;
    font-size: 13px;
    line-height: 18px;
}
.result > .th {
    float: left;
    margin-right: 8px;
    position: relative;
    top: 2px;
}
.r_title {
    font-size: 16px !important;
    height: 1.1em;
    overflow: hidden;
    margin-bottom: 5px;
    display: block;
}
.r_descr {
    margin: 3px 0 5px;
    font-size: 13px;
}