/* BB-коды в текстах сайта (format_comment в include/functions_global.php): .bb-* и спойлер .sp-*.
   Белая и чёрно-синяя тема — через токены --tp-*. Подключается в themes/BTPro_v24/head_nav.php после markdown.css.
   :root перед селекторами спойлера — чтобы перекрыть старые правила newii.css и тёмные из theme.css */

/* ── цитата [quote] / [quote=Имя] ── */
.bb-quote {
    margin: .55em 0;
    padding: 0;
    border: 1px solid var(--tp-border, #e3e8ef);
    border-left: 3px solid var(--tp-accent, #2563eb);
    border-radius: 6px 10px 10px 6px;
    background: var(--tp-surface-2, #f6f8fb);
    color: var(--tp-text, #0f172a);
    font-size: inherit;
    overflow: hidden;
}
.bb-quote__head {
    display: flex;
    align-items: center;
    gap: .45em;
    padding: .4em .85em .1em;
    color: var(--tp-accent, #2563eb);
    font-size: .85em;
    font-weight: 700;
}
.bb-quote__head i { font-size: .85em; opacity: .75; }
.bb-quote__body { padding: .15em .85em .55em; overflow-wrap: anywhere; }
.bb-quote .bb-quote { background: var(--tp-surface, #fff); }

/* ── спойлер [spoiler] ── */
:root .sp-block {
    margin: .55em 0;
    border: 1px solid var(--tp-border, #e3e8ef);
    border-radius: 10px;
    background: var(--tp-surface, #fff);
    box-shadow: none;
    overflow: hidden;
    transition: border-color .15s, box-shadow .15s;
}
:root .sp-block:hover { border-color: var(--tp-border-strong, #cfd7e3); box-shadow: none; }
:root .sp-block.sp-open { border-color: var(--tp-border-strong, #cfd7e3); box-shadow: 0 4px 16px rgba(15, 23, 42, .06); }
:root .sp-toggle {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    margin: 0;
    padding: 9px 12px;
    border: 0;
    border-radius: 0;
    background: var(--tp-surface-2, #f6f8fb);
    box-shadow: none;
    color: var(--tp-text, #0f172a);
    font-family: inherit;
    font-size: .9em;
    font-weight: 600;
    line-height: 1.35;
    text-align: left;
    cursor: pointer;
    transition: background .15s;
}
:root .sp-toggle:hover, :root .sp-block.sp-open .sp-toggle { background: var(--tp-surface-3, #edf1f7); }
:root .sp-toggle:focus-visible { outline: 2px solid var(--tp-accent, #2563eb); outline-offset: -2px; }
:root .sp-arrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 22px;
    height: 22px;
    border-radius: 6px;
    background: var(--tp-surface, #fff);
    color: var(--tp-muted, #64748b);
    font-size: .62em;
    transition: transform .2s, background .15s, color .15s;
}
:root .sp-block.sp-open .sp-arrow { transform: rotate(90deg); background: var(--tp-accent, #2563eb); color: #fff; }
:root .sp-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
:root .sp-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    flex: none;
    width: auto;
    height: 20px;
    padding: 0 7px;
    border-radius: 999px;
    background: var(--tp-surface, #fff);
    color: var(--tp-muted, #64748b);
    font-size: .68em;
    font-weight: 600;
}
:root .sp-badge::after { content: "Скрыто"; }
:root .sp-block.sp-open .sp-badge { background: var(--tp-accent-soft, #e8f0ff); color: var(--tp-accent, #2563eb); }
:root .sp-block.sp-open .sp-badge::after { content: "Открыто"; }
:root .sp-block.sp-open .sp-badge .fa-lock { display: none; }
:root .sp-content {
    padding: 12px 14px 4px;
    border: 0;
    border-top: 1px solid var(--tp-border, #e3e8ef);
    background: var(--tp-surface, #fff);
    color: var(--tp-text, #0f172a);
    font-size: inherit;
    line-height: inherit;
    overflow-wrap: anywhere;
    animation: bb-sp-in .18s ease;
}
:root .sp-close {
    display: flex;
    align-items: center;
    width: 100%;
    margin: 10px 0 0;
    padding: 7px 0 9px;
    border: 0;
    border-top: 1px dashed var(--tp-border, #e3e8ef);
    background: none;
    color: var(--tp-muted, #64748b);
    font-size: .8em;
    font-weight: 500;
    text-align: left;
    cursor: pointer;
}
:root .sp-close:hover { color: var(--tp-accent, #2563eb); }
:root .sp-block .sp-block { margin: .45em 0; border-radius: 8px; }
:root .sp-block .sp-block .sp-toggle { padding: 7px 10px; font-size: .86em; }
@keyframes bb-sp-in { from { opacity: 0; transform: translateY(-4px); } }

/* ── рамка [legend] / [legend=Заголовок] ── */
.bb-box {
    margin: .6em 0;
    border: 1px solid var(--tp-border-strong, #cfd7e3);
    border-radius: 10px;
    background: var(--tp-surface, #fff);
    overflow: hidden;
}
.bb-box__title {
    padding: .45em .85em;
    border-bottom: 1px solid var(--tp-border, #e3e8ef);
    background: var(--tp-surface-2, #f6f8fb);
    color: var(--tp-text, #0f172a);
    font-size: .9em;
    font-weight: 700;
}
.bb-box__body { padding: .6em .85em; overflow: auto; overflow-wrap: anywhere; }

/* ── исходный BB-код [bb] ── */
.bb-raw {
    margin: .55em 0;
    border: 1px dashed var(--tp-border-strong, #cfd7e3);
    border-radius: 10px;
    background: var(--tp-surface-2, #f6f8fb);
    overflow: hidden;
}
.bb-raw__head {
    display: flex;
    align-items: center;
    gap: .45em;
    padding: .35em .85em;
    border-bottom: 1px dashed var(--tp-border-strong, #cfd7e3);
    color: var(--tp-muted, #64748b);
    font-size: .8em;
    font-weight: 600;
}
.bb-raw__body { padding: .55em .85em; font: .88em/1.55 SFMono-Regular, Consolas, "Liberation Mono", Menlo, monospace; overflow-wrap: anywhere; }

/* ── скрытый текст для комментаторов [hide] ── */
.bb-hide { margin: .55em 0; border-radius: 10px; overflow: hidden; }
.bb-hide--open { border: 1px solid #bbf7d0; background: var(--tp-surface, #fff); }
.bb-hide__head { display: flex; align-items: center; gap: .5em; padding: .45em .85em; background: #f0fdf4; color: #15803d; font-size: .85em; font-weight: 600; }
.bb-hide__body { padding: .6em .85em; }
.bb-hide--locked {
    display: flex;
    align-items: center;
    gap: .8em;
    padding: .8em 1em;
    border: 1px dashed #fca5a5;
    background: #fef2f2;
    color: #991b1b;
}
.bb-hide--locked > i { font-size: 1.3em; opacity: .8; }
.bb-hide--locked b { display: block; }
.bb-hide--locked span { display: block; font-size: .88em; opacity: .85; }
:root[data-tp-theme="dark"] .bb-hide--open { border-color: rgba(74, 222, 128, .3); }
:root[data-tp-theme="dark"] .bb-hide__head { background: rgba(74, 222, 128, .1); color: #4ade80; }
:root[data-tp-theme="dark"] .bb-hide--locked { border-color: rgba(248, 113, 113, .4); background: rgba(248, 113, 113, .08); color: #fca5a5; }

/* ── мелочи ── */
h3.bb-h { margin: .6em 0 .35em; color: var(--tp-text, #0f172a); font-size: 1.2em; font-weight: 700; line-height: 1.3; }
hr.bb-hr { height: 0; margin: .8em 0; border: 0; border-top: 1px solid var(--tp-border-strong, #cfd7e3); opacity: 1; }
li.bb-li { display: list-item; margin: .15em 0 .15em 1.3em; padding: 0; list-style: disc outside; background: none; float: none; }
mark.bb-mark { padding: 0 .2em; border-radius: 3px; background: #fde68a; color: #1f2937; font-weight: 600; }
:root[data-tp-theme="dark"] mark.bb-mark { background: rgba(250, 204, 21, .32); color: inherit; }
.bb-me {
    display: inline-block;
    padding: 0 .45em;
    border-radius: 999px;
    background: rgba(220, 38, 38, .1);
    color: #dc2626;
    font-size: .78em;
    font-weight: 700;
    letter-spacing: .04em;
    vertical-align: .1em;
}
.bb-cut {
    position: relative;
    margin: 1em 0;
    border-top: 2px dashed var(--tp-border-strong, #cfd7e3);
    text-align: center;
    line-height: 0;
}
.bb-cut i {
    position: relative;
    top: -.05em;
    padding: 0 .6em;
    background: var(--tp-surface, #fff);
    color: var(--tp-muted, #64748b);
    font-size: 1.05em;
    line-height: 0;
}
.bb-callout { margin: .5em 0; padding: .55em .85em; border-radius: 10px; font-weight: 600; }
pre.bb-pre {
    max-height: 600px;
    margin: .5em 0;
    padding: .7em .9em;
    overflow: auto;
    border: 1px solid var(--tp-border, #e3e8ef);
    border-radius: 10px;
    background: var(--tp-surface-2, #f6f8fb);
    color: var(--tp-text, #0f172a);
    font: .86em/1.55 SFMono-Regular, Consolas, "Liberation Mono", Menlo, monospace;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}
.bb-php pre { white-space: pre; }
.bb-php pre code { background: none; }
:root[data-tp-theme="dark"] .bb-php pre { background: #f6f8fb; border-radius: 0; } /* цвета подсветки PHP рассчитаны на светлый фон */
.bb-marquee { display: block; }

/* ── видео и аудио ── */
.bb-video { position: relative; width: 100%; max-width: 640px; margin: .5em 0; aspect-ratio: 16 / 9; border-radius: 10px; overflow: hidden; background: #000; }
.bb-video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
video.bb-video-file { display: block; max-width: 100%; height: auto; margin: .5em 0; border-radius: 10px; background: #000; }
audio.bb-audio { display: block; width: 100%; max-width: 420px; margin: .4em 0; }