/* ==========================================================================
   Smile Stats — Elementor widget additions
   smile-stats.css is an unchanged copy of the original; this file only adds
   what the widget needs on top of it. Scoped to [data-ss-widget].
   ========================================================================== */

/* Desktop: any number of statistics around the tooth. The widget assigns
   each one a row (--ss-row) in the left or right column; the tooth spans all
   rows (--ss-rows, 2 for the original four). The corner classes (tl/bl/tr/br)
   keep their original columns and spacing. */
@media (min-width: 1024px) {
  .smile-stats[data-ss-widget] .smile-stat {
    grid-row: var(--ss-row, auto);
  }

  .smile-stats[data-ss-widget] .smile-stats__tooth {
    grid-row: 1 / span var(--ss-rows, 2);
  }
}

/* Optional text before the number (same treatment as the suffix) */
.smile-stats[data-ss-widget] .smile-stat__prefix {
  margin-right: 0.04em;
  font-weight: 600;
}

/* Custom icons inside the disc: library icons are filled shapes, images keep
   their proportions (and escape Elementor's global .elementor img reset). */
.smile-stats[data-ss-widget] .smile-stat__icon-disc--custom .e-font-icon-svg {
  fill: currentColor;
  stroke: none;
}

.smile-stats[data-ss-widget] .smile-stat__icon-disc--custom i {
  font-size: calc(var(--ss-icon) * 0.4);
  line-height: 1;
}

.smile-stats[data-ss-widget] .smile-stat__icon-disc img {
  width: 46%;
  height: 46%;
  max-width: none;
  object-fit: contain;
  border-radius: 0;
}

/* Editor-only empty state */
.smile-stats-empty {
  padding: 48px 24px;
  border: 2px dashed rgba(11, 52, 122, 0.2);
  font: 500 15px/1.5 "DM Sans", system-ui, sans-serif;
  color: #4F6385;
  text-align: center;
}