/* ==========================================================================
   ГЛОБАЛЬНЫЕ СТИЛИ ДЛЯ ИКОНОК SVG
   ========================================================================== */

/* ==========================================================================
   1. БАЗОВЫЕ СТИЛИ ИКОНОК
   min-width: 1em !important;
   min-height: 1em !important;
   width: 1em !important;
   height: 1em !important;
   ========================================================================== */

.icon {
    display: inline-block;
    vertical-align: middle;
    flex-shrink: 0;
    fill: currentColor;
    transition: fill 0.25s ease, transform 0.25s ease, color 0.25s ease;
}

/* ==========================================================================
   2. ЦВЕТОВЫЕ ВАРИАНТЫ
   ========================================================================== */

.icon--white,
.icon-white {
    color: #ffffff !important;
}

.icon--red,
.icon-red {
    color: #b44c4c !important;
}

.icon--grey,
.icon-grey {
    color: #C9C9C9 !important;
}

.icon--darkgrey,
.icon-darkgrey {
    color: #999999 !important;
}

.icon--muted,
.icon-muted {
    color: #888888 !important;
}

.icon--black,
.icon-black {
    color: #222222 !important;
}

/* ГРАДИЕНТ (Важно: ссылка на ID градиента в спрайте) */
.icon--gradient,
.icon-gradient {
    fill: url(#gradient-blue-purple) !important;
    color: transparent;
}

/* Значок Pro подписки (логотип Inaia) и Лидер мнений рядом с логином */
.pro-badge-inaia {
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
}
.pro-badge-inaia svg {
    display: block;
    vertical-align: middle;
}

/* Бейдж онлайн на аватарке */
.online-status-badge {
    width: 12px;
    height: 12px;
    border: 2px solid #141414;
    background: linear-gradient(180deg, rgba(138, 183, 213, 1) 0%, rgba(153, 120, 208, 1) 100%);
    bottom: 3px;
    right: 3px;
    flex-shrink: 0;
}

/* ==========================================================================
   3. РАЗМЕРЫ
   ========================================================================== */

.icon--16 {
    width: 16px !important;
    height: 16px !important;
}

.icon--20 {
    width: 20px !important;
    height: 20px !important;
}

.icon--22 {
    width: 22px !important;
    height: 22px !important;
}

.icon--24 {
    width: 24px !important;
    height: 24px !important;
}

.icon--30 {
    width: 30px !important;
    height: 30px !important;
}

.icon--32 {
    width: 32px !important;
    height: 32px !important;
}

.icon--36 {
    width: 36px !important;
    height: 36px !important;
}

.icon--48 {
    width: 48px !important;
    height: 48px !important;
}

.icon--60 {
    width: 60px !important;
    height: 60px !important;
}

/* ==========================================================================
   4. ЛОГИКА ПЕРЕКЛЮЧЕНИЯ ИКОНОК
   ========================================================================== */

/* По умолчанию (свернуто): показываем иконку "collapsed", скрываем "expanded" */
.btn-toggle-expand .icon-expanded {
    display: none !important;
}


/* Когда развернуто (aria-expanded="true"): скрываем "collapsed", показываем "expanded" */
.btn-toggle-expand[aria-expanded="true"] .icon-collapsed {
    display: none !important;
}

.btn-toggle-expand[aria-expanded="true"] .icon-expanded {
    display: inline-block !important;
}

/* Удаляем старую логику поворота, так как у нас теперь две разные иконки */
.btn-toggle-expand .icon__path {
    transform: none !important;
}

/* ==========================================================================
   5. СТИЛИ ДЛЯ КНОПОК С ИКОНКАМИ
   ========================================================================== */

/* Сброс стилей браузера при клике/фокусировке на кнопках */
.btn:focus,
.btn:active,
.btn.active,
button:focus,
button:active,
button:focus-visible,
.btn:focus-visible {
    outline: none !important;
    box-shadow: none !important;
    border-color: transparent !important;
}

/* Сброс рамки на кнопке избранного */
.btn-favorite {
    border: none;
}

/* Убираем все бордеры, outline и box-shadow у кнопок избранного при любых состояниях */
.btn-favorite,
.btn-favorite:focus,
.btn-favorite:active,
.btn-favorite:focus-visible,
.btn-favorite:focus-within,
.btn-favorite:hover,
.btn-favorite:active:focus,
.btn-favorite.active,
.btn-favorite.active:focus {
    outline: none !important;
    border: none !important;
    box-shadow: none !important;
    border-color: transparent !important;
}

/* Анимация нажатия для избранного */
.btn-favorite .icon {
    transition: transform 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

/* Логика переключения иконок избранного */
.btn-favorite .favorite-icon-active {
    display: none;
}

.btn-favorite .favorite-icon-inactive {
    display: inline-block;
}

[data-favorite-toggle][data-status="1"] .favorite-icon-inactive {
    display: none;
}

[data-favorite-toggle][data-status="1"] .favorite-icon-active {
    display: inline-block;
}

/* Стили для кнопки "Благодарность" */
.btn-gratitude.active .icon__path,
.btn-gratitude.active .icon__path path {
    fill: url(#gradient-blue-purple) !important;
    color: transparent !important;
}

.btn-gratitude:hover svg path {
    fill: #2196f3 !important;
}

.btn-gratitude svg {
    filter: none;
}

/* Стили для кнопки "Поделиться" (Share) */
.btn-share .share-icon {
    transition: transform 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275), fill 0.25s ease;
}

.btn-share .share-icon.icon--gradient {
    fill: url(#gradient-blue-purple) !important;
    color: transparent !important;
}

/* ==========================================================================
   5.1 ЕДИНАЯ КНОПКА «НАЗАД» (цвет и эффект — в одном месте)
   ========================================================================== */
:root {
    --nav-back-hover-bg: #232336;
    --nav-back-active-scale: 1.15;
}
/* Специфичность выше .navbar .nav-link и .btn, чтобы стили не перебивались */
a.nav-back-btn,
.navbar .nav-link.nav-back-btn,
.btn.nav-back-btn,
.chat-back-btn.nav-back-btn {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: 40px !important;
    height: 40px !important;
    min-width: 40px !important;
    min-height: 40px !important;
    padding: 0 !important;
    border-radius: 50%;
    transition: background-color 0.2s ease;
    text-decoration: none;
}
a.nav-back-btn:hover,
.navbar .nav-link.nav-back-btn:hover,
.btn.nav-back-btn:hover,
.chat-back-btn.nav-back-btn:hover {
    background-color: var(--nav-back-hover-bg) !important;
}
a.nav-back-btn .icon,
.nav-back-btn .icon {
    transition: transform 0.2s ease;
}
a.nav-back-btn:active .icon,
.navbar .nav-link.nav-back-btn:active .icon,
.btn.nav-back-btn:active .icon,
.chat-back-btn.nav-back-btn:active .icon {
    transform: scale(var(--nav-back-active-scale));
}

/* ==========================================================================
   5.2 НИЖНЕЕ МЕНЮ (bottom-nav) — тот же ховер и увеличение иконки
   ========================================================================== */
.bottom-nav .nav-item {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 1;
}
.bottom-nav .nav-link,
.bottom-nav .nav-item .btn {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
    min-height: 44px !important;
    padding: 0 !important;
    border-radius: 50%;
    border: none;
    background: transparent;
    transition: background-color 0.2s ease;
    text-decoration: none;
    transform: none !important;
}
.bottom-nav .nav-link:hover,
.bottom-nav .nav-item .btn:hover {
    background-color: var(--nav-back-hover-bg) !important;
}
.bottom-nav .nav-link:active,
.bottom-nav .nav-item .btn:active {
    transform: none !important;
}
.bottom-nav .nav-link .icon,
.bottom-nav .nav-item .btn .icon {
    transition: transform 0.2s ease;
}
.bottom-nav .nav-link:active .icon,
.bottom-nav .nav-item .btn:active .icon {
    transform: scale(var(--nav-back-active-scale));
}

/* ==========================================================================
   5.3 ИКОНКИ В «СОХРАНЁННОМ» / ИЗБРАННОМ (subnav — тот же ховер и увеличение)
   ========================================================================== */
main .subnav-inner .nav-item {
    display: flex;
    align-items: center;
    justify-content: center;
}
main .subnav-inner .nav-link {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
    min-height: 44px !important;
    padding: 0 !important;
    border-radius: 50%;
    transition: background-color 0.2s ease;
    text-decoration: none;
}
main .subnav-inner .nav-link:hover {
    background-color: var(--nav-back-hover-bg) !important;
}
main .subnav-inner .nav-link .icon {
    transition: transform 0.2s ease;
}
main .subnav-inner .nav-link:active .icon {
    transform: scale(var(--nav-back-active-scale));
}

/* ==========================================================================
   6. СПЕЦИАЛЬНЫЕ СЛУЧАИ
   ========================================================================== */

/* Сброс старых стилей для SVG внутри кнопок с data-limit */
button[data-limit] svg {
    display: inline-block !important;
    transform: none !important;
    transition: transform 0.3s ease;
}

/* Когда меню активно — красим иконку градиентом */
.nav-link.active .icon {
    fill: url(#gradient-blue-purple) !important;
}