@font-face {
	font-family: 'TT Moons';
	font-style: normal;
	font-weight: 700;
	src: local('TT Moons'), url('https://alexeymarkov.ru/order/fonts/TT_Moons_Bold.woff') format('woff');

}



body {
	background: transparent !important;
	color: #262626;
	font-family: "PT Serif", serif;
	position: relative;
	min-height: 100vh;
}

.headwidth,
.contentwidth {
	max-width: 1200px;
	width: 100%;
	margin-left: auto;
	margin-right: auto;
}

header a:focus,
header a:focus-visible {
	outline: none !important;
}

header a:focus-visible {
	outline: 2px solid #e0481a;
	outline-offset: 2px;
	border-radius: 4px;
}

.fixed-top {
	height: 68px;
	padding: 20px;
}

@media (max-width:480px) {
	.fixed-top {
		padding-left: 0px;
		padding-right: 0px;
		padding-top: 12px;
		padding-bottom: 12px;
	}
}


.rightcard {
	padding: 20px !important;
}






.bought-state .rightcol {
	margin-left: 20px;
	max-width: 480px;
	width: 100%;
	padding-top: 32px;
	padding-bottom: 20px;
}

@media (max-width:480px) {
	.bought-state .rightcol {
		padding-top: 16px;
		margin-left: 16px;
		margin-right: 16px;
		padding-bottom: 16px;
		width: auto;
	}
}

.background-texture {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	pointer-events: none;
	z-index: -1;
	background: #f5f0e6 url("../img/background.png") repeat;
	mix-blend-mode: luminosity;
}

.author {
	font-family: "TT Moons", sans-serif;
	font-weight: 700;
	font-size: 28px;
	line-height: 100%;
	padding: 0;
	margin: 0;
}

.gap-4 {
	gap: 20px !important;
}

.text-success {
	color: #262626 !important;
}

.text-danger {
	color: #E0481A !important;
}



.main-wrapper {
	margin-top: 68px;
}

.page-title {
	padding-top: 80px;
	position: relative;
}

.page-title-sold {
	padding-top: 80px;
	position: relative;
}

@media (max-width: 480px) {
	.page-title-sold {
		padding-top: 32px;
		position: relative;
	}
}

span.itemsold {
	display: inline-block;
	font-weight: 400;
	font-size: 20px;
	line-height: 24px;
	padding-bottom: 64px;
	max-width: 500px;
	width: 100%;
}

@media (max-width: 480px) {
	span.itemsold {
		padding-bottom: 40px;
	}
}


@media (max-width: 480px) {
	span.itemsold {
		font-weight: 400;
		font-size: 16px;
		line-height: 20px;
	}
}

h1.itemsold {
	padding-bottom: 20px;
}

.clienttext {
	padding-bottom: 32px;
}


.clientsoldtext1 {
	font-size: 28px;
	line-height: 36px;
	font-weight: 700;
	padding-bottom: 4px;
}





.clientsoldtext2 {
	display: inline-block;
	font-size: 20px;
	line-height: 24px;
	font-weight: 400;
	max-width: 546px;
	width: 100%;
}


@media (max-width: 480px) {
	.clientsoldtext1 {
		font-size: 24px;
		line-height: 28px;
		font-weight: 700;
	}

	.clientsoldtext2 {
		font-size: 16px;
		line-height: 20px;
		font-weight: 400;
	}
}


.arrow-wrapper {
	position: absolute;
	top: 160px;
	left: 310px;
}

@media (max-width: 576px) {
	.arrow-wrapper {
		position: absolute;
		top: 60px;
		left: 330px;
	}
}

@media (max-width: 576px) {
	.page-title {
		padding-top: 32px;
		padding-left: 16px;
		padding-right: 16px;
	}
}

.info-section-text {
	font-family: "TT Moons", sans-serif;
	font-weight: 700;
	font-size: 40px;
	line-height: 110%;
	letter-spacing: 0;
	padding: 0;
	margin: 0;
}

@media (max-width: 576px) {
	.info-section-text {
		font-family: "TT Moons", sans-serif;
		font-weight: 700;
		font-size: 32px;
		line-height: 110%;
		letter-spacing: 0;
		padding: 0;
		margin: 0;
	}
}

@media (max-width: 480px) {
	.info-section-text br {
		display: none;
	}
}

.cover-wrapper {
	width: 220px;
	height: 260px;
	background: #f2ede1;
	border: 1px solid #c2beb4;
}

.cover-wrapper-sell {
	width: 320px;
	height: 420px;
	background: #f2ede1;
	border: 1px solid #c2beb4;
}



.book-image-card-sell {
	width: 196px;
	height: 320px;
	object-fit: cover;
}

.card-bookname-sell {
	font-size: 28px;
	line-height: 36px;
	font-weight: 400;
}



@media (max-width: 480px) {
	.cover-wrapper-sell {
		width: 110px;
		height: 156px;
	}

	.book-image-card-sell {
		width: 86px;
		height: 140px;
		object-fit: cover;
	}

	.card-bookname-sell {
		font-size: 16px;
		line-height: 20px;
		font-weight: 400;
	}
}


.cart-sell {
	padding-bottom: 64px;
	gap: 20px;
}

@media (max-width: 480px) {
	.cart-sell {
		padding-bottom: 32px;
	}

}

.book-image-card {
	width: 134px;
	height: 220px;
	object-fit: cover;
}



.cart-count {
	font-weight: 700;
	font-size: 28px;
	line-height: 36px;
	color: #262626;
	padding-top: 40px;
	padding-bottom: 20px;
	margin-bottom: 0;
}

@media (max-width:480px) {
	.cart-count {
		font-weight: 700;
		font-size: 24px;
		line-height: 28px;
		color: #262626;
		padding-top: 32px;
		padding-bottom: 20px;
		margin-bottom: 0;
	}
}

.cart-body {
	padding: 20px;
}

@media (max-width: 480px) {
	.cart-body {
		padding: 12px;
	}
}


@media (max-width: 480px) {
	.bought-state .cart-body {
		padding: 12px;
	}
}

.gap-custom {
	gap: 20px;
}

@media (max-width: 575.98px) {
	.gap-custom {
		gap: 16px;
	}
}



.remove-btn {
	width: 56px;
	height: 56px;
	border-radius: 48px;
	background-color: #f5f2ec;
	border: none;
	padding: 12px;
	justify-content: center;
	align-items: center;
}

.remove-btn:hover {
	background-color: #e8e3d7;
}

.remove-btn-mobile {
	color: #727272;
	font-weight: 400;
	font-size: 14px;
	line-height: 18px;
	cursor: pointer;
}

.card-bookname {
	font-size: 20px;
	line-height: 24px;
}

.card-price {
	font-size: 24px;
	font-weight: 700;
	line-height: 28px;
}

.cart-conf {
	padding-bottom: 80px;
	gap: 20px;
}

/* Если родитель имеет класс empty-state */
.empty-state .cart-conf {
	padding-bottom: 60px;
}

@media (max-width: 576px) {
	.cart-conf {
		padding-bottom: 32px;
		gap: 8px;
	}
}

@media (max-width: 767.98px) {
	.cover-wrapper {
		width: 110px !important;
		height: 156px !important;
	}

	.book-image-card {
		width: 86px !important;
		height: 140px !important;
		object-fit: cover;
	}

	.card-bookname {
		font-size: 16px;
		line-height: 20px;
	}

	.card-price {
		font-size: 20px;
		font-weight: 700;
		line-height: 24px;
	}
}

.payment-options {
	padding-top: 32px;
}

.bought-state .payment-options {
	padding-top: 20px;
}

@media (max-width:480px) {
	.bought-state .payment-options {
		padding-top: 16px;
	}
}

/* Стили для кнопок скачивания в блоке sell */
.sell-buttons {
	min-width: 200px;
}


.sell-buttons-mobile {
	padding-top: 16px;
}

.sell-buttons-desktop {
	padding-top: 20px;
}

.btn-sell-download {
	width: 200px;
	height: 36px;
	border: none;
	font-size: 20px;
	font-weight: 700;
	line-height: 100%;
	cursor: pointer;
	display: flex;
	align-items: center;
	/* по вертикали */
	justify-content: center;
	/* по горизонтали */
	color: white;
	text-transform: uppercase;
}


.btn-sell-pdf {
	background-color: #E0481A;
}

.btn-sell-epub {
	background-color: #E0481A;
}


.btn-sell-pdf:hover {
	background-color: #C3370D;
}

.btn-sell-epub:hover {
	background-color: #C3370D;
}

@media (max-width: 480px) {

	.btn-sell-download {
		width: 100%;
		height: 32px;
		font-size: 16px;
		line-height: 100%;
		font-weight: 700;
	}
}


.related {
	background: #f2ede1;
	border: 1px solid #c2beb4;
	border-radius: 0;
	box-shadow: none;
	font-family: "PT Serif", serif;
}

.related .heading-text h3 {
	font-size: 28px;
	line-height: 36px;
	font-weight: 700;
}

.related .heading-text h3 .strike {
	position: relative;
	display: inline-block;
}

.related .heading-text h3 .strike::after {
	content: '';
	position: absolute;
	left: 0;
	right: 0;
	top: 57%;
	height: 2px;
	background-color: #262626;
	transform: translateY(-50%);
}





@media (max-width: 576px) {
	.related .heading-text h3 {
		font-size: 24px;
		line-height: 28px;
	}
}

@media (max-width: 576px) {
	.related .heading-text {
		/* white-space: nowrap; */
		overflow: hidden;
		text-overflow: ellipsis;
	}
}


.related .heading-text p {
	font-size: 20px;
	line-height: 24px;
}

@media (max-width: 576px) {
	.related .heading-text p {
		font-size: 16px;
		line-height: 20px;
	}
}

.related .card-body {
	padding-top: 14px;
	padding-left: 20px;
	padding-right: 20px;
	padding-bottom: 14px;
}

@media (max-width: 576px) {
	.related .card-body {
		padding: 16px;
	}
}

.related .nav-btn {
	width: 56px;
	height: 56px;
	border-radius: 50%;
	border: none;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0;
}

.related .nav-btn.prev {
	background: #ffffff;
	opacity: 0.5;
}

.related .nav-btn.next {
	background: #fff;
}


.related .nav-btn.prev:hover {
	background: #FCFBF9;
	opacity: 0.5;
}

.related .nav-btn.next:hover {
	background: #FCFBF9;
}


.mobile-br {
	display: inline;
}

@media (max-width: 480px) {
	.mobile-br {
		display: block;
	}
}

.related .nav-btn.next.inactive {
	background: #ffffff;
	opacity: 0.5;
}

.related .nav-btn.next.inactive svg path {
	fill: #adadad !important;
}

.related .nav-btn.prev.active {
	background: #fcfbf9;
	opacity: 1;
}

.related .nav-btn.prev.active svg path {
	fill: #262626 !important;
}

.related-books {
	gap: 12px !important;
	padding-top: 32px;
}

@media (max-width: 576px) {
	.related-books {
		gap: 12px !important;
		padding-top: 16px;
	}
}

.related-books::-webkit-scrollbar {
	display: none;
}

.related .book {
	width: 200px;
	/*height: 448px;*/
	background: transparent;
	padding: 0;
	text-align: left;
	display: flex;
	flex-direction: column;
	position: relative;
}

.related .book img {
	width: 100%;
	height: 240px;
	object-fit: contain;
	padding: 20px;
	background: #e8e3d7;
	flex-grow: 0;
	flex-shrink: 0;
}

.related .book-content {
	flex-grow: 1;
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
}

@media (max-width:480px) {
	.bought-state .related .book-content {
		padding-top: 16px;
	}
}


.related .book h4 {
	font-size: 16px;
	line-height: 20px;
	font-weight: 700;
	margin: 0 0 4px 0;
}

.related .book p {
	font-size: 16px;
	line-height: 20px;
	margin: 0;
	/*min-height: 40px; */
	flex-grow: 1;
}


.related .book .shortpar {
	max-width: 180px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.empty-state .related .book .shortpar {
	max-width: none;
	white-space: normal;
	overflow: visible;
	text-overflow: clip;
}


.bought-state .related .book .shortpar {
	max-width: none;
	white-space: normal;
	overflow: visible;
	text-overflow: clip;
}

@media (max-width:480px) {
	.bought-state .related .book .shortpar {
		max-width: 180px;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}
}



@media (max-width:480px) {
	.empty-state .related .book .shortpar {
		max-width: 180px;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}
}


.related .price {
	font-size: 24px;
	font-weight: 700;
	/*margin-top: 20px;*/
	line-height: 28px;
	padding-bottom: 8px;
}

@media (max-width: 576px) {
	.related .price {
		font-size: 20px;
		font-weight: 700;
		/*margin-top: 16px;*/
		line-height: 24px;
		padding-bottom: 8px;
	}
}

.parheight {
	height: 20px;

}

@media (max-width:480px) {
	.parheight {
		height: 16px;
	}
}


.titleinfo {
	height: 84px;
}

.bought-state .titleinfo {
	height: 64px;
}


.empty-state .titleinfo {
	height: 64px;
}

@media (max-width:480px) {
	.empty-state .titleinfo {
		height: 84px;
	}
}

.related .btn-add {
	margin-top: auto !important;
	height: 48px;
	border: none;
	border-radius: 0;
	padding: 4px 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 2px;
}

.related .btn-add {
	background: #ffffff;
	transition: background 0.25s ease;
}

.related .btn-add span {
	color: #e0481a;
	font-size: 20px;
	line-height: 100%;
	font-weight: 700;
}

.related .btn-add small {
	color: #262626;
	font-weight: 400;
	font-size: 16px;
	line-height: 18px;
}

.related .btn-add:hover {
	background: #e0481a;
}

.related .btn-add:hover span,
.related .btn-add:hover small {
	color: #ffffff;
}

.related .btn-add,
.related .btn-add span,
.related .btn-add small {
	transition: all 0.25s ease;
}

.related .book.added .btn-add {
	background: #e0481a;
	pointer-events: none;
}

.related .book.added span {
	color: #ffffff;
	font-weight: 700;
	font-size: 20px;
	line-height: 100%;
}

.related .book-cover {
	position: relative;
	display: block;
	margin-bottom: 20px;
}

@media (max-width: 576px) {
	.related .book-cover {
		position: relative;
		display: block;
		margin-bottom: 16px;
	}
}

.related .book-cover img {
	width: 100%;
	height: 240px;
	object-fit: contain;
	padding: 20px;
	background: #e8e3d7;
	display: block;
}

.related .book.added .book-cover img {
	background: #262626;
}

.bought-state .book.added .book-cover {
	background: #262626;
}

.bought-state .book.added .book-cover img {
	filter: none;
}

.related .book.added .book-cover::before {
	content: "";
	position: absolute;
	top: 8px;
	left: 8px;
	width: 36px;
	height: 36px;
	background: #E0481A;
	border-radius: 50%;
	z-index: 10;
	background-image: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M19.0087 7.10226L8.97745 17.1335C8.74305 17.3677 8.42523 17.4993 8.09385 17.4993C7.76248 17.4993 7.44466 17.3677 7.21026 17.1335L1.61495 11.5085C1.38094 11.2741 1.24951 10.9565 1.24951 10.6253C1.24951 10.2941 1.38094 9.97646 1.61495 9.7421L3.17745 8.1796C3.41172 7.94631 3.72887 7.81533 4.05948 7.81533C4.39009 7.81533 4.70724 7.94631 4.94151 8.1796L8.1251 11.2671L15.6845 3.80069C15.9188 3.56716 16.2361 3.43604 16.5669 3.43604C16.8977 3.43604 17.215 3.56716 17.4493 3.80069L19.0079 5.32726C19.1251 5.44341 19.2182 5.58162 19.2817 5.73391C19.3452 5.88621 19.378 6.04958 19.3781 6.21459C19.3781 6.37961 19.3455 6.543 19.2821 6.69536C19.2187 6.84771 19.1258 6.986 19.0087 7.10226Z' fill='white'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: center;
	background-size: 20px 20px;
	pointer-events: none;
}


/* Отключаем старый оранжевый кружок с галочкой ТОЛЬКО в bought-state */
.bought-state .related .book.added .book-cover::before {
	content: none !important;
	/* или можно display: none !important; — тоже сработает */
}

.related .book.discount-badge .book-cover::after {
	content: "+ скидка к заказу 100 ₽";
	position: absolute;
	left: 8px;
	bottom: 8px;
	width: 184px;
	height: 22px;
	background: #089f22;
	color: #ffffff;
	font: 700 14px/14px "PT Serif", serif;
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 5;
	pointer-events: none;
}


.related .book.added .btn-add {
	background: #e0481a;
	pointer-events: none;
	cursor: default;
}

.related .book.added .btn-add span {
	color: #ffffff;
	font-weight: 700;
	font-size: 20px;
	line-height: 100%;
}

.related .book.added .btn-add small {
	display: none;
}

.main-content-column {
	padding: 0;
	margin: 0;
}

@media (max-width: 576px) {
	.main-content-column {
		padding-left: 16px;
		padding-right: 16px;
	}
}

@media (max-width: 480px) {
	.main-content-column.col-lg-12.bought-state {
		padding: 0 !important;
	}
}


.empty-state .related {
	max-width: 1180px;
	margin: 0 auto;
	/*height: 634px;*/
}

@media (max-width: 576px) {
	.empty-state .related {
		margin: 0 auto;
		/*height: 528px;*/
		margin-bottom: 98px;
	}
}

.empty-state .card.related .card-body {
	padding: 20px;
}

@media (max-width:480px) {
	.empty-state .card.related .card-body {
		padding: 16px;
	}
}


.bought-state .related {
	max-width: 1180px;
}

.bought-state .related .card-body {
	padding: 20px;
}

@media (max-width:480px) {
	.bought-state .related .card-body {
		padding: 16px;
	}
}

.bought-state .related:has(.delivery-section) {
	margin-bottom: 140px;
}

.bought-state .related:has(.delivery-section.d-none) {
	margin-bottom: 140px;
}

@media (max-width: 576px) {
	.bought-state .related {
		margin: 0 auto;
	}

	.bought-state .related:has(.delivery-section) {
		margin-bottom: 64px;
	}

	.bought-state .related:has(.delivery-section.d-none) {
		margin-bottom: 64px;
	}

}





.empty-state .related .book-cover {
	height: 330px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: #e8e3d7;
	padding: 20px;
}

@media (max-width: 576px) {
	.empty-state .related .book-cover {
		height: 240px;
		display: flex;
		align-items: center;
		justify-content: center;
		background: #e8e3d7;
		padding: 20px;
	}
}

.empty-state .related .book-cover img {
	width: 152px;
	height: 250px;
	object-fit: contain;
	background: transparent;
	padding: 0;
	display: block;
}

@media (max-width: 576px) {
	.empty-state .related .book-cover img {
		width: 115px;
		height: 180px;
		object-fit: contain;
		background: transparent;
		padding: 0;
		display: block;
	}
}

.empty-state .related .book {
	width: 276px;
	/*height: 518px;*/
}

@media (max-width: 576px) {
	.empty-state .related .book {
		width: 200px;
		height: 424px;
	}
}

.related .book .btn-add.empty-cart-state {
	width: 134px !important;
	height: 36px !important;
	background-color: #e0481a;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	transition: background-color 0.2s ease;
}

.related .book .btn-add.empty-cart-state span {
	color: #ffffff !important;
	font-weight: 700 !important;
	font-size: 20px !important;
	line-height: 20px !important;
	text-align: center;
	white-space: nowrap;
}

.related .book .btn-add.empty-cart-state:hover {
	background-color: #C3370D;
}


.bought-state .related .book-cover {
	height: 330px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: #e8e3d7;
	padding: 20px;
}

@media (max-width: 576px) {
	.bought-state .related .book-cover {
		height: 240px;
		display: flex;
		align-items: center;
		justify-content: center;
		background: #e8e3d7;
		padding: 20px;
		margin: 0;
	}
}

.bought-state .related .book-cover img {
	width: 159px;
	height: 250px;
	object-fit: contain;
	background: transparent;
	padding: 0;
	display: block;
}

@media (max-width: 576px) {
	.bought-state .related .book-cover img {
		width: 115px;
		height: 180px;
		object-fit: contain;
		background: transparent;
		padding: 0;
		display: block;
	}
}

.bought-state .related .book {
	width: 276px;
	/*height: 506px;*/
}

@media (max-width: 576px) {
	.bought-state .related .book {
		width: 200px;
		/*height: 424px;*/
	}
}

.bought-state .related .book .btn-add.empty-cart-state {
	width: 134px !important;
	height: 36px !important;
	background-color: #e0481a !important;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	transition: background-color 0.2s ease;
}

.bought-state .related .book .btn-add.empty-cart-state span {
	color: #ffffff !important;
	font-weight: 700 !important;
	font-size: 20px !important;
	line-height: 20px !important;
	text-align: center;
	white-space: nowrap;
}

.bought-state .related .book.added .book-cover::after {
	content: "+ скидка к заказу 100 ₽";
	position: absolute;
	left: 8px;
	bottom: 8px;
	width: 184px;
	height: 22px;
	background: #089f22;
	color: #ffffff;
	font: 700 14px/14px "PT Serif", serif;
	text-align: center;
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 5;
	pointer-events: none;
}

/* Чекбокс вверху карточки книги */
.book-checkbox {
	position: absolute;
	top: 12px;
	left: 12px;
	z-index: 15;
}

.custom-checkbox {
	display: block;
	position: relative;
	cursor: pointer;
	user-select: none;
}

.custom-checkbox input {
	position: absolute;
	opacity: 0;
	cursor: pointer;
	height: 0;
	width: 0;
}

.checkmark {
	position: absolute;
	top: 0;
	left: 0;
	height: 32px;
	width: 32px;
	background-color: #ffffff;
	border: 1px solid #C2BEB4;
	transition: all 0.25s ease;
	display: flex;
	align-items: center;
	justify-content: center;
}

.custom-checkbox:hover input~.checkmark {
	background-color: #f5f5f5;
}

.custom-checkbox input:checked~.checkmark {
	background-color: #e0481a;
	border-color: #e0481a;
}

/* Убираем старый псевдоэлемент */
.checkmark:after {
	display: none;
}

/* Добавляем SVG через псевдоэлемент */
.custom-checkbox input:checked~.checkmark:before {
	content: '';
	display: block;
	width: 24px;
	height: 24px;
	background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M22.8105 8.52276L10.773 20.5603C10.4918 20.8413 10.1104 20.9992 9.71272 20.9992C9.31507 20.9992 8.93369 20.8413 8.65241 20.5603L1.93804 13.8103C1.65723 13.529 1.49951 13.1478 1.49951 12.7504C1.49951 12.353 1.65723 11.9718 1.93804 11.6906L3.81304 9.81557C4.09416 9.53562 4.47474 9.37845 4.87147 9.37845C5.26821 9.37845 5.64879 9.53562 5.92991 9.81557L9.75022 13.5206L18.8215 4.56088C19.1026 4.28065 19.4834 4.12329 19.8804 4.12329C20.2773 4.12329 20.6581 4.28065 20.9393 4.56088L22.8096 6.39276C22.9503 6.53214 23.0619 6.69799 23.1381 6.88075C23.2144 7.0635 23.2537 7.25954 23.2538 7.45756C23.2539 7.65558 23.2147 7.85165 23.1387 8.03447C23.0626 8.2173 22.9511 8.38325 22.8105 8.52276Z' fill='white'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: center;
}



.delivery-section {
	max-width: 479px;
	padding-top: 80px;
}

@media (max-width: 480px) {
	.delivery-section {
		padding-top: 64px;
	}
}

.bought-state .delivery-section {
	margin-left: 20px;
	padding-top: 12px;
}

@media (max-width:480px) {
	.bought-state .delivery-section {
		margin-left: 16px;
		margin-right: 16px;
	}
}



.delivery-header {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 4px;
	margin-bottom: 32px;
}

.delivery-title {
	margin: 0;
	font-weight: 700;
	font-size: 28px;
	line-height: 36px;
}

.delivery-title.dtwrong {
	color: #E0481A;
}


@media (max-width: 480px) {
	.delivery-title {
		margin: 0;
		font-weight: 700;
		font-size: 24px;
		line-height: 28px;
	}
}

.delivery-subtitle {
	margin: 0;
	font-weight: 400;
	font-size: 20px;
	line-height: 24px;
}



.delivery-form {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.delivery-label {
	font-weight: 700;
	font-size: 20px;
	line-height: 24px;
}

@media (max-width: 480px) {

	.delivery-subtitle,
	.delivery-label {
		font-size: 16px;
	}
}

.delivery-label.dtwrong {
	color: #E0481A;
}



.delivery-input-wrapper {
	display: flex;
	align-items: center;
	padding: 0 16px;
	gap: 8px;
	width: 100%;
	height: 56px;
	background: #ffffff;
	border: 1px solid #ffffff;
	box-sizing: border-box;
	transition: border-color 0.2s;
}

.delivery-input-wrapper:focus-within {
	border-color: #c2beb4;
}

.delivery-input {
	width: 100%;
	height: 100%;
	border: none;
	outline: none;
	font-size: 20px;
	background: transparent;
}

.delivery-hint {
	font-size: 16px;
	line-height: 20px;
	color: #262626;
}

@media (max-width: 480px) {
	.delivery-hint {
		font-size: 14px;
		line-height: 20px;
	}
}

=====.summary-wrapper .price-discount,
.summary-wrapper .promo-discount {
	font-size: 20px;
	line-height: 24px;
	font-weight: 400;
}

.summary-wrapper .text-discount,
.summary-wrapper .text-promo {
	font-size: 20px !important;
	line-height: 24px;
	font-weight: 400;
}


@media (max-width:480px) {

	.summary-wrapper .text-discount,
	.summary-wrapper .text-promo {
		font-size: 16px !important;
		line-height: 20px;
		font-weight: 400;
	}

}


.summary-wrapper .price-discount,
.promo-discount {
	font-size: 20px;
	line-height: 24px;
	font-weight: 700;
	color: #e0481a;
}

.pay-btn-figma {
	isolation: isolate;
	height: 56px;
	background: #e0481a;
	border: none;
	border-radius: 0px;
	font-weight: 700;
	font-size: 24px;
	line-height: 100%;
	color: #ffffff;
	padding: 16px 20px;
}

@media (max-width: 480px) {
	.pay-btn-figma {
		font-size: 20px;
		font-weight: 700;
		line-height: 100%;
	}
}

.pay-btn-figma:hover {
	background: #c3370d;
	height: 56px;
	border: none;
	border-radius: 0px;
	font-weight: 700;
	font-size: 24px;
	line-height: 100%;
	color: #ffffff;
	padding: 16px 20px;
}

@media (max-width: 480px) {
	.pay-btn-figma:hover {
		font-size: 20px;
		font-weight: 700;
		line-height: 100%;
	}
}

.promo-input {
	width: 100%;
	height: 56px;
	background: #f5f2ec;
	border: 1px solid #ffffff;
	border-radius: 0;
	padding: 0 16px;
	display: flex;
	align-items: center;
	position: relative;
	padding-right: 154px !important;
}

@media (max-width: 480px) {
	.promo-input {
		height: 48px;
	}
}

.promo-input input {
	width: 100%;
	height: 100%;
	background: transparent;
	border: none;
	outline: none;
	padding: 0;
	margin: 0;
	font-size: 20px;
	line-height: 24px;
	font-weight: 700;
	text-transform: uppercase;
	-webkit-appearance: none;
	-moz-appearance: textfield;
}

@media (max-width: 480px) {
	.promo-input input {
		font-size: 16px;
	}
}

.promo-input input::placeholder {
	color: #727272;
	font-weight: 400;
	text-transform: none;
	opacity: 1;
	transition: opacity 0.2s;
}

.promo-input:focus-within {
	border-color: #c2beb4;
}

.order-lines {
	display: flex;
	flex-direction: column;
	padding-top: 32px;
	padding-bottom: 32px;
}

.order-line {
	font-size: 20px;
	line-height: 24px;
	padding: 4px 0;
}

@media (max-width: 480px) {
	.order-line {
		font-size: 16px;
		line-height: 20px;
		padding: 4px 0;
	}
}


.order-line .price,
.order-lines .price-discount {
	font-size: 20px;
	line-height: 24px;
	font-weight: 400;
}




@media (max-width:480px) {
	.bought-state .order-lines {
		padding-top: 20px;
	}
}


.total-line {
	font-size: 28px;
	line-height: 36px;
	padding: 4px 0;
}

@media (max-width: 480px) {
	.total-line {
		font-size: 24px;
		line-height: 28px;
		padding: 4px 0;
	}
}

/*.dashed {
	flex: 1;
	border-bottom: 1px dashed #938f8c;
	margin: 0 12px;
	align-self: center;
	min-width: 20px;
}*/

.label,
.price,
.total-label,
.total-price {
	flex-shrink: 0;
	white-space: nowrap;
}

.disclaimer-figma {
	width: 100%;
	margin: 12px 0 0 0;
	padding: 0;
	font-family: "PT Serif", serif !important;
	font-weight: 400;
	font-style: normal;
	font-size: 14px;
	line-height: 18px;
	letter-spacing: 0;
	color: #727272;
	text-align: left;
}

.disclaimer-link {
	text-decoration: underline;
	color: inherit;
	/* чтобы цвет не менялся */
	cursor: pointer;
}



.promo-activated {
	padding-top: 8px;
	padding-bottom: 0px !important;
	margin: 0px;
	font-size: 16px;
	line-height: 20px;
	font-weight: 400;
}

.promo-btn {
	position: absolute;
	top: 50%;
	right: 12px;
	transform: translateY(-50%);
	height: 32px;
}

.promo-btn .apply {
	width: 130px;
	height: 32px;
	background: #ffffff;
	color: #e0481a;
	font-family: "PT Serif", serif;
	font-weight: 700;
	font-size: 16px;
	line-height: 32px;
	text-align: center;
	text-transform: uppercase;
	border: none;
	cursor: pointer;
}

.promo-btn .apply:hover {
	width: 130px;
	height: 32px;
	background: #e0481a;
	color: #ffffff;
	font-family: "PT Serif", serif;
	font-weight: 700;
	font-size: 16px;
	line-height: 32px;
	text-align: center;
	text-transform: uppercase;
	border: none;
	cursor: pointer;
}

.promo-btn .remove {
	width: 44px;
	height: 32px;
	background: #AEAAA2;
	color: #ffffff;
	font-size: 28px;
	font-weight: 300;
	line-height: 26px;
	border: none;
	cursor: pointer;
}

.promo-btn .remove:hover {
	background: #9A9790;
}

.promo-input.active {
	background: #e8e3d7 !important;
}

.sticker-figma {
	position: absolute;
	top: -18px;
	right: -35px;
	width: 130px;
	background: #000;
	color: #fff;
	font-size: 14px;
	font-weight: 700;
	text-transform: uppercase;
	transform: rotate(4deg);
	line-height: 180%;
}

@media (max-width:480px) {
	.sticker-figma {
		position: absolute;
		top: -14px;
		right: -12px;
	}
}




.bought-state .sticker-figma {
	right: -23px;
}


@media (max-width:480px) {
	.bought-state .sticker-figma {
		position: absolute;
		top: -14px;
		right: -12px;
		width: 130px;
		background: #000;
		color: #fff;
		font-size: 14px;
		font-weight: 700;
		text-transform: uppercase;
		transform: rotate(4deg);
	}
}

.dashed {
	border-bottom: 1px dashed #938f8c;
	flex: 1;
	margin: 0 8px;
}

.joke {
	font-size: 24px;
}

.payment-item {
	width: -webkit-fill-available;
	display: flex;
	flex-direction: row;
	justify-content: space-around;
	align-items: center;
}

@media (max-width: 767px) {
	.payment-item {
		flex-direction: column;
		align-items: flex-start;
		justify-content: flex-start;
	}
}

.payment-section {
	font-family: "PT Serif", serif;
	max-width: 480px;
	padding-top: 80px;
}

@media (max-width: 480px) {
	.payment-section {
		padding-top: 64px;
	}
}

.bought-state .payment-section {
	margin-left: 20px;
	padding-top: 32px;
}

@media (max-width:480px) {
	.bought-state .payment-section {
		margin-left: 16px;
		margin-right: 16px;
		padding-top: 16px;
	}
}




.payment-option {
	position: relative;
	display: flex;
	align-items: center;
	padding: 20px;
	gap: 20px;
	background: #ffffff;
	border: 1px solid transparent;
	cursor: pointer;
	margin-bottom: 8px;
	isolation: isolate;
	transition: border 0.2s;
}

.payment-option:hover {
	border-color: #c2beb4;
}

.payment-option input[type="radio"] {
	position: absolute;
	opacity: 0;
	width: 0;
	height: 0;
}

.payment-radio {
	flex-shrink: 0;
	width: 36px;
	height: 36px;
	background: #f5f2ec;
	border: 1px solid #c2beb4;
	border-radius: 50%;
	position: relative;
	box-sizing: border-box;
}

.payment-radio.rueu {
	margin-top: 4px;
}

@media (max-width:480px) {
	.payment-radio.rueu {
		margin-top: -8px;
	}
}

.payment-option input:checked .payment-radio {
	background: #e0481a;
}

.payment-option input:checked .payment-radio::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 16px;
	height: 16px;
	background: #fff;
	border-radius: 50%;
}

.payment-option input:checked+.payment-radio {
	background: #E0481A;
}

.payment-option input:checked+.payment-radio::after {
	content: '';
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 16px;
	height: 16px;
	background: #fff;
	border-radius: 50%;
}

.payment-option {
	border: 1px solid transparent;
}

.payment-option:has(input[type="radio"]:checked) {
	outline: 2px solid #e0481a;
	outline-offset: -1px;
}

.payment-content {
	flex-grow: 1;
}

.payment-title {
	font-weight: 700;
	font-size: 24px;
	line-height: 28px;
	color: #262626;
	margin: 0;
}


@media (max-width:480px) {
	h3.payment-title {
		font-size: 24px;
	}

	.bought-state h3.payment-title {
		font-size: 20px;

	}
}

@media (max-width: 576px) {
	.payment-title {
		font-weight: 700;
		font-size: 20px;
		line-height: 24px;
	}
}

@media (max-width: 576px) {
	.payment-option {
		padding: 16px;
		gap: 16px;
	}
}

.payment-desc {
	font-size: 16px;
	line-height: 20px;
	color: #727272;
	margin: 4px 0 0 0;
}

.payment-icons {
	display: flex;
	align-items: center;
	gap: 8px;
}

.payment-badge {
	position: absolute;
	top: -8px;
	right: 20px;
	background: #262626;
	color: #ffffff;
	font-size: 14px;
	font-weight: 700;
	text-transform: uppercase;
	padding: 4px 10px;
	line-height: 17px;
}

.payment-sbp .payment-badge {
	display: block;
}

.payment-option:not(.payment-sbp) .payment-badge {
	display: none;
}

.payment-option.rueucards {
	padding-bottom: 26px;
}


@media (max-width:480px) {
	.payment-option.rueucards {
		padding-bottom: 8px;
	}
}

.joke-wrapper {
	margin: 44px 0 140px;
	max-width: 370px;
	text-align: left;
}

@media (max-width: 576px) {
	.joke-wrapper {
		margin: 20px 0 64px;
		max-width: 370px;
	}
}




@media (max-width: 576px) {
	.joke-wrapper svg {
		width: 310px;
		height: auto;
	}
}


.fun-diagnosis-section {
	width: 100%;
	max-width: 1180px;
	margin-left: auto;
	margin-right: auto;
	padding-bottom: 64px;
}

.fun-diagnosis-inner {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	padding-left: 20px;
	padding-top: 32px;
	padding-right: 20px;
	padding-bottom: 32px;
	background: #262626;
	color: #ffffff;
	font-family: "PT Serif", serif;
}

.diagnosis-title {
	font-size: 20px;
	font-weight: 700;
	line-height: 24px;
}




.diagnosis-subtitle {
	font-size: 20px;
	line-height: 24px;
	font-weight: 400;
	padding-bottom: 8px;
}

.diagnosis-main {
	font-size: 40px;
	font-weight: 700;
	line-height: 110%;
	padding-bottom: 32px;
	font-family: "TT Moons", sans-serif;
}





.diagnosis-footer {
	font-size: 20px;
	line-height: 24px;
	font-weight: 400;
	padding-bottom: 20px;
}

.social-buttons .social-btn {
	font-size: 24px;
	font-weight: 600;
	transition: opacity 0.2s;
}

.social-buttons .social-btn:hover {
	opacity: 0.8;
}

.social-buttons .count {
	font-size: 32px;
	font-weight: 700;
	line-height: 110%;
	font-family: "TT Moons", sans-serif;
}




.icon-circle {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	border-radius: 50%;
	flex-shrink: 0;
	transition: transform 0.2s ease;
}

.icon-circle.youtube-bg {
	background: #eb0000;
}

.icon-circle.telegram-bg {
	background: #229ed9;
}

.youtube-btn:hover .icon-circle.youtube-bg,
.telegram-btn:hover .icon-circle.telegram-bg {
	transform: scale(1.1);
}

.social-buttons .count {
	font-size: 28px;
	font-weight: 700;
	line-height: 1;
	white-space: nowrap;
}

.social-buttons {
	gap: 32px;
}

.youtube-btn:hover,
.telegram-btn:hover {
	opacity: 0.9;
}

@media (max-width: 480px) {

	.diagnosis-title {
		font-size: 16px;
		font-weight: 700;
		line-height: 24px;
	}

	.diagnosis-subtitle {
		font-size: 16px;
		line-height: 24px;
		font-weight: 400;
		padding-bottom: 8px;
	}

	.diagnosis-main {
		font-size: 24px;
		font-weight: 700;
		line-height: 110%;
		padding-bottom: 32px;
	}

	.diagnosis-footer {
		font-size: 16px;
		line-height: 20px;
		font-weight: 400;
		padding-bottom: 32px;
	}

	.icon-circle {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 40px;
		height: 40px;
		border-radius: 50%;
		flex-shrink: 0;
		transition: transform 0.2s ease;
	}

	.social-buttons .count {
		font-size: 24px;
		font-weight: 700;
		line-height: 110%;
		white-space: nowrap;
	}

	.social-buttons {
		gap: 16px;
	}

	.icon-circle svg {
		width: 25px;
		height: 25px;
	}

	.icon-circle.telegram-bg svg {
		width: 21px;
		height: 18px;
	}


	.fun-diagnosis-section {
		padding-bottom: 32px;
	}
}

@media (max-width:480px) {
	.rightcard {
		margin-bottom: 64px;
	}

	.bought-state .rightcard {
		margin-bottom: 0px !important;
	}

	.related .rightcard {
		margin-bottom: 16px;
	}

	.related .disclaimer-figma {
		max-width: 264px;
	}
}

@media (max-width: 480px) {
	.bought-state .rightcard {

		padding: 16px !important;
	}
}


.related-nav.is-hidden {
	display: none !important;
}




.delivery-input-wrapper.dtwrong {
	border: 1px solid #E0481A;
}

.sticker-dtwrong {
	position: absolute;
	top: -15px;
	left: 260px;
	width: 130px;
	background: #E0481A;
	color: #fff;
	font-size: 16px;
	font-weight: 700;
	/* text-transform: uppercase; */
	transform: rotate(4deg);
	line-height: 100%;
	padding-top: 4px;
	padding-left: 6px;
	padding-right: 6px;
	padding-bottom: 4px;
}

@media (max-width:480px) {
	.sticker-dtwrong {
		top: -20px;
		left: 195px;
		transform: rotate(2.5deg);
	}
}


.sticker-mtwrong {
	position: absolute;
	top: -20px;
	left: 205px;
	width: 150px;
	background: #E0481A;
	color: #fff;
	font-size: 16px;
	font-weight: 700;
	/* text-transform: uppercase; */
	transform: rotate(4deg);
	line-height: 100%;
	padding-top: 4px;
	padding-left: 6px;
	padding-right: 6px;
	padding-bottom: 4px;
}

@media (max-width:480px) {
	.sticker-mtwrong {
		top: -24px;
		left: 185px;
		transform: rotate(2.5deg);
	}
}


/* .sticker-bpwrong {
    padding-left: 6px;
    font-size: 16px;
    font-weight: 700;
    line-height: 100%;
    color: #fff;
    background: #E0481A;
    margin-left: 12px;
    padding-top: 4px;
    padding-bottom: 4px;
    padding-right: 6px;
} */


.delivery-label.bpwrong {
	font-size: 20px;
	color: #E0481A;
	font-weight: 700;
	line-height: 24px;
}



.sticker-bpwrong.mobile-only {
	display: none;
}


@media (max-width: 576px) {
	.sticker-bpwrong.mobile-only.show {
		display: inline-block;
		padding-left: 6px;
		font-size: 16px;
		font-weight: 700;
		line-height: 100%;
		color: #fff;
		background: #E0481A;
		margin-left: 12px;
		padding-top: 4px;
		padding-bottom: 4px;
		padding-right: 6px;
	}
}

.sticker-bpmtrong.mobile-only {
	display: none;
}

@media (max-width: 576px) {
	.sticker-bpmtrong.mobile-only.show {
		display: inline-block;
		padding-left: 6px;
		font-size: 16px;
		font-weight: 700;
		line-height: 100%;
		color: #fff;
		background: #E0481A;
		margin-left: 12px;
		padding-top: 4px;
		padding-bottom: 4px;
		padding-right: 6px;
	}
}

.related.bought-state {
	visibility: hidden;
}

.site-footer {
	margin-top: 50px;
	height: 148px;
	background-color: #262626;
	display: flex;
	align-items: center;
	justify-content: center;
}

.policy-link {
	color: #929292;
	text-decoration: none;
	font-size: 15pt;
	line-height: 24px;
}

.author-block {
	position: absolute;
	right: 10px;
	text-align: right;
}

@media (max-width: 768px) {
	.site-footer {
		flex-direction: column;
	}

	.author-block {
		position: relative;
		width: 100%;
		margin-top: 25px;
	}
}



.container.lk,
.container.lk .row {
	--bs-gutter-x: 32px;
}


@media (min-width: 768px) {

	.container.lk,
	.container.lk .row {
		--bs-gutter-x: 20px;
	}
}

.arrowhead {
	padding: 0px;
}


/* Базовый размер для мобильных устройств (экраны до 768px) */
.back-icon {
	width: 40px;
	height: 40px;
}




.hoolibonus-title {
	font-family: 'TT Moons', sans-serif;
	font-size: 32px;
	font-weight: 700;
	margin-bottom: 0px;
}



.hoolibonus {
    font-weight: 700;
    font-size: 24px;
    line-height: 28px;
    color: #262626;
    margin-bottom: 0
}

.hoolibonus-info {
    font-weight: 400;
    font-size: 16px;
    line-height: 20px;
    color: #262626;
    padding-top: 4px;
    margin: 0
}

.hoolibonus-wrapper {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    margin-top: 32px;
    margin-bottom: 12px
}

@media (min-width:768px) {
    .hoolibonus-wrapper {
        flex-direction: row;
        align-items: baseline;
        gap: 16px
    }
}

.referal-block-inputs {
    column-gap: 20px
}

.referal-links {
    margin-top: 32px;
    margin-bottom: 8px
}

.refcol {
    margin-top: 0;
    padding: 0;
    max-width: 559px
}

.btn-out {
    max-width: 103px;
    height: 32px;
    border: none;
    border-radius: 0;
    text-transform: uppercase;
    font-size: 16px;
    padding-top: 8px;
    padding-left: 12px;
    padding-right: 12px;
    padding-bottom: 8px;
    background: #9A9790;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700
}

.copy-input-wrapper {
    background-color: #FFF;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: 8px;
    padding-bottom: 8px;
    padding-left: 16px;
    padding-right: 12px;
    width: 100%;
    box-sizing: border-box;
    margin-top: 12px
}

.copy-input-wrapper.bar {
    margin-top: 20px
}

.copy-input-field {
    flex-grow: 1;
    min-width: 0;
    border: none;
    background: #fff0;
    font-family: inherit;
    font-size: 16px;
    color: #333;
    outline: none;
    text-overflow: ellipsis;
    padding-right: 15px
}

.btn-copy {
    width: 32px;
    height: 32px;
    flex-shrink: 0;
    background-color: #E0481A;
    color: #FFF;
    border: none;
    font-size: 16px;
    font-weight: 700;
    text-transform: uppercase;
    cursor: pointer;
    transition: background-color 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center
}

@media (min-width:768px) {
    .btn-copy {
        width: 146px;
        height: 32px;
        border-radius: 0
    }
}

.btn-copy:hover {
    background-color: #c73a11
}

.referal-block-text {
    padding: 20px
}

.referal-block-inputs {
    padding-top: 0;
    padding-left: 20px;
    padding-right: 20px;
    padding-bottom: 20px;
    margin: 0;
    row-gap: 20px
}

.progress-track {
    background-color: #FCEDE8;
    height: 20px;
    border-radius: 2px;
    overflow: hidden
}

.progress-fill {
    background-color: #E0481A;
    height: 100%;
    transition: width 0.4s ease
}

.tg-card {
    padding: 20px;
    border: 1px solid #E5E5E5;
    border-radius: 2px;
    min-height: 168px
}

.tg-card .hoolibonus-info {
    padding-top: 0;
    margin-bottom: 20px
}

.btn-tg {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-color: #E0481A;
    color: #FFF;
    padding-right: 16px;
    height: 36px;
    font-size: 20px;
    font-weight: 700;
    text-transform: uppercase;
    width: fit-content;
    border: none;
    transition: background-color 0.2s ease;
    font-family: "PT Serif", serif;
    padding-left: 8px;
    padding-top: 8px;
    padding-bottom: 8px
}

.btn-tg:hover {
    background-color: #c73a11;
    color: #FFF
}

.btn-tg svg {
    margin-right: 8px
}

.myrefs {
    margin-top: 80px
}

.myrefscol {
    max-width: 580px
}

.referrals-list {
    margin-top: 32px
}

.referral-item {
    background-color: #FFF;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px;
    margin-bottom: 8px;
    border-radius: 2px
}

.ref-email {
    font-weight: 700;
    color: #262626;
    font-size: 20px;
    line-height: 24px;
    width: 328px
}

.ref-bonus {
    color: #555;
    font-size: 20px;
    line-height: 24px;
    font-weight: 400;
    width: 220px
}

.referral-item:last-child {
    margin-bottom: 0
}

.btn-load-more {
    background-color: #E0481A;
    color: #FFF;
    border: none;
    padding: 8px 12px;
    font-size: 16px;
    font-weight: 700;
    text-transform: uppercase;
    cursor: pointer;
    transition: background-color 0.2s ease;
    margin-top: 32px
}

.btn-load-more:hover {
    background-color: #c73a11
}

.logout-section {
    border-top: 1px solid #C2BEB4;
    padding-top: 32px;
    padding-bottom: 80px;
    display: flex;
    justify-content: center;
    margin-top: 80px
}

.logout-link {
    font-size: 16px;
    color: #262626;
    text-decoration: underline;
    transition: color 0.2s ease
}

.logout-link:hover {
    color: #E0481A;
    text-decoration: none
}

@media (min-width:480px) {
    .back-icon {
        width: 24px;
        height: 24px
    }
}

@media (min-width:768px) {
    .hoolibonus-title {
        font-size: 40px
    }

    .hoolibonus {
        font-size: 28px;
        line-height: 36px
    }

    .hoolibonus-info {
        font-size: 20px;
        line-height: 24px
    }

    .copy-input-wrapper {
        padding: 18px 16px
    }

    .copy-input-field {
        font-size: 20px
    }

    .referal-links {
        margin-top: 32px;
        margin-bottom: 20px
    }
}

@media (max-width:480px) {
    .tgcol {
        margin-top: 8px
    }

    .myrefs {
        margin-top: 34px
    }

    .referrals-list {
        margin-top: 20px
    }

    .ref-email,
    .ref-bonus {
        font-size: 16px;
        line-height: 20px
    }

    .referral-item {
        flex-direction: column;
        align-items: flex-start;
        padding-top: 8px;
        padding-bottom: 8px
    }

    .referral-item:last-child {
        margin-bottom: 0
    }

    .page-title.lk {
        padding-left: 0
    }

    .btn-load-more {
        margin-top: 20px
    }

    .logout-section {
        margin-top: 64px
    }
}

.btn-out:disabled {
    cursor: not-allowed;
    opacity: .8
}

.btn-out.btn-out-active {
    background-color: #E0481A;
    cursor: pointer;
    transition: background-color 0.2s ease
}

.btn-out.btn-out-active:hover {
    background-color: #c73a11
}

.btn-copy {
    position: relative
}

.copy-badge {
    position: absolute;
    top: -22px;
    right: -28px;
    background-color: #262626;
    color: #fff;
    font-family: 'PT Serif', serif;
    font-weight: 700;
    font-size: 14px;
    padding: 4px 10px;
    transform: rotate(5deg);
    border-radius: 2px;
    display: none;
    pointer-events: none;
    white-space: nowrap;
    z-index: 10
}

@media (max-width:480px) {
	.copy-badge {
		top: -30px;
		right: -20px;
	}
}



.invite-banner {
    position: relative;
    background-color: #ffffff;
    border: 2px solid #E0481A;
    padding: 20px;
    margin-top: 40px; 
    margin-bottom: 24px; 
    box-shadow: 2px 2px 0px 0px rgb(224 72 26);
}

.invite-icon {
    position: absolute;
    top: -20px; 
    left: 20px;
    
    padding: 0 4px; 
    display: flex;
    align-items: center;
    justify-content: center;
}


.invite-text {
    font-family: 'PT Serif', serif;
    font-size: 16px;
    line-height: 24px;
    color: #262626;
    margin: 0;
}


@media (max-width: 480px) {
    .invite-banner {
        padding: 16px;
        margin-top: 32px;
    }
    .invite-text {
        font-size: 16px;
        line-height: 20px;
    }
	
	.invite-icon {
		top:1px;
		left:4px;
	}
	
	.invite-icon svg {
        width: 14px;
        height: 18px;
    }
	
}



.page-title .info-section-text {
    max-width: 632px;
    width: 100%; 
}





.bonus-switch-title {
    font-weight: 700;
    font-size: 20px;
    line-height: 24px;
    color: #262626;
}

.bonus-switch-subtitle {
    font-size: 16px;
    line-height: 20px;
    color: #727272;
    margin-top: 4px;
}


.hooli-switch {
    width: 56px !important;
    height: 36px !important;
    cursor: pointer;
    box-shadow: none !important; 
    background-color: #E8E3D7; /
    border: none !important;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23ffffff'/%3e%3c/svg%3e") !important;
}

.hooli-switch:checked {
    background-color: #E0481A !important;
    border-color: #E0481A !important;
}


.text-bonus {
    font-size: 20px;
    line-height: 24px;
    font-weight: 400;
    color: #262626;
}

.bonus-discount-amount {
    font-size: 20px;
    line-height: 24px;
    font-weight: 700;
    color: #E0481A;
}


@media (max-width: 480px) {
    .bonus-switch-title, 
    .text-bonus, 
    .bonus-discount-amount {
        font-size: 16px;
        line-height: 20px;
    }
    
    .bonus-switch-subtitle {
        font-size: 14px;
        line-height: 18px;
    }

    .hooli-switch {
        width: 40px !important;
        height: 20px !important;
    }
}


.bonus-switch-wrapper {
	margin-top:32px;
}




.promo-btn .apply-friend-svg {
    width: 44px;
    height: 32px;
    background-color: #E0481A; 
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.2s ease;
}

.promo-btn .apply-friend-svg:hover {
    background-color: #C3370D; 
}


.promo-btn .remove-friend {
    width: 44px;
    height: 32px;
    background: #AEAAA2;
    color: #ffffff;
    font-size: 28px;
    font-weight: 300;
    line-height: 26px;
    border: none;
    cursor: pointer;
}

.promo-btn .remove-friend:hover {
    background: #9A9790;
}



#friendmail {
    text-transform: none !important;
}


#friendmail:focus {
    outline: none !important;
    box-shadow: none !important;
}


input:-webkit-autofill,
input:-webkit-autofill:hover, 
input:-webkit-autofill:focus, 
input:-webkit-autofill:active {
    transition: background-color 5000s ease-in-out 0s;
    -webkit-text-fill-color: #000 !important; /* Цвет текста при автозаполнении */
}


.promo-input.error-border,
#friendEmailBlock .promo-input.error-border {
    border: 1px solid #E0481A !important;
}