/* ============================================================================
   section-help.css — пояснения к разделам (section-help.js).
   ============================================================================ */
/* плашка с «i» у заголовка раздела — теперь кнопка */
.mx-help-trigger { cursor: pointer; transition: border-color .15s, color .15s, background .15s; }
.mx-help-trigger::after { content: '?'; display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 16px; margin-left: 7px; flex-shrink: 0; border-radius: 50%; background: var(--mx-gold-wash, rgba(212,175,55,.09)); box-shadow: inset 0 0 0 1px var(--mx-gold-line, rgba(212,175,55,.38)); color: var(--gold, #d4af37); font: 700 10px var(--mx-f-ui, sans-serif); }
.mx-help-trigger:hover, .mx-help-trigger.mx-help-on { border-color: var(--mx-gold-line, rgba(212,175,55,.38)); color: var(--text-color); }
.mx-help-trigger:focus-visible, .mx-help-btn:focus-visible { outline: 2px solid var(--gold, #d4af37); outline-offset: 2px; }
/* кнопка «?» у панелей без плашки */
.mx-help-btn { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; flex-shrink: 0; margin-left: 8px; padding: 0; border: 0; border-radius: 50%; background: var(--mx-gold-wash, rgba(212,175,55,.09)); box-shadow: inset 0 0 0 1px var(--mx-gold-line, rgba(212,175,55,.38)); color: var(--gold, #d4af37); font: 700 11px var(--mx-f-ui, sans-serif); cursor: pointer; transition: background .15s; }
.mx-help-btn:hover, .mx-help-btn.mx-help-on { background: var(--gold, #d4af37); color: #141413; }

/* окно пояснения */
.mx-help-pop { position: absolute; z-index: 10010; width: min(440px, calc(100vw - 24px)); max-height: 70vh; overflow-y: auto; padding: 14px 18px 16px; border: 1px solid var(--mx-gold-line, rgba(212,175,55,.38)); border-radius: 14px; background: #121211; box-shadow: 0 22px 50px rgba(0,0,0,.55); color: #d9d7cf; font-size: 13px; line-height: 1.55; animation: mxHelpIn .16s ease-out; }
.mx-help-pop[hidden] { display: none; }
@keyframes mxHelpIn { from { opacity: 0; transform: translateY(-4px); } }
.mx-help-h { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 4px; }
.mx-help-h b { font: 600 15px var(--mx-f-display, sans-serif); color: #fff; }
.mx-help-x { width: 26px; height: 26px; flex-shrink: 0; border: 0; border-radius: 50%; background: rgba(255,255,255,.07); color: #bbb; font-size: 17px; line-height: 1; cursor: pointer; }
.mx-help-x:hover { background: rgba(255,255,255,.14); color: #fff; }
.mx-help-s { padding-top: 10px; }
.mx-help-s small { display: block; margin-bottom: 3px; font-size: 10.5px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--gold, #d4af37); }
.mx-help-s p { margin: 0; }
.mx-help-s b { color: #fff; }
.mx-help-s .up { color: #4ade80; } .mx-help-s .down { color: #f87171; }
/* телефон — лист снизу */
.mx-help-pop.sheet { position: fixed; left: 0 !important; right: 0; top: auto !important; bottom: 0; width: auto; max-height: 75vh; border-radius: 18px 18px 0 0; animation: mxHelpUp .2s ease-out; box-shadow: 0 -12px 40px rgba(0,0,0,.6); }
@keyframes mxHelpUp { from { transform: translateY(30px); opacity: 0; } }

body.light .mx-help-pop { background: #fff; color: #3a3a3a; box-shadow: 0 22px 50px rgba(0,0,0,.18); }
body.light .mx-help-h b, body.light .mx-help-s b { color: #141414; }
body.light .mx-help-x { background: rgba(0,0,0,.06); color: #555; }
body.light .mx-help-s small, body.light .mx-help-trigger::after, body.light .mx-help-btn { color: #8a6a10; }
body.light .mx-help-btn:hover, body.light .mx-help-btn.mx-help-on { color: #fff; background: #b8902c; }
body.light .mx-help-s .up { color: #15803d; } body.light .mx-help-s .down { color: #b91c1c; }