/* Sidra Core — фронтовые компоненты плагина.
   Цвета и типографика повторяют брендбук, чтобы блоки плагина
   не выпадали из страниц, собранных в Elementor.

   Две ловушки этой сборки, из-за них селекторы кажутся избыточными:

   1. Тема Hello Elementor красит любой button:hover в #CC3366 с белым текстом.
      Селектор button:hover сильнее одиночного класса, поэтому все свои кнопки
      пишем с тегом: button.sidra-open--link и так далее.
   2. Кит Elementor адресует ссылки и заголовки как .elementor-kit-8 a / h1.
      Тот же приём: a.sidra-wa--link, h1.sidra-404__title. */

:root {
	--sidra-green: #14301F;
	--sidra-deep: #0E2418;
	--sidra-gold: #C9A227;
	--sidra-gold-light: #E3C77A;
	/* Золото как текст на светлом фоне нечитаемо: #C9A227 на слоновой кости
	   даёт 2.1:1. Для надписей берём приглушённый вариант, 5.2:1. */
	--sidra-gold-deep: #7A6112;
	--sidra-ivory: #F5F0E6;
	--sidra-sand: #E4D7C3;
	--sidra-ink: #16211B;
	--sidra-body: #3B473F;
	--sidra-muted: #55625A;
	--sidra-line: rgba(20, 48, 31, .16);
	--sidra-ease: cubic-bezier(.22, .61, .24, 1);
}

/* -------------------------------------------------- появление при прокрутке */

[data-sidra-reveal] {
	opacity: 0;
	transform: translateY(16px);
	transition: opacity .8s var(--sidra-ease), transform .8s var(--sidra-ease);
	will-change: opacity, transform;
}

[data-sidra-reveal].is-in {
	opacity: 1;
	transform: none;
	will-change: auto;
}

@media (prefers-reduced-motion: reduce) {
	[data-sidra-reveal],
	[data-sidra-reveal].is-in {
		opacity: 1;
		transform: none;
		transition: none;
	}
}

/* -------------------------------------------------- услуги перечнем */

.sidra-services {
	display: block;
}

.sidra-services__group + .sidra-services__group {
	margin-top: 54px;
}

.sidra-services__grouptitle {
	font-family: "Playfair Display", Georgia, serif;
	font-weight: 400;
	font-size: 15px;
	letter-spacing: .04em;
	line-height: 1.2;
	color: var(--sidra-green);
	margin: 0 0 4px;
	display: flex;
	align-items: center;
	gap: 18px;
	text-transform: uppercase;
}

.sidra-services__grouptitle::after {
	content: "";
	flex: 1;
	height: 1px;
	background: var(--sidra-line);
}

.sidra-services__grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 0 54px;
}

.sidra-services__row {
	display: grid;
	grid-template-columns: 116px 1fr;
	gap: 22px;
	padding: 24px 0;
	border-bottom: 1px solid var(--sidra-line);
	align-items: start;
}

/* Последний ряд в каждой колонке линейку не носит: она бы повисла в воздухе. */
.sidra-services__grid > .sidra-services__row:last-child,
.sidra-services__grid > .sidra-services__row:nth-last-child(2) {
	border-bottom: 0;
}

.sidra-services__media {
	margin: 0;
	line-height: 0;
	background: var(--sidra-sand);
	overflow: hidden;
}

.sidra-services__media img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	transition: transform .7s var(--sidra-ease);
}

.sidra-services__row:hover .sidra-services__media img {
	transform: scale(1.05);
}

.sidra-services__title {
	font-family: "Playfair Display", Georgia, serif;
	font-weight: 400;
	font-size: 21px;
	line-height: 1.22;
	color: var(--sidra-green);
	margin: 0 0 6px;
}

.sidra-services__desc {
	font-family: Montserrat, sans-serif;
	font-weight: 400;
	font-size: 14px;
	line-height: 1.7;
	color: var(--sidra-body);
	margin: 0;
}

.sidra-services__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 18px;
	align-items: center;
	margin-top: 12px;
}

/* -------------------------------------------------- ссылки и кнопки */

.sidra-link,
button.sidra-open--link,
.sidra-services a.sidra-wa--link {
	font-family: Montserrat, sans-serif;
	font-weight: 500;
	font-size: 10.5px;
	letter-spacing: .16em;
	line-height: 1.4;
	text-transform: uppercase;
	color: var(--sidra-green);
	background: none;
	background-color: transparent;
	border: 0;
	border-bottom: 1px solid var(--sidra-gold);
	border-radius: 0;
	padding: 0 0 3px;
	cursor: pointer;
	text-decoration: none;
	transition: color .25s var(--sidra-ease), border-color .25s var(--sidra-ease);
}

.sidra-link:hover,
.sidra-link:focus,
button.sidra-open--link:hover,
button.sidra-open--link:focus,
.sidra-services a.sidra-wa--link:hover,
.sidra-services a.sidra-wa--link:focus {
	color: var(--sidra-gold-deep);
	background-color: transparent;
	border-bottom-color: var(--sidra-green);
}

/* Общая геометрия всех кнопок. line-height задан явно: кнопка наследует
   normal, ссылка наследует 1.75 от body, и в одном ряду они расходились
   по высоте на десять пикселей. */
.sidra-open--button,
.sidra-open--gold,
.sidra-open--ghost,
.sidra-open--outline,
.sidra-form__submit,
a.sidra-wa--button,
a.sidra-wa--ghost,
a.sidra-wa--gold {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	font-family: Montserrat, sans-serif;
	font-weight: 500;
	font-size: 12px;
	line-height: 1;
	letter-spacing: .18em;
	text-transform: uppercase;
	text-decoration: none;
	border-style: solid;
	border-width: 1px;
	border-radius: 2px;
	padding: 18px 32px;
	min-height: 52px;
	cursor: pointer;
	transition: background-color .25s var(--sidra-ease), color .25s var(--sidra-ease),
		border-color .25s var(--sidra-ease);
}

button.sidra-open--button,
a.sidra-open--button,
a.sidra-wa--button {
	color: var(--sidra-ivory);
	background-color: var(--sidra-green);
	border-color: var(--sidra-green);
}

button.sidra-open--button:hover,
button.sidra-open--button:focus,
a.sidra-open--button:hover,
a.sidra-open--button:focus,
a.sidra-wa--button:hover,
a.sidra-wa--button:focus {
	background-color: var(--sidra-gold);
	border-color: var(--sidra-gold);
	color: var(--sidra-ink);
}

button.sidra-open--gold,
a.sidra-wa--gold {
	color: var(--sidra-ink);
	background-color: var(--sidra-gold);
	border-color: var(--sidra-gold);
}

button.sidra-open--gold:hover,
button.sidra-open--gold:focus,
a.sidra-wa--gold:hover,
a.sidra-wa--gold:focus {
	background-color: transparent;
	border-color: var(--sidra-gold);
	color: var(--sidra-gold);
}

button.sidra-open--ghost,
a.sidra-wa--ghost {
	color: var(--sidra-ivory);
	background-color: transparent;
	border-color: rgba(245, 240, 230, .5);
}

button.sidra-open--ghost:hover,
button.sidra-open--ghost:focus,
a.sidra-wa--ghost:hover,
a.sidra-wa--ghost:focus {
	background-color: rgba(245, 240, 230, .08);
	border-color: var(--sidra-gold);
	color: var(--sidra-gold-light);
}

/* Золотая кнопка в шапке и подвале мельче остальных: там она вспомогательная. */
.elementor-location-header a.sidra-wa--gold,
.elementor-location-footer a.sidra-wa--gold {
	font-size: 11.5px;
	padding: 14px 26px;
	min-height: 0;
	letter-spacing: .16em;
}

/* Ссылка в WhatsApp на тёмном поле. */
a.sidra-wa--link {
	display: inline-block;
	font-family: Montserrat, sans-serif;
	font-weight: 500;
	font-size: 11px;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--sidra-gold-light);
	border-bottom: 1px solid currentColor;
	padding-bottom: 3px;
	text-decoration: none;
	transition: color .25s var(--sidra-ease);
}

a.sidra-wa--link:hover,
a.sidra-wa--link:focus {
	color: var(--sidra-ivory);
}

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

.sidra-form__grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 20px 24px;
}

.sidra-form__field {
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: 7px;
}

.sidra-form__field--wide {
	grid-column: 1 / -1;
}

.sidra-form label {
	font-family: Montserrat, sans-serif;
	font-weight: 500;
	font-size: 10.5px;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--sidra-muted);
}

.sidra-form input[type="text"],
.sidra-form input[type="tel"],
.sidra-form select,
.sidra-form textarea {
	font-family: Montserrat, sans-serif;
	font-weight: 400;
	font-size: 15px;
	color: var(--sidra-ink);
	background: #FFFDF8;
	border: 1px solid rgba(20, 48, 31, .26);
	border-radius: 2px;
	padding: 13px 14px;
	width: 100%;
	transition: border-color .25s var(--sidra-ease), box-shadow .25s var(--sidra-ease);
	-webkit-appearance: none;
	appearance: none;
}

.sidra-form ::placeholder {
	color: var(--sidra-muted);
	opacity: .8;
}

.sidra-form select {
	background-image: linear-gradient(45deg, transparent 50%, #14301F 50%), linear-gradient(135deg, #14301F 50%, transparent 50%);
	background-position: calc(100% - 19px) calc(50% + 1px), calc(100% - 14px) calc(50% + 1px);
	background-size: 5px 5px, 5px 5px;
	background-repeat: no-repeat;
	padding-right: 38px;
}

.sidra-form textarea {
	resize: vertical;
	min-height: 84px;
	line-height: 1.65;
}

.sidra-form input:focus,
.sidra-form select:focus,
.sidra-form textarea:focus {
	outline: 0;
	border-color: var(--sidra-gold);
	box-shadow: 0 0 0 1px var(--sidra-gold);
}

.sidra-form__submit {
	margin-top: 24px;
	color: var(--sidra-ivory);
	background-color: var(--sidra-green);
	border-color: var(--sidra-green);
}

.sidra-form__submit:hover,
.sidra-form__submit:focus {
	background-color: var(--sidra-gold);
	border-color: var(--sidra-gold);
	color: var(--sidra-ink);
}

.sidra-form__submit[disabled] {
	opacity: .55;
	cursor: default;
}

.sidra-form__consent {
	font-family: Montserrat, sans-serif;
	font-weight: 400;
	font-size: 12.5px;
	line-height: 1.65;
	color: var(--sidra-muted);
	margin: 14px 0 0;
	max-width: 58ch;
}

/* Ханипот. Не display:none: часть ботов такие поля пропускает.
   Раньше поле уезжало на left: -9999px. В латинице браузер такой
   вылет влево обрезает, но в арабском начало строки справа, и тот же
   вылет становится прокручиваемым: страница растягивалась на десять
   тысяч пикселей, а содержимое уезжало за кадр. Теперь поле остаётся
   на месте и просто сжимается до точки. Для бота оно по-прежнему
   видимое, человек его не встретит ни глазом, ни табуляцией. */
.sidra-form__trap {
	position: absolute !important;
	width: 1px !important;
	height: 1px !important;
	margin: -1px !important;
	padding: 0 !important;
	border: 0 !important;
	overflow: hidden !important;
	clip-path: inset(50%) !important;
	white-space: nowrap !important;
}

.sidra-form__note {
	font-family: Montserrat, sans-serif;
	font-weight: 400;
	font-size: 14.5px;
	line-height: 1.7;
	border-left: 2px solid var(--sidra-gold);
	padding: 14px 18px;
	margin: 0 0 26px;
	background: rgba(201, 162, 39, .12);
	color: var(--sidra-ink);
}

.sidra-form__note--err {
	border-left-color: #8C2F1F;
	background: rgba(140, 47, 31, .09);
}

/* Ошибка у отдельного поля. Живёт внутри .sidra-form__field, а это колонка
   с промежутком, поэтому встаёт под полем сама. Регистр и разрядку сбрасываем:
   рядом стоит подпись поля, у неё капитель, и без сброса ошибка читалась бы
   как вторая подпись. */
.sidra-form__err {
	font-family: Montserrat, sans-serif;
	font-weight: 400;
	font-size: 12.5px;
	line-height: 1.5;
	letter-spacing: 0;
	text-transform: none;
	color: #8C2F1F;
}

.sidra-form__err[hidden] {
	display: none;
}

.sidra-form input.sidra-form__input--bad,
.sidra-form input.sidra-form__input--bad:focus {
	border-color: #8C2F1F;
	box-shadow: 0 0 0 1px rgba(140, 47, 31, .4);
}

/* -------------------------------------------------- попап */

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

.sidra-modal {
	position: fixed;
	inset: 0;
	z-index: 100000;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 24px;
}

.sidra-modal__backdrop {
	position: absolute;
	inset: 0;
	background: rgba(14, 36, 24, .8);
	animation: sidra-fade .2s var(--sidra-ease);
}

.sidra-modal__box {
	position: relative;
	background: var(--sidra-ivory);
	border: 1px solid rgba(20, 48, 31, .16);
	border-radius: 2px;
	box-shadow: 0 26px 70px rgba(14, 36, 24, .42);
	padding: 42px 42px 38px;
	width: min(560px, 100%);
	max-height: calc(100vh - 48px);
	overflow-y: auto;
	animation: sidra-rise .28s var(--sidra-ease);
}

@keyframes sidra-fade {
	from { opacity: 0; }
	to { opacity: 1; }
}

@keyframes sidra-rise {
	from { opacity: 0; transform: translateY(12px); }
	to { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
	.sidra-modal__backdrop,
	.sidra-modal__box {
		animation: none;
	}
}

.sidra-modal__close {
	position: absolute;
	top: 12px;
	right: 14px;
	background: none;
	background-color: transparent;
	border: 0;
	font-size: 26px;
	line-height: 1;
	color: var(--sidra-muted);
	cursor: pointer;
	padding: 6px 10px;
	transition: color .25s var(--sidra-ease);
}

button.sidra-modal__close:hover,
button.sidra-modal__close:focus {
	background-color: transparent;
	color: var(--sidra-green);
}

.sidra-modal__title {
	font-family: "Playfair Display", Georgia, serif;
	font-weight: 400;
	font-size: 30px;
	line-height: 1.15;
	color: var(--sidra-green);
	margin: 0 0 10px;
}

.sidra-modal__lead {
	font-family: Montserrat, sans-serif;
	font-weight: 400;
	font-size: 14.5px;
	line-height: 1.7;
	color: var(--sidra-body);
	margin: 0 0 26px;
}

.sidra-modal__wa {
	margin: 22px 0 0;
	padding-top: 20px;
	border-top: 1px solid var(--sidra-line);
	font-family: Montserrat, sans-serif;
	font-size: 13px;
}

/* В попапе фон светлый, значит ссылка в WhatsApp тут не золотая. */
.sidra-modal__wa a.sidra-wa--link {
	color: var(--sidra-green);
	border-bottom-color: var(--sidra-gold);
}

.sidra-modal__wa a.sidra-wa--link:hover,
.sidra-modal__wa a.sidra-wa--link:focus {
	color: var(--sidra-gold-deep);
	border-bottom-color: var(--sidra-green);
}

body.sidra-locked {
	overflow: hidden;
}

/* -------------------------------------------------- галерея */

.sidra-gallery {
	display: grid;
	grid-template-columns: repeat(var(--sidra-cols, 3), 1fr);
	gap: 6px;
}

.sidra-gallery__item {
	margin: 0;
	line-height: 0;
	background: var(--sidra-sand);
	overflow: hidden;
}

.sidra-gallery__img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	transition: transform .8s var(--sidra-ease);
}

.sidra-gallery__item:hover .sidra-gallery__img {
	transform: scale(1.05);
}

/* -------------------------------------------------- контакты */

.sidra-contacts__row {
	display: grid;
	grid-template-columns: 16px 108px 1fr;
	gap: 14px;
	padding: 18px 0;
	border-bottom: 1px solid var(--sidra-line);
	align-items: baseline;
}

/* Значок стоит отдельной колонкой сетки, а не внутри подписи. Так он не
   зависит от направления письма: на арабском подпись выключена вправо, и
   внутри неё значок ушёл бы к правому краю, встав между подписью и значением.
   Отдельной колонкой значки выстраиваются ровным столбцом на всех языках. */

.sidra-contacts__icon {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 1.1em;
	color: var(--sidra-gold-deep);
}

.sidra-contacts__icon svg {
	width: 16px;
	height: 16px;
	flex: none;
}

.sidra-contacts__row:first-child {
	padding-top: 0;
}

.sidra-contacts__label {
	font-family: Montserrat, sans-serif;
	font-weight: 500;
	font-size: 10.5px;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--sidra-muted);
}

.sidra-contacts__value {
	font-family: Montserrat, sans-serif;
	font-weight: 400;
	font-size: 16.5px;
	line-height: 1.6;
	color: var(--sidra-ink);
}

.sidra-contacts__value a.sidra-phone {
	color: var(--sidra-green);
	text-decoration: none;
	border-bottom: 1px solid var(--sidra-gold);
	transition: color .25s var(--sidra-ease);
}

.sidra-contacts__value a.sidra-phone:hover {
	color: var(--sidra-gold-deep);
}

.sidra-contacts__value a.sidra-wa--link {
	color: var(--sidra-green);
	border-bottom-color: var(--sidra-gold);
	font-size: 11px;
}

.sidra-contacts__value a.sidra-wa--link:hover {
	color: var(--sidra-gold-deep);
}

.sidra-contacts__actions {
	margin: 26px 0 0;
	display: flex;
	flex-wrap: wrap;
	gap: 12px 24px;
	align-items: center;
}

.sidra-contacts--dark {
	--sidra-line: rgba(245, 240, 230, .2);
}

.sidra-contacts--dark .sidra-contacts__label {
	color: rgba(245, 240, 230, .62);
}

/* Затемнённое золото нужно только на светлом фоне. На тёмном оно тонет,
   там берётся обычное фирменное. */
.sidra-contacts--dark .sidra-contacts__icon {
	color: var(--sidra-gold);
}

.sidra-contacts--dark .sidra-contacts__value,
.sidra-contacts--dark .sidra-contacts__value a.sidra-phone,
.sidra-contacts--dark .sidra-contacts__value a.sidra-wa--link,
.sidra-contacts--dark a.sidra-link {
	color: var(--sidra-ivory);
}

.sidra-contacts--dark .sidra-contacts__value a.sidra-phone:hover,
.sidra-contacts--dark .sidra-contacts__value a.sidra-wa--link:hover,
.sidra-contacts--dark a.sidra-link:hover {
	color: var(--sidra-gold-light);
}

/* -------------------------------------------------- 404 */

.sidra-404 {
	text-align: center;
	max-width: 620px;
	margin: 0 auto;
}

.sidra-404__code {
	font-family: Montserrat, sans-serif;
	font-weight: 500;
	font-size: 12px;
	letter-spacing: .34em;
	color: var(--sidra-gold);
	margin: 0 0 22px;
}

h1.sidra-404__title {
	font-family: "Playfair Display", Georgia, serif;
	font-weight: 400;
	font-size: 46px;
	line-height: 1.14;
	color: var(--sidra-ivory);
	margin: 0 0 18px;
}

.sidra-404__lead {
	font-family: Montserrat, sans-serif;
	font-weight: 400;
	font-size: 16px;
	line-height: 1.75;
	color: rgba(245, 240, 230, .82);
	margin: 0 auto 36px;
	max-width: 46ch;
}

.sidra-404__links {
	display: flex;
	flex-wrap: wrap;
	gap: 16px 28px;
	align-items: center;
	justify-content: center;
	margin: 0;
}

a.sidra-404__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	font-family: Montserrat, sans-serif;
	font-weight: 500;
	font-size: 12px;
	line-height: 1;
	letter-spacing: .18em;
	text-transform: uppercase;
	color: var(--sidra-ink);
	background-color: var(--sidra-gold);
	border: 1px solid var(--sidra-gold);
	border-radius: 2px;
	padding: 18px 32px;
	min-height: 52px;
	text-decoration: none;
	transition: background-color .25s var(--sidra-ease), color .25s var(--sidra-ease);
}

a.sidra-404__btn:hover {
	background-color: transparent;
	color: var(--sidra-gold);
}

a.sidra-404__link {
	font-family: Montserrat, sans-serif;
	font-weight: 500;
	font-size: 11.5px;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--sidra-ivory);
	border-bottom: 1px solid var(--sidra-gold);
	text-decoration: none;
	padding-bottom: 3px;
	transition: color .25s var(--sidra-ease);
}

a.sidra-404__link:hover {
	color: var(--sidra-gold-light);
}

/* -------------------------------------------------- заголовки поверх кита */

h2.sidra-modal__title,
h3.sidra-services__title {
	color: var(--sidra-green);
}

/* -------------------------------------------------- планшет и телефон */

@media (max-width: 1024px) {
	.sidra-services__grid {
		gap: 0 36px;
	}

	.sidra-services__row {
		grid-template-columns: 100px 1fr;
		gap: 18px;
	}
}

@media (max-width: 900px) {
	.sidra-gallery {
		grid-template-columns: repeat(2, 1fr);
	}

	.sidra-services__grid {
		grid-template-columns: 1fr;
	}

	.sidra-services__grid > .sidra-services__row:nth-last-child(2) {
		border-bottom: 1px solid var(--sidra-line);
	}

	.sidra-services__grid > .sidra-services__row:last-child {
		border-bottom: 0;
	}
}

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

	.sidra-services__row {
		grid-template-columns: 96px 1fr;
		gap: 16px;
		padding: 22px 0;
	}

	.sidra-services__title {
		font-size: 19px;
	}

	.sidra-services__group + .sidra-services__group {
		margin-top: 40px;
	}

	.sidra-contacts__row {
		grid-template-columns: 16px 1fr;
		gap: 6px 12px;
		padding: 16px 0;
	}

	/* Подпись и значение встают друг под другом во второй колонке,
	   значок остаётся напротив подписи. */
	.sidra-contacts__value {
		grid-column: 2;
	}

	.sidra-modal {
		padding: 0;
		align-items: flex-end;
	}

	.sidra-modal__box {
		width: 100%;
		max-height: 92vh;
		padding: 34px 22px 28px;
		border-radius: 2px 2px 0 0;
	}

	.sidra-modal__title {
		font-size: 25px;
	}

	h1.sidra-404__title {
		font-size: 32px;
	}

	.sidra-404__links {
		flex-direction: column;
		gap: 18px;
	}

	.sidra-form__submit,
	.sidra-open--button,
	.sidra-open--gold,
	.sidra-open--ghost,
	a.sidra-wa--ghost,
	a.sidra-wa--button,
	a.sidra-404__btn {
		width: 100%;
	}
}

/* Подвал тёмный: телефон и адрес там выводятся шорткодами
   вне блока .sidra-contacts, поэтому цвет задаётся отдельно. */

.elementor-location-footer a.sidra-phone {
	color: var(--sidra-gold-light);
	text-decoration: none;
	border-bottom: 1px solid rgba(227, 199, 122, .45);
	transition: color .25s var(--sidra-ease), border-color .25s var(--sidra-ease);
}

.elementor-location-footer a.sidra-phone:hover {
	color: var(--sidra-ivory);
	border-bottom-color: var(--sidra-ivory);
}

a.sidra-phone--dark {
	color: var(--sidra-gold-light);
	text-decoration: none;
	border-bottom: 1px solid rgba(227, 199, 122, .45);
	transition: color .25s var(--sidra-ease), border-color .25s var(--sidra-ease);
}

a.sidra-phone--dark:hover {
	color: var(--sidra-ivory);
	border-bottom-color: var(--sidra-ivory);
}

/* Плоский список без групп используется в узких колонках, например
   на главной, где рядом с ним стоит текст. Там только одна колонка. */

.sidra-services--flat .sidra-services__grid {
	grid-template-columns: 1fr;
}

.sidra-services--flat .sidra-services__grid > .sidra-services__row:nth-last-child(2) {
	border-bottom: 1px solid var(--sidra-line);
}

.sidra-services--flat .sidra-services__grid > .sidra-services__row:last-child {
	border-bottom: 0;
}

/* -------------------------------------------------- шапка, меню, панель

   Меню раскрывается чекбоксом, без JS: разметка приходит из шорткода, и если
   скрипт не выполнится, панель всё равно откроется. JS добавляет только то,
   чего CSS не умеет: блокировку прокрутки, Escape и закрытие по клику
   на пункт. */

.elementor-location-header {
	position: sticky;
	top: 0;
	z-index: 500;
	transition: box-shadow .3s var(--sidra-ease);
}

.elementor-location-header.is-stuck {
	box-shadow: 0 6px 26px rgba(14, 36, 24, .1);
}

/* Якорь не должен уезжать под липкую шапку. */
html {
	scroll-padding-top: 104px;
}

.sidra-menu-wrap {
	display: block;
}

.sidra-menu-checkbox {
	position: absolute;
	width: 1px;
	height: 1px;
	opacity: 0;
	pointer-events: none;
}

.sidra-menu-toggle,
.sidra-menu-close,
.sidra-menu-backdrop {
	display: none;
}

/* На широком экране обёртка прозрачна для раскладки: nav остаётся
   обычным элементом флекса, как будто её нет. */
.sidra-drawer {
	display: contents;
}

.sidra-drawer__lang {
	display: none;
}

.sidra-nav__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 30px;
}

.sidra-nav__list a {
	font-family: Montserrat, sans-serif;
	font-weight: 400;
	font-size: 12.5px;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--sidra-green);
	text-decoration: none;
	padding-bottom: 4px;
	border-bottom: 1px solid transparent;
	transition: color .25s var(--sidra-ease), border-color .25s var(--sidra-ease);
}

.sidra-nav__list a:hover,
.sidra-nav__list a:focus {
	color: var(--sidra-gold-deep);
	border-bottom-color: var(--sidra-gold);
}

.sidra-nav__list .current-menu-item a {
	border-bottom-color: rgba(20, 48, 31, .35);
}

.elementor-location-footer .sidra-nav__list {
	flex-direction: column;
	align-items: flex-start;
	gap: 12px;
}

.elementor-location-footer .sidra-nav__list a {
	color: rgba(245, 240, 230, .82);
	font-size: 12px;
	letter-spacing: .1em;
}

.elementor-location-footer .sidra-nav__list a:hover {
	color: var(--sidra-gold-light);
	border-bottom-color: var(--sidra-gold-light);
}

@media (max-width: 1200px) {
	.sidra-nav__list {
		gap: 20px;
	}

	.sidra-nav__list a {
		font-size: 11.5px;
		letter-spacing: .1em;
	}
}

@media (max-width: 1024px) {
	.sidra-menu-toggle {
		display: flex;
		flex-direction: column;
		justify-content: center;
		gap: 5px;
		width: 40px;
		height: 34px;
		cursor: pointer;
		padding: 0 4px;
	}

	.sidra-menu-toggle span {
		display: block;
		height: 1px;
		background: var(--sidra-green);
		transition: background .25s var(--sidra-ease);
	}

	.sidra-menu-toggle:hover span {
		background: var(--sidra-gold-deep);
	}

	.sidra-menu-backdrop {
		display: block;
		position: fixed;
		inset: 0;
		background: rgba(14, 36, 24, .55);
		opacity: 0;
		visibility: hidden;
		transition: opacity .35s var(--sidra-ease), visibility .35s var(--sidra-ease);
		z-index: 1000;
		cursor: pointer;
	}

	.sidra-menu-checkbox:checked ~ .sidra-menu-backdrop {
		opacity: 1;
		visibility: visible;
	}

	.sidra-drawer {
		display: flex;
		flex-direction: column;
		position: fixed;
		top: 0;
		right: 0;
		width: min(330px, 84vw);
		height: 100vh;
		height: 100dvh;
		background: var(--sidra-green);
		padding: 96px 34px 40px;
		transform: translateX(102%);
		transition: transform .4s var(--sidra-ease);
		z-index: 1001;
		overflow-y: auto;
		box-shadow: -20px 0 50px rgba(14, 36, 24, .28);
	}

	.sidra-menu-checkbox:checked ~ .sidra-drawer {
		transform: none;
	}

	.sidra-drawer .sidra-nav__list {
		flex-direction: column;
		align-items: stretch;
		gap: 0;
	}

	.sidra-drawer .sidra-nav__list li {
		border-bottom: 1px solid rgba(245, 240, 230, .14);
	}

	.sidra-drawer .sidra-nav__list li:last-child {
		border-bottom: 0;
	}

	.sidra-drawer .sidra-nav__list a {
		display: block;
		padding: 18px 0;
		color: var(--sidra-ivory);
		font-size: 14px;
		letter-spacing: .16em;
		border-bottom: 0;
	}

	.sidra-drawer .sidra-nav__list a:hover,
	.sidra-drawer .sidra-nav__list .current-menu-item a {
		color: var(--sidra-gold-light);
		border-bottom: 0;
	}

	.sidra-drawer__lang {
		display: block;
		margin-top: auto;
		padding-top: 30px;
		border-top: 1px solid rgba(245, 240, 230, .14);
	}

	.sidra-drawer__lang .sidra-lang__item {
		color: rgba(245, 240, 230, .72);
	}

	.sidra-drawer__lang .sidra-lang__item:hover {
		color: var(--sidra-ivory);
	}

	.sidra-drawer__lang .sidra-lang__item.is-current {
		color: var(--sidra-gold-light);
	}

	.sidra-drawer__lang .sidra-lang__sep {
		background: rgba(245, 240, 230, .28);
	}

	.sidra-menu-close {
		display: block;
		position: fixed;
		top: 28px;
		right: 30px;
		width: 30px;
		height: 30px;
		cursor: pointer;
		opacity: 0;
		visibility: hidden;
		transition: opacity .3s var(--sidra-ease), visibility .3s var(--sidra-ease);
		z-index: 1002;
	}

	.sidra-menu-checkbox:checked ~ .sidra-menu-close {
		opacity: 1;
		visibility: visible;
	}

	.sidra-menu-close span {
		position: absolute;
		top: 50%;
		left: 0;
		width: 100%;
		height: 1px;
		background: var(--sidra-ivory);
	}

	.sidra-menu-close span:first-child {
		transform: rotate(45deg);
	}

	.sidra-menu-close span:last-child {
		transform: rotate(-45deg);
	}

	/* В подвале меню остаётся обычным столбиком, панель ему не нужна. */
	.elementor-location-footer .sidra-menu-toggle,
	.elementor-location-footer .sidra-menu-backdrop,
	.elementor-location-footer .sidra-menu-close {
		display: none;
	}

	.elementor-location-footer .sidra-drawer {
		display: block;
		position: static;
		width: auto;
		height: auto;
		background: none;
		padding: 0;
		transform: none;
		box-shadow: none;
		overflow: visible;
	}

	.elementor-location-footer .sidra-drawer__lang {
		display: none;
	}
}

@media (prefers-reduced-motion: reduce) {
	.sidra-drawer,
	.sidra-menu-backdrop,
	.sidra-menu-close {
		transition: none;
	}
}

body.sidra-drawer-open {
	overflow: hidden;
}

/* -------------------------------------------------- переключатель языков */

.sidra-lang {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	font-family: Montserrat, sans-serif;
	font-weight: 500;
	font-size: 11px;
	letter-spacing: .18em;
}

.sidra-lang__item {
	color: var(--sidra-muted);
	text-decoration: none;
	transition: color .25s var(--sidra-ease);
}

.sidra-lang__item:hover,
.sidra-lang__item:focus {
	color: var(--sidra-gold-deep);
}

.sidra-lang__item.is-current {
	color: var(--sidra-green);
}

.sidra-lang__sep {
	width: 1px;
	height: 11px;
	background: rgba(20, 48, 31, .25);
	display: inline-block;
}

.elementor-location-footer .sidra-lang__item {
	color: rgba(245, 240, 230, .78);
}

.elementor-location-footer .sidra-lang__item:hover {
	color: var(--sidra-ivory);
}

.elementor-location-footer .sidra-lang__item.is-current {
	color: var(--sidra-gold-light);
}

.elementor-location-footer .sidra-lang__sep {
	background: rgba(245, 240, 230, .28);
}

/* Шапка на телефоне должна оставаться в одну строку. */

@media (max-width: 1024px) {
	.sidra-logo--header {
		width: 168px !important;
	}
}

@media (max-width: 767px) {
	.sidra-logo--header {
		width: 150px !important;
	}
}

/* -------------------------------------------------- вызов такси

   На компьютере такси не вызывают, поэтому кнопка живёт только до 1024px. */

.sidra-taxi__open {
	display: none;
}

@media (max-width: 1024px) {
	.sidra-taxi__open {
		display: inline-flex;
	}
}

.sidra-taxi[hidden],
.sidra-cs[hidden] {
	display: none;
}

.sidra-taxi,
.sidra-cs {
	position: fixed;
	inset: 0;
	z-index: 100001;
	display: flex;
	align-items: flex-end;
	justify-content: center;
}

.sidra-taxi__backdrop,
.sidra-cs__backdrop {
	position: absolute;
	inset: 0;
	background: rgba(14, 36, 24, .78);
	animation: sidra-fade .2s var(--sidra-ease);
}

.sidra-taxi__box,
.sidra-cs__box {
	position: relative;
	width: min(460px, 100%);
	background: var(--sidra-ivory);
	border-radius: 2px 2px 0 0;
	padding: 34px 28px 28px;
	box-shadow: 0 -14px 50px rgba(14, 36, 24, .38);
	animation: sidra-rise .28s var(--sidra-ease);
}

@media (min-width: 768px) {
	.sidra-taxi,
	.sidra-cs {
		align-items: center;
	}

	.sidra-taxi__box,
	.sidra-cs__box {
		border-radius: 2px;
	}
}

.sidra-taxi__close,
.sidra-cs__close {
	position: absolute;
	top: 10px;
	right: 14px;
	background: none;
	background-color: transparent;
	border: 0;
	font-size: 26px;
	line-height: 1;
	color: var(--sidra-muted);
	cursor: pointer;
	padding: 6px 10px;
}

/* Крестик у листа «Связаться» шёл без своего наведения и получал розовую
   заливку из reset.css темы, как любая кнопка. Правило одно на оба листа. */
button.sidra-taxi__close:hover,
button.sidra-taxi__close:focus,
button.sidra-cs__close:hover,
button.sidra-cs__close:focus {
	background-color: transparent;
	color: var(--sidra-green);
}

.sidra-taxi__title,
.sidra-cs__title {
	font-family: "Playfair Display", Georgia, serif;
	font-weight: 400;
	font-size: 26px;
	line-height: 1.15;
	color: var(--sidra-green);
	margin: 0 0 8px;
}

.sidra-taxi__lead,
.sidra-cs__lead {
	font-family: Montserrat, sans-serif;
	font-weight: 400;
	font-size: 13.5px;
	line-height: 1.65;
	color: var(--sidra-body);
	margin: 0 0 20px;
}

.sidra-taxi__address {
	display: flex;
	flex-direction: column;
	gap: 4px;
	margin: 0 0 22px;
	padding: 14px 16px;
	background: var(--sidra-sand);
	font-family: Montserrat, sans-serif;
	font-size: 15px;
	color: var(--sidra-ink);
}

.sidra-taxi__label {
	font-weight: 500;
	font-size: 10.5px;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--sidra-muted);
}

.sidra-taxi__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 10px;
}

a.sidra-taxi__item {
	display: flex;
	align-items: center;
	justify-content: space-between;
	box-sizing: border-box;
	min-height: 56px;
	padding: 16px 20px;
	font-family: Montserrat, sans-serif;
	font-weight: 500;
	font-size: 13px;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--sidra-ivory);
	background-color: var(--sidra-green);
	border: 1px solid var(--sidra-green);
	border-radius: 2px;
	text-decoration: none;
	transition: background-color .25s var(--sidra-ease), color .25s var(--sidra-ease);
}

a.sidra-taxi__item::after {
	content: "";
	width: 7px;
	height: 7px;
	border-top: 1px solid currentColor;
	border-right: 1px solid currentColor;
	transform: rotate(45deg);
}

a.sidra-taxi__item:hover,
a.sidra-taxi__item:focus {
	background-color: var(--sidra-gold);
	border-color: var(--sidra-gold);
	color: var(--sidra-ink);
}

/* Строка с картами не служба такси, ахромная точка. Поэтому она
   выглядит иначе: не заливка, а контур, и под названием стоит пояснение. */
a.sidra-taxi__item--maps {
	flex-wrap: wrap;
	row-gap: 6px;
	padding-top: 14px;
	padding-bottom: 14px;
	color: var(--sidra-green);
	background-color: transparent;
	border-color: var(--sidra-line);
}

a.sidra-taxi__item--maps:hover,
a.sidra-taxi__item--maps:focus {
	color: var(--sidra-ink);
	background-color: var(--sidra-sand);
	border-color: var(--sidra-gold);
}

.sidra-taxi__name {
	flex: 1 1 auto;
}

.sidra-taxi__hint {
	flex: 1 0 100%;
	order: 3;
	font-size: 12px;
	font-weight: 400;
	letter-spacing: 0;
	line-height: 1.4;
	text-transform: none;
	color: var(--sidra-body);
}

/* -------------------------------------------------- кнопка WhatsApp

   Цвета вне палитры, взяты у самого WhatsApp: тёмный #075E54 и #128C7E
   по наведению. Кнопка должна опознаваться за долю секунды, ради этого
   исключение и сделано. Тёмный тон ещё и лучше ложится на слоновую кость,
   чем яркий. Везде, где нужен наш зелёный, есть стиль button. */

a.sidra-wa--whatsapp,
a.sidra-wa--whatsapp-sm {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	box-sizing: border-box;
	font-family: Montserrat, sans-serif;
	font-weight: 500;
	line-height: 1;
	letter-spacing: .14em;
	text-transform: uppercase;
	text-decoration: none;
	color: #FFFDF8;
	background-color: #075E54;
	border: 1px solid #075E54;
	border-radius: 2px;
	transition: background-color .25s var(--sidra-ease), border-color .25s var(--sidra-ease);
}

a.sidra-wa--whatsapp {
	font-size: 12px;
	padding: 18px 30px;
	min-height: 52px;
}

a.sidra-wa--whatsapp-sm {
	font-size: 11.5px;
	letter-spacing: .12em;
	padding: 13px 20px;
	gap: 8px;
}

a.sidra-wa--whatsapp:hover,
a.sidra-wa--whatsapp:focus,
a.sidra-wa--whatsapp-sm:hover,
a.sidra-wa--whatsapp-sm:focus {
	background-color: #128C7E;
	border-color: #128C7E;
	color: #FFFDF8;
}

.sidra-wa__icon {
	flex: 0 0 auto;
	display: block;
}

a.sidra-wa--whatsapp-sm .sidra-wa__icon {
	width: 15px;
	height: 15px;
}

@media (max-width: 767px) {
	a.sidra-wa--whatsapp {
		width: 100%;
	}
}

/* -------------------------------------------------- отзывы */

.sidra-reviews__head {
	display: flex;
	align-items: baseline;
	flex-wrap: wrap;
	gap: 6px 14px;
	margin-bottom: 30px;
}

.sidra-reviews__stars {
	display: inline-flex;
	gap: 4px;
	transform: translateY(2px);
}

.sidra-reviews__star {
	width: 15px;
	height: 15px;
	background: rgba(20, 48, 31, .2);
	clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
}

.sidra-reviews__star.is-on {
	background: var(--sidra-gold);
}

.sidra-reviews__score {
	font-family: "Playfair Display", Georgia, serif;
	font-size: 26px;
	line-height: 1;
	color: var(--sidra-green);
}

.sidra-reviews__count {
	font-family: Montserrat, sans-serif;
	font-weight: 400;
	font-size: 12.5px;
	letter-spacing: .06em;
	color: var(--sidra-muted);
}

.sidra-reviews__grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 0 46px;
}

.sidra-reviews__item {
	margin: 0;
	padding: 0 0 0 22px;
	border-left: 1px solid var(--sidra-line);
}

.sidra-reviews__text {
	margin: 0 0 14px;
	font-family: Montserrat, sans-serif;
	font-weight: 400;
	font-size: 14.5px;
	line-height: 1.72;
	color: var(--sidra-body);
	quotes: none;
}

.sidra-reviews__meta {
	display: flex;
	flex-wrap: wrap;
	gap: 4px 12px;
	align-items: baseline;
}

.sidra-reviews__author {
	font-family: Montserrat, sans-serif;
	font-weight: 500;
	font-size: 11px;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--sidra-green);
}

.sidra-reviews__when {
	font-family: Montserrat, sans-serif;
	font-weight: 400;
	font-size: 12px;
	color: var(--sidra-muted);
}

.sidra-reviews__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 14px 28px;
	align-items: center;
	margin: 34px 0 0;
}

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

	.sidra-reviews__item {
		padding: 0 0 0 18px;
	}
}


/* Контурная кнопка по светлому фону. Ghost выше рассчитан на тёмное поле:
   слоновая кость по прозрачному. Здесь наоборот, тёмно-зелёный контур по
   кремовому. Ховер уходит в затемнённое золото, а не в фирменное: фирменное
   на кремовом даёт 2.13:1 и на подписи не читается. */

button.sidra-open--outline {
	color: var(--sidra-green);
	background-color: transparent;
	border-color: var(--sidra-green);
}

button.sidra-open--outline:hover,
button.sidra-open--outline:focus {
	color: var(--sidra-gold-deep);
	border-color: var(--sidra-gold-deep);
	background-color: transparent;
}

/* Маршрут и такси под адресом. Отдельной строкой, а не в подбор со значением:
   адрес бывает длинным, и на узком экране ссылки, поставленные рядом, съезжали
   бы в разнобой. Такси показывается только до 1024px, это его общее правило. */

.sidra-contacts__sub {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px 18px;
	margin-top: 10px;
}

/* Внутри листа блок контактов идёт без внешних отступов: у листа свои. */

.sidra-cs__box .sidra-contacts {
	margin: 0;
}

/* На странице контактов за последней строкой идёт ряд ссылок, и линейка под
   ней разделяет. В листе за ней ничего нет, и линейка повисает в воздухе. */

.sidra-cs__box .sidra-contacts__row:last-child {
	border-bottom: 0;
	padding-bottom: 0;
}


/* -------------------------------------------------- герой главной на телефоне

   На широком экране герой это две колонки: текст слева, снимок справа. Ниже
   767px Elementor складывает их в столбец, снимок становится полосой в 260px
   под текстом, и страница начинается с пустого кремового поля.

   На телефоне снимок уходит в подложку: растягивается на весь герой, текст
   ложится поверх. Зелёная штора поверх снимка держит контраст, иначе светлые
   места кадра съедают буквы. Разметку это не трогает, меняется раскладка
   внутри самого героя.

   Порог 767px взят не с потолка: ровно на нём Elementor меняет направление
   контейнера, так что подложка включается тогда же, когда колонки встают
   друг под друга.

   Про селекторы. Цепляемся за идентификаторы Elementor, и это осознанно:
   пользовательские классы контейнерам он не выводит вовсе, поле _css_classes
   у них не зарегистрировано. Подходящего хука тоже нет, after_add_attributes
   доходит только до виджетов. Идентификаторы sdr* проставлены руками при
   сборке страницы и одинаковы на всех четырёх языках:

     sdr0008 — герой целиком,
     sdr0006 — колонка с текстом и кнопками,
     sdr0007 — колонка со снимком.

   Если герой когда-нибудь пересоберут в редакторе, Elementor выдаст новые
   случайные идентификаторы, и эти три строки придётся поправить.

   !important тоже вынужденный: размеры и цвета Elementor пишет селектором из
   трёх-четырёх классов с номером страницы, иначе его не перебить. */

@media (max-width: 767px) {
	.elementor-element-sdr0008 {
		position: relative;
		min-height: 78vh;
		min-height: 78svh;
	}

	/* Снимок на всю площадь героя. Ширину и минимальную высоту снимаем: они
	   приходят от Elementor и держали бы прежнюю полосу. */
	.elementor-element-sdr0008 > .elementor-element-sdr0007 {
		position: absolute !important;
		inset: 0 !important;
		z-index: 0;
		width: auto !important;
		min-height: 0 !important;
		background-position: 50% 45% !important;
	}

	/* Штора. Чёрный, а не затемнённый зелёный: зелёный подкрашивал сам снимок
	   и съедал тёплые полутона кабинета. Плотнее всего сверху, где заголовок,
	   и уходит в прозрачность к низу. Совсем до нуля не доводится: внизу кадра
	   светлое бельё, а там же стоит контурная кнопка слоновой костью. */
	.elementor-element-sdr0007::after {
		content: "";
		position: absolute;
		inset: 0;
		background: linear-gradient(
			180deg,
			rgba(0, 0, 0, .72) 0%,
			rgba(0, 0, 0, .56) 42%,
			rgba(0, 0, 0, .34) 74%,
			rgba(0, 0, 0, .22) 100%
		);
	}

	/* Колонка с текстом тянется на всю высоту героя, чтобы содержимое
	   встало по центру, а не прижалось к верху с пустотой внизу. */
	.elementor-element-sdr0008 > .elementor-element-sdr0006 {
		position: relative;
		z-index: 1;
		flex-grow: 1;
		justify-content: center;
		padding: 72px 24px !important;
	}

	.elementor-element-sdr0006 .elementor-heading-title {
		color: var(--sidra-ivory) !important;
	}

	.elementor-element-sdr0006 .elementor-widget-text-editor,
	.elementor-element-sdr0006 .elementor-widget-text-editor p {
		color: rgba(245, 240, 230, .86) !important;
	}

	/* Контурная кнопка нарисована тёмно-зелёным по светлому фону.
	   На снимке от неё не осталось бы ничего. */
	.elementor-element-sdr0006 .elementor-button,
	.elementor-element-sdr0006 button.sidra-open--outline {
		border-color: rgba(245, 240, 230, .55) !important;
		color: var(--sidra-ivory) !important;
	}

	/* У кнопки WhatsApp свой фирменный цвет, он остаётся. Не хватает только
	   края: тёмная заливка на тёмном снимке теряет форму. */
	.elementor-element-sdr0006 a.sidra-wa {
		border-color: rgba(245, 240, 230, .38);
	}

	/* ---------- шапка поверх героя ----------

	   Шапка выходит из потока, чтобы герой начинался от самого верха страницы.
	   Иначе первый экран это шапка плюс герой, то есть на её высоту больше
	   экрана, и низ героя всегда обрезан. Теперь шапка лежит поверх снимка,
	   и вместе они занимают ровно один экран.

	   Всё это включается только там, где герой есть: на остальных страницах
	   шапка остаётся в потоке, иначе первая секция уехала бы под неё.

	   Пока страница не прокручена, у шапки нет своего фона. Знак и бургер
	   нарисованы тёмно-зелёным и на снимке пропали бы, поэтому на это время
	   они становятся слоновой костью. Как только пошла прокрутка, фон и цвет
	   возвращаются. Прокрученное состояние помечает скрипт классом is-stuck,
	   он и раньше был нужен для мягкой тени. */

	body:has(.elementor-element-sdr0008) .elementor-location-header {
		position: fixed;
		inset: 0 0 auto;
	}

	body:has(.elementor-element-sdr0008) .elementor-element-sdr0008 {
		min-height: 100vh;
		min-height: 100svh;
	}

	body:has(.elementor-element-sdr0008) .elementor-element-shd0007 {
		background-color: transparent !important;
		transition: background-color .35s var(--sidra-ease);
	}

	body:has(.elementor-element-sdr0008) .elementor-location-header .sidra-logo,
	body:has(.elementor-element-sdr0008) .elementor-location-header .sidra-menu-toggle span {
		transition: color .35s var(--sidra-ease), background-color .35s var(--sidra-ease);
	}

	/* Цвет знака шорткод пишет инлайном в style, обычным правилом его не перебить.
	   Сам SVG красится через currentColor, поэтому меняем цвет на обёртке. */
	body:has(.elementor-element-sdr0008) .elementor-location-header .sidra-logo {
		color: var(--sidra-ivory) !important;
	}

	body:has(.elementor-element-sdr0008) .elementor-location-header .sidra-menu-toggle span {
		background: var(--sidra-ivory);
	}

	body:has(.elementor-element-sdr0008) .elementor-location-header.is-stuck .elementor-element-shd0007 {
		background-color: var(--sidra-ivory) !important;
	}

	body:has(.elementor-element-sdr0008) .elementor-location-header.is-stuck .sidra-logo {
		color: var(--sidra-green) !important;
	}

	body:has(.elementor-element-sdr0008) .elementor-location-header.is-stuck .sidra-menu-toggle span {
		background: var(--sidra-green);
	}
}

/* -------------------------------------------------- арабский

   Вёрстка на арабском не зеркалится. Атрибут dir="rtl" на документе
   разворачивал всё разом: логотип уезжал вправо, кнопка WhatsApp влево,
   картинка услуги менялась местами с текстом, панель меню выезжала с другой
   стороны. Блоки должны стоять там же, где на остальных языках, поэтому
   документ остался слева направо, а справа налево идёт только сам текст.

   Признак страницы это класс .sidra-ar на body, его ставит плагин.

   Правило, которое здесь легко нарушить: direction ставим только на то, что
   само содержит текст. На флекс- и грид-контейнер его ставить нельзя, там
   direction переставляет элементы местами, и вёрстка зеркалится снова. */

/* Playfair и Montserrat арабских глифов не содержат, поэтому лицо меняем.
   Шрифт подключается только на арабских страницах. */

.sidra-ar,
.sidra-ar p,
.sidra-ar li,
.sidra-ar label,
.sidra-ar input,
.sidra-ar select,
.sidra-ar textarea,
.sidra-ar .sidra-services__desc,
.sidra-ar .sidra-reviews__text,
.sidra-ar .sidra-taxi__hint,
.sidra-ar .sidra-contacts__value {
	font-family: "Noto Naskh Arabic", "Segoe UI", "Geeza Pro", Tahoma, sans-serif;
}

.sidra-ar h1,
.sidra-ar h2,
.sidra-ar h3,
.sidra-ar h4,
.sidra-ar .sidra-services__title,
.sidra-ar .sidra-services__grouptitle,
.sidra-ar .sidra-modal__title,
.sidra-ar .sidra-taxi__title,
.sidra-ar .sidra-404__title,
.sidra-ar .sidra-reviews__score {
	font-family: "Noto Naskh Arabic", "Traditional Arabic", "Times New Roman", serif;
	letter-spacing: 0;
}

/* Разрядка на арабском разрывает вязь, поэтому её снимаем. */
.sidra-ar .sidra-nav__list a,
.sidra-ar .sidra-lang,
.sidra-ar .sidra-link,
.sidra-ar button.sidra-open--link,
.sidra-ar .sidra-form label,
.sidra-ar .sidra-contacts__label,
.sidra-ar .sidra-reviews__author,
.sidra-ar .sidra-taxi__label,
.sidra-ar a.sidra-wa--whatsapp,
.sidra-ar a.sidra-wa--whatsapp-sm,
.sidra-ar a.sidra-wa--link,
.sidra-ar a.sidra-taxi__item,
.sidra-ar .sidra-form__submit,
.sidra-ar .sidra-open--button,
.sidra-ar .sidra-open--gold,
.sidra-ar .sidra-open--ghost,
.sidra-ar a.sidra-404__btn,
.sidra-ar a.sidra-404__link {
	letter-spacing: .02em;
}

/* Направление письма и выключка вправо.

   Список нарочно собран из конечных носителей текста: заголовки, абзацы,
   пункты перечня, поля формы. Контейнеров тут нет ни одного, и добавлять их
   сюда нельзя. Кнопки тоже не входят: внутри у них знак и подпись рядом,
   direction поменял бы их местами. Отдельная арабская строка и без того
   читается верно, этим занимается двунаправленный алгоритм. */

.sidra-ar h1,
.sidra-ar h2,
.sidra-ar h3,
.sidra-ar h4,
.sidra-ar p,
.sidra-ar .elementor-heading-title,
.sidra-ar .elementor-widget-text-editor,
.sidra-ar .sidra-services__title,
.sidra-ar .sidra-services__desc,
.sidra-ar .sidra-services__grouptitle,
.sidra-ar .sidra-reviews__text,
.sidra-ar .sidra-reviews__author,
.sidra-ar .sidra-contacts__label,
.sidra-ar .sidra-contacts__value,
.sidra-ar .sidra-modal__title,
.sidra-ar .sidra-modal__lead,
.sidra-ar .sidra-taxi__title,
.sidra-ar .sidra-taxi__lead,
.sidra-ar .sidra-taxi__hint,
.sidra-ar .sidra-404__title,
.sidra-ar .sidra-404__text,
.sidra-ar .sidra-form label,
.sidra-ar .sidra-form input,
.sidra-ar .sidra-form select,
.sidra-ar .sidra-form textarea,
.sidra-ar .sidra-form__err {
	direction: rtl;
	text-align: right;
}

/* Ряды кнопок и ссылок под текстом.

   Текст прижат вправо, а ряд кнопок под ним оставался у левого края колонки:
   это флекс, и выключка текста на него не действует. Колонки при этом никуда
   не двигаются, меняется только край, к которому прижат ряд. Порядок кнопок
   сохраняется: direction здесь не используется нарочно, он бы поменял их
   местами.

   Шапка и подвал исключены: там такой же ряд у переключателя языков, его
   двигать не надо. Боковое меню тоже лежит в шапке, и это важно: оно идёт
   колонкой, а justify-content увёл бы его содержимое вниз. */

.sidra-ar .sidra-services__actions,
.sidra-ar .sidra-reviews__head {
	justify-content: flex-end;
}

/* Кнопка отправки лежит прямо в форме, ряда вокруг неё нет, поэтому
   прижимается своим отступом. width нужна: без неё блочный флекс
   занял бы всю ширину и auto некуда было бы расти. */
.sidra-ar .sidra-form__submit {
	display: flex;
	width: fit-content;
	margin-inline-start: auto;
}

.sidra-ar .elementor:not(.elementor-location-header):not(.elementor-location-footer) .e-con.e-flex:has(> .elementor-widget > * > a.sidra-wa),
.sidra-ar .elementor:not(.elementor-location-header):not(.elementor-location-footer) .e-con.e-flex:has(> .elementor-widget > * > .sidra-open--ghost),
.sidra-ar .elementor:not(.elementor-location-header):not(.elementor-location-footer) .e-con.e-flex:has(> .elementor-widget > * > .sidra-open--button),
.sidra-ar .elementor:not(.elementor-location-header):not(.elementor-location-footer) .e-con.e-flex:has(> .elementor-widget > * > .sidra-open--gold),
.sidra-ar .elementor:not(.elementor-location-header):not(.elementor-location-footer) .e-con.e-flex:has(> .elementor-widget > * > button.sidra-taxi__open) {
	justify-content: flex-end;
}

/* Принудительная замена шрифтов.
   Elementor задаёт семейство селектором из трёх классов, аккуратно его
   не перебить. Это не вопрос вкуса: в Playfair и Montserrat нет арабских
   глифов, и без замены браузер подставляет случайное лицо. */

.sidra-ar h1,
.sidra-ar h2,
.sidra-ar h3,
.sidra-ar h4,
.sidra-ar .elementor-heading-title {
	font-family: "Noto Naskh Arabic", "Traditional Arabic", "Times New Roman", serif !important;
	letter-spacing: 0 !important;
}

.sidra-ar,
.sidra-ar .elementor-widget-text-editor,
.sidra-ar .elementor-widget-text-editor p,
.sidra-ar .elementor-button {
	font-family: "Noto Naskh Arabic", "Segoe UI", "Geeza Pro", Tahoma, sans-serif !important;
}

.sidra-ar .elementor-button {
	letter-spacing: .02em !important;
}

/* Шапка до 1024px: логотип с одного края, бургер с другого.
   Контейнер меню занимает всю оставшуюся ширину, а своё flex-end
   уводит бургер к краю. Правило общее для всех языков. */

@media (max-width: 1024px) {
	.elementor-location-header .e-con-full > .e-con {
		flex-grow: 1;
	}
}

/* Номера и латинские вставки внутри арабского текста:
   без изоляции двунаправленный алгоритм переставляет группы цифр и плюс. */

a.sidra-phone,
.sidra-ar [dir="ltr"] {
	direction: ltr;
	unicode-bidi: isolate;
}

.sidra-ar .sidra-contacts__value a.sidra-phone {
	display: inline-block;
}

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

   Разметку формы заявки собирает Elementor, чтобы её правили в редакторе,
   а не в коде. Классы у неё свои, поэтому здесь мы приводим её к тому же
   виду, что был у прежней формы: подписи капителью, кремовые поля, зелёная
   кнопка с разрядкой.

   Всё висит на .sidra-eform, класс задан у самого виджета. Любая другая
   форма, собранная в редакторе позже, оформления отсюда не получит и
   останется на стилях Elementor. */

.sidra-eform .elementor-field-group > label.elementor-field-label {
	font-family: Montserrat, sans-serif;
	font-weight: 500;
	font-size: 10.5px;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--sidra-muted);
	padding-bottom: 7px;
}

.sidra-eform .elementor-field-textual {
	font-family: Montserrat, sans-serif;
	font-weight: 400;
	font-size: 15px;
	line-height: 1.5;
	color: var(--sidra-ink);
	background: #FFFDF8;
	border: 1px solid rgba(20, 48, 31, .26);
	border-radius: 2px;
	padding: 13px 14px;
	width: 100%;
	-webkit-appearance: none;
	transition: border-color .25s var(--sidra-ease), box-shadow .25s var(--sidra-ease);
}

.sidra-eform select.elementor-field-textual {
	/* У select снятая системная стрелка не рисуется сама, возвращаем свою. */
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%233B473F' stroke-width='1.4'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 14px center;
	background-size: 12px 8px;
	padding-right: 38px;
}

.sidra-eform .elementor-field-textual:focus {
	outline: 0;
	border-color: var(--sidra-gold);
	box-shadow: 0 0 0 1px var(--sidra-gold);
}

.sidra-eform .elementor-field-textual::placeholder {
	color: var(--sidra-muted);
	opacity: .7;
}

/* Кнопка. Селектор с тегом нарочно: кит Elementor задаёт свой вид
   классом .elementor-button, и одиночный класс его не перебивает. */
.sidra-eform button.elementor-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	font-family: Montserrat, sans-serif;
	font-weight: 500;
	font-size: 12px;
	line-height: 1;
	letter-spacing: .18em;
	text-transform: uppercase;
	border: 1px solid var(--sidra-green);
	border-radius: 2px;
	padding: 18px 32px;
	min-height: 52px;
	margin-top: 10px;
	color: var(--sidra-ivory);
	background-color: var(--sidra-green);
	transition: background-color .25s var(--sidra-ease), color .25s var(--sidra-ease),
		border-color .25s var(--sidra-ease);
}

.sidra-eform button.elementor-button:hover,
.sidra-eform button.elementor-button:focus {
	background-color: var(--sidra-gold);
	border-color: var(--sidra-gold);
	color: var(--sidra-ink);
}

/* Ответы формы. Elementor рисует их своими классами, приводим к нашей
   плашке с золотой чертой слева, как у прежней формы. */
.sidra-eform .elementor-message {
	font-family: Montserrat, sans-serif;
	font-weight: 400;
	font-size: 14.5px;
	line-height: 1.7;
	border-left: 2px solid var(--sidra-gold);
	padding: 14px 18px;
	margin: 18px 0 0;
	background: rgba(201, 162, 39, .12);
	color: var(--sidra-ink);
}

.sidra-eform .elementor-message.elementor-message-danger {
	border-left-color: #8C2F1F;
	background: rgba(140, 47, 31, .09);
}

.sidra-eform .elementor-field-group .elementor-error .elementor-field,
.sidra-eform .elementor-field-group.elementor-error .elementor-field-textual {
	border-color: #8C2F1F;
	box-shadow: 0 0 0 1px rgba(140, 47, 31, .4);
}

.sidra-eform .elementor-field-group > .elementor-error-message {
	font-family: Montserrat, sans-serif;
	font-size: 12.5px;
	line-height: 1.5;
	letter-spacing: 0;
	text-transform: none;
	color: #8C2F1F;
	padding-top: 6px;
}

/* На арабском поля и подписи прижимаются вправо, как и остальной текст.
   Направление ставим только носителям текста: на обёртку колонок его
   класть нельзя, иначе поля поменяются местами. */
.sidra-ar .sidra-eform .elementor-field-label,
.sidra-ar .sidra-eform .elementor-field-textual,
.sidra-ar .sidra-eform .elementor-error-message,
.sidra-ar .sidra-eform .elementor-message {
	direction: rtl;
	text-align: right;
}

.sidra-ar .sidra-eform select.elementor-field-textual {
	background-position: left 14px center;
	padding-right: 14px;
	padding-left: 38px;
}

/* -------------------------------------------------- код страны в телефоне

   intl-tel-input оборачивает поле в .iti и ставит слева флаг с кодом. Его
   собственные стили задают только геометрию, цвета берём из наших переменных.
   Номер телефона пишется слева направо на любом языке, поэтому на арабской
   версии направление у этого поля не переворачиваем. */

.sidra-eform .iti {
	width: 100%;
	direction: ltr;
	--iti-border-color: rgba(20, 48, 31, .26);
	--iti-hover-color: rgba(201, 162, 39, .12);
	--iti-arrow-color: #3B473F;
	--iti-dialcode-color: #3B473F;
	--iti-text-gray: #5A6459;
	--iti-dropdown-bg: #FFFDF8;
	--iti-spacer-horizontal: 12px;
}

.sidra-eform .iti input.elementor-field-textual {
	direction: ltr;
	text-align: left;
}

.sidra-eform .iti__selected-country {
	border-radius: 2px 0 0 2px;
}

.sidra-eform .iti__selected-dial-code {
	font-family: Montserrat, sans-serif;
	font-size: 15px;
}

/* Список стран на телефоне библиотека выносит на body, вне .sidra-eform,
   поэтому правила списка и поиска привязаны к её же классу .iti. */
.iti .iti__dropdown-content {
	font-family: Montserrat, sans-serif;
	font-size: 14px;
	border: 1px solid rgba(20, 48, 31, .26);
	border-radius: 2px;
	box-shadow: 0 12px 32px rgba(0, 0, 0, .18);
}

.iti .iti__search-input {
	font-family: Montserrat, sans-serif;
	font-size: 14px;
	/* Слева место под лупу: библиотека рисует её поверх поля. */
	padding: 10px 28px 10px 32px;
	border-bottom: 1px solid rgba(20, 48, 31, .16);
}

/* Список стран на телефоне библиотека открывает отдельным слоем поверх
   всей страницы и вешает его на body с z-index 1060. Попап Elementor стоит
   на 9999, и список оказывался под ним: «выбор страны не открывается». */
.iti--container {
	z-index: 100001;
}

.iti .iti__country.iti__highlight {
	background: rgba(201, 162, 39, .14);
}

/* На арабской странице поле телефона стоит в общем правиле с direction: rtl,
   здесь его возвращаем: цифры и код страны читаются только слева направо. */
.sidra-ar .sidra-eform .iti,
.sidra-ar .sidra-eform .iti .elementor-field-textual {
	direction: ltr;
	text-align: left;
}

/* Переключатель страны это <button type="button">, и на него ложится
   reset.css темы Hello: [type="button"]:hover там красит фон в розовый
   #CC3366. Специфичность у нашего правила выше на один класс, этого
   хватает. Своё выделение оставляем мягким, золотым, как у строк списка. */
.sidra-eform .iti__selected-country,
.sidra-eform .iti__selected-country:hover,
.sidra-eform .iti__selected-country:focus,
.sidra-eform .iti__selected-country:active {
	background-color: transparent;
	color: inherit;
	border: 0;
	box-shadow: none;
	outline: 0;
	transition: background-color .2s var(--sidra-ease);
}

.sidra-eform .iti__selected-country:hover,
.sidra-eform .iti__selected-country:focus-visible,
.sidra-eform .iti__selected-country[aria-expanded="true"] {
	background-color: rgba(201, 162, 39, .12);
}

/* Поиск по странам это input[type="search"], и reset.css темы даёт ему
   серую рамку, а на :focus-visible чёрную обводку в два пикселя с белым
   ореолом. Перебиваем обе: у нас только линия снизу, в фокусе золотая. */
.iti input.iti__search-input {
	border: 0;
	border-bottom: 1px solid rgba(20, 48, 31, .16);
	border-radius: 0;
	background: #FFFDF8;
	color: var(--sidra-ink);
}

.iti input.iti__search-input:focus,
.iti input.iti__search-input:focus-visible {
	outline: 0;
	border-color: rgba(20, 48, 31, .16);
	border-bottom-color: var(--sidra-gold);
	box-shadow: inset 0 -1px 0 var(--sidra-gold);
}

/* У списка услуг было две стрелки. Одна наша, фоном у самого select, вторая
   от Elementor: он давно рисует её не псевдоэлементом, а отдельным SVG в
   обёртке .select-caret-down-wrapper. Его убираем, нашу оставляем: она
   тоньше и в цвете бренда, как была у прежней формы. */
.sidra-eform .elementor-select-wrapper .select-caret-down-wrapper {
	display: none;
}

/* -------------------------------------------------- лендинг

   Главная nizamistspa.com это весь сайт на одном экране прокрутки: герой на
   снимке, перечень услуг, снимки комнат, короткое «о нас», контакты с
   картой, заявка. Клиент просил без длинных текстов и сложных меню, чтобы
   человек за секунду ушёл в WhatsApp, поэтому меню это четыре якоря, а
   каждая секция короче своей прежней страницы.

   Разметка своя, templates/landing.php, Elementor на странице нет: только
   его попап с формой печатается в подвал. Признак страницы это класс
   .sidra-landing на body, его ставит шаблон. Шапка своя: висит поверх снимка
   прозрачной, при прокрутке скрипт ставит ей is-stuck, и она красится в
   слоновую кость. */

html:has(body.sidra-landing) {
	scroll-behavior: smooth;
	scroll-padding-top: 88px;
}

.sidra-landing {
	background: var(--sidra-ivory);
	margin: 0;
}

.sidra-landing__inner {
	position: relative;
	width: 100%;
	max-width: 1140px;
	margin: 0 auto;
	box-sizing: border-box;
}

.sidra-landing__section {
	padding: 96px 40px;
}

.sidra-landing__head {
	max-width: 640px;
	margin-bottom: 48px;
}

h2.sidra-landing__h2 {
	font-family: "Playfair Display", Georgia, serif;
	font-weight: 400;
	font-size: 40px;
	line-height: 1.12;
	color: var(--sidra-green);
	margin: 0 0 16px;
}

p.sidra-landing__lead {
	font-family: Montserrat, sans-serif;
	font-size: 16px;
	line-height: 1.7;
	color: var(--sidra-body, #3B473F);
	margin: 0;
}

/* --- шапка */

/* Поверх снимка шапка не прозрачная, а слегка затемнённая: верх снимка
   бывает светлым, и слоновая кость на нём пропадала. Тон тёплый тёмный,
   без зелени: снимки салона янтарные, свечи и дерево, зелёная плашка на
   них спорила. Снимок сквозь тон виден, знак, якоря и языки читаются. */
.sidra-landing__header {
	position: fixed;
	inset: 0 0 auto;
	z-index: 50;
	color: var(--sidra-ivory);
	background-color: rgba(28, 20, 12, .38);
	-webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px);
	border-bottom: 1px solid rgba(245, 240, 230, .12);
	transition: background-color .35s var(--sidra-ease), border-color .35s var(--sidra-ease), color .35s var(--sidra-ease);
}

.sidra-landing__bar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	padding: 18px 40px;
}

.sidra-landing__nav {
	display: flex;
	gap: 28px;
	margin: 0 auto;
}

.sidra-landing__nav a {
	font-family: Montserrat, sans-serif;
	font-weight: 500;
	font-size: 11.5px;
	letter-spacing: .16em;
	text-transform: uppercase;
	text-decoration: none;
	color: rgba(245, 240, 230, .86);
	padding: 4px 0;
	border-bottom: 1px solid transparent;
	transition: color .25s var(--sidra-ease), border-color .25s var(--sidra-ease);
}

.sidra-landing__nav a:hover,
.sidra-landing__nav a:focus {
	color: var(--sidra-gold);
	border-bottom-color: var(--sidra-gold);
}

.sidra-landing__tools {
	display: flex;
	align-items: center;
	gap: 28px;
}

/* Цвет знака идёт от шапки через currentColor, см. шаблон. Ссылка вокруг
   знака не должна золотиться по наведению, как обычная ссылка из набора
   Elementor: знак остаётся цвета шапки. */
.sidra-landing__header .sidra-logo {
	color: inherit;
	transition: color .35s var(--sidra-ease);
}

.sidra-landing__header a.sidra-logo-link,
.sidra-landing__header a.sidra-logo-link:hover,
.sidra-landing__header a.sidra-logo-link:focus {
	color: inherit;
}

.sidra-landing__header .sidra-lang__item {
	color: rgba(245, 240, 230, .82);
}

.sidra-landing__header .sidra-lang__item.is-current,
.sidra-landing__header .sidra-lang__item:hover,
.sidra-landing__header .sidra-lang__item:focus {
	color: var(--sidra-gold);
}

.sidra-landing__header .sidra-lang__sep {
	background: rgba(245, 240, 230, .35);
}

.sidra-landing__header.is-stuck {
	color: var(--sidra-green);
	background-color: var(--sidra-ivory);
	border-bottom-color: rgba(20, 48, 31, .13);
}

.sidra-landing__header.is-stuck .sidra-nav a,
.sidra-landing__header.is-stuck .sidra-landing__nav a {
	color: var(--sidra-green);
}

.sidra-landing__header.is-stuck .sidra-landing__nav a:hover,
.sidra-landing__header.is-stuck .sidra-landing__nav a:focus {
	color: var(--sidra-gold-deep);
	border-bottom-color: var(--sidra-gold);
}

.sidra-landing__header.is-stuck .sidra-lang__item {
	color: var(--sidra-muted);
}

.sidra-landing__header.is-stuck .sidra-lang__item.is-current,
.sidra-landing__header.is-stuck .sidra-lang__item:hover,
.sidra-landing__header.is-stuck .sidra-lang__item:focus {
	color: var(--sidra-gold-deep);
}

.sidra-landing__header.is-stuck .sidra-lang__sep {
	background: rgba(20, 48, 31, .25);
}

/* --- герой */

.sidra-landing__hero {
	position: relative;
	display: flex;
	align-items: center;
	min-height: 100vh;
	min-height: 100svh;
	padding: 140px 40px 96px;
	box-sizing: border-box;
	overflow: hidden;
	background: var(--sidra-deep);
	color: var(--sidra-ivory);
}

.sidra-landing__bg,
.sidra-landing__bg-img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	display: block;
}

.sidra-landing__bg-img {
	object-fit: cover;
	object-position: center;
}

/* Затемнение снизу, где текст и кнопка, и лёгкое сверху, под шапкой. */
.sidra-landing__bg::after {
	content: "";
	position: absolute;
	inset: 0;
	background:
		linear-gradient(to bottom, rgba(20, 14, 8, .48), rgba(20, 14, 8, 0) 220px),
		linear-gradient(to top, rgba(0, 0, 0, .64), rgba(0, 0, 0, .22));
}

.sidra-landing__text {
	max-width: 700px;
}

h1.sidra-landing__title {
	font-family: "Playfair Display", Georgia, serif;
	font-weight: 400;
	font-size: 60px;
	line-height: 1.08;
	color: var(--sidra-ivory);
	margin: 0 0 18px;
}

p.sidra-landing__sub {
	font-family: Montserrat, sans-serif;
	font-size: 19px;
	line-height: 1.6;
	color: rgba(245, 240, 230, .86);
	max-width: 560px;
	margin: 0 0 30px;
}

.sidra-landing__actions {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 18px;
}

/* Одна большая кнопка. Шире и выше обычной, на телефоне во всю ширину.
   Общее наведение золотой кнопки, прозрачная с золотым контуром, на светлом
   снимке почти исчезало. Здесь кнопка по наведению заливается слоновой
   костью с зелёной надписью: читается на любом снимке. */
.sidra-landing__actions a.sidra-landing__wa {
	font-size: 13px;
	padding: 22px 44px;
	min-height: 60px;
	text-align: center;
	line-height: 1.35;
	box-shadow: 0 10px 30px rgba(0, 0, 0, .25);
}

.sidra-landing__actions a.sidra-landing__wa:hover,
.sidra-landing__actions a.sidra-landing__wa:focus {
	background-color: var(--sidra-ivory);
	border-color: var(--sidra-ivory);
	color: var(--sidra-green);
}

/* Второй путь тише: ссылка под кнопкой, слоновой костью по снимку. */
.sidra-landing__actions button.sidra-landing__alt {
	color: rgba(245, 240, 230, .8);
	border-bottom-color: rgba(201, 162, 39, .7);
}

.sidra-landing__actions button.sidra-landing__alt:hover,
.sidra-landing__actions button.sidra-landing__alt:focus {
	color: var(--sidra-ivory);
	border-bottom-color: var(--sidra-gold);
}

/* --- услуги: прайс-лист без картинок, две колонки групп */

.sidra-landing__services {
	background: var(--sidra-ivory);
}

.sidra-landing__menu {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 48px 64px;
}

/* Третья группа во всю ширину: две колонки внутри, чтобы не тянуть хвост. */
.sidra-landing__group:nth-child(3):last-child {
	grid-column: 1 / -1;
}

.sidra-landing__group:nth-child(3):last-child .sidra-landing__list {
	columns: 2;
	column-gap: 64px;
}

.sidra-landing__group:nth-child(3):last-child .sidra-landing__svc {
	break-inside: avoid;
}

h3.sidra-landing__group-title {
	font-family: Montserrat, sans-serif;
	font-weight: 500;
	font-size: 11px;
	letter-spacing: .2em;
	text-transform: uppercase;
	color: var(--sidra-gold-deep);
	margin: 0 0 14px;
	padding-bottom: 12px;
	border-bottom: 1px solid var(--sidra-gold);
}

.sidra-landing__list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.sidra-landing__svc {
	padding: 20px 0;
	border-bottom: 1px solid rgba(20, 48, 31, .14);
}

.sidra-landing__svc:last-child {
	border-bottom: 0;
}

.sidra-landing__svc-head {
	display: flex;
	align-items: baseline;
	gap: 12px;
}

h4.sidra-landing__svc-name {
	font-family: "Playfair Display", Georgia, serif;
	font-weight: 400;
	font-size: 21px;
	line-height: 1.25;
	color: var(--sidra-green);
	margin: 0;
	flex: 0 1 auto;
}

/* Отточие до длительности, как в меню. */
.sidra-landing__svc-leader {
	flex: 1 1 24px;
	min-width: 24px;
	border-bottom: 1px dotted rgba(20, 48, 31, .3);
	transform: translateY(-5px);
}

.sidra-landing__svc-meta {
	font-family: Montserrat, sans-serif;
	font-weight: 500;
	font-size: 11px;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--sidra-muted);
	white-space: nowrap;
	display: inline-flex;
	gap: 12px;
}

.sidra-landing__svc-price {
	color: var(--sidra-green);
}

p.sidra-landing__svc-desc {
	font-family: Montserrat, sans-serif;
	font-size: 14px;
	line-height: 1.65;
	color: var(--sidra-body, #3B473F);
	margin: 8px 0 0;
}

.sidra-landing__svc-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 22px;
	margin-top: 12px;
}

/* Ссылка WhatsApp на светлом: те же цвета, что у перечня услуг. */
.sidra-landing__svc-actions a.sidra-wa--link {
	font-size: 10.5px;
	color: var(--sidra-green);
	border-bottom-color: var(--sidra-gold);
	transition: color .25s var(--sidra-ease), border-color .25s var(--sidra-ease);
}

.sidra-landing__svc-actions a.sidra-wa--link:hover,
.sidra-landing__svc-actions a.sidra-wa--link:focus {
	color: var(--sidra-gold-deep);
	border-bottom-color: var(--sidra-green);
}

/* --- снимки комнат: без скруглений, встык, как фото на стене */

.sidra-landing__gallery {
	background: var(--sidra-sand);
	padding-bottom: 8px;
}

.sidra-landing__strip {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 8px;
	padding: 0 8px;
}

.sidra-landing__photo {
	margin: 0;
}

.sidra-landing__photo img {
	display: block;
	width: 100%;
	height: 400px;
	object-fit: cover;
	border-radius: 0;
}

/* --- о нас */

.sidra-landing__about {
	background: #FFFDF8;
}

.sidra-landing__about-row {
	display: grid;
	grid-template-columns: 1.1fr 1fr;
	gap: 48px 80px;
	align-items: start;
}

.sidra-landing__points {
	list-style: none;
	margin: 12px 0 0;
	padding: 0;
	display: grid;
	gap: 22px;
}

.sidra-landing__points li {
	padding-left: 22px;
	border-left: 1px solid var(--sidra-gold);
}

h3.sidra-landing__point-title {
	font-family: "Playfair Display", Georgia, serif;
	font-weight: 400;
	font-size: 20px;
	line-height: 1.3;
	color: var(--sidra-green);
	margin: 0 0 6px;
}

p.sidra-landing__point-text {
	font-family: Montserrat, sans-serif;
	font-size: 14px;
	line-height: 1.65;
	color: var(--sidra-body, #3B473F);
	margin: 0;
}

/* --- контакты: тёмное поле, слева строки, справа карта */

.sidra-landing__contacts {
	background: var(--sidra-green);
	color: var(--sidra-ivory);
}

.sidra-landing__contacts h2.sidra-landing__h2 {
	color: var(--sidra-ivory);
}

.sidra-landing__contacts p.sidra-landing__lead {
	color: rgba(245, 240, 230, .8);
	margin-bottom: 32px;
}

.sidra-landing__contacts-row {
	display: grid;
	grid-template-columns: 1fr 1.1fr;
	gap: 48px 72px;
	align-items: start;
}

.sidra-landing__map .sidra-map iframe {
	display: block;
	width: 100%;
}

p.sidra-landing__hours {
	font-family: Montserrat, sans-serif;
	font-size: 15px;
	line-height: 1.7;
	color: var(--sidra-ivory);
	margin: 22px 0 0;
	display: flex;
	gap: 14px;
	align-items: baseline;
}

.sidra-landing__hours-label {
	font-weight: 500;
	font-size: 11px;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: rgba(245, 240, 230, .62);
}

/* --- заявка: песочное поле, две кнопки */

.sidra-landing__book {
	background: var(--sidra-sand);
}

.sidra-landing__book-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 28px 48px;
}

.sidra-landing__book-text {
	flex: 1 1 460px;
	max-width: 560px;
}

.sidra-landing__book-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
}

/* --- подвал: одна строка */

.sidra-landing__footer {
	background: var(--sidra-deep);
	padding: 24px 40px;
}

.sidra-landing__footer-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 12px 28px;
}

p.sidra-landing__copy,
p.sidra-landing__footer-contact {
	font-family: Montserrat, sans-serif;
	font-size: 12px;
	letter-spacing: .04em;
	line-height: 1.7;
	color: rgba(245, 240, 230, .6);
	margin: 0;
}

p.sidra-landing__footer-contact a.sidra-phone {
	margin-left: 12px;
}

.sidra-ar p.sidra-landing__footer-contact a.sidra-phone {
	margin-left: 0;
	margin-right: 12px;
}

.sidra-landing__footer .sidra-lang__item {
	color: rgba(245, 240, 230, .7);
}

.sidra-landing__footer .sidra-lang__item.is-current,
.sidra-landing__footer .sidra-lang__item:hover,
.sidra-landing__footer .sidra-lang__item:focus {
	color: var(--sidra-gold-light);
}

.sidra-landing__footer .sidra-lang__sep {
	background: rgba(245, 240, 230, .28);
}

/* --- ширины */

@media (max-width: 1024px) {
	.sidra-landing__bar {
		padding: 16px 24px;
	}

	/* Якоря на планшете и телефоне не нужны: страница и так одна. */
	.sidra-landing__nav {
		display: none;
	}

	.sidra-landing__tools {
		gap: 20px;
	}

	h1.sidra-landing__title {
		font-size: 48px;
	}

	.sidra-landing__section {
		padding: 72px 24px;
	}

	h2.sidra-landing__h2 {
		font-size: 34px;
	}

	.sidra-landing__menu {
		grid-template-columns: 1fr;
		gap: 40px;
	}

	.sidra-landing__group:nth-child(3):last-child .sidra-landing__list {
		columns: 1;
	}

	.sidra-landing__about-row,
	.sidra-landing__contacts-row {
		grid-template-columns: 1fr;
		gap: 36px;
	}
}

@media (max-width: 767px) {
	.sidra-landing__bar {
		padding: 14px 18px;
	}

	/* На телефоне в шапке только знак и языки: большая кнопка WhatsApp стоит
	   в герое на первом же экране, вторая рядом с ней лишняя. */
	.sidra-landing__header a.sidra-landing__wa-sm {
		display: none;
	}

	.sidra-landing__hero {
		padding: 120px 24px 56px;
	}

	h1.sidra-landing__title {
		font-size: 38px;
	}

	p.sidra-landing__sub {
		font-size: 17px;
	}

	.sidra-landing__actions a.sidra-landing__wa {
		width: 100%;
		padding-inline: 24px;
	}

	.sidra-landing__section {
		padding: 56px 20px;
	}

	.sidra-landing__head {
		margin-bottom: 32px;
	}

	h2.sidra-landing__h2 {
		font-size: 30px;
	}

	h4.sidra-landing__svc-name {
		font-size: 19px;
	}

	.sidra-landing__strip {
		grid-template-columns: repeat(2, 1fr);
	}

	.sidra-landing__photo img {
		height: 220px;
	}

	.sidra-landing__map .sidra-map iframe {
		height: 320px;
	}

	.sidra-landing__book-actions,
	.sidra-landing__book-actions a,
	.sidra-landing__book-actions button {
		width: 100%;
	}

	.sidra-landing__footer {
		padding: 20px 20px 28px;
	}

	.sidra-landing__footer-row {
		flex-direction: column;
		align-items: flex-start;
	}
}