/* ============================================================
   Circle Categories Widget — Orbit Layout
   Version: 2.0.0 | CodeReve
   ============================================================ */

/* ── Wrapper ──────────────────────────────────────────────── */
.ccw-wrapper {
  display: flex;
  width: 100%;
  box-sizing: border-box;
}

/* ── Scene ────────────────────────────────────────────────── */
.ccw-orbit-scene {
  --ccw-radius:      220px;   /* overridden by Elementor slider */
  --ccw-center-size: 200px;
  --ccw-sat-size:    130px;

  /* Scene total size = (center) + 2*(radius) + (satellite) */
  position: relative;
  width:  calc( var(--ccw-center-size) + 2*var(--ccw-radius) + var(--ccw-sat-size) );
  height: calc( var(--ccw-center-size) + 2*var(--ccw-radius) + var(--ccw-sat-size) );
  margin: 0 auto;
  flex-shrink: 0;
}

/* ── SVG connector lines ──────────────────────────────────── */
.ccw-svg-lines {
  position: absolute;
  top:  0;
  left: 0;
  width:  100%;
  height: 100%;
  pointer-events: none;
  z-index: 0;
  overflow: visible;
}

.ccw-connector {
  stroke-width: 2;
  fill: none;
}

/* ── Center circle ────────────────────────────────────────── */
.ccw-center-circle {
  position: absolute;
  top:  50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width:  var(--ccw-center-size);
  height: var(--ccw-center-size);
  border-radius: 50%;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 4px solid #ffffff;
  background-color: #1a1a2e;
  background-size: cover;
  background-position: center;
  text-decoration: none;
  z-index: 5;
  box-sizing: border-box;
  cursor: pointer;
}

.ccw-center-text {
  position: relative;
  z-index: 2;
  color: #fff;
  font-weight: 700;
  font-size: 15px;
  text-align: center;
  padding: 0 12px;
  text-shadow: 0 1px 6px rgba(0,0,0,0.7);
  word-break: break-word;
}

/* ── Satellite wrapper ────────────────────────────────────── */
/*
  Each satellite is positioned on a circle of radius --ccw-radius
  around the scene center. We use CSS custom property --ccw-angle
  set per-item from PHP.
  Formula:
    left = 50% + radius * cos(angle) - sat-size/2
    top  = 50% + radius * sin(angle) - sat-size/2
*/
.ccw-sat-wrap {
  position: absolute;
  /*
    We calculate using trigonometry via a small trick:
    translate the anchor point to center, then offset by radius in
    a rotated direction using rotate + translate, then rotate back.
  */
  top:  50%;
  left: 50%;
  width:  var(--ccw-sat-size);
  height: var(--ccw-sat-size);
  /* Push to orbit position */
  transform:
    rotate( var(--ccw-angle) )
    translateX( var(--ccw-radius) )
    rotate( calc( -1 * var(--ccw-angle) ) )
    translate(-50%, -50%);
  z-index: 4;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* ── Satellite circle ─────────────────────────────────────── */
.ccw-circle {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width:  var(--ccw-sat-size);
  height: var(--ccw-sat-size);
  min-width: var(--ccw-sat-size);
  border-radius: 50%;
  overflow: hidden;
  text-decoration: none;
  cursor: pointer;
  border: 3px solid #ffffff;
  background-color: #2d6a4f;
  background-size: cover;
  background-position: center;
  box-sizing: border-box;
  flex-shrink: 0;
}

/* ── Overlay ──────────────────────────────────────────────── */
.ccw-overlay {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  pointer-events: none;
  z-index: 1;
}

/* ── Icon ─────────────────────────────────────────────────── */
.ccw-icon {
  position: relative;
  z-index: 2;
  display: block;
  font-size: 1.5em;
  color: #fff;
  margin-bottom: 3px;
}

/* ── Label inside circle ──────────────────────────────────── */
.ccw-label {
  position: relative;
  z-index: 2;
  display: block;
  text-align: center;
  font-weight: 700;
  font-size: 12px;
  color: #ffffff;
  padding: 0 8px;
  line-height: 1.3;
  word-break: break-word;
  text-shadow: 0 1px 4px rgba(0,0,0,0.7);
}

/* ── Label below circle ───────────────────────────────────── */
.ccw-label-below {
  display: block;
  text-align: center;
  font-weight: 600;
  font-size: 13px;
  color: #333;
  margin-top: 8px;
  line-height: 1.3;
  max-width: calc( var(--ccw-sat-size) + 20px );
}


/* ============================================================
   RESPONSIVE — Tablet ≤ 1024px
   ============================================================ */
@media (max-width: 1024px) {
  .ccw-orbit-scene {
    --ccw-radius:      170px;
    --ccw-center-size: 160px;
    --ccw-sat-size:    110px;
  }
}

/* ============================================================
   RESPONSIVE — Mobile ≤ 767px
   Stacked: center logo on top, satellites in 2-column grid
   ============================================================ */
@media (max-width: 767px) {
  .ccw-wrapper {
    overflow: visible;
  }

  .ccw-orbit-scene {
    position: static !important;
    width: 100% !important;
    height: auto !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 24px !important;
    transform: none !important;
    margin: 0 !important;
  }

  .ccw-svg-lines {
    display: none !important;
  }

  /* Center logo circle */
  .ccw-center-circle {
    position: static !important;
    transform: none !important;
    width: 150px !important;
    height: 150px !important;
    flex-shrink: 0 !important;
  }

  .ccw-center-circle:hover {
    transform: scale(1.05) !important;
  }

  /* Satellites container: 2-column grid */
  .ccw-sat-wrap {
    display: none; /* hidden until JS wraps them */
  }

  .ccw-mobile-sat-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    width: 100%;
    padding: 0 8px;
    box-sizing: border-box;
  }

  .ccw-mobile-sat-grid .ccw-sat-wrap {
    display: flex !important;
    position: static !important;
    transform: none !important;
    width: auto !important;
    height: auto !important;
    flex-direction: column;
    align-items: center;
  }

  .ccw-mobile-sat-grid .ccw-circle {
    width: 130px !important;
    height: 130px !important;
    min-width: 0 !important;
  }

  .ccw-label {
    font-size: 12px;
  }

  .ccw-label-below {
    font-size: 13px;
  }
}

@media (max-width: 480px) {
  .ccw-center-circle {
    width: 120px !important;
    height: 120px !important;
  }

  .ccw-mobile-sat-grid {
    gap: 12px;
  }

  .ccw-mobile-sat-grid .ccw-circle {
    width: 110px !important;
    height: 110px !important;
  }

  .ccw-label {
    font-size: 11px;
  }
}

@media (max-width: 380px) {
  .ccw-mobile-sat-grid .ccw-circle {
    width: 90px !important;
    height: 90px !important;
  }

  .ccw-label {
    font-size: 9px;
  }
}

/* ============================================================
   Elementor editor helpers
   ============================================================ */
.elementor-editor-active .ccw-circle,
.elementor-editor-active .ccw-center-circle {
  cursor: default;
}