/*
 * VODA Network Stats v1.0.3
 * The approved dark-navy / lime / cyan design.
 * Strictly component-scoped to resist theme, builder, and global page styles.
 * Container queries prevent the four-stat collision in narrower YooTheme columns.
 */

.voda-stats,
.voda-stats-single {
  --voda-stats-font: "Nunito", "Arial Rounded MT Bold", "Trebuchet MS", Arial, sans-serif;
  --voda-stats-navy: #162a49;
  --voda-stats-navy-deep: #122440;
  --voda-stats-navy-soft: #1a3354;
  --voda-stats-lime: #baff8d;
  --voda-stats-cyan: #04d2e2;
  --voda-stats-white: #ffffff;
  --voda-stats-muted: #dbe6f3;
  display: block;
  color: var(--voda-stats-white) !important;
  font-family: var(--voda-stats-font) !important;
  font-weight: 600;
  font-style: normal;
  text-transform: none;
  text-decoration: none;
  line-height: 1.35;
  box-sizing: border-box;
}

/* Prevent typography rules from the WordPress theme or YooTheme leaking in. */
.voda-stats *, .voda-stats *::before, .voda-stats *::after,
.voda-stats-single *, .voda-stats-single *::before, .voda-stats-single *::after { box-sizing: border-box; }
.voda-stats :is(h2, p, div, span, small),
.voda-stats-single :is(div, span, small) {
  font-family: var(--voda-stats-font) !important;
  text-transform: none !important;
  text-shadow: none !important;
}

.voda-stats {
  container-name: voda-stats-panel;
  container-type: inline-size;
  position: relative;
  z-index: 0;
  isolation: isolate;
  width: 100%;
  max-width: 1280px;
  height: auto;
  margin: 22px auto 30px;
  padding: 56px 48px 57px;
  border: 0;
  border-radius: 22px;
  overflow: hidden;
  background: linear-gradient(112deg, var(--voda-stats-navy) 0%, var(--voda-stats-navy-deep) 57%, var(--voda-stats-navy-soft) 100%);
  box-shadow: 0 14px 28px rgba(13, 31, 55, .17), 0 4px 10px rgba(13, 31, 55, .06);
}
.voda-stats::before {
  content: "";
  position: absolute;
  inset: -90px auto auto -140px;
  width: 660px;
  height: 460px;
  background: radial-gradient(ellipse, rgba(46, 96, 145, .14), transparent 70%);
  pointer-events: none;
  z-index: -1;
}
.voda-stats__inner {
  position: relative;
  z-index: 1;
  max-width: 1190px;
  margin: 0 auto;
  padding: 0;
  text-align: center;
}

.voda-stats .voda-stats__heading {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 12px !important;
  width: 100%;
  margin: 0 0 10px !important;
  padding: 0 !important;
  border: 0 !important;
  font-family: var(--voda-stats-font) !important;
  font-size: clamp(28px, 3.6vw, 43px) !important;
  line-height: 1.13 !important;
  font-weight: 900 !important;
  letter-spacing: -.045em !important;
  color: var(--voda-stats-white) !important;
  text-align: center !important;
}
.voda-stats__brand-dots {
  position: relative;
  display: inline-block !important;
  flex: 0 0 38px;
  width: 38px;
  height: 34px;
  margin-left: 1px;
  transform: rotate(-10deg);
}
.voda-stats__brand-dots i {
  position: absolute;
  display: block;
  border-radius: 50%;
  background: var(--voda-stats-cyan);
  opacity: 1;
}
.voda-stats__brand-dots i:nth-child(1) { width: 12px; height: 12px; top: 0; left: 0; }
.voda-stats__brand-dots i:nth-child(2) { width: 12px; height: 12px; top: 17px; left: 12px; }
.voda-stats__brand-dots i:nth-child(3) { width: 12px; height: 12px; top: 0; right: 0; }

.voda-stats .voda-stats__subtitle {
  display: block;
  max-width: 900px;
  margin: 0 auto 32px !important;
  padding: 0 !important;
  color: var(--voda-stats-white) !important;
  font-family: var(--voda-stats-font) !important;
  font-size: clamp(13px, 1.35vw, 16px) !important;
  line-height: 1.5 !important;
  letter-spacing: -.005em !important;
  font-weight: 650 !important;
  text-align: center !important;
}

.voda-stats__grid {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  width: 100%;
  max-width: 1180px;
  margin: 0 auto !important;
  padding: 0 !important;
  gap: 0 !important;
  align-items: center;
}
.voda-stats .voda-stats__metric {
  position: relative;
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 13px !important;
  min-width: 0;
  width: 100%;
  min-height: 83px;
  margin: 0 !important;
  padding: 7px 12px !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}
.voda-stats .voda-stats__metric:not(:last-child)::after {
  content: "";
  position: absolute;
  right: 0;
  top: 13%;
  bottom: 13%;
  width: 1.5px;
  background: var(--voda-stats-cyan);
  opacity: .88;
  pointer-events: none;
}
.voda-stats .voda-stats__icon,
.voda-stats-single .voda-stats__icon {
  display: inline-flex !important;
  flex: 0 0 56px !important;
  align-items: center !important;
  justify-content: center !important;
  width: 56px !important;
  height: 56px !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 50% !important;
  background: rgba(214, 231, 254, .16) !important;
  color: var(--voda-stats-white) !important;
  vertical-align: middle;
  transform: none !important;
}
.voda-stats .voda-stats__icon svg,
.voda-stats-single .voda-stats__icon svg {
  display: block !important;
  flex: 0 0 29px;
  width: 29px !important;
  height: 29px !important;
  min-width: 29px !important;
  overflow: visible;
  stroke: currentColor;
  fill: none;
}
.voda-stats .voda-stats__google-g,
.voda-stats-single .voda-stats__google-g {
  font-family: Arial, Helvetica, sans-serif !important;
  font-size: 35px !important;
  line-height: 1 !important;
  font-weight: 800 !important;
  color: var(--voda-stats-white) !important;
}
.voda-stats .voda-stats__metric-copy,
.voda-stats-single .voda-stats__metric-copy {
  display: flex;
  flex: 0 1 auto;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  width: max-content;
  min-width: 0;
  margin: 0 !important;
  padding: 0 !important;
  text-align: left !important;
}
.voda-stats .voda-stats__number,
.voda-stats-single .voda-stats__number {
  display: inline-flex !important;
  flex-wrap: nowrap !important;
  align-items: baseline !important;
  justify-content: flex-start !important;
  width: max-content;
  max-width: none;
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
  background: transparent !important;
  color: var(--voda-stats-lime) !important;
  font-family: var(--voda-stats-font) !important;
  font-size: 48px !important;
  line-height: 1.08 !important;
  font-weight: 900 !important;
  font-variant-numeric: lining-nums tabular-nums;
  letter-spacing: -.052em !important;
  white-space: nowrap !important;
  word-break: normal !important;
  overflow-wrap: normal !important;
}
.voda-stats .voda-stats__number :is(.voda-stats__prefix, .voda-stats__value, .voda-stats__suffix),
.voda-stats-single .voda-stats__number :is(.voda-stats__prefix, .voda-stats__value, .voda-stats__suffix) {
  display: inline !important;
  flex: 0 0 auto;
  margin: 0 !important;
  padding: 0 !important;
  color: var(--voda-stats-lime) !important;
  font-family: inherit !important;
  font-size: inherit !important;
  font-weight: inherit !important;
  line-height: inherit !important;
  letter-spacing: inherit !important;
  white-space: nowrap !important;
  text-decoration: none !important;
}
.voda-stats .voda-stats__label,
.voda-stats-single .voda-stats__label {
  display: block !important;
  width: auto;
  max-width: 100%;
  margin: 2px 0 0 !important;
  padding: 0 !important;
  color: var(--voda-stats-white) !important;
  font-family: var(--voda-stats-font) !important;
  font-size: 14px !important;
  line-height: 1.28 !important;
  font-weight: 850 !important;
  letter-spacing: -.025em !important;
  white-space: normal;
  text-align: left !important;
}
.voda-stats .voda-stats__footnote {
  display: block;
  max-width: 1050px;
  margin: 26px auto 0 !important;
  padding: 0 !important;
  color: var(--voda-stats-muted) !important;
  font-family: var(--voda-stats-font) !important;
  font-size: 11px !important;
  line-height: 1.5 !important;
  font-style: italic !important;
  font-weight: 600 !important;
  letter-spacing: 0 !important;
  text-align: center !important;
}

/* The standalone shortcodes are intentionally self-contained mini-cards. */
.voda-stats-single {
  display: inline-flex;
  align-items: flex-start;
  width: auto;
  max-width: 100%;
  min-width: 285px;
  margin: 0;
  padding: 26px 30px;
  border-radius: 20px;
  background: linear-gradient(112deg, var(--voda-stats-navy), var(--voda-stats-navy-deep));
  box-shadow: 0 14px 27px rgba(13, 31, 55, .15);
}
.voda-stats-single .voda-stats__metric {
  display: flex !important;
  align-items: center !important;
  gap: 14px !important;
  width: 100%;
  padding: 0 !important;
  border: 0 !important;
}
.voda-stats-single .voda-stats__number { font-size: 38px !important; }
.voda-stats-single .voda-stats__label { font-size: 13px !important; }
.voda-stats-single .voda-stats-single__note {
  display: block;
  margin-top: 14px;
  color: var(--voda-stats-muted) !important;
  font-family: var(--voda-stats-font) !important;
  font-size: 10px !important;
  font-style: italic;
  line-height: 1.5;
}
.voda-stats-unavailable {
  padding: 12px 16px;
  color: #142745;
  background: #f1f7fc;
  border: 1px solid #b8ceda;
}

/* Component-aware adjustments. These work even when the browser is wide but
   the shortcode is placed in a narrow page/content column. */
@container voda-stats-panel (max-width: 1050px) {
  .voda-stats .voda-stats__grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .voda-stats .voda-stats__metric { min-height: 103px; padding: 16px 18px !important; }
  .voda-stats .voda-stats__metric:nth-child(2)::after { display: none; }
  .voda-stats .voda-stats__metric:nth-child(n+3)::before {
    content: "";
    position: absolute;
    top: 0;
    left: 8%;
    right: 8%;
    height: 1px;
    background: rgba(4, 210, 226, .33);
  }
  .voda-stats .voda-stats__number { font-size: 43px !important; }
  .voda-stats .voda-stats__label { font-size: 13px !important; }
}
@container voda-stats-panel (max-width: 590px) {
  .voda-stats .voda-stats__heading { font-size: 29px !important; gap: 7px !important; }
  .voda-stats .voda-stats__brand-dots { transform: rotate(-10deg) scale(.74); transform-origin: left center; flex-basis: 29px; }
  .voda-stats .voda-stats__subtitle { font-size: 13px !important; margin-bottom: 24px !important; }
  .voda-stats .voda-stats__metric { flex-direction: column !important; gap: 9px !important; min-height: 156px; padding: 14px 6px !important; }
  .voda-stats .voda-stats__metric-copy { align-items: center; width: 100%; }
  .voda-stats .voda-stats__number { font-size: clamp(26px, 7vw, 39px) !important; justify-content: center !important; }
  .voda-stats .voda-stats__label { text-align: center !important; font-size: 12px !important; margin-top: 6px !important; }
  .voda-stats .voda-stats__icon { flex-basis: 48px !important; width: 48px !important; height: 48px !important; }
  .voda-stats .voda-stats__icon svg { width: 25px !important; height: 25px !important; min-width: 25px !important; }
  .voda-stats .voda-stats__google-g { font-size: 31px !important; }
  .voda-stats .voda-stats__footnote { font-size: 10px !important; margin-top: 21px !important; }
}
@container voda-stats-panel (max-width: 230px) {
  .voda-stats .voda-stats__grid { grid-template-columns: minmax(0, 1fr) !important; }
  .voda-stats .voda-stats__metric::after { display: none !important; }
  .voda-stats .voda-stats__metric:not(:first-child)::before { content: ""; position: absolute; top: 0; left: 12%; right: 12%; height: 1px; background: rgba(4,210,226,.35); }
}

/* Fallbacks for older browsers lacking CSS container queries. */
@supports not (container-type: inline-size) {
  @media (max-width: 1100px) {
    .voda-stats .voda-stats__grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
    .voda-stats .voda-stats__metric:nth-child(2)::after { display: none; }
    .voda-stats .voda-stats__metric:nth-child(n+3) { border-top: 1px solid rgba(4, 210, 226, .35) !important; }
  }
  @media (max-width: 500px) {
    .voda-stats .voda-stats__metric { flex-direction: column !important; }
    .voda-stats .voda-stats__metric-copy { align-items: center; }
    .voda-stats .voda-stats__label { text-align: center !important; }
  }
}

@media (max-width: 760px) {
  .voda-stats { margin: 15px auto 22px; padding: 43px 23px 44px; border-radius: 19px; }
}
@media (max-width: 480px) {
  .voda-stats { padding: 36px 16px 37px; border-radius: 17px; }
  .voda-stats .voda-stats__heading { font-size: 26px !important; }
}
@media (prefers-reduced-motion: reduce) {
  .voda-stats, .voda-stats-single { scroll-behavior: auto; }
}