/* ======= VEPA Shared Components & Utilities (consolidated) ======= */

/* Typography & base */
:root {
  --bg: #ffffff;
  --ink: #111111;
  --ink-2: #555555;
  --primary: #000000;
  --radius: 10px;
  --shadow-sm: 0 2px 6px rgba(0,0,0,.08);
  --shadow-md: 0 8px 20px rgba(0,0,0,.15);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { background: var(--bg); color: var(--ink); }

/* Generic containers */
.container { width: min(1200px, 92%); margin: 0 auto; }
.section { padding: clamp(2rem, 4vw, 4rem) 0; }

/* Header / Navbar */
.site-header { display:flex; align-items:center; justify-content:space-between; padding:1rem 0; }
.nav { display:flex; gap:1rem; }
.nav a { color: var(--ink-2); text-decoration:none; font-weight:500; }
.nav a:hover { color: var(--ink); }

/* Buttons */
.btn { display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  padding:.7rem 1rem; border-radius: var(--radius); border:1px solid #000; background:#000; color:#fff; cursor:pointer; transition: .2s ease;
}
.btn--ghost { background: transparent; color:#000; }
.btn:hover { transform: translateY(-1px); }

/* Forms */
.input, input[type="text"], input[type="number"], input[type="email"], input[type="file"], select, textarea {
  width: 100%; padding:.7rem .9rem; border:1px solid #e5e5e5; border-radius: var(--radius);
  background:#fff; color:var(--ink); outline: none;
}
label { font-size:.9rem; color: var(--ink-2); }

/* Grid for cars */
.cars-grid { display:grid; grid-template-columns: repeat(auto-fill, minmax(260px,1fr)); gap:1rem; }
.car-card, .car-item {
  border:1px solid #eaeaea; border-radius: var(--radius); box-shadow: var(--shadow-sm);
  overflow:hidden; background:#fff; display:flex; flex-direction:column;
}
.car-card img, .car-item img { width:100%; height: 180px; object-fit: cover; display:block; }
.car-card h3, .car-item h3 { font-size:1.05rem; padding:.6rem .9rem; }
.car-price { padding: 0 .9rem 1rem; font-weight:700; }

/* Filters row */
.filters { display:flex; gap:.6rem; flex-wrap:wrap; align-items:center; }
.filters select, .filters input { height: 40px; }
.filters .chip { padding:.4rem .7rem; border-radius:999px; border:1px solid #ddd; }

/* Modal */
.modal { position: fixed; inset:0; background: rgba(0,0,0,.5); display:none; align-items:center; justify-content:center; z-index: 50; }
.modal.open { display:flex; }
.modal__card { width:min(900px, 92%); background:#fff; border-radius: var(--radius); overflow:hidden; box-shadow: var(--shadow-md); }
.modal__header { display:flex; align-items:center; justify-content:space-between; padding:1rem 1.2rem; border-bottom:1px solid #eee; }
.modal__body { padding:1rem 1.2rem; }
.modal__footer { display:flex; justify-content:flex-end; gap:.6rem; padding:1rem 1.2rem; border-top:1px solid #eee; }
.modal__close { background:none; border:0; font-size:1.2rem; cursor:pointer; }

/* Tables (admin) */
.table { width:100%; border-collapse: collapse; }
.table th, .table td { border-bottom:1px solid #eee; text-align:left; padding:.7rem .5rem; }
.table th { font-weight:600; color:var(--ink-2); }
.status-badge { display:inline-flex; align-items:center; gap:.3rem; padding:.25rem .5rem; border-radius: 999px; border:1px solid #ddd; font-size:.8rem; }