/* ============================================================
   PWA Install Banner — mobile only (matches native smart-banner style)
   Fixed to the very top of the viewport, and pushes the theme's own
   fixed header/sidebar down so nothing overlaps or gets hidden.
   ============================================================ */

.pwa-banner {
  display: none;               /* shown only on mobile via media query below */
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 10px 14px;
  background: var(--pwa-bg, #fffffff7);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  box-sizing: border-box;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 2001;                /* above the theme's fixed header (1030/1031) and sidebar (1040) */
  font-family: inherit;
  height: 70px;
}

.pwa-banner.pwa-banner-show {
  display: flex;
}

.pwa-banner__close {
  flex: 0 0 auto;
  width: 26px;
  height: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  color: var(--pwa-close-color, rgba(255, 255, 255, 0.55));
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  padding: 0;
  border-radius: 50%;
}

.pwa-banner__close:hover {
  color: #ffffff;
  background: rgba(255, 255, 255, 0.08);
}

.pwa-banner__icon {
  flex: 0 0 auto;
  width: 38px;
  height: 38px;
  box-sizing: border-box;
  border-radius: 10px;
  overflow: hidden;
  background: var(--pwa-icon-bg, #191c19);
  border: 2px solid var(--pwa-icon-border, rgb(16 185 129));
  display: flex;
  align-items: center;
  justify-content: center;
}

.pwa-banner__icon img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.pwa-banner__text {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  line-height: 1.25;
}

.pwa-banner__title {
  color: var(--pwa-title-color, #000000);
  font-size: 13.5px;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.pwa-banner__subtitle {
  color: var(--pwa-subtitle-color, #000000);
  font-size: 11.5px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.pwa-banner__action {
  flex: 0 0 auto;
  background: var(--pwa-btn-bg, #10b981);
  color: var(--pwa-btn-text, #ffffff);
  border: none;
  border-radius: 20px;
  padding: 7px 18px;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
}

.pwa-banner__action:active {
  background: var(--pwa-btn-bg-active, #0da271);
  filter: brightness(0.92);
}

/* Only show on mobile / small screens — never on desktop/PC */
@media (min-width: 769px) {
  .pwa-banner {
    display: none !important;
  }
}

/* ------------------------------------------------------------
   Push the theme's own fixed header / sidebar / content down by
   the banner's height so nothing gets hidden behind the banner,
   and nothing "jumps" once the banner scrolls... (it no longer
   scrolls away since it's fixed now, but this keeps everything
   aligned the moment the banner shows or hides).
   ------------------------------------------------------------ */
body.pwa-banner-active #header.d-header,
body.pwa-banner-active .d-header,
body.pwa-banner-active .header {
  top: var(--pwa-banner-h, 54px) !important;
}

body.pwa-banner-active #sidebar.sidebar,
body.pwa-banner-active .sidebar {
  top: var(--pwa-banner-h, 54px) !important;
  height: calc(100% - var(--pwa-banner-h, 54px)) !important;
}

body.pwa-banner-active .dashboard-root .app-content {
  padding-top: calc(120px + var(--pwa-banner-h, 54px)) !important;
}

@media (min-width: 769px) {
  /* Desktop never shows the banner, so never apply the offset either */
  body.pwa-banner-active #header.d-header,
  body.pwa-banner-active .d-header,
  body.pwa-banner-active .header,
  body.pwa-banner-active #sidebar.sidebar,
  body.pwa-banner-active .sidebar {
    top: 0 !important;
    height: 100% !important;
  }

  body.pwa-banner-active .dashboard-root .app-content {
    padding-top: 120px !important;
  }
}