/*
Theme Name: Massage
Theme URI: https://nn.massage.spb.ru/
Author: Massage для здоровья
Description: Тема сайта сети студий «Массаж для здоровья». Вёрстка перенесена на WordPress, контент управляется через ACF Pro. Структура URL сохранена со старого сайта massage.spb.ru.
Version: 2.4.0
Requires at least: 6.0
Tested up to: 7.0
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: massage
Tags: custom-menu, featured-images, translation-ready
*/

/*
 * Основные стили лежат в assets/css/ (файлы из вёрстки):
 *   style.css        — базовая вёрстка всех страниц
 *   contacts.css     — внутренние страницы, студии, контакты
 *   info.css         — карточка вида массажа
 *   lk.css           — личный кабинет
 *   hard.css         — онлайн-запись
 *   checkout-*.css   — оформление сертификата и абонемента
 *   sf-pro.css       — шрифты SF Pro
 *
 * Этот файл нужен WordPress для распознавания темы. Правки вёрстки —
 * в assets/css/, свои дополнения можно писать ниже.
 */

/* --------------------------------------------------------------------------
 * Правки поверх вёрстки. Пишем здесь, а не в assets/css/: те файлы приходят
 * от верстальщика и перезаписываются при обновлении вёрстки.
 * -------------------------------------------------------------------------- */

/* Логотип обёрнут в ссылку на главную — в вёрстке это просто картинки. */
.header_logo_link {
	display: flex;
	align-items: center;
}

/*
 * Телефон в шапке не переносится: «+7 812 926 85 86» разрывался после «85».
 * В вёрстке у .svyaz max-width 130 px — номеру не хватает десяти пикселей.
 * Даём 140: снимать ограничение целиком нельзя, блок отбирает место
 * у кнопки записи и её текст уезжает в две строки.
 */
@media (min-width: 768px) {
	.svyaz {
		max-width: 140px;
	}
}

.svyaz a.tel {
	white-space: nowrap;
}

/*
 * Фото активного слайда в карусели видов массажа не было видно.
 * Картинка и градиент лежат на z-index −1, а карточка не создаёт контекста
 * наложения — браузер уводит их за её собственный фон #EEF9FF. У соседних
 * слайдов контекст появляется случайно, из-за opacity .45, поэтому фото там
 * есть; у активного opacity: 1 — и фото пропадает.
 */
.types_item {
	isolation: isolate;
}

/*
 * Значки магазинов без ссылки выводятся тегом span — вёрстка задаёт ширину
 * только для a, и картинки слипались. Повторяем те же правила.
 */
.stores_btns span {
	display: block;
	width: 48%;
}

.stores_btns span img {
	width: 100%;
	max-width: 100%;
}

/*
 * В вёрстке «другие виды массажа в СПб» — это span.green.underline, у нас
 * ссылка на все виды массажа. Повторяем вид вёрстки, а подчёркивание убираем
 * при наведении — иначе ссылка ничем не отзывается на курсор.
 */
a.green.underline {
	color: #89966f;
	font-weight: 600;
	text-decoration: underline;
}

a.green.underline:hover {
	text-decoration: none;
}

/*
 * Карту студий рисует скрипт: у виджета в вёрстке размеры заданы для iframe,
 * а тут карта лежит прямо в контейнере — повторяем их.
 */
.map.is-ready {
	position: relative;
	height: 500px;
	margin: 30px auto;
	border-radius: 30px;
	overflow: hidden;
}

/*
 * Карта строится в своём слое поверх запасного виджета: пока она не готова,
 * виджет остаётся на месте, и пустоты вместо карты не бывает.
 */
.map__canvas {
	position: absolute;
	inset: 0;
}

/*
 * Страница кабинета: заголовок в вёрстке был абзацем, у нас это h1, а общий
 * стиль h1 на десктопе центрирует текст. И карта тут стоит первой — верхний
 * отступ ей не нужен.
 */
.studiya .studio_title {
	width: auto;
	text-align: left;
}

.studiya .map.is-ready {
	margin-top: 0;
}

/* Карточка студии, открытая по метке на карте. */
.contacts_selected .studio_item {
	margin-top: 20px;
}

/*
 * Отступ сверху у блока «контакты» на экране — 100 вместо 200 из вёрстки.
 * Меняем только верхний: нижний в 200 оставляем, а у .massage-contacts он и
 * вовсе свой. Правим здесь, а не в assets/css/contacts.css, — тот файл
 * приходит от верстальщика и перезаписывается при обновлении вёрстки.
 */
@media (min-width: 768px) {
	.contacts {
		margin-top: 100px;
	}
}

/*
 * Кнопки в карточке массажиста одной ширины. В вёрстке правило задано только
 * для ссылок (.masters .studio_buttons a), а «Подробнее» у нас — button:
 * он открывает окно, а не ведёт на страницу.
 */
/* Кнопке-элементу нужны те же правила, что вёрстка задаёт ссылке. */
.masters .studio_buttons button.studio_btn_more {
	box-sizing: border-box;
	font-family: inherit;
	background: transparent;
	cursor: pointer;
}

@media (min-width: 768px) {
	.masters .studio_buttons > * {
		box-sizing: border-box;
		width: 49%;
	}
}

/*
 * Шапка зафиксирована, а у раздела массажистов своего отступа сверху в вёрстке
 * нет — заголовок уезжал под шапку. Берём те же значения, что у каталога цен.
 */
.masters {
	margin-top: 80px;
	margin-bottom: 30px;
}

@media (min-width: 768px) {
	.masters {
		margin-top: 100px;
		margin-bottom: 80px;
	}
}

/*
 * Картинка карточки акции лежит на z-index −1, а у карточки свой тёмный фон —
 * та же история, что была со слайдером видов массажа: без своего контекста
 * наложения фото уходит за фон и карточка выглядит пустой.
 */
.articles_card {
	isolation: isolate;
}

/*
 * Выбор массажистов. В вёрстке это шторка снизу только для телефона; поле
 * стало множественным, поэтому на экране показываем тот же список окном,
 * а само поле — кнопкой с перечнем выбранного.
 */
.booking__masters-field {
	display: block;
}

.booking__masters-button {
	width: 100%;
	height: 42px;
	padding: 0 42px 0 14px;
	color: #444;
	font: inherit;
	font-size: 14px;
	text-align: left;
	background-color: #fff;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 12'%3E%3Cpath d='m2 2 8 8 8-8' fill='none' stroke='%233a3a3a' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 16px center;
	background-size: 14px 9px;
	border: 1px solid #c9c9c9;
	border-radius: 14px;
	cursor: pointer;
}

/*
 * Подложка всегда на месте и лишь прозрачна: если прятать её через display,
 * шторка не успевает получить начальное положение и выезд не анимируется.
 */
.booking-sheet {
	position: fixed;
	z-index: 1200;
	inset: 0;
	display: flex;
	align-items: flex-end;
	visibility: hidden;
	opacity: 0;
	background: rgba(0, 0, 0, .5);
	transition: opacity .28s ease, visibility 0s linear .28s;
}

.booking-sheet.is-open {
	visibility: visible;
	opacity: 1;
	transition: opacity .28s ease;
}

.booking-sheet[hidden] {
	display: none;
}

.booking-sheet .booking-master-sheet {
	display: block;
	width: 100%;
	max-height: 86dvh;
	transform: translateY(100%);
	transition: transform .28s ease;
}

.booking-sheet.is-open .booking-master-sheet {
	transform: none;
}

/* Пока тянут пальцем — без анимации, шторка идёт за пальцем. */
.booking-sheet.is-dragging .booking-master-sheet {
	transition: none;
}

.booking-master-sheet__handle {
	touch-action: none;
	cursor: grab;
}

/* Окно «Записаться в лист ожидания» — форма как на старом сайте. */
.wait-modal {
	position: fixed;
	z-index: 1200;
	inset: 0;
	display: none;
	padding: 16px;
	overflow-y: auto;
	background: rgba(0, 0, 0, .72);
}

.wait-modal.is-open {
	display: grid;
	place-items: center;
}

.wait-modal[hidden] {
	display: none;
}

.wait-modal .ui-modal {
	max-width: 520px;
	margin: auto;
	padding-top: 42px;
}

.wait-modal .ui-modal__title {
	margin-top: 0;
}

.wait-modal .ui-modal__text {
	margin-bottom: 20px;
	color: #777;
	font-size: 14px;
	text-align: center;
}

.wait-modal__row {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 12px;
}

.wait-modal input,
.wait-modal select {
	width: 100%;
	height: 46px;
	padding: 0 14px;
	color: #2f2f2f;
	font: inherit;
	font-size: 15px;
	background: #fff;
	border: 1px solid #e3e3e3;
	border-radius: 14px;
}

/* Своя стрелка вместо браузерной: у неё вид и место свои в каждой системе. */
.wait-modal select {
	appearance: none;
	-webkit-appearance: none;
	padding-right: 42px;
	cursor: pointer;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 12'%3E%3Cpath d='m2 2 8 8 8-8' fill='none' stroke='%232f2f2f' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 16px center;
	background-size: 14px 9px;
}

.wait-modal select::-ms-expand {
	display: none;
}

.wait-modal input:focus,
.wait-modal select:focus {
	border-color: #89966f;
	outline: none;
}

.wait-modal__phone {
	margin-top: 12px;
}

.wait-modal__time {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 12px;
	margin-top: 12px;
	color: #777;
	font-size: 13px;
}

.wait-modal__time label {
	display: grid;
	gap: 6px;
}

.wait-modal__result {
	margin: 16px 0 0;
	padding: 12px 16px;
	font-size: 14px;
	text-align: center;
	background: #f2f4ee;
	border: 1px solid #89966f;
	border-radius: 14px;
}

.wait-modal__result.is-error {
	background: #fdf1f1;
	border-color: #c0564f;
}

.wait-modal__result[hidden] {
	display: none;
}

/* Значок метро из CRM ставим на место встроенного. */
.studio_info_metro-icon {
	width: 30px;
	height: 20px;
	object-fit: contain;
	vertical-align: middle;
}

/*
 * Карточки сертификатов: у перевёрнутой карточки лицевая сторона перекрывала
 * кнопку, и клик уходил в переворот вместо перехода на оформление.
 */
.certificate_card.flipped .certificate_card_frontside {
	pointer-events: none;
}

.certificate_card:not(.flipped) .certificate_card_backside {
	pointer-events: none;
}

.certificate_card.flipped .certificate_card_backside {
	z-index: 3;
	pointer-events: auto;
}

/* Кнопки записи в вёрстке не отзывались на курсор. */
.booking__submit,
.booking__wait,
.booking__add {
	transition: background .2s ease, color .2s ease, border-color .2s ease;
}

.booking__submit:hover:not(:disabled) {
	background: #78855f;
}

.booking__submit:disabled {
	cursor: default;
	opacity: .7;
}

.booking__wait:hover:not(:disabled),
.booking__add:hover {
	color: #fff;
	background: #2f2f2f;
	border-color: #2f2f2f;
}

.booking__add:hover svg path {
	stroke: #fff;
}

/* Заказ: между записями нужен воздух — в вёрстке они стояли вплотную. */
.booking__order [data-booking-summary] {
	display: grid;
	gap: 12px;
	margin-bottom: 12px;
}

/* Запись, время которой заняли, пока клиент заполнял форму. */
.booking__order .appointment.is-taken {
	border-color: #c0564f;
	background: #fdf1f1;
}

/* Подсказка после «Создать ещё одну запись». */
.booking__hint {
	margin: 0 0 16px;
	padding: 14px 18px;
	color: #2f2f2f;
	font-size: 15px;
	line-height: 1.4;
	background: #f2f4ee;
	border: 1px solid #89966f;
	border-radius: 18px;
}

.booking__hint[hidden] {
	display: none;
}

/* Оформление сертификата: выбранная форма и способ доставки. */
.checkout-panel__choice[aria-pressed="true"] {
	border-color: #89966f;
	box-shadow: inset 0 0 0 1px #89966f;
}

.checkout-panel__delivery-address[hidden],
[data-sert-delivery][hidden],
[data-sert-studio-field][hidden],
.dostavka[hidden] {
	display: none;
}

/* Количество сеансов — плитками, как в макете. */
.checkout-panel__field-label {
	margin: 18px 0 10px;
	color: #777;
	font-size: 14px;
}

.checkout-panel__sessions {
	display: grid;
	grid-template-columns: repeat(6, 1fr);
	gap: 8px;
}

.checkout-panel__session {
	box-sizing: border-box;
	min-height: 44px;
	padding: 8px 4px;
	color: #2f2f2f;
	font: inherit;
	font-size: 16px;
	text-align: center;
	background: #fff;
	border: 1px solid #e3e3e3;
	border-radius: 12px;
	cursor: pointer;
	transition: border-color .2s ease, color .2s ease;
}

.checkout-panel__session:hover {
	border-color: #89966f;
}

.checkout-panel__session.is-active {
	color: #4d5a33;
	border-color: #89966f;
	box-shadow: inset 0 0 0 1px #89966f;
}

@media (max-width: 767px) {
	.checkout-panel__sessions {
		grid-template-columns: repeat(4, 1fr);
	}
}

/*
 * Оформление абонемента: список выбранных конфигураций. В вёрстке карточка
 * была одна и с готовыми цифрами — здесь их считает справочник CRM.
 */
.checkout-panel__order {
	display: grid;
	gap: 6px;
	padding: 12px 0;
	border-bottom: 1px solid #ededed;
}

.checkout-panel__order:last-child {
	border-bottom: 0;
}

.checkout-panel__order-name {
	font-size: 16px;
	font-weight: 500;
}

.checkout-panel__order-meta {
	color: #777;
	font-size: 14px;
}

.checkout-panel__notice.is-error {
	color: #c0564f;
}

.checkout-panel__notice.is-ok {
	color: #4d5a33;
}

.checkout-panel__notice[hidden] {
	display: none;
}

.checkout-panel__price-old[hidden] {
	display: none;
}

/* Окна онлайн-оплаты из вёрстки. Лежат в подвале, открываются ссылкой. */
.pay-modal .ui-modal[hidden] {
	display: none;
}

/* Поля в окне идут во всю ширину — в вёрстке они такие же, как в формах. */
.pay-modal .reg-auth__field {
	box-sizing: border-box;
	width: 100%;
	max-width: none;
	margin-top: 12px;
}

.pay-modal .reg-auth__field input {
	box-sizing: border-box;
	width: 100%;
	height: 50px;
}

.pay-modal__amount {
	position: relative;
}

.pay-modal__amount span {
	position: absolute;
	top: 50%;
	right: 18px;
	color: #777;
	transform: translateY(-50%);
}

/* Поле суммы без значка слева, поэтому отступы задаём сами. */
.pay-modal__amount input {
	padding: 0 42px 0 18px;
}

.pay-modal__submit strong {
	font-weight: 500;
}

.pay-modal__result {
	margin: 14px 0 0;
	padding: 12px 16px;
	font-size: 14px;
	text-align: center;
	background: #f2f4ee;
	border: 1px solid #89966f;
	border-radius: 14px;
}

.pay-modal__result.is-error {
	background: #fdf1f1;
	border-color: #c0564f;
}

.pay-modal__result[hidden] {
	display: none;
}

/* Прежние стили окон страницы оплаты. */
.pay-modal {
	position: fixed;
	z-index: 1200;
	inset: 0;
	display: none;
	padding: 16px;
	overflow-y: auto;
	background: rgba(0, 0, 0, .72);
}

.pay-modal.is-open {
	display: grid;
	place-items: center;
}

.pay-modal[hidden] {
	display: none;
}

.pay-modal .ui-modal {
	max-width: 520px;
	margin: auto;
	padding-top: 42px;
	text-align: center;
}

.pay-modal .ui-modal__title {
	margin-top: 0;
}

.pay-modal .ui-modal__img svg {
	display: block;
	margin: 28px auto;
}

/* Значков два — показываем тот, что подходит по состоянию оплаты. */
.pay-modal .ui-modal__img svg {
	display: none;
}

.pay-modal .ui-modal__img[data-kind="ok"] svg[data-pay-icon="ok"],
.pay-modal .ui-modal__img[data-kind="fail"] svg[data-pay-icon="fail"] {
	display: block;
}

.pay-modal .ui-modal__actions {
	display: grid;
	gap: 12px;
}

.pay-modal .ui-modal__button {
	box-sizing: border-box;
	width: 100%;
	min-height: 48px;
	padding: 12px 24px;
	color: #fff;
	font: inherit;
	font-size: 16px;
	text-align: center;
	text-decoration: none;
	background: #89966f;
	border: 1px solid #89966f;
	border-radius: 18px;
	cursor: pointer;
}

.pay-modal .ui-modal__button:hover {
	background: #78855f;
}

/* Форма онлайн-оплаты: своей вёрстки у страницы нет, собрана из общих полей. */
.pay-form {
	display: grid;
	max-width: 640px;
	gap: 16px;
	margin: 32px 0 0;
}

.pay-form__field {
	display: grid;
	gap: 6px;
	color: #777;
	font-size: 14px;
}

.pay-form input,
.pay-form select,
.pay-form textarea {
	width: 100%;
	padding: 12px 16px;
	color: #2f2f2f;
	font: inherit;
	font-size: 16px;
	background: #fff;
	border: 1px solid #e3e3e3;
	border-radius: 14px;
}

.pay-form input:focus,
.pay-form select:focus,
.pay-form textarea:focus {
	border-color: #89966f;
	outline: none;
}

.pay-form__submit {
	width: 100%;
	max-width: 320px;
	border: 0;
	cursor: pointer;
}

.pay-form__result {
	margin: 0;
	padding: 14px 18px;
	font-size: 15px;
	text-align: center;
	background: #f2f4ee;
	border: 1px solid #89966f;
	border-radius: 18px;
}

.pay-form__result.is-error {
	background: #fdf1f1;
	border-color: #c0564f;
}

.pay-form__result[hidden] {
	display: none;
}

.pay-form .booking__agreement {
	max-width: 420px;
	margin: 0;
	text-align: left;
}

/*
 * Полоса дней прокручивается вбок, как полоса рубрик в статьях: своей
 * полосы прокрутки нет, мышью её тянут, у краёв — затемнение.
 */
.booking__dates-wrap {
	position: relative;
}

.booking .booking__dates {
	overflow-x: auto;
	overflow-y: hidden;
	scrollbar-width: none;
	-webkit-overflow-scrolling: touch;
	overscroll-behavior-x: contain;
	cursor: grab;
}

.booking .booking__dates::-webkit-scrollbar {
	height: 0;
}

.booking .booking__dates.is-dragging {
	cursor: grabbing;
	user-select: none;
}

.booking__dates-fade {
	position: absolute;
	top: 0;
	z-index: 2;
	width: 48px;
	height: 100%;
	opacity: 0;
	transition: opacity .2s ease;
	pointer-events: none;
}

.booking__dates-fade--left {
	left: 0;
	background: linear-gradient(to right, #fff 0, rgba(255, 255, 255, 0) 100%);
}

.booking__dates-fade--right {
	right: 0;
	background: linear-gradient(to left, #fff 0, rgba(255, 255, 255, 0) 100%);
}

.booking__dates-wrap.has-left .booking__dates-fade--left,
.booking__dates-wrap.has-right .booking__dates-fade--right {
	opacity: 1;
}

/*
 * Сообщение формы записи — над кнопкой, чтобы его было видно, и подсветка
 * поля, из-за которого запись не ушла.
 */
.booking__result {
	max-width: 520px;
	/* Сверху тоже отступ: сообщение прилипало к полям оплаты над ним. */
	margin: 24px auto 16px;
	padding: 14px 18px;
	color: #2f2f2f;
	font-size: 15px;
	line-height: 1.4;
	text-align: center;
	background: #f2f4ee;
	border: 1px solid #89966f;
	border-radius: 18px;
}

.booking__result.is-error {
	background: #fdf1f1;
	border-color: #c0564f;
}

.booking__result[hidden] {
	display: none;
}

.booking .is-invalid {
	border-color: #c0564f;
	background-color: #fdf1f1;
}

/* Имя и фото массажиста открывают рассказ о нём — показываем это курсором. */
.booking__master .is-clickable {
	cursor: pointer;
}

.booking__master h2.is-clickable:hover {
	color: #89966f;
}

/*
 * Контакты не тянутся за деталями заказа: когда записей много, поля имени
 * и телефона растягивались по высоте вслед за левым столбцом.
 */
.booking__checkout-grid {
	align-items: start;
}

.booking__contact {
	align-content: start;
}

/*
 * Карточка записи в деталях заказа. Дата и время — первой строкой и заметнее
 * остального: записей в одной заявке бывает несколько, и различают их по времени.
 */
.booking__order .booking__order-when strong {
	color: #2f2f2f;
	font-weight: 600;
}

/*
 * Способ оплаты — внизу карточки, у каждой записи свой: общий переключатель
 * не давал понять, чем платят за какую из них.
 */
.booking__order-pay {
	/* Размер — как у текста карточки (.appointment p), иначе строка мельче. */
	font-size: 14px;
	display: flex;
	/* Строка одна: способ оплаты ужимается, номер остаётся рядом, а не под ним. */
	flex-wrap: nowrap;
	gap: 6px 10px;
	align-items: center;
	margin: 12px -13px 0;
	padding: 12px 13px;
	border-top: 1px solid var(--line, #e5e5e5);
}

.booking__order-pay-label {
	flex: 0 0 auto;
	color: #2f2f2f;
	font-weight: 600;
}

.booking__order-select {
	position: relative;
	/*
	 * Список сам по себе шириной с самый длинный способ («Банковской картой
	 * в кабинете») — ужимаем его, иначе номер абонемента уезжает на вторую строку.
	 */
	flex: 0 1 auto;
	min-width: 0;
	display: inline-flex;
	align-items: center;
}

.booking__order-select select {
	width: 100%;
	min-width: 0;
	height: auto;
	padding: 0 16px 0 0;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
	color: #424242;
	font: inherit;
	background: none;
	border: 0;
	appearance: none;
	cursor: pointer;
}

/* Синяя рамка браузера в строке карточки смотрится грубо — снимаем. */
.booking__order-select select:focus,
.booking__order-select select:focus-visible {
	outline: none;
}

.booking__order-select .select-arrow {
	position: absolute;
	right: 4px;
	pointer-events: none;
}

.booking__order-price {
	flex: 0 0 auto;
	margin-left: auto;
	color: #2f2f2f;
	font-weight: 600;
}

.booking__order-price[hidden],
.booking__order-number[hidden] {
	display: none;
}

.booking__order-number {
	box-sizing: border-box;
	flex: 0 0 auto;
	width: 140px;
	max-width: 100%;
	height: 34px;
	margin-left: auto;
	padding: 0 12px;
	color: #2f2f2f;
	font: inherit;
	background: #fff;
	border: 1px solid #c9c9c9;
	border-radius: 999px;
}

.booking__order-number:focus {
	border-color: #89966f;
	outline: none;
}

/* Свой абонемент выбирают из списка — по щелчку открывается окно с карточками. */
.booking__order-number.is-pick {
	cursor: pointer;
}

/* На широком экране карточка набрана крупнее — строка оплаты идёт следом. */
@media (min-width: 900px) {
	.booking__order-pay {
		font-size: 16px;
	}
}

/*
 * На телефоне подпись «Способ оплаты» убираем: карточки идут узкой лентой, и
 * она отбирала место у самого списка и цены. Что это за строка, видно и так —
 * в ней стоит «Наличные» со стрелкой. Экранным читалкам подпись остаётся:
 * она задана у списка атрибутом aria-label.
 */
@media (max-width: 767px) {
	.booking__order-pay-label {
		display: none;
	}
}

/*
 * Номер набираем тем же шрифтом, что и вся карточка: браузеры дают полям свой
 * шрифт, и номер выглядел крупнее подписи рядом.
 */
.booking__order-pay input.booking__order-number {
	font-family: inherit;
	font-size: inherit;
	font-weight: 400;
	line-height: normal;
}

/* Переключатель напоминания стоял под способом оплаты — теперь под телефоном. */
.booking__reminder {
	margin-top: 22px;
}

/* Окно выбора абонемента: карточки те же, что в кабинете, но кнопками. */
/*
 * Окно с абонементами — колонка: заголовок стоит, прокручивается только список.
 * Без этого длинный список вылезал за нижний край экрана.
 */
.doc-modal .ui-modal {
	display: flex;
	flex-direction: column;
	max-height: calc(100dvh - 32px);
	padding: 42px 24px 24px;
}

.doc-modal__list {
	display: grid;
	/* Иначе карточки сжимаются по высоте окна вместо прокрутки списка. */
	grid-auto-rows: min-content;
	gap: 12px;
	min-height: 0;
	/* Поля под тень: в прокручиваемом блоке она иначе обрезается. */
	margin: 20px -4px 0;
	padding: 4px;
	overflow-x: hidden;
	overflow-y: auto;
}

/*
 * Карточки рисуем здесь целиком: рамка кабинета задана переменной, которой
 * за его пределами нет, — карточки оставались без рамки и отступов.
 */
.doc-modal__card {
	box-sizing: border-box;
	display: block;
	width: 100%;
	overflow: hidden;
	font: inherit;
	text-align: left;
	background: #fff;
	border: 1px solid #e3e3e3;
	border-radius: 13px;
	cursor: pointer;
	transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}

.doc-modal__card .subscription-card__body {
	display: grid;
	gap: 6px;
	padding: 18px 20px;
}

.doc-modal__card .subscription-card__body strong {
	font-size: 15px;
	font-weight: 600;
}

.doc-modal__card .subscription-card__body span {
	color: #555;
	font-size: 14px;
	line-height: 1.3;
}

.doc-modal__card .subscription-card__meta {
	display: block;
	padding: 14px 20px;
	color: #555;
	font-size: 14px;
	border-top: 1px solid #e3e3e3;
	transition: background-color .2s ease, color .2s ease;
}

/* Отклик на курсор: рамка зеленеет, карточка чуть приподнимается. */
.doc-modal__card:hover,
.doc-modal__card:focus-visible {
	border-color: #89966f;
	box-shadow: 0 6px 18px rgba(47, 47, 47, .12);
	transform: translateY(-2px);
	outline: none;
}

.doc-modal__card:hover .subscription-card__meta,
.doc-modal__card:focus-visible .subscription-card__meta {
	color: #2f2f2f;
	background: rgba(137, 150, 111, .1);
	border-top-color: #89966f;
}

.doc-modal__card:active {
	transform: none;
	box-shadow: none;
}

/* Выбранный сейчас номер видно сразу — по нему и придёт оплата. */
.doc-modal__card.is-picked {
	border-color: #89966f;
	box-shadow: inset 0 0 0 1px #89966f;
}

/* Подтверждение записи: окно поверх формы, чтобы записаться можно было дальше. */
.booking__done-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
	justify-content: center;
	align-items: center;
	margin-top: 22px;
}

.booking__done-button {
	display: inline-flex;
	align-items: center;
	height: 48px;
	padding: 0 32px;
	color: #fff;
	font-size: 15px;
	background: #89966f;
	border-radius: 999px;
}

.booking__done-button:hover {
	opacity: .9;
}

.booking__done-link {
	color: #777;
	font: inherit;
	font-size: 15px;
	background: none;
	border: 0;
	text-decoration: underline;
	cursor: pointer;
}

.booking__done-link:hover {
	color: #89966f;
}

/*
 * Список массажистов длинный, поэтому окно — колонка: заголовок сверху,
 * кнопки снизу, прокручивается только список. В вёрстке кнопка «Применить»
 * стояла под списком и уезжала за край экрана.
 */
.booking-sheet .booking-master-sheet {
	display: flex;
	flex-direction: column;
	padding-bottom: 18px;
	overflow: hidden;
}

.booking-master-sheet__head {
	position: relative;
	flex: 0 0 auto;
}

.booking-master-sheet__close {
	position: absolute;
	top: 0;
	right: 0;
	display: grid;
	width: 34px;
	height: 34px;
	place-items: center;
	padding: 0;
	color: #2f2f2f;
	font: 300 26px / 1 Arial, sans-serif;
	background: #fafafa;
	border: 1px solid #e3e3e3;
	border-radius: 50%;
	cursor: pointer;
}

.booking-sheet .booking-master-sheet__list {
	flex: 1 1 auto;
	min-height: 0;
	padding: 2px;
	overflow-y: auto;
}

.booking-master-sheet__actions {
	display: grid;
	flex: 0 0 auto;
	grid-template-columns: 1fr 1fr;
	gap: 12px;
	padding-top: 16px;
}

.booking-sheet .booking-master-sheet__apply,
.booking-master-sheet__reset {
	width: 100%;
	min-width: 0;
	height: 46px;
	margin: 0;
	font: inherit;
	font-size: 16px;
	text-align: center;
	border-radius: 18px;
	cursor: pointer;
}

/* Цвет кнопки в вёрстке взят из переменной, которой на странице нет. */
.booking-sheet .booking-master-sheet__apply {
	color: #fff;
	background: #89966f;
	border: 1px solid #89966f;
}

.booking-sheet .booking-master-sheet__apply:hover {
	background: #78855f;
}

.booking-master-sheet__reset {
	color: #2f2f2f;
	background: #fff;
	border: 1px solid #2f2f2f;
}

.booking-master-sheet__reset:hover {
	color: #fff;
	background: #2f2f2f;
}

@media (min-width: 768px) {
	.booking-sheet.is-open {
		align-items: center;
		justify-content: center;
		padding: 24px;
	}

	.booking-sheet .booking-master-sheet {
		max-width: 560px;
		max-height: 80dvh;
		padding: 28px 24px;
		border-radius: 26px;
		/* На экране это обычное окно — выезжать снизу ему незачем. */
		transform: none;
	}

	.booking-sheet .booking-master-sheet__handle {
		display: none;
	}

	.booking-master-sheet h2 {
		font-size: 20px;
	}
}

/*
 * Календарь записи: зелёным — дни со свободным временем, бледным — занятые.
 * В вёрстке подписи под календарём были, а сама подсветка — нет.
 */
.booking__day.is-free {
	color: #4d5a33;
	font-weight: 500;
	background: rgba(137, 150, 111, .18);
	border-radius: 8px;
}

.booking__day.is-busy {
	color: #b5b5b5;
}

.booking__day.is-active {
	color: #fff;
	background: #89966f;
}

/*
 * «Мои записи» и «Настрой свой массаж» — h1, а общий стиль h1 на десктопе
 * растягивает заголовок на всю ширину и уводит текст в центр. В кабинете он
 * должен стоять по левому краю, как остальные заголовки разделов.
 */
.account__title {
	width: auto;
	text-align: left;
}

/*
 * Карточки истории лежат в своей обёртке (в неё догружаются новые), поэтому
 * промежуток из колонки до них не доставал.
 */
.account__column--past [data-past-list] {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

/* Кнопка догрузки истории записей. */
.account__more {
	display: block;
	width: 100%;
	box-sizing: border-box;
	min-height: 48px;
	margin: 20px 0 4px;
	padding: 12px 16px;
	color: #2f2f2f;
	font: inherit;
	font-size: 15px;
	/* Кнопка внутри колонки, где текст выровнен по левому краю. */
	text-align: center;
	background: #fff;
	border: 1px solid #2f2f2f;
	border-radius: 14px;
	cursor: pointer;
	transition: color .2s ease, background .2s ease;
}

.account__more:hover:not(:disabled) {
	color: #fff;
	background: #2f2f2f;
}

.account__more[hidden] {
	display: none;
}

/* Карандаш «изменить запись» в карточке кабинета. */
.appointment__edit {
	display: inline-flex;
	margin-left: auto;
	padding: 2px;
	line-height: 0;
}

.appointment__edit:hover svg path {
	stroke: #2f2f2f;
}

.appointment__meta {
	display: flex;
	align-items: center;
	gap: 8px;
}

/* Записи, которые на сайте не отменяют: замок вместо крестика и подпись. */
.appointment__lock {
	position: absolute;
	top: 14px;
	right: 13px;
	display: block;
	line-height: 0;
}

.appointment__locked {
	margin: 8px 0 0;
	color: #9a6700;
	font-size: 13px;
	line-height: 1.4;
}

/*
 * Заявка ждёт подтверждения администратора. Тон спокойный, не тревожный:
 * ничего не сорвалось, время уже за клиентом — просто ещё не подтверждено.
 */
.appointment__waiting {
	margin: 8px 0 0;
	color: #6b7a52;
	font-size: 13px;
	line-height: 1.4;
}

/*
 * Окна «Отмена записи» и «Запись отменена!» из вёрстки. Кнопки там во всю
 * ширину и без box-sizing — в две колонки они наезжали друг на друга.
 */
.rate-modal .ui-modal__eyebrow {
	margin: 0 0 12px;
	color: #777;
	font-size: 16px;
	text-align: center;
}

.rate-modal .ui-modal__text {
	text-align: center;
}

.rate-modal .ui-modal__img svg {
	display: block;
	margin: 24px auto;
}

.rate-modal .ui-modal__button.ui-modal__button--white {
	color: #2f2f2f;
	background: #fff;
	border-color: #e3e3e3;
}

.rate-modal .ui-modal__button.ui-modal__button--white:hover {
	border-color: #2f2f2f;
	background: #fff;
	color: #2f2f2f;
}

.rate-modal .ui-modal__button.ui-modal__button--red {
	color: #fff;
	background: #d5312c;
	border-color: #d5312c;
}

.rate-modal .ui-modal__button.ui-modal__button--red:hover {
	background: #b92823;
}

/* Полосу рубрик «Виды массажа» тянут мышью. */
.types_sort {
	cursor: grab;
	-webkit-overflow-scrolling: touch;
	overscroll-behavior-x: contain;
}

.types_sort::-webkit-scrollbar {
	height: 0;
}

.types_sort.is-dragging {
	cursor: grabbing;
	user-select: none;
}

/* Поля кода подтверждения — четыре клетки, как в вёрстке. */
.phone-code {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 16px;
	margin: 28px 0;
}

.phone-code input {
	box-sizing: border-box;
	width: 100%;
	height: 96px;
	color: #2f2f2f;
	font: inherit;
	font-size: 40px;
	text-align: center;
	background: #fff;
	border: 1px solid #e3e3e3;
	border-radius: 20px;
}

.phone-code input:focus {
	border-color: #89966f;
	outline: none;
}

.phone-code__retry {
	margin: 16px 0 0;
	color: #777;
	font-size: 14px;
	text-align: center;
}

.phone-code__again {
	padding: 0;
	color: #2f2f2f;
	font: inherit;
	font-size: 14px;
	background: transparent;
	border: 0;
	border-bottom: 1px dashed #2f2f2f;
	cursor: pointer;
}

@media (max-width: 767px) {
	.phone-code input {
		height: 68px;
		font-size: 28px;
	}
}

/* Одна кнопка в окне — во всю ширину. */
.rate-modal .ui-modal__actions > .ui-modal__button:only-child,
.pay-modal .ui-modal__actions > .ui-modal__button:only-child {
	grid-column: 1 / -1;
}


.rate-modal .ui-modal__actions {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 12px;
	margin-top: 28px;
}

.rate-modal .ui-modal__button {
	box-sizing: border-box;
	width: 100%;
	min-width: 0;
	min-height: 48px;
	padding: 12px 16px;
	color: #2f2f2f;
	font: inherit;
	font-size: 16px;
	background: #fff;
	border: 1px solid #2f2f2f;
	border-radius: 18px;
	cursor: pointer;
}

.rate-modal .ui-modal__button--primary {
	color: #fff;
	background: #89966f;
	border-color: #89966f;
}

.rate-modal .ui-modal__button--primary:hover {
	background: #78855f;
}

.rate-modal .ui-modal__button:not(.ui-modal__button--primary):hover {
	color: #fff;
	background: #2f2f2f;
}

/*
 * Оценка визита. В вёрстке у прошедших записей звёзды нарисованы статично —
 * здесь они кликабельные и открывают окно с комментарием.
 */
.appointment__rating {
	display: inline-flex;
	gap: 4px;
}

.appointment__star {
	padding: 0;
	color: #d9d9d9;
	font-size: 22px;
	line-height: 1;
	background: transparent;
	border: 0;
	cursor: pointer;
	transition: color .15s ease;
}

/*
 * Горят все звёзды до той, на которую навели: иначе не видно, какую оценку
 * ставишь. Подсветку ведёт скрипт — одним CSS соседей слева не достать.
 */
.appointment__star.is-on,
.appointment__star.is-hover,
.rate-modal__star.is-hover {
	color: #ffd53d;
}

/* Оценку можно поправить — карандашом в углу, как у будущей записи. */
.appointment__edit--rate {
	position: absolute;
	top: 14px;
	right: 13px;
	padding: 0;
	line-height: 0;
	background: none;
	border: 0;
	cursor: pointer;
}

.appointment__cancelled {
	color: #9a9a9a;
	font-size: 14px;
}

.appointment__review {
	margin: 8px 0 0;
	color: #777;
	font-size: 14px;
	line-height: 1.4;
}

.rate-modal {
	position: fixed;
	z-index: 1200;
	inset: 0;
	display: none;
	padding: 16px;
	overflow-y: auto;
	background: rgba(0, 0, 0, .72);
}

.rate-modal.is-open {
	display: grid;
	place-items: center;
}

.rate-modal[hidden] {
	display: none;
}

.rate-modal .ui-modal {
	max-width: 520px;
	margin: auto;
	padding-top: 42px;
}

.rate-modal .ui-modal__title {
	margin-top: 0;
}

.rate-modal__stars {
	display: flex;
	justify-content: center;
	gap: 6px;
	margin: 16px 0 12px;
}

.rate-modal__star {
	padding: 0;
	color: #d9d9d9;
	font-size: 38px;
	line-height: 1;
	background: transparent;
	border: 0;
	cursor: pointer;
	transition: color .15s ease;
}

.rate-modal__star.is-on,
.rate-modal__star:hover {
	color: #ffd53d;
}

.rate-modal__visit {
	margin: 0 0 16px;
	color: #777;
	font-size: 14px;
	text-align: center;
}

.rate-modal__field textarea {
	width: 100%;
	padding: 16px 18px;
	color: #2f2f2f;
	font: inherit;
	background: #fff;
	border: 1px solid #e3e3e3;
	border-radius: 18px;
	resize: vertical;
}

.rate-modal__field textarea:focus {
	border-color: #89966f;
	outline: none;
}

/*
 * Онлайн-запись. В вёрстке карта была виджетом-конструктором Яндекса; у нас
 * своя карта студий с кликабельными метками, поэтому задаём ей размеры блока.
 */
.booking__map .map.is-ready {
	/* Блок карты в сетке тянется по высоте соседней колонки — заполняем его. */
	height: 100%;
	min-height: 510px;
	margin: 0;
	border-radius: inherit;
}

@media (max-width: 767px) {
	.booking__map.is-open .map.is-ready {
		height: 100%;
	}
}

/*
 * Прошедших записей бывают сотни — колонка прокручивается сама, чтобы не
 * растягивать страницу.
 */
.account__column--past {
	max-height: 70vh;
	padding-right: 4px;
	overflow-y: auto;
}

/*
 * Кабинет на узких экранах: меню под содержимым было разрежённым, а запись и
 * выход в него не попадали — они жили в скрытом меню слева. Делаем компактный
 * список со всеми пунктами и отбиваем его от подвала.
 */
.account__mobile-nav {
	margin: 24px 0 32px;
	overflow: hidden;
	border: 1px solid var(--account-line);
	border-radius: 14px;
}

.account__mobile-nav-button {
	display: flex;
	width: 100%;
	min-height: 44px;
	align-items: center;
	padding: 0 16px;
	font-size: 15px;
	text-decoration: none;
}

.account__mobile-nav > :last-child .account__mobile-nav-button,
.account__mobile-nav > :last-child:not(form) {
	border-bottom: 0;
}

.account__mobile-nav-logout {
	margin: 0;
}

/*
 * Описание студии на её странице: свёрнуто до пяти строк с многоточием,
 * разворачивается кнопкой «Подробнее».
 */
.studiya_description.is-clamped {
	display: -webkit-box;
	overflow: hidden;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 5;
}

.studiya_description_toggle {
	display: inline-block;
	margin-top: 8px;
	padding: 0;
	color: #2f2f2f;
	font: inherit;
	text-decoration: none;
	background: transparent;
	border: 0;
	/* Пунктир как у ссылок «Как пройти в студию» и «Подробнее о парковке». */
	border-bottom: 1px dashed #2f2f2f;
	cursor: pointer;
}

.studiya_description_toggle:hover {
	border-bottom-color: transparent;
}

/*
 * Кабинет: «Выйти» — последний пункт меню слева. На узких экранах меню
 * скрыто, поэтому там кнопка остаётся под формой профиля, с отступом:
 * в вёрстке она прилипала к «Сохранить».
 */
.account__nav-logout {
	margin: 0;
}

.account__nav-button--logout {
	color: #777;
}

/*
 * Сообщения форм кабинета: в вёрстке их не было, а без оформления ответ
 * сливался с текстом страницы и его не замечали.
 */
.reg-auth__message {
	margin: 0 0 20px;
	padding: 14px 18px;
	color: #2f2f2f;
	font-size: 16px;
	line-height: 1.4;
	text-align: center;
	background: #f2f4ee;
	border: 1px solid #89966f;
	border-radius: 18px;
}

.reg-auth__message.is-error {
	background: #fdf1f1;
	border-color: #c0564f;
}

/*
 * Окно «Забыли пароль». В вёрстке (modalki.html) карточки окон лежат просто
 * на странице, подложки у них нет — здесь она своя, а сама карточка та же.
 */
.forgot-modal {
	position: fixed;
	z-index: 1100;
	inset: 0;
	display: none;
	padding: 16px;
	overflow-y: auto;
	background: rgba(0, 0, 0, .72);
}

.forgot-modal.is-open {
	display: grid;
	place-items: center;
}

.forgot-modal .ui-modal {
	margin: auto;
}

.forgot-modal .ui-modal__title {
	margin-top: 0;
}

.forgot-modal .reg-auth__field {
	margin-top: 24px;
}

/*
 * Заголовок только для поисковиков и экранных читалок: в вёрстке страницы
 * входа заголовка нет, там сразу вкладки.
 */
.massage-sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

/*
 * Кнопки в боковом меню: в вёрстке на курсор не отзывались. Меню на оливковом
 * фоне, поэтому белая кнопка на ховере темнеет, а прозрачная — заливается белым.
 */
.nav_booking,
.nav_kabinet {
	transition: color .2s ease, background .2s ease;
}

.nav_booking:hover {
	background: #e6e6e1;
}

.nav_kabinet:hover {
	color: #2f2f2f;
	background: #fff;
}

.nav_kabinet:hover svg path {
	stroke: #2f2f2f;
}

/*
 * У вошедшего на кнопке стоит его имя вместо «Личный кабинет». В базе оно
 * записано как человек его написал — «Анна», а не «АННА», — поэтому верхний
 * регистр делаем стилем: и имя, и подпись для гостя выглядят как в макете.
 */
.nav_kabinet {
	text-transform: uppercase;
}

/*
 * Заголовок в окне массажиста на странице кабинета: это h2, а на десктопе у
 * заголовков общий верхний отступ в 60px — внутри окна он лишний.
 */
.massagisty .help_modal_title {
	margin-top: 0;
}

/*
 * Кнопки студий, мастеров и акций в вёрстке никак не отзывались на курсор.
 * Селекторы длинные намеренно: у кнопки массажиста своё правило с фоном,
 * и без этого ховер до неё не доходил.
 */
.studio_buttons .studio_btn_booking:hover,
.studio_btn_booking:hover {
	background: #78855f;
}

.studio_buttons .studio_btn_more:hover,
.masters .studio_buttons button.studio_btn_more:hover,
.studio_btn_more:hover {
	color: #fff;
	background: #2f2f2f;
}

.studio_buttons .studio_btn_more:hover svg path,
.masters .studio_buttons button.studio_btn_more:hover svg path,
.studio_btn_more:hover svg path {
	stroke: #fff;
}

.studio_btn_booking,
.studio_btn_more {
	transition: background .2s ease, color .2s ease;
}

/* Промокод скопирован. */
.studio_btn_more.copied {
	color: #fff;
	background: #89966f;
	border-color: #89966f;
}

.studio_btn_more.copied svg path {
	stroke: #fff;
}

/* Постраничная навигация: в вёрстке её нет, собираем в стиле кнопок сайта. */
.articles-page .pagination {
	margin-top: 40px;
}

.articles-page .pagination .screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}

.articles-page .nav-links {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	align-items: center;
	justify-content: center;
}

.articles-page .page-numbers {
	display: flex;
	min-width: 48px;
	height: 48px;
	align-items: center;
	justify-content: center;
	padding: 0 16px;
	color: #2f2f2f;
	font-size: 16px;
	text-decoration: none;
	background: #f7f7f8;
	border-radius: 120px;
	transition: background .2s ease, color .2s ease;
}

.articles-page .page-numbers:hover {
	background: rgba(137, 150, 111, .15);
}

.articles-page .page-numbers.current {
	color: #fff;
	background: #89966f;
}

.articles-page .page-numbers.dots {
	background: none;
}

@media (max-width: 767px) {
	.articles-page .page-numbers {
		min-width: 40px;
		height: 40px;
		padding: 0 12px;
		font-size: 14px;
	}
}


/*
 * Схемы парковки и прохода в окнах студии показываем целиком: в вёрстке у
 * картинки жёсткая высота 270 px и обрезка по центру, из-за чего у схемы
 * пропадали края.
 */
.info-detail-modal__image {
	height: auto;
	object-fit: contain;
}

/*
 * Ссылка в тексте блока «о компании». Была синей, браузерной — оформляем как
 * «Как пройти в студию» и «Подробнее о парковке»: пунктир, который пропадает
 * при наведении.
 */
.intro .copy a {
	color: #2f2f2f;
	text-decoration: none;
	border-bottom: 1px dashed #2f2f2f;
	transition: border-color .2s;
}

.intro .copy a:hover {
	border-bottom-color: transparent;
}

/*
 * Ссылки в тексте «массаж рядом с вами» на карточке вида оставались синими,
 * браузерными: текст ведётся в редакторе, класса вёрстки у ссылок нет.
 * Оформляем их так же, как в блоке под первым экраном. Кнопки внизу блока
 * не трогаем — у них своя вёрстка.
 */
.massage-card-page .article_content p a,
.massage-card-page .article_content li a {
	color: #2f2f2f;
	text-decoration: none;
	border-bottom: 1px dashed #2f2f2f;
	transition: border-color .2s;
}

.massage-card-page .article_content p a:hover,
.massage-card-page .article_content li a:hover {
	border-bottom-color: transparent;
}

/*
 * Картинки статьи. В вёрстке у img задан только max-width: широкое фото
 * ужимается по ширине, а высота остаётся из атрибута height, который ставит
 * WordPress, — и снимок растягивается по вертикали. Высоту считаем от ширины.
 */
.article img {
	height: auto;
}

/* Картинка с лицами команды кликабельна: обёртка не должна менять раскладку. */
.teams_img_link {
	display: block;
	text-decoration: none;
}

.teams_img_link.desktop {
	display: none;
}

.teams_img_link .teams_img,
.teams_img_link.mobile .teams_img.mobile {
	margin-bottom: 0;
}

.teams_img_link:hover .teams_img {
	opacity: .85;
}

@media (min-width: 768px) {
	.teams_img_link.mobile {
		display: none;
	}

	.teams_img_link.desktop {
		display: block;
		margin-top: 30px;
	}

	.teams_img_link .teams_img.desktop {
		display: block;
	}
}

/*
 * Заголовок раздела-ссылки: выглядит как обычный заголовок, подчёркивание
 * появляется под курсором. Так понятно, что по нему можно перейти.
 */
.h2 .h2_link,
.h2_link {
	color: inherit;
	text-decoration: none;
	border-bottom: 1px solid transparent;
	transition: border-color .2s;
}

.h2_link:hover {
	border-bottom-color: currentColor;
}

/*
 * Карточки сертификатов.
 *
 * Первая переворачивается через верх, вторая и третья — вокруг вертикальной
 * оси. В вёрстке это правило лежало прямо в index.html, поэтому при переносе
 * в тему потерялось, и все три крутились одинаково.
 */
.certificate_card.second,
.certificate_card.third {
	perspective: 1000px;
	-webkit-perspective: 1000px;
}

.certificate_card.second .certificate_card_inner,
.certificate_card.third .certificate_card_inner {
	transform-style: preserve-3d;
	-webkit-transform-style: preserve-3d;
}

.certificate_card.second.flipped .certificate_card_inner,
.certificate_card.third.flipped .certificate_card_inner {
	transform: rotateY(180deg);
	-webkit-transform: rotateY(180deg);
}

.certificate_card.second .certificate_card_frontside,
.certificate_card.third .certificate_card_frontside {
	transform: rotateY(0deg) translateZ(1px);
	-webkit-transform: rotateY(0deg) translateZ(1px);
	backface-visibility: hidden;
	-webkit-backface-visibility: hidden;
}

.certificate_card.second .certificate_card_backside,
.certificate_card.third .certificate_card_backside {
	transform: rotateY(180deg) translateZ(1px);
	-webkit-transform: rotateY(180deg) translateZ(1px);
	backface-visibility: hidden;
	-webkit-backface-visibility: hidden;
}

/*
 * Крестик на обороте — из вёрстки. Там он при наведении почти растворялся
 * (оставалось 30% плотности), поэтому и казалось, что он пропадает; оставляем
 * заметное затемнение и палец у курсора.
 */
.certificate_card .app_bg {
	cursor: pointer;
}

.certificate_card .app_bg:hover {
	opacity: .7;
}

/*
 * Курсор-палец у всей карточки убран: нажатие по обороту больше ничего не
 * делает, а руку тянет только к крестику и кнопке.
 */
.certificate_card {
	cursor: default;
}

.certificate_card:not(.flipped) .certificate_card_frontside {
	cursor: pointer;
}

/*
 * Кнопка внизу окна с преимуществами. Раньше там стояли метки «Массаж,
 * Здоровье, Скидки» — от них человеку не было толку.
 */
.help_modal_footer {
	display: flex;
	justify-content: center;
	margin-top: 28px;
}

.help_modal_button {
	display: inline-flex;
	min-width: 260px;
	padding: 16px 32px;
	align-items: center;
	justify-content: center;
	color: #fff;
	font-size: 16px;
	line-height: 1.2;
	text-align: center;
	text-decoration: none;
	background: #89966f;
	border-radius: 72px;
	transition: background .2s;
}

.help_modal_button:hover {
	background: #78855f;
}

@media (max-width: 767px) {
	.help_modal_button {
		width: 100%;
		min-width: 0;
		padding: 14px 24px;
	}
}

/*
 * Карточка статьи: при наведении картинка внутри чуть приближается, а рамка
 * держит её — как в новостях Apple. Сама карточка при этом не дёргается.
 */
.articles_card {
	overflow: hidden;
}

.articles_card .articles_bg {
	transition: transform .6s cubic-bezier(.22, 1, .36, 1);
	will-change: transform;
}

@media (hover: hover) {
	.articles_card:hover .articles_bg {
		transform: scale(1.06);
	}
}

/*
 * Карточка приложения. Палец у курсора — только там, где нажимают: на лицевой
 * стороне и на крестике оборота. Сам оборот больше ничего не переключает.
 */
.app_inner {
	cursor: default;
}

.app_inner:not(.flipped) .app_frontside {
	cursor: pointer;
}

.app_inner .app_bg {
	cursor: pointer;
}

.app_inner .app_bg:hover {
	opacity: .7;
}

/*
 * Шапка на телефоне: бургер справа, иконки крупнее и с воздухом.
 *
 * Значки были 32 px и стояли вплотную — пальцем с первого раза не попасть.
 * Теперь у каждого своя область 44 px, как советует Apple, а бургер уехал
 * к правому краю: там его ищут большим пальцем.
 */
@media (max-width: 767px) {
	.header_content {
		gap: 4px;
	}

	/* Раскрываем левую группу: логотип и бургер становятся соседями правой. */
	.header_left {
		display: contents;
	}

	.header_logo_link {
		order: 1;
		margin-right: auto;
	}

	.header_right {
		order: 2;
		width: auto;
		max-width: none;
	}

	/*
	 * Значки прежнего размера, но с полем вокруг — по 10 px, как отступы самой
	 * шапки. Отрицательные поля сверху и снизу гасят прибавку, и шапка остаётся
	 * прежней высоты.
	 */
	.burger {
		order: 3;
		display: flex;
		padding: 10px;
		margin: -10px 0 -10px 4px;
		align-items: center;
		justify-content: center;
	}

	.header_social.desk-hide {
		width: auto;
	}

	.header_social_flex {
		width: auto;
		gap: 4px;
		justify-content: flex-end;
	}

	.header_social_flex a {
		display: flex;
		width: auto;
		height: auto;
		padding: 10px;
		margin: -10px 0;
		align-items: center;
		justify-content: center;
	}
}

/*
 * Подвал: зелёный логотип и подпись рядом с ним. Раньше подпись была частью
 * картинки — её нельзя было ни выделить, ни найти поиском, ни поправить год.
 */
.footer_logo {
	display: flex;
	gap: 16px;
	align-items: center;
}

.footer_logo_link {
	display: block;
	flex: 0 0 auto;
}

.footer_logo_link img {
	display: block;
	width: 125px;
	height: auto;
}

.footer_logo_note {
	max-width: 160px;
	margin: 0;
	color: rgba(33, 33, 33, .5);
	font-size: 12px;
	line-height: 1.2;
}

/* Ширину задаёт содержимое: доля от строки резала подпись на узкие столбики. */
@media (min-width: 768px) {
	.footer_logo {
		width: auto;
		max-width: none;
	}
}

@media (max-width: 767px) {
	.footer_logo {
		max-width: none;
		justify-content: flex-start;
	}

	.footer_logo_link img {
		width: 104px;
	}
}

/*
 * Значки соцсетей в подвале: на телефоне их сплющивало до 12 px по ширине —
 * картинку ужимал сам ряд. Держим квадрат 32 px, как на компьютере.
 */
.footer .header_social_flex a {
	flex: 0 0 auto;
}

.footer .header_social_flex a svg {
	flex: 0 0 auto;
	width: 32px;
	height: 32px;
}

/*
 * Хлебные крошки под шапкой. Размеры взяты из макета: 14 px, строка 133%,
 * цвет основного текста в 70% плотности, между шагами уголок.
 */
.crumbs {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	align-items: center;
	margin-bottom: 20px;
	font-size: 14px;
	line-height: 1.33;
}

.crumbs_link,
.crumbs_current {
	color: rgba(47, 47, 47, .7);
	text-decoration: none;
}

.crumbs_link:hover {
	color: #2f2f2f;
}

.crumbs_current {
	color: #2f2f2f;
}

.crumbs_sep {
	display: block;
	width: 14px;
	height: 14px;
	flex: 0 0 auto;
}

/* Заголовок страницы записи. */
.booking__title {
	margin: 0 0 24px;
}

@media (max-width: 767px) {
	.crumbs {
		gap: 6px;
		margin-bottom: 14px;
		font-size: 12px;
	}
}

/* Полоса дней прячется до выбора даты и не занимает место. */
.booking__dates-wrap[hidden] {
	display: none;
}

/*
 * Когда у вида массажа нет текста, крошки оказываются первой строкой после
 * первого экрана и липнут к видео — отбиваем их сверху.
 */
.massage-card_types .crumbs {
	margin-top: 40px;
}

@media (max-width: 767px) {
	.massage-card_types .crumbs {
		margin-top: 24px;
	}
}

/*
 * Крошки всегда прижаты влево, даже в блоках с текстом по центру: путь читают
 * по началу строки.
 */
.intro_inner .crumbs {
	justify-content: flex-start;
	text-align: left;
	width: 100%;
}

/* Выбор массажиста отбит от карты и календаря: раньше упирался в них. */
.booking__masters {
	margin-top: 40px;
}

@media (max-width: 767px) {
	.booking__masters {
		margin-top: 28px;
	}
}

/*
 * Согласие под кнопкой: два документа — ссылками, поэтому строка стала длиннее
 * и требует больше места.
 */
.booking__agreement {
	max-width: 420px;
}

.booking__agreement a {
	color: inherit;
	text-decoration: underline;
}

.booking__agreement a:hover {
	color: #89966f;
}

/*
 * Кнопка карты в записи (только телефон): значок — метка с самой карты,
 * поэтому размеры задаём картинке, а не svg из вёрстки.
 */
.booking__map-button-pin {
	width: 33px;
	height: auto;
}

/*
 * Детали заказа на телефоне: карточки идут лентой со своей прокруткой —
 * столбиком они отжимали способ оплаты далеко вниз. Кнопка «Создать ещё»
 * остаётся под лентой на всю ширину.
 */
@media (max-width: 767px) {
	.booking__order [data-booking-summary] {
		display: flex;
		gap: 10px;
		overflow-x: auto;
		overflow-y: hidden;
		scroll-snap-type: x proximity;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: thin;
	}

	/*
	 * Лента должна уметь сжиматься. У элемента сетки и у карточки внутри
	 * min-width по умолчанию auto: ширина ленты считалась по сумме всех
	 * карточек, и с пятой записи она распирала колонку — вместо прокрутки
	 * внутри себя страница разъезжалась вбок и «сбивала экран».
	 */
	.booking__order,
	.booking__order [data-booking-summary],
	.booking__order [data-booking-summary] .appointment {
		min-width: 0;
	}

	.booking__order [data-booking-summary] .appointment {
		box-sizing: border-box;
		flex: 0 0 78%;
		max-width: 320px;
		scroll-snap-align: start;
	}
}

/*
 * Каталог видов массажа: тёмный градиент поверх фото, как у карточек на
 * главной, — на светлых снимках название и цена сливались с фоном.
 */
.prices_item::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: linear-gradient(
		to top,
		rgba(0, 0, 0, .7) 0%,
		rgba(0, 0, 0, .4) 20%,
		rgba(0, 0, 0, 0) 100%
	);
	pointer-events: none;
}

/* Стоимость программы массажа: строка «за что — сколько». */
.program_prices {
	display: grid;
	gap: 10px;
	margin: 16px 0 28px;
	padding: 0;
	list-style: none;
}

.program_prices li {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	justify-content: space-between;
	align-items: baseline;
	padding: 14px 18px;
	background: #f6f6f4;
	border-radius: 14px;
}

.program_prices strong {
	font-size: 18px;
	white-space: nowrap;
}

.program_prices s {
	margin-left: 8px;
	color: #999;
	font-size: 15px;
	font-weight: 400;
}

/*
 * Вопрос в блоке «Часто задаваемые вопросы» — заголовок h3, а не просто
 * строка. Общие правила заголовков добавили бы ему отступ и свой размер,
 * поэтому возвращаем прежний вид.
 */
.faq_title {
	margin: 0;
	color: inherit;
	font-size: 16px;
	font-weight: 400;
	line-height: 155%;
}

/*
 * Смена пароля в кабинете: человек придумывает пароль сам. Поля те же, что
 * в формах входа, только без значков — в вёрстке этого окна их нет.
 */
[data-password-modal] .reg-auth__field {
	margin-top: 12px;
}

[data-password-modal] .reg-auth__field input {
	width: 100%;
	height: 50px;
	padding: 0 20px;
	color: #2f2f2f;
	font: inherit;
	font-size: 15px;
	background: #fff;
	border: 1px solid #e2e2e2;
	border-radius: 13px;
	outline: none;
}

[data-password-modal] .reg-auth__field input:focus {
	border-color: #89966f;
	box-shadow: 0 0 0 3px rgba(137, 150, 111, .16);
}

/* Забыл текущий пароль — прежний путь, письмом. Ссылка под окном. */
.password-modal__reset {
	margin-top: 14px;
	text-align: center;
}

.password-modal__reset-button {
	padding: 0;
	color: #fff;
	font: inherit;
	font-size: 13px;
	background: none;
	border: 0;
	text-decoration: underline;
	cursor: pointer;
	opacity: .75;
}

.password-modal__reset-button:hover {
	opacity: 1;
}

/* Телефон в кабинете не меняют — рядом с полем объясняем, к кому идти. */
.account__profile-note {
	display: block;
	margin-top: 6px;
	color: #8a8a8a;
	font-size: 12px;
	line-height: 1.35;
}

.account__profile-note a {
	/* Номер — со своей строки и целиком: в строке с подписью он рвался пополам. */
	display: block;
	white-space: nowrap;
	color: #89966f;
	text-decoration: underline;
}

/*
 * Карточка адреса в списке студий. В вёрстке у неё жёсткие 134 px: на телефоне
 * длинный адрес переносится на три строки и вылезает за рамку. Высоту считаем
 * от текста, прежние 134 остаются нижней границей — короткие адреса выглядят
 * так же, как раньше.
 */
@media (max-width: 767px) {
	.studio_list_item {
		height: auto;
		min-height: 134px;
	}
}

/* Фотографии студии под картой — скруглённые, как карта, только помягче. */
.studiya_gallery img {
	border-radius: 15px;
}

/*
 * Строки со значками в окне массажиста: категория, опыт и график. Значки
 * рисует .studio_info из вёрстки — они висят слева от строки, поэтому блоку
 * нужен отступ, иначе значки уезжают за край окна.
 */
.help_modal_info {
	display: grid;
	gap: 10px;
	margin: 0 0 24px;
	font-size: 16px;
	line-height: 1.3;
	text-align: left;
}

.help_modal_info .studio_info_rank:before {
	background: url(assets/img/user_black.svg) center center / contain no-repeat;
}

/*
 * Каталог видов массажа: в углу карточки две кнопки — цены открываются окном,
 * «Подробнее» ведёт на страницу вида. В вёрстке кнопка была одна, поэтому
 * раскладку и вторую кнопку описываем здесь. На телефоне кнопок нет, как и
 * в вёрстке: там по карточке открываются цены.
 */
.prices_buttons {
	display: none;
}

button.prices_show-all {
	font: inherit;
	border: 0;
	cursor: pointer;
}

@media (min-width: 768px) {
	.prices_buttons {
		display: flex;
		flex-wrap: wrap;
		gap: 12px;
		align-items: center;
		justify-content: flex-end;
	}

	/* Обе кнопки одной высоты: значок внутри второй иначе делает её выше. */
	.prices_buttons .prices_show-all {
		display: inline-flex;
		box-sizing: border-box;
		min-height: 44px;
		align-items: center;
		justify-content: center;
		padding-top: 0;
		padding-bottom: 0;
	}

	.prices_more {
		gap: 10px;
		padding-right: 20px;
		padding-left: 28px;
		text-decoration: none;
	}

	.prices_more img {
		display: block;
		width: 30px;
		height: 30px;
	}
}

/*
 * Цена без скидки в таблице цен. В вёрстке она была спрятана насовсем
 * (display: none), поэтому скидка на абонементы нигде не показывалась.
 * Показываем: красная, зачёркнутая, чуть мельче основной цены.
 */
.types_modal_bottom_price {
	/* На телефоне цена без скидки стоит над новой, на экране — рядом в строку. */
	flex-direction: column-reverse;
	flex-wrap: nowrap;
	align-items: flex-end;
	gap: 2px;
}

@media (min-width: 768px) {
	.types_modal_bottom_price {
		/* row-reverse: в разметке сначала новая цена, а стоять она должна справа. */
		flex-direction: row-reverse;
		justify-content: flex-start;
		align-items: baseline;
		gap: 8px;
	}
}

.types_modal_bottom_price_red {
	display: inline;
	font-size: 12px;
}

.types_modal_bottom_price_red[hidden] {
	display: none;
}

@media (min-width: 768px) {
	.types_modal_bottom_price_red {
		font-size: 16px;
	}
}

/*
 * Оформление абонемента и сертификата: крошки идут первой строкой после
 * первого экрана и липнут к видео — отбиваем их сверху.
 */
.oformlenie_content .crumbs {
	/*
	 * Именно padding: верхний отступ схлопывался с отступом секции и уходил
	 * наружу, а крошки всё равно липли к первому экрану.
	 */
	padding-top: 30px;
}

/*
 * Оформление абонемента и сертификата: между блоками формы было по 40 px
 * сверху и снизу да ещё черта. Черта дробила короткую форму на полосы, а
 * промежутки растягивали её на лишний экран — оставляем отступ поменьше.
 */
.checkout-panel__section {
	padding: 20px 0;
	border-top: 0;
}

/*
 * Карточки выбора в оформлении: рамка 2 px у всех, а не только у выбранной.
 * В вёрстке невыбранная была в один пиксель, и при нажатии карточка
 * подрастала — текст внутри дёргался.
 */
.checkout-panel__choice {
	border-width: 2px;
}

/*
 * Заглушка над блоком формы: низ оформления показываем сразу, как выбрали,
 * что дарят, но до заполнения он не работает — поверх лежит полупрозрачный
 * белый слой. Он же перехватывает нажатия, поэтому поля недоступны.
 */
.checkout-panel__section.is-locked {
	position: relative;
}

.checkout-panel__section.is-locked::after {
	content: "";
	position: absolute;
	inset: -4px;
	z-index: 2;
	background: rgba(255, 255, 255, .45);
	border-radius: 12px;
	cursor: not-allowed;
}

/* «Показать на карте» — ссылка на «Контакты», а в вёрстке это была кнопка. */
a.checkout-panel__studio-map {
	display: flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	text-decoration: none;
}

/*
 * Оформление: блоки доставки и самовывоза раскрываются плавно. Скрипт снимает
 * hidden сразу, а высоту гонит классом is-collapsed — прятать блок он будет
 * уже после перехода.
 */
.checkout-panel__delivery-address,
.checkout-panel__studio-picker {
	max-height: 600px;
	overflow: hidden;
	transition: max-height .3s ease, opacity .25s ease;
}

.checkout-panel__delivery-address.is-collapsed,
.checkout-panel__studio-picker.is-collapsed {
	max-height: 0;
	opacity: 0;
}

/*
 * Список адресов сворачивается кнопкой «Адреса салонов». В вёрстке он просто
 * пропадал (display: none) — заменяем на съезжающую высоту.
 */
.checkout-panel__studio-list,
.checkout-panel__studio-map {
	transition: max-height .3s ease, min-height .3s ease, margin .3s ease, padding .3s ease, opacity .25s ease;
}

.checkout-panel__studio-picker:not(.is-open) .checkout-panel__studio-list,
.checkout-panel__studio-picker:not(.is-open) .checkout-panel__studio-map {
	display: block;
	max-height: 0;
	min-height: 0;
	margin-top: 0;
	margin-bottom: 0;
	padding-top: 0;
	padding-bottom: 0;
	overflow: hidden;
	opacity: 0;
}

/*
 * Список адресов прокручивается, и без отступов сверху и снизу рамка первой
 * и последней карточки срезалась краем окна прокрутки.
 */
.checkout-panel__studio-list {
	padding-top: 4px;
	padding-bottom: 6px;
	margin-bottom: 12px;
}

/* Кнопка «Сохранить» под адресом стояла слишком далеко от полей. */
.checkout-panel__delivery-address .checkout-panel__action--spaced {
	margin-top: 6px;
}

/*
 * Карточка программы. В checkout.css лежат две её версии, и побеждает поздняя —
 * круглое фото 96 px по центру. В финальной вёрстке карточка другая: снимок
 * во всю высоту слева, текст справа. Возвращаем её.
 */
.checkout-panel__program-item {
	display: grid;
	grid-template-columns: 100px 1fr;
	gap: 0;
	align-items: stretch;
	padding: 0;
	overflow: hidden;
	border-radius: 12px;
}

/* Только снимок программы: значок корзины лежит внутри кнопки, его не трогаем. */
.checkout-panel__program-item > img {
	width: 106px;
	height: 100%;
	border-radius: 0;
	object-fit: cover;
}

.checkout-panel__program-copy {
	padding: 20px 24px;
}

/*
 * Программа в заказе: та же карточка, что и в выборе, только в углу корзина.
 * Кнопка «Добавить ещё программу» повторяет ту, что в онлайн-записи.
 */
.checkout-panel__order--program {
	position: relative;
	margin-bottom: 12px;
}

/*
 * Последней строке заказа рамку снизу убирают — но у карточки программы она
 * своя, со всех сторон, и без неё карточка выглядит обрезанной.
 */
.checkout-panel__order--program:last-child {
	border-bottom: 1px solid rgba(47, 47, 47, .12);
}

.checkout-panel__order--program .checkout-panel__remove {
	position: absolute;
	top: 14px;
	right: 14px;
	display: flex;
	padding: 0;
	color: inherit;
	background: none;
	border: 0;
	cursor: pointer;
}

.checkout-panel__order--program .checkout-panel__remove img {
	display: block;
	width: 20px;
	height: 20px;
}

.checkout-panel__add {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	width: 100%;
	margin-top: 12px;
	padding: 16px 20px;
	color: #424242;
	font: inherit;
	font-size: 14px;
	text-align: left;
	background: #fff;
	border: 1px solid rgba(47, 47, 47, .12);
	border-radius: 14px;
	cursor: pointer;
}

.checkout-panel__add[hidden] {
	display: none;
}

/*
 * Категория массажиста: карточки одной высоты и текст по центру — их всего
 * две, и вразнобой они смотрелись случайно.
 */
[data-sert-step="rank"] .checkout-panel__choice {
	display: flex;
	flex-direction: column;
	justify-content: center;
	box-sizing: border-box;
	min-height: 90px;
}


/* Заказ из программ: карточки уже в рамках, общая обёртка тут лишняя. */
.checkout-panel__card--plain {
	padding: 0;
	border: 0;
	border-radius: 0;
}

.checkout-panel__card--plain .checkout-panel__order--program:last-child {
	margin-bottom: 0;
}

/* Вид массажа в заказе: карточка с настройками, как в вёрстке. */
.checkout-panel__order--service {
	margin-top: 0;
	margin-bottom: 16px;
}

/* Категория в заказе только подписью: менять её можно шагом выше. */
.checkout-panel__card-note {
	margin: 0 0 16px;
	color: rgba(47, 47, 47, .7);
	font-size: 14px;
}

.checkout-panel__order--service:last-child {
	margin-bottom: 0;
}

/* Согласие с правилами перед оплатой. */
.checkout-panel__agree {
	display: flex;
	gap: 10px;
	align-items: flex-start;
	margin: 18px 0 12px;
	color: #777;
	font-size: 14px;
	line-height: 1.35;
	cursor: pointer;
}

.checkout-panel__agree input {
	flex: 0 0 18px;
	width: 18px;
	height: 18px;
	margin: 1px 0 0;
	accent-color: #89966f;
}

.checkout-panel__agree a {
	color: #89966f;
	text-decoration: underline;
}

/*
 * Окно с картой студий на оформлении сертификата. В онлайн-записи такое окно
 * уже есть, но его стили лежат в наборе той страницы — здесь описываем своё.
 */
[data-sert-map] {
	display: none;
}

[data-sert-map].is-open {
	position: fixed;
	z-index: 1200;
	inset: 16px;
	display: block;
	overflow: hidden;
	background: #fff;
	border-radius: 16px;
	box-shadow: 0 12px 40px rgba(0, 0, 0, .28);
}

[data-sert-map].is-open .map,
[data-sert-map].is-open .map.is-ready {
	height: 100%;
	margin: 0;
	border-radius: 0;
}

[data-sert-map] .booking__map-close {
	position: absolute;
	z-index: 2;
	top: 12px;
	right: 12px;
	display: flex;
	width: 36px;
	height: 36px;
	align-items: center;
	justify-content: center;
	color: #2f2f2f;
	font-size: 24px;
	line-height: 1;
	background: #fff;
	border: 1px solid rgba(47, 47, 47, .12);
	border-radius: 50%;
	cursor: pointer;
}

/* Пока история и абонементы едут из CRM — строка вместо пустоты. */
.account__past-loading,
.account__subscriptions-loading {
	margin: 0;
	color: rgba(47, 47, 47, .6);
	font-size: 15px;
}