/* VehicleInfo360 Standalone Theme CSS — Exact Next.js Design Match */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap');

:root{--p:#0d9488;--pd:#0f766e;--pl:#f0fdfa;--a:#f97316;--ad:#ea580c;--nav:#0f172a;--nav2:#1e293b;--hbg:#f8fafc;--cb:#e2e8f0;--t1:#0f172a;--t2:#475569;--tm:#94a3b8;--bg:#f8fafc;--sh:0 8px 24px rgba(13,148,136,.15);--r:12px;--tr:.2s ease;--font:'Inter',system-ui,sans-serif;--max:1280px}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{font-family:var(--font);scroll-behavior:smooth}
body{background:var(--bg);color:var(--t1);-webkit-font-smoothing:antialiased;overflow-x:hidden;line-height:1.6}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
button{cursor:pointer;border:none;background:none;font-family:inherit}
ul{list-style:none}
::-webkit-scrollbar{width:5px;height:5px}
::-webkit-scrollbar-track{background:#f1f5f9}
::-webkit-scrollbar-thumb{background:var(--p);border-radius:3px}
.vi-wrap{max-width:var(--max);margin:0 auto;padding:0 1rem}
@media(min-width:640px){.vi-wrap{padding:0 1.5rem}}
@media(min-width:1024px){.vi-wrap{padding:0 2rem}}

/* HEADER */
#vi-header{position:sticky;top:0;z-index:1000;box-shadow:0 2px 8px rgba(0,0,0,.1)}
.vi-topbar{background:var(--hbg);border-bottom:1px solid var(--cb)}
.vi-topbar-inner{display:flex;align-items:center;height:64px;gap:1rem}
.vi-logo{display:flex;align-items:center;flex-shrink:0;font-size:1.5rem;font-weight:900;letter-spacing:-.02em;line-height:1}
.vi-logo-v{color:var(--p)}.vi-logo-i{color:var(--t1)}.vi-logo-360{color:var(--a)}
.vi-search-bar{flex:1;max-width:640px;margin:0 1rem;display:flex}
@media(max-width:767px){.vi-search-bar{display:none}}
.vi-search-in{flex:1;background:#fff;border:1.5px solid var(--cb);border-right:none;border-radius:9999px 0 0 9999px;padding:.6rem 1.25rem;font-size:.875rem;outline:none;transition:border-color var(--tr);font-family:var(--font)}
.vi-search-in:focus{border-color:var(--p)}
.vi-search-sbtn{background:linear-gradient(to right,var(--p),var(--pd));color:#fff;border-radius:0 9999px 9999px 0;padding:.6rem 1.25rem;font-size:.875rem;font-weight:600;display:flex;align-items:center;gap:.375rem;cursor:pointer}
.vi-header-right{display:flex;align-items:center;gap:.5rem;flex-shrink:0;margin-left:auto}
.vi-btn-loc,.vi-btn-login{display:flex;align-items:center;gap:.375rem;padding:.5rem .875rem;border-radius:.5rem;font-size:.8125rem;font-weight:600;cursor:pointer;transition:background var(--tr);color:#fff}
.vi-btn-loc{background:var(--p)}.vi-btn-loc:hover{background:var(--pd)}
.vi-btn-login{background:var(--a)}.vi-btn-login:hover{background:var(--ad)}
@media(max-width:640px){.vi-btn-loc{display:none}}
.vi-burger{display:none;flex-direction:column;gap:5px;width:36px;height:36px;align-items:center;justify-content:center;border-radius:.5rem;background:#f1f5f9;cursor:pointer;flex-shrink:0}
.vi-burger span{display:block;width:20px;height:2px;background:var(--t1);border-radius:2px;transition:all .3s}
@media(max-width:767px){.vi-burger{display:flex}}
.vi-burger.open span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.vi-burger.open span:nth-child(2){opacity:0;transform:scaleX(0)}
.vi-burger.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* NAV — dark, pill buttons */
#vi-nav{background:var(--nav)}
.vi-nav-inner{display:flex;align-items:center;gap:.25rem;padding:.625rem 0;overflow-x:auto;flex-wrap:nowrap;scrollbar-width:none}
.vi-nav-inner::-webkit-scrollbar{display:none}
.vi-nav-item{position:relative;flex-shrink:0}
.vi-nav-btn{display:flex;align-items:center;gap:.5rem;padding:.5rem 1rem;border-radius:9999px;font-size:.875rem;font-weight:500;color:#fff;background:#1e293b;border:none;cursor:pointer;white-space:nowrap;transition:background var(--tr);font-family:var(--font)}
.vi-nav-icon{color:#5eead4;width:15px;height:15px;flex-shrink:0}
.vi-chevron{width:11px;height:11px;transition:transform .2s}
.vi-nav-item:hover .vi-nav-btn,.vi-nav-item.open .vi-nav-btn{background:var(--p)}
.vi-nav-item:hover .vi-chevron,.vi-nav-item.open .vi-chevron{transform:rotate(180deg)}
.vi-emi-nav{background:var(--a)!important;margin-left:auto!important}
.vi-emi-nav:hover{background:var(--ad)!important}
.vi-dd{position:absolute;top:calc(100% + 6px);left:0;background:#fff;border-radius:var(--r);box-shadow:0 10px 40px rgba(0,0,0,.15);border:1px solid var(--cb);min-width:200px;padding:.5rem 0;z-index:9999;opacity:0;visibility:hidden;transform:translateY(-6px);transition:all .15s;pointer-events:none}
.vi-nav-item:hover .vi-dd,.vi-nav-item.open .vi-dd{opacity:1;visibility:visible;transform:translateY(0);pointer-events:auto}
.vi-dd a{display:block;padding:.625rem 1rem;font-size:.875rem;color:#334155;transition:all var(--tr)}
.vi-dd a:hover{background:var(--pl);color:var(--p)}
@media(max-width:767px){
  #vi-nav{display:none;position:fixed;top:64px;right:0;width:min(300px,90vw);height:calc(100vh - 64px);overflow-y:auto;z-index:999;transform:translateX(100%);transition:transform .3s}
  #vi-nav.open{display:block;transform:translateX(0)}
  .vi-nav-inner{flex-direction:column;gap:0;padding:.75rem;overflow-x:visible}
  .vi-nav-item{width:100%}
  .vi-nav-btn{border-radius:.75rem;justify-content:space-between;width:100%;padding:.75rem 1rem}
  .vi-dd{position:static;box-shadow:none;border:none;border-radius:0;padding-left:1rem;background:rgba(255,255,255,.05);opacity:1;visibility:visible;transform:none;pointer-events:auto;display:none}
  .vi-nav-item.open .vi-dd{display:block}
  .vi-dd a{color:#94a3b8;border-radius:.5rem;padding:.5rem .875rem}
  .vi-dd a:hover{background:rgba(255,255,255,.08);color:#fff}
  .vi-emi-nav{margin-left:0!important}
  .vi-mob-search{padding:.75rem;border-bottom:1px solid var(--nav2);display:flex}
  .vi-mob-search input{flex:1;background:rgba(255,255,255,.1);border:none;color:#fff;padding:.625rem .875rem;border-radius:.5rem 0 0 .5rem;outline:none;font-size:.875rem;font-family:var(--font)}
  .vi-mob-search input::placeholder{color:#475569}
  .vi-mob-search button{background:var(--p);color:#fff;padding:.625rem .875rem;border-radius:0 .5rem .5rem 0}
}
.vi-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:998}
.vi-overlay.on{display:block}

/* HERO — 40vw exact */
.vi-hero{position:relative;width:100%;overflow:hidden;background:#e2e8f0;min-height:200px;max-height:480px;height:40vw}
.vi-slide{position:absolute;inset:0;opacity:0;transition:opacity .7s;z-index:1}
.vi-slide.on{opacity:1;z-index:2}
.vi-slide a,.vi-slide img{display:block;width:100%;height:100%}
.vi-slide img{object-fit:cover}
.vi-sl-btn{position:absolute;top:50%;transform:translateY(-50%);z-index:10;background:rgba(255,255,255,.82);border-radius:50%;width:36px;height:36px;display:flex;align-items:center;justify-content:center;box-shadow:0 2px 8px rgba(0,0,0,.1);transition:all var(--tr);color:var(--p);font-size:1.125rem;cursor:pointer;border:none}
.vi-sl-btn:hover{background:#fff;transform:translateY(-50%) scale(1.08)}
.vi-sl-prev{left:12px}.vi-sl-next{right:12px}
.vi-sl-dots{position:absolute;bottom:10px;left:50%;transform:translateX(-50%);display:flex;gap:.375rem;z-index:10}
.vi-dot{width:10px;height:10px;border-radius:50%;background:rgba(255,255,255,.5);border:none;cursor:pointer;transition:all var(--tr)}
.vi-dot.on{width:24px;border-radius:4px;background:#fff}

/* BRAND EXPLORER — dark tabs */
.vi-be-outer{width:100%;max-width:960px;margin:2rem auto;padding:0 1rem}
.vi-be-tabs{display:flex;gap:.25rem;overflow-x:auto;scrollbar-width:none}
.vi-be-tabs::-webkit-scrollbar{display:none}
.vi-be-tab{display:flex;flex-direction:column;align-items:center;padding:.5rem 2rem .75rem;border-radius:.75rem .75rem 0 0;transition:all var(--tr);min-width:100px;flex-shrink:0;cursor:pointer;border:none;font-family:var(--font)}
.vi-be-tab img{width:72px;height:44px;object-fit:contain;margin-bottom:.25rem}
@media(max-width:480px){.vi-be-tab img{width:48px;height:30px}.vi-be-tab{min-width:80px;padding:.5rem 1rem .75rem}}
.vi-be-tab span{font-size:.875rem;font-weight:600}
.vi-be-tab.off{background:#e2e8f0;color:var(--t2)}
.vi-be-tab.on{background:var(--nav);color:#fff}
.vi-be-panel{background:var(--nav);border-radius:0 .75rem .75rem .75rem;padding:1.5rem}
.vi-be-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:1rem}
.vi-be-title{color:#fff;font-size:1.375rem;font-weight:700}
.vi-be-all{color:#cbd5e1;font-size:.875rem;text-decoration:underline}
.vi-be-all:hover{color:#5eead4}
.vi-brands-g{display:grid;grid-template-columns:repeat(6,1fr);gap:.625rem;margin-bottom:1.25rem}
@media(max-width:640px){.vi-brands-g{grid-template-columns:repeat(4,1fr)}}
.vi-bc-item{background:#fff;border-radius:.625rem;padding:.625rem .5rem;display:flex;flex-direction:column;align-items:center;gap:.25rem;transition:all var(--tr);cursor:pointer;border:2px solid transparent}
.vi-bc-item:hover{box-shadow:0 4px 12px rgba(0,0,0,.15);transform:scale(1.05)}
.vi-bc-item.sel{border-color:var(--p)}
.vi-bc-item img{width:40px;height:40px;object-fit:contain}
.vi-bc-item span{font-size:.6875rem;font-weight:500;color:var(--t1);text-align:center;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100%}
.vi-be-search{width:100%;background:linear-gradient(to right,var(--p),var(--pd));color:#fff;padding:.875rem;border-radius:.75rem;font-weight:600;font-size:.9375rem;display:flex;align-items:center;justify-content:center;gap:.5rem;border:none;cursor:pointer;font-family:var(--font);transition:opacity var(--tr)}
.vi-be-search:hover{opacity:.9}

/* SECTION HEADER */
.vi-sh{display:flex;align-items:center;justify-content:space-between;margin-bottom:1.5rem}
.vi-sh-title{font-size:1.25rem;font-weight:800;color:var(--t1);display:flex;align-items:center;gap:.5rem}
.vi-sh-title::before{content:'';display:block;width:4px;height:22px;background:var(--p);border-radius:2px}
.vi-sh-link{font-size:.875rem;color:var(--p);font-weight:700}
.vi-sh-link:hover{text-decoration:underline}

/* VEHICLE CARD */
.vi-vc{background:#fff;border:1px solid var(--cb);border-radius:16px;overflow:hidden;transition:all var(--tr);display:flex;flex-direction:column;height:100%}
.vi-vc:hover{border-color:#5eead4;box-shadow:var(--sh);transform:translateY(-2px)}
.vi-vc-img{position:relative;aspect-ratio:16/9;overflow:hidden;background:#f1f5f9}
.vi-vc-img img{width:100%;height:100%;object-fit:cover;transition:transform .3s}
.vi-vc:hover .vi-vc-img img{transform:scale(1.04)}
.vi-vc-badges{position:absolute;top:.5rem;left:.5rem;display:flex;gap:.25rem;flex-wrap:wrap}
.vi-badge{display:inline-flex;align-items:center;padding:2px 8px;border-radius:4px;font-size:.6875rem;font-weight:700}
.vi-b-ev{background:#dcfce7;color:#15803d}
.vi-b-feat{background:#fef9c3;color:#a16207}
.vi-b-up{background:#dbeafe;color:#1d4ed8}
.vi-b-pop{background:#ede9fe;color:#5b21b6}
.vi-b-new{background:#fee2e2;color:#dc2626}
.vi-vc-safe{position:absolute;top:.5rem;right:.5rem;background:rgba(15,23,42,.75);color:#fff;font-size:.6rem;font-weight:700;padding:3px 7px;border-radius:20px}
.vi-vc-body{padding:1rem;flex:1;display:flex;flex-direction:column}
.vi-vc-brand{font-size:.6875rem;font-weight:800;color:var(--p);text-transform:uppercase;letter-spacing:.07em;margin-bottom:.2rem}
.vi-vc-name{font-size:.9375rem;font-weight:800;color:var(--t1);margin-bottom:.375rem;line-height:1.3}
.vi-vc-name a:hover{color:var(--p)}
.vi-vc-hr{height:1px;background:var(--cb);margin:.5rem 0}
.vi-vc-specs{display:flex;gap:.3rem;flex-wrap:wrap;margin-bottom:.75rem;font-size:.6875rem;color:var(--t2)}
.vi-vc-spec{background:#f1f5f9;padding:2px 7px;border-radius:4px;font-weight:600}
.vi-vc-price{font-size:.9375rem;font-weight:900;color:var(--t1)}
.vi-vc-foot{display:flex;align-items:center;justify-content:space-between;margin-top:auto;padding-top:.75rem}
.vi-btn-offer{border:2px solid var(--p);color:var(--p);padding:.375rem .875rem;border-radius:.5rem;font-size:.75rem;font-weight:700;transition:all var(--tr)}
.vi-btn-offer:hover,.vi-btn-offer:focus{background:var(--p);color:#fff}
.vi-btn-cmp{padding:.375rem .625rem;border-radius:.5rem;border:1.5px solid var(--cb);color:var(--tm);font-size:.75rem;font-weight:700;transition:all var(--tr)}
.vi-btn-cmp:hover{border-color:var(--p);color:var(--p)}
.vi-strip{display:flex;gap:1rem;overflow-x:auto;padding:.5rem 0 1rem;scrollbar-width:none}
.vi-strip::-webkit-scrollbar{display:none}
.vi-strip .vi-vc{min-width:270px;flex-shrink:0}

/* GRIDS */
.vi-g4{display:grid;grid-template-columns:repeat(4,1fr);gap:1.25rem}
.vi-g3{display:grid;grid-template-columns:repeat(3,1fr);gap:1.25rem}
.vi-g2{display:grid;grid-template-columns:1fr 1fr;gap:1.25rem}
@media(max-width:1024px){.vi-g4{grid-template-columns:repeat(3,1fr)}}
@media(max-width:768px){.vi-g4{grid-template-columns:repeat(2,1fr)}.vi-g3{grid-template-columns:repeat(2,1fr)}}
@media(max-width:480px){.vi-g4,.vi-g3{grid-template-columns:1fr}.vi-g2{grid-template-columns:1fr}}

/* NEWS CARD */
.vi-nc{background:#fff;border:1px solid var(--cb);border-radius:var(--r);overflow:hidden;transition:all var(--tr);display:flex;flex-direction:column}
.vi-nc:hover{box-shadow:var(--sh);border-color:#5eead4;transform:translateY(-2px)}
.vi-nc-img{height:180px;overflow:hidden;background:#f8fafc}
.vi-nc-img img{width:100%;height:100%;object-fit:cover;transition:transform .3s}
.vi-nc:hover .vi-nc-img img{transform:scale(1.04)}
.vi-nc-body{padding:1rem;flex:1;display:flex;flex-direction:column}
.vi-nc-cat{font-size:.6875rem;font-weight:700;color:var(--p);background:var(--pl);padding:2px 8px;border-radius:9999px;display:inline-block;margin-bottom:.5rem}
.vi-nc-title{font-size:.9375rem;font-weight:700;line-height:1.4;color:var(--t1);margin-bottom:.5rem;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.vi-nc-title a:hover{color:var(--p)}
.vi-nc-more{font-size:.75rem;color:var(--p);font-weight:600;margin-top:auto}
.vi-nc-meta{font-size:.75rem;color:var(--tm);display:flex;gap:.375rem;margin-top:.5rem}

/* SECTIONS */
.vi-sec{padding:3rem 0}
.vi-sec-alt{background:#fff;border-top:1px solid var(--cb);border-bottom:1px solid var(--cb)}
.vi-stats-bar{background:linear-gradient(135deg,var(--nav),var(--nav2));padding:2.5rem 0}
.vi-stats-g{display:grid;grid-template-columns:repeat(4,1fr);gap:1.5rem;text-align:center}
@media(max-width:640px){.vi-stats-g{grid-template-columns:repeat(2,1fr)}}
.vi-stat-n{font-size:2rem;font-weight:900;color:var(--p)}
.vi-stat-l{font-size:.8125rem;color:#94a3b8;margin-top:.25rem}
.vi-tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(90px,1fr));gap:.625rem}
.vi-tile{display:flex;flex-direction:column;align-items:center;gap:.375rem;padding:.875rem .5rem;border:1.5px solid var(--cb);border-radius:10px;font-size:.8125rem;font-weight:700;color:var(--t1);transition:all var(--tr);text-decoration:none;text-align:center;background:#fff}
.vi-tile:hover{border-color:var(--p);transform:translateY(-2px)}
.vi-tile-icon{font-size:1.5rem}

/* PAGE HEADER */
.vi-ph{background:linear-gradient(135deg,var(--nav),var(--nav2));color:#fff;padding:2.5rem 0 2rem}
.vi-ph h1{font-size:1.75rem;font-weight:900;margin-bottom:.375rem}
.vi-ph p{color:#94a3b8}
.vi-bc{display:flex;align-items:center;gap:.5rem;font-size:.8125rem;color:#64748b;flex-wrap:wrap;margin-bottom:.875rem}
.vi-bc a{color:#94a3b8;transition:color var(--tr)}.vi-bc a:hover{color:#fff}

/* FILTER BAR */
.vi-fbar{background:#fff;border:1.5px solid var(--cb);border-radius:var(--r);padding:1rem;margin-bottom:1.5rem;display:flex;gap:.75rem;flex-wrap:wrap;align-items:center}
.vi-fsel{padding:.5rem .75rem;border:1.5px solid var(--cb);border-radius:.5rem;font-size:.875rem;background:#fff;cursor:pointer;outline:none;font-family:var(--font)}
.vi-fsel:focus{border-color:var(--p)}
.vi-fbtn{padding:.5rem 1rem;background:var(--p);color:#fff;border-radius:.5rem;font-size:.875rem;font-weight:700;cursor:pointer;border:none;transition:background var(--tr)}
.vi-fbtn:hover{background:var(--pd)}
.vi-fclr{padding:.5rem .875rem;background:#fee2e2;color:#dc2626;border-radius:.5rem;font-size:.8125rem;font-weight:700;text-decoration:none;display:inline-block}
.vi-res-cnt{font-size:.8125rem;color:var(--tm);margin-left:auto}

/* VEHICLE DETAIL */
.vi-det-wrap{display:grid;grid-template-columns:3fr 2fr;gap:2rem}
@media(max-width:900px){.vi-det-wrap{grid-template-columns:1fr}}
.vi-det-main{border-radius:var(--r);overflow:hidden;height:360px;background:#f8fafc;margin-bottom:.625rem}
.vi-det-main img{width:100%;height:100%;object-fit:cover}
.vi-det-thumbs{display:flex;gap:.5rem;flex-wrap:wrap}
.vi-det-thumb{width:80px;height:56px;border-radius:6px;overflow:hidden;cursor:pointer;opacity:.7;border:2px solid transparent;transition:all var(--tr);flex-shrink:0}
.vi-det-thumb:hover,.vi-det-thumb.on{opacity:1;border-color:var(--p)}
.vi-det-thumb img{width:100%;height:100%;object-fit:cover}
.vi-tabrow{display:flex;border-bottom:1.5px solid var(--cb);margin-bottom:1.25rem}
.vi-tab{padding:.875rem 1.25rem;font-size:.875rem;font-weight:600;cursor:pointer;border:none;background:transparent;color:var(--t2);transition:all var(--tr);font-family:var(--font)}
.vi-tab.on{color:var(--a);border-bottom:2.5px solid var(--a);background:rgba(249,115,22,.04)}
.vi-spec-g{display:grid;grid-template-columns:1fr 1fr;gap:.75rem}
.vi-spec-item{background:#f8fafc;border-radius:.5rem;padding:.75rem}
.vi-spec-lbl{font-size:.6rem;font-weight:700;color:var(--tm);text-transform:uppercase;letter-spacing:.07em}
.vi-spec-val{font-size:.9375rem;font-weight:800;color:var(--t1);margin-top:.25rem;text-transform:capitalize}
.vi-cbox{background:#fff;border:1.5px solid var(--cb);border-radius:var(--r);margin-bottom:1.5rem;overflow:hidden}
.vi-cbox-h{padding:1rem 1.25rem;border-bottom:1px solid var(--cb);font-weight:700;font-size:.9375rem}
.vi-cbox-b{padding:1.25rem}
.vi-price-card{background:#fff;border:1.5px solid var(--cb);border-radius:var(--r);padding:1.5rem;margin-bottom:1.25rem;position:sticky;top:80px}

/* COMPARE TABLE */
.vi-cmptbl{width:100%;border-collapse:collapse;font-size:.875rem}
.vi-cmptbl th{background:var(--nav);color:#fff;padding:1rem;text-align:center;border:1px solid #334155}
.vi-cmptbl th:first-child{text-align:left;background:var(--nav2);min-width:160px}
.vi-cmptbl td{padding:.75rem 1rem;border:1px solid var(--cb);text-align:center}
.vi-cmptbl td:first-child{text-align:left;font-weight:700;background:#f8fafc}
.vi-cmp-ghead td{background:var(--p)!important;color:#fff!important;font-size:.75rem;font-weight:800;text-transform:uppercase;letter-spacing:.06em;text-align:left!important}

/* EMI */
.vi-emi-card{background:#fff;border:1.5px solid var(--cb);border-radius:var(--r);padding:2rem}
.vi-emi-result{background:linear-gradient(135deg,var(--a),#f59e0b);color:#fff;border-radius:var(--r);padding:1.5rem;text-align:center}
.vi-emi-amount{font-size:3rem;font-weight:900;margin:.375rem 0}
input[type=range]{accent-color:var(--a);cursor:pointer;width:100%}
.vi-range-hint{display:flex;justify-content:space-between;font-size:.6875rem;color:var(--tm);margin-top:.25rem}

/* FORMS */
.vi-label{display:block;font-size:.8125rem;font-weight:700;color:var(--t1);margin-bottom:.375rem}
.vi-input,.vi-select,.vi-textarea{width:100%;padding:.625rem .875rem;border:1.5px solid var(--cb);border-radius:.5rem;font-size:.875rem;outline:none;transition:border-color var(--tr);font-family:var(--font);background:#fff}
.vi-input:focus,.vi-select:focus,.vi-textarea:focus{border-color:var(--p);box-shadow:0 0 0 3px rgba(13,148,136,.1)}
.vi-textarea{resize:vertical;min-height:90px}
.vi-fg{margin-bottom:1.125rem}
.vi-fg2{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
@media(max-width:480px){.vi-fg2{grid-template-columns:1fr}}
.vi-lead-form{background:#fff;border:1.5px solid var(--cb);border-radius:var(--r);padding:1.5rem}
.vi-submit{width:100%;background:var(--p);color:#fff;padding:.75rem;border-radius:.5rem;font-size:.9375rem;font-weight:700;cursor:pointer;border:none;font-family:var(--font);transition:background var(--tr)}
.vi-submit:hover{background:var(--pd)}.vi-submit:disabled{opacity:.6;cursor:not-allowed}
.vi-success-msg{background:#f0fdf4;border:1.5px solid #bbf7d0;border-radius:.5rem;padding:1rem;color:#15803d;font-weight:600;display:flex;align-items:center;gap:.5rem}
.vi-alert{padding:.875rem 1rem;border-radius:.5rem;font-size:.875rem;font-weight:600;margin-bottom:1rem}
.vi-alert-ok{background:#f0fdf4;color:#15803d;border:1px solid #bbf7d0}
.vi-alert-err{background:#fef2f2;color:#dc2626;border:1px solid #fecaca}

/* COMPARE BAR */
#vi-cmpbar{position:fixed;bottom:0;left:0;right:0;background:var(--nav);color:#fff;padding:.875rem 1.5rem;display:none;align-items:center;gap:1rem;z-index:9990;box-shadow:0 -4px 24px rgba(0,0,0,.3)}
#vi-cmpbar.on{display:flex}
.vi-cmpitems{display:flex;gap:.75rem;flex:1;flex-wrap:wrap}
.vi-cmpitem{background:rgba(255,255,255,.1);padding:.375rem .75rem;border-radius:.375rem;font-size:.8125rem;display:flex;align-items:center;gap:.5rem}
.vi-cmpitem button{background:none;border:none;color:#94a3b8;cursor:pointer;font-size:1.125rem;line-height:1}
.vi-cmpgo{background:var(--a);color:#fff;padding:.5rem 1.25rem;border-radius:.5rem;font-size:.875rem;font-weight:700;border:none;cursor:pointer;flex-shrink:0;transition:background var(--tr)}
.vi-cmpgo:hover{background:var(--ad)}
.vi-cmpclear{background:none;border:1.5px solid rgba(255,255,255,.3);color:#94a3b8;padding:.5rem .75rem;border-radius:.5rem;font-size:.8125rem;cursor:pointer}

/* PAGINATION */
.vi-pager{display:flex;gap:.375rem;justify-content:center;margin-top:2rem;flex-wrap:wrap}
.vi-pg{padding:.5rem .875rem;border-radius:.5rem;font-size:.875rem;font-weight:600;border:1.5px solid var(--cb);background:#fff;color:var(--t1);transition:all var(--tr);text-decoration:none}
.vi-pg:hover,.vi-pg.on{background:var(--p);color:#fff;border-color:var(--p)}

/* TOAST */
#vi-toasts{position:fixed;bottom:1.5rem;right:1.5rem;z-index:99999;display:flex;flex-direction:column;gap:.5rem;pointer-events:none}
.vi-toast{padding:.875rem 1.25rem;border-radius:.75rem;background:#fff;border:1px solid var(--cb);box-shadow:0 4px 16px rgba(0,0,0,.12);font-size:.875rem;display:flex;align-items:center;gap:.75rem;max-width:340px;animation:viIn .3s ease;pointer-events:auto}
.vi-toast-ok{border-left:4px solid #22c55e}
.vi-toast-err{border-left:4px solid #ef4444}
.vi-toast-info{border-left:4px solid var(--p)}
@keyframes viIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}

/* FOOTER */
#vi-footer{background:var(--nav);color:#94a3b8;padding:4rem 0 2rem;margin-top:4rem}
.vi-footer-g{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:2.5rem;margin-bottom:3rem}
@media(max-width:1024px){.vi-footer-g{grid-template-columns:1fr 1fr}}
@media(max-width:640px){.vi-footer-g{grid-template-columns:1fr}}
.vi-ft-brand p{font-size:.875rem;line-height:1.75;color:#64748b;margin:.875rem 0 1.25rem}
.vi-ft-social{display:flex;gap:.875rem}
.vi-ft-social a{color:#475569;transition:color var(--tr);font-size:1.25rem}
.vi-ft-social a:hover{color:#5eead4}
.vi-ft-col h3{font-size:.9375rem;font-weight:700;color:#5eead4;margin-bottom:1rem}
.vi-ft-col li{margin-bottom:.625rem}
.vi-ft-col a{font-size:.875rem;color:#64748b;transition:color var(--tr)}
.vi-ft-col a:hover{color:#fff}
.vi-ft-bottom{border-top:1px solid #1e293b;padding-top:1.25rem;display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:.625rem}
.vi-ft-bottom p{font-size:.8125rem;color:#475569}

/* ADMIN META BOX */
.vi-meta-g{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.vi-meta-g3{grid-template-columns:1fr 1fr 1fr}
.vi-meta-field label{font-weight:700;font-size:.78rem;display:block;margin-bottom:5px;color:#374151}
.vi-meta-field input,.vi-meta-field select,.vi-meta-field textarea{width:100%;padding:8px 10px;border:1px solid #d1d5db;border-radius:6px;font-size:.875rem}
.vi-meta-field textarea{height:90px;resize:vertical}
.vi-meta-sec{font-size:.72rem;font-weight:800;text-transform:uppercase;letter-spacing:.08em;color:#6b7280;margin:14px 0 10px;padding-top:14px;border-top:1px solid #f3f4f6}
.vi-chk-row{display:flex;gap:16px;margin-top:12px}
.vi-chk-row label{display:flex;align-items:center;gap:6px;font-size:.875rem;cursor:pointer}

/* UTILS */
.vi-skeleton{background:linear-gradient(90deg,#f1f5f9 25%,#e2e8f0 50%,#f1f5f9 75%);background-size:400px 100%;animation:viSk 1.4s infinite;border-radius:6px}
@keyframes viSk{0%{background-position:-200px 0}100%{background-position:calc(200px + 100%) 0}}
.gradient-text{background:linear-gradient(135deg,#0d9488,#14b8a6);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}