/* Overlay + editor styles (as before) */
.wp-block-wpmc-heatclick-demo{ position:relative; display:block; border-radius:12px; overflow:hidden; background:#111; user-select:none; }
.wp-block-wpmc-heatclick-demo .wpmc-stage{ position:absolute; inset:0; background:transparent; }
.wp-block-wpmc-heatclick-demo .wpmc-click-dot-container{ position:absolute; z-index:9; pointer-events:none; }
.wp-block-wpmc-heatclick-demo .wpmc-click-dot, .wp-block-wpmc-heatclick-demo .wpmc-click-cluster{
  position:relative; border-radius:999px; pointer-events:auto; isolation:isolate; color:var(--wpmc-color,currentColor);
}
/* Tooltip */
.wp-block-wpmc-heatclick-demo .wpmc-tooltip{ position:absolute; left:50%; top:-8px; transform:translate(calc(-50% + var(--wpmc-tip-shift-x,0px)),-140%) scale(.98);
  transform-origin:50% 100%; z-index:9999; background:rgba(0,0,0,.92); color:#fff; border-radius:10px; padding:6px 10px;
  font:12px/1.35 system-ui,-apple-system,Segoe UI,Roboto,sans-serif; box-shadow:0 8px 20px rgba(0,0,0,.22); pointer-events:none; opacity:0;
  transition:opacity .14s ease, transform .14s ease; white-space:nowrap; max-width:420px; will-change:transform, opacity; }
.wp-block-wpmc-heatclick-demo .wpmc-tooltip-label{ font-weight:600; } .wp-block-wpmc-heatclick-demo .wpmc-tooltip-url{ opacity:.9; font-size:11px; margin-top:2px; }
.wp-block-wpmc-heatclick-demo .wpmc-click-dot:hover + .wpmc-tooltip.wpmc-tip-top,
.wp-block-wpmc-heatclick-demo .wpmc-click-cluster:hover + .wpmc-tooltip.wpmc-tip-top{ opacity:1; transform:translate(calc(-50% + var(--wpmc-tip-shift-x,0px)),-150%) scale(1); }
.wp-block-wpmc-heatclick-demo .wpmc-tooltip.wpmc-tip-bottom{ top:calc(100% + 8px); transform:translate(calc(-50% + var(--wpmc-tip-shift-x,0px)),0) scale(.98); transform-origin:50% 0%; }
.wp-block-wpmc-heatclick-demo .wpmc-click-dot:hover + .wpmc-tooltip.wpmc-tip-bottom,
.wp-block-wpmc-heatclick-demo .wpmc-click-cluster:hover + .wpmc-tooltip.wpmc-tip-bottom{ opacity:1; transform:translate(calc(-50% + var(--wpmc-tip-shift-x,0px)),10%) scale(1); }
/* Dot core */
.wp-block-wpmc-heatclick-demo .wpmc-click-dot{ background:transparent!important; width:16px; height:16px; }
.wp-block-wpmc-heatclick-demo .wpmc-click-dot::before{ content:""; position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  width:12px; height:12px; border-radius:999px; background:radial-gradient(circle at 50% 50%, var(--wpmc-core-color, var(--wpmc-pulse-color, var(--wpmc-color,currentColor))) 0%, rgba(0,0,0,0) 70%);
  filter:blur(1.2px); opacity:.95; }
  /* Halo: breathing ring with soft glow; uses system pulse color */
@keyframes wpmc-breath {
  0%   { transform: translate(-50%, -50%) scale(1);   opacity: .32; }
  50%  { transform: translate(-50%, -50%) scale(1.18); opacity: .18; }
  100% { transform: translate(-50%, -50%) scale(1);   opacity: .32; }
}
.wp-block-wpmc-heatclick-demo .wpmc-click-dot::after {
  content: ""; position: absolute; left: 50%; top: 50%;
  width: 18px; height: 18px; border-radius: 999px;
  transform: translate(-50%, -50%);
  border: 2px solid var(--wpmc-pulse-color, var(--wpmc-color, currentColor));
  box-shadow:
    0 0 16px var(--wpmc-pulse-color, var(--wpmc-color, currentColor)),
    0 0 28px rgba(0,0,0,.18);
  animation: wpmc-breath 1.8s ease-in-out infinite;
  pointer-events: none;
}

/* Cluster fill pulse */
/* Cluster core pulse: scale + opacity */
@keyframes wpmc-cluster-bubble {
  0%   { transform: scale(1);                             opacity: var(--wpmc-cluster-alpha, .92); }
  50%  { transform: scale(var(--wpmc-cluster-scale,1.10)); opacity: .70; }
  100% { transform: scale(1);                             opacity: var(--wpmc-cluster-alpha, .92); }
}

.wp-block-wpmc-heatclick-demo .wpmc-click-cluster{ display:flex; align-items:center; justify-content:center; background:transparent!important; color:#fff; font:600 12px/1 system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  box-shadow:0 0 0 2px rgba(255,255,255,.85), 0 8px 18px rgba(0,0,0,.28); }
.wp-block-wpmc-heatclick-demo .wpmc-click-cluster::before{
  content:"";
  position:absolute; inset:0;
  border-radius:999px;
  background:var(--wpmc-color,currentColor);
  /* було: animation:wpmc-cluster-fade 1.6s ease-in-out infinite; */
  animation: wpmc-cluster-bubble 1.6s ease-in-out infinite;
  opacity:var(--wpmc-cluster-alpha,.92);
  pointer-events:none;
  transform-origin: 50% 50%;
}

.wp-block-wpmc-heatclick-demo .wpmc-click-cluster>span{ position:relative; z-index:1; }
/* ----------------------- Water ripples (optional waves) ----------------------- */
@keyframes wpmc-ripple {
  0%   { transform: translate(-50%, -50%) scale(1);   opacity: .22; }
  60%  { opacity: 0; }
  100% { transform: translate(-50%, -50%) scale(2.4); opacity: 0; }
}
.wp-block-wpmc-heatclick-demo .wpmc-click-pulse,
.wp-block-wpmc-heatclick-demo .wpmc-click-pulse::before,
.wp-block-wpmc-heatclick-demo .wpmc-click-pulse::after {
  content: "";
  position: absolute; left: 50%; top: 50%;
  width: 100%; height: 100%; transform: translate(-50%, -50%);
  border-radius: 999px;
  border: 2px solid var(--wpmc-pulse-color, var(--wpmc-color, currentColor));
  box-shadow: 0 0 18px var(--wpmc-pulse-color, var(--wpmc-color, currentColor));
  opacity: .22;
  animation: wpmc-ripple 2s ease-out infinite;
  will-change: transform, opacity; pointer-events: none;
}
.wp-block-wpmc-heatclick-demo .wpmc-click-pulse::before { animation-delay: .45s; }
.wp-block-wpmc-heatclick-demo .wpmc-click-pulse::after  { animation-delay: .9s;  }


/* Поважаємо reduce motion */
@media (prefers-reduced-motion: reduce) {
  .wp-block-wpmc-heatclick-demo .wpmc-click-dot::after,
  .wp-block-wpmc-heatclick-demo .wpmc-click-cluster::before,
  .wp-block-wpmc-heatclick-demo .wpmc-click-pulse,
  .wp-block-wpmc-heatclick-demo .wpmc-click-pulse::before,
  .wp-block-wpmc-heatclick-demo .wpmc-click-pulse::after {
    animation: none !important;
    opacity: .3;
  }
}


.wp-block-wpmc-heatclick-demo .wpmc-click-pulse::before{ animation-delay:.35s; } .wp-block-wpmc-heatclick-demo .wpmc-click-pulse::after{ animation-delay:.70s; }
/* Hover lift */
.wp-block-wpmc-heatclick-demo .wpmc-click-dot:hover, .wp-block-wpmc-heatclick-demo .wpmc-click-cluster:hover{ transform:translateZ(0) scale(1.04); transition: transform .12s ease; }
/* Editor canvas */
.wp-block-wpmc-heatclick-demo-editor{ position:relative; border-radius:12px; background:#111; }
.wp-block-wpmc-heatclick-demo-editor .wpmc-editor-canvas{ position:relative; overflow:hidden; width:100%; height:100%; border-radius:12px; background-size:cover; background-position:center; }
.wpmc-editor-btn{ position:absolute; width:36px; height:36px; border-radius:999px; box-shadow:0 6px 14px rgba(0,0,0,.25); display:grid; place-items:center; color:#fff; font:600 12px/1 system-ui,-apple-system,Segoe UI,Roboto,sans-serif; cursor:grab; user-select:none; outline:2px solid rgba(255,255,255,.85); }
.wpmc-editor-btn[data-selected="true"]{ outline:3px solid #00E5FF; }
.wpmc-editor-toolbar{ position:absolute; left:8px; top:8px; z-index:2; display:flex; gap:8px; }
/* Cards look okay on dark/light themes */
.wpmc-stats-layout .wpmc-stat-block{ background:#fff; }
body.wp-admin .wpmc-stats-layout .wpmc-stat-block{ background:var(--wpmc-stat-bg,#fff); }


/* ===== WPMC HeatClick: Panel (frontend demo) smaller fonts ===== */
/* ===== WPMC HeatClick: Panel (frontend demo) unified smaller fonts ===== */

.wpmc-columns {
  font-size: 14px !important;
  line-height: 1.35;
}

/* Ліва колонка */
.wpmc-columns .wpmc-column-left,
.wpmc-columns .wpmc-column-left h3,
.wpmc-columns .wpmc-column-left label,
.wpmc-columns .wpmc-column-left .wpmc-substat-value-inline {
  font-size: 14px !important;
  line-height: 1.35;
}

/* Центр: Scroll depth */
.wpmc-columns .wpmc-column-center,
.wpmc-columns .wpmc-column-center h3,
.wpmc-columns .wpmc-column-center strong,
.wpmc-columns .wpmc-column-center [style*="font-size"],
.wpmc-columns .wpmc-column-center span[style*="font-size"] {
  font-size: 14px !important;
  line-height: 1.35;
}

/* Права колонка: Warning */
.wpmc-columns .wpmc-column-right,
.wpmc-columns .wpmc-column-right .wpmc-click-warning strong,
.wpmc-columns .wpmc-column-right .wpmc-click-warning p {
  font-size: 14px !important;
  line-height: 1.35;
}
/* ===== Panel stat blocks: border + shadow ===== */
.wpmc-stats-layout .wpmc-stat-block {
  background: #fff;
  border: 1px solid rgba(0,0,0,.1);   /* тонка обводка */
  border-radius: 6px;                 /* легке заокруглення */
  box-shadow: 0 2px 6px rgba(0,0,0,.08); /* м’яка тінь */
  padding: 12px;                      /* невеликий внутрішній відступ */
}
/* Responsive, centered container */
.wp-block-wpmc-heatclick-demo {
  width: 100%;
  max-width: 100%;
  margin: 0 auto;
  background-position: center center;
  background-repeat: no-repeat;
  background-size: contain; /* change to 'cover' if you prefer full-bleed */
}

/* Ensure the stage fills the container */
.wp-block-wpmc-heatclick-demo .wpmc-stage {
  width: 100%;
  height: 100%;
}

/* Fallback layout when aspect-ratio is not supported: position absolute inside relative container */
.wp-block-wpmc-heatclick-demo .wpmc-aspect-ratio + .wpmc-stage {
  position: absolute;
  inset: 0;
}