/*
 * Выпадающий список .pb-dd — общий компонент вместо нативного <select> (dropdown.js строит разметку из <select data-pb-dd>).
 * Без JS работает нативный select. Токены — base.css.
 *
 * Разметка (строится скриптом):
 *   .pb-dd > select.pb-dd__native + button.pb-dd__btn(.pb-dd__val + .pb-dd__ic) + ul.pb-dd__list[role=listbox] > li.pb-dd__opt[role=option]
 * Модификаторы на обёртке: data-align="right|left" и data-pos="up" ставит скрипт при открытии; data-dd-mobile="native" —
 * на экранах ≤700px показывать системный select (системный пикер на телефоне удобнее).
 */

.pb-dd { position: relative; display: inline-block; max-width: 100%; }

/* Нативный select остаётся в форме (значение уходит им), но визуально скрыт */
.pb-dd__native {
	position: absolute !important; left: 0; top: 0; width: 1px; height: 1px; margin: 0; padding: 0; border: 0;
	opacity: 0; pointer-events: none; overflow: hidden; clip-path: inset(50%);
}

.pb-dd__btn {
	display: inline-flex; align-items: center; justify-content: space-between; gap: 10px; max-width: 100%;
	min-height: 40px; padding: 0 12px 0 16px; border: 0; border-radius: var(--pb-pill);
	background: var(--pb-bg); color: var(--pb-ink); font: inherit; font-size: 15px; font-weight: 500; line-height: 1.2;
	white-space: nowrap; cursor: pointer; transition: background .15s, color .15s;
}
.pb-dd__btn:hover, .pb-dd.is-open .pb-dd__btn { background: var(--pb-bg2); }
.pb-dd__btn:focus-visible { outline: 2px solid var(--pb-blue); outline-offset: 2px; }
.pb-dd__val { overflow: hidden; text-overflow: ellipsis; }
.pb-dd__ic { flex: none; display: flex; color: var(--pb-muted); transition: transform .2s, color .15s; }
.pb-dd__btn:hover .pb-dd__ic, .pb-dd.is-open .pb-dd__ic { color: var(--pb-ink); }
.pb-dd.is-open .pb-dd__ic { transform: rotate(180deg); }
.pb-dd.is-disabled .pb-dd__btn { opacity: .5; pointer-events: none; }

.pb-dd__list {
	position: absolute; z-index: 70; top: calc(100% + 8px); left: 0; min-width: 100%; width: max-content;
	max-width: min(320px, calc(100vw - 24px)); max-height: min(360px, 60vh); overflow-y: auto; overscroll-behavior: contain;
	margin: 0; padding: 8px; list-style: none; background: #fff; border-radius: 20px;
	box-shadow: 0 20px 48px rgba(32, 32, 32, .16); outline: 0;
	animation: pb-dd-in .16s ease-out;
}
.pb-dd__list[hidden] { display: none; }
.pb-dd[data-align="right"] .pb-dd__list { left: auto; right: 0; }
.pb-dd[data-pos="up"] .pb-dd__list { top: auto; bottom: calc(100% + 8px); animation-name: pb-dd-in-up; }
@keyframes pb-dd-in { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
@keyframes pb-dd-in-up { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

.pb-dd__opt {
	display: flex; align-items: center; justify-content: space-between; gap: 18px; min-height: 44px; padding: 0 12px 0 14px;
	border-radius: 12px; font-size: 15px; font-weight: 400; line-height: 1.25; color: var(--pb-ink); cursor: pointer;
	transition: background .12s, color .12s;
}
.pb-dd__opt.is-active { background: var(--pb-bg); }
.pb-dd__opt[aria-selected="true"] { font-weight: 600; color: var(--pb-blue-ink); }
.pb-dd__opt[aria-disabled="true"] { opacity: .4; cursor: default; }
.pb-dd__chk { flex: none; display: flex; width: 18px; color: var(--pb-blue); opacity: 0; transform: scale(.7); transition: opacity .12s, transform .12s; }
.pb-dd__opt[aria-selected="true"] .pb-dd__chk { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
	.pb-dd__list { animation: none; }
	.pb-dd__ic, .pb-dd__chk { transition: none; }
}

/* ≤700px: системный select (если задан data-dd-mobile="native") */
@media (max-width: 700px) {
	.pb-dd[data-dd-mobile="native"] { display: block; min-width: 0; }
	.pb-dd[data-dd-mobile="native"] .pb-dd__btn,
	.pb-dd[data-dd-mobile="native"] .pb-dd__list { display: none !important; }
	.pb-dd[data-dd-mobile="native"] .pb-dd__native {
		position: static !important; width: auto; height: auto; opacity: 1; pointer-events: auto; overflow: visible; clip-path: none;
	}
}