/* =========================================================
   HostLagbe — Promo popup
   Shown on homepage load per admin config. Visual language
   matches the rest of the site exactly: white card, glass
   backdrop blur, orange accent, --ease curve, radius tokens.
   No new colors or motion patterns introduced.
   ========================================================= */

.popup-overlay{
  position:fixed;
  inset:0;
  z-index:800;
  background:rgba(11,14,20,.45);
  backdrop-filter:blur(4px);
  -webkit-backdrop-filter:blur(4px);
  display:flex;
  align-items:center;
  justify-content:center;
  padding:20px;
  opacity:0;
  visibility:hidden;
  transition:opacity .35s var(--ease), visibility .35s var(--ease);
}
.popup-overlay.is-visible{
  opacity:1;
  visibility:visible;
}

.popup-card{
  position:relative;
  width:100%;
  max-width:420px;
  background:var(--white);
  border:1px solid var(--line);
  border-radius:var(--radius-lg);
  box-shadow:0 40px 90px -30px rgba(11,14,20,.4);
  overflow:hidden;
  transform:translateY(16px) scale(.97);
  transition:transform .4s var(--ease);
}
.popup-overlay.is-visible .popup-card{
  transform:translateY(0) scale(1);
}

.popup-close{
  position:absolute;
  top:12px; right:12px;
  z-index:2;
  width:32px; height:32px;
  border-radius:50%;
  background:rgba(255,255,255,.9);
  border:1px solid var(--line);
  display:flex; align-items:center; justify-content:center;
  cursor:pointer;
  transition:background .2s ease, transform .2s ease;
}
.popup-close:hover{ background:var(--white); transform:scale(1.06); }

.popup-track{
  position:relative;
  width:100%;
  overflow:hidden;
}
.popup-slide{
  display:none;
  flex-direction:column;
}
.popup-slide.is-active{
  display:flex;
  animation:popup-slide-in .4s var(--ease);
}
@keyframes popup-slide-in{
  from{ opacity:0; transform:translateX(24px); }
  to{ opacity:1; transform:translateX(0); }
}

.popup-image{
  width:100%;
  aspect-ratio:16/9;
  object-fit:cover;
  background:var(--surface);
  display:block;
}

.popup-body{
  padding:26px 24px 24px;
}
.popup-headline{
  font-size:1.25rem;
  margin-bottom:8px;
}
.popup-text{
  font-size:.92rem;
  color:var(--ink-soft);
  margin-bottom:20px;
  line-height:1.55;
}
.popup-cta{
  width:100%;
  text-align:center;
}

.popup-dots{
  display:flex;
  justify-content:center;
  gap:7px;
  padding:0 0 20px;
}
.popup-dot{
  width:7px; height:7px;
  border-radius:50%;
  background:var(--line);
  border:none;
  padding:0;
  cursor:pointer;
  transition:background .25s ease, transform .25s ease;
}
.popup-dot.is-active{
  background:var(--orange);
  transform:scale(1.3);
}

@media (prefers-reduced-motion: reduce){
  .popup-overlay, .popup-card, .popup-slide{ transition:none; animation:none; }
}