/*
 * Поле з пошуком і власним списком (assets/js/picker.js): міста й відділення
 * Нової пошти та Укрпошти — в оформленні замовлення і в кабінеті.
 */

.kit-picker-host { position: relative; display: block; }

.kit-picker {
	position: absolute;
	z-index: 30;
	top: 100%;
	inset-inline: 0;
	max-height: min(22rem, 60vh);
	margin: 0.25rem 0 0;
	padding: 0.25rem;
	overflow-y: auto;
	overscroll-behavior: contain;
	border: 1px solid var(--kit-border-subtle);
	border-radius: var(--wp--custom--radius--control);
	background: var(--kit-surface);
	box-shadow: var(--wp--custom--shadow--float);
	list-style: none;
}

.kit-picker__option,
.kit-picker__status {
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 0.1rem;
	min-width: 0;
	min-height: 44px;
	padding: 0.5rem 0.75rem;
	border-radius: 6px;
	font-size: var(--wp--preset--font-size--sm);
	line-height: 1.35;
}

.kit-picker__option {
	color: var(--kit-ink);
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
}

/* Зі значком: значок | назва й підпис. */
.kit-picker__option--icon {
	display: grid;
	grid-template-columns: 20px minmax(0, 1fr);
	align-items: center;
	column-gap: 0.7rem;
}

.kit-picker__body { display: grid; gap: 0.1rem; min-width: 0; }
.kit-picker__icon { color: var(--kit-text-muted); }
.kit-picker__option[aria-selected="true"] .kit-picker__icon,
.kit-picker__option:hover .kit-picker__icon { color: var(--kit-brand); }

.kit-picker__label { overflow-wrap: anywhere; }
.kit-picker__note { color: var(--kit-text-muted); font-size: 0.8125rem; }

/* Наведення мишею й вибір стрілками виглядають однаково. */
.kit-picker__option:hover,
.kit-picker__option[aria-selected="true"] { background: var(--kit-brand-soft); }
.kit-picker__option:active { background: var(--kit-brand-soft-hover); }

.kit-picker__status { color: var(--kit-text-muted); }
.kit-picker__status[data-state="error"] { color: var(--kit-error-text); }

/* Поле, поки не вибрано місто: без hover, як будь-який неактивний елемент. */
.kit-picker-host input:disabled {
	border-color: var(--kit-disabled-border);
	background: var(--kit-disabled-bg);
	color: var(--kit-disabled-text);
	cursor: not-allowed;
}