		html:has(.modal-login:modal) {
			overflow: hidden;
		}
		.modal-login {
			position: fixed;
			inset: 0;
			z-index: 1000;
			display: grid;
			grid-template-rows: 100%;
			width: min(1280px, 100%);
			height: min(774px, 100dvh);
			max-width: none;
			max-height: none;
			margin: auto;
			padding: 0;
			border: none;
			overflow: hidden;
			opacity: 0;
			pointer-events: none;
			transition: opacity .2s;
			@media (width >= 1000px) {
				grid-template-columns: repeat(2, 1fr);
			}
		}
		.modal-login:modal {
			opacity: 1;
			pointer-events: auto;
			}
		.modal-login::backdrop {
				background-color: #0C0C0CBA;
			}
		.modal-login__form {
			box-sizing: border-box;
			display: none;
			grid-column: -2/-1;
			align-self: stretch;
			/* justify-content: center; */
			flex-direction: column;
			overflow: auto;
			height: 100%;
			padding-top: calc(80px + clamp(0px, (100vw - 1000px) * .1, 28px));
			padding-bottom: calc(24px + clamp(0px, (100vw - 1000px) * .1, 26px));
			padding-inline: calc(20px + clamp(0px, (100vw - 1000px) * .14285714, 40px));

			@media (width<450px) {
				justify-content: start;
			}
		}
		.modal-login__form--active {
			display: flex;
		}
		.modal-login__small-text {
			font-size: 12px;
			line-height: 20px;
			margin-top: 10px;
		}
		.modal-login__form .modal-login__link {
			text-decoration: underline;
		}
		/*.modal-login__form--otp {
			.modal-login__button {
				display: none;
			}
			.modal-login__timer {
				display: block;
			}
		}*/
		/*.modal-login__form--otp--ready {
			.modal-login__button {
				display: block;
			}
			.modal-login__timer {
				display: none;
			}
		}*/
		:nth-last-child(1 of .modal-login__field) {
			@media (width >= 450px) {
				margin-bottom: auto;
			}
		}
		:nth-last-child(1 of .modal-login__agreement) {
			@media (width < 450px) {
				margin-bottom: auto;
			}
		}
		.modal-login__close {
			position: absolute;
			top: 20px;
			right: 20px;
			width: 36px;
			height: 36px;
			background-color: transparent;
			background-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzYiIGhlaWdodD0iMzYiIHZpZXdCb3g9IjAgMCAzNiAzNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTI3IDkuNzVMOSAyNy43NSIgc3Ryb2tlPSIjODQ4NDg0IiBzdHJva2Utd2lkdGg9IjEuNSIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIi8+CjxwYXRoIGQ9Ik05IDkuNzVMMjcgMjcuNzUiIHN0cm9rZT0iIzg0ODQ4NCIgc3Ryb2tlLXdpZHRoPSIxLjUiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIvPgo8L3N2Zz4K");
			border: none;
			cursor: pointer;
		}
		.modal-login__subtitle {
			margin-bottom: 20px;
			font-size: 20px;
			line-height: 1;
			letter-spacing: 2px;
			text-align: center;
			text-transform: uppercase;
			flex-shrink: none;
		}

		.modal-login__description {
			margin-block: 16px 32px;
			font-size: 15px;
			line-height: 22px;
			text-align: center;
			flex-shrink: none;
			strong {
				display: block;
				font-weight: 400;
				font-size: 20px;
				letter-spacing: 2px;
				text-transform: uppercase;
			}
		}

		.modal-login__field {
			position: relative;
			display: grid;
			gap: 16px;
		}

		.modal-login__field + .modal-login__field {
			margin-top: 39px;
		}

		.modal-login__field.modal-login__field--otp {
			box-sizing: border-box;
			align-self: center;
			margin-block: 72px;
			width: min(100%, 360px);
		}

		.modal-login__field.modal-login__field--error {
			.modal-login__input {
				border-color: #DA3838;
			}
		}

		.modal-login__subtitle + .modal-login__field {
			margin-top: 20px;
		}

		.modal-login__label {
			font-size: 13px;
			line-height: 1;
		}

		.modal-login__input {
			appearance: none;
			padding: 16px;
			font-size: 14px;
			line-height: 1;
			border: 1px solid #000000;
		}

		input[type='tel'].modal-login__input:not(:placeholder-shown) + .modal-login__clear {
			opacity: 1;
			pointer-events: auto;
		}

		.modal-login__input--otp {
			box-sizing: border-box;
			width: 100%;
			font-size: 36px;
			line-height: 100%;
			letter-spacing: 12px;
			text-align: center;
		}

		.modal-login__clear {
			position: absolute;
			inset-block: 0;
			right: 16px;
			grid-row: 2/3;
			width: 16px;
			height: 16px;
			margin-block: auto;
			padding: 0;
			background-color: transparent;
			background-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTEyIDQuMzMzNUw0IDEyLjMzMzUiIHN0cm9rZT0iIzg0ODQ4NCIgc3Ryb2tlLXdpZHRoPSIxLjUiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIvPgo8cGF0aCBkPSJNNCA0LjMzMzVMMTIgMTIuMzMzNSIgc3Ryb2tlPSIjODQ4NDg0IiBzdHJva2Utd2lkdGg9IjEuNSIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIi8+Cjwvc3ZnPgo=");
			background-position: center;
			background-repeat: no-repeat;
			border: none;
			opacity: 0;
			pointer-events: none;
			transition: opacity .2s;
			cursor: pointer;
		}

		.modal-login__submit {
			height: 48px;
			margin-top: 36px;
			font-size: 12px;
			line-height: 1;
			letter-spacing: 2px;
			text-transform: uppercase;
			color: #ffffff;
			background-color: #D30C54;
			border: none;
			cursor: pointer;
		}

		.modal-login__submit:disabled {
				opacity: .5;
				cursor: default;
			}

		.modal-login__image {
			width: 100%;
			height: 100%;
			object-fit: cover;
			object-position: center;
			@media (max-width: 999px) {
				display: none;
			}
		}
		.modal-login__agreement {
			display: flex;
			align-items: center;
			gap: 11px;
			margin-top: 24px;
			font-size: 14px;
			line-height: 24px;
			a {
				font-weight: 700;
				color: inherit;
				text-decoration: none;
			}
		}
		.modal-login__checkbox {
			display: block !important;
			flex-shrink: 0;
			appearance: none;
			width: 16px;
			height: 16px;
			border: 1px solid #D2D2D2;
			&:checked {
				background-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPGcgY2xpcC1wYXRoPSJ1cmwoI2NsaXAwXzIyN18yKSI+CjxwYXRoIGQ9Ik0xIDhMNy4xNjgxNyAxMy40NzA5TDE1IDMiIHN0cm9rZT0iYmxhY2siIHN0cm9rZS13aWR0aD0iMiIvPgo8L2c+CjxkZWZzPgo8Y2xpcFBhdGggaWQ9ImNsaXAwXzIyN18yIj4KPHJlY3Qgd2lkdGg9IjE2IiBoZWlnaHQ9IjE2IiBmaWxsPSJ3aGl0ZSIvPgo8L2NsaXBQYXRoPgo8L2RlZnM+Cjwvc3ZnPgo=");
				background-repeat: no-repeat;
				background-position: center;
				background-size: 12px;
			}
		}
		.modal-login__button {
			margin-top: 22px;
			height: 48px;
			font-size: 12px;
			line-height: 1;
			letter-spacing: 2px;
			text-transform: uppercase;
			background-color: transparent;
			border: 1px solid;
			cursor: pointer;
		}

		.modal-login__button--small {
			width: 320px;
			align-self: center;
			box-sizing: border-box;
		}
		.modal-login__timer {
			margin-top: 22px;
			font-weight: 400;
			font-size: 15px;
			line-height: 100%;
			text-align: center;
			color: #848484;
		}
		.modal-login__error {
			font-size: 13px;
			line-height: 1;
			color: #DA3838;
		}
		.modal-login__field--otp .modal-login__error {
			text-align: center;
		}
