/**
 * «منوی کشویی زیبا» (inc/nice-select.php, assets/js/nice-select.js): the
 * option list of a <select> as a popover under the field, and from phones
 * down as a bottom sheet in the confirm sheet's style (assets/css/dialog.css).
 * Plain CSS so it works in wp-admin too; the --ffd-* colors are set inline
 * per context. The element is a manual popover where supported, so the UA
 * [popover] box styles are reset here.
 */

.ff-select {
	--ffs-ease: cubic-bezier(0.32, 0.72, 0, 1);

	position: fixed;
	inset: auto;
	top: 0;
	left: 0;
	/* Above the admin bar and the confirm sheet; toasts stay on top. */
	z-index: 100001;
	display: none;
	flex-direction: column;
	box-sizing: border-box;
	width: 240px;
	height: auto;
	max-height: 340px;
	margin: 0;
	padding: 0;
	overflow: visible;
	border: 0;
	background: transparent;
	color: var(--ffd-ink);
	font-size: 14px;
	line-height: 1.6;
	text-align: start;
	-webkit-font-smoothing: antialiased;
}

.ff-select.is-open {
	display: flex;
}

.ff-select *,
.ff-select *::before,
.ff-select *::after {
	box-sizing: border-box;
}

.ff-select [hidden] {
	display: none !important;
}

.ff-select__box {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	min-height: 0;
	padding: 6px;
	overflow: hidden;
	border: 1px solid var(--ffd-border);
	border-radius: 14px;
	background: var(--ffd-surface);
	box-shadow: 0 16px 40px -12px rgb(15 23 42 / 0.28), 0 4px 10px -4px rgb(15 23 42 / 0.08);
	animation: ff-select-in 0.14s ease-out;
}

.ff-select__head {
	display: none;
}

/* Search ------------------------------------------------------------- */

.ff-select__search {
	flex: none;
	padding: 0 0 6px;
}

.ff-select__search input,
.ff-select__search input[type="search"] {
	width: 100%;
	max-width: none;
	height: 36px;
	min-height: 0;
	margin: 0;
	padding: 0 12px;
	border: 1px solid var(--ffd-border);
	border-radius: 10px;
	background: var(--ffd-surface);
	color: inherit;
	font: inherit;
	font-size: 13px;
	box-shadow: none;
	outline: none;
	-webkit-appearance: none;
	appearance: none;
}

.ff-select__search input:focus {
	border-color: var(--ffd-primary-500);
	box-shadow: 0 0 0 3px var(--ffd-primary-50);
}

/* Options ------------------------------------------------------------ */

.ff-select__list {
	position: relative;
	flex: 1 1 auto;
	min-height: 0;
	margin: 0;
	padding: 0;
	overflow-y: auto;
	overscroll-behavior: contain;
	list-style: none;
	scrollbar-width: thin;
}

.ff-select__group {
	margin: 0;
	padding: 8px 10px 4px;
	color: var(--ffd-ink-muted);
	font-size: 12px;
	font-weight: 700;
}

.ff-select__option {
	display: flex;
	align-items: center;
	gap: 8px;
	min-height: 36px;
	margin: 0;
	padding: 6px 10px;
	border-radius: 9px;
	cursor: pointer;
	user-select: none;
	-webkit-tap-highlight-color: transparent;
}

.ff-select__label {
	flex: 1 1 auto;
	min-width: 0;
	overflow-wrap: anywhere;
}

.ff-select__check {
	flex: none;
	width: 16px;
	height: 16px;
	color: var(--ffd-primary-600);
	visibility: hidden;
}

.ff-select__option.is-active {
	background: var(--ffd-primary-50);
}

.ff-select__option[aria-selected="true"] {
	color: var(--ffd-primary-700);
	font-weight: 600;
}

.ff-select__option[aria-selected="true"] .ff-select__check {
	visibility: visible;
}

.ff-select__option.is-disabled {
	cursor: not-allowed;
	opacity: 0.45;
}

.ff-select__empty {
	margin: 0;
	padding: 14px 10px;
	color: var(--ffd-ink-muted);
	font-size: 13px;
	text-align: center;
}

/* Bottom sheet (phones) ---------------------------------------------- */

html.ff-select-open,
html.ff-select-open body {
	overflow: hidden;
}

.ff-select.is-sheet {
	inset: 0;
	width: auto;
	max-height: none;
	justify-content: flex-end;
	background: rgb(15 23 42 / 0.5);
	background: color-mix(in srgb, var(--ffd-ink) 50%, transparent);
	-webkit-backdrop-filter: blur(4px);
	backdrop-filter: blur(4px);
	animation: ff-select-fade 0.2s ease-out;
}

.ff-select.is-sheet .ff-select__box {
	flex: 0 1 auto;
	max-height: 85vh;
	max-height: 85dvh;
	padding: 0 12px calc(12px + env(safe-area-inset-bottom, 0px));
	border: 0;
	border-radius: 1.5rem 1.5rem 0 0;
	font-size: 15px;
	animation: ff-select-up 0.32s var(--ffs-ease);
}

.ff-select.is-sheet .ff-select__head {
	position: relative;
	display: flex;
	flex: none;
	align-items: center;
	gap: 8px;
	padding: 20px 4px 10px;
}

.ff-select__grip {
	position: absolute;
	top: 8px;
	left: 50%;
	width: 40px;
	height: 4px;
	margin-left: -20px;
	border-radius: 999px;
	background: var(--ffd-border);
}

.ff-select__title {
	flex: 1 1 auto;
	min-width: 0;
	font-size: 16px;
	font-weight: 800;
}

.ff-select__x {
	display: inline-flex;
	flex: none;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 999px;
	background: color-mix(in srgb, var(--ffd-ink) 6%, transparent);
	color: var(--ffd-ink-muted);
	cursor: pointer;
}

.ff-select__x svg {
	width: 18px;
	height: 18px;
}

.ff-select.is-sheet .ff-select__search {
	padding-bottom: 8px;
}

/* 16px keeps iOS from zooming into the field. */
.ff-select.is-sheet .ff-select__search input {
	height: 42px;
	font-size: 16px;
}

.ff-select.is-sheet .ff-select__option {
	min-height: 46px;
	padding: 10px 12px;
	border-radius: 12px;
}

@keyframes ff-select-in {
	from {
		opacity: 0;
		transform: translateY(-4px) scale(0.98);
	}
}

@keyframes ff-select-fade {
	from {
		opacity: 0;
	}
}

@keyframes ff-select-up {
	from {
		transform: translateY(100%);
	}
}

@media (prefers-reduced-motion: reduce) {
	.ff-select,
	.ff-select__box,
	.ff-select.is-sheet .ff-select__box {
		animation: none;
	}
}