body {
        max-width: 100%;
        margin: 0 auto;
        padding: 0px 4px;
        padding-bottom: 50px; /* از قبل داشتید، نگه داشتم */
    }
    h2 {
        margin: 0px 0 6px 0;
        font-size:10px;
        color:#000000!important;
        text-align:center;
        text-align:right;
    }
    
    /* از این به بعد div { overflow: hidden; } نداریم، درست است */
    div {
        margin-bottom: 0;
        max-width: 100%;
    }
    
    img, video {
      max-width: 100%;
        height: auto;
        display: block;
    
}
img:not([src]), video:not([src]) {
  background: linear-gradient(90deg, #ddd, #ccc, #ddd);
  background-size: 200% 100%;
  animation: shimmer 1.2s infinite;
}

@keyframes shimmer {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

    a {
        color: #000000;
        text-decoration: none;
        -webkit-tap-highlight-color: transparent;

    }
    
    

.video-duration {
    position: absolute;
    top: 8px;
    left: 8px;
     background: rgba(255, 255, 255, .81);
  z-index: 3;
    color: black;
    padding: 11px 6px;
    border-radius: 20px;
    font-size: 11px;
}


    .pinterest-grid {
        padding: 0;
        margin: 0 auto;
    }
    
    .grid-item {
        width: 50%; /* عرض هر ستون (۲ ستونه) */
        margin-bottom: 0;
        padding: 2.5px; /* ایجاد 5px فاصله */
        box-sizing: border-box;
    }
	

/* برای تبلت و دسکتاپ‌های کوچک (۳ ستونه) */
@media (min-width: 768px) {
	 body {
		 max-width: 40%; }
	
}

/* برای دسکتاپ‌های خیلی بزرگ (۴ ستونه) */
@media (min-width: 1024px) {
 
	 body {
		 max-width: 30%; }
	
}

    .grid-item .media-container {
        border-radius: 20px;
        overflow: hidden;
        line-height: 0;
    }

    .hashtags-container {
        display: flex;
        gap: 5px;
        margin: 10px 0;
        direction: rtl;
        overflow-x: auto;
        white-space: nowrap;
        padding-bottom: 5px;
    }

    .hashtags-container a {
        background: #f0f0f0;
        padding: 8px 15px;
        border-radius: 10px;
        text-decoration: none;
        color: #333;
        font-size: 14px;
        transition: all 0.3s ease;
        flex-shrink: 0;
    }
    .hashtags-container a:hover {
        background: #000000;
        color: white;
    }
    .hashtags-container a.active {
        background: #000000;
        color: white;
        outline: none;
    }
    
.hashtags-container {
    overflow-x: auto; /* برای اطمینان از امکان اسکرول */
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* IE و Edge */
}

/* Chrome, Safari, Opera */
.hashtags-container::-webkit-scrollbar {
    display: none;
}




    /* ▼▼ CSS دایره‌ی لودینگ (loader-spinner) ▼▼ */
    .loader-spinner {
        width: 30px;
        height: 30px;
        border: 4px solid #f0f0f0; /* رنگ حلقه‌ی خاکستری */
        border-top-color: #333;    /* رنگ بخش چرخان (مشکی) */
        border-radius: 50%;
        animation: spin 1s linear infinite;
        display: none; /* در ابتدا مخفی است */
    }

    @keyframes spin {
        to { transform: rotate(360deg); }
    }