/**
 * WPForms Plus — Smart Phone field (intl-tel-input v28) inside WPForms forms.
 * Works with both the classic and the modern render engines and with RTL.
 */

/*
 * WPForms' "Full" form styles reset every element inside the form
 * (`div.wpforms-container-full .wpforms-form *` => width/height auto, no
 * background, position static, no padding...), which beats the intl-tel-input
 * stylesheet and breaks the flag, the arrow and the hidden dropdown (a giant
 * globe icon shows up). Everything the library needs is restated below with a
 * higher specificity.
 */
div.wpforms-container .wpforms-form .iti {
	position: relative;
	display: block;
	width: 100%;
}

div.wpforms-container .wpforms-form .iti * {
	box-sizing: border-box;
}

div.wpforms-container .wpforms-form .iti input.iti__tel-input,
div.wpforms-container .wpforms-form .iti input.iti__tel-input[type="text"],
div.wpforms-container .wpforms-form .iti input.iti__tel-input[type="tel"] {
	position: relative;
	z-index: 0;
	display: block;
	min-width: 100%;
	margin: 0 !important;
}

div.wpforms-container .wpforms-form .iti .iti__a11y-text {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect( 1px, 1px, 1px, 1px );
}

div.wpforms-container .wpforms-form .iti .iti__hide {
	display: none;
}

div.wpforms-container .wpforms-form .iti .iti__v-hide {
	visibility: hidden;
}

div.wpforms-container .wpforms-form .iti .iti__country-container {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	padding: var( --iti-border-width, 1px );
}

div.wpforms-container .wpforms-form .iti .iti__selected-country {
	position: relative;
	z-index: 1;
	display: flex;
	align-items: center;
	height: 100%;
	width: auto;
	margin: 0;
	cursor: pointer;
}

div.wpforms-container .wpforms-form .iti .iti__selected-country-primary {
	display: flex;
	align-items: center;
	height: 100%;
	padding: 0 var( --iti-arrow-padding, 7px ) 0 var( --iti-spacer-horizontal, 10px );
}

div.wpforms-container .wpforms-form .iti .iti__selected-dial-code {
	margin-left: 4px;
}

div.wpforms-container .wpforms-form .iti .iti__arrow {
	width: var( --iti-arrow-size, 5px );
	height: var( --iti-arrow-size, 5px );
	margin-top: -2px;
	margin-left: var( --iti-arrow-padding, 7px );
	border-right: var( --iti-arrow-width, 1.5px ) solid var( --iti-icon-color, #555 );
	border-bottom: var( --iti-arrow-width, 1.5px ) solid var( --iti-icon-color, #555 );
	transform: rotate( 45deg );
}

div.wpforms-container .wpforms-form .iti .iti__arrow--up {
	margin-top: 4px;
	transform: rotate( -135deg );
}

div.wpforms-container .wpforms-form .iti .iti__flag {
	width: var( --iti-flag-width, 20px );
	height: var( --iti-flag-height, 15px );
	border-radius: 1px;
	box-shadow: 0 0 1px #888;
	background-color: transparent;
	background-image: var( --iti-path-flags-1x );
	background-image: image-set( var( --iti-path-flags-1x ) 1x, var( --iti-path-flags-2x ) 2x );
	background-repeat: no-repeat;
	background-position: calc( var( --iti-flag-offset, 100 ) * var( --iti-flag-width, 20px ) ) 0;
	background-size: calc( var( --iti-flag-count, 244 ) * var( --iti-flag-width, 20px ) ) var( --iti-flag-height, 15px );
}

div.wpforms-container .wpforms-form .iti .iti__flag.iti__globe {
	display: flex;
	align-items: center;
	justify-content: center;
	width: var( --iti-flag-width, 20px );
	height: var( --iti-globe-icon-size, 17px );
	background: none;
	box-shadow: none;
}

div.wpforms-container .wpforms-form .iti .iti__globe-svg {
	width: 100%;
	height: 100%;
	fill: var( --iti-icon-color, #555 );
}

div.wpforms-container .wpforms-form .iti .iti__dropdown-content {
	border-radius: 3px;
	background-color: var( --iti-dropdown-bg, #fff );
}

div.wpforms-container .wpforms-form .iti--inline-dropdown .iti__dropdown-content {
	border: var( --iti-border-width, 1px ) solid var( --iti-border-color, #ccc );
	box-shadow: 1px 1px 4px rgba( 0, 0, 0, 0.2 );
}

div.wpforms-container .wpforms-form .iti--inline-dropdown:not( .iti--container ) .iti__dropdown-content {
	position: absolute;
	z-index: 2;
	left: 0;
}

div.wpforms-container .wpforms-form .iti .iti__search-input-wrapper {
	position: relative;
	display: flex;
	align-items: center;
	border-bottom: 1px solid var( --iti-border-color, #ccc );
}

div.wpforms-container .wpforms-form .iti .iti__search-input {
	width: 100%;
	padding: 8px 35px 8px 37px;
	border: 0;
	border-radius: 3px;
}

div.wpforms-container .wpforms-form .iti .iti__search-icon {
	position: absolute;
	left: var( --iti-spacer-horizontal, 10px );
	display: flex;
	pointer-events: none;
}

div.wpforms-container .wpforms-form .iti .iti__search-icon-svg {
	display: block;
	width: var( --iti-globe-icon-size, 17px );
	height: var( --iti-globe-icon-size, 17px );
	fill: none;
	stroke: var( --iti-icon-color, #555 );
	stroke-width: 3px;
}

div.wpforms-container .wpforms-form .iti .iti__search-clear {
	position: absolute;
	right: calc( var( --iti-spacer-horizontal, 10px ) / 2 );
	display: flex;
	align-items: center;
	justify-content: center;
	padding: calc( var( --iti-spacer-horizontal, 10px ) / 2 );
	border: 0;
	border-radius: 3px;
	background: transparent;
	cursor: pointer;
}

div.wpforms-container .wpforms-form .iti .iti__search-clear:hover,
div.wpforms-container .wpforms-form .iti .iti__search-clear:focus-visible {
	background: var( --iti-hover-color, rgba( 0, 0, 0, 0.05 ) );
}

div.wpforms-container .wpforms-form .iti .iti__search-clear-svg {
	display: block;
	width: var( --iti-clear-icon-size, 15px );
	height: var( --iti-clear-icon-size, 15px );
}

div.wpforms-container .wpforms-form .iti .iti__search-clear-bg {
	fill: var( --iti-icon-color, #555 );
}

div.wpforms-container .wpforms-form .iti .iti__search-clear-x {
	stroke-width: 2px;
}

div.wpforms-container .wpforms-form .iti .iti__no-results {
	padding: 30px 0;
	text-align: center;
}

div.wpforms-container .wpforms-form .iti .iti__country-list {
	margin: 0;
	padding: 0;
	list-style: none;
	cursor: pointer;
	overflow-y: scroll;
	-webkit-overflow-scrolling: touch;
}

div.wpforms-container .wpforms-form .iti--inline-dropdown .iti__country-list {
	max-height: 185px;
}

div.wpforms-container .wpforms-form .iti--flexible-dropdown-width .iti__country-list {
	white-space: nowrap;
}

div.wpforms-container .wpforms-form .iti .iti__country {
	display: flex;
	align-items: center;
	padding: 8px var( --iti-spacer-horizontal, 10px );
	outline: none;
}

div.wpforms-container .wpforms-form .iti .iti__country.iti__highlight {
	background-color: var( --iti-hover-color, rgba( 0, 0, 0, 0.05 ) );
}

div.wpforms-container .wpforms-form .iti .iti__country-name {
	flex-grow: 1;
}

div.wpforms-container .wpforms-form .iti .iti__country-list .iti__flag {
	flex-shrink: 0;
	margin-right: var( --iti-spacer-horizontal, 10px );
}

div.wpforms-container .wpforms-form .iti .iti__country-check {
	display: flex;
	align-items: center;
	margin-left: var( --iti-spacer-horizontal, 10px );
	color: var( --iti-icon-color, #555 );
}

div.wpforms-container .wpforms-form .iti .iti__country-check-svg {
	display: block;
	width: var( --iti-clear-icon-size, 15px );
	height: var( --iti-clear-icon-size, 15px );
}

[dir="rtl"] div.wpforms-container .wpforms-form .iti .iti__country-list .iti__flag {
	margin-right: 0;
	margin-left: var( --iti-spacer-horizontal, 10px );
}

div.wpforms-container .wpforms-form .wpforms-field-phone .iti {
	display: block;
	width: 100%;
	max-width: 100%;
}

/* The size class is moved from the input to the wrapper by phone.js. */
div.wpforms-container .wpforms-form .wpforms-field-phone .iti.wpforms-field-small {
	max-width: 25%;
}

div.wpforms-container .wpforms-form .wpforms-field-phone .iti.wpforms-field-medium {
	max-width: 60%;
}

div.wpforms-container .wpforms-form .wpforms-field-phone .iti.wpforms-field-large {
	max-width: 100%;
}

div.wpforms-container .wpforms-form .wpforms-field-phone .iti input[type="tel"],
div.wpforms-container .wpforms-form .wpforms-field-phone .iti input[type="text"] {
	width: 100%;
	max-width: 100%;
}

/* Keep the number readable left-to-right on RTL pages. */
div.wpforms-container .wpforms-form .wpforms-field-phone .iti input.wpforms-smart-phone-field {
	direction: ltr;
}

[dir="rtl"] div.wpforms-container .wpforms-form .wpforms-field-phone .iti input.wpforms-smart-phone-field {
	text-align: right;
}

/* Dropdown above themes' sticky headers, readable inside the form. */
.iti--container,
div.wpforms-container .wpforms-form .iti__dropdown-content {
	z-index: 100000;
}

div.wpforms-container .wpforms-form .iti__country-list {
	max-height: 260px;
}

div.wpforms-container .wpforms-form .iti__search-input {
	min-height: 36px;
	margin: 0;
	border-radius: 0;
	box-shadow: none;
}

div.wpforms-container .wpforms-form .iti__selected-country {
	background: transparent;
	border: 0;
	box-shadow: none;
	min-height: 0;
	padding: 0;
}

div.wpforms-container .wpforms-form .iti__selected-country:hover,
div.wpforms-container .wpforms-form .iti__selected-country:focus {
	background: rgba( 0, 0, 0, 0.05 );
}

@media only screen and ( max-width: 600px ) {
	div.wpforms-container .wpforms-form .wpforms-field-phone .iti.wpforms-field-small,
	div.wpforms-container .wpforms-form .wpforms-field-phone .iti.wpforms-field-medium {
		max-width: 100%;
	}
}

/*
 * Dropdown hardening: some themes style every ul / li / input / div (borders,
 * margins, tall rows, shadows). The dropdown must stay one compact card with
 * the search box on top of a scrolling list.
 */
div.wpforms-container .wpforms-form .iti .iti__dropdown-content {
	height: auto !important;
	max-height: none !important;
	margin: 0 !important;
	padding: 0 !important;
	overflow: hidden !important;
	box-sizing: border-box !important;
}

div.wpforms-container .wpforms-form .iti .iti__search-input-wrapper {
	margin: 0 !important;
	padding: 0 !important;
	box-shadow: none !important;
	background: transparent !important;
}

div.wpforms-container .wpforms-form .iti input.iti__search-input,
div.wpforms-container .wpforms-form .iti input.iti__search-input[type="search"],
div.wpforms-container .wpforms-form .iti input.iti__search-input[type="text"] {
	height: auto !important;
	min-height: 0 !important;
	margin: 0 !important;
	border: 0 !important;
	border-radius: 0 !important;
	box-shadow: none !important;
	background: transparent !important;
	line-height: 1.4 !important;
}

div.wpforms-container .wpforms-form .iti ul.iti__country-list {
	display: block !important;
	position: static !important;
	height: auto !important;
	max-height: 200px !important;
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	border-radius: 0 !important;
	box-shadow: none !important;
	background: transparent !important;
	overflow-x: hidden !important;
	overflow-y: auto !important;
	list-style: none !important;
}

div.wpforms-container .wpforms-form .iti li.iti__country:not( .iti__hide ) {
	display: flex !important;
	align-items: center !important;
	height: auto !important;
	min-height: 0 !important;
	margin: 0 !important;
	padding: 8px 10px !important;
	border: 0 !important;
	box-shadow: none !important;
	background-image: none;
	line-height: 1.4 !important;
	list-style: none !important;
}

div.wpforms-container .wpforms-form .iti li.iti__country.iti__highlight {
	background-color: var( --iti-hover-color, rgba( 0, 0, 0, 0.05 ) ) !important;
}

div.wpforms-container .wpforms-form .iti li.iti__country::before,
div.wpforms-container .wpforms-form .iti li.iti__country::marker {
	content: none !important;
}

div.wpforms-container .wpforms-form .iti .iti__country-name,
div.wpforms-container .wpforms-form .iti .iti__dial-code {
	margin: 0 !important;
	padding: 0 !important;
	line-height: inherit !important;
}

div.wpforms-container .wpforms-form .iti .iti__dial-code {
	margin-inline-start: 6px !important;
	color: #787c82;
}

/* Closed by default, and filtered-out countries stay hidden. */
div.wpforms-container .wpforms-form .iti .iti__hide {
	display: none !important;
}

div.wpforms-container .wpforms-form .iti .iti__dropdown-content:not( .iti__hide ) {
	display: block;
}