/* Shared closed control plus the browser-independent Dial Dozer option panel. */
.dd-native-select { position: absolute !important; width: 1px !important; height: 1px !important; margin: 0 !important; padding: 0 !important; opacity: 0 !important; pointer-events: none !important; }
.dd-select-trigger { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 0 11px; text-align: left; cursor: pointer; }
.dd-select-trigger > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dd-select-trigger > i { width: 7px; height: 7px; flex: none; margin: 0 2px 4px 4px; border-right: 1.5px solid #78756d; border-bottom: 1.5px solid #78756d; transform: rotate(45deg); transition: transform .14s ease, margin .14s ease; }
.dd-select-trigger[aria-expanded="true"] > i { margin: 4px 2px 0 4px; transform: rotate(225deg); }
.dd-select-trigger:focus-visible { outline: none; border-color: #0f9d64 !important; box-shadow: 0 0 0 3px rgba(15, 157, 100, .12) !important; }
.dd-select-trigger:disabled { color: #a8a49b !important; cursor: default; }

.dd-select-menu {
  position: fixed;
  z-index: 10000;
  max-height: min(320px, calc(100vh - 16px));
  overflow: auto;
  padding: 5px;
  border: 1px solid #ddd8ce;
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 14px 34px rgba(28, 27, 24, .18);
  font-family: inherit;
}
.dd-select-search {
  position: sticky;
  top: 0;
  z-index: 1;
  width: 100%;
  height: 36px;
  margin-bottom: 4px;
  padding: 0 10px;
  border: 1px solid #ddd8ce;
  border-radius: 7px;
  background: #fff;
  color: #302f2b;
  font: 500 12px/1 inherit;
  outline: none;
}
.dd-select-search:focus { border-color:#0f9d64; box-shadow:0 0 0 3px rgba(15,157,100,.1); }
.dd-select-option {
  display: block;
  width: 100%;
  min-height: 34px;
  padding: 8px 10px;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: #46443f;
  font-family: inherit;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.35;
  text-align: left;
  cursor: pointer;
}
.dd-select-option:hover,
.dd-select-option:focus-visible { background: #f4f2ed; outline: none; }
.dd-select-option[aria-selected="true"] { background: #e8f5ee; color: #0c8654; font-weight: 700; }
.dd-select-option:disabled { color: #aaa69d; cursor: default; }

/* Multi-select rows carry a checkbox so "picked" reads as a state you can add
   to, not a choice that replaced the last one. Options stay on one line and the
   menu grows to fit them (see placeMenu) rather than scrolling sideways. */
.dd-select-option { white-space: nowrap; }
.dd-select-option--check { display: flex; align-items: center; gap: 9px; }
.dd-select-option--check::before {
  content: '';
  flex: none;
  width: 15px;
  height: 15px;
  border: 1.5px solid #c9c4b9;
  border-radius: 4px;
  background: #fff;
}
.dd-select-option--check.is-checked::before {
  border-color: #0f9d64;
  background: #0f9d64 no-repeat center/10px 10px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath fill='none' stroke='%23fff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round' d='M2 6.3l2.6 2.6L10 3.5'/%3E%3C/svg%3E");
}
/* A checked multi row keeps the normal surface: the checkbox already says it,
   and the green fill would read as "this one replaced the others". */
.dd-select-option--check[aria-selected="true"] { background: transparent; color: #46443f; font-weight: 500; }
.dd-select-option--check[aria-selected="true"]:hover { background: #f4f2ed; }

html.casa-dark .dd-select-option--check::before { border-color: #5a5852; background-color: #2a2a28; }
html.casa-dark .dd-select-option--check.is-checked::before { border-color: #0f9d64; background-color: #0f9d64; }
html.casa-dark .dd-select-option--check[aria-selected="true"] { background: transparent; color: #d9d6d0; }
html.casa-dark .dd-select-option--check[aria-selected="true"]:hover { background: #3a3936; }

html.casa-dark .dd-select-menu { border-color: #4a4945; background: #30302e; box-shadow: 0 14px 34px rgba(0, 0, 0, .34); }
html.casa-dark .dd-select-search { border-color:#4a4945; background:#262624; color:#f0eee9; }
html.casa-dark .dd-select-option { color: #d9d6d0; }
html.casa-dark .dd-select-option:hover,
html.casa-dark .dd-select-option:focus-visible { background: #3a3936; }
html.casa-dark .dd-select-option[aria-selected="true"] { background: rgba(15, 157, 100, .18); color: #6fd3aa; }