/* ==========================================================================
   Zoekveld in het mobiele menu en de knop "Sell" naast het logo.
   Allebei alleen op een telefoon; op een breed scherm staat het zoeken in de
   megamenu's en de knop "Sell your machine" al rechtsboven.
   ========================================================================== */

.stc-kopverkoop,
.stc-menuzoek {
	--k-navy: #00394d;
	--k-teal: #00b7be;
	--k-grijs: #f1f2f4;
}

/* ---------- De knop naast het logo ---------- */

.stc-kopverkoop {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	margin-left: auto;
	padding: 8px 14px 8px 11px;
	border: 1px solid rgba(0, 57, 77, 0.14);
	border-radius: 100px;
	background: #ffffff;
	color: var(--k-navy);
	font: inherit;
	font-size: 0.82rem;
	font-weight: 700;
	line-height: 1;
	cursor: pointer;
}

.stc-kopverkoop:active {
	background: var(--k-grijs);
}

/* Een prijskaartje, met CSS getekend. */
.stc-kopverkoop__icoon {
	position: relative;
	width: 17px;
	height: 17px;
	border: 2px solid var(--k-teal);
	border-radius: 3px 5px 3px 3px;
	transform: rotate(-12deg);
}

.stc-kopverkoop__icoon::before {
	content: "";
	position: absolute;
	top: 2px;
	right: 2px;
	width: 3px;
	height: 3px;
	border-radius: 50%;
	background: var(--k-teal);
}

/* ---------- Het zoekveld in het menu ---------- */

.stc-menuzoek {
	position: relative;
	display: flex;
	align-items: center;
	margin: 0 0 18px;
}

/* Het menupaneel is lichtgrijs, dus het veld wordt wit met een navy rand. */
.stc-menuzoek input[type="search"] {
	width: 100%;
	height: 48px;
	padding: 0 52px 0 18px;
	border: 1px solid rgba(0, 57, 77, 0.16);
	border-radius: 100px;
	background: #ffffff;
	color: var(--k-navy);
	font-size: 1rem;
	-webkit-appearance: none;
	appearance: none;
}

.stc-menuzoek input[type="search"]::placeholder {
	color: rgba(0, 57, 77, 0.5);
}

.stc-menuzoek input[type="search"]:focus {
	outline: none;
	border-color: var(--k-teal);
	box-shadow: 0 0 0 3px rgba(0, 183, 190, 0.18);
}

.stc-menuzoek button {
	position: absolute;
	right: 5px;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: var(--k-teal);
	cursor: pointer;
}

/* Een vergrootglas: rondje met een steeltje. */
.stc-menuzoek button span {
	position: relative;
	width: 12px;
	height: 12px;
	border: 2px solid #ffffff;
	border-radius: 50%;
}

.stc-menuzoek button span::after {
	content: "";
	position: absolute;
	top: 10px;
	left: 9px;
	width: 2px;
	height: 7px;
	border-radius: 2px;
	background: #ffffff;
	transform: rotate(-45deg);
}

/* ---------- Alleen op een telefoon ---------- */

@media (min-width: 992px) {
	.stc-kopverkoop,
	.stc-menuzoek {
		display: none;
	}
}

/* ---------- Het venster om een machine aan te bieden ---------- */

.stc-verkoop {
	position: fixed;
	inset: 0;
	z-index: 9999;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 20px;
}

.stc-verkoop[hidden] {
	display: none;
}

body.stc-verkoop-open {
	overflow: hidden;
}

.stc-verkoop__scherm {
	position: absolute;
	inset: 0;
	background: rgba(0, 22, 30, 0.55);
}

.stc-verkoop__venster {
	position: relative;
	width: 100%;
	max-width: 420px;
	padding: clamp(22px, 5vw, 32px);
	border-radius: 20px;
	background: #ffffff;
	box-shadow: 0 20px 60px rgba(0, 22, 30, 0.35);
	text-align: center;
}

.stc-verkoop__sluit {
	position: absolute;
	top: 12px;
	right: 12px;
	width: 34px;
	height: 34px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: #f1f2f4;
	color: #00394d;
	font-size: 20px;
	line-height: 1;
	cursor: pointer;
}

.stc-verkoop__label {
	margin: 0 0 6px;
	font-size: 0.72rem;
	font-weight: 800;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: #00b7be;
}

.stc-verkoop .stc-verkoop__kop {
	margin: 0 0 8px;
	font-size: 1.45rem;
}

.stc-verkoop__tekst {
	margin: 0 0 20px;
	font-size: 0.92rem;
	line-height: 1.5;
	color: rgba(0, 57, 77, 0.72);
}

.stc-verkoop__wa {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	padding: 15px 18px;
	border-radius: 100px;
	background: #25d366;
	color: #ffffff;
	font-weight: 700;
	text-decoration: none;
}

.stc-verkoop__wa:hover {
	background: #1fbe5a;
	color: #ffffff;
	text-decoration: none;
}

.stc-verkoop__wa-icoon {
	position: relative;
	width: 22px;
	height: 22px;
	border: 2px solid #ffffff;
	border-radius: 50% 50% 50% 4px;
}

.stc-verkoop__wa-icoon::before {
	content: "";
	position: absolute;
	top: 5px;
	left: 4px;
	width: 9px;
	height: 7px;
	border-radius: 2px;
	background: #ffffff;
}

.stc-verkoop__pagina {
	display: inline-block;
	margin-top: 16px;
	font-size: 0.88rem;
	font-weight: 700;
	color: #00394d;
}

.stc-verkoop__pagina:hover {
	color: #00b7be;
}

@media (max-width: 600px) {
	.stc-verkoop {
		padding: 0;
		align-items: flex-end;
	}

	.stc-verkoop__venster {
		max-width: none;
		border-radius: 20px 20px 0 0;
	}
}

/* ---------- Volgorde in het mobiele menu ----------
   Over STC, Werken bij en Contact stonden bovenin de la. Ze horen onderaan,
   onder Service, in hun eigen blokje, met "Verkoop uw machine" ertussen.
   De streep verhuist daarom van onder naar boven. Boven 992px is de la een
   gewone balk en verandert er niets. */

@media (max-width: 991.98px) {
	.navigation-menu .stc-menuzoek {
		order: 1;
	}

	.navigation-menu .menu-menu {
		order: 2;
	}

	.navigation-menu .navigation-actions {
		order: 3;
	}

	.navigation-menu .top-menu {
		order: 4;
		margin: 26px -15px -15px;
		border-top: 1px solid rgba(255, 255, 255, 0.14);
		border-bottom: 0;
	}
}