/* ==========================================================================
   VIBE DARK - new dark design for the "main" theme
   Loaded after all theme styles (see app/functions/functions.darkskin.php).
   Visitors can switch to the old light look with ?darkmode=2 (header toggle).
   ========================================================================== */
:root {
    --vd-bg: #0f0f0f;
    --vd-bg-2: #141414;
    --vd-surface: #181818;
    --vd-surface-2: #212121;
    --vd-surface-3: #2a2a2a;
    --vd-border: #272727;
    --vd-text: #f1f1f1;
    --vd-text-2: #aaaaaa;
    --vd-text-3: #717171;
    --vd-accent: #ff2d55;
    --vd-accent-2: #ff5c7a;
    --vd-link: #3ea6ff;
    --vd-radius: 12px;
}

/* ---------- base ---------- */
html, body { background: var(--vd-bg) !important; color: var(--vd-text) !important; }
body { font-family: "Roboto", "Segoe UI", Arial, sans-serif; -webkit-font-smoothing: antialiased; }
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4 { color: var(--vd-text) !important; }
a { color: var(--vd-text); }
a:hover, a:focus { color: var(--vd-accent-2); text-decoration: none; }
p, li, label, td, th, small, .help-block, .text-muted { color: inherit; }
.text-muted, .help-block, small { color: var(--vd-text-2) !important; }
hr { border-color: var(--vd-border) !important; }
::selection { background: var(--vd-accent); color: #fff; }
* { scrollbar-color: #3a3a3a transparent; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: #3a3a3a; border-radius: 10px; border: 2px solid var(--vd-bg); }
::-webkit-scrollbar-track { background: transparent; }

/* ---------- header ---------- */
.fixed-top, header, .fixed-top .row, #header {
    background-color: rgba(15, 15, 15, .96) !important;
    border-color: var(--vd-border) !important;
    box-shadow: none !important;
}
.fixed-top { border-bottom: 1px solid var(--vd-border) !important; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
a.logo, .logo, .logo a, .logo span { color: var(--vd-text) !important; font-weight: 700; letter-spacing: -.3px; }
.top-link, .top-link i, a.top-link, #show-sidebar i, a#show-sidebar, .top-info > a > i { color: var(--vd-text) !important; }
.top-link:hover, .top-link:hover i { color: var(--vd-accent-2) !important; }
a.top-link:before, .aaa > a:before { background-color: var(--vd-surface-3) !important; }
.top-separator { background: var(--vd-border) !important; }
#uplBtn, .btn-upload-now { background: var(--vd-accent) !important; border-radius: 50%; }
#uplBtn i { color: #fff !important; }

/* search */
.searchWidget .form-control, .searchWidget input {
    background: var(--vd-bg-2) !important;
    border: 1px solid #303030 !important;
    color: var(--vd-text) !important;
    border-radius: 40px 0 0 40px !important;
}
.searchWidget .form-control:focus { border-color: #1c62b9 !important; box-shadow: inset 0 1px 2px rgba(0,0,0,.4) !important; }
.searchWidget .search-button, .searchWidget .search-button button {
    background-color: var(--vd-surface-2) !important;
    border-color: #303030 !important;
    color: var(--vd-text) !important;
    border-radius: 0 40px 40px 0 !important;
}
#suggest-results ul { background: var(--vd-surface-2) !important; border-radius: var(--vd-radius); overflow: hidden; }
#suggest-results ul li { border-color: var(--vd-border) !important; }
#suggest-results ul li a { color: var(--vd-text) !important; }
#suggest-results ul li a:hover { background: var(--vd-surface-3) !important; }

/* ---------- left sidebar ---------- */
#sidebar, #sidebar .sidescroll { background: var(--vd-bg) !important; border-color: var(--vd-border) !important; }
.sidebar-nav, .sidebar-nav ul { border-color: var(--vd-border) !important; }
.sidebar-nav li { border-radius: 10px; margin: 1px 8px; border: 0 !important; }
.sidebar-nav a, .sidebar-nav li a, .sidebar-nav .icon, .sidebar-nav i { color: var(--vd-text) !important; }
.sidebar-nav li:hover { background: var(--vd-surface-2) !important; }
.sidebar-nav li.active, .sidebar-nav li.active:hover { background: var(--vd-surface-3) !important; }
.sidebar-nav li.active a, .sidebar-nav li.active .icon, .sidebar-nav li.active i, .sidebar-nav li.hlt i { color: var(--vd-accent) !important; }
.sidebar-nav .dropdown-menu { background: var(--vd-surface-2) !important; }
.sidebar-nav .dropdown-menu > li > a:hover { background: var(--vd-surface-3) !important; color: #fff !important; }
.sidebar-nav ul a img { border-color: var(--vd-border) !important; border-radius: 50%; }
.sidebar-nav h4, .sidebar-nav .nav-header, .sidebar-specials h4 { color: var(--vd-text-2) !important; }
.user-profile-link-side a { background-color: var(--vd-surface-2) !important; color: var(--vd-text) !important; border-radius: 10px; }

/* ---------- cards / video grid ---------- */
.video, .video-inner, #ChannelResults .video-inner, .img-inner, .image-item, .song { background: transparent !important; border-color: transparent !important; }
.video-thumb, #SearchResults .video-thumb, #SearchResults .video-thumb img, .thumb { background: var(--vd-surface-2) !important; border-radius: var(--vd-radius) !important; overflow: hidden; }
.video-thumb img, .clip img { transition: transform .3s ease; }
.video:hover .video-thumb img, .item-post:hover .clip img { transform: scale(1.04); }
.video h4 a, .video-title a, #SearchResults .video h4 a, #profile-body .video h4 a, .body-premiumhub .video h4 a,
.image-item .image-title a, .song h4, .isMultimedia h5 { color: var(--vd-text) !important; font-weight: 500; }
.video h4 a:hover, .video-title a:hover { color: var(--vd-accent-2) !important; }
.video .stats, .video .stats li, .video .stats a, .uploaderlink a, .video-data .stats li { color: var(--vd-text-2) !important; }
.video .stats a:hover { color: var(--vd-text) !important; }
.timer, .thumb .timer, .video-thumb .timer { background: rgba(0,0,0,.82) !important; color: #fff !important; border-radius: 4px; font-weight: 500; }
.video-thumb .laterit, .related .laterit { background: rgba(0,0,0,.7); border-radius: 6px; }

/* headings of blocks */
.loop-heading, h1.loop-heading { color: var(--vd-text) !important; border: 0 !important; font-weight: 700; font-size: 20px; letter-spacing: -.2px; }
.loop-heading span { color: var(--vd-text) !important; border: 0 !important; background: transparent !important; }
.loop-heading a, .home-seeall { color: var(--vd-link) !important; font-size: 14px; font-weight: 500; margin-left: 10px; }
.loop-heading a:hover, .home-seeall:hover { color: #fff !important; }
.loop-content { border-color: var(--vd-border) !important; }
#home-content .loop-content { margin-bottom: 18px; padding-bottom: 12px; border-bottom: 1px solid var(--vd-border) !important; }
p.empty-content { background: var(--vd-surface) !important; border-color: var(--vd-border) !important; color: var(--vd-text-2) !important; border-radius: var(--vd-radius); }

/* skeleton loaders */
.vpreload > span, .prelist > span, .prelist-right > span, .prelist-left > span {
    background: #1f1f1f !important;
    background-image: linear-gradient(90deg, #1f1f1f 8%, #2a2a2a 18%, #1f1f1f 33%) !important;
    background-size: 800px 104px !important;
}

/* ---------- boxes, panels, widgets ---------- */
.isBoxed, .oboxed, .panel, .panel-body, .panel-heading, .panel-footer, .widget, .well, .p-profile .widget-header, .p-profile .widget-footer,
.page-aside, .page-aside .page-aside-inner, .page-aside-switch, .chat-box, .app-message-chats, .app-message-input, .emoji-holder,
.list-header, .blog-image, .blog-holder .jssocials-shares, .alertable, .p-image .playlistvibe, .black-slider, .vTrends, .cats {
    background-color: var(--vd-surface) !important;
    border-color: var(--vd-border) !important;
    color: var(--vd-text) !important;
}
.isBoxed, .panel, .widget, .well { border-radius: var(--vd-radius) !important; box-shadow: none !important; }
.BoxedFooter, .item-in-list, .img-owner, .playlist-head, .red-nav, .red-nav li, .red-nav li.active, .p-manager h1, .user-container.bottom20.top20,
.app-message-chats .conv-user-header, .body-channels #ChannelResults .video { border-color: var(--vd-border) !important; }
.red-nav li a { color: var(--vd-text-2) !important; }
.red-nav li.active a, .red-nav li a:hover { color: var(--vd-text) !important; }
.red-nav li.active { border-bottom: 2px solid var(--vd-text) !important; }

/* ---------- forms ---------- */
.form-control, input[type="text"], input[type="email"], input[type="password"], input[type="number"], input[type="search"], input[type="url"],
textarea, select, .minict_wrapper, .tagsinput, .emoj, .emoj.form-control, .emoj .emoj-editor, .input-group-addon, .withtags {
    background-color: var(--vd-bg-2) !important;
    border-color: #303030 !important;
    color: var(--vd-text) !important;
    box-shadow: none !important;
}
.form-control:focus, textarea:focus, input:focus, select:focus { border-color: var(--vd-link) !important; outline: none; }
.form-control::placeholder, textarea::placeholder, input::placeholder { color: var(--vd-text-3) !important; }
.input-group-addon { color: var(--vd-text-2) !important; }
select option { background: var(--vd-surface-2); color: var(--vd-text); }
.minict_wrapper ul, .minict_wrapper ul li, .minict_wrapper ul li.minict_empty, .minict_wrapper ul li.disabled { background: var(--vd-surface-2) !important; border-color: var(--vd-border) !important; color: var(--vd-text) !important; }
.minict_wrapper ul li:hover, .minict_wrapper ul li.selected, .minict_wrapper ul li.highlighted { background: var(--vd-surface-3) !important; color: #fff !important; }
.minict_wrapper ul li.minict_group { background: var(--vd-surface) !important; color: var(--vd-text-2) !important; }
.minict_wrapper:after, .minict_wrapper .minict_reset { color: var(--vd-text-2) !important; }
.tagsinput span.tag { background: var(--vd-surface-3) !important; color: var(--vd-text) !important; border: 0 !important; }
.not_valid { background: #3a1a20 !important; }
#dropzoned, .dropzoned { border: 2px dashed #3a3a3a !important; background: var(--vd-surface) !important; border-radius: var(--vd-radius); }
.uploading { background-color: var(--vd-surface-3) !important; }
.uploading .upload-bar { background: var(--vd-accent) !important; }
.ckbx-switch label:before, .ckbx-switch input[type="checkbox"]:checked + label:before { background: var(--vd-surface-3) !important; }

/* ---------- buttons ---------- */
.btn { border-radius: 20px !important; font-weight: 500; }
.btn-default, .btn-default:focus, .button, .btn-outline.btn-default {
    background: var(--vd-surface-2) !important;
    border: 1px solid var(--vd-surface-2) !important;
    color: var(--vd-text) !important;
}
.btn-default:hover, .button:hover, .btn-outline.btn-default:hover, .btn-default.active { background: var(--vd-surface-3) !important; border-color: var(--vd-surface-3) !important; color: #fff !important; }
.btn-primary, .btn-primary:focus { background: var(--vd-accent) !important; border-color: var(--vd-accent) !important; color: #fff !important; }
.btn-primary:hover, .btn-primary:active { background: var(--vd-accent-2) !important; border-color: var(--vd-accent-2) !important; }
.btn-danger { background: #c62828 !important; border-color: #c62828 !important; }
.btn-success { background: #2e7d32 !important; border-color: #2e7d32 !important; }

/* ---------- dropdowns, modals, tooltips, tabs, tables ---------- */
.dropdown-menu, .dropdown-menu > .drop-head, .dropdown-menu > .drop-footer, .popover, .emoj .emoj-picker,
.dropdown-menu.textcomplete-dropdown[data-strategy="emoj"], .emoj .emoj-picker .emoj-scroll-area .emoj-category-title {
    background-color: var(--vd-surface-2) !important;
    border-color: var(--vd-border) !important;
    color: var(--vd-text) !important;
    box-shadow: 0 8px 30px rgba(0,0,0,.5) !important;
}
.dropdown-menu { border-radius: var(--vd-radius) !important; overflow: hidden; }
.dropdown-menu > li > a, .dropdown-menu li a { color: var(--vd-text) !important; border-color: var(--vd-border) !important; }
.dropdown-menu > li > a:hover, .dropdown-menu > li > a:focus { background: var(--vd-surface-3) !important; color: #fff !important; }
.dropdown-menu .divider { background: var(--vd-border) !important; }
.emoj .emoj-picker .emoj-filters { background: var(--vd-surface) !important; }
.emoj .emoj-picker .emoj-filters .emoj-filter.active, .emoj .emoj-picker .emoj-scroll-area .emojibtn:hover { background: var(--vd-surface-3) !important; }
.modal-content { background: var(--vd-surface) !important; color: var(--vd-text) !important; border: 1px solid var(--vd-border) !important; border-radius: 16px !important; }
.modal-header, .modal-footer { border-color: var(--vd-border) !important; }
.modal-backdrop.in { opacity: .75 !important; }
.close { color: var(--vd-text) !important; text-shadow: none !important; opacity: .7; }
.nav-tabs { border-color: var(--vd-border) !important; }
.nav-tabs > li > a { color: var(--vd-text-2) !important; border-color: transparent !important; }
.nav-tabs > li.active > a, .nav-tabs > li.active > a:hover, .nav-tabs > li > a:hover { background: transparent !important; color: var(--vd-text) !important; border-color: transparent transparent var(--vd-text) !important; }
.p-dashboard #DashSidebar .nav-tabs-vertical .nav-tabs, .p-manager #DashSidebar .nav-tabs-vertical .nav-tabs { border-color: var(--vd-border) !important; background: var(--vd-surface) !important; }
.table, .table > thead > tr > th, .table > tbody > tr > td { border-color: var(--vd-border) !important; color: var(--vd-text) !important; }
.table-striped > tbody > tr:nth-of-type(odd) { background: var(--vd-surface) !important; }
.list-group-item { background: var(--vd-surface) !important; border-color: var(--vd-border) !important; color: var(--vd-text) !important; }
.app-message-list .list-group .list-group-item:hover, .app-message-list .list-group .list-group-item.active { background: var(--vd-surface-3) !important; }
.pagination > li > a, .pagination > li > span { background: var(--vd-surface-2) !important; border-color: var(--vd-border) !important; color: var(--vd-text) !important; }
.pagination > .active > a, .pagination > .active > span { background: var(--vd-accent) !important; border-color: var(--vd-accent) !important; }
.tooltip-inner { background: #3a3a3a !important; }
.label-default, .badge { background: var(--vd-surface-3) !important; }
.msg-info, .msg-win, .msg-warning, .alert { border-radius: var(--vd-radius) !important; border: 0 !important; }
.msg-info, .alert-info { background: #0e2a44 !important; color: #cfe6ff !important; }
.msg-win, .alert-success { background: #0f3320 !important; color: #c8f2d8 !important; }
.msg-warning, .alert-warning, .alert-danger { background: #3a1a1a !important; color: #ffd4d4 !important; }
#toast-container > div { border-radius: var(--vd-radius) !important; box-shadow: 0 8px 30px rgba(0,0,0,.5) !important; opacity: 1 !important; }

/* ---------- video page ---------- */
body.body-video.isdevice.noheader #video-content, .video-holder.gofullscreen { background: #000 !important; }
.video-holder, #video-content .video-player { border-radius: var(--vd-radius); overflow: hidden; }
.video-under h1, #media-info h1 { color: var(--vd-text) !important; font-size: 20px; font-weight: 700; line-height: 1.35; }
#media-info, .user-media-actions, .user-container, a#revealDesc, a#revealRelated { border-color: var(--vd-border) !important; }
.user-media-actions a, .user-media-actions a i, .like-views, .statistics > li > span, .cctotal { color: var(--vd-text) !important; }
.user-media-actions a:hover, .user-media-actions a:hover i { color: #fff !important; }
.likes-bar, .achip, .likes-holder, .vibe-interactions .aaa > a {
    background: var(--vd-surface-2) !important;
    border: 0 !important;
    color: var(--vd-text) !important;
    border-radius: 20px !important;
}
.likes-bar .likes-success { background: var(--vd-text) !important; }
.likes-danger { background-color: var(--vd-text-3) !important; }
.isLiked i, i.isActive { color: var(--vd-accent) !important; }
.user-box h3, .user-box h3 a, .user-box-txt a { color: var(--vd-text) !important; }
.user-box-numbers, .user-box-txt p { color: var(--vd-text-2) !important; }
.video-description, #media-description {
    background: var(--vd-surface-2) !important;
    color: var(--vd-text) !important;
    border-radius: var(--vd-radius) !important;
    padding: 12px 14px;
}
#media-description a, .thetags a { color: var(--vd-link) !important; }
.thetags a { background: var(--vd-surface-3); border-radius: 14px; padding: 3px 10px; margin: 0 4px 4px 0; display: inline-block; }
.share-body li a { color: var(--vd-text) !important; }
.video-share .form-control { border-radius: 10px !important; }

/* right column / related */
.video-under-right, .rur, .related, .video-related, .related-with-list { background: transparent !important; border-color: var(--vd-border) !important; }
.video-related > ul > li, .video-related > ul > li:first-child { border-color: transparent !important; }
.video-related li, .video-related .item-post { border-radius: 10px; transition: background .15s; }
.video-related li:hover { background: var(--vd-surface) !important; }
.video-related .data .title a, .video-related li a, .video-player-sidebar .data .title a { color: var(--vd-text) !important; font-weight: 500; }
.video-related li:hover .data .title a { color: #fff !important; }
.video-related .usermeta, .video-related .usermeta a, .video-related .usermeta p, .video-player-sidebar .data .usermeta a { color: var(--vd-text-2) !important; }
.video-related .thumb, .video-related .clip { border-radius: 10px !important; overflow: hidden; }
.PlayUP { background: transparent !important; color: var(--vd-text) !important; border-color: var(--vd-border) !important; }
.video-player-sidebar, .player-in-list, .playlistvibe { background: var(--vd-surface) !important; border-radius: var(--vd-radius); }
.video-player-sidebar li.playingNow, .video-player-sidebar li:hover, .playlist-page-videos li:hover { background: var(--vd-surface-3) !important; }
.playlist-page-videos ol li { border-color: var(--vd-border) !important; }
.playlist-listing-title, .playlist-listing-title a { color: var(--vd-text) !important; }

/* comments */
.comments li .name, .comments li .name a { color: var(--vd-text) !important; font-weight: 600; }
.comments li .message .body { color: var(--vd-text) !important; }
.comments .msg-footer a, .comments .msg-footer i, .reply .addEmComment { color: var(--vd-text-2) !important; }
.comments .msg-footer > li:hover a, .comments .msg-footer > li:hover > a > i { color: var(--vd-text) !important; }
.comments img.avatar { border: 0 !important; border-radius: 50%; }
li.indanger { background: #2a1a1a !important; }

/* ---------- profile / channels / blog ---------- */
.p-profile .profile-user, .profile-hero .cute h1 { color: var(--vd-text) !important; }
.user-timeline .user-timeline-time, .user-timeline:before { background-color: var(--vd-surface-3) !important; color: var(--vd-text) !important; }
.user-timeline .user-timeline-icon:after, .user-timeline .t-item:before { background: var(--vd-bg) !important; }
.user-small-list img, .cats img { border-color: var(--vd-border) !important; }
.blog-holder, .blog-post, .post-content { color: var(--vd-text) !important; }
.statistics > li { color: var(--vd-text-2) !important; }

/* ---------- misc ---------- */
.backtotop { background: var(--vd-surface-2) !important; border-radius: 50%; }
.backtotop i { color: var(--vd-text) !important; }
.infinite-scroll-error { background: var(--vd-surface) !important; color: var(--vd-text-2) !important; border-radius: var(--vd-radius); }
.loadspinner:after, .cp-spinner, .cp-flip { background: var(--vd-accent) !important; }
.error-info h3, .error-info h4 { color: var(--vd-text-2) !important; }
.validarium-error { color: #ff6b6b !important; }

/* ---------- footer ---------- */
#footer, #footer .footer-holder, .footer-holder, .footer-inner { background: var(--vd-bg) !important; border-top: 1px solid var(--vd-border) !important; color: var(--vd-text-2) !important; }
#footer a { color: var(--vd-text-2) !important; }
#footer a:hover { color: var(--vd-text) !important; }

/* ---------- shorts on dark ---------- */
.shorts-shelf .loop-heading span:before { content: ""; display: inline-block; width: 4px; height: 18px; background: var(--vd-accent); border-radius: 2px; margin-right: 10px; vertical-align: -2px; }
.short-card .short-thumb { box-shadow: 0 6px 20px rgba(0,0,0,.4); }
.short-card .short-title { color: var(--vd-text); }
.short-card .short-views, .vside-short .vs-views, .vl-views { color: var(--vd-text-2); opacity: 1 !important; }
.shorts-upload-box { border-color: #3a3a3a !important; background: var(--vd-surface); }
.vside-title { color: var(--vd-text) !important; }
.vside-title a { color: var(--vd-link) !important; }
.vside-title a.vside-owner { color: var(--vd-text) !important; }
.vside-list a:hover .vl-title { color: #fff; }

/* ---------- small screens ---------- */
@media (max-width: 767px) {
    .loop-heading, h1.loop-heading { font-size: 18px; }
    .video-thumb, .thumb { border-radius: 10px !important; }
}