/**
 * Young Finance – Zertifikats-Modul.
 * Frontend-Box (templates/certificate-box.php) und ein paar kleine
 * Ergänzungen für den Admin-Bereich (Zertifikatsvorlage).
 * Farbton passend zum generierten PDF: dezentes Dunkelblau/Anthrazit, viel Weissraum.
 */

.yf-certificate-box {
	margin: 1.5em 0;
	font-size: 15px;
}

.yf-certificate-box__row {
	display: flex;
	align-items: center;
	gap: 1.25em;
	padding: 1.5em 1.75em;
	border: 1px solid #dde1e8;
	border-radius: 6px;
	background: #f7f8fa;
}

.yf-certificate-box__row--ready {
	border-left: 4px solid #1e293f;
}

.yf-certificate-box__icon {
	flex: 0 0 auto;
	font-size: 28px;
	line-height: 1;
}

.yf-certificate-box__details {
	flex: 1 1 auto;
	min-width: 0;
}

.yf-certificate-box__title {
	margin: 0 0 0.25em;
	font-weight: 600;
	color: #1e293f;
}

.yf-certificate-box__meta {
	margin: 0;
	color: #60666f;
	font-size: 0.9em;
}

/* Gleicher Button-Stil wie die Elementor-Buttons im Rest der Seite, etwas
   kleiner als das Vorbild (dort 20px/16px 24px), da hier Teil einer
   kompakten Statuszeile. */
.yf-certificate-box__download {
	flex: 0 0 auto;
	display: inline-block;
	padding: 12px 20px;
	background: #df6e1f;
	color: var(--e-global-color-zakracolor3, #fff);
	text-decoration: none;
	border-radius: 8px;
	font-family: 'Jost', sans-serif;
	font-size: 16px;
	font-weight: 600;
	white-space: nowrap;
	transition: background-color 0.3s;
}

.yf-certificate-box__download:hover,
.yf-certificate-box__download:focus {
	background: #bd5e1a;
	color: var(--e-global-color-zakracolor3, #fff);
}

.yf-certificate-box__pending {
	margin: 0;
	padding: 1em 1.25em;
	border: 1px dashed #c7cbd4;
	border-radius: 6px;
	color: #60666f;
	background: #fbfbfc;
}

/* Admin: Einstellungsseite "Zertifikatsvorlage" */

.yf-cert-admin-positions {
	margin-top: 0.5em;
}

.yf-cert-admin-positions td,
.yf-cert-admin-positions th {
	padding: 8px 10px;
	vertical-align: middle;
}

.yf-cert-admin-positions input[type="number"] {
	width: 6em;
}