.order_dialog {
	left: 0 !important;
	translate: 0% -50% !important;
} .tab-container.order_base {
	display: flex;
	
	.label {
		justify-content: start;
		align-self: stretch !important;
	}
} .order_text {
	display: flex;
	flex-direction: column;
	font-size: 1rem;
	gap: .125rem;
	
	i {
		font-size: .8rem;
	}
} .order_price {
	font-size: 3rem;
	
	&::after {
		content: '€';
		font-size: .5em;
	}
} .order_info {
	display: grid;
	grid-template-columns: 1fr;
	gap: 1rem;
	
	&[data-order]::before {
		content: attr(data-order);
		background: var(--color-accent);
		color: var(--color-highlight);
		padding: .25rem .5rem;
		position: absolute;
		bottom: calc(100% - .5rem);
		left: 50%;
		translate: -50% 0%;
		border-radius: .125rem;
		text-wrap: nowrap;
	}
}

/* Blackhole */
@property --_bhleft {
	syntax: '<percentage>';
	inherits: false;
	initial-value: 50%;
}

@property --_bhtop {
	syntax: '<percentage>';
	inherits: false;
	initial-value: 50%;
}

@property --_bhscale {
	syntax: '<number>';
	inherits: true;
	initial-value: 1;
}

.bhforce-icon {
	position: absolute;
	width: 32px !important;
	height: 32px !important;
	left: var(--_bhleft);
	top: var(--_bhtop);
	transition: left 500ms var(--ficms-transition-overshoot), top 500ms var(--ficms-transition-overshoot);
	opacity: 1;
	pointer-events: none;
	translate: -50% -50%;
	scale: 1;
	z-index: 30;
	animation-name: bhwiggle;
}

@keyframes bhcollapse {
	0%    { --_bhscale: 1.00; }
	5%    { --_bhscale: 0.98; }
	10%   { --_bhscale: 0.95; }
	15%   { --_bhscale: 0.93; }
	20%   { --_bhscale: 0.89; }
	25%   { --_bhscale: 0.86; }
	30%   { --_bhscale: 0.82; }
	35%   { --_bhscale: 0.78; }
	40%   { --_bhscale: 0.73; }
	45%   { --_bhscale: 0.70; }
	50%   { --_bhscale: 0.66; }
	55%   { --_bhscale: 0.62; }
	60%   { --_bhscale: 0.58; }
	65%   { --_bhscale: 0.54; }
	70%   { --_bhscale: 0.50; }
	75%   { --_bhscale: 0.44; }
	80%   { --_bhscale: 0.38; }
	85%   { --_bhscale: 0.30; }
	90%   { --_bhscale: 0.20; }
	95%   { --_bhscale: 0.10; }
	100%  { --_bhscale: 0.00; }
}

@keyframes bhfail {
	0% {
		opacity: 0;
		scale: 1;
	} 10% {
		opacity: 1;
		scale: .9;
	} 25% {
		opacity: 1;
	} 26% {
		opacity: 0;
		scale: .9;
	} 100% {
		left: 50%;
		top: 50%;
		opacity: 0;
	}
}

@keyframes bhforce {
	0% {
		opacity: 0;
		scale: 1;
	} 30% {
		opacity: 1;
		scale: .9;
	} 100% {
		left: 50%;
		top: 50%;
		opacity: 0;
		scale: 0;
	}
}

@keyframes bhwiggle {
	0%   { translate: -50% -50%; }
	25%  { translate: calc(-50% + 25%) calc(-50% - 25%); }
	50%  { translate: -50% -50%; }
	75%  { translate: calc(-50% - 25%) calc(-50% + 25%); }
	100% { translate: -50% -50%; }
}

.bh-container {
	min-height: 100vh;
	position: relative;
	--_bhscale: 1;
	
	&[data-viewstate="confirmation"] .bhforce-icon {
		animation-name: bhfail;
	}
	
	&[data-viewstate="form"] .bhforce-icon {
		animation-name: bhwiggle;
	}
	
	&[data-viewstate="finished"] .bh-barrier {
		opacity: 0;
	}
	
	&[data-viewstate="finished"] .bhforce-icon {
		animation-name: bhforce;
		transition: animation-duration 3s ease 18s;
		animation-duration: 200s;
	}
	
	&[data-viewstate="finished"] .bh-supernova {
		transition: scale 1s var(--ficms-transition-anticipate) 20s;
		scale: 1;
	}
	
	&[data-viewstate="finished"] {
		animation: bhcollapse 20s forwards;
	}
}

.bh-container > * {
	position: absolute;
	pointer-events: none;
	
	&:not(.bh-force) {
		left: 50%;
		top: 50%;
		translate: -50% -50%;
	}
} .bh-force {
	inset: 0;
}

.bh-barrier {
	width: 55vh;
	height: 55vh;
	border-radius: 50%;
	border: .5rem dashed var(--color-highlight);
	filter: blur(5px);
	z-index: 25;
	animation: barrier 30s infinite alternate;
	transition: opacity 2s var(--ficms-transition-spring);
}

@keyframes barrier {
	0% {
		rotate: 0deg;
	} 100% {
		rotate: 45deg;
	}
}

.bh-photon-ring {
	width: 35vw;
	height: 35vw;
	border-radius: 100%;
	background: var(--ficms-gradient-highlight);
	animation: photon 6s ease-in-out 0.5s infinite alternate;
	z-index: 2;
	box-shadow:inset 50px -10px 0px 4px black;
	border: 60px double var(--color-accent);
	padding: 40px;
	filter: blur(30px);
	scale: var(--_bhscale);
}

@keyframes photon {
	0% {
		rotate: 0deg;
		border-radius: 51% 50% 155% 52% / 51% 13% 88% 48%;
	} 50% {
		rotate: -160deg;
		border-radius: 63% 50% 55% 42% / 67% 27% 65% 47%;
	} 0% {
		rotate: 0deg;
		border-radius: 51% 50% 55% 52% / 51% 43% 38% 48%;
	}
}

.bh-accretion {
	width: 30vw;
	height: 30vw;
	background: var(--color-accent-bg-end);
	border-radius: 63% 50% 55% 42% / 67% 47% 65% 47%;
	animation: accretion 8s ease-in-out 0.5s infinite alternate;
	z-index: 3;
	filter: blur(50px);
}

.bh-supernova {
	width: 90vw;
	height: 90vw;
	--_image-fit: contain;
	scale: 0;
	opacity: .5;
	animation: barrier 30s infinite alternate;
}

@keyframes accretion {
	0% {
		transform: scale(var(--_bhscale)) rotate(0deg);
		border-radius: 51% 50% 55% 52% / 51% 43% 68% 48%;
	} 50% {
		transform: scale(calc(var(--_bhscale) * 1.4)) rotate(100deg) ;
		border-radius: 63% 50% 55% 42% / 67% 47% 65% 47%;
		opacity: 0.7;
	} 100% {
		transform: scale(calc(var(--_bhscale) * 1.1)) rotate(0deg);
		border-radius: 51% 50% 55% 52% / 51% 43% 68% 48%;
	}
}

.bh-shadow {
	width: 20vw;
	height: 20vw;
	background: black;
	display: flex;
	border-radius: 100%;
	animation: shadow 5s ease-in-out 0.5s infinite alternate;
	z-index: 5;
	filter: blur(10px);
	box-shadow: 2px 3px 10px 1px white, -20px 65px 160px 10px rgba(255, 255, 255, 0.7),  -2px -3px 0px 1px rgba(255, 255, 255, 0.2), -4px 14px 30px 3px rgba(255, 255, 255, 0.5);
	scale: var(--_bhscale);
}

@keyframes shadow {
	0% { transform: rotate(10deg)}
	20% { transform: rotate(30deg)}
	40% { transform: rotate(20deg)}
	50% { transform: rotate(50deg)}
	70% { transform: rotate(90deg)}
	100% { transform: rotate(180deg)}
}