/**
 * Ограничения бесплатного тарифа.
 *
 * Закрытые данные не вырезаются из вёрстки, а размываются: видно,
 * сколько их и какой они формы, но не разобрать значений.
 */

.locked {
    position: relative;
    filter: blur(4px);
    user-select: none;
    pointer-events: none;
}

/* Кликабельная обёртка поверх размытого места */
.lockedWrap {
    position: relative;
    display: inline-flex;
    align-items: center;
    cursor: pointer;
}
.lockedWrap::after {
    content: "";
    position: absolute;
    inset: -4px -8px;
    border-radius: var(--radius-btn);
    transition: background .15s ease;
}
.lockedWrap:hover::after { background: rgba(147, 99, 255, .08); }

/* Замочек рядом с закрытым значением */
.lockIcon {
    flex-shrink: 0;
    width: 15px;
    height: 15px;
    margin-left: 8px;
    opacity: .5;
    background: no-repeat center / contain
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23222'%3E%3Cpath d='M17 9V7a5 5 0 0 0-10 0v2a2 2 0 0 0-2 2v8a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2v-8a2 2 0 0 0-2-2zM9 7a3 3 0 0 1 6 0v2H9V7z'/%3E%3C/svg%3E");
}
.lockedWrap:hover .lockIcon { opacity: .9; }

/* Окно с предложением сменить тариф */
.planModal {
    position: fixed;
    inset: 0;
    z-index: 100;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    background: rgba(34, 34, 34, .45);
}
.planModal[hidden] { display: none; }
.planModalBox {
    position: relative;
    width: 100%;
    max-width: 380px;
    padding: 34px 32px 30px;
    border-radius: var(--radius-card);
    background: var(--color-white);
    text-align: center;
    box-shadow: 0 24px 60px rgba(34, 34, 34, .22);
}
.planModalClose {
    position: absolute;
    top: 16px;
    right: 18px;
    padding: 0;
    border: none;
    background: none;
    font-size: 26px;
    line-height: 1;
    color: var(--color-default-soft);
    cursor: pointer;
}
.planModalClose:hover { color: var(--color-default); }
.planModalTitle { margin: 0 0 14px; font-size: 21px; }
.planModalText {
    margin: 0 0 24px;
    font-size: 15px;
    line-height: 1.5;
    color: var(--color-default-medium);
}
.planModalBtn {
    width: 100%;
    background: var(--color-accent);
    color: var(--color-white);
    text-decoration: underline;
}
.planModalBtn:hover { background: var(--color-accent-hover); }

/* Заглушка вместо флага и закрытый текст.
   Настоящих значений в разметке нет — только точки, поэтому
   размытие здесь оформление, а не защита. */
.flagStub {
    display: inline-block;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--color-tab-bg);
}
.lockedText {
    display: inline-block;
    filter: blur(3px);
    user-select: none;
    letter-spacing: 1px;
    color: var(--color-default-soft);
}
.growthTable .geoCode { filter: blur(3px); letter-spacing: 1px; }