/* ========================================
   Star Rating Block
   Prefix: bkbg-sr-
   ======================================== */

/* ── CSS Custom Properties ────────────────────────────────────────────────── */
.bkbg-sr-wrap {
  --bkbg-sr-star-size: 28px;
  --bkbg-sr-star-gap: 3px;
  --bkbg-sr-label-size: 14px;
  --bkbg-sr-label-weight: 400;
  --bkbg-sr-label-color: #6b7280;
  --bkbg-sr-label-lh: 1.5;
  --bkbg-sr-label-spacing: 8px;
  --bkbg-sr-num-size: 13px;
  --bkbg-sr-num-weight: 600;
  --bkbg-sr-num-color: #1e293b;
  --bkbg-sr-num-spacing: 6px;

  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0;
}

/* ── Alignment ────────────────────────────────────────────────────────────── */
.bkbg-sr-wrap[data-text-align="center"] {
  align-items: center;
}

.bkbg-sr-wrap[data-text-align="right"] {
  align-items: flex-end;
}

/* ── Label position: above (reverse order) ────────────────────────────────── */
.bkbg-sr-wrap[data-label-pos="above"] {
  flex-direction: column-reverse;
}

/* ── Label position: right / left of stars ───────────────────────────────── */
.bkbg-sr-wrap[data-label-pos="right"],
.bkbg-sr-wrap[data-label-pos="left"] {
  flex-direction: row;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  /* default justify = flex-start (left alignment) */
  justify-content: flex-start;
}

/* Left: push label before stars via order */
.bkbg-sr-wrap[data-label-pos="left"] .bkbg-sr-label {
  order: -1;
}

/* Alignment → justify-content for row modes */
.bkbg-sr-wrap[data-label-pos="right"][data-text-align="center"],
.bkbg-sr-wrap[data-label-pos="left"][data-text-align="center"] {
  justify-content: center;
}

.bkbg-sr-wrap[data-label-pos="right"][data-text-align="right"],
.bkbg-sr-wrap[data-label-pos="left"][data-text-align="right"] {
  justify-content: flex-end;
}

/* ── Stars row ────────────────────────────────────────────────────────────── */
.bkbg-sr-stars {
  display: flex;
  flex-direction: row;
  align-items: center;
  flex-wrap: nowrap;
  gap: var(--bkbg-sr-star-gap);
}

/* ── Individual star ──────────────────────────────────────────────────────── */
.bkbg-sr-star {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--bkbg-sr-star-size);
  height: var(--bkbg-sr-star-size);
  flex-shrink: 0;
  line-height: 1;
}

.bkbg-sr-star svg {
  width: 100%;
  height: 100%;
  display: block;
}

/* Interactive stars in editor */
.bkbg-sr-star--interactive {
  cursor: pointer;
  transition: transform 0.1s ease, opacity 0.1s ease;
}

.bkbg-sr-star--interactive:hover {
  transform: scale(1.15);
  opacity: 0.9;
}

/* ── Numeric score ────────────────────────────────────────────────────────── */
.bkbg-sr-numeric {
  font-size: var(--bkbg-sr-num-size);
  font-weight: var(--bkbg-sr-num-weight);
  color: var(--bkbg-sr-num-color);
  margin-left: var(--bkbg-sr-num-spacing);
  white-space: nowrap;
  line-height: 1;
}

/* ── Label ────────────────────────────────────────────────────────────────── */
.bkbg-sr-label {
  font-size: var(--bkbg-sr-label-size);
  font-weight: var(--bkbg-sr-label-weight);
  color: var(--bkbg-sr-label-color);
  line-height: var(--bkbg-sr-label-lh);
  margin: 0;
  padding: 0;
}

/* Spacing: label below stars */
.bkbg-sr-wrap[data-label-pos="below"] .bkbg-sr-stars,
.bkbg-sr-wrap:not([data-label-pos]) .bkbg-sr-stars {
  margin-bottom: var(--bkbg-sr-label-spacing);
}

/* Spacing: label above stars (order reversed — label is below stars in DOM,
   but visually above via flex-direction: column-reverse) */
.bkbg-sr-wrap[data-label-pos="above"] .bkbg-sr-label {
  margin-bottom: var(--bkbg-sr-label-spacing);
}

/* No extra spacing when label is beside stars */
.bkbg-sr-wrap[data-label-pos="right"] .bkbg-sr-stars,
.bkbg-sr-wrap[data-label-pos="left"] .bkbg-sr-stars {
  margin-bottom: 0;
}

/* ── RichText editor placeholder alignment ────────────────────────────────── */
/* Only apply width:100% for column layouts (below/above); row layouts use flex:1 */
.editor-styles-wrapper .bkbg-sr-wrap[data-text-align="center"]:not([data-label-pos="right"]):not([data-label-pos="left"]) .bkbg-sr-label {
  text-align: center;
  width: 100%;
}

.editor-styles-wrapper .bkbg-sr-wrap[data-text-align="right"]:not([data-label-pos="right"]):not([data-label-pos="left"]) .bkbg-sr-label {
  text-align: right;
  width: 100%;
}

/* Editor: force row display so flex-direction works correctly */
.editor-styles-wrapper .bkbg-sr-wrap[data-label-pos="right"],
.editor-styles-wrapper .bkbg-sr-wrap[data-label-pos="left"] {
  display: flex !important;
}

/* ── Hide label element when show-label is false ─────────────────────────── */
.bkbg-sr-wrap[data-show-label="false"] .bkbg-sr-label {
  display: none;
}