/* Stats Container */
.stats-container {
    /* glassmorphism styles */
    background: rgba(var(--bg-surface), 0.7);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    border: 1px solid rgba(var(--border-light), 0.4);
    box-shadow: var(--shadow-soft),
    inset 0 1px 0 0 rgba(255, 255, 255, 0.1),
    inset 0 -1px 0 0 rgba(0, 0, 0, 0.05);
    margin: 2.5rem 0;
    display: flex;
    align-items: center;
    gap: 1.5rem;
    padding: 1.5rem;
    border-radius: var(--radius-lg);
    transition: var(--transition-smooth);
}

.stats-container:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-medium);
}

/* LIKE BUTTON WITH COUNTER */
.stats-btn.like-with-count {
    display: flex;
    align-items: center;
    gap: 8px;
    background: none;
    cursor: pointer;
    padding: 8px 16px;
    border-radius: 20px;
    transition: var(--transition-smooth);
    font-size: 1rem;
    border: 1px solid rgba(var(--border-light), 0.2);
    color: rgb(var(--text-secondary));
}

.stats-btn.like-with-count:hover {
    background: rgba(var(--bg-primary), 0.3);
    transform: scale(1.05);
    border-color: rgba(var(--primary-glow), 0.3);
}

.stats-btn.like-with-count.liked {
    color: rgb(var(--danger-glow));
    border-color: rgba(var(--danger-glow), 0.4);
    background: rgba(var(--danger-glow), 0.1);
}

.stats-btn.like-with-count.unliked {
    color: rgb(var(--text-secondary));
    border-color: rgba(var(--border-light), 0.2);
}

.stats-btn.like-with-count.liked:hover {
    color: rgb(var(--danger-glow));
    border-color: rgba(var(--danger-glow), 0.6);
    background: rgba(var(--danger-glow), 0.15);
    transform: translateY(-1px) scale(1.05);
    box-shadow: 0 4px 15px -3px rgba(var(--danger-glow), 0.2);
}

.stats-btn.like-with-count.unliked:hover {
    color: rgb(var(--primary-glow));
    border-color: rgba(var(--primary-glow), 0.3);
    background: rgba(var(--primary-glow), 0.05);
}

.likes-count {
    font-size: 0.9rem;
    font-weight: var(--font-weight-medium);
}

.stats-count {
    font-size: 0.9rem;
    color: rgb(var(--text-secondary));
    font-weight: var(--font-weight-medium);
    display: flex;
    align-items: center;
    gap: 0.375rem;
}

/* ===== RESPONSIVE DESIGN ===== */
@media (max-width: 768px) {
    .stats-container {
        flex-direction: column; /* Вертикально */
        align-items: flex-start; /* Всё слева */
        gap: 0.75rem;
        padding: 1.25rem;
        margin: 2rem 0;
    }

    .stats-btn.like-with-count {
        padding: 6px 14px;
        font-size: 0.9rem;
        min-width: auto;
        flex-shrink: 0;
        align-self: flex-start; /* Лайки слева */
    }

    .likes-count {
        font-size: 0.85rem;
    }

    .stats-count {
        font-size: 0.85rem;
        flex-shrink: 0;
        align-self: flex-start; /* Просмотры слева, но ниже */
    }
}

@media (max-width: 480px) {
    .stats-container {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.5rem;
        padding: 1rem;
        margin: 1.5rem 0;
    }

    .stats-btn.like-with-count {
        padding: 5px 12px;
        font-size: 0.85rem;
        gap: 6px;
        flex-shrink: 0;
        align-self: flex-start;
    }

    .stats-count {
        font-size: 0.8rem;
        gap: 0.25rem;
        flex-shrink: 0;
        align-self: flex-start;
    }

    .likes-count {
        font-size: 0.8rem;
    }
}

@media (max-width: 360px) {
    .stats-container {
        gap: 0.4rem;
        padding: 0.75rem;
    }

    .stats-btn.like-with-count {
        padding: 4px 10px;
        font-size: 0.8rem;
    }

    .stats-count {
        font-size: 0.75rem;
    }

    .likes-count {
        font-size: 0.75rem;
    }

    .like-text {
        display: none;
    }

    .stats-count span:not(.bi) {
        display: none;
    }

    .stats-count .bi {
        margin-right: 0;
    }
}

@media (max-width: 380px) {
    .stats-container {
        gap: 0.5rem;
        padding: 0.875rem;
    }

    .stats-btn.like-with-count {
        padding: 4px 10px;
        font-size: 0.8rem;
    }

    .stats-count {
        font-size: 0.75rem;
    }
}




/*!* Stats Container *!*/
/*.stats-container {*/
/*    !* glassmorphism styles *!*/
/*    background: rgba(var(--bg-surface), 0.7);*/
/*    backdrop-filter: blur(20px) saturate(180%);*/
/*    -webkit-backdrop-filter: blur(20px) saturate(180%);*/
/*    border: 1px solid rgba(var(--border-light), 0.4);*/
/*    box-shadow: var(--shadow-soft),*/
/*    inset 0 1px 0 0 rgba(255, 255, 255, 0.1),*/
/*    inset 0 -1px 0 0 rgba(0, 0, 0, 0.05);*/
/*    margin: 2.5rem 0;*/
/*    display: flex;*/
/*    align-items: center;*/
/*    gap: 1.5rem;*/
/*    padding: 1.5rem;*/
/*    border-radius: var(--radius-lg);*/
/*    transition: var(--transition-smooth);*/
/*}*/

/*.stats-container:hover {*/
/*    transform: translateY(-2px);*/
/*    box-shadow: var(--shadow-medium);*/
/*}*/

/*!* LIKE BUTTON WITH COUNTER *!*/
/*.stats-btn.like-with-count {*/
/*    display: flex;*/
/*    align-items: center;*/
/*    gap: 8px;*/
/*    background: none;*/
/*    border: none;*/
/*    cursor: pointer;*/
/*    padding: 8px 16px;*/
/*    border-radius: 20px;*/
/*    transition: var(--transition-smooth);*/
/*    font-size: 1rem;*/
/*    border: 1px solid rgba(var(--border-light), 0.2);*/
/*    color: rgb(var(--text-secondary));*/
/*}*/

/*.stats-btn.like-with-count:hover {*/
/*    background: rgba(var(--bg-primary), 0.3);*/
/*    transform: scale(1.05);*/
/*    border-color: rgba(var(--primary-glow), 0.3);*/
/*}*/

/*.stats-btn.like-with-count.liked {*/
/*    color: rgb(var(--danger-glow));*/
/*    border-color: rgba(var(--danger-glow), 0.4);*/
/*    background: rgba(var(--danger-glow), 0.1);*/
/*}*/

/*.stats-btn.like-with-count.unliked {*/
/*    color: rgb(var(--text-secondary));*/
/*    border-color: rgba(var(--border-light), 0.2);*/
/*}*/

/*.stats-btn.like-with-count.liked:hover {*/
/*    color: rgb(var(--danger-glow));*/
/*    border-color: rgba(var(--danger-glow), 0.6);*/
/*    background: rgba(var(--danger-glow), 0.15);*/
/*    transform: translateY(-1px) scale(1.05);*/
/*    box-shadow: 0 4px 15px -3px rgba(var(--danger-glow), 0.2);*/
/*}*/

/*.stats-btn.like-with-count.unliked:hover {*/
/*    color: rgb(var(--primary-glow));*/
/*    border-color: rgba(var(--primary-glow), 0.3);*/
/*    background: rgba(var(--primary-glow), 0.05);*/
/*}*/

/*.likes-count {*/
/*    font-size: 0.9rem;*/
/*    font-weight: var(--font-weight-medium);*/
/*}*/

/*.stats-count {*/
/*    font-size: 0.9rem;*/
/*    color: rgb(var(--text-secondary));*/
/*    font-weight: var(--font-weight-medium);*/
/*    display: flex;*/
/*    align-items: center;*/
/*    gap: 0.375rem;*/
/*}*/

/*!* ===== RESPONSIVE DESIGN ===== *!*/
/*@media (max-width: 768px) {*/
/*    .stats-container {*/
/*        flex-wrap: wrap;*/
/*        gap: 1rem;*/
/*        padding: 1.25rem;*/
/*        margin: 2rem 0;*/
/*    }*/

/*    .stats-btn.like-with-count {*/
/*        padding: 6px 14px;*/
/*        font-size: 0.9rem;*/
/*        min-width: auto;*/
/*        flex-shrink: 0;*/
/*    }*/

/*    .likes-count {*/
/*        font-size: 0.85rem;*/
/*    }*/

/*    .stats-count {*/
/*        font-size: 0.85rem;*/
/*        flex-shrink: 0;*/
/*    }*/
/*}*/

/*@media (max-width: 480px) {*/
/*    .stats-container {*/
/*        flex-direction: row;*/
/*        flex-wrap: nowrap;*/
/*        justify-content: space-between;*/
/*        align-items: center;*/
/*        gap: 0.75rem;*/
/*        padding: 1rem;*/
/*        margin: 1.5rem 0;*/
/*    }*/

/*    .stats-btn.like-with-count {*/
/*        padding: 5px 12px;*/
/*        font-size: 0.85rem;*/
/*        gap: 6px;*/
/*        flex: 1;*/
/*        min-width: 0;*/
/*        justify-content: center;*/
/*    }*/

/*    .stats-count {*/
/*        font-size: 0.8rem;*/
/*        gap: 0.25rem;*/
/*        flex-shrink: 0;*/
/*        min-width: fit-content;*/
/*    }*/

/*    .likes-count {*/
/*        font-size: 0.8rem;*/
/*    }*/

/*    !* Скрываем текст "лайков" на очень маленьких экранах *!*/
/*    @media (max-width: 360px) {*/
/*        .stats-btn.like-with-count {*/
/*            padding: 4px 8px;*/
/*        }*/

/*        .like-text {*/
/*            display: none;*/
/*        }*/

/*        .stats-count span:not(.bi) {*/
/*            display: none;*/
/*        }*/

/*        .stats-count .bi {*/
/*            margin-right: 0;*/
/*        }*/
/*    }*/
/*}*/

/*!* Дополнительные улучшения для мобильных *!*/
/*@media (max-width: 380px) {*/
/*    .stats-container {*/
/*        gap: 0.5rem;*/
/*        padding: 0.875rem;*/
/*    }*/

/*    .stats-btn.like-with-count {*/
/*        padding: 4px 10px;*/
/*        font-size: 0.8rem;*/
/*    }*/

/*    .stats-count {*/
/*        font-size: 0.75rem;*/
/*    }*/
/*}*/