/**
 * Кастомний випадний список для полів автокомпліту (заміна нативного
 * <datalist>, який у Chrome ширший за поле й не піддається CSS).
 * Theme-only — цього компонента нема в статичній верстці (там довідники
 * порожні плейсхолдери), тому власного файлу в дизайн-системі він не має.
 * Токени (--navy, --gold, --radius, --cream…) — ті самі, що в style.css.
 */

.kzd-ac { position: relative; }

.kzd-ac-list {
	position: absolute;
	top: 100%;
	left: 0;
	right: 0;
	z-index: 30;
	margin: 4px 0 0;
	padding: 6px;
	list-style: none;
	background: #fff;
	border-radius: var(--radius);
	box-shadow: 0 18px 48px rgba(12, 30, 62, .16);
	/* JS обрізає до 8 підказок (render у kzd-autocomplete.js) — на більшості
	   екранів вони вміщаються без скролу. На низьких вікнах, де 8 пунктів
	   не влазять, з'являється тонкий ледь помітний скрол замість того, щоб
	   список вилазив за екран. */
	max-height: min(360px, 60vh);
	overflow-y: auto;
	scrollbar-width: thin;
	scrollbar-color: rgba(244, 241, 234, .9) transparent;
}
.kzd-ac-list::-webkit-scrollbar { width: 6px; }
.kzd-ac-list::-webkit-scrollbar-track { background: transparent; }
.kzd-ac-list::-webkit-scrollbar-thumb {
	background: rgba(244, 241, 234, .85);
	border-radius: 999px;
}
.kzd-ac-list::-webkit-scrollbar-thumb:hover { background: rgba(244, 241, 234, 1); }

.kzd-ac-list[hidden] { display: none; }

.kzd-ac-item {
	padding: 10px 12px;
	border-radius: calc(var(--radius) - 6px);
	font-size: 15px;
	color: var(--gray-800, #1f2937);
	cursor: pointer;
	transition: background-color .15s ease;
}

.kzd-ac-item:hover,
.kzd-ac-item.is-active {
	background: var(--cream, #f4f1ea);
}

.kzd-ac-empty {
	padding: 10px 12px;
	font-size: 14px;
	color: var(--gray-400, #9ca3af);
}

/* Форма пошуку на /poshuk/ (page-poshuk.php) — той самий .filter-card
   (картка-наплив на стик крем/білий), але лише 2 елементи (поле + кнопка),
   а не 3-4 як у парафій/духовенства — тому своя, вужча сітка-модифікатор:
   поле займає увесь вільний простір, кнопка — по контенту. */
.filter-card.filter-card-search {
	grid-template-columns: 1fr auto;
}

/* Модалка пошуку по сайту (footer.php) — ширша за стандартну .contact-dialog
   (480px), бо в ній росте автокомпліт-список і вузько виглядало тісно.
   ⚠️ overflow:visible — інакше UA-стиль <dialog> (overflow:auto за
   замовчуванням) обрізає список підказок власним скролом замість того,
   щоб дати йому вилізти за межі попапа вниз. */
.search-dialog {
	width: min(640px, calc(100vw - 32px));
	overflow: visible;
}
.search-dialog .dialog-form {
	overflow: visible;
}