
/* xFlixer 2026 UI Kit */
:root {
  --xf-bg: #0b0b0e;
  --xf-surface: #141419;
  --xf-surface-2: #1b1b21;
  --xf-border: rgba(255,255,255,.08);
  --xf-text: #f5f7fb;
  --xf-muted: #a9afbf;
  --xf-accent: #ff5f45;
  --xf-accent-2: #ff2f7d;
  --xf-chip: #23242b;
  --xf-success: #31d07f;
  --xf-radius: 18px;
  --xf-shadow: 0 16px 40px rgba(0,0,0,.28);
}
html, body { background: var(--xf-bg) !important; color: var(--xf-text) !important; font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important; }
body { line-height: 1.45; }
a { color: inherit; }
a:hover { color: #fff; text-decoration: none; }
img { max-width: 100%; height: auto; }
.container, .container-lg { max-width: 1360px; }
.body-gradient, .bg-darken, .hero:before, .hero:after { display:none !important; }
#content { position: relative; z-index: 1; }
.site { overflow-x: clip; }

/* Header */
#wrapper-navbar { position: sticky; top: 0; z-index: 1000; background: rgba(9,9,12,.92); backdrop-filter: blur(14px); border-bottom: 1px solid var(--xf-border); }
.xf-topbar { display:flex; align-items:center; gap: 18px; padding: 16px 0; }
.xf-brand-wrap { display:flex; align-items:center; gap: 12px; min-width: 220px; }
.navbar-brand, .navbar-brand a { font-weight: 800 !important; letter-spacing: -.03em; color: #fff !important; font-size: 2rem !important; margin:0; }
.custom-logo-link img { max-height: 44px; width: auto; }
.xf-brand-badge { display:inline-flex; align-items:center; justify-content:center; width: 42px; height: 42px; border-radius: 14px; background: linear-gradient(135deg,var(--xf-accent),var(--xf-accent-2)); color:#fff; font-weight:800; box-shadow: var(--xf-shadow); }
.xf-inline-search { flex: 1 1 auto; }
.xf-inline-search .search-form { display:flex; align-items:center; background:#0f1015; border:1px solid rgba(255,255,255,.12); border-radius: 999px; padding: 8px 14px; gap: 10px; }
.xf-inline-search .search-form:before { content:"\f002"; font-family: FontAwesome; color: var(--xf-muted); font-size: 16px; }
.xf-inline-search .search-field { background: transparent !important; border: 0 !important; box-shadow:none !important; color:#fff !important; font-size: 1rem; width:100%; min-width:180px; }
.xf-inline-search .search-field::placeholder { color:#9399a7; }
.xf-header-actions { display:flex; align-items:center; gap: 12px; }
.xf-header-btn { display:inline-flex; align-items:center; justify-content:center; min-height: 46px; padding: 0 18px; border-radius: 999px; font-weight: 700; border:1px solid rgba(255,255,255,.12); background:#181920; color:#fff; }
.xf-header-btn--accent { background: linear-gradient(135deg,var(--xf-accent),var(--xf-accent-2)); border-color: transparent; }
.xf-subnav { border-top: 1px solid rgba(255,255,255,.06); }
.xf-subnav-inner { display:flex; align-items:center; gap: 12px; min-height: 56px; }
.xf-subnav .navbar { padding: 0; width: 100%; background: transparent !important; }
.xf-subnav .navbar-nav { gap: 10px; }
.xf-subnav .navbar-dark .navbar-nav .nav-link { color:#f2f4f8 !important; font-weight: 600; padding: 10px 0 !important; font-size: 1rem; }
.xf-subnav-cta { margin-left:auto; display:flex; align-items:center; gap:10px; color:#fff; font-weight:700; }
.xf-subnav-cta a { opacity:.9; }
.xf-subnav-cta a:hover { opacity:1; }
.header-search-form { display:none !important; }
.navbar-toggler { border: 0 !important; box-shadow:none !important; }

/* Hero and page wrappers */
.hero { background: transparent !important; min-height: auto !important; padding: 0 !important; margin: 0 !important; }
.xf-page-shell { padding: 24px 0 36px; }
.xf-page-grid { display:grid; grid-template-columns: 260px minmax(0,1fr); gap: 22px; align-items:start; }
.xf-surface { background: linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.02)); border:1px solid var(--xf-border); border-radius: 24px; box-shadow: var(--xf-shadow); }
.xf-page-head { display:flex; align-items:center; justify-content:space-between; gap:16px; padding: 8px 6px 20px; }
.xf-page-head h1, .page-title, .hero h1 { color:#fff !important; font-size: 2.15rem !important; line-height: 1.05; font-weight: 800 !important; letter-spacing: -.03em; margin:0 !important; }
.xf-page-subtitle, .taxonomy-description, .hero-desc { color: var(--xf-muted) !important; max-width: 820px; font-size: 1rem; margin-top:8px; }
.xf-toolbar { display:flex; align-items:center; gap: 10px; flex-wrap: wrap; }
.xf-chip { display:inline-flex; align-items:center; gap:8px; padding: 9px 14px; border-radius: 999px; background: var(--xf-chip); color:#fff; border:1px solid rgba(255,255,255,.08); font-size:.95rem; }
.xf-chip.active, .xf-chip:hover { background: linear-gradient(135deg, rgba(255,95,69,.16), rgba(255,47,125,.16)); border-color: rgba(255,95,69,.45); }
.xf-chip i { opacity:.7; }

/* Sidebar */
.xf-sidebar { position: sticky; top: 128px; padding: 18px; }
.xf-sidebar-block + .xf-sidebar-block { margin-top: 18px; padding-top: 18px; border-top: 1px solid rgba(255,255,255,.06); }
.xf-sidebar-title { font-size: .82rem; text-transform: uppercase; letter-spacing: .08em; color:#8d94a5; margin: 0 0 12px; font-weight: 700; }
.xf-sidebar-list, .xf-sidebar-cats { list-style: none; padding:0; margin:0; display:grid; gap: 6px; }
.xf-sidebar-list a, .xf-sidebar-cats a { display:flex; align-items:center; justify-content:space-between; gap:12px; min-height: 42px; padding: 0 12px; border-radius: 12px; color:#e9edf5; background: transparent; transition: all .2s ease; }
.xf-sidebar-list a:hover, .xf-sidebar-cats a:hover { background: rgba(255,255,255,.06); }
.xf-sidebar-list i { width: 18px; text-align:center; opacity:.75; margin-right:10px; }
.xf-sidebar-list .label { display:flex; align-items:center; }
.xf-sidebar-count { color:#7f879a; font-size:.84rem; }
.xf-sidebar-search { margin-bottom: 10px; }
.xf-sidebar-search input { width:100%; min-height: 44px; background:#111218; color:#fff; border:1px solid rgba(255,255,255,.08); border-radius: 14px; padding: 0 14px; }

/* Grid + cards */
.video-loop { min-width: 0; }
.video-loop > .row, .video-loop > .row > .col-12 > .row, .row.no-gutters { margin-left: -8px !important; margin-right: -8px !important; }
.video-loop [class*="col-"] { padding-left:8px !important; padding-right:8px !important; margin-bottom: 16px; }
.video-block-happy, .happy-section { display:none !important; }
.video-block { background: transparent; border-radius: 0; overflow: visible; }
.video-block .thumb { position: relative; display:block; overflow:hidden; border-radius: 16px; background: #111218; aspect-ratio: 16/9; box-shadow: var(--xf-shadow); }
.video-block .thumb:after { content:""; position:absolute; inset:0; background: linear-gradient(180deg, transparent 45%, rgba(0,0,0,.28) 100%); opacity:.9; pointer-events:none; }
.video-block .video-img { width:100%; height:100%; object-fit: cover; transition: transform .35s ease; }
.video-block:hover .video-img { transform: scale(1.04); }
.video-block .infos { display:block; padding: 10px 2px 0; }
.video-block .title { display:-webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow:hidden; color:#fff; font-size: 1.02rem; line-height: 1.25; font-weight: 700; margin-bottom: 6px; }
.video-datas { display:flex; align-items:center; gap: 12px; flex-wrap:wrap; color: var(--xf-muted); font-size:.88rem; }
.video-datas i { opacity:.75; }
.video-datas .duration { position:absolute; right:10px; bottom:10px; z-index:3; min-width: 52px; text-align:center; padding: 5px 8px; border-radius: 999px; background: rgba(0,0,0,.72); color:#fff; font-weight:700; font-size:.78rem; }
.video-block .thumb-badges { position:absolute; left:10px; top:10px; z-index:3; display:flex; gap:8px; flex-wrap:wrap; }
.video-block .thumb-badge { background: rgba(0,0,0,.72); color:#fff; border:1px solid rgba(255,255,255,.12); border-radius: 999px; padding: 4px 8px; font-size: .72rem; font-weight:700; }
.video-block .thumb-badge--accent { background: linear-gradient(135deg,var(--xf-accent),var(--xf-accent-2)); border-color: transparent; }
.video-block .video-meta-secondary { margin-top: 6px; color:#7f879a; font-size:.84rem; }
.video-block.video-block-cat .thumb { aspect-ratio: 1.55/1; }
.video-block.video-block-cat .title { font-size: 1rem; }
.video-block.video-block-cat .video-datas { font-size:.86rem; }
.no-thumb { background: linear-gradient(135deg, #1d1e26, #14151c); width:100%; height:100%; }
.lds-dual-ring, .video-debounce-bar, .video-preview { z-index: 4; }

/* Categories page */
.xf-alpha-nav { display:flex; flex-wrap:wrap; gap: 10px; margin: 4px 0 18px; }
.xf-category-groups { display:flex; flex-wrap:wrap; gap: 12px; margin-bottom: 24px; }
.xf-category-grid { display:grid; grid-template-columns: repeat(5, minmax(0,1fr)); gap: 16px; }
.xf-category-card { position:relative; overflow:hidden; border-radius: 18px; min-height: 180px; background:#121319; border:1px solid var(--xf-border); box-shadow: var(--xf-shadow); }
.xf-category-card img { width:100%; height:100%; object-fit:cover; }
.xf-category-card:after { content:""; position:absolute; inset:0; background: linear-gradient(180deg, rgba(0,0,0,0) 40%, rgba(0,0,0,.82) 100%); }
.xf-category-card .xf-category-name, .xf-category-card .xf-category-count { position:absolute; left:16px; z-index:2; color:#fff; }
.xf-category-card .xf-category-name { bottom: 34px; font-size:1.06rem; font-weight:800; }
.xf-category-card .xf-category-count { bottom: 14px; color:#cfd6e4; font-size:.86rem; }

/* Footer */
#wrapper-footer { border-top: 1px solid rgba(255,255,255,.06); background: #0a0a0d; margin-top: 30px; }
.site-footer { padding: 28px 0; color:#9aa1b1; }
.site-footer a { color:#dde3f0; }

/* Search/archive default */
.page-header { margin: 0 0 20px; }
.pagination, .wp-pagenavi { margin-top: 20px; }
.pagination .page-item .page-link, .wp-pagenavi a, .wp-pagenavi span { background:#14161d; border:1px solid rgba(255,255,255,.08); color:#fff; border-radius: 12px !important; }

/* Responsive */
@media (max-width: 1199.98px) {
  .xf-page-grid { grid-template-columns: 1fr; }
  .xf-sidebar { position: static; }
  .xf-category-grid { grid-template-columns: repeat(3, minmax(0,1fr)); }
}
@media (max-width: 991.98px) {
  .xf-topbar { flex-wrap: wrap; }
  .xf-brand-wrap { min-width: unset; }
  .xf-inline-search { order: 3; width:100%; flex-basis:100%; }
  .xf-subnav-inner { flex-wrap: wrap; padding: 8px 0 10px; }
  .xf-subnav .navbar-collapse { width:100%; }
  .xf-subnav .navbar-nav { padding: 8px 0; }
  .xf-subnav-cta { margin-left:0; width:100%; justify-content:flex-start; }
}
@media (max-width: 767.98px) {
  .xf-page-shell { padding-top: 16px; }
  .xf-page-head { flex-direction: column; align-items:flex-start; }
  .xf-page-head h1, .page-title, .hero h1 { font-size: 1.6rem !important; }
  .xf-header-actions { width:100%; }
  .xf-header-btn { flex:1 1 auto; }
  .xf-category-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .video-loop [class*="col-"] { margin-bottom: 12px; }
}


/* Header cleanup + ad bar */
.xf-header-actions { justify-content:flex-end; min-width: 150px; }
.xf-header-icon { display:inline-flex; align-items:center; justify-content:center; width:46px; height:46px; border-radius:999px; border:1px solid rgba(255,255,255,.12); background:#181920; color:#fff; font-size:1rem; }
.xf-header-icon:hover { background: rgba(255,255,255,.08); color:#fff; }
.xf-header-btn { display:none !important; }
.xf-subnav { display:none !important; }
.xf-adbar { border-top: 1px solid rgba(255,255,255,.06); border-bottom: 1px solid rgba(255,255,255,.06); background: linear-gradient(90deg, rgba(255,95,69,.14), rgba(255,47,125,.1), rgba(255,95,69,.14)); }
.xf-adbar-inner { min-height: 58px; display:grid; grid-template-columns: auto 1fr auto; align-items:center; gap: 16px; }
.xf-adbar-label { display:inline-flex; align-items:center; justify-content:center; min-width: 88px; height: 34px; padding: 0 14px; border-radius: 999px; background: rgba(255,255,255,.12); color:#fff; font-size:.76rem; font-weight:800; text-transform: uppercase; letter-spacing:.08em; }
.xf-adbar-copy { color:#fff; font-weight:600; line-height:1.35; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.xf-adbar-actions { display:flex; align-items:center; gap: 10px; }
.xf-adbar-btn { display:inline-flex; align-items:center; justify-content:center; min-height: 38px; padding: 0 16px; border-radius: 999px; background: rgba(255,255,255,.1); color:#fff; font-weight:700; border:1px solid rgba(255,255,255,.14); }
.xf-adbar-btn--accent { background: linear-gradient(135deg,var(--xf-accent),var(--xf-accent-2)); border-color: transparent; }
.video-meta-secondary { display:none !important; }
.author, .byline, .posted-by, .vendor, .product_meta .posted_in, .product_meta .sku_wrapper, .product_meta .tagged_as { display:none !important; }
@media (max-width: 991.98px) {
  .xf-adbar-inner { grid-template-columns: 1fr; gap: 10px; padding: 12px 0; }
  .xf-adbar-copy { white-space: normal; }
  .xf-adbar-actions { width:100%; }
  .xf-adbar-btn { flex:1 1 auto; }
}




/* xFlixer mobile + clean UI update */
@media (max-width: 991px){
  .container, .wrap, .content, .site-content, .page-wrap {max-width: 100% !important; padding-left: 12px !important; padding-right: 12px !important;}
  .videos, .video-list, .posts, .thumbs, .archive-videos, .row {display:flex !important; flex-wrap:wrap !important; gap:12px !important;}
  .video-item, .video-card, .post, .thumb, article {width:calc(50% - 6px) !important; margin:0 !important;}
  .sidebar, aside, .left-sidebar, .right-sidebar {display:none !important;}
  .site-header, header {padding:10px 12px !important;}
  .site-branding img, .logo img {max-height:36px !important; width:auto !important;}
  .header-search input, .search-form input[type="text"], .search-form input[type="search"] {height:44px !important; font-size:16px !important;}
  .video-card .title, .video-title, .entry-title, h2.entry-title, h3.entry-title {
    font-size:14px !important; line-height:1.3 !important; 
    display:-webkit-box !important; -webkit-line-clamp:2 !important; -webkit-box-orient:vertical !important;
    overflow:hidden !important; text-overflow:ellipsis !important; min-height:2.6em !important; max-height:2.6em !important;
  }
  .main-navigation, .top-nav, .primary-menu {overflow-x:auto !important; white-space:nowrap !important; scrollbar-width:none;}
  .main-navigation::-webkit-scrollbar, .top-nav::-webkit-scrollbar, .primary-menu::-webkit-scrollbar {display:none;}
}

/* Extra small screens */
@media (max-width: 640px){
  .video-item, .video-card, .post, .thumb, article {width:100% !important;}
  .grid, .video-grid, .post-grid {grid-template-columns:1fr !important;}
  .ad-bar, .promo-bar {font-size:13px !important; padding:8px 10px !important;}
  .site-header .actions, .header-actions {gap:8px !important;}
}

/* Hide upload, views, reactions, vendor/author clutter */
a[href*="upload"], .upload, .upload-btn, .menu-upload, .nav-upload, .header-upload, .user-upload, .submit-video, .add-video {display:none !important;}
.views, .view-count, .video-views, .post-views, .meta-views, .views-count, [class*="view"], [id*="view"] {display:none !important;}
.reactions, .reaction, .likes, .dislikes, .rating, .emoji-react, .post-reactions, .video-reactions, .reaction-buttons, .like-btn, .dislike-btn {display:none !important;}
.author, .byline, .vendor, .posted-by, .meta-author, .post-author, .video-author, .uploader, .channel-name {display:none !important;}

/* Clamp titles sitewide */
.video-card .title, .video-title, .entry-title, h1.entry-title, h2.entry-title, h3.entry-title, .post-title, .thumb-title {
  display:-webkit-box !important;
  -webkit-line-clamp:2 !important;
  -webkit-box-orient:vertical !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
  word-break:break-word !important;
}



/* xFlixer duration timer on post/video cards */
.video-block .thumb,
.video-card .thumb,
.post .thumb,
.thumb {
  position: relative !important;
}

.video-block .duration,
.video-card .duration,
.post .duration,
.thumb .duration,
span.duration {
  position: absolute !important;
  right: 8px !important;
  bottom: 8px !important;
  z-index: 8 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 52px !important;
  padding: 4px 8px !important;
  border-radius: 999px !important;
  background: rgba(0,0,0,.82) !important;
  color: #fff !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  letter-spacing: .02em !important;
  box-shadow: 0 6px 18px rgba(0,0,0,.35) !important;
  border: 1px solid rgba(255,255,255,.12) !important;
}

.video-block .duration::before,
.video-card .duration::before,
.post .duration::before,
.thumb .duration::before,
span.duration::before {
  content: "⏱";
  font-size: 11px;
  margin-right: 5px;
  opacity: .95;
}

@media (max-width: 640px){
  .video-block .duration,
  .video-card .duration,
  .post .duration,
  .thumb .duration,
  span.duration {
    right: 6px !important;
    bottom: 6px !important;
    padding: 4px 7px !important;
    font-size: 11px !important;
    min-width: 48px !important;
  }
}



/* xFlixer mobile v3 polish */
@media (max-width: 768px){

  html, body {
    overflow-x: hidden !important;
  }

  body {
    background: #0b0c10 !important;
  }

  .container,
  .wrap,
  .wrapper,
  .content,
  .site-content,
  .page-wrap,
  .inner,
  .main-content {
    width: 100% !important;
    max-width: 100% !important;
    padding-left: 14px !important;
    padding-right: 14px !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    box-sizing: border-box !important;
  }

  /* Header */
  .site-header,
  header.site-header,
  .header,
  .header-area {
    padding: 18px 14px 10px !important;
    margin: 0 !important;
    background: linear-gradient(180deg, #06070b 0%, #0b0c10 100%) !important;
  }

  .site-branding,
  .logo,
  .navbar-brand {
    margin: 0 0 14px !important;
  }

  .site-branding img,
  .logo img {
    max-height: 54px !important;
    width: auto !important;
  }

  .header-search,
  .search-wrap,
  .search-form {
    width: 100% !important;
    margin: 0 0 14px !important;
  }

  .header-search input,
  .search-form input[type="search"],
  .search-form input[type="text"] {
    height: 56px !important;
    border-radius: 30px !important;
    padding-left: 54px !important;
    padding-right: 18px !important;
    font-size: 18px !important;
    background: #0f1320 !important;
    border: 1px solid rgba(255,255,255,.08) !important;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.02) !important;
  }

  .header-actions,
  .site-header .actions,
  .mobile-actions {
    display: flex !important;
    gap: 10px !important;
    justify-content: flex-end !important;
    margin: 0 0 14px !important;
  }

  .header-actions a,
  .header-actions button,
  .site-header .actions a,
  .site-header .actions button,
  .mobile-actions a,
  .mobile-actions button {
    width: 52px !important;
    height: 52px !important;
    border-radius: 50% !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: #121521 !important;
    border: 1px solid rgba(255,255,255,.07) !important;
    box-shadow: 0 10px 24px rgba(0,0,0,.28) !important;
  }

  /* Hero / featured */
  .hero,
  .featured-bar,
  .featured-box,
  .promo-card,
  .promo-hero,
  .home-hero,
  .hero-banner {
    border-radius: 24px !important;
    padding: 16px !important;
    margin: 0 0 18px !important;
    background: radial-gradient(circle at top left, rgba(255,64,129,.20), transparent 36%),
                linear-gradient(135deg, #2b171b 0%, #260914 40%, #3d1020 100%) !important;
    overflow: hidden !important;
  }

  .featured-label,
  .hero .label,
  .featured-pill {
    display: inline-flex !important;
    min-height: 36px !important;
    padding: 8px 16px !important;
    border-radius: 999px !important;
    margin: 0 0 12px !important;
    font-size: 13px !important;
    letter-spacing: .08em !important;
    font-weight: 800 !important;
    background: rgba(255,255,255,.12) !important;
  }

  .hero h1,
  .hero h2,
  .featured-box h2,
  .promo-card h2,
  .promo-hero h2 {
    font-size: 28px !important;
    line-height: 1.08 !important;
    margin: 0 0 10px !important;
  }

  .hero p,
  .featured-box p,
  .promo-card p,
  .promo-hero p {
    font-size: 15px !important;
    line-height: 1.45 !important;
    margin: 0 0 14px !important;
    color: rgba(255,255,255,.9) !important;
  }

  .hero .btn,
  .featured-box .btn,
  .promo-card .btn,
  .promo-hero .btn,
  .hero a.btn,
  .featured-box a.btn {
    min-height: 48px !important;
    padding: 0 18px !important;
    border-radius: 16px !important;
    font-size: 16px !important;
    font-weight: 800 !important;
  }

  .hero .btn + .btn,
  .featured-box .btn + .btn,
  .promo-card .btn + .btn,
  .promo-hero .btn + .btn {
    margin-left: 8px !important;
  }

  /* Section titles */
  .section-title,
  .block-title,
  .widget-title,
  .home-section h2,
  h2.section-title {
    font-size: 22px !important;
    line-height: 1.15 !important;
    margin: 0 0 6px !important;
  }

  .section-subtitle,
  .section-desc,
  .block-subtitle {
    font-size: 14px !important;
    color: rgba(255,255,255,.68) !important;
    margin: 0 0 14px !important;
  }

  /* Chips / filters */
  .filters,
  .filter-row,
  .tag-cloud,
  .tag-list,
  .category-tags,
  .quick-tags {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 10px !important;
    margin: 0 0 16px !important;
  }

  .filters a,
  .filter-row a,
  .tag-cloud a,
  .tag-list a,
  .category-tags a,
  .quick-tags a,
  .filters .chip,
  .filter-row .chip {
    display: inline-flex !important;
    align-items: center !important;
    min-height: 44px !important;
    padding: 0 16px !important;
    border-radius: 999px !important;
    background: #151823 !important;
    border: 1px solid rgba(255,255,255,.07) !important;
    color: #ececf1 !important;
    font-size: 15px !important;
  }

  /* Grid */
  .videos,
  .video-list,
  .thumbs,
  .archive-videos,
  .video-grid,
  .post-grid,
  .posts {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 14px !important;
    align-items: start !important;
  }

  .video-item,
  .video-card,
  .post,
  .thumb,
  article.post,
  article.video {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    background: #101217 !important;
    border-radius: 18px !important;
    overflow: hidden !important;
    box-shadow: 0 10px 24px rgba(0,0,0,.18) !important;
  }

  .video-item .thumb,
  .video-card .thumb,
  .post .thumb,
  .thumb img,
  .video-item img,
  .video-card img,
  .post img {
    width: 100% !important;
    aspect-ratio: 16 / 10 !important;
    object-fit: cover !important;
    display: block !important;
    border-radius: 18px 18px 0 0 !important;
  }

  .video-item .content,
  .video-card .content,
  .post .content,
  .video-item .inner,
  .video-card .inner,
  .post .inner {
    padding: 10px 10px 12px !important;
  }

  .video-card .title,
  .video-title,
  .entry-title,
  .post-title,
  .thumb-title,
  h2.entry-title,
  h3.entry-title {
    font-size: 15px !important;
    line-height: 1.3 !important;
    min-height: 2.6em !important;
    margin: 0 !important;
  }

  /* remove stray large gaps */
  .ad-bar + *,
  .promo-bar + *,
  .hero + *,
  .featured-box + * {
    margin-top: 0 !important;
  }

  .site-main,
  main,
  .content-area {
    margin-top: 0 !important;
    padding-top: 0 !important;
  }
}

@media (max-width: 560px){
  .videos,
  .video-list,
  .thumbs,
  .archive-videos,
  .video-grid,
  .post-grid,
  .posts {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 12px !important;
  }

  .hero .btn,
  .featured-box .btn,
  .promo-card .btn,
  .promo-hero .btn,
  .hero a.btn,
  .featured-box a.btn {
    width: calc(50% - 6px) !important;
    text-align: center !important;
    justify-content: center !important;
  }

  .video-card .title,
  .video-title,
  .entry-title,
  .post-title,
  .thumb-title {
    font-size: 14px !important;
  }
}



/* xFlixer mobile v4 centered emergency fix */
@media (max-width: 768px){

  html, body {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
  }

  body {
    background: #0b0c10 !important;
  }

  /* Center whole site */
  #page,
  .site,
  .site-wrap,
  .wrapper,
  .main-wrapper,
  .page-wrap,
  .page,
  .container,
  .wrap,
  .site-content,
  .content-area,
  main,
  .inner,
  .main-content {
    width: 100% !important;
    max-width: 680px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    float: none !important;
    left: auto !important;
    right: auto !important;
    padding-left: 14px !important;
    padding-right: 14px !important;
    box-sizing: border-box !important;
  }

  /* Remove weird offsets */
  [style*="margin-left"],
  [style*="margin-right"],
  [style*="left:"],
  [style*="right:"] {
    left: auto !important;
    right: auto !important;
  }

  .site-main,
  .content-area,
  main {
    display: block !important;
    margin-top: 0 !important;
    padding-top: 0 !important;
  }

  /* Cleaner centered header */
  .site-header,
  header,
  .header,
  .header-area {
    width: 100% !important;
    max-width: 680px !important;
    margin: 0 auto !important;
    padding: 18px 14px 10px !important;
    box-sizing: border-box !important;
  }

  .site-branding,
  .logo,
  .navbar-brand {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    margin: 0 0 12px !important;
  }

  .site-branding img,
  .logo img {
    max-height: 52px !important;
    width: auto !important;
    display: block !important;
  }

  .header-actions,
  .site-header .actions,
  .mobile-actions {
    display: flex !important;
    justify-content: flex-end !important;
    align-items: center !important;
    gap: 10px !important;
    width: 100% !important;
    margin: 0 0 12px !important;
  }

  .header-search,
  .search-wrap,
  .search-form {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 auto 14px !important;
  }

  /* Make hero actually centered and smaller */
  .hero,
  .featured-bar,
  .featured-box,
  .promo-card,
  .promo-hero,
  .home-hero,
  .hero-banner {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 auto 18px !important;
    padding: 16px !important;
    border-radius: 22px !important;
    box-sizing: border-box !important;
  }

  .hero .btn,
  .featured-box .btn,
  .promo-card .btn,
  .promo-hero .btn,
  .hero a.btn,
  .featured-box a.btn {
    min-width: 0 !important;
  }

  /* Force centered mobile grid */
  .videos,
  .video-list,
  .thumbs,
  .archive-videos,
  .video-grid,
  .post-grid,
  .posts,
  ul.videos,
  ul.posts {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    align-items: stretch !important;
    gap: 12px !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 auto !important;
    padding: 0 !important;
    list-style: none !important;
    box-sizing: border-box !important;
  }

  .videos > *,
  .video-list > *,
  .thumbs > *,
  .archive-videos > *,
  .video-grid > *,
  .post-grid > *,
  .posts > *,
  ul.videos > li,
  ul.posts > li,
  .video-item,
  .video-card,
  .post,
  .thumb,
  article.post,
  article.video {
    flex: 0 0 calc(50% - 6px) !important;
    width: calc(50% - 6px) !important;
    max-width: calc(50% - 6px) !important;
    min-width: 0 !important;
    margin: 0 !important;
    float: none !important;
    clear: none !important;
    display: block !important;
    box-sizing: border-box !important;
  }

  .video-item img,
  .video-card img,
  .post img,
  .thumb img,
  .video-item .thumb,
  .video-card .thumb,
  .post .thumb {
    width: 100% !important;
    max-width: 100% !important;
  }

  /* Remove internal giant spacing */
  .video-item .content,
  .video-card .content,
  .post .content,
  .video-item .inner,
  .video-card .inner,
  .post .inner {
    padding: 10px !important;
  }

  /* Center section blocks */
  .home-section,
  .section,
  .widget,
  .block,
  .latest-videos,
  .trending-videos {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  /* Filters centered and tidy */
  .filters,
  .filter-row,
  .tag-cloud,
  .tag-list,
  .category-tags,
  .quick-tags {
    justify-content: flex-start !important;
  }
}

@media (max-width: 520px){
  /* One column on very small screens to avoid broken alignment */
  .videos > *,
  .video-list > *,
  .thumbs > *,
  .archive-videos > *,
  .video-grid > *,
  .post-grid > *,
  .posts > *,
  ul.videos > li,
  ul.posts > li,
  .video-item,
  .video-card,
  .post,
  .thumb,
  article.post,
  article.video {
    flex: 0 0 100% !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  .hero .btn,
  .featured-box .btn,
  .promo-card .btn,
  .promo-hero .btn,
  .hero a.btn,
  .featured-box a.btn {
    display: flex !important;
    width: 100% !important;
    justify-content: center !important;
  }

  .hero .btn + .btn,
  .featured-box .btn + .btn,
  .promo-card .btn + .btn,
  .promo-hero .btn + .btn {
    margin-left: 0 !important;
    margin-top: 10px !important;
  }
}



/* xFlixer mobile v5 search result centering + sponsored card styling */
@media (max-width: 768px){

  /* Search / archive pages: make cards centered and full width */
  body.search .videos,
  body.search .video-list,
  body.search .thumbs,
  body.search .archive-videos,
  body.search .video-grid,
  body.search .post-grid,
  body.search .posts,
  body.archive .videos,
  body.archive .video-list,
  body.archive .thumbs,
  body.archive .archive-videos,
  body.archive .video-grid,
  body.archive .post-grid,
  body.archive .posts {
    display: flex !important;
    flex-direction: column !important;
    gap: 14px !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 auto !important;
    padding: 0 !important;
    align-items: center !important;
  }

  body.search .videos > *,
  body.search .video-list > *,
  body.search .thumbs > *,
  body.search .archive-videos > *,
  body.search .video-grid > *,
  body.search .post-grid > *,
  body.search .posts > *,
  body.archive .videos > *,
  body.archive .video-list > *,
  body.archive .thumbs > *,
  body.archive .archive-videos > *,
  body.archive .video-grid > *,
  body.archive .post-grid > *,
  body.archive .posts > *,
  body.search .video-item,
  body.search .video-card,
  body.search .post,
  body.search .thumb,
  body.archive .video-item,
  body.archive .video-card,
  body.archive .post,
  body.archive .thumb {
    width: 100% !important;
    max-width: 100% !important;
    flex: 0 0 100% !important;
    margin: 0 auto !important;
  }

  body.search .video-item img,
  body.search .video-card img,
  body.search .post img,
  body.archive .video-item img,
  body.archive .video-card img,
  body.archive .post img {
    aspect-ratio: 16 / 9 !important;
  }

  /* Center search result title block */
  body.search .page-header,
  body.search .archive-header,
  body.search .search-header,
  body.search .term-description,
  body.archive .page-header,
  body.archive .archive-header {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 auto 16px !important;
    text-align: center !important;
    padding: 18px 16px !important;
    border-radius: 26px !important;
    background: linear-gradient(135deg, #3a0d17 0%, #4a0421 100%) !important;
  }

  body.search .page-header h1,
  body.search .archive-header h1,
  body.search .search-header h1,
  body.archive .page-header h1,
  body.archive .archive-header h1 {
    font-size: 24px !important;
    line-height: 1.08 !important;
    margin: 0 0 10px !important;
  }

  body.search .page-header p,
  body.search .archive-header p,
  body.search .search-header p,
  body.archive .page-header p,
  body.archive .archive-header p {
    font-size: 15px !important;
    margin: 0 !important;
    color: rgba(255,255,255,.82) !important;
  }

  /* Improve title spacing under thumbs */
  body.search .video-card .content,
  body.search .video-item .content,
  body.search .post .content,
  body.archive .video-card .content,
  body.archive .video-item .content,
  body.archive .post .content {
    padding: 12px !important;
  }

  body.search .video-card .title,
  body.search .video-title,
  body.search .entry-title,
  body.search .post-title,
  body.archive .video-card .title,
  body.archive .video-title,
  body.archive .entry-title,
  body.archive .post-title {
    font-size: 15px !important;
    line-height: 1.28 !important;
    text-align: left !important;
  }
}

/* Clearly labeled sponsored cards that still match the site */
.sponsored-card,
.ad-thumb-card,
.video-card.sponsored,
.video-item.sponsored,
.post.sponsored {
  position: relative !important;
}

.sponsored-card::after,
.ad-thumb-card::after,
.video-card.sponsored::after,
.video-item.sponsored::after,
.post.sponsored::after {
  content: "Sponsored" !important;
  position: absolute !important;
  top: 10px !important;
  left: 10px !important;
  z-index: 12 !important;
  background: rgba(255, 71, 120, .95) !important;
  color: #fff !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  letter-spacing: .04em !important;
  text-transform: uppercase !important;
  padding: 6px 10px !important;
  border-radius: 999px !important;
  box-shadow: 0 8px 20px rgba(0,0,0,.25) !important;
}

.sponsored-card .thumb img,
.ad-thumb-card .thumb img,
.video-card.sponsored .thumb img,
.video-item.sponsored .thumb img,
.post.sponsored .thumb img {
  filter: saturate(1.03) contrast(1.02) !important;
}

.sponsored-card .content,
.ad-thumb-card .content,
.video-card.sponsored .content,
.video-item.sponsored .content,
.post.sponsored .content {
  border-top: 1px solid rgba(255,255,255,.06) !important;
}



/* xFlixer mobile v6 inspired phone layout */
@media (max-width: 768px){

  html, body {
    overflow-x: hidden !important;
    background: #151515 !important;
  }

  body {
    color: #f3f3f3 !important;
  }

  /* global centered wrapper */
  #page, .site, .wrapper, .main-wrapper, .page-wrap, .container, .wrap, .site-content, .content-area, main {
    width: 100% !important;
    max-width: 760px !important;
    margin: 0 auto !important;
    padding-left: 10px !important;
    padding-right: 10px !important;
    box-sizing: border-box !important;
  }

  /* compact top header */
  .site-header, header.site-header, .header, .header-area {
    background: linear-gradient(180deg, #1d1d1d 0%, #141414 100%) !important;
    padding: 14px 10px 10px !important;
    margin: 0 auto !important;
    border-bottom: 1px solid rgba(255,255,255,.06) !important;
  }

  .site-branding, .logo, .navbar-brand {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    width: 100% !important;
    margin: 0 0 10px !important;
  }

  .site-branding img, .logo img {
    max-height: 44px !important;
    width: auto !important;
    display: block !important;
  }

  .header-actions, .site-header .actions, .mobile-actions {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 8px !important;
    margin: 0 !important;
  }

  .header-actions a, .header-actions button,
  .site-header .actions a, .site-header .actions button,
  .mobile-actions a, .mobile-actions button {
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
    border-radius: 50% !important;
    background: #23252d !important;
    border: 1px solid rgba(255,255,255,.08) !important;
    box-shadow: none !important;
  }

  /* search row */
  .header-search, .search-wrap, .search-form, .search-bar-row {
    width: 100% !important;
    margin: 0 0 10px !important;
    position: relative !important;
  }

  .header-search input,
  .search-form input[type="search"],
  .search-form input[type="text"] {
    height: 52px !important;
    border-radius: 8px !important;
    background: #050505 !important;
    border: 1px solid rgba(255,255,255,.12) !important;
    color: #fff !important;
    font-size: 17px !important;
    padding-left: 48px !important;
    padding-right: 16px !important;
    box-shadow: none !important;
  }

  .header-search::before,
  .search-wrap::before,
  .search-form::before {
    content: "⌕";
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 22px;
    color: rgba(255,255,255,.72);
    z-index: 2;
    pointer-events: none;
  }

  /* convert bar under header into ad/promo strip */
  .ad-bar, .promo-bar, .subnav-ad, .mobile-ad-strip {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    min-height: 56px !important;
    padding: 10px 14px !important;
    margin: 0 0 12px !important;
    border-radius: 0 !important;
    background: linear-gradient(90deg, #ff5d2a 0%, #ff414d 100%) !important;
    color: #fff !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    overflow: hidden !important;
  }

  .ad-bar .btn, .promo-bar .btn, .subnav-ad .btn, .mobile-ad-strip .btn {
    min-height: 36px !important;
    padding: 0 14px !important;
    border-radius: 999px !important;
    background: rgba(255,255,255,.15) !important;
    border: 1px solid rgba(255,255,255,.22) !important;
    color: #fff !important;
    font-size: 13px !important;
  }

  /* hide oversized hero on mobile to mimic tighter native tube layout */
  .hero, .featured-bar, .featured-box, .promo-card, .promo-hero, .home-hero, .hero-banner {
    padding: 12px !important;
    margin: 0 0 12px !important;
    border-radius: 0 !important;
    background: #1d1d1d !important;
  }

  .hero h1, .hero h2, .featured-box h2, .promo-card h2, .promo-hero h2 {
    font-size: 18px !important;
    line-height: 1.2 !important;
    margin: 0 0 8px !important;
  }

  .hero p, .featured-box p, .promo-card p, .promo-hero p {
    font-size: 14px !important;
    line-height: 1.4 !important;
    margin: 0 0 10px !important;
  }

  .hero .btn, .featured-box .btn, .promo-card .btn, .promo-hero .btn, .hero a.btn, .featured-box a.btn {
    min-height: 42px !important;
    border-radius: 8px !important;
    font-size: 15px !important;
    font-weight: 700 !important;
  }

  /* section titles */
  .section-title, .block-title, .widget-title, .home-section h2, h2.section-title {
    font-size: 20px !important;
    line-height: 1.15 !important;
    margin: 0 0 8px !important;
    color: #f4f4f4 !important;
  }

  .section-subtitle, .section-desc, .block-subtitle {
    font-size: 14px !important;
    color: rgba(255,255,255,.65) !important;
    margin: 0 0 10px !important;
  }

  /* filter chips similar density */
  .filters, .filter-row, .tag-cloud, .tag-list, .category-tags, .quick-tags {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
    margin: 0 0 12px !important;
    justify-content: flex-start !important;
  }

  .filters a, .filter-row a, .tag-cloud a, .tag-list a, .category-tags a, .quick-tags a,
  .filters .chip, .filter-row .chip {
    min-height: 38px !important;
    padding: 0 14px !important;
    border-radius: 8px !important;
    background: #262626 !important;
    border: 1px solid rgba(255,255,255,.08) !important;
    color: #ededed !important;
    font-size: 14px !important;
    line-height: 1 !important;
  }

  /* compact 2 column grid like inspiration */
  .videos, .video-list, .thumbs, .archive-videos, .video-grid, .post-grid, .posts {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
    width: 100% !important;
    margin: 0 auto !important;
    padding: 0 !important;
    align-items: start !important;
  }

  .videos > *, .video-list > *, .thumbs > *, .archive-videos > *, .video-grid > *, .post-grid > *, .posts > *,
  .video-item, .video-card, .post, .thumb, article.post, article.video {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    float: none !important;
    background: #1a1a1a !important;
    border-radius: 0 !important;
    overflow: hidden !important;
    box-shadow: none !important;
  }

  .video-item .thumb,
  .video-card .thumb,
  .post .thumb,
  .thumb img,
  .video-item img,
  .video-card img,
  .post img {
    display: block !important;
    width: 100% !important;
    aspect-ratio: 16 / 11 !important;
    object-fit: cover !important;
    border-radius: 0 !important;
  }

  .video-item .content,
  .video-card .content,
  .post .content,
  .video-item .inner,
  .video-card .inner,
  .post .inner {
    padding: 8px 6px 10px !important;
  }

  .video-card .title, .video-title, .entry-title, .post-title, .thumb-title, h2.entry-title, h3.entry-title {
    font-size: 13px !important;
    line-height: 1.25 !important;
    min-height: 2.5em !important;
    margin: 0 0 4px !important;
    color: #f3f3f3 !important;
  }

  .video-meta, .meta, .entry-meta {
    font-size: 12px !important;
    color: rgba(255,255,255,.65) !important;
  }

  /* timer badge: simpler tube style */
  .video-block .duration,
  .video-card .duration,
  .post .duration,
  .thumb .duration,
  span.duration {
    right: 6px !important;
    bottom: 6px !important;
    min-width: auto !important;
    padding: 4px 7px !important;
    border-radius: 4px !important;
    background: rgba(32,32,32,.9) !important;
    border: 0 !important;
    box-shadow: none !important;
    font-size: 11px !important;
    font-weight: 700 !important;
  }

  .video-block .duration::before,
  .video-card .duration::before,
  .post .duration::before,
  .thumb .duration::before,
  span.duration::before {
    content: "" !important;
    margin: 0 !important;
  }

  /* search/archive pages centered and clean */
  body.search .page-header,
  body.search .archive-header,
  body.search .search-header,
  body.search .term-description,
  body.archive .page-header,
  body.archive .archive-header {
    margin: 0 0 12px !important;
    text-align: left !important;
    padding: 12px !important;
    border-radius: 0 !important;
    background: #1c1c1c !important;
  }

  body.search .page-header h1,
  body.search .archive-header h1,
  body.search .search-header h1,
  body.archive .page-header h1,
  body.archive .archive-header h1 {
    font-size: 22px !important;
    line-height: 1.12 !important;
  }
}

@media (max-width: 420px){
  .videos, .video-list, .thumbs, .archive-videos, .video-grid, .post-grid, .posts {
    gap: 8px !important;
  }

  .video-card .title, .video-title, .entry-title, .post-title, .thumb-title {
    font-size: 12.5px !important;
  }
}
