/* ─────────────────────────────────────────────────────────────────────────────
   WorkNow — Εμφάνιση του διαδραστικού χάρτη Ελλάδας (/js/greece-map.js).

   Ήταν inline στην index.html· βγήκε εδώ όταν ο χάρτης μπήκε και στη
   job_categories.html, ώστε οι δύο σελίδες να μοιράζονται ένα αρχείο αντί για
   δύο αντίγραφα που θα απέκλιναν. Απαιτεί τη δομή που περιγράφει το
   greece-map.js: <section id="greece-map"> με #labels, #seo, #loader.
   ───────────────────────────────────────────────────────────────────────────── */

/* ── Διαδραστικός χάρτης Ελλάδας ── */
#greece-map {
  position: relative;
  width: 100%;
  margin: 0 0 4rem;
  height: clamp(520px, 88vh, 980px);
  overflow: hidden;
  /* Το ύψος είναι σταθερό, οπότε ο browser δεν χρειάζεται να ξαναϋπολογίζει
     το layout της σελίδας για ό,τι συμβαίνει μέσα στον χάρτη. */
  contain: layout paint;
  border-top: 1px solid rgba(30, 60, 90, 0.08);
  border-bottom: 1px solid rgba(30, 60, 90, 0.08);
  background: radial-gradient(120% 120% at 50% 18%, #e4f4fd 0%, #c4e7f8 55%, #a2daf2 100%);
}

#greece-map canvas { display: block; }

/* ── Πίνακας υποπεριοχών (Αθήνα / Θεσσαλονίκη) ─────────────────────────
   Ζει ΜΕΣΑ στο #greece-map, ώστε να μη σκεπάζει όλη τη σελίδα. */
#greece-map .area-picker {
  position: absolute;
  inset: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  background: rgba(16, 32, 48, 0.35);
  backdrop-filter: blur(2px);
  animation: areaFade 0.18s ease-out;
}

@keyframes areaFade { from { opacity: 0 } to { opacity: 1 } }

#greece-map .area-panel {
  width: min(380px, 100%);
  max-height: 100%;
  overflow-y: auto;
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 16px 44px rgba(0, 0, 0, 0.25);
  padding: 1.1rem 1.25rem 1.25rem;
}

#greece-map .area-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

#greece-map .area-head h3 {
  margin: 0;
  font-size: 1.15rem;
  font-weight: 800;
  color: #17293b;
}

#greece-map .area-close {
  border: none;
  background: #f1f4f7;
  color: #55677a;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  font-size: 1.25rem;
  line-height: 1;
  cursor: pointer;
  flex-shrink: 0;
}

#greece-map .area-close:hover { background: #e2e8ee; color: #17293b; }

#greece-map .area-hint {
  margin: 0.35rem 0 0.9rem;
  font-size: 0.85rem;
  color: #6b7a89;
}

#greece-map .area-list { display: grid; gap: 0.35rem; }

#greece-map .area-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.6rem 0.8rem;
  border-radius: 9px;
  text-decoration: none;
  color: #22384c;
  font-weight: 600;
  font-size: 0.95rem;
  transition: background 0.15s;
}

#greece-map .area-item:hover { background: #eef5fd; }

#greece-map .area-item.all {
  background: #f3f8ff;
  border: 1px solid #d3e5fb;
  margin-bottom: 0.3rem;
}

#greece-map .area-count {
  flex-shrink: 0;
  min-width: 26px;
  text-align: center;
  padding: 0.1rem 0.45rem;
  border-radius: 999px;
  background: #1976d2;
  color: #fff;
  font-size: 0.8rem;
  font-weight: 700;
}

/* Περιοχή χωρίς θέσεις: ορατή αλλά σβηστή — ο χρήστης βλέπει ότι υπάρχει,
   χωρίς να την πατήσει άδικα. */
#greece-map .area-item.empty { color: #93a2b1; }
#greece-map .area-item.empty .area-count { background: #c3ccd5; }

/* Σε στενές οθόνες χαμηλώνουμε το ύψος, ώστε ο χάρτης να γεμίζει το πλαίσιο
   αντί να «χάνεται» σε μεγάλα κενά πάνω-κάτω. */
@media (max-width: 700px) {
  #greece-map {
    height: clamp(340px, 48vh, 460px);
  }
}

#labels { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }

#greece-map .label {
  position: absolute;
  /* Η θέση δίνεται αποκλειστικά με transform από το greece-map.js. Με
     left/top κάθε καρέ προκαλούσε reflow ολόκληρου του #labels. */
  left: 0;
  top: 0;
  transform: translate(-50%, -140%);
  background: rgba(255, 255, 255, 0.96);
  color: #22303a;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .2px;
  padding: 5px 11px;
  border-radius: 999px;
  white-space: nowrap;
  box-shadow: 0 4px 14px rgba(30, 60, 90, 0.18);
  border: 1px solid rgba(255, 255, 255, 0.9);
  opacity: 0;
  transition: opacity .18s ease;
}

#greece-map .label::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -5px;
  transform: translateX(-50%);
  border: 5px solid transparent;
  border-top-color: rgba(255, 255, 255, 0.96);
  border-bottom: 0;
}

#greece-map .label .label-jobs { color: #1d6fd0; font-weight: 700; }

/* Ορατές είναι το πολύ δύο ετικέτες· μόνο αυτές παίρνουν δικό τους layer. */
#greece-map .label.show { opacity: 1; will-change: transform; }

#greece-map .label.sel {
  background: #1d6fd0;
  color: #fff;
  box-shadow: 0 6px 18px rgba(29, 111, 208, 0.45);
}

#greece-map .label.sel .label-jobs { color: #d7e9ff; }
#greece-map .label.sel::after { border-top-color: #1d6fd0; }

#loader {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 16px;
  color: #5a7382;
  font-size: 15px;
  font-weight: 500;
  transition: opacity .5s ease;
}

#loader.hide { opacity: 0; pointer-events: none; }

.spin {
  width: 34px;
  height: 34px;
  border: 3px solid #c3d7e2;
  border-top-color: #1d6fd0;
  border-radius: 50%;
  animation: sp .9s linear infinite;
}

#greece-map:not(.map-active) .spin { animation: none; }

@keyframes sp { to { transform: rotate(360deg); } }

#err {
  max-width: 340px;
  text-align: center;
  color: #2f5f96;
  font-size: 14px;
  line-height: 1.5;
  display: none;
}

/* Κρυφά links για SEO / crawlers */
#seo {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}