/* =========== © 2023 Centroarts.com =========== */

/* - Modal - */
.modal {
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 1050;
	display: none;
	outline: 0;
	overflow: hidden;
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
}

.modal-box {
	transition: opacity .2s ease, transform .2s ease;
	position: relative;
	z-index: 1051;
	width: 100%;
	outline: 0;
	transform: translateY(8px);
	opacity: 0;
}

html.lo body {
	overflow: hidden;
}

html.lo .modal-box {
	transform: translateY(0);
	opacity: 1;
}

.modal-head {
	height: 0;
	display: flex;
	justify-content: flex-end;
}

.modal-cont {
	padding-top: 48px;
}

.modal-title {
	font-size: var(--fs-xl);
	font-weight: bold;
	line-height: 1.3;
	margin-bottom: 24px;
}

.modal-close {
	padding: 8px;
	width: 40px;
	height: 40px;
	margin: 8px;
	cursor: pointer;
	opacity: .5;
	transition: var(--opacity-animation);
}

@media (min-width: 992px) {
	.modal-close:hover {
		opacity: .7;
	}
}

.modal-backdrop {
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 1040;
	background-color: #000;
}

.modal-backdrop.fade {
	opacity: 0;
}

.modal-backdrop.in {
	opacity: .3;
}

@media (max-width: 459px) {
	.modal {
		background-color: var(--page-bg);
	}
}

@media (min-width: 460px) {
	.modal-out {
		display: flex;
		align-items: center;
		justify-content: center;
		position: relative;
		pointer-events: none;
		margin: 0 auto;
		min-height: 100%;
		padding: 32px 16px;
	}

	.modal-box {
		pointer-events: auto;
		max-width: 380px;
		border-radius: var(--modal-radius);
		background-color: var(--page-bg);
	}

	html.lo .modal .modal-over {
		opacity: .5;
	}

	.modal-over {
		position: fixed;
		top: 0;
		bottom: 0;
		right: 0;
		left: 0;
		background-color: #000;
		opacity: 0;
		transition: opacity .4s ease;
		pointer-events: auto;
	}
}

/* - Login - */
.login-form {
	padding: var(--gap);
	padding-top: 0;
}

.login-lost-link {
	margin-top: 24px;
}

.login-lost-link a {
	padding: 8px 0;
}

.login-social {
	background-image: linear-gradient(to right, transparent 50%, rgba(var(--primary-color-rgb), .1) 50%);
	background-size: 4px 10px;
	background-position: 0 0;
	background-repeat: repeat-x;

	padding: var(--gap);
	padding-top: calc(var(--gap) + 10px);
}

.login-social-title {
	font-size: var(--fs-lg);
	margin-bottom: 16px;
}

.login-social-list {
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	gap: 16px;
}

.soc-item {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 44px;
	padding: 6px;
	border-radius: 6px;
	overflow: hidden;
	position: relative;
	z-index: 1;
}

.soc-item svg {
	width: 32px;
	height: 32px;
	position: relative;
	z-index: 1;
}

.soc-item::after {
	content: "";
	border-radius: inherit;
	position: absolute;
	left: 0;
	top: 0;
	right: 0;
	bottom: 0;
	z-index: -1;
	opacity: .1;
	transition: var(--opacity-animation);
}

.soc-item:hover::after {
	opacity: .2;
}

.soc-yandex {
	color: #FC3F1D !important;
}

.soc-vk {
	color: #0277FF !important;
}

.soc-ok {
	color: #F77B20 !important;
}

.soc-mail {
	color: #015FF9 !important;
}

.soc-yandex::after {
	background-color: #FC3F1D;
}

.soc-vk::after {
	background-color: #0277FF;
}

.soc-ok::after {
	background-color: #F77B20;
}

.soc-mail::after {
	background-color: #015FF9;
}

.soc-google::after {
	background-color: #A1A1B5;
}