/**
 * mod_tf_financier 2.0.0
 * Per-instance values (margin, colours, width, z-index, delay, breakpoint) are set
 * as custom properties in an inline style block generated by the module.
 */
.tf-financier {
	--tff-margin: 20px;
	--tff-z: 1000;
	--tff-btn-bg: #163f92;
	--tff-btn-fg: #ffffff;
	--tff-btn-size: 30px;
	--tff-delay: 0s;
	--tff-duration: .45s;
	--tff-shadow: 0 0 70px 20px rgba(0, 0, 0, .6);

	position: fixed;
	z-index: var(--tff-z);
	box-sizing: border-box;
	max-width: calc(100vw - 2 * var(--tff-margin));
	margin: 0;
	padding: 0;
	line-height: 0;
}

.tf-financier[hidden] {
	display: none !important;
}

/* Corners */
.tf-financier--bottom-right { bottom: var(--tff-margin); right: var(--tff-margin); }
.tf-financier--bottom-left  { bottom: var(--tff-margin); left: var(--tff-margin); }
.tf-financier--top-right    { top: var(--tff-margin); right: var(--tff-margin); }
.tf-financier--top-left     { top: var(--tff-margin); left: var(--tff-margin); }

.tf-financier--shadow .tf-financier__body {
	box-shadow: var(--tff-shadow);
}

.tf-financier__link {
	display: block;
	text-decoration: none;
}

.tf-financier__image {
	display: block;
	width: var(--tff-width, auto);
	max-width: 100%;
	height: auto;
	margin: 0;
	border: 0;
}

/* Close button – sits on the inner corner, like in 1.0.0 */
.tf-financier__close,
.tf-financier__reopen {
	box-sizing: border-box;
	margin: 0;
	border: 1px solid var(--tff-btn-fg);
	background-color: var(--tff-btn-bg);
	color: var(--tff-btn-fg);
	font: inherit;
	cursor: pointer;
	transition: background-color .3s, color .3s, border-color .3s;
}

.tf-financier__close {
	position: absolute;
	display: flex;
	align-items: center;
	justify-content: center;
	width: var(--tff-btn-size);
	height: var(--tff-btn-size);
	padding: 0;
	border-radius: 50%;
	line-height: 1;
}

.tf-financier--bottom-right .tf-financier__close { top: calc(var(--tff-btn-size) / -2); left: calc(var(--tff-btn-size) / -2); }
.tf-financier--bottom-left  .tf-financier__close { top: calc(var(--tff-btn-size) / -2); right: calc(var(--tff-btn-size) / -2); }
.tf-financier--top-right    .tf-financier__close { bottom: calc(var(--tff-btn-size) / -2); left: calc(var(--tff-btn-size) / -2); }
.tf-financier--top-left     .tf-financier__close { bottom: calc(var(--tff-btn-size) / -2); right: calc(var(--tff-btn-size) / -2); }

.tf-financier__close:hover,
.tf-financier__reopen:hover {
	background-color: var(--tff-btn-fg);
	color: var(--tff-btn-bg);
	border-color: var(--tff-btn-bg);
}

.tf-financier__close:focus-visible,
.tf-financier__reopen:focus-visible,
.tf-financier__link:focus-visible {
	outline: 3px solid var(--tff-btn-bg);
	outline-offset: 3px;
}

/* Minimised state (close mode "minimize") */
.tf-financier__reopen {
	display: none;
	padding: .55em 1em;
	border-radius: 999px;
	font-size: 14px;
	font-weight: 600;
	line-height: 1.2;
	white-space: nowrap;
	box-shadow: 0 2px 12px rgba(0, 0, 0, .25);
}

.tf-financier.is-minimized .tf-financier__body,
.tf-financier.is-minimized .tf-financier__close {
	display: none;
}

.tf-financier.is-minimized .tf-financier__reopen {
	display: inline-flex;
}

/* Appearance animation (pure CSS, so the delay also works with page cache / without JS) */
.tf-financier--anim-none  { animation: tff-appear 1ms linear var(--tff-delay) both; }
.tf-financier--anim-fade  { animation: tff-fade var(--tff-duration) ease-out var(--tff-delay) both; }
.tf-financier--anim-slide.tf-financier--bottom-right,
.tf-financier--anim-slide.tf-financier--bottom-left { animation: tff-slide-up var(--tff-duration) ease-out var(--tff-delay) both; }
.tf-financier--anim-slide.tf-financier--top-right,
.tf-financier--anim-slide.tf-financier--top-left { animation: tff-slide-down var(--tff-duration) ease-out var(--tff-delay) both; }

.tf-financier.is-closing {
	animation: tff-out .25s ease-in both;
}

@keyframes tff-appear {
	from { visibility: hidden; }
	to   { visibility: visible; }
}

@keyframes tff-fade {
	from { opacity: 0; visibility: hidden; }
	to   { opacity: 1; visibility: visible; }
}

@keyframes tff-slide-up {
	from { opacity: 0; visibility: hidden; transform: translateY(40px); }
	to   { opacity: 1; visibility: visible; transform: none; }
}

@keyframes tff-slide-down {
	from { opacity: 0; visibility: hidden; transform: translateY(-40px); }
	to   { opacity: 1; visibility: visible; transform: none; }
}

@keyframes tff-out {
	from { opacity: 1; }
	to   { opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
	.tf-financier {
		--tff-duration: 1ms;
	}

	.tf-financier.is-closing {
		animation: none;
	}

	.tf-financier__close,
	.tf-financier__reopen {
		transition: none;
	}
}

@media print {
	.tf-financier {
		display: none !important;
	}
}
