/**
 * The country-code dropdown and the phone input, side by side.
 *
 * Deliberately almost empty on colour and border: the script copies those from the
 * input's own computed style, because the six forms on this site are each styled
 * separately in Elementor's generated CSS. Anything hard-coded here would be wrong on
 * at least one of them.
 */

.flrx-phone {
	display: flex;
	align-items: stretch;
	width: 100%;
	gap: 4px;
}

.flrx-phone > input {
	flex: 1 1 auto;
	min-width: 0;
}

.flrx-phone__cc {
	flex: 0 0 auto;
	/* Only a starting point: the script measures the dial code it is actually showing
	   and sets an exact width. Everything around the text is pared back to the
	   minimum so the control is barely wider than "+1" itself — the open list sizes
	   itself to the country names regardless, so nothing is lost by it. */
	width: 3.1em;
	/* Still has to be worth aiming a thumb at. */
	min-width: 27px;
	max-width: 45%;
	box-sizing: border-box;
	padding-right: 10px;
	padding-left: 2px;
	text-align: center;
	border-style: solid;
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath fill='%2358595b' d='M0 0h10L5 6z'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 2px center;
	background-size: 7px 4px;
	line-height: 1.2;
	cursor: pointer;
}

.flrx-phone__cc:focus {
	outline-offset: 1px;
}

/* The arrow is drawn on top of the copied background colour, so the swatch the
   script applies must not paint over it. */
.flrx-phone__cc option {
	color: #231f20;
	background: #fff;
}

@media (max-width: 767px) {
	.flrx-phone {
		gap: 6px;
	}
}