/* PWA install / update banners */
.pwa-banner {
   position: fixed;
   left: 16px;
   right: 16px;
   bottom: 16px;
   z-index: 10050;
   animation: pwa-banner-in 0.3s ease;
}

.pwa-banner__inner {
   display: flex;
   flex-wrap: wrap;
   align-items: center;
   justify-content: space-between;
   gap: 12px 16px;
   max-width: 640px;
   margin: 0 auto;
   padding: 14px 16px;
   border-radius: 16px;
   background: rgba(24, 28, 36, 0.96);
   border: 1px solid rgba(255, 255, 255, 0.12);
   box-shadow: 0 8px 32px rgba(0, 0, 0, 0.45);
   color: #fff;
   backdrop-filter: blur(12px);
   -webkit-backdrop-filter: blur(12px);
}

.pwa-banner__text {
   flex: 1 1 200px;
   margin: 0;
   font-size: 0.9rem;
   line-height: 1.45;
   color: rgba(255, 255, 255, 0.9);
}

.pwa-banner__actions {
   display: flex;
   flex-wrap: wrap;
   gap: 8px;
}

.pwa-banner__btn {
   appearance: none;
   border: 1px solid rgba(255, 255, 255, 0.2);
   background: transparent;
   color: #fff;
   border-radius: 10px;
   padding: 8px 14px;
   font-size: 0.875rem;
   font-weight: 600;
   cursor: pointer;
}

.pwa-banner__btn--primary {
   border: none;
   background: linear-gradient(90deg, #F7426F, #F87A58);
}

.pwa-banner__btn:active {
   opacity: 0.9;
}

@keyframes pwa-banner-in {
   from {
      opacity: 0;
      transform: translateY(12px);
   }
   to {
      opacity: 1;
      transform: translateY(0);
   }
}

@media (max-width: 575px) {
   .pwa-banner {
      left: 12px;
      right: 12px;
      bottom: 12px;
   }

   .pwa-banner__inner {
      flex-direction: column;
      align-items: stretch;
   }

   .pwa-banner__actions {
      justify-content: flex-end;
   }
}

/* Safe area for notched phones when installed */
@supports (padding-bottom: env(safe-area-inset-bottom)) {
   .pwa-banner {
      bottom: calc(16px + env(safe-area-inset-bottom));
   }

   @media (display-mode: standalone) {
      body.body-area,
      body.portal-page {
         padding-left: env(safe-area-inset-left);
         padding-right: env(safe-area-inset-right);
      }
   }
}
