/**
 * Public Styles
 *
 * @package Impressoras3D
 * @since 1.0.0
 */

/* Colors */
:root {
	--compat-full: #00cc66;
	--compat-partial: #ff9900;
	--compat-none: #cc0000;
	--primary: #0066cc;
	--background: #f8f9fa;
}

/* Filtro de busca - já tem estilos inline no template */

/* Badge de compatibilidade */
.compat-badge {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	padding: 5px 12px;
	border-radius: 20px;
	font-size: 13px;
	font-weight: 600;
	margin: 10px 0;
}

.compat-badge.status-full {
	background: #e8f5e9;
	color: #2e7d32;
}

.compat-badge.status-partial {
	background: #fff3e0;
	color: #e65100;
}

.compat-badge.status-none {
	background: #ffebee;
	color: #c62828;
}

/* Badge single product */
.compat-badge-single {
	margin: 20px 0;
	padding: 15px;
	background: var(--background);
	border-radius: 8px;
}

.compat-badge-single h4 {
	margin: 0 0 10px;
	font-size: 16px;
}

.compat-badge-single .compat-list {
	list-style: none;
	padding: 0;
	margin: 10px 0;
}

.compat-badge-single .compat-list li {
	padding: 5px 0;
	font-size: 14px;
}

.compat-badge-single .view-all {
	display: inline-block;
	margin-top: 10px;
	color: var(--primary);
	text-decoration: none;
}

.compat-badge-single .view-all:hover {
	text-decoration: underline;
}

/* Aviso de filtro ativo */
.impressora3d-filter-notice {
	background: #e3f2fd;
	border-left: 4px solid var(--primary);
	padding: 15px 20px;
	margin: 20px 0;
}

.impressora3d-filter-notice p {
	margin: 0;
}

.impressora3d-filter-notice .clear-filter {
	margin-left: 15px;
	color: var(--primary);
	text-decoration: none;
	font-weight: 600;
}

.impressora3d-filter-notice .clear-filter:hover {
	text-decoration: underline;
}

/* Tooltip */
.compat-tooltip {
	position: absolute;
	background: white;
	border: 1px solid #ddd;
	box-shadow: 0 2px 12px rgba(0,0,0,0.15);
	padding: 15px;
	border-radius: 4px;
	z-index: 999;
	min-width: 250px;
	margin-top: 10px;
}

.compat-tooltip h4 {
	margin: 0 0 10px;
	font-size: 14px;
}

.compat-tooltip ul {
	list-style: none;
	padding: 0;
	margin: 0;
}

.compat-tooltip li {
	padding: 4px 0;
	font-size: 13px;
}

.compat-tooltip a {
	display: inline-block;
	margin-top: 10px;
	color: var(--primary);
	font-size: 13px;
}

/* Responsivo */
@media (max-width: 768px) {
	.compat-badge {
		font-size: 12px;
		padding: 4px 10px;
	}

	.compat-tooltip {
		position: fixed !important;
		top: 50% !important;
		left: 50% !important;
		transform: translate(-50%, -50%) !important;
		max-width: 90vw;
		z-index: 99999;
	}

	.compat-tooltip::before {
		content: '';
		position: fixed;
		top: 0;
		left: 0;
		width: 100vw;
		height: 100vh;
		background: rgba(0,0,0,0.5);
		z-index: -1;
	}
}