/* Сторінка акаунта (вхід) — мобільна розкладка.

   Тема ставить #nph-back у position:absolute; bottom:0; right:0, а кнопки в
   #customer_login — width:49%; float:left. На широкому екрані це складається
   у два рівні стовпчики. На телефоні підпис "увійти через пошту" переноситься
   у два рядки, абсолютна кнопка росте вгору від нижнього краю контейнера
   і наїжджає на поле телефону. Тут обидві кнопки стають звичайними блоками. */
@media only screen and (max-width: 1023px){
	body.acc_page .nph-grid{
		position: relative;
	}
	body.acc_page #nph-back{
		position: static;
		width: 100%;
		margin-top: .6em;
	}
	/* :not(.show-password-input) — "око" в полі пароля абсолютне, його не чіпаємо */
	body.acc_page #customer_login button:not(.show-password-input),
	body.acc_page .woocommerce-MyAccount-content .hg-btn-new{
		width: 100%;
		float: none;
		justify-content: center;
		text-align: center;
	}
	body.acc_page #otp-login-form .form-row,
	body.acc_page #otp-block .form-row{
		margin-bottom: 0;
	}
	/* margin-bottom інлайном у шаблоні form-login.php — звідси !important */
	body.acc_page #phoneNumber,
	body.acc_page #otp-block input[name="otp_code"]{
		width: 100%;
		margin-bottom: .6em !important;
	}
	/* "Увійти / Реєстрація" — дві рівні половини на всю ширину замість min-width:10em */
	body.acc_page .woocommerce-MyAccount-content .tab-nav{
		display: flex;
		gap: .6em;
		padding-bottom: 1em;
	}
	body.acc_page .woocommerce-MyAccount-content .tab-nav .hg-clm{
		min-width: 0;
		flex: 1 1 50%;
		justify-content: center;
		text-align: center;
	}
}

/* Форма реєстрації: тема дає кожному рядку width:49% на будь-якій ширині
   (des_last_l.css:3528), через що на телефоні поля стають по два в ряд і плейсхолдер
   "Ім’я користувача / Логін" обрізається */
@media only screen and (max-width: 1023px){
	body.acc_page .woocommerce-form-register .form-row,
	body.acc_page .woocommerce-form-register .form-row:last-of-type{
		width: 100%;
	}
}

/* Порожнє поле — ще не помилка. Тема фарбує input#reg_email:invalid у червоне
   (des_n.css:382), і після появи required поле ставало червоним одразу на завантаженні.
   Червоне лише тоді, коли щось уведено і воно не схоже на адресу. */
body.acc_page input#reg_email:invalid:placeholder-shown{
	border-color: var(--t-col, #1C1C17);
}