/* ============================================================================
 * MelóPont — Álláshirdetés feladása regisztráció előtt (JOB-DRAFT-01, 2026.10.15) — js/mp-job-draft.js
 * Előtag: mp-jdr-. Az oldal cégeknek szól: a fejléc és a fő gomb a céges zöld (a vendég alap-kékje helyett).
 * Kártyák lekerekítése: css/card-radius.css (.mp-jdr-card, .mp-jdr-banner). Minden betű ≥ 14 px, a szorzóval nő.
 * ========================================================================== */
.mp-jdr-page {
  --mp-role: var(--mp-green); --mp-role-hover: var(--mp-green-dark);
  --mp-tint-role: var(--mp-tint-company); --mp-tint-role-line: var(--mp-tint-company-line);
  max-width: 760px; margin: 0 auto; padding: var(--mp-page-top) 16px 48px; box-sizing: border-box;
}

/* 3 lépés */
/* FLOW-ORBS-01 (10.15, László): a 3 lépés gömbös, függőleges folyamatábra (css/mp-orbs.css) — nem kártyák,
   mert az új felhasználó a kártyát gombnak nézte és nyomkodta. A „Most itt tartasz” sima szöveg, nem kapszula. */
.mp-jdr-flowcard { padding-bottom: 12px; }
.mp-jdr-flowcard .mp-jdr-title { margin-bottom: 6px; }
.mp-jdr-flow .mp-orb { cursor: default; }
.mp-jdr-here {
  display: inline-flex; align-items: center; gap: 6px; margin-left: 4px; white-space: nowrap;
  font-size: calc(14px * var(--mp-fs, 1)); font-weight: 700; color: var(--mp-role);
}
.mp-jdr-here::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
@media (max-width: 420px) { .mp-jdr-here { display: flex; margin: 2px 0 0; } }

.mp-jdr-private, .mp-jdr-restored, .mp-jdr-rolenote {
  display: flex; align-items: flex-start; flex-wrap: wrap; gap: 8px 10px; margin: 0 0 14px; padding: 12px 14px;
  font-size: calc(14px * var(--mp-fs, 1)); line-height: 1.5; color: var(--mp-text-primary);
  background: var(--mp-surface-2); border: 1px solid var(--mp-line-2); border-radius: 12px;
}
.mp-jdr-private svg { flex: 0 0 auto; width: 20px; height: 20px; color: var(--mp-role); margin-top: 1px; }
.mp-jdr-private span { flex: 1 1 0; min-width: 0; }
.mp-jdr-restored { align-items: center; justify-content: space-between; background: var(--mp-st-ok-bg); border-color: var(--mp-st-ok-line); }
.mp-jdr-rolenote { display: block; background: var(--mp-tint-warm, var(--mp-surface-2)); border-color: var(--mp-tint-warm-line, var(--mp-line-2)); }
.mp-jdr-rolenote[hidden], .mp-jdr-restored[hidden] { display: none; }

/* Kártyák */
.mp-jdr-card {
  margin: 0 0 16px; padding: 20px; background: var(--mp-surface-1);
  border: 1px solid var(--mp-line-1); box-shadow: var(--mp-elev-1); border-radius: var(--mp-card-radius);
}
.mp-jdr-title { margin: 0 0 14px; font-size: calc(19px * var(--mp-fs, 1)); font-weight: 800; color: var(--mp-text-primary); }

/* Űrlap */
.mp-jdr-form { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }
.mp-jdr-form .mp-jdr-title { margin-bottom: 0; }
.mp-jdr-field { display: grid; gap: 6px; min-width: 0; }
.mp-jdr-label { font-size: calc(15px * var(--mp-fs, 1)); font-weight: 700; color: var(--mp-text-primary); }
.mp-jdr-req { color: var(--mp-st-urgent-ink, #B42318); }
.mp-jdr-opt { font-weight: 500; color: var(--mp-text-muted); }
.mp-jdr-input {
  width: 100%; box-sizing: border-box; min-height: 48px; padding: 10px 12px;
  font: inherit; font-size: calc(16px * var(--mp-fs, 1)); color: var(--mp-text-primary);
  background: var(--mp-surface-1); border: 1px solid var(--mp-line-1); border-radius: 10px;
}
textarea.mp-jdr-input { min-height: calc(140px * var(--mp-fs, 1)); resize: vertical; line-height: 1.5; }
.mp-jdr-input:focus { outline: none; border-color: var(--mp-role); box-shadow: 0 0 0 3px var(--mp-tint-role-line); }
.mp-jdr-hint { margin: 0; font-size: calc(14px * var(--mp-fs, 1)); color: var(--mp-text-muted); line-height: 1.45; }
.mp-jdr-err { margin: 0; font-size: calc(14px * var(--mp-fs, 1)); font-weight: 600; color: var(--mp-st-urgent-ink, #B42318); }
.mp-jdr-err[hidden] { display: none; }

/* Szakma-kereső */
.mp-jdr-combo { position: relative; }
.mp-jdr-sug {
  position: absolute; z-index: 30; left: 0; right: 0; top: calc(100% + 4px); margin: 0; padding: 4px; list-style: none;
  max-height: calc(320px * var(--mp-fs, 1)); overflow-y: auto;
  background: var(--mp-surface-1); border: 1px solid var(--mp-line-1); border-radius: 12px; box-shadow: var(--mp-elev-2, 0 8px 24px rgba(16, 24, 40, .14));
}
.mp-jdr-sug[hidden] { display: none; }
.mp-jdr-sug li {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; padding: 10px 12px; min-height: 44px; box-sizing: border-box;
  border-radius: 8px; cursor: pointer; font-size: calc(15px * var(--mp-fs, 1));
}
.mp-jdr-sug li:hover, .mp-jdr-sug li[aria-selected="true"] { background: var(--mp-tint-role); }
.mp-jdr-sug-n { font-weight: 700; color: var(--mp-text-primary); }
.mp-jdr-sug-c { font-size: calc(14px * var(--mp-fs, 1)); color: var(--mp-text-muted); }
.mp-jdr-sug .mp-jdr-sug-none { cursor: default; color: var(--mp-text-muted); }
.mp-jdr-sug .mp-jdr-sug-none:hover { background: none; }
.mp-jdr-picked {
  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 6px 12px;
  padding: 10px 14px; background: var(--mp-tint-role); border: 2px solid var(--mp-role); border-radius: 10px;
}
.mp-jdr-picked[hidden] { display: none; }
.mp-jdr-picked-n { font-size: calc(17px * var(--mp-fs, 1)); font-weight: 800; color: var(--mp-text-primary); overflow-wrap: break-word; min-width: 0; }

/* Gombok */
.mp-jdr-actions { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; margin-top: 4px; }
.mp-jdr-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 10px 18px; box-sizing: border-box;
  font: inherit; font-size: calc(15px * var(--mp-fs, 1)); font-weight: 700; text-align: center; text-decoration: none; cursor: pointer;
  color: var(--mp-role); background: var(--mp-surface-1); border: 2px solid var(--mp-role); border-radius: var(--mp-radius-pill);
}
.mp-jdr-btn:hover { background: var(--mp-tint-role); color: var(--mp-role-hover); }
.mp-jdr-btn--primary { color: var(--mp-white, #FFFFFF); background: var(--mp-role); }
.mp-jdr-btn--primary:hover { color: var(--mp-white, #FFFFFF); background: var(--mp-role-hover); border-color: var(--mp-role-hover); }
.mp-jdr-btn--big { min-height: 54px; font-size: calc(17px * var(--mp-fs, 1)); }
.mp-jdr-btn:disabled { cursor: not-allowed; color: var(--mp-disabled-text); background: var(--mp-disabled-bg); border-color: var(--mp-disabled-border, var(--mp-disabled-bg)); }
.mp-jdr-btn svg { flex: 0 0 auto; }
.mp-jdr-btn[hidden] { display: none; }
.mp-jdr-btn:focus-visible, .mp-jdr-linkbtn:focus-visible { outline: 3px solid var(--mp-role); outline-offset: 2px; }
.mp-jdr-linkbtn {
  padding: 4px 0; border: 0; background: none; cursor: pointer; font: inherit; font-size: calc(14px * var(--mp-fs, 1));
  font-weight: 700; color: var(--mp-role); text-decoration: underline; text-underline-offset: 2px;
}

/* Előnézet — a Munkalehetőségek kártyájához hasonló, egyszerűsített */
.mp-jdr-prev { padding: 16px; background: var(--mp-surface-2); border: 1px solid var(--mp-line-2); border-radius: 12px; display: grid; gap: 6px; }
.mp-jdr-prev p { margin: 0; overflow-wrap: break-word; }
.mp-jdr-prev-t { font-size: calc(18px * var(--mp-fs, 1)); font-weight: 800; color: var(--mp-text-primary); }
.mp-jdr-prev-m { font-size: calc(14px * var(--mp-fs, 1)); color: var(--mp-text-muted); }
.mp-jdr-prev-pay { font-size: calc(16px * var(--mp-fs, 1)); font-weight: 800; color: var(--mp-green-dark); }
.mp-jdr-prev-d { font-size: calc(15px * var(--mp-fs, 1)); line-height: 1.5; color: var(--mp-text-primary); white-space: pre-line; }
.mp-jdr-prev-hint { font-size: calc(14px * var(--mp-fs, 1)); color: var(--mp-text-muted); font-style: italic; }

/* Jó tudni */
.mp-jdr-faq dl { margin: 0; display: grid; gap: 4px; }
.mp-jdr-faq dt { margin-top: 10px; font-size: calc(15px * var(--mp-fs, 1)); font-weight: 700; color: var(--mp-text-primary); }
.mp-jdr-faq dt:first-child { margin-top: 0; }
.mp-jdr-faq dd { margin: 0; font-size: calc(15px * var(--mp-fs, 1)); line-height: 1.5; color: var(--mp-text-primary); }

/* Céges regisztráció: „az álláshirdetésed elmentve” */
.mp-jdr-regnote {
  display: flex; align-items: flex-start; gap: 10px; margin: 0 0 16px; padding: 14px 16px;
  background: var(--mp-st-ok-bg); border: 1px solid var(--mp-st-ok-line); border-radius: 12px; color: var(--mp-text-primary);
}
.mp-jdr-regnote svg { flex: 0 0 auto; color: var(--mp-st-ok-ink); margin-top: 2px; }
.mp-jdr-regnote p { margin: 0; font-size: calc(15px * var(--mp-fs, 1)); line-height: 1.5; min-width: 0; }

/* Vezérlőpult: sáv + jelzés a feladó ablakban */
.mp-jdr-banner {
  display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; margin: 0 0 16px; padding: 16px 18px;
  background: var(--mp-tint-warm, var(--mp-surface-2)); border: 2px solid var(--mp-tint-warm-line, var(--mp-line-1)); border-radius: var(--mp-card-radius);
}
.mp-jdr-banner p { margin: 0; font-size: calc(15px * var(--mp-fs, 1)); line-height: 1.5; color: var(--mp-text-primary); }
.mp-jdr-banner-btns { display: flex; flex-wrap: wrap; gap: 8px; }
.mp-jdr-modalnote {
  margin: 0 0 14px; padding: 12px 14px; font-size: calc(14px * var(--mp-fs, 1)); line-height: 1.5; color: var(--mp-text-primary);
  background: var(--mp-st-ok-bg); border: 1px solid var(--mp-st-ok-line); border-radius: 10px;
}

@media (max-width: 600px) {
  .mp-jdr-page { padding-top: 12px; }
  .mp-jdr-card { padding: 16px; }
}

/* ============================================================================
 * WORK-DRAFT-01 (10.15): Munkát keresek — munkavállalóknak, regisztráció előtt (js/mp-work-draft.js)
 * Ugyanaz a váz (mp-jdr-), a szerepkör-szín itt a munkavállalói kék.
 * ========================================================================== */
.mp-jdr-page.mp-wdr-page {
  --mp-role: var(--mp-blue); --mp-role-hover: var(--mp-blue-hover);
  --mp-tint-role: var(--mp-tint-worker); --mp-tint-role-line: var(--mp-tint-worker-line);
}
.mp-wdr-sum { margin: 0 0 12px; font-size: calc(16px * var(--mp-fs, 1)); line-height: 1.5; color: var(--mp-text-primary); overflow-wrap: anywhere; }
.mp-wdr-note { margin: 0 0 10px; font-size: calc(15px * var(--mp-fs, 1)); line-height: 1.5; color: var(--mp-text-primary); }
.mp-wdr-note a, .mp-wdr-more a, .mp-jdr-rolenote a { color: var(--mp-role); font-weight: 700; }
.mp-wdr-jobs { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; }
.mp-wdr-job-a {
  display: grid; grid-template-columns: minmax(0, 1fr); gap: 3px; padding: 14px 16px; text-decoration: none;
  background: var(--mp-surface-2); border: 1px solid var(--mp-line-2); border-radius: 12px; color: var(--mp-text-primary);
  transition: border-color .15s, background-color .15s;
}
.mp-wdr-job-a:hover { border-color: var(--mp-role); background: var(--mp-tint-role); text-decoration: none; color: var(--mp-text-primary); }
.mp-wdr-job-a:focus-visible { outline: 3px solid var(--mp-role); outline-offset: 2px; }
.mp-wdr-job-t { font-size: calc(17px * var(--mp-fs, 1)); font-weight: 800; overflow-wrap: anywhere; }
.mp-wdr-job-m, .mp-wdr-job-co { font-size: calc(14px * var(--mp-fs, 1)); color: var(--mp-text-muted); overflow-wrap: anywhere; }
.mp-wdr-job-co { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.mp-wdr-job-pay { font-size: calc(15px * var(--mp-fs, 1)); font-weight: 800; color: var(--mp-green-dark); }
.mp-wdr-job-go { display: inline-flex; align-items: center; gap: 6px; margin-top: 4px; font-size: calc(14px * var(--mp-fs, 1)); font-weight: 700; color: var(--mp-role); }
.mp-wdr-arrow { width: 7px; height: 7px; border-right: 2px solid currentColor; border-top: 2px solid currentColor; transform: rotate(45deg); }
.mp-wdr-more { margin: 14px 0 0; font-size: calc(15px * var(--mp-fs, 1)); }
.mp-wdr-gets { list-style: none; margin: 0 0 14px; padding: 0; display: grid; gap: 8px; }
.mp-wdr-gets li { display: flex; gap: 10px; align-items: flex-start; font-size: calc(15px * var(--mp-fs, 1)); line-height: 1.5; color: var(--mp-text-primary); }
.mp-wdr-gets svg { flex: 0 0 auto; margin-top: 2px; color: var(--mp-st-ok-ink); }
.mp-wdr-gets span { min-width: 0; }
.mp-wdr-alert {
  display: flex; gap: 10px; align-items: flex-start; margin: 0 0 16px; padding: 12px 14px; cursor: pointer;
  background: var(--mp-tint-role); border: 1px solid var(--mp-tint-role-line); border-radius: 12px;
  font-size: calc(15px * var(--mp-fs, 1)); line-height: 1.5; color: var(--mp-text-primary);
}
.mp-wdr-alert input { flex: 0 0 auto; width: 22px; height: 22px; margin: 1px 0 0; accent-color: var(--mp-role); }
.mp-wdr-alert span { min-width: 0; }
.mp-wdr-res[hidden], .mp-wdr-join[hidden] { display: none; }
#mpWdrResT:focus { outline: none; }