/* Albasha Pro v19 — PWA guest banner + installation guide
   Kept separate from app.css so header/feed styling stays isolated. */

.pwa-guest-banner {
  position: fixed;
  z-index: 1300;
  right: 16px;
  left: 16px;
  bottom: 84px;
  width: min(560px, calc(100% - 32px));
  margin-inline: auto;
  padding: 12px 14px;
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr) auto;
  align-items: center;
  gap: 11px;
  border: 1px solid #e4e7ec;
  border-radius: 20px;
  background: rgba(255,255,255,.98);
  box-shadow: 0 18px 55px rgba(15,23,42,.20);
  backdrop-filter: blur(14px);
  direction: rtl;
}
.pwa-guest-banner[hidden] { display: none !important; }
.pwa-guest-banner > img {
  width: 52px;
  height: 52px;
  object-fit: cover;
  border-radius: 14px;
  background: #071522;
  flex: none;
}
.pwa-guest-banner .pwa-install-copy {
  min-width: 0;
  display: grid;
  gap: 3px;
  padding-inline-start: 2px;
}
.pwa-guest-banner .pwa-install-copy b {
  color: #101828;
  font-size: 14px;
  line-height: 1.45;
  font-weight: 900;
}
.pwa-guest-banner .pwa-install-copy small {
  color: #667085;
  font-size: 11px;
  line-height: 1.55;
}
.pwa-guest-banner .pwa-guide-link {
  min-height: 40px;
  padding: 9px 14px;
  white-space: nowrap;
  text-decoration: none;
  border-radius: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.pwa-guest-banner .pwa-close {
  position: absolute;
  inset-inline-start: 5px;
  top: 4px;
  width: 27px;
  height: 27px;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: #98a2b3;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
}
.ltr-site .pwa-guest-banner { direction: ltr; bottom: 18px; }

/* Chrome one-click install area */
.chrome-install-box {
  margin: 14px 0 4px;
  padding: 15px;
  border: 1px solid #cfe3d9;
  border-radius: 16px;
  background: linear-gradient(145deg,#f4fbf7,#fff);
}
.chrome-install-box strong {
  display: block;
  color: #123b2b;
  font-size: 14px;
  margin-bottom: 5px;
}
.chrome-install-box p {
  margin: 0 0 10px;
  color: #557064;
  font-size: 12px;
  line-height: 1.75;
}
#native-install-button {
  width: 100%;
  min-height: 48px;
  border: 0;
  border-radius: 13px;
  background: linear-gradient(135deg,#07855f,#0b6f54);
  color: #fff;
  font-weight: 900;
  font-size: 14px;
  cursor: pointer;
  box-shadow: 0 9px 22px rgba(11,111,84,.18);
}
#native-install-button:disabled { opacity: .68; cursor: wait; }
#native-install-button[hidden] { display: none !important; }
.native-install-status {
  margin-top: 9px;
  min-height: 20px;
  color: #52606d;
  font-size: 11px;
  line-height: 1.65;
}
.native-install-status.success { color: #087a4b; font-weight: 800; }
.native-install-status.warning { color: #8a5a12; font-weight: 700; }
.install-fallback-help {
  display: none;
  margin-top: 10px;
  padding: 11px 12px;
  border: 1px solid #f0d69b;
  border-radius: 12px;
  background: #fff8e8;
  color: #725414;
  font-size: 12px;
  line-height: 1.75;
}
.install-fallback-help.is-visible { display: block; }
.install-fallback-help b { color: #5d430f; }

@media (max-width: 560px) {
  .pwa-guest-banner {
    right: 10px;
    left: 10px;
    bottom: 78px;
    width: calc(100% - 20px);
    grid-template-columns: 46px minmax(0,1fr);
    gap: 9px;
    padding: 11px 12px 12px;
    border-radius: 18px;
  }
  .pwa-guest-banner > img { width: 46px; height: 46px; border-radius: 12px; }
  .pwa-guest-banner .pwa-guide-link {
    grid-column: 1 / -1;
    width: 100%;
    min-height: 42px;
  }
  .pwa-guest-banner .pwa-install-copy b { font-size: 13px; }
  .pwa-guest-banner .pwa-install-copy small { font-size: 10.5px; }
  .ltr-site .pwa-guest-banner { bottom: 12px; }
}

@media (min-width: 900px) {
  .pwa-guest-banner { bottom: 24px; }
  .ltr-site .pwa-guest-banner { bottom: 24px; }
}

@media (display-mode: standalone) {
  .pwa-guest-banner { display: none !important; }
}


/* v19: logged-out install prompt must remain unmistakably visible in browser mode. */
.pwa-guest-banner {
  visibility: visible;
  opacity: 1;
}
.pwa-guest-banner .pwa-guide-link {
  background: linear-gradient(135deg,#c91839,#a5112d);
  color:#fff;
  border:1px solid #e5b96a;
  font-weight:900;
  box-shadow:0 8px 20px rgba(169,17,45,.18);
}
@media (max-width:560px){
  .pwa-guest-banner{bottom:82px;z-index:1600;}
  .pwa-guest-banner .pwa-guide-link{font-size:13px;}
}


/* Albasha Pro v22 — clear, non-obstructive dismiss control. */
.pwa-guest-banner .pwa-close {
  left: -7px;
  right: auto;
  top: -11px;
  width: 36px;
  height: 36px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #d0d5dd;
  border-radius: 999px;
  background: #fff;
  color: #344054;
  font: 800 25px/1 Arial, sans-serif;
  box-shadow: 0 7px 18px rgba(15,23,42,.18);
  cursor: pointer;
  z-index: 8;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}
.pwa-guest-banner .pwa-close:hover,
.pwa-guest-banner .pwa-close:focus-visible {
  color: #9f102b;
  border-color: #d7aab2;
  outline: 3px solid rgba(201,24,57,.12);
}
.pwa-guest-banner .pwa-close:active { transform: scale(.94); }
.ltr-site .pwa-guest-banner .pwa-close {
  left: auto;
  right: -7px;
}
@media (max-width:560px){
  .pwa-guest-banner .pwa-close {
    left: -4px;
    top: -10px;
    width: 34px;
    height: 34px;
    font-size: 23px;
  }
  .ltr-site .pwa-guest-banner .pwa-close { left:auto; right:-4px; }
}