/* ==========================================================================
   Форма обмена на главной (helicorx-style): main_small_form / main_long_form / main_popup
   ========================================================================== */

.form-main {
	position: relative;
	display: block;
	background-color: #1c2029;
	border-radius: 12px;
	padding: 30px;
}

.form-main__head {
	margin: 0 0 24px 0;
}

.form-main__title {
	color: #dedede;
	font-size: 20px;
	font-weight: 700;
	line-height: 26px;
	margin: 0 0 4px 0;
}

.form-main__subtitle {
	color: #7d8189;
	font-size: 14px;
	font-weight: 300;
}

.form-main__top {
	display: block;
}

.form-main__field {
	margin: 0 0 20px 0;
}

.form-main__field:last-child {
	margin-bottom: 0;
}

.form-main__label {
	color: #dedede;
	font-size: 14px;
	font-weight: 600;
	margin: 0 0 10px 0;
}

.form-main__wallet-coin {
	color: #ff9500;
	font-weight: 600;
}

/* Строка "сумма + валюта" в одном визуальном поле */
.form-main__control {
	display: flex;
	align-items: stretch;
	background-color: #262c35;
	border-radius: 5px;
}

.form-main__control .form-main__amount.input {
	flex: 1 1 auto;
	width: auto;
	min-width: 0;
	background-color: transparent;
	color: #dedede;
	font-weight: 300;
	border-radius: 5px 0 0 5px !important;
}

.form-main__control .form-main__amount.input.err {
	color: #ff5252;
}

.form-main__control .form-main__amount.input[readonly] {
	color: #9aa0aa;
	cursor: default;
}

.form-main__control .form-main__currency {
	flex: 0 0 190px;
	width: 190px;
}

.form-main__control .select-block {
	height: 100%;
}

.form-main__control .select {
	height: 100%;
}

.form-main__control .select .select-title {
	height: 100%;
	background-color: transparent;
	border-radius: 0 5px 5px 0;
}

.form-main__control .select .select-title__value {
	color: #dedede;
	font-weight: 500;
}

.form-main__control .select .select-title__value:before {
	background-color: #3a4150;
}

.form-main__error {
	color: #ff5252;
	font-size: 12px;
	line-height: 16px;
	margin-top: 8px;
	min-height: 0;
}

/* Дополнительные поля, которые "выезжают" при фокусе на верхнюю часть формы */
.form-main__extra {
	max-height: 0;
	overflow: hidden;
	opacity: 0;
	transition: max-height 0.35s ease, opacity 0.35s ease, margin 0.35s ease;
	margin-top: 0;
}

.form-main--expanded .form-main__extra {
	max-height: 600px;
	opacity: 1;
	margin-top: 20px;
}

.form-main__row2 {
	display: flex;
	margin: 0 -8px;
}

.form-main__row2 .form-main__col2 {
	flex: 1 1 50%;
	max-width: 50%;
	padding: 0 8px;
}

.form-main__agree {
	display: block;
	position: relative;
	margin: 16px 0 24px 0;
	font-size: 13px;
	line-height: 18px;
	color: #bdbdbd;
}

.form-main__agree:before {
	top: 50%;
	margin-top: -10px;
}

.form-main__agree a {
	color: #ff9500;
}

.form-main__submit {
	/* в свёрнутом виде кнопка сразу после поля "Получаете" (margin-bottom у него обнулён) — нужен свой отступ */
	margin-top: 24px;
}

.form-main--expanded .form-main__submit {
	/* в развёрнутом виде перед кнопкой уже есть чекбокс со своим нижним отступом */
	margin-top: 4px;
}

/* Подсветка обязательных полей красным, когда они пустые/невалидные */
.form-main .input.err {
	color: #dedede;
	box-shadow: inset 0 0 0 1px #ff5252;
}

.form-main .form-main__control:has(.input.err) {
	box-shadow: inset 0 0 0 1px #ff5252;
}

.form-main .check.err:before {
	border: 1px solid #ff5252;
}

@media (max-width: 767.98px) {
	.form-main {
		padding: 20px;
		border-radius: 10px;
	}
	.form-main__control .form-main__currency {
		flex-basis: 150px;
		width: 150px;
	}
	.form-main__row2 {
		flex-wrap: wrap;
		margin: 0;
	}
	.form-main__row2 .form-main__col2 {
		max-width: 100%;
		flex-basis: 100%;
		padding: 0;
		margin-bottom: 10px;
	}
}

@media (max-width: 479.98px) {
	.form-main__control {
		flex-wrap: wrap;
	}
	.form-main__control .form-main__amount.input {
		flex-basis: 100%;
		width: 100%;
	}
	.form-main__control .form-main__currency {
		flex-basis: 100%;
		width: 100%;
	}
}

/* ==========================================================================
   Иконки валют в кастомном селекте (main_popup.jpg)
   ========================================================================== */

.form-main .select .select-options-scroll {
	max-height: 320px;
}

.form-main .select .select-options {
	background-color: #262c35;
	z-index: 20;
	width: 320px;
	min-width: 320px;
	right: 0;
	left: auto;
}

@media (max-width: 479.98px) {
	.form-main .select .select-options {
		width: 100%;
		min-width: 100%;
		right: auto;
		left: 0;
	}
}

.form-main .select .select-options__value {
	color: #dedede;
}

.form-main .select .select-options__value:hover {
	background-color: #323a47;
	color: #fff;
}

@media (max-width: 767.98px) {
	.form-main .select .select-options-scroll {
		max-height: 260px;
	}
}

/*
	Каждая валюта — своя иконка (data-icon у <option> становится классом
	у .select-title__value / .select-options__value, см. js/main.js select()).
	Файлы иконок лежат в img/coins/. Чтобы добавить новую валюту — добавить
	<option data-icon="xxx"> в home.html и один блок правил здесь.
*/
.form-main .select-title__value.btc:after,
.form-main .select-options__value.btc:after { background-image: url("../img/coins/btc.svg"); }

.form-main .select-title__value.sol:after,
.form-main .select-options__value.sol:after { background-image: url("../img/coins/sol.svg"); }

.form-main .select-title__value.eth:after,
.form-main .select-options__value.eth:after { background-image: url("../img/coins/eth.svg"); }

.form-main .select-title__value.usdt:after,
.form-main .select-options__value.usdt:after { background-image: url("../img/coins/usdt.svg"); }

.form-main .select-title__value.usdc:after,
.form-main .select-options__value.usdc:after { background-image: url("../img/coins/usdc.svg"); }

.form-main .select-title__value.gram:after,
.form-main .select-options__value.gram:after { background-image: url("../img/coins/gram.svg"); }

.form-main .select-title__value.ada:after,
.form-main .select-options__value.ada:after { background-image: url("../img/coins/ada.svg"); }

.form-main .select-title__value.bnb:after,
.form-main .select-options__value.bnb:after { background-image: url("../img/coins/bnb.svg"); }

.form-main .select-title__value.trx:after,
.form-main .select-options__value.trx:after { background-image: url("../img/coins/trx.svg"); }

.form-main .select-title__value.dai:after,
.form-main .select-options__value.dai:after { background-image: url("../img/coins/dai.svg"); }

.form-main .select-title__value.xrp:after,
.form-main .select-options__value.xrp:after { background-image: url("../img/coins/xrp.svg"); }

.form-main .select-title__value.xmr:after,
.form-main .select-options__value.xmr:after { background-image: url("../img/coins/xmr.svg"); }

.form-main .select-title__value.doge:after,
.form-main .select-options__value.doge:after { background-image: url("../img/coins/doge.svg"); }

/* у иконок в списке (в отличие от заголовка) нет правого разделителя — сдвигаем текст */
.form-main .select-options__value {
	padding-left: 47px;
}

/* ==========================================================================
   Страница оплаты / "Заявка удалена" (pay.html): pay_1280.jpg, delete_1280.jpg
   ========================================================================== */

.order-page {
	padding: 60px 0 100px 0;
}

.order-page__title {
	color: #dedede;
	font-size: 42px;
	font-weight: 700;
	margin: 0 0 20px 0;
}

.order-page__pair {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 10px;
	color: #bdbdbd;
	font-size: 16px;
	margin: 0 0 30px 0;
}

.order-page__pair-icon {
	width: 24px;
	height: 24px;
	display: inline-block;
	vertical-align: middle;
	background-position: center;
	background-size: contain;
	background-repeat: no-repeat;
	margin-right: 4px;
}

.order-page__pair-arrow {
	color: #5f6470;
}

.order-page__status {
	color: #dedede;
	font-size: 16px;
	margin-bottom: 20px;
}

.order-page__lock {
	margin-bottom: 40px;
}

.order-page__lock-title {
	color: #dedede;
	font-weight: 700;
	font-size: 16px;
	margin-bottom: 6px;
}

.order-page__lock-text {
	color: #bdbdbd;
	font-size: 14px;
	line-height: 20px;
}

.order-page__steps {
	position: relative;
}

.order-page__step {
	position: relative;
	display: flex;
	gap: 24px;
	padding-bottom: 40px;
}

.order-page__step:last-child {
	padding-bottom: 0;
}

.order-page__step:not(:last-child):before {
	content: '';
	position: absolute;
	left: 19px;
	top: 40px;
	bottom: 0;
	width: 1px;
	background-color: #2d333f;
}

.order-page__step-num {
	flex: 0 0 40px;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	border: 2px solid #545b6b;
	color: #dedede;
	display: flex;
	align-items: center;
	justify-content: center;
	font-weight: 700;
	font-size: 16px;
	background-color: #14171e;
	z-index: 1;
}

/* Шаг 1 — текущий активный шаг, выделяем заливкой (как в исходнике), 2 и 3 остаются просто с обводкой */
.order-page__step:first-child .order-page__step-num {
	background-color: #dedede;
	color: #171a21;
	border-color: #dedede;
}

.order-page__step-body {
	flex: 1 1 auto;
	min-width: 0;
}

.order-page__step-title {
	color: #dedede;
	font-size: 20px;
	font-weight: 700;
	margin: 6px 0 16px 0;
}

.order-page__step-text {
	color: #bdbdbd;
	font-size: 14px;
	line-height: 22px;
	margin-bottom: 16px;
}

.order-page__step-text a {
	color: #ff9500;
}

.order-page__waiting {
	display: flex;
	align-items: center;
	gap: 20px;
	background-color: #1c2029;
	border-radius: 10px;
	padding: 24px;
	margin-bottom: 24px;
}

.order-page__spinner {
	flex: 0 0 40px;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	border: 3px solid #3a4150;
	border-top-color: #ff9500;
	animation: order-spin 0.9s linear infinite;
}

@keyframes order-spin {
	to { transform: rotate(360deg); }
}

.order-page__waiting-text {
	color: #bdbdbd;
	font-size: 14px;
	line-height: 20px;
}

.order-page__field {
	margin-bottom: 24px;
}

.order-page__field-label {
	color: #dedede;
	font-size: 14px;
	font-weight: 600;
	margin-bottom: 10px;
}

.order-page__field-value {
	display: flex;
	align-items: center;
	gap: 10px;
	background-color: #1c2029;
	border-radius: 5px;
	padding: 16px 20px;
	color: #dedede;
	font-size: 16px;
	font-weight: 500;
	word-break: break-all;
}

.order-page__cancel {
	display: inline-block;
	width: auto;
	margin-bottom: 16px;
}

.order-page__deleted {
	display: flex;
	align-items: flex-start;
	gap: 20px;
}

.order-page__deleted-icon {
	flex: 0 0 40px;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background-color: #545b6b;
	color: #14171e;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 18px;
}

.order-page__pair-icon.order-page__wallet-icon {
	flex: 0 0 20px;
	width: 20px;
	height: 20px;
	background-color: #3a4150;
	border-radius: 4px;
	background-size: 12px;
}

.order-page__deleted-title {
	color: #dedede;
	font-size: 20px;
	font-weight: 700;
	margin: 6px 0 10px 0;
}

.order-page__deleted-text {
	color: #bdbdbd;
	font-size: 14px;
	line-height: 20px;
}

.order-page__deleted-text a {
	color: #ff9500;
}

.order-page.is-expired .order-page__active,
.order-page:not(.is-expired) .order-page__deleted-wrap {
	display: none;
}

@media (max-width: 767.98px) {
	.order-page {
		padding: 30px 0 60px 0;
	}
	.order-page__title {
		font-size: 26px;
	}
	.order-page__waiting {
		flex-direction: column;
		align-items: flex-start;
	}
}

/* ==========================================================================
   FAQ (faq.html): раньше стрелочка "развернуть" показывалась только у тех
   вопросов, чей ответ не помещался в одну строку — выглядело непоследовательно
   (у части карточек стрелка есть, у части нет). Показываем все ответы сразу
   целиком и убираем стрелочку/сворачивание для этой страницы.
   ========================================================================== */

.body-reviews__item:has(.body-reviews__title_news) {
	padding-right: 26px;
}

.body-reviews__item:has(.body-reviews__title_news) .body-reviews__text {
	max-height: none;
	overflow: visible;
}

.body-reviews__item:has(.body-reviews__title_news) .body-reviews__btn {
	display: none;
}

/* ==========================================================================
   Страница 404 (404.html)
   ========================================================================== */

.error-page {
	padding: 100px 0;
	text-align: center;
}

.error-page__code {
	color: #ff9500;
	font-size: 140px;
	font-weight: 700;
	line-height: 1;
	margin-bottom: 10px;
}

.error-page__title {
	color: #dedede;
	font-size: 28px;
	font-weight: 700;
	margin-bottom: 12px;
}

.error-page__text {
	color: #bdbdbd;
	font-size: 15px;
	margin-bottom: 30px;
}

.error-page__btn {
	display: inline-block;
	padding: 0 40px;
}

@media (max-width: 767.98px) {
	.error-page {
		padding: 60px 0;
	}
	.error-page__code {
		font-size: 90px;
	}
	.error-page__title {
		font-size: 22px;
	}
}