/* ===========================
   KPD Filters – Layout only
   (без цветове/дизайн)
   =========================== */

/* 1) Основен layout на формата
   - flex + wrap, за да може actions да падне на нов ред при нужда */
.kpd-search-form {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: flex-end;
  box-sizing: border-box;
}

/* 2) Контейнерът с полетата */
.kpd-search-form .kpd-fields{
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  min-width: 0;
  flex: 1 1 640px; /* позволява да се свие, но държи actions вдясно при широк екран */
}

/* 3) Всяко поле (една дефиниция, без дублиране) */
.kpd-search-form .kpd-field{
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start; /* по-естествено за label + input */
  box-sizing: border-box;
  min-width: 0; /* важно: да позволява shrink */
}

/* 4) Етикети */
.kpd-search-form .kpd-label,
.kpd-search-form .kpd-field > label.kpd-label{
  margin: 0 0 8px 2px;
}

/* 5) RANGE група */
.kpd-search-form .kpd-field-range .kpd-range{
  display: flex;
  align-items: stretch;
  width: 100%;
  min-width: 0;
}

.kpd-search-form .kpd-field-range .kpd-range input{
  flex: 1 1 0;
  min-width: 0;
}

/* separator — между от/до */
.kpd-search-form .kpd-range-sep{
  flex: 0 0 34px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* 6) Actions (бутоните)
   - по подразбиране вдясно */
.kpd-search-form .kpd-actions{
  flex: 0 0 auto;
  display: flex;
  gap: 10px;
  align-items: center;
}

/* ===========================
   Active field indicator
   (активен label + точка)
   =========================== */

.kpd-label{
  transition: color .2s ease, font-weight .2s ease;
}

/* когато има избрана стойност */
.kpd-field.is-active .kpd-label{
  color: #05a6b3;
  font-weight: 600;
}

/* Подготвяме label да може да носи "точка" */
.kpd-field .kpd-label{
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px; /* разстояние между текста и точката */
}

/* По подразбиране точката е невидима */
.kpd-field .kpd-label::after{
  content: '';
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #05a6b3;

  /* ако предпочиташ outline вариант – разкоментирай:
  background: transparent;
  border: 2px solid #05a6b3;
  */

  opacity: 0;
  transform: scale(0.6);
  transition: opacity .2s ease, transform .2s ease;
}

/* Когато филтърът е активен -> точката се показва */
.kpd-field.is-active .kpd-label::after{
  opacity: 1;
  transform: scale(1);
}

/* ===========================
   Responsive
   =========================== */

/* Компактна desktop ширина:
   - actions пада под полетата */
/*@media (max-width: 1024px) {
  .kpd-search-form .kpd-actions{
    width: 100%;
    justify-content: center;  или flex-end ако искаш вдясно 
    margin-top: 6px;
  }
}*/

/* Mobile:
   - всичко в колона
   - actions на 100% */
/*@media (max-width: 768px){
  .kpd-search-form{
    flex-direction: column;
    align-items: stretch;
  }

  .kpd-search-form .kpd-fields{
    width: 100%;
    flex: 1 1 auto;
  }*/

/*  .kpd-search-form .kpd-actions{
    width: 100%;
    justify-content: center;
  }
}*/

/* ===========================
   Labels / Summary / Chips
   =========================== */

.kpd-results-summary{
  margin: 10px 0 12px;
  font-size: 14px;
}

.kpd-results-summary-sep{
  margin: 0 6px;
  opacity: .6;
}

.kpd-active-filters{
  margin: 10px 0 14px;
}

.kpd-active-filters-title{
  font-size: 13px;
  opacity: .8;
  margin-bottom: 8px;
}

.kpd-chips{
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.kpd-chip{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border: 1px solid rgba(5,166,179,.35);
  border-radius: 999px;
  text-decoration: none;
  line-height: 1;
  transition: background-color .2s ease, transform .08s ease;
}

.kpd-chip:hover{
  background-color: rgba(5,166,179,.08);
}

.kpd-chip:active{
  transform: scale(.98);
}

.kpd-chip-text{
  font-size: 13px;
}

.kpd-chip-x{
  width: 22px;
  height: 22px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(123, 30, 43, .12); /* фон за да личи, че е бутон */
  color: #7b1e2b; /* тъмно вишнево */
  font-weight: 700;
  flex: 0 0 auto;
}

.kpd-chip--clearall{
  border-color: rgba(123, 30, 43, .35);
}

/* ===========================
   Results count / Avada totals
   =========================== */

/* пример - коригираш селектора според реалния */
.fusion-post-count,
.fusion-results-count {
  display: none !important;
}

.kpd-results-count{
  margin: 10px 0 18px;
  font-size: 14px;
  opacity: .85;
}

.fusion-pagination-totals {
  font-weight: 700;
}

.fusion-pagination-totals span,
.fusion-pagination-totals em {
  font-weight: 400;
}

.kpd-results-count .kpd-num{
  font-weight: 700;
}

/* ========== Compact desktop: бутонът отдолу ========== */
/* =========================================
   SMART WRAP (само за primary формата)
   - по default: бутонът е вдясно (nowrap)
   - само ако JS сложи .is-wrapped: пада долу 100%
   ========================================= */

.kpd-search-form.kpd-wrap-smart{
  display: flex;
  align-items: flex-end;
  gap: 10px;
  flex-wrap: nowrap;            /*ключово: не пада долу само */
}

/* полетата могат да станат на 2+ реда вътре */
.kpd-search-form.kpd-wrap-smart .kpd-fields{
  display: flex;
  flex-wrap: raw;
  gap: 10px;
  flex: 1 1 auto;
  min-width: 0;
}

/* actions вдясно */
.kpd-search-form.kpd-wrap-smart .kpd-actions{
  flex: 0 0 auto;
  width: auto;
  display: flex;
  gap: 10px;
  align-items: flex-end;
  margin-top: 0;
}

/* когато НЯМА място -> JS добавя is-wrapped */
.kpd-search-form.kpd-wrap-smart.is-wrapped{
  flex-wrap: wrap; /* позволяваме actions да слезе */
}

.kpd-search-form.kpd-wrap-smart.is-wrapped .kpd-actions{
  flex: 0 0 100%;
  width: 100%;
  order: 2;
  justify-content: flex-end;  /* ако искаш center -> сменяш тук */
  margin-top: 8px;
}

.kpd-search-form.kpd-wrap-smart.is-wrapped .kpd-fields{
  flex: 0 0 100%;
  width: 100%;
  order: 1;
}

/* мобайл: ако искаш винаги в колона */
@media (max-width: 768px){
  .kpd-search-form.kpd-wrap-smart{
    flex-direction: column;
    align-items: stretch;
  }
  .kpd-search-form.kpd-wrap-smart .kpd-actions{
    width: 100%;
    justify-content: center;
  }
}

/* когато smart wrap реши, че няма място -> actions долу + бутон 100% */
.kpd-search-form.kpd-wrap-smart.is-wrapped .kpd-actions{
  flex: 0 0 100% !important;
  width: 100% !important;
  margin-top: 8px !important;
}

.kpd-search-form.kpd-wrap-smart.is-wrapped .kpd-submit{
  width: 100% !important;
  min-width: 100% !important;
  display: flex;
  justify-content: center;
}

.kpd-search-form.kpd-wrap-smart {
    display: flex !important;
    gap: 10px;
    flex-direction: row;
}



.kpd-search-form.kpd-wrap-smart .kpd-fields {
    display: flex !important;
    flex-wrap: raw  !important;
    gap: 10px;
    flex: 1 1 100%;
}