/* Pill container — the country selector and phone input share this single
   bordered wrapper instead of each having their own border, matching the
   combined "United States | +19707840255" look. */
.afgf-phone-field {
	position: relative;
	display: flex;
	align-items: stretch;
	width: 100%;
	background-color: var(--mod_castal_gray);
	border: 1px solid var(--mod_black_10);
	border-radius: 8px;
	box-sizing: border-box;
}

.afgf-phone-field .afgf-phone-country {
	flex: 0 0 auto;
	border-right: 1px solid var(--mod_black_10);
}

.afgf-phone-field .afgf-phone-country .afgf-select-dropdown {
	width: auto;
}

/* Overrides the base afgf-dropdown.css button (full-width, own border) —
   here the country trigger only needs to be as wide as its label, with no
   border of its own since the wrapper above already provides one. */
.afgf-phone-field .afgf-phone-country .select-dropdown__button {
	width: auto !important;
	padding: 8px 28px 8px 12px !important;
	white-space: nowrap;
	background-color: #e0eaf1 !important;
	border: none !important;
	height: calc(var(--mod_input_height_46_40_36) - 2px) !important;
	border-radius: 8px 0 0 8px !important;
}

/* The base dropdown list stretches left:0/right:0 to match its (usually
   full-width) trigger — here the trigger is narrow, so anchor to the left
   and size to content instead, wide enough to fit the longest country name. */
.afgf-phone-field .afgf-phone-country .afgf-dropdown-list {
	right: auto;
	width: max-content;
	min-width: 200px;
}

/* Superseded 2026-09-14 — an earlier version showed the fixed dial-code
   prefix as a separate <span> sitting beside a plain number input (a flex
   row: prefix span + input, sized via flex rather than a JS-measured
   padding-left). Reverted in favor of baking the prefix directly into the
   visible number input's own value instead — see class-afgf-field-
   advanced-phone.php's own `if ( false )` block for the matching dead
   markup, and .afgf-phone-number below for the live approach. Kept here,
   commented out, in case the separate-element approach is ever wanted
   back — don't uncomment without also un-deadening the matching PHP.

.afgf-phone-field .afgf-phone-number-wrap {
	flex: 1 1 auto;
	min-width: 0;
	display: flex;
	align-items: center;
}

.afgf-phone-field .afgf-phone-code-prefix {
	flex: 0 0 auto;
	padding: 8px 2px 8px 12px;
	font-size: var(--mod_font_size_16_15_14);
	font-family: inherit;
	color: #333;
	white-space: nowrap;
	user-select: none;
}
*/

.afgf-phone-field .afgf-phone-number {
	flex: 1 1 auto;
	min-width: 0;
	margin: 0;
	padding: 8px 12px;
	font-size: var(--mod_font_size_16_15_14);
	font-family: inherit;
	color: #333;
	background-color: transparent;
	border: none;
	box-shadow: none;
	height: calc(var(--mod_input_height_46_40_36) - 2px) !important;
	/* The dial code is now baked directly into this input's own value
	   (e.g. "+19707840255") rather than shown via a separate prefix
	   element — tabular-nums keeps the digits lining up consistently as
	   afgf-phone.js re-prepends/adjusts the fixed prefix on every
	   keystroke and on country change. */
	font-variant-numeric: tabular-nums;
}

.afgf-phone-field .afgf-phone-number:focus {
	outline: none;
}