@charset "UTF-8";

/*
 * Адаптив. Файл подключается ВСЕГДА (h.php), поэтому каждое правило здесь
 * обязано лежать внутри @media — иначе оно поедет на десктоп.
 *
 * Базовые размеры (десктоп) живут в main.css. Здесь меняем только то, что
 * действительно зависит от размера экрана: внешние отступы, ширину карточки,
 * ось формы и кегль. Фирменные цвета, скругления, полоса сверху и логотип
 * как элемент не трогаются — они одинаковы везде.
 *
 * Ступени:
 *   <=1180  узкий ноутбук, планшет лёжа
 *   <=900   планшет стоя
 *   <=640   телефон: форма переходит в колонку
 *   <=430   обычный телефон
 *   <=360   мелкий телефон
 *   landscape + низкий экран — телефон лёжа
 *
 * Поля ввода нигде не опускаются ниже 16px: на iOS меньший кегль заставляет
 * Safari зумить страницу при фокусе.
 */

/* ---------- Узкий ноутбук и планшет лёжа ---------- */

@media (max-width:1180px){
	body {
		padding:130px 20px 100px;
	}
	div.cutt {
		width:210px;
		height:36px;
		left:32px;
		top:40px;
	}
}

/* ---------- Планшет стоя ---------- */

@media (max-width:900px){
	body {
		padding:120px 24px 80px;
	}
	div.cutt {
		width:200px;
		height:34px;
		left:24px;
		top:32px;
	}
	section.newLinkBlock {
		width:100%;
		max-width:620px;
		padding:24px;
	}
}

/* ---------- Телефон: форма в колонку ---------- */

@media (max-width:640px){
	body {
		padding:104px 16px 40px;
		justify-content:flex-start;
	}
	div.cutt {
		width:176px;
		height:30px;
		left:16px;
		top:24px;
	}
	section.newLinkBlock {
		width:100%;
		max-width:none;
		padding:18px;
		border-radius:20px;
	}

	section.newLinkBlock form {
		display:flex;
		flex-direction:column;
		position:static;
	}
	section.newLinkBlock form input.text {
		height:52px;
		font-size:16px;
		padding:0 18px;
		order:0;
	}
	/* Кнопка выходит из инпута и встаёт под ним */
	section.newLinkBlock form input.btn {
		position:static;
		width:100%;
		height:52px;
		line-height:52px;
		font-size:16px;
		padding:0;
		margin:10px 0 0;
		order:1;
	}
	section.newLinkBlock form .message {
		order:2;
	}

	section.newLinkBlock.authBlock form {
		gap:10px;
	}
	section.newLinkBlock.authBlock form input.btn {
		margin:4px 0 0;
	}

	.message {
		font-size:15px;
		padding:16px;
		border-radius:12px;
		margin:14px 0 0;
	}
	#form .message {
		padding:16px;
	}
	.message p.link {
		font-size:18px;
		padding:12px;
		border-radius:12px;
	}
	/* QR на телефоне не должен занимать весь экран */
	.message img {
		max-width:220px;
		margin:14px auto 0;
		border-radius:12px;
	}
	.message p.share a.btn {
		font-size:16px;
		height:48px;
		line-height:48px;
		padding:0 28px;
	}

	section.newLinkBlock form input#code {
		margin:10px 0 0;
		padding:0 18px;
	}
	.codeHint {
		padding:0 18px;
		font-size:12px;
	}
	.conflictAction {
		padding:14px;
	}
	.conflictActionTitle {
		font-size:15px;
	}
	.conflictActionHint {
		font-size:13px;
	}

	.authTitle {
		font-size:20px;
	}
	.authHint {
		font-size:14px;
		margin:0 0 16px;
	}
	.authInfo {
		font-size:13px;
		margin:14px 0 0;
	}
}

/* ---------- Обычный телефон ---------- */

@media (max-width:430px){
	body {
		padding:96px 12px 32px;
	}
	div.cutt {
		width:160px;
		height:28px;
		left:12px;
		top:20px;
	}
	section.newLinkBlock {
		padding:16px;
		border-radius:18px;
	}
	section.newLinkBlock form input.text {
		height:50px;
		padding:0 16px;
	}
	section.newLinkBlock form input.btn {
		height:50px;
		line-height:50px;
	}
	.message p.link {
		font-size:17px;
	}
	.authTitle {
		font-size:19px;
	}
}

/* ---------- Мелкий телефон ---------- */

@media (max-width:360px){
	body {
		padding:88px 10px 28px;
	}
	div.cutt {
		width:142px;
		height:24px;
		left:10px;
		top:18px;
	}
	section.newLinkBlock {
		padding:14px;
		border-radius:16px;
	}
	section.newLinkBlock form input.text {
		height:48px;
		font-size:16px;
		padding:0 14px;
	}
	section.newLinkBlock form input.btn {
		height:48px;
		line-height:48px;
		font-size:15px;
	}
	.message {
		padding:14px;
		font-size:14px;
	}
	#form .message {
		padding:14px;
	}
	.message p.link {
		font-size:16px;
		padding:10px;
	}
	.message img {
		max-width:180px;
	}
	.authTitle {
		font-size:18px;
	}
	.authHint {
		font-size:13px;
		margin:0 0 14px;
	}
}

/*
 * Телефон лёжа: экран низкий, верхний отступ съедает всё.
 * max-width:900px обязателен — иначе правило поймает и десктоп,
 * если окно браузера сделать низким.
 */

@media (max-width:900px) and (orientation:landscape) and (max-height:520px){
	body {
		padding:72px 16px 24px;
		justify-content:flex-start;
	}
	div.cutt {
		width:150px;
		height:26px;
		left:16px;
		top:14px;
	}
	.message img {
		max-width:150px;
	}
}