/* Ofoq for Homzen — listing (property / project listing pages + all filter controls).
   Filter controls are shared with the homepage hero search panel, so they work in the narrow
   sidebar (.filter-side) and in a wide multi-column panel (.filter-panel). */

/* ---------- Search row (filters/base.blade.php) ---------- */
.search-row .row > [class*="col"] { min-width: 0; }
.search-row .search-field { min-width: 0; }
.search-row .search-field input[type="text"] { text-overflow: ellipsis; }
.search-row-submit { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; width: 100%; height: 100%; min-height: 72px; padding-inline: 3rem; border-radius: 0; border-start-end-radius: var(--of-radius-lg); border-end-end-radius: var(--of-radius-lg); }
.search-row-advanced { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; width: 100%; height: 100%; min-height: 72px; padding-inline: 1.5rem; border: 0; border-inline-start: 1px solid var(--of-line); background: transparent; color: var(--of-navy); font-size: .9375rem; font-weight: 500; transition: background-color .2s; }
.search-row-advanced:hover, .search-row-advanced:focus-visible { background: var(--of-soft); }
.listing-head-navy .search-box { border-color: transparent; }

/* ---------- Suggestion dropdowns (script.js fills [data-bb-toggle="data-suggestion"]) ---------- */
.filter-suggest, .search-field.filter-suggest { position: relative; }
[data-bb-toggle="data-suggestion"] { display: none; position: absolute; inset-inline: 0; top: calc(100% + 4px); z-index: 30; max-height: 320px; overflow-y: auto; background: #fff; border: 1px solid var(--of-line); border-radius: var(--of-radius); box-shadow: var(--of-shadow-sm); text-align: start; }
.search-field [data-bb-toggle="data-suggestion"] { top: 100%; }
.search-suggestion { list-style: none; margin: 0; padding: .375rem; }
.search-suggestion-item { padding: .625rem .75rem; border-radius: 2px; font-size: .9375rem; color: var(--of-navy); cursor: pointer; transition: background-color .2s; }
.search-suggestion-item:hover, .search-suggestion-item:focus-within { background: var(--of-soft); }
.search-suggestion-item a { color: inherit; }
.search-suggestion-image { flex: 0 0 56px; width: 56px; height: 42px; overflow: hidden; border-radius: 2px; background: var(--of-soft); }
.search-suggestion-image img { width: 100%; height: 100%; object-fit: cover; }
.search-suggestion-content h6 { margin: 0; font-size: .9375rem; font-weight: 500; }
.search-suggestion-content p { margin: .125rem 0 0; font-size: .8125rem; color: var(--of-muted); }
.search-suggestion-empty, .search-suggestion li.text-muted { padding: .75rem; font-size: .875rem; color: var(--of-muted); text-align: center; }

/* ---------- Filter controls ---------- */
.filter-range { display: flex; gap: .5rem; }
.filter-range .form-control { min-width: 0; flex: 1 1 0; }
.filter-field input[type="number"] { -moz-appearance: textfield; appearance: textfield; }
.filter-field input[type="number"]::-webkit-outer-spin-button,
.filter-field input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.filter-chips .chip { min-width: 0; min-height: 44px; padding-inline: .25rem; }
.filter-checks-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: .75rem 1.5rem; }
.filter-field .form-check { margin-bottom: 0; }
.filter-field .form-check-label { cursor: pointer; }

/* Sale / rent segmented radios (.seg look from the design) */
.seg-radio { display: flex; }
.seg-radio .btn-check + label { flex: 1 1 0; border: 0; border-radius: 2px; padding: .5rem 1rem; font-size: .875rem; font-weight: 500; text-align: center; color: var(--of-muted-strong); background: transparent; cursor: pointer; transition: all .25s var(--of-ease); }
.seg-radio .btn-check + label:hover { color: var(--of-navy); }
.seg-radio .btn-check:checked + label { background: #fff; color: var(--of-navy); font-weight: 600; box-shadow: 0 1px 2px rgba(7, 19, 48, .08); }
.seg-radio .btn-check:focus-visible + label { outline: 2px solid var(--of-blue); outline-offset: 2px; }

/* ---------- Sidebar (Ofoq .filter-side) ---------- */
.filter-side .filter-group-first { border-top: 0; padding-top: 0; }
.filter-side .form-search-type .form-label { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
@media (min-width: 992px) {
  /* top is lowered by the listing script when the sidebar is taller than the viewport, so its end stays reachable. */
  .listing-filters .offcanvas-body { display: block; height: 100%; }
  .listing-filters { height: 100%; }
}
@media (max-width: 991.98px) {
  .listing-filters { --bs-offcanvas-width: min(420px, 100%); }
  .listing-filters .offcanvas-header { display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--of-line); padding: 1.25rem 1.5rem; }
  .listing-filters .offcanvas-body { padding: 1.5rem; }
  .filter-side { position: static; max-height: none; overflow: visible; }
}

/* ---------- Wide panel (.filter-panel: "more filters" collapse, hero advanced search) ---------- */
.filter-panel { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 1.5rem 2rem; align-items: start; }
.filter-panel .filter-group { margin: 0; padding: 0; border: 0; }
.filter-panel .filter-group-wide, .filter-panel-actions { grid-column: 1 / -1; }
.filter-panel-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: .75rem; padding-top: 1.5rem; border-top: 1px solid var(--of-line); }
.listing-more-filters { margin-bottom: 2rem; padding: 2rem; background: #fff; border: 1px solid var(--of-line); border-radius: var(--of-radius-lg); }
@media (max-width: 575.98px) {
  .listing-more-filters { padding: 1.25rem; }
  .filter-panel-actions .btn { flex: 1 1 0; }
}

/* ---------- Page head ---------- */
.listing-head-navy { padding-block: 64px 56px; }
.listing-head-navy h1 { color: #fff; max-width: 720px; }

/* ---------- Toolbar + active filter chips ---------- */
.toolbar-select { min-height: 44px; width: auto; max-width: 220px; }
.listing-toolbar .btn-group > .btn { flex: 0 0 auto; }
.listing-toolbar .btn-icon { border-radius: var(--of-radius) !important; }
.listing-chips { margin-top: 1.5rem; }
.listing-chips[hidden] { display: none !important; }
.active-filter { cursor: pointer; transition: background-color .2s; }
.active-filter:hover { background: var(--of-navy-700); }
.listing-chips-clear { padding: 0 .5rem; }
@media (max-width: 575.98px) {
  .listing-toolbar { gap: .75rem; }
  .listing-toolbar > div { width: 100%; justify-content: space-between; }
}

/* ---------- Map (Leaflet in an Ofoq frame) ---------- */
.listing-map { position: relative; overflow: hidden; border: 1px solid var(--of-line); border-radius: var(--of-radius-lg); background-color: #eef1f7; background-image: linear-gradient(#e0e5ee 1px, transparent 1px), linear-gradient(90deg, #e0e5ee 1px, transparent 1px); background-size: 48px 48px; }
.listing-map-canvas { width: 100%; height: 100%; min-height: 320px; background: transparent; }
.listing-map-top .listing-map-canvas { height: 440px; }
.listing-half-main { padding: 2.5rem clamp(16px, 3vw, 48px) 4rem; }
.listing-map-half { border-radius: 0; border-width: 0 0 1px; }
.listing-map-half .listing-map-canvas { height: 320px; }
@media (min-width: 1200px) {
  .listing-half-map { position: sticky; top: 0; height: 100vh; }
  .listing-map-half { height: 100%; border-width: 0; border-inline-start: 1px solid var(--of-line); }
  .listing-map-half .listing-map-canvas { height: 100%; }
}
@media (max-width: 767.98px) {
  .listing-map-top .listing-map-canvas { height: 320px; }
}
.listing-map .leaflet-container { font-family: var(--of-font-text); background: transparent; }
.listing-map .boxmarker { width: auto !important; height: auto !important; }
.listing-map .boxmarker > * { display: inline-block; white-space: nowrap; padding: .25rem .5rem; background: var(--of-navy); color: #fff; font-size: .75rem; font-weight: 600; border-radius: 2px; box-shadow: var(--of-shadow-sm); }
.listing-map .leaflet-popup-content-wrapper { padding: 0; border-radius: var(--of-radius-lg); overflow: hidden; box-shadow: var(--of-shadow); }
.listing-map .leaflet-popup-content { margin: 0; width: 260px !important; }
.map-card-media { display: block; aspect-ratio: 4 / 3; overflow: hidden; background: var(--of-soft); }
.map-card-media img { width: 100%; height: 100%; object-fit: cover; }
.map-card-body { display: flex; flex-direction: column; gap: .375rem; padding: .875rem 1rem 1rem; text-align: start; }
.map-card-tags:empty { display: none; }
.map-card-title { margin: 0; font-family: var(--of-font-display); font-size: 1rem; font-weight: 500; line-height: 1.5; }
.map-card-title a { color: var(--of-navy); }
.map-card .p-card-specs { margin: 0; font-size: .75rem; }
.map-card .price { font-size: 1rem; }

/* ---------- Results ---------- */
.listing-body [data-bb-toggle="data-listing"] { min-height: 200px; }
.listing-body .empty-state h2 { margin-bottom: .75rem; }
@media (max-width: 767.98px) {
  .search-row-submit { min-height: 56px; border-radius: 0 0 var(--of-radius-lg) var(--of-radius-lg); }
  .search-row-advanced { min-height: 56px; border-inline-start: 0; border-bottom: 1px solid var(--of-line); }
}