/* ==========================================================================
   Єдина форма заявки (components/_request_form.html.twig) і бейдж виробника.

   Розгорнутий стан: рядок 1 — ім'я та email; рядок 2 — телефон і кнопка;
   під ними згода на всю ширину. Кнопка вирівняна по лінії поля (над нею
   порожній лейбл тієї ж висоти), підказка й помилка під телефоном ділять
   один зарезервований рядок і не зсувають кнопку. Нижче 560 px — одна колонка.
   Ширину контейнера форма не задає: бере ту, що дає сторінка.

   Згорнутий стан (.rf-collapsed, лише в липких смугах після прилипання):
   тільки телефон і кнопка в один рядок на всю ширину смуги. Перемикає
   js/custom/forms/request-form.js. Анімуються лише max-width і padding.

   Кольори: у темних смугах (.hw-formband / .fr-formband) текст світлий,
   у решті контекстів — темний.
   ========================================================================== */
.rf-wrap { text-align: left; max-width: 960px; transition: max-width .2s ease, padding .2s ease; }

.rf {
	display: grid;
	grid-template-columns: 1fr 1fr;
	column-gap: 16px;
	row-gap: 12px;
	align-items: start;
	margin: 0;
}
.rf-field { min-width: 0; }
.rf-label { display: block; font-size: .8rem; line-height: 1.3; margin: 0 0 5px; font-weight: 600; color: #4a3f4a; }
.rf .form-control { width: 100%; }

/* рядок 2: кнопка на лінії поля, ширина по вмісту */
.rf-submit .rf-spacer { visibility: hidden; }
.rf-btn { display: inline-block; width: auto; padding: 12px 28px; border-radius: 8px; font-weight: 600; white-space: nowrap;
	background: #a33188; color: #fff; border: none; transition: background .22s, box-shadow .22s, transform .22s; }
.rf-btn:hover { background: #b93c9b; color: #fff; transform: translateY(-2px); box-shadow: 0 8px 20px rgba(163, 49, 136, .34); }

/* підказка і помилка під телефоном: один зарезервований рядок */
.rf-sub { display: block; min-height: 1.35em; font-size: .76rem; line-height: 1.35; margin: 4px 0 0; }
.rf-hint { color: #7a6a7a; }
.rf-hint.off { display: none; }
.rf-error { display: none; color: #b3261e; font-size: .76rem; line-height: 1.35; margin: 4px 0 0; }
.rf-sub .rf-error { margin: 0; }
.rf-error.on { display: block; }
.rf .is-invalid { box-shadow: 0 0 0 2px #e8a3b8 !important; }

/* згода на всю ширину */
.rf-consent { grid-column: 1 / -1; }
.rf-consent label { display: flex; align-items: flex-start; gap: 10px; cursor: pointer; margin: 0; }
.rf-consent input[type="checkbox"] { flex: 0 0 auto; width: 18px; height: 18px; margin: 2px 0 0; accent-color: #a33188; }
.rf-consent span { font-size: .8rem; line-height: 1.45; color: #4a3f4a; }
.rf-consent a { color: #a33188; text-decoration: underline; }
.rf-consent a:hover { color: #6b2159; }

.rf-success { background: rgba(163, 49, 136, .1); color: #4a3f4a; border-radius: 8px; padding: 12px 16px; margin-bottom: 12px; }
.rf-success.d-none { display: none; }

/* --- темні смуги (сторінка ваг, CRM, партнерська програма, про нас, пілот) --- */
.hw-formband .rf-label, .fr-formband .rf-label { color: rgba(255, 255, 255, .85); }
.hw-formband .rf-hint, .fr-formband .rf-hint { color: rgba(255, 255, 255, .62); }
.hw-formband .rf-error, .fr-formband .rf-error { color: #f0a8d8; }
.hw-formband .rf .is-invalid, .fr-formband .rf .is-invalid { box-shadow: 0 0 0 2px #f0a8d8 !important; }
.hw-formband .rf-consent span, .fr-formband .rf-consent span { color: rgba(255, 255, 255, .78); }
.hw-formband .rf-consent a, .fr-formband .rf-consent a { color: #f0a8d8; }
.hw-formband .rf-consent a:hover, .fr-formband .rf-consent a:hover { color: #fff; }
.hw-formband .rf-consent input[type="checkbox"], .fr-formband .rf-consent input[type="checkbox"] { accent-color: #f0a8d8; }
.hw-formband .rf-success, .fr-formband .rf-success { background: rgba(255, 255, 255, .12); color: #fff; }
.hw-formband .rf-btn, .fr-formband .rf-btn { width: auto; }

/* --- липка смуга: сентинель у потоці на місці форми (IntersectionObserver) --- */
#fbSentinel { display: block; height: 1px; margin-bottom: -1px; }

/* прилипла, але розгорнута (людина клікнула): усе видно, висота обмежена,
   щоб на невисоких екранах форма не обрізалась */
.hw-formband.stuck { max-height: calc(100vh - var(--hw-sticky-top, 70px) - 24px); overflow-y: auto; }
.fr-formband.stuck { max-height: calc(100vh - var(--fr-sticky-top, 70px) - 24px); overflow-y: auto; }

/* --- згорнутий стан: лише телефон і кнопка в один рядок, вужчий контейнер --- */
/* на десктопі згорнута форма займає всю ширину смуги: колонка заголовка ховається,
   колонка форми розтягується; звуження контейнера немає */
.rf-collapsed { max-width: none; }
.hw-formband.collapsed .row > [class*="col-lg-8"], .fr-formband.collapsed .row > [class*="col-lg-8"] { flex: 0 0 100%; max-width: 100%; }
.rf-collapsed .rf { display: flex; align-items: center; gap: 8px; }
.rf-collapsed .rf-name, .rf-collapsed .rf-email,
.rf-collapsed .rf-consent, .rf-collapsed .rf-label, .rf-collapsed .rf-sub,
.rf-collapsed .rf-success { display: none; }
.rf-collapsed .rf-phone { flex: 1 1 auto; margin: 0; }
.rf-collapsed .rf-submit { flex: 0 0 auto; }
.rf-collapsed .rf-btn, .hw-formband .rf-collapsed .rf-btn, .fr-formband .rf-collapsed .rf-btn { width: auto; padding: 10px 18px; font-size: .88rem; }
.rf-collapsed .form-control { padding-top: 10px; padding-bottom: 10px; }
.hw-formband.collapsed, .fr-formband.collapsed { padding: 10px 0; }
.hw-formband.collapsed .hw-formband-title, .fr-formband.collapsed .fr-formband-title { display: none; }

/* десктоп: поле телефону не розтягується на всю смугу, кнопка тієї ж висоти
   і звичайного розміру — телефон і кнопка стоять поруч, не «поле на весь екран
   плюс маленька кнопка». Мобільні значення нижче лишаються як були. */
@media (min-width: 560px) {
	.rf-collapsed .rf { justify-content: flex-start; gap: 12px; }
	.rf-collapsed .rf-phone { flex: 0 1 380px; max-width: 380px; }
	.rf-collapsed .form-control { padding-top: 12px; padding-bottom: 12px; font-size: 1rem; }
	.rf-collapsed .rf-btn, .hw-formband .rf-collapsed .rf-btn, .fr-formband .rf-collapsed .rf-btn { padding: 12px 28px; font-size: .95rem; }
}

/* десктоп: згорнутий рядок = заголовок форми (свій на кожній сторінці:
   «Розкажіть про свій потік», «Розкажіть про свій бізнес» тощо) + телефон +
   кнопка, в одну лінію, зліва направо; підзаголовок ховається */
@media (min-width: 992px) {
	.hw-formband.collapsed .row, .fr-formband.collapsed .row { flex-wrap: nowrap; align-items: center; }
	.hw-formband.collapsed .hw-formband-title, .fr-formband.collapsed .fr-formband-title {
		display: block; flex: 0 1 auto; width: auto; max-width: 38%; margin: 0; padding-right: 24px; }
	.hw-formband.collapsed .hw-formband-title h2, .fr-formband.collapsed .fr-formband-title h2 {
		font-size: 1.1rem; margin: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
	.hw-formband.collapsed .fb-sub, .fr-formband.collapsed .fb-sub { display: none; }
	.hw-formband.collapsed .row > [class*="col-lg-8"], .fr-formband.collapsed .row > [class*="col-lg-8"] { flex: 1 1 auto; width: auto; max-width: none; }
	.rf-collapsed .rf { justify-content: flex-start; }
}

/* --- нижче 560 px: одна колонка, кнопка на всю ширину останньою;
   згорнута форма — на всю доступну ширину, телефон і кнопка в один рядок --- */
@media (max-width: 559.98px) {
	.rf { grid-template-columns: 1fr; }
	.rf-submit .rf-spacer { display: none; }
	.rf-submit { order: 10; }
	.rf-consent { order: 9; }
	.rf-btn, .hw-formband .rf-btn, .fr-formband .rf-btn { width: 100%; }

	.rf-collapsed { max-width: 100%; }
	.rf-collapsed .rf { display: flex; }
	.rf-collapsed .rf-submit { order: 0; }
	.rf-collapsed .rf-btn, .hw-formband .rf-collapsed .rf-btn, .fr-formband .rf-collapsed .rf-btn { width: auto; }
}

/* --- Бейдж виробника --- */
.mf-badge { font-size: .78rem; line-height: 1.45; color: #7a6a7a; margin: 10px 0 0; }
.mf-badge a { color: inherit; text-decoration: underline; white-space: nowrap; }
.mf-badge a:hover { color: #a33188; }
.mf-badge-dark { color: rgba(255, 255, 255, .7); }
.mf-badge-dark a:hover { color: #fff; }