/**
 * Онбординг (/order/onboarding) — визуал как у диалога ЮЛИ в проекте
 * и интерактивной колонки на главной (welcome-градиент, морская волна).
 * Только стили: структура HTML не меняется.
 */

/* --- Фон страницы: тот же градиент, что у окна ЮЛИ --- */
body.onboarding-page {
  background: linear-gradient(
    105deg,
    #dde8d6 0%,
    #e8f0e0 30%,
    #f5f9ef 58%,
    #f3ebdf 100%
  ) !important;
  min-height: 100vh;
  color: #1f2f2a;
}

body.onboarding-page .container {
  position: relative;
  z-index: 1;
}

/* --- Шапка с ЮЛИ: как «Диалог с ЮЛИ…» --- */
body.onboarding-page .col-lg-8 > .text-center.mb-5 {
  position: relative;
  overflow: hidden;
  padding: 28px 24px 24px;
  margin-bottom: 1.25rem !important;
  border-radius: 24px;
  background: linear-gradient(
    105deg,
    rgba(221, 232, 214, 0.72) 0%,
    rgba(232, 240, 224, 0.65) 30%,
    rgba(245, 249, 239, 0.7) 58%,
    rgba(243, 235, 223, 0.75) 100%
  );
  border: 1px solid rgba(44, 142, 142, 0.16);
  box-shadow: 0 8px 24px rgba(31, 47, 42, 0.07);
}

/* Листочки (как в welcome / float), без правки разметки */
body.onboarding-page .col-lg-8 > .text-center.mb-5::after {
  content: "";
  position: absolute;
  right: -12px;
  bottom: -28px;
  width: 160px;
  height: 140px;
  background: url("/static/img/yuli-welcome-leaves.svg") no-repeat center / contain;
  opacity: 0.28;
  pointer-events: none;
  z-index: 0;
}

body.onboarding-page .col-lg-8 > .text-center.mb-5 > * {
  position: relative;
  z-index: 1;
}

/* «ЮЛИ» — Caveat, красная нить (как в чате проекта) */
body.onboarding-page .font-accent.red-thread {
  font-family: "Caveat", cursive !important;
  font-size: 1.85rem !important;
  font-weight: 700 !important;
  color: #c24935 !important;
  letter-spacing: 0.02em;
  line-height: 1.1;
}

/* Заголовок — Inter / морская волна */
body.onboarding-page .col-lg-8 > .text-center.mb-5 h2 {
  font-family: "Inter", "Roboto", sans-serif !important;
  font-size: 1.25rem !important;
  font-weight: 700 !important;
  color: #2c8e8e !important;
  line-height: 1.35;
  margin-top: 0.5rem !important;
}

body.onboarding-page .col-lg-8 > .text-center.mb-5 .text-muted {
  font-family: "Inter", "Roboto", sans-serif;
  font-size: 0.95rem;
  color: rgba(31, 47, 42, 0.62) !important;
  margin-top: 0.5rem;
}

/* --- Карточка формы: тот же стиль, что у блока диалога --- */
body.onboarding-page #onboarding-form.card {
  position: relative;
  overflow: hidden;
  background: linear-gradient(
    105deg,
    #dde8d6 0%,
    #e8f0e0 30%,
    #f5f9ef 58%,
    #f3ebdf 100%
  ) !important;
  border: 1px solid rgba(44, 142, 142, 0.16) !important;
  border-radius: 24px !important;
  box-shadow: 0 8px 24px rgba(31, 47, 42, 0.07) !important;
}

body.onboarding-page #onboarding-form.card::after {
  content: "";
  position: absolute;
  right: -8px;
  bottom: -24px;
  width: 180px;
  height: 150px;
  background: url("/static/img/yuli-welcome-leaves.svg") no-repeat center / contain;
  opacity: 0.22;
  pointer-events: none;
  z-index: 0;
}

body.onboarding-page #onboarding-form .card-body {
  position: relative;
  z-index: 1;
  background: transparent !important;
}

body.onboarding-page .form-label {
  font-family: "Inter", "Roboto", sans-serif;
  font-size: 14px;
  font-weight: 700;
  color: #2c8e8e;
}

/* --- Поле цели: как composer в диалоге ЮЛИ --- */
body.onboarding-page #goal.form-control,
body.onboarding-page #questions-container textarea.form-control,
body.onboarding-page #questions-container input.form-control {
  display: block;
  width: 100%;
  background: #fff !important;
  border: 1px solid rgba(31, 47, 42, 0.1) !important;
  border-radius: 16px !important;
  padding: 12px 14px !important;
  box-shadow: 0 4px 14px rgba(31, 47, 42, 0.06);
  font-family: "Inter", "Roboto", sans-serif !important;
  font-size: 16px !important;
  font-weight: 400 !important;
  color: #1f2f2a !important;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
  resize: vertical;
}

body.onboarding-page #goal.form-control::placeholder,
body.onboarding-page #questions-container textarea.form-control::placeholder,
body.onboarding-page #questions-container input.form-control::placeholder {
  font-family: "Inter", "Roboto", sans-serif;
  font-size: 13px;
  font-weight: 400;
  color: rgba(31, 47, 42, 0.45);
  opacity: 1;
}

body.onboarding-page #goal.form-control:hover,
body.onboarding-page #questions-container textarea.form-control:hover,
body.onboarding-page #questions-container input.form-control:hover {
  border-color: rgba(194, 73, 53, 0.45) !important;
  box-shadow: 0 4px 14px rgba(194, 73, 53, 0.1);
}

body.onboarding-page #goal.form-control:focus,
body.onboarding-page #questions-container textarea.form-control:focus,
body.onboarding-page #questions-container input.form-control:focus {
  border-color: #c24935 !important;
  box-shadow: 0 4px 16px rgba(194, 73, 53, 0.14);
  outline: none !important;
}

/* --- Кнопки: единый стиль проекта (pill + морская волна) --- */
body.onboarding-page .btn {
  font-family: "Inter", "Roboto", sans-serif !important;
  font-weight: 600 !important;
  border-radius: 999px !important;
  padding: 8px 18px !important;
  transition: background-color 0.15s ease, box-shadow 0.15s ease, color 0.15s ease;
  box-shadow: 0 1px 3px rgba(44, 142, 142, 0.08);
}

body.onboarding-page .btn-primary {
  background: #2c8e8e !important;
  border: 1.5px solid #2c8e8e !important;
  color: #fff !important;
}

body.onboarding-page .btn-primary:hover,
body.onboarding-page .btn-primary:focus {
  background: rgba(44, 142, 142, 0.88) !important;
  border-color: #2c8e8e !important;
  color: #fff !important;
}

body.onboarding-page .btn-outline-secondary,
body.onboarding-page .btn-outline-secondary.btn-sm {
  background: #fff !important;
  border: 1.5px solid #2c8e8e !important;
  color: #2c8e8e !important;
}

body.onboarding-page .btn-outline-secondary:hover,
body.onboarding-page .btn-outline-secondary:focus {
  background: rgba(44, 142, 142, 0.06) !important;
  border-color: #2c8e8e !important;
  color: #2c8e8e !important;
}

/* Результат / превью — в той же палитре */
body.onboarding-page #step-result h3 {
  font-family: "Inter", "Roboto", sans-serif !important;
  font-weight: 700 !important;
  color: #2c8e8e !important;
}

body.onboarding-page #onboarding-form .v2-card {
  background: rgba(255, 255, 255, 0.55) !important;
  border: 1px solid rgba(44, 142, 142, 0.16) !important;
  border-radius: 16px !important;
  box-shadow: none !important;
}

body.onboarding-page #onboarding-mindmap-preview {
  border: 1px dashed rgba(44, 142, 142, 0.35) !important;
  border-radius: 12px !important;
  background: rgba(255, 253, 248, 0.85) !important;
}

body.onboarding-page .onboarding-step.is-hidden {
  display: none !important;
}