/* ==========================================================================
   PX Posts – Filter bar (custom multi-select dropdowns)
   Figma: node 414:15821

   All padding/spacing from Figma boundVariables:
   - Panel padding: D1 (20px, VariableID:228:1578)
   - Option padding: D1 (20px)
   - Checkbox–text gap: 10px (D05)
   - Filter bar gap: 15px
   - Trigger padding: D1 (20px)
   ========================================================================== */

.px-posts__filters {
  display: flex;
  align-items: center;
  gap: 15px;
  flex-wrap: wrap;
}

.px-posts__filter-label {
  font-family: var(--Font-Family-Primary);
  font-size: var(--Font-Size-Body-Small);
  font-weight: var(--px-weight-medium);
  line-height: 1.5;
  color: var(--Antraciet-130);
}

/* ==========================================================================
   Dropdown trigger
   Figma: input 221x60, padding D1, gap 10px, R8, stroke Oranje-25
   ========================================================================== */

.px-posts__filter-dropdown {
  position: relative;
  width: 221px;
}

.px-posts__filter-trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  height: 60px;
  padding: var(--D1);
  gap: 10px;
  font-family: var(--Font-Family-Primary);
  font-size: var(--Font-Size-Body);
  font-weight: var(--px-weight-regular);
  line-height: 1.5;
  color: var(--Antraciet-100);
  background-color: var(--Wit);
  border: 1px solid var(--Oranje-25);
  border-radius: var(--R8);
  cursor: pointer;
  transition: border-color var(--px-duration-normal) var(--px-ease-out);
}

.px-posts__filter-trigger:hover {
  border-color: var(--Oranje-100);
}

.px-posts__filter-trigger:focus-visible {
  outline: 2px solid var(--Oranje-100);
  outline-offset: 2px;
}

.px-posts__filter-trigger[aria-expanded="true"] {
  border-color: var(--Oranje-100);
}

.px-posts__filter-icon {
  display: flex;
  flex-shrink: 0;
  color: var(--Oranje-100);
  transition: transform var(--px-duration-normal) var(--px-ease-out);
}

.px-posts__filter-trigger[aria-expanded="true"] .px-posts__filter-icon {
  transform: rotate(180deg);
}

.px-posts__filter-icon svg {
  width: 20px;
  height: 20px;
}

/* ==========================================================================
   Dropdown panel
   Figma: input 316x643, padding D1 (20px), R8, stroke Oranje-25
   ========================================================================== */

.px-posts__filter-panel {
  display: none;
  position: absolute;
  inset-block-start: calc(100% + 8px);
  inset-inline-start: 0;
  min-width: 100%;
  width: max-content;
  max-width: 320px;
  max-height: 400px;
  overflow-y: auto;
  padding: var(--D1);
  background-color: var(--Wit);
  border: 1px solid var(--Oranje-25);
  border-radius: var(--R8);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
  z-index: 100;
}

.px-posts__filter-panel--open {
  display: flex;
  flex-direction: column;
}

/* ==========================================================================
   Option item
   Figma: Optie 276x67, padding D1 (20px), gap 10px, R8
   ========================================================================== */

.px-posts__filter-option {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: var(--D1);
  border-radius: var(--R8);
  cursor: pointer;
  transition: background-color var(--px-duration-normal) var(--px-ease-out);
  user-select: none;
}

.px-posts__filter-option:hover {
  background-color: var(--Oranje-10);
}

/* ── Custom checkbox (24x24, 2px Oranje-130 border) ── */

.px-posts__filter-checkbox {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  border: 2px solid var(--Oranje-130);
  border-radius: 4px;
  background-color: var(--Wit);
  transition: background-color var(--px-duration-normal) var(--px-ease-out);
}

.px-posts__filter-checkbox--checked {
  background-color: var(--Oranje-130);
}

.px-posts__filter-checkbox svg {
  width: 14px;
  height: 10px;
}

/* ── Option text (18px/600) ── */

.px-posts__filter-option-text {
  font-family: var(--Font-Family-Primary);
  font-size: var(--Font-Size-Body);
  font-weight: var(--px-weight-semibold);
  line-height: 1.5;
  color: var(--Antraciet-100);
}

/* ==========================================================================
   Filter pills
   Figma: Frame 199, 154x44, fill Oranje-130, stroke Oranje-100, R360
   ========================================================================== */

.px-posts__filter-pills {
  display: flex;
  flex-wrap: wrap;
  gap: var(--D05);
}

.px-posts__filter-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  font-family: var(--Font-Family-Primary);
  font-size: var(--Font-Size-Body-Small);
  font-weight: var(--px-weight-medium);
  line-height: 1.5;
  color: var(--Wit);
  background-color: var(--Oranje-130);
  border: 1px solid var(--Oranje-100);
  border-radius: var(--RFull);
  cursor: pointer;
  transition: background-color var(--px-duration-normal) var(--px-ease-out);
}

.px-posts__filter-pill:hover {
  background-color: var(--Antraciet-130);
}

.px-posts__filter-pill:focus-visible {
  outline: 2px solid var(--Oranje-100);
  outline-offset: 2px;
}

.px-posts__filter-pill svg {
  flex-shrink: 0;
  width: 12px;
  height: 12px;
}

/* ==========================================================================
   Loading state
   ========================================================================== */

.px-posts__grid--loading {
  opacity: 0.4;
  pointer-events: none;
  transition: opacity 0.2s ease;
}

/* ==========================================================================
   Mobile (≤768px)
   ========================================================================== */

@media (max-width: 768px) {
  .px-posts__filter-dropdown {
    width: 100%;
  }

  .px-posts__filters {
    flex-direction: column;
    align-items: flex-start;
  }

  .px-posts__filter-panel {
    width: 100%;
    max-width: none;
  }
}