/*
Theme Name: VIPROW Sports Green
Theme URI: https://viprow.co.uk
Author: VIPROW
Description: Dark sports streaming theme — black/dark-gray background with green accents. Free APIs, SEO-friendly, fully responsive.
Version: 2.0
*/

/* ─── RESET ─── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:#0d0d0d;color:#e8e8e8;font-family:'Inter',sans-serif;font-size:14px;line-height:1.5}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}
ul{list-style:none}

/* ─── CSS VARIABLES ─── */
:root{
  --green:#00c853;
  --green-dark:#009624;
  --green-dim:rgba(0,200,83,.12);
  --green-border:rgba(0,200,83,.35);
  --bg:#0d0d0d;
  --bg2:#111111;
  --bg3:#181818;
  --bg4:#202020;
  --bg5:#252525;
  --border:#2a2a2a;
  --text:#e8e8e8;
  --muted:#777;
  --white:#ffffff;
  --font-display:'Oswald',sans-serif;
  --font-body:'Inter',sans-serif;
  --radius:8px;
  --radius-sm:4px;
}

/* ─── GOOGLE FONTS ─── */
@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@400;500;600;700&family=Inter:wght@300;400;500;600;700&display=swap');

/* ════════════════════════════════════
   HEADER
════════════════════════════════════ */
#vr-header{background:#0a0a0a;border-bottom:1px solid var(--border);position:sticky;top:0;z-index:200}
.vr-header-top{display:flex;align-items:center;gap:14px;padding:10px 20px;max-width:1320px;margin:0 auto}

/* Logo */
.vr-logo{font-family:var(--font-display);font-size:26px;font-weight:700;letter-spacing:-.5px;flex-shrink:0}
.vr-logo .g{color:var(--green)}
.vr-logo .w{color:#fff}

/* Search */
.vr-search{flex:1;max-width:420px;display:flex;align-items:center;background:var(--bg3);border:1px solid var(--border);border-radius:6px;padding:8px 14px;gap:8px;transition:border-color .2s}
.vr-search:focus-within{border-color:var(--green)}
.vr-search svg{color:var(--muted);flex-shrink:0;width:15px;height:15px}
.vr-search input{background:none;border:none;outline:none;color:var(--text);font-size:13px;flex:1;font-family:var(--font-body)}
.vr-search input::placeholder{color:var(--muted)}

/* Header right */
.vr-header-right{display:flex;align-items:center;gap:10px;margin-left:auto}
.vr-live-btn{background:var(--green);color:#000;font-family:var(--font-display);font-size:12px;font-weight:700;letter-spacing:.8px;padding:7px 14px;border-radius:var(--radius-sm);border:none;cursor:pointer;display:flex;align-items:center;gap:6px;transition:background .2s}
.vr-live-btn:hover{background:var(--green-dark)}
.vr-live-btn::before{content:'';width:7px;height:7px;background:#000;border-radius:50%;animation:pulse 1.2s infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.25}}
.vr-icon-btn{background:var(--bg3);border:1px solid var(--border);color:var(--muted);width:34px;height:34px;border-radius:var(--radius-sm);display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:14px;transition:border-color .2s}
.vr-icon-btn:hover{border-color:var(--green);color:var(--green)}

/* ─── NAV ─── */
#vr-nav{background:#111;border-bottom:1px solid var(--border)}
.vr-nav-inner{max-width:1320px;margin:0 auto;padding:0 20px;display:flex;align-items:center;overflow-x:auto;scrollbar-width:none}
.vr-nav-inner::-webkit-scrollbar{display:none}
.vr-nav-inner a{font-family:var(--font-display);font-size:12px;font-weight:500;letter-spacing:.7px;color:var(--muted);padding:11px 13px;border-bottom:2px solid transparent;white-space:nowrap;transition:color .2s,border-color .2s}
.vr-nav-inner a:hover{color:#fff}
.vr-nav-inner a.active{color:var(--green);border-bottom-color:var(--green)}

/* ════════════════════════════════════
   SHARED COMPONENTS
════════════════════════════════════ */
.vr-wrap{max-width:1320px;margin:0 auto;padding:30px 20px}
.vr-section{margin-bottom:36px}

.vr-section-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px}
.vr-section-head h2{font-family:var(--font-display);font-size:15px;font-weight:600;letter-spacing:.8px;color:#fff;display:flex;align-items:center;gap:8px}
.vr-section-head h2::before{content:'';width:3px;height:18px;background:var(--green);border-radius:2px;display:block;flex-shrink:0}
.vr-section-head a{font-size:11px;color:var(--muted);transition:color .2s}
.vr-section-head a:hover{color:var(--green)}

/* Accent badge */
.vr-badge{background:var(--green);color:#000;font-family:var(--font-display);font-size:10px;font-weight:700;letter-spacing:.8px;padding:2px 7px;border-radius:2px}
.vr-badge-live{animation:pulse-bg 1.5s infinite}
@keyframes pulse-bg{0%,100%{opacity:1}50%{opacity:.7}}

/* Ad slot */
.vr-ad{background:var(--bg3);border:1px dashed var(--border);border-radius:var(--radius);min-height:90px;display:flex;align-items:center;justify-content:center;color:var(--muted);font-size:11px;letter-spacing:.5px;margin-bottom:24px;text-align:center;padding:10px}

/* ════════════════════════════════════
   HERO SECTION
════════════════════════════════════ */
#vr-hero{background:linear-gradient(135deg,#0d0d0d 0%,#0a150a 50%,#0d0d0d 100%);padding:52px 20px;position:relative;overflow:hidden}
#vr-hero::before{content:'';position:absolute;top:0;right:0;bottom:0;width:55%;background:radial-gradient(ellipse at 70% 50%,rgba(0,200,83,.1) 0%,transparent 70%);pointer-events:none}
.vr-hero-inner{max-width:1320px;margin:0 auto;display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:40px}
.vr-hero-badge{display:inline-flex;align-items:center;gap:6px;background:var(--green-dim);border:1px solid var(--green-border);color:var(--green);font-size:10px;font-weight:600;letter-spacing:1.2px;padding:5px 12px;border-radius:3px;margin-bottom:16px;font-family:var(--font-display)}
.vr-hero h1{font-family:var(--font-display);font-size:clamp(34px,5vw,56px);font-weight:700;line-height:1.05;color:#fff;margin-bottom:10px}
.vr-hero h1 .accent{color:var(--green)}
.vr-hero p{color:#999;font-size:15px;line-height:1.7;margin-bottom:28px;max-width:440px}
.vr-hero-btns{display:flex;gap:12px;flex-wrap:wrap}
.vr-btn-primary{background:var(--green);color:#000;font-family:var(--font-display);font-size:13px;font-weight:700;letter-spacing:.5px;padding:11px 24px;border-radius:var(--radius-sm);border:none;cursor:pointer;display:inline-flex;align-items:center;gap:8px;transition:background .2s}
.vr-btn-primary:hover{background:var(--green-dark)}
.vr-btn-outline{background:transparent;color:#fff;font-family:var(--font-display);font-size:13px;font-weight:600;letter-spacing:.5px;padding:11px 24px;border-radius:var(--radius-sm);border:1px solid #444;cursor:pointer;display:inline-flex;align-items:center;gap:8px;transition:border-color .2s,color .2s}
.vr-btn-outline:hover{border-color:var(--green);color:var(--green)}

/* Hero stats */
.vr-hero-stats{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.vr-stat-card{background:var(--bg3);border:1px solid var(--border);border-radius:var(--radius);padding:18px;text-align:center}
.vr-stat-num{font-family:var(--font-display);font-size:26px;font-weight:700;color:var(--green)}
.vr-stat-lbl{font-size:10px;color:var(--muted);letter-spacing:.5px;margin-top:3px}

/* ════════════════════════════════════
   SPORTS CATEGORIES SCROLL
════════════════════════════════════ */
.vr-sports-scroll{display:flex;gap:10px;overflow-x:auto;scrollbar-width:none;padding-bottom:2px}
.vr-sports-scroll::-webkit-scrollbar{display:none}
.vr-sport-pill{flex-shrink:0;display:flex;flex-direction:column;align-items:center;gap:7px;padding:12px 16px;border-radius:var(--radius);background:var(--bg3);border:1px solid var(--border);cursor:pointer;min-width:68px;text-align:center;transition:border-color .2s,background .2s}
.vr-sport-pill:hover,.vr-sport-pill.active{border-color:var(--green);background:var(--green-dim)}
.vr-sport-pill .icon{font-size:24px}
.vr-sport-pill .name{font-size:10px;font-weight:500;color:var(--muted);white-space:nowrap;font-family:var(--font-display);letter-spacing:.3px}
.vr-sport-pill.active .name{color:var(--green)}

/* ════════════════════════════════════
   LIVE MATCH CARDS
════════════════════════════════════ */
.vr-live-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:14px}
.vr-match-card{background:var(--bg3);border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;transition:border-color .2s,transform .2s;cursor:pointer}
.vr-match-card:hover{border-color:#3a3a3a;transform:translateY(-2px)}
.vr-match-card-top{display:flex;align-items:center;justify-content:space-between;padding:10px 12px;border-bottom:1px solid var(--border)}
.vr-viewers{font-size:11px;color:var(--muted);display:flex;align-items:center;gap:4px}
.vr-match-body{padding:14px 12px}
.vr-teams{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px;gap:8px}
.vr-team{display:flex;flex-direction:column;align-items:center;gap:5px;flex:1}
.vr-team-logo{width:46px;height:46px;border-radius:50%;background:var(--bg4);display:flex;align-items:center;justify-content:center;font-size:20px;border:2px solid var(--border);overflow:hidden}
.vr-team-logo img{width:100%;height:100%;object-fit:cover;border-radius:50%}
.vr-team-name{font-family:var(--font-display);font-size:11px;font-weight:500;color:#ccc;text-align:center;line-height:1.2}
.vr-score-box{display:flex;flex-direction:column;align-items:center;gap:2px}
.vr-score{font-family:var(--font-display);font-size:22px;font-weight:700;color:#fff;letter-spacing:2px}
.vr-score-min{font-size:10px;color:var(--green);font-weight:600}
.vr-league-name{font-size:10px;color:var(--muted);text-align:center;margin-bottom:12px}

/* Stream buttons */
.vr-stream-btns{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.vr-stream-btn{background:var(--bg4);color:#ccc;font-family:var(--font-display);font-size:10px;font-weight:600;letter-spacing:.5px;padding:7px;border:1px solid var(--border);border-radius:var(--radius-sm);cursor:pointer;text-align:center;transition:all .2s}
.vr-stream-btn:hover{background:var(--green);color:#000;border-color:var(--green)}
.vr-stream-btn.primary{background:var(--green);color:#000;border-color:var(--green);grid-column:span 2}
.vr-stream-btn.primary:hover{background:var(--green-dark)}

/* ════════════════════════════════════
   SCHEDULE TABLE
════════════════════════════════════ */
.vr-table-wrap{overflow-x:auto}
.vr-table{width:100%;border-collapse:collapse;min-width:560px}
.vr-table th{background:var(--bg4);font-family:var(--font-display);font-size:10px;font-weight:600;letter-spacing:.8px;color:var(--muted);padding:10px 14px;text-align:left;border-bottom:1px solid var(--border)}
.vr-table td{padding:11px 14px;border-bottom:1px solid var(--border);font-size:12px;vertical-align:middle}
.vr-table tr:last-child td{border-bottom:none}
.vr-table tr:hover td{background:rgba(255,255,255,.02)}
.vr-table td strong{color:#fff;font-size:13px}
.vr-table td small{color:var(--muted);display:block;margin-top:1px}
.tag-live{color:var(--green);font-family:var(--font-display);font-size:11px;font-weight:700}
.tag-upcoming{color:var(--muted);font-family:var(--font-display);font-size:11px}
.tag-finished{color:#555;font-family:var(--font-display);font-size:11px}

/* ════════════════════════════════════
   LEAGUES SECTION
════════════════════════════════════ */
.vr-leagues-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:10px}
.vr-league-card{background:var(--bg3);border:1px solid var(--border);border-radius:var(--radius);padding:16px 12px;text-align:center;cursor:pointer;transition:border-color .2s,transform .2s}
.vr-league-card:hover{border-color:var(--green);transform:translateY(-2px)}
.vr-league-logo{width:52px;height:52px;border-radius:50%;background:var(--bg4);display:flex;align-items:center;justify-content:center;font-size:26px;margin:0 auto 8px;border:2px solid var(--border)}
.vr-league-logo img{width:100%;height:100%;border-radius:50%;object-fit:contain}
.vr-league-name{font-family:var(--font-display);font-size:11px;font-weight:600;color:#ccc;line-height:1.3}
.vr-league-country{font-size:10px;color:var(--muted);margin-top:2px}

/* ════════════════════════════════════
   NEWS GRID
════════════════════════════════════ */
.vr-news-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:14px}
.vr-news-card{background:var(--bg3);border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;cursor:pointer;transition:border-color .2s}
.vr-news-card:hover{border-color:#3a3a3a}
.vr-news-thumb{height:120px;background:var(--bg4);overflow:hidden;position:relative}
.vr-news-thumb img{width:100%;height:100%;object-fit:cover;transition:transform .3s}
.vr-news-card:hover .vr-news-thumb img{transform:scale(1.05)}
.vr-news-thumb-placeholder{width:100%;height:100%;display:flex;align-items:center;justify-content:center;font-size:32px}
.vr-news-tag{position:absolute;top:8px;left:8px;background:var(--green);color:#000;font-family:var(--font-display);font-size:9px;font-weight:700;padding:2px 6px;border-radius:2px;letter-spacing:.5px}
.vr-news-body{padding:10px 12px}
.vr-news-title{font-size:12px;font-weight:600;color:#ccc;line-height:1.4;margin-bottom:6px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.vr-news-meta{display:flex;align-items:center;justify-content:space-between;font-size:10px;color:var(--muted)}
.vr-news-source{color:var(--green);font-weight:500}

/* ════════════════════════════════════
   TOOLS SECTION (on homepage)
════════════════════════════════════ */
.vr-tools-home-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px}
.vr-tool-home-card{background:var(--bg3);border:1px solid var(--border);border-radius:var(--radius);padding:16px 12px;text-align:center;cursor:pointer;transition:border-color .2s,transform .2s}
.vr-tool-home-card:hover{border-color:var(--green);transform:translateY(-2px)}
.vr-tool-home-icon{font-size:24px;margin-bottom:8px}
.vr-tool-home-name{font-family:var(--font-display);font-size:11px;font-weight:600;color:#ccc;line-height:1.3}

/* ════════════════════════════════════
   TRENDING / POPULAR
════════════════════════════════════ */
.vr-trending-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:10px}
.vr-trending-card{background:var(--bg3);border:1px solid var(--border);border-radius:var(--radius);padding:12px;display:flex;align-items:center;gap:12px;cursor:pointer;transition:border-color .2s}
.vr-trending-card:hover{border-color:#3a3a3a}
.vr-trending-rank{font-family:var(--font-display);font-size:24px;font-weight:700;color:var(--green);min-width:26px}
.vr-trending-info{flex:1}
.vr-trending-title{font-family:var(--font-display);font-size:12px;font-weight:600;color:#ccc}
.vr-trending-sub{font-size:10px;color:var(--muted);margin-top:2px}
.vr-trending-views{font-size:10px;color:var(--muted);text-align:right;white-space:nowrap}

/* ════════════════════════════════════
   WHY CHOOSE
════════════════════════════════════ */
.vr-features-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:12px}
.vr-feature-card{background:var(--bg3);border:1px solid var(--border);border-radius:var(--radius);padding:20px 16px;text-align:center}
.vr-feature-icon{font-size:28px;margin-bottom:10px}
.vr-feature-title{font-family:var(--font-display);font-size:13px;font-weight:600;color:#fff;margin-bottom:5px}
.vr-feature-desc{font-size:11px;color:var(--muted);line-height:1.5}

/* ════════════════════════════════════
   FAQ
════════════════════════════════════ */
.vr-faq-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.vr-faq-item{background:var(--bg3);border:1px solid var(--border);border-radius:var(--radius);overflow:hidden}
.vr-faq-q{display:flex;align-items:center;justify-content:space-between;padding:14px 16px;cursor:pointer;gap:10px;transition:background .2s}
.vr-faq-q:hover{background:rgba(255,255,255,.02)}
.vr-faq-q span:first-child{font-size:12px;color:#ccc}
.vr-faq-arrow{color:var(--muted);font-size:16px;flex-shrink:0;transition:transform .25s}
.vr-faq-a{display:none;padding:0 16px 14px;font-size:12px;color:var(--muted);line-height:1.7}
.vr-faq-item.open .vr-faq-arrow{transform:rotate(180deg)}
.vr-faq-item.open .vr-faq-a{display:block}

/* ════════════════════════════════════
   FOOTER
════════════════════════════════════ */
#vr-footer{background:#080808;border-top:1px solid var(--border);padding:44px 20px 0}
.vr-footer-grid{max-width:1320px;margin:0 auto;display:grid;grid-template-columns:2.2fr 1fr 1fr 1fr 1.8fr;gap:32px;padding-bottom:32px}
.vr-footer-brand p{font-size:12px;color:var(--muted);line-height:1.8;margin:12px 0}
.vr-socials{display:flex;gap:8px;margin-top:4px}
.vr-social{width:32px;height:32px;background:var(--bg3);border:1px solid var(--border);border-radius:var(--radius-sm);display:flex;align-items:center;justify-content:center;font-size:12px;cursor:pointer;transition:border-color .2s,background .2s}
.vr-social:hover{border-color:var(--green);background:var(--green-dim)}
.vr-footer-col h4{font-family:var(--font-display);font-size:11px;font-weight:600;letter-spacing:.8px;color:#fff;margin-bottom:14px;padding-bottom:8px;border-bottom:1px solid var(--border)}
.vr-footer-col ul{display:flex;flex-direction:column;gap:9px}
.vr-footer-col ul li a{font-size:12px;color:var(--muted);transition:color .2s;display:flex;align-items:center;gap:6px}
.vr-footer-col ul li a:hover{color:var(--green)}
.vr-footer-col ul li a::before{content:'›';color:var(--green)}
.vr-subscribe h4{font-family:var(--font-display);font-size:11px;font-weight:600;letter-spacing:.8px;color:#fff;margin-bottom:8px;padding-bottom:8px;border-bottom:1px solid var(--border)}
.vr-subscribe p{font-size:12px;color:var(--muted);margin-bottom:12px;line-height:1.6}
.vr-subscribe-form{display:flex;gap:8px}
.vr-subscribe-form input{flex:1;background:var(--bg3);border:1px solid var(--border);border-radius:var(--radius-sm);padding:9px 12px;color:var(--text);font-size:12px;font-family:var(--font-body);outline:none;transition:border-color .2s}
.vr-subscribe-form input:focus{border-color:var(--green)}
.vr-subscribe-btn{background:var(--green);color:#000;font-family:var(--font-display);font-size:11px;font-weight:700;padding:9px 14px;border:none;border-radius:var(--radius-sm);cursor:pointer;white-space:nowrap;transition:background .2s}
.vr-subscribe-btn:hover{background:var(--green-dark)}
.vr-footer-bottom{border-top:1px solid var(--border);padding:16px 0;max-width:1320px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:10px}
.vr-footer-bottom p{font-size:11px;color:var(--muted)}
.vr-footer-links{display:flex;gap:16px;flex-wrap:wrap}
.vr-footer-links a{font-size:11px;color:var(--muted);transition:color .2s}
.vr-footer-links a:hover{color:var(--green)}

/* ════════════════════════════════════
   LIVE SCORES TICKER
════════════════════════════════════ */
.vr-ticker{background:#0f0f0f;border-bottom:1px solid var(--border);overflow:hidden;height:32px;display:flex;align-items:center}
.vr-ticker-label{background:var(--green);color:#000;font-family:var(--font-display);font-size:10px;font-weight:700;padding:0 12px;height:100%;display:flex;align-items:center;flex-shrink:0;letter-spacing:.8px}
.vr-ticker-track{display:flex;white-space:nowrap;animation:ticker 30s linear infinite}
.vr-ticker-track:hover{animation-play-state:paused}
@keyframes ticker{0%{transform:translateX(0)}100%{transform:translateX(-50%)}}
.vr-ticker-item{font-size:11px;color:#ccc;padding:0 24px;display:inline-flex;align-items:center;gap:8px}
.vr-ticker-score{color:var(--green);font-weight:600;font-family:var(--font-display)}

/* ════════════════════════════════════
   MODAL (tools)
════════════════════════════════════ */
.vr-overlay{position:fixed;inset:0;background:rgba(0,0,0,.88);z-index:999;display:none;align-items:center;justify-content:center;padding:20px}
.vr-overlay.open{display:flex}
.vr-modal{background:var(--bg2);border:1px solid var(--border);border-radius:10px;padding:28px;width:100%;max-width:520px;position:relative;max-height:90vh;overflow-y:auto}
.vr-modal-close{position:absolute;top:14px;right:16px;background:none;border:none;color:var(--muted);font-size:22px;cursor:pointer}
.vr-modal-close:hover{color:#fff}
.vr-modal-title{font-family:var(--font-display);font-size:19px;font-weight:700;color:#fff;margin-bottom:20px;display:flex;align-items:center;gap:10px}
.vr-modal-body{display:flex;flex-direction:column;gap:14px}

/* ════════════════════════════════════
   LOADING SPINNER
════════════════════════════════════ */
.vr-loading{display:flex;align-items:center;justify-content:center;gap:10px;padding:30px;color:var(--muted);font-size:13px}
.vr-spinner{width:20px;height:20px;border:2px solid var(--border);border-top-color:var(--green);border-radius:50%;animation:spin .7s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.vr-error{text-align:center;padding:20px;color:var(--muted);font-size:12px}
.vr-error a{color:var(--green)}

/* ════════════════════════════════════
   RESPONSIVE
════════════════════════════════════ */
@media(max-width:1100px){.vr-footer-grid{grid-template-columns:1fr 1fr 1fr}}
@media(max-width:768px){
  .vr-hero-inner{grid-template-columns:1fr}
  .vr-hero-stats{display:none}
  .vr-faq-grid{grid-template-columns:1fr}
  .vr-footer-grid{grid-template-columns:1fr 1fr}
  .vr-header-top{flex-wrap:wrap}
  .vr-search{max-width:100%;order:3;flex:1 0 100%}
}
@media(max-width:520px){
  .vr-footer-grid{grid-template-columns:1fr}
  .vr-live-grid{grid-template-columns:1fr}
  .vr-news-grid{grid-template-columns:1fr 1fr}
}