/**
 * Форма подачи: карточки типа кемпера и индикатор заполненности.
 *
 * Все селекторы начинаются с .lz-, потому что стиль подключается на всём
 * фронте: маршруты подачи переводятся TranslatePress, и отбор по URL молча
 * ломался бы на каждом языке кроме испанского.
 *
 * Цвета берутся из currentColor и системных переменных темы, где они есть.
 * Тему трогать нельзя, поэтому ничего у неё не переопределяем.
 */

/* Родное поле остаётся в потоке и фокусируемым: убери его из потока -
   и браузер не сможет показать нативную валидацию на required-селекте. */
.lz-sr-only {
	position: absolute !important;
	width: 1px !important;
	height: 1px !important;
	padding: 0 !important;
	margin: -1px !important;
	overflow: hidden !important;
	clip: rect(0, 0, 0, 0) !important;
	white-space: nowrap !important;
	border: 0 !important;
}

.lz-type-cards {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
	gap: 12px;
	margin-top: 8px;
}

.lz-type-card {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 8px;
	min-height: 104px;
	padding: 16px 10px;
	border: 1px solid rgba(0, 0, 0, 0.14);
	border-radius: 10px;
	background: transparent;
	color: inherit;
	font: inherit;
	line-height: 1.25;
	text-align: center;
	cursor: pointer;
	transition: border-color 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
}

.lz-type-card:hover {
	border-color: rgba(0, 0, 0, 0.35);
}

/* Фокус виден всегда, а не только при навигации мышью: группа управляется
   стрелками, и без видимого фокуса клавиатурой пользоваться нельзя. */
.lz-type-card:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 2px;
}

.lz-type-card.is-selected {
	border-color: currentColor;
	box-shadow: inset 0 0 0 1px currentColor;
	background: rgba(0, 0, 0, 0.04);
}

.lz-type-card__icon {
	display: block;
	line-height: 0;
}

/* fill и stroke задаются явно: тема ставит собственное правило на svg и
   заливает линейные иконки сплошным чёрным. Замерено на форме подачи. */
.lz-type-card__icon svg {
	width: 40px;
	height: 40px;
	max-width: 100%;
	fill: none !important;
	stroke: currentColor !important;
	stroke-width: 1.5;
	stroke-linecap: round;
	stroke-linejoin: round;
}

/* У иконок Tabler первым идёт служебный прозрачный path-подложка 24x24.
   Заливку ему возвращать нельзя, иначе он закрывает саму иконку. */
.lz-type-card__icon svg path[fill="none"] {
	fill: none !important;
	stroke: none !important;
}

.lz-type-card__label {
	font-size: 0.9em;
	text-wrap: balance;
}

.lz-progress {
	margin: 0 0 20px;
}

.lz-progress__bar {
	position: relative;
	height: 6px;
	border-radius: 999px;
	background: rgba(0, 0, 0, 0.1);
	overflow: hidden;
}

.lz-progress__fill {
	display: block;
	width: 0;
	height: 100%;
	border-radius: inherit;
	background: currentColor;
	transition: width 0.2s ease;
}

.lz-progress__text {
	margin: 6px 0 0;
	font-size: 0.85em;
	opacity: 0.75;
	font-variant-numeric: tabular-nums;
}

.lz-progress.is-complete .lz-progress__text {
	opacity: 1;
}

/* Телефонная ширина: две карточки в ряд читаются лучше, чем одна растянутая. */
@media (max-width: 420px) {
	.lz-type-cards {
		grid-template-columns: repeat(2, 1fr);
		gap: 8px;
	}

	.lz-type-card {
		min-height: 92px;
		padding: 12px 6px;
	}

	.lz-type-card__icon svg {
		width: 32px;
		height: 32px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.lz-type-card,
	.lz-progress__fill {
		transition: none;
	}
}

/* Виджет Select2, который HivePress вешает на поле типа: карточки его заменяют. */
.lz-hidden {
	display: none !important;
}

/* Кнопка «Publica tu autocaravana» в шапке.

   Целимся по классам пунктов ТЕМЫ и по адресу ссылки, а не по своему классу
   пункта меню: тема выбрасывает пользовательские классы при рендере, из
   `lz-nav-cta` до разметки не доезжает ничего (замерено). Классы
   `c-top-menu__item` и `c-mega-menu__item` заодно отсекают пункты HivePress
   `hp-menu__item--listing-submit`, которые ведут туда же, но кнопкой быть
   не должны. Класс `menu-item-7002` не годится: на боевом сайте id другой.

   Вторичная по весу: «Reservar» остаётся главным действием сайта, поэтому
   контурный вариант, а не заливка. Тему не трогаем. */
.c-top-menu__item > a[href*="/submit-listing"],
.c-mega-menu__item > a[href*="/submit-listing"] {
	display: inline-block;
	padding: 8px 16px;
	border: 1px solid currentColor;
	border-radius: 999px;
	line-height: 1.2;
	white-space: nowrap;
	transition: opacity 0.15s ease;
}

.c-top-menu__item > a[href*="/submit-listing"]:hover,
.c-top-menu__item > a[href*="/submit-listing"]:focus-visible,
.c-mega-menu__item > a[href*="/submit-listing"]:hover,
.c-mega-menu__item > a[href*="/submit-listing"]:focus-visible {
	opacity: 0.75;
}

/* В бургере кнопка растягивается по ширине: в столбце пилюля по центру
   смотрится случайной. */
.c-mega-menu__item > a[href*="/submit-listing"] {
	display: block;
	text-align: center;
}

@media (prefers-reduced-motion: reduce) {
	.c-top-menu__item > a[href*="/submit-listing"],
	.c-mega-menu__item > a[href*="/submit-listing"] {
		transition: none;
	}
}

/* Та же кнопка в верхней строке шапки, перед «Reservar» (`lz_mp_header_publish_button()`).

   Правая колонка строки даёт каждому ребёнку `margin-left: 35px` и разделитель
   `:before`. Между иконками соцсетей и нашей кнопкой он уместен, а между двумя
   кнопками - нет: пара должна читаться одной группой действий. Поэтому у
   «Reservar», стоящей сразу за нашей кнопкой, отступ меньше и разделителя нет.
   Углы прямые, как у «Reservar» (`border-radius: 0` в теме).

   Размер - по «Reservar» в этой же строке, а не по классу темы: `c-button--large`
   дал 18/19 px отступа и 58 px высоты при строке в 34, кнопка вылезала за строку
   вверх на 12 px (замер 24.09). «Reservar» здесь 10 px отступа, 14 px строки;
   у нас 8 px плюс рамка 2 px - та же высота 34. Основа - штатная `outline-gray`
   темы, цвет рамки и текста переопределён ниже.

   Селектор отступа - через `.c-header`: этот файл подключается РАНЬШЕ стилей темы,
   и при равном весе тема перебивает отступ (замерено - см. раздел 10 плана
   переноса про вес селекторов). */
.lz-header-publish {
	border-radius: 0;
	white-space: nowrap;
}

/* Цвет - по просьбе заказчика «заметнее цветом» (25.09). Рамка в зелёном сайта, как заливка
   «Reservar», а залить кнопку тем же зелёным нельзя: рядом встали бы две одинаковые кнопки.
   Текст темнее рамки: #42C68D на белом даёт контраст 2,2:1, а #1E7A54 - 5,3:1, это читается
   при 14 px. Рамка 2 px, поэтому отступы ниже на 1 px меньше, высота прежняя.
   Тема держит у `outline-gray` цвет рамки и фон с !important, а цвет текста - селектором
   `.c-button.c-button--outline-gray`, который грузится позже нас. Поэтому здесь !important
   у рамки и фона и третий класс в селекторе (замер 25.09: без этого остались серые). */
.c-header .c-button.lz-header-publish {
	border-width: 2px;
	border-color: #42c68d !important;
	color: #1e7a54;
}

.c-header .c-button.lz-header-publish:hover,
.c-header .c-button.lz-header-publish:focus-visible {
	background-color: #42c68d !important;
	color: #fff;
}

.c-header .lz-header-publish:not(.lz-header-publish--mobile) {
	padding: 8px 24px;
	line-height: 14px;
}

.lz-header-publish + .c-header_book-now {
	margin-left: 12px;
}

.lz-header-publish + .c-header_book-now:before {
	display: none;
}

.lz-header-publish--mobile + .c-header__mobile-book-now {
	margin-left: 8px;
}

/* Высота мобильной пары: «Reservar» 10/11 px отступа без рамки = 40 px, у нас
   рамка 2 px, поэтому отступ на 2 px меньше - те же 40 (было 43, замер 24.09). */
.c-header .c-button.lz-header-publish--mobile {
	padding-top: 8px;
	padding-bottom: 9px;
}

/* Граница десктопной шапки темы - 1170 px (`@media (max-width: 1169px)` в style.css
   темы). Ниже неё тема гасит десктопную «Reservar», а нашу копию то же правило не
   задевает: на 768 она висела под шапкой (замер 24.09). Гасим на той же границе. */
@media (max-width: 1169px) {
	.lz-header-publish:not(.lz-header-publish--mobile) {
		display: none;
	}
}

/* Подпись мобильной кнопки: полная на планшете, короткая на телефоне. На 360 и 400
   полная подпись (251 px) выталкивала «Reservar» за край экрана. */
.lz-header-publish__short {
	display: none;
}

@media (max-width: 480px) {
	.lz-header-publish__full {
		display: none;
	}

	.lz-header-publish__short {
		display: inline;
	}

	.c-header .c-button.lz-header-publish--mobile {
		padding-left: 14px;
		padding-right: 14px;
	}
}

/* Ошибка обязательного выбора типа.
   Родное поле спрятано, поэтому браузер показывает подсказку у невидимого
   элемента - или не показывает вовсе. Состояние ошибки дублируется на видимую
   группу, иначе отправка блокируется молча. */
.lz-type-cards.is-invalid .lz-type-card {
	border-color: #c0392b;
}

.lz-type-cards__error {
	margin: 8px 0 0;
	color: #c0392b;
	font-size: 0.9em;
}

/* --- Платные опции на узком экране ----------------------------------------
   Ручка перетаскивания и крестик удаления у строки Extras — абсолютные ячейки,
   которые HivePress намеренно вывешивает наружу строки (`right: -12px`).
   На десктопе они попадают в боковое поле страницы, а на телефоне вылезают
   за край окна: замерено 8 пикселей горизонтального переполнения на форме
   подачи при ширине вьюпорта 606.

   Двигать сами ячейки нечем: класса у них нет, а `:has()` ради одного правила
   брать не хочется. Вместо этого сужаем сам блок — строка становится уже,
   её правый край уезжает влево, и вывешенные ячейки попадают внутрь окна.
   Ничего, кроме этого блока, правило не задевает. */

@media (max-width: 640px) {
	.hp-form__field--repeater,
	.hp-field--repeater {
		padding-right: 16px;
	}
}