/* De lijst met plaatsen die onder een invoerveld openklapt. */

.pbf-plaatsen {
	position: absolute;
	z-index: 10000;
}

.pbf-plaatsen[hidden] { display: none; }

.pbf-plaatsen ul.pbf-lijst {
	margin: 2px 0 0;
	padding: 0;
	list-style: none;
	/* De lijst hangt onder het invoerveld en krijgt diens breedte. Dat veld kan smal
	   zijn - op de kalender past er net "Diest" in - en dan zou "Valenciennes" over
	   drie regels breken. Daarom een eigen ondergrens, maar nooit breder dan het
	   scherm. */
	min-width: 240px;
	max-width: calc(100vw - 32px);
	max-height: 60vh;
	overflow-y: auto;
	background: #fff;
	border: 1px solid #c9d7d9;
	border-radius: 4px;
	box-shadow: 0 6px 18px rgba( 0, 0, 0, .18 );
}

.pbf-plaatsen ul.pbf-lijst li {
	margin: 0;
	padding: 10px 12px;
	border-left: 3px solid transparent;
	border-bottom: 1px solid #edf1f2;
	color: #1d2d30;
	font-size: 16px;
	line-height: 1.3;
	cursor: pointer;
}

.pbf-plaatsen ul.pbf-lijst li:last-child { border-bottom: 0; }

.pbf-plaatsen ul.pbf-lijst li[aria-selected="true"],
.pbf-plaatsen ul.pbf-lijst li:hover {
	border-left-color: #0e9aa7;
	background: #eef7f8;
}

.pbf-plaatsen ul.pbf-lijst li.pbf-plaats-leeg {
	color: #3f4a4c;
	font-size: 15px;
	cursor: default;
}

.pbf-plaats-naam { display: block; }

/* Een lange naam mag afbreken, maar niet op elke lettergreep: liever één regel. */
.pbf-plaatsen ul.pbf-lijst li { overflow-wrap: anywhere; }

.pbf-plaats-extra {
	display: block;
	margin-top: 2px;
	color: #5d6b6e;
	font-size: 13px;
}

/* Alleen voor wie voorleest: in beeld zegt de lijst zelf al wat er gebeurt. */
.pbf-plaatsen-staat {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect( 0 0 0 0 );
	white-space: nowrap;
	border: 0;
}