/* ============================================================
   Zoalk — components/tst.css
   التوست — تنبيهات عائمة قصيرة العمر (نجاح الحفظ، الأخطاء...)
   تُدار من js/modules/toast.js:
   toast('تم حفظ بياناتك', 'success')
   البنية المحقونة:
   <div class="tst-zone" role="status" aria-live="polite">
     <div class="tst tst--success is-in">…</div>
   </div>
   ============================================================ */

.tst-zone{
  position:fixed;
  inset-block-end:var(--sp-4);
  inset-inline-start:50%;
  transform:translateX(50%); /* توسيط RTL-safe */
  z-index:var(--z-toast);
  display:flex;
  flex-direction:column;
  gap:var(--sp-2);
  width:min(24rem, calc(100vw - 2rem));
  pointer-events:none;
}
[dir="ltr"] .tst-zone{transform:translateX(-50%);}

.tst{
  display:flex;
  align-items:center;
  gap:var(--sp-3);
  background:var(--surface);
  border:1px solid var(--border-strong);
  border-radius:var(--r-md);
  box-shadow:var(--shadow-md);
  padding:var(--sp-3) var(--sp-4);
  font-size:var(--fs-sm);
  font-weight:500;
  pointer-events:auto;
  opacity:0;
  transform:translateY(8px);
  transition:opacity var(--dur-normal) var(--ease-out),
             transform var(--dur-normal) var(--ease-out);
}
.tst.is-in{opacity:1;transform:none;}

.tst svg{width:1.2rem;height:1.2rem;flex-shrink:0;}

.tst--success{border-inline-start:3px solid var(--success);border-radius:0 var(--r-md) var(--r-md) 0;}
.tst--success svg{color:var(--success);}
.tst--error{border-inline-start:3px solid var(--danger);border-radius:0 var(--r-md) var(--r-md) 0;}
.tst--error svg{color:var(--danger);}
.tst--info{border-inline-start:3px solid var(--info);border-radius:0 var(--r-md) var(--r-md) 0;}
.tst--info svg{color:var(--info);}

[dir="ltr"] .tst--success,
[dir="ltr"] .tst--error,
[dir="ltr"] .tst--info{border-radius:var(--r-md) 0 0 var(--r-md);}

/* -------- بانر تثبيت التطبيق (install.js) -------- */
.install-banner{
  position:fixed;
  inset-inline:var(--sp-3);
  inset-block-end:var(--sp-3);
  z-index:var(--z-toast);
  display:flex;
  align-items:center;
  gap:var(--sp-3);
  background:var(--bg-elevated);
  border:1px solid var(--primary);
  border-radius:var(--r-lg);
  box-shadow:var(--shadow-lg);
  padding:var(--sp-3) var(--sp-4);
  max-width:26rem;
  margin-inline:auto;
  opacity:0;
  transform:translateY(16px);
  transition:opacity var(--dur-slow) var(--ease-out),
             transform var(--dur-slow) var(--ease-out);
}
.install-banner.is-in{opacity:1;transform:none;}
.install-banner__icon{
  width:2.6rem;height:2.6rem;
  border-radius:var(--r-md);
  flex-shrink:0;
}
.install-banner__text{flex:1;min-width:0;}
.install-banner__text b{display:block;font-size:var(--fs-sm);}
.install-banner__text span{color:var(--text-muted);display:block;line-height:1.5;}
.install-banner__actions{
  display:flex;
  flex-direction:column;
  gap:var(--sp-1);
  flex-shrink:0;
}
@media (prefers-reduced-motion: reduce){
  .install-banner{opacity:1;transform:none;}
}