/* =========================================================
   BANK-NEVA - модальное окно МФО
   Все стили имеют префикс bn-mfo
   ========================================================= */


/* ---------------------------------------------------------
   Кнопки в карточке МФО
   --------------------------------------------------------- */

.bn-mfo-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: auto;
}

.bn-mfo-actions > .primary-btn {
    flex: 1;
    min-width: 0;
    min-height: 46px;
    margin-top: 0;
}

.bn-mfo-info {
    flex: 0 0 46px;
    width: 46px;
    height: 46px;

    border: 1px solid #c8dfe0;
    border-radius: 50%;

    background: #f0faf7;
    color: #147c73;

    font: 26px/1 system-ui, sans-serif;

    cursor: pointer;
}

.bn-mfo-info:hover {
    background: #daf4ec;
}

.bn-mfo-info[hidden],
.bn-mfo-dialog [hidden] {
    display: none !important;
}


/* ---------------------------------------------------------
   Основное модальное окно
   --------------------------------------------------------- */

.bn-mfo-dialog {
    box-sizing: border-box;

    width: 560px;
    max-width: calc(100% - 32px);

    max-height: calc(100vh - 40px);
    max-height: calc(100dvh - 40px);

    margin: auto;
    padding: 0;

    border: 0;
    border-radius: 24px;

    background: #fff;
    color: #1f2933;

    box-shadow: 0 24px 80px #14243840;

    overflow: hidden;

    font: 16px/1.5 system-ui, -apple-system, "Segoe UI", sans-serif;
}

.bn-mfo-dialog::backdrop {
    background: rgba(24, 36, 49, 0.56);
}

.bn-mfo-dialog *,
.bn-mfo-dialog *::before,
.bn-mfo-dialog *::after {
    box-sizing: border-box;
}


/* ---------------------------------------------------------
   Внутренняя оболочка
   --------------------------------------------------------- */

.bn-mfo-shell {
    position: relative;

    display: flex;
    flex-direction: column;

    max-height: calc(100vh - 40px);
    max-height: calc(100dvh - 40px);
}

.bn-mfo-scroll {
    min-height: 0;

    padding: 34px 28px 12px;

    overflow-y: auto;
    overscroll-behavior: contain;
}


/* ---------------------------------------------------------
   Кнопка закрытия
   --------------------------------------------------------- */

.bn-mfo-close {
    position: absolute;
    z-index: 5;

    top: 12px;
    right: 12px;

    width: 32px;
    height: 32px;

    display: grid;
    place-items: center;

    padding: 0;

    border: 0;
    border-radius: 50%;

    background: #fff;
    color: #657386;

    font: 22px/1 system-ui, sans-serif;

    cursor: pointer;

    box-shadow: none;

    -webkit-tap-highlight-color: transparent;
}


.bn-mfo-close:focus,
.bn-mfo-close:focus-visible,
.bn-mfo-close:active {
    outline: none !important;
    box-shadow: none !important;
}

/* ---------------------------------------------------------
   Шапка МФО
   --------------------------------------------------------- */

.bn-mfo-header {
    text-align: center;
}


/* Область логотипа */

.bn-mfo-logo {
    width: 220px;
    max-width: 100%;
    height: 80px;

    margin: 0 auto 8px;

    display: flex;
    align-items: center;
    justify-content: center;

    background: #fff;
}


/* Сам логотип сохраняет оригинальные пропорции */

.bn-mfo-logo img {
    display: block;

    width: auto;
    height: auto;

    max-width: 100%;
    max-height: 100%;

    object-fit: contain;
    object-position: center;
}


/* Название */

.bn-mfo-header h2 {
    margin: 0 0 6px;

    font-size: 19px;
    font-weight: 600;
    line-height: 1.35;

    overflow-wrap: anywhere;
}


/* Номер в реестре */

.bn-mfo-registry {
    margin: 0;

    font-size: 13px;
    color: #627087;

    overflow-wrap: anywhere;
}


/* ---------------------------------------------------------
   Рейтинг
   --------------------------------------------------------- */

.bn-mfo-rating {
    display: flex;
    align-items: center;
    justify-content: center;

    gap: 14px;

    margin: 20px 0 4px;

    text-align: left;
}


/* Круг рейтинга */

.bn-mfo-ring {
    --score: 0%;

    flex: 0 0 60px;

    width: 60px;
    height: 60px;

    padding: 5px;

    border-radius: 50%;

    background:
        conic-gradient(
            #12b886 var(--score),
            #deeee9 0
        );
}

.bn-mfo-ring span {
    display: grid;
    place-items: center;

    width: 100%;
    height: 100%;

    border-radius: 50%;

    background: #fff;
    color: #162333;

    font-size: 23px;
    font-weight: 700;
}


/* Источник рейтинга */

.bn-mfo-rating-source {
    margin: 0;

    font-size: 15px;
    font-weight: 600;
}


/* Ссылка "Как рассчитывается рейтинг" */

.bn-mfo-rating-help {
    display: inline-block;

    max-width: 330px;

    margin-top: 4px;

    color: #1971c2;

    font-size: 13px;
    line-height: 1.4;

    text-decoration: underline;
    text-underline-offset: 2px;

    cursor: pointer;
}

.bn-mfo-rating-help:hover {
    color: #145da0;
}


/* ---------------------------------------------------------
   Вкладки
   --------------------------------------------------------- */

.bn-mfo-tabs {
    display: flex;

    gap: 4px;

    padding: 4px;
    margin: 22px 0 12px;

    background: #f0f4f8;

    border-radius: 15px;
}

.bn-mfo-tabs button {
    width: 50%;
    min-height: 44px;

    padding: 10px 8px;

    border: 0;
    border-radius: 12px;

    background: transparent;
    color: #627087;

    font-family: inherit;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.3;

    cursor: pointer;
}

.bn-mfo-tabs button[aria-selected="true"] {
    background: #dcf5ee;
    color: #087d69;
}


/* ---------------------------------------------------------
   Таблица условий / требований
   --------------------------------------------------------- */

.bn-mfo-rows {
    margin: 0;
}

.bn-mfo-rows > div {
    display: grid;

    grid-template-columns:
        minmax(0, 1fr)
        minmax(0, 1.2fr);

    gap: 16px;

    padding: 13px 0;

    border-bottom: 1px solid #e5ebf2;

    font-size: 15px;
}

.bn-mfo-rows > div:last-child {
    border-bottom: 0;
}

.bn-mfo-rows dt {
    color: #627087;
}

.bn-mfo-rows dd {
    margin: 0;

    color: #162333;
}

.bn-mfo-rows dt,
.bn-mfo-rows dd {
    min-width: 0;

    overflow-wrap: anywhere;
}


/* ---------------------------------------------------------
   Списки внутри значений

   Например:
   • Банковской картой
   • В личном кабинете
   --------------------------------------------------------- */

.bn-mfo-value-list {
    margin: 0;
    padding: 0 0 0 18px;
}

.bn-mfo-value-list li {
    margin: 0 0 4px;
    padding: 0;

    line-height: 1.45;
}

.bn-mfo-value-list li:last-child {
    margin-bottom: 0;
}


/* ---------------------------------------------------------
   Нижняя часть модального окна
   --------------------------------------------------------- */

.bn-mfo-footer {
    flex-shrink: 0;

    padding: 20px 24px 18px;

    border-top: 1px solid #e5ebf2;

    background: #fff;
}


/* Кнопка перехода */

.bn-mfo-cta {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 100%;
    min-height: 54px;

    padding: 12px 16px;

    border-radius: 999px;

    background:
        var(
            --primary-gradient,
            linear-gradient(135deg, #12b886, #1971c2)
        );

    color: #fff;

    font-size: 16px;
    font-weight: 700;

    text-align: center;
    text-decoration: none;
}

.bn-mfo-cta:hover {
    color: #fff;

    filter: brightness(1.04);

    text-decoration: none;
}

.bn-mfo-cta::before,
.bn-mfo-cta::after {
    content: none !important;
}


/* Текст под кнопкой */

.bn-mfo-footer p {
    margin: 10px 0 0;

    color: #627087;

    font-size: 13px;

    text-align: center;
}


/* ---------------------------------------------------------
   Фокус элементов
   --------------------------------------------------------- */

.bn-mfo-info:focus-visible {
    outline: 3px solid #1971c2;
    outline-offset: 2px;
}


/* Крестик закрытия без синей рамки на iOS */

.bn-mfo-close,
.bn-mfo-close:focus,
.bn-mfo-close:focus-visible,
.bn-mfo-close:active {
    outline: none !important;
    box-shadow: none !important;
}


/* =========================================================
   Мобильная версия
   ========================================================= */

@media (max-width:600px) {

    .bn-mfo-dialog {

        width: calc(100% - 32px);

        max-width: 560px;

        max-height: calc(100dvh - 64px);

        margin: auto;

        border-radius: 24px;

    }


    .bn-mfo-shell {

        max-height: calc(100dvh - 64px);

    }


    .bn-mfo-scroll {

        padding: 34px 16px 12px;

    }

}

    /* Логотип */

    .bn-mfo-logo {
        width: 200px;
        height: 70px;
    }


    /* Нижняя область */

    .bn-mfo-footer {
        padding:
            16px
            18px
            max(16px, env(safe-area-inset-bottom));
    }


    /* Таблица */

    .bn-mfo-rows > div {
        gap: 12px;

        font-size: 14px;
    }
}