/* ============================================================
   review-widget.css — a vélemény-komponens SZERKEZETE
   ------------------------------------------------------------
   Itt csak az van, ami minden demónál azonos: a csillagsor
   kitöltés-mechanikája, a kattintó-sávok elhelyezése, a rácsok.
   SZÍN ÉS BETŰ NINCS beégetve — mindent `--rw-*` változó ad, amit
   a demó a saját palettájából állít be. Így a komponens működése
   közös, a látványa demónként egyedi.

   A demó ennyit állít (példa):
     .rw{ --rw-star:#c8a24b; --rw-star-off:#e2dcce; --rw-ink:#26251f; }
   ============================================================ */

.rw {
  --rw-star: #d8a13a;              /* aktív csillag */
  --rw-star-off: rgba(0,0,0,.16);  /* üres csillag */
  --rw-ink: inherit;               /* szövegszín */
  --rw-muted: inherit;             /* halvány szöveg */
  --rw-line: rgba(0,0,0,.14);      /* keret */
  --rw-field: transparent;         /* mező-háttér */
  --rw-radius: 10px;
  --rw-star-size: 40px;

  color: var(--rw-ink);
  max-width: 560px;
  margin: 0 auto;
  text-align: center;
}

/* --- csillagsor --- */
.rw-stars { position: relative; display: inline-block; line-height: 1; }
.rw-track { position: relative; display: block; }
.rw-empty,
.rw-fill {
  font-size: var(--rw-star-size);
  letter-spacing: .12em;
  line-height: 1;
  display: block;
  white-space: nowrap;
  user-select: none;
}
.rw-empty { color: var(--rw-star-off); }
.rw-fill {
  position: absolute;
  inset: 0;
  color: var(--rw-star);
  overflow: hidden;
  width: 0;
  transition: width .12s ease-out;
}

/* a 10 kattintó-sáv pontosan a csillagokra fekszik (fél csillagonként) */
.rw-hits { position: absolute; inset: 0; display: flex; }
.rw-hits button {
  flex: 1 1 10%;
  background: none;
  border: 0;
  padding: 0;
  margin: 0;
  cursor: pointer;
  border-radius: 3px;
}
.rw-hits button:focus-visible { outline: 2px solid var(--rw-star); outline-offset: 3px; }

.rw-value {
  margin: 12px 0 18px;
  font-size: 14px;
  color: var(--rw-muted);
  letter-spacing: .04em;
}
.rw-value b { font-size: 17px; color: var(--rw-ink); }

/* --- szöveges indoklás --- */
.rw-text {
  width: 100%;
  min-height: 96px;
  resize: vertical;
  padding: 13px 15px;
  border: 1px solid var(--rw-line);
  border-radius: var(--rw-radius);
  background: var(--rw-field);
  color: var(--rw-ink);
  font: inherit;
  font-size: 15px;
}
.rw-text:focus { outline: none; border-color: var(--rw-star); }

.rw-error {
  margin: 10px 0 0;
  font-size: 13.5px;
  color: #b4342b;
}

.rw-send { margin-top: 16px; }

/* --- demo-visszaigazolás --- */
.rw-done {
  display: grid;
  gap: 10px;
  justify-items: center;
  padding: 26px 22px;
  border: 1px solid var(--rw-line);
  border-radius: var(--rw-radius);
}
.rw-done-star { font-size: 26px; color: var(--rw-star); letter-spacing: .05em; }
.rw-done b { font-size: 18px; }
.rw-done q { color: var(--rw-muted); font-style: italic; max-width: 46ch; }
.rw-done small { font-size: 12px; color: var(--rw-muted); opacity: .85; }

@media (max-width: 520px) {
  .rw { --rw-star-size: 32px; }
}