/* Кастомный дропдаун Domig — стилизуемая замена нативного <select>.
   Нативный список опций браузер рисует ОС-стилями (зелёную подсветку/тень/скругление
   задать нельзя), поэтому JS (assets/js/dm-select.js) строит кастомный listbox поверх
   нативного select как прогрессивное улучшение. Попап живёт в <body> (position:fixed),
   чтобы его не резал overflow:hidden карточки hero.
   Дизайн: Figma home 4:2 → media/home/dropdown-design.svg. */

.dm-select {
	position: relative;
	display: inline-flex;
	min-width: 0;
	max-width: 100%;
}

/* Нативный select остаётся в DOM (сабмит формы + синк табов), но визуально скрыт. */
.dm-select__native {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	border: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}

/* Кнопка = визуальная замена поля: наследует шрифт/цвет поля, справа шеврон. */
.dm-select__button {
	display: inline-flex;
	align-items: center;
	max-width: 100%;
	margin: 0;
	padding: 0 1.25em 0 0;
	border: 0;
	background: transparent;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='9' height='6' viewBox='0 0 9 6' fill='none'%3E%3Cpath d='M1 1.25 4.5 4.75 8 1.25' stroke='%2325283b' stroke-width='1.3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right center;
	background-size: 0.6em auto;
	font: inherit;
	color: inherit;
	text-align: left;
	cursor: pointer;
	white-space: nowrap;
}
.dm-select__button:focus-visible {
	outline: 2px solid var(--wp--preset--color--primary);
	outline-offset: 3px;
	border-radius: 4px;
}
.dm-select__label {
	overflow: hidden;
	text-overflow: ellipsis;
}
/* Плейсхолдер (пустое значение) — приглушённый, как у нативного select. */
.dm-select.is-placeholder .dm-select__label {
	color: var(--wp--preset--color--subtle);
}

/* ── Попап (в body, position:fixed; координаты ставит JS) ── */
.dm-select__list {
	position: fixed;
	z-index: 1000;
	margin: 0;
	padding: 8px 0;
	list-style: none;
	background: #fff;
	border-radius: 16px;
	box-shadow: 0 6px 30px rgba(190, 190, 190, 0.25);
	max-height: 320px;
	overflow-y: auto;
	opacity: 0;
	transform: translateY(-6px);
	transition: opacity 0.16s ease, transform 0.16s ease;
}
.dm-select__list.is-shown {
	opacity: 1;
	transform: none;
}

.dm-select__option {
	padding: 12px 20px;
	font-family: var(--wp--preset--font-family--body);
	font-size: 16px;
	line-height: 1.375;
	color: var(--wp--preset--color--primary-dark);
	white-space: nowrap;
	cursor: pointer;
	transition: background-color 0.14s ease, color 0.14s ease;
}
/* Наведение / клавиатурный фокус */
.dm-select__option:hover,
.dm-select__option.is-focused {
	background: color-mix( in srgb, var(--wp--preset--color--primary) 8%, transparent );
	color: var(--wp--preset--color--primary);
}
/* Текущее выбранное значение — зелёная подсветка + вес (как в макете) */
.dm-select__option.is-active {
	background: color-mix( in srgb, var(--wp--preset--color--primary) 8%, transparent );
	color: var(--wp--preset--color--primary);
	font-weight: 500;
}

@media ( prefers-reduced-motion: reduce ) {
	.dm-select__list {
		transition: none;
	}
}

/* offers-carousel: региональный дропдаун — кнопка выглядит как пилюля-фильтр
   (как нативный .dm-offers__region-select: border + pill + padding), а список —
   общий стилизованный попап. */
.dm-offers__region .dm-select {
	display: inline-flex;
	max-width: 100%;
}
.dm-offers__region .dm-select__button {
	padding: 9px 34px 9px 16px;
	border: 1px solid var( --wp--custom--field--border );
	border-radius: var( --wp--custom--radius--pill, 999px );
	background-color: var( --wp--preset--color--base );
	background-position: right 14px center;
	font-size: 14px;
	line-height: 1.4;
	color: var( --wp--preset--color--contrast );
}

/* Воронки (bewertung/suchagent/vormerkkunde/investoren/investieren): кнопка dm-select
   повторяет их поле-select (бокс с рамкой + серый шеврон), список — общий стилизованный
   попап. Обёртка растягивается на всю колонку. Токены = те же, что у нативных полей. */
.dgf-field .dm-select,
.sgf-field .dm-select,
.vkf-field .dm-select {
	display: block;
	width: 100%;
}
.dgf-field .dm-select__button,
.sgf-field .dm-select__button,
.vkf-field .dm-select__button {
	box-sizing: border-box;
	width: 100%;
	padding: 15px 48px 15px 22px;
	border: 1px solid var( --wp--preset--color--border );
	border-radius: var( --wp--custom--radius--pill, 999px );
	background-color: var( --wp--preset--color--base );
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23525252' stroke-width='2'><path d='M6 9l6 6 6-6'/></svg>");
	background-repeat: no-repeat;
	background-position: right 20px center;
	background-size: 14px auto;
	color: var( --wp--preset--color--contrast );
}
.dgf-field .dm-select__button { font-size: 16px; }
.sgf-field .dm-select__button,
.vkf-field .dm-select__button { font-size: 14px; }