/* Nyelvvizsgadíj-kereső
   A színeket és a betűtípust az Elementor globális beállításaiból veszi át,
   ha azok nincsenek, a fallback értékek érvényesek. */
.hnk {
  --hnk-accent: var(--e-global-color-accent, var(--e-global-color-primary, #1f5fa8));
  --hnk-primary: var(--e-global-color-primary, #1d2b3a);
  --hnk-text: var(--e-global-color-text, #2b2f33);
  --hnk-muted: color-mix(in srgb, var(--hnk-text) 62%, transparent);
  --hnk-line: color-mix(in srgb, var(--hnk-text) 14%, transparent);
  --hnk-soft: color-mix(in srgb, var(--hnk-accent) 8%, transparent);
  font-family: var(--e-global-typography-text-font-family, inherit), sans-serif;
  color: var(--hnk-text);
  max-width: 760px;
  margin: 0 auto 1.5em;
  line-height: 1.45;
}

.hnk *, .hnk *::before, .hnk *::after { box-sizing: border-box; }

.hnk-title {
  font-family: var(--e-global-typography-primary-font-family, inherit), sans-serif;
  color: var(--hnk-primary);
  margin: 0 0 .6em;
}

.hnk-controls {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin: 0 0 16px;
}

.hnk-field { display: flex; flex-direction: column; gap: 4px; margin: 0; }

.hnk-label {
  font-size: .8em;
  font-weight: 600;
  letter-spacing: .02em;
  text-transform: uppercase;
  color: var(--hnk-muted);
}

.hnk-field select {
  width: 100%;
  min-height: 44px;
  padding: 8px 12px;
  font: inherit;
  color: inherit;
  background-color: #fff;
  border: 1px solid var(--hnk-line);
  border-radius: 8px;
  cursor: pointer;
}
.hnk-field select:focus-visible {
  outline: 2px solid var(--hnk-accent);
  outline-offset: 1px;
}

.hnk-list {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--hnk-line);
}

.hnk-row {
  display: grid;
  grid-template-columns: 2.2em minmax(0, 1fr) auto 8.5em;
  align-items: center;
  gap: 4px 12px;
  padding: 10px 8px;
  margin: 0;
  border-bottom: 1px solid var(--hnk-line);
}
.hnk-row--best { background: var(--hnk-soft); }

.hnk-rank { color: var(--hnk-muted); font-variant-numeric: tabular-nums; }
.hnk-name { font-weight: 600; min-width: 0; }
.hnk-valid { display: block; font-weight: 400; font-size: .82em; color: var(--hnk-muted); }
.hnk-price {
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  text-align: right;
}
.hnk-diff {
  font-size: .85em;
  color: var(--hnk-muted);
  white-space: nowrap;
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.hnk-row--best .hnk-diff { color: var(--hnk-accent); font-weight: 600; }

.hnk-empty { padding: 16px 8px; color: var(--hnk-muted); }

.hnk-note { font-size: .82em; color: var(--hnk-muted); margin: 10px 0 0; }

.hnk--error {
  padding: 12px 16px;
  border: 1px solid #d63638;
  border-radius: 8px;
  background: #fcf0f1;
  color: #8a1f11;
}

@media (max-width: 600px) {
  .hnk-controls { grid-template-columns: 1fr; }
  .hnk-row {
    grid-template-columns: 2em minmax(0, 1fr) auto;
    grid-template-areas: "rank name price" "rank name diff";
  }
  .hnk-rank { grid-area: rank; align-self: start; }
  .hnk-name { grid-area: name; }
  .hnk-price { grid-area: price; }
  .hnk-diff { grid-area: diff; }
}