/* ============================================================
   tags.css
   ============================================================
   تنها جایی که ظاهر تگ‌ها و برچسب‌های کارت محصول تنظیم می‌شه.

   این فایل عمداً از global.css/style.css (فایل‌های اصلی قالب)
   جداست تا:
   ۱) دست‌کاری ظاهر تگ‌ها هیچ‌وقت لازم نکنه فایل‌های قالب باز بشن
   ۲) بعداً که پنل ادمین ساخته شد، این متغیرها مستقیم از یک فرم
      تنظیمات (رنگ/فونت/سایز/...) پر بشن، بدون تغییر کد

   دو خانواده‌ی تگ داریم:
   الف) نشان وضعیت — گوشه‌ی بالای عکس (موجود/ارسال ۷ روزه/بزودی/ناموجود)
   ب)  تگ‌های زیر عکس — تخفیف/بج پروموشن/اوتلت/تگ‌های دستی محصول

   بارگذاری: بعد از style.css و global.css (تا override واقعاً اثر کنه)
   ============================================================ */


/* ============================================================
   مرجع سریع — پالت و فونت پیش‌فرض پروژه (فقط مستندسازی، هیچ‌کدوم
   اینجا تعریف نمی‌شن؛ منبع واقعی‌شون assets/css/style.css خط ۴۴+
   و ۱۰۸+ هست). وقتی می‌خوای رنگ/سایز یه تگ رو تنظیم کنی، این جدول
   رو ببین تا هماهنگ با بقیه‌ی سایت بمونه، نه یه رنگ اتفاقی جدید.

   رنگ‌های پایه (حالت روشن — v-light، همونی که products.php استفاده می‌کنه)
     --bg-color            #f3f3f3   پس‌زمینه‌ی اصلی صفحه
     --assistant-color     #e9e9e9   پس‌زمینه‌ی کمکی/خنثی (پایه‌ی خیلی از تگ‌های ساده)
     --theme-color         #b3de4f   سبز برند — رنگ اصلی کانسو (instock هم از همینه)
     --cream-color         #e4ddd3   کرم
     --red-color           #ab8c8b   قرمز ملایم
     --theme-color-font    #ffffff   متن روی پس‌زمینه‌ی theme-color
     --font-color          #5c5c5c   متن معمولی
     --heading-color       #000000   متن تیتر/پررنگ
     --border-color        #dcdcdc   خط جداکننده

   فونت و سایز پایه
     --body-font            "Poppins", sans-serif   فونت متن معمولی/لاتین
     --heading-font          "selune", sans-serif    فونت تیترها
     --font-size-base        15px                    سایز پایه‌ی بدنه‌ی متن

   ⚠️ --gold-color و --blue-color که global.css سعی می‌کنه استفاده
   کنه (برای byorder-section/csoon-section) هیچ‌جای پروژه تعریف
   نشدن — باگ جداگانه‌ست، گزارش شده. مقادیر پایین (--tag-status-byorder-bg
   و --tag-status-comingsoon-bg) عمداً هگز مستقیم‌ان و به اون متغیرهای
   ناموجود وابسته نیستن.
   ============================================================ */


:root {

    /* ------------------------------------------------------------
       تنظیمات مشترک همه‌ی تگ‌ها (پیش‌فرض هر دو خانواده از این‌ها می‌خونن،
       مگر اینکه خودشون مقدار اختصاصی داشته باشن)
       ------------------------------------------------------------ */
    --tag-font-family: inherit;
    --tag-font-weight: 400;
    --tag-font-style: normal;         /* normal | italic */
    --tag-letter-spacing: normal;
    --tag-text-transform: none;       /* none | uppercase | capitalize */
    --tag-border-radius: 30px;
    --tag-border-width: 0px;
    --tag-border-color: transparent;
    --tag-text-stroke-width: 0px;     /* دور متن (-webkit-text-stroke) */
    --tag-text-stroke-color: transparent;


    /* ------------------------------------------------------------
       الف) نشان وضعیت — گوشه‌ی بالای عکس کارت
       کلاس‌های instock-section/byorder-section/csoon-section از قبل
       در global.css به‌عنوان رنگ‌های پایه‌ی سایت تعریف شدن (تم/طلایی/آبی).
       این بخش همون کلاس‌ها رو override می‌کنه — یعنی اگه فقط می‌خوای
       رنگ این نشان‌ها فرق کنه (بدون اینکه رنگ پایه‌ی سایت جای دیگه عوض
       بشه)، اینجا رو دستکاری کن، نه global.css رو.
       ------------------------------------------------------------ */

    /* موجود (ready_to_ship) */
    --tag-status-instock-bg: var(--theme-color);
    --tag-status-instock-color: #fff;

    /* ارسال چند روزه (made_to_order / preorder)
       ⚠️ عمداً هگز مستقیم، نه var(--gold-color) — اون متغیر تو کل
       پروژه (global.css خط ۹۳۵) استفاده شده ولی هیچ‌جا تعریف نشده؛
       یعنی این نشان از اول بی‌رنگ/شفاف رندر می‌شده. جزییات پایین چت. */
    --tag-status-byorder-bg: #c9932b;
    --tag-status-byorder-color: #fff;

    /* بزودی (coming_soon) — همون مشکل، var(--blue-color) هم تعریف نشده */
    --tag-status-comingsoon-bg: #3b7bc4;
    --tag-status-comingsoon-color: #fff;

    /* ناموجود (out_of_stock) */
    --tag-status-outofstock-bg: #8a8a8a;
    --tag-status-outofstock-color: #fff;

    --tag-status-font-size: 13px;
    --tag-status-padding: 5px 14px;


    /* ------------------------------------------------------------
       ب) تگ‌های زیر عکس (کلاس cat کنار اسم محصول)
       هر خانواده رنگ/فونت مستقل خودش رو داره تا مثلاً تگ تخفیف
       همیشه چشم‌گیرتر از یک تگ توصیفی ساده (جنس/رنگ چوب) باشه.
       ------------------------------------------------------------ */

    /* تخفیف — مثلاً «۱۰٪ تخفیف» (خودکار، از discount_type/value محصول) */
    --tag-discount-bg: var(--theme-color);
    --tag-discount-color: #fff;
    --tag-discount-font-weight: 600;

    /* بج پروموشن — مثلاً «پیشنهاد ویژه» (خودکار، از جدول batch_edits) */
    --tag-promo-bg: #c9932b;
    --tag-promo-color: #fff;
    --tag-promo-font-weight: 600;

    /* اوتلت — خودکار، از products.is_outlet */
    --tag-outlet-bg: #b23b3b;
    --tag-outlet-color: #fff;
    --tag-outlet-font-weight: 600;

    /* تگ‌های دستی محصول — مثل «پرو»، «بلوط» (از products.tags) */
    --tag-manual-bg: var(--assistant-color);
    --tag-manual-color: var(--heading-color);
    --tag-manual-font-weight: 400;

    --tag-info-font-size: 13px;
    --tag-info-padding: 5px 10px;
    --tag-info-gap: 8px;
}


/* ================================================================
   الف) نشان وضعیت
   ================================================================ */

.instock-section,
.instock-section .background-inner {
    background-color: var(--tag-status-instock-bg) !important;
    color: var(--tag-status-instock-color);
}

.byorder-section,
.byorder-section .background-inner {
    background-color: var(--tag-status-byorder-bg) !important;
    color: var(--tag-status-byorder-color);
}

.csoon-section,
.csoon-section .background-inner {
    background-color: var(--tag-status-comingsoon-bg) !important;
    color: var(--tag-status-comingsoon-color);
}

.outofstock-section,
.outofstock-section .background-inner {
    background-color: var(--tag-status-outofstock-bg) !important;
    color: var(--tag-status-outofstock-color);
}

.instock-section,
.byorder-section,
.csoon-section,
.outofstock-section {
    font-family: var(--tag-font-family);
    font-weight: var(--tag-font-weight);
    font-style: var(--tag-font-style);
    letter-spacing: var(--tag-letter-spacing);
    text-transform: var(--tag-text-transform);
    font-size: var(--tag-status-font-size);
    padding: var(--tag-status-padding);
    border-radius: var(--tag-border-radius);
    border: var(--tag-border-width) solid var(--tag-border-color);
    -webkit-text-stroke: var(--tag-text-stroke-width) var(--tag-text-stroke-color);
}


/* ================================================================
   ب) تگ‌های زیر عکس
   ================================================================ */

.dsn-item-post .post-content .cat {
    gap: var(--tag-info-gap);
}

.dsn-item-post .post-content .cat span {
    font-family: var(--tag-font-family);
    font-style: var(--tag-font-style);
    letter-spacing: var(--tag-letter-spacing);
    text-transform: var(--tag-text-transform);
    font-size: var(--tag-info-font-size);
    padding: var(--tag-info-padding);
    border-radius: var(--tag-border-radius);
    border: var(--tag-border-width) solid var(--tag-border-color);
    -webkit-text-stroke: var(--tag-text-stroke-width) var(--tag-text-stroke-color);
}

.dsn-item-post .post-content .cat .tag-discount {
    background-color: var(--tag-discount-bg) !important;
    color: var(--tag-discount-color);
    font-weight: var(--tag-discount-font-weight);
}

.dsn-item-post .post-content .cat .tag-promo {
    background-color: var(--tag-promo-bg) !important;
    color: var(--tag-promo-color);
    font-weight: var(--tag-promo-font-weight);
}

.dsn-item-post .post-content .cat .tag-outlet {
    background-color: var(--tag-outlet-bg) !important;
    color: var(--tag-outlet-color);
    font-weight: var(--tag-outlet-font-weight);
}

.dsn-item-post .post-content .cat .tag-manual {
    background-color: var(--tag-manual-bg) !important;
    color: var(--tag-manual-color);
    font-weight: var(--tag-manual-font-weight);
}