/* ===== Overlay ===== */
#cpg-overlay{
  position: fixed; inset: 0;
  background: rgba(0,0,0,.55);
  backdrop-filter: blur(2px);
  display: none; z-index: 999999;
}
#cpg-overlay.cpg-show{ display:block; }
.cpg-hidden{ display:none; }

/* ===== Modal ===== */
.cpg-modal{
  max-width: 520px; width: calc(100% - 32px);
  margin: 7vh auto;
  background:#fff;
  border-radius: 20px;
  box-shadow: 0 20px 70px rgba(0,0,0,.25);
  position:relative; overflow:hidden;
  animation: cpg-pop .25s ease-out;
}
@keyframes cpg-pop{
  from{ transform: translateY(8px) scale(.98); opacity:.0; }
  to  { transform: translateY(0)   scale(1);   opacity:1; }
}
.cpg-body{ padding: 28px 26px 34px; }

/* ===== Close button ===== */
.cpg-close{
  position:absolute; top:10px; right:10px;
  width:34px; height:34px; border-radius:50%;
  border:0; cursor:pointer; display:grid; place-items:center;
  background:#ffd34d; color:#222; font-size:20px; line-height:1;
  box-shadow: 0 4px 14px rgba(0,0,0,.15);
  transition: transform .12s ease, filter .2s ease;
}
.cpg-close:hover{ transform: scale(1.05); filter: brightness(1.02); }

/* ===== Header / Title ===== */
.cpg-head{ text-align:center; margin-bottom: 14px; }
.cpg-head img{
  max-width:120px; height:auto; display:block;
  margin: 0 auto 12px;
}
.cpg-title{
  font-size:22px; line-height:1.35; font-weight:800; color:#1b2737;
  text-align:center; letter-spacing:.1px;
}

/* ===== Code + Copy group ===== */
.cpg-codewrap{
  display:flex; align-items:stretch; justify-content:center;
  margin:18px auto 8px; gap:0;
  max-width: 360px;
}
.cpg-code{
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
  padding:12px 16px; min-width: 140px;
  border: 2px dashed #e0e0e0; border-right:none;
  background:#fafafa; color:#222; font-weight:800; font-size:18px;
  text-align:center; border-radius: 10px 0 0 10px;
}
.cpg-copy{
  padding: 12px 16px; border:0; cursor:pointer;
  font-weight:800; text-transform:uppercase; font-size:13px; letter-spacing:.4px;
  background:#ffd34d; color:#1b2737;
  border-radius:0 10px 10px 0;
  box-shadow: 0 6px 18px rgba(255, 211, 77, .35) inset, 0 2px 10px rgba(0,0,0,.06);
  transition: transform .08s ease, filter .2s ease, box-shadow .2s ease;
}
.cpg-copy:hover{ filter:brightness(1.03); }
.cpg-copy:active{ transform: translateY(1px); }

/* little helper text under code */
.cpg-note{
  text-align:center; font-size:12px; color:#6b7280;
  margin-top:6px;
}

/* ===== CTA ===== */
.cpg-cta{
  display:flex; justify-content:center; align-items:center;
  gap:12px; margin-top:14px;
}
.cpg-gostore{
  display:inline-block; padding:12px 26px; border-radius:10px;
  background:#1b2737; color:#fff; text-decoration:none; font-weight:700;
  box-shadow: 0 8px 22px rgba(27,39,55,.25);
  transition: transform .08s ease, filter .2s ease;
}
.cpg-gostore:hover{ filter:brightness(1.05); }
.cpg-gostore:active{ transform: translateY(1px); }

.cpg-more{ opacity:.7; font-size:13px; }

/* ===== Copies counter ===== */
.cpg-copies{
  position:absolute; right:14px; bottom:12px;
  font-size:12px; color:#6b7280;
  background:#f3f4f6; padding:6px 10px; border-radius:8px;
  box-shadow: 0 2px 8px rgba(0,0,0,.06);
}
#cpg-copies-num{ font-weight:800; color:#111827; }

/* ===== Divider & footer (optional) ===== */
.cpg-divider{
  height:1px; background: linear-gradient(90deg, transparent, #eee, transparent);
  margin:18px 0 12px;
}
.cpg-footer{
  text-align:center; font-size:12px; color:#6b7280;
}
.cpg-footer a{ color:#111827; font-weight:700; text-decoration:none; }
.cpg-footer a:hover{ text-decoration:underline; }

/* ===== Responsive tweaks ===== */
@media (max-width: 420px){
  .cpg-modal{ border-radius: 16px; }
  .cpg-body{ padding:22px 18px 26px; }
  .cpg-title{ font-size:18px; }
  .cpg-code{ font-size:16px; min-width:120px; }
  .cpg-copy{ font-size:12px; padding:10px 14px; }
  .cpg-gostore{ padding:10px 18px; }
}
a.cpg-gostore {
    color: white !important;
}


/* Popup body min height so it doesn't look empty while loading */
#cpg-overlay .cpg-body { min-height: 280px; }

/* Skeleton + shimmer */
.cpg-skel { margin-top: 12px; }
.cpg-skel-line {
  height: 14px; margin: 10px 0; border-radius: 8px;
  background: linear-gradient(90deg, #eee 25%, #f6f6f6 37%, #eee 63%);
  background-size: 400% 100%;
  animation: cpg-shimmer 1.2s ease-in-out infinite;
}
.cpg-skel-line.short { width: 60%; }
.cpg-skel-img {
  width: 96px; height: 48px; border-radius: 8px;
  background: #f1f1f1; margin-bottom: 8px;
}
@keyframes cpg-shimmer {
  0% { background-position: 100% 0; }
  100% { background-position: 0 0; }
}

/* Small spinner (centered) */
.cpg-spinner {
  width: 28px; height: 28px; border-radius: 50%;
  border: 3px solid rgba(0,0,0,.1); border-top-color: rgba(0,0,0,.35);
  margin: 16px auto 6px; animation: cpg-rotate .7s linear infinite;
}
@keyframes cpg-rotate { to { transform: rotate(360deg); } }

/* Busy state for copy button */
.cpg-btn-busy { opacity: .7; pointer-events: none; }


url(https://riskrater.wpdynamos.com/account/)



#cpg-overlay { pointer-events: none !important; }

#cpg-overlay .cpg-modal { pointer-events: auto !important; z-index: 2; }


#cpg-overlay .cpg-backdrop { 
  display: none !important;     
  pointer-events: none !important;
  background: transparent !important;
}

#cpg-overlay .cpg-skel,
#cpg-overlay .cpg-spinner { pointer-events: none !important; }