/* ═══════════════════════════════════════════════════
   ASKomp ID — Popup Modal CSS
   Responsive, scrollable, theme-aware
═══════════════════════════════════════════════════ */

/* ── Overlay ── */
.popup-overlay{
  position:fixed;inset:0;z-index:2000;
  background:rgba(0,0,0,.78);
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  display:flex;align-items:center;justify-content:center;
  padding:1rem;
  opacity:0;transition:opacity .25s ease;pointer-events:none;
}
.popup-overlay.open{opacity:1;pointer-events:auto}

/* ── Modal box ── */
.popup-modal{
  background:var(--c-bg2);
  border:1px solid var(--c-border);
  border-radius:20px;
  width:100%;max-width:680px;
  max-height:88vh;overflow-y:auto;
  position:relative;
  box-shadow:0 20px 80px rgba(0,0,0,.5),0 0 40px var(--c-glow);
  transform:translateY(20px) scale(.97);
  transition:transform .3s cubic-bezier(.16,1,.3,1);
  overscroll-behavior:contain;
}
.popup-overlay.open .popup-modal{transform:translateY(0) scale(1)}

/* ── Close button ── */
.popup-close-btn{
  position:sticky;top:1rem;
  float:right;margin:.75rem .75rem 0 0;
  width:36px;height:36px;border-radius:50%;
  background:var(--c-bg3);border:1px solid var(--c-border2);
  color:var(--c-text2);font-size:.95rem;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  transition:all .2s;z-index:10;flex-shrink:0;
}
.popup-close-btn:hover{background:var(--c-accent);color:#000;border-color:var(--c-accent)}

/* ── Inner content ── */
.popup-inner{padding:1.5rem 2rem 2rem;clear:both}

/* ── Header ── */
.popup-icon-big{
  width:64px;height:64px;border-radius:14px;
  background:rgba(var(--c-accent-rgb),.1);border:1px solid var(--c-border);
  display:flex;align-items:center;justify-content:center;
  font-size:1.75rem;margin-bottom:1rem;overflow:hidden;flex-shrink:0;
}
.popup-title{font-family:var(--f-display);font-size:1.5rem;font-weight:700;margin-bottom:.25rem;color:var(--c-text)}
.popup-subtitle{color:var(--c-text3);font-size:.9rem;margin-bottom:1.25rem;font-family:var(--f-mono)}
.popup-divider{height:1px;background:var(--c-border2);margin:1.25rem 0}

/* ── Description ── */
.popup-desc{color:var(--c-text2);font-size:.92rem;line-height:1.75}
.popup-desc p{margin-bottom:.75rem}
.popup-desc p:last-child{margin-bottom:0}
.popup-desc b,.popup-desc strong{color:var(--c-text)}

/* ── Image ── */
.popup-img{
  width:100%;max-height:260px;object-fit:cover;
  border-radius:12px;margin:1rem 0;
  border:1px solid var(--c-border2);
}

/* ── Video embed ── */
.popup-video-wrap{
  position:relative;padding-bottom:56.25%;height:0;
  border-radius:12px;overflow:hidden;margin:1rem 0;
  border:1px solid var(--c-border2);background:var(--c-bg3);
}
.popup-video-wrap iframe,.popup-video-wrap video{
  position:absolute;inset:0;width:100%;height:100%;border:0;
}

/* ── Features list ── */
.popup-features{margin:1rem 0}
.popup-features-title{
  font-size:.78rem;font-weight:700;text-transform:uppercase;
  letter-spacing:.1em;color:var(--c-text3);margin-bottom:.75rem;
}
.popup-feature-item{
  display:flex;align-items:flex-start;gap:.65rem;
  padding:.5rem 0;border-bottom:1px solid var(--c-border2);
  font-size:.88rem;color:var(--c-text2);
}
.popup-feature-item:last-child{border-bottom:none}
.popup-feature-check{color:var(--c-accent);flex-shrink:0;margin-top:.05rem}

/* ── Price / CTA ── */
.popup-price{
  display:inline-flex;align-items:center;gap:.5rem;
  background:rgba(var(--c-accent-rgb),.08);border:1px solid var(--c-border);
  border-radius:8px;padding:.5rem 1rem;
  font-size:.85rem;color:var(--c-accent);margin-top:1rem;
  font-family:var(--f-mono);
}
.popup-cta{
  display:flex;gap:.75rem;flex-wrap:wrap;margin-top:1.25rem;
}

/* ── Ticker fixed bottom ── */
#ticker-bar{
  position:fixed;bottom:0;left:0;right:0;z-index:996;
  background:var(--c-bg2);
  border-top:1px solid var(--c-border2);
  overflow:hidden;padding:.5rem 0;
  pointer-events:none;
  transition:background .4s;
}
body{padding-bottom:38px}

/* ── Card clickable cursor ── */
[data-popup-section]{cursor:pointer}
[data-popup-section]:hover{border-color:var(--c-border) !important}

/* ── Scrollbar inside modal ── */
.popup-modal::-webkit-scrollbar{width:4px}
.popup-modal::-webkit-scrollbar-thumb{background:var(--c-accent);border-radius:2px}

@media(max-width:600px){
  .popup-inner{padding:1rem 1.25rem 1.5rem}
  .popup-title{font-size:1.2rem}
  .popup-modal{border-radius:14px}
}