/* ══════════════════════════════════════
   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;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:14px;
  box-sizing:border-box;
  padding:24px;
  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:2147483000;
}

.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);
}

.cr-page .cr-overlay-notice{
  max-width:min(420px,calc(100vw - 40px));
  min-height:18px;
  color:var(--cr-detail-muted,#667085);
  font:600 13px/1.35 var(--cr-font-family,Manrope,Arial,sans-serif);
  letter-spacing:0;
  text-align:center;
  opacity:0;
  transform:translateY(-4px);
  transition:opacity .25s ease,transform .25s ease;
}

.cr-page .cr-overlay-screen.cr-overlay-show-notice .cr-overlay-notice{
  opacity:1;
  transform:translateY(0);
}

.cr-page .cr-overlay-cancel{
  min-height:38px;
  max-width:min(100%,320px);
  padding:9px 18px;
  border:1px solid var(--cr-table-line,#d8dee8);
  border-radius:999px;
  background:var(--cr-surface,#fff);
  color:var(--cr-detail-text,#101828);
  font:800 12px/1 var(--cr-font-family,Manrope,Arial,sans-serif);
  letter-spacing:0;
  cursor:pointer;
  box-shadow:0 10px 24px rgba(16,24,40,.12);
  opacity:0;
  transform:translateY(-4px);
  transition:opacity .25s ease,transform .25s ease,background .2s ease,border-color .2s ease;
}

.cr-page .cr-overlay-cancel:hover,
.cr-page .cr-overlay-cancel:focus-visible{
  background:#fff8e1;
  border-color:#f1c232;
  opacity:1;
  transform:translateY(0);
}

.cr-page .cr-overlay-screen.cr-overlay-show-notice .cr-overlay-cancel:not([hidden]){
  opacity:1;
  transform:translateY(0);
}