/**
 * Global Choices.js styling for admin (Velzon + Bootstrap).
 * Loaded after choices.min.css — padding, radius, shadow, z-index, LTR/RTL logical props.
 */

.choices {
  margin-bottom: 0;
  overflow: visible;
}

.choices__inner {
  min-height: 2.75rem;
  padding-block: 0.4rem;
  padding-inline: 0.65rem;
  border-radius: 0.375rem;
  background-color: #fff;
  vertical-align: middle;
}

/*
 * Only target the real dropdown panel (.choices__list--dropdown).
 * Do NOT use [role="listbox"] — Choices also sets that on the in-field list for
 * select-multiple + search, which caused a second “ghost” list of options under the control.
 */
.choices__list--dropdown {
  z-index: 1060 !important;
  box-sizing: border-box;
  border-radius: 0.375rem;
  box-shadow: 0 0.35rem 1.25rem rgba(33, 37, 41, 0.12);
  width: 100% !important;
  min-width: 100% !important;
}

.choices__list--dropdown .choices__item--selectable,
.choices__list--dropdown .choices__item {
  padding-block: 0.45rem !important;
  padding-inline: 0.75rem !important;
  text-align: start !important;
  white-space: normal;
  word-break: break-word;
}

.choices__list--dropdown .choices__item--selectable.is-highlighted {
  background-color: #eff2f7;
}

.choices__input {
  padding-inline: 0.5rem !important;
  margin-bottom: 0.15rem;
}

.choices__list--multiple .choices__item {
  border-radius: 0.25rem;
  margin-bottom: 0.15rem;
  margin-inline-end: 0.25rem;
}

.choices[data-type*="select-multiple"] .choices__button {
  border-inline-start: 1px solid rgba(255, 255, 255, 0.35);
  margin-inline-start: 0.35rem;
}

/* Avoid Bootstrap tab panes clipping open dropdowns */
.tab-content:has(.choices),
.tab-content:has(.choices) > .tab-pane {
  overflow: visible !important;
}

.card-body:has(.choices),
.row:has(> .col-md-6 > .choices),
.row:has(> [class*="col-"] .choices) {
  overflow: visible;
}

/* Local hotel amenity grid: extra room for dropdown past column edge */
.local-amenity-catalog,
.local-amenity-catalog .border.rounded.bg-light,
.local-amenity-catalog .row.g-3,
.local-amenity-catalog .col-md-6 {
  overflow: visible !important;
}

select.js-amenity-choices {
  min-height: 2.75rem;
}

/*
 * Choices.js sets hidden + data-choice on the passed <select>. Some admin themes
 * restyle .form-control selects in a way that defeats [hidden], which looks like
 * a second plain-text list of options under the widget (especially select multiple).
 */
.choices .choices__inner select[hidden],
.choices .choices__inner select[data-choice="active"] {
  display: none !important;
}

/*
 * Dropdown rows carry data-choice; selected tags use data-item. If option nodes
 * ever appear inside the tag strip, hide them (avoids “orphan” label stacks).
 */
.choices__inner .choices__list--multiple .choices__item[data-choice] {
  display: none !important;
}