/**
 * File: demov2/assets/css/pages/complexes.css
 * Purpose: Yaşayış kompleksləri siyahısı — yalnız səhifəyə xas düzəlişlər. Filtr zolağı
 *          (.fx-bar / .fx-q / .fx-chips / .fpill), nəticə başlığı (.fx-head / .achip /
 *          .fx-sort) və popover içi (.fpop*) core.css-in ortaq komponentindəndir
 *          (search.html / agencies.html ilə bir sistem). Burada: hero-nun sakit xülasə
 *          sətri, zolağın ≥1200 yapışqanlığı, Siyahı/Xəritə açarı, popover / alt pərdə
 *          incəlikləri (status nöqtəsi, şirkət loqosu, qiymət hazır aralıqları), kart
 *          şəbəkəsi, desktop split xəritə, mobil tam xəritə + seçilmiş kart, şirkətlər zolağı.
 *          Rəng: status rəngləri (tikilir qızılı, təhvil yaşıl) popover nöqtələrində və
 *          xəritədə; şirkətlər açıq rəngli (--tint) zolaqda, seçilmiş şirkət brend 15%.
 */

/* ── Hero: sakit xülasə sətri (filtr kimi görünməsin — sadə mətn) ── */
.page-hero .cxmeta { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; margin-top: 12px; font-size: 14.5px; color: var(--text-2); }
.cxmeta b { font-weight: 600; color: var(--text); }
.cxmeta i { font-style: normal; color: var(--text-3); }
@media (max-width: 639px) { .page-hero .cxmeta { gap: 4px 8px; font-size: 14px; } }
/* status nöqtəsi: popover sətirləri, xəritə popup-u, mobil seçilmiş kart */
.cxdot { width: 8px; height: 8px; border-radius: 50%; flex: none; background: var(--h); }
.cxdot--none { visibility: hidden; }
.cxst { display: inline-flex; align-items: center; gap: 6px; color: var(--h-t); font-weight: 500; }
.cxst > b { width: 7px; height: 7px; border-radius: 50%; background: var(--h); flex: none; }

/* ── Filtr zolağı: axında (agentliklər kimi); ≥1200 bir sətir — yapışqan (search.html kimi) ── */
.cxbar { position: relative; z-index: 30; margin-top: 20px; background: var(--bg); transition: box-shadow .2s; }
@media (min-width: 1024px) { .cxbar { margin-top: 28px; } }
@media (min-width: 1200px) {
  .cxbar { position: sticky; top: var(--hdr-h); margin-top: 16px; padding-block: 12px; }
  .cxbar + .cxres .fx-head { padding-top: 10px; }
}
/* yapışanda xətt əvəzinə yumşaq kölgə */
.cxbar.is-stuck { box-shadow: 0 8px 16px -14px rgba(16, 24, 40, .22); }
html[data-theme='dark'] .cxbar.is-stuck { box-shadow: 0 8px 18px -12px rgba(0, 0, 0, .7); }

/* ── Nəticə başlığı: Siyahı / Xəritə açarı (.fx-sort ilə eyni 40px hündürlük) ── */
.cxview { flex: none; }
.cxview .seg__btn { display: inline-flex; align-items: center; gap: 6px; height: 34px; }
.cxview .seg__btn .i { width: 16px; height: 16px; }
@media (max-width: 767px) { .cxview .seg__btn { padding: 0 11px; } }
.cxres { padding-bottom: 8px; }

/* ── Siyahı / xəritə ── */
.cxlist .empty-cell { grid-column: 1 / -1; }
.cxlist.is-swap { opacity: .35; transition: opacity .18s; }
.cxcard.is-hot .cxcard__media { box-shadow: 0 0 0 2px var(--bg), 0 0 0 4px var(--brand); }
.cxmap { position: relative; }
.cxmap__map { height: 100%; width: 100%; }

@media (min-width: 1024px) {
  .cxbody.is-map { display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr); gap: 28px; align-items: start; }
  .cxbody.is-map .cxlist { grid-template-columns: repeat(2, 1fr); gap: 32px 20px; }
  .cxmap { position: sticky; top: calc(var(--hdr-h) + var(--bar-h, 0px) + 12px); height: calc(100vh - var(--hdr-h) - var(--bar-h, 0px) - 36px); min-height: 480px; border-radius: 20px; overflow: hidden; box-shadow: var(--edge); }
  .cxsel { display: none !important; }
}
@media (max-width: 1023px) {
  .cxbody.is-map .cxlist { display: none; }
  /* --cxtop-h: xəritənin üstündə qalan çip sətri + nəticə başlığı (JS ölçür) — filtrlər xəritə görünüşündə də əl altındadır */
  .cxmap { margin-inline: calc(var(--gutter) * -1); height: calc(100svh - var(--hdr-h) - var(--cxtop-h, 140px) - var(--tab-h) - var(--safe-b)); min-height: 400px; }
}

@media (max-width: 1023px) { .cx-mapview .fab-ai, .cx-mapview .to-top { display: none; } }

/* xəritə popup-u (desktop) */
.leaflet-container a.cxpop { display: block; color: var(--text); }
.cxpop img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; background: var(--surface-2); }
.cxpop__b { display: flex; flex-direction: column; gap: 1px; padding: 12px 14px 14px; }
.cxpop b { font-size: 15px; font-weight: 600; }
.cxpop small { font-size: 13px; color: var(--text-2); }
.cxpop .cxpop__p { margin-top: 4px; font-size: 14.5px; font-weight: 600; }
.cxpop .cxpop__p small { display: block; margin-top: 1px; font-weight: 400; }

/* mobil: seçilmiş pin kartı */
.cxsel { position: absolute; left: 12px; right: 12px; bottom: 12px; z-index: 1000; }
.cxsel__card { display: flex; gap: 14px; align-items: center; padding: 10px 44px 10px 10px; border-radius: 16px; background: var(--surface); box-shadow: var(--sh-4); animation: fadeUp .3s var(--ease-out); }
.cxsel__card img { width: 96px; height: 96px; border-radius: 10px; object-fit: cover; flex: none; background: var(--surface-2); }
.cxsel__card b { display: block; font-size: 15.5px; font-weight: 600; }
.cxsel__card small { display: block; font-size: 13.5px; color: var(--text-2); }
.cxsel__p { display: block; margin: 4px 0 1px; font-size: 15px; font-weight: 600; }
.cxsel__x { position: absolute; top: 6px; right: 6px; width: 34px; height: 34px; }

/* ── Çip popover-i / alt pərdə içi (core .fpop* üzərinə) ── */
.cxfp .fpop__row.is-zero .grow { color: var(--text-3); }
.cxfp .fpop__row .check { flex: none; }
.cxfp--dev .fpop__list { max-height: min(420px, 60vh); }
/* Rayon: agentliklər səhifəsinin Rayon popover-i kimi iki sütun (telefonun alt pərdəsində tək sütun) */
.cxfp--district .fpop__list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2px 8px; max-height: min(420px, 60vh); }
.cxfp--district .fpop__row { gap: 10px; padding-inline: 6px; font-size: 14.5px; }
.cxfp--district .fpop__row .grow { min-width: 0; }
.cxdevl .aglogo { box-shadow: none; font-size: 11px; }
.cxdevl__all { display: grid; place-items: center; flex: none; width: 28px; height: 28px; border-radius: 8px; background: var(--surface-2); color: var(--text-2); }
.cxdevl__all .i { width: 16px; height: 16px; }
.cxdevl .fpop__row.is-on .cxdevl__all { background: var(--surface); color: var(--brand-text); }
.cxfp .fpop__row.is-on small { color: inherit; }
/* qiymət: hazır aralıqlar — seçilən brend 15% (qalın deyil) */
.cxpre { margin-top: 12px; }
.cxpre .chip.is-on { background: color-mix(in srgb, var(--brand) 15%, transparent); color: var(--brand-text); }
/* alt pərdə (telefon): siyahı tam hündürlükdə, sətirlər iynə xətti ilə, düymələr altda yapışqan */
.cxsheet .modal__body { padding-top: 4px; }
.cxsheet .fpop { padding: 0; }
.cxsheet .fpop__list { max-height: none; overflow: visible; margin-inline: -8px; }
.cxsheet .fpop__row { padding: 12px 8px; }
.cxsheet .cxfp--district .fpop__list { grid-template-columns: minmax(0, 1fr); gap: 0; }
.cxsheet .cxfp--district .fpop__row { gap: 12px; font-size: 15px; }
.cxsheet .fpop__row + .fpop__row { background-image: var(--taper); background-position: top; background-size: 100% 1px; background-repeat: no-repeat; }
.cxsheet .fpop__row.is-on { background-image: none; }
.cxsheet .fpop__row.is-on + .fpop__row { background-image: none; }
.cxsheet .fpop__foot { position: sticky; bottom: 0; margin: 8px -4px 0; padding: 12px 4px 4px; background: var(--surface); }
.cxsheet .fpop__foot .btn--primary { flex: 1; max-width: 260px; height: 44px; }

/* ── Şirkətlər (açıq rəngli zolaq) ── */
/* son bölmədir — footer-ə qədər uzansın (arada ağ zolaq qalmasın) */
.cxdevs { margin-top: 24px; margin-bottom: -40px; }
@media (max-width: 1023px) { .cxdevs { margin-bottom: calc(-64px - var(--tab-h) - var(--safe-b)); } }
.devs { display: grid; grid-template-columns: 1fr; gap: 12px; }
@media (min-width: 640px) { .devs { grid-template-columns: repeat(2, 1fr); gap: 16px; } }
@media (min-width: 1024px) { .devs { grid-template-columns: repeat(3, 1fr); gap: 20px; } }
.dev { display: flex; align-items: center; gap: 16px; padding: 20px; border-radius: 16px; background: var(--surface); box-shadow: var(--edge); text-align: left; min-width: 0; transition: box-shadow .25s; }
.dev:hover { box-shadow: var(--sh-3); }
.cxdevs .dev { box-shadow: var(--sh-1); }
.cxdevs .dev:hover { box-shadow: var(--sh-3); }
html[data-theme='dark'] .cxdevs .dev { background: var(--surface-2); }
.dev b { display: block; font-size: 16px; font-weight: 600; letter-spacing: -.01em; }
.dev small { display: block; margin-top: 1px; font-size: 14px; color: var(--text-2); }
.dev__n { display: inline-flex; align-items: center; gap: 6px; margin-top: 8px; font-size: 14px; font-weight: 600; color: var(--brand-text); }
.dev__n .i { width: 15px; height: 15px; transition: transform .2s var(--ease); }
.dev:hover .dev__n .i { transform: translateX(3px); }
/* aktiv şirkət filtri zolaqda da görünsün */
.cxdevs .dev.is-on { background: color-mix(in srgb, var(--brand) 15%, var(--surface)); }
html[data-theme='dark'] .cxdevs .dev.is-on { background: color-mix(in srgb, var(--brand) 15%, var(--surface-2)); }
@media (max-width: 639px) { .dev { padding: 16px; } }

/* telefonda axtarış sahəsi ≥16px (iOS avtomatik böyütməsin; core .fx-q .input 14.5px-i yalnız <640px-də əvəz olunur) */
@media (max-width: 639px) { .fx-q .input { font-size: 16px; } }