/**
 * sscustomerphone 1.1.0 — intl-tel-input inside the theme's forms, in the shop's pink and white.
 * Only layout and intl-tel-input's own colour variables are set here; its rules stay as shipped.
 * The phone input keeps the theme's .form-control skin, focus ring included.
 */
.iti {
  --iti-border-color: var(--skt-pink-border, #f0dce8);
  --iti-hover-color: #fef0f7;
  --iti-country-selector-bg: #fff;
  --iti-icon-color: #5c4453;
  --iti-strict-reject-flash-color: rgba(213, 0, 117, 0.12);
  display: block;
  width: 100%;
}

/*
 * The list opens upwards when the field is low in the viewport, under the theme's sticky
 * #header (z-index 1030). 1031 keeps it above the header and below Bootstrap's modals (1050+).
 * Same selector as the library's own z-index:2 rule, so this one wins by coming later. (The
 * detached / mobile full-screen list is already at 1060.)
 */
.iti--inline-country-selector:not(.iti--detached-country-selector) .iti__country-selector {
  z-index: 1031;
}

/* The country button gets the same ring as the theme's focused inputs. */
.iti__selected-country:focus-visible {
  outline: none;
  border-radius: 10px 0 0 10px;
  box-shadow: 0 0 0 3px var(--ac-pink-tint, rgba(213, 0, 117, 0.2));
}

.iti__search-input:focus {
  outline: none;
  border-color: var(--skt-pink, #d50075);
}