/* Public certificate verification page (QR code scan): /instructions/cert?ibu=…&checksum=… */

.rd-cert-verify {
	min-height: 100vh;
	margin: 0;
	padding: var(--rd-spacing-x-big) var(--rd-spacing-md);
	background: var(--rd-list-default-dark);
	color: var(--rd-font-dark);
	font-family: "Open Sans", sans-serif;
	line-height: 1.5;
}

.rd-cert-verify-card {
	max-width: 720px;
	margin: 0 auto;
	padding: var(--rd-spacing-xxx-big);
	background: var(--rd-bg-primary);
	border: 1px solid var(--rd-border-gray);
	border-radius: 16px;
}

.rd-cert-verify-status {
	display: flex;
	align-items: center;
	gap: var(--rd-spacing-md);
	padding: var(--rd-spacing-md) var(--rd-spacing-big);
	border-radius: 12px;
	background: var(--rd-success-inactive);
	color: var(--rd-success-pressed);
}

.rd-cert-verify-status img {
	width: 40px;
	height: 40px;
	flex: none;
}

.rd-cert-verify-status h1 {
	margin: 0;
	font-size: 1.25rem;
}

.rd-cert-verify-status p {
	margin: 0;
	font-size: 0.9rem;
}

.rd-cert-verify-status.rd-cert-verify-invalid {
	background: var(--rd-error-inactive);
	color: var(--rd-red-900);
}

.rd-cert-verify-lead {
	margin: var(--rd-spacing-x-big) 0 var(--rd-spacing-md);
}

.rd-cert-verify-facts {
	display: grid;
	grid-template-columns: minmax(140px, 1fr) 2fr;
	gap: var(--rd-spacing-x-sm) var(--rd-spacing-md);
	margin: 0;
	padding: var(--rd-spacing-md) 0;
	border-top: 1px solid var(--rd-border-gray);
	border-bottom: 1px solid var(--rd-border-gray);
}

.rd-cert-verify-facts dt {
	color: var(--rd-gray-600);
	font-size: 0.9rem;
}

.rd-cert-verify-facts dd {
	margin: 0;
	overflow-wrap: anywhere;
}

.rd-cert-verify-generated {
	margin-top: var(--rd-spacing-md);
	padding: var(--rd-spacing-sm) var(--rd-spacing-md);
	border-radius: 8px;
	background: var(--rd-gray-100);
	font-size: 0.9rem;
}

.rd-cert-verify-preview {
	margin-top: var(--rd-spacing-x-big);
}

.rd-cert-verify-preview img {
	display: block;
	width: 100%;
	border: 1px solid var(--rd-border-gray);
	border-radius: 8px;
}

.rd-cert-verify-footer {
	margin-top: var(--rd-spacing-x-big);
	color: var(--rd-gray-600);
	font-size: 0.8rem;
}

@media (max-width: 480px) {
	.rd-cert-verify-card {
		padding: var(--rd-spacing-big);
	}

	.rd-cert-verify-facts {
		grid-template-columns: 1fr;
		gap: var(--rd-spacing-xx-sm);
	}

	.rd-cert-verify-facts dd {
		margin-bottom: var(--rd-spacing-x-sm);
	}
}