.form-field {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  margin-bottom: 10px;
  position: relative; /* Add this line */
}

.city-selection-wrap {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: fit-content;
}

datalist {
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  background-color: #ffffff;
  border: 1px solid #aaa;
  border-radius: 4px;
  box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
  z-index: 10;
  max-height: 200px;
  overflow-y: auto;
}

input[list] {
  width: 300px;
  padding: 10px;
  border: 1px solid #ddd;
  border-radius: 4px;
  font-size: 16px;
}

option {
  padding: 8px 10px;
  cursor: pointer;
  font-size: 16px;
}

option:hover {
  background-color: #e0e0e0;
}


.ts-dropdown, .ts-dropdown-content { background:#ffffff !important; }


/* Force white background for Tom Select UI (some themes override to a yellow/cream tone) */
.ts-wrapper .ts-control,
.ts-wrapper .ts-control input,
.ts-dropdown,
.ts-dropdown-content,
.ts-dropdown .option {
  background-color: #ffffff !important;
}

/* Optional: keep hover/active visible while staying light */
.ts-dropdown .option.active,
.ts-dropdown .option:hover {
  background-color: #f2f2f2 !important;
}


/* Strong override for themes that apply cream/yellow backgrounds with !important */
body .ts-dropdown,
body .ts-dropdown-content,
body .ts-dropdown .option,
body .ts-wrapper .ts-control,
body .ts-wrapper.single .ts-control,
body .ts-wrapper .ts-control input {
  background: #ffffff !important;
  background-color: #ffffff !important;
}
/* =========================================
   Force RIGHT alignment (city/street dropdown)
   Works regardless of browser/user locale
   ========================================= */
body .ts-wrapper,
body .ts-wrapper .ts-control,
body .ts-wrapper .ts-control input,
body .ts-dropdown,
body .ts-dropdown-content,
body .ts-dropdown .option,
body .ts-dropdown .no-results,
body .ts-dropdown .create {
  direction: rtl !important;
  text-align: right !important;
}

body input[list],
body input[list]::placeholder {
  direction: rtl !important;
  text-align: right !important;
}