/*
 * Поисковый блок раздела «Транспорт» — Клондайк Сервис.
 * Лёгкий светлый блок на ширину контейнера страницы (= ширина хедера): вкладки сверху, белая панель с полями,
 * быстрые флажки, действия и графитовая кнопка «Показать N объявлений».
 * Весь код изолирован корневым классом .tr-search; на другие страницы не влияет.
 * Брейкпоинты: десктоп ≥1200, планшет 768–1199, мобильный <768.
 */
.tr-search{
  --tr-text:#222733;
  --tr-muted:#717782;
  --tr-faint:#a3a8b1;
  --tr-line:#e3e6eb;
  --tr-line-strong:#cfd4dc;
  --tr-surface:#fff;
  --tr-bg:#f5f6f8;
  --tr-soft:#f1f3f6;
  --tr-dark:#303745;
  --tr-dark-hover:#222835;
  --tr-ring:rgba(48,55,69,.16);
  --tr-ctl-h:38px;
  width:100%;
  margin:14px 0 22px;
  font-family:Montserrat,Arial,sans-serif;
  color:var(--tr-text);
  position:relative;
}
.tr-search *,.tr-search *::before,.tr-search *::after{box-sizing:border-box}
.tr-search [hidden]{display:none!important}
.tr-search :where(button,input,select){font-family:inherit;color:inherit}
.tr-search svg{flex:0 0 auto;display:block}

.tr-search__shell{width:100%;background:var(--tr-bg);border:1px solid #eceef2;border-radius:16px;padding:12px 12px 12px}

/* ---------- Вкладки ---------- */
.tr-tabs{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;padding:0 2px 9px;margin:0 -2px}
.tr-tabs::-webkit-scrollbar{display:none}
.tr-tab{flex:0 0 auto;height:32px;padding:0 15px;border:1px solid transparent;border-radius:999px;background:var(--tr-surface);color:var(--tr-text);font-size:12px;font-weight:600;line-height:1;white-space:nowrap;cursor:pointer;transition:background .15s,color .15s,border-color .15s}
.tr-tab:hover{border-color:var(--tr-line-strong)}
.tr-tab.is-active{background:var(--tr-dark);color:#fff}
.tr-tab:focus-visible{outline:2px solid var(--tr-dark);outline-offset:2px}

/* ---------- Панель с полями ---------- */
.tr-panel{background:var(--tr-surface);border:1px solid #eceef2;border-radius:12px;padding:10px 12px 10px}
.tr-grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:8px 10px;align-items:start}
.tr-field{position:relative;min-width:0}
.tr-label{display:block;margin:0 0 4px 1px;font-size:11px;font-weight:600;line-height:1.2;color:var(--tr-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

.tr-control{width:100%;height:var(--tr-ctl-h);display:flex;align-items:center;gap:8px;padding:0 12px;background:var(--tr-surface);border:1px solid var(--tr-line);border-radius:10px;font-size:13px;font-weight:500;line-height:1;text-align:left;cursor:pointer;transition:border-color .15s,box-shadow .15s,background .15s}
.tr-control:hover{border-color:var(--tr-line-strong)}
.tr-control:focus-visible,.tr-control[aria-expanded="true"]{outline:0;border-color:var(--tr-dark);box-shadow:0 0 0 3px var(--tr-ring)}
.tr-control__value{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--tr-faint)}
.tr-control.has-value .tr-control__value{color:var(--tr-text);font-weight:600}
.tr-control__chevron{flex:0 0 auto;display:grid;place-items:center;color:var(--tr-muted);transition:transform .15s}
.tr-control[aria-expanded="true"] .tr-control__chevron{transform:rotate(180deg)}
.tr-control:disabled{cursor:not-allowed;background:var(--tr-soft);opacity:.8}
.tr-control--input{cursor:text;padding:0}
.tr-control--input:focus-within{border-color:var(--tr-dark);box-shadow:0 0 0 3px var(--tr-ring)}
.tr-control--input input{width:100%;height:100%;padding:0 12px;border:0;background:transparent;font-size:13px;font-weight:600;outline:0}
.tr-control--input input::placeholder{color:var(--tr-faint);font-weight:500}

/* диапазон «от / до» */
.tr-range{display:flex;height:var(--tr-ctl-h);background:var(--tr-surface);border:1px solid var(--tr-line);border-radius:10px;overflow:hidden;transition:border-color .15s,box-shadow .15s}
.tr-range:hover{border-color:var(--tr-line-strong)}
.tr-range:focus-within{border-color:var(--tr-dark);box-shadow:0 0 0 3px var(--tr-ring)}
.tr-range input{flex:1 1 50%;min-width:0;width:50%;height:100%;padding:0 10px;border:0;background:transparent;font-size:13px;font-weight:600;outline:0}
.tr-range input+input{border-left:1px solid var(--tr-line)}
.tr-range input::placeholder{color:var(--tr-faint);font-weight:500}
.tr-range.is-invalid{border-color:#c9503f}

/* ---------- Выпадающий список ---------- */
.tr-pop{position:absolute;z-index:80;top:calc(100% + 6px);left:0;width:max(100%,260px);max-width:min(340px,calc(100vw - 24px));background:var(--tr-surface);border:1px solid var(--tr-line);border-radius:12px;box-shadow:0 16px 38px rgba(22,28,40,.16);overflow:hidden;animation:tr-pop-in .14s ease-out}
.tr-pop--right{left:auto;right:0}
@keyframes tr-pop-in{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
.tr-pop__search{padding:8px 8px 4px}
.tr-pop__search input{width:100%;height:36px;padding:0 12px;border:1px solid var(--tr-line);border-radius:9px;background:var(--tr-bg);font-size:13px;font-weight:500;outline:0}
.tr-pop__search input:focus{border-color:var(--tr-dark);background:#fff}
.tr-pop__list{list-style:none;margin:0;padding:6px;max-height:272px;overflow:auto;overscroll-behavior:contain}
.tr-opt{display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:36px;padding:0 10px;border-radius:8px;font-size:13px;font-weight:500;line-height:1.25;cursor:pointer;color:var(--tr-text)}
.tr-opt.is-active{background:var(--tr-soft)}
.tr-opt.is-selected{font-weight:700}
.tr-opt.is-selected::after{content:"";flex:0 0 auto;width:14px;height:14px;background:no-repeat center/contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23303745' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7.5'/%3E%3C/svg%3E")}
.tr-opt--any{color:var(--tr-muted)}
.tr-pop__empty{padding:14px 12px;font-size:12px;color:var(--tr-muted);text-align:center}
.tr-backdrop{position:fixed;inset:0;z-index:1190;background:rgba(20,24,32,.38)}

/* ---------- Быстрые флажки ---------- */
.tr-quick{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:10px}
.tr-quick__spacer{flex:1 1 auto}
.tr-chip{position:relative;display:inline-flex;cursor:pointer}
.tr-chip input{position:absolute;opacity:0;pointer-events:none;inset:0}
.tr-chip__body{display:inline-flex;align-items:center;gap:7px;height:36px;padding:0 13px;border:1px solid var(--tr-line);border-radius:10px;background:var(--tr-surface);font-size:12.5px;font-weight:600;line-height:1;color:var(--tr-text);transition:background .15s,border-color .15s,color .15s}
.tr-chip__body svg{width:17px;height:17px;color:var(--tr-muted)}
.tr-chip:hover .tr-chip__body{border-color:var(--tr-line-strong)}
.tr-chip input:checked+.tr-chip__body{background:var(--tr-dark);border-color:var(--tr-dark);color:#fff}
.tr-chip input:checked+.tr-chip__body svg{color:#fff}
.tr-chip input:focus-visible+.tr-chip__body,.tr-chip:focus-visible .tr-chip__body{outline:2px solid var(--tr-dark);outline-offset:2px}
button.tr-chip,a.tr-chip{padding:0;border:0;background:none;text-decoration:none;font:inherit}
/* «Сбросить», «Сохранить поиск», «Все фильтры» — тонкая цветная рамка по смыслу: красноватая, золотистая, синяя */
.tr-chip--reset .tr-chip__body{border-color:#e6b4ae}
.tr-chip--reset .tr-chip__body svg{color:#c4584b}
.tr-chip--reset:hover .tr-chip__body{border-color:#d98f86;background:#fff8f7}
.tr-chip--save .tr-chip__body{border-color:#e8cd8a}
.tr-chip--save .tr-chip__body svg{color:#c08a13}
.tr-chip--save:hover .tr-chip__body{border-color:#d9b45a;background:#fffbf1}
.tr-chip--filters .tr-chip__body{border-color:#a9bfe3}
.tr-chip--filters .tr-chip__body svg{color:#3f6db7}
.tr-chip--filters:hover .tr-chip__body{border-color:#7f9fd3;background:#f6f9ff}
.tr-chip--filters.is-active .tr-chip__body{border-color:#7f9fd3;background:#f6f9ff}
.tr-chip__badge{display:inline-grid;place-items:center;min-width:18px;height:18px;padding:0 5px;border-radius:9px;background:var(--tr-dark);color:#fff;font-size:11px;font-weight:700;line-height:1}
.tr-chip--more{display:none}

/* ---------- Действия ---------- */
.tr-submit{flex:0 0 auto;margin-left:auto;display:inline-flex;align-items:center;justify-content:center;gap:10px;min-width:270px;height:44px;padding:0 24px;border:0;border-radius:12px;background:var(--tr-dark);color:#fff;font-size:13px;font-weight:700;line-height:1;cursor:pointer;transition:background .15s}
.tr-submit:hover{background:var(--tr-dark-hover)}
.tr-submit:focus-visible{outline:2px solid var(--tr-dark);outline-offset:3px}
.tr-submit__icon svg{width:19px;height:19px}
.tr-submit.is-loading .tr-submit__text{opacity:.65}
.tr-search__live{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* текст в боковой панели «Все фильтры» */
.catalog-filter-drawer .tr-drawer-note{margin:0 0 10px;font-size:12px;line-height:1.45;color:#8b929d}

/* ---------- Планшет ---------- */
@media (max-width:1199px){
  .tr-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
  .tr-submit{min-width:240px}
}

/* ---------- Мобильный ---------- */
@media (max-width:767px){
  .tr-search{margin:10px 0 16px}
  .tr-search__shell{padding:10px;border-radius:14px}
  .tr-panel{padding:10px}
  .tr-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px 8px}
  .tr-field--range,.tr-field--select[data-tr-field="sub"]{grid-column:1/-1}
  .tr-control,.tr-range{height:44px}
  .tr-field.is-secondary{display:none}
  .tr-search.is-expanded .tr-field.is-secondary{display:block}
  .tr-chip--more{display:inline-flex}
  .tr-quick{margin-top:10px;gap:6px}
  .tr-quick__spacer{display:none}
  .tr-chip__body{height:40px;padding:0 12px}
  .tr-submit{order:20;flex:1 1 100%;margin-left:0;min-width:0;height:48px;margin-top:4px}
  /* списки — нижняя шторка */
  .tr-pop{position:fixed;z-index:1200;left:0;right:0;top:auto;bottom:0;width:auto;max-width:none;border:0;border-radius:18px 18px 0 0;box-shadow:0 -10px 40px rgba(22,28,40,.22);animation:tr-sheet-in .22s ease-out}
  .tr-pop--right{left:0;right:0}
  .tr-pop__list{max-height:min(52vh,420px);padding:6px 10px 14px}
  .tr-pop__search{padding:14px 12px 4px}
  .tr-opt{min-height:46px;font-size:14px}
  @keyframes tr-sheet-in{from{transform:translateY(24px);opacity:.6}to{transform:none;opacity:1}}
}
@media (prefers-reduced-motion:reduce){
  .tr-pop{animation:none}
  .tr-control__chevron,.tr-tab,.tr-chip__body{transition:none}
}

/* ---- Пилюли быстрого перехода между разделами транспорта (справа от заголовка) ---- */
.category-page__heading:has(.tr-switch){gap:20px;align-items:flex-end}
.category-page__heading:has(.tr-switch)>div:first-child{flex:0 0 auto}
.tr-switch{flex:1 1 auto;min-width:0;display:flex;flex-wrap:wrap;align-items:center;gap:8px;padding-bottom:6px;font-family:Montserrat,system-ui,sans-serif}
.tr-switch__pill{display:inline-flex;align-items:center;height:30px;padding:0 14px;border:1px solid #e3e6eb;border-radius:999px;background:#fff;color:#717782;font-size:12.5px;font-weight:600;line-height:1;text-decoration:none;white-space:nowrap;transition:color .15s,border-color .15s,background-color .15s}
.tr-switch__pill:hover{color:#222733;border-color:#cfd4dc;background:#f5f6f8}
.tr-switch__pill:focus-visible{outline:2px solid rgba(48,55,69,.35);outline-offset:2px}
.category-page__heading:has(.tr-switch) .category-page__count{flex:0 0 auto;padding-bottom:8px}
@media (max-width:991px){
  .category-page__heading:has(.tr-switch){flex-wrap:wrap}
  .tr-switch{order:3;flex:1 1 100%;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;padding-bottom:2px;margin:-6px 0 0;-webkit-overflow-scrolling:touch}
  .tr-switch::-webkit-scrollbar{display:none}
  .category-page__heading:has(.tr-switch) .category-page__count{margin-left:auto}
}