/**
 * Levievs forms — расширенные поля (custom dropdown, budget slider,
 * conditional fields). Подключается на /contact-us/ и /services/<single>/
 * через inc/enqueue.php. Опирается на токены из main.css.
 */

/* ─────────────────────────────────────────────────────────────────────────
   Hide auto-injected <br> inside CF7 forms.
   CF7 + wpautop вставляют <br> после каждой строки CF7 template'а —
   это создаёт лишние вертикальные отступы. Скрываем все <br> внутри
   .wpcf7-form, padding/margin полей уже задают нужный ритм.
   ───────────────────────────────────────────────────────────────────────── */
.wpcf7-form br { display: none; }

/* ─────────────────────────────────────────────────────────────────────────
   Cust select — Bootstrap 5-style поверх native <select>.
   ───────────────────────────────────────────────────────────────────────── */

.lv-select {
	position: relative;
	display: block;
	width: 100%;
}

/* Native select прячем visually-hidden, но он остаётся focusable и валидируемым
   CF7-плагином. clip-path вместо display:none — Chrome/Firefox корректно
   рапортуют required-валидацию даже для скрытого input'а. */
.lv-select__native {
	position: absolute !important;
	width: 1px !important;
	height: 1px !important;
	margin: -1px !important;
	padding: 0 !important;
	overflow: hidden !important;
	clip: rect(0,0,0,0) !important;
	clip-path: inset(50%) !important;
	border: 0 !important;
	white-space: nowrap !important;
}

/* Trigger — выглядит как .wpcf7-form-control (тот же высоту/border/padding,
   что и у остальных текстовых input'ов на контакт-странице и сервисной). */
.lv-select__trigger {
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 100%;
	min-height: 48px;
	padding: 10px 14px;
	background: #fff;
	border: 1px solid var(--color-border, #e2e8f0);
	border-radius: 8px;
	font: inherit;
	font-size: 15px;
	color: var(--color-text, #0f172a);
	text-align: left;
	cursor: pointer;
	transition: border-color .15s ease, box-shadow .15s ease;
}
.lv-select__trigger:hover { border-color: rgba(121, 0, 0, 0.35); }
.lv-select__trigger:focus-visible {
	outline: none;
	border-color: var(--lv-primary, #790000);
	box-shadow: 0 0 0 3px rgba(121, 0, 0, 0.18);
}

/* Placeholder-цвет, пока value пустое. */
.lv-select:not(.has-value) .lv-select__label {
	color: rgba(15, 23, 42, 0.45);
}

.lv-select__label {
	flex: 1 1 auto;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.lv-select__chevron {
	flex: 0 0 auto;
	margin-left: 10px;
	color: rgba(15, 23, 42, 0.55);
	transition: transform .2s ease;
}
.lv-select.is-open .lv-select__chevron {
	transform: rotate(180deg);
	color: var(--lv-primary, #790000);
}

/* Panel — выпадающий список. */
.lv-select__panel {
	position: absolute;
	top: calc(100% + 6px);
	left: 0;
	right: 0;
	list-style: none;
	margin: 0;
	padding: 6px;
	background: #fff;
	border: 1px solid var(--color-border, #e2e8f0);
	border-radius: 10px;
	box-shadow:
		0 14px 30px -10px rgba(15, 23, 42, 0.18),
		0 4px 10px -4px rgba(15, 23, 42, 0.12);
	max-height: 280px;
	overflow-y: auto;
	z-index: 50;

	opacity: 0;
	visibility: hidden;
	transform: translateY(-4px);
	pointer-events: none;
	transition: opacity .15s ease, transform .15s ease, visibility .15s;
}
.lv-select.is-open .lv-select__panel {
	opacity: 1;
	visibility: visible;
	transform: none;
	pointer-events: auto;
}

.lv-select__item {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 9px 12px;
	font-size: 15px;
	color: var(--color-text, #0f172a);
	border-radius: 6px;
	cursor: pointer;
	user-select: none;
	transition: background .12s ease, color .12s ease;
}
.lv-select__item.is-active,
.lv-select__item:hover {
	background: rgba(121, 0, 0, 0.06);
	color: var(--lv-primary, #790000);
}
.lv-select__item.is-selected {
	font-weight: 600;
	color: var(--lv-primary, #790000);
}
.lv-select__item.is-selected::after {
	content: '';
	flex: 0 0 auto;
	width: 14px;
	height: 14px;
	background: currentColor;
	-webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path d='M3 8.5l3.5 3.5L13 5' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/></svg>") center / contain no-repeat;
	        mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path d='M3 8.5l3.5 3.5L13 5' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/></svg>") center / contain no-repeat;
}
.lv-select__item.is-disabled {
	color: rgba(15, 23, 42, 0.35);
	cursor: not-allowed;
}
.lv-select__item--placeholder { color: rgba(15, 23, 42, 0.45); }

/* ─────────────────────────────────────────────────────────────────────────
   Conditional fields — `.lv-field[data-show-when]`.
   ───────────────────────────────────────────────────────────────────────── */
.lv-field--conditional {
	max-height: 0;
	opacity: 0;
	overflow: hidden;
	margin: 0;
	transition:
		max-height .25s ease,
		opacity .2s ease,
		margin .25s ease;
}
.lv-field--conditional.is-visible {
	/* max-height с запасом, чтобы любое содержимое поместилось */
	max-height: 260px;
	opacity: 1;
	margin: 1em 0;
}

/* ─────────────────────────────────────────────────────────────────────────
   Budget slider — double range, без сторонних либ.
   ───────────────────────────────────────────────────────────────────────── */
.lv-budget-slider {
	display: block;
	padding: 18px 6px 6px;
	margin-bottom: 6px;
	user-select: none;
}

.lv-budget-slider__track {
	position: relative;
	height: 6px;
	background: rgba(121, 0, 0, 0.10);
	border-radius: 999px;
	/* pointer-events: none на треке + auto на thumb'ах — это даёт обоим
	   range'ам общую hit-area, но clicks доходят только до thumb'а. */
	pointer-events: none;
}

.lv-budget-slider__fill {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 50%;
	background: linear-gradient(90deg, #790000, #a50000);
	border-radius: 999px;
}

/* Оба range абсолютно поверх трека. Стандартная стилизация: track
   прозрачный, thumb — наш круг. */
.lv-budget-slider__handle {
	position: absolute;
	top: -10px;
	/* Inset на 11px (=половина ширины thumb'а = 22/2) с каждой стороны.
	   Без этого нативный range-thumb на value=min рендерит свой левый край в
	   отрицательной координате и визуально пропадает у скруглённого края
	   .lv-budget-slider__track. Inset сдвигает input-element так, чтобы thumb
	   на min/max лежал ровно на краях track-fill, видимый полностью. */
	left: 11px;
	right: 11px;
	width: auto;
	height: 26px;
	margin: 0;
	padding: 0;
	background: transparent;
	-webkit-appearance: none;
	   -moz-appearance: none;
	        appearance: none;
	pointer-events: none;
}
.lv-budget-slider__handle::-webkit-slider-runnable-track {
	background: transparent;
	height: 26px;
	border: 0;
}
.lv-budget-slider__handle::-moz-range-track {
	background: transparent;
	height: 26px;
	border: 0;
}
.lv-budget-slider__handle::-webkit-slider-thumb {
	-webkit-appearance: none;
	width: 22px;
	height: 22px;
	margin-top: 2px;
	border-radius: 999px;
	background: #fff;
	border: 2px solid var(--lv-primary, #790000);
	box-shadow: 0 2px 6px rgba(121, 0, 0, 0.18);
	cursor: grab;
	pointer-events: auto;
	transition: transform .12s ease, box-shadow .12s ease;
}
.lv-budget-slider__handle::-moz-range-thumb {
	width: 22px;
	height: 22px;
	border-radius: 999px;
	background: #fff;
	border: 2px solid var(--lv-primary, #790000);
	box-shadow: 0 2px 6px rgba(121, 0, 0, 0.18);
	cursor: grab;
	pointer-events: auto;
	transition: transform .12s ease, box-shadow .12s ease;
}
.lv-budget-slider__handle:active::-webkit-slider-thumb {
	transform: scale(1.08);
	box-shadow: 0 2px 10px rgba(121, 0, 0, 0.28);
	cursor: grabbing;
}
.lv-budget-slider__handle:active::-moz-range-thumb {
	transform: scale(1.08);
	box-shadow: 0 2px 10px rgba(121, 0, 0, 0.28);
	cursor: grabbing;
}
.lv-budget-slider__handle:focus-visible::-webkit-slider-thumb {
	outline: 3px solid rgba(121, 0, 0, 0.32);
	outline-offset: 2px;
}
.lv-budget-slider__handle:focus-visible::-moz-range-thumb {
	outline: 3px solid rgba(121, 0, 0, 0.32);
	outline-offset: 2px;
}

.lv-budget-slider__labels {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	margin-top: 14px;
	font-size: 14px;
	font-weight: 600;
	color: var(--color-text, #0f172a);
}
.lv-budget-slider__sep {
	color: rgba(15, 23, 42, 0.4);
	font-weight: 400;
}

/* Readonly text-field, в который JS пишет «$X,000 – $Y,000». Стилизуем
   приглушённо, чтобы юзер видел: «вот что уйдёт в письмо», но не пытался
   редактировать руками. */
.lv-budget-input,
input[name="budget-range"] {
	background: rgba(121, 0, 0, 0.04) !important;
	border-style: dashed !important;
	color: var(--color-text, #0f172a) !important;
	font-weight: 600;
	cursor: default;
}

/* На мобиле hit-area thumb'а увеличиваем до 44px (Apple HIG). */
@media (max-width: 600px) {
	.lv-budget-slider__handle {
		height: 44px;
		top: -19px;
	}
	.lv-budget-slider__handle::-webkit-slider-runnable-track,
	.lv-budget-slider__handle::-moz-range-track {
		height: 44px;
	}
	.lv-budget-slider__handle::-webkit-slider-thumb {
		width: 24px;
		height: 24px;
		margin-top: 10px;
	}
	.lv-budget-slider__handle::-moz-range-thumb {
		width: 24px;
		height: 24px;
	}
}

/* Reduced motion — отключаем все transitions внутри блока форм. */
@media (prefers-reduced-motion: reduce) {
	.lv-select__chevron,
	.lv-select__panel,
	.lv-select__item,
	.lv-field--conditional,
	.lv-budget-slider__handle::-webkit-slider-thumb,
	.lv-budget-slider__handle::-moz-range-thumb {
		transition: none !important;
	}
}