/**
 * Libraria - Certificados — validador de certificados (shortcode `[libraria_validador]`).
 *
 * = O Que =
 * A caixa do validador (selo, título, texto, campo e botão) e os cartões do resultado: válido (verde, com os dados em
 * grade e os botões) e não encontrado (vermelho). No celular, o campo e o botão ficam um embaixo do outro. Na
 * impressão, só o validador aparece.
 *
 * = Como =
 * Tudo com escopo em `.lcert-validador` (e `.lcert-certificado` para a âncora do certificado do MasterStudy). Botões no
 * padrão do site: roxo #6648F0, cantos de 4 px, letras maiúsculas. Carregado só quando o shortcode é desenhado.
 *
 * @package Libraria_Certificados
 * @since 1.2.0
 */

.lcert-validador {
	--lcert-acento: #6648f0;
	--lcert-texto: #1d1b3a;
	--lcert-suave: #4a4a68;
	--lcert-rotulo: #6b6a80;
	--lcert-linha: #e6e4f0;
	--lcert-ok: #0f6e56;
	--lcert-ok-linha: #b9e4cc;
	--lcert-ok-fundo: #f3fbf7;
	--lcert-erro: #a32d2d;
	--lcert-erro-linha: #f0c9c9;
	--lcert-erro-fundo: #fdf5f5;

	max-width: 760px;
	color: var(--lcert-texto);
}

.lcert-validador *,
.lcert-validador *::before,
.lcert-validador *::after {
	box-sizing: border-box;
}

.lcert-validador svg {
	flex: 0 0 auto;
	width: 18px;
	height: 18px;
}

.lcert-validador__caixa {
	padding: 28px;
	border: 1px solid var(--lcert-linha);
	border-radius: 8px;
	background: #fff;
}

.lcert-validador__selo {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 5px 10px;
	border-radius: 4px;
	background: #efecfe;
	color: var(--lcert-acento);
	font-size: 13px;
	font-weight: 600;
	line-height: 1.3;
}

.lcert-validador__selo svg {
	width: 16px;
	height: 16px;
}

.lcert-validador .lcert-validador__titulo {
	margin: 14px 0 6px;
	color: var(--lcert-texto);
	font-size: 26px;
	line-height: 1.25;
}

.lcert-validador__texto {
	color: var(--lcert-suave);
	font-size: 15px;
	line-height: 1.6;
}

.lcert-validador__texto p {
	margin: 0 0 10px;
}

.lcert-validador__texto p:last-child {
	margin-bottom: 0;
}

/* Busca. */
.lcert-validador__busca {
	margin: 20px 0 0;
}

.lcert-validador__rotulo {
	display: block;
	margin: 0 0 6px;
	color: var(--lcert-rotulo);
	font-size: 13px;
	font-weight: 600;
}

.lcert-validador__linha {
	display: flex;
	gap: 8px;
}

.lcert-validador input.lcert-validador__campo,
.lcert-validador input[data-lcert-codigo] {
	flex: 1 1 auto;
	min-width: 0;
	height: 48px;
	margin: 0;
	padding: 0 14px;
	border: 1px solid #cfcae8;
	border-radius: 4px;
	background: #fff;
	box-shadow: none;
	color: var(--lcert-texto);
	font-size: 17px;
	letter-spacing: 1px;
}

.lcert-validador input[data-lcert-codigo]:focus {
	border-color: var(--lcert-acento);
	outline: 2px solid rgba(102, 72, 240, 0.2);
	outline-offset: 0;
}

.lcert-validador .lcert-validador__botao {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	height: 48px;
	margin: 0;
	padding: 0 22px;
	border: 0;
	border-radius: 4px;
	background: var(--lcert-acento);
	color: #fff;
	font-size: 14px;
	font-weight: 700;
	letter-spacing: 0.3px;
	line-height: 1;
	text-decoration: none;
	text-transform: uppercase;
	cursor: pointer;
}

.lcert-validador .lcert-validador__botao:hover,
.lcert-validador .lcert-validador__botao:focus {
	background: #5236d9;
	color: #fff;
	text-decoration: none;
}

.lcert-validador .lcert-validador__botao--menor {
	height: 40px;
	padding: 0 16px;
	font-size: 13px;
}

.lcert-validador .lcert-validador__contorno {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	height: 40px;
	margin: 0;
	padding: 0 14px;
	border: 1px solid var(--lcert-acento);
	border-radius: 4px;
	background: #fff;
	color: var(--lcert-acento);
	font-size: 13px;
	font-weight: 600;
	line-height: 1;
	cursor: pointer;
}

.lcert-validador .lcert-validador__contorno:hover,
.lcert-validador .lcert-validador__contorno:focus {
	background: #f6f4ff;
	color: var(--lcert-acento);
}

/* Resultado. */
.lcert-resultado {
	margin: 20px 0 0;
	padding: 18px 20px;
	border: 1px solid;
	border-radius: 8px;
}

.lcert-validador p.lcert-resultado__titulo {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 0;
	font-size: 16px;
	font-weight: 700;
	line-height: 1.4;
}

.lcert-resultado--valido {
	border-color: var(--lcert-ok-linha);
	border-left: 5px solid #1d9e75;
	background: var(--lcert-ok-fundo);
}

.lcert-resultado--valido .lcert-resultado__titulo {
	color: var(--lcert-ok);
}

.lcert-resultado--valido .lcert-resultado__titulo svg {
	width: 22px;
	height: 22px;
}

.lcert-validador .lcert-resultado__dados {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
	gap: 14px 22px;
	margin: 16px 0 18px;
}

.lcert-validador .lcert-resultado__dados dt {
	margin: 0;
	color: var(--lcert-rotulo);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.5px;
	text-transform: uppercase;
}

.lcert-validador .lcert-resultado__dados dd {
	margin: 3px 0 0;
	color: var(--lcert-texto);
	font-size: 15px;
	line-height: 1.45;
	overflow-wrap: anywhere;
}

.lcert-validador .lcert-resultado__codigo {
	font-variant-numeric: tabular-nums;
	letter-spacing: 0.5px;
}

.lcert-resultado__acoes {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.lcert-resultado--nao {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	border-color: var(--lcert-erro-linha);
	background: var(--lcert-erro-fundo);
}

.lcert-validador .lcert-resultado__icone {
	width: 22px;
	height: 22px;
	margin-top: 1px;
	color: var(--lcert-erro);
}

.lcert-resultado--nao .lcert-resultado__titulo {
	color: #791f1f;
}

.lcert-validador p.lcert-resultado__ajuda {
	margin: 4px 0 0;
	color: var(--lcert-suave);
	font-size: 14px;
	line-height: 1.5;
}

.lcert-validador .lcert-resultado__ajuda a {
	color: var(--lcert-acento);
	font-weight: 600;
}

/* Certificado do MasterStudy (vindo do QR), logo abaixo. */
.lcert-certificado {
	scroll-margin-top: 90px;
	margin-top: 24px;
}

/* Sem o "Explorar curso" e sem a foto do aluno (1.2.1): o PHP já tira; aqui é a reserva se a marcação do MasterStudy
   mudar. */
.lcert-certificado .masterstudy-page-certificate__course-action,
.lcert-certificado .masterstudy-page-certificate__user-avatar {
	display: none;
}

/* Celular: campo e botão um embaixo do outro, botões do resultado na largura toda. */
@media (max-width: 600px) {
	.lcert-validador__caixa {
		padding: 20px 16px;
	}

	.lcert-validador .lcert-validador__titulo {
		font-size: 22px;
	}

	.lcert-validador__linha {
		flex-direction: column;
	}

	.lcert-validador .lcert-validador__botao,
	.lcert-validador .lcert-validador__contorno {
		justify-content: center;
		width: 100%;
	}

	.lcert-resultado {
		padding: 16px;
	}
}

/* Impressão: só o validador (o resto da página some), sem o campo e os botões. */
@media print {
	body * {
		visibility: hidden;
	}

	.lcert-validador,
	.lcert-validador * {
		visibility: visible;
	}

	.lcert-validador {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		max-width: none;
	}

	.lcert-validador__busca,
	.lcert-resultado__acoes {
		display: none;
	}

	.lcert-validador__caixa {
		border: 0;
	}
}