/* PratiqueTech Studio — "É Seguro?"
 *
 * .pts-tool, .pts-tool-head, .pts-input, .pts-btn-primary etc. já vêm de
 * tools.css (dependência declarada em wp_register_style). Aqui ficam a
 * moldura do resultado estruturado e as três cores semânticas, que reusam
 * as mesmas variáveis --pt-safe/--pt-warning/--pt-danger do tema (definidas
 * em style.css, com valores diferentes em light/dark) — para o resultado da
 * ferramenta bater com o scanner de demonstração do hero da home.
 */

.pts-seguranca-resultado {
	margin-top: 14px;
	padding: 14px 16px;
	border-radius: 10px;
	background: rgba(127, 127, 127, 0.06);
	box-shadow: inset 0 0 0 1px rgba(127, 127, 127, 0.14);
	font-size: 13.5px;
	line-height: 1.5;
}

.pts-seguranca-resultado.is-safe {
	background: color-mix(in srgb, var(--pt-safe) 10%, transparent);
	box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--pt-safe) 35%, transparent);
}
.pts-seguranca-resultado.is-warning {
	background: color-mix(in srgb, var(--pt-warning) 10%, transparent);
	box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--pt-warning) 35%, transparent);
}
.pts-seguranca-resultado.is-danger {
	background: color-mix(in srgb, var(--pt-danger) 10%, transparent);
	box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--pt-danger) 35%, transparent);
}

.pts-seguranca-carregando {
	margin: 0;
	color: var(--pt-muted);
	font-family: var(--pt-font-mono);
}

.pts-seguranca-erro {
	margin: 0;
	color: var(--pt-warning);
}

.pts-seguranca-resultado-head {
	display: flex;
	align-items: center;
	gap: 10px;
	flex-wrap: wrap;
	margin-bottom: 10px;
}

.pts-seguranca-badge {
	display: inline-flex;
	align-items: center;
	padding: 3px 10px;
	border-radius: 999px;
	font-family: var(--pt-font-mono);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.03em;
}
.pts-seguranca-badge.is-safe    { background: color-mix(in srgb, var(--pt-safe) 20%, transparent); color: var(--pt-safe); }
.pts-seguranca-badge.is-warning { background: color-mix(in srgb, var(--pt-warning) 20%, transparent); color: var(--pt-warning); }
.pts-seguranca-badge.is-danger  { background: color-mix(in srgb, var(--pt-danger) 20%, transparent); color: var(--pt-danger); }

.pts-seguranca-score {
	font-family: var(--pt-font-mono);
	font-size: 12px;
	color: var(--pt-muted);
}

.pts-seguranca-sinais {
	list-style: none;
	margin: 0 0 10px;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.pts-seguranca-sinal {
	display: flex;
	align-items: flex-start;
	gap: 8px;
}
.pts-seguranca-sinal-dot {
	width: 7px;
	height: 7px;
	border-radius: 50%;
	margin-top: 6px;
	flex: none;
	background: var(--pt-muted);
}
.pts-seguranca-sinal.is-safe .pts-seguranca-sinal-dot    { background: var(--pt-safe); }
.pts-seguranca-sinal.is-warning .pts-seguranca-sinal-dot { background: var(--pt-warning); }
.pts-seguranca-sinal.is-danger .pts-seguranca-sinal-dot  { background: var(--pt-danger); }
.pts-seguranca-sinal.is-neutro .pts-seguranca-sinal-dot  { background: var(--pt-muted); }

.pts-seguranca-sinal strong {
	font-weight: 600;
}

.pts-seguranca-observacao {
	margin: 8px 0 0;
	padding-top: 8px;
	border-top: 1px dashed rgba(127, 127, 127, 0.25);
	color: var(--pt-muted);
	font-size: 12.5px;
}