/* ══════════════════════════════════════
   OVERLAY — demo button + screen
   ══════════════════════════════════════ */

.cr-page .cr-header,
.cr-page .cr-topbar,
.cr-page .cr-top-stack{
  position:relative;
}

.cr-page .cr-overlay-btn{
  position:absolute;
  top:14px;
  left:calc(50% - 210px);
  background:transparent;
  border:1.5px solid var(--cr-accent-focus-strong);
  color:var(--cr-accent-border);
  font:600 11px/1 var(--cr-font-family);
  letter-spacing:.12em;
  text-transform:uppercase;
  padding:7px 16px;
  border-radius:999px;
  cursor:pointer;
  transition:all .3s;
  z-index:11000;
}

.cr-page .cr-header .cr-overlay-btn{
  left:calc(50% - 210px);
}

.cr-page .cr-overlay-btn:hover{
  background:var(--cr-accent-focus);
  border-color:var(--cr-accent-border);
  color:var(--cr-accent);
}

/* Overlay — covers only the card block */
.cr-page .cr-overlay-screen{
  position:absolute;
  inset:-4px -2px -2px;
  z-index:50;
  display:flex;
  align-items:center;
  justify-content:center;
  background:color-mix(in srgb,var(--cr-bg),transparent 28%);
  border-radius:0;
  opacity:0;
    pointer-events:none;
  transition:opacity .35s ease;
}

.cr-page .cr-overlay-screen.cr-overlay-full{
  position:fixed;
  inset:0;
  border-radius:0;
  z-index:9999;
}

.cr-page.cr-overlay-busy{
  cursor:progress;
}

@media (max-width: 760px) {
  .cr-page .cr-overlay-btn,
  .cr-page .cr-header .cr-overlay-btn{
    top:48px;
    left:10px;
    padding:6px 12px;
    font-size:10px;
  }
}

.cr-page .cr-overlay-screen.active{
  opacity:1;
  pointer-events:auto;
}

.cr-page .cr-overlay-gif{
  height:104px;
  width:auto;
  filter:drop-shadow(0 0 18px var(--cr-accent-shadow-strong));
  transform:scale(.85);
  transition:transform .35s ease;
}

.cr-page .cr-overlay-screen.active .cr-overlay-gif{
  transform:scale(1);
}