* { margin: 0; padding: 0; box-sizing: border-box; }

body {
  font-family: -apple-system, 'Segoe UI', sans-serif;
  background: #FAFBFC;
  color: #0F1B2E;
  min-height: 100vh;
}

.page {
  max-width: 1500px;
  margin: 0 auto;
  padding: 24px;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 22px;
}

.brand { display: flex; align-items: center; gap: 10px; }

.brand-icon {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  object-fit: contain;
  display: block;
}

.brand-name { font-size: 19px; font-weight: 600; color: #0F1B2E; }

.lang-switch { display: flex; gap: 6px; flex-wrap: wrap; }

.lang-btn {
  background: #ffffff;
  border: 1px solid #E5E8EC;
  color: #5F5E5A;
  padding: 6px 14px;
  border-radius: 8px;
  font-size: 12px;
  cursor: pointer;
}

.lang-btn.active {
  background: #2F5DE8;
  border-color: #2F5DE8;
  color: #ffffff;
  font-weight: 600;
}

.hero { margin-bottom: 16px; }
.hero h1 { font-size: 26px; font-weight: 600; color: #0F1B2E; margin-bottom: 6px; }
.hero p { font-size: 13px; color: #888780; }

.badges { display: flex; gap: 8px; margin-bottom: 18px; flex-wrap: wrap; }

.badge {
  display: flex;
  align-items: center;
  gap: 6px;
  background: #ffffff;
  border: 1px solid #E5E8EC;
  border-radius: 8px;
  padding: 8px 12px;
  font-size: 12px;
  color: #0F1B2E;
}

.badge-icon { font-size: 14px; }

/* Вкладки - скрыты по умолчанию, показываются только на мобильном */
.mobile-tabs { display: none; gap: 8px; margin-bottom: 12px; }

.tab-btn {
  flex: 1;
  background: #ffffff;
  border: 1px solid #E5E8EC;
  color: #5F5E5A;
  padding: 10px;
  border-radius: 10px;
  font-size: 14px;
  cursor: pointer;
}

.tab-btn.active {
  background: #2F5DE8;
  border-color: #2F5DE8;
  color: #ffffff;
  font-weight: 600;
}

/* Панели - side-by-side на десктопе. Форма (слева) втрое шире чата (справа) */
.panels {
  flex: 1;
  display: flex;
  gap: 14px;
  min-height: 0;
  margin-bottom: 18px;
}

/* Ограничиваем высоту формы на десктопе - сам виджет партнёра растягивает
   iframe под самый длинный пройденный шаг и не уменьшает обратно на более
   коротких шагах, оставляя большой пустой пробел снизу. На десктопе
   внутренний скролл в ограниченном окне не создаёт такой путаницы, как
   на мобильном (там мы его специально убрали - см. .panel в медиа-запросе
   ниже, который сбрасывает max-height обратно в none для мобильных). */
.form-panel { flex: 5; }

/* Чат "прилипает" к экрану при скролле длинной формы - всегда виден,
   не убегает вверх/вниз. align-self: flex-start отменяет стандартное
   растягивание flex-панели по высоте формы (иначе sticky работать не
   будет - высота будет равна высоте формы, а не ограниченной высоте
   экрана). Список сообщений скроллится ВНУТРИ панели, поле ввода
   всегда остаётся на виду снизу - как в обычном мессенджере. */
.chat-panel {
  flex: 1;
  position: sticky;
  top: 24px;
  align-self: flex-start;
  max-height: calc(100vh - 48px);
}

.panel {
  min-width: 0;
  background: #ffffff;
  border: 1px solid #E5E8EC;
  border-radius: 12px;
  padding: 16px;
  display: flex;
  flex-direction: column;
}

.panel-title {
  font-size: 13px;
  font-weight: 600;
  color: #0F1B2E;
  margin-bottom: 12px;
}

.panel-title-note { color: #888780; font-weight: 400; }

.form-note {
  font-size: 12px;
  color: #5F5E5A;
  background: #F1F3F6;
  border-radius: 8px;
  padding: 8px 10px;
  margin-bottom: 12px;
  line-height: 1.5;
}

.chat-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-bottom: 12px;
  border-bottom: 1px solid #F0F1F3;
  margin-bottom: 12px;
}

.avatar {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: #D3D1C7;
  flex-shrink: 0;
}

.chat-name { font-size: 13px; font-weight: 600; color: #0F1B2E; margin: 0; }

.chat-status {
  font-size: 11px;
  color: #639922;
  margin: 0;
  display: flex;
  align-items: center;
  gap: 4px;
}

.status-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #639922;
  display: inline-block;
}

.chat-messages {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 4px 0 0;
}

.msg {
  padding: 8px 10px;
  border-radius: 10px;
  font-size: 14px;
  line-height: 1.5;
  max-width: 95%;
  white-space: pre-wrap;
}

.msg.bot { background: #F1F3F6; color: #0F1B2E; align-self: flex-start; }
.msg.user { background: #2F5DE8; color: #ffffff; align-self: flex-end; }
.msg.loading { opacity: 0.6; font-style: italic; }

.chat-input-row {
  display: flex;
  gap: 6px;
  padding-top: 10px;
  border-top: 1px solid #F0F1F3;
  flex-shrink: 0;
}

#chatInput {
  flex: 1;
  background: #ffffff;
  border: 1px solid #E5E8EC;
  color: #0F1B2E;
  padding: 10px 12px;
  border-radius: 8px;
  font-size: 14px;
}

#chatInput:focus { outline: none; border-color: #2F5DE8; }

#chatSend {
  background: #2F5DE8;
  color: #ffffff;
  border: none;
  border-radius: 8px;
  width: 38px;
  font-size: 16px;
  cursor: pointer;
}

.footer {
  border-top: 1px solid #E5E8EC;
  padding-top: 14px;
}

.footer-legal { display: flex; gap: 18px; flex-wrap: wrap; }

.footer-legal a {
  font-size: 11px;
  color: #888780;
  text-decoration: none;
}

/* Принудительная высота iframe виджета партнёра - сам iframe по умолчанию
   имеет фиксированную стартовую высоту, а нам недоступно содержимое
   внутри (чужой домен), чтобы точно подогнать высоту под контент. Задаём
   заведомо большую высоту с запасом, чтобы большинства шагов формы
   хватало без внутреннего скролла. На коротких шагах будет немного
   пустого места снизу - разумный компромен против двойного скролла. */
/* Ширина iframe виджета партнёра на 100% контейнера. Высоту принудительно
   НЕ задаём - пробовали фиксированный запас, но реальная высота контента
   виджета по шагам сильно варьируется, и любое конкретное число либо
   слишком маленькое (снова появляется внутренний скролл на длинных шагах),
   либо слишком большое (пустое место на коротких шагах). Вернулись к
   поведению iframe по умолчанию. */
#tcpp-iframe-kfz iframe {
  width: 100% !important;
  border: none !important;
}

/* Мобильная адаптация: панели становятся вкладками одна под другой */
@media (max-width: 760px) {
  .mobile-tabs { display: flex; }
  .panels { flex-direction: column; }
  .panel { display: none; max-height: none; }
  .panel.active { display: flex; }
  .chat-panel { position: static; }
  .hero h1 { font-size: 21px; }
  .hero p { font-size: 13px; }
  .badges { display: none; }

  /* Меньше боковых отступов на мобильном - форме нужна каждая
     дополнительная единица ширины на маленьком экране */
  .page { padding: 12px; }

  /* Шапка на мобильном - колонкой: лого сверху, языки одной строкой
     под ним на всю ширину, а не рядом (иначе не помещается и рвётся
     на 2 строки). Кнопки языков чуть компактнее, чтобы все 7 гарантированно
     влезли в одну строку даже на узких экранах. */
  .header {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }

  .lang-switch {
    width: 100%;
    flex-wrap: nowrap;
    justify-content: space-between;
    gap: 4px;
  }

  .lang-btn {
    padding: 6px 8px;
    font-size: 11px;
    flex: 1;
    text-align: center;
  }
}

/* footer-legal теперь кнопки, а не ссылки - убираем стандартные
   стили кнопки, оставляем визуально идентично прежним ссылкам */
.footer-legal button {
  font-family: inherit;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  font-size: 11px;
  color: #888780;
}

.footer-legal button:hover { color: #2F5DE8; }

/* Модальное окно для Impressum/Datenschutz/Kontakt/AGB */
.modal-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(15, 27, 46, 0.5);
  z-index: 1000;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.modal-overlay.active { display: flex; }

.modal-box {
  background: #ffffff;
  border-radius: 12px;
  max-width: 640px;
  width: 100%;
  max-height: 85vh;
  overflow-y: auto;
  padding: 32px;
  position: relative;
}

.modal-close {
  position: absolute;
  top: 16px;
  right: 16px;
  background: #F1F3F6;
  border: none;
  border-radius: 8px;
  width: 32px;
  height: 32px;
  font-size: 14px;
  color: #5F5E5A;
  cursor: pointer;
}

.modal-content h2 {
  font-size: 20px;
  font-weight: 600;
  color: #0F1B2E;
  margin-bottom: 16px;
}

.modal-content h3 {
  font-size: 14px;
  font-weight: 600;
  color: #0F1B2E;
  margin: 20px 0 8px;
}

.modal-content p {
  font-size: 13px;
  line-height: 1.6;
  color: #5F5E5A;
  margin-bottom: 10px;
}

.modal-content .todo {
  color: #C9502A;
  font-weight: 600;
}

/* Cookie-gate: блокирует форму партнёра до согласия. Обе кнопки
   намеренно одинакового размера/веса (не "принять большая, отказаться
   мелкая ссылка") - по практике немецких судов кнопка отказа должна
   быть так же заметна, как кнопка согласия. */
.cookie-gate {
  background: #F1F3F6;
  border-radius: 10px;
  padding: 24px;
  text-align: center;
}

.cookie-gate h3 {
  font-size: 15px;
  font-weight: 600;
  color: #0F1B2E;
  margin-bottom: 8px;
}

.cookie-gate p {
  font-size: 13px;
  line-height: 1.6;
  color: #5F5E5A;
  margin-bottom: 16px;
  max-width: 420px;
  margin-left: auto;
  margin-right: auto;
}

.cookie-gate-msg-declined { display: none; }
.cookie-gate.declined .cookie-gate-msg-declined { display: block; }
.cookie-gate.declined .cookie-gate-msg-default { display: none; }

.cookie-gate-buttons {
  display: flex;
  gap: 10px;
  justify-content: center;
  flex-wrap: wrap;
}

.cookie-gate-buttons button {
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  padding: 10px 18px;
  border-radius: 8px;
  cursor: pointer;
}

#cookieAccept {
  background: #2F5DE8;
  color: #ffffff;
  border: none;
}

#cookieDecline {
  background: #ffffff;
  color: #0F1B2E;
  border: 1px solid #E5E8EC;
}