/* ═══════════════════════════════════════════════════════════
   PWA — Banner + Update Notification + iOS Instructions
   ═══════════════════════════════════════════════════════════ */

.vl-pwa-banner{
  position:fixed;
  bottom:20px;
  inset-inline:20px;
  background:linear-gradient(135deg,#fffcf9 0%,#fdf5ed 100%);
  border:1.5px solid rgba(212,175,55,.4);
  border-radius:18px;
  padding:1rem 1.1rem;
  box-shadow:0 20px 50px rgba(100,70,30,.25),0 0 0 1px rgba(212,175,55,.15);
  z-index:99998;
  transform:translateY(120%);
  opacity:0;
  transition:transform .4s cubic-bezier(.22,1,.36,1),opacity .35s ease;
  max-width:420px;
  margin-inline:auto;
}
.vl-pwa-banner.show{transform:translateY(0);opacity:1}

.vl-pwa-content{
  display:flex;
  gap:.8rem;
  align-items:flex-start;
  margin-bottom:.85rem;
}
.vl-pwa-icon{
  font-size:2.2rem;
  flex-shrink:0;
  line-height:1;
  filter:drop-shadow(0 4px 10px rgba(212,175,55,.4));
}
.vl-pwa-text{flex:1;min-width:0}
.vl-pwa-text strong{
  display:block;
  font-family:'El Messiri',serif;
  font-size:1rem;
  color:#1a1512;
  margin-bottom:.2rem;
  font-weight:700;
}
.vl-pwa-text span{
  font-size:.82rem;
  color:#5a4a3a;
  line-height:1.5;
  display:block;
}
.vl-pwa-text span b{color:#b8863f;font-weight:800}

.vl-pwa-actions{
  display:flex;
  gap:.6rem;
  align-items:center;
}
.vl-pwa-install{
  flex:1;
  background:linear-gradient(135deg,#d4af37,#b8863f);
  color:#fff;
  border:none;
  padding:.75rem 1rem;
  border-radius:12px;
  font-family:inherit;
  font-size:.9rem;
  font-weight:800;
  cursor:pointer;
  box-shadow:0 6px 18px rgba(212,175,55,.4);
  transition:transform .2s,box-shadow .2s;
  -webkit-tap-highlight-color:transparent;
}
.vl-pwa-install:active{transform:scale(.97)}
.vl-pwa-later{
  background:transparent;
  border:none;
  color:#8a7a64;
  font-family:inherit;
  font-size:.82rem;
  font-weight:600;
  padding:.55rem .7rem;
  cursor:pointer;
  -webkit-tap-highlight-color:transparent;
}
.vl-pwa-later:hover{color:#5a4a3a}

/* ─── iOS Instructions Modal ─── */
.vl-pwa-ios-overlay{
  position:fixed;
  inset:0;
  background:rgba(26,21,18,.7);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
  z-index:99999;
  display:flex;
  align-items:flex-end;
  justify-content:center;
  padding:0;
  opacity:0;
  transition:opacity .3s ease;
}
.vl-pwa-ios-overlay.show{opacity:1}
.vl-pwa-ios-box{
  background:#fff;
  border-radius:22px 22px 0 0;
  padding:1.5rem 1.3rem calc(1.5rem + env(safe-area-inset-bottom));
  max-width:520px;
  width:100%;
  position:relative;
  transform:translateY(100%);
  transition:transform .35s cubic-bezier(.22,1,.36,1);
  max-height:85vh;
  overflow-y:auto;
}
.vl-pwa-ios-overlay.show .vl-pwa-ios-box{transform:translateY(0)}
.vl-pwa-ios-close{
  position:absolute;
  top:12px;
  inset-inline-end:12px;
  width:34px;
  height:34px;
  border-radius:50%;
  background:rgba(0,0,0,.06);
  border:none;
  color:#8b6f47;
  font-size:1rem;
  cursor:pointer;
  display:grid;
  place-items:center;
  transition:.2s;
}
.vl-pwa-ios-close:hover{background:rgba(0,0,0,.12)}

/* ─── Update Notification ─── */
.vl-pwa-update{
  position:fixed;
  top:16px;
  inset-inline:16px;
  background:linear-gradient(135deg,#1a1512,#2a1c0b);
  color:#fff;
  border-radius:14px;
  padding:.85rem 1rem;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:.8rem;
  box-shadow:0 12px 30px rgba(0,0,0,.3);
  z-index:99997;
  transform:translateY(-140%);
  opacity:0;
  transition:transform .4s cubic-bezier(.22,1,.36,1),opacity .35s ease;
  max-width:480px;
  margin-inline:auto;
}
.vl-pwa-update.show{transform:translateY(0);opacity:1}
.vl-pwa-update span{
  font-size:.85rem;
  line-height:1.4;
  flex:1;
}
.vl-pwa-update button{
  background:linear-gradient(135deg,#d4af37,#b8863f);
  color:#1a1512;
  border:none;
  padding:.5rem 1rem;
  border-radius:99px;
  font-family:inherit;
  font-size:.82rem;
  font-weight:800;
  cursor:pointer;
  white-space:nowrap;
  -webkit-tap-highlight-color:transparent;
}

/* ─── Mobile adjustments ─── */
@media(max-width:480px){
  .vl-pwa-banner{
    bottom:14px;
    inset-inline:14px;
    padding:.9rem 1rem;
  }
  .vl-pwa-icon{font-size:1.9rem}
  .vl-pwa-text strong{font-size:.95rem}
  .vl-pwa-text span{font-size:.76rem}
  .vl-pwa-install{padding:.7rem .9rem;font-size:.85rem}
  .vl-pwa-later{font-size:.76rem}
}

/* لو المستخدم عنده التطبيق مثبت، مفيش بانر */
@media(display-mode:standalone){
  .vl-pwa-banner{display:none !important}
}

@media(prefers-reduced-motion:reduce){
  .vl-pwa-banner,.vl-pwa-update,.vl-pwa-ios-overlay,.vl-pwa-ios-box{transition:none}
}