/**
 * FB Countdown Timers — front-end styles.
 *
 * All colours/sizes are driven by CSS custom properties set inline per timer.
 *
 * NOTE ON !important: site themes and page builders apply borders, font sizes
 * and spacing to generic elements, which made live timers look different from
 * the editor preview. The timer must render identically on any theme, so its
 * own visual properties are locked with !important.
 */

.fbct-timer {
	--fbct-card-bg: #0f5132;
	--fbct-box-bg: #0f5132;
	--fbct-border-color: #0f5132;
	--fbct-border-width: 0px;
	--fbct-num-color: #ffffff;
	--fbct-label-color: #d7e3dd;
	--fbct-title-color: #1d3b30;
	--fbct-num-font: 'Playfair Display', serif;
	--fbct-label-font: 'Montserrat', sans-serif;
	--fbct-title-font: 'Montserrat', sans-serif;
	--fbct-num-size: 34px;
	--fbct-label-size: 11px;
	--fbct-title-size: 22px;
	--fbct-pad: 18px;
	--fbct-radius: 10px;
	--fbct-gap: 14px;

	display: block;
	box-sizing: border-box;
	max-width: 100%;

	/* Neutralise anything the theme tries to paint on the timer wrapper. */
	border: 0 !important;
	outline: 0 !important;
	background: transparent !important;
	box-shadow: none !important;
	padding: 0 !important;
}

.fbct-timer *,
.fbct-timer *::before,
.fbct-timer *::after {
	box-sizing: border-box !important;
}

/* Hard reset against theme bleed on the timer's inner elements. */
.fbct-timer .fbct-units,
.fbct-timer .fbct-unit,
.fbct-timer .fbct-num,
.fbct-timer .fbct-label,
.fbct-timer .fbct-title,
.fbct-timer .fbct-expired-msg {
	margin: 0;
	border: 0;
	background: none;
	box-shadow: none;
	text-shadow: none;
	float: none;
	width: auto;
}

/* Alignment — the units block is inline-level, so text-align positions it. */
.fbct-align-left { text-align: left !important; }
.fbct-align-center { text-align: center !important; }
.fbct-align-right { text-align: right !important; }

/* Title */
.fbct-timer .fbct-title {
	display: block;
	font-family: var(--fbct-title-font) !important;
	font-size: var(--fbct-title-size) !important;
	color: var(--fbct-title-color) !important;
	font-weight: 600 !important;
	margin: 0 0 14px !important;
	padding: 0 !important;
	line-height: 1.25 !important;
	text-transform: none !important;
	letter-spacing: normal !important;
}

/* Units container — equal-width columns (every card matches the widest one). */
.fbct-timer .fbct-units {
	display: inline-grid !important;
	grid-auto-flow: column !important;
	grid-auto-columns: 1fr !important;
	gap: var(--fbct-gap) !important;
	width: -moz-fit-content;
	width: fit-content;
	max-width: 100%;
	vertical-align: top;
	text-align: center;
}

.fbct-timer .fbct-unit {
	display: flex !important;
	flex-direction: column !important;
	align-items: center !important;
	justify-content: center !important;
	text-align: center !important;
	min-width: 64px;
	margin: 0 !important;
}

.fbct-timer .fbct-num {
	display: block;
	font-family: var(--fbct-num-font) !important;
	font-size: var(--fbct-num-size) !important;
	color: var(--fbct-num-color) !important;
	font-weight: 700 !important;
	line-height: 1 !important;
	font-variant-numeric: tabular-nums;
	letter-spacing: 0.5px !important;
	margin: 0 !important;
	padding: 0 !important;
}

.fbct-timer .fbct-label {
	display: block;
	font-family: var(--fbct-label-font) !important;
	font-size: var(--fbct-label-size) !important;
	color: var(--fbct-label-color) !important;
	text-transform: uppercase !important;
	letter-spacing: 1.5px !important;
	margin: 8px 0 0 !important;
	padding: 0 !important;
	font-weight: 500 !important;
	line-height: 1.2 !important;
}

/* -------- Theme: cards (each unit in its own coloured box) -------- */
.fbct-theme-cards .fbct-unit {
	background: var(--fbct-card-bg) !important;
	border-radius: var(--fbct-radius) !important;
	padding: var(--fbct-pad) !important;
	border: var(--fbct-border-width) solid var(--fbct-border-color) !important;
}

/* -------- Theme: solid (whole countdown inside one box) -------- */
.fbct-theme-solid .fbct-units {
	background: var(--fbct-box-bg) !important;
	border-radius: var(--fbct-radius) !important;
	padding: var(--fbct-pad) !important;
	border: var(--fbct-border-width) solid var(--fbct-border-color) !important;
}

/* -------- Theme: minimal (just the numbers) -------- */
.fbct-theme-minimal .fbct-unit {
	background: none !important;
	padding: 0 !important;
	border: 0 !important;
}

/* Expired state */
.fbct-timer .fbct-expired-msg {
	font-family: var(--fbct-title-font) !important;
	font-size: var(--fbct-title-size) !important;
	color: var(--fbct-title-color) !important;
	font-weight: 600 !important;
	line-height: 1.25 !important;
}

/* Responsive shrink on small screens */
@media (max-width: 480px) {
	.fbct-timer .fbct-unit { min-width: 56px; }
}