/* =============================================================================
   individuals.css — стили ТОЛЬКО раздела «Для физлиц» (/individuals/)
   -----------------------------------------------------------------------------
   Отдельный файл, подключённый на одной странице. Сделано намеренно: раздел не
   должен ничего менять в B2B-части сайта. Ничего отсюда не переиспользовать на
   других страницах и ничего сюда не выносить из общих styles.css/additions.css.
   ============================================================================= */

/* ---- Переключатель направлений (учёба / лечение / путешествия / другое) ---- */
.tabs__nav {
  display: flex; flex-wrap: wrap; gap: .6rem;
  margin-bottom: 1.6rem; justify-content: center;
}
.tabs__btn {
  padding: .7rem 1.25rem;
  font: inherit; font-size: .95rem; font-weight: 700;
  color: var(--text-dark);
  background: var(--white);
  border: 1px solid var(--light-2); border-radius: 999px;
  cursor: pointer;
  transition: color .25s var(--ease), background .25s var(--ease), border-color .25s var(--ease);
}
.tabs__btn:hover { border-color: var(--gold-500); color: var(--gold-700); }
.tabs__btn[aria-selected="true"] {
  background: var(--navy-800); color: var(--white); border-color: var(--navy-800);
}
.tabs__btn:focus-visible { outline: 2px solid var(--gold-600); outline-offset: 2px; }

.tabs__panel {
  padding: clamp(1.4rem, 3vw, 2.1rem);
  background: var(--white);
  border: 1px solid var(--light-2); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-soft);
}
.tabs__panel:focus-visible { outline: 2px solid var(--gold-600); outline-offset: 3px; }
.tabs__panel h3 { font-size: var(--fs-h3); margin-bottom: .7rem; }
.tabs__panel > p { margin: 0 0 1.1rem; color: var(--text-muted-dark); max-width: 62ch; }
.tabs__cases { display: grid; gap: .7rem; margin: 0 0 1.4rem; padding: 0; list-style: none; }
.tabs__cases li { display: flex; gap: .7rem; align-items: flex-start; font-size: .94rem; color: var(--text-dark); }
.tabs__cases .icon { flex: none; width: 1.15em; height: 1.15em; margin-top: .15rem; color: var(--gold-600); }

/* ---- Документы от физлица: без юридического жаргона B2B-блоков ---- */
.persondocs { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); margin: 0; padding: 0; list-style: none; }
.persondocs li {
  padding: 1.25rem 1.2rem;
  background: var(--white);
  border: 1px solid var(--light-2); border-left: 3px solid var(--gold-500);
  border-radius: var(--radius);
}
.persondocs b { display: block; margin-bottom: .35rem; }
.persondocs span { font-size: .9rem; color: var(--text-muted-dark); }

/* ---- Блок «пояснение + форма» ---- */
.indiv-form { display: grid; gap: 1.6rem; grid-template-columns: .95fr 1.05fr; align-items: start; }
@media (max-width: 900px) { .indiv-form { grid-template-columns: 1fr; } }

/* ---- Подпись «необязательно» у полей и строка ошибки формы ---- */
.indiv-opt { font-weight: 400; color: var(--text-muted-light); }
.indiv-error {
  margin: .2rem 0 0; padding: .7rem .9rem;
  font-size: .88rem; font-weight: 600; color: #ffb4b4;
  background: rgba(220, 70, 70, .12);
  border: 1px solid rgba(220, 70, 70, .35); border-radius: 10px;
}
.indiv-ok {
  margin: .2rem 0 0; padding: .7rem .9rem;
  font-size: .88rem; font-weight: 600; color: var(--gold-400);
  background: rgba(212, 175, 55, .12);
  border: 1px solid rgba(212, 175, 55, .35); border-radius: 10px;
}
/* Атрибут hidden в этой дизайн-системе перебивается display:grid/flex —
   на общем сайте это лечится правилом в additions.css, здесь дублируем
   локально, чтобы страница не зависела от порядка подключения файлов. */
.indiv-error[hidden], .indiv-ok[hidden] { display: none !important; }