/* کانتینر */
.pin-main-wrapper {
    max-width: 1440px; margin: 0 auto; padding: 20px;
    position: relative;
}

/* پس‌زمینه زنده (اشکال هندسی CSS) */
.edu-bg { position: fixed; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; }
.shape { position: absolute; opacity: 0.05; animation: float 20s infinite linear; }
.s-pencil { /* مداد با CSS */
    width: 20px; height: 100px; background: #333; top: 10%; left: 5%;
    transform: rotate(45deg);
}
.s-pencil::after { /* نوک مداد */
    content:''; position:absolute; bottom:-10px; left:0; 
    border-left:10px solid transparent; border-right:10px solid transparent; border-top:10px solid #333;
}
.s-circle {
    width: 100px; height: 100px; border: 5px solid #333; border-radius: 50%;
    top: 50%; right: 10%; animation-duration: 30s;
}
@keyframes float { 0% { transform: translateY(0) rotate(0deg); } 50% { transform: translateY(50px) rotate(10deg); } 100% { transform: translateY(0) rotate(0deg); } }


/* هدر */
.pin-cat-header { text-align: center; margin-bottom: 30px; }
.pin-cat-header h1 { font-size: 2.5rem; font-weight: 900; margin: 0; color: #111; }
.pin-meta-info { color: #666; font-size: 0.9rem; margin-top: 5px; }

/* فیلترها */
.pin-filter-bar { display: flex; justify-content: center; gap: 10px; margin-bottom: 30px; flex-wrap: wrap; }
.p-pill {
    background: transparent; border: none; padding: 10px 16px;
    font-weight: 700; color: #111; cursor: pointer; border-radius: 20px; transition: 0.2s;
}
.p-pill:hover { background: #e2e2e2; }
.p-pill.active { background: #111; color: white; }

/* --- گرید میسونری --- */
.masonry-container {
    column-count: 5; column-gap: 16px;
}
.pin-item {
    break-inside: avoid; margin-bottom: 16px;
    position: relative; transition: opacity 0.3s;
}

.pin-inner {
    cursor: pointer;
}

/* بخش مدیا (عکس یا متن) */
.pin-media {
    position: relative; border-radius: 16px; overflow: hidden;
    background: #f0f0f0;
}
.pin-media img { width: 100%; display: block; border-radius: 16px; }

/* کارت متن (نقل قول) */
.quote-card-visual {
    padding: 40px 20px; text-align: center; color: white;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    min-height: 250px;
}
.quote-mark { font-size: 4rem; line-height: 0.5; opacity: 0.5; margin-bottom: 10px; }
.quote-card-visual p { font-size: 1.2rem; font-weight: 800; line-height: 1.5; margin: 0; }

/* فایل: components/css/pinterest.css */

.pin-hover-layer {
    position: absolute; inset: 0; 
    background: rgba(0,0,0,0.4);
    opacity: 0; transition: 0.2s; 
    display: flex; flex-direction: column; justify-content: space-between; 
    padding: 12px;
    
    /* ✅ این خط رو اضافه کن: */
    pointer-events: none; /* کلیک‌ها ازش رد بشن و به لینک زیرش بخورن */
}

/* ✅ و این خط‌ها رو هم اضافه کن تا دکمه‌ها هنوز کار کنن: */
.pin-hover-layer button, 
.pin-hover-layer a {
    pointer-events: auto; /* دکمه‌های توی لایه هاور، قابل کلیک باشن */
}
.pin-media:hover .pin-hover-layer { opacity: 1; }

/* دکمه Save */
.btn-save {
    background: #e60023; color: white; border: none; padding: 12px 20px;
    border-radius: 24px; font-weight: 700; font-size: 1rem; cursor: pointer;
    align-self: flex-end; /* راست چین */
}
.btn-save:hover { background: #ad081b; }

/* دکمه Share (CSS Icon) */
.bottom-actions { display: flex; justify-content: flex-end; }
.btn-share {
    width: 32px; height: 32px; background: rgba(255,255,255,0.9);
    border-radius: 50%; border: none; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    transition: 0.2s;
}
.btn-share:hover { background: white; transform: scale(1.1); }

.icon-share {
    width: 12px; height: 12px;
    border-top: 2px solid #111; border-right: 2px solid #111;
    transform: rotate(-45deg); margin-top: 2px; position: relative;
}
.icon-share::after {
    content:''; position: absolute; width: 2px; height: 12px; background: #111;
    transform: rotate(-45deg); top: 2px; left: 5px;
}

/* کپشن و سه نقطه */
.pin-caption {
    display: flex; justify-content: space-between; align-items: flex-start;
    padding: 8px 5px 0;
}
.pin-title {
    font-size: 0.9rem; font-weight: 600; color: #111; margin: 0; line-height: 1.3;
    max-width: 85%;
}
.pin-more { position: relative; }
.btn-dots {
    background: none; border: none; cursor: pointer; padding: 5px;
}
.icon-dots {
    width: 3px; height: 3px; background: #111; border-radius: 50%;
    box-shadow: 5px 0 0 #111, -5px 0 0 #111;
}

/* پاپ‌آپ منو */
.popover-menu {
    position: absolute; top: 100%; left: 0; background: white;
    border-radius: 8px; box-shadow: 0 5px 15px rgba(0,0,0,0.15);
    width: 120px; display: none; flex-direction: column; padding: 5px; z-index: 10;
}
.popover-menu.show { display: flex; }
.popover-menu a {
    text-decoration: none; color: #333; padding: 8px; font-size: 0.85rem; border-radius: 4px;
}
.popover-menu a:hover { background: #f0f0f0; }


/* --- بخش پایان (اقیانوس) --- */
.end-ocean {
    text-align: center; margin-top: 60px; padding: 40px;
    background: linear-gradient(180deg, #f0f8ff 0%, #e0f2fe 100%);
    border-radius: 30px; border: 2px dashed #bae6fd;
}
.ocean-icon { font-size: 3rem; margin-bottom: 10px; display: block; animation: bounce 2s infinite; }
.ocean-btn {
    display: inline-block; margin-top: 15px; padding: 12px 25px;
    background: #0ea5e9; color: white; text-decoration: none; border-radius: 50px;
    font-weight: 800; box-shadow: 0 5px 15px rgba(14, 165, 233, 0.4);
    transition: 0.3s;
}
.ocean-btn:hover { transform: scale(1.05); background: #0284c7; }
@keyframes bounce { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }


/* ریسپانسیو (موبایل و تبلت) */
@media (max-width: 1200px) { .masonry-container { column-count: 4; } }
@media (max-width: 900px) { .masonry-container { column-count: 3; } }
@media (max-width: 600px) { 
    .masonry-container { column-count: 2; column-gap: 10px; } 
    .pin-title { font-size: 0.8rem; }
    .btn-save { padding: 8px 14px; font-size: 0.85rem; }
}

/* استایل لینک‌های دور کارت */
.quote-link, .img-link { text-decoration: none; color: inherit; display: block; height: 100%; }

/* حالت خالی (Empty State) */
.empty-category-box {
    grid-column: 1 / -1; /* کل عرض رو بگیره */
    text-align: center;
    padding: 60px 20px;
    background: #f9f9f9;
    border-radius: 20px;
    border: 2px dashed #ddd;
    margin-bottom: 40px;
}
.empty-icon { font-size: 4rem; margin-bottom: 15px; opacity: 0.5; }
.back-btn {
    display: inline-block; margin-top: 20px;
    background: #111; color: white; padding: 10px 25px;
    border-radius: 50px; text-decoration: none; font-weight: bold;
}
.back-btn:hover { background: #333; }

/* رپر دکمه شیر برای پوزیشن دهی منو */
.share-dropdown-wrapper {
    position: absolute; bottom: 12px; left: 12px; /* پایین چپ */
    z-index: 20;
}

/* استایل دکمه شیر (کد خودت + کمی تمیزکاری) */
.nc-PostCardDropdownShare {
    position: relative;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    background: rgba(255, 255, 255, 0.9);
    color: #111;
    width: 32px; height: 32px;
    border: none; cursor: pointer;
    transition: 0.2s;
    pointer-events: auto; /* مهم: تا کلیک بشه */
    box-shadow: 0 2px 8px rgba(0,0,0,0.15);
}
.nc-PostCardDropdownShare:hover {
    background: white; color: #4D96FF; transform: scale(1.1);
}

/* منوی بازشو (Dropdown) */
.share-menu-content {
    position: absolute; bottom: 40px; left: 0; /* باز شدن رو به بالا */
    background: white; border-radius: 16px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.15);
    width: 180px; padding: 8px;
    display: none; flex-direction: column; gap: 4px;
    opacity: 0; transform: translateY(10px);
    transition: 0.2s; pointer-events: auto;
}
/* کلاس فعال برای نمایش */
.share-dropdown-wrapper.active .share-menu-content {
    display: flex; opacity: 1; transform: translateY(0);
}

/* آیتم‌های منو */
.sm-item {
    display: flex; align-items: center; justify-content: space-between;
    padding: 8px 12px; border-radius: 10px;
    text-decoration: none; color: #333; font-size: 0.85rem; font-weight: 600;
    cursor: pointer; transition: 0.2s;
}
.sm-item:hover { background: #f3f4f6; }

.sm-divider { height: 1px; background: #eee; margin: 4px 0; }

/* آیکون‌های رنگی شبکه‌ها (با CSS) */
.sm-icon {
    width: 24px; height: 24px; border-radius: 50%; color: white;
    display: flex; align-items: center; justify-content: center;
    font-size: 0.8rem; font-weight: bold;
}
.fb-icon { background: #1877F2; }
.tw-icon { background: #1DA1F2; }
.tg-icon { background: #229ED9; font-size: 0.7rem; }
.wa-icon { background: #25D366; }