/* ------------------------------------------------------------------
   contact-phone.css — fits intl-tel-input (v19, "same as Webority.Web")
   into the dark, floating-label /contact form.

   intl-tel-input builds its markup in JS (no Razor CSS-isolation scope),
   so these rules are global. They (a) restyle the country dropdown +
   selected dial code for the dark theme and (b) keep the floating label
   working once the input is wrapped in .iti.
   ------------------------------------------------------------------ */

/* Wrapper spans the field width. */
.contact-iti .iti { width: 100%; display: block; }

/* The wrapped input keeps the page's transparent / underline style. */
.contact-iti .iti__tel-input {
  width: 100%;
  background: transparent;
}

/* Selected flag button + dial code (the "+91" prefix) on the dark field. */
.contact-iti .iti__selected-flag { background: transparent !important; }
.contact-iti .iti__selected-dial-code { color: var(--color-fg, #f4f4f5); }
.contact-iti .iti__arrow { border-top-color: var(--color-d-text-3, #8a8b90); }
.contact-iti .iti__arrow--up { border-bottom-color: var(--color-d-text-3, #8a8b90); }

/* The floating label would overlap the flag/dial code at rest — because the
   dial code is always shown, keep the label permanently in its floated state. */
.contact-iti .floatLabel {
  transform: translateY(-1.6rem);
  font-size: var(--t-micro, 0.72rem);
  color: var(--color-d-text-3, #8a8b90);
}

/* ===== Country dropdown — dark theme ===== */
.iti__country-list {
  background: var(--color-bg, #0a0a0b);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 0.6rem;
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.55);
  color: var(--color-fg, #f4f4f5);
  z-index: 1056;
}

.iti__country { color: var(--color-fg, #f4f4f5); }
.iti__country.iti__highlight,
.iti__country:hover { background: rgba(255, 255, 255, 0.10); }
.iti__dial-code { color: var(--color-d-text-3, #8a8b90); }
.iti__divider { border-bottom-color: rgba(255, 255, 255, 0.12); }

/* Search box inside the dropdown (v19). */
.iti__search-input {
  background: rgba(255, 255, 255, 0.04);
  border: 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
  color: var(--color-fg, #f4f4f5);
}
.iti__search-input::placeholder { color: var(--color-d-text-4, #5c5d62); }