/**/
.hgpa_backend{
	position: fixed;
	top:0;
	left:-100vw;
	width: 1px;
	overflow: hidden;
	height: 1px;
	z-index:100;
	background-color: rgba(51, 51, 51, 0);
	user-select: none;
	transition:all linear 0.1s 0.3s, background-color ease 0.3s;
}
.hgpa_backend.active{
	left:0;
	width: 100vw;
	height: 100%;
	background-color: rgba(51, 51, 51, 0.4);
	transition:  background-color ease 0.3s;
}
.hgpa_backend .hgpa_panel{
	position: absolute;
	bottom:-100%;
	left:0;
	width:100vw;
	height:auto;
	padding: 22px 16px 80px;
	border-radius: 24px 24px 0 0;
	background: #fff;
	min-height:80px;
	max-height: 78vh;
	transition: bottom ease 0.3s;
}
.hgpa_backend.active .hgpa_panel{
	bottom:-0;
	transition: bottom ease 0.3s;
}
.hgpa_backend .hgpa_panel .hgpa_close {
	display: block;
	width: 100%;
	height: 96vh;
	position: absolute;
	top: calc(-100vh + 32px);
	left: 0;
	backdrop-filter: blur(4px);
}
.hgpa_close_min{
	display: none;
}
.hgpa_backend:not(.active) .hgpa_panel .hgpa_close{
	display: none;
}
.hgpa_panel::after {
	content: "";
	display: block;
	border-radius: 16px;
	width: 40px;
	height: 2px;
	background: #8b8b8b;
	position: absolute;
	top: 10px;
	left: 50%;
	margin-left: -20px;
}
.hgpa_panel::before {
	content: "";
	display: block;
	width: 100vw;
	height: 8.5vw;
	background: transparent;
	background-size: cover;
	position: absolute;
	top: -8.5vw;
	left: 0;
	z-index: 2;
}

.hgpa_body{
	position: relative;
}

.hgpa_body_text {
	font-family: var(--third-family);
	font-weight: 400;
	line-height: 130%;
	color: #000;
	max-height: 100%;
	overflow-y: auto;
	overflow-x: hidden;
	font-size: 18px;
}

.wrapp-hint-gift{
	padding-top: 12px;
}
.wrapp-hint-gift .btn{
	width: 100%;
	display: inline-flex;
	justify-content: center;
	align-items: center;
	padding: 7px 12px;
}
.wrapp-hint-gift .btn svg{
	margin-right:7px;
}
.hgpa_steps{
	--trans: 0.3s;
	position:relative;
	overflow: hidden;
}
.hgpa_step {
	background: #fff;
	max-width: 100%;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 1;
	overflow-y: auto;
	max-height: 70vh;
}

.hgpa_step.current.uncurrent{
	z-index: 2;
}
.hgpa_step.current{
	z-index: 3;
}
.hgpa_step.active{
	z-index:4;
}
.hgpa_step[data-step="1"]{
	position:relative;
}
.hgpa_step.slide{
	transition: all ease var(--trans);
}
.hgpa_step.active{
	transform: translate(0, 0);
}
.hgpa_step.right.uncurrent{
	transform: translate(0, 0);
}
.hgpa_step.right.current{
	transform: translate(100%, 0);
}
.hgpa_step.right.uncurrent.slide{
	transform: translate(-100%, 0);
}
.hgpa_step.right.current.slide{
	transform: translate(0, 0);
}
.hgpa_step.left.uncurrent{
	transform: translate(0, 0);
}
.hgpa_step.left.current{
	transform: translate(-100%, 0);
}
.hgpa_step.left.uncurrent.slide{
	transform: translate(100%, 0);
}
.hgpa_step.left.current.slide{
	transform: translate(0, 0);
}


.hgpa_error_text{
	margin-top:14px;
	color:red;
	text-align: center;
	font-size:14px;
}
.hgpa_error_text:empty{
	display:none;
}
.hgpa_fail .hgpa_form_ibuttons{
	flex-direction: column;
	justify-content: center;
	align-items:center;
}



.hgpa_title{
	font-weight: 400;
	font-size: 32px;
	line-height: 125%;
	text-align: center;
	color: #333;
}
.hgpa_subtitle{
	margin-top: 16px;
	font-weight: 400;
	font-size: 15px;
	line-height: 147%;
	color: #333;
	text-align: left;
}
.hgpa_form_area{
	display: flex;
	width: 100%;
	justify-content: center;
	align-items: flex-start;
	margin-top: 48px;
}
.hgpa_form_product{
	width: 367px;
	min-width: 367px;
	margin-right: 40px;
}
.hgpa_form_form{
	width: 100%;
}
.hgpa_product_area{
	width: 100%;
	display: flex;
	flex-direction: column;
	border-radius: 8px;
	padding: 8px;
	background: rgba(51, 51, 51, 0.05);
}
.hgpa_product_area .hgpa_product_image{
	border-radius: 4px;
	width: 100%;
	max-width: 100%;
	height: auto;
	margin: 0 0 16px;
}
.hgpa_product_area .hgpa_product_name {
	font-weight: 400;
	font-size: 16px;
	line-height: 150%;
	color: #000;
}
.hgpa_form_item{
	width: 100%;
	margin-bottom: 8px;
}
.hgpa_form_item label{
	font-weight: 400;
	font-size: 13px;
	line-height: 123%;
	color: #8b8b8b;
}
.hgpa_form_item label b{
	color: red;
	font-weight: normal;
}
.hgpa_form_item input[type="text"] {
	background: #fff;
	border: 1px solid rgba(51, 51, 51, 0.3);
	border-radius: 4px;
	padding: 10px 14px;
	width: 100%;
	font-weight: 400;
	font-size: 15px;
	line-height: 100%;
	color: #333;
}
.hgpa_form_item textarea{
	border: 1px solid rgba(51, 51, 51, 0.3);
	border-radius: 4px;
	padding: 12px 14px;
	width: 100%;
	height: 260px;
	background: #fff;
	font-weight: 400;
	font-size: 15px;
	line-height: 147%;
	color: #333;
}
.hgpa_form_item .sumbolsum{
	padding-top: 4px;
	font-weight: 400;
	font-size: 13px;
	line-height: 123%;
	color: #8b8b8b;
	padding-bottom: 1px;
	max-height: 1000px;
	overflow: hidden;
	transition: max-height linear 0.3s;
}
.hgpa_form_item .sumbolsum:empty{
	max-height: 0;
	transition: max-height linear 0.3s;
}
.hgpa_form_item.hgpa_err input[type="text"],
.hgpa_form_item.hgpa_err textarea{
	border-color: red !important;
}
.hgpa_form_item.hgpa_err .sumbolsum{
	color: red !important;
}
.hgpa_form_ibuttons{
	margin-top: 30px;
	padding-bottom: 1px;
}
.hgpa_form_ibuttons .btn ~ .btn{
	margin-top: 8px;
}
.hgpa_form_ibuttons .btn-success:disabled{
	background: #e5e5e5 !important;
	border-color: #e5e5e5 !important;
}
.hgpa_form_ibuttons .btn:disabled{
	color: #8b8b8b !important;
	opacity:1;
}

.hgpa_step.preview{
}
.preview .hgpa_title{
	text-align: left;
	max-width: 600px;
	margin: auto;
}
.preview .hgpa_subtitle{
	padding-bottom: 54px;
	max-width: 600px;
	margin: 16px auto auto;
}
.hgpa_preview_image {
	width: 100%;
	height: 65%;
	position: relative;
	background-position: center;
	background-repeat: no-repeat;
	background-size: contain;
	max-width: 600px;
	margin: auto auto 24px;
}
.hgpa_preview_image::before,
.hgpa_preview_image::after{
	content: "";
	position: absolute;
	top: 0;
	left: -10%;
	width: 120%;
	height: 100%;
}
.hgpa_preview_image::after {
	background: #fff4;
	/*filter: blur(3px);*/
	display: block;
	z-index: 1;
	backdrop-filter: blur(7px);
}
.hgpa_preview_image::before{
	background: url(images/mask.png) no-repeat center;
	/*background-size: contain;*/
	z-index: 2;
}
.preview .hgpa_form_ibuttons {
	display: flex;
	justify-content: space-between;
	gap: 16px;
	position: absolute;
	width: 100%;
	left: 0;
	bottom: 0;
}
.prev_btn {
	font-weight: 500;
	font-size: 13px;
	line-height: 123%;
	text-transform: uppercase;
	color: #333;
	background: transparent;
	border: 0 none;
	border-radius: 0;
	display: flex;
	justify-content: flex-start;
	align-items: center;
	cursor: pointer;
}
.prev_btn svg{
	margin-right: 5px;
}
.preview .prev_btn,
.preview .btn-empty{
	width: 16%;
}
.preview .btn{
	max-width: 400px;
}

.hgpa_step.step_column{
	display: flex;
	flex-direction: column;
	justify-content: center;
}
.hgpa_smile{
	width: 100%;
	height: 163px;
	margin-bottom: 24px;
	background-position: center;
	background-repeat: no-repeat;
}
.hgpa_success .hgpa_smile{
	background-image: url(images/success.png);
}
.hgpa_step.step_column .hgpa_form_ibuttons{
	margin-top: 60px;
	display: flex;
	justify-content: center;
}
.hgpa_step.step_column .hgpa_form_ibuttons .btn {
	max-width: 340px;
	padding: 10px 10px 9px;
}

.hgpa_fail .hgpa_smile{
	background-image: url(images/fail.png);
}

.captcha_field{
	max-width: 400px;
	text-align: center;
	margin:auto auto 0;
}
.captcha_field .captcha-row{
	width: 180px;
	margin: auto;
}
.captcha_field label{
	font-size: 110%;
	color:#111;
}
.hgpa_form_item.captcha_field input{
	width: 180px;
	margin-top: 8px;
}
.hgpa_captcha .hgpa_form_ibuttons {
	margin-bottom: auto;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}
.hgpa_captcha .hgpa_form_ibuttons .prev_btn {
	opacity: 0.7;
	margin-top: 16px;
	width: 200px !important;
	display: flex;
	justify-content: center;
	padding: 7px 6px 6px !important;
}
.hgpa_captcha .hgpa_form_ibuttons .prev_btn:hover path{
	fill:#fff;
}

.hgpa_step.load:after{
	content: "";
	display: block;
	position: absolute;
	width: 100%;
	height: 100%;
	left:0;
	top:0;
	background: #fffd url(/bitrix/templates/aspro_max/components/bitrix/sale.order.ajax/v2/images/loader.gif) no-repeat center;
}

.hgpa_mob_ibuttons{
	display: none;
}

/*.hgpa_body{
	transition: max-width linear 0.3s;
}
.hgpa_body.step_2{
	max-width: 650px;
	transition: max-width linear 0.3s;
}*/

@media(min-width:900px){
	.hgpa_backend .hgpa_panel {
		position: absolute;
		bottom: auto;
		left: 0;
		top: 0;
		width: 100vw;
		height: 100vh;
		padding: 0;
		border-radius: 0;
		min-height: 100vh;
		max-height: 100vh;
		background: transparent;
	}
	.hgpa_backend .hgpa_body{
		top: 100%;
		opacity:0;
		transition: all ease 0.3s;
	}
	.hgpa_backend.active .hgpa_body{
		top: 50%;
		opacity:1;
		transition: all ease 0.3s;
	}
	.hgpa_panel::before,
	.hgpa_panel::after {
		display: none;
	}
	.hgpa_body {
		position: absolute;
		left: 50%;
		width: 900px;
		height: auto;
		border-radius: 16px;
		padding: 48px 48px 40px;
		background: #fff;
		max-height: 84vh;
		transform: translate(-50%,-50%);
		box-shadow: 0 0 14px #999;
	}
	.hgpa_backend .hgpa_panel .hgpa_close {
		display: block;
		width: 100vw;
		height: 100vh;
		position: absolute;
		top: 0;
		left: 0;
		backdrop-filter: blur(4px);
		cursor:pointer;
	}
	.hgpa_close_min {
		position: absolute;
		z-index: 2;
		width: 20px;
		height: 20px;
		background: url(images/close.svg) no-repeat center;
		background-size: contain;
		cursor: pointer;
		margin-top: 12px;
		margin-right: 12px;
	}
	.hgpa_backend .hgpa_close_min{
		display: none !important;
	}
	.hgpa_backend.active .hgpa_close_min{
		display: block !important;
	}
}

@media(max-width:900px){
	.hgpa_form_area{
		flex-direction: column;
	}
	.hgpa_product_area{
		flex-direction: row;
		align-items: center;
	}
	.hgpa_form_product{
		display: flex;
		margin-bottom: 22px;
		width: 100%;
		min-width: 100%;
	}
	.hgpa_product_area .hgpa_product_image{
		width: 72px;
		max-width: 72px;
		height:auto;
		margin:0 16px 0 0;
	}
	.hgpa_product_area .hgpa_product_name{
		font-weight: 600;
		font-size: 16px;
		line-height: 138%;
		letter-spacing: -0.01em;
		color: #000;
	}
	.hgpa_form_item textarea {
		height: 180px;
	}
	.hgpa_preview_image {
		width: 100%;
		height: 65%;
		background-size: contain;
		max-width: 100%;
		max-height: 480px;
	}
	.hgpa_form_ibuttons .btn-empty{
		display: none;
	}
	.hgpa_form_ibuttons{
		display: flex;
		flex-direction: column;
		height:auto;
		max-height: 200px;
	}
	.preview .hgpa_form_ibuttons .prev_btn {
		order: 2;
		width: 100%;
		max-width: 100%;
		justify-content: center;
	}
	.hgpa_mob_ibuttons {
		display: flex;
		padding-left: 12px;
		margin-bottom: 8px;
		margin-top: 8px;
	}
	.preview .btn {
		max-width: 100%;
	}
	.hgpa_success .hgpa_subtitle,
	.hgpa_fail .hgpa_subtitle {
		text-align: center;
	}
	.hgpa_preview_image::before,
	.hgpa_preview_image::after{
		left: 0;
		width: 100%;
	}
	.hgpa_preview_image::after {
		backdrop-filter: blur(4px);
	}
}
@media(max-width: 600px){
	.hgpa_form_area {
		margin-top: 20px;
	}
	.hgpa_form_product {
		display: flex;
		margin-right: 0;
		margin-bottom: 14px;
		width: 100%;
	}
	.hgpa_form_item textarea,
	.hgpa_form_item input[type="text"] {
		padding: 8px 10px;
	}
	.hgpa_form_item {
		margin-bottom: 4px;
	}
	.hgpa_title {
		margin-top: 8px;
	}
	.hgpa_step{
		padding-right: 16px;
	}
	.hgpa_backend .hgpa_panel {
		padding: 22px 0 90px 16px;
	}
	.prev_btn svg{
		min-width: 24px;
	}
	.hgpa_preview_image {
		max-height: 360px;
	}
	.hgpa_preview_image::before {
		background-size: 72%;
	}
	.preview .btn {
		max-width: calc(100% - 16px);
	}
	.hgpa_title {
		font-size: 32px;
		line-height: 110%;
	}
	.hgpa_form_ibuttons {
		margin-top: 12px;
		padding-bottom: 30px;
	}
	.hgpa_step.step_column .hgpa_form_ibuttons {
		margin-top: 30px;
	}
	.preview .hgpa_form_ibuttons{
		position: relative;
	}
	.preview .hgpa_subtitle {
		padding-bottom: 16px;
		max-width: 100%;
		margin: 16px auto auto;
		width: 100%;
	}
	.preview .btn {
		max-width: 100%;
	}
	.hgpa_form_ibuttons .btn{
		padding: 9px 10px 8px;
	}
	.hgpa_step.preview {
		display: flex;
		flex-direction: column;
	}
	.preview .hgpa_title,
	.hgpa_step.preview .hgpa_preview_image{
		margin-top: 0;
	}
	.preview .hgpa_title{
		margin-bottom: 0;
	}
}
@media(max-width: 460px){
	.hgpa_step {
		max-height: calc(85vh - 94px);
	}
	.hgpa_backend .hgpa_panel{
		height: 85vh;
		max-height: 85vh;
	}
	.hgpa_form_ibuttons{
		padding-bottom: 1px;
	}
	.hgpa_step.step_column .hgpa_form_ibuttons .btn{
		max-width: 100%;
	}
	.hgpa_captcha .hgpa_form_ibuttons .prev_btn{
		width: 100% !important;
	}
	.hgpa_smile {
		height: 123px;
		margin-bottom: 12px;
		background-size: contain;
	}
}
@media(max-width: 400px){
	.hgpa_form_item textarea {
		height: 100px;
	}
	.previev_btn{
		font-size: 11px !important;
	}
	.hgpa_preview_image {
		max-height: 84vw;
		margin-bottom: 2px;
	}
}