/*
 * Tool matcher ([backshack_tool_matcher]). Every rule is scoped to .bs-tool-matcher.
 * Plain CSS on purpose: the theme's Tailwind is precompiled, so new utility classes would not exist.
 * No ul/ol/li are used, because the theme forces list styling on main#content .entry-content li.
 * Button rules use the doubled id #bs-tool-matcher#bs-tool-matcher: backshack-custom.css styles every
 * `main#content button:not(...)` (specificity 1,3,1), which beat a plain class-scoped rule.
 * MARKER: bs-tool-matcher-css
 */

.bs-tool-matcher {
	--tm-ink: #0f172a;
	--tm-body: #334155;
	--tm-muted: #64748b;
	--tm-line: #e2e8f0;
	--tm-surface: #ffffff;
	--tm-tint: #f8fafc;
	--tm-accent: #4f46e5;
	--tm-accent-dark: #4338ca;
	--tm-accent-tint: #eef2ff;
	--tm-error: #b91c1c;
	color: var(--tm-body);
	font-size: 1rem;
	line-height: 1.55;
	max-width: 44rem;
	margin: 0 auto;
}

.bs-tool-matcher *,
.bs-tool-matcher *::before,
.bs-tool-matcher *::after {
	box-sizing: border-box;
}

.bs-tool-matcher .bs-tm-card {
	background: var(--tm-surface);
	border: 1px solid var(--tm-line);
	border-radius: 1rem;
	padding: 1.5rem;
	display: flex;
	flex-direction: column;
	gap: 0.9rem;
}

.bs-tool-matcher .bs-tm-title {
	font-size: 1.25rem;
	font-weight: 700;
	color: var(--tm-ink);
	margin: 0;
}

.bs-tool-matcher .bs-tm-lead {
	margin: 0;
}

.bs-tool-matcher .bs-tm-note {
	margin: 0;
	font-size: 0.9rem;
	color: var(--tm-muted);
}

/* TOOL-MATCHER-PRICE-DISCLAIMER: estimate disclaimer under the results prices. */
.bs-tool-matcher .bs-tm-disclaimer {
	margin-top: 0.75rem;
	font-size: 0.85rem;
}

.bs-tool-matcher .bs-tm-error {
	margin: 0;
	font-size: 0.9rem;
	color: var(--tm-error);
}

.bs-tool-matcher .bs-tm-label {
	display: block;
	font-weight: 600;
	color: var(--tm-ink);
	margin: 0.25rem 0 0;
}

.bs-tool-matcher .bs-tm-input {
	width: 100%;
	border: 1px solid var(--tm-line);
	border-radius: 0.6rem;
	padding: 0.6rem 0.75rem;
	font: inherit;
	color: var(--tm-ink);
	background: var(--tm-tint);
	resize: vertical;
}

.bs-tool-matcher .bs-tm-input:focus {
	outline: 2px solid var(--tm-accent);
	outline-offset: 1px;
	background: var(--tm-surface);
}

.bs-tool-matcher .bs-tm-actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.75rem;
	margin-top: 0.25rem;
}

#bs-tool-matcher#bs-tool-matcher .bs-tm-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 2.75rem;
	padding: 0.6rem 1.2rem;
	border-radius: 0.6rem;
	border: 1px solid var(--tm-line);
	background: var(--tm-surface);
	color: var(--tm-ink);
	font: inherit;
	font-weight: 600;
	text-decoration: none;
	cursor: pointer;
}

#bs-tool-matcher#bs-tool-matcher .bs-tm-btn-primary {
	background: var(--tm-accent);
	border-color: var(--tm-accent);
	color: #ffffff;
}

#bs-tool-matcher#bs-tool-matcher .bs-tm-btn-primary:hover,
#bs-tool-matcher#bs-tool-matcher .bs-tm-btn-primary:focus {
	background: var(--tm-accent-dark);
	color: #ffffff;
}

#bs-tool-matcher#bs-tool-matcher .bs-tm-btn:disabled {
	opacity: 0.5;
	cursor: not-allowed;
}

#bs-tool-matcher#bs-tool-matcher .bs-tm-link {
	background: none;
	border: 0;
	padding: 0.25rem 0;
	color: var(--tm-accent);
	font: inherit;
	text-decoration: underline;
	cursor: pointer;
}

.bs-tool-matcher .bs-tm-choices {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
	gap: 0.6rem;
}

#bs-tool-matcher#bs-tool-matcher .bs-tm-choice {
	text-align: left;
	min-height: 2.75rem;
	padding: 0.8rem 1rem;
	border: 1px solid var(--tm-line);
	border-radius: 0.6rem;
	background: var(--tm-surface);
	font: inherit;
	color: var(--tm-ink);
	cursor: pointer;
}

#bs-tool-matcher#bs-tool-matcher .bs-tm-choice:hover,
#bs-tool-matcher#bs-tool-matcher .bs-tm-choice[aria-pressed="true"] {
	border-color: var(--tm-accent);
	background: var(--tm-accent-tint);
}

.bs-tool-matcher .bs-tm-tasks {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
}

.bs-tool-matcher .bs-tm-task {
	display: flex;
	align-items: flex-start;
	gap: 0.6rem;
	padding: 0.7rem 0.9rem;
	border: 1px solid var(--tm-line);
	border-radius: 0.6rem;
	cursor: pointer;
}

.bs-tool-matcher .bs-tm-task input {
	flex: 0 0 auto;
	width: 1.05rem;
	height: 1.05rem;
	margin-top: 0.3rem;
	accent-color: var(--tm-accent);
}

.bs-tool-matcher .bs-tm-task:has(input:checked) {
	border-color: var(--tm-accent);
	background: var(--tm-accent-tint);
}

.bs-tool-matcher .bs-tm-thinking {
	margin: 0;
	padding: 1.5rem;
	text-align: center;
	color: var(--tm-muted);
	background: var(--tm-surface);
	border: 1px solid var(--tm-line);
	border-radius: 1rem;
}

.bs-tool-matcher .bs-tm-tools {
	display: flex;
	flex-direction: column;
	border: 1px solid var(--tm-line);
	border-radius: 0.6rem;
}

.bs-tool-matcher .bs-tm-tool {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 1rem;
	padding: 0.75rem 1rem;
}

.bs-tool-matcher .bs-tm-tool + .bs-tm-tool {
	border-top: 1px solid var(--tm-line);
}

.bs-tool-matcher .bs-tm-tool-name {
	font-weight: 600;
	color: var(--tm-ink);
}

.bs-tool-matcher a.bs-tm-tool-name {
	color: var(--tm-accent);
}

.bs-tool-matcher .bs-tm-price {
	white-space: nowrap;
}

.bs-tool-matcher .bs-tm-best {
	display: flex;
	flex-direction: column;
	gap: 0.35rem;
	padding: 1rem;
	border-radius: 0.6rem;
	background: var(--tm-accent-tint);
}

.bs-tool-matcher .bs-tm-best-label,
.bs-tool-matcher .bs-tm-others-label {
	margin: 0;
	font-size: 0.8rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var(--tm-muted);
}

.bs-tool-matcher .bs-tm-best-offer {
	margin: 0;
	font-size: 1.15rem;
	font-weight: 700;
	color: var(--tm-ink);
}

.bs-tool-matcher .bs-tm-others {
	display: flex;
	flex-direction: column;
	gap: 0.25rem;
}

.bs-tool-matcher .bs-tm-other {
	margin: 0;
}

.bs-tool-matcher .bs-tm-cta {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 0.6rem;
	padding-top: 0.75rem;
	border-top: 1px solid var(--tm-line);
}

.bs-tool-matcher .bs-tm-share:empty {
	display: none;
}

.bs-tool-matcher .bs-tm-noscript {
	margin: 0;
}

@media (max-width: 480px) {
	.bs-tool-matcher .bs-tm-card {
		padding: 1.1rem;
	}

	.bs-tool-matcher .bs-tm-tool {
		flex-direction: column;
		gap: 0.2rem;
	}

	#bs-tool-matcher#bs-tool-matcher .bs-tm-actions .bs-tm-btn {
		width: 100%;
	}
}