/**
 * Telked gomb — Elementor widget stílusa.
 * Változatok: .telked-gomb--zold | .telked-gomb--feher
 * Méretek:    .telked-gomb--nagy (alapértelmezett) | .telked-gomb--normal (kisebb)
 *
 * A --shadow-primary változó a brand-tokens CSS-ből jön (oldalanként töltődik);
 * ha mégsem lenne, a fallback árnyék lép érvénybe.
 */
.telked-gomb {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  min-height: 52px;
  padding: 16px 24px;
  border-radius: 100px;
  font-family: "Schibsted Grotesk", system-ui, sans-serif;
  font-size: 18px;
  font-weight: 700;
  line-height: 1;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  transition: background-color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}

/* ---------- ZÖLD ---------- */
.telked-gomb--zold {
  background: #01bf60;
  color: #fff;
  border: 0;
  box-shadow: var(--shadow-primary, 0 12px 30px rgba(1, 191, 96, 0.22)) !important;
}
.telked-gomb--zold:hover,
.telked-gomb--zold:focus-visible {
  background: #05ab57;
  color: #fff;
}
/* A nyíl ikon csak a zöld gombon jelenik meg */
.telked-gomb .hero-cta__icon {
  width: 20px;
  height: 20px;
  flex: 0 0 auto;
}

/* ---------- FEHÉR ---------- */
.telked-gomb--feher {
  background: #ffffff;
  color: #333333;
  border: 1px solid #c8d0cc;
  font-weight: 600;
  font-size: 17px;
  letter-spacing: -0.01em;
}
.telked-gomb--feher:hover,
.telked-gomb--feher:focus-visible {
  transform: translateY(-2px);
  border-color: #01bf60;
}

/* ---------- TELI FEHÉR ----------
   Ugyanaz a forma, mint a zöldnek (árnyék, lekerekítés, ikon),
   csak fehér háttérrel és sötét szöveggel/nyíllal. */
.telked-gomb--telifeher {
  background: #fff;
  color: #171a18;
  border: 0;
  box-shadow: none;
}
.telked-gomb--telifeher:hover,
.telked-gomb--telifeher:focus-visible {
  background: #f1f3f2;
  color: #171a18;
}

/* ---------- MÉRETEK (nagy = alapértelmezett) ---------- */
.telked-gomb--nagy {
  /* a .telked-gomb alapértelmezett értékei már a nagy méretet adják */
  min-height: 52px;
}
.telked-gomb--normal {
  min-height: 50px;
  padding: 12px 20px;
  font-size: 15px;
}
.telked-gomb--normal.telked-gomb--feher {
  font-size: 14px;
}
.telked-gomb--normal .hero-cta__icon {
  width: 17px;
  height: 17px;
}