/* ==========================================================================
   Értékelés-jelvény — [telked_ertekeles]
   --------------------------------------------------------------------------
   Kattintható átlagértékelés-jelvény a Vélemények modulból. Önálló, könnyű
   stíluslap: nem függ a Splide-tól, csak a brand tokenektől (visszaeső
   színértékekkel, hogy admin előnézetben is látszódjon).

   Három változat (a kinezet/velemnyjeloles sablon alapján):
     v1 — egyséros pill       (kompakt, fejléc / CTA-sor)
     v2 — nagy szám           (hangsúlyos, szekció fölé)
     v5 — minimál             (tisztán tipográfia, egy csillag)
   ========================================================================== */

.telked-vm-badge {
  display: inline-flex;
  align-items: center;
  font-family: var(--font-sans, 'Schibsted Grotesk', ui-sans-serif, system-ui, sans-serif);
  text-decoration: none;
  color: var(--brand-text-primary, #333333);
  transition: transform 0.16s ease, box-shadow 0.16s ease, border-color 0.16s ease, color 0.16s ease;
}

.telked-vm-badge:hover,
.telked-vm-badge:focus-visible {
  text-decoration: none;
}

/* Csak a kattintható (link) változatnál van pointer + hover visszajelzés. */
.telked-vm-badge--link {
  cursor: pointer;
}

/* Csillagok — közös */
.telked-vm-badge__stars {
  display: inline-flex;
  gap: 2px;
  flex: 0 0 auto;
}

.telked-vm-badge__stars svg {
  display: block;
}

.telked-vm-badge__muted {
  color: var(--brand-text-muted, #5f6663);
}

/* --------------------------------------------------------------------------
   v1 — Egyséros pill
   -------------------------------------------------------------------------- */
.telked-vm-badge--v1 {
  gap: 12px;
  background: #ffffff;
  border: 1px solid var(--brand-border, #dfe5e2);
  border-radius: 999px;
  padding: 10px 18px;
  box-shadow: 0 6px 18px rgba(23, 26, 24, 0.06);
}

.telked-vm-badge--v1.telked-vm-badge--link:hover,
.telked-vm-badge--v1.telked-vm-badge--link:focus-visible {
  transform: translateY(-1px);
  box-shadow: 0 10px 24px rgba(23, 26, 24, 0.10);
  border-color: var(--brand-primary, #01bf60);
}

.telked-vm-badge__v1-text {
  font-size: 1rem;
  color: var(--brand-text-primary, #333333);
  white-space: nowrap;
}

.telked-vm-badge__v1-text strong {
  color: var(--brand-dark, #171a18);
  font-weight: 800;
}

/* --------------------------------------------------------------------------
   v2 — Nagy szám
   -------------------------------------------------------------------------- */
.telked-vm-badge--v2 {
  gap: 20px;
}

.telked-vm-badge__v2-num {
  display: flex;
  align-items: baseline;
  gap: 4px;
  line-height: 1;
}

.telked-vm-badge__v2-big {
  font-size: 3.4rem;
  font-weight: 800;
  letter-spacing: -0.03em;
  color: var(--brand-dark, #171a18);
  transition: color 0.16s ease;
}

.telked-vm-badge__v2-slash {
  font-size: 1.3rem;
  font-weight: 600;
  color: var(--brand-text-muted, #8a918e);
}

.telked-vm-badge__v2-sep {
  width: 1px;
  height: 56px;
  background: var(--brand-border, #dfe5e2);
  flex: 0 0 auto;
}

.telked-vm-badge__v2-side {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.telked-vm-badge__v2-sub {
  font-size: 0.95rem;
  color: var(--brand-text-muted, #5f6663);
  white-space: nowrap;
}

.telked-vm-badge--v2.telked-vm-badge--link:hover .telked-vm-badge__v2-big,
.telked-vm-badge--v2.telked-vm-badge--link:focus-visible .telked-vm-badge__v2-big {
  color: var(--brand-primary-deep, #00a350);
}

/* --------------------------------------------------------------------------
   v5 — Minimál
   -------------------------------------------------------------------------- */
.telked-vm-badge--v5 {
  gap: 10px;
  align-items: baseline;
}

.telked-vm-badge__v5-star {
  align-self: center;
  flex: 0 0 auto;
  transition: transform 0.16s ease;
}

.telked-vm-badge__v5-num {
  font-size: 1.6rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--brand-dark, #171a18);
  transition: color 0.16s ease;
}

.telked-vm-badge__v5-sub {
  font-size: 1.05rem;
  color: var(--brand-text-muted, #8a918e);
}

.telked-vm-badge--v5.telked-vm-badge--link:hover .telked-vm-badge__v5-num,
.telked-vm-badge--v5.telked-vm-badge--link:focus-visible .telked-vm-badge__v5-num {
  color: var(--brand-primary-deep, #00a350);
}

.telked-vm-badge--v5.telked-vm-badge--link:hover .telked-vm-badge__v5-star,
.telked-vm-badge--v5.telked-vm-badge--link:focus-visible .telked-vm-badge__v5-star {
  transform: scale(1.12);
}

/* --------------------------------------------------------------------------
   Reszponzív — v2 nagy számához simul mobilon
   -------------------------------------------------------------------------- */
@media (max-width: 600px) {
  .telked-vm-badge--v2 {
    gap: 14px;
  }

  .telked-vm-badge__v2-big {
    font-size: 2.6rem;
  }

  .telked-vm-badge__v2-sep {
    height: 44px;
  }
}

/* --------------------------------------------------------------------------
   Csökkentett mozgásigény
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .telked-vm-badge,
  .telked-vm-badge__v2-big,
  .telked-vm-badge__v5-num,
  .telked-vm-badge__v5-star {
    transition: none;
  }

  .telked-vm-badge--v1.telked-vm-badge--link:hover,
  .telked-vm-badge--v1.telked-vm-badge--link:focus-visible {
    transform: none;
  }

  .telked-vm-badge--v5.telked-vm-badge--link:hover .telked-vm-badge__v5-star,
  .telked-vm-badge--v5.telked-vm-badge--link:focus-visible .telked-vm-badge__v5-star {
    transform: none;
  }
}