@charset "utf-8";
/* ============================================================================
   citypicker.css — модальное окно выбора города (задача CITY-PICKER).
   Общий компонент: подключается и в шапке сайта, и в форме коллектива.
   Все классы начинаются с cb-cp-, чтобы не пересекаться с common.css,
   collective.css и section_search.css (их править нельзя — общие для других задач).
   ========================================================================== */

.cb-cp-overlay {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(6, 16, 21, .72);
  z-index: 1200;
  display: none;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.cb-cp-overlay.cb-cp-open { display: block; }
/* пока окно открыто — фон не прокручивается */
body.cb-cp-locked { overflow: hidden; }

.cb-cp-modal {
  width: 980px;
  max-width: 96vw;
  margin: 4vh auto 5vh;
  background: #fff;
  border-radius: 6px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, .45);
  display: flex;
  flex-direction: column;
  max-height: 90vh;
  overflow: hidden;
  color: #1b1b1b;
  font-size: 14px;
}

/* --- шапка окна --------------------------------------------------------- */
.cb-cp-head {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 20px;
  background: #0d1b22;
  color: #eaf4f8;
}
.cb-cp-title { font-size: 18px; font-weight: bold; margin: 0; flex: 0 0 auto; }
.cb-cp-head .cb-cp-sub { color: #8fa8b3; font-size: 12px; flex: 0 0 auto; }
.cb-cp-close {
  margin-left: auto;
  background: none;
  border: 0;
  color: #9fb6c0;
  font-size: 26px;
  line-height: 1;
  cursor: pointer;
  padding: 0 4px;
}
.cb-cp-close:hover { color: #fff; }

/* --- строка поиска ------------------------------------------------------ */
.cb-cp-search {
  padding: 14px 20px 10px;
  border-bottom: 1px solid #eef1f4;
  background: #fafcfd;
}
.cb-cp-search input {
  width: 100%;
  box-sizing: border-box;
  height: 42px;
  padding: 0 14px;
  font-size: 15px;
  border: 1px solid #cfd9de;
  border-radius: 4px;
  background: #fff;
  color: #1b1b1b;
}
.cb-cp-search input:focus { outline: none; border-color: #00aeef; box-shadow: 0 0 0 2px rgba(0,174,239,.16); }
/* блеклая подсказка-пример внутри поля */
.cb-cp-search input::placeholder { color: #a9b4bb; }
.cb-cp-hint { margin-top: 6px; font-size: 12px; color: #8a949c; }

/* --- тело окна ---------------------------------------------------------- */
.cb-cp-body { overflow-y: auto; padding: 6px 20px 22px; flex: 1 1 auto; }
.cb-cp-section { margin-top: 16px; }
.cb-cp-section-title {
  font-size: 12px;
  letter-spacing: .5px;
  text-transform: uppercase;
  color: #7d8a92;
  margin: 0 0 10px;
  font-weight: bold;
}
.cb-cp-mnote { font-size: 12px; color: #8a949c; margin: -4px 0 10px; }

/* плитки миллионников */
.cb-cp-tiles { display: flex; flex-wrap: wrap; gap: 8px; }
.cb-cp-tile {
  display: inline-block;
  padding: 8px 13px;
  border: 1px solid #d8e2e7;
  border-radius: 4px;
  background: #f7fbfc;
  color: #16323d;
  text-decoration: none;
  font-size: 14px;
}
.cb-cp-tile:hover { background: #e9f5f9; border-color: #9ed3e2; }
.cb-cp-tile .cb-cp-pop { color: #93a3ab; font-size: 11px; margin-left: 5px; }
.cb-cp-tile.cb-cp-current { border-color: #00aeef; background: #e0f6fe; font-weight: bold; }

/* регионы: раскрывающиеся списки */
.cb-cp-regions { border-top: 1px solid #eef1f4; }
.cb-cp-region { border-bottom: 1px solid #eef1f4; }
.cb-cp-region > summary {
  cursor: pointer;
  padding: 11px 4px;
  font-size: 15px;
  list-style: none;
  display: flex;
  align-items: center;
}
.cb-cp-region > summary::-webkit-details-marker { display: none; }
.cb-cp-region > summary:before {
  content: "▸";
  color: #00aeef;
  margin-right: 8px;
  font-size: 12px;
}
.cb-cp-region[open] > summary:before { content: "▾"; }
.cb-cp-region[open] > summary { color: #0b6b80; font-weight: bold; }
.cb-cp-region .cb-cp-kind { color: #9aa8af; font-size: 12px; margin-left: 6px; }
.cb-cp-region .cb-cp-count { color: #b3bec4; font-size: 12px; margin-left: auto; }
.cb-cp-cities { display: flex; flex-wrap: wrap; gap: 6px 10px; padding: 2px 0 14px 22px; }
.cb-cp-city {
  color: #1b1b1b;
  text-decoration: none;
  padding: 3px 0;
  font-size: 14px;
}
.cb-cp-city:hover { color: #00aeef; text-decoration: underline; }
.cb-cp-city.cb-cp-current { color: #0b6b80; font-weight: bold; }
.cb-cp-city .cb-cp-pop { color: #b3bec4; font-size: 11px; margin-left: 4px; }

/* результаты поиска */
.cb-cp-results { margin-top: 4px; }
.cb-cp-result {
  display: block;
  padding: 9px 4px;
  border-bottom: 1px solid #f0f3f5;
  color: #1b1b1b;
  text-decoration: none;
}
.cb-cp-result:hover { background: #f4fafc; }
.cb-cp-result .cb-cp-sub { color: #8a949c; font-size: 12px; margin-left: 8px; }
.cb-cp-empty { color: #8a949c; padding: 14px 4px; }

/* состояние загрузки */
.cb-cp-loading { padding: 26px 4px; color: #8a949c; text-align: center; }
.cb-cp-spinner {
  display: inline-block;
  width: 16px; height: 16px;
  margin-right: 8px;
  border: 2px solid #cfd9de;
  border-top-color: #00aeef;
  border-radius: 50%;
  vertical-align: -3px;
  animation: cb-cp-spin .8s linear infinite;
}
@keyframes cb-cp-spin { to { transform: rotate(360deg); } }

/* сообщение «в этом городе пока нет контента» */
.cb-cp-note {
  margin: 12px 20px 0;
  padding: 12px 14px;
  border: 1px solid #ffd9a8;
  background: #fff8ec;
  border-radius: 4px;
  color: #7a5320;
  font-size: 13px;
  line-height: 1.45;
}
.cb-cp-note b { color: #5c3d14; }
.cb-cp-note .cb-cp-note-actions { margin-top: 8px; display: flex; gap: 10px; flex-wrap: wrap; }
.cb-cp-btn {
  display: inline-block;
  padding: 6px 12px;
  border-radius: 4px;
  border: 1px solid #cfd9de;
  background: #fff;
  color: #1b1b1b;
  cursor: pointer;
  font-size: 13px;
  text-decoration: none;
}
.cb-cp-btn.cb-cp-btn-primary { background: #00aeef; border-color: #00aeef; color: #fff; }
.cb-cp-btn:hover { filter: brightness(.97); }

/* --- поле выбора города в форме ---------------------------------------- */
.cb-cp-field {
  display: flex;
  align-items: center;
  gap: 8px;
  border: 1px solid #cfd9de;
  border-radius: 4px;
  background: #fff;
  padding: 0 10px;
  height: 38px;
  cursor: pointer;
  box-sizing: border-box;
}
.cb-cp-field:hover { border-color: #9ed3e2; }
.cb-cp-field.cb-cp-filled { border-color: #b8d8e2; background: #f7fbfc; }
.cb-cp-field-text { flex: 1 1 auto; color: #1b1b1b; }
.cb-cp-field-text.cb-cp-placeholder { color: #a9b4bb; }
.cb-cp-field-region { color: #8a949c; font-size: 12px; }
.cb-cp-field-arrow { color: #00aeef; font-size: 12px; flex: 0 0 auto; }
.cb-cp-field-clear {
  flex: 0 0 auto;
  border: 0;
  background: none;
  color: #b3bec4;
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  padding: 0 2px;
  display: none;
}
.cb-cp-field-clear:hover { color: #e05a5a; }
.cb-cp-field.cb-cp-filled .cb-cp-field-clear { display: block; }

/* --- телефон: окно во весь экран --------------------------------------- */
@media (max-width: 760px) {
  .cb-cp-overlay { background: #fff; }
  .cb-cp-modal {
    width: 100%;
    max-width: 100%;
    height: 100%;
    max-height: 100%;
    margin: 0;
    border-radius: 0;
    box-shadow: none;
  }
  .cb-cp-head { padding: 12px 14px; }
  .cb-cp-title { font-size: 16px; }
  .cb-cp-head .cb-cp-sub { display: none; }
  .cb-cp-search { padding: 12px 14px 10px; position: sticky; top: 0; background: #fff; z-index: 2; }
  .cb-cp-body { padding: 4px 14px 26px; }
  .cb-cp-tile { font-size: 15px; padding: 10px 14px; }
  .cb-cp-city { font-size: 15px; padding: 6px 0; }
  .cb-cp-cities { padding-left: 16px; }
  .cb-cp-note { margin: 10px 14px 0; }
}