/* =========================================================
   FXNook Marketplace Tools - the product page.
   Trust strip under the price, "what you get" under the buy
   button, and a tidier specs card. Borrows the theme's font;
   only spacing, colour and shape are set here.
   ========================================================= */

/* ---------- Trust strip ---------- */

.fxnmt-trust {
	list-style: none;
	margin: 6px 0 22px;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.fxnmt-trust__chip {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 5px 12px;
	border-radius: 999px;
	font-size: 12.5px;
	font-weight: 600;
	line-height: 1.3;
	background: var(--fxn-surface, #F7F7F4);
	color: var(--fxn-text, #4A4546);
	border: 1px solid var(--fxn-line, #E7E5E2);
}

.fxnmt-trust__chip::before {
	content: "";
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--fxn-subtle, #9A9596);
	flex: 0 0 auto;
}

.fxnmt-trust__chip--verified { background: var(--fxn-green-tint, #F2F8E6); color: var(--fxn-green-deep, #4A7515); border-color: var(--fxn-green-line, #D9EBBB); }
.fxnmt-trust__chip--verified::before { background: var(--fxn-green, #9DCC4C); }
.fxnmt-trust__chip--type     { background: var(--fxn-surface-2, #EFEEEA); color: var(--fxn-text, #4A4546); border-color: var(--fxn-line, #E7E5E2); }
.fxnmt-trust__chip--type::before { background: var(--fxn-green-deep, #4A7515); }
.fxnmt-trust__chip--version::before  { background: #f59e0b; }
.fxnmt-trust__chip--accounts::before { background: var(--fxn-muted, #6B6667); }

/* ---------- What you get ---------- */

.fxnmt-benefits {
	margin: 22px 0 8px;
	padding: 16px 20px;
	border: 1px solid var(--fxn-line, #E7E5E2);
	border-radius: 10px;
	background: var(--fxn-surface, #F7F7F4);
	max-width: 460px;
}

.fxnmt-benefits__title {
	margin: 0 0 10px;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: .4px;
	text-transform: uppercase;
	color: var(--fxn-text, #4A4546);
}

.fxnmt-benefits__list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.fxnmt-benefits__list li {
	position: relative;
	padding: 5px 0 5px 26px;
	font-size: 13.5px;
	line-height: 1.5;
	color: var(--fxn-text, #4A4546);
}

.fxnmt-benefits__list li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 9px;
	width: 16px;
	height: 16px;
	border-radius: 50%;
	background: var(--fxn-green, #9DCC4C);
	-webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path fill='black' d='M6.5 11.3 3.2 8l1.1-1.1 2.2 2.2 5.2-5.2 1.1 1.1z'/></svg>") center / 100% no-repeat, linear-gradient(#000 0 0);
	        mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path fill='black' d='M6.5 11.3 3.2 8l1.1-1.1 2.2 2.2 5.2-5.2 1.1 1.1z'/></svg>") center / 100% no-repeat, linear-gradient(#000 0 0);
	-webkit-mask-composite: xor;
	        mask-composite: exclude;
}

/* ---------- The specs card, restyled ---------- */

.fxnook-specs-wrap {
	max-width: none;
	border-radius: 12px;
	padding: 18px 20px 8px;
	box-shadow: 0 6px 20px rgba(35, 31, 32, .06);
}

.fxnook-specs-wrap h3 {
	font-size: 14px;
	margin-bottom: 10px;
}

.fxnook-specs-table td {
	padding: 10px 2px;
	border-bottom: 1px solid var(--fxn-surface, #F7F7F4);
	font-size: 13.5px;
}

.fxnook-specs-table tr:last-child td { border-bottom: 0; }

.fxnook-specs-table td.spec-label { width: 46%; font-weight: 600; }
.fxnook-specs-table td.spec-val   { font-weight: 600; }

.fxnook-specs-table tr:hover { background: transparent; }

.fxnook-specs-table td.spec-val a.fxnmt-spec-btn {
	display: inline-block;
	padding: 5px 12px;
	border-radius: 999px;
	background: var(--fxn-green, #9DCC4C);
	color: var(--fxn-ink, #231F20);
	font-size: 12px;
	font-weight: 700;
}
.fxnook-specs-table td.spec-val a.fxnmt-spec-btn:hover { background: var(--fxn-green-hover, #8BBB3B); text-decoration: none; }

.fxnmt-unverified {
	background: var(--fxn-surface, #F7F7F4);
	color: var(--fxn-muted, #6B6667);
	border-color: var(--fxn-line, #E7E5E2);
	font-weight: 600;
}

@media (max-width: 768px) {
	.fxnmt-benefits { max-width: 100%; }
}
