/* Общий стиль слайд-фильтров для всех страниц */

:root {
  --flt-bg: #ffffff;
  --flt-border: #e6e9ef;
  --flt-shadow: 0 12px 28px rgba(0,0,0,0.12);
  --flt-title: #0f172a;
  --flt-muted: #556274;
  --brand: #2a8bf2;
  --brand-2: #10b981;
}

/* Контейнер фильтра с "ручкой" */
#filterGroup {
  position: fixed;
  left: 0;
  top: 160px;
  z-index: 1100;
  display: flex;
  align-items: center;
  /* Оставляем «ручку» видимой при закрытом состоянии */
  transform: translateX(-100%);
  transition: transform .25s ease;
}
#filterGroup.open {
  transform: translateX(0);
}

/* Кнопка-ручка */
#filterGroup .filter-handle-btn {
  height: 56px;
  width: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--flt-border);
  border-left: 0;
  background: #fff;
  color: #1f2937;
  border-radius: 0 12px 12px 0;
  box-shadow: 0 8px 18px rgba(0,0,0,0.1);
  cursor: pointer;
  transition: transform .12s ease, box-shadow .2s ease, background .2s ease;
}
#filterGroup .filter-handle-btn:hover {
  background: #f7fafc;
  transform: translateY(-1px);
}
#filterGroup .filter-handle-btn svg {
  width: 22px; height: 22px; fill: currentColor;
}

/* Само окно фильтра */
#filterGroup #modalFilter {
  width: 360px;
  max-width: 86vw;
  max-height: 78vh;
  overflow: auto;
  background: var(--flt-bg);
  border: 1px solid var(--flt-border);
  border-radius: 14px;
  box-shadow: var(--flt-shadow);
  padding: 14px 14px 12px;
  margin-left: 6px;
}

/* Заголовок */
#filterGroup #modalFilter > h3 {
  margin: 0 0 8px 2px;
  font-size: 18px;
  color: var(--flt-title);
}

/* Секции details */
#filterGroup details {
  border: 1px solid #edf0f4;
  border-radius: 10px;
  padding: 6px 8px;
  background: #fbfdff;
  margin: 8px 0;
}
#filterGroup summary {
  list-style: none;
  cursor: pointer;
  font-weight: 600;
  color: #1f2a3a;
  display: flex;
  align-items: center;
  gap: 6px;
}
#filterGroup summary::-webkit-details-marker { display: none; }
#filterGroup summary::before {
  content: "▸";
  display: inline-block;
  transform: translateY(-1px);
  color: #64748b;
}
#filterGroup details[open] summary::before {
  content: "▾";
}

/* Контейнеры списков чекбоксов */
#filterGroup details > div {
  margin-top: 6px;
  display: grid;
  gap: 6px;
}
#filterGroup label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #213041;
  font-size: 14px;
}
#filterGroup input[type="checkbox"] {
  width: 16px; height: 16px;
  accent-color: var(--brand);
}

/* Стиль для вибору року */
#filterGroup select#yearSelect,
#filterGroup .year-selector-filter select {
  width: 100%;
  padding: 8px 12px;
  border: 1px solid #d1d5db;
  border-radius: 8px;
  background: #ffffff;
  color: #1f2937;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

#filterGroup select#yearSelect:hover,
#filterGroup .year-selector-filter select:hover {
  border-color: var(--brand);
}

#filterGroup select#yearSelect:focus,
#filterGroup .year-selector-filter select:focus {
  outline: none;
  border-color: var(--brand);
  box-shadow: 0 0 0 3px rgba(42, 139, 242, 0.1);
}

/* Кнопки */
#filterGroup .filter-buttons {
  display: flex;
  gap: 8px;
  align-items: center;
  justify-content: flex-end;
  margin-top: 10px;
}
#filterGroup .filter-buttons .btn-signup {
  border-radius: 10px !important;
  padding: 8px 12px !important;
  border: 1px solid #cfe0ff !important;
  background: #eef6ff !important;
  color: #0f1e36 !important;
  font-weight: 700;
}
#filterGroup #filterApply.btn-signup {
  background: linear-gradient(120deg, #9fd4ff, #6ab3ff 50%, #9fd4ff) !important;
  border-color: #cfe0ff !important;
  color: #0b172a !important;
}
#filterGroup #filterCancel.btn-signup {
  background: #f3f4f6 !important;
  border-color: #e5e7eb !important;
  color: #111827 !important;
}

/* Адаптив: телефоны */
@media (max-width: 680px) {
  #filterGroup {
    top: auto;
    bottom: 24px;
    left: 0;
    /* Оставляем видимой ручку шириной 46px */
    transform: translate(-100%);
  }
  #filterGroup.open {
    transform: translate(0, 0);
  }
  #filterGroup .filter-handle-btn {
    height: 50px; width: 46px;
    border-radius: 0 10px 10px 0;
    box-shadow: 0 6px 14px rgba(0,0,0,0.18);
  }
  #filterGroup #modalFilter {
    width: 86vw;
    max-height: 70vh;
    border-radius: 12px;
  }
}