/**
 * Promo Countdown widget styles.
 *
 * The jquery.countdown plugin (motta-addons/assets/js/plugins/jquery.countdown.js)
 * injects markup per timer unit like:
 *   <span class="hours timer">
 *     <span class="digits">11</span>
 *     <span class="text">Hours</span>
 *     <span class="divider">:</span>
 *   </span>
 * We style the `.timer` wrapper as a circle, show digits centered inside,
 * push the label below the circle, and use the injected `.divider` as the
 * colon between circles.
 *
 * The plugin also emits `.weeks`, `.days` units with a `.hidden` class when
 * their value is zero — we display:none them since our promo card only
 * needs hours/mins/secs.
 */

/* ---------- Card ---------- */

.motta-promo-countdown {
	background: #ffffff;
	border: 1px solid #e5e5e5;
	border-radius: 8px;
	padding: 32px 28px;
	text-align: center;
}

/* ---------- Title / Accent / Timer Label ---------- */

.motta-promo-countdown__title {
	margin: 0 0 8px;
	font-size: 22px;
	line-height: 1.3;
	font-weight: 700;
}

.motta-promo-countdown__accent {
	color: #f29013;
	font-weight: 600;
	font-size: 16px;
	margin-bottom: 24px;
}

.motta-promo-countdown__timer-label {
	color: #999999;
	font-size: 14px;
	margin-bottom: 14px;
}

/* ---------- Timer ----------
 *
 * Structure injected by jquery.countdown.js (see plugin for exact markup):
 *   .motta-countdown
 *     .weeks.timer    > .digits, .text, .divider     (hidden when value = 0)
 *     .days.timer     > .digits, .text, .divider     (hidden when value = 0)
 *     .hours.timer    > .digits, .text, .divider     (divider hidden if weeks > 0)
 *     .minutes.timer  > .digits, .text, .divider     (divider hidden if days > 0)
 *     .seconds.timer  > .digits, .text               (no divider)
 *
 * Our design shows hours/mins/secs only, as big green circles with digits
 * inside, unit labels below the circle, and a ":" separator visible *between*
 * circles. We keep the `.divider` inside each `.timer` but position it so it
 * appears centered to the right of its circle.
 */

/* Wrap that positions the two PHP-rendered colon overlays relative to
   the timer (whose internal layout we don't fully control because it's
   re-rendered every second by jquery.countdown.js). */
.motta-promo-countdown__timer-wrap {
	position: relative;
	display: inline-block;
	margin-bottom: 8px;
}

/* The two ":" colons sit absolutely over the gaps between the three
   circles. With three equal-width circles in a flex row, the gap centers
   land at 1/3 and 2/3 of the wrap width. */
.motta-promo-countdown__colon {
	position: absolute;
	top: 30px;             /* matches half of circle height (60/2) */
	transform: translate(-50%, -50%);
	font-size: 22px;
	font-weight: 700;
	color: #333333;
	line-height: 1;
	pointer-events: none;
	z-index: 2;
}

.motta-promo-countdown__colon:not(.motta-promo-countdown__colon--second) {
	left: 33.333%;
}

.motta-promo-countdown__colon--second {
	left: 66.666%;
}

.motta-promo-countdown__timer {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 18px;
	/* Extra bottom padding because unit labels (.text) sit absolutely
	   below each circle and need room before the button. */
	padding-bottom: 28px;
}

/* Hide week/day units entirely — we only show hours/mins/secs.
   Use attribute selectors so this is resilient to the plugin also
   toggling a `.hidden` class on zero units. */
.motta-promo-countdown__timer > .weeks,
.motta-promo-countdown__timer > .days {
	display: none !important;
}

/* Each timer = a circle with digits centered.
   The doubled .motta-promo-countdown class outranks the theme's
   `.motta-countdown .timer { padding: 0 23px }` rule which would
   otherwise blow out the circle width by 46px. */
.motta-promo-countdown.motta-promo-countdown .motta-promo-countdown__timer > .timer {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 60px;
	height: 60px;
	padding: 0;          /* defeat theme's `.motta-countdown .timer { padding: 0 23px }` */
	border-radius: 50%;
	background-color: #1d5d48;
	flex: 0 0 auto;
	box-sizing: border-box;
}

.motta-promo-countdown__timer > .timer .digits {
	font-size: 18px;
	font-weight: 700;
	line-height: 1;
	color: #ffffff;
}

/* Unit label below the circle, horizontally centered, title-case.
   The doubled .motta-promo-countdown class beats the theme's
   `.motta-countdown .timer .text { text-transform: uppercase }` rule
   compiled into themes/motta/style.css, which would otherwise win on
   later source order at equal (3-class) specificity. */
.motta-promo-countdown.motta-promo-countdown .motta-promo-countdown__timer > .timer .text {
	position: absolute;
	top: calc(100% + 10px);
	left: 50%;
	transform: translateX(-50%);
	font-size: 12px;
	font-weight: 500;
	letter-spacing: 0;
	color: #999999;
	text-align: center;
	text-transform: none;
	white-space: nowrap;
	line-height: 1;
}

/* The plugin injects its own `.divider` spans inside each `.timer` (with
   varying visibility logic and a 44px font-size from the theme). We render
   our own colons in PHP instead — see .motta-promo-countdown__colon above —
   so hide all the plugin's dividers unconditionally. */
.motta-promo-countdown.motta-promo-countdown .motta-promo-countdown__timer > .timer .divider {
	display: none !important;
}

/* ---------- Button ---------- */

.motta-promo-countdown__button {
	display: inline-block;
	margin-top: 24px;
	padding: 14px 32px;
	background-color: #2f9e66;
	color: #ffffff;
	font-weight: 600;
	font-size: 15px;
	border-radius: 8px;
	text-decoration: none;
	transition: background-color 0.2s ease, transform 0.2s ease;
}

.motta-promo-countdown__button:hover {
	background-color: #247a50;
	color: #ffffff;
	transform: translateY(-1px);
}

.motta-promo-countdown__button:active {
	transform: translateY(0);
}