/*
Theme Name: VTube Child
Theme URI: https://www.wp-script.com/adult-wordpress-themes/vtube/
Description: VTube Child Theme with XVideos-style inline video action bar and repositioned download/tracking button.
Author: WP-Script
Author URI: https://www.wp-script.com
Template: vtube
Version: 1.0.0
Text Domain: vtube-child
*/

/* ==========================================================================
   XVideos-style Action Toolbar & Tracking Button (Desktop Default)
   ========================================================================== */

.xv-video-toolbar {
    padding: 8px 0 12px 0;
    margin: 8px 0 16px 0;
    border-bottom: 1px solid #ebebeb;
    font-family: inherit;
}

.xv-toolbar-left,
.xv-toolbar-right {
    display: flex;
    align-items: center;
}

.xv-toolbar-left {
    gap: 20px;
}

.xv-toolbar-right {
    gap: 16px;
}

/* Views Counter */
.xv-views {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-weight: 700;
    font-size: 15px;
    color: #000;
}

.xv-views i.fa-eye {
    color: #888;
    font-size: 17px;
}

.xv-views .views-number {
    font-weight: 700;
    font-size: 15px;
    color: #000;
}

/* Like / Dislike Rating */
.xv-rating {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.xv-rating #video-rate {
    display: inline-flex;
    align-items: center;
}

.xv-rating .post-like {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.xv-rating .post-like a.btn {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 4px !important;
    margin: 0 !important;
    line-height: 1 !important;
    color: #888 !important;
    font-size: 16px !important;
    cursor: pointer;
    transition: color 0.15s ease-in-out;
}

.xv-rating .post-like a.btn:hover {
    color: #222 !important;
}

.xv-rating .post-like a.btn .like i,
.xv-rating .post-like a.btn .dislike i {
    color: #888 !important;
    font-size: 17px !important;
    transition: color 0.15s ease-in-out;
}

.xv-rating .post-like a.btn:hover .like i,
.xv-rating .post-like a.btn:hover .dislike i {
    color: #222 !important;
}

/* Hide raw count numbers */
.xv-rating .likes_count,
.xv-rating .dislikes_count {
    display: none !important;
}

/* Desktop: hide percentage text in favor of meter bar */
@media (min-width: 768px) {
    .xv-rating .xv-like-pct,
    .xv-rating .xv-dislike-pct {
        display: none !important;
    }

    /* Rating meter bar underneath thumbs */
    .xv-rating .rating-bar {
        width: 52px;
        height: 3px;
        background-color: #dcdcdc !important;
        margin: 3px 0 0 0;
        border-radius: 2px;
        overflow: hidden;
    }

    .xv-rating .rating-bar-meter {
        height: 100%;
        background-color: #888 !important;
        transition: width 0.3s ease-in-out;
    }
}

/* Shared Action Button Styling (Comments, Download, Share) */
.xv-btn-action {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    outline: none !important;
    padding: 0 !important;
    margin: 0 !important;
    color: #000 !important;
    font-weight: 700 !important;
    font-size: 14px !important;
    text-decoration: none !important;
    cursor: pointer;
    line-height: 1;
    transition: opacity 0.15s ease-in-out;
}

.xv-btn-action:hover {
    opacity: 0.75;
    text-decoration: none !important;
}

.xv-btn-action i {
    color: #888 !important;
    font-size: 17px !important;
    line-height: 1;
}

.xv-btn-action .xv-btn-text {
    font-weight: 700;
    font-size: 14px;
    color: #000;
}

/* Comments Button with Red Badge */
.xv-comment-icon-wrap {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    margin-right: 2px;
}

.xv-comment-icon-wrap i {
    font-size: 18px !important;
    color: #888 !important;
}

.xv-comment-badge {
    position: absolute;
    top: -6px;
    right: -8px;
    background-color: #cc0000;
    color: #ffffff;
    font-size: 10px;
    font-weight: 700;
    line-height: 1;
    padding: 2px 4px;
    border-radius: 9px;
    min-width: 14px;
    text-align: center;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}

/* Download / Tracking button specific */
.xv-download a.xv-btn-action {
    color: #000 !important;
}

.xv-download a.xv-btn-action i {
    font-size: 17px !important;
}

/* Active tab highlight */
.xv-btn-action.tab-link.active i,
.xv-btn-action.tab-link.active .xv-btn-text {
    color: #cc0000 !important;
}

/* Ad Zone - Repositioned Above Video Title (XVideos style) */
.happy-above-title {
    text-align: center;
    margin: 12px auto 16px auto;
    padding: 0;
    overflow: hidden;
    line-height: 1;
}

.happy-above-title img,
.happy-above-title iframe {
    max-width: 100%;
    height: auto;
    display: inline-block;
}

/* Hide original full-width tracking button container if present */
.video-left > .video-tracking {
    display: none !important;
}

/* ==========================================================================
   XVideos Mobile Layout (Icon Directly Above Text)
   ========================================================================== */

@media (max-width: 767px) {
    .xv-video-toolbar {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        justify-content: space-between !important;
        align-items: flex-end !important;
        padding: 8px 2px !important;
        margin: 5px 0 14px 0 !important;
        border-bottom: 1px solid #ebebeb !important;
        width: 100% !important;
    }

    .xv-toolbar-left,
    .xv-toolbar-right {
        display: contents !important;
    }

    .xv-item {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: flex-end !important;
        text-align: center !important;
        padding: 0 1px !important;
        min-width: 0 !important;
    }

    /* Views: Eye icon above views count (e.g. 24k) */
    .xv-views {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: flex-end !important;
        gap: 3px !important;
        flex: 0 0 auto !important;
        min-width: 32px !important;
    }

    .xv-views i.fa-eye {
        font-size: 17px !important;
        color: #888 !important;
        margin-bottom: 2px !important;
    }

    .xv-views .views-number {
        font-size: 11px !important;
        font-weight: 700 !important;
        color: #000 !important;
        line-height: 1.2 !important;
        white-space: nowrap !important;
    }

    /* Thumbs Up & Thumbs Down: Kept tight & close together */
    .xv-rating {
        display: flex !important;
        flex-direction: row !important;
        align-items: flex-end !important;
        justify-content: center !important;
        flex: 0 0 auto !important;
        width: auto !important;
        padding: 0 2px !important;
    }

    .xv-rating #video-rate {
        width: auto !important;
        display: inline-flex !important;
        justify-content: center !important;
    }

    .xv-rating .post-like {
        width: auto !important;
        display: inline-flex !important;
        justify-content: center !important;
        align-items: flex-end !important;
        gap: 4px !important;
    }

    .xv-rating .post-like a.btn {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: flex-end !important;
        padding: 0 2px !important;
        margin: 0 !important;
        min-width: 26px !important;
        line-height: 1 !important;
        background: transparent !important;
        border: none !important;
    }

    .xv-rating .post-like a.btn .like,
    .xv-rating .post-like a.btn .dislike {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: flex-end !important;
        gap: 3px !important;
    }

    .xv-rating .post-like a.btn i {
        font-size: 17px !important;
        color: #888 !important;
        margin-bottom: 2px !important;
    }

    .xv-rating .xv-like-pct,
    .xv-rating .xv-dislike-pct {
        display: block !important;
        font-size: 11px !important;
        font-weight: 700 !important;
        color: #000 !important;
        line-height: 1.2 !important;
        white-space: nowrap !important;
    }

    .xv-rating .rating-bar {
        display: none !important;
    }

    /* Comments & Download buttons: Allocated generous space without overlapping */
    .xv-comments,
    .xv-download {
        flex: 1 1 auto !important;
        max-width: 80px !important;
    }

    .xv-share {
        flex: 0 0 auto !important;
        min-width: 34px !important;
    }

    /* Action Buttons (Comments, Download, Share): Icon above text */
    .xv-btn-action {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: flex-end !important;
        gap: 3px !important;
        text-align: center !important;
        padding: 0 !important;
        margin: 0 auto !important;
        background: transparent !important;
        border: none !important;
        width: 100% !important;
    }

    .xv-btn-action i {
        font-size: 17px !important;
        color: #888 !important;
        margin-bottom: 2px !important;
    }

    .xv-btn-action .xv-btn-text {
        font-size: 11px !important;
        font-weight: 700 !important;
        color: #000 !important;
        line-height: 1.2 !important;
        white-space: nowrap !important;
        letter-spacing: -0.2px !important;
    }

    /* Comment icon badge */
    .xv-comment-icon-wrap {
        position: relative !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        margin-right: 0 !important;
    }

    .xv-comment-icon-wrap i {
        font-size: 18px !important;
        color: #888 !important;
    }

    .xv-comment-badge {
        position: absolute !important;
        top: -6px !important;
        right: -8px !important;
        background-color: #cc0000 !important;
        color: #ffffff !important;
        font-size: 9px !important;
        font-weight: 700 !important;
        line-height: 1 !important;
        padding: 2px 4px !important;
        border-radius: 9px !important;
        min-width: 13px !important;
        text-align: center !important;
    }
}

/* Extra small screens (e.g. iPhone SE, 320px - 360px) */
@media (max-width: 380px) {
    .xv-views .views-number,
    .xv-rating .xv-like-pct,
    .xv-rating .xv-dislike-pct,
    .xv-btn-action .xv-btn-text {
        font-size: 10px !important;
        letter-spacing: -0.3px !important;
    }
    .xv-rating .post-like {
        gap: 2px !important;
    }
}

/* ==========================================================================
   In-Feed Homepage Ads (XVideos Style)
   ========================================================================== */

.xv-ad-grid-item {
    display: flex;
}

.xv-ad-block {
    width: 100%;
    margin: 0.25rem 0.25rem 1.15rem;
    background: transparent;
    border-radius: 4px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 180px;
}

.xv-ad-inner {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.xv-ad-inner img {
    max-width: 100%;
    height: auto;
    display: block;
    margin: 0 auto;
    border-radius: 4px;
}

.xv-ad-inner iframe {
    max-width: 100%;
    border: none;
    display: block;
    margin: 0 auto;
}

@media (max-width: 767px) {
    .xv-ad-block {
        min-height: 130px;
    }
}

/* ==========================================================================
   Bottom Ads Zone (.happy-section) on Mobile & Desktop
   ========================================================================== */

.happy-section {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    text-align: center !important;
    width: 100% !important;
    margin: 15px auto !important;
    padding: 5px 0 !important;
    overflow: hidden !important;
    clear: both !important;
}

.happy-section img,
.happy-section iframe,
.happy-section ins,
.happy-section a {
    max-width: 100% !important;
    height: auto !important;
    display: inline-block !important;
    margin: 0 auto !important;
}

@media (max-width: 767.98px) {
    .happy-section {
        display: flex !important;
        margin: 10px auto 15px !important;
        padding: 4px 0 !important;
    }
}

/* ==========================================================================
   Homepage Mobile Video Grid (1 Video Per Row - XVideos Style)
   ========================================================================== */

@media (max-width: 767px) {
    /* 1 Video Per Row on Mobile Homepage (Default) */
    body.home.xv-mobile-1-col .video-loop .row > div[class*="col-"],
    body.home:not(.xv-mobile-2-col) .video-loop .row > div[class*="col-"] {
        flex: 0 0 100% !important;
        max-width: 100% !important;
    }

    body.home.xv-mobile-1-col .video-block,
    body.home:not(.xv-mobile-2-col) .video-block {
        margin: 0.35rem 0.15rem 1.25rem 0.15rem !important;
    }

    body.home.xv-mobile-1-col .video-block a.infos span.title,
    body.home:not(.xv-mobile-2-col) .video-block a.infos span.title {
        font-size: 15px !important;
        line-height: 20px !important;
        max-height: 40px !important;
        text-align: left !important;
        margin-top: 6px !important;
    }

    body.home.xv-mobile-1-col .video-block .video-datas,
    body.home:not(.xv-mobile-2-col) .video-block .video-datas {
        text-align: left !important;
        margin-top: 3px !important;
        font-size: 13px !important;
    }
}

/* ==========================================================================
   Single Video Page Tags & Categories (XVideos Light-Grey Style)
   ========================================================================== */

/* Clean spacing between tags and video player */
.video-cat-tag {
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
    margin-bottom: 22px !important;
    line-height: normal;
}

@media (max-width: 767px) {
    .video-cat-tag {
        margin-bottom: 24px !important;
    }
}

/* All tags & categories buttons: light-grey background, black text */
.video-cat-tag a,
.video-cat-tag .btn,
body .video-cat-tag .btn-black,
body .video-cat-tag .btn-primary,
body .video-cat-tag .btn-grey,
body .video-cat-tag .btn-tag {
    background-color: #dcdcdc !important;
    background: #dcdcdc !important;
    border: none !important;
    color: #000000 !important;
    font-size: 13px !important;
    font-weight: 400 !important;
    padding: 3px 8px !important;
    margin: 0 4px 6px 0 !important;
    border-radius: 0 !important;
    text-transform: none !important;
    line-height: 20px !important;
    box-shadow: none !important;
    text-decoration: none !important;
    display: inline-block !important;
    vertical-align: middle !important;
    transition: background-color 0.15s ease-in-out !important;
}

.video-cat-tag a:hover,
.video-cat-tag a:focus,
.video-cat-tag .btn:hover,
body .video-cat-tag .btn:hover {
    background-color: #cecece !important;
    background: #cecece !important;
    color: #000000 !important;
    text-decoration: none !important;
}

/* Completely remove count numbers from tags */
.video-cat-tag a span,
.video-cat-tag .btn span {
    display: none !important;
}

/* Extra tags remain hidden by default (during page load and when collapsed) */
.video-cat-tag:not(.is-expanded) > a:nth-of-type(n+11),
.video-cat-tag a.xv-extra-tag,
.video-cat-tag .btn.xv-extra-tag,
body .video-cat-tag .xv-extra-tag {
    display: none !important;
}

@media (max-width: 767px) {
    .video-cat-tag:not(.is-expanded) > a:nth-of-type(n+7) {
        display: none !important;
    }
}

/* When expanded, show all tags as inline-block */
.video-cat-tag.is-expanded > a,
.video-cat-tag.is-expanded a.xv-extra-tag,
.video-cat-tag.is-expanded .btn.xv-extra-tag,
body .video-cat-tag.is-expanded .xv-extra-tag {
    display: inline-block !important;
}

/* Hide expand button on desktop when 10 or fewer tags */
@media (min-width: 768px) {
    #xv-toggle-tags-btn.xv-mobile-only-btn {
        display: none !important;
    }
}

/* Hide buggy Readmore.js toggle elements */
.more-tags,
[data-readmore-toggle],
.video-cat-tag + [data-readmore-toggle] {
    display: none !important;
}

/* Inline Expand Button placed at the END of the tags (matching light grey style) */
.xv-btn-expand-tags {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    vertical-align: middle !important;
    height: 26px !important;
    min-width: 28px !important;
    padding: 0 8px !important;
    margin: 0 4px 6px 0 !important;
    background-color: #dcdcdc !important;
    background: #dcdcdc !important;
    border: none !important;
    color: #000000 !important;
    border-radius: 0 !important;
    cursor: pointer !important;
    line-height: 1 !important;
    transition: background-color 0.15s ease-in-out !important;
}

.xv-btn-expand-tags:hover,
.xv-btn-expand-tags:focus {
    background-color: #cecece !important;
    background: #cecece !important;
    color: #000000 !important;
    outline: none !important;
}

.xv-btn-expand-tags i {
    font-size: 11px !important;
    line-height: 1 !important;
    color: #000000 !important;
}

/* ==========================================================================
   Dark / Light Mode Toggle Button (Visible for ALL Devices)
   ========================================================================== */

.xv-theme-toggle-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 6px 8px !important;
    margin-left: 6px !important;
    color: #000000 !important;
    font-size: 20px !important;
    line-height: 1 !important;
    text-decoration: none !important;
    cursor: pointer !important;
    background: transparent !important;
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
    transition: opacity 0.15s ease !important;
}

.xv-theme-toggle-btn:hover {
    opacity: 0.8 !important;
    text-decoration: none !important;
}

.xv-theme-icon {
    font-size: 20px !important;
    line-height: 1 !important;
    color: #000000 !important;
    display: inline-block !important;
    transform: rotate(0deg);
    transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1), color 0.2s ease !important;
}

/* Flipped state in Dark Mode: 180 degrees flip */
html.xv-dark-mode .xv-theme-icon,
body.xv-dark-mode .xv-theme-icon {
    transform: rotate(180deg) !important;
    color: #ffffff !important;
}

html.xv-dark-mode .xv-theme-toggle-btn {
    color: #ffffff !important;
}

/* PC Desktop View: Restore Original Header & Menu (Hide Mobile Controls) */
@media (min-width: 768px) {
    .xv-header-left,
    .xv-mobile-toggle,
    .xv-header-search-btn,
    .xv-mobile-right-icons,
    .xv-mobile-search-dropdown,
    #xvMobileSearch,
    .xv-nav-icon,
    .xv-badge-red,
    .xv-badge-ai {
        display: none !important;
    }
}

/* ==========================================================================
   XVideos Mobile Navigation Menu & Header Bar (Pixel-Perfect)
   ========================================================================== */

@media (max-width: 767.98px) {
    /* Top Header Bar */
    .header-nav {
        background: #ffffff !important;
        border-bottom: 1px solid #e2e2e2 !important;
        padding: 6px 12px !important;
        height: 52px !important;
        display: flex !important;
        align-items: center !important;
    }

    .header-nav .container {
        padding: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        position: relative !important;
    }

    /* Hide ugly outside title & standalone search bar on mobile */
    h2.header-title,
    .d-block.d-md-none.header-search,
    .header-search {
        display: none !important;
    }

    /* Left Group */
    .xv-header-left {
        gap: 6px;
        position: relative !important;
        z-index: 20 !important;
    }

    /* Mobile Toggle Button [ ✕ ] / [ ☰ ] - No stroke box, big crisp bars */
    .xv-mobile-toggle {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 38px !important;
        height: 38px !important;
        padding: 0 !important;
        border: none !important;
        background: transparent !important;
        background-color: transparent !important;
        cursor: pointer !important;
        outline: none !important;
        box-shadow: none !important;
    }

    .xv-mobile-toggle:hover,
    .xv-mobile-toggle:focus,
    .xv-mobile-toggle:active {
        outline: none !important;
        box-shadow: none !important;
        border: none !important;
        background: transparent !important;
        background-color: transparent !important;
    }

    .xv-toggle-box {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        line-height: 1;
        width: 100%;
        height: 100%;
    }

    /* Big bold rounded 3-bars matching XVideos */
    .xv-hamburger-bars {
        display: flex !important;
        flex-direction: column !important;
        justify-content: space-between !important;
        width: 27px !important;
        height: 20px !important;
    }

    .xv-hamburger-bars .xv-bar {
        display: block !important;
        width: 100% !important;
        height: 3.8px !important;
        background-color: #000000 !important;
        border-radius: 4px !important;
        transition: background-color 0.15s ease-in-out !important;
    }

    html.xv-dark-mode .xv-hamburger-bars .xv-bar {
        background-color: #ffffff !important;
    }

    .xv-mobile-toggle .xv-icon-times {
        display: none !important;
        font-size: 24px !important;
        color: #000000 !important;
        line-height: 1 !important;
        font-weight: 700 !important;
    }

    /* Active / Open state: Show crisp centered [ ✕ ], Hide bars */
    .xv-mobile-toggle.is-active .xv-hamburger-bars,
    .xv-mobile-toggle[aria-expanded="true"] .xv-hamburger-bars {
        display: none !important;
    }

    .xv-mobile-toggle.is-active .xv-icon-times,
    .xv-mobile-toggle[aria-expanded="true"] .xv-icon-times {
        display: block !important;
    }

    /* Mobile Search Toggle Icon (Magnifying Glass) */
    .xv-header-search-btn {
        background: transparent !important;
        border: none !important;
        box-shadow: none !important;
        outline: none !important;
        padding: 6px 8px !important;
        color: #000000 !important;
        font-size: 18px !important;
        line-height: 1 !important;
        cursor: pointer !important;
    }

    .xv-header-search-btn i {
        color: #000000 !important;
        font-size: 18px !important;
    }

    /* Center: Logo (100% Dead Center on Mobile) */
    .xv-header-center {
        position: absolute !important;
        left: 50% !important;
        top: 50% !important;
        transform: translate(-50%, -50%) !important;
        margin: 0 !important;
        padding: 0 !important;
        width: auto !important;
        max-width: calc(100% - 170px) !important;
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        text-align: center !important;
        z-index: 10 !important;
        pointer-events: auto !important;
    }

    .xv-header-center .logo {
        margin: 0 !important;
        text-align: center !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    .xv-header-center a.logo-text,
    .header-nav .logo a {
        background: transparent !important;
        color: #000000 !important;
        font-size: 22px !important;
        font-weight: 900 !important;
        letter-spacing: -0.5px !important;
        text-decoration: none !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        line-height: 1 !important;
        box-shadow: none !important;
    }

    .header-nav .logo-word-1 {
        color: #d00000 !important;
        background: transparent !important;
    }

    .header-nav .logo-word-2 {
        color: #000000 !important;
        background: transparent !important;
    }

    .header-nav .logo h1 {
        margin: 0 !important;
        line-height: 1 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    /* Right Icons: Profile & Settings */
    .xv-header-right {
        gap: 4px;
        position: relative !important;
        z-index: 20 !important;
    }

    .xv-mobile-right-icons .xv-header-icon {
        color: #000000 !important;
        font-size: 18px !important;
        padding: 6px 6px !important;
        line-height: 1 !important;
        text-decoration: none !important;
        display: inline-block !important;
    }

    .xv-mobile-right-icons .xv-header-icon i {
        color: #000000 !important;
        font-size: 18px !important;
    }

    /* Slide-Down Mobile Search Bar */
    .xv-mobile-search-dropdown {
        position: absolute !important;
        top: 52px !important;
        left: 0 !important;
        width: 100% !important;
        background: #ffffff !important;
        border-bottom: 2px solid #e0e0e0 !important;
        padding: 10px 14px !important;
        z-index: 999998 !important;
        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15) !important;
    }

    .xv-mobile-search-dropdown form {
        display: flex !important;
        width: 100% !important;
    }

    .xv-mobile-search-dropdown input#s {
        flex: 1 !important;
        height: 38px !important;
        border: 1px solid #ccc !important;
        border-right: none !important;
        padding: 6px 12px !important;
        font-size: 14px !important;
        border-radius: 3px 0 0 3px !important;
        outline: none !important;
    }

    .xv-mobile-search-dropdown button#searchsubmit {
        width: 44px !important;
        height: 38px !important;
        background: #eee !important;
        border: 1px solid #ccc !important;
        border-radius: 0 3px 3px 0 !important;
        color: #333 !important;
        cursor: pointer !important;
    }

    /* Ensure navbar wrapper has zero gap directly below header-nav */
    nav.navbar {
        position: relative !important;
        height: 0 !important;
        min-height: 0 !important;
        padding: 0 !important;
        margin: 0 !important;
        border: none !important;
    }

    nav.navbar .container {
        position: static !important;
        padding: 0 !important;
        margin: 0 !important;
        max-width: 100% !important;
        width: 100% !important;
    }

    /* Mobile Navigation Drawer (Attached directly under header with ZERO gap) */
    .navbar-collapse,
    body.home .navbar-collapse,
    body.single .navbar-collapse {
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        width: 100% !important;
        z-index: 999999 !important;
        background: #1c1c1c !important;
        box-shadow: 0 12px 30px rgba(0, 0, 0, 0.7) !important;
        max-height: calc(100vh - 52px) !important;
        overflow-y: auto !important;
        border-top: none !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    .navbar-dark .navbar-collapse ul.navbar-nav,
    ul.navbar-nav {
        background: #1c1c1c !important;
        height: auto !important;
        min-height: auto !important;
        padding: 0 !important;
        margin: 0 !important;
        list-style: none !important;
        width: 100% !important;
    }

    /* Menu Item Rows */
    ul.navbar-nav li,
    ul.navbar-nav li.nav-item {
        display: block !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        border-bottom: 1px solid #282828 !important;
        background: #1c1c1c !important;
    }

    ul.navbar-nav li:last-child {
        border-bottom: none !important;
    }

    /* Menu Link Layout (Icon Left, Text, Dropdown Chevron Right) */
    ul.navbar-nav li a,
    ul.navbar-nav li a.nav-link {
        display: flex !important;
        align-items: center !important;
        justify-content: flex-start !important;
        width: 100% !important;
        padding: 13px 18px !important;
        background: #1c1c1c !important;
        color: #ffffff !important;
        font-size: 16px !important;
        font-weight: 700 !important;
        line-height: 1.4 !important;
        border: none !important;
        text-decoration: none !important;
        transition: background-color 0.15s ease-in-out !important;
    }

    /* Hover & Active highlight */
    ul.navbar-nav li a:hover,
    ul.navbar-nav li a:focus,
    ul.navbar-nav li a:active,
    ul.navbar-nav li.active a {
        background: #282828 !important;
        color: #ffffff !important;
    }

    /* Left Icon */
    ul.navbar-nav li a i,
    ul.navbar-nav li a svg {
        width: 24px !important;
        font-size: 18px !important;
        color: #b0b0b0 !important;
        text-align: center !important;
        margin-right: 14px !important;
        flex-shrink: 0 !important;
        display: inline-block !important;
        transition: color 0.15s ease-in-out !important;
    }

    ul.navbar-nav li a:hover i {
        color: #ffffff !important;
    }

    /* Dropdown Chevron Arrow on the far right */
    ul.navbar-nav li.dropdown > a::after,
    ul.navbar-nav li.menu-item-has-children > a::after {
        content: "" !important;
        display: inline-block !important;
        margin-left: auto !important;
        vertical-align: middle !important;
        border-top: 6px solid #ffffff !important;
        border-right: 5px solid transparent !important;
        border-bottom: 0 !important;
        border-left: 5px solid transparent !important;
    }

    /* Submenu (Dropdown Items) */
    ul.navbar-nav .dropdown-menu {
        position: static !important;
        float: none !important;
        width: 100% !important;
        background: #141414 !important;
        border: none !important;
        border-top: 1px solid #222222 !important;
        box-shadow: none !important;
        padding: 0 !important;
        margin: 0 !important;
        border-radius: 0 !important;
    }

    ul.navbar-nav .dropdown-menu li,
    ul.navbar-nav .dropdown-menu .dropdown-item {
        border-bottom: 1px solid #1f1f1f !important;
    }

    ul.navbar-nav .dropdown-menu li a,
    ul.navbar-nav .dropdown-menu .dropdown-item {
        padding: 11px 18px 11px 50px !important;
        background: #141414 !important;
        color: #d0d0d0 !important;
        font-size: 14px !important;
        font-weight: 600 !important;
    }

    ul.navbar-nav .dropdown-menu li a:hover,
    ul.navbar-nav .dropdown-menu .dropdown-item:hover {
        background: #222222 !important;
        color: #ffffff !important;
    }
}

/* ==========================================================================
   XVideos Dark Mode Theme (Pixel-Perfect XVideos Dark Styling)
   ========================================================================== */

/* 1. Global Page Background & Text */
html.xv-dark-mode {
    color-scheme: dark !important;
}

html.xv-dark-mode,
html.xv-dark-mode body,
body.xv-dark-mode {
    color-scheme: dark !important;
    background-color: #0e0e0e !important;
    background: #0e0e0e !important;
    color: #e0e0e0 !important;
}

html.xv-dark-mode #page,
html.xv-dark-mode #content,
html.xv-dark-mode #page-wrapper,
html.xv-dark-mode .wrapper,
html.xv-dark-mode .site-main,
html.xv-dark-mode #main,
html.xv-dark-mode .container,
html.xv-dark-mode .site,
html.xv-dark-mode .site-content {
    background-color: transparent !important;
    background: transparent !important;
}

/* 2. Top Header Bar */
html.xv-dark-mode .header-nav {
    background-color: #121212 !important;
    background: #121212 !important;
    border-bottom: 1px solid #222222 !important;
}

html.xv-dark-mode .header-nav .logo a.logo-text,
html.xv-dark-mode .header-nav .logo-text,
html.xv-dark-mode .header-nav .logo a {
    background: transparent !important;
    background-color: transparent !important;
    color: #ffffff !important;
}

html.xv-dark-mode .header-nav .logo-word-1 {
    color: #d00000 !important;
    background: transparent !important;
}

html.xv-dark-mode .header-nav .logo-word-2 {
    color: #ffffff !important;
    background: transparent !important;
}

html.xv-dark-mode .xv-header-icon,
html.xv-dark-mode .xv-header-icon i,
html.xv-dark-mode .xv-header-search-btn,
html.xv-dark-mode .xv-header-search-btn i,
html.xv-dark-mode .xv-theme-toggle-btn,
html.xv-dark-mode .xv-theme-icon {
    color: #ffffff !important;
}

/* Mobile Toggle [ ✕ ] / [ ☰ ] in Dark Mode */
html.xv-dark-mode .xv-mobile-toggle {
    background: transparent !important;
    background-color: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

html.xv-dark-mode .xv-mobile-toggle .xv-icon-times {
    color: #ffffff !important;
}

/* PC Desktop Hamburger in Dark Mode */
html.xv-dark-mode .navbar-toggler.hamburger .hamburger-inner,
html.xv-dark-mode .navbar-toggler.hamburger .hamburger-inner::before,
html.xv-dark-mode .navbar-toggler.hamburger .hamburger-inner::after {
    background-color: #ffffff !important;
}

/* Search Dropdown / Desktop Search Bar in Dark Mode (Matches XVideos signature white search bar) */
html.xv-dark-mode .xv-mobile-search-dropdown {
    background: #161616 !important;
    background-color: #161616 !important;
    border-bottom: 1px solid #282828 !important;
}

html.xv-dark-mode .header-search input,
html.xv-dark-mode .header-search input#s {
    background: #ffffff !important;
    background-color: #ffffff !important;
    border: 2px solid #a8a8a8 !important;
    border-right: 0 !important;
    color: #000000 !important;
}

html.xv-dark-mode .header-search input::placeholder,
html.xv-dark-mode .header-search input#s::placeholder,
html.xv-dark-mode .xv-mobile-search-dropdown input#s::placeholder {
    color: #777777 !important;
    opacity: 1 !important;
}

html.xv-dark-mode .header-search button#searchsubmit {
    background: #d9d9d9 !important;
    background-color: #d9d9d9 !important;
    border: 2px solid #a8a8a8 !important;
    color: #000000 !important;
}

html.xv-dark-mode .header-search button#searchsubmit i {
    color: #000000 !important;
}

html.xv-dark-mode .xv-mobile-search-dropdown input#s {
    background: #ffffff !important;
    background-color: #ffffff !important;
    border: 1px solid #cccccc !important;
    border-right: none !important;
    color: #000000 !important;
}

html.xv-dark-mode .xv-mobile-search-dropdown button#searchsubmit {
    background: #eeeeee !important;
    background-color: #eeeeee !important;
    border: 1px solid #cccccc !important;
    color: #000000 !important;
}

html.xv-dark-mode .xv-mobile-search-dropdown button#searchsubmit i {
    color: #000000 !important;
}

/* 3. Global Buttons: Overriding parent theme's stubborn `body .btn-grey` */
html.xv-dark-mode body .btn-grey,
html.xv-dark-mode body .btn-grey-light,
html.xv-dark-mode .btn.btn-grey,
html.xv-dark-mode a.btn.btn-grey,
html.xv-dark-mode button.btn.btn-grey {
    background-color: #242424 !important;
    background: #242424 !important;
    border-color: #353535 !important;
    color: #e0e0e0 !important;
}

html.xv-dark-mode body .btn-grey:hover,
html.xv-dark-mode body .btn-grey-light:hover,
html.xv-dark-mode .btn.btn-grey:hover,
html.xv-dark-mode a.btn.btn-grey:hover {
    background-color: #353535 !important;
    background: #353535 !important;
    border-color: #454545 !important;
    color: #ffffff !important;
}

/* Global Tag Buttons in Dark Mode (Pure solid black background matching XVideos) */
html.xv-dark-mode .btn.btn-tag,
html.xv-dark-mode a.btn.btn-tag,
html.xv-dark-mode body .btn-tag {
    background-color: #000000 !important;
    background: #000000 !important;
    border: none !important;
    border-radius: 0 !important;
    color: #ffffff !important;
    box-shadow: none !important;
}

html.xv-dark-mode .btn.btn-tag:hover,
html.xv-dark-mode a.btn.btn-tag:hover,
html.xv-dark-mode body .btn-tag:hover {
    background-color: #222222 !important;
    background: #222222 !important;
    border: none !important;
    color: #ffffff !important;
}

/* 4. Desktop & Mobile Navigation Menu */
html.xv-dark-mode nav.navbar,
html.xv-dark-mode #wrapper-navbar,
html.xv-dark-mode .navbar-dark {
    background-color: #0e0e0e !important;
    background: #0e0e0e !important;
}

html.xv-dark-mode .navbar-collapse,
html.xv-dark-mode .navbar-dark .navbar-collapse ul.navbar-nav,
html.xv-dark-mode ul.navbar-nav {
    background: #141414 !important;
    background-color: #141414 !important;
}

html.xv-dark-mode ul.navbar-nav li,
html.xv-dark-mode ul.navbar-nav li.nav-item {
    border-color: #222222 !important;
    background: #141414 !important;
}

html.xv-dark-mode ul.navbar-nav li a,
html.xv-dark-mode ul.navbar-nav li a.nav-link {
    color: #ffffff !important;
}

html.xv-dark-mode ul.navbar-nav li a:hover {
    background-color: #222222 !important;
}

/* Desktop horizontal tag buttons in menu */
html.xv-dark-mode ul.navbar-nav li.tag-menu a.btn-grey,
html.xv-dark-mode ul.navbar-nav li a.btn-grey {
    background-color: #000000 !important;
    background: #000000 !important;
    border: none !important;
    color: #ffffff !important;
}

html.xv-dark-mode ul.navbar-nav li.tag-menu a.btn-grey:hover,
html.xv-dark-mode ul.navbar-nav li a.btn-grey:hover {
    background-color: #222222 !important;
    background: #222222 !important;
    border: none !important;
    color: #ffffff !important;
}

/* 5. Video Loop / Cards (Homepage, Categories, Tags, Search Results) */
html.xv-dark-mode .video-loop,
html.xv-dark-mode .video-block {
    background: transparent !important;
    background-color: transparent !important;
}

html.xv-dark-mode .video-block a.infos span.title,
html.xv-dark-mode a.infos span.title,
html.xv-dark-mode .video-block a span.title {
    color: #ffffff !important;
}

html.xv-dark-mode .video-block a.infos span.title:hover,
html.xv-dark-mode a.infos:hover span.title {
    color: #d00000 !important;
}

html.xv-dark-mode .video-block a.infos,
html.xv-dark-mode .video-block a.infos span.infos-details,
html.xv-dark-mode .video-block .video-datas {
    color: #888888 !important;
}

html.xv-dark-mode .video-block .video-datas .channel-name,
html.xv-dark-mode .video-block .video-datas .channel-name a {
    color: #aaaaaa !important;
}

html.xv-dark-mode .video-block a.infos span.views-number {
    color: #bbbbbb !important;
}

html.xv-dark-mode .video-datas span[class*="quality"] {
    background: #282828 !important;
    color: #d00000 !important;
    border: 1px solid #383838 !important;
}

/* General Typography */
html.xv-dark-mode h1,
html.xv-dark-mode h2,
html.xv-dark-mode h3,
html.xv-dark-mode h4,
html.xv-dark-mode h5,
html.xv-dark-mode h6 {
    color: #ffffff !important;
}

html.xv-dark-mode a {
    color: #cccccc;
}

html.xv-dark-mode a:hover {
    color: #ffffff;
}

/* 6. Single Video Page (XVideos Dark Mode) */
html.xv-dark-mode .video-title h1,
html.xv-dark-mode .video-details h1.entry-title,
html.xv-dark-mode h1.entry-title {
    color: #ffffff !important;
}

/* Single Video Tags in Dark Mode (Pure solid black background matching XVideos) */
html.xv-dark-mode .video-cat-tag a,
html.xv-dark-mode .video-cat-tag a.btn,
html.xv-dark-mode .video-cat-tag a.btn-tag,
html.xv-dark-mode .video-cat-tag .btn,
html.xv-dark-mode body .video-cat-tag .btn-tag,
html.xv-dark-mode body .video-cat-tag a,
html.xv-dark-mode .xv-btn-expand-tags {
    background-color: #000000 !important;
    background: #000000 !important;
    color: #ffffff !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}

html.xv-dark-mode .video-cat-tag a:hover,
html.xv-dark-mode .video-cat-tag a.btn:hover,
html.xv-dark-mode .video-cat-tag a.btn-tag:hover,
html.xv-dark-mode .video-cat-tag .btn:hover,
html.xv-dark-mode body .video-cat-tag .btn-tag:hover,
html.xv-dark-mode body .video-cat-tag a:hover,
html.xv-dark-mode .xv-btn-expand-tags:hover {
    background-color: #222222 !important;
    background: #222222 !important;
    border: none !important;
    color: #ffffff !important;
}

html.xv-dark-mode .xv-btn-expand-tags i {
    color: #ffffff !important;
}

/* Action Toolbar in Dark Mode (100% Matching XVideos) */
html.xv-dark-mode .xv-video-toolbar {
    background-color: transparent !important;
    background: transparent !important;
    border-top: none !important;
    border-bottom: 1px solid #222222 !important;
}

html.xv-dark-mode .xv-video-toolbar #video-views {
    color: #888888 !important;
}

html.xv-dark-mode .xv-video-toolbar #video-views i {
    color: #888888 !important;
}

html.xv-dark-mode .xv-video-toolbar #video-views span.views-number {
    color: #ffffff !important;
    font-weight: 700 !important;
}

/* No boxes, no borders, clean transparent buttons like XVideos */
html.xv-dark-mode .xv-video-toolbar .xv-btn-action,
html.xv-dark-mode .xv-video-toolbar .tab-link,
html.xv-dark-mode .xv-video-toolbar .xv-download-link,
html.xv-dark-mode .xv-video-toolbar .post-like a.btn,
html.xv-dark-mode .xv-video-toolbar .post-like a.btn-grey,
html.xv-dark-mode .post-like a.btn,
html.xv-dark-mode .post-like a.btn-grey {
    background: transparent !important;
    background-color: transparent !important;
    border: none !important;
    box-shadow: none !important;
    outline: none !important;
    color: #ffffff !important;
}

html.xv-dark-mode .xv-btn-action,
html.xv-dark-mode .xv-video-toolbar .xv-btn-text,
html.xv-dark-mode .xv-video-toolbar .tab-link span,
html.xv-dark-mode .xv-video-toolbar .tab-link .xv-btn-text,
html.xv-dark-mode .xv-video-toolbar .xv-like-pct,
html.xv-dark-mode .xv-video-toolbar .xv-dislike-pct {
    color: #ffffff !important;
    font-weight: 700 !important;
}

html.xv-dark-mode .xv-video-toolbar .xv-btn-action i,
html.xv-dark-mode .xv-video-toolbar .tab-link i,
html.xv-dark-mode .xv-video-toolbar .post-like i,
html.xv-dark-mode .xv-video-toolbar .xv-download-link i {
    color: #888888 !important;
    transition: color 0.15s ease !important;
}

/* Hover highlights icon to white */
html.xv-dark-mode .xv-video-toolbar .xv-btn-action:hover i,
html.xv-dark-mode .xv-video-toolbar .tab-link:hover i,
html.xv-dark-mode .xv-video-toolbar .post-like a.btn:hover i,
html.xv-dark-mode .xv-video-toolbar .xv-download-link:hover i {
    color: #ffffff !important;
}

html.xv-dark-mode .xv-video-toolbar .xv-btn-action:hover .xv-btn-text,
html.xv-dark-mode .xv-video-toolbar .tab-link:hover .xv-btn-text,
html.xv-dark-mode .xv-video-toolbar .xv-download-link:hover .xv-btn-text {
    color: #ffffff !important;
    opacity: 0.85;
}

/* Active tab highlight */
html.xv-dark-mode .xv-video-toolbar .tab-link.active,
html.xv-dark-mode .xv-video-toolbar .tab-link.is-open {
    background: transparent !important;
    background-color: transparent !important;
    border: none !important;
}

html.xv-dark-mode .xv-video-toolbar .tab-link.active i,
html.xv-dark-mode .xv-video-toolbar .tab-link.is-open i,
html.xv-dark-mode .xv-video-toolbar .tab-link.active .xv-btn-text,
html.xv-dark-mode .xv-video-toolbar .tab-link.is-open .xv-btn-text {
    color: #d00000 !important;
}

/* Rating meter bar in dark mode (subtle grey meter like XVideos) */
html.xv-dark-mode .rating-bar {
    background-color: #333333 !important;
}

html.xv-dark-mode .rating-bar-meter {
    background-color: #888888 !important;
}

/* Video Description & Comments Content */
html.xv-dark-mode .tab-content,
html.xv-dark-mode .video-actions-content,
html.xv-dark-mode .video-content-row,
html.xv-dark-mode .video-description,
html.xv-dark-mode #video-about,
html.xv-dark-mode #video-comment,
html.xv-dark-mode .video-comments,
html.xv-dark-mode #video-share {
    background-color: #141414 !important;
    background: #141414 !important;
    color: #cccccc !important;
    border-color: #222222 !important;
}

html.xv-dark-mode .video-description .desc,
html.xv-dark-mode .video-description p,
html.xv-dark-mode .video-content-row p {
    color: #aaaaaa !important;
}

html.xv-dark-mode .video-comments h3,
html.xv-dark-mode #comments-title {
    color: #ffffff !important;
}

html.xv-dark-mode textarea#comment,
html.xv-dark-mode input#author,
html.xv-dark-mode input#email,
html.xv-dark-mode input#url,
html.xv-dark-mode .form-control {
    background-color: #202020 !important;
    background: #202020 !important;
    color: #ffffff !important;
    border: 1px solid #353535 !important;
}

html.xv-dark-mode .comment-list .comment,
html.xv-dark-mode .comment-body {
    background-color: #1a1a1a !important;
    background: #1a1a1a !important;
    border: 1px solid #252525 !important;
    color: #cccccc !important;
}

html.xv-dark-mode .comment-author b,
html.xv-dark-mode .comment-author .fn,
html.xv-dark-mode .comment-author a {
    color: #ffffff !important;
}

html.xv-dark-mode .comment-metadata a,
html.xv-dark-mode .comment-content p {
    color: #bbbbbb !important;
}

/* Related Videos */
html.xv-dark-mode .related-videos,
html.xv-dark-mode .single-video-related {
    background-color: transparent !important;
}

html.xv-dark-mode .related-videos h3,
html.xv-dark-mode .related-videos h2 {
    color: #ffffff !important;
    border-color: #222222 !important;
}

/* 7. Category / Tag / Actor Pages & Hero Text */
html.xv-dark-mode .hero-text {
    border-color: #222222 !important;
}

html.xv-dark-mode .hero-text h1 {
    color: #ffffff !important;
}

html.xv-dark-mode .hero-text p {
    color: #888888 !important;
}

html.xv-dark-mode .tags-list a,
html.xv-dark-mode .tag-items a,
html.xv-dark-mode .tag-item a,
html.xv-dark-mode .tags-letter-block .tag-item a {
    background-color: #202020 !important;
    background: #202020 !important;
    color: #dddddd !important;
    border: 1px solid #303030 !important;
}

html.xv-dark-mode .tags-list a:hover,
html.xv-dark-mode .tag-items a:hover,
html.xv-dark-mode .tag-item a:hover,
html.xv-dark-mode .tags-letter-block .tag-item a:hover {
    background-color: #303030 !important;
    background: #303030 !important;
    border-color: #444444 !important;
    color: #ffffff !important;
}

/* 8. Filters & Sorting Dropdown */
html.xv-dark-mode #filters .filters-select {
    color: #ffffff !important;
}

html.xv-dark-mode #filters .filters-options {
    background-color: #1a1a1a !important;
    background: #1a1a1a !important;
    border: 1px solid #333333 !important;
}

html.xv-dark-mode #filters .filters-options span a {
    color: #cccccc !important;
}

html.xv-dark-mode #filters .filters-options span a:hover {
    background-color: #282828 !important;
    color: #ffffff !important;
}

/* 9. Pagination */
html.xv-dark-mode .pagination .page-link,
html.xv-dark-mode .pagination-lg .page-link,
html.xv-dark-mode .pagination .page-numbers {
    background-color: #1e1e1e !important;
    background: #1e1e1e !important;
    color: #cccccc !important;
    border: 1px solid #303030 !important;
}

html.xv-dark-mode .pagination .page-link:hover,
html.xv-dark-mode .pagination-lg .page-link:hover,
html.xv-dark-mode .pagination .page-numbers:hover {
    background-color: #303030 !important;
    border-color: #404040 !important;
    color: #ffffff !important;
}

html.xv-dark-mode .pagination .page-item.active .page-link,
html.xv-dark-mode .pagination .page-numbers.current {
    background-color: #d00000 !important;
    border-color: #d00000 !important;
    color: #ffffff !important;
}

/* 10. Footer in Dark Mode (Pure White Text & Links) */
html.xv-dark-mode #wrapper-footer,
html.xv-dark-mode footer.site-footer,
html.xv-dark-mode #colophon,
html.xv-dark-mode .site-info,
html.xv-dark-mode .footer-menu-container,
html.xv-dark-mode .footer-menu-container ul,
html.xv-dark-mode .footer-menu-container li {
    background: #0a0a0a !important;
    background-color: #0a0a0a !important;
    color: #ffffff !important;
    border-top-color: #1a1a1a !important;
}

html.xv-dark-mode #wrapper-footer a,
html.xv-dark-mode footer.site-footer a,
html.xv-dark-mode .footer-menu-container a,
html.xv-dark-mode .site-info a {
    color: #ffffff !important;
}

html.xv-dark-mode #wrapper-footer a:hover,
html.xv-dark-mode footer.site-footer a:hover,
html.xv-dark-mode .footer-menu-container a:hover,
html.xv-dark-mode .site-info a:hover {
    color: #ffffff !important;
    text-decoration: underline !important;
}

/* 11. Modals */
html.xv-dark-mode .modal-content {
    background-color: #1a1a1a !important;
    background: #1a1a1a !important;
    color: #e0e0e0 !important;
    border: 1px solid #333333 !important;
}

html.xv-dark-mode .modal-header {
    border-bottom: 1px solid #282828 !important;
}

html.xv-dark-mode .modal-title {
    color: #ffffff !important;
}

html.xv-dark-mode .modal-header .close {
    color: #ffffff !important;
    opacity: 0.8 !important;
    text-shadow: none !important;
}

html.xv-dark-mode .modal-body label {
    color: #cccccc !important;
}

html.xv-dark-mode .modal-body input {
    background-color: #242424 !important;
    border: 1px solid #383838 !important;
    color: #ffffff !important;
}

/* 12. Smooth Dark/Light Transition */
body,
.header-nav,
.xv-video-toolbar,
.video-about,
.video-comments,
.tab-link,
.video-cat-tag a.btn,
.video-block a.infos span.title,
.pagination .page-link {
    transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

/* ==========================================================================
   XVideos-Style "Show More Related Videos" Button & Section
   ========================================================================== */

.xv-related-title {
    font-size: 16px !important;
    font-weight: 700 !important;
    margin: 24px 0 12px 2px !important;
    padding: 0 4px !important;
    color: #111111 !important;
    letter-spacing: 0.2px !important;
    text-transform: uppercase !important;
    line-height: 1.3 !important;
}

html.xv-dark-mode .xv-related-title {
    color: #ffffff !important;
}

.xv-show-more-wrap {
    margin: 20px auto 35px;
    padding: 0 15px;
    width: 100%;
}

.xv-btn-show-more {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: auto !important;
    min-width: 180px !important;
    max-width: 250px !important;
    padding: 6px 14px !important;
    background-color: #e2e2e2 !important;
    background: #e2e2e2 !important;
    color: #222222 !important;
    border: 1px solid #cccccc !important;
    border-radius: 3px !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.3px !important;
    cursor: pointer !important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05) !important;
    transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease !important;
}

.xv-btn-show-more .xv-btn-text,
.xv-btn-show-more .xv-btn-loading {
    font-size: 11px !important;
    line-height: 1.4 !important;
}

.xv-btn-show-more:hover,
.xv-btn-show-more:focus {
    background-color: #d0d0d0 !important;
    background: #d0d0d0 !important;
    border-color: #b8b8b8 !important;
    color: #000000 !important;
    text-decoration: none !important;
}

.xv-btn-show-more.is-loading {
    opacity: 0.75;
    cursor: not-allowed !important;
}

/* Dark Mode: XVideos-style dark action button */
html.xv-dark-mode .xv-btn-show-more {
    background-color: #1c1c1c !important;
    background: #1c1c1c !important;
    color: #e4e4e4 !important;
    border: 1px solid #333333 !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.5) !important;
}

html.xv-dark-mode .xv-btn-show-more:hover,
html.xv-dark-mode .xv-btn-show-more:focus {
    background-color: #262626 !important;
    background: #262626 !important;
    border-color: #444444 !important;
    color: #ffffff !important;
}

/* Ensure all video thumbnails are immediately visible when loaded via AJAX */
.video-block .video-img.loaded,
.video-block .video-img.initial,
#xv-related-videos-grid .video-img,
.video-block .video-img[src]:not([src=""]) {
    opacity: 1 !important;
}

/* Hide the spinning loader once the image is present and visible */
.video-block .video-img.loaded ~ .lds-dual-ring,
.video-block .video-img.initial ~ .lds-dual-ring,
#xv-related-videos-grid .video-block .lds-dual-ring {
    opacity: 0 !important;
    visibility: hidden !important;
    display: none !important;
}

/* Ensure noscript thumbnail renders properly if JS is off */
.video-block a.thumb noscript img.video-img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 51;
}

/* ==========================================================================
   Collapsible Video Description (Inline + / - at End of Text like Tags)
   ========================================================================== */

.video-description {
    position: relative;
    margin-top: 14px;
    margin-bottom: 14px;
    font-size: 14px;
    line-height: 1.5;
}

.video-description .desc {
    display: inline;
    position: relative;
    font-size: 14px;
    line-height: 1.5;
}

/* Collapsed State: Show short text inline, Hide full text */
.video-description:not(.is-expanded) .xv-desc-short {
    display: inline !important;
}

.video-description:not(.is-expanded) .xv-desc-full {
    display: none !important;
}

/* Expanded State: Hide short text, Show full text */
.video-description.is-expanded .xv-desc-short {
    display: none !important;
}

.video-description.is-expanded .xv-desc-full {
    display: inline !important;
}

.video-description.is-expanded .xv-desc-full p {
    margin-bottom: 8px;
}

.video-description.is-expanded .xv-desc-full p:last-child {
    display: inline !important;
    margin-bottom: 0 !important;
}

/* Inline + / - Button Placed Seamlessly at End of Text (Matches Tags Button) */
.xv-btn-expand-desc {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    vertical-align: middle !important;
    height: 22px !important;
    min-width: 24px !important;
    padding: 0 6px !important;
    margin: 0 0 0 6px !important;
    background-color: #dcdcdc !important;
    background: #dcdcdc !important;
    border: none !important;
    color: #000000 !important;
    border-radius: 0 !important;
    cursor: pointer !important;
    line-height: 1 !important;
    box-shadow: none !important;
    outline: none !important;
    transition: background-color 0.15s ease-in-out !important;
}

.xv-btn-expand-desc:hover,
.xv-btn-expand-desc:focus {
    background-color: #cecece !important;
    background: #cecece !important;
    color: #000000 !important;
    outline: none !important;
    box-shadow: none !important;
}

.xv-btn-expand-desc i {
    font-size: 10px !important;
    line-height: 1 !important;
    color: #000000 !important;
}

/* Dark Mode: Pure black matching tags button */
html.xv-dark-mode .xv-btn-expand-desc {
    background-color: #000000 !important;
    background: #000000 !important;
    color: #ffffff !important;
    border: none !important;
}

html.xv-dark-mode .xv-btn-expand-desc:hover,
html.xv-dark-mode .xv-btn-expand-desc:focus {
    background-color: #222222 !important;
    background: #222222 !important;
    color: #ffffff !important;
}

html.xv-dark-mode .xv-btn-expand-desc i {
    color: #ffffff !important;
}

/* Short description: Never show button */
.video-description.is-short .xv-btn-expand-desc {
    display: none !important;
}

/* Native HTML5 Picture-in-Picture fallback hide */
video::-webkit-media-controls-picture-in-picture-button {
    display: none !important;
}