/* ============================================================
   search.css — карточка поиска (services2.php)
   Все селекторы скоуплены под .sg, переменные объявлены на .sg,
   глобальных правил нет — конфликтов с bootstra/bootstrb нет.
   ============================================================ */

/* ── Переменные и базовая обвязка карточки ──────────────────── */
.sg{
  /* палитра виджета */
  --accent:#3AAEE4;
  --accent-2:#2E86D6;
  --accent-soft:rgba(58,174,228,.15);
  --danger:#E5484D;
  --field:#F4F7FB;
  --line:#E3EAF3;
  --line-2:#D7DFEA;
  --text:#243B53;
  --muted:#5A6B80;
  --faint:#9AA7B8;

  position:relative;
  width:910px; max-width:100%;
  margin:0 0 20px;
  background:#fff;
  border:1px solid var(--line);
  border-radius:20px;
  padding:22px;
  box-sizing:border-box;
  box-shadow:
    0 24px 48px -16px rgba(23,52,84,.16),
    0 4px 12px rgba(23,52,84,.05);
}
/* единый box-sizing внутри карточки */
.sg,
.sg *,
.sg *::before,
.sg *::after{ box-sizing:border-box; }

/* фирменная градиентная полоса сверху */
.sg::before{
  content:""; position:absolute; top:-1px; left:26px; right:26px; height:3px;
  border-radius:999px;
  background:linear-gradient(90deg, transparent, #3AAEE4 22%, #7C8CF8 70%, transparent);
}

/* скопированные глобальные правила — только внутри .sg */
.sg ::selection{ background:rgba(58,174,228,.25); }
.sg button{ font-family:inherit; }
.sg button:focus-visible{
  outline:2px solid var(--accent); outline-offset:2px; border-radius:10px;
}

/* ── Ряд 1 · Поле + кнопка ──────────────────────────────────── */
.sg .sg-top{ display:flex; gap:12px; }

.sg .sg-field{ position:relative; flex:1; min-width:0; }

.sg .sg-field__icon{
  position:absolute; left:18px; top:50%; translate:0 -50%;
  width:20px; height:20px; color:var(--faint);
  pointer-events:none; transition:color .15s;
}

/* Защита от глобальных input-стилей bootstra:
   селектор .sg .sg-field__input (0,2,0) перебивает input[type="text"] (0,1,1) */
.sg .sg-field__input{
  -webkit-appearance:none; appearance:none;
  width:100%; height:58px; max-width:none; margin:0;
  border:1.5px solid var(--line-2); border-radius:14px;
  background:var(--field);
  box-shadow:none;
  padding:0 56px 0 50px;
  font-family:inherit; font-size:15px; font-weight:600; color:var(--text);
  line-height:normal; vertical-align:middle;
  outline:none;
  transition:border-color .15s, box-shadow .15s, background .15s;
}
.sg .sg-field__input::placeholder{ color:#9AA7B8; font-weight:400; opacity:1; }
.sg .sg-field__input:hover{ border-color:#C2CEDD; }
.sg .sg-field__input:focus{
  border-color:var(--accent); background:#fff;
  box-shadow:0 0 0 4px var(--accent-soft);
}
.sg .sg-field:focus-within .sg-field__icon{ color:var(--accent); }

/* иконка истории внутри инпута */
.sg .sg-field__history{
  -webkit-appearance:none; appearance:none;
  position:absolute; right:9px; top:50%; translate:0 -50%;
  width:40px; height:40px; border:none; border-radius:10px;
  background:transparent; color:var(--faint);
  box-shadow:none;
  display:grid; place-items:center; cursor:pointer;
  transition:background .15s, color .15s;
}
.sg .sg-field__history svg{ width:20px; height:20px; }
.sg .sg-field__history:hover,
.sg .sg-field__history.is-on{ background:var(--accent-soft); color:var(--accent); }

.sg .sg-submit{
  -webkit-appearance:none; appearance:none;
  flex:none; height:58px; padding:0 30px; margin:0;
  border:none; border-radius:14px; cursor:pointer;
  box-shadow:
    0 10px 22px -8px rgba(47,127,216,.65),
    inset 0 1px 0 rgba(255,255,255,.25);
  display:inline-flex; align-items:center; gap:9px;
  color:#fff; font-size:15.5px; font-weight:700; letter-spacing:.01em; line-height:normal;
  background:linear-gradient(135deg,#3AAEE4,#2E86D6 58%,#2F7FD8);
  transition:transform .15s, box-shadow .15s, filter .15s;
}
.sg .sg-submit svg{ width:18px; height:18px; }
.sg .sg-submit:hover{
  transform:translateY(-1px); filter:brightness(1.05);
  box-shadow:0 14px 28px -8px rgba(47,127,216,.7), inset 0 1px 0 rgba(255,255,255,.25);
}
.sg .sg-submit:active{ transform:translateY(0) scale(.985); }

/* ── Ряд 2 · Фильтры ────────────────────────────────────────── */
.sg .sg-filters{
  display:grid; grid-template-columns:repeat(3,1fr);
  gap:12px; margin-top:14px;
}

.sg .sg-dd{ position:relative; min-width:0; }

.sg .sg-dd__btn{
  -webkit-appearance:none; appearance:none;
  width:100%; height:58px; margin:0;
  padding:0 13px 0 15px;
  display:flex; align-items:center; justify-content:space-between; gap:8px;
  background:var(--field);
  border:1.5px solid var(--line-2); border-radius:13px;
  box-shadow:none;
  cursor:pointer; text-align:left;
  font-size:inherit;
  transition:border-color .15s, background .15s, box-shadow .15s;
}
.sg .sg-dd__btn:hover{ border-color:#C2CEDD; background:#F1F5FA; }
.sg .sg-dd.open .sg-dd__btn{
  border-color:var(--accent); background:#fff;
  box-shadow:0 0 0 4px var(--accent-soft);
}

.sg .sg-dd__text{ display:flex; flex-direction:column; gap:3px; min-width:0; }
.sg .sg-dd__label{
  font-size:10.5px; font-weight:700; line-height:1;
  letter-spacing:.09em; text-transform:uppercase; color:var(--faint);
}
.sg .sg-dd__val{
  display:flex; align-items:center; gap:8px;
  font-size:14px; font-weight:700; color:var(--text); min-width:0;
}
.sg .sg-dd__val-in{
  min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.sg .sg-dd__caret{
  width:16px; height:16px; flex:none; color:var(--faint);
  transition:transform .18s, color .18s;
}
.sg .sg-dd.open .sg-dd__caret{ transform:rotate(180deg); color:var(--accent); }

/* выпадающая панель */
.sg .sg-dd__panel{
  position:absolute; z-index:70;
  top:calc(100% + 8px); left:0; right:0;
  background:#fff;
  border:1px solid var(--line); border-radius:14px;
  padding:6px;
  box-shadow:
    0 20px 44px -12px rgba(23,52,84,.22),
    0 4px 12px rgba(23,52,84,.07);
  opacity:0; visibility:hidden;
  transform:translateY(6px) scale(.985);
  transition:opacity .16s, transform .16s, visibility .16s;
}
.sg .sg-dd.open .sg-dd__panel{ opacity:1; visibility:visible; transform:none; }

/* Панель не должна растягивать страницу: свой скролл с тонким ползунком
   (как у локации/истории). Локация не тронута — у неё список внутри панели. */
.sg .sg-dd__panel:not(.sg-dd__panel--loc){
  max-height:296px; overflow-y:auto;
  overscroll-behavior:contain;
  scrollbar-width:thin; scrollbar-color:#D7DFEA transparent;
}

/* опции */
.sg .sg-opt{
  -webkit-appearance:none; appearance:none;
  display:flex; align-items:center; gap:10px; width:100%; margin:0;
  padding:10px 11px; border:none; border-radius:9px;
  background:none; box-shadow:none; cursor:pointer; text-align:left;
  font-size:13.5px; font-weight:600; color:var(--muted); line-height:normal;
  transition:background .12s, color .12s;
}
.sg .sg-opt:hover{ background:#F0F7FC; color:var(--text); }
.sg .sg-opt.is-sel{ color:var(--accent-2); }

.sg .sg-opt__icon{ width:17px; height:17px; flex:none; color:var(--faint); }
.sg .sg-opt:hover .sg-opt__icon{ color:var(--accent); }
.sg .sg-opt__name{
  flex:1; min-width:0;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.sg .sg-opt__check{ width:15px; height:15px; flex:none; opacity:0; color:var(--accent); }
.sg .sg-opt__check svg{ width:15px; height:15px; display:block; }
.sg .sg-opt.is-sel .sg-opt__check{ opacity:1; }

.sg .sg-opt__badge{
  flex:none; min-width:37px; text-align:center;
  padding:3.5px 6px; border-radius:6px;
  font-size:9.5px; font-weight:800; letter-spacing:.04em;
  color:var(--c);
  background:color-mix(in srgb, var(--c) 13%, #fff);
  box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--c) 30%, #fff);
}

/* ── Локация ────────────────────────────────────────────────── */
.sg .sg-loc__search{ position:relative; display:block; margin:3px 3px 7px; }
.sg .sg-loc__search svg{
  position:absolute; left:11px; top:50%; translate:0 -50%;
  width:15px; height:15px; color:var(--faint); pointer-events:none;
}
/* Защита от глобальных input-стилей bootstra */
.sg .sg-loc__search input{
  -webkit-appearance:none; appearance:none;
  width:100%; height:38px; max-width:none; margin:0;
  border:1.5px solid var(--line); border-radius:10px;
  background:var(--field); outline:none;
  box-shadow:none;
  padding:0 10px 0 33px;
  font-family:inherit; font-size:13px; color:var(--text); line-height:normal;
  transition:border-color .15s, box-shadow .15s, background .15s;
}
.sg .sg-loc__search input::placeholder{ color:#9AA7B8; opacity:1; }
.sg .sg-loc__search input:focus{
  border-color:var(--accent); background:#fff;
  box-shadow:0 0 0 3px var(--accent-soft);
}
.sg .sg-loc__list{
  max-height:262px; overflow:auto;
  padding:0 3px 3px;
}
.sg .sg-loc__empty{
  display:none; padding:20px 10px 16px; text-align:center;
  font-size:13px; color:var(--faint);
}

/* флаги (рендерятся через Tpl/js/search.js) */
.sg .flag{
  width:22px; height:15px; flex:none;
  border-radius:3.5px; overflow:hidden; display:block;
  box-shadow:inset 0 0 0 1px rgba(20,40,80,.14);
}
.sg .flag svg{ width:100%; height:100%; display:block; }
.sg .sg-dd__val .flag{ width:19px; height:13px; }
.sg .flag--globe{
  display:grid; place-items:center;
  box-shadow:none; color:var(--accent);
}
.sg .flag--globe svg{ width:16px; height:16px; }
.sg .sg-dd__val .flag--globe svg{ width:15px; height:15px; }

/* ── Разделитель ────────────────────────────────────────────── */
.sg .sg-divider{
  height:1px; margin:18px 2px 16px;
  background:linear-gradient(90deg, transparent, var(--line-2) 12%, var(--line-2) 88%, transparent);
}

/* ── Ряд 3 · Модификации ────────────────────────────────────── */
.sg .sg-mods{ display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
.sg .sg-mods__label{
  font-size:10.5px; font-weight:700;
  letter-spacing:.09em; text-transform:uppercase; color:var(--faint);
}
.sg .sg-mods__chips{ display:flex; gap:8px; flex-wrap:wrap; }

.sg .sg-chip{
  -webkit-appearance:none; appearance:none;
  height:35px; padding:0 17px; margin:0;
  border:1.5px solid var(--line-2); border-radius:999px;
  background:#fff; color:var(--muted); cursor:pointer;
  box-shadow:none;
  font-size:12.5px; font-weight:700; letter-spacing:.02em; line-height:normal;
  transition:border-color .16s, color .16s, background .16s, box-shadow .16s, transform .16s;
}
.sg .sg-chip:hover{
  border-color:var(--accent); color:var(--accent-2);
  background:var(--accent-soft);
}
.sg .sg-chip:active{ transform:scale(.96); }
.sg .sg-chip.is-active{
  border-color:transparent; color:#fff;
  background:linear-gradient(135deg,#3AAEE4,#2E86D6);
  box-shadow:0 6px 14px -5px rgba(58,174,228,.65);
}

/* ── История поиска ─────────────────────────────────────────── */
.sg .sg-hist{
  position:absolute; z-index:80;
  top:calc(100% + 8px); left:0; right:0;
  background:#fff;
  border:1px solid var(--line); border-radius:14px;
  overflow:hidden;
  box-shadow:
    0 24px 48px -12px rgba(23,52,84,.25),
    0 4px 12px rgba(23,52,84,.08);
  opacity:0; visibility:hidden;
  transform:translateY(6px) scale(.985);
  transition:opacity .16s, transform .16s, visibility .16s;
}
.sg .sg-hist.open{ opacity:1; visibility:visible; transform:none; }

.sg .sg-hist__head{
  display:flex; align-items:center; justify-content:space-between;
  padding:11px 12px 10px 15px;
  border-bottom:1px solid var(--line);
}
.sg .sg-hist__head > span{
  font-size:11px; font-weight:800;
  letter-spacing:.08em; text-transform:uppercase; color:var(--muted);
}
.sg .sg-hist__head button{
  -webkit-appearance:none; appearance:none;
  display:flex; align-items:center; gap:5px;
  border:none; background:none; border-radius:7px;
  padding:5px 9px; cursor:pointer; box-shadow:none;
  font-size:12px; font-weight:700; color:var(--faint); line-height:normal;
  transition:color .13s, background .13s;
}
.sg .sg-hist__head button svg{ width:13px; height:13px; }
.sg .sg-hist__head button:hover{ color:var(--danger); background:#FEF1F1; }

.sg .sg-hist__list{ max-height:252px; overflow:auto; padding:6px; }

.sg .sg-hist__item{
  -webkit-appearance:none; appearance:none;
  position:relative; width:100%; margin:0;
  display:flex; align-items:center; gap:10px;
  padding:10px 38px 10px 12px;
  border:none; border-radius:9px; background:none; box-shadow:none; cursor:pointer;
  text-align:left; font-size:inherit; line-height:normal;
  transition:background .12s;
}
.sg .sg-hist__item:hover{ background:#F0F7FC; }
.sg .sg-hist__q{
  -webkit-appearance:none; appearance:none;
  display:flex; align-items:center; gap:10px;
  flex:1; min-width:0;
  margin:0; padding:0;
  border:none; background:none; box-shadow:none;
  cursor:pointer; text-align:left;
  font:inherit; color:inherit;
}
.sg .sg-hist__q svg{ width:15px; height:15px; flex:none; }
.sg .sg-hist__ic{ width:15px; height:15px; flex:none; color:var(--faint); display:block; }
.sg .sg-hist__ic svg{ width:15px; height:15px; display:block; }
.sg .sg-hist__text{
  flex:1; min-width:0;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  font-size:13.5px; font-weight:600; color:var(--text);
}
.sg .sg-hist__del{
  -webkit-appearance:none; appearance:none;
  position:absolute; right:7px; top:50%; translate:0 -50%;
  width:26px; height:26px; border:none; border-radius:8px;
  background:transparent; color:#B6C1CE;
  box-shadow:none;
  display:grid; place-items:center; cursor:pointer;
  opacity:0; transition:opacity .13s, background .13s, color .13s;
}
.sg .sg-hist__del svg{ width:13px; height:13px; }
.sg .sg-hist__item:hover .sg-hist__del{ opacity:1; }
.sg .sg-hist__del:hover{ background:#FEF1F1; color:var(--danger); }

.sg .sg-hist__empty{ padding:26px 16px 24px; text-align:center; }
.sg .sg-hist__empty svg{
  width:30px; height:30px; color:#C6D2E0; margin-bottom:9px;
}
.sg .sg-hist__empty p{ font-size:13.5px; font-weight:700; color:var(--muted); margin-bottom:4px; }
.sg .sg-hist__empty span{ font-size:12px; color:var(--faint); line-height:1.5; display:block; }

/* ── Скроллбары ─────────────────────────────────────────────── */
.sg .sg-loc__list::-webkit-scrollbar,
.sg .sg-hist__list::-webkit-scrollbar,
.sg .sg-dd__panel:not(.sg-dd__panel--loc)::-webkit-scrollbar{ width:9px; }
.sg .sg-loc__list::-webkit-scrollbar-thumb,
.sg .sg-hist__list::-webkit-scrollbar-thumb,
.sg .sg-dd__panel:not(.sg-dd__panel--loc)::-webkit-scrollbar-thumb{
  background:#D7DFEA; border-radius:99px;
  border:3px solid #fff;
}
.sg .sg-loc__list::-webkit-scrollbar-thumb:hover,
.sg .sg-hist__list::-webkit-scrollbar-thumb:hover,
.sg .sg-dd__panel:not(.sg-dd__panel--loc)::-webkit-scrollbar-thumb:hover{ background:#BFCDDC; }

/* ── Адаптив (базовая ширина — 910px) ───────────────────────── */
@media (max-width:920px){
  .sg .sg-filters{ grid-template-columns:1fr 1fr; }
  .sg .sg-dd--loc{ grid-column:1 / -1; }
}
@media (max-width:640px){
  .sg{ padding:16px; border-radius:16px; }
  .sg .sg-top{ flex-direction:column; }
  .sg .sg-submit{ width:100%; justify-content:center; }
  .sg .sg-filters{ grid-template-columns:1fr; }
  .sg .sg-dd--loc{ grid-column:auto; }
  .sg .sg-mods__label{ width:100%; }
}

@media (prefers-reduced-motion:reduce){
  .sg *,
  .sg *::before,
  .sg *::after{ animation:none!important; transition:none!important; }
}