/* ================= MakeIdBd PWA: install, offline, updates =================
   Markup is created by site_assets/js/pwa.js. On phones the bottom tab bar owns
   the bottom edge, so the banner sits above it; on desktop there is no tab bar and
   the banner moves to the left, clear of the floating WhatsApp button. */

/* NB: the state class is "pwa-show", not "show" - Bootstrap defines
   .show { display: block !important } and would flatten the flex layout. */
.pwa-mark { width: 46px; height: 46px; border-radius: 14px; flex: none;
  box-shadow: 0 8px 20px -10px rgba(13, 27, 46, .7); }

/* Same guard as the tab bar: master.css positions every bare <svg> absolutely. */
.pwa-banner svg, .pwa-toast svg, .pwa-sheet svg, .pwa-back svg, .pwa-install-btn svg {
  position: static; left: auto; top: auto; width: auto; height: auto;
  -webkit-transform: none; transform: none;
}

/* ---- install entry point ----
   Lives in the dashboard sidebar footer (templates/partials/sidebar.html), where
   it borrows the theme's own button classes, so there is little to style here.
   The public site does not show it at all: see installUI in pwa.js. */
.pwa-install-btn { cursor: pointer; }

/* ---- install banner ---- */
.pwa-banner { position: fixed; z-index: 10000; left: 12px; right: 12px;
  bottom: calc(var(--tabbar-h, 62px) + 14px + env(safe-area-inset-bottom));
  display: flex; align-items: center; gap: 14px; padding: 14px 14px 14px 16px;
  border-radius: 18px; background: #fff; color: #0d1b2e; border: 1px solid #e3e9f2;
  box-shadow: 0 26px 60px -22px rgba(13, 27, 46, .6);
  opacity: 0; transform: translateY(24px);
  transition: opacity .35s, transform .35s cubic-bezier(.2, .8, .2, 1); }
.pwa-banner.pwa-show { opacity: 1; transform: none; }
@media (min-width: 768px) { .pwa-banner { right: auto; left: 24px; bottom: 24px; max-width: 430px; } }
.pwa-copy { flex: 1; min-width: 0; }
.pwa-title { margin: 0; font-size: 15px; font-weight: 800; line-height: 1.45; color: #0d1b2e; }
.pwa-sub { margin: 3px 0 0; font-size: 12.5px; line-height: 1.6; color: #55627a; }
.pwa-cta { display: flex; align-items: center; gap: 6px; flex: none; }
.pwa-install { padding: 11px 18px; border: 0; border-radius: 999px; font: inherit; font-size: 14px;
  font-weight: 800; color: #fff; cursor: pointer;
  background: linear-gradient(135deg, #F5325C 0%, #FF3131 130%);
  box-shadow: 0 12px 26px -12px rgba(245, 50, 92, .9); transition: transform .2s, filter .2s; }
.pwa-install:hover { transform: translateY(-1px); filter: brightness(1.05); }
.pwa-install:active { transform: scale(.96); }
.pwa-close { width: 32px; height: 32px; border: 0; border-radius: 50%; background: none; font-size: 22px;
  line-height: 1; color: #8494b3; cursor: pointer; transition: background .2s, color .2s; }
.pwa-close:hover { background: #f0f3f9; color: #0d1b2e; }

/* ---- toast: offline notice, update prompt, confirmations ---- */
.pwa-toast { position: fixed; z-index: 10001; left: 12px; right: 12px;
  bottom: calc(var(--tabbar-h, 62px) + 14px + env(safe-area-inset-bottom));
  display: flex; align-items: center; gap: 14px; padding: 13px 14px 13px 18px; border-radius: 16px;
  background: #0d1b2e; color: #fff; font-size: 13.5px; line-height: 1.6;
  border: 1px solid rgba(255, 255, 255, .12); box-shadow: 0 22px 50px -20px rgba(0, 0, 0, .75);
  opacity: 0; transform: translateY(20px);
  transition: opacity .3s, transform .3s cubic-bezier(.2, .8, .2, 1); }
.pwa-toast.pwa-show { opacity: 1; transform: none; }
@media (min-width: 768px) { .pwa-toast { right: auto; left: 24px; bottom: 24px; max-width: 420px; } }
.pwa-toast-action { flex: none; padding: 8px 15px; border: 0; border-radius: 999px; font: inherit;
  font-size: 13px; font-weight: 800; color: #fff; cursor: pointer;
  background: linear-gradient(135deg, #F5325C 0%, #FF3131 130%); transition: filter .2s, transform .2s; }
.pwa-toast-action:hover { filter: brightness(1.08); }
.pwa-toast-action:active { transform: scale(.95); }

/* ---- iPhone "Add to Home Screen" sheet ---- */
.pwa-sheet-wrap { position: fixed; inset: 0; z-index: 10002; display: flex; align-items: flex-end;
  justify-content: center; }
.pwa-sheet-bg { position: absolute; inset: 0; background: rgba(13, 27, 46, .62);
  backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); opacity: 0; transition: opacity .35s; }
.pwa-sheet-wrap.pwa-show .pwa-sheet-bg { opacity: 1; }
.pwa-sheet { position: relative; width: 100%; max-width: 480px; background: #fff; color: #0d1b2e;
  border-radius: 26px 26px 0 0; padding: 12px 24px calc(28px + env(safe-area-inset-bottom));
  box-shadow: 0 -20px 60px -25px rgba(0, 0, 0, .6);
  transform: translateY(100%); transition: transform .38s cubic-bezier(.2, .8, .2, 1); }
.pwa-sheet-wrap.pwa-show .pwa-sheet { transform: none; }
@media (min-width: 768px) { .pwa-sheet-wrap { align-items: center; }
  .pwa-sheet { border-radius: 26px; margin: 0 16px; } }
.pwa-sheet-grip { width: 42px; height: 4px; border-radius: 999px; background: #e3e9f2; margin: 0 auto 18px; }
.pwa-sheet h3 { font-size: 1.35rem; font-weight: 800; margin: 16px 0 0; line-height: 1.5; color: #0d1b2e; }
.pwa-sheet > p { margin: 8px 0 0; font-size: 14.5px; line-height: 1.8; color: #55627a; }
.pwa-steps { list-style: none; margin: 20px 0 0; padding: 0; display: grid; gap: 14px; }
.pwa-steps li { display: flex; gap: 12px; align-items: flex-start; font-size: 14.5px; line-height: 1.8;
  color: #34435f; }
.pwa-step-n { flex: none; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center;
  font-size: 13px; font-weight: 800; color: #fff; background: linear-gradient(135deg, #F5325C, #FF3131); }
.pwa-sheet-close { width: 100%; margin-top: 24px; padding: 15px; border: 0; border-radius: 999px;
  font: inherit; font-weight: 800; color: #fff; background: #0d1b2e; cursor: pointer; transition: filter .2s; }
.pwa-sheet-close:hover { filter: brightness(1.4); }

/* ---- app mode (installed / standalone) ---- */
.pwa-back { width: 40px; height: 40px; border: 0; border-radius: 999px; display: grid; place-items: center;
  color: #fff; background: rgba(255, 255, 255, .12); cursor: pointer; flex: none; margin-right: 8px;
  transition: background .2s, transform .2s; }
.pwa-back:active { transform: scale(.92); background: rgba(255, 255, 255, .24); }
html.standalone body { overscroll-behavior-y: contain; }
html.standalone #pwa-install-slot { display: none !important; }

/* ---- where the sidebar install button is offered ----
   Phones only. On a desktop the browser already puts an install control in the
   address bar, and a home-screen icon is worth far less there - so the button
   would just be taking up sidebar space on the one device that needs it least.
   992px is the same breakpoint at which Metronic turns the sidebar into the
   mobile drawer, so the button belongs to the drawer and nothing else.

   Done in CSS rather than by skipping the JS that builds it, so that resizing
   the window in EITHER direction lands on the right answer without a reload. */
@media screen and (min-width: 992px) {
  #pwa-install-slot { display: none !important; }
}