/* ==========================================================================
   MQ Calendar Countdown
   Every colour and size is a CSS variable, so Elementor restyles it live.
   ========================================================================== */
.mqcc{
	--mqcc-paper:#FCF8F1;
	--mqcc-card:#FFFDF9;
	--mqcc-card-2:#F7F0E4;
	--mqcc-ink:#3B3229;
	--mqcc-ink-soft:#8C7F6E;
	--mqcc-line:#E8DCCA;
	--mqcc-band:#F4D6DA;
	--mqcc-band-1:#F4D6DA;
	--mqcc-band-2:#D9E7EF;
	--mqcc-band-3:#DFEBDC;
	--mqcc-band-4:#F7E5C6;
	--mqcc-band-ink:#8A5A61;
	--mqcc-band-ink-1:#8A5A61;
	--mqcc-band-ink-2:#4F6B7C;
	--mqcc-band-ink-3:#54704F;
	--mqcc-band-ink-4:#8A6A31;
	--mqcc-accent:#D98C97;
	--mqcc-perf:rgba(168,146,112,.55);
	--mqcc-stack:rgba(168,146,112,.30);
	--mqcc-shadow:rgba(120,96,60,.55);
	--mqcc-breeze:#E3D3BC;
	--mqcc-petal:#EFC3C8;

	--mqcc-card-w:96px;
	--mqcc-card-h:86px;
	--mqcc-band-h:26px;
	--mqcc-radius:14px;
	--mqcc-gap:12px;
	--mqcc-block-gap:40px;
	--mqcc-num-size:calc(var(--mqcc-card-h) * .5);

	--mqcc-flip:900ms;
	--mqcc-fade:440ms;

	position:relative;width:100%;box-sizing:border-box;
	padding:26px 30px;
	background:var(--mqcc-paper);
	border-top:1px solid var(--mqcc-line);
	border-bottom:1px solid var(--mqcc-line);
	color:var(--mqcc-ink);
	overflow:hidden;
}

.mqcc__inner{
	position:relative;z-index:1;
	display:flex;align-items:center;justify-content:center;flex-wrap:wrap;
	gap:var(--mqcc-block-gap);
}
.mqcc--head-right .mqcc__inner{flex-direction:row-reverse}

/* ---------- the site's breeze motif, drawn once and completely still ---------- */
.mqcc__breeze{
	position:absolute;left:0;right:0;top:50%;transform:translateY(-50%);
	width:100%;height:140px;pointer-events:none;z-index:0;
}
.mqcc__breeze .mqcc-line{stroke:var(--mqcc-breeze)}
.mqcc__breeze .mqcc-petal{fill:var(--mqcc-petal)}

/* ---------- heading ---------- */
.mqcc__lead{flex:0 0 auto;text-align:right}
.mqcc--head-right .mqcc__lead{text-align:left}
.mqcc__eyebrow{
	margin:0 0 5px;font-size:11px;letter-spacing:.2em;font-weight:700;
	color:var(--mqcc-ink-soft);
}
.mqcc__title{
	margin:0;font-size:25px;font-weight:600;line-height:1.2;color:var(--mqcc-ink);
}

/* ---------- the row of calendars ---------- */
.mqcc__row{display:flex;align-items:flex-start;gap:var(--mqcc-gap)}

.mqcc__card{
	width:var(--mqcc-card-w);
	border-radius:var(--mqcc-radius);
	background:var(--mqcc-card);
	border:1px solid var(--mqcc-line);
	box-shadow:0 1px 0 rgba(255,255,255,.9) inset,
	           0 3px 0 rgba(168,146,112,.10),
	           0 10px 18px -14px var(--mqcc-shadow);
	overflow:hidden;
}
.mqcc--no-shadow .mqcc__card{box-shadow:0 1px 0 rgba(255,255,255,.9) inset}

/* the binding band */
.mqcc__band{
	position:relative;z-index:6;height:var(--mqcc-band-h);
	background:var(--mqcc-band);
	border-radius:calc(var(--mqcc-radius) - 1px) calc(var(--mqcc-radius) - 1px) 0 0;
	border-bottom:1px solid rgba(0,0,0,.07);
	display:flex;align-items:center;justify-content:center;
}
.mqcc__band::before,.mqcc__band::after{
	content:"";position:absolute;top:calc(var(--mqcc-band-h) / 2 - 4.5px);
	width:9px;height:9px;border-radius:50%;
	background:var(--mqcc-paper);
	box-shadow:inset 0 1px 1px rgba(120,90,70,.28);
}
.mqcc__band::before{left:16px}
.mqcc__band::after{right:16px}
.mqcc--no-holes .mqcc__band::before,
.mqcc--no-holes .mqcc__band::after{display:none}
.mqcc__lab{
	font-size:9.5px;letter-spacing:.16em;font-weight:700;color:var(--mqcc-band-ink);
}

/* four colour variant */
.mqcc--tint .mqcc__card:nth-child(1) .mqcc__band{background:var(--mqcc-band-1)}
.mqcc--tint .mqcc__card:nth-child(2) .mqcc__band{background:var(--mqcc-band-2)}
.mqcc--tint .mqcc__card:nth-child(3) .mqcc__band{background:var(--mqcc-band-3)}
.mqcc--tint .mqcc__card:nth-child(4) .mqcc__band{background:var(--mqcc-band-4)}
.mqcc--tint .mqcc__card:nth-child(1) .mqcc__lab{color:var(--mqcc-band-ink-1)}
.mqcc--tint .mqcc__card:nth-child(2) .mqcc__lab{color:var(--mqcc-band-ink-2)}
.mqcc--tint .mqcc__card:nth-child(3) .mqcc__lab{color:var(--mqcc-band-ink-3)}
.mqcc--tint .mqcc__card:nth-child(4) .mqcc__lab{color:var(--mqcc-band-ink-4)}

/* ---------- the pad ---------- */
.mqcc__page{
	position:relative;height:var(--mqcc-card-h);
	background:var(--mqcc-card-2);
}
/* the perforation stub left on the pad */
.mqcc__page::before{
	content:"";position:absolute;left:6px;right:6px;top:3px;height:0;z-index:4;
	border-top:1.5px dashed var(--mqcc-perf);
}
.mqcc--no-perf .mqcc__page::before{display:none}

.mqcc__sheet,
.mqcc__leaf{
	position:absolute;left:0;right:0;
	display:flex;align-items:center;justify-content:center;
	background:var(--mqcc-card);
	font-size:var(--mqcc-num-size);line-height:1;font-weight:600;
	font-variant-numeric:tabular-nums;
	color:var(--mqcc-ink);
}
.mqcc__sheet--under{top:0;bottom:0;z-index:1}

/* the sheet that tears off: 12px taller so its ragged edge hides behind the band */
.mqcc__leaf{
	top:-12px;height:calc(var(--mqcc-card-h) + 12px);
	padding-top:12px;box-sizing:border-box;
	z-index:5;
	box-shadow:0 1px 0 rgba(255,255,255,.85) inset;
	clip-path:polygon(0% 8.5%, 9% 2.4%, 18% 9.4%, 27% 3.2%, 36% 7.2%, 45% 2.0%, 54% 9.6%, 63% 2.8%, 72% 8.2%, 81% 2.4%, 90% 7.6%, 100% 3.0%, 100% 100%, 0% 100%);
	transform-origin:88% 0%;
	transform:translate3d(0,0,0);
	backface-visibility:hidden;
	will-change:transform,clip-path;
}
/* the pale fibre along a fresh tear */
.mqcc__leaf::before{
	content:"";position:absolute;left:0;right:0;top:11px;height:3px;
	background:linear-gradient(180deg,rgba(255,255,255,.95),rgba(255,255,255,0));
	opacity:0;
}
/* the shadow the torn sheet drags down the page behind it */
.mqcc__cast{
	position:absolute;left:0;right:0;top:0;height:100%;z-index:2;pointer-events:none;
	background:linear-gradient(to bottom,rgba(90,70,45,.34),rgba(90,70,45,.10) 34%,transparent 66%);
	opacity:0;
}

/* the thin stack of pages underneath */
.mqcc__stack{height:6px;background:var(--mqcc-card-2);position:relative;z-index:3}
.mqcc__stack::before,.mqcc__stack::after{
	content:"";position:absolute;left:4px;right:4px;height:1px;background:var(--mqcc-stack);
}
.mqcc__stack::before{top:2px}
.mqcc__stack::after{top:4px;left:7px;right:7px;opacity:.7}
.mqcc--no-stack .mqcc__stack{display:none}

/* ==========================================================================
   TEAR OFF
   ========================================================================== */
.mqcc--tear .mqcc__card.is-turning .mqcc__leaf        {animation:mqcc-tear   var(--mqcc-flip) linear forwards}
.mqcc--tear .mqcc__card.is-turning .mqcc__leaf::before{animation:mqcc-fibre  var(--mqcc-flip) ease-out forwards}
.mqcc--tear .mqcc__card.is-turning .mqcc__cast        {animation:mqcc-cast   var(--mqcc-flip) cubic-bezier(.4,.05,.6,1) forwards}
.mqcc--tear .mqcc__card.is-turning .mqcc__sheet--under{animation:mqcc-reveal var(--mqcc-flip) ease-out forwards}

@keyframes mqcc-tear{
	0%{
		transform:translate3d(0,0,0) rotate(0deg);
		clip-path:polygon(0% 0%, 9% 0%, 18% 0%, 27% 0%, 36% 0%, 45% 0%, 54% 0%, 63% 0%, 72% 0%, 81% 0%, 90% 0%, 100% 0%, 100% 100%, 0% 100%);
		opacity:1;
		animation-timing-function:cubic-bezier(.30,.55,.40,1);
	}
	17%{
		transform:translate3d(0,-3px,0) rotate(-1.05deg);
		clip-path:polygon(0% 8.5%, 9% 2.4%, 18% 9.4%, 27% 3.2%, 36% 7.2%, 45% 2.0%, 54% 0%, 63% 0%, 72% 0%, 81% 0%, 90% 0%, 100% 0%, 100% 100%, 0% 100%);
		animation-timing-function:cubic-bezier(.32,.50,.42,1);
	}
	31%{
		transform:translate3d(0,-1.5px,0) rotate(-2.1deg);
		clip-path:polygon(0% 8.5%, 9% 2.4%, 18% 9.4%, 27% 3.2%, 36% 7.2%, 45% 2.0%, 54% 9.6%, 63% 2.8%, 72% 8.2%, 81% 2.4%, 90% 7.6%, 100% 3.0%, 100% 100%, 0% 100%);
		animation-timing-function:cubic-bezier(.55,.04,.78,.30);
	}
	88%{opacity:1;animation-timing-function:linear}
	100%{
		transform:translate3d(6px,112%,0) rotate(6deg);
		clip-path:polygon(0% 8.5%, 9% 2.4%, 18% 9.4%, 27% 3.2%, 36% 7.2%, 45% 2.0%, 54% 9.6%, 63% 2.8%, 72% 8.2%, 81% 2.4%, 90% 7.6%, 100% 3.0%, 100% 100%, 0% 100%);
		filter:brightness(.9);opacity:0;
	}
}
@keyframes mqcc-fibre{0%{opacity:0}22%{opacity:.9}60%,100%{opacity:0}}
@keyframes mqcc-cast{
	0%{opacity:0;transform:translateY(-26%)}
	34%{opacity:.8;transform:translateY(-6%)}
	100%{opacity:0;transform:translateY(56%)}
}
@keyframes mqcc-reveal{0%,26%{filter:brightness(.93)}70%{filter:brightness(.995)}100%{filter:brightness(1)}}

/* ==========================================================================
   STATIC — the pad never moves, only the digit that changed fades over
   ========================================================================== */
.mqcc--static .mqcc__leaf{clip-path:none;top:0;height:100%;padding-top:0}
.mqcc--static .mqcc__leaf::before,
.mqcc--static .mqcc__cast{display:none}

.mqcc__digits{display:flex;align-items:center;justify-content:center}
.mqcc__d{position:relative;display:block;width:.60em;height:1em}
.mqcc__d b{
	position:absolute;inset:0;
	display:flex;align-items:center;justify-content:center;font-weight:inherit;
}
.mqcc__d b.is-out{animation:mqcc-d-out calc(var(--mqcc-fade) * .55) linear forwards}
.mqcc__d b.is-in {animation:mqcc-d-in  calc(var(--mqcc-fade) * .75) linear calc(var(--mqcc-fade) * .30) both}
@keyframes mqcc-d-out{to{opacity:0}}
@keyframes mqcc-d-in{from{opacity:0}to{opacity:1}}

/* ---------- button ---------- */
.mqcc__btn{
	flex:0 0 auto;display:inline-block;text-decoration:none;line-height:1;
	font-size:14px;font-weight:700;
	color:#FDFAF4;background:var(--mqcc-ink);
	padding:14px 28px;border-radius:999px;
	transition:background-color .18s ease,color .18s ease,transform .18s ease;
}
.mqcc__btn:hover{background:#57493A;color:#FDFAF4}
.mqcc__btn:focus-visible{outline:2px solid var(--mqcc-accent);outline-offset:3px}
.mqcc__btnrow{width:100%;display:flex;justify-content:center;padding-top:16px}

/* ---------- expired ---------- */
.mqcc--expired .mqcc__row{opacity:.45}

/* ---------- responsive ---------- */
@media (max-width:900px){
	.mqcc__inner{flex-direction:column;text-align:center}
	.mqcc--head-right .mqcc__inner{flex-direction:column}
	.mqcc__lead,.mqcc--head-right .mqcc__lead{text-align:center}
}

@media (prefers-reduced-motion:reduce){
	.mqcc__card.is-turning .mqcc__leaf,
	.mqcc__card.is-turning .mqcc__leaf::before,
	.mqcc__card.is-turning .mqcc__cast,
	.mqcc__card.is-turning .mqcc__sheet--under,
	.mqcc__d b.is-out,.mqcc__d b.is-in{animation-duration:.01ms!important}
}

.mqcc__sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);
	white-space:nowrap;margin:0}