/* =========================================================
   ONZE KEUKEN — RECIPE SELECT FILTERS
   ========================================================= */

.filters-wrap {
  margin: 22px 0 28px;
}

.recipe-filter-columns {
  display: grid;
  grid-template-columns:
    repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.recipe-filter-group {
  min-width: 0;
}

.recipe-filter-label {
  margin: 0 0 8px 3px;

  color: #766b63;
  font-size: 13px;
  font-weight: 800;
}

.recipe-filter-select {
  width: 100%;
  min-height: 54px;

  box-sizing: border-box;

  padding: 0 46px 0 17px;

  border: 1px solid #dfd1c5;
  border-radius: 16px;

  background-color: #fff;

  color: #362f2b;

  font: inherit;
  font-size: 15px;
  font-weight: 750;

  cursor: pointer;

  box-shadow:
    0 5px 16px
    rgba(75, 50, 34, .05);
}

.recipe-filter-select:hover {
  border-color: #d4ad98;
}

.recipe-filter-select:focus {
  outline:
    3px solid
    rgba(218, 121, 84, .15);

  border-color: #da7954;
}

.recipe-count {
  margin: 14px 0 0 3px;

  color: #7b7068;
  font-size: 13px;
  font-weight: 650;
}

@media (max-width: 700px) {
  .recipe-filter-columns {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .recipe-filter-select {
    min-height: 50px;
  }
}


/* ==========================================
   TAG FILTER V1
   ========================================== */

@media (min-width: 801px) {

  .recipe-filter-columns {
    grid-template-columns:
      repeat(
        3,
        minmax(0, 1fr)
      );
  }

}


@media (max-width: 800px) {

  .recipe-filter-columns {
    grid-template-columns:
      1fr;
  }

}


/* ==========================================
   TAG FILTER POLISH V2
   ========================================== */

#recipe-tag-filter {
  width: 100%;
}


#recipe-tag-select {
  width: 100%;
  min-height: 54px;

  box-sizing: border-box;

  border:
    1px
    solid
    var(--border);

  border-radius: 14px;

  padding:
    0
    16px;

  background: #fff;
  color: var(--text);

  font: inherit;
  font-size: 15px;
  font-weight: 750;

  cursor: pointer;
}


#recipe-tag-select:focus {
  outline: none;

  border-color:
    var(--accent);
}


@media (max-width: 800px) {

  #recipe-tag-select {
    min-height: 52px;
  }

}


/* ==========================================
   RECIPE DETAIL TAGS V1
   ========================================== */

.recipe-detail-tags {
  display: flex;
  flex-wrap: wrap;

  gap: 7px;

  margin:
    12px
    0;
}


.recipe-detail-tag {
  display: inline-flex;
  align-items: center;

  min-height: 30px;

  padding:
    5px
    10px;

  border:
    1px
    solid
    var(--border);

  border-radius:
    999px;

  background:
    var(--surface-soft);

  color:
    var(--accent-dark);

  font-size: 12px;
  font-weight: 800;

  line-height: 1.2;
}


@media (max-width: 650px) {

  .recipe-detail-tags {
    gap: 6px;
  }


  .recipe-detail-tag {
    min-height: 28px;

    padding:
      5px
      9px;

    font-size: 11px;
  }

}


/* ==========================================
   RECIPE CARD FAMILY TAGS V1
   ========================================== */

.recipe-card-tags-v1 {
  display: flex;
  flex-wrap: wrap;

  gap: 6px;

  margin-top: 8px;
}


.recipe-card-tag-v1 {
  display: inline-flex;
  align-items: center;

  padding:
    5px
    9px;

  border:
    1px
    solid
    var(--border);

  border-radius:
    999px;

  background:
    var(--surface-soft);

  color:
    var(--accent-dark);

  font-size: 11px;
  font-weight: 800;

  line-height: 1.1;
}


@media (max-width: 650px) {

  .recipe-card-tags-v1 {
    gap: 5px;
  }


  .recipe-card-tag-v1 {
    padding:
      4px
      8px;

    font-size: 10px;
  }

}