/* DEALRHCKR — Global Styles */
@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@700;800&display=swap');

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Text', system-ui, sans-serif;
  background: #f5f5f7;
  color: #1d1d1f;
  -webkit-font-smoothing: antialiased;
}

/* ── Animations ── */
@keyframes rise {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}
@keyframes spin {
  to { transform: rotate(360deg); }
}
@keyframes pop {
  0%   { transform: scale(.78); opacity: 0; }
  65%  { transform: scale(1.05); }
  100% { transform: scale(1); opacity: 1; }
}
@keyframes shimmer {
  0%   { background-position: -600px 0; }
  100% { background-position:  600px 0; }
}

.rise { animation: rise .32s cubic-bezier(.22, 1, .36, 1) both; }
.pop  { animation: pop  .45s ease both; }

/* ── Focus styles ── */
input:focus,
select:focus,
textarea:focus {
  outline: none !important;
  border-color: #00b67a !important;
  box-shadow: 0 0 0 3px rgba(0, 182, 122, .1) !important;
}

/* ── Scrollbar ── */
::-webkit-scrollbar       { width: 4px; height: 4px; }
::-webkit-scrollbar-thumb { background: #d2d2d7; border-radius: 4px; }

/* ── Car cards ── */
.vc { transition: transform .2s, box-shadow .2s; cursor: pointer; }
.vc:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 28px rgba(0, 0, 0, .1) !important;
}

/* ── Skeleton loading ── */
.skel {
  background: linear-gradient(90deg, #f1f5f9 25%, #e2e8f0 50%, #f1f5f9 75%);
  background-size: 600px;
  animation: shimmer 1.4s infinite;
}

/* ── Range sliders ── */
input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  height: 4px;
  border-radius: 4px;
  cursor: pointer;
}
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #00b67a;
  cursor: pointer;
  box-shadow: 0 2px 6px rgba(0, 182, 122, .35);
}

/* ── Bottom sheet modal ── */
.overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, .5);
  backdrop-filter: blur(8px);
  z-index: 80;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}
@media (min-width: 600px) {
  .overlay { align-items: center; padding: 20px; }
}
.sheet {
  border-radius: 22px 22px 0 0;
  max-height: 88vh;
  overflow-y: auto;
  width: 100%;
}
@media (min-width: 600px) {
  .sheet { border-radius: 22px; max-width: 480px; }
}

/* ── Table rows ── */
.rh:hover { background: #f8fafc; }

/* ── Misc ── */
textarea { font-family: inherit; resize: vertical; }