/* -------------------------------------------------------------------------
 * Base container
 * ---------------------------------------------------------------------- */

.adk-ticker{
  position: relative;
  display: block;
  margin: 0;
  overflow: hidden;
  contain: layout paint; /* OK for linear mode */
}

/* -------------------------------------------------------------------------
 * Linear mode (unchanged behavior)
 * ---------------------------------------------------------------------- */

.adk-ticker .tk-track{
  display: flex;
  align-items: center;
  will-change: transform;
  animation: tk-slide var(--dur,20s) linear infinite;
  backface-visibility: hidden;
  transform: translate3d(0,0,0);
}

@keyframes tk-slide{
  from{ transform: translate3d(var(--from,0px),0,0); }
  to  { transform: translate3d(var(--to,0px),0,0); }
}

.adk-ticker .tk-inner{
  display: inline-flex;
  gap: var(--gap,48px);
  padding-inline-end: var(--gap,48px);
  flex: 0 0 auto;
}

.adk-ticker .tk-item{
  white-space: nowrap;
  line-height: 1.2;
  color: var(--color,#fff);
  background: var(--bg,transparent);
  padding: var(--pad,0px);
  border-radius: var(--radius,0px);
}

/* Pause on hover (linear) */
.adk-ticker[data-pause="1"]:hover .tk-track{
  animation-play-state: paused;
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  .adk-ticker .tk-track{
    animation: none;
    transform: none !important;
  }
}

/* -------------------------------------------------------------------------
 * CIRCLE MODE — CRITICAL FIXES + NEW AUTO FONT SIZE
 * ---------------------------------------------------------------------- */

/**
 * IMPORTANT:
 * - No overflow clipping
 * - No contain: paint (SVG + rotation gets clipped otherwise)
 */
.adk-ticker[data-mode="circle"]{
  overflow: visible !important;
  contain: layout !important; /* remove paint to avoid clipping */
  padding: 16px; /* safe area so text never touches edges */
}

/* Track must never clip children */
.adk-ticker[data-mode="circle"] .tk-track{
  overflow: visible !important;
  animation: none;
  transform: none;
  display: block;
  width: calc(var(--tk-r,220px) * 2);
  height: calc(var(--tk-r,220px) * 2);
  margin-inline: auto;
}

/* SVG wrapper */
.adk-ticker[data-mode="circle"] .tk-circle{
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}

/* Rotating group */
.adk-ticker[data-mode="circle"] .tk-circle-rot{
  transform-origin: 50% 50%;
  animation: tk-rotate var(--dur,14s) linear infinite;
  will-change: transform;
}

@keyframes tk-rotate{
  from{ transform: rotate(0deg); }
  to  { transform: rotate(calc(360deg * var(--tk-rot-dir, 1))); }
}

/* Pause rotation on hover */
.adk-ticker[data-mode="circle"][data-pause="1"]:hover .tk-circle-rot{
  animation-play-state: paused;
}

/* Text styling (SVG textPath) */
.adk-ticker[data-mode="circle"] .tk-circle-text{
  fill: var(--color,#fff);
  dominant-baseline: middle;
  text-rendering: geometricPrecision;
  font-size: var(--tk-fs, inherit); /* NEW: auto font-size hook */
}

/* -------------------------------------------------------------------------
 * Elementor overflow safety (IMPORTANT)
 * ---------------------------------------------------------------------- */

/**
 * Elementor containers often apply overflow:hidden.
 * Best practice: wrap the widget in a container with class "adk-circle-wrap".
 */
.adk-circle-wrap{
  overflow: visible !important;
}

/**
 * Fallback for modern browsers (optional but useful).
 * If you prefer safety over compatibility, you can remove this block.
 */
.elementor-widget-container:has(.adk-ticker[data-mode="circle"]),
.elementor-column:has(.adk-ticker[data-mode="circle"]),
.e-con:has(.adk-ticker[data-mode="circle"]),
.e-con-inner:has(.adk-ticker[data-mode="circle"]){
  overflow: visible !important;
}