/* Shihab Sections: Stat Visual widget
   Every visual starts in its "before" state and animates when .is-in is added (on scroll). */

/* Elementor gives widget wrappers height:100%, which collapses to 0 inside a fixed-height
   flex tile and lets the visual spill out. Let the wrapper size to its content instead. */
.e-con > .elementor-widget.elementor-widget-shihab-stat-visual > .elementor-widget-container,
.e-con > .e-con-inner > .elementor-widget.elementor-widget-shihab-stat-visual > .elementor-widget-container {
  height: auto;
}

.sv {
  --sv-accent: #2F5BFF;
  --sv-accent-light: #7DA2FF;
  --sv-accent-dark: #194CF2;
  --sv-tint: #EAF0FF;
  --sv-tint-deep: #DCE8FF;
  --sv-ink: #0C0A3E;
  --sv-muted: #6B7280;
}

/* ---------- Rising area chart ---------- */

.sv-area {
  width: 100%;
  height: 100%;
}

.sv-area svg {
  display: block;
  width: 100%;
  height: 100%;
  filter: drop-shadow(0 0 8px rgba(47, 91, 255, .7));
}

.sv-area .ln {
  fill: none;
  stroke: var(--sv-accent-light);
  stroke-width: 3;
  stroke-linecap: round;
  stroke-dasharray: 1400;
  stroke-dashoffset: 1400;
  transition: stroke-dashoffset 2.2s cubic-bezier(.4, 0, .2, 1) .3s;
}

.sv-area .fl {
  opacity: 0;
  transition: opacity 1.2s ease 1.2s;
}

.sv-area.is-in .ln { stroke-dashoffset: 0; }
.sv-area.is-in .fl { opacity: 1; }

/* ---------- Bar chart ---------- */

.sv-bars {
  display: flex;
  align-items: flex-end;
  gap: 6px;
  height: 64px;
}

.sv-bars i {
  flex: 1;
  height: var(--h);
  border-radius: 5px 5px 0 0;
  background: var(--sv-tint-deep);
  transform: scaleY(0);
  transform-origin: bottom;
  transition: transform .7s cubic-bezier(.2, .8, .2, 1);
  transition-delay: calc(var(--n) * 55ms);
}

.sv-bars i.hi {
  background: linear-gradient(180deg, var(--sv-accent-light), var(--sv-accent));
}

.sv-bars.is-in i { transform: none; }

/* ---------- Year range bar ---------- */

.sv-yr {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  font-weight: 600;
  color: var(--sv-muted);
}

.sv-yr b {
  position: relative;
  flex: 1;
  height: 6px;
  border-radius: 6px;
  background: var(--sv-tint);
}

.sv-yr i {
  position: absolute;
  inset: 0;
  border-radius: 6px;
  background: linear-gradient(90deg, var(--sv-accent-light), var(--sv-accent));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 1.4s cubic-bezier(.4, 0, .2, 1) .2s;
}

.sv-yr.is-in i { transform: none; }

/* ---------- Percentage ring ---------- */

.sv-ring {
  width: 84px;
  height: 84px;
}

.sv-ring svg {
  display: block;
  width: 100%;
  height: 100%;
}

.sv-ring circle {
  fill: none;
  stroke-width: 9;
}

.sv-ring .bg {
  stroke: var(--sv-tint);
}

.sv-ring .fg {
  stroke-linecap: round;
  stroke-dasharray: 213.6;
  stroke-dashoffset: 213.6;
  transform: rotate(-90deg);
  transform-origin: center;
  transition: stroke-dashoffset 1.6s cubic-bezier(.4, 0, .2, 1) .2s;
}

.sv-ring.is-in .fg { stroke-dashoffset: var(--off); }

/* ---------- Avatar stack (client initials or photos) ---------- */

.sv-ppl {
  display: flex;
  align-items: center;
}

.sv-ppl span {
  position: relative;
  flex: none;
  width: 38px;
  height: 38px;
  margin-right: -10px;
  border-radius: 50%;
  border: 2px solid #fff;
  display: grid;
  place-items: center;
  overflow: hidden;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .02em;
  line-height: 1;
  color: #fff;
  box-shadow: 0 6px 14px -8px rgba(12, 10, 62, .45);
  transform: scale(0);
  transition: transform .45s cubic-bezier(.3, 1.6, .5, 1);
  transition-delay: calc(var(--n) * 70ms);
}

/* Five brand tones so neighbouring avatars never look alike */
.sv-ppl .av-0 { background: linear-gradient(145deg, #4166F1, #194CF2); }
.sv-ppl .av-1 { background: #EAF0FF; color: #194CF2; }
.sv-ppl .av-2 { background: linear-gradient(145deg, #1D1B5E, #0C0A3E); }
.sv-ppl .av-3 { background: linear-gradient(145deg, #9DB8FF, #7DA2FF); color: #0C0A3E; }
.sv-ppl .av-4 { background: #DCE8FF; color: #0C0A3E; }

.sv-ppl span img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.sv-ppl span.lbl {
  width: auto;
  height: 38px;
  margin-left: 4px;
  padding: 0 12px;
  border-radius: 999px;
  font-size: 12px;
  background: var(--sv-accent);
}

.sv-ppl.is-in span { transform: none; }
/* ---------- Stars ---------- */

.sv-stars {
  display: flex;
  gap: 4px;
}

.sv-stars svg {
  width: 24px;
  height: 24px;
  fill: var(--sv-accent);
  transform: scale(0) rotate(-30deg);
  transition: transform .45s cubic-bezier(.3, 1.6, .5, 1);
  transition-delay: calc(var(--n) * 90ms);
}

.sv-stars.is-in svg { transform: none; }

/* ---------- Seats (person icons or dots) ---------- */

/* Seats have a fixed size (--sv-dot) so tiles can always measure their height; they spread
   across the row and wrap if there is not enough room. Set --sv-dot on the widget to resize. */
.sv-seats {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 6px;
}

.sv-seats i {
  flex: none;
  width: var(--sv-dot, 22px);
  height: var(--sv-dot, 22px);
  border-radius: 50%;
  background: var(--sv-tint);
  transition: background .3s ease, box-shadow .3s ease, color .3s ease;
  transition-delay: calc(var(--n) * 60ms);
}

.sv-seats.is-in i {
  background: linear-gradient(145deg, var(--sv-accent-light), var(--sv-accent));
  box-shadow: 0 0 0 3px rgba(47, 91, 255, .12);
}

/* Person icons: one seat per client */
.sv-seats.is-people i {
  border-radius: 0;
  background: none;
  box-shadow: none;
  color: var(--sv-tint-deep);
}

.sv-seats.is-people i svg {
  display: block;
  width: 100%;
  height: 100%;
  fill: currentColor;
}

.sv-seats.is-people.is-in i {
  background: none;
  box-shadow: none;
  color: var(--sv-accent);
}

.sv-seats.is-people.is-in i:nth-child(3n + 2) { color: var(--sv-accent-dark); }
.sv-seats.is-people.is-in i:nth-child(3n) { color: #5B82FF; }
@media (max-width: 767px) {
  /* Narrow tiles: smaller avatars; the big number above already says "120+" */
  .sv-ppl span {
    width: 29px;
    height: 29px;
    margin-right: -8px;
    font-size: 10.5px;
  }

  .sv-ppl span.lbl { display: none; }

  .sv-seats { gap: 5px; }
  .sv-ring { width: 58px; height: 58px; }
}

/* ---------- Reduced motion: show final state ---------- */

@media (prefers-reduced-motion: reduce) {
  .sv * {
    transition: none !important;
  }
}