/* === общая палитра и базовые стили === */
:root{
  --b:#1b6ec2;--r:.9rem;
  --bg1:#20436d;--bg2:#2b5876;
  --card:#ffffffcc;--txt:#123;
  --chip:#e7eff9;--chip-text:#13417a;
}
*{box-sizing:border-box;font:15.8px/1.4 "Segoe UI",sans-serif;margin:0}
body{min-height:100vh;display:flex;justify-content:center;align-items:flex-start;
     background:linear-gradient(135deg,var(--bg1),var(--bg2));padding:2rem}

/* двухколоночная сетка */
.two-cols{display:flex;flex-wrap:wrap;gap:1.5rem;width:100%;max-width:1280px}

/* карточки */
.card{background:var(--card);backdrop-filter:blur(8px);border-radius:1rem;
      box-shadow:0 18px 40px #0003;color:var(--txt)}
.card.left {flex:2 1 460px;padding:2rem 2.4rem}
.card.aside{flex:1 1 260px;padding:1.6rem 1.8rem}
h1{font-size:1.55rem;margin-bottom:1rem}
.card.aside h2{font-size:1.25rem;margin-bottom:1rem}

/* поля ввода */
label{display:block;margin:.9rem 0 .35rem;font-weight:600}
input,select,textarea{
  width:100%;padding:.55rem .7rem;border:1.5px solid #c4ced9;border-radius:8px;
  background:#fff;transition:border .2s;font-family:inherit
}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--b)}
textarea{resize:vertical}
.row{display:flex;gap:1rem}.row>*{flex:1}

.btn{margin-top:1.5rem;width:100%;padding:.78rem;border:none;border-radius:9px;
     background:var(--b);color:#fff;font-weight:600;cursor:pointer}
.btn:hover{background:#165fab}
.err{margin-top:.6rem;color:#b50000;font-size:.9rem}

.mode{display:flex;gap:1rem;margin-bottom:1rem}
.mode label{display:flex;align-items:center;gap:.4rem;font-weight:500}

/* чекбоксы / радио в aside */
.radioRow,.chkRow,.chkWrap{display:flex;flex-wrap:wrap;gap:1rem 1.2rem;margin-bottom:.6rem}
.chkWrap{flex-direction:column;gap:.4rem}
.radioRow label,.chkRow label,.chkWrap label{display:flex;align-items:center;gap:.4rem;font-weight:500}

/* адаптив для мобил */
@media(max-width:880px){
  .two-cols{flex-direction:column}
  .card.aside{max-width:100%}
}

/* ============ multiselect городов ============ */
.multiselect{position:relative;font-size:15px}
select[multiple]{display:none}

.selectBox{
  display:flex;flex-wrap:wrap;gap:.4rem;align-items:center;
  min-height:2.6rem;padding:.2rem .65rem;border:1.5px solid #c4ced9;
  border-radius:9px;background:#fff;cursor:pointer;transition:.2s
}
.selectBox.open,.selectBox:focus-within{
  border-color:#3476d7;box-shadow:0 0 0 2px #2d7bdb33
}
.placeholder{color:#9aa4b1;margin-right:auto}
.chips{display:flex;flex-wrap:wrap;gap:.35rem}
.chip{
  background:var(--chip);color:var(--chip-text);border-radius:6px;
  padding:.13rem .55rem;font-size:.83rem;display:flex;align-items:center;gap:.33rem;
  box-shadow:inset 0 0 0 1px #dbe7f5
}
.chip button{all:unset;cursor:pointer;font-size:1rem;color:#6b7a9a}
.chip button:hover{color:#2d7bdb}
.arrow{margin-left:auto;border:solid #697586;border-width:0 2px 2px 0;
       padding:3px;transform:rotate(45deg);transition:.2s}
.open>.arrow{transform:rotate(-135deg)}

.dropdown{
  display:none;position:absolute;top:100%;left:0;width:100%;
  background:#fff;border:1.5px solid #2d7bdb;border-top:none;
  border-radius:0 0 9px 9px;box-shadow:0 4px 14px #0001;z-index:99
}
.dropdown.open{display:block;animation:slide .13s}
@keyframes slide{from{opacity:0;transform:translateY(-4px)}}

#city-search{
  width:100%;padding:.52rem;border:none;border-bottom:1px solid #e7ecf4;
  background:#f6faff;font-family:inherit
}
#city-options{max-height:220px;overflow:auto;font-size:15px}
.option{display:flex;align-items:center;min-height:2rem;padding:.24rem .7rem;cursor:pointer}
.option:hover{background:#eaf2fd}
.option label{display:flex;align-items:center;gap:.5rem;width:100%}
.option input{margin:0;width:18px;height:18px;accent-color:#2d7bdb}

.chkWrap label {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  line-height: 1.2;
  font-weight: 500;
  color: var(--txt);
}

.chkWrap input[type="checkbox"] {
  width: 17px;
  height: 17px;
  accent-color: var(--b);  /* чтобы цвет галочки совпадал */
  margin: 0;
}

input[type="checkbox"] {
  width: 17px;
  height: 17px;
  margin: 0;
  accent-color: var(--b);
  vertical-align: middle;
}

.page-wrapper {
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 2rem;
}

.preloader {
  position: fixed;
  top: 0; left: 0; width: 100vw; height: 100vh;
  background: rgba(255,255,255,0.74);
  backdrop-filter: blur(7px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  visibility: hidden;
  opacity: 0;
  transition: opacity 1s cubic-bezier(.7,0,.45,1.05), visibility 1s;
 
}
.preloader.visible {
  visibility: visible;
  opacity: 1;
}
.loader {
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  border-radius: 50%;
  box-shadow: 0 6px 32px 0 rgba(120,130,160,0.10);
  padding: 10px;
  animation: preloader-pop 0.7s cubic-bezier(.6,-0.3,.45,1.4);
}
@keyframes preloader-pop {
  0% { transform: scale(0.7); opacity: 0; }
  60% { transform: scale(1.1);}
  100% { transform: scale(1); opacity: 1;}
}