/**
 * WI event countdown — shared component.
 *
 * Every selector is prefixed with .wi-event-countdown or gated behind
 * .wi-has-room-countdown, so nothing here can reach registration forms,
 * the 26rem rail, the footer or existing grid card layout.
 */

.wi-event-countdown {
	display: inline-flex;
	align-items: baseline;
	gap: 6px;
	white-space: nowrap;
	/* Equal-width digits: the value must not reflow its neighbours each second. */
	font-variant-numeric: tabular-nums;
	font-feature-settings: "tnum";
}

.wi-event-countdown-value {
	font-weight: 700;
}

.wi-event-countdown--panel {
	display: flex;
	justify-content: center;
	gap: 8px;
	padding: 12px 10px;
}

.wi-event-countdown--panel .wi-event-countdown-value {
	font-size: 1.35em;
}

/* --- Modern room header (center slot) --------------------------------- */

#webinarHeader .webinar-modern-header-container.wi-has-room-countdown > .webinar-modern-title-container {
	flex: 1 1 0;
	min-width: 0;
}

#webinarHeader .webinar-modern-header-container.wi-has-room-countdown > .webinar-host-name-container {
	flex: 1 1 0;
	justify-content: flex-end;
	/* The default 13% left margin would push the centre slot off-centre. */
	margin-left: 0;
}

#webinarHeader .wi-event-countdown--room {
	flex: 0 0 auto;
	/* The header row stretches/baseline-aligns its children by default, which left
	 * this single-line counter pinned to the top instead of level with the title
	 * and host name. align-self only affects this element. */
	align-self: center;
	padding: 4px 0;
	/* Stays below the .wi-h4 siblings so the measured header height is unchanged. */
	font-size: 15px;
	line-height: 1.2;
}

#webinarHeader .wi-event-countdown--room .wi-event-countdown-label {
	opacity: 0.75;
}

@media ( max-width: 991px ) {
	#webinarHeader .wi-event-countdown--room .wi-event-countdown-label {
		display: none;
	}
}

@media ( max-width: 756px ) {
	#webinarHeader .wi-event-countdown--room {
		display: none;
	}
}

/* --- Registration block ----------------------------------------------- */

.wi-event-countdown--reg {
	width: 100%;
	text-align: center;
}

/* --- Grid card -------------------------------------------------------- */

.wi-event-countdown--grid {
	gap: 4px;
	opacity: 0.85;
}

/* --- Admin header ----------------------------------------------------- */

.editTop .wi-event-countdown--admin {
	display: flex;
	align-items: center;
	color: #fff;
	font-size: 16px;
	line-height: 1.2;
}

.editTop .wi-event-countdown--admin .wi-event-countdown-label {
	opacity: 0.7;
	font-weight: 400;
}

.editTop .wi-event-countdown--admin .wi-event-countdown-value {
	font-size: 20px;
}