/**
 * SimpleReaction — Front-end Stylesheet (TypeRenew) v1.0.3
 *
 * راهبرد حالت روز/شب:
 *   - رنگ‌ها مستقیماً روی .sr-container و اعضای داخلی‌اش با !important تنظیم می‌شوند
 *     تا هیچ پوسته‌ای نتواند آن‌ها را override کند.
 *   - حالت تیره «فقط» زمانی فعال می‌شود که پوسته‌ی سایت صریحاً آن را اعلام کند:
 *       1) [data-theme='dark'] .sr-container      → پوسته‌های TypeRenew (default و Parnian)
 *       2) html[data-theme="dark"] .sr-container  → variant با کوتیشن دوتایی
 *       3) html.tr-theme-dark .sr-container       → پیشخوان TypeRenew
 *       4) body.sr-dark .sr-container             → سفارشی‌سازی دستی
 *   - به‌طور عمدی از ترجیح رنگی سیستمیِ مرورگر کاربر استفاده «نمی‌شود» تا حالت تیره
 *     هرگز به‌اجبار فعال نشود وقتی پوسته در حالت روشن است.
 *
 * @package SimpleReaction
 */

/* ============================================================
 *  ۱) کانتینر — حالت روشن
 * ============================================================ */
.sr-container {
    font-family: -apple-system, BlinkMacSystemFont, "Vazirmatn", "IRANSans", "Tahoma", "Segoe UI", Roboto, Arial, sans-serif !important;
    background-color: #ffffff !important;
    color: #1f2937 !important;
    border: 1px solid #e5e7eb !important;
    border-radius: 12px !important;
    padding: 18px 20px !important;
    margin: 28px 0 !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .08) !important;
    direction: rtl !important;
    line-height: 1.6 !important;
    font-size: 15px !important;
    position: relative !important;
    transition: background-color .25s ease, color .25s ease, border-color .25s ease !important;
}

.sr-container *,
.sr-container *::before,
.sr-container *::after {
    box-sizing: border-box !important;
}

/* ============================================================
 *  ۲) هدر و عنوان
 * ============================================================ */
.sr-header {
    margin-bottom: 12px !important;
}

.sr-title {
    font-weight: 600 !important;
    font-size: 15px !important;
    color: #6b7280 !important;
    margin: 0 !important;
}

/* ============================================================
 *  ۳) ردیف دکمه‌ها — فقط چیدمان افقی
 * ============================================================ */
.sr-buttons {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: 8px !important;
    margin: 6px 0 12px !important;
}

/* ============================================================
 *  ۴) دکمه‌ی واکنش — حالت روشن
 * ============================================================ */
.sr-btn {
    -webkit-appearance: none !important;
    appearance: none !important;
    border: 1px solid #e5e7eb !important;
    background-color: #ffffff !important;
    color: #1f2937 !important;
    padding: 8px 14px !important;
    border-radius: 999px !important;
    cursor: pointer !important;
    font-family: inherit !important;
    font-size: 15px !important;
    line-height: 1.4 !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    user-select: none !important;
    position: relative !important;
    overflow: hidden !important;
    transition: background-color .18s ease, color .18s ease, border-color .18s ease, transform .18s ease !important;
}

.sr-btn:hover {
    border-color: #3b82f6 !important;
    background-color: rgba(59, 130, 246, .12) !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 2px 6px rgba(59, 130, 246, .18) !important;
}

.sr-btn:focus-visible {
    outline: 2px solid #3b82f6 !important;
    outline-offset: 2px !important;
}

.sr-btn:active {
    transform: translateY(0) !important;
}

/* دکمه‌ی انتخاب‌شده */
.sr-btn--active,
.sr-btn--active:hover {
    background-color: #3b82f6 !important;
    color: #ffffff !important;
    border-color: #3b82f6 !important;
}

.sr-btn--active:hover {
    background-color: #1d4ed8 !important;
    filter: brightness(1.05) !important;
}

/* حالت بارگذاری */
.sr-btn--loading {
    opacity: .7 !important;
    pointer-events: none !important;
    cursor: progress !important;
}

.sr-btn--loading::after {
    content: "" !important;
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    width: 14px !important;
    height: 14px !important;
    margin: -7px 0 0 -7px !important;
    border: 2px solid currentColor !important;
    border-top-color: transparent !important;
    border-radius: 50% !important;
    animation: sr-spin .7s linear infinite !important;
}

/* ============================================================
 *  ۵) ایموجی، برچسب و شمارنده
 * ============================================================ */
.sr-emoji {
    font-size: 18px !important;
    line-height: 1 !important;
    transition: transform .18s ease !important;
}

.sr-btn:hover .sr-emoji {
    transform: scale(1.15) !important;
}

.sr-label {
    font-size: 14px !important;
    font-weight: 500 !important;
    color: inherit !important;
}

.sr-count {
    display: inline-flex !important;
    min-width: 22px !important;
    height: 20px !important;
    padding: 0 6px !important;
    border-radius: 999px !important;
    background-color: #f3f4f6 !important;
    color: #4b5563 !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    align-items: center !important;
    justify-content: center !important;
    font-variant-numeric: tabular-nums !important;
}

.sr-btn--active .sr-count {
    background-color: rgba(255, 255, 255, .25) !important;
    color: #ffffff !important;
}

/* ============================================================
 *  ۶) پیام وضعیت
 * ============================================================ */
.sr-status {
    min-height: 18px !important;
    font-size: 13px !important;
    color: #6b7280 !important;
    margin: 4px 0 8px !important;
    transition: color .2s ease !important;
}

.sr-status[data-state="success"] { color: #16a34a !important; }
.sr-status[data-state="error"]   { color: #dc2626 !important; }
.sr-status[data-state="warn"]    { color: #d97706 !important; }

/* ============================================================
 *  ۷) خلاصه (مجموع و محبوب‌ترین)
 * ============================================================ */
.sr-summary {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 14px !important;
    padding-top: 10px !important;
    border-top: 1px dashed #e5e7eb !important;
    color: #6b7280 !important;
    font-size: 13px !important;
}

.sr-summary strong {
    color: #1f2937 !important;
    font-weight: 600 !important;
}

/* ============================================================
 *  ۸) پوشش بارگذاری
 * ============================================================ */
.sr-container[data-loading="1"] .sr-buttons {
    opacity: .8 !important;
}

/* ============================================================
 *  ۹) حالت تیره — «فقط» با اعلام صریح پوسته
 *     [data-theme='dark'] .sr-container          (پوسته‌های TypeRenew)
 *     html[data-theme="dark"] .sr-container      (variant کوتیشن دوتایی)
 *     html.tr-theme-dark .sr-container           (پیشخوان TypeRenew)
 *     body.sr-dark .sr-container                (سفارشی‌سازی دستی)
 * ============================================================ */
[data-theme='dark'] .sr-container,
html[data-theme="dark"] .sr-container,
html.tr-theme-dark .sr-container,
body.sr-dark .sr-container {
    background-color: #1e293b !important;
    color: #e2e8f0 !important;
    border: 1px solid #334155 !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .3) !important;
}

[data-theme='dark'] .sr-title,
html[data-theme="dark"] .sr-title,
html.tr-theme-dark .sr-title,
body.sr-dark .sr-title {
    color: #94a3b8 !important;
}

[data-theme='dark'] .sr-btn,
html[data-theme="dark"] .sr-btn,
html.tr-theme-dark .sr-btn,
body.sr-dark .sr-btn {
    background-color: #1e293b !important;
    color: #e2e8f0 !important;
    border: 1px solid #334155 !important;
}

[data-theme='dark'] .sr-btn:hover,
html[data-theme="dark"] .sr-btn:hover,
html.tr-theme-dark .sr-btn:hover,
body.sr-dark .sr-btn:hover {
    background-color: rgba(96, 165, 250, .18) !important;
    border-color: #60a5fa !important;
    box-shadow: 0 2px 6px rgba(0, 0, 0, .35) !important;
}

[data-theme='dark'] .sr-btn:focus-visible,
html[data-theme="dark"] .sr-btn:focus-visible,
html.tr-theme-dark .sr-btn:focus-visible,
body.sr-dark .sr-btn:focus-visible {
    outline-color: #60a5fa !important;
}

[data-theme='dark'] .sr-btn--active,
html[data-theme="dark"] .sr-btn--active,
html.tr-theme-dark .sr-btn--active,
body.sr-dark .sr-btn--active,
[data-theme='dark'] .sr-btn--active:hover,
html[data-theme="dark"] .sr-btn--active:hover,
html.tr-theme-dark .sr-btn--active:hover,
body.sr-dark .sr-btn--active:hover {
    background-color: #60a5fa !important;
    color: #0f172a !important;
    border-color: #60a5fa !important;
}

[data-theme='dark'] .sr-btn--active:hover,
html[data-theme="dark"] .sr-btn--active:hover,
html.tr-theme-dark .sr-btn--active:hover,
body.sr-dark .sr-btn--active:hover {
    background-color: #3b82f6 !important;
    color: #ffffff !important;
}

[data-theme='dark'] .sr-count,
html[data-theme="dark"] .sr-count,
html.tr-theme-dark .sr-count,
body.sr-dark .sr-count {
    background-color: #283548 !important;
    color: #94a3b8 !important;
}

[data-theme='dark'] .sr-btn--active .sr-count,
html[data-theme="dark"] .sr-btn--active .sr-count,
html.tr-theme-dark .sr-btn--active .sr-count,
body.sr-dark .sr-btn--active .sr-count {
    background-color: rgba(15, 23, 42, .22) !important;
    color: #0f172a !important;
}

[data-theme='dark'] .sr-status,
html[data-theme="dark"] .sr-status,
html.tr-theme-dark .sr-status,
body.sr-dark .sr-status {
    color: #94a3b8 !important;
}

[data-theme='dark'] .sr-status[data-state="success"],
html[data-theme="dark"] .sr-status[data-state="success"],
html.tr-theme-dark .sr-status[data-state="success"],
body.sr-dark .sr-status[data-state="success"] {
    color: #4ade80 !important;
}

[data-theme='dark'] .sr-status[data-state="error"],
html[data-theme="dark"] .sr-status[data-state="error"],
html.tr-theme-dark .sr-status[data-state="error"],
body.sr-dark .sr-status[data-state="error"] {
    color: #f87171 !important;
}

[data-theme='dark'] .sr-status[data-state="warn"],
html[data-theme="dark"] .sr-status[data-state="warn"],
html.tr-theme-dark .sr-status[data-state="warn"],
body.sr-dark .sr-status[data-state="warn"] {
    color: #fbbf24 !important;
}

[data-theme='dark'] .sr-summary,
html[data-theme="dark"] .sr-summary,
html.tr-theme-dark .sr-summary,
body.sr-dark .sr-summary {
    border-top: 1px dashed #334155 !important;
    color: #94a3b8 !important;
}

[data-theme='dark'] .sr-summary strong,
html[data-theme="dark"] .sr-summary strong,
html.tr-theme-dark .sr-summary strong,
body.sr-dark .sr-summary strong {
    color: #e2e8f0 !important;
}

/* ============================================================
 *  ۱۰) انیمیشن‌ها
 * ============================================================ */
@keyframes sr-pop {
    0%   { transform: scale(1); }
    35%  { transform: scale(1.18); }
    60%  { transform: scale(.92); }
    100% { transform: scale(1); }
}

.sr-btn--pop {
    animation: sr-pop .45s cubic-bezier(.34, 1.56, .64, 1) !important;
}

@keyframes sr-spin {
    to { transform: rotate(360deg); }
}

/* ============================================================
 *  ۱۱) موبایل
 * ============================================================ */
@media (max-width: 560px) {
    .sr-container {
        padding: 14px 12px !important;
        font-size: 14px !important;
    }
    .sr-buttons {
        gap: 6px !important;
    }
    .sr-btn {
        padding: 6px 10px !important;
        font-size: 14px !important;
    }
    .sr-emoji {
        font-size: 16px !important;
    }
    .sr-summary {
        flex-direction: column !important;
        gap: 6px !important;
    }
}

/* ============================================================
 *  ۱۲) چاپ
 * ============================================================ */
@media print {
    .sr-container {
        display: none !important;
    }
}

/* ============================================================
 *  ۱۳) کاهش حرکت (Accessibility)
 * ============================================================ */
@media (prefers-reduced-motion: reduce) {
    .sr-btn,
    .sr-emoji,
    .sr-status,
    .sr-container {
        transition: none !important;
        animation: none !important;
    }
    .sr-btn--pop {
        animation: none !important;
    }
}