/* Store app «ثبّت التطبيق»: the install sheet and the side-menu item (setting store_pwa = 1 only). */
[data-pwa-install][hidden], .pwa-sheet[hidden], .pwa-sheet [hidden] { display:none !important; }

/* The install sheet: slides up from the bottom on phones, a small centred card on wide screens. */
.pwa-sheet { position:fixed; inset:0; z-index:130; display:flex; align-items:flex-end; justify-content:center; font-family:inherit; }
.pwa-sheet-bg { position:absolute; inset:0; background:rgba(15,17,20,.42); animation:pwaFade .25s ease both; }
.pwa-sheet-card {
  position:relative; width:min(440px, 100%); background:#fff; color:#14161a;
  border-radius:22px 22px 0 0; padding:22px 20px calc(18px + env(safe-area-inset-bottom));
  box-shadow:0 -10px 40px rgba(0,0,0,.18); text-align:center; outline:none;
  display:flex; flex-direction:column; align-items:center; gap:6px;
  animation:pwaUp .32s cubic-bezier(.2,.8,.25,1) both;
}
.pwa-sheet-card::before {               /* the grab handle phones show on a bottom sheet */
  content:""; position:absolute; top:8px; inset-inline:0; margin-inline:auto; width:38px; height:4px; border-radius:4px; background:#e2e4e1;
}
@keyframes pwaFade { from { opacity:0; } to { opacity:1; } }
@keyframes pwaUp { from { transform:translateY(100%); } to { transform:none; } }
@media (prefers-reduced-motion:reduce) { .pwa-sheet-bg, .pwa-sheet-card { animation:none; } }

.pwa-sheet-x {
  position:absolute; top:10px; inset-inline-end:10px; width:28px; height:28px; padding:0;
  display:grid; place-items:center; border:0; border-radius:50%; background:transparent; color:#8a8f8a; cursor:pointer;
}
.pwa-sheet-x:hover, .pwa-sheet-x:focus-visible { background:#f0f2ef; color:#14161a; }
.pwa-sheet-ic {
  width:64px; height:64px; border-radius:16px; margin-top:6px; background:#fff; object-fit:contain;
  border:1px solid #eceeec; box-shadow:0 4px 14px rgba(0,0,0,.08);
}
.pwa-sheet-t { font-size:17px; font-weight:800; line-height:1.45; margin-top:6px; padding-inline:18px; }
.pwa-sheet-sub { margin:0; font-size:13.5px; color:#5d625d; line-height:1.5; }
.pwa-sheet-go {
  width:100%; margin-top:10px; border:0; border-radius:13px; background:var(--brand, #d9161e); color:var(--tb-on, #fff);
  font:inherit; font-weight:800; font-size:16px; padding:13px 16px; cursor:pointer;
}
.pwa-sheet-go:active { transform:scale(.99); }

/* iPhone / iPad: two picture steps */
.pwa-ios { list-style:none; margin:10px 0 0; padding:0; width:100%; display:flex; flex-direction:column; gap:10px; text-align:start; }
.pwa-ios li { display:flex; gap:10px; align-items:flex-start; background:#f6f7f5; border-radius:14px; padding:11px 12px; }
.pwa-n {
  flex:none; width:24px; height:24px; border-radius:50%; display:grid; place-items:center;
  background:var(--brand, #d9161e); color:var(--tb-on, #fff); font-size:13px; font-weight:800;
}
.pwa-ios li > div { flex:1; min-width:0; }
.pwa-ios p { margin:1px 0 8px; font-size:14px; line-height:1.5; font-weight:600; }
.pwa-share, .pwa-add { vertical-align:-3px; color:#0a7aff; margin:0 1px; }
.pwa-ill { direction:ltr; display:flex; align-items:center; background:#fff; border:1px solid #e6e8e6; border-radius:11px; color:#0a7aff; }
.pwa-ill-bar { justify-content:space-around; padding:7px 6px; }
.pwa-ill-bar > svg { opacity:.45; }
.pwa-ill-hit { display:grid; place-items:center; width:36px; height:30px; border-radius:9px; background:#e7f1ff; box-shadow:0 0 0 2px #0a7aff inset; }
.pwa-ill-menu { padding:4px; }
.pwa-ill-row {
  direction:rtl; flex:1; display:flex; align-items:center; justify-content:space-between; gap:8px;
  padding:7px 10px; border-radius:8px; background:#e7f1ff; box-shadow:0 0 0 2px #0a7aff inset; color:#14161a; font-size:13.5px; font-weight:600;
}
[dir="ltr"] .pwa-ill-row { direction:ltr; }
.pwa-ill-row svg { color:#14161a; flex:none; }

/* Wide screens: a small card in the middle of the window, not a full-width sheet. */
@media (min-width:700px) {
  .pwa-sheet { align-items:center; }
  .pwa-sheet-card { border-radius:20px; padding-bottom:20px; animation-name:pwaPop; }
  .pwa-sheet-card::before { display:none; }
}
@keyframes pwaPop { from { transform:translateY(14px) scale(.98); opacity:0; } to { transform:none; opacity:1; } }

html.pwa-sheet-on, html.pwa-sheet-on body { overflow:hidden; }
@media print { .pwa-sheet { display:none !important; } }