/* ==========================================================================
   /avito/ — добавка к marketing.css.
   Всё, что можно, взято из общей библиотеки (wbm-hero, wbm-section, wbm-card,
   wbm-steps, wbm-faq, wbm-cta). Здесь только то, чего в ней нет: нарисованный
   интерфейс сервиса и пара мелких блоков. Переменные и скругления — общие,
   чтобы страница не выбивалась из сайта.
   ========================================================================== */

/* -------------------------------------------------- полоса фактов ---- */

.avt-facts {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 26px;
    margin: 4px 0 26px;
    padding: 16px 26px;
    border: 1px solid var(--wb-line);
    border-radius: 999px;
    background: rgba(255, 255, 255, .62);
    color: var(--wb-muted);
    font-size: 14px;
    font-weight: 700;
}
.avt-facts b { color: var(--wb-text); font-size: 17px; letter-spacing: -.02em; }
.avt-facts span { display: inline-flex; align-items: baseline; gap: 7px; }

/* ------------------------------------------------ мелкие элементы ---- */

.avt-gap { margin-top: 18px; }

.avt-fine {
    margin: 16px 0 0;
    color: #7b728c;
    font-size: 13.5px;
    line-height: 1.55;
}

.avt-dot {
    flex: 0 0 auto;
    width: 8px;
    height: 8px;
    border-radius: 999px;
    background: #cbc2e4;
}
.avt-dot--ok { background: var(--wb-green); }
.avt-dot--warn { background: var(--wb-orange); }

.avt-flag {
    justify-self: end;
    padding: 6px 11px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 800;
    white-space: nowrap;
}
.avt-flag--ok { color: #0f766e; background: #d9f6f1; }
.avt-flag--warn { color: #a45300; background: #ffedd8; }

/* ------------------------------------------- вкладки в макете ------- */

.avt-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 14px;
}
.avt-tab {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 7px 13px;
    border: 1px solid var(--wb-line);
    border-radius: 999px;
    background: rgba(255, 255, 255, .9);
    color: #5f5671;
    font-size: 12.5px;
    font-weight: 800;
}
.avt-tab--on { color: #fff; background: #17132d; border-color: #17132d; }

/* ------------------------------------------- нарисованный интерфейс -- */

.avt-app {
    display: grid;
    grid-template-columns: minmax(0, .8fr) minmax(0, 1fr);
    align-items: start;
    gap: 16px;
}
.avt-app > * { position: relative; z-index: 1; }

.avt-app__list,
.avt-app__card {
    padding: 14px;
    border: 1px solid rgba(139, 92, 246, .16);
    border-radius: 22px;
    background: #fff;
    box-shadow: 0 18px 44px rgba(58, 36, 115, .08);
}

.avt-app__bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 0 6px 12px;
    border-bottom: 1px solid #f0eaff;
    color: #6d657e;
    font-size: 12.5px;
    font-weight: 800;
}
.avt-app__mark { color: #6d28d9; }

.avt-app__row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 11px 10px;
    border-radius: 14px;
    color: var(--wb-text);
    font-size: 14px;
    font-weight: 600;
}
.avt-app__row em {
    margin-left: auto;
    color: #8a819c;
    font-size: 12px;
    font-style: normal;
    font-weight: 700;
}
.avt-app__row--on { background: #f4efff; }

.avt-app__crumbs { color: #8a819c; font-size: 12px; font-weight: 700; }
.avt-app__title {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    margin: 6px 0 14px;
    font-size: 17px;
    font-weight: 800;
    letter-spacing: -.02em;
}
.avt-app__title b { color: #6d28d9; font-size: 12.5px; white-space: nowrap; }

.avt-fields { display: grid; gap: 8px; }
.avt-field {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 13px;
    border: 1px solid #f0eaff;
    border-radius: 14px;
    background: #fbf9ff;
    font-size: 13.5px;
}
.avt-field span { color: #7b728c; }
.avt-field b { font-weight: 800; text-align: right; }
.avt-field--empty { border-color: #ffdcb4; background: #fff8ef; }
.avt-field--empty b { color: #a45300; font-weight: 700; }

.avt-app__foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: 14px;
}
.avt-app__btn {
    padding: 9px 16px;
    border-radius: 999px;
    background: linear-gradient(135deg, var(--wb-soft), var(--wb-soft-2));
    color: #fff;
    font-size: 13px;
    font-weight: 800;
    box-shadow: 0 12px 26px rgba(139, 92, 246, .26);
}

/* ------------------------------------------------ постоянная ссылка -- */

.avt-link {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 12px 12px 20px;
    border: 1px solid var(--wb-line);
    border-radius: 999px;
    background: rgba(255, 255, 255, .86);
    box-shadow: var(--wb-shadow-soft);
}
.avt-link code {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: #4e465f;
    font-size: 14px;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

/* --------------------------------------------------- было / стало ---- */

.avt-tagline {
    display: inline-block;
    margin-bottom: 12px;
    padding: 5px 12px;
    border-radius: 999px;
    background: #f0eaff;
    color: #6d28d9;
    font-size: 11.5px;
    font-weight: 800;
    letter-spacing: .06em;
    text-transform: uppercase;
}
.avt-text p { margin: 0 0 10px; color: var(--wb-muted); line-height: 1.6; font-size: 14.5px; }
.avt-text p:last-child { margin-bottom: 0; }
.avt-text--was p { color: #8a819c; }
.avt-text--now { background: linear-gradient(135deg, rgba(20, 184, 166, .10), rgba(255, 255, 255, .92)); border-color: rgba(20, 184, 166, .26); }
.avt-text--now .avt-tagline { background: #d9f6f1; color: #0f766e; }
.avt-text__cta { color: #0f766e !important; font-weight: 700; }

.avt-chips {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 9px;
}
.avt-chips span {
    padding: 9px 15px;
    border: 1px solid var(--wb-line-strong);
    border-radius: 999px;
    background: rgba(255, 255, 255, .86);
    color: #5b21e6;
    font-size: 13.5px;
    font-weight: 800;
}
.avt-chips em { color: #8a819c; font-size: 13px; font-style: normal; font-weight: 700; }

/* --------------------------------------------------------- тарифы ---- */

.avt-plans .wbm-card { position: relative; display: flex; flex-direction: column; }
.avt-plans .wbm-card p { margin-bottom: 14px; font-size: 13.5px; }
.avt-plans .wbm-card b {
    margin-top: auto;
    font-size: 26px;
    font-weight: 800;
    letter-spacing: -.04em;
}
.avt-plans .wbm-card b em {
    display: block;
    margin-top: 2px;
    color: #8a819c;
    font-size: 12.5px;
    font-style: normal;
    font-weight: 700;
    letter-spacing: 0;
}
.avt-best {
    position: absolute;
    top: -11px;
    left: 20px;
    padding: 5px 12px;
    border-radius: 999px;
    background: linear-gradient(135deg, var(--wb-soft), var(--wb-soft-2));
    color: #fff;
    font-size: 11px;
    font-weight: 800;
    box-shadow: 0 10px 22px rgba(139, 92, 246, .28);
}

/* кнопка в финальном блоке не должна ломаться на две строки */
.wbm-cta .wbm-button { white-space: nowrap; }

/* ---------------------------------------------------------- рядом ---- */

.avt-near {
    display: block;
    text-decoration: none;
    transition: transform .16s ease, box-shadow .16s ease;
}
.avt-near:hover { transform: translateY(-2px); box-shadow: 0 18px 42px rgba(77, 50, 128, .12); }

/* ------------------------------------------------------- адаптив ----- */

@media (max-width: 980px) {
    .avt-app { grid-template-columns: minmax(0, 1fr); }
    .avt-app__list .avt-app__row:nth-child(n+5) { display: none; }
}

@media (max-width: 680px) {
    /* в marketing.css строка макета схлопывается до двух колонок —
       возвращаем третью под метку статуса, иначе она уезжает вниз */
    .wbm-mock-row { grid-template-columns: 42px minmax(0, 1fr) auto; }
}

@media (max-width: 760px) {
    .avt-facts { border-radius: var(--wb-radius-lg); padding: 16px 20px; gap: 8px 18px; font-size: 13px; }
    .avt-link { flex-wrap: wrap; border-radius: var(--wb-radius-lg); padding: 14px; }
    .avt-link code { flex: 1 0 100%; order: 2; }
    .avt-app__title { flex-direction: column; align-items: flex-start; gap: 4px; }
}