/*
Theme Name: 4x4Auto Mega Theme
Theme URI: https://4x4auto.pk
Author: 4x4Auto.pk
Author URI: https://4x4auto.pk
Description: Pakistan's #1 Hybrid Cars, 4x4 SUVs & EV News theme — digitalized cyber design with matrix rain, live news, AdSense integration, affiliate earnings, and AI chatbot.
Version: 2.0
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: x4auto
*/

/* ════════════════════════════════════════════
   ROOT VARIABLES & RESET
════════════════════════════════════════════ */
:root{
  --bg:#020b12;
  --surface:#061520;
  --card:rgba(0,245,255,0.04);
  --border:rgba(0,245,255,0.18);
  --border2:rgba(81,255,122,0.15);
  --text:#e8f4ff;
  --muted:#7a9bb5;
  --neon:#00f5ff;
  --green:#51ff7a;
  --orange:#ffb347;
  --red:#ff4b6e;
  --purple:#b06aff;
  --gold:#ffd700;
}
*{box-sizing:border-box;margin:0;padding:0;font-family:'Segoe UI',Arial,sans-serif;}

body{
  background:var(--bg);
  color:var(--text);
  min-height:100vh;
  overflow-x:hidden;
}

#matrixCanvas{
  position:fixed;top:0;left:0;width:100%;height:100%;
  opacity:.06;z-index:0;pointer-events:none;
}

header,main,footer,.ticker-wrap,.breakingBar{position:relative;z-index:2;}
a{color:inherit;text-decoration:none;}

/* ════ BREAKING BAR ════ */
.breakingBar{
  background:linear-gradient(90deg,#ff4b6e,#ff8c00);
  padding:9px 20px;
  display:flex;align-items:center;gap:12px;
  font-size:13px;font-weight:800;overflow:hidden;
}
.breakLabel{
  background:rgba(0,0,0,.35);padding:3px 10px;
  border-radius:4px;white-space:nowrap;flex-shrink:0;
}
.breakScroll{
  white-space:nowrap;
  animation:scrollLeft 38s linear infinite;
}
@keyframes scrollLeft{from{transform:translateX(100vw);}to{transform:translateX(-100%);}}

/* ════ HEADER ════ */
header{
  position:sticky;top:0;z-index:999;
  background:rgba(2,11,18,0.92);
  backdrop-filter:blur(20px);
  border-bottom:1px solid var(--border);
  box-shadow:0 0 30px rgba(0,245,255,0.08);
}
.nav{
  max-width:1200px;margin:auto;
  padding:14px 20px;
  display:flex;justify-content:space-between;align-items:center;gap:16px;
}
.logo{font-size:26px;font-weight:900;letter-spacing:1.5px;text-shadow:0 0 20px var(--neon);}
.logo span{color:var(--neon);}
.logo em{color:var(--green);font-style:normal;font-size:12px;display:block;letter-spacing:3px;margin-top:-4px;opacity:.8;}
.menu{display:flex;flex-wrap:wrap;gap:6px;font-size:13px;}
.menu a{
  padding:7px 14px;border-radius:8px;
  border:1px solid rgba(0,245,255,0.12);color:var(--muted);transition:.2s;
}
.menu a:hover{border-color:var(--neon);color:var(--neon);box-shadow:0 0 12px rgba(0,245,255,0.25);}
.liveBar{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--green);font-weight:700;}
.liveDot{
  width:8px;height:8px;border-radius:50%;background:var(--green);
  animation:pulse 1.2s ease-in-out infinite;
}
@keyframes pulse{0%,100%{box-shadow:0 0 0 0 rgba(81,255,122,0.7);}50%{box-shadow:0 0 0 6px rgba(81,255,122,0);}}
#liveClock{
  font-size:12px;color:var(--muted);font-variant-numeric:tabular-nums;
  background:rgba(0,0,0,0.4);padding:5px 12px;border-radius:8px;
  border:1px solid rgba(255,255,255,0.08);
}

/* ════ TICKER ════ */
.ticker-wrap{
  background:rgba(0,245,255,0.04);
  border-bottom:1px solid var(--border);overflow:hidden;padding:12px 0;
}
.ticker-inner{
  display:flex;align-items:center;white-space:nowrap;
  animation:ticker 60s linear infinite;
}
.ticker-inner:hover{animation-play-state:paused;}
@keyframes ticker{from{transform:translateX(0);}to{transform:translateX(-50%);}}
.tick-item{display:inline-flex;align-items:center;gap:8px;padding:0 28px;font-size:13px;color:var(--neon);font-weight:600;}
.tick-sep{color:var(--border);font-size:18px;}

/* ════ HERO ════ */
.hero{
  max-width:1200px;margin:auto;
  padding:60px 20px 40px;
  display:grid;grid-template-columns:1.3fr 0.7fr;gap:30px;align-items:center;
}
.heroLeft .eyebrow{
  display:inline-flex;align-items:center;gap:8px;
  padding:8px 16px;border-radius:999px;
  background:rgba(0,245,255,0.08);border:1px solid var(--border);
  color:var(--green);font-size:13px;font-weight:700;margin-bottom:20px;
}
.heroLeft h1{font-size:clamp(32px,5vw,60px);line-height:1.05;margin-bottom:20px;letter-spacing:-.5px;}
.heroLeft h1 .hi{color:var(--neon);text-shadow:0 0 30px rgba(0,245,255,0.6);}
.heroLeft h1 .h2{color:var(--green);}
.heroLeft p{color:var(--muted);font-size:17px;line-height:1.75;margin-bottom:26px;}
.searchWrap{
  display:flex;gap:10px;padding:6px;
  background:rgba(0,245,255,0.05);border:1px solid var(--border);
  border-radius:16px;margin-bottom:20px;
}
.searchWrap input{
  flex:1;padding:12px 16px;border:none;background:transparent;
  color:white;font-size:14px;outline:none;
}
.searchWrap input::placeholder{color:var(--muted);}
.btnSearch{
  padding:12px 22px;border:none;border-radius:12px;cursor:pointer;
  background:linear-gradient(135deg,var(--neon),var(--green));
  color:#001016;font-weight:800;font-size:14px;white-space:nowrap;
  box-shadow:0 0 20px rgba(0,245,255,0.3);transition:.2s;
}
.btnSearch:hover{transform:scale(1.04);box-shadow:0 0 35px rgba(0,245,255,0.5);}
.hotTags{display:flex;flex-wrap:wrap;gap:8px;}
.hotTags a{
  padding:6px 12px;border-radius:8px;
  background:rgba(255,255,255,0.05);border:1px solid rgba(255,255,255,0.1);
  font-size:12px;color:var(--muted);transition:.2s;
}
.hotTags a:hover{border-color:var(--neon);color:var(--neon);}

/* hero radar card */
.radarCard{
  background:linear-gradient(135deg,rgba(0,245,255,0.06),rgba(81,255,122,0.04));
  border:1px solid var(--border);border-radius:24px;padding:24px;
  box-shadow:0 0 60px rgba(0,245,255,0.08),inset 0 0 40px rgba(0,0,0,.3);
}
.radarCard h3{font-size:18px;margin-bottom:6px;color:var(--neon);}
.radarCard .sub{color:var(--muted);font-size:13px;margin-bottom:18px;line-height:1.6;}
.statGrid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;}
.statBox{
  background:rgba(0,0,0,0.4);border:1px solid var(--border);
  border-radius:14px;padding:16px;text-align:center;
}
.statBox .num{
  font-size:28px;font-weight:900;
  background:linear-gradient(135deg,var(--neon),var(--green));
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;display:block;
}
.statBox .lbl{font-size:11px;color:var(--muted);margin-top:4px;}
.trendItem{
  display:flex;justify-content:space-between;align-items:center;
  padding:9px 0;border-bottom:1px solid rgba(255,255,255,0.06);font-size:13px;
}
.trendItem:last-child{border:none;}
.trendBar{
  height:4px;border-radius:99px;
  background:linear-gradient(90deg,var(--neon),var(--green));
  margin-top:4px;transition:width .8s ease;
}

/* ════ SECTIONS ════ */
section{max-width:1200px;margin:auto;padding:40px 20px;}
.secHead{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;margin-bottom:24px;}
.secHead h2{
  font-size:clamp(24px,3vw,34px);
  background:linear-gradient(90deg,var(--text),var(--neon));
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;
}
.secHead a{font-size:13px;color:var(--neon);font-weight:700;border-bottom:1px solid var(--neon);white-space:nowrap;}
.secDesc{color:var(--muted);font-size:14px;margin-top:4px;line-height:1.6;}

/* ════ GRIDS ════ */
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;}
.grid4{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;}
.grid2{display:grid;grid-template-columns:repeat(2,1fr);gap:18px;}

/* ════ CARDS ════ */
.card{
  background:var(--card);border:1px solid var(--border);
  border-radius:20px;padding:22px;transition:.25s;position:relative;overflow:hidden;cursor:pointer;
}
.card::before{
  content:'';position:absolute;top:0;left:0;right:0;height:2px;
  background:linear-gradient(90deg,transparent,var(--neon),transparent);opacity:0;transition:.25s;
}
.card:hover::before{opacity:1;}
.card:hover{transform:translateY(-6px);border-color:rgba(0,245,255,0.4);box-shadow:0 20px 60px rgba(0,245,255,0.12);}
.tag{display:inline-block;padding:5px 12px;border-radius:999px;font-size:11px;font-weight:700;letter-spacing:.5px;margin-bottom:12px;}
.tag-neon{background:rgba(0,245,255,0.12);color:var(--neon);border:1px solid rgba(0,245,255,0.25);}
.tag-green{background:rgba(81,255,122,0.12);color:var(--green);border:1px solid rgba(81,255,122,0.25);}
.tag-orange{background:rgba(255,179,71,0.12);color:var(--orange);border:1px solid rgba(255,179,71,0.25);}
.tag-red{background:rgba(255,75,110,0.12);color:var(--red);border:1px solid rgba(255,75,110,0.25);}
.tag-purple{background:rgba(176,106,255,0.12);color:var(--purple);border:1px solid rgba(176,106,255,0.25);}
.tag-gold{background:rgba(255,215,0,0.12);color:var(--gold);border:1px solid rgba(255,215,0,0.25);}
.card h3{font-size:18px;margin-bottom:10px;line-height:1.35;}
.card p{color:var(--muted);font-size:14px;line-height:1.7;margin-bottom:16px;}
.cardLink{display:inline-flex;align-items:center;gap:6px;color:var(--green);font-weight:700;font-size:13px;}
.cardLink:hover{color:var(--neon);}
.featCard{grid-column:span 2;background:linear-gradient(135deg,rgba(0,245,255,0.06),rgba(81,255,122,0.03));border:1px solid rgba(0,245,255,0.25);border-radius:24px;padding:30px;}
.featCard h3{font-size:24px;}
.newsMeta{display:flex;align-items:center;gap:12px;font-size:12px;color:var(--muted);margin-bottom:10px;}
.newsMeta .dot{width:4px;height:4px;border-radius:50%;background:var(--border);}

/* ════ ADS ════ */
.adZone{max-width:1200px;margin:16px auto;padding:0 20px;}
.adBox{
  min-height:100px;border:1px dashed rgba(0,245,255,0.2);border-radius:16px;
  background:rgba(0,245,255,0.02);display:grid;place-items:center;
  padding:20px;color:var(--muted);font-size:13px;position:relative;
}
.adLabel{position:absolute;top:8px;left:12px;font-size:10px;color:rgba(255,255,255,0.2);letter-spacing:1px;text-transform:uppercase;}

/* ════ EARNING ════ */
.earnCard{
  background:linear-gradient(135deg,rgba(255,215,0,0.06),rgba(255,179,71,0.04));
  border:1px solid rgba(255,215,0,0.2);border-radius:20px;padding:24px;transition:.25s;
}
.earnCard:hover{border-color:var(--gold);box-shadow:0 0 30px rgba(255,215,0,0.12);}
.earnCard .earnNum{font-size:32px;font-weight:900;color:var(--gold);text-shadow:0 0 20px rgba(255,215,0,0.5);}
.earnBadge{display:inline-block;padding:4px 10px;border-radius:999px;background:rgba(255,215,0,0.15);color:var(--gold);font-size:11px;font-weight:700;margin-bottom:12px;}

/* ════ TOOLS ════ */
.toolCard{background:rgba(0,0,0,0.4);border:1px solid var(--border);border-radius:20px;padding:24px;}
.toolCard h3{font-size:20px;margin-bottom:18px;color:var(--neon);}
.toolCard label{font-size:13px;color:var(--muted);display:block;margin-bottom:6px;}
.toolCard input,.toolCard select{
  width:100%;padding:13px 14px;border-radius:10px;
  border:1px solid var(--border);background:rgba(0,245,255,0.04);
  color:white;margin-bottom:14px;outline:none;font-size:14px;transition:.2s;
}
.toolCard input:focus,.toolCard select:focus{border-color:var(--neon);box-shadow:0 0 12px rgba(0,245,255,0.15);}
.resultBox{
  padding:14px 16px;border-radius:12px;
  background:rgba(81,255,122,0.08);border:1px solid rgba(81,255,122,0.2);
  color:var(--green);font-weight:700;font-size:15px;margin-top:4px;min-height:52px;
  display:flex;align-items:center;
}

/* ════ KEYWORDS ════ */
.kwCloud{display:flex;flex-wrap:wrap;gap:10px;margin-top:16px;}
.kwTag{padding:8px 14px;border-radius:10px;font-size:13px;font-weight:600;transition:.2s;cursor:default;}
.kwTag:hover{transform:scale(1.05);}
.kw-hot{background:rgba(255,75,110,0.15);border:1px solid rgba(255,75,110,0.3);color:var(--red);}
.kw-warm{background:rgba(255,179,71,0.15);border:1px solid rgba(255,179,71,0.3);color:var(--orange);}
.kw-cool{background:rgba(0,245,255,0.10);border:1px solid rgba(0,245,255,0.2);color:var(--neon);}
.kw-green{background:rgba(81,255,122,0.10);border:1px solid rgba(81,255,122,0.2);color:var(--green);}
.kw-vol{font-size:10px;opacity:.7;margin-left:4px;}

/* ════ PROGRESS ════ */
.prog{height:6px;background:rgba(255,255,255,0.08);border-radius:99px;margin-top:8px;}
.progBar{height:100%;border-radius:99px;background:linear-gradient(90deg,var(--neon),var(--green));transition:width 1.5s ease;}

/* ════ INSURANCE CARD ════ */
.insurCard{background:linear-gradient(135deg,rgba(255,75,110,0.06),rgba(255,179,71,0.04));border:1px solid rgba(255,75,110,0.2);border-radius:20px;padding:24px;}
.insurCard h3{color:var(--red);font-size:20px;margin-bottom:6px;}
.insurCard input{width:100%;padding:12px;border-radius:10px;border:1px solid rgba(255,75,110,0.3);background:rgba(255,75,110,0.05);color:white;outline:none;font-size:14px;margin-bottom:8px;}

/* ════ CHATBOT ════ */
#autoBot{
  position:fixed;right:20px;bottom:20px;width:350px;max-width:93%;
  background:#050f18;border:1px solid rgba(0,245,255,0.4);border-radius:20px;
  overflow:hidden;z-index:9999;box-shadow:0 0 50px rgba(0,245,255,0.2);
  font-family:'Segoe UI',Arial,sans-serif;transition:all .3s ease;
}
#autoBot.minimized #botBody{display:none;}
#botHeader{
  padding:14px 16px;
  background:linear-gradient(135deg,rgba(0,245,255,0.15),rgba(81,255,122,0.1));
  border-bottom:1px solid var(--border);
  display:flex;justify-content:space-between;align-items:center;cursor:pointer;
}
#botHeader .bTitle{font-weight:800;font-size:14px;color:white;}
#botHeader .bStatus{font-size:11px;color:var(--green);display:flex;align-items:center;gap:5px;}
#botMin{background:none;border:none;color:var(--muted);cursor:pointer;font-size:18px;line-height:1;}
#botMessages{height:260px;overflow-y:auto;padding:14px;font-size:13px;background:rgba(0,0,0,0.3);}
#botMessages::-webkit-scrollbar{width:4px;}
#botMessages::-webkit-scrollbar-thumb{background:var(--border);border-radius:4px;}
.botMsg,.userMsg{padding:10px 13px;border-radius:14px;margin-bottom:10px;line-height:1.6;max-width:88%;}
.botMsg{background:rgba(0,245,255,0.08);border:1px solid rgba(0,245,255,0.1);}
.userMsg{background:rgba(81,255,122,0.1);border:1px solid rgba(81,255,122,0.15);margin-left:auto;text-align:right;}
#botInputBox{display:flex;border-top:1px solid rgba(255,255,255,0.08);background:rgba(0,0,0,0.4);}
#botInput{flex:1;padding:12px 14px;border:none;outline:none;background:transparent;color:white;font-size:13px;}
#botInput::placeholder{color:var(--muted);}
#botSend{padding:12px 16px;border:none;background:linear-gradient(135deg,var(--neon),var(--green));color:#001016;font-weight:800;cursor:pointer;font-size:13px;}
#botSend:hover{opacity:.85;}

/* ════ FOOTER ════ */
footer{border-top:1px solid var(--border);background:rgba(0,0,0,0.6);padding:40px 20px 24px;margin-top:40px;}
.footGrid{max-width:1200px;margin:auto;display:grid;grid-template-columns:repeat(4,1fr);gap:28px;margin-bottom:30px;}
.footCol h4{font-size:14px;color:var(--neon);margin-bottom:14px;letter-spacing:.5px;}
.footCol p,.footCol a{font-size:13px;color:var(--muted);line-height:2;display:block;}
.footCol a:hover{color:var(--neon);}
.footBottom{
  max-width:1200px;margin:0 auto;
  border-top:1px solid rgba(255,255,255,0.06);padding-top:20px;
  display:flex;justify-content:space-between;align-items:center;
  font-size:12px;color:var(--muted);flex-wrap:wrap;gap:10px;
}

/* ════ RESPONSIVE ════ */
@media(max-width:900px){
  .hero{grid-template-columns:1fr;}
  .radarCard{display:none;}
  .grid3,.grid4{grid-template-columns:repeat(2,1fr);}
  .footGrid{grid-template-columns:repeat(2,1fr);}
  .menu{display:none;}
  .featCard{grid-column:span 1;}
}
@media(max-width:560px){
  .grid3,.grid4,.grid2{grid-template-columns:1fr;}
  .footGrid{grid-template-columns:1fr;}
}