/* Kaikki tyylit scoupataan .kt-rating- JA .kt-summary-juuriin, ettei mikään vuoda muualle */

/* --- Yleiset -------------------------------------------------------------- */
.kt-rating,
.kt-summary {
  font-size: 16px;
  line-height: 1.4;
  color: inherit;
}


/* Rivit ja pienet tekstit */
.kt-rating .kt-rating-row,
.kt-summary .kt-summary-row {
  display: flex;
  align-items: center;
  gap: 10px;
}

/* Arvo ja määrä (numerot) */
.kt-rating [data-role="avg"],
.kt-summary [data-role="avg"] {
  font-weight: 600;
}
.kt-rating [data-role="count"],
.kt-summary [data-role="count"] {
  opacity: .75;
}

/* --- Dots / pisteet ------------------------------------------------------- */
/* Tuetaan sekä .kt-dot että .dot -nimisiä luokkia varmuuden vuoksi */
.kt-rating .kt-dots,
.kt-summary .kt-dots {
  display: inline-flex;
  gap: 6px;
  vertical-align: middle;
}
.kt-rating .kt-dot,
.kt-summary .kt-dot,
.kt-rating .dot,
.kt-summary .dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  border: 1px solid currentColor;
  opacity: .35;
  display: inline-block;
}
.kt-rating .kt-dot--fill,
.kt-summary .kt-dot--fill,
.kt-rating .dot--fill,
.kt-summary .dot--fill {
  opacity: 1;
}

/* --- Klikattavat pisteet / painikkeet ------------------------------------ */
/* Jos widgetissä on klikattavat pisteet tai napit, nollataan niiden oletus-tyyli */
.kt-rating button,
.kt-rating [role="button"] {
  appearance: none;
  background: transparent;
  border: 0;
  padding: 0;
  cursor: pointer;
  font: inherit;
  color: inherit;
}
.kt-rating button:disabled,
.kt-rating [role="button"][aria-disabled="true"] {
  cursor: not-allowed;
  opacity: .6;
}

/* --- Pienet marginaalit --------------------------------------------------- */
.kt-rating { margin: 16px 0; }
.kt-summary { margin: 12px 0 16px; }

/* Täysi tuki 'is-fill' -luokalle (nykyinen markup) */
.kt-rating .kt-dot.is-fill,
.kt-summary .kt-dot.is-fill {
  background: currentColor;
  opacity: 1;
}

/* (jos sinulla on myös .kt-dot--fill -variantti, pidä se rinnalla) */
.kt-rating .kt-dot--fill,
.kt-summary .kt-dot--fill {
  background: currentColor;
  opacity: 1;
}