/**
 * Phone field: searchable flagged country picker plus national number.
 *
 * @package
 */
.wrapper {
	display: flex;
	flex-direction: column;
	gap: var(--sp-5);
	position: relative;
}

.head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--sp-10);
}

.label {
	display: flex;
	align-items: baseline;
	gap: var(--sp-10);
	font-size: var(--text-sm-size);
	line-height: var(--text-sm-line);
	font-weight: 600;
	color: var(--color-text);
}

.required {
	margin-left: 0;
	font-weight: 700;
	color: var(--danger);
}

.optional {
	font-size: var(--text-xs-size);
	line-height: var(--text-xs-line);
	font-weight: 400;
	color: var(--ink-200);
}

.row {
	display: flex;
	gap: var(--sp-10);
	align-items: stretch;
	min-width: 0;
}

.countryWrap {
	position: relative;
	flex-shrink: 0;
}

.countryBtn {
	display: flex;
	align-items: center;
	gap: var(--sp-5);
	cursor: pointer;
}

.countryBtn:focus-visible {
	outline: var(--focus-ring);
	outline-offset: var(--sp-5);
}

.countryBtn:disabled {
	opacity: 0.5;
	cursor: not-allowed;
}

.countryBtnError {
	border-color: var(--danger);
}

.flag {
	font-size: var(--text-md-size);
	line-height: 1;
}

.dialBtn {
	font-variant-numeric: tabular-nums;
	font-weight: 600;
}

.menu {
	position: absolute;
	top: calc(100% + var(--sp-5));
	left: 0;
	z-index: 4;
	display: flex;
	flex-direction: column;
	width: max-content;
	min-width: calc(var(--sp-120) * 2);
	max-width: min(100vw, calc(var(--sp-120) * 3));
	background: var(--color-surface);
	border: 1px solid var(--color-border);
	border-radius: var(--r-sm);
	overflow: hidden;
}

.search {
	width: 100%;
	min-height: var(--touch-target);
	padding: var(--sp-10) var(--sp-15);
	border: 0;
	border-bottom: 1px solid var(--color-border);
	font-size: var(--text-md-size);
	line-height: var(--text-md-line);
	font-family: var(--bl-font);
	color: var(--color-text);
	background: var(--color-surface);
}

.search:focus-visible {
	outline: var(--focus-ring);
	outline-offset: calc(var(--sp-5) * -1);
}

.list {
	margin: 0;
	padding: var(--sp-5);
	list-style: none;
	max-height: calc(var(--sp-120) * 2.5);
	overflow-y: auto;
}

.empty {
	padding: var(--sp-15);
	font-size: var(--text-sm-size);
	line-height: var(--text-sm-line);
	color: var(--ink-400);
}

.option {
	display: flex;
	align-items: center;
	gap: var(--sp-10);
	width: 100%;
	padding: var(--sp-10) var(--sp-15);
	border: 0;
	border-radius: var(--r-sm);
	background: transparent;
	font-size: var(--text-sm-size);
	line-height: var(--text-sm-line);
	font-family: var(--bl-font);
	color: var(--color-text);
	text-align: left;
	cursor: pointer;
}

.optionActive {
	background: var(--paper-50);
}

.optionName {
	flex: 1;
	min-width: 0;
}

.optionDial {
	flex-shrink: 0;
	color: var(--ink-400);
	font-variant-numeric: tabular-nums;
}

.numberWrap {
	position: relative;
	display: flex;
	align-items: stretch;
	flex: 1 1 auto;
	min-width: 0;
	background: var(--color-surface);
	border: 1px solid var(--color-border);
	border-radius: var(--r-sm);
}

.numberWrap:focus-within {
	outline: var(--focus-ring);
	outline-offset: var(--sp-5);
}

.numberWrapError {
	border-color: var(--danger);
}

.number {
	flex: 1 1 auto;
	min-width: 0;
}

.errorText {
	margin: 0;
	font-size: var(--text-xs-size);
	line-height: var(--text-xs-line);
	color: var(--danger);
}