.phone-field {

			display: flex;

			align-items: center;

	}


	.phone-prefix {

			position: relative;

			min-width: 170px;

	}


	.phone-prefix>summary {

			list-style: none;

			border: 1px solid #ced4da;

			border-radius: 4px;

			padding: 10px 34px 10px 12px;

			cursor: pointer;

			user-select: none;

			background: #fff;

			line-height: 1.4;

	}


	.phone-prefix>summary::-webkit-details-marker {

			display: none;

	}


	.phone-prefix>summary::after {

			content: '▾';

			position: absolute;

			right: 12px;

			top: 50%;

			transform: translateY(-50%);

			color: #6c757d;

			font-size: 12px;

	}


	.phone-prefix[open]>summary::after {

			content: '▴';

	}


	.phone-prefix__menu {

			position: absolute;

			left: 0;

			right: 0;

			top: calc(100% + 4px);

			margin: 0;

			padding: 6px 0;

			border: 1px solid #ced4da;

			border-radius: 4px;

			background: #fff;

			box-shadow: 0 10px 24px rgba(0, 0, 0, 0.12);

			z-index: 10;

	}


	.phone-prefix__option {

			display: flex;

			align-items: center;

			gap: 8px;

			width: 100%;

			border: 0;

			background: transparent;

			text-align: left;

			padding: 8px 12px;

			cursor: pointer;

			box-sizing: border-box;

	}


	.phone-prefix__flag {

			width: 18px;

			height: 12px;

			object-fit: cover;

			border-radius: 2px;

			box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.08);

	}


	.phone-prefix__option:hover,

	.phone-prefix__option:focus {

			background: #f2f5f9;

	}


	.phone-prefix__summary-content {

			display: inline-flex;

			align-items: center;

			gap: 8px;

	}