/* Стилі для сторінки з QR-кодом */
body {
	background: linear-gradient(135deg, var(--gradient-start), var(--gradient-end));
	height: 100vh;
	margin: 0 auto;
}

.container {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
	width: 100%;
}

.wrapper {
	display: inline-block;
	/* Використовуємо ваш glass-bg */
	background: var(--glass-bg);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	max-width: 750px;
	padding: var(--spacing-md);
	border-radius: var(--border-radius-md);
	box-shadow: var(--shadow-md);
}

p {
	font-size: var(--font-size-lg);
}

.title {
	margin-bottom: var(--spacing-sm);
	font-weight: bold;
	color: var(--text-color);
	/* Використовуємо ваш розмір для H2 */
	font-size: var(--heading-h2);
}

.subtitle {
	font-weight: 700;
}

img {
	margin: var(--spacing-md) 0;
	max-width: 100%;
	height: auto;
	border-radius: var(--border-radius-md);
	border: 2px solid var(--border-color);
}

/* === НОВІ СТИЛІ ДЛЯ ТАЙМЕРА (з використанням ваших змінних) === */

.timer-container {
	position: fixed;
	bottom: var(--spacing-lg);
	/* Використовуємо великий відступ */
	left: 50%;
	transform: translateX(-50%);
	padding: var(--spacing-sm) var(--spacing-md);
	z-index: 1000;
	white-space: nowrap;
}

.timer-text {
	margin: 0;
	font-family: var(--font-secondary);
	/* Світлий текст на темному фоні */
	font-size: var(--font-size-lg);
	/* Середній розмір для "Залишилось" */
	font-weight: 500;
}

.timer-value {
	font-size: var(--heading-h1);
	font-weight: 900;
	/* Використовуємо secondary-color для вінтажного золотистого акценту */
	display: inline-block;

	padding: var(--spacing-sm) var(--spacing-md);
	border-radius: var(--border-radius-md);
	box-shadow: var(--shadow-md);
	background-color: var(--secondary-color);
	white-space: nowrap;
	margin: 0 5px;
	/* Додаткова тінь тексту для контрасту */
	text-shadow: 0 0 5px rgba(132, 101, 43, 0.5);
}