/* Окно «Продлить модель» и кнопки продления моделей (профиль, «Мои услуги»).
   Общее для обеих тем, поэтому лежит в модуле.

   Окно собрано на родной системе окон сайта: контейнер .modal-new (тёмная подложка,
   открывается классом show-modal), .modal-content по центру, заголовок-плашка
   .modal-new-header и кнопка .close-button - как у окна «Подробнее». Подложку,
   рамки и шрифты здесь не переопределяем, только наполнение. */

#modelExtendModal .modal-content {
    width: 520px;
    max-width: calc(100vw - 24px);
    /* плашка заголовка выступает над карточкой на 3rem, поэтому прокрутку
       внутри окна не включаем: она бы её обрезала */
    overflow: visible;
}

#modelExtendModal .modal-headers {
    margin-bottom: 4px;
}

.mx-info { margin: 18px 0 16px; }
.mx-info__name { font-size: 17px; font-weight: 700; }

.mx-info__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 14px;
    margin-top: 4px;
    font-size: 13px;
    opacity: .6;
}

.mx-label {
    margin-bottom: 8px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    opacity: .5;
}

.mx-tarifs { display: flex; flex-direction: column; gap: 6px; margin-bottom: 16px; }

.mx-tarif {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0;
    padding: 10px 14px;
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, .09);
    background: rgba(255, 255, 255, .03);
    font-weight: 500;
    cursor: pointer;
}

.mx-tarif:hover { background: rgba(255, 255, 255, .06); }
.mx-tarif input { margin: 0; }
.mx-tarif__title { flex: 1 1 auto; }
.mx-tarif__price { font-weight: 700; white-space: nowrap; }

.mx-check {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin: 0 0 10px;
    font-size: 13px;
    font-weight: 400;
    line-height: 1.4;
    cursor: pointer;
}

.mx-check input { margin: 3px 0 0; flex: 0 0 auto; }

.mx-total {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 4px 14px;
    margin: 14px 0 4px;
    padding-top: 14px;
    border-top: 1px solid rgba(255, 255, 255, .07);
    font-size: 15px;
}

.mx-total__balance { font-size: 13px; opacity: .6; }

.mx-msg {
    margin-top: 12px;
    padding: 10px 14px;
    border-radius: 10px;
    font-size: 13px;
}

.mx-msg[hidden] { display: none; }
.mx-msg--error { background: rgba(255, 82, 82, .12); border: 1px solid rgba(255, 82, 82, .3); color: #ff8a8a; }
.mx-msg--ok { background: rgba(61, 220, 132, .12); border: 1px solid rgba(61, 220, 132, .3); color: #5ce39a; }
.mx-msg a { color: inherit; text-decoration: underline; }

.mx-actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 18px;
}

.mx-btn {
    padding: 9px 20px;
    border-radius: 10px;
    border: 1px solid transparent;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
}

.mx-btn--ghost {
    background: rgba(255, 255, 255, .06);
    border-color: rgba(255, 255, 255, .14);
    color: #fff;
}

.mx-btn--ghost:hover { background: rgba(255, 255, 255, .12); }

.mx-btn--primary { background: #5f65dc; color: #fff; }
.mx-btn--primary:hover:not(:disabled) { background: #7076ea; }
.mx-btn--primary:disabled { opacity: .45; cursor: not-allowed; }

/* Таблица «Мои услуги»: срок и кнопка в строке модели */
.mx-period--on { color: #5ce39a; }
.mx-period--soon { color: #ffc84d; }

.mx-extend {
    display: inline-block;
    padding: 7px 14px;
    border-radius: 9px;
    background: rgba(255, 255, 255, .07);
    border: 1px solid rgba(255, 255, 255, .12);
    color: #fff;
    font-size: 13px;
    font-weight: 600;
    white-space: nowrap;
    cursor: pointer;
}

.mx-extend:hover { background: rgba(255, 255, 255, .13); color: #fff; text-decoration: none; }