.weo-price .weo-segment { display:flex; gap:.25rem; background:#f8f9fb; padding:.25rem; border-radius:999px; box-shadow:inset 0 0 0 1px rgba(13,110,253,.15); }
.weo-price .weo-seg-btn { border:0; background:transparent; padding:.375rem .75rem; border-radius:999px; font-weight:600; }
.weo-price .weo-seg-btn.active { background:#0d6efd; color:#fff; box-shadow:0 1px 2px rgba(13,110,253,.3); }
.weo-price .weo-per-btn { border:1px solid rgba(13,110,253,.2); background:#fff; padding:.3rem .5rem; border-radius:10px; font-weight:600; }
.weo-price .weo-per-btn.active { background:#e7f1ff; border-color:#0d6efd; }
.weo-card { position:relative; height:100%; border-radius:16px; padding:1rem; border:1px solid rgba(0,0,0,.06); background:#fff; box-shadow:0 6px 24px rgba(0,0,0,.06); }
.weo-card.is-top { border:1px solid rgba(13,110,253,.35); box-shadow:0 8px 28px rgba(13,110,253,.18); }
.weo-badge { position:absolute; top:10px; right:10px; background:#20c997; color:#fff; padding:.15rem .5rem; border-radius:12px; font-size:.75rem; font-weight:700; }
.weo-title { font-weight:800; }
.weo-price-main { display:flex; align-items:baseline; gap:.35rem; font-weight:800; }
.weo-price-num { font-size:2rem; line-height:1; }
.weo-price-suf { font-size:.9rem; color:#6c757d; }
.weo-bullets { list-style:none; margin:0.75rem 0 0; padding:0; display:flex; flex-direction:column; gap:.35rem; }
.weo-bullets i { margin-right:.35rem; }
.weo-modal { border:0; border-radius:16px; width:min(960px, 96vw); padding:0; }
.weo-modal::backdrop{ background:rgba(0,0,0,.4); }
.weo-modal-card{ padding:1rem; }
.weo-modal .btn-close{ border:0; background:transparent; }
@media (prefers-reduced-motion:no-preference){
  .weo-card{ transition:transform .2s ease, box-shadow .2s ease; }
  .weo-card:hover{ transform:translateY(-4px); box-shadow:0 10px 32px rgba(0,0,0,.12); }
}
/* ========= Общие ========= */
.weo-price { --weo-brand:#0d6efd; --weo-ink:#0b1220; --weo-muted:#6b7280; --weo-line:#e8eef5; --weo-soft:#f5f8fc; --weo-green:#20c997; }
.weo-price .nowrap{white-space:nowrap;}
.weo-price .ta-r{text-align:right;}
.weo-price .w-100{width:100%;}
.weo-price .text-muted{color:var(--weo-muted);}
.weo-price .small{font-size:.9rem;}

/* Переключатели */
.weo-price .weo-segment{display:flex;gap:.25rem;background:#f8f9fb;padding:.25rem;border-radius:999px;box-shadow:inset 0 0 0 1px rgba(13,110,253,.15)}
.weo-price .weo-seg-btn{border:0;background:transparent;padding:.375rem .75rem;border-radius:999px;font-weight:600;cursor:pointer}
.weo-price .weo-seg-btn.active{background:var(--weo-brand);color:#fff;box-shadow:0 1px 2px rgba(13,110,253,.3)}
.weo-price .weo-period{flex-wrap:wrap}
.weo-price .weo-per-btn{border:1px solid rgba(13,110,253,.2);background:#fff;padding:.3rem .5rem;border-radius:10px;font-weight:600;cursor:pointer}
.weo-price .weo-per-btn.active{background:#e7f1ff;border-color:var(--weo-brand)}

/* ========= Карточки (Облако) ========= */
.weo-card{position:relative;height:100%;border-radius:16px;padding:1rem;border:1px solid var(--weo-line);background:#fff;box-shadow:0 6px 24px rgba(13,18,32,.06)}
.weo-card.is-top{border-color:rgba(13,110,253,.35);box-shadow:0 10px 28px rgba(13,110,253,.18)}
.weo-badge{position:absolute;top:10px;right:10px;background:var(--weo-green);color:#fff;padding:.2rem .55rem;border-radius:12px;font-size:.75rem;font-weight:700}
.weo-title{font-weight:800}
.weo-price-row{margin-top:.25rem}
.weo-price-main{display:flex;align-items:baseline;gap:.35rem;font-weight:800}
.weo-price-num{font-size:2.15rem;line-height:1}
.weo-price-suf{font-size:.9rem;color:var(--weo-muted)}
.weo-price-note{margin-top:.25rem}
.weo-bullets{list-style:none;margin:.8rem 0 0;padding:0;display:flex;flex-direction:column;gap:.4rem}
.weo-bullets li{display:flex;align-items:flex-start;gap:.45rem}
.weo-bullets i{color:#22c55e;margin-top:.15rem}
@media (prefers-reduced-motion:no-preference){
  .weo-card{transition:transform .2s ease, box-shadow .2s ease}
  .weo-card:hover{transform:translateY(-4px);box-shadow:0 12px 32px rgba(13,18,32,.12)}
}

/* Кнопки */
.weo-price .btn{--pad-y:.5rem;--pad-x:.9rem;display:inline-flex;align-items:center;gap:.5rem;border-radius:12px;padding:var(--pad-y) var(--pad-x);font-weight:700;line-height:1;border:1px solid transparent;cursor:pointer;text-decoration:none}
.weo-price .btn-primary{background:var(--weo-brand);color:#fff;border-color:var(--weo-brand)}
.weo-price .btn-primary:hover{filter:saturate(110%) brightness(1.02)}
.weo-price .btn-ghost{background:transparent;border-color:var(--weo-line);color:var(--weo-ink)}
.weo-price .btn-ghost:hover{background:#f7faff}

/* ========= Таблица (Коробка) ========= */
.weo-table-wrap{border:1px solid var(--weo-line);border-radius:14px;background:#fff;overflow:auto;-webkit-overflow-scrolling:touch}
.weo-box-table{width:100%;border-collapse:separate;border-spacing:0;font-size:.96rem;min-width:720px}
.weo-box-table thead th{position:sticky;top:0;background:#f8fafc;padding:12px 16px;font-weight:800;color:#111827;border-bottom:1px solid var(--weo-line);z-index:1}
.weo-box-table tbody td{padding:12px 16px;border-top:1px solid var(--weo-line);vertical-align:middle;color:#111827}
.weo-box-table tbody tr:hover{background:#fbfdff}
.weo-name{display:flex;align-items:center;gap:.5rem}
.weo-name .weo-title{font-weight:800}
.weo-chip{background:#eef7ff;color:var(--weo-brand);border:1px solid rgba(13,110,253,.25);padding:.15rem .5rem;border-radius:999px;font-size:.75rem;font-weight:700}
@media (max-width: 640px){
  /* Чтобы таблица не ломала верстку на мобиле — просто скроллится по горизонтали */
  .weo-box-table{min-width:600px}
  /* можно скрыть длинные описания, если хочется компактности: */
  .weo-box-table td:nth-child(5), .weo-box-table th:nth-child(5){display:none}
}

/* ===== цветовая система ===== */
.weo-price{--weo-brand:#0d6efd;--weo-ink:#0b1220;--weo-muted:#6b7280;--weo-line:#e8eef5;--weo-soft:#f5f8fc;--weo-green:#20c997}
.weo-price .text-muted{color:var(--weo-muted)} .weo-price .small{font-size:.9rem}

/* ===== фон и подложка блока тарифов ===== */
.weo-surface{background:linear-gradient(180deg,#f6f9ff 0,#fbfdff 100%)}
.weo-surface .container{
  background:#fff;border:1px solid var(--weo-line);border-radius:20px;
  padding:28px 20px;box-shadow:0 12px 32px rgba(13,18,32,.06)
}

/* ===== центрированная шапка ===== */
.weo-price-head .weo-h{font-size:1.75rem;letter-spacing:.1px}
.weo-price-head .weo-sub{font-size:1rem}
.weo-price-controls{margin-top:.75rem}

/* ===== переключатели и периоды ===== */
.weo-segment{display:flex;gap:.25rem;background:#f8f9fb;padding:.25rem;border-radius:999px;box-shadow:inset 0 0 0 1px rgba(13,110,253,.15)}
.weo-seg-btn{border:0;background:transparent;padding:.375rem .75rem;border-radius:999px;font-weight:600;cursor:pointer}
.weo-seg-btn.active{background:var(--weo-brand);color:#fff;box-shadow:0 1px 2px rgba(13,110,253,.3)}
.weo-period{flex-wrap:wrap}
.weo-per-btn{border:1px solid rgba(13,110,253,.2);background:#fff;padding:.35rem .6rem;border-radius:10px;font-weight:700;cursor:pointer}
.weo-per-btn.active{background:#e7f1ff;border-color:var(--weo-brand)}

/* ===== карточки (облако) ===== */
.weo-card{position:relative;height:100%;border-radius:16px;padding:1rem;border:1px solid var(--weo-line);background:#fff;box-shadow:0 6px 24px rgba(13,18,32,.06)}
.weo-card.is-top{border-color:rgba(13,110,253,.35);box-shadow:0 10px 28px rgba(13,110,253,.18)}
.weo-badge{position:absolute;top:10px;right:10px;background:var(--weo-green);color:#fff;padding:.2rem .55rem;border-radius:12px;font-size:.75rem;font-weight:700}
.weo-title{font-weight:800}
.weo-price-main{display:flex;align-items:baseline;gap:.35rem;font-weight:800}
.weo-price-num{font-size:2.1rem;line-height:1}
.weo-price-suf{font-size:.9rem;color:var(--weo-muted)}
.weo-bullets{list-style:none;margin:.8rem 0 0;padding:0;display:flex;flex-direction:column;gap:.45rem}
.weo-bullets i{color:#22c55e;margin-top:.15rem}
@media (prefers-reduced-motion:no-preference){
  .weo-card{transition:transform .2s ease, box-shadow .2s ease}
  .weo-card:hover{transform:translateY(-4px);box-shadow:0 12px 32px rgba(13,18,32,.12)}
}

/* ===== кнопки ===== */
.weo-price .btn{--py:.5rem;--px:.9rem;display:inline-flex;align-items:center;gap:.5rem;border-radius:12px;padding:var(--py) var(--px);font-weight:800;line-height:1;border:1px solid transparent;cursor:pointer;text-decoration:none;white-space:nowrap}
.weo-price .btn-primary{background:var(--weo-brand);color:#fff;border-color:var(--weo-brand)}
.weo-price .btn-primary:hover{filter:saturate(110%) brightness(1.02)}
.weo-price .btn-ghost{background:#fff;border-color:var(--weo-line);color:var(--weo-ink)}
.weo-price .btn-ghost:hover{background:#f7faff}

/* ===== таблица (коробка) ===== */
.weo-table-wrap{border:1px solid var(--weo-line);border-radius:16px;background:#fff;overflow:auto;-webkit-overflow-scrolling:touch}
.weo-box-table{width:100%;border-collapse:separate;border-spacing:0;min-width:760px}
.weo-box-table thead th{
  position:sticky;top:0;background:#f8fafc;padding:14px 16px;font-weight:900;color:#0b1220;
  border-bottom:1px solid var(--weo-line);z-index:1
}
.weo-box-table tbody td{padding:14px 16px;border-top:1px solid var(--weo-line);vertical-align:middle}
.weo-box-table tbody tr:hover{background:#fbfdff}
.weo-box-table td.ta-r{text-align:right}
.weo-box-table .nowrap{white-space:nowrap}

.weo-name{display:flex;align-items:center;gap:.5rem}
.weo-name .weo-title{font-weight:900}
.weo-chip{background:#eef7ff;color:var(--weo-brand);border:1px solid rgba(13,110,253,.25);padding:.15rem .5rem;border-radius:999px;font-size:.75rem;font-weight:800}

@media (max-width: 640px){
  .weo-box-table{min-width:620px}
  .weo-box-table td:nth-child(5), .weo-box-table th:nth-child(5){display:none} /* прячем «Описание» на узких */
}

/* Подложка блока */
.weo-surface{background:linear-gradient(180deg,#f6f9ff 0,#fbfdff 100%)}
.weo-surface .container{background:#fff;border:1px solid #e8eef5;border-radius:20px;padding:28px 20px;box-shadow:0 12px 32px rgba(13,18,32,.06)}
.weo-price-head .weo-h{font-size:1.75rem;letter-spacing:.1px}
.weo-price-head .weo-sub{font-size:1rem}
.weo-price-seg{margin-top:.25rem}

/* Таблица коробки */
.weo-table-wrap{border:1px solid #e8eef5;border-radius:16px;background:#fff;overflow:auto;-webkit-overflow-scrolling:touch}
.weo-box-table{width:100%;border-collapse:separate;border-spacing:0;table-layout:fixed;min-width:760px}
.weo-box-table thead th{position:sticky;top:0;background:#f8fafc;padding:14px 16px;font-weight:900;color:#0b1220;border-bottom:1px solid #e8eef5;z-index:1}
.weo-box-table tbody td{padding:14px 16px;border-top:1px solid #e8eef5;vertical-align:middle}
.weo-box-table tbody tr:hover{background:#fbfdff}
.ta-r{text-align:right}.nowrap{white-space:nowrap}

/* Колонки: проценты + гибкая описательная колонка */
.weo-box-table .col-name{width:24%;max-width:360px}
.weo-box-table .col-users{width:12%}
.weo-box-table .col-price{width:16%}
.weo-box-table .col-supp{width:14%}
.weo-box-table .col-act{width:18%;min-width:170px}
.weo-box-table .col-desc{width:auto;white-space:normal;word-break:break-word}

/* Имена — одна строка + троеточие, чтобы числа не «плясали» */
.weo-name{display:flex;align-items:center;gap:.5rem;min-width:0}
.weo-name .weo-title{font-weight:900;display:inline-block;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.weo-chip{background:#eef7ff;color:#0d6efd;border:1px solid rgba(13,110,253,.25);padding:.15rem .5rem;border-radius:999px;font-size:.75rem;font-weight:800}

/* Описание — максимум три строки, дальше троеточие (на средних экранах) */
@media (min-width: 768px){
  .weo-box-table .col-desc{
    display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden;
  }
}
/* На узких — таблица скроллится, прячем описание для компактности */
@media (max-width: 640px){
  .weo-box-table{min-width:620px}
  .weo-box-table .col-desc{display:none}
}

/* Переключатель «Облако / Коробка» — компактный и по центру */
.weo-price-seg{ text-align:center; }              /* центрируем содержимое блока */
.weo-price-seg .weo-segment{
  display:inline-flex;                             /* ширина по контенту, не растягивается */
  align-items:center; gap:.25rem;
}
.weo-price .weo-seg-btn{
  flex:0 0 auto;                                   /* не тянуться */
  width:auto;                                      /* на случай глобальных стилей темы */
  display:inline-flex; align-items:center; gap:.4rem;
  padding:.375rem .75rem; border-radius:999px;
}

/* Период — под переключателем и тоже компактный/по центру */
.weo-price-period{ text-align:center; }
.weo-price-period .weo-period{
  display:inline-flex; flex-wrap:wrap; gap:.4rem;  /* ширина по контенту */
}

/* На очень узких экранах сохраняем компактность */
@media (max-width:480px){
  .weo-price .weo-seg-btn{ padding:.35rem .6rem; }
}


/* Периоды: компактные кнопки + бейдж скидки */
.weo-price-period{ text-align:center; }
.weo-price-period .weo-period{ display:inline-flex; flex-wrap:wrap; gap:.45rem; }

.weo-price .weo-per-btn{
  position:relative;
  display:inline-flex; align-items:center;
  padding:.38rem .7rem; border-radius:10px;
  border:1px solid rgba(13,110,253,.2); background:#fff; font-weight:800;
  /* прячем исходный текст внутри кнопки — будем рисовать свой контент через ::before/::after */
  font-size:0;
}
.weo-price .weo-per-btn.active{ background:#e7f1ff; border-color:var(--weo-brand); }

/* Лейбл месяцев — берём из data-m */
.weo-price .weo-per-btn::before{
  content: attr(data-m) " мес";
  font-size:.95rem; color:#0b1220; line-height:1;
}

/* Бейдж скидки — показываем только если у кнопки есть класс .has-disc */
.weo-price .weo-per-btn.has-disc::after{
  content: "−" attr(data-disc) "%";
  margin-left:.5rem; line-height:1;
  font-size:.8rem; font-weight:900;
  padding:.15rem .45rem; border-radius:999px;
  background:#eef7ff; color:#0d6efd; border:1px solid rgba(13,110,253,.25);
  box-shadow:0 1px 0 rgba(13,18,32,.04);
}

/* Активная — инвертируем бейдж, чтобы «светился» */
.weo-price .weo-per-btn.active.has-disc::after{
  background:var(--weo-brand); color:#fff; border-color:var(--weo-brand);
  box-shadow:0 2px 6px rgba(13,110,253,.25);
}

/* Ховер — лёгкий акцент */
.weo-price .weo-per-btn:hover{ border-color:var(--weo-brand); background:#f6faff; }
.weo-price .weo-per-btn.active:hover{ filter:saturate(105%); }

/* На очень узких — ещё компактнее */
@media (max-width:480px){
  .weo-price .weo-per-btn{ padding:.35rem .6rem; }
  .weo-price .weo-per-btn.has-disc::after{ font-size:.78rem; }
}

/* Итого за период — крупнее, чуть ниже основной цены */
.weo-price-note{
  margin-top:.35rem; font-size:.95rem; color:#0b1220; font-weight:700;
}

/* Плашка с пользователями под Итого */
.weo-users-pill{
  display:inline-flex; align-items:center; gap:.55rem;
  margin-top:.45rem;
  padding:.25rem .6rem;
  border:1px solid var(--weo-line);
  background:#f6faff;
  border-radius:12px;
  font-weight:800; color:#0b1220;
}
.weo-users-pill b{
  color:var(--weo-brand); font-weight:900;
}
.weo-users-pill .weo-dot{ color:#a3b3c6; }
.weo-users-min {font-weight: 400;font-size: 0.85rem;}

/* Больше воздуха перед буллетами */
.weo-bullets{ margin-top:1.05rem; }

/* Буллеты — компактный размер и плотнее межстрочный */
.weo-price .weo-bullets{
  font-size:.92rem;            /* было ~1rem */
  line-height:1.35;            /* чуть плотнее, но не «липнет» */
  gap:.30rem;                  /* меньше вертикальный зазор между пунктами */
}
.weo-price .weo-bullets li{
  gap:.40rem;
}
.weo-price .weo-bullets i{
  font-size:1rem;              /* компактная иконка */
  margin-top:.06rem;
  flex:0 0 auto;
}
.weo-price .weo-bullets span{
  display:block;               /* гарантируем корректный перенос длинных строк */
  word-break:break-word;
}

/* На очень узких экранах — чутка крупнее для читабельности */
@media (max-width:480px){
  .weo-price .weo-bullets{ font-size:.95rem; line-height:1.4; }
}

/* Кнопка закрытия в модалке «Подробнее» — тёмный крестик + рамка со скруглением */
.weo-modal .btn-close{
  width:36px; height:36px;
  display:inline-flex; align-items:center; justify-content:center;
  border:1px solid #d6dee8;          /* рамка */
  border-radius:10px;                 /* скругление */
  background:#fff;                    /* явный фон, чтобы не сливалась */
  color:#0b1220;                      /* тёмный цвет значка */
  cursor:pointer;
  opacity:1;                          /* поверх bootstrap-стиля */
  appearance:none; -webkit-appearance:none; -moz-appearance:none;
  background-image:none;              /* перекрываем bootstrap .btn-close */
  line-height:1;
}
.weo-modal .btn-close::before{
  content:"✕";                        /* сам крестик */
  font-size:18px; font-weight:700; line-height:1;
}
.weo-modal .btn-close:hover{
  background:#f6f9ff;
  border-color:#b9c7da;
}
.weo-modal .btn-close:active{ transform:translateY(1px); }
.weo-modal .btn-close:focus-visible{
  outline:none;
  box-shadow:0 0 0 3px rgba(13,110,253,.2);
  border-color:var(--weo-brand);
}

/* Чуть компактнее на очень узких экранах */
@media (max-width:480px){
  .weo-modal .btn-close{ width:32px; height:32px; border-radius:8px; }
  .weo-modal .btn-close::before{ font-size:16px; }
}