﻿/* 1. Делаем шапку "базой" для позиционирования. 
   Это безопасно, так как relative не меняет положение самой шапки. */
header {
    position: relative !important;
}

/* 2. Стили самой надписи */
.safe-registry-badge {
    /* Абсолютное позиционирование позволяет "приклеить" блок в нужное место, 
       не сдвигая кнопки и телефоны */
    position: absolute;
    
    /* Отступ слева от края экрана. 
       250px - это примерная ширина логотипа + отступ. 
       Если наезжает на лого - увеличьте это число (например, 280px) */
    left: 300px; 
    
    /* Центрируем по вертикали */
    top: 50%;
    transform: translateY(-50%);
    
    /* Внешний вид */
    /*background: rgba(0, 0, 0, 0.5); /* Чёрная подложка, прозрачность 50% */
    color: #ffffff !important;       /* Текст строго белый */
    font-size: 10px;                 /* Размер шрифта поменьше, чтобы влезло */
    line-height: 1.3;
    padding: 5px 10px;
    border-radius: 4px;
    white-space: nowrap;             /* Запрещаем перенос строк, чтобы блок был широким */
    z-index: 999;                    /* Поверх всего */
    
    /* СТРАХОВКА: Если блок наедет на кнопку, сквозь него все равно пройдет клик */
    pointer-events: none; 
}

/* 3. Скрываем на мобильных телефонах и планшетах, 
      потому что там места рядом с логотипом нет */
@media (max-width: 1100px) {
    .safe-registry-badge {
        display: none !important;
    }
}