:root{
      --max:1180px;
      --navH:72px;

      --bg:#07090b;
      --panel:#0d1014;
      --panel2:#0b0f13;

      --text:#ffffff;
      --text-strong:rgba(255,255,255,.92);
      --muted:rgba(255,255,255,.72);
      --muted2:rgba(255,255,255,.52);

      --line:rgba(255,255,255,.10);
      --surface:rgba(255,255,255,.03);
      --surface2:rgba(255,255,255,.06);

      --accent:#5ae2ff;
      --shadow:0 18px 45px rgba(0,0,0,.55);
      --radius:22px;
      --distance-bg: rgba(90,226,255,.14);
--distance-border: rgba(90,226,255,.38);
--distance-text: #5ae2ff;
    }
*{ box-sizing:border-box; }
    html, body { height:100%; margin:0; }

    body{
      font-family: Inter, Arial, sans-serif;
      color:var(--text);
      overflow-x:hidden;
      background:
        radial-gradient(1200px 700px at 20% 10%, color-mix(in srgb, var(--accent) 16%, transparent), transparent 60%),
        radial-gradient(900px 600px at 80% 20%, color-mix(in srgb, var(--text) 6%, transparent), transparent 55%),
        var(--bg);
    }

    a{ color:inherit; text-decoration:none; }

    /* =========================
       NAVBAR
       ========================= */
    .nav{
      position:fixed;
      inset:0 0 auto 0;
      z-index:1200;
      height:var(--navH);
      background:color-mix(in srgb, var(--panel) 78%, transparent);
      backdrop-filter:blur(10px);
      -webkit-backdrop-filter:blur(10px);
      border-bottom:1px solid var(--line);
    }

/* ================================
   Desktop Models Dropdown
================================ */

.nav-dropdown {
  position: relative;
  display: inline-flex;
  align-items: center;
}

.nav-dropdown-toggle {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

.nav-dropdown-toggle i {
  font-size: 11px;
  transition: transform .25s ease;
}

.nav-dropdown:hover .nav-dropdown-toggle i {
  transform: rotate(180deg);
}

.nav-dropdown-menu {
  position: absolute;
  top: calc(100% + 18px);
  left: 50%;
  transform: translateX(-50%) translateY(8px);
  min-width: 220px;
  padding: 10px;
  border-radius: 18px;
  background: rgba(12, 12, 12, .96);
  border: 1px solid rgba(255, 255, 255, .12);
  box-shadow: 0 22px 60px rgba(0, 0, 0, .45);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .22s ease, transform .22s ease, visibility .22s ease;
  z-index: 999;
  backdrop-filter: blur(18px);
}

.nav-dropdown-menu::before {
  content: "";
  position: absolute;
  top: -18px;
  left: 0;
  right: 0;
  height: 18px;
}

.nav-dropdown:hover .nav-dropdown-menu {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}

.nav-dropdown-menu a {
  display: flex;
  align-items: center;
  width: 100%;
  padding: 11px 13px;
  border-radius: 12px;
  color: rgba(255, 255, 255, .82);
  text-decoration: none;
  font-size: 14px;
  font-weight: 600;
  white-space: nowrap;
  transition: background .2s ease, color .2s ease, transform .2s ease;
}

.nav-dropdown-menu a:hover {
  background: rgba(255, 255, 255, .08);
  color: #fff;
  transform: translateX(3px);
}

/* ================================
   Mobile Models Dropdown
================================ */

.mobile-dropdown {
  display: block;
}

.mobile-dropdown-menu {
  padding: 0 0 8px 14px;
  margin-top: -4px;
}

.mobile-dropdown-menu .menuLink {
  min-height: 46px;
  padding-left: 14px;
  font-size: 14px;
  opacity: .86;
}

.mobile-dropdown-menu .menuLink span::before {
  content: "— ";
  opacity: .45;
}

@media (max-width: 991px) {
  .nav-dropdown-menu {
    display: none;
  }
}

    .nav-inner{
      height:100%;
      max-width:var(--max);
      margin:0 auto;
      padding:0 18px;
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:14px;
    }

    .brand{
      display:flex;
      align-items:center;
      gap:10px;
      min-width:0;
    }

    .brand-logo{
      height:50px;
      width:auto;
      display:block;
    }

    .brand-logo.logoDark{ display:block; }
    .brand-logo.logoLight{ display:none; }

    .dot{
      width:10px;
      height:10px;
      border-radius:50%;
      background:var(--accent);
      box-shadow:0 0 18px color-mix(in srgb, var(--accent) 55%, transparent);
      flex:0 0 auto;
    }

    .nav-links{
      display:flex;
      gap:18px;
      font-size:12px;
      text-transform:uppercase;
      letter-spacing:.14em;
      color:var(--muted);
      align-items:center;
    }

    .nav-links a{
      display:inline-flex;
      align-items:center;
      gap:8px;
      height:44px;
      padding:0 10px;
      line-height:1;
      border-radius:999px;
      transition:.18s ease;
    }

    .nav-links a:hover{
      background:rgba(14,165,233,.08);
      color:rgba(255,255,255,.92);
    }
.menuIconLink{
      display:flex;
      align-items:center;
      justify-content:center;
      width:42px;
      height:42px;
      border-radius:50%;
      transition:all .2s ease;
      border:1px solid transparent;
    }

    .menuIconSvg{
      display:block;
      width:30px;
      height:30px;
      transform:translateY(1px);
    }

    .menuIconLink:hover{
      transform:translateY(-2px);
      border-color:rgba(14,165,233,.25);
      box-shadow:0 0 0 5px rgba(14,165,233,.10);
      background:rgba(14,165,233,.06);
    }
.hamburger{
      width:42px;
      height:42px;
      border:1px solid var(--line);
      background:var(--surface);
      border-radius:14px;
      display:none;
      align-items:center;
      justify-content:center;
      cursor:pointer;
      transition:.18s ease;
      color:var(--text);
    }

    .hamburger:hover{
      border-color:color-mix(in srgb, var(--accent) 35%, transparent);
      box-shadow:0 0 0 4px color-mix(in srgb, var(--accent) 12%, transparent);
    }

    .hamburger span{
      position:relative;
      width:18px;
      height:2px;
      background:currentColor !important;
      display:block;
    }

    .hamburger span:before,
    .hamburger span:after{
      content:"";
      position:absolute;
      left:0;
      width:18px;
      height:2px;
      background:currentColor !important;
    }

    .hamburger span:before{ top:-6px; }
    .hamburger span:after{ top:6px; }

    .navClose{
      width:42px;
      height:42px;
      border:1px solid var(--line);
      background:var(--surface);
      border-radius:14px;
      cursor:pointer;
      color:var(--text-strong);
      font-size:18px;
      display:none;
      align-items:center;
      justify-content:center;
      transition:.18s ease;
    }

    .navClose:hover{
      border-color:color-mix(in srgb, var(--accent) 35%, transparent);
      box-shadow:0 0 0 4px color-mix(in srgb, var(--accent) 12%, transparent);
    }

    body.menu-open .navClose{ display:flex; }
    body.menu-open #openMenu{ display:none; }

    /* =========================
       MOBILE OVERLAY MENU
       ========================= */
    .overlay{
      position:fixed;
      inset:0;
      z-index:1100;
      background:color-mix(in srgb, #000 35%, transparent);
      backdrop-filter:blur(10px);
      opacity:0;
      pointer-events:none;
      transition:opacity .28s ease;
    }

    .overlay.open{
      opacity:1;
      pointer-events:auto;
    }

    .overlay-panel{
      position:absolute;
      top:0;
      right:0;
      height:100%;
      width:100vw;
      max-width:100vw;
      background:var(--panel2);
      border-left:1px solid var(--line);
      box-shadow:-24px 0 80px rgba(0,0,0,.35);
      transform:translateX(100%);
      transition:transform .36s cubic-bezier(.77,0,.18,1);
      padding-bottom:max(18px, env(safe-area-inset-bottom));
      overflow:auto;
      display:flex;
      flex-direction:column;
    }

    .overlay.open .overlay-panel{ transform:translateX(0); }

    .overlay-top{
      position:sticky;
      top:0;
      z-index:5;
      height:var(--navH);
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:14px;
      padding:0 16px;
      border-bottom:1px solid var(--line);
      background:color-mix(in srgb, var(--panel2) 92%, transparent);
      backdrop-filter:blur(12px);
    }

    .overlay .brand{
      font-weight:800;
      letter-spacing:.08em;
      font-size:18px;
      color:var(--text);
    }

    .overlay-close{
      width:42px;
      height:42px;
      border:1px solid var(--line);
      background:var(--surface);
      border-radius:14px;
      cursor:pointer;
      display:flex;
      align-items:center;
      justify-content:center;
      color:var(--text-strong);
      font-size:18px;
      transition:.18s ease;
    }

    .overlay-close:hover{
      border-color:color-mix(in srgb, var(--accent) 45%, transparent);
      box-shadow:0 0 0 5px color-mix(in srgb, var(--accent) 14%, transparent);
      background:color-mix(in srgb, var(--accent) 10%, var(--surface));
      transform:scale(1.05);
    }

    .overlay-links{
      display:flex;
      flex-direction:column;
    }

    .overlay-links a{
      all:unset;
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:14px;
      padding:18px 18px;
      border-bottom:1px solid color-mix(in srgb, var(--text) 10%, transparent);
      color:var(--text-strong);
      text-transform:uppercase;
      letter-spacing:.12em;
      font-weight:700;
      font-size:13px;
      cursor:pointer;
      transition:background .18s ease, transform .18s ease, opacity .25s ease;
    }

    .overlay-links a:hover{
      background:var(--surface);
      transform:translateX(2px);
    }

    .overlay-links i{
      font-size:14px;
      color:var(--muted);
    }

    /* =========================
   DEALERS CATEGORIES
   ========================= */

.panel-categories{
  padding:10px 14px 0;
  border-bottom:1px solid var(--line);
}

.panel-categories-title{
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:.16em;
  color:var(--muted2);
  font-weight:800;
  margin-bottom:8px;
}

.panel-categories-list{
  display:flex;
  gap:8px;
  overflow-x:auto;
  padding-bottom:10px;
  scrollbar-width:thin;
}

.category-chip{
  flex:0 0 auto;
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:9px 12px;
  border-radius:999px;
  border:1px solid var(--line);
  background:var(--surface);
  color:var(--text);
  font-size:11px;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.08em;
  transition:.18s ease;
  white-space:nowrap;
}

.category-chip:hover{
  background:var(--surface2);
  border-color:color-mix(in srgb, var(--accent) 35%, transparent);
  box-shadow:0 0 0 4px color-mix(in srgb, var(--accent) 10%, transparent);
  transform:translateY(-1px);
}

.category-chip i{
  color:var(--accent);
}

    /* =========================
       MAP + PANEL
       ========================= */
    #map{
      position:fixed;
      inset:0;
      z-index:1;
    }

    .panel{
      position:fixed;
      top:calc(var(--navH) + 16px);
      left:16px;
      bottom:16px;
      width:420px;
      z-index:900;
      background:color-mix(in srgb, var(--panel) 92%, transparent);
      border:1px solid var(--line);
      border-radius:22px;
      overflow:hidden;
      display:flex;
      flex-direction:column;
      backdrop-filter:blur(16px);
      box-shadow:0 10px 40px rgba(0,0,0,.28);
    }

    .panel-head{
  padding:14px 14px 12px;
  border-bottom:1px solid var(--line);
  display:flex;
  flex-direction:column;
  gap:10px;
  flex:0 0 auto;
}

.panel-searchRow{
  display:flex;
  gap:10px;
  align-items:center;
}

.panel-search{
  display:flex;
  align-items:center;
  gap:10px;
  padding:12px 14px;
  border-radius:999px;
  border:1px solid var(--line);
  background:var(--surface);
  color:var(--text);
  flex:1 1 auto;
  min-width:0;
}

.panel-search input{
  background:transparent;
  border:0;
  outline:none;
  color:var(--text);
  width:100%;
  min-width:0;
  font:inherit;
}

    .panel-toprow{
      display:flex;
      justify-content:space-between;
      gap:10px;
      align-items:center;
    }

    #status{
      font-size:13px;
      color:var(--muted);
      line-height:1.4;
    }

    #countChip{
      white-space:nowrap;
      font-size:12px;
      font-weight:700;
      padding:8px 10px;
      border-radius:999px;
      background:var(--surface2);
      border:1px solid var(--line);
      color:var(--text);
    }

    .panel-search{
      display:flex;
      align-items:center;
      gap:10px;
      padding:12px 14px;
      border-radius:999px;
      border:1px solid var(--line);
      background:var(--surface);
      color:var(--text);
    }

    .panel-search input{
      background:transparent;
      border:0;
      outline:none;
      color:var(--text);
      width:100%;
      font:inherit;
    }

    .panel-search input::placeholder{
      color:var(--muted2);
    }

   .panel-actions{
  display:flex;
  gap:10px;
  flex:0 0 auto;
}

    .btn,
    .pill{
      display:inline-flex;
      align-items:center;
      gap:8px;
      padding:10px 14px;
      border-radius:999px;
      border:1px solid var(--line);
      background:var(--surface);
      color:var(--text);
      text-decoration:none;
      cursor:pointer;
      transition:.2s ease;
      font:inherit;
    }

    .btn:hover,
    .pill:hover{
      background:var(--surface2);
      border-color:color-mix(in srgb, var(--accent) 35%, transparent);
    }

    .btn.primary{
      background:var(--text);
      color:var(--bg);
      border-color:var(--text);
    }

    .list{
  overflow:auto;
  padding:10px;
  flex:1 1 auto;
  min-height:0;
}

    .dealer{
      background:var(--surface);
      border:1px solid var(--line);
      border-radius:18px;
      padding:14px 12px;
      margin-bottom:10px;
      cursor:pointer;
      transition:.2s ease;
    }

    .dealer:hover{
      background:var(--surface2);
      border-color:color-mix(in srgb, var(--accent) 22%, var(--line));
      transform:translateY(-1px);
    }

    .dealer.active{
      border-color:rgba(90,226,255,.55);
      box-shadow:0 0 0 1px rgba(90,226,255,.12), 0 8px 24px rgba(0,0,0,.22);
      background:color-mix(in srgb, var(--accent) 8%, var(--surface));
    }

    .dealer-top{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:10px;
      margin-bottom:8px;
      flex-wrap:wrap;
    }

    .dealer-title{
      font-weight:800;
      text-transform:uppercase;
      font-size:13px;
      letter-spacing:.05em;
      display:flex;
      align-items:center;
      gap:8px;
      flex-wrap:wrap;
      color:var(--text);
    }

    .dealer-badges{
      display:flex;
      gap:8px;
      flex-wrap:wrap;
      align-items:center;
    }

    .distance{
  background: var(--distance-bg);
  border: 1px solid var(--distance-border);
  color: var(--distance-text);
  font-size: 11px;
  font-weight: 800;
  padding: 5px 9px;
  border-radius: 999px;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.nearest{
      background:#5ae2ff;
      color:#031018;
      font-size:11px;
      font-weight:800;
      padding:5px 9px;
      border-radius:999px;
      letter-spacing:.04em;
      text-transform:uppercase;
      box-shadow:0 0 18px rgba(90,226,255,.18);
    }

    .meta-row{
      display:flex;
      gap:10px;
      align-items:flex-start;
      margin-bottom:6px;
      color:var(--muted);
      font-size:14px;
      line-height:1.45;
    }

    .meta-row i{
      width:16px;
      margin-top:2px;
      opacity:.9;
      flex:0 0 16px;
    }

    .actions{
      display:flex;
      gap:8px;
      flex-wrap:wrap;
      margin-top:12px;
    }

    .pinWrap{
      width:72px;
      height:72px;
      position:relative;
      transform:translateY(-8px);
    }

    .pinShape{
      position:absolute;
      inset:0;
      background:#0b8f3f;
      border-radius:50% 50% 50% 0;
      transform:rotate(-45deg);
      border:2px solid rgba(255,255,255,.18);
      box-sizing:border-box;
    }

    .pinShape::after{
      content:"";
      position:absolute;
      width:58px;
      height:58px;
      top:50%;
      left:50%;
      background:#fff;
      border-radius:50%;
      transform:translate(-50%, -50%) rotate(45deg);
    }

    .pinLogo{
      position:absolute;
      width:48px;
      height:48px;
      top:50%;
      left:50%;
      transform:translate(-50%, -50%);
      border-radius:50%;
      z-index:2;
      background-color:#fff;
      background-size:88%;
      background-position:center;
      background-repeat:no-repeat;
    }

    @media (max-width: 980px){
      .nav{ height:64px; }
      .nav-inner{ padding:10px 16px; }
      .brand-logo{ height:32px; }
      .nav-links{ display:none !important; }
      .hamburger{ display:flex; }

      .panel{
        left:10px;
        right:10px;
        width:auto;
        top:auto;
        height:46vh;
        bottom:10px;
        border-radius:20px;
      }
    }

    @media (max-width: 640px){
  .panel{
    left:10px;
    right:10px;
    width:auto;
    top:auto;
    bottom:10px;
    height:52vh;
    border-radius:20px;
  }

  .panel-head{
    padding:10px;
    gap:8px;
  }

  .panel-toprow{
    flex-direction:row;
    align-items:center;
    justify-content:space-between;
    gap:8px;
  }

  #status{
    font-size:12px;
    line-height:1.35;
  }

  #countChip{
    font-size:11px;
    padding:7px 9px;
  }

  .panel-searchRow{
    gap:8px;
  }

  .panel-search{
    padding:10px 12px;
  }

  .panel-actions{
    flex:0 0 auto;
  }

  .panel-actions .btn{
    padding:10px 12px;
    min-width:auto;
    white-space:nowrap;
  }

  .list{
    padding:8px;
  }

  .dealer{
    padding:12px 10px;
    border-radius:16px;
  }

  .dealer-title{
    font-size:12px;
  }

  .meta-row{
    font-size:13px;
  }
}

.ai-suggestions{

display:flex;
flex-wrap:wrap;
gap:8px;
margin-top:10px;

}

.ai-suggest{

border:1px solid var(--line);
background:var(--surface);
color:var(--text);
padding:8px 10px;
border-radius:12px;
font-size:12px;
cursor:pointer;
transition:all .2s;

}

.ai-suggest:hover{

border-color:var(--accent);
background:rgba(14,165,233,.08);

}