/* Base Reset for Selectify */
.selectify-select-dropdowns {
  position: relative;
  display: flex;
  inline-size: auto;
  min-inline-size: 230px;
  max-inline-size: fit-content;
  margin: 0;
  padding: 0;
  border: none;
  border-radius: 0;
  transition: all 0.3s ease;
  align-items: center;
  justify-content: space-between;
  text-align: start;
}

/* Selected Options Display */
.selectify-select-dropdowns .selectify-selected-display {
  display: flex;
  min-inline-size: 230px;
  min-block-size: 48px;
  padding: var(--selectify-select-padding);
  flex-grow: 0;
  align-items: center;
  justify-content: end;
  gap: 0.625rem;
}

/* Selected Option Item */
.selectify-select-dropdowns .selectify-selected-options {
  display: flex;
  inline-size: calc(100% - 30px);
  flex-grow: 1;
  flex-wrap: wrap;
  gap: 0.375rem;
  margin-inline-start: 0;
  margin-inline-end: 26px;
}

/* Individual Selected Item */
.selectify-select-dropdowns .selectify-selected-one-option {
  display: flex;
  padding: 0.125em 0.75em;
  padding-inline-end: 8px;
  border: 1px solid var(--selectify-select-border-color, var(--r-br));
  border-radius: .75rem;
  font-size: .75rem;
  font-weight: 525;
  font-variation-settings: initial;
  line-height: 1.2;
  vertical-align: .125em;
  align-items: center;
  gap: 0.125rem;
}

/* Remove Tag Button */
.selectify-select-dropdowns .remove-tag {
  display: flex;
  padding: 0;
  border: none;
  background: none;
  cursor: pointer;
  transition: all 0.2s ease;
  align-items: center;
  justify-content: center;
}

.selectify-select-dropdowns .remove-tag:hover svg {
  opacity: 0.8;
  transform: scale(1.1);
}

/* Dropdown Arrow */
.selectify-select-dropdowns .selectify-dorpdown-arrow {
  display: inline-flex;
  inline-size: 26px;
  cursor: pointer;
  transition: all 0.3s ease;
  align-items: center;
}

.selectify-select-dropdowns .selectify-dorpdown-arrow svg {
  inline-size: 24px;
  block-size: 24px;
  transition: all 0.3s ease;
}

/* Opened Dropdown Arrow */
.selectify-select-dropdowns.selectify-opened .selectify-dorpdown-arrow svg {
  transform: rotate(180deg);
}

.selectify-select-dropdowns.selectify-opened .selectify-selected-display,
.selectify-select-dropdowns.selectify-opened .selectify-available-display {
  transition: all 0.2s ease;
}

.selectify-select-dropdowns.opens-up .selectify-available-display,
.selectify-select-dropdowns.opens-down .selectify-selected-display {
  border-end-end-radius: var(--selectify-dropdown-flush-end-end, 0) !important;
  border-end-start-radius: var(--selectify-dropdown-flush-end-start, 0) !important;
}

.selectify-select-dropdowns.opens-up .selectify-selected-display,
.selectify-select-dropdowns.opens-down .selectify-available-display {
  border-start-start-radius: var(--selectify-dropdown-flush-start-start, 0) !important;
  border-start-end-radius: var(--selectify-dropdown-flush-start-end, 0) !important;
}

/* Dropdown Display */
.selectify-select-dropdowns .selectify-available-display {
  position: absolute;
  inset-block-start: 100%;
  inset-inline-start: 0;
  inset-inline-end: auto;
  z-index: 6000;
  display: none;
  overflow: hidden auto;
  inline-size: auto;
  min-inline-size: 100%;
  max-inline-size: none;
  max-block-size: 220px;
  padding: 0;
}

/* Available Option Item */
.selectify-select-dropdowns .selectify-available-one-option {
  display: flex;
  padding: 0.5rem 0.75rem;
  font-weight: normal;
  cursor: pointer;
  transition: all 0.3s ease;
  align-items: center;
  line-height: 1;
  font-size: 0.875rem;
}

.checkbox.selectify-select-dropdowns .selectify-available-one-option {
  gap: 0.5rem;
}

.selectify-select-dropdowns .selectify-available-one-option * {
  font-weight: normal;
}

/* Search Input */
.selectify-select-dropdowns .search-input {
  position: relative;
}

.selectify-select-dropdowns .options-inner {
  position: relative;
}

.selectify-select-dropdowns .options-inner .selectify-select-footer {
  position: sticky;
  inset-block-end: 0;
  inset-inline: 0;
  background: var(--selectify-select-bg, var(--r-bg));
}

/* RTL: arrow icon flip only (layout uses logical properties) */
html[dir="rtl"] .selectify-select-dropdowns .selectify-dorpdown-arrow {
  transform: rotate(180deg);
}