/*
 * Marketplace: the parts kept from the first design. The dark search box and result card of the
 * License Check page (/license-check/), and the release list (What's new) on product pages. The
 * list and product pages themselves are styled by mpx.css.
 */

.wx-mp-search {
	display: flex;
	gap: 8px;
	max-width: 560px;
	padding: 6px;
	border: 1px solid rgba(255, 255, 255, .18);
	border-radius: 40px;
	background: rgba(255, 255, 255, .06);
}

.wx-mp-search input {
	flex: 1;
	min-width: 0;
	padding: 10px 18px;
	border: 0;
	background: transparent;
	color: #fff;
	font: 500 16px/1.4 "Manrope", sans-serif;
	outline: none;
}

.wx-mp-search input::placeholder {
	color: rgba(255, 255, 255, .55);
}

.wx-mp-search button {
	padding: 10px 22px;
	border: 0;
	border-radius: 30px;
	background: #fff;
	color: #131313;
	font: 600 15px/1.4 "Manrope", sans-serif;
	cursor: pointer;
}

.wx-mp-search:focus-within {
	border-color: rgba(255, 255, 255, .5);
}


/* ---------- license check ---------- */

.wx-mp-check {
	min-height: 70vh;
	padding-bottom: 90px;
}

.wx-mp-check__inner {
	max-width: 760px;
}

.wx-mp-check .wx-mp-search input {
	font-family: ui-monospace, Menlo, Consolas, monospace;
	letter-spacing: .5px;
	text-transform: uppercase;
}

.wx-mp-result {
	margin-top: 26px;
	padding: 24px 26px;
	border: 1px solid rgba(255, 255, 255, .2);
	border-radius: 18px;
	background: rgba(255, 255, 255, .05);
	color: rgba(255, 255, 255, .8);
}

.wx-mp-result.is-valid {
	border-color: #fff;
}

.wx-mp-result__title {
	margin: 0 0 12px !important;
	color: #fff;
	font-size: 22px;
	font-weight: 700;
}

.wx-mp-result dl {
	margin: 0;
}

.wx-mp-result dl > div {
	display: grid;
	grid-template-columns: 110px minmax(0, 1fr);
	gap: 14px;
	padding: 9px 0;
	border-top: 1px solid rgba(255, 255, 255, .12);
}

.wx-mp-result dt {
	color: rgba(255, 255, 255, .6);
}

.wx-mp-result dd {
	margin: 0;
	color: #fff;
	font-weight: 600;
}

.wx-mp .wx-mp-result dd a {
	color: #fff;
	text-decoration: underline;
	text-underline-offset: 3px;
}

.wx-mp-result p {
	margin: 10px 0 0 !important;
}


/* ---------- releases (What's new) ---------- */

.wx-mp .wx-mp-releases {
	margin: 0;
	padding: 0;
	list-style: none;
	border-left: 1px solid var(--wx-line);
}

.wx-mp .wx-mp-releases > li {
	position: relative;
	padding: 0 0 22px 24px;
}

.wx-mp .wx-mp-releases > li::before {
	content: "";
	position: absolute;
	top: 6px;
	left: -6px;
	width: 11px;
	height: 11px;
	border: 2px solid #fff;
	border-radius: 50%;
	background: #c9c9c9;
	box-shadow: 0 0 0 1px var(--wx-line);
}

.wx-mp .wx-mp-releases > li.is-current::before {
	background: var(--wx-dark);
}

.wx-mp-releases__head {
	margin: 0 0 6px !important;
	color: var(--wx-grey);
	font-size: 14px;
}

.wx-mp-releases__head strong {
	color: var(--wx-dark);
	font-size: 16px;
}

.wx-mp-releases__head em {
	margin-left: 6px;
	padding: 2px 8px;
	border-radius: 20px;
	background: var(--wx-dark);
	color: #fff;
	font-size: 11px;
	font-style: normal;
	font-weight: 700;
}

.wx-mp .wx-mp-releases ul {
	margin: 0;
	padding-left: 18px;
	color: var(--wx-text);
	font-size: 15px;
	line-height: 1.6;
}