/*
Theme Name:  KVSTube
Theme URI:   https://kvstube.example.com
Description: Professional video tube WordPress theme. Dark/light hybrid with cinema-quality player, multi-source embeds, quality selector, hover previews, and full admin dashboard.
Version:     2.0.0
Author:      KVSTube
License:     GPL-2.0-or-later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: kvstube
Tags:        video, dark, responsive, custom-post-types
*/

/* ================================================================
   DESIGN TOKENS
================================================================ */
:root {
  /* Light page palette */
  --bg:      #f0f2f7;
  --card:    #ffffff;
  --hd-bg:   #0e1117;
  --hd-bg2:  #161b27;
  --nav-bg:  #ffffff;
  --brd:     #e4e6f0;
  --brd2:    #cdd0e0;
  --blue:    #1565c0;
  --blue2:   #1976d2;
  --blue3:   #2196f3;
  --bluel:   #e3f0ff;
  --blueg:   rgba(21,101,192,.08);
  --red:     #c62828;
  --green:   #2e7d32;
  --gold:    #e65100;
  --tx:      #0e1117;
  --tx2:     #3a3d52;
  --mu:      #6b6f8c;
  --di:      #9da1bc;
  --nav-h:   44px;
  --hd-h:    62px;
  --sb:      228px;
  --r4:      4px;
  --r6:      6px;
  --r8:      8px;
  --r10:     10px;
  --r12:     12px;
  --r99:     999px;
  --ease:    cubic-bezier(.16,1,.3,1);
  --shadow:  0 2px 12px rgba(0,0,0,.08);
  --shadow2: 0 4px 24px rgba(0,0,0,.13);
}

/* ================================================================
   BASE RESET
================================================================ */
*,*::before,*::after { box-sizing:border-box; margin:0; padding:0; }
html { scroll-behavior:smooth; scrollbar-width:thin; scrollbar-color:var(--brd2) transparent; }
::-webkit-scrollbar { width:5px; height:5px; }
::-webkit-scrollbar-thumb { background:var(--brd2); border-radius:99px; }
body {
  font-family:'Inter',system-ui,-apple-system,sans-serif;
  background:var(--bg);
  color:var(--tx);
  -webkit-font-smoothing:antialiased;
  line-height:1.5;
  overflow-x:hidden;
}
img { display:block; max-width:100%; height:auto; }
a { color:var(--blue); text-decoration:none; }
a:hover { text-decoration:underline; }
button { font-family:inherit; cursor:pointer; border:none; outline:none; }
input,select,textarea { font-family:inherit; outline:none; }
ul,ol { list-style:none; }
p { margin:0; }

/* WP admin bar integration */
.admin-bar #kvs-header { top:32px; }
.admin-bar #kvs-topnav { top:calc(var(--hd-h) + 32px); }
@media screen and (max-width:782px) {
  .admin-bar #kvs-header { top:46px; }
  .admin-bar #kvs-topnav { top:calc(var(--hd-h) + 46px); }
}
.screen-reader-text { position:absolute!important; clip:rect(1px,1px,1px,1px); width:1px; height:1px; overflow:hidden; }

/* ================================================================
   HEADER
================================================================ */
#kvs-header {
  position:sticky; top:0; z-index:300;
  height:var(--hd-h); background:var(--hd-bg);
  display:flex; align-items:center;
  padding:0 18px; gap:14px;
  box-shadow:0 1px 0 rgba(255,255,255,.06);
}
.kvs-logo {
  display:flex; align-items:center; gap:9px;
  flex-shrink:0; text-decoration:none; color:#fff;
}
.kvs-logo:hover { text-decoration:none; opacity:.9; }
.kvs-logo-icon {
  width:34px; height:34px; border-radius:var(--r6);
  background:linear-gradient(135deg,#1565c0,#42a5f5);
  display:flex; align-items:center; justify-content:center;
  font-size:16px; font-weight:900; color:#fff;
  box-shadow:0 2px 8px rgba(21,101,192,.4);
}
.kvs-logo-text { font-size:1.12rem; font-weight:800; color:#fff; letter-spacing:-.02em; }

/* Search */
.kvs-search-form {
  flex:1; max-width:560px; display:flex;
  height:36px; border-radius:var(--r4);
  overflow:hidden; border:1px solid rgba(255,255,255,.12);
  transition:border-color .18s;
}
.kvs-search-form:focus-within { border-color:var(--blue3); }
.kvs-search-form input {
  flex:1; border:none; background:rgba(255,255,255,.07); padding:0 14px;
  font-size:.88rem; color:#fff;
}
.kvs-search-form input::placeholder { color:rgba(255,255,255,.4); }
.kvs-search-form input:focus { background:rgba(255,255,255,.1); outline:none; }
.kvs-search-form button {
  width:44px; background:var(--blue2); border:none; color:#fff;
  font-size:1rem; cursor:pointer; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  transition:background .18s;
}
.kvs-search-form button:hover { background:var(--blue); }
.kvs-search-form button svg { width:16px; height:16px; }

/* Header right */
.kvs-hd-right { display:flex; align-items:center; gap:8px; margin-left:auto; flex-shrink:0; }
.kvs-hd-btn {
  display:inline-flex; align-items:center; gap:5px;
  padding:7px 14px; border-radius:var(--r4);
  background:var(--blue2); color:#fff;
  font-size:.8rem; font-weight:700; transition:.18s; cursor:pointer;
}
.kvs-hd-btn:hover { background:var(--blue); text-decoration:none; }
.kvs-hd-link {
  color:rgba(255,255,255,.65); font-size:.8rem; font-weight:600;
  padding:6px 10px; transition:color .15s;
}
.kvs-hd-link:hover { color:#fff; text-decoration:none; }
.kvs-hd-user {
  display:flex; align-items:center; gap:7px;
  color:rgba(255,255,255,.8); font-size:.8rem;
  padding:4px 10px; border-radius:var(--r99);
  border:1px solid rgba(255,255,255,.12);
  text-decoration:none; transition:.18s;
}
.kvs-hd-user:hover { color:#fff; border-color:rgba(255,255,255,.25); text-decoration:none; }
.kvs-hd-avatar {
  width:26px; height:26px; border-radius:50%;
  background:linear-gradient(135deg,#1565c0,#42a5f5);
  display:flex; align-items:center; justify-content:center;
  font-size:11px; font-weight:700; color:#fff; flex-shrink:0;
}

/* ================================================================
   TOP NAV
================================================================ */
#kvs-topnav {
  position:sticky; top:var(--hd-h); z-index:290;
  height:var(--nav-h); background:var(--nav-bg);
  border-bottom:2px solid var(--brd);
  display:flex; align-items:stretch;
  padding:0 14px; overflow-x:auto; scrollbar-width:none;
  -webkit-overflow-scrolling:touch;
}
#kvs-topnav::-webkit-scrollbar { display:none; }
.kvs-nav-item {
  display:inline-flex; align-items:center; gap:5px;
  padding:0 13px; font-size:.78rem; font-weight:600; color:var(--mu);
  border-bottom:3px solid transparent; white-space:nowrap;
  transition:color .15s, border-color .15s; text-decoration:none; margin-bottom:-2px;
}
.kvs-nav-item:hover { color:var(--blue); text-decoration:none; }
.kvs-nav-item.active { color:var(--blue); border-bottom-color:var(--blue); }
.kvs-nav-icon { font-size:13px; }

/* ================================================================
   PAGE SHELL
================================================================ */
#kvs-wrap {
  display:flex; gap:0; max-width:1400px;
  margin:0 auto; padding:18px 14px; align-items:flex-start;
  width:100%;
}

/* ================================================================
   SIDEBAR
================================================================ */
#kvs-sidebar {
  width:var(--sb); flex-shrink:0;
  display:flex; flex-direction:column; gap:14px;
  position:sticky; top:calc(var(--hd-h) + var(--nav-h) + 18px);
  max-height:calc(100vh - var(--hd-h) - var(--nav-h) - 36px);
  overflow-y:auto; scrollbar-width:none; padding-right:4px;
}
#kvs-sidebar::-webkit-scrollbar { display:none; }
.kvs-sb-box {
  background:var(--card); border:1px solid var(--brd);
  border-radius:var(--r10); overflow:hidden;
  box-shadow:var(--shadow);
}
.kvs-sb-title {
  display:flex; align-items:center; gap:7px;
  padding:10px 13px; font-size:.72rem; font-weight:800;
  letter-spacing:.05em; text-transform:uppercase;
  color:var(--mu); background:var(--bg);
  border-bottom:1px solid var(--brd);
}
.kvs-sb-list { display:flex; flex-direction:column; }
.kvs-sb-item {
  display:flex; align-items:center; justify-content:space-between;
  padding:7px 13px; font-size:.8rem; color:var(--tx2);
  border-bottom:1px solid var(--brd);
  transition:background .13s; text-decoration:none; cursor:pointer;
}
.kvs-sb-item:last-child { border-bottom:none; }
.kvs-sb-item:hover { background:var(--bluel); color:var(--blue); text-decoration:none; }
.kvs-sb-item.active { background:var(--bluel); color:var(--blue); font-weight:700; }
.kvs-sb-count {
  font-size:.7rem; font-family:'JetBrains Mono',monospace; font-weight:600;
  color:var(--di); background:var(--bg); padding:1px 6px; border-radius:var(--r99);
  flex-shrink:0;
}
.kvs-sb-item.active .kvs-sb-count { background:rgba(21,101,192,.12); color:var(--blue); }

/* ================================================================
   MAIN CONTENT AREA
================================================================ */
#kvs-main {
  flex:1; min-width:0; padding-left:16px;
}

/* ================================================================
   SECTION HEADER
================================================================ */
.kvs-section-title {
  font-size:1rem; font-weight:800; color:var(--tx);
  margin-bottom:14px; display:flex; align-items:center; gap:8px;
  letter-spacing:-.01em;
}

/* ================================================================
   VIDEO GRID
================================================================ */
.kvs-grid {
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(220px,1fr));
  gap:16px;
  margin-bottom:24px;
}

/* ================================================================
   VIDEO CARD
================================================================ */
.kvs-card {
  background:var(--card); border:1px solid var(--brd);
  border-radius:var(--r10); overflow:hidden;
  transition:transform .22s var(--ease), box-shadow .22s ease, border-color .22s ease;
  cursor:pointer;
}
.kvs-card:hover {
  transform:translateY(-3px);
  box-shadow:var(--shadow2);
  border-color:var(--brd2);
}
/* Cards animate in via CSS — never invisible, always clickable */
@keyframes kvs-card-appear {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: none; }
}
.kvs-card {
  animation: kvs-card-appear .3s ease both;
}
/* Stagger for first 12 cards on page load */
.kvs-card:nth-child(1)  { animation-delay: .00s; }
.kvs-card:nth-child(2)  { animation-delay: .03s; }
.kvs-card:nth-child(3)  { animation-delay: .06s; }
.kvs-card:nth-child(4)  { animation-delay: .09s; }
.kvs-card:nth-child(5)  { animation-delay: .12s; }
.kvs-card:nth-child(6)  { animation-delay: .15s; }
.kvs-card:nth-child(7)  { animation-delay: .18s; }
.kvs-card:nth-child(8)  { animation-delay: .21s; }
.kvs-card:nth-child(9)  { animation-delay: .24s; }
.kvs-card:nth-child(10) { animation-delay: .27s; }
.kvs-card:nth-child(11) { animation-delay: .30s; }
.kvs-card:nth-child(12) { animation-delay: .33s; }
/* New cards loaded via AJAX */
.kvs-card-new { animation: kvs-card-appear .4s ease both; }

.kvs-card:focus-visible {
  outline:2px solid var(--blue);
  outline-offset:2px;
}

/* Thumbnail */
.kvs-thumb {
  position:relative; aspect-ratio:16/9;
  overflow:hidden; background:#0e1117;
}
.kvs-thumb-img {
  width:100%; height:100%; object-fit:cover; display:block;
  transition:transform .35s var(--ease), opacity .2s ease;
}
.kvs-card:hover .kvs-thumb-img { transform:scale(1.05); }

/* Play overlay */
.kvs-play-ov {
  position:absolute; inset:0;
  display:flex; align-items:center; justify-content:center;
  background:rgba(0,0,0,0); transition:background .22s ease;
}
.kvs-card:hover .kvs-play-ov { background:rgba(0,0,0,.32); }
.kvs-play-btn {
  width:44px; height:44px; border-radius:50%;
  background:rgba(255,255,255,.92);
  display:flex; align-items:center; justify-content:center;
  font-size:14px; padding-left:3px; color:var(--tx);
  opacity:0; transform:scale(.7);
  transition:opacity .2s ease, transform .22s var(--ease);
  box-shadow:0 2px 12px rgba(0,0,0,.3);
}
.kvs-card:hover .kvs-play-btn { opacity:1; transform:scale(1); }

/* Duration chip */
.kvs-dur {
  position:absolute; bottom:7px; right:7px;
  background:rgba(0,0,0,.82); color:#fff;
  font-size:.68rem; font-family:'JetBrains Mono',monospace; font-weight:500;
  padding:2px 6px; border-radius:3px; line-height:1.4;
}

/* Quality badges */
.kvs-badge {
  position:absolute; top:7px; left:7px;
  font-size:.62rem; font-weight:800; padding:2px 6px;
  border-radius:3px; letter-spacing:.04em;
  text-transform:uppercase; line-height:1.4;
}
.kvs-badge-hd   { background:#1565c0; color:#fff; }
.kvs-badge-4k   { background:linear-gradient(135deg,#7b1fa2,#ce93d8); color:#fff; }
.kvs-badge-pg   { background:#1b5e20; color:#fff; }
.kvs-badge-new  { background:#c62828; color:#fff; }
.kvs-badge-prem { background:linear-gradient(135deg,#e65100,#ffa726); color:#fff; }

/* Video hover preview */
.kvs-video-preview {
  position:absolute; inset:0; opacity:0;
  transition:opacity .3s ease;
  pointer-events:none;
}
.kvs-card:hover .kvs-video-preview { opacity:1; }
.kvs-preview-video {
  width:100%; height:100%; object-fit:cover; display:block;
}

/* LIVE indicator */
.kvs-live-badge {
  position:absolute; top:7px; right:7px;
  background:#c62828; color:#fff;
  font-size:.62rem; font-weight:800; padding:2px 6px;
  border-radius:3px; letter-spacing:.04em;
  display:flex; align-items:center; gap:4px;
}
.kvs-live-dot { width:5px; height:5px; border-radius:50%; background:#fff; animation:kvsPulse 1.2s infinite; }
@keyframes kvsPulse { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:.5;transform:scale(.8)} }

/* ── Overlay card: no card-body, all info lives on the thumbnail ── */
.kvs-card-body { display:none; } /* hidden — info is in the overlay */

/* Gradient overlay at bottom of card */
.kvs-card-overlay {
  position: absolute; bottom: 0; left: 0; right: 0;
  background: linear-gradient(transparent 0%, rgba(0,0,0,.55) 30%, rgba(0,0,0,.92) 100%);
  padding: 28px 10px 8px;
  transition: padding .2s ease;
  border-radius: 0 0 var(--r10) var(--r10);
}
.kvs-card:hover .kvs-card-overlay { padding-bottom: 10px; }

.kvs-card-overlay-title {
  font-size: .8rem; font-weight: 700; color: #fff;
  line-height: 1.3; margin-bottom: 5px;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  text-shadow: 0 1px 3px rgba(0,0,0,.5);
}
.kvs-card-overlay-meta {
  display: flex; flex-wrap: wrap; gap: 4px 8px; align-items: center;
}
.kvs-ov-item {
  display: inline-flex; align-items: center; gap: 3px;
  font-size: .65rem; color: rgba(255,255,255,.72); font-weight: 500;
}
.kvs-ov-item svg { opacity: .8; }
.kvs-ov-rating { color: #4ade80; font-weight: 700; }

/* Thin rating bar at card bottom */
.kvs-ov-bar {
  height: 2px; background: rgba(255,255,255,.15); border-radius: 99px;
  margin-top: 6px; overflow: hidden;
}
.kvs-ov-bar-fill {
  height: 100%; background: linear-gradient(90deg,#3d7fff,#60a5fa);
  border-radius: 99px;
}

/* Card thumb now has aspect-ratio so overlay sits correctly */
.kvs-card { border-radius: var(--r10); overflow: hidden; padding-bottom: 0; }
.kvs-thumb { aspect-ratio: 16/9; border-radius: var(--r10); }

/* ================================================================
   LOAD MORE
================================================================ */
.kvs-loadmore { text-align:center; padding:8px 0 4px; }
.kvs-loadmore-btn {
  display:inline-flex; align-items:center; gap:8px;
  padding:10px 28px; border-radius:var(--r99);
  border:2px solid var(--brd2); background:var(--card); color:var(--tx2);
  font-size:.85rem; font-weight:700; cursor:pointer; transition:.2s;
}
.kvs-loadmore-btn:hover { border-color:var(--blue); color:var(--blue); background:var(--bluel); }
.kvs-loadmore-btn:disabled { opacity:.55; cursor:not-allowed; }

/* ================================================================
   MODALS (Upload / Share)
================================================================ */
.kvs-modal-bg {
  position:fixed; inset:0; z-index:500;
  background:rgba(0,0,0,.6); backdrop-filter:blur(6px);
  display:flex; align-items:center; justify-content:center; padding:16px;
  opacity:0; pointer-events:none; transition:opacity .22s ease;
}
.kvs-modal-bg.open { opacity:1; pointer-events:all; }
.kvs-modal {
  background:var(--card); border-radius:var(--r12);
  width:100%; max-width:540px;
  box-shadow:0 20px 60px rgba(0,0,0,.25);
  transform:translateY(12px) scale(.97); transition:transform .22s var(--ease);
  overflow:hidden; max-height:90vh; display:flex; flex-direction:column;
}
.kvs-modal-bg.open .kvs-modal { transform:none; }
.kvs-modal-head {
  display:flex; align-items:center; justify-content:space-between;
  padding:16px 20px; border-bottom:1px solid var(--brd); flex-shrink:0;
}
.kvs-modal-title { font-size:1rem; font-weight:800; color:var(--tx); }
.kvs-modal-close {
  width:28px; height:28px; border-radius:50%;
  background:var(--bg); border:none; color:var(--mu);
  font-size:14px; display:flex; align-items:center; justify-content:center;
  cursor:pointer; transition:.15s;
}
.kvs-modal-close:hover { background:var(--brd2); color:var(--tx); }
.kvs-modal-body { padding:18px 20px; overflow-y:auto; flex:1; }

/* Tabs */
.kvs-tabs { display:flex; gap:4px; margin-bottom:16px; padding-bottom:12px; border-bottom:1px solid var(--brd); }
.kvs-tab {
  padding:7px 14px; border-radius:var(--r4);
  font-size:.8rem; font-weight:600; color:var(--mu);
  background:none; border:1px solid transparent;
  transition:.15s; cursor:pointer;
}
.kvs-tab:hover { color:var(--blue); background:var(--bluel); }
.kvs-tab.active { background:var(--bluel); color:var(--blue); border-color:rgba(21,101,192,.25); }

/* Fields */
.kvs-field { margin-bottom:12px; }
.kvs-field label { display:block; font-size:.75rem; font-weight:700; color:var(--tx2); margin-bottom:5px; letter-spacing:.02em; }
.kvs-field input,
.kvs-field select,
.kvs-field textarea {
  width:100%; padding:8px 12px; font-size:.85rem;
  border:1px solid var(--brd2); border-radius:var(--r6);
  background:var(--card); color:var(--tx); transition:border-color .15s;
}
.kvs-field input:focus,
.kvs-field select:focus,
.kvs-field textarea:focus { border-color:var(--blue); box-shadow:0 0 0 3px var(--blueg); }
.kvs-field textarea { height:80px; resize:vertical; }
.kvs-hint { font-size:.72rem; color:var(--di); margin-top:4px; }
.kvs-grid2 { display:grid; grid-template-columns:1fr 1fr; gap:12px; }

/* Drop zone */
.kvs-dz {
  border:2px dashed var(--brd2); border-radius:var(--r8); padding:28px 20px;
  text-align:center; cursor:pointer; transition:all .18s; margin-bottom:14px;
  background:var(--bg);
}
.kvs-dz:hover, .kvs-dz.over { border-color:var(--blue); background:var(--bluel); }
.kvs-dz input { display:none; }

/* Progress bar */
.kvs-prog-wrap { display:none; margin-bottom:14px; }
.kvs-prog-wrap.show { display:block; }
.kvs-prog-bar { height:4px; background:var(--brd); border-radius:99px; overflow:hidden; }
.kvs-prog-fill { height:100%; background:linear-gradient(90deg,var(--blue),var(--blue3)); border-radius:99px; width:0; transition:width .3s ease; }

/* Server grid */
.kvs-srv-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:7px; margin-bottom:14px; }
.kvs-srv-btn {
  display:flex; flex-direction:column; align-items:center; gap:3px;
  padding:10px 6px; border:1px solid var(--brd2); border-radius:var(--r8);
  background:var(--bg); cursor:pointer; transition:.15s; text-align:center;
}
.kvs-srv-btn:hover { border-color:var(--blue); background:var(--bluel); }
.kvs-srv-btn.active { border-color:var(--blue); background:var(--bluel); }
.kvs-srv-ic { font-size:1.3rem; }
.kvs-srv-nm { font-size:.75rem; font-weight:700; color:var(--tx2); }
.kvs-srv-dc { font-size:.65rem; color:var(--di); }

/* Embed preview */
.kvs-embed-prev {
  aspect-ratio:16/9; background:var(--hd-bg); border-radius:var(--r6);
  overflow:hidden; margin-bottom:14px;
  display:flex; align-items:center; justify-content:center;
}
.kvs-embed-prev iframe { width:100%; height:100%; border:none; }

/* Modal footer */
.kvs-modal-foot { display:flex; gap:8px; justify-content:flex-end; padding-top:12px; border-top:1px solid var(--brd); margin-top:14px; }
.kvs-btn-primary {
  display:inline-flex; align-items:center; gap:6px;
  padding:9px 20px; border-radius:var(--r4);
  background:var(--blue2); color:#fff;
  font-size:.82rem; font-weight:700; cursor:pointer; transition:.18s; border:none;
}
.kvs-btn-primary:hover { background:var(--blue); }
.kvs-btn-ghost {
  display:inline-flex; align-items:center; gap:6px;
  padding:9px 16px; border-radius:var(--r4);
  background:var(--bg); border:1px solid var(--brd2); color:var(--mu);
  font-size:.82rem; font-weight:700; cursor:pointer; transition:.18s;
}
.kvs-btn-ghost:hover { background:var(--brd); color:var(--tx); }

/* ================================================================
   EMPTY STATE
================================================================ */
.kvs-empty-state {
  grid-column:1/-1; text-align:center; padding:56px 24px;
  color:var(--mu);
}
.kvs-empty-state span { font-size:3.5rem; display:block; margin-bottom:14px; }
.kvs-empty-state p { font-size:.9rem; font-weight:500; }

/* ================================================================
   PAGINATION
================================================================ */
.kvs-pagination,.page-numbers-wrap {
  display:flex; justify-content:center; flex-wrap:wrap;
  gap:6px; padding:16px 0 6px;
}
.page-numbers,
.kvs-pagination a, .kvs-pagination span {
  display:inline-flex; align-items:center; justify-content:center;
  width:34px; height:34px; border-radius:var(--r6);
  font-size:.82rem; font-weight:600; color:var(--mu);
  border:1px solid var(--brd); background:var(--card);
  text-decoration:none; transition:.15s;
}
.page-numbers:hover,
.kvs-pagination a:hover { border-color:var(--blue); color:var(--blue); background:var(--bluel); text-decoration:none; }
.page-numbers.current,
.kvs-pagination .current { background:var(--blue); color:#fff; border-color:var(--blue); }
.page-numbers.dots { border:none; background:none; }

/* ================================================================
   FOOTER
================================================================ */
#kvs-footer {
  background:var(--hd-bg); color:rgba(255,255,255,.7);
  margin-top:32px; padding:0 18px;
}
.kvs-footer-inner { max-width:1400px; margin:0 auto; }
.kvs-footer-grid {
  display:grid; grid-template-columns:2fr 1fr 1fr 1fr;
  gap:32px; padding:36px 0 28px;
  border-bottom:1px solid rgba(255,255,255,.08);
}
.kvs-footer-brand p { font-size:.82rem; color:rgba(255,255,255,.45); margin-top:10px; line-height:1.6; }
.kvs-footer-col h4 {
  font-size:.72rem; font-weight:800; letter-spacing:.08em;
  text-transform:uppercase; color:rgba(255,255,255,.4);
  margin-bottom:14px;
}
.kvs-footer-col ul { display:flex; flex-direction:column; gap:8px; }
.kvs-footer-col a {
  font-size:.82rem; color:rgba(255,255,255,.55);
  text-decoration:none; transition:color .15s;
}
.kvs-footer-col a:hover { color:#fff; text-decoration:none; }
.kvs-footer-bot {
  display:flex; align-items:center; justify-content:space-between;
  padding:16px 0; font-size:.72rem; color:rgba(255,255,255,.3);
  flex-wrap:wrap; gap:8px;
}

/* ================================================================
   SEARCH & 404 PAGES
================================================================ */
.kvs-page-hero {
  background:var(--card); border:1px solid var(--brd); border-radius:var(--r10);
  padding:40px 24px; text-align:center; margin-bottom:24px;
}
.kvs-page-hero-icon { font-size:3.5rem; margin-bottom:14px; }
.kvs-page-hero h1 { font-size:1.6rem; font-weight:800; color:var(--tx); margin-bottom:8px; }
.kvs-page-hero p { color:var(--mu); font-size:.9rem; margin-bottom:20px; }
.kvs-404-links { display:flex; gap:10px; justify-content:center; flex-wrap:wrap; }
.kvs-404-links a {
  padding:9px 20px; border-radius:var(--r4); font-size:.82rem; font-weight:700;
  text-decoration:none; transition:.15s;
}
.kvs-404-link-primary { background:var(--blue2); color:#fff; }
.kvs-404-link-primary:hover { background:var(--blue); text-decoration:none; }
.kvs-404-link-ghost {
  border:1px solid var(--brd2); color:var(--mu); background:var(--card);
}
.kvs-404-link-ghost:hover { color:var(--tx); border-color:var(--brd2); background:var(--bg); text-decoration:none; }

/* ================================================================
   COMMENTS (inside single page)
================================================================ */
.comment-list { list-style:none; }
.comment-list li { padding:14px 0; border-bottom:1px solid var(--brd); }
.comment-list li:last-child { border-bottom:none; }
.comment-author b { font-size:.85rem; font-weight:700; color:var(--tx); }
.comment-metadata { font-size:.72rem; color:var(--di); margin:2px 0 8px; }
.comment-content p { font-size:.85rem; color:var(--tx2); line-height:1.6; }
.comment-reply-link {
  font-size:.72rem; font-weight:700; color:var(--blue);
  padding:3px 8px; border-radius:var(--r4); border:1px solid rgba(21,101,192,.25);
  background:var(--bluel); transition:.15s;
}
.comment-reply-link:hover { background:var(--blue); color:#fff; }
.comment-form label { display:block; font-size:.75rem; font-weight:700; color:var(--tx2); margin-bottom:5px; }
.comment-form input[type="text"],
.comment-form input[type="email"],
.comment-form input[type="url"],
.comment-form textarea {
  width:100%; padding:8px 12px; font-size:.85rem;
  border:1px solid var(--brd2); border-radius:var(--r6);
  background:var(--card); color:var(--tx); margin-bottom:12px;
  transition:border-color .15s;
}
.comment-form input:focus,
.comment-form textarea:focus { border-color:var(--blue); box-shadow:0 0 0 3px var(--blueg); outline:none; }
.comment-form-submit input[type="submit"] {
  padding:9px 22px; background:var(--blue2); color:#fff; border:none;
  border-radius:var(--r4); font-size:.85rem; font-weight:700;
  font-family:inherit; cursor:pointer; transition:.15s;
}
.comment-form-submit input[type="submit"]:hover { background:var(--blue); }

/* ================================================================
   RESPONSIVE
================================================================ */
@media (max-width:1080px) {
  .kvs-grid { grid-template-columns:repeat(auto-fill,minmax(200px,1fr)); }
  .kvs-footer-grid { grid-template-columns:1fr 1fr; gap:24px; }
}
@media (max-width:768px) {
  :root { --sb:0px; --hd-h:56px; }
  #kvs-wrap { padding:12px 10px; }
  #kvs-sidebar { display:none; }
  #kvs-main { padding-left:0; }
  .kvs-grid { grid-template-columns:repeat(auto-fill,minmax(160px,1fr)); gap:12px; }
  .kvs-footer-grid { grid-template-columns:1fr 1fr; }
  .kvs-modal { max-width:100%; }
}
@media (max-width:480px) {
  .kvs-grid { grid-template-columns:repeat(2,1fr); gap:10px; }
  .kvs-footer-grid { grid-template-columns:1fr; gap:20px; }
  .kvs-footer-bot { flex-direction:column; text-align:center; }
  .kvs-srv-grid { grid-template-columns:repeat(3,1fr); }
  .kvs-hd-right .kvs-hd-user span { display:none; }
  .kvs-logo-text { display:none; }
}

/* ================================================================
   CARD PREVIEW — active state + mobile tap hint
================================================================ */

/* Show preview video when card has kvs-previewing class (mobile tap) */
.kvs-card.kvs-previewing .kvs-video-preview { opacity: 1; }
.kvs-card.kvs-previewing .kvs-thumb-img { opacity: 0; }
.kvs-card.kvs-previewing .kvs-play-ov { background: rgba(0,0,0,.2); }
.kvs-card.kvs-previewing .kvs-play-btn { opacity: 0; }

/* Mobile "tap again to open" hint */
.kvs-tap-hint {
  position: absolute;
  bottom: 8px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(0,0,0,.82);
  color: #fff;
  font-size: .68rem;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: var(--r99);
  white-space: nowrap;
  pointer-events: none;
  opacity: 1;
  transition: opacity .5s ease;
  z-index: 10;
}

/* Ensure preview video is always rendered (hidden until needed) */
.kvs-video-preview {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity .28s ease;
  pointer-events: none;
  z-index: 2;
}
.kvs-preview-video {
  width: 100%; height: 100%;
  object-fit: cover; display: block;
}

/* Desktop: show preview on hover via CSS (JS also drives it) */
@media (hover: hover) and (pointer: fine) {
  .kvs-card:hover .kvs-video-preview { opacity: 1; }
  .kvs-card:hover .kvs-thumb-img { opacity: 0; }
}

/* ================================================================
   MOBILE PREVIEW BUTTON (tap-to-preview on touch devices)
================================================================ */
.kvs-mob-prev-btn {
  position: absolute;
  bottom: 26px; left: 50%;
  transform: translateX(-50%);
  display: inline-flex; align-items: center; gap: 5px;
  background: rgba(0,0,0,.8);
  color: #fff; border: 1px solid rgba(255,255,255,.25);
  border-radius: var(--r99);
  padding: 5px 14px;
  font-size: .7rem; font-weight: 700;
  font-family: inherit;
  cursor: pointer;
  opacity: 0; pointer-events: none;
  transition: opacity .2s ease;
  white-space: nowrap; z-index: 15;
}
.kvs-mob-prev-btn--show {
  opacity: 1; pointer-events: auto;
}
/* Show on cards that are actively previewing */
.kvs-card.kvs-previewing .kvs-mob-prev-btn { display: none; }

/* Preview active state */
.kvs-card.kvs-previewing .kvs-video-preview { opacity: 1; }
.kvs-card.kvs-previewing .kvs-thumb-img     { opacity: 0; }
.kvs-card.kvs-previewing .kvs-play-btn      { opacity: 0; }

/* Tap hint pill */
.kvs-tap-hint {
  position: absolute; bottom: 7px; left: 50%;
  transform: translateX(-50%);
  background: rgba(0,0,0,.82); color: #fff;
  font-size: .66rem; font-weight: 700;
  padding: 3px 10px; border-radius: var(--r99);
  pointer-events: none; z-index: 16;
  white-space: nowrap; opacity: 1;
  transition: opacity .5s ease;
}

/* ================================================================
   CARD ICON STYLES (SVG icons)
================================================================ */
.kvs-meta-ico {
  width: 12px; height: 12px; flex-shrink: 0;
  stroke-width: 2; vertical-align: middle;
}
.kvs-thumb-placeholder {
  width:100%; height:100%; background:#1a1a2e;
  display:flex; align-items:center; justify-content:center;
}

/* ================================================================
   BANNER AD SLOTS
================================================================ */
.kvs-ad-slot {
  width: 100%; text-align: center;
  overflow: hidden; background: transparent;
  line-height: 0; /* collapse if empty */
}
.kvs-ad-slot:empty { display: none; }

.kvs-ad-header {
  padding: 8px 0; border-bottom: 1px solid var(--brd);
  background: var(--bg);
}
.kvs-ad-footer {
  padding: 12px 0; border-top: 1px solid var(--brd);
  margin-top: 8px;
}
.kvs-ad-interstitial {
  grid-column: 1/-1; padding: 10px 0; margin: 4px 0;
}
.kvs-ad-sidebar {
  width: var(--sb); padding: 8px 0;
}
/* Ad label */
.kvs-ad-slot::before {
  content: 'Advertisement';
  display: block; font-size: .6rem; font-weight: 600;
  letter-spacing: .08em; text-transform: uppercase;
  color: var(--di); margin-bottom: 5px; line-height: 1;
}
.kvs-ad-slot:empty::before { display: none; }

/* ================================================================
   PRE-ROLL AD OVERLAY
================================================================ */
#kvs-preroll {
  position: absolute; inset: 0; z-index: 500;
  display: none; flex-direction: column;
  background: #000; border-radius: var(--c-r, 12px);
  overflow: hidden;
}
.kvs-preroll-media {
  flex: 1; display: flex; align-items: center; justify-content: center;
  overflow: hidden; cursor: pointer;
}
.kvs-preroll-media video,
.kvs-preroll-media img {
  width: 100%; height: 100%; object-fit: cover; display: block;
}
.kvs-preroll-bar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 8px 12px;
  background: linear-gradient(transparent, rgba(0,0,0,.85));
  position: absolute; bottom: 0; left: 0; right: 0;
  z-index: 10;
}
.kvs-preroll-label {
  font-size: .7rem; font-weight: 600; color: rgba(255,255,255,.6);
  letter-spacing: .06em; text-transform: uppercase;
}
.kvs-preroll-skip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 16px; border-radius: 4px;
  background: rgba(0,0,0,.55); border: 1px solid rgba(255,255,255,.25);
  color: rgba(255,255,255,.5); font-size: .78rem; font-weight: 700;
  font-family: inherit; cursor: default; transition: all .2s;
  opacity: 1;
  /* pointer-events must stay ON so the click handler fires */
  pointer-events: auto;
  user-select: none;
}
.kvs-preroll-skip[disabled] {
  cursor: default;
  color: rgba(255,255,255,.45);
}
.kvs-preroll-skip.kvs-skip-ready {
  cursor: pointer;
  background: rgba(255,255,255,.18);
  border-color: rgba(255,255,255,.6);
  color: #fff;
  box-shadow: 0 2px 10px rgba(0,0,0,.4);
}
.kvs-preroll-skip.kvs-skip-ready:hover {
  background: rgba(255,255,255,.28);
  border-color: #fff;
}
.kvs-preroll-skip svg { width: 12px; height: 12px; }

/* Preroll for the single video page (inside kvsp-player-wrap) */
#kvs-video-page .kvsp-player-wrap { position: relative; }

/* ================================================================
   LOGIN / REGISTER REDIRECT PAGES (if using page templates)
================================================================ */
.kvs-auth-page {
  min-height: 80vh; display: flex; align-items: center;
  justify-content: center; padding: 40px 20px;
}
.kvs-auth-card {
  background: var(--card); border: 1px solid var(--brd);
  border-radius: var(--r12); padding: 36px 32px;
  width: 100%; max-width: 420px;
  box-shadow: var(--shadow2);
}
.kvs-auth-logo {
  display: flex; align-items: center; gap: 10px;
  justify-content: center; margin-bottom: 24px;
  text-decoration: none; color: var(--tx);
}
.kvs-auth-logo-icon {
  width: 38px; height: 38px; border-radius: 8px;
  background: linear-gradient(135deg, #1565c0, #42a5f5);
  display: flex; align-items: center; justify-content: center;
  font-size: 15px; font-weight: 900; color: #fff;
}
.kvs-auth-title  { font-size: 1.3rem; font-weight: 800; text-align: center; margin-bottom: 6px; }
.kvs-auth-sub    { font-size: .82rem; color: var(--mu); text-align: center; margin-bottom: 24px; }
.kvs-auth-field  { margin-bottom: 14px; }
.kvs-auth-field label { display: block; font-size: .72rem; font-weight: 700; color: var(--tx2); margin-bottom: 5px; letter-spacing: .03em; text-transform: uppercase; }
.kvs-auth-field input {
  width: 100%; padding: 10px 13px; font-size: .88rem;
  border: 1px solid var(--brd2); border-radius: var(--r6);
  background: var(--card); color: var(--tx); transition: border-color .15s;
}
.kvs-auth-field input:focus { border-color: var(--blue); box-shadow: 0 0 0 3px var(--blueg); outline: none; }
.kvs-auth-btn {
  width: 100%; padding: 12px; border-radius: var(--r6); border: none;
  background: var(--blue2); color: #fff; font-size: .9rem; font-weight: 700;
  font-family: inherit; cursor: pointer; transition: .18s; margin-top: 4px;
}
.kvs-auth-btn:hover { background: var(--blue); }
.kvs-auth-msg { font-size: .8rem; margin-top: 10px; text-align: center; min-height: 20px; }
.kvs-auth-links { font-size: .78rem; color: var(--mu); text-align: center; margin-top: 18px; }
.kvs-auth-links a { color: var(--blue); font-weight: 600; }

/* Mobile columns: see wp_head injection in functions.php */

/* ================================================================
   PRE-ROLL AD — progress bar inside the ad
================================================================ */
.kvs-preroll-progress {
  position: absolute; bottom: 44px; left: 0; right: 0;
  height: 3px; background: rgba(255,255,255,.2);
}
.kvs-preroll-progress-fill {
  height: 100%; background: #4a8fff;
  transition: width .9s linear;
}