/* =========================================================
   ROOT
   ========================================================= */
:root {
  --sp-border-focus: rgba(var(--bs-primary-rgb), .515);
}


/* =========================================================
   BASE INPUT
   ========================================================= */
.choices__inner {
  border-radius: .5rem;
  border-top-left-radius: .5rem;
  border-top-right-radius: .5rem;
  border-bottom-left-radius: .5rem;
  border-bottom-right-radius: .5rem;
  border: 1px solid var(--bs-border-color);
  /*transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;*/ /* todo: */
}

  .choices__inner:focus {
    outline: none;
  }


/* =========================================================
   FOCUS / OPEN
   ========================================================= */
.choices.sp-focus .choices__inner,
.choices.is-focused .choices__inner,
.choices.is-open .choices__inner {
  border-color: var(--sp-border-focus);
  box-shadow: 0 0 3px 1px rgba(var(--bs-primary-rgb), .25);
}


/* =========================================================
   DROPDOWN BASE (merged + cleaned)
   ========================================================= */
.choices__list--dropdown {
  border: 1px solid var(--bs-border-color);
  box-shadow: 0 6px 20px rgba(0,0,0,.15);
  /*transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;*/ /* todo: */
}


/* =========================================================
   POSITION LOGIC
   ========================================================= */

/* ---------- OPEN BELOW ---------- */
.choices.is-open:not(.is-flipped) .choices__inner {
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
  /* re-affirm top */
  border-top-left-radius: .5rem;
  border-top-right-radius: .5rem;
}

.choices:not(.is-flipped) .choices__list--dropdown {
  margin-top: -1px;
  border-top-left-radius: 0;
  border-top-right-radius: 0;
  border-bottom-left-radius: .5rem;
  border-bottom-right-radius: .5rem;
}

.choices.is-open:not(.is-flipped) .choices__list--dropdown {
  border-left-color: var(--sp-border-focus);
  border-right-color: var(--sp-border-focus);
  border-bottom-color: var(--sp-border-focus);
  border-top-color: transparent !important;
  box-shadow: 0 6px 20px rgba(0,0,0,.15), 0 2px 6px rgba(var(--bs-primary-rgb), .12);
}


/* ---------- OPEN ABOVE ---------- */
.choices.is-open.is-flipped .choices__inner {
  border-top-left-radius: 0;
  border-top-right-radius: 0;
  /* re-affirm bottom */
  border-bottom-left-radius: .5rem;
  border-bottom-right-radius: .5rem;
}

.choices.is-flipped .choices__list--dropdown {
  margin-bottom: -1px;
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
  border-top-left-radius: .5rem;
  border-top-right-radius: .5rem;
}

.choices.is-open.is-flipped .choices__list--dropdown {
  border-left-color: var(--sp-border-focus);
  border-right-color: var(--sp-border-focus);
  border-top-color: var(--sp-border-focus);
  border-bottom-color: transparent !important;
  box-shadow: 0 -6px 20px rgba(0,0,0,.15), 0 -2px 6px rgba(var(--bs-primary-rgb), .12);
}


.choices[data-type*="select-one"]::after {
  display: none;
}

.choices {
  border-radius: .5rem;
  overflow: hidden; /* 🔥 default */
  margin-bottom: 0; /* fix inline alignment */
}

.choices {
  /*min-width: 130px; max-width: 300px; width: 150px;*/
}

  /* 🔥 allow caret only for multiple */
  .choices.is-multiple {
    overflow: visible;
  }

  .choices[data-type*="select-one"] {
    position: relative;
  }

    .choices[data-type*="select-one"]::before {
      content: '';
      position: absolute;
      right: 11.5px;
      top: 50%;
      width: 18px;
      height: 18px;
      transform: translateY(-50%);
      pointer-events: none;
      transform: translateY(-50%);
      pointer-events: none;
      /* 🔥 ใช้ mask แทน background */
      -webkit-mask: url("data:image/svg+xml;utf8,\
                <svg viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'>\
                <path d='M4 6l4 4 4-4' stroke='black' stroke-width='1.2' stroke-linecap='round' stroke-linejoin='round' fill='none'/>\
                </svg>") no-repeat center / contain;
      mask: url("data:image/svg+xml;utf8,\
                <svg viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'>\
                <path d='M4 6l4 4 4-4' stroke='black' stroke-width='1.2' stroke-linecap='round' stroke-linejoin='round' fill='none'/>\
                </svg>") no-repeat center / contain;
      /* 🎯 สีควบคุมจากนี้ */
      background-color: rgba(var(--bs-secondary-color-rgb), .75);
    }

  .choices.is-open[data-type*="select-one"]::before {
    transform: translateY(-50%) rotate(180deg);
  }

  .choices.is-focused[data-type*="select-one"]::before,
  .choices.is-open[data-type*="select-one"]::before {
    background-color: rgba(var(--bs-primary-rgb), .8);
  }

  .choices[data-type*="select-one"] .choices__button {
    margin-right: 33px; /* 🔥 สำคัญ */
    margin-top: -11px;
  }

.choices__button {
  transform: scale(1.25);
}


/* ==== THEME BOOTSTRAP LIGHT/DARK ==== */


/* =========================================================
   THEME LAYER ONLY (SAFE - DO NOT TOUCH STRUCTURE)
   ========================================================= */

/* INPUT COLOR ONLY (ไม่แตะ border / radius / shadow) */
.choices__inner {
  background-color: var(--bs-tertiary-bg);
  color: var(--bs-body-color);
}

/* DROPDOWN COLOR ONLY */
.choices__list--dropdown {
  background-color: var(--bs-body-bg);
  color: var(--bs-body-color);
}

/* ITEM TEXT */
.choices__item--choice {
  color: var(--bs-body-color);
}

  /* HOVER */
  .choices__list--dropdown,
  .choices__item--choice.is-highlighted {
    background: rgba(var(--bs-primary-rgb), .15) !important;
  }

  /* SELECTED */
  .choices__item--choice.is-selected {
    background-color: rgba(var(--bs-link-color-rgb), .5);
    color: #fff;
  }

    /* SELECTED:HOVER */
    .choices__item--choice.is-selected.is-highlighted {
      background-color: rgba(var(--bs-link-color-rgb), .35) !important;
    }

/* SEARCH INPUT */
.choices__input {
  background-color: var(--bs-tertiary-bg);
  color: var(--bs-body-color);
}

/* PLACEHOLDER */
.choices__placeholder {
  color: var(--bs-secondary-color);
}

/* MULTIPLE CHIP (ไม่แตะ layout) */
.choices.is-multiple .choices__item--multiple {
  background-color: rgba(var(--bs-link-color-rgb), .85);
  color: #fff;
}

/* dropdown container */
.choices__list--dropdown {
  background-color: var(--bs-body-bg);
  color: var(--bs-body-color);
}

  /* 🔥 ตัวนี้แหละที่ป๋าขาด */
  .choices__list--dropdown .choices__list {
    background-color: var(--bs-body-bg);
  }

.choices__item--choice {
  background-color: transparent;
}

/* dropdown search */
.choices__input--cloned {
  background-color: var(--bs-tertiary-bg);
  color: var(--bs-body-color);
  border-color: var(--bs-border-color) !important;
  box-shadow: 0 0 3px 1px var(--bs-border-color);
}

/* multiple inline search */
.choices__input {
  background-color: var(--bs-tertiary-bg);
  color: var(--bs-body-color);
}

.choices__input--cloned:focus {
  outline: none;
  border-color: var(--sp-border-focus);
  box-shadow: 0 0 3px 1px rgba(var(--bs-primary-rgb), .5);
}


/* 🔥 search row background FIX */
.choices__list--dropdown .choices__input--cloned {
  background-color: var(--bs-body-bg) !important;
}

/* 🔥 container ของ search row */
.choices__list--dropdown {
  background-color: var(--bs-body-bg);
}

  /* 🔥 inner list */
  .choices__list--dropdown .choices__list {
    background-color: var(--bs-body-bg);
  }


/* ==== MAKE CURSOR VISIBLE IN MULTIPLE MODE ==== */

.choices__input {
  caret-color: var(--bs-body-color) !important;
}

.choices__inner {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
}

.choices.is-multiple .choices__inner .choices__input {
  min-width: 8ch !important;
  /*flex: 0 0 auto !important;*/
}


/* ==== FORM-SELECT-SM/LG ==== */

.choices.sp-sm {
  border-radius: var(--bs-border-radius-sm);
}

.choices.sp-lg {
  border-radius: var(--bs-border-radius-lg);
}

.choices.sp-sm .choices__inner {
  border-radius: var(--bs-border-radius-sm);
}

.choices.sp-lg .choices__inner {
  border-radius: var(--bs-border-radius-lg);
}

.choices .choices__inner {
  height: calc(1.5em + .925rem + 2px);
  min-height: 0;
  padding-top: .15rem;
  padding-left: .5rem;  
  padding-right: 2.5rem; /* 🔥 กัน text ชน caret */
}

.choices.sp-sm .choices__inner {
  height: calc(1.5em + 0.5rem + 2px);
  font-size: .875rem;
  padding-top: 0rem;
  padding-left: .25rem;
}

.choices.sp-lg .choices__inner {
  height: calc(1.5em + 1rem + 2px);
  font-size: 1.25rem;
  padding-top: .25rem;
  padding-left: .75rem;  
}

.choices.sp-sm.is-multiple .choices__inner {
  padding-top: .0rem;
  padding-bottom: .0rem;
}

.choices.sp-lg.is-multiple .choices__inner {
  padding-top: .425rem;
  padding-bottom: .425rem;
}

.choices:not(.is-open) .choices__inner {
  border-radius: inherit !important;
}

.choices.sp-sm .choices__list--dropdown {
  font-size: 0.875rem;
}

.choices.sp-lg .choices__list--dropdown {
  font-size: 1.25rem;
}

.choices .choices__item {
  font-size: 1rem;
}

.choices.sp-sm .choices__item {
  font-size: .875rem;
}

.choices.sp-lg .choices__item {
  font-size: 1.25rem;
}

.choices .choices__input {
  line-height: 1.4;
  font-size: 1rem;
}

.choices.sp-sm .choices__input {
  font-size: .875rem;
}

.choices.sp-lg .choices__input {
  font-size: 1.25rem;
}


.choices.is-multiple .choices__item {
  padding: .2rem 0.45rem;
  margin: 0 .25rem .35rem 0;
  line-height: 1.4;
}

.choices.sp-sm.is-multiple .choices__item {
  padding: .075rem 0.45rem;
  margin: 0 .25rem 0 0;
}

.choices.sp-lg.is-multiple .choices__item {
  padding: .1rem 0.45rem;
  margin: 0 .25rem .25rem 0;
}


.choices.is-multiple .choices__item--choice {
  padding: .5rem .5rem;
  margin: 0;
  line-height: 1.4;
}

.choices.sp-sm.is-multiple .choices__item--choice {
  padding: .4rem .5rem;
  margin: 0;
}

.choices.sp-lg.is-multiple .choices__item--choice {
  padding: .5rem .5rem;
  margin: 0;
}

.choices .choices__item--choice {
  padding: .5rem .5rem;
  margin: 0;
  line-height: 1.4;
  font-size: 1rem !important;
}

.choices.sp-sm .choices__item--choice {
  padding: .4rem .5rem;
  margin: 0;
  font-size: .875rem !important;
}

.choices.sp-lg .choices__item--choice {
  padding: .5rem .5rem;
  margin: 0;
  font-size: 1.25rem !important;
}


.choices.is-multiple .choices__input--cloned {
  padding: .275rem .35rem;
  margin: 0 .2rem .3rem;
  line-height: 1.4;
}

/* ---------- SM ---------- */
.choices.sp-sm.is-multiple .choices__input--cloned {
  padding: .075rem .35rem;
  margin: 0 .2rem 0;
}

/* ---------- LG ---------- */
.choices.sp-lg.is-multiple .choices__input--cloned {
  padding: .15rem .35rem;
  margin: 0 .2rem .25rem;
}

.choices .choices__input--cloned {
  padding: .5rem .35rem;
  line-height: 1.4;
}

.choices.sp-sm .choices__input--cloned {
  padding: .4rem .35rem;
  line-height: 1.4;
}

.choices.sp-lg .choices__input--cloned {
  padding: .5rem .35rem;
  line-height: 1.4;
}



.choices.sp-sm:not(.is-flipped) .choices__list--dropdown {
  margin-top: 0;
  border-top: none;
}

.choices.sp-sm.is-flipped .choices__list--dropdown {
  margin-bottom: 0;
  border-bottom: none;
}

.choices.sp-sm .choices__list--dropdown {
  border-radius: 0 0 var(--bs-border-radius-sm) var(--bs-border-radius-sm);
}

.choices.sp-lg .choices__list--dropdown {
  border-radius: 0 0 var(--bs-border-radius-lg) var(--bs-border-radius-lg);
}

.choices.sp-sm.is-open .choices__inner {
  border-radius: var(--bs-border-radius-sm) var(--bs-border-radius-sm) 0 0;
}

.choices.sp-lg.is-open .choices__inner {
  border-radius: var(--bs-border-radius-lg) var(--bs-border-radius-lg) 0 0;
}

/* SM */
.choices.sp-sm.is-flipped .choices__list--dropdown {
  border-radius: var(--bs-border-radius-sm) var(--bs-border-radius-sm) 0 0;
}

/* LG */
.choices.sp-lg.is-flipped .choices__list--dropdown {
  border-radius: var(--bs-border-radius-lg) var(--bs-border-radius-lg) 0 0;
}

/* SM */
.choices.sp-sm.is-flipped .choices__inner {
  border-radius: 0 0 var(--bs-border-radius-sm) var(--bs-border-radius-sm);
}

/* LG */
.choices.sp-lg.is-flipped .choices__inner {
  border-radius: 0 0 var(--bs-border-radius-lg) var(--bs-border-radius-lg);
}

.choices.is-multiple:not(.is-flipped) .choices__list--dropdown {
  margin-top: 0;
  border-top: none;
}

.choices.is-multiple.is-flipped .choices__list--dropdown {
  margin-bottom: 0;
  border-bottom: none;
}