/**
 * Suggestielijst bij het veld "Gewenste handschoen" (bulkaanvraagformulier).
 * Sluit aan op de bestaande Gravity Forms-stijl in style.css:
 * veldhoogte 56px, rand #E9E8E3, focus #024166.
 */

/*
 * Groen accentwoord in de titel, zoals "nummer 1" in
 * "Europese nummer 1 in werkhandschoenen" elders op de site.
 */
.bulkaanvraag-formulier .content-links h1 span,
.bulkaanvraag-formulier .content-links h2 span,
/*
 * De titel rechts is geen kop maar de eerste <p> (40px via het thema).
 * Alleen die alinea: het formulier staat in dezelfde .tekst-container en
 * heeft eigen spans ("(Vereist)") die niet groen mogen worden.
 */
.bulkaanvraag-formulier .content-rechts .tekst > p:first-child span {
	color: #61da06;
}

/*
 * Het thema haalt de onderpadding van .contactblokken weg omdat dat blok op de
 * contactpagina bóven het formulier staat:
 *     @media (min-width:768px){ .sub-contact .contactblokken{padding-bottom:0!important} }
 * Hier staat het blok juist onderaan en plakt het dan tegen de USP-balk.
 * Eigen klasse erbij zodat alleen deze pagina wordt overschreven.
 */
@media (min-width: 768px) {
	.sub-contact .contactblokken.bulkaanvraag-blokken {
		padding-bottom: 64px !important;
	}
}

.pwh-bulk-zoekveld .ginput_container {
	position: relative;
}

/* --- kruisje om het veld in één klik te wissen ------------------------- */
.pwh-bulk-wissen {
	position: absolute;
	top: 0;
	right: 0;
	/*
	 * Vaste hoogte i.p.v. bottom:0 — de container bevat óók het
	 * gekozen-product-kaartje, dus bottom:0 rekte het kruisje daaroverheen
	 * en leek er een tweede kruisje te staan. 56px = veldhoogte uit style.css.
	 */
	height: 56px;
	width: 44px; /* volwaardig tapdoel */
	padding: 0;
	border: 0;
	background: none;
	font-size: 24px;
	line-height: 1;
	color: #989898;
	cursor: pointer;
}

.pwh-bulk-wissen:hover,
.pwh-bulk-wissen:focus {
	color: #000;
}

/* Ruimte maken zodat lange namen niet onder het kruisje doorlopen. */
.pwh-bulk-zoekveld input[type="text"] {
	padding-right: 44px;
}

/* --- gekozen product --------------------------------------------------- */
.pwh-bulk-gekozen {
	margin-top: 8px;
	padding: 10px;
	background: #f5f5f2;
	border: 1px solid #e9e8e3;
	border-radius: 6px;
}

.pwh-bulk-gekozen-kop {
	display: block;
	margin-bottom: 6px;
	font-size: 12px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: .04em;
	color: #989898;
}

.pwh-bulk-gekozen-rij {
	display: flex;
	align-items: center;
	gap: 12px;
}

.pwh-bulk-gekozen img {
	flex: 0 0 44px;
	width: 44px;
	height: 44px;
	object-fit: contain;
	background: #fff;
	border: 1px solid #e9e8e3;
	border-radius: 4px;
}

.pwh-bulk-gekozen .pwh-bulk-tekst {
	flex: 1 1 auto;
}

.pwh-bulk-gekozen .pwh-bulk-naam {
	white-space: normal;
}

.pwh-bulk-gekozen-weg {
	flex: 0 0 32px;
	width: 32px;
	height: 32px;
	padding: 0;
	border: 0;
	border-radius: 4px;
	background: none;
	font-size: 22px;
	line-height: 1;
	color: #989898;
	cursor: pointer;
}

.pwh-bulk-gekozen-weg:hover,
.pwh-bulk-gekozen-weg:focus {
	background: #e9e8e3;
	color: #000;
}

/*
 * Veldklasse ervoor: het thema heeft `.content-builder ul { margin-left: 18px }`
 * en die selector wint van een losse klasse — de lijst stond daardoor 18px
 * naast het invoerveld.
 */
.pwh-bulk-zoekveld .pwh-bulk-suggesties {
	position: absolute;
	z-index: 20;
	top: calc(100% + 4px);
	left: 0;
	right: 0;
	max-height: 320px;
	overflow-y: auto;
	margin: 0;
	padding: 4px;
	list-style: none;
	background: #fff;
	border: 1px solid #e9e8e3;
	border-radius: 6px;
	box-shadow: 0 8px 24px rgba(0, 0, 0, .12);
}

.pwh-bulk-suggesties li {
	display: flex;
	align-items: center;
	gap: 12px;
	margin: 0;
	padding: 8px;
	border-radius: 4px;
	cursor: pointer;
}

.pwh-bulk-suggesties li:hover,
.pwh-bulk-suggesties li.is-actief {
	background: #f5f5f2;
}

.pwh-bulk-suggesties img {
	flex: 0 0 44px;
	width: 44px;
	height: 44px;
	object-fit: contain;
	background: #fff;
	border: 1px solid #e9e8e3;
	border-radius: 4px;
}

.pwh-bulk-tekst {
	display: flex;
	flex-direction: column;
	min-width: 0;
}

.pwh-bulk-naam {
	font-size: 14px;
	line-height: 1.3;
	color: #000;
	/* Lange productnamen mogen de lijst niet oprekken. */
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.pwh-bulk-sku {
	margin-top: 2px;
	font-size: 12px;
	line-height: 1.2;
	color: #989898;
}

/*
 * "25 van 142 getoond - klik voor meer": laadt de volgende 25 bij.
 * Sticky, zodat hij in beeld blijft terwijl je door de lijst scrollt.
 */
.pwh-bulk-suggesties li.pwh-bulk-meer {
	display: block;
	position: sticky;
	bottom: -4px;
	margin: 4px -4px -4px;
	padding: 10px 12px;
	background: #f5f5f2;
	border-top: 1px solid #e9e8e3;
	border-radius: 0 0 6px 6px;
	font-size: 12px;
	font-weight: 600;
	color: #024166;
	text-align: center;
	cursor: pointer;
}

.pwh-bulk-suggesties li.pwh-bulk-meer:hover {
	background: #e9e8e3;
}

.pwh-bulk-suggesties li.pwh-bulk-leeg {
	display: block;
	padding: 12px 8px;
	font-size: 14px;
	color: #989898;
	cursor: default;
}

.pwh-bulk-suggesties li.pwh-bulk-leeg:hover {
	background: none;
}

/* Op mobiel is de lijst het belangrijkste op het scherm: iets meer ademruimte. */
@media (max-width: 768px) {
	.pwh-bulk-suggesties {
		max-height: 260px;
	}

	.pwh-bulk-suggesties li {
		padding: 10px 8px;
	}

	/*
	 * De lijst is hier maar ~245px breed, waardoor élke productnaam op één regel
	 * wordt afgekapt ("+Safety 59-200 werkhandschoe...") en producten niet meer
	 * te onderscheiden zijn. Daarom hier twee regels i.p.v. ellipsis.
	 */
	.pwh-bulk-naam {
		white-space: normal;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
		overflow: hidden;
	}
}