/* =========================================================
   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);
  /* 🔥 important */
  position: relative;
  z-index: 21;
  /*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 */
  position: relative;
  z-index: 1;
}

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

  .choices.is-open {
    z-index: 20;
  }

  /* 🔥 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: var(--bs-body-bg);
}

/* 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--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;
}



/*.choices.is-multiple .choices__item {
  padding: .25rem .65rem .2rem;
  margin: 0 .25rem .5rem 0;
  line-height: 1.4;
}

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

.choices.sp-lg.is-multiple .choices__item {
  margin: 0 .25rem .25rem 0;
}*/



/*.choices__list--multiple .choices__item {
  background-color: rgba(0,105,125,1);
  border: 1px solid var(--bs-primary-border-subtle);
  color: #fff;
}*/

/* เส้นคั่น */
/*.choices__list--multiple .choices__item .choices__button {
    border-left: 1px solid rgba(255,255,255,0.5);
    margin-left: .5rem;
    padding-left: .5rem;
  }*/


/* =========================================
   SelectPlus - Universal Theme (Dark/Light)
   ========================================= */

.choices__list--multiple .choices__item {
  background-color: var(--bs-secondary-bg);
  color: var(--bs-body-color);
  border: 1px solid var(--bs-border-color);
  border-radius: 999px;
  font-size: 1rem;
  padding: .35rem .5rem .0rem;
  margin: -.3rem .25rem 0 0;
  line-height: 1.25;
  transition: all .15s ease;
}

.choices.sp-sm.is-multiple .choices__item {
  padding: .3rem .5rem 0rem;
  margin: 0 .25rem 0 0;
  font-size: .875rem;
  line-height: 1.25;
}

.choices.sp-lg.is-multiple .choices__item {
  padding: .25rem .5rem;
  margin: -.25rem .25rem 0 0;
  line-height: 1.5;
}

/* 🔥 hover / focus (ให้เด้งขึ้นจริง) */
.choices__list--multiple .choices__item.is-highlighted {
  background-color: var(--bs-primary-bg-subtle);
  border-color: var(--bs-primary);
}

/* =========================================
   X button + separator (ปรับหลัก)
   ========================================= */

.choices__list--multiple .choices__item .choices__button {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.35rem;
  height: inherit;
  margin-left: .5rem;
  padding: 0;
  background: none;
  border-left: none;
  text-indent: 0;
  font-size: 0;
}

  /* separator */
  .choices__list--multiple .choices__item .choices__button::before {
    content: '';
    position: absolute;
    left: .1rem;
    top: -20%;
    bottom: 20%;
    width: 1px;
    background-color: currentColor;
    opacity: .35;
  }

  .choices__list--multiple .choices__item .choices__button:hover::before {
    opacity: .5;
  }

  /* 🔥 X จริง */
  .choices__list--multiple .choices__item .choices__button::after {
    content: '×';
    display: block;
    line-height: 1;
    font-size: 1rem;
    color: var(--bs-body-color);
    transform: translateY(-4px);
  }

.choices.sp-sm .choices__list--multiple .choices__item .choices__button::after {
  transform: translateY(-4px);
}

.choices.sp-lg .choices__list--multiple .choices__item .choices__button::after {
  transform: translateY(-4.5px);
}

/* =========================================
   EXTRA: hover ทั้ง pill
   ========================================= */

.choices__list--multiple .choices__item:hover {
  border-color: var(--bs-primary);
}