/* Fund Concierge — centered overlay circle popup (NO DIVI) */

#dmCircleOverlay{
  position: fixed;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 999999;
  background: rgba(0,0,0,.0);    /* desktop: transparent */
  pointer-events: none;          /* ★ hidden state must not block clicks */
}

#dmCircleOverlay.is-visible,
#dmCircleOverlay.dm-visible{
  display: flex;
  pointer-events: auto;          /* ★ re-enable when visible */
}

/* Ensure dm-hidden truly hides + stops blocking */
#dmCircleOverlay.dm-hidden{
  display: none !important;
  pointer-events: none !important;
}

.dm-close{
  position: fixed;
  top: 14px;
  right: 14px;
  width: 44px;
  height: 44px;
  border-radius: 999px;
  border: 0;
  background: rgba(0,0,0,.55);
  color: #fff;
  font-size: 26px;
  line-height: 44px;
  cursor: pointer;
  z-index: 1000000;
}

#dmCircle{
  /* DESKTOP sizes */
  --dm-wrap: 640px;
  --dm-radius: 260px;
  --dm-icon: 92px;
  --dm-center: 120px;

  position: relative;
  width: var(--dm-wrap);
  height: var(--dm-wrap);
  margin: 0;
}

/* center lion */
#dmCircle .dm-center{
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%);
  background:transparent;
  border:0;
  padding:0;
  cursor:pointer;
  z-index:10;
  line-height:0;
}
#dmCircle .dm-center img{
  width: var(--dm-center);
  height:auto;
  display:block;
}

/* icons */
#dmCircle .dm-icon{
  position:absolute;
  top:50%;
  left:50%;
  width: var(--dm-icon);
  height: var(--dm-icon);
  text-decoration: none;

  opacity:0;
  pointer-events:none;
  transform: translate(-50%,-50%) scale(0.2);
  transition: opacity .28s ease, transform .28s ease;
}
#dmCircle .dm-icon img{
  width:100%;
  height:100%;
  object-fit: cover;
  display:block;
  border-radius: 50%;
  background: #fed20f;
  mix-blend-mode: multiply;
}

/* label under each icon */
#dmCircle .dm-label{
  display:block;
  margin-top: 6px;
  text-align:center;
  font-size: 12px;
  line-height: 1.1;
  color: #e0001b;
  max-width: 120px;
  transform: translateX(-14px);
}

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

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

/* ==========================================================
   PER-ICON SIZE — DESKTOP ONLY
   ========================================================== */
@media (min-width: 769px){
  #dmCircle .i1  { width: 105px; height: 105px; }
  #dmCircle .i2  { width: 105px; height: 105px; }
  #dmCircle .i3  { width: 105px; height: 105px; }
  #dmCircle .i4  { width: 105px; height: 105px; }
  #dmCircle .i5  { width: 92px; height: 92px; }
  #dmCircle .i6  { width: 105px; height: 105px; }
  #dmCircle .i7  { width: 92px; height: 92px; }
  #dmCircle .i8  { width: 100px; height: 100px; }
  #dmCircle .i9  { width: 92px; height: 92px; }
  #dmCircle .i10 { width: 92px; height: 92px; }
  #dmCircle .i11 { width: 92px; height: 92px; }
  #dmCircle .i12 { width: 92px; height: 92px; }
}


/* ==========================================================
   MOBILE — CIRCLE WIDGET
   ========================================================== */
@media (max-width: 768px){
  #dmCircle{
    --dm-wrap: 340px;
    --dm-radius: 135px;
    --dm-icon: 58px;
    --dm-center: 80px;
  }
  #dmCircle .i1, #dmCircle .i2, #dmCircle .i3,
  #dmCircle .i4, #dmCircle .i5, #dmCircle .i6,
  #dmCircle .i7, #dmCircle .i8, #dmCircle .i9,
  #dmCircle .i10, #dmCircle .i11, #dmCircle .i12 {
    width: var(--dm-icon) !important;
    height: var(--dm-icon) !important;
  }
  #dmCircle .dm-label{
    font-size: 9px;
    max-width: 68px;
    transform: translateX(-5px);
    font-weight: 700;
  }
}

@media (max-width: 380px){
  #dmCircle{
    --dm-wrap: 300px;
    --dm-radius: 115px;
    --dm-icon: 48px;
    --dm-center: 68px;
  }
  #dmCircle .dm-label{
    font-size: 8px;
    max-width: 58px;
  }
}


/* ==========================================================
   MOBILE — ALL DAM FORM MODALS (RESPONSIVE)
   Forces every form modal to fit within the mobile viewport.
   Top visible. Bottom visible. Scrollable inside.
   ========================================================== */
@media (max-width: 768px){

  /* ── Modal overlays: fill screen, allow scroll ── */
  [id^="dam-"][style*="position"],
  [class*="dam-modal"],
  [class*="dam-overlay"],
  [class*="dam-popup"] {
    position: fixed !important;
    inset: 0 !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100% !important;
    max-width: 100vw !important;
    height: 100% !important;
    max-height: 100vh !important;
    max-height: 100dvh !important;   /* dynamic viewport for iOS Safari */
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    transform: none !important;
  }

  /* ── Inner form containers: fit viewport, scroll ── */
  [id^="dam-"] form,
  [id^="dam-"] [class*="form"],
  [id^="dam-"] [class*="inner"],
  [id^="dam-"] [class*="content"],
  [id^="dam-"] [class*="wrapper"],
  [id^="dam-"] [class*="body"],
  [class*="dam-modal"] form,
  [class*="dam-modal"] [class*="form"],
  [class*="dam-modal"] [class*="inner"],
  [class*="dam-modal"] [class*="content"],
  [class*="dam-modal"] [class*="wrapper"],
  [class*="dam-modal"] [class*="body"],
  [class*="dam-form"] {
    width: 100% !important;
    max-width: 100% !important;
    max-height: 100vh !important;
    max-height: 100dvh !important;
    height: auto !important;
    min-height: 0 !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    -webkit-overflow-scrolling: touch !important;
    box-sizing: border-box !important;
    padding: 16px !important;
    margin: 0 auto !important;
    transform: none !important;
  }

  /* ── Inputs: full width, proper sizing ── */
  [id^="dam-"] input[type="text"],
  [id^="dam-"] input[type="email"],
  [id^="dam-"] input[type="tel"],
  [id^="dam-"] input[type="number"],
  [id^="dam-"] input[type="url"],
  [id^="dam-"] input[type="date"],
  [id^="dam-"] textarea,
  [id^="dam-"] select,
  [class*="dam-modal"] input[type="text"],
  [class*="dam-modal"] input[type="email"],
  [class*="dam-modal"] input[type="tel"],
  [class*="dam-modal"] input[type="number"],
  [class*="dam-modal"] textarea,
  [class*="dam-modal"] select,
  [class*="dam-form"] input[type="text"],
  [class*="dam-form"] input[type="email"],
  [class*="dam-form"] input[type="tel"],
  [class*="dam-form"] textarea,
  [class*="dam-form"] select {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    font-size: 16px !important;           /* prevents iOS zoom on focus */
  }

  /* ── Submit buttons: full width, easy to tap ── */
  [id^="dam-"] button[type="submit"],
  [id^="dam-"] input[type="submit"],
  [class*="dam-modal"] button[type="submit"],
  [class*="dam-modal"] input[type="submit"],
  [class*="dam-form"] button[type="submit"],
  [class*="dam-form"] input[type="submit"] {
    width: 100% !important;
    min-height: 48px !important;
    font-size: 16px !important;
    box-sizing: border-box !important;
  }

  /* ── Close buttons: always visible, not cut off ── */
  [id^="dam-"] [class*="close"],
  [id^="dam-"] [class*="Close"],
  [class*="dam-modal"] [class*="close"],
  [class*="dam-modal"] [class*="Close"] {
    position: fixed !important;
    top: 10px !important;
    right: 10px !important;
    z-index: 1000001 !important;
  }

  /* ── Prevent fixed-height elements from pushing content off-screen ── */
  [id^="dam-"] h1, [id^="dam-"] h2, [id^="dam-"] h3,
  [id^="dam-"] img:not([class*="logo"]) {
    max-width: 100% !important;
    height: auto !important;
  }

  /* ── Two-column form layouts → single column ── */
  [id^="dam-"] [class*="row"],
  [id^="dam-"] [class*="columns"],
  [id^="dam-"] [class*="grid"],
  [id^="dam-"] [class*="col-"],
  [class*="dam-modal"] [class*="row"],
  [class*="dam-modal"] [class*="grid"],
  [class*="dam-modal"] [class*="col-"] {
    display: block !important;
    width: 100% !important;
    float: none !important;
    flex-direction: column !important;
  }
}