/* Правки адаптивной вёрстки личного кабинета поверх style.min.css (подключается в _base_v2.html после ui-fixes.css).
   Правила конкретных страниц живут в их шаблонах. */

/* Полоса прокрутки страницы на сенсорных экранах. scrollbar.css задаёт html/body свою полосу шириной 12px, и Chrome
   на телефоне рисует её не поверх страницы, а отнимает от ширины. Вместе с min-width:320px у html (style.min.css)
   на экране 320px страница получалась 333px: лишние 13px прокручивались вбок, нижняя панель и окна уезжали за край.
   На телефонах полоса страницы не нужна (браузер показывает свой бегунок поверх), поэтому убираем её только там. */
@media (hover: none) and (pointer: coarse) {
    html::-webkit-scrollbar, body::-webkit-scrollbar{ width:0; height:0; }
}

/* Хлебные крошки: длинное название (кампании, списка, обращения) не вылезает за край, а сокращается многоточием.
   Пункт из flex стал блоком: у текста внутри flex нельзя сделать многоточие. Строка 1.3 с отрицательными полями,
   чтобы не срезать хвосты букв и не менять высоту крошек. */
.breadcrumbs-lk{ min-width:0; max-width:100%; }
.breadcrumbs-lk__item{ display:block; min-width:0; max-width:100%; overflow:hidden; text-overflow:ellipsis; line-height:1.3; margin:-.15em 0; }
.breadcrumbs-lk__item:not(:first-child)::before{ display:inline-block; vertical-align:middle; margin:-.1em 12px 0 0; }

/* Когда крошки не помещаются в строку (телефон: «Для рекламодателя • Рекламные креативы»), вторая строка начиналась
   с точки-разделителя и выглядела как маркированный список. Точка теперь стоит перед каждым пунктом, включая первый,
   а список сдвинут влево на ширину «отступ + точка + отступ» и обрезан по видимому краю: у первого пункта каждой строки
   точка оказывается за краем и не видна, между пунктами всё как раньше (12px, точка, 12px). */
.breadcrumbs-lk{ column-gap:0; margin-left:-28px; clip-path:inset(-1em 0 -1em 20px); }
.breadcrumbs-lk__item::before,
.breadcrumbs-lk__item:not(:first-child)::before{ content:""; display:inline-block; vertical-align:middle; width:4px; height:4px;
    border-radius:50%; background-color:var(--gray-dark-secondary); margin:-.1em 12px 0; }
.breadcrumbs-lk__item:last-child::before{ background-color:var(--blue-third); }

/* Правая колонка кабинета на 768-1199px уходит под содержимое. style.min.css делит её на две колонки «auto 300px»
   под базу знаний, и без неё карточки занимали левую половину, а справа оставалась пустота. Без базы знаний
   поддержка и тариф стоят рядом во всю ширину, с базой знаний они слева, база справа. */
@media (min-width: 767.98px) and (max-width: 1199.98px) {
    .info-sidebar-lk{ grid-template-columns:minmax(0,1fr); }
    .info-sidebar-lk:has(> .info-sidebar-lk__faq){ grid-template-columns:minmax(0,1fr) 300px; }
    .info-sidebar-lk:not(:has(> .info-sidebar-lk__faq)) > .info-sidebar-lk__content{ display:grid; grid-template-columns:repeat(2, minmax(0,1fr));
        gap:17px; align-items:start; }
    .info-sidebar-lk:not(:has(> .info-sidebar-lk__faq)) .info-sidebar-lk__cta{ margin-bottom:0; }
}

/* «Время работы: с 8:00 до 20:00» в карточке поддержки справа переносится на узкой карточке; строки
   разведены и уравнены, чтобы «20:00» не оставалось одно на второй строке */
.cta-info-sidebar__shedule{ line-height:1.25; text-wrap:balance; }

/* Подвал кабинета: разделитель «|» стоял после каждой ссылки, и при переносе на телефоне/планшете строка
   заканчивалась висящей чертой («Помощь |»). Теперь черта стоит перед ссылкой в промежутке, а у первой ссылки
   каждой строки она уходит за левый край списка и не видна. */
.lk-footer__list { overflow: hidden; }
.lk-footer__item-list:not(:last-child) { padding-right: 0; }
.lk-footer__item-list:not(:last-child)::after { content: none; }
.lk-footer__item-list { position: relative; }
.lk-footer__item-list::before { content: "|"; position: absolute; left: -10px; top: 0; }

/* Телефон: нижняя панель кабинета (63px) закрывала подвал, и ссылки «Пользовательское соглашение», «Правила
   платформы», «Помощь», «Сервисы» нельзя было прочитать даже в самом низу страницы. Добавляем место под панель. */
@media (max-width: 47.99875em) {
  .lk-footer { padding-bottom: calc(76px + env(safe-area-inset-bottom)); }
}