/* =====================================================
   countdown-pill.css
   The single source of truth for the cream-orange
   countdown pill used in: header, mobile sticky bar,
   thank-you panel.
   ===================================================== */

.tnt-pill {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	background: #FFF1E7;
	border: 1px solid #E87D2F;
	border-radius: 999px;
	padding: 8px 16px;
	color: #D46D27;
	font-family: "Outfit", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
	font-size: 14px;
	font-weight: 500;
	line-height: 1.2;
	white-space: nowrap;
	max-width: 100%;
}

.tnt-pill--sm {
	padding: 6px 12px;
	font-size: 12px;
	gap: 6px;
}

.tnt-pill__emoji {
	font-size: 1em;
	line-height: 1;
}

.tnt-pill__label {
	color: #D46D27;
	font-weight: 500;
}

.tnt-pill__countdown {
	display: inline-flex;
	align-items: baseline;
	gap: 6px;
	color: #D46D27;
	font-weight: 600;
	font-variant-numeric: tabular-nums;
}

.tnt-pill__seg {
	display: inline-flex;
	align-items: baseline;
}

.tnt-pill__num {
	font-variant-numeric: tabular-nums;
}

.tnt-pill__unit {
	margin-left: 1px;
	font-weight: 500;
	opacity: 0.85;
}

/* Expired state: hide the countdown segments + label, show the "open now"
   text in green. JS toggles .is-expired on the pill. */
.tnt-pill__expired-text {
	display: none;
	color: #3F6F46;
	font-weight: 600;
}

.tnt-pill.is-expired {
	border-color: #3F6F46;
	background: #E1EFE3;
	color: #3F6F46;
}

.tnt-pill.is-expired .tnt-pill__emoji,
.tnt-pill.is-expired .tnt-pill__label,
.tnt-pill.is-expired .tnt-pill__countdown {
	display: none;
}

.tnt-pill.is-expired .tnt-pill__expired-text {
	display: inline;
}

/* Mobile compression: smaller font + tighter padding so the pill never
   overflows tight viewport widths (this is the bug Aramide's Elementor
   countdown had, which crashed on resize). */
@media (max-width: 480px) {
	.tnt-pill {
		font-size: 12px;
		padding: 7px 12px;
		gap: 6px;
	}
}