/* ---------- Base */
:root{
  --tyx-primary:#7A62FF;
  --tyx-primary-600:#6a56e0;
  --tyx-bg:#fffdfc;
  --tyx-soft:#f3f7f6;
  --tyx-text:#222;
  --tyx-muted:#666;
  --tyx-border:#e8ebef;
}

html,body{ height:100%; }
body{
  font-family: Inter, "Helvetica Neue", Arial, sans-serif;
  background: var(--tyx-bg);
  color: var(--tyx-text);
}

/* ---------- Navbar / Footer / Main paddings */
.tyx-navbar{ backdrop-filter: saturate(140%) blur(6px); }
.tyx-main{ padding: 82px 10px 0 10px; }
.tyx-footer{ background:#fafafa; border-top:1px solid var(--tyx-border); }

/* ---------- Buttons */
.btn{ border-radius:12px; font-weight:600; }
.btn-pill{ border-radius:50px; }
.btn-primary{
  background:var(--tyx-primary);
  border-color:var(--tyx-primary);
  transition:.2s ease;
}
.btn-primary:hover{
  background:var(--tyx-primary-600);
  border-color:var(--tyx-primary-600);
}
.btn-outline-primary{
  color:var(--tyx-primary);
  border-color:var(--tyx-primary);
  background:transparent;
}
.btn-outline-primary:hover{
  color:#fff; background:var(--tyx-primary); border-color:var(--tyx-primary);
}

/* ---------- Hero */
.tyx-hero{
  min-height: calc(100vh - 82px);
  background: linear-gradient(180deg, #fff 0%, var(--tyx-soft) 100%);
  display:flex; align-items:center; text-align:center; padding:72px 0;
}
@media (max-width: 768px) {
  .tyx-hero {
    min-height: auto;
    padding: 32px 0;
  }
}
.tyx-hero h1{ font-weight:800; letter-spacing:-0.02em; }
.tyx-hero p{ color:var(--tyx-muted); }

/* ---------- Sections */
.tyx-section{ padding:72px 0; }
.tyx-section.bg-soft{ background: var(--tyx-soft); }
.tyx-card{
  border:1px solid var(--tyx-border);
  border-radius:16px; padding:24px; background:#fff;
  box-shadow: 0 6px 18px rgba(0,0,0,.04);
}

/* ---------- FAQ */
.accordion-button{ background:#f9f9f9; font-weight:600; }
.accordion-button:focus{ box-shadow:none; }
.accordion-item{ border-radius:12px; overflow:hidden; border:1px solid var(--tyx-border); }

/* ---------- Forms / Quiz overrides */
.quiz-container .btn,
.tyx-wide-options .btn{
  width:100%;
  padding:16px 18px;
  margin:8px 0;
  font-size:1.075rem;
  border-radius:12px;
}
.progress{ height:10px; border-radius:6px; background:#eceefd; }
.progress-bar{ background: var(--tyx-primary); }

/* Radio/checkbox pretty (works with your inputs) */
.tyx-option{
  display:flex; align-items:center; gap:12px;
  border:1px solid var(--tyx-border); border-radius:12px; padding:14px 16px;
  cursor:pointer; transition:.2s ease; background:#fff;
}
.tyx-option:hover{ border-color:#d8dbe0; box-shadow:0 4px 12px rgba(0,0,0,.04); }
.tyx-option input{ width:18px; height:18px; }
.tyx-option .label{ flex:1; font-weight:600; }

input[type="radio"]:checked + .label,
input[type="checkbox"]:checked + .label{ color: var(--tyx-primary); }

/* ---------- Utilities */
.text-gradient{
  background: linear-gradient(90deg, #7A62FF, #0EA5E9);
  -webkit-background-clip:text; -webkit-text-fill-color: transparent;
}
.brand-accent {
  color: var(--tyx-primary) !important;
}
/* --- Sticky footer fix --- */
html, body {
  height: 100%;
}

body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.tyx-main {
  flex: 1 0 auto; /* растягиваем основной контент */
  
}

.tyx-footer {
  flex-shrink: 0;
  margin-top: 40px; /* небольшой отступ сверху */
  background: #fafafa;
  border-top: 1px solid var(--tyx-border);
}
/* === TyX accent elements === */

/* Радио и чекбоксы в фирменном цвете */
input[type="radio"]:checked,
input[type="checkbox"]:checked {
  accent-color: var(--tyx-primary);
}

/* Hover/active состояние ссылок */
a {
  color: var(--tyx-primary);
  text-decoration: none;
  transition: color .2s ease;
}

a:hover,
a:focus {
  color: var(--tyx-primary-600);
  text-decoration: underline;
}

a:active {
  color: #5c47cc; /* немного темнее при клике */
}

/* Если где-то использованы .link-primary Bootstrap */
.link-primary {
  color: var(--tyx-primary) !important;
}
.link-primary:hover {
  color: var(--tyx-primary-600) !important;
}
/* 1) Нативная подсветка (работает где нет bootstrap-скина) */
input[type="radio"]:checked,
input[type="checkbox"]:checked {
  accent-color: var(--tyx-primary);
}

/* 2) Bootstrap-стили — форсим цвет чекбокса/радио */
.form-check-input:checked {
  background-color: var(--tyx-primary) !important;
  border-color: var(--tyx-primary) !important;
}
.form-check-input:focus {
  border-color: var(--tyx-primary) !important;
  box-shadow: 0 0 0 .25rem rgba(122,98,255,.25) !important;
}
.form-switch .form-check-input:checked {
  background-color: var(--tyx-primary) !important;
}

/* 3) Подсветка всей карточки варианта (label.tyx-option) при выборе */
.tyx-option:has(input[type="radio"]:checked),
.tyx-option:has(input[type="checkbox"]:checked) {
  border-color: var(--tyx-primary);
  background: #F6F3FF; /* мягкий фиолетовый фон */
  box-shadow: 0 0 0 2px rgba(122,98,255,.15);
}

/* На случай, если :has() не поддерживается у части пользователей —
   оставляем прежний текстовый акцент на подписи (у тебя он уже есть) */
.quiz-image {
  max-width: 600px;
  width: 100%;
  height: auto;
}

@media (max-width: 768px) {
  .quiz-image {
    max-width: 100%;
  }
}

.btn-next {
  display: inline-block;
  width: 100%;
  max-width: 300px;
  padding: 12px 32px;
  font-size: 1.25rem;
  border-radius: 22px;
}

@media (max-width: 768px) {
  .btn-next {
    max-width: 100%;
    padding: 12px 28px;
    font-size: 1.1rem;
  }
}