:root {
  --font-sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-heading: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;


  --slate-50:
  --slate-100:
  --slate-200:
  --slate-300:
  --slate-400:
  --slate-500:
  --slate-600:
  --slate-700:
  --slate-800:
  --slate-900:
  --slate-950:

  --primary-color:
  --primary-hover:
  --success-custom:
  --danger-custom:
}


body {
  font-family: var(--font-sans);
  background-color: var(--slate-950);
  color: var(--slate-100);
  margin: 0;
  padding: 0;
  overflow-x: hidden;
}

.font-heading {
  font-family: var(--font-heading);
}


::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
::-webkit-scrollbar-track {
  background: var(--slate-800);
}
::-webkit-scrollbar-thumb {
  background: var(--slate-600);
  border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
  background: var(--primary-color);
}


.bg-slate-900 {
  background-color: var(--slate-900) !important;
}
.bg-slate-800 {
  background-color: var(--slate-800) !important;
}
.bg-slate-950 {
  background-color: var(--slate-950) !important;
}
.btn-slate-700 {
  background-color:
  color: var(--slate-100) !important;
  border-color: var(--slate-700) !important;
}
.btn-slate-700:hover {
  background-color: var(--slate-700) !important;
  border-color: var(--primary-color) !important;
}


.text-primary-gradient {
  background: linear-gradient(135deg,
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.text-success-custom {
  color: var(--success-custom) !important;
}


.btn-primary {
  background-color: var(--primary-color);
  border-color: var(--primary-color);
  transition: all 0.2s ease-in-out;
}
.btn-primary:hover, .btn-primary:focus {
  background-color: var(--primary-hover);
  border-color: var(--primary-hover);
  transform: translateY(-1px);
}


.app-layout {
  height: calc(100vh - 60px);
}

.map-container-height {
  flex-grow: 1;
}

@media (max-width: 991.98px) {
  .app-layout {
    height: auto;
  }
  .map-container-height {
    height: 350px !important;
    order: -1;
  }
}


.listing-card {
  cursor: pointer;
  border-radius: 12px;
  border: 1px solid var(--slate-700) !important;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}
.listing-card:hover {
  transform: translateY(-4px);
  border-color: rgba(0, 123, 255, 0.4) !important;
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.08), 0 4px 6px -4px rgba(0, 0, 0, 0.08) !important;
}

.hover-primary:hover {
  color: var(--primary-color) !important;
}


.leaflet-popup-content-wrapper {
  background-color: var(--slate-900) !important;
  color: var(--slate-100) !important;
  border: 1px solid var(--slate-700);
  border-radius: 10px !important;
  padding: 0 !important;
  overflow: hidden;
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.15) !important;
}
.leaflet-popup-content {
  margin: 0 !important;
  width: 220px !important;
}
.map-popup {
  padding: 10px;
}
.map-popup h4 a {
  color: var(--slate-100) !important;
}
.map-popup h4 a:hover {
  color: var(--primary-color) !important;
}
.leaflet-popup-tip {
  background-color: var(--slate-900) !important;
  border-left: 1px solid var(--slate-700);
  border-bottom: 1px solid var(--slate-700);
}
.btn-xs {
  padding: 4px 8px;
  font-size: 0.75rem;
  border-radius: 4px;
}


.avatar {
  background: linear-gradient(135deg, var(--primary-color) 0%,
  box-shadow: 0 4px 6px -1px rgba(0, 123, 255, 0.2);
}

.carousel-inner img {
  border-radius: 12px;
}


.form-floating > .form-control:focus ~ label,
.form-floating > .form-control:not(:placeholder-shown) ~ label {
  color: var(--primary-color) !important;
  background-color: transparent !important;
}
.form-control:focus, .form-select:focus {
  border-color: var(--primary-color) !important;
  box-shadow: 0 0 0 0.25rem rgba(0, 123, 255, 0.25) !important;
}


.modal-content {
  background-color:
  border: 1px solid
  color:
}


.card {
  background-color: var(--slate-900);
  border: 1px solid var(--slate-700) !important;
}

.text-xs {
  font-size: 0.75rem;
}
.uppercase {
  text-transform: uppercase;
}
.tracking-wide {
  letter-spacing: 0.05em;
}
.text-danger-custom {
  color: var(--danger-custom) !important;
}