@media (min-width: 992px) {

  .filter-search-container {
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    gap: .5rem;
    padding: .15rem 0;
    justify-content: center;
  }

  /* گروه‌ها بدون کشیدگی */
  .filter-group,
  .search-group {
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    gap: .5rem;
  }

  /* ظاهر کاملاً شیشه‌ای، بدون خط اضافه */
  .category-select,
  .filter-search-input {
    padding: .45rem .9rem;
    font-size: .82rem;

    border: none;
    outline: none;

    border-radius: 9999px;

    background: color-mix(in srgb, var(--surface) 65%, transparent);
    backdrop-filter: blur(12px) saturate(150%);

    min-width: 130px;
    max-width: 180px;
  }

  .filter-search-input {
    min-width: 160px;
    max-width: 240px;
  }

  /* دکمه آیکون شیشه‌ای */
  .filter-search-btn {
    border: none;
    outline: none;
    padding: .4rem;
    border-radius: 50%;
    cursor: pointer;
    background: color-mix(in srgb, var(--surface) 65%, transparent);
    backdrop-filter: blur(12px) saturate(150%);
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .filter-search-btn:hover {
    background: color-mix(in srgb, var(--brand-leaf) 8%, transparent);
  }

  .search-icon {
    width: 18px;
    height: 18px;
    stroke: var(--brand-leaf);
    stroke-width: 2;
    fill: none;
  }
}



/* ============================================================
   📱 Mobile PRO Layout – Filter Search in Drawer
   Clean, Glassy, App‑like UI
   ============================================================ */
@media (max-width: 991px) {

  .filter-search-container {
    display: flex;
    flex-direction: column;
    gap: 0.9rem;
    padding: 0.8rem 0;
    width: 100%;
  }

  /* گروه‌ها */
  .filter-group,
  .search-group {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
  }

  /* Select دسته‌بندی */
  .category-select {
    width: 100%;
    border: none;
    outline: none;

    padding: 0.9rem 1rem;

    border-radius: 14px;
    background: color-mix(in srgb, var(--surface) 80%, transparent);
    backdrop-filter: blur(16px) saturate(180%);

    font-size: 0.92rem;

    appearance: none;
    -webkit-appearance: none;

    position: relative;
  }

  /* آیکون پیش‌فرض select */
  .category-select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' stroke='%23a1a1a1' stroke-width='2' fill='none'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: left 1rem center;
  }

  /* Input جستجو */
  .filter-search-input {
    width: 100%;
    border: none;
    outline: none;

    padding: 0.95rem 1rem;
    padding-right: 3.8rem;  /* اصلاح نهایی: جا برای آیکون تا روی متن نیفتد */

    border-radius: 14px;

    background: color-mix(in srgb, var(--surface) 80%, transparent);
    backdrop-filter: blur(16px) saturate(180%);

    font-size: 0.92rem;

    position: relative;
  }

  /* آیکون سرچ داخل input */
  .search-group {
    position: relative;
  }

  .filter-search-btn {
    position: absolute;
    right: 0.8rem;
    top: 50%;
    transform: translateY(-50%);

    width: 42px;
    height: 42px;
    padding: 0;

    display: grid;
    place-items: center;

    border: none;
    outline: none;
    border-radius: 50%;

    background: color-mix(in srgb, var(--surface) 78%, transparent);
    backdrop-filter: blur(16px) saturate(180%);

    transition: background 0.25s ease;
  }

  .filter-search-btn:hover {
    background: color-mix(in srgb, var(--brand-leaf) 10%, transparent);
  }

  .search-icon {
    width: 20px;
    height: 20px;
    stroke: var(--brand-leaf);
  }
}