.bg-country-picker {
	display: block;
	inline-size: 100%;
	min-inline-size: 0;
	position: relative;
}

select.bg-country-picker__native,
select.bg-country-picker__js-source {
	block-size: 1px !important;
	inline-size: 1px !important;
	inset: auto !important;
	margin: -1px !important;
	opacity: 0 !important;
	overflow: hidden !important;
	padding: 0 !important;
	pointer-events: none !important;
	position: absolute !important;
}

select.bg-country-picker__native ~ .select2-container,
select.bg-country-picker__native ~ .selectWoo-container {
	display: none !important;
}

.bg-country-picker__trigger {
	align-items: center;
	background: var(--wp--preset--color--surface, #fff);
	border: 1px solid var(--wp--preset--color--border-strong, #c9d9eb);
	border-radius: var(--wp--custom--radius--input, 12px);
	box-shadow: 0 4px 15px rgba(12, 53, 104, 0.04);
	color: var(--wp--preset--color--text-primary, #102a56);
	direction: rtl;
	display: grid;
	font: inherit;
	gap: 8px;
	grid-template-columns: auto minmax(0, 1fr) auto auto;
	inline-size: 100%;
	min-block-size: 48px;
	padding: 8px 12px;
	text-align: start;
}

.bg-country-picker__trigger:hover {
	border-color: var(--wp--preset--color--primary, #168ef0);
}

.bg-country-picker__trigger:focus-visible,
.bg-country-picker.is-open .bg-country-picker__trigger {
	border-color: var(--wp--preset--color--primary, #168ef0);
	box-shadow: 0 0 0 4px color-mix(in srgb, var(--wp--preset--color--primary, #168ef0) 12%, transparent);
	outline: 0;
}

.bg-country-picker__flag {
	border-radius: 2px;
	display: inline-block;
	font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif;
	font-size: 18px;
	inline-size: 20px;
	line-height: 1;
	min-inline-size: 20px;
}

.bg-country-picker__flag.has-sprite {
	background-image: url("../img/country-flags.webp");
	background-image: image-set(url("../img/country-flags.webp") 1x, url("../img/country-flags@2x.webp") 2x);
	background-position: calc(var(--bg-country-flag-offset, 100) * 20px) 0;
	background-repeat: no-repeat;
	background-size: 4880px 15px;
	block-size: 15px;
	box-shadow: 0 0 1px rgba(8, 38, 82, 0.55);
}

.bg-country-picker__name,
.bg-country-picker__option-name {
	font-size: 13px;
	font-weight: 700;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.bg-country-picker__dial-code {
	color: var(--wp--preset--color--text-muted, #60718e);
	direction: ltr;
	font-size: 12px;
	font-variant-numeric: tabular-nums;
	font-weight: 700;
	unicode-bidi: isolate;
}

.bg-country-picker__chevron {
	color: var(--wp--preset--color--text-muted, #60718e);
	font-size: 16px;
	transition: transform 160ms ease;
}

.bg-country-picker.is-open .bg-country-picker__chevron {
	transform: rotate(180deg);
}

.bg-country-picker__panel {
	--bg-country-panel-inline-size: 360px;
	background: var(--wp--preset--color--surface, #fff);
	border: 1px solid var(--wp--preset--color--border-strong, #c9d9eb);
	border-radius: 16px;
	box-shadow: 0 18px 48px rgba(4, 40, 88, 0.22);
	direction: rtl;
	display: grid;
	inline-size: var(--bg-country-panel-inline-size);
	max-block-size: min(390px, calc(100vh - 24px));
	overflow: hidden;
	padding: 10px;
	position: fixed;
	z-index: 100100;
}

.bg-country-picker__panel[hidden] {
	display: none;
}

.bg-country-picker__search {
	display: block;
	padding-block-end: 8px;
}

.bg-country-picker__search input[type="search"] {
	appearance: none;
	background: #f7fbff;
	border: 1px solid var(--wp--preset--color--border-strong, #c9d9eb);
	border-radius: 10px;
	box-shadow: none;
	color: var(--wp--preset--color--text-primary, #102a56);
	direction: rtl;
	font: inherit;
	font-size: 14px;
	inline-size: 100%;
	min-block-size: 44px;
	padding: 9px 12px;
}

.bg-country-picker__search input[type="search"]:focus {
	border-color: var(--wp--preset--color--primary, #168ef0);
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--wp--preset--color--primary, #168ef0) 12%, transparent);
	outline: 0;
}

.bg-country-picker__options {
	display: grid;
	gap: 2px;
	list-style: none;
	margin: 0;
	max-block-size: 315px;
	overflow-y: auto;
	overscroll-behavior: contain;
	padding: 0;
	scrollbar-width: thin;
}

.bg-country-picker__option-item {
	display: block;
	margin: 0;
	padding: 0;
}

.bg-country-picker__option-item[hidden] {
	display: none;
}

.bg-country-picker__option {
	align-items: center;
	background: transparent;
	border: 0;
	border-radius: 9px;
	color: var(--wp--preset--color--text-primary, #102a56);
	direction: rtl;
	display: grid;
	font: inherit;
	gap: 9px;
	grid-template-columns: auto minmax(0, 1fr) auto 18px;
	inline-size: 100%;
	min-block-size: 44px;
	padding: 7px 10px;
	text-align: start;
}

.bg-country-picker__option:hover,
.bg-country-picker__option:focus-visible {
	background: #eff7ff;
	outline: 0;
}

.bg-country-picker__option.is-selected {
	background: #e7f4ff;
	color: var(--wp--preset--color--primary-dark, #075eab);
}

.bg-country-picker__check {
	color: var(--wp--preset--color--primary, #168ef0);
	font-weight: 800;
	opacity: 0;
}

.bg-country-picker__option.is-selected .bg-country-picker__check {
	opacity: 1;
}

.bg-country-picker__empty {
	color: var(--wp--preset--color--text-muted, #60718e);
	font-size: 13px;
	padding: 24px 12px;
	text-align: center;
}

.bg-country-picker__empty[hidden] {
	display: none;
}

.bg-auth__phone-composite.is-email > .bg-country-picker {
	display: none;
}

.wc-blocks-components-select__container:has(> select.bg-country-picker__native),
.woocommerce-input-wrapper:has(> select.bg-country-picker__native) {
	block-size: auto !important;
	height: auto !important;
}

.wc-blocks-components-select__container:has(> select.bg-country-picker__native) > .wc-blocks-components-select__label {
	display: none;
}

@media (max-width: 640px) {
	.bg-country-picker__trigger {
		gap: 6px;
		padding-inline: 9px;
	}

	.bg-country-picker__name {
		font-size: 12px;
	}

	.bg-country-picker__panel {
		border-radius: 14px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.bg-country-picker__chevron {
		transition: none;
	}
}
