.eael-circle-wrapper.sd-interactive-circle-preset-dots {
  display: flex;
  justify-content: center;
  align-items: center;
}

.eael-circle-wrapper.sd-interactive-circle-preset-dots .sd-ic-dots__ring {
  position: relative;
  --sd-ic-effective-size: var(--sd-ic-size, 560px);
  width: var(--sd-ic-effective-size);
  height: var(--sd-ic-effective-size);
  border-radius: 50%;
}

.eael-circle-wrapper.sd-interactive-circle-preset-dots .sd-ic-dots__ring::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: var(--sd-ic-ring-width, 2px) dashed var(--sd-ic-ring-color, rgba(0, 90, 160, 0.55));
  pointer-events: none;
}

.eael-circle-wrapper.sd-interactive-circle-preset-dots .sd-ic-dots__center {
  position: absolute;
  inset: var(--sd-ic-center-inset, 14%);
  border-radius: 50%;
  background: var(--sd-ic-center-bg, #ffffff);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 28px;
  text-align: center;
  z-index: 2;
}

.eael-circle-wrapper.sd-interactive-circle-preset-dots .eael-circle-btn-content {
  position: absolute;
  inset: 0;
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px) scale(0.985);
  transition: opacity 260ms ease, visibility 260ms ease, transform 260ms ease;
  display: flex;
  align-items: center;
  justify-content: center;
}

.eael-circle-wrapper.sd-interactive-circle-preset-dots .eael-circle-btn-content.active {
  opacity: 1;
  visibility: visible;
  transform: translateY(0) scale(1);
}

.eael-circle-wrapper.sd-interactive-circle-preset-dots .sd-ic-dots__content {
  max-width: 520px;
}

.eael-circle-wrapper.sd-interactive-circle-preset-dots .sd-ic-dots__items {
  position: absolute;
  inset: 0;
  z-index: 3;
}

.eael-circle-wrapper.sd-interactive-circle-preset-dots .sd-ic-dots__item {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
}

.eael-circle-wrapper.sd-interactive-circle-preset-dots .sd-ic-dots__item {
  --sd-ic-dot-radius: calc((var(--sd-ic-effective-size) * 0.5) - (var(--sd-ic-ring-width, 2px) * 0.5));
  --sd-ic-label-offset: var(--sd-ic-label-offset, 120px);
  --sd-ic-label-x: 0px;
  --sd-ic-label-y: 0px;
  --sd-ic-label-align: center;
  --sd-ic-dot-outer: calc(var(--sd-ic-dot-size, 14px) + (var(--sd-ic-dot-halo, 12px) * 2));
}

.eael-circle-wrapper.sd-interactive-circle-preset-dots .eael-circle-btn {
  position: absolute;
  left: 0;
  top: 0;
  width: var(--sd-ic-dot-outer);
  height: var(--sd-ic-dot-outer);
  transform: rotate(var(--sd-ic-angle)) translate(var(--sd-ic-dot-radius)) rotate(calc(var(--sd-ic-angle) * -1)) translate(-50%, -50%);
  transform-origin: center;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  outline: none;
}

.eael-circle-wrapper.sd-interactive-circle-preset-dots .eael-circle-btn a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}

.eael-circle-wrapper.sd-interactive-circle-preset-dots .sd-ic-dots__dot {
  width: 100%;
  height: 100%;
  border-radius: 999px;
  background: var(--sd-ic-dot-border, #ffffff);
  position: relative;
  box-sizing: border-box;
  display: block;
}

.eael-circle-wrapper.sd-interactive-circle-preset-dots .sd-ic-dots__dot::after {
  content: "";
  position: absolute;
  inset: var(--sd-ic-dot-halo, 12px);
  border-radius: 999px;
  background: var(--sd-ic-dot-bg, #0b63ce);
}

.eael-circle-wrapper.sd-interactive-circle-preset-dots .eael-circle-btn.active .sd-ic-dots__dot,
.eael-circle-wrapper.sd-interactive-circle-preset-dots .eael-circle-btn:hover .sd-ic-dots__dot {
  background: var(--sd-ic-dot-border-active, var(--sd-ic-dot-border, #ffffff));
}

.eael-circle-wrapper.sd-interactive-circle-preset-dots .eael-circle-btn.active .sd-ic-dots__dot::after,
.eael-circle-wrapper.sd-interactive-circle-preset-dots .eael-circle-btn:hover .sd-ic-dots__dot::after {
  background: var(--sd-ic-dot-bg-active, var(--sd-ic-dot-bg, #0b63ce));
}

.eael-circle-wrapper.sd-interactive-circle-preset-dots .sd-ic-dots__label {
  position: absolute;
  left: 0;
  top: 0;
  transform: rotate(var(--sd-ic-angle))
    translate(var(--sd-ic-dot-radius))
    rotate(calc(var(--sd-ic-angle) * -1))
    translate(-50%, -50%)
    translate(var(--sd-ic-label-x), var(--sd-ic-label-y));
  transform-origin: center;
  width: min(var(--sd-ic-label-max-width, 280px), 44vw);
  max-width: var(--sd-ic-label-max-width, 280px);
  text-align: var(--sd-ic-label-align, var(--sd-ic-label-align-default, center));
  font-weight: 700;
  color: var(--sd-ic-label-color, #0b0b0b);
  line-height: 1.2;
  white-space: normal;
  z-index: 4;
  cursor: pointer;
}

.eael-circle-wrapper.sd-interactive-circle-preset-dots .eael-circle-btn.active + .sd-ic-dots__label {
  color: var(--sd-ic-label-color-active, var(--sd-ic-label-color, #0b0b0b));
}

.eael-circle-wrapper.sd-interactive-circle-preset-dots .sd-ic-dots__mobile {
  display: none;
}

.eael-circle-wrapper.sd-interactive-circle-preset-dots .sd-ic-dots__mobile-label {
  text-align: center;
  margin-top: 18px;
}

.eael-circle-wrapper.sd-interactive-circle-preset-dots .sd-ic-dots__mobile-label.is-changing {
  opacity: 0.45;
  transform: translateY(-4px);
  transition: opacity 200ms ease, transform 200ms ease;
}

.eael-circle-wrapper.sd-interactive-circle-preset-dots .sd-ic-dots__pager {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-top: 10px;
}

.eael-circle-wrapper.sd-interactive-circle-preset-dots .sd-ic-dots__pager-btn {
  appearance: none;
  border: none;
  background: transparent;
  padding: 4px;
  cursor: pointer;
}

.eael-circle-wrapper.sd-interactive-circle-preset-dots .sd-ic-dots__pager-btn .sd-ic-dots__dot {
  transform: scale(0.75);
}

.eael-circle-wrapper.sd-interactive-circle-preset-dots .sd-ic-dots__pager-btn.is-active .sd-ic-dots__dot {
  transform: scale(0.9);
}

/* Slider mode (enabled via JS + widget setting) */
.eael-circle-wrapper.sd-interactive-circle-preset-dots.sd-ic-dots--slider .sd-ic-dots__items,
.eael-circle-wrapper.sd-interactive-circle-preset-dots.sd-ic-dots--slider .sd-ic-dots__label {
  display: none !important;
}

.eael-circle-wrapper.sd-interactive-circle-preset-dots.sd-ic-dots--slider .sd-ic-dots__mobile {
  display: block;
}

@media (max-width: 767px) {
  .eael-circle-wrapper.sd-interactive-circle-preset-dots .sd-ic-dots__ring {
    --sd-ic-effective-size: min(92vw, var(--sd-ic-size));
    width: var(--sd-ic-effective-size);
    height: var(--sd-ic-effective-size);
  }
  .eael-circle-wrapper.sd-interactive-circle-preset-dots .sd-ic-dots__label {
    width: min(var(--sd-ic-label-max-width, 220px), 54vw);
    max-width: var(--sd-ic-label-max-width, 220px);
    font-size: 14px;
  }
}