/* Строка поиска над выдачей (search-bar.js) — по b2b-fbt:
   widgets/trip-search-hero/ui/desktop/TripSearchHeroCompact.vue + shared/ui/data-display/search-compact-bar/UiSearchCompactBar.vue */

/* TripSearchHeroCompact: фото услуги с затемнением, скругление снизу 40, воздух 32 сверху и снизу */
.trip-search-hero-compact { position: relative; z-index: 0; display: flow-root; overflow: visible; margin-top: 0; padding-block: 32px; border-radius: 0 0 40px 40px }
.trip-search-hero-compact::before { content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none; border-radius: inherit;
  background-color: #1a1b1d; background-image: linear-gradient(0deg, rgba(26, 27, 29, .25), rgba(26, 27, 29, .25)), var(--trip-search-hero-compact-image);
  background-position: center; background-size: cover; background-repeat: no-repeat }
.trip-search-hero-compact__inner { position: relative; padding-inline: 32px } /* как в b2b-fbt: строка на 32 px от краёв фото */
.trip-search-hero-compact.open { z-index: 30 }

/* UiSearchCompactBar: стекло 10 % поверх фото, иконка услуги, «маршрут» по центру, «даты | сотрудники», круглая «изменить» */
.ui-search-compact-bar { display: flex; align-items: center; gap: 4px; padding: 8px; border-radius: 24px; background: rgba(255, 255, 255, .1); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); color: #fff }
.ui-search-compact-bar__mode { width: 44px; height: 44px; flex: none; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: rgba(255, 255, 255, .16) }
.ui-search-compact-bar__mode .ico { color: #fff }
.ui-search-compact-bar__secondary { display: flex; align-items: center; gap: 4px; min-width: 0 }
.ui-search-compact-bar__chip { padding: 10px 16px; border: 0; border-radius: 9999px; background: none; color: #fff; font: inherit; font-size: 15px; font-weight: 600; line-height: 20px; white-space: nowrap; cursor: pointer; transition: background-color .15s }
.ui-search-compact-bar__chip--primary { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; text-align: center }
.ui-search-compact-bar__chip:hover { background-color: rgba(255, 255, 255, .12) }
.ui-search-compact-bar__chip:focus-visible, .ui-search-compact-bar__find:focus-visible { outline: 2px solid #fff; outline-offset: 2px }
.ui-search-compact-bar__divider { width: 1px; height: 22px; flex: none; background-color: rgba(255, 255, 255, .35) }
.ui-search-compact-bar__find { width: 44px; height: 44px; flex: none; border: 0; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: #4ebc73; cursor: pointer; transition: background-color .15s }
.ui-search-compact-bar__find:hover { background: #43a766 }
@media (max-width: 1120px) {
  .trip-search-hero-compact { padding-block: 20px }
  .ui-search-compact-bar__chip { padding: 8px 12px; font-size: 14px }
}
/* мобайл: две строки — направление крупно сверху, «даты | сотрудники» ниже, кнопка справа во всю высоту */
@media (max-width: 767px) {
  .trip-search-hero-compact { padding-block: 12px; border-radius: 0 0 24px 24px }
  .trip-search-hero-compact__inner { padding-inline: 12px }
  .ui-search-compact-bar { display: grid; grid-template-columns: 1fr auto; grid-template-areas: 'primary find' 'secondary find'; column-gap: 8px; row-gap: 2px }
  .ui-search-compact-bar__mode { display: none }
  .ui-search-compact-bar__chip--primary { grid-area: primary; justify-self: start; max-width: 100%; padding: 6px 10px; font-size: 16px; text-align: left }
  .ui-search-compact-bar__secondary { grid-area: secondary; flex-wrap: wrap }
  .ui-search-compact-bar__secondary .ui-search-compact-bar__chip { padding: 4px 10px; font-size: 13px; font-weight: 500; color: rgba(255, 255, 255, .85) }
  .ui-search-compact-bar__divider { height: 14px }
  .ui-search-compact-bar__find { grid-area: find }
}

/* Раскрытый поиск: вместо строки — панель поверх выдачи (вкладки, поля с подписями, «Найти») */
.sr-panel[hidden] { display: none }
.sr-panel { position: absolute; left: 0; right: 0; top: -8px; z-index: 31; padding: 24px 28px 28px; border-radius: 32px; background: rgba(44, 52, 48, .62); -webkit-backdrop-filter: blur(28px); backdrop-filter: blur(28px); box-shadow: 0 24px 64px rgba(10, 14, 12, .28) }
.trip-search-hero-compact__inner > .sr-panel { left: 16px; right: 16px }
.sr-panel .sr-edit { margin: 0; display: flex; flex-direction: column; gap: 20px }
.sr-panel .sr-tabs { flex-wrap: wrap; gap: 8px }
.sr-panel .tab { padding: 10px 14px; font-size: 14px }
.sr-panel .fld.lbl { flex-direction: column; align-items: flex-start; justify-content: center; gap: 0; padding-right: 40px }
.sr-panel .fld.lbl .fl-l { font-size: 12px; line-height: 16px; color: var(--text-2); white-space: nowrap }
.sr-panel .fld.lbl:has(input:placeholder-shown) .fl-l { display: none }
.sr-panel .fld.lbl input { font-size: 14px; line-height: 20px; height: 20px }
.sr-panel .fld.lbl > .ico { position: absolute; right: 16px; top: 50%; transform: translateY(-50%) }
@media (max-width: 767px) {
  .trip-search-hero-compact__inner > .sr-panel { left: 0; right: 0; top: -4px; padding: 16px; border-radius: 24px }
  .sr-panel .sr-tabs { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none }
  .sr-panel .find { width: 100% }
}
@media (max-width: 767px) {
  .ui-search-compact-bar__secondary { flex-wrap: nowrap; min-width: 0 }
  .ui-search-compact-bar__secondary .ui-search-compact-bar__chip { min-width: 0; overflow: hidden; text-overflow: ellipsis }
}