/* =============================
   ICO Vision — Filters UI
   ============================= */

/* Ряд фильтров */
.ts-filters{
  display:flex;
  align-items:center;
  gap:16px;
  flex-wrap:wrap;
  margin:18px 0 10px;
 padding-bottom: 40px;
}

/* ====== КАСТОМНЫЕ ДРОПДАУНЫ ====== */

/* прячем нативный select после инициализации JS */
.ts-select select.is-hidden{ position:absolute; left:-9999px; }

/* обёртка дропдауна */
.dd{
  position:relative;
  width:auto;            /* под содержимое */
  flex:0 0 auto;         /* не сжимать во флексе */
}

/* кнопка (как «чип» 170×60) */
.dd__btn{
  box-sizing:border-box;
  min-width:240px;       /* чтобы "Усі категорії" точно влезало */
  height:60px;
  padding:10px 44px 10px 20px;   /* справа место под стрелку */
  text-align:left;
  border:1px solid #4258BE;
  border-radius:40px;
  background:#fff;
  color:#23263B;
  font:600 16px/1.2;
  cursor:pointer;
  white-space:nowrap;
}

/* SVG-стрелка (вниз/вверх) через data-URI */
.dd__ico{
  position:absolute; right:14px; top:50%;
  width:24px; height:24px; transform:translateY(-50%);
  pointer-events:none;
  background:no-repeat center / 24px 24px;
  background-image:url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M19 9L12 15L5 9' stroke='%23819CC7' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.dd.is-open .dd__ico{
  background-image:url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5 15L12 9L19 15' stroke='%23819CC7' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

/* меню дропдауна */
.dd__menu{
  position:absolute; z-index:999;
  top:calc(100% + 10px); left:0;
  min-width:max(240px, 100%);   /* не уже кнопки */
  width:max-content;
  max-width:420px;
  background:#fff;
  border:1px solid #4258BE;
  border-radius:12px;
  padding:8px 0;
  box-shadow:0 10px 24px rgba(24,28,50,.08);
  display:none;
  overflow:hidden;
}
.dd.is-open .dd__menu{ display:block; }

/* «хвостик» меню */
.dd__menu::before{
  content:"";
  position:absolute;
  top:-7px; left:28px;
  width:14px; height:14px;
  background:#fff;
  border-left:1px solid #4258BE; border-top:1px solid #4258BE;
  transform:rotate(45deg);
}

/* элементы меню */
.dd__item{
  display:block; width:100%;
  padding:12px 16px;
  text-align:left; background:none; border:0; cursor:pointer;
  font:400 18px/1;
  color:#262C48;
  white-space:nowrap;
}
.dd__item:hover{ background:#F3F6FF; color:#23263B; }
.dd__item.is-active{ font-weight:600; }

/* ====== СТАТУСЫ ====== */
/* ============ СТАТУСЫ (desktop) ============ */
.ts-statuses{
  display:flex;
  align-items:center;
  gap:18px;
  margin-left:auto;
  position:relative; /* для масок на мобилке */
}
.ts-statuses .st{
  display:inline-flex; align-items:center; gap:8px;
  background:none; border:0; padding:8px 6px;
  color:#262C48; cursor:pointer;
  font:500 18px/1;
  white-space:nowrap;
}
.ts-statuses .st.is-active{ color:#262C48; text-decoration:underline; }

/* Иконки — красим currentColor (как у тебя) */
.ts-statuses .st .ico,
.ts-statuses .st .ico *{
  fill:none !important;
  stroke:currentColor !important;
  stroke-width:1.5;
  vector-effect:non-scaling-stroke;
}
.ts-statuses .st[data-status="upcoming"] .ico{ color:#FF9028; }
.ts-statuses .st[data-status="active"]   .ico{ color:#33C060; }
.ts-statuses .st[data-status="closed"]   .ico{ color:#C03333; }

/* ============ АДАПТИВ ============ */
@media (max-width: 900px){
  .ts-filters{ gap:12px; margin:0; }
  .dd__btn{ min-width:210px; font-size:15px; }
}

/* На мобилке: две колонки для двух селектов, статусы — отдельной строкой */
@media (max-width: 640px){
  /* перестраиваем общий контейнер в grid 2×N */
  .ts-filters{
    display:grid;
    grid-template-columns: 1fr 1fr;
    grid-auto-rows: auto;
    gap:12px;
    align-items:start;
  }
  /* оба селекта занимают по 1 колонке; ширина тянется */
  .ts-filter{ min-width:0; }             /* чтобы не выпирало */
  .dd, .dd__btn{ width:100%; min-width:0; }
  .dd__menu{ max-width:calc(100vw - 32px); }

  /* статусы переезжают на всю ширину ниже селектов */
  .ts-statuses{
    grid-column:1 / -1;
    margin-left:0;
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;          /* Firefox */
    gap:16px;
    padding:4px 4px;               /* чуть воздуха вокруг */
    scroll-snap-type:x mandatory;  /* плавные «щелчки» */
  }
  .ts-statuses::-webkit-scrollbar{ display:none; }
  .ts-statuses .st{
    flex:0 0 auto;                 /* не переносим, ширина по содержимому */
    scroll-snap-align:start;
    font-size:16px;
    padding:8px 4px;
  }

  /* мягкие маски по краям, чтобы подсказать про скролл */
  .ts-statuses::before,
  .ts-statuses::after{
    content:""; position:absolute; top:0; bottom:0; width:16px; z-index:1;
    pointer-events:none;
  }
  .ts-statuses::before{
    left:0;
    background:linear-gradient(90deg, #fff 0%, rgba(255,255,255,0) 100%);
  }
  .ts-statuses::after{
    right:0;
    background:linear-gradient(270deg, #fff 0%, rgba(255,255,255,0) 100%);
  }
}

/* ===== Mobile fixes for filters (<=640px) ===== */
@media (max-width:640px){

  /* сетка: 2 столбца; хочешь по одному — замени на 1fr */
  .ts-filters{
    display:grid;
    grid-template-columns: 1fr 1fr;   /* ← поставить 1fr, если нужно по одному в ряд */
    gap:12px;
    align-items:start;
    margin:14px 0 8px;
	  padding:0;
  }

  /* чтобы пилюли растягивались по колонке */
  .ts-filter{ width:100%; min-width:0; }
  .ts-select{ width:100%; }
  .dd{ display:block; width:100%; min-width:0; }
  .dd__btn{ 
    width:100%; min-width:0; 
    height:52px;                 /* ниже, чем было */
    border-radius:26px;
    padding:10px 40px 10px 16px; /* компактнее внутри */
    font-size:16px;              /* меньше шрифт */
    line-height:1.1;
  }

  /* стрелка поменьше и ближе к краю */
  .dd__ico{
    right:14px; width:18px; height:18px;
    background-size:18px 18px;
  }

  /* выпадающее меню тянется на ширину кнопки и шрифт меньше */
  .dd__menu{
    left:0; min-width:100%; max-width:none;
    font-size:14px;
  }
  .dd__item{ font-size:14px; padding:12px 14px; }

  /* статусы — не огромные и со скроллом по оси X */
  .ts-statuses{
    margin-left:0;
    overflow-x:auto; -webkit-overflow-scrolling:touch;
    padding-bottom:6px;
  }
  .ts-statuses .st{ font-size:16px; padding:6px 4px; }
  .ts-statuses::-webkit-scrollbar{ display:none; }
}

/* убираем маркеры/буллиты внутри кастомного дропдауна */
.ts-filters .dd__menu{
  list-style: none;
  margin: 0;
  padding: 8px 0; /* как было */
}
.ts-filters .dd__menu > li{
  list-style: none;
  margin: 0;
  padding: 0;
}
/* на всякий случай глушим любые псевдомаркеры темы */
.ts-filters .dd__menu > li::marker { content: ''; }
.ts-filters .dd__menu > li::before,
.ts-filters .dd__menu > li::after  { content: none !important; }