/* BXmaker AuthUserPhone — стили под Aspro Lite / эталон bonusplus.auth
 * Цвета: docs bxmaker «Кастомизация стилей компонента, цвета»
 * Эталон кнопки Aspro: .btn.btn-default → --theme-base-color (#303136), radius pill
 */

.bxmaker-auth-wrap {
	max-width: 484px;
	margin: 0 auto;
}

.auth-page.pk-page.bxmaker-auth-wrap,
.registraion-page.pk-page.bxmaker-auth-wrap {
	max-width: 560px;
}

.bxmaker-auth-wrap--popup {
	max-width: 100%;
}

#wrap_ajax_auth .bxmaker-authuserphone-enter,
#wrap_ajax_auth [class*="bxmaker-authuserphone"],
.bxmaker-auth-wrap .bxmaker-authuserphone-enter {
	font-family: inherit;
}

/* --- Цвета / кнопка / ссылки / фокус полей (под Aspro theme) --- */
body .bxmaker-authuserphone-button:focus {
	outline: none;
}

body .bxmaker-authuserphone-button .bxmaker-authuserphone-button__inner {
	background-color: var(--theme-base-color, #303136);
	border-radius: var(--theme-button-border-radius, 999px);
}

body .bxmaker-authuserphone-button:hover .bxmaker-authuserphone-button__inner {
	background-color: var(--theme-base-color-hover, var(--theme-base-color, #303136));
	filter: brightness(1.08);
}

body .bxmaker-authuserphone-button {
	border-radius: var(--theme-button-border-radius, 999px);
}

body .bxmaker-authuserphone-input-phone--focus .bxmaker-authuserphone-input-phone__field,
body .bxmaker-authuserphone-input-phone--hover .bxmaker-authuserphone-input-phone__field,
body .bxmaker-authuserphone-input-phone:hover .bxmaker-authuserphone-input-phone__field,
body .bxmaker-authuserphone-input--focus .bxmaker-authuserphone-input__field,
body .bxmaker-authuserphone-input--hover .bxmaker-authuserphone-input__field,
body .bxmaker-authuserphone-input:hover .bxmaker-authuserphone-input__field,
body .bxmaker-authuserphone-input-password--focus .bxmaker-authuserphone-input-password__field,
body .bxmaker-authuserphone-input-password--hover .bxmaker-authuserphone-input-password__field,
body .bxmaker-authuserphone-input-password:hover .bxmaker-authuserphone-input-password__field,
body .bxmaker-authuserphone-input-code--focus .bxmaker-authuserphone-input-code__field,
body .bxmaker-authuserphone-input-code--hover .bxmaker-authuserphone-input-code__field,
body .bxmaker-authuserphone-input-code:hover .bxmaker-authuserphone-input-code__field {
	border-color: var(--theme-base-color, #303136);
}

body a.bxmaker-authuserphone-link,
body a.bxmaker-authuserphone-link:visited {
	color: var(--theme-base-color, #303136);
}

body a.bxmaker-authuserphone-link:active,
body a.bxmaker-authuserphone-link:hover {
	color: var(--theme-base-color-hover, var(--theme-base-color, #303136));
}

/*
 * FZ-152 consent: визуал как Aspro .form-checkbox / licence_block
 * (форма «Заказать звонок» и др.): кастомный квадрат 24×24 + галка, текст 0.875rem.
 */
body .bxmaker-authuserphone-consent {
	margin: 8px 0 4px;
}

body .bxmaker-authuserphone-consent-button {
	--bxmaker-consent-offset: 35px;
	position: relative;
	display: block;
	margin: 0;
	padding: 0 0 0 var(--bxmaker-consent-offset);
	min-height: 24px;
	line-height: 24px;
	font-size: 0.875rem;
	font-weight: normal;
	color: var(--lite_basic_text_black, #666);
	cursor: pointer;
	outline: none;
}

body .bxmaker-authuserphone-consent-button input[type="checkbox"] {
	position: absolute !important;
	left: 0 !important;
	top: 0 !important;
	width: 24px !important;
	height: 24px !important;
	margin: 0 !important;
	opacity: 0 !important;
	visibility: visible !important;
	pointer-events: none;
	z-index: 0;
}

/* квадрат чекбокса (как .form-checkbox__box) */
body .bxmaker-authuserphone-consent-button::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 24px;
	height: 24px;
	box-sizing: border-box;
	border-radius: 4px;
	background: var(--darkerblack_bg_black, #fff);
	border: 1px solid var(--input_border_color, #ddd);
	transition: all ease 0.3s;
	z-index: 1;
}

body .bxmaker-authuserphone-consent-button:hover::before {
	box-shadow: 0 0 0 1px inset var(--theme-base-color, #303136);
	border-color: var(--theme-base-color, #303136);
}

body .bxmaker-authuserphone-consent-button:has(input:checked)::before {
	border: 8px solid var(--theme-base-color, #303136);
	background-color: var(--theme-base-color, #303136);
}

/*
 * Белая галка по центру квадрата 24×24.
 * Нельзя копировать left/top Aspro as-is: там :before внутри .form-checkbox__box,
 * у нас ::after на label — иначе галка уезжает в угол / «кривится».
 */
body .bxmaker-authuserphone-consent-button:has(input:checked)::after {
	content: "";
	position: absolute;
	left: 0;
	top: 0;
	width: 24px;
	height: 24px;
	box-sizing: border-box;
	border: none;
	background: no-repeat center / 12px 12px;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='M2.5 6.2L5 8.7L9.5 3.5'/%3E%3C/svg%3E");
	transform: none;
	z-index: 2;
	pointer-events: none;
}

body .bxmaker-authuserphone-consent-button:has(input:checked) {
	color: var(--white_text_black, #333);
}

body .bxmaker-authuserphone-consent-button > span {
	display: inline;
	vertical-align: top;
}

/* ссылки в тексте согласия — как licences_text */
body .bxmaker-authuserphone-consent-button a,
body .bxmaker-authuserphone-consent-button a:visited {
	color: var(--theme-base-color, #303136);
	text-decoration: underline;
	pointer-events: auto;
	cursor: pointer;
	position: relative;
	z-index: 2;
}

body .bxmaker-authuserphone-consent-button a:hover,
body .bxmaker-authuserphone-consent-button a:active {
	color: var(--theme-base-color-hover, var(--theme-base-color, #303136));
	text-decoration: underline;
}

/* формы Aspro (звонок и др.): ссылки в блоке согласия заметны */
body .form .licence_block a,
body .form .licence_block a:visited {
	color: var(--theme-base-color, #303136);
	text-decoration: underline;
}

body .form .licence_block a:hover,
body .form .licence_block a:active {
	color: var(--theme-base-color-hover, var(--theme-base-color, #303136));
	text-decoration: underline;
}

body .bxmaker-authuserphone-input-phone__validation,
body .bxmaker-authuserphone-message--error {
	color: #c62828;
}

/* Типографика ближе к Aspro form-header */
body .bxmaker-authuserphone-enter-auth__title,
body .bxmaker-authuserphone-header {
	font-size: 24px;
	font-weight: 600;
	color: #222;
	text-align: center;
}

body .bxmaker-authuserphone-enter input[type="tel"],
body .bxmaker-authuserphone-enter input[type="text"],
body .bxmaker-authuserphone-enter input[type="password"] {
	font-size: 16px;
}

/*
 * Aspro .jqmWindow input:focus (form.css) вешает на внутренний input
 * border:1px + radius:0 — квадратная рамка поверх скруглённого __field,
 * из‑за этого в фокусе «ломаются» уголки бордера. Бордер только у __field.
 */
body .bxmaker-authuserphone-enter input[type="tel"]:focus,
body .bxmaker-authuserphone-enter input[type="text"]:focus,
body .bxmaker-authuserphone-enter input[type="password"]:focus,
body .bxmaker-authuserphone-enter input[type="email"]:focus,
.jqmWindow .bxmaker-authuserphone-enter input[type="tel"]:focus,
.jqmWindow .bxmaker-authuserphone-enter input[type="text"]:focus,
.jqmWindow .bxmaker-authuserphone-enter input[type="password"]:focus,
.jqmWindow .bxmaker-authuserphone-enter input[type="email"]:focus {
	border: 0 !important;
	box-shadow: none !important;
	outline: none !important;
	background-color: transparent !important;
}

/* Поля ближе к Aspro .form-control */
body .bxmaker-authuserphone-input-phone__field,
body .bxmaker-authuserphone-input__field,
body .bxmaker-authuserphone-input-password__field,
body .bxmaker-authuserphone-input-code__field {
	border-radius: 8px;
	border-color: #ddd;
}

/* Скрыть вход по паролю — на сайте только телефон+SMS */
body .bxmaker-authuserphone-enter-auth-form__by {
	display: none;
}

/*
 * Реальный мобильный: Aspro @media (max-width:430px) ставит .jqmWindow
 * top:0 + min-height:100% + transform:none — форма прилипает к шапке.
 * DevTools часто не воспроизводит (нет sticky mobile-header / address bar).
 * Возвращаем центрирование только для auth popup.
 */
@media (max-width: 430px) {
	.jqmWindow.auth_frame.popup,
	.jqmWindow.auth_frame {
		top: 50% !important;
		bottom: auto !important;
		left: 50% !important;
		right: auto !important;
		transform: translate(-50%, -50%) !important;
		width: calc(100% - 32px) !important;
		max-width: 460px !important;
		min-height: 0 !important;
		max-height: calc(100dvh - 32px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px)) !important;
		border-radius: 12px !important;
		border-radius: var(--theme-outer-border-radius, 12px) !important;
		padding: 0 !important;
		overflow: auto !important;
		-webkit-overflow-scrolling: touch;
	}

	.jqmWindow.auth_frame.popup > .scrollbar,
	.jqmWindow.auth_frame > .scrollbar {
		max-height: inherit;
		height: auto;
	}
}