html, body {
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

/* FocusOnNavigate يُركّز عنصراً (tabindex="-1") بعد كل تنقّل، وقاعدة :focus-visible في tailwind.css
   ترسم حلقة box-shadow حوله. نلغي الحلقة + الـ outline على عناصر التركيز البرمجي غير التفاعلية
   (العناوين وأي عنصر tabindex="-1")، مع بقاء تركيز لوحة المفاتيح سليماً للأزرار والحقول. */
h1:focus,
h1:focus-visible,
[tabindex="-1"]:focus,
[tabindex="-1"]:focus-visible {
    outline: none;
    box-shadow: none;
}

a, .btn-link {
    color: #0071c1;
}

.btn-primary {
    color: #fff;
    background-color: #1b6ec2;
    border-color: #1861ac;
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

.content {
    padding-top: 1.1rem;
}

.valid.modified:not([type=checkbox]) {
    outline: 1px solid #26b050;
}

.invalid {
    outline: 1px solid red;
}

.validation-message {
    color: red;
}

/* أنماط #blazor-error-ui انتقلت إلى _content/SpareParts.ERP.Blazor.Shared/css/error-panel.css
   (لوحة واحدة مشتركة بين التطبيقين، بوضعين فاتح وداكن، ومحتوى قابل للنسخ). */

.blazor-error-boundary {
    background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121;
    padding: 1rem 1rem 1rem 3.7rem;
    color: white;
}

    .blazor-error-boundary::after {
        content: "An error has occurred."
    }

.loading-progress {
    position: relative;
    display: block;
    width: 8rem;
    height: 8rem;
    margin: 20vh auto 1rem auto;
}

    .loading-progress circle {
        fill: none;
        stroke: #e0e0e0;
        stroke-width: 0.6rem;
        transform-origin: 50% 50%;
        transform: rotate(-90deg);
    }

        .loading-progress circle:last-child {
            stroke: #1b6ec2;
            stroke-dasharray: calc(3.141 * var(--blazor-load-percentage, 0%) * 0.8), 500%;
            transition: stroke-dasharray 0.05s ease-in-out;
        }

.loading-progress-text {
    position: absolute;
    text-align: center;
    font-weight: bold;
    inset: calc(20vh + 3.25rem) 0 auto 0.2rem;
}

    .loading-progress-text:after {
        content: var(--blazor-load-percentage-text, "Loading");
    }

code {
    color: #c02d76;
}

.form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder {
    color: var(--bs-secondary-color);
    text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder {
    text-align: start;
}
/* ═══════════════════════════════════════════════════════════════
   ActionToast — حركات التوست العائم المشترك بين شاشتَي الطلب.
   تُكتب هنا لا في Tailwind: أصناف الحركة (animate-in / slide-in-from-*)
   تأتي من إضافة tailwindcss-animate وهي غير محمّلة مع الـ CDN المستعمل هنا،
   فكانت الحركة تسقط بصمت.
   ═══════════════════════════════════════════════════════════════ */

@keyframes sp-toast-in {
    from {
        opacity: 0;
        transform: translateY(-0.75rem) scale(0.97);
    }

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

.sp-toast-enter {
    animation: sp-toast-in 220ms cubic-bezier(0.16, 1, 0.3, 1) both;
}

/* شريط المدّة المتبقية — يتقلّص من العرض الكامل إلى صفر */
@keyframes sp-toast-progress {
    from {
        transform: scaleX(1);
    }

    to {
        transform: scaleX(0);
    }
}

.sp-toast-progress {
    animation-name: sp-toast-progress;
    animation-timing-function: linear;
    animation-fill-mode: forwards;
    transform-origin: left center;
}

[dir="rtl"] .sp-toast-progress {
    transform-origin: right center;
}

/* ═══════════════════════════════════════════════════════════════
   رمز الريال السعودي الجديد (U+20C1 — Unicode 17.0، سبتمبر 2025).

   لماذا خطّ مستقلّ: الرمز حديث ولا تحمله خطوط الأنظمة بعد، فكتابته
   نصّاً عادياً تُظهر مربّعاً فارغاً (tofu) على أغلب الأجهزة.

   ولماذا مستضاف محلياً لا من CDN: الرمز يظهر بجانب **كل سعر** في المنصّة،
   فسقوط CDN يعني اختفاء العملة من كل الشاشات. الملفّ 1.3KB فقط.

   الرمز يُرسَم عبر ::before على عنصر فارغ: لو تعذّر تحميل الخطّ لا يظهر
   شيء بدل مربّع مكسور.
   ═══════════════════════════════════════════════════════════════ */

@font-face {
    font-family: 'saudi_riyal';
    src: url('../fonts/saudi_riyal.woff2') format('woff2'),
         url('../fonts/saudi_riyal.woff') format('woff'),
         url('../fonts/saudi_riyal.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'saudi_riyal_bold';
    src: url('../fonts/saudi_riyal_bold.woff2') format('woff2'),
         url('../fonts/saudi_riyal_bold.ttf') format('truetype');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

/* يرث الحجم واللون من السعر المجاور فيبدو جزءاً منه لا أيقونة ملصقة */
.sar-symbol::before {
    content: '\20C1';
    font-family: 'saudi_riyal';
    font-size: inherit;
    color: inherit;
    line-height: 1;
}

.sar-symbol--bold::before {
    font-family: 'saudi_riyal_bold';
}

/* ═══════════════════════════════════════════════════════════════
   إخفاء أسهم الزيادة والنقصان التي يرسمها المتصفّح داخل input[type=number].

   المشكلة: الأسهم لا تظهر إلا عند التحويم أو التركيز، وحين تظهر تحتلّ
   مساحة **داخل** الصندوق فينزاح الرقم عن مركزه رغم text-center — أي أن
   الحقل يبدو متوازناً ثم يختلّ بمجرّد لمسه. وفي التخطيط RTL تقع الأسهم
   على اليسار فيرتدّ الرقم يميناً.

   ولا حاجة إليها أصلاً: لكلّ حقل كمية زرّا + و − ظاهران بجانبه، والأسهم
   الأصلية أضيق من أن تُلمس على الجوال.
   ═══════════════════════════════════════════════════════════════ */

input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    appearance: none;
    margin: 0;
}

input[type="number"] {
    -moz-appearance: textfield;
    appearance: textfield;
}

/* ═══════════════════════════════════════════════════════════════
   شريط العروض — OfferStrip (ofs-*)

   صفٌّ واحد ثابت الارتفاع مهما بلغ عدد العروض. الشكل السابق كان بطاقةً كاملة
   بلون تنبيه لكل عرض، فستّة اشتراكات تعني 338 بكسل من التنبيهات فوق العنوان.

   والسطح هنا بطاقة محايدة لا لون تنبيه: كتلة برتقالية بعرض الصفحة تُقرأ إنذاراً
   من النظام لا عرضاً من المورد. اللون التحفيزي محصورٌ في النسبة داخل الشريحة،
   والأخضر لما فُعّل فعلاً.

   ⚠️ كل زرّ هنا يرث min-height: 44px من قاعدة مساحة اللمس العامة في tailwind.css
      — الأبعاد أدناه مكتوبة على أساسها، فلا تُصغَّر بظنّ أنها ستُطاع.
   ═══════════════════════════════════════════════════════════════ */
.ofs {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    margin-bottom: 1rem;
    padding: 0.4rem 0.5rem;
    background: hsl(var(--card));
    border: 1px solid hsl(var(--border));
    border-radius: 0.75rem;

    /* ⭐ استعلام حاوية لا استعلام شاشة: ما يضيق هو الشريط نفسه لا النافذة، والقياس
       يثبته — على حاوية 364 بكسل بقي للشرائح 97 بكسل بينما النافذة 1280. */
    container-type: inline-size;
    container-name: ofs;
}

.ofs-head {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    flex: 0 0 auto;
    align-self: stretch;
    padding-inline-end: 0.625rem;
    border-inline-end: 1px solid hsl(var(--border));
}

.ofs-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    inline-size: 1.6rem;
    block-size: 1.6rem;
    flex: 0 0 auto;
    border-radius: 999px;
    background: hsl(var(--ink-warning) / 0.12);
    color: hsl(var(--ink-warning));
    font-weight: 700;
    font-size: 0.8rem;
}

.ofs-label {
    font-size: 0.75rem;
    font-weight: 600;
    color: hsl(var(--foreground));
    white-space: nowrap;
}

/* ⚠️ حاوية تمرير أفقي: المحور الرأسي يصير مقصوصاً حتماً (قاعدة CSS لا خيار فيها)،
   فلا تُوضع فيها قائمة منسدلة ولا تلميح طافٍ — نافذة «كل العروض» تُفتح خارجها. */
.ofs-rail {
    display: flex;
    gap: 0.4rem;
    flex: 1 1 auto;
    min-inline-size: 0;
    overflow-x: auto;
    overflow-y: hidden;
    padding-block: 2px;
    scroll-snap-type: x proximity;
    /* الشريط المرسوم يأكل من ارتفاع صفٍّ من 64 بكسل، والشريحة نصف الظاهرة
       تكفي دلالةً على أنّ خلفها المزيد. */
    scrollbar-width: none;
}

.ofs-rail::-webkit-scrollbar { display: none; }

.ofs-chip {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 0.1rem;
    flex: 0 0 auto;
    min-inline-size: 9.5rem;
    max-inline-size: 15rem;
    padding: 0.25rem 0.55rem;
    border: 1px solid hsl(var(--border));
    border-radius: 0.5rem;
    background: hsl(var(--background));
    text-align: start;
    cursor: pointer;
    scroll-snap-align: start;
}

.ofs-chip-top {
    display: flex;
    align-items: baseline;
    gap: 0.3rem;
    min-inline-size: 0;
}

.ofs-chip-sup {
    font-size: 0.72rem;
    font-weight: 600;
    color: hsl(var(--foreground));
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ofs-chip-branch {
    font-size: 0.62rem;
    color: hsl(var(--muted-foreground));
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex: 0 1 auto;
}

.ofs-chip-val {
    display: flex;
    align-items: baseline;
    gap: 0.2rem;
    font-size: 0.7rem;
    color: hsl(var(--muted-foreground));
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.ofs-chip-pct {
    font-weight: 700;
    color: hsl(var(--ink-warning));
}

.ofs-chip-bar {
    display: block;
    /* ⚠️ الشريحة زرّ، وورقة أنماط المتصفّح تضع على الزرّ align-items: flex-start —
       فلا يمتدّ الابن عرضاً تلقائياً كما يمتدّ في أي حاوية flex أخرى. قياسٌ قبل هذا
       السطر: عرض الشريط 0 بكسل وارتفاعه 3، أي مرسومٌ وغير مرئيّ. */
    align-self: stretch;
    block-size: 3px;
    margin-block-start: 0.15rem;
    border-radius: 999px;
    background: hsl(var(--ink-warning) / 0.15);
    overflow: hidden;
}

.ofs-chip-bar i {
    display: block;
    block-size: 100%;
    border-radius: 999px;
    background: hsl(var(--warning));
}

/* فُعّلت الحملة فعلاً — لون نجاح لا تحفيز */
.ofs-chip.is-applied {
    background: hsl(var(--ink-success) / 0.07);
    border-color: hsl(var(--ink-success) / 0.3);
}

.ofs-chip.is-applied .ofs-chip-val,
.ofs-chip.is-applied .ofs-chip-pct {
    color: hsl(var(--ink-success));
}

.ofs-more-short { display: none; }

.ofs-more {
    flex: 0 0 auto;
    font-size: 0.72rem;
    font-weight: 600;
    color: hsl(var(--ink-primary));
    background: hsl(var(--primary) / 0.08);
    border: 1px solid hsl(var(--primary) / 0.2);
    border-radius: 0.5rem;
    padding: 0.3rem 0.6rem;
    cursor: pointer;
    white-space: nowrap;
}

.ofs-x {
    flex: 0 0 auto;
    padding: 0.25rem 0.4rem;
    font-size: 1.05rem;
    line-height: 1;
    color: hsl(var(--muted-foreground));
    background: transparent;
    border: 0;
    border-radius: 0.35rem;
    cursor: pointer;
}

.ofs-x:hover { background: hsl(var(--muted)); }

/* الحالة المنكمشة: بدأ الإدخال فتولّى شريط المجاميع سطر «باقي لك» بالمبلغ الحيّ */
.ofs-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    align-self: flex-start;
    margin-bottom: 0.75rem;
    padding: 0.25rem 0.75rem;
    font-size: 0.75rem;
    font-weight: 600;
    color: hsl(var(--ink-warning));
    background: hsl(var(--ink-warning) / 0.09);
    border: 1px solid hsl(var(--ink-warning) / 0.25);
    border-radius: 999px;
    cursor: pointer;
    font-variant-numeric: tabular-nums;
}

.ofs-pill-badge { font-weight: 700; }

/* الشاشات الضيّقة: العنوان يختفي ويبقى الرمز والعدد — الشرائح أولى بالمساحة */
/* الشريط الضيّق: العنوان يختفي والزرّ يصير عدّاً — الشرائح أولى بالمساحة.
   قياسٌ على حاوية 364 بكسل قبل هذه القاعدة: لم يبقَ للشرائح إلا 97 بكسل،
   وبعدها 232 — أي شريحةٌ ونصف ظاهرتان بدل ثلثَي واحدة. */
@container ofs (max-width: 480px) {
    .ofs-label { display: none; }
    /* أوسع لا أضيق: الشريحة الضيّقة تقصّ اسم الفرع إلى «الف» فتفقد فائدتها،
       والتمرير الأفقي يعوّض ما خرج عن الشاشة. */
    .ofs-chip { min-inline-size: 11rem; }
    .ofs-more-long { display: none; }
    .ofs-more-short { display: inline; }
    .ofs-more { padding-inline: 0.45rem; }
    .ofs-head { padding-inline-end: 0.4rem; }
}

/* نافذة «كل العروض» — بلا سقف عدديّ، وفيها اسم الفرع لكل صفّ */
.ofs-modal { display: flex; flex-direction: column; gap: 0.75rem; }

.ofs-modal-note {
    font-size: 0.75rem;
    line-height: 1.5;
    color: hsl(var(--muted-foreground));
}

.ofs-modal-list { display: flex; flex-direction: column; gap: 0.5rem; }

.ofs-modal-row {
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) minmax(0, 1.2fr) minmax(0, 1fr);
    gap: 0.5rem;
    align-items: center;
    padding: 0.55rem 0.7rem;
    border: 1px solid hsl(var(--border));
    border-radius: 0.5rem;
    background: hsl(var(--background));
}

.ofs-modal-who { display: flex; flex-direction: column; min-inline-size: 0; }

.ofs-modal-sup {
    font-size: 0.8rem;
    font-weight: 600;
    color: hsl(var(--foreground));
}

.ofs-modal-branch {
    font-size: 0.7rem;
    color: hsl(var(--muted-foreground));
}

.ofs-modal-terms,
.ofs-modal-state {
    display: flex;
    align-items: baseline;
    gap: 0.25rem;
    font-size: 0.75rem;
    color: hsl(var(--muted-foreground));
    font-variant-numeric: tabular-nums;
}

.ofs-modal-state.is-applied,
.ofs-modal-state.is-applied .ofs-chip-pct {
    color: hsl(var(--ink-success));
    font-weight: 600;
}

@media (max-width: 480px) {
    .ofs-modal-row { grid-template-columns: 1fr; gap: 0.25rem; }
}

/* تنبيه المسودة: خصمها تقديريّ حتى الإرسال */
.od-draft-note {
    margin-top: 0.375rem;
    padding: 0.5rem 0.625rem;
    border-inline-start: 3px solid hsl(var(--ink-warning));
    border-radius: 0.375rem;
    background: hsl(var(--ink-warning) / 0.08);
    color: hsl(var(--ink-warning));
    font-size: 0.75rem;
    line-height: 1.45;
}

/* ═══════════════════════════════════════════════════════════════════════════
   الدعم الفني على واتساب — بند قائمة الحساب وسطر صفحة الدخول
   ---------------------------------------------------------------------------
   قيمٌ صريحة لا أصناف Tailwind: منصّة الطلبات تعتمد Play CDN الذي لا يولّد صنفاً
   غائباً عن الـ DOM وقت الإقلاع (النمط نفسه في pwa-install.css).

   لِمَ ليس في صفّ الترويسة؟ قِيس على /home بحساب عميل يرى الشاشات السبع: الصفّ
   ممتلئ تماماً (فائض صفر) عند 390px وعند 1280px معاً، فإضافة زرّ 40px تُخرج
   43 بكسل — يُدفع بها زرّ القائمة خارج الشاشة على الهاتف. فالبند في قائمة
   الحساب: نقرةٌ واحدة من أي صفحة، ويتّسع للاسم والرقم معاً.
   (ملحوظة مقيسة لا تخصّ هذه الإضافة: عند 360px يفيض صفّ الترويسة 29px بذاته.)

   الأخضر يختلف بين الوضعين لسبب مقيس على الصفحة الحيّة: أخضر واتساب ‎#25D366‎
   تباينُه على الأبيض ‎1.98:1‎ وعلى بطاقة الدخول أدنى — دون حدّ ‎WCAG‎ للعناصر
   الرسومية (‎3:1‎). فنهاراً ‎#1B9C4B‎ (‎3.56:1‎ على الأبيض، ‎3.40:1‎ على البطاقة)،
   وليلاً ‎#25D366‎ (‎9.19:1‎ مقيس على سطح القائمة المعتم).

   والنصّ ليس أخضر: النصّ يطلب ‎4.5:1‎ ولا يبلغها الأخضر على الفاتح، فالتسمية
   والرقم بلون النصّ العاديّ والأخضرُ للشعار وحده.
   ═══════════════════════════════════════════════════════════════════════════ */
.wa-support {
    display: inline-flex;
    align-items: center;
    box-sizing: border-box;
    gap: 0.5rem;
    color: #1b9c4b;
    text-decoration: none;
    transition: background .18s ease, border-color .18s ease;
}

.dark .wa-support { color: #25d366; }

.wa-support__glyph {
    display: block;
    flex: none;
    width: 20px;
    height: 20px;
}

.wa-support__text {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    line-height: 1;
    white-space: nowrap;
    color: hsl(var(--foreground));
}

.wa-support__number {
    font-weight: 500;
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.02em;
    color: hsl(var(--muted-foreground));
}

/* بند قائمة الحساب: هندسته من بنود القائمة المجاورة (px-4 py-2.5 وعرض كامل،
   وارتفاعها المقيس 44px)، بلا إطار ولا خلفية — كي لا يشذّ عن جيرانه. */
.wa-support--menu {
    width: 100%;
    min-height: 44px;
    justify-content: flex-start;
    gap: 0.625rem;
    padding: 0.625rem 1rem;
    background: transparent;
}

.wa-support--menu:hover { background: hsl(var(--accent)); }

.wa-support--menu .wa-support__text {
    font-size: 0.875rem;
    font-weight: 500;
}

/* سطر صفحة الدخول: شارةٌ مستقلّة تحت «اتصال آمن ومشفّر»، فلها إطارها الخفيف */
.wa-support--labeled {
    height: 40px;
    justify-content: center;
    padding: 0 0.875rem;
    border: 1px solid rgb(27 156 75 / 0.35);
    border-radius: 10px;
    background: rgb(27 156 75 / 0.1);
}

.wa-support--labeled:hover {
    background: rgb(27 156 75 / 0.2);
    border-color: rgb(27 156 75 / 0.6);
}

.wa-support--labeled .wa-support__text {
    font-size: 0.8125rem;
    font-weight: 600;
}

.dark .wa-support--labeled {
    border-color: rgb(37 211 102 / 0.4);
    background: rgb(37 211 102 / 0.14);
}

.dark .wa-support--labeled:hover {
    background: rgb(37 211 102 / 0.24);
    border-color: rgb(37 211 102 / 0.65);
}

/* ═══════════════════════════════════════════════════════════════════════════
   الزرّ العائم للدعم — يسحبه العميل ويخفيه ويضغطه للتواصل
   ---------------------------------------------------------------------------
   السلوك في js/wa-fab.js. هنا الشكل والطبقة وحدهما.

   z-index: 39 مقصودة ودون كل ما يعلوها في هذه المنصّة: شريط أفعال الطلب
   السريع ومراجعة العرض (40)، والنوافذ (50)، وبطاقة «ثبّت التطبيق» (9000)،
   وشارة BlazorDevTools (99999)، وشريط تصفّح المخزون (100000). فلو جرّه
   العميل فوق «إرسال الطلب» بقي الزرّ خلفه ولم يبتلع نقرته.

   touch-action: none شرطُ السحب باللمس — بدونها يفوز تمرير الصفحة على السحب.
   ═══════════════════════════════════════════════════════════════════════════ */
.wa-fab {
    position: fixed;
    z-index: 39;
    width: 56px;
    height: 56px;
    touch-action: none;
    user-select: none;
    -webkit-user-select: none;
    -webkit-tap-highlight-color: transparent;
}

/* الإخفاء صنفٌ على <html> لا حالة في Blazor — يُقرأ قبل أوّل رسم فلا يومض */
html.wa-fab-hidden .wa-fab { display: none; }

.wa-fab__btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    border-radius: 9999px;
    background: #1b9c4b;
    color: #fff;
    text-decoration: none;
    cursor: grab;
    box-shadow: 0 10px 24px -6px rgb(27 156 75 / 0.45), 0 2px 8px -2px rgb(0 0 0 / 0.25);
    transition: transform .16s ease, box-shadow .16s ease;
}

/* الأبيض على ‎#1B9C4B‎ تباينه ‎3.56:1‎ — فوق حدّ ‎WCAG‎ للعناصر الرسومية.
   أخضر واتساب ‎#25D366‎ يهبط به إلى ‎1.98:1‎، ولذلك لا يُستعمل خلفيةً. */
.wa-fab__btn:hover { transform: scale(1.06); }

.wa-fab.is-dragging .wa-fab__btn {
    cursor: grabbing;
    transform: scale(1.08);
    box-shadow: 0 16px 32px -8px rgb(27 156 75 / 0.55), 0 4px 12px -2px rgb(0 0 0 / 0.3);
}

.wa-fab__glyph {
    display: block;
    width: 30px;
    height: 30px;
    pointer-events: none; /* النقر والسحب يخصّان الزرّ لا الشعار */
}

/* زرّ الإخفاء: خارج دائرة الزرّ تماماً كي لا يسرق نقرة التواصل من حافّتها */
.wa-fab__close {
    position: absolute;
    top: -6px;
    inset-inline-end: -6px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    min-height: 0; /* القاعدة العامّة تفرض 44px على كل button وتُفسد الشارة */
    padding: 0;
    border: 1px solid hsl(var(--border));
    border-radius: 9999px;
    background: hsl(var(--card));
    color: hsl(var(--muted-foreground));
    cursor: pointer;
    line-height: 1;
}

.wa-fab__close:hover {
    color: hsl(var(--foreground));
    border-color: hsl(var(--muted-foreground));
}

.wa-fab__close svg { width: 12px; height: 12px; display: block; }

/* بند «إظهار زرّ الدعم» في قائمة الحساب — لا يظهر إلا وقد أُخفي الزرّ.
   بهذا لا يحتاج Blazor أن يعرف الحالة: الصنف على <html> يقودهما معاً. */
.wa-fab-restore { display: none; }

html.wa-fab-hidden .wa-fab-restore {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    width: 100%;
    padding: 0.625rem 1rem;
    font-size: 0.875rem;
    font-weight: 500;
    text-align: start;
    color: hsl(var(--foreground));
    background: transparent;
    cursor: pointer;
}

html.wa-fab-hidden .wa-fab-restore:hover { background: hsl(var(--accent)); }

.wa-fab-restore__glyph {
    display: block;
    flex: none;
    width: 20px;
    height: 20px;
    color: #1b9c4b;
}

.dark .wa-fab-restore__glyph { color: #25d366; }