/* Site Toolkit: country code picker on Elementor Pro Tel fields. Works on top of vendor/intl-tel-input. */
.stk-tel.iti {
	width: 100%;
	display: block;
}

/* The field keeps Elementor's look; the selector button sits inside it. */
.stk-tel.iti input.iti__tel-input,
.stk-tel.iti input.iti__tel-input[type="tel"] {
	width: 100%;
	/* Phone numbers read left to right on right-to-left pages too. */
	direction: ltr;
	text-align: start;
}
[dir="rtl"] .stk-tel.iti input.iti__tel-input,
[dir="rtl"] .stk-tel.iti input.iti__tel-input[type="tel"] {
	text-align: right;
}

.stk-tel .iti__country-container {
	z-index: 2;
}

.stk-tel .iti__selected-country {
	cursor: pointer;
	color: inherit;
}

.stk-tel .iti__selected-country:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: -2px;
}

/* The dropdown must stay above Elementor columns, sticky headers and popups. */
.stk-tel .iti__dropdown-content {
	z-index: 99999;
	color: #333;
	background: #fff;
	font-size: 14px;
	line-height: 1.4;
	text-align: start;
	min-width: 250px;
}

.stk-tel .iti__search-input {
	color: #333;
	background: #fff;
	font-size: 14px;
	min-height: 0;
	height: auto;
	margin: 0;
	box-shadow: none;
}

.stk-tel .iti__search-input:focus-visible {
	outline: 2px solid #2271b1;
	outline-offset: -2px;
}

/* The library's #999 on white is 2.85:1; #595959 on white is 7:1 (WCAG AA needs 4.5:1). */
.stk-tel {
	--iti-dial-code-color: #595959;
}
.stk-tel .iti__dial-code {
	color: #595959;
}

.stk-tel .iti__country {
	cursor: pointer;
}

.stk-tel .iti__country.iti__highlight,
.stk-tel .iti__country:hover {
	background-color: rgba(0, 0, 0, 0.06);
}

.stk-tel .iti__country:focus-visible {
	outline: 2px solid #2271b1;
	outline-offset: -2px;
}

/* "Show flags" off: a globe replaces the selected flag and the list shows no flags. */
.stk-tel--noflags .iti__selected-country .iti__flag {
	background-image: var(--iti-path-globe-1x);
	background-size: contain;
	background-position: center;
	box-shadow: none;
}
@media (min-resolution: 2x) {
	.stk-tel--noflags .iti__selected-country .iti__flag {
		background-image: var(--iti-path-globe-2x);
	}
}
.stk-tel--noflags .iti__flag-box {
	display: none;
}

.stk-tel .iti__selected-dial-code {
	color: inherit;
	line-height: normal;
	margin-top: 0;
	font-size: inherit;
}

.stk-tel.stk-tel--invalid input.iti__tel-input {
	border-color: #d9534f;
}

.stk-tel__error {
	display: block;
}

/* Messages that Elementor Pro appends inside the box are moved out by the script; until then they must not make
   the box (and the flag button, which spans its full height) taller. */
.stk-tel.iti > .elementor-message {
	position: absolute;
	top: 100%;
	inset-inline-start: 0;
}

@media (prefers-reduced-motion: no-preference) {
	.stk-tel .iti__arrow {
		transition: transform 0.15s;
	}
}

/* Dial codes are numbers: they keep their "+" in front on right-to-left pages. */
.stk-tel .iti__dial-code,
.stk-tel .iti__selected-dial-code {
	direction: ltr;
	unicode-bidi: isolate;
}