/* ==========================================================
   Fund Concierge — SAFE CSS (Android + iOS + Divi + WP Rocket)
   - Overlay covers viewport BUT is click-through (pointer-events:none)
   - Only the widget is clickable
   - No fixed+transform centering on the overlay (prevents mobile hit-test bugs)
   ========================================================== */

:root{
  --dm-yellow: #fed20f;
  --dm-label-red: #e0001b;
}

/* ==========================================================
   OVERLAY (FULLSCREEN but CLICK-THROUGH)
   This does NOT block the page because pointer-events:none.
   ========================================================== */
#dmCircleOverlay{
  position: fixed;
  inset: 0;
  z-index: 900;
  background: transparent;

  pointer-events: none;

  opacity: 0;
  visibility: hidden;
  transition: opacity .18s ease, visibility 0s linear .18s;

  -webkit-tap-highlight-color: transparent;
}

/* visible */
#dmCircleOverlay.dm-visible{
  opacity: 1;
  visibility: visible;
  transition: opacity .18s ease;
}

/* hidden */
#dmCircleOverlay.dm-hidden{
  opacity: 0;
  visibility: hidden;
  transition: opacity .18s ease, visibility 0s linear .18s;
}

/* ==========================================================
   WIDGET WRAPPER (positioned box)
   This is the ONLY interactive area.
   ========================================================== */
#dmCircle{
  --dm-wrap: min(640px, 92vw);
  --dm-radius: 260px;
  --dm-icon: 92px;
  --dm-center: 120px;

  position: fixed;

  /* safer centering: no transform on the fixed overlay */
  left: 50%;
  top: clamp(140px, 22vh, 320px);
  transform: translateX(-50%);

  width: var(--dm-wrap);
  height: var(--dm-wrap);

  pointer-events: auto;
}

/* ==========================================================
   LION BUTTON
   ========================================================== */
#dmCircle .dm-center{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);

  background: transparent;
  border: 0;
  padding: 0;
  margin: 0;

  cursor: pointer;
  line-height: 0;
  z-index: 3;

  pointer-events: auto;
}

#dmCircle .dm-center img{
  width: var(--dm-center);
  height: auto;
  display: block;

  /* ensure button gets the click */
  pointer-events: none;
}

/* Bright yellow flash */
@keyframes dm-lion-flash{
  0%   { filter: drop-shadow(0 0 0 rgba(254,210,15,0)); transform: scale(1); }
  6%   { filter: drop-shadow(0 0 16px rgba(254,210,15,1)); transform: scale(1.07); }
  12%  { filter: drop-shadow(0 0 0 rgba(254,210,15,0)); transform: scale(1); }

  20%  { filter: drop-shadow(0 0 16px rgba(254,210,15,1)); transform: scale(1.07); }
  26%  { filter: drop-shadow(0 0 0 rgba(254,210,15,0)); transform: scale(1); }

  34%  { filter: drop-shadow(0 0 16px rgba(254,210,15,1)); transform: scale(1.07); }
  40%  { filter: drop-shadow(0 0 0 rgba(254,210,15,0)); transform: scale(1); }

  100% { filter: drop-shadow(0 0 0 rgba(254,210,15,0)); transform: scale(1); }
}

#dmCircleOverlay.dm-visible #dmCircle:not(.is-open) .dm-center img{
  animation: dm-lion-flash 6s ease-in-out infinite;
}

/* ==========================================================
   CLOSE BUTTON (X)
   ========================================================== */
#dmCircleClose{
  position: fixed;
  /* place relative to dmCircle position */
  left: 50%;
  top: clamp(140px, 22vh, 320px);
  transform: translateX(calc(-50% + (min(640px, 92vw) / 2) - 54px));
  margin-top: 10px;

  width: 44px;
  height: 44px;

  border-radius: 9999px;
  border: 0;

  background: rgba(0,0,0,0.55);
  color: #fff;

  font-size: 26px;
  line-height: 44px;
  text-align: center;

  cursor: pointer;
  z-index: 905;

  pointer-events: auto;
}

/* ==========================================================
   ICON BUTTONS
   ========================================================== */
#dmCircle .dm-icon{
  position: absolute;
  top: 50%;
  left: 50%;

  width: var(--dm-icon);
  height: var(--dm-icon);

  border-radius: 9999px;
  background: var(--dm-yellow);
  border: 3px solid rgba(255,255,255,.95);
  box-sizing: border-box;

  display: flex;
  align-items: center;
  justify-content: center;

  text-decoration: none;

  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, -50%) scale(0.2);
  transition: opacity .22s ease, transform .22s ease;

  overflow: hidden;
  line-height: 0;
  font-size: 0;
  z-index: 2;
}

#dmCircle .dm-icon img{
  width: 100%;
  height: 100%;
  display: block;

  object-fit: contain;
  transform-origin: center center;

  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  border-radius: 9999px;
}

#dmCircle .dm-icon .dm-label{
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  margin-top: 8px;

  color: var(--dm-label-red);
  font-size: 14px;
  font-weight: 700;
  text-align: center;

  pointer-events: none;
}

/* open state */
#dmCircle.is-open .dm-icon{
  opacity: 1 !important;
  pointer-events: auto !important;
  transform: var(--pos) !important;
}

/* Positions */
#dmCircle .i1  { --pos: translate(-50%,-50%) rotate(-90deg) translate(var(--dm-radius)) rotate(90deg); }
#dmCircle .i2  { --pos: translate(-50%,-50%) rotate(-60deg) translate(var(--dm-radius)) rotate(60deg); }
#dmCircle .i3  { --pos: translate(-50%,-50%) rotate(-30deg) translate(var(--dm-radius)) rotate(30deg); }
#dmCircle .i4  { --pos: translate(-50%,-50%) rotate(0deg)   translate(var(--dm-radius)) rotate(0deg); }
#dmCircle .i5  { --pos: translate(-50%,-50%) rotate(30deg)  translate(var(--dm-radius)) rotate(-30deg); }
#dmCircle .i6  { --pos: translate(-50%,-50%) rotate(60deg)  translate(var(--dm-radius)) rotate(-60deg); }
#dmCircle .i7  { --pos: translate(-50%,-50%) rotate(90deg)  translate(var(--dm-radius)) rotate(-90deg); }
#dmCircle .i8  { --pos: translate(-50%,-50%) rotate(120deg) translate(var(--dm-radius)) rotate(-120deg); }
#dmCircle .i9  { --pos: translate(-50%,-50%) rotate(150deg) translate(var(--dm-radius)) rotate(-150deg); }
#dmCircle .i10 { --pos: translate(-50%,-50%) rotate(180deg) translate(var(--dm-radius)) rotate(-180deg); }
#dmCircle .i11 { --pos: translate(-50%,-50%) rotate(210deg) translate(var(--dm-radius)) rotate(-210deg); }
#dmCircle .i12 { --pos: translate(-50%,-50%) rotate(240deg) translate(var(--dm-radius)) rotate(-240deg); }

/* MOBILE */
@media (max-width: 768px){
  #dmCircle{
    --dm-wrap: min(380px, 92vw);
    --dm-radius: 155px;
    --dm-icon: 70px;
    --dm-center: 96px;

    top: clamp(110px, 18vh, 220px);
  }

  #dmCircleClose{
    top: clamp(110px, 18vh, 220px);
    transform: translateX(calc(-50% + (min(380px, 92vw) / 2) - 54px));
  }

  #dmCircle .dm-icon .dm-label{ font-size: 12px; }
}

/* EXTRA SMALL */
@media (max-width: 420px){
  #dmCircle{
    --dm-wrap: min(320px, 92vw);
    --dm-radius: 130px;
    --dm-icon: 64px;
    --dm-center: 90px;
  }

  #dmCircleClose{
    transform: translateX(calc(-50% + (min(320px, 92vw) / 2) - 54px));
  }
}

/* PER-ICON SCALE (keep yours) */
#dmCircle .dm-icon img[src*="fund-setup-investment-2.png"]{ transform: scale(1.70); }
#dmCircle .dm-icon img[src*="legal-fund-documentation-2-1.png"]{ transform: scale(1.70); }
#dmCircle .dm-icon img[src*="directorship-independent-director-2-1.png"]{ transform: scale(1.70); }
#dmCircle .dm-icon img[src*="aifm-service-luxembourg-3.png"]{ transform: scale(1.70); }
#dmCircle .dm-icon img[src*="accounting-tax-central-administration-2.png"]{ transform: scale(1.30); }
#dmCircle .dm-icon img[src*="depositary-bank-custody-custodian-bank-luxembourg-2.png"]{ transform: scale(1.70); }
#dmCircle .dm-icon img[src*="registrar-agent-transfer-agent-1-2.png"]{ transform: scale(1.70); }
#dmCircle .dm-icon img[src*="audit-reporting-2.png"]{ transform: scale(1.50); }
#dmCircle .dm-icon img[src*="Marketing-distribution.png"]{ transform: scale(1.70); }
#dmCircle .dm-icon img[src*="Fundraise.png"]{ transform: scale(1.70); }
#dmCircle .dm-icon img[src*="Private-debt-1.png"]{ transform: scale(1.20); }
#dmCircle .dm-icon img[src*="fund-setup-concierge-2.png"]{ transform: scale(1.30); }