/* =====================================================================
   VitrinCar — Account Menu
   Dark navy glassmorphism dropdown · purple/blue neon accents
   Desktop: dropdown under the account button. Mobile: bottom sheet.
   ===================================================================== */

:root{
  --vc-bg:#050b18;
  --vc-panel:rgba(13,22,42,.88);
  --vc-panel-soft:rgba(20,31,58,.72);
  --vc-border:rgba(132,92,255,.28);
  --vc-border-strong:rgba(132,92,255,.55);
  --vc-text:#f7f9ff;
  --vc-muted:#9aa7c7;
  --vc-primary:#7c4dff;
  --vc-primary-2:#4f7cff;
  --vc-success:#22c55e;
  --vc-warning:#f59e0b;
  --vc-danger:#ef4444;
  --vc-shadow:0 24px 80px rgba(0,0,0,.45);
  --vc-glow:0 0 32px rgba(124,77,255,.35);
}

/* The component inherits your site font; falls back to a clean stack. */
.vc-am-root,.vc-am-trigger,.vc-am-panel{
  font-family:inherit,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  -webkit-font-smoothing:antialiased;
}
.vc-am-root{position:relative;display:inline-block}
.vc-am-ic{width:20px;height:20px;display:block}

/* --------------------------------------------------------------- TRIGGER */
.vc-am-trigger{
  display:inline-flex;align-items:center;gap:10px;cursor:pointer;
  padding:7px 12px 7px 7px;border-radius:999px;
  background:linear-gradient(180deg,rgba(20,31,58,.8),rgba(13,22,42,.8));
  border:1px solid var(--vc-border);color:var(--vc-text);
  transition:border-color .18s ease,box-shadow .18s ease,transform .18s ease;
}
.vc-am-trigger:hover{border-color:var(--vc-border-strong);box-shadow:var(--vc-glow)}
.vc-am-trigger[aria-expanded="true"]{border-color:var(--vc-border-strong);box-shadow:var(--vc-glow)}
.vc-am-trigger:focus-visible{outline:2px solid var(--vc-primary);outline-offset:2px}
.vc-am-ava{width:34px;height:34px;border-radius:10px;object-fit:cover;flex:0 0 auto;background:#16223f}
.vc-am-ava--txt{display:grid;place-items:center;font-weight:700;font-size:13px;
  color:#fff;background:linear-gradient(135deg,var(--vc-primary),var(--vc-primary-2))}
.vc-am-trigger-txt{display:flex;flex-direction:column;line-height:1.15;text-align:start}
.vc-am-trigger-name{font-weight:700;font-size:14px}
.vc-am-trigger-sub{font-size:11.5px;color:var(--vc-muted)}
.vc-am-trigger-chev{display:grid;place-items:center;color:var(--vc-muted);transition:transform .25s ease}
.vc-am-trigger-chev .vc-am-ic{width:18px;height:18px;transform:rotate(90deg)}
.vc-am-trigger[aria-expanded="true"] .vc-am-trigger-chev .vc-am-ic{transform:rotate(-90deg)}

/* --------------------------------------------------------------- OVERLAY (mobile) */
.vc-am-overlay{
  position:fixed;inset:0;z-index:1190;background:rgba(3,7,16,.62);
  backdrop-filter:blur(2px);opacity:0;transition:opacity .25s ease;
}
.vc-am-overlay.is-show{opacity:1}

/* --------------------------------------------------------------- PANEL */
.vc-am-panel{
  position:absolute;top:calc(100% + 12px);inset-inline-end:0;z-index:1200;
  width:400px;max-width:calc(100vw - 24px);
  max-height:calc(100vh - 96px);
  display:flex;flex-direction:column;
  background:
    radial-gradient(120% 60% at 100% 0%,rgba(124,77,255,.12),transparent 60%),
    var(--vc-panel);
  backdrop-filter:blur(22px) saturate(1.1);
  border:1px solid var(--vc-border);border-radius:24px;
  box-shadow:var(--vc-shadow),var(--vc-glow);
  padding:14px;color:var(--vc-text);
  transform-origin:top right;
  opacity:0;transform:translateY(-10px) scale(.97);
  transition:opacity .2s ease,transform .22s cubic-bezier(.21,1.02,.35,1);
}
[dir="rtl"] .vc-am-panel{transform-origin:top left}
.vc-am-panel.is-open{opacity:1;transform:translateY(0) scale(1)}
/* ── Click-capture fix ──────────────────────────────────────────────
   The base rule above sets display:flex, which OVERRIDES the [hidden]
   attribute (UA `[hidden]{display:none}` has lower specificity). Without
   the two rules below the closed panel stays in the layout — invisible
   via opacity:0 but still capturing pointer events over whatever sits
   beneath it (e.g. the car-detail dealer sidebar), hijacking clicks to
   the menu's own links (View Profile / My Hub). Fix:
     1) honour the hidden attribute so a fully-closed panel leaves layout
     2) never capture clicks unless actually open (covers the close anim
        window where .is-open is gone but [hidden] not yet re-applied) */
.vc-am-panel[hidden]{display:none !important}
.vc-am-panel:not(.is-open){pointer-events:none}
.vc-am-panel.is-open{pointer-events:auto}

/* little triangle pointer */
.vc-am-pointer{
  position:absolute;top:-7px;inset-inline-end:26px;width:14px;height:14px;
  background:var(--vc-panel);border-inline-start:1px solid var(--vc-border);
  border-block-start:1px solid var(--vc-border);transform:rotate(45deg);
  backdrop-filter:blur(22px);
}

/* mobile-only chrome hidden on desktop */
.vc-am-grip,.vc-am-x{display:none}

/* scroll body */
.vc-am-scroll{overflow-y:auto;margin:4px -4px -4px;padding:0 4px 4px;scrollbar-width:thin;
  scrollbar-color:var(--vc-border-strong) transparent}
.vc-am-scroll::-webkit-scrollbar{width:8px}
.vc-am-scroll::-webkit-scrollbar-thumb{background:rgba(132,92,255,.35);border-radius:8px}

/* --------------------------------------------------------------- PROFILE CARD */
.vc-am-profile{
  display:flex;gap:14px;padding:14px;border-radius:18px;
  background:linear-gradient(160deg,var(--vc-panel-soft),rgba(13,22,42,.5));
  border:1px solid rgba(132,92,255,.18);
}
.vc-am-pf-ava{width:84px;height:84px;border-radius:18px;object-fit:cover;flex:0 0 auto;
  border:1px solid rgba(255,255,255,.08);background:#16223f}
.vc-am-pf-ava--txt{display:grid;place-items:center;font-weight:800;font-size:30px;color:#fff;
  background:linear-gradient(135deg,var(--vc-primary),var(--vc-primary-2))}
.vc-am-pf-body{min-width:0;flex:1}
.vc-am-pf-name{display:flex;align-items:center;gap:7px;font-size:21px;font-weight:800;letter-spacing:.2px}
.vc-am-pf-name>span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.vc-am-verified{flex:0 0 auto;color:#fff;display:grid;place-items:center}
.vc-am-verified .vc-am-ic{width:18px;height:18px;color:#3b82f6;fill:#3b82f6;stroke:#fff;stroke-width:1.6}
.vc-am-pf-account{color:var(--vc-muted);font-size:15px;margin-top:1px}
.vc-am-pf-meta{list-style:none;margin:9px 0 0;padding:0;display:flex;flex-direction:column;gap:5px}
.vc-am-pf-meta li{display:flex;align-items:center;gap:8px;color:var(--vc-muted);font-size:13.5px;
  min-width:0}
.vc-am-pf-meta li{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.vc-am-mi{flex:0 0 auto;display:grid;place-items:center;color:#7b88ad}
.vc-am-mi .vc-am-ic{width:15px;height:15px}

/* View Profile */
.vc-am-viewprofile{
  display:flex;align-items:center;justify-content:space-between;
  margin-top:10px;padding:12px 16px;border-radius:14px;text-decoration:none;
  background:rgba(124,77,255,.08);border:1px solid var(--vc-border);
  color:var(--vc-primary-2);font-weight:700;font-size:14.5px;
  transition:background .16s ease,border-color .16s ease,box-shadow .16s ease;
}
.vc-am-viewprofile:hover{background:rgba(124,77,255,.16);border-color:var(--vc-border-strong);box-shadow:var(--vc-glow)}
.vc-am-vp-chev{display:grid;place-items:center}
.vc-am-vp-chev .vc-am-ic{width:18px;height:18px}
[dir="rtl"] .vc-am-vp-chev .vc-am-ic{transform:scaleX(-1)}

/* --------------------------------------------------------------- GROUPS / ITEMS */
.vc-am-group{display:flex;flex-direction:column;gap:2px}
.vc-am-sep{height:1px;margin:9px 4px;background:linear-gradient(90deg,transparent,rgba(132,92,255,.22),transparent)}

.vc-am-item{
  display:flex;align-items:center;gap:13px;min-height:50px;padding:9px 12px;
  border-radius:14px;text-decoration:none;color:var(--vc-text);
  border:1px solid transparent;transition:background .15s ease,border-color .15s ease;
}
.vc-am-item:hover,.vc-am-item:focus-visible{
  background:linear-gradient(90deg,rgba(124,77,255,.16),rgba(79,124,255,.07));
  border-color:rgba(132,92,255,.32);outline:none;
}
.vc-am-item-ic{flex:0 0 auto;width:40px;height:40px;border-radius:12px;display:grid;place-items:center;
  color:#c3cbe6;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.05)}
.vc-am-item:hover .vc-am-item-ic{color:#fff;background:rgba(124,77,255,.18);border-color:var(--vc-border)}
.vc-am-item-txt{min-width:0;flex:1;display:flex;flex-direction:column;line-height:1.25}
.vc-am-item-title{font-weight:700;font-size:15px}
.vc-am-item-sub{font-size:12.5px;color:var(--vc-muted)}
.vc-am-item-end{flex:0 0 auto;display:flex;align-items:center}
.vc-am-item-chev{flex:0 0 auto;color:#566184;opacity:0;transform:translateX(-4px);transition:.16s}
[dir="rtl"] .vc-am-item-chev .vc-am-ic{transform:scaleX(-1)}
.vc-am-item:hover .vc-am-item-chev{opacity:1;transform:translateX(0)}

/* count badges */
.vc-am-badge{
  min-width:24px;height:24px;padding:0 7px;border-radius:999px;display:grid;place-items:center;
  font-size:12.5px;font-weight:800;color:#fff;
  background:linear-gradient(135deg,var(--vc-primary),var(--vc-primary-2));
  box-shadow:0 4px 12px rgba(124,77,255,.4);
}
.vc-am-badge--urgent{background:linear-gradient(135deg,#ec4899,#f43f5e);box-shadow:0 4px 12px rgba(244,63,94,.42)}

/* logout / danger */
.vc-am-group--danger{margin-top:4px}
.vc-am-item--danger{border:1px solid rgba(239,68,68,.4);background:rgba(239,68,68,.06)}
.vc-am-item--danger .vc-am-item-ic{color:var(--vc-danger);background:rgba(239,68,68,.1);border-color:rgba(239,68,68,.3)}
.vc-am-item--danger .vc-am-item-title{color:#ff6b6b}
.vc-am-item--danger .vc-am-item-sub{color:rgba(239,68,68,.7)}
.vc-am-item--danger:hover{background:rgba(239,68,68,.12);border-color:rgba(239,68,68,.6);box-shadow:0 0 24px rgba(239,68,68,.25)}

/* staggered reveal when opening */
.vc-am-panel.is-open .vc-am-item,
.vc-am-panel.is-open .vc-am-viewprofile,
.vc-am-panel.is-open .vc-am-profile{animation:vcAmIn .34s both}
.vc-am-panel.is-open .vc-am-profile{animation-delay:.02s}
.vc-am-panel.is-open .vc-am-viewprofile{animation-delay:.06s}
.vc-am-panel.is-open .vc-am-group .vc-am-item:nth-child(1){animation-delay:.08s}
.vc-am-panel.is-open .vc-am-group .vc-am-item:nth-child(2){animation-delay:.11s}
.vc-am-panel.is-open .vc-am-group .vc-am-item:nth-child(3){animation-delay:.14s}
.vc-am-panel.is-open .vc-am-group .vc-am-item:nth-child(4){animation-delay:.17s}
@keyframes vcAmIn{from{opacity:0;transform:translateY(7px)}to{opacity:1;transform:none}}

/* --------------------------------------------------------------- MOBILE: bottom sheet */
@media (max-width:768px){
  .vc-am-panel{
    position:fixed;inset:auto 0 0 0;top:auto;width:100%;max-width:100%;
    max-height:85vh;border-radius:24px 24px 0 0;padding:10px 14px 22px;
    transform-origin:bottom center;transform:translateY(100%);
  }
  .vc-am-panel.is-open{transform:translateY(0)}
  .vc-am-pointer{display:none}
  .vc-am-grip{display:block;width:42px;height:5px;border-radius:999px;margin:4px auto 12px;
    background:rgba(154,167,199,.4)}
  .vc-am-x{display:grid;place-items:center;position:absolute;top:12px;inset-inline-end:14px;
    width:34px;height:34px;border-radius:10px;border:1px solid var(--vc-border);
    background:var(--vc-panel-soft);color:var(--vc-text);cursor:pointer}
  .vc-am-x svg{width:18px;height:18px}
  .vc-am-item{min-height:56px}
  .vc-am-item-ic{width:44px;height:44px}
  body.vc-am-locked{overflow:hidden}
}

@media (prefers-reduced-motion:reduce){
  .vc-am-panel,.vc-am-overlay,.vc-am-trigger-chev .vc-am-ic{transition:none}
  .vc-am-panel.is-open .vc-am-item,
  .vc-am-panel.is-open .vc-am-viewprofile,
  .vc-am-panel.is-open .vc-am-profile{animation:none}
}

/* ---------------------------------------------------------------
   Marketplace nav (.mpnav) only: size the account trigger to match
   the native nav pills (height 40px, radius 12px). Scoped so the
   showroom trigger is unaffected. */
.mpnav .vc-am-root{display:inline-flex;align-items:center}
.mpnav .vc-am-trigger{height:40px;border-radius:12px;padding:0 12px 0 6px;gap:8px;
  border:1px solid rgba(255,255,255,.10);background:rgba(255,255,255,.04)}
.mpnav .vc-am-trigger .vc-am-ava{width:28px;height:28px;border-radius:8px}
.mpnav .vc-am-trigger .vc-am-trigger-name{font-size:13px;line-height:1.1}
.mpnav .vc-am-trigger .vc-am-trigger-sub{font-size:10.5px;line-height:1.1}
.mpnav .vc-am-trigger .vc-am-trigger-chev .vc-am-ic{width:16px;height:16px}
body[data-theme="light"] .mpnav .vc-am-trigger{border-color:rgba(20,30,55,.12);background:rgba(20,30,55,.04)}

/* ── Showroom-family nav (.nav-right) ───────────────────────────────
   On the dealer / showroom pages the account pill is rendered inside
   .nav-right, next to the heart icon (.nav-ico, 38px) and the primary
   button (.btn, ~38px, radius 12). The default trigger is a tall fully
   rounded gradient pill that doesn't match. Size its frame to the
   neighbours. Scoped to .nav-right, which the marketplace nav (.mpnav)
   never uses, so this leaves the marketplace pill untouched. */
.nav-right .vc-am-trigger{
  height:38px;border-radius:12px;padding:0 12px 0 6px;gap:8px;
  background:rgba(255,255,255,.04);
  border:1px solid var(--border,rgba(255,255,255,.12));
  box-shadow:none;
}
.nav-right .vc-am-trigger:hover,
.nav-right .vc-am-trigger[aria-expanded="true"]{
  border-color:rgba(124,92,255,.45);background:rgba(124,92,255,.08);box-shadow:none;
}
.nav-right .vc-am-trigger .vc-am-ava{width:28px;height:28px;border-radius:8px}
.nav-right .vc-am-trigger .vc-am-trigger-name{font-size:13px;line-height:1.1}
.nav-right .vc-am-trigger .vc-am-trigger-sub{font-size:10.5px;line-height:1.1}
.nav-right .vc-am-trigger .vc-am-trigger-chev .vc-am-ic{width:16px;height:16px}

/* ── Showroom-family nav extras (Inventory / Live Map links + language pill) ──
   Scoped to .nav-links / .nav-lang* which only the dealer/showroom nav uses;
   the marketplace nav (.mpnav) is unaffected. */
.nav-links a.nlx{display:inline-flex;align-items:center;gap:7px}
.nav-links a.nlx .nl-ic{display:inline-flex;align-items:center}
.nav-links a.nlx .nl-ic svg{width:16px;height:16px;display:block}
.nav-lang-pill{display:inline-flex;align-items:center;gap:6px;height:38px;
  padding:0 9px 0 11px;border-radius:12px;cursor:pointer;
  background:rgba(255,255,255,.04);border:1px solid var(--border,rgba(255,255,255,.12));
  color:var(--text,#eef3ff);transition:border-color .15s,background .15s}
.nav-lang-pill:hover{border-color:rgba(124,92,255,.45);background:rgba(124,92,255,.08)}
.nav-lang-pill svg{width:17px;height:17px;color:var(--muted,#8b97b8);flex:0 0 auto}
.nav-lang{appearance:none;-webkit-appearance:none;border:0;background:transparent;color:inherit;
  font:inherit;font-size:13.5px;font-weight:600;cursor:pointer;outline:none;
  padding:0 18px 0 2px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%238b97b8' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right center;background-size:13px}
[dir="rtl"] .nav-lang{padding:0 2px 0 18px;background-position:left center}
.nav-lang option{background:#0b1023;color:#eef3ff}
@media(max-width:760px){.nav-lang-pill svg{display:none}}

/* ── Showroom-family nav: "Sell my car" CTA (matches marketplace .mpnav-cta) ── */
.nav-right .nav-sell{height:38px;padding:0 16px;border-radius:12px;border:0;
  background:linear-gradient(135deg,#5b8cff,#7c5cff);color:#fff;
  font-weight:800;font-size:13px;text-decoration:none;white-space:nowrap;
  display:inline-flex;align-items:center;gap:9px;
  box-shadow:0 10px 26px rgba(91,140,255,.40);transition:transform .12s,box-shadow .15s,filter .15s}
.nav-right .nav-sell:hover{box-shadow:0 14px 30px rgba(91,140,255,.50);filter:brightness(1.05);transform:translateY(-1px)}
.nav-right .nav-sell .nav-sell-arrow{width:16px;height:16px;display:block;flex:0 0 auto}
[dir="rtl"] .nav-right .nav-sell .nav-sell-arrow{transform:scaleX(-1)}