/*
Theme Name: EVFinder
Theme URI: https://evfinder.pk
Author: EVFinder.pk
Description: Custom theme for EVFinder.pk, Pakistan's EV discovery platform. Includes a Vehicle content type with price, range, battery and top speed fields.
Version: 1.2
Text Domain: evfinder
*/
:root{--blue:#1e7cf0;--lime:#a6f21b;--ink:#0b1118;--bg:#f2f5f9;--card:#fff;--text:#0f1720;--muted:#5a6672;--line:#e0e5eb}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--text);font:15px/1.5 Sora,system-ui,sans-serif}
a{color:inherit;text-decoration:none}img{max-width:100%;height:auto}
.wrap{max-width:1180px;margin:0 auto;padding:0 16px}
.top{background:#06090d;color:#c5cfd9;font-size:12px}
.top .wrap{display:flex;justify-content:space-between;align-items:center;height:34px;gap:12px}
.top .r{display:none;gap:16px}
header.site{background:var(--ink);color:#fff;position:sticky;top:0;z-index:50;border-bottom:1px solid #1b2530}
header.site .wrap{display:flex;align-items:center;gap:20px;height:62px}
.logo{display:flex;align-items:center;gap:8px;font-weight:800;font-style:italic;font-size:22px;white-space:nowrap;color:#fff}
.logo b{color:var(--lime)}.logo img{height:40px;width:auto;mix-blend-mode:screen}
nav.main{flex:1;overflow-x:auto;scrollbar-width:none}
.menu{display:flex;gap:18px;list-style:none;margin:0;padding:0;font-size:13px}
.menu a{color:#cfd8e1;white-space:nowrap;display:block;padding:6px 0}.menu a:hover{color:var(--lime)}
.btn{background:var(--lime);color:var(--ink);border:0;border-radius:8px;padding:10px 16px;font:700 14px Sora,system-ui,sans-serif;cursor:pointer;display:inline-block;white-space:nowrap}
.btn.bl{background:var(--blue);color:#fff}.hd-btn{display:none}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible{outline:3px solid #5fb0ff;outline-offset:2px}
.hero{background:radial-gradient(ellipse at 75% 20%,#c9702a 0,#5a3a2e 22%,#0f1a2a 55%,#080d14 100%);color:#fff}
.hero .wrap{display:grid;gap:24px;padding-top:36px;padding-bottom:32px}
.kick{letter-spacing:.3em;color:var(--lime);font-size:12px;font-weight:600}
.hero h1{font-size:clamp(40px,10vw,68px);line-height:1;margin:10px 0 14px;font-weight:800;letter-spacing:-.02em}
.hero h1 span{color:var(--lime);display:block}
.hero p{color:#dfe6ee;max-width:46ch;margin:0 0 22px}
.search{display:flex;background:#fff;border-radius:10px;padding:6px;max-width:600px;box-shadow:0 0 0 4px rgba(166,242,27,.25)}
.search input[type=search]{flex:1;min-width:0;border:0;padding:10px 12px;font:15px Sora,system-ui,sans-serif;background:transparent;color:#0f1720}
.feats{display:grid;gap:10px;align-content:center}
.feat{background:rgba(8,13,20,.72);border:1px solid rgba(255,255,255,.1);border-radius:10px;padding:12px 14px;display:flex;gap:12px;align-items:center;font-size:14px}
.feat i{font-style:normal;font-size:24px;width:34px;text-align:center}.feat b{display:block;font-size:15px}
.cats{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px;margin:14px 0}
.cat{border:0;text-align:left;border-radius:12px;padding:14px;font:700 15px Sora,system-ui,sans-serif;cursor:pointer;color:#0f1720;display:flex;justify-content:space-between;align-items:center;gap:6px}
.cat small{display:block;font-weight:400;font-size:12px;color:#44515e}.cat em{font-style:normal;font-size:28px}
.brands{display:flex;gap:8px;overflow-x:auto;align-items:center;padding:6px 0 10px;scrollbar-width:none}
.brands h3{margin:0 8px 0 0;font-size:15px;min-width:130px}.brands h3 a{display:block;color:var(--blue);font-size:12px;font-weight:400}
.br{flex:0 0 auto;min-width:78px;height:60px;display:grid;place-items:center;background:var(--card);border:1px solid var(--line);border-radius:8px;font-weight:800;font-size:12px;padding:0 10px;text-transform:uppercase}
.sec{display:flex;justify-content:space-between;align-items:center;margin:26px 0 12px;gap:8px}
h2{font-size:22px;margin:0}.sec a{color:var(--blue);font-size:13px}
.tabs{display:flex;gap:8px;margin-bottom:14px;overflow-x:auto;scrollbar-width:none}
.tab{border:1px solid var(--line);background:var(--card);color:var(--text);border-radius:20px;padding:5px 13px;font:12px Sora,system-ui,sans-serif;cursor:pointer;white-space:nowrap}
.tab[aria-pressed=true]{background:#13a04a;border-color:#13a04a;color:#fff}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:12px}
.card{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:14px}
.thumb{height:110px;border-radius:8px;display:grid;place-items:center;font:800 40px Sora,system-ui,sans-serif;color:#fff;background:linear-gradient(135deg,#1c2733,#2b3b4c);margin-bottom:10px;overflow:hidden}
.thumb img{width:100%;height:100%;object-fit:cover}
.nm{display:flex;justify-content:space-between;align-items:center;gap:6px;font-weight:700;font-size:14px}
.pill{font-size:11px;font-weight:600;background:#d9f6e0;color:#117a38;border-radius:5px;padding:1px 7px;white-space:nowrap}
.price{font-weight:800;font-size:19px;margin:2px 0 8px}
.specs{display:flex;justify-content:space-between;font-size:11px;color:var(--muted);margin-bottom:10px;gap:4px}
.specs b{display:block;color:var(--text);font-size:12px}
.acts{display:flex;gap:6px}
.acts label,.acts a{flex:1;border:1px solid var(--line);border-radius:6px;font-size:12px;text-align:center;padding:6px 4px;cursor:pointer;background:var(--card)}
.acts input{accent-color:var(--blue);margin-right:4px}
.empty,.note{font-size:13px;color:var(--muted)}
.tiles{display:grid;gap:12px;margin-top:22px}
.tile{border-radius:12px;padding:18px;color:#fff;background:linear-gradient(135deg,#0c1a2e,#123a64)}
.tile.g{background:linear-gradient(135deg,#0b1d18,#14503a)}
.tile h3{margin:0 0 4px;font-size:17px}.tile p{margin:0 0 12px;font-size:13px;color:#c4d2e0}
.posts{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:12px}
.post{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:16px}
.post em{font-style:normal;font-size:12px;font-weight:700;color:var(--blue)}.post h3{font-size:16px;margin:6px 0}
#cmp-out{margin-top:20px;overflow-x:auto}
table{border-collapse:collapse;width:100%;min-width:420px;font-size:13px;background:var(--card)}
th,td{border:1px solid var(--line);padding:7px 10px;text-align:left}
.page{max-width:820px;margin:30px auto;padding:0 16px}
.page h1{font-size:30px}
.single{display:grid;gap:20px;margin:28px 0}
.single .thumb{height:260px;font-size:90px}
.single .price{font-size:28px}
footer.site{background:var(--ink);color:#9fb0c0;margin-top:34px;padding:28px 0 20px;font-size:13px}
.fg{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.fg h4{color:#fff;margin:0 0 8px;font-size:13px}.fg a{display:block;margin-bottom:5px}
.fg>div:first-child,.fg>div:last-child{grid-column:1/-1}
#evf-bar{position:fixed;left:0;right:0;bottom:0;background:var(--ink);color:#fff;padding:10px 16px;display:none;justify-content:space-between;align-items:center;z-index:60}
@media(min-width:900px){.top .r{display:flex}.hd-btn{display:inline-block}.hero .wrap{grid-template-columns:1fr 330px}.tiles{grid-template-columns:repeat(4,1fr)}.fg{grid-template-columns:1.6fr 1fr 1fr 1fr 1.6fr}.fg>div:first-child,.fg>div:last-child{grid-column:auto}.single{grid-template-columns:1fr 1fr}}