/* Страницы форм доставки — page-form.php, адреса /form/<город> и /form/order.
   Перенос страниц wm210.ru (/formekb, /formmsk, /order …) на свою вёрстку.

   Размеры сняты с оригинала: голубая плашка #adf8ff с отступами 120px,
   надзаголовок Montserrat 14px/600 с разрядкой 2.5px, заголовок 52px/64px,
   колонка формы 560px по центру, подписи 20px/31px обычным начертанием,
   поля высотой 60px только с нижней линией, кнопка 16px/600 с отступами
   18.8px/60px и скруглением 30px.

   Медиазапросов у Tilda на эти блоки не было — колонка просто сжималась
   вместе с контейнером. У нас узкие экраны разобраны явно, иначе заголовок
   в 52px не влезает на телефон. */

.wsn-fm-head,
.wsn-fm { font-family: 'Montserrat', Arial, sans-serif; }

.wsn-fm-head *,
.wsn-fm * { box-sizing: border-box; }

/* ---------- голубая плашка с заголовком ---------- */

.wsn-fm-head {
	padding: 120px 20px;
	background: #adf8ff;
	text-align: center;
}

.wsn-fm-head__uptitle {
	margin: 0 0 20px;
	font-size: 14px;
	font-weight: 600;
	letter-spacing: 2.5px;
	text-transform: uppercase;
	color: #000;
}

.wsn-fm-head__title {
	margin: 0;
	font-size: 52px;
	line-height: 64px;
	font-weight: 600;
	color: #000;
}

/* ---------- форма ---------- */

.wsn-fm {
	padding: 105px 20px;
	background: #fff;
}

.wsn-fm__box {
	width: 100%;
	max-width: 560px;
	margin: 0 auto;
	text-align: left;
}

.wsn-fm__field { margin-bottom: 35px; }

.wsn-fm__label {
	display: block;
	margin-bottom: 0;
	font-size: 20px;
	line-height: 31px;
	font-weight: 400;
	color: #000;
}

/* Поле — только нижняя линия, как на старой странице. Высота 60px вместе с
   линией, боковых отступов нет: текст стоит вровень с подписью. */
.wsn-fm__input {
	display: block;
	width: 100%;
	height: 60px;
	padding: 0;
	border: 0;
	border-bottom: 1px solid #000;
	border-radius: 0;
	background: transparent;
	font-family: inherit;
	font-size: 16px;
	line-height: 21px;
	color: #000;
	outline: none;
	appearance: none;
	-webkit-appearance: none;
}

.wsn-fm__input::placeholder { color: #000; opacity: .5; }

.wsn-fm__input:focus { border-bottom-color: #1084d1; }

/* Календарь у type="date" браузер рисует сам; кнопку с иконкой оставляем,
   но прижимаем к правому краю поля, чтобы не висела посередине. */
.wsn-fm__input[type="date"] { padding-right: 4px; }

/* Список: своя стрелка справа, потому что родную мы сняли appearance:none. */
.wsn-fm__select { position: relative; }

.wsn-fm__select::after {
	content: '';
	position: absolute;
	right: 6px;
	bottom: 27px;
	width: 8px;
	height: 8px;
	border-right: 2px solid #000;
	border-bottom: 2px solid #000;
	transform: rotate(45deg);
	pointer-events: none;
}

.wsn-fm__select .wsn-fm__input { padding-right: 26px; }

/* Строка текста внутри формы (на форме Москвы — про доплату за вечер). */
.wsn-fm__note {
	margin: 0 0 35px;
	font-size: 22px;
	line-height: 1.4;
	font-weight: 700;
	color: #000;
}

.wsn-fm__btn {
	display: inline-block;
	padding: 18px 60px;
	border: 1px solid #adf8ff;
	border-radius: 30px;
	background: #adf8ff;
	font-family: inherit;
	font-size: 16px;
	line-height: 22px;
	font-weight: 600;
	color: #000;
	cursor: pointer;
	transition: background-color .2s ease-in-out, border-color .2s ease-in-out;
}

.wsn-fm__btn:hover { background: #8beef8; border-color: #8beef8; }

.wsn-fm__btn[disabled] { opacity: .6; cursor: default; }

/* Незаполненное обязательное поле — красная линия; цвет и приём те же, что в
   остальных наших анкетах. */
.wsn-fm__input_bad { border-bottom-color: #d62d2d; }

.wsn-fm__error {
	margin: 14px 0 0;
	font-size: 16px;
	line-height: 1.4;
	color: #d62d2d;
}

.wsn-fm__thanks {
	margin: 0;
	font-size: 20px;
	line-height: 31px;
	color: #000;
}

/* Строка про согласие — мелкая и серая, как под другими формами сайта. */
.wsn-fm__consent {
	margin: 0 0 24px;
	font-size: 13px;
	line-height: 1.5;
	color: #7b7b83;
}

.wsn-fm__consent a { color: #7b7b83; text-decoration: underline; }

/* ---------- узкие экраны ---------- */

@media (max-width: 960px) {
	.wsn-fm-head { padding: 80px 20px; }
	.wsn-fm-head__title { font-size: 38px; line-height: 46px; }
	.wsn-fm { padding: 70px 20px; }
}

@media (max-width: 600px) {
	.wsn-fm-head { padding: 50px 20px; }
	.wsn-fm-head__uptitle { margin-bottom: 14px; }
	.wsn-fm-head__title { font-size: 28px; line-height: 34px; }
	.wsn-fm { padding: 45px 20px; }
	.wsn-fm__field { margin-bottom: 26px; }
	.wsn-fm__label { font-size: 17px; line-height: 26px; }
	.wsn-fm__input { height: 50px; }
	.wsn-fm__select::after { bottom: 22px; }
	.wsn-fm__note { font-size: 18px; margin-bottom: 26px; }
	.wsn-fm__btn { width: 100%; padding: 18px 20px; }
}