:root {
	--m3-primary: #1565C0;
}

h1 {
	font-size: 36px;
	font-weight: 300;
}

h2 {
	font-size: 30px;
	font-weight: 300;
	text-align: center;
	margin-bottom: 20px;
}

.description {
	font-size: 14px;
	font-weight: 100;
	color: #444;
	max-width: 500px;
	margin: 0 auto 30px;
}

.order-container {
	text-align: center;
	max-width: 600px;
	margin: 60px auto 0;
}

.m3-order {
	background: var(--m3-primary);
	color: #FFF;
	border-radius: var(--m3-radius);
	display: flex;
	align-items: center;
	justify-content: center;
	border: none;
	gap: 6px;
	font-weight: 300;
}
.m3-order i {
	font-size: 18px;
}
.card-img {
	max-width: 100%;
}

.ticket-loader {
	width: 150px;
	text-align: center;
	margin: 30px auto;
}
/* Спиннер */
.spinner {
	width: 100px;
	height: 100px;
	border: 1px solid #e9ecef;
	border-top: 1px solid #495057;
	border-radius: 50%;
	animation: smoothSpin 2.5s ease-in-out infinite;
	margin: 0 auto 12px;
	position: relative;
}
/* Внутреннее вращающееся кольцо */
.spinner::before {
	content: '';
	position: absolute;
	top: 6px;
	left: 6px;
	right: 6px;
	bottom: 6px;
	border: 1px solid transparent;
	border-top: 1px solid #6c757d;
	border-radius: 50%;
	animation: smoothSpinReverse 3s ease-in-out infinite;
}
/* Текст */
.loader-text {
	font-size: 14px;
	font-weight: 100;
	letter-spacing: 0.8px;
	color: #495057;
	opacity: 0.8;
	margin-bottom: 8px;
	animation: textFade 2s ease-in-out infinite;
	user-select: none;
}
/* Анимации */
@keyframes smoothSpin {
	0% { transform: rotate(0deg); border-top-color: #495057; }
	50% { transform: rotate(180deg); border-top-color: #6c757d; }
	100% { transform: rotate(360deg); border-top-color: #495057; }
}
@keyframes smoothSpinReverse {
	0% { transform: rotate(360deg); opacity: 0.6; }
	50% { transform: rotate(180deg); opacity: 1; }
	100% { transform: rotate(0deg); opacity: 0.6; }
}
@keyframes textFade {
	0%, 100% { opacity: 0.6; }
	50% { opacity: 1; }
}