/* ==========================================================================
  
  Ruta: public/assets/choices/choices-bs5.css
  Version:  1.5.1
   Choices.js Bootstrap 5 Theme - Compiled CSS (Simulated & Corrected)
   Original SCSS depends on Bootstrap 5 Sass variables/mixins.
   This CSS assumes standard Bootstrap 5.3 styles are loaded separately.

   CORRECTIONS:
   - Added specific rules for .choices.is-valid/.is-invalid to apply BS5 validation styles.
   - Increased z-index for active dropdown (.choices__list--dropdown.is-active).
   - Minor adjustments for better BS5 form-select simulation.
   ========================================================================== */

.choices {
  position: relative;
  overflow: hidden;
  /* Inherit font-size from parent, like form-select */
  /* font-size: 1.25rem; /* Removed - Use standard form-select sizing */
  margin-bottom: var(--bs-mb-3, 1rem);
  /* Add default margin like other form controls */
}

.choices:focus {
  outline: none;
}

.choices:last-child {
  margin-bottom: 0;
}

.choices.is-open {
  overflow: visible;
}

/* Focus styles when NOT open - Applied to the main wrapper */
.choices.is-focused .choices__inner {
  /* Replicate Bootstrap's focus style for form-select */
  border-color: var(--bs-form-select-focus-border-color, #86b7fe);
  /* Default BS focus color */
  outline: 0;
  box-shadow: var(--bs-focus-ring-x, 0) var(--bs-focus-ring-y, 0) var(--bs-focus-ring-blur, 0) var(--bs-focus-ring-width, .25rem) rgba(var(--bs-primary-rgb, 13, 110, 253), .25);
  /* Default BS focus ring */
}


.choices.is-disabled .choices__inner,
.choices.is-disabled .choices__input {
  background-color: var(--bs-form-disabled-bg, #e9ecef);
  /* Use BS disabled background */
  cursor: not-allowed;
  user-select: none;
  opacity: var(--bs-form-disabled-opacity, 1);
  /* Use BS disabled opacity */
}

.choices.is-disabled .choices__item {
  cursor: not-allowed;
}

/* Hide the original select */
.choices [hidden] {
  display: none !important;
}

/* Simulate BS5 form-select appearance */
.choices__inner {
  display: block;
  width: 100%;
  min-height: var(--bs-form-select-height, calc(1.5em + 0.75rem + 2px));
  /* Ensure minimum height */
  padding: var(--bs-form-select-padding-y, .375rem) var(--bs-form-select-indicator-padding, 2.25rem) var(--bs-form-select-padding-y, .375rem) var(--bs-form-select-padding-x, .75rem);
  font-family: var(--bs-form-select-font-family, inherit);
  font-size: var(--bs-form-select-font-size, 1rem);
  font-weight: var(--bs-form-select-font-weight, 400);
  line-height: var(--bs-form-select-line-height, 1.5);
  color: var(--bs-form-select-color, #212529);
  background-color: var(--bs-form-select-bg, #fff);
  /* Default dropdown arrow */
  background-image: var(--bs-form-select-indicator, url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e"));
  background-repeat: no-repeat;
  background-position: var(--bs-form-select-bg-position, right .75rem center);
  background-size: var(--bs-form-select-bg-size, 16px 12px);
  border: var(--bs-border-width, 1px) solid var(--bs-form-select-border-color, #ced4da);
  border-radius: var(--bs-border-radius, .375rem);
  transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
  appearance: none;
  overflow: hidden;
  /* Prevent items overflowing border radius */
  cursor: default;
  /* Default cursor for the container */
}

@media (prefers-reduced-motion: reduce) {
  .choices__inner {
    transition: none;
  }
}

/* Remove default focus outline as we handle it with box-shadow */
.choices__inner:focus {
  outline: 0;
}

/* Adjust border-radius when dropdown is open */
.choices.is-open .choices__inner {
  border-bottom-right-radius: 0;
  border-bottom-left-radius: 0;
}

.choices.is-flipped.is-open .choices__inner {
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}

/* --- START: Bootstrap 5 Validation Styles Integration --- */
.choices.is-valid .choices__inner {
  border-color: var(--bs-form-valid-border-color, #198754);
  /* Add checkmark icon like BS5 */
  background-image: var(--bs-form-select-indicator, url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e")), var(--bs-form-valid-bg-icon, url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3e%3cpath fill='%23198754' d='M2.3 6.73.6 4.53c-.4-1.04.46-1.4 1.1-.8l1.1 1.4 3.4-3.8c.6-.63 1.6-.27 1.2.7l-4 4.6c-.43.5-.8.4-1.1.1z'/%3e%3c/svg%3e"));
  background-position: var(--bs-form-select-bg-position, right .75rem center), center right 2.25rem;
  /* Position both icons */
  background-size: var(--bs-form-select-bg-size, 16px 12px), calc(.75em + .375rem) calc(.75em + .375rem);
  /* Size both icons */
}

.choices.is-valid:focus .choices__inner {
  /* Keep focus style consistent */
  border-color: var(--bs-form-valid-border-color, #198754);
  box-shadow: var(--bs-focus-ring-x, 0) var(--bs-focus-ring-y, 0) var(--bs-focus-ring-blur, 0) var(--bs-focus-ring-width, .25rem) rgba(var(--bs-success-rgb, 25, 135, 84), .25);
}

.choices.is-invalid .choices__inner {
  border-color: var(--bs-form-invalid-border-color, #dc3545);
  /* Add X icon like BS5 */
  background-image: var(--bs-form-select-indicator, url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e")), var(--bs-form-invalid-bg-icon, url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' width='12' height='12' fill='none' stroke='%23dc3545'%3e%3ccircle cx='6' cy='6' r='4.5'/%3e%3cpath stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/%3e%3ccircle cx='6' cy='8.2' r='.6' fill='%23dc3545' stroke='none'/%3e%3c/svg%3e"));
  background-position: var(--bs-form-select-bg-position, right .75rem center), center right 2.25rem;
  /* Position both icons */
  background-size: var(--bs-form-select-bg-size, 16px 12px), calc(.75em + .375rem) calc(.75em + .375rem);
  /* Size both icons */
}

.choices.is-invalid:focus .choices__inner {
  /* Keep focus style consistent */
  border-color: var(--bs-form-invalid-border-color, #dc3545);
  box-shadow: var(--bs-focus-ring-x, 0) var(--bs-focus-ring-y, 0) var(--bs-focus-ring-blur, 0) var(--bs-focus-ring-width, .25rem) rgba(var(--bs-danger-rgb, 220, 53, 69), .25);
}

/* --- END: Bootstrap 5 Validation Styles Integration --- */


/* Dropdown List Styles */
.choices__list {
  margin: 0;
  padding-left: 0;
  list-style: none;
}

.choices__list--single {
  /* Display handled by inner element */
  padding: 0;
  /* Inner handles padding */
}

.choices__list--single .choices__item {
  /* Item takes full width inside inner */
  width: 100%;
}

/* Dropdown specific container */
.choices__list--dropdown,
.choices__list[aria-expanded] {
  visibility: hidden;
  /* ** MODIFICATION: Increased z-index ** */
  z-index: 1060;
  /* Higher than most standard Bootstrap elements */
  position: absolute;
  width: 100%;
  background-color: var(--bs-body-bg, #fff);
  /* Use BS background */
  border: var(--bs-border-width, 1px) solid var(--bs-border-color-translucent, rgba(0, 0, 0, 0.175));
  /* Use BS border */
  top: 100%;
  /* Position below the input */
  margin-top: -1px;
  /* Overlap slightly */
  border-bottom-left-radius: var(--bs-border-radius, .375rem);
  border-bottom-right-radius: var(--bs-border-radius, .375rem);
  overflow: hidden;
  word-break: break-all;
  will-change: visibility;
  border-top: 0;
  /* Remove top border as it connects to inner */
  /* Add a subtle shadow like dropdown-menu */
  box-shadow: var(--bs-dropdown-box-shadow, 0 .5rem 1rem rgba(0, 0, 0, .15));
}

.choices__list--dropdown.is-active,
.choices__list[aria-expanded].is-active {
  visibility: visible;
}

/* Adjust dropdown position when flipped */
.choices.is-flipped .choices__list--dropdown,
.choices.is-flipped .choices__list[aria-expanded] {
  top: auto;
  bottom: 100%;
  margin-top: 0;
  margin-bottom: -1px;
  border-radius: var(--bs-border-radius) var(--bs-border-radius) 0 0;
  box-shadow: 0 -0.5rem 1rem rgba(0, 0, 0, .15);
  /* Shadow on top */
  border-bottom: 0;
  border-top: var(--bs-border-width, 1px) solid var(--bs-border-color-translucent, rgba(0, 0, 0, 0.175));
}

/* Inner scrollable list within the dropdown */
.choices__list--dropdown .choices__list,
.choices__list[aria-expanded] .choices__list {
  position: relative;
  max-height: 200px;
  /* Limit height */
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  will-change: scroll-position;
}

/* Dropdown item styling */
.choices__list--dropdown .choices__item,
.choices__list[aria-expanded] .choices__item {
  position: relative;
  padding: var(--bs-dropdown-item-padding-y, .25rem) var(--bs-dropdown-item-padding-x, 1rem);
  /* Use BS dropdown padding */
  font-size: var(--bs-dropdown-font-size, 1rem);
  /* Use BS dropdown font size */
}

.choices__list--dropdown .choices__item--selectable,
.choices__list[aria-expanded] .choices__item--selectable {
  cursor: pointer;
}

/* Highlighted/hover item in dropdown */
.choices__list--dropdown .choices__item--selectable.is-highlighted,
.choices__list[aria-expanded] .choices__item--selectable.is-highlighted {
  background-color: var(--bs-dropdown-link-hover-bg, #e9ecef);
  /* Use BS hover background */
  color: var(--bs-dropdown-link-hover-color, #1e2125);
  /* Use BS hover color */
}

/* Disabled item in dropdown */
.choices__item--disabled {
  cursor: not-allowed;
  user-select: none;
  opacity: 0.5;
}

/* Group Heading in dropdown */
.choices__heading {
  font-weight: var(--bs-dropdown-header-font-weight, 600);
  color: var(--bs-dropdown-header-color, #6c757d);
  padding: var(--bs-dropdown-header-padding-y, .5rem) var(--bs-dropdown-header-padding-x, 1rem);
  /* Add a subtle separator if desired */
  /* border-bottom: 1px solid var(--bs-border-color-translucent); */
}

/* Input field inside Choices */
.choices__input {
  display: block;
  /* Take full width */
  width: 100%;
  /* Inherit styles */
  background-color: transparent;
  /* Should be transparent */
  font-size: inherit;
  margin: 0;
  padding: 0;
  /* No padding needed here */
  border: 0;
  border-radius: 0;
  outline: 0;
  appearance: none;
}

.choices__input::placeholder {
  color: var(--bs-form-select-disabled-color, #6c757d);
  /* Use BS placeholder color */
  opacity: 1;
}

/* Remove webkit specific search input styling */
.choices__input::-webkit-search-decoration,
.choices__input::-webkit-search-cancel-button,
.choices__input::-webkit-search-results-button,
.choices__input::-webkit-search-results-decoration {
  display: none;
}

/* Remove IE/Edge specific clear/reveal buttons */
.choices__input::-ms-clear,
.choices__input::-ms-reveal {
  display: none;
  width: 0;
  height: 0;
}

/* Placeholder element styling */
.choices__placeholder {
  color: var(--bs-form-select-disabled-color, #6c757d);
  opacity: 1;
}

/* --- Styles for select-multiple (Optional, if you use it) --- */
.choices[data-type*='select-multiple'] .choices__inner {
  cursor: text;
}

.choices[data-type*='select-multiple'] .choices__list--multiple {
  display: inline;
}

.choices[data-type*='select-multiple'] .choices__item {
  display: inline-block;
  vertical-align: middle;
  border-radius: var(--bs-border-radius-pill, 50rem);
  /* Pill shape like badges */
  padding: .25em .6em;
  /* Adjust padding */
  font-size: var(--bs-font-size-sm, .875em);
  /* Smaller font */
  font-weight: var(--bs-badge-font-weight, 600);
  margin-right: .375rem;
  margin-bottom: .375rem;
  background-color: var(--bs-primary, #0d6efd);
  /* Use BS primary color */
  border: 1px solid var(--bs-primary, #0d6efd);
  color: #fff;
  /* White text */
  word-break: break-all;
  /* Prevent long items breaking layout */
}

.choices[data-type*='select-multiple'] .choices__item[data-deletable] {
  padding-right: 5px;
  /* Space for the remove button */
}

/* Remove button for multiple items */
.choices[data-type*='select-multiple'] .choices__button {
  content: '';
  display: inline-block;
  width: 1em;
  height: 1em;
  margin-left: .5em;
  padding: 0;
  border: 0;
  border-radius: var(--bs-border-radius-pill);
  background: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23fff'%3e%3cpath d='M.293.293a1 1 0 0 1 1.414 0L8 6.586 14.293.293a1 1 0 1 1 1.414 1.414L9.414 8l6.293 6.293a1 1 0 0 1-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 0 1-1.414-1.414L6.586 8 .293 1.707a1 1 0 0 1 0-1.414z'/%3e%3c/svg%3e") center / .65em .65em no-repeat;
  opacity: 0.75;
  cursor: pointer;
  vertical-align: middle;
  /* Align with text */
}

.choices[data-type*='select-multiple'] .choices__button:hover,
.choices[data-type*='select-multiple'] .choices__button:focus {
  opacity: 1;
  background-color: rgba(0, 0, 0, 0.1);
  /* Slight background on hover */
}

/* ==========================================================================
   Fix: Hide Default Choices.js Arrow for select-one
   We are using Bootstrap's background-image indicator instead.
   ========================================================================== */
.choices[data-type*='select-one']::after {
  display: none !important;
  /* Hide the default arrow added by Choices */
}