/* ==========================================================================
   RS Countdown Timer v5
   --------------------------------------------------------------------------
   Sizing: everything inside .bct-timer is in em. The timer's font-size is
   16px x --bct-size, but shrinks automatically when the container is too
   narrow (each style sets --bct-w = its total width in em).

   Override any of these per site in the theme CSS, e.g.
     .bct { --bct-font: "Lato", sans-serif; }
     .bct--circles { --bct-accent: #e30613; }
   ========================================================================== */

@font-face {
	font-family: "BCT DSEG7";
	src: url("fonts/DSEG7Classic-Regular.woff2") format("woff2");
	font-weight: normal;
	font-style: normal;
	font-display: block;
}

.bct {
	--bct-size: 1;
	--bct-w: 20;
	--bct-font: inherit;
	container-type: inline-size;
	width: 100%;
	max-width: 100%;
	box-sizing: border-box;
	line-height: 1;
}

.bct *,
.bct *::before,
.bct *::after {
	box-sizing: border-box;
}

.bct[hidden],
.bct [hidden] {
	display: none !important;
}

.bct-timer {
	display: flex;
	flex-wrap: nowrap;
	align-items: flex-start;
	font-family: var(--bct-font);
	font-size: calc(16px * var(--bct-size));
	font-size: min(calc(16px * var(--bct-size)), calc(100cqi / var(--bct-w)));
	-webkit-font-smoothing: antialiased;
}

/* When a max width applies, position the block itself to match align */
.bct.bct--align-center { margin-left: auto; margin-right: auto; }
.bct.bct--align-right  { margin-left: auto; margin-right: 0; }

.bct--align-left   .bct-timer { justify-content: flex-start; }
.bct--align-center .bct-timer { justify-content: center; }
.bct--align-right  .bct-timer { justify-content: flex-end; }
.bct--align-center .bct-message { text-align: center; }
.bct--align-right  .bct-message { text-align: right; }

.bct-message {
	font-family: var(--bct-font);
	font-size: 1.25em;
	font-weight: 700;
	line-height: 1.3;
}

.bct-error {
	padding: 8px 12px;
	border-left: 4px solid #d63638;
	background: #fcf0f1;
	color: #1d2327;
	font-size: 14px;
}

/* ==========================================================================
   Style 1: Circles
   ========================================================================== */

.bct--circles {
	--bct-w: 40;
	--bct-accent: #f2c11c;
	max-width: 400px;
}

.bct--circles.bct--light {
	--bct-track: #111111;
	--bct-ink: #111111;
}
.bct--circles.bct--dark {
	--bct-track: #ffffff;
	--bct-ink: #ffffff;
}

.bct--circles .bct-timer {
	gap: 1.25em;
}

.bct--circles .bct-unit {
	position: relative;
	flex: 0 0 auto;
	width: 9em;
	height: 9em;
}

.bct--circles .bct-ring {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	transform: rotate(-90deg);
	overflow: visible;
}

.bct--circles .bct-ring circle {
	fill: none;
	stroke-width: 19;
}

.bct--circles .bct-ring__track {
	stroke: var(--bct-track);
}

.bct--circles .bct-ring__bar {
	stroke: var(--bct-accent);
	transition: stroke-dasharray 0.45s ease;
}

.bct--circles .bct-unit__inner {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	color: var(--bct-ink);
	text-align: center;
}

.bct--circles .bct-label {
	font-size: 0.8em;
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: 0.01em;
	margin-bottom: 0.1em;
}

.bct--circles .bct-value {
	font-size: 2.6em;
	font-weight: 800;
	font-variant-numeric: tabular-nums;
	letter-spacing: -0.01em;
}

/* ==========================================================================
   Style 2: Flip cards
   ========================================================================== */

.bct--flip {
	--bct-day-cards: 2;
	--bct-w: calc((var(--bct-day-cards) + 6) * 3.2 + 2.4);
	--bct-card-top: linear-gradient(#f7f7f7, #ededed);
	--bct-card-bottom: linear-gradient(#ffffff, #f6f6f6);
	--bct-digit: #333333;
}
.bct--flip.bct--light {
	--bct-ink: #111111;
}
.bct--flip.bct--dark {
	--bct-ink: #ffffff;
}

.bct--flip .bct-timer {
	gap: 0.7em;
}

.bct--flip .bct-unit {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
}

.bct--flip .bct-cards {
	display: flex;
	gap: 0.18em;
}

/* Card is sized off the digit size: 1em = digit height basis */
.bct--flip .bct-card {
	position: relative;
	display: block;
	font-size: 3em;
	width: 0.97em;
	height: 1.39em;
	border-radius: 0.04em;
	box-shadow: 0.03em 0.05em 0.09em rgba(0, 0, 0, 0.3);
	perspective: 3em;
	color: var(--bct-digit);
	font-weight: 500;
	font-variant-numeric: tabular-nums;
}

/* centre split line */
.bct--flip .bct-card::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	top: 50%;
	height: 1px;
	margin-top: -0.5px;
	background: rgba(0, 0, 0, 0.12);
	z-index: 4;
	pointer-events: none;
}

.bct--flip .bct-card__half {
	position: absolute;
	left: 0;
	right: 0;
	height: 50%;
	overflow: hidden;
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
}

.bct--flip .bct-card__half > span {
	position: absolute;
	left: 0;
	right: 0;
	height: 1.39em;
	line-height: 1.39em;
	text-align: center;
}

.bct--flip .bct-card__top,
.bct--flip .bct-card__flap-top {
	top: 0;
	background: var(--bct-card-top);
	border-radius: 0.04em 0.04em 0 0;
	transform-origin: 50% 100%;
}
.bct--flip .bct-card__top > span,
.bct--flip .bct-card__flap-top > span {
	top: 0;
}

.bct--flip .bct-card__bottom,
.bct--flip .bct-card__flap-bottom {
	bottom: 0;
	background: var(--bct-card-bottom);
	border-radius: 0 0 0.04em 0.04em;
	transform-origin: 50% 0;
}
.bct--flip .bct-card__bottom > span,
.bct--flip .bct-card__flap-bottom > span {
	bottom: 0;
}

.bct--flip .bct-card__flap-top {
	z-index: 2;
}
.bct--flip .bct-card__flap-bottom {
	z-index: 3;
	transform: rotateX(90deg);
}

.bct--flip .bct-card.is-flipping .bct-card__flap-top {
	animation: bct-flip-top 0.28s ease-in forwards;
}
.bct--flip .bct-card.is-flipping .bct-card__flap-bottom {
	animation: bct-flip-bottom 0.28s 0.28s ease-out forwards;
}

@keyframes bct-flip-top {
	from { transform: rotateX(0deg); }
	to   { transform: rotateX(90deg); }
}
@keyframes bct-flip-bottom {
	from { transform: rotateX(-90deg); }
	to   { transform: rotateX(0deg); }
}

.bct--flip .bct-label {
	margin-top: 0.45em;
	font-size: 1em;
	color: var(--bct-ink);
}
.bct--flip.bct--light .bct-label {
	font-weight: 700;
	text-transform: uppercase;
}
.bct--flip.bct--dark .bct-label {
	font-weight: 400;
}

/* ==========================================================================
   Style 3: Digital
   ========================================================================== */

.bct--digital {
	--bct-w: 27;
}
.bct--digital.bct--light {
	--bct-accent: #ffffff;
}
.bct--digital.bct--dark {
	--bct-accent: #f7a21b;
}

.bct--digital .bct-timer {
	align-items: center;
	font-family: "BCT DSEG7", monospace;
	color: var(--bct-accent);
}

.bct--digital .bct-unit,
.bct--digital .bct-sep {
	font-size: 2.6em;
	font-style: normal;
	font-weight: normal;
}

.bct--digital .bct-sep {
	margin: 0 0.06em;
}

/* ==========================================================================
   Style 4: Text
   ========================================================================== */

.bct--text {
	--bct-w: 25;
	--bct-accent: #ffffff;
}

.bct--text .bct-timer {
	gap: 0.42em;
	color: var(--bct-accent);
	font-weight: 700;
}

.bct--text .bct-unit {
	font-size: 2.4em;
	white-space: nowrap;
	font-variant-numeric: tabular-nums;
}

/* ==========================================================================
   Style "box": the original v4 look (used by the legacy shortcodes)
   ========================================================================== */

.bct--box {
	--bct-w: 20;
	--bct-font: "Helvetica Neue", Arial, sans-serif;
}

.bct--box .bct-timer {
	gap: 0.625em;
	text-align: center;
}

.bct--box .bct-unit {
	background: #fff;
	border-radius: 0.625em;
	box-shadow: 0 0.25em 0.625em rgba(0, 0, 0, 0.1);
	padding: 0.625em 0.3125em;
	width: 4.375em;
	transition: transform 0.2s ease;
}

.bct--box .bct-unit:hover {
	transform: translateY(-3px);
}

.bct--box .bct-value {
	font-size: 2.375em;
	font-weight: 900;
	line-height: 1;
	margin-bottom: 0.21em;
	color: #111;
	box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
	padding: 0.08em 0.13em;
	border-radius: 0.13em;
}

.bct--box .bct-label {
	display: block;
	font-size: 0.5625em;
	letter-spacing: 1px;
	text-transform: uppercase;
	color: #7b7b7b;
}

.bct--box.bct--dark .bct-unit {
	background: #1b1b1b;
	box-shadow: 0 0.25em 0.75em rgba(0, 0, 0, 0.4);
}
.bct--box.bct--dark .bct-value { color: #fff; }
.bct--box.bct--dark .bct-label { color: #bbb; }

/* v4 compatibility: the original site placed the timer inside .right */
.right .bct--box {
	--bct-size: 0.8;
}
.right .bct--box .bct-timer {
	justify-content: flex-end;
}
@media only screen and (max-width: 600px) {
	.right .bct--box .bct-timer {
		justify-content: center;
	}
}

/* ==========================================================================
   Theme-proofing
   Themes often style every <span> (colour, font). These set the timer's
   own spans directly so they always win. They still use the variables,
   so mode="dark" and color="#..." keep working.
   ========================================================================== */

.bct.bct--digital .bct-timer span {
	color: var(--bct-accent) !important;
	font-family: "BCT DSEG7", monospace !important;
}

.bct.bct--text .bct-timer span {
	color: var(--bct-accent) !important;
}

.bct.bct--circles .bct-timer span {
	color: var(--bct-ink) !important;
}

.bct.bct--flip .bct-label {
	color: var(--bct-ink) !important;
}
.bct.bct--flip .bct-card span {
	color: var(--bct-digit) !important;
}

/* ==========================================================================
   Reduced motion
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
	.bct--circles .bct-ring__bar { transition: none; }
	.bct--flip .bct-card.is-flipping .bct-card__flap-top,
	.bct--flip .bct-card.is-flipping .bct-card__flap-bottom { animation: none; }
	.bct--box .bct-unit { transition: none; }
}