/**
 * LD Monthly Offer Countdown
 *
 * Kept deliberately low-specificity so Divi text-module styling still wins
 * where it should, with the digits pinned to tabular figures so the timer
 * does not jitter as numbers change.
 */

.ldoc {
	--ldoc-bg: #f7e08a;
	--ldoc-color: #1a1a1a;

	display: inline-flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 0.5em;
	line-height: 1.3;
	color: var( --ldoc-color );
	vertical-align: middle;
}

.ldoc__label {
	font-weight: 600;
}

.ldoc__time {
	display: inline-flex;
	align-items: baseline;
	gap: 0.35em;
	font-variant-numeric: tabular-nums;
	font-feature-settings: "tnum" 1;
}

.ldoc__unit {
	display: inline-flex;
	align-items: baseline;
	gap: 0.1em;
}

/**
 * --ldoc-num-size / --ldoc-abbr-size are set per instance from the settings
 * page or shortcode. Each rule carries its own fallback, so leaving a size
 * unset keeps the proportions that suit that particular style.
 */
.ldoc__num {
	font-size: var( --ldoc-num-size, 1em );
	font-weight: 700;
}

/**
 * Unit letters stay a step down from the digits, but at full opacity and a
 * heavier weight — at 0.75 opacity they washed out against a light pill.
 */
.ldoc__abbr {
	font-size: var( --ldoc-abbr-size, 0.8em );
	font-weight: 600;
}

/* Digits are placeholders until the first JS tick. */
.ldoc:not( .ldoc--ready ) .ldoc__num {
	opacity: 0.35;
}

/* Pill -------------------------------------------------------------------- */

.ldoc--pill {
	background: var( --ldoc-bg );
	border-radius: 999px;
	padding: 0.35em 0.9em;
	font-size: 0.95em;
}

/* Inline ------------------------------------------------------------------ */

.ldoc--inline {
	background: none;
	padding: 0;
}

/* Boxes ------------------------------------------------------------------- */

/**
 * In this style only the unit blocks carry the background, so the text colour
 * belongs to them rather than the whole component — otherwise a light colour
 * chosen to read against the blocks makes the label vanish into the page.
 */
.ldoc--boxes {
	gap: 0.6em;
	color: inherit;
}

.ldoc--boxes .ldoc__unit {
	color: var( --ldoc-color );
}

.ldoc--boxes .ldoc__time {
	gap: 0.4em;
}

.ldoc--boxes .ldoc__unit {
	flex-direction: column;
	align-items: center;
	gap: 0;
	min-width: 3.1em;
	padding: 0.4em 0.3em;
	background: var( --ldoc-bg );
	border-radius: 6px;
}

.ldoc--boxes .ldoc__num {
	font-size: var( --ldoc-num-size, 1.35em );
	line-height: 1.1;
}

.ldoc--boxes .ldoc__abbr {
	font-size: var( --ldoc-abbr-size, 0.7em );
	text-transform: uppercase;
	letter-spacing: 0.06em;
}

/* Alignment --------------------------------------------------------------- */

.ldoc--align-center,
.ldoc--align-left,
.ldoc--align-right {
	display: flex;
}

.ldoc--align-center {
	justify-content: center;
}

.ldoc--align-right {
	justify-content: flex-end;
}

/* Expired ----------------------------------------------------------------- */

.ldoc--expired {
	opacity: 0.7;
	font-weight: 600;
}

@media ( max-width: 480px ) {
	.ldoc--pill {
		font-size: 0.88em;
		padding: 0.3em 0.75em;
	}
}