/**
 * mod_tmfixedright – fixed dot navigation with tooltips
 * Styling modelled on the seconu.com side navigation.
 */
.tmfr {
	--tmfr-color: #80217e;
	--tmfr-tip-text: #fff;
	--tmfr-size: 16px;
	--tmfr-gap: 12px;
	--tmfr-edge: 20px;
	--tmfr-font: 14px;
	--tmfr-z: 20;
	--tmfr-inner: calc(var(--tmfr-size) * .375);

	position: fixed;
	top: 50%;
	transform: translateY(-50%);
	z-index: var(--tmfr-z);
	margin: 0;
	padding: 0;
	line-height: 1;
}

.tmfr--right { right: var(--tmfr-edge); }
.tmfr--left  { left: var(--tmfr-edge); }

.tmfr[hidden],
.tmfr.is-hidden,
.tmfr__item[hidden] { display: none !important; }

.tmfr__list {
	display: flex;
	flex-direction: column;
	gap: var(--tmfr-gap);
	margin: 0;
	padding: 0;
	list-style: none;
}

/* outer filled circle */
.tmfr__item {
	position: relative;
	width: var(--tmfr-size);
	height: var(--tmfr-size);
	margin: 0;
	padding: 0;
	border-radius: 50%;
	background: var(--tmfr-color);
	transition: transform .25s ease;
}

.tmfr__item::before { content: none; }

/* optional connecting line */
.tmfr--line .tmfr__item:not(:last-child)::after {
	content: "";
	position: absolute;
	left: 50%;
	top: 100%;
	width: 1px;
	height: var(--tmfr-gap);
	transform: translateX(-50%);
	background: var(--tmfr-color);
	opacity: .5;
	pointer-events: none;
}

/* clickable area + inner dot */
.tmfr__dot {
	position: absolute;
	inset: 0;
	display: block;
	border-radius: 50%;
	overflow: hidden;
	text-indent: -9999px;
	background: transparent;
	outline: none;
}

.tmfr__dot::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: var(--tmfr-inner);
	height: var(--tmfr-inner);
	border-radius: 50%;
	background: var(--tmfr-color);
	transform: translate(-50%, -50%);
	transition: background-color .25s ease;
}

.tmfr__dot:hover::after,
.tmfr__dot:active::after {
	background: rgba(255, 255, 255, .2);
}

.tmfr__item.is-active .tmfr__dot::after {
	background: rgba(255, 255, 255, .8);
}

.tmfr__dot:focus-visible {
	box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--tmfr-color);
	overflow: visible;
}

/* tooltip */
.tmfr__tip {
	position: absolute;
	top: 50%;
	padding: 7px 12px;
	border-radius: 2px;
	background: var(--tmfr-color);
	color: var(--tmfr-tip-text);
	font-size: var(--tmfr-font);
	font-weight: 400;
	line-height: 1.2;
	white-space: nowrap;
	pointer-events: none;
	opacity: 0;
	visibility: hidden;
	transition: opacity .2s ease, transform .2s ease, visibility 0s linear .2s;
}

.tmfr__tip::after {
	content: "";
	position: absolute;
	top: 50%;
	width: 0;
	height: 0;
	border: 5px solid transparent;
	transform: translateY(-50%);
}

.tmfr--right .tmfr__tip {
	right: calc(100% + 14px);
	transform: translate(6px, -50%);
}
.tmfr--right .tmfr__tip::after {
	left: 100%;
	border-left-color: var(--tmfr-color);
}

.tmfr--left .tmfr__tip {
	left: calc(100% + 14px);
	transform: translate(-6px, -50%);
}
.tmfr--left .tmfr__tip::after {
	right: 100%;
	border-right-color: var(--tmfr-color);
}

.tmfr__item:hover .tmfr__tip,
.tmfr__dot:focus-visible + .tmfr__tip {
	opacity: 1;
	visibility: visible;
	transform: translate(0, -50%);
	transition: opacity .2s ease, transform .2s ease, visibility 0s;
}

@media (prefers-reduced-motion: reduce) {
	.tmfr__item,
	.tmfr__dot::after,
	.tmfr__tip { transition: none; }
}

@media print {
	.tmfr { display: none !important; }
}