/*
Theme Name: Avsugoi
Theme URI: https://avsugoi.com
Author: Avsugoi
Author URI: https://avsugoi.com
Description: Premium dark tube site with accent color, full-width video grid, 2-column layout, SEO optimized.
Version: 4.0.0
Requires at least: 6.0
Requires PHP: 8.0
License: GPLv2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: avsugoi
*/

/* ========================================
   DESIGN TOKENS — Avsugoi Theme
======================================== */
:root {
    --bg-body: #0a0a0f;
    --bg-header: rgba(16,16,24,.92);
    --bg-footer: #0a0a0f;
    --bg-card: #13131d;
    --bg-card-hover: #1a1a28;
    --bg-section-head: #161622;
    --bg-input: #1a1a28;
    --bg-overlay: rgba(0,0,0,.7);

    --accent: #9b5de5;
    --accent-hover: #b07fe8;
    --accent-dark: #8a4dd4;
    --accent-glow: rgba(155,93,229,.25);
    --accent-subtle: rgba(155,93,229,.08);

    --pink: #e94560;
    --pink-hover: #f06580;

    --text-white: #eee;
    --text-light: #ccc;
    --text-gray: #888;
    --text-dark: #555;
    --text-link: #b07fe8;
    --text-link-hover: #c9a6f0;

    --green: #4caf50;
    --red: #f44336;

    --border: #1e1e2e;
    --border-light: #2a2a3e;

    --radius: 8px;
    --radius-lg: 12px;
    --radius-xl: 16px;

    --font: 'Inter', system-ui, -apple-system, sans-serif;
    --transition: .22s ease;
    --transition-slow: .38s cubic-bezier(.4,0,.2,1);

    --container: 1320px;

    --shadow-card: 0 2px 12px rgba(0,0,0,.3);
    --shadow-card-hover: 0 8px 32px rgba(155,93,229,.15), 0 2px 8px rgba(0,0,0,.4);
    --shadow-glow: 0 0 20px rgba(155,93,229,.3);

    --gradient-accent: linear-gradient(135deg, #9b5de5, #e94560);
    --gradient-header: linear-gradient(90deg, #9b5de5, #7b2ff7, #e94560);
    --gradient-dark: linear-gradient(180deg, rgba(155,93,229,.06) 0%, transparent 100%);
}

/* ========================================
   RESET & BASE
======================================== */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html,body{max-width:100%;width:100%;overflow-x:hidden}
html{font-size:14px;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;scroll-behavior:smooth}
body{font-family:var(--font);background:var(--bg-body);color:var(--text-light);line-height:1.6;min-height:100vh;position:relative}
a{color:var(--text-link);text-decoration:none;transition:color var(--transition)}
a:hover{color:var(--text-link-hover)}
img{max-width:100%;height:auto;display:block}
ul,ol{list-style:none}
input,button,textarea,select{font-family:inherit;font-size:inherit;color:inherit;border:none;outline:none;background:none}
button{cursor:pointer}

/* ========================================
   ANIMATIONS
======================================== */
@keyframes fadeInUp {
    from { opacity: 0; transform: translateY(20px); }
    to   { opacity: 1; transform: translateY(0); }
}
@keyframes shimmer {
    0%   { background-position: -200% 0; }
    100% { background-position: 200% 0; }
}
@keyframes gradientFlow {
    0%   { background-position: 0% 50%; }
    50%  { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}
@keyframes pulseGlow {
    0%,100% { box-shadow: 0 0 8px rgba(155,93,229,.2); }
    50%     { box-shadow: 0 0 20px rgba(155,93,229,.4); }
}
@keyframes slideLeft {
    from { transform: translateX(-100%); }
    to   { transform: translateX(0); }
}
@keyframes slideUp {
    from { transform: translateY(100%); opacity: 0; }
    to   { transform: translateY(0); opacity: 1; }
}

/* Scroll-reveal */
.reveal{opacity:0;transform:translateY(24px);transition:opacity .6s ease,transform .6s ease}
.reveal.visible{opacity:1;transform:translateY(0)}

/* ========================================
   LAYOUT
======================================== */
.wrapper{max-width:var(--container);margin:0 auto;padding:0 16px}

/* 2-column: content + sidebar */
.main-layout{display:flex;gap:24px;align-items:flex-start}
.content-area{flex:1;min-width:0}
.sidebar{width:280px;flex-shrink:0;position:sticky;top:80px}

/* ========================================
   HEADER
======================================== */
.site-header{
    background:var(--bg-header);
    position:sticky;top:0;z-index:1000;
    backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
    border-bottom:none;
}
.site-header::after{
    content:'';display:block;height:3px;
    background:var(--gradient-header);background-size:200% 100%;
    animation:gradientFlow 4s ease infinite;
}
.header-top{display:flex;align-items:center;justify-content:space-between;padding:12px 0;gap:16px}
.site-logo a{color:var(--text-white);font-size:28px;font-weight:800;letter-spacing:-.5px;display:flex;align-items:center;gap:2px;white-space:nowrap;transition:all var(--transition)}
.site-logo a:hover{opacity:.88;color:var(--text-white)}
.site-logo .logo-highlight{color:var(--accent);font-style:italic}
.site-logo img{height:38px;width:auto}

/* Search */
.header-search{flex:1;max-width:520px}
.header-search form{display:flex;background:var(--bg-input);border:1px solid var(--border-light);border-radius:var(--radius);overflow:hidden;transition:all var(--transition)}
.header-search form:focus-within{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-glow)}
.header-search input[type="search"]{flex:1;padding:10px 16px;background:transparent;color:var(--text-white);font-size:13px;font-weight:400}
.header-search input[type="search"]::placeholder{color:var(--text-dark)}
.header-search button{padding:10px 22px;background:var(--gradient-accent);color:#fff;font-size:13px;font-weight:600;letter-spacing:.3px;transition:all var(--transition)}
.header-search button:hover{filter:brightness(1.15)}

/* Navigation */
.main-nav{background:rgba(16,16,24,.6)}
.main-nav ul{display:flex;gap:0}
.main-nav ul li a{
    display:block;padding:11px 22px;
    color:var(--text-gray);font-size:12px;font-weight:600;
    text-transform:uppercase;letter-spacing:.8px;
    transition:all var(--transition);
    position:relative;
}
.main-nav ul li a::after{
    content:'';position:absolute;bottom:0;left:50%;width:0;height:2px;
    background:var(--accent);border-radius:2px;
    transition:all var(--transition-slow);
    transform:translateX(-50%);
}
.main-nav ul li a:hover,.main-nav ul li.current-menu-item a{color:var(--accent)}
.main-nav ul li a:hover::after,.main-nav ul li.current-menu-item a::after{width:60%}
.mobile-toggle{display:none;padding:10px;color:var(--text-white);font-size:22px;background:var(--bg-input);border-radius:var(--radius);transition:background var(--transition)}
.mobile-toggle:hover{background:var(--accent-subtle)}

/* ========================================
   VIDEO SECTIONS
======================================== */
.video-section{margin:24px 0}
.section-head{
    display:flex;align-items:center;justify-content:space-between;
    background:var(--bg-section-head);padding:12px 16px;
    border-left:3px solid var(--accent);
    border-radius:var(--radius) var(--radius) 0 0;
}
.section-head h2{font-size:14px;font-weight:700;color:var(--text-white);text-transform:uppercase;letter-spacing:.5px;display:flex;align-items:center;gap:8px}
.section-head h2 i{color:var(--accent);font-size:15px}
.section-head .more-link{
    font-size:11px;color:var(--accent);font-weight:700;
    text-transform:uppercase;letter-spacing:.5px;
    transition:all var(--transition);
    display:flex;align-items:center;gap:4px;
}
.section-head .more-link::after{content:'→';transition:transform var(--transition)}
.section-head .more-link:hover{color:var(--accent-hover)}
.section-head .more-link:hover::after{transform:translateX(4px)}

/* ========================================
   VIDEO GRID — 5 columns (4 with sidebar)
======================================== */
.video-list{display:grid;grid-template-columns:repeat(5,1fr);gap:10px}
.main-layout .content-area .video-list{grid-template-columns:repeat(4,1fr)}

/* ========================================
   VIDEO CARD — Premium Design
======================================== */
.video-item{
    background:var(--bg-card);overflow:hidden;
    border:1px solid var(--border);
    border-radius:var(--radius-lg);
    transition:all var(--transition-slow);
    box-shadow:var(--shadow-card);
}
.video-item:hover{
    border-color:var(--accent);
    box-shadow:var(--shadow-card-hover);
    transform:translateY(-3px);
    background:var(--bg-card-hover);
}

/* Thumbnail */
.video-item a.thumb-link{display:block;position:relative;aspect-ratio:16/9;overflow:hidden;background:#000;border-radius:var(--radius-lg) var(--radius-lg) 0 0}
.video-item a.thumb-link img{width:100%;height:100%;object-fit:cover;transition:transform var(--transition-slow),filter var(--transition-slow)}
.video-item:hover a.thumb-link img{transform:scale(1.06);filter:brightness(1.08)}

/* Thumb Overlay — Bottom bar with views + duration */
.thumb-overlay{position:absolute;bottom:0;left:0;right:0;display:flex;justify-content:space-between;align-items:center;padding:5px 8px;background:linear-gradient(transparent,rgba(0,0,0,.88));pointer-events:none;z-index:2}
.thumb-views,.thumb-duration{display:flex;align-items:center;gap:4px;font-size:11px;font-weight:600;color:#fff;text-shadow:0 1px 3px rgba(0,0,0,.8)}
.thumb-views .ov-icon,.thumb-duration .ov-icon{font-size:13px;opacity:.8}

/* Quality Badge */
.thumb-quality{position:absolute;top:6px;right:6px;z-index:2;background:var(--gradient-accent);color:#fff;font-size:10px;font-weight:700;font-style:italic;padding:2px 8px;border-radius:4px;letter-spacing:.5px;line-height:1.4;box-shadow:0 1px 4px rgba(0,0,0,.4)}

/* Play icon on hover */
.thumb-play{
    position:absolute;top:50%;left:50%;
    transform:translate(-50%,-50%) scale(0);
    width:48px;height:48px;
    background:rgba(155,93,229,.9);color:#fff;
    border-radius:50%;display:flex;align-items:center;justify-content:center;
    font-size:18px;transition:transform .3s cubic-bezier(.34,1.56,.64,1),opacity .25s ease;
    opacity:0;z-index:3;
    box-shadow:var(--shadow-glow);
}
.video-item:hover .thumb-play{transform:translate(-50%,-50%) scale(1);opacity:1}

/* Rating bar under thumbnail */
.card-rating{display:flex;align-items:center;justify-content:center;gap:4px;padding:5px 0;background:var(--bg-card);font-size:11px;font-weight:700;color:var(--green)}

/* Video Info — centered */
.video-info{padding:8px 10px 12px;background:var(--bg-card);text-align:center}
.video-title{font-size:12px;font-weight:600;color:var(--text-light);line-height:1.4;display:-webkit-box;line-clamp:2;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;margin:0;min-height:2.8em}
.video-title a{color:inherit;transition:color var(--transition)}
.video-title a:hover{color:var(--accent)}
.video-actress{font-size:11px;color:var(--text-gray);margin-top:4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.video-actress a{color:var(--text-gray);transition:color var(--transition)}
.video-actress a:hover{color:var(--accent)}

/* ========================================
   SIDEBAR WIDGETS
======================================== */
.sidebar .widget{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-lg);padding:16px;margin-bottom:20px}
.sidebar .widget-title{
    font-size:13px;font-weight:700;color:var(--text-white);
    text-transform:uppercase;letter-spacing:.5px;
    margin-bottom:14px;padding-bottom:10px;
    border-bottom:1px solid var(--border);
    display:flex;align-items:center;gap:8px;
}
.sidebar .widget-title svg{color:var(--accent);flex-shrink:0}

/* Categories Widget */
.sidebar .widget-categories ul{display:flex;flex-direction:column;gap:0}
.sidebar .widget-categories ul li a{
    display:flex;justify-content:space-between;align-items:center;
    padding:8px 10px;color:var(--text-light);font-size:12px;font-weight:500;
    border-radius:var(--radius);transition:all var(--transition);
}
.sidebar .widget-categories ul li a:hover{background:var(--accent-subtle);color:var(--accent)}
.sidebar .widget-categories .cat-count{
    font-size:10px;font-weight:700;color:var(--text-dark);
    background:var(--bg-body);padding:2px 8px;border-radius:10px;
}

/* Popular Videos Widget */
.sidebar .popular-video-item{display:flex;gap:10px;padding:8px 0;border-bottom:1px solid var(--border)}
.sidebar .popular-video-item:last-child{border-bottom:none;padding-bottom:0}
.sidebar .popular-video-thumb{position:relative;width:100px;flex-shrink:0;border-radius:var(--radius);overflow:hidden;aspect-ratio:16/9}
.sidebar .popular-video-thumb img{width:100%;height:100%;object-fit:cover}
.sidebar .popular-video-thumb .duration{position:absolute;bottom:3px;right:3px;background:rgba(0,0,0,.8);color:#fff;font-size:10px;font-weight:700;padding:1px 5px;border-radius:3px}
.sidebar .popular-video-info{flex:1;min-width:0;display:flex;flex-direction:column;justify-content:center}
.sidebar .popular-video-info .title{font-size:12px;font-weight:600;color:var(--text-light);line-height:1.3;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;margin:0}
.sidebar .popular-video-info .title a{color:inherit;transition:color var(--transition)}
.sidebar .popular-video-info .title a:hover{color:var(--accent)}
.sidebar .popular-video-info .views{font-size:11px;color:var(--text-dark);margin-top:3px}

/* Tags Cloud Widget */
.sidebar .tag-cloud{display:flex;flex-wrap:wrap;gap:6px}
.sidebar .tag-cloud a{
    display:inline-block;padding:4px 12px;
    background:var(--accent-subtle);border:1px solid var(--border);
    border-radius:20px;font-size:11px;color:var(--text-gray);
    transition:all var(--transition);
}
.sidebar .tag-cloud a:hover{border-color:var(--accent);color:var(--accent);background:rgba(155,93,229,.12)}

/* ========================================
   SINGLE VIDEO PAGE — Player
======================================== */
.player-wrap{background:#000;margin-bottom:0;position:relative}
.player-wrap::before{content:'';position:absolute;inset:-40px -40px 0;background:radial-gradient(ellipse at center top,rgba(155,93,229,.12) 0%,transparent 70%);pointer-events:none;z-index:0}
.player-wrap iframe,.player-wrap video{width:100%;aspect-ratio:16/9;display:block}

/* Custom HLS Player */
.custom-player{position:relative;background:#000;width:100%;overflow:hidden;z-index:1}
.custom-player video{width:100%;display:block;object-fit:contain;aspect-ratio:16/9}
.custom-player:fullscreen,.custom-player:-webkit-full-screen,.custom-player:-moz-full-screen,.custom-player:-ms-fullscreen{background:#000;width:100vw;height:100vh}
.custom-player:fullscreen video,.custom-player:-webkit-full-screen video,.custom-player:-moz-full-screen video,.custom-player:-ms-fullscreen video{width:100%;height:100%;object-fit:contain;aspect-ratio:auto}
.custom-player:fullscreen .player-controls,.custom-player:-webkit-full-screen .player-controls{opacity:1;z-index:20}

/* Player Overlay */
.player-overlay{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;background:linear-gradient(180deg,rgba(0,0,0,.4) 0%,rgba(0,0,0,.1) 40%,rgba(0,0,0,.1) 60%,rgba(0,0,0,.4) 100%);z-index:10;cursor:pointer;transition:opacity .3s}

/* Branding — top left */
.player-brand{position:absolute;top:15px;left:18px;font-size:20px;font-weight:900;color:rgba(255,255,255,.9);letter-spacing:-.5px;user-select:none;text-shadow:0 2px 12px rgba(0,0,0,.8);z-index:12}
.player-brand .brand-av{color:var(--accent);font-style:italic}
.player-brand .brand-quality{display:inline-block;margin-left:8px;padding:2px 8px;font-size:10px;background:var(--gradient-accent);color:#fff;border-radius:4px;vertical-align:middle;font-weight:800;letter-spacing:.5px}

/* Video title in player top */
.player-title{position:absolute;top:15px;left:18px;right:80px;font-size:15px;font-weight:600;color:rgba(255,255,255,.95);text-shadow:0 2px 8px rgba(0,0,0,.8);z-index:12;display:none;line-height:1.3}

/* Big Play Button */
.play-btn{
    width:72px;height:72px;border-radius:50%;
    background:rgba(155,93,229,.9);color:#fff;font-size:28px;
    display:flex;align-items:center;justify-content:center;
    border:3px solid rgba(255,255,255,.25);cursor:pointer;
    box-shadow:0 4px 30px rgba(155,93,229,.4);
    transition:transform .3s cubic-bezier(.34,1.56,.64,1),background .25s ease,box-shadow .25s ease;
}
.play-btn:hover{transform:scale(1.12);background:var(--accent);box-shadow:0 6px 40px rgba(155,93,229,.6)}

/* Player Controls Bar */
.player-controls{position:absolute;bottom:0;left:0;right:0;display:flex;align-items:center;gap:10px;padding:10px 14px 8px;background:linear-gradient(transparent,rgba(0,0,0,.9));z-index:11;transition:opacity .3s;opacity:0}
.custom-player:hover .player-controls{opacity:1}

.ctrl-play,.ctrl-vol,.ctrl-fs{width:34px;height:34px;display:flex;align-items:center;justify-content:center;font-size:16px;color:rgba(255,255,255,.85);background:rgba(255,255,255,.08);border:none;cursor:pointer;border-radius:6px;transition:all var(--transition)}
.ctrl-play:hover,.ctrl-vol:hover,.ctrl-fs:hover{background:rgba(155,93,229,.3);color:#fff}

.progress-wrap{flex:1;display:flex;align-items:center;gap:0;cursor:pointer;height:28px}
.progress-bar{flex:1;height:4px;background:rgba(255,255,255,.12);border-radius:4px;position:relative;overflow:hidden;transition:height .15s}
.progress-wrap:hover .progress-bar{height:7px}
.progress-buffer{position:absolute;inset:0;height:100%;background:rgba(255,255,255,.08);border-radius:4px;width:0}
.progress-fill{position:absolute;inset:0;height:100%;background:var(--gradient-accent);border-radius:4px;width:0;z-index:1}
.time-display{font-size:12px;color:rgba(255,255,255,.7);font-family:var(--font);white-space:nowrap;min-width:100px;text-align:center;font-variant-numeric:tabular-nums}

/* ========================================
   SINGLE VIDEO — Details
======================================== */
.video-detail-wrap{background:var(--bg-card);padding:20px;margin-bottom:20px;border-radius:0 0 var(--radius-lg) var(--radius-lg);border:1px solid var(--border);border-top:none}
.video-detail-title{font-size:19px;font-weight:700;color:var(--text-white);margin-bottom:14px;line-height:1.4}

.video-toolbar{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:12px;padding:14px 0;border-top:1px solid var(--border);border-bottom:1px solid var(--border)}
.video-stats-left{display:flex;align-items:center;gap:20px;font-size:12px;color:var(--text-gray)}
.video-stats-left span{display:flex;align-items:center;gap:5px}
.video-stats-left .icon{font-size:14px;color:var(--accent)}

.rating-btns{display:flex;gap:8px}
.rate-btn{
    display:flex;align-items:center;gap:6px;
    padding:8px 18px;font-size:13px;font-weight:700;
    border-radius:var(--radius);border:1px solid var(--border-light);
    transition:all var(--transition);
}
.rate-btn:hover{border-color:var(--accent);background:var(--accent-subtle)}
.rate-btn.like{color:var(--green)}
.rate-btn.like:hover,.rate-btn.like.active{background:var(--green);color:#fff;border-color:var(--green)}
.rate-btn.dislike{color:var(--red)}
.rate-btn.dislike:hover,.rate-btn.dislike.active{background:var(--red);color:#fff;border-color:var(--red)}

.big-rating{display:flex;align-items:center;gap:10px;margin:14px 0}
.big-rating-bar{flex:1;height:5px;background:var(--red);border-radius:4px;overflow:hidden}
.big-rating-bar span{display:block;height:100%;background:linear-gradient(90deg,var(--green),#66bb6a);border-radius:4px;transition:width 1s ease}
.big-rating-pct{font-size:14px;font-weight:700;color:var(--green);min-width:40px;text-align:right}

.video-desc{color:var(--text-gray);font-size:13px;line-height:1.8;padding:14px 0;border-bottom:1px solid var(--border)}

/* Video Tags — Pill Style */
.video-tags-wrap{display:flex;flex-wrap:wrap;gap:8px;padding:14px 0}
.video-tags-wrap a{
    display:inline-flex;align-items:center;
    padding:5px 14px;
    background:var(--accent-subtle);border:1px solid var(--border);
    border-radius:20px;font-size:11px;font-weight:500;color:var(--text-gray);
    transition:all var(--transition);
}
.video-tags-wrap a:hover{border-color:var(--accent);color:var(--accent);background:rgba(155,93,229,.12);transform:translateY(-1px)}

.info-row{display:flex;flex-wrap:wrap;gap:8px;padding:10px 0;font-size:13px;color:var(--text-gray);align-items:center}
.info-row strong{color:var(--text-light);margin-right:2px;font-weight:600}
.info-row a{
    color:var(--accent);padding:3px 10px;
    border:1px solid var(--border);border-radius:20px;font-size:11px;
    transition:all var(--transition);
}
.info-row a:hover{border-color:var(--accent);background:var(--accent-subtle)}

/* Related Videos — Horizontal Scroll */
.related-scroll .video-list{
    display:flex;gap:12px;
    overflow-x:auto;overflow-y:hidden;
    scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch;
    padding-bottom:8px;
    scrollbar-width:thin;scrollbar-color:var(--accent) var(--bg-card);
}
.related-scroll .video-list::-webkit-scrollbar{height:4px}
.related-scroll .video-list::-webkit-scrollbar-track{background:var(--bg-card);border-radius:4px}
.related-scroll .video-list::-webkit-scrollbar-thumb{background:var(--accent);border-radius:4px}
.related-scroll .video-item{min-width:220px;max-width:260px;flex-shrink:0;scroll-snap-align:start}

/* ========================================
   SEO BLOCK — H1 with accent border
======================================== */
.seo-block{background:var(--bg-card);padding:18px 20px;margin:20px 0;border-left:3px solid var(--accent);border-radius:var(--radius-lg);border:1px solid var(--border);border-left:3px solid var(--accent)}
.seo-block h1{font-size:18px;font-weight:700;color:var(--text-white);margin-bottom:4px;line-height:1.3}
.seo-block p{font-size:12px;color:var(--text-gray);line-height:1.6}

/* ========================================
   SORT BAR
======================================== */
.sort-bar{display:flex;align-items:center;justify-content:space-between;background:var(--bg-section-head);padding:10px 16px;margin-bottom:1px;border-radius:0 0 var(--radius) var(--radius)}
.sort-bar .showing{font-size:12px;color:var(--text-gray)}
.sort-options{display:flex;gap:0}
.sort-options a{padding:6px 16px;font-size:12px;font-weight:600;color:var(--text-gray);transition:all var(--transition);border-bottom:2px solid transparent;border-radius:var(--radius) var(--radius) 0 0}
.sort-options a:hover,.sort-options a.active{color:var(--accent);border-bottom-color:var(--accent);background:var(--accent-subtle)}

/* ========================================
   ARCHIVE / TAXONOMY HEADER
======================================== */
.archive-head{background:var(--bg-card);padding:20px;margin:20px 0 15px;border-left:3px solid var(--accent);border-radius:var(--radius-lg);border:1px solid var(--border);border-left:3px solid var(--accent)}
.archive-head h1{font-size:22px;font-weight:700;color:var(--text-white);margin-bottom:4px}
.archive-head p{font-size:12px;color:var(--text-gray)}

/* ========================================
   PAGINATION
======================================== */
.pagination{display:flex;justify-content:center;gap:6px;padding:28px 0}
.pagination a,.pagination span{
    display:inline-flex;align-items:center;justify-content:center;
    min-width:38px;height:38px;padding:0 14px;
    font-size:12px;font-weight:700;border-radius:var(--radius);
    background:var(--bg-card);color:var(--text-gray);
    transition:all var(--transition);border:1px solid var(--border);
}
.pagination a:hover{background:var(--accent);color:#fff;border-color:var(--accent);transform:translateY(-1px)}
.pagination .current{background:var(--accent);color:#fff;border-color:var(--accent);box-shadow:var(--shadow-glow)}
.pagination .dots{background:none;border:none}

/* ========================================
   BREADCRUMBS
======================================== */
.breadcrumbs{padding:14px 0;font-size:12px;color:var(--text-dark)}
.breadcrumbs a{color:var(--text-gray);transition:color var(--transition)}
.breadcrumbs a:hover{color:var(--accent)}
.breadcrumbs .sep{margin:0 8px;color:var(--text-dark)}

/* ========================================
   FOOTER
======================================== */
.site-footer{
    background:var(--bg-footer);margin-top:40px;padding:28px 0;
    border-top:none;position:relative;
}
.site-footer::before{
    content:'';display:block;height:3px;position:absolute;top:0;left:0;right:0;
    background:var(--gradient-header);background-size:200% 100%;
    animation:gradientFlow 4s ease infinite;
}
.footer-desc{
    margin:0 auto 24px;
    background:rgba(20,20,30,.6);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
    border:1px solid var(--border);
    border-radius:var(--radius-lg);padding:20px 24px;
    text-align:center;
}
.footer-desc h2{font-size:15px;font-weight:700;margin-bottom:10px;
    background:var(--gradient-accent);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
    display:inline-block;
}
.footer-desc p{font-size:12px;color:var(--text-gray);line-height:2;letter-spacing:.2px}
.footer-links{display:flex;justify-content:center;gap:28px;flex-wrap:wrap;margin-bottom:14px}
.footer-links a{color:var(--text-gray);font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:.5px;transition:all var(--transition)}
.footer-links a:hover{color:var(--accent)}
.footer-copy{text-align:center;font-size:11px;color:var(--text-dark)}

/* ========================================
   SEARCH & 404 PAGE
======================================== */
.search-header{background:var(--bg-card);padding:20px;margin-bottom:15px;border-left:3px solid var(--accent);border-radius:var(--radius-lg);border:1px solid var(--border);border-left:3px solid var(--accent)}
.search-header h1{font-size:18px;font-weight:700;color:var(--text-white)}
.search-header .query{color:var(--accent)}
.search-header .count{font-size:12px;color:var(--text-gray);margin-top:3px}
.no-results{text-align:center;padding:60px 15px;background:var(--bg-card);border-radius:var(--radius-lg)}
.no-results h2{font-size:18px;color:var(--text-white);margin-bottom:8px}
.no-results p{color:var(--text-gray);margin-bottom:15px;font-size:13px}
.error-404{text-align:center;padding:60px 15px}
.error-404 .code{font-size:100px;font-weight:900;background:var(--gradient-accent);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;line-height:1}
.error-404 h1{font-size:22px;color:var(--text-white);margin:10px 0}
.error-404 p{color:var(--text-gray);margin-bottom:20px;font-size:13px}
.error-404 .back-home{display:inline-block;padding:10px 24px;background:var(--gradient-accent);color:#fff;font-weight:700;font-size:13px;border-radius:var(--radius);transition:all var(--transition)}
.error-404 .back-home:hover{filter:brightness(1.15);transform:translateY(-1px);color:#fff}

/* Page */
.page-content{background:var(--bg-card);padding:24px;margin-bottom:20px;border-radius:var(--radius-lg);border:1px solid var(--border)}
.page-content h1{font-size:22px;font-weight:700;color:var(--text-white);margin-bottom:15px;padding-bottom:10px;border-bottom:1px solid var(--border)}
.page-content p{margin-bottom:12px;line-height:1.7;color:var(--text-light)}
.page-content a{color:var(--accent)}

/* Search Form */
.inline-search{display:flex;max-width:380px;margin:0 auto}
.inline-search input[type="search"]{flex:1;padding:10px 14px;background:var(--bg-input);border:1px solid var(--border-light);color:var(--text-white);font-size:13px;border-radius:var(--radius) 0 0 var(--radius)}
.inline-search input::placeholder{color:var(--text-dark)}
.inline-search button{padding:10px 20px;background:var(--gradient-accent);color:#fff;font-weight:700;font-size:13px;border-radius:0 var(--radius) var(--radius) 0;transition:filter var(--transition)}
.inline-search button:hover{filter:brightness(1.15)}

/* ========================================
   TERM LISTING GRID
======================================== */
.term-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:12px;margin-top:20px;padding-bottom:20px}
.term-card{
    display:flex;align-items:center;justify-content:space-between;
    padding:14px 18px;background:var(--bg-card);
    border:1px solid var(--border);border-radius:var(--radius-lg);
    transition:all var(--transition-slow);text-decoration:none;
}
.term-card:hover{border-color:var(--accent);background:var(--bg-card-hover);transform:translateY(-2px);box-shadow:var(--shadow-card-hover)}
.term-name{font-size:13px;font-weight:700;color:var(--text-light);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:1;margin-right:10px}
.term-card:hover .term-name{color:var(--accent)}
.term-count{font-size:11px;color:var(--text-dark);white-space:nowrap;display:flex;align-items:center;gap:4px;flex-shrink:0;background:var(--bg-body);padding:2px 8px;border-radius:10px}

/* ========================================
   MOBILE MENU
======================================== */
.mobile-menu{display:none;position:fixed;inset:0;z-index:9999;background:rgba(0,0,0,.5);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px)}
.mobile-menu.active{display:block}
.mobile-menu-inner{
    position:absolute;left:0;top:0;bottom:0;width:280px;
    background:var(--bg-card);padding:20px;
    overflow-y:auto;animation:slideLeft .3s cubic-bezier(.4,0,.2,1);
    border-right:1px solid var(--border);
    box-shadow:4px 0 24px rgba(0,0,0,.5);
}
.mobile-menu .close-btn{display:flex;justify-content:flex-end;padding:5px;color:var(--text-white);font-size:22px;margin-bottom:20px;cursor:pointer;transition:color var(--transition)}
.mobile-menu .close-btn:hover{color:var(--accent)}
.mobile-menu ul li a{
    display:flex;align-items:center;gap:10px;
    padding:14px 0;color:var(--text-light);font-size:14px;font-weight:600;
    border-bottom:1px solid var(--border);text-transform:uppercase;letter-spacing:.5px;
    transition:all var(--transition);
}
.mobile-menu ul li a:hover{color:var(--accent);padding-left:8px}

/* ========================================
   MOBILE BOTTOM NAVIGATION
======================================== */
.mobile-bottom-nav{
    display:none;position:fixed;bottom:0;left:0;right:0;z-index:9998;
    background:rgba(16,16,24,.95);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
    border-top:1px solid var(--border);
    padding:6px 0;padding-bottom:max(6px,env(safe-area-inset-bottom));
}
.mobile-bottom-nav .nav-items{display:flex;justify-content:space-around;align-items:center}
.mobile-bottom-nav .nav-item{
    display:flex;flex-direction:column;align-items:center;gap:3px;
    padding:6px 12px;color:var(--text-dark);font-size:10px;font-weight:600;
    text-transform:uppercase;letter-spacing:.3px;
    transition:color var(--transition);text-decoration:none;cursor:pointer;background:none;border:none;
}
.mobile-bottom-nav .nav-item i{font-size:18px}
.mobile-bottom-nav .nav-item:hover,.mobile-bottom-nav .nav-item.active{color:var(--accent)}

/* Mobile Search Overlay */
.mobile-search-overlay{
    display:none;position:fixed;top:0;left:0;right:0;z-index:10000;
    background:var(--bg-card);
    border-bottom:1px solid var(--border);
    box-shadow:0 4px 16px rgba(0,0,0,.5);
    animation:slideUp .25s ease;
}
.mobile-search-overlay.active{display:block}
.mobile-search-inner{display:flex;align-items:center;gap:10px;padding:12px 16px}
.mobile-search-overlay form{display:flex;gap:8px;flex:1}
.mobile-search-overlay input[type="search"]{
    flex:1;padding:12px 16px;background:var(--bg-input);
    border:1px solid var(--border-light);border-radius:var(--radius);
    color:var(--text-white);font-size:15px;
}
.mobile-search-overlay button[type="submit"]{padding:12px 16px;background:var(--gradient-accent);color:#fff;font-weight:700;border-radius:var(--radius);font-size:16px}
.mobile-search-overlay .close-search{color:var(--text-gray);font-size:22px;cursor:pointer;background:none;border:none;padding:8px;flex-shrink:0;transition:color var(--transition)}
.mobile-search-overlay .close-search:hover{color:var(--accent)}

/* ========================================
   WP ADMIN BAR OFFSET
======================================== */
body.admin-bar .site-header{top:32px}
body.admin-bar .mobile-bottom-nav{bottom:0}
body.admin-bar .mobile-search-overlay{top:32px}
@media(max-width:782px){
    body.admin-bar .site-header{top:46px}
    body.admin-bar .mobile-search-overlay{top:46px}
}

/* ========================================
   RESPONSIVE — 5 cols → 2 cols (10 posts fit perfectly)
======================================== */
@media(max-width:900px){
    .video-list{grid-template-columns:repeat(2,1fr)}
    .main-nav{display:none}
    .mobile-toggle{display:flex}
    .mobile-bottom-nav{display:block}
    body{padding-bottom:60px}
    .header-search{max-width:360px}
}
@media(max-width:600px){
    .header-search{display:none}
    .header-top{padding:8px 0}
    .site-logo a{font-size:22px}
    .video-detail-title{font-size:16px}
    .sort-bar{flex-direction:column;align-items:flex-start;gap:6px}
    .sort-options{display:flex;overflow-x:auto;-webkit-overflow-scrolling:touch;width:100%;scrollbar-width:none}
    .sort-options::-webkit-scrollbar{display:none}
    .sort-options a{white-space:nowrap;padding:6px 12px;font-size:11px;flex-shrink:0}
    .footer-links{flex-direction:column;align-items:center;gap:10px}
    .play-btn{width:58px;height:58px;font-size:22px}
    .player-brand{font-size:16px;top:10px;left:12px}
    .video-detail-wrap{padding:16px}
    .archive-head{padding:16px}
    .site-footer{padding-bottom:70px}
}

/* ========================================
   UTILITY
======================================== */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0}