/* ========== Rounded Pills (shared) ========== */
.pill {
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  white-space: nowrap;

  background: #fff;
  border: 1px solid #00000020;
  border-radius: 500px;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.04);

  font-weight: 400;
  font-size: 14px;
  line-height: 1;
  text-transform: capitalize;
}

/* ===== Controls ===== */
.pill-control {
  height: 32px;
  padding: 8px;
  gap: 4px;
  text-transform: uppercase;
  transition: all 200ms ease;
}

.pill-control img {
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
  transition: all 200ms ease;
}

/* ===== Applied Filters (chips) ===== */
.pill-filter {
  height: 32px;
  padding: 8px 12px;
  gap: 10px;
}

.pill-filter img {
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
  transition: all 100ms ease;
}

/* ===== Filter clear button ===== */
.pill-filter-clear {
  color: #ff0202;
  border: 0.2px solid #ff02024d;
  transition: all 150ms ease;
}

.pill-filter-clear:hover {
  background: #ff020226;
}

/* ========== Desktop ========== */
@media (min-width: 1024px) {
  .pill {
    font-size: 16px;
  }

  .pill-control {
    height: 50px;
    padding: 16px;
  }

  .pill-filter {
    height: 35px;
    padding: 8px 16px;
  }
}

/* ---------------------------------------------------------------------- */
/* ========== Shared avatar style (ring) ========== */
img.avatar-ring {
  border-radius: 999px;
  object-fit: cover;

  border: 0.5px solid #ff4202;
  box-shadow: 0 4px 4px rgba(0, 0, 0, 0.102);

  filter: none;
  flex: 0 0 auto;
}

img.pill-avatar {
  width: 18px;
  height: 18px;
}

img.filter-avatar {
  width: 28px;
  height: 28px;
}

/* Desktop size */
@media (min-width: 1024px) {
  img.pill-avatar {
    width: 20px;
    height: 20px;
  }
}

/* ---------------------------------------------------------------------- */
/* ========== Filter selector ========== */
.filter-selector .dropdown-menu {
  background-color: white;
  box-shadow: 0px 14px 44px 0px #00000026;
  z-index: 50;
}

.filter-selector .dropdown-menu::before {
  content: "";
  position: absolute;
  top: -7px;
  left: 50%;
  transform: translateX(-50%);
  border-left: 8px solid transparent;
  border-right: 8px solid transparent;
  border-bottom: 8px solid #ffffff;
}

.filter-selector .submenu-chip {
  justify-content: start;
  gap: 12px;
}

/* ---------------------------------------------------------------------- */
/* Shared filter label */
.filter-label {
  display: flex;
  align-items: center;
  gap: 8px;

  padding: 2px;
  user-select: none;
  transition: color 150ms ease;
}

.filter-label:hover {
  color: #ff4202;
}

/* Vendors label size */
.vendors .filter-label:has(img) {
  font-size: 14px;
}

/* Rotate only the multi-level arrow when its own panel is open */
.filter-node:has(> .hs-collapse.open) .filter-arrow {
  transform: rotate(180deg);
}

.filter-node button:hover img {
  filter: var(--icon-filter-orange);
}

/* ---------------------------------------------------------------------- */
/* ========== Custom checkbox ========== */
[type="checkbox"] {
  width: 20px;
  height: 20px;
  border-radius: 4px;

  border: 1px solid #c6c6c6;
  color: #ff4202;

  outline: none;
  box-shadow: none;
}

/* Round checkbox */
[type="checkbox"].round-check {
  border-radius: 100%;
  border: 1px solid #00000080;
}

/* ========== Custom radio ========== */
[type="radio"] {
  appearance: auto;
  position: static;
  min-width: 14px;
  min-height: 14px;
  accent-color: #ff4202;
  color: #ff4202;
}

/* Custom radio (white checkmark) */
.radio-checkmark {
  appearance: none;
  -webkit-appearance: none;

  width: 20px;
  height: 20px;
  border-radius: 999px;
  border: 1px solid #00000080;
  outline: none;
  box-shadow: none;
}

[type="checkbox"]:focus,
[type="radio"].radio-checkmark:focus {
  box-shadow: 0 0 0 2px rgba(255, 66, 2, 0.3);
}

input[type="checkbox"]:checked,
input[type="radio"].radio-checkmark:checked {
  border-color: #ff4202 !important;
  color: #ff4202 !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-2%20-2%2016%2014'%3E%3Cpath d='M1 5l3 3 7-7' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  font-size: 16px;
}

/* ---------------------------------------------------------------------- */
/* Optional: animate the whole pills wrapper when it becomes empty */
[data-active-filters] {
  overflow: hidden;
  transition: all 250ms ease;
}

/* Add spacing only when there is content */
[data-active-filters]:not(.is-collapsing):not(:empty) {
  padding-top: 16px;
}

[data-active-filters].is-collapsing {
  opacity: 0;
  max-height: 0 !important;
  padding-top: 0 !important;
  pointer-events: none;
}