/**
 * INBIZ Sidebar Contact Form — Variant A (native).
 *
 * Pixel-perfect перенос .fcard / .fg / .fg-radio из дизайна `inbiz-blog/project/styles/listing.css`
 * (chat: «Связаться с продавцом» Variant A, итерация после правок «native под наши модалки»).
 *
 * Scoped под `.inbiz-sidebar-form` — не вмешивается в kava-child / Elementor / JFB CSS.
 */

.inbiz-sidebar-form {
	--isf-blue: #2D5BFF;
	--isf-blue-600: #1E47E8;
	--isf-blue-50: #EEF2FF;
	--isf-ink: #1A1A2E;
	--isf-ink-800: #2D2A3A;
	--isf-text-2: #5A5A6E;
	--isf-text-3: #8B8B9E;
	--isf-border: #E4E7EE;
	--isf-success: #1FAB6F;
	--isf-danger: #E14A4A;
	--isf-card-bg: #EEF2F7;
	--isf-radio-border: #D5DCE6;
	--isf-radio-dot: #C5CCDA;
	--isf-shadow: 0 1px 2px rgba(20, 24, 40, 0.04), 0 1px 1px rgba(20, 24, 40, 0.03);

	font-family: 'Manrope', 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
	color: var(--isf-ink);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

.inbiz-sidebar-form * { box-sizing: border-box; }

.inbiz-sidebar-form,
.inbiz-sidebar-form .fcard {
	background: var(--isf-card-bg);
	border-radius: 24px;
	padding: 28px 28px 24px;
	box-shadow: var(--isf-shadow);
}
/* Когда форма уже сама — .fcard, не оборачиваем дважды. */
.inbiz-sidebar-form.fcard { padding: 28px 28px 24px; }

/* Header — title + 3D icon slot */
.inbiz-sidebar-form .fcard-head {
	display: grid;
	grid-template-columns: 1fr auto;
	gap: 16px;
	align-items: flex-start;
	margin-bottom: 24px;
}
.inbiz-sidebar-form .fcard-title {
	font-family: 'Manrope', 'Inter', sans-serif;
	font-weight: 800;
	font-size: 26px;
	line-height: 1.15;
	letter-spacing: -0.02em;
	color: var(--isf-ink);
	margin: 0;
}
.inbiz-sidebar-form .fcard-sub {
	margin: 8px 0 0;
	font-size: 14px;
	color: var(--isf-text-2);
	line-height: 1.45;
}

/* 3D icon placeholder — поверх ставится реальный PNG/SVG через атрибут или CSS background. */
.inbiz-sidebar-form .fcard-icon3d {
	width: 72px; height: 72px;
	border-radius: 16px;
	background:
		repeating-linear-gradient(135deg,
			rgba(45,91,255,0.08) 0,
			rgba(45,91,255,0.08) 6px,
			rgba(45,91,255,0.16) 6px,
			rgba(45,91,255,0.16) 12px),
		linear-gradient(135deg, #BBD2FF, #5C8BFF);
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	flex-shrink: 0;
}
/* Когда задана реальная картинка автора объявления / иконка из шорткода —
 * background-image приходит из inline style. Здесь только sizing/position
 * (без shorthand `background:` — он сбрасывает background-image).
 * Squircle 16px сохраняем — это часть дизайна; placeholder без has-image
 * (полосатый градиент) остаётся 16px squircle для консистентности. */
.inbiz-sidebar-form .fcard-icon3d.has-image {
	background-color: transparent;
	background-position: center;
	background-size: cover;
	background-repeat: no-repeat;
	/* border-radius наследуется от .fcard-icon3d (16px) — НЕ переопределяем */
}

/* Field group */
.inbiz-sidebar-form .fg { margin-bottom: 20px; }
.inbiz-sidebar-form .fg-label {
	display: block;
	font-weight: 700;
	font-size: 16px;
	color: var(--isf-ink);
	margin-bottom: 10px;
}
.inbiz-sidebar-form .fg-label .req { color: var(--isf-danger); margin-left: 2px; }
.inbiz-sidebar-form .fg-input {
	width: 100%;
	background: #fff;
	border: 1px solid transparent;
	border-radius: 14px;
	padding: 18px 20px;
	font-family: inherit;
	font-size: 17px;
	color: var(--isf-ink);
	outline: none;
	transition: border-color .15s, box-shadow .15s;
}
.inbiz-sidebar-form .fg-input::placeholder { color: #A6ACBE; font-weight: 400; }
.inbiz-sidebar-form .fg-input:focus {
	border-color: var(--isf-blue);
	box-shadow: 0 0 0 3px rgba(45, 91, 255, 0.12);
}
.inbiz-sidebar-form .fg-input.has-error {
	border-color: var(--isf-danger);
	box-shadow: 0 0 0 3px rgba(225, 74, 74, 0.12);
}

/* Pill radio group — стилем как «Продавец / Покупатель / Брокер». */
.inbiz-sidebar-form .fg-radio-group {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 8px;
}
.inbiz-sidebar-form .fg-radio {
	display: flex; align-items: center; gap: 8px;
	padding: 10px 11px;
	border: 1.5px solid var(--isf-radio-border);
	border-radius: 12px;
	background: #fff;
	font-family: inherit;
	font-size: 13px;
	font-weight: 600;
	color: var(--isf-ink);
	cursor: pointer;
	transition: background .15s, border-color .15s;
	text-align: left;
	position: relative;
	min-width: 0; /* позволяет flex-ребёнку сжиматься меньше content-width */
}
/* Текстовый label кнопки — обрезаем эллипсисом если плитка узкая */
.inbiz-sidebar-form .fg-radio > span:last-child {
	flex: 1;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.inbiz-sidebar-form .fg-radio:hover { border-color: var(--isf-blue); }
.inbiz-sidebar-form .fg-radio input[type="radio"] {
	position: absolute;
	opacity: 0;
	pointer-events: none;
	width: 0; height: 0;
}
.inbiz-sidebar-form .fg-radio .radio-dot {
	width: 16px; height: 16px;
	border-radius: 50%;
	border: 1.5px solid var(--isf-radio-dot);
	flex-shrink: 0;
	position: relative;
	background: #fff;
}
.inbiz-sidebar-form .fg-radio.is-selected {
	border-color: var(--isf-blue);
	background: var(--isf-blue-50);
}
.inbiz-sidebar-form .fg-radio.is-selected .radio-dot { border-color: var(--isf-blue); }
.inbiz-sidebar-form .fg-radio.is-selected .radio-dot::after {
	content: '';
	position: absolute;
	inset: 3px;
	border-radius: 50%;
	background: var(--isf-blue);
}
.inbiz-sidebar-form .fg-radio .ico-tile {
	width: 20px; height: 20px; border-radius: 5px;
	display: grid; place-items: center;
	color: #fff;
	flex-shrink: 0;
	line-height: 0;
	font-size: 0;
	overflow: hidden;
}
.inbiz-sidebar-form .fg-radio .ico-tile svg {
	display: block;
	width: 18px; height: 18px; /* перекрывает inline width=22 из brand_svg_inline */
}
/* Call — не бренд: общий handset-glyph, оставляем тёмную плитку + белая иконка. */
.inbiz-sidebar-form .fg-radio .ico-tile.call { background: var(--isf-ink-800); color: #fff; }
/* Брендовые плитки — фон прозрачный, цвет glyph'а берём через currentColor
 * (simple-icons SVG залит fill="currentColor" → CSS красит в фирменный). */
.inbiz-sidebar-form .fg-radio .ico-tile.tg  { background: transparent; color: #29A9EB; }
.inbiz-sidebar-form .fg-radio .ico-tile.wa  { background: transparent; color: #25D366; }
/* MAX — официальный PNG (squircle + градиент + glyph внутри). Цвет не нужен. */
.inbiz-sidebar-form .fg-radio .ico-tile.max { background: transparent; }
.inbiz-sidebar-form .fg-radio .ico-tile .ico-img {
	display: block;
	width: 20px; height: 20px;
	object-fit: contain;
	image-rendering: -webkit-optimize-contrast;
}

/* Agreement checkbox row */
.inbiz-sidebar-form .fg-agree {
	display: flex; gap: 10px; align-items: flex-start;
	margin: 4px 0 16px;
	font-size: 13px;
	color: var(--isf-text-2);
	line-height: 1.4;
	cursor: pointer;
}
.inbiz-sidebar-form .fg-agree input[type="checkbox"] {
	width: 18px; height: 18px;
	border: 1.5px solid var(--isf-radio-dot);
	border-radius: 4px;
	background: #fff;
	appearance: none;
	-webkit-appearance: none;
	flex-shrink: 0;
	margin-top: 1px;
	cursor: pointer;
	position: relative;
}
.inbiz-sidebar-form .fg-agree input[type="checkbox"]:checked {
	background: var(--isf-blue);
	border-color: var(--isf-blue);
}
.inbiz-sidebar-form .fg-agree input[type="checkbox"]:checked::after {
	content: '';
	position: absolute;
	left: 50%;
	top: 45%; /* tick визуально весит ниже центра — на 5% выше геометрии */
	width: 5px; height: 9px;
	border-right: 2px solid #fff;
	border-bottom: 2px solid #fff;
	transform: translate(-50%, -50%) rotate(45deg);
}
.inbiz-sidebar-form .fg-agree a { color: var(--isf-blue); text-decoration: none; }
.inbiz-sidebar-form .fg-agree a:hover { text-decoration: underline; }

/* Captcha block (Yandex SmartCaptcha).
 * После рендера .fg-captcha-stub удаляется JS-ом и Yandex встраивает свой
 * iframe — у него уже есть рамка/фон, поэтому контейнер сам по себе никакого
 * оформления не несёт (только margin). На узком сайдбаре виджет может быть
 * шире контейнера (≥302px) — пускаем горизонтальный скролл вместо клиппинга.
 */
.inbiz-sidebar-form .fg-captcha {
	margin-bottom: 16px;
	position: relative;
	max-width: 100%;
	overflow-x: auto;
}
.inbiz-sidebar-form .fg-captcha iframe {
	max-width: 100%;
	display: block;
}
/* Стаб-состояние «Загружаем проверку…» — единственное место с рамкой/фоном. */
.inbiz-sidebar-form .fg-captcha .fg-captcha-stub {
	background: #fff;
	border: 1px solid var(--isf-border);
	border-radius: 14px;
	padding: 16px 18px;
	display: grid;
	grid-template-columns: auto 1fr auto;
	gap: 14px;
	align-items: center;
}
.inbiz-sidebar-form .fg-captcha .cap-check {
	width: 28px; height: 28px;
	border: 1.5px solid var(--isf-radio-dot);
	border-radius: 5px;
	background: #fff;
}
.inbiz-sidebar-form .fg-captcha .cap-title {
	font-weight: 700;
	font-size: 16px;
	color: var(--isf-ink);
}
.inbiz-sidebar-form .fg-captcha .cap-sub {
	font-size: 13px;
	color: var(--isf-text-2);
	margin-top: 2px;
}
.inbiz-sidebar-form .fg-captcha .cap-foot {
	font-size: 11px;
	color: var(--isf-text-3);
	margin-top: 4px;
}
.inbiz-sidebar-form .fg-captcha .cap-help {
	width: 22px; height: 22px;
	border-radius: 50%;
	border: 1px solid var(--isf-border);
	display: grid; place-items: center;
	font-size: 12px;
	color: var(--isf-text-3);
	cursor: help;
}

/* Submit button */
.inbiz-sidebar-form .fcard-submit {
	width: 100%;
	padding: 20px 24px;
	background: var(--isf-blue);
	color: #fff;
	border: none;
	border-radius: 14px;
	font-family: inherit;
	font-weight: 700;
	font-size: 17px;
	cursor: pointer;
	transition: background .15s;
	-webkit-appearance: none;
}
.inbiz-sidebar-form .fcard-submit:hover { background: var(--isf-blue-600); }
.inbiz-sidebar-form .fcard-submit:disabled { opacity: 0.6; cursor: not-allowed; }
.inbiz-sidebar-form.is-submitting .fcard-submit { opacity: 0.7; pointer-events: none; }

/* Footer — статус ответа */
.inbiz-sidebar-form .fcard-foot {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	margin-top: 14px;
	font-size: 13px;
	color: var(--isf-text-3);
	text-align: center;
	line-height: 1.4;
}
.inbiz-sidebar-form .fcard-foot .dot {
	width: 6px; height: 6px; border-radius: 50%;
	background: var(--isf-success);
	flex-shrink: 0;
}

/* Success / error inline message */
.inbiz-sidebar-form .fcard-msg {
	margin-top: 12px;
	padding: 12px 14px;
	border-radius: 12px;
	font-size: 14px;
	line-height: 1.45;
	display: none;
}
.inbiz-sidebar-form .fcard-msg.is-visible { display: block; }
.inbiz-sidebar-form .fcard-msg.is-success {
	background: #E8F8F0;
	color: #0E7A4A;
	border: 1px solid #C8EBD8;
}
.inbiz-sidebar-form .fcard-msg.is-error {
	background: #FEE8E8;
	color: #A8252A;
	border: 1px solid #F5C8CB;
}

/* Per-field inline error text */
.inbiz-sidebar-form .fg-error {
	display: none;
	margin-top: 6px;
	font-size: 13px;
	color: var(--isf-danger);
	line-height: 1.35;
}
.inbiz-sidebar-form .fg.has-error .fg-error { display: block; }
.inbiz-sidebar-form .fg.has-error .fg-input { border-color: var(--isf-danger); }

/* Noscript fallback — рендерится только при отключённом JS (без JS submit
 * не работает: form.action пустой, pipeline на fetch+nonce). Предлагаем
 * включить JS либо позвонить продавцу напрямую, если телефон в meta доступен. */
.inbiz-sidebar-form .fcard-noscript {
	background: #FEF3DB;
	border: 1px solid #F0D58B;
	color: #7A4F00;
	border-radius: 14px;
	padding: 14px 16px;
	font-size: 14px;
	line-height: 1.5;
	margin-bottom: 16px;
}
.inbiz-sidebar-form .fcard-noscript strong { font-weight: 700; color: #5A3A00; }
.inbiz-sidebar-form .fcard-noscript a {
	color: var(--isf-blue);
	text-decoration: underline;
	font-weight: 600;
}

/* Success screen — заменяет содержимое формы. */
.inbiz-sidebar-form.is-done .fcard-form { display: none; }
.inbiz-sidebar-form .fcard-done {
	display: none;
	flex-direction: column;
	align-items: center;
	text-align: center;
	padding: 24px 12px;
	gap: 12px;
}
.inbiz-sidebar-form.is-done .fcard-done { display: flex; }
.inbiz-sidebar-form .fcard-done-icon {
	width: 64px; height: 64px;
	border-radius: 50%;
	background: var(--isf-success);
	color: #fff;
	display: grid; place-items: center;
}
.inbiz-sidebar-form .fcard-done-title {
	font-family: 'Manrope', 'Inter', sans-serif;
	font-weight: 800;
	font-size: 22px;
	color: var(--isf-ink);
	margin: 4px 0 0;
}
.inbiz-sidebar-form .fcard-done-text {
	font-size: 14px;
	color: var(--isf-text-2);
	line-height: 1.5;
	margin: 0;
	max-width: 280px;
}

/* Sticky-закреп правой колонки.
 *
 * РЕАЛИЗУЕТСЯ JS-ом в kava-child/functions.php (БЛОК 34, "STICKY PANEL
 * BOUNDARY"). 3-state логика: static → fixed → parked. Здесь — никакого
 * `position: sticky` (в прошлый раз он конфликтовал с JS и ломал ширину
 * формы при фиксации).
 *
 * НО — нужен `align-self: flex-start` на десктопе:
 * по умолчанию flex-row с align-items: stretch растягивает колонку до
 * высоты самой высокой сестры (main column ~7706px). Тогда JS меряет
 * panelH=7706, считает что форма не помещается между TOP=20 и границей
 * → сразу парксует на исходной позиции, fixed-фаза не наступает.
 *
 * С align-self: flex-start колонка высотой = content (~860px), и JS
 * корректно вычисляет диапазон fixed-фазы для всей основной строки. */
@media (min-width: 1025px) {
	.elementor-element.elementor-element-015a712 {
		--align-self: flex-start !important;
		align-self: flex-start !important;
	}
}

/* Responsive — на узких экранах радио в одну колонку. */
@media (max-width: 480px) {
	.inbiz-sidebar-form { padding: 22px 18px 18px; }
	.inbiz-sidebar-form .fcard-title { font-size: 22px; }
	.inbiz-sidebar-form .fg-radio-group { grid-template-columns: 1fr; }
}

/* Когда JS переместил форму после галереи (≤ data-mobile-breakpoint) —
 * даём ей вертикальные отступы, чтобы не «слипалась» с соседями. */
.inbiz-sidebar-form--moved {
	margin: 20px 0 24px;
}
/* На случай если JS отключён или селектор не нашёлся — на мобиле форма
 * всё равно должна занимать всю ширину и быть видна без горизонтального
 * скролла внутри Elementor-колонки. */
@media (max-width: 767px) {
	.inbiz-sidebar-form { max-width: 100%; }
}