/* ===== Beakin Splash + Overlay (site) ===== */

/* Theme tokens */
:root{
  --bk-bg:#0a0a0a;
  --bk-card:#111214;
  --bk-text:#f2f3f5;
  --bk-sub:#c8cdd6;
  --bk-accent:#ffd166; /* brand yellow */
  --bk-splash-safe: 420px;  /* space reserved at right on desktop (panel ~360px + gap) */
}

.bk-hidden{display:none!important;}

/* DO NOT lock scroll */
body.bk-splash-open{overflow:auto;}

/* --- Reserve space at right so main content shifts left on desktop --- */
/* (Only target body to avoid layout feedback loops) */
@media (min-width: 981px){
  body { padding-right: var(--bk-splash-safe); }
}
@media (max-width: 980px){
  body { padding-right: 0; }
}

/* --- Splash panel (FLOATING, upper-right) --- */
#beakinSplash{
  position:fixed;
  top:18px;
  right:18px;
  z-index:9998;            /* above header/menu */
  display:block;

  /* floating panel: no fullscreen backdrop */
  background:transparent;
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
  padding:0;
}

/* Keep it centered on narrow screens */
@media (max-width: 720px){
  #beakinSplash{
    left:0; right:0; top:0;
    display:grid; place-items:center;
    padding:12px;
  }
}

#beakinSplash .bk-card{
  width:min(92vw,360px);
  background:linear-gradient(180deg,rgba(255,255,255,.03),rgba(255,255,255,.01));
  border:1px solid rgba(255,255,255,.08);
  border-radius:20px;
  box-shadow:0 20px 60px rgba(0,0,0,.45);
  padding:clamp(16px,4vw,24px);
  text-align:center;
  /* If performance is choppy on low-end devices, set these to none */
  backdrop-filter:blur(6px);
  color:var(--bk-text);
}

#beakinSplash .bk-logo{
  width:72px;
  height:72px;
  border-radius:16px;
  display:inline-block;
  margin-bottom:12px;
}

#beakinSplash h1{
  margin:0 0 8px;
  font-size:clamp(18px,2.8vw,24px);
  font-weight:700;
  letter-spacing:.2px;
  color:var(--bk-text);
}

#beakinSplash p{
  margin:0 0 16px;
  color:var(--bk-sub);
  font-size:clamp(13px,2.2vw,15px);
}

#beakinSplash .bk-cta{
  display:inline-block;
  width:100%;
  padding:12px 14px;
  font-size:15px;
  font-weight:700;
  color:#111214;
  text-decoration:none;
  background:var(--bk-accent);
  border-radius:10px;
  box-shadow:0 6px 18px rgba(255,209,102,.25);
  transition:transform .06s ease, filter .12s ease;
}

#beakinSplash .bk-cta:hover{
  transform:translateY(-1px);
  filter:brightness(1.02);
}

#beakinSplash .bk-cta:active{
  transform:translateY(0);
  filter:brightness(.98);
}

#beakinSplash .bk-alt{
  margin-top:10px;
  font-size:12px;
  color:var(--bk-sub);
}

#beakinSplash .bk-alt a{
  color:var(--bk-sub);
  text-decoration:underline;
  text-underline-offset:3px;
}

/* --- Fullscreen overlay host for iframe --- */
#beakinOverlay{
  position:fixed;
  inset:0;
  z-index:9999;            /* above splash */
  background:rgba(0,0,0,.92);
  display:none;            /* shown by JS */
}

/* Fill viewport with widget frame */
/* Target ONLY the intended frame to avoid resizing nested iframes */
#bkOverlayFrame{
  position:absolute;
  inset:0;
  width:100vw;
  height:100vh;
  border:0;
  display:block;
  background:#000;
  overflow:auto;
}

/* Close button above iframe */
#bkOverlayClose{
  position:absolute;
  top:14px;
  right:14px;
  z-index:10000;           /* above overlay frame */
  background:var(--bk-accent);
  color:#111214;
  border:0;
  border-radius:10px;
  padding:8px 12px;
  font-weight:700;
  cursor:pointer;
  box-shadow:0 6px 18px rgba(255,209,102,.25);
}

#bkOverlayClose:hover{ filter:brightness(1.03); }
#bkOverlayClose:active{ filter:brightness(.97); }

/* ===================== */
/* New bits for UX/tests */
/* ===================== */

/* Spinner while iframe loads */
#bkOverlaySpinner{
  position:absolute;
  inset:0;
  display:none;            /* JS toggles this */
  place-items:center;
  z-index:10001;           /* above iframe */
  background:rgba(0,0,0,.15);
  backdrop-filter: blur(1px);
}
#bkOverlaySpinner .dot{
  width:10px; height:10px; border-radius:50%;
  margin:0 4px;
  background:#ffd166;
  animation: bkPulse 0.9s infinite ease-in-out;
}
#bkOverlaySpinner .dot:nth-child(2){ animation-delay: .15s; }
#bkOverlaySpinner .dot:nth-child(3){ animation-delay: .30s; }
#bkOverlaySpinner { pointer-events: none; }

@keyframes bkPulse{
  0%, 80%, 100% { transform: scale(0.6); opacity:.5; }
  40%          { transform: scale(1);   opacity:1;  }
}

/* Floating Reopen button (appears after Close) */
#bkReopen{
  position: fixed;
  right: 16px;
  bottom: 16px;
  display: none;           /* JS shows this after you close */
  align-items:center;
  gap:8px;
  z-index:10002;
  background:var(--bk-accent);
  color:#111214;
  border:0;
  border-radius:999px;
  padding:10px 14px;
  font-weight:700;
  cursor:pointer;
  box-shadow:0 6px 18px rgba(255,209,102,.25);
}
#bkReopen:hover{ filter:brightness(1.03); }