/**
 * International Phone Validation
 * Rameez Raja — https://www.linkedin.com/in/rameez-raja-wordpress
 */

/*
 * Elementor renders .elementor-field-group as a flex container. Any element
 * placed inside it — our messages, and the wrapper intl-tel-input builds
 * around the input — collapses to min-content width unless it is given an
 * explicit full-width basis. That is what makes error text wrap one word
 * per line and squashes the phone input to a fraction of its column.
 */
.elementor-field-group .iti {
	flex: 1 1 100%;
	width: 100%;
	max-width: 100%;
	min-width: 0;
}

.elementor-field-group .iti .iti__tel-input,
.elementor-field-type-tel .iti__tel-input,
.elementor-field-type-tel input[type="tel"] {
	width: 100%;
	min-width: 0;
	box-sizing: border-box;
}

/*
 * Some themes/page builders clip overflowing content on the field wrapper.
 * That hides the country dropdown panel and clips the popup message below,
 * so force both the wrapper and the field group to stay visible.
 */
.elementor-field-type-tel,
.elementor-field-group.ipv-wrap {
	overflow: visible;
}

/* Elementor sections commonly sit at z-index 1 — lift the dropdown above them */
.iti__dropdown-content {
	z-index: 9999;
}

/*
 * Keep the country selector visibly clickable instead of disappearing into
 * a borderless input — a faint outline plus a visible dropdown arrow makes
 * it obvious it's a control, even on themes with a plain underline style.
 */
.elementor-field-group .iti__selected-country {
	background: transparent;
	border: 0;
	cursor: pointer;
}

.elementor-field-group .iti__selected-country:hover,
.elementor-field-group .iti__selected-country:focus {
	background: rgba(0, 0, 0, 0.04);
}

.elementor-field-group .iti__arrow {
	opacity: 0.6;
}

/* Invalid state */
input.ipv-invalid {
	border-color: #e04f5f !important;
	box-shadow: 0 0 0 1px rgba(224, 79, 95, 0.25) !important;
}

/*
 * Popup messages (ours, and Elementor's own fallback below). Positioned
 * absolutely against the field wrapper so an invalid-number message never
 * pushes surrounding fields down or changes the form's height.
 */
.elementor-field-group.ipv-wrap {
	position: relative;
}

.ipv-error,
.ipv-valid,
.elementor-field-group.ipv-wrap .elementor-message.elementor-help-inline {
	display: none;
	position: absolute;
	top: 100%;
	left: 0;
	margin-top: 8px;
	padding: 10px 12px;
	max-width: min(320px, 100%);
	width: max-content;
	background: #fff;
	border-radius: 6px;
	box-shadow: 0 4px 14px rgba(0, 0, 0, 0.12), 0 1px 3px rgba(0, 0, 0, 0.08);
	font-size: 13px;
	line-height: 1.4;
	word-break: normal;
	overflow-wrap: break-word;
	hyphens: none;
	z-index: 10000;
}

/* Little pointer arrow linking the popup back to the field */
.ipv-error::before,
.ipv-valid::before,
.elementor-field-group.ipv-wrap .elementor-message.elementor-help-inline::before {
	content: "";
	position: absolute;
	bottom: 100%;
	left: 16px;
	border: 6px solid transparent;
	border-bottom-color: #fff;
}

.ipv-error,
.elementor-field-group.ipv-wrap .elementor-message.elementor-help-inline {
	color: #e04f5f;
	border: 1px solid rgba(224, 79, 95, 0.2);
}

.ipv-valid {
	color: #1fa971;
	border: 1px solid rgba(31, 169, 113, 0.2);
}

.ipv-error.is-visible,
.ipv-valid.is-visible {
	display: block;
}

/* Elementor renders its own message as soon as it exists in the DOM */
.elementor-field-group.ipv-wrap .elementor-message.elementor-help-inline {
	display: block;
}

/*
 * Non-phone fields (name, email, message) keep the original inline fix —
 * full width and normal wrapping — since only the phone field's message
 * needs to float as a popup.
 */
.elementor-field-group:not(.ipv-wrap) .elementor-help-inline,
.elementor-field-group:not(.ipv-wrap) .elementor-message.elementor-help-inline {
	flex: 1 1 100%;
	width: 100%;
	max-width: 100%;
	min-width: 0;
	line-height: 1.4;
	word-break: normal;
	overflow-wrap: break-word;
	hyphens: none;
}