/* ==========================================================================
   VOOOOM — Premium Multi-Vendor Vehicle Marketplace
   Design tokens: Red #D50000 / Black #111111 / White #FFFFFF
   Display: "Sora" — Body: "Inter" — Utility/Spec: "IBM Plex Mono"
   ========================================================================== */

:root{
  --v-red: #D50000;
  --v-red-dark: #A30000;
  --v-red-light: #FF3B3B;
  --v-black: #111111;
  --v-black-soft: #1A1A1D;
  --v-gray-900: #222226;
  --v-gray-700: #46464C;
  --v-gray-600: #6B6B70;
  --v-gray-300: #E4E4E7;
  --v-gray-200: #EFEFF1;
  --v-gray-100: #F6F6F8;
  --v-white: #FFFFFF;

  --v-font-display: "Sora", "Segoe UI", sans-serif;
  --v-font-body: "Inter", "Segoe UI", sans-serif;
  --v-font-mono: "IBM Plex Mono", "Courier New", monospace;

  --v-radius: 10px;
  --v-radius-lg: 18px;
  --v-shadow-sm: 0 2px 10px rgba(17,17,17,.06);
  --v-shadow-md: 0 10px 30px rgba(17,17,17,.10);
  --v-shadow-red: 0 14px 30px rgba(213,0,0,.25);
  --v-transition: .25s cubic-bezier(.4,0,.2,1);
}

@media (prefers-reduced-motion: reduce){
  *{ animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
}

html{ scroll-behavior: smooth; }

body{
  font-family: var(--v-font-body);
  color: var(--v-gray-900);
  background: var(--v-white);
  -webkit-font-smoothing: antialiased;
}

h1,h2,h3,h4,h5,h6,.v-font-display{
  font-family: var(--v-font-display);
  font-weight: 700;
  color: var(--v-black);
  letter-spacing: -0.01em;
}

.v-mono{ font-family: var(--v-font-mono); }

a{ text-decoration: none; }
:focus-visible{ outline: 3px solid var(--v-red-light); outline-offset: 2px; }

.container-xl{ max-width: 1320px; }

/* ---------- Buttons ---------- */
.btn-v-primary{
  background: var(--v-red);
  border: 1px solid var(--v-red);
  color: var(--v-white);
  font-weight: 600;
  padding: .75rem 1.6rem;
  border-radius: 50px;
  transition: var(--v-transition);
}
.btn-v-primary:hover, .btn-v-primary:focus{
  background: var(--v-red-dark);
  border-color: var(--v-red-dark);
  color: var(--v-white);
  transform: translateY(-2px);
  box-shadow: var(--v-shadow-red);
}
.btn-v-outline{
  background: transparent;
  border: 1.5px solid var(--v-black);
  color: var(--v-black);
  font-weight: 600;
  padding: .7rem 1.5rem;
  border-radius: 50px;
  transition: var(--v-transition);
}
.btn-v-outline:hover{ background: var(--v-black); color: var(--v-white); }
.btn-v-outline-light{
  background: transparent;
  border: 1.5px solid rgba(255,255,255,.5);
  color: var(--v-white);
  font-weight: 600;
  padding: .7rem 1.5rem;
  border-radius: 50px;
  transition: var(--v-transition);
}
.btn-v-outline-light:hover{ background: var(--v-white); color: var(--v-black); border-color: var(--v-white); }
.btn-v-ghost{
  background: var(--v-gray-100);
  border: 1px solid var(--v-gray-300);
  color: var(--v-gray-900);
  font-weight: 600;
  border-radius: 50px;
  padding: .55rem 1.1rem;
  transition: var(--v-transition);
}
.btn-v-ghost:hover{ background: var(--v-gray-200); }
.btn-v-icon{
  width: 42px; height: 42px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--v-white); border: 1px solid var(--v-gray-300); color: var(--v-black);
  transition: var(--v-transition);
}
.btn-v-icon:hover{ background: var(--v-red); border-color: var(--v-red); color: var(--v-white); }
.btn-v-icon.active{ background: var(--v-red); border-color: var(--v-red); color: var(--v-white); }

/* ---------- Eyebrow / Section heads ---------- */
.v-eyebrow{
  display:inline-flex; align-items:center; gap:.5rem;
  font-family: var(--v-font-mono); font-size:.75rem; letter-spacing:.16em;
  text-transform: uppercase; color: var(--v-red); font-weight: 600;
}
.v-eyebrow::before{ content:""; width:22px; height:2px; background: var(--v-red); display:inline-block; }
.section-title{ font-size: clamp(1.6rem, 3vw, 2.4rem); margin-top:.4rem; }
.section-pad{ padding-block: clamp(3rem, 6vw, 5.5rem); }
.bg-soft{ background: var(--v-gray-100); }
.bg-black-section{ background: var(--v-black); color: var(--v-white); }
.bg-black-section h1,.bg-black-section h2,.bg-black-section h3{ color: var(--v-white); }

/* ==========================================================================
   NAVBAR
   ========================================================================== */
.v-topbar{
  background: var(--v-black);
  color: rgba(255,255,255,.75);
  font-size: .82rem;
  padding: .45rem 0;
}
.v-topbar a{ color: rgba(255,255,255,.75); }
.v-topbar a:hover{ color: var(--v-red-light); }

.v-navbar{
  background: var(--v-white);
  padding: .9rem 0;
  box-shadow: 0 1px 0 rgba(17,17,17,.06);
  position: sticky; top: 0; z-index: 1030;
  transition: box-shadow .3s ease, padding .3s ease;
}
.v-navbar.scrolled{ box-shadow: var(--v-shadow-md); padding: .55rem 0; }

.v-brand{
  font-family: var(--v-font-display);
  font-weight: 800;
  font-size: 1.6rem;
  color: var(--v-black);
  display:flex; align-items:center; gap:.4rem;
  letter-spacing: -0.02em;
}
.v-brand span{ color: var(--v-red); }
.v-brand .v-brand-dot{
  width:8px;height:8px;border-radius:50%;background:var(--v-red);
  display:inline-block; margin-left:2px;
}

.v-navbar .nav-link{
  font-weight: 600;
  color: var(--v-gray-900);
  padding: .5rem 1rem !important;
  position: relative;
}
.v-navbar .nav-link.active,.v-navbar .nav-link:hover{ color: var(--v-red); }
.v-navbar .nav-link.active::after{
  content:""; position:absolute; left:1rem; right:1rem; bottom:0; height:2px; background:var(--v-red); border-radius: 2px;
}
.v-nav-actions .btn-v-icon{ position:relative; }
.v-badge-count{
  position:absolute; top:-4px; right:-4px; background:var(--v-red); color:#fff;
  font-size:.62rem; font-weight:700; min-width:17px; height:17px; border-radius:50%;
  display:flex; align-items:center; justify-content:center; font-family: var(--v-font-mono);
}

/* ==========================================================================
   HERO (signature: ticket-stub finder card)
   ========================================================================== */
.v-hero{
  position: relative;
  background: var(--v-black);
  color: var(--v-white);
  overflow: hidden;
  min-height: 640px;
  display:flex; align-items:center;
}
.v-hero::before{
  content:"";
  position:absolute; inset:0;
  background: linear-gradient(100deg, rgba(17,17,17,.97) 38%, rgba(17,17,17,.55) 62%, rgba(213,0,0,.28) 100%);
  z-index:1;
}
.v-hero-bg{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:.85;
}
.v-hero-content{ position:relative; z-index:2; padding-block: 5rem 9rem; }
.v-hero h1{ color:#fff; font-size: clamp(2.2rem, 5vw, 3.6rem); line-height:1.08; }
.v-hero .lead{ color: rgba(255,255,255,.8); max-width: 560px; }
.v-hero-stats{ display:flex; gap: 2.2rem; margin-top: 2.4rem; flex-wrap:wrap; }
.v-hero-stats .num{ font-family: var(--v-font-mono); font-size:1.6rem; font-weight:700; color:#fff; }
.v-hero-stats .label{ font-size:.78rem; color: rgba(255,255,255,.6); text-transform:uppercase; letter-spacing:.06em; }

/* Ticket-stub finder card */
.v-finder-wrap{ position:relative; z-index:3; margin-top:-72px; }
.v-finder{
  background:#fff;
  border-radius: var(--v-radius-lg);
  box-shadow: var(--v-shadow-md);
  padding: 1.6rem 1.7rem 1.3rem;
  position: relative;
}
.v-finder-tab{
  position:absolute; top:-16px; left:28px;
  background: var(--v-red); color:#fff;
  font-family: var(--v-font-mono); font-size:.7rem; letter-spacing:.1em; font-weight:700;
  padding: .4rem .9rem; border-radius: 6px 6px 0 0;
  box-shadow: 0 -2px 8px rgba(213,0,0,.25);
}
.v-finder::before{
  content:"";
  position:absolute; left:0; right:0; top:0; height:0;
  border-top: 2px dashed var(--v-gray-300);
}
.v-finder .nav-pills .nav-link{
  font-weight:600; font-size:.88rem; color:var(--v-gray-700); border-radius: 8px 8px 0 0; padding:.5rem 1rem;
}
.v-finder .nav-pills .nav-link.active{ background: var(--v-black); color:#fff; }
.v-finder-punch{
  position:absolute; width:20px; height:20px; background: var(--v-gray-100);
  border-radius:50%; top:50%; transform:translateY(-50%);
}
.v-finder-punch.left{ left:-10px; }
.v-finder-punch.right{ right:-10px; }

/* ==========================================================================
   VEHICLE CARD
   ========================================================================== */
.v-card{
  background:#fff; border-radius: var(--v-radius-lg); overflow:hidden;
  border:1px solid var(--v-gray-200); box-shadow: var(--v-shadow-sm);
  transition: var(--v-transition); height:100%; display:flex; flex-direction:column;
}
.v-card:hover{ transform: translateY(-6px); box-shadow: var(--v-shadow-md); border-color: transparent; }
.v-card-media{ position:relative; overflow:hidden; aspect-ratio: 4/3; background:var(--v-gray-200); }
.v-card-media img{ width:100%; height:100%; object-fit:cover; transition: transform .5s ease; }
.v-card:hover .v-card-media img{ transform: scale(1.06); }
.v-card-badge{
  position:absolute; top:12px; left:12px; background: var(--v-red); color:#fff;
  font-size:.7rem; font-weight:700; padding:.3rem .7rem; border-radius: 50px; letter-spacing:.02em;
}
.v-card-badge.dark{ background: var(--v-black); }
.v-card-fav{
  position:absolute; top:10px; right:10px; width:38px; height:38px; border-radius:50%;
  background: rgba(255,255,255,.9); border:none; display:flex; align-items:center; justify-content:center;
  color: var(--v-black); transition: var(--v-transition);
}
.v-card-fav:hover, .v-card-fav.active{ background: var(--v-red); color:#fff; }
.v-card-body{ padding: 1.2rem 1.2rem 1.4rem; display:flex; flex-direction:column; flex:1; }
.v-card-price{ font-family: var(--v-font-mono); color: var(--v-red); font-weight:700; font-size:1.15rem; }
.v-card-title{ font-size:1.05rem; margin:.2rem 0 .5rem; }
.v-card-title a{ color: var(--v-black); }
.v-card-title a:hover{ color: var(--v-red); }
.v-card-specs{
  display:flex; flex-wrap:wrap; gap: .5rem 1rem; font-size:.8rem; color: var(--v-gray-600);
  border-top:1px dashed var(--v-gray-300); margin-top:auto; padding-top:.8rem;
}
.v-card-specs span{ display:flex; align-items:center; gap:.35rem; }
.v-card-footer{ display:flex; align-items:center; justify-content:space-between; margin-top:.9rem; }
.v-dealer-chip{ display:flex; align-items:center; gap:.45rem; font-size:.78rem; color:var(--v-gray-700); }
.v-dealer-chip img{ width:22px; height:22px; border-radius:50%; object-fit:cover; }

/* card list/row variant */
.v-card-row{ flex-direction: row; }
.v-card-row .v-card-media{ width: 280px; flex-shrink:0; aspect-ratio: auto; }
@media (max-width: 767.98px){ .v-card-row{ flex-direction:column; } .v-card-row .v-card-media{ width:100%; } }

/* ==========================================================================
   FILTER SIDEBAR
   ========================================================================== */
.v-filter-card{
  background:#fff; border:1px solid var(--v-gray-200); border-radius: var(--v-radius-lg);
  padding: 1.4rem; box-shadow: var(--v-shadow-sm);
}
.v-filter-title{
  font-family: var(--v-font-mono); font-size:.75rem; text-transform:uppercase; letter-spacing:.1em;
  color: var(--v-gray-700); font-weight:700; margin-bottom:.7rem; display:flex; align-items:center; justify-content:space-between;
}
.v-filter-block{ border-bottom:1px solid var(--v-gray-200); padding-bottom:1.1rem; margin-bottom:1.1rem; }
.v-filter-block:last-child{ border-bottom:none; margin-bottom:0; }
.form-check-input:checked{ background-color: var(--v-red); border-color: var(--v-red); }
.form-range::-webkit-slider-thumb{ background: var(--v-red); }
.form-range::-moz-range-thumb{ background: var(--v-red); }

/* ==========================================================================
   SECTIONS: brand strip, categories, cta band, steps
   ========================================================================== */
.v-brand-strip{ display:flex; align-items:center; gap: 3rem; flex-wrap:wrap; justify-content:space-around; opacity:.7; }
.v-brand-strip img{ height: 30px; filter: grayscale(1); }

.v-cat-card{
  border-radius: var(--v-radius-lg); overflow:hidden; position:relative; aspect-ratio: 4/3;
  display:flex; align-items:flex-end; color:#fff; background:var(--v-gray-900);
}
.v-cat-card img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition: transform .5s ease; }
.v-cat-card::after{ content:""; position:absolute; inset:0; background: linear-gradient(to top, rgba(17,17,17,.85), rgba(17,17,17,0) 60%); }
.v-cat-card:hover img{ transform: scale(1.08); }
.v-cat-card .v-cat-body{ position:relative; z-index:2; padding:1.2rem; }
.v-cat-card .v-cat-count{ font-family: var(--v-font-mono); font-size:.78rem; color: rgba(255,255,255,.75); }

.v-cta-band{
  background: var(--v-red);
  color:#fff; border-radius: var(--v-radius-lg);
  padding: clamp(2rem,5vw,3.4rem);
  position:relative; overflow:hidden;
}
.v-cta-band::before{
  content:""; position:absolute; right:-60px; top:-60px; width:220px; height:220px; border-radius:50%;
  background: rgba(255,255,255,.08);
}
.v-cta-band h2{ color:#fff; }

.v-step{ position:relative; padding-left: 3.6rem; }
.v-step .num{
  position:absolute; left:0; top:0; font-family: var(--v-font-mono); font-weight:700; font-size:1.05rem;
  width:2.7rem; height:2.7rem; border-radius:50%; border:1.5px solid var(--v-red); color:var(--v-red);
  display:flex; align-items:center; justify-content:center;
}

/* ==========================================================================
   DEALER CARD / PROFILE
   ========================================================================== */
.v-dealer-card{
  background:#fff; border:1px solid var(--v-gray-200); border-radius: var(--v-radius-lg);
  padding: 1.6rem; text-align:center; transition: var(--v-transition); height:100%;
}
.v-dealer-card:hover{ box-shadow: var(--v-shadow-md); transform: translateY(-4px); }
.v-dealer-logo{ width:84px; height:84px; border-radius:50%; object-fit:cover; margin:0 auto .9rem; border:3px solid var(--v-gray-100); }
.v-rating{ color: var(--v-red); font-size:.85rem; }

.v-dealer-hero{
  background: var(--v-black); color:#fff; border-radius: var(--v-radius-lg); overflow:hidden; position:relative;
}
.v-dealer-cover{ height: 220px; object-fit:cover; width:100%; opacity:.6; }
.v-dealer-avatar{ width:110px; height:110px; border-radius:16px; border:4px solid #fff; object-fit:cover; margin-top:-70px; position:relative; z-index:2; background:#fff; }

/* ==========================================================================
   BLOG CARD
   ========================================================================== */
.v-blog-card{ background:#fff; border-radius: var(--v-radius-lg); overflow:hidden; border:1px solid var(--v-gray-200); transition: var(--v-transition); height:100%; }
.v-blog-card:hover{ box-shadow: var(--v-shadow-md); transform: translateY(-4px); }
.v-blog-media{ aspect-ratio: 16/10; overflow:hidden; }
.v-blog-media img{ width:100%; height:100%; object-fit:cover; transition: transform .5s ease; }
.v-blog-card:hover .v-blog-media img{ transform: scale(1.07); }
.v-blog-meta{ font-family: var(--v-font-mono); font-size:.72rem; color: var(--v-gray-600); text-transform:uppercase; letter-spacing:.06em; }

/* ==========================================================================
   PRICING / MEMBERSHIP
   ========================================================================== */
.v-plan{
  background:#fff; border-radius: var(--v-radius-lg); border:1.5px solid var(--v-gray-200); padding: 2rem 1.8rem;
  height:100%; display:flex; flex-direction:column; transition: var(--v-transition);
}
.v-plan:hover{ box-shadow: var(--v-shadow-md); }
.v-plan.featured{ border-color: var(--v-red); box-shadow: var(--v-shadow-red); position:relative; transform: scale(1.02); }
.v-plan.featured .v-plan-tag{
  position:absolute; top:-13px; left:50%; transform:translateX(-50%);
  background: var(--v-red); color:#fff; font-size:.7rem; font-weight:700; letter-spacing:.06em;
  padding:.35rem .9rem; border-radius:50px; text-transform:uppercase;
}
.v-plan-price{ font-family: var(--v-font-mono); font-size:2.4rem; font-weight:700; color:var(--v-black); }
.v-plan-price small{ font-size:.95rem; font-weight:500; color: var(--v-gray-600); font-family: var(--v-font-body); }
.v-plan ul{ list-style:none; padding:0; margin: 1.4rem 0; flex:1; }
.v-plan ul li{ display:flex; gap:.6rem; padding:.4rem 0; color: var(--v-gray-700); font-size:.92rem; }
.v-plan ul li i{ color: var(--v-red); margin-top:.2rem; }

/* ==========================================================================
   FORMS / AUTH
   ========================================================================== */
.v-form-card{ background:#fff; border-radius: var(--v-radius-lg); box-shadow: var(--v-shadow-md); padding: clamp(1.6rem,4vw,3rem); }
.form-label{ font-weight:600; font-size:.9rem; }
.form-control, .form-select{ padding: .65rem .9rem; border-radius: 8px; border:1.5px solid var(--v-gray-300); }
.form-control:focus, .form-select:focus{ border-color: var(--v-red); box-shadow: 0 0 0 .2rem rgba(213,0,0,.15); }
.v-auth-split{ min-height: 100vh; display:flex; flex-wrap:wrap; }
.v-auth-visual{
  background: var(--v-black); color:#fff; position:relative; overflow:hidden; display:flex; align-items:center;
}
.v-auth-visual img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:.45; }
.v-auth-visual .content{ position:relative; z-index:2; padding: 3rem; }
@media (max-width: 991.98px){ .v-auth-visual{ min-height: 260px; } }

/* ==========================================================================
   DASHBOARD (Dealer)
   ========================================================================== */
.v-dash-sidebar{ background: var(--v-black); color: rgba(255,255,255,.8); min-height: 100vh; padding: 1.6rem 1rem; }
.v-dash-sidebar .v-brand{ color:#fff; padding: 0 .6rem 1.4rem; border-bottom: 1px solid rgba(255,255,255,.1); margin-bottom:1rem; }
.v-dash-sidebar .nav-link{ color: rgba(255,255,255,.7); border-radius:8px; padding:.65rem 1rem; font-weight:500; display:flex; align-items:center; gap:.7rem; }
.v-dash-sidebar .nav-link.active, .v-dash-sidebar .nav-link:hover{ background: rgba(213,0,0,.15); color:#fff; }
.v-dash-sidebar .nav-link.active{ border-left:3px solid var(--v-red); }
.v-kpi{ background:#fff; border:1px solid var(--v-gray-200); border-radius: var(--v-radius-lg); padding:1.3rem; }
.v-kpi .num{ font-family: var(--v-font-mono); font-size:1.8rem; font-weight:700; }
.v-kpi .delta{ font-size:.78rem; font-weight:600; }
.v-kpi .delta.up{ color:#0a8a3a; }
.v-kpi .delta.down{ color: var(--v-red); }
.table thead th{ font-family: var(--v-font-mono); font-size:.72rem; text-transform:uppercase; letter-spacing:.05em; color:var(--v-gray-600); border-bottom-width:1px; }

/* ==========================================================================
   FOOTER
   ========================================================================== */
.v-footer{ background: var(--v-black); color: rgba(255,255,255,.65); padding-top: 4rem; }
.v-footer h6{ color:#fff; font-family: var(--v-font-mono); font-size:.78rem; text-transform:uppercase; letter-spacing:.1em; margin-bottom:1.1rem; }
.v-footer a{ color: rgba(255,255,255,.65); }
.v-footer a:hover{ color: var(--v-red-light); }
.v-footer .form-control{ background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.15); color:#fff; }
.v-footer .form-control::placeholder{ color: rgba(255,255,255,.4); }
.v-social{ width:38px; height:38px; border-radius:50%; background: rgba(255,255,255,.08); display:flex; align-items:center; justify-content:center; color:#fff; transition: var(--v-transition); }
.v-social:hover{ background: var(--v-red); }
.v-footer-bottom{ border-top: 1px solid rgba(255,255,255,.1); margin-top: 3rem; padding: 1.3rem 0; font-size:.85rem; }

/* ==========================================================================
   MISC: breadcrumbs / page header / compare / pagination / badges
   ========================================================================== */
.v-page-header{ background: var(--v-black); color:#fff; padding: 3.2rem 0 2.4rem; position:relative; overflow:hidden; }
.v-page-header::after{ content:""; position:absolute; right:-80px; bottom:-120px; width:320px; height:320px; border-radius:50%; background: rgba(213,0,0,.18); }
.v-page-header .breadcrumb{ --bs-breadcrumb-divider: '/'; }
.v-page-header .breadcrumb-item, .v-page-header .breadcrumb-item a{ color: rgba(255,255,255,.6); font-size:.85rem; }
.v-page-header .breadcrumb-item.active{ color:#fff; }

.page-link{ color: var(--v-black); border-radius:8px !important; margin:0 3px; border-color: var(--v-gray-300); }
.page-item.active .page-link{ background: var(--v-red); border-color: var(--v-red); }

.v-compare-bar{
  position: fixed; left:0; right:0; bottom:0; z-index:1040; background:#fff;
  border-top:1px solid var(--v-gray-200); box-shadow: 0 -8px 24px rgba(17,17,17,.08);
  transform: translateY(100%); transition: transform .35s ease;
}
.v-compare-bar.show{ transform: translateY(0); }
.v-compare-slot{ width:70px; height:52px; border-radius:8px; background:var(--v-gray-100); border:1px dashed var(--v-gray-300); display:flex; align-items:center; justify-content:center; overflow:hidden; position:relative; }
.v-compare-slot img{ width:100%; height:100%; object-fit:cover; }
.v-compare-slot .rm{ position:absolute; top:-6px; right:-6px; width:18px;height:18px;border-radius:50%; background:var(--v-black); color:#fff; font-size:.6rem; display:flex; align-items:center; justify-content:center; border:none; }

.v-back-to-top{
  position: fixed; right:22px; bottom:22px; width:46px; height:46px; border-radius:50%;
  background: var(--v-black); color:#fff; display:flex; align-items:center; justify-content:center;
  opacity:0; visibility:hidden; transform: translateY(10px); transition: var(--v-transition); z-index:1050; border:none;
}
.v-back-to-top.show{ opacity:1; visibility:visible; transform:none; }
.v-back-to-top:hover{ background: var(--v-red); }

.v-testimonial{ background:#fff; border-radius: var(--v-radius-lg); border:1px solid var(--v-gray-200); padding:1.8rem; }
.v-testimonial .quote-mark{ font-family: var(--v-font-display); font-size:3rem; color: var(--v-gray-200); line-height:0; display:block; margin-bottom:.6rem; }

.v-thumb-gallery img{ border-radius:10px; cursor:pointer; opacity:.7; transition: var(--v-transition); border:2px solid transparent; }
.v-thumb-gallery img.active, .v-thumb-gallery img:hover{ opacity:1; border-color: var(--v-red); }

.v-spec-table tr td{ padding: .6rem 0; border-bottom:1px dashed var(--v-gray-300); }
.v-spec-table tr td:first-child{ color: var(--v-gray-600); font-size:.88rem; }
.v-spec-table tr td:last-child{ font-weight:600; text-align:right; }

/* animation utility */
.v-reveal{ opacity:0; transform: translateY(24px); transition: opacity .6s ease, transform .6s ease; }
.v-reveal.in{ opacity:1; transform:none; }

/* skeleton loading placeholder (for JS-injected dynamic data zones) */
.v-skel{ background: linear-gradient(90deg, var(--v-gray-200) 25%, var(--v-gray-100) 37%, var(--v-gray-200) 63%); background-size: 400% 100%; animation: v-skel 1.4s ease infinite; border-radius: 8px; }
@keyframes v-skel{ 0%{background-position: 100% 50%;} 100%{background-position: 0 50%;} }

.border-dashed{ border-style: dashed !important; }

/* Leads & Messages inbox */
.list-group-item-action.active{
  background: var(--v-black); border-color: var(--v-black); color:#fff;
}
.list-group-item-action.active .text-muted{ color: rgba(255,255,255,.6) !important; }
.list-group-item-action.active .badge{ background: rgba(255,255,255,.12) !important; color:#fff; border-color: rgba(255,255,255,.25) !important; }

@media (max-width: 991.98px){
  .v-hero{ min-height:auto; }
  .v-finder-wrap{ margin-top: 1.6rem; }
  .v-hero-content{ padding-block: 3rem 3rem; }
}

/* Mobile filter drawer */
@media (max-width: 991.98px){
  #filterPanel{
    position: fixed; top:0; left:0; bottom:0; width: 320px; max-width: 86vw;
    background:#fff; z-index: 1045; padding: 1.2rem; overflow-y:auto;
    transform: translateX(-105%); transition: transform .3s ease; box-shadow: var(--v-shadow-md);
  }
  #filterPanel.show-mobile{ transform: translateX(0); }
}


/* ==========================================================================
   Mobile Navbar
   ========================================================================== */
@media (max-width: 991.98px){

  .v-navbar{
      padding: .75rem 0;
  }

  .v-navbar .container-xl{
      padding-left: 1rem;
      padding-right: 1rem;
  }

  .navbar-toggler{
      border: none;
      padding: .45rem .55rem;
      box-shadow: none !important;
  }

  .navbar-toggler:focus{
      box-shadow: none;
  }

}