/* Country Phone field – layout only; colors/borders come from your WPForms theme. */

.wpforms-form .wpfcp-row,
.wpforms-field-country_phone .wpfcp-row {
	display: flex;
	flex-wrap: nowrap;
	gap: 12px;
	align-items: flex-end;
	margin: 0;
}

.wpfcp-row .wpforms-field-row-block {
	float: none;
	margin: 0;
	padding: 0;
	min-width: 0;
}

.wpfcp-row .wpfcp-country-col {
	flex: 0 0 40%;
	max-width: 40%;
}

.wpfcp-row .wpfcp-number-col {
	flex: 1 1 60%;
}

/* Sub-labels sit ABOVE the inputs, like the reference design. */
.wpfcp-row .wpforms-field-sublabel.before {
	display: block;
	margin: 0 0 6px;
}

.wpfcp-row .wpfcp-country,
.wpfcp-row .wpfcp-number {
	width: 100% !important;
	max-width: 100% !important;
}

/* Dial code prefix inside the number box. */
.wpfcp-row .wpfcp-number-wrap {
	position: relative;
}

.wpfcp-row .wpfcp-dial {
	position: absolute;
	left: 14px;
	top: 50%;
	transform: translateY(-50%);
	pointer-events: none;
	opacity: 0.55;
	line-height: 1;
	white-space: nowrap;
}

.wpfcp-row .wpfcp-number {
	padding-left: 48px !important; /* adjusted by JS to the dial-code width */
}

/* Validation message from WPForms goes under the whole field, not inside the wrap. */
.wpfcp-row .wpfcp-number-wrap .wpforms-error {
	position: relative;
	display: block;
}

@media (max-width: 600px) {
	.wpforms-form .wpfcp-row,
	.wpforms-field-country_phone .wpfcp-row {
		flex-direction: column;
		align-items: stretch;
	}
	.wpfcp-row .wpfcp-country-col,
	.wpfcp-row .wpfcp-number-col {
		flex: 1 1 100%;
		max-width: 100%;
	}
}