/*
 * intl-tel-input fixes for the account and checkout phone fields.
 *
 * Hello Elementor's reset paints every button pink on hover/focus
 * (button:hover { background-color: #c36 }) and gives it a pink border; the
 * country selector and the search clear (x) are buttons. The same reset's
 * input[type="search"] padding (1rem) also beats the search box's own left
 * padding, so the magnifier sat on top of the "Search" text.
 */
.iti button.iti__selected-country,
.iti button.iti__selected-country:hover,
.iti button.iti__selected-country:focus,
.iti button.iti__selected-country:active {
	background-color: transparent;
	color: inherit;
	box-shadow: none;
}

.iti button.iti__search-clear,
.iti button.iti__search-clear:hover,
.iti button.iti__search-clear:focus,
.iti button.iti__search-clear:active {
	padding: 0 10px;
	border: 0;
	border-radius: 0;
	background-color: transparent;
	color: inherit;
	box-shadow: none;
}

.iti button.iti__selected-country:focus-visible,
.iti button.iti__search-clear:focus-visible {
	outline: 1px solid rgba(26, 35, 61, 0.45);
	outline-offset: 3px;
}

input[type="search"].iti__search-input {
	padding-left: calc(var(--iti-spacer-horizontal) + var(--iti-globe-icon-size) + var(--iti-spacer-horizontal));
	border: 0;
	border-bottom: 1px solid rgba(26, 35, 61, 0.14);
	border-radius: 0;
	box-shadow: none;
}

input[type="search"].iti__search-input:focus {
	outline: none;
	border-bottom-color: #1a233d;
}

/* On phones the list is a full-screen popup at the end of the body and took
   the body's serif; keep the field's Montserrat. */
.iti--detached-country-selector {
	font-family: "Montserrat", "Helvetica Neue", Arial, sans-serif;
}

/* The list always reserved a grey scrollbar track, even for three results. */
.iti .iti__country-list {
	overflow-y: auto;
}