/* Mocompany: бейдж "20 лет опыта" на логотипе (desktop + mobile) */

:root {
  --mocom-sign-width-desktop: 245px;
  --mocom-sign-width-mobile: 170px;
  --mocom-sign-text-color: #ffffff;
}

/*
  КРИТИЧНО: на сайте может использоваться разная разметка хедера (t228, t396, mobile menu и т.д.).
  Поэтому вешаем бейдж сразу на типовые элементы логотипа Tilda.
*/
.t228__logo,
.t228__logoimg,
.t-menu__logo,
.t-menu__logowrapper,
.tmenu-mobile__logo,
.tmenu-mobile__container .t-sociallinks,
.t396__elem a[href='/'],
.t396__elem a[href='https://mocompany.ru/'],
.t1261__logo-link,
.t1261__logo-image {
  position: relative;
}

/* Desktop badge */
.t228__logo::after,
.t228__logoimg::after,
.t-menu__logo::after,
.t-menu__logowrapper::after,
.tmenu-mobile__logo::after,
.t396__elem a[href='/']::after,
.t396__elem a[href='https://mocompany.ru/']::after,
.t1261__logo-link::after {
    content: "20 лет опыта";
    position: absolute;
    top: -62px;
    right: -18px;
    width: 120px;
    aspect-ratio: 123 / 34;
    background: url(https://static.tildacdn.com/tild3561-3437-4439-b364-376630393237/sign.png) center / contain no-repeat;
    color: #000000;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 800;
    font-family: 'Inter', Arial, sans-serif;
    line-height: 1.6;
    letter-spacing: 0.01em;
    text-transform: uppercase;
    pointer-events: none;
    z-index: 999;
}

/* Mobile */
@media (max-width: 980px) {
  .t228__logo::after,
  .t228__logoimg::after,
  .t-menu__logo::after,
  .t-menu__logowrapper::after,
  .tmenu-mobile__logo::after,
  .t396__elem a[href='/']::after,
  .t396__elem a[href='https://mocompany.ru/']::after,
  .t1261__logo-link::after {
        top: -62px;
        right: -27px;
        width: 117px;
        font-size: 10px;
  }
}