/* ===================================================================
   Zorpido PWA: install CTA, iOS instructions sheet, update banner,
   and safe-area spacing for standalone (installed) launches.
   Loaded after the brand theme block in base.html.
==================================================================== */

/* ---------- Safe-area insets (notch / home-indicator) ----------
   Gated on both the JS-added .pwa-standalone class (reliable on iOS
   Safari home-screen launches) and the display-mode media query
   (covers Android/desktop installed PWAs) so either signal applies it. */
html.pwa-standalone #futuristic-navbar {
  padding-top: env(safe-area-inset-top);
}
html.pwa-standalone footer.footer,
html.pwa-standalone .pos-layout-wrapper {
  padding-bottom: env(safe-area-inset-bottom);
}
@media (display-mode: standalone) {
  #futuristic-navbar { padding-top: env(safe-area-inset-top); }
  footer.footer,
  .pos-layout-wrapper {
    padding-bottom: env(safe-area-inset-bottom);
  }
}

/* ---------- Install CTA (small, subtle, dismissible pill) ---------- */
.pwa-install-cta {
  position: fixed;
  right: 1rem;
  bottom: calc(1rem + env(safe-area-inset-bottom, 0px));
  z-index: 1080;
  display: flex;
  align-items: center;
  gap: .4rem;
  background: var(--zp-white, #fff);
  border: 2px solid var(--zp-yellow, #FFC72C);
  border-radius: 50px;
  box-shadow: 0 8px 24px rgba(228, 25, 47, 0.25);
  padding: .5rem .6rem .5rem 1rem;
}

.pwa-install-cta__btn {
  background: none;
  border: none;
  font-weight: 700;
  font-size: .9rem;
  color: var(--zp-red, #E4192F);
  white-space: nowrap;
  padding: 0;
}

.pwa-install-cta__dismiss {
  background: var(--zp-yellow-soft, #FFF3D1);
  border: none;
  border-radius: 50%;
  width: 22px;
  height: 22px;
  line-height: 1;
  font-size: .9rem;
  color: var(--zp-text, #5C1A1A);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* ---------- iOS "Add to Home Screen" bottom sheet ---------- */
.pwa-ios-sheet {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1090;
  background: var(--zp-white, #fff);
  border-top: 3px solid var(--zp-yellow, #FFC72C);
  border-radius: 20px 20px 0 0;
  box-shadow: 0 -8px 30px rgba(228, 25, 47, 0.2);
  padding: 1.25rem 1.25rem calc(1.25rem + env(safe-area-inset-bottom, 0px));
}

.pwa-ios-sheet__title {
  font-weight: 800;
  color: var(--zp-red, #E4192F);
  margin-bottom: .75rem;
}

.pwa-ios-sheet__steps {
  color: var(--zp-text, #5C1A1A);
  margin: 0 0 1rem 0;
  padding-left: 1.1rem;
}

.pwa-ios-sheet__steps li { margin-bottom: .4rem; }

.pwa-ios-sheet__close {
  background: var(--zp-yellow, #FFC72C);
  border: none;
  border-radius: 50px;
  font-weight: 700;
  color: var(--zp-red-dark, #B3111F);
  padding: .5rem 1.25rem;
}

/* ---------- Update available banner ---------- */
.pwa-update-banner {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 2100;
  background: var(--zp-red, #E4192F);
  color: var(--zp-white, #fff);
  padding: .6rem 1rem;
  padding-top: calc(.6rem + env(safe-area-inset-top, 0px));
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .75rem;
  font-weight: 600;
  font-size: .9rem;
}

.pwa-update-banner button {
  background: var(--zp-yellow, #FFC72C);
  color: var(--zp-red-dark, #B3111F);
  border: none;
  border-radius: 50px;
  font-weight: 800;
  padding: .3rem 1rem;
}

@media (max-width: 480px) {
  .pwa-install-cta__btn { font-size: .82rem; }
}