/**
 * Кабинет хозяина: приведение стоковых экранов HivePress к виду сайта.
 *
 * У темы Aucapina НЕТ интеграции с HivePress: ни каталога переопределений
 * шаблонов, ни единого селектора `hp-` в её 11 css-файлах (проверено на
 * установке). Поэтому кабинет рисуется стоковым HivePress и выглядит чужим.
 *
 * Здесь не переопределяются шаблоны и не патчится плагин - только стиль
 * поверх классов, которые HivePress уже отдаёт. Один слой закрывает все
 * экраны кабинета сразу, потому что чрома у них общая: `hp-page`, `hp-form`,
 * `hp-field`, `hp-menu--user-account`, `hp-button`.
 *
 * Токены сняты с живой темы, а не подобраны на глаз:
 *   шрифт      Manrope, sans-serif
 *   текст      #555555, 15px / 22.5px
 *   акцент     #42C68D (кнопка «Reservar»)
 *   рамки      #DEDEDE
 *   радиус     2px
 *   кнопки     заглавными, 800, padding 10px 22px 11px
 */

:root {
	--lz-accent: #42c68d;
	--lz-accent-dark: #35a876;
	--lz-text: #555;
	--lz-heading: #222;
	--lz-border: #dedede;
	--lz-muted: #8a8a8a;
	--lz-radius: 2px;
	--lz-font: Manrope, sans-serif;

	/* Мера и кегль форм. Вынесены в переменные намеренно: заказчик может
	   поменять их из «Внешний вид → Настроить → Дополнительные стили»,
	   переопределив :root, и не править файл плагина при обновлении. */
	--lz-form-width: 720px;
	--lz-field-size: 16px;
	--lz-label-size: 14px;
	--lz-hint-size: 14px;
	--lz-field-padding: 13px 16px;
	--lz-field-gap: 22px;

	/* Мера календаря хозяина. Тоже переменными: заказчик 17.09 попросил
	   сделать его у́же и с отступами, а «насколько у́же» это вкус, который
	   он может захотеть подкрутить сам. */
	--lz-calendar-width: 1000px;
	--lz-calendar-gutter: 16px;
}

/* --- Ритм страницы -------------------------------------------------------
   Стоковый кабинет прижат к левому краю и идёт без вертикального ритма.
   Боковой отступ задаётся один раз здесь, а не на каждом блоке. */

.hp-page {
	font-family: var(--lz-font);
	color: var(--lz-text);
}

.hp-page__content,
.hp-page__sidebar {
	padding-block: 8px;
}

.hp-page__title,
.hp-page h1,
.hp-page h2 {
	color: var(--lz-heading);
	font-family: var(--lz-font);
	font-weight: 800;
	font-size: 22px;
	line-height: 1.25;
	margin: 0 0 20px;
	text-wrap: balance;
}

/* --- Меню кабинета -------------------------------------------------------
   Штатно это голый список без разделителей: текущий пункт ничем не отличается
   от остальных, и хозяин не понимает, где находится. */

.hp-menu--user-account {
	padding: 0;
	margin: 0 0 24px;
	border: 1px solid var(--lz-border);
	border-radius: var(--lz-radius);
	list-style: none;
	overflow: hidden;
}

.hp-menu--user-account .hp-menu__item {
	margin: 0;
	border-bottom: 1px solid var(--lz-border);
}

.hp-menu--user-account .hp-menu__item:last-child {
	border-bottom: 0;
}

.hp-menu--user-account .hp-menu__item > a {
	display: block;
	padding: 12px 16px;
	color: var(--lz-text);
	font-size: 14px;
	font-weight: 600;
	text-decoration: none;
	transition: background-color 0.15s ease, color 0.15s ease;
}

.hp-menu--user-account .hp-menu__item > a:hover,
.hp-menu--user-account .hp-menu__item > a:focus-visible {
	background: rgba(66, 198, 141, 0.08);
	color: var(--lz-heading);
}

/* Текущий раздел помечен цветной полосой слева, а не только жирностью:
   на мелком тексте одной жирности не хватает. */
.hp-menu--user-account .hp-menu__item--current > a {
	box-shadow: inset 3px 0 0 var(--lz-accent);
	background: rgba(66, 198, 141, 0.1);
	color: var(--lz-heading);
	font-weight: 800;
}

/* --- Поля форм ----------------------------------------------------------- */

.hp-form__label,
.hp-field__label {
	display: inline-block;
	margin-bottom: 8px;
	color: var(--lz-heading);
	font-size: var(--lz-label-size);
	font-weight: 700;
}

/* Вес селектора поднят намеренно, это не опечатка. Тема отдаёт свой
   объединённый `uploads/aucapina/min.css` ПОСЛЕ наших стилей и задаёт полям
   `padding: 11px 15px; line-height: 19px` селекторами вида
   `input[type="text"]:not(.h-cb)` и `textarea:not(.h-cb):not(...)`, то есть
   ровно того же веса (0,2,1). При равной специфичности побеждает тот, кто
   ниже по порядку подключения, - тема. Замерено дважды: кегль из нашего
   правила применялся, а отступ и межстрочный интервал нет.

   Поэтому здесь и повтор класса родителя, и класс `hp-field` на самом
   поле: вес уходит выше темы и перестаёт зависеть от порядка подключения.
   Ни `!important`, ни предположений о предках (форма входа рисуется в
   модальном окне, вне `.hp-page`) при этом не требуется. */
.hp-form__field.hp-form__field :is(
	input[type="text"],
	input[type="email"],
	input[type="password"],
	input[type="number"],
	input[type="url"],
	input[type="search"],
	input[type="tel"],
	input[type="date"],
	select,
	textarea
).hp-field {
	width: 100%;
	padding: var(--lz-field-padding);
	border: 1px solid var(--lz-border);
	border-radius: var(--lz-radius);
	background: #fff;
	color: var(--lz-text);
	font-family: var(--lz-font);
	font-size: var(--lz-field-size);
	line-height: 1.4;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.hp-form__field input:focus,
.hp-form__field select:focus,
.hp-form__field textarea:focus {
	border-color: var(--lz-accent);
	box-shadow: 0 0 0 2px rgba(66, 198, 141, 0.18);
	outline: none;
}

.hp-form__field textarea {
	min-height: 120px;
	resize: vertical;
}

.hp-form__fields > .hp-form__field {
	margin-bottom: var(--lz-field-gap);
}

.hp-form__description,
.hp-field__description {
	margin-top: 6px;
	color: var(--lz-muted);
	font-size: var(--lz-hint-size);
	line-height: 1.5;
}

/* --- Мера формы ----------------------------------------------------------
   Штатно форма растягивается на всю колонку страницы: при окне 1440 поле
   ввода получается 1280 пикселей шириной (замерено на форме подачи), строка
   упирается в края окна, а глазу не за что зацепиться. Ограничиваем меру и
   ставим форму по центру колонки.

   Список форм перечислен поимённо, а не взят одним `.hp-form`: формы поиска
   и фильтра каталога живут в своей колонке, и сужать их нельзя. */

.hp-form--listing-submit,
.hp-form--listing-update,
.hp-form--user-login,
.hp-form--user-register,
.hp-form--user-update,
.hp-form--user-password-request,
.hp-form--user-password-reset,
.hp-form--vendor-update,
.hp-form--listing-report,
.hp-form--message-send {
	max-width: var(--lz-form-width);
	margin-inline: auto;
}

/* --- Выпадающие списки ---------------------------------------------------
   HivePress подменяет `select` виджетом Select2, и тот рисуется своей
   таблицей стилей: кегль и радиус у него свои, рядом с обычным полем это
   видно. Приводим к тем же переменным, что и остальные поля. */

.hp-form__field.hp-form__field .select2-container--default .select2-selection--single {
	height: auto;
	padding: var(--lz-field-padding);
	border: 1px solid var(--lz-border);
	border-radius: var(--lz-radius);
	font-family: var(--lz-font);
	font-size: var(--lz-field-size);
	/* Межстрочный интервал задаётся здесь, а не на внутренней строке: тема
	   ставит ей `line-height: inherit !important` (замерено, три копии
	   правила). Наследование - единственный способ дотянуться туда без
	   встречного !important, и он же оставляет правило темы в силе. */
	line-height: 1.4;
}

.hp-form__field.hp-form__field .select2-container--default .select2-selection--single .select2-selection__rendered {
	padding-left: 0;
	color: var(--lz-text);
	line-height: 1.4;
}

/* Стрелка у Select2 позиционируется от верха фиксированным `top`, поэтому
   при выросшей высоте поля она уезжает вверх. Привязываем к центру. */
.hp-form__field .select2-container--default .select2-selection--single .select2-selection__arrow {
	top: 50%;
	height: 26px;
	transform: translateY(-50%);
}

.hp-form__field .select2-container--default.select2-container--focus .select2-selection--single,
.hp-form__field .select2-container--default.select2-container--open .select2-selection--single {
	border-color: var(--lz-accent);
	box-shadow: 0 0 0 2px rgba(66, 198, 141, 0.18);
}

/* --- Кнопки --------------------------------------------------------------
   Один в один с кнопкой темы, чтобы кабинет не выглядел из другого сайта. */

.hp-form__button,
.hp-page button[type="submit"],
.hp-field--submit input[type="submit"] {
	display: inline-block;
	padding: 13px 26px 14px;
	border: 0;
	border-radius: var(--lz-radius);
	background: var(--lz-accent);
	color: #fff;
	font-family: var(--lz-font);
	font-size: 16px;
	font-weight: 800;
	line-height: 1.2;
	text-transform: uppercase;
	cursor: pointer;
	transition: background-color 0.15s ease;
}

.hp-form__button:hover,
.hp-page button[type="submit"]:hover,
.hp-form__button:focus-visible,
.hp-page button[type="submit"]:focus-visible {
	background: var(--lz-accent-dark);
}

/* Удаление аккаунта - действие разрушительное, и зелёной кнопкой быть
   не должно: цвет здесь несёт смысл, а не оформление. */
.hp-form--user-delete .hp-form__button,
.hp-form__action--user-delete a {
	background: transparent;
	border: 1px solid #c0392b;
	color: #c0392b;
}

.hp-form--user-delete .hp-form__button:hover,
.hp-form__action--user-delete a:hover {
	background: #c0392b;
	color: #fff;
}

.hp-button--user-account-menu {
	display: inline-block;
	padding: 10px 18px;
	border: 1px solid var(--lz-border);
	border-radius: var(--lz-radius);
	color: var(--lz-heading);
	font-weight: 700;
	text-decoration: none;
}

.hp-link {
	color: var(--lz-accent-dark);
}

/* --- Кнопка «Añadir un elemento» ------------------------------------------
   Строки тарифов и платных опций добавляются штатной кнопкой `hp-field--button`.
   Тема её не знает, и на форме она остаётся серой системной кнопкой браузера -
   единственным элементом, выглядящим не как сайт. Делаем контурный вариант
   основной кнопки: действие второстепенное, заливку оно не заслуживает. */

.hp-field--button {
	display: inline-block;
	margin-top: 4px;
	padding: 9px 18px 10px;
	border: 1px solid var(--lz-accent);
	border-radius: var(--lz-radius);
	background: transparent;
	color: var(--lz-accent-dark);
	font-family: var(--lz-font);
	font-size: 14px;
	font-weight: 800;
	line-height: 1.2;
	text-transform: uppercase;
	letter-spacing: 0.02em;
	cursor: pointer;
	transition: background-color 0.15s ease, color 0.15s ease;
}

.hp-field--button:hover,
.hp-field--button:focus-visible {
	background: var(--lz-accent);
	color: #fff;
}

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

/* --- Карточки списков ----------------------------------------------------
   Списки объявлений, броней, заказов и выплат идут сплошным текстом без
   границ: строки сливаются. Разделяем карточками. */

.hp-page [class$="__item"]:not(.hp-menu__item),
.hp-listing--view-block,
.hp-booking--view-block,
.hp-order--view-block,
.hp-payout--view-block {
	border: 1px solid var(--lz-border);
	border-radius: var(--lz-radius);
	padding: 16px;
	margin-bottom: 12px;
	background: #fff;
}

/* --- Сообщения формы ----------------------------------------------------- */

.hp-form__messages {
	padding: 12px 14px;
	border-radius: var(--lz-radius);
	border-left: 3px solid var(--lz-accent);
	background: rgba(66, 198, 141, 0.08);
	font-size: 14px;
}

.hp-form__messages--error {
	border-left-color: #c0392b;
	background: rgba(192, 57, 43, 0.08);
}

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

@media (max-width: 640px) {
	.hp-page__title,
	.hp-page h1,
	.hp-page h2 {
		font-size: 19px;
	}

	.hp-form__button,
	.hp-page button[type="submit"] {
		display: block;
		width: 100%;
	}

	.hp-menu--user-account .hp-menu__item > a {
		padding: 14px 16px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.hp-menu--user-account .hp-menu__item > a,
	.hp-form__field input,
	.hp-form__field select,
	.hp-form__field textarea,
	.hp-form__button,
	.hp-page button[type="submit"] {
		transition: none;
	}
}

/* --- Боковой отступ на узком экране --------------------------------------
   На телефоне тема не даёт кабинету бокового поля, и текст с полями упирается
   в край. На десктопе отступ у темы есть (50px слева), поэтому добавляем
   только там, где его нет, а не поверх существующего. */

@media (max-width: 1024px) {
	.hp-page {
		padding-inline: 16px;
	}
}

/* --- Загрузка файла ------------------------------------------------------
   Штатно это голая браузерная кнопка «Seleccionar una imagen»: единственный
   элемент на экране, выглядящий как системный диалог, а не как сайт. */

.hp-field--attachment-upload input[type="file"],
.hp-field--file input[type="file"] {
	font-family: var(--lz-font);
	font-size: 14px;
	color: var(--lz-muted);
}

.hp-field--attachment-upload input[type="file"]::file-selector-button,
.hp-field--file input[type="file"]::file-selector-button {
	margin-right: 12px;
	padding: 9px 18px;
	border: 1px solid var(--lz-border);
	border-radius: var(--lz-radius);
	background: #fff;
	color: var(--lz-heading);
	font-family: var(--lz-font);
	font-size: 14px;
	font-weight: 700;
	cursor: pointer;
	transition: border-color 0.15s ease, color 0.15s ease;
}

.hp-field--attachment-upload input[type="file"]::file-selector-button:hover,
.hp-field--file input[type="file"]::file-selector-button:hover {
	border-color: var(--lz-accent);
	color: var(--lz-accent-dark);
}

/* Кнопка мобильного меню кабинета: штатно это широкая рамка во всю ширину,
   визуально тяжелее самого содержимого страницы. */
.hp-button--user-account-menu {
	width: 100%;
	text-align: center;
	background: #fff;
}

@media (prefers-reduced-motion: reduce) {
	.hp-field--attachment-upload input[type="file"]::file-selector-button,
	.hp-field--file input[type="file"]::file-selector-button {
		transition: none;
	}
}

/* --- Списки хозяина: объявления, заказы, выплаты ---------------------------
   Это НЕ карточки. Блок списка в режиме `edit` рендерится настоящей таблицей
   (`<table class="hp-listings hp-block hp-table hp-table--stack">`), строки -
   `<tr>/<td>`. Правила выше, написанные под карточки, сюда не достают: сначала
   я решил, что общий слой цепляет все экраны кабинета, и это было неверно.

   Статус приезжает отдельной ячейкой `hp-status hp-status--<статус записи>`.
   Значения сняты с модели, а не придуманы:
     publish -> Confirmed / Completed,  pending -> Pending,
     draft   -> Unpaid,                 trash   -> Canceled.

   Разметка снята рендером блока, а не прочитана по шаблонам:
     <table class="hp-listings hp-block hp-table hp-table--stack">
       <tr class="hp-listing hp-listing--edit-block">
         <td class="hp-listing__title"> ... </td>
         <td class="hp-listing__status hp-status hp-status--publish"> ... </td>

   ⚠️ Ни `<thead>`, ни `<th>`, ни `data-label` у ячеек НЕТ - я сначала написал
   правила под них, и все три оказались мёртвыми. Поэтому ни скрывать шапку на
   телефоне, ни подставлять подписи из `data-label` не нужно и нечем. */

:root {
	--lz-ok: #2e7d5b;
	--lz-ok-bg: rgba(66, 198, 141, 0.14);
	--lz-wait: #8a6d1f;
	--lz-wait-bg: rgba(214, 173, 46, 0.16);
	--lz-stop: #b3362b;
	--lz-stop-bg: rgba(179, 54, 43, 0.1);
	--lz-idle-bg: rgba(0, 0, 0, 0.05);
}

.hp-page .hp-table {
	width: 100%;
	border-collapse: collapse;
	border-spacing: 0;
	font-size: 14px;
}

.hp-page .hp-table td {
	padding: 14px 12px;
	border-bottom: 1px solid var(--lz-border);
	vertical-align: middle;
}

.hp-page .hp-table tr:last-child td {
	border-bottom: 0;
}

/* Подсветка строки под курсором: в списке из десятка выплат глаз теряет строку
   на полпути к сумме. */
@media (hover: hover) {
	.hp-page .hp-table tbody tr:hover td {
		background: rgba(66, 198, 141, 0.05);
	}
}

/* Цифры выравниваем по разрядам, иначе суммы в столбце «пляшут». */
.hp-payout__amount,
.hp-payout__number,
.hp-order__total,
.hp-order__number,
.hp-booking__dates,
.hp-listing__price {
	font-variant-numeric: tabular-nums;
}

.hp-payout__amount,
.hp-order__total {
	font-weight: 700;
	color: var(--lz-heading);
	white-space: nowrap;
}

.hp-payout__number,
.hp-order__number {
	color: var(--lz-muted);
}

.hp-payout__created-date,
.hp-order__created-date,
.hp-listing__created-date {
	color: var(--lz-muted);
	white-space: nowrap;
}

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

.hp-page .hp-status > span,
.hp-page td.hp-status > span {
	display: inline-block;
	padding: 4px 10px 5px;
	border-radius: 999px;
	background: var(--lz-idle-bg);
	color: var(--lz-text);
	font-size: 12px;
	font-weight: 700;
	line-height: 1.2;
	white-space: nowrap;
}

.hp-page .hp-status--publish > span {
	background: var(--lz-ok-bg);
	color: var(--lz-ok);
}

.hp-page .hp-status--pending > span {
	background: var(--lz-wait-bg);
	color: var(--lz-wait);
}

.hp-page .hp-status--trash > span {
	background: var(--lz-stop-bg);
	color: var(--lz-stop);
}

.hp-page .hp-status--draft > span {
	background: var(--lz-idle-bg);
	color: var(--lz-muted);
}

/* Заказы приходят со статусами WooCommerce, а не WordPress: на живой странице
   хозяина стоит `hp-status--wc-completed`. Без этих правил плашка заказа была бы
   серой при любом исходе - а именно по ней хозяин отличает оплаченный заказ от
   отменённого. Поймано только под вендорской сессией: у админа этих экранов нет. */

.hp-page .hp-status--wc-completed > span {
	background: var(--lz-ok-bg);
	color: var(--lz-ok);
}

.hp-page .hp-status--wc-processing > span,
.hp-page .hp-status--wc-on-hold > span,
.hp-page .hp-status--wc-pending > span {
	background: var(--lz-wait-bg);
	color: var(--lz-wait);
}

.hp-page .hp-status--wc-cancelled > span,
.hp-page .hp-status--wc-failed > span {
	background: var(--lz-stop-bg);
	color: var(--lz-stop);
}

.hp-page .hp-status--wc-refunded > span {
	background: var(--lz-idle-bg);
	color: var(--lz-muted);
}

/* Название объявления - якорь строки: с него глаз начинает читать. Штатно оно
   ничем не отличается от служебных ячеек рядом. */
.hp-listing__title a {
	color: var(--lz-heading);
	font-weight: 700;
	text-decoration: none;
}

.hp-listing__title a:hover {
	color: var(--lz-accent-dark);
}

/* Служебные ячейки HivePress помечает сам; своего приглушения у темы нет. */
.hp-page .hp-table .hp-text--secondary {
	color: var(--lz-muted);
}

/* --- Действия в строке ---------------------------------------------------- */

.hp-payout__action,
.hp-order__action,
.hp-listing__action {
	white-space: nowrap;
}

.hp-page .hp-table td a:not(.hp-button) {
	color: var(--lz-accent-dark);
	font-weight: 600;
	text-decoration: none;
}

.hp-page .hp-table td a:not(.hp-button):hover {
	text-decoration: underline;
}

/* --- Баланс хозяина -------------------------------------------------------
   Единственное число, ради которого хозяин вообще заходит в этот раздел.
   Штатно это строчка текста наравне с остальными. */

.hp-vendor__balance {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 6px 12px;
	padding: 16px 18px;
	margin-bottom: 20px;
	border: 1px solid var(--lz-border);
	border-left: 3px solid var(--lz-accent);
	border-radius: var(--lz-radius);
	background: #fff;
}

.hp-vendor__balance > strong {
	color: var(--lz-muted);
	font-size: 12px;
	font-weight: 800;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

.hp-vendor__balance > span {
	color: var(--lz-heading);
	font-size: 24px;
	font-weight: 800;
	font-variant-numeric: tabular-nums;
	line-height: 1.1;
}

/* --- Телефон: таблица становится столбиком --------------------------------
   Модификатор `hp-table--stack` HivePress ставит сам, но своих стилей под него
   в теме нет, и на узком экране таблица из пяти колонок уезжает за край.
   Подписей колонок нет ни на десктопе, ни здесь: шапки у таблицы не существует
   (проверено рендером). Поэтому строка становится карточкой, а ячейки идут
   сверху вниз в том же порядке, в каком стоят в строке. */

@media (max-width: 640px) {
	.hp-page .hp-table--stack,
	.hp-page .hp-table--stack tbody,
	.hp-page .hp-table--stack tr,
	.hp-page .hp-table--stack td {
		display: block;
		width: auto;
	}

	.hp-page .hp-table--stack tr {
		padding: 14px 16px;
		margin-bottom: 12px;
		border: 1px solid var(--lz-border);
		border-radius: var(--lz-radius);
		background: #fff;
	}

	.hp-page .hp-table--stack td {
		padding: 4px 0;
		border-bottom: 0;
	}

	.hp-vendor__balance > span {
		font-size: 20px;
	}
}

/* ------------------------------------------------------------------
   Галочка-переключатель в формах HivePress.

   Заказчик 16.09 (`mid:437330005`, скриншот с обводкой): «Можно
   увеличить эту кнопку? Так как я вообще её еле заметил». Речь о
   `Solicitudes de reserva` - приём броней вручную. Штатно это строка
   текста с системным чекбоксом 13px, зажатая между полями календаря,
   и рядом с ней нет ничего, что показывало бы включённое состояние.

   Делаем из неё карточку: рамка, крупный контрол, подпись в размер
   поля и заметная подсветка, когда включено. Правило общее для всех
   полей-галочек HivePress, а не только для этой: следующим этапом
   рядом встанет переключатель мгновенного бронирования, и разъехаться
   в оформлении они не должны.

   Вес селектора поднят удвоением класса по той же причине, что и у
   полей ввода (см. раздел выше): combined-стиль темы грузится ПОСЛЕ
   нашего, и при равной специфичности побеждает он.
   ------------------------------------------------------------------ */

.hp-form .hp-form__field--checkbox.hp-form__field--checkbox {
	padding: 16px 18px;
	border: 1px solid var(--lz-border);

	/* Акцентная полоса слева - основной способ выделить строку. Взята
	   именно рамка, а не фон: замерено, что наши border и padding на этом
	   поле применяются, тогда как проверить фон в нашей среде нечем
	   (вкладка MCP рендерится нулевой ширины, и getComputedStyle врёт на
	   закрашиваемых свойствах). Правило, которое видно наверняка, лучше
	   красивого, которое не проверить. */
	border-left: 4px solid var(--lz-accent);
	border-radius: var(--lz-radius);
	background: #fff;
	transition: border-color 0.15s ease, background-color 0.15s ease;
}

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

.hp-form .hp-form__field--checkbox.hp-form__field--checkbox label.hp-field--checkbox {
	display: flex;
	align-items: center;
	gap: 12px;
	margin: 0;
	cursor: pointer;
	font-size: var(--lz-field-size);
	line-height: 1.4;
	color: var(--lz-text);
}

/* Тема рисует чекбокс САМА и прибивает его размер важностью. Точная цитата из
   `uploads/aucapina/min.css` (селектор общий с `radio`):

       input[type=radio],input[type=checkbox]{
         position:relative !important; width:15px !important; height:15px !important;
         padding:0 !important; display:inline-flex !important;
         -webkit-appearance:none; -moz-appearance:none; appearance:none;
         border:solid 1px #dddddd; …
       }
       input[type=checkbox]:checked{ border-color:currentColor;
         background-color:currentColor; background-image:var(--icon-check); … }

   Отсюда два следствия, и оба неочевидны:

   1. `width`/`height` помечены `!important`, поэтому весом их не перебить, а
      `!important` в ответ мы не ставим - правило проекта. Увеличиваем
      `transform`, его тема не задаёт вовсе. (У `appearance:none` важности НЕТ,
      прежняя редакция комментария цитировала правило неточно.)
   2. Включённый контрол тема красит `currentColor`, то есть НАСЛЕДУЕМЫМ цветом
      текста. Подпись рядом мы красим в `--lz-text`, и галочка вместе с ней
      уезжала в тёмно-серый. Поэтому `color` задаётся у самого инпута. Ставить
      здесь `accent-color` бессмысленно: при `appearance:none` оно не действует
      вовсе - именно эта строка тут и стояла, ничего не делая. */
.hp-form .hp-form__field--checkbox.hp-form__field--checkbox label.hp-field--checkbox input[type="checkbox"] {
	flex: 0 0 auto;
	margin: 0 4px 0 0;
	transform: scale( 1.35 );
	transform-origin: left center;
	color: var(--lz-accent);
	cursor: pointer;
}

/* Подсветка включённого состояния - необязательное улучшение поверх
   акцентной полосы, а не несущая часть. `:has()` на установке работает
   (проверено отдельным правилом: outline из `:has(input:checked)`
   применился), но САМ ФОН в нашей среде не проверяется, см. комментарий
   к рамке выше. Не применится - строка всё равно останется выделенной
   полосой, рамкой и кеглем. */
.hp-form .hp-form__field--checkbox.hp-form__field--checkbox:has( input[type="checkbox"]:checked ) {
	border-color: var(--lz-accent);
	background: var(--lz-ok-bg);
}

.hp-form .hp-form__field--checkbox.hp-form__field--checkbox:focus-within {
	border-color: var(--lz-accent);
	box-shadow: 0 0 0 3px rgba(66, 198, 141, 0.18);
}

/* ==========================================================================
   Календарь хозяина

   Заказчик 17.09 прислал два скриншота с тремя замечаниями: вкладки
   `Detalles / Calendario / Editar` теряются, кнопки панели непонятны, сам
   календарь растянут впритык к краям. Подписи на кнопках делает
   `assets/lz-calendar.js`, здесь только мера и заметность.

   Селекторы удвоены по классу (`.hp-calendar.hp-calendar`): стиль темы
   грузится ПОСЛЕ нашего, и при равном весе побеждает тот, кто ниже. Тот же
   приём, которым в этом файле подняты поля формы, и та же причина не писать
   `!important`.
   ========================================================================== */

.hp-page .hp-calendar.hp-calendar {
	max-width: var(--lz-calendar-width);
	margin: 0 auto;
	padding: 0 var(--lz-calendar-gutter);
	box-sizing: border-box;
}

/* Панель над сеткой: кнопки стали текстовыми, поэтому им нужен воздух и
   право переноса на узкой ширине - иначе три подписи в ряд вытолкнут сетку
   за экран. */
.hp-page .hp-calendar.hp-calendar .fc-toolbar {
	flex-wrap: wrap;
	gap: 10px;
}

.hp-page .hp-calendar.hp-calendar .fc-toolbar-chunk {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
}

/* Кнопка с подписью вместо иконки: ширина по тексту, а не по глифу. */
.hp-page .hp-calendar.hp-calendar .fc-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	min-width: 0;
	padding: 8px 14px;
	font-family: var(--lz-font);
	font-size: 14px;
	line-height: 1.2;
	border-radius: var(--lz-radius);
}

/* Стрелки месяцев рисует SVG из `lz-calendar.js`, у него `stroke:
   currentColor` - цвет берётся отсюда и от шрифта не зависит вовсе. */
.hp-page .hp-calendar.hp-calendar .fc-prev-button,
.hp-page .hp-calendar.hp-calendar .fc-next-button {
	padding: 8px 12px;
}

.hp-page .hp-calendar.hp-calendar .fc-button svg {
	display: block;
}

.hp-page .hp-calendar.hp-calendar .fc-toolbar-title {
	font-size: 22px;
}

/* --------------------------------------------------------------------------
   Вкладки экранов объявления.

   ⚠️ Разметка снята с живой страницы 17.09, и оба факта ниже неочевидны:
   1. Структура - `nav.hp-menu--listing-manage > ul > li > a`, а НЕ `nav > li`.
   2. Активный пункт помечен `hp-menu__item--current` (HivePress) и
      `current-menu-item` (WordPress) на `li`. Берём первый: он от того же
      плагина, что и сама разметка.

   ⛔ Ловушка проверки, стоившая отдельного круга: пометка активного пункта
   ПРОПАДАЕТ, если запросить страницу с посторонним параметром в URL. Первый
   замер шёл с `?nc=<случайное>` для обхода кеша и показал ноль вхождений
   класса - то есть выглядел как «HivePress активный пункт не помечает».
   Проверять такие вещи ЧИСТЫМ адресом.
   -------------------------------------------------------------------------- */

.hp-page .hp-menu--listing-manage.hp-menu--listing-manage > ul {
	display: flex;
	flex-wrap: wrap;
	gap: 4px;
	margin-bottom: 24px;
	padding: 0 0 2px;
	border-bottom: 2px solid var(--lz-border);
}

/* Свой отступ задаём на ссылке, поэтому родной у пункта снимаем: иначе
   подложка активной вкладки не дотянется до её краёв. */
.hp-page .hp-menu--listing-manage.hp-menu--listing-manage > ul > li {
	padding: 0;
}

.hp-page .hp-menu--listing-manage.hp-menu--listing-manage > ul > li > a {
	display: inline-block;
	padding: 10px 18px;
	font-size: 15px;
	font-weight: 700;
	color: var(--lz-text);
	border-radius: var(--lz-radius) var(--lz-radius) 0 0;
}

.hp-page .hp-menu--listing-manage.hp-menu--listing-manage > ul > li > a:hover,
.hp-page .hp-menu--listing-manage.hp-menu--listing-manage > ul > li > a:focus {
	color: var(--lz-accent-dark);
	background: #f5f5f5;
}

.hp-page .hp-menu--listing-manage.hp-menu--listing-manage > ul > li.hp-menu__item--current > a {
	color: #fff;
	background: var(--lz-accent);
}

/* Полоска HivePress под активным пунктом теперь дублирует подложку и на
   акцентном фоне читается грязью. */
.hp-page .hp-menu--listing-manage.hp-menu--listing-manage > ul > li.hp-menu__item--current::before {
	display: none;
}