/* ===== JóPONT PWA telepítő UI ===== */
:root{
  --jpi-blue:#4f8ef7;
  --jpi-teal:#14b8a6;
  --jpi-amber:#f59e0b;
  --jpi-ink:#1f3b57;
}

/* --- Alsó diszkrét banner --- */
#jpiBanner{
  position:fixed;
  left:50%;
  bottom:calc(16px + env(safe-area-inset-bottom));
  transform:translateX(-50%) translateY(140%);
  z-index:1000000;
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:10px 12px;
  width:min(94vw,520px);
  padding:16px 44px 14px 14px;
  border-radius:20px;
  background:rgba(255,255,255,.86);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  border:1px solid rgba(255,255,255,.7);
  box-shadow:0 18px 50px rgba(15,23,42,.28);
  opacity:0;
  transition:transform .55s cubic-bezier(.2,1,.25,1), opacity .45s ease;
  font-family:inherit;
}
#jpiBanner.jpi-show{ transform:translateX(-50%) translateY(0); opacity:1; }
#jpiBanner .jpi-bicon{
  width:46px;height:46px;flex:0 0 46px;border-radius:13px;object-fit:contain;
  background:radial-gradient(circle at 35% 30%,#fff,#e8f1ff 70%);
  box-shadow:0 4px 12px rgba(79,142,247,.35);
}
#jpiBanner .jpi-btext{ text-align:left;line-height:1.3;flex:1 1 160px;min-width:0; }
#jpiBanner .jpi-btext b{ display:block;font-size:15px;font-weight:800;color:var(--jpi-ink); }
#jpiBanner .jpi-btext span{ display:block;font-size:12.5px;color:#5b6b7d;margin-top:1px; }
#jpiBanner .jpi-binstall{
  flex:0 0 auto;
  border:0;cursor:pointer;
  padding:11px 18px;border-radius:14px;
  font-weight:800;font-size:14px;color:#fff;white-space:nowrap;
  background:linear-gradient(135deg,var(--jpi-blue),var(--jpi-teal));
  box-shadow:0 6px 16px rgba(20,184,166,.4);
  transition:transform .15s ease, box-shadow .15s ease;
}
#jpiBanner .jpi-binstall:hover{ transform:translateY(-1px); box-shadow:0 10px 22px rgba(20,184,166,.5); }
#jpiBanner .jpi-bclose{
  position:absolute;
  top:10px;right:10px;z-index:2;
  display:flex;align-items:center;justify-content:center;
  width:28px;height:28px;min-width:28px;min-height:28px;
  border:0;background:rgba(0,0,0,.06);cursor:pointer;
  border-radius:50%;padding:0;margin:0;
  color:#64748b;
  -webkit-tap-highlight-color:transparent;
}
#jpiBanner .jpi-bclose span{
  display:block;font-size:20px;line-height:1;font-weight:400;
  font-family:system-ui,-apple-system,"Segoe UI",Arial,sans-serif;
  transform:translateY(-1px);
}
#jpiBanner .jpi-bclose:hover{ background:rgba(0,0,0,.12);color:#334155; }

/* Mobil: ikon + szöveg egy sorban, a Telepítés gomb alatta teljes szélességben */
@media(max-width:470px){
  #jpiBanner{ padding-top:18px; }
  #jpiBanner .jpi-btext{ flex:1 1 0; }
  #jpiBanner .jpi-binstall{ flex:1 1 100%; padding:13px; font-size:15px; }
}

/* --- Lebegő, diszkrét telepítő gomb (ha a bannert bezárták) --- */
#jpiFab{
  position:fixed;
  right:calc(16px + env(safe-area-inset-right));
  bottom:calc(16px + env(safe-area-inset-bottom));
  z-index:999998;
  display:none;
  align-items:center;gap:8px;
  padding:10px 14px 10px 12px;
  border:0;cursor:pointer;
  border-radius:999px;
  font-family:inherit;font-weight:800;font-size:13.5px;color:#fff;
  background:linear-gradient(135deg,var(--jpi-blue),var(--jpi-teal));
  box-shadow:0 10px 26px rgba(20,184,166,.45);
  opacity:.96;
  transition:transform .15s ease, opacity .2s ease;
  animation:jpiFabIn .5s cubic-bezier(.2,1.4,.3,1) both;
}
#jpiFab.jpi-show{ display:flex; }
#jpiFab:hover{ transform:translateY(-2px) scale(1.03); opacity:1; }
#jpiFab .jpi-fabdot{ font-size:18px;line-height:1; }
@keyframes jpiFabIn{ from{ transform:translateY(20px) scale(.7); opacity:0; } to{ transform:none; opacity:.96; } }
@media(max-width:520px){ #jpiFab span.jpi-fablabel{ display:none; } #jpiFab{ padding:13px; } }

/* --- Modal --- */
#jpiModal{
  position:fixed;inset:0;z-index:1000001;
  display:none;align-items:center;justify-content:center;
  padding:18px;
  background:rgba(15,23,42,.55);
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  opacity:0;transition:opacity .3s ease;
}
#jpiModal.jpi-show{ display:flex;opacity:1; }
#jpiModal .jpi-card{
  position:relative;
  width:min(94vw,440px);
  max-height:90vh;overflow:auto;
  border-radius:28px;
  background:linear-gradient(180deg,#ffffff,#f3f8ff);
  box-shadow:0 30px 80px rgba(15,23,42,.45);
  border:1px solid rgba(255,255,255,.8);
  transform:translateY(24px) scale(.96);
  transition:transform .4s cubic-bezier(.2,1,.25,1);
  font-family:inherit;text-align:left;
}
#jpiModal.jpi-show .jpi-card{ transform:none; }
#jpiModal .jpi-head{
  position:relative;
  padding:26px 22px 20px;
  border-radius:28px 28px 0 0;
  background:linear-gradient(135deg,var(--jpi-blue),var(--jpi-teal) 55%,var(--jpi-amber));
  color:#fff;text-align:center;
  overflow:hidden;
}
#jpiModal .jpi-head::after{
  content:"";position:absolute;inset:0;
  background:radial-gradient(120px 120px at 80% -10%,rgba(255,255,255,.35),transparent 60%);
  pointer-events:none;
}
#jpiModal .jpi-headicon{
  width:74px;height:74px;border-radius:20px;object-fit:contain;
  background:rgba(255,255,255,.9);
  box-shadow:0 10px 24px rgba(0,0,0,.22);
  margin:0 auto 10px;display:block;
  animation:jpiPop .6s cubic-bezier(.2,1.4,.3,1) both;
}
@keyframes jpiPop{ from{ transform:scale(.4) rotate(-8deg);opacity:0; } to{ transform:none;opacity:1; } }
#jpiModal .jpi-head h3{ margin:4px 0 2px;font-size:22px;font-weight:900;text-shadow:0 2px 8px rgba(0,0,0,.18); }
#jpiModal .jpi-head p{ margin:0;font-size:13.5px;opacity:.95; }
#jpiModal .jpi-x{
  position:absolute;right:14px;top:14px;z-index:3;
  display:flex;align-items:center;justify-content:center;
  width:32px;height:32px;min-width:32px;min-height:32px;
  border:0;cursor:pointer;border-radius:50%;padding:0;margin:0;
  background:rgba(255,255,255,.28);color:#fff;
  -webkit-tap-highlight-color:transparent;
}
#jpiModal .jpi-x span{
  display:block;font-size:22px;line-height:1;font-weight:400;
  font-family:system-ui,-apple-system,"Segoe UI",Arial,sans-serif;
  transform:translateY(-1px);
}
#jpiModal .jpi-x:hover{ background:rgba(255,255,255,.45); }

#jpiModal .jpi-body{ padding:18px 20px 8px; }
#jpiModal .jpi-native{
  display:none;
  margin:0 0 14px;
}
#jpiModal .jpi-native button{
  width:100%;border:0;cursor:pointer;
  padding:15px;border-radius:16px;
  font-weight:900;font-size:16px;color:#fff;
  background:linear-gradient(135deg,var(--jpi-blue),var(--jpi-teal));
  box-shadow:0 10px 24px rgba(20,184,166,.45);
  transition:transform .15s ease;
}
#jpiModal .jpi-native button:hover{ transform:translateY(-1px); }
#jpiModal .jpi-native .jpi-or{
  text-align:center;font-size:12px;color:#8595a8;margin:12px 0 2px;
}

#jpiModal ol.jpi-steps{ list-style:none;margin:0;padding:0; }
#jpiModal ol.jpi-steps li{
  display:flex;align-items:flex-start;gap:13px;
  padding:11px 0;
  border-bottom:1px dashed #e4ecf6;
}
#jpiModal ol.jpi-steps li:last-child{ border-bottom:0; }
#jpiModal .jpi-num{
  flex:0 0 30px;width:30px;height:30px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-weight:900;font-size:15px;color:#fff;
  background:linear-gradient(135deg,var(--jpi-blue),var(--jpi-teal));
  box-shadow:0 4px 10px rgba(79,142,247,.4);
}
#jpiModal .jpi-stext{ flex:1;font-size:14.5px;line-height:1.45;color:var(--jpi-ink);padding-top:3px; }
#jpiModal .jpi-stext .jpi-ic{
  display:inline-flex;vertical-align:-5px;margin:0 2px;
}
#jpiModal .jpi-stext b{ color:#0f5ea8; }
#jpiModal .jpi-note{
  margin:14px 0 4px;padding:11px 13px;border-radius:14px;
  background:#fff7e6;border:1px solid #ffe2a8;
  font-size:12.8px;color:#8a6512;line-height:1.4;
}
#jpiModal .jpi-foot{
  padding:6px 20px 20px;
}
#jpiModal .jpi-secondary{
  width:100%;border:1px solid #d8e3f2;cursor:pointer;
  padding:12px;border-radius:14px;background:#fff;
  font-weight:700;font-size:14px;color:#5b6b7d;
}
#jpiModal .jpi-secondary:hover{ background:#f3f8ff; }
#jpiModal .jpi-copy{
  display:inline-flex;align-items:center;gap:6px;
  margin-top:8px;border:1px solid #cfe0f5;cursor:pointer;
  padding:8px 12px;border-radius:12px;background:#eef6ff;
  font-weight:700;font-size:13px;color:#0f5ea8;
}

/* Splash alatt ne villanjon be */
@media (prefers-reduced-motion: reduce){
  #jpiBanner,#jpiFab,#jpiModal,#jpiModal .jpi-card,#jpiModal .jpi-headicon{ transition:none;animation:none; }
}