/* =========================
   VSTREAM THEME (COMPLETE FIXED)
   Put this in: /assets/css/theme.css
   ========================= */

/* ---------- Tokens ---------- */
:root{
  --v-bg:#070a13;
  --v-bg2:#0b1020;
  --v-text:rgba(255,255,255,.92);
  --v-muted:rgba(255,255,255,.65);
  --v-border:rgba(255,255,255,.12);

  --v-brand:#7c3aed;
  --v-brand2:#22c55e;

  --v-radius:18px;
  --v-shadow: 0 18px 60px rgba(0,0,0,.55);
  --v-shadow-soft: 0 10px 30px rgba(0,0,0,.35);

  --v-card-bg: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
  --v-glass: rgba(10,12,22,.72);
}

/* ---------- Base ---------- */
html,body{height:100%}

body{
  background:
    radial-gradient(1200px 700px at 12% -10%, rgba(124,58,237,.18), transparent 60%),
    radial-gradient(1100px 650px at 92% 0%, rgba(34,197,94,.10), transparent 58%),
    linear-gradient(180deg, var(--v-bg) 0%, var(--v-bg2) 55%, var(--v-bg) 100%);
  background-attachment: fixed;
  color: var(--v-text);
}

a{color:inherit}
a:hover{color:inherit}

/* Main spacing */
.site-main{min-height:calc(100vh - 220px)}
.site-main .container{padding-top:14px}

/* ======================================================
   NAVBAR (premium + logo sizing + no wrap + clean search)
   ====================================================== */
.vstream-navbar{
  background: var(--v-glass) !important;
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--v-border) !important;
}

.vstream-navbar .container{gap:12px}

/* Brand layout */
.vstream-navbar .navbar-brand{
  font-weight:900;
  letter-spacing:.2px;
  display:flex !important;
  align-items:center;
  gap:10px;
  min-width: 0;
}

/* ✅ Logo sizing fix (prevents giant logo) */
.vstream-navbar .vstream-logo,
.vstream-navbar .custom-logo{
  height: 36px !important;
  width: auto !important;
  max-width: 180px !important;
  object-fit: contain;
  display:block;
}

/* Make sure logo never pushes layout */
.vstream-navbar .vstream-brand{
  min-width: 0;
}
.vstream-navbar .vstream-brand span{
  min-width: 0;
}
.vstream-navbar .vstream-tagline{
  font-weight: 600;
  opacity: .85;
}

/* If no logo, show a small gradient dot */
.vstream-brand-fallback-dot{
  width:10px;height:10px;border-radius:50%;
  background: linear-gradient(135deg, var(--v-brand), var(--v-brand2));
  box-shadow: 0 0 0 6px rgba(124,58,237,.12);
  flex: 0 0 auto;
}

/* Links: prevent breaking */
.vstream-navbar .navbar-nav .nav-link{
  white-space:nowrap;
  color: var(--v-muted);
  padding: .45rem .75rem;
  border-radius: 999px;
  border: 1px solid transparent;
  transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.vstream-navbar .navbar-nav .nav-link:hover{
  color: var(--v-text);
  background: rgba(255,255,255,.06);
  border-color: rgba(255,255,255,.14);
}

/* Active page pill */
.vstream-navbar .current-menu-item > .nav-link,
.vstream-navbar .current_page_item > .nav-link{
  background: rgba(124,58,237,.18);
  border-color: rgba(124,58,237,.50);
  color:#fff;
}

/* Desktop: keep navbar in one row */
@media (min-width: 992px){
  .vstream-navbar .navbar-collapse{
    display:flex !important;
    flex-direction: row;
    align-items:center;
    gap:12px;
    flex-wrap:nowrap;
  }
  .vstream-navbar .navbar-nav{
    gap:6px;
    flex-wrap:nowrap;
  }
  .vstream-search{
    max-width: 520px;
    flex: 1 1 360px;
    margin-left:auto;
  }
}

/* Search */
.vstream-search .vstream-search-group{
  border-radius: 14px;
  overflow:hidden;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.05);
}

.vstream-search .vstream-search-icon{
  border:0 !important;
  background: rgba(255,255,255,.06) !important;
  color: rgba(255,255,255,.75);
}

.vstream-search .vstream-search-input{
  border:0 !important;
  background: transparent !important;
  color: var(--v-text) !important;
}
.vstream-search .vstream-search-input::placeholder{color: rgba(255,255,255,.55)}
.vstream-search .vstream-search-input:focus{
  box-shadow: none !important;
  outline: none !important;
}

.vstream-search .vstream-search-btn{
  border:0 !important;
  font-weight: 800;
}

/* ======================================================
   VIDEO CARD (fixed badges + polished + no ratio stretching)
   ====================================================== */
.vstream-card{
  border: 1px solid rgba(255,255,255,.12) !important;
  border-radius: var(--v-radius) !important;
  overflow: hidden;
  background: var(--v-card-bg) !important;
  box-shadow: var(--v-shadow-soft);
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.vstream-card:hover{
  transform: translateY(-3px);
  box-shadow: var(--v-shadow);
  border-color: rgba(124,58,237,.35) !important;
}

/* Thumbnail container */
.vstream-card .ratio{
  background: rgba(255,255,255,.04);
  position: relative;
}

/* Keep image filling the ratio */
.vstream-card .ratio > img{
  position:absolute !important;
  inset:0 !important;
  width:100% !important;
  height:100% !important;
  object-fit:cover !important;
  z-index: 1;
}

/* ✅ IMPORTANT FIX for vstream cards:
   Bootstrap .ratio targets ALL direct children and forces them full-size.
   Our badges are direct children, so we must reset them.
*/
.vstream-card .ratio > .badge,
.vstream-card .ratio > .vstream-badge,
.vstream-card .ratio > span.badge{
  position:absolute !important;

  width:auto !important;
  height:auto !important;
  max-width: calc(100% - 1rem) !important;

  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;

  padding:.38rem .62rem !important;
  border-radius: 999px !important;
  line-height:1 !important;
  white-space: nowrap !important;
  font-weight: 900 !important;

  /* key fix: undo .ratio "inset:0" behavior */
  inset: auto !important;
  transform: none !important;

  z-index: 3 !important;
}

/* Category badge (top-left) — make visible */
.vstream-card .ratio > .vstream-badge.vstream-cat{
  top: .55rem !important;
  left: .55rem !important;

  background: rgba(124,58,237,.98) !important;
  color: #fff !important;

  border: 1px solid rgba(255,255,255,.28) !important;
  box-shadow: 0 10px 28px rgba(0,0,0,.45) !important;
  text-shadow: 0 1px 2px rgba(0,0,0,.75) !important;
}

/* If sometimes you output bootstrap class "text-bg-primary" instead */
.vstream-card .ratio > .badge.text-bg-primary{
  top: .55rem !important;
  left: .55rem !important;
  background: rgba(124,58,237,.98) !important;
  border: 1px solid rgba(255,255,255,.28) !important;
  box-shadow: 0 10px 28px rgba(0,0,0,.45) !important;
  color:#fff !important;
}

/* Duration badge (bottom-right) */
.vstream-card .ratio > .vstream-badge.vstream-duration{
  right: .55rem !important;
  bottom: .55rem !important;

  background: rgba(0,0,0,.82) !important;
  border: 1px solid rgba(255,255,255,.22) !important;
  color: #fff !important;

  letter-spacing: .25px;
  text-shadow: 0 1px 2px rgba(0,0,0,.8) !important;
}

/* If duration sometimes uses plain .badge without vstream-duration */
.vstream-card .ratio > .badge.vstream-duration{
  right: .55rem !important;
  bottom: .55rem !important;
}

/* Card body */
.vstream-card .card-body{ padding: 12px 12px 14px; }

.vstream-card .vstream-card-title{
  font-weight: 900;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Make card text consistent on dark theme */
.vstream-card .text-body,
.vstream-card .card-title,
.vstream-card h2{
  color: var(--v-text) !important;
}
.vstream-card .text-body-secondary{
  color: rgba(255,255,255,.68) !important;
}

/* Improve grid spacing */
.row.g-3{ --bs-gutter-y: 1rem; }

/* Footer polish (optional) */
.site-footer{
  border-top: 1px solid var(--v-border) !important;
}

/* ======================================================
   SINGLE VIDEO PAGE (YouTube-style)
   ====================================================== */

/* Make sure container-xxl gets same top spacing */
.site-main .container,
.site-main .container-xxl{ padding-top:14px; }

/* More impressive background overlay (no images) */
body::before{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  background:
    radial-gradient(120% 70% at 50% 0%, rgba(255,255,255,.06), transparent 55%),
    radial-gradient(120% 120% at 50% 110%, rgba(0,0,0,.35), transparent 60%);
  opacity:.6;
}

/* Page wrapper */
.vstream-video-page{ position:relative; }

/* Player */
.vstream-player-wrap{
  border-radius: var(--v-radius);
  overflow:hidden;
  background:#000;
  border: 1px solid rgba(255,255,255,.12);
  box-shadow: var(--v-shadow);
}

.vstream-player{
  width:100%;
  height:auto;
  max-height: 72vh;
  display:block;
  background:#000;
}

/* Title + stats */
.vstream-video-title{ letter-spacing:.1px; }
.vstream-video-stats{
  color: rgba(255,255,255,.72);
}

/* YouTube-like action buttons */
.vstream-action-btn{
  background: rgba(255,255,255,.06) !important;
  border: 1px solid rgba(255,255,255,.14) !important;
  color: rgba(255,255,255,.92) !important;
  border-radius: 999px !important;
  font-weight: 800;
  padding: .55rem .9rem;
  box-shadow: var(--v-shadow-soft);
  transition: transform .12s ease, border-color .12s ease, background .12s ease;
}
.vstream-action-btn:hover{
  transform: translateY(-1px);
  background: rgba(255,255,255,.09) !important;
  border-color: rgba(124,58,237,.35) !important;
}

.vstream-count{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:.2rem .55rem;
  border-radius: 999px;
  background: rgba(0,0,0,.35);
  border: 1px solid rgba(255,255,255,.14);
  font-weight: 900;
}

/* Meta/Description panel */
.vstream-meta-panel{
  background: var(--v-card-bg);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: var(--v-radius);
  padding: 14px 14px 12px;
  box-shadow: var(--v-shadow-soft);
}

.vstream-meta-panel a{
  color: rgba(255,255,255,.86);
  text-decoration:none;
}
.vstream-meta-panel a:hover{
  text-decoration: underline;
  color:#fff;
}

.vstream-divider{
  border-color: rgba(255,255,255,.12) !important;
}

.vstream-details summary{
  cursor:pointer;
  font-weight: 900;
  color: rgba(255,255,255,.92);
}
.vstream-desc{
  color: rgba(255,255,255,.78);
}
.vstream-desc p,
.vstream-desc li{
  color: rgba(255,255,255,.78);
}

/* Right column sticky like YouTube */
.vstream-right-sticky{
  position: sticky;
  top: 88px;
}

.vstream-side-card{
  background: var(--v-card-bg);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: var(--v-radius);
  padding: 14px;
  box-shadow: var(--v-shadow-soft);
}

/* Ad box style */
.vstream-ad{
  border-radius: var(--v-radius);
  border: 1px dashed rgba(255,255,255,.14);
  background: rgba(255,255,255,.03);
  padding: 16px;
}

/* Mobile tweaks */
@media (max-width: 575.98px){
  .vstream-player{ max-height: 52vh; }
}

/* Plyr theme match */
.plyr{
  --plyr-color-main: var(--v-brand);
  --plyr-audio-controls-background: rgba(10,12,22,.72);
  --plyr-video-controls-background: linear-gradient(transparent, rgba(0,0,0,.65));
  --plyr-control-icon-size: 18px;
  --plyr-font-family: inherit;
}

/* Make player corners match your theme */
.js-vstream-player{
  border-radius: var(--v-radius);
}

/* Plyr responsive fix */
.vstream-player-wrap{
  border-radius: var(--v-radius);
  overflow: hidden;
  background:#000;
  border: 1px solid rgba(255,255,255,.12);
  box-shadow: var(--v-shadow);
}

/* Make Plyr fill the ratio box */
.vstream-player-wrap .plyr,
.vstream-player-wrap .plyr__video-wrapper,
.vstream-player-wrap video{
  width:100% !important;
  height:100% !important;
}

/* Avoid weird stretching */
.vstream-player-wrap video{
  object-fit: contain;
  background:#000;
}

/* Optional: nicer on very small screens */
@media (max-width: 576px){
  .vstream-player-wrap{ border-radius: 14px; }
}

/* =========================
   ✅ GLOBAL FIX (SAFE):
   Prevent Bootstrap .ratio from stretching badges,
   WITHOUT breaking bottom-0 / end-0 positioning
   ========================= */

/* Bootstrap .ratio makes all children full size.
   This ensures badges stay auto-sized. */
.ratio > .badge{
  width:auto !important;
  height:auto !important;
  max-width: calc(100% - 1rem) !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  padding:.38rem .62rem !important;
  border-radius:999px !important;
  line-height:1 !important;
  white-space:nowrap !important;
}

/* If a badge is anchored to bottom, kill the ratio default top:0 */
.ratio > .badge.bottom-0{ top:auto !important; }

/* If a badge is anchored to end/right, kill the ratio default left:0 */
.ratio > .badge.end-0{ left:auto !important; }

/* Optional safety for other anchors (won't affect most things) */
.ratio > .badge.top-0{ bottom:auto !important; }
.ratio > .badge.start-0{ right:auto !important; }

/* =========================
   PAGINATION (DUAL SUPPORT)
   - Home: <ul class="page-numbers"><li>...</li></ul>
   - Tax/Archive: <nav class="navigation pagination"><div class="nav-links">...</div></nav>
   ========================= */

/* ----- Shared button style ----- */
.page-numbers a.page-numbers,
.page-numbers span.page-numbers,
.navigation.pagination .page-numbers{
  display:inline-flex;
  align-items:center;
  justify-content:center;

  height: 42px;
  min-width: 42px;
  padding: 0 1rem;

  border-radius: 999px;
  text-decoration:none !important;

  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.05);
  color: rgba(255,255,255,.88) !important;

  font-weight: 900;
  letter-spacing: .2px;
  line-height: 1;

  transition: transform .12s ease, background .12s ease, border-color .12s ease, box-shadow .12s ease;
}

.page-numbers a.page-numbers:hover,
.navigation.pagination a.page-numbers:hover{
  background: rgba(255,255,255,.10);
  border-color: rgba(255,255,255,.22);
  transform: translateY(-1px);
  box-shadow: 0 14px 26px rgba(0,0,0,.28);
}

/* Current */
.page-numbers .current,
.navigation.pagination .page-numbers.current{
  background: rgba(124,58,237,.22) !important;
  border-color: rgba(124,58,237,.60) !important;
  color:#fff !important;
  box-shadow: 0 16px 34px rgba(0,0,0,.35);
}

/* Dots */
.page-numbers .dots,
.navigation.pagination .page-numbers.dots{
  min-width:auto;
  padding: 0 .55rem;
  background: transparent !important;
  border-color: transparent !important;
  color: rgba(255,255,255,.55) !important;
  box-shadow:none !important;
  transform:none !important;
}

/* Next/Prev */
.page-numbers .next,
.page-numbers .prev,
.navigation.pagination .page-numbers.next,
.navigation.pagination .page-numbers.prev{
  padding: 0 1.15rem;
}

/* Focus */
.page-numbers a.page-numbers:focus-visible,
.navigation.pagination a.page-numbers:focus-visible{
  outline:none;
  box-shadow: 0 0 0 4px rgba(124,58,237,.22), 0 16px 34px rgba(0,0,0,.35);
  border-color: rgba(124,58,237,.60);
}

/* ----- HOME UL WRAPPER STYLE ----- */
ul.page-numbers{
  list-style:none;
  margin:0;
  padding:.35rem;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.6rem;
  flex-wrap:wrap;

  border-radius:999px;
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.10);
  box-shadow: 0 10px 30px rgba(0,0,0,.28);
}

ul.page-numbers li{ margin:0; padding:0; }

/* ----- TAX/ARCHIVE NAV WRAPPER STYLE ----- */
.navigation.pagination{
  width:100%;
  display:flex;
  justify-content:center;
}

.navigation.pagination .nav-links{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.6rem;
  flex-wrap:wrap;
  padding:.35rem;

  border-radius:999px;
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.10);
  box-shadow: 0 10px 30px rgba(0,0,0,.28);
}
/* OR (no HTML change) add this */
@media (max-width: 575.98px){
  .row.g-3 > [class*="col-6"]{
    flex: 0 0 100% !important;
    max-width: 100% !important;
  }
}