/* ============================================================
   Select2 — Pleximus standardization overrides
   Source: SELECT2_INTEGRATION_GUIDE.md (backend-dev-authored guide,
   adopted verbatim here to avoid merge conflicts with their own
   work elsewhere in the app). Do not fold these into the
   select2-bootstrap-5-theme.min.css vendor file or into
   properties.css — this file is the single shared Select2 override
   sheet the guide expects every page to include.

   Pilot scope: Booking Engine's Step 1 Property field
   (#plxBookingPropertyJs) only, per explicit instruction — every
   other dropdown in the project stays a plain native <select> until
   this one is confirmed correct and rolled out further.
   ============================================================ */

/* ------------------------------------------------------------
   1. SELECT2 CONTAINER & SELECTION BOX (Matches .plx-select)
   ------------------------------------------------------------ */
.select2-container--default .select2-selection--single {
  background: var(--bg-surface, #ffffff);
  border: 1.5px solid var(--border-default, #e5e7eb);
  border-radius: var(--radius-sm, 6px);
  height: var(--space-8);
  outline: none;
  transition: border-color var(--transition-fast, 0.15s ease);

  /* Custom SVG Chevron replaces default arrow */
  background-image: url('/assets/svg/icons/select-chevron.svg');
  background-position: right 16px center;
  background-repeat: no-repeat;
  background-size: 10px 6px;
  display: flex;
  align-items: center;
}

/* Hover & Focus / Open States */
.select2-container--default .select2-selection--single:hover {
  border-color: var(--border-hover, #cbd5e1);
}

.select2-container--default.select2-container--focus .select2-selection--single,
.select2-container--default.select2-container--open .select2-selection--single {
  border-color: var(--border-focus, #0d6efd);
  outline: none;
}

/* Rendered Text */
.select2-container--default .select2-selection--single .select2-selection__rendered {
  color: var(--text-primary, #1e293b);
  font-family: var(--font-body, inherit);
  font-size: var(--text-base, 14px);
  padding-left: var(--space-3, 12px);
  padding-right: 29px; /* Space for the custom chevron */
  line-height: normal;
  width: 100%;
}

/* Placeholder */
.select2-container--default .select2-selection--single .select2-selection__placeholder {
  color: var(--text-muted, #94a3b8);
}

/* Hide Default Select2 Arrow — no !important: the vendor's own rule at
   this identical selector (select2.min.css) never sets display at all
   (only height/position/top/right/width), so there's no competing
   declaration to out-rank here. */
.select2-container--default .select2-selection--single .select2-selection__arrow {
  display: none;
}

/* Disabled State */
.select2-container--default.select2-container--disabled .select2-selection--single {
  background: var(--bg-surface-subtle, #f8f9fa);
  border-color: var(--border-default, #e5e7eb);
  cursor: not-allowed;
  opacity: 0.7;
}

/* ------------------------------------------------------------
   2. DROPDOWN PANEL & RESULTS LIST
   ------------------------------------------------------------ */
.select2-container--default .select2-dropdown {
  background: var(--bg-surface, #ffffff);
  border: 1.5px solid var(--border-focus, #0d6efd);
  border-radius: var(--radius-sm, 6px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  z-index: 1060;
  padding: var(--space-1, 4px);
}

/* Search input inside dropdown */
.select2-container--default .select2-search--dropdown {
  padding: 4px 4px 6px 4px;
}

.select2-container--default .select2-search--dropdown .select2-search__field {
  background: var(--bg-surface, #ffffff);
  border: 1.5px solid var(--border-default, #e5e7eb);
  border-radius: var(--radius-sm, 6px);
  color: var(--text-primary, #1e293b);
  font-family: var(--font-body, inherit);
  font-size: var(--text-base, 14px);
  height: 34px;
  padding: 0 var(--space-3, 12px);
  outline: none;
  width: 100%;
}

.select2-container--default .select2-search--dropdown .select2-search__field:focus {
  border-color: var(--border-focus, #0d6efd);
}

/* Option Items */
.select2-container--default .select2-results__option {
  color: var(--text-primary, #1e293b);
  font-family: var(--font-body, inherit);
  font-size: var(--text-base, 14px);
  padding: 8px 12px;
  border-radius: var(--radius-xs, 4px);
  margin-bottom: 2px;
}

/* Highlighted (hover/keyboard) & Selected States.
   No !important: three selector terms here (two classes + one attribute)
   already beats the vendor base theme's own 2-class highlighted rule
   (select2.min.css) on plain specificity, and this file loads after that
   vendor file anyway. Left as plain cascade so a page needing a genuine
   exception (e.g. Properties' Room Type filter, properties.css) can win
   against it with a normal higher-specificity selector — an ID-scoped
   override there — instead of needing its own !important to fight this
   one. See properties.css's #plxAssignRoomNumbersModalJs rules for that
   exception in practice. */
.select2-container--default .select2-results__option--highlighted[aria-selected],
.select2-container--default .select2-results__option[aria-selected="true"] {
  background-color: var(--select-highlight-bg, #0d6efd);
  color: var(--text-inverse, #ffffff);
}

/* Hide disabled options in dynamic dependent lists */
.select2-container--default .select2-results__option[aria-disabled="true"] {
  display: none;
}

/* ------------------------------------------------------------
   3. FLEXBOX INTEGRATION IN FILTER BARS
   ------------------------------------------------------------ */
.plx-filter-bar > .select2-container {
  flex: 1 1 calc((100% - var(--space-4, 16px)) / 2);
  min-width: 0;
}

/* ==========================================================================
   MEDIA QUERIES — all breakpoints for this file, grouped by tier
   (0–575.98 / 576–767.98 / 768–991.98 / 992–1199.98 / 1200–1399.98 / 1400+),
   consolidated here from their original inline positions so every
   responsive rule for this file lives in one place. Order within each tier
   block matches each rule's original position in the file, since some
   target the same selector and rely on later-wins source order.
   ========================================================================== */

@media (min-width: 768px) and (max-width: 991.98px) {
  .plx-filter-bar > .select2-container {
    flex: 1 1 var(--plx-filter-item-w, 183px);
    min-width: 0;
  }
}

@media (min-width: 992px) and (max-width: 1199.98px) {
  .plx-filter-bar > .select2-container {
    flex: 1 1 var(--plx-filter-item-w, 183px);
    min-width: 0;
  }
}

@media (min-width: 1200px) and (max-width: 1399.98px) {
  .select2-container--default .select2-selection--single {
    height: var(--space-8, 32px);
  }

  .plx-filter-bar-fluid > .select2-container {
    flex: 1 1 0;
    min-width: 0;
  }

  .plx-filter-bar-fixed > .select2-container {
    flex: 0 1 var(--plx-filter-item-w, 183px);
    min-width: 0;
  }
}

@media (min-width: 1400px) {
  .plx-filter-bar-fluid > .select2-container {
    flex: 1 1 0;
    min-width: 0;
  }

  .plx-filter-bar-fixed > .select2-container {
    flex: 0 1 var(--plx-filter-item-w, 183px);
    min-width: 0;
  }
}