@import url(_sprite-stack.css);
.icon-stack { display: block; }
.icon-eye-open, .icon-eye-close { position: absolute; right: 10px; top: 13px; z-index: 5; cursor: pointer; }

/* reset */

html, body, div, span, h1, h2, h3, p, a, img, strong, ol, ul, li, form, button, input, label { margin: 0; padding: 0; border: 0; }

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

a, button, div, input, select, textarea, :focus, :active { outline: none; }
body, h1, h2, h3 { font-weight: normal; }
textarea { display: block; resize: none; border: none; overflow-y: hidden; }
ol, ul { list-style: none; }
img { display: block; border: none; }

:root {
	--regular: 'SFUIDisplay-Regular', sans-serif;
	--semibold: 'SFUIDisplay-Semibold', sans-serif;
	--bold: 'SFUIDisplay-Bold', sans-serif;

	--size-lt: 13px;
	--size-sm: 14px;
	--size-base: 16px;
	--size-md: 20px;
	--size-lg: 28px;

	--color-base: #000;
	--color-secondary: #838383 ;
	--color-primary: #6768d2 ;
	--color-success: #2ea702;
	--color-danger: #ff5656;
	--color-border: #7c7c7c;
	--color-placeholder: #7c7c7c;

	--transition: all .2s ease-out;
}

html, body, .container { width: 100%; min-height: 100dvh; }
body { font-family: var(--regular); font-size: var(--size-base); line-height: 1; color: var(--color-base); background: #fff; }

h2, h3 { font-family: var(--bold); color: var(--color-base); text-align: center; margin-bottom: 24px; }
h2 { font-size: var(--size-lg); line-height: 1.178; }
h3 { font-size: var(--size-md); line-height: 1.15; }

.text-center { text-align: center; }

.container { display: flex; flex-direction: column; max-width: 592px; margin-inline: auto; padding: 16px 16px 25px; }
.container-main { max-width: 746px; }
.wrap, .content { width: 100%; max-width: 448px; margin-inline: auto; }
.wrap:not(.wrap.content) {margin-bottom: 12px; }
.content { margin-top: auto; }

.grid { display: grid; }
.flex { display: flex; }
.flex-center { display: flex; align-items: center; justify-content: center; }
.ai-center { align-items: center; }
.jc-center { justify-content: center; }
.jc-between { justify-content: space-between; }

.blur { -webkit-filter: blur(7px); filter: blur(7px); }

.progress-row { height: 24px; gap: 16px; margin-bottom: 22px; color: var(--color-primary); }
	.progress-row :is(.skip, .icon-stack) { flex-shrink: 0; cursor: pointer; }
.progress-bar { height: 6px; flex-grow: 1; border-radius: 10px; background: #ece9ff; }
	.progress-bar li { height: 6px; flex-grow: 1; background: transparent; }
	.progress-bar .active { background: var(--color-primary); }
	.progress-bar .active:first-child { border-radius: 10px 0 0 10px; }
	.progress-bar li.active:last-child { border-radius: 0 10px 10px 0; }

.flex-answer input, .grid-answer input, .lookfor-row input, .purpose-dating input { display: none; }
.grid-answer { grid-gap: 8px; grid-template-columns: repeat(2, 1fr); grid-template-rows: repeat(2, auto); margin-bottom: 16px; }

.btn-answer { flex-grow: 1; font-family: var(--semibold); line-height: 1.375; color: #24302d; text-align: center; padding: 14px 16px; border: 2px solid transparent; border-radius: 16px; background: #fff; box-shadow: 0px 4px 12px 0px rgba(0, 0, 0, 0.12); cursor: pointer; }
	.btn-answer img { width: 48px; height: 48px; margin-bottom: 12px; }
:checked + .btn-answer { border-color: #6768d2; background: #ece9ff; box-shadow: none; }
.btn-continue { width: 100%; max-width: 448px; height: 46px; font-family: var(--semibold); font-size: var(--size-base); color: #fff; margin-inline: auto; border-radius: 16px; background: var(--color-primary);}

.text-info { font-size: var(--size-lt); color: var(--color-secondary); line-height: 1.538; }

.grid-photos { max-width: 560px; grid-gap: 12px; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(2, auto); position: relative; margin-bottom: 30px; }
.photo-box { width: 100%; -webkit-clip-path: inset(0 round 10px); clip-path: inset(0 round 10px); position: relative; }
	.photo-box img { width: 100%; height: auto; }
.lock-round { position: absolute; left: 50%; top: 50%; z-index: 3; transform: translate(-50%, -50%); }

.flex-answer { flex-direction: column; gap: 8px 0; margin-bottom: 16px; }
	.flex-answer .btn-answer { height: 54px; }

.container-main h3 { margin-bottom: 16px; }
.image-wrap { max-width: 711px; margin: 0 auto 30px ; }
	.image-wrap img { width: 100%; height: auto; }
.geo-row { font-size: var(--size-sm); color: var(--color-primary); margin-bottom: 14px; }
	.geo-row .geo { margin-right: 4px; }

.gender-row{ gap: 0 12px; grid-template-rows: 114px; }
	.gender-row .btn-answer { height: 114px; flex-direction: column; font-size: var(--size-base); }

.container-bg-woman, .container-bg-man { max-width: 100%; padding: 0; background-color: #6768d2; background-repeat: no-repeat; background-position: 50% 0; }
.container-bg-woman {  background-image: url('grid_women-b.webp'); }
.container-bg-man {  background-image: url('grid_men-b.webp'); }

.content-end { width: 100%; height: 323px; margin-top: auto; padding: 32px 16px 16px; border-radius: 20px 20px 0 0; background: #fff; }
	.content-end img { width: 48px; height: 48px; margin: 0 auto 16px; }
	.content-end h2 { margin-bottom: 16px; }
	.content-end p { line-height: 1.375; text-align: center; margin-bottom: 48px; }

/* registration */

.container-register {
	--size-lg: 24px;
	--color-secondary: #7c7c7c ;
	--color-danger: #f00;
	--color-border: #c8c9e9;
	--color-form: #26242c;
}

.container-register { line-height: 1.375; }
	.container-register .wrap { max-width: 328px; }
	.container-register h2 { color: #392c5c; text-align: left; }
.subtitle { margin: -13px 0 22px; }

.input-title { font-family: var(--semibold); margin-bottom: 7px; }
.form-control { width: 100%; height: 44px; font-family: var(--regular); font-size: var(--size-base); color: var(--color-form); position: relative; padding: 0 6px 0 10px; border: 1px solid var(--color-border); border-radius: 10px; }
.add-info, .add-error { text-align: center; padding-top: 27px; }
.add-info { color: var(--color-secondary); }
.add-error { color: var(--color-danger); }

.text-conditions, .text-conditions a { font-size: var(--size-lt); color: #b8babf; }
.text-conditions { text-align: center; padding-top: 27px; }

.select-row { gap: 0 10px; }
.select-css { font-size: 15px; -webkit-appearance: none; -moz-appearance: none; appearance: none; background-image: url("data:image/svg+xml,%3Csvg width='14' height='8' viewBox='0 0 14 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1L7 6.5L13 1' stroke='%237C7C7C' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A"); background-repeat: no-repeat; background-position: right 10px top 50%, 0 0; outline: none; }
.form-control_day, .form-control_year { width: 80px; }
.form-control_month { width: auto; flex-grow: 1; margin: 0; }

.lookfor-row { padding-top: 12px; }
	.lookfor-row label { position: relative; margin-right: 20px; padding-left: 34px; }
	.lookfor-row label::before { width: 24px; height: 24px; display: block; content: ''; position: absolute; left: 0; top: -2px; border: 2px solid var(--color-border); border-radius: 5px; }
	.lookfor-row :checked + label::before { border-color: #7b61ff; background: #7b61ff url('sprite-stack.svg?1777305959#checked') no-repeat 50% / cover; }

.list-box { height: 216px; border: solid 1px var(--color-border); background-color: #fff; opacity: 0.98; line-height: 22px; overflow-y: auto; -webkit-overflow-scrolling: touch; }
	.list-box > div { border-bottom: solid 1px var(--color-border); padding: 10px; }
	.list-box > div:hover { background-color: #ece9ff; }

.purpose-dating { flex-direction: column; gap: 12px; }
.btn-purpose { height: 110px; flex-direction: column; gap: 10px; font-family: var(--semibold); border: 1px solid var(--color-border); border-radius: 12px; }
:checked + .btn-purpose { border-width: 2px; border-color: var(--color-primary); }

.recover_pass { text-align: center; padding-top: 16px; }
	.recover_pass a { color: var(--color-primary); text-decoration: underline; text-underline-offset: 3px; }

.captcha-row { height: 72px; margin-bottom: 9px; padding: 0 16px 0 12px; border-radius: 10px; background: #f4f4f4; }
	.captcha-row img { margin-right: 38px; }
	.captcha-row a { color: var(--color-primary); text-decoration: none; }
	.captcha-row .icon-refresh { margin-left: 4px; }

input:-webkit-autofill {
	-webkit-box-shadow: inset 0 0 0 50px #fff !important;
	-webkit-text-fill-color: var(--color-form) !important;
	color: var(--color-form) !important;
}

/* responsive */
@media screen and (max-height: 668px) {
	.container:not(.container-bg-man):not(.container-bg-woman) { padding-bottom: 16px; }

	h3, .progress-row { margin-bottom: 16px; }

	.btn-answer img { margin-bottom: 0; }
	.gender-row .btn-answer { height: 90px; }
	.flex-answer .btn-answer {  height: 50px; }

	.grid-photos { margin: 0; }
	.grid-photos::before { width: 100%; height: 48px; display: block; content: ''; position: absolute; left: 0; bottom: 0; z-index: 5; background: url('gradient.png') repeat-x 0 100%; }
}

.hidden_anim{
	-webkit-animation-name:hidden;
	        animation-name:hidden;
	-webkit-animation-duration:0.3s;
	        animation-duration:0.3s;
	-webkit-animation-timing-function:ease-in-out;
	        animation-timing-function:ease-in-out;
	visibility:hidden;
}

[hidden] { display: none; }
.p-rel { position: relative; }