/* ========================================
   Metsahirvas: Elementor + Tom Select
   ======================================== */

.mh-tom-select {
  --mh-ts-accent: #dd6b49;
  --mh-ts-border: #3C3C3B;
  --mh-ts-background: #ffffff;
  --mh-ts-text: #3C3C3B;
  --mh-ts-radius: 0px;
  --mh-ts-min-height: 40px;
  
  --mh-ts-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='13' height='7' viewBox='0 0 13 7' stroke='%233C3C3B' fill='%233C3C3B'%3E%3Cpath d='M6.5154 6.17505L12.1154 0.875003C12.2154 0.775003 12.2154 0.575003 12.1154 0.375003C12.0154 0.275003 11.8154 0.275003 11.6154 0.375003L6.6154 5.17505L6.3154 5.47504L6.0154 5.17505L0.915397 0.375003C0.815397 0.275003 0.615397 0.275003 0.415397 0.375003C0.215397 0.475003 0.315397 0.675003 0.415397 0.875003L6.0154 6.17505C6.2154 6.27505 6.3154 6.27505 6.5154 6.17505Z' fill='%233C3C3B'/%3E%3C/svg%3E");
}

/* Elementor-Wrapper auf volle Breite setzen */
.mh-tom-select .elementor-select-wrapper.mh-ts-enhanced {
  display: block;
  width: 100%;
}

.mh-tom-select .ts-wrapper {
	padding: 0 !important;
}
.mh-tom-select .elementor-field-group .elementor-field-textual {
	border-bottom: none;
}

/* Elementor-Pfeil nur an tatsächlich umgewandelten Feldern entfernen */
.mh-tom-select .mh-ts-enhanced::before,
.mh-tom-select .mh-ts-enhanced::after,
.mh-tom-select .mh-ts-enhanced .select-caret-down-wrapper {
  display: none !important;
}

/* Wrapper */
.mh-tom-select .ts-wrapper {
  width: 100%;
  font-family: inherit;
  font-size: 16px;
  line-height: 1.5;
}

/* Geschlossenes Eingabefeld */
.mh-tom-select .ts-wrapper.multi .ts-control {
  min-height: var(--mh-ts-min-height);
  /*padding: 9px 36px 9px 12px;*/
  gap: 5px;
  align-items: center;

  border: 0px solid var(--mh-ts-border);
  border-radius: var(--mh-ts-radius);
  background: var(--mh-ts-background);
  color: var(--mh-ts-text);
  box-shadow: none;
}

/* Eigener SVG-Dropdown-Pfeil */
.mh-tom-select .ts-control {
  position: relative;
  padding-right: 36px;
}

.mh-tom-select .ts-control::after {
  content: "";
  position: absolute;
  top: 20px;
  right: 15px;

  width: 13px;
  height: 7px;

  background-image: var(--mh-ts-arrow);
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;

  border: none;
  transform: translateY(-50%);
  transform-origin: center;
  transition: transform 0.2s ease;
  pointer-events: none;
}

/* Bei geöffnetem Dropdown nach oben drehen */
.mh-tom-select .dropdown-active .ts-control::after {
  transform: translateY(-50%) rotate(180deg);
}

/* Fokus */
.mh-tom-select .ts-wrapper.focus .ts-control {
  border-color: var(--mh-ts-accent);
  box-shadow: 0 0 0 0px rgb(82 107 69 / 18%);
}

/* Sucheingabe: globale Elementor-Input-Regeln überschreiben */
.mh-tom-select .ts-control > input {
  min-width: 5rem;
  width: auto;
  min-height: 0 !important;
  height: auto !important;
  margin: 0 !important;
  padding: 0 !important;

  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;

  color: inherit;
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
}

.mh-tom-select .ts-control > input::placeholder {
  color: #3C3C3B;
  opacity: 0.3;
}

/* Ausgewählte Einträge im Feld */
.mh-tom-select .ts-wrapper.multi .ts-control > .item {
  margin: 0;
  padding: 3px 8px;
  border: 0;
  border-radius: 0x;
  background: none; /*var(--mh-ts-accent);*/
  color: var(--mh-ts-text);
  font-size: 1.2em;
  text-shadow: none;
  box-shadow: none !important;
}

/* Dropdown */
.mh-tom-select .ts-dropdown {
  z-index: 1000;
  margin-top: 5px;
  overflow: hidden;

  border: 1px solid var(--mh-ts-border);
  border-radius: var(--mh-ts-radius);
  background: var(--mh-ts-background);
  color: var(--mh-ts-text);
  box-shadow: 0 8px 24px rgb(0 0 0 / 12%);

  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
}

.mh-tom-select .ts-dropdown-content {
  max-height: 260px;
  overscroll-behavior: contain;
}

.mh-tom-select .ts-dropdown .option {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  padding: 10px 12px;
  cursor: pointer;
}

.mh-tom-select .ts-dropdown .option.active {
  background: none;
  color: var(--mh-ts-text);
}

.mh-tom-select .ts-dropdown .option.selected {
  /*background: #f2f5ef;*/
  color: var(--mh-ts-text);
}

/* Checkboxen des checkbox_options-Plugins */
.mh-tom-select .ts-dropdown .tomselect-checkbox {
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  min-height: 0;
  margin: 0;
  padding: 0;

  appearance: auto;
  -webkit-appearance: checkbox;
  accent-color: var(--mh-ts-accent);
}

.mh-tom-select .ts-dropdown .no-results {
  padding: 12px;
  color: #737a71;
}

/* Pflichtfeld ohne gültige Auswahl */
.mh-tom-select .ts-wrapper.invalid .ts-control {
  border-color: #b42318;
}

/* Deaktiviertes Feld */
.mh-tom-select .ts-wrapper.disabled .ts-control {
  background: #f3f3f3;
  opacity: 0.65;
  cursor: not-allowed;
}