/**
 * Front-desk check-in screen styles.
 *
 * Deliberately high-contrast and oversized: this page is used by
 * volunteers with sight limitations working under venue lighting.
 * Kept as its own stylesheet, isolated from smcr-styles.css, since
 * it's only ever loaded on the dedicated check-in page.
 *
 * Sizing (the oversized font-sizes/spacing this page depends on for
 * readability) stays fixed/hardcoded, same as before. Neutral colors
 * (borders, chrome, muted text) now resolve to the active theme's
 * color management via CSS custom properties, each with a fallback
 * matching this file's pre-3.14.0 hardcoded value. The "TOTAL DUE"
 * green, camera-error/already/not-found reds, and the mandatory
 * CHECKED IN affordance stay literal — these are status colors, not
 * brand colors, and shouldn't shift with the theme's palette.
 *
 * @package Scale_Model_Contest_Registration
 * @since 3.15.5 Edited the colors for the CLOSE button. Allowed it
 *	             to take colors from Global Color Variables.
 * @since 3.5.0
 * @since 3.9.0 Added .smcr-checkin-window for the check-in hours banner.
 * @since 3.14.0 Removed the hardcoded font-family override so this
 *               page inherits the active theme's typography instead.
 *               Neutral colors (not status colors) converted to
 *               consume the active theme's color management (tested
 *               against GeneratePress Global Colors) via var(), each
 *               with a hardcoded fallback. Sizing unchanged.
 */

.smcr-checkin-container {
	max-width: 700px;
	margin: 0 auto;
	font-size: 22px;
}

.smcr-checkin-window {
	text-align: center;
	font-weight: bold;
	font-size: 18px;
	color: var(--contrast-2, #555555);
	margin: 0 0 12px;
}

.smcr-checkin-camera-wrap {
	position: relative;
	text-align: center;
}

.smcr-checkin-video {
	width: 100%;
	max-width: 500px;
	border: 4px solid var(--contrast, #333333);
	border-radius: 12px;
}

.smcr-checkin-standby-text {
	font-weight: bold;
	font-size: 26px;
	margin-top: 16px;
}

.smcr-checkin-container[data-state="result"] .smcr-checkin-camera-wrap,
.smcr-checkin-container[data-state="already"] .smcr-checkin-camera-wrap,
.smcr-checkin-container[data-state="notfound"] .smcr-checkin-camera-wrap {
	display: none;
}

.smcr-checkin-camera-error {
	text-align: center;
	font-weight: bold;
	font-size: 24px;
	color: #b30000;
	margin-top: 16px;
}

.smcr-checkin-row {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	padding: 10px 0;
	border-bottom: 1px solid var(--contrast-3, #dddddd);
}

.smcr-checkin-label {
	font-weight: bold;
	font-size: 24px;
}

.smcr-checkin-value {
	font-size: 24px;
	text-align: right;
}

.smcr-checkin-total-row {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 20px;
	margin: 30px 0;
}

.smcr-checkin-total-label {
	font-weight: bold;
	font-size: 30px;
	color: #1a7a1a;
}

.smcr-checkin-total-box {
	font-weight: bold;
	font-size: 36px;
	color: #0d4d0d;
	background-color: #d9f2d9;
	border-radius: 16px;
	padding: 12px 28px;
}

.smcr-checkin-checkbox-row {
	text-align: center;
	margin: 30px 0;
}

.smcr-checkin-checkbox-label {
	font-weight: bold;
	font-size: 30px;
	display: inline-flex;
	align-items: center;
	gap: 14px;
}

.smcr-checkin-checkbox {
	width: 34px;
	height: 34px;
}

.smcr-checkin-close-row {
	text-align: center;
	margin: 24px 0;
}

.smcr-checkin-close-btn {
	font-weight: bold;
	font-size: 26px;
	padding: 14px 48px;
	border-radius: 10px;
	background-color: var(--accent);
	cursor: pointer;
}

/* Touch devices: Instant visual feedback while being pressed */
.smcr-checkin-close-btn:active {
	background-color: var(--accent-2);
}

/* Desktop devices with a mouse: Classic hover effect */
@media (hover: hover) {
	.smcr-checkin-close-btn:hover {
		background-color: var(--accent-2);
	}
}

.smcr-checkin-already-card,
.smcr-checkin-notfound-card {
	text-align: center;
	margin-top: 20px;
}

.smcr-checkin-already-text,
.smcr-checkin-notfound-text {
	font-weight: bold;
	font-size: 28px;
	color: #7a0d0d;
	background-color: #f9d9d9;
	border-radius: 16px;
	padding: 30px;
}