/* =========================================================
   GTA VI HUB — VEHICLES DATABASE
   ========================================================= */

#vehicles-page,
.vehicle-detail-page { max-width:1180px; margin:0 auto; }
.vehicles-page,
.vehicle-detail-page {
    --vehicle-cyan:#43e4ff;
    --vehicle-pink:#ff4f9a;
    --vehicle-line:rgba(255,255,255,.08);
    --vehicle-card:#10141a;
    color:#eef3f8;
}

.vehicles-hero { position:relative; min-height:260px; overflow:hidden; margin-bottom:14px; border:1px solid var(--vehicle-line); border-radius:16px; background:radial-gradient(circle at 82% 26%,rgba(255,79,154,.16),transparent 28%),radial-gradient(circle at 60% 80%,rgba(67,228,255,.1),transparent 30%),linear-gradient(120deg,#10151b,#111116 55%,#170f17); }
.vehicles-hero-grid { position:absolute; inset:0; background-image:linear-gradient(rgba(255,255,255,.025) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.025) 1px,transparent 1px); background-size:34px 34px; mask-image:linear-gradient(90deg,#000,transparent 92%); }
.vehicles-hero-copy { position:relative; z-index:2; max-width:720px; padding:35px 36px; }
.vehicles-kicker { display:inline-flex; align-items:center; gap:7px; color:var(--vehicle-cyan); font-size:10px; font-weight:800; letter-spacing:1.35px; text-transform:uppercase; }
.vehicles-kicker i { width:6px; height:6px; border-radius:50%; background:var(--vehicle-cyan); box-shadow:0 0 10px rgba(67,228,255,.65); }
.vehicles-hero h1 { margin:14px 0 10px; font-family:"Space Grotesk",sans-serif; font-size:clamp(34px,5vw,59px); line-height:.95; letter-spacing:-2px; }
.vehicles-hero h1 span { color:var(--vehicle-pink); }
.vehicles-hero p { max-width:650px; margin:0; color:#a7b0bd; font-size:12px; line-height:1.7; }
.vehicles-hero-meta { display:flex; flex-wrap:wrap; gap:7px; margin-top:20px; }
.vehicles-hero-meta span { padding:6px 9px; border:1px solid rgba(255,255,255,.08); border-radius:999px; background:rgba(255,255,255,.025); color:#c0c8d3; font-size:10px; font-weight:700; letter-spacing:.7px; }
.vehicles-hero-mark { position:absolute; right:4%; bottom:-40px; color:rgba(255,255,255,.028); font-family:"Space Grotesk",sans-serif; font-size:230px; font-weight:800; line-height:1; }

.vehicles-toolbar { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:14px; padding:10px; border:1px solid var(--vehicle-line); border-radius:12px; background:#0f1217; }
.vehicles-filters { display:flex; flex-wrap:wrap; gap:7px; }
.vehicle-filter { min-height:32px; padding:0 12px; border:1px solid var(--vehicle-line); border-radius:999px; background:rgba(255,255,255,.025); color:#87919f; font-size:10px; font-weight:800; letter-spacing:.75px; cursor:pointer; transition:.18s ease; }
.vehicle-filter:hover,.vehicle-filter.active { border-color:rgba(67,228,255,.34); background:rgba(67,228,255,.07); color:var(--vehicle-cyan); }
.vehicles-count { flex:0 0 auto; color:#747e8c; font-size:10px; font-weight:700; letter-spacing:.8px; }

.vehicles-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; }
.vehicle-card { overflow:hidden; border:1px solid var(--vehicle-line); border-radius:14px; background:var(--vehicle-card); cursor:pointer; transition:transform .18s ease,border-color .18s ease,background .18s ease; }
.vehicle-card:hover,.vehicle-card:focus-visible { transform:translateY(-3px); border-color:rgba(67,228,255,.28); background:#12171e; outline:none; }
.vehicle-card-media { position:relative; height:185px; overflow:hidden; background:radial-gradient(circle at 70% 25%,rgba(67,228,255,.15),transparent 30%),linear-gradient(135deg,#131922,#19131b); }
.vehicle-card-media::after { content:"GARAGE"; position:absolute; right:12px; bottom:7px; color:rgba(255,255,255,.035); font-family:"Space Grotesk",sans-serif; font-size:35px; font-weight:800; pointer-events:none; }
.vehicle-card-media img { width:100%; height:100%; display:block; object-fit:cover; }
.vehicle-card-media.image-missing img { display:none; }
.vehicle-card-category,.vehicle-card-rarity { position:absolute; z-index:2; top:10px; padding:5px 8px; border:1px solid rgba(255,255,255,.11); border-radius:999px; backdrop-filter:blur(8px); font-size:9px; font-weight:800; letter-spacing:.8px; }
.vehicle-card-category { left:10px; color:var(--vehicle-cyan); background:rgba(8,13,18,.74); }
.vehicle-card-rarity { right:10px; color:#f6c879; background:rgba(8,13,18,.74); }
.vehicle-card-content { padding:14px; }
.vehicle-card-status { margin-bottom:8px; }
.vehicle-card-status span,.vehicle-detail-status { display:inline-flex; align-items:center; min-height:25px; padding:0 8px; border:1px solid rgba(255,255,255,.08); border-radius:999px; color:#9da6b4; background:rgba(255,255,255,.025); font-size:9px; font-weight:800; letter-spacing:.7px; }
.status-official,.status-verified-ingame { color:#75f7c3!important; border-color:rgba(117,247,195,.2)!important; background:rgba(117,247,195,.055)!important; }
.status-community { color:#e5c870!important; }
.status-demo { color:#ff9bc7!important; }
.vehicle-card h3 { margin:0 0 7px; font-family:"Space Grotesk",sans-serif; font-size:18px; letter-spacing:-.25px; }
.vehicle-card p { min-height:54px; margin:0; color:#87919f; font-size:11px; line-height:1.6; }
.vehicle-mini-stats { display:grid; grid-template-columns:repeat(3,1fr); gap:6px; margin-top:13px; }
.vehicle-mini-stats div { padding:8px; border:1px solid rgba(255,255,255,.06); border-radius:8px; background:rgba(255,255,255,.02); }
.vehicle-mini-stats span { display:block; color:#687382; font-size:9px; font-weight:700; }
.vehicle-mini-stats strong { display:block; margin-top:2px; color:#dfe6ee; font-size:13px; }
.vehicle-card-footer { display:flex; justify-content:space-between; gap:8px; margin-top:13px; padding-top:11px; border-top:1px solid rgba(255,255,255,.055); }
.vehicle-card-footer span,.vehicle-card-footer strong { font-size:9px; letter-spacing:.65px; }
.vehicle-card-footer span { color:#66717e; }
.vehicle-card-footer strong { color:var(--vehicle-cyan); }

.vehicles-verification-note,.vehicles-local-note { display:flex; gap:12px; margin-top:14px; padding:12px 14px; border:1px solid rgba(255,255,255,.07); border-radius:10px; background:#0e1116; font-size:10px; line-height:1.55; }
.vehicles-verification-note strong { color:var(--vehicle-cyan); }
.vehicles-local-note strong { color:#f6c879; }
.vehicles-verification-note span,.vehicles-local-note span { color:#8993a3; }

.vehicle-back-btn { min-height:35px; margin-bottom:12px; padding:0 12px; border:1px solid var(--vehicle-line); border-radius:9px; background:#10141a; color:#cbd3dd; font-size:10px; font-weight:800; letter-spacing:.7px; cursor:pointer; }
.vehicle-detail-header { display:flex; justify-content:space-between; gap:20px; margin-bottom:14px; padding:24px; border:1px solid var(--vehicle-line); border-radius:14px; background:radial-gradient(circle at 85% 20%,rgba(255,79,154,.11),transparent 25%),#101319; }
.vehicle-detail-header h1 { margin:8px 0 7px; font-family:"Space Grotesk",sans-serif; font-size:clamp(27px,4vw,44px); line-height:1; }
.vehicle-detail-header p { max-width:650px; margin:0; color:#929cab; font-size:11px; line-height:1.65; }
.vehicle-detail-layout { display:grid; grid-template-columns:minmax(0,1fr) 330px; gap:14px; }
.vehicle-detail-main { display:grid; gap:14px; }
.vehicle-detail-media { position:relative; min-height:350px; overflow:hidden; border:1px solid var(--vehicle-line); border-radius:14px; background:radial-gradient(circle at 70% 20%,rgba(67,228,255,.14),transparent 32%),linear-gradient(135deg,#111820,#171217); }
.vehicle-detail-media img { width:100%; height:100%; min-height:350px; display:block; object-fit:cover; }
.vehicle-detail-media.image-missing img { display:none; }
.vehicle-detail-media>span { position:absolute; left:14px; bottom:14px; padding:6px 9px; border:1px solid rgba(255,255,255,.12); border-radius:999px; background:rgba(8,11,15,.75); color:#f6c879; font-size:10px; font-weight:800; }
.vehicle-stats-panel,.vehicle-intel-card,.vehicle-note-card { border:1px solid var(--vehicle-line); border-radius:13px; background:#10141a; }
.vehicle-stats-panel { padding:17px; }
.vehicle-section-heading { display:flex; justify-content:space-between; margin-bottom:16px; }
.vehicle-section-heading span,.vehicle-side-label,.vehicle-note-card>span { color:var(--vehicle-cyan); font-size:10px; font-weight:800; letter-spacing:.9px; }
.vehicle-section-heading strong { color:#65707d; font-size:10px; }
.vehicle-stat-row+.vehicle-stat-row { margin-top:13px; }
.vehicle-stat-row>div:first-child { display:flex; justify-content:space-between; margin-bottom:5px; }
.vehicle-stat-row span { color:#8e98a7; font-size:10px; font-weight:700; }
.vehicle-stat-row strong { font-size:10px; }
.vehicle-stat-track { height:6px; overflow:hidden; border-radius:999px; background:rgba(255,255,255,.055); }
.vehicle-stat-track span { display:block; height:100%; border-radius:inherit; background:linear-gradient(90deg,var(--vehicle-cyan),var(--vehicle-pink)); }
.vehicle-detail-side { display:grid; align-content:start; gap:12px; }
.vehicle-intel-card { padding:16px; }
.vehicle-side-label { display:block; margin-bottom:12px; }
.vehicle-info-row { display:flex; justify-content:space-between; gap:16px; padding:10px 0; border-top:1px solid rgba(255,255,255,.055); }
.vehicle-info-row span { color:#697482; font-size:9px; font-weight:700; letter-spacing:.7px; }
.vehicle-info-row strong { max-width:170px; color:#d7dee7; font-size:10px; text-align:right; }
.vehicle-note-card { padding:15px; }
.vehicle-note-card p { margin:8px 0 0; color:#8d97a6; font-size:10px; line-height:1.6; }
.vehicle-detail-actions { display:grid; gap:8px; }
.vehicle-map-btn,.vehicle-hunt-btn { min-height:42px; border-radius:10px; font-size:10px; font-weight:800; letter-spacing:.7px; cursor:pointer; }
.vehicle-map-btn { border:1px solid rgba(67,228,255,.28); background:rgba(67,228,255,.07); color:var(--vehicle-cyan); }
.vehicle-hunt-btn { border:1px solid rgba(255,79,154,.24); background:rgba(255,79,154,.055); color:#ff8cbc; }
.vehicle-hunt-btn.is-hunted { border-color:rgba(246,200,121,.28); background:rgba(246,200,121,.06); color:#f6c879; }
.vehicle-map-btn.disabled { opacity:.45; cursor:default; }

.vehicles-state,.vehicles-empty { min-height:300px; display:grid; place-items:center; align-content:center; gap:8px; padding:25px; border:1px solid var(--vehicle-line); border-radius:14px; background:#10141a; text-align:center; }
.vehicles-state h2,.vehicles-empty h3 { margin:0; font-family:"Space Grotesk",sans-serif; }
.vehicles-state p,.vehicles-empty p { margin:0; color:#7f8996; font-size:11px; }
.vehicles-state-icon,.vehicles-empty>span { color:var(--vehicle-cyan); font-size:30px; }
.vehicles-loader { width:28px; height:28px; border:3px solid rgba(255,255,255,.08); border-top-color:var(--vehicle-cyan); border-radius:50%; animation:vehiclesSpin .8s linear infinite; }
@keyframes vehiclesSpin { to { transform:rotate(360deg); } }

@media (max-width:980px) {
    .vehicles-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
    .vehicle-detail-layout { grid-template-columns:1fr; }
}

@media (max-width:680px) {
    .vehicles-hero { min-height:auto; }
    .vehicles-hero-copy { padding:27px 20px; }
    .vehicles-hero-mark { font-size:150px; }
    .vehicles-toolbar { align-items:flex-start; flex-direction:column; }
    .vehicles-filters { width:100%; flex-wrap:nowrap; overflow-x:auto; padding-bottom:3px; }
    .vehicle-filter { flex:0 0 auto; }
    .vehicles-grid { grid-template-columns:1fr; }
    .vehicle-card-media { height:210px; }
    .vehicle-detail-header { flex-direction:column; }
    .vehicle-detail-media,.vehicle-detail-media img { min-height:260px; }
    .vehicles-verification-note,.vehicles-local-note { flex-direction:column; gap:5px; }
}