/* ====================================================================================================================================================================== */
/* Импортируем шрифты */

@import url('https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&display=swap');

/* ====================================================================================================================================================================== */

/* ====================================================================================================================================================================== */
/* Блок глобальных переменных страницы */

:root {

	/* Переменные цвета */
	/* Переменные цвета */
	--primary-accent: rgba(40, 71, 145, 1);
	--primary-gradient-blue: linear-gradient(348deg, #007BFF 0%, #284791 84%);
	--primary-gradient-white: linear-gradient(90deg, #fdfdfd, #fdf4ff);
	--blue-extralight: rgba(240, 233, 255, 1);


}

/* Конец глобальных блока переменных страницы */
/* ====================================================================================================================================================================== */

/* ====================================================================================================================================================================== */
/* Блок сброса стилей + стартовые стили для всей страницы */

* {
	padding: 0px;
	margin: 0px;
}

*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	font-size: 16px;
	font-family: "Lato", sans-serif;
}

body {
	height: 100svh;
}

/* ССылки */

a,
a:link,
a:visited {
	text-decoration: none;
}

a:hover {
	text-decoration: none;
}

/* Основные */

aside,
nav,
footer,
header,
section,
main {
	display: block;
}

ul,
ul li {
	list-style: none;
}

img {
	vertical-align: top;
}

img,
svg {
	max-width: 100%;
	height: auto;
}

address {
	font-style: normal;
}

/* Формы */

input,
textarea,
button,
select {
	background-color: transparent;
	color: inherit;
	font-family: inherit;
	font-size: inherit;
}

input::-ms-clear {
	display: none;
}

button,
input[type="submit"] {
	background-color: transparent;
	background: none;
	box-shadow: none;
	cursor: pointer;
	display: inline-block;
}

input:focus,
input:active,
button:focus,
button:active {
	outline: none;
}

button::-moz-focus-inner {
	border: 0;
	padding: 0;
}

label {
	cursor: pointer;
}

legend {
	display: block;
}

input[type='file'] {
	max-width: 100%;
}

/* Конец блока сброса стилей */
/* ====================================================================================================================================================================== */



/* ====================================================================================================================================================================== */
/* Блок основных стилей страницы */

/* Контейнеры */

.container {
	width: 90svw;
	height: 100%;
	margin: 0 auto;
}

.wrapper {
	display: flex;
	flex-direction: column;
	width: 100%;
	min-height: 100%;
	background: var(--primary-gradient-white);
	/* color: var(--blue-extralight); */
}

/* ====================================================================================================================================================================== */
/* начало блок header */

.header {
	padding: 1.5rem 0;
	background-color: var(--primary-accent);
	color: var(--blue-extralight);
}

.header__flex-container {
	display: flex;
	align-items: center;
	justify-content: space-between;
	column-gap: 3rem;

	width: 100%;
}

.header a {
	color: var(--blue-extralight);
}

.header a:hover {
	color: #fff;
	transform: scale(1.01);
}

.header a:active {
	transform: translateY(1px);
}

.header__logo-block {
	display: flex;
	align-items: center;
	column-gap: 1rem;
}

.header__logo-block span {
	font-size: 1.25rem;
}

.header__logo-wrapper {
	width: 3rem;
	height: 3rem;
}

.header__logo {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Конец блока header */
/* ====================================================================================================================================================================== */

/* ====================================================================================================================================================================== */
/* Main блок */

main {
	padding: 2rem 0;

	flex: 1 0 auto;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 1rem;
}

@keyframes fadeIn {
	0% {
		opacity: 0;
		transform: translateY(10px);
	}

	100% {
		opacity: 1;
		transform: translateY(0);
	}
}

.page-title {
	opacity: 0;
	transform: translateY(10px);
	animation: fadeIn 1s ease-out forwards;
	text-align: center;
	font-size: 2rem;
	margin-bottom: 2.5rem;
	color: var(--primary-accent);
}

/* Конец main блока */
/* ====================================================================================================================================================================== */

/* ====================================================================================================================================================================== */
/* Начало блока формы payment-form */

.payment-form {
	display: flex;
	justify-content: center;
	border-radius: 16px;
	box-shadow: 0 4px 10px rgba(0, 0, 0, 0.294);
	flex: 1 0 auto;
	width: 80%;
}

.form-container {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	width: 60%;
	row-gap: 2rem;
	height: 100%;
	padding: 2rem 0;
}

.payment-label {
	display: flex;
	flex-direction: column;
	row-gap: 0.4rem;
	width: 100%;
	color: var(--primary-accent);
}

.payment-label input {
	border-radius: 10px;
	padding: 0.8rem;
	border: none;
	background: var(--primary-accent);
	color: var(--blue-extralight);
	box-shadow: 0 4px 10px rgba(0, 0, 0, 0.294);
}

.self-payment {
	align-self: flex-start;
	color: var(--primary-accent);
}

.payment-label input::placeholder {
	color: #fff;
	opacity: 1;
}

.payment-label input::-moz-placeholder,
.payment-label input:-moz-placeholder {
	color: #fff;
	opacity: 1;
}

.payment-label input:-ms-input-placeholder {
	color: #fff;
	opacity: 1;
}

.payment-label input::-webkit-input-placeholder {
	color: #fff;
	opacity: 1;
}

/* Конец блока формы payment-form */
/* ====================================================================================================================================================================== */


/* Конец блока основных стилей страницы */
/* ====================================================================================================================================================================== */



/* ====================================================================================================================================================================== */
/* Стиль кнопок для этой страницы (платежей) */

.payment-btn {
	display: inline-block;
	background-color: var(--primary-accent);
	padding: 12px 16px;
	border-radius: 8px;
	color: #ffffff;
	letter-spacing: 0.15px;
	font-size: 16px;
	font-weight: 500;
	line-height: normal;
	position: relative;
	overflow: hidden;
	border: none;
	cursor: pointer;
	transition: transform 0.2s ease, box-shadow 0.3s ease;
}

.payment-btn::before {
	content: "";
	position: absolute;
	z-index: 0;
	top: 0;
	left: -100%;
	width: 100%;
	height: 100%;
	background: linear-gradient(120deg, transparent, rgba(255, 255, 255, 0.4), transparent);
	transition: left 0.65s ease;
	pointer-events: none;
}

.payment-btn:hover::before {
	left: 100%;
}

.payment-btn:hover {
	box-shadow: 1px 1px 15px 3px rgba(40, 71, 145, 0.834);
}

.payment-btn:active {
	transform: scale(0.9);
	background-color: var(--primary-accent);
	box-shadow: 0 2px 25px rgba(40, 71, 145, 0.834);
}

/* Конец стилей кнопки */
/* ====================================================================================================================================================================== */



/* ====================================================================================================================================================================== */
/* Вспомогательные классы */

.hidden {
	display: none;
}

.horizontal-line {
	width: 100%;
	height: 1px;

	box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;

	background-color: rgba(0, 0, 0, 0.24);
}

.horizontal-line:last-child {
	display: none;
}

.vertical-line {
	height: 100%;
	width: 1px;

	box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;

	background-color: rgba(0, 0, 0, 0.24);
}

/* Конец Вспомогательных классов */
/* ====================================================================================================================================================================== */




/* ====================================================================================================================================================================== */
/* начало Адаптива */

/* ====================================================================================================================================================================== */
/* Breakpoint 1024px Ноутбук */

/* Конец Breakpoint 1024px Ноутбук */
/* ====================================================================================================================================================================== */


/* ====================================================================================================================================================================== */
/* Breakpoint 768px Планшет  */

@media screen and (max-width: 769px) {

	/* header */

	.header__flex-container {
		column-gap: 2rem;
	}

	.header__logo-block span {
		font-size: 1.10rem;
	}

	.header__logo-wrapper {
		width: 2.5rem;
		height: 2.5rem;
	}

	/* конец header */

	/* main */

	.page-title {
		font-size: 1.5rem;
	}

	.payment-form {
		width: 90%;
	}

	.form-container {
		width: 80%;
	}

	/* конец main */

}

/* Конец Breakpoint 768px Планшет */
/* ====================================================================================================================================================================== */

/* ====================================================================================================================================================================== */
/* Breakpoint Мобилки */

@media screen and (max-width: 600px) {


	/* header */

	.header__flex-container {
		row-gap: 1rem;
		flex-direction: column;
	}

	.header__logo-block span {
		font-size: 1.06rem;
	}

	.header__logo-wrapper {
		width: 2.2rem;
		height: 2.2rem;
	}

	/* конец header */

	/* main */

	.page-title {
		font-size: 1.2rem;
		margin-bottom: 1.2rem;
	}

	.form-container {
		padding: 1rem 0;
		row-gap: 1rem;
	}

	/* конец main */

}

/* Конец Мобилки */
/* ====================================================================================================================================================================== */


/* Конец Адаптива */
/* ====================================================================================================================================================================== */