
.mt-vehicle-app{
    --b:#4098ff;
    --line:rgba(255,255,255,.14);
    --soft:rgba(255,255,255,.08);
    --bg:#0b0f13;
    --bg2:#10161b;
    color:#fff;
    font-family:"Montserrat","Helvetica Neue",Arial,sans-serif
}
html.mtv-lock,body.mtv-lock{overflow:hidden!important;overscroll-behavior:none!important}

.mtv-toolbar{
    display:flex;align-items:flex-end;justify-content:space-between;gap:28px;
    margin-bottom:34px;padding-bottom:1px;border-bottom:1px solid var(--line)
}
.mtv-filter-wrap{display:flex;align-items:flex-end;gap:24px;min-width:0}
.mtv-filters{display:flex;gap:26px;flex-wrap:wrap}
.mtv-filter{
    position:relative;border:0;background:none;color:rgba(255,255,255,.42);
    padding:0 0 15px;font:700 8px/1 "Montserrat",Arial,sans-serif;
    letter-spacing:1.8px;text-transform:uppercase;cursor:pointer;transition:color .25s ease
}
.mtv-filter:hover,.mtv-filter.active{color:#fff}
.mtv-filter:after{
    content:"";position:absolute;left:0;right:0;bottom:-1px;height:1px;
    background:var(--b);transform:scaleX(0);transform-origin:left center;
    transition:transform .3s cubic-bezier(.22,.78,.2,1)
}
.mtv-filter.active:after{transform:scaleX(1)}
.mtv-result-count{
    padding-bottom:14px;color:rgba(255,255,255,.30);
    font-size:7px;font-weight:700;letter-spacing:1.3px;text-transform:uppercase;white-space:nowrap
}
.mtv-sort-label{
    display:flex;align-items:center;gap:12px;padding-bottom:9px;
    color:rgba(255,255,255,.34);font-size:6px;font-weight:700;letter-spacing:1.4px;text-transform:uppercase
}
.mtv-sort{
    border:1px solid rgba(255,255,255,.14);background:#0b0f13;color:#fff;
    min-height:34px;padding:0 34px 0 11px;font:600 8px/1 "Montserrat",Arial,sans-serif;
    letter-spacing:.7px;outline:none;border-radius:0
}
.mtv-sort:focus{border-color:var(--b)}

.mtv-grid{
    display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;
    background:var(--line);border:1px solid var(--line)
}
.mtv-card{
    position:relative;background:var(--bg);cursor:pointer;overflow:hidden;outline:none;
    transition:background .3s ease,transform .3s ease
}
.mtv-card:hover,.mtv-card:focus-visible{background:var(--bg2)}
.mtv-card:focus-visible{box-shadow:inset 0 0 0 1px var(--b)}
.mtv-card.is-sold{opacity:.72}
.mtv-image{position:relative;aspect-ratio:16/10;overflow:hidden;background:#070a0d}
.mtv-image img{width:100%;height:100%;object-fit:cover;transition:transform .72s ease,filter .35s ease;filter:brightness(.82) saturate(.9)}
.mtv-card:hover .mtv-image img,.mtv-card:focus-visible .mtv-image img{transform:scale(1.045);filter:brightness(.94) saturate(.98)}
.mtv-no-image{height:100%;display:grid;place-items:center;color:rgba(255,255,255,.18);font-size:9px;font-weight:700;letter-spacing:3px}
.mtv-status{
    position:absolute;left:14px;top:14px;z-index:2;padding:7px 9px;
    border:1px solid rgba(255,255,255,.16);background:rgba(5,7,9,.86);
    color:#fff;font-size:6px;font-weight:700;letter-spacing:1.3px;text-transform:uppercase
}
.mtv-status.reserved{border-color:rgba(255,255,255,.24)}
.mtv-status.sold{color:rgba(255,255,255,.62)}
.mtv-card-arrow{
    position:absolute;right:14px;top:14px;width:34px;height:34px;display:grid;place-items:center;
    border:1px solid rgba(255,255,255,.14);background:rgba(5,7,9,.65);color:#fff;
    font-size:13px;opacity:0;transform:translate(-5px,5px);
    transition:opacity .3s ease,transform .3s ease,border-color .3s ease
}
.mtv-card:hover .mtv-card-arrow,.mtv-card:focus-visible .mtv-card-arrow{opacity:1;transform:none;border-color:rgba(64,152,255,.55)}
.mtv-body{padding:24px}
.mtv-kicker{color:var(--b);font-size:6px;font-weight:700;letter-spacing:1.7px;text-transform:uppercase;min-height:9px}
.mtv-title{margin:12px 0 0!important;color:#fff!important;font:500 clamp(26px,2.2vw,39px)/.98 "Montserrat",Arial,sans-serif!important;letter-spacing:-1.4px!important}
.mtv-meta{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:21px;padding-top:14px;border-top:1px solid rgba(255,255,255,.10)}
.mtv-meta small,.mtv-data small{display:block;color:rgba(255,255,255,.31);font-size:5px;font-weight:700;letter-spacing:1.15px;text-transform:uppercase}
.mtv-meta strong,.mtv-data strong{display:block;margin-top:5px;color:rgba(255,255,255,.82);font-size:9px;font-weight:500;line-height:1.4}
.mtv-card-bottom{display:flex;align-items:flex-end;justify-content:space-between;gap:15px;margin-top:22px}
.mtv-price{color:#fff;font-size:18px;font-weight:500;letter-spacing:-.4px}
.mtv-detail-link{color:rgba(255,255,255,.40);font-size:6px;font-weight:700;letter-spacing:1.3px;text-transform:uppercase;transition:color .25s ease}
.mtv-card:hover .mtv-detail-link{color:var(--b)}

.mtv-empty{
    grid-column:1/-1;padding:62px 22px;background:#0b0f13;text-align:center;color:rgba(255,255,255,.45)
}
.mtv-empty span{display:block;color:var(--b);font-size:6px;font-weight:700;letter-spacing:1.7px;text-transform:uppercase}
.mtv-empty strong{display:block;margin-top:12px;color:#fff;font-size:20px;font-weight:500}
.mtv-empty p{margin:10px auto 0;max-width:420px;font-size:9px;line-height:1.7}

.mtv-skeleton{background:#0b0f13;overflow:hidden}
.mtv-skeleton-img{aspect-ratio:16/10;background:linear-gradient(100deg,#10151a 20%,#151c22 40%,#10151a 60%);background-size:200% 100%;animation:mtvShimmer 1.45s linear infinite}
.mtv-skeleton-body{padding:24px}
.mtv-skeleton-body span,.mtv-skeleton-body strong,.mtv-skeleton-body i,.mtv-skeleton-body b{
    display:block;background:rgba(255,255,255,.07)
}
.mtv-skeleton-body span{width:36%;height:7px}
.mtv-skeleton-body strong{width:68%;height:30px;margin-top:14px}
.mtv-skeleton-row{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:25px;padding-top:14px;border-top:1px solid rgba(255,255,255,.08)}
.mtv-skeleton-body i{height:24px}
.mtv-skeleton-body b{width:34%;height:18px;margin-top:23px}
@keyframes mtvShimmer{to{background-position:-200% 0}}

.mtv-modal{
    position:fixed;z-index:999999;inset:0;background:rgba(0,0,0,.88);
    display:flex;align-items:center;justify-content:center;padding:24px;
    opacity:0;visibility:hidden;pointer-events:none;
    backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
    transition:opacity .28s ease,visibility .28s ease
}
.mtv-modal.open{opacity:1;visibility:visible;pointer-events:auto}
.mtv-panel{
    position:relative;width:min(1420px,96vw);max-height:92svh;overflow:auto;overscroll-behavior:contain;
    background:#090d10;border:1px solid rgba(255,255,255,.15);outline:none;
    transform:translateY(18px) scale(.992);
    transition:transform .38s cubic-bezier(.22,.78,.2,1)
}
.mtv-modal.open .mtv-panel{transform:none}
.mtv-close{
    position:sticky;z-index:20;top:15px;float:right;margin:15px 15px -58px 0;
    width:44px;height:44px;border:1px solid rgba(255,255,255,.16);background:rgba(5,7,9,.86);
    color:#fff;font-size:22px;font-weight:300;cursor:pointer;backdrop-filter:blur(8px)
}
.mtv-close:hover{border-color:var(--b)}
.mtv-layout{display:grid;grid-template-columns:1.18fr .82fr;min-height:700px}
.mtv-main-wrap{min-width:0;background:#050709}
.mtv-main{position:relative;min-height:590px;height:100%;overflow:hidden;background:#050709}
.mtv-main img{width:100%;height:100%;object-fit:cover}
.mtv-main-empty{display:grid;place-items:center}
.mtv-main-empty span{color:rgba(255,255,255,.18);font-size:10px;font-weight:700;letter-spacing:3px}
.mtv-gallery-nav{
    position:absolute;top:50%;transform:translateY(-50%);width:46px;height:46px;
    border:1px solid rgba(255,255,255,.17);background:rgba(5,7,9,.70);color:#fff;
    font-size:18px;cursor:pointer;transition:background .25s ease,border-color .25s ease
}
.mtv-gallery-nav:hover{background:rgba(30,116,215,.92);border-color:#1e74d7}
.mtv-prev{left:16px}.mtv-next{right:16px}
.mtv-image-count{
    position:absolute;right:16px;bottom:16px;padding:8px 10px;border:1px solid rgba(255,255,255,.15);
    background:rgba(5,7,9,.72);color:rgba(255,255,255,.72);font-size:7px;font-weight:700;letter-spacing:1.2px
}
.mtv-gallery{display:flex;gap:1px;overflow-x:auto;background:rgba(255,255,255,.12);border-top:1px solid rgba(255,255,255,.12)}
.mtv-gallery button{flex:0 0 112px;height:78px;border:0;padding:0;background:#080b0e;cursor:pointer;opacity:.48;transition:opacity .2s ease,box-shadow .2s ease}
.mtv-gallery button.active,.mtv-gallery button:hover{opacity:1;box-shadow:inset 0 -2px 0 var(--b)}
.mtv-gallery img{width:100%;height:100%;object-fit:cover}
.mtv-info{padding:44px 38px 40px;background:linear-gradient(180deg,#10161b,#0a0e12)}
.mtv-modal-topline{display:flex;align-items:center;justify-content:space-between;gap:14px}
.mtv-modal-topline .mtv-status{position:static;flex:0 0 auto}
.mtv-info h3{margin:18px 0 0!important;color:#fff!important;font:500 clamp(38px,4vw,66px)/.9 "Montserrat",Arial,sans-serif!important;letter-spacing:-2.8px!important}
.mtv-modal-price{margin:22px 0 27px;color:#fff;font-size:27px;font-weight:500;letter-spacing:-.7px}
.mtv-data{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:rgba(255,255,255,.11);border:1px solid rgba(255,255,255,.11)}
.mtv-data div{padding:15px;background:#0b0f13}
.mtv-desc{margin-top:26px;color:rgba(255,255,255,.58);font-size:10px;line-height:1.8;white-space:pre-line}
.mtv-actions{margin-top:28px}
.mtv-contact{
    display:flex;align-items:center;justify-content:space-between;gap:25px;min-height:50px;padding:0 18px;
    border:1px solid rgba(255,255,255,.30);color:#fff!important;text-decoration:none!important;
    font-size:7px;font-weight:700;letter-spacing:1.6px;text-transform:uppercase;
    transition:background .25s ease,border-color .25s ease
}
.mtv-contact:hover{background:#1e74d7;border-color:#1e74d7}
.mtv-sold-note{display:block;padding:15px;border-left:2px solid rgba(255,255,255,.28);background:#0b0f13;color:rgba(255,255,255,.55);font-size:9px;line-height:1.6}

@media(max-width:1000px){
    .mtv-grid{grid-template-columns:repeat(2,1fr)}
    .mtv-layout{grid-template-columns:1fr}
    .mtv-main{min-height:52vw;max-height:620px}
}
@media(max-width:760px){
    .mtv-toolbar{display:block;border-bottom:0;margin-bottom:24px}
    .mtv-filter-wrap{display:block}
    .mtv-filters{gap:0;border-bottom:1px solid var(--line);overflow-x:auto;flex-wrap:nowrap;scrollbar-width:none}
    .mtv-filters::-webkit-scrollbar{display:none}
    .mtv-filter{flex:0 0 auto;padding:0 16px 13px 0;margin-right:18px;font-size:7px}
    .mtv-result-count{padding:12px 0 0;font-size:6.5px}
    .mtv-sort-label{justify-content:space-between;margin-top:17px;padding:0}
    .mtv-sort{min-height:39px;max-width:220px;width:62%}
    .mtv-grid{grid-template-columns:1fr}
    .mtv-card-arrow{opacity:1;transform:none;width:32px;height:32px}
    .mtv-body{padding:21px}
    .mtv-title{font-size:clamp(28px,9vw,36px)!important}
    .mtv-meta{grid-template-columns:repeat(3,1fr)!important}
    .mtv-card-bottom{align-items:center}
    .mtv-price{font-size:17px}
    .mtv-detail-link{font-size:5.8px}
    .mtv-modal{padding:0;align-items:flex-end}
    .mtv-panel{width:100%;max-height:96svh;border-left:0;border-right:0;border-bottom:0}
    .mtv-layout{display:block}
    .mtv-main{min-height:0;height:auto;aspect-ratio:4/3}
    .mtv-gallery-nav{width:40px;height:40px}
    .mtv-gallery button{flex-basis:88px;height:62px}
    .mtv-info{padding:27px 20px 30px}
    .mtv-info h3{font-size:clamp(34px,11vw,48px)!important;letter-spacing:-2px!important}
    .mtv-modal-price{font-size:23px}
    .mtv-data{grid-template-columns:repeat(2,1fr)}
    .mtv-close{top:10px;margin:10px 10px -54px 0;width:42px;height:42px}
}
@media(max-width:430px){
    .mtv-meta{grid-template-columns:repeat(2,1fr)!important}
    .mtv-meta div:last-child{grid-column:1/-1}
}
