/* ================================
   1) پالت رنگ و تم‌ها
   استفاده: روی ریشه‌ی اپ Blazor
   <div class="app-root" data-theme="dark">  // دارک دیفالت
   ================================ */


/* =========================
   Vazirmatn – Offline Font
   ========================= */

@font-face {
    font-family: 'Vazirmatn';
    src: url('/fonts/vazirmatn/Vazirmatn[wght].woff2') format('woff2');
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
}


:root {
    /* LIGHT (Soft) */
    --color-bg: #eef1f5;
    --color-surface: #ffffff;
    --color-surface-soft: #f3f5f9;
    --color-primary: #0ea5b6;
    --color-primary-soft: rgba(14, 165, 182, 0.16);
    --color-secondary: #8b5cf6;
    --color-text: #1e2535;
    --color-text-muted: #64748b;
    --color-border: #d3d8e0;
    --color-border-soft: rgba(148, 163, 184, 0.45);
    --color-success: #0d9d73;
    --color-error: #ef4444;
    --color-warning: #f97316;
    --shadow-soft: 0 10px 35px rgba(15, 23, 42, 0.08);
    --shadow-strong: 0 18px 60px rgba(15, 23, 42, 0.12);
    --radius-md: 12px;
    --radius-lg: 18px;
    --radius-xl: 24px;
    --transition-fast: 0.16s ease-out;
    --transition-med: 0.22s ease;
    /* نئونی قرمز و زرد */
    --neon-red: #ff004f;
    --neon-red-glow: rgba(255, 0, 79, 0.55);
    --neon-yellow: #ffe400;
    --neon-yellow-glow: rgba(255, 228, 0, 0.55);
    /* فیلتر آیکن در لایت تم */
    --icon-filter-base: none;
}


/* تم دارک – با data-theme="dark" روی root */

[data-theme="dark"] {
    --color-bg: #0f172a;
    /* بیس دارک که خودت دادی */
    --color-surface: rgba(15, 23, 42, 0.96);
    --color-surface-soft: rgba(15, 23, 42, 0.85);
    --color-primary: #22d3ee;
    /* سیان نئونی */
    --color-primary-soft: rgba(34, 211, 238, 0.14);
    --color-secondary: #a855f7;
    /* بنفش نئونی */
    --color-text: #e2e8f0;
    --color-text-muted: #94a3b8;
    --color-border: rgba(148, 163, 184, 0.55);
    --color-border-soft: rgba(148, 163, 184, 0.35);
    --color-success: #10b981;
    --color-error: #ef4444;
    --color-warning: #fb923c;
    --shadow-soft: 0 10px 35px rgba(15, 23, 42, 0.75);
    --shadow-strong: 0 18px 70px rgba(15, 23, 42, 0.95);
    /* نئونی قرمز و زرد */
    --neon-red: #ff2b6e;
    --neon-red-glow: rgba(255, 43, 110, 0.75);
    --neon-yellow: #fff066;
    --neon-yellow-glow: rgba(255, 240, 102, 0.75);
    /* در دارک تم، آیکن از سیاه → سفید */
    --icon-filter-base: invert(1);
}


/* ================================
   2) پایه‌ی کلی برای اپ (اختیاری)
   ================================ */

html,
body {
    margin: 0;
    padding: 0;
    font-family: "Vazirmatn", system-ui, -apple-system, "Segoe UI", sans-serif;
    background: var(--color-bg);
    color: var(--color-text);
    -webkit-font-smoothing: antialiased;
}

.app-root {
    min-height: 100vh;
    background: radial-gradient(circle at top left, rgba(148, 163, 184, 0.15), transparent 55%), radial-gradient(circle at bottom right, rgba(56, 189, 248, 0.18), transparent 55%), var(--color-bg);
    display: flex;
    flex-direction: column;
}


/* فریم عمومی کارت‌ها */

.ui-card {
    background: var(--color-surface-soft);
    border-radius: var(--radius-lg);
    border: 1px solid var(--color-border-soft);
    box-shadow: var(--shadow-soft);
    padding: 1.25rem;
    backdrop-filter: blur(12px);
    transition: transform var(--transition-fast), box-shadow var(--transition-fast), border-color var(--transition-fast), background-color var(--transition-fast);
}

    .ui-card:hover {
        transform: translateY(-2px);
        box-shadow: var(--shadow-strong);
    }


/* برای نمایش روی موبایل */

@media (max-width: 480px) {
    .ui-card {
        padding: 1rem;
        border-radius: var(--radius-md);
    }
}


/* =========================================
   3) کلاس بوردر عمومی برای ورودی و باکس‌ها
   (استفاده برای input, wrapper, small cards)
   ========================================= */

.ui-border-main {
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background-color: var(--color-surface);
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast), background-color var(--transition-fast);
}

    .ui-border-main:focus-within {
        border-color: var(--color-primary);
        box-shadow: 0 0 0 3px var(--color-primary-soft);
    }


/* خود input داخل این کادر */

.ui-input {
    width: 100%;
    border: none;
    outline: none;
    background: transparent;
    color: var(--color-text);
    font-size: 0.95rem;
    padding: 0.7rem 0.9rem;
}

    .ui-input::placeholder {
        color: var(--color-text-muted);
    }


/* برای موبایل – سایز مناسب لمس */

@media (max-width: 480px) {
    .ui-input {
        font-size: 0.9rem;
        padding: 0.65rem 0.8rem;
    }
}


/* =========================================
   4) کلاس دکمه‌ها (ورود، ارسال کد، انصراف)
   ========================================= */


/* base */

.ui-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    padding: 0.6rem 1.2rem;
    border-radius: 999px;
    border: 1px solid transparent;
    font-size: 0.95rem;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
    white-space: nowrap;
    transition: transform var(--transition-fast), box-shadow var(--transition-fast), background-color var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast);
}


/* دکمه اصلی – مثلا "ورود" ، "ارسال کد" */

.ui-btn-primary {
    background: linear-gradient(135deg, var(--color-primary), var(--color-secondary));
    color: #ffffff;
    border-color: rgba(15, 23, 42, 0.35);
    box-shadow: 0 10px 28px rgba(15, 23, 42, 0.35);
}

    .ui-btn-primary:hover {
        transform: translateY(-2px);
        box-shadow: 0 16px 40px rgba(15, 23, 42, 0.55);
    }


/* دکمه فرعی – "انصراف" ، "بازگشت" */

.ui-btn-ghost {
    background: transparent;
    color: var(--color-text);
    border-color: var(--color-border-soft);
}

    .ui-btn-ghost:hover {
        background-color: var(--color-primary-soft);
        border-color: var(--color-primary);
    }


/* حالت غیر فعال */

.ui-btn:disabled,
.ui-btn[disabled] {
    opacity: 0.55;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}


/* دکمه تمام عرض برای موبایل */

@media (max-width: 480px) {
    .ui-btn {
        width: 100%;
        justify-content: center;
        font-size: 0.9rem;
        padding: 0.65rem 1rem;
    }
}


/* =========================================
   5) کارت داشبورد کاربر
   آواتار دایره‌ای + نام + تاریخ عضویت + امتیاز
   ========================================= */

.user-card {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    padding: 1rem 1.25rem;
    border-radius: var(--radius-xl);
    background: radial-gradient(circle at top left, rgba(34, 211, 238, 0.15), transparent 55%), var(--color-surface-soft);
    border: 1px solid var(--color-border-soft);
    box-shadow: var(--shadow-soft);
    overflow: hidden;
    transition: transform var(--transition-fast), box-shadow var(--transition-fast), border-color var(--transition-fast), background var(--transition-fast);
    /*align-items:;*/ /* بالای همه در یک خط */
    direction: rtl;
    text-align: right;
}


/* آواتار دایره‌ای */

.user-card__avatar {
    flex: 0 0 auto;
    width: clamp(52px, 10vw, 72px);
    height: clamp(52px, 10vw, 72px);
    margin-top: 25px;
    border-radius: 999px;
    border: 2px solid var(--color-primary);
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    background: radial-gradient(circle, var(--color-primary-soft), transparent 60%);
}

    .user-card__avatar img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }


/* متن‌ها */

.user-card__meta {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    min-width: 0;
    margin-top: 15px;
}

.user-card__name {
    font-size: 1rem;
    font-weight: 700;
    color: var(--color-text);
}

.user-card__since {
    font-size: 0.8rem;
    color: var(--color-text-muted);
}


/* امتیاز */

.user-card__points {
    margin-inline-start: auto;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.15rem;
    text-align: right;
}

.user-card__points-label {
    font-size: 0.78rem;
    color: var(--color-text-muted);
}

.user-card__points-value {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--color-secondary);
}


/* چینش در موبایل: آواتار بالا، متن زیرش */

@media (max-width: 640px) {
    .user-card {
        flex-direction: column;
        align-items: flex-start;
    }

    .user-card__points {
        margin-inline-start: 0;
        align-items: flex-start;
    }
}


/* =========================================
   6) افکت هاور: بوردر انیمیشنی که دور کارت بپیچد
   (روی همان user-card اعمال کن با یک کلاس اضافه)
   ========================================= */

/*.user-card--glow {
    position: relative;
    z-index: 0;
}
*/
/*.user-card--glow::before {
        content: "";
        position: absolute;
        inset: -2px;*/
/* فاصله‌ی بین حاشیه انیمیشنی و کارت */
/*border-radius: inherit;
        background: conic-gradient( from 0deg, var(--color-primary), var(--color-secondary), var(--color-warning), var(--color-primary));
        opacity: 0;
        z-index: -1;
        filter: blur(0.5px);
        transition: opacity var(--transition-med);
        animation: usercard-glow-rotate 4.5s linear infinite;
    }*/


/* برای ایجاد فاصله بین کارت و حاشیه انیمیشنی، خود کارت پس‌زمینه‌ی داخلی دارد */

.user-card--glow {
    background-clip: padding-box;
}


    /* فقط وقتی هاور می‌شود، حاشیه زنده شود */

    .user-card--glow:hover::before {
        opacity: 0.9;
    }


/* انیمیشن حرکت رنگ‌ها دور کارت */

/*@keyframes usercard-glow-rotate {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}
*/

/* =========================================
   7) کمک برای چینش فرم ورود / ثبت نام
   (اختیاری، برای اینکه راحت از کلاس‌ها استفاده کنی)
   ========================================= */

.auth-layout {
    width: 100%;
    max-width: 460px;
    margin: 0 auto;
    padding: 1.5rem 1rem;
}

.auth-layout__title {
    font-size: 1.4rem;
    font-weight: 800;
    margin-bottom: 0.15rem;
}

.auth-layout__subtitle {
    font-size: 0.9rem;
    color: var(--color-text-muted);
    margin-bottom: 1rem;
}

.auth-layout__row {
    margin-bottom: 0.75rem;
}


/* در موبایل حاشیه‌ها کم‌تر */

@media (max-width: 480px) {
    .auth-layout {
        padding: 1.25rem 0.75rem;
        max-width: 96vw;
    }
}


/* #region auth.css */


/* =========================================================
   AUTH PAGE (Login / Register) – مخصوص Auth.razor
   ========================================================= */


/* روت صفحه auth (روی کل صفحه) */

.page-root {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
    position: relative;
    overflow: hidden;
}


/* بک‌گراند گیمینگ نئونی */

.bg-layer {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
}

.bg-pattern {
    background-image: radial-gradient(ellipse 60% 40% at 15% 30%, rgba(34, 211, 238, 0.18) 0%, transparent 50%), radial-gradient(ellipse 50% 30% at 85% 70%, rgba(139, 92, 246, 0.18) 0%, transparent 50%), radial-gradient(ellipse 70% 50% at 50% 50%, rgba(14, 165, 182, 0.2) 0%, transparent 60%), radial-gradient(ellipse 40% 60% at 30% 80%, rgba(251, 146, 60, 0.18) 0%, transparent 50%);
    filter: blur(60px) saturate(1.05);
    opacity: 0.8;
}

[data-theme="dark"] .bg-pattern {
    background-image: radial-gradient(ellipse 60% 40% at 15% 30%, rgba(34, 211, 238, 0.22) 0%, transparent 50%), radial-gradient(ellipse 50% 30% at 85% 70%, rgba(168, 85, 247, 0.2) 0%, transparent 50%), radial-gradient(ellipse 70% 50% at 50% 50%, rgba(14, 165, 182, 0.22) 0%, transparent 60%), radial-gradient(ellipse 40% 60% at 30% 80%, rgba(251, 146, 60, 0.18) 0%, transparent 50%);
    opacity: 0.7;
}


/* کارت اصلی auth که از ui-card ارث می‌برد */

.auth-card {
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: 460px;
}


/* هدر */

.auth-header {
    margin-bottom: 0.9rem;
}

.auth-title {
    margin: 0;
    font-size: 1.7rem;
    font-weight: 800;
    color: var(--color-primary);
}

.auth-subtitle {
    margin: 0.25rem 0 0;
    font-size: 0.95rem;
    color: var(--color-text-muted);
}


/* تب‌ها */

.auth-tabs {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 1rem 0;
    padding: 4px;
    border-radius: 999px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.02));
    position: relative;
}

.auth-tabs__tab {
    flex: 1;
    position: relative;
    z-index: 1;
    border: none;
    background: transparent;
    border-radius: 999px;
    padding: 0.5rem 0.7rem;
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--color-text-muted);
    cursor: pointer;
    transition: color var(--transition-fast);
}

    .auth-tabs__tab.is-active {
        color: var(--color-primary);
    }

.auth-tabs__indicator {
    position: absolute;
    top: 4px;
    bottom: 4px;
    width: 50%;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(14px);
    box-shadow: 0 8px 22px rgba(15, 23, 42, 0.18);
    transition: transform var(--transition-med);
}


/* جا‌به‌جایی indicator بین دو تب، بدون JS */

.auth-tabs.auth-tabs--login .auth-tabs__indicator {
    transform: translateX(0%);
}

.auth-tabs.auth-tabs--register .auth-tabs__indicator {
    transform: translateX(100%);
}


/* در دارک تم indicator کمی تیره‌تر */

[data-theme="dark"] .auth-tabs__indicator {
    background: rgba(15, 23, 42, 0.85);
}


/* پنل‌ها */

.auth-panel {
    display: none;
    opacity: 0;
    transform: translateY(6px);
    transition: opacity 0.2s ease-out, transform 0.2s ease-out;
}

.auth-panel--active {
    display: block;
    opacity: 1;
    transform: translateY(0);
}


/* ردیف‌های فرم */

.auth-row {
    margin-bottom: 0.75rem;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.auth-label {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--color-text);
}

.auth-help {
    font-size: 0.8rem;
    color: var(--color-text-muted);
}


/* اینپوت‌های خاص */

.ui-input--ltr {
    direction: ltr;
    text-align: left;
}

.ui-input--center {
    text-align: center;
    letter-spacing: 0.3rem;
}


/* چیدمان افقی آیتم‌ها (مثلاً remember + لینک) */

.auth-inline {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin-top: 0.35rem;
}


/* ردیف دکمه‌ها – به صورت پیش‌فرض ستونی و تمام‌عرض */

.auth-actions {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-top: 0.9rem;
}


    /* همه دکمه‌ها در حالت عادی تمام عرض کادر */

    .auth-actions .ui-btn {
        width: 100%;
    }


/* حالت خاص مرحله‌ی کد تأیید: دکمه‌ها کنار هم، هر دو نصف فضا */

.auth-actions--code {
    flex-direction: row;
}

    .auth-actions--code .ui-btn {
        width: auto;
        flex: 1 1 0;
    }


/* در موبایل هم همین رفتار برای مرحلهٔ کد (کنار هم) */

@media (max-width: 480px) {
    .auth-actions--code {
        flex-direction: row;
    }

        .auth-actions--code .ui-btn {
            width: auto;
            flex: 1 1 0;
        }
}


/* ردیف‌های step در ثبت‌نام */

.auth-step {
    margin-top: 0.25rem;
}


/* چشم رمز عبور */

.password-wrapper {
    position: relative;
}

.password-eye {
    position: absolute;
    top: 50%;
    left: 0.55rem;
    transform: translateY(-50%);
    border: none;
    background: transparent;
    cursor: pointer;
    font-size: 0.85rem;
    opacity: 0.75;
    transition: opacity var(--transition-fast), transform var(--transition-fast);
}

    .password-eye:hover {
        opacity: 1;
        transform: translateY(-50%) scale(1.05);
    }


/* کد تأیید */

.code-wrapper .ui-input {
    font-weight: 700;
}


/* لینک فراموشی رمز */

.forgot-link {
    font-size: 0.8rem;
    color: var(--color-primary);
    text-decoration: none;
    transition: color var(--transition-fast);
}

    .forgot-link:hover {
        color: var(--color-secondary);
    }


/* آیکن خانه (بالای کارت) – از Auth قدیمی */

.home-icon {
    position: absolute;
    top: 16px;
    left: 16px;
    color: var(--color-primary);
    text-decoration: none;
    transition: color 0.15s ease, transform 0.12s ease;
}

    .home-icon:hover {
        color: var(--color-secondary);
        transform: scale(1.05);
    }


/* چک‌باکس‌ها */

.checkbox-wrapper {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.82rem;
    color: var(--color-text-muted);
}

    .checkbox-wrapper input[type="checkbox"] {
        width: 16px;
        height: 16px;
        accent-color: var(--color-primary);
    }


/* آلرت داخلی (به جای Swal / alert JS) */

.auth-alert {
    margin-bottom: 0.8rem;
    padding: 0.6rem 0.8rem;
    border-radius: var(--radius-md);
    font-size: 0.85rem;
    line-height: 1.5;
    border: 1px solid transparent;
}

.auth-alert--success {
    background: rgba(16, 185, 129, 0.08);
    border-color: rgba(16, 185, 129, 0.4);
    color: #047857;
}

.auth-alert--error {
    background: rgba(239, 68, 68, 0.08);
    border-color: rgba(239, 68, 68, 0.45);
    color: #b91c1c;
}

.auth-alert--info {
    background: rgba(59, 130, 246, 0.08);
    border-color: rgba(59, 130, 246, 0.45);
    color: #1d4ed8;
}


/* ریسپانسیو کارت روی موبایل */

@media (max-width: 480px) {
    .page-root {
        padding: 1rem;
    }

    .auth-card {
        padding: 1rem;
        border-radius: var(--radius-md);
    }

    .auth-title {
        font-size: 1.4rem;
    }
}


/* ================================
   RTL FIX برای صفحه Auth
   ================================ */


/* کل صفحه و کارت و استپ‌ها راست‌چین و RTL */


/* ================================
   RTL FIX برای صفحه Auth
   ================================ */

.page-root,
.auth-card,
.auth-panel,
.auth-step {
    direction: rtl;
    text-align: right;
}


/* پیش‌فرض همه‌ی اینپوت‌ها راست‌چین */

.ui-input {
    text-align: right;
}


/* فقط تلفن و کد از چپ به راست */

.ui-input--ltr {
    direction: ltr;
    text-align: left;
}


/* چشم رمز عبور برود سمت راست فیلد (اگه بعداً فعالش کنی) */

.password-wrapper {
    position: relative;
}

.password-eye {
    position: absolute;
    top: 50%;
    right: 0.55rem;
    /* 👈 به‌جای left */
    left: auto;
    transform: translateY(-50%);
    border: none;
    background: transparent;
    cursor: pointer;
    font-size: 0.85rem;
    opacity: 0.75;
    transition: opacity var(--transition-fast), transform var(--transition-fast);
}

    .password-eye:hover {
        opacity: 1;
        transform: translateY(-50%) scale(1.05);
    }


/* اگر بعداً آیکن خانه را فعال کنی، بهتره RTL باشه */

.home-icon {
    right: 16px;
    left: auto;
}


/* در موبایل، دکمه‌ها تمام‌عرض بمونن (همون قبلی، فقط تأکید) */

@media (max-width: 480px) {
    .auth-actions .ui-btn {
        width: 100%;
    }
}


/* کادر کد تأیید وسط صفحه و متن وسط */

.code-wrapper {
    max-width: 230px;
    margin-inline: auto;
    /* وسط‌چین شدن خود باکس */
}

    .code-wrapper .ui-input {
        text-align: center;
        letter-spacing: 0.35rem;
        font-weight: 700;
        direction: ltr;
        /* چپ به راست برای اعداد */
    }

.privacy-sheet {
    position: fixed;
    inset: 0;
    z-index: 1000;
    pointer-events: auto;
    opacity: 1;
    visibility: visible;
}

.sheet-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(8px);
    cursor: pointer;
}

.sheet-content {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    max-height: 85vh;
    background: var(--color-surface-soft);
    border-radius: 24px 24px 0 0;
    border: 1px solid var(--color-border-soft);
    box-shadow: 0 -8px 32px rgba(0, 0, 0, 0.2);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.sheet-header,
.sheet-footer {
    padding: 1rem 1.5rem;
    border-bottom: 1px solid var(--color-border-soft);
}

.sheet-body {
    flex: 1;
    overflow-y: auto;
    padding: 1rem 1.5rem;
}


/* دسکتاپ: مودال وسط صفحه به‌جای bottom sheet */

@media (min-width: 768px) {
    .sheet-content {
        top: 50%;
        left: 50%;
        right: auto;
        bottom: auto;
        transform: translate(-50%, -50%);
        max-width: 540px;
        /* عرض مناسب دسکتاپ */
        width: 100%;
        border-radius: 24px;
        /* همه گوشه‌ها گرد */
        box-shadow: 0 20px 60px rgba(0, 0, 0, 0.35);
    }

    .sheet-body {
        max-height: 60vh;
        /* زیاد بلند نشه، داخلش اسکرول بشه */
    }
}

/* ردیف مرحله کد تأیید: 60% اینپوت / 40% تایمر + دکمه */
.code-row-inner {
    display: flex;
    align-items: stretch;
    gap: 0.75rem;
}

/* 60% سمت راست (در RTL) */
.code-input-wrapper {
    flex: 0 0 60%;
}

/* 40% سمت چپ: تایمر + دکمه در یک ردیف */
.code-timer-wrapper {
    flex: 0 0 40%;
    display: flex;
    align-items: center;
    justify-content: center; /* وسط همون ۴۰٪ */
    direction: rtl;
}


.code-timer__value {
    min-width: 3.4rem;
    text-align: center;
    font-weight: 700;
    letter-spacing: 0.12rem;
}

/* دکمه ارسال مجدد فضای باقی‌مانده را پر کند */
.code-resend-btn {
    flex: 1 1 auto;
    width: auto; /* اجازه بده با flex تنظیم شود */
    padding-inline: 0.6rem; /* کمی جمع‌وجورتر که با تایمر جا شود */
}

/* بدون شکستن در موبایل – فقط همون ردیف می‌ماند */
@media (max-width: 480px) {
    .code-row-inner {
        /* همچنان افقی */
    }

    .code-input-wrapper {
        flex: 0 0 60%;
    }

    .code-timer-wrapper {
        flex: 0 0 40%;
        gap: 0.4rem;
    }
}

/* تنظیم مجدد کادر کد – از وسط صفحه نجاتش دادیم */
.code-wrapper {
    max-width: 100%;
    margin-inline: 0;
}


/* دکمه تایمر: ظاهر دکمه را کامل نگه دار، فقط هاور را خنثی کن */

/* #endregion auth.css */


/* #region Dashboard.css */


/* ================================
   Dashboard Layout
   ================================ */


/*.dashboard-root {
    min-height: 100vh;
    display: flex;
    justify-content: center;  دسکتاپ → وسط افقی 
    align-items: flex-start;
    padding: 1.5rem 1rem 2.5rem;
}*/


/*.dashboard-card {
    width: 100%;
    max-width: 880px;*/


/* در ویندوز کمی باریک‌تر از قبل */


/*text-align: right;
    direction: rtl;
    margin: 0 auto;*/


/* بودر وسط چین */


/*}*/

.dashboard-root {
    min-height: 100vh;
    display: flex;
    justify-content: center;
    padding: 1.5rem 1rem 2.5rem;
}

.dashboard-card {
    width: 100%;
    max-width: 880px;
    direction: rtl;
    text-align: right;
    display: flex;
    flex-direction: column;
    gap: 1.2rem;
}


/*.dashboard-root {
    min-height: 100vh;
    display: flex;
    justify-content: center;*/


/* وسط افقی */


/*align-items: stretch;*/


/* کارت ارتفاع صفحه رو پر کنه */


/*padding: 1.5rem 1rem 2.5rem;
}

.dashboard-card {
    width: 100%;
    max-width: 880px;
    text-align: right;
    direction: rtl;
    margin: 0 auto;
    display: flex;
    flex-direction: column;*/


/* عمودی: پروفایل + ورودی + لیست + دکمه‌ها */


/*min-height: calc(100vh - 3rem);*/


/* تقریبا تمام ارتفاع صفحه، بعد از padding */


/*}*/


/* فاصله‌ی کارت پروفایل از لیست تیکت‌ها */

.dashboard-user-card {
    margin-bottom: 0.55rem;
}


/* ================================
   User Card – چیدمان جدید
   دسکتاپ:
     - آواتار سمت راست
     - اطلاعات کنار آواتار
     - باکس‌های آماری سمت چپ
   موبایل:
     - آواتار وسط
     - اطلاعات راست‌چین زیرش
     - دو باکس گرادیانتی در یک ردیف، از راست primary بعد secondary
   ================================ */

.user-card {
    position: relative;
    display: flex;
    align-items: center;
    gap: 1rem;
    direction: rtl;
    text-align: right;
}


/* بخش آماری – انتهای ردیف (سمت چپ در RTL) */

.user-card__stats {
    margin-inline-start: auto;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.35rem;
    margin-top: 35px;
}

.user-card__stats-row {
    display: flex;
    gap: 0.5rem;
    flex-direction: row-reverse;
    /* اولین باکس در HTML → سمت راست دیده شود */
}


/* باکس‌های گرادیانتی */

.user-card__stat-box {
    min-width: 150px;
    padding: 0.55rem 0.8rem;
    border-radius: var(--radius-md);
    color: #ffffff;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    text-align: right;
    box-shadow: 0 10px 28px rgba(15, 23, 42, 0.45);
}

.user-card__stat-box--primary {
    background: linear-gradient(135deg, var(--color-primary), var(--color-secondary));
}

.user-card__stat-box--secondary {
    background: linear-gradient(135deg, var(--color-secondary), var(--color-primary));
}

.user-card__stat-label {
    font-size: 0.8rem;
    opacity: 0.9;
}

.user-card__stat-value {
    font-size: 1.05rem;
    font-weight: 800;
    margin-top: 0.25rem;
    font-family: "Vazirmatn", system-ui, -apple-system, "Segoe UI", sans-serif;
    word-break: break-all;
    /* برای اعداد خیلی بزرگ مثل 100000000000000 */
}


/* متن روزهایی که با ما بودید */

.user-card__days {
    font-size: 0.8rem;
    color: var(--color-text-muted);
}

    .user-card__days span {
        font-weight: 600;
        color: var(--color-text);
    }


/* موبایل */
@media (max-width: 640px) {
    .user-card {
        flex-direction: column;
        align-items: center; /* آواتار وسط */
    }

    /* آواتار بزرگ‌تر در موبایل */
    .user-card__avatar {
        width: 88px;
        height: 88px;
        margin-top: 20px;
    }

    /* اطلاعات کاربری زیر عکس، وسط‌چین */
    .user-card__meta {
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
        width: 100%;
        margin-top: -5px;
    }

    .user-card__stats {
        margin-inline-start: 0;
        align-items: flex-start;
        width: 100%;
        margin-top: 0.6rem;
    }

    .user-card__stats-row {
        justify-content: flex-start; /* از راست شروع شود */
    }

    .user-card__stat-box {
        align-items: flex-start;
        text-align: right;
    }
}



/* ================================
   لیست تیکت‌ها – باکس اسکرولی 500px
   ================================ */


/*.dashboard-list-card {
    margin-top: 1rem;
    height: 500px;*/


/* ارتفاع ثابت */


/*overflow-y: auto;*/


/* اسکرول داخل باکس */


/*direction: rtl;
    text-align: right;
}*/


/* ================================
   لیست تیکت‌ها – پر کردن ارتفاع خالی
   ================================ */

.dashboard-list-card {
    margin-top: 1rem;
    flex: 1 1 auto;
    /* بقیه ارتفاع کارت را پر کن */
    min-height: 220px;
    /* یک حداقل ارتفاع منطقی */
    overflow-y: auto;
    /* اسکرول فقط اینجا */
    direction: rtl;
    text-align: right;
    display: flex;
    flex-direction: column;
}


/* هدر لیست ثابت بالای باکس */


/*.dashboard-list-header {
    flex: 0 0 auto;
}
*/


/* خود لیست، پرکنندهٔ باقی فضا */


/*.ticket-list {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}*/


/* حالت خالی – متن وسط باکس */


/*.ticket-empty {
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: var(--color-text-muted);
    font-size: 0.9rem;
}*/


/* دکمه "بارگذاری بیشتر" زیر لیست، ولی داخل همان باکس */

.ticket-load-more {
    flex: 0 0 auto;
    margin-top: 0.9rem;
    display: flex;
    justify-content: center;
}


/* دیگر نیازی به height در media query نیست */

@media (max-width: 640px) {
    .dashboard-list-card {
        /* flex:1 و min-height به کار خودش ادامه می‌دهد */
    }
}


/* هدر لیست */


/*.dashboard-list-header h2 {
    margin: 0 0 0.25rem 0;
    font-size: 1rem;
    font-weight: 700;
}

.dashboard-list-header p {
    margin: 0 0 0.75rem 0;
    font-size: 0.85rem;
    color: var(--color-text-muted);
}*/


/* خود لیست */


/*.ticket-list {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}*/


/* هر تیکت یک ردیف */

.ticket-item {
    display: flex;
    align-items: center;
    /* قبلاً اگر flex-start بود، عوضش کن */
    justify-content: flex-start;
    gap: 0.75rem;
    padding: 0.75rem;
    border-radius: var(--radius-md);
    background-color: var(--color-surface);
    direction: rtl;
    text-align: right;
}


/* اکشن‌ها – گوشهٔ راست آیتم */

.ticket-item__actions {
    display: flex;
    flex-direction: column;
    /* ویرایش بالا، حذف پایین */
    gap: 0.3rem;
    flex-shrink: 0;
    align-items: center;
    /* دکمه‌ها وسط ستون */
}


/* متن اصلی تیکت */

.ticket-item__main {
    flex: 1;
}

.ticket-item__title {
    font-size: 0.9rem;
    font-weight: 700;
    margin-bottom: 0.2rem;
}

.ticket-item__row {
    font-size: 0.8rem;
    color: var(--color-text-muted);
    margin-top: 0.15rem;
}

    .ticket-item__row span {
        color: var(--color-text);
        font-weight: 600;
    }


/* دکمه آیکنی کوچک‌تر */


/* دکمه آیکنی مربع با گوشه گرد */

.ui-btn-icon {
    width: 36px;
    height: 36px;
    border-radius: 12px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

    .ui-btn-icon i {
        font-size: 0.9rem;
    }


/* حذف – قرمز نئونی */

.ui-btn-delete svg path {
    fill: var(--neon-red);
    filter: drop-shadow(0 0 6px var(--neon-red-glow));
}

.ui-btn-delete:hover svg path {
    filter: drop-shadow(0 0 12px var(--neon-red-glow));
}


/* ویرایش – زرد نئونی */

.ui-btn-edit svg path {
    fill: var(--neon-yellow);
    filter: drop-shadow(0 0 6px var(--neon-yellow-glow));
}

.ui-btn-edit:hover svg path {
    filter: drop-shadow(0 0 12px var(--neon-yellow-glow));
}


/* دکمه "بارگذاری بیشتر" */


/*.ticket-load-more {
    margin-top: 0.9rem;
    display: flex;
    justify-content: center;
}*/


/* ریسپانسیو موبایل برای تیکت‌ها */


/*@media (max-width: 640px) {
    .dashboard-list-card {
        height: 500px;*/


/* همون ارتفاع، فقط عرض کمتر می‌شود */


/*}

    .ticket-item {
        gap: 0.5rem;
    }

    .ticket-item__actions {
        flex-direction: row;
        align-items: center;
    }
}*/


/* ================================
    55
   Dashboard Vertical Tiles (5 buttons)
   ================================ */


/* ================================
   Dashboard Vertical Tiles (5 buttons like Telegram game)
   ================================ */

.dashboard-tiles {
    margin-top: 0.55rem;
    display: flex;
    flex-direction: column;
    gap: 0.9rem;
}


/* باکس/دکمه پایه – تمام عرض dashboard-card */

.dash-tile {
    width: 100%;
    border-radius: 24px;
    border: 1px solid var(--color-border-soft);
    background: var(--color-surface-soft);
    cursor: pointer;
    padding: 0.9rem 1.1rem;
    text-align: right;
    direction: rtl;
    color: var(--color-text);
    box-shadow: 0 14px 40px rgba(15, 23, 42, 0.22);
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease, background-color 0.2s ease, opacity 0.18s ease;
}


/* محتوای داخلی: متن سمت راست، تصویر سمت چپ */

.dash-tile__content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
}


/* متن دکمه */

.dash-tile__text {
    flex: 1 1 auto;
    min-width: 0;
}

    .dash-tile__text h3 {
        margin: 0 0 0.2rem 0;
        font-size: 1rem;
        font-weight: 800;
    }

    .dash-tile__text p {
        margin: 0;
        font-size: 0.82rem;
        color: var(--color-text-muted);
    }


/* مدیای سمت چپ: عکس / آیکن / انیمیشن */

.dash-tile__media {
    flex: 0 0 auto;
    position: relative;
    width: 90px;
    height: 90px;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    /* کلیک روی خود تصویر دکمه رو خراب نکند */
}



/* خود تصویر، با انیمیشن شناور ملایم */

.dash-tile__img.dash-tile__img {
    /*    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    animation: tile-float 3s ease-in-out infinite;*/
    width: 200px !important;
    height: 200px !important;
    object-fit: contain;
    position: relative;
}


/* حالت دو دسته + VS وسط */

.dash-tile__media--versus {
    width: 100px;
}

.dash-tile__img--left {
    transform: translateX(6px) rotate(-8deg);
}

.dash-tile__img--right {
    transform: translateX(-6px) rotate(8deg);
}

.dash-tile__vs {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -55%);
    font-size: 0.8rem;
    font-weight: 900;
    padding: 0.15rem 0.45rem;
    border-radius: 999px;
    background: #ef4444;
    color: #fff;
    box-shadow: 0 6px 16px rgba(239, 68, 68, 0.6);
}


/* انیمیشن شناور آیکن‌ها */

@keyframes tile-float {
    0%, 100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-6px);
    }
}


/* هاور روی دکمه‌های فعال */

.dash-tile:not(.dash-tile--disabled):hover {
    transform: translateY(-3px);
    box-shadow: 0 20px 55px rgba(15, 23, 42, 0.32);
    border-color: var(--color-primary);
}


/* وضعیت غیرفعال (به‌زودی) */

.dash-tile--disabled {
    opacity: 0.38;
    cursor: not-allowed;
    filter: grayscale(45%);
}


/* ---------- رنگ‌ها، هماهنگ با تم ---------- */

.dash-tile--primary {
    background: linear-gradient(135deg, var(--color-primary), var(--color-secondary));
    color: #ffffff;
}

.dash-tile--secondary {
    background: linear-gradient(135deg, var(--color-secondary), var(--color-primary));
    color: #ffffff;
}

.dash-tile--info {
    background: linear-gradient(135deg, #38bdf8, #0ea5e9);
    color: #ffffff;
}

.dash-tile--warning {
    background: linear-gradient(135deg, var(--color-warning), #facc15);
    color: #ffffff;
}

.dash-tile--danger {
    background: linear-gradient(135deg, #ef4444, #b91c1c);
    color: #ffffff;
}

.dash-tile--settings {
    background: linear-gradient(135deg,#74cf8c, #39ad58 );
    color: #ffffff;
}


    /* متن توضیحی روی گرادیانت‌های تیره کمی روشن‌تر شود */

    .dash-tile--primary .dash-tile__text p,
    .dash-tile--secondary .dash-tile__text p,
    .dash-tile--info .dash-tile__text p,
    .dash-tile--warning .dash-tile__text p,
    .dash-tile--settings .dash-tile__text p,
    .dash-tile--danger .dash-tile__text p {
        color: rgba(255, 255, 255, 0.9);
    }

.dash-tile__img__pvp {
    width: 120px !important;
    height: 120px !important;
    object-fit: contain;
    position: relative;
}

/* موبایل – کمی فشرده‌تر اما همچنان تمام‌عرض و زیر هم */

@media (max-width: 640px) {
    .dashboard-tiles {
        gap: 0.7rem;
    }

    .dash-tile {
        padding: 0.75rem 0.85rem;
        border-radius: 20px;
    }

    .dash-tile__media {
        width: 75px;
        height: 75px;
    }

    .dash-tile__media--versus {
        width: 90px;
    }

    .dash-tile__img {
        width: 120px !important;
        height: 120px !important;
        object-fit: contain;
        position: relative;
    }

    .dash-tile__img__pvp {
        width: 100px !important;
        height: 100px !important;
        object-fit: contain;
        margin-left: 10px;
        margin: 1px;
        position: relative;
    }
}


/* ============================
   Circle Icon Buttons (Edit/Delete)
   ============================ */

.circle-icon-btn {
    width: 34px;
    height: 34px;
    border-radius: 999px;
    /* دایره کامل */
    border: 1px solid var(--color-border-soft);
    background: transparent;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 4px;
    cursor: pointer;
    transition: border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease, background-color 0.18s ease;
}


    /* خود svg که به‌صورت img وارد شده */

    .circle-icon-btn img {
        width: 18px;
        /* کمی کوچک، که تو گوشه شیک باشه */
        height: 18px;
        display: block;
        filter: var(--icon-filter-base);
        /* در لایت: none | در دارک: invert(1) */
    }


    /* هاور عمومی – کمی بلند شدن */

    .circle-icon-btn:hover {
        transform: translateY(-2px);
    }


/* دکمه ویرایش – زرد نئونی */

/*.circle-icon-btn--edit:hover {
    border-color: var(--neon-yellow);
    box-shadow: 0 0 8px var(--neon-yellow-glow);
}*/


/* دکمه حذف – قرمز نئونی */

/*.circle-icon-btn--delete:hover {
    border-color: var(--neon-red);
    box-shadow: 0 0 8px var(--neon-red-glow);
}*/


/* اگر خواستی روی موبایل حتی کوچیک‌تر بشن: */

@media (max-width: 640px) {
    .circle-icon-btn {
        width: 32px;
        height: 32px;
        padding: 3px;
    }

        .circle-icon-btn img {
            width: 16px;
            height: 16px;
        }
}


/* ================================
   Ticket Input Row (ثبت تیکت)
   دسکتاپ:
      - اینپوت و دکمه در یک ردیف
      - 60% اینپوت / 40% دکمه
   موبایل (<=640px):
      - اینپوت بالا، دکمه زیرش
      - اینپوت 90% عرض، دکمه 65% عرض
   ================================ */

.dashboard-ticket-input {
    margin-bottom: 1.25rem;
    direction: rtl;
    text-align: right;
}

.ticket-input-row {
    display: flex;
    align-items: stretch;
    justify-content: flex-start;
    gap: 0.75rem;
    direction: rtl;
    /* همه‌چیز از راست شروع شود */
}


/* ویندوز / دسکتاپ: 60% اینپوت - 40% دکمه */

.ticket-input-wrapper {
    flex: 0 0 60%;
}

.ticket-submit-btn {
    flex: 0 0 40%;
    justify-content: center;
    /* متن دکمه وسط */
}


/* موبایل: استک عمودی و وسط‌چین شدن */

@media (max-width: 640px) {
    .ticket-input-row {
        flex-direction: column;
        align-items: center;
        /* وسط از نظر عرضی */
    }

    .ticket-input-wrapper {
        flex: none;
        width: 90%;
        max-width: 90%;
    }

    .ticket-submit-btn {
        flex: none;
        width: 65%;
        max-width: 65%;
    }
}


/* فضای لیست، بعد از کادر ثبت تیکت
   - آن‌قدر رشد می‌کند تا بقیه ارتفاع صفحه را پر کند
   - اگر محتوا بیشتر شد، فقط داخل خودش اسکرول می‌خورد
*/

.dashboard-list-area {
    flex: 1 1 auto;
    /* از بین المنت‌های داخل dashboard-card، این یکی فیلر ارتفاع است */
    min-height: 220px;
    max-height: calc(100vh - 230px);
    /* باقی ارتفاع بعد از input + فاصله‌ها (عدد را اگر لازم بود تنظیم کن) */
    display: flex;
    flex-direction: column;
    background: var(--color-surface-soft);
    border-radius: var(--radius-lg);
    border: 1px solid var(--color-border-soft);
    box-shadow: var(--shadow-soft);
    overflow: hidden;
    /* اسکرول فقط روی فرزند ticket-list */
}


/* هدر لیست بالا */

.dashboard-list-header {
    flex: 0 0 auto;
    padding: 0.85rem 1rem 0.5rem 1rem;
    border-bottom: 1px solid var(--color-border-soft);
}

    .dashboard-list-header h2 {
        margin: 0;
        font-size: 1rem;
        font-weight: 700;
    }

    .dashboard-list-header p {
        margin: 0.25rem 0 0;
        font-size: 0.82rem;
        color: var(--color-text-muted);
    }


/* لیست تیکت‌ها – اسکرول فقط اینجا */

.ticket-list {
    flex: 1 1 auto;
    overflow-y: auto;
    padding: 0.75rem 0.9rem 1rem 0.9rem;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}


/* وقتی هیچ تیکتی نیست */

.ticket-empty {
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: var(--color-text-muted);
    font-size: 0.95rem;
    padding: 1.5rem;
}





/* دکمه تغییر تم در داشبورد */
.dashboard-theme-toggle {
    display: flex;
    justify-content: flex-end; /* دسکتاپ: سمت راست */
    margin-bottom: 0.6rem;
}

.dashboard-theme-toggle__btn {
    font-size: 0.85rem;
    padding-inline: 0.9rem;
}

/* موبایل – دکمه بره سمت چپ */
@media (max-width: 640px) {
    .dashboard-theme-toggle {
        justify-content: flex-start; /* بالا گوشه سمت چپ در موبایل */
    }
}


/* دکمه خروج حساب کاربری */
.logout-btn {
    position: absolute;
    left: 0; /* گوشه بالا سمت چپ */
    right: auto;
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 5px;
    margin-top: -80px;
    margin-left: 20px;
    background: linear-gradient(135deg, var(--color-error), #b91c1c);
    border-radius: 999px;
    border: 1px solid rgba(255,255,255,0.15);
    color: #fff;
    font-size: 0.85rem;
    font-weight: 700;
    cursor: pointer;
    z-index: 5;
    box-shadow: 0 8px 25px rgba(0,0,0,0.35);
    transition: 0.18s ease;
}

    .logout-btn img {
        width: 16px;
        height: 16px;
        filter: invert(1);
    }

    .logout-btn:hover {
        transform: translateY(-2px);
        box-shadow: 0 14px 40px rgba(239,68,68,0.55);
    }

/* موبایل */
@media (max-width: 640px) {
    .logout-btn {
        top: 10px; /* کمی نزدیک‌تر به کارت که تو موبایل تو ذوق نزنه */
        left: 10px;
        margin-top: 0px;
        margin-left: 0px;
        right: auto;
        padding: 0.3rem 0.75rem;
        font-size: 0.78rem; /* فونت کوچیک‌تر */
    }

        .logout-btn img {
            width: 14px;
            height: 14px;
        }
}


@media (max-width: 640px) {
    .user-card__avatar-block {
        align-items: center;
    }
}

.ui-btn-edituser {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.2rem;
    padding: 0.3rem 0.6rem;
    border-radius: 999px;
    border: 1px solid transparent;
    font-size: 0.95rem;
    font-weight: 200;
    cursor: pointer;
    text-decoration: none;
    white-space: nowrap;
    transition: transform var(--transition-fast), box-shadow var(--transition-fast), background-color var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast);
}

@media (max-width: 640px) {
    .ui-btn-edituser {
        font-size: 0.85rem; /* کوچکتر در اندروید/موبایل */
        padding: 0.28rem 0.5rem; /* کمی جمع‌وجورتر */
    }
}


/* #region user-edit button */

/* ستون آواتار + دکمه ویرایش – مشترک دسکتاپ و موبایل */
.user-card__avatar-column {
    display: flex;
    flex-direction: column;
    align-items: center; /* وسط از نظر افقی در هر دو حالت */
    gap: 0.35rem; /* فاصله کم بین آواتار و دکمه */
}

/* رپر دکمه – فقط برای کنترل فاصله */
.user-edit-btn-wrap {
    margin-top: 0.35rem; /* فاصله از آواتار */
    margin-bottom: 0.35rem; /* فاصله از متای پایین */
}

/* خود دکمه ویرایش اطلاعات کاربری */
.user-edit-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.28rem 0.9rem;
    border-radius: 999px;
    border: 1px solid var(--color-border-soft);
    background: transparent;
    color: var(--color-text);
    font-size: 0.9rem; /* کمی کوچیک‌تر از ui-btn (0.95rem) */
    font-weight: 500;
    cursor: pointer;
    text-decoration: none;
    white-space: nowrap;
    transition: transform var(--transition-fast), box-shadow var(--transition-fast), background-color var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast);
}

    .user-edit-btn:hover {
        background-color: var(--color-primary-soft);
        border-color: var(--color-primary);
        color: var(--color-text);
        transform: translateY(-1px);
        box-shadow: 0 8px 20px rgba(15, 23, 42, 0.35);
    }

/* موبایل / اندروید – کوچیک‌تر و بدون داغون‌کردن ارتفاع */
@media (max-width: 640px) {
    .user-edit-btn {
        font-size: 0.8rem; /* ریزتر از دسکتاپ */
        padding: 0.24rem 0.8rem;
    }


    .user-edit-btn-wrap {
        margin-top: 0.6rem;
        margin-bottom: 0.3rem;
    }
}

/* #endregion user-edit button */


/* ==========================================================
   دکمه جوایز من - تیره، جذاب و آماده برای عکس پس‌زمینه
   ========================================================== */
.dash-tile--gift {
    position: relative !important;
    overflow: hidden !important;
    /* گرادیانت تیره‌تر و لوکس‌تر (زرشکی به شرابی تیره) */
    background: linear-gradient(105deg,#db1a6b 0%,#831843 40%) !important;
    border: 1px solid #9f1239 !important;
    color: #ffffff !important;
    box-shadow: 0 4px 12px rgba(190, 24, 93, 0.15) !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

    /* افکت هاور با بوردر همرنگ خودش (صورتی نئونی/زرشکی روشن) */
    .dash-tile--gift:hover {
        transform: translateY(-2px);
        border-color: #fb7185 !important;
        box-shadow: 0 6px 20px rgba(190, 24, 93, 0.35) !important;
    }

    /* متن‌های داخل کادر */
    .dash-tile--gift h3 {
        color: #ffffff;
        font-weight: 800;
    }

    .dash-tile--gift p {
        color: rgba(255, 255, 255, 0.85) !important;
        font-weight: 500;
    }

    .dash-tile--gift::before {
        content: '';
        position: absolute;
        /* 👈 وسط‌چین کردن دقیق افقی */
        left: 48%;
        transform: translateX(-50%);
        /* 👈 مخفی کردن حدود 15 درصد از پایین عکس (15% از 300px می‌شود 45px) */
        bottom: -105px;
        width: 300px;
        height: 300px;
        background-image: url('/assets/my-prizes.png') !important;
        background-repeat: no-repeat !important;
        background-size: contain !important;
        background-position: center !important;
        opacity: 0.15;
        z-index: 0;
        pointer-events: none;
    }
    /* آوردن محتوای متنی و آیکون روی عکس پس‌زمینه */
    .dash-tile--gift .dash-tile__content {
        position: relative;
        z-index: 1;
        width: 100%;
    }

/* ریسپانسیو موبایل برای عکس پس‌زمینه دکمه جوایز */
@media (max-width: 580px) {
    .dash-tile--gift::before {
        width: 220px;
        height: 220px;
        /* 👈 حفظ وسط‌چینی در موبایل */
        left: 50%;
        transform: translateX(-50%);
        /* 👈 مخفی کردن حدود 15 درصد از پایین عکس در موبایل (15% از 220px می‌شود حدود 33px) */
        bottom: -63px;
        opacity: 0.1;
    }
}

/* #endregion Dashboard.css */




/* #region LotteryTicket.css */
/* ================================
   LotteryTicket Layout – جایگزین Dashboard
   ================================ */
.lotteryticket-root {
    min-height: 100vh;
    display: flex;
    justify-content: center;
    padding: 1.5rem 1rem 2.5rem;
    background: var(--color-bg);
}

.lotteryticket-card {
    width: 100%;
    max-width: 880px;
    direction: rtl;
    text-align: right;
    display: flex;
    flex-direction: column;
    gap: 1.2rem;
    height: calc(100vh - 3rem);
}

/* کادر ثبت تیکت */
.lotteryticket-input {
    flex: 0 0 auto;
}

.lotteryticket-input-row {
    display: flex;
    align-items: stretch;
    justify-content: flex-start;
    gap: 0.75rem;
    direction: rtl;
}

/*.lotteryticket-input-wrapper {
    flex: 0 0 60%;
}

.lotteryticket-submit-btn {
    flex: 0 0 40%;
    justify-content: center;
}*/

.lotteryticket-input-wrapper {
    flex: 0 0 60%;
}

/* ظرف دکمه‌ها (لغو + ثبت) */
.lotteryticket-actions {
    flex: 0 0 40%;
    display: flex;
    gap: 0.5rem;
    align-items: stretch;
}

    /* هر دو دکمه داخلش اندازه مساوی بگیرند */
    .lotteryticket-actions .ui-btn {
        flex: 1 1 0;
    }

/* خود دکمه ثبت همچنان برای هوک‌های قبلی */
.lotteryticket-submit-btn {
    justify-content: center;
}


/*@media (max-width: 640px) {
    .lotteryticket-input-row {
        flex-direction: column;
        align-items: center;
    }

    .lotteryticket-input-wrapper {
        width: 90%;
    }

    .lotteryticket-submit-btn {
        width: 65%;
    }
}*/

/* موبایل */
@media (max-width: 640px) {
    .lotteryticket-input-row {
        flex-direction: column;
        align-items: center;
    }

    .lotteryticket-input-wrapper {
        width: 90%;
    }

    /* ظرف دکمه‌ها در موبایل هم وسط، تمام‌عرض نسبی */
    .lotteryticket-actions {
        width: 90%;
        justify-content: center;
    }
}

/* لیست تیکت‌ها */
.lotteryticket-list-area {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    background: var(--color-surface-soft);
    border-radius: var(--radius-lg);
    border: 1px solid var(--color-border-soft);
    box-shadow: var(--shadow-soft);
    overflow: hidden;
}
/* ===== LotteryTicket scrollbar (match Tournaments) ===== */
.lotteryticket-list {
    flex: 1 1 auto;
    min-height: 0;
    overflow: auto; /* مهم: auto مثل Tournaments */
    padding: 0.75rem 0.9rem;
    /* مثل Tournaments */
    overscroll-behavior: contain;
    padding-right: 2px; /* جلوگیری از overlap اسکرول‌بار روی محتوا */

    scrollbar-width: thin; /* Firefox */
    scrollbar-color: rgba(34,211,238,.55) rgba(255,255,255,.06);
    /* subtle inner fade (مثل Tournaments) */
    -webkit-mask-image: linear-gradient(to bottom, transparent, #000 16px, #000 calc(100% - 16px), transparent);
    mask-image: linear-gradient(to bottom, transparent, #000 16px, #000 calc(100% - 16px), transparent);
}

    /* WebKit (Chrome/Edge/Safari) */
    .lotteryticket-list::-webkit-scrollbar {
        width: 12px;
    }

    .lotteryticket-list::-webkit-scrollbar-track {
        background: rgba(255,255,255,.05);
        border: 1px solid rgba(255,255,255,.08);
        border-radius: 999px;
        box-shadow: inset 0 0 0 1px rgba(0,0,0,.12);
    }

    .lotteryticket-list::-webkit-scrollbar-thumb {
        border-radius: 999px;
        border: 3px solid rgba(255,255,255,.06); /* padding effect */
        background: linear-gradient(180deg, rgba(34,211,238,.75), rgba(168,85,247,.55));
        box-shadow: 0 8px 18px rgba(0,0,0,.25), inset 0 0 0 1px rgba(255,255,255,.18);
    }

        .lotteryticket-list::-webkit-scrollbar-thumb:hover {
            background: linear-gradient(180deg, rgba(34,211,238,.92), rgba(168,85,247,.72));
            box-shadow: 0 10px 22px rgba(0,0,0,.32), inset 0 0 0 1px rgba(255,255,255,.24);
        }

        .lotteryticket-list::-webkit-scrollbar-thumb:active {
            background: linear-gradient(180deg, rgba(34,211,238,1), rgba(168,85,247,.85));
        }
/* Tablet */
@media (min-width: 860px) {
    .lotteryticket-list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* Desktop (normal) */
@media (min-width: 1180px) {
    .lotteryticket-list {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

.lotteryticket-list-header {
    flex: 0 0 auto;
    padding: 0.85rem 1rem 0.5rem;
    border-bottom: 1px solid var(--color-border-soft);
}

    .lotteryticket-list-header h2 {
        margin: 0;
        font-size: 1rem;
        font-weight: 700;
    }

    .lotteryticket-list-header p {
        margin: 0.25rem 0 0;
        font-size: 0.82rem;
        color: var(--color-text-muted);
    }

.lotteryticket-list {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    padding: 0.75rem 0.9rem;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.lotteryticket-empty {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: var(--color-text-muted);
    font-size: 0.95rem;
    padding: 1.5rem;
}

/*.lotteryticket-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem;
    border-radius: var(--radius-md);
    background-color: var(--color-surface);
    direction: rtl;
    text-align: right;
}*/
.lotteryticket-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem;
    border-radius: var(--radius-md);
    background-color: var(--color-surface);
    direction: rtl;
    text-align: right;
    flex-direction: row-reverse; /* 👈 متن سمت راست، دکمه‌ها سمت چپ کارت */
}


.lotteryticket-item__actions {
    display: flex;
    flex-direction: column; /* عمودی در دسکتاپ */
    gap: 0.75rem;
    flex-shrink: 0;
    align-items: center;
    justify-content: center; /* وسط عمودی */
}

.lotteryticket-item__main {
    flex: 1;
}

.lotteryticket-item__title {
    font-size: 0.9rem;
    font-weight: 700;
    margin-bottom: 0.2rem;
}

.lotteryticket-item__row {
    font-size: 0.8rem;
    color: var(--color-text-muted);
    margin-top: 0.15rem;
}

    .lotteryticket-item__row span {
        color: var(--color-text);
        font-weight: 600;
    }

/* لودر انتهایی */
.lotteryticket-loader {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    padding: 1.5rem 1rem;
    color: var(--color-text-muted);
    font-size: 0.9rem;
}

/* اسپینر لیزی‌لود انتهای لیست */
.lotteryticket-spinner {
    width: 40px;
    height: 40px;
    margin-bottom: 0.35rem;
    /* کمی نرم‌تر از اسپینر اصلی، ولی از همون استایل استفاده می‌کند */
}


/* تغییرات جدید: ریسپانسیو برای دکمه‌های actions */
@media (max-width: 640px) {
    .lotteryticket-item__actions {
        flex-direction: row; /* افقی در موبایل */
        gap: 0.6rem; /* فاصله افقی بیشتر برای لمس بهتر */
        align-items: center;
        justify-content: flex-end; /* سمت چپ در RTL (یعنی سمت راست صفحه، اما اگر منظورت سمت چپ کاربر باشه، flex-start بذار) */
    }

    .lotteryticket-spinner {
        width: 32px;
        height: 32px;
    }

    .lotteryticket-loader {
        padding: 1.1rem 0.75rem;
        font-size: 0.85rem;
    }
}

/* تغییرات جدید: رنگ هاور دکمه‌ها (background تغییر کنه) */
.circle-icon-btn--edit {
    background-color: var(--color-primary-soft); /* رنگ پس‌زمینه نرم در هاور */
    border-color: var(--neon-yellow);
    box-shadow: 0 0 8px var(--neon-yellow-glow);
}

.circle-icon-btn--delete {
    background-color: var(--color-primary-soft); /* رنگ پس‌زمینه نرم در هاور */
    border-color: var(--neon-red);
    box-shadow: 0 0 8px var(--neon-red-glow);
}

.circle-icon-btn--edit:hover {
    background-color: var(--neon-yellow); /* رنگ پس‌زمینه نرم در هاور */
    border-color: var(--neon-yellow);
    box-shadow: 0 0 8px var(--neon-yellow-glow);
}

.circle-icon-btn--delete:hover {
    background-color: var(--neon-red); /* رنگ پس‌زمینه نرم در هاور */
    border-color: var(--neon-red);
    box-shadow: 0 0 8px var(--neon-red-glow);
}


/* استال برای دکمه لغو اپدیت در اپدیت تیکنت ها  */
.lotteryticket-cancel-btn {
    background: linear-gradient(135deg, var(--color-error), #b91c1c);
    color: #fff;
    border: 1px solid rgba(248, 113, 113, 0.6);
    box-shadow: 0 10px 25px rgba(15, 23, 42, 0.55);
}

    .lotteryticket-cancel-btn:hover:enabled {
        transform: translateY(-1px);
        box-shadow: 0 14px 35px rgba(248, 113, 113, 0.75);
    }



/* #endregion LotteryTicket.css */


/* #region Global App Splash Loader */

/* تمام صفحه قبل از بالا آمدن بلیزور */
.app-splash {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
    background: radial-gradient(circle at top left, rgba(148, 163, 184, 0.18), transparent 60%), radial-gradient(circle at bottom right, rgba(56, 189, 248, 0.22), transparent 60%), var(--color-bg);
}



/* لایه‌ی نور نئونی پشت کارت */
.app-splash__glow {
    position: absolute;
    inset: -20%;
    background: radial-gradient(circle at 20% 20%, rgba(34, 211, 238, 0.32), transparent 60%), radial-gradient(circle at 80% 80%, rgba(139, 92, 246, 0.32), transparent 60%);
    filter: blur(40px);
    opacity: 0.9;
    pointer-events: none;
}

/* کارت وسط صفحه (از ui-card استفاده می‌کند) */
.app-splash__card {
    position: relative;
    z-index: 1;
    max-width: 320px;
    width: 100%;
    text-align: center;
    padding: 1.6rem 1.25rem;
}

/* اسپینر نئونی */
.app-splash__spinner {
    width: 56px;
    height: 56px;
    border-radius: 999px;
    border: 3px solid rgba(148, 163, 184, 0.35);
    border-top-color: var(--color-primary);
    border-right-color: var(--color-secondary);
    animation: app-splash-spin 0.9s linear infinite;
    margin: 0 auto 1rem;
    box-shadow: 0 0 18px rgba(34, 211, 238, 0.55);
}

/* عنوان */
.app-splash__title {
    font-size: 1.15rem;
    font-weight: 800;
    color: var(--color-primary);
    margin-bottom: 0.35rem;
}

/* زیرعنوان */
.app-splash__subtitle {
    font-size: 0.86rem;
    color: var(--color-text-muted);
}

/* انیمیشن اسپینر */
@keyframes app-splash-spin {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

/* موبایل */
@media (max-width: 480px) {
    .app-splash__card {
        max-width: 280px;
        padding: 1.3rem 1.1rem;
    }

    .app-splash__spinner {
        width: 48px;
        height: 48px;
    }
}

/* #endregion Global App Splash Loader */


/* #region Page Loading Overlay */

/* اوورلی تمام صفحه برای زمان لود دیتای داخلی صفحات */
.page-loading-overlay {
    position: fixed;
    inset: 0;
    z-index: 2000;
    display: flex;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(10px);
    background: rgba(15, 23, 42, 0.65);
}

/* در لایت تم، بک‌گراند کمی روشن‌تر شود */
[data-theme="light"] .page-loading-overlay {
    background: rgba(15, 23, 42, 0.18);
}

/* کارت کوچک داخل اوورلی */
.page-loading-box {
    background: var(--color-surface-soft);
    border-radius: var(--radius-lg);
    border: 1px solid var(--color-border-soft);
    box-shadow: var(--shadow-strong);
    padding: 1.1rem 1.4rem;
    min-width: 230px;
    text-align: center;
}

/* اسپینر داخلی – کوچک‌تر */
.page-loading-spinner {
    width: 42px;
    height: 42px;
    border-radius: 999px;
    border: 3px solid rgba(148, 163, 184, 0.35);
    border-top-color: var(--color-primary);
    border-right-color: var(--color-secondary);
    animation: app-splash-spin 0.9s linear infinite; /* از همون keyframes بالا */
    margin: 0 auto 0.75rem;
    box-shadow: 0 0 14px rgba(34, 211, 238, 0.55);
}

.page-loading-title {
    font-size: 0.95rem;
    font-weight: 700;
    margin-bottom: 0.25rem;
}

.page-loading-subtitle {
    font-size: 0.82rem;
    color: var(--color-text-muted);
}




/* Icon in splash screen */
.app-splash__icon {
    width: 92px;
    height: 92px;
    object-fit: contain;
    margin: 0 auto 1.2rem;
    display: block;
    filter: drop-shadow(0 0 14px rgba(34, 211, 238, 0.55));
}

/* Mobile */
@media (max-width: 480px) {
    .app-splash__icon {
        width: 78px;
        height: 78px;
        margin-bottom: 1rem;
    }
}
/* #endregion Page Loading Overlay */






/* #region Edit User – Big Avatar Preview */

.edit-avatar-preview {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin-bottom: 1.2rem;
}

.edit-avatar-preview__circle {
    width: 120px;
    height: 120px;
    border-radius: 999px;
    border: 3px solid var(--color-primary);
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    background: radial-gradient(circle, var(--color-primary-soft), transparent 60%);
    box-shadow: 0 0 18px rgba(34, 211, 238, 0.55);
}

    .edit-avatar-preview__circle img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

.edit-avatar-preview__label {
    margin-top: 0.6rem;
    font-size: 0.85rem;
    color: var(--color-text-muted);
}

/* در موبایل کمی کوچک‌تر اگر خواستی */
@media (max-width: 480px) {
    .edit-avatar-preview__circle {
        width: 100px;
        height: 100px;
    }
}

/* #endregion Edit User – Big Avatar Preview */

/* #region  profile.css */
/* #region Profile Picker (Edit User) */

.profile-picker-card {
    margin-bottom: 1rem;
    direction: rtl;
    text-align: right;
}

.profile-picker__header h2 {
    margin: 0 0 0.25rem 0;
    font-size: 1rem;
    font-weight: 800;
    color: var(--color-primary);
}

.profile-picker__header p {
    margin: 0 0 0.75rem 0;
    font-size: 0.82rem;
    color: var(--color-text-muted);
}

/* گرید 15 تایی – 1 یا 2 ردیف بسته به عرض صفحه */
.profile-picker__grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(56px, 1fr));
    gap: 0.6rem;
}

/* هر آیتم مثل دکمه مربع کوچک */
.profile-picker__item {
    position: relative;
    width: 96px;
    height: 96px;
    border-radius: var(--radius-md);
    border: 1px solid var(--color-border-soft);
    background: var(--color-surface);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    padding: 0;
    outline: none;
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast), transform var(--transition-fast), background-color var(--transition-fast);
}

    .profile-picker__item:hover {
        transform: translateY(-2px);
        border-color: var(--color-primary);
        box-shadow: 0 10px 28px rgba(15, 23, 42, 0.35);
    }

/* دایره‌ی پروفایل داخل مربع */
.profile-picker__avatar-circle {
    width: 72px;
    height: 72px;
    border-radius: 999px;
    border: 2px solid var(--color-border-soft);
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    background: radial-gradient(circle, var(--color-primary-soft), transparent 60%);
}

    .profile-picker__avatar-circle img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

/* حالت انتخاب‌شده: بوردر پریمیوم (گرادیانت سایت) */
.profile-picker__item.is-selected {
    border-width: 2px;
    border-color: transparent;
    background: linear-gradient(var(--color-surface), var(--color-surface)) padding-box, linear-gradient(135deg, var(--color-primary), var(--color-secondary)) border-box;
    box-shadow: 0 0 16px rgba(56, 189, 248, 0.55);
    transform: translateY(-2px);
}

    /* وقتی انتخاب شده، خود دایره هم رنگ پریمیوم بگیرد */
    .profile-picker__item.is-selected .profile-picker__avatar-circle {
        border-color: var(--color-secondary);
        box-shadow: 0 0 10px rgba(168, 85, 247, 0.7);
    }
/* Desktop */
.profile-picker__grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
    gap: 1.2rem; /* فاصله مناسب بین آواتارها */
    padding: 0.4rem;
}

/* موبایل: کمی فشرده‌تر */
@media (max-width: 480px) {
    .profile-picker__grid {
        grid-template-columns: repeat(auto-fill, minmax(90px, 1fr));
        gap: 0.9rem;
    }

    .profile-picker__item {
        width: 87px;
        height: 87px;
    }

    .profile-picker__avatar-circle {
        width: 66px;
        height: 66px;
    }
}

/* نمایش دکنه انتخاب کاربر */
.edit-avatar-preview__actions {
    margin-top: 0.7rem;
    display: flex;
    justify-content: center;
}


/* #endregion Profile Picker */


/* Center Modal for Avatar Picker */
.avatar-sheet .sheet-content {
    position: fixed !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    width: 90%;
    max-width: 480px;
    border-radius: 20px;
    background: var(--color-surface-soft);
    border: 1px solid var(--color-border-soft);
    box-shadow: 0 0 40px rgba(0,0,0,0.45);
    display: flex;
    flex-direction: column;
    max-height: none !important; /* ⬅ FULL HEIGHT */
    height: auto !important; /* ⬅ رشد بر اساس محتوا */
}

.avatar-sheet .sheet-body {
    overflow-y: auto;
}

/* بک‌دراپ تاریک */
.avatar-sheet .sheet-backdrop {
    background: rgba(0,0,0,0.55);
    backdrop-filter: blur(4px);
}

/* Center Modal for Avatar Picker */

.avatar-sheet .sheet-content {
    position: fixed !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    width: 90%;
    max-width: 480px;
    border-radius: 20px;
    background: var(--color-surface-soft);
    border: 1px solid var(--color-border-soft);
    box-shadow: 0 0 40px rgba(0,0,0,0.45);
    display: flex;
    flex-direction: column;
    /* ارتفاع کلی مودال – بزرگ‌تر ولی محدود */
    max-height: 80vh; /* سقف ارتفاع */
    height: auto;
}

/* بدنه‌ی آواتارها – اسکرول داخلی اگر زیاد شد */
.avatar-sheet .sheet-body {
    flex: 1 1 auto;
    overflow-y: auto;
    padding: 1rem 1.25rem 1.25rem;
}

/* بک‌دراپ تاریک */
.avatar-sheet .sheet-backdrop {
    background: rgba(0,0,0,0.55);
    backdrop-filter: blur(4px);
}

/* هدر مودال + جا برای دکمه × */
.avatar-sheet__header {
    position: relative;
    padding: 1rem 1.25rem 0.75rem 3rem; /* سمت چپ جا برای دکمه */
    border-bottom: 1px solid var(--color-border-soft);
}

/* دکمه × دایره‌ای با گرادیانت پریمیوم */
.avatar-sheet__close-btn {
    position: absolute;
    top: 0.75rem;
    left: 0.75rem; /* گوشه چپ بالا (در هر دو تم) */
    width: 32px;
    height: 32px;
    border-radius: 999px;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--color-primary), var(--color-secondary));
    color: #ffffff;
    font-size: 1.1rem;
    font-weight: 700;
    cursor: pointer;
    box-shadow: 0 10px 26px rgba(15, 23, 42, 0.65);
    transition: transform var(--transition-fast), box-shadow var(--transition-fast), opacity var(--transition-fast);
}

    .avatar-sheet__close-btn:hover {
        transform: translateY(-1px) scale(1.03);
        box-shadow: 0 16px 40px rgba(15, 23, 42, 0.85);
    }

    .avatar-sheet__close-btn:active {
        transform: scale(0.96);
        box-shadow: 0 8px 20px rgba(15, 23, 42, 0.6);
    }

/* موبایل – ارتفاع کنترل‌شده، اسکرول اگر آواتارها زیاد شدند */
/*@media (max-width: 480px) {
    .avatar-sheet .sheet-content {
        width: 94%;
        max-width: 94%;
        max-height: 90vh;*/ /* روی موبایل کمی کوتاه‌تر، تا جا برای بک‌دراپ بماند */
/*}

    .avatar-sheet .sheet-body {
        padding: 0.8rem 0.9rem 1rem;
    }

    .avatar-sheet__close-btn {
        width: 30px;
        height: 30px;
        font-size: 1rem;
    }
}*/
/* MOBILE — Avatar Modal bigger (about 1.7x) */
@media (max-width: 480px) {

    .avatar-sheet .sheet-content {
        position: fixed !important;
        top: 50% !important;
        left: 50% !important;
        transform: translate(-50%, -50%) !important;
        width: 94%;
        max-width: 94%;
        /* ارتفاع واقعی مودال – خیلی بلندتر از قبلی */
        min-height: 77vh !important; /* حداقل حدود 1.7× حالت‌های قبلی */
        max-height: 87vh !important; /* سقف، تا از صفحه نزنه بیرون */

        display: flex;
        flex-direction: column;
    }

    .avatar-sheet .sheet-body {
        flex: 1 1 auto;
        overflow-y: auto;
        padding: 1rem 0.9rem 1.2rem;
    }

    .avatar-sheet__close-btn {
        width: 30px;
        height: 30px;
        font-size: 1rem;
    }
}
/* MOBILE — Avatar Modal larger height */
/*@media (max-width: 480px) {

    .avatar-sheet .sheet-content {
        position: fixed !important; 
        top: 50% !important;
        left: 50% !important;
        transform: translate(-50%, -50%) !important;
        width: 94%;
        max-width: 94%;*/
/* افزایش ارتفاع واقعی مودال  (1.5×) */
/*max-height: 90vh !important;
        min-height: 70vh !important;*/ /* مودال را مجبور می‌کند بلند شود */

/*display: flex;
        flex-direction: column;
    }*/

/* بخش قابل اسکرول */
/*.avatar-sheet .sheet-body {
        flex: 1 1 auto;
        overflow-y: auto;
        padding: 1rem 0.9rem 1.2rem;
    }
}*/




/* #endregion profile.css */
/* #region jalali-date-picker */

/* =========================
   Base picker (RTL)
   ========================= */
.jalali-picker {
    direction: rtl;
    background: #111827;
    color: #e5e7eb;
    border-radius: 16px;
    padding: 0.85rem 0.9rem 0.75rem;
    width: min(420px, 100%);
    box-shadow: 0 18px 50px rgba(0,0,0,0.45);
    font-size: 0.86rem;
    /* make it layout-safe inside modal on small devices */
    display: flex;
    flex-direction: column;
    max-height: 82vh;
    box-sizing: border-box;
}

/* Header top: date title + time */
.jalali-header-top {
    text-align: center;
    font-weight: 800;
    margin-bottom: 0.45rem;
    color: #38bdf8;
    display: grid;
    gap: 0.15rem;
}

.jp-time-top {
    font-weight: 700;
    font-size: 0.82rem;
    color: rgba(229,231,235,0.85);
    letter-spacing: 0.2px;
}

/* Nav bar */
.jalali-header-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.35rem;
    background: #0b1120;
    border-radius: 10px;
    padding: 0.35rem 0.55rem;
    margin-bottom: 0.5rem;
}

.jp-nav-btn {
    background: transparent;
    border: none;
    color: #9ca3af;
    font-size: 1.25rem;
    line-height: 1;
    cursor: pointer;
    padding: 0.15rem 0.35rem;
    border-radius: 10px;
}

    .jp-nav-btn:hover {
        color: #e5e7eb;
        background: rgba(255,255,255,0.04);
    }

.jp-nav-label {
    background: transparent;
    border: none;
    color: #e5e7eb;
    font-weight: 700;
    cursor: pointer;
    padding: 0.25rem 0.5rem;
    border-radius: 10px;
}

    .jp-nav-label:hover {
        background: rgba(255,255,255,0.04);
    }

.jp-sep {
    color: #4b5563;
    font-size: 0.85rem;
}

/* Body must scroll if height is tight */
.jalali-body {
    margin-top: 0.25rem;
    flex: 1 1 auto;
    overflow: auto;
    padding-bottom: 0.35rem;
}

/* Day table */
.jalali-table {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
}

    .jalali-table th {
        font-weight: 700;
        font-size: 0.76rem;
        padding: 0.25rem 0;
        color: #9ca3af;
        text-align: center;
    }

    .jalali-table td {
        text-align: center;
        padding: 0.18rem 0;
    }

.jp-day {
    width: 2.1rem;
    height: 2.1rem;
    border-radius: 999px;
    border: none;
    cursor: pointer;
    background: transparent;
    color: #e5e7eb;
    transition: transform 0.12s ease, background-color 0.12s ease, box-shadow 0.12s ease;
}

    .jp-day:hover {
        background: rgba(59,130,246,0.35);
        transform: translateY(-1px);
    }

    .jp-day.is-selected {
        background: #3b82f6;
        color: #f9fafb;
        box-shadow: 0 10px 25px rgba(59,130,246,0.35);
    }

.jp-empty {
    opacity: 0.2;
}

/* Months/Years grid */
.jalali-grid {
    display: grid;
    gap: 0.35rem;
}

.jalali-months {
    grid-template-columns: repeat(3, 1fr);
}

.jalali-years {
    grid-template-columns: repeat(3, 1fr);
}

.jp-cell {
    border-radius: 999px;
    border: none;
    padding: 0.42rem 0.45rem;
    background: #020617;
    color: #e5e7eb;
    cursor: pointer;
    font-size: 0.82rem;
    transition: transform 0.12s ease, background-color 0.12s ease, box-shadow 0.12s ease;
}

    .jp-cell:hover {
        background: rgba(59,130,246,0.35);
        transform: translateY(-1px);
    }

    .jp-cell.is-current {
        background: #3b82f6;
        color: #f9fafb;
        box-shadow: 0 10px 25px rgba(59,130,246,0.35);
    }

/* Years scroll */
.jalali-years-scroll {
    max-height: clamp(150px, 28vh, 260px);
    overflow-y: auto;
    padding-inline: 2px;
}

/* Footer */
.jalali-footer {
    display: flex;
    justify-content: space-between;
    gap: 0.6rem;
    margin-top: 0.65rem;
    flex: 0 0 auto;
}

    .jalali-footer .ui-btn {
        min-height: 42px;
    }

/* =========================
   Time panel (responsive)
   ========================= */
.jp-time-panel {
    margin-top: 0.7rem;
    background: linear-gradient(180deg, rgba(2,6,23,0.65), rgba(2,6,23,0.35));
    border: 1px solid rgba(148,163,184,0.25);
    border-radius: 14px;
    padding: 0.7rem 0.7rem 0.6rem;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,0.03);
}

.jp-time-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.6rem;
    font-weight: 800;
    color: rgba(229,231,235,0.92);
    margin-bottom: 0.55rem;
}

.jp-time-preview {
    font-weight: 800;
    font-size: 0.9rem;
    background: rgba(15,23,42,0.55);
    border: 1px solid rgba(148,163,184,0.25);
    padding: 0.25rem 0.55rem;
    border-radius: 999px;
    color: #e5e7eb;
}

/* Two columns on normal screens: Hour LEFT, Minute RIGHT
   (RTL page, but your markup order is Hour then Minute; keep it stable) */
.jp-time-controls {
    display: grid;
    direction: ltr;
    grid-template-columns: 1fr 1fr;
    gap: 0.55rem;
    align-items: stretch;
}

.jp-stepper {
    background: rgba(15,23,42,0.5);
    border: 1px solid rgba(148,163,184,0.22);
    border-radius: 14px;
    padding: 0.6rem;
    display: grid;
    grid-template-columns: 44px 1fr 44px;
    grid-template-rows: auto auto;
    grid-template-areas:
        "label label label"
        "minus value plus";
    gap: 0.45rem;
    align-items: center;
}

.jp-stepper-label {
    grid-area: label;
    font-size: 0.78rem;
    font-weight: 800;
    color: rgba(229,231,235,0.75);
    text-align: right;
}

.jp-stepper-btn {
    border: none;
    border-radius: 12px;
    height: 42px;
    cursor: pointer;
    background: rgba(2,6,23,0.75);
    color: #e5e7eb;
    font-size: 1.15rem;
    font-weight: 900;
    transition: transform 0.12s ease, background-color 0.12s ease;
}

    .jp-stepper-btn:hover {
        background: rgba(59,130,246,0.25);
        transform: translateY(-1px);
    }

    .jp-stepper-btn:active {
        transform: translateY(0);
    }

.jp-stepper-value {
    grid-area: value;
    height: 42px;
    border-radius: 12px;
    background: rgba(2,6,23,0.5);
    border: 1px solid rgba(148,163,184,0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 900;
    font-size: 1.05rem;
    letter-spacing: 0.5px;
}

.jp-time-hint {
    margin-top: 0.45rem;
    font-size: 0.74rem;
    color: rgba(156,163,175,0.9);
    text-align: center;
}

/* =========================
   Modal centering (datepicker sheet)
   ========================= */
.datepicker-sheet .sheet-backdrop {
    background: rgba(0,0,0,0.55);
    backdrop-filter: blur(4px);
}

.privacy-sheet.datepicker-sheet .sheet-content {
    position: fixed !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    /* IMPORTANT: allow more height on phones */
    width: calc(100vw - 24px);
    max-width: 440px;
    max-height: calc(100vh - 24px);
    padding: 0;
    margin: 0;
    background: transparent;
    border: none;
    box-shadow: none;
    display: flex;
    align-items: center;
    justify-content: center;
}

    .privacy-sheet.datepicker-sheet .sheet-content > .jalali-picker {
        width: 100%;
        max-width: 440px;
        min-width: 0;
        overflow: hidden;
    }

/* =========================
   Mobile tuning (fix your screenshot issue)
   ========================= */
@media (max-width: 600px) {
    .jalali-picker {
        border-radius: 18px;
        padding: 0.85rem 0.85rem 0.75rem;
        max-height: 92vh; /* more room so time section is visible */
    }

    .jp-day {
        width: 2.25rem;
        height: 2.25rem;
    }

    .jalali-footer {
        gap: 0.55rem;
    }

        .jalali-footer .ui-btn {
            flex: 1;
            min-height: 44px;
        }
}

/* Extra small phones: give even more height + stack steppers if needed */
@media (max-width: 380px) {
    .jalali-picker {
        max-height: 96vh;
        font-size: 0.84rem;
    }

    .jp-time-controls {
        grid-template-columns: 1fr; /* stack so nothing gets clipped */
    }

    .jp-stepper {
        grid-template-columns: 44px 1fr 44px;
    }
}

/* #endregion jalali-date-picker */





/* #region scroll Bug*/
@supports (height: 100dvh) {
    .page-root, .dashboard-root, .lotteryticket-root {
        min-height: 100dvh;
    }
}





@media screen and (max-width: 480px) {
    input,
    select,
    textarea,
    .ui-input {
        font-size: 16px !important;
    }
}


/* #endregion scroll Bug*/


/* #region terms */
/*.terms-line {
    display: flex;
    flex-wrap: wrap;*/ /* اجازه بشکنه */
/*gap: 4px;
    align-items: center;
    white-space: normal;*/ /* اجازه خط جدید */
/*}

.terms-link {
    color: var(--color-primary);*/ /* هر رنگی که دوست داری، فعلاً پرایمری */
/*cursor: pointer;
    font-weight: 600;
    white-space: nowrap;
}

    .terms-link:hover {
        opacity: 0.8;
    }*/

.terms-hint {
    font-size: 0.80rem; /* دسکتاپ – کمی کوچک‌تر از لیبل (0.9rem) */
    font-weight: 500;
    color: var(--color-primary);
    padding: 0.35rem 0.6rem;
    border-radius: var(--radius-md);
    line-height: 1.5;
}

/* موبایل / اندروید – ریزتر از دسکتاپ */
@media (max-width: 640px) {
    .terms-hint {
        font-size: 0.70rem; /* کوچیک‌تر روی موبایل */
        padding: 0.3rem 0.55rem; /* کمی جمع‌وجورتر */
    }
}

/* #endregion  terms*/


/* #region  birthdate*/
.birthdate-hint {
    font-size: 0.80rem; /* دسکتاپ – کمی کوچک‌تر از لیبل (0.9rem) */
    font-weight: 500;
    color: var(--color-warning);
    background: rgba(249, 115, 22, 0.12);
    border: 1px solid rgba(249, 115, 22, 0.32);
    padding: 0.35rem 0.6rem;
    border-radius: var(--radius-md);
    line-height: 1.5;
    margin-top: 5px;
    margin-bottom: 5px;
}

/* موبایل / اندروید – ریزتر از دسکتاپ */
@media (max-width: 640px) {
    .birthdate-hint {
        font-size: 0.70rem; /* کوچیک‌تر روی موبایل */
        padding: 0.3rem 0.55rem; /* کمی جمع‌وجورتر */
    }
}

/* #endregion  birthdate*/


/* #region  warning text*/
.warning-hint-title {
    font-size: 1.0rem; /* دسکتاپ – کمی کوچک‌تر از لیبل (0.9rem) */
    font-weight: 500;
    color: var(--color-error);
    line-height: 1.5;
}

.warning-hint {
    font-size: 0.90rem; /* دسکتاپ – کمی کوچک‌تر از لیبل (0.9rem) */
    font-weight: 500;
    color: var(--color-error);
    padding: 0.15rem 0.3rem;
    border-radius: var(--radius-md);
    line-height: 1.5;
}

/* موبایل / اندروید – ریزتر از دسکتاپ */
@media (max-width: 640px) {
    .warning-hint {
        font-size: 0.70rem; /* کوچیک‌تر روی موبایل */
        padding: 0.3rem 0.55rem; /* کمی جمع‌وجورتر */
    }

    .warning-hint-title {
        font-size: 0.80rem; /* کوچیک‌تر روی موبایل */
        padding: 0.3rem 0.55rem; /* کمی جمع‌وجورتر */
    }
}

/* #endregion  irthdate*/




/* #endregion  irthdate*/



/* #region  Foter*/

.global-footer {
    margin-top: auto;
    padding: 0.6rem 0.8rem;
    background: rgba(15, 23, 42, 0.45);
    border-top: 1px solid var(--color-border-soft);
    backdrop-filter: blur(10px);
}

.footer-container {
    max-width: 960px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    direction: rtl;
    flex-direction: row-reverse;
}

.footer-right {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
}

.footer-copy {
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--color-text);
}

.footer-mini {
    font-size: 0.65rem;
    color: var(--color-text-muted);
}

.footer-left {
    display: flex;
    align-items: center;
    gap: 0.35rem;
}

.footer-icon {
    width: 24px;
    height: 24px;
    padding: 2px;
    border-radius: 8px;
    background: rgba(255,255,255,0.04);
    border: 1px solid var(--color-border-soft);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: 0.2s ease;
}

    .footer-icon svg {
        width: 18px;
        height: 18px;
    }

    .footer-icon:hover {
        transform: translateY(-2px);
        border-color: var(--color-primary);
        box-shadow: 0 0 10px rgba(34,211,238,0.45);
    }

@media (max-width: 640px) {
    .footer-icon {
        width: 40px;
        height: 40px;
        padding: 8px;
    }

        .footer-icon svg {
            width: 32px;
            height: 32px;
        }
}

@media (min-width: 641px) {
    .footer-icon {
        width: 50px;
        height: 50px;
        padding: 10px;
    }

        .footer-icon svg {
            width: 42px;
            height: 42px;
        }
}



/* #endregion  irthdate*/


/* #region  Ban*/

/* #region BANNED USER OVERLAY (LotteryTicket)*/
/* ================================
   BANNED USER OVERLAY (LotteryTicket)
   ================================ */

.lotteryticket-root.is-user-banned {
    position: relative;
}

    /* Blur + disable interaction behind overlay */
    .lotteryticket-root.is-user-banned .lotteryticket-card {
        filter: blur(8px) saturate(0.9);
        opacity: 0.55;
        pointer-events: none; /* ✅ blocks all clicks */
        user-select: none;
        transform: scale(0.995);
    }

/* Fullscreen overlay */
.ban-overlay {
    position: fixed;
    inset: 0;
    z-index: 5000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.25rem;
    background: radial-gradient(circle at 20% 15%, rgba(255, 43, 110, 0.20), transparent 55%), radial-gradient(circle at 80% 85%, rgba(239, 68, 68, 0.18), transparent 55%), rgba(15, 23, 42, 0.70);
    backdrop-filter: blur(10px);
}

/* Premium card */
.ban-overlay__card {
    width: 100%;
    max-width: 720px;
    border-radius: 22px;
    padding: 1.35rem 1.35rem 1.15rem;
    direction: rtl;
    text-align: right;
    background: linear-gradient(180deg, rgba(15,23,42,0.88), rgba(15,23,42,0.72));
    border: 1px solid rgba(239, 68, 68, 0.55);
    box-shadow: 0 20px 60px rgba(0,0,0,0.45), 0 0 18px rgba(239, 68, 68, 0.30);
    position: relative;
    overflow: hidden;
}

    /* subtle neon edge */
    .ban-overlay__card::before {
        content: "";
        position: absolute;
        inset: -2px;
        border-radius: inherit;
        background: conic-gradient(from 180deg, rgba(239,68,68,0.0), rgba(239,68,68,0.55), rgba(255,43,110,0.40), rgba(239,68,68,0.0));
        filter: blur(10px);
        opacity: 0.55;
        pointer-events: none;
    }

.ban-overlay__icon {
    width: 54px;
    height: 54px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 900;
    font-size: 1.4rem;
    color: #fff;
    background: rgba(239, 68, 68, 0.20);
    border: 1px solid rgba(239, 68, 68, 0.85);
    box-shadow: 0 0 12px rgba(239, 68, 68, 0.45), 0 0 24px rgba(239, 68, 68, 0.25);
    margin-bottom: 0.85rem;
}

.ban-overlay__title {
    font-size: 1.35rem;
    font-weight: 900;
    color: #fff;
    margin-bottom: 0.55rem;
}

.ban-overlay__message {
    font-size: 1.02rem;
    font-weight: 650;
    line-height: 1.85;
    color: rgba(255,255,255,0.92);
    padding: 0.85rem 0.95rem;
    border-radius: 16px;
    background: rgba(239, 68, 68, 0.10);
    border: 1px solid rgba(239, 68, 68, 0.35);
}

.ban-overlay__hint {
    margin-top: 0.85rem;
    font-size: 0.88rem;
    line-height: 1.7;
    color: rgba(148, 163, 184, 0.95);
}

/* Mobile tuning */
@media (max-width: 640px) {
    .ban-overlay__card {
        padding: 1.1rem 1.05rem 1rem;
        border-radius: 18px;
    }

    .ban-overlay__title {
        font-size: 1.1rem;
    }

    .ban-overlay__message {
        font-size: 0.92rem;
        padding: 0.75rem 0.8rem;
    }
}

/* #endregion  */


/* #region  SUSPECT */
/* ================================
   SUSPECT / BANNED DASH TILE
   ================================ */

.dash-tile--suspect {
    background: radial-gradient(circle at 20% 20%, rgba(239,68,68,0.45), transparent 55%), radial-gradient(circle at 80% 80%, rgba(255,43,110,0.35), transparent 55%), linear-gradient(180deg, rgba(25,10,15,0.95), rgba(15,23,42,0.9) ) !important;
    border: 1px solid rgba(239,68,68,0.75);
    box-shadow: 0 0 18px rgba(239,68,68,0.45), 0 0 42px rgba(239,68,68,0.30);
    animation: suspectPulse 3s ease-in-out infinite;
}

/* subtle neon pulse */
@keyframes suspectPulse {
    0% {
        box-shadow: 0 0 16px rgba(239,68,68,0.35), 0 0 32px rgba(239,68,68,0.25);
    }

    50% {
        box-shadow: 0 0 28px rgba(239,68,68,0.65), 0 0 56px rgba(239,68,68,0.45);
    }

    100% {
        box-shadow: 0 0 16px rgba(239,68,68,0.35), 0 0 32px rgba(239,68,68,0.25);
    }
}

/* optional: make text slightly warning-ish */
.dash-tile--suspect h3 {
    color: #ffb4b4;
}

.dash-tile--suspect p {
    color: rgba(255, 200, 200, 0.85);
}

/* ================================
   XPOINT BANNED STYLE
   ================================ */

.xpoint-banned {
    font-size: 1.6rem !important;
    font-weight: 900;
    color: #ef4444;
    text-shadow: 0 0 12px rgba(239,68,68,0.65), 0 0 24px rgba(239,68,68,0.35);
}
/* #endregion */

/* #endregion*/


/* #region DASH TILE COUNTDOWN LINE – SOFT WARNING */

.dash-tile__countdown-line {
    margin-top: 0.4rem;
    padding: 0.32rem 0.65rem;
    width: fit-content;
    border-radius: 999px;
    border: 1px solid rgba(245, 158, 11, 0.35); /* amber */
    /* Soft warning gradient (gold / amber) */
    background: linear-gradient( 135deg, rgba(245, 158, 11, 0.18), /* amber */
    rgba(251, 191, 36, 0.16) /* gold */
    );
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    line-height: 1.2;
    font-variant-numeric: tabular-nums;
    color: rgba(255, 243, 199, 0.95); /* soft warm */
    /* Gentle glow (no neon burn) */
    box-shadow: 0 0 8px rgba(245, 158, 11, 0.22), 0 0 18px rgba(251, 191, 36, 0.18);
    text-shadow: 0 0 4px rgba(245, 158, 11, 0.35);
    /* Very calm pulse */
    animation: cdWarnPulse 5.5s ease-in-out infinite;
    will-change: opacity;
}

    /* When user is banned → slightly stronger warning */
    .dash-tile__countdown-line.countdown-line--danger {
        border-color: rgba(239, 68, 68, 0.45);
        background: linear-gradient( 135deg, rgba(239, 68, 68, 0.18), rgba(245, 158, 11, 0.18) );
        color: rgba(254, 226, 226, 0.95);
        box-shadow: 0 0 10px rgba(239, 68, 68, 0.25), 0 0 20px rgba(245, 158, 11, 0.18);
        animation: cdWarnPulseDanger 4.5s ease-in-out infinite;
    }

/* Calm warning pulse */
@keyframes cdWarnPulse {
    0% {
        opacity: 0.75;
    }

    50% {
        opacity: 1;
    }

    100% {
        opacity: 0.75;
    }
}

/* Slightly stronger for danger */
@keyframes cdWarnPulseDanger {
    0% {
        opacity: 0.65;
    }

    50% {
        opacity: 1;
    }

    100% {
        opacity: 0.65;
    }
}

/* Accessibility */
@media (prefers-reduced-motion: reduce) {
    .dash-tile__countdown-line {
        animation: none !important;
    }
}

/* Mobile tuning */
@media (max-width: 640px) {
    .dash-tile__countdown-line {
        font-size: 0.74rem;
        padding: 0.28rem 0.55rem;
    }
}

/* #endregion DASH TILE COUNTDOWN LINE */


/* #region TOURNAMENTS (FULL) — Responsive UI/UX (ALL PLATFORMS )*/

:root {
    --tour-maxw: 1100px; /* default */
    --tour-maxw-lg: 1480px; /* large desktop */
    --tour-maxw-xl: 1660px; /* ultra wide */
    --tour-gap: clamp(10px, 1.2vw, 16px);
    --tour-pad: clamp(12px, 1.6vw, 18px);
    --tour-card-pad: clamp(12px, 1.4vw, 16px);
    --tour-title: clamp(1.05rem, .8vw + .9rem, 1.45rem);
    --tour-sub: clamp(.78rem, .35vw + .68rem, .95rem);
    --tour-meta: clamp(.78rem, .25vw + .7rem, .92rem);
    --tour-btn: clamp(.78rem, .25vw + .7rem, .92rem);
}

/* ---------- Page shell ---------- */
.tour-root {
    min-height: 100dvh;
    padding: clamp(12px, 2vw, 22px);
    direction: rtl;
    background: var(--color-bg);
}

/* ---------- Main card ---------- */
.tour-card {
    width: min(var(--tour-maxw), 100%);
    margin: 0 auto;
    border-radius: var(--radius-xl);
    padding: var(--tour-pad);
    background: var(--color-surface-soft);
    border: 1px solid var(--color-border-soft);
    box-shadow: var(--shadow-strong);
    backdrop-filter: blur(12px);
}

/* ---------- Header ---------- */
.tour-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 12px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--color-border-soft);
}

    .tour-head h2 {
        margin: 0;
        font-size: var(--tour-title);
        font-weight: 900;
        color: var(--color-text);
    }

.tour-sub {
    margin-top: 4px;
    color: var(--color-text-muted);
    font-size: var(--tour-sub);
    font-weight: 600;
}

/* ---------- Loading / Empty ---------- */
.tour-loading,
.tour-empty {
    margin-top: 14px;
    padding: 16px 14px;
    border-radius: var(--radius-lg);
    border: 1px dashed var(--color-border-soft);
    background: rgba(255,255,255,0.04);
    color: var(--color-text-muted);
    text-align: center;
    font-weight: 750;
}

/* ---------- List: default (mobile-first) ---------- */
.tour-list {
    margin-top: 14px;
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--tour-gap);
    align-content: start;
}

.tour-list-area {
    margin-top: 14px;
    max-height: calc(100dvh - 150px); /* use dvh for mobile correctness */
    overflow: auto;
    overscroll-behavior: contain;
    padding-right: 2px; /* optional: avoids scrollbar overlay */
    scrollbar-width: thin;
    scrollbar-color: rgba(34,211,238,.55) rgba(255,255,255,.06);
}

    /* WebKit (Chrome/Edge/Safari) */
    .tour-list-area::-webkit-scrollbar {
        width: 12px;
    }

    .tour-list-area::-webkit-scrollbar-track {
        background: rgba(255,255,255,.05);
        border: 1px solid rgba(255,255,255,.08);
        border-radius: 999px;
        box-shadow: inset 0 0 0 1px rgba(0,0,0,.12);
    }

    .tour-list-area::-webkit-scrollbar-thumb {
        border-radius: 999px;
        border: 3px solid rgba(255,255,255,.06); /* creates padding */
        background: linear-gradient(180deg, rgba(34,211,238,.75), rgba(168,85,247,.55) );
        box-shadow: 0 8px 18px rgba(0,0,0,.25), inset 0 0 0 1px rgba(255,255,255,.18);
    }

        .tour-list-area::-webkit-scrollbar-thumb:hover {
            background: linear-gradient(180deg, rgba(34,211,238,.92), rgba(168,85,247,.72) );
            box-shadow: 0 10px 22px rgba(0,0,0,.32), inset 0 0 0 1px rgba(255,255,255,.24);
        }

        .tour-list-area::-webkit-scrollbar-thumb:active {
            background: linear-gradient(180deg, rgba(34,211,238,1), rgba(168,85,247,.85) );
        }

/* Optional: subtle inner fade at top/bottom like modern apps */
.tour-list-area {
    -webkit-mask-image: linear-gradient(to bottom, transparent, #000 16px, #000 calc(100% - 16px), transparent);
    mask-image: linear-gradient(to bottom, transparent, #000 16px, #000 calc(100% - 16px), transparent);
}

.tour-sentinel {
    height: 1px;
}

/* Tablet */
@media (min-width: 860px) {
    .tour-list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* Desktop (normal) */
@media (min-width: 1180px) {
    .tour-list {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

/* ---------- Tournament card ---------- */
.t-card {
    border-radius: var(--radius-xl);
    padding: var(--tour-card-pad);
    background: radial-gradient(circle at 15% 10%, rgba(34,211,238,.12), transparent 55%), radial-gradient(circle at 90% 80%, rgba(168,85,247,.10), transparent 55%), rgba(255,255,255,0.04);
    border: 1px solid var(--color-border-soft);
    box-shadow: var(--shadow-soft);
    transition: transform var(--transition-fast), box-shadow var(--transition-fast), border-color var(--transition-fast);
    display: flex;
    flex-direction: column; /* so actions can sit at bottom */
}

    .t-card:hover {
        transform: translateY(-2px);
        border-color: rgba(34,211,238,.35);
        box-shadow: var(--shadow-strong);
    }

/* ---------- Top row ---------- */
.t-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.t-title {
    font-weight: 950;
    color: var(--color-text);
    font-size: clamp(.95rem, .35vw + .9rem, 1.1rem);
    line-height: 1.35;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ---------- Badge ---------- */
.t-badge {
    padding: .22rem .6rem;
    border-radius: 999px;
    font-size: .72rem;
    font-weight: 900;
    border: 1px solid rgba(255,255,255,0.14);
    background: rgba(255,255,255,0.06);
    color: rgba(226,232,240,0.92);
    flex: 0 0 auto;
    white-space: nowrap;
}

.t-badge--open {
    border-color: rgba(34,211,238,.38);
    background: rgba(34,211,238,.12);
}

.t-badge--pending {
    border-color: rgba(245,158,11,.40);
    background: rgba(245,158,11,.12);
}

.t-badge--confirmed {
    border-color: rgba(34,197,94,.40);
    background: rgba(34,197,94,.12);
}

.t-badge--rejected {
    border-color: rgba(239,68,68,.48);
    background: rgba(239,68,68,.14);
    color: rgba(254,226,226,.95);
}

.t-badge--full {
    border-color: rgba(239,68,68,.40);
    background: rgba(239,68,68,.12);
}

/* ---------- Meta grid ---------- */
.t-meta {
    margin-top: 10px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px 12px;
    color: var(--color-text-muted);
    font-size: var(--tour-meta);
    font-weight: 650;
}

    .t-meta span {
        color: var(--color-text);
        font-weight: 900;
    }

@media (max-width: 720px) {
    .t-meta {
        grid-template-columns: 1fr;
    }
}

/* ---------- Progress ---------- */
.t-progress {
    margin-top: 10px;
    height: 10px;
    border-radius: 999px;
    overflow: hidden;
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.10);
}

.t-progress-bar {
    height: 100%;
    border-radius: 999px;
    background: linear-gradient(135deg, var(--color-primary), var(--color-secondary));
    transition: width var(--transition-med);
}

/* ---------- Status chips ---------- */
.t-hint,
.t-ok {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    border-radius: 999px;
    font-size: clamp(.75rem, .2vw + .7rem, .88rem);
    font-weight: 900;
    border: 1px solid transparent;
}

.t-hint {
    color: rgba(245,158,11,.95);
    background: rgba(245,158,11,.12);
    border-color: rgba(245,158,11,.22);
}

.t-danger {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    border-radius: 999px;
    font-size: clamp(.75rem, .2vw + .7rem, .88rem);
    font-weight: 900;
    color: #ef4444;
    background: rgba(239,68,68,.12);
    border: 1px solid rgba(239,68,68,.32);
}

    .t-danger:hover {
        background: rgba(239,68,68,.18);
        border-color: rgba(239,68,68,.45);
    }

.t-ok {
    color: rgba(34,197,94,.98);
    background: rgba(34,197,94,.10);
    border-color: rgba(34,197,94,.22);
}

/* ---------- Receipt link ---------- */
.t-link {
    color: var(--color-primary);
    font-weight: 850;
    text-decoration: none;
    padding: 6px 8px;
    border-radius: 10px;
    border: 1px solid rgba(34,211,238,.18);
    background: rgba(34,211,238,.06);
}

    .t-link:hover {
        border-color: rgba(34,211,238,.32);
        background: rgba(34,211,238,.10);
    }

/* ---------- Actions ---------- */
.t-actions {
    margin-top: auto; /* pin to bottom */
    padding-top: 12px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: wrap;
}

/* ---------- Buttons ---------- */
.t-btn {
    border-radius: 999px;
    padding: .55rem 1rem;
    min-height: 40px;
    font-weight: 900;
    font-size: var(--tour-btn);
    border: 1px solid transparent;
    cursor: pointer;
    user-select: none;
    transition: transform var(--transition-fast), box-shadow var(--transition-fast), background-color var(--transition-fast), border-color var(--transition-fast), opacity var(--transition-fast);
    white-space: nowrap;
}

    .t-btn:active {
        transform: translateY(1px);
    }

.t-btn-primary {
    background: linear-gradient(135deg, var(--color-primary), var(--color-secondary));
    color: #fff;
    box-shadow: 0 10px 26px rgba(15,23,42,.35);
}

    .t-btn-primary:hover {
        transform: translateY(-2px);
        box-shadow: 0 16px 40px rgba(15,23,42,.55);
    }

.t-btn-ghost {
    background: transparent;
    border-color: rgba(255,255,255,0.16);
    color: var(--color-text);
}

    .t-btn-ghost:hover {
        border-color: rgba(34,211,238,.35);
        background: rgba(34,211,238,.10);
    }

.t-btn-disabled {
    background: rgba(255,255,255,0.06);
    border-color: rgba(255,255,255,0.10);
    color: var(--color-text-muted);
    cursor: not-allowed;
    opacity: .85;
}

/* ---------- Mobile touch layout ---------- */
@media (max-width: 560px) {
    .t-top {
        align-items: flex-start;
    }

    .t-title {
        white-space: normal;
    }

    .t-actions {
        justify-content: flex-start;
    }

    .t-btn {
        flex: 1 1 calc(50% - 10px);
        text-align: center;
    }

    .t-hint, .t-ok, .t-link {
        width: 100%;
        justify-content: center;
        text-align: center;
    }
}

/* ==========================================================
   DESKTOP+ POLISH (your request: more margin/space on desktop)
   ========================================================== */

/* Large desktop: wider container + 4 columns (matches your screenshot) */
@media (min-width: 1200px) {
    .tour-root {
        padding: 26px 22px;
    }

    .tour-card {
        width: 100%;
        max-width: min(var(--tour-maxw-lg), calc(100vw - 90px));
        margin: 24px auto;
        padding: 22px;
    }

    .tour-head {
        padding-bottom: 14px;
    }

    .tour-list {
        grid-template-columns: repeat(4, minmax(260px, 1fr));
        gap: 18px;
    }

    .t-card {
        padding: 18px;
    }

    .t-meta {
        gap: 8px 14px;
    }
}

/* Ultra-wide monitors: slightly wider + more breathing room */
@media (min-width: 1600px) {
    .tour-card {
        max-width: min(var(--tour-maxw-xl), calc(100vw - 120px));
        padding: 24px;
    }

    .tour-list {
        gap: 20px;
    }

    .t-card {
        padding: 20px;
    }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
    .t-card, .t-btn, .t-progress-bar {
        transition: none !important;
    }
}




/* #endregion TOURNAMENTS (FULL)*/




/* #region TournamentPay */

/* =========================
   Tournament Pay (RTL + UX)
   ========================= */
.pay-root {
    direction: rtl;
    text-align: right;
    min-height: calc(100vh - 40px);
    padding: clamp(14px, 2.2vw, 26px);
    display: grid;
    place-items: center;
}

/* Desktop/Tablet container */
.pay-shell {
    width: min(980px, 100%);
}

/* Main wrapper card (desktop baseline) */
.pay-card {
    position: relative;
    border-radius: 18px;
    padding: clamp(16px, 2.2vw, 22px);
    background: rgba(255,255,255,.04);
    border: 1px solid rgba(255,255,255,.08);
    box-shadow: 0 20px 60px rgba(0,0,0,.35);
    backdrop-filter: blur(10px);
}

/* Topbar */
.pay-topbar {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 14px;
}

.pay-titlewrap {
    min-width: 0;
}

.pay-title {
    margin: 0;
    font-size: clamp(18px, 2.1vw, 22px);
    font-weight: 800;
    letter-spacing: -.2px;
    color: #66e3ff;
}

.pay-sub {
    margin-top: 6px;
    color: rgba(255,255,255,.72);
    font-size: 13px;
    line-height: 1.7;
    max-width: 62ch;
}

/* Back button */
.pay-back {
    align-self: flex-start;
    padding: 8px 12px !important;
    font-size: 12px !important;
    line-height: 1 !important;
    border-radius: 999px !important;
    opacity: .95;
    white-space: nowrap;
}

/* States */
.pay-state {
    margin-top: 10px;
    border-radius: 14px;
    padding: 12px 14px;
    font-size: 13px;
    border: 1px solid rgba(255,255,255,.10);
    background: rgba(0,0,0,.25);
}

.pay-state-loading {
    color: rgba(255,255,255,.80);
}

.pay-state-error {
    color: #ffd0d0;
    border-color: rgba(255,80,80,.30);
    background: rgba(255,80,80,.10);
}

/* Layout */
.pay-grid {
    display: grid;
    grid-template-columns: 1fr 1.08fr;
    gap: 14px;
    margin-top: 12px;
}

/* Panels (sections) */
.pay-panel {
    border-radius: 16px;
    padding: 14px;
    background: rgba(0,0,0,.18);
    border: 1px solid rgba(255,255,255,.07);
}

.pay-panel-head {
    margin-bottom: 10px;
}

.pay-panel-title {
    font-weight: 800;
    color: rgba(255,255,255,.92);
    font-size: 14px;
}

.pay-panel-hint {
    margin-top: 4px;
    font-size: 12px;
    color: rgba(255,255,255,.62);
    line-height: 1.6;
}

/* Bank card base */
.psg-card {
    border-radius: 16px;
    padding: 14px;
    background: linear-gradient(135deg, rgba(0,0,0,.62), rgba(35,26,6,.42));
    border: 1px solid rgba(255,210,90,.22);
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.04);
}

.psg-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
}

.psg-bank {
    font-weight: 800;
    color: rgba(255,255,255,.92);
}

.psg-type {
    margin-top: 2px;
    font-size: 12px;
    color: rgba(255,255,255,.60);
}

.psg-logo-box {
    width: 46px;
    height: 46px;
    border-radius: 12px;
    background: rgba(255,255,255,.06);
    border: 1px solid rgba(255,255,255,.08);
    display: grid;
    place-items: center;
    overflow: hidden;
    margin: 0;
}

.psg-logo-img {
    width: 34px;
    height: 34px;
    object-fit: contain;
}

.psg-number-frame {
    margin-top: 12px;
    border-radius: 14px;
    padding: 10px 12px;
    background: rgba(0,0,0,.35);
    border: 1px solid rgba(255,210,90,.22);
}

.psg-number {
    direction: ltr;
    font-variant-numeric: tabular-nums;
    letter-spacing: 1.2px;
    font-weight: 800;
    color: rgba(255,210,90,.95);
    text-align: center;
}

.psg-bottom {
    margin-top: 12px;
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 10px;
}

.psg-owner-label {
    font-size: 12px;
    color: rgba(255,255,255,.58);
}

.psg-owner-name {
    margin-top: 2px;
    font-weight: 800;
    color: rgba(255,255,255,.92);
}

.psg-copy {
    padding: 10px 12px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 800;
    border: 1px solid rgba(255,210,90,.30);
    background: rgba(255,210,90,.12);
    color: rgba(255,210,90,.95);
    cursor: pointer;
    transition: transform .15s ease, filter .15s ease, background .15s ease;
}

    .psg-copy:hover {
        transform: translateY(-1px);
        filter: brightness(1.05);
    }

    .psg-copy:disabled {
        opacity: .55;
        cursor: not-allowed;
        transform: none;
    }

/* Note */
.pay-note {
    margin-top: 12px;
    display: flex;
    align-items: flex-start;
    gap: 8px;
    color: rgba(255,255,255,.70);
    font-size: 12px;
    line-height: 1.7;
}

.pay-note-dot {
    width: 8px;
    height: 8px;
    margin-top: 6px;
    border-radius: 999px;
    background: rgba(102,227,255,.85);
    box-shadow: 0 0 0 4px rgba(102,227,255,.10);
}

/* Upload dropzone */
.pay-drop {
    position: relative;
    display: block;
    border-radius: 16px;
    padding: 14px;
    background: rgba(255,255,255,.03);
    border: 1px dashed rgba(255,255,255,.18);
    min-height: 210px;
    cursor: pointer;
    transition: border-color .15s ease, background .15s ease, transform .15s ease;
}

    .pay-drop:hover {
        border-color: rgba(102,227,255,.40);
        background: rgba(102,227,255,.06);
    }

    .pay-drop.is-drag {
        border-color: rgba(102,227,255,.70);
        background: rgba(102,227,255,.10);
        transform: scale(1.01);
    }

.pay-file {
    position: absolute;
    inset: 0;
    opacity: 0;
    cursor: pointer;
}

.pay-drop-inner {
    height: 100%;
    min-height: 180px;
    display: grid;
    place-items: center;
    text-align: center;
    gap: 8px;
}

.pay-drop-badge {
    width: 30px;
    height: 30px;
    border-radius: 999px;
    display: grid;
    place-items: center;
    font-weight: 900;
    color: rgba(255,255,255,.92);
    background: rgba(102,227,255,.18);
    border: 1px solid rgba(102,227,255,.30);
}

.pay-drop-title {
    font-weight: 900;
    color: rgba(255,255,255,.92);
}

.pay-drop-hint {
    font-size: 12px;
    color: rgba(255,255,255,.62);
}

.pay-drop.is-preview {
    border-style: solid;
    border-color: rgba(255,255,255,.14);
    background: rgba(0,0,0,.22);
}

.pay-preview {
    margin: 0;
    border-radius: 14px;
    overflow: hidden;
    border: 1px solid rgba(255,255,255,.10);
    background: rgba(0,0,0,.35);
}

    .pay-preview img {
        width: 100%;
        height: 210px;
        object-fit: cover;
        display: block;
    }

.pay-change-hint {
    margin-top: 10px;
    font-size: 12px;
    color: rgba(255,255,255,.65);
    text-align: center;
}

/* Actions */
.pay-actions {
    margin-top: 12px;
    display: grid;
    gap: 10px;
}

.pay-submit {
    width: 100%;
    border-radius: 14px;
    padding: 12px 14px;
    font-weight: 900;
    border: 1px solid rgba(255,255,255,.10);
    background: linear-gradient(90deg, rgba(32,189,215,.85), rgba(126,73,220,.85));
    color: rgba(255,255,255,.95);
    cursor: pointer;
    transition: transform .15s ease, filter .15s ease;
}

    .pay-submit:hover {
        transform: translateY(-1px);
        filter: brightness(1.05);
    }

    .pay-submit:disabled {
        opacity: .55;
        cursor: not-allowed;
        transform: none;
    }

.pay-hint {
    font-size: 12px;
    color: rgba(255,255,255,.72);
    padding: 10px 12px;
    border-radius: 12px;
    border: 1px solid rgba(255,255,255,.08);
    background: rgba(255,255,255,.03);
}

/* =========================
   LONG + ANIMATED BANK CARD
   ========================= */
.psg-card-long {
    min-height: 220px;
    padding: 16px 16px 14px;
    border-radius: 18px;
    background: radial-gradient(1200px 300px at 90% -20%, rgba(255,210,90,.18), transparent 55%), radial-gradient(900px 260px at -10% 110%, rgba(102,227,255,.10), transparent 55%), linear-gradient(135deg, rgba(0,0,0,.66), rgba(35,26,6,.44));
    border: 1px solid rgba(255,210,90,.24);
    box-shadow: 0 16px 45px rgba(0,0,0,.38), inset 0 0 0 1px rgba(255,255,255,.05);
    position: relative;
    overflow: hidden;
    transform: translateZ(0);
    transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease, filter .22s ease;
    animation: psgEnter .35s ease-out both;
}

@keyframes psgEnter {
    from {
        opacity: 0;
        transform: translateY(6px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@media (hover:hover) and (pointer:fine) {
    .psg-card-long:hover {
        transform: translateY(-2px) scale(1.01);
        border-color: rgba(255,210,90,.38);
        box-shadow: 0 20px 60px rgba(0,0,0,.44), inset 0 0 0 1px rgba(255,255,255,.06);
        filter: brightness(1.03);
    }
}

.psg-shine {
    position: absolute;
    inset: -60% -40%;
    background: linear-gradient( 115deg, transparent 40%, rgba(255,255,255,.10) 48%, rgba(255,210,90,.14) 52%, transparent 60% );
    transform: translateX(-40%) rotate(8deg);
    opacity: .0;
    pointer-events: none;
}

@media (hover:hover) and (pointer:fine) {
    .psg-card-long:hover .psg-shine {
        opacity: .9;
        animation: psgShimmer 1.2s ease both;
    }
}

@keyframes psgShimmer {
    0% {
        transform: translateX(-55%) rotate(8deg);
        opacity: .0;
    }

    15% {
        opacity: .65;
    }

    100% {
        transform: translateX(55%) rotate(8deg);
        opacity: .0;
    }
}

.psg-card-long .psg-number-frame {
    margin-top: 14px;
    padding: 12px 12px;
    border-radius: 16px;
    background: rgba(0,0,0,.38);
    border: 1px solid rgba(255,210,90,.26);
}

.psg-card-long .psg-number {
    letter-spacing: 1.6px;
    font-weight: 900;
    font-size: 16px;
}

.psg-card-long .psg-bottom {
    margin-top: 14px;
    padding-top: 10px;
    border-top: 1px solid rgba(255,255,255,.06);
}

@media (hover:hover) and (pointer:fine) {
    .psg-card-long .psg-copy:hover {
        transform: translateY(-1px);
        filter: brightness(1.08);
        border-color: rgba(255,210,90,.40);
        background: rgba(255,210,90,.14);
    }
}

/* =========================
   Responsive
   ========================= */
@media (max-width: 860px) {
    .pay-grid {
        grid-template-columns: 1fr;
    }

    .pay-sub {
        max-width: 100%;
    }
}

/* =========================
   Mobile “More Card-like”
   ========================= */
@media (max-width: 520px) {

    /* Give the whole page a clearer “card” presence */
    .pay-root {
        place-items: start center;
        padding: 14px 12px 18px;
    }

    .pay-shell {
        width: 100%;
        max-width: 460px; /* makes it feel like a centered card on wide phones */
        margin: 0 auto;
    }

    /* Stronger elevated main card */
    .pay-card {
        padding: 14px 12px;
        border-radius: 22px;
        border: 1px solid rgba(255,255,255,.12);
        background: rgba(10,14,24,.58);
        box-shadow: 0 22px 55px rgba(0,0,0,.55), inset 0 0 0 1px rgba(255,255,255,.05);
        margin-top: 8px;
    }

    /* Topbar looks tighter and more “card header” */
    .pay-topbar {
        margin-bottom: 12px;
        padding-bottom: 10px;
        border-bottom: 1px solid rgba(255,255,255,.06);
    }

    .pay-back {
        padding: 7px 10px !important;
        font-size: 11px !important;
        opacity: .95;
    }

    /* Each panel becomes its own inner card */
    .pay-panel {
        border-radius: 18px;
        padding: 12px;
        background: rgba(255,255,255,.035);
        border: 1px solid rgba(255,255,255,.10);
        box-shadow: 0 10px 28px rgba(0,0,0,.35), inset 0 0 0 1px rgba(255,255,255,.03);
    }

    /* Create more “stacked card” separation */
    .pay-grid {
        gap: 12px;
        margin-top: 10px;
    }

    /* Bank card: keep premium but fit mobile */
    .psg-card-long {
        min-height: 205px;
        padding: 14px;
        border-radius: 18px;
    }

        .psg-card-long .psg-number {
            font-size: 15px;
            letter-spacing: 1.25px;
        }

    /* Stack the bottom area */
    .psg-bottom {
        align-items: stretch;
        flex-direction: column;
    }

    .psg-copy {
        width: 100%;
    }

    /* Upload box: more compact & more card-like */
    .pay-drop {
        border-radius: 18px;
        min-height: 200px;
        padding: 12px;
        background: rgba(0,0,0,.18);
        border: 1px dashed rgba(255,255,255,.20);
    }

    .pay-preview img {
        height: 200px;
    }

    /* Action button: a bit more “primary” on mobile */
    .pay-submit {
        border-radius: 16px;
        padding: 13px 14px;
    }
}

/* =========================
   Mobile auto-animation (no hover)
   ========================= */

/* Run on touch devices / mobile where hover doesn't exist */
@media (hover: none) and (pointer: coarse) {
    .psg-card-long {
        /* N seconds interval: change this value */
        --psg-auto-interval: 6s;
        /* subtle pulse */
        animation: psgAutoPulse var(--psg-auto-interval) ease-in-out infinite;
    }

        .psg-card-long .psg-shine {
            opacity: 0;
            /* shimmer every N seconds */
            animation: psgAutoShimmer var(--psg-auto-interval) ease-in-out infinite;
        }
}

/* Tiny lift pulse: only a short moment in the interval */
@keyframes psgAutoPulse {
    0%, 78% {
        transform: translateY(0) scale(1);
        filter: brightness(1);
    }

    82% {
        transform: translateY(-2px) scale(1.01);
        filter: brightness(1.03);
    }

    90% {
        transform: translateY(0) scale(1);
        filter: brightness(1);
    }

    100% {
        transform: translateY(0) scale(1);
        filter: brightness(1);
    }
}

/* Shimmer sweep: short moment in the interval */
@keyframes psgAutoShimmer {
    0%, 78% {
        transform: translateX(-55%) rotate(8deg);
        opacity: 0;
    }

    82% {
        opacity: .65;
    }

    90% {
        transform: translateX(55%) rotate(8deg);
        opacity: 0;
    }

    100% {
        transform: translateX(55%) rotate(8deg);
        opacity: 0;
    }
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
    .psg-card-long,
    .psg-card-long .psg-shine {
        animation: none !important;
        transition: none !important;
    }
}

/* =========================
   MEHR IRAN GREEN THEME
   Overrides .psg-card-long palette
   ========================= */
.psg-card-long.psg-theme-mehr {
    background: radial-gradient(1200px 320px at 90% -20%, rgba(180, 235, 120, .28), transparent 55%), radial-gradient(900px 260px at -10% 110%, rgba(40, 90, 30, .35), transparent 55%), linear-gradient(135deg, #4FB23A 0%, #3F9A2C 55%, #2F7A22 100%);
    border: 1px solid rgba(255, 255, 255, .22);
    box-shadow: 0 16px 45px rgba(20, 60, 15, .45), inset 0 0 0 1px rgba(255, 255, 255, .08);
}

@media (hover:hover) and (pointer:fine) {
    .psg-card-long.psg-theme-mehr:hover {
        border-color: rgba(255, 255, 255, .35);
        box-shadow: 0 22px 60px rgba(20, 60, 15, .55), inset 0 0 0 1px rgba(255, 255, 255, .10);
    }
}

/* Geometric pattern overlay (Islamic-style dot motif like the reference card) */
.psg-theme-mehr .psg-pattern {
    position: absolute;
    inset: 0;
    background-image: radial-gradient(circle at 50% 50%, rgba(255, 215, 100, .18) 1.6px, transparent 2px), radial-gradient(circle at 0 0, rgba(255, 215, 100, .18) 1.6px, transparent 2px), radial-gradient(circle at 100% 100%, rgba(255, 215, 100, .18) 1.6px, transparent 2px);
    background-size: 22px 22px;
    background-position: 0 0, 11px 11px, 11px 11px;
    opacity: .55;
    pointer-events: none;
    mix-blend-mode: screen;
}

/* Shine retuned for green */
.psg-theme-mehr .psg-shine {
    background: linear-gradient( 115deg, transparent 40%, rgba(255, 255, 255, .14) 48%, rgba(220, 255, 180, .18) 52%, transparent 60% );
}

/* Top brand text */
.psg-theme-mehr .psg-bank {
    color: #ffffff;
    text-shadow: 0 1px 2px rgba(0, 0, 0, .25);
}

.psg-theme-mehr .psg-type {
    color: rgba(255, 255, 255, .78);
}

/* Logo box — clean white tile like the reference */
.psg-theme-mehr .psg-logo-box {
    background: #ffffff;
    border: 1px solid rgba(255, 255, 255, .55);
    box-shadow: 0 2px 8px rgba(0, 0, 0, .15);
}

/* Card number frame — dark inset like the EMV chip area */
.psg-theme-mehr .psg-number-frame {
    background: linear-gradient(135deg, rgba(40, 25, 10, .55), rgba(20, 10, 5, .65));
    border: 1px solid rgba(255, 215, 100, .35);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06);
}

.psg-theme-mehr .psg-number {
    color: #FFD86B;
    text-shadow: 0 1px 0 rgba(0, 0, 0, .35);
}

/* Bottom divider */
.psg-theme-mehr .psg-bottom {
    border-top: 1px solid rgba(255, 255, 255, .14);
}

.psg-theme-mehr .psg-owner-label {
    color: rgba(255, 255, 255, .72);
}

.psg-theme-mehr .psg-owner-name {
    color: #ffffff;
    text-shadow: 0 1px 2px rgba(0, 0, 0, .25);
}

/* Copy button — warm amber chip on green */
.psg-theme-mehr .psg-copy {
    border: 1px solid rgba(255, 215, 100, .55);
    background: linear-gradient(135deg, rgba(255, 215, 100, .92), rgba(245, 185, 60, .92));
    color: #3a2a06;
    box-shadow: 0 4px 12px rgba(0, 0, 0, .18);
}

@media (hover:hover) and (pointer:fine) {
    .psg-theme-mehr .psg-copy:hover {
        background: linear-gradient(135deg, #ffd86b, #f5b93c);
        border-color: rgba(255, 215, 100, .75);
        filter: brightness(1.04);
    }
}

/* #endregion TournamentPay */

/* #region TournamentCancelModal */
.cr-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.55);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    z-index: 999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
}

.cr-modal {
    width: min(720px, 100%);
    border-radius: 18px;
    background: rgba(20, 24, 33, .92);
    border: 1px solid rgba(255,255,255,.10);
    box-shadow: 0 28px 60px rgba(0,0,0,.55);
    overflow: hidden;
}

.cr-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
    padding: 14px 16px;
    border-bottom: 1px solid rgba(255,255,255,.08);
}

.cr-title {
    font-weight: 900;
    font-size: 1rem;
    color: var(--color-text);
}

.cr-sub {
    margin-top: 4px;
    color: var(--color-text-muted);
    font-size: .86rem;
    font-weight: 650;
}

.cr-x {
    width: 38px;
    height: 38px;
    border-radius: 12px;
    border: 1px solid rgba(255,255,255,.10);
    background: rgba(255,255,255,.06);
    color: rgba(255,255,255,.90);
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
}

    .cr-x:hover {
        background: rgba(255,255,255,.10);
    }

.cr-body {
    padding: 14px 16px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.cr-field label {
    display: block;
    font-size: .82rem;
    font-weight: 800;
    color: var(--color-text-muted);
    margin-bottom: 6px;
}

.cr-input {
    width: 100%;
    border-radius: 14px;
    padding: .65rem .8rem;
    background: rgba(0,0,0,.20);
    border: 1px solid rgba(255,255,255,.10);
    color: var(--color-text);
    outline: none;
}

    .cr-input:focus {
        border-color: rgba(240,187,72,.35);
        box-shadow: 0 0 0 3px rgba(240,187,72,.10);
    }

.cr-area {
    min-height: 110px;
    resize: vertical;
}

.cr-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.cr-help {
    margin-top: 6px;
    font-size: .75rem;
    font-weight: 650;
    color: var(--color-text-muted);
}

.cr-ltr {
    direction: ltr;
    text-align: left;
    font-variant-numeric: tabular-nums;
}

.cr-error {
    display: block !important;
    min-height: 44px;
    margin-top: 10px;
    padding: 10px 12px;
    border-radius: 12px;
    background: rgba(239,68,68,.16);
    border: 1px solid rgba(239,68,68,.30);
    color: rgba(255,255,255,.95);
    font-weight: 800;
    z-index: 1;
    position: relative;
}

.cr-foot {
    padding: 14px 16px;
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    border-top: 1px solid rgba(255,255,255,.08);
}

/* mobile */
@media (max-width: 520px) {
    .cr-row {
        grid-template-columns: 1fr;
    }

    .cr-foot {
        flex-direction: column-reverse;
    }

        .cr-foot .t-btn {
            width: 100%;
        }
}

/* #endregion */

/* #region TOURNAMENT RULES MODAL */

.trm-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.55);
    backdrop-filter: blur(6px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    z-index: 9999;
}

.trm-modal {
    width: min(760px, 100%);
    border-radius: 18px;
    background: var(--color-surface);
    border: 1px solid var(--color-border-soft);
    box-shadow: 0 20px 60px rgba(0,0,0,.35);
    overflow: hidden;
}

.trm-head {
    padding: 1rem 1rem .75rem 1rem;
    border-bottom: 1px solid rgba(255,255,255,.08);
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1rem;
}

.trm-title {
    font-weight: 900;
    color: var(--color-text-main);
}

.trm-sub {
    margin-top: .35rem;
    color: var(--color-text-muted);
    font-size: .85rem;
}

.trm-x {
    width: 40px;
    height: 40px;
    border-radius: 12px;
    border: 1px solid rgba(255,255,255,.12);
    background: rgba(255,255,255,.06);
    color: var(--color-text-main);
    font-size: 1.4rem;
    line-height: 1;
    cursor: pointer;
}

.trm-body {
    padding: 1rem;
    max-height: min(65vh, 560px);
    overflow: auto;
}

.trm-section + .trm-section {
    margin-top: .9rem;
}

.trm-h {
    font-weight: 900;
    margin-bottom: .4rem;
    color: var(--color-text-main);
}

.trm-text {
    color: var(--color-text-muted);
    font-size: .92rem;
    line-height: 1.9;
    white-space: pre-wrap;
}

.trm-loading, .trm-empty {
    color: var(--color-text-muted);
    padding: .5rem 0;
}

.trm-foot {
    padding: .85rem 1rem 1rem 1rem;
    border-top: 1px solid rgba(255,255,255,.08);
    display: flex;
    justify-content: flex-start;
}

/* #endregion */


/* ================================
   Tournament Count Attention UI
   ================================ */

.tour-attn .tour-attn__title-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.tour-attn__badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 10px;
    border-radius: 999px;
    font-weight: 900;
    font-size: 0.78rem;
    line-height: 1;
    white-space: nowrap;
    /* premium neon badge */
    background: radial-gradient(circle at 20% 30%, rgba(255,255,255,0.10), transparent 55%), linear-gradient(135deg, rgba(245,158,11,0.22), rgba(251,191,36,0.16));
    border: 1px solid rgba(245,158,11,0.45);
    box-shadow: 0 0 10px rgba(245,158,11,0.18), 0 0 24px rgba(251,191,36,0.14);
    color: rgba(255,243,199,0.98);
    /* gentle attention */
    animation: tourBadgePulse 4.8s ease-in-out infinite;
}

.tour-attn__dot {
    width: 10px;
    height: 10px;
    border-radius: 999px;
    background: var(--neon-yellow);
    box-shadow: 0 0 10px var(--neon-yellow-glow), 0 0 18px rgba(251,191,36,0.35);
    animation: tourDotBlink 1.6s ease-in-out infinite;
}

.tour-attn__num {
    font-variant-numeric: tabular-nums;
    font-size: 0.9rem;
    color: #fff;
    text-shadow: 0 0 10px rgba(251,191,36,0.35);
}

.tour-attn__label {
    opacity: 0.95;
}

/* stronger hover, still clean */
.tour-attn:hover .tour-attn__badge {
    transform: translateY(-1px);
    border-color: rgba(245,158,11,0.70);
    box-shadow: 0 0 14px rgba(245,158,11,0.25), 0 0 34px rgba(251,191,36,0.18);
}

/* animations */
@keyframes tourBadgePulse {
    0% {
        opacity: 0.78;
    }

    50% {
        opacity: 1;
    }

    100% {
        opacity: 0.78;
    }
}

@keyframes tourDotBlink {
    0%,100% {
        transform: scale(0.95);
        opacity: 0.75;
    }

    50% {
        transform: scale(1.12);
        opacity: 1;
    }
}

/* mobile tuning */
@media (max-width:640px) {
    .tour-attn__badge {
        padding: 5px 9px;
        font-size: 0.74rem;
    }

    .tour-attn__num {
        font-size: 0.86rem;
    }
}

/* accessibility: reduce motion */
@media (prefers-reduced-motion: reduce) {
    .tour-attn__badge,
    .tour-attn__dot {
        animation: none !important;
    }
}

/* #region LotteryLookup */

/* ================================
   Lottery Lookup (5-slot + list)
   Bigger fonts for large screens
   Structure unchanged
   + Clear button top-left inside frame
   + Slots always one single line
   ================================ */
.lot-lookup-root {
    min-height: 100vh;
    display: flex;
    justify-content: center;
    padding: clamp(1.25rem, 1.2vw, 2.25rem) clamp(1rem, 1vw, 1.75rem) clamp(2.25rem, 1.8vw, 3.25rem);
    background: var(--color-bg);
}

.lot-lookup-card {
    width: 100%;
    max-width: 980px;
    direction: rtl;
    text-align: right;
    display: flex;
    flex-direction: column;
    gap: clamp(.85rem, .9vw, 1.2rem);
}

.lot-lookup-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: clamp(.85rem, 1vw, 1.25rem);
    padding-bottom: clamp(.75rem, .85vw, 1rem);
    border-bottom: 1px solid var(--color-border-soft);
}

.lot-lookup-title {
    margin: 0;
    font-size: clamp(1.25rem, 1.15vw, 1.75rem);
    font-weight: 900;
    color: var(--color-primary);
}

.lot-lookup-sub {
    margin: .35rem 0 0;
    color: var(--color-text-muted);
    font-size: clamp(.9rem, .85vw, 1.05rem);
    line-height: 1.85;
    font-weight: 600;
}

.lot-lookup-status {
    flex: 0 0 auto;
    display: flex;
    justify-content: flex-end;
    margin-top: .15rem;
}

.lot-chip {
    display: inline-flex;
    align-items: center;
    gap: .55rem;
    padding: clamp(.45rem, .45vw, .6rem) clamp(.75rem, .75vw, 1rem);
    border-radius: 999px;
    border: 1px solid var(--color-border-soft);
    background: rgba(255,255,255,0.04);
    font-weight: 800;
    font-size: clamp(.82rem, .75vw, 1rem);
    white-space: nowrap;
}

.lot-chip--hint {
    color: var(--color-text-muted);
}

.lot-chip--ok {
    border-color: rgba(34,211,238,.35);
    background: rgba(34,211,238,.10);
    color: var(--color-text);
}

.lot-chip--loading {
    border-color: rgba(168,85,247,.35);
    background: rgba(168,85,247,.10);
    color: var(--color-text);
}

.lot-dot {
    width: clamp(10px, .7vw, 12px);
    height: clamp(10px, .7vw, 12px);
    border-radius: 999px;
    background: var(--color-primary);
    box-shadow: 0 0 10px rgba(34,211,238,.35);
    animation: lotBlink 1.4s ease-in-out infinite;
}

@keyframes lotBlink {
    0%,100% {
        opacity: .55;
        transform: scale(.92);
    }

    50% {
        opacity: 1;
        transform: scale(1.08);
    }
}

.lot-code {
    direction: ltr;
    font-variant-numeric: tabular-nums;
    letter-spacing: .12rem;
    font-size: clamp(.95rem, .85vw, 1.05rem);
}

/* scroll */
.lot-scroll {
    max-height: 520px;
    overflow: auto;
}

.lot-lookup-input-area {
    display: flex;
    flex-direction: column;
    gap: clamp(.75rem, .85vw, 1rem);
}

/* ===========================
   Code frame: keep one row
   + Clear button top-left
   =========================== */
.lot-code-frame {
    border-radius: var(--radius-xl);
    border: 1px solid var(--color-border-soft);
    background: radial-gradient(circle at 10% 20%, rgba(34,211,238,.12), transparent 55%), radial-gradient(circle at 90% 80%, rgba(168,85,247,.10), transparent 55%), var(--color-surface-soft);
    box-shadow: var(--shadow-soft);
    position: relative;
    padding: clamp(.95rem, 1vw, 1.25rem);
    padding-top: clamp(3rem, 2.6vw, 3.4rem); /* space for clear button */

    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: clamp(.85rem, 1vw, 1.25rem);
}

/* Slots: always ONE line (no wrap) and stay on the right (row-reverse) */
.lot-code-slots {
    display: flex;
    flex-direction: row-reverse;
    align-items: center;
    justify-content: flex-start; /* with row-reverse => aligns to right visually */
    flex-wrap: nowrap; /* IMPORTANT: never wrap */
    gap: clamp(.55rem, .9vw, 1rem);
    width: 100%;
    padding-right: clamp(.35rem, .8vw, 1rem);
}

.lot-sep {
    opacity: .35;
    font-weight: 900;
    font-size: clamp(1rem, 1vw, 1.25rem);
}

/* Slots: bigger, consistent size */
.lot-slot {
    width: clamp(56px, 3.6vw, 80px);
    height: clamp(60px, 3.8vw, 86px);
    border-radius: clamp(16px, 1vw, 20px);
    border: 1px solid rgba(255,255,255,.14);
    background: radial-gradient(circle at 30% 20%, rgba(34,211,238,.10), transparent 55%), linear-gradient(180deg, rgba(255,255,255,.06), rgba(0,0,0,.22));
    color: var(--color-text);
    text-align: center;
    font-size: clamp(1.25rem, 1.35vw, 1.85rem);
    font-weight: 950;
    outline: none;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.05), 0 18px 46px rgba(0,0,0,.25);
    transition: transform var(--transition-fast), border-color var(--transition-fast), box-shadow var(--transition-fast), background-color var(--transition-fast);
    direction: ltr;
    font-variant-numeric: tabular-nums;
}

    .lot-slot:focus {
        border-color: rgba(34,211,238,.75);
        box-shadow: 0 0 0 4px rgba(34,211,238,.20), inset 0 0 0 1px rgba(255,255,255,.06), 0 22px 60px rgba(0,0,0,.32);
        transform: translateY(-1px);
    }

/* Clear button pinned top-left inside frame */
.lot-actions {
    position: absolute;
    top: clamp(.7rem, .8vw, 1rem);
    left: clamp(.8rem, .9vw, 1.1rem);
    right: auto;
    display: flex;
    gap: .6rem;
    align-items: center;
}

.lot-btn {
    min-width: clamp(120px, 10vw, 160px);
    font-size: clamp(.9rem, .9vw, 1.05rem);
    padding-top: clamp(.55rem, .6vw, .75rem);
    padding-bottom: clamp(.55rem, .6vw, .75rem);
}

/* Results */
.lot-results {
    border-radius: var(--radius-xl);
    overflow: hidden;
    background: var(--color-surface-soft);
}

.lot-results-head {
    padding: clamp(.9rem, 1vw, 1.15rem) clamp(1rem, 1.1vw, 1.25rem) clamp(.75rem, .9vw, 1rem);
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    border-bottom: 1px solid var(--color-border-soft);
}

.lot-results-title {
    font-weight: 950;
    font-size: clamp(1rem, 1vw, 1.25rem);
}

.lot-results-sub {
    margin-top: .25rem;
    color: var(--color-text-muted);
    font-size: clamp(.82rem, .8vw, 1rem);
    line-height: 1.75;
    font-weight: 650;
}

.lot-results-badge {
    display: flex;
    align-items: center;
    gap: .5rem;
}

.lot-badge {
    min-width: clamp(40px, 3vw, 56px);
    height: clamp(32px, 2.6vw, 44px);
    border-radius: 999px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 950;
    font-size: clamp(.95rem, .95vw, 1.15rem);
    background: linear-gradient(135deg, var(--color-primary), var(--color-secondary));
    color: #fff;
    box-shadow: 0 10px 24px rgba(15,23,42,.35);
    font-variant-numeric: tabular-nums;
}

.lot-badge-label {
    color: var(--color-text-muted);
    font-weight: 800;
    font-size: clamp(.82rem, .75vw, 1rem);
}

.lot-results-body {
    padding: clamp(.9rem, 1vw, 1.1rem) clamp(1rem, 1.1vw, 1.25rem) clamp(1rem, 1.2vw, 1.35rem);
    max-height: calc(100vh - 320px);
    overflow: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    scrollbar-color: rgba(34,211,238,.55) rgba(255,255,255,.06);
}

    .lot-results-body::-webkit-scrollbar {
        width: 12px;
    }

    .lot-results-body::-webkit-scrollbar-track {
        background: rgba(255,255,255,.05);
        border: 1px solid rgba(255,255,255,.08);
        border-radius: 999px;
    }

    .lot-results-body::-webkit-scrollbar-thumb {
        border-radius: 999px;
        border: 3px solid rgba(255,255,255,.06);
        background: linear-gradient(180deg, rgba(34,211,238,.75), rgba(168,85,247,.55));
        box-shadow: 0 8px 18px rgba(0,0,0,.25);
    }

.lot-empty {
    padding: clamp(1.1rem, 1vw, 1.35rem);
    border-radius: var(--radius-lg);
    border: 1px dashed var(--color-border-soft);
    background: rgba(255,255,255,0.03);
    color: var(--color-text-muted);
    text-align: center;
    font-weight: 750;
    font-size: clamp(.9rem, .9vw, 1.05rem);
}

.lot-user-list {
    display: flex;
    flex-direction: column;
    gap: clamp(.7rem, .9vw, .95rem);
}

.lot-user-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: clamp(.85rem, 1vw, 1.1rem);
    padding: clamp(.75rem, 1vw, 1.05rem) clamp(.8rem, 1vw, 1.1rem);
    border-radius: var(--radius-lg);
    border: 1px solid var(--color-border-soft);
    background: rgba(255,255,255,0.03);
    box-shadow: 0 10px 26px rgba(15,23,42,.18);
    transition: transform var(--transition-fast), border-color var(--transition-fast), box-shadow var(--transition-fast);
}

    .lot-user-card:hover {
        transform: translateY(-1px);
        border-color: rgba(34,211,238,.35);
        box-shadow: 0 16px 40px rgba(15,23,42,.28);
    }

.lot-user-avatar {
    width: clamp(44px, 3.1vw, 58px);
    height: clamp(44px, 3.1vw, 58px);
    border-radius: 999px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 950;
    font-size: clamp(1rem, 1vw, 1.15rem);
    background: radial-gradient(circle, rgba(34,211,238,.18), transparent 60%);
    border: 2px solid rgba(34,211,238,.35);
    color: var(--color-text);
    flex: 0 0 auto;
}

.lot-user-main {
    flex: 1 1 auto;
    min-width: 0;
}

.lot-user-name {
    font-weight: 950;
    color: var(--color-text);
    font-size: clamp(.95rem, .95vw, 1.2rem);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.lot-user-phone {
    margin-top: .25rem;
    font-size: clamp(.82rem, .8vw, 1rem);
    color: var(--color-text-muted);
    direction: ltr;
    text-align: left;
    font-variant-numeric: tabular-nums;
    letter-spacing: .06rem;
}

.lot-user-meta {
    flex: 0 0 auto;
}

.lot-mini-chip {
    display: inline-flex;
    align-items: center;
    padding: .35rem .6rem;
    border-radius: 999px;
    font-size: clamp(.74rem, .7vw, .92rem);
    font-weight: 900;
    border: 1px solid rgba(34,197,94,.25);
    background: rgba(34,197,94,.10);
    color: rgba(34,197,94,.98);
}

/* Skeleton loader */
.lot-skeleton {
    display: flex;
    flex-direction: column;
    gap: .65rem;
}

.lot-skel-row {
    height: clamp(62px, 3.8vw, 78px);
    border-radius: var(--radius-lg);
    border: 1px solid var(--color-border-soft);
    background: linear-gradient(90deg, rgba(255,255,255,0.03), rgba(255,255,255,0.08), rgba(255,255,255,0.03));
    background-size: 240% 100%;
    animation: lotShimmer 1.2s ease-in-out infinite;
}

@keyframes lotShimmer {
    0% {
        background-position: 0% 0;
    }

    100% {
        background-position: 100% 0;
    }
}

/* Responsive (keep original behavior) */
@media (max-width: 720px) {
    .lot-code-frame {
        flex-direction: column;
        align-items: stretch;
        padding-top: 1rem; /* remove reserved space */
    }

    .lot-actions {
        position: static; /* normal flow */
        width: 100%;
    }

    .lot-btn {
        flex: 1 1 0;
        min-width: 0;
    }

    .lot-hints {
        grid-template-columns: 1fr;
    }

    .lot-slot {
        width: 52px;
        height: 58px;
        font-size: 1.15rem;
    }

    .lot-code-slots {
        justify-content: center;
        padding-right: 0;
    }
}

@media (max-width: 420px) {
    .lot-slot {
        width: 48px;
        height: 56px;
        border-radius: 14px;
        font-size: 1.1rem;
    }

    .lot-sep {
        display: none;
    }
}

/* Big screens: widen card a bit (still same structure) */
@media (min-width: 1200px) {
    .lot-lookup-card {
        max-width: 1180px;
    }

    .lot-scroll {
        max-height: 640px;
    }
}

@media (min-width: 1600px) {
    .lot-lookup-card {
        max-width: 1280px;
    }

    .lot-scroll {
        max-height: 720px;
    }
}
/* =====================================================
   BIG slots + fill the whole line (right -> left)
   Paste at END of CSS
   ===================================================== */

/* keep your button space */
.lot-code-frame {
    padding-top: clamp(3rem, 2.6vw, 3.4rem);
}

/* slots row fills width */
.lot-code-slots {
    width: 100%;
    flex-wrap: nowrap;
    justify-content: space-between; /* spread across full row */
    gap: clamp(.6rem, 1vw, 1.2rem);
}

    /* each slot expands equally to fill the line */
    .lot-code-slots .lot-slot {
        flex: 1 1 0; /* <-- important: equal width */
        width: auto; /* override any fixed width */
        min-width: clamp(64px, 6vw, 110px);
        height: clamp(72px, 5vw, 100px); /* bigger */
        font-size: clamp(1.35rem, 1.8vw, 2.1rem);
        border-radius: clamp(16px, 1.1vw, 22px);
        border: 1px solid rgba(255,255,255,.16);
        background: radial-gradient(circle at 30% 20%, rgba(34,211,238,.10), transparent 55%), linear-gradient(180deg, rgba(255,255,255,.06), rgba(0,0,0,.22));
        box-shadow: inset 0 0 0 1px rgba(255,255,255,.05), 0 18px 46px rgba(0,0,0,.25);
    }

        /* nicer focus on big inputs */
        .lot-code-slots .lot-slot:focus {
            border-color: rgba(34,211,238,.75);
            box-shadow: 0 0 0 4px rgba(34,211,238,.20), inset 0 0 0 1px rgba(255,255,255,.06), 0 22px 60px rgba(0,0,0,.32);
        }

/* mobile: don’t force full-width huge boxes */
@media (max-width: 720px) {
    .lot-code-slots {
        justify-content: center;
    }

        .lot-code-slots .lot-slot {
            flex: 0 0 auto;
            width: 52px;
            height: 58px;
            font-size: 1.15rem;
        }
}
/* Small margin from left & right for full-width slots */

.lot-code-slots {
    padding-inline: clamp(.75rem, 1.2vw, 1.25rem); /* space on both sides */
}

/* If you want slightly tighter spacing between slots */
.lot-code-slots {
    gap: clamp(.5rem, .9vw, 1rem);
}
/* Add space between Clear button and slots */

/* Final spacing adjustment between Clear button and slots */

.lot-code-frame {
    padding-top: clamp(5rem, 4.2vw, 5.6rem); /* more vertical space */
}

.lot-code-slots {
    margin-top: clamp(.5rem, .8vw, 1rem); /* extra separation */
}

.lot-actions {
    top: clamp(1.1rem, 1.2vw, 1.5rem);
}
/* Show code nicely under name */
.lot-user-sub {
    margin-top: .3rem;
    display: flex;
    align-items: center;
    gap: .65rem;
    flex-wrap: wrap;
    color: var(--color-text-muted);
    font-weight: 750;
    font-size: clamp(.82rem, .8vw, 1rem);
}

.lot-user-code {
    direction: rtl;
    white-space: nowrap;
}

/*.lot-code-val {
    direction: ltr;
    display: inline-block;
    font-variant-numeric: tabular-nums;
    letter-spacing: .08rem;
    padding: .1rem .45rem;
    border-radius: 999px;
    border: 1px solid rgba(34,211,238,.25);
    background: rgba(34,211,238,.10);
    color: var(--color-text);
    font-weight: 900;
}*/

.lot-user-sep {
    opacity: .45;
}

.lot-code-val {
    direction: ltr;
    display: inline-block;
    font-variant-numeric: tabular-nums;
    letter-spacing: .08rem;
    /* removed chip styling */
    padding: 0;
    border: none;
    background: none;
    border-radius: 0;
    color: var(--color-text);
    font-weight: 900;
}
/* =====================================================
   FINAL OVERRIDES (single source of truth)
   ===================================================== */

/* Clear button pinned top-left + enough space above slots */
.lot-code-frame {
    position: relative;
    padding-top: clamp(5rem, 4.2vw, 5.6rem);
}

/* Clear button position */
.lot-actions {
    position: absolute;
    top: clamp(1.1rem, 1.2vw, 1.5rem);
    left: clamp(.8rem, .9vw, 1.1rem);
    right: auto;
    display: flex;
    align-items: center;
    gap: .6rem;
    margin: 0;
}

/* Slots: ONE LINE, fill whole width, with side padding */
.lot-code-slots {
    width: 100%;
    display: flex;
    flex-direction: row-reverse; /* keep RTL visual */
    align-items: center;
    flex-wrap: nowrap; /* never wrap */
    justify-content: space-between; /* spread across full row */

    padding-inline: clamp(.9rem, 1.4vw, 1.4rem);
    gap: clamp(.5rem, .9vw, 1rem);
    margin-top: clamp(.6rem, 1vw, 1.2rem); /* space under clear button */
}

    /* Slots grow equally to fill the line */
    .lot-code-slots .lot-slot {
        flex: 1 1 0;
        width: auto !important; /* override earlier fixed widths */
        min-width: 0; /* IMPORTANT: allow shrinking to fit */
        height: clamp(72px, 5vw, 100px);
        font-size: clamp(1.35rem, 1.8vw, 2.1rem);
        border-radius: clamp(16px, 1.1vw, 22px);
    }

/* Mobile: keep your original stacking layout */
@media (max-width: 720px) {
    .lot-code-frame {
        padding-top: 1rem;
    }

    .lot-actions {
        position: static;
        width: 100%;
    }

    .lot-code-slots {
        justify-content: center;
        padding-inline: 0;
        margin-top: 0;
    }

        .lot-code-slots .lot-slot {
            flex: 0 0 auto;
            width: 52px !important;
            min-width: 52px;
            height: 58px;
            font-size: 1.15rem;
        }
}

/* ===== Show Code line (no background/border) ===== */
.lot-user-sub {
    margin-top: .3rem;
    display: flex;
    align-items: center;
    gap: .65rem;
    flex-wrap: wrap;
    color: var(--color-text-muted);
    font-weight: 750;
    font-size: clamp(.82rem, .8vw, 1rem);
}

.lot-user-code {
    direction: rtl;
    white-space: nowrap;
}

.lot-code-val {
    direction: ltr;
    display: inline-block;
    font-variant-numeric: tabular-nums;
    letter-spacing: .08rem;
    /* no chip */
    padding: 0;
    border: none;
    background: none;
    border-radius: 0;
    color: var(--color-text);
    font-weight: 900;
}

.lot-user-sep {
    opacity: .45;
}

.lot-warning {
    margin-top: .75rem;
    padding: .8rem 1rem;
    border-radius: 14px;
    border: 1px solid rgba(244,63,94,.35);
    background: rgba(244,63,94,.12);
    color: #f87171;
    font-weight: 800;
    text-align: center;
    animation: fadeIn .25s ease;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(-4px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* #endregion LotteryLookup (FULL)*/

/* #region DASH LIVE COUNTDOWN BAR */
/* ================================
   DASH LIVE COUNTDOWN BAR
   place above first tile
   ================================ */

.dash-livebar {
    border-radius: 18px;
    border: 1px solid rgba(255,255,255,0.14);
    background: radial-gradient(circle at 15% 20%, rgba(239, 68, 68, 0.20), transparent 55%), radial-gradient(circle at 85% 80%, rgba(34, 211, 238, 0.16), transparent 55%), rgba(255,255,255,0.04);
    box-shadow: 0 14px 40px rgba(15, 23, 42, 0.22);
    overflow: hidden;
    position: relative;
}

    .dash-livebar::before {
        content: "";
        position: absolute;
        inset: -2px;
        border-radius: inherit;
        background: conic-gradient( from 180deg, rgba(239,68,68,0.0), rgba(239,68,68,0.45), rgba(34,211,238,0.35), rgba(239,68,68,0.0) );
        filter: blur(14px);
        opacity: 0.45;
        pointer-events: none;
    }

.dash-livebar__row {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 0.75rem 0.95rem;
    direction: rtl;
    text-align: right;
}

.dash-livebar__meta {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.dash-livebar__badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 10px;
    border-radius: 999px;
    font-weight: 900;
    font-size: 0.78rem;
    letter-spacing: 0.04em;
    border: 1px solid rgba(239,68,68,0.45);
    background: rgba(239,68,68,0.14);
    color: rgba(255,255,255,0.92);
    box-shadow: 0 0 10px rgba(239,68,68,0.18), 0 0 22px rgba(239,68,68,0.12);
    white-space: nowrap;
}

.dash-livebar__dot {
    width: 10px;
    height: 10px;
    border-radius: 999px;
    background: #ef4444;
    box-shadow: 0 0 10px rgba(239,68,68,0.55), 0 0 18px rgba(239,68,68,0.30);
    animation: dashLiveDot 1.25s ease-in-out infinite;
}

@keyframes dashLiveDot {
    0%, 100% {
        transform: scale(0.92);
        opacity: 0.70;
    }

    50% {
        transform: scale(1.18);
        opacity: 1;
    }
}

.dash-livebar__text {
    font-weight: 900;
    font-size: 0.92rem;
    color: rgba(255,255,255,0.92);
    display: inline-flex;
    align-items: baseline;
    gap: 8px;
    min-width: 0;
    word-break: break-word;
}

.dash-livebar__hint {
    font-weight: 800;
    font-size: 0.78rem;
    color: rgba(148,163,184,0.95);
    padding: 3px 8px;
    border-radius: 999px;
    border: 1px solid rgba(255,255,255,0.12);
    background: rgba(255,255,255,0.04);
    white-space: nowrap;
}

.dash-livebar__time {
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.06em;
    font-weight: 950;
    font-size: 1.02rem;
    padding: 6px 10px;
    border-radius: 999px;
    /*border: 1px solid rgba(239,68,68,0.45);*/
    color: rgba(226,232,240,0.98);
    white-space: nowrap;
    /*box-shadow: 0 0 10px rgba(34,211,238,0.14), 0 0 22px rgba(34,211,238,0.10);*/
}

/* Mobile: stack nicely */
/* Mobile: RTL friendly layout */
@media (max-width: 640px) {


    .dash-livebar {
        border-radius: 14px;
    }

    .dash-livebar__row {
        flex-direction: column;
        align-items: stretch;
        padding: 0.55rem 0.75rem; /* کمتر شد */
        gap: 6px; /* فاصله کمتر */
    }

    /* Make meta wrap nicely in RTL */
    .dash-livebar__meta {
        display: flex;
        width: 100%;
        flex-wrap: wrap;
        gap: 6px;
        align-items: center;
        justify-content: flex-start; /* important for RTL */
    }

    /* Let text take the full line if needed */
    .dash-livebar__text {
        flex: 1 1 220px;
        min-width: 0;
        line-height: 1.35;
        text-align: right;
        font-size: 0.82rem;
    }

    .dash-livebar__badge {
        flex: 0 0 auto;
        padding: 4px 8px;
        font-size: 0.72rem;
    }


    /* Countdown row: centered + stable numbers */
    .dash-livebar__time {
        width: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 6px 8px;
        font-size: 1.1rem;
        letter-spacing: 0.04em;
        direction: ltr; /* keep numbers correct */
        text-align: center;
    }

    .dash-livebar__dot {
        width: 8px;
        height: 8px;
    }
}


/* Accessibility */
@media (prefers-reduced-motion: reduce) {
    .dash-livebar__dot {
        animation: none !important;
    }
}

/* #endregion DASH LIVE COUNTDOWN BAR */

/* ================================
   VIDEO GUIDE (FINAL - single source)
   Works perfect on Windows + Mobile
   ================================ */

.video-guide {
    width: 100%;
    display: block;
    margin-bottom: 14px;
}

.video-guide__shell {
    width: 100%;
    border-radius: 18px;
    overflow: hidden;
    border: 1px solid rgba(255,255,255,0.14);
    background: radial-gradient(circle at 18% 25%, rgba(34,211,238,0.16), transparent 52%), radial-gradient(circle at 82% 78%, rgba(168,85,247,0.14), transparent 55%), rgba(255,255,255,0.035);
    box-shadow: 0 14px 45px rgba(15, 23, 42, 0.25);
}

/* stable responsive height */
.video-guide__frame {
    width: 100%;
    position: relative;
    background: rgba(2,6,23,0.45);
    /* Desktop/Windows: nice cinematic without looking short */
    aspect-ratio: 16 / 8;
    /* guarantees height on wide screens too */
    min-height: 260px;
}

.video-guide__iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
    display: block;
}

/* Mobile: taller */
@media (max-width: 640px) {
    .video-guide {
        margin-bottom: 12px;
    }

    .video-guide__shell {
        border-radius: 14px;
    }

    .video-guide__frame {
        aspect-ratio: 4 / 3;
        min-height: 240px;
    }
}

/* ================================
   Public /video page layout
   ================================ */

.video-page {
    min-height: calc(100vh - 40px);
    padding: 18px 14px;
    display: grid;
    place-items: start center;
}

.video-page__card {
    width: min(980px, 100%);
}

/* =========================================
   Make VideoGuide smaller ONLY in LotteryTicket
   ========================================= */

.lotteryticket-card .video-guide__frame {
    aspect-ratio: 16 / 9; /* استاندارد */
    min-height: 200px; /* کوچیک‌تر */
}

/* Desktop even more compact */
@media (min-width: 1024px) {
    .lotteryticket-card .video-guide__frame {
        aspect-ratio: 16 / 7; /* کمی کوتاه‌تر */
        min-height: 180px;
    }
}

/* Mobile slightly smaller but still nice */
@media (max-width: 640px) {
    .lotteryticket-card .video-guide__frame {
        aspect-ratio: 16 / 10;
        min-height: 190px;
    }
}

/* =========================================================
   DASHBOARD LOCK OVERLAY (when countdown hits 0)
   Paste at END of main.css
   ========================================================= */

.dashboard-root.is-locked {
    position: relative;
}

    /* Blur + disable everything behind overlay */
    .dashboard-root.is-locked .dashboard-card {
        filter: blur(10px) saturate(0.95);
        opacity: 0.28;
        pointer-events: none; /* blocks ALL clicks */
        user-select: none;
        transform: scale(0.995);
    }

/* ============ BIG RESPONSIVE LOCK OVERLAY ============ */

.dash-lock-overlay {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: grid;
    place-items: center;
    padding: clamp(10px, 2.2vw, 28px);
    background: radial-gradient(circle at 20% 15%, rgba(239, 68, 68, 0.18), transparent 55%), radial-gradient(circle at 80% 85%, rgba(34, 211, 238, 0.14), transparent 55%), rgba(15, 23, 42, 0.82);
    backdrop-filter: blur(14px);
}

/* card becomes more like a "stage" */
.dash-lock-card {
    width: min(1200px, 100%);
    height: min(84vh, 880px);
    border-radius: clamp(16px, 2.2vw, 28px);
    padding: clamp(10px, 1.8vw, 18px);
    direction: rtl;
    text-align: right;
    display: flex;
    flex-direction: column;
    gap: clamp(8px, 1.2vw, 14px);
    background: linear-gradient(180deg, rgba(15,23,42,0.94), rgba(15,23,42,0.78));
    border: 1px solid rgba(255,255,255,0.14);
    box-shadow: 0 26px 90px rgba(0,0,0,0.58), 0 0 26px rgba(34,211,238,0.18);
    overflow: hidden;
    position: relative;
}

    .dash-lock-card::before {
        content: "";
        position: absolute;
        inset: -2px;
        border-radius: inherit;
        background: conic-gradient( from 180deg, rgba(34,211,238,0.0), rgba(34,211,238,0.35), rgba(168,85,247,0.28), rgba(239,68,68,0.22), rgba(34,211,238,0.0) );
        filter: blur(18px);
        opacity: 0.55;
        pointer-events: none;
    }

/* header: compact, doesn't steal space */
.dash-lock-head {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 2px 4px;
}

    .dash-lock-head .dash-lock-left {
        display: flex;
        flex-direction: column;
        gap: 4px;
        min-width: 0;
    }

.dash-lock-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 10px;
    border-radius: 999px;
    font-weight: 900;
    font-size: 0.8rem;
    border: 1px solid rgba(239,68,68,0.45);
    background: rgba(239,68,68,0.14);
    color: rgba(255,255,255,0.92);
    width: fit-content;
}

.dash-lock-dot {
    width: 10px;
    height: 10px;
    border-radius: 999px;
    background: #ef4444;
    box-shadow: 0 0 10px rgba(239,68,68,0.55), 0 0 18px rgba(239,68,68,0.30);
    animation: dashLockBlink 1.2s ease-in-out infinite;
}

@keyframes dashLockBlink {
    0%,100% {
        transform: scale(0.92);
        opacity: 0.7
    }

    50% {
        transform: scale(1.18);
        opacity: 1
    }
}

.dash-lock-title {
    font-size: clamp(1.05rem, 1.6vw, 1.35rem);
    font-weight: 950;
    color: rgba(255,255,255,0.96);
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.dash-lock-sub {
    font-size: clamp(0.82rem, 1.2vw, 0.95rem);
    font-weight: 700;
    color: rgba(148,163,184,0.95);
    line-height: 1.6;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Video wrapper fix */
.dash-lock-card .video-guide__shell,
.dash-lock-card .video-guide,
.dash-lock-card .video-guide__wrap {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    overflow: hidden;
}

/* iframe must NEVER overflow */
.dash-lock-card iframe {
    width: 100% !important;
    height: 100% !important;
    max-height: 100%;
    object-fit: contain;
    border-radius: clamp(14px, 2vw, 22px);
}

/* Desktop ultra-wide: even bigger */
@media (min-width: 1200px) {
    .dash-lock-card {
        height: min(88vh, 940px);
        width: min(1400px, 100%);
    }
}

/* Mobile: go almost full-screen, header becomes stacked */
@media (max-width: 640px) {

    .dash-lock-overlay {
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 16px;
    }

    .dash-lock-card {
        width: 100%;
        max-width: 520px;
        height: auto;
        max-height: 88dvh;
        border-radius: 20px;
        padding: 14px;
        gap: 12px;
        display: flex;
        flex-direction: column;
    }

        /* ویدیو فضای اصلی رو بگیره */
        .dash-lock-card .video-guide__shell,
        .dash-lock-card .video-guide,
        .dash-lock-card .video-guide__wrap {
            flex: 1 1 auto;
            min-height: 240px;
        }

        .dash-lock-card iframe {
            aspect-ratio: 16 / 9;
            height: auto !important;
            width: 100% !important;
        }
}

/* reduce motion */
@media (prefers-reduced-motion: reduce) {
    .dash-lock-dot {
        animation: none !important;
    }
}

/* =========================================
   LotteryTicket Responsive + Keep LazyLoad
   (ListArea remains the scroll root)
   Paste at END of main.css
   ========================================= */

.lotteryticket-root {
    padding: clamp(10px, 2.2vw, 24px);
}

.lotteryticket-card {
    /* IMPORTANT: keep a bounded height so list-area can scroll (lazy load root) */
    height: calc(100dvh - 3rem);
    max-height: calc(100dvh - 3rem);
    display: flex;
    flex-direction: column;
    gap: clamp(10px, 1.6vw, 18px);
}

    /* Video stays visually “same”, but clamps so it won’t eat the whole screen */
    .lotteryticket-card .video-guide__frame {
        min-height: clamp(170px, 22vh, 240px);
        aspect-ratio: 16 / 9;
    }

/* Input card spacing responsive */
.lotteryticket-input {
    flex: 0 0 auto;
}

/* KEY: list-area must be the scroll container for your lazyLoader.attach(root=ListAreaRef) */
.lotteryticket-list-area {
    flex: 1 1 auto;
    min-height: 0; /* super important in flex layouts */
    overflow: auto; /* scroll happens here */
    -webkit-overflow-scrolling: touch;
}

/* Make the input/actions more compact without changing behavior */
.lotteryticket-input-row {
    gap: clamp(8px, 1.2vw, 12px);
}

.lotteryticket-card .ui-btn {
    font-size: clamp(0.82rem, 1.9vw, 0.95rem);
    padding: clamp(0.52rem, 1.2vw, 0.65rem) clamp(0.85rem, 2.4vw, 1.15rem);
}

/* Small phones: stack controls + reduce header vertical space */
@media (max-width: 520px) {
    .lotteryticket-input-row {
        flex-direction: column;
        align-items: stretch;
    }

    .lotteryticket-input-wrapper,
    .lotteryticket-actions {
        width: 100%;
    }

        .lotteryticket-actions .ui-btn {
            width: 100%;
        }

    .lotteryticket-list-header {
        padding: 0.65rem 0.75rem 0.45rem;
    }

    .warning-hint {
        font-size: 0.78rem;
        line-height: 1.6;
    }

    .circle-icon-btn {
        width: 30px;
        height: 30px;
        padding: 3px;
    }

        .circle-icon-btn img {
            width: 15px;
            height: 15px;
        }
}

/* Short-height screens: reduce video height a bit so list isn't cramped */
@media (max-height: 720px) {
    .lotteryticket-card .video-guide__frame {
        min-height: clamp(150px, 20vh, 210px);
    }
}

/* ======================================
   Compact Warning Block (LotteryTicket)
   ====================================== */

.lotteryticket-list-header {
    padding: 0.6rem 0.8rem 0.4rem; /* less vertical padding */
}

    /* Remove extra margins from h4 */
    .lotteryticket-list-header h4 {
        margin: 0 0 6px 0;
    }

/* Title smaller + tighter */
.warning-hint-title {
    font-size: 0.9rem;
    margin-bottom: 4px;
    line-height: 1.2;
}

/* Main warning text smaller + compact */
.warning-hint {
    display: block;
    font-size: 0.78rem;
    line-height: 1.5;
    margin: 0;
}

/* Even tighter on small phones */
@media (max-width: 520px) {
    .warning-hint-title {
        font-size: 0.85rem;
    }

    .warning-hint {
        font-size: 0.72rem;
        line-height: 1.4;
    }
}
/* ===== Windows/Desktop Video Control ===== */
@media (min-width: 1024px) {

    .lotteryticket-card {
        display: flex;
        flex-direction: column;
        height: calc(100vh - 3rem);
    }

    /* ویدیو کوچکتر ولی نسبت درست */
    .video-guide__frame {
        aspect-ratio: 16 / 9;
        max-height: 440px; /* این عدد کنترل نهایی سایزه */
    }

    .video-guide__iframe {
        width: 100%;
        height: 100%;
    }

    /* لیست بیشتر فضا بگیره */
    .lotteryticket-list-area {
        flex: 1;
        min-height: 0;
        overflow: auto;
    }
}



/*#region Cafe - DigiStyle Product Cards*/

.cafe-root {
    min-height: 100vh;
    display: flex;
    justify-content: center;
    padding: 1.5rem 1rem 2.5rem;
    background: var(--color-bg);
}

.cafe-card {
    width: 100%;
    max-width: 1200px;
    direction: rtl;
    text-align: right;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.cafe-header {
    text-align: center;
    margin-bottom: 0.5rem;
}

.cafe-title {
    font-size: clamp(1.4rem, 5vw, 2rem);
    font-weight: 900;
    background: linear-gradient(135deg, var(--color-primary), var(--color-secondary));
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
    margin: 0;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

.cafe-subtitle {
    font-size: 0.9rem;
    color: var(--color-text-muted);
    margin-top: 0.2rem;
}

.cafe-category-section {
    margin-bottom: 2rem;
}

.cafe-category-title {
    font-size: 1.4rem;
    font-weight: 800;
    color: var(--color-primary);
    border-right: 4px solid var(--color-primary);
    padding-right: 0.8rem;
    margin-bottom: 1rem;
}

/* Grid: 2 columns on tablet+, 1 on mobile */
.cafe-products-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
}

@media (min-width: 768px) {
    .cafe-products-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 1rem;
    }
}

/* Product Card – exactly like the reference image */
.cafe-product-card {
    position: relative;
    display: flex;
    gap: 0.8rem;
    padding: 0.75rem;
    background: var(--color-surface);
    border: 1px solid var(--color-border-soft);
    border-radius: 16px;
    box-shadow: var(--shadow-soft);
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
    cursor: default;
}

    .cafe-product-card:hover {
        transform: translateY(-3px);
        border-color: var(--color-primary);
        box-shadow: var(--shadow-strong);
    }

    /* Active state for touch */
    .cafe-product-card:active {
        transform: translateY(-2px);
        transition: transform 0.05s;
    }

/* Special badge (فروش ویژه) */
.special-badge {
    position: absolute;
    top: 8px;
    right: 8px;
    background: #ef4444;
    color: white;
    font-size: 0.7rem;
    font-weight: 800;
    padding: 0.2rem 0.6rem;
    border-radius: 20px;
    box-shadow: 0 2px 6px rgba(0,0,0,0.2);
    z-index: 1;
    white-space: nowrap;
}

/* Product image – rectangular, similar to digikala */
.cafe-product-image {
    flex-shrink: 0;
    width: 100px;
    height: 100px;
    border-radius: 12px;
    overflow: hidden;
    background: rgba(0, 0, 0, 0.05);
    border: 1px solid var(--color-border-soft);
}

    .cafe-product-image img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
    }

/* Details column */
.cafe-product-details {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    min-width: 0;
}

.cafe-product-name {
    font-size: 0.95rem;
    font-weight: 800;
    line-height: 1.35;
    color: var(--color-text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cafe-product-rating {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.75rem;
    color: #f5b042;
    font-weight: 700;
    direction: ltr;
    width: fit-content;
}

.star-icon {
    font-size: 0.85rem;
    color: #f5b042;
}

.cafe-delivery {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    font-size: 0.7rem;
    color: var(--color-text-muted);
    background: rgba(34,197,94,0.1);
    padding: 0.2rem 0.5rem;
    border-radius: 16px;
    width: fit-content;
    white-space: nowrap;
}

.delivery-icon {
    font-size: 0.7rem;
}

.cafe-price {
    font-size: 1rem;
    font-weight: 800;
    color: var(--color-text);
    direction: ltr;
    text-align: left;
    margin-top: 0.15rem;
    letter-spacing: -0.3px;
}

/* Mobile adjustments (same as image's compact card) */
@media (max-width: 640px) {
    .cafe-root {
        padding: 0.8rem;
    }

    .cafe-product-image {
        width: 80px;
        height: 80px;
    }

    .cafe-product-name {
        font-size: 0.85rem;
        white-space: normal;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    .cafe-product-rating {
        font-size: 0.7rem;
    }

    .cafe-delivery {
        font-size: 0.65rem;
        padding: 0.15rem 0.4rem;
    }

    .cafe-price {
        font-size: 0.9rem;
    }

    .special-badge {
        font-size: 0.6rem;
        top: 6px;
        right: 6px;
        padding: 0.15rem 0.5rem;
    }
}

/* Large desktop */
@media (min-width: 1200px) {
    .cafe-card {
        max-width: 1280px;
    }

    .cafe-product-image {
        width: 110px;
        height: 110px;
    }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
    .cafe-product-card {
        transition: none !important;
    }
}

/* bigger product title */
.cafe-product-name--large {
    font-size: 1.15rem !important; /* adjust as needed */
    font-weight: 900;
}

/* description styling */
.cafe-product-description {
    font-size: 0.75rem;
    color: var(--color-text-muted);
    line-height: 1.4;
    margin-top: 0.1rem;
    margin-bottom: 0.2rem;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* ensure price keeps original color (usually var(--color-primary) or var(--color-text)) 
   if you want to explicitly keep the previous color, use: */
.cafe-price {
    color: var(--color-primary); /* or whatever your original price color was */
    font-weight: 800;
    font-size: 1rem;
}

/* optional: adjust spacing on small screens */
@media (max-width: 640px) {
    .cafe-product-name--large {
        font-size: 0.95rem !important;
    }

    .cafe-product-description {
        font-size: 0.7rem;
    }
}

/* Make the product details fill the height */
.cafe-product-details {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-width: 0;
}

/* Push price to bottom */
.cafe-price {
    margin-top: auto; /* pushes to bottom */
    align-self: flex-end; /* in RTL, flex-end = left side */
    display: inline-flex;
    align-items: center;
    gap: 0.2rem;
    direction: ltr; /* keep numbers LTR */
    background: transparent;
    padding: 0;
}

.price-number {
    font-size: 1rem;
    font-weight: 800;
    color: var(--color-primary); /* your desired price color */
    letter-spacing: -0.3px;
}

.toman-text {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--color-text-muted);
    margin-right: 0.15rem;
}

.toman-icon {
    width: 16px;
    height: 16px;
    fill: var(--color-primary);
    margin-right: 2px;
}

/* Make details column fill full height */
.cafe-product-details {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-width: 0;
}

/* Push price to bottom and align left */
.cafe-price {
    margin-top: auto; /* pushes to bottom of column */
    align-self: flex-end; /* in RTL, flex-end = left side */
    display: inline-flex;
    align-items: baseline;
    gap: 0.2rem;
    direction: ltr; /* numbers left‑to‑right */
    background: transparent;
    padding: 0;
}

.price-number {
    font-size: 1rem;
    font-weight: 800;
    color: var(--color-primary); /* your theme's price color */
    letter-spacing: -0.3px;
}

.toman-text {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--color-text-muted);
}

/*#endregion Cafe*/


/*#region CafeAdmin*/

/* ---------- ساختار کلی (بدون تغییر) ---------- */
.cafe-admin-root {
    min-height: 100vh;
    padding: 1.5rem;
    background: var(--color-bg);
    direction: rtl;
}

.cafe-admin-card {
    max-width: 1200px;
    margin: 0 auto;
    background: var(--color-surface-soft);
    border-radius: var(--radius-xl);
    border: 1px solid var(--color-border-soft);
    padding: 1.5rem;
    box-shadow: var(--shadow-soft);
}

.cafe-admin-header h1 {
    font-size: 1.8rem;
    font-weight: 900;
    margin: 0;
    background: linear-gradient(135deg, var(--color-primary), var(--color-secondary));
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
}

.cafe-admin-header p {
    color: var(--color-text-muted);
    margin-top: 0.25rem;
}

/* تب‌ها */
.cafe-admin-tabs {
    display: flex;
    gap: 0.5rem;
    margin: 1.5rem 0 1rem;
    border-bottom: 1px solid var(--color-border-soft);
    padding-bottom: 0.5rem;
}

.cafe-admin-tab {
    padding: 0.5rem 1.2rem;
    border-radius: 999px;
    border: none;
    background: transparent;
    color: var(--color-text-muted);
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s;
}

    .cafe-admin-tab.active {
        background: linear-gradient(135deg, var(--color-primary), var(--color-secondary));
        color: white;
        box-shadow: var(--shadow-soft);
    }

/* فرم‌ها */
.cafe-admin-section {
    margin-top: 1rem;
}

.cafe-admin-form {
    background: var(--color-surface);
    border-radius: var(--radius-lg);
    padding: 1.2rem;
    margin-bottom: 1.5rem;
    border: 1px solid var(--color-border-soft);
}

    .cafe-admin-form h3 {
        margin-top: 0;
        margin-bottom: 1rem;
        font-size: 1.3rem;
    }

.cafe-admin-form-row {
    display: flex;
    gap: 0.75rem;
    margin-bottom: 0.75rem;
    flex-wrap: wrap;
}

    .cafe-admin-form-row input,
    .cafe-admin-form-row select {
        flex: 1;
        padding: 0.6rem;
        border-radius: var(--radius-md);
        border: 1px solid var(--color-border-soft);
        background: var(--color-bg);
        color: var(--color-text);
    }

/* دکمه‌های فرم - کشیده و 50/50 */
.cafe-admin-form-actions {
    display: flex;
    gap: 0.75rem;
    margin-top: 0.5rem;
}

    .cafe-admin-form-actions .cafe-admin-btn {
        flex: 1;
        text-align: center;
        justify-content: center;
    }

/* استایل پایه دکمه‌ها */
.cafe-admin-btn {
    padding: 0.6rem 1rem;
    border-radius: 999px;
    border: none;
    font-weight: 600;
    cursor: pointer;
    transition: 0.2s;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    white-space: nowrap;
}

    .cafe-admin-btn.primary {
        background: linear-gradient(135deg, var(--color-primary), var(--color-secondary));
        color: white;
    }

    .cafe-admin-btn.secondary {
        background: var(--color-surface-soft);
        border: 1px solid var(--color-border-soft);
        color: var(--color-text);
    }

    .cafe-admin-btn.icon {
        background: transparent;
        padding: 0.4rem;
        border-radius: 50%;
        width: 34px;
        height: 34px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        font-size: 1.1rem;
    }

        .cafe-admin-btn.icon.edit-btn {
            background: var(--color-primary-soft);
            color: var(--color-primary);
            border: none;
        }

        .cafe-admin-btn.icon.delete-btn {
            background: rgba(239, 68, 68, 0.12);
            color: #ef4444;
            border: none;
        }

        .cafe-admin-btn.icon:hover {
            transform: scale(1.05);
            background: var(--color-primary-soft);
        }

/* دسته‌بندی‌ها (کارتی) */
.cafe-categories-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 1rem;
    margin-top: 0.5rem;
}

.cafe-category-card {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    padding: 0.8rem 1rem;
    background: var(--color-surface);
    border: 1px solid var(--color-border-soft);
    border-radius: var(--radius-lg);
    transition: 0.2s;
}

    .cafe-category-card:hover {
        transform: translateY(-2px);
        box-shadow: var(--shadow-strong);
    }

.cafe-category-card-icon {
    font-size: 2rem;
}

.cafe-category-card-info {
    flex: 1;
}

.cafe-category-card-title {
    font-weight: 800;
    margin-bottom: 0.2rem;
}

.cafe-category-card-order {
    font-size: 0.75rem;
    color: var(--color-text-muted);
}

/* ========== محصولات: چیدمان جدید واکنش‌گرا ========== */
.cafe-admin-category-block {
    margin-bottom: 1.2rem;
    border-radius: var(--radius-md);
    overflow: hidden;
}

.cafe-admin-category-title-block {
    background: var(--color-surface);
    padding: 0.6rem 1rem;
    font-weight: 800;
    border-bottom: 1px solid var(--color-border-soft);
    font-size: 1.1rem;
}

.cafe-admin-products-list {
    padding: 0.5rem 0;
}

/* کارت محصول - دسکتاپ (گرید سه ستونه) */
.cafe-admin-product-card {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 1rem;
    align-items: center;
    background: var(--color-surface);
    border: 1px solid var(--color-border-soft);
    border-radius: var(--radius-lg);
    padding: 1rem;
    margin: 0.5rem 0;
    transition: 0.2s;
}

    .cafe-admin-product-card:hover {
        box-shadow: var(--shadow-soft);
    }

/* تصویر محصول در دسکتاپ */
.cafe-admin-product-thumb {
    width: 70px;
    height: 70px;
    border-radius: 16px;
    object-fit: cover;
    border: 1px solid var(--color-border-soft);
}

/* اطلاعات اصلی (نام + توضیحات) */
.cafe-product-info-main {
    min-width: 0;
}

.cafe-product-name {
    font-size: 1.15rem;
    font-weight: 800;
    color: var(--color-text);
    margin-bottom: 0.25rem;
    word-break: break-word;
}

.cafe-product-desc {
    font-size: 0.9rem;
    line-height: 1.5;
    color: var(--color-text-muted);
    margin-top: 0.4rem;
    word-break: break-word;
    white-space: normal;
}

/* ستون قیمت + دکمه‌ها (در دسکتاپ قیمت بالای دکمه‌ها) */
.cafe-product-price-actions {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.6rem;
}

.cafe-product-price {
    font-weight: 800;
    background: var(--color-primary-soft);
    padding: 0.25rem 0.9rem;
    border-radius: 999px;
    font-size: 0.9rem;
    color: var(--color-primary);
    white-space: nowrap;
}

.cafe-product-actions {
    display: flex;
    gap: 0.5rem;
}

/* ---------- آپلود تصویر (پریویو بزرگ‌تر) ---------- */
.cafe-image-upload-row {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: 1rem;
}

.custom-file-upload {
    display: inline-block;
}

.upload-btn {
    cursor: pointer;
}

.cafe-upload-preview {
    display: flex;
    align-items: center;
}
/* بزرگ‌تر شدن پریویو در ویندوز و اندروید */
.cafe-upload-thumb {
    width: 100px; /* بزرگ‌تر از قبل (80px) */
    height: 100px;
    border-radius: 20px;
    object-fit: cover;
    border: 2px solid var(--color-primary);
    background: var(--color-surface);
    box-shadow: var(--shadow-soft);
}

.cafe-upload-error {
    margin-top: 0.5rem;
    padding: 0.4rem 0.7rem;
    border-radius: var(--radius-md);
    background: rgba(239,68,68,0.12);
    border: 1px solid rgba(239,68,68,0.35);
    color: #ef4444;
    font-size: 0.8rem;
}

/* ---------- واکنش‌گرایی موبایل ---------- */
@media (max-width: 768px) {
    .cafe-admin-root {
        padding: 0.8rem;
    }

    /* تغییر چیدمان کارت محصول: تصویر در سمت راست، متن در سمت چپ */
    .cafe-admin-product-card {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        align-items: flex-start;
        gap: 0.8rem;
        margin: 0.75rem 0;
        padding: 0.8rem;
    }

    /* تصویر محصول: در سمت راست (چون RTL است) */
    /*.cafe-product-image {
        flex-shrink: 0;
        order: 1;
        margin-left: 0.5rem;*/ /* فاصله از متن */
    /*}*/

    .cafe-admin-product-thumb {
        width: 100px; /* بزرگ‌تر در موبایل */
        height: 100px;
        border-radius: 20px;
        margin-bottom: 0;
    }

    /* بلوک متن (نام + توضیحات) – سمت چپ تصویر */
    .cafe-product-info-main {
        flex: 1;
        order: 2;
        text-align: right; /* راست‌چین */
        padding-right: 0.5rem;
    }

    .cafe-product-name {
        font-size: 1.1rem;
        margin-bottom: 0.2rem;
    }

    .cafe-product-desc {
        font-size: 0.85rem;
        margin-top: 0.3rem;
    }

    /* قیمت و دکمه‌ها – در یک ردیف زیر هر دو ستون */
    .cafe-product-price-actions {
        order: 3;
        width: 100%;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        margin-top: 0.6rem;
        padding-top: 0.5rem;
        border-top: 1px solid var(--color-border-soft);
    }

    .cafe-product-price {
        white-space: normal;
        font-size: 0.85rem;
    }

    .cafe-product-actions {
        gap: 0.8rem;
    }

    .cafe-admin-btn.icon {
        width: 40px;
        height: 40px;
        font-size: 1.2rem;
    }

    /* فرم و آپلود در موبایل */
    .cafe-admin-form-row {
        flex-direction: column;
    }

    .cafe-image-upload-row {
        flex-direction: column;
        align-items: stretch;
    }

    .custom-file-upload {
        width: 100%;
    }

    .upload-btn {
        width: 100%;
        justify-content: center;
    }

    .cafe-upload-preview {
        justify-content: center;
    }
    /* پریویو آپلود در موبایل کمی کوچک‌تر اما همچنان بزرگ‌تر از قبل */
    .cafe-upload-thumb {
        width: 90px;
        height: 90px;
    }
}

/* ---------- دسکتاپ: کاهش فاصله محصولات از لبه و دکمه‌ها در سمت چپ ---------- */
@media (min-width: 769px) {
    .cafe-admin-products-list {
        padding: 0;
    }

    .cafe-admin-product-card {
        margin: 0.5rem 0;
    }

    .cafe-product-price-actions {
        align-items: flex-end;
    }

    .cafe-product-actions {
        justify-content: flex-end;
    }
}

/* حالت‌های خالی و کمکی */
.cafe-admin-empty,
.cafe-admin-empty-small {
    text-align: center;
    color: var(--color-text-muted);
    padding: 1rem;
}

.cafe-admin-empty-small {
    padding: 0.5rem;
}




/*#endregion CafeAdmin*/


/*#region remove h1 focus when reload*/
/* حذف کامل هرگونه افکت فوکوس از کل صفحه - فقط برای رفع مشکل هدرها */
html:focus, body:focus, body:focus-visible, html:focus-visible {
    outline: none !important;
    box-shadow: none !important;
    border: none !important;
}

/* جلوگیری از هرگونه حاشیه‌ی ناخواسته روی هدرها حتی از طریق والدین */
h1, h2, h3, h4, h5, h6 {
    outline: none !important;
    box-shadow: none !important;
    border: none !important;
}

/* حذف highlight موبایل (اگر روی موبایل مشاهده می‌شود) */
* {
    -webkit-tap-highlight-color: transparent !important;
}
/*#endregion remove h1 focus when reload*/



/* #region Home Index */

.home-page {
    direction: rtl;
    overflow-x: hidden;
    overflow-y: auto;
    min-height: 100dvh;
}

/* HERO */
.hero-section {
    position: relative;
    min-height: 95vh;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.hero-bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.hero-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(15,23,42,.75), rgba(15,23,42,.85));
    z-index: 1;
}

.hero-content {
    position: relative;
    z-index: 2;
    width: min(1100px, 92%);
    text-align: center;
}

.hero-badge {
    display: inline-flex;
    padding: .20rem 0.4rem;
    border-radius: 999px;
    background: rgba(255,255,255,.08);
    border: 1px solid rgba(255,255,255,.12);
    color: #fff;
    margin-bottom: 1rem;
    backdrop-filter: blur(12px);
}

.hero-content h1 {
    font-size: clamp(2.2rem, 5vw, 5rem);
    margin: 0;
    font-weight: 900;
    color: #fff;
    line-height: 1.2;
}

.hero-content p {
    max-width: 760px;
    margin: 1.5rem auto;
    font-size: 1.1rem;
    line-height: 2;
    color: rgba(255,255,255,.82);
}

.hero-actions {
    display: flex;
    gap: 1rem;
    justify-content: center;
    flex-wrap: wrap;
}

/* GENERAL */
.section-container {
    width: min(1400px, 92%);
    margin: 5rem auto;
}

.section-title {
    margin-bottom: 2rem;
}

    .section-title span {
        color: var(--color-primary);
        font-weight: 700;
    }

    .section-title h2 {
        margin-top: .5rem;
        font-size: 1.85rem; /* clamp(1.8rem, 3vw, 3rem);*/
    }

/* ABOUT */
.about-grid {
    display: grid;
    grid-template-columns: 1fr 420px;
    gap: 2rem;
    align-items: center;
}

.about-content p {
    line-height: 2.1;
    color: var(--color-text-muted);
}

.about-image-wrapper img {
    width: 100%;
    border-radius: 24px;
    object-fit: cover;
    box-shadow: var(--shadow-strong);
}

.about-features {
    margin-top: 2rem;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
}

.feature-box {
    background: rgba(255,255,255,.04);
    border: 1px solid var(--color-border-soft);
    padding: 1rem;
    border-radius: 18px;
}

/* HOURS */
.hours-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
}

.hour-item {
    padding: 1.5rem;
    border-radius: 20px;
    background: linear-gradient(135deg, var(--color-primary), var(--color-secondary));
    color: #fff;
}

    .hour-item span {
        display: block;
        margin-bottom: .6rem;
    }

/* LOCATION */
.location-box {
    display: grid;
    grid-template-columns: 350px 1fr;
    gap: 2rem;
}

.location-info {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.map-frame iframe {
    width: 100%;
    height: 420px;
    border: none;
    border-radius: 24px;
}

/* SLIDER */
.hero-slider-shell {
    width: 100%;
    padding: 2rem 1rem;
    box-sizing: border-box;
    overflow: hidden;
}

.hero-slider {
    position: relative;
    width: 100%;
    max-width: 1400px;
    margin-inline: auto;
    border-radius: 28px;
    overflow: hidden;
    background: #0f172a;
    box-shadow: 0 20px 60px rgba(0,0,0,.35);
    touch-action: pan-y;
    overscroll-behavior: contain;
    direction: rtl;
}

.hero-slider__viewport {
    width: 100%;
    overflow: hidden;
    position: relative;
}

.hero-slider__track {
    display: flex;
    width: 100%;
    transition: transform .75s cubic-bezier(.22,.61,.36,1);
    will-change: transform;
    touch-action: pan-y;
}

.hero-slide {
    position: relative;
    flex: 0 0 100%;
    width: 100%;
    min-width: 100%;
    user-select: none;
    -webkit-user-select: none;
    overflow: hidden;
}

.hero-slide__image {
    width: 100%;
    height: 650px;
    display: block;
    object-fit: cover;
    object-position: center;
    pointer-events: none;
    user-select: none;
    -webkit-user-drag: none;
    touch-action: pan-y;
}

.hero-icon {
    width: 100%;
    height: 250px;
    display: block;
    object-fit: cover;
    object-position: center;
    pointer-events: none;
    user-select: none;
    -webkit-user-drag: none;
    touch-action: pan-y;
}

.hero-slider__overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(15,23,42,.75), rgba(15,23,42,.15));
    pointer-events: none;
}

.hero-slider__nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 20;
    width: 52px;
    height: 52px;
    border: none;
    border-radius: 999px;
    background: rgba(15,23,42,.55);
    backdrop-filter: blur(10px);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background .2s ease, transform .2s ease, opacity .2s ease;
}

    .hero-slider__nav:hover {
        background: rgba(15,23,42,.82);
    }

    .hero-slider__nav svg {
        width: 24px;
        height: 24px;
    }

.hero-slider__nav--next {
    right: 18px;
}

.hero-slider__nav--prev {
    left: 18px;
}

.hero-slider__dots {
    position: absolute;
    left: 50%;
    bottom: 20px;
    transform: translateX(-50%);
    z-index: 20;
    display: flex;
    align-items: center;
    gap: .55rem;
}

.hero-slider__dot {
    width: 11px;
    height: 11px;
    border-radius: 999px;
    border: none;
    background: rgba(255,255,255,.4);
    cursor: pointer;
    transition: transform .2s ease, background .2s ease, width .2s ease;
}

    .hero-slider__dot.is-active {
        width: 34px;
        background: #22d3ee;
    }

/* button styles */
.ui-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .4rem;
    padding: .7rem 1.2rem;
    border-radius: 16px;
    text-decoration: none;
    font-weight: 700;
}

.ui-btn-primary {
    color: #fff;
    background: linear-gradient(135deg, var(--color-primary), var(--color-secondary));
}

.ui-btn-ghost {
    color: #fff;
    background: rgba(255,255,255,.08);
    border: 1px solid rgba(255,255,255,.12);
}

/* RESPONSIVE */
@media (max-width: 992px) {
    .about-grid,
    .location-box {
        grid-template-columns: 1fr;
    }

    .about-features {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    .hours-grid {
        grid-template-columns: 1fr;
    }

    .hero-content p {
        font-size: .95rem;
        line-height: 1.9;
    }

    .hero-slide__image {
        height: 320px;
    }

    .hero-icon {
        height: 130px;
    }

    .hero-slider__nav {
        width: 42px;
        height: 42px;
    }

        .hero-slider__nav svg {
            width: 20px;
            height: 20px;
        }

    .hero-slider__nav--next {
        right: 10px;
    }

    .hero-slider__nav--prev {
        left: 10px;
    }

    .hero-slider__dots {
        bottom: 12px;
    }
}

@media (max-width: 640px) {
    .hero-actions {
        flex-direction: column;
    }

    .ui-btn {
        width: 100%;
    }
}

body {
    overflow-x: hidden;
}

.hero-slider {
    position: relative;
    width: 100%;
    max-width: 1400px;
    margin-inline: auto;
    border-radius: 28px;
    overflow: hidden;
    background: #0f172a;
    box-shadow: 0 20px 60px rgba(0,0,0,.35);
    direction: rtl;
    /* حذف */
    /*touch-action: auto;*/
    overscroll-behavior: auto;
}

/* فقط این قسمت gesture را مدیریت کند */

.hero-slider__viewport {
    width: 100%;
    overflow: hidden;
    position: relative;
    touch-action: pan-y;
    overscroll-behavior-x: contain;
    overscroll-behavior-y: auto;
}

.hero-slider__track {
    display: flex;
    width: 100%;
    transition: transform .75s cubic-bezier(.22,.61,.36,1);
    will-change: transform;
    /* حذف */
    touch-action: auto;
    /* مهم */
    transform: translateZ(0);
    backface-visibility: hidden;
}

.hero-slide {
    position: relative;
    flex: 0 0 100%;
    min-width: 100%;
    overflow: hidden;
    user-select: none;
    -webkit-user-select: none;
}

.hero-slide__image {
    height: 650px;
    display: block;
    object-fit: cover;
    object-position: center;
    pointer-events: none;
    user-select: none;
    -webkit-user-drag: none;
    /* حذف */
    touch-action: auto;
}

@media (max-width: 640px) {

    .hero-slider-shell {
        padding: 1rem .5rem;
    }

    .hero-slider {
        border-radius: 18px;
    }

    .hero-slide__image {
        height: 260px;
        object-fit: cover;
        object-position: center;
    }

    .hero-slider__nav {
        width: 40px;
        height: 40px;
    }

    .hero-slider__dots {
        bottom: 12px;
    }
}

.hero-slider__viewport {
    overflow: hidden;
    touch-action: pan-y;
}


/* =========================
   TESTIMONIALS
========================= */

.testimonials-card {
    overflow: hidden;
    background: radial-gradient(circle at top left, var(--color-primary-soft), transparent 55%), radial-gradient(circle at bottom right, rgba(168, 85, 247, 0.14), transparent 55%);
}

.testimonials-slider {
    width: 100%;
    overflow: hidden;
    direction: rtl;
}

.testimonials-viewport {
    width: 100%;
    overflow: hidden;
}

.testimonials-track {
    display: flex;
    flex-direction: row; /* اصلاح شد: از row-reverse به row تغییر یافت */
    transition: transform .7s cubic-bezier(.22,.61,.36,1);
    will-change: transform;
}

.testimonial-card {
    flex: 0 0 50%;
    min-width: 50%;
    box-sizing: border-box;
    padding: .7rem;
}

.testimonial-card__inner {
    height: 100%;
    padding: 1.4rem;
    border-radius: 24px;
    background: rgba(255,255,255,.04);
    border: 1px solid var(--color-border-soft);
    backdrop-filter: blur(12px);
}

.testimonial-card__head {
    display: flex;
    align-items: center;
    gap: .9rem;
    margin-bottom: 1rem;
}

.testimonial-avatar {
    width: 54px;
    height: 54px;
    border-radius: 50%;
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    color: #fff;
    background: linear-gradient(135deg,var(--color-primary),var(--color-secondary));
}

.testimonial-meta {
    display: flex;
    flex-direction: column;
    gap: .2rem;
}

    .testimonial-meta span {
        color: var(--color-text-muted);
        font-size: .9rem;
    }

.testimonial-text {
    line-height: 2;
    margin: 0;
}

.testimonial-stars {
    display: flex;
    gap: .2rem;
}

/* CONTROLS */

.testimonials-controls {
    margin-top: 1.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
}

.testimonials-dots {
    display: flex;
    align-items: center;
    gap: .5rem;
}

.testimonials-dot {
    width: 10px;
    height: 10px;
    border-radius: 999px;
    border: none;
    background: rgba(255,255,255,.3);
    transition: all .25s ease;
    cursor: pointer;
}

    .testimonials-dot.is-active {
        width: 32px;
        background: #22d3ee;
    }

.testimonials-nav {
    width: 44px;
    height: 44px;
    border: none;
    border-radius: 999px;
    background: rgba(15,23,42,.65);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    backdrop-filter: blur(10px);
    flex-shrink: 0;
}

    .testimonials-nav svg {
        width: 20px;
        height: 20px;
    }

/* MOBILE */

@media (max-width: 992px) {

    .testimonial-card {
        flex: 0 0 100%;
        min-width: 100%;
    }
}

@media (max-width: 768px) {

    .testimonials-controls {
        gap: .7rem;
    }

    .testimonials-nav {
        width: 40px;
        height: 40px;
    }

    .testimonial-card {
        padding: 0;
    }
}

.map-frame {
    width: 100%;
    min-height: 420px;
    overflow: hidden;
    border-radius: 24px;
}

    .map-frame iframe {
        width: 100%;
        height: 420px;
        border: 0;
        display: block;
    }


/* =========================
       COMMENT FORM
    ========================= */
.comment-form-container {
    margin-top: 1.5rem;
    padding: 1.5rem;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid var(--color-border-soft);
    border-radius: var(--radius-xl);
    backdrop-filter: blur(12px);
    direction: rtl;
    text-align: right;
    animation: slideDown 0.3s ease-out;
}

@keyframes slideDown {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.comment-form-row {
    margin-bottom: 1.25rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.comment-form-label {
    font-size: 0.95rem;
    font-weight: 800;
    color: var(--color-text);
}

/* Star Rating */
.star-rating {
    display: flex;
    direction: ltr; /* LTR for logical filling, but we reverse the DOM visual logic or just keep it RTL */
    direction: rtl; /* راست چین برای شروع ستاره از راست */
    gap: 0.3rem;
}

.star-btn {
    background: transparent;
    border: none;
    font-size: 2rem;
    color: rgba(255, 255, 255, 0.15); /* رنگ ستاره خاموش */
    cursor: pointer;
    transition: color 0.2s ease, transform 0.2s ease;
    padding: 0;
    line-height: 1;
}

    .star-btn:hover {
        transform: scale(1.15);
    }

    .star-btn.is-active {
        color: #facc15; /* زرد طلایی برای ستاره روشن */
        text-shadow: 0 0 12px rgba(250, 204, 21, 0.4);
    }

/* Textarea */
.comment-textarea {
    resize: vertical;
    min-height: 100px;
    background: rgba(0, 0, 0, 0.2) !important;
    border-radius: var(--radius-lg) !important;
    padding: 1rem !important;
}

    .comment-textarea:focus {
        border-color: var(--color-primary) !important;
        box-shadow: 0 0 0 3px var(--color-primary-soft) !important;
    }

/* Validation Errors */
.comment-validation-error {
    color: var(--color-error);
    font-size: 0.85rem;
    font-weight: 700;
    margin-top: 0.2rem;
}

/* Buttons */
.comment-form-actions {
    display: flex;
    gap: 0.8rem;
    margin-top: 1.5rem;
}

@media (max-width: 640px) {
    .comment-form-actions {
        flex-direction: column;
    }

        .comment-form-actions .ui-btn {
            width: 100%;
        }
}


/* ایجاد فاصله عمودی بین دکمه ثبت نظر و اسلایدر پایین آن */
.testimonials-header {
    margin-bottom: 24px;
}

/* استایل کادر ثبت نظر جدید */
.comment-form-box {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px;
    padding: 20px;
    /* ایجاد فاصله ایمن و مناسب از کادر نظرات کاربران در پایین تا به هم نچسبند */
    margin-bottom: 32px;
    display: flex;
    flex-direction: column;
    /* ایجاد فاصله عمودی استاندارد بین فیلدها و کادرها در اندروید و موبایل */
    gap: 16px;
}

    .comment-form-box h3 {
        font-size: 1.1rem;
        color: #ffffff;
        margin-top: 0;
        margin-bottom: 4px;
    }

/* استایل فیلدهای ورودی */
.form-group {
    display: flex;
    flex-direction: column;
    gap: 6px; /* فاصله بین متن راهنما (Label) و خود کادر ورودی */
}

    .form-group label {
        color: #b3b3b3;
        font-size: 0.85rem;
    }

    .form-group .form-control {
        background: rgba(0, 0, 0, 0.25);
        border: 1px solid rgba(255, 255, 255, 0.15);
        border-radius: 8px;
        padding: 12px;
        color: #ffffff;
        font-family: inherit;
        font-size: 0.95rem;
        outline: none;
        transition: border-color 0.2s;
    }

        .form-group .form-control:focus {
            border-color: #ff0055; /* یا رنگ اصلی تم بازی شما */
        }

/* قرارگیری دکمه‌های ارسال و انصراف به صورت افقی (در یک ردیف) در موبایل و اندروید */
.form-actions-row {
    display: flex;
    flex-direction: row; /* چیدمان در یک ردیف */
    gap: 12px; /* فاصله افقی بین دو دکمه */
    width: 100%;
    margin-top: 8px;
}

    /* تقسیم مساوی عرض ردیف بین هر دو دکمه در موبایل */
    .form-actions-row .ui-btn {
        flex: 1;
        text-align: center;
        justify-content: center;
        padding: 12px 16px;
        font-size: 0.95rem;
    }

/* Buttons (حالت دسکتاپ و کلی) */
.comment-form-actions {
    display: flex;
    flex-direction: row; /* چینش پیش‌فرض به صورت ردیف */
    gap: 0.8rem;
    margin-top: 1.5rem;
}

/* تنظیمات اختصاصی برای موبایل و تبلت‌های کوچک */
@media (max-width: 640px) {
    .comment-form-actions {
        flex-direction: row !important; /* اجبار به ماندن در یک ردیف افقی */
        gap: 10px; /* فاصله افقی بین دو دکمه */
        width: 100%;
    }

        .comment-form-actions .ui-btn {
            flex: 1; /* تقسیم مساوی عرض ردیف بین هر دو دکمه */
            width: auto !important; /* لغو حالت عرض ۱۰۰٪ برای دکمه‌های تکی */
            padding: 10px 8px; /* پدینگ بهینه شده برای صفحات لمسی */
            justify-content: center; /* وسط‌چین کردن متن داخل دکمه */
            text-align: center;
            font-size: 0.9rem; /* اندازه فونت خوانا و مناسب موبایل */
        }
}

/* =========================
   LATEST BLOGS SECTION
========================= */
.blogs-section {
    margin-top: 3rem;
    margin-bottom: 3rem;
}

.blogs-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.5rem;
    direction: rtl;
}

.blogs-title-box {
    margin-bottom: 0 !important;
    text-align: right;
}

.view-all-btn {
    font-size: 0.9rem;
    padding: 0.5rem 1rem;
    white-space: nowrap;
}

/* ===== SLIDER ===== */

.blogs-slider {
    width: 100%;
    overflow: hidden;
    direction: rtl;
}

.blogs-viewport {
    width: 100%;
    overflow: hidden;
}

.blogs-track {
    display: flex;
    flex-direction: row;
    transition: transform .55s cubic-bezier(.22,.61,.36,1);
    will-change: transform;
}

/* دسکتاپ: ۲ کارت ← هر پله ۵۰٪ */
@media (min-width: 993px) {
    .blogs-pos-0 {
        transform: translate3d(0%, 0, 0);
    }

    .blogs-pos-1 {
        transform: translate3d(50%, 0, 0);
    }

    .blogs-pos-2 {
        transform: translate3d(100%, 0, 0);
    }

    .blogs-pos-3 {
        transform: translate3d(150%, 0, 0);
    }
}

/* موبایل: ۱ کارت ← هر پله ۱۰۰٪ */
@media (max-width: 992px) {
    .blogs-pos-0 {
        transform: translate3d(0%, 0, 0);
    }

    .blogs-pos-1 {
        transform: translate3d(100%, 0, 0);
    }

    .blogs-pos-2 {
        transform: translate3d(200%, 0, 0);
    }

    .blogs-pos-3 {
        transform: translate3d(300%, 0, 0);
    }
}

/* ===== CARD ===== */

.blog-card {
    flex: 0 0 50%;
    min-width: 50%;
    box-sizing: border-box;
    padding: 0.6rem;
    height: 400px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid var(--color-border-soft);
    border-radius: var(--radius-xl);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    transition: transform 0.3s ease;
}

    .blog-card:hover {
        transform: translateY(-5px);
        border-color: rgba(255, 255, 255, 0.15);
    }

.blog-card-img-wrapper {
    height: 220px;
    width: 100%;
    overflow: hidden;
    border-radius: calc(var(--radius-xl) - 4px) calc(var(--radius-xl) - 4px) 0 0;
}

.blog-card-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s ease;
}

.blog-card:hover .blog-card-img {
    transform: scale(1.05);
}

.blog-card-content {
    padding: 1.25rem;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    text-align: right;
}

.blog-card-title {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--color-text);
    margin: 0 0 0.5rem 0;
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.blog-card-subtitle {
    font-size: 0.85rem;
    color: var(--color-text-muted);
    margin: 0;
    line-height: 1.5;
    flex-grow: 1;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.blog-card-actions {
    margin-top: 1rem;
}

    .blog-card-actions .ui-btn-sm {
        padding: 0.5rem 1rem;
        font-size: 0.85rem;
        width: 100%;
        justify-content: center;
    }

@media (max-width: 992px) {
    .blog-card {
        flex: 0 0 100%;
        min-width: 100%;
    }
}

@media (max-width: 640px) {
    .blog-card {
        height: 380px;
    }

    .blog-card-img-wrapper {
        height: 200px;
    }

    .blogs-header {
        align-items: flex-start;
    }
}

/* ===== CONTROLS ===== */

.blogs-controls {
    margin-top: 1.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
}

.blogs-dots {
    display: flex;
    align-items: center;
    gap: .5rem;
}

.blogs-dot {
    width: 10px;
    height: 10px;
    border-radius: 999px;
    border: none;
    background: rgba(255,255,255,.3);
    transition: all .25s ease;
    cursor: pointer;
    padding: 0;
}

    .blogs-dot.is-active {
        width: 32px;
        background: #22d3ee;
    }

.blogs-nav {
    width: 44px;
    height: 44px;
    border: none;
    border-radius: 999px;
    background: rgba(15,23,42,.65);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    backdrop-filter: blur(10px);
    flex-shrink: 0;
    transition: background .2s ease, transform .15s ease;
}

    .blogs-nav:hover {
        background: rgba(34,211,238,.25);
        transform: scale(1.08);
    }

    .blogs-nav svg {
        width: 20px;
        height: 20px;
    }

@media (max-width: 768px) {
    .blogs-controls {
        gap: .7rem;
    }

    .blogs-nav {
        width: 40px;
        height: 40px;
    }
}


/* فاصله بین کارت‌ها در دسکتاپ */
@media (min-width: 993px) {
    .blog-card {
        padding: 0.5rem;
    }
}

/* تیتر هدر بزرگ‌تر در دسکتاپ */
@media (min-width: 993px) {
    .blogs-title-box h2 {
        font-size: 1.6rem;
    }
}

/* فاصله دکمه‌های کنترل از کارت‌ها */
.blogs-controls {
    margin-top: 2rem;
}


/* دسکتاپ: فاصله بین کارت‌ها + اصلاح عرض و موقعیت‌ها */
@media (min-width: 993px) {

    .blogs-track {
        gap: 1rem;
    }

    .blog-card {
        flex: 0 0 calc(50% - 0.5rem);
        min-width: calc(50% - 0.5rem);
        padding: 0;
    }

    /* موقعیت‌ها باید با gap هماهنگ بشن: هر پله = (50% - 0.5rem) + 1rem */
    .blogs-pos-0 {
        transform: translate3d(0, 0, 0);
    }

    .blogs-pos-1 {
        transform: translate3d(calc(50% + 0.5rem), 0, 0);
    }

    .blogs-pos-2 {
        transform: translate3d(calc(100% + 1rem), 0, 0);
    }

    .blogs-pos-3 {
        transform: translate3d(calc(150% + 1.5rem), 0, 0);
    }
}
/* ارتفاع عکس در دسکتاپ */
@media (min-width: 993px) {
    .blog-card-img-wrapper {
        height: 260px;
    }
}

/* دکمه ادامه مطلب — انیمیشن کلیک */
.blog-card-actions .ui-btn-sm {
    position: relative;
    overflow: hidden;
}

    .blog-card-actions .ui-btn-sm::after {
        content: '';
        position: absolute;
        inset: 0;
        background: radial-gradient(circle, rgba(255,255,255,0.35) 0%, transparent 70%);
        transform: scale(0);
        opacity: 0;
        transition: transform 0.45s ease, opacity 0.45s ease;
        border-radius: inherit;
        pointer-events: none;
    }

    .blog-card-actions .ui-btn-sm:active::after {
        transform: scale(2.5);
        opacity: 1;
        transition: transform 0s, opacity 0s;
    }


/* ==========================================================================
   استایل‌های جدید دکمه ادامه مطلب (Inline با انیمیشن فلش)
   ========================================================================== */
.blog-card-subtitle {
    display: inline; /* یا block فرقی ندارد، محتوای داخلی جریان متنی دارد */
}

.blog-readmore-link {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: #ff0055; /* رنگ متمایز کننده اکشن (می‌توانید به رنگ دلخواه تغییر دهید) */
    text-decoration: none;
    font-weight: bold;
    font-size: 0.88rem;
    margin-right: 6px;
    white-space: nowrap; /* جلوگیری از شکستن کلمه ادامه مطلب و فلش */
    transition: color 0.3s ease;
    vertical-align: middle;
}

    .blog-readmore-link:hover {
        color: #ff3377; /* رنگ حالت هوور */
    }

/* استایل فلش دکمه ادامه مطلب */
.readmore-arrow {
    width: 16px;
    height: 16px;
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* انیمیشن حرکت فلش از راست به چپ در حالت هوور */
.blog-readmore-link:hover .readmore-arrow {
    transform: translateX(-5px); /* حرکت به سمت چپ در محیط RTL و LTR */
}


/* ==========================================================================
   اصلاح دکمه "نمایش همه" در بخش موبایل (ریسپانسیو)
   ========================================================================== */
@media (max-width: 768px) {
    /* تغییر ساختار هدر مقالات به حالت ستونی در موبایل */
    .blogs-header {
        display: flex;
        flex-direction: column;
        align-items: flex-start; /* راست‌چین کردن عنوان و ساب‌تایتل اصلی */
        gap: 12px;
        width: 100%;
        position: relative;
    }

        /* اصلاح سایز و انتقال دکمه نمایش همه به گوشه سمت چپ پایین */
        .blogs-header .view-all-btn {
            align-self: flex-end; /* انتقال دکمه به سمت چپ در چینش RTL */
            width: fit-content !important; /* جلوگیری از بزرگ و عریض شدن دکمه */
            min-width: unset !important;
            padding: 6px 16px !important; /* ظریف‌تر شدن دکمه */
            font-size: 0.85rem !important;
            margin-top: 4px; /* ایجاد فاصله مناسب زیر متن ساب‌تایتل اصلی */
            margin-right: auto; /* اطمینان کامل از متمایل شدن به سمت چپ */
            margin-left: 0;
        }
}
/* ==========================================================================
   ۱. افزایش ارتفاع عکس و کارت در دسکتاپ (ویندوز)
   ========================================================================== */
@media (min-width: 993px) {
    .blog-card {
        height: 480px !important; /* افزایش ارتفاع کل کارت برای جا شدن عکس بزرگتر */
    }

    .blog-card-img-wrapper {
        height: 320px !important; /* افزایش چشم‌گیر ارتفاع عکس در دسکتاپ */
    }
}

/* ==========================================================================
   ۲. تنظیمات متن ساب‌تایتل (محدود شدن و ایجاد سه نقطه)
   ========================================================================== */
.blog-card-subtitle {
    display: -webkit-box;
    -webkit-line-clamp: 2; /* تعداد خطوط مجاز قبل از نمایش سه نقطه (...) */
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    margin: 0 0 8px 0; /* ایجاد کمی فاصله تا دکمه ادامه مطلب */
    font-size: 0.85rem;
    color: var(--color-text-muted);
    line-height: 1.6;
    width: 100%;
}

/* ==========================================================================
   ۳. استایل دکمه "ادامه مطلب" (رنگ سایان، بک‌گراند هاور و چیدمان)
   ========================================================================== */
.blog-card-content {
    /* اطمینان از چیدمان درست دکمه در انتهای باکس */
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.blog-readmore-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--color-primary); /* استفاده از رنگ سایان تم شما */
    text-decoration: none;
    font-weight: 800;
    font-size: 0.85rem;
    padding: 6px 12px;
    border-radius: 8px; /* گوشه‌های گرد برای بک‌گراند هاور */
    transition: all 0.3s ease;
    align-self: flex-end; /* هل دادن دکمه به سمت چپ (انتهای متن در زبان فارسی) */
    margin-top: auto; /* چسباندن دکمه به پایین باکس */
}

    /* افکت هاور (بک‌گراند سایانِ ملایم) */
    .blog-readmore-link:hover {
        background-color: var(--color-primary-soft); /* بک‌گراند شیشه‌ای و ملایم */
        color: var(--color-primary);
    }

/* استایل فلش و انیمیشن حرکت آن */
.readmore-arrow {
    width: 16px;
    height: 16px;
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.blog-readmore-link:hover .readmore-arrow {
    transform: translateX(-5px); /* حرکت نرم به سمت چپ */
}
/* ==========================================================================
   اصلاح هدر بخش مقالات در موبایل (همه در یک ردیف روبه‌روی هم)
   ========================================================================== */
@media (max-width: 768px) {
    .blogs-header {
        display: flex !important;
        flex-direction: row !important; /* قرارگیری اجباری در یک خط افقی */
        justify-content: space-between !important; /* متن‌ها راست، دکمه چپ */
        align-items: center !important; /* تراز عمودی در مرکز */
        gap: 8px;
        width: 100%;
    }

    /* کادر دربرگیرنده تایتل و ساب‌تایتل */
    .blogs-title-box {
        display: flex;
        flex-direction: column;
        justify-content: center;
        flex: 1; /* گرفتن فضای باقیمانده سمت راست */
        min-width: 0; /* جلوگیری از بیرون‌زدگی متن‌های طولانی */
    }

        .blogs-title-box h2 {
            font-size: 1.15rem !important; /* سایز متناسب با صفحه موبایل */
            margin: 0 !important;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis; /* سه نقطه شدن تایتل در صورت کمبود جا */
        }

        .blogs-title-box p {
            font-size: 0.75rem !important; /* ریزتر شدن ساب‌تایتل */
            margin: 4px 0 0 0 !important;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

    /* دکمه "نمایش همه" در روبه‌روی متن‌ها */
    .blogs-header .view-all-btn {
        flex-shrink: 0; /* جلوگیری از فشرده و له شدن دکمه */
        align-self: center !important; /* قرارگیری در وسط ارتفاع ردیف */
        margin: 0 !important;
        padding: 6px 12px !important; /* جمع‌وجور شدن کادر دکمه */
        font-size: 0.8rem !important;
        white-space: nowrap; /* جلوگیری از دو خطی شدن متن دکمه */
    }
}




/* #region hour-card*/
/* ================================
   WORKING HOURS – Modern
   ================================ */
.hours-card-modern {
    direction: rtl;
    text-align: right;
    padding: 2rem;
    position: relative;
    overflow: hidden;
}

    .hours-card-modern::before {
        content: "";
        position: absolute;
        inset: 0;
        background: radial-gradient(circle at top left, var(--color-primary-soft), transparent 55%), radial-gradient(circle at bottom right, rgba(168, 85, 247, 0.14), transparent 55%);
        pointer-events: none;
    }

    .hours-card-modern > * {
        position: relative;
        z-index: 1;
    }

/* Header */
.hours-head {
    display: flex;
    flex-direction: column;
    gap: .35rem;
    margin-bottom: 1.75rem;
}

    .hours-head h2 {
        margin: 0;
    }

/* Live status badge */
.hours-status {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    width: fit-content;
    margin-top: .75rem;
    padding: .4rem .9rem;
    border-radius: 999px;
    font-size: .85rem;
    font-weight: 700;
    background: var(--color-surface);
    border: 1px solid var(--color-border-soft);
    transition: all var(--transition-med);
}

.status-dot {
    width: 10px;
    height: 10px;
    border-radius: 999px;
    background: var(--color-text-muted);
    box-shadow: 0 0 0 0 transparent;
}

.hours-status.is-open {
    color: var(--color-success);
    border-color: rgba(16,185,129,.4);
    background: rgba(16,185,129,.12);
}

    .hours-status.is-open .status-dot {
        background: var(--color-success);
        animation: hoursPulse 1.8s infinite;
    }

.hours-status.is-closed {
    color: var(--color-error);
    border-color: rgba(239,68,68,.4);
    background: rgba(239,68,68,.12);
}

    .hours-status.is-closed .status-dot {
        background: var(--color-error);
    }

@keyframes hoursPulse {
    0% {
        box-shadow: 0 0 0 0 rgba(16,185,129,.5);
    }

    70% {
        box-shadow: 0 0 0 8px rgba(16,185,129,0);
    }

    100% {
        box-shadow: 0 0 0 0 rgba(16,185,129,0);
    }
}

/* Grid */
.hours-grid-modern {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.25rem;
}

/* Each card */
.hour-card {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1.4rem;
    border-radius: var(--radius-lg);
    background: var(--color-surface);
    border: 1px solid var(--color-border-soft);
    box-shadow: var(--shadow-soft);
    transition: transform var(--transition-fast), box-shadow var(--transition-fast), border-color var(--transition-fast);
}

    .hour-card:hover {
        transform: translateY(-3px);
        border-color: var(--color-primary);
        box-shadow: var(--shadow-strong);
    }

/* Icon bubble */
.hour-card__icon {
    flex: 0 0 auto;
    width: 52px;
    height: 52px;
    display: grid;
    place-items: center;
    border-radius: 16px;
    color: #fff;
    background: linear-gradient(135deg, var(--color-primary), var(--color-secondary));
    box-shadow: 0 8px 22px rgba(15, 23, 42, .25);
}

.hour-card--accent .hour-card__icon {
    background: linear-gradient(135deg, var(--color-secondary), var(--color-primary));
}

.hour-card__icon svg {
    width: 26px;
    height: 26px;
}

/* Body */
.hour-card__body {
    display: flex;
    flex-direction: column;
    gap: .45rem;
    min-width: 0;
}

.hour-card__days {
    font-size: .9rem;
    font-weight: 600;
    color: var(--color-text-muted);
}

.hour-card__time {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    font-size: 1.05rem;
    font-weight: 800;
    color: var(--color-text);
    flex-wrap: wrap;
}

.t-arrow {
    color: var(--color-primary);
    font-style: normal;
    font-weight: 900;
}

/* Note */
.hours-note {
    display: flex;
    align-items: center;
    gap: .6rem;
    margin-top: 1.5rem;
    padding: .9rem 1.1rem;
    border-radius: var(--radius-md);
    background: rgba(255,255,255,.04);
    border: 1px solid var(--color-border-soft);
    color: var(--color-text-muted);
    font-size: .85rem;
}

    .hours-note svg {
        width: 20px;
        height: 20px;
        flex: 0 0 auto;
        color: var(--color-primary);
    }

/* Responsive */
@media (max-width: 768px) {
    .hours-grid-modern {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 480px) {
    .hours-card-modern {
        padding: 1.25rem;
    }

    .hour-card {
        padding: 1.1rem;
        gap: .85rem;
    }

    .hour-card__icon {
        width: 46px;
        height: 46px;
    }

    .hour-card__time {
        font-size: .95rem;
    }
}
/* #region CLOCK SECTION & WORKING HOURS LAYOUT */

/* =========================================
   1. LAYOUT (Two columns on Desktop, Reordered on Mobile)
========================================= */
.hours-split-layout {
    display: flex;
    flex-direction: row;
    gap: 2rem;
    align-items: stretch;
    direction: rtl;
    margin-top: 1.5rem;
}

.hours-clock-col {
    flex: 1;
    display: flex;
    order: 2; /* در دسکتاپ سمت چپ/راست متناسب با فلو */
}

.hours-info-col {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    justify-content: center;
    order: 1;
}

@media (max-width: 992px) {
    .hours-split-layout {
        flex-direction: column; /* تغییر چیدمان به زیرهم در موبایل */
        gap: 1.5rem;
    }

    .hours-clock-col {
        order: 1; /* ساعت در اندروید دقیقاً می‌رود بالا */
    }

    .hours-info-col {
        order: 2; /* توضیحات در اندروید دقیقاً می‌آیند پایین */
    }
}

/* =========================================
   2. CLOCK CONTAINER & SKY BOX
========================================= */
.clock-animation-box {
    position: relative;
    width: 100%;
    min-height: 340px;
    border-radius: var(--radius-xl);
    overflow: hidden;
    box-shadow: inset 0 0 25px rgba(0,0,0,0.3);
    background: #87CEEB;
    transition: background 0.6s ease-in-out;
}

.sky-bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
}

/* =========================================
   3. CLOCK FACE & HANDS (LARGE & AT BOTTOM)
========================================= */
.clock-face {
    position: absolute;
    bottom: 20px; /* چسبیده به پایین کادر */
    left: 50%;
    transform: translateX(-50%);
    width: 175px; /* ساعت بزرگتر */
    height: 175px;
    background: rgba(255, 255, 255, 0.22);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 2px solid rgba(255, 255, 255, 0.55);
    border-radius: 50%;
    z-index: 5;
    box-shadow: 0 12px 35px rgba(0,0,0,0.3), inset 0 0 15px rgba(255,255,255,0.3);
}

.clock-number {
    position: absolute;
    font-weight: 800;
    font-size: 16px;
    color: #1e293b;
    text-shadow: 0 1px 2px rgba(255,255,255,0.8);
    font-family: Arial, sans-serif;
}

.num-12 {
    top: 10px;
    left: 50%;
    transform: translateX(-50%);
}

.num-6 {
    bottom: 10px;
    left: 50%;
    transform: translateX(-50%);
}

.num-3 {
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
}

.num-9 {
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
}

.hand {
    position: absolute;
    bottom: 50%;
    left: 50%;
    transform-origin: 50% 100%;
    border-radius: 10px;
    box-shadow: 0 2px 6px rgba(0,0,0,0.4);
}

.hour-hand {
    width: 6px;
    height: 48px;
    margin-left: -3px;
    background: #1e293b;
    transform: rotate(300deg);
}

.minute-hand {
    width: 3px;
    height: 62px;
    margin-left: -1.5px;
    background: #f8fafc;
    transform: rotate(0deg);
}

.center-dot {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 14px;
    background: var(--color-primary);
    border: 2px solid #fff;
    border-radius: 50%;
    box-shadow: 0 2px 4px rgba(0,0,0,0.3);
    height: 14px;
}

/* =========================================
   4. CLOUDS & STARS ELEMENTS
========================================= */
.clouds, .stars {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    transition: opacity 1.5s ease-in-out;
}

.stars {
    opacity: 0;
}

.cloud {
    position: absolute;
    background: #fff;
    border-radius: 50px;
    opacity: 0.9;
}

    .cloud::before, .cloud::after {
        content: '';
        position: absolute;
        background: #fff;
        border-radius: 50%;
    }

.cloud-1 {
    top: 30px;
    right: 12%;
    width: 65px;
    height: 22px;
}

    .cloud-1::before {
        width: 32px;
        height: 32px;
        top: -14px;
        left: 8px;
    }

    .cloud-1::after {
        width: 22px;
        height: 22px;
        top: -8px;
        right: 8px;
    }

.cloud-2 {
    top: 65px;
    left: 10%;
    width: 90px;
    height: 30px;
}

    .cloud-2::before {
        width: 45px;
        height: 45px;
        top: -22px;
        left: 12px;
    }

    .cloud-2::after {
        width: 32px;
        height: 32px;
        top: -12px;
        right: 12px;
    }

.cloud-3 {
    top: 110px;
    right: 8%;
    width: 50px;
    height: 16px;
    opacity: 0.6;
}

    .cloud-3::before {
        width: 24px;
        height: 24px;
        top: -10px;
        left: 8px;
    }

.star {
    position: absolute;
    background: #fff;
    border-radius: 50%;
    box-shadow: 0 0 8px #fff;
}

.star-1 {
    width: 4px;
    height: 4px;
    top: 30px;
    left: 20%;
    animation: twinkle 2s infinite;
}

.star-2 {
    width: 5px;
    height: 5px;
    top: 55px;
    right: 25%;
    animation: twinkle 3s infinite 1s;
}

.star-3 {
    width: 3px;
    height: 3px;
    top: 95px;
    left: 65%;
    animation: twinkle 1.5s infinite 0.5s;
}

.star-4 {
    width: 4px;
    height: 4px;
    top: 130px;
    left: 15%;
    animation: twinkle 2.5s infinite;
}

@keyframes twinkle {
    0%, 100% {
        opacity: 0.3;
        transform: scale(0.8);
    }

    50% {
        opacity: 1;
        transform: scale(1.2);
    }
}

/* =========================================
   5. SUN & MOON (TOP PLACEMENT)
========================================= */
.celestial {
    position: absolute;
    width: 68px;
    height: 68px;
    border-radius: 50%;
    left: 50%;
    transform: translateX(-50%);
    top: 160%; /* شروع از بیرون کادر */
    transition: all 0.5s ease;
    z-index: 2;
}

.sun {
    background: #FFD700;
    box-shadow: 0 0 35px #FF8C00, 0 0 70px #FFD700;
}

.moon {
    background: #e2e8f0;
    box-shadow: inset -12px 2px 0 0 #cbd5e1, 0 0 20px rgba(255, 255, 255, 0.9);
}

/* =========================================
   6. INFO CARDS & PHONE BUTTON STYLES
========================================= */
.hour-main-announcement {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    padding: 1.25rem;
    background: rgba(14, 165, 182, 0.08);
    border: 1px solid rgba(14, 165, 182, 0.25);
    border-radius: var(--radius-lg);
}

.announcement-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    background: var(--color-primary);
    color: #fff;
    border-radius: var(--radius-md);
    flex-shrink: 0;
}

    .announcement-icon svg {
        width: 24px;
        height: 24px;
    }

.announcement-text {
    display: flex;
    flex-direction: column;
    text-align: right;
}

    .announcement-text strong {
        font-size: 1.15rem;
        color: var(--color-primary);
        margin-bottom: 0.25rem;
    }

    .announcement-text span {
        font-size: 0.95rem;
        color: var(--color-text);
    }

.hours-reservation-box {
    padding: 1.5rem;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid var(--color-border-soft);
    border-radius: var(--radius-lg);
    text-align: right;
}

.hours-disclaimer {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.88rem;
    color: #f59e0b; /* رنگ زرد هشداری */
    margin-bottom: 1rem;
    font-weight: 600;
}

.disclaimer-icon {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
}

.reservation-lead {
    font-size: 0.92rem;
    color: var(--color-text-muted);
    line-height: 1.6;
    margin-bottom: 1.5rem;
}

/* دکمه شماره تماس کاملاً اختصاصی و مدرن گیمینگ */
.hours-phone-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    width: 100%;
    padding: 1rem;
    background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%); /* رنگ سبز متمایز و متصل به کانسپت تماس */
    color: #fff !important;
    font-weight: 800;
    font-size: 1.3rem;
    letter-spacing: 1px;
    border-radius: var(--radius-md);
    text-decoration: none !important;
    box-shadow: 0 4px 15px rgba(22, 163, 74, 0.3);
    transition: all 0.25s ease;
}

    .hours-phone-btn:hover {
        transform: translateY(-3px);
        box-shadow: 0 6px 20px rgba(22, 163, 74, 0.5);
        background: linear-gradient(135deg, #25d366 0%, #15803d 100%);
    }

    .hours-phone-btn svg {
        width: 22px;
        height: 22px;
    }

/* =========================================
   7. ANIMATION PLAYS & GLOWS
========================================= */
.clock-animation-box.play-anim {
    animation: skyChange 8s ease-in-out forwards;
}

    .clock-animation-box.play-anim .clouds {
        animation: hideClouds 8s ease-in-out forwards;
    }

    .clock-animation-box.play-anim .stars {
        animation: showStars 8s ease-in-out forwards;
    }

    .clock-animation-box.play-anim .sun {
        animation: sunPath 8s ease-in-out forwards;
    }

    .clock-animation-box.play-anim .moon {
        animation: moonPath 8s ease-in-out forwards;
    }

    .clock-animation-box.play-anim .hour-hand {
        animation: hourMove 8s ease-in-out forwards, handGlow 8s ease-in-out forwards;
    }

    .clock-animation-box.play-anim .minute-hand {
        animation: minuteMove 8s ease-in-out forwards;
    }

    .clock-animation-box.play-anim .clock-number {
        animation: textGlow 8s ease-in-out forwards;
    }


@keyframes skyChange {
    0% {
        background: #87CEEB;
    }

    40% {
        background: #FFB6C1;
    }

    60% {
        background: #2c3e50;
    }

    100% {
        background: #0b101e;
    }
}

@keyframes hideClouds {
    0%, 40% {
        opacity: 1;
        transform: translateY(0);
    }

    60%, 100% {
        opacity: 0;
        transform: translateY(-25px);
    }
}

@keyframes showStars {
    0%, 40% {
        opacity: 0;
    }

    60%, 100% {
        opacity: 1;
    }
}

@keyframes sunPath {
    0% {
        top: 160%;
        transform: translateX(-50%) scale(0.5);
        opacity: 0;
    }

    15% {
        top: 40px;
        transform: translateX(-50%) scale(1.1);
        opacity: 1;
    }
    /* قرارگیری در بالای ساعت */
    40% {
        top: 40px;
        opacity: 1;
        transform: translateX(-50%) scale(1);
    }

    60% {
        top: 160%;
        opacity: 0;
        transform: translateX(-50%) scale(0.5);
    }

    100% {
        top: 160%;
        opacity: 0;
    }
}

@keyframes moonPath {
    0% {
        top: 160%;
        opacity: 0;
    }

    40% {
        top: 160%;
        opacity: 0;
    }

    60% {
        top: 40px;
        transform: translateX(-50%) scale(1);
        opacity: 1;
    }
    /* قرارگیری در بالای ساعت */
    100% {
        top: 40px;
        transform: translateX(-50%) scale(1);
        opacity: 1;
    }
}

@keyframes hourMove {
    0% {
        transform: rotate(300deg);
    }

    100% {
        transform: rotate(720deg);
    }
}

@keyframes minuteMove {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(5040deg);
    }
}

@keyframes handGlow {
    0%, 50% {
        background: #1e293b;
    }

    60%, 100% {
        background: #f8fafc;
        box-shadow: 0 0 10px rgba(255,255,255,0.6);
    }
}

@keyframes textGlow {
    0%, 50% {
        color: #1e293b;
        text-shadow: 0 1px 2px rgba(255,255,255,0.8);
    }

    60%, 100% {
        color: #ffffff;
        text-shadow: 0 0 8px rgba(255,255,255,0.8);
    }
}


/* =========================================
   PREMIUM PHONE CARD (ULTRA MODERN)
========================================= */
.premium-phone-card {
    position: relative;
    display: block;
    width: 100%;
    background: linear-gradient(145deg, #1e293b, #0f172a); /* پس‌زمینه تیره و لوکس */
    border: 1px solid rgba(16, 185, 129, 0.25); /* حاشیه سبز ملایم */
    border-radius: var(--radius-xl, 16px);
    text-decoration: none !important;
    overflow: hidden;
    box-shadow: 0 10px 30px -10px rgba(16, 185, 129, 0.15);
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    direction: rtl;
}

    /* افکت هاور کارت (بالا آمدن و درخشش) */
    .premium-phone-card:hover {
        transform: translateY(-6px) scale(1.02);
        border-color: rgba(16, 185, 129, 0.8);
        box-shadow: 0 20px 40px -15px rgba(16, 185, 129, 0.35);
    }

    /* --- لایه محتوای داخلی --- */
    .premium-phone-card .phone-card-content {
        position: relative;
        display: flex;
        align-items: center;
        padding: 1.25rem 1.5rem;
        gap: 1.25rem;
        z-index: 2;
    }

    /* --- باکس آیکون و پالس --- */
    .premium-phone-card .phone-icon-wrapper {
        position: relative;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 56px;
        height: 56px;
        background: linear-gradient(135deg, #10b981, #059669); /* گرادینت سبز جذاب */
        border-radius: 50%;
        color: #fff;
        flex-shrink: 0;
        box-shadow: 0 4px 15px rgba(16, 185, 129, 0.4);
    }

        .premium-phone-card .phone-icon-wrapper svg {
            width: 26px;
            height: 26px;
            z-index: 3;
        }

    /* موج‌های متحرک زیر آیکون */
    .premium-phone-card .pulse-wave {
        position: absolute;
        width: 100%;
        height: 100%;
        background: rgba(16, 185, 129, 0.4);
        border-radius: 50%;
        z-index: 1;
        animation: premiumPulse 2.5s infinite cubic-bezier(0.25, 1, 0.5, 1);
    }

        .premium-phone-card .pulse-wave.delay {
            animation-delay: 1.25s; /* موج دوم با تاخیر */
        }

    /* --- متون شماره تماس --- */
    .premium-phone-card .phone-text-wrapper {
        display: flex;
        flex-direction: column;
        flex-grow: 1;
    }

    .premium-phone-card .phone-subtitle {
        font-size: 0.85rem;
        color: #a7f3d0; /* سبز بسیار روشن */
        font-weight: 500;
        margin-bottom: 0.3rem;
        opacity: 0.9;
    }

    .premium-phone-card .phone-number {
        font-size: 1.7rem;
        color: #ffffff;
        font-weight: 900;
        letter-spacing: 2px;
        line-height: 1;
        text-shadow: 0 2px 4px rgba(0,0,0,0.5);
    }

    /* --- آیکون فلش راهنما در سمت چپ --- */
    .premium-phone-card .phone-action-icon {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 36px;
        height: 36px;
        background: rgba(255, 255, 255, 0.05);
        border: 1px solid rgba(255, 255, 255, 0.1);
        border-radius: 50%;
        color: #a7f3d0;
        transition: all 0.3s ease;
    }

        .premium-phone-card .phone-action-icon svg {
            width: 18px;
            height: 18px;
            transition: transform 0.3s ease;
        }

    /* افکت اکشن در زمان هاور */
    .premium-phone-card:hover .phone-action-icon {
        background: rgba(16, 185, 129, 0.2);
        border-color: rgba(16, 185, 129, 0.5);
        color: #fff;
    }

        .premium-phone-card:hover .phone-action-icon svg {
            transform: translateX(-4px); /* حرکت فلش به سمت چپ در زمان هاور */
        }

    /* --- انیمیشن درخشش (Shine) روی کارت --- */
    .premium-phone-card .shine-effect {
        position: absolute;
        top: 0;
        left: -150%;
        width: 50%;
        height: 100%;
        background: linear-gradient( to right, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.08) 50%, rgba(255, 255, 255, 0) 100% );
        transform: skewX(-25deg);
        z-index: 1;
        animation: shineSweep 5s infinite;
    }

/* --- Keyframes (انیمیشن‌ها) --- */
@keyframes premiumPulse {
    0% {
        transform: scale(1);
        opacity: 0.8;
    }

    100% {
        transform: scale(1.6);
        opacity: 0;
    }
}

@keyframes shineSweep {
    0% {
        left: -150%;
    }

    20% {
        left: 200%;
    }
    /* عبور سریع */
    100% {
        left: 200%;
    }
    /* مابقی زمان ثابت می‌ماند تا فاصله بین هر بار درخشش ایجاد شود */
}

/* --- واکنش‌گرایی برای موبایل --- */
@media (max-width: 480px) {
    .premium-phone-card .phone-card-content {
        padding: 1rem;
        gap: 1rem;
    }

    .premium-phone-card .phone-icon-wrapper {
        width: 48px;
        height: 48px;
    }

        .premium-phone-card .phone-icon-wrapper svg {
            width: 22px;
            height: 22px;
        }

    .premium-phone-card .phone-number {
        font-size: 1.4rem;
        letter-spacing: 1px;
    }

    .premium-phone-card .phone-action-icon {
        display: none; /* در موبایل برای سادگی، فلش را مخفی می‌کنیم */
    }
}

/* --- واکنش‌گرایی هوشمند برای موبایل‌های کوچک --- */
@media (max-width: 480px) {
    .premium-phone-card .phone-card-content {
        padding: 0.75rem 0.85rem; /* فشرده‌تر کردن حاشیه داخلی */
        gap: 0.6rem; /* کم کردن فاصله بین المان‌ها */
    }

    .premium-phone-card .phone-icon-wrapper {
        width: 38px; /* کوچک‌تر کردن دایره آیکون تلفن */
        height: 38px;
    }

        .premium-phone-card .phone-icon-wrapper svg {
            width: 16px;
            height: 16px;
        }

    .premium-phone-card .phone-subtitle {
        font-size: 0.7rem;
    }

    .premium-phone-card .phone-number {
        font-size: 1.05rem; /* تنظیم سایز شماره برای جا شدن فلش */
        letter-spacing: 0px;
    }

    /* برگرداندن آیکون فلش (اکشن) و بهینه‌سازی سایز آن برای موبایل */
    .premium-phone-card .phone-action-icon {
        display: flex !important; /* این خط فلش را برمی‌گرداند */
        width: 28px;
        height: 28px;
        margin-right: auto; /* هل دادن فلش به منتهی‌الیه سمت چپ */
    }

        .premium-phone-card .phone-action-icon svg {
            width: 14px;
            height: 14px;
        }
}



/* #endregion */


/* #endregion hour-card*/


@media (min-width: 769px) {
    .app-content:has(.home-page) {
        padding-top: 0;
    }

    .app-content:has(.bd-article) {
        padding-top: 0;
    }

    .app-content:has(.errpg-stage) {
        padding-top: 0;
    }
}


/* #region PREMIUM ABOUT SECTION & FEATURE BUTTONS (ISOLATED TO HOME) */

/* تمام استایل‌ها با پیشوند .home-page محدود شدند تا به صفحه پیش‌بینی سرایت نکنند */

.home-page .about-card {
    background: rgba(15, 23, 42, 0.7);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid var(--color-border-soft, rgba(255, 255, 255, 0.05));
    border-radius: var(--radius-xl, 24px);
    padding: 2rem;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
}

@media (min-width: 993px) {
    .home-page .about-card {
        padding: 3rem;
    }

    .home-page .about-grid {
        display: grid;
        grid-template-columns: 1fr 1.2fr;
        align-items: center;
        gap: 3rem;
    }

    .home-page .about-image-wrapper {
        width: 100%;
        height: 440px;
        border-radius: var(--radius-xl, 16px);
        overflow: hidden;
        box-shadow: 0 15px 35px rgba(0, 0, 0, 0.3);
    }

        .home-page .about-image-wrapper img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: transform 0.4s ease;
        }

        .home-page .about-image-wrapper:hover img {
            transform: scale(1.03);
        }
}

.home-page .about-features {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    margin-top: 2.5rem;
    width: 100%;
}

@media (min-width: 993px) {
    .home-page .about-features {
        flex-direction: row;
        align-items: center;
        gap: 1rem;
    }
}

.home-page .about-feature-clickable-btn {
    position: relative;
    display: block;
    flex: 1;
    height: 76px;
    background: linear-gradient(145deg, #1e293b, #0f172a);
    border: 1px solid rgba(14, 165, 182, 0.25);
    border-radius: var(--radius-xl, 16px);
    overflow: hidden;
    box-shadow: 0 4px 20px -5px rgba(0, 0, 0, 0.3);
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    text-decoration: none !important;
    direction: rtl;
}

    .home-page .about-feature-clickable-btn:hover {
        transform: translateY(-4px);
        border-color: var(--color-primary);
        box-shadow: 0 12px 24px -5px rgba(14, 165, 182, 0.25);
    }

.home-page .feature-btn-inner {
    display: flex;
    align-items: center;
    width: 100%;
    height: 100%;
    padding: 0 1.25rem;
    gap: 1rem;
}

.home-page .feature-icon-holder {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    background: linear-gradient(135deg, var(--color-primary), #0891b2);
    border-radius: 50%;
    font-size: 1.3rem;
    flex-shrink: 0;
    box-shadow: 0 4px 12px rgba(14, 165, 182, 0.35);
}

.home-page .feature-text-holder {
    display: flex;
    flex-direction: column;
    text-align: right;
}

    .home-page .feature-text-holder strong {
        font-size: 1.05rem;
        color: #ffffff !important;
        font-weight: 800;
        margin-bottom: 0.2rem;
        text-decoration: none !important;
    }

    .home-page .feature-text-holder span {
        font-size: 0.8rem;
        color: var(--color-text-muted, #94a3b8);
        font-weight: 500;
        text-decoration: none !important;
    }

.home-page .feature-arrow-holder {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 50%;
    color: #cffafe;
    margin-right: auto;
    transition: all 0.3s ease;
}

    .home-page .feature-arrow-holder svg {
        width: 14px;
        height: 14px;
        transition: transform 0.3s ease;
    }

.home-page .about-feature-clickable-btn:hover .feature-arrow-holder {
    background: rgba(14, 165, 182, 0.2);
    border-color: rgba(14, 165, 182, 0.5);
    color: #ffffff;
}

    .home-page .about-feature-clickable-btn:hover .feature-arrow-holder svg {
        transform: translateX(-4px);
    }

.home-page .about-feature-clickable-btn .feature-shine-line {
    position: absolute;
    top: 0;
    left: -150%;
    width: 40%;
    height: 100%;
    background: linear-gradient( to right, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.08) 50%, rgba(255, 255, 255, 0) 100% );
    transform: skewX(-25deg);
    z-index: 1;
    animation: featShineKey 6s infinite;
}

/* =========================================
   تغییرات اختصاصی برای حالت موبایل و اندروید
========================================= */
@media (max-width: 992px) {
    .home-page .about-card {
        padding: 1.5rem 1.25rem;
    }

    .home-page .about-feature-clickable-btn {
        height: 96px !important; /* ارتفاع دلباز اندروید */
        border-radius: var(--radius-lg, 14px);
    }

    .home-page .feature-btn-inner {
        display: flex;
        align-items: center;
        width: 100%;
        height: 100%;
        padding: 0.75rem 1.25rem;
        gap: 1rem;
        box-sizing: border-box;
    }

    .home-page .feature-icon-holder {
        width: 46px;
        height: 46px;
        font-size: 1.25rem;
    }

    .home-page .feature-text-holder {
        display: flex;
        flex-direction: column;
        justify-content: center;
        gap: 0.25rem;
    }

        .home-page .feature-text-holder strong {
            font-size: 1rem;
            line-height: 1.2;
        }

        .home-page .feature-text-holder span {
            font-size: 0.78rem;
            line-height: 1.3;
        }

    .home-page .feature-arrow-holder {
        display: flex !important;
        width: 28px;
        height: 28px;
    }

        .home-page .feature-arrow-holder svg {
            width: 14px;
            height: 14px;
        }
}

@media (max-width: 400px) {
    .home-page .about-feature-clickable-btn {
        height: 90px !important;
    }

    .home-page .feature-btn-inner {
        padding: 0.6rem 0.85rem;
        gap: 0.7rem;
    }

    .home-page .feature-icon-holder {
        width: 40px;
        height: 40px;
        font-size: 1.1rem;
    }

    .home-page .feature-text-holder strong {
        font-size: 0.9rem;
    }

    .home-page .feature-text-holder span {
        font-size: 0.72rem;
    }
}

/* #endregion */

/* =========================================
   بهینه‌سازی بخش هدر (HERO SECTION)
========================================= */
.hero-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
    z-index: 0;
}

.hero-overlay {
    position: absolute;
    inset: 0;
    background: rgba(11, 16, 30, 0.38);
    z-index: 1;
}

@media (max-width: 768px) {
    .hero-section {
        min-height: 70vh;
    }

    .hero-bg {
        object-position: center center;
    }

    .hero-overlay {
        /* حفظ شفافیت عالی در نسخه موبایل */
        background: rgba(11, 16, 30, 0.4);
    }
}





/* ===================================================
   کارت "نظرات بیشتر" به صورت دکمه (ویژه کامپوننت Blazor)
=================================================== */

.view-more-comments-btn {
    /* ۱. ریست کردن استایل‌های پیش‌فرض تگ button */
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    font-family: inherit; /* ارث‌بری از فونت وزیرمتن سایت */
    border: 2px dashed rgba(14, 165, 182, 0.35); /* حاشیه خط‌چین تم سایان */
    background: rgba(15, 23, 42, 0.4);
    padding: 2.5rem 1rem;
    border-radius: 24px;
    cursor: pointer;
    height: 100%;
    outline: none;
    text-align: center;
    -webkit-appearance: none;
    -moz-appearance: none;
    /* افکت‌های انیمیشن */
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

    /* افکت هاور روی کل دکمه/کارت */
    .view-more-comments-btn:hover {
        background: rgba(14, 165, 182, 0.08);
        border-color: var(--color-primary);
        border-style: solid; /* صاف شدن خط‌چین در حالت هاور */
        transform: translateY(-5px);
        box-shadow: 0 10px 30px rgba(14, 165, 182, 0.15);
    }

    /* افکت فعال شدن هنگام فشردن دکمه (حس کلیک واقعی) */
    .view-more-comments-btn:active {
        transform: translateY(-2px);
    }

    /* استایل دسترسی‌پذیری هنگام فوکوس با کیبورد (Tab) */
    .view-more-comments-btn:focus-visible {
        border-color: var(--color-secondary);
        box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.4);
    }

.view-more-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    width: 100%;
}

/* --- گروه آواتارها (راست به چپ سازگار) --- */
.avatar-group {
    display: flex;
    justify-content: center;
    align-items: center;
    direction: ltr; /* برای قرار گرفتن صحیح لایه‌های آواتار روی هم */
}

.avatar-circle {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    border: 3px solid #0f172a;
    background: #334155;
    margin-left: -16px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(255, 255, 255, 0.6);
    transition: all 0.3s ease;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
}

    .avatar-circle:first-child {
        margin-left: 0;
    }

    .avatar-circle svg {
        width: 22px;
        height: 22px;
    }

    .avatar-circle.extra {
        background: var(--color-primary);
        color: #fff;
        font-weight: 800;
        font-size: 0.85rem;
        z-index: 10;
    }

/* باز شدن خفیف آواتارها در حالت هاور */
.view-more-comments-btn:hover .avatar-circle {
    margin-left: -8px;
}

/* --- بخش متون داخل دکمه --- */
.view-more-texts {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}

    .view-more-texts h4 {
        color: #ffffff;
        margin: 0;
        font-size: 1.2rem;
        font-weight: 900;
    }

    .view-more-texts p {
        color: var(--color-text-muted);
        font-size: 0.85rem;
        margin: 0;
        line-height: 1.6;
        max-width: 240px;
    }

/* --- شبیه‌ساز دکمه کپسولی در پایین کارت --- */
.view-more-action-inside {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    margin-top: 0.5rem;
    padding: 0.6rem 1.2rem;
    background: rgba(14, 165, 182, 0.15);
    border: 1px solid rgba(14, 165, 182, 0.3);
    border-radius: 999px;
    color: var(--color-primary);
    font-weight: 800;
    font-size: 0.9rem;
    transition: all 0.3s ease;
}

    .view-more-action-inside svg {
        width: 18px;
        height: 18px;
        transition: transform 0.3s ease;
    }

/* افکت نئونی دکمه داخلی همزمان با هاور شدن کل کارت */
.view-more-comments-btn:hover .view-more-action-inside {
    background: linear-gradient(135deg, var(--color-primary), var(--color-secondary));
    border-color: transparent;
    color: #fff;
    box-shadow: 0 6px 20px rgba(14, 165, 182, 0.4);
}

    /* حرکت دادن فلش به سمت چپ (جهت جلو رفتن در زبان فارسی RTL) */
    .view-more-comments-btn:hover .view-more-action-inside svg {
        transform: translateX(-4px);
    }

/* --- واکنش‌گرایی و ریسپانسیو (موبایل و تبلت) --- */
@media (max-width: 640px) {
    .view-more-comments-btn {
        padding: 1.8rem 1rem;
    }

    .avatar-circle {
        width: 42px;
        height: 42px;
    }

    .view-more-texts h4 {
        font-size: 1.05rem;
    }

    .view-more-texts p {
        font-size: 0.8rem;
    }

    .view-more-action-inside {
        font-size: 0.8rem;
        padding: 0.5rem 1rem;
    }
}



.home-page .feature-icon-holder img,
.feature-icon-holder img {
    width: 68%;
    height: 68%;
    object-fit: contain;
    border-radius: 10%;
}


/* #endregion Home Index */

/* #region blogs */
/* ============================================================
   ARCHIVE / BLOGS PAGE  — اخبار و آموزش‌های گیمینگ
   (این بلاک را به انتهای main.css اضافه کن)
   ============================================================ */

.blogs-archive {
    direction: rtl;
    margin-top: 2rem;
    margin-bottom: 4rem;
}

/* ---------- HEADER ---------- */
.archive-head {
    margin-bottom: 1.75rem;
}

.archive-title-box {
    text-align: right;
    margin-bottom: 0 !important;
}

    .archive-title-box h2 {
        margin: 0 0 0.5rem 0;
    }

.archive-subtitle {
    color: var(--color-text-muted);
    font-size: 0.95rem;
    line-height: 1.7;
    margin: 0;
    max-width: 640px;
}

/* ---------- TOOLBAR ---------- */
.archive-toolbar {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: 1.1rem;
    background: var(--color-surface-soft);
    border: 1px solid var(--color-border-soft);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-soft);
    margin-bottom: 1.25rem;
}

/* ---- Search ---- */
.archive-search {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
}

.archive-search__icon {
    position: absolute;
    inset-inline-start: 0.95rem;
    width: 20px;
    height: 20px;
    color: var(--color-text-muted);
    pointer-events: none;
}

.archive-search__input {
    width: 100%;
    padding: 0.85rem 2.9rem 0.85rem 2.6rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background-color: var(--color-surface);
    color: var(--color-text);
    font-size: 0.95rem;
    font-family: inherit;
    transition: border-color .2s ease, box-shadow .2s ease;
}

    .archive-search__input::placeholder {
        color: var(--color-text-muted);
    }

    .archive-search__input:focus {
        outline: none;
        border-color: var(--color-primary);
        box-shadow: 0 0 0 3px var(--color-primary-soft);
    }

.archive-search__clear {
    position: absolute;
    inset-inline-end: 0.7rem;
    width: 26px;
    height: 26px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    border-radius: 50%;
    background: var(--color-primary-soft);
    color: var(--color-primary);
    cursor: pointer;
    transition: background .2s ease;
}

    .archive-search__clear svg {
        width: 14px;
        height: 14px;
    }

    .archive-search__clear:hover {
        background: var(--color-primary);
        color: #fff;
    }

/* ---- Filter chips ---- */
.archive-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.archive-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.5rem 0.95rem;
    border: 1px solid var(--color-border-soft);
    border-radius: 999px;
    background: var(--color-surface);
    color: var(--color-text-muted);
    font-size: 0.85rem;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    white-space: nowrap;
    transition: all .22s ease;
}

.archive-chip__icon {
    font-size: 0.95rem;
    line-height: 1;
}

.archive-chip:hover {
    border-color: var(--color-primary);
    color: var(--color-text);
}

.archive-chip.is-active {
    background: linear-gradient(135deg, var(--color-primary), var(--color-secondary));
    border-color: transparent;
    color: #fff;
    box-shadow: 0 6px 18px var(--color-primary-soft);
}

/* ---- Sort ---- */
.archive-sort {
    display: flex;
    align-items: center;
    gap: 0.6rem;
}

.archive-sort__label {
    font-size: 0.85rem;
    color: var(--color-text-muted);
    font-weight: 600;
    white-space: nowrap;
}

.archive-sort__select {
    flex: 1;
    max-width: 220px;
    padding: 0.6rem 0.9rem;
    cursor: pointer;
}

/* ---------- RESULT BAR ---------- */
.archive-resultbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1.25rem;
    padding: 0 0.25rem;
}

.archive-count {
    font-size: 0.9rem;
    color: var(--color-text-muted);
    font-weight: 600;
}

.archive-reset {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.4rem 0.85rem;
    border: 1px solid var(--color-border-soft);
    border-radius: 999px;
    background: transparent;
    color: var(--color-text-muted);
    font-size: 0.82rem;
    font-family: inherit;
    cursor: pointer;
    transition: all .2s ease;
}

    .archive-reset svg {
        width: 14px;
        height: 14px;
    }

    .archive-reset:hover {
        color: var(--color-warning);
        border-color: var(--color-warning);
    }

/* ============================================================
   GRID  — دسکتاپ ۴ ستون / تبلت ۲ / موبایل (اندروید) ۱
   ============================================================ */
.archive-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.25rem;
}

/* تبلت */
@media (max-width: 1200px) {
    .archive-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 900px) {
    .archive-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* موبایل / اندروید: تک‌ستونه */
@media (max-width: 600px) {
    .archive-grid {
        grid-template-columns: 1fr;
    }
}

/* ---------- CARD (هماهنگ با blog-card موجود) ---------- */
.archive-card {
    /* گرید چیدمان را مدیریت می‌کند؛ flex-basis قدیمی را خنثی کن */
    flex: initial;
    min-width: 0;
    width: 100%;
    height: 100%;
    padding: 0;
    position: relative;
}

    .archive-card .blog-card-img-wrapper {
        position: relative;
        height: 190px;
        border-radius: calc(var(--radius-xl) - 2px) calc(var(--radius-xl) - 2px) 0 0;
    }

.archive-card__badge {
    position: absolute;
    top: 0.7rem;
    inset-inline-start: 0.7rem;
    padding: 0.3rem 0.75rem;
    border-radius: 999px;
    background: rgba(15, 23, 42, 0.72);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    color: #fff;
    font-size: 0.72rem;
    font-weight: 700;
    border: 1px solid rgba(255, 255, 255, 0.15);
}

.archive-card .blog-card-content {
    padding: 1rem 1.1rem 1.2rem;
}

/* meta: تاریخ + بازدید */
.archive-card__meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    margin-bottom: 0.6rem;
    font-size: 0.75rem;
    color: var(--color-text-muted);
}

.archive-card__date,
.archive-card__views {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
}

.archive-card__meta svg {
    width: 14px;
    height: 14px;
    opacity: 0.8;
}

/* ---------- EMPTY STATE ---------- */
.archive-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 0.6rem;
    padding: 4rem 1.5rem;
    background: var(--color-surface-soft);
    border: 1px dashed var(--color-border-soft);
    border-radius: var(--radius-xl);
    color: var(--color-text-muted);
}

    .archive-empty svg {
        width: 48px;
        height: 48px;
        color: var(--color-text-muted);
        opacity: 0.6;
        margin-bottom: 0.4rem;
    }

    .archive-empty h4 {
        margin: 0;
        color: var(--color-text);
        font-size: 1.05rem;
    }

    .archive-empty p {
        margin: 0 0 0.75rem 0;
        font-size: 0.9rem;
    }

/* ---------- RESPONSIVE TOOLBAR (دسکتاپ: یک ردیف) ---------- */
@media (min-width: 993px) {
    .archive-toolbar {
        flex-direction: row;
        flex-wrap: wrap;
        align-items: center;
    }

    .archive-search {
        flex: 1 1 280px;
        min-width: 260px;
    }

    .archive-filters {
        flex: 1 1 100%;
        order: 3;
    }

    .archive-sort {
        flex: 0 0 auto;
    }
}

/* موبایل: سرچ تمام‌عرض، سلکت تمام‌عرض */
@media (max-width: 600px) {
    .archive-sort {
        width: 100%;
    }

    .archive-sort__select {
        max-width: none;
    }

    .archive-filters {
        /* اسکرول افقی برای چیپ‌ها در موبایل */
        flex-wrap: nowrap;
        overflow-x: auto;
        padding-bottom: 0.25rem;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }

        .archive-filters::-webkit-scrollbar {
            display: none;
        }
}
/* ---- Sort (پیکر مرتب‌سازی هماهنگ با تم دارک) ---- */
.archive-sort {
    display: flex;
    align-items: center;
    gap: 0.6rem;
}

.archive-sort__label {
    font-size: 0.85rem;
    color: var(--color-text-muted);
    font-weight: 600;
    white-space: nowrap;
}

/* استایل‌دهی خود کادر فیلتر مرتب‌سازی */
.archive-sort__select {
    flex: 1;
    max-width: 220px;
    padding: 0.6rem 0.9rem;
    cursor: pointer;
    /* تغییر بکگراند به خاکستری تیره بسیار شیک هماهنگ با تم شما */
    background-color: #111827 !important;
    /* رنگ مرز کم‌رنگ دورتادور کادر */
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    /* رنگ متن داخل کادر */
    color: #ffffff !important;
    border-radius: var(--radius-md);
    font-family: inherit;
    outline: none;
    -webkit-appearance: none; /* حذف ظاهر پیش‌فرض مروگرها در ویندوز/اندروید */
    -moz-appearance: none;
    appearance: none;
    /* اضافه کردن یک فلش سفارشی کوچک سمت چپ کادر چون ظاهر پیش‌فرض رو حذف کردیم */
    background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: left 0.75rem center;
    background-size: 16px;
    padding-left: 2.5rem; /* ایجاد فضا برای فلش سفارشی */

    transition: all 0.2s ease;
}

    /* افکت زمان فوکوس یا کلیک روی کادر */
    .archive-sort__select:focus {
        border-color: var(--color-primary) !important;
        box-shadow: 0 0 10px rgba(14, 165, 182, 0.15);
    }

    /* حل مشکل ویندوز: استایل‌دهی گزینه‌های بازشو (آپشن‌ها) که در ویندوز سفید نمانند */
    .archive-sort__select option {
        background-color: #111827; /* رنگ پس‌زمینه منوی بازشو */
        color: #ffffff; /* رنگ متن گزینه‌ها */
        padding: 0.6rem;
    }
/* #endregion blogs*/


/* #region new part of mainlayout*/
/* =========================================
   FLOATING NAVBAR
========================================= */

.floating-nav-shell {
    position: fixed;
    left: 50%;
    transform: translateX(-50%);
    z-index: 5000;
    width: 100%;
    pointer-events: none;
    top: 18px;
}

.floating-nav {
    pointer-events: auto;
    width: min(1100px, calc(100% - 28px));
    margin-inline: auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.7rem 1rem;
    border-radius: 28px;
    background: linear-gradient(135deg, rgba(15,23,42,.88), rgba(30,41,59,.82));
    backdrop-filter: blur(18px);
    border: 1px solid rgba(255,255,255,.08);
    box-shadow: 0 10px 40px rgba(0,0,0,.35), 0 0 0 1px rgba(255,255,255,.03);
}

/* =========================
   PROFILE
========================= */

.floating-profile {
    display: flex;
    align-items: center;
    gap: .7rem;
    text-decoration: none;
    min-width: max-content;
    flex-shrink: 0;
}

.floating-profile__img {
    width: 48px;
    height: 48px;
    border-radius: 999px;
    object-fit: cover;
    border: 2px solid var(--color-primary);
    box-shadow: 0 0 18px rgba(34,211,238,.35);
}

.floating-profile__meta {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.floating-profile__name {
    color: #fff;
    font-weight: 800;
    font-size: .92rem;
    line-height: 1.2;
}

.floating-profile__status {
    color: var(--color-text-muted);
    font-size: .72rem;
    line-height: 1.2;
}

/* =========================
   MENU
========================= */

.floating-menu {
    display: flex;
    align-items: center;
    gap: .6rem;
    flex: 1 1 auto;
    justify-content: flex-end;
    min-width: 0;
}

.floating-menu__item {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .45rem;
    text-decoration: none;
    color: var(--color-text);
    padding: .8rem 1rem;
    border-radius: 18px;
    transition: transform .18s ease, background-color .18s ease, color .18s ease, box-shadow .18s ease, opacity .18s ease;
    flex-shrink: 0;
}

.floating-menu__icon {
    font-size: 1.05rem;
    line-height: 1;
}

.floating-menu_cup_icon {
    font-size: 1.05rem;
    line-height: 1;
}


.floating-menu__text {
    font-size: .88rem;
    font-weight: 700;
    line-height: 1;
}

/* دسکتاپ */
@media (min-width: 769px) {
    .floating-menu__item {
        background: transparent;
        border: none;
    }

        .floating-menu__item:hover {
            background: rgba(255,255,255,.06);
            transform: translateY(-1px);
        }

    .mobile-profile-item {
        display: none !important;
    }
}

/* active */
.floating-menu__item.active {
    background: linear-gradient(135deg, var(--color-primary), var(--color-secondary));
    color: #fff;
    box-shadow: 0 10px 25px rgba(0,0,0,.28);
}

/* =========================
   CONTENT SPACE
========================= */

.app-content {
    padding-top: 110px;
    padding-bottom: 0;
}

/* =========================
   MOBILE
========================= */

@media (max-width: 768px) {

    .floating-nav-shell {
        top: auto;
        bottom: 10px;
        left: 0;
        transform: none;
        padding-inline: 8px;
        padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 6px);
    }

    .floating-nav {
        width: 100%;
        border-radius: 22px;
        padding: .42rem .45rem;
        flex-direction: row;
        gap: .35rem;
    }

    /* پروفایل بالایی حذف شود */
    .floating-profile {
        display: none;
    }

    .floating-menu {
        width: 100%;
        justify-content: space-between;
        gap: .35rem;
    }

    /* آیتم‌ها بدون باکس و بدون متن */
    .floating-menu__item {
        flex: 1 1 0;
        min-width: 0;
        flex-direction: column;
        gap: 0;
        padding: .48rem .1rem;
        border-radius: 0;
        background: transparent;
        box-shadow: none;
    }

    .floating-menu__text {
        display: none;
    }

    .floating-menu__icon {
        font-size: 1.15rem;
    }

    .floating-menu_cup_icon {
        font-size: 1.45rem;
    }

    /* آیتم پروفایل موبایل */
    .mobile-profile-item {
        display: flex !important;
        align-items: center;
        justify-content: center;
    }
    /*
    .mobile-profile-avatar {
        width: 30px;
        height: 30px;
        border-radius: 999px;
        object-fit: cover;
        border: 2px solid rgba(255,255,255,.14);
        box-shadow: 0 0 16px rgba(34,211,238,.24);
        flex-shrink: 0;
    }*/

    .mobile-profile-avatar {
        width: 42px;
        height: 42px;
        border-radius: 999px;
        object-fit: cover;
        border: 2px solid rgba(255,255,255,.18);
        box-shadow: 0 0 20px rgba(34,211,238,.34);
    }
    /* active در موبایل: فقط کمی نور روی آیکن */
    .floating-menu__item.active {
        background: transparent;
        box-shadow: none;
        transform: none;
    }

        .floating-menu__item.active .floating-menu__icon, .floating-menu_cup_icon,
        .mobile-profile-item.active .mobile-profile-avatar {
            filter: drop-shadow(0 0 10px rgba(34,211,238,.65));
            transform: scale(1.08);
        }

    /* فضای پایین برای اینکه nav روی فوتر نیفتد */
    .global-footer {
        padding-bottom: 96px;
    }

    /* محتوای صفحه روی موبایل از بالا فشرده‌تر باشد */
    .app-content {
        padding-top: 0;
        padding-bottom: 92px;
    }
}

/* خیلی کوچک‌ها */
@media (max-width: 420px) {
    .floating-nav-shell {
        bottom: 8px;
        padding-inline: 6px;
    }

    .floating-nav {
        padding: .38rem .4rem;
        border-radius: 20px;
    }

    .floating-menu__item {
        padding: .44rem .08rem;
    }

    .floating-menu__icon {
        font-size: 1.38rem;
    }

    .floating-menu_cup_icon {
        font-size: 1.38rem;
    }

    .mobile-profile-avatar {
        width: 40px;
        height: 40px;
    }

    /* .mobile-profile-avatar {
        width: 28px;
        height: 28px;
    }*/
}


.floating-menu_cup_icon {
    width: 90px;
    height: 55px;
    object-fit: contain;
    display: block;
    flex-shrink: 0;
}

.floating-menu__icon {
    width: 16px;
    height: 16px;
    object-fit: contain;
    display: block;
    flex-shrink: 0;
}

@media (max-width: 768px) {

    .floating-menu__icon {
        width: 24px;
        height: 24px;
        object-fit: contain;
    }

    .floating-menu_cup_icon {
        width: 90px;
        height: 55px;
        object-fit: contain;
    }

    .mobile-profile-avatar {
        width: 36px;
        height: 36px;
    }
}

/* #endregion new part of mainlayout*/

/* #region Fix zoom  bug on input */

/* جلوگیری از زوم خودکار در iOS روی input‌ها */
input,
select,
textarea,
button,
a,
[tabindex] {
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
}

/* اجباری کردن حداقل فونت 16px برای فیلدهای ورودی (iOS برای فونت کمتر از 16px زوم می‌کند) */
input, select, textarea {
    font-size: 16px !important;
}

/* جلوگیر   ی از زوم خودکار با دابل‌تپ در کل بدنه (اختیاری) */
@media (max-width: 768px) {
    body {
        -webkit-text-size-adjust: 100%;
        touch-action: pan-x pan-y; /* اسکرول عمودی و افقی مجاز، زوم با دو انگشت همچنان ممکن است */
    }

    /* جلوگیری از زوم هنگام دوبار کلیک روی دکمه‌ها در iOS */
    button, a, .ui-btn, .ff-btn, .pr-item, .adminpanel-link {
        touch-action: manipulation;
    }
}

/* #endregion Fix zoom  bug on input  */

/* #region Spin wheel-page */

/* ==========================================================================
   چرخ بخت — Wheel of Fortune (scoped)
   Inherits the global theme tokens from main.css (--color-primary, etc.) so it
   adapts to light / dark (data-theme="dark") automatically.
   ========================================================================== */

.cw-root {
    direction: rtl;
    font-family: "Vazirmatn", system-ui, -apple-system, "Segoe UI", sans-serif;
    min-height: 100vh;
    display: grid;
    place-items: start center;
    padding: clamp(1rem, 4vw, 3rem) clamp(.75rem, 3vw, 2rem);
    color: var(--color-text, #e2e8f0);
    /* local, wheel-tuned aliases layered on top of the global theme */
    --cw-primary: var(--color-primary, #22d3ee);
    --cw-secondary: var(--color-secondary, #a855f7);
    --cw-grad: linear-gradient(135deg, var(--cw-primary), var(--cw-secondary));
    --cw-text: var(--color-text, #e2e8f0);
    --cw-muted: var(--color-text-muted, #94a3b8);
    --cw-surface: var(--color-surface, #0f172a);
    --cw-surface-soft: var(--color-surface-soft, rgba(15, 23, 42, .85));
    --cw-border: var(--color-border-soft, rgba(148, 163, 184, .35));
    --cw-neon-red: var(--neon-red, #ff2b6e);
    --cw-neon-yellow: var(--neon-yellow, #fff066);
    --cw-gold: #ffd86b;
    background: radial-gradient(900px 480px at 85% -8%, color-mix(in srgb, var(--cw-primary) 16%, transparent), transparent 60%), radial-gradient(760px 460px at -8% 108%, color-mix(in srgb, var(--cw-secondary) 18%, transparent), transparent 60%), var(--color-bg, #0b1120);
}

.cw-card {
    position: relative;
    width: 100%;
    max-width: 520px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: clamp(1rem, 3vw, 1.6rem);
    padding: clamp(1.2rem, 4vw, 2rem);
    border-radius: var(--radius-xl, 24px);
    overflow: hidden;
    background: radial-gradient(120% 80% at 50% -10%, color-mix(in srgb, var(--cw-primary) 12%, transparent), transparent 55%), var(--cw-surface);
    border: 1px solid var(--cw-border);
    box-shadow: var(--shadow-strong, 0 18px 70px rgba(2, 6, 23, .6));
    backdrop-filter: blur(12px);
}

    /* faint sparkle field in the card corners */
    .cw-card::before,
    .cw-card::after {
        content: "";
        position: absolute;
        width: 6px;
        height: 6px;
        border-radius: 50%;
        background: var(--cw-neon-yellow);
        box-shadow: 40px 60px 0 -1px color-mix(in srgb, var(--cw-primary) 80%, transparent), -60px 120px 0 -2px var(--cw-secondary), 120px 30px 0 -2px var(--cw-neon-yellow);
        opacity: .35;
        pointer-events: none;
        animation: cw-twinkle 4s ease-in-out infinite;
    }

    .cw-card::before {
        top: 12%;
        left: 14%;
    }

    .cw-card::after {
        top: 22%;
        right: 10%;
        animation-delay: 1.6s;
    }

/* -------------------------------------------------- Header -------------- */
.cw-head {
    width: 100%;
    display: flex;
    align-items: center;
    gap: .8rem;
}

.cw-badge {
    flex: 0 0 auto;
    width: 46px;
    height: 46px;
    display: grid;
    place-items: center;
    font-size: 1.5rem;
    border-radius: 14px;
    background: var(--cw-grad);
    box-shadow: 0 8px 22px color-mix(in srgb, var(--cw-primary) 45%, transparent);
}

.cw-title {
    margin: 0;
    font-weight: 900;
    font-size: clamp(1.25rem, 4.4vw, 1.7rem);
    line-height: 1.1;
    color: var(--cw-text);
}

.cw-sub {
    margin: .15rem 0 0;
    font-size: clamp(.78rem, 2.6vw, .92rem);
    color: var(--cw-muted);
}

.cw-pool {
    margin-inline-start: auto;
    flex: 0 0 auto;
    font-size: .78rem;
    font-weight: 800;
    color: var(--cw-text);
    background: color-mix(in srgb, var(--cw-primary) 16%, transparent);
    border: 1px solid color-mix(in srgb, var(--cw-primary) 45%, transparent);
    padding: .35rem .75rem;
    border-radius: 999px;
}

/* -------------------------------------------------- Stage --------------- */
/* inline-grid so the stage shrink-wraps the canvas; overlays use % of it */
.cw-stage {
    position: relative;
    display: inline-grid;
    place-items: center;
}

/* rotating ambient halo behind the wheel */
.cw-glow {
    position: absolute;
    inset: -7%;
    border-radius: 50%;
    z-index: 0;
    background: conic-gradient(from 0deg, var(--cw-primary), var(--cw-secondary), var(--cw-neon-red), var(--cw-gold), var(--cw-primary));
    filter: blur(26px);
    opacity: .45;
    animation: cw-rotate 9s linear infinite;
}

.cw-stage.is-spinning .cw-glow {
    opacity: .8;
    animation-duration: 1.6s;
}

.cw-rotator {
    position: relative;
    z-index: 1;
    display: grid;
    place-items: center;
    transform-origin: center;
    will-change: transform;
    border-radius: 50%;
    filter: drop-shadow(0 18px 30px rgba(2, 6, 23, .55));
}

    .cw-rotator ::deep canvas {
        display: block;
        border-radius: 50%;
    }

/* fixed glossy dome + seating shadow — does NOT rotate, so light stays put */
.cw-gloss {
    position: absolute;
    inset: 3%;
    z-index: 3;
    border-radius: 50%;
    pointer-events: none;
    background: radial-gradient(115% 80% at 50% 16%, rgba(255, 255, 255, .32), rgba(255, 255, 255, .06) 26%, transparent 52%);
    box-shadow: inset 0 -16px 38px rgba(2, 6, 23, .45), inset 0 10px 26px rgba(255, 255, 255, .10);
}

/* -------------------------------------------------- Hub ----------------- */
.cw-hub {
    position: absolute;
    z-index: 4;
    width: 19%;
    aspect-ratio: 1;
    display: grid;
    place-items: center;
    padding: 0;
    border-radius: 50%;
    cursor: pointer;
    color: #fff;
    border: 2px solid color-mix(in srgb, var(--cw-gold) 70%, transparent);
    background: radial-gradient(circle at 50% 30%, #2b3350, #11162a 70%);
    box-shadow: 0 6px 16px rgba(2, 6, 23, .55), inset 0 2px 4px rgba(255, 255, 255, .25), inset 0 -4px 8px rgba(0, 0, 0, .5), 0 0 0 5px color-mix(in srgb, var(--cw-primary) 18%, transparent);
    transition: transform var(--transition-fast, .16s ease), box-shadow var(--transition-fast, .16s ease);
}

    .cw-hub svg {
        width: 46%;
        height: 46%;
        color: var(--cw-gold);
    }

    /*  .cw-hub:hover:not(:disabled) {
        transform: scale(1.07);
        box-shadow: 0 8px 22px rgba(2, 6, 23, .6), inset 0 2px 4px rgba(255, 255, 255, .3), inset 0 -4px 8px rgba(0, 0, 0, .5), 0 0 0 7px color-mix(in srgb, var(--cw-primary) 28%, transparent);
    }

    .cw-hub:active:not(:disabled) {
        transform: scale(.96);
    }*/

    .cw-hub:disabled {
        cursor: default;
    }

.cw-hub-spin {
    width: 50%;
    aspect-ratio: 1;
    border-radius: 50%;
    border: 3px solid rgba(255, 255, 255, .25);
    border-top-color: var(--cw-gold);
    animation: cw-spin .7s linear infinite;
}

/* -------------------------------------------------- Pointer ------------- */
.cw-pointer {
    position: absolute;
    top: 0;
    left: 50%;
    z-index: 5;
    width: 11%;
    transform: translate(-50%, -64%);
    filter: drop-shadow(0 4px 8px rgba(2, 6, 23, .5));
    pointer-events: none;
}

    .cw-pointer svg {
        display: block;
        width: 100%;
        height: auto;
        transform-origin: 50% 30%;
    }

    /* wiggle only the inner svg so the wrapper keeps its translate */
    .cw-pointer.is-ticking svg {
        animation: cw-tick .12s linear infinite;
    }

/* -------------------------------------------------- Spin button --------- */
.cw-spin {
    width: 100%;
    max-width: 320px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    font-family: inherit;
    font-weight: 800;
    font-size: 1.05rem;
    color: #fff;
    cursor: pointer;
    border: none;
    border-radius: 999px;
    padding: .9rem 1.4rem;
    background: var(--cw-grad);
    box-shadow: 0 12px 30px color-mix(in srgb, var(--cw-primary) 40%, transparent);
    /*animation: cw-pulse 2.6s ease-in-out infinite;*/
    /*transition: transform var(--transition-fast, .16s ease);*/
}

    .cw-spin:hover:not(:disabled) {
        transform: translateY(-2px);
    }

    .cw-spin:active:not(:disabled) {
        transform: translateY(0);
    }

    .cw-spin:disabled {
        cursor: default;
        opacity: .85;
        animation: none;
    }

.cw-spin-dot {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, .4);
    border-top-color: #fff;
    animation: cw-spin .7s linear infinite;
}

.cw-hint {
    margin: -.4rem 0 0;
    font-size: .82rem;
    color: var(--cw-muted);
    text-align: center;
}

/* -------------------------------------------------- Legend -------------- */
.cw-legend {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: .45rem;
}

.cw-pill {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    font-size: .76rem;
    font-weight: 700;
    color: var(--cw-text);
    background: var(--cw-surface-soft);
    border: 1px solid var(--cw-border);
    padding: .32rem .7rem;
    border-radius: 999px;
}

    .cw-pill i {
        width: 8px;
        height: 8px;
        border-radius: 50%;
        background: var(--rar, var(--cw-primary));
        box-shadow: 0 0 8px var(--rar, var(--cw-primary));
    }

/* rarity accent colors (shared by legend + result) */
.cw-r-common {
    --rar: #94a3b8;
}

.cw-r-rare {
    --rar: var(--cw-primary);
}

.cw-r-epic {
    --rar: #c084fc;
}

.cw-r-legendary {
    --rar: #fbbf24;
}

/* -------------------------------------------------- Result reveal ------- */
.cw-result {
    position: absolute;
    inset: 0;
    z-index: 20;
    display: grid;
    place-items: center;
    padding: 1rem;
    border-radius: inherit;
    background: color-mix(in srgb, var(--color-bg, #0b1120) 72%, transparent);
    backdrop-filter: blur(8px);
    animation: cw-fade .25s ease both;
    overflow: hidden;
}

.cw-confetti-layer {
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
}

.cw-confetti {
    position: absolute;
    top: -8%;
    left: var(--l);
    width: var(--s);
    height: var(--s);
    background: var(--c);
    border-radius: 2px;
    opacity: 0;
    animation: cw-confetti-fall var(--dur) var(--d) cubic-bezier(.2, .6, .35, 1) forwards;
}

    .cw-confetti:nth-child(even) {
        border-radius: 50%;
    }

.cw-prize {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 320px;
    text-align: center;
    padding: 1.6rem 1.2rem;
    border-radius: var(--radius-lg, 18px);
    background: var(--cw-surface);
    border: 1px solid color-mix(in srgb, var(--rar, var(--cw-primary)) 55%, var(--cw-border));
    box-shadow: 0 24px 60px rgba(2, 6, 23, .6), 0 0 0 1px color-mix(in srgb, var(--rar, var(--cw-primary)) 30%, transparent), 0 0 36px color-mix(in srgb, var(--rar, var(--cw-primary)) 40%, transparent);
    animation: cw-pop .4s cubic-bezier(.2, .9, .25, 1.2) both;
}

.cw-prize-ring {
    position: absolute;
    inset: -40% 0 auto;
    height: 80%;
    width: 80%;
    margin: 0 auto;
    border-radius: 50%;
    background: radial-gradient(circle, color-mix(in srgb, var(--rar, var(--cw-primary)) 35%, transparent), transparent 60%);
    filter: blur(10px);
    pointer-events: none;
}

.cw-trophy {
    font-size: 2.8rem;
    line-height: 1;
    filter: drop-shadow(0 6px 14px color-mix(in srgb, var(--rar, var(--cw-primary)) 60%, transparent));
    animation: cw-bounce 1.4s ease-in-out infinite;
}

.cw-won {
    margin: .5rem 0 .1rem;
    font-size: .82rem;
    font-weight: 800;
    letter-spacing: .06em;
    color: var(--rar, var(--cw-primary));
}

.cw-prize-name {
    margin: .1rem 0 .7rem;
    font-size: 1.3rem;
    font-weight: 900;
    color: var(--cw-text);
}

.cw-prize-meta {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: .5rem;
    margin-bottom: .4rem;
}

.cw-rarity,
.cw-qty {
    font-size: .76rem;
    font-weight: 800;
    padding: .3rem .7rem;
    border-radius: 999px;
}

.cw-rarity {
    color: var(--rar, var(--cw-primary));
    background: color-mix(in srgb, var(--rar, var(--cw-primary)) 16%, transparent);
    border: 1px solid color-mix(in srgb, var(--rar, var(--cw-primary)) 45%, transparent);
}

.cw-qty {
    color: var(--cw-muted);
    background: var(--cw-surface-soft);
    border: 1px solid var(--cw-border);
}

.cw-bonus {
    margin-top: .6rem;
    font-size: .85rem;
    font-weight: 900;
    color: #1b1206;
    background: linear-gradient(120deg, #ffe39a, var(--cw-gold));
    padding: .4rem .8rem;
    border-radius: 999px;
    box-shadow: 0 0 22px color-mix(in srgb, var(--cw-gold) 60%, transparent);
}

.cw-result-actions {
    margin-top: 1.1rem;
    display: flex;
    gap: .6rem;
    justify-content: center;
}

.cw-btn {
    font-family: inherit;
    font-weight: 800;
    font-size: .92rem;
    cursor: pointer;
    border-radius: 999px;
    padding: .65rem 1.2rem;
    border: 1px solid transparent;
    transition: transform var(--transition-fast, .16s ease), background var(--transition-fast, .16s ease), border-color var(--transition-fast, .16s ease);
}

.cw-btn-primary {
    color: #fff;
    background: var(--cw-grad);
    box-shadow: 0 10px 24px color-mix(in srgb, var(--cw-primary) 40%, transparent);
}

    .cw-btn-primary:hover {
        transform: translateY(-2px);
    }

.cw-btn-ghost {
    color: var(--cw-text);
    background: transparent;
    border-color: var(--cw-border);
}

    .cw-btn-ghost:hover:not(:disabled) {
        background: color-mix(in srgb, var(--cw-primary) 14%, transparent);
        border-color: var(--cw-primary);
    }

    .cw-btn-ghost:disabled {
        opacity: .5;
        cursor: default;
    }

/* -------------------------------------------------- Motion -------------- */
@keyframes cw-rotate {
    to {
        transform: rotate(360deg);
    }
}

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

@keyframes cw-tick {
    0%, 100% {
        transform: rotate(0);
    }

    50% {
        transform: rotate(-7deg);
    }
}

@keyframes cw-pulse {
    0%, 100% {
        box-shadow: 0 12px 30px color-mix(in srgb, var(--cw-primary) 40%, transparent);
    }

    50% {
        box-shadow: 0 14px 42px color-mix(in srgb, var(--cw-secondary) 55%, transparent);
    }
}

@keyframes cw-twinkle {
    0%, 100% {
        opacity: .2;
        transform: scale(.8);
    }

    50% {
        opacity: .8;
        transform: scale(1.15);
    }
}

@keyframes cw-fade {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes cw-pop {
    0% {
        opacity: 0;
        transform: scale(.82) translateY(10px);
    }

    100% {
        opacity: 1;
        transform: none;
    }
}

@keyframes cw-bounce {
    0%, 100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-6px);
    }
}

@keyframes cw-confetti-fall {
    0% {
        transform: translateY(-20%) translateX(0) rotate(0);
        opacity: 0;
    }

    10% {
        opacity: 1;
    }

    100% {
        transform: translateY(420%) translateX(var(--dx)) rotate(var(--r));
        opacity: 0;
    }
}

@media (prefers-reduced-motion: reduce) {
    .cw-glow,
    .cw-spin,
    .cw-card::before,
    .cw-card::after,
    .cw-trophy,
    .cw-pointer.is-ticking svg {
        animation: none !important;
    }

    .cw-hub-spin,
    .cw-spin-dot {
        animation-duration: 1.4s;
    }
}

/* ───────────── Wheel switcher ───────────── */
.cw-switcher {
    width: 100%;
    max-width: 560px;
    margin: 0 auto 14px;
    padding: 6px;
    border-radius: 999px;
    background: linear-gradient(135deg, rgba(255,255,255,0.06), rgba(255,255,255,0.02)), rgba(13, 16, 32, 0.55);
    backdrop-filter: blur(14px) saturate(140%);
    -webkit-backdrop-filter: blur(14px) saturate(140%);
    border: 1px solid rgba(255,255,255,0.08);
    box-shadow: 0 10px 30px -12px rgba(0,0,0,0.55), inset 0 1px 0 rgba(255,255,255,0.06);
    overflow: hidden;
}

.cw-switcher-track {
    display: flex;
    gap: 6px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

    .cw-switcher-track::-webkit-scrollbar {
        display: none;
    }

.cw-switcher-pill {
    --pill-accent: #9B5DE5;
    position: relative;
    flex: 0 0 auto;
    scroll-snap-align: center;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 16px;
    border-radius: 999px;
    border: 1px solid transparent;
    background: transparent;
    color: rgba(255,255,255,0.72);
    font-family: 'Vazirmatn', system-ui, sans-serif;
    font-weight: 600;
    font-size: 0.86rem;
    cursor: pointer;
    white-space: nowrap;
    transition: background 220ms ease, color 220ms ease, transform 180ms ease, box-shadow 220ms ease, border-color 220ms ease;
}

    .cw-switcher-pill:hover:not(:disabled):not(.is-active) {
        color: #fff;
        background: rgba(255,255,255,0.05);
    }

    .cw-switcher-pill:active:not(:disabled) {
        transform: scale(0.97);
    }

    .cw-switcher-pill:disabled {
        opacity: 0.45;
        cursor: not-allowed;
    }

    .cw-switcher-pill.is-active {
        color: #fff;
        background: radial-gradient(120% 180% at 0% 0%, color-mix(in srgb, var(--pill-accent) 55%, transparent) 0%, transparent 60%), linear-gradient(135deg, color-mix(in srgb, var(--pill-accent) 90%, #000 0%), color-mix(in srgb, var(--pill-accent) 60%, #1a1030 50%));
        border-color: color-mix(in srgb, var(--pill-accent) 70%, transparent);
        box-shadow: 0 8px 24px -8px color-mix(in srgb, var(--pill-accent) 60%, transparent), inset 0 1px 0 rgba(255,255,255,0.18);
    }

.cw-switcher-icon {
    font-size: 1.05rem;
    line-height: 1;
}

.cw-switcher-icon-img {
    width: 18px;
    height: 18px;
    object-fit: contain;
}

.cw-switcher-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 0 8px rgba(255,255,255,0.9);
    animation: cw-pulse 1.4s ease-in-out infinite;
}

@keyframes cw-pulse {
    0%, 100% {
        opacity: 0.9;
        transform: scale(1);
    }

    50% {
        opacity: 0.4;
        transform: scale(0.7);
    }
}

/* Small screens: tighter pills */
@media (max-width: 480px) {
    .cw-switcher {
        margin-bottom: 10px;
    }

    .cw-switcher-pill {
        padding: 8px 12px;
        font-size: 0.8rem;
    }
}

.cw-rotator > canvas {
    width: 100% !important;
    height: 100% !important;
    display: block;
}
/* #endregion Spin wheel-page */



/* #region world cup Button */

/* =========================================
   استایل پایه کارت پیش‌بینی فوتبال (هماهنگ با بقیه دکمه‌ها)
========================================= */
.dash-tile--football {
    position: relative;
    display: block;
    width: 100%;
    border-radius: 24px;
    border: 1px solid var(--color-border-soft);
    overflow: hidden;
    cursor: pointer;
    text-align: right;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    background-color: #064e3b;
    box-shadow: 0 14px 40px rgba(15, 23, 42, 0.22);
}

    .dash-tile--football:hover {
        transform: translateY(-3px);
        box-shadow: 0 20px 55px rgba(15, 23, 42, 0.32);
    }


    /* =========================================
    لایه بک‌گراند (ترکیب عکس زمین و گرادیانت)
========================================= */
    .dash-tile--football::before {
        content: "";
        position: absolute;
        inset: 0;
        background-image: linear-gradient(to left, rgba(15, 23, 42, 0.85) 0%, rgba(15, 23, 42, 0.2) 100%), url('/assets/football-field.png');
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
        z-index: 0;
        /* اتصال انیمیشن: نام انیمیشن (bgZoom)، زمان حرکت رفت (6 ثانیه)، حرکت نرم و یکنواخت (linear)، تکرار ابدی (infinite) */
        animation: bgZoom 12s linear infinite;
    }
/* =========================================
   انیمیشن رفت و برگشتی زوم پس‌زمینه فوتبال
========================================= */
@keyframes bgZoom {
    0% {
        transform: scale(1); /* حالت عادی */
    }

    50% {
        transform: scale(1.08); /* زوم به جلو (۸ درصد بزرگتر) */
    }

    100% {
        transform: scale(1); /* بازگشت نرم به حالت عادی */
    }
}

/* =========================================
   تنظیمات محتوای روی کارت
========================================= */
.dash-tile--football .dash-tile__content {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    /*padding: 0.9rem 1.1rem;*/
}

/* =========================================
   استایل متن‌ها
========================================= */
.dash-tile--football .dash-tile__text {
    flex: 1;
    color: #ffffff;
}

    .dash-tile--football .dash-tile__text h3 {
        margin: 0 0 0.2rem 0;
        font-size: 1rem;
        font-weight: 800;
        text-shadow: 0 2px 4px rgba(0, 0, 0, 0.6);
    }

    .dash-tile--football .dash-tile__text p {
        margin: 0;
        font-size: 0.82rem;
        color: #e2e8f0;
        line-height: 1.5;
        text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6);
    }

/* =========================================
   بخش کادر عکس مدیا (سایز استاندارد 90 پیکسل)
========================================= */
.dash-tile--football .dash-tile__media {
    width: 90px;
    height: 90px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-left: 30px;
    flex-shrink: 0;
}

/* =========================================
   استایل اختصاصی عکس جام جهانی (بزرگ‌نمایی با Scale)
========================================= */
.dash-tile--football .dash-tile__img--trophy {
    position: absolute;
    width: 100%;
    height: 100%;
    object-fit: contain;
    z-index: 1;
    filter: drop-shadow(0 8px 12px rgba(0, 0, 0, 0.5));
    transform: scale(1.28);
    transform-origin: center center;
    transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}



/* =========================================
   واکنش‌گرایی موبایل
========================================= */
@media (max-width: 640px) {
    .dash-tile--football .dash-tile__media {
        width: 85px;
        height: 85px;
        margin-left: 5px;
    }

    /* برای کوچک شدن ۶۰ درصدی نسبت به حالت قبل، 
      مقدار scale را از 1.6 به 0.64 تغییر دادیم.
    */
    .dash-tile--football .dash-tile__img--trophy {
        transform: scale(0.74);
    }

    /* افکت هاور در موبایل (کمی بزرگتر از 0.64) */
    .dash-tile--football:hover .dash-tile__img--trophy {
        transform: scale(0.75);
    }

    /*  .dash-tile--football .dash-tile__content {
        padding: 0.75rem 0.85rem;
    }*/

    .dash-tile--football .dash-tile__text h3 {
        font-size: 0.95rem;
    }

    .dash-tile--football .dash-tile__text p {
        font-size: 0.78rem;
    }
}

/* #endregion world cup */

/* #region world cup Button  temporary*/

/* وضعیت غیرفعال پایه */
.dash-tile--disabled {
    cursor: not-allowed;
    pointer-events: none; /* جلوگیری از کلیک شدن کل دکمه */
}

    /* اعمال محو شدگی و سیاه‌سفید شدن فقط روی محتوا و بک‌گراند دکمه */
    .dash-tile--disabled .dash-tile__content,
    .dash-tile--disabled::before {
        opacity: 0.38;
        filter: grayscale(45%) blur(1.5px); /* بلور جزئی برای فوکوس بیشتر روی متن "به زودی" */
        transition: all 0.3s ease;
    }

/* استایل متن وسط دکمه فوتبال */
.dash-tile--football .dash-tile__center-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: #ffffff;
    font-size: 1.4rem;
    font-weight: 900;
    z-index: 10; /* قرارگیری بالاتر از محتوای محو شده */
    white-space: nowrap;
    text-shadow: 0 4px 15px rgba(0, 0, 0, 0.9), 0 1px 3px rgba(0, 0, 0, 0.5); /* سایه قوی‌تر برای خوانایی بهتر */
    pointer-events: none; /* برای اینکه مانع کلیک روی لایه‌های زیرین نشود */
}

/* نمایش متن "به زودی" فقط در حالتی که دکمه دیسیبل است (در صورت نیاز) */
.dash-tile:not(.dash-tile--disabled) .dash-tile__center-text {
    display: none;
}


/* کادر نگهدارنده: این باعث می‌شود متن دقیقاً وسط همین کادر (روی دکمه) بیفتد */
.dash-tile-wrapper {
    position: relative;
    width: 100%;
    display: block;
}

/* استایل متن وسط: کاملاً واضح، وسط‌چین و بدون تاثیرپذیری از دکمه */
.dash-tile__center-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%); /* تراز دقیق در مرکز */
    color: #ffffff !important; /* رنگ سفید کاملاً شفاف */
    font-size: 1.4rem;
    font-weight: 900;
    z-index: 10; /* قرارگیری بالاتر از دکمه */
    white-space: nowrap;
    opacity: 1 !important; /* جلوگیری قطعی از محو شدن */
    text-shadow: 0 4px 15px rgba(0, 0, 0, 0.9), 0 2px 5px rgba(0, 0, 0, 0.6); /* سایه قوی برای خوانایی عالی روی عکس */
    pointer-events: none; /* باعث می‌شود اگر کاربر روی متن کلیک کرد، کلیک به دکمه زیرین منتقل شود */
}


/* #endregion world cup Button  temporary*/



/* #region predictions*/
/* =========================================
   صفحه اصلی پیش‌بینی‌ها
========================================= */
.predictions-root {
    padding: 20px;
    direction: rtl;
    background: var(--color-bg); /* یا همان رنگ تیره پس‌زمینه شما */
    min-height: 100vh;
}

.predictions-header {
    text-align: center;
    margin-bottom: 30px;
}

.predictions-title {
    font-size: 1.8rem;
    font-weight: 900;
    color: var(--color-primary); /* سیان نئونی */
    text-shadow: 0 0 15px var(--color-primary-soft);
}

@media (max-width: 640px) {
    .predictions-title {
        font-size: 1.4rem;
        font-weight: 900;
    }
}

/* =========================================
   کارت مسابقه (Match Card)
========================================= */
.match-card {
    background: rgba(30, 41, 59, 0.7); /* رنگ تیره شیشه‌ای */
    border: 1px solid var(--color-border-soft);
    border-radius: 24px;
    padding: 20px;
    margin-bottom: 20px;
    position: relative;
    overflow: hidden;
    backdrop-filter: blur(10px);
}

    /* افکت چمن ملایم در پس‌زمینه کارت */
    .match-card::before {
        content: "";
        position: absolute;
        inset: 0;
        background: radial-gradient(circle at bottom left, rgba(16, 185, 129, 0.1), transparent 70%);
        z-index: 0;
        pointer-events: none;
    }

.match-card__header {
    text-align: center;
    margin-bottom: 15px;
    position: relative;
    z-index: 1;
}

.match-time {
    background: rgba(15, 23, 42, 0.5);
    padding: 5px 15px;
    border-radius: 999px;
    font-size: 0.85rem;
    color: var(--color-text-muted);
    border: 1px solid rgba(255,255,255,0.05);
}

/* =========================================
   بخش بدنه (تیم‌ها و نتیجه)
========================================= */
.match-card__body {
    display: flex;
    align-items: center;
    justify-content: space-around;
    position: relative;
    z-index: 1;
    margin-bottom: 20px;
}

.team {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    width: 30%;
}

.team__flag {
    width: 95px;
    height: 95px;
    border-radius: 50%;
    border: 3px solid var(--color-primary);
    overflow: hidden;
    box-shadow: 0 0 20px var(--color-primary-soft);
    background: #1e293b;
}

    .team__flag img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

.team__name {
    font-weight: 800;
    font-size: 1rem;
    color: #fff;
}

.match-score {
    text-align: center;
}

.score-value {
    font-size: 2.2rem;
    font-weight: 900;
    color: #fff;
    letter-spacing: 5px;
    font-family: 'Vazirmatn', sans-serif;
    text-shadow: 0 0 10px rgba(255,255,255,0.2);
}

/* =========================================
   بخش فوتر (تایمر و دکمه)
========================================= */
.match-card__footer {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 15px;
    position: relative;
    z-index: 1;
    border-top: 1px solid rgba(255,255,255,0.05);
    padding-top: 15px;
}

.match-timer {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--neon-yellow); /* رنگ زرد/نارنجی برای هشدار زمان */
    font-size: 0.9rem;
    font-weight: 700;
}

.timer-countdown {
    font-variant-numeric: tabular-nums;
    background: rgba(251, 146, 60, 0.1);
    padding: 2px 8px;
    border-radius: 6px;
}

.match-submit-btn {
    width: 100%;
    max-width: 250px;
    background: linear-gradient(135deg, var(--color-primary), var(--color-secondary));
    color: #fff;
    border: none;
    border-radius: 12px;
    padding: 12px;
    font-size: 1rem;
    font-weight: 800;
    cursor: pointer;
    box-shadow: 0 10px 20px rgba(0,0,0,0.3);
    transition: all 0.3s ease;
}

    .match-submit-btn:hover {
        transform: translateY(-3px);
        box-shadow: 0 15px 30px rgba(14, 165, 182, 0.4);
    }

/* ریسپانسیو برای موبایل‌های کوچک */
@media (max-width: 400px) {
    .team__flag {
        width: 80px;
        height: 80px;
    }

    .score-value {
        font-size: 1rem;
    }
}


.match-edit-text {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--color-primary); /* رنگ زرد/نارنجی برای هشدار زمان */
    font-size: 0.9rem;
    margin-bottom: 5px;
    font-weight: 700;
}

@media (max-width: 480px) {
    .match-edit-text {
        display: flex;
        align-items: center;
        gap: 8px;
        margin-bottom: 5px;
        color: var(--color-primary); /* رنگ زرد/نارنجی برای هشدار زمان */
        font-size: 0.65rem;
        font-weight: 700;
    }
}

/*scrollbar-width: thin;
    scrollbar-color: rgba(34,211,238,.55) transparent;
}*/

/* =========================================
   اصلاح لیست مسابقات (حذف اسکرول داخلی)
========================================= */
.match-list {
    /* max-height و overflow حذف شدند تا لیست با اسکرول اصلی صفحه کار کند */
    padding-bottom: 1rem;
    width: 100%;
    /* هیچ استایل اسکرولی اینجا قرار ندهید */
}

/* =========================================
   شناور کردن تب‌ها (Sticky Tabs)
========================================= */
/* توجه: اگر کلاس تب‌های شما در فایل Worldcup اسم دیگری دارد (مثلا .nav-tabs یا .tabs-container) نام کلاس زیر را تغییر دهید */
.tabs {
    position: sticky;
    top: 0; /* اگر سایت شما منوی بالای ثابت (Header) دارد، این مقدار را به ارتفاع هدر تغییر دهید. مثلا: top: 60px; */
    z-index: 100; /* تا همیشه روی کارت‌های مسابقه قرار بگیرد */
    background-color: var(--color-bg); /* حتما باید رنگ پس‌زمینه داشته باشد تا مسابقات از زیر آن دیده نشوند */
    padding: 10px 0;
    /* یک سایه ملایم به زیر تب اضافه می‌کنیم تا وقتی اسکرول می‌کنید، از محتوای زیرین متمایز شود */
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.3);
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.match-score {
    text-align: center;
    /* این دستور جلوی شکستن خط را می‌گیرد */
    white-space: nowrap;
    /* چون قالب سایت راست‌چین (RTL) است، برای اینکه اعداد نتیجه دقیقاً سر جایشان بمانند جهت را LTR می‌کنیم */
    direction: ltr;
}

.score-value {
    font-size: 2.2rem;
    font-weight: 900;
    color: #fff;
    letter-spacing: 5px;
    font-family: 'Vazirmatn', sans-serif;
    text-shadow: 0 0 10px rgba(255,255,255,0.2);
    /* محکم‌کاری برای جلوگیری از شکستن کاراکترها در فونت‌های درشت */
    white-space: nowrap;
}

/* ریسپانسیو برای موبایل‌های کوچک */
@media (max-width: 400px) {
    .team__flag {
        width: 80px;
        height: 80px;
    }

    .score-value {
        font-size: 1.8rem;
        /* در موبایل فاصله حروف را کمی کمتر می‌کنیم تا 10-10 کاملاً جا شود */
        letter-spacing: 3px;
    }
}
/* #endregion predictions*/

/* #region WorldCup*/

/* محدود کننده عرض برای جلوگیری از کش آمدن در دسکتاپ */
.games-container {
    max-width: 720px;
    margin: 0 auto;
    width: 100%;
}

/* استایل تب‌های بالای صفحه */
.games-tabs {
    display: flex;
    justify-content: center;
    margin-bottom: 1.5rem;
    background: rgba(15, 23, 42, 0.5);
    padding: 0.5rem;
    border-radius: 999px;
    border: 1px solid var(--color-border-soft);
    max-width: 600px;
    margin-inline: auto;
    flex-wrap: nowrap; /* Prevents wrapping to the second line */
    overflow-x: auto; /* Enables horizontal scrolling on small screens */
    -webkit-overflow-scrolling: touch; /* Smooth momentum scrolling on iOS */
    scrollbar-width: none; /* Hides the scrollbar in Firefox */
    gap: 4px; /* Keeps a nice space between buttons */
    padding-bottom: 4px; /* Optional: Gives a tiny bit of breathing room */
}

    .games-tabs::-webkit-scrollbar {
        display: none;
    }

.games-tab-btn {
    flex: 1;
    padding: 0.7rem 1rem;
    border-radius: 999px;
    border: none;
    background: transparent;
    color: var(--color-text-muted);
    font-weight: 800;
    font-size: 0.95rem;
    cursor: pointer;
    transition: all var(--transition-fast);
    white-space: nowrap; /* Prevents the text inside the button from breaking into two lines */
    flex-shrink: 0;
}

    .games-tab-btn.active {
        background: linear-gradient(135deg, var(--color-primary), var(--color-secondary));
        color: #ffffff;
        box-shadow: 0 4px 15px rgba(14, 165, 182, 0.3);
    }



/*.games-tabs {
    position: -webkit-sticky;*/ /* برای پشتیبانی بهتر در مرورگرهای قدیمی‌تر مثل سافاری */
/*position: sticky;*/
/* ۱. این مقدار مشخص می‌کند تب‌ها کجا بچسبند. اگر بالای سایت هدر ثابت ندارید، روی 0 بگذارید */
/*top: 0;*/
/* نکته: اگر سایت شما یک هدر ثابت (منوی بالا) دارد، این مقدار را به اندازه ارتفاع هدر تنظیم کنید؛ مثلاً: top: 60px; */
/* ۲. لایه بندی بالا تا تب‌ها همیشه روی کارت‌های مسابقه حرکت کنند و زیر آن‌ها نروند */
/*z-index: 100;*/
/* ۳. خیلی مهم: حتماً باید رنگ پس‌زمینه دقیقاً همرنگ پس‌زمینه اصلی صفحه باشد، وگرنه کارت‌ها از زیر متن تب دیده می‌شوند */
/*background-color: #1e293b;*/ /* این رنگ را همرنگ قالب سایت (var(--color-bg)) تنظیم کنید */
/* ۴. استایل‌های ظاهری برای زیباتر شدن زمان شناور بودن */
/*padding: 12px 0;
    margin-bottom: 20px;
    margin-top: 20px;*/
/* ایجاد یک سایه ملایم زیر تب‌ها تا وقتی روی کارت‌ها می‌آیند، حس شناور بودن و عمق به کاربر دست بدهد */
/*box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.4);
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}*/



.games-tabs {
    /* تنظیمات مشترک و حالت پیش‌فرض (موبایل / اندروید) */
    position: -webkit-sticky;
    position: sticky;
    z-index: 100;
    background-color: var(--color-bg); /* استفاده از متغیر رنگ قالب تا در روز/شب درست کار کند */
    padding: 12px 10px;
    margin-bottom: 20px;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.4);
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    /*border-radius: 16px;*/ /* کمی گرد شدن گوشه‌ها برای زیبایی بیشتر (اختیاری) */
    /* فاصله از بالا برای اندروید (موبایل) */
    top: 15px;
}

/* حالت مخصوص ویندوز (دسکتاپ و تبلت‌های بزرگ) */
@media (min-width: 768px) {
    .games-tabs {
        /* در دسکتاپ چون نوبار شما حدوداً 70-80 پیکسل جا می‌گیرد،
           ما فاصله را 100 پیکسل می‌گذاریم تا تب‌ها دقیقاً با کمی فاصله زیر نوبار قرار بگیرند.
           (اگر فاصله‌اش کم یا زیاد بود، همین عدد 100 را تغییر دهید)
        */
        top: 100px;
    }
}
/* #endregion WorldCup*/

/* #region leaderboard*/

/* پیام‌های وضعیت (لودینگ و خالی) */
.leaderboard-state-msg {
    padding: 2rem;
    color: var(--color-text-muted);
    text-align: center;
    display: flex;
    justify-content: center;
}

/* کانتینر اصلی جدول رده‌بندی */
.leaderboard-wrapper {
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
    padding: 0.5rem;
}

/* استایل پایه هر سطر کاربر */
.leaderboard-item {
    position: relative;
    isolation: isolate;
    display: flex;
    align-items: center;
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 16px;
    padding: 0.75rem 1.25rem;
    overflow: hidden;
    transition: all 0.25s ease;
}

/* لایه بنر پشت کارت (مثل بنر کادر اطلاعات کاربر در داشبورد) */
.leaderboard-item__bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    background-image: var(--lb-banner, linear-gradient(135deg, #1e1b4b, #4c1d95));
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

/* پوشش تیره‌ی گرادینی تا متن‌ها روی هر بنری خوانا بمانند */
.leaderboard-item__overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(90deg, rgba(7, 11, 28, .85) 0%, rgba(7, 11, 28, .6) 45%, rgba(7, 11, 28, .35) 100%), radial-gradient(circle at 92% 6%, rgba(168, 85, 247, .2), transparent 45%), radial-gradient(circle at 5% 95%, rgba(34, 211, 238, .18), transparent 50%);
    pointer-events: none;
}

/* محتوای کارت باید روی بنر قرار بگیرد */
.leaderboard-item > .leaderboard-user-info,
.leaderboard-item > .leaderboard-points {
    position: relative;
    z-index: 2;
}

/* بخش سمت راست: رتبه، آواتار و نام */
.leaderboard-user-info {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex: 1; /* اجازه می‌دهد فضای باقی‌مانده را پر کند */
    min-width: 0; /* جلوگیری از بیرون‌زدگی در فلکس‌باکس */
}

/* دایره رتبه کاربران (آپدیت شده برای 4 رقم) */
.leaderboard-rank-circle {
    min-width: 36px;
    height: 36px;
    padding: 0 0.4rem;
    border-radius: 999px; /* کپسولی برای اعداد بزرگتر */
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 900;
    font-size: 0.95rem;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: var(--color-text-muted);
    box-sizing: border-box;
    flex-shrink: 0;
}

/* رَپر آواتار با کادر تزئینی دور عکس (مثل کادر داشبورد) */
.leaderboard-avatar-wrap {
    position: relative;
    width: 42px;
    height: 42px;
    flex-shrink: 0;
    display: grid;
    place-items: center;
}

    /* کادر تزئینی بیرون آواتار */
    .leaderboard-avatar-wrap::before {
        content: "";
        position: absolute;
        inset: -11px;
        z-index: 2;
        background: var(--lb-frame, none) center / contain no-repeat;
        pointer-events: none;
    }

/* آواتار کاربر */
.leaderboard-avatar {
    position: relative;
    z-index: 1;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid rgba(255, 255, 255, 0.18);
    background: #1e293b;
    flex-shrink: 0;
}

/* نام کاربر (آپدیت شده برای جلوگیری از شکستن خط) */
.leaderboard-username {
    font-weight: 700;
    font-size: clamp(0.8rem, 2.5vw, 0.95rem);
    color: #ffffff;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 140px;
}

/* بخش سمت چپ: امتیاز کاربر */
.leaderboard-points {
    margin-right: auto;
    display: flex;
    align-items: center;
    gap: 0.3rem;
    background: rgba(14, 165, 182, 0.1);
    padding: 0.4rem 0.8rem;
    border-radius: 999px;
    border: 1px solid rgba(14, 165, 182, 0.2);
    font-weight: 800;
    color: var(--color-primary);
    font-size: 0.9rem;
    flex-shrink: 0;
}

/* لیبل کلمه "امتیاز" */
.leaderboard-points-label {
    font-size: 0.75rem;
    color: var(--color-text-muted);
    font-weight: 500;
}

/* =========================================
   استایل‌های اختصاصی نفرات اول تا سوم
========================================= */

/* نفر اول: طلایی — فقط حاشیه و درخشش (بنر پس‌زمینه را پر می‌کند) */
.rank-gold {
    border: 1px solid rgba(234, 179, 8, 0.6) !important;
    box-shadow: 0 4px 20px rgba(234, 179, 8, 0.18);
}

    .rank-gold .leaderboard-rank-circle {
        background: linear-gradient(135deg, #fef08a, #eab308);
        border: 1px solid #fef08a;
        color: #1e293b;
        box-shadow: 0 0 10px rgba(234, 179, 8, 0.4);
    }

/* نفر دوم: نقره‌ای */
.rank-silver {
    border: 1px solid rgba(148, 163, 184, 0.6) !important;
    box-shadow: 0 4px 18px rgba(148, 163, 184, 0.15);
}

    .rank-silver .leaderboard-rank-circle {
        background: linear-gradient(135deg, #f1f5f9, #94a3b8);
        border: 1px solid #f1f5f9;
        color: #1e293b;
        box-shadow: 0 0 10px rgba(148, 163, 184, 0.3);
    }

/* نفر سوم: برنزی */
.rank-bronze {
    border: 1px solid rgba(217, 119, 6, 0.55) !important;
    box-shadow: 0 4px 18px rgba(217, 119, 6, 0.15);
}

    .rank-bronze .leaderboard-rank-circle {
        background: linear-gradient(135deg, #fed7aa, #d97706);
        border: 1px solid #fed7aa;
        color: #1e293b;
        box-shadow: 0 0 10px rgba(217, 119, 6, 0.3);
    }

/* =========================================
       کادر شناور رتبه کاربر فعلی
========================================= */
.current-user-sticky-card {
    position: fixed;
    bottom: 24px;
    left: 50%;
    transform: translateX(-50%);
    width: min(100%, 880px);
    max-width: calc(100% - 32px);
    z-index: 99;
    border-radius: var(--radius-xl, 18px);
    padding: 12px 16px;
    direction: rtl;
    transition: all 0.3s ease;
}

    .current-user-sticky-card .lb-item-content {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
    }

    .current-user-sticky-card .lb-user-info {
        display: flex;
        align-items: center;
        gap: 12px;
        flex: 1;
    }

    .current-user-sticky-card .lb-avatar {
        width: 45px;
        height: 45px;
        border-radius: 50%;
        border: 2px solid var(--color-primary);
    }

    .current-user-sticky-card .lb-details {
        display: flex;
        flex-direction: column;
        font-weight: 800;
        color: #fff;
    }

    .current-user-sticky-card .lb-sub {
        font-size: 0.75rem;
        opacity: 0.7;
        font-weight: 400;
    }

    .current-user-sticky-card .rank-badge {
        background: var(--color-primary);
        color: #fff;
        padding: 5px 12px;
        border-radius: 8px;
        font-weight: 900;
    }

    .current-user-sticky-card .lb-score {
        display: flex;
        flex-direction: column;
        align-items: flex-end;
        color: var(--color-primary);
    }

    .current-user-sticky-card .score-val {
        font-weight: 900;
        font-size: 1.2rem;
    }

    .current-user-sticky-card .score-lbl {
        font-size: 0.7rem;
        opacity: 0.8;
    }

/* =========================================
   ریسپانسیو و بهینه‌سازی موبایل
========================================= */

/* موبایل‌های کوچک (تنظیمات لیست اصلی) */
@media (max-width: 480px) {
    .leaderboard-item {
        padding: 0.6rem 0.6rem;
    }

    .leaderboard-user-info {
        gap: 0.6rem;
    }

    .leaderboard-avatar,
    .leaderboard-avatar-wrap {
        width: 36px;
        height: 36px;
    }

        .leaderboard-avatar-wrap::before {
            inset: -10px;
        }

    .leaderboard-points {
        padding: 0.35rem 0.6rem;
        font-size: 0.8rem;
        margin-left: 2px;
    }

    .leaderboard-username {
        max-width: 150px;
    }
}

/* کادر شناور: تنظیم برای بالاتر قرار گرفتن از Bottom Navigation */
@media (max-width: 768px) {
    .current-user-sticky-card {
        max-width: calc(100% - 24px);
        bottom: 85px; /* فاصله مناسب از نوار پایین */
        padding: 10px 14px;
    }

        .current-user-sticky-card .lb-avatar {
            width: 40px;
            height: 40px;
        }

        .current-user-sticky-card .score-val {
            font-size: 1.05rem;
        }
}

/* #endregion leaderboard*/


/* #region new part of predictions*/
/* =========================================
   تغییرات فوتر کارت مسابقه (دکمه‌های کنار هم)
========================================= */
.match-card__actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    width: 100%;
    margin-top: 5px;
}

.match-submit-btn {
    flex: 1; /* دکمه ثبت نیمی از عرض را می‌گیرد */
}

/* دکمه نمایش شرکت کنندگان (سمت راست) */
.match-partic-btn {
    flex: 1;
    background: rgba(255, 255, 255, 0.05);
    color: var(--color-text);
    border: 1px solid var(--color-border-soft);
    border-radius: 12px;
    padding: 12px;
    font-size: 0.9rem;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.3s ease;
}

    .match-partic-btn:hover {
        background: rgba(34, 211, 238, 0.1);
        border-color: var(--color-primary);
        color: var(--color-primary);
    }


/* =========================================
   پنجره (مودال) لیست شرکت‌کنندگان
========================================= */
.partic-overlay {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.8);
    backdrop-filter: blur(8px);
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    direction: rtl;
}

.partic-modal {
    background: var(--color-surface);
    border: 1px solid var(--color-border-soft);
    border-radius: 24px;
    width: 100%;
    max-width: 480px;
    max-height: 85vh;
    display: flex;
    flex-direction: column;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
    overflow: hidden;
    animation: resultSlideUp 0.3s ease-out;
}

/* هدر مودال */
.partic-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.25rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.partic-title {
    margin: 0;
    font-size: 1.15rem;
    font-weight: 900;
    color: var(--color-primary);
}

.partic-close {
    background: transparent;
    border: none;
    color: var(--color-text-muted);
    font-size: 1.8rem;
    line-height: 1;
    cursor: pointer;
    transition: color 0.2s;
}

    .partic-close:hover {
        color: var(--color-error);
    }

/* هدر تیم‌ها داخل مودال */
.partic-teams-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1.25rem;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.03), transparent);
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.partic-team {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    width: 35%;
}

    .partic-team img {
        width: 52px;
        height: 52px;
        border-radius: 50%;
        border: 2px solid var(--color-border-soft);
        object-fit: cover;
        background: var(--color-bg);
    }

    .partic-team span {
        font-size: 0.95rem;
        font-weight: 800;
        color: var(--color-text);
    }

.partic-vs {
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--color-text-muted);
    background: rgba(255, 255, 255, 0.05);
    padding: 0.3rem 0.8rem;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.05);
}

/* لیست کاربران */
.partic-list {
    flex: 1;
    overflow-y: auto;
    padding: 1rem 1.25rem;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.partic-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.05);
    padding: 0.75rem 1rem;
    border-radius: 16px;
    transition: background 0.2s;
}

    .partic-item:hover {
        background: rgba(255, 255, 255, 0.05);
    }

.partic-user {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.partic-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: cover;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.partic-name {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--color-text);
}

/* امتیاز پیش‌بینی شده: LTR برای نمایش صحیح اعداد مثل 0-2 */
.partic-score {
    font-size: 1.15rem;
    font-weight: 900;
    color: var(--color-primary);
    letter-spacing: 2px;
    direction: ltr;
    background: rgba(14, 165, 182, 0.1);
    padding: 0.2rem 0.6rem;
    border-radius: 8px;
}

/* ریسپانسیو موبایل */
@media (max-width: 480px) {
    .match-card__actions {
        flex-direction: column;
    }

    .match-submit-btn, .match-partic-btn {
        width: 100%;
        max-width: 100%;
    }
}


/* فوتر کارت که حالا دکمه‌ها را مدیریت می‌کند */
.match-card__actions {
    display: flex;
    align-items: center;
    justify-content: center; /* مرکزچین کردن دکمه ثبت */
    position: relative;
    width: 100%;
    margin-top: 15px;
}

/* دکمه ثبت پیش‌بینی (همان وسط باقی می‌ماند) */
.match-submit-btn {
    width: auto;
    padding: 10px 30px; /* اندازه و جایگاه قبلی */
}

/* دکمه جدید: کوچک، گوشه سمت راست */
.match-partic-btn {
    position: absolute;
    right: 0;
    background: transparent;
    border: 1px solid var(--color-border-soft);
    color: var(--color-text-muted);
    padding: 6px 12px;
    font-size: 0.75rem; /* کوچک */
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.3s;
}

    .match-partic-btn:hover {
        border-color: var(--color-primary);
        color: var(--color-primary);
    }





/* تنظیمات پایه‌ای دکمه‌ها در حالت عادی (اگر قبلاً gap ندارند اضافه کنید) */
.match-card__actions {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px; /* ایجاد فاصله بین دکمه‌ها */
    position: relative;
    width: 100%;
    margin-top: 15px;
}

/* ریسپانسیو موبایل - اصلاح شده */
@media (max-width: 576px) {
    .match-card__actions {
        flex-direction: column; /* دکمه‌ها زیر هم قرار بگیرند */
        gap: 12px; /* فاصله بین دکمه‌ها وقتی زیر هم هستند */
    }

    .match-submit-btn,
    .match-partic-btn {
        width: 100%;
        max-width: 100%;
        box-sizing: border-box; /* جلوگیری از بیرون‌زدگی دکمه از کادر */
        margin: 0 !important; /* حذف مارجین‌های اضافی که باعث بهم‌ریختگی می‌شوند */
    }
}


/* =========================================
   کادر اکشن‌ها (دربرگیرنده دکمه‌ها و نتیجه)
========================================= */
.match-card__actions {
    display: flex;
    align-items: center;
    justify-content: center; /* مرکزچین کردن دکمه ثبت یا باکس نتیجه */
    position: relative;
    width: 100%;
    margin-top: 15px;
    min-height: 45px; /* جلوگیری از پرش ارتفاع وقتی دکمه شناور است */
}

/* =========================================
   دکمه ثبت پیش‌بینی (وسط)
========================================= */
.match-submit-btn {
    width: 100%;
    max-width: 250px;
    background: linear-gradient(135deg, var(--color-primary), var(--color-secondary));
    color: #fff;
    border: none;
    border-radius: 12px;
    padding: 10px 30px;
    font-size: 1rem;
    font-weight: 800;
    cursor: pointer;
    box-shadow: 0 10px 20px rgba(0,0,0,0.3);
    transition: all 0.3s ease;
    z-index: 1; /* بالاتر از پس‌زمینه */
}

    .match-submit-btn:hover {
        transform: translateY(-3px);
        box-shadow: 0 15px 30px rgba(14, 165, 182, 0.4);
    }

/* =========================================
   باکس سبز نتیجه (وسط - جایگزین دکمه ثبت)
========================================= */
/* --- ۱. ساختار پایه (ابعاد دقیق دکمه شما) --- */

/* --- Wrapper handles the stacking of prediction and points --- */
.user-prediction-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    /* Let it grow up to 250px on desktop, but shrink on mobile */
    max-width: 280px;
    border-radius: 12px;
    animation: fadeIn 0.4s ease-out;
    box-sizing: border-box;
    overflow: hidden; /* Keeps background neat */
}

/* --- The top part (Your original design) --- */
.user-prediction-box {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap; /* Allows text to wrap on tiny mobile screens */
    gap: 8px;
    width: 100%;
    padding: 10px 15px;
    font-weight: 800;
    font-size: 0.95rem;
    text-align: center;
}

/* --- The score badge --- */
.user-prediction-wrapper .score-ltr {
    direction: ltr;
    font-size: 1.1rem;
    font-weight: 900;
    color: #ffffff;
    letter-spacing: 2px;
    padding: 2px 10px;
    border-radius: 8px;
    white-space: nowrap; /* Prevents the score itself from breaking into two lines */
}

/* --- The newly added points text --- */
.user-prediction-points {
    width: 100%;
    text-align: center;
    font-size: 0.75rem;
    font-weight: 600;
    padding: 6px;
    /* Uses a semi-transparent dark overlay to separate it from the score */
    background: rgba(0, 0, 0, 0.05);
}

    .user-prediction-points strong {
        font-size: 0.9rem;
        font-weight: 900;
    }

/* --- Dynamic Colors --- */
/* Success */
.prediction-success {
    background: linear-gradient( 135deg, rgba(34, 197, 94, 0.08), rgba(22, 163, 74, 0.14) );
    border: 1px solid rgba(34, 197, 94, 0.22);
    color: #16a34a;
}

    .prediction-success .score-ltr {
        background: rgba(34, 197, 94, 0.15);
    }

    .prediction-success .user-prediction-points {
        color: #16a34a;
        font-weight: 600;
    }

/* Warning / Partial */
.prediction-warning {
    background: rgba(34, 197, 94, 0.08);
    border: 1px solid rgba(34, 197, 94, 0.18);
    color: #15803d;
}

    .prediction-warning .score-ltr {
        background: rgba(34, 197, 94, 0.14);
    }

    .prediction-warning .user-prediction-points {
        color: #166534;
    }

/* Danger / Wrong */
.prediction-danger {
    background: rgba(239, 68, 68, 0.15);
    border: 1px solid rgba(239, 68, 68, 0.4);
    color: #ef4444;
}

    .prediction-danger .score-ltr {
        background: rgba(239, 68, 68, 0.6);
    }

    .prediction-danger .user-prediction-points {
        color: #991b1b;
    }

/* Neutral / Waiting */
.prediction-neutral {
    background: rgba(107, 114, 128, 0.15);
    border: 1px solid rgba(107, 114, 128, 0.4);
    color: #6b7280;
}

    .prediction-neutral .score-ltr {
        background: rgba(107, 114, 128, 0.6);
    }

    .prediction-neutral .user-prediction-points {
        color: #374151;
    }

/* =========================================
   دکمه شرکت‌کنندگان (کوچک، گوشه راست ثابت)
========================================= */
.match-partic-btn {
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%); /* تراز دقیق عمودی */
    background: transparent;
    color: var(--color-text-muted);
    border: 1px solid var(--color-border-soft);
    border-radius: 8px;
    padding: 6px 12px;
    font-size: 0.75rem; /* فونت ریزتر */
    font-weight: 700;
    cursor: pointer;
    transition: all 0.3s ease;
    z-index: 2; /* قرارگیری روی سایر عناصر در صورت تداخل */
}

    .match-partic-btn:hover {
        background: rgba(34, 211, 238, 0.1);
        border-color: var(--color-primary);
        color: var(--color-primary);
    }

/* =========================================
   ریسپانسیو موبایل (کوچک شدن متناسب همه چیز)
========================================= */
@media (max-width: 576px) {
    /* کوچک‌تر کردن فاصله و پدینگ کادر کلی */
    .match-card {
        padding: 15px;
    }

    /* کوچک‌تر شدن پرچم‌ها */
    .team__flag {
        width: 65px;
        height: 65px;
    }

    /* کوچک‌تر شدن نام تیم */
    .team__name {
        font-size: 0.85rem;
    }

    /* کوچک‌تر شدن امتیاز */
    .score-value {
        font-size: 1.6rem;
    }

    /* متناسب‌سازی دکمه ثبت پیش‌بینی در موبایل */
    .match-submit-btn {
        max-width: 170px;
        padding: 8px 15px;
        font-size: 0.85rem;
    }

    /* متناسب‌سازی کادر سبز نتیجه در موبایل */
    .user-prediction-success {
        max-width: 170px;
        padding: 8px 15px;
        font-size: 0.85rem;
    }

    /* دکمه شرکت‌کنندگان همچنان سمت راست است اما فشرده‌تر می‌شود */
    .match-partic-btn {
        padding: 5px 8px;
        font-size: 0.7rem;
    }
}

/* تنظیمات برای موبایل‌های خیلی کوچک (مانند آیفون‌های قدیمی) */
@media (max-width: 400px) {
    .team__flag {
        width: 55px;
        height: 55px;
    }

    .score-value {
        font-size: 1.4rem;
    }

    .match-submit-btn,
    .user-prediction-success {
        max-width: 140px; /* جمع‌وجورتر برای جا دادن دکمه کناری */
        font-size: 0.8rem;
    }

    .match-partic-btn {
        padding: 4px 6px;
        font-size: 0.65rem;
    }
}

/* =========================================
   ریسپانسیو موبایل (نسبت 75 به 25 در یک ردیف)
========================================= */
@media (max-width: 576px) {
    /* کوچک‌تر کردن فاصله و پدینگ کادر کلی */
    .match-card {
        padding: 15px;
    }

    /* کوچک‌تر شدن پرچم‌ها و متن‌ها */
    .team__flag {
        width: 65px;
        height: 65px;
    }

    .team__name {
        font-size: 0.85rem;
    }

    .score-value {
        font-size: 1.6rem;
    }

    /* تنظیم کادر اکشن‌ها برای نمایش در یک خط */
    .match-card__actions {
        display: flex;
        flex-direction: row; /* قرارگیری در یک ردیف */
        justify-content: space-between;
        align-items: center;
        gap: 8px; /* فاصله بین دکمه‌ها */
        width: 100%;
    }

    /* دکمه ثبت پیش‌بینی و باکس سبز نتیجه (اختصاص 75% فضا) */
    .match-submit-btn,
    .user-prediction-success {
        flex: 0 0 calc(75% - 4px); /* 75 درصد منهای نصف فاصله (gap) */
        max-width: none; /* لغو محدودیت عرض دسکتاپ */
        width: 100%;
        margin: 0;
        padding: 10px 15px;
        font-size: 0.85rem;
    }

    /* دکمه شرکت‌کنندگان (اختصاص 25% فضا) */
    .match-partic-btn {
        position: static; /* لغو حالت گوشه (absolute) در دسکتاپ */
        transform: none; /* لغو تراز عمودی دسکتاپ */
        flex: 0 0 calc(25% - 4px); /* 25 درصد منهای نصف فاصله (gap) */
        width: 100%;
        margin: 0;
        padding: 10px 2px;
        font-size: 0.65rem; /* فونت ریزتر تا در کادر کوچک جا شود */
        text-align: center;
        white-space: nowrap; /* جلوگیری از رفتن کلمه به خط دوم */
        overflow: hidden; /* جلوگیری از بیرون زدگی */
        text-overflow: ellipsis; /* اگر جا نشد سه نقطه شود */
    }
}

/* تنظیمات برای موبایل‌های خیلی کوچک (مانند آیفون‌های قدیمی) */
@media (max-width: 400px) {
    .team__flag {
        width: 55px;
        height: 55px;
    }

    .score-value {
        font-size: 1.4rem;
    }

    .match-submit-btn,
    .user-prediction-success {
        font-size: 0.75rem;
        padding: 8px 10px;
    }

    .match-partic-btn {
        font-size: 0.6rem;
        padding: 8px 0;
    }
}

.modal-rules-container {
    display: grid;
    /* اجبار به ساخت ۲ ستون مساوی در همه نمایشگرها (حتی موبایل) */
    grid-template-columns: repeat(2, 1fr);
    gap: 6px; /* فاصله کمتر برای موبایل */
    margin: 8px 12px 12px 12px;
    padding: 8px;
    background-color: rgba(255, 255, 255, 0.04);
    border-radius: 10px;
}

.rule-badge {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 6px 6px; /* پدینگ مینی‌مال‌تر برای جا شدن در صفحه موبایل */
    background-color: rgba(0, 0, 0, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 6px;
    /* سایز فونت بهینه‌شده برای موبایل */
    font-size: 0.68rem;
}

.rule-name {
    color: var(--color-text-muted, #b3b3b3);
    text-align: right;
    white-space: nowrap;
    overflow: hidden;
    /* اگر متن خیلی طولانی بود، به صورت سه نقطه (...) کوتاه می‌شود تا کادر خراب نشود */
    text-overflow: ellipsis;
}

.rule-points {
    color: #4caf50;
    font-weight: 700;
    direction: ltr;
    margin-right: 4px;
    white-space: nowrap;
}

/* اگر تعداد قوانین فرد بود، آیتم آخر کل ردیف را پر کند */
.modal-rules-container .rule-badge:last-child:nth-child(odd) {
    grid-column: span 2;
}

/* 🖥️ برای دسکتاپ و پنجره‌های بزرگتر (عرض بیشتر از 480 پیکسل) فونت و فاصله‌ها کمی بزرگتر می‌شوند */
@media (min-width: 480px) {
    .modal-rules-container {
        gap: 10px;
        margin: 8px 16px 16px 16px;
        padding: 12px;
    }

    .rule-badge {
        padding: 8px 12px;
        font-size: 0.78rem;
    }

    .rule-points {
        margin-right: 8px;
    }
}
/* #endregion new part of predictions*/

/* #region PredictionModal */

/* کادر اصلی مودال (کانتینر سفید/خاکستری بیرونی) */
.pred-modal-card {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    padding: 1.5rem;
    cursor: default; /* لغو حالت کلیک برای کل کادر */
    background: var(--color-surface-soft);
    border: 1px solid var(--color-border-soft);
    border-radius: 24px;
    box-shadow: 0 14px 40px rgba(15, 23, 42, 0.22);
}

/* کانتینر اصلی بنر (دارای ارتفاع فشرده با پس‌زمینه چمن متحرک) */
.pred-match-banner {
    position: relative; /* ضروری برای وسط‌چین کردن مطلق عکس VS */
    overflow: hidden; /* جلوگیری از بیرون زدن انیمیشن زوم پس‌زمینه */
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 95px; /* ارتفاع کمتر و جمع‌وجورتر */
    padding: 0.75rem 1.5rem; /* فاصله مناسب از چپ و راست */
    border-radius: 18px;
    color: #ffffff; /* رنگ متن سفید برای خوانایی روی پس‌زمینه تاریک چمن */
    box-shadow: var(--shadow-strong, 0 10px 28px rgba(15, 23, 42, 0.2));
}

    /* پس‌زمینه متحرک چمن فوتبال مشابه دکمه صفحه اصلی */
    .pred-match-banner::before {
        content: "";
        position: absolute;
        inset: 0;
        background-image: linear-gradient(to left, rgba(15, 23, 42, 0.85) 0%, rgba(15, 23, 42, 0.2) 100%), url('/assets/football-field.png');
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
        z-index: 0; /* در لایه زیرین محتوا */
        animation: bgZoom 12s linear infinite;
    }

/* باکس اختصاصی هر تیم */
.pred-team {
    position: relative;
    z-index: 1; /* قرارگیری بالاتر از لایه پس‌زمینه متحرک */
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.4rem;
    font-weight: 800;
    font-size: 0.95rem;
    width: 35%; /* محدود کردن عرض برای جلوگیری از برخورد با عکس VS */
}

    /* پرچم تیم‌ها (بزرگ‌تر شده) */
    .pred-team img {
        width: 58px;
        height: 58px;
        object-fit: contain;
    }

    /* نام تیم‌ها */
    .pred-team span {
        font-size: 1.05rem;
        font-weight: 800;
        color: #ffffff; /* تنظیم رنگ سفید ثابت برای خوانایی روی چمن در هر دو تم */
        text-shadow: 0 2px 4px rgba(0, 0, 0, 0.6); /* سایه نرم برای خوانایی بی‌نظیر */
    }

/* عکس توپ یا همان المان VS (دقیقاً در مرکز، بدون هیچ استروک، کادر یا سایه اضافی) */
.pred-vs {
    position: absolute; /* قفل شدن در مرکز مستقل از طول نام تیم‌ها */
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%); /* تراز فوق‌العاده دقیق در مرکز طولی و عرضی */
    width: 70px; /* سایز توپ */
    height: 70px;
    object-fit: contain; /* رندر کامل عکس بدون کشیدگی یا برش خوردن */
    z-index: 2;
    border: none;
    box-shadow: none;
    outline: none;
    background-color: transparent;
}

/* ردیف باکس‌های امتیازها */
.pred-scores {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 1.2rem;
    direction: ltr; /* قرارگیری صحیح خط تیره و اعداد چپ به راست */
}

/* اینپوت‌های امتیاز (عرض بیشتر و فقط عدد) */
.pred-input {
    width: 85px;
    padding: 12px;
    text-align: center;
    font-size: 2rem; /* فونت بزرگ و خوانا */
    font-weight: 900;
    color: var(--color-text);
    background: var(--color-surface);
    border: 2px solid var(--color-border);
    border-radius: 14px;
    outline: none;
    transition: border-color var(--transition-fast, 0.2s), box-shadow var(--transition-fast, 0.2s);
    -moz-appearance: textfield; /* مخفی کردن دکمه‌های بالا/پایین پیش‌فرض مرورگر */
}

    .pred-input::-webkit-outer-spin-button,
    .pred-input::-webkit-inner-spin-button {
        -webkit-appearance: none;
        margin: 0;
    }

    .pred-input:focus {
        border-color: var(--color-primary);
        box-shadow: 0 0 0 3px var(--color-primary-soft);
    }

/* خط تیره بین دو امتیاز */
.pred-divider {
    font-size: 2.5rem;
    font-weight: 900;
    color: var(--color-text-muted);
}

/* دکمه ثبت پیش‌بینی */
.btn-submit-prediction {
    width: 100%;
    padding: 1rem;
    border-radius: 16px;
    font-size: 1.05rem;
    font-weight: 800;
    background: linear-gradient(135deg, var(--color-primary), var(--color-secondary));
    color: #ffffff;
    border: none;
    cursor: pointer;
    box-shadow: 0 10px 28px rgba(15, 23, 42, 0.35);
    transition: transform var(--transition-fast, 0.2s), box-shadow var(--transition-fast, 0.2s);
}

    .btn-submit-prediction:hover {
        transform: translateY(-2px);
        box-shadow: 0 16px 40px rgba(15, 23, 42, 0.55);
    }

/* انیمیشن بهینه و روان زوم پس‌زمینه */
@keyframes bgZoom {
    0% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.08);
    }

    100% {
        transform: scale(1);
    }
}

/* =========================================
   واکنش‌گرایی (Responsive) برای موبایل
   ========================================= */
@media (max-width: 480px) {
    .pred-modal-card {
        padding: 1rem;
    }

    .pred-match-banner {
        padding: 0.5rem 1rem;
        min-height: 85px; /* کاهش جزئی ارتفاع کادر در موبایل */
    }

    /*.pred-team img {
        width: 48px;*/ /* بهینه‌سازی سایز پرچم در موبایل */
    /*height: 48px;
    }

    .pred-vs {
        width: 50px;*/ /* متناسب‌سازی سایز توپ در موبایل */
    /*height: 50px;
    }*/
    .partic-team img {
        width: 36px;
        height: 36px;
    }

    .partic-team span {
        font-size: 0.75rem;
    }

    .partic-vs {
        font-size: 0.65rem;
        padding: 0.2rem 0.6rem;
        margin-top: 7px;
    }

    .pred-input {
        width: 75px;
        font-size: 1.6rem;
    }
}

.partic-logInButton {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px; /* ایجاد فاصله بین دکمه‌ها */
    position: relative;
    width: 100%;
    margin-top: 5px;
}
/* #endregion PredictionModal */

/* #region Responsive FlagIcon And Name */
/* والد را از بالا تراز می‌کنیم تا پرچم‌ها تکان نخورند */
.match-card__body {
    display: flex;
    align-items: flex-start; /* جایگزین center */
    justify-content: space-around;
    position: relative;
    z-index: 1;
    margin-bottom: 20px;
}

/* به امتیاز وسط کمی فاصله از بالا می‌دهیم تا با پرچم‌ها در یک راستا قرار بگیرد */
.match-score {
    text-align: center;
    margin-top: 15px;
}

.team {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    width: 38%; /* افزایش از 30 به 38 درصد تا «آفریقای جنوبی» جا بشود */
}

/* تنظیمات نام تیم برای جلوگیری از شکستن بی‌مورد */
.team__name {
    font-weight: 800;
    font-size: 0.95rem; /* کمی بهینه‌تر برای جا شدن در کادر */
    color: #fff;
    text-align: center;
    width: 100%;
    /* تنظیمات هوشمند شکستن متن: کلمات در حالت عادی نمی‌شکنند مگر کادر کاملاً پر شود */
    white-space: normal;
    word-break: normal;
    overflow-wrap: break-word;
    line-height: 1.4;
}



/* کانتینر اصلی دربرگیرنده دو تیم در مودال شرکت‌کنندگان */
.partic-teams-top {
    display: flex;
    align-items: flex-start; /* میخکوب کردن پرچم‌ها به بالا */
    justify-content: space-between;
    padding: 1rem 1.25rem;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.03), transparent);
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    width: 100%;
    gap: 10px;
}

/* کانتینر هر تیم */
.partic-team {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex: 1;
    min-width: 0; /* جلوگیری از بیرون زدن متن */
    gap: 8px; /* فاصله بین پرچم و اسم */
}

    /* پرچم کوچک شده و دایره‌ای (هماهنگ با تم کارت‌ها) */
    .partic-team img {
        width: 42px;
        height: 42px;
        border-radius: 50%;
        border: 2px solid var(--color-primary);
        object-fit: cover;
        background: var(--color-bg);
        flex-shrink: 0;
    }

    /* نام تیم در مودال شرکت‌کنندگان */
    .partic-team span {
        font-size: 0.85rem;
        font-weight: 800;
        color: var(--color-text);
        text-align: center;
        width: 100%;
        /* شکستن متن مشابه کارت اصلی */
        white-space: normal;
        word-break: normal;
        overflow-wrap: break-word;
        line-height: 1.4;
    }

/* استایل نوشته وسط (پیش‌بینی‌ها) */
.partic-vs {
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--color-text-muted);
    background: rgba(255, 255, 255, 0.05);
    padding: 0.3rem 0.8rem;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.05);
    flex-shrink: 0;
    margin-top: 8px; /* تنظیم تراز با مرکز پرچم 42 پیکسلی */
}




/* کانتینر اصلی هر تیم */
.pred-team {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start; /* عکس و متن را از بالاترین نقطه شروع به چیدن می‌کند */
    gap: 8px; /* فاصله بین عکس و متن به حالت عادی برگشت */
    width: 35%;
    text-align: center;
    /* این خط بسیار مهم است: باعث می‌شود کانتینر تیم همیشه از بالای دیو مادر تراز شود */
    align-self: flex-start;
}

    /* استایل عکس پرچم */
    .pred-team img {
        width: 58px;
        height: 58px;
        object-fit: cover;
        border-radius: 50%;
        flex-shrink: 0;
        display: block;
    }

/* استایل متن نام تیم */
.pred-team1 {
    /* position: absolute کاملا حذف شد تا ارتفاع متن محاسبه شود */
    font-size: 0.95rem;
    font-weight: 800;
    color: #ffffff;
    width: 100%;
    word-wrap: break-word;
    overflow-wrap: break-word;
    word-break: break-word;
    line-height: 1.2;
    display: block;
}
/* #endregion Responsive FlagIcon And Name  */

/* #region My Predictions Summary Banner */
/* =========================================
   My Predictions Summary Banner
========================================= */
.my-predictions-summary {
    margin-bottom: 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 1.2rem;
    text-align: center;
}

/* اجبار کادر قوانین به قرارگیری در یک ردیف برای ویندوز و موبایل */
.rules-inline-row {
    display: flex;
    flex-wrap: nowrap; /* کلید اصلی برای جلوگیری از شکستن خط */
    align-items: center;
    justify-content: space-between;
    gap: 4px;
    background-color: rgba(255, 255, 255, 0.04);
    padding: 8px;
    border-radius: 12px;
    overflow-x: auto; /* اگر صفحه خیلی کوچک بود، اسکرول افقی نرم بخورد */
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none; /* مخفی کردن اسکرول‌بار در فایرفاکس */
}

    /* مخفی کردن اسکرول‌بار در مرورگرهای کروم و سافاری */
    .rules-inline-row::-webkit-scrollbar {
        display: none;
    }

    .rules-inline-row .rule-badge {
        flex: 1 0 auto; /* جلوگیری از فشرده شدن بیش از حد المان‌ها */
        margin: 0;
        padding: 6px 10px;
        font-size: 0.75rem;
    }

/* بخش آمار و ارقام کاربر */
.user-stats-details p {
    color: var(--color-text-muted);
    font-size: 0.95rem;
    margin-bottom: 0.8rem;
    margin-top: 0;
}

.stats-badges {
    display: flex;
    justify-content: center;
    gap: 0.6rem;
    flex-wrap: wrap;
    margin-bottom: 1.2rem;
}

/* استایل‌های برچسب‌های وضعیت (بر اساس متغیرهای رنگی سیستم شما) */
.stat-chip {
    font-size: 0.85rem;
    font-weight: 700;
    padding: 6px 12px;
    border-radius: 999px;
}

    .stat-chip.success {
        background: rgba(16, 185, 129, 0.15);
        color: #10b981;
        border: 1px solid rgba(16, 185, 129, 0.4);
    }

    .stat-chip.warning {
        background: rgba(245, 158, 11, 0.15);
        color: #f59e0b;
        border: 1px solid rgba(245, 158, 11, 0.4);
    }

    .stat-chip.error {
        background: rgba(239, 68, 68, 0.15);
        color: #ef4444;
        border: 1px solid rgba(239, 68, 68, 0.4);
    }

    .stat-chip.total {
        background: var(14, 165, 182,0.15);
        color: var(--color-primary);
        border: 1px solid rgba(14, 165, 182, 0.4);
    }

/* نمایش امتیاز کل */
.total-score-text {
    font-size: 1.2rem;
    font-weight: 800;
    color: var(--color-text);
    margin: 0;
}

    .total-score-text span {
        color: var(--color-primary);
        font-size: 1.6rem;
        font-weight: 900;
    }

/* بهینه‌سازی فونت‌ها برای موبایل‌های کوچک */
@media (max-width: 480px) {
    .rules-inline-row .rule-badge {
        font-size: 0.65rem;
        padding: 4px 6px;
    }

    .rules-inline-row .rule-points {
        margin-right: 4px;
    }

    .stat-chip {
        font-size: 0.75rem;
        padding: 4px 10px;
    }
}


/* #endregion My Predictions Summary Banner */


/* #region Custom-scrollbar */

* {
    scrollbar-width: thin;
    scrollbar-color: rgba(34, 211, 238, 0.55) transparent;
}

    *::-webkit-scrollbar {
        width: 6px;
        height: 6px;
    }

    *::-webkit-scrollbar-track {
        background: transparent;
    }

    *::-webkit-scrollbar-thumb {
        background-color: rgba(34,211,238,0.55);
        border-radius: 999px;
    }

        *::-webkit-scrollbar-thumb:hover {
            background-color: rgba(34,211,238,0.85);
        }

/* #endregion Custom-scrollbar  */




/* #region Article Details Page*/

/* لایه‌ی بیرونی: بک‌گراند کل صفحه */
.article-shell {
    min-height: 100vh;
    padding: 2rem 1rem 4rem;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    background: radial-gradient(ellipse 70% 40% at 15% 20%, rgba(14, 165, 182, 0.10) 0%, transparent 55%), radial-gradient(ellipse 60% 40% at 85% 80%, rgba(139, 92, 246, 0.10) 0%, transparent 55%), var(--color-bg);
}

/* کادر مرکزی — همه محتوا اینجاست */
.article-page {
    width: 100%;
    max-width: 860px;
    background: var(--color-surface-soft);
    border: 1px solid var(--color-border-soft);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-strong);
    backdrop-filter: blur(16px);
    overflow: hidden;
    color: var(--color-text);
}

/* وضعیت‌های لودینگ / نبود مقاله */
.article-loading,
.article-notfound {
    max-width: 600px;
    margin: 6rem auto;
    text-align: center;
    color: var(--color-text-muted);
    padding: 2rem;
}

.article-loading {
    font-size: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.7rem;
}

    .article-loading::before {
        content: "";
        width: 20px;
        height: 20px;
        border: 2px solid var(--color-border);
        border-top-color: var(--color-primary);
        border-radius: 50%;
        animation: spin 0.8s linear infinite;
        flex-shrink: 0;
    }

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

.article-notfound h2 {
    color: var(--color-text);
    font-size: 1.5rem;
    margin-bottom: 0.5rem;
}

.article-notfound .ui-btn {
    margin-top: 1.2rem;
}

/* ===== هیرو — بخش بالایی کادر ===== */
.article-hero {
    padding: 2rem 2rem 1.5rem;
    border-bottom: 1px solid var(--color-border-soft);
    background: linear-gradient(180deg, rgba(14,165,182,0.06) 0%, transparent 100%);
}

.article-hero__meta {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
    font-size: 0.85rem;
    color: var(--color-text-muted);
    margin-bottom: 1rem;
}

.article-badge {
    background: var(--color-primary-soft);
    color: var(--color-primary);
    font-weight: 700;
    padding: 0.25rem 0.85rem;
    border-radius: 999px;
    border: 1px solid var(--color-primary);
    font-size: 0.8rem;
}

.article-dot {
    opacity: 0.4;
    font-size: 1rem;
}

.article-title {
    margin: 0 0 0.6rem;
    font-size: clamp(1.5rem, 4vw, 2.2rem);
    font-weight: 900;
    line-height: 1.4;
    color: var(--color-text);
}

.article-subtitle {
    margin: 0;
    font-size: clamp(0.95rem, 2vw, 1.1rem);
    line-height: 1.9;
    color: var(--color-text-muted);
}

/* نویسنده */
.article-author {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    margin-top: 1.3rem;
    padding-top: 1rem;
    border-top: 1px solid var(--color-border-soft);
}

.article-author__avatar {
    width: 42px;
    height: 42px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    font-size: 1.05rem;
    color: #fff;
    background: linear-gradient(135deg, var(--color-primary), var(--color-secondary));
    flex-shrink: 0;
}

.article-author__info {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
}

.article-author__name {
    font-size: 0.92rem;
    font-weight: 700;
    color: var(--color-text);
}

.article-author__label {
    font-size: 0.78rem;
    color: var(--color-text-muted);
}

/* تصویر کاور — داخل کادر، تمام‌عرض */
.article-cover {
    margin: 0;
    overflow: hidden;
    /* بوردر بالا و پایین */
    border-top: 1px solid var(--color-border);
    border-bottom: 1px solid var(--color-border);
    box-shadow: 0 4px 24px rgba(15,23,42,0.12) inset;
}

    .article-cover img {
        width: 100%;
        max-height: 480px;
        object-fit: cover;
        display: block;
    }

/* ===== محتوای مقاله ===== */
.article-content {
    padding: 2rem 2rem 1.5rem;
    font-size: 1.05rem;
    line-height: 2.1;
    color: var(--color-text);
}

/* پاراگراف‌ها (خروجی ادیتور) */
.article-paragraph {
    margin: 0 0 1.5rem;
}

    .article-paragraph p {
        margin: 0 0 1.2rem;
    }

    .article-paragraph a {
        color: var(--color-primary);
        text-decoration: underline;
        text-underline-offset: 3px;
        transition: color var(--transition-fast);
    }

        .article-paragraph a:hover {
            color: var(--color-secondary);
        }

    .article-paragraph ul,
    .article-paragraph ol {
        padding-inline-start: 1.5rem;
        margin: 0 0 1.2rem;
    }

    .article-paragraph li {
        margin-bottom: 0.5rem;
    }

    .article-paragraph strong {
        font-weight: 800;
    }

    .article-paragraph em {
        font-style: italic;
    }

/* تیترهای داخل مقاله */
.article-h2 {
    font-size: 1.45rem;
    font-weight: 800;
    color: var(--color-text);
    margin: 2.2rem 0 1rem;
    padding-inline-start: 0.9rem;
    border-inline-start: 4px solid var(--color-primary);
    line-height: 1.4;
}

.article-h3 {
    font-size: 1.15rem;
    font-weight: 800;
    color: var(--color-text);
    margin: 1.8rem 0 0.8rem;
}

/* ===== تصاویر داخل محتوا — با بوردر ===== */
.article-figure {
    margin: 1.8rem 0;
    border-radius: var(--radius-md);
    overflow: hidden;
    /* بوردر اصلی */
    border: 2px solid var(--color-border);
    box-shadow: var(--shadow-soft);
    background: var(--color-surface);
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

    .article-figure:hover {
        border-color: var(--color-primary);
        box-shadow: 0 0 0 3px var(--color-primary-soft), var(--shadow-soft);
    }

    .article-figure img {
        width: 100%;
        height: auto;
        display: block;
    }

    .article-figure figcaption {
        padding: 0.6rem 0.9rem;
        font-size: 0.83rem;
        color: var(--color-text-muted);
        text-align: center;
        border-top: 1px solid var(--color-border-soft);
        background: var(--color-surface-soft);
    }

    /* چیدمان‌ها */
    .article-figure.is-full {
        width: 100%;
    }

    .article-figure.is-center {
        max-width: 68%;
        margin-inline: auto;
    }

    .article-figure.is-right {
        float: right;
        max-width: 44%;
        margin: 0.5rem 0 1.2rem 1.8rem;
    }

    .article-figure.is-left {
        float: left;
        max-width: 44%;
        margin: 0.5rem 1.8rem 1.2rem 0;
    }

/* جلوگیری از خراب شدن چینش بعد از فلوت */
.article-content::after {
    content: "";
    display: block;
    clear: both;
}

/* نقل‌قول */
.article-quote {
    margin: 1.8rem 0;
    padding: 1.1rem 1.4rem;
    border-inline-start: 4px solid var(--color-secondary);
    background: rgba(139, 92, 246, 0.07);
    border-radius: 0 var(--radius-md) var(--radius-md) 0;
    font-size: 1.08rem;
    font-style: italic;
    color: var(--color-text);
    border: 1px solid rgba(139, 92, 246, 0.25);
    border-inline-start-width: 4px;
    border-inline-start-color: var(--color-secondary);
    position: relative;
}

    .article-quote::before {
        content: "❝";
        position: absolute;
        top: -0.5rem;
        inset-inline-end: 1rem;
        font-size: 2rem;
        color: var(--color-secondary);
        opacity: 0.35;
        line-height: 1;
    }

/* قطعه کد */
.article-code {
    margin: 1.8rem 0;
    padding: 1.1rem 1.3rem;
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    overflow-x: auto;
    font-family: "Courier New", monospace;
    font-size: 0.88rem;
    line-height: 1.8;
    color: var(--color-text);
    box-shadow: inset 0 2px 8px rgba(15,23,42,0.08);
}

/* فوتر مقاله */
.article-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 1rem;
    margin: 0;
    padding: 1.25rem 2rem;
    border-top: 1px solid var(--color-border-soft);
    background: var(--color-surface-soft);
}

.article-back-arrow {
    width: 16px;
    height: 16px;
}

/* ریسپانسیو صفحه کاربر */
@media (max-width: 920px) {
    .article-shell {
        padding: 1.5rem 0.75rem 3rem;
    }
}

@media (max-width: 640px) {
    .article-hero {
        padding: 1.5rem 1.2rem 1.2rem;
    }

    .article-content {
        padding: 1.5rem 1.2rem 1.2rem;
    }

    .article-footer {
        padding: 1rem 1.2rem;
    }

    /* در موبایل، تصاویر فلوت‌شده تمام‌عرض شوند */
    .article-figure.is-right,
    .article-figure.is-left,
    .article-figure.is-center {
        float: none;
        max-width: 100%;
        margin-inline: 0;
        margin-block: 1.3rem;
    }

    .article-title {
        font-size: 1.4rem;
    }
}

@media (max-width: 400px) {
    .article-page {
        border-radius: var(--radius-lg);
    }

    .article-hero {
        padding: 1.2rem 1rem 1rem;
    }

    .article-content {
        padding: 1.2rem 1rem 1rem;
        font-size: 0.97rem;
    }
}

/* #endregion Article Details Page */


/* #region Admin Article Editor */

/* لایه‌ی بیرونی صفحه ادمین */
.admin-shell {
    min-height: 100vh;
    padding: 2rem 1rem 4rem;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    background: radial-gradient(ellipse 60% 35% at 10% 15%, rgba(14, 165, 182, 0.09) 0%, transparent 55%), radial-gradient(ellipse 55% 35% at 90% 85%, rgba(139, 92, 246, 0.09) 0%, transparent 55%), var(--color-bg);
}

/* کادر مرکزی ادمین */
.admin-editor {
    width: 100%;
    max-width: 1160px;
    color: var(--color-text);
}

/* ===== هدر صفحه ادمین ===== */
.admin-editor__head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: 1.75rem;
    padding-bottom: 1.25rem;
    border-bottom: 1px solid var(--color-border-soft);
}

.admin-editor__title {
    margin: 0;
    font-size: 1.6rem;
    font-weight: 800;
    color: var(--color-primary);
    letter-spacing: -0.01em;
}

.admin-editor__hint {
    margin: 0.3rem 0 0;
    font-size: 0.88rem;
    color: var(--color-text-muted);
}

.admin-editor__head-actions {
    display: flex;
    gap: 0.6rem;
    flex-wrap: wrap;
    align-items: center;
}

/* ===== گرید دو ستونه ===== */
.admin-editor__grid {
    display: grid;
    grid-template-columns: 1fr 300px;
    gap: 1.5rem;
    align-items: start;
}

.admin-editor__main {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    min-width: 0;
}

/* ===== کارت‌های ادمین (پایه) ===== */
.admin-card {
    background: var(--color-surface-soft);
    border: 1px solid var(--color-border-soft);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-soft);
    backdrop-filter: blur(12px);
    padding: 1.4rem 1.5rem;
    transition: border-color var(--transition-fast);
}

    .admin-card:focus-within {
        border-color: var(--color-primary);
    }

/* ===== لیبل‌ها ===== */
.admin-label {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin: 1rem 0 0.4rem;
}

    .admin-label:first-child {
        margin-top: 0;
    }

    .admin-label svg {
        width: 14px;
        height: 14px;
        opacity: 0.7;
    }

/* ===== ورودی‌های فیلد ===== */
.admin-input {
    width: 100%;
    box-sizing: border-box;
    background: var(--color-bg);
    color: var(--color-text);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: 0.7rem 0.95rem;
    font-size: 0.95rem;
    font-family: inherit;
    outline: none;
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast), background-color var(--transition-fast);
}

    .admin-input:focus {
        border-color: var(--color-primary);
        box-shadow: 0 0 0 3px var(--color-primary-soft);
        background: var(--color-surface);
    }

    .admin-input::placeholder {
        color: var(--color-text-muted);
        opacity: 0.7;
    }

select.admin-input {
    cursor: pointer;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: left 0.8rem center;
    padding-left: 2.2rem;
}

.admin-textarea {
    resize: vertical;
    line-height: 1.75;
    min-height: 80px;
}

.admin-code-area {
    font-family: "Courier New", monospace;
    font-size: 0.87rem;
    background: var(--color-bg);
    min-height: 140px;
}

/* ===== سازنده‌ی بلاک‌ها ===== */
.admin-blocks-card {
    background: var(--color-surface-soft);
    border: 1px solid var(--color-border-soft);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-soft);
    overflow: hidden;
}

.admin-blocks__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1.4rem;
    border-bottom: 1px solid var(--color-border-soft);
    background: linear-gradient(90deg, rgba(14,165,182,0.06), transparent);
}

.admin-section-title {
    margin: 0;
    font-size: 1rem;
    font-weight: 800;
    color: var(--color-text);
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

    .admin-section-title svg {
        width: 18px;
        height: 18px;
        color: var(--color-primary);
    }

.admin-blocks__count {
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--color-primary);
    background: var(--color-primary-soft);
    padding: 0.2rem 0.7rem;
    border-radius: 999px;
    border: 1px solid var(--color-primary);
}

/* لیست بلاک‌ها */
.admin-blocks__list {
    padding: 1.2rem 1.4rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.admin-blocks__empty {
    text-align: center;
    color: var(--color-text-muted);
    font-size: 0.9rem;
    padding: 2.5rem 1rem;
    border: 2px dashed var(--color-border);
    border-radius: var(--radius-md);
    background: rgba(148,163,184,0.04);
    margin: 0 1.4rem 1.4rem;
}

    .admin-blocks__empty svg {
        width: 36px;
        height: 36px;
        opacity: 0.35;
        margin-bottom: 0.6rem;
    }

/* ===== کارت تکی هر بلاک ===== */
.admin-block {
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    overflow: hidden;
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

    .admin-block:focus-within {
        border-color: var(--color-primary);
        box-shadow: 0 0 0 2px var(--color-primary-soft);
    }

/* نوار بالایی هر بلاک */
.admin-block__bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.55rem 0.85rem;
    background: var(--color-surface-soft);
    border-bottom: 1px solid var(--color-border-soft);
}

.admin-block__type-badge {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--color-primary);
}

    .admin-block__type-badge svg {
        width: 14px;
        height: 14px;
    }

.admin-block__tools {
    display: flex;
    gap: 0.3rem;
}

/* دکمه‌های آیکونی (بالا/پایین/حذف) */
.admin-icon-btn {
    width: 30px;
    height: 30px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    border: 1px solid var(--color-border);
    /* رنگ تیره هماهنگ با تم */
    background: var(--color-surface-soft);
    color: var(--color-text-muted);
    font-size: 0.82rem;
    cursor: pointer;
    transition: background-color var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast), transform var(--transition-fast);
}

    .admin-icon-btn svg {
        width: 13px;
        height: 13px;
        pointer-events: none;
    }

    .admin-icon-btn:hover:not(:disabled) {
        background: var(--color-primary-soft);
        border-color: var(--color-primary);
        color: var(--color-primary);
        transform: translateY(-1px);
    }

    .admin-icon-btn:disabled {
        opacity: 0.3;
        cursor: not-allowed;
        transform: none;
    }

/* دکمه‌ی حذف */
.admin-icon-btn--danger:hover:not(:disabled) {
    background: rgba(239, 68, 68, 0.12);
    border-color: var(--color-error);
    color: var(--color-error);
}

/* بدنه‌ی هر بلاک */
.admin-block__body {
    padding: 1rem 1rem 0.85rem;
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
}

/* ردیف select + input (بلاک تیتر) */
.admin-block__row {
    display: flex;
    gap: 0.65rem;
    align-items: stretch;
}

.admin-mini-select {
    flex-shrink: 0;
    width: auto;
    min-width: 140px;
}

/* ===== ادیتور Rich Text ===== */
.rte-wrapper {
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    overflow: hidden;
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

    .rte-wrapper:focus-within {
        border-color: var(--color-primary);
        box-shadow: 0 0 0 3px var(--color-primary-soft);
    }

.rte-toolbar {
    display: flex;
    gap: 0.25rem;
    flex-wrap: wrap;
    padding: 0.5rem 0.6rem;
    background: var(--color-surface-soft);
    border-bottom: 1px solid var(--color-border-soft);
}

.rte-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.25rem;
    padding: 0.3rem 0.6rem;
    border-radius: 6px;
    border: 1px solid var(--color-border-soft);
    /* تیره — بدون سفید */
    background: var(--color-bg);
    color: var(--color-text);
    font-size: 0.8rem;
    cursor: pointer;
    transition: background-color var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast);
    white-space: nowrap;
}

    .rte-btn svg {
        width: 13px;
        height: 13px;
    }

    .rte-btn:hover {
        background: var(--color-primary-soft);
        border-color: var(--color-primary);
        color: var(--color-primary);
    }

    .rte-btn b, .rte-btn i, .rte-btn u {
        font-size: 0.9rem;
    }

.rte-area {
    min-height: 130px;
    padding: 0.8rem 1rem;
    background: var(--color-bg);
    color: var(--color-text);
    font-size: 0.95rem;
    font-family: inherit;
    line-height: 1.9;
    outline: none;
}

    .rte-area:empty::before {
        content: "متن پاراگراف را اینجا بنویس...";
        color: var(--color-text-muted);
        pointer-events: none;
    }

/* ===== انتخاب چیدمان تصویر ===== */
.admin-align-row {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    flex-wrap: wrap;
}

.admin-align-label {
    font-size: 0.8rem;
    color: var(--color-text-muted);
    font-weight: 600;
}

.admin-align-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.28rem 0.75rem;
    border-radius: 999px;
    border: 1px solid var(--color-border);
    background: var(--color-bg);
    color: var(--color-text-muted);
    font-size: 0.78rem;
    font-weight: 600;
    cursor: pointer;
    transition: background-color var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast);
}

    .admin-align-chip:hover {
        border-color: var(--color-primary);
        color: var(--color-primary);
    }

    .admin-align-chip.is-active {
        background: linear-gradient(135deg, var(--color-primary), var(--color-secondary));
        color: #fff;
        border-color: transparent;
    }

/* ===== پیش‌نمایش تصویر ===== */
.admin-img-preview {
    border-radius: var(--radius-md);
    overflow: hidden;
    border: 2px solid var(--color-border);
    max-width: 300px;
    background: var(--color-bg);
    transition: border-color var(--transition-fast);
}

    .admin-img-preview:hover {
        border-color: var(--color-primary);
    }

    .admin-img-preview img {
        width: 100%;
        height: auto;
        display: block;
    }

.admin-img-preview--cover {
    max-width: 100%;
    margin-top: 0.5rem;
}

/* ===== ردیف افزودن بلاک ===== */
.admin-add-section {
    padding: 1rem 1.4rem 1.4rem;
    border-top: 1px dashed var(--color-border);
}

.admin-add-label {
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: 0.65rem;
    display: block;
}

.admin-add-grid {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

/* دکمه‌های افزودن بلاک — آیکون + متن */
.admin-add-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.48rem 0.9rem;
    border-radius: var(--radius-md);
    border: 1px solid var(--color-border);
    background: var(--color-bg);
    color: var(--color-text);
    font-size: 0.83rem;
    font-weight: 600;
    cursor: pointer;
    transition: background-color var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast), transform var(--transition-fast), box-shadow var(--transition-fast);
    font-family: inherit;
}

    .admin-add-btn svg {
        width: 15px;
        height: 15px;
        flex-shrink: 0;
        color: var(--color-primary);
    }

    .admin-add-btn:hover {
        background: var(--color-primary-soft);
        border-color: var(--color-primary);
        color: var(--color-primary);
        transform: translateY(-1px);
        box-shadow: 0 4px 12px var(--color-primary-soft);
    }

/* ===== ستون کناری (سایدبار) ===== */
.admin-editor__side {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    position: sticky;
    top: 1.5rem;
}

.admin-side-card {
    background: var(--color-surface-soft);
    border: 1px solid var(--color-border-soft);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-soft);
    padding: 1.3rem 1.4rem;
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
}

.admin-side-title {
    margin: 0 0 0.75rem;
    font-size: 0.95rem;
    font-weight: 800;
    color: var(--color-text);
    display: flex;
    align-items: center;
    gap: 0.45rem;
    padding-bottom: 0.65rem;
    border-bottom: 1px solid var(--color-border-soft);
}

    .admin-side-title svg {
        width: 16px;
        height: 16px;
        color: var(--color-primary);
    }

.admin-divider {
    border: none;
    border-top: 1px solid var(--color-border-soft);
    margin: 0.85rem 0 0.2rem;
}

/* پیام ذخیره */
.admin-save-msg {
    padding: 0.75rem 1rem;
    border-radius: var(--radius-md);
    background: rgba(16, 185, 129, 0.1);
    border: 1px solid var(--color-success);
    color: var(--color-success);
    font-size: 0.88rem;
    font-weight: 700;
    text-align: center;
    animation: fadeIn 0.25s ease;
}

.admin-error-msg {
    padding: 0.75rem 1rem;
    border-radius: var(--radius-md);
    background: rgba(239, 68, 68, 0.1);
    border: 1px solid var(--color-error);
    color: var(--color-error);
    font-size: 0.88rem;
    font-weight: 700;
    text-align: center;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(4px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ===== ریسپانسیو ادمین ===== */
@media (max-width: 960px) {
    .admin-shell {
        padding: 1.5rem 0.75rem 3rem;
    }

    .admin-editor__grid {
        grid-template-columns: 1fr;
    }

    .admin-editor__side {
        position: static;
    }
}

@media (max-width: 640px) {
    .admin-editor__head {
        gap: 0.75rem;
        margin-bottom: 1.25rem;
    }

    .admin-editor__head-actions {
        width: 100%;
    }

        .admin-editor__head-actions .ui-btn {
            flex: 1;
            justify-content: center;
        }

    .admin-block__row {
        flex-direction: column;
    }

    .admin-mini-select {
        width: 100%;
        min-width: 0;
    }

    .admin-add-grid {
        gap: 0.4rem;
    }

    .admin-add-btn {
        flex: 1 0 calc(50% - 0.4rem);
        justify-content: center;
    }

    .admin-card,
    .admin-side-card {
        padding: 1.1rem 1rem;
    }

    .admin-blocks__head {
        padding: 0.85rem 1rem;
    }

    .admin-blocks__list {
        padding: 1rem;
    }

    .admin-add-section {
        padding: 0.85rem 1rem 1rem;
    }
}

@media (max-width: 400px) {
    .admin-shell {
        padding: 1rem 0.5rem 2rem;
    }

    .admin-add-btn {
        flex: 1 0 100%;
    }
}

/* #endregion Admin Article Editor */


/* #region Wheel Extra UI — Special Winner + Compact Result + Recent Winners*/


.cw-special-winner,
.cw-card,
.cw-recent-winners {
    width: 100%;
    max-width: 520px;
    margin-inline: auto;
    box-sizing: border-box;
}


/* ══════════════════════════════════════════════════════════════
   ۱. کادر برنده ویژه
   ══════════════════════════════════════════════════════════════ */
.cw-special-winner {
    /* بک‌گراند: رنگ surface معمولی تم */
    background: var(--color-surface, rgba(15, 23, 42, 0.96));
    /* بوردر: زرد لیمویی که به طلایی می‌زند */
    border: 2px solid #e8d44d;
    /* گوشه گرد‌تر */
    border-radius: 28px;
    /* فضا برای تاج که بالای بوردر می‌نشیند */
    padding: 2.4rem 1.5rem 1.5rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.55rem;
    position: relative;
    margin-bottom: 1.5rem;
    direction: rtl;
    /* سایه عمق + بازتاب نور طلایی نرم */
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.45), 0 0 18px 2px rgba(232, 212, 77, 0.20);
    /* پالس طلایی نرم */
    animation: cw-gold-pulse 3.5s ease-in-out infinite;
}

@keyframes cw-gold-pulse {
    0%, 100% {
        box-shadow: 0 12px 28px rgba(0,0,0,.45), 0 0 18px 2px rgba(232,212,77,.20);
    }

    50% {
        box-shadow: 0 12px 28px rgba(0,0,0,.45), 0 0 28px 6px rgba(232,212,77,.38);
    }
}

/* تاج — دقیقاً روی خط بوردر بالا */
.cw-special-crown {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translate(-50%, -55%);
    font-size: 2.4rem;
    line-height: 1;
    z-index: 2;
    filter: drop-shadow(0 3px 6px rgba(0, 0, 0, 0.35));
    user-select: none;
    pointer-events: none;
}

/* متن داخل کادر */
.cw-special-text {
    font-size: 1rem;
    font-weight: 700;
    color: var(--color-text, #e2e8f0);
    text-align: center;
    line-height: 1.7;
}

/* هایلایت طلایی — نام برنده / مبلغ */
.cw-highlight-gold {
    color: #e8d44d;
    font-weight: 900;
    text-shadow: 0 0 10px rgba(232, 212, 77, 0.30);
}


/* ══════════════════════════════════════════════════════════════
   ۲. نوار نتیجه چرخش (داخل cw-card)
   ══════════════════════════════════════════════════════════════ */
.cw-compact-result {
    width: 100%;
    box-sizing: border-box;
    background: linear-gradient(135deg, var(--color-primary, #0ea5b6), var(--color-secondary, #8b5cf6));
    color: #ffffff;
    padding: 1rem 1.5rem;
    border-radius: 999px;
    font-weight: 800;
    font-size: 1rem;
    text-align: center;
    border: 1px solid rgba(255, 255, 255, 0.15);
    box-shadow: 0 8px 22px rgba(14, 165, 182, 0.30);
    animation: cw-pop-in 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
}

.cw-compact-prize {
    color: #e8d44d;
    font-size: 1.15rem;
    margin: 0 0.25rem;
    font-weight: 900;
}

@keyframes cw-pop-in {
    from {
        transform: scale(0.85);
        opacity: 0;
    }

    to {
        transform: scale(1);
        opacity: 1;
    }
}


/* ══════════════════════════════════════════════════════════════
   ۳. لیست برندگان اخیر (پایین گردونه — خارج از cw-card)
   ══════════════════════════════════════════════════════════════ */
.cw-recent-winners {
    margin-top: 1.5rem;
    border-top: 1px solid var(--color-border-soft, rgba(148, 163, 184, 0.35));
    padding-top: 1.25rem;
    direction: rtl;
}

.cw-recent-title {
    font-size: 0.95rem;
    font-weight: 800;
    color: var(--color-text, #e2e8f0);
    margin: 0 0 1rem;
    text-align: right;
}

/* اسکرول افقی — هم موبایل هم دسکتاپ */
.cw-recent-scroll {
    display: flex;
    gap: 1rem;
    overflow-x: auto;
    overflow-y: visible;
    padding: 0.5rem 0.25rem 1rem;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    scrollbar-color: rgba(232, 212, 77, 0.45) transparent;
}

    .cw-recent-scroll::-webkit-scrollbar {
        height: 4px;
    }

    .cw-recent-scroll::-webkit-scrollbar-track {
        background: transparent;
    }

    .cw-recent-scroll::-webkit-scrollbar-thumb {
        background: rgba(232, 212, 77, 0.45);
        border-radius: 999px;
    }

        .cw-recent-scroll::-webkit-scrollbar-thumb:hover {
            background: rgba(232, 212, 77, 0.75);
        }

/* در موبایل / لمسی: نوار پنهان (اسکرول swipe جایگزین) */
@media (hover: none) and (pointer: coarse) {
    .cw-recent-scroll {
        scrollbar-width: none;
    }

        .cw-recent-scroll::-webkit-scrollbar {
            display: none;
        }
}

/* ─── هر آیتم برنده ─────────────────────────────────────────── */
.cw-winner-item {
    scroll-snap-align: start;
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.7rem;
    width: 128px;
}

/* باکس جایزه — 128×128 (دو برابر 64px قبلی) */
.cw-winner-prize {
    width: 128px;
    height: 128px;
    background: var(--color-surface-soft, rgba(15, 23, 42, 0.85));
    border: 1px solid var(--color-border-soft, rgba(148, 163, 184, 0.35));
    border-radius: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 3.4rem;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.25);
    transition: transform 0.22s ease, border-color 0.22s ease, box-shadow 0.22s ease;
}

/* هاور — دسکتاپ */
/*@media (hover: hover) and (pointer: fine) {
    .cw-winner-item:hover .cw-winner-prize {
        transform: translateY(-5px);
        border-color: var(--color-primary, #0ea5b6);
        box-shadow: 0 10px 24px rgba(14, 165, 182, 0.25);
    }
}*/

/* نام — کمی بزرگ‌تر از قبل */
.cw-winner-name {
    font-size: 0.92rem;
    font-weight: 700;
    color: var(--color-text-muted, #94a3b8);
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    width: 100%;
}


/* ══════════════════════════════════════════════════════════════
   ریسپانسیو
   ══════════════════════════════════════════════════════════════ */

/* تبلت کوچک / گوشی بزرگ */
@media (max-width: 580px) {
    .cw-special-winner {
        border-radius: 22px;
        padding: 2rem 1.1rem 1.2rem;
    }

    .cw-special-crown {
        font-size: 2rem;
    }

    .cw-special-text {
        font-size: 0.93rem;
    }

    .cw-winner-item {
        width: 110px;
    }

    .cw-winner-prize {
        width: 110px;
        height: 110px;
        font-size: 2.9rem;
        border-radius: 20px;
    }
}

/* گوشی کوچک */
@media (max-width: 400px) {
    .cw-winner-item {
        width: 96px;
    }

    .cw-winner-prize {
        width: 96px;
        height: 96px;
        font-size: 2.5rem;
        border-radius: 18px;
    }

    .cw-winner-name {
        font-size: 0.83rem;
    }
}



/* ۱. جلوگیری از اجبار Grid به بزرگ شدن بی‌رویه کارت‌ها */
.cw-special-winner,
.cw-card,
.cw-recent-winners {
    min-width: 0 !important; /* بسیار مهم برای جلوگیری از overflow در موبایل */
    width: 100%;
    max-width: 520px;
    box-sizing: border-box;
}

/* ۲. اطمینان از اینکه صفحه اسکرول افقی نخورد */
.cw-root {
    max-width: 100vw;
    overflow-x: hidden;
}

/* ۳. ریسپانسیو و کوچک کردن خودکار گردونه در گوشی‌ها */
@media (max-width: 580px) {
    /* کاهش پدینگ‌ها برای استفاده حداکثری از عرض موبایل */
    .cw-card {
        padding: 1.2rem 0.5rem;
    }

    .cw-special-winner {
        padding: 2.2rem 1rem 1.2rem;
    }

    /* محدود کردن کانتینرهای گردونه به عرض صفحه */
    .cw-stage,
    .cw-rotator {
        width: 100%;
        max-width: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
    }

        /* 🎯 جادوی اصلی: کوچک شدن خودکار Canvas با حفظ تناسب 
       (گردونه از نظر گرافیکی کوچک می‌شود ولی منطق آن دست‌نخورده باقی می‌ماند) */
        .cw-rotator canvas {
            max-width: 100% !important;
            height: auto !important;
        }

    /* جمع‌وجور کردن دکمه چرخش */
    .cw-spin {
        max-width: 90%;
        font-size: 0.95rem;
        padding: 0.8rem 1rem;
    }
}




.cw-special-winner {
    padding: 0 !important; /* پدینگ کادر اصلی کاملاً حذف شد */
    background: #11141c;
    /* استفاده از رنگ طلایی متن قبلی برای مرز کادر */
    border: 2px solid #E6C27A;
    border-radius: 14px;
    box-shadow: 0 0 25px rgba(230, 194, 122, 0.25), inset 0 0 15px rgba(230, 194, 122, 0.1);
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    margin-bottom: 1.5rem;
}

    /* افکت نور متحرک روی کادر */
    .cw-special-winner::after {
        content: '';
        position: absolute;
        top: 0;
        left: -100%;
        width: 50%;
        height: 100%;
        background: linear-gradient(to right, transparent, rgba(230, 194, 122, 0.2), transparent);
        transform: skewX(-20deg);
        animation: royalShine 3.5s infinite;
    }

/* بخش کانتینر عکس: با گرادیان طلایی لوکس متالیک */
.cw-special-crown {
    background: linear-gradient(135deg, #BF953F, #FCF6BA, #B38728, #FBF5B7, #AA771C);
    padding: 12px 18px;
    box-shadow: 2px 0 15px rgba(0, 0, 0, 0.5);
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* استایل عکس تاج */
.cw-crown-img {
    width: 32px;
    height: 32px;
    object-fit: contain;
    filter: drop-shadow(0 2px 4px rgba(0,0,0,0.3));
}

/* بخش متن: حالا کاملاً سفید است */
.cw-special-text {
    padding: 10px 15px;
    font-weight: 700;
    color: #ffffff !important; /* متن اصلی کاملاً سفید شد */
    font-size: 0.95rem;
    z-index: 1;
    flex-grow: 1;
    text-align: center;
}

/* فقط بخش ۵۰۰ هزار تومانی به صورت طلایی درخشان باقی می‌ماند */
.cw-highlight-gold {
    background: linear-gradient(to right, #BF953F, #FCF6BA, #B38728, #FBF5B7, #AA771C);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-weight: 900;
    font-size: 1.15rem;
    text-shadow: 0 0 15px rgba(252, 246, 186, 0.3);
    display: inline-block;
}


.cw-winner-item {
    padding: 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    transition: all 0.3s ease;
}

    /* اگر عکسی داخل کارت هست (مثلاً آواتار کاربر) */
    .cw-winner-avatar, .cw-winner-item img {
        border: 2px solid #E6C27A; /* کادر طلایی دور عکس کاربران */
        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
    }

@media (max-width: 580px) {
    .cw-special-winner {
        flex-direction: column;
    }

    .cw-special-crown {
        width: 100%;
        padding: 8px;
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.4);
    }

    .cw-crown-img {
        width: 28px;
        height: 28px;
    }

    .cw-special-text {
        padding: 12px 10px;
        font-size: 0.9rem;
    }
}


/* ══════════════════════════════════════════════════════
   تنظیمات کادر مربعی عکس (سایز ثابت ۱۲۵ پیکسل با عکس کوچک‌شده در مرکز)
   ══════════════════════════════════════════════════════ */

/* کادر دور عکس */
.cw-winner-prize {
    width: 125px; /* 🎯 عرض دقیق ۱۲۵ پیکسل */
    height: 125px; /* 🎯 ارتفاع دقیق ۱۲۵ پیکسل */
    /*border-radius: 10px;*/ /* لبه‌های مربعی کمی گرد */
    /*border: 2px solid #E6C27A;*/
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(17, 20, 28, 0.8);
    flex-shrink: 0;
    margin: 0 auto;
}

/* استایل خود عکس در داخل مربع ۱۲۵ پیکسلی */
.cw-winner-icon {
    width: 85%; /* 🎯 عکس از کادر طلایی کمی کوچک‌تر می‌شود تا حاشیه داشته باشد */
    height: 85%;
    object-fit: contain; /* 🎯 نمایش کامل عکس در مرکز بدون برش خوردن یا دفرمه شدن */
    object-position: center;
    transition: transform 0.3s ease;
}

/* افکت زوم ملایم روی عکس وقتی موس روی کارت می‌رود */
.cw-winner-item:hover .cw-winner-icon {
    transform: scale(1.08);
}

/* ریسپانسیو: کمی جمع‌وجورتر شدن در موبایل (اختیاری) */
@media (max-width: 580px) {
    .cw-winner-prize {
        width: 100px;
        height: 100px;
    }
}

/* ══════════════════════════════════════════════════════
   اصلاح دکمه قرعه‌کشی (رنگ زرد نرم + گردونه نیمه در پس‌زمینه)
   ══════════════════════════════════════════════════════ */

.dash-tile--warning {
    position: relative !important;
    overflow: hidden !important; /* 🎯 بسیار مهم: بخش پایینی گردونه پس‌زمینه را کات می‌کند تا افکت نصفه ایجاد شود */
    /* 🎨 ترکیب رنگ زرد/آمبر نرم، ملایم و مات که اصلاً توی چشم نمی‌زند */
    background: linear-gradient(135deg, #fcd34d 0%, #d97706 100%) !important;
    border: 1px solid #b45309 !important;
    /*color: #1e293b !important;*/ /* رنگ متن تیره و خوانا روی پس‌زمینه زرد نرم */
    box-shadow: 0 4px 12px rgba(217, 119, 6, 0.15) !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

    /* افکت هاور ملایم روی دکمه */
    .dash-tile--warning:hover {
        transform: translateY(-2px);
        box-shadow: 0 6px 20px rgba(217, 119, 6, 0.25) !important;
    }

    /* 🎡 ایجاد گردونه فینت و کم‌رنگ در بک‌گراند (وسط مایل به راست و نصفه) */
    .dash-tile--warning::before {
        content: '';
        position: absolute;
        justify-content: start;
        /* 🎯 تنظیم موقعیت: وسط مایل به راست */
        right: 22%;
        /* 🎯 نصفه کردن تصویر: با دادن مقدار منفی به bottom، دقیقا نیمه بالایی گردونه روی دکمه می‌افتد */
        bottom: -160px;
        /* ابعاد گردونه پس‌زمینه */
        width: 500px;
        height: 300px;
        background-image: url('/assets/spin-wheel.png') !important;
        background-repeat: no-repeat !important;
        background-size: contain !important;
        background-position: center !important;
        /* 🎯 اوپسیتی بسیار کم (واترمارک) تا متن‌ها کاملاً خوانا بمانند */
        opacity: 0.15;
        z-index: 0; /* زیر متن‌ها و عکس اصلی قرار می‌گیرد */
        pointer-events: none; /* تداخلی در کلیک روی دکمه ایجاد نمی‌کند */
    }

    /* تنظیم لایه‌های محتوا برای جلوگیری از تداخل با پس‌زمینه */
    .dash-tile--warning .dash-tile__content {
        position: relative;
        z-index: 1; /* محتوا بالاتر از واترمارک قرار می‌گیرد */
        width: 100%;
    }

    /* متن‌های داخل کادر */
    .dash-tile--warning h3 {
        color: var(--color-text);
        font-weight: 800;
    }

    .dash-tile--warning p {
        /*color: #334155 !important;*/
        color: var(--color-text);
        font-weight: 500;
    }

/* 📱 ریسپانسیو کامل برای موبایل (کوچک شدن متناسب گردونه پس‌زمینه) */
@media (max-width: 580px) {
    .dash-tile--warning::before {
        width: 350px;
        height: 350px;
        right: 0%;
        bottom: -150px; /* تنظیم مجدد فاصله منفی برای صفحه موبایل */
        opacity: 0.09; /* در موبایل کمی کم‌رنگ‌تر برای تمرکز بیشتر روی متن */
    }
}





/* ══════════════════════════════════════════════════════
   استایل کادر تایمر معکوس زنده داخل دکمه
   ══════════════════════════════════════════════════════ */

.dash-timer-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(15, 23, 42, 0.6) !important; /* پس‌زمینه تیره تیره برای خوانایی بهتر اعداد */
    border: 1px solid rgba(255, 255, 255, 0.2);
    padding: 6px 12px;
    border-radius: 8px;
    margin-top: 8px;
    box-shadow: inset 0 2px 4px rgba(0,0,0,0.2);
}

/* افکت چشمک‌زن ملایم برای آیکون ساعت شنی */
.dash-timer-icon {
    font-size: 1rem;
    animation: pulseIcon 1s infinite alternate;
}

@keyframes pulseIcon {
    from {
        opacity: 0.5;
    }

    to {
        opacity: 1;
    }
}

/* استایل اعداد تایمر (فونت مونو اسپیس یا بولد برای تکان نخوردن اعداد هنگام ثانیه‌شماری) */
.dash-timer-clock {
    font-family: 'Courier New', Courier, monospace, 'Vazirmatn';
    font-size: 1.15rem;
    font-weight: 900;
    color: #fcd34d !important; /* رنگ زرد درخشان فسفری برای ساعت */
    letter-spacing: 1px;
    direction: ltr; /* نمایش صحیح ساختار زمان از چپ به راست */
}

.dash-timer-lbl {
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.7) !important;
    font-weight: 500;
}



/* ══════════════════════════════════════════════════════
   استایل کادر تایمر معکوس زنده (نسخه مینی‌مال و شیشه‌ای)
   ══════════════════════════════════════════════════════ */

.dash-timer-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    background: rgba(0, 0, 0, 0.35) !important; /* پس‌زمینه محوتر و شیک‌تر */
    backdrop-filter: blur(4px); /* افکت گلس‌مورفیسم (شیشه‌ای) */
    border: 1px solid rgba(255, 255, 255, 0.1);
    padding: 4px 10px; /* پدینگ کمتر برای جمع‌وجور شدن */
    border-radius: 20px; /* ظاهر کپسولی (Pill Shape) */
    margin-top: 8px;
}

.dash-timer-icon {
    font-size: 0.85rem; /* آیکون کوچک‌تر */
    animation: pulseIcon 1.5s infinite alternate;
}

@keyframes pulseIcon {
    from {
        opacity: 0.4;
        transform: scale(0.95);
    }

    to {
        opacity: 1;
        transform: scale(1.05);
    }
}

.dash-timer-clock {
    font-family: 'Courier New', Courier, monospace, 'Vazirmatn';
    font-size: 0.9rem; /* 🎯 سایز فونت اعداد کوچک و استاندارد شد */
    font-weight: 800;
    color: #fcd34d !important;
    letter-spacing: 1px;
    direction: ltr;
    line-height: 1;
}

.dash-timer-lbl {
    font-size: 0.7rem; /* متن توضیحات کاملاً ریز شد */
    color: rgba(255, 255, 255, 0.6) !important;
    font-weight: 500;
    line-height: 1;
}

/* در موبایل کمی حاشیه‌ها را جمع‌تر می‌کنیم */
@media (max-width: 580px) {
    .dash-timer-badge {
        padding: 3px 8px;
    }

    .dash-timer-clock {
        font-size: 0.85rem;
    }
}








/* ══════════════════════════════════════════════════════
   تنظیمات کادر پرومو کد مشکی و دکمه تایمر تیره/مات
   ══════════════════════════════════════════════════════ */

/* کانتینر باکس ورودی برای تنظیم دقیق عرض و وسط‌چین شدن */
.cw-promo-box {
    width: 100%;
    max-width: 320px;
    margin: 0 auto 1.5rem auto;
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* باکس ورودی کاملاً مشکی با خط مرزی متمرکز */
.cw-promo-input {
    width: 100%;
    background-color: #000000 !important; /* رنگ پس‌زمینه کاملاً مشکی */
    border: 2px solid rgba(230, 194, 122, 0.4); /* بوردر طلایی ملایم متناسب با تم */
    color: #ffffff !important;
    font-family: 'Vazirmatn', sans-serif;
    font-size: 0.95rem;
    padding: 12px 15px;
    border-radius: 12px;
    outline: none;
    text-align: center;
    transition: all 0.3s ease;
    box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.5);
}

    .cw-promo-input:focus {
        border-color: #E6C27A; /* درخشش مرز کادر هنگام کلیک */
        box-shadow: 0 0 10px rgba(230, 194, 122, 0.25);
    }

    /* تغییر رنگ بوردر به قرمز در صورت رخ دادن خطا */
    .cw-promo-input.input-error {
        border-color: #ef4444 !important;
    }

/* متن ارور قرمز با فاصله مناسب از لبهٔ بالایی کادر */
.cw-promo-error {
    color: #ef4444 !important; /* رنگ قرمز تند برای خوانایی خطا */
    font-size: 0.85rem;
    font-weight: 700;
    margin-top: 14px; /* ایجاد فاصله ایمن از بالای کادر ورودی */
    text-align: center;
    width: 100%;
    animation: promoFadeIn 0.3s ease-out forwards;
}

/* 🎯 استایل دکمه در حالت غیرفعال (تایمر فعال یا لیمیت زمان) */
.cw-spin:disabled {
    background: #151922 !important; /* تغییر به یک پس‌زمینه بسیار تیره و مات */
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    cursor: not-allowed;
    box-shadow: none !important;
    opacity: 0.85; /* حالت کدر و مات شدن دکمه */
}

    /* 🛡️ قانون طلایی: متن دکمه غیرفعال کاملاً سفید و درخشان باقی می‌ماند */
    .cw-spin:disabled span,
    .cw-spin:disabled .cw-timer-display {
        color: #ffffff !important; /* رنگ سفید خالص تگ متن */
        opacity: 1 !important; /* خنثی کردن ماتیِ دکمه برای خودِ متن تا کدر نشود */
        font-weight: 700;
        direction: ltr;
        display: inline-block;
    }

@keyframes promoFadeIn {
    from {
        opacity: 0;
        transform: translateY(-4px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}



.cw-hub {
    position: absolute;
    z-index: 4;
    width: 19%;
    aspect-ratio: 1;
    display: grid;
    place-items: center;
    padding: 0;
    border-radius: 50%;
    cursor: default;
    pointer-events: none;
    color: #fff;
    border: 2px solid color-mix(in srgb, var(--cw-gold) 70%, transparent);
    background: radial-gradient(circle at 50% 30%, #2b3350, #11162a 70%);
    box-shadow: 0 6px 16px rgba(2, 6, 23, .55), inset 0 2px 4px rgba(255, 255, 255, .25), inset 0 -4px 8px rgba(0, 0, 0, .5), 0 0 0 5px color-mix(in srgb, var(--cw-primary) 18%, transparent);
    transition: none;
}

.cw-winner-name {
    display: inline-block;
    /* حداقل عرض برای اسامی معمولی */
    min-width: 100px;
    /* بیشتر از عرض والد نشود */
    max-width: 100%;
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: break-word;
    text-align: center;
    line-height: 1.4;
}


/* ۳. ریسپانسیو و کوچک کردن خودکار گردونه در گوشی‌ها */
@media (max-width: 580px) {
    /* کاهش پدینگ‌ها برای استفاده حداکثری از عرض موبایل */
    .cw-card {
        padding: 1.2rem 0.5rem;
    }

    .cw-special-winner {
        padding: 2.2rem 1rem 1.2rem;
    }

    /* استیج به اندازه گردونه shrink-wrap بماند تا هاله مستطیل نشود */
    .cw-stage {
        width: auto;
        max-width: 100%;
        display: inline-grid;
        place-items: center;
        margin-inline: auto;
    }

    /* روتاتور دقیقاً به اندازه‌ای که از Blazor inline ست شده می‌ماند */
    .cw-rotator {
        width: auto;
        max-width: 100%;
    }

        /* canvas کل فضای روتاتور را پر کند — مربع، نه auto */
        .cw-rotator ::deep canvas,
        .cw-rotator canvas {
            width: 100% !important;
            height: 100% !important;
            display: block;
            border-radius: 50%;
        }

    /* جمع‌وجور کردن دکمه چرخش */
    .cw-spin {
        max-width: 90%;
        font-size: 0.95rem;
        padding: 0.8rem 1rem;
    }
}

@media (max-width: 580px) {
    .cw-card {
        padding: 1.2rem 0.5rem;
    }

    .cw-special-winner {
        padding: 2.2rem 1rem 1.2rem;
    }

    .cw-stage {
        width: auto;
        max-width: 100%;
        display: inline-grid;
        place-items: center;
        margin-inline: auto;
    }

    .cw-rotator {
        width: auto;
        max-width: 100%;
    }

    /* DO NOT add width/height rules for canvas here — JS now controls them */

    .cw-spin {
        max-width: 90%;
        font-size: 0.95rem;
        padding: 0.8rem 1rem;
    }
}

/* #endregion Wheel Extra UI */



/* #region MyPrizes*/
.mp-root {
    width: min(640px, 94%);
    margin-inline: auto;
    padding-block: 1.5rem 4rem;
    direction: rtl;
}

/* header */
.mp-head {
    display: flex;
    align-items: center;
    gap: 0.9rem;
    margin-bottom: 1.4rem;
}

.mp-head__icon {
    width: 52px;
    height: 52px;
    flex: none;
    display: grid;
    place-items: center;
    font-size: 1.6rem;
    border-radius: var(--radius-md);
    background: var(--color-primary-soft);
    border: 1px solid var(--color-border-soft);
}

.mp-title {
    margin: 0;
    font-size: 1.3rem;
    font-weight: 900;
    color: var(--color-text);
}

.mp-sub {
    margin: 0.15rem 0 0;
    font-size: 0.85rem;
    color: var(--color-text-muted);
}

.mp-count {
    margin-inline-start: auto;
    font-size: 0.8rem;
    font-weight: 700;
    padding: 0.35rem 0.8rem;
    border-radius: 999px;
    color: var(--color-primary);
    background: var(--color-primary-soft);
    border: 1px solid var(--color-border-soft);
    white-space: nowrap;
}

/* list */
.mp-list {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

/* card */
.mp-card {
    display: flex;
    gap: 1rem;
    padding: 1rem;
    border-radius: var(--radius-lg);
    background: var(--color-surface-soft);
    border: 1px solid var(--color-border-soft);
    box-shadow: var(--shadow-soft);
    transition: transform var(--transition-fast), box-shadow var(--transition-fast);
}

    .mp-card:hover {
        transform: translateY(-2px);
        box-shadow: var(--shadow-strong);
    }

/* رنگ لبهٔ راست بر اساس وضعیت */
.mp-card--active {
    border-inline-start: 4px solid var(--color-success);
}

.mp-card--used {
    border-inline-start: 4px solid var(--color-text-muted);
    opacity: 0.85;
}

.mp-card--expired {
    border-inline-start: 4px solid var(--color-error);
    opacity: 0.8;
}

.mp-card--display {
    border-inline-start: 4px solid var(--color-secondary);
}

/* thumb */
.mp-thumb {
    position: relative;
    width: 92px;
    height: 92px;
    flex: none;
    border-radius: var(--radius-md);
    overflow: hidden;
    background: var(--color-bg);
    border: 1px solid var(--color-border-soft);
}

    .mp-thumb img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
    }

.mp-card--used .mp-thumb img,
.mp-card--expired .mp-thumb img {
    filter: grayscale(0.85);
}

/* stamp روی عکس */
.mp-stamp {
    position: absolute;
    inset-block-end: 6px;
    inset-inline: 6px;
    text-align: center;
    font-size: 0.66rem;
    font-weight: 800;
    padding: 2px 0;
    border-radius: 6px;
    color: #fff;
}

.mp-stamp--used {
    background: rgba(100, 116, 139, 0.9);
}

.mp-stamp--expired {
    background: rgba(239, 68, 68, 0.9);
}

/* body */
.mp-body {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
}

.mp-body__top {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    flex-wrap: wrap;
}

.mp-name {
    margin: 0;
    font-size: 1.05rem;
    font-weight: 800;
    color: var(--color-text);
}

/* badge */
.mp-badge {
    font-size: 0.7rem;
    font-weight: 800;
    padding: 3px 10px;
    border-radius: 999px;
    white-space: nowrap;
}

.mp-badge--active {
    color: var(--color-success);
    background: color-mix(in srgb, var(--color-success) 14%, transparent);
    border: 1px solid color-mix(in srgb, var(--color-success) 35%, transparent);
}

.mp-badge--used {
    color: var(--color-text-muted);
    background: color-mix(in srgb, var(--color-text-muted) 14%, transparent);
    border: 1px solid var(--color-border-soft);
}

.mp-badge--expired {
    color: var(--color-error);
    background: color-mix(in srgb, var(--color-error) 14%, transparent);
    border: 1px solid color-mix(in srgb, var(--color-error) 35%, transparent);
}

.mp-badge--display {
    color: var(--color-secondary);
    background: color-mix(in srgb, var(--color-secondary) 14%, transparent);
    border: 1px solid color-mix(in srgb, var(--color-secondary) 35%, transparent);
}

/* meta / date */
.mp-meta {
    font-size: 0.82rem;
    color: var(--color-text-muted);
}

    .mp-meta b {
        color: var(--color-text);
        font-weight: 700;
    }

/* code row */
.mp-code-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.mp-code {
    font-family: "Consolas", monospace;
    font-size: 0.95rem;
    font-weight: 800;
    letter-spacing: 1px;
    padding: 0.4rem 0.8rem;
    border-radius: var(--radius-md);
    color: var(--color-primary);
    background: var(--color-primary-soft);
    border: 1px dashed color-mix(in srgb, var(--color-primary) 45%, transparent);
    direction: ltr;
}

.mp-copy {
    font-size: 0.78rem;
    font-weight: 700;
    padding: 0.45rem 0.8rem;
    border-radius: var(--radius-md);
    cursor: pointer;
    color: var(--color-text);
    background: var(--color-surface);
    border: 1px solid var(--color-border-soft);
    transition: background var(--transition-fast), transform var(--transition-fast);
}

    .mp-copy:hover {
        transform: translateY(-1px);
        background: var(--color-primary-soft);
    }

/* guide */
.mp-guide {
    display: flex;
    gap: 0.45rem;
    font-size: 0.82rem;
    line-height: 1.7;
    color: var(--color-text);
    padding: 0.55rem 0.7rem;
    border-radius: var(--radius-md);
    background: var(--color-bg);
    border: 1px solid var(--color-border-soft);
}

.mp-guide__icon {
    flex: none;
}

/* expire */
.mp-expire {
    font-size: 0.8rem;
    color: var(--color-text-muted);
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.mp-expire__time {
    color: var(--color-warning);
    font-weight: 600;
    font-size: 0.8rem;
    direction: ltr;
    font-variant-numeric: tabular-nums;
}

/* status notes */
.mp-status-note {
    font-size: 0.8rem;
    margin: 0;
    line-height: 1.7;
}

.mp-status-note--used {
    color: var(--color-text-muted);
}

.mp-status-note--expired {
    color: var(--color-error);
}

.mp-display-note {
    font-size: 0.8rem;
    margin: 0;
    color: var(--color-secondary);
}

/* empty / loader */
.mp-empty {
    text-align: center;
    padding: 3rem 1rem;
    color: var(--color-text-muted);
}

.mp-empty__icon {
    font-size: 2.5rem;
    margin-bottom: 0.6rem;
}

.mp-btn {
    display: inline-block;
    margin-top: 1rem;
    padding: 0.6rem 1.3rem;
    border-radius: 999px;
    font-weight: 800;
    text-decoration: none;
    cursor: pointer;
}

.mp-btn-primary {
    color: #fff;
    background: var(--color-primary);
    border: none;
}

.mp-loader {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
    padding: 2.5rem;
    color: var(--color-text-muted);
}

.mp-spin {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    border: 3px solid var(--color-border-soft);
    border-top-color: var(--color-primary);
    animation: mp-rot 0.8s linear infinite;
}

@keyframes mp-rot {
    to {
        transform: rotate(360deg);
    }
}

@media (max-width: 480px) {
    .mp-card {
        flex-direction: column;
    }

    .mp-thumb {
        width: 100%;
        height: 150px;
    }
}



/* ====================================================
   جلوه هاله و حاشیه قرمز ملایم برای جوایز منقضی شده
   ==================================================== */
.mp-card.mp-card--expired {
    /* حاشیه قرمز ملایم هماهنگ با تم ارورهای سایت */
    border: 1px solid rgba(239, 68, 68) !important;
    /* هاله (Glow) قرمز ملایم که جیغ نیست */
    box-shadow: 0 4px 20px rgba(239, 68, 68, 0.12) !important;
    /* یک پس‌زمینه بسیار محو قرمز برای ایجاد حس منقضی بودن */
    background: rgba(239, 68, 68, 0.02) !important;
    transition: all 0.3s ease;
    box-shadow: 0 6px 25px rgba(239, 68, 68,0.5) !important;
}

    /* برای اینکه هنگام هاور (رفتن ماوس روی کارت) هاله قرمز از بین نرود و کمی پررنگ‌تر شود */
    .mp-card.mp-card--expired:hover {
        border-color: rgba(239, 68, 68 ) !important;
        box-shadow: 0 6px 25px rgba(239, 68, 68) !important;
    }
/* #endregion MyPrizes*/

/* ===================================================
   تغییرات اختصاصی دسکتاپ (ویندوز)
   - مخفی کردن تمام آیکون‌ها
   - بزرگ‌تر کردن متن تب‌ها
   =================================================== */
@media (min-width: 769px) {
    /* مخفی کردن تمام عکس‌ها و آیکون‌ها در منوی بالا */
    .floating-menu__icon, .floating-menu_cup_icon {
        display: none !important;
    }

    /* بزرگ‌تر کردن سایز متن‌ها در دسکتاپ */
    .floating-menu__text {
        font-size: 1.2rem !important; /* می‌توانی این عدد را بسته به سلیقه‌ات بزرگ‌تر کنی */
        font-weight: 800;
    }
}

/* ===================================================
   تغییرات اختصاصی موبایل (اندروید)
   - مخفی کردن متن‌ها
   - هم‌اندازه کردن دقیق تمامی آیکون‌ها و عکس‌ها
   =================================================== */
/* ===================================================
   تغییرات اختصاصی موبایل (اندروید) - سایزهای دقیق و تفکیک شده
   =================================================== */
@media (max-width: 768px) {
    /* مخفی کردن متن‌ها در موبایل */
    .floating-menu__text {
        display: none !important;
    }

    /* ۱. سایز آیکون‌های معمولی (مثل خانه و ...) - سایز معقول و استاندارد */
    .floating-menu__icon {
        width: 36px !important;
        height: 36px !important;
        font-size: 32px !important; /* سایز اموجی‌ها/فونت‌ها */
        line-height: 36px !important;
        display: flex !important;
        align-items: center;
        justify-content: center;
        margin: 0 auto;
    }

    /* ۲. تنظیم اختصاصی فقط برای عکس کاپ (cup.png) */
    .floating-menu_cup_icon {
        width: 44px !important; /* عرض بیشتر دادم تا فضای خالی داخل عکس جبران شود */
        height: 44px !important; /* ارتفاع بیشتر */
        object-fit: contain !important; /* جلوگیری از کش آمدن عکس */
        display: block !important;
        margin: 0 auto;
    }

    /* ۳. عکس پروفایل کاربر در موبایل (متمایز و بزرگ‌تر) */
    .floating-profile__img,
    .mobile-profile-avatar {
        width: 52px !important; /* بزرگ‌ترین سایز در نوار پایین */
        height: 52px !important;
        object-fit: cover !important;
        border-radius: 50% !important; /* کاملا گرد */
        border: 2px solid var(--color-primary, #0ea5b6) !important;
        padding: 0 !important;
        margin: 0 auto;
    }
}





.dash-tile__img--spinwheel {
    transform: scale(0.65);
    transform-origin: center center;
}

@media (max-width: 768px) {
    .dash-tile__img--spinwheel {
        transform: scale(0.55);
        transform-origin: center center;
    }
}

.dash-tile__img--my-prizes {
    transform: scale(0.75);
    transform-origin: center center;
}

@media (max-width: 768px) {
    .dash-tile__img--my-prizes {
        transform: scale(0.6);
        transform-origin: center center;
    }
}





.dash-tile--promo {
    position: relative !important;
    overflow: hidden !important; /* 🎯 بسیار مهم: بخش پایینی گردونه پس‌زمینه را کات می‌کند تا افکت نصفه ایجاد شود */
    /* 🎨 ترکیب رنگ زرد/آمبر نرم، ملایم و مات که اصلاً توی چشم نمی‌زند */
    background: linear-gradient(135deg, #a855f7 0%, #6b21a8 100%) !important; /* گرادیانت بنفش */

    border: 1px solid #b45309 !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    border: 1px solid #c084fc !important; /* رنگ حاشیه (بوردر) بنفش ملایم */
}

    /* افکت هاور ملایم روی دکمه */
    .dash-tile--promo:hover {
        transform: translateY(-2px);
        box-shadow: 0 6px 20px rgba(217, 119, 6, 0.25) !important;
    }

    /* 🎡 ایجاد گردونه فینت و کم‌رنگ در بک‌گراند (وسط مایل به راست و نصفه) */
    .dash-tile--promo::before {
        content: '';
        position: absolute;
        justify-content: start;
        /* 🎯 تنظیم موقعیت: وسط مایل به راست */
        right: 22%;
        /* 🎯 نصفه کردن تصویر: با دادن مقدار منفی به bottom، دقیقا نیمه بالایی گردونه روی دکمه می‌افتد */
        bottom: -160px;
        /* ابعاد گردونه پس‌زمینه */
        width: 500px;
        height: 300px;
        background-image: url('/assets/spin-wheel.png') !important;
        background-repeat: no-repeat !important;
        background-size: contain !important;
        background-position: center !important;
        /* 🎯 اوپسیتی بسیار کم (واترمارک) تا متن‌ها کاملاً خوانا بمانند */
        opacity: 0.15;
        z-index: 0; /* زیر متن‌ها و عکس اصلی قرار می‌گیرد */
        pointer-events: none; /* تداخلی در کلیک روی دکمه ایجاد نمی‌کند */
    }

    /* تنظیم لایه‌های محتوا برای جلوگیری از تداخل با پس‌زمینه */
    .dash-tile--promo .dash-tile__content {
        position: relative;
        z-index: 1; /* محتوا بالاتر از واترمارک قرار می‌گیرد */
        width: 100%;
    }

    /* متن‌های داخل کادر */
    .dash-tile--promo h3 {
        color: var(--color-text);
        font-weight: 800;
    }

    .dash-tile--promo p {
        /*color: #334155 !important;*/
        color: var(--color-text);
        font-weight: 500;
    }

/* 📱 ریسپانسیو کامل برای موبایل (کوچک شدن متناسب گردونه پس‌زمینه) */
@media (max-width: 580px) {
    .dash-tile--promo::before {
        width: 350px;
        height: 350px;
        right: 0%;
        bottom: -150px; /* تنظیم مجدد فاصله منفی برای صفحه موبایل */
        opacity: 0.09; /* در موبایل کمی کم‌رنگ‌تر برای تمرکز بیشتر روی متن */
    }
}






.hero-slider {
    /* اجازه اسکرول عمودی می‌دهد اما اسکرول افقی مرورگر را قفل می‌کند تا جاوااسکریپت کار کند */
    touch-action: pan-y;
    /* اگر کاربر متن یا عکسی را داخل اسلایدر انتخاب کند، درگ کردن موس مختل می‌شود */
    user-select: none;
    -webkit-user-select: none;
}




/* #region  صفحات خطا — 404 / 405 / 500  (Error Pages)*/
/* =========================================================
   صفحات خطا — 404 / 405 / 500  (Error Pages)
   همه‌ی نام‌ها با پیشوند errpg- ایمن‌سازی شده تا با کلاس‌های
   موجود (theme-toggle, chip, twinkle, pulse و ...) تداخل نکند.
   تم از همان توکن‌های اصلی استفاده می‌کند (دارک/لایت).
   نحوه استفاده: ساختار HTML زیر هر فایل خطا را ببینید.
   ========================================================= */

.errpg-stage {
    position: relative;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
    isolation: isolate;
    overflow: hidden;
    background: radial-gradient(ellipse 60% 50% at 15% 25%, rgba(34, 211, 238, 0.18) 0%, transparent 55%), radial-gradient(ellipse 55% 45% at 85% 75%, rgba(168, 85, 247, 0.20) 0%, transparent 55%), var(--color-bg);
}

/* واریانت رنگ پس‌زمینه برای هر کد خطا */
.errpg-stage--405 {
    background: radial-gradient(ellipse 60% 50% at 80% 20%, rgba(251, 146, 60, 0.16) 0%, transparent 55%), radial-gradient(ellipse 55% 45% at 15% 80%, rgba(168, 85, 247, 0.18) 0%, transparent 55%), var(--color-bg);
}

.errpg-stage--500 {
    background: radial-gradient(ellipse 65% 55% at 50% 15%, rgba(255, 43, 110, 0.16) 0%, transparent 55%), radial-gradient(ellipse 55% 45% at 20% 85%, rgba(168, 85, 247, 0.16) 0%, transparent 55%), var(--color-bg);
}

    /* اسکن‌لاین فقط روی 500 */
    .errpg-stage--500::after {
        content: "";
        position: absolute;
        inset: 0;
        z-index: -1;
        pointer-events: none;
        opacity: 0.05;
        background: repeating-linear-gradient(0deg, transparent 0 2px, #fff 2px 3px);
        animation: errpg-scan 8s linear infinite;
    }

@keyframes errpg-scan {
    to {
        background-position: 0 100px;
    }
}

/* ===== Aurora blobs ===== */
.errpg-aurora {
    position: absolute;
    border-radius: 50%;
    filter: blur(70px);
    opacity: 0.5;
    z-index: -2;
    mix-blend-mode: screen;
    pointer-events: none;
}

.errpg-aurora--1 {
    width: 460px;
    height: 460px;
    top: -120px;
    right: -80px;
    background: radial-gradient(circle, var(--color-primary), transparent 65%);
    animation: errpg-drift1 16s ease-in-out infinite;
}

.errpg-aurora--2 {
    width: 520px;
    height: 520px;
    bottom: -160px;
    left: -120px;
    background: radial-gradient(circle, var(--color-secondary), transparent 65%);
    animation: errpg-drift2 20s ease-in-out infinite;
}

.errpg-aurora--3 {
    width: 360px;
    height: 360px;
    top: 45%;
    left: 50%;
    background: radial-gradient(circle, var(--color-warning), transparent 70%);
    opacity: 0.28;
    animation: errpg-drift3 24s ease-in-out infinite;
}

/* واریانت رنگ برای 405 و 500 */
.errpg-stage--405 .errpg-aurora--1 {
    background: radial-gradient(circle, var(--color-warning), transparent 65%);
    right: auto;
    left: -80px;
}

.errpg-stage--405 .errpg-aurora--2 {
    background: radial-gradient(circle, var(--color-secondary), transparent 65%);
    left: auto;
    right: -120px;
}

.errpg-stage--405 .errpg-aurora--3 {
    background: radial-gradient(circle, var(--color-primary), transparent 70%);
    opacity: 0.3;
}

.errpg-stage--500 .errpg-aurora--1 {
    background: radial-gradient(circle, var(--neon-red), transparent 65%);
    right: -60px;
}

@keyframes errpg-drift1 {
    0%,100% {
        transform: translate(0,0) scale(1);
    }

    50% {
        transform: translate(-60px,50px) scale(1.12);
    }
}

@keyframes errpg-drift2 {
    0%,100% {
        transform: translate(0,0) scale(1);
    }

    50% {
        transform: translate(70px,-40px) scale(1.08);
    }
}

@keyframes errpg-drift3 {
    0%,100% {
        transform: translate(-50%,-50%) scale(1);
    }

    50% {
        transform: translate(-35%,-65%) scale(1.2);
    }
}

/* ===== Particle dust ===== */
.errpg-dust {
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
}

    .errpg-dust span {
        position: absolute;
        width: 3px;
        height: 3px;
        border-radius: 50%;
        animation: errpg-twinkle 3.5s ease-in-out infinite;
    }

@keyframes errpg-twinkle {
    0%,100% {
        opacity: .15;
        transform: scale(.6);
    }

    50% {
        opacity: .9;
        transform: scale(1.3);
    }
}

/* ===== Card ===== */
.errpg-card {
    position: relative;
    width: min(660px, 100%);
    text-align: center;
    padding: clamp(2rem, 5vw, 3.5rem) clamp(1.5rem, 4vw, 3rem);
    border-radius: var(--radius-xl);
    background: linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.02)), var(--color-surface-soft);
    border: 1px solid var(--color-border-soft);
    box-shadow: 0 30px 90px rgba(0,0,0,0.45);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    overflow: hidden;
    animation: errpg-card-in 0.8s cubic-bezier(0.22, 1, 0.36, 1) both;
}

@keyframes errpg-card-in {
    from {
        opacity: 0;
        transform: translateY(28px) scale(.97);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.errpg-card::before {
    content: "";
    position: absolute;
    inset: 0;
    padding: 1px;
    border-radius: inherit;
    background: conic-gradient(from var(--errpg-ang, 0deg), var(--color-primary), var(--color-secondary), var(--color-warning), var(--color-primary));
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    opacity: 0.55;
    animation: errpg-spin-ring 6s linear infinite;
    pointer-events: none;
}

.errpg-stage--500 .errpg-card::before {
    background: conic-gradient(from var(--errpg-ang, 0deg), var(--neon-red), var(--color-secondary), var(--color-warning), var(--neon-red));
    opacity: 0.6;
    animation-duration: 5s;
}

@property --errpg-ang {
    syntax: "<angle>";
    inherits: false;
    initial-value: 0deg;
}

@keyframes errpg-spin-ring {
    to {
        --errpg-ang: 360deg;
    }
}

/* ===== Glitch code number ===== */
.errpg-code {
    position: relative;
    font-size: clamp(6rem, 22vw, 13rem);
    font-weight: 900;
    line-height: 0.9;
    letter-spacing: 2px;
    background: linear-gradient(135deg, var(--color-primary), var(--color-secondary));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    filter: drop-shadow(0 0 24px var(--color-primary-soft));
    user-select: none;
}

.errpg-stage--405 .errpg-code {
    background: linear-gradient(135deg, var(--color-warning), var(--color-secondary));
    filter: drop-shadow(0 0 24px rgba(251,146,60,0.3));
}

.errpg-stage--500 .errpg-code {
    background: linear-gradient(135deg, var(--neon-red), var(--color-secondary));
    filter: drop-shadow(0 0 26px var(--neon-red-glow));
}

.errpg-code[data-text]::before,
.errpg-code[data-text]::after {
    content: attr(data-text);
    position: absolute;
    inset: 0;
    background: inherit;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.errpg-code[data-text]::before {
    text-shadow: 2px 0 var(--neon-red);
    animation: errpg-glitch1 2.6s infinite steps(2, end);
    clip-path: polygon(0 2%, 100% 2%, 100% 35%, 0 35%);
}

.errpg-code[data-text]::after {
    text-shadow: -2px 0 var(--color-primary);
    animation: errpg-glitch2 3.1s infinite steps(2, end);
    clip-path: polygon(0 62%, 100% 62%, 100% 100%, 0 100%);
}

@keyframes errpg-glitch1 {
    0%,92%,100% {
        transform: translate(0);
    }

    93% {
        transform: translate(-4px,-2px);
    }

    96% {
        transform: translate(3px,1px);
    }
}

@keyframes errpg-glitch2 {
    0%,90%,100% {
        transform: translate(0);
    }

    92% {
        transform: translate(4px,2px);
    }

    95% {
        transform: translate(-3px,-1px);
    }
}

/* ===== Badge ===== */
.errpg-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 1.2rem;
    padding: 0.4rem 1rem;
    border-radius: 999px;
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--color-primary);
    background: var(--color-primary-soft);
    border: 1px solid var(--color-border-soft);
}

.errpg-badge--warn {
    color: var(--color-warning);
    background: rgba(251,146,60,0.12);
}

.errpg-badge--danger {
    color: var(--neon-red);
    background: var(--neon-red-glow);
    border-color: var(--neon-red);
    box-shadow: 0 0 14px var(--neon-red-glow);
}

.errpg-badge .errpg-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--color-primary);
    box-shadow: 0 0 8px var(--color-primary);
    animation: errpg-pulse 1.6s ease-in-out infinite;
}

.errpg-badge--warn .errpg-dot {
    background: var(--color-warning);
    box-shadow: 0 0 8px var(--color-warning);
}

.errpg-badge--danger .errpg-dot {
    background: #fff;
    box-shadow: 0 0 8px #fff;
    animation-duration: 1.4s;
}

@keyframes errpg-pulse {
    0%,100% {
        transform: scale(1);
        opacity: 1;
    }

    50% {
        transform: scale(1.6);
        opacity: .5;
    }
}

/* ===== Texts ===== */
.errpg-title {
    font-size: clamp(1.4rem, 4vw, 2rem);
    font-weight: 800;
    margin: 0.6rem 0 0.8rem;
    letter-spacing: -0.5px;
}

.errpg-desc {
    font-size: clamp(0.95rem, 2.5vw, 1.08rem);
    color: var(--color-text-muted);
    line-height: 2;
    max-width: 48ch;
    margin: 0 auto 2rem;
}

/* ===== Buttons (re-uses look of .ui-btn) ===== */
.errpg-actions {
    display: flex;
    gap: 0.8rem;
    justify-content: center;
    flex-wrap: wrap;
}

.errpg-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.75rem 1.6rem;
    border-radius: 999px;
    border: 1px solid transparent;
    font-family: inherit;
    font-size: 0.98rem;
    font-weight: 700;
    cursor: pointer;
    text-decoration: none;
    transition: transform .18s ease, box-shadow .18s ease, background-color .18s ease, border-color .18s ease;
}

    .errpg-btn svg {
        width: 18px;
        height: 18px;
    }

.errpg-btn-primary {
    background: linear-gradient(135deg, var(--color-primary), var(--color-secondary));
    color: #fff;
    box-shadow: 0 12px 30px rgba(34, 211, 238, 0.28);
}

    .errpg-btn-primary:hover {
        transform: translateY(-3px);
        box-shadow: 0 18px 44px rgba(168, 85, 247, 0.42);
    }

.errpg-btn-ghost {
    background: transparent;
    color: var(--color-text);
    border-color: var(--color-border-soft);
}

    .errpg-btn-ghost:hover {
        background: var(--color-primary-soft);
        border-color: var(--color-primary);
        transform: translateY(-2px);
    }

/* ===== Theme toggle (namespaced) ===== */
.errpg-theme-toggle {
    position: fixed;
    top: 1.2rem;
    left: 1.2rem;
    z-index: 10;
    width: 46px;
    height: 46px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    cursor: pointer;
    color: var(--color-text);
    background: var(--color-surface-soft);
    border: 1px solid var(--color-border-soft);
    backdrop-filter: blur(10px);
    transition: transform .2s ease, background .2s ease;
}

    .errpg-theme-toggle:hover {
        transform: rotate(20deg) scale(1.08);
        background: var(--color-primary-soft);
    }

    .errpg-theme-toggle svg {
        width: 22px;
        height: 22px;
    }

/* ===== 405 — method chips ===== */
.errpg-method-stack {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.7rem;
    flex-wrap: wrap;
    margin: 0 auto 1.4rem;
}

.errpg-chip {
    font-weight: 800;
    font-size: 0.95rem;
    letter-spacing: 1px;
    padding: 0.5rem 1rem;
    border-radius: 12px;
    border: 1px solid var(--color-border-soft);
    background: var(--color-primary-soft);
    color: var(--color-primary);
    animation: errpg-chip-float 3s ease-in-out infinite;
}

    .errpg-chip:nth-child(2) {
        animation-delay: .3s;
    }

.errpg-chip--blocked {
    position: relative;
    color: var(--neon-red);
    background: var(--neon-red-glow);
    border-color: var(--neon-red);
    box-shadow: 0 0 14px var(--neon-red-glow);
    animation: errpg-chip-shake 2.4s ease-in-out infinite;
}

    .errpg-chip--blocked::after {
        content: "";
        position: absolute;
        inset: 0;
        border-radius: 12px;
        background: linear-gradient(135deg, transparent 45%, var(--neon-red) 46%, var(--neon-red) 54%, transparent 55%);
        opacity: .85;
    }

@keyframes errpg-chip-float {
    0%,100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-6px);
    }
}

@keyframes errpg-chip-shake {
    0%,88%,100% {
        transform: translateX(0);
    }

    90% {
        transform: translateX(-3px);
    }

    94% {
        transform: translateX(3px);
    }
}

/* ===== 500 — server rack ===== */
.errpg-server {
    width: 84px;
    margin: 0 auto 1.3rem;
    display: flex;
    flex-direction: column;
    gap: 6px;
    animation: errpg-server-shake 3s ease-in-out infinite;
}

    .errpg-server .errpg-rack {
        height: 22px;
        border-radius: 7px;
        background: var(--color-primary-soft);
        border: 1px solid var(--color-border-soft);
        display: flex;
        align-items: center;
        padding: 0 9px;
        gap: 6px;
    }

        .errpg-server .errpg-rack .errpg-led {
            width: 7px;
            height: 7px;
            border-radius: 50%;
        }

        .errpg-server .errpg-rack:nth-child(1) .errpg-led {
            background: var(--neon-red);
            box-shadow: 0 0 8px var(--neon-red-glow);
            animation: errpg-blink 1s steps(2) infinite;
        }

        .errpg-server .errpg-rack:nth-child(2) .errpg-led {
            background: var(--color-warning);
            box-shadow: 0 0 8px var(--color-warning);
            animation: errpg-blink 1.4s steps(2) infinite;
        }

        .errpg-server .errpg-rack:nth-child(3) .errpg-led {
            background: var(--neon-red);
            box-shadow: 0 0 8px var(--neon-red-glow);
            animation: errpg-blink .7s steps(2) infinite;
        }

        .errpg-server .errpg-rack .errpg-bar {
            flex: 1;
            height: 4px;
            border-radius: 3px;
            background: linear-gradient(90deg, var(--color-border-soft), transparent);
        }

@keyframes errpg-blink {
    0%,49% {
        opacity: 1;
    }

    50%,100% {
        opacity: .25;
    }
}

@keyframes errpg-server-shake {
    0%,90%,100% {
        transform: translateX(0) rotate(0);
    }

    92% {
        transform: translateX(-2px) rotate(-.5deg);
    }

    96% {
        transform: translateX(2px) rotate(.5deg);
    }
}

/* 500 uses harsher glitch timing */
.errpg-stage--500 .errpg-code[data-text]::before {
    text-shadow: 3px 0 var(--neon-yellow);
    animation: errpg-glitch1 2.2s infinite steps(2,end);
    clip-path: polygon(0 2%,100% 2%,100% 36%,0 36%);
}

.errpg-stage--500 .errpg-code[data-text]::after {
    text-shadow: -3px 0 var(--color-primary);
    animation: errpg-glitch2 2.7s infinite steps(2,end);
    clip-path: polygon(0 60%,100% 60%,100% 100%,0 100%);
}

.errpg-stage--405 .errpg-code[data-text]::before {
    text-shadow: 2px 0 var(--neon-yellow);
}

/* ===== Responsive + a11y ===== */
@media (max-width: 480px) {
    .errpg-actions {
        flex-direction: column;
    }

    .errpg-btn {
        width: 100%;
    }
}

@media (prefers-reduced-motion: reduce) {
    .errpg-stage *, .errpg-stage *::before, .errpg-stage *::after {
        animation: none !important;
    }
}
/* ===== پایان صفحات خطا ===== */

.errpg-stage--405 .errpg-code {
    background: linear-gradient(135deg, var(--color-warning), var(--color-secondary));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    filter: drop-shadow(0 0 24px rgba(251,146,60,0.3));
}

.errpg-stage--500 .errpg-code {
    background: linear-gradient(135deg, var(--neon-red), var(--color-secondary));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    filter: drop-shadow(0 0 26px var(--neon-red-glow));
}
/* #endregion  صفحات خطا — 404 / 405 / 500  (Error Pages)*/


/* باکس دربرگیرنده عکس جایزه */
.cw-winner-prize-container {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%; /* عرضش از باکس اصلی بیشتر نمیشه */
    max-width: 180px; /* می‌تونی این رو بر اساس سایز باکست تغییر بدی (مثلاً ۱۵۰ یا ۲۰۰) */
    height: 140px; /* یک ارتفاع منطقی و ثابت برای جایزه داخل باکس */
    margin: 0 auto; /* قرارگیری در وسط باکس */
}

/* خود عکس جایزه */
.cw-winner-prize {
    max-width: 100%; /* عرض عکس هرگز از باکس بیشتر نمیشه */
    max-height: 100%; /* ارتفاع عکس هرگز از باکس بیشتر نمیشه */
    /* دستور اصلی: تناسب عکس رو حفظ می‌کنه. 
       سکه رو کاملاً دایره نگه می‌داره و تیکت ۱۰٪ رو هم بدون کشیدگی عمودی، 
       به بهترین شکل داخل باکس جا میده */
    object-fit: contain;
    display: block;
}



/* باکس دربرگیرنده عکس در صفحه جوایز من */
.mp-thumb {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    /* این سایزها رو می‌تونی نسبت به طراحی کارت جوایزت تغییر بدی */
    max-width: 120px;
    height: 120px;
    margin: 0 auto;
    position: relative; /* بسیار مهم: برای اینکه مهرهای "استفاده شد" به درستی روی عکس بیفتند */
}

/*برای نو بار موبایل */
/* ===================================================
   موبایل: نمایش متن کوچک زیر آیکون‌ها + افکت پرشدن (سفید) هنگام انتخاب
   پروفایل پر نمی‌شود
   =================================================== */
@media (max-width: 768px) {

    /* 1) نمایش متن کوچک زیر هر آیکون */
    .floating-menu__item .floating-menu__text {
        display: block !important;
        font-size: 0.62rem !important;
        font-weight: 700;
        line-height: 1.1;
        margin-top: 4px;
        text-align: center;
        white-space: nowrap;
        opacity: 0.85;
    }

    .floating-menu__item {
        flex-direction: column !important;
        gap: 2px !important;
        justify-content: center;
        padding: 0.4rem 0.1rem !important;
    }


        /* متن آیتم فعال پررنگ‌تر */
        .floating-menu__item.active .floating-menu__text {
            opacity: 1 !important;
            color: var(--color-primary);
        }

    /* 3) پروفایل: متن دارد ولی پر نمی‌شود */
    .mobile-profile-item .floating-menu__text {
        display: block !important;
    }

    .mobile-profile-item.active .mobile-profile-avatar {
        filter: none !important;
        background: transparent !important;
    }
}




/* ==========================================================
   دکمه تورنمنت‌ها - تم رقابتی و چالشی (Neon E-sports Clash)
   ========================================================== */
.dash-tile--Tournament {
    position: relative !important;
    overflow: hidden !important;
    /* 🎨 گرادیانت متضاد و پرانرژی: از قرمز-صورتی نئونی به بنفش عمیق و سپس آبی فیروزه‌ای */
    background: linear-gradient(135deg, #00d4ff 0%, #5b21b6 50%, #ff004f 100%) !important;
    /* حاشیه بنفش روشن برای یکپارچگی المان‌ها */
    border: 1px solid #c084fc !important;
    box-shadow: 0 4px 15px rgba(91, 33, 182, 0.3) !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

    /* افکت هاور درخشان و رقابتی */
    .dash-tile--Tournament:hover {
        transform: translateY(-2px);
        border-color: #00d4ff !important;
        /* سایه دوگانه برای تاکید روی تضاد رنگ‌ها */
        box-shadow: -8px 8px 25px rgba(255, 0, 79, 0.25), 8px 8px 25px rgba(0, 212, 255, 0.25) !important;
    }

    /* 🎮 واترمارک پس‌زمینه (لوگوی بازی) */
    .dash-tile--Tournament::before {
        content: '';
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 450px;
        height: 450px;
        background-image: url('/assets/game-icon.png') !important;
        background-repeat: no-repeat !important;
        background-size: contain !important;
        background-position: center !important;
        /* شفافیت ملایم برای ترکیب شدن با رنگ‌های پرانرژی پس‌زمینه */
        opacity: 0.15;
        z-index: 0;
        pointer-events: none;
    }

    /* تنظیم لایه‌های محتوا برای قرارگیری روی واترمارک */
    .dash-tile--Tournament .dash-tile__content {
        position: relative;
        z-index: 1;
        width: 100%;
    }

    .dash-tile--Tournament h3 {
        color: #ffffff;
        font-weight: 900;
        text-shadow: 0 2px 5px rgba(0, 0, 0, 0.4);
    }

    .dash-tile--Tournament p {
        color: rgba(255, 255, 255, 0.9) !important;
        font-weight: 600;
        text-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
    }

/* 📱 ریسپانسیو اختصاصی فقط برای کنترل سایز واترمارک در موبایل */
@media (max-width: 580px) {
    .dash-tile--Tournament::before {
        width: 220px;
        height: 220px;
        opacity: 0.2; /* در موبایل کمی پررنگ‌تر تا خودش را بهتر نشان دهد */
    }
}




/* ====================================================
   جداکننده افقی بین ۳ باکس اطلاعات و نویسنده در موبایل
   ==================================================== */

@media (max-width: 768px) {
    /* استایل‌دهی به باکسِ حاوی تاریخ، بازدید و زمان مطالعه */
    .bd-hero__meta,
    .bd-hero__meta--belowimage {
        border-bottom: 1px solid var(--color-border-soft) !important; /* خط عرضی ملایم */
        padding-bottom: 1.2rem !important; /* فاصله آیکون‌ها تا خط */
        margin-bottom: 1.2rem !important; /* فاصله خط تا بخش نویسنده */
        width: 100% !important;
        justify-content: center !important; /* وسط‌چین کردن ۳ تا باکس در موبایل */
        gap: 1rem !important;
        flex-wrap: wrap !important;
    }

    /* تنظیم بخش نویسنده در زیر خط */
    .bd-author,
    .bd-author--belowimage {
        width: 100% !important;
        justify-content: center !important; /* وسط‌چین کردن عکس و نام نویسنده */
        padding-top: 0.2rem !important;
    }
}

/* ====================================================
   خنثی کردن استایل‌های پیش‌فرض دکمه برای لینکِ "ادامه مطلب"
   ==================================================== */

button.blog-readmore-link {
    background: transparent !important; /* حذف پس‌زمینه دکمه */
    border: none !important; /* حذف حاشیه (Border) پیش‌فرض */
    padding: 0; /* حذف فاصله‌های داخلی اضافه */
    font-family: inherit; /* ارث‌بری فونت سایت (وزیرمتن) */
    font-size: inherit; /* ارث‌بری سایز متن */
    color: inherit; /* ارث‌بری رنگ لینک */
    cursor: pointer; /* تبدیل نشانگر ماوس به حالت کلیک (دست) */
    outline: none; /* حذف کادر آبی/سیاه دور دکمه هنگام کلیک */
}

    /* برای اینکه هنگام هاور (Hover) یا کلیک کردن رنگ پس‌زمینه نگیرد */
    button.blog-readmore-link:hover,
    button.blog-readmore-link:focus,
    button.blog-readmore-link:active {
        background: transparent !important;
        outline: none !important;
    }

/* #region Comments Page*/

/* ═══════════════════════════════════════════════════ */
/*  GRID - دسکتاپ ۳ ستون / تبلت ۲ ستون / موبایل ۱ ستون */
/* ═══════════════════════════════════════════════════ */
.comments-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.4rem;
    width: 100%;
    direction: rtl;
}

/* override کردن flex قدیمی testimonial-card که برای اسلایدر بود */
.comments-grid-card.testimonial-card {
    flex: unset;
    min-width: 0;
    padding: 0;
}

.comments-grid-card .testimonial-card__inner {
    height: 100%;
    display: flex;
    flex-direction: column;
}

.comments-grid-card .testimonial-text {
    flex: 1;
    display: -webkit-box;
    -webkit-line-clamp: 6;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ═══════════════════════════════════════════════════ */
/*  RESPONSIVE                                         */
/* ═══════════════════════════════════════════════════ */
@media (max-width: 1100px) {
    .comments-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 1.2rem;
    }
}

@media (max-width: 768px) {
    .comments-grid {
        grid-template-columns: 1fr;
        gap: 1rem;
    }
}

/* ═══════════════════════════════════════════════════ */
/*  SKELETON LOADING                                   */
/* ═══════════════════════════════════════════════════ */
.skeleton-card {
    pointer-events: none;
    opacity: 0.8;
}

.skeleton-avatar {
    width: 54px;
    height: 54px;
    border-radius: 50%;
    flex: 0 0 auto;
    background: linear-gradient(90deg, #2a2a2a 25%, #333 50%, #2a2a2a 75%);
    background-size: 200% 100%;
    animation: skeleton-loading 1.5s infinite;
}

.skeleton-meta-block {
    display: flex;
    flex-direction: column;
    gap: .5rem;
    flex: 1;
}

.skeleton-line {
    height: 14px;
    background: linear-gradient(90deg, #2a2a2a 25%, #333 50%, #2a2a2a 75%);
    background-size: 200% 100%;
    animation: skeleton-loading 1.5s infinite;
    border-radius: 4px;
    margin-bottom: 10px;
}

    .skeleton-line.short {
        width: 40%;
        height: 16px;
        margin-bottom: 0;
    }

    .skeleton-line.tiny {
        width: 25%;
        height: 10px;
        margin-bottom: 0;
    }

    .skeleton-line.subtitle {
        width: 100%;
    }

        .skeleton-line.subtitle.secondary {
            width: 65%;
        }

@keyframes skeleton-loading {
    0% {
        background-position: 200% 0;
    }

    100% {
        background-position: -200% 0;
    }
}

@media (prefers-color-scheme: light) {
    .skeleton-avatar, .skeleton-line {
        background: linear-gradient(90deg, #f2f2f2 25%, #e6e6e6 50%, #f2f2f2 75%);
        background-size: 200% 100%;
    }
}
/* #endregion  Comments Page*/

/* #region blog detail */
/* ============ ROOT ============ */
.bd-article {
    direction: rtl;
    color: inherit; /* رنگ از تم سایت ارث می‌برد */
    background: transparent; /* بک‌گراند صفحه دست‌نخورده */
    min-height: 100vh;
    font-family: inherit;
}

/* ============ HERO ============ */
.bd-hero {
    position: relative;
    width: 100%;
    height: 60vh;
    min-height: 380px;
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    background-color: #1a1a1d;
    display: flex;
    align-items: flex-end;
    overflow: hidden;
}

.bd-hero__overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient( to top, rgba(0,0,0,0.92) 0%, rgba(0,0,0,0.65) 40%, rgba(0,0,0,0.35) 70%, rgba(0,0,0,0.15) 100% );
    pointer-events: none;
}

.bd-hero__inner {
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: 1100px;
    margin: 0 auto;
    padding: 2rem 2.5rem 2.2rem;
    display: flex;
    flex-direction: column;
    gap: 0.95rem;
}

.bd-hero__title {
    font-size: clamp(1.6rem, 3.2vw, 2.8rem);
    font-weight: 800;
    color: #fff;
    line-height: 1.35;
    margin: 0;
    text-shadow: 0 2px 18px rgba(0,0,0,0.6);
}

.bd-hero__subtitle {
    font-size: clamp(0.95rem, 1.4vw, 1.15rem);
    color: #d4d4d8;
    line-height: 1.7;
    margin: 0;
    max-width: 820px;
    text-shadow: 0 1px 8px rgba(0,0,0,0.55);
}

.bd-hero__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 1.2rem;
    margin-top: 0.2rem;
}

.bd-meta-item {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    font-size: 0.9rem;
    color: #e4e4e7;
    background: rgba(255,255,255,0.08);
    backdrop-filter: blur(6px);
    padding: 0.4rem 0.75rem;
    border-radius: 999px;
    border: 1px solid rgba(255,255,255,0.1);
}

    .bd-meta-item svg {
        width: 16px;
        height: 16px;
        flex-shrink: 0;
    }

.bd-hero__author {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    margin-top: 0.3rem;
    padding-top: 0.9rem;
    border-top: 1px solid rgba(255,255,255,0.12);
}

.bd-author__avatar {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: rgba(255,255,255,0.06);
    border: 2px solid rgba(255,255,255,0.18);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    flex-shrink: 0;
}

    .bd-author__avatar img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .bd-author__avatar svg {
        width: 22px;
        height: 22px;
    }

.bd-hero__author .bd-author__avatar {
    color: #d4d4d8;
}

.bd-author__txt {
    display: flex;
    flex-direction: column;
    line-height: 1.3;
}

.bd-author__by {
    font-size: 0.75rem;
    opacity: 0.7;
}

.bd-hero__author .bd-author__by {
    color: #a1a1aa;
}

.bd-author__name {
    font-size: 0.95rem;
    font-weight: 700;
}

.bd-hero__author .bd-author__name {
    color: #fff;
}

/* ============ MOBILE META BAR (پیش‌فرض مخفی) ============ */
.bd-mobilebar {
    display: none;
}

/* ============ CONTENT ============ */
.bd-content-wrap {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 3rem 1rem 4rem;
    background: transparent; /* هم‌رنگ صفحه */
}

.bd-content {
    width: 70%;
    max-width: 900px;
    font-size: 1.05rem;
    line-height: 2.1;
    color: inherit;
}

    .bd-content h1,
    .bd-content h2,
    .bd-content h3,
    .bd-content h4 {
        color: inherit;
        font-weight: 800;
        line-height: 1.5;
        margin: 2.2rem 0 1rem;
    }

    .bd-content h2 {
        font-size: 1.7rem;
        position: relative;
        padding-right: 0.9rem;
    }

        .bd-content h2::before {
            content: "";
            position: absolute;
            right: 0;
            top: 0.4rem;
            bottom: 0.4rem;
            width: 4px;
            border-radius: 4px;
            background: linear-gradient(180deg, #f59e0b, #ef4444);
        }

    .bd-content h3 {
        font-size: 1.35rem;
    }

    .bd-content p {
        margin: 0 0 1.2rem;
        text-align: justify;
    }

    .bd-content a {
        color: #f59e0b;
        text-decoration: none;
        border-bottom: 1px dashed rgba(245,158,11,0.5);
        transition: all 0.2s;
    }

        .bd-content a:hover {
            color: #fbbf24;
            border-bottom-color: #fbbf24;
        }

    .bd-content strong {
        font-weight: 800;
    }

    .bd-content blockquote {
        margin: 1.8rem 0;
        padding: 1.1rem 1.4rem;
        background: rgba(245,158,11,0.08);
        border-right: 4px solid #f59e0b;
        border-radius: 8px;
        font-style: italic;
    }

    .bd-content ul,
    .bd-content ol {
        margin: 1rem 0 1.4rem;
        padding-right: 1.5rem;
    }

    .bd-content li {
        margin-bottom: 0.5rem;
    }

    .bd-content img {
        max-width: 100%;
        height: auto;
        border-radius: 10px;
        margin: 1.4rem 0;
        display: block;
    }

    .bd-content code {
        background: rgba(0,0,0,0.18);
        color: #fbbf24;
        padding: 0.15rem 0.4rem;
        border-radius: 4px;
        font-family: monospace;
        font-size: 0.92em;
    }

    .bd-content pre {
        background: rgba(0,0,0,0.22);
        padding: 1rem;
        border-radius: 8px;
        overflow-x: auto;
        direction: ltr;
        text-align: left;
        margin: 1.4rem 0;
    }

.bd-empty {
    text-align: center;
    opacity: 0.6;
    padding: 2rem 0;
}

/* ============ FOOTER ============ */
.bd-footer {
    width: 70%;
    max-width: 900px;
    margin-top: 3rem;
    padding-top: 1.6rem;
    border-top: 1px solid rgba(128,128,128,0.18);
    display: flex;
    justify-content: center;
}

.bd-back-link {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    color: #f59e0b;
    text-decoration: none;
    font-weight: 600;
    padding: 0.6rem 1.2rem;
    border-radius: 8px;
    border: 1px solid rgba(245,158,11,0.4);
    transition: all 0.2s;
}

    .bd-back-link:hover {
        background: rgba(245,158,11,0.1);
        color: #fbbf24;
    }

    .bd-back-link svg {
        width: 16px;
        height: 16px;
    }

/* ============ RELATED SLIDER ============ */
.bd-related {
    width: 100%;
    max-width: 1200px;
    margin: 1rem auto 4rem;
    padding: 1.5rem;
    direction: rtl;
}

.bd-related__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1.4rem;
    gap: 1rem;
}

.bd-related__title-wrap {
    display: flex;
    align-items: center;
    gap: 0.7rem;
}

.bd-related__bar {
    width: 4px;
    height: 24px;
    border-radius: 4px;
    background: linear-gradient(180deg, #f59e0b, #ef4444);
}

.bd-related__title {
    font-size: 1.4rem;
    font-weight: 800;
    margin: 0;
    color: inherit;
}

.bd-related__nav {
    display: flex;
    gap: 0.5rem;
}

.bd-related__btn {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    border: 1px solid rgba(128,128,128,0.25);
    background: rgba(128,128,128,0.05);
    color: inherit;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}

    .bd-related__btn:hover {
        background: rgba(245,158,11,0.12);
        border-color: rgba(245,158,11,0.5);
        color: #fbbf24;
    }

    .bd-related__btn svg {
        width: 18px;
        height: 18px;
    }

.bd-related__track {
    display: flex;
    gap: 1rem;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    padding-bottom: 1rem;
    scrollbar-width: thin;
    scrollbar-color: rgba(245,158,11,0.4) transparent;
}

    .bd-related__track::-webkit-scrollbar {
        height: 6px;
    }

    .bd-related__track::-webkit-scrollbar-thumb {
        background: rgba(245,158,11,0.4);
        border-radius: 999px;
    }

    .bd-related__track::-webkit-scrollbar-track {
        background: transparent;
    }

.bd-rel-card {
    flex: 0 0 auto;
    width: calc((100% - 3rem) / 4); /* ۴ کارت در یک نما */
    min-width: 240px;
    max-width: 320px;
    scroll-snap-align: start;
    background: rgba(128,128,128,0.06);
    border: 1px solid rgba(128,128,128,0.15);
    border-radius: 14px;
    overflow: hidden;
    text-decoration: none;
    color: inherit;
    display: flex;
    flex-direction: column;
    transition: all 0.25s;
}

    .bd-rel-card:hover {
        transform: translateY(-3px);
        border-color: rgba(245,158,11,0.4);
        box-shadow: 0 10px 30px rgba(0,0,0,0.2);
    }

.bd-rel-card__img {
    width: 100%;
    aspect-ratio: 16 / 9;
    background: rgba(128,128,128,0.1);
    overflow: hidden;
}

    .bd-rel-card__img img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: transform 0.4s;
    }

.bd-rel-card:hover .bd-rel-card__img img {
    transform: scale(1.05);
}

.bd-rel-card__placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0.3;
}

    .bd-rel-card__placeholder svg {
        width: 38px;
        height: 38px;
    }

.bd-rel-card__body {
    padding: 0.9rem 1rem 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
    flex: 1;
}

.bd-rel-card__title {
    font-size: 1rem;
    font-weight: 700;
    margin: 0;
    line-height: 1.5;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.bd-rel-card__sub {
    font-size: 0.85rem;
    opacity: 0.7;
    margin: 0;
    line-height: 1.6;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.bd-rel-card__meta {
    display: flex;
    justify-content: space-between;
    gap: 0.5rem;
    margin-top: auto;
    padding-top: 0.5rem;
    font-size: 0.75rem;
    opacity: 0.7;
}

    .bd-rel-card__meta span {
        display: inline-flex;
        align-items: center;
        gap: 0.3rem;
    }

    .bd-rel-card__meta svg {
        width: 13px;
        height: 13px;
    }

/* ============ LOADING / NOT FOUND ============ */
.bd-loading,
.bd-notfound {
    min-height: 60vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    text-align: center;
    padding: 2rem;
    direction: rtl;
}

    .bd-notfound h2 {
        margin: 0;
    }

.bd-spinner {
    width: 42px;
    height: 42px;
    border: 3px solid rgba(245,158,11,0.2);
    border-top-color: #f59e0b;
    border-radius: 50%;
    animation: bd-spin 0.9s linear infinite;
}

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

/* ============ TABLET (3 کارت در یک نما) ============ */
@media (max-width: 1024px) {
    .bd-rel-card {
        width: calc((100% - 2rem) / 3);
    }
}

/* ============ MOBILE ============ */
@media (max-width: 768px) {
    .bd-hero {
        height: 30vh;
        min-height: 240px;
        align-items: flex-end;
    }

    .bd-hero__inner {
        padding: 0.85rem 1rem 1rem;
        gap: 0.4rem;
    }

    .bd-hero__title {
        font-size: 1.15rem;
        line-height: 1.45;
    }

    .bd-hero__subtitle {
        font-size: 0.82rem;
        line-height: 1.5;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }
    /* در موبایل متا و نویسنده روی عکس مخفی می‌شوند تا عکس کامل دیده شود */
    .bd-hero__meta--onimage,
    .bd-hero__author--onimage {
        display: none;
    }
    /* بار زیر عکس نمایش داده می‌شود */
    .bd-mobilebar {
        display: flex;
        flex-direction: column;
        gap: 0.8rem;
        padding: 1rem;
        background: transparent;
    }

    .bd-mobilebar__meta {
        display: flex;
        flex-wrap: wrap;
        gap: 0.45rem;
    }

    .bd-mobilebar .bd-meta-item {
        font-size: 0.75rem;
        padding: 0.32rem 0.6rem;
        color: inherit;
    }

        .bd-mobilebar .bd-meta-item svg {
            width: 13px;
            height: 13px;
        }

    .bd-mobilebar__author {
        display: flex;
        align-items: center;
        gap: 0.55rem;
    }

        .bd-mobilebar__author .bd-author__avatar {
            width: 34px;
            height: 34px;
            color: inherit;
        }

        .bd-mobilebar__author .bd-author__by {
            font-size: 0.7rem;
            color: inherit;
        }

        .bd-mobilebar__author .bd-author__name {
            font-size: 0.85rem;
            color: inherit;
        }
    /* محتوا: عرض کامل با فاصله کم از گوشه‌ها */
    .bd-content-wrap {
        padding: 1.5rem 0.85rem 2.5rem;
    }

    .bd-content {
        width: 100%;
        font-size: 0.98rem;
        line-height: 1.95;
    }

        .bd-content h2 {
            font-size: 1.3rem;
        }

        .bd-content h3 {
            font-size: 1.1rem;
        }

    .bd-footer {
        width: 100%;
        margin-top: 2rem;
    }
    /* اسلایدر: کارت‌ها بزرگ‌تر و یک‌ونیم تا دو تا در نما */
    .bd-related {
        padding: 0 0.85rem;
        margin-bottom: 3rem;
    }

    .bd-related__title {
        font-size: 1.15rem;
    }

    .bd-related__btn {
        width: 34px;
        height: 34px;
    }

    .bd-rel-card {
        width: 78%;
        min-width: 0;
    }
}

@media (max-width: 480px) {
    .bd-hero__title {
        font-size: 1.05rem;
    }

    .bd-rel-card {
        width: 85%;
    }
}
/* #endregion blog detail */

/* #region new  USER-CARD */

.ucm {
    position: relative;
    isolation: isolate;
    display: flex;
    border-radius: var(--radius-xl, 22px);
    overflow: hidden;
    border: 1px solid var(--color-border-soft);
    box-shadow: var(--shadow-soft);
    direction: rtl;
    text-align: right;
    min-height: 230px;
}

    /* هاله‌ی نرم رنگی پشت کارت هنگام هاور */
    .ucm::before {
        content: "";
        position: absolute;
        inset: -1px;
        border-radius: inherit;
        padding: 1px;
        background: linear-gradient(135deg, rgba(34, 211, 238, .5), rgba(168, 85, 247, .5), rgba(251, 191, 36, .4));
        -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
        mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
        -webkit-mask-composite: xor;
        mask-composite: exclude;
        opacity: 0;
        transition: opacity .3s ease;
        pointer-events: none;
        z-index: 6;
    }

    .ucm:hover::before {
        opacity: 1;
    }

/* ── لایه‌ی بنر (پس‌زمینه‌ی کل کادر) ─────────────────────────────────────────
   عکس کامل و فیت‌شده با کادر، با کمترین کراپ ممکن (cover + وسط‌چین). */
.ucm__bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    background-image: var(--user-banner, linear-gradient(135deg, #1e1b4b, #4c1d95));
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

/* پوشش تیره‌ی گرادینی تا متن‌ها روی هر بنری خوانا بمانند */
.ucm__bg-overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(90deg, rgba(7, 11, 28, .82) 0%, rgba(7, 11, 28, .55) 45%, rgba(7, 11, 28, .25) 100%), radial-gradient(circle at 92% 6%, rgba(168, 85, 247, .25), transparent 45%), radial-gradient(circle at 5% 95%, rgba(34, 211, 238, .2), transparent 50%);
    pointer-events: none;
}

.ucm--banned .ucm__bg-overlay {
    background: linear-gradient(90deg, rgba(40, 7, 7, .85) 0%, rgba(40, 7, 7, .6) 45%, rgba(40, 7, 7, .3) 100%);
}

/* ── دکمه‌ها (پایه) ──────────────────────────────────────────────────────── */
.ucm__btn {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .5rem .95rem;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, .28);
    background: rgba(10, 15, 30, .5);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    color: #fff;
    font-family: inherit;
    font-size: .82rem;
    font-weight: 700;
    cursor: pointer;
    white-space: nowrap;
    transition: background-color .15s, transform .12s, border-color .15s;
}

    .ucm__btn svg {
        width: 16px;
        height: 16px;
    }

    .ucm__btn:hover {
        transform: translateY(-1px);
    }

.ucm__btn--edit:hover {
    background: rgba(6, 182, 212, .6);
    border-color: rgba(34, 211, 238, .7);
}

.ucm__btn--logout:hover {
    background: rgba(239, 68, 68, .65);
    border-color: rgba(248, 113, 113, .7);
}

/* دکمه خروج: گوشه بالا-چپ کادر (left صریح تا با RTL تداخل نکند) */
.ucm__logout-corner {
    position: absolute;
    top: .8rem;
    left: .8rem;
    right: auto;
    z-index: 5;
}

/* دکمه ویرایش گوشه بالا-راست — فقط در موبایل دیده می‌شود */
.ucm__edit-corner {
    position: absolute;
    top: .8rem;
    right: .8rem;
    left: auto;
    z-index: 5;
    display: none; /* در دسکتاپ پنهان */
}

/* دکمه ویرایش زیر آواتار — فقط در دسکتاپ */
.ucm__edit-desktop-only {
    display: inline-flex;
}

/* ── بدنه روی بنر ────────────────────────────────────────────────────────── */
.ucm__body {
    position: relative;
    z-index: 2;
    flex: 1;
    display: flex;
    align-items: center; /* وسط طولی (عمودی) کارت */
    gap: 1.6rem;
    padding: 1.6rem 1.6rem 1.6rem 1.6rem;
}

/* ── ستون آواتار + دکمه ویرایش زیر آن ── */
.ucm__avatar-col {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .9rem;
    flex: 0 0 auto;
}

.ucm__avatar {
    position: relative;
    width: 118px;
    height: 118px;
    cursor: pointer;
    flex: 0 0 auto;
}

    .ucm__avatar img {
        position: relative;
        z-index: 1;
        width: 100%;
        height: 100%;
        border-radius: 50%;
        object-fit: cover;
        object-position: center;
        background: #1e293b;
        box-shadow: 0 10px 26px rgba(0, 0, 0, .55);
        border: 3px solid rgba(255, 255, 255, .18);
        transition: transform .2s ease;
    }

    .ucm__avatar:hover img {
        transform: scale(1.03);
    }

    /* کادر تزئینی بیرون آواتار */
    .ucm__avatar::before {
        content: "";
        position: absolute;
        inset: -15px;
        z-index: 2;
        background: var(--user-frame, none) center / contain no-repeat;
        pointer-events: none;
    }

/* fallback: اگر کادر ست نشده باشد، ring رنگی چرخان */
.ucm:not([style*="--user-frame"]) .ucm__avatar::before {
    inset: -7px;
    /*    background: conic-gradient(from 0deg, #a855f7, #ec4899, #fbbf24, #06b6d4, #a855f7);
    -webkit-mask: radial-gradient(circle, transparent 60%, #000 64%);*/
    mask: radial-gradient(circle, transparent 60%, #000 64%);
    animation: ucm-rot 8s linear infinite;
}

@keyframes ucm-rot {
    to {
        transform: rotate(360deg);
    }
}

/* آیکن قلم روی آواتار */
.ucm__avatar-edit {
    position: absolute;
    bottom: 2px;
    inset-inline-start: 2px;
    z-index: 3;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: linear-gradient(135deg, #06b6d4, #3b82f6);
    color: #fff;
    border: 2px solid rgba(255,255,255,.85);
    box-shadow: 0 4px 10px rgba(0, 0, 0, .35);
    opacity: 0;
    transform: scale(.7);
    transition: opacity .18s, transform .18s;
}

    .ucm__avatar-edit svg {
        width: 13px;
        height: 13px;
    }

.ucm__avatar:hover .ucm__avatar-edit {
    opacity: 1;
    transform: scale(1);
}

/* دکمه ویرایش زیر عکس (دسکتاپ) */
.ucm__edit-under {
    width: 100%;
    justify-content: center;
}

/* ── ستون محتوا (نام/اطلاعات + باکس‌ها) — وسط طولی کارت ── */
.ucm__content {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: center; /* وسط طولی */
    gap: 1.1rem;
}

/* ── متادیتا (نام/کد/شماره) ── */
.ucm__meta {
    display: flex;
    flex-direction: column;
    gap: .4rem;
    min-width: 0;
}

.ucm__name {
    font-size: 1.35rem;
    font-weight: 800;
    color: #fff;
    line-height: 1.3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-shadow: 0 2px 8px rgba(0,0,0,.5);
}

.ucm__rows {
    display: flex;
    flex-wrap: wrap;
    gap: .35rem 1rem;
}

.ucm__row {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    font-size: .85rem;
    color: rgba(255, 255, 255, .82);
    min-width: 0; /* اجازه شکستن خط در صورت لزوم */
}

    .ucm__row svg {
        width: 14px;
        height: 14px;
        flex: 0 0 14px;
        opacity: .85;
    }

    .ucm__row b {
        color: #fff;
        font-weight: 700;
        font-feature-settings: "tnum";
    }

/* ── باکس‌های آماری ── */
.ucm__stats {
    display: flex;
    gap: .5rem;
    flex-direction: row-reverse; /* X Coin سمت راست */
    flex-wrap: wrap;
}

/* باکس X Coin — شفافیت کم‌تر تا بنر زیرش خراب نشود */
.ucm-wallet {
    display: flex;
    align-items: center;
    gap: .65rem;
    padding: .6rem .85rem;
    border-radius: var(--radius-lg, 16px);
    background: linear-gradient(135deg, rgba(251, 191, 36, .32), rgba(245, 158, 11, .22));
    border: 1px solid rgba(251, 191, 36, .5);
    box-shadow: 0 8px 22px rgba(0, 0, 0, .25);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    min-width: 0;
}

.ucm--banned .ucm-wallet {
    background: linear-gradient(135deg, rgba(239, 68, 68, .35), rgba(220, 38, 38, .22));
    border-color: rgba(239, 68, 68, .55);
}

.ucm-coin {
    width: 42px;
    height: 42px;
    flex: 0 0 42px;
    background: url('/assets/shop/x-coin.png') center / contain no-repeat;
    filter: drop-shadow(0 4px 10px rgba(245, 158, 11, .5));
    animation: ucm-coin-spin 4.5s ease-in-out infinite;
}

@keyframes ucm-coin-spin {
    0%, 100% {
        transform: rotateY(0deg);
    }

    50% {
        transform: rotateY(180deg);
    }
}

.ucm-wallet__t {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
}

.ucm-wallet__lbl {
    font-size: .72rem;
    font-weight: 700;
    color: rgba(255, 255, 255, .9);
}

.ucm-wallet__val {
    font-family: "Vazirmatn", system-ui, sans-serif;
    font-weight: 900;
    font-size: 1.35rem;
    line-height: 1.05;
    color: #ffd54a;
    font-feature-settings: "tnum";
    word-break: break-all;
}

    .ucm-wallet__val.xpoint-banned {
        color: #fca5a5;
        font-size: 1.5rem;
    }

/* باکس روزها — شفافیت کم‌تر */
.ucm-days {
    display: flex;
    align-items: center;
    gap: .6rem;
    min-width:200px;
    padding: .6rem .85rem;
    border-radius: var(--radius-lg, 16px);
    background: linear-gradient(135deg, rgba(34, 211, 238, .3), rgba(168, 85, 247, .3));
    border: 1px solid rgba(255, 255, 255, .25);
    box-shadow: 0 8px 22px rgba(0, 0, 0, .22);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.ucm-days__ic {
    width: 38px;
    height: 38px;
    flex: 0 0 38px;
    border-radius: 12px;
    display: grid;
    place-items: center;
    background: linear-gradient(135deg, #06b6d4, #3b82f6);
    color: #fff;
    box-shadow: 0 4px 12px rgba(59, 130, 246, .4);
}

    .ucm-days__ic svg {
        width: 18px;
        height: 18px;
    }

.ucm-days__t {
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.ucm-days__lbl {
    font-size: .72rem;
    font-weight: 700;
    color: rgba(255, 255, 255, .9);
}

.ucm-days__val {
    font-size: 1.2rem;
    font-weight: 900;
    color: #fff;
    font-feature-settings: "tnum";
}


/* ═══════════════════════════════════════════════════════════════════════════
   ریسپانسیو
   ═══════════════════════════════════════════════════════════════════════════ */

/* تبلت: محتوا جمع‌وجورتر، همچنان روی بنر */
@media (max-width: 920px) {
    .ucm__body {
        gap: 1.2rem;
        padding: 1.3rem;
    }

    .ucm__content {
        gap: .9rem;
    }
}

/* موبایل: ستونی، وسط‌چین، بنر کم‌ارتفاع‌تر */
@media (max-width: 600px) {

    .ucm {
        min-height: 0;
    }

    .ucm__body {
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: 1rem;
        padding: 3.4rem 1rem 1.2rem; /* فضای بالا برای دو دکمه گوشه */
    }

    /* دکمه‌ها: متن کنار آیکن نمایش داده شود */
    .ucm__btn span {
        display: inline;
    }

    .ucm__btn {
        padding: .45rem .8rem;
        font-size: .78rem;
    }

        .ucm__btn svg {
            width: 15px;
            height: 15px;
        }

    /* دکمه خروج همچنان گوشه‌ی بالا-چپ */
    .ucm__logout-corner {
        top: .7rem;
        left: .7rem;
        right: auto;
    }

    /* در موبایل دکمه ویرایش زیر آواتار پنهان، دکمه گوشه بالا-راست نمایش */
    .ucm__edit-desktop-only {
        display: none !important;
    }

    .ucm__edit-corner {
        display: inline-flex !important;
        top: .7rem;
        right: .7rem;
        left: auto;
    }

    .ucm__avatar {
        width: 104px;
        height: 104px;
    }

        .ucm__avatar::before {
            inset: -14px;
        }

    .ucm__content {
        align-items: center;
        width: 100%;
    }

    .ucm__meta {
        align-items: center;
        text-align: center;
        width: 100%;
    }

    .ucm__name {
        white-space: normal;
    }

    /* کد کاربری و شماره همراه: یک ردیف، هرکدام زیاد شد به خط بعد برود */
    .ucm__rows {
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: center;
        gap: .35rem .8rem;
    }

    .ucm__row {
        flex: 0 1 auto;
        white-space: nowrap;
    }

    /* روزها 65٪ و ایکس‌کوین 35٪ — در یک ردیف */
    .ucm__stats {
        flex-direction: row-reverse;
        width: 100%;
        flex-wrap: nowrap;
    }

    .ucm-days {
        flex: 0 0 56%;
        min-width: 0;
    }

    .ucm-wallet {
        flex: 0 0 calc(44%);
        min-width: 0;
    }

    .ucm-wallet__val {
        font-size: 1.15rem;
    }

    .ucm-days__val {
        font-size: 1rem;
    }

    /* جمع‌وجور کردن آیکن‌ها در عرض کم */
    .ucm-coin {
        width: 34px;
        height: 34px;
        flex: 0 0 34px;
    }

    .ucm-days__ic {
        width: 32px;
        height: 32px;
        flex: 0 0 32px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .ucm-coin, .ucm__avatar::before {
        animation: none;
    }
}

/*#region dash-skel*/

/* پایه‌ی هر بلوک اسکلتون با افکت درخشش (shimmer) */
.dash-skel {
    position: relative;
    overflow: hidden;
    background: var(--color-surface-soft);
    border-radius: 10px;
}

    .dash-skel::after {
        content: "";
        position: absolute;
        inset: 0;
        transform: translateX(-100%);
        background: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.08) 50%, transparent 100%);
        animation: dash-skel-shimmer 1.3s infinite;
    }

[data-theme="dark"] .dash-skel::after {
    background: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.06) 50%, transparent 100%);
}

@keyframes dash-skel-shimmer {
    100% {
        transform: translateX(100%);
    }
}

/* ── اسکلتون کارت اطلاعات کاربر (هم‌اندازه‌ی کارت واقعی ucm) ── */
.dash-skel-usercard {
    position: relative;
    border-radius: var(--radius-xl, 24px);
    overflow: hidden;
    border: 1px solid var(--color-border-soft);
    min-height: 230px;
    margin-bottom: 1rem;
}

.dash-skel-usercard__bg {
    position: absolute;
    inset: 0;
    border-radius: 0;
}

.dash-skel-usercard__body {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: 1.6rem;
    padding: 1.6rem;
}

.dash-skel-usercard__avatar {
    width: 118px;
    height: 118px;
    border-radius: 50%;
    flex: 0 0 auto;
    background: rgba(255, 255, 255, 0.12);
}

.dash-skel-usercard__content {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: .7rem;
}

.dash-skel-line {
    height: 14px;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.12);
}

.dash-skel-line--name {
    height: 24px;
    width: 45%;
}

.dash-skel-line--sm {
    width: 65%;
}

.dash-skel-usercard__stats {
    display: flex;
    gap: .7rem;
    margin-top: .6rem;
}

.dash-skel-usercard__stat {
    height: 58px;
    flex: 1;
    border-radius: var(--radius-lg, 16px);
    background: rgba(255, 255, 255, 0.12);
}

/* ── اسکلتون تایل‌ها (تک‌ستونه، هماهنگ با dashboard-tiles واقعی) ── */
.dash-skel-tiles {
    display: flex;
    flex-direction: column;
    gap: 0.9rem;
}

.dash-skel-tile {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.25rem;
    border-radius: var(--radius-xl, 24px);
    border: 1px solid var(--color-border-soft);
    background: var(--color-surface);
    min-height: 110px;
}

[data-theme="dark"] .dash-skel-tile {
    background: rgba(15, 23, 42, 0.5);
}

.dash-skel-tile__text {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: .65rem;
}

.dash-skel-line--title {
    height: 18px;
    width: 55%;
}

.dash-skel-line--sub {
    height: 12px;
    width: 80%;
}

.dash-skel-tile__media {
    width: 84px;
    height: 84px;
    border-radius: 16px;
    flex: 0 0 auto;
    background: rgba(255, 255, 255, 0.12);
}

/* دو ستونه فقط در دسکتاپ خیلی پهن (هماهنگ با چیدمان واقعی) */
@media (prefers-reduced-motion: reduce) {
    .dash-skel::after {
        animation: none;
    }
}

/*#endregion dash-skel*/



/* =========================================
   لیست شرکت‌کنندگان (پشتیبانی از بنر و کادر)
========================================= */
.partic-item {
    position: relative;
    isolation: isolate;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.05);
    padding: 0.75rem 1rem;
    border-radius: 16px;
    transition: transform 0.2s, box-shadow 0.2s;
    overflow: hidden; /* جلوگیری از بیرون زدن بنر */
}

    .partic-item:hover {
        transform: translateY(-2px);
        box-shadow: 0 8px 20px rgba(0,0,0,0.3);
    }

/* لایه تصویر بنر */
.partic-item__bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    background-image: var(--lb-banner, none);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

/* گرادیانت تیره روی بنر برای خوانایی متن‌ها */
.partic-item__overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(90deg, rgba(15, 23, 42, 0.9) 0%, rgba(15, 23, 42, 0.6) 50%, rgba(15, 23, 42, 0.3) 100%);
    pointer-events: none;
}

/* محتوای کارت باید بالاتر از بنر قرار بگیرد */
.partic-user, .partic-score {
    position: relative;
    z-index: 2;
}

.partic-user {
    display: flex;
    align-items: center;
    gap: 0.85rem;
}

/* رپر آواتار برای قرارگیری کادر */
.partic-avatar-wrap {
    position: relative;
    width: 40px;
    height: 40px;
    flex-shrink: 0;
    display: grid;
    place-items: center;
}

    /* کادر تزئینی دور آواتار */
    .partic-avatar-wrap::before {
        content: "";
        position: absolute;
        inset: -11px; /* تنظیم دقیق سایز فریم نسبت به عکس */
        z-index: 2;
        background: var(--lb-frame, none) center / contain no-repeat;
        pointer-events: none;
    }

/* خود تصویر آواتار */
.partic-avatar {
    position: relative;
    z-index: 1;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid rgba(255, 255, 255, 0.15);
    background: #1e293b;
}

.partic-name {
    font-size: 0.95rem;
    font-weight: 700;
    color: #fff;
}
/* #endregion new  USER-CARD */

/*#region Shop css*/
.shp-root {
    /* درجه‌بندی کمیابی: طلایی / نقره‌ای / برنزی / عادی */
    --shp-gold: #fbbf24;
    --shp-gold-2: #f59e0b;
    --shp-silver: #cbd5e1;
    --shp-silver-2: #94a3b8;
    --shp-bronze: #d97706;
    --shp-bronze-2: #b45309;
    --shp-normal: #64748b;
    --shp-normal-2: #475569;
    min-height: 100vh;
    direction: rtl;
    padding: 1rem .9rem 5rem;
    display: flex;
    justify-content: center;
}

.shp-shell {
    width: 100%;
    max-width: 1280px;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

/* ── WALLET HEADER ──────────────────────────────────────────── */
.shp-wallet {
    position: relative;
    overflow: hidden;
    border-radius: var(--radius-xl);
    padding: 1.1rem 1.2rem;
    color: #fff;
    background: radial-gradient(500px 280px at 95% -30%, rgba(251,191,36,.4), transparent 60%), radial-gradient(420px 250px at -10% 110%, rgba(236,72,153,.4), transparent 65%), linear-gradient(135deg, #0b1023 0%, #1e1b4b 50%, #4c1d95 100%);
    box-shadow: var(--shadow-strong);
}

.shp-wallet__inner {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

@media (min-width: 720px) {
    .shp-wallet__inner {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
    }
}

.shp-wallet__crumb {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    font-size: .72rem;
    font-weight: 900;
    padding: .22rem .7rem;
    border-radius: 999px;
    background: rgba(255,255,255,.14);
    border: 1px solid rgba(255,255,255,.22);
    width: max-content;
}

    .shp-wallet__crumb svg {
        width: 12px;
        height: 12px;
    }

.shp-wallet__title {
    font-weight: 900;
    font-size: 1.65rem;
    margin: .35rem 0 .2rem;
}

.shp-wallet__sub {
    font-size: .85rem;
    opacity: .82;
}

.shp-wallet__balance {
    display: flex;
    align-items: center;
    gap: .85rem;
    padding: .75rem 1rem;
    background: rgba(0,0,0,.32);
    border: 1px solid rgba(251,191,36,.35);
    border-radius: var(--radius-xl);
    backdrop-filter: blur(8px);
}

.shp-coin {
    width: 44px;
    height: 44px;
    background: url('/images/cosmetics/x-coin.png') center/contain no-repeat;
    position: relative;
    flex: 0 0 44px;
    filter: drop-shadow(0 6px 16px rgba(245,158,11,.55));
    animation: shp-coin-spin 4s ease-in-out infinite;
}

@keyframes shp-coin-spin {
    0%, 100% {
        transform: rotateY(0deg);
    }

    50% {
        transform: rotateY(180deg);
    }
}

.shp-wallet__amount {
    font-feature-settings: "tnum";
    font-weight: 900;
    font-size: 1.55rem;
    line-height: 1;
    color: #fde047;
    text-shadow: 0 2px 6px rgba(0,0,0,.4);
}

    .shp-wallet__amount small {
        font-size: .7rem;
        font-weight: 700;
        opacity: .8;
        margin-inline-start: 4px;
        color: #fef3c7;
    }

.shp-wallet__topup {
    margin-inline-start: .55rem;
    padding: .5rem .9rem;
    border-radius: 999px;
    background: linear-gradient(135deg, #fbbf24, #f59e0b);
    color: #422006;
    font-weight: 900;
    font-size: .82rem;
    border: 0;
    cursor: pointer;
    box-shadow: 0 6px 14px rgba(251,191,36,.45);
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    transition: transform .12s;
}

    .shp-wallet__topup:hover {
        transform: translateY(-2px);
    }

    .shp-wallet__topup svg {
        width: 14px;
        height: 14px;
    }

/* ── TABS ───────────────────────────────────────────────────── */
.shp-tabs {
    display: flex;
    gap: .35rem;
    padding: .35rem;
    background: var(--color-surface);
    border: 1px solid var(--color-border-soft);
    border-radius: 999px;
    box-shadow: var(--shadow-soft);
    width: max-content;
    max-width: 100%;
}

[data-theme="dark"] .shp-tabs {
    background: rgba(15,23,42,.9);
}

.shp-tab {
    padding: .55rem 1.1rem;
    border-radius: 999px;
    background: transparent;
    color: var(--color-text-muted);
    font-weight: 800;
    font-size: .88rem;
    border: 0;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    transition: all .15s;
}

@media (max-width: 720px) {
    .shp-tab {
        font-weight: 800;
        font-size: .75rem;
    }
}

.shp-tab svg {
    width: 14px;
    height: 14px;
}

.shp-tab.is-active {
    background: linear-gradient(135deg, #ec4899, #a855f7);
    color: #fff;
    box-shadow: 0 6px 14px rgba(168,85,247,.4);
}

.shp-tab__count {
    font-size: .68rem;
    font-weight: 900;
    padding: 1px 7px;
    border-radius: 999px;
    background: rgba(255,255,255,.22);
}

/* ── FILTERS ────────────────────────────────────────────────── */
.shp-filters {
    display: flex;
    flex-direction: column;
    gap: .5rem;
    padding: .65rem .8rem;
    background: var(--color-surface);
    border: 1px solid var(--color-border-soft);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-soft);
}

[data-theme="dark"] .shp-filters {
    background: rgba(15,23,42,.9);
}

@media (min-width: 600px) {
    .shp-filters {
        flex-direction: row;
        align-items: center;
        gap: .8rem;
    }
}

.shp-flbl {
    font-size: .72rem;
    font-weight: 800;
    color: var(--color-text-muted);
    white-space: nowrap;
}

.shp-chips {
    display: flex;
    gap: .35rem;
    flex-wrap: wrap;
}

.shp-chip {
    padding: .35rem .75rem;
    border-radius: 999px;
    background: var(--color-surface-soft);
    border: 1px solid var(--color-border-soft);
    color: var(--color-text-muted);
    cursor: pointer;
    font-size: .76rem;
    font-weight: 800;
    white-space: nowrap;
    transition: all .15s;
}

    .shp-chip.is-active {
        background: linear-gradient(135deg, #ec4899, #a855f7);
        color: #fff;
        border-color: transparent;
        box-shadow: 0 4px 10px rgba(168,85,247,.35);
    }

    .shp-chip[data-rarity="bronze"].is-active {
        background: linear-gradient(135deg, #d97706, #b45309);
        color: #fff;
    }

    .shp-chip[data-rarity="silver"].is-active {
        background: linear-gradient(135deg, #cbd5e1, #94a3b8);
        color: #1e293b;
    }

    .shp-chip[data-rarity="gold"].is-active {
        background: linear-gradient(135deg, #fbbf24, #f59e0b);
        color: #422006;
    }

/* ── SECTION TITLE ──────────────────────────────────────────── */
.shp-section {
    display: flex;
    align-items: center;
    gap: .5rem;
    margin: .4rem .25rem .1rem;
}

.shp-section__icon {
    width: 28px;
    height: 28px;
    border-radius: 9px;
    display: grid;
    place-items: center;
    background: linear-gradient(135deg, #fbbf24, #f97316);
    color: #fff;
    box-shadow: 0 4px 10px rgba(251,191,36,.35);
}

    .shp-section__icon svg {
        width: 14px;
        height: 14px;
    }

.shp-section__t {
    font-weight: 900;
    font-size: 1.05rem;
    color: var(--color-text);
}

.shp-section__s {
    font-size: .76rem;
    color: var(--color-text-muted);
}

/* ── GRID & CARD ────────────────────────────────────────────── */
.shp-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
    gap: .8rem;
}

@media (min-width: 600px) {
    .shp-grid {
        grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
        gap: 1rem;
    }
}

.shp-card {
    position: relative;
    overflow: hidden;
    background: var(--color-surface);
    border: 1px solid var(--color-border-soft);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-soft);
    cursor: pointer;
    transition: transform .2s, box-shadow .2s, border-color .2s;
    display: flex;
    flex-direction: column;
}

[data-theme="dark"] .shp-card {
    background: rgba(15,23,42,.9);
}

.shp-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-strong);
}

.shp-card[data-rarity="gold"] {
    border-color: rgba(251,191,36,.4);
}

    .shp-card[data-rarity="gold"]:hover {
        border-color: #fbbf24;
        box-shadow: 0 18px 40px rgba(251,191,36,.25);
    }

.shp-card[data-rarity="silver"] {
    border-color: rgba(203,213,225,.4);
}

    .shp-card[data-rarity="silver"]:hover {
        border-color: #cbd5e1;
        box-shadow: 0 18px 40px rgba(203,213,225,.2);
    }

.shp-card[data-rarity="bronze"] {
    border-color: rgba(217,119,6,.4);
}

    .shp-card[data-rarity="bronze"]:hover {
        border-color: #d97706;
        box-shadow: 0 18px 40px rgba(217,119,6,.2);
    }

/* PREVIEW BOX — protects layout for ALL images */
.shp-card__preview {
    position: relative;
    aspect-ratio: 4/3;
    background: radial-gradient(ellipse at 30% 20%, rgba(255,255,255,.05), transparent 60%), linear-gradient(135deg, #1e293b, #0f172a);
    display: grid;
    place-items: center;
    overflow: hidden;
}

    /* عادی: دودی خنثی */
    .shp-card__preview[data-rarity="normal"] {
        background: radial-gradient(ellipse at 30% 20%, rgba(148,163,184,.18), transparent 60%), linear-gradient(135deg, #334155, #0f172a);
    }

    /* برنزی: نارنجی-مسی گرم با ته‌رنگ قهوه‌ای */
    .shp-card__preview[data-rarity="bronze"] {
        background: radial-gradient(ellipse at 25% 15%, rgba(251,146,60,.4), transparent 55%), radial-gradient(ellipse at 80% 90%, rgba(120,53,15,.5), transparent 60%), linear-gradient(135deg, #9a3412, #431407);
    }

    /* نقره‌ای: آبی-خاکستری سرد و فلزی */
    .shp-card__preview[data-rarity="silver"] {
        background: radial-gradient(ellipse at 25% 15%, rgba(226,232,240,.45), transparent 55%), radial-gradient(ellipse at 80% 90%, rgba(100,116,139,.4), transparent 60%), linear-gradient(135deg, #64748b, #1e293b);
    }

    /* طلایی: کهربایی درخشان با ته‌رنگ بنفش سلطنتی */
    .shp-card__preview[data-rarity="gold"] {
        background: linear-gradient( 135deg, #fbbf24 10%, #f59e0b 50%, #d97706 80%, #b45309 100% );
    }

/* gold shine sweep */
.shp-card[data-rarity="gold"] .shp-card__preview::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(115deg, transparent 35%, rgba(255,255,255,.25) 50%, transparent 65%);
    transform: translateX(-100%);
    animation: shp-shine 3.5s ease-in-out infinite;
    pointer-events: none;
}

@keyframes shp-shine {
    0%, 70% {
        transform: translateX(-100%);
    }

    100% {
        transform: translateX(100%);
    }
}

/* PROTECTED inner shapes — fixed aspect + cover */
.shp-avatar {
    width: 56%;
    aspect-ratio: 1;
    border-radius: 50%;
    background-size: cover;
    background-position: center;
    background-color: #475569;
    box-shadow: 0 10px 24px rgba(0,0,0,.35), 0 0 0 4px rgba(255,255,255,.08);
}

.shp-banner {
    width: 88%;
    aspect-ratio: 3/1;
    border-radius: 8px;
    background-size: cover;
    background-position: center;
    background-color: #475569;
    box-shadow: 0 8px 20px rgba(0,0,0,.35);
}

.shp-frame {
    position: relative;
    width: 58%;
    aspect-ratio: 1;
}

.shp-frame__ring {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: var(--frame-grad, conic-gradient(from 0deg, #a855f7, #ec4899, #fbbf24, #a855f7));
    -webkit-mask: radial-gradient(circle, transparent 40%, #000 44%);
    mask: radial-gradient(circle, transparent 40%, #000 44%);
    animation: shp-frame-rot 8s linear infinite;
}

    .shp-frame__ring.has-img {
        background: var(--frame-img-bg) center/cover no-repeat;
        -webkit-mask: none;
        mask: none;
        animation: none;
    }

.shp-frame__inner {
    position: absolute;
    inset: 13%;
    border-radius: 50%;
    background: #475569 center/cover no-repeat;
    background-image: url('https://api.dicebear.com/7.x/adventurer/svg?seed=preview');
}

@keyframes shp-frame-rot {
    to {
        transform: rotate(360deg);
    }
}

/* badges on preview */
.shp-card__rarity {
    position: absolute;
    top: 8px;
    right: 8px;
    padding: .2rem .55rem;
    border-radius: 999px;
    font-size: .65rem;
    font-weight: 900;
    color: #fff;
    letter-spacing: .03em;
    backdrop-filter: blur(6px);
}

    .shp-card__rarity[data-rarity="normal"] {
        background: linear-gradient(135deg, #64748b, #475569);
    }

    .shp-card__rarity[data-rarity="bronze"] {
        background: linear-gradient(135deg, #d97706, #b45309);
    }

    .shp-card__rarity[data-rarity="silver"] {
        background: linear-gradient(135deg, #cbd5e1, #94a3b8);
        color: #1e293b;
    }

    .shp-card__rarity[data-rarity="gold"] {
        background: linear-gradient(135deg, #fbbf24, #f59e0b);
        color: #422006;
    }

.shp-card__limit {
    position: absolute;
    top: 8px;
    left: 8px;
    display: inline-flex;
    align-items: center;
    gap: .2rem;
    padding: .18rem .5rem;
    border-radius: 999px;
    font-size: .62rem;
    font-weight: 900;
    background: rgba(239,68,68,.95);
    color: #fff;
    backdrop-filter: blur(6px);
}

    .shp-card__limit svg {
        width: 9px;
        height: 9px;
    }

.shp-card__equipped {
    position: absolute;
    top: 8px;
    left: 8px;
    display: inline-flex;
    align-items: center;
    gap: .2rem;
    padding: .18rem .55rem;
    border-radius: 999px;
    font-size: .62rem;
    font-weight: 900;
    background: rgba(16,185,129,.95);
    color: #fff;
    backdrop-filter: blur(6px);
}

    .shp-card__equipped svg {
        width: 9px;
        height: 9px;
    }

/* body */
.shp-card__body {
    padding: .65rem .75rem .8rem;
    display: flex;
    flex-direction: column;
    gap: .35rem;
    flex: 1;
}

.shp-card__name {
    font-weight: 800;
    font-size: .9rem;
    color: var(--color-text);
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.shp-card__desc {
    font-size: .72rem;
    color: var(--color-text-muted);
    line-height: 1.45;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: 2em;
}

.shp-card__foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: auto;
    padding-top: .5rem;
    border-top: 1px dashed var(--color-border-soft);
}

.shp-card__price {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    font-weight: 900;
    font-feature-settings: "tnum";
    color: var(--color-text);
    font-size: .92rem;
}

.shp-card__price--owned {
    color: #10b981;
    font-size: .78rem;
}

.shp-coin-mini {
    width: 16px;
    height: 16px;
    background: url('/images/cosmetics/xcoin.svg') center/contain no-repeat;
    filter: drop-shadow(0 2px 4px rgba(251,191,36,.45));
    flex: 0 0 16px;
}

.shp-card__cta {
    padding: .35rem .7rem;
    border-radius: 999px;
    font-size: .72rem;
    font-weight: 900;
    background: linear-gradient(135deg, #ec4899, #a855f7);
    color: #fff;
    border: 0;
    cursor: pointer;
}

.shp-card__cta--use {
    background: linear-gradient(135deg, #10b981, #059669);
}

.shp-card__cta--active {
    background: var(--color-surface-soft);
    color: var(--color-text-muted);
}

/* ── PURCHASE MODAL ─────────────────────────────────────────── */
.shp-bg {
    position: fixed;
    inset: 0;
    background: rgba(7,11,28,.78);
    backdrop-filter: blur(6px);
    z-index: 9000;
    animation: shp-fade .2s ease both;
}

.shp-modal {
    position: fixed;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: min(420px, calc(100% - 1.4rem));
    background: var(--color-surface);
    border-radius: var(--radius-xl);
    z-index: 9001;
    overflow: hidden;
    box-shadow: 0 30px 70px rgba(0,0,0,.5);
    animation: shp-pop .25s cubic-bezier(.16,1,.3,1) both;
}

[data-theme="dark"] .shp-modal {
    background: #0f172a;
}

.shp-modal__hero {
    position: relative;
    padding: 1.6rem 1rem 1.2rem;
    background: radial-gradient(ellipse at center, rgba(168,85,247,.4), transparent 70%), linear-gradient(135deg, #1e1b4b, #0f172a);
    display: grid;
    place-items: center;
    min-height: 180px;
}

    .shp-modal__hero[data-rarity="bronze"] {
        background: radial-gradient(ellipse at 30% 10%, rgba(251,146,60,.45), transparent 55%), radial-gradient(ellipse at 85% 95%, rgba(120,53,15,.5), transparent 60%), linear-gradient(135deg, #9a3412, #431407);
    }

    .shp-modal__hero[data-rarity="silver"] {
        background: radial-gradient(ellipse at 30% 10%, rgba(226,232,240,.5), transparent 55%), radial-gradient(ellipse at 85% 95%, rgba(100,116,139,.42), transparent 60%), linear-gradient(135deg, #64748b, #1e293b);
    }

    .shp-modal__hero[data-rarity="gold"] {
        /* background: radial-gradient(ellipse at 30% 10%, rgba(253,224,71,.6), transparent 55%), radial-gradient(ellipse at 85% 95%, rgba(168,85,247,.4), transparent 60%), linear-gradient(135deg, #b45309, #4c1d95); */
        background: linear-gradient( 135deg, #fbbf24 10%, #f59e0b 50%, #d97706 80%, #b45309 100% );
    }

.shp-modal__close {
    position: absolute;
    top: 10px;
    left: 10px;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: rgba(0,0,0,.4);
    color: #fff;
    border: 0;
    cursor: pointer;
    display: grid;
    place-items: center;
}

    .shp-modal__close svg {
        width: 14px;
        height: 14px;
    }

.shp-modal__rarity {
    position: absolute;
    top: 12px;
    right: 12px;
}

.shp-mod-avatar {
    width: 110px;
    aspect-ratio: 1;
    border-radius: 50%;
    background-size: cover;
    background-position: center;
    background-color: #475569;
    box-shadow: 0 12px 32px rgba(0,0,0,.5), 0 0 0 5px rgba(255,255,255,.1);
}

.shp-mod-banner {
    width: 80%;
    aspect-ratio: 3/1;
    border-radius: 10px;
    background-size: cover;
    background-position: center;
    background-color: #475569;
    box-shadow: 0 12px 32px rgba(0,0,0,.5);
}

.shp-mod-frame {
    position: relative;
    width: 130px;
    aspect-ratio: 1;
}

.shp-mod-frame__ring {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: var(--frame-grad, conic-gradient(from 0deg, #a855f7, #ec4899, #fbbf24, #a855f7));
    -webkit-mask: radial-gradient(circle, transparent 40%, #000 43%);
    mask: radial-gradient(circle, transparent 40%, #000 43%);
    animation: shp-frame-rot 6s linear infinite;
}

    .shp-mod-frame__ring.has-img {
        background: var(--frame-img-bg) center/cover no-repeat;
        -webkit-mask: none;
        mask: none;
        animation: none;
    }

.shp-mod-frame__inner {
    position: absolute;
    inset: 12%;
    border-radius: 50%;
    background: url('https://api.dicebear.com/7.x/adventurer/svg?seed=preview') center/cover no-repeat;
    background-color: #475569;
}

.shp-modal__body {
    padding: 1rem 1.1rem 1.2rem;
}

.shp-modal__name {
    font-weight: 900;
    font-size: 1.1rem;
    color: var(--color-text);
    text-align: center;
}

.shp-modal__desc {
    font-size: .82rem;
    color: var(--color-text-muted);
    text-align: center;
    margin-top: .35rem;
    line-height: 1.6;
}

.shp-modal__rows {
    margin-top: .9rem;
    padding: .65rem .85rem;
    background: var(--color-surface-soft);
    border-radius: var(--radius-md);
    display: flex;
    flex-direction: column;
    gap: .4rem;
}

.shp-modal__row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: .85rem;
}

    .shp-modal__row span:first-child {
        color: var(--color-text-muted);
        font-weight: 700;
    }

    .shp-modal__row span:last-child {
        color: var(--color-text);
        font-weight: 900;
        font-feature-settings: "tnum";
        display: inline-flex;
        align-items: center;
        gap: .3rem;
    }

.shp-modal__row--after {
    padding-top: .4rem;
    border-top: 1px dashed var(--color-border-soft);
}

    .shp-modal__row--after.is-short span:last-child {
        color: #ef4444;
    }

/*.shp-modal__warn {
    margin-top: .65rem;
    padding: .6rem .75rem;
    background: rgba(239,68,68,.12);
    border: 1px solid rgba(239,68,68,.3);
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    gap: .4rem;
    font-size: .78rem;
    color: #ef4444;
    font-weight: 800;
}

    .shp-modal__warn svg {
        width: 14px;
        height: 14px;
        flex: 0 0 14px;
    }*/
.shp-modal__warn {
    margin-top: .65rem;
    padding: .6rem .75rem;
    background: rgba(239,68,68,.12);
    border: 1px solid rgba(239,68,68,.3);
    border-radius: var(--radius-md);
    /* تنظیمات فلکس و راست‌چین کردن */
    display: flex;
    align-items: center;
    direction: rtl; /* چیدمان را از راست به چپ می‌کند */
    text-align: right; /* متن را راست‌چین می‌کند */

    gap: .4rem;
    font-size: .78rem;
    color: #ef4444;
    font-weight: 800;
}

    .shp-modal__warn svg {
        width: 14px;
        height: 14px;
        flex: 0 0 14px;
    }

.shp-modal__actions {
    margin-top: 1rem;
    display: flex;
    gap: .5rem;
}

.shp-btn {
    flex: 1;
    padding: .75rem 1rem;
    border-radius: 999px;
    font-weight: 900;
    font-size: .9rem;
    border: 0;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .35rem;
    transition: transform .12s;
}

    .shp-btn svg {
        width: 14px;
        height: 14px;
    }

.shp-btn--ghost {
    background: var(--color-surface-soft);
    color: var(--color-text);
}

.shp-btn--buy {
    background: linear-gradient(135deg, #ec4899, #a855f7, #6366f1);
    color: #fff;
    box-shadow: 0 8px 20px rgba(168,85,247,.4);
}

    .shp-btn--buy:hover {
        transform: translateY(-1px);
    }

    .shp-btn--buy:disabled {
        opacity: .55;
        cursor: not-allowed;
        transform: none;
    }

.shp-btn--topup {
    background: linear-gradient(135deg, #fbbf24, #f59e0b);
    color: #422006;
    box-shadow: 0 8px 20px rgba(251,191,36,.4);
}

/* success burst */
.shp-burst {
    position: fixed;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    z-index: 9002;
    width: 140px;
    height: 140px;
    border-radius: 50%;
    background: radial-gradient(circle, #10b981, transparent 70%);
    display: grid;
    place-items: center;
    color: #fff;
    animation: shp-burst .9s ease forwards;
}

    .shp-burst svg {
        width: 60px;
        height: 60px;
    }

@keyframes shp-burst {
    0% {
        transform: translate(-50%, -50%) scale(0);
        opacity: 0;
    }

    40% {
        transform: translate(-50%, -50%) scale(1.1);
        opacity: 1;
    }

    100% {
        transform: translate(-50%, -50%) scale(1);
        opacity: 0;
    }
}

.shp-empty {
    padding: 3rem 1rem;
    text-align: center;
    color: var(--color-text-muted);
    background: var(--color-surface);
    border: 1px solid var(--color-border-soft);
    border-radius: var(--radius-lg);
}

[data-theme="dark"] .shp-empty {
    background: rgba(15,23,42,.9);
}

.shp-empty svg {
    width: 44px;
    height: 44px;
    opacity: .5;
    margin-bottom: .6rem;
}

.shp-empty__t {
    font-weight: 800;
    color: var(--color-text);
    margin-bottom: 4px;
}

@keyframes shp-fade {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes shp-pop {
    from {
        opacity: 0;
        transform: translate(-50%, -48%) scale(.92);
    }

    to {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1);
    }
}

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

@media (prefers-reduced-motion: reduce) {
    .shp-coin, .shp-frame__ring, .shp-card[data-rarity="gold"] .shp-card__preview::after {
        animation: none;
    }
}

/* ── TOPUP MODAL (شارژ سکه) ─────────────────────────────────── */
.shp-topup {
    position: fixed;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: min(460px, calc(100% - 1.4rem));
    max-height: calc(100vh - 2rem);
    overflow-y: auto;
    background: var(--color-surface);
    border-radius: var(--radius-xl);
    z-index: 9001;
    box-shadow: 0 30px 70px rgba(0,0,0,.5);
    animation: shp-pop .25s cubic-bezier(.16,1,.3,1) both;
}

[data-theme="dark"] .shp-topup {
    background: #0f172a;
}

.shp-topup__hero {
    position: relative;
    padding: 1.5rem 1.2rem 1.2rem;
    text-align: center;
    color: #fff;
    background: radial-gradient(ellipse at 30% 10%, rgba(253,224,71,.5), transparent 55%), radial-gradient(ellipse at 85% 95%, rgba(245,158,11,.4), transparent 60%), linear-gradient(135deg, #1e1b4b, #4c1d95);
}

.shp-topup__close {
    position: absolute;
    top: 10px;
    left: 10px;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: rgba(0,0,0,.4);
    color: #fff;
    border: 0;
    cursor: pointer;
    display: grid;
    place-items: center;
}

    .shp-topup__close svg {
        width: 14px;
        height: 14px;
    }

.shp-topup__bigcoin {
    width: 64px;
    height: 64px;
    margin: 0 auto .6rem;
    background: url('/images/cosmetics/xcoin.svg') center/contain no-repeat;
    filter: drop-shadow(0 8px 20px rgba(245,158,11,.6));
    animation: shp-coin-spin 4s ease-in-out infinite;
}

.shp-topup__title {
    font-weight: 900;
    font-size: 1.25rem;
    margin: 0;
}

.shp-topup__sub {
    font-size: .82rem;
    opacity: .85;
    margin-top: .25rem;
}

.shp-topup__body {
    padding: 1.1rem 1.1rem 1.3rem;
}

.shp-topup__grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: .7rem;
}

.shp-pack {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .35rem;
    padding: 1rem .7rem .85rem;
    border-radius: var(--radius-lg);
    border: 2px solid var(--color-border-soft);
    background: var(--color-surface-soft);
    cursor: pointer;
    transition: transform .15s, border-color .15s, box-shadow .15s;
}

    .shp-pack:hover {
        transform: translateY(-3px);
        border-color: #fbbf24;
        box-shadow: 0 12px 26px rgba(251,191,36,.22);
    }

    .shp-pack.is-selected {
        border-color: #f59e0b;
        box-shadow: 0 12px 26px rgba(251,191,36,.3);
    }

.shp-pack__badge {
    position: absolute;
    top: -9px;
    right: 10px;
    font-size: .6rem;
    font-weight: 900;
    padding: .12rem .5rem;
    border-radius: 999px;
    background: linear-gradient(135deg, #ec4899, #a855f7);
    color: #fff;
    letter-spacing: .02em;
}

.shp-pack__coins {
    width: 46px;
    height: 46px;
    background: url('/images/cosmetics/xcoin.svg') center/contain no-repeat;
    filter: drop-shadow(0 4px 10px rgba(245,158,11,.45));
}

.shp-pack__amount {
    font-weight: 900;
    font-size: 1.15rem;
    color: var(--color-text);
    font-feature-settings: "tnum";
    display: flex;
    align-items: center;
    gap: .25rem;
}

    .shp-pack__amount small {
        font-size: .65rem;
        font-weight: 700;
        color: var(--color-text-muted);
    }

.shp-pack__price {
    font-size: .8rem;
    font-weight: 800;
    color: #f59e0b;
    font-feature-settings: "tnum";
}

.shp-topup__footer {
    margin-top: 1.1rem;
    display: flex;
    flex-direction: column;
    gap: .6rem;
}

.shp-topup__total {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: .7rem .9rem;
    border-radius: var(--radius-md);
    background: var(--color-surface-soft);
    font-size: .9rem;
}

    .shp-topup__total b {
        color: #f59e0b;
        font-weight: 900;
        font-size: 1.05rem;
        font-feature-settings: "tnum";
    }

.shp-topup__pay {
    padding: .85rem;
    border-radius: 999px;
    border: 0;
    cursor: pointer;
    font-weight: 900;
    font-size: .95rem;
    color: #422006;
    background: linear-gradient(135deg, #fbbf24, #f59e0b);
    box-shadow: 0 8px 18px rgba(251,191,36,.4);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .4rem;
    transition: transform .12s;
}

    .shp-topup__pay:hover {
        transform: translateY(-2px);
    }

    .shp-topup__pay:disabled {
        opacity: .5;
        cursor: not-allowed;
        transform: none;
    }

    .shp-topup__pay svg {
        width: 16px;
        height: 16px;
    }

/* ── باکس نگه‌دارنده عکس ── */
.shp-pack__img-box {
    width: 65px;
    height: 65px;
    margin: 0 auto 0.5rem auto; /* قرارگیری در وسط و فاصله از پایین */
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.3s ease;
}

/* ── خود عکس ── */
.shp-pack__img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain; /* جلوگیری از دفرمه شدن عکس */
    filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.15)); /* یک سایه ملایم برای زیبایی آیکون */
}

/* ── انیمیشن هنگام انتخاب شدن پک ── */
.shp-pack.is-selected .shp-pack__img-box {
    transform: scale(1.15); /* وقتی کاربر انتخاب کرد، عکس کمی بزرگتر می‌شود */
}

/* ── تنظیمات ریسپانسیو برای موبایل ── */
@media (max-width: 600px) {
    .shp-pack__img-box {
        width: 50px; /* در موبایل آیکون کمی کوچکتر می‌شود */
        height: 50px;
        margin-bottom: 0.3rem;
    }

    .shp-pack__amount {
        font-size: 0.95rem; /* بهینه‌سازی سایز فونت در موبایل */
    }

    .shp-pack__price {
        font-size: 0.8rem;
    }
}
/*#endregion Shop css*/

/* #region notifications.css ═════════════════════════════════════════════════
   Modern notifications UI — append (or replace) inside main.css
   Fully responsive: ≥360px phones → desktop, with safe-area / landscape /
   touch-vs-hover handling.
   ═════════════════════════════════════════════════════════════════════════ */

/* ─── Page wrapper ─────────────────────────────────────────────────────── */
.notif-page {
    --notif-radius: 16px;
    --notif-radius-sm: 12px;
    --notif-elev-1: 0 1px 2px rgba(0,0,0,.06), 0 2px 8px rgba(0,0,0,.05);
    --notif-elev-2: 0 4px 12px rgba(0,0,0,.10), 0 12px 32px rgba(0,0,0,.10);
    --notif-border: 1px solid rgba(255,255,255,.06);
    /* type-specific gradient pairs */
    --c-wheel-1: #f59e0b;
    --c-wheel-2: #ef4444;
    --c-match-1: #10b981;
    --c-match-2: #059669;
    --c-tour-1: #8b5cf6;
    --c-tour-2: #6366f1;
    --c-admin-1: #3b82f6;
    --c-admin-2: #06b6d4;
    --c-shop-1: #06b6d4;
    --c-shop-2: #0ea5b6;
    --c-reward-1: #ec4899;
    --c-reward-2: #f43f5e;
    --c-sys-1: #64748b;
    --c-sys-2: #475569;
    /* severity colors */
    --c-info: var(--color-primary);
    --c-success: #22c55e;
    --c-warning: #f59e0b;
    --c-critical: #ef4444;
    direction: rtl;
    width: 100%;
    max-width: clamp(800px, 95%, 1024px); /* Fluid max-width for PC */
    margin: 0 auto;
    /* fluid horizontal padding + safe area for iOS notch */
    padding-inline: clamp(0.6rem, 2vw, 1.1rem);
    padding-top: clamp(0.6rem, 2vw, 1.1rem);
    /* keep room for the FAB above the iOS home indicator */
    padding-bottom: calc(6rem + env(safe-area-inset-bottom, 0px));
    display: flex;
    flex-direction: column;
    gap: clamp(0.7rem, 1.6vw, 1.1rem);
    box-sizing: border-box;
    overflow-x: hidden; /* Prevent horizontal scroll */
}

    .notif-page *,
    .notif-page *::before,
    .notif-page *::after {
        box-sizing: border-box;
    }

[data-theme="light"] .notif-page {
    --notif-border: 1px solid rgba(0,0,0,.06);
}


/* ═══════════════════════════════════════════════════════════════════════
   HERO
   ═══════════════════════════════════════════════════════════════════════ */
.notif-hero {
    position: relative;
    border-radius: var(--notif-radius);
    padding: clamp(1.1rem, 2.5vw, 1.6rem) clamp(0.9rem, 2vw, 1.3rem) clamp(1rem, 2vw, 1.4rem);
    overflow: hidden;
    isolation: isolate;
    background: linear-gradient(135deg, color-mix(in srgb, var(--color-primary) 22%, var(--color-surface)), color-mix(in srgb, var(--color-secondary, #8b5cf6) 14%, var(--color-surface)));
    border: var(--notif-border);
    box-shadow: var(--notif-elev-1);
    display: grid;
    grid-template-columns: auto auto 1fr;
    grid-template-areas:
        "back   icon   text"
        "stats  stats  stats";
    align-items: center;
    gap: clamp(0.65rem, 1.5vw, 1rem);
}

.notif-hero__bg {
    position: absolute;
    inset: 0;
    z-index: -2;
    background: radial-gradient(60% 80% at 90% -10%, color-mix(in srgb, var(--color-primary) 35%, transparent), transparent 60%), radial-gradient(60% 80% at 10% 110%, color-mix(in srgb, var(--color-secondary, #8b5cf6) 28%, transparent), transparent 60%);
    opacity: .9;
}

.notif-hero__glow {
    position: absolute;
    inset: 0;
    z-index: -1;
    background-image: radial-gradient(circle at 1px 1px, rgba(255,255,255,.06) 1px, transparent 0);
    background-size: 22px 22px;
    mask-image: linear-gradient(180deg, transparent, black 40%, transparent);
    pointer-events: none;
}

.notif-hero__back {
    grid-area: back;
    width: clamp(40px, 10vw, 44px);
    height: clamp(40px, 10vw, 44px);
    border-radius: 12px;
    background: rgba(255,255,255,.08);
    border: 1px solid rgba(255,255,255,.10);
    color: var(--color-text);
    display: grid;
    place-items: center;
    cursor: pointer;
    transition: background .15s, transform .1s;
    backdrop-filter: blur(6px);
    flex-shrink: 0;
}

    .notif-hero__back:hover {
        background: rgba(255,255,255,.14);
    }

    .notif-hero__back:active {
        transform: scale(.95);
    }

    .notif-hero__back svg {
        width: 20px;
        height: 20px;
    }

.notif-hero__icon {
    grid-area: icon;
    width: clamp(48px, 12vw, 64px);
    height: clamp(48px, 12vw, 64px);
    border-radius: clamp(14px, 3vw, 20px);
    display: grid;
    place-items: center;
    background: linear-gradient(135deg, var(--color-primary), var(--color-secondary, #8b5cf6));
    color: #fff;
    box-shadow: 0 8px 24px color-mix(in srgb, var(--color-primary) 40%, transparent), inset 0 1px 0 rgba(255,255,255,.25);
    position: relative;
    flex-shrink: 0;
}

    .notif-hero__icon svg {
        width: 56%;
        height: 56%;
    }

    .notif-hero__icon.is-active {
        animation: notif-pulse 2.4s ease-in-out infinite;
    }

.notif-hero__icon-dot {
    position: absolute;
    top: -4px;
    left: -4px;
    width: 14px;
    height: 14px;
    background: #ef4444;
    border-radius: 999px;
    box-shadow: 0 0 0 3px var(--color-surface), 0 0 12px #ef4444;
    animation: notif-bounce 1.6s ease-in-out infinite;
}

.notif-hero__text {
    grid-area: text;
    min-width: 0;
}

.notif-hero__title {
    margin: 0 0 0.18rem;
    font-size: clamp(1.05rem, 3.5vw, 1.35rem);
    font-weight: 800;
    color: var(--color-text);
    letter-spacing: -0.01em;
    line-height: 1.2;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.notif-hero__subtitle {
    margin: 0;
    font-size: clamp(0.75rem, 2.4vw, 0.86rem);
    color: var(--color-text-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

    .notif-hero__subtitle b {
        color: var(--color-text);
        font-weight: 700;
    }

.notif-hero__stats {
    grid-area: stats;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(0.4rem, 1.5vw, 0.55rem);
    margin-top: clamp(0.3rem, 1vw, 0.4rem);
}

.notif-stat {
    background: rgba(255,255,255,.06);
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 12px;
    padding: clamp(0.45rem, 1.5vw, 0.6rem) clamp(0.5rem, 1.6vw, 0.7rem);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.1rem;
    backdrop-filter: blur(6px);
    min-width: 0;
}

.notif-stat__num {
    font-size: clamp(1rem, 3.6vw, 1.25rem);
    font-weight: 800;
    color: var(--color-text);
    line-height: 1;
    font-variant-numeric: tabular-nums;
}

.notif-stat__lbl {
    font-size: clamp(0.66rem, 2vw, 0.72rem);
    color: var(--color-text-muted);
    white-space: nowrap;
}

.notif-stat--accent {
    background: linear-gradient(135deg, color-mix(in srgb, var(--color-primary) 35%, transparent), color-mix(in srgb, var(--color-secondary, #8b5cf6) 25%, transparent));
    border-color: color-mix(in srgb, var(--color-primary) 40%, transparent);
}

    .notif-stat--accent .notif-stat__num {
        color: #fff;
    }

    .notif-stat--accent .notif-stat__lbl {
        color: rgba(255,255,255,.85);
    }


/* ═══════════════════════════════════════════════════════════════════════
   TOOLBAR — sticky filter strip
   ═══════════════════════════════════════════════════════════════════════ */
.notif-toolbar {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    flex-wrap: wrap;
    background: var(--color-surface);
    border: var(--notif-border);
    border-radius: var(--notif-radius);
    padding: 0.55rem 0.65rem;
    box-shadow: var(--notif-elev-1);
    position: sticky;
    top: clamp(0.3rem, 1vw, 0.6rem);
    z-index: 5;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.notif-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem;
    flex: 1;
    min-width: 0;
}

.notif-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    background: transparent;
    border: 1px solid transparent;
    color: var(--color-text-muted);
    padding: 0.5rem 0.85rem;
    border-radius: 999px;
    cursor: pointer;
    font-family: inherit;
    font-size: 0.85rem;
    font-weight: 500;
    transition: all .18s cubic-bezier(.4,0,.2,1);
    position: relative;
    min-height: 36px;
    white-space: nowrap;
}

    .notif-pill:hover {
        background: var(--color-surface-soft);
        color: var(--color-text);
    }

    .notif-pill.is-active {
        background: linear-gradient(135deg, var(--color-primary), var(--color-secondary, #8b5cf6));
        color: #fff;
        border-color: transparent;
        box-shadow: 0 4px 14px color-mix(in srgb, var(--color-primary) 35%, transparent);
    }

.notif-pill__count {
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 999px;
    background: rgba(0,0,0,.18);
    color: inherit;
    font-size: 0.7rem;
    font-weight: 700;
    display: grid;
    place-items: center;
}

.notif-pill.is-active .notif-pill__count {
    background: rgba(255,255,255,.25);
}

.notif-mark-all {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    background: var(--color-surface-soft);
    border: var(--notif-border);
    color: var(--color-text);
    padding: 0.55rem 0.85rem;
    border-radius: 10px;
    cursor: pointer;
    font-family: inherit;
    font-size: 0.83rem;
    transition: background .15s;
    min-height: 38px;
    white-space: nowrap;
}

    .notif-mark-all:hover:not(:disabled) {
        background: color-mix(in srgb, var(--color-primary) 18%, var(--color-surface-soft));
    }

    .notif-mark-all:disabled {
        opacity: .45;
        cursor: not-allowed;
    }

    .notif-mark-all svg {
        width: 16px;
        height: 16px;
        flex-shrink: 0;
    }


/* ═══════════════════════════════════════════════════════════════════════
   STREAM + GROUPS
   ═══════════════════════════════════════════════════════════════════════ */
.notif-stream {
    display: flex;
    flex-direction: column;
    gap: 1.1rem;
}

.notif-group {
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
}

.notif-group__head {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0 0.25rem;
}

.notif-group__label {
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--color-text-muted);
    letter-spacing: 0.02em;
    text-transform: uppercase;
}

.notif-group__line {
    flex: 1;
    height: 1px;
    background: linear-gradient(to right, rgba(255,255,255,.08), transparent);
}

.notif-group__count {
    font-size: 0.72rem;
    color: var(--color-text-muted);
    background: var(--color-surface-soft);
    border-radius: 999px;
    padding: 0.1rem 0.55rem;
}

.notif-group__body {
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
}


/* ═══════════════════════════════════════════════════════════════════════
   CARD
   ═══════════════════════════════════════════════════════════════════════ */
.notif-card {
    position: relative;
    display: grid;
    grid-template-columns: 6px auto 1fr auto;
    align-items: start;
    gap: clamp(0.65rem, 1.6vw, 0.95rem);
    padding: clamp(0.8rem, 1.8vw, 1rem) clamp(0.8rem, 1.8vw, 1rem) clamp(0.8rem, 1.8vw, 1rem) 0.6rem;
    background: var(--color-surface);
    border: var(--notif-border);
    border-radius: var(--notif-radius);
    cursor: pointer;
    transition: transform .2s cubic-bezier(.4,0,.2,1), box-shadow .2s cubic-bezier(.4,0,.2,1), background .15s;
    animation: notif-card-in .35s cubic-bezier(.16,1,.3,1) backwards;
    overflow: hidden;
    -webkit-tap-highlight-color: transparent;
}

    .notif-card:hover {
        transform: translateY(-2px);
        box-shadow: var(--notif-elev-2);
    }

    .notif-card:active {
        transform: scale(.995);
    }

    .notif-card.is-read {
        opacity: .7;
    }

        .notif-card.is-read:hover {
            opacity: .92;
        }

.notif-card__rail {
    grid-column: 1;
    align-self: stretch;
    width: 6px;
    border-radius: 999px;
    background: linear-gradient(180deg, var(--rail-1, var(--color-primary)), var(--rail-2, var(--color-secondary, #8b5cf6)));
    box-shadow: 0 0 12px color-mix(in srgb, var(--rail-1, var(--color-primary)) 40%, transparent);
}

.notif-card.is-pinned {
    border-color: color-mix(in srgb, var(--color-primary) 40%, transparent);
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--color-primary) 20%, transparent), var(--notif-elev-1);
}

.notif-card.is-new::after {
    content: "";
    position: absolute;
    top: 1rem;
    left: 1rem;
    width: 9px;
    height: 9px;
    background: var(--color-primary);
    border-radius: 50%;
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--color-primary) 25%, transparent);
    animation: notif-dot-pulse 2s ease-in-out infinite;
}

/* type-specific rail + icon gradients */
.notif-card.type-wheel {
    --rail-1: var(--c-wheel-1);
    --rail-2: var(--c-wheel-2);
}

.notif-card.type-match {
    --rail-1: var(--c-match-1);
    --rail-2: var(--c-match-2);
}

.notif-card.type-tour {
    --rail-1: var(--c-tour-1);
    --rail-2: var(--c-tour-2);
}

.notif-card.type-admin {
    --rail-1: var(--c-admin-1);
    --rail-2: var(--c-admin-2);
}

.notif-card.type-shop {
    --rail-1: var(--c-shop-1);
    --rail-2: var(--c-shop-2);
}

.notif-card.type-reward {
    --rail-1: var(--c-reward-1);
    --rail-2: var(--c-reward-2);
}

.notif-card.type-sys {
    --rail-1: var(--c-sys-1);
    --rail-2: var(--c-sys-2);
}

/* severity overrides rail (semantic > type) */
.notif-card.sev-success {
    --rail-1: var(--c-success);
    --rail-2: #16a34a;
}

.notif-card.sev-warning {
    --rail-1: var(--c-warning);
    --rail-2: #d97706;
}

.notif-card.sev-critical {
    --rail-1: var(--c-critical);
    --rail-2: #b91c1c;
}

.notif-card__icon {
    grid-column: 2;
    width: clamp(40px, 9vw, 46px);
    height: clamp(40px, 9vw, 46px);
    border-radius: clamp(12px, 2.5vw, 14px);
    display: grid;
    place-items: center;
    background: linear-gradient(135deg, var(--rail-1), var(--rail-2));
    color: #fff;
    box-shadow: 0 4px 12px color-mix(in srgb, var(--rail-1) 35%, transparent), inset 0 1px 0 rgba(255,255,255,.22);
    flex-shrink: 0;
}

    .notif-card__icon svg {
        width: 48%;
        height: 48%;
    }

.notif-card__main {
    grid-column: 3;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.notif-card__row1 {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.5rem;
}

.notif-card__title {
    margin: 0;
    font-size: clamp(0.88rem, 2.3vw, 0.96rem);
    font-weight: 700;
    color: var(--color-text);
    line-height: 1.4;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    min-width: 0;
}

.notif-card__time {
    font-size: clamp(0.68rem, 1.9vw, 0.72rem);
    color: var(--color-text-muted);
    flex-shrink: 0;
    white-space: nowrap;
}

.notif-card__body {
    margin: 0;
    font-size: clamp(0.78rem, 2vw, 0.84rem);
    color: var(--color-text-muted);
    line-height: 1.6;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    overflow-wrap: anywhere;
    word-break: break-word;
}

.notif-card__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    margin-top: 0.15rem;
}

.notif-tag {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.7rem;
    padding: 0.18rem 0.5rem;
    border-radius: 999px;
    background: var(--color-surface-soft);
    color: var(--color-text-muted);
    border: 1px solid transparent;
    font-weight: 500;
    max-width: 100%;
}

    .notif-tag svg {
        width: 11px;
        height: 11px;
        flex-shrink: 0;
    }

.notif-tag--admin {
    background: color-mix(in srgb, var(--c-admin-1) 15%, transparent);
    color: var(--c-admin-1);
    border-color: color-mix(in srgb, var(--c-admin-1) 25%, transparent);
}

.notif-tag--pin {
    background: color-mix(in srgb, var(--color-primary) 14%, transparent);
    color: var(--color-primary);
    border-color: color-mix(in srgb, var(--color-primary) 25%, transparent);
}

.notif-tag--type {
    background: linear-gradient(135deg, color-mix(in srgb, var(--rail-1, var(--color-primary)) 14%, transparent), color-mix(in srgb, var(--rail-2, var(--color-secondary, #8b5cf6)) 10%, transparent));
    color: var(--color-text);
}

.notif-card__cta {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.78rem;
    color: var(--color-primary);
    margin-top: 0.2rem;
    font-weight: 600;
    transition: gap .15s;
}

.notif-card:hover .notif-card__cta {
    gap: 0.4rem;
}

.notif-card__cta svg {
    width: 13px;
    height: 13px;
}

.notif-card__actions {
    grid-column: 4;
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    opacity: 0;
    transform: translateX(6px);
    transition: opacity .15s, transform .15s;
}

.notif-card:hover .notif-card__actions,
.notif-card:focus-within .notif-card__actions {
    opacity: 1;
    transform: translateX(0);
}

.notif-iconbtn {
    width: 36px;
    height: 36px; /* ≥36px for accessible touch */
    border-radius: 10px;
    background: var(--color-surface-soft);
    border: var(--notif-border);
    color: var(--color-text-muted);
    cursor: pointer;
    display: grid;
    place-items: center;
    transition: all .15s;
}

    .notif-iconbtn svg {
        width: 16px;
        height: 16px;
    }

    .notif-iconbtn:hover {
        background: var(--color-primary-soft);
        color: var(--color-primary);
        transform: scale(1.05);
    }

.notif-iconbtn--danger:hover {
    background: color-mix(in srgb, var(--c-critical) 18%, transparent);
    color: var(--c-critical);
}


/* ═══════════════════════════════════════════════════════════════════════
   EMPTY + LOADING + LOAD MORE
   ═══════════════════════════════════════════════════════════════════════ */
.notif-empty {
    background: var(--color-surface);
    border: var(--notif-border);
    border-radius: var(--notif-radius);
    padding: clamp(2rem, 5vw, 3rem) clamp(1rem, 3vw, 1.5rem);
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.6rem;
}

.notif-empty__art {
    width: clamp(88px, 22vw, 110px);
    height: clamp(88px, 22vw, 110px);
    color: var(--color-primary);
    opacity: .65;
    animation: notif-float 4s ease-in-out infinite;
}

    .notif-empty__art svg {
        width: 100%;
        height: 100%;
    }

.notif-empty__title {
    margin: 0;
    font-size: clamp(0.95rem, 2.6vw, 1rem);
    color: var(--color-text);
}

.notif-empty__hint {
    margin: 0;
    font-size: clamp(0.8rem, 2.2vw, 0.85rem);
    color: var(--color-text-muted);
}

.notif-skel {
    height: 86px;
    border-radius: var(--notif-radius);
    background: linear-gradient(90deg, var(--color-surface) 25%, var(--color-surface-soft) 50%, var(--color-surface) 75%);
    background-size: 200% 100%;
    animation: notif-skel-shimmer 1.4s ease-in-out infinite;
    border: var(--notif-border);
}

.notif-skel--short {
    width: 70%;
    height: 60px;
}

.notif-more {
    align-self: center;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background: var(--color-surface);
    border: var(--notif-border);
    color: var(--color-text);
    padding: 0.65rem 1.5rem;
    border-radius: 12px;
    cursor: pointer;
    font-family: inherit;
    font-size: 0.88rem;
    transition: all .15s;
    margin-top: 0.4rem;
    min-height: 42px;
}

    .notif-more:hover:not(:disabled) {
        background: var(--color-surface-soft);
        transform: translateY(-1px);
        box-shadow: var(--notif-elev-1);
    }

    .notif-more:disabled {
        opacity: .6;
        cursor: not-allowed;
    }

    .notif-more small {
        opacity: .7;
        font-size: 0.78rem;
    }

.notif-more__spin {
    width: 14px;
    height: 14px;
    border: 2px solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    animation: notif-spin 0.7s linear infinite;
    display: inline-block;
    flex-shrink: 0;
}


/* ═══════════════════════════════════════════════════════════════════════
   FAB (admin compose trigger)
   ═══════════════════════════════════════════════════════════════════════ */
.notif-fab {
    position: fixed;
    bottom: calc(1.25rem + env(safe-area-inset-bottom, 0px));
    left: calc(1.25rem + env(safe-area-inset-left, 0px));
    z-index: 30;
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.85rem 1.3rem;
    background: linear-gradient(135deg, var(--color-primary), var(--color-secondary, #8b5cf6));
    color: #fff;
    border: none;
    border-radius: 999px;
    cursor: pointer;
    font-family: inherit;
    font-weight: 700;
    font-size: 0.9rem;
    box-shadow: 0 8px 24px color-mix(in srgb, var(--color-primary) 45%, transparent), inset 0 1px 0 rgba(255,255,255,.25);
    transition: transform .18s cubic-bezier(.4,0,.2,1), box-shadow .18s;
    min-height: 48px;
}

    .notif-fab:hover {
        transform: translateY(-2px) scale(1.03);
        box-shadow: 0 12px 32px color-mix(in srgb, var(--color-primary) 55%, transparent), inset 0 1px 0 rgba(255,255,255,.3);
    }

    .notif-fab:active {
        transform: scale(.98);
    }

    .notif-fab svg {
        width: 18px;
        height: 18px;
        flex-shrink: 0;
    }


/* ═══════════════════════════════════════════════════════════════════════
   MODAL (slide-up sheet)
   ═══════════════════════════════════════════════════════════════════════ */
.notif-modal {
    position: fixed;
    inset: 0;
    z-index: 10000;
    background: rgba(0,0,0,.55);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    display: flex;
    align-items: flex-end;
    justify-content: center;
    animation: notif-fade-in .2s ease-out;
    /* prevent body scroll bleed-through on iOS */
    overscroll-behavior: contain;
}

.notif-modal__sheet {
    width: 100%;
    max-width: 720px;
    max-height: 92dvh; /* dvh handles mobile URL bar resize */
    background: var(--color-surface);
    border-top-left-radius: 22px;
    border-top-right-radius: 22px;
    border: var(--notif-border);
    border-bottom: none;
    display: flex;
    flex-direction: column;
    box-shadow: 0 -20px 60px rgba(0,0,0,.45);
    animation: notif-sheet-in .32s cubic-bezier(.16,1,.3,1);
    overflow: hidden;
    padding-bottom: env(safe-area-inset-bottom, 0px);
}

/* Tablet+: center the modal and round all corners */
@media (min-width: 720px) {
    .notif-modal {
        align-items: center;
        padding: 1rem;
    }

    .notif-modal__sheet {
        max-height: 88dvh;
        border-radius: 22px;
        border: var(--notif-border);
        animation: notif-modal-in .32s cubic-bezier(.16,1,.3,1);
        padding-bottom: 0;
    }

    .notif-modal__handle {
        display: none;
    }
}

.notif-modal__handle {
    width: 44px;
    height: 5px;
    border-radius: 999px;
    background: var(--color-text-muted);
    opacity: .35;
    margin: 0.6rem auto 0.2rem;
    flex-shrink: 0;
}

.notif-modal__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.5rem 1.25rem 0.9rem;
    border-bottom: var(--notif-border);
    flex-shrink: 0;
}

    .notif-modal__head h2 {
        margin: 0;
        font-size: clamp(0.95rem, 2.8vw, 1.05rem);
        color: var(--color-text);
    }

.notif-modal__close {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: var(--color-surface-soft);
    border: var(--notif-border);
    color: var(--color-text-muted);
    display: grid;
    place-items: center;
    cursor: pointer;
    transition: all .15s;
    flex-shrink: 0;
}

    .notif-modal__close:hover {
        background: color-mix(in srgb, var(--c-critical) 18%, transparent);
        color: var(--c-critical);
    }

    .notif-modal__close svg {
        width: 18px;
        height: 18px;
    }

.notif-form {
    padding: clamp(0.85rem, 2.5vw, 1.1rem) clamp(0.85rem, 2.5vw, 1.25rem);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    display: flex;
    flex-direction: column;
    gap: clamp(0.7rem, 1.8vw, 1rem);
    flex: 1;
}

.notif-form__row {
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
    align-items: center;
}

.notif-form__row--split {
    gap: clamp(0.75rem, 2vw, 1.1rem);
}

    .notif-form__row--split > .notif-form__field {
        flex: 1 1 240px;
        min-width: 0;
    }

.notif-form__field--shrink {
    flex: 0 0 auto !important;
    min-width: 0 !important;
}

.notif-form__field {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    width: 100%;
    min-width: 0;
}

    .notif-form__field label {
        font-size: 0.78rem;
        color: var(--color-text-muted);
        font-weight: 600;
        display: flex;
        justify-content: space-between;
        align-items: baseline;
        gap: 0.5rem;
    }

.notif-form__counter {
    font-size: 0.7rem;
    opacity: .7;
    font-variant-numeric: tabular-nums;
    flex-shrink: 0;
}

.notif-input {
    background: var(--color-surface-soft);
    border: var(--notif-border);
    color: var(--color-text);
    border-radius: 12px;
    padding: 0.7rem 0.85rem;
    font-family: inherit;
    font-size: 16px; /* ≥16px stops iOS zoom-on-focus */
    transition: border-color .15s, background .15s;
    width: 100%;
    min-width: 0;
}

    .notif-input:focus {
        outline: none;
        border-color: var(--color-primary);
        background: var(--color-surface);
        box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-primary) 18%, transparent);
    }

.notif-input--ta {
    resize: vertical;
    min-height: 90px;
    line-height: 1.6;
}

/* iOS-style toggle */
.notif-toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    cursor: pointer;
    user-select: none;
    -webkit-user-select: none;
    min-height: 44px; /* touch target */
}

    .notif-toggle input {
        display: none;
    }

.notif-toggle__track {
    width: 42px;
    height: 24px;
    background: var(--color-surface-soft);
    border: var(--notif-border);
    border-radius: 999px;
    position: relative;
    transition: background .2s;
    flex-shrink: 0;
}

.notif-toggle__thumb {
    position: absolute;
    top: 2px;
    right: 2px;
    width: 18px;
    height: 18px;
    background: #fff;
    border-radius: 50%;
    box-shadow: 0 2px 4px rgba(0,0,0,.2);
    transition: transform .2s cubic-bezier(.4,0,.2,1), background .2s;
}

.notif-toggle input:checked + .notif-toggle__track {
    background: linear-gradient(135deg, var(--color-primary), var(--color-secondary, #8b5cf6));
}

    .notif-toggle input:checked + .notif-toggle__track .notif-toggle__thumb {
        transform: translateX(-18px);
    }

.notif-toggle__lbl {
    font-size: 0.86rem;
    color: var(--color-text);
}

.notif-toggle--sm .notif-toggle__track {
    width: 36px;
    height: 20px;
}

.notif-toggle--sm .notif-toggle__thumb {
    width: 16px;
    height: 16px;
}

.notif-toggle--sm input:checked + .notif-toggle__track .notif-toggle__thumb {
    transform: translateX(-16px);
}

/* severity segments */
.notif-segments {
    display: flex;
    gap: 0.3rem;
    background: var(--color-surface-soft);
    border-radius: 12px;
    padding: 0.25rem;
    border: var(--notif-border);
    flex-wrap: wrap;
}

.notif-segment {
    flex: 1 1 calc(25% - 0.3rem);
    min-width: 70px;
    background: transparent;
    border: none;
    color: var(--color-text-muted);
    padding: 0.55rem 0.6rem;
    border-radius: 9px;
    cursor: pointer;
    font-family: inherit;
    font-size: 0.8rem;
    font-weight: 500;
    transition: all .18s;
    min-height: 38px;
}

    .notif-segment:hover {
        color: var(--color-text);
    }

    .notif-segment.is-active {
        background: var(--color-surface);
        color: var(--color-text);
        box-shadow: var(--notif-elev-1);
        font-weight: 600;
    }

    .notif-segment.sev-success.is-active {
        color: var(--c-success);
    }

    .notif-segment.sev-warning.is-active {
        color: var(--c-warning);
    }

    .notif-segment.sev-critical.is-active {
        color: var(--c-critical);
    }

/* icon picker */
.notif-iconpick {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}

.notif-iconpick__btn {
    width: 44px;
    height: 44px; /* touch */
    border-radius: 12px;
    background: var(--color-surface-soft);
    border: var(--notif-border);
    color: var(--color-text-muted);
    cursor: pointer;
    display: grid;
    place-items: center;
    transition: all .15s;
    flex-shrink: 0;
}

    .notif-iconpick__btn svg {
        width: 20px;
        height: 20px;
    }

    .notif-iconpick__btn:hover {
        color: var(--color-text);
        transform: translateY(-1px);
    }

    .notif-iconpick__btn.is-active {
        background: linear-gradient(135deg, var(--color-primary), var(--color-secondary, #8b5cf6));
        color: #fff;
        border-color: transparent;
        box-shadow: 0 4px 12px color-mix(in srgb, var(--color-primary) 30%, transparent);
    }

.notif-form__msg {
    padding: 0.65rem 0.9rem;
    border-radius: 10px;
    font-size: 0.85rem;
    text-align: center;
}

    .notif-form__msg.is-ok {
        background: color-mix(in srgb, var(--c-success) 15%, transparent);
        color: var(--c-success);
        border: 1px solid color-mix(in srgb, var(--c-success) 30%, transparent);
    }

    .notif-form__msg.is-error {
        background: color-mix(in srgb, var(--c-critical) 15%, transparent);
        color: var(--c-critical);
        border: 1px solid color-mix(in srgb, var(--c-critical) 30%, transparent);
    }

.notif-modal__foot {
    display: flex;
    gap: 0.6rem;
    padding: 0.9rem 1.25rem 1.1rem;
    border-top: var(--notif-border);
    background: var(--color-surface);
    flex-shrink: 0;
    flex-wrap: wrap;
}

.notif-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    padding: 0.75rem 1.3rem;
    border-radius: 12px;
    cursor: pointer;
    font-family: inherit;
    font-weight: 600;
    font-size: 0.9rem;
    border: 1px solid transparent;
    transition: all .15s;
    flex: 1;
    min-height: 46px;
    white-space: nowrap;
}

    .notif-btn svg {
        width: 16px;
        height: 16px;
        flex-shrink: 0;
    }

.notif-btn--ghost {
    background: var(--color-surface-soft);
    color: var(--color-text);
    border-color: rgba(255,255,255,.06);
    flex: 0 0 auto;
    padding-inline: 1rem;
}

    .notif-btn--ghost:hover {
        background: var(--color-surface);
    }

.notif-btn--primary {
    background: linear-gradient(135deg, var(--color-primary), var(--color-secondary, #8b5cf6));
    color: #fff;
    box-shadow: 0 4px 14px color-mix(in srgb, var(--color-primary) 35%, transparent);
}

    .notif-btn--primary:hover:not(:disabled) {
        transform: translateY(-1px);
        box-shadow: 0 8px 22px color-mix(in srgb, var(--color-primary) 45%, transparent);
    }

.notif-btn:disabled {
    opacity: .5;
    cursor: not-allowed;
}

.notif-card--preview {
    cursor: default;
    pointer-events: none;
}

    .notif-card--preview:hover {
        transform: none;
        box-shadow: none;
    }


/* ═══════════════════════════════════════════════════════════════════════
   BELL (dashboard component)
   ═══════════════════════════════════════════════════════════════════════ */
.notif-bell {
    position: relative;
    width: 42px;
    height: 42px;
    background: var(--color-surface);
    border: var(--notif-border);
    color: var(--color-text);
    border-radius: 14px;
    cursor: pointer;
    display: grid;
    place-items: center;
    transition: all .15s cubic-bezier(.4,0,.2,1);
    box-shadow: var(--notif-elev-1);
}

    .notif-bell:hover {
        transform: translateY(-1px);
        box-shadow: var(--notif-elev-2);
        background: var(--color-surface-soft);
    }

    .notif-bell:active {
        transform: scale(.95);
    }

    .notif-bell svg {
        width: 20px;
        height: 20px;
    }

    .notif-bell.has-unread {
        color: var(--color-primary);
    }

        .notif-bell.has-unread svg {
            animation: notif-bell-shake 2.4s ease-in-out infinite;
            transform-origin: 50% 4px;
        }

.notif-bell__badge {
    position: absolute;
    top: -5px;
    left: -5px;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    border-radius: 999px;
    background: linear-gradient(135deg, #ef4444, #dc2626);
    color: #fff;
    font-size: 0.68rem;
    font-weight: 800;
    display: grid;
    place-items: center;
    box-shadow: 0 0 0 2px var(--color-bg, var(--color-surface)), 0 4px 10px rgba(239,68,68,.45);
    animation: notif-badge-pop .3s cubic-bezier(.16,1,.3,1);
}
/* -- کانتینر دربرگیرنده عکس و نوتیفیکیشن برای دسکتاپ -- */
.desktop-avatar-wrapper {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0; /* این دستور باعث میشه عکس و کادرش تو نوبار فشرده و بدشکل نشن */
}
/* -- کانتینر جدید دربرگیرنده عکس و نوتیفیکیشن -- */
.mobile-avatar-wrapper {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto; /* برای وسط‌چین شدن تمیز در نوبار */
}

/* -- بج نوتیفیکیشن در نوبار پایینی -- */
.main-notif-bell__badge {
    position: absolute;
    /* --- جابجایی به گوشه پایین و سمت راست --- */
    top: auto; /* اثر کدهای قبلی رو خنثی می‌کنیم */
    bottom: -2px; /* چسبیدن به پایین عکس (اگر خواستی بیاد پایین‌تر، بکنش 4px-) */
    right: -4px; /* چسبیدن به راست عکس */
    left: auto;
    min-width: 20px;
    height: 20px;
    padding: 0 5px;
    border-radius: 999px;
    background: linear-gradient(135deg, #ef4444, #dc2626);
    color: #fff;
    font-size: 0.7rem;
    font-weight: 800;
    /* --- تنظیمات برای وسط‌چین شدن فوق‌العاده دقیق عدد --- */
    display: flex;
    justify-content: center;
    align-items: center;
    line-height: 1; /* این خط باعث میشه فضای خالی اضافه‌ی فونت از بین بره و عدد دقیق وسط بیفته */

    box-shadow: 0 0 0 2px var(--color-bg, var(--color-surface)), 0 4px 10px rgba(239,68,68,.45);
    animation: notif-badge-pop .3s cubic-bezier(.16,1,.3,1);
    z-index: 10;
}

.ucm__bell-corner {
    position: absolute;
    top: 65px;
    left: 26px;
    z-index: 5;
}

@media (min-width: 601px) {
    .ucm__bell-corner {
        top: 12px;
        left: 110px;
    }
}

/* ═══════════════════════════════════════════════════════════════════════
   ANIMATIONS
   ═══════════════════════════════════════════════════════════════════════ */
@keyframes notif-fade-in {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes notif-sheet-in {
    from {
        transform: translateY(100%);
    }

    to {
        transform: translateY(0);
    }
}

@keyframes notif-modal-in {
    from {
        transform: translateY(20px) scale(.98);
        opacity: 0;
    }

    to {
        transform: translateY(0) scale(1);
        opacity: 1;
    }
}

@keyframes notif-card-in {
    from {
        opacity: 0;
        transform: translateY(8px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes notif-skel-shimmer {
    0% {
        background-position: 200% 0;
    }

    100% {
        background-position: -200% 0;
    }
}

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

@keyframes notif-pulse {
    0%,100% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.04);
    }
}

@keyframes notif-dot-pulse {
    0%,100% {
        box-shadow: 0 0 0 4px color-mix(in srgb, var(--color-primary) 25%, transparent);
    }

    50% {
        box-shadow: 0 0 0 8px color-mix(in srgb, var(--color-primary) 0%, transparent);
    }
}

@keyframes notif-bounce {
    0%,100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-3px);
    }
}

@keyframes notif-float {
    0%,100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-6px);
    }
}

@keyframes notif-bell-shake {
    0%,88%,100% {
        transform: rotate(0);
    }

    91% {
        transform: rotate(-12deg);
    }

    94% {
        transform: rotate(10deg);
    }

    97% {
        transform: rotate(-5deg);
    }
}

@keyframes notif-badge-pop {
    0% {
        transform: scale(0);
    }

    60% {
        transform: scale(1.2);
    }

    100% {
        transform: scale(1);
    }
}

@media (prefers-reduced-motion: reduce) {
    .notif-page *,
    .notif-page *::before,
    .notif-page *::after {
        animation-duration: .001s !important;
        transition-duration: .001s !important;
    }
}


/* ═══════════════════════════════════════════════════════════════════════
   RESPONSIVE  ── desktop-first overrides
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Ultra-Wide Monitors (≥ 1440px) ──────────────────────────────────── */
@media (min-width: 1440px) {
    .notif-page {
        max-width: 1100px;
        gap: 1.5rem;
    }
}

/* ── Wide desktops (≥ 1200px) — give a touch more breathing room ────── */
@media (min-width: 1200px) {
    .notif-page {
        padding-top: 1.4rem;
        gap: 1.25rem;
    }

    .notif-hero {
        padding: 1.8rem 1.6rem;
    }
}

/* ── Tablets & Laptops (≤ 960px) ─────────────────────────────────────── */
@media (max-width: 960px) {
    .notif-page {
        max-width: 100%;
    }
}

/* ── Phones (≤ 720px) — THE BIG ONE ──────────────────────────────────── */
@media (max-width: 720px) {
    .notif-hero {
        grid-template-columns: auto 1fr;
        grid-template-areas:
            "back  text"
            "icon  stats"
            "stats stats";
    }

    .notif-hero__icon {
        grid-area: icon;
        width: 52px;
        height: 52px;
        border-radius: 16px;
        justify-self: start;
    }

    .notif-toolbar {
        flex-direction: column;
        align-items: stretch;
        gap: 0.5rem;
        padding: 0.5rem;
        position: static;
    }

    .notif-filters {
        overflow-x: auto;
        overflow-y: hidden;
        /*flex-wrap: nowrap;*/
        scrollbar-width: none;
        -ms-overflow-style: none;
        padding-bottom: 0.15rem;
        scroll-snap-type: x proximity;
    }

        .notif-filters::-webkit-scrollbar {
            display: none;
        }

    .notif-pill {
        flex-shrink: 0;
        scroll-snap-align: start;
    }

    .notif-mark-all {
        justify-content: center;
    }

    /* Fix Grid Mobile for Cards - Moves Action to Bottom Row */
    .notif-card {
        grid-template-columns: 5px auto 1fr;
        padding: 0.85rem 0.85rem 0.85rem 0.55rem;
    }

    .notif-card__actions {
        grid-column: 1 / -1;
        flex-direction: row;
        justify-content: flex-end;
        opacity: 1;
        transform: none;
        margin-top: 0.35rem;
        padding-top: 0.35rem;
        border-top: 1px dashed rgba(255,255,255,.05);
    }

    .notif-card__body {
        -webkit-line-clamp: 3;
    }

    .notif-card.is-new::after {
        top: .85rem;
        left: .85rem;
    }

    /* FAB */
    .notif-fab {
        bottom: calc(6.5rem + env(safe-area-inset-bottom, 0px));
        left: calc(1.5rem + env(safe-area-inset-left, 0px));
        padding: 0.8rem 1.1rem !important;
    }
}

/* ── Small phones (≤ 480px) ──────────────────────────────────────────── */
@media (max-width: 480px) {
    .notif-page {
        gap: 0.7rem;
    }

    .notif-hero {
        padding: 1rem 0.9rem;
        grid-template-columns: auto 1fr;
        grid-template-areas:
            "back  icon"
            "text  text"
            "stats stats";
        gap: 0.6rem;
    }

    .notif-hero__back {
        justify-self: start;
    }

    .notif-hero__icon {
        justify-self: end;
        width: 48px;
        height: 48px;
        border-radius: 14px;
    }

    .notif-hero__title {
        font-size: 1.05rem;
        white-space: normal;
    }

    .notif-hero__subtitle {
        white-space: normal;
    }

    .notif-stat {
        padding: 0.5rem 0.4rem;
    }

    .notif-stat__num {
        font-size: 1rem;
    }

    .notif-stat__lbl {
        font-size: 0.66rem;
    }

    .notif-card {
        gap: 0.6rem;
    }

    .notif-card__icon {
        width: 38px;
        height: 38px;
        border-radius: 11px;
    }

    .notif-card__title {
        font-size: 0.88rem;
    }

    .notif-card__time {
        font-size: 0.68rem;
    }

    .notif-tag {
        font-size: 0.66rem;
        padding: 0.15rem 0.45rem;
    }

    .notif-modal__foot {
        padding: 0.85rem 0.9rem 1rem;
    }

    .notif-btn {
        padding: 0.7rem 1rem;
        font-size: 0.88rem;
    }

    .notif-fab {
        padding: 0.85rem;
    }

        .notif-fab span {
            display: none;
        }
}

/* ── Tiny phones (≤ 360px) ───────────────────────────────────────────── */
@media (max-width: 360px) {
    .notif-page {
        padding-inline: 0.5rem;
    }

    .notif-hero {
        padding: 0.9rem 0.75rem;
    }

    .notif-hero__icon {
        width: 44px;
        height: 44px;
    }

    .notif-pill {
        padding: 0.45rem 0.7rem;
        font-size: 0.8rem;
    }

    .notif-pill__count {
        display: none;
    }

    .notif-stat {
        padding: 0.45rem 0.3rem;
    }

    .notif-iconpick__btn {
        width: 40px;
        height: 40px;
    }

        .notif-iconpick__btn svg {
            width: 18px;
            height: 18px;
        }

    .notif-segment {
        min-width: 60px;
        padding: 0.5rem 0.4rem;
        font-size: 0.75rem;
    }
}

/* ── Landscape phones (short height) ─────────────────────────────────── */
@media (max-height: 480px) and (orientation: landscape) {
    .notif-page {
        padding-bottom: calc(4rem + env(safe-area-inset-bottom, 0px));
    }

    .notif-hero {
        grid-template-columns: auto auto 1fr auto;
        grid-template-areas: "back icon text stats";
        padding: 0.8rem 1rem;
    }

    .notif-hero__stats {
        grid-area: stats;
        grid-template-columns: repeat(3, auto);
        margin-top: 0;
    }

    .notif-modal__sheet {
        max-height: 95dvh;
    }

    .notif-modal__head {
        padding: 0.4rem 1rem 0.6rem;
    }

    .notif-form {
        padding: 0.7rem 1rem;
        gap: 0.7rem;
    }
}

/* ── Touch devices (no hover) — keep actions visible ────────────────── */
@media (hover: none) {
    .notif-card__actions {
        opacity: 1;
        transform: none;
    }

    .notif-card:hover {
        transform: none;
        box-shadow: var(--notif-elev-1);
    }
}

/* #endregion notifications.css ═══════════════════════════════════════════ */







/*#region Shop-pay css*/

.shp-pay-root {
    direction: rtl;
    text-align: right;
    min-height: calc(100vh - 40px);
    padding: clamp(14px, 2.2vw, 26px);
    display: grid;
    place-items: center;
}

.shp-pay-shell {
    width: min(980px, 100%);
}

.shp-pay-card {
    position: relative;
    border-radius: var(--radius-xl, 24px);
    padding: clamp(16px, 2.2vw, 22px);
    background: var(--color-surface-soft, rgba(15,23,42,0.85));
    border: 1px solid var(--color-border-soft, rgba(255,255,255,0.08));
    box-shadow: var(--shadow-strong, 0 20px 60px rgba(0,0,0,0.35));
    backdrop-filter: blur(12px);
    overflow: hidden;
}

    /* تغییر رنگ هاله‌های پشت کارت به طلایی و زرد (متناسب با کارت پاسارگاد) */
    .shp-pay-card::before {
        content: "";
        position: absolute;
        inset: 0;
        background: radial-gradient(circle at 10% 0%, rgba(251,191,36,0.15) 0%, transparent 50%), radial-gradient(circle at 90% 100%, rgba(245,158,11,0.15) 0%, transparent 50%);
        pointer-events: none;
        z-index: 0;
    }

    .shp-pay-card > * {
        position: relative;
        z-index: 1;
    }

.shp-pay-topbar {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 16px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--color-border-soft, rgba(255,255,255,0.08));
}

.shp-pay-titlewrap {
    min-width: 0;
}

.shp-pay-title {
    margin: 0;
    font-size: clamp(18px, 2.1vw, 24px);
    font-weight: 900;
    letter-spacing: -.2px;
    background: linear-gradient(135deg, #fde047, #f59e0b);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.shp-pay-sub {
    margin-top: 6px;
    color: var(--color-text-muted, rgba(255,255,255,.72));
    font-size: 13px;
    line-height: 1.7;
    max-width: 62ch;
}

.shp-btn-back {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    font-size: 13px;
    font-weight: 700;
    border-radius: 999px;
    background: rgba(255,255,255,0.05);
    color: var(--color-text, #fff);
    border: 1px solid rgba(255,255,255,0.1);
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
}

    .shp-btn-back svg {
        width: 14px;
        height: 14px;
    }

    .shp-btn-back:hover:not(:disabled) {
        background: rgba(251,191,36,0.15);
        border-color: #f59e0b;
        color: #fde047;
    }

/* بخش جدید: استایل باکس اطلاعات بسته */
.shp-pay-package-info {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: linear-gradient(135deg, rgba(251,191,36,0.1), rgba(245,158,11,0.05));
    border: 1px solid rgba(251,191,36,0.25);
    border-radius: 16px;
    padding: 16px 20px;
    margin-bottom: 20px;
}

.shp-pkg-detail {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.shp-pkg-label {
    font-size: 12px;
    color: rgba(255,255,255,0.7);
}

.shp-pkg-name {
    font-size: 16px;
    font-weight: 800;
    color: #fff;
}

.shp-pkg-price {
    font-size: 18px;
    font-weight: 900;
    color: #fde047;
}

    .shp-pkg-price small {
        font-size: 12px;
        font-weight: normal;
        color: rgba(255,255,255,0.6);
    }

.shp-pay-state {
    margin-top: 10px;
    border-radius: 14px;
    padding: 12px 14px;
    font-size: 13px;
    border: 1px solid rgba(255,255,255,.10);
    background: rgba(0,0,0,.25);
}

.shp-pay-state-loading {
    color: rgba(255,255,255,.80);
}

.shp-pay-state-error {
    color: #ffd0d0;
    border-color: rgba(255,80,80,.30);
    background: rgba(255,80,80,.10);
}

.shp-pay-grid {
    display: grid;
    grid-template-columns: 1fr 1.08fr;
    gap: 16px;
}

.shp-pay-panel {
    border-radius: 18px;
    padding: 16px;
    /* اعمال تم ملایم زرد/طلایی به پس‌زمینه پنل‌ها */
    background: linear-gradient(180deg, rgba(30,25,10,0.6) 0%, rgba(15,23,42,0.6) 100%);
    border: 1px solid var(--color-border-soft, rgba(251,191,36,0.15));
    display: flex;
    flex-direction: column;
}

.shp-pay-panel-head {
    margin-bottom: 14px;
}

.shp-pay-panel-title {
    font-weight: 800;
    color: var(--color-text, #fff);
    font-size: 15px;
}

.shp-pay-panel-hint {
    margin-top: 4px;
    font-size: 12px;
    color: var(--color-text-muted, rgba(255,255,255,.62));
    line-height: 1.6;
}

/* کارت پاسارگاد */
.shp-psg-card {
    position: relative;
    border-radius: 16px;
    padding: 16px;
    color: #fff;
    background: radial-gradient(500px 280px at 95% -30%, rgba(251,191,36,.25), transparent 60%), radial-gradient(420px 250px at -10% 110%, rgba(236,72,153,.25), transparent 65%), linear-gradient(135deg, #0b1023 0%, #1e1b4b 50%, #4c1d95 100%);
    border: 1px solid rgba(251,191,36,0.4); /* هماهنگ سازی حاشیه */
    box-shadow: 0 10px 30px rgba(0,0,0,0.3);
    overflow: hidden;
}

.shp-psg-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
}

.shp-psg-bank {
    font-weight: 800;
    color: #fff;
    font-size: 15px;
}

.shp-psg-type {
    margin-top: 2px;
    font-size: 12px;
    color: rgba(255,255,255,.7);
}

.shp-psg-logo-box {
    width: 42px;
    height: 42px;
    border-radius: 12px;
    background: rgba(255,255,255,.1);
    border: 1px solid rgba(255,255,255,.15);
    display: grid;
    place-items: center;
    overflow: hidden;
    margin: 0;
}

.shp-psg-logo-img {
    width: 30px;
    height: 30px;
    object-fit: contain;
}

.shp-psg-number-frame {
    margin-top: 16px;
    border-radius: 14px;
    padding: 12px 14px;
    background: rgba(0,0,0,.25);
    border: 1px solid rgba(255,255,255,.1);
    backdrop-filter: blur(4px);
}

.shp-psg-number {
    direction: ltr;
    font-variant-numeric: tabular-nums;
    letter-spacing: 2px;
    font-weight: 800;
    color: #fde047;
    text-align: center;
    font-size: 1.1rem;
    text-shadow: 0 2px 8px rgba(0,0,0,0.4);
}

.shp-psg-bottom {
    margin-top: 16px;
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 10px;
}

.shp-psg-owner-label {
    font-size: 12px;
    color: rgba(255,255,255,.6);
}

.shp-psg-owner-name {
    margin-top: 4px;
    font-weight: 800;
    color: #fff;
    font-size: 14px;
}

.shp-psg-copy {
    padding: 8px 14px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 800;
    border: 1px solid rgba(251,191,36,.4);
    background: rgba(251,191,36,.15);
    color: #fde047;
    cursor: pointer;
    transition: transform .15s ease, background .15s ease;
}

    .shp-psg-copy:hover {
        transform: translateY(-2px);
        background: rgba(251,191,36,.25);
    }

.shp-pay-note {
    margin-top: auto;
    padding-top: 16px;
    display: flex;
    align-items: flex-start;
    gap: 8px;
    color: var(--color-text-muted, rgba(255,255,255,.7));
    font-size: 12px;
    line-height: 1.7;
}

.shp-pay-note-dot {
    width: 8px;
    height: 8px;
    margin-top: 6px;
    border-radius: 999px;
    background: #fde047; /* تغییر به زرد */
    box-shadow: 0 0 0 4px rgba(251,191,36,.15);
    flex-shrink: 0;
}

/* درگ و دراپ رسید */
.shp-pay-drop {
    position: relative;
    display: block;
    border-radius: 16px;
    padding: 14px;
    background: var(--color-bg, rgba(0,0,0,0.2));
    border: 2px dashed var(--color-border-soft, rgba(255,255,255,.15));
    min-height: 300px; /* افزایش ارتفاع کادر */
    cursor: pointer;
    transition: all .2s ease;
    flex-grow: 1;
    margin-bottom: 16px;
}

    .shp-pay-drop:hover {
        border-color: #fde047;
        background: rgba(251,191,36,.05);
    }

    .shp-pay-drop.is-drag {
        border-color: #f59e0b;
        background: rgba(245,158,11,.1);
        transform: scale(1.02);
    }

.shp-pay-file {
    position: absolute;
    inset: 0;
    opacity: 0;
    cursor: pointer;
    width: 100%;
    height: 100%;
    z-index: 2;
}

.shp-pay-drop-inner {
    height: 100%;
    min-height: 270px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 10px;
    pointer-events: none;
}

.shp-pay-drop-badge {
    width: 48px;
    height: 48px;
    border-radius: 14px;
    display: grid;
    place-items: center;
    color: #fde047; /* تغییر رنگ آیکون به زرد */
    background: rgba(251,191,36,.1);
    border: 1px solid rgba(251,191,36,.2);
}

    .shp-pay-drop-badge svg {
        width: 24px;
        height: 24px;
    }

.shp-pay-drop-title {
    font-weight: 800;
    color: var(--color-text, #fff);
}

.shp-pay-drop-hint {
    font-size: 12px;
    color: var(--color-text-muted, rgba(255,255,255,.6));
}

/* تغییرات عکس پیش‌نمایش (بزرگ‌تر و واضح‌تر) */
.shp-pay-preview-img {
    width: 100%;
    max-height: 350px; /* ارتفاع بیشتر برای نمایش جزئیات */
    border-radius: 8px;
    object-fit: contain; /* حفظ تناسب تا عکس برش نخورد */
    background: rgba(0,0,0,0.3); /* بک‌گراند تیره برای اسکرین‌شات‌ها */
    border: 1px solid rgba(255,255,255,0.1);
}

.shp-pay-replace {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: 999px;
    background: rgba(0,0,0,0.6);
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    backdrop-filter: blur(4px);
    margin-top: 8px;
}

    .shp-pay-replace svg {
        width: 14px;
        height: 14px;
    }

/* دکمه تایید نهایی */
.shp-btn-submit {
    width: 100%;
    padding: 12px 16px;
    border-radius: 14px;
    background: linear-gradient(135deg, #f59e0b, #d97706); /* رنگ طلایی/پرتقالی متناسب با فروشگاه */
    color: #fff;
    font-weight: 900;
    font-size: 15px;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    box-shadow: 0 8px 20px rgba(245,158,11,0.3);
    transition: all 0.2s ease;
}

    .shp-btn-submit:hover:not(:disabled) {
        transform: translateY(-2px);
        box-shadow: 0 12px 25px rgba(245,158,11,0.5);
    }

    .shp-btn-submit:disabled {
        background: rgba(255,255,255,0.1);
        color: rgba(255,255,255,0.4);
        box-shadow: none;
        cursor: not-allowed;
        transform: none;
    }

.shp-spinner {
    width: 18px;
    height: 18px;
    border: 2px solid rgba(255,255,255,0.3);
    border-top-color: #fff;
    border-radius: 50%;
    animation: shp-spin 0.8s linear infinite;
}

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

@media (max-width: 768px) {
    .shp-pay-package-info {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }

    .shp-pay-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .shp-pay-root {
        padding: 12px;
    }

    .shp-pay-card {
        padding: 16px;
    }
}


/* ────────────────────────────────────────────────────────
   بخش اطلاعات بسته (پشتیبانی از عکس و چیدمان ریسپانسیو)
   ──────────────────────────────────────────────────────── */
.shp-pay-package-info {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: linear-gradient(135deg, rgba(251,191,36,0.1), rgba(245,158,11,0.05));
    border: 1px solid rgba(251,191,36,0.25);
    border-radius: 16px;
    padding: 16px 20px;
    margin-bottom: 20px;
    gap: 16px;
}

/* بخش سمت راست دسکتاپ: شامل عکس و نام بسته */
.shp-pkg-main {
    display: flex;
    align-items: center;
    gap: 14px;
}

/* استایل عکس محصول */
.shp-pkg-image {
    width: 56px;
    height: 56px;
    border-radius: 12px;
    object-fit: cover;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(251, 191, 36, 0.2);
}

.shp-pkg-detail {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.shp-pkg-label {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.65);
}

.shp-pkg-name {
    font-size: 16px;
    font-weight: 800;
    color: #fff;
}

/* بخش سمت چپ دسکتاپ: باکس قیمت */
.shp-pkg-price-box {
    display: flex;
    flex-direction: column;
    align-items: flex-end; /* تراز کردن قیمت به سمت چپ در دسکتاپ */
    gap: 4px;
}

.shp-pkg-price {
    font-size: 18px;
    font-weight: 900;
    color: #fde047;
}

    .shp-pkg-price small {
        font-size: 12px;
        font-weight: normal;
        color: rgba(255, 255, 255, 0.6);
    }

/* ────────────────────────────────────────────────────────
   استایل‌های مخصوص موبایل و اندروید (زیر 768 پیکسل)
   ──────────────────────────────────────────────────────── */
@media (max-width: 768px) {
    .shp-pay-package-info {
        flex-direction: column;
        align-items: stretch; /* کشیده شدن آیتم‌ها برای استفاده از کل عرض */
        gap: 14px;
        padding: 14px 16px;
    }

    .shp-pkg-main {
        width: 100%;
        border-bottom: 1px solid rgba(255, 255, 255, 0.07);
        padding-bottom: 12px;
    }

    /* تغییر چیدمان قیمت: مبلع قابل پرداخت در راست، قیمت روبروی آن در چپ */
    .shp-pkg-price-box {
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        width: 100%;
        margin-top: 2px;
    }

        .shp-pkg-price-box .shp-pkg-label {
            text-align: right; /* گوشه سمت راست پایین */
        }
}
/*#endregion Shop-pay css*/


/*#region Shop-pay css*/
/* =========================================
   Dashboard Coin Plans Styles
   ========================================= */

.Dashboard-page-root {
    padding: 24px;
    color: #cbd5e1;
    font-family: inherit;
}

.Dashboard-header-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 24px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    padding-bottom: 16px;
}

.Dashboard-page-title {
    font-size: 20px;
    font-weight: 800;
    color: #fff;
    margin: 0;
}

/* دکمه‌ها */
.Dashboard-btn-primary, .Dashboard-btn-success, .Dashboard-btn-secondary {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 18px;
    border-radius: 12px;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    border: none;
    transition: all 0.2s ease;
}

.Dashboard-btn-primary {
    background: linear-gradient(135deg, #6366f1, #4f46e5);
    color: white;
}

    .Dashboard-btn-primary:hover {
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(99, 102, 241, 0.4);
    }

.Dashboard-btn-success {
    background: #10b981;
    color: white;
}

    .Dashboard-btn-success:hover {
        background: #059669;
    }

.Dashboard-btn-secondary {
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
}

    .Dashboard-btn-secondary:hover {
        background: rgba(255, 255, 255, 0.15);
    }

.Dashboard-btn-icon {
    background: none;
    border: none;
    color: #94a3b8;
    cursor: pointer;
    padding: 6px;
    border-radius: 8px;
    transition: 0.2s;
}

    .Dashboard-btn-icon svg {
        width: 18px;
        height: 18px;
    }

    .Dashboard-btn-icon:hover {
        color: #fff;
        background: rgba(255, 255, 255, 0.1);
    }

.Dashboard-text-danger:hover {
    color: #ef4444;
    background: rgba(239, 68, 68, 0.1);
}

/* جدول */
.Dashboard-table-container {
    background: rgba(15, 23, 42, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 16px;
    overflow-x: auto;
}

.Dashboard-data-table {
    width: 100%;
    border-collapse: collapse;
    text-align: right;
}

    .Dashboard-data-table th, .Dashboard-data-table td {
        padding: 14px 20px;
        border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    }

    .Dashboard-data-table th {
        font-size: 13px;
        font-weight: 600;
        color: #94a3b8;
        background: rgba(0, 0, 0, 0.2);
    }

.Dashboard-tbl-img {
    width: 48px;
    height: 48px;
    border-radius: 10px;
    object-fit: cover;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.Dashboard-text-bold {
    font-weight: 800;
    color: #fde047;
}

.Dashboard-badge-popular {
    background: rgba(245, 158, 11, 0.15);
    color: #f59e0b;
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: bold;
    border: 1px solid rgba(245, 158, 11, 0.3);
}

.Dashboard-badge-normal {
    background: rgba(255, 255, 255, 0.05);
    color: #94a3b8;
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 11px;
}

/* مودال */
.Dashboard-modal-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(4px);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000;
    padding: 20px;
}

.Dashboard-modal-content {
    background: #0f172a;
    width: 100%;
    max-width: 600px;
    border-radius: 20px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
    overflow: hidden;
}

.Dashboard-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 24px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

    .Dashboard-modal-header h2 {
        margin: 0;
        font-size: 18px;
        color: #fff;
    }

.Dashboard-modal-close {
    background: none;
    border: none;
    color: #94a3b8;
    cursor: pointer;
    padding: 4px;
}

    .Dashboard-modal-close:hover {
        color: #ef4444;
    }

    .Dashboard-modal-close svg {
        width: 22px;
        height: 22px;
    }

.Dashboard-modal-body {
    padding: 24px;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.Dashboard-form-row {
    display: flex;
    gap: 16px;
}

    .Dashboard-form-row > * {
        flex: 1;
    }

.Dashboard-form-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.Dashboard-align-center {
    justify-content: center;
}

.Dashboard-form-label {
    font-size: 13px;
    color: #94a3b8;
}

.Dashboard-form-control {
    background: rgba(0, 0, 0, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    padding: 12px 14px;
    color: #fff;
    font-family: inherit;
    font-size: 14px;
    transition: 0.2s;
    width: 100%;
    box-sizing: border-box;
}

    .Dashboard-form-control:focus {
        border-color: #6366f1;
        outline: none;
        background: rgba(0, 0, 0, 0.4);
    }

/* آپلود عکس */
.Dashboard-upload-box {
    position: relative;
    border: 2px dashed rgba(255, 255, 255, 0.15);
    border-radius: 12px;
    height: 120px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.2);
    overflow: hidden;
}

    .Dashboard-upload-box:hover {
        border-color: #6366f1;
    }

.Dashboard-file-input {
    position: absolute;
    inset: 0;
    opacity: 0;
    cursor: pointer;
    width: 100%;
    height: 100%;
    z-index: 2;
}

.Dashboard-upload-hint {
    font-size: 13px;
    color: #64748b;
}

.Dashboard-upload-preview {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    z-index: 1;
    background: rgba(0,0,0,0.5);
}

.Dashboard-checkbox-label {
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    font-size: 14px;
    color: #fff;
    margin-top: 14px;
}

.Dashboard-checkbox {
    width: 18px;
    height: 18px;
    accent-color: #6366f1;
    cursor: pointer;
}

.Dashboard-modal-footer {
    padding: 16px 24px;
    background: rgba(0, 0, 0, 0.2);
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    display: flex;
    justify-content: flex-end;
    gap: 12px;
}
/*#endregion Shop-pay css*/




/* =========================================
   Store Dashboard Card & Button
   ========================================= */
.dash-store-card {
    position: relative;
    background: var(--color-surface, #1e293b);
    border-radius: 16px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
    border: 1px solid var(--color-border-soft, rgba(255, 255, 255, 0.05));
    transition: transform 0.2s ease;
}

.dash-store-card__banner {
    width: 100%;
    height: 140px;
    object-fit: cover;
    background: linear-gradient(135deg, #0f172a 0%, #6366f1 45%, #ec4899 100%);
}

.dash-store-card__content {
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    margin-top: -40px; /* کشیدن محتوا روی بنر برای آواتار */
}

.dash-store-card__avatar {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    border: 3px solid var(--color-surface, #1e293b);
    background: #0f172a;
    object-fit: cover;
    margin-bottom: 1rem;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.dash-store-card__title {
    color: #fff;
    font-size: 1.25rem;
    font-weight: 800;
    margin-bottom: 0.5rem;
}

/* Store Button (Primary Neon Variant) */
.btn-store-primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.75rem 1.5rem;
    border-radius: 999px;
    border: none;
    font-family: inherit;
    font-weight: 700;
    font-size: 1rem;
    color: #ffffff;
    background: linear-gradient(90deg, #6366f1, #ec4899);
    box-shadow: 0 4px 15px rgba(236, 72, 153, 0.3);
    cursor: pointer;
    transition: all 0.2s ease;
    width: 100%; /* عرض کامل در کارت */
    max-width: 250px;
}

    .btn-store-primary:hover:not(:disabled) {
        transform: translateY(-2px);
        box-shadow: 0 8px 25px rgba(236, 72, 153, 0.5);
        filter: brightness(1.1);
    }

    .btn-store-primary:focus-visible {
        outline: none;
        box-shadow: 0 0 0 3px #0f172a, 0 0 0 5px #ec4899;
    }

    .btn-store-primary:disabled {
        opacity: 0.6;
        cursor: not-allowed;
        filter: grayscale(0.5);
    }



/*#region MyReceipts*/

/* ═══ RECEIPTS — UI مدرن ════════════════════════════════════════════════ */
.rcpt-list {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: 0.5rem 0;
}

/* ─── کارت پایه ─── */
.rcpt-card {
    --rcpt-color: #94a3b8;
    --rcpt-color-2: #64748b;
    --rcpt-tint: rgba(148, 163, 184, .08);
    --rcpt-tint-strong: rgba(148, 163, 184, .15);
    position: relative;
    display: flex;
    gap: 1rem;
    padding: 1.1rem 1.2rem 1.1rem 1.4rem;
    border-radius: 18px;
    background: linear-gradient(135deg, var(--rcpt-tint), transparent 60%), var(--color-surface);
    border: 1px solid var(--color-border-soft);
    overflow: hidden;
    transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}

[data-theme="dark"] .rcpt-card {
    background: linear-gradient(135deg, var(--rcpt-tint), transparent 60%), rgba(15, 23, 42, .65);
}

.rcpt-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 32px rgba(0, 0, 0, .15), 0 0 0 1px var(--rcpt-color);
}

/* نوار رنگی عمودی سمت راست (در RTL) */
.rcpt-card::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    width: 4px;
    background: linear-gradient(180deg, var(--rcpt-color), var(--rcpt-color-2));
}

/* glow blob گوشه بالا چپ */
.rcpt-card::after {
    content: "";
    position: absolute;
    top: -40px;
    left: -40px;
    width: 120px;
    height: 120px;
    background: radial-gradient(circle, var(--rcpt-color), transparent 70%);
    opacity: .12;
    pointer-events: none;
}

/* ─── متغیرهای رنگ هر وضعیت ─── */
.rcpt-card--pending {
    --rcpt-color: #f59e0b;
    --rcpt-color-2: #d97706;
    --rcpt-tint: rgba(245, 158, 11, .1);
    --rcpt-tint-strong: rgba(245, 158, 11, .2);
}

.rcpt-card--approved {
    --rcpt-color: #10b981;
    --rcpt-color-2: #059669;
    --rcpt-tint: rgba(16, 185, 129, .1);
    --rcpt-tint-strong: rgba(16, 185, 129, .2);
}

.rcpt-card--rejected {
    --rcpt-color: #ef4444;
    --rcpt-color-2: #dc2626;
    --rcpt-tint: rgba(239, 68, 68, .1);
    --rcpt-tint-strong: rgba(239, 68, 68, .2);
}

/* ─── تصویر رسید (thumbnail) ─── */
.rcpt-card__thumb {
    position: relative;
    width: 86px;
    height: 86px;
    flex: 0 0 86px;
    border-radius: 14px;
    background: var(--rcpt-tint-strong) center / cover no-repeat;
    border: 1px solid var(--rcpt-color);
    cursor: pointer;
    overflow: hidden;
    display: grid;
    place-items: center;
    transition: transform .2s ease;
}

    .rcpt-card__thumb:hover {
        transform: scale(1.04);
    }

    .rcpt-card__thumb svg {
        width: 28px;
        height: 28px;
        color: var(--rcpt-color);
        opacity: .6;
    }

/* آیکن ذره‌بین در هاور */
.rcpt-card__thumb-zoom {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, .35);
    display: grid;
    place-items: center;
    opacity: 0;
    transition: opacity .2s ease;
}

.rcpt-card__thumb:hover .rcpt-card__thumb-zoom {
    opacity: 1;
}

.rcpt-card__thumb-zoom svg {
    width: 22px;
    height: 22px;
    color: #fff;
    opacity: 1;
}

/* ─── بدنه ─── */
.rcpt-card__body {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: .35rem;
}

.rcpt-card__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .6rem;
    flex-wrap: wrap;
}

.rcpt-card__title {
    font-size: 1rem;
    font-weight: 800;
    color: var(--color-text);
    display: flex;
    align-items: center;
    gap: .5rem;
}

.rcpt-card__coins {
    font-size: .85rem;
    font-weight: 700;
    color: var(--rcpt-color);
    font-feature-settings: "tnum";
}

/* ─── بَج وضعیت ─── */
.rcpt-badge {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .3rem .75rem;
    border-radius: 999px;
    font-size: .72rem;
    font-weight: 800;
    background: var(--rcpt-tint-strong);
    color: var(--rcpt-color);
    border: 1px solid var(--rcpt-color);
    white-space: nowrap;
}

    .rcpt-badge svg {
        width: 12px;
        height: 12px;
    }

/* انیمیشن پالس برای «در انتظار» */
.rcpt-card--pending .rcpt-badge {
    animation: rcpt-pulse 2s ease-in-out infinite;
}

@keyframes rcpt-pulse {
    0%, 100% {
        box-shadow: 0 0 0 0 rgba(245, 158, 11, .4);
    }

    50% {
        box-shadow: 0 0 0 6px rgba(245, 158, 11, 0);
    }
}

/* ─── متاداده ─── */
.rcpt-card__meta {
    display: flex;
    flex-wrap: wrap;
    gap: .35rem 1rem;
    font-size: .82rem;
    color: var(--color-text-muted);
    margin-top: .2rem;
}

    .rcpt-card__meta b {
        color: var(--color-text);
        font-weight: 700;
        font-feature-settings: "tnum";
    }

.rcpt-card__code {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    font-family: ui-monospace, "SF Mono", monospace;
    font-size: .75rem;
    padding: .2rem .55rem;
    border-radius: 6px;
    background: var(--color-surface-soft);
    color: var(--color-text);
}

.rcpt-card__date {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    font-size: .72rem;
    color: var(--color-text-muted);
    margin-top: .15rem;
}

    .rcpt-card__date svg {
        width: 12px;
        height: 12px;
        opacity: .7;
    }

/* ─── باکس دلیل رد ─── */
.rcpt-card__reject {
    margin-top: .65rem;
    padding: .65rem .85rem;
    border-radius: 12px;
    background: rgba(239, 68, 68, .08);
    border: 1px solid rgba(239, 68, 68, .25);
    border-right: 3px solid #ef4444;
    color: #fca5a5;
    font-size: .82rem;
    line-height: 1.7;
    display: flex;
    gap: .5rem;
    align-items: flex-start;
}

    .rcpt-card__reject svg {
        width: 18px;
        height: 18px;
        flex-shrink: 0;
        color: #ef4444;
        margin-top: 2px;
    }

    .rcpt-card__reject b {
        color: #ef4444;
        font-weight: 800;
    }

/* ─── ریسپانسیو ─── */
@media (max-width: 480px) {
    .rcpt-card {
        padding: 1rem;
        gap: .8rem;
    }

    .rcpt-card__thumb {
        width: 72px;
        height: 72px;
        flex-basis: 72px;
    }

    .rcpt-card__title {
        font-size: .9rem;
    }

    .rcpt-card__head {
        flex-direction: column;
        align-items: flex-start;
    }
}







/* وسط چین کردن متن تب‌ها در همه سایزها */
.shp-tab {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
}

/* استایل مخصوص موبایل */
@media (max-width: 768px) {
    .shp-tabs {
        width: 100% !important; /* گرفتن کل عرض صفحه */
        margin-right: 0 !important;
        margin-left: 0 !important;
        border-radius: 30px; /* شعاع حاشیه کمتر برای نشستن بهتر در صفحه */
        padding: 6px 4px !important;
        /* قابلیت اسکرول افقی اگر تعداد تب‌ها زیاد شد */
        display: flex;
        flex-wrap: nowrap;
        overflow-x: auto;
        /* مخفی کردن اسکرول‌بار */
        -ms-overflow-style: none;
        scrollbar-width: none;
    }

        .shp-tabs::-webkit-scrollbar {
            display: none;
        }

    .shp-tab {
        flex: 1 0 auto;
        padding: 8px 16px !important; /* پدینگ مناسب برای دیده شدن بهتر متن */
        font-size: 0.78rem; /* کمی کوچک کردن فونت برای جا شدن در موبایل */
    }
}



.skeleton-box {
    position: relative;
    overflow: hidden;
    background-color: #e2e5e7; /* رنگ پس‌زمینه در تم روشن */
    border-radius: 4px;
}

    .skeleton-box::after {
        content: '';
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        transform: translateX(-100%);
        background-image: linear-gradient( 90deg, rgba(255,255,255, 0) 0, rgba(255,255,255, 0.4) 20%, rgba(255,255,255, 0.4) 60%, rgba(255,255,255, 0) );
        animation: shimmer 1.5s infinite;
    }

@keyframes shimmer {
    100% {
        transform: translateX(100%);
    }
}

/* برای تم تاریک (در صورت نیاز) */
[data-theme="dark"] .skeleton-box {
    background-color: #2a2a2a;
}

    [data-theme="dark"] .skeleton-box::after {
        background-image: linear-gradient( 90deg, rgba(255,255,255, 0) 0, rgba(255,255,255, 0.05) 20%, rgba(255,255,255, 0.05) 60%, rgba(255,255,255, 0) );
    }


/*#endregion MyReceipts*/

/*#region new part shop */

/* پس‌زمینه تاریک */
.shp-lightbox-bg {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.6);
    z-index: 9100;
    backdrop-filter: blur(3px); /* یک افکت محوی ملایم برای پس‌زمینه */
}

/* بدنه مودال (کادر دور عکس) */
.shp-lightbox-modal {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 9101;
    width: 90%; /* در موبایل کمی از لبه‌ها فاصله می‌گیرد */
    max-width: 500px;
    padding: 16px;
    background-color: var(--bg-card, #ffffff);
    border-radius: 12px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
}

/* دکمه ضربدر (بستن) */
.shp-lightbox-close {
    position: absolute;
    top: -12px;
    right: -12px;
    width: 34px;
    height: 34px;
    background-color: #ef4444;
    color: #ffffff;
    border: none;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
    z-index: 9102;
    transition: transform 0.2s ease, background-color 0.2s ease;
}

    /* افکت هاور برای دکمه بستن */
    .shp-lightbox-close:hover {
        transform: scale(1.1);
        background-color: #dc2626;
    }

    /* آیکون داخل دکمه بستن */
    .shp-lightbox-close svg {
        width: 18px;
        height: 18px;
    }

/* تصویر داخل لایت‌باکس */
.shp-lightbox-img {
    width: 100%;
    display: block;
    border-radius: 8px;
    border: 2px solid var(--border-color, #e5e7eb);
    max-height: 80vh;
    object-fit: contain;
}

[data-theme="dark"] .shp-lightbox-modal {
    background-color: #1f2937; /* رنگ کارت در تم تاریک */
}

[data-theme="dark"] .shp-lightbox-img {
    border-color: #374151; /* رنگ حاشیه عکس در تم تاریک */
}


/* ── WALLET ACTIONS (باکس موجودی + دکمه شارژ) ── */
.shp-wallet__actions {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap; /* اجازه می‌دهد دکمه در موبایل به خط بعد بشکند */
}

.shp-wallet__balance {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    padding: 0.55rem 0.85rem;
    border-radius: var(--radius-lg);
    background: rgba(0, 0, 0, 0.25);
    border: 1px solid rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(8px);
    flex: 1 1 auto; /* در صورت بزرگ بودن عدد، فضا را پر می‌کند */
    min-width: 150px;
}

/* ساختار متنی جدید (دو خطی شدن متن) */
.shp-wallet__t {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.shp-wallet__lbl {
    font-size: 0.72rem;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.85);
}

.shp-wallet__val {
    font-family: "Vazirmatn", system-ui, sans-serif;
    font-weight: 900;
    font-size: 1.45rem;
    line-height: 1.05;
    color: #fde047;
    font-feature-settings: "tnum";
    word-break: break-all; /* اعداد طولانی از کادر بیرون نمی‌زنند */
    text-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);
}

/* حذف مارجین قبلی دکمه برای چیدمان جدید */
.shp-wallet__topup {
    margin-inline-start: 0 !important;
}

/* ریسپانسیو و شکستن دکمه در موبایل */
@media (max-width: 600px) {
    .shp-wallet__actions {
        flex-direction: column;
        align-items: stretch; /* کشیده شدن دکمه و باکس به عرض کامل */
        width: 100%;
    }

    .shp-wallet__balance {
        width: 100%;
        box-sizing: border-box;
    }

    .shp-wallet__topup {
        width: 100%;
        justify-content: center; /* دکمه تمام‌عرض و متن آن وسط‌چین می‌شود */
    }
}

/* ── ۱. استایل دسکتاپ (ویندوز) - کمی کوچک‌تر و بهینه‌تر ── */
.shp-empty .shp-btn--buy {
    padding: 0.6rem 1.2rem !important; /* پدینگ جمع‌وجور دسکتاپ */
    height: 45px !important; /* ارتفاع بهینه برای ویندوز */
    min-height: 45px !important;
    font-size: 0.92rem !important; /* سایز متن متناسب */
}

    .shp-empty .shp-btn--buy svg {
        width: 20px !important; /* آیکون کمی کوچک‌تر در ویندوز */
        height: 20px !important;
        stroke-width: 2.2 !important;
    }


/* ── ۲. استایل موبایل (اندروید) - بدون تغییر (همونی که اوکی بود) ── */
@media (max-width: 768px) {
    .shp-empty .shp-btn--buy {
        padding: 0.5rem 1rem !important;
        height: 42px !important;
        min-height: 42px !important;
        font-size: 0.85rem !important;
    }

        .shp-empty .shp-btn--buy svg {
            width: 18px !important;
            height: 18px !important;
            stroke-width: 2 !important;
        }
}

/*#endregion new part shop */
/* روی container */
.partic-list {
    flex: 1;
    overflow-y: auto;
    /* display: flex; flex-direction: column; — این رو نگه دار */
    gap: 0.75rem;
    min-height: 0; /* ← مهم: اجازه می‌دهد flex item خودش (partic-list داخل partic-modal) درست shrink بشود */
}

/* روی آیتم‌ها */
.partic-item {
    flex-shrink: 0; /* ← مهم: ارتفاع آیتم‌ها هرگز کم نمی‌شود */
    /* بقیه پراپرتی‌ها دست نخورده */
}



/*#region new */
/* ============================================================
   صفحه اسکنر بارکد + نمایش کاربر — کامل و مستقل
   پیشوند: scn-  | مبتنی بر متغیرهای تم main.css
   این فایل کل استایل قبلی اسکنر را جایگزین می‌کند.
   ============================================================ */

.scn-root {
    --scn-gap: 1rem;
    --scn-pad: 1.25rem;
    --scn-btn-h: 48px;
    width: 100%;
    max-width: 560px; /* بزرگ‌تر از قبل */
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: var(--scn-gap);
}

/* ---------------- کارت پایه ---------------- */
.scn-card {
    background: var(--color-surface-soft);
    border: 1px solid var(--color-border-soft);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-soft);
    padding: var(--scn-pad);
    display: flex;
    flex-direction: column;
    gap: var(--scn-gap);
}

.scn-card--center {
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 3rem var(--scn-pad);
}

/* ============================================================
   کارت اسکن (مودال بزرگ دوربین)
   ============================================================ */
.scn-scan-card {
    background: var(--color-surface-soft);
    border: 1px solid var(--color-border-soft);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-strong);
    padding: var(--scn-pad);
    display: flex;
    flex-direction: column;
    gap: var(--scn-gap);
}

.scn-scan-head {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    text-align: center;
}

.scn-scan-title {
    margin: 0;
    font-size: 1.35rem;
    font-weight: 800;
    color: var(--color-text);
}

.scn-scan-subtitle {
    margin: 0;
    font-size: 0.92rem;
    color: var(--color-text-muted);
}

/* ناحیه بزرگ دوربین (ریسپانسیو) */
.scn-stage {
    position: relative;
    width: 100%;
    /* بزرگ‌تر: روی موبایل مربع، روی دسکتاپ کمی بلندتر */
    aspect-ratio: 1 / 1;
    max-height: 70vh;
    border-radius: var(--radius-lg);
    overflow: hidden;
    background: #000;
}

.scn-reader {
    width: 100%;
    height: 100%;
}

    .scn-reader video,
    .scn-reader img,
    .scn-reader canvas {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
        display: block;
        border-radius: var(--radius-lg);
    }

/* کادر هدف اسکن */
.scn-frame {
    position: absolute;
    inset: 16%;
    pointer-events: none;
    z-index: 2;
}

.scn-frame__corner {
    position: absolute;
    width: 32px;
    height: 32px;
    border: 3px solid var(--color-primary);
}

.scn-frame__corner--tl {
    top: 0;
    right: 0;
    border-bottom: none;
    border-left: none;
    border-radius: 0 10px 0 0;
}

.scn-frame__corner--tr {
    top: 0;
    left: 0;
    border-bottom: none;
    border-right: none;
    border-radius: 10px 0 0 0;
}

.scn-frame__corner--bl {
    bottom: 0;
    right: 0;
    border-top: none;
    border-left: none;
    border-radius: 0 0 10px 0;
}

.scn-frame__corner--br {
    bottom: 0;
    left: 0;
    border-top: none;
    border-right: none;
    border-radius: 0 0 0 10px;
}

.scn-frame__laser {
    position: absolute;
    left: 8%;
    right: 8%;
    top: 50%;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--color-primary), var(--color-secondary), transparent);
    box-shadow: 0 0 14px var(--color-primary);
    animation: scn-scan 2.2s ease-in-out infinite;
}

@keyframes scn-scan {
    0%, 100% {
        transform: translateY(-80px);
        opacity: 0.4;
    }

    50% {
        transform: translateY(80px);
        opacity: 1;
    }
}

/* پوشش صحت‌سنجی روی دوربینِ فعال */
.scn-verify {
    position: absolute;
    inset: 0;
    z-index: 3;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    background: rgba(15, 23, 42, 0.7);
    backdrop-filter: blur(3px);
    animation: scn-fade 0.2s ease;
}

.scn-verify__text {
    font-size: 1rem;
    font-weight: 700;
    color: #fff;
}

.scn-verify__code {
    direction: ltr;
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--color-primary);
    background: rgba(34, 211, 238, 0.16);
    padding: 0.3rem 0.85rem;
    border-radius: 999px;
}

@keyframes scn-fade {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

/* بلوک خطای بارکد نامعتبر + تلاش مجدد */
.scn-fail {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 0.85rem;
    padding: 0.5rem 0 0;
}

.scn-fail__icon {
    width: 56px;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    color: var(--color-error);
    background: rgba(239, 68, 68, 0.12);
}

    .scn-fail__icon svg {
        width: 28px;
        height: 28px;
    }

.scn-fail__text {
    margin: 0;
    font-size: 0.95rem;
    color: var(--color-text);
}

/* ============================================================
   دکمه‌ها (استاندارد)
   ============================================================ */
.scn-btn {
    height: var(--scn-btn-h);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0 1.5rem;
    border-radius: var(--radius-md);
    border: 1px solid transparent;
    font-family: inherit;
    font-size: 0.95rem;
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
    transition: transform 0.12s ease, filter 0.2s ease, background-color 0.2s ease, border-color 0.2s ease;
}

    .scn-btn svg {
        width: 18px;
        height: 18px;
    }

.scn-btn--block {
    width: 100%;
}

.scn-btn--primary {
    color: #fff;
    background: linear-gradient(135deg, var(--color-primary), var(--color-secondary));
    box-shadow: var(--shadow-soft);
}

    .scn-btn--primary:hover:not(:disabled) {
        filter: brightness(1.06);
        transform: translateY(-1px);
    }

.scn-btn--ghost {
    color: var(--color-text);
    background: transparent;
    border-color: var(--color-border-soft);
}

    .scn-btn--ghost:hover:not(:disabled) {
        background: var(--color-primary-soft);
        border-color: var(--color-primary);
    }

.scn-btn:disabled {
    opacity: 0.55;
    cursor: not-allowed;
    transform: none;
    filter: grayscale(0.25);
}

.scn-btn--rescan {
    height: 42px;
    padding: 0 1.1rem;
    font-size: 0.9rem;
}

/* ---------------- نوار بالا ---------------- */
.scn-topbar {
    display: flex;
    justify-content: flex-end;
}

/* ---------------- مرحله بارگذاری ---------------- */
.scn-loading,
.scn-loading-text {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    color: var(--color-text-muted);
    font-size: 0.95rem;
    margin: 0;
}

/* ---------------- اسپینر ---------------- */
.scn-spinner {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    border: 3px solid var(--color-border-soft);
    border-top-color: var(--color-primary);
    animation: scn-spin 0.8s linear infinite;
}

.scn-spinner--lg {
    width: 40px;
    height: 40px;
    border-width: 4px;
}

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

/* ============================================================
   کارت اطلاعات کاربر
   ============================================================ */
.scn-user-card {
    position: relative;
    overflow: hidden;
    border-radius: var(--radius-xl);
    border: 1px solid var(--color-border-soft);
    background: var(--color-surface-soft);
    box-shadow: var(--shadow-soft);
}

.scn-user-banner {
    position: relative;
    height: 130px;
    background-color: var(--color-surface-soft);
    background-image: radial-gradient(circle at top left, var(--color-primary-soft), transparent 60%), linear-gradient(135deg, var(--color-primary), var(--color-secondary));
    background-size: cover;
    background-position: center;
}

    .scn-user-banner[style*="--scn-banner"] {
        background-image: var(--scn-banner);
    }

    .scn-user-banner::after {
        content: "";
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        height: 60%;
        background: linear-gradient(to top, rgba(15, 23, 42, 0.55), transparent);
    }

.scn-badges {
    position: absolute;
    top: 0.75rem;
    left: 0.75rem;
    display: flex;
    gap: 0.4rem;
    z-index: 2;
}

.scn-badge {
    font-size: 0.72rem;
    font-weight: 700;
    padding: 0.25rem 0.6rem;
    border-radius: 999px;
    backdrop-filter: blur(6px);
    color: #fff;
}

.scn-badge--admin {
    background: linear-gradient(135deg, var(--color-primary), var(--color-secondary));
}

.scn-badge--banned {
    background: linear-gradient(135deg, var(--color-error), #b91c1c);
}

.scn-user-body {
    position: relative;
    padding: 0 1.5rem 1.5rem;
    margin-top: -44px;
}

.scn-avatar {
    position: relative;
    width: 88px;
    height: 88px;
    border-radius: 50%;
    background: var(--color-surface);
    border: 3px solid var(--color-primary);
    box-shadow: var(--shadow-soft);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    z-index: 2;
}

    .scn-avatar::before {
        content: "";
        position: absolute;
        inset: -6px;
        border-radius: 50%;
        background: var(--scn-frame, conic-gradient(from 0deg, var(--color-primary), var(--color-secondary), var(--color-primary)));
        z-index: -1;
        opacity: 0.9;
    }

    .scn-avatar img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        border-radius: 50%;
    }

.scn-avatar__fallback {
    font-size: 1.9rem;
    font-weight: 800;
    color: var(--color-primary);
}

.scn-user-head {
    margin-top: 0.75rem;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.scn-user-name {
    margin: 0;
    font-size: 1.3rem;
    font-weight: 800;
    color: var(--color-text);
}

.scn-user-code {
    font-size: 0.85rem;
    color: var(--color-text-muted);
    direction: ltr;
    text-align: right;
}

.scn-info-grid {
    margin-top: 1.25rem;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.75rem;
}

.scn-info-item {
    background: var(--color-surface);
    border: 1px solid var(--color-border-soft);
    border-radius: var(--radius-md);
    padding: 0.75rem 0.9rem;
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}

.scn-info-label {
    font-size: 0.75rem;
    color: var(--color-text-muted);
}

.scn-info-value {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--color-text);
}

.scn-info-value--ltr {
    direction: ltr;
    text-align: right;
}

.scn-info-value--point {
    color: var(--color-primary);
}

/* ============================================================
   تب‌ها
   ============================================================ */
.scn-tabs {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.25rem;
    padding: 0.3rem;
    background: var(--color-surface);
    border: 1px solid var(--color-border-soft);
    border-radius: var(--radius-md);
}

.scn-tab {
    border: none;
    background: transparent;
    color: var(--color-text-muted);
    font-family: inherit;
    font-size: 0.92rem;
    font-weight: 700;
    padding: 0.65rem 0.5rem;
    border-radius: calc(var(--radius-md) - 4px);
    cursor: pointer;
    transition: color 0.2s ease, background-color 0.2s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
}

    .scn-tab svg {
        width: 18px;
        height: 18px;
    }

    .scn-tab.is-active {
        color: #fff;
        background: linear-gradient(135deg, var(--color-primary), var(--color-secondary));
    }

.scn-tab-panel {
    margin-top: 1rem;
}

/* ---------------- لیست جوایز ---------------- */
.scn-prizes {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

.scn-prize {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    padding: 0.75rem 0.9rem;
    background: var(--color-surface);
    border: 1px solid var(--color-border-soft);
    border-radius: var(--radius-md);
}

.scn-prize__icon {
    flex-shrink: 0;
    width: 42px;
    height: 42px;
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-primary-soft);
    color: var(--color-primary);
}

    .scn-prize__icon svg {
        width: 22px;
        height: 22px;
    }

.scn-prize__body {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}

.scn-prize__title {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--color-text);
}

.scn-prize__date {
    font-size: 0.78rem;
    color: var(--color-text-muted);
}

.scn-prize__status {
    flex-shrink: 0;
    font-size: 0.75rem;
    font-weight: 700;
    padding: 0.25rem 0.6rem;
    border-radius: 999px;
}

.scn-prize__status--won {
    color: var(--color-success);
    background: rgba(16, 185, 129, 0.14);
}

.scn-prize__status--pending {
    color: var(--color-warning);
    background: rgba(251, 146, 60, 0.14);
}

.scn-empty {
    text-align: center;
    padding: 2rem 1rem;
    color: var(--color-text-muted);
    font-size: 0.9rem;
}

/* ---------------- اعطای ایکس‌کوین ---------------- */
.scn-coin-box {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.scn-coin-current {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.85rem 1rem;
    border-radius: var(--radius-md);
    background: var(--color-primary-soft);
    border: 1px solid var(--color-border-soft);
}

.scn-coin-current__label {
    font-size: 0.85rem;
    color: var(--color-text-muted);
}

.scn-coin-current__value {
    font-size: 1.15rem;
    font-weight: 800;
    color: var(--color-primary);
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}

    .scn-coin-current__value svg {
        width: 20px;
        height: 20px;
    }

.scn-coin-quick {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.scn-coin-chip {
    flex: 1;
    min-width: 70px;
    border: 1px solid var(--color-border-soft);
    background: var(--color-surface);
    color: var(--color-text);
    font-family: inherit;
    font-weight: 700;
    font-size: 0.9rem;
    padding: 0.55rem 0.4rem;
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: all 0.15s ease;
}

    .scn-coin-chip:hover {
        border-color: var(--color-primary);
        background: var(--color-primary-soft);
    }

    .scn-coin-chip.is-selected {
        color: #fff;
        border-color: transparent;
        background: linear-gradient(135deg, var(--color-primary), var(--color-secondary));
    }

.scn-coin-field {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.scn-field-label {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--color-text-muted);
}

.scn-input {
    height: var(--scn-btn-h);
    width: 100%;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-surface);
    color: var(--color-text);
    padding: 0 0.9rem;
    font-family: inherit;
    font-size: 0.95rem;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

    .scn-input:focus {
        outline: none;
        border-color: var(--color-primary);
        box-shadow: 0 0 0 3px var(--color-primary-soft);
    }

.scn-input--ltr {
    direction: ltr;
    text-align: right;
}

.scn-coin-actions {
    display: flex;
    gap: 0.6rem;
}

.scn-coin-success {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1rem;
    border-radius: var(--radius-md);
    background: rgba(16, 185, 129, 0.14);
    color: var(--color-success);
    font-size: 0.9rem;
    font-weight: 700;
}

    .scn-coin-success svg {
        width: 20px;
        height: 20px;
        flex-shrink: 0;
    }

/* ============================================================
   ریسپانسیو
   ============================================================ */
@media (min-width: 600px) {
    /* روی دسکتاپ دوربین کمی بلندتر و چشم‌نوازتر */
    .scn-stage {
        aspect-ratio: 4 / 3;
    }
}

@media (max-width: 520px) {
    .scn-root {
        --scn-pad: 1rem;
    }

    .scn-info-grid {
        grid-template-columns: 1fr;
    }

    .scn-user-name {
        font-size: 1.15rem;
    }

    .scn-scan-title {
        font-size: 1.2rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .scn-frame__laser, .scn-verify {
        animation: none;
    }
}
/*#endregion new */



/* ============================================================
   ScannerModal — نسخه‌ی کامل و جایگزین (تمام استایل قبلی اسکنر را حذف کنید)
   پیشوند: scanm-  | مبتنی بر متغیرهای تم main.css
   تغییرات: مدال بزرگ‌تر، دوربین بزرگ‌تر و ریسپانسیو، overlay صحت‌سنجی/تلاش مجدد
   ============================================================ */

.scanm-overlay {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    background: rgba(2, 6, 23, 0.72);
    backdrop-filter: blur(6px);
    animation: scanm-fade 0.2s ease;
}

@keyframes scanm-fade {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

/* ---------------- مدال (بزرگ‌تر) ---------------- */
.scanm-modal {
    --scanm-radius: var(--radius-xl, 24px);
    --scanm-gap: 1rem;
    --scanm-btn-h: 48px;
    width: 100%;
    max-width: 640px; /* بزرگ‌تر از قبل (۴۶۰ → ۶۴۰) */
    max-height: 94vh;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: var(--scanm-gap);
    padding: 1.5rem;
    border-radius: var(--scanm-radius);
    background: var(--color-surface-soft, #0f172a);
    border: 1px solid var(--color-border-soft, rgba(148, 163, 184, 0.18));
    box-shadow: var(--shadow-strong, 0 24px 70px rgba(0, 0, 0, 0.6));
    outline: none;
    animation: scanm-pop 0.22s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes scanm-pop {
    from {
        transform: translateY(12px) scale(0.98);
        opacity: 0;
    }

    to {
        transform: translateY(0) scale(1);
        opacity: 1;
    }
}

/* ---------------- هدر ---------------- */
.scanm-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
}

.scanm-title {
    margin: 0;
    font-size: 1.25rem;
    font-weight: 800;
    color: var(--color-text, #e2e8f0);
}

.scanm-close {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--color-border-soft, rgba(148, 163, 184, 0.2));
    border-radius: 10px;
    background: var(--color-surface, #111827);
    color: var(--color-text-muted, #94a3b8);
    font-size: 1.5rem;
    line-height: 1;
    cursor: pointer;
    transition: color 0.2s ease, border-color 0.2s ease, background-color 0.2s ease;
}

    .scanm-close:hover {
        color: var(--color-error, #ef4444);
        border-color: var(--color-error, #ef4444);
        background: rgba(239, 68, 68, 0.1);
    }

/* ---------------- ناحیه دوربین (بزرگ‌تر و ریسپانسیو) ---------------- */
.scanm-stage {
    position: relative;
    width: 100%;
    aspect-ratio: 1 / 1; /* موبایل: مربع بزرگ */
    max-height: 72vh;
    border-radius: var(--radius-lg, 18px);
    overflow: hidden;
    background: #000;
}

.scanm-reader {
    width: 100%;
    height: 100%;
}

    .scanm-reader video,
    .scanm-reader img,
    .scanm-reader canvas {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
        display: block;
    }

/* پوشش آماده‌سازی */
.scanm-stage__overlay {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    background: rgba(15, 23, 42, 0.82);
    color: var(--color-text-muted, #94a3b8);
    font-size: 0.95rem;
}

/* ---------------- کادر هدف ---------------- */
.scanm-frame {
    position: absolute;
    inset: 16%;
    pointer-events: none;
    z-index: 2;
}

.scanm-frame__corner {
    position: absolute;
    width: 32px;
    height: 32px;
    border: 3px solid var(--color-primary, #22d3ee);
}

.scanm-frame__corner--tl {
    top: 0;
    right: 0;
    border-bottom: none;
    border-left: none;
    border-radius: 0 10px 0 0;
}

.scanm-frame__corner--tr {
    top: 0;
    left: 0;
    border-bottom: none;
    border-right: none;
    border-radius: 10px 0 0 0;
}

.scanm-frame__corner--bl {
    bottom: 0;
    right: 0;
    border-top: none;
    border-left: none;
    border-radius: 0 0 10px 0;
}

.scanm-frame__corner--br {
    bottom: 0;
    left: 0;
    border-top: none;
    border-right: none;
    border-radius: 0 0 0 10px;
}

.scanm-frame__laser {
    position: absolute;
    left: 8%;
    right: 8%;
    top: 50%;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--color-primary, #22d3ee), var(--color-secondary, #a855f7), transparent);
    box-shadow: 0 0 14px var(--color-primary, #22d3ee);
    animation: scanm-scan 2.2s ease-in-out infinite;
}

@keyframes scanm-scan {
    0%, 100% {
        transform: translateY(-90px);
        opacity: 0.4;
    }

    50% {
        transform: translateY(90px);
        opacity: 1;
    }
}

/* ---------------- دکمه‌های شناور ---------------- */
.scanm-controls {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 1.25rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1.5rem;
    z-index: 3;
}

.scanm-fab {
    width: 54px;
    height: 54px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.18);
    background: rgba(15, 23, 42, 0.55);
    backdrop-filter: blur(8px);
    color: #fff;
    cursor: pointer;
    transition: transform 0.12s ease, background-color 0.2s ease, border-color 0.2s ease;
}

    .scanm-fab:hover {
        transform: translateY(-2px);
        background: rgba(15, 23, 42, 0.75);
    }

    .scanm-fab svg {
        width: 22px;
        height: 22px;
    }

    .scanm-fab.is-on {
        color: var(--color-warning, #fb923c);
        border-color: var(--color-warning, #fb923c);
        background: rgba(251, 146, 60, 0.18);
    }

.scanm-fab--capture {
    width: 70px;
    height: 70px;
    border: none;
    background: transparent;
    backdrop-filter: none;
}

    .scanm-fab--capture .scanm-fab__ring {
        display: block;
        width: 100%;
        height: 100%;
        border-radius: 50%;
        background: radial-gradient(circle, #fff 0 56%, transparent 57%), linear-gradient(135deg, var(--color-primary, #22d3ee), var(--color-secondary, #a855f7));
        box-shadow: 0 6px 20px rgba(34, 211, 238, 0.45);
        transition: transform 0.12s ease;
    }

    .scanm-fab--capture:hover .scanm-fab__ring {
        transform: scale(1.05);
    }

    .scanm-fab--capture:active .scanm-fab__ring {
        transform: scale(0.94);
    }

/* ============================================================
   overlay صحت‌سنجی (روی ویدیوی زنده)
   ============================================================ */
.scanm-validate {
    position: absolute;
    inset: 0;
    z-index: 4;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    background: rgba(15, 23, 42, 0.68);
    backdrop-filter: blur(3px);
    animation: scanm-fade 0.2s ease;
}

.scanm-validate__text {
    font-size: 1.05rem;
    font-weight: 700;
    color: #fff;
}

.scanm-validate__code {
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--color-primary, #22d3ee);
    background: rgba(34, 211, 238, 0.16);
    padding: 0.3rem 0.85rem;
    border-radius: 999px;
}

/* ============================================================
   overlay خطا + تلاش مجدد (روی ویدیوی زنده)
   ============================================================ */
.scanm-retry {
    position: absolute;
    inset: 0;
    z-index: 4;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    padding: 1.5rem;
    text-align: center;
    background: rgba(15, 23, 42, 0.78);
    backdrop-filter: blur(4px);
    animation: scanm-fade 0.2s ease;
}

.scanm-retry__icon {
    width: 60px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    color: var(--color-error, #ef4444);
    background: rgba(239, 68, 68, 0.16);
}

    .scanm-retry__icon svg {
        width: 30px;
        height: 30px;
    }

.scanm-retry__text {
    margin: 0;
    font-size: 1rem;
    font-weight: 600;
    color: #fff;
}

/* ---------------- کادر درخواست دسترسی ---------------- */
.scanm-perm {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 0.75rem;
}

.scanm-perm__icon {
    width: 56px;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    color: var(--color-primary, #22d3ee);
    background: var(--color-primary-soft, rgba(34, 211, 238, 0.12));
}

    .scanm-perm__icon svg {
        width: 28px;
        height: 28px;
    }

.scanm-perm__text {
    margin: 0;
    font-size: 0.9rem;
    line-height: 1.7;
    color: var(--color-text-muted, #94a3b8);
    max-width: 24rem;
}

/* ---------------- پیام‌ها ---------------- */
.scanm-notice {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
    padding: 0.85rem 1rem;
    border-radius: var(--radius-md, 12px);
    font-size: 0.88rem;
    line-height: 1.6;
    border: 1px solid var(--color-border-soft, rgba(148, 163, 184, 0.2));
    color: var(--color-text, #e2e8f0);
}

    .scanm-notice p {
        margin: 0;
    }

.scanm-notice__icon {
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    margin-top: 1px;
}

.scanm-notice--info {
    background: var(--color-primary-soft, rgba(34, 211, 238, 0.1));
}

    .scanm-notice--info .scanm-notice__icon {
        color: var(--color-primary, #22d3ee);
    }

.scanm-notice--warn {
    background: rgba(251, 146, 60, 0.12);
    border-color: rgba(251, 146, 60, 0.35);
}

    .scanm-notice--warn .scanm-notice__icon {
        color: var(--color-warning, #fb923c);
    }

.scanm-notice--error {
    background: rgba(239, 68, 68, 0.12);
    border-color: rgba(239, 68, 68, 0.38);
}

    .scanm-notice--error .scanm-notice__icon {
        color: var(--color-error, #ef4444);
    }

/* ---------------- دکمه‌ها ---------------- */
.scanm-btn {
    height: var(--scanm-btn-h);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0 1.75rem;
    border-radius: var(--radius-md, 12px);
    border: 1px solid transparent;
    font-family: inherit;
    font-size: 0.95rem;
    font-weight: 700;
    cursor: pointer;
    transition: transform 0.12s ease, filter 0.2s ease;
}

.scanm-btn--primary {
    color: #fff;
    background: linear-gradient(135deg, var(--color-primary, #22d3ee), var(--color-secondary, #a855f7));
    box-shadow: var(--shadow-soft, 0 8px 24px rgba(0, 0, 0, 0.25));
}

    .scanm-btn--primary:hover:not(:disabled) {
        filter: brightness(1.06);
        transform: translateY(-1px);
    }

.scanm-btn:disabled {
    opacity: 0.55;
    cursor: not-allowed;
    transform: none;
}

/* انتخاب فایل */
.scanm-filepick {
    display: block;
    cursor: pointer;
}

    .scanm-filepick input[type="file"] {
        position: absolute;
        width: 1px;
        height: 1px;
        padding: 0;
        margin: -1px;
        overflow: hidden;
        clip: rect(0 0 0 0);
        white-space: nowrap;
        border: 0;
    }

.scanm-filepick__btn {
    height: var(--scanm-btn-h);
    width: 100%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    border-radius: var(--radius-md, 12px);
    border: 1px dashed var(--color-border, rgba(148, 163, 184, 0.4));
    background: var(--color-surface, #111827);
    color: var(--color-text, #e2e8f0);
    font-size: 0.95rem;
    font-weight: 700;
    transition: border-color 0.2s ease, background-color 0.2s ease, color 0.2s ease;
}

    .scanm-filepick__btn svg {
        width: 20px;
        height: 20px;
    }

.scanm-filepick:hover .scanm-filepick__btn {
    border-color: var(--color-primary, #22d3ee);
    background: var(--color-primary-soft, rgba(34, 211, 238, 0.1));
    color: var(--color-primary, #22d3ee);
}

/* ---------------- اسپینر ---------------- */
.scanm-spinner {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    border: 3px solid var(--color-border-soft, rgba(148, 163, 184, 0.25));
    border-top-color: var(--color-primary, #22d3ee);
    animation: scanm-spin 0.8s linear infinite;
}

.scanm-spinner--lg {
    width: 44px;
    height: 44px;
    border-width: 4px;
}

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

/* متن مخصوص صفحه‌خوان */
.scanm-sr {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

/* ---------------- ریسپانسیو ---------------- */
@media (min-width: 680px) {
    /* دسکتاپ: دوربین بلندتر و سینمایی‌تر */
    .scanm-stage {
        aspect-ratio: 4 / 3;
    }
}

@media (max-width: 480px) {
    .scanm-modal {
        padding: 1rem;
        max-width: 100%;
        border-radius: var(--radius-lg, 18px);
    }

    .scanm-fab {
        width: 48px;
        height: 48px;
    }

    .scanm-fab--capture {
        width: 62px;
        height: 62px;
    }

    .scanm-controls {
        gap: 1.1rem;
        bottom: 1rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .scanm-frame__laser,
    .scanm-validate,
    .scanm-retry,
    .scanm-overlay,
    .scanm-modal {
        animation: none;
    }
}

/* دکمه‌ی باز کردن مدال در صفحه والد */
.scanm-trigger {
    height: 48px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0 1.5rem;
    border: none;
    border-radius: var(--radius-md, 12px);
    font-family: inherit;
    font-size: 0.95rem;
    font-weight: 700;
    color: #fff;
    cursor: pointer;
    background: linear-gradient(135deg, var(--color-primary, #22d3ee), var(--color-secondary, #a855f7));
    box-shadow: var(--shadow-soft, 0 8px 24px rgba(0, 0, 0, 0.25));
    transition: transform 0.12s ease, filter 0.2s ease;
}

    .scanm-trigger:hover {
        filter: brightness(1.06);
        transform: translateY(-1px);
    }

    .scanm-trigger svg {
        width: 20px;
        height: 20px;
    }






 /*#region user card  */

/* =========================================================
   LoyaltyCard.razor.css
   استایل‌های ایزوله‌ی کارت وفاداری
   - پیشوند: lc-  (و حفظ ucm-wallet/ucm-coin طبق درخواست)
   - تم دارک با اکسنت نارنجی برند
   - بدون هیچ inline style
   ========================================================= */


/* ----- توکن‌های محلی برای رنگ اکسنت برند (نارنجی) ----- */
.lc-root {
    /* همان رنگی که هم در بوردر کارت فلیپ، هم در بوردر کیف، هم در سکه‌ی ایکس‌کوین استفاده می‌شود */
    --lc-accent: #ff7a18;
    --lc-accent-2: #ffb347;
    --lc-accent-deep: #d65a00;
    --lc-accent-glow: rgba(255, 122, 24, 0.45);
    --lc-accent-soft: rgba(255, 122, 24, 0.14);
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    width: 100%;
    max-width: 520px;
    margin: 0 auto;
    padding: 1rem;
    box-sizing: border-box;
    direction: rtl;
    font-family: inherit;
}


/* =========================================================
   1) کارت فلیپ ۳بعدی (فقط فریم، پس‌زمینه‌ی شفاف)
   ========================================================= */

.lc-flip {
    width: 100%;
    aspect-ratio: 16 / 10;
    perspective: 1200px;
    cursor: pointer;
    background: transparent;
    border: none;
    padding: 0;
    -webkit-tap-highlight-color: transparent;
    outline: none;
}

    .lc-flip:focus-visible {
        outline: 2px solid var(--lc-accent);
        outline-offset: 4px;
        border-radius: var(--radius-xl, 24px);
    }

.lc-flip__inner {
    position: relative;
    width: 100%;
    height: 100%;
    transform-style: preserve-3d;
    transition: transform 0.85s cubic-bezier(0.4, 0.15, 0.2, 1);
    will-change: transform;
}

.lc-flip.is-flipped .lc-flip__inner {
    transform: rotateY(180deg);
}

/* دو رویه‌ی کارت – کاملاً شفاف، فقط فریم رنگی */
.lc-flip__face {
    position: absolute;
    inset: 0;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    border-radius: var(--radius-xl, 24px);
    background: transparent; /* ← شفاف کامل */
    border: 2px solid var(--lc-accent);
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.04) inset, 0 18px 38px -16px var(--lc-accent-glow), 0 0 24px -6px var(--lc-accent-glow);
    overflow: hidden;
    transition: box-shadow var(--transition-med, 0.22s ease), border-color var(--transition-med, 0.22s ease);
}

    /* جلوه‌ی فریم نئونی – خطی شیشه‌ای داخل لبه */
    .lc-flip__face::before {
        content: "";
        position: absolute;
        inset: 6px;
        border-radius: calc(var(--radius-xl, 24px) - 6px);
        border: 1px solid rgba(255, 122, 24, 0.25);
        pointer-events: none;
    }

    /* گوشه‌های تزئینی (corner accents) */
    .lc-flip__face::after {
        content: "";
        position: absolute;
        inset: 14px;
        border-radius: calc(var(--radius-xl, 24px) - 12px);
        background: linear-gradient(135deg, var(--lc-accent) 0 14px, transparent 14px) top left / 28px 28px no-repeat, linear-gradient(225deg, var(--lc-accent) 0 14px, transparent 14px) top right / 28px 28px no-repeat, linear-gradient(45deg, var(--lc-accent) 0 14px, transparent 14px) bottom left / 28px 28px no-repeat, linear-gradient(-45deg, var(--lc-accent) 0 14px, transparent 14px) bottom right / 28px 28px no-repeat;
        -webkit-mask: linear-gradient(#000, #000) top left / 18px 2px no-repeat, linear-gradient(#000, #000) top left / 2px 18px no-repeat, linear-gradient(#000, #000) top right / 18px 2px no-repeat, linear-gradient(#000, #000) top right / 2px 18px no-repeat, linear-gradient(#000, #000) bottom left / 18px 2px no-repeat, linear-gradient(#000, #000) bottom left / 2px 18px no-repeat, linear-gradient(#000, #000) bottom right / 18px 2px no-repeat, linear-gradient(#000, #000) bottom right / 2px 18px no-repeat;
        mask: linear-gradient(#000, #000) top left / 18px 2px no-repeat, linear-gradient(#000, #000) top left / 2px 18px no-repeat, linear-gradient(#000, #000) top right / 18px 2px no-repeat, linear-gradient(#000, #000) top right / 2px 18px no-repeat, linear-gradient(#000, #000) bottom left / 18px 2px no-repeat, linear-gradient(#000, #000) bottom left / 2px 18px no-repeat, linear-gradient(#000, #000) bottom right / 18px 2px no-repeat, linear-gradient(#000, #000) bottom right / 2px 18px no-repeat;
        pointer-events: none;
        opacity: 0.85;
    }

.lc-flip__face--back {
    transform: rotateY(180deg);
}

.lc-flip:hover .lc-flip__face {
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.06) inset, 0 24px 50px -16px var(--lc-accent-glow), 0 0 36px -4px var(--lc-accent-glow);
}

/* placeholder (تا زمانی که عکس واقعی را وارد کنید) */
.lc-flip__placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    color: var(--color-text-muted, #94a3b8);
    background: transparent;
}

.lc-flip__placeholder-icon {
    width: 44px;
    height: 44px;
    color: var(--lc-accent);
    opacity: 0.85;
}

.lc-flip__placeholder-text {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--color-text, #e2e8f0);
}

.lc-flip__placeholder-hint {
    font-size: 0.75rem;
    color: var(--color-text-muted, #94a3b8);
    opacity: 0.8;
}


/* =========================================================
   2) کیف ایکس کوین (ucm-wallet) – بوردر هم‌رنگ کارت فلیپ
   ========================================================= */

::deep .ucm-wallet {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 1rem;
    width: 100%;
    padding: 1rem 1.25rem;
    box-sizing: border-box;
    border-radius: var(--radius-lg, 18px);
    background: linear-gradient(135deg, var(--color-surface, #0f172a) 0%, var(--color-surface-soft, rgba(15, 23, 42, 0.85)) 100%);
    border: 2px solid var(--lc-accent); /* ← دقیقاً همان رنگ فریم کارت بالا */
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.03) inset, 0 16px 36px -18px var(--lc-accent-glow), 0 0 22px -6px var(--lc-accent-glow);
    overflow: hidden;
    transition: transform var(--transition-fast, 0.16s ease-out), box-shadow var(--transition-fast, 0.16s ease-out);
}

    /* درخشش گرادیانتی نازک در پایین */
    ::deep .ucm-wallet::after {
        content: "";
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        height: 2px;
        background: linear-gradient(90deg, transparent 0%, var(--lc-accent) 35%, var(--lc-accent-2) 65%, transparent 100%);
        opacity: 0.9;
    }

    ::deep .ucm-wallet:hover {
        transform: translateY(-2px);
        box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.05) inset, 0 22px 48px -18px var(--lc-accent-glow), 0 0 30px -4px var(--lc-accent-glow);
    }

/* سکه‌ی ایکس‌کوین – همان رنگ فریم، با حرف X طلایی نارنجی */
::deep .ucm-coin {
    flex: 0 0 auto;
    width: 52px;
    height: 52px;
    position: relative;
    border-radius: 50%;
    background: radial-gradient(circle at 30% 25%, #ffd8b3 0%, var(--lc-accent-2) 30%, var(--lc-accent) 60%, var(--lc-accent-deep) 100%);
    border: 2px solid var(--lc-accent); /* ← همان رنگ */
    box-shadow: 0 0 0 3px rgba(255, 122, 24, 0.12), 0 8px 22px -6px var(--lc-accent-glow), inset 0 -3px 8px rgba(0, 0, 0, 0.25), inset 0 2px 4px rgba(255, 255, 255, 0.35);
    display: inline-block;
}

    /* حرف X روی سکه */
    ::deep .ucm-coin::before {
        content: "X";
        position: absolute;
        inset: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        font-family: inherit;
        font-weight: 900;
        font-size: 1.5rem;
        color: #ffffff;
        text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
        line-height: 1;
    }

    /* درخشش متحرک روی سکه */
    ::deep .ucm-coin::after {
        content: "";
        position: absolute;
        top: 8%;
        left: 18%;
        width: 22%;
        height: 18%;
        border-radius: 50%;
        background: rgba(255, 255, 255, 0.55);
        filter: blur(2px);
        opacity: 0.9;
        pointer-events: none;
    }

::deep .ucm-wallet__t {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.15rem;
    min-width: 0;
}

::deep .ucm-wallet__lbl {
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--color-text-muted, #94a3b8);
    letter-spacing: 0.02em;
}

::deep .ucm-wallet__val {
    font-size: 1.65rem;
    font-weight: 800;
    line-height: 1.1;
    color: var(--color-text, #e2e8f0);
    text-shadow: 0 0 14px rgba(255, 122, 24, 0.35);
    font-variant-numeric: tabular-nums;
    direction: ltr; /* اعداد چپ‌چین تا منظم باشند */
    unicode-bidi: isolate;
}

    /* وضعیت بن‌شده */
    ::deep .ucm-wallet__val.xpoint-banned {
        color: var(--color-error, #ef4444);
        text-shadow: 0 0 12px rgba(239, 68, 68, 0.45);
    }


/* =========================================================
   3) دکمه‌های اکشن
   ========================================================= */

.lc-actions {
    display: flex;
    gap: 0.75rem;
    width: 100%;
}

.lc-btn {
    flex: 1 1 0;
    min-height: 52px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.75rem 1rem;
    border-radius: var(--radius-md, 12px);
    font-family: inherit;
    font-size: 0.95rem;
    font-weight: 700;
    cursor: pointer;
    outline: none;
    border: 1px solid transparent;
    -webkit-tap-highlight-color: transparent;
    transition: transform var(--transition-med, 0.22s ease), box-shadow var(--transition-med, 0.22s ease), background var(--transition-med, 0.22s ease), border-color var(--transition-med, 0.22s ease), color var(--transition-med, 0.22s ease), filter var(--transition-med, 0.22s ease);
}

    .lc-btn:focus-visible {
        outline: 2px solid var(--lc-accent);
        outline-offset: 3px;
    }

    .lc-btn:active {
        transform: translateY(0);
        filter: brightness(0.95);
    }

.lc-btn__icon {
    width: 20px;
    height: 20px;
    flex: 0 0 auto;
}

.lc-btn__label {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* دکمه‌ی اصلی: گرادیان نارنجی برند */
.lc-btn--primary {
    color: #fff;
    background: linear-gradient(135deg, var(--lc-accent-2) 0%, var(--lc-accent) 55%, var(--lc-accent-deep) 100%);
    border-color: rgba(255, 255, 255, 0.08);
    box-shadow: 0 10px 24px -8px var(--lc-accent-glow), inset 0 1px 0 rgba(255, 255, 255, 0.18);
}

    .lc-btn--primary:hover {
        transform: translateY(-2px);
        box-shadow: 0 18px 36px -10px var(--lc-accent-glow), inset 0 1px 0 rgba(255, 255, 255, 0.25);
        filter: brightness(1.05);
    }

/* دکمه‌ی فرعی: شیشه‌ای با لبه‌ی نارنجی */
.lc-btn--ghost {
    color: var(--color-text, #e2e8f0);
    background: var(--color-surface-soft, rgba(15, 23, 42, 0.85));
    border-color: var(--color-border-soft, rgba(148, 163, 184, 0.35));
    backdrop-filter: blur(8px);
}

    .lc-btn--ghost:hover {
        transform: translateY(-2px);
        color: var(--lc-accent-2);
        border-color: var(--lc-accent);
        background: var(--lc-accent-soft);
        box-shadow: 0 14px 28px -12px var(--lc-accent-glow);
    }


/* =========================================================
   ریسپانسیو – موبایل اول
   ========================================================= */

@media (max-width: 480px) {
    .lc-root {
        padding: 0.75rem;
        gap: 1rem;
    }

    .lc-flip {
        aspect-ratio: 16 / 10;
    }

    ::deep .ucm-wallet {
        padding: 0.85rem 1rem;
        gap: 0.85rem;
    }

    ::deep .ucm-coin {
        width: 46px;
        height: 46px;
    }

        ::deep .ucm-coin::before {
            font-size: 1.3rem;
        }

    ::deep .ucm-wallet__val {
        font-size: 1.4rem;
    }

    .lc-btn {
        font-size: 0.88rem;
        min-height: 48px;
        padding: 0.65rem 0.75rem;
    }

    .lc-btn__icon {
        width: 18px;
        height: 18px;
    }
}

@media (max-width: 360px) {
    .lc-btn__label {
        font-size: 0.82rem;
    }
}

/* احترام به ترجیح کاربر برای کاهش انیمیشن */
@media (prefers-reduced-motion: reduce) {
    .lc-flip__inner,
    .lc-flip__face,
    ::deep .ucm-wallet,
    .lc-btn {
        transition: none;
    }
}
    /*#endregion user card  */


 /*#region transaction */
.tx-root {
    direction: rtl;
    width: 100%;
    max-width: 600px; /* بهینه‌سازی شده برای موبایل و دسکتاپ */
    margin: 0 auto;
    padding: 1.25rem;
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    background-color: var(--color-bg, #121212);
    min-height: 100vh;
    color: var(--color-text, #ffffff);
}

/* هدر صفحه */
.tx-header {
    text-align: center;
    padding: 0.5rem 0;
}

.tx-header-title {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--color-text, #ffffff);
    margin: 0;
}

/* ساختار تب بار مدرن (کپسولی) */
.tx-tabs-container {
    width: 100%;
    background-color: var(--color-surface-soft, #1e1e1e);
    padding: 0.35rem;
    border-radius: 12px;
    border: 1px solid var(--color-border-soft, rgba(255, 255, 255, 0.08));
}

.tx-tabs {
    display: flex;
    width: 100%;
    gap: 0.25rem;
}

.tx-tab-btn {
    flex: 1;
    background: transparent;
    border: none;
    padding: 0.65rem;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--color-text-muted, #8492a6);
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease-in-out;
    font-family: 'Vazirmatn', sans-serif;
}

    .tx-tab-btn:hover {
        color: var(--color-text, #ffffff);
    }

    .tx-tab-btn.active {
        background-color: var(--color-surface, #2d2d2d);
        color: var(--color-primary, #0ea5b6);
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
    }

/* لیست تراکنش‌ها */
.tx-list {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.tx-empty {
    text-align: center;
    padding: 4rem 1rem;
    color: var(--color-text-muted, #64748b);
    font-size: 0.95rem;
}

/* کارت هر ردیف تراکنش */
.tx-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background-color: var(--color-surface, #1e1e1e);
    padding: 0.9rem 1rem;
    border-radius: 14px;
    border: 1px solid var(--color-border-soft, rgba(148, 163, 184, 0.1));
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

    .tx-row:hover {
        transform: translateY(-2px);
        box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
    }

/* بخش سمت راست (تصویر و اطلاعات متنی) */
.tx-right-side {
    display: flex;
    align-items: center;
    gap: 0.85rem;
}

.tx-img-wrapper {
    width: 48px;
    height: 48px;
    border-radius: 10px;
    background-color: var(--color-surface-soft, #252525);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border: 1px solid var(--color-border-soft, rgba(255, 255, 255, 0.05));
}

.tx-main-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.tx-info {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.tx-title {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--color-text, #ffffff);
}

.tx-date {
    font-size: 0.75rem;
    color: var(--color-text-muted, #64748b);
}

/* بخش سمت چپ (مبلغ و سکه) */
.tx-left-side {
    display: flex;
    align-items: center;
    gap: 0.45rem;
}

.tx-amount-val {
    font-size: 1.1rem;
    font-weight: 700;
    letter-spacing: 0.5px;
}

.tx-coin-icon {
    width: 22px;
    height: 22px;
    object-fit: contain;
}

/* افکت‌های رنگی وضعیت مالی (درآمد سبز / مخارج قرمز) */
.tx-income .tx-amount-val {
    color: #10b981; /* سبز زنده و خوانا در تم دارک */
}

.tx-expense .tx-amount-val {
    color: #ef4444; /* قرمز استاندارد و جذاب */
}

/* اعمال مدیا کوئری بر اساس رویکرد Mobile-First پروژه شما */
@media (max-width: 480px) {
    .tx-root {
        padding: 0.75rem;
        gap: 1rem;
    }

    .tx-row {
        padding: 0.75rem 0.85rem;
    }

    .tx-img-wrapper {
        width: 42px;
        height: 42px;
    }

    .tx-title {
        font-size: 0.9rem;
    }

    .tx-amount-val {
        font-size: 1rem;
    }

    .tx-coin-icon {
        width: 18px;
        height: 18px;
    }
}
/*#endregion transaction*/