/*
 * HL2 FORM01 — hero search forms: one geometry for every form type, touch-friendly controls.
 * Scope: .content__form (hero forms on home, tools, people, email, address, country pages; all languages).
 * Loaded after the legacy stylesheet. Overrides only size, spacing and tab styling; no markup change.
 */
.content__form {
	--hlf-h: 64px;
	--hlf-gap: 10px;
	--hlf-r: 10px;
}
@media (max-width: 1023px) {
	.content__form { --hlf-h: 56px; }
}
@media (max-width: 767px) {
	.content__form { --hlf-h: 52px; --hlf-gap: 8px; }
}

/* Every form fills its column (people/address forms had a fixed 672px). */
.content__form .tabs,
.content__form .tabs__content,
.content__form .tabs__content > form,
.content__form .form .btop,
.content__form .form .input-box {
	width: 100%;
	max-width: 100%;
}
/* Every tab panel reserves two rows (fields + button), so switching tabs never moves the page. */
.content__form .tabs__content.active {
	min-height: calc(var(--hlf-h) * 2 + var(--hlf-gap));
}
.content__form .tabs__content > form {
	display: flex;
	flex-direction: column;
	gap: var(--hlf-gap);
}
.content__form .tabs__content > form > .input-box,
.content__form .tabs__content > form > .btop,
.content__form .tabs__content > form > .btn_search {
	margin: 0 !important;
}

/* One control height; 16px text so iOS does not zoom on focus. */
.content__form .form input:not([type="hidden"]):not([type="submit"]):not(.iti__search-input),
.content__form .form select,
.content__form .form .ms-choice {
	height: var(--hlf-h) !important;
	min-height: var(--hlf-h);
	font-size: 16px !important;
	box-sizing: border-box;
}
.content__form .form .ms-choice {
	display: flex !important;
	align-items: center;
	padding-top: 0 !important;
	padding-bottom: 0 !important;
}
.content__form .form .ms-choice > span { line-height: 1.3; }
/* The people form shows the country name in an overlay; the input itself only holds the ISO code. */
.content__form .form .country-input { color: transparent !important; caret-color: transparent; }
.content__form .form .btn_search {
	width: 100%;
	height: var(--hlf-h) !important;
	min-height: var(--hlf-h);
	padding-top: 0;
	padding-bottom: 0;
}
.content__form .form .iti { width: 100%; display: block; }
.content__form .form .iti__country-container { height: 100%; }

/* Name and address forms: all fields in one row, so the form keeps the height of the phone form. */
.content__form .form--p-search .btop {
	display: grid !important;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--hlf-gap);
	margin: 0 !important;
}
.content__form .form--p-search .btop > .input-box {
	width: auto !important;
	max-width: none !important;
	margin: 0 !important;
	min-width: 0;
}
.content__form .form--p-search .btop > .input-box > * { max-width: 100%; }

/*
 * Narrow form column (phones, and the half-width hero column on tablets / small laptops).
 * The same rules twice: a container query on the form column, and a phone media query
 * for browsers without container queries.
 */
.content__form { container-type: inline-size; container-name: hlform; }
@container hlform (max-width: 539px) {
	/* People search: first name, last name, compact country chip (flag only). */
	.form--p-search:not(.form-address) .btop { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 76px !important; }
	.form--p-search .country-box .country-name { display: none !important; }
	.form--p-search .country-box .iti__selected-country { width: 100%; justify-content: center; opacity: 1 !important; }
	/* Address: one field per row as before (the page has no tabs, so nothing jumps). */
	.form-address.form--p-search .btop { grid-template-columns: minmax(0, 1fr) !important; }
}
@media (max-width: 767px) {
	.content__form .form--p-search:not(.form-address) .btop { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 76px; }
	.content__form .form--p-search .country-box .country-name { display: none !important; }
	.content__form .form--p-search .country-box .iti__selected-country { width: 100%; justify-content: center; opacity: 1 !important; }
	.content__form .form-address.form--p-search .btop { grid-template-columns: minmax(0, 1fr); }
}

/*
 * Tabs (UX-TABS). Wide column: folder tabs with icons, attached to a white form card.
 * Narrow column (phones, half-width hero): one white card, tabs as a 2-column segmented switch inside it,
 * so long labels (DE/FR/ES) never break words. Pages without tabs are not touched (:has(.tabs__link)).
 */
.content__form .tabs__caption {
	display: flex;
	align-items: stretch;
	gap: 4px;
	margin: 0 !important;
	padding: 0 !important;
	border: 0;
	list-style: none;
}
.content__form .tabs__caption:not(:has(.tabs__link)) { display: none !important; }
.content__form .tabs__caption .tabs__link {
	flex: 1 1 0;
	min-width: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 4px;
	min-height: 64px;
	margin: 0 !important;
	padding: 8px 6px !important;
	border: 0 !important;
	border-radius: 14px 14px 0 0 !important;
	background: rgba(255, 255, 255, .6) !important;
	color: #44546b !important;
	font-size: 13px !important;
	font-weight: 600;
	line-height: 1.15;
	text-align: center;
	white-space: normal !important;
	text-decoration: none !important;
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
	transition: background-color .15s ease, color .15s ease;
}
.content__form .tabs__caption .tabs__link::after { display: none !important; }
.content__form .tabs__caption .tabs__link::before {
	content: "" !important;
	display: block !important;
	position: static !important;
	flex: none;
	width: 22px !important;
	height: 22px !important;
	margin: 0 !important;
	border: 0 !important;
	transform: none !important;
	opacity: 1 !important;
	background: currentColor !important;
	-webkit-mask: var(--hlt-i) center / contain no-repeat;
	mask: var(--hlt-i) center / contain no-repeat;
}
.content__form .tabs__caption .tabs__link:not([class*="form_"])::before { display: none !important; }
.content__form .tabs__caption .tabs__link.form_phone_lookup { --hlt-i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 4h4l2 5-2.5 1.5a11 11 0 005 5L15 13l5 2v4a2 2 0 01-2 2A16 16 0 013 6a2 2 0 012-2z' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.content__form .tabs__caption .tabs__link.form_number_tracking { --hlt-i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 21s7-6.2 7-11.5A7 7 0 005 9.5C5 14.8 12 21 12 21zM12 12a2.5 2.5 0 100-5 2.5 2.5 0 000 5z' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.content__form .tabs__caption .tabs__link.form_people_search_world { --hlt-i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 12a4 4 0 100-8 4 4 0 000 8zM4 21a8 8 0 0116 0' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.content__form .tabs__caption .tabs__link.form_reverse_email { --hlt-i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 6h18v12H3zM3 7l9 6 9-6' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.content__form .tabs__caption .tabs__link.form_search_by_photo { --hlt-i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 8h3l2-3h6l2 3h3v11H4zM12 17a4 4 0 100-8 4 4 0 000 8z' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.content__form .tabs__caption .tabs__link:hover { background: rgba(255, 255, 255, .85) !important; color: #006ad5 !important; }
.content__form .tabs__caption .tabs__link.active {
	background: #ffffff !important;
	color: #006ad5 !important;
	box-shadow: 0 -6px 16px rgba(14, 26, 43, .06);
}
.content__form .tabs:has(.tabs__link) .tabs__content.active {
	display: flow-root; /* child margins (photo tab) must not leak out and move the panel */
	box-sizing: border-box;
	min-height: calc(var(--hlf-h) * 2 + var(--hlf-gap) + 28px); /* two rows + padding, same for every tab */
	background: #ffffff;
	border-radius: 0 0 16px 16px;
	padding: 14px;
	box-shadow: 0 14px 30px rgba(14, 26, 43, .10);
}
.content__form .tabs:has(.tabs__link) .tabs__content:not(.active) { margin: 0 !important; padding: 0 !important; min-height: 0 !important; border: 0 !important; }
.content__form .tabs:has(.tabs__link) .tabs__content.active input:not([type="hidden"]):not(.iti__search-input) {
	border: 1px solid #dce3ed !important;
	box-shadow: none !important;
}
@container hlform (max-width: 539px) {
	.content__form .tabs:has(.tabs__link) {
		background: #ffffff;
		border-radius: 18px;
		padding: 8px 8px 12px;
		box-shadow: 0 14px 32px rgba(14, 26, 43, .10);
	}
	.content__form .tabs__caption {
		display: grid !important;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 4px;
		margin: 0 0 12px !important;
		padding: 4px !important;
		background: #eef3fa;
		border-radius: 12px;
	}
	.content__form .tabs__caption .tabs__link {
		flex-direction: row;
		justify-content: flex-start;
		gap: 8px;
		min-height: 46px;
		padding: 6px 10px !important;
		border-radius: 9px !important;
		background: transparent !important;
		color: #3b4a63 !important;
		line-height: 1.2;
		text-align: left;
	}
	.content__form .tabs__caption .tabs__link::before { width: 20px !important; height: 20px !important; }
	.content__form .tabs__caption .tabs__link:hover { background: rgba(255, 255, 255, .6) !important; }
	.content__form .tabs__caption .tabs__link.active {
		background: #ffffff !important;
		color: #006ad5 !important;
		box-shadow: 0 1px 2px rgba(14, 26, 43, .12), 0 3px 8px rgba(14, 26, 43, .08);
	}
	.content__form .tabs:has(.tabs__link) .tabs__content.active {
		min-height: calc(var(--hlf-h) * 2 + var(--hlf-gap));
		background: transparent;
		border-radius: 0;
		padding: 0 4px;
		box-shadow: none;
	}
}
@media (prefers-reduced-motion: reduce) {
	.content__form .tabs__caption .tabs__link { transition: none; }
}

/*
 * Country picker (intl-tel-input), UX-CC2 2026-11-09. Phone forms: the list opens right under the field and is exactly
 * as wide as the field (intl-tel-input's own inline width). People form: 360px panel aligned to the country chip's right edge.
 * Phones: bottom sheet (below).
 */
.content__form .form .iti--inline-dropdown .iti__dropdown-content:not(#hl2) {
	min-width: 0 !important;
	max-width: calc(100vw - 32px) !important;
	max-height: none !important;
	margin-top: 6px;
	overflow: hidden;
	background: #ffffff;
	border: 1px solid #dce3ed !important;
	border-radius: 12px;
	box-shadow: 0 16px 40px rgba(14, 26, 43, .18);
	z-index: 30;
}
.content__form .form .country-box .iti--inline-dropdown .iti__dropdown-content:not(#hl2) {
	left: auto !important;
	right: 0 !important;
	width: 360px !important;
	max-width: 100cqw !important;
}
.content__form .form .iti--inline-dropdown .iti__country-list:not(#hl2) {
	width: 100% !important;
	min-width: 0 !important;
	max-width: none !important;
	max-height: 300px !important;
	margin: 0 !important;
	overscroll-behavior: contain;
}
.content__form .form .iti--inline-dropdown .iti__country:not(#hl2) { display: flex; align-items: center; gap: 10px; min-height: 40px; padding: 8px 14px !important; }
.content__form .form .iti--inline-dropdown .iti__country-name { flex: 1 1 auto; min-width: 0; margin: 0 !important; white-space: normal; line-height: 1.25; }
.content__form .form .iti--inline-dropdown .iti__dial-code { flex: none; margin-left: auto !important; }
.content__form .iti__country.iti__highlight { background: #e8f1ff !important; }
/* WP admin bar (admins only): site icon was 46px tall in the 32px bar. */
html body #wpadminbar img.site-icon { width: 20px !important; height: 20px !important; max-width: 20px !important; min-width: 0 !important; margin: 0 6px 0 0 !important; padding: 0 !important; display: inline-block !important; vertical-align: middle !important; object-fit: contain; border-radius: 3px; }
.content__form .iti__search-input,
.iti--container .iti__search-input {
	height: 44px !important;
	min-height: 44px;
	margin: 8px;
	width: calc(100% - 16px) !important;
	padding: 0 14px !important;
	border: 1px solid #dce3ed !important;
	border-radius: 10px !important;
	background: #f6f8fc !important;
	font-size: 16px !important;
	color: #0e1a2b !important;
	box-sizing: border-box;
}
.content__form .iti__search-input::placeholder,
.content__form .iti__search-input:focus::placeholder,
.iti--container .iti__search-input::placeholder,
.iti--container .iti__search-input:focus::placeholder { color: #7a8699 !important; opacity: 1 !important; }
.content__form .iti__country { min-height: 40px; }
.iti--container.iti--fullscreen-popup {
	position: fixed !important;
	inset: 0 !important;
	display: flex !important;
	flex-direction: column !important;
	justify-content: flex-end !important;
	align-items: center !important;
	padding: 0 !important;
	background: rgba(9, 20, 55, .55) !important;
	z-index: 100000;
}
.iti--fullscreen-popup .iti__dropdown-content {
	position: relative !important;
	top: auto !important;
	left: auto !important;
	display: flex !important;
	flex-direction: column;
	width: 100% !important;
	max-width: 560px;
	height: min(80vh, 640px);
	height: min(80dvh, 640px);
	max-height: none !important;
	padding: 0 0 env(safe-area-inset-bottom) !important;
	border: 0 !important;
	border-radius: 18px 18px 0 0 !important;
	background: #ffffff !important;
	overflow: hidden;
	box-shadow: 0 -12px 40px rgba(9, 20, 55, .25);
}
.iti--fullscreen-popup .iti-close-popup {
	position: static !important;
	flex: none;
	display: flex !important;
	align-items: center;
	justify-content: flex-end;
	gap: 6px;
	min-height: 48px;
	padding: 4px 12px 0 !important;
	color: #3b4a63 !important;
	font-size: 15px !important;
	font-weight: 600;
	cursor: pointer;
}
.iti--fullscreen-popup .iti-close-popup svg path { fill: currentColor; }
.iti--fullscreen-popup .iti__search-input { flex: none; margin-top: 0; }
.iti--fullscreen-popup .iti__country-list {
	flex: 1 1 auto;
	max-height: none !important;
	margin: 0 !important;
	overflow-y: auto;
	overscroll-behavior: contain;
	-webkit-overflow-scrolling: touch;
}
.iti--fullscreen-popup .iti__country { min-height: 48px; padding: 0 16px !important; font-size: 16px !important; }
html:has(.iti--fullscreen-popup), html:has(.iti--fullscreen-popup) body { overflow: hidden !important; }

/*
 * UX-HERO 2026-11-09: the form column no longer runs under the illustration.
 * Legacy: .banner__content fixed 741px and .img-box pulled 54px left, so the form card covered the image icons.
 */
@media (min-width: 1024px) {
	.banner .container:has(> .img-box) > .banner__content { flex: 1 1 0; width: auto !important; max-width: 741px; min-width: 0; margin-right: 40px; }
	.banner .container > .img-box { left: 0 !important; flex: 0 0 auto; }
}

/*
 * UX-GLOBE 2026-11-09: one clean globe for "no country" (old icon had a phone inside it). Also for fields whose flag
 * intl-tel-input leaves empty (second phone form on a page got a blank box instead of the globe).
 */
.content__form .iti__selected-country .iti__flag.iti__globe,
.content__form .iti__selected-country .iti__flag[class="iti__flag"] {
	width: 18px !important;
	height: 18px !important;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2344546b' stroke-width='1.6' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M3.4 9h17.2M3.4 15h17.2M12 3c2.6 2.6 3.9 5.6 3.9 9s-1.3 6.4-3.9 9M12 3C9.4 5.6 8.1 8.6 8.1 12s1.3 6.4 3.9 9'/%3E%3C/svg%3E") center / 18px 18px no-repeat !important;
	box-shadow: none !important;
	border-radius: 0 !important;
}
/* Before intl-tel-input starts (WP Rocket delays scripts until the first interaction) the field already shows the
   same country chip, so the text does not jump 60px to the right on the first mouse move. */
.content__form .form .input-box.phone { position: relative; }
.content__form .form .input-box.phone:not(:has(.iti)) > input.form_phone_number { padding-left: 75px !important; }
.content__form .form .input-box.phone:not(:has(.iti))::before {
	content: "";
	position: absolute;
	left: 12px;
	top: 50%;
	z-index: 1;
	width: 50px;
	height: 37px;
	transform: translateY(-50%);
	border-radius: 4px;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2344546b' stroke-width='1.6' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M3.4 9h17.2M3.4 15h17.2M12 3c2.6 2.6 3.9 5.6 3.9 9s-1.3 6.4-3.9 9M12 3C9.4 5.6 8.1 8.6 8.1 12s1.3 6.4 3.9 9'/%3E%3C/svg%3E") 12px center / 18px 18px no-repeat, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 6 4'%3E%3Cpath d='M0 0h6L3 4z' fill='%23555'/%3E%3C/svg%3E") 34px center / 6px 4px no-repeat, #efedf4;
	pointer-events: none;
}

/* chat 9 round 2: intl-tel-input 26 (people form) set an inline panel height that clipped the list to 3 rows. */
.content__form .form .iti--inline-dropdown .iti__dropdown-content:not(#hl2) { height: auto !important; }
/* Phone field: the legacy 40px right padding is only needed for the valid/invalid icon; without it the hint fits,
   and a hint that is still too long ends with "…" instead of a hard cut. */
.content__form .form input[name="phone"]:not(.valid):not(.invalid) { padding-right: 12px !important; }
.content__form .form input[name="phone"] { text-overflow: ellipsis; }
/* Close bar added to the people form's full-screen list: a <button>, so reset the browser button look. */
.iti--fullscreen-popup button.iti-close-popup { width: 100%; margin: 0; border: 0; border-radius: 0; background: transparent !important; font-family: inherit; }
.iti--fullscreen-popup button.iti-close-popup svg { width: 14px; height: 14px; }