.elementor-29838 .elementor-element.elementor-element-c3edfaf{--display:flex;}/* Start custom CSS for shortcode, class: .elementor-element-851b154 *//* --- استایل کلی کانتینر و دکمه‌ها --- */

/* کانتینر اصلی */
.ra-platforms-container {
    margin-bottom: 10px;
    border-top: 1px solid #f1f1f1;
    padding-top: 20px;
    display: flex;
    flex-direction: column;
    gap: 15px; /* فاصله بین ردیف‌های صوتی و الکترونیک */
}

/* ردیف هر گروه */
.ra-platform-group {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
}

/* لیبل کنار (مثلا: نسخه صوتی:) */
.ra-group-label {
    font-size: 14px;
    font-weight: 700;
    color: #4a4a4a;
    min-width: 130px; /* تراز کردن ستون‌ها */
    display: flex;
    align-items: center;
    gap: 8px;
}
.ra-group-label i { font-size: 16px; color: #888; }

/* نگهدارنده لینک‌ها */
.ra-links-wrapper {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

/* --- استایل دکمه‌های کپسولی --- */

.ra-platform-link {
    display: inline-flex;
    align-items: center;
    gap: 8px; /* فاصله بین آیکون و متن */
    padding: 5px; /* پدینگ سمت راست برای متن، سمت چپ برای آیکون */
    border-radius: 30px; /* کاملا گرد (کپسولی) */
    background: #f9f9f9;
    border: 1px solid #e9e9e9;
    color: #666;
    font-size: 13px;
    font-weight: 500;
    text-decoration: none !important;
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    box-shadow: 0 1px 2px rgba(0,0,0,0.02);
}

/* افکت هاور: رنگی شدن بردر، متن و سایه */
.ra-platform-link:hover {
    background: #fff;
    border-color: var(--brand-color);
    color: var(--brand-color);
    box-shadow: 0 3px 8px rgba(0,0,0,0.08);
    transform: translateY(-1px); /* حرکت جزئی به بالا */
}

/* --- تنظیمات آیکون‌ها (بخش مهم تغییر یافته) --- */

.ra-platform-link .ra-icon {
    width: 22px;  /* اندازه آیکون کمی بزرگتر شد */
    height: 22px;
    border-radius: 50%; /* گرد کردن کامل آیکون */
    background-color: #fff; /* پس زمینه سفید برای اینکه آیکون‌های PNG بهتر دیده شوند */
    border: 1px solid #eee; /* یک خط نازک دور آیکون */
    
    /* تنظیمات نمایش تصویر */
    background-size: contain; /* تصویر کامل درون دایره جا بگیرد */
    background-repeat: no-repeat;
    background-position: center;
    
    /* افکت سیاه و سفید اولیه */
    filter: grayscale(100%); 
    opacity: 0.9;
    transition: all 0.3s ease;
}

/* در حالت هاور، آیکون رنگی شود */
.ra-platform-link:hover .ra-icon {
    filter: grayscale(0%);
    opacity: 1;
    border-color: transparent; /* حذف بوردر دور آیکون در حالت هاور */
}

/* --- جایگذاری لینک آیکون‌های شما --- */

/* آیکون برای لینک عمومی (نسخه صوتی بدون پلتفرم خاص) */
.ra-platform-link.brand-default .ra-icon {
    background-color: #eee; /* رنگ طوسی پیشفرض */
    /* می‌توانید اینجا یک آیکون عمومی صدا هم بگذارید */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='none' d='M0 0h24v24H0z'/%3E%3Cpath d='M12 3v10.55c-.59-.34-1.27-.55-2-.55-2.21 0-4 1.79-4 4s1.79 4 4 4 4-1.79 4-4V7h4V3h-6z' fill='%23888888'/%3E%3C/svg%3E");
    background-size: 14px;
}

/* نوار (Navaar) */
.ra-platform-link.brand-navaar .ra-icon {
    /* توجه: لوگوی نوار عریض است و در دایره کوچک می‌شود، اگر آیکون مربعی داشتید بهتر است */
    background-image: url('https://neyestanbook.com/wp-content/uploads/2026/01/logo_blue.png');
}

/* طاقچه (Taaghche) */
.ra-platform-link.brand-taaghche .ra-icon {
    background-image: url('https://neyestanbook.com/wp-content/uploads/2026/01/logo48.png');
}

/* فیدیبو (Fidibo) */
.ra-platform-link.brand-fidibo .ra-icon {
    background-image: url('https://neyestanbook.com/wp-content/uploads/2026/01/favicon-96x96-1.webp');
}

/* کتابراه (Ketabrah) */
.ra-platform-link.brand-ketabrah .ra-icon {
    background-image: url('https://neyestanbook.com/wp-content/uploads/2026/01/favicon.png');
}

/* --- حالت موبایل --- */
@media (max-width: 768px) {
    .ra-platform-group {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }
    .ra-group-label {
        min-width: auto;
        margin-bottom: 2px;
        font-size: 13px;
    }
    .ra-platform-link {
        font-size: 12px;
        padding: 4px 10px 4px 4px;
    }
    .ra-platform-link .ra-icon {
        width: 20px;
        height: 20px;
    }
}/* End custom CSS */