@charset "UTF-8";
/* === AP-R V2: лупа поиска ЖК в шапке === */
.zhk-search-toggle{
  width:38px; height:38px; border-radius:50%;
  background:transparent; border:1.5px solid rgba(255,255,255,.28);
  color:#fff; cursor:pointer; padding:0;
  display:inline-flex; align-items:center; justify-content:center;
  transition:background .18s, border-color .18s, transform .18s;
  flex-shrink:0;
}
.zhk-search-toggle svg{width:16px; height:16px}
.zhk-search-toggle:hover{background:rgba(255,255,255,.12); border-color:rgba(255,255,255,.55)}
.zhk-search-toggle:active{transform:scale(.94)}
/* Фон шапки в scrolled остаётся navy — лупа белая как и в обычном состоянии.
   Если когда-то фон станет белым — здесь нужно вернуть тёмные тона. */
.zhk-search-toggle[aria-expanded="true"]{
  background:#a3d977 !important;
  border-color:#8cc55f !important;
  color:#163d10 !important;
}

/* Панель поиска: desktop = dropdown под шапкой, mobile = full-screen overlay */
.zhk-search-panel{
  position:fixed; top:0; left:0; right:0; bottom:0;
  background:rgba(19,55,79,.55);
  z-index:1000;
  opacity:0; pointer-events:none;
  transition:opacity .2s ease;
  -webkit-backdrop-filter:blur(2px);
  backdrop-filter:blur(2px);
}
.zhk-search-panel.is-open{
  opacity:1; pointer-events:auto;
}
.zhk-search-panel__box{
  position:absolute;
  background:#fff;
  border-radius:0 0 16px 16px;
  box-shadow:0 16px 48px rgba(0,0,0,.18);
  padding:14px;
  max-width:560px;
  width:calc(100% - 32px);
  left:50%;
  transform:translateX(-50%) translateY(-12px);
  top:0;
  transition:transform .22s ease;
  max-height:calc(100vh - 24px);
  display:flex; flex-direction:column;
}
.zhk-search-panel.is-open .zhk-search-panel__box{
  transform:translateX(-50%) translateY(64px);
}
.zhk-search-close{
  position:absolute; top:10px; right:10px;
  width:34px; height:34px; border-radius:50%;
  border:none; background:#f0f3f7; cursor:pointer;
  display:inline-flex; align-items:center; justify-content:center;
  color:#5a6a7a; transition:background .15s;
}
.zhk-search-close svg{width:14px; height:14px}
.zhk-search-close:hover{background:#e3e8ee}

.zhk-search-input-wrap{
  display:flex; align-items:center; gap:10px;
  padding:12px 14px;
  background:#f4f7fa;
  border:1.5px solid transparent;
  border-radius:12px;
  margin-right:44px; /* место под крестик */
  transition:border-color .15s, background .15s;
}
.zhk-search-input-wrap:focus-within{
  background:#fff;
  border-color:#13374f;
}
.zhk-search-input-ic{width:18px; height:18px; color:#5a6a7a; flex-shrink:0}
.zhk-search-input{
  flex:1; min-width:0;
  border:none; background:transparent; outline:none;
  font:600 16px/1.4 inherit;
  color:#13374f;
  padding:0;
}
.zhk-search-input::placeholder{color:#8a99a8; font-weight:500}
.zhk-search-clear{
  width:24px; height:24px; border-radius:50%;
  border:none; background:#dfe5ec; cursor:pointer;
  display:none; align-items:center; justify-content:center;
  color:#5a6a7a; padding:0; flex-shrink:0;
}
.zhk-search-clear svg{width:10px; height:10px}
.zhk-search-clear:hover{background:#cfd6df}
.zhk-search-panel.has-value .zhk-search-clear{display:inline-flex}

.zhk-search-hint{
  padding:8px 4px 0;
  font-size:12px; color:#8a99a8;
}
.zhk-search-state{flex:1; min-height:0; overflow:hidden}
.zhk-search-state[hidden]{display:none}

.zhk-search-results{
  margin-top:10px;
  overflow-y:auto;
  max-height:calc(70vh - 100px);
  -webkit-overflow-scrolling:touch;
}
.zhk-search-row{
  display:flex; align-items:center; gap:12px;
  padding:10px;
  border-radius:10px;
  text-decoration:none; color:inherit;
  cursor:pointer;
  border:1px solid transparent;
  transition:background .12s, border-color .12s;
}
.zhk-search-row + .zhk-search-row{margin-top:2px}
.zhk-search-row:hover, .zhk-search-row.is-active{
  background:#f4f7fa;
  border-color:#e3e8ee;
}
.zhk-search-row__img{
  width:54px; height:54px; border-radius:9px;
  flex-shrink:0;
  background:#e9eef5 center/cover no-repeat;
}
.zhk-search-row__body{flex:1; min-width:0}
.zhk-search-row__name{
  font-weight:700; font-size:15px;
  color:#13374f; line-height:1.25;
  overflow:hidden; text-overflow:ellipsis;
  display:-webkit-box; -webkit-line-clamp:1; -webkit-box-orient:vertical;
}
.zhk-search-row__name b{color:#13374f; background:rgba(163,217,119,.4); padding:0 2px; border-radius:3px; font-weight:700}
.zhk-search-row__meta{
  display:flex; align-items:center; gap:8px;
  margin-top:3px;
  font-size:12.5px; color:#6b7785;
}
.zhk-search-row__city{display:inline-flex; align-items:center; gap:3px}
.zhk-search-row__city::before{content:''; width:3px; height:3px; background:#a3d977; border-radius:50%; display:inline-block}
.zhk-search-row__price{
  font-weight:700; font-size:14px;
  color:#13374f;
  flex-shrink:0; margin-left:8px;
  white-space:nowrap;
}
.zhk-search-row__price small{font-weight:500; color:#6b7785; font-size:10.5px; display:block; margin-bottom:-1px}

.zhk-search-state--empty{
  padding:38px 16px 24px;
  text-align:center;
  color:#6b7785;
}
.zhk-search-empty-ic{font-size:36px; margin-bottom:8px; opacity:.5}
.zhk-search-empty-title{font-weight:700; font-size:16px; color:#13374f; margin-bottom:4px}
.zhk-search-empty-sub{font-size:13px; color:#6b7785}

.zhk-search-state--loading{
  padding:32px 16px 24px;
  text-align:center;
  color:#8a99a8;
  font-size:13px;
}
.zhk-search-spinner{
  width:28px; height:28px;
  border:2.5px solid #e3e8ee; border-top-color:#17b7bf;
  border-radius:50%;
  margin:0 auto 10px;
  animation:zhk-search-spin .8s linear infinite;
}
@keyframes zhk-search-spin{to{transform:rotate(360deg)}}

@media (min-width:1024px){
  .zhk-search-panel__box{
    width:580px;
    max-width:calc(100% - 32px);
    left:auto;
    right:24px;
    transform:translateX(0) translateY(-12px);
    top:0;
    border-radius:0 0 18px 18px;
  }
  .zhk-search-panel.is-open .zhk-search-panel__box{
    transform:translateX(0) translateY(56px);
  }
}

@media (max-width:1023px){
  /* На mobile панель занимает всю высоту, без скруглений */
  .zhk-search-panel__box{
    border-radius:0;
    max-width:100%;
    width:100%;
    height:100dvh;
    max-height:100dvh;
    padding:12px;
  }
  .zhk-search-panel.is-open .zhk-search-panel__box{
    transform:translateX(-50%) translateY(0);
  }
  .zhk-search-results{
    max-height:calc(100dvh - 130px);
  }
  .zhk-search-row__img{width:48px; height:48px}
  .zhk-search-row__name{font-size:14px}
  .zhk-search-row__meta{font-size:12px}
  .zhk-search-row__price{font-size:13px}
}

@media (max-width:480px){
  .zhk-search-row__price small{display:none}
}

/* Когда панель открыта — блокируем скролл body */
body.zhk-search-open{overflow:hidden}

/* Mobile/tablet: используем родную .m-search вместо нашей кнопки */
@media (max-width:1023px){
  .zhk-search-toggle{display:none !important}
}

/* Компактный режим .btn-primary при scrolled — освобождает место под телефон + лупу */
@media (min-width:1024px){
  body.topbar-hidden .header .btn.btn-primary,
  body.scrolled .header .btn.btn-primary{
    padding:8px 14px !important;
    font-size:13px !important;
    gap:6px !important;
  }
  body.topbar-hidden .header .btn.btn-primary svg,
  body.scrolled .header .btn.btn-primary svg{
    width:14px !important; height:14px !important;
  }
}
/* На scrolled даём .header-meta компактнее — телефон-pill умещается полностью */
body.topbar-hidden .header-meta{ max-width:none; flex-shrink:0; }
body.topbar-hidden .header-meta .phone{ flex-shrink:0; }

/* === /AP-R V2: лупа поиска ЖК === */