/* Контейнер меню */
.cs-left-menu-list {
  font-size: 15px;
  margin-bottom: 20px;
  background-color: var(--cs-left-menu-bg);
  border-left: 1px solid var(--cs-left-menu-bg-row);
  border-radius: 6px;
  overflow: hidden;
  border: 8px solid #ffffff;
  border-right: 0;
  border-radius: 10px;
}

.cs-left-menu-list-header{
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
  border-bottom-width: 4px;
}

.cs-left-menu-list-body{
  border-radius: 0;
  border-bottom-width: 4px;
  border-top-width: 4px;
}

.cs-left-menu-list-footer{
  border-top-left-radius: 0;
  border-top-right-radius: 0;
  border-top-width: 4px;
}

/* Блок одной категории */
.cs-left-menu-block {
  background-color: var(--cs-left-menu-bg);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03);
  /* margin-bottom: 4px; */
}

/* Строка с заголовком */
.cs-left-menu-row {
  display: flex;
  align-items: stretch;
  justify-content: space-between;
  padding-left: 14px;
  background-color: var(--cs-left-menu-bg-row);
  border-bottom: 1px solid var(--cs-left-menu-border-inner);
}

/* Название категории */
.cs-left-menu-name {
  text-decoration: none;
  color: var(--cs-left-menu-text);
  flex: 1;
  font-weight: 500;
  transition: color 0.2s ease;
  margin: 0;
  display: flex;
  padding: 5px 0px;
}

.cs-left-menu-name:hover {
  color: var(--cs-left-menu-text-hover);
}

.cs-left-menu-name.active {
  font-weight: bold;
  color: var(--cs-left-menu-text-active);
  border-left-color: var(--cs-left-menu-text-active);
}

/* Кнопка-стрелка */
.cs-left-menu-toggle-btn {
  width: 40px;
  /* height: -webkit-fill-available; */
  border: none;
  border-left: 1px solid var(--cs-left-menu-border-toggle);
  background-color: var(--cs-left-menu-bg-toggle);
  border-radius: 0;
  /* margin-left: 10px; */
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.cs-left-menu-toggle-btn:hover {
  background-color: var(--cs-left-menu-bg-toggle-hover);
}

.cs-left-menu-toggle-btn .arrow {
  transition: transform 0.2s ease;
  font-size: 18px;
  font-weight: 900;
  color: var(--cs-left-menu-bg-toggle-color);
}

.cs-left-menu-toggle-btn.expanded .arrow {
  transform: rotate(180deg);
}

.cs-left-menu-toggle-btn.expanded{
  background-color: var(--cs-left-menu-bg-toggle-active);
}

/* Подкатегории */
.cs-left-menu-children {
  display: none;
  background-color: var(--cs-left-menu-bg-children);
}

/* Элементы подкатегорий */
.cs-left-menu-content {
  display: block;
  text-decoration: none;
  color: var(--cs-left-menu-text-secondary);
  font-size: 16px;
  /* border: 2px solid var(--cs-left-menu-bg-children); */
  border-left: 2px solid var(--cs-left-menu-border);
  border-right: none;
  transition: border-color 0.2s ease;
  /* padding-left: 8px; */
}

.cs-left-menu-content a,
.cs-left-menu-content label{
  font-size: 16px;
  background-color: var(--cs-left-menu-bg-children);
}

.cs-left-menu-content a:hover,
.cs-left-menu-content label:hover{
  background-color: var(--cs-left-menu-bg-hover);
}

.cs-left-menu-row:hover{
  background-color: var(--cs-left-menu-bg-hover);
}

.cs-left-menu-content:hover {
  border-color: var(--cs-left-menu-border-hover);
  border-left-color: var(--cs-left-menu-border-left-hover);
}

.cs-left-menu-filter-action{
    box-shadow: 0 0 5px 0 #00000047;
    border-right-width: 5px !important;
    border-left-width: 5px !important;
    border-color: var(--cs-left-menu-border-toggle-filter) !important;
    border-radius: 10px;
    width: 100% !important;
    padding: 0px;
    margin: 5px 5px 5px 0px;
    background-color: var(--cs-left-menu-bg-toggle-filter) !important;
}

.cs-left-menu-filter-action:hover{
    width: 100% !important;
    background-color: var(--cs-left-menu-bg-toggle-filter-hover) !important;
    border-color: var(--cs-left-menu-border-toggle-filter-hover) !important;
}

.cs-left-menu-filter {
  margin-left: 15px;
  margin-bottom: 6px;
}

.cs-left-menu-filter-label {
    text-decoration: none;
    color: var(--cs-left-menu-text);
    flex: 1;
    font-weight: 500;
    transition: color 0.2s ease;
    margin: 0;
    display: flex;
    padding: 5px 0px 5px 5px;
}

.cs-left-menu-filter-checkbox {
  margin-right: 6px;
  width: 16px;
  height: 16px;
}

.cs-left-menu-filter-text {
  flex: 1;
}


.depth-0 {
  /* Самый светлый уровень */
  --cs-left-menu-bg: #fcfcfc;
  --cs-left-menu-bg-row: #f7f7f7;
  --cs-left-menu-bg-toggle: #198754;
  --cs-left-menu-bg-toggle-active: #49c04d;
  --cs-left-menu-bg-toggle-hover: #209748;
  --cs-left-menu-bg-toggle-color: white;
  --cs-left-menu-bg-children: #f7f7f7;
  --cs-left-menu-bg-hover: #ffffff;

  --cs-left-menu-bg-toggle-filter: #fcfcfc;
  --cs-left-menu-bg-toggle-filter-hover: #3abd80;
  --cs-left-menu-border-toggle-filter: #2aa14f;
  --cs-left-menu-border-toggle-filter-hover: #44ce70;

  --cs-left-menu-border: #eee;
  --cs-left-menu-border-inner: #dcdcdc;
  --cs-left-menu-border-toggle: #ccc;
  --cs-left-menu-border-left-hover: #999;
  --cs-left-menu-border-hover: #ffffff;

  --cs-left-menu-text: #2e2e2e;
  --cs-left-menu-text-hover: #0c4c21;
  --cs-left-menu-text-active: #209748;
  --cs-left-menu-text-secondary: #444;
}

.depth-1 {
  /* Средний уровень */
  --cs-left-menu-bg: #f6f6f6;
  --cs-left-menu-bg-row: #f0f0f0;
  --cs-left-menu-bg-toggle: #198754;
  --cs-left-menu-bg-toggle-active: #49c04d;
  --cs-left-menu-bg-toggle-hover: #209748;
  --cs-left-menu-bg-toggle-color: white;
  --cs-left-menu-bg-children: #f0f0f0;

  --cs-left-menu-bg-toggle-filter: #fcfcfc;
  --cs-left-menu-bg-toggle-hover: #3abd80;
  --cs-left-menu-border-toggle: #2aa14f;
  --cs-left-menu-border-toggle-hover: #44ce70;

  --cs-left-menu-border: #ddd;
  --cs-left-menu-border-inner: #c8c8c8;
  --cs-left-menu-border-toggle: #b5b5b5;
  --cs-left-menu-border-left-hover: #888;

  --cs-left-menu-text: #2a2a2a;
  --cs-left-menu-text-hover: #0c4c21;
  --cs-left-menu-text-active: #209748;
  --cs-left-menu-text-secondary: #3c3c3c;

  margin-left: 15px;
}

.depth-2 {
  /* Самый тёмный уровень */
  --cs-left-menu-bg: #eeeeee;
  --cs-left-menu-bg-row: #e5e5e5;
  --cs-left-menu-bg-toggle: #198754;
  --cs-left-menu-bg-toggle-active: #49c04d;
  --cs-left-menu-bg-toggle-hover: #209748;
  --cs-left-menu-bg-toggle-color: white;
  --cs-left-menu-bg-children: #e5e5e5;

  --cs-left-menu-bg-toggle-filter: #fcfcfc;
  --cs-left-menu-bg-toggle-hover: #3abd80;
  --cs-left-menu-border-toggle: #2aa14f;
  --cs-left-menu-border-toggle-hover: #44ce70;

  --cs-left-menu-border: #ccc;
  --cs-left-menu-border-inner: #b0b0b0;
  --cs-left-menu-border-toggle: #a5a5a5;
  --cs-left-menu-border-left-hover: #777;

  --cs-left-menu-text: #222;
  --cs-left-menu-text-hover: #0c4c21;
  --cs-left-menu-text-active: #209748;
  --cs-left-menu-text-secondary: #333;

  margin-left: 15px;
}