/******* Do not edit this file *******
Simple Custom CSS and JS - by Silkypress.com
Saved: Feb 05 2026 | 16:37:02 */
/* متغیرهای رنگی */
#unique-prop-section {
    --prop-primary: #6c0c4c;
    --prop-accent: #f9c41f;
    --prop-bg: #fff;
    --prop-text: #333;
    --prop-scroll-thumb: #dadce0; 
}

/* --- تنظیمات کلی کانتینر --- */
#unique-prop-section.prop-quick-access-container {
    width: 100%;
    background: var(--prop-bg);
    padding: 15px 0 10px 0;
    font-family: inherit;
    text-align: right;
    direction: rtl;
    box-sizing: border-box;
    line-height: normal;
    position: relative;
    z-index: 999;
    border-bottom: 1px solid #eee;
    transition: box-shadow 0.3s ease;
}

/* حالت چسبان (پیش‌فرض دسکتاپ) */
#unique-prop-section.prop-quick-access-container.is-sticky {
    position: fixed !important;
    top: 0;
    z-index: 99999;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
    border-bottom: 1px solid #ddd;
    border-radius: 0 0 10px 10px;
    padding: 10px 15px;
}
body.admin-bar #unique-prop-section.prop-quick-access-container.is-sticky { top: 32px !important; }
@media screen and (max-width: 782px) {
    body.admin-bar #unique-prop-section.prop-quick-access-container.is-sticky { top: 0 !important; }
}

/* هدر */
#unique-prop-section .prop-header-row {
    display: flex;
    align-items: center;
    justify-content: center; 
    flex-wrap: nowrap;
    gap: 10px;
    padding: 0 10px;
    margin-bottom: 10px;
}

/* متن راهنما */
#unique-prop-section .prop-hint-badge {
    background: rgba(108, 12, 76, 0.05);
    color: #444;
    font-size: 13px;
    font-weight: 700;
    padding: 6px 15px;
    border-radius: 50px;
    display: inline-flex;
    align-items: center;
    border: 1px solid rgba(108, 12, 76, 0.1);
    cursor: pointer;
    width: fit-content;
    max-width: 100%;
    line-height: 1.5;
    text-align: center;
    white-space: nowrap; 
}

/* نقطه تپنده */
#unique-prop-section .pulse-dot {
    width: 6px;
    height: 6px;
    background-color: var(--prop-accent);
    border-radius: 50%;
    margin-left: 8px;
    display: inline-block;
    flex-shrink: 0;
    animation: prop-pulse-yellow 2s infinite;
}
@keyframes prop-pulse-yellow {
    0% { box-shadow: 0 0 0 0 rgba(249, 196, 31, 0.7); }
    70% { box-shadow: 0 0 0 5px rgba(249, 196, 31, 0); }
    100% { box-shadow: 0 0 0 0 rgba(249, 196, 31, 0); }
}

/* اسکرول بار */
#unique-prop-section .prop-scroll-wrapper {
    width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    padding: 5px 0 10px 0;
    cursor: grab;
    user-select: none;
    text-align: center;
}
#unique-prop-section .prop-scroll-wrapper::-webkit-scrollbar { height: 4px; }
#unique-prop-section .prop-scroll-wrapper::-webkit-scrollbar-thumb { background: var(--prop-scroll-thumb); border-radius: 10px; }

/* لیست آیتم‌ها */
#unique-prop-section .prop-list {
    display: inline-flex;
    gap: 12px;
    list-style: none !important;
    padding: 0 !important;
    margin: 0 auto !important;
    width: max-content; 
    min-width: 100%; 
    justify-content: center;
}

@media screen and (max-width: 768px) {
    #unique-prop-section .prop-list {
        min-width: fit-content;
        justify-content: flex-start;
        padding-right: 15px !important;
        padding-left: 15px !important;
    }
    #unique-prop-section .prop-hint-badge {
        font-size: 11px; 
        padding: 5px 10px;
    }
}

#unique-prop-section .prop-item {
    text-align: center;
    width: 75px;
    flex-shrink: 0;
    transition: transform 0.3s ease;
}
#unique-prop-section .prop-item:hover { transform: translateY(-5px); }

#unique-prop-section .prop-link {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-decoration: none !important;
    color: var(--prop-text);
}

/* --- تنظیمات باکس عکس --- */
#unique-prop-section .prop-img-box {
    width: 60px;
    height: 60px;
    background: #fff;
    border-radius: 50%;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
    border: 1px solid #f0f0f0;
    transition: all 0.3s ease;
    padding: 0; 
    margin-bottom: 5px;
    box-sizing: border-box;
}

#unique-prop-section .prop-link:hover .prop-img-box {
    border-color: var(--prop-accent);
    box-shadow: 0 5px 15px rgba(108, 12, 76, 0.15);
}

#unique-prop-section .prop-img-box img { 
    width: 100%;
    height: 100%;
    object-fit: cover; 
    border-radius: 50%;
}

/* استثنای ForFX */
#unique-prop-section a[href*="forfx"] .prop-img-box img {
    object-fit: contain !important;
    padding: 8px !important;
    background-color: #fff;
}

/* نام لوگو */
#unique-prop-section .prop-name {
    font-size: 11px;
    font-weight: 700;
    color: #444;
    line-height: 1.3;
}
#unique-prop-section .prop-link:hover .prop-name { color: var(--prop-primary); }

@media screen and (max-width: 768px) {
    #unique-prop-section .prop-name { display: none !important; }
    #unique-prop-section .prop-img-box { margin-bottom: 0; }
}

/* -------- بهینه‌سازی جدید برای موبایل (تمام صفحه + لوگو کوچک) -------- */
@media screen and (max-width: 768px) {
    
    /* 1. فورس کردن عرض تمام صفحه در حالت چسبان */
    #unique-prop-section.prop-quick-access-container.is-sticky {
        width: 100% !important; /* نادیده گرفتن عرض محاسبه شده توسط JS */
        left: 0 !important;     /* چسبیدن به لبه چپ */
        right: 0 !important;    /* چسبیدن به لبه راست */
        border-radius: 0 !important; /* حذف گردی گوشه‌ها در حالت تمام صفحه */
        padding-left: 0 !important;
        padding-right: 0 !important;
        border-left: none;
        border-right: none;
    }

    /* 2. کاهش ارتفاع کلی نوار */
    #unique-prop-section.prop-quick-access-container {
        padding: 8px 0 !important;
    }
    
    /* 3. کوچک کردن دایره لوگوها به 40 پیکسل */
    #unique-prop-section .prop-img-box {
        width: 40px !important;
        height: 40px !important;
        border-width: 1px !important;
    }

    /* 4. تنظیم عرض آیتم برای فشرده‌تر شدن */
    #unique-prop-section .prop-item {
        width: 50px !important;
    }

    /* 5. تنظیم لوگوی ForFX در سایز کوچک */
    #unique-prop-section a[href*="forfx"] .prop-img-box img {
        padding: 4px !important;
    }
}
/*  fix clc*/
@media (min-width: 1025px) {
    /* 1. تنظیم ارتفاع کل کانتینر (کمی جمع‌وجورتر) */
    #unique-prop-section.prop-quick-access-container {
        height: 155px !important; /* کاهش ارتفاع کل */
        min-height: 155px !important;
        display: flex;
        flex-direction: column;
        justify-content: center;
        overflow: hidden; 
    }

    /* 2. تنظیم دقیق نوار اسکرول (چسبیدن به متن) */
    #unique-prop-section .prop-scroll-wrapper {
        /* محاسبه دقیق: 60px عکس + 20px متن + 10px پدینگ + 5px اسکرول */
        height: 100px !important; /* ارتفاع را کم کردیم تا اسکرول بیاید بالا */
        min-height: 100px !important;
        
        display: flex;
        align-items: flex-start;
        
        /* تغییر مهم: auto باعث می‌شود اگر اسکرول نبود، مخفی شود (ولی ارتفاع جاش رو نگه میداره) */
        overflow-x: auto !important; 
        
        /* اسکرول نرم */
        scroll-behavior: smooth;
        padding-bottom: 5px !important; /* فاصله کم بین متن و اسکرول */
    }

    /* 3. زیبا کردن نوار اسکرول (باریک و شیک) */
    #unique-prop-section .prop-scroll-wrapper::-webkit-scrollbar {
        height: 5px !important; /* ارتفاع نوار اسکرول خیلی باریک */
    }
    
    #unique-prop-section .prop-scroll-wrapper::-webkit-scrollbar-track {
        background: #f1f1f1; /* رنگ پس‌زمینه ریل اسکرول */
        border-radius: 10px;
    }
    
    #unique-prop-section .prop-scroll-wrapper::-webkit-scrollbar-thumb {
        background: #ccc; /* رنگ دستگیره اسکرول */
        border-radius: 10px;
    }
    
    #unique-prop-section .prop-scroll-wrapper::-webkit-scrollbar-thumb:hover {
        background: #888; /* رنگ دستگیره وقتی موس روش میره */
    }

    /* 4. قفل سایز عکس */
    #unique-prop-section .prop-img-box {
        width: 60px !important;
        height: 60px !important;
        min-width: 60px !important;
        flex-shrink: 0;
    }
    
    /* 5. قفل متن */
    #unique-prop-section .prop-name {
        white-space: nowrap;
        height: 20px;
        line-height: 20px;
        overflow: hidden;
        margin-top: 5px !important;
    }
}
