/* intl-tel-input skin for the dark contact form (pairs with assets/js/phone-input.js).
 * Scoped to .iti, not .field: on mobile the country list opens as a fullscreen
 * popup appended to <body>, outside the form. */
.iti {
  --iti-border-color: rgba(255,255,255,0.18);
  --iti-country-selector-bg: #0f0f0f;
  --iti-hover-color: rgba(255,255,255,0.08);
  --iti-icon-color: rgba(255,255,255,0.6);
}
.field .iti { display: block; width: 100%; }
.field .iti__country-selector { box-sizing: border-box; }
.iti__selected-dial-code { color: var(--ink); font-family: var(--body); font-size: 15px; }
.iti__country-selector {
  background: #0f0f0f; color: var(--ink);
  border: 2px solid var(--coral); border-radius: 12px;
  box-shadow: 4px 4px 0 var(--coral); overflow: hidden;
}
/* .field input (contact.html) outranks the library's own class, so restate the
 * icon gutters and undo the field border/focus treatment at higher specificity. */
.iti .iti__search-input, .field .iti .iti__search-input {
  width: 100%; padding: 12px calc(var(--iti-spacer-horizontal) * 2 + var(--iti-clear-icon-size)) 12px calc(var(--iti-spacer-horizontal) * 2 + var(--iti-globe-icon-size));
  border: 0; border-bottom: 1px solid rgba(255,255,255,0.18); border-radius: 0;
  background: transparent; color: var(--ink); font-family: var(--body); font-size: 14px;
}
.iti .iti__search-input:focus, .field .iti .iti__search-input:focus { outline: none; box-shadow: none; transform: none; border-color: rgba(255,255,255,0.18); }
.iti__country { font-family: var(--body); font-size: 14px; color: var(--ink); }
.iti__country.iti__highlight { background: rgba(255,255,255,0.08); }
.iti__dial-code { color: rgba(255,255,255,0.5); }