/* 🆕 v1.5.5: اوورلی سبک هنگام ذخیره/آپلود (فاویکون سایت وسط صفحه می‌چرخه) */
.s4w-loading-overlay {
    position: fixed; inset: 0; background: rgba(0,0,0,.55);
    display: flex; align-items: center; justify-content: center;
    z-index: 999999;
}
.s4w-loading-overlay img { width: 46px; height: 46px; animation: s4w-spin 1s linear infinite; }
@keyframes s4w-spin { to { transform: rotate(360deg); } }

/* 🆕 v1.5.4: محتوای نمونه‌کار/فروشگاه که جای بخش «لینک‌ها» تزریق می‌شه، برخلاف
   خودِ اون بخش هیچ محدودیت عرضی نداره (چون بیرون از .profile-links قرار می‌گیره)
   و همین باعث می‌شد روی دسکتاپ عکس‌ها خیلی بزرگ و کشیده بشن. اینجا یک عرض
   حداکثریِ معقول و وسط‌چین براش تعریف می‌کنیم، هماهنگ با عرض کارت پروفایل. */
.s4w-work-inline, .s4w-works-inline, .s4w-store-inline, .s4w-product-inline {
    max-width: 600px;
    margin: 0 auto;
}
.s4m-work-page, .s4m-store-page {
    max-width: 720px;
    margin: 30px auto;
    padding: 0 16px;
    font-family: 'Vazirmatn', Tahoma, sans-serif;
}
.s4m-work-cover, .s4m-work-gallery img {
    display: block;
    width: 100%;
    max-width: 420px;   /* کوچیک‌تر و متناسب با کارت پروفایل، بدون کراپ */
    height: auto;       /* نسبت اصلی عکس حفظ بشه */
    margin: 0 auto 12px;
    border-radius: 9px;
}
.s4m-work-gallery {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 10px;
}
.s4m-work-play-btn, .s4m-buy-btn {
    display: inline-block;
    background: #1b1b1b;
    color: #fff;
    border: none;
    padding: 10px 18px;
    border-radius: 8px;
    cursor: pointer;
    font-family: inherit;
    text-decoration: none;
}
.s4m-work-dsp-links { list-style: none; padding: 0; display: flex; gap: 8px; flex-wrap: wrap; }
.s4m-work-dsp-links a { padding: 6px 12px; border: 1px solid #ddd; border-radius: 20px; text-decoration: none; }
/* 🐛 v1.4 فیکس: این کلاس تو HTML به‌عنوان s4w-store-grid رندر می‌شه (نه s4m-)؛
   قبلاً اینجا اشتباهاً s4m-store-grid نوشته شده بود و هیچ‌وقت اعمال نمی‌شد،
   یعنی گرید محصولات فروشگاه کاملاً بدون استایل بود */
.s4w-store-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 16px;
}
.s4m-product-card { border: 1px solid #eee; border-radius: 12px; padding: 12px; }
.s4m-product-card img { width: 100%; aspect-ratio: 1/1; object-fit: cover; border-radius: 8px; display: block; }
.s4m-sold-out { color: #b00; font-weight: bold; }

/* === بخش نمونه‌کارها در پروفایل === */
.s4w-works-section {
    max-width: 540px;
    margin: 32px auto 0;
    padding: 0 16px 32px;
    font-family: 'Vazirmatn', Tahoma, sans-serif;
}
.s4w-section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
}
.s4w-section-title { font-size: 18px; color: #ccc; margin: 0; }
.s4w-add-btn {
    background: #0073aa; color: #fff; border: none;
    padding: 8px 14px; border-radius: 8px; cursor: pointer;
    font-family: inherit; font-size: 14px;
}
.s4w-empty { color: #888; text-align: center; }
.s4w-store-link-row { margin-bottom: 16px; }
.s4w-store-link-btn {
    display: inline-block; background: #1e1e1e; color: #ddd;
    border: 1px solid #444; padding: 8px 14px; border-radius: 8px;
    text-decoration: none; font-size: 13px;
}
.s4w-store-link-btn:hover { border-color: #0073aa; color: #fff; }

/* گرید نمونه‌کارها */
.s4w-works-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 12px;
}
.s4w-work-card {
    background: #1e1e1e;
    border-radius: 10px;
    overflow: hidden;
    position: relative;
}
.s4w-card-link { text-decoration: none; display: block; }
/* 🐛→✅ v2.5.7: قبلاً کاور با background-image روی یک <div> نمایش داده می‌شد —
   یعنی loading="lazy" (که فقط روی تگ <img> کار می‌کند) هیچ اثری نداشت و مرورگر
   همه‌ی عکس‌های نمونه‌کار را همان اول، حتی پایینِ صفحه را هم، دانلود می‌کرد. الان
   یک <img> واقعی است؛ object-fit:cover همان جلوه‌ی بصریِ background-size:cover
   قبلی را حفظ می‌کند. برای حالتِ «بدون کاور» (آیکون/ایموجیِ جایگزین) همچنان یک
   <div> است چون عکسی برای نمایش وجود ندارد — همین کلاس روی هر دو کار می‌کند. */
.s4w-card-cover {
    width: 100%; aspect-ratio: 1/1;
    object-fit: cover; display: block;
    background-color: #2a2a2a;
}
.s4w-no-cover {
    display: flex; align-items: center; justify-content: center;
    font-size: 36px; color: #666;
}
.s4w-card-info {
    padding: 8px 10px;
    display: flex; flex-direction: column; gap: 2px;
}
.s4w-card-title { color: #ddd; font-size: 13px; font-weight: bold; }
/* 🆕→✅ اصلاح نهایی طبق خواسته: ویرایش/حذف بدون آیکون ولی با رنگ/استایل، همیشه
   در همون ردیف (بدون اسکرول، بدون رفتن به خط بعد) — چون الان فقط ۲ دکمه‌ی
   متنیِ کوتاه‌اند، جا کم نمی‌آید. آیکونِ تگ‌ها هم از این ردیف جدا شد و به یک
   نشانِ گردِ روی خودِ کاور منتقل شد (شبیه نشانِ «افراد تگ‌شده» روی عکس اینستاگرام). */
.s4w-card-actions {
    display: flex; flex-wrap: nowrap; gap: 6px; padding: 6px 8px;
    background: rgba(0,0,0,0.5);
    overflow: hidden;
}
.s4w-edit-btn, .s4w-delete-btn,
.s4w-edit-product-btn, .s4w-delete-product-btn,
.s4w-edit-event-btn, .s4w-delete-event-btn {
    flex: 1 1 0; min-width: 0; border: none; padding: 6px 4px; border-radius: 6px;
    cursor: pointer; font-family: inherit; font-size: 12px; text-align: center;
    white-space: nowrap;
}
.s4w-edit-btn, .s4w-edit-product-btn, .s4w-edit-event-btn     { background: #444; color: #ddd; }
.s4w-delete-btn, .s4w-delete-product-btn, .s4w-delete-event-btn { background: #622; color: #fcc; }

/* 🆕 نشانِ «هم‌کاری‌های تگ‌شده» روی گوشه‌ی کاورِ نمونه‌کار — دقیقاً مثل نشانِ
   تگ روی عکس اینستاگرام؛ چون بیرون از لینکِ کارت است، کلیک روش صفحه را عوض نمی‌کند. */
.s4w-manage-tags-toggle-btn {
    position: absolute; top: 8px; inset-inline-start: 8px; z-index: 2;
    display: inline-flex; align-items: center; gap: 4px;
    background: rgba(0,0,0,0.6); color: #fff; border: none;
    border-radius: 20px; padding: 4px 9px; font-size: 12px;
    cursor: pointer; backdrop-filter: blur(2px);
}
.s4w-manage-tags-toggle-btn:hover { background: rgba(0,0,0,0.8); }

/* مودال */
.s4w-modal-overlay {
    position: fixed; inset: 0; z-index: 99999;
    background: rgba(0,0,0,0.75);
    display: flex; align-items: center; justify-content: center;
}
.s4w-modal-box {
    background: #1e1e1e; color: #ddd;
    border-radius: 14px; padding: 24px;
    width: 92%; max-width: 480px;
    max-height: 90vh; overflow-y: auto;
    position: relative;
}
.s4w-modal-close {
    position: absolute; top: 12px; left: 14px;
    background: none; border: none; color: #aaa;
    font-size: 22px; cursor: pointer; line-height: 1;
}
.s4w-modal-box h3 { margin: 0 0 18px; font-size: 17px; color: #eee; }
.s4w-form-group { margin-bottom: 14px; display: flex; flex-direction: column; gap: 5px; }
.s4w-form-group label { font-size: 13px; color: #aaa; }
.s4w-req { color: #e55; }
.s4w-form-group input[type=text],
.s4w-form-group input[type=url],
.s4w-form-group select,
.s4w-form-group textarea {
    background: #2a2a2a; border: 1px solid #444; border-radius: 7px;
    color: #ddd; padding: 8px 10px; font-family: inherit; font-size: 13px;
    outline: none; width: 100%; box-sizing: border-box;
}
.s4w-form-group input:focus,
.s4w-form-group select:focus,
.s4w-form-group textarea:focus { border-color: #0073aa; }
.s4w-form-group small { color: #666; font-size: 11px; }
.s4w-upload-btn {
    background: #333; border: 1px dashed #555; color: #aaa;
    padding: 8px 14px; border-radius: 7px; cursor: pointer;
    font-family: inherit; font-size: 13px;
}
.s4w-gallery-thumbs { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 8px; }
.s4w-gallery-thumbs img { width: 60px; height: 60px; object-fit: cover; border-radius: 6px; }
.s4w-form-actions { display: flex; gap: 10px; margin-top: 18px; }
.s4w-submit-btn {
    flex: 1; background: #0073aa; color: #fff; border: none;
    padding: 10px; border-radius: 8px; cursor: pointer; font-family: inherit; font-size: 14px;
}
.s4w-submit-btn:disabled { opacity: 0.6; cursor: default; }
.s4w-cancel-btn {
    background: #333; color: #aaa; border: none;
    padding: 10px 16px; border-radius: 8px; cursor: pointer; font-family: inherit;
}

/* === محتوای work/store وقتی داخل تمپلیت پروفایل تزریق می‌شه === */
.s4w-back-link { margin-bottom: 14px; }
.s4w-back-link a { color: #8ab4f8; text-decoration: none; font-size: 13px; }

/* 🆕 v1.5.2: نوار تب پروفایل/نمونه‌کارها/فروشگاه — بالای عکس پروفایل */
.s4w-tabs {
    visibility: hidden; /* تا وقتی جاوااسکریپت جابه‌جاش نکرده، دیده نشه (بدون پرش تصویری) */
    display: flex; justify-content: center; gap: 6px;
    margin-bottom: 16px; flex-wrap: wrap;
}
.s4w-tab {
    padding: 7px 18px; color: #aaa; text-decoration: none; font-size: 13px;
    background: #1e1e1e; border: 1px solid #333; border-radius: 999px;
    transition: color .15s, background .15s, border-color .15s;
}
.s4w-tab:hover { color: #fff; border-color: #555; }
.s4w-tab-active { color: #fff; font-weight: bold; background: #0073aa; border-color: #0073aa; }
.s4w-tab-edit { border-style: dashed; }
.s4w-tab-edit:hover { border-color: #0073aa; color: #fff; }
.s4w-work-inline-title { margin: 6px 0 14px; font-size: 20px; color: #eee; }
.s4m-product-desc { color: #999; font-size: 12px; margin: 4px 0; }
.s4w-work-collabs { margin-top: 20px; font-size: 13px; color: #ccc; }
.s4w-work-collabs ul { list-style: none; padding: 0; margin: 6px 0 0; }
.s4w-work-collabs a { color: #8ab4f8; text-decoration: none; }
.s4w-store-inline .s4w-section-header { margin-bottom: 14px; }

/* v1.5+: خصوصیت‌های تکمیلی گرید و کارت (ادغام‌شده با تعریف اصلی بالا) */
.s4w-works-grid { gap: 14px; margin-top: 14px; }
.s4w-work-card { transition: transform 0.15s; color: inherit; }
.s4w-work-card:hover { transform: translateY(-3px); }
.s4w-work-card img { width: 100%; aspect-ratio: 1/1; object-fit: cover; display: block; }
.s4w-work-card-title { display: block; padding: 8px 10px; font-size: 0.85rem; }

/* 🆕 v1.6.1: کارتِ نمونه‌کاری که به‌عنوان همکاری روی پروفایل کاربر تگ‌شده نمایش داده می‌شود */
.s4w-work-card-collab { position: relative; border: 1px solid rgba(255,255,255,0.15); }
.s4w-card-collab-badge {
    position: absolute; top: 6px; right: 6px; left: 6px;
    background: rgba(0,0,0,0.65); color: #fff; font-size: 0.68rem;
    padding: 3px 8px; border-radius: 20px; text-align: center;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.s4w-card-collab-role { display: block; font-size: 0.72rem; opacity: 0.75; margin-top: 2px; }

/* 🆕 v1.6.1: جعبه‌ی درخواست‌های تگ همکاری با ۳ دکمه‌ی پاسخ */
.s4w-pending-tags { margin: 14px 0; padding: 12px; border-radius: 10px; background: rgba(255,255,255,0.05); }
.s4w-pending-tags ul { list-style: none; padding: 0; margin: 8px 0 0; }
.s4w-pending-tag-item { padding: 10px 0; border-top: 1px solid rgba(255,255,255,0.08); }
.s4w-pending-tag-item:first-child { border-top: none; }
.s4w-pending-tag-text { display: block; font-size: 0.85rem; margin-bottom: 8px; }
.s4w-pending-tag-preview-link { display: inline-block; margin-inline-start: 6px; }
.s4w-pending-tag-actions { display: flex; flex-wrap: wrap; gap: 6px; }
.s4w-pending-tag-actions button {
    font-size: 0.75rem; padding: 6px 10px; border-radius: 6px; border: none; cursor: pointer;
}
.s4w-tag-accept-visible { background: #2e7d32; color: #fff; }
.s4w-tag-accept-hidden { background: #6d6d6d; color: #fff; }
.s4w-tag-reject { background: #b32d2e; color: #fff; }

/* 🆕 v1.6.2: جعبه‌ی «همکاری‌های من» (سمتِ کاربر تگ‌شده) */
.s4w-my-collabs { margin: 14px 0; padding: 12px; border-radius: 10px; background: rgba(255,255,255,0.05); }
.s4w-my-collabs ul { list-style: none; padding: 0; margin: 8px 0 0; }
.s4w-my-collab-item { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 8px 0; border-top: 1px solid rgba(255,255,255,0.08); font-size: 0.82rem; }
.s4w-my-collab-item:first-child { border-top: none; }
.s4w-my-collab-remove { background: #b32d2e; color: #fff; border: none; border-radius: 6px; padding: 5px 10px; font-size: 0.72rem; cursor: pointer; flex: none; }

/* 🆕 v1.6.2: پنل مدیریت همکاران روی هر کارتِ نمونه‌کار (سمتِ صاحبِ اثر) */
.s4w-manage-tags-toggle-btn { background: transparent; border: 1px solid currentColor; opacity: 0.8; }
.s4w-manage-tags-panel { margin-top: 8px; padding: 8px; border-radius: 8px; background: rgba(0,0,0,0.25); }
.s4w-work-tags-manage-list { list-style: none; margin: 0; padding: 0; }
.s4w-work-tags-manage-item { display: flex; align-items: center; gap: 6px; padding: 5px 0; font-size: 0.75rem; border-top: 1px solid rgba(255,255,255,0.08); }
.s4w-work-tags-manage-item:first-child { border-top: none; }
.s4w-work-tags-manage-item img { width: 22px; height: 22px; border-radius: 50%; object-fit: cover; flex: none; }
.s4w-manage-name { font-weight: bold; }
.s4w-manage-role { opacity: 0.7; }
.s4w-manage-status { margin-inline-start: auto; padding: 2px 8px; border-radius: 20px; font-size: 0.65rem; }
.s4w-manage-status-pending { background: #8a6d00; color: #fff; }
.s4w-manage-status-accepted { background: #2e7d32; color: #fff; }
.s4w-manage-status-rejected { background: #b32d2e; color: #fff; }
.s4w-work-tag-remove-btn { background: #b32d2e; color: #fff; border: none; border-radius: 6px; padding: 3px 8px; font-size: 0.68rem; cursor: pointer; flex: none; }

/* 🆕 v1.6.3: پاپ‌آپ همکاران (اینستاگرام‌مانند) — جمع‌وجور با عکس کوچک */
.s4w-collab-popup-overlay {
    position: fixed; inset: 0; z-index: 100000;
    background: rgba(0,0,0,0.7);
    display: flex; align-items: center; justify-content: center;
}
.s4w-collab-popup {
    background: #1e1e1e; color: #ddd;
    border-radius: 12px; width: 90%; max-width: 320px;
    max-height: 70vh; display: flex; flex-direction: column; overflow: hidden;
}
.s4w-collab-popup-header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 10px 14px; border-bottom: 1px solid rgba(255,255,255,0.1); flex: none;
}
.s4w-collab-popup-title { font-size: 13px; font-weight: bold; color: #eee; }
.s4w-collab-popup-close { background: none; border: none; color: #aaa; font-size: 18px; line-height: 1; cursor: pointer; }
.s4w-collab-popup-list { list-style: none; margin: 0; padding: 4px 0; overflow-y: auto; }
.s4w-collab-popup-item {
    display: flex; align-items: center; gap: 8px; padding: 6px 12px;
    border-top: 1px solid rgba(255,255,255,0.06);
}
.s4w-collab-popup-item:first-child { border-top: none; }
.s4w-collab-popup-item img { width: 26px; height: 26px; border-radius: 50%; object-fit: cover; flex: none; }
.s4w-cpp-info { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.s4w-cpp-name { font-size: 12px; color: #eee; text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.s4w-cpp-name:hover { text-decoration: underline; }
.s4w-cpp-role { font-size: 10.5px; color: #999; }
.s4w-cpp-status { font-size: 9.5px; padding: 2px 7px; border-radius: 20px; flex: none; }
.s4w-cpp-status-pending { background: #8a6d00; color: #fff; }
.s4w-cpp-status-accepted { background: #2e7d32; color: #fff; }
.s4w-cpp-status-rejected { background: #b32d2e; color: #fff; }
.s4w-cpp-remove { background: none; border: none; color: #b32d2e; font-size: 16px; line-height: 1; cursor: pointer; flex: none; padding: 0 2px; }
.s4w-cpp-empty { padding: 14px 12px; font-size: 12px; color: #999; text-align: center; }

/* 🆕 v1.5: کارت محصول قابل‌کلیک */
.s4m-product-card-link { text-decoration: none; color: inherit; display: block; }

/* 🆕 v1.5: صفحه‌ی اختصاصی محصول */
.s4w-product-page {
    text-align: right;
}
.s4w-product-page-image {
    display: block;
    width: 100%;
    max-width: 420px;   /* هماهنگ با کارت نمونه‌کار، بدون کراپ */
    height: auto;       /* نسبت اصلی عکس (۱:۱ یا ۱۶:۹ یا هرچی) حفظ بشه */
    margin: 0 auto 16px;
    border-radius: 12px;
}
.s4w-product-page-info { flex: 1; min-width: 220px; }
.s4w-product-page-desc { line-height: 1.8; margin: 10px 0; }

/* 🆕 v1.5.8: جعبه‌ی درخواست‌های تگ همکاری در انتظار (صفحه‌ی نمونه‌کارهای خودِ کاربر) */
.s4w-pending-tags {
    background: #fff8e6;
    border: 1px solid #f0d98c;
    border-radius: 10px;
    padding: 12px 16px;
    margin: 14px 0;
}
.s4w-pending-tags strong { display: block; margin-bottom: 8px; font-size: 0.95rem; }
.s4w-pending-tags ul { list-style: none; margin: 0; padding: 0; }
.s4w-pending-tags li {
    display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
    padding: 8px 0; border-top: 1px solid #f0e2b8;
}
.s4w-pending-tags li:first-child { border-top: none; }
.s4w-pending-tags li span { flex: 1; min-width: 200px; font-size: 0.88rem; }
.s4w-pending-tags button {
    border: none; border-radius: 6px; padding: 5px 12px; cursor: pointer; font-size: 0.82rem;
}
/* 🆕 v1.6.0: فیلدهای تگ همکار — جستجوی زنده + دراپ‌دانِ چندانتخابیِ نقش
   🆕 v1.6.3: قاب مشخص دور کل بخش + دکمه‌ی «+ افزودن» با استایل واضح، هماهنگ با
   مودال تیره — قبلاً این دکمه هیچ استایلی نداشت و روی پس‌زمینه‌ی تیره‌ی مودال
   عملاً دیده نمی‌شد. */
.s4w-tag-fields {
    direction: rtl; border: 1px solid #444; border-radius: 10px;
    padding: 12px; background: rgba(255,255,255,0.03);
}
.s4w-tag-remaining-note { color: #999 !important; }
.s4w-tag-added-list li { color: #222; }
.s4w-tag-results {
    position: absolute; z-index: 50; background: #fff; border: 1px solid #ddd;
    border-radius: 8px; box-shadow: 0 4px 14px rgba(0,0,0,.12);
    max-height: 220px; overflow-y: auto; overflow-x: hidden;
    left: 0; right: 0; width: auto; box-sizing: border-box; margin-top: 2px;
}
/* 🆕 v1.7.2: عکسِ کاربر سمتِ چپِ ردیف باشه (نه راست) — row-reverse چون این
   والد dir:rtl هست و اولین فرزندِ DOM (عکس) با flex-direction معمولی سمتِ
   راست می‌افتاد؛ row-reverse اون رو می‌بره سمتِ چپ. */
.s4w-tag-result-row {
    padding: 6px 10px; cursor: pointer; font-size: 0.88rem;
    display: flex; flex-direction: row-reverse; align-items: center; gap: 10px;
}
.s4w-tag-result-row:hover { background: #f4f4f4; }
.s4w-tag-result-row img {
    width: 30px; height: 30px; border-radius: 50%; object-fit: cover; flex: none;
}
.s4w-tag-result-row .s4w-tag-result-text {
    display: flex; flex-direction: column; gap: 2px; min-width: 0; overflow: hidden;
}
.s4w-tag-result-row .s4w-tag-result-name {
    font-weight: 600; color: #222; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.s4w-tag-result-row .s4w-tag-result-username {
    direction: ltr; text-align: right; color: #888; font-size: 0.8rem;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* 🆕 v1.8.9: ردیفِ همکارِ اضافه‌شده در سیستمِ یکپارچه‌ی تگ (نمونه‌کار/رویداد/محصول) —
   عکسِ کوچک + نامِ جمع‌وجور + دراپ‌دانِ چندانتخابیِ نقش (+ فیلدِ درصد فقط برای
   محصول) + دکمه‌ی حذف، همه در یک ردیفِ کوتاه و شیک. */
.s4w-tag-added-item {
    display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
    padding: 5px 8px; background: #f6f7f7; border-radius: 20px; margin-bottom: 6px;
}
.s4w-tag-added-item img {
    width: 24px; height: 24px; border-radius: 50%; object-fit: cover; flex: none;
}
.s4w-tag-added-name {
    flex: 1 1 auto; font-size: 12.5px; font-weight: 600; color: #222; min-width: 50px;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.s4w-tag-added-percent { width: 58px; padding: 4px 6px; border-radius: 6px; border: 1px solid #bbb; background: #fff; color: #111; font-size: 12px; }
.s4w-tag-added-remove {
    background: none; border: none; color: #b32d2e; font-size: 17px; line-height: 1;
    cursor: pointer; padding: 0 2px;
}

/* 🆕 v1.8.9: دراپ‌دانِ چندانتخابیِ نقش — دکمه‌ی جمع‌وجور که با کلیک، پنلِ
   چک‌باکسیِ نقش‌ها را باز/بسته می‌کند. جایگزینِ <select> تک‌انتخابیِ قبلی. */
.s4w-tag-role-field { position: relative; flex: 1 1 120px; min-width: 100px; }
.s4w-tag-role-toggle {
    width: 100%; padding: 5px 8px; border-radius: 6px; border: 1px solid #bbb;
    background: #fff; color: #111; font-size: 12px; text-align: right; cursor: pointer;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.s4w-tag-role-toggle.s4w-empty { color: #888; }
.s4w-tag-role-panel {
    display: none; position: absolute; z-index: 60; top: 100%; margin-top: 3px;
    left: 0; right: 0; background: #fff; border: 1px solid #ddd; border-radius: 8px;
    box-shadow: 0 4px 14px rgba(0,0,0,.14); max-height: 180px; overflow-y: auto;
    padding: 4px;
}
.s4w-tag-role-panel.s4w-open { display: block; }
.s4w-tag-role-option {
    display: flex; align-items: center; gap: 6px; padding: 4px 6px; font-size: 12.5px;
    color: #222; font-weight: normal; border-radius: 5px; cursor: pointer;
}
.s4w-tag-role-option:hover { background: #f4f4f4; }
/* 🆕 v1.9: فیلد متنیِ پیشه‌ی دلخواه، زیرِ گزینه‌ی «سایر» */
.s4w-tag-role-other-row { padding: 2px 6px 6px; }
.s4w-tag-role-other-input {
    width: 100%; box-sizing: border-box; padding: 5px 8px; border-radius: 6px;
    border: 1px solid #bbb; font-size: 12px; text-align: right;
}

/* 🆕 v1.8.0: رویدادها — بیشتر از کلاس‌های محصول/فروشگاه استفاده مجدد شده، این‌ها فقط تفاوت‌های جزئی هستند */
.s4m-event-date { color: #8ab4f8; font-size: 12px; margin: 4px 0; }
.s4w-events-grid .s4m-event-card { position: relative; }

/* 🆕 v1.8.1: تقویم شمسی سبک برای انتخاب تاریخ رویداد */
.s4w-jalali-picker { background: rgba(255,255,255,0.03); border: 1px solid #444; border-radius: 10px; padding: 10px; }
.s4w-jalali-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; font-weight: bold; color: #eee; }
.s4w-jalali-nav { background: #333; color: #eee; border: none; border-radius: 6px; width: 28px; height: 28px; cursor: pointer; font-size: 16px; }
.s4w-jalali-weekdays { display: grid; grid-template-columns: repeat(7, 1fr); text-align: center; color: #888; font-size: 11px; margin-bottom: 4px; }
.s4w-jalali-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.s4w-jalali-day { background: #2a2a2a; color: #ddd; border: none; border-radius: 6px; padding: 6px 0; cursor: pointer; font-size: 12px; }
.s4w-jalali-day:hover { background: #0073aa; color: #fff; }
.s4w-jalali-day-past { opacity: 0.25; cursor: default; }
.s4w-jalali-day-selected { background: #0073aa !important; color: #fff !important; }
.s4w-jalali-time-row { margin-top: 10px; display: flex; align-items: center; flex-wrap: wrap; gap: 6px; color: #ccc; font-size: 13px; }

/* آمار فروش/ثبت‌نام + لایک/امتیاز */
/* 🆕→✅ اصلاح: قبلاً این دکمه توی یک ردیف جدا و تنها بود و عرضِ کامل ردیف بالا
   (ویرایش+حذف) رو نمی‌گرفت، برای همین نه به چپ/راست می‌چسبید نه واقعاً وسط‌چین
   بود. الان flex:1 گرفته و چون تنها بچه‌ی همون .s4w-card-actions با همون
   padding ردیف بالاست، دقیقاً هم‌عرضِ آن دو دکمه‌ی بالایی (روی‌هم) شده. */
.s4w-stats-btn {
    background: #333; color: #ddd; border: none; border-radius: 8px;
    padding: 6px 12px; font-size: 12px; cursor: pointer;
    flex: 1 1 0; width: 100%; text-align: center;
}
.s4w-stats-btn:hover { background: #0073aa; color: #fff; }
.s4w-event-like-btn { background: none; border: 1px solid #444; border-radius: 20px; padding: 5px 12px; cursor: pointer; color: #eee; font-size: 13px; }
.s4w-event-like-btn:disabled { opacity: 0.5; cursor: default; }
.s4w-star-picker { font-size: 20px; cursor: pointer; }
.s4w-star { margin-inline-end: 2px; }
.s4w-vote-btn { background: #2a2a2a; color: #ddd; border: none; border-radius: 6px; padding: 4px 10px; cursor: pointer; font-size: 12px; }

/* 🐛→✅ v1.8.6: نسخه‌ی تیره (پس‌زمینه‌ی #1e1e1e) فرض می‌کرد کل سایت تم تیره داره؛
   روی قالب‌های روشن به‌سختی دیده می‌شد. به یک نسخه‌ی روشن و پرکنتراست که مستقل
   از تمِ قالب همیشه خوانا باشه برگشت داده شد. */
.s4w-tag-search-input {
    background: #fff;
    color: #111;
    border: 1px solid #bbb;
    padding: 8px 10px;
    border-radius: 6px;
}
.s4w-tag-search-input::placeholder { color: #888; }
.s4w-tag-search-input:focus { border-color: #0073aa; outline: none; }

/* 🆕 بج‌های وضعیت رنگی برای مودال «آمار فروش» — کم‌هزینه، فقط CSS، خوانایی وضعیت سفارش رو بالا می‌بره */
.s4w-status-badge {
    display: inline-block;
    padding: 2px 10px;
    border-radius: 12px;
    font-size: 12px;
    white-space: nowrap;
}
.s4w-status-paid       { background: #1e4620; color: #7be08a; }
.s4w-status-registered { background: #1b3a52; color: #7fc4f0; }
.s4w-status-pending    { background: #4a3a12; color: #f0c96b; }
.s4w-status-failed     { background: #4a1f1f; color: #f08a8a; }

/* 🆕 میانگین امتیاز روی کارت لیست رویداد/محصول — کنار عنوان، بدون باز کردن مودال */
.s4w-card-rating {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-size: 12px;
    color: #f0c96b;
    margin-inline-start: 6px;
}