/* Check-in pages under /checkin: the participant's result page after scanning a Termin QR
   code, and the full-screen QR page for beamer or tablet.
   Figma: Präsenzkurse → Anwesenheit 5 – QR-Vollbild (7964:24182). */

.rd-ci {
	margin: 0;
	min-height: 100vh;
	background: var(--rd-bg-primary);
	color: var(--rd-font-dark);
	font-family: "Open Sans", sans-serif;
	line-height: 1.5;
}

/* --- participant screens (mobile first: the participant reads this on the phone) ---------
   Figma: Teilnehmer 1–F (7997:38002 …): grey page, white cards 8px radius, 16px gaps. */

.rd-ci-result {
	padding: var(--rd-spacing-md);
	background: var(--rd-list-default-dark);
}

.rd-ci-page {
	display: grid;
	gap: var(--rd-spacing-md);
	max-width: 480px;
	margin: 0 auto;
}

.rd-ci-card {
	padding: var(--rd-spacing-md);
	background: var(--rd-bg-primary);
	border-radius: var(--rd-borderradius-border-md);
}

.rd-ci-kicker {
	font-size: var(--rd-fontsize-2);
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--rd-gray-600);
}

.rd-ci-termin h2 {
	margin: var(--rd-spacing-xx-sm) 0;
	font-size: var(--rd-fontsize-4);
	line-height: 1.4;
}

.rd-ci-meta,
.rd-ci-note {
	color: var(--rd-gray-600);
	font-size: var(--rd-fontsize-2);
}

.rd-ci-outcome {
	text-align: center;
	padding: var(--rd-spacing-x-big) var(--rd-spacing-md);
}

.rd-ci-outcome h1 {
	margin: var(--rd-spacing-md) 0 var(--rd-spacing-x-sm);
	font-size: var(--rd-fontsize-6);
	line-height: 1.3;
}

.rd-ci-outcome p {
	margin: 0;
	color: var(--rd-gray-700);
}

/* status circle: 72px, tinted background, glyph drawn by CSS (Figma check-circle / alert-circle) */
.rd-ci-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 72px;
	height: 72px;
	border-radius: var(--rd-borderradius-pill);
	font-size: 34px;
	font-weight: 700;
	line-height: 1;
}

.rd-ci-outcome-ok .rd-ci-icon {
	background: var(--rd-green-50);
	color: var(--rd-success-pressed);
}

.rd-ci-outcome-ok .rd-ci-icon::before,
.rd-ci-outcome-info .rd-ci-icon::before,
.rd-ci-outcome-ask .rd-ci-icon::before {
	content: "✓";
}

.rd-ci-outcome-info .rd-ci-icon,
.rd-ci-outcome-ask .rd-ci-icon {
	background: var(--rd-input-disabled);
	color: var(--rd-secondary-pressed);
}

.rd-ci-outcome-warn .rd-ci-icon {
	background: var(--rd-warning-50);
	color: var(--rd-warning-pressed);
}

.rd-ci-outcome-error .rd-ci-icon {
	background: var(--rd-error-inactive);
	color: var(--rd-error-pressed);
}

.rd-ci-outcome-warn .rd-ci-icon::before,
.rd-ci-outcome-error .rd-ci-icon::before {
	content: "!";
}

.rd-ci-confirm {
	margin: var(--rd-spacing-md) 0 var(--rd-spacing-sm);
}

.rd-ci-plan-link {
	display: block;
	text-align: center;
}

/* --- full-screen page -------------------------------------------------------------------- */

.rd-ci-fullscreen {
	display: grid;
	grid-template-rows: auto 1fr;
}

.rd-ci-topbar {
	display: flex;
	align-items: center;
	gap: var(--rd-spacing-md);
	padding: var(--rd-spacing-md) var(--rd-spacing-x-big);
	border-bottom: 1px solid var(--rd-border-gray);
}

.rd-ci-topbar-title {
	flex: 1;
	color: var(--rd-gray-600);
}

.rd-ci-topbar-title strong {
	color: var(--rd-font-dark);
	margin-right: var(--rd-spacing-x-sm);
}

.rd-ci-switch {
	color: var(--rd-gray-600);
	font-size: var(--rd-fontsize-3);
}

.rd-ci-close {
	width: 40px;
	height: 40px;
	border: 0;
	background: none;
	font-size: 28px;
	line-height: 1;
	color: var(--rd-font-dark);
	cursor: pointer;
}

.rd-ci-display {
	display: grid;
	grid-template-columns: minmax(280px, 400px) minmax(320px, 620px);
	justify-content: center;
	align-items: center;
	gap: var(--rd-spacing-xxx-big);
	padding: var(--rd-spacing-xxx-big) var(--rd-spacing-x-big);
}

.rd-ci-qr {
	border: 2px solid var(--rd-font-dark);
	border-radius: 16px;
	padding: var(--rd-spacing-md);
	background: var(--rd-bg-primary);
}

.rd-ci-qr {
	position: relative;
}

.rd-ci-qr svg {
	display: block;
	width: 100%;
	height: auto;
}

/* outside the check-in window: code greyed out, lock in the middle (Figma 4c/4d) */
.rd-ci-qr-locked svg {
	opacity: 0.25;
}

.rd-ci-lock {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 56px;
	height: 56px;
	transform: translate(-50%, -50%);
	background: var(--rd-font-dark);
	mask: url("/src/img/2024/svg/icons/rd-lock-closed.svg") no-repeat 50% / contain;
	-webkit-mask: url("/src/img/2024/svg/icons/rd-lock-closed.svg") no-repeat 50% / contain;
}

.rd-ci-window {
	margin-top: var(--rd-spacing-md);
	text-align: center;
	font-weight: 600;
}

.rd-ci-window-not_open {
	color: var(--rd-warning-pressed);
}

.rd-ci-window-closed {
	color: var(--rd-gray-600);
}

.rd-ci-window-open {
	color: var(--rd-success-pressed);
}

.rd-ci-link {
	margin-top: var(--rd-spacing-md);
	text-align: center;
	color: var(--rd-gray-600);
	font-size: var(--rd-fontsize-3);
	word-break: break-all;
}

.rd-ci-welcome {
	color: var(--rd-primary-active);
	font-weight: 600;
}

.rd-ci-steps-col h1 {
	margin: var(--rd-spacing-x-sm) 0 var(--rd-spacing-x-big);
	font-size: 2.5rem;
	line-height: 1.2;
}

.rd-ci-steps {
	list-style: none;
	margin: 0;
	padding: 0;
	font-size: var(--rd-fontsize-5);
}

.rd-ci-steps li {
	display: flex;
	align-items: center;
	gap: var(--rd-spacing-md);
	margin-bottom: var(--rd-spacing-md);
}

.rd-ci-step-no {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	flex: none;
	border-radius: var(--rd-borderradius-pill);
	background: var(--rd-primary-inactive);
	color: var(--rd-primary-active);
	font-weight: 600;
}

.rd-ci-hint {
	margin-top: var(--rd-spacing-x-big);
	padding: var(--rd-spacing-md) var(--rd-spacing-big);
	background: var(--rd-list-default-dark);
	border-radius: var(--rd-borderradius-border-md);
	color: var(--rd-gray-600);
}

@media (max-width: 800px) {
	.rd-ci-display {
		grid-template-columns: 1fr;
		padding: var(--rd-spacing-x-big) var(--rd-spacing-md);
	}

	.rd-ci-steps-col h1 {
		font-size: 1.75rem;
	}
}