/* ===== Banner nhắc "Cài đặt app vào màn hình chính" (app/pwa-install.js) ===== */

.pwa-install-banner{
  position:fixed;
  left:50%;
  bottom:calc(var(--tabbar-h) + env(safe-area-inset-bottom) + 10px);
  transform:translateX(-50%) translateY(130%);
  width:calc(100% - 24px);
  max-width:456px;
  z-index:55; /* dưới overlay thông báo/hộp thoại, trên nội dung trang */
  opacity:0;
  pointer-events:none;
  transition:transform .32s cubic-bezier(.32,1.4,.5,1), opacity .28s ease;
}
.pwa-install-banner.is-visible{
  transform:translateX(-50%) translateY(0);
  opacity:1;
  pointer-events:auto;
}
.pwa-install-banner.is-hiding{
  transform:translateX(-50%) translateY(130%);
  opacity:0;
}

.pwa-install-card{
  position:relative;
  display:flex;
  align-items:center;
  gap:12px;
  background:#fff;
  border:1px solid var(--line);
  border-radius:18px;
  padding:14px 14px 14px 14px;
  box-shadow:var(--shadow-lg);
}

.pwa-install-icon{
  width:44px;height:44px;border-radius:12px;flex-shrink:0;
  box-shadow:var(--shadow-sm);
}

.pwa-install-text{flex:1;min-width:0;}
.pwa-install-title{
  font-family:'Plus Jakarta Sans',sans-serif;
  font-size:13.5px;font-weight:800;color:var(--navy);
  line-height:1.3;margin-bottom:2px;
}
.pwa-install-desc{
  font-family:'Inter',sans-serif;
  font-size:11.5px;font-weight:500;color:var(--slate);
  line-height:1.4;
}

.pwa-install-cta{
  flex-shrink:0;
  background:var(--navy);color:#fff;
  border-radius:11px;padding:9px 14px;
  font-family:'Plus Jakarta Sans',sans-serif;font-weight:700;font-size:12.5px;
  box-shadow:0 8px 16px -6px rgba(11,37,64,0.45);
  transition:transform .12s, opacity .12s;
}
.pwa-install-cta:active{transform:scale(0.96);}
.pwa-install-cta:disabled{opacity:.6;}
.pwa-install-cta-ghost{
  background:var(--sky-50);color:var(--teal);
  box-shadow:none;border:1.5px solid var(--line);
}

.pwa-install-close{
  position:absolute;top:-8px;right:-8px;
  width:24px;height:24px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:#fff;color:var(--slate-light);
  box-shadow:var(--shadow-sm);
  border:1px solid var(--line);
}
.pwa-install-close svg{width:11px;height:11px;}
.pwa-install-close:active{background:var(--sky-50);}

/* Màn hình rất hẹp: xếp CTA xuống hàng riêng, chiếm full chiều rộng để
   không bị bể chữ / nút quá nhỏ. */
@media (max-width:359px){
  .pwa-install-card{flex-wrap:wrap;}
  .pwa-install-text{order:1;flex-basis:calc(100% - 56px);}
  .pwa-install-icon{order:0;}
  .pwa-install-cta{order:2;flex-basis:100%;text-align:center;margin-top:2px;}
}

@media (prefers-reduced-motion: reduce){
  .pwa-install-banner{transition:opacity .2s ease;}
}