/* CarMaa — vehicle detail v2 (from the "car-card-3tabs" demo).
   Everything from the gallery box downward: price card, 3-tab info card, seller.
   Uses only the site's own colour variables — no new palette. */
.vehicle-demo-layout{
  --vx-panel:var(--surface-3,#23242a);
  --vx-tile:color-mix(in srgb,var(--text,#f5f5f7) 6%,var(--vx-panel));
  --vx-ok:#7fd8a6;
}
html.theme-light .vehicle-demo-layout{--vx-ok:#1f8a54}

/* ---- price card: demo proportions ---- */
.vehicle-demo-layout .price-card{padding:16px;border-radius:26px}
.vehicle-demo-layout .price-heading{margin-bottom:0}
.vehicle-demo-layout .price-heading h1{font-size:21px;font-weight:800;line-height:1.5;letter-spacing:0;margin:0}
.vehicle-demo-layout .price-heading .heading-sub{margin-top:4px;font-size:11.5px}
.vehicle-demo-layout .price-label-row{margin-top:16px}
.vehicle-demo-layout .price-line{margin:6px 0 0}
.vehicle-demo-layout .price-number{font-size:30px;font-weight:800;letter-spacing:-.3px;line-height:1.3}
.vehicle-demo-layout .price-unit{font-size:13px;font-weight:500;color:var(--muted)}
.vehicle-demo-layout .price-hint{font-size:11px;margin-top:4px;line-height:1.8}
.vehicle-demo-layout .thin-rule{margin:16px 0}
.vehicle-demo-layout .summary-facts{gap:8px}
.vehicle-demo-layout .seller-trust{gap:14px;font-size:10.5px;margin-top:14px;padding-top:12px}

/* ---- 3-tab card ---- */
.vehicle-demo-layout .vx{padding:10px 10px 12px;border-radius:28px;border:1px solid var(--line);min-width:0}
.vehicle-demo-layout .vx-tabs{display:grid;grid-template-columns:repeat(3,1fr);position:relative}
.vehicle-demo-layout .vx-tab{appearance:none;border:0;background:none;cursor:pointer;height:50px;display:flex;align-items:center;justify-content:center;gap:8px;font:700 12px "Vazirmatn",sans-serif;color:var(--muted);position:relative;border-radius:20px 20px 0 0;padding:0 4px;text-align:center;transition:color .2s;-webkit-tap-highlight-color:transparent}
.vehicle-demo-layout .vx-tab .icon{width:17px;height:17px;flex:none}
.vehicle-demo-layout .vx-tab[aria-selected="true"]{color:var(--text);background:color-mix(in srgb,var(--text,#f5f5f7) 11%,var(--vx-panel));border-radius:18px 18px 0 0;z-index:2}
.vehicle-demo-layout .vx-tab[aria-selected="true"]::before,
.vehicle-demo-layout .vx-tab[aria-selected="true"]::after{position:absolute;bottom:0;width:20px;height:20px}
.vehicle-demo-layout .vx-tab[aria-selected="true"]:not(:last-child)::after{content:none;left:-20px;background:radial-gradient(circle at 0 0,transparent 20px,var(--vx-panel) 20.5px)}
.vehicle-demo-layout .vx-tab[aria-selected="true"]:not(:first-child)::before{content:none;right:-20px;background:radial-gradient(circle at 100% 0,transparent 20px,var(--vx-panel) 20.5px)}
.vehicle-demo-layout .vx-tab:focus-visible{outline:2px solid var(--text-2);outline-offset:2px}
.vehicle-demo-layout .vx-panel{background:var(--vx-panel);border-radius:22px;padding:14px;position:relative;z-index:1;min-height:330px}
.vehicle-demo-layout .vx-tabs:has(.vx-tab:first-child[aria-selected="true"])+.vx-panel{border-top-right-radius:0}
.vehicle-demo-layout .vx-tabs:has(.vx-tab:last-child[aria-selected="true"])+.vx-panel{border-top-left-radius:0}
.vehicle-demo-layout .vx-pane{display:none;animation:vxIn .28s ease both}
.vehicle-demo-layout .vx-pane.on{display:block}
@keyframes vxIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.vehicle-demo-layout .vx-pane{animation:none}}

.vehicle-demo-layout .vx-sec{display:flex;align-items:center;gap:9px;font-size:14px;font-weight:800;margin-bottom:12px}
.vehicle-demo-layout .vx-m{width:30px;height:30px;border-radius:10px;display:grid;place-items:center;border:1px solid var(--line);color:var(--text-2);flex:none}
.vehicle-demo-layout .vx-m .icon{width:16px;height:16px}
.vehicle-demo-layout .vx-sec small{margin-inline-start:auto;font-weight:400;font-size:11px;color:var(--muted)}
.vehicle-demo-layout .vx-desc{font-size:13px;line-height:2;color:var(--text-2);margin:0}
.vehicle-demo-layout .vx-sep{border:0;height:1px;background:var(--line);margin:16px 0}
.vehicle-demo-layout .vx-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px;font-size:11px;color:var(--muted)}
.vehicle-demo-layout .vx-head b{font-size:14px;color:var(--text)}

/* spec tiles */
.vehicle-demo-layout .vx-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.vehicle-demo-layout .vx-t{background:var(--vx-tile);border:1px solid var(--line);border-radius:16px;padding:12px;display:grid;gap:8px;min-height:84px;align-content:space-between;min-width:0}
.vehicle-demo-layout .vx-ic{width:30px;height:30px;border-radius:10px;display:grid;place-items:center;background:var(--vx-panel);color:var(--text-2);flex:none}
.vehicle-demo-layout .vx-ic .icon{width:16px;height:16px}
.vehicle-demo-layout .vx-t small{font-size:11px;color:var(--muted);display:block}
.vehicle-demo-layout .vx-t strong{font-size:14px;font-weight:700;display:block;margin-top:2px;overflow-wrap:anywhere}
.vehicle-demo-layout .vx-t.is-empty strong{color:var(--muted);font-weight:500;font-size:12.5px}

/* documents */
.vehicle-demo-layout .vx-docs{display:grid;gap:8px}
.vehicle-demo-layout .vx-d{display:flex;align-items:center;gap:11px;background:var(--vx-tile);border:1px solid var(--line);border-radius:16px;padding:12px}
.vehicle-demo-layout .vx-d .vx-ic{width:34px;height:34px;border-radius:11px}
.vehicle-demo-layout .vx-tx{flex:1;display:grid;gap:2px;min-width:0}
.vehicle-demo-layout .vx-d small{font-size:11px;color:var(--muted)}
.vehicle-demo-layout .vx-d strong{font-size:13.5px;overflow-wrap:anywhere}
.vehicle-demo-layout .vx-ck{width:20px;height:20px;color:var(--vx-ok);flex:none}
.vehicle-demo-layout .vx-d.off strong{color:var(--muted);font-weight:500}
.vehicle-demo-layout .vx-meter{display:inline-flex;gap:3px;margin-inline-end:6px;vertical-align:middle}
.vehicle-demo-layout .vx-meter i{width:14px;height:4px;border-radius:9px;background:var(--line)}
.vehicle-demo-layout .vx-meter i.on{background:var(--vx-ok)}
.vehicle-demo-layout .vx-warn{display:flex;gap:8px;align-items:flex-start;font-size:11px;color:var(--muted);margin:12px 0 0;line-height:1.8}
.vehicle-demo-layout .vx-warn[hidden]{display:none}
.vehicle-demo-layout .vx-warn .icon{width:15px;height:15px;flex:none;margin-top:3px}

/* body + map inside tab 3 */
.vehicle-demo-layout .vx .bc-sheet{border-radius:20px}
.vehicle-demo-layout .vx .bc-chips{margin:12px 0 0}
.vehicle-demo-layout .vx .vmap{border-radius:22px}
.vehicle-demo-layout .vx .vmap-canvas{height:190px}
.vehicle-demo-layout .vx .vmap-panel{position:static;max-width:none;border-radius:0;border:0;border-top:1px solid var(--line);-webkit-backdrop-filter:none;backdrop-filter:none;box-shadow:none;background:transparent;color:inherit;padding:14px}
.vehicle-demo-layout .vx .vmap-panel-text strong{font-size:14px}
.vehicle-demo-layout .vx .vmap-panel-text span{font-size:11px;color:var(--muted)}
.vehicle-demo-layout .vx .vmap-panel-text small{font-size:10px;line-height:1.7;color:var(--muted)}

/* seller card: same colours as before, demo shape (round avatar) */
.vehicle-demo-layout .vx-side .seller-mini{border-radius:26px;padding:16px}
.vehicle-demo-layout .vx-side .seller-avatar{border-radius:50%;overflow:hidden}
.vehicle-demo-layout .vx-side .seller-avatar img{width:100%;height:100%;object-fit:cover}

/* layout: tabs under the gallery, seller beside it on desktop */
.vehicle-demo-layout .vx-lower{display:grid;grid-template-columns:minmax(0,1fr);gap:14px;margin-top:14px}
@media (min-width:1024px){
  .vehicle-demo-layout .vx-lower{grid-template-columns:minmax(0,1.35fr) minmax(360px,.85fr)!important;gap:24px;margin-top:24px;align-items:start}
}

/* ---- performance: no GPU-heavy blur / infinite effects below the gallery ---- */
.vehicle-demo-layout .vx-side .seller-mini,
.vehicle-demo-layout .vx-side .seller-mini::before,
.vehicle-demo-layout .price-card,
.vehicle-demo-layout .vx{-webkit-backdrop-filter:none!important;backdrop-filter:none!important}
.vehicle-demo-layout .vx-side .seller-mini::before,
.vehicle-demo-layout .vx-side .seller-mini::after{animation:none!important}
.vehicle-demo-layout .vx-pane{animation:none}
.vehicle-demo-layout .summary-facts .fact{transition:none!important}
.vehicle-demo-layout .vx-lower{content-visibility:auto;contain-intrinsic-size:auto 900px}

/* باکس‌های مشخصات فنی: عکس سه‌بعدی کم‌رنگ سمت چپ به‌جای آیکن (سوخت، موتور، گیربکس، انتقال قدرت) */
.vehicle-demo-layout .vx-t{position:relative;overflow:hidden}
.vehicle-demo-layout .vx-t > *{position:relative;z-index:1}
.vehicle-demo-layout .vx-t.is-fuel .vx-ic,.vehicle-demo-layout .vx-t.is-engine .vx-ic,.vehicle-demo-layout .vx-t.is-gearbox .vx-ic,.vehicle-demo-layout .vx-t.is-drivetrain .vx-ic{display:none}
.vehicle-demo-layout .vx-t.is-fuel::after,.vehicle-demo-layout .vx-t.is-engine::after,.vehicle-demo-layout .vx-t.is-gearbox::after,.vehicle-demo-layout .vx-t.is-drivetrain::after{content:"";position:absolute;z-index:0;pointer-events:none;background-repeat:no-repeat;background-position:left bottom;background-size:contain}
.vehicle-demo-layout .vx-t.is-fuel::after{left:-8px;bottom:-12px;width:76px;height:101px;background-image:url("assets/fuel-pump-3d.webp");opacity:.3;filter:brightness(.85) saturate(.9)}
.vehicle-demo-layout .vx-t.is-engine::after{left:-6px;bottom:-8px;width:92px;height:98px;background-image:url("assets/engine-3d.webp");opacity:.28;filter:brightness(.8) saturate(.75)}
.vehicle-demo-layout .vx-t.is-gearbox::after{left:-4px;bottom:-8px;width:82px;height:98px;background-image:url("assets/gearbox-3d.webp");opacity:.26;filter:brightness(.75) saturate(.8)}
.vehicle-demo-layout .vx-t.is-drivetrain::after{left:-6px;bottom:-8px;width:96px;height:92px;background-image:url("assets/drivetrain-3d.webp");opacity:.26;filter:brightness(.75) saturate(.8)}
.vehicle-demo-layout .vx-t.is-empty::after{opacity:.15}
.vehicle-demo-layout .vx-t strong{text-align:right}
.vehicle-demo-layout .vx-t.is-engine strong,.vehicle-demo-layout .vx-t.is-drivetrain strong{direction:rtl;unicode-bidi:isolate}