/* ==========================================
   SelectPlus v1.0.2 — Final Enhanced Version
   Bootstrap-aligned • Animated • Portal-ready
   ========================================== */

/* Global variables */
:root {
  --selectPlus-radius: 0.375rem; /* matches form-select */
  --selectPlus-option-y: 0.45rem; /* option vertical padding */
  --selectPlus-bg: var(--bs-body-bg);
  --selectPlus-color: var(--bs-body-color);
  --selectPlus-border: var(--bs-border-color);
  --selectPlus-hover-bg: rgba(var(--bs-body-color-rgb), .10);
  --selectPlus-active-bg: rgba(var(--bs-primary-rgb), .13);
  --selectPlus-anim-translate: 8px; /* animation distance */
  --selectPlus-anim-scale: .97; /* scale animation factor */
}

/* ===========================
   Wrapper (auto size)
   ===========================*/
.selectPlus {
  display: inline-block;
  min-width: 125px;
  cursor: pointer;
  user-select: none;
}

/* ===========================
   Toggle (Bootstrap form-select match)
   ===========================*/
.selectPlus-toggle {
  display: flex;
  justify-content: space-between;
  align-items: center;

  /* Matches .form-select padding */
  padding: .375rem .75rem;

  background-color: var(--selectPlus-bg);
  color: var(--selectPlus-color);

  border: 1px solid var(--selectPlus-border);
  border-radius: var(--selectPlus-radius);

  font-size: 1rem;
  line-height: 1.5;

  transition: border-color .2s, box-shadow .2s, background-color .2s;
}

/* size = form-select-sm */
.selectPlus.selectPlus-sm .selectPlus-toggle {
  padding: .25rem .5rem;
  font-size: 0.875rem;
  line-height: 1.4;
  border-radius: var(--selectPlus-radius);
}

/* focus ring like form-select */
.selectPlus-toggle:focus {
  outline: none;
  border-color: var(--bs-primary);
  box-shadow: 0 0 0 0.2rem rgba(var(--bs-primary-rgb), 0.25);
}

/* caret */
.selectPlus-toggle::after {
  content: "";
  display: inline-block;
  margin-left: 0.5rem;

  border-top: .35rem solid var(--selectPlus-color);
  border-left: .3rem solid transparent;
  border-right: .3rem solid transparent;

  transition: transform .25s ease;
}

.selectPlus.open .selectPlus-toggle::after {
  transform: rotate(180deg);
}

/* ===========================
   Dropdown (portal)
   ===========================*/
.selectPlus-dropdown {
  position: absolute;
  top: 0; left: 0;
  z-index: 1055;

  width: auto;
  max-width: none;
  min-width: unset;
  max-height: 260px;

  overflow-y: auto;
  overflow-x: hidden;

  background-color: var(--selectPlus-bg);
  border: 1px solid var(--selectPlus-border);
  border-radius: var(--selectPlus-radius);
  box-shadow: 0 6px 18px rgba(0,0,0,.18);

  opacity: 0;
  visibility: hidden;

  /* ✨ Enhanced animation: fade + slide + scale */
  transform: translateY(calc(var(--selectPlus-anim-translate) * -1))
             scale(var(--selectPlus-anim-scale));
  transform-origin: top;

  transition:
    opacity .22s ease,
    visibility .22s ease,
    transform .22s cubic-bezier(.16,.7,.46,1);
}

/* drop-up anchor */
.selectPlus-dropdown.drop-up {
  transform-origin: bottom;
}

/* when JS toggles "open" */
.selectPlus.open .selectPlus-dropdown {
  opacity: 1;
  visibility: visible;
  transform: translateY(0px) scale(1);
}

/* ===========================
   Options
   ===========================*/
/* Normal size (matches .form-select) */
.selectPlus-option {
  display: block;
  /* EXACT Bootstrap form-select vertical rhythm */
  padding: .375rem .75rem;
  font-size: 1rem;
  line-height: 1.5;
  cursor: pointer;
  user-select: none;
  white-space: nowrap;
  color: var(--selectPlus-color);
  transition: background-color .15s ease;
}
/* Small size (matches .form-select-sm) */
.selectPlus-dropdown.selectPlus-sm .selectPlus-option {
  padding: .25rem .5rem;
  font-size: .875rem;
  line-height: 1.4;
}

.selectPlus-option:hover,
.selectPlus-option:focus {
  background-color: var(--selectPlus-hover-bg);
  outline: none;
}

/* selected (Bootstrap active look) */
.selectPlus-option.selected {
  background-color: var(--selectPlus-active-bg);
  font-weight: 500;
  position: relative;
}

/* checkmark (optional) */
.selectPlus-option.selected::after {
  content: "✓";
  position: absolute;
  right: .75rem;
  top: 50%;
  transform: translateY(-50%);
  opacity: .75;
  font-size: .85rem;
}

.selectPlus-title {
  font-size: 0.85em;
  color: var(--bs-secondary-color, #6c757d);
  padding: 6px 10px;
  cursor: default;
  user-select: none;
  opacity: 0.85;
}