/*!
 * SmitOnboarding — знакомство с разделом.
 * Тёмная тема через те же токены, что и остальная панель; на телефоне окно
 * выезжает снизу и занимает ширину экрана — как остальные модалки биллинга.
 */

body.sonb-open { overflow: hidden; }

.sonb-backdrop {
    position: fixed;
    inset: 0;
    /* Выше помощника (3900, на телефоне 4150): знакомство ведут поверх
       интерфейса, а не под ним. */
    z-index: 4400;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    background: rgba(15, 23, 32, .55);
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
    animation: sonbIn .3s ease;
}

/* build 3354: плавное появление снизу и такое же исчезновение вниз */
.sonb-backdrop.sonb-hide { animation: sonbOut .3s ease forwards; }
.sonb-backdrop.sonb-hide .sonb-box { animation: sonbDown .3s cubic-bezier(.4, 0, .6, 1) forwards; }
@keyframes sonbDown { to { transform: translateY(40px); opacity: 0 } }

@keyframes sonbIn { from { opacity: 0 } to { opacity: 1 } }
@keyframes sonbOut { to { opacity: 0 } }

.sonb-box {
    position: relative;
    width: 100%;
    max-width: 560px;
    max-height: calc(100dvh - 32px);
    display: flex;
    flex-direction: column;
    background: #fff;
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-lg);
    overflow: hidden;
    animation: sonbUp .5s cubic-bezier(.16, 1, .3, 1);
}

@keyframes sonbUp {
    from { transform: translateY(48px); opacity: 0 }
    to { transform: none; opacity: 1 }
}

.sonb-close {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 2;
    width: 32px;
    height: 32px;
    border: 0;
    border-radius: var(--radius-sm);
    background: transparent;
    color: #8b96a3;
    line-height: 1;
}
.sonb-close:hover { background: rgba(0, 0, 0, .06); color: #55606d; }

.sonb-head {
    padding: 16px 48px 0 20px;
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .4px;
    text-transform: uppercase;
    color: var(--smit-green, #43b77a);
}

.sonb-body {
    padding: 14px 20px 6px;
    overflow-y: auto;
}

/* Шаг */
.sonb-step { animation: sonbFade .22s ease; }
@keyframes sonbFade { from { opacity: 0; transform: translateX(8px) } to { opacity: 1; transform: none } }

.sonb-media {
    margin: 0 0 14px;
    border-radius: var(--radius-sm);
    overflow: hidden;
    background: linear-gradient(135deg, #f4f7fa, #eaf3ee);
}
.sonb-media img { display: block; width: 100%; height: auto; }

/* Ролик: та же рамка, что и у картинки; чёрный фон, пока кадр не загружен */
.sonb-media-video { background: #0d1116; }
.sonb-media-video video { display: block; width: 100%; height: auto; max-height: 42vh; }

.sonb-media-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 108px;
    font-size: 40px;
    color: var(--smit-green, #43b77a);
}

.sonb-title {
    margin: 0 0 6px;
    font-size: 1.12rem;
    font-weight: 700;
    color: #1f2933;
}
.sonb-title:focus { outline: none; }

.sonb-text {
    margin: 0;
    font-size: .9rem;
    line-height: 1.5;
    color: #55606d;
}

.sonb-list {
    margin: 10px 0 0;
    padding-left: 18px;
    font-size: .875rem;
    line-height: 1.55;
    color: #55606d;
}
.sonb-list li { margin-bottom: 4px; }

.sonb-cta { margin-top: 12px; }

/* Подвал: пропустить · точки · навигация */
.sonb-foot {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px 14px;
    border-top: 1px solid #eef1f5;
}

.sonb-skip {
    padding: 0;
    font-size: .82rem;
    color: #8b96a3;
    text-decoration: none;
}
.sonb-skip:hover { color: #55606d; }

.sonb-dots {
    display: flex;
    gap: 6px;
    margin: 0 auto;
}

.sonb-dot {
    width: 8px;
    height: 8px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: #d5dbe2;
    transition: width .2s ease, background .2s ease;
}
.sonb-dot.on {
    width: 20px;
    border-radius: var(--radius-sm);
    background: var(--smit-green, #43b77a);
}

.sonb-nav { display: flex; gap: 8px; }

/* Слот кнопки шага: на большом экране кнопка остаётся в теле шага */
.sonb-cta-slot { display: none; }

/* Тёмная тема */
/* В тёмной теме окно сливалось с затемнением — тонкая зелёная рамка
   возвращает ему край. */
[data-bs-theme="dark"] .sonb-box,
body.dark-theme .sonb-box {
    background: #040e1a;
    border: 1px solid #7fd6a838;
}
[data-bs-theme="dark"] .sonb-title,
body.dark-theme .sonb-title { color: #e8edf2; }
[data-bs-theme="dark"] .sonb-text,
[data-bs-theme="dark"] .sonb-list,
body.dark-theme .sonb-text,
body.dark-theme .sonb-list { color: #9aa6b2; }
[data-bs-theme="dark"] .sonb-foot,
body.dark-theme .sonb-foot { border-top-color: #2a2f37; }
[data-bs-theme="dark"] .sonb-media,
body.dark-theme .sonb-media { background: linear-gradient(135deg, #0b1622, #0d1f19); }
[data-bs-theme="dark"] .sonb-dot,
body.dark-theme .sonb-dot { background: #39414b; }
[data-bs-theme="dark"] .sonb-close:hover,
body.dark-theme .sonb-close:hover { background: rgba(255, 255, 255, .08); color: #cfd6de; }

/* Телефон: окно снизу на всю ширину — как остальные модалки панели */
@media (max-width: 575.98px) {
    .sonb-backdrop { align-items: flex-end; padding: 0; }
    .sonb-box {
        max-width: 100%;
        max-height: 92dvh;
        border-radius: var(--radius-sm) var(--radius-sm) 0 0;
        animation: sonbSheet .5s cubic-bezier(.16, 1, .3, 1);
    }
    @keyframes sonbSheet { from { transform: translateY(100%) } to { transform: none } }
    .sonb-backdrop.sonb-hide .sonb-box { animation: sonbSheetOut .3s cubic-bezier(.4, 0, .6, 1) forwards; }
    @keyframes sonbSheetOut { to { transform: translateY(100%) } }

    /* Подвал в одну строку: стрелки по краям, кнопка шага между ними.
       Раньше «Назад» и «Далее» занимали всю ширину, подвал разъезжался на три
       строки, а кнопка шага уходила вверх и терялась. */
    .sonb-foot {
        flex-wrap: nowrap;
        gap: 8px;
        padding: 10px 12px 12px;
    }
    .sonb-skip { display: none; }              /* закрыть можно крестиком */
    .sonb-nav { display: contents; }
    .sonb-prev { order: 1; }
    .sonb-next { order: 3; }
    .sonb-prev .sonb-btn-txt,
    .sonb-next .sonb-btn-txt { display: none; }  /* остаются стрелки */
    .sonb-prev, .sonb-next {
        width: 40px;
        min-width: 40px;
        height: 40px;
        padding: 0;
        flex: 0 0 40px;
    }
    .sonb-dots { order: 2; flex: 1 1 auto; justify-content: center; margin: 0; }

    /* Середина строки: кнопка шага, если она есть, иначе точки.
       Выравнивается слот — кнопка внутри него только сжимается по тексту. */
    .sonb-step .sonb-cta { display: none; }
    .sonb-cta-slot {
        order: 2;
        display: flex;
        flex: 1 1 auto;
        min-width: 0;
        justify-content: center;
    }
    .sonb-cta-slot:empty { display: none; }
    .sonb-cta-slot .sonb-cta {
        display: inline-flex;
        align-items: center;
        height: 40px;                 /* высота как у стрелок; без вертикального паддинга */
        max-width: 100%;
        margin: 0;
        padding: 0 .8rem;
        font-size: .8rem;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
    }
    .sonb-foot.has-cta .sonb-dots { display: none; }
}

@media (prefers-reduced-motion: reduce) {
    .sonb-backdrop,
    .sonb-box,
    .sonb-backdrop.sonb-hide .sonb-box,
    .sonb-step { animation: none !important; }
    .sonb-dot { transition: none !important; }
}

/* Живая обложка шага: ведёт себя как картинка, только двигается */
.sonb-media-cover video {
    display: block;
    width: 100%;
    height: auto;
    max-height: 38vh;
    object-fit: cover;
}
@media (prefers-reduced-motion: reduce) {
    /* Кадр вместо движения: постер остаётся видимым */
    .sonb-media-cover video { display: none; }
    .sonb-media-cover { min-height: 120px; background-size: cover; }
}