/* ═══════════════════════════════════════════════════════════════
   نوا-پل — nova-bridge.css                    [NOVA-BRIDGE v1]
   ═══════════════════════════════════════════════════════════════
   نقش: صفحات پیش‌ازلاگینِ موجِ قبلی (prelogin.css + components.css
   + کلاس‌های zh-*) را بدونِ دست‌زدن به هیچ قالبی به زبانِ طراحیِ
   «نُوا» (منبع حقیقت: landing/pages — تأیید مالک) تینت می‌کند.

   چرا پل؟ تبدیلِ عمیقِ تک‌تک قالب‌ها (طبق DESIGN-SPEC §۶) کارِ
   مرحله‌ای است؛ تا آن موقع این فایل تضمین می‌کند کاربرِ عادی
   هیچ صفحه‌ای بیرون از زبانِ نوا نبیند.

   ترتیبِ لود: باید «بعد از» prelogin.css و components.css بیاید.
   نقطهٔ ورود: include مربوطه در marketplace/_zh_theme.html —
   پس روی همهٔ صفحاتِ zh-* خودکار هست؛ هیچ قالبی جدا لینک نمی‌کند.

   قواعد:
   · فقط توکن و پولیش — هیچ چیدمانی نمی‌شکند و هیچ عرضی عوض نمی‌شود.
   · جنسیت (body.zh-female / body.zh-male) بالاتر از اینجاست؛
     رنگ برند جنسیتی سرِ جایش می‌ماند.
   · [data-theme="dark"] روی <html> = تم تیرهٔ نوا (تاگل را
     nova-tools.js می‌سازد — همین پوشه).
   · نسخه: با تغییرِ محتوا ?v= را در _zh_theme.html بالا ببرید.
   ═══════════════════════════════════════════════════════════════ */

/* ─── ۱) توکن‌های نوا روی بدنهٔ zh-* ─── */
:root {
    /* نوت‌رال‌های بنفش‌فامِ نوا (به‌جای استخوانیِ گرم) */
    --zh-bg:      #f3effa;
    --zh-bg-2:    #ebe4f7;
    --zh-ink:     #190d2e;
    --zh-ink-2:   #453768;
    --zh-ink-3:   #6f6392;
    --zh-line:      rgba(38, 22, 66, .14);
    --zh-line-soft: rgba(38, 22, 66, .07);

    /* اکسنت: رزِ نوا — لبه‌ها به‌سوی بنفش */
    --zh-accent:      var(--rose);
    --zh-accent-deep: color-mix(in srgb, var(--rose) 72%, #4c1d95);
    --zh-accent-soft: color-mix(in srgb, var(--rose) 8%, #ffffff);
    --zh-accent-lift: #e34a87;

    /* اکسنت دوم نوا: بنفش (در موج قبلی همین‌جا «طلایی» نام داشت) */
    --zh-gold:      var(--violet);
    --zh-gold-soft: #ece7fd;
    --zh-gold-deep: #5326c9;

    /* گرادیان امضای نوا: رز ← بنفش */
    --zh-grad: linear-gradient(120deg,
        var(--zh-accent-lift) 0%,
        var(--violet) 52%,
        var(--zh-gold) 100%);
    --zh-grad-soft: linear-gradient(135deg,
        color-mix(in srgb, var(--zh-accent) 14%, transparent) 0%,
        color-mix(in srgb, var(--zh-gold) 14%, transparent) 100%);

    /* شعاع و سایه: نرمی و ته‌رنگِ بنفشِ نوا */
    --zh-r-lg: 14px;
    --zh-r-md: 10px;
    --zh-r-sm: 8px;
    --zh-shadow:    0 1px 2px rgba(38,22,66,.05), 0 12px 34px -14px rgba(70,35,120,.18);
    --zh-shadow-lg: 0 2px 8px rgba(38,22,66,.06), 0 34px 74px -26px rgba(70,35,120,.30);
    --zh-dot: rgba(38, 22, 66, .06);
    color-scheme: light;
}

/* ─── ۲) تم تیرهٔ نوا برای صفحات zh-* ───
   توکن‌محور است؛ سطوحِ با کدِ رنگِ ثابت در موجِ قدیمی (پس‌زمینه‌های
   #fff پراکنده) در فازِ تبدیلِ عمیقِ همان قالب تمیز می‌شوند —
   تا آن موقع این بلاک ۹۰٪ سطح را می‌پوشاند. */
[data-theme="dark"] {
    --zh-bg:      #120b1e;
    --zh-bg-2:    #1a1130;
    --zh-ink:     #f6f3ff;
    --zh-ink-2:   #bdb3d6;
    --zh-ink-3:   #8b80a8;
    --zh-line:      rgba(255, 255, 255, .12);
    --zh-line-soft: rgba(255, 255, 255, .06);
    --zh-accent:      var(--rose);
    --zh-accent-deep: #d63a76;
    --zh-accent-soft: color-mix(in srgb,var(--rose) 12%,transparent);
    --zh-accent-lift: #ff5d99;
    --zh-gold:      var(--violet);
    --zh-gold-soft: color-mix(in srgb,var(--violet) 16%,transparent);
    --zh-gold-deep: #a78bfa;
    --zh-shadow:    0 1px 2px rgba(0,0,0,.4), 0 12px 34px -14px rgba(0,0,0,.55);
    --zh-shadow-lg: 0 2px 8px rgba(0,0,0,.45), 0 34px 74px -26px rgba(0,0,0,.7);
    --zh-dot: rgba(255, 255, 255, .05);
    color-scheme: dark;
}

/* سطوحِ سفیدِ ثابتِ موجِ قدیمی — در تم تیره بازرنگ می‌شوند.
   (prelogin.css روی خیلی از کارت‌ها background:#fff ثابت دارد؛
   اگر برگردد، متنِ --zh-ink روشن روی سفید غیرقابل‌خواندن می‌شود.) */
[data-theme="dark"] .zh-card,
[data-theme="dark"] .zh-panel,
[data-theme="dark"] .zh-result,
[data-theme="dark"] .zh-salon,
[data-theme="dark"] .zh-price,
[data-theme="dark"] .zh-tg,
[data-theme="dark"] .zh-acc-item,
[data-theme="dark"] .zh-table-wrap,
[data-theme="dark"] .zh-review,
[data-theme="dark"] .zh-branch,
[data-theme="dark"] .zh-qr,
[data-theme="dark"] .zh-blank,
[data-theme="dark"] .zh-filters,
[data-theme="dark"] .zh-mobile,
[data-theme="dark"] .zh-nav,
[data-theme="dark"] .zh-input,
[data-theme="dark"] .zh-select,
[data-theme="dark"] .zh-textarea,
[data-theme="dark"] .zh-iconbtn,
[data-theme="dark"] .zh-searchbar .zh-hero-search-box {
    background: #1a1130;
    border-color: rgba(255, 255, 255, .12);
}
[data-theme="dark"] .zh-tab.is-on {
    background: #231640;
    color: var(--zh-ink);
}
/* قرص‌ها و نشان‌های سفیدِ روی تصویر/کارت */
[data-theme="dark"] .zh-salon-badge,
[data-theme="dark"] .zh-person-rate,
[data-theme="dark"] .zh-btn-light,
[data-theme="dark"] a.zh-btn-light,
[data-theme="dark"] .zh-btn-glass,
[data-theme="dark"] a.zh-btn-glass {
    background: rgba(255, 255, 255, .07);
    color: var(--zh-ink);
    border-color: rgba(255, 255, 255, .14);
}
[data-theme="dark"] .zh-section--alt,
[data-theme="dark"] .zh-section--tint {
    background: #1a1130;
}
/* جدول و خطوط داخلی */
[data-theme="dark"] .zh-table-wrap th,
[data-theme="dark"] .zh-table-wrap td { border-color: rgba(255, 255, 255, .1); }

/* ─── ۳) پولیشِ امضای نوا ─── */

/* اسکرول‌بارِ گرادیانیِ نوا */
::-webkit-scrollbar { width: 10px; }
::-webkit-scrollbar-track { background: var(--zh-bg); }
::-webkit-scrollbar-thumb {
    background: linear-gradient(var(--zh-accent), var(--zh-gold));
    border-radius: 99px;
    border: 2px solid var(--zh-bg);
}
::selection { background: var(--zh-accent); color: #fff; }

/* دکمهٔ اصلیِ zh-* ← گرادیان و هالهٔ نوا */
.zh-btn--primary,
.zh-cta,
.btn-primary {
    background: var(--zh-grad) !important;
    border: 0 !important;
    box-shadow: 0 10px 30px -10px color-mix(in srgb, var(--zh-accent) 55%, transparent);
    transition: transform .25s var(--zh-ease, ease), box-shadow .25s var(--zh-ease, ease), filter .25s;
}
.zh-btn--primary:hover,
.zh-cta:hover,
.btn-primary:hover {
    filter: brightness(1.06);
    transform: translateY(-1px);
    box-shadow: 0 16px 38px -12px color-mix(in srgb, var(--zh-accent) 65%, transparent);
}
.zh-btn--primary:active,
.zh-cta:active,
.btn-primary:active { transform: translateY(0); }

/* کارت‌ها: برآمدگیِ نرم و هالهٔ رز در هاور — اثرِ Tilt نوا */
.zh-card { transition: transform .35s cubic-bezier(.16,1,.3,1), box-shadow .35s; }
.zh-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--zh-shadow-lg);
}

/* چراغِ فوکوس رز — یکدست با فرم‌های نوا */
.zh-input:focus,
.zh-field input:focus,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
    outline: 2px solid color-mix(in srgb, var(--zh-accent) 55%, transparent);
    outline-offset: 2px;
}

/* چشمکِ «زنده» نوا روی نشانگرهای وضعیت */
@keyframes nova-pulse { 50% { opacity: .35; } }
.zh-live-dot,
.zh-open-now::before {
    animation: nova-pulse 1.6s ease-in-out infinite;
}

/* ═══ ۴) ابزارهای تازهٔ نوا — کامپوننت‌های مشترکِ صفحه‌های zh-*
   (مستند در WORK-ORDER-NOVA.md §کامپوننت‌های تازه) ═══ */

/* اسکلتون لودینگ */
.x-skel {
    position: relative;
    overflow: hidden;
    background: color-mix(in srgb, var(--zh-ink) 8%, transparent);
    border-radius: var(--zh-r-sm);
    min-height: 1em;
    pointer-events: none;
}
.x-skel::after {
    content: "";
    position: absolute;
    inset: 0;
    transform: translateX(100%);
    background: linear-gradient(90deg, transparent,
        color-mix(in srgb, var(--zh-ink) 6%, transparent), transparent);
    animation: x-shimmer 1.4s infinite;
}
@keyframes x-shimmer { to { transform: translateX(-100%); } }

/* حالتِ خالی */
.x-empty {
    text-align: center;
    padding: 48px 24px;
    color: var(--zh-ink-3);
}
.x-empty .x-empty-ico {
    width: 56px; height: 56px;
    margin: 0 auto 14px;
    display: grid; place-items: center;
    border-radius: 18px;
    background: var(--zh-accent-soft);
    color: var(--zh-accent);
}
.x-empty b { display: block; color: var(--zh-ink); margin-bottom: 6px; font-size: 15px; }
.x-empty p { margin: 0 0 16px; font-size: 13.5px; }

/* حلقهٔ پیشرفت (SVG با --val: 0..100) */
.x-ring { position: relative; display: inline-grid; place-items: center; }
.x-ring svg { transform: rotate(-90deg); }
.x-ring .x-ring-val {
    position: absolute;
    font-weight: 800;
    font-size: 15px;
    color: var(--zh-ink);
}
.x-ring circle { fill: none; stroke-width: 7; }
.x-ring .x-ring-bg { stroke: color-mix(in srgb, var(--zh-ink) 10%, transparent); }
.x-ring .x-ring-fill {
    stroke: url(#xringgrad);
    stroke-linecap: round;
    stroke-dasharray: 138.2;
    stroke-dashoffset: calc(138.2 - 138.2 * var(--val, 0) / 100);
    transition: stroke-dashoffset 1s cubic-bezier(.16,1,.3,1);
}

/* تول‌تیپ CSS محض */
.x-tip { position: relative; }
.x-tip::after {
    content: attr(data-tip);
    position: absolute;
    bottom: calc(100% + 8px);
    right: 50%;
    transform: translateX(50%) translateY(4px);
    background: var(--zh-ink);
    color: var(--zh-bg);
    font-size: 11.5px;
    line-height: 1;
    padding: 7px 10px;
    border-radius: 8px;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: opacity .2s, transform .2s;
    z-index: 60;
}
.x-tip:hover::after { opacity: 1; transform: translateX(50%) translateY(0); }

/* دکمهٔ کپی */
.x-copy {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: var(--zh-ink-3);
    border: 1px solid var(--zh-line);
    border-radius: 999px;
    padding: 5px 12px;
    background: transparent;
    cursor: pointer;
    transition: color .2s, border-color .2s;
}
.x-copy:hover { color: var(--zh-accent); border-color: var(--zh-accent); }
.x-copy.x-copied { color: var(--zh-gold); border-color: var(--zh-gold); }

/* شمارندهٔ متحرک — JS: nova-tools.js ([data-count]) */

/* سوییچ تم شناور — توسط nova-tools.js تزریق می‌شود.
   جایگاه: بالای دکمهٔ شناور پشتیبانی (zf-fab؛ چپِ پایین در RTL)
   تا با آن تصادم نکند. */
.x-theme-fab {
    position: fixed;
    bottom: 86px;
    left: 22px;
    z-index: 800;
    width: 44px; height: 44px;
    border-radius: 50%;
    display: grid; place-items: center;
    background: var(--zh-ink);
    color: var(--zh-bg);
    box-shadow: var(--zh-shadow-lg);
    cursor: pointer;
    border: 0;
    transition: transform .3s cubic-bezier(.16,1,.3,1);
}
.x-theme-fab:hover { transform: scale(1.08) rotate(15deg); }
.x-theme-fab svg { width: 20px; height: 20px; }

@media (prefers-reduced-motion: reduce) {
    .x-skel::after { animation: none; }
    .zh-card, .zh-btn--primary, .zh-cta, .btn-primary, .x-theme-fab { transition: none; }
}