/* =========================================================================
   Central Property — страница района (taxonomy-property_area.php) и хаб «Районы Ташкента» (tools/pages/rayony.json).
   Перенос из docs/preview/v2/district.html (локальные классы dh- и dp-) и cp-ui.css (разделы 6 сегмент, 8 вкладки, 16 карта,
   19 пустое состояние) на токены --cp-* из style.css. Общие компоненты — css/sections.css (.cp-section, .cp-page-hero,
   .cp-stat, .cp-chip, .cp-cta, .cp-reveal), карточки — css/cards.css.
   Зависимости: cards.css (--cp-s1…s5, --cp-fs-sm/base/xs, --cp-tap), header-footer.css (--cp-night-line),
   sections.css (--cp-s6…s8, --cp-gutter, --cp-fs-h3/h4, --cp-dur-reveal).
   Здесь объявляются только локальные величины (высота карты, маркер, сегмент, полоса). Mobile-first: база 375 px;
   600 — две колонки; 768 — планшет; 1024 — компьютер. Движение — только transform/opacity (и цвет фона/рамки 150 мс).
   Карта — Leaflet темы Houzez; маркеры и всплывашки рисует js/district.js.
   ========================================================================= */

:root{
  --cp-map-h:calc(var(--cp-s8) * 5);        /* 320 px — карта на телефоне и планшете */
  --cp-map-h-lg:calc(var(--cp-s8) * 7);     /* 448 px — с 1024 px */
  --cp-map-z-ui:500;                        /* легенда поверх слоёв Leaflet (у них 400) */
  --cp-marker-h:28px;
  --cp-marker-fs:12px;
  --cp-marker-tip:5px;
  --cp-seg-h:40px;
  --cp-seg-pad:3px;
  --cp-seg-gap:2px;
  --cp-bar-h:var(--cp-s3);
  --cp-empty-art-w:160px;
  --cp-empty-art-h:90px;
  --cp-fs-stat-sm:1.5rem;
  --cp-fs-stat-md:1.75rem;
  --cp-focus-ring:3px;
}

/* ---------- 1. Первый экран района: цифры, типы, карта ---------- */
.cp-district-hero__stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--cp-s3);margin-top:var(--cp-s5)}
.cp-district-hero__stats:has(> :nth-child(2):last-child){grid-template-columns:repeat(2,minmax(0,1fr))}
.cp-district-hero__stats:has(> :only-child){grid-template-columns:minmax(0,max-content)}
.cp-district-hero__stats .cp-stat{padding:var(--cp-s3)}
.cp-district-hero__stats .cp-stat b{font-size:var(--cp-fs-stat-sm)}
.cp-district-hero__stats .cp-stat span{font-size:var(--cp-fs-xs)}
.cp-district-hero__types{margin-top:var(--cp-s4)}
.cp-district-hero__legend{margin:var(--cp-s2) 0 0;font-size:var(--cp-fs-xs);line-height:1.4;color:var(--cp-on-night-muted)}
.cp-district-hero .cp-page-hero__note{max-width:60ch}
@media (min-width:768px){
  .cp-district-hero__stats .cp-stat b{font-size:var(--cp-fs-stat-md)}
  .cp-district-hero__stats .cp-stat span{font-size:var(--cp-fs-sm)}
}
@media (min-width:1024px){
  .cp-district-hero__inner{align-items:start}
}

/* ---------- 2. Карта .cp-map (объекты района, районы на хабе) ---------- */
.cp-map{position:relative;isolation:isolate;height:var(--cp-map-h);min-height:var(--cp-map-h);border:1px solid var(--cp-line);border-radius:var(--cp-r-md);overflow:hidden;background:var(--cp-surface-2)}
.cp-page-hero .cp-map{border-color:var(--cp-night-line)}
.cp-map .leaflet-container{width:100%;height:100%;font-family:var(--cp-font-text);background:var(--cp-surface-2)}
.cp-map__empty{position:absolute;inset:0;z-index:1;display:grid;place-items:center;margin:0;padding:var(--cp-s4);text-align:center;font-size:var(--cp-fs-sm);line-height:1.45;color:var(--cp-muted)}
.cp-map__empty a{color:var(--cp-accent-text);text-decoration:underline}
.cp-page-hero .cp-map__empty{color:var(--cp-on-night-muted);background:color-mix(in srgb,var(--cp-night) 55%,transparent)}
.cp-page-hero .cp-map__empty a{color:var(--cp-on-night)}
.cp-map.is-ready .cp-map__empty{display:none}
.cp-map.is-failed .cp-map__empty{z-index:var(--cp-map-z-ui)}
@media (min-width:1024px){.cp-map--district,.cp-map--districts{height:var(--cp-map-h-lg);min-height:var(--cp-map-h-lg)}}

/* Маркер-цена: продажа — акцент, аренда — ночь, район — ночь-2; активный/наведённый — тёплый */
.cp-marker-wrap{background:none;border:0}
.cp-marker{position:relative;display:inline-flex;align-items:center;gap:var(--cp-s1);height:var(--cp-marker-h);padding:0 var(--cp-s2);border:2px solid var(--cp-surface);border-radius:var(--cp-r-pill);background:var(--cp-accent);color:var(--cp-on-accent);font:600 var(--cp-marker-fs)/1 var(--cp-font-head);white-space:nowrap;box-shadow:var(--cp-shadow-2);transform:translate(-50%,-100%);cursor:pointer;transition:transform var(--cp-dur-fast) var(--cp-ease),background-color var(--cp-dur-fast) var(--cp-ease)}
.cp-marker::after{content:"";position:absolute;left:50%;bottom:calc(-1 * var(--cp-marker-tip) - 2px);margin-left:calc(-1 * var(--cp-marker-tip));border:var(--cp-marker-tip) solid transparent;border-top-color:var(--cp-surface);border-bottom:0}
.cp-marker--rent{background:var(--cp-night)}
.cp-marker--area{background:var(--cp-night-2)}
.cp-marker__n{font-weight:500;opacity:.8}
.leaflet-marker-icon:hover .cp-marker,.leaflet-marker-icon:focus-visible .cp-marker,.cp-marker.is-active{transform:translate(-50%,-100%) scale(1.08);background:var(--cp-warm)}
.cp-map .leaflet-marker-icon:hover,.cp-map .leaflet-marker-icon:focus-visible{z-index:var(--cp-map-z-ui)!important}
.cp-map .leaflet-marker-icon:focus-visible{outline:0} /* только своя карта: фокус показывает .cp-marker; у штатных карт Houzez outline остаётся */

/* Легенда и всплывашка */
.cp-map__legend{position:absolute;z-index:var(--cp-map-z-ui);left:var(--cp-s3);bottom:var(--cp-s3);display:flex;gap:var(--cp-s3);padding:var(--cp-s2) var(--cp-s3);border-radius:var(--cp-r-sm);background:color-mix(in srgb,var(--cp-surface) 92%,transparent);box-shadow:var(--cp-shadow-1);font-size:var(--cp-fs-xs);color:var(--cp-text)}
.cp-map__legend i{display:inline-block;width:var(--cp-s2);height:var(--cp-s2);margin-right:var(--cp-s1);border-radius:50%;background:var(--cp-accent);vertical-align:-1px}
.cp-map__legend i.cp-map__legend-rent{background:var(--cp-night)}
.cp-map .leaflet-popup-content-wrapper{border-radius:var(--cp-r-md);box-shadow:var(--cp-shadow-3);color:var(--cp-text)}
.cp-map .leaflet-popup-content{margin:var(--cp-s3) var(--cp-s4);font:var(--cp-fs-sm)/1.45 var(--cp-font-text)}
.cp-map .leaflet-popup-tip{box-shadow:none}
.cp-map .leaflet-popup-close-button{top:var(--cp-s1);right:var(--cp-s1);width:var(--cp-s5);height:var(--cp-s5);color:var(--cp-muted)}
.cp-map-pop{display:grid;gap:var(--cp-s1);justify-items:start}
.cp-map-pop__title{font-weight:600;color:var(--cp-text)}
.cp-map-pop__price{display:flex;flex-wrap:wrap;align-items:center;gap:var(--cp-s2);font-family:var(--cp-font-head);font-weight:600;font-size:var(--cp-fs-base);color:var(--cp-text)}
.cp-map-pop__link{margin-top:var(--cp-s1);font-weight:600;color:var(--cp-accent-text)}
.cp-map .leaflet-control-attribution{font-size:var(--cp-fs-xs);background:color-mix(in srgb,var(--cp-surface) 85%,transparent)}
.cp-map .leaflet-bar a{color:var(--cp-text)}

/* ---------- 3. Сегмент «Продажа / Аренда» (.cp-seg) ---------- */
.cp-seg{display:inline-flex;gap:var(--cp-seg-gap);max-width:100%;padding:var(--cp-seg-pad);border-radius:var(--cp-r-sm);background:var(--cp-surface-2);overflow-x:auto}
.cp-seg > label{position:relative;flex:1 0 auto;margin:0}
.cp-seg input{position:absolute;inset:0;margin:0;opacity:0;cursor:pointer}
.cp-seg span{display:grid;place-items:center;min-width:var(--cp-tap);min-height:var(--cp-seg-h);padding:0 var(--cp-s3);border-radius:calc(var(--cp-r-sm) - var(--cp-seg-gap));font-weight:500;font-size:var(--cp-fs-sm);line-height:1.2;color:var(--cp-muted);white-space:nowrap;transition:background-color var(--cp-dur-fast) var(--cp-ease),color var(--cp-dur-fast) var(--cp-ease)}
.cp-seg input:checked + span{background:var(--cp-surface);color:var(--cp-text);box-shadow:var(--cp-shadow-1)}
.cp-seg input:focus-visible + span{outline:2px solid var(--cp-accent);outline-offset:1px}

/* ---------- 4. «Цена за м²» — список по типу объекта с полосой (строки от 5 объектов; по комнатности — не в этапе 3) ---------- */
.cp-district-prices .cp-seg{margin-bottom:var(--cp-s4)}
.cp-district-prices__src{margin:0}
.cp-dprices{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--cp-s4);align-items:start}
.cp-dprices__group{padding:var(--cp-s4);border:1px solid var(--cp-line);border-radius:var(--cp-r-md);background:var(--cp-bg)}
.cp-dprices__title{margin:0 0 var(--cp-s3);font-family:var(--cp-font-text);font-size:var(--cp-fs-h4);font-weight:600;color:var(--cp-text)}
.cp-dprices__list{display:grid;gap:var(--cp-s4);margin:0;padding:0;list-style:none}
.cp-dprice{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"lbl val" "bar bar";gap:var(--cp-s2) var(--cp-s3);align-items:baseline}
.cp-dprice__lbl{grid-area:lbl;font-weight:600;color:var(--cp-text)}
.cp-dprice__val{grid-area:val;text-align:right;font-weight:600;font-size:var(--cp-fs-h4);color:var(--cp-text)}
.cp-dprice__val small{display:block;font-family:var(--cp-font-text);font-weight:400;font-size:var(--cp-fs-xs);line-height:1.4;color:var(--cp-muted)}
.cp-dprice__bar{grid-area:bar;display:block;height:var(--cp-bar-h);border-radius:var(--cp-r-pill);background:var(--cp-surface-3);overflow:hidden}
.cp-dprice__bar i{display:block;width:100%;height:100%;border-radius:inherit;background:var(--cp-accent);transform-origin:left center;transform:scaleX(var(--v,0));transition:transform var(--cp-dur-slow) var(--cp-ease)}
.cp-dprices[data-cp-deal="rent"] .cp-dprice__bar i{background:var(--cp-night-2)}
html.cp-js .cp-dprices.cp-reveal:not(.is-visible) .cp-dprice__bar i{transform:scaleX(0)}
@media (min-width:768px){
  .cp-dprices{gap:var(--cp-s5)} /* одна группа «По типу объекта» — одна колонка на любой ширине */
  .cp-dprices__group{padding:var(--cp-s5)}
}

/* ---------- 5. «Инфраструктура и особенности»: описание и группы ориентиров ---------- */
.cp-district-infra__text{margin:0 0 var(--cp-s5)}
.cp-district-infra__text p{margin:0 0 var(--cp-s3);font-size:inherit;line-height:inherit;color:inherit}
.cp-district-infra__text p:last-child{margin-bottom:0}
.cp-dfeat{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--cp-s5)}
.cp-dfeat__title{margin:0 0 var(--cp-s2);font-family:var(--cp-font-text);font-size:var(--cp-fs-h4);font-weight:600;color:var(--cp-text)}
.cp-dfeat__chips{margin:0}
.cp-chip--static{cursor:default}
.cp-chip--static:hover{border-color:var(--cp-line);color:var(--cp-text)}
@media (min-width:600px){.cp-dfeat{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1024px){.cp-dfeat{grid-template-columns:repeat(4,minmax(0,1fr))}}

/* ---------- 6. Вкладки-пилюли «Все / Продажа / Аренда» (ссылки с aria-current) ---------- */
.cp-tabs{display:flex;gap:var(--cp-s2);max-width:100%;margin:0;padding:0;list-style:none;overflow-x:auto;scrollbar-width:none}
.cp-tabs::-webkit-scrollbar{display:none}
.cp-tab{position:relative;display:inline-flex;align-items:center;gap:var(--cp-s2);flex:none;min-height:var(--cp-tap);padding:0 var(--cp-s4);border:0;border-radius:var(--cp-r-pill);background:var(--cp-surface-2);color:var(--cp-muted);font:500 var(--cp-fs-sm)/1.2 var(--cp-font-text);white-space:nowrap;text-decoration:none;cursor:pointer;transition:background-color var(--cp-dur-fast) var(--cp-ease),color var(--cp-dur-fast) var(--cp-ease)}
.cp-tab:hover{color:var(--cp-text);text-decoration:none}
.cp-tab:focus-visible{outline:2px solid var(--cp-accent);outline-offset:2px}
.cp-tab[aria-current],.cp-tab[aria-selected="true"]{background:var(--cp-accent);color:var(--cp-on-accent)}
.cp-tab__n{font-family:var(--cp-font-head);font-size:var(--cp-fs-xs);opacity:.75}
.cp-section--alt .cp-tab{background:var(--cp-surface)}
.cp-district-objects__head .cp-tabs{width:100%}
@media (min-width:768px){.cp-district-objects__head .cp-tabs{width:auto;align-self:flex-end}}

/* ---------- 7. Объекты: сетка, пагинация Houzez (.pagination Bootstrap) ---------- */
.cp-district-objects__pagination{margin-top:var(--cp-s5)}
.cp-district .pagination-wrap{margin:0}
.cp-district .pagination{display:flex;flex-wrap:wrap;justify-content:center;gap:var(--cp-s1);margin:0;padding:0}
.cp-district .pagination .page-link{display:inline-flex;align-items:center;justify-content:center;min-width:var(--cp-tap);min-height:var(--cp-tap);padding:0 var(--cp-s3);border:1px solid var(--cp-line);border-radius:var(--cp-r-sm);background:var(--cp-surface);color:var(--cp-text);font-weight:600;line-height:1;box-shadow:none;transition:border-color var(--cp-dur-fast) var(--cp-ease),color var(--cp-dur-fast) var(--cp-ease),background-color var(--cp-dur-fast) var(--cp-ease)}
.cp-district .pagination .page-link:hover{border-color:var(--cp-accent);color:var(--cp-accent-text);background:var(--cp-surface)}
.cp-district .pagination .page-item.active .page-link{background:var(--cp-accent);border-color:var(--cp-accent);color:var(--cp-on-accent)}
.cp-district .pagination .page-item.disabled .page-link{color:var(--cp-faint);background:transparent}
.cp-district .pagination .page-link:focus-visible{outline:2px solid var(--cp-accent);outline-offset:2px;box-shadow:none}

/* ---------- 8. Пустое состояние (.cp-empty): силуэт города, фраза, действие ---------- */
.cp-empty{padding:var(--cp-s7) var(--cp-s4);border:1px dashed var(--cp-line-strong);border-radius:var(--cp-r-md);background:var(--cp-surface);text-align:center;color:var(--cp-muted)}
.cp-empty__art{width:var(--cp-empty-art-w);height:var(--cp-empty-art-h);margin:0 auto var(--cp-s4);color:var(--cp-line-strong);background:currentColor;-webkit-mask:url(../assets/img/skyline.svg) center/contain no-repeat;mask:url(../assets/img/skyline.svg) center/contain no-repeat}
.cp-empty h3{margin:0 0 var(--cp-s2);font-size:var(--cp-fs-h3);color:var(--cp-text)}
.cp-empty p{margin:0 auto;max-width:52ch}
.cp-empty__actions{display:flex;flex-wrap:wrap;justify-content:center;gap:var(--cp-s3);margin-top:var(--cp-s4)}

/* ---------- 9. ЖК, соседние районы, подбор ---------- */
.cp-district-complexes__sub{margin:var(--cp-s5) 0 var(--cp-s4);font-family:var(--cp-font-text);font-size:var(--cp-fs-h4);font-weight:600}
.cp-district-near__all{margin:var(--cp-s5) 0 var(--cp-s2)}
.cp-district-pick__title{margin:0 0 var(--cp-s3);font-family:var(--cp-font-head);font-size:var(--cp-fs-h4);font-weight:600;color:var(--cp-text)}
.cp-district-pick__actions{display:grid;gap:var(--cp-s3)}
.cp-district-pick__note{margin:var(--cp-s3) 0 0}
.cp-district-pick__all{display:inline-block;margin-top:var(--cp-s3);font-size:var(--cp-fs-sm);font-weight:600;color:var(--cp-accent-text)}
.cp-district-pick .cp-section__title{margin-bottom:var(--cp-s3)}
.cp-district-pick .cp-lead{margin:0}

/* ---------- 10. Хаб «Районы Ташкента» (Elementor-страница rayony) ---------- */
.cp-hub .elementor-widget:not(:last-child){margin-block-end:0}
.cp-hub-hero__chips{margin-top:var(--cp-s4)}
.cp-hub-cta__idtitle{margin-top:var(--cp-s5)}
.cp-map__note{margin:var(--cp-s3) 0 0}
/* Поле «Найти объект по ID» вне шапки (в шапке и шторке — правила header-footer.css) */
.cp-idsearch--inline{display:flex;align-items:center;max-width:100%;height:var(--cp-tap);padding-left:var(--cp-s4);border:1px solid var(--cp-line-strong);border-radius:var(--cp-r-pill);background:var(--cp-surface)}
.cp-idsearch--inline:focus-within{border-color:var(--cp-accent);box-shadow:0 0 0 var(--cp-focus-ring) var(--cp-accent-soft)}
.cp-idsearch--inline input{flex:1;min-width:0;height:100%;min-height:0;margin:0;padding:0;border:0;border-radius:0;background:transparent;box-shadow:none;outline:0;-webkit-appearance:none;appearance:none;font:500 var(--cp-fs-sm)/1 var(--cp-font-text);color:var(--cp-text)}
.cp-idsearch--inline input::placeholder{color:var(--cp-faint);opacity:1}
.cp-idsearch--inline input::-webkit-search-cancel-button{-webkit-appearance:none;appearance:none}
.cp-idsearch--inline button{display:grid;place-items:center;flex:none;width:calc(var(--cp-tap) - var(--cp-s1));height:calc(var(--cp-tap) - var(--cp-s1));margin-right:calc(var(--cp-s1) / 2);padding:0;border:0;border-radius:var(--cp-r-pill);background:var(--cp-accent);color:var(--cp-on-accent);cursor:pointer;transition:background-color var(--cp-dur-fast) var(--cp-ease)}
.cp-idsearch--inline button:hover{background:var(--cp-accent-hover)}
.cp-idsearch--inline button:focus-visible{outline:2px solid var(--cp-accent);outline-offset:2px}

/* ---------- 11. Без движения по просьбе системы ---------- */
@media (prefers-reduced-motion:reduce){
  .cp-marker,.cp-seg span,.cp-tab,.cp-dprice__bar i,.cp-idsearch--inline button,.cp-district .pagination .page-link{transition:none}
  .leaflet-marker-icon:hover .cp-marker,.leaflet-marker-icon:focus-visible .cp-marker,.cp-marker.is-active{transform:translate(-50%,-100%)}
  html.cp-js .cp-dprices.cp-reveal:not(.is-visible) .cp-dprice__bar i{transform:scaleX(var(--v,0))}
}