/*!
 * MDA Timeline for Elementor
 * Fully logical-property based so a single stylesheet serves both LTR and RTL.
 */

/* ===================================================================== */
/* 1. Root + design tokens                                                */
/* ===================================================================== */

/* An Elementor container with align-items:center shrink-wraps its children, so
   the widget wrapper itself has to claim the full width or the whole timeline
   collapses. Elementor's own width control is more specific and still wins. */
.elementor-widget-mda_timeline {
	width: 100%;
}

.mdatl {
	/* Layout */
	--mdatl-per-view: 4;
	--mdatl-gap: 16px;
	--mdatl-row-gap: 24px;
	--mdatl-top-min-h: 120px;
	--mdatl-bottom-min-h: 120px;
	--mdatl-sign: -1;
	--mdatl-slide-duration: 450ms;

	/* Axis */
	--mdatl-axis-thickness: 2px;
	--mdatl-axis-y: 50%;
	--mdatl-axis-x: 50%;
	--mdatl-axis-offset: 0px;
	--mdatl-axis-inset-start: 0px;
	--mdatl-axis-inset-end: 0px;
	--mdatl-axis-dash: 8px;
	--mdatl-axis-dash-gap: 6px;

	/* Dots */
	--mdatl-dot-size: 14px;
	--mdatl-dot-offset: 0px;
	--mdatl-dot-align: center;
	--mdatl-dot-ring-color: rgba(163, 32, 53, 0.25);
	--mdatl-dot-ring-width: 4px;
	--mdatl-dot-ring-offset: 0px;

	/* Connector */
	--mdatl-connector-color: #d6c7d0;
	--mdatl-connector-width: 1px;
	--mdatl-connector-length: 22px;
	--mdatl-connector-dash: 4px;
	--mdatl-connector-dash-gap: 4px;

	/* Bubble */
	--mdatl-card-width: 100%;
	--mdatl-card-align: stretch;
	--mdatl-card-transition: 300ms;

	/* Tail */
	--mdatl-tail-size: 10px;
	--mdatl-tail-spread: 20px;
	--mdatl-tail-color: #fcfae3;
	--mdatl-tail-align: center;
	--mdatl-tail-offset: 0px;

	/* Text */
	--mdatl-text-align: start;
	--mdatl-inline-align: start;
	--mdatl-time-align: center;
	--mdatl-time-offset: 0px;
	--mdatl-time-bottom-gap: 0px;

	/* Badge */
	--mdatl-badge-size: 28px;
	--mdatl-badge-icon-size: 14px;
	--mdatl-badge-x: -10px;
	--mdatl-badge-y: -10px;

	/* Navigation */
	--mdatl-nav-size: 34px;
	--mdatl-nav-icon-size: 20px;
	--mdatl-nav-x: 0px;
	--mdatl-nav-y: 0px;

	/* Edge fade */
	--mdatl-fade-start: 90px;
	--mdatl-fade-end: 90px;
	--mdatl-fade-min: 0.15;

	/* Entrance animation */
	--mdatl-anim-duration: 600ms;
	--mdatl-anim-stagger: 80ms;
	--mdatl-anim-distance: 28px;

	position: relative;
	box-sizing: border-box;
	width: 100%;
}

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

.mdatl--rtl {
	--mdatl-sign: 1;
}

/* The mask used for the soft edges. Start/end are swapped for RTL so the
   controls keep meaning "reading start" and "reading end". */
.mdatl {
	--mdatl-f-a: var(--mdatl-fade-start);
	--mdatl-f-b: var(--mdatl-fade-end);
	--mdatl-fade-mask: linear-gradient(
		to right,
		rgba(0, 0, 0, var(--mdatl-fade-min)) 0,
		rgba(0, 0, 0, 1) var(--mdatl-f-a),
		rgba(0, 0, 0, 1) calc(100% - var(--mdatl-f-b)),
		rgba(0, 0, 0, var(--mdatl-fade-min)) 100%
	);
}

.mdatl--rtl {
	--mdatl-f-a: var(--mdatl-fade-end);
	--mdatl-f-b: var(--mdatl-fade-start);
}

/* ===================================================================== */
/* 2. Axis (the line)                                                     */
/* ===================================================================== */

.mdatl-axis {
	position: absolute;
	inset-inline-start: var(--mdatl-axis-inset-start);
	inset-inline-end: var(--mdatl-axis-inset-end);
	top: calc(var(--mdatl-axis-y) + var(--mdatl-axis-offset));
	height: var(--mdatl-axis-thickness);
	transform: translateY(-50%);
	z-index: 0;
	pointer-events: none;
}

.mdatl-axis__line {
	display: block;
	width: 100%;
	height: 100%;
	background-color: #e7dce4;
	border-radius: 40px;
}

.mdatl--axis-dashed .mdatl-axis__line,
.mdatl--axis-dotted .mdatl-axis__line {
	-webkit-mask-image: repeating-linear-gradient(
		to right,
		#000 0,
		#000 var(--mdatl-axis-dash),
		transparent var(--mdatl-axis-dash),
		transparent calc(var(--mdatl-axis-dash) + var(--mdatl-axis-dash-gap))
	);
	mask-image: repeating-linear-gradient(
		to right,
		#000 0,
		#000 var(--mdatl-axis-dash),
		transparent var(--mdatl-axis-dash),
		transparent calc(var(--mdatl-axis-dash) + var(--mdatl-axis-dash-gap))
	);
}

.mdatl--fade.mdatl--fade-axis .mdatl-axis {
	-webkit-mask-image: var(--mdatl-fade-mask);
	mask-image: var(--mdatl-fade-mask);
}

/* ===================================================================== */
/* 3. Viewport + track                                                    */
/* ===================================================================== */

.mdatl-viewport {
	position: relative;
	z-index: 1;
	overflow: hidden;
	container-type: inline-size;
}

.mdatl--fade .mdatl-viewport {
	-webkit-mask-image: var(--mdatl-fade-mask);
	mask-image: var(--mdatl-fade-mask);
}

.mdatl-track {
	--mdatl-vw: 100cqw;
	--mdatl-item-w: calc(
		(var(--mdatl-vw) - (var(--mdatl-per-view) - 1) * var(--mdatl-gap)) / var(--mdatl-per-view)
	);

	display: grid;
	grid-auto-flow: column;
	/* A fixed item width, when set, overrides the per-view calculation. */
	grid-auto-columns: var(--mdatl-item-width, var(--mdatl-item-w));
	grid-template-rows:
		minmax(var(--mdatl-top-min-h), auto)
		var(--mdatl-dot-size)
		auto
		minmax(var(--mdatl-bottom-min-h), auto);
	column-gap: var(--mdatl-gap);
	row-gap: 0;
	width: 100%;
	transform: translate3d(calc(var(--mdatl-offset, 0px) * var(--mdatl-sign)), 0, 0);
	transition: transform var(--mdatl-slide-duration) cubic-bezier(0.25, 0.8, 0.25, 1);
	will-change: transform;
}

/* When every bubble sits on one side, the opposite row collapses instead of
   reserving its minimum height. Per-item overrides still expand it. */
.mdatl--dist-top .mdatl-track {
	grid-template-rows:
		minmax(var(--mdatl-top-min-h), auto)
		var(--mdatl-dot-size)
		auto
		auto;
}

.mdatl--dist-bottom .mdatl-track {
	grid-template-rows:
		auto
		var(--mdatl-dot-size)
		auto
		minmax(var(--mdatl-bottom-min-h), auto);
}

.mdatl-track.is-dragging {
	transition: none;
	cursor: grabbing;
	-webkit-user-select: none;
	user-select: none;
}

.mdatl--slider.mdatl--draggable .mdatl-track {
	cursor: grab;
}

/* The item wrapper carries the per-item CSS overrides and the hover state,
   but generates no box of its own so its children become grid items of the
   track. That is what keeps every dot perfectly on the same line. */
.mdatl-item {
	display: contents;
}

.mdatl-cell {
	grid-column: var(--mdatl-col);
	min-width: 0;
}

.mdatl-item--top > .mdatl-cell--card {
	grid-row: 1;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	align-items: var(--mdatl-card-align);
}

.mdatl-item--bottom > .mdatl-cell--card {
	grid-row: 4;
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	align-items: var(--mdatl-card-align);
}

.mdatl-cell--axis {
	grid-row: 2;
	display: flex;
	align-items: center;
	justify-content: var(--mdatl-dot-align);
}

.mdatl-cell--time {
	grid-row: 3;
	display: flex;
	align-items: flex-start;
	justify-content: var(--mdatl-time-align);
	margin-block-start: var(--mdatl-time-offset);
}

/* Extra breathing room between the time and a bubble sitting below the line. */
.mdatl-item--bottom > .mdatl-cell--card {
	margin-block-start: var(--mdatl-time-bottom-gap);
}

/* ===================================================================== */
/* 4. Dots                                                                */
/* ===================================================================== */

.mdatl-dot {
	position: relative;
	z-index: 2;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: var(--mdatl-dot-size);
	height: var(--mdatl-dot-size);
	background-color: #a32035;
	border-radius: 50%;
	transform: translateY(var(--mdatl-dot-offset)) scale(var(--mdatl-dot-scale, 1))
		rotate(var(--mdatl-dot-rotate, 0deg));
	transition: background-color 250ms ease, border-color 250ms ease, transform 250ms ease,
		box-shadow 250ms ease;
}

.mdatl-dot__num {
	display: block;
	line-height: 1;
	transform: rotate(calc(-1 * var(--mdatl-dot-rotate, 0deg)));
}

.mdatl--dot-square .mdatl-dot {
	border-radius: 0;
}

.mdatl--dot-rounded .mdatl-dot {
	border-radius: 25%;
}

.mdatl--dot-diamond .mdatl-dot {
	border-radius: 0;
	--mdatl-dot-rotate: 45deg;
}

.mdatl--has-ring .mdatl-dot::after {
	content: "";
	position: absolute;
	inset: calc(-1 * (var(--mdatl-dot-ring-width) + var(--mdatl-dot-ring-offset)));
	border: var(--mdatl-dot-ring-width) solid var(--mdatl-dot-ring-color);
	border-radius: inherit;
	pointer-events: none;
	transition: border-color 250ms ease;
}

.mdatl--pulse .mdatl-item.is-active .mdatl-dot::before {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
	background-color: var(--mdatl-dot-ring-color);
	animation: mdatl-pulse 2.2s cubic-bezier(0.25, 0.8, 0.25, 1) infinite;
	pointer-events: none;
}

@keyframes mdatl-pulse {
	0% {
		transform: scale(1);
		opacity: 0.75;
	}
	100% {
		transform: scale(3);
		opacity: 0;
	}
}

/* ===================================================================== */
/* 5. Connector                                                           */
/* ===================================================================== */

.mdatl-connector {
	display: block;
	flex: 0 0 auto;
	align-self: var(--mdatl-dot-align);
	width: var(--mdatl-connector-width);
	height: var(--mdatl-connector-length);
	transition: background-color 250ms ease;
}

.mdatl--connector-solid .mdatl-connector {
	background-color: var(--mdatl-connector-color);
}

.mdatl--connector-dashed .mdatl-connector,
.mdatl--connector-dotted .mdatl-connector {
	background-image: repeating-linear-gradient(
		to bottom,
		var(--mdatl-connector-color) 0,
		var(--mdatl-connector-color) var(--mdatl-connector-dash),
		transparent var(--mdatl-connector-dash),
		transparent calc(var(--mdatl-connector-dash) + var(--mdatl-connector-dash-gap))
	);
}

.mdatl--connector-dotted .mdatl-connector {
	border-radius: 999px;
}

/* ===================================================================== */
/* 6. Bubble                                                              */
/* ===================================================================== */

.mdatl-card {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: stretch;
	width: var(--mdatl-card-width);
	max-width: 100%;
	background-color: #fcfae3;
	border-radius: 10px;
	padding: 14px 16px;
	text-align: var(--mdatl-text-align);
	transform: translateY(calc(var(--mdatl-card-ty, 0px) + var(--mdatl-anim-ty, 0px)))
		scale(var(--mdatl-card-scale, 1));
	transition: background-color var(--mdatl-card-transition) ease,
		border-color var(--mdatl-card-transition) ease,
		box-shadow var(--mdatl-card-transition) ease,
		transform var(--mdatl-card-transition) cubic-bezier(0.25, 0.8, 0.25, 1);
}

.mdatl-card__overlay {
	position: absolute;
	inset: 0;
	z-index: 2;
	border-radius: inherit;
	text-decoration: none;
}

/* Each element falls back to the shared --mdatl-*-align tokens, so leaving a
   per-element alignment empty simply inherits Layout ▸ Text Alignment. */
.mdatl-card__tag {
	display: inline-block;
	align-self: var(--mdatl-tag-align, var(--mdatl-inline-align));
	text-align: var(--mdatl-tag-align, var(--mdatl-text-align));
	margin: 0 0 6px;
	line-height: 1.3;
	font-size: 12px;
	font-weight: 700;
	color: #e2001a;
	transition: color 250ms ease, background-color 250ms ease;
}

/* "Outside the bubble" tags are rendered as a sibling of the bubble so they
   stay in flow and keep their own background / alignment. */
.mdatl-cell--card > .mdatl-card__tag {
	flex: 0 0 auto;
	max-width: 100%;
}

.mdatl-card__title {
	margin: 0;
	text-align: var(--mdatl-title-align, var(--mdatl-text-align));
	font-size: 17px;
	font-weight: 700;
	line-height: 1.35;
	color: #0e2a5c;
	transition: color 250ms ease;
}

.mdatl-card__title a {
	color: inherit;
	text-decoration: none;
}

.mdatl-card__desc {
	margin: 6px 0 0;
	text-align: var(--mdatl-desc-align, var(--mdatl-text-align));
	font-size: 14px;
	line-height: 1.6;
	color: #5a6478;
}

.mdatl-card__desc > *:first-child {
	margin-top: 0;
}

.mdatl-card__desc > *:last-child {
	margin-bottom: 0;
}

.mdatl--clamp-title .mdatl-card__title,
.mdatl--clamp-desc .mdatl-card__desc {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: var(--mdatl-clamp, 3);
	line-clamp: var(--mdatl-clamp, 3);
	overflow: hidden;
}

/* --- Bubble tail ----------------------------------------------------- */

.mdatl-card__tail {
	position: absolute;
	inset-inline: 0;
	display: flex;
	justify-content: var(--mdatl-tail-align);
	height: var(--mdatl-tail-size);
	pointer-events: none;
}

.mdatl-card__tail::before {
	content: "";
	display: block;
	width: var(--mdatl-tail-spread);
	height: 100%;
	margin-inline-start: var(--mdatl-tail-offset);
	background-color: var(--mdatl-tail-color);
}

.mdatl-item--top .mdatl-card__tail {
	top: 100%;
}

.mdatl-item--top .mdatl-card__tail::before {
	-webkit-clip-path: polygon(0 0, 100% 0, 50% 100%);
	clip-path: polygon(0 0, 100% 0, 50% 100%);
}

.mdatl-item--bottom .mdatl-card__tail {
	bottom: 100%;
}

.mdatl-item--bottom .mdatl-card__tail::before {
	-webkit-clip-path: polygon(50% 0, 100% 100%, 0 100%);
	clip-path: polygon(50% 0, 100% 100%, 0 100%);
}

/* --- Badge ----------------------------------------------------------- */

.mdatl-card__badge {
	position: absolute;
	z-index: 3;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: var(--mdatl-badge-size);
	height: var(--mdatl-badge-size);
	font-size: var(--mdatl-badge-icon-size);
	line-height: 1;
	background-color: #22a65b;
	color: #fff;
	border-radius: 50%;
	overflow: hidden;
}

.mdatl-card__badge i,
.mdatl-card__badge svg {
	width: 1em;
	height: 1em;
	font-size: inherit;
	line-height: 1;
	fill: currentColor;
}

.mdatl-card__badge img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.mdatl--badge-top-start .mdatl-card__badge {
	top: var(--mdatl-badge-y);
	inset-inline-start: var(--mdatl-badge-x);
}

.mdatl--badge-top-end .mdatl-card__badge {
	top: var(--mdatl-badge-y);
	inset-inline-end: var(--mdatl-badge-x);
}

.mdatl--badge-bottom-start .mdatl-card__badge {
	bottom: var(--mdatl-badge-y);
	inset-inline-start: var(--mdatl-badge-x);
}

.mdatl--badge-bottom-end .mdatl-card__badge {
	bottom: var(--mdatl-badge-y);
	inset-inline-end: var(--mdatl-badge-x);
}

/* ===================================================================== */
/* 7. Time                                                                */
/* ===================================================================== */

.mdatl-time {
	display: inline-block;
	margin-top: 10px;
	font-size: 13px;
	font-weight: 700;
	line-height: 1.2;
	color: #1a3b7a;
	white-space: nowrap;
	transition: color 250ms ease, background-color 250ms ease;
}

/* ===================================================================== */
/* 8. Navigation arrows                                                   */
/* ===================================================================== */

.mdatl-nav {
	position: absolute;
	z-index: 5;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: var(--mdatl-nav-size);
	height: var(--mdatl-nav-size);
	margin: 0;
	padding: 0;
	border: 0;
	background-color: transparent;
	color: #e2001a;
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
	transform: translateY(var(--mdatl-nav-ty, -50%)) scale(var(--mdatl-nav-scale, 1));
	transition: color 250ms ease, background-color 250ms ease, border-color 250ms ease,
		box-shadow 250ms ease, opacity 250ms ease, transform 250ms ease;
}

.mdatl-nav--prev {
	inset-inline-start: var(--mdatl-nav-x);
}

.mdatl-nav--next {
	inset-inline-end: var(--mdatl-nav-x);
}

.mdatl--nav-axis .mdatl-nav {
	top: calc(var(--mdatl-axis-y) + var(--mdatl-nav-y));
}

.mdatl--nav-center .mdatl-nav {
	top: calc(50% + var(--mdatl-nav-y));
}

.mdatl--nav-top .mdatl-nav {
	top: var(--mdatl-nav-y);
	--mdatl-nav-ty: 0px;
}

.mdatl--nav-bottom .mdatl-nav {
	top: auto;
	bottom: calc(-1 * var(--mdatl-nav-y));
	--mdatl-nav-ty: 0px;
}

.mdatl-nav__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 1em;
	height: 1em;
	font-size: var(--mdatl-nav-icon-size);
	line-height: 1;
	pointer-events: none;
}

.mdatl-nav__icon svg {
	width: 100%;
	height: 100%;
	display: block;
	fill: currentColor;
}

.mdatl-nav__icon i {
	font-size: inherit;
	line-height: 1;
}

/* The built-in chevron points to the inline start, so only the "next"
   button is mirrored. Custom icons are only mirrored in RTL, and only when
   the user asked for it. */
.mdatl-nav--next .mdatl-nav__icon--default {
	transform: scaleX(-1);
}

.mdatl--rtl.mdatl--flip-rtl .mdatl-nav--prev .mdatl-nav__icon--default {
	transform: scaleX(-1);
}

.mdatl--rtl.mdatl--flip-rtl .mdatl-nav--next .mdatl-nav__icon--default {
	transform: none;
}

.mdatl--rtl.mdatl--flip-rtl .mdatl-nav__icon--custom {
	transform: scaleX(-1);
}

.mdatl-nav.is-disabled {
	opacity: 0.3;
	cursor: default;
	pointer-events: none;
}

.mdatl-nav--autohide.is-disabled {
	opacity: 0;
	visibility: hidden;
}

.mdatl-nav:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 2px;
}

/* ===================================================================== */
/* 9. Vertical / stacked layout                                           */
/* ===================================================================== */

:is(.mdatl--vertical, .mdatl.is-stacked) .mdatl-track {
	grid-auto-flow: row;
	grid-template-rows: none;
	grid-auto-rows: auto;
	grid-template-columns: 1fr var(--mdatl-dot-size) 1fr;
	grid-auto-columns: auto;
	column-gap: var(--mdatl-gap);
	row-gap: var(--mdatl-row-gap);
	transform: none;
	cursor: auto;
}

:is(.mdatl--vertical, .mdatl.is-stacked).mdatl--vaxis-start .mdatl-track {
	grid-template-columns: max-content var(--mdatl-dot-size) 1fr;
}

:is(.mdatl--vertical, .mdatl.is-stacked) .mdatl-cell {
	grid-row: var(--mdatl-col);
	/* Both spacers describe above/below-the-line distances, which do not exist
	   once the timeline runs vertically. */
	margin-block-start: 0;
}

:is(.mdatl--vertical, .mdatl.is-stacked) .mdatl-cell--axis {
	grid-column: 2;
	align-items: center;
	justify-content: center;
}

:is(.mdatl--vertical, .mdatl.is-stacked) .mdatl-item--top > .mdatl-cell--card {
	grid-column: 1;
	flex-direction: row;
	align-items: center;
	justify-content: flex-end;
}

:is(.mdatl--vertical, .mdatl.is-stacked) .mdatl-item--top > .mdatl-cell--time {
	grid-column: 3;
	align-items: center;
	justify-content: flex-start;
}

:is(.mdatl--vertical, .mdatl.is-stacked) .mdatl-item--bottom > .mdatl-cell--card {
	grid-column: 3;
	flex-direction: row;
	align-items: center;
	justify-content: flex-start;
}

:is(.mdatl--vertical, .mdatl.is-stacked) .mdatl-item--bottom > .mdatl-cell--time {
	grid-column: 1;
	align-items: center;
	justify-content: flex-end;
}

:is(.mdatl--vertical, .mdatl.is-stacked) .mdatl-connector {
	align-self: center;
	width: var(--mdatl-connector-length);
	height: var(--mdatl-connector-width);
}

:is(.mdatl--vertical, .mdatl.is-stacked).mdatl--connector-dashed .mdatl-connector,
:is(.mdatl--vertical, .mdatl.is-stacked).mdatl--connector-dotted .mdatl-connector {
	background-image: repeating-linear-gradient(
		to right,
		var(--mdatl-connector-color) 0,
		var(--mdatl-connector-color) var(--mdatl-connector-dash),
		transparent var(--mdatl-connector-dash),
		transparent calc(var(--mdatl-connector-dash) + var(--mdatl-connector-dash-gap))
	);
}

:is(.mdatl--vertical, .mdatl.is-stacked) .mdatl-time {
	margin-top: 0;
	margin-inline: 10px;
}

:is(.mdatl--vertical, .mdatl.is-stacked) .mdatl-axis {
	top: var(--mdatl-axis-inset-start);
	bottom: var(--mdatl-axis-inset-end);
	inset-inline-start: calc(var(--mdatl-axis-x) + var(--mdatl-axis-offset));
	inset-inline-end: auto;
	width: var(--mdatl-axis-thickness);
	height: auto;
	transform: translateX(-50%);
}

:is(.mdatl--vertical, .mdatl.is-stacked).mdatl--rtl .mdatl-axis {
	transform: translateX(50%);
}

:is(.mdatl--vertical, .mdatl.is-stacked) .mdatl-axis__line {
	width: 100%;
	height: 100%;
}

:is(.mdatl--vertical, .mdatl.is-stacked).mdatl--axis-dashed .mdatl-axis__line,
:is(.mdatl--vertical, .mdatl.is-stacked).mdatl--axis-dotted .mdatl-axis__line {
	-webkit-mask-image: repeating-linear-gradient(
		to bottom,
		#000 0,
		#000 var(--mdatl-axis-dash),
		transparent var(--mdatl-axis-dash),
		transparent calc(var(--mdatl-axis-dash) + var(--mdatl-axis-dash-gap))
	);
	mask-image: repeating-linear-gradient(
		to bottom,
		#000 0,
		#000 var(--mdatl-axis-dash),
		transparent var(--mdatl-axis-dash),
		transparent calc(var(--mdatl-axis-dash) + var(--mdatl-axis-dash-gap))
	);
}

/* The tail points sideways once the timeline is vertical. */
:is(.mdatl--vertical, .mdatl.is-stacked) .mdatl-card__tail {
	inset-inline: auto;
	inset-block: 0;
	width: var(--mdatl-tail-size);
	height: auto;
	flex-direction: column;
	align-items: stretch;
}

:is(.mdatl--vertical, .mdatl.is-stacked) .mdatl-card__tail::before {
	width: 100%;
	height: var(--mdatl-tail-spread);
	margin-inline-start: 0;
	margin-block-start: var(--mdatl-tail-offset);
}

:is(.mdatl--vertical, .mdatl.is-stacked) .mdatl-item--top .mdatl-card__tail {
	top: auto;
	inset-inline-start: 100%;
}

:is(.mdatl--vertical, .mdatl.is-stacked) .mdatl-item--top .mdatl-card__tail::before {
	-webkit-clip-path: polygon(0 0, 100% 50%, 0 100%);
	clip-path: polygon(0 0, 100% 50%, 0 100%);
}

:is(.mdatl--vertical, .mdatl.is-stacked) .mdatl-item--bottom .mdatl-card__tail {
	bottom: auto;
	inset-inline-end: 100%;
}

:is(.mdatl--vertical, .mdatl.is-stacked) .mdatl-item--bottom .mdatl-card__tail::before {
	-webkit-clip-path: polygon(100% 0, 100% 100%, 0 50%);
	clip-path: polygon(100% 0, 100% 100%, 0 50%);
}

/* Give an outside tag its own full-width line once the layout is vertical. */
:is(.mdatl--vertical, .mdatl.is-stacked).mdatl--tag-outside-top .mdatl-cell--card {
	flex-wrap: wrap;
}

:is(.mdatl--vertical, .mdatl.is-stacked).mdatl--tag-outside-top
	.mdatl-cell--card
	> .mdatl-card__tag {
	flex: 0 0 100%;
	order: -1;
}

/* Stacked mode kills the slider entirely. */
.mdatl.is-stacked .mdatl-nav {
	display: none;
}

.mdatl.is-stacked .mdatl-viewport {
	overflow: visible;
	-webkit-mask-image: none;
	mask-image: none;
}

.mdatl.is-stacked .mdatl-axis {
	-webkit-mask-image: none;
	mask-image: none;
}

/* ===================================================================== */
/* 10. Hidden parts                                                       */
/* ===================================================================== */

.mdatl--no-time .mdatl-cell--time {
	display: none;
}

.mdatl--no-dots .mdatl-cell--axis {
	min-height: var(--mdatl-dot-size);
}

/* ===================================================================== */
/* 11. Entrance animation                                                 */
/* ===================================================================== */

.mdatl--anim.mdatl--js .mdatl-cell {
	opacity: 0;
	transition: opacity var(--mdatl-anim-duration) ease,
		transform var(--mdatl-anim-duration) cubic-bezier(0.22, 0.61, 0.36, 1);
	transition-delay: calc(var(--mdatl-i, 0) * var(--mdatl-anim-stagger));
}

.mdatl--anim.mdatl--js .mdatl-item.is-inview > .mdatl-cell {
	opacity: 1;
	transform: none;
}

.mdatl--anim-fade-up.mdatl--js .mdatl-cell {
	transform: translateY(var(--mdatl-anim-distance));
}

.mdatl--anim-zoom.mdatl--js .mdatl-cell {
	transform: scale(0.9);
}

.mdatl--anim-fade-out.mdatl--js .mdatl-item--top > .mdatl-cell {
	transform: translateY(var(--mdatl-anim-distance));
}

.mdatl--anim-fade-out.mdatl--js .mdatl-item--bottom > .mdatl-cell {
	transform: translateY(calc(-1 * var(--mdatl-anim-distance)));
}

/* ===================================================================== */
/* 12. Elementor editor + accessibility                                   */
/* ===================================================================== */

.elementor-editor-active .mdatl-card__overlay {
	pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
	.mdatl-track,
	.mdatl-card,
	.mdatl-dot,
	.mdatl-nav,
	.mdatl--anim.mdatl--js .mdatl-cell {
		transition-duration: 1ms !important;
		animation-duration: 1ms !important;
		animation-iteration-count: 1 !important;
	}
}

/* ========================================================================
 * Event popup (v1.2.0)
 * ===================================================================== */

/* ---- Cards become buttons ---------------------------------------------- */
.mdatl-popup-yes .mdatl-card--popup {
	cursor: pointer;
	transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
	-webkit-tap-highlight-color: transparent;
}
.mdatl-popup-yes .mdatl-card--popup:hover {
	transform: translateY(-3px);
	box-shadow: 0 14px 28px -12px rgba(1, 32, 83, .28);
}
.mdatl-popup-yes .mdatl-item--bottom .mdatl-card--popup:hover {
	transform: translateY(3px);
}
.mdatl-popup-yes .mdatl-card--popup:focus { outline: none; }
.mdatl-popup-yes .mdatl-card--popup:focus-visible {
	outline: 3px solid #012053;
	outline-offset: 3px;
}
.mdatl-popup-yes.mdatl-popdesc-yes .mdatl-card__desc { display: none; }

.mdatl-card__hint {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin-top: 14px;
	font-size: 15px;
	font-weight: 700;
	line-height: 1;
	color: #ED1D24;
}
.mdatl-card__hint-plus {
	position: relative;
	width: 20px;
	height: 20px;
	border-radius: 50%;
	border: 1.5px solid currentColor;
	transition: background-color .2s ease, color .2s ease;
	flex: 0 0 auto;
}
.mdatl-card__hint-plus::before,
.mdatl-card__hint-plus::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 9px;
	height: 1.5px;
	background: currentColor;
	transform: translate(-50%, -50%);
}
.mdatl-card__hint-plus::after { transform: translate(-50%, -50%) rotate(90deg); }
.mdatl-card--popup:hover .mdatl-card__hint-plus {
	background: #ED1D24;
	border-color: #ED1D24;
	color: #fff;
}
.mdatl-card--popup:hover .mdatl-card__hint-plus::before,
.mdatl-card--popup:hover .mdatl-card__hint-plus::after { background: #fff; }

/* ---- Portal / lock ------------------------------------------------------ */
html.mdatlp-locked,
html.mdatlp-locked body { overflow: hidden !important; }

.mdatlp-portal { position: static; }

.mdatlp {
	--mdatlp-overlay: rgba(2, 18, 45, .72);
	--mdatlp-bg: #ffffff;
	--mdatlp-accent: #ED1D24;
	--mdatlp-ink: #012053;
	--mdatlp-hl: rgba(255, 238, 0, .13);
	--mdatlp-hl-line: #FFEE00;
	--mdatlp-muted: #5B6A85;
	--mdatlp-line: rgba(1, 32, 83, .10);
	--mdatlp-width: 820px;
	--mdatlp-radius: 24px;
	--mdatlp-pad: 44px;
	--mdatlp-dx: 28px;

	position: fixed;
	inset: 0;
	z-index: 100000;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 24px;
	font-family: inherit;
	color: var(--mdatlp-ink);
	text-align: start;
}
.mdatlp--flow-rtl { --mdatlp-dx: -28px; }

.mdatlp__overlay {
	position: absolute;
	inset: 0;
	background: var(--mdatlp-overlay);
	-webkit-backdrop-filter: blur(3px);
	backdrop-filter: blur(3px);
	opacity: 0;
	transition: opacity .25s ease;
}

.mdatlp__dialog {
	position: relative;
	display: flex;
	flex-direction: column;
	width: 100%;
	max-width: var(--mdatlp-width);
	max-height: min(88vh, 900px);
	background: var(--mdatlp-bg);
	border-radius: var(--mdatlp-radius);
	box-shadow: 0 30px 80px -20px rgba(2, 18, 45, .55);
	overflow: hidden;
	opacity: 0;
	transform: translateY(18px) scale(.97);
	transition: opacity .25s ease, transform .3s cubic-bezier(.2, .8, .2, 1);
}
.mdatlp__dialog:focus { outline: none; }

.mdatlp.is-open .mdatlp__overlay { opacity: 1; }
.mdatlp.is-open .mdatlp__dialog { opacity: 1; transform: none; }
.mdatlp.is-closing .mdatlp__overlay,
.mdatlp.is-closing .mdatlp__dialog { transition-duration: .2s; }

/* progress */
.mdatlp__progress {
	position: relative;
	height: 4px;
	background: var(--mdatlp-line);
	flex: 0 0 auto;
}
.mdatlp__progress-bar {
	position: absolute;
	top: 0;
	bottom: 0;
	width: 0;
	background: var(--mdatlp-accent);
	transition: width .35s ease;
}
.mdatlp--flow-ltr .mdatlp__progress-bar { left: 0; right: auto; }
.mdatlp--flow-rtl .mdatlp__progress-bar { right: 0; left: auto; }

/* header */
.mdatlp__head {
	display: flex;
	align-items: center;
	gap: 16px;
	padding: 18px var(--mdatlp-pad);
	background: var(--mdatlp-hl);
	border-bottom: 1px solid var(--mdatlp-hl-line);
	flex: 0 0 auto;
}
.mdatlp__meta {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 12px;
	min-width: 0;
	flex: 1 1 auto;
}
.mdatlp__dot {
	width: 14px;
	height: 14px;
	border-radius: 50%;
	background: var(--mdatlp-accent);
	box-shadow: 0 0 0 5px rgba(0, 46, 106, .18);
	flex: 0 0 auto;
	margin-inline: 4px 2px;
}
.mdatlp__time {
	font-size: 26px;
	font-weight: 700;
	line-height: 1.1;
	color: var(--mdatlp-ink);
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}
.mdatlp__tag {
	display: inline-block;
	padding: 5px 12px 4px;
	border-radius: 100px;
	background: rgba(237, 29, 36, .09);
	color: var(--mdatlp-accent);
	font-size: 15px;
	font-weight: 700;
	line-height: 1.2;
}
.mdatlp__tag[hidden] { display: none; }
.mdatlp__count {
	font-size: 15px;
	font-weight: 500;
	color: var(--mdatlp-muted);
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
	direction: ltr;
	flex: 0 0 auto;
}
.mdatlp--no-count .mdatlp__count,
.mdatlp--no-count .mdatlp__progress { display: none; }

.mdatlp__close {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	padding: 0;
	margin: 0;
	border: 0 !important;
	border-radius: 50%;
	background: #fff;
	color: var(--mdatlp-ink);
	box-shadow: 0 2px 8px rgba(1, 32, 83, .12);
	cursor: pointer;
	flex: 0 0 auto;
	transition: background-color .2s ease, color .2s ease, transform .2s ease;
}
.mdatlp__close:hover { background: var(--mdatlp-ink); color: #fff; }
.mdatlp__close:focus-visible,
.mdatlp__nav:focus-visible {
	outline: 3px solid var(--mdatlp-ink);
	outline-offset: 2px;
}
.mdatlp__close svg,
.mdatlp__nav svg { display: block; }

/* body */
.mdatlp__body {
	flex: 1 1 auto;
	overflow-y: auto;
	overscroll-behavior: contain;
	-webkit-overflow-scrolling: touch;
	padding: 34px var(--mdatlp-pad) 38px;
	scrollbar-width: thin;
	scrollbar-color: rgba(1, 32, 83, .25) transparent;
}
.mdatlp__title {
	margin: 0 0 18px;
	font-size: 36px;
	font-weight: 700;
	line-height: 1.2;
	color: var(--mdatlp-ink);
	text-wrap: balance;
}
.mdatlp__text {
	font-size: 19px;
	font-weight: 400;
	line-height: 1.75;
	color: #22314F;
}
.mdatlp__text p { margin: 0 0 1em; }
.mdatlp__text p:last-child { margin-bottom: 0; }

.mdatlp__content.is-enter-next { animation: mdatlp-in-next .34s cubic-bezier(.2, .8, .2, 1); }
.mdatlp__content.is-enter-prev { animation: mdatlp-in-prev .34s cubic-bezier(.2, .8, .2, 1); }
@keyframes mdatlp-in-next {
	from { opacity: 0; transform: translateX(var(--mdatlp-dx)); }
	to   { opacity: 1; transform: none; }
}
@keyframes mdatlp-in-prev {
	from { opacity: 0; transform: translateX(calc(var(--mdatlp-dx) * -1)); }
	to   { opacity: 1; transform: none; }
}

/* footer / navigation - laid out in the timeline's flow direction */
.mdatlp__foot {
	display: flex;
	justify-content: space-between;
	align-items: stretch;
	gap: 16px;
	padding: 16px var(--mdatlp-pad);
	border-top: 1px solid var(--mdatlp-line);
	background: var(--mdatlp-bg);
	flex: 0 0 auto;
}
.mdatlp--flow-ltr .mdatlp__foot { direction: ltr; }
.mdatlp--flow-rtl .mdatlp__foot { direction: rtl; }

.mdatlp__nav {
	display: inline-flex;
	align-items: center;
	gap: 14px;
	min-width: 0;
	max-width: calc(50% - 8px);
	padding: 8px 10px;
	margin: 0;
	border: 0 !important;
	border-radius: 16px;
	background: transparent;
	color: var(--mdatlp-ink);
	font: inherit;
	cursor: pointer;
	transition: background-color .2s ease;
}
.mdatlp__nav:hover { background: rgba(1, 32, 83, .05); }
.mdatlp__nav.is-hidden { visibility: hidden; }

.mdatlp__nav-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 46px;
	height: 46px;
	border-radius: 50%;
	flex: 0 0 auto;
	transition: background-color .2s ease, color .2s ease, transform .2s ease;
}
.mdatlp__nav--prev .mdatlp__nav-icon {
	border: 1.5px solid var(--mdatlp-ink);
	color: var(--mdatlp-ink);
}
.mdatlp__nav--next .mdatlp__nav-icon {
	background: var(--mdatlp-accent);
	color: #fff;
}
.mdatlp__nav--prev:hover .mdatlp__nav-icon { background: var(--mdatlp-ink); color: #fff; }
.mdatlp__nav--next:hover .mdatlp__nav-icon { background: #C8141A; }

/* arrow direction: chevron points right by default */
.mdatlp--flow-ltr .mdatlp__nav--prev .mdatlp__nav-icon svg,
.mdatlp--flow-rtl .mdatlp__nav--next .mdatlp__nav-icon svg { transform: rotate(180deg); }

.mdatlp__nav-text {
	display: flex;
	flex-direction: column;
	gap: 3px;
	min-width: 0;
	direction: rtl;
}
.mdatlp[dir="ltr"] .mdatlp__nav-text { direction: ltr; }
.mdatlp--flow-ltr .mdatlp__nav--prev .mdatlp__nav-text { text-align: left; }
.mdatlp--flow-ltr .mdatlp__nav--next .mdatlp__nav-text { text-align: right; }
.mdatlp--flow-rtl .mdatlp__nav--prev .mdatlp__nav-text { text-align: right; }
.mdatlp--flow-rtl .mdatlp__nav--next .mdatlp__nav-text { text-align: left; }

.mdatlp__nav-label {
	font-size: 14px;
	font-weight: 500;
	line-height: 1.2;
	color: var(--mdatlp-muted);
}
.mdatlp__nav-title {
	font-size: 16px;
	font-weight: 700;
	line-height: 1.3;
	color: var(--mdatlp-ink);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	max-width: 280px;
}

.mdatlp__sr {
	position: absolute !important;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}

/* ---- Tablet ------------------------------------------------------------- */
@media (max-width: 1024px) {
	.mdatlp { --mdatlp-pad: 32px; }
	.mdatlp__title { font-size: 30px; }
	.mdatlp__text { font-size: 18px; }
}

/* ---- Mobile: bottom sheet ---------------------------------------------- */
@media (max-width: 767px) {
	.mdatlp {
		--mdatlp-pad: 20px;
		align-items: flex-end;
		padding: 0;
	}
	.mdatlp__dialog {
		max-width: none;
		max-height: 92vh;
		max-height: 92dvh;
		border-radius: 22px 22px 0 0;
		transform: translateY(40px);
	}
	.mdatlp__head { padding-top: 14px; padding-bottom: 14px; gap: 10px; }
	.mdatlp__meta { gap: 8px; }
	.mdatlp__time { font-size: 21px; }
	.mdatlp__tag { font-size: 13px; padding: 4px 10px 3px; }
	.mdatlp__count { font-size: 13px; }
	.mdatlp__close { width: 40px; height: 40px; }
	.mdatlp__body { padding-top: 24px; padding-bottom: 28px; }
	.mdatlp__title { font-size: 25px; margin-bottom: 14px; }
	.mdatlp__text { font-size: 17px; line-height: 1.7; }
	.mdatlp__foot {
		padding-top: 10px;
		padding-bottom: calc(10px + env(safe-area-inset-bottom, 0px));
		gap: 8px;
	}
	.mdatlp__nav { gap: 10px; padding: 6px; }
	.mdatlp__nav-icon { width: 42px; height: 42px; }
	.mdatlp__nav-title { display: none; }
	.mdatlp__nav-label { font-size: 15px; font-weight: 700; color: var(--mdatlp-ink); }
	.mdatl-card__hint { font-size: 13px; margin-top: 10px; }
	.mdatl-card__hint-plus { width: 18px; height: 18px; }
}

@media (prefers-reduced-motion: reduce) {
	.mdatlp__overlay,
	.mdatlp__dialog,
	.mdatlp__progress-bar,
	.mdatl-popup-yes .mdatl-card--popup { transition: none !important; }
	.mdatlp__content.is-enter-next,
	.mdatlp__content.is-enter-prev { animation: none; }
	.mdatl-popup-yes .mdatl-card--popup:hover { transform: none; }
}

/* ---- Popup: shield from theme / kit button styles, site font (v1.2.0) --- */
.mdatlp {
	font-family: var(--mdatlp-font, inherit);
}
.mdatlp .mdatlp__title,
.mdatlp .mdatlp__text,
.mdatlp button {
	font-family: inherit;
	text-transform: none;
	letter-spacing: normal;
}
.mdatlp .mdatlp__text { font-size: 20px; line-height: 1.7; }
.mdatlp button.mdatlp__close,
.mdatlp button.mdatlp__nav {
	min-height: 0 !important;
	line-height: 1.2 !important;
	text-decoration: none !important;
	border: 0 !important;
}
.mdatlp button.mdatlp__close {
	width: 44px !important;
	height: 44px !important;
	padding: 0 !important;
	border-radius: 50% !important;
	background: #fff !important;
	color: var(--mdatlp-ink) !important;
	box-shadow: 0 2px 8px rgba(1, 32, 83, .12) !important;
}
.mdatlp button.mdatlp__close:hover,
.mdatlp button.mdatlp__close:focus-visible {
	background: var(--mdatlp-ink) !important;
	color: #fff !important;
}
.mdatlp button.mdatlp__nav {
	width: auto !important;
	padding: 8px 10px !important;
	border-radius: 16px !important;
	background: transparent !important;
	color: var(--mdatlp-ink) !important;
	box-shadow: none !important;
	font-size: inherit !important;
	font-weight: inherit !important;
}
.mdatlp button.mdatlp__nav:hover,
.mdatlp button.mdatlp__nav:focus-visible {
	background: rgba(1, 32, 83, .05) !important;
}
.mdatlp button.mdatlp__nav--prev:hover .mdatlp__nav-icon { color: #fff; }
@media (max-width: 767px) {
	.mdatlp .mdatlp__text { font-size: 18px; }
	.mdatlp button.mdatlp__close { width: 40px !important; height: 40px !important; }
	.mdatlp button.mdatlp__nav { padding: 6px !important; }
}
.mdatlp .mdatlp__nav-time {
	display: inline-block;
	margin-inline-start: 8px;
	padding-inline-start: 8px;
	border-inline-start: 1px solid rgba(1, 32, 83, .25);
	font-weight: 700;
	color: var(--mdatlp-ink);
	font-variant-numeric: tabular-nums;
}

/* ---- Bidi: mixed Hebrew / digits inside an LTR-flow timeline (v1.2.3) ---- */
.mdatl .mdatl-time,
.mdatl .mdatl-card__tag,
.mdatl .mdatl-card__title,
.mdatl .mdatl-card__desc {
	unicode-bidi: plaintext;
}

/* ---- Popup nav: time chip follows the popup's text direction (v1.2.4) ---- */
.mdatlp[dir="rtl"] .mdatlp__nav-time { direction: rtl; }
.mdatlp[dir="ltr"] .mdatlp__nav-time { direction: ltr; }