/**
 * intl-tel-input v27+ with theme styles written for v17.
 * style.css / style.min.css set per-country background-position for an old sprite;
 * v27 uses --iti-flag-offset + a different sheet — without this, flags are blank and the
 * arrow mixes old (0×0 triangle) and new (rotated box) rules into a "diamond".
 */
.iti .iti__flag {
  width: var(--iti-flag-width, 20px) !important;
  height: var(--iti-flag-height) !important;
  /* Plain url first: works if image-set()/CSS variables fail; paths relative to this file */
  background-image: url("../vendor/intl-tel-input/dist/img/flags.webp") !important;
  background-image: image-set(
    url("../vendor/intl-tel-input/dist/img/flags.webp") 1x,
    url("../vendor/intl-tel-input/dist/img/flags@2x.webp") 2x
  ) !important;
  background-repeat: no-repeat !important;
  background-position: calc(var(--iti-flag-offset, 0) * var(--iti-flag-width, 20px)) 0 !important;
  background-size: calc(var(--iti-flag-sprite-width, 244) * var(--iti-flag-width, 20px))
    calc(var(--iti-flag-sprite-height, 1) * var(--iti-flag-height)) !important;
  box-shadow: 0 0 1px 0 #888 !important;
  border-radius: 1px !important;
}

.iti .iti__arrow {
  display: block !important;
  width: var(--iti-arrow-size, 5px) !important;
  height: var(--iti-arrow-size, 5px) !important;
  margin-left: var(--iti-arrow-padding, 7px) !important;
  margin-top: -2px !important;
  border-left: 0 !important;
  border-top: 0 !important;
  border-right: var(--iti-arrow-width, 1.5px) solid var(--iti-icon-color, #555) !important;
  border-bottom: var(--iti-arrow-width, 1.5px) solid var(--iti-icon-color, #555) !important;
  transform: rotate(45deg) !important;
  box-sizing: border-box !important;
}

.iti .iti__arrow--up {
  margin-top: 4px !important;
  border-top: 0 !important;
  border-bottom: var(--iti-arrow-width, 1.5px) solid var(--iti-icon-color, #555) !important;
  transform: rotate(-135deg) !important;
}

/* Dropdown + country search (v27): theme v17 CSS used position:absolute + top:100% on
   .iti__country-list — inside .iti__dropdown-content that hides the list. Reset here. */
.iti .iti__dropdown-content {
  --iti-border-color: rgba(195, 198, 204, 0.45);
  --iti-icon-color: #7c8289;
}

.iti--inline-dropdown .iti__dropdown-content {
  border-radius: 0.8rem;
  /* Do not use overflow:hidden — clips the abs-positioned list from legacy theme rules */
  overflow: visible;
  box-shadow: 0 0.4rem 2rem rgba(29, 29, 32, 0.08);
}

.iti__dropdown-content .iti__country-list {
  position: relative !important;
  top: auto !important;
  left: auto !important;
  right: auto !important;
  width: 100% !important;
  max-width: 100%;
  margin: 0 !important;
  box-sizing: border-box;
}

/* One visual block: search row + list share the same panel (reference screen 3 open) */
.iti .iti__search-input-wrapper {
  padding: 0.6rem 1rem 0.8rem;
  border-bottom: 1px solid rgba(195, 198, 204, 0.35);
  background: #fff;
}

.iti .iti__search-input {
  width: 100%;
  margin: 0;
  padding: 1rem 3.2rem 1rem 3.4rem;
  font-family: FSElliotPro, system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: 1.6rem;
  line-height: 1.4;
  letter-spacing: 0;
  color: #1d1d20;
  background: #f7f8fa;
  border: 1px solid rgba(195, 198, 204, 0.35);
  border-radius: 0.6rem;
  outline: none;
  box-shadow: none;
  -webkit-appearance: none;
  appearance: none;
  transition: border-color 0.2s ease, background-color 0.2s ease;
}

.iti .iti__search-input::placeholder {
  color: #7c8289;
}

.iti .iti__search-input:hover {
  border-color: rgba(160, 167, 187, 0.65);
  background: #fff;
}

.iti .iti__search-input:focus {
  outline: none;
  border-color: #a0a7bb;
  background: #fff;
  box-shadow: none;
}

.iti .iti__search-input:focus-visible {
  box-shadow: 0 0 0 1px rgba(160, 167, 187, 0.45);
}

.iti .iti__search-icon {
  left: 1.6rem;
}

.iti .iti__search-clear {
  right: 1.2rem;
}

[dir='rtl'] .iti .iti__search-icon {
  left: auto;
  right: 1.6rem;
}

[dir='rtl'] .iti .iti__search-clear {
  right: auto;
  left: 1.2rem;
}

[dir='rtl'] .iti .iti__search-input {
  padding-left: 3.2rem;
  padding-right: 3.4rem;
}

.iti--fullscreen-popup .iti__search-input-wrapper {
  padding: 1rem 1.2rem;
}

.iti--fullscreen-popup .iti__search-input {
  font-size: 1.6rem;
  padding-top: 1.4rem;
  padding-bottom: 1.4rem;
}

/* Closed field: one rounded control + divider (reference “screen 3”, separateDialCode) */
.iti.iti--separate-dial-code {
  border: 1px solid rgba(195, 198, 204, 0.4);
  border-radius: 0.8rem;
  background: #fff;
  box-sizing: border-box;
}

.iti.iti--separate-dial-code .iti__tel-input.form__control,
.iti.iti--separate-dial-code input.iti__tel-input.form__control {
  border: none !important;
  box-shadow: none !important;
  border-radius: 0 0.8rem 0.8rem 0 !important;
}

.iti.iti--separate-dial-code .iti__country-container {
  border-right: 1px solid rgba(195, 198, 204, 0.45);
}

.iti.iti--separate-dial-code .iti__selected-dial-code {
  color: #7c8289;
  font-size: 1.6rem;
  font-weight: 400;
}

@media screen and (min-width: 992px) {
  .iti.iti--separate-dial-code:hover {
    border-color: #a0a7bb;
  }
}

.iti.iti--separate-dial-code:focus-within {
  border-color: #a0a7bb;
}

.popup__form--lead .form__flex__group.astons-invalid .iti.iti--separate-dial-code,
.popup__form--lead .astons-form-control-wrap.astons-invalid .iti.iti--separate-dial-code,
.form__block .form__block__item.astons-invalid .iti.iti--separate-dial-code,
.product__hero__form .form__flex__group.astons-invalid .iti.iti--separate-dial-code {
  border-color: #c8102e;
}