/**
 * DH - Lottery Countdown for Products – Stylesheet
 * File: assets/clc-style.css
 */

/* ── Base pill ────────────────────────────────────────────────────── */
.clc-wrapper {
	display: block;
	width: 100%;
	text-align: center;
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

.clc-label {
	display: inline-block;
	width: 95%;
	padding: 2px 2px;
	border-radius: 50px;             /* pill shape */
	font-size: 0.85rem;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: #ffffff;
	cursor: default;
	user-select: none;
	box-sizing: border-box;

	/* Smooth background transition when JS switches state */
	transition: background-color 0.4s ease;
}

/* ── State: default (> 24 h) – blue ──────────────────────────────── */
.clc-state--default .clc-label {
	background-color: #12334c;
}

/* ── State: live (≤ 24 h, > 0) – green ──────────────────────────── */
.clc-state--live .clc-label {
	background-color: #138dce;
}

/* ── State: tomorrow ──────────────────────────────────────────────── */
.clc-state--tomorrow .clc-label {
    background-color: #12334c;
}

/* ── State: expired ──────────────────────────────────────────────── */
.clc-state--expired .clc-label {
	background-color: #444444;
}

/* ── No-JS graceful degradation ──────────────────────────────────── */
.no-js .clc-wrapper .clc-label {
	opacity: 1;
}



@media only screen and (max-width: 720px) {
	.clc-label {
		font-size: 0.7rem;
	}
}