.sfscr, .sfscr * { box-sizing: border-box; }

.sfscr {
  --sfscr-accent: #f2c200; /* Sterne */
  --sfscr-star-size: 22px;
  --sfscr-bar: #5cac43;   /* linker Streifen */

  display: grid;
  grid-template-columns: minmax(260px, 1.2fr) minmax(280px, 1fr) max-content;
  gap: 22px;

  /* ✅ harte Vertikal-Zentrierung */
  align-items: center !important;

  margin: 22px 0 0;
  padding: 16px 18px;

  background: #fff;
  border: 1px solid rgba(0,0,0,0.10);
  border-left: 4px solid var(--sfscr-bar);
  border-radius: 0 !important;
  box-shadow: none !important;

  min-height: 72px;
}

.sfscr__left,
.sfscr__mid,
.sfscr__right {
  align-self: center !important;
}

@media (max-width: 920px) {
  .sfscr { grid-template-columns: 1fr; gap: 14px; min-height: unset; }
}

/* Left */
.sfscr__title {
  font-weight: 750;
  font-size: 15px;
  line-height: 1.25;
  margin: 0 0 4px;
  letter-spacing: 0.1px;
}

.sfscr__text {
  font-size: 13px;
  line-height: 1.55;
  color: rgba(0,0,0,0.62);
  margin: 0;
}

/* Mid */
.sfscr__mid {
  display: grid;
  gap: 8px;

  /* ✅ mittiger Eindruck */
  justify-items: center;
  text-align: center;

  /* falls Themes an Grid-Zeug drehen */
  align-content: center;
}

@media (max-width: 920px) {
  .sfscr__mid { justify-items: start; text-align: left; }
}

.sfscr__summary {
  display: inline-flex;
  gap: 10px;
  align-items: baseline;

  font-size: 13px;
  line-height: 1.3;
  color: rgba(0,0,0,0.65);
}

.sfscr__summary.is-empty { color: rgba(0,0,0,0.55); }

.sfscr__kpi { display: inline-flex; align-items: baseline; gap: 6px; }
.sfscr__kpiLabel { font-weight: 700; color: rgba(0,0,0,0.55); }
.sfscr__avgnum { font-weight: 800; font-size: 15px; color: rgba(0,0,0,0.82); letter-spacing: 0.2px; }
.sfscr__avgden { font-weight: 650; color: rgba(0,0,0,0.55); }
.sfscr__dot { color: rgba(0,0,0,0.35); }
.sfscr__count { color: rgba(0,0,0,0.55); }

.sfscr__avgstars { display: inline-flex; gap: 5px; align-items: center; }
.sfscr__avgstars.is-empty { display: none; }

.sfscr__avgstar {
  font-size: var(--sfscr-star-size);
  line-height: 1;
  color: rgba(0,0,0,0.18);
  user-select: none;
}
.sfscr__avgstar.is-on { color: var(--sfscr-accent); }

/* Right */
.sfscr__right {
  display: grid;
  gap: 8px;
  justify-items: end;
}

@media (max-width: 920px) {
  .sfscr__right { justify-items: start; }
}

/* Button */
.sfscr button.sfscr__ratebtn {
  -webkit-appearance: none !important;
  appearance: none !important;
  background: rgba(0,0,0,0.02) !important;
  border: 1px solid rgba(0,0,0,0.14) !important;
  border-radius: 0 !important;
  box-shadow: none !important;

  padding: 8px 10px !important;
  margin: 0 !important;

  font: inherit;
  font-size: 13px;
  font-weight: 700;
  color: rgba(0,0,0,0.76);
  cursor: pointer;
  letter-spacing: 0.1px;

  transition: background 120ms ease, color 120ms ease, border-color 120ms ease;
}

.sfscr button.sfscr__ratebtn:hover {
  background: rgba(0,0,0,0.04) !important;
  border-color: rgba(0,0,0,0.22) !important;
  color: rgba(0,0,0,0.90);
}

.sfscr button.sfscr__ratebtn:focus-visible {
  outline: 2px solid rgba(0,0,0,0.35);
  outline-offset: 3px;
}

/* Wrapper */
.sfscr__ratewrap {
  position: relative;
  display: inline-flex;
  align-items: center;
}

/* ✅ Hover-Bridge: hält :hover aktiv beim Übergang Button → Popover */
.sfscr__ratewrap::after {
  content: "";
  position: absolute;
  left: -10px;
  right: -10px;
  top: 100%;
  height: 14px;
  background: transparent;
  pointer-events: auto;
}

/* Popover (mit Abstand) */
.sfscr__popover {
  position: absolute;
  right: -50%;
  top: calc(100% + 10px);

  opacity: 0;
  visibility: hidden;
  pointer-events: none;

  background: #fff;
  border: 1px solid rgba(0,0,0,0.12);
  border-radius: 0 !important;
  box-shadow: none !important;

  padding: 10px 10px 8px;
  z-index: 9999;
  min-width: 210px;
}

/* sichtbar bei hover oder click-open */
.sfscr__ratewrap:hover .sfscr__popover,
.sfscr__ratewrap.is-open .sfscr__popover {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.sfscr__popoverTitle {
  font-size: 12px;
  font-weight: 750;
  letter-spacing: 0.2px;
  color: rgba(0,0,0,0.60);
  margin: 0 0 8px;
}

.sfscr__pickstars { display: inline-flex; gap: 6px; align-items: center; }

/* Pick stars */
.sfscr button.sfscr__pick {
  -webkit-appearance: none !important;
  appearance: none !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  border-radius: 0 !important;

  padding: 0 !important;
  margin: 0 !important;

  cursor: pointer;
  line-height: 1;
  font-size: var(--sfscr-star-size);
  color: rgba(0,0,0,0.25);
  transition: color 120ms ease, transform 120ms ease;
  user-select: none;
}

.sfscr button.sfscr__pick:hover,
.sfscr button.sfscr__pick.is-hover { color: rgba(0,0,0,0.35); }

.sfscr button.sfscr__pick.is-on { color: var(--sfscr-accent); }

.sfscr button.sfscr__pick:active { transform: translateY(1px); }

.sfscr button.sfscr__pick:focus-visible {
  outline: 2px solid rgba(0,0,0,0.35);
  outline-offset: 3px;
}

.sfscr__msg { min-height: 16px; font-size: 12px; color: rgba(0,0,0,0.55); }

.sfscr.is-disabled .sfscr__msg { display: none; }

.sfscr.is-disabled button.sfscr__ratebtn {
  cursor: default;
  background: rgba(0,0,0,0.02) !important;
  border-color: rgba(0,0,0,0.10) !important;
  color: rgba(0,0,0,0.55) !important;
}

.sfscr.is-disabled .sfscr__popover { display: none; }