/* ═══════════════════════════════════════════════════════════════════════════
   بطاقة «ثبّت التطبيق» ولافتة «التطبيق مثبّت على هذا الجهاز»
   ---------------------------------------------------------------------------
   ملفّ واحد يخدم التطبيقين، ويحرّكه js/pwa-install.js وحده.

   ⚠️ مستقلّ عن Tailwind عمداً — كملفّ error-panel.css. لوحة الإدارة تبني أصنافها
      بـ npm run tw:build فالصنف غير المبنيّ لا يُطبَّق شيئاً، ومنصّة الطلبات تعتمد
      Play CDN الذي لا يولّد أصنافاً غائبة عن الـ DOM وقت الإقلاع. فكلّ ما هنا
      أصناف خاصّة بادئتها spwa وقيمٌ صريحة.

   ثلاثة محاور مستقلّة يبدّلها JS، وكلّ محور نمطُه:
     data-state    على البطاقة   -->  prompt | ios | done
     data-platform على النافذة   -->  desktop | android | ios
     lang          على <html>    -->  ar (الأصل) | en | hi
   ولذلك تتداخل العناصر ولا تتقاطع القواعد: مغلّف الحالة يحوي مغلّفات اللغة.

   الموضع: أسفل جهة النهاية (اليسار الفيزيائي في العربية). قِيس أن الجهة البادئة
   محجوزة للـ sidebar وزرّ «تسجيل الخروج» في لوحة الإدارة، والوسط لمؤشّر
   «جارٍ تجهيز الصفحة». ولافتة إعادة الاتصال في التطبيقين علويّة فلا تزاحم.
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
    --spwa-z: 9000; /* تحت لافتة إعادة الاتصال (99990) وشارة BlazorDevTools (99999) */
    --spwa-accent: #0950c3; /* = hsl(217 91% 40%) لون الأساس في التطبيقين */
    --spwa-accent-dark: #073e99;
    --spwa-accent-soft: #e8f0fe;
    --spwa-surface: #ffffff;
    --spwa-ink: #111827;
    --spwa-ink-dim: #6b7280;
    --spwa-line: #e5e7eb;
    --spwa-muted: #f3f4f6;
    --spwa-shadow: 0 24px 60px -18px rgba(9, 80, 195, .32), 0 6px 18px -6px rgba(0, 0, 0, .12);
}

.dark {
    --spwa-accent: #3b82f6;
    --spwa-accent-dark: #2563eb;
    --spwa-accent-soft: rgba(59, 130, 246, .16);
    --spwa-surface: #0f172a;
    --spwa-ink: #f8fafc;
    --spwa-ink-dim: #94a3b8;
    --spwa-line: rgba(148, 163, 184, .22);
    --spwa-muted: rgba(148, 163, 184, .12);
    --spwa-shadow: 0 24px 60px -18px rgba(0, 0, 0, .7), 0 6px 18px -6px rgba(0, 0, 0, .5);
}

/* ─────────────────── محور اللغة ───────────────────
   كل نصّ موجود في الـ DOM بلغاته، وتُظهر CSS الموافق للغة <html>. لا بناء نصوص
   من JS ولا انتظار خدمة الترجمة — و<html lang> مضبوط قبل أوّل رسم في التطبيقين.
   العربية هي الأصل، فإن جاءت لغة لا نصّ لها بقيت العربية ظاهرة. */
.spwa-card [data-lang],
.spwa-oia [data-lang],
.spwa-modal [data-lang],
.spwa-trigger [data-lang] {
    display: none;
}

.spwa-card [data-lang="ar"],
.spwa-oia [data-lang="ar"],
.spwa-modal [data-lang="ar"],
.spwa-trigger [data-lang="ar"] {
    display: revert;
}

html[lang="en"] .spwa-card [data-lang="ar"],
html[lang="en"] .spwa-oia [data-lang="ar"],
html[lang="en"] .spwa-modal [data-lang="ar"],
html[lang="hi"] .spwa-card [data-lang="ar"],
html[lang="hi"] .spwa-oia [data-lang="ar"],
html[lang="hi"] .spwa-modal [data-lang="ar"],
html[lang="en"] .spwa-trigger [data-lang="ar"],
html[lang="hi"] .spwa-trigger [data-lang="ar"] {
    display: none;
}

html[lang="en"] .spwa-card [data-lang="en"],
html[lang="en"] .spwa-oia [data-lang="en"],
html[lang="en"] .spwa-modal [data-lang="en"],
html[lang="hi"] .spwa-card [data-lang="hi"],
html[lang="hi"] .spwa-oia [data-lang="hi"],
html[lang="hi"] .spwa-modal [data-lang="hi"],
html[lang="en"] .spwa-trigger [data-lang="en"],
html[lang="hi"] .spwa-trigger [data-lang="hi"] {
    display: revert;
}

/* ═══════════════════════ بطاقة التثبيت ═══════════════════════ */

/* مخفيّة افتراضياً؛ JS يضيف is-open حين يثبت أن التطبيق غير مثبّت */
.spwa-card {
    position: fixed;
    inset-inline-end: 24px;
    bottom: 24px;
    z-index: var(--spwa-z);
    width: min(400px, calc(100vw - 48px));
    box-sizing: border-box;
    display: none;
    overflow: hidden;
    border-radius: 16px;
    background: var(--spwa-surface);
    border: 1px solid var(--spwa-line);
    box-shadow: var(--spwa-shadow);
    color: var(--spwa-ink);
    font-family: inherit;
    text-align: start;
}

.spwa-card.is-open {
    display: block;
    animation: spwa-in .42s cubic-bezier(.2, .8, .25, 1) both;
}

.spwa-card.is-closing {
    animation: spwa-out .24s ease-in both;
}

/* خيط علوي بلون الأساس */
.spwa-card::before {
    content: "";
    position: absolute;
    inset-inline: 0;
    top: 0;
    height: 4px;
    background: linear-gradient(90deg, var(--spwa-accent), var(--spwa-accent-dark));
}

/* على الجوال: لوح سفليّ بعرض الشاشة — البطاقة الضيّقة تُهدر العرض */
@media (max-width: 640px) {
    .spwa-card {
        inset-inline: 12px;
        bottom: 12px;
        width: auto;
    }
}

/* ⚠️ لا قاعدة ثابتة لتفادي الأشرطة السفلية هنا: js/pwa-install.js يقيس ما يحتلّ
   أسفل الشاشة فعلاً (شريط ملخّص السلّة، تنقّل الجوّال، شارة BlazorDevTools) ويكتب
   bottom على العنصر مباشرةً. قاعدة CSS بأصناف كل تطبيق تتعطّل صامتاً عند أوّل
   إعادة تسمية، والقياس لا يتعطّل. */

.spwa-card__row {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 18px 18px 16px;
}

/* بلاطة الشعار: خلفية فاتحة بلون الأساس وحافّة ناعمة كأيقونة تطبيق */
.spwa-card__icon {
    flex: none;
    width: 56px;
    height: 56px;
    display: grid;
    place-items: center;
    border-radius: 14px;
    background: var(--spwa-accent-soft);
    box-shadow: inset 0 0 0 1px var(--spwa-line);
    overflow: hidden;
}

.spwa-card__icon img {
    width: 44px;
    height: 44px;
    display: block;
    border-radius: 10px;
}

.spwa-card__body {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.spwa-card__title {
    display: block;
    font-size: 15.5px;
    font-weight: 700;
    line-height: 1.35;
}

.spwa-card__desc {
    margin-top: 4px;
    font-size: 13px;
    line-height: 1.6;
    color: var(--spwa-ink-dim);
}

/* خطوات iOS: قائمة بخطوتين، الرقم داخل دائرة بلون الأساس */
.spwa-card__steps {
    margin: 8px 0 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.spwa-card__steps li {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12.5px;
    line-height: 1.5;
    color: var(--spwa-ink);
}

.spwa-card__steps i,
.spwa-modal__steps i {
    flex: none;
    width: 20px;
    height: 20px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--spwa-accent);
    color: #fff;
    font-style: normal;
    font-size: 11px;
    font-weight: 700;
}

/* أيقونة «مشاركة» في iOS داخل النصّ — مربّع وسهم */
.spwa-card__share {
    display: inline-block;
    width: 14px;
    height: 14px;
    vertical-align: -2px;
    margin-inline: 2px;
    color: var(--spwa-accent);
}

.spwa-card__actions {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 12px;
}

/* ⚠️ min-height صريح: التطبيقان يفرضان 44px على كل button (هدف اللمس العام)،
   وبدون تثبيتها هنا يختلف ارتفاع الزرّ بين التطبيقين. */
.spwa-btn {
    appearance: none;
    border: 1px solid transparent;
    font: inherit;
    font-size: 13px;
    font-weight: 600;
    line-height: 1;
    min-height: 40px;
    padding: 10px 18px;
    border-radius: 999px;
    cursor: pointer;
    transition: background .18s ease, transform .18s ease, box-shadow .18s ease;
}

.spwa-btn--primary {
    background: var(--spwa-accent);
    color: #fff;
    box-shadow: 0 6px 14px -6px rgba(9, 80, 195, .7);
}

.spwa-btn--primary:hover {
    background: var(--spwa-accent-dark);
    transform: translateY(-1px);
}

.spwa-btn--ghost {
    background: transparent;
    color: var(--spwa-ink-dim);
}

.spwa-btn--ghost:hover {
    background: var(--spwa-muted);
    color: var(--spwa-ink);
}

/* زرّ الإغلاق في زاوية النهاية */
.spwa-close {
    flex: none;
    margin-inline-start: auto;
    width: 28px;
    height: 28px;
    min-height: 28px;
    display: grid;
    place-items: center;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: var(--spwa-ink-dim);
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
    transition: background .18s ease, color .18s ease;
}

.spwa-close:hover {
    background: var(--spwa-muted);
    color: var(--spwa-ink);
}

/* ─── محور الحالة: JS يبدّل data-state، وCSS تُظهر المقطع الموافق ───
   المقاطع الثلاثة (prompt / ios / done) موجودة دائماً في الـ DOM. */
.spwa-card [data-for] {
    display: none;
}

.spwa-card[data-state="prompt"] [data-for="prompt"],
.spwa-card[data-state="ios"] [data-for="ios"],
.spwa-card[data-state="guide"] [data-for="guide"],
.spwa-card[data-state="allow"] [data-for="allow"],
.spwa-card[data-state="done"] [data-for="done"] {
    display: revert;
}

/* ─── حالة «بقيت خطوة»: توجيه إلى نافذة اختصارات المتصفّح ───
   تظهر بعد قبول التثبيت مباشرةً، وهي اللحظة التي تكون فيها نافذة المتصفّح مفتوحة
   على الشاشة تسأل عن الاختصارات. البطاقة تتّسع هنا لأن فيها صورة. */
.spwa-card[data-state="allow"],
.spwa-card[data-state="guide"] {
    width: min(420px, calc(100vw - 48px));
}

/* ⚠️ سقف الارتفاع لازم لا زينة: البطاقة مع اللقطة تبلغ 404 بكسل مقيسة، فتخرج عن
   أعلى الشاشة على الشاشات القصيرة (البطاقة مثبّتة من أسفل، فالزيادة تنمو صعوداً).
   قِيس على نافذة قصيرة: أعلاها عند ‎-243‎ أي خارج المرأى تماماً. */
.spwa-card[data-state="allow"],
.spwa-card[data-state="guide"] {
    max-height: calc(100vh - 32px);
    overflow-y: auto;
    overscroll-behavior: contain;
}

/* الصورة لمستخدمي Edge على الحاسب وحدهم — Chrome يعرض فقاعةً مختلفة تماماً،
   فصورةُ Edge تُضلّل من هو عليه. JS يضع data-browser على البطاقة. */
/* ⚠️ width: auto مع max-width وmax-height معاً: المتصفّح يصغّر الصورة بنسبتها
   محفوظةً فتُقيَّد بالبُعدين. أمّا width: 100% مع max-height فتُحشر الصورة في صندوق
   أعرض منها ويظهر فراغ على جانبيها. */
.spwa-shot {
    display: none;
    width: auto;
    max-width: min(290px, 100%);
    height: auto;
    max-height: 26vh;
    margin-top: 6px;
    border-radius: 10px;
    border: 1px solid var(--spwa-line);
}

/* الخطوة: نصّ فوق صورته */
.spwa-step {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    min-width: 0;
}

.spwa-card__steps--guide li {
    align-items: flex-start;
}

/* الشاشة القصيرة: تُحذف لقطة الخطوة الأولى (زرّ Install ظاهر لا يخطئ فيه أحد)
   وتبقى لقطة الاختصارات — هي التي يضيع فيها الاختصار. */
@media (max-height: 760px) {
    .spwa-shot--first {
        display: none !important;
    }
}

.spwa-card[data-state="guide"][data-browser="edge"] .spwa-card__steps--guide .spwa-shot,
.spwa-card[data-state="allow"][data-browser="edge"] .spwa-shot--allow {
    display: block;
}

/* حالة «تمّ التثبيت»: البلاطة تصير علامة صحّ */
.spwa-card[data-state="done"] .spwa-card__icon,
.spwa-card[data-state="allow"] .spwa-card__icon {
    background: var(--spwa-accent);
}

.spwa-card[data-state="done"] .spwa-card__icon img,
.spwa-card[data-state="allow"] .spwa-card__icon img {
    display: none;
}

.spwa-card__check {
    display: none;
    width: 26px;
    height: 26px;
    color: #fff;
}

.spwa-card[data-state="done"] .spwa-card__check,
.spwa-card[data-state="allow"] .spwa-card__check {
    display: block;
    animation: spwa-pop .4s cubic-bezier(.2, .8, .25, 1) both;
}

@keyframes spwa-in {
    from { opacity: 0; transform: translateY(18px) scale(.98); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes spwa-out {
    from { opacity: 1; transform: translateY(0); }
    to   { opacity: 0; transform: translateY(14px); }
}

@keyframes spwa-pop {
    from { transform: scale(.4); opacity: 0; }
    to   { transform: scale(1); opacity: 1; }
}

/* ═══════════ لافتة «التطبيق مثبّت على هذا الجهاز» ═══════════
   في موضع بطاقة التثبيت نفسه: الاثنتان لا تظهران معاً أبداً (وصول
   beforeinstallprompt يعني غير مثبّت، وغيابُه مع العلامة يعني مثبّتاً). */

.spwa-oia {
    position: fixed;
    inset-inline-end: 24px;
    bottom: 24px;
    z-index: calc(var(--spwa-z) + 1);
    width: min(460px, calc(100vw - 48px));
    box-sizing: border-box;
    display: none;
    overflow: hidden;
    border-radius: 14px;
    background: var(--spwa-surface);
    border: 1px solid var(--spwa-line);
    box-shadow: var(--spwa-shadow);
    color: var(--spwa-ink);
    text-align: start;
}

.spwa-oia.is-open {
    display: block;
    animation: spwa-oia-in .4s cubic-bezier(.2, .8, .25, 1) both;
}

.spwa-oia.is-closing {
    animation: spwa-oia-out .22s ease-in both;
}

.spwa-oia::before {
    content: "";
    position: absolute;
    inset-inline: 0;
    top: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--spwa-accent), var(--spwa-accent-dark));
}

@media (max-width: 640px) {
    .spwa-oia {
        inset-inline: 12px;
        bottom: 12px;
        width: auto;
    }
}

.spwa-oia__bar {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 12px 10px;
}

.spwa-oia__icon {
    flex: none;
    width: 40px;
    height: 40px;
    display: grid;
    place-items: center;
    border-radius: 11px;
    background: var(--spwa-accent-soft);
    box-shadow: inset 0 0 0 1px var(--spwa-line);
    overflow: hidden;
}

.spwa-oia__icon img {
    width: 32px;
    height: 32px;
    display: block;
    border-radius: 8px;
}

.spwa-oia__text {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.spwa-oia__title {
    font-size: 14px;
    font-weight: 700;
    line-height: 1.3;
}

.spwa-oia__desc {
    margin-top: 2px;
    font-size: 12px;
    line-height: 1.4;
    color: var(--spwa-ink-dim);
}

.spwa-oia__btn {
    flex: none;
    appearance: none;
    border: 0;
    font: inherit;
    font-size: 12.5px;
    font-weight: 700;
    line-height: 1;
    min-height: 38px;
    padding: 9px 14px;
    border-radius: 999px;
    background: var(--spwa-accent);
    color: #fff;
    cursor: pointer;
    box-shadow: 0 6px 14px -6px rgba(9, 80, 195, .7);
    transition: background .18s ease, transform .18s ease;
}

.spwa-oia__btn:hover {
    background: var(--spwa-accent-dark);
    transform: translateY(-1px);
}

@media (max-width: 480px) {
    .spwa-oia__desc { display: none; }
}

/* ─── نافذة «كيف تفتح التطبيق» ─── */

.spwa-modal {
    position: fixed;
    inset: 0;
    z-index: calc(var(--spwa-z) + 2);
    display: grid;
    place-items: center;
    padding: 20px;
}

.spwa-modal[hidden] {
    display: none;
}

/* خلفية حقيقية لا ::after: النقر عليها يغلق النافذة.
   بلا backdrop-filter — الطمس يعكس محتوى الصفحة مرآةً عند الحوافّ. */
.spwa-modal__back {
    position: absolute;
    inset: 0;
    background: rgba(9, 16, 30, .55);
    opacity: 0;
    transition: opacity .2s ease;
}

.spwa-modal.is-open .spwa-modal__back {
    opacity: 1;
}

.spwa-modal__card {
    position: relative;
    width: min(380px, 100%);
    box-sizing: border-box;
    padding: 26px 22px 20px;
    border-radius: 16px;
    background: var(--spwa-surface);
    color: var(--spwa-ink);
    box-shadow: var(--spwa-shadow);
    text-align: center;
    opacity: 0;
    transform: translateY(14px) scale(.98);
    transition: opacity .22s ease, transform .22s cubic-bezier(.2, .8, .25, 1);
}

.spwa-modal.is-open .spwa-modal__card {
    opacity: 1;
    transform: none;
}

.spwa-modal__close {
    position: absolute;
    top: 10px;
    inset-inline-end: 10px;
    width: 30px;
    height: 30px;
    min-height: 30px;
    display: grid;
    place-items: center;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: var(--spwa-ink-dim);
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
}

.spwa-modal__close:hover {
    background: var(--spwa-muted);
    color: var(--spwa-ink);
}

.spwa-modal__icon {
    width: 64px;
    height: 64px;
    margin: 0 auto 12px;
    display: grid;
    place-items: center;
    border-radius: 18px;
    background: var(--spwa-accent-soft);
    box-shadow: inset 0 0 0 1px var(--spwa-line);
    overflow: hidden;
}

.spwa-modal__icon img {
    width: 52px;
    height: 52px;
    display: block;
    border-radius: 12px;
}

.spwa-modal__title {
    margin: 0 0 14px;
    font-size: 17px;
    font-weight: 700;
}

/* محور المنصّة: JS يضع data-platform على الجذر، وCSS تُظهر الموافق وحده */
.spwa-modal [data-platform] {
    display: none;
}

.spwa-modal[data-platform="desktop"] [data-platform="desktop"],
.spwa-modal[data-platform="android"] [data-platform="android"],
.spwa-modal[data-platform="ios"] [data-platform="ios"] {
    display: revert;
}

/* ─── دليل التثبيت اليدوي: محوران لا واحد ───
   الخطوات تختلف بالمنصّة وبالمتصفّح معاً: من يفتح رابطاً داخل واتساب على Android
   يحتاج خطوةً تسبق كل شيء (فتحه في المتصفّح)، ولا تنفعه خطوات Chrome.
   قيم data-browser أربع يضعها JS: inapp | safari | chromium | other. */
.spwa-help [data-help] {
    display: none;
}

.spwa-help[data-browser="inapp"] [data-help="inapp"],
.spwa-help[data-platform="ios"][data-browser="safari"] [data-help="ios-safari"],
.spwa-help[data-platform="ios"][data-browser="other"] [data-help="ios-other"],
.spwa-help[data-platform="ios"][data-browser="chromium"] [data-help="ios-other"],
.spwa-help[data-platform="android"][data-browser="chromium"] [data-help="android-chromium"],
.spwa-help[data-platform="desktop"][data-browser="chromium"] [data-help="desktop-chromium"],
.spwa-help[data-platform="desktop"][data-browser="other"] [data-help="other"],
.spwa-help[data-platform="desktop"][data-browser="safari"] [data-help="other"],
.spwa-help[data-platform="android"][data-browser="other"] [data-help="other"],
.spwa-help[data-platform="android"][data-browser="safari"] [data-help="other"] {
    display: flex;
}

.spwa-modal__steps {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 8px;
    text-align: start;
}

.spwa-modal__steps li {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border-radius: 12px;
    background: var(--spwa-muted);
    font-size: 13px;
    line-height: 1.5;
}

/* تنبيه الإذن: المتصفّح يسأل «فتح في التطبيق؟» أوّل مرّة */
.spwa-modal__note {
    margin: 12px 0 0;
    padding: 10px 12px;
    border-radius: 10px;
    background: rgba(242, 167, 59, .12);
    border: 1px solid rgba(242, 167, 59, .35);
    font-size: 12px;
    line-height: 1.5;
    color: #8a5a12;
    text-align: start;
}

.dark .spwa-modal__note {
    color: #f2c98b;
}

.spwa-modal__actions {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-top: 16px;
}

.spwa-modal__actions .spwa-btn {
    width: 100%;
    padding-block: 12px;
    font-size: 14px;
    min-height: 44px;
}

@keyframes spwa-oia-in {
    from { opacity: 0; transform: translateY(16px); }
    to   { opacity: 1; transform: translateY(0); }
}

@keyframes spwa-oia-out {
    from { opacity: 1; transform: translateY(0); }
    to   { opacity: 0; transform: translateY(12px); }
}

@media (prefers-reduced-motion: reduce) {
    .spwa-card.is-open,
    .spwa-card.is-closing,
    .spwa-card__check,
    .spwa-oia.is-open,
    .spwa-oia.is-closing {
        animation: none;
    }

    .spwa-modal__back,
    .spwa-modal__card {
        transition: none;
    }
}

/* ═══════════ زرّ «ثبّت التطبيق» في ترويسة التطبيقين ═══════════
   مخفيّ دائماً إلا حين يضع js/pwa-install.js الصنف spwa-can-install على <html>،
   أي حين يكون التثبيت ممكناً فعلاً. النقر يمرّ بالمستمع المفوَّض على المستند
   (data-spwa="install") فلا يحتاج تفاعليةَ Blazor ولا يتأثّر بإعادة بناء الشجرة.

   ⚠️ أنماطه هنا لا في CSS التطبيقين: ترويسة اللوحة تبني أصنافها ببناء Tailwind،
      ومنصّة الطلبات تعتمد Play CDN — والصنف غير المولَّد لا يُطبَّق شيئاً. */
.spwa-trigger {
    display: none;
    flex: none;
    align-items: center;
    justify-content: center;
    gap: 7px;
    height: 40px;
    min-height: 40px;
    padding: 0 12px;
    font: inherit;
    font-size: 13px;
    font-weight: 600;
    line-height: 1;
    white-space: nowrap;
    border: 1px solid var(--spwa-accent);
    border-radius: 10px;
    background: var(--spwa-accent-soft);
    color: var(--spwa-accent);
    cursor: pointer;
    transition: background .18s ease, color .18s ease, transform .18s ease;
}

.spwa-trigger:hover {
    background: var(--spwa-accent);
    color: #fff;
    transform: translateY(-1px);
}

/* التسمية تُحذف على الشاشات الضيّقة فيصير الزرّ أيقونةً مربّعة —
   صفّ الترويسة هناك مزدحم، والأيقونة وحدها تكفي مع title. */
.spwa-trigger__label {
    display: inline-flex;
}

@media (max-width: 1100px) {
    .spwa-trigger {
        width: 40px;
        padding: 0;
        gap: 0;
    }

    .spwa-trigger__label {
        display: none;
    }
}

/* ⭐ يظهر متى كنّا خارج التطبيق المثبّت — لا متى كان الحدث متاحاً.
   كان معلّقاً على spwa-can-install، فمن لا يُطلق متصفّحه الحدث لم يجد في الواجهة
   طريقاً إلى التثبيت إطلاقاً. الآن يظهر لهم ويفتح الدليل اليدوي (#spwa-help). */
html.spwa-show-install .spwa-trigger {
    display: inline-flex;
}

.spwa-trigger svg {
    width: 19px;
    height: 19px;
    display: block;
}