/* ============================================================
   Трейдинг Pro — страницы раздела «Информация»
   (FAQ, Риски, Оферта, Конфиденциальность)
   Подключается ПОСЛЕ css/style.css. Использует переменные сайта,
   если они есть (--accent, --border, --muted, --card), иначе — запасные.
   ============================================================ */

.legal{
  --l-accent: var(--accent, #2f7cf6);
  --l-line: var(--border, color-mix(in srgb, currentColor 14%, transparent));
  --l-muted: var(--muted, color-mix(in srgb, currentColor 62%, transparent));
  --l-card: var(--card, color-mix(in srgb, currentColor 4%, transparent));
  --l-warn: #e8a317;
  --l-danger: #e5484d;
  padding: 40px 0 72px;
}

.legal-head{ margin-bottom: 28px; }
.legal-head .crumbs{ font-size: 14px; color: var(--l-muted); margin-bottom: 10px; }
.legal-head .crumbs a{ color: inherit; text-decoration: none; }
.legal-head .crumbs a:hover{ color: var(--l-accent); }
.legal-head h1{ margin: 0 0 10px; line-height: 1.15; }
.legal-head .meta{ font-size: 14px; color: var(--l-muted); }

/* Переключатель документов раздела */
.legal-tabs{ display: flex; flex-wrap: wrap; gap: 8px; margin: 18px 0 0; padding: 0; list-style: none; }
.legal-tabs a{
  display: inline-block; padding: 7px 14px; border: 1px solid var(--l-line);
  border-radius: 999px; font-size: 14px; color: inherit; text-decoration: none;
}
.legal-tabs a:hover{ border-color: var(--l-accent); color: var(--l-accent); }
.legal-tabs a[aria-current="page"]{ background: var(--l-accent); border-color: var(--l-accent); color: #fff; }

/* Двухколоночный макет: оглавление + текст */
.legal-grid{ display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 40px; align-items: start; }
.legal-toc{ position: sticky; top: 90px; font-size: 14px; }
.legal-toc b{ display: block; margin-bottom: 10px; text-transform: uppercase; letter-spacing: .06em; font-size: 12px; color: var(--l-muted); }
.legal-toc ol{ margin: 0; padding: 0 0 0 18px; }
.legal-toc li{ margin: 6px 0; color: var(--l-muted); }
.legal-toc a{ color: inherit; text-decoration: none; }
.legal-toc a:hover{ color: var(--l-accent); }

.legal-body{ max-width: 780px; line-height: 1.65; font-size: 16px; }
.legal-body h2{ margin: 40px 0 12px; font-size: 1.35em; line-height: 1.25; scroll-margin-top: 90px; }
.legal-body h2:first-child{ margin-top: 0; }
.legal-body h3{ margin: 24px 0 8px; font-size: 1.08em; }
.legal-body p{ margin: 0 0 12px; }
.legal-body ul, .legal-body ol{ margin: 0 0 14px; padding-left: 22px; }
.legal-body li{ margin: 5px 0; }
.legal-body a{ color: var(--l-accent); }
.legal-body .num{ font-variant-numeric: tabular-nums; color: var(--l-muted); margin-right: 6px; }

/* Нумерованные пункты оферты */
.clause{ display: grid; grid-template-columns: 52px minmax(0,1fr); gap: 4px; margin: 0 0 10px; }
.clause > span{ color: var(--l-muted); font-variant-numeric: tabular-nums; }

/* Плашки */
.note, .alert{
  border: 1px solid var(--l-line); border-left: 4px solid var(--l-accent);
  background: var(--l-card); border-radius: 10px; padding: 14px 18px; margin: 18px 0;
}
.alert{ border-left-color: var(--l-danger); }
.alert strong:first-child, .note strong:first-child{ display: block; margin-bottom: 4px; }

/* Поля, которые владелец сайта должен заполнить */
.fill{
  background: color-mix(in srgb, var(--l-warn) 22%, transparent);
  border-bottom: 1px dashed var(--l-warn); padding: 0 3px; border-radius: 3px;
}

/* Таблицы */
.legal-table{ width: 100%; border-collapse: collapse; margin: 10px 0 18px; font-size: 15px; }
.legal-table th, .legal-table td{ border: 1px solid var(--l-line); padding: 9px 12px; text-align: left; vertical-align: top; }
.legal-table th{ background: var(--l-card); font-weight: 600; }
.table-scroll{ overflow-x: auto; }

/* FAQ — аккордеон */
.faq-group{ margin: 0 0 34px; }
.faq-group h2{ margin-bottom: 14px; }
.faq details{ border: 1px solid var(--l-line); border-radius: 12px; margin: 0 0 10px; background: var(--l-card); }
.faq summary{
  cursor: pointer; list-style: none; padding: 15px 48px 15px 18px; font-weight: 600; position: relative;
}
.faq summary::-webkit-details-marker{ display: none; }
.faq summary::after{
  content: "+"; position: absolute; right: 18px; top: 50%; transform: translateY(-50%);
  font-size: 22px; font-weight: 400; color: var(--l-accent); transition: transform .2s;
}
.faq details[open] summary::after{ transform: translateY(-50%) rotate(45deg); }
.faq details > div{ padding: 0 18px 14px; }
.faq details > div p:last-child{ margin-bottom: 0; }

.legal-cta{ margin-top: 36px; padding: 22px; border: 1px solid var(--l-line); border-radius: 14px; background: var(--l-card); }
.legal-cta p{ margin: 0 0 14px; }

/* Языковые версии документа: показывается одна, остальные скрыты (js/legal.js) */
.legal-doc[hidden]{ display: none !important; }

@media (max-width: 900px){
  .legal-grid{ grid-template-columns: 1fr; gap: 20px; }
  .legal-toc{ position: static; border: 1px solid var(--l-line); border-radius: 12px; padding: 14px 16px; }
}
@media (max-width: 560px){
  .legal{ padding: 24px 0 48px; }
  .legal-body{ font-size: 15px; }
  .clause{ grid-template-columns: 42px minmax(0,1fr); }
}
@media print{
  #site-header, #site-footer, .legal-toc, .legal-tabs, .legal-cta{ display: none !important; }
  .legal-grid{ display: block; }
  .fill{ background: none; border: 0; }
}

/* ============================================================
   Главная страница: блок «Информация» и строка условий у оплаты
   ============================================================ */
#info, #buy{
  --l-accent: var(--accent, #2f7cf6);
  --l-line: var(--border, color-mix(in srgb, currentColor 14%, transparent));
  --l-muted: var(--muted, color-mix(in srgb, currentColor 62%, transparent));
  --l-card: var(--card, color-mix(in srgb, currentColor 4%, transparent));
}
.buy-terms{ margin: 14px 0 0; font-size: 13px; line-height: 1.5; color: var(--l-muted); max-width: 560px; }
.buy-terms a{ color: var(--l-accent); }

.info-grid{ display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 14px; margin-top: 18px; }
.info-card{
  display: flex; flex-direction: column; gap: 8px; padding: 18px;
  border: 1px solid var(--l-line); border-radius: 14px; background: var(--l-card);
  color: inherit; text-decoration: none; transition: border-color .2s, transform .2s;
}
.info-card:hover{ border-color: var(--l-accent); transform: translateY(-2px); }
.info-card b{ font-size: 16px; }
.info-card b::after{ content: " →"; color: var(--l-accent); }
.info-card span{ font-size: 14px; line-height: 1.5; color: var(--l-muted); }

.risk-strip{
  margin: 22px 0 0; padding: 14px 18px; font-size: 13px; line-height: 1.55; color: var(--l-muted);
  border: 1px solid var(--l-line); border-left: 4px solid #e5484d; border-radius: 10px;
}
.risk-strip b{ color: inherit; }
.risk-strip a{ color: var(--l-accent); }

@media (max-width: 900px){ .info-grid{ grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 520px){ .info-grid{ grid-template-columns: 1fr; } }