:root {
	--font-family: 'Inter', -apple-system, 'Segoe UI', 'Roboto', sans-serif;
	--rounded-sm: 0.75rem;
	--rounded-md: 1.5rem;
	--rounded-circle: 50%;
	--white-clr: #ffffff;
	--accent-clr: #0f62fe;
	--accent-clr-hover: #0044e0;
	--accent-clr-active: #0026c2;
	--accent-clr-light: #0f62fe;
	--text-dark: #1f2937;
}

/* Общие стили страницы */

html,
body {
	height: 100%;
}

body {
	margin: 0;
	font-family: var(--font-family);
}

/* Стили элементов */

/* Скругления */

.rounded {
	border-radius: 0.68rem !important;
}

/* Цвета */

.text-dark {
	color: var(--text-dark) !important;
}

/* Кнопки */

.btn-accent-lg {
	height: 56px;
	color: white;
	font-weight: 600;
	background: var(--accent-clr);
	border: 0 solid transparent;
	transition: background-color 0.4s ease;
}

.btn-accent-lg:hover {
	color: white;
	background-color: var(--accent-clr-hover);
}

.btn.btn-accent-lg:active {
	color: white;
	background-color: #11369c;
}

.btn-accent-outline-lg {
	height: 56px;
	color: var(--accent-clr);
	font-weight: 600;
	background-color: #0f62fe25;
	border: 0 solid transparent;
	transition: background-color 0.4s ease;
}

.btn-accent-outline-lg:hover {
	color: var(--accent-clr);
	background-color: #0f62fe40;
}

.btn.btn-accent-outline-lg:active {
	color: var(--accent-clr);
	background-color: #0f62fe25;
	border: 0 solid transparent;
}

/* Ссылки */

/* Поля ввода, checkbox */

.form-floating > label {
	margin-top: 0.1rem;
	font-size: 0.875rem;
}

.form-control:focus {
	border-color: var(--accent-clr);
	box-shadow: 0 0 0 0.25rem rgb(15 98 254 / 0.1);
}

.form-check-input:checked {
	background-color: var(--accent-clr);
	border-color: var(--accent-clr);
}

/* Страница */

.main-container {
	position: relative;
	height: 100%;
	min-height: 100vh;
	background: radial-gradient(circle at -10% 100%, #90a5da 0%, transparent 80%);
	overflow-x: hidden;
}

/* Секция баннер */

.hero-section {
	height: 100%;
}

.hero-section__icon {
	width: 1.25rem;
	height: 1.25rem;
	stroke-width: 1.6px;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.hero-section__title {
	color: #2c52b3;
	font-size: clamp(42px, 3vw, 58px);
}

.hero-section__subtitle {
	width: min(680px, 100%);
	font-size: clamp(17px, 1.6vw, 20px);
}

/* Форма авторизации */

.auth-form__card {
	max-width: 420px;
	margin-inline: auto;
}

.auth-form__title {
	color: var(--text-dark);
	font-size: 1.75rem;
}

.auth-form__forgot-link,
.auth-form__register-link {
	color: var(--accent-clr);
	font-size: 0.875rem;
}

.auth-form__divider {
	display: flex;
	align-items: center;
	gap: 1rem;
	margin: 2rem 0 1.5rem;
}

.auth-form__divider::before,
.auth-form__divider::after {
	content: '';
	flex: 1;
	height: 1px;
	background-color: #e5e7eb;
}

.auth-form__register-text {
	font-size: 0.875rem;
	text-align: center;
}

.form-floating.auth-form__captcha-input {
	min-width: 248px;
}

.auth-form__captcha-refresh {
	width: 1.5rem;
	height: 1.5rem;
}

/* Форма авторизации с кодом */

.auth-form__dot {
	position: relative;
	width: 1.5rem;
	height: 1.5rem;
	background-color: #0f62fe25;
	border-radius: var(--rounded-circle);
}

.auth-form__dot--active::before {
	content: '';
	position: absolute;
	inset: 3px;
	background-color: #0f62fe50;
	border-radius: var(--rounded-circle);
}

.auth-form__exit {
	font-size: clamp(0.8rem, 3.4vw, 1rem);
}

/* breakpoints LG */

@media (max-width: 992px) {
	.hero-section {
		height: fit-content;
	}

	.auth-form__card {
		max-width: 479.91px;
	}
}