/*
 * Страница расчёта на витрине.
 *
 * Опирается на переменные и кнопки лендинга (landing.css, promo.css) — здесь
 * только то, чего там нет: сетка «прайс + панель расчёта», карточка позиции и
 * окно заявки. Своей палитры не заводим: страница должна выглядеть частью
 * сайта, а не отдельным приложением.
 */

/* Скрытое — скрыто. Кнопки лендинга объявлены inline-flex, и это перебивает
   атрибут hidden: «Очистить» оставалась на экране при пустом расчёте. */
.rasch [hidden], .rasch-modal [hidden] { display: none !important; }

.rasch-lead {
	max-width: 62ch;
	margin: 0 auto;
	color: var(--muted, #6b7a84);
	font-size: 17px;
	line-height: 1.55;
	text-align: center;
}
.rasch-hint {
	max-width: 62ch;
	margin: 14px auto 0;
	padding: 10px 14px;
	border-left: 3px solid var(--accent, #1f6f9e);
	background: rgba(31, 111, 158, .06);
	color: var(--muted, #6b7a84);
	font-size: 14px;
	line-height: 1.5;
}

/* Ссылка на свои расчёты. Тише подсказки: тем, кто зашёл впервые, она не
   нужна вовсе, а вернувшийся ищет её глазами и найдёт по ссылке. */
.rasch-mine {
	margin: 12px auto 0;
	color: var(--muted, #6b7a84);
	font-size: 14px;
	text-align: center;
}
.rasch-mine a { color: var(--accent, #1f6f9e); }

/* ——— сетка страницы ——— */

.rasch { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 28px; align-items: start;
	padding-bottom: 60px; }
.rasch__main { min-width: 0; }
.rasch__side { position: sticky; top: 90px; }

.rasch-block + .rasch-block { margin-top: 34px; }
.rasch-block__title { margin: 0 0 14px; font-size: 22px; }
.rasch-group { margin: 22px 0 10px; color: var(--muted, #6b7a84); font-size: 14px; font-weight: 600; }

.rasch-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px; }

/* ——— карточка позиции ——— */

.rasch-item { display: flex; flex-direction: column; gap: 10px; padding: 16px 18px;
	border: 1px solid var(--line, #e2e9ee); border-radius: 12px; background: #fff; }
.rasch-item__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px; }
.rasch-item__name { font-size: 15px; font-weight: 600; line-height: 1.35; }
.rasch-item__price { color: var(--ink, #1c2b33); font-size: 15px; font-weight: 600; white-space: nowrap; }

.rasch-periods { display: flex; flex-wrap: wrap; gap: 6px; }
.rasch-period { padding: 6px 10px; border: 1px solid var(--line, #e2e9ee); border-radius: 8px;
	background: #fff; color: var(--ink, #1c2b33); font: inherit; font-size: 13px; cursor: pointer; }
.rasch-period span { color: #2f7d43; font-size: 12px; }
.rasch-period:hover { border-color: #9fcbe6; }
.rasch-period.is-active { border-color: #63b36b; background: #e8f7ea; }

.rasch-item__foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: auto; }
.rasch-users { display: flex; align-items: center; gap: 8px; color: var(--muted, #6b7a84); font-size: 13px; }
.rasch-users input { width: 64px; padding: 6px 8px; border: 1px solid var(--line, #e2e9ee);
	border-radius: 8px; font: inherit; font-size: 14px; }
.rasch-add { white-space: nowrap; }

/* ——— панель расчёта ——— */

.rasch-cart { padding: 18px 20px; border: 1px solid var(--line, #e2e9ee); border-radius: 14px; background: #fff; }
.rasch-cart__title { margin: 0 0 12px; font-size: 17px; }
.rasch-cart__empty { margin: 0; color: var(--muted, #6b7a84); font-size: 14px; line-height: 1.5; }
.rasch-cart__lines { max-height: 46vh; overflow-y: auto; }

.rasch-line { display: grid; grid-template-columns: 1fr auto auto; gap: 8px; align-items: baseline;
	padding: 10px 0; border-bottom: 1px solid #eef3f6; }
.rasch-line__text b { display: block; font-size: 14px; font-weight: 600; line-height: 1.35; }
.rasch-line__text span { color: var(--muted, #6b7a84); font-size: 12px; }
.rasch-line__sum { font-size: 14px; font-weight: 600; white-space: nowrap; }
.rasch-line__drop { padding: 0 4px; border: 0; background: none; color: var(--muted, #6b7a84);
	font-size: 18px; line-height: 1; cursor: pointer; }
.rasch-line__drop:hover { color: #b3563f; }

.rasch-cart__total { margin: 14px 0; padding-top: 12px; border-top: 1px solid var(--line, #e2e9ee); }
.rasch-cart__row { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.rasch-cart__row b { font-size: 20px; }
.rasch-cart__row--soft { margin-top: 4px; color: var(--muted, #6b7a84); font-size: 13px; }
.rasch-cart .btn { margin-top: 8px; width: 100%; }
/* Пока в расчёте пусто, кнопка не должна выглядеть готовой к нажатию. */
.rasch-cart .btn:disabled { opacity: .45; cursor: not-allowed; }

/* ——— окно заявки ——— */

.rasch-modal { position: fixed; inset: 0; z-index: 80; display: flex; align-items: center; justify-content: center;
	padding: 20px; }
.rasch-modal[hidden] { display: none; }
.rasch-modal__back { position: absolute; inset: 0; background: rgba(16, 43, 58, .45); }
.rasch-modal__box { position: relative; width: 100%; max-width: 430px; padding: 26px 28px;
	border-radius: 16px; background: #fff; box-shadow: 0 20px 60px rgba(16, 43, 58, .25); }
.rasch-modal__box h2 { margin: 0 0 6px; font-size: 21px; }
.rasch-modal__note { margin: 0 0 18px; color: var(--muted, #6b7a84); font-size: 14px; line-height: 1.5; }
.rasch-modal__x { position: absolute; top: 12px; right: 14px; border: 0; background: none;
	color: var(--muted, #6b7a84); font-size: 24px; line-height: 1; cursor: pointer; }

.rasch-field { display: block; margin-bottom: 14px; }
.rasch-field span { display: block; margin-bottom: 5px; font-size: 13px; font-weight: 600; }
.rasch-field em { color: var(--muted, #6b7a84); font-style: normal; font-weight: 400; }
.rasch-field input, .rasch-field textarea { width: 100%; padding: 11px 13px; border: 1px solid var(--line, #e2e9ee);
	border-radius: 10px; background: #fff; font: inherit; font-size: 15px; box-sizing: border-box; }
.rasch-field textarea { resize: vertical; }

.rasch-form__error { margin: 0 0 12px; padding: 10px 12px; border-radius: 8px; background: #fdecea;
	color: #a33a28; font-size: 14px; }
.rasch-form__legal { margin: 12px 0 0; color: var(--muted, #6b7a84); font-size: 12px; line-height: 1.5; }

.rasch-done { text-align: center; }
.rasch-done__mark { width: 46px; height: 46px; margin: 0 auto 12px; border-radius: 50%;
	background: #e8f7ea; color: #2f7d43; font-size: 24px; line-height: 46px; }
.rasch-done h3 { margin: 0 0 8px; font-size: 19px; }
.rasch-done p { margin: 0; color: var(--muted, #6b7a84); font-size: 14px; line-height: 1.55; }

.rasch-form__again { display: block; margin: 10px auto 0; }
.rasch-done__number { margin: 0 0 8px; font-size: 15px; font-weight: 600; }
.rasch-done__acts { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-top: 16px; }
.rasch-done__acts .btn { flex: 1 1 auto; }

body.rasch-locked { overflow: hidden; }

/* ——— страница расчёта по ссылке ——— */

.raschview { max-width: 720px; padding: 40px 0 60px; }
.raschview__card { padding: 26px 28px; border: 1px solid var(--line, #e2e9ee); border-radius: 14px; background: #fff; }
.raschview__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px;
	padding-bottom: 16px; border-bottom: 2px solid #14313f; }
.raschview__head h1 { margin: 0; font-size: 22px; }
.raschview__meta { margin: 4px 0 0; color: var(--muted, #6b7a84); font-size: 13px; }
.raschview__brand { color: #14313f; font-size: 15px; font-weight: 700; text-decoration: none; white-space: nowrap; }

.raschview__lines { width: 100%; margin: 14px 0 0; border-collapse: collapse; }
.raschview__lines td { padding: 10px 4px; border-bottom: 1px solid #eef3f6; vertical-align: top; }
.raschview__lines b { font-size: 15px; }
.raschview__lines span { display: block; margin-top: 2px; color: var(--muted, #6b7a84); font-size: 13px; }
.raschview__no { width: 26px; color: #a3b6c1; }
.raschview__sum { text-align: right; white-space: nowrap; font-weight: 600; }

.raschview__total { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px;
	margin-top: 18px; padding: 15px 18px; border: 1px solid #cfe0ea; border-left: 4px solid #2f7d43; background: #f4faf6; }
.raschview__total span { display: block; color: #5d7684; font-size: 12px; text-transform: uppercase; }
.raschview__total b { font-size: 22px; }
.raschview__inst { color: #5d7684; font-size: 13px; text-transform: none !important; }
.raschview__comment { margin: 14px 0 0; padding: 12px 14px; background: #f7fafc; border-left: 3px solid #dde8ee; font-size: 14px; }
.raschview__acts { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; }
.raschview__note { margin: 16px 0 0; color: var(--muted, #6b7a84); font-size: 13px; line-height: 1.55; }

/* ——— мои расчёты ——— */

.raschmine { max-width: 760px; padding: 40px 0 60px; }
.raschmine__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 22px; }
.raschmine__head h1 { margin: 0; font-size: 26px; }
.raschmine__who { margin: 4px 0 0; color: var(--muted, #6b7a84); font-size: 14px; }
.raschmine__empty { padding: 30px 0; text-align: center; }
.raschmine__empty h1 { margin: 0 0 10px; font-size: 24px; }
.raschmine__empty p { max-width: 52ch; margin: 0 auto 18px; color: var(--muted, #6b7a84); line-height: 1.6; }
/* Вход — под кнопкой и мельче её: собрать расчёт можно и без входа, а войти
   имеет смысл только тому, кто уже считал. */
.raschmine__empty .raschmine__enter { margin: 16px auto 0; font-size: 14px; }
.raschmine__enter a { color: var(--accent, #1f6f9e); }

.raschmine__list { display: flex; flex-direction: column; gap: 10px; }
.raschmine__item { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px;
	padding: 14px 18px; border: 1px solid var(--line, #e2e9ee); border-radius: 12px; background: #fff; }
.raschmine__meta b { display: block; font-size: 15px; }
.raschmine__meta span { color: var(--muted, #6b7a84); font-size: 13px; }
.raschmine__sum { font-size: 17px; font-weight: 600; white-space: nowrap; }
.raschmine__acts { display: flex; align-items: center; gap: 12px; }
.raschmine__note { margin: 18px 0 0; color: var(--muted, #6b7a84); font-size: 13px; }
.raschmine__saved { margin: 0 0 16px; padding: 10px 14px; border-radius: 10px;
	background: #e8f7ea; color: #2f7d43; font-size: 14px; }

/* ——— реквизиты компании ——— */

.raschreq { margin-top: 26px; padding: 16px 20px; border: 1px solid var(--line, #e2e9ee);
	border-radius: 12px; background: #fff; }
.raschreq__cap { display: flex; align-items: baseline; gap: 10px; font-size: 16px; font-weight: 600; cursor: pointer; }
.raschreq__cap span { color: var(--muted, #6b7a84); font-size: 13px; font-weight: 400; }
.raschreq__why { margin: 12px 0 0; color: var(--muted, #6b7a84); font-size: 14px; }
.raschreq__form { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px 16px;
	margin-top: 16px; align-items: end; }
.raschreq__form .rasch-field { margin: 0; }
.raschreq__wide { grid-column: span 2; }
.raschreq__form .btn { grid-column: 1 / -1; justify-self: start; }

/* ——— менеджер ——— */

.raschman { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin-top: 22px;
	padding: 16px 20px; border: 1px solid var(--line, #e2e9ee); border-radius: 12px; background: #f7fafc; }
.raschman__ava { width: 44px; height: 44px; border-radius: 50%; background: #14313f; color: #fff;
	display: flex; align-items: center; justify-content: center; font-size: 18px; font-weight: 600; }
.raschman__body { flex: 1 1 200px; }
.raschman__body b { display: block; font-size: 15px; }
.raschman__body span { color: var(--muted, #6b7a84); font-size: 13px; }
.raschman__acts { display: flex; flex-wrap: wrap; gap: 8px; }

@media (max-width: 620px) { .raschreq__wide { grid-column: span 1; } }
.raschmine__more { margin: 24px 0 0; }
.raschmine__more a { color: var(--accent, #1f6f9e); }

/* ——— телефон ——— */

@media (max-width: 900px) {
	.rasch { grid-template-columns: 1fr; gap: 18px; }

	/* Панель уезжает вниз экрана и поднимается, только когда в ней что-то есть:
	   пустая полоса поверх прайса мешала бы выбирать. */
	.rasch__side { position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
		transform: translateY(110%); transition: transform .2s ease; }
	.rasch__side.is-filled { transform: translateY(0); }
	.rasch-cart { border-radius: 16px 16px 0 0; box-shadow: 0 -8px 30px rgba(16, 43, 58, .16); }
	.rasch-cart__lines { max-height: 30vh; }
	.rasch__main { padding-bottom: 40px; }
}

@media (prefers-reduced-motion: reduce) {
	.rasch__side { transition: none; }
}