/* intl-tel-input: Vuexy / admin theme alignment
   Phone widgets stay LTR (flag + dial code + number) even when the page is Arabic. */

.iti {
  /* Match Vuexy form-control tokens (not library defaults: #ccc / black) */
  --iti-border-color: #dbdade;
  --iti-border-width: 1px;
  --iti-hover-color: rgba(115, 103, 240, 0.08);
  --iti-dialcode-color: #6f6b7d;
  --iti-dropdown-bg: #fff;
  --iti-arrow-color: #6f6b7d;
  --iti-icon-color: #6f6b7d;
  --iti-search-bg: #fff;
  --iti-search-color: #6f6b7d;
  --iti-search-placeholder-color: #b7b5be;
  --iti-input-bg: #fff;
  --iti-input-color: #6f6b7d;
  --iti-countryname-color: #5d596c;
  --iti-country-selector-bg: transparent;

  width: 100%;
  display: block;
  direction: ltr;
  text-align: left;
  unicode-bidi: isolate;
}

.iti .iti__tel-input,
.iti input.form-control {
  width: 100%;
  direction: ltr !important;
  text-align: left !important;
  unicode-bidi: isolate;
}

/* Flag + dial code always on the left of the LTR phone field */
.iti__country-container {
  left: 0 !important;
  right: auto !important;
}

.iti__selected-country,
.iti__selected-country-primary {
  border: 0 !important;
  background: transparent !important;
  border-radius: 0.375rem 0 0 0.375rem;
  gap: 0.4rem;
  padding-inline: 0.55rem 0.45rem !important;
}

.iti__selected-country:hover,
.iti__selected-country:focus,
.iti__selected-country[aria-expanded="true"] {
  background: rgba(115, 103, 240, 0.06) !important;
}

/* Space between flag and dropdown arrow (esp. noticeable on RTL admin pages) */
.iti__arrow,
.iti__arrow--up {
  margin-inline-start: 0.45rem !important;
  margin-left: 0.45rem !important;
}

/* Space after +971 before the typed number */
.iti__selected-dial-code {
  margin-inline-end: 0.45rem !important;
  margin-right: 0.45rem !important;
  padding-inline-end: 0.15rem !important;
}

/* Dropdown panel */
.iti__dropdown-content {
  left: 0 !important;
  right: auto !important;
  text-align: left;
  direction: ltr;
  border: 1px solid #dbdade !important;
  border-radius: 0.375rem !important;
  box-shadow: 0 0.25rem 1rem rgba(165, 163, 174, 0.3) !important;
  overflow: hidden;
  background: var(--iti-dropdown-bg);
  z-index: 1090;
}

.iti__country-list {
  border: 0 !important;
  margin: 0;
  box-shadow: none !important;
}

.iti__country {
  padding: 0.5rem 0.875rem;
  color: #5d596c;
}

.iti__country.iti__highlight,
.iti__country:hover {
  background-color: rgba(115, 103, 240, 0.08) !important;
}

.iti__divider {
  border-bottom-color: #dbdade !important;
}

/* Search field — match .form-control height / border (not thick black chrome) */
.iti__search-input,
.iti input.iti__search-input,
.iti__dropdown-content input[type="search"],
.iti__dropdown-content input[type="text"] {
  display: block;
  width: calc(100% - 1rem) !important;
  margin: 0.5rem !important;
  padding: 0.422rem 0.875rem !important;
  font-size: 0.9375rem !important;
  font-weight: 400 !important;
  line-height: 1.5 !important;
  color: #6f6b7d !important;
  background-color: #fff !important;
  border: 1px solid #dbdade !important;
  border-radius: 0.375rem !important;
  box-shadow: none !important;
  outline: 0 !important;
  height: auto !important;
  min-height: calc(1.5em + 0.844rem + 2px);
  box-sizing: border-box;
}

.iti__search-input:focus,
.iti input.iti__search-input:focus,
.iti__dropdown-content input[type="search"]:focus,
.iti__dropdown-content input[type="text"]:focus {
  border-color: var(--admin-primary, #7367f0) !important;
  box-shadow: 0 0.125rem 0.25rem rgba(165, 163, 174, 0.3) !important;
  outline: 0 !important;
}

.iti__search-input::placeholder {
  color: transparent !important;
  opacity: 0 !important;
}

.iti__search-input::-webkit-input-placeholder {
  color: transparent !important;
  opacity: 0 !important;
}

.iti__search-input::-moz-placeholder {
  color: transparent !important;
  opacity: 0 !important;
}

/* Search row wrapper (newer ITI versions) */
.iti__search-input-wrapper,
.iti__search {
  border: 0 !important;
  border-bottom: 1px solid #dbdade !important;
  background: #fff !important;
  padding: 0.25rem 0;
}

.iti__search-input-wrapper .iti__search-input,
.iti__search .iti__search-input {
  margin: 0.35rem 0.5rem !important;
  width: calc(100% - 1rem) !important;
}

/*
 * Do not set padding-left here — JS sets it from the dial-code width.
 * Only keep a normal right padding so Vuexy RTL form styles don't squeeze the text.
 */
.iti--separate-dial-code .iti__tel-input.form-control,
.iti--separate-dial-code input.form-control {
  padding-right: 0.875rem !important;
  padding-inline-end: 0.875rem !important;
}

/* Dark admin theme */
html.dark-style .iti,
[data-bs-theme="dark"] .iti {
  --iti-border-color: #434968;
  --iti-hover-color: rgba(115, 103, 240, 0.16);
  --iti-dialcode-color: #c2c6dc;
  --iti-dropdown-bg: #2f3349;
  --iti-arrow-color: #c2c6dc;
  --iti-icon-color: #c2c6dc;
  --iti-search-bg: #25293c;
  --iti-search-color: #c2c6dc;
  --iti-search-placeholder-color: #7983bb;
  --iti-input-bg: #25293c;
  --iti-input-color: #c2c6dc;
  --iti-countryname-color: #c2c6dc;
}

html.dark-style .iti__dropdown-content,
[data-bs-theme="dark"] .iti__dropdown-content {
  border-color: #434968 !important;
  box-shadow: 0 0.25rem 1.25rem rgba(0, 0, 0, 0.45) !important;
  background: #2f3349 !important;
}

html.dark-style .iti__search-input,
html.dark-style .iti input.iti__search-input,
html.dark-style .iti__dropdown-content input[type="search"],
html.dark-style .iti__dropdown-content input[type="text"],
[data-bs-theme="dark"] .iti__search-input,
[data-bs-theme="dark"] .iti input.iti__search-input,
[data-bs-theme="dark"] .iti__dropdown-content input[type="search"],
[data-bs-theme="dark"] .iti__dropdown-content input[type="text"] {
  color: #c2c6dc !important;
  background-color: #25293c !important;
  border-color: #434968 !important;
}

html.dark-style .iti__search-input-wrapper,
html.dark-style .iti__search,
[data-bs-theme="dark"] .iti__search-input-wrapper,
[data-bs-theme="dark"] .iti__search {
  border-bottom-color: #434968 !important;
  background: #2f3349 !important;
}

html.dark-style .iti__country,
[data-bs-theme="dark"] .iti__country {
  color: #c2c6dc;
}

html.dark-style .iti__divider,
[data-bs-theme="dark"] .iti__divider {
  border-bottom-color: #434968 !important;
}