:root {
  --iti-path-flags-1x: url('../intl-tel-input/img/flags.webp');
  --iti-path-flags-2x: url('../intl-tel-input/img/flags@2x.webp');
}

.iti {
  --iti-border-color: hsl(var(--border));
  --iti-country-selector-bg: hsl(var(--background));
  --iti-hover-color: hsl(var(--secondary));
  --iti-icon-color: hsl(var(--muted-foreground));
  width: 100%;
}

/* Поле телефона на тёмной карточке (форма на странице контактов). */
.hpbs-phone-on-dark .iti {
  --iti-border-color: hsl(var(--primary-foreground) / 0.2);
  --iti-hover-color: hsl(var(--primary-foreground) / 0.12);
  --iti-icon-color: hsl(var(--primary-foreground) / 0.5);
  color: hsl(var(--primary-foreground));
}

/* Список стран непрозрачный, поэтому собираем его фон из цвета карточки. */
.hpbs-phone-on-dark .iti__country-selector {
  --iti-country-selector-bg: hsl(var(--primary));
  background-image: linear-gradient(hsl(var(--primary-foreground) / 0.08), hsl(var(--primary-foreground) / 0.08));
  box-shadow: 0 12px 28px hsl(var(--foreground) / 0.35);
}

.hpbs-phone-on-dark .iti__country-list {
  scrollbar-color: hsl(var(--primary-foreground) / 0.3) transparent;
}

.hpbs-phone-on-dark .iti__search-input {
  background-color: hsl(var(--primary-foreground) / 0.1);
  color: inherit;
}

.hpbs-phone-on-dark .iti__search-input::placeholder {
  color: hsl(var(--primary-foreground) / 0.5);
}