/*
 * Локальная копия интерфейса «Долями».
 * Размеры намеренно совпадают с реальным виджетом в CSS-пикселях: на Retina
 * скриншот выглядит вдвое крупнее, поэтому здесь нет искусственного увеличения.
 */
.ap-dolyame,
.ap-dolyame *,
.ap-dolyame::before,
.ap-dolyame::after,
.ap-dolyame *::before,
.ap-dolyame *::after {
    box-sizing: border-box;
    font-family: Roboto, Montserrat, Arial, sans-serif, system-ui;
    font-weight: 400;
    margin: 0;
    outline: 0 !important;
    padding: 0;
    text-transform: none;
}

.ap-dolyame { margin: 30px 0; }
.ap-dolyame[hidden] { display: none !important; }

.ap-dolyame__trigger {
    align-items: center;
    appearance: none;
    background: #fff;
    border: 0;
    border-radius: 8px;
    color: #000;
    cursor: pointer;
    display: flex;
    font-size: 13px;
    gap: 10px;
    min-height: fit-content;
    padding: 12px;
    text-align: left;
    transition: all .2s ease;
    width: fit-content;
}

.ap-dolyame__logo {
    align-items: center;
    background: #000;
    border-radius: 2px;
    display: flex;
    flex: 0 0 auto;
    height: 20px;
    justify-content: center;
    overflow: hidden;
    width: 64px;
}

.ap-dolyame__logo img { display: block; filter: invert(1); height: 20px; width: 64px; }
.ap-dolyame__trigger-text { flex-grow: 1; line-height: 20px; white-space: nowrap; }
.ap-dolyame__arrow { color: #9299a2; fill: currentColor; flex: 0 0 auto; height: 16px; transition: fill .2s ease; width: 16px; }
.ap-dolyame__trigger:hover .ap-dolyame__arrow { color: #000; }

.ap-dolyame-modal,
.ap-dolyame-modal *,
.ap-dolyame-modal::before,
.ap-dolyame-modal::after,
.ap-dolyame-modal *::before,
.ap-dolyame-modal *::after {
    box-sizing: border-box;
    font-family: Roboto, Montserrat, Arial, sans-serif, system-ui;
    font-weight: 400;
    margin: 0;
    outline: 0 !important;
    padding: 0;
    text-transform: none;
}

.ap-dolyame-modal[hidden] { display: none; }
.ap-dolyame-modal { color: #000; inset: 0; position: fixed; z-index: 100000000; }
.ap-dolyame-modal__backdrop { background: rgba(0, 0, 0, .6); inset: 0; position: absolute; }

.ap-dolyame-modal__dialog {
    background: #fff;
    border-radius: 24px;
    box-shadow: 0 8px 16px -10px rgba(0, 0, 0, .05), 0 30px 30px -10px rgba(0, 0, 0, .04), 0 30px 40px -10px rgba(0, 0, 0, .03);
    color: #000;
    display: flex;
    flex-direction: column;
    font-size: 14px;
    gap: 20px;
    left: 50%;
    max-height: calc(100vh - 32px);
    overflow: auto;
    padding: 24px;
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 600px;
    line-height: 22px;
}

.ap-dolyame-modal__close {
    align-items: center;
    appearance: none;
    background: hsla(0, 1%, 55%, .2);
    border: 0;
    border-radius: 50%;
    color: #000;
    cursor: pointer;
    display: flex;
    height: 24px;
    justify-content: center;
    padding: 0;
    position: absolute;
    right: 12px;
    top: 12px;
    width: 24px;
}

.ap-dolyame-modal__close { box-sizing: border-box; flex: 0 0 24px; line-height: 0; overflow: hidden; }
.ap-dolyame-modal__close svg { display: block !important; flex: none !important; height: 16px !important; max-height: 16px !important; max-width: 16px !important; width: 16px !important; }
.ap-dolyame-modal__logo { height: 26.875px; width: 86px; }
.ap-dolyame-modal__logo img { height: 26.875px; width: 86px; }

.ap-dolyame-modal__header { display: flex; flex-direction: column; gap: 8px; }
.ap-dolyame-modal__header h2 { font-size: 1.72em; font-weight: 700; line-height: 1.33em; }
.ap-dolyame-modal__header p { color: rgba(0, 0, 0, .5); font-size: 14px; line-height: 22px; }

.ap-dolyame-modal__features { display: flex; gap: 12px; }
.ap-dolyame-modal__feature { align-items: center; display: flex; flex-basis: 100%; flex-wrap: nowrap; gap: 12px; font-size: 14px; line-height: 22px; }
.ap-dolyame-modal__feature-icon { align-items: center; background: hsla(0, 1%, 55%, .1); border-radius: 4px; display: flex; flex: 0 0 auto; height: 32px; justify-content: center; width: 32px; }
.ap-dolyame-modal__feature-icon svg { height: 24px; width: 24px; }

.ap-dolyame-modal__tabs { background: #f6f7f8; border-radius: 10px; display: grid; gap: 5px; grid-template-columns: repeat(4, 1fr); padding: 5px !important; width: 100%; }
.ap-dolyame-modal__tabs button { appearance: none; background: transparent; border: 0; border-radius: 12px; color: #000; cursor: pointer; font: 400 15px/1 Roboto, Montserrat, Arial, sans-serif; height: 40px; padding: 0; transition: background-color .3s ease-in-out, box-shadow .3s ease-in-out; width: 100%; }
.ap-dolyame-modal__tabs button.is-active,
.ap-dolyame-modal__tabs button:hover { background: #fff; box-shadow: 0 5.04px 15.12px -2.52px rgba(0, 0, 0, .08); }

.ap-dolyame-modal__schedule { background: #f6f7f8; border-radius: 10px; color: rgba(0, 0, 0, .4); display: flex; flex-direction: column; font-size: 12px; gap: 8px; line-height: 1.33em; padding: 12px !important; width: 100%; }
.ap-dolyame-modal__four-plan { display: flex; flex-direction: column; gap: 8px; }
.ap-dolyame-modal__payments { display: flex; gap: 6px; justify-content: space-between; list-style: none; }
.ap-dolyame-modal__payment { flex: 0 1 25%; margin: 0; min-width: 0; padding: 0; }
.ap-dolyame-modal__payment:first-child { color: #000; }
.ap-dolyame-modal__payment-date { font-size: 1em; margin-bottom: 4px; white-space: nowrap; }
.ap-dolyame-modal__payment strong { display: block; font-size: 1.25em; font-weight: 500; line-height: 1.6em; white-space: nowrap; }
.ap-dolyame-modal__payment i { background: rgba(0, 0, 0, .1); border-radius: 6px; display: block; height: 6px; margin-top: 12px !important; width: 100%; }
.ap-dolyame-modal__payment i.is-active { background: #4288f9; }
.ap-dolyame-modal__four-plan p,
.ap-dolyame-modal__monthly-plan p { color: rgba(0, 0, 0, .4); font-size: 1em; line-height: 1.33em; }

.ap-dolyame-modal__monthly-plan { display: flex; flex-direction: column; gap: 8px; }
.ap-dolyame-modal__monthly-plan > div { display: flex; gap: 6px; justify-content: space-between; }
.ap-dolyame-modal__monthly-plan > div > div { display: flex; flex-direction: column; width: 100%; }
.ap-dolyame-modal__monthly-plan > div > div:first-child { color: #000; width: 69px; }
.ap-dolyame-modal__monthly-plan span { font-size: 1em; margin-bottom: 4px; }
.ap-dolyame-modal__monthly-plan strong { font-size: 1.25em; font-weight: 500; line-height: 1.6em; }
.ap-dolyame-modal__monthly-plan > div > div:first-child strong::after { background: #4288f9; border-radius: 6px; content: ""; display: block; height: 6px; margin-top: 12px !important; width: 100%; }
.ap-dolyame-modal__monthly-plan > div > div:last-child strong::after { background: repeating-linear-gradient(to right, rgba(0, 0, 0, .1), rgba(0, 0, 0, .1) calc((100% - 6px * (var(--ap-dolyame-segments) - 1)) / var(--ap-dolyame-segments)), transparent calc((100% - 6px * (var(--ap-dolyame-segments) - 1)) / var(--ap-dolyame-segments)), transparent calc((100% - 6px * (var(--ap-dolyame-segments) - 1)) / var(--ap-dolyame-segments) + 6px)); border-radius: 6px; content: ""; display: block; height: 6px; margin-top: 12px !important; width: 100%; }
.ap-dolyame-modal__monthly-plan--3 { --ap-dolyame-segments: 3; }
.ap-dolyame-modal__monthly-plan--6 { --ap-dolyame-segments: 6; }
.ap-dolyame-modal__monthly-plan--10 { --ap-dolyame-segments: 10; }

.ap-dolyame-modal__steps { color: rgba(0, 0, 0, .6); display: none; list-style: none; }
html.ap-dolyame-modal-open { overflow: hidden; }

/* В оригинальной конфигурации виджет переключается в мобильный вид < 1024px. */
@media (max-width: 1023px) {
    .ap-dolyame { margin: 20px 0; }
    .ap-dolyame-modal__dialog { border-radius: 24px 24px 0 0; bottom: 0; gap: 16px; max-height: calc(100vh - 18px); padding: 16px; top: auto; transform: translateX(-50%); width: 100%; }
    .ap-dolyame-modal__close { right: 8px; top: 8px; }
    .ap-dolyame-modal__header h2 { font-size: 1.43em; }
    .ap-dolyame-modal__features { flex-direction: column; }
    .ap-dolyame-modal__schedule { padding: 10px !important; }
    .ap-dolyame-modal__payment strong { font-size: 1.08em; }
    .ap-dolyame-modal__payment i { margin-top: 8px !important; }
}