/* =========================================================
   VIEW CONTROLS + TOOLBAR (clean + dedup + your colors)
   Blue: #318fe3
   Gray: #a3a3a3
========================================================= */

/* spacing above controls */
.view-controls {
  margin-top: 150px;
}

@media (max-width: 1199px) {
  .view-controls {
    margin-top: 200px;
  }
}

/* ---------------------------------------------------------
   TOOLBAR WRAPPER
--------------------------------------------------------- */
.result-toolbar {
  width: 100%;
  transition: 0.3s ease;
}

/* only when map view is active */
.map-mode .result-toolbar {
  width: 48.5%;
  margin-left: auto;
}

@media (max-width: 1199px) {
  .map-mode .result-toolbar {
    width: 45%;
    margin-left: auto;
    gap: 1vw;
  }
}

/* ---------------------------------------------------------
   VIEW BUTTONS
--------------------------------------------------------- */
.view-btn {
  border: 1px solid #d0d0d0;
  background: #fff;
  padding: 6px 10px;
  border-radius: 6px;
  font-size: 0.85rem;

  display: inline-flex;
  align-items: center;
  gap: 6px;

  cursor: pointer;
  transition: 0.2s;
}

.view-btn:hover {
  background: #f4f4f4;
  border-color: #a3a3a3;
}

/* active (use your blue) */
.view-btn.active {
  background: #318fe3;
  color: #fff;
  border-color: #318fe3;
}

/* ---------------------------------------------------------
   VIEW SECTIONS
--------------------------------------------------------- */
.view-section {
  display: none;
}
.view-section.active {
  display: block;
}

/* ---------------------------------------------------------
   COUNT BADGE + SORT BUTTON (same height/feel)
--------------------------------------------------------- */
.count-badge,
.btn-sort-gray {
  height: 34px;
  min-height: 34px;
  padding: 0 10px;
  font-size: 0.85rem;
  border-radius: 6px;

  display: inline-flex !important;
  align-items: center !important;
  gap: 6px;

  line-height: 1;
  box-sizing: border-box;
}

/* badge look (gray system) */
.count-badge {
  background: #f4f4f4;
  color: #555;
  border: 1px solid #d0d0d0;
}

/* sort button look (gray system) */
.btn-sort-gray {
  background: #f4f4f4;
  border: 1px solid #d0d0d0;
  border-radius: 6px;
}

.btn-sort-gray:hover {
  border-color: #a3a3a3;
  background: #eee;
}

.btn-sort-gray i {
  font-size: 1rem;
  line-height: 1;
}

/* ---------------------------------------------------------
   MOBILE RESPONSIVE
--------------------------------------------------------- */
@media (max-width: 768px) {
  .result-toolbar {
    gap: 10px;
    flex-direction: column;
    align-items: stretch;
  }

  .view-buttons {
    justify-content: space-between;
    width: 100%;
  }

  .toolbar-left {
    justify-content: space-between;
    width: 100%;
  }
}