/* ENJAZ reference-PWA foundation: local Arabic font + genuine Font Awesome icons. */
@font-face {
  font-family: 'Noto Sans Arabic Enjaz';
  src: url('../fonts/noto-sans-arabic/NotoSansArabic-Regular.ttf') format('truetype');
  font-style: normal;
  font-weight: 300 600;
  font-display: swap;
}
@font-face {
  font-family: 'Noto Sans Arabic Enjaz';
  src: url('../fonts/noto-sans-arabic/NotoSansArabic-Bold.ttf') format('truetype');
  font-style: normal;
  font-weight: 700 900;
  font-display: swap;
}

html, body, body *, button, input, select, textarea, option {
  font-family: 'Noto Sans Arabic Enjaz', Tahoma, Arial, sans-serif !important;
}

/* Restore the icon font after legacy rules applied the Arabic text font to every element. */
.fa-solid, .fas {
  font-family: 'Font Awesome 6 Free' !important;
  font-style: normal !important;
  font-weight: 900 !important;
}
.fa-regular, .far {
  font-family: 'Font Awesome 6 Free' !important;
  font-style: normal !important;
  font-weight: 400 !important;
}
.fa-brands, .fab {
  font-family: 'Font Awesome 6 Brands' !important;
  font-style: normal !important;
  font-weight: 400 !important;
}
.fa-solid, .fas, .fa-regular, .far, .fa-brands, .fab {
  display: inline-block !important;
  line-height: 1 !important;
  text-rendering: auto !important;
  -webkit-font-smoothing: antialiased !important;
  width: auto !important;
  height: auto !important;
}

/* Remove the old hand-drawn replacements and render the real Font Awesome glyphs. */
.fa-wallet::before,
.fa-bell::before,
.fa-bars::before,
.fa-download::before,
.fa-file-arrow-down::before,
.fa-headset::before,
.fa-circle::before,
.fa-xmark::before,
.fa-gear::before,
.fa-copy::before,
.fa-check::before,
.fa-circle-check::before,
.fa-house::before {
  content: var(--fa) !important;
  display: inline-block !important;
  width: auto !important;
  height: auto !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: none !important;
  box-shadow: none !important;
  clip-path: none !important;
  position: static !important;
  inset: auto !important;
  transform: none !important;
  box-sizing: content-box !important;
  font-family: inherit !important;
  font-weight: inherit !important;
}
.fa-wallet::after,
.fa-bell::after,
.fa-bars::after,
.fa-download::after,
.fa-file-arrow-down::after,
.fa-headset::after,
.fa-circle::after,
.fa-xmark::after,
.fa-gear::after,
.fa-copy::after,
.fa-check::after,
.fa-circle-check::after,
.fa-house::after {
  content: none !important;
  display: none !important;
}

/* Same action-icon geometry on admin, supervisor and user pages. */
.app-page-header .app-notification-toggle > i,
.app-page-header .app-wallet-chip > i,
.app-support-floating > i,
.app-support-floating-icon-only > i,
button[data-support-open] > i {
  font-family: 'Font Awesome 6 Free' !important;
  font-weight: 900 !important;
  font-style: normal !important;
  line-height: 1 !important;
  width: 1em !important;
  height: 1em !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  transform: none !important;
}
.app-page-header .app-notification-toggle > i,
.app-page-header .app-wallet-chip > i { font-size: 17px !important; }
.app-support-floating > i,
.app-support-floating-icon-only > i,
button[data-support-open] > i { font-size: 21px !important; }

/* Install banner modelled on the supplied working site, with Enjaz branding. */
.pwa-install-banner {
  position: fixed !important;
  z-index: 2147482000 !important;
  inset-inline: 16px !important;
  bottom: 16px !important;
  display: none !important;
  grid-template-columns: auto minmax(0,1fr) auto !important;
  align-items: start !important;
  gap: 13px !important;
  width: min(620px, calc(100vw - 32px)) !important;
  margin-inline: auto !important;
  padding: 16px !important;
  border: 1px solid rgba(10,73,117,.16) !important;
  border-radius: 22px !important;
  background: rgba(255,255,255,.98) !important;
  color: #102033 !important;
  box-shadow: 0 22px 70px rgba(15,23,42,.24) !important;
  backdrop-filter: blur(16px) !important;
  direction: rtl !important;
}
.pwa-install-banner.is-visible { display: grid !important; }
.pwa-install-banner .pwa-close {
  position: absolute !important;
  top: 9px !important;
  inset-inline-start: 9px !important;
  width: 32px !important;
  height: 32px !important;
  border: 0 !important;
  border-radius: 10px !important;
  background: #f1f5f9 !important;
  color: #475569 !important;
  cursor: pointer !important;
  font: 900 22px/1 Arial, sans-serif !important;
}
.pwa-install-banner .pwa-icon {
  width: 50px !important;
  height: 50px !important;
  display: grid !important;
  place-items: center !important;
  border-radius: 16px !important;
  background: linear-gradient(135deg,#e0f2fe,#ecfdf5) !important;
  color: #0a4975 !important;
  font-size: 23px !important;
}
.pwa-install-banner .pwa-icon i {
  font-family: 'Font Awesome 6 Free' !important;
  font-weight: 900 !important;
}
.pwa-install-banner .pwa-copy { min-width: 0 !important; padding-inline-start: 34px !important; }
.pwa-install-banner h3 { margin: 0 0 4px !important; font-size: 18px !important; color: #0a4975 !important; }
.pwa-install-banner p { margin: 0 !important; color: #526477 !important; font-size: 13px !important; line-height: 1.75 !important; }
.pwa-install-banner .pwa-install-help { margin-top: 7px !important; color: #0f766e !important; }
.pwa-install-banner .pwa-actions { display: flex !important; gap: 8px !important; flex-wrap: wrap !important; margin-top: 11px !important; }
.pwa-install-banner .pwa-actions .btn { min-height: 38px !important; }

@media (max-width: 640px) {
  .pwa-install-banner {
    inset-inline: 10px !important;
    bottom: 10px !important;
    width: calc(100vw - 20px) !important;
    grid-template-columns: 44px minmax(0,1fr) !important;
    border-radius: 19px !important;
    padding: 14px !important;
  }
  .pwa-install-banner .pwa-icon { width: 44px !important; height: 44px !important; font-size: 20px !important; }
  .pwa-install-banner .pwa-copy { padding-inline-start: 28px !important; }
  .pwa-install-banner .pwa-actions { grid-column: 1 / -1 !important; }
  .pwa-install-banner .pwa-actions .btn { flex: 1 1 120px !important; justify-content: center !important; }
}