/* ============================================================================
 * (A profile.html nem tölti a melopont-style.css-t → minden tokennek van tartalék értéke.)
 * MelóPont — Állásértesítő (JOB-ALERT-01, 2026.10.05). Előtag: mp-ja-
 * Keresőoldali kártya (#mpJaBox) + Fiókom „Állásértesítőim” lista.
 * Színek, térközök: melopont-style.css tokenjei; lekerekítés: css/card-radius.css.
 * ========================================================================== */

/* ---- Keresőoldal: a találatok fölötti kártya ---- */
.mp-ja {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  margin: 0 0 16px; padding: 16px 18px;
  background: var(--mp-white, #FFFFFF); border: 1px solid var(--mp-blue-light, #E8F0FE);
  box-shadow: var(--mp-card-shadow, 0 1px 2px rgba(16,24,40,0.04), 0 2px 8px rgba(16,24,40,0.05));
  --mp-edge: var(--mp-blue, #0A66C2);
}
.mp-ja[hidden] { display: none; }
.mp-ja-ico {
  flex: 0 0 auto; width: 44px; height: 44px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--mp-blue-light, #E8F0FE); color: var(--mp-blue, #0A66C2);
}
.mp-ja-ico.is-on { background: var(--mp-green-light, #E8F5E9); color: var(--mp-green, #057642); }
.mp-ja-main { flex: 1 1 280px; min-width: 0; }
.mp-ja-title { margin: 0 0 4px; font-size: calc(16px * var(--mp-fs, 1)); font-weight: 600; line-height: 1.4; color: var(--mp-text-primary, #191919); }
.mp-ja-title strong { font-weight: 800; overflow-wrap: anywhere; }
.mp-ja-text { margin: 0; font-size: calc(14px * var(--mp-fs, 1)); line-height: 1.5; color: var(--mp-text-muted, #5B6676); }
.mp-ja-actions { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; flex: 0 0 auto; }
.mp-ja-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 44px; padding: 10px 18px; border-radius: var(--mp-radius-pill, 999px);
  border: 1px solid var(--mp-blue, #0A66C2); background: var(--mp-blue, #0A66C2); color: var(--mp-white, #FFFFFF);
  font: inherit; font-size: calc(15px * var(--mp-fs, 1)); font-weight: 700; text-decoration: none; cursor: pointer; white-space: nowrap;
}
.mp-ja-btn:hover { background: var(--mp-blue-hover, #004182); border-color: var(--mp-blue-hover, #004182); color: var(--mp-white, #FFFFFF); text-decoration: none; }
.mp-ja-btn:focus-visible { outline: 3px solid var(--mp-blue-hover, #004182); outline-offset: 2px; }
.mp-ja-btn:disabled { background: var(--mp-disabled-bg, #E8E7E4); color: var(--mp-disabled-text, #5E5E5E); border-color: var(--mp-disabled-border, #D6D5D2); cursor: wait; }
.mp-ja-link { font-size: calc(15px * var(--mp-fs, 1)); font-weight: 600; color: var(--mp-blue, #0A66C2); text-decoration: underline; text-underline-offset: 3px; }
.mp-ja-link:hover { color: var(--mp-blue-hover, #004182); }
@media (max-width: 600px) {
  .mp-ja { align-items: flex-start; padding: 14px; gap: 12px; }
  .mp-ja-actions { flex: 1 1 100%; }
  .mp-ja-btn { flex: 1 1 100%; }
}

/* ---- Fiókom: Állásértesítőim ---- */
.mp-ja-intro { margin: 0 0 14px; font-size: calc(15px * var(--mp-fs, 1)); line-height: 1.55; color: var(--mp-text-primary, #191919); }
.mp-ja-intro a { color: var(--mp-blue, #0A66C2); font-weight: 600; }
.mp-ja-list { display: flex; flex-direction: column; gap: 10px; }
.mp-ja-empty { margin: 0; font-size: calc(15px * var(--mp-fs, 1)); color: var(--mp-text-muted, #5B6676); }
.mp-ja-empty-card { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; padding: 14px; background: var(--mp-bg, #F4F5F7); border-radius: 12px; }
.mp-ja-item {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 12px 14px; border: 1px solid var(--mp-card-border, #E5E7EB); border-radius: 12px; background: var(--mp-white, #FFFFFF);
}
.mp-ja-item.is-off { background: var(--mp-bg, #F4F5F7); }
.mp-ja-item-main { flex: 1 1 200px; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.mp-ja-item-name {
  display: inline-flex; align-items: center; gap: 8px; font-size: calc(16px * var(--mp-fs, 1)); font-weight: 700;
  color: var(--mp-text-primary, #191919); text-decoration: none; overflow-wrap: anywhere;
}
.mp-ja-item-name svg { flex: 0 0 auto; color: var(--mp-blue, #0A66C2); }
.mp-ja-item-name:hover { color: var(--mp-blue, #0A66C2); text-decoration: underline; }
.mp-ja-item-sub { font-size: calc(14px * var(--mp-fs, 1)); color: var(--mp-text-muted, #5B6676); }
.mp-ja-switch { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; cursor: pointer; font-size: calc(14px * var(--mp-fs, 1)); font-weight: 600; color: var(--mp-text-primary, #191919); }
.mp-ja-switch input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.mp-ja-switch-ui {
  position: relative; width: 44px; height: 26px; border-radius: var(--mp-radius-pill, 999px);
  background: var(--mp-input-border, #CBD2DC); transition: background .15s;
}
.mp-ja-switch-ui::after {
  content: ''; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%;
  background: var(--mp-white, #FFFFFF); box-shadow: 0 1px 2px rgba(16,24,40,.2); transition: transform .15s;
}
.mp-ja-switch input:checked + .mp-ja-switch-ui { background: var(--mp-green, #057642); }
.mp-ja-switch input:checked + .mp-ja-switch-ui::after { transform: translateX(18px); }
.mp-ja-switch input:focus-visible + .mp-ja-switch-ui { outline: 3px solid var(--mp-blue, #0A66C2); outline-offset: 2px; }
.mp-ja-switch input:disabled + .mp-ja-switch-ui { opacity: .6; }
.mp-ja-switch-text { min-width: 92px; }
.mp-ja-del {
  flex: 0 0 auto; width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--mp-card-border, #E5E7EB);
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--mp-white, #FFFFFF); color: var(--mp-text-muted, #5B6676); cursor: pointer;
}
.mp-ja-del:hover { color: var(--mp-red, #CC1016); border-color: var(--mp-red, #CC1016); background: var(--mp-red-light, #FDE8E8); }
.mp-ja-del:focus-visible { outline: 3px solid var(--mp-red, #CC1016); outline-offset: 2px; }
.mp-ja-del:disabled { opacity: .5; cursor: wait; }
@media (prefers-reduced-motion: reduce) { .mp-ja-switch-ui, .mp-ja-switch-ui::after { transition: none; } }

/* ---- EMPTY-ALERT-01: „Értesítést kérek a szakmáimra” visszaigazolása (bármely üres állapotban) ---- */
.mp-ja-mine-done {
  display: flex; align-items: flex-start; gap: 8px; margin: 0;
  padding: 10px 14px; border-radius: 12px; text-align: left;
  background: var(--mp-st-ok-bg, #E7F5EC); color: var(--mp-st-ok-ink, #14532D); border: 1px solid var(--mp-st-ok-line, #B7DFC6);
  font-size: calc(15px * var(--mp-fs, 1)); line-height: 1.5;
}
.mp-ja-mine-done svg { flex: 0 0 auto; width: 20px; height: 20px; margin-top: 1px; }
.mp-ja-mine-done strong { font-weight: 700; overflow-wrap: anywhere; }
.mp-ja-mine-done a { color: inherit; font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }

/* ============================================================================
 * NEAR-ALERT-01 (2026.10.24): Környékbeli munkák értesítő — js/near-alert.js
 * Előtag: mp-na-. Hely: Fiókom (Állásértesítőim kártya teteje), munkavállalói
 * vezérlőpult, Munkalehetőségek. A szín a munkavállaló kékje (csak neki szól).
 * ========================================================================== */
[data-mp-near][hidden] { display: none; }
.mp-na {
  display: flex; flex-direction: column; gap: 14px;
  padding: 16px 18px; margin: 0 0 16px;
  background: var(--mp-tint-worker, #EEF5FD); border: 1px solid var(--mp-tint-worker-line, #CFE2F8);
  border-radius: var(--mp-card-radius, 16px);
  color: var(--mp-text-primary, #191919);
}
.mp-na--compact { background: var(--mp-white, #FFFFFF); border-color: var(--mp-card-border, #D8DEE6); box-shadow: var(--mp-card-shadow, 0 1px 2px rgba(16,24,40,0.04), 0 2px 8px rgba(16,24,40,0.05)); }
.mp-na-head { display: flex; align-items: flex-start; gap: 12px; }
.mp-na-head--compact { align-items: center; flex-wrap: wrap; }
.mp-na-ico {
  flex: 0 0 auto; width: 44px; height: 44px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--mp-blue-light, #E8F0FE); color: var(--mp-blue, #0A66C2);
}
.mp-na-ico.is-on { background: var(--mp-st-ok-bg, #E7F5EC); color: var(--mp-st-ok-ink, #14532D); }
.mp-na-main { flex: 1 1 240px; min-width: 0; }
.mp-na-title { margin: 0 0 4px; font-size: calc(17px * var(--mp-fs, 1)); font-weight: 700; line-height: 1.35; overflow-wrap: anywhere; }
.mp-na-title strong { font-weight: 800; }
.mp-na-text { margin: 0; font-size: calc(15px * var(--mp-fs, 1)); line-height: 1.5; color: var(--mp-text-muted, #5B6676); }

.mp-na-field { display: flex; flex-direction: column; gap: 8px; }
.mp-na-label { margin: 0; font-size: calc(15px * var(--mp-fs, 1)); font-weight: 700; }
.mp-na-pills { display: flex; flex-wrap: wrap; gap: 8px; }
.mp-na-pill {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px; max-width: 100%;
  padding: 8px 16px; border-radius: var(--mp-radius-pill, 999px);
  border: 1px solid var(--mp-line-1, #D8DEE6); background: var(--mp-white, #FFFFFF); color: var(--mp-text-primary, #191919);
  font: inherit; font-size: calc(15px * var(--mp-fs, 1)); font-weight: 600; cursor: pointer; text-align: left;
}
.mp-na-pill span { overflow-wrap: anywhere; }
.mp-na-pill svg { flex: 0 0 auto; color: var(--mp-blue, #0A66C2); }
.mp-na-pill:hover { border-color: var(--mp-blue, #0A66C2); }
.mp-na-pill.is-on { background: var(--mp-blue, #0A66C2); border-color: var(--mp-blue, #0A66C2); color: var(--mp-white, #FFFFFF); }
.mp-na-pill.is-on svg { color: var(--mp-white, #FFFFFF); }
.mp-na-pill:focus-visible { outline: 3px solid var(--mp-blue-hover, #004182); outline-offset: 2px; }
.mp-na-pill:disabled { background: var(--mp-disabled-bg, #E8E7E4); color: var(--mp-disabled-text, #5E5E5E); border-color: var(--mp-disabled-border, #D6D5D2); cursor: not-allowed; }
.mp-na-pill:disabled svg { color: var(--mp-disabled-text, #5E5E5E); }
.mp-na-hint { margin: 0; font-size: calc(14px * var(--mp-fs, 1)); color: var(--mp-text-muted, #5B6676); }
.mp-na-hint a { color: var(--mp-blue, #0A66C2); font-weight: 600; }

.mp-na-rhead { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.mp-na-val {
  font-size: calc(22px * var(--mp-fs, 1)); font-weight: 800; color: var(--mp-blue, #0A66C2);
  font-variant-numeric: tabular-nums;
}
.mp-na-range {
  width: 100%; height: 44px; margin: 0; background: transparent; cursor: pointer;
  -webkit-appearance: none; appearance: none; accent-color: var(--mp-blue, #0A66C2);
}
.mp-na-range::-webkit-slider-runnable-track { height: 8px; border-radius: 999px; background: var(--mp-line-1, #D8DEE6); }
.mp-na-range::-moz-range-track { height: 8px; border-radius: 999px; background: var(--mp-line-1, #D8DEE6); }
.mp-na-range::-moz-range-progress { height: 8px; border-radius: 999px; background: var(--mp-blue, #0A66C2); }
.mp-na-range::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none; width: 28px; height: 28px; margin-top: -10px; border-radius: 50%;
  background: var(--mp-blue, #0A66C2); border: 3px solid var(--mp-white, #FFFFFF); box-shadow: 0 1px 4px rgba(16,24,40,.35);
}
.mp-na-range::-moz-range-thumb {
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--mp-blue, #0A66C2); border: 3px solid var(--mp-white, #FFFFFF); box-shadow: 0 1px 4px rgba(16,24,40,.35);
}
.mp-na-range:focus-visible { outline: 3px solid var(--mp-blue-hover, #004182); outline-offset: 2px; border-radius: 8px; }
.mp-na-range:disabled { cursor: wait; opacity: .6; }
.mp-na-scale { display: flex; justify-content: space-between; gap: 8px; margin-top: -6px; font-size: calc(14px * var(--mp-fs, 1)); color: var(--mp-text-muted, #5B6676); }
.mp-na-count { margin: 0; font-size: calc(15px * var(--mp-fs, 1)); line-height: 1.5; }

.mp-na-actions { display: flex; align-items: center; gap: 10px 14px; flex-wrap: wrap; }
.mp-na-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 44px; padding: 10px 20px; border-radius: var(--mp-radius-pill, 999px);
  border: 1px solid var(--mp-blue, #0A66C2); background: var(--mp-blue, #0A66C2); color: var(--mp-white, #FFFFFF);
  font: inherit; font-size: calc(15px * var(--mp-fs, 1)); font-weight: 700; text-decoration: none; cursor: pointer;
}
.mp-na-btn:hover { background: var(--mp-blue-hover, #004182); border-color: var(--mp-blue-hover, #004182); color: var(--mp-white, #FFFFFF); text-decoration: none; }
.mp-na-btn:focus-visible { outline: 3px solid var(--mp-blue-hover, #004182); outline-offset: 2px; }
.mp-na-btn:disabled { background: var(--mp-disabled-bg, #E8E7E4); color: var(--mp-disabled-text, #5E5E5E); border-color: var(--mp-disabled-border, #D6D5D2); cursor: not-allowed; }
.mp-na-ghost {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  min-height: 44px; padding: 8px 16px; border-radius: var(--mp-radius-pill, 999px);
  border: 1px solid var(--mp-blue, #0A66C2); background: var(--mp-white, #FFFFFF); color: var(--mp-blue, #0A66C2);
  font: inherit; font-size: calc(15px * var(--mp-fs, 1)); font-weight: 700; cursor: pointer;
}
.mp-na-ghost:hover { background: var(--mp-blue-light, #E8F0FE); }
.mp-na-ghost:focus-visible { outline: 3px solid var(--mp-blue-hover, #004182); outline-offset: 2px; }
.mp-na-ghost:disabled { color: var(--mp-disabled-text, #5E5E5E); border-color: var(--mp-disabled-border, #D6D5D2); cursor: wait; }
.mp-na-link { font-size: calc(15px * var(--mp-fs, 1)); font-weight: 600; color: var(--mp-blue, #0A66C2); text-decoration: underline; text-underline-offset: 3px; }
.mp-na-saved {
  flex: 1 1 100%; display: flex; align-items: flex-start; gap: 8px; padding: 10px 14px; border-radius: 12px;
  background: var(--mp-st-ok-bg, #DDF1E5); border: 1px solid var(--mp-st-ok-line, #A9D9BC); color: var(--mp-st-ok-ink, #146C43);
  font-size: calc(15px * var(--mp-fs, 1)); font-weight: 500; line-height: 1.5;
}
.mp-na-saved svg { flex: 0 0 auto; margin-top: 3px; }
.mp-na-saved strong { font-weight: 700; }
.mp-na-err {
  margin: 0; padding: 10px 14px; border-radius: 12px;
  background: var(--mp-st-urgent-bg, #FDECEC); color: var(--mp-st-urgent-ink, #8A1C1C); border: 1px solid var(--mp-st-urgent-line, #F3C2C2);
  font-size: calc(14px * var(--mp-fs, 1)); line-height: 1.5;
}
.mp-na-note { margin: 0; font-size: calc(14px * var(--mp-fs, 1)); line-height: 1.55; color: var(--mp-text-muted, #5B6676); }
/* NEAR-ALERT-05: térkép, találat-kártyák, „Másik település” */
.mp-na-mapbox { margin: 0; display: flex; flex-direction: column; gap: 6px; }
.mp-na-mapbox[hidden] { display: none; }
.mp-na-map {
  width: 100%; height: calc(240px * var(--mp-fs, 1)); max-height: 60vh;
  border-radius: 12px; overflow: hidden; border: 1px solid var(--mp-line-1, #D8DEE6);
  background: var(--mpm-map-bg, #E9EEF3);
}
.mp-na-cap { font-size: calc(14px * var(--mp-fs, 1)); line-height: 1.5; color: var(--mp-text-muted, #5B6676); }
.mp-na-legend { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.mp-na-legend li { display: flex; align-items: center; gap: 8px; color: var(--mp-text-primary, #191919); }
.mp-na-lg { flex: 0 0 auto; width: calc(14px * var(--mp-fs, 1)); height: calc(14px * var(--mp-fs, 1)); border-radius: 50%; box-sizing: border-box; }
.mp-na-lg--me { background: var(--mpm-pin, var(--mp-blue, #0A66C2)); border: 3px solid var(--mp-white, #FFFFFF); box-shadow: 0 0 0 1px var(--mpm-pin, var(--mp-blue, #0A66C2)); }
.mp-na-lg--job { background: var(--mp-green, #057642); border: 2px solid var(--mp-white, #FFFFFF); box-shadow: 0 0 0 1px var(--mp-green, #057642); }
.mp-na-lg--out { background: color-mix(in srgb, var(--mp-text-muted, #5B6676) 40%, #FFFFFF); border: 2px solid var(--mp-white, #FFFFFF); box-shadow: 0 0 0 1px color-mix(in srgb, var(--mp-text-muted, #5B6676) 60%, #FFFFFF); }
.mp-na-lg--ring { border: 2px dashed var(--mpm-area-stroke, var(--mp-blue, #0A66C2)); }
.mp-na-capnote { margin: 4px 0 0; }
.mp-na-results { display: flex; flex-direction: column; gap: 8px; }
.mp-na-count {
  padding: 10px 14px; border-radius: 12px; font-size: calc(16px * var(--mp-fs, 1)); font-weight: 700; line-height: 1.45;
  background: var(--mp-st-info-bg, #DCEBFA); border: 1px solid var(--mp-st-info-line, #A9CBEF); color: var(--mp-st-info-ink, #0A5CAD);
}
.mp-na-count.is-hit { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; background: var(--mp-st-ok-bg, #DDF1E5); border-color: var(--mp-st-ok-line, #A9D9BC); color: var(--mp-st-ok-ink, #146C43); }
.mp-na-nw { white-space: nowrap; }
.mp-na-n {
  display: inline-flex; align-items: center; justify-content: center; min-width: calc(32px * var(--mp-fs, 1)); height: calc(32px * var(--mp-fs, 1));
  padding: 0 8px; box-sizing: border-box; border-radius: var(--mp-radius-pill, 999px); background: var(--mp-green, #057642); color: var(--mp-white, #FFFFFF); font-weight: 800;
}
.mp-na-jobs { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; }
.mp-na-jobc {
  border-radius: 12px; overflow: hidden;
  background: var(--mp-surface-1, #FFFFFF); border: 1px solid var(--mp-line-1, #D8DEE6); box-shadow: var(--mp-elev-1, 0 1px 2px rgba(15,23,42,.05), 0 2px 10px rgba(15,23,42,.05));
}
.mp-na-jobc:has(> a.mp-na-job:hover) { border-color: var(--mp-blue, #0A66C2); }
.mp-na-job {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  min-height: 56px; padding: 10px 12px;
  color: var(--mp-text-primary, #191919); text-decoration: none;
}
.mp-na-job:hover { text-decoration: none; color: var(--mp-text-primary, #191919); }
.mp-na-job:focus-visible { outline: 3px solid var(--mp-blue-hover, #004182); outline-offset: -3px; border-radius: 12px; }
/* NEAR-APPLY-01: gombsor a kártyán belül, elválasztó vonal alatt */
.mp-na-job-acts { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 10px 12px; border-top: 1px solid var(--mp-line-2, #E3E8EF); }
.mp-na-apply {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; max-width: 100%;
  padding: 8px 18px; border-radius: var(--mp-radius-pill, 999px); box-sizing: border-box;
  background: var(--mp-blue, #0A66C2); border: 1px solid var(--mp-blue, #0A66C2); color: var(--mp-white, #FFFFFF);
  font-size: calc(15px * var(--mp-fs, 1)); font-weight: 700; text-decoration: none; text-align: center;
}
.mp-na-apply:hover { background: var(--mp-blue-hover, #004182); border-color: var(--mp-blue-hover, #004182); color: var(--mp-white, #FFFFFF); text-decoration: none; }
.mp-na-apply:focus-visible { outline: 3px solid var(--mp-blue-hover, #004182); outline-offset: 2px; }
.mp-na-apply svg { flex: 0 0 auto; }
/* a lapok saját link- / span-színe (Fiókom kártyái, navbar) a kék gombon sötét feliratot adott — a gomb színe rögzített */
.mp-na a.mp-na-apply, .mp-na a.mp-na-apply :is(span, svg) { color: var(--mp-white, #FFFFFF) !important; }
.mp-na .mp-na-applied :is(span, svg) { color: var(--mp-st-ok-ink, #146C43) !important; }
.mp-na-applied {
  margin: 0; display: flex; align-items: flex-start; gap: 8px; padding: 8px 12px; border-radius: 10px;
  background: var(--mp-st-ok-bg, #DDF1E5); border: 1px solid var(--mp-st-ok-line, #A9D9BC); color: var(--mp-st-ok-ink, #146C43);
  font-size: calc(15px * var(--mp-fs, 1)); font-weight: 600; line-height: 1.4;
}
.mp-na-applied svg { flex: 0 0 auto; margin-top: 1px; }
@media (max-width: 600px) { .mp-na-apply, .mp-na-applied { flex: 1 1 100%; } }
.mp-na-job-ic {
  flex: 0 0 auto; width: 36px; height: 36px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--mp-st-ok-bg, #E7F5EC); color: var(--mp-green, #057642);
}
.mp-na-job-main { flex: 1 1 180px; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.mp-na-job-t { font-size: calc(15px * var(--mp-fs, 1)); font-weight: 700; overflow-wrap: anywhere; }
.mp-na-job-s { font-size: calc(14px * var(--mp-fs, 1)); color: var(--mp-text-muted, #5B6676); overflow-wrap: anywhere; }
.mp-na-job-p { font-size: calc(14px * var(--mp-fs, 1)); font-weight: 600; color: var(--mp-st-ok-ink, #14532D); }
.mp-na-job-k {
  flex: 0 0 auto; display: inline-flex; align-items: center; gap: 4px;
  padding: 4px 10px; border-radius: var(--mp-radius-pill, 999px);
  background: var(--mp-blue-light, #E8F0FE); color: var(--mp-blue-hover, #004182);
  font-size: calc(14px * var(--mp-fs, 1)); font-weight: 700; white-space: nowrap;
}
.mp-na-job-go { flex: 0 0 auto; color: var(--mp-text-muted, #5B6676); display: inline-flex; }
.mp-na-more {
  align-self: flex-start; min-height: 44px; padding: 8px 4px; border: 0; background: none; cursor: pointer;
  font: inherit; font-size: calc(15px * var(--mp-fs, 1)); font-weight: 700; color: var(--mp-blue, #0A66C2);
  text-decoration: underline; text-underline-offset: 3px;
}
.mp-na-place { display: flex; flex-direction: column; gap: 8px; margin-top: 4px; padding: 12px; border-radius: 12px; background: var(--mp-surface-2, #F6F8FB); border: 1px solid var(--mp-line-2, #E3E8EF); }
.mp-na-prow { display: flex; gap: 8px; flex-wrap: wrap; }
.mp-na-pin {
  flex: 1 1 200px; min-width: 0; min-height: 44px; padding: 8px 12px; border-radius: 10px;
  border: 1px solid var(--mp-input-border, #CBD2DC); background: var(--mp-white, #FFFFFF);
  font: inherit; font-size: calc(16px * var(--mp-fs, 1)); color: var(--mp-text-primary, #191919);
}
.mp-na-pin:focus { outline: 3px solid var(--mp-blue-light, #E8F0FE); border-color: var(--mp-blue, #0A66C2); }
.mp-na-btn--sm { padding: 8px 16px; }
.mp-na-sugg { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.mp-na-sugg button {
  min-height: 44px; padding: 6px 14px; border-radius: var(--mp-radius-pill, 999px);
  border: 1px solid var(--mp-line-1, #D8DEE6); background: var(--mp-white, #FFFFFF); color: var(--mp-text-primary, #191919);
  font: inherit; font-size: calc(15px * var(--mp-fs, 1)); font-weight: 600; cursor: pointer;
}
.mp-na-sugg button:hover, .mp-na-sugg button:focus-visible { border-color: var(--mp-blue, #0A66C2); color: var(--mp-blue, #0A66C2); outline: none; }
.mp-na-pmsg { margin: 0; min-height: 0; font-size: calc(14px * var(--mp-fs, 1)); color: var(--mp-text-muted, #5B6676); }
.mp-na-pmsg:empty { display: none; }
@media (max-width: 600px) {
  .mp-na-prow .mp-na-btn { flex: 1 1 100%; }
  .mp-na-map { height: calc(220px * var(--mp-fs, 1)); }
}
.mp-ja-subhead { margin: 4px 0 8px; font-size: calc(16px * var(--mp-fs, 1)); font-weight: 700; color: var(--mp-text-primary, #191919); }
@media (max-width: 600px) {
  .mp-na { padding: 14px; }
  .mp-na-pill { flex: 1 1 100%; }
  .mp-na-btn { flex: 1 1 100%; }
  .mp-na-head--compact .mp-na-ghost { flex: 1 1 100%; }
}

/* MINE-BTN-FIT-01 (2026.10.24, László: „az »Értesítést kérek a szakmáimra« a másik telefonomon kilóg a kártyából”):
   a gomb több helyen él (Fiókom, Gyors ajánlások, „Mi történt?”, Munkalehetőségek) — az ottani gomb-stílusok egy
   része nem tördel (white-space: nowrap), így keskeny telefonon / nagy betűnél kilógott. EGY szabály mindre. */
button[data-ja-mine] { max-width: 100%; min-width: 0; height: auto; white-space: normal !important; text-align: center; line-height: 1.3; box-sizing: border-box; }
button[data-ja-mine] span { min-width: 0; overflow-wrap: break-word; }

/* NEAR-NOTIF-01: a Fiókom értesítés-beállításainál a környékbeli értesítő állapota */
.mp-npn[hidden] { display: none; }
.mp-npn {
  margin: 12px 0 0; padding: 10px 14px; border-radius: 12px; line-height: 1.5;
  font-size: calc(14px * var(--mp-fs, 1));
  background: var(--mp-st-off-bg, #F1F3F6); border: 1px solid var(--mp-st-off-line, #D8DEE6); color: var(--mp-text-primary, #191919);
}
.mp-npn.is-on { background: var(--mp-st-ok-bg, #DDF1E5); border-color: var(--mp-st-ok-line, #A9D9BC); color: var(--mp-st-ok-ink, #146C43); }
.mp-npn a { color: var(--mp-blue, #0A66C2); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
.mp-npn.is-on a { color: inherit; }

/* ==========================================================================
 * NEAR-MODERN-01 (2026.10.27, László: „modernizáld a környékbeli munkák kártyáját — a cégekét és a munkavállalókét is”)
 * Közös a munkavállalói (near-alert.js) és a céges (near-talent.js, .mp-na--co) kártyán.
 * Szerepkör-szín EGY helyen: --na-c / --na-c-dk / --na-soft (cégnél a near-talent.css írja át zöldre).
 *  - fejléc: lekerekített ikon-csempe, rövid cím + egysoros ígéret
 *  - beállítások egy fehér panelben; kiindulópont: választó-csempék (rácsban, keskeny kijelzőn egymás alatt)
 *  - csúszka: a sáv a választott távolságig színes, alatta fokozat-jelek; a km-érték kapszulában
 *  - találat-kártya: fejléc + adat-címkék (távolság, település, bér / tapasztalat, kezdés) + gombsor
 *  - a hosszú apró betűs szöveg helyett „Hogyan működik?” kapszula, gömbös felsorolással
 * ========================================================================== */
.mp-na { --na-c: var(--mp-blue, #0A66C2); --na-c-dk: var(--mp-blue-hover, #004182); --na-soft: var(--mp-blue-light, #E8F0FE); gap: 16px; padding: 20px; }
.mp-na-ico { width: 48px; height: 48px; border-radius: 14px; background: var(--na-soft); color: var(--na-c); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--na-c) 18%, transparent); }
.mp-na-ico.is-on { box-shadow: inset 0 0 0 1px var(--mp-st-ok-line, #A9D9BC); }
.mp-na-title { font-size: calc(19px * var(--mp-fs, 1)); font-weight: 800; letter-spacing: -0.01em; margin: 0 0 2px; }
.mp-na-head--compact .mp-na-title { font-size: calc(17px * var(--mp-fs, 1)); font-weight: 700; letter-spacing: 0; }
.mp-na-lead { margin: 0 0 6px; font-size: calc(16px * var(--mp-fs, 1)); font-weight: 600; line-height: 1.4; color: var(--na-c-dk); }

/* beállítások panel */
.mp-na-panel {
  display: flex; flex-direction: column; gap: 18px; padding: 16px;
  background: var(--mp-white, #FFFFFF); border: 1px solid var(--mp-line-1, #D8DEE6); border-radius: 14px;
}
.mp-na--compact .mp-na-panel { background: var(--mp-surface-2, #F6F8FB); border-color: var(--mp-line-2, #E3E8EF); }

/* kiindulópont: választó-csempék */
.mp-na-pills { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); gap: 8px; }
.mp-na-pill {
  min-height: 56px; padding: 8px 12px; border-radius: 12px; gap: 10px; width: 100%; box-sizing: border-box;
  border: 1.5px solid var(--mp-line-1, #D8DEE6); background: var(--mp-white, #FFFFFF);
  transition: border-color .15s ease, background-color .15s ease, box-shadow .15s ease;
}
.mp-na-pill svg {
  box-sizing: content-box; padding: 7px; border-radius: 10px;
  background: var(--na-soft); color: var(--na-c);
}
.mp-na-pill:hover { border-color: var(--na-c); }
.mp-na-pill.is-on {
  background: color-mix(in srgb, var(--na-c) 7%, #FFFFFF); border-color: var(--na-c); color: var(--mp-text-primary, #191919);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--na-c) 14%, transparent);
}
.mp-na-pill.is-on svg { background: var(--na-c); color: var(--mp-white, #FFFFFF); }
.mp-na-pill:focus-visible { outline-color: var(--na-c-dk); }
.mp-na-pill:disabled svg { background: var(--mp-white, #FFFFFF); color: var(--mp-disabled-text, #5E5E5E); }

/* csúszka */
.mp-na-rhead { align-items: center; }
.mp-na-val {
  display: inline-flex; align-items: center; min-height: 36px; padding: 2px 14px; border-radius: var(--mp-radius-pill, 999px);
  background: var(--na-soft); color: var(--na-c-dk); font-size: calc(20px * var(--mp-fs, 1));
}
.mp-na-range { --p: 50%; height: 40px; accent-color: var(--na-c); }
.mp-na-range::-webkit-slider-runnable-track {
  height: 10px; background: linear-gradient(to right, var(--na-c) 0, var(--na-c) var(--p), var(--mp-line-1, #D8DEE6) var(--p));
}
.mp-na-range::-moz-range-track { height: 10px; background: var(--mp-line-1, #D8DEE6); }
.mp-na-range::-moz-range-progress { height: 10px; background: var(--na-c); }
.mp-na-range::-webkit-slider-thumb { width: 30px; height: 30px; margin-top: -10px; background: var(--mp-white, #FFFFFF); border: 4px solid var(--na-c); box-shadow: 0 2px 6px rgba(16,24,40,.25); }
.mp-na-range::-moz-range-thumb { width: 22px; height: 22px; background: var(--mp-white, #FFFFFF); border: 4px solid var(--na-c); box-shadow: 0 2px 6px rgba(16,24,40,.25); }
.mp-na-range:focus-visible { outline-color: var(--na-c-dk); }
/* fokozat-jelek: a csúszka gombjának középvonalához igazítva (gomb 30 px) */
.mp-na-scale { position: relative; display: block; height: calc(22px * var(--mp-fs, 1)); margin: -4px 0 0; }
.mp-na-scale span {
  position: absolute; top: 0; left: calc(15px + (100% - 30px) * var(--x, 0)); transform: translateX(-50%);
  white-space: nowrap; font-size: calc(14px * var(--mp-fs, 1)); font-variant-numeric: tabular-nums; color: var(--mp-text-muted, #5B6676);
}
.mp-na-scale span:first-child { transform: translateX(-15px); }
.mp-na-scale span:last-child { transform: translateX(calc(-100% + 15px)); }
.mp-na-scale span.is-in { color: var(--na-c-dk); font-weight: 700; }

/* darabszám: szám-csempe + szöveg */
.mp-na-count { border-radius: 14px; padding: 12px 16px; }
.mp-na-count.is-hit { gap: 6px 12px; padding: 12px 16px; }
.mp-na-n { min-width: calc(44px * var(--mp-fs, 1)); height: calc(44px * var(--mp-fs, 1)); border-radius: 12px; font-size: calc(20px * var(--mp-fs, 1)); font-variant-numeric: tabular-nums; }

/* találat-kártyák */
.mp-na-jobs { gap: 10px; }
.mp-na-jobc { border-radius: 14px; transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease; }
.mp-na-jobc:has(> a.mp-na-job:hover) { border-color: var(--na-c); box-shadow: 0 4px 16px rgba(15,23,42,.08); transform: translateY(-1px); }
@media (prefers-reduced-motion: reduce) { .mp-na-jobc { transition: none; } .mp-na-jobc:has(> a.mp-na-job:hover) { transform: none; } }
.mp-na-job { align-items: flex-start; gap: 10px 12px; padding: 14px 14px 12px; }
.mp-na-job-ic { width: 44px; height: 44px; border-radius: 12px; }
.mp-na-job-main { flex: 1 1 0; gap: 2px; padding-top: 1px; }
.mp-na-job-t { font-size: calc(16px * var(--mp-fs, 1)); font-weight: 750; line-height: 1.3; }
.mp-na-job-go { align-self: center; width: 32px; height: 32px; border-radius: 50%; align-items: center; justify-content: center; background: var(--mp-surface-2, #F6F8FB); }
.mp-na-jobc:has(> a.mp-na-job:hover) .mp-na-job-go { background: var(--na-soft); color: var(--na-c); }
.mp-na-chips { flex: 1 1 100%; display: flex; flex-wrap: wrap; gap: 6px; }
.mp-na-chip {
  display: inline-flex; align-items: center; gap: 6px; max-width: 100%; box-sizing: border-box;
  padding: 4px 10px; border-radius: var(--mp-radius-pill, 999px);
  background: var(--mp-surface-2, #F6F8FB); border: 1px solid var(--mp-line-2, #E3E8EF); color: var(--mp-text-primary, #191919);
  font-size: calc(14px * var(--mp-fs, 1)); font-weight: 600; line-height: 1.35;
}
.mp-na-chip span { overflow-wrap: anywhere; }
.mp-na-chip svg { flex: 0 0 auto; color: var(--mp-text-muted, #5B6676); }
.mp-na-chip--k { background: var(--na-soft); border-color: color-mix(in srgb, var(--na-c) 25%, transparent); color: var(--na-c-dk); font-weight: 700; }
.mp-na-chip--k svg { color: var(--na-c); }
.mp-na-chip--pay { background: var(--mp-st-ok-bg, #DDF1E5); border-color: var(--mp-st-ok-line, #A9D9BC); color: var(--mp-st-ok-ink, #146C43); font-weight: 700; }
.mp-na-chip--pay svg { color: var(--mp-st-ok-ink, #146C43); }
.mp-na-job-acts { padding: 10px 14px 12px; background: var(--mp-surface-2, #F6F8FB); }
.mp-na-more {
  align-self: center; padding: 8px 20px; text-decoration: none;
  border: 1px solid var(--na-c); border-radius: var(--mp-radius-pill, 999px); background: var(--mp-white, #FFFFFF); color: var(--na-c-dk);
}
.mp-na-more:hover { background: var(--na-soft); }

/* térkép */
.mp-na-map { border-radius: 14px; box-shadow: var(--mp-elev-1, 0 1px 2px rgba(15,23,42,.05), 0 2px 10px rgba(15,23,42,.05)); }
.mp-na-legend { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: 6px 16px; }

/* „Hogyan működik?” — kapszula, kinyitva gömbös felsorolás */
.mp-na-how { margin: 0; }
.mp-na-how > summary {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 8px 18px; box-sizing: border-box;
  border-radius: var(--mp-radius-pill, 999px); border: 1px solid var(--mp-line-1, #D8DEE6); background: var(--mp-white, #FFFFFF);
  font-size: calc(15px * var(--mp-fs, 1)); font-weight: 700; color: var(--na-c-dk); cursor: pointer; list-style: none;
}
.mp-na-how > summary::-webkit-details-marker { display: none; }
.mp-na-how > summary::after {
  content: ''; width: 8px; height: 8px; margin-left: 2px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
  transform: rotate(45deg) translateY(-2px); transition: transform .15s ease;
}
.mp-na-how[open] > summary::after { transform: rotate(-135deg) translateY(-2px); }
.mp-na-how > summary:hover { border-color: var(--na-c); }
.mp-na-how > summary:focus-visible { outline: 3px solid var(--na-c-dk); outline-offset: 2px; }
/* ORB-CARDS-01 (10.27): ikonos gömbök + tételenkénti kártya a közös stílusból (css/mp-surfaces.css); a régi fehér
   doboz és a tételek közti külön margó megszűnt — az utóbbi szakította meg a gömböket összekötő vonalat */
.mp-na-howl { --orb-c: var(--na-c); margin: 12px 0 0; padding: 0; }

@media (max-width: 600px) {
  .mp-na { padding: 16px 14px; }
  .mp-na-panel { padding: 14px 12px; }
  .mp-na-job { padding: 12px; }
  .mp-na-more { align-self: stretch; }
}

/* NEAR-SMOOTH-01 (2026.10.27, László: „a csúszkán nem látom, hogy színeződne — végig kék marad”):
   a kitöltés nem a belső sáv álelemén (::-webkit-slider-runnable-track) él, mert egyes böngészők oda nem adják
   tovább a --p változót, hanem MAGÁN a csúszkán: két kerek véggel + a gomb közepéig színes sáv (--p = 0–1).
   A gomb közepe: 15 px + (szélesség − 30 px) × p — a sáv-doboz 5 px-től indul, ezért ott 10 px + (100% − 20 px) × p. */
.mp-na-range {
  --p: .5;
  background:
    radial-gradient(circle at 5px 50%, var(--na-c) 4.5px, transparent 5.5px) left center / 10px 10px no-repeat,
    radial-gradient(circle at 5px 50%, var(--mp-line-1, #D8DEE6) 4.5px, transparent 5.5px) right center / 10px 10px no-repeat,
    linear-gradient(to right, var(--na-c) 0, var(--na-c) calc(10px + (100% - 20px) * var(--p)), var(--mp-line-1, #D8DEE6) calc(10px + (100% - 20px) * var(--p))) center / calc(100% - 10px) 10px no-repeat;
}
.mp-na-range::-webkit-slider-runnable-track { background: transparent; }
.mp-na-range::-moz-range-track { background: transparent; }
.mp-na-range::-moz-range-progress { background: transparent; }