/* ==========================================================================
   Общие стили для контейнера тегов
   ========================================================================== */
.custom-tags-container {
    margin: 15px 0;
    font-family: inherit;
}

/* Заголовок перед тегами ("Популярные теги:") */
.custom-tags-title {
    font-weight: 600;
    color: #333333;
    font-size: 14px;
    line-height: 1.5;
}

/* ==========================================================================
   Оформление тега в виде аккуратной кнопочки/плашки
   ========================================================================== */
.custom-tag-item {
    display: inline-flex;
    align-items: center;
    padding: 5px 12px;                  /* Внутренние отступы внутри плашки */
    background-color: #f0f4f8;           /* Светлый приятный фон плашки */
    color: #0073aa;                      /* Цвет текста ссылки */
    text-decoration: none;               /* Убираем стандартное подчеркивание */
    border-radius: 6px;                  /* Скругление уголков плашки */
    font-size: 13px;                     /* Размер шрифта */
    font-weight: 500;
    border: 1px solid #d9e2ec;           /* Легкая аккуратная рамка */
    transition: all 0.2s ease-in-out;    /* Плавная анимация при наведении */
}

/* Эффект при наведении курсора на плашку */
.custom-tag-item:hover {
    background-color: #0073aa;           /* Фон меняется на синий */
    color: #ffffff;                      /* Текст становится белым */
    border-color: #0073aa;
    text-decoration: none;
    transform: translateY(-1px);         /* Легкий эффект приподнимания */
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);/* Мягкая тень */
}

/* ==========================================================================
   СПЕЦИАЛЬНЫЕ СТИЛИ ДЛЯ ПОДВАЛА (Строчный вывод в один ряд)
   ========================================================================== */
.footer-tags-container {
    display: flex;                       /* Включаем гибкий строчный режим Flexbox */
    flex-wrap: wrap;                     /* Автоматический перенос плашек на новую строку */
    align-items: center;                 /* Выравнивание по центру по высоте */
    gap: 8px 10px;                       /* Расстояние между плашками: 8px по вертикали, 10px по горизонтали */
}

.footer-tags-container .custom-tags-title {
    margin-right: 6px;
}

.footer-tags-container .custom-tag-item {
    margin: 0;                           /* Сбрасываем внешние отступы, так как используется gap */
}