/* Popote PWA – Premium modal + update banner */

.popote-pwa-lock { overflow: hidden; }

#popote-pwa-popup {
  position: fixed; inset: 0; z-index: 999999;
  display: none;
  align-items: center; justify-content: center;
  background: rgba(6, 22, 40, 0.55);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  padding: 16px;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, sans-serif;
}
#popote-pwa-popup.is-open { display: flex; animation: popote-fade .25s ease; }

@keyframes popote-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes popote-rise { from { transform: translateY(14px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }

.popote-pwa-modal {
  width: 100%; max-width: 420px;
  background: rgba(255,255,255,0.92);
  border: 1px solid rgba(255,255,255,0.6);
  border-radius: 22px;
  box-shadow: 0 24px 60px rgba(6,22,40,0.35);
  padding: 24px 22px 20px;
  color: #0b1f33;
  animation: popote-rise .3s cubic-bezier(.2,.9,.3,1);
  position: relative;
}

.popote-pwa-modal__close {
  position: absolute; top: 10px; right: 10px;
  background: transparent; border: 0; cursor: pointer;
  width: 34px; height: 34px; border-radius: 50%;
  font-size: 20px; line-height: 1; color: #4a6076;
}
.popote-pwa-modal__close:hover { background: rgba(10,114,185,0.08); color: #0a72b9; }

.popote-pwa-modal__logo {
  width: 68px; height: 68px; border-radius: 18px;
  background: linear-gradient(135deg, #0a72b9, #4bb3f5);
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto 14px;
  box-shadow: 0 10px 24px rgba(10,114,185,0.35);
}
.popote-pwa-modal__logo img { width: 44px; height: 44px; }

.popote-pwa-modal__title {
  margin: 0 0 6px; text-align: center;
  font-size: 20px; font-weight: 700; letter-spacing: -0.01em;
}
.popote-pwa-modal__desc {
  margin: 0 0 14px; text-align: center;
  font-size: 14px; color: #4a6076; line-height: 1.5;
}

.popote-pwa-benefits {
  list-style: none; padding: 0; margin: 0 0 18px;
  display: grid; gap: 8px;
}
.popote-pwa-benefits li {
  display: flex; align-items: center; gap: 10px;
  font-size: 13.5px; color: #22405c;
}
.popote-pwa-benefits li::before {
  content: ""; width: 18px; height: 18px; flex: 0 0 18px;
  border-radius: 50%;
  background: #0a72b9 url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'><path fill='white' d='M7.6 13.2 4.4 10l-1.4 1.4 4.6 4.6 10-10L16.2 4.6z'/></svg>") center/12px no-repeat;
}

.popote-pwa-status {
  min-height: 18px; text-align: center;
  font-size: 12.5px; color: #0a72b9; margin: 0 0 10px;
}

.popote-pwa-actions { display: grid; gap: 10px; }
.popote-pwa-btn {
  appearance: none; border: 0; cursor: pointer;
  padding: 12px 18px; border-radius: 12px;
  font-size: 15px; font-weight: 600;
  transition: transform .1s ease, box-shadow .2s ease, background .2s ease;
}
.popote-pwa-btn--primary {
  background: linear-gradient(135deg, #0a72b9, #4bb3f5);
  color: #fff;
  box-shadow: 0 8px 20px rgba(10,114,185,0.35);
}
.popote-pwa-btn--primary:hover:not(:disabled) { transform: translateY(-1px); }
.popote-pwa-btn--primary:disabled { opacity: .55; cursor: not-allowed; box-shadow: none; }
.popote-pwa-btn--ghost {
  background: transparent; color: #4a6076;
  font-weight: 500; font-size: 13.5px;
}
.popote-pwa-btn--ghost:hover { color: #0a72b9; }

.popote-pwa-ios {
  background: rgba(10,114,185,0.06);
  border: 1px dashed rgba(10,114,185,0.35);
  border-radius: 14px; padding: 14px;
  font-size: 13.5px; color: #22405c; text-align: center;
  margin-bottom: 14px;
}
.popote-pwa-ios svg { vertical-align: -6px; margin: 0 4px; }

/* Update banner */
.popote-pwa-update {
  position: fixed; left: 50%; bottom: 20px; transform: translateX(-50%);
  z-index: 999998;
  background: #0b1f33; color: #fff;
  padding: 10px 14px; border-radius: 999px;
  display: flex; gap: 10px; align-items: center;
  box-shadow: 0 12px 30px rgba(0,0,0,0.35);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-size: 13.5px;
}
.popote-pwa-update__btn {
  background: #4bb3f5; color: #06263f; border: 0;
  padding: 6px 12px; border-radius: 999px;
  font-weight: 600; cursor: pointer;
}