/* ── BDP – Bitrix24-style pricing ─────────────────────────────────────────── */

.bdp-cards-wrap,
.bdp-cards-wrap *,
.bdp-toggle-wrap,
.bdp-toggle-wrap *,
.bdp-tabs-wrap,
.bdp-tabs-wrap * {
    font-family: inherit;
    box-sizing: border-box;
}

:root {
    --bdp-dark: #2F3454;
    /* тема: rgb(47 52 84)   */
    --bdp-dark-2: #424764;
    /* тема: rgb(66 71 100)  */
    --bdp-cyan: #6EC1E4;
    /* тема: rgb(110 193 228)*/
    --bdp-cyan-lt: #EAF5FB;
    /* очень светлый голубой */
    --bdp-cyan-md: #D4ECFA;
    /* чуть насыщеннее       */
    --bdp-green: #22C55E;
    /* тема: rgb(34 197 94)  */
    --bdp-green-lt: #DCFCE7;
    --bdp-white: #ffffff;
    --bdp-bg: #F6F8F7;
    /* тема: rgb(246 248 247)*/
    --bdp-border: #E0E3EB;
    /* тема: rgb(224 227 235)*/
    --bdp-text: #2F3454;
    --bdp-muted: #97A3BE;
    /* тема: rgb(151 163 190)*/
    --bdp-radius: 14px;
    --bdp-shadow: 0 4px 24px rgba(47, 52, 84, .10);
}

/* ── Header text ─────────────────────────────────────────────────────────── */

.bdp-cards-header {
    text-align: center;
    font-size: 32px;
    font-weight: 800;
    color: var(--bdp-dark);
    line-height: 1.3;
    margin-bottom: 48px;
}

/* ── Toggle ──────────────────────────────────────────────────────────────── */

.bdp-toggle-wrap {
    display: flex;
    justify-content: center;
    margin-bottom: 32px;
}

.bdp-toggle-outer {
    position: relative;
    display: inline-flex;
}

.bdp-toggle {
    display: inline-flex;
    background: var(--bdp-bg);
    border: 1.5px solid var(--bdp-border);
    border-radius: 9999px;
    padding: 4px;
    gap: 2px;
}

.bdp-toggle-btn {
    all: unset;
    cursor: pointer;
    padding: 8px 24px;
    border-radius: 9999px;
    font-size: 14px;
    font-weight: 600;
    color: var(--bdp-muted);
    display: flex;
    align-items: center;
    gap: 8px;
    white-space: nowrap;
    transition: background .2s, color .2s, box-shadow .2s;
}

.bdp-toggle-btn:not(.active):hover {
    color: var(--bdp-dark);
    /* font-weight: 700; */
}

.bdp-toggle-btn.active {
    background: var(--bdp-white);
    color: var(--bdp-dark);
    box-shadow: 0 2px 10px rgba(47, 52, 84, .12);
}

/* плавающий бейдж — над тоглом справа, стрелка слева от бейджа */
.bdp-toggle-hint {
    position: absolute;
    bottom: calc(100% + 8px);
    right: -60%;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 6px;
    pointer-events: none;
    white-space: nowrap;
}

.bdp-toggle-badge {
    background: #FFB800;
    color: #2F3454;
    font-size: 12px;
    font-weight: 700;
    padding: 4px 14px;
    border-radius: 9999px;
    line-height: 1.4;
    box-shadow: 0 2px 8px rgba(255, 184, 0, .35);
}

.bdp-hint-arrow {
    flex-shrink: 0;
}

/* ── Runner ──────────────────────────────────────────────────────────────── */

.bdp-cards-wrap {
    margin-bottom: 48px;
}

.bdp-runner-wrap {
    display: flex;
    align-items: flex-start;
    gap: 0;
}

.bdp-runner-outer {
    flex: 1;
    min-width: 0;
    overflow-x: clip;
    overflow-y: visible;
}

.bdp-runner {
    display: flex;
    gap: 12px;
    align-items: stretch;
    transition: transform .35s ease;
    will-change: transform;
}

.bdp-runner .bdp-card {
    flex: 0 0 auto;
    min-width: 0;
}

/* ── Card ────────────────────────────────────────────────────────────────── */

.bdp-card {
    background: var(--bdp-cyan-lt);
    border: 2px solid transparent;
    border-radius: var(--bdp-radius);
    padding: 20px 16px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    position: relative;
    box-sizing: border-box;
}

.bdp-card--blue {
    background: var(--bdp-cyan-lt);
    border-color: #D4ECFA;
}

.bdp-card--green {
    background: var(--bdp-green-lt);
    border-color: #BBF7D0;
}

.bdp-card--featured {
    background: var(--bdp-cyan-md);
    border-color: var(--bdp-cyan);
    box-shadow: 0 4px 20px rgba(110, 193, 228, .25);
}

/* badge */
.bdp-card__badge {
    position: absolute;
    top: -13px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--bdp-cyan);
    color: var(--bdp-white);
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .05em;
    padding: 3px 12px;
    border-radius: 9999px;
    white-space: nowrap;
}

/* name */
.bdp-card__name {
    font-size: 17px;
    font-weight: 700;
    color: var(--bdp-dark);
    text-align: center;
}

/* description */
.bdp-card__desc {
    font-size: 13px;
    color: var(--bdp-muted);
    line-height: 1.5;
    text-align: center;
    min-height: 68px;
}

/* users */
.bdp-card__users {
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1px;
    min-height: 57px;
}

.bdp-users-count {
    font-size: 22px;
    font-weight: 800;
    color: var(--bdp-dark);
    line-height: 1.1;
    letter-spacing: -.02em;
}

.bdp-users-label {
    font-size: 13px;
    font-weight: 600;
    color: var(--bdp-dark);
}

.bdp-fire-svg {
    display: block;
    flex-shrink: 0;
    margin-top: 1px;
}

.bdp-card__users-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
}

/* user selector — custom dropdown */
.bdp-card__users--select {
    flex-direction: column;
}

.bdp-custom-select {
    position: relative;
    width: 100%;
}

.bdp-cs-trigger {
    all: unset;
    font-family: inherit;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    width: 100%;
    padding: 8px 32px 8px 12px;
    border: 1.5px solid var(--bdp-border);
    border-radius: 10px;
    color: var(--bdp-dark);
    background: var(--bdp-white);
    cursor: pointer;
    transition: border-color .18s, box-shadow .18s;
    text-align: center;
}

.bdp-cs-trigger:hover,
.bdp-custom-select.open .bdp-cs-trigger {
    border-color: var(--bdp-cyan);
    box-shadow: 0 0 0 3px rgba(110, 193, 228, .18);
}

.bdp-cs-val {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0;
}

.bdp-cs-val .bdp-users-count {
    font-size: 18px;
}

.bdp-cs-val .bdp-users-label {
    /* font-size: 11px; */
}

.bdp-cs-chevron {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--bdp-cyan);
    display: flex;
    align-items: center;
    transition: transform .18s;
    pointer-events: none;
}

.bdp-custom-select.open .bdp-cs-chevron {
    transform: translateY(-50%) rotate(180deg);
}

.bdp-cs-list {
    display: none;
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    background: var(--bdp-white);
    border: 1.5px solid var(--bdp-border);
    border-radius: 10px;
    box-shadow: 0 8px 24px rgba(47, 52, 84, .14);
    list-style: none;
    margin: 0;
    padding: 4px 0;
    z-index: 200;
    max-height: 210px;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: var(--bdp-border) transparent;
}

.bdp-cs-list::-webkit-scrollbar {
    width: 4px;
}

.bdp-cs-list::-webkit-scrollbar-thumb {
    background: var(--bdp-border);
    border-radius: 4px;
}

.bdp-custom-select.open .bdp-cs-list {
    display: block;
}

.bdp-cs-item {
    padding: 8px 12px;
    font-size: 13px;
    color: var(--bdp-text);
    cursor: pointer;
    transition: background .12s;
    white-space: nowrap;
}

.bdp-cs-item:hover {
    background: var(--bdp-cyan-lt);
}

.bdp-cs-item.active {
    color: var(--bdp-cyan);
    font-weight: 700;
}

/* price */
.bdp-card__price-wrap {
    text-align: center;
}

.bdp-price-free {
    font-size: 24px;
    font-weight: 800;
    color: var(--bdp-green);
}

.bdp-price-old-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin-bottom: 1px;
    min-height: 20px;
}

.bdp-price-old {
    font-size: 13px;
    color: var(--bdp-muted);
    text-decoration: line-through;
    white-space: nowrap;
}

.bdp-price-discount {
    font-size: 12px;
    font-weight: 700;
    background: rgba(239, 68, 68, .12);
    color: #DC2626;
    padding: 1px 6px;
    border-radius: 9999px;
}

.bdp-price-current {
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: 3px;
}

.bdp-price-val {
    font-size: 28px;
    font-weight: 800;
    color: var(--bdp-dark);
    line-height: 1;
    white-space: nowrap;
}

.bdp-price-unit {
    font-size: 13px;
    color: var(--bdp-muted);
    white-space: nowrap;
}

.bdp-price-note {
    font-size: 12px;
    color: var(--bdp-muted);
    margin-top: 2px;
}

/* button */
.bdp-card__btn {
    display: block;
    text-align: center;
    padding: 11px 16px;
    margin-top: 18px;
    border-radius: 9999px;
    font-size: 14px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    text-decoration: none;
    transition: filter .2s, box-shadow .2s;
    background: var(--bdp-cyan);
    color: var(--bdp-white);
    box-shadow: 0 2px 8px rgba(110, 193, 228, .35);
}

.bdp-card--green .bdp-card__btn {
    background: var(--bdp-green);
    box-shadow: 0 2px 8px rgba(34, 197, 94, .30);
}

.bdp-card--featured .bdp-card__btn {
    background: var(--bdp-dark);
    box-shadow: 0 2px 8px rgba(47, 52, 84, .25);
}

.bdp-card__btn:hover {
    filter: brightness(1.08);
}

/* storage */
.bdp-card__storage {
    font-size: 15px;
    font-weight: 700;
    color: var(--bdp-dark);
    text-align: center;
    padding: 6px 0;
    border-top: 1px solid rgba(47, 52, 84, .10);
    border-bottom: 1px solid rgba(47, 52, 84, .10);
}

/* ── Supply list ─────────────────────────────────────────────────────────── */

.bdp-card__supply {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 4px;
}

.bdp-supply-item {
    display: flex;
    align-items: center;
    gap: 6px;
    color: var(--bdp-text);
    min-height: 20px;
    padding: 3px 6px;
    margin: 0 -6px;
    border-radius: 8px;
    transition: background .12s;
    cursor: default;
}

.bdp-supply-item--empty {
    color: var(--bdp-muted);
    opacity: .4;
}

.bdp-supply-item--row-hover:not(.bdp-supply-item--empty) {
    background: rgba(110, 193, 228, .20);
}

.bdp-supply-item--sub {
    padding-left: 10px;
}

.bdp-supply-item--sub .bdp-si-name {
    font-size: 14px;
    color: var(--bdp-muted);
}

.bdp-si-name {
    flex: 1;
    min-width: 0;
    font-size: 13px;
    font-weight: 500;
    line-height: 1.3;
    color: var(--bdp-text);
}

/* dots — сегментная плашка, всегда 3 слота */
.bdp-si-dots {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: 1.5px;
    margin-left: 4px;
}

.bdp-si-dot {
    width: 10px;
    height: 8px;
    border-radius: 0;
    background: var(--bdp-cyan);
    flex-shrink: 0;
}

.bdp-si-dot--off {
    background: var(--bdp-border);
}

.bdp-si-dot:first-child {
    border-radius: 4px 0 0 4px;
}

.bdp-si-dot:last-child {
    border-radius: 0 4px 4px 0;
}

.bdp-si-dot:only-child {
    border-radius: 4px;
}

/* dash */
.bdp-si-dash {
    color: var(--bdp-border);
    font-size: 14px;
}

/* badge */
.bdp-si-badge {
    flex-shrink: 0;
    font-size: 10px;
    font-weight: 700;
    background: var(--bdp-cyan);
    color: var(--bdp-white);
    padding: 1px 7px;
    border-radius: 9999px;
    white-space: nowrap;
    margin-left: 2px;
    letter-spacing: .02em;
}

.bdp-si-badge--award {
    background: linear-gradient(135deg, #FFD700 0%, #FFA800 100%);
    color: #2F3454;
    font-size: 10px;
    font-weight: 800;
    padding: 2px 8px;
    box-shadow: 0 1px 5px rgba(255, 168, 0, .45);
    letter-spacing: .03em;
}

/* ── Supply tooltip ──────────────────────────────────────────────────────── */

.bdp-si-tip-wrap {
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
}

.bdp-si-tip-btn {
    all: unset;
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 15px;
    height: 15px;
    border-radius: 50%;
    border: 1.5px solid var(--bdp-muted);
    font-size: 9px;
    font-weight: 700;
    color: var(--bdp-muted);
    cursor: pointer;
    flex-shrink: 0;
    transition: border-color .15s, color .15s;
}

.bdp-si-tip-btn:hover {
    border-color: var(--bdp-dark);
    color: var(--bdp-dark);
}

.bdp-si-tip-text {
    display: none;
    /* данные для JS, не отображается напрямую */
}

/* Плавающий тултип, добавляется JS в body — не обрезается overflow clip */
.bdp-tip-float {
    position: fixed;
    background: var(--bdp-dark);
    color: var(--bdp-white);
    font-size: 13px;
    font-weight: 400;
    line-height: 1.5;
    padding: 8px 12px;
    border-radius: 8px;
    z-index: 9999;
    pointer-events: none;
    max-width: 260px;
    display: none;
    box-shadow: 0 4px 16px rgba(47, 52, 84, .20);
}

/* Box-группа: '+' означает «включено», не под-функцию — переопределяем sub-стиль */
.bdp-cards-wrap[data-group="box"] .bdp-supply-item--sub {
    padding-left: 6px;
}

.bdp-cards-wrap[data-group="box"] .bdp-supply-item--sub .bdp-si-name {
    color: var(--bdp-text);
    font-size: 13px;
}

/* ── Wobbler ─────────────────────────────────────────────────────────────── */

.bdp-wobbler {
    flex-shrink: 0;
    height: 284px;
    width: 28px;
    background: var(--bdp-cyan);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    cursor: pointer;
    transition: filter .2s, transform .12s linear;
    will-change: transform;
    overflow: hidden;
    margin: 0;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .20);
    -webkit-tap-highlight-color: transparent;
    outline: none;
    user-select: none;
}

@media (hover: hover) and (pointer: fine) {
    .bdp-wobbler:hover {
        filter: brightness(1.12);
    }
}

.bdp-wobbler:focus,
.bdp-wobbler:active {
    background: var(--bdp-cyan);
    outline: none;
    filter: none;
}

.bdp-wobbler--left {
    border-radius: 0 var(--bdp-radius) var(--bdp-radius) 0;
    transform: rotate(180deg);
    visibility: hidden;
}

.bdp-wobbler--right {
    border-radius: var(--bdp-radius) 0 0 var(--bdp-radius);
    transform: rotate(180deg);
    visibility: hidden;
}

.bdp-wobbler--green {
    background: var(--bdp-green);
}

.bdp-wobbler__chevron {
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: .9;
    transform: rotate(180deg);
}

.bdp-wobbler__chevron--flip {
    transform: rotate(180deg) scaleX(-1);
}

.bdp-wobbler__label,
.bdp-wobbler__name {
    writing-mode: vertical-lr;
    transform: rotate(180deg);
    white-space: nowrap;
    color: var(--bdp-white);
    line-height: 1.2;
}

.bdp-wobbler__label {
    font-size: 10px;
    font-weight: 500;
    opacity: .75;
    letter-spacing: .1em;
    text-transform: uppercase;
}

.bdp-wobbler__name {
    font-size: 14px;
    font-weight: 700;
    letter-spacing: .01em;
    transition: opacity .15s;
}

/* ── Feature comparison table ────────────────────────────────────────────── */

.bdp-table-wrap {
    overflow-x: auto;
    margin-bottom: 48px;
}

.bdp-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}

.bdp-table th,
.bdp-table td {
    padding: 8px 12px;
    text-align: center;
    border-bottom: 1px solid var(--bdp-border);
}

.bdp-th-label {
    text-align: left;
    width: 28%;
}

.bdp-th-plan {
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--bdp-dark);
    background: var(--bdp-bg);
}

.bdp-th-plan--featured {
    background: var(--bdp-cyan-lt);
}

.bdp-tr-cat td {
    background: var(--bdp-bg);
    font-weight: 700;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--bdp-dark);
    text-align: left;
}

.bdp-td-name {
    text-align: left;
    color: var(--bdp-text);
}

.bdp-td-val {
    color: var(--bdp-text);
}

.bdp-check {
    color: var(--bdp-green);
    font-weight: 700;
}

.bdp-dash {
    color: var(--bdp-border);
}

.bdp-text-val {
    font-size: 12px;
}

.bdp-tr-feat:nth-child(even) td {
    background: #f7fbfd;
}

/* ── Tabs ────────────────────────────────────────────────────────────────── */

.bdp-tabs-wrap {
    margin-bottom: 20px;
}

.bdp-tabs {
    display: flex;
    gap: 4px;
    border-bottom: 2px solid var(--bdp-border);
    margin-bottom: 28px;
    flex-wrap: wrap;
}

.bdp-tab {
    all: unset;
    cursor: pointer;
    padding: 9px 20px;
    font-size: 14px;
    font-weight: 600;
    color: var(--bdp-muted);
    border-bottom: 2px solid transparent;
    margin-bottom: -2px;
    transition: color .2s, border-color .2s;
}



.bdp-tab.active {
    color: var(--bdp-dark);
    border-bottom-color: var(--bdp-cyan);
}

.bdp-tab-panel {
    display: none;
}

.bdp-tab-panel.active {
    display: block;
}

/* Когда таб внутри тогл-пилюли — убираем underline-стиль, восстанавливаем скругление */
.bdp-toggle .bdp-tab {
    border-bottom: none;
    margin-bottom: 0;
    border-radius: 9999px;
}


/* ── Marketplace pricing table ───────────────────────────────────────────── */

.bdp-mkt-wrap {
    margin-bottom: 48px;
}

.bdp-mkt-subtitle {
    text-align: center;
    font-size: 18px;
    font-weight: 700;
    color: var(--bdp-dark);
    margin-top: 48px;
    margin-bottom: 24px;
}

.bdp-mkt-table-outer {
    overflow-x: auto;
    margin-bottom: 20px;
    border-radius: var(--bdp-radius);
    box-shadow: var(--bdp-shadow);
}

.bdp-mkt-table {
    width: 100%;
    border-collapse: collapse;
    background: var(--bdp-white);
    font-size: 14px;
}

.bdp-mkt-table thead tr {
    background: var(--bdp-white);
    border-bottom: 2px solid var(--bdp-border);
}

.bdp-mkt-th-left {
    text-align: left;
    min-width: 240px;
    padding: 16px 20px;
    font-size: 13px;
    font-weight: 600;
    color: var(--bdp-muted);
    vertical-align: bottom;
}

.bdp-mkt-th {
    text-align: center;
    min-width: 150px;
    padding: 20px 16px;
    vertical-align: top;
    border-left: 1px solid var(--bdp-border);
}

.bdp-mkt-th-name {
    font-size: 14px;
    font-weight: 700;
    color: var(--bdp-dark);
    line-height: 1.35;
    margin-bottom: 10px;
}

.bdp-mkt-th-price-row {
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: 4px;
    margin-bottom: 14px;
}

.bdp-mkt-th-price {
    font-size: 22px;
    font-weight: 800;
    color: var(--bdp-dark);
    line-height: 1;
}

.bdp-mkt-th-period {
    font-size: 12px;
    color: var(--bdp-muted);
    white-space: nowrap;
}

.bdp-mkt-th-btn {
    display: inline-block;
    padding: 8px 18px;
    border-radius: 9999px;
    border: 1.5px solid var(--bdp-cyan);
    color: var(--bdp-cyan);
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    transition: background .15s, color .15s;
    white-space: nowrap;
}

.bdp-mkt-th-btn:hover {
    background: var(--bdp-cyan);
    color: var(--bdp-white);
}

.bdp-mkt-row {
    border-bottom: 1px solid var(--bdp-border);
    transition: background .15s;
}

.bdp-mkt-row:last-child {
    border-bottom: none;
}

.bdp-mkt-row:hover {
    background: var(--bdp-cyan-lt);
}

.bdp-mkt-td-label {
    padding: 14px 20px;
    font-size: 14px;
    color: var(--bdp-text);
    white-space: nowrap;
}

.bdp-mkt-badge {
    margin-left: 4px;
    font-weight: 700;
    color: var(--bdp-dark);
}

.bdp-mkt-badge--accent {
    color: var(--bdp-cyan);
}

.bdp-mkt-td {
    text-align: center;
    padding: 14px 16px;
    vertical-align: middle;
}

.bdp-mkt-old {
    display: block;
    font-size: 12px;
    color: var(--bdp-muted);
    text-decoration: line-through;
    line-height: 1.4;
}

.bdp-mkt-val {
    display: block;
    font-size: 16px;
    font-weight: 700;
    color: var(--bdp-dark);
    line-height: 1.4;
}

.bdp-mkt-val--accent {
    color: var(--bdp-cyan);
}

/* ── Табы Покупка / Продление ────────────────────────────────────────────── */

.bdp-renewal-tabs {
    display: inline-flex;
    background: var(--bdp-bg);
    border: 1.5px solid var(--bdp-border);
    border-radius: 9999px;
    padding: 4px;
    gap: 2px;
}

.bdp-renewal-tab {
    all: unset;
    cursor: pointer;
    padding: 8px 24px;
    border-radius: 9999px;
    font-size: 14px;
    font-weight: 600;
    color: var(--bdp-muted);
    display: flex;
    align-items: center;
    white-space: nowrap;
    transition: background .2s, color .2s, box-shadow .2s;
}

.bdp-renewal-tab:not(.active):hover {
    color: var(--bdp-dark);
}

.bdp-renewal-tab.active {
    background: var(--bdp-white);
    color: var(--bdp-dark);
    box-shadow: 0 2px 10px rgba(47, 52, 84, .12);
}

.bdp-renewal-note {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    margin: 16px auto 0;
    max-width: fit-content;
    padding: 16px 20px;
    background: var(--bdp-white);
    border-radius: var(--bdp-radius);
    border: 1px solid var(--bdp-border);
    box-shadow: var(--bdp-shadow);
}

.bdp-renewal-select-wrap {
    display: none;
    min-height: 57px;
}

.bdp-cards-wrap[data-renewal-mode="renewal"] .bdp-renewal-select-wrap {
    display: block;
}

.bdp-cards-wrap[data-renewal-mode="renewal"] .bdp-card:has(.bdp-renewal-select-wrap) .bdp-card__users {
    display: none;
}

.bdp-mkt-cards-outer {
    display: flex;
    flex-direction: column;
    gap: 48px;
}

.bdp-mkt-section-title {
    font-size: 20px;
    font-weight: 700;
    color: var(--bdp-dark);
    margin: 0 0 20px;
    padding: 0;
    line-height: 1.3;
    text-align: center;
}

@media (max-width: 640px) {
    .bdp-mkt-section-title { font-size: 17px; }
}

/* Marketplace cards: выравнивание цен по одному уровню + кнопка к низу */
.bdp-mkt-cards-outer .bdp-card .bdp-card__price-wrap {
    margin-top: auto;
    margin-bottom: auto;
}

.bdp-mkt-cards-outer .bdp-card .bdp-card__btn {
    margin-top: 0;
}

/* ── Dark theme: [bdp_marketplace_cards theme="dark"] ────────────────────── */

.bdp-mkt-cards-outer--dark {
    background: var(--bdp-dark);
    border-radius: var(--bdp-radius);
    padding: 40px 32px;
}

.bdp-mkt-cards-outer--dark .bdp-mkt-section-title {
    color: var(--bdp-white);
}

.bdp-mkt-cards-outer--dark .bdp-card,
.bdp-mkt-cards-outer--dark .bdp-card--blue {
    background: var(--bdp-dark-2);
    border-color: rgba(110, 193, 228, .15);
}

.bdp-mkt-cards-outer--dark .bdp-card--featured {
    background: rgba(110, 193, 228, .10);
    border-color: var(--bdp-cyan);
    box-shadow: 0 4px 20px rgba(110, 193, 228, .18);
}

.bdp-mkt-cards-outer--dark .bdp-card__name {
    color: var(--bdp-white);
}

.bdp-mkt-cards-outer--dark .bdp-users-count {
    color: var(--bdp-white);
}

.bdp-mkt-cards-outer--dark .bdp-users-label {
    color: rgba(255, 255, 255, .55);
}

.bdp-mkt-cards-outer--dark .bdp-price-val {
    color: var(--bdp-white);
}

.bdp-mkt-cards-outer--dark .bdp-price-unit {
    color: rgba(255, 255, 255, .45);
}

.bdp-mkt-cards-outer--dark .bdp-price-old {
    color: rgba(255, 255, 255, .35);
}

.bdp-mkt-cards-outer--dark .bdp-price-discount {
    background: rgba(239, 68, 68, .22);
    color: #FF7070;
}

.bdp-mkt-cards-outer--dark .bdp-cs-trigger {
    background: rgba(255, 255, 255, .07);
    border-color: rgba(255, 255, 255, .14);
    color: var(--bdp-white);
}

.bdp-mkt-cards-outer--dark .bdp-cs-trigger:hover,
.bdp-mkt-cards-outer--dark .bdp-custom-select.open .bdp-cs-trigger {
    border-color: var(--bdp-cyan);
    box-shadow: 0 0 0 3px rgba(110, 193, 228, .15);
}

.bdp-mkt-cards-outer--dark .bdp-cs-list {
    background: var(--bdp-dark-2);
    border-color: rgba(255, 255, 255, .12);
    box-shadow: 0 8px 24px rgba(0, 0, 0, .35);
}

.bdp-mkt-cards-outer--dark .bdp-cs-item {
    color: rgba(255, 255, 255, .80);
}

.bdp-mkt-cards-outer--dark .bdp-cs-item:hover {
    background: rgba(110, 193, 228, .12);
}

.bdp-mkt-cards-outer--dark .bdp-toggle {
    background: rgba(255, 255, 255, .07);
    border-color: rgba(255, 255, 255, .12);
}

.bdp-mkt-cards-outer--dark .bdp-toggle-btn {
    color: rgba(255, 255, 255, .45);
}

.bdp-mkt-cards-outer--dark .bdp-toggle-btn:not(.active):hover {
    color: var(--bdp-white);
}

.bdp-mkt-cards-outer--dark .bdp-toggle-btn.active {
    background: rgba(255, 255, 255, .11);
    color: var(--bdp-white);
    box-shadow: 0 2px 10px rgba(0, 0, 0, .22);
}

.bdp-mkt-cards-outer--dark .bdp-renewal-tabs {
    background: rgba(255, 255, 255, .07);
    border-color: rgba(255, 255, 255, .12);
}

.bdp-mkt-cards-outer--dark .bdp-renewal-tab {
    color: rgba(255, 255, 255, .45);
}

.bdp-mkt-cards-outer--dark .bdp-renewal-tab:not(.active):hover {
    color: var(--bdp-white);
}

.bdp-mkt-cards-outer--dark .bdp-renewal-tab.active {
    background: rgba(255, 255, 255, .11);
    color: var(--bdp-white);
    box-shadow: 0 2px 10px rgba(0, 0, 0, .22);
}

.bdp-mkt-cards-outer--dark .bdp-mkt-footnote {
    background: rgba(255, 255, 255, .05);
    border-color: rgba(255, 255, 255, .09);
    box-shadow: none;
}

.bdp-mkt-cards-outer--dark .bdp-mkt-fn-text {
    color: rgba(255, 255, 255, .70);
}

.bdp-mkt-cards-outer--dark .bdp-mkt-fn-star {
    background: rgba(110, 193, 228, .14);
    border-color: var(--bdp-cyan);
    color: var(--bdp-cyan);
}

.bdp-mkt-footnote {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    margin: -28px auto 0;
    max-width: fit-content;
    padding: 16px 20px;
    background: var(--bdp-white);
    border-radius: var(--bdp-radius);
    border: 1px solid var(--bdp-border);
    box-shadow: var(--bdp-shadow);
}

.bdp-mkt-fn-star {
    flex-shrink: 0;
    width: 34px;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bdp-cyan-lt);
    border: 1.5px solid var(--bdp-cyan);
    border-radius: 50%;
    color: var(--bdp-cyan);
}

.bdp-mkt-fn-text {
    font-size: 13px;
    color: var(--bdp-text);
    line-height: 1.6;
    padding-top: 6px;
}

/* ── License list ────────────────────────────────────────────────────────── */

.bdp-licenses-wrap {
    margin-bottom: 48px;
}

.bdp-lic-heading {
    font-size: 18px;
    font-weight: 700;
    color: var(--bdp-dark);
    margin: 28px 0 12px;
    padding: 0;
    line-height: 1.3;
}

.bdp-lic-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.bdp-lic-row {
    display: flex;
    align-items: center;
    gap: 16px;
    background: var(--bdp-white);
    border-radius: var(--bdp-radius);
    padding: 16px 20px;
    border: 1px solid var(--bdp-border);
    box-shadow: 0 2px 8px rgba(47, 52, 84, .06);
}

.bdp-lic-info {
    flex: 1;
    min-width: 0;
}

.bdp-lic-name {
    font-size: 16px;
    font-weight: 700;
    color: var(--bdp-dark);
    line-height: 1.3;
}

.bdp-lic-sub {
    font-size: 14px;
    color: var(--bdp-muted);
    margin-top: 3px;
    line-height: 1.4;
}

.bdp-lic-price-wrap {
    display: flex;
    align-items: baseline;
    gap: 5px;
    flex-shrink: 0;
    white-space: nowrap;
}

.bdp-lic-price {
    font-size: 28px;
    font-weight: 800;
    color: var(--bdp-dark);
    line-height: 1;
    letter-spacing: -.02em;
}

.bdp-lic-currency {
    font-size: 13px;
    color: var(--bdp-muted);
}

.bdp-lic-btn {
    flex-shrink: 0;
    display: inline-block;
    padding: 9px 22px;
    border-radius: 9999px;
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    text-decoration: none;
    white-space: nowrap;
    background: var(--bdp-cyan);
    color: var(--bdp-white);
    box-shadow: 0 2px 8px rgba(110, 193, 228, .35);
    transition: filter .2s;
}

.bdp-lic-btn:hover {
    filter: brightness(1.08);
}

.bdp-lic-btn--outline {
    background: transparent;
    border: 1.5px solid var(--bdp-border);
    color: var(--bdp-dark);
    padding: 8px 22px;
    box-shadow: none;
}

.bdp-lic-btn--outline:hover {
    filter: none;
    border-color: var(--bdp-dark);
    background: var(--bdp-dark);
    color: var(--bdp-white);
}

/* ── МойСклад ────────────────────────────────────────────────────────────── */

.bdp-ms-wrap {
    margin-bottom: 48px;
}

.bdp-ms-table-outer {
    overflow-x: auto;
    border-radius: var(--bdp-radius);
    border: 1px solid var(--bdp-border);
    box-shadow: var(--bdp-shadow);
}

.bdp-ms-table {
    width: 100%;
    border-collapse: collapse;
    min-width: 560px;
}

.bdp-ms-th-left {
    min-width: 160px;
    padding: 20px;
    background: var(--bdp-white);
    border-right: 1px solid var(--bdp-border);
    vertical-align: bottom;
}

.bdp-ms-th {
    min-width: 150px;
    padding: 36px 16px 20px;
    text-align: center;
    background: var(--bdp-white);
    border-right: 1px solid var(--bdp-border);
    vertical-align: top;
    position: relative;
}

.bdp-ms-th:last-child,
.bdp-ms-td:last-child {
    border-right: none;
}

.bdp-ms-th--featured {
    background: var(--bdp-cyan-lt);
}

.bdp-ms-plan-badge {
    position: absolute;
    top: 10px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--bdp-cyan);
    color: var(--bdp-white);
    font-size: 11px;
    font-weight: 700;
    padding: 3px 10px;
    border-radius: 9999px;
    white-space: nowrap;
}

.bdp-ms-plan-name {
    font-size: 17px;
    font-weight: 700;
    color: var(--bdp-dark);
    margin-bottom: 10px;
}

.bdp-ms-price-row {
    display: flex;
    align-items: baseline;
    gap: 5px;
    justify-content: center;
}

.bdp-ms-price-val {
    font-size: 26px;
    font-weight: 800;
    color: var(--bdp-dark);
    line-height: 1.1;
    letter-spacing: -.02em;
}

.bdp-ms-unit {
    font-size: 13px;
    font-weight: 500;
    color: var(--bdp-muted);
    white-space: nowrap;
}

.bdp-ms-extras {
    display: block;
    min-height: 17px;
    font-size: 12px;
    font-weight: 600;
    color: #0ea5b0;
}

.bdp-ms-period {
    display: block;
    font-size: 12px;
    color: var(--bdp-muted);
    margin-top: 3px;
    margin-bottom: 14px;
}

.bdp-ms-btn-connect {
    display: block;
    width: 100%;
    box-sizing: border-box;
    padding: 9px 16px;
    border: 1.5px solid var(--bdp-cyan);
    border-radius: 9999px;
    color: var(--bdp-cyan);
    font-size: 13px;
    font-weight: 700;
    text-decoration: none;
    text-align: center;
    transition: background .2s, color .2s;
    margin-bottom: 8px;
}

.bdp-ms-btn-connect:hover {
    background: var(--bdp-cyan);
    color: var(--bdp-white);
}

.bdp-ms-btn-connect--featured {
    background: var(--bdp-cyan);
    color: var(--bdp-white);
}

.bdp-ms-btn-connect--featured:hover {
    background: var(--bdp-dark);
    border-color: var(--bdp-dark);
}

.bdp-ms-row:hover {
    background: var(--bdp-cyan-lt);
}

.bdp-ms-row:hover .bdp-ms-td--featured {
    background: var(--bdp-cyan-md);
}

.bdp-ms-td-label {
    padding: 13px 20px;
    font-size: 14px;
    font-weight: 500;
    color: var(--bdp-dark);
    text-align: left;
    border-top: 1px solid var(--bdp-border);
    border-right: 1px solid var(--bdp-border);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    height: 70px;
}

.bdp-ms-td {
    padding: 13px 16px;
    text-align: center;
    border-top: 1px solid var(--bdp-border);
    border-right: 1px solid var(--bdp-border);
}

.bdp-ms-td--featured {
    background: var(--bdp-cyan-lt);
}

.bdp-ms-check {
    color: var(--bdp-cyan);
    font-size: 18px;
    font-weight: 700;
}

.bdp-ms-cross {
    color: var(--bdp-border);
    font-size: 16px;
}

.bdp-ms-val {
    font-size: 14px;
    font-weight: 600;
    color: var(--bdp-dark);
}

.bdp-ms-addon {
    display: inline-block;
    font-size: 11px;
    font-weight: 600;
    color: var(--bdp-muted);
    border: 1px solid var(--bdp-border);
    border-radius: 4px;
    padding: 2px 7px;
}

/* Чекбокс-опция (доп.) */
.bdp-ms-cb-wrap {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    cursor: pointer;
    user-select: none;
}

.bdp-ms-cb {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.bdp-ms-cb-box {
    width: 22px;
    height: 22px;
    border-radius: 6px;
    border: 2px solid var(--bdp-border);
    background: var(--bdp-white);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background .15s, border-color .15s;
    flex-shrink: 0;
}

.bdp-ms-cb:checked+.bdp-ms-cb-box {
    background: var(--bdp-cyan);
    border-color: var(--bdp-cyan);
}

.bdp-ms-cb:checked+.bdp-ms-cb-box::after {
    content: '✓';
    color: #fff;
    font-size: 13px;
    font-weight: 700;
    line-height: 1;
}

.bdp-ms-cb-wrap:hover .bdp-ms-cb-box {
    border-color: var(--bdp-cyan);
}

.bdp-ms-cb-price {
    font-size: 11px;
    font-weight: 600;
    color: var(--bdp-muted);
    white-space: nowrap;
}

.bdp-ms-cb:checked~.bdp-ms-cb-price {
    color: var(--bdp-cyan);
}

.bdp-ms-inf {
    font-size: 20px;
    font-weight: 700;
    color: var(--bdp-dark);
}

/* Степпер − N + */
.bdp-ms-stepper {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: var(--bdp-bg);
    border-radius: 8px;
    padding: 3px 5px;
}

.bdp-ms-step {
    all: unset;
    cursor: pointer;
    width: 22px;
    height: 22px;
    border-radius: 6px;
    background: var(--bdp-white);
    border: 1px solid var(--bdp-border);
    color: var(--bdp-muted);
    font-size: 14px;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background .15s, color .15s, border-color .15s;
    flex-shrink: 0;
}

.bdp-ms-step:hover:not(:disabled) {
    background: var(--bdp-cyan);
    border-color: var(--bdp-cyan);
    color: var(--bdp-white);
}

.bdp-ms-step:disabled {
    cursor: default;
    opacity: .35;
}

.bdp-ms-step-n {
    min-width: 22px;
    text-align: center;
    font-size: 15px;
    font-weight: 700;
    color: var(--bdp-dark);
}

.bdp-ms-step-unit {
    font-size: 12px;
    font-weight: 500;
    color: var(--bdp-muted);
    margin-left: 1px;
}

/* ── МойСклад: мобильный слайдер ─────────────────────────────────────────── */

.bdp-ms-slider-wrap { display: contents; }
.bdp-ms-nav-dots    { display: none; }
.bdp-ms-nav-arr     { display: none; }
.bdp-ms-tabs        { display: none; }

@media (max-width: 700px) {

    /* Обёртка: без стрелок, заголовок абсолютно сверху */
    .bdp-ms-slider-wrap {
        display: block;
        position: relative;
        padding-top: 260px; /* запас до JS-замера */
    }

    .bdp-ms-slider-wrap .bdp-ms-table-outer {
        width: 100%;
        overflow-x: visible;
        position: static;
    }

    .bdp-ms-nav-arr { display: none !important; }

    /* Табы с названиями тарифов */
    .bdp-ms-tabs {
        display: flex;
        gap: 6px;
        margin-bottom: 10px;
        overflow-x: auto;
        scrollbar-width: none;
    }
    .bdp-ms-tabs::-webkit-scrollbar { display: none; }
    .bdp-ms-tab {
        all: unset;
        flex-shrink: 0;
        padding: 7px 14px;
        border-radius: 9999px;
        border: 1.5px solid var(--bdp-border);
        font-size: 13px;
        font-weight: 600;
        color: var(--bdp-muted);
        cursor: pointer;
        background: var(--bdp-white);
        transition: border-color .15s, color .15s, background .15s;
    }
    .bdp-ms-tab.active {
        border-color: var(--bdp-cyan);
        color: var(--bdp-cyan);
        background: var(--bdp-cyan-lt);
    }

    /* Точки-индикаторы */
    .bdp-ms-nav-dots {
        display: flex;
        justify-content: center;
        gap: 7px;
        margin-top: 12px;
    }
    .bdp-ms-nav-dot {
        all: unset;
        width: 8px;
        height: 8px;
        border-radius: 50%;
        background: var(--bdp-border);
        cursor: pointer;
        transition: background .15s, transform .15s;
    }
    .bdp-ms-nav-dot.active {
        background: var(--bdp-cyan);
        transform: scale(1.4);
    }

    /* Заголовок тарифа — во всю ширину slider-wrap абсолютно сверху */
    .bdp-ms-table-outer { position: static; border-radius: 0 0 var(--bdp-radius) var(--bdp-radius); }
    .bdp-ms-table thead { display: block; }
    .bdp-ms-th-left     { display: none !important; }
    .bdp-ms-th {
        display: none;
        position: absolute;
        top: 0; left: 0; right: 0;
        min-width: 0;
        border: 1px solid var(--bdp-border);
        border-radius: var(--bdp-radius) var(--bdp-radius) 0 0;
        box-shadow: var(--bdp-shadow);
        z-index: 2;
    }
    .bdp-ms-th--featured { background: var(--bdp-cyan-lt); }

    /* Строки с фичами — обычная таблица, отступ сверху проставляется JS */
    .bdp-ms-table { width: 100%; min-width: 0; }
    .bdp-ms-td    { display: none; }
    .bdp-ms-td-label { padding: 10px 12px; font-size: 12px; border-right: none; }

    /* Показываем нужный план */
    .bdp-ms-wrap[data-ms-plan="0"] .bdp-ms-th:nth-child(2) { display: block; }
    .bdp-ms-wrap[data-ms-plan="0"] .bdp-ms-td:nth-child(2) { display: table-cell; }
    .bdp-ms-wrap[data-ms-plan="1"] .bdp-ms-th:nth-child(3) { display: block; }
    .bdp-ms-wrap[data-ms-plan="1"] .bdp-ms-td:nth-child(3) { display: table-cell; }
    .bdp-ms-wrap[data-ms-plan="2"] .bdp-ms-th:nth-child(4) { display: block; }
    .bdp-ms-wrap[data-ms-plan="2"] .bdp-ms-td:nth-child(4) { display: table-cell; }
    .bdp-ms-wrap[data-ms-plan="3"] .bdp-ms-th:nth-child(5) { display: block; }
    .bdp-ms-wrap[data-ms-plan="3"] .bdp-ms-td:nth-child(5) { display: table-cell; }
}


/* ── Адаптив ─────────────────────────────────────────────────────────────── */

/* Воблеры только на мобилке */
@media (min-width: 640px) {
    .bdp-wobbler {
        display: none !important;
    }
}

/* Планшет: 2 карточки в ряд */
@media (min-width: 640px) and (max-width: 1023px) {
    .bdp-runner-outer {
        overflow-x: visible;
        overflow-y: visible;
    }

    .bdp-runner {
        flex-wrap: wrap;
        transform: none !important;
    }

    .bdp-runner .bdp-card {
        flex-basis: calc(50% - 6px) !important;
        min-width: calc(50% - 6px) !important;
    }

    .bdp-runner-wrap {
        padding: 0 16px;
    }
}

/* Мобилка: карусель по 1 карточке */
@media (max-width: 639px) {
    .bdp-runner-wrap {
        padding: 0 6px;
    }

    .bdp-wobbler {
        align-self: flex-start;
    }

    .bdp-runner-outer {
        overflow-x: clip;
        overflow-y: visible;
    }

    .bdp-runner {
        flex-wrap: nowrap;
    }

    .bdp-toggle-hint {
        display: none;
    }

    .bdp-toggle-btn {
        padding: 8px 16px;
        font-size: 13px;
    }

    .bdp-cards-header {
        font-size: 17px;
        margin-bottom: 20px;
    }

    .bdp-card__desc {
        min-height: 58px;
    }

    .bdp-lic-row {
        flex-wrap: wrap;
        gap: 12px;
    }

    .bdp-lic-info {
        flex-basis: 100%;
    }

    .bdp-lic-price-wrap {
        flex: 1;
    }

    .bdp-lic-btn {
        flex-shrink: 0;
    }

    .bdp-runner .bdp-card.bdp-card--blue {
        min-height: 340px;
    }
}