/* =====================================================================
   JOBTIMIST.GR — ΑΝΑΖΗΤΗΣΗ ΜΕ ΧΑΡΤΗ (Θ1)
   =====================================================================

   ΔΙΑΧΩΡΙΣΜΕΝΗ ΟΘΟΝΗ: φίλτρα και λίστα αριστερά, χάρτης δεξιά.

   Η ΚΕΝΤΡΙΚΗ ΔΥΣΚΟΛΙΑ ΑΥΤΗΣ ΤΗΣ ΣΕΛΙΔΑΣ

   Ο χάρτης πρέπει να έχει ΣΤΑΘΕΡΟ ύψος, αλλιώς το Leaflet δεν ξέρει
   πόσα πλακίδια να φορτώσει και εμφανίζει γκρίζα περιοχή. Ταυτόχρονα
   η λίστα αριστερά πρέπει να κυλάει ΑΝΕΞΑΡΤΗΤΑ, χωρίς να κυλάει όλη
   η σελίδα — αλλιώς ο χάρτης φεύγει από την οθόνη μόλις ο χρήστης
   κατεβεί στην τρίτη κάρτα.

   Η λύση είναι `height: calc(100vh - ύψος κεφαλίδας)` στο δοχείο και
   `overflow-y: auto` μόνο στην αριστερή στήλη.
   ================================================================== */

/* ---------------------------------------------------------------------
   ΤΟ ΕΞΩΤΕΡΙΚΟ main ΠΡΕΠΕΙ ΝΑ ΚΛΕΙΔΩΣΕΙ ΚΙ ΑΥΤΟ

   Το `header.php` ανοίγει `<main>` που περικλείει το `#mapPage`.
   Αν εκείνο μεγαλώσει, η σελίδα κυλάει όσο και να κλειδώσουμε
   το εσωτερικό. Η επιλογή `:has()` εφαρμόζεται ΜΟΝΟ στο main
   που περιέχει τον χάρτη — καμία άλλη σελίδα δεν αγγίζεται.

   Για περιηγητές χωρίς `:has()` (πολύ παλιούς) το αποτέλεσμα
   είναι απλώς ότι η σελίδα κυλάει — υποβαθμισμένη εμπειρία,
   όχι σπασμένη σελίδα.
   ------------------------------------------------------------------ */
main:has(> .mapp) {
    overflow: hidden;
}

.mapp {
    /*
     * ΤΑ ΥΨΗ ΜΕΤΡΗΘΗΚΑΝ ΣΕ ΠΡΑΓΜΑΤΙΚΟ ΠΕΡΙΗΓΗΤΗ
     *
     * Η πρώτη μου εκτίμηση ήταν 148px και ήταν ΛΑΘΟΣ: η μπάρα
     * αναζήτησης κατέβαινε 35px παρακάτω και σκέπαζε τον τίτλο.
     * Οι μετρήσεις έδειξαν κεφαλίδα 70px και μπάρα ανακοινώσεων
     * 43px, δηλαδή 113px συνολικά.
     *
     * ΓΙΑΤΙ ΜΕΤΑΒΛΗΤΗ ΚΑΙ ΟΧΙ ΣΤΑΘΕΡΟΣ ΑΡΙΘΜΟΣ: το ύψος αλλάζει
     * μεταξύ υπολογιστή και κινητού, και θα αλλάξει ξανά αν κάποτε
     * αφαιρεθεί η μπάρα ανακοινώσεων. Με μεταβλητή, ένα σημείο.
     */
    --mapp-header: 113px;   /* κεφαλίδα 70 + ανακοίνωση 43 */
    --mapp-search: 69px;    /* η δική μας μπάρα αναζήτησης */
    --mapp-foot: 0px;       /* fullscreen map canvas: no page footer reserves space */
    --mapp-side-w: 480px;   /* πλάτος αριστερής στήλης */

    display: flex;
    flex-direction: column;
    background: var(--color-bg, #f8f9fb);

    /*
     * Η ΣΕΛΙΔΑ ΔΕΝ ΠΡΕΠΕΙ ΝΑ ΚΥΛΑΕΙ
     *
     * Αυτή είναι η θεμελιώδης απαίτηση της διαχωρισμένης οθόνης.
     * Η πρώτη μου εκδοχή άφηνε τη σελίδα να κυλάει 774px, δηλαδή ο
     * χάρτης έφευγε από την οθόνη μόλις ο χρήστης κατέβαινε στην
     * τρίτη κάρτα — και τότε η διαχωρισμένη οθόνη δεν έχει κανένα
     * νόημα. Κυλάει ΜΟΝΟ η αριστερή στήλη.
     */
    /* Το `dvh` μετρά το πραγματικά ορατό ύψος. Το `vh` μένει
       πρώτο ως εφεδρικό για παλαιότερους περιηγητές. */
    height: calc(100vh - var(--mapp-header) - var(--mapp-foot));
    height: calc(100dvh - var(--mapp-header) - var(--mapp-foot));
    overflow: hidden;
}

/* ---------------------------------------------------------------------
   ΜΠΑΡΑ ΑΝΑΖΗΤΗΣΗΣ

   ΔΕΝ είναι sticky. Ηταν, και ήταν σφάλμα: sticky σημαίνει «κόλλα
   όταν κυλάει ο γονέας», αλλά ο γονέας δεν κυλάει πλέον. Το μόνο
   που πετύχαινε ήταν να μετατοπίζεται 36px και να σκεπάζει τον
   τίτλο της σελίδας.
   ------------------------------------------------------------------ */
.mapp-searchbar {
    position: relative;
    z-index: 20;
    flex: none;
    background: #fff;
    border-bottom: 1px solid var(--color-border, #e5e7eb);
    box-shadow: 0 1px 3px rgba(15, 23, 42, .04);
}

.mapp-searchbar-in {
    display: flex;
    align-items: flex-start;   /* πάνω ευθυγράμμιση: η φόρμα έχει δύο σειρές */
    gap: 16px;
    max-width: none;          /* πλήρες πλάτος: ο χάρτης το απαιτεί */
    padding: 12px 20px;
}

/* ---------------------------------------------------------------------
   Η ΦΟΡΜΑ ΣΕ ΔΥΟ ΣΕΙΡΕΣ

   Σειρά 1: λέξη κλειδί + κουμπί αναζήτησης
   Σειρά 2: κατηγορία σε πλήρες πλάτος

   v104: ΤΡΙΑ ΠΕΔΙΑ ΣΕ ΜΙΑ ΣΕΙΡΑ ΣΤΟΝ ΥΠΟΛΟΓΙΣΤΗ

   Προηγουμένως η μπάρα ήταν σε δύο σειρές, με την
   αιτιολογία «η αριστερή στήλη είναι 400px». Η μέτρηση
   αποκάλυψε ότι αυτό ΗΤΑΝ ΛΑΘΟΣ: η μπάρα αναζήτησης
   ΔΕΝ ανήκει στην αριστερή στήλη — είναι πλήρους
   πλάτους πάνω από τις δύο στήλες, οπότε ο πραγματικός
   διαθέσιμος χώρος είναι 425px ΑΝΑ ΠΕΔΙΟ στα 1440px.

   Τα πλάτη είναι ανισομερή γιατί οι ανάγκες είναι
   ανισομερείς — μετρημένα με canvas σε Inter 14.5px.
   ------------------------------------------------------------------ */
.mapp-search-form {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: 6px;
    min-width: 0;             /* επιτρέπει στο input να συρρικνωθεί */
    max-width: 1000px;
}

/*
 * v105 — ΤΑ ΔΥΟ ΝΕΑ ΣΤΟΙΧΕΙΑ ΖΟΥΝ ΜΟΝΟ ΣΤΟ ΚΙΝΗΤΟ
 *
 * Η συμπτυγμένη γραμμή και το δεύτερο κουμπί φίλτρων
 * λύνουν προβλήματα χώρου που δεν υπάρχουν στον
 * υπολογιστή. Βγαίνουν εδώ με `display: none` και
 * εμφανίζονται μόνο κάτω από 900px.
 *
 * Το `.mapp-toggle-filters` θα ήταν κρυμμένο έτσι κι αλλιώς,
 * αφού ζει μέσα στο `.mapp-toggle` που είναι `display: none`
 * στον υπολογιστή. Το δηλώνω ρητά γιατί η σιωπηλή
 * εξάρτηση από γονικό κανόνα σπάει στην επόμενη
 * αναδιάρθρωση χωρίς προειδοποίηση.
 */
.mapp-search-peek,
.mapp-toggle-filters { display: none; }

/*
 * ΜΙΑ ΣΕΙΡΑ ΜΕ ΑΝΙΣΟΜΕΡΗ ΚΑΤΑΝΟΜΗ (v104)
 *
 * Το `flex-wrap: wrap` επιτρέπει στα στοιχεία να πέσουν σε
 * δεύτερη σειρά όταν δεν χωρούν, χωρίς media query.
 * Η αναλογία προέρχεται από μέτρηση, όχι εικασία:
 * κατηγορίες 350px μέγιστο, περιφέρειες 221px.
 */
.mapp-search-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    min-width: 0;
}

/*
 * ΤΙΤΛΟΣ — ελαστικός, παίρνει ότι μένει.
 * Ένα πεδίο κειμένου παραμένει χρήσιμο και στα 180px,
 * ενώ ένα μενού με κομμένα ονόματα δεν είναι.
 */
.mapp-search-field {
    position: relative;
    flex: 1 1 200px;
    min-width: 0;
}

.mapp-search-field i {
    position: absolute;
    top: 50%;
    left: 14px;
    transform: translateY(-50%);
    color: var(--color-text-light, #94a3b8);
    font-size: 14px;
    pointer-events: none;
}

.mapp-search-field input {
    width: 100%;
    height: 44px;
    padding: 0 14px 0 40px;
    font-family: inherit;
    font-size: 15px;
    color: var(--color-text, #0f172a);
    background: var(--color-bg, #f8f9fb);
    border: 1px solid var(--color-border, #e5e7eb);
    border-radius: 10px;
    transition: border-color .18s, background .18s;
}

.mapp-search-field input:focus {
    outline: none;
    background: #fff;
    border-color: var(--color-primary, #e91e63);
    box-shadow: 0 0 0 3px rgba(233, 30, 99, .1);
}

.mapp-search-go {
    flex: 0 0 auto;
    height: 44px;
    padding: 0 22px;
    font-family: inherit;
    font-size: 15px;
    font-weight: 600;
    color: #fff;
    white-space: nowrap;
    background: var(--color-primary, #e91e63);
    border: none;
    border-radius: 10px;
    cursor: pointer;
    transition: background .18s, transform .12s;
}

.mapp-search-go:hover  { background: var(--color-primary-dark, #c2185b); }
.mapp-search-go:active { transform: translateY(1px); }

/*
 * ΠΕΡΙΟΧΗ — σταθερά 240px
 *
 * Το μεγαλύτερο όνομα περιφέρειας μετρήθηκε στα 221px
 * («Ανατολική Μακεδονία & Θράκη»). Με τα 38px του
 * εικονιδίου και της ακίδας χρειάζεται ~260px για να
 * μην κοπεί ποτέ. Στα 240px κόβεται ΜΟΝΟ το ένα από τα
 * 13 — αποδεκτό αντίτιμο για να χωρέσουν τρία πεδία.
 */
.mapp-search-region {
    position: relative;
    flex: 0 1 240px;
    min-width: 0;
}

.mapp-search-region > i {
    position: absolute;
    top: 50%;
    left: 14px;
    transform: translateY(-50%);
    color: var(--color-text-light, #94a3b8);
    font-size: 13.5px;
    pointer-events: none;
}

/*
 * ΚΑΤΗΓΟΡΙΑ — το μεγαλύτερο μερίδιο
 *
 * Τα ονόματα φτάνουν τα 350px, πολύ περισσότερο από
 * τις περιφέρειες. Γι' αυτό παίρνει μεγαλύτερη βάση
 * και μεγαλύτερο συντελεστή ανάπτυξης.
 */
.mapp-search-cat {
    position: relative;
    flex: 2 1 260px;
    min-width: 0;
}

.mapp-search-cat > i {
    position: absolute;
    top: 50%;
    left: 14px;
    transform: translateY(-50%);
    color: var(--color-text-light, #94a3b8);
    font-size: 13.5px;
    pointer-events: none;
}

/*
 * Η ακίδα του επιλογέα ζωγραφίζεται με SVG στο φόντο,
 * γιατί το `appearance: none` αφαιρεί την εγγενή. Χωρίς
 * αυτό ο χρήστης δεν θα καταλαβαίνει ότι ανοίγει.
 */
.mapp-search-select {
    width: 100%;
    height: 42px;
    padding: 0 38px 0 38px;
    font-family: inherit;
    font-size: 14.5px;
    color: var(--color-text, #0f172a);
    text-overflow: ellipsis;
    background: var(--color-bg, #f8f9fb)
                url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%2394a3b8' d='M1.4 0 6 4.6 10.6 0 12 1.4 6 7.4 0 1.4z'/%3E%3C/svg%3E")
                no-repeat right 14px center;
    border: 1px solid var(--color-border, #e5e7eb);
    border-radius: 10px;
    -webkit-appearance: none;
            appearance: none;
    cursor: pointer;
    transition: border-color .18s, background-color .18s;
}

.mapp-search-select:hover { border-color: var(--color-text-light, #94a3b8); }

.mapp-search-select:focus {
    outline: none;
    background-color: #fff;
    border-color: var(--color-primary, #e91e63);
    box-shadow: 0 0 0 3px rgba(233, 30, 99, .1);
}

/* ZIP517 — οι default και οι επιλεγμένες τιμές του map search ακολουθούν
 * την ίδια κανονική γραφή με τα υπόλοιπα search controls. */
.mapp-opt-all { font-weight: 400; }

.mapp-search-select option:disabled {
    color: var(--color-border, #cbd5e1);
}

/* ---------------------------------------------------------------------
   ΣΗΜΕΙΩΣΗ «ΑΡΚΕΙ ΕΝΑ ΠΕΔΙΟ»

   ΚΡΥΜΜΕΝΗ ΣΤΟΝ ΥΠΟΛΟΓΙΣΤΗ — απόφαση χρήστη.

   Στον υπολογιστή τα τρία πεδία είναι σε μία σειρά με το
   κουμπί — φαίνεται πως είναι φίλτρα και όχι υποχρεωτικά
   πεδία φόρμας. Στο κινητό είναι στοιχισμένα κάθετα και
   μοιάζουν με φόρμα που θέλει συμπλήρωση όλων.
   ------------------------------------------------------------------ */
.mapp-search-hint { display: none; }

/* ---------------------------------------------------------------------
   ΔΙΑΚΟΠΤΗΣ ΛΙΣΤΑ / ΧΑΡΤΗΣ

   Κρυμμένος στον υπολογιστή: εκεί φαίνονται και τα δύο ταυτόχρονα,
   άρα ο διακόπτης θα ήταν παραπλανητικός.
   ------------------------------------------------------------------ */
.mapp-toggle { display: none; }

/* ---------------------------------------------------------------------
   ΔΙΑΧΩΡΙΣΜΕΝΗ ΟΘΟΝΗ
   ------------------------------------------------------------------ */
.mapp-split {
    display: flex;
    flex: 1;
    align-items: stretch;
    min-height: 0;   /* απαραίτητο: επιτρέπει στα παιδιά να κυλήσουν */
}

/* ---------------------------------------------------------------------
   ΑΡΙΣΤΕΡΗ ΣΤΗΛΗ
   ------------------------------------------------------------------ */
.mapp-side {
    flex: 0 0 var(--mapp-side-w);
    width: var(--mapp-side-w);
    overflow-y: auto;
    overscroll-behavior: contain;   /* το scroll δεν «ξεχειλίζει» */
    background: #fff;
    border-right: 1px solid var(--color-border, #e5e7eb);
}

.mapp-head {
    padding: 22px 24px 14px;
    border-bottom: 1px solid var(--color-border-light, #f1f5f9);
}

.mapp-h1 {
    margin: 0 0 6px;
    font-size: 22px;
    font-weight: 700;
    line-height: 1.25;
    color: var(--color-text, #0f172a);
}

.mapp-intro {
    margin: 0;
    font-size: 13.5px;
    line-height: 1.55;
    color: var(--color-text-light, #64748b);
}

/* --- Γραμμή φίλτρων και μετρητή --- */
.mapp-bar {
    position: sticky;
    top: 0;
    z-index: 5;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 24px;
    background: #fff;
    border-bottom: 1px solid var(--color-border-light, #f1f5f9);
}

/* ---------------------------------------------------------------------
   ΚΟΥΜΠΙ ΦΙΛΤΡΩΝ

   Δύο καταστάσεις, και η διαφορά είναι σκόπιμη:

   Χωρίς ενεργά φίλτρα — περίγραμμα στο χρώμα της
   μάρκας με έντονο κείμενο. Ξεχωρίζει καθαρά χωρίς
   να ανταγωνίζεται το «Αναζήτηση» και το «Δες την
   αγγελία», που είναι ήδη γεμάτα φούξια. Τρία γεμάτα
   κουμπιά στην ίδια οθόνη ακυρώνουν το ένα το άλλο.

   Με ενεργά φίλτρα — γεμάτο φούξια με λευκό κείμενο
   και το πλήθος. Εδώ η ένταση δικαιολογείται: ο χρήστης
   ΠΡΕΠΕΙ να ξέρει ότι βλέπει υποσύνολο και όχι το όλο.
   ------------------------------------------------------------------ */
.mapp-filters-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 40px;
    padding: 0 18px;
    font-family: inherit;
    font-size: 14px;
    font-weight: 700;
    color: var(--color-primary, #e91e63);
    background: #fff;
    border: 1.5px solid var(--color-primary, #e91e63);
    border-radius: 9px;
    cursor: pointer;
    transition: color .18s, background .18s, border-color .18s;
}

.mapp-filters-btn:hover {
    color: #fff;
    background: var(--color-primary, #e91e63);
}

.mapp-filters-btn:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgba(233, 30, 99, .22);
}

/* Γεμάτο όταν υπάρχουν ενεργά φίλτρα */
.mapp-filters-btn.has-active {
    color: #fff;
    background: var(--color-primary, #e91e63);
}

.mapp-filters-btn.has-active:hover {
    background: var(--color-primary-dark, #c2185b);
    border-color: var(--color-primary-dark, #c2185b);
}

.mapp-filters-n {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 21px;
    height: 21px;
    padding: 0 6px;
    font-size: 11.5px;
    font-weight: 700;
    color: var(--color-primary, #e91e63);
    background: #fff;
    border-radius: 11px;
}

.mapp-count {
    margin: 0;
    font-size: 13.5px;
    font-weight: 600;
    color: var(--color-text-light, #64748b);
    text-align: right;
}

.mapp-progress {
    position: sticky;
    top: 64px;
    z-index: 4;
    display: flex;
    flex-wrap: wrap;
    gap: 9px 12px;
    align-items: center;
    justify-content: space-between;
    padding: 11px 24px;
    background: #f7fbfc;
    border-bottom: 1px solid #cfe6ed;
}

.mapp-progress-count {
    margin: 0;
    font-size: 13px;
    font-weight: 700;
    color: #17677b;
}

.mapp-progress-button {
    display: inline-flex;
    gap: 7px;
    align-items: center;
    justify-content: center;
    min-height: 36px;
    padding: 7px 12px;
    font: inherit;
    font-size: 12.5px;
    font-weight: 750;
    line-height: 1.2;
    color: #087e9b;
    background: #fff;
    border: 1px solid #9ed5e1;
    border-radius: 8px;
    cursor: pointer;
    transition: color .18s, background .18s, border-color .18s, opacity .18s;
}

.mapp-progress-button:hover,
.mapp-progress-button:focus-visible {
    color: #fff;
    background: #087e9b;
    border-color: #087e9b;
}

.mapp-progress-button:focus-visible {
    outline: 0;
    box-shadow: 0 0 0 3px rgba(8, 126, 155, .2);
}

.mapp-progress-button:disabled {
    cursor: wait;
    opacity: .65;
}

.mapp-progress-error {
    flex-basis: 100%;
    margin: 0;
    font-size: 12.5px;
    font-weight: 600;
    line-height: 1.45;
    color: #b4234f;
}

.mapp-progress-fallback {
    display: flex;
    gap: 10px;
    align-items: center;
}

.mapp-progress-fallback a {
    font-size: 13px;
    font-weight: 700;
    color: #087e9b;
}

/* --- Η γραμμή «δεν εμφανίζονται στον χάρτη» --- */
.mapp-missing {
    display: flex;
    gap: 9px;
    align-items: flex-start;
    margin: 0;
    padding: 11px 24px;
    font-size: 12.5px;
    line-height: 1.5;
    color: #7c5b16;
    background: #fffbeb;
    border-bottom: 1px solid #fde68a;
}

.mapp-missing i {
    flex: none;
    margin-top: 2px;
    color: #d97706;
}

/* Remote jobs remain in the result list but deliberately have no physical pin. */
.mapp-remote-info {
    display: flex;
    gap: 9px;
    align-items: flex-start;
    margin: 0;
    padding: 11px 24px;
    font-size: 12.5px;
    line-height: 1.5;
    color: #075985;
    background: #f0f9ff;
    border-bottom: 1px solid #bae6fd;
}

.mapp-remote-info i {
    flex: none;
    margin-top: 2px;
    color: #0284c7;
}

/* --- Τσιπάκια ενεργών φίλτρων --- */
.mapp-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    padding: 12px 24px;
    border-bottom: 1px solid var(--color-border-light, #f1f5f9);
}

.mapp-chip {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 5px 11px;
    font-size: 12.5px;
    font-weight: 500;
    color: var(--color-text, #0f172a);
    text-decoration: none;
    background: var(--color-bg, #f1f5f9);
    border-radius: 20px;
    transition: background .18s, color .18s;
}

.mapp-chip:hover {
    color: #fff;
    background: var(--color-primary, #e91e63);
}

.mapp-chip i { font-size: 10px; opacity: .65; }

.mapp-chip-clear {
    padding: 5px 4px;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--color-primary, #e91e63);
    text-decoration: none;
}

.mapp-chip-clear:hover { text-decoration: underline; }

/* ---------------------------------------------------------------------
   ΚΑΡΤΕΣ ΑΓΓΕΛΙΩΝ
   ------------------------------------------------------------------ */
.mapp-list {
    margin: 0;
    padding: 0;
    list-style: none;
}

.mapp-card {
    padding: 16px 24px;
    cursor: pointer;
    background: #fff;
    border-bottom: 1px solid var(--color-border-light, #f1f5f9);
    border-left: 3px solid transparent;
    transition: background .16s, border-left-color .16s;
}

/* ---------------------------------------------------------------------
   ΕΝΑΛΛΑΣΣΟΜΕΝΕΣ ΓΡΑΜΜΕΣ

   Μία λευκή, μία πολύ απαλό γκρι. Το μάτι κρατά τη
   γραμμή χωρίς να χάνεται σε μεγάλες λίστες.

   ΤΟ `nth-child` ΕΙΝΑΙ ΣΩΣΤΟ ΕΔΩ, με μία προϋπόθεση: οι
   κάρτες ΔΕΝ κρύβονται με CSS ούτε αναδιατάσσονται με
   JavaScript — κάθε φιλτράρισμα φορτώνει νέα σελίδα από
   τον διακομιστή. Αν ποτέ προστεθεί φιλτράρισμα χωρίς
   ανανέωση, οι γραμμές θα «αναπηδούν» χρώμα και η
   εναλλαγή πρέπει να μεταφερθεί σε κλάση από τη PHP.
   ------------------------------------------------------------------ */
.mapp-list > .mapp-card:nth-child(even) {
    background: #fafbfc;
}

.mapp-card:hover,
.mapp-list > .mapp-card:nth-child(even):hover {
    background: #f1f5f9;
    border-left-color: var(--color-border, #cbd5e1);
}

/*
 * Η ΕΝΕΡΓΗ ΚΑΡΤΑ
 *
 * Οταν ο χρήστης πατά δείκτη στον χάρτη, η αντίστοιχη κάρτα
 * επισημαίνεται και κυλάει στο πεδίο θέασης. Χωρίς αυτή τη σύνδεση,
 * η διαχωρισμένη οθόνη είναι δύο ξένα πράγματα δίπλα-δίπλα.
 *
 * ΓΚΡΙ ΑΝΤΙ ΡΟΖ: το ροζ φόντο «χτυπούσε» δίπλα στα
 * φούξια στοιχεία της σελίδας. Η ταυτότητα της επιλεγμένης
 * κάρτας μεταφέρεται στο αριστερό περίγραμμα, που
 * δείχνει θέση χωρίς να αλλοιώνει την αναγνωσιμότητα.
 */
.mapp-card.is-active,
.mapp-list > .mapp-card:nth-child(even).is-active {
    background: #eef2f7;
    border-left-color: var(--color-primary, #e91e63);
}

.mapp-card:focus-visible {
    outline: 2px solid var(--color-primary, #e91e63);
    outline-offset: -2px;
}

/*
 * ΚΑΡΤΑ ΧΩΡΙΣ ΔΕΙΚΤΗ
 *
 * Δεν είναι σφάλμα και δεν κρύβεται. Απλώς δεν αντιδρά σαν
 * συνδεδεμένη με τον χάρτη, γιατί δεν έχει πού να εστιάσει.
 */
.mapp-card-nopin,
.mapp-list > .mapp-card-nopin:nth-child(even),
.mapp-card-nopin:hover,
.mapp-list > .mapp-card-nopin:nth-child(even):hover {
    cursor: default;
    background: #fcfcfd;
    border-left-color: transparent;
}

.mapp-card-top {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 5px;
}

.mapp-card-title {
    flex: 1;
    margin: 0;
    font-size: 15.5px;
    font-weight: 650;
    line-height: 1.35;
}

.mapp-card-title a {
    color: var(--color-text, #0f172a);
    text-decoration: none;
}

.mapp-card-title a:hover {
    color: var(--color-primary, #e91e63);
}

.mapp-badge {
    flex: none;
    padding: 3px 8px;
    font-size: 10.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .3px;
    border-radius: 5px;
}

.mapp-badge-feat {
    color: #92400e;
    background: #fef3c7;
}

.mapp-card-company {
    display: flex;
    gap: 6px;
    align-items: center;
    margin: 0 0 9px;
    font-size: 13.5px;
    color: var(--color-text-light, #64748b);
}

.mapp-verified {
    font-size: 12px;
    color: #0ea5e9;
}

.mapp-card-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 16px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.mapp-card-meta li {
    display: inline-flex;
    gap: 6px;
    align-items: center;
    font-size: 12.5px;
    color: var(--color-text-light, #64748b);
}

.mapp-card-meta i {
    font-size: 11.5px;
    color: var(--color-text-lighter, #94a3b8);
}

.mapp-card-noloc      { color: #b45309; }
.mapp-card-noloc i    { color: #d97706; }
.mapp-card-remote     { color: #0369a1; font-weight: 500; }
.mapp-card-remote i   { color: #0ea5e9; }
.mapp-card-approx     { color: #7c5b16; }
.mapp-card-approx i   { color: #d97706; }

.mapp-card-salary {
    margin: 9px 0 0;
    font-size: 13.5px;
    font-weight: 650;
    color: var(--color-primary, #e91e63);
}

/* ---------------------------------------------------------------------
   SIDEBAR CARD REFINEMENT — ΜΟΝΟ SPLIT MAP ΣΕ ΥΠΟΛΟΓΙΣΤΗ

   Οι γραμμές αποτελεσμάτων μένουν πυκνές για γρήγορη σάρωση, αλλά έχουν
   πλέον την ίδια καθαρή οπτική διαίρεση με τις Jobtimist job cards.
   Το mobile map/list UI δεν αλλάζει.
   ------------------------------------------------------------------ */
@media (min-width: 769px) {
    .mapp-list {
        padding: 10px 10px 14px;
        background: var(--color-bg, #f8fafc);
    }

    .mapp-list > .mapp-card,
    .mapp-list > .mapp-card:nth-child(even) {
        margin: 0 0 10px;
        padding: 15px 16px;
        background: #fff;
        border: 1px solid var(--color-border, #e5e7eb);
        border-left: 3px solid transparent;
        border-radius: 12px;
        box-shadow: 0 2px 7px rgba(15, 23, 42, .035);
        transition: background .16s, border-color .16s, border-left-color .16s, box-shadow .16s;
    }

    .mapp-list > .mapp-card:hover,
    .mapp-list > .mapp-card:nth-child(even):hover {
        background: #f5f9fb;
        border-color: #c9dce5;
        border-left-color: #8aaebc;
        box-shadow: 0 4px 12px rgba(15, 23, 42, .055);
    }

    .mapp-list > .mapp-card.is-active,
    .mapp-list > .mapp-card:nth-child(even).is-active {
        background: #e8f3f7;
        border-color: #b7d5df;
        border-left-color: #167c99;
        box-shadow: 0 7px 16px rgba(22, 124, 153, .11);
    }

    .mapp-list > .mapp-card-nopin,
    .mapp-list > .mapp-card-nopin:nth-child(even),
    .mapp-list > .mapp-card-nopin:hover,
    .mapp-list > .mapp-card-nopin:nth-child(even):hover {
        border-left-color: transparent;
        box-shadow: 0 2px 7px rgba(15, 23, 42, .035);
    }
}

/* --- Κενή κατάσταση --- */
.mapp-empty {
    padding: 56px 32px;
    text-align: center;
}

.mapp-empty i {
    font-size: 40px;
    color: var(--color-border, #cbd5e1);
}

.mapp-empty h2 {
    margin: 18px 0 8px;
    font-size: 17px;
    font-weight: 650;
    color: var(--color-text, #0f172a);
}

.mapp-empty p {
    margin: 0 0 20px;
    font-size: 14px;
    line-height: 1.6;
    color: var(--color-text-light, #64748b);
}

.mapp-empty-cta {
    display: inline-block;
    padding: 10px 22px;
    font-size: 14px;
    font-weight: 600;
    color: #fff;
    text-decoration: none;
    background: var(--color-primary, #e91e63);
    border-radius: 9px;
}

.mapp-more {
    margin: 0;
    padding: 18px 24px 28px;
    text-align: center;
}

.mapp-more a {
    font-size: 13.5px;
    font-weight: 600;
    color: var(--color-primary, #e91e63);
    text-decoration: none;
}

.mapp-more a:hover { text-decoration: underline; }

/* ---------------------------------------------------------------------
   ΔΕΞΙΑ: ΧΑΡΤΗΣ
   ------------------------------------------------------------------ */
.mapp-mapwrap {
    position: relative;
    flex: 1;
    min-width: 0;
    background: #e8eef3;   /* χρώμα θάλασσας όσο φορτώνουν τα πλακίδια */
}

.mapp-map {
    width: 100%;
    height: 100%;
}

/* Κουμπί επαναφοράς προβολής */
.mapp-reset {
    position: absolute;
    top: 14px;
    right: 14px;
    z-index: 500;          /* πάνω από τα χειριστήρια του Leaflet (400) */
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 38px;
    padding: 0 15px;
    font-family: inherit;
    font-size: 13px;
    font-weight: 600;
    color: var(--color-text, #0f172a);
    background: #fff;
    border: 1px solid rgba(15, 23, 42, .12);
    border-radius: 9px;
    box-shadow: 0 2px 8px rgba(15, 23, 42, .12);
    cursor: pointer;
    transition: background .18s;
}

.mapp-reset:hover { background: var(--color-bg, #f8fafc); }

/* Μήνυμα χωρίς JavaScript */
.mapp-nojs {
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 600;
    width: min(420px, calc(100% - 48px));
    padding: 26px;
    text-align: center;
    background: #fff;
    border-radius: 14px;
    box-shadow: 0 8px 30px rgba(15, 23, 42, .16);
    transform: translate(-50%, -50%);
}

.mapp-nojs i {
    font-size: 26px;
    color: #d97706;
}

.mapp-nojs p {
    margin: 12px 0 0;
    font-size: 14px;
    line-height: 1.6;
    color: var(--color-text, #334155);
}

/* ---------------------------------------------------------------------
   ΑΝΑΔΥΟΜΕΝΗ ΠΡΟΕΠΙΣΚΟΠΗΣΗ ΣΤΟΝ ΧΑΡΤΗ

   Το Leaflet παράγει `.leaflet-popup`. Παρακάμπτω το προεπιλεγμένο
   ύφος του, που είναι λειτουργικό αλλά ξένο προς τον ιστότοπο.
   ------------------------------------------------------------------ */
.mapp .leaflet-popup-content-wrapper {
    padding: 0;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 6px 26px rgba(15, 23, 42, .18);
}

.mapp .leaflet-popup-content {
    width: 268px !important;
    margin: 0;
    font-family: inherit;
    line-height: 1.5;
}

.mapp .leaflet-popup-tip { background: #fff; }

.mapp-pop {
    padding: 15px 16px;
}

/* ---------------------------------------------------------------------
   ΓΙΑΤΙ ΟΛΟΙ ΟΙ ΣΥΝΔΕΣΜΟΙ ΕΔΩ ΕΙΝΑΙ ΥΠΕΡ-ΕΙΔΙΚΟΙ

   Το `leaflet.css` περιέχει:

       .leaflet-container a { color: #0078A8; }

   Αυτό βάφει ΚΑΘΕ σύνδεσμο μέσα στον χάρτη μπλε, με
   ειδικότητα 0,1,1 — υψηλότερη από μια απλή κλάση (0,1,0).
   Το αποτέλεσμα ήταν σκούρο μπλε πάνω σε φούξια:
   αναλογία αντίθεσης ~1,9:1 όταν το πρότυπο WCAG AA
   απαιτεί 4,5:1. Πρακτικά δυσανάγνωστο.

   Η λύση είναι αύξηση ειδικότητας με πρόθεμα, οΧΙ
   `!important` — κρατά το φύλλο στύλου προβλέψιμο.
   ------------------------------------------------------------------ */
.mapp .leaflet-popup-content a.mapp-pop-title {
    display: block;
    margin: 0 0 5px;
    font-size: 14.5px;
    font-weight: 650;
    line-height: 1.35;
    color: var(--color-text, #0f172a);
    text-decoration: none;
}
.mapp .leaflet-popup-content a.mapp-pop-title:hover {
    color: var(--color-primary, #e91e63);
}

.mapp-pop-company {
    margin: 0 0 10px;
    font-size: 12.5px;
    color: var(--color-text-light, #64748b);
}

.mapp-pop-meta {
    display: flex;
    flex-direction: column;
    gap: 5px;
    margin: 0 0 12px;
    padding: 0;
    list-style: none;
}

.mapp-pop-meta li {
    display: flex;
    gap: 7px;
    align-items: center;
    font-size: 12px;
    color: var(--color-text-light, #64748b);
}

.mapp-pop-meta i {
    width: 12px;
    font-size: 11px;
    color: var(--color-text-lighter, #94a3b8);
    text-align: center;
}

.mapp-pop-salary {
    margin: 0 0 12px;
    font-size: 13px;
    font-weight: 650;
    color: var(--color-primary, #e91e63);
}

.mapp-pop-note {
    margin: 0 0 11px;
    font-size: 11px;
    font-style: italic;
    color: var(--color-text-lighter, #94a3b8);
}

/*
 * Το κουμπί «Δες την αγγελία». Δες το σχόλιο παραπάνω:
 * το πρόθεμα `.mapp .leaflet-popup-content` είναι απαραίτητο,
 * αλλιώς το Leaflet το βάφει μπλε πάνω σε φούξια.
 */
.mapp .leaflet-popup-content a.mapp-pop-cta {
    display: block;
    padding: 10px;
    font-size: 13px;
    font-weight: 700;
    color: #fff;
    text-align: center;
    text-decoration: none;
    background: var(--color-primary, #e91e63);
    border-radius: 8px;
    transition: background .18s;
}

.mapp .leaflet-popup-content a.mapp-pop-cta:hover,
.mapp .leaflet-popup-content a.mapp-pop-cta:focus {
    color: #fff;
    background: var(--color-primary-dark, #c2185b);
}

/* ---------------------------------------------------------------------
   ΣΥΣΤΑΔΕΣ (clusters)

   Τρία μεγέθη ανάλογα με το πλήθος. Ο χρωματικός κώδικας δεν είναι
   διακόσμηση: δίνει αίσθηση πυκνότητας πριν διαβάσει κανείς αριθμό.
   ------------------------------------------------------------------ */
.mapp-cluster {
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    color: #fff;
    background: var(--color-primary, #e91e63);
    border: 3px solid rgba(255, 255, 255, .85);
    border-radius: 50%;
    box-shadow: 0 2px 10px rgba(15, 23, 42, .22);
}

.mapp-cluster-s { width: 34px; height: 34px; font-size: 12.5px; }
.mapp-cluster-m { width: 42px; height: 42px; font-size: 14px;
                  background: #c2185b; }
.mapp-cluster-l { width: 52px; height: 52px; font-size: 15px;
                  background: #8e1140; }

/* Δείκτης εξ αποστάσεως: άλλο χρώμα, ίδιο σχήμα */
.mapp-pin-remote { filter: hue-rotate(160deg) saturate(1.2); }

/* =====================================================================
   ΚΙΝΗΤΟ — ΚΑΤΩ ΑΠΟ 900px

   Η διαχωρισμένη οθόνη γίνεται ΕΝΑΛΛΑΓΗ. Δύο στήλες σε 375px πλάτος
   δίνουν 187px η καθεμία: ούτε η λίστα διαβάζεται ούτε ο χάρτης
   χρησιμεύει. Ο διακόπτης δίνει πλήρη οθόνη σε ό,τι κοιτάζει ο
   χρήστης, που είναι η καθιερωμένη λύση σε κάθε εφαρμογή χάρτη.
   ================================================================== */
@media (max-width: 900px) {

    .mapp {
        /*
         * Στο κινητό η κεφαλίδα είναι χαμηλότερη και η μπάρα
         * αναζήτησης ψηλότερη, αφού ο διακόπτης μπαίνει δεύτερη σειρά.
         *
         * ΧΡΗΣΗ dvh ΑΝΤΙ vh
         *
         * Στα κινητά το `100vh` αγνοεί τη γραμμή διεύθυνσης και τη
         * κάτω μπάρα του περιηγητή, οπότε το κάτω μέρος του
         * χάρτη κρύβεται. Το `dvh` προσαρμόζεται δυναμικά.
         */
        /*
         * ΟΛΑ ΜΕΤΡΗΘΗΚΑΝ, ΔΕΝ ΕΙΚΑΣΘΗΚΑΝ
         *
         * Η πρώτη μου εκτίμηση ήταν 62 και 74 — και τα δύο
         * λάθος. Η μέτρηση σε 390px έδειξε:
         *
         *   κεφαλίδα        70px
         *   ανακοίνωση      61px  (σπάει σε δύο σειρές)
         *
         * Το map-only footer δεν εμφανίζεται πλέον, επομένως δεν κρατά
         * καθόλου ύψος από το διαθέσιμο canvas.
         *
         * v105 — Η ΑΝΑΚΟΙΝΩΣΗ ΚΡΥΒΕΤΑΙ ΣΕ ΑΥΤΗ ΤΗ ΣΕΛΙΔΑ
         *
         * Άρα η κεφαλίδα μετράει 70 και όχι 131. Τα 61
         * εικονοστοιχεία της ανακοίνωσης γυρίζουν στον χάρτη.
         *
         * Το `--mapp-search` δεν χρειάζεται πλέον: η μπάρα
         * συμπτύσσεται σε 44px και οι δύο περιοχές
         * μοιράζονται τον υπόλοιπο χώρο με flex.
         */
        --mapp-header: 70px;
        --mapp-foot: 0px;
        height: calc(100dvh - var(--mapp-header) - var(--mapp-foot));
    }

    /*
     * =================================================================
     * v105 — ΚΡΥΨΗ ΑΝΑΚΟΙΝΩΣΗΣ ΚΑΙ ΤΙΤΛΟΥ ΣΤΟ ΚΙΝΗΤΟ
     * =================================================================
     *
     * Εγκεκριμένο από τον χρήστη. Και τα δύο κρύβονται ΜΟΝΟ
     * σε αυτή τη σελίδα και ΜΟΝΟ στο κινητό.
     *
     * Ο τίτλος μένει στο HTML — δεν αφαιρείται — ώστε οι
     * μηχανές αναζήτησης να τον διαβάζουν κανονικά. Το
     * `display: none` δεν βλάπτει το SEO όταν το κείμενο
     * είναι ορατό στον υπολογιστή, γιατί η Google κρίνει
     * τη σελίδα ως σύνολο.
     *
     * Η ανακοίνωση για την έκπτωση φαίνεται σε ΚΑΘΕ άλλη
     * σελίδα. Εδώ έτρωγε 61 από τα 664 χρησιμοποιήσιμα
     * εικονοστοιχεία, δηλαδή 9% της οθόνης για ένα μήνυμα
     * που ο χρήστης έχει ήδη δει.
     */
    .announcement-bar--app { display: none; }
    .mapp-head             { display: none; }

    /*
     * =================================================================
     * v105 — ΣΥΜΠΤΥΓΜΕΝΗ ΑΝΑΖΗΤΗΣΗ
     * =================================================================
     *
     * Η γραμμή σύνοψης φαίνεται, η φόρμα κρύβεται. Με πάτημα
     * το JavaScript βάζει `is-search-open` στο `#mapPage` και
     * αντιστρέφονται.
     *
     * ΓΙΑΤΙ ΟΧΙ `<details>`
     *
     * Θα ήταν λιγότερος κώδικας, αλλά το `<details>` δεν
     * επιτρέπει να αλλάξει το ύψος του χάρτη όταν ανοίγει,
     * και ο χάρτης χρειάζεται `invalidateSize()` του Leaflet
     * αλλιώς μένει μισός γκρίζος.
     */
    .mapp-search-peek {
        display: flex;
        gap: 8px;
        align-items: center;
        width: 100%;
        min-height: 44px;      /* στόχος αφής κατά Apple */
        padding: 0 12px;
        font-family: inherit;
        font-size: 13.5px;
        color: var(--color-text, #0f172a);
        text-align: left;
        background: #fff;
        border: none;
        cursor: pointer;
    }

    .mapp-search-peek > i {
        flex: 0 0 auto;
        font-size: 14px;
        color: var(--color-text-light, #64748b);
    }

    /*
     * Το `min-width: 0` μαζί με `overflow: hidden` είναι
     * απαραίτητο: χωρίς αυτά ένα μακρύ κείμενο αναζήτησης
     * σπρώχνει το «Αλλαγή» έξω από την οθόνη και δημιουργεί
     * οριζόντια κύλιση σε όλη τη σελίδα.
     */
    .mapp-search-peek-text {
        flex: 1 1 auto;
        min-width: 0;
        overflow: hidden;
        font-weight: 600;
        white-space: nowrap;
        text-overflow: ellipsis;
    }

    /*
     * UI Search Controls — η ενέργεια στο δεξί άκρο της search peek
     * χρειάζεται σαφές, ουδέτερο button treatment. Οι δύο labels
     * (Αλλαγή / Κλείσιμο αναζήτησης) εναλλάσσονται από τα υπάρχοντα
     * selectors παρακάτω και μοιράζονται ακριβώς το ίδιο design.
     */
    .mapp-search-peek-edit {
        flex: 0 0 auto;
        display: inline-flex;
        gap: 5px;
        min-height: 32px;
        align-items: center;
        justify-content: center;
        box-sizing: border-box;
        padding: 0 9px;
        border: 1px solid #d0d5dd;
        border-radius: 8px;
        background: #f2f4f7;
        color: #475467;
        font-size: 12.5px;
        font-weight: 700;
        line-height: 1;
        white-space: nowrap;
        transition: background 0.2s, border-color 0.2s, color 0.2s;
    }

    .mapp-search-peek-edit > i {
        flex: 0 0 auto;
        font-size: 11px;
    }

    .mapp-search-peek:hover .mapp-search-peek-edit,
    .mapp-search-peek:focus-visible .mapp-search-peek-edit {
        border-color: #98a2b3;
        background: #eaecf0;
        color: #344054;
    }

    .mapp-search-peek:focus-visible {
        outline: 3px solid rgba(71, 84, 103, 0.20);
        outline-offset: -3px;
    }

    /*
     * ΕΝΑΛΛΑΓΗ ΕΤΙΚΕΤΑΣ — «Αλλαγή» ή «Κλείσιμο»
     *
     * Και οι δύο ετικέτες υπάρχουν στο HTML και
     * εναλλάσσονται με CSS. Δεν αλλάζω κείμενο με
     * JavaScript γιατί θα χρειαζόμουν μεταφράσεις
     * μέσα στο αρχείο .js — εκεί δεν υπάρχει πρόσβαση
     * στο `__()` και θα έσπαγε η ισοτιμία EL=EN.
     */
    .mapp-search-peek [data-peek-close] { display: none; }

    .mapp.is-search-open .mapp-search-peek [data-peek-open]  { display: none; }
    .mapp.is-search-open .mapp-search-peek [data-peek-close] { display: inline-flex; }

    /* Η φόρμα είναι κρυμμένη μέχρι να πατηθεί η γραμμή */
    .mapp-search-form { display: none; }

    /*
     * Η γραμμή ΜΕΝΕΙ ΟΡΑΤΗ όταν ανοίγει η φόρμα,
     * αλλά χάνει το λευκό φόντο και μαζεύεται,
     * γιατί πλέον λειτουργεί ως κεφαλίδα της φόρμας.
     */
    .mapp.is-search-open .mapp-search-peek {
        min-height: 38px;
        padding-bottom: 2px;
        border-bottom: 1px solid var(--color-border, #e5e7eb);
    }

    .mapp.is-search-open .mapp-search-form {
        display: flex;
        width: 100%;
        max-width: none;
        gap: 8px;
    }

    .mapp-searchbar-in {
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
        padding: 0;
    }

    .mapp.is-search-open .mapp-searchbar-in { padding: 10px 14px; }

    /*
     * ΤΡΙΑ ΠΕΔΙΑ ΣΤΟΙΧΙΣΜΕΝΑ, ΚΟΥΜΠΙ ΣΕ ΔΙΚΗ ΤΟΥ ΣΕΙΡΑ
     *
     * Απόφαση χρήστη. Σε 375px πλάτος, τρία πεδία σε
     * μία σειρά θα έδιναν ~110px το καθένα — ούτε το
     * «Αττική» δεν θα φαινόταν ολόκληρο.
     */
    .mapp-search-row {
        flex-direction: column;
        gap: 8px;
        align-items: stretch;
    }
    .mapp-search-field,
    .mapp-search-region,
    .mapp-search-cat { flex: 1 1 auto; max-width: none; width: 100%; }

    /*
     * Το κουμπί πάει τελευταίο με `order`, ώστε να
     * μπει μετά τη σημείωση. Η σειρά στο HTML μένει
     * λογική για τους αναγνώστες οθόνης.
     */
    .mapp-search-go {
        order: 3;          /* τελευταίο, ΜΕΤΑ τη σημείωση */
        width: 100%;
        padding: 0 18px;
        font-size: 15px;
    }

    /*
     * Η σημείωση εμφανίζεται ΜΟΝΟ εδώ, ανάμεσα στα
     * πεδία και το κουμπί — ακριβώς όπου το ζήτησε
     * ο χρήστης, γιατί εκεί απαντά στην απορία
     * «πρέπει να συμπληρώσω και τα τρία;».
     */
    .mapp-search-hint {
        /*
         * `order: 2` — ΑΝΑΜΕΣΑ στα πεδία (order προεπιλογή 0)
         * και το κουμπί (order 3).
         *
         * Χωρίς αυτό η σημείωση έπεφτε ΚΑΤΩ από το
         * κουμπί (μετρήθηκε: κουμπί 297, σημείωση 349),
         * ενώ ο χρήστης τη ζήτησε ΠΡΙΝ το κουμπί.
         */
        order: 2;
        flex: 1 1 100%;    /* πλήρες πλάτος μέσα στη σειρά */
        display: block;
        margin: 0;
        font-size: 12px;
        line-height: 1.4;
        color: var(--color-text-light, #64748b);
        text-align: center;
    }
    /*
     * Στο κινητό ο επιλογέας παίρνει μεγαλύτερο ύψος:
     * 44px είναι το ελάχιστο που συνιστά η Apple για
     * στόχο αφής, και το 16px γραμματοσειρά εμποδίζει
     * το iOS Safari να κάνει αυτόματο ζούμ στην εστίαση.
     */
    .mapp-search-select {
        height: 44px;
        font-size: 16px;
    }
    /*
     * =============================================================
     * ΤΟ ΠΕΔΙΟ ΚΕΙΜΕΝΟΥ — 16px  (v109)
     * =============================================================
     *
     * Τους δύο επιλογείς τους διόρθωσα πιο πάνω,
     * στο v104, με ρητό σχόλιο για το ζούμ. Το πεδίο
     * κειμένου όμως το **ξέχασα** — έμεινε στα 15px
     * και ήταν το μόνο στοιχείο της σελίδας κάτω
     * από το κατώφλι.
     *
     * Η αλυσίδα που ανέφερε ο χρήστης, και τα τρία
     * συμπτώματα που παρατήρησε:
     *
     *   1. Πατάει «Αλλαγή» → ανοίγει η φόρμα
     *   2. Το iOS ζουμάρει, γιατί 15px < 16px
     *   3. Ολα κόβονται δεξιά — μοιάζει με υπερχείλιση
     *   4. **Το ζούμ ΔΕΝ επαναφέρεται** στο κλείσιμο
     *   5. Φεύγει μόνο με επαναφόρτωση, δηλαδή με
     *      επιλογή φίλτρου
     *
     * Το (4) και το (5) είναι η απόδειξη: καμία άλλη
     * αιτία δεν εξηγεί ταυτόχρονα το «παραμένει» και
     * το «φεύγει με το φίλτρο».
     *
     * ΔΕΝ λύνεται με `maximum-scale=1.0` στο viewport:
     * εκείνο εμποδίζει και το ζούμ με τα δάχτυλα,
     * παραβιάζοντας το WCAG 1.4.4 — και η Google το
     * τιμωρεί στην κατάταξη κινητών.
     */
    .mapp-search-field input {
        font-size: 16px;
    }

    /* --- Ο διακόπτης εμφανίζεται --- */
    .mapp-toggle {
        display: flex;
        gap: 4px;
        width: 100%;
        padding: 4px;
        background: var(--color-bg, #f1f5f9);
        border-radius: 10px;
    }

    .mapp-toggle-btn {
        display: inline-flex;
        flex: 1;
        gap: 7px;
        align-items: center;
        justify-content: center;
        height: 38px;
        font-family: inherit;
        font-size: 13.5px;
        font-weight: 600;
        color: var(--color-text-light, #64748b);
        background: transparent;
        border: none;
        border-radius: 8px;
        cursor: pointer;
        transition: background .18s, color .18s;
    }

    .mapp-toggle-btn.is-active {
        color: var(--color-text, #0f172a);
        background: #fff;
        box-shadow: 0 1px 3px rgba(15, 23, 42, .1);
    }

    /*
     * ΕΝΑΛΛΑΓΗ ΑΝΤΙ ΔΙΑΧΩΡΙΣΜΟΥ
     *
     * Το `flex-direction: column` αντί `display: block` είναι σημαντικό:
     * με `block` οι δύο περιοχές δεν κληρονομούν ύψος και ο χάρτης
     * καταλήγει μηδενικού ύψους.
     */
    .mapp-split {
        flex-direction: column;
    }

    .mapp-side {
        flex: 1;
        width: 100%;
        min-height: 0;
        border-right: none;
    }

    .mapp-mapwrap {
        flex: 1;
        min-height: 0;
    }

    /*
     * Η ΕΝΑΛΛΑΓΗ ΕΛΕΓΧΕΤΑΙ ΑΠΟ ΚΛΑΣΗ ΣΤΟ <main>

     * Χωρίς JavaScript η κλάση δεν μπαίνει ποτέ, οπότε φαίνονται
     * και τα δύο το ένα κάτω από το άλλο — που είναι σωστή
     * εφεδρική συμπεριφορά, όχι σπασμένη σελίδα.
     */
    .mapp.is-view-map  .mapp-side    { display: none; }
    .mapp.is-view-list .mapp-mapwrap { display: none; }

    .mapp-h1    { font-size: 19px; }
    .mapp-intro { font-size: 13px; }

    /*
     * =================================================================
     * v105 — ΤΑ ΦΙΛΤΡΑ ΒΓΑΙΝΟΥΝ ΑΠΟ ΤΗ ΛΙΣΤΑ
     * =================================================================
     *
     * Ο χρήστης εντόπισε: «όταν είσαι σε view χάρτης δε
     * βλέπω πουθενά να εμφανίζονται τα φίλτρα».
     *
     * Η `.mapp-bar` — με το κουμπί φίλτρων και το πλήθος
     * — ζει μέσα στη στήλη της λίστας. Στο κινητό
     * κρύβεται τελείως και τη θέση της παίρνει το
     * κουμπί δίπλα στον διακόπτη, που φαίνεται σε
     * ΚΑΙ τις δύο προβολές. Γλιτώνουμε και 46px.
     *
     * Το πλήθος δεν χάνεται: εμφανίζεται πάνω στο
     * κουμπί «Λίστα (28)» του διακόπτη.
     */
    .mapp-bar { display: none; }

    .mapp-toggle-filters {
        display: inline-flex;
        gap: 5px;
        align-items: center;
        justify-content: center;
        flex: 0 0 auto;
        min-width: 44px;
        height: 38px;
        padding: 0 11px;
        font-family: inherit;
        font-size: 13.5px;
        font-weight: 700;
        color: #fff;
        background: var(--color-primary, #e91e63);
        border: 1.5px solid var(--color-primary, #e91e63);
        border-radius: 8px;
        cursor: pointer;
        box-shadow: 0 4px 10px rgba(193, 24, 80, .18);
        transition: background .2s, border-color .2s, box-shadow .2s;
    }

    .mapp-toggle-filters:hover,
    .mapp-toggle-filters:focus-visible {
        color: #fff;
        background: var(--color-primary-dark, #c2185b);
        border-color: var(--color-primary-dark, #c2185b);
        box-shadow: 0 5px 12px rgba(173, 13, 67, .24);
    }

    /* The active-filter state preserves the same primary treatment. */
    .mapp-toggle-filters.has-active {
        color: #fff;
        background: var(--color-primary, #e91e63);
    }

    .mapp-toggle-filters .mapp-filters-n {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-width: 18px;
        height: 18px;
        font-size: 11.5px;
        font-weight: 700;
        color: var(--color-primary, #e91e63);
        background: #fff;
        border-radius: 9px;
    }

    .mapp-chips       { padding-inline: 16px; }
    .mapp-missing,
    .mapp-remote-info { padding-inline: 16px; }
    .mapp-card        { padding: 14px 16px; }

    .mapp-progress {
        top: 0;
        padding: 10px 16px;
    }

    .mapp-progress-button {
        width: 100%;
    }

    .mapp-reset span { display: none; }   /* μόνο εικονίδιο */
    .mapp-reset      { padding: 0 11px; }

    .mapp .leaflet-popup-content { width: 232px !important; }

    /*
     * =================================================================
     * v107 — ΔΙΚΛΕΙΔΑ ΚΑΤΑ ΟΡΙΖΟΝΤΙΑΣ ΥΠΕΡΧΕΙΛΙΣΗΣ
     * =================================================================
     *
     * Ο χρήστης έστειλε δύο φωτογραφίες από iPhone όπου
     * το «Αλλαγή» κοβόταν στη μέση και το κουμπί φίλτρων
     * έφευγε εκτός οθόνης.
     *
     * ΔΕΝ ΑΝΑΠΑΡΑΧΘΗΚΕ σε 390 / 375 / 360 / 320px, ούτε με
     * γραμματοσειρά 125% ή 150%, ούτε με προσομοίωση
     * πληκτρολογίου. Το μοναδικό στοιχείο που βγαίνει εκτός
     * είναι το κλειστό συρόμενο μενού (`right: -280px`),
     * που είναι **σκόπιμο** και δεν αυξάνει το
     * `document.scrollWidth`.
     *
     * Γι' αυτό μπαίνει **δικλείδα**, όχι διόρθωση
     * συγκεκριμένου στοιχείου: ό,τι κι αν φταίει στη
     * συσκευή του χρήστη, δεν θα μπορεί να σπρώξει τη
     * σελίδα.
     *
     * Το `overflow-x: clip` προτιμάται από το `hidden`: το
     * `hidden` δημιουργεί νέο πλαίσιο κύλισης, που θα
     * έσπαγε το `position: sticky` της μπάρας αναζήτησης.
     * Για παλιότερα Safari υπάρχει εφεδρικό `hidden` πριν.
     * ================================================================= */
    #mapPage {
        max-width: 100%;
        overflow-x: hidden;
        overflow-x: clip;
    }

    /*
     * Κάθε flex δοχείο στη σταθερή κεφαλίδα πρέπει να
     * ΜΠΟΡΕΙ να συμπιεστεί. Χωρίς `min-width: 0` ένα flex
     * στοιχείο αρνείται να πέσει κάτω από το εγγενές
     * πλάτος του περιεχομένου του — ακριβώς αυτό που
     * σπρώχνει το κουμπί φίλτρων εκτός οθόνης.
     */
    .mapp-searchbar,
    .mapp-search-peek,
    .mapp-toggle,
    .mapp-toggle-btn {
        min-width: 0;
        max-width: 100%;
    }

    /*
     * Το «Λίστα (28)» και το «Χάρτης» κόβονται με αποσιωπητικά
     * αν δεν χωρούν, αντί να σπρώξουν το κουμπί φίλτρων.
     */
    .mapp-toggle-btn > span {
        min-width: 0;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
    }
}

/* --- Πολύ στενές οθόνες --- */
@media (max-width: 380px) {
    .mapp-bar {
        flex-direction: column;
        align-items: stretch;
        gap: 8px;
    }

    .mapp-count { text-align: left; }
}

/* =====================================================================
   ΦΥΛΛΟ ΦΙΛΤΡΩΝ

   Ανοίγει από τα πλάγια στον υπολογιστή και από κάτω στο κινητό.
   Χρησιμοποιεί τις κλάσεις `jf-*` του `jobs.css`, οπότε εδώ ορίζεται
   μόνο η τοποθέτηση — όχι τα χρώματα και οι αποστάσεις των πεδίων.
   ================================================================== */
.mapp-filters-back {
    position: fixed;
    inset: 0;
    z-index: 1200;
    background: rgba(15, 23, 42, .45);
    animation: mappFade .2s ease;
    /* Το σκιασμένο φόντο δεν πρέπει να παρασύρει τη
       σελίδα από κάτω με σύρσιμο δαχτύλου. */
    touch-action: none;
}

/*
 * ΚΛΕΙΔΩΜΑ ΚΥΛΙΣΗΣ ΟΣΟ ΤΟ ΦΥΛΛΟ ΕΙΝΑΙ ΑΝΟΙΧΤΟ (v108)
 *
 * ΔΕΝ χρησιμοποιείται `position: fixed` στο σώμα,
 * σε αντίθεση με το `drawer-lock`: θα άλλαζε το
 * containing block του `.mapp-filters`, που είναι και αυτό
 * `position: fixed`, και στο iOS Safari θα το μετατόπιζε.
 *
 * Το `touch-action: none` είναι η μόνη δήλωση που το
 * iOS σέβεται αξιόπιστα — το `overflow: hidden` στο body
 * αγνοείται εκεί.
 */
body.mapp-sheet-lock {
    overflow: hidden;
    touch-action: none;
    overscroll-behavior: none;
}

/* Η κύλιση ΜΕΣΑ στο φύλλο πρέπει να παραμείνει — τα
   φίλτρα δεν χωρούν σε μία οθόνη. */
body.mapp-sheet-lock .mapp-filters {
    touch-action: pan-y;
}

@keyframes mappFade { from { opacity: 0; } to { opacity: 1; } }

/*
 * ΣΗΜΑΝΤΙΚΟ — ΓΙΑΤΙ Η ΚΙΝΗΣΗ ΟΡΙΖΕΤΑΙ ΜΕ ΚΛΑΣΕΙΣ (v108)
 *
 * ΤΟ ΣΦΑΛΜΑ ΠΟΥ ΔΙΟΡΘΩΝΕΤΑΙ
 *
 * Πριν, το `.mapp-filters` είχε `animation: mappSlide` στη
 * βάση και `animation: mappSlideUp` μέσα σε
 * `@media (max-width: 640px)`. Οι δύο κινήσεις ΔΕΝ
 * αντικαθιστούσαν καθαρά η μία την άλλη.
 *
 * ΜΕΤΡΗΘΗΚΕ σε 390×664, ΚΑΙ σε Chromium ΚΑΙ σε WebKit:
 *
 *   +30ms   x=0    (ξεκινά από κάτω, σωστά)
 *   +150ms  x=0    (ανεβαίνει, ορατό)
 *   +270ms  x=390  ← ΠΕΤΑΓΕΤΑΙ ΕΚΤΟΣ ΟΘΟΝΗΣ
 *   +1200ms x=390  ← ΜΕΝΕΙ εκτός
 *
 * `transform: matrix(1,0,0,1,390,0)` — μετατόπιση +390px
 * στον Χ, ακριβώς όσο το πλάτος της οθόνης.
 *
 * Ο χρήστης το περιέγραψε: «ανεβοκατεβαίνει, βλέπω
 * τα κουτάκια αλλά δεν προλαβαίνω να τα διαβάσω».
 * Προλάβαινε 150ms.
 *
 * Η ΛΥΣΗ
 *
 * Καμία κινήση στο βασικό επιλογέα. Οι κινήσεις
 * μπαίνουν σε **ξεχωριστές κλάσεις** που δεν
 * συνυπάρχουν ποτέ, με `animation-fill-mode: forwards`
 * και ρητό `transform: none` στο τέλος.
 *
 * Τα `@keyframes` βγήκαν ΕΞΩ από το `@media`: η ένθετη
 * μορφή δουλεύει σε νέους περιηγητές αλλά δεν είναι
 * τυπικά έγκυρη και δεν υπάρχει λόγος να ρισκάρουμε.
 */
.mapp-filters[hidden],
.mapp-filters-back[hidden] {
    display: none !important;
}

.mapp-filters {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1201;
    width: min(400px, 92vw);
    /* Το `dvh` μετρά το ΠΡΑΓΜΑΤΙΚΑ ορατό ύψος. Στο iOS
       Safari το `100vh` αγνοεί τις μπάρες, οπότε το
       φύλλο ξεπερνά την οθόνη και τα κουμπιά στο κάτω
       μέρος γίνονται απάτητα. Το `vh` μένει ως εφεδρικό
       για παλαιότερους περιηγητές. */
    height: 100vh;
    height: 100dvh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    background: #fff;
    box-shadow: 4px 0 30px rgba(15, 23, 42, .2);
}

/* Η κίνηση του υπολογιστή: από τα αριστερά. */
@media (min-width: 641px) {
    .mapp-filters {
        animation: mappSlide .26s cubic-bezier(.22, .61, .36, 1)
                   both;
    }
}

@keyframes mappSlide {
    from { transform: translateX(-100%); }
    to   { transform: none; }
}

@keyframes mappSlideUp {
    from { transform: translateY(100%); }
    to   { transform: none; }
}

@media (max-width: 640px) {
    .mapp-filters {
        top: auto;
        bottom: 0;
        left: 0;
        right: 0;
        width: 100%;
        max-width: 100%;
        /* 88% του ΠΡΑΓΜΑΤΙΚΑ ορατού ύψους. */
        height: 88vh;
        height: 88dvh;
        border-radius: 18px 18px 0 0;
        animation: mappSlideUp .26s cubic-bezier(.22, .61, .36, 1)
                   both;
    }
}

/* =====================================================================
   ΜΕΙΩΜΕΝΗ ΚΙΝΗΣΗ

   Οποιος έχει δηλώσει στο σύστημά του ότι δεν αντέχει κινήσεις —
   συχνά λόγω ιλίγγου — δεν πρέπει να τις υφίσταται.
   ================================================================== */
@media (prefers-reduced-motion: reduce) {
    .mapp-filters,
    .mapp-filters-back { animation: none; }

    .mapp-card,
    .mapp-chip,
    .mapp-search-go    { transition: none; }
}

/* =====================================================================
   MAP-ONLY FOOTER SUPPRESSION
   =====================================================================

   Η αναζήτηση με χάρτη είναι πλήρους ύψους εφαρμογή. Το κανονικό
   footer — ή η παλαιότερη compact παραλλαγή — θα πρόσθετε document
   scroll, θα έσπρωχνε τον χάρτη έξω από το viewport και θα έφερνε
   το floating search icon πάνω στο υποχρεωτικό Leaflet attribution.

   Το `jt-map-view` είναι strict marker που δίνεται μόνο από
   `jobs-map.php`, επομένως κανένα άλλο public footer δεν επηρεάζεται.
   Το Leaflet/OpenStreetMap attribution παραμένει κανονικά ορατό.
   ================================================================== */
body.jt-map-view .site-footer,
body.jt-map-view .site-footer-mini {
    display: none;
}

/* Legacy compact-footer styling remains available if another explicitly
   scoped fullscreen page uses it in the future. */
.site-footer-mini {
    flex: none;
    background: #0f172a;
    color: rgba(255, 255, 255, .72);
    font-size: .82rem;
    padding: 12px 20px;
    border-top: 1px solid rgba(255, 255, 255, .08);
}

.footer-mini-in {
    max-width: 1400px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}

.footer-mini-copy {
    white-space: nowrap;
}

.footer-mini-links {
    display: flex;
    align-items: center;
    gap: 18px;
    flex-wrap: wrap;
}

.footer-mini-links a {
    color: rgba(255, 255, 255, .72);
    text-decoration: none;
    transition: color .15s ease;
}

.footer-mini-links a:hover,
.footer-mini-links a:focus-visible {
    color: #fff;
    text-decoration: underline;
}

@media (max-width: 600px) {
    .footer-mini-in {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }

    .footer-mini-links {
        gap: 14px;
    }
}

/* =====================================================================
   MAP MOBILE LIST UX — compact search, one notice and separate cards
   ===================================================================== */
@media (max-width: 900px) {
    /* The title and its action share the same visual centre line. */
    .mapp-search-peek {
        align-items: center;
    }

    .mapp-search-peek-text {
        display: inline-flex;
        align-items: center;
        min-height: 32px;
        line-height: 1.25;
    }

    .mapp-search-peek-edit {
        align-self: center;
    }

    /* A compact form and a divider make the next control group explicit. */
    .mapp.is-search-open .mapp-searchbar-in {
        gap: 7px;
        padding: 8px 12px 6px;
    }

    .mapp.is-search-open .mapp-toggle {
        margin-top: 1px;
        padding: 8px 4px 4px;
        border-top: 1px solid var(--color-border, #e5e7eb);
        border-radius: 0 0 10px 10px;
    }

    /* One compact disclosure retains both map-marker explanations. */
    .mapp-list-notice {
        margin: 8px 12px 10px;
        overflow: hidden;
        color: #075985;
        background: #f5fbfd;
        border: 1px solid #cfe6ed;
        border-radius: 12px;
    }

    .mapp-list-notice > summary {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        min-height: 44px;
        padding: 9px 12px;
        font-size: 12.5px;
        font-weight: 600;
        line-height: 1.4;
        cursor: pointer;
        list-style: none;
    }

    .mapp-list-notice > summary::-webkit-details-marker { display: none; }

    .mapp-list-notice-summary {
        display: inline-flex;
        flex: 1 1 auto;
        gap: 9px;
        align-items: flex-start;
        min-width: 0;
    }

    .mapp-list-notice-summary > i {
        flex: 0 0 auto;
        margin-top: 2px;
        color: #16839e;
    }

    .mapp-list-notice-chevron {
        flex: 0 0 auto;
        font-size: 11px;
        transition: transform .18s ease;
    }

    .mapp-list-notice[open] .mapp-list-notice-chevron { transform: rotate(180deg); }

    .mapp-list-notice-details {
        padding: 2px 12px 10px;
        border-top: 1px solid #dcedf1;
    }

    .mapp-list-notice-detail {
        display: flex;
        gap: 8px;
        align-items: flex-start;
        margin: 8px 0 0;
        font-size: 12px;
        font-weight: 500;
        line-height: 1.45;
    }

    .mapp-list-notice-detail i {
        flex: 0 0 auto;
        margin-top: 2px;
    }

    .mapp-list-notice-detail--missing { color: #7c5b16; }
    .mapp-list-notice-detail--missing i { color: #d97706; }
    .mapp-list-notice-detail--remote { color: #075985; }
    .mapp-list-notice-detail--remote i { color: #0284c7; }

    /* Mobile list gets the same visual separation as the desktop sidebar. */
    .mapp-list {
        padding: 2px 12px 16px;
        background: var(--color-bg, #f8fafc);
    }

    .mapp-list > .mapp-card,
    .mapp-list > .mapp-card:nth-child(even) {
        margin: 0 0 10px;
        padding: 15px 16px;
        background: #fff;
        border: 1px solid var(--color-border, #e5e7eb);
        border-left: 3px solid transparent;
        border-radius: 12px;
        box-shadow: 0 2px 7px rgba(15, 23, 42, .035);
        transition: background .16s, border-color .16s, border-left-color .16s, box-shadow .16s;
    }

    .mapp-list > .mapp-card:hover,
    .mapp-list > .mapp-card:nth-child(even):hover {
        background: #f5f9fb;
        border-color: #c9dce5;
        border-left-color: #8aaebc;
        box-shadow: 0 4px 12px rgba(15, 23, 42, .055);
    }

    .mapp-list > .mapp-card.is-active,
    .mapp-list > .mapp-card:nth-child(even).is-active {
        background: #e8f3f7;
        border-color: #b7d5df;
        border-left-color: #167c99;
        box-shadow: 0 7px 16px rgba(22, 124, 153, .11);
    }

    .mapp-list > .mapp-card-nopin,
    .mapp-list > .mapp-card-nopin:nth-child(even),
    .mapp-list > .mapp-card-nopin:hover,
    .mapp-list > .mapp-card-nopin:nth-child(even):hover {
        background: #fff;
        border-left-color: transparent;
        box-shadow: 0 2px 7px rgba(15, 23, 42, .035);
    }
}

/* =====================================================================
   MAP MOBILE ACTIONS + VIEWPORT SPACE
   ===================================================================== */
@media (max-width: 900px) {
    /* Optical, not only mathematical, centring in the 44px search line. */
    .mapp-search-peek > i,
    .mapp-search-peek-text,
    .mapp-search-peek-edit {
        position: relative;
        top: 1px;
    }

    /* Search modification is the one primary action in the compact header. */
    .mapp-search-peek [data-peek-open] {
        color: #fff;
        background: var(--color-primary, #e91e63);
        border-color: var(--color-primary, #e91e63);
        box-shadow: 0 3px 8px rgba(193, 24, 80, .18);
    }

    .mapp-search-peek:hover [data-peek-open],
    .mapp-search-peek:focus-visible [data-peek-open] {
        color: #fff;
        background: var(--color-primary-dark, #c2185b);
        border-color: var(--color-primary-dark, #c2185b);
    }

    /* The open state is an explicit close action, with a visible round ×. */
    .mapp.is-search-open .mapp-search-peek-close {
        gap: 8px;
        padding: 0 6px 0 10px;
        color: #344054;
        background: #fff;
        border-color: #98a2b3;
        box-shadow: none;
    }

    .mapp.is-search-open .mapp-search-peek:hover .mapp-search-peek-close,
    .mapp.is-search-open .mapp-search-peek:focus-visible .mapp-search-peek-close {
        color: #1d2939;
        background: #f8fafc;
        border-color: #667085;
    }

    .mapp-search-peek-close-x {
        display: inline-flex;
        width: 22px;
        height: 22px;
        align-items: center;
        justify-content: center;
        border-radius: 50%;
        color: #fff;
        background: #475467;
        font-size: 17px;
        font-weight: 500;
        line-height: 1;
    }

    /* The map has no footer at any viewport, so all mobile height returns
       to the map canvas. The body-scoped suppression above owns footer visibility. */
    .mapp {
        height: calc(100dvh - var(--mapp-header) - var(--mapp-foot));
    }
}

/* =====================================================================
   MAP MOBILE SEARCH HEADER — TRUE VERTICAL CENTRING + OPEN STATE
   ===================================================================== */
@media (max-width: 900px) {
    /* A fixed flex row gives every header item equal space above/below. */
    .mapp-search-peek {
        height: 48px;
        min-height: 48px;
        box-sizing: border-box;
        align-items: center;
    }

    .mapp-search-peek > i,
    .mapp-search-peek-text,
    .mapp-search-peek-edit {
        top: auto;
        line-height: 1;
    }

    .mapp-search-peek-text {
        display: flex;
        height: 100%;
        align-items: center;
    }

    /* When criteria are visible, only the clear close action remains. */
    .mapp.is-search-open .mapp-search-peek {
        justify-content: flex-end;
        min-height: 48px;
        height: 48px;
        padding: 0 12px;
    }

    .mapp.is-search-open .mapp-search-peek > i,
    .mapp.is-search-open .mapp-search-peek-text {
        display: none;
    }
}

/* The label glyph line box is 1.5px high-side on mobile; compensate precisely. */
@media (max-width: 900px) {
    .mapp-search-peek > i,
    .mapp-search-peek-text {
        transform: translateY(.75px);
    }

    .mapp.is-search-open .mapp-search-peek > i,
    .mapp.is-search-open .mapp-search-peek-text {
        transform: none;
    }
}

/* =====================================================================
   MAP MOBILE HEADER + PICKERS — balanced outer spacing and clear close
   ===================================================================== */
@media (max-width: 900px) {
    /* Balance the visible searchbar itself, not only the inner text box. */
    .mapp:not(.is-search-open) .mapp-searchbar-in {
        align-items: center;
        padding: 5px 0;
    }

    .mapp:not(.is-search-open) .mapp-search-peek {
        flex: 0 0 48px;
        height: 48px;
    }

    /* Keep an explicit Filters label, while the two view actions flex down. */
    .mapp-toggle-btn {
        flex: 1 1 0;
    }

    .mapp-toggle-filters {
        min-width: 0;
        padding-inline: 10px;
        gap: 6px;
    }

    .mapp-toggle-filters-label {
        display: inline;
        white-space: nowrap;
    }

    /* App-owned mobile picker replaces the browser-native popup only here. */
    .mapp-picker-back {
        position: fixed;
        inset: 0;
        z-index: 1200;
        background: rgba(15, 23, 42, .30);
        -webkit-backdrop-filter: blur(2px);
        backdrop-filter: blur(2px);
    }

    .mapp-picker {
        position: fixed;
        z-index: 1201;
        right: 12px;
        bottom: max(12px, env(safe-area-inset-bottom));
        left: 12px;
        overflow: hidden;
        max-height: min(70dvh, 520px);
        color: var(--color-text, #0f172a);
        background: #fff;
        border: 1px solid rgba(255, 255, 255, .75);
        border-radius: 18px;
        box-shadow: 0 18px 46px rgba(15, 23, 42, .24);
    }

    .mapp-picker[hidden],
    .mapp-picker-back[hidden] {
        display: none !important;
    }

    .mapp-picker-head {
        display: flex;
        align-items: center;
        justify-content: space-between;
        min-height: 58px;
        padding: 0 14px 0 18px;
        border-bottom: 1px solid var(--color-border, #e5e7eb);
    }

    .mapp-picker-head strong {
        font-size: 16px;
        line-height: 1.2;
    }

    .mapp-picker-close {
        display: inline-flex;
        flex: 0 0 34px;
        align-items: center;
        justify-content: center;
        width: 34px;
        height: 34px;
        padding: 0;
        color: #fff;
        background: #475467;
        border: 0;
        border-radius: 50%;
        cursor: pointer;
    }

    .mapp-picker-close:hover,
    .mapp-picker-close:focus-visible {
        background: #1d2939;
    }

    .mapp-picker-options {
        overflow-y: auto;
        max-height: calc(min(70dvh, 520px) - 58px);
        padding: 6px 8px calc(8px + env(safe-area-inset-bottom));
        overscroll-behavior: contain;
        -webkit-overflow-scrolling: touch;
    }

    .mapp-picker-option {
        display: flex;
        align-items: center;
        width: 100%;
        min-height: 48px;
        padding: 10px 12px;
        font: inherit;
        font-size: 15px;
        font-weight: 600;
        line-height: 1.35;
        color: var(--color-text, #0f172a);
        text-align: left;
        background: transparent;
        border: 0;
        border-radius: 10px;
        cursor: pointer;
    }

    .mapp-picker-option:hover,
    .mapp-picker-option:focus-visible {
        color: var(--color-primary-dark, #c2185b);
        background: #fff1f6;
        outline: none;
    }

    .mapp-picker-option.is-selected {
        gap: 10px;
        color: var(--color-primary-dark, #c2185b);
        background: #fff1f6;
    }

    .mapp-picker-option.is-selected > i {
        flex: 0 0 auto;
        color: var(--color-primary, #e91e63);
    }

    body.mapp-picker-lock {
        overflow: hidden;
        touch-action: none;
    }
}

/* Closed search: the header action and the mobile toolbar are siblings in the same container.
   Keep them in ordinary vertical flow, separated by exactly 8px. */
@media (max-width: 900px) {
    .mapp:not(.is-search-open) .mapp-searchbar {
        height: auto;
        min-height: 0;
        max-height: none;
        overflow: visible;
        z-index: auto;
    }

    .mapp:not(.is-search-open) .mapp-searchbar-in {
        position: static;
        display: flex;
        flex-direction: column;
        align-items: stretch;
        justify-content: flex-start;
        gap: 8px;
        height: auto;
        min-height: 0;
        max-height: none;
        padding: 8px 0 0;
        box-sizing: border-box;
    }

    .mapp:not(.is-search-open) .mapp-search-peek {
        position: static;
        top: auto;
        flex: 0 0 48px;
        width: 100%;
        height: 48px;
        min-height: 48px;
        max-height: 48px;
        margin: 0;
        transform: none;
    }

    .mapp:not(.is-search-open) .mapp-toggle {
        position: static;
        z-index: auto;
        flex: 0 0 auto;
        margin: 0;
    }
}

/* ========================================================================
   MOBILE PICKER: EXCLUSIVE JOBTIMIST TRIGGER (v116)
   ========================================================================
   The native select remains the form source of truth, but it must never be
   a mobile hit target. iOS/Samsung browsers can otherwise replay a touch
   after a sheet scroll, option choice or close action and reopen their
   native picker. The visible button below is the only mobile entry point.
   ======================================================================== */
.mapp-picker-trigger {
    display: none;
}

@media (max-width: 900px) {
    /* Χωρίς JavaScript τα αρχικά selects παραμένουν λειτουργικό fallback.
       Με ενεργό trigger κρύβονται πλήρως ώστε να μη φτάνει ποτέ touch
       στον browser-native iOS/Android επιλογέα. */
    .mapp-search-region > .mapp-search-select.mapp-picker-enhanced,
    .mapp-search-cat > .mapp-search-select.mapp-picker-enhanced {
        display: none;
    }

    .mapp-search-region > .mapp-picker-trigger,
    .mapp-search-cat > .mapp-picker-trigger {
        position: relative;
        z-index: 1;
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 100%;
        height: 48px;
        padding: 0 16px 0 42px;
        overflow: hidden;
        font: inherit;
        font-size: 16px;
        font-weight: 500;
        line-height: 1.25;
        color: var(--color-text, #0f172a);
        text-align: left;
        text-overflow: ellipsis;
        white-space: nowrap;
        cursor: pointer;
        background: var(--color-bg, #f8f9fb);
        border: 1px solid var(--color-border, #e5e7eb);
        border-radius: 12px;
    }

    .mapp-search-region > .mapp-picker-trigger:focus-visible,
    .mapp-search-cat > .mapp-picker-trigger:focus-visible {
        outline: none;
        background: #fff;
        border-color: var(--color-primary, #e91e63);
        box-shadow: 0 0 0 3px rgba(233, 30, 99, .1);
    }

    .mapp-picker-trigger-label {
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .mapp-picker-trigger > .fa-chevron-down {
        flex: 0 0 auto;
        margin-left: 12px;
        color: var(--color-text-light, #94a3b8);
        font-size: 13px;
        pointer-events: none;
    }
}

/* ========================================================================
   MAP FILTER PANEL REFINEMENTS (v117)
   ======================================================================== */
@media (max-width: 900px) {
    /* Only the committed picker value receives the brand selection colour. */
    .mapp-picker-option:hover {
        color: var(--color-text, #0f172a);
        background: transparent;
    }

    .mapp-picker-option:focus-visible {
        outline: 2px solid var(--color-primary, #e91e63);
        outline-offset: -2px;
        color: var(--color-text, #0f172a);
        background: transparent;
    }

    .mapp-picker-option.is-selected,
    .mapp-picker-option.is-selected:hover,
    .mapp-picker-option.is-selected:focus-visible {
        color: var(--color-primary-dark, #c2185b);
        background: #fff1f6;
    }

    .mapp-filters .jf-subcategory-group.is-disabled {
        opacity: .56;
    }

    .mapp-filters .jf-subcategory-group.is-disabled .jf-select {
        cursor: not-allowed;
        background: #f5f7fa;
    }

    /* Secondary, non-destructive action: distinct from the burgundy apply button. */
    .mapp-filters .jf-reset {
        color: #087e9b;
        background: #e7f7fb;
        border-color: #9cdae8;
    }

    .mapp-filters .jf-reset:hover {
        color: #056b84;
        background: #d6f1f7;
        border-color: #6fc4d7;
    }

    .mapp-filters .jf-reset:focus-visible {
        outline-color: rgba(8, 126, 155, .28);
    }
}

/* ========================================================================
   FILTER-SHEET OWNED PICKERS AND COMPACT MOBILE OPTION LAYOUT (v118)
   ======================================================================== */
@media (max-width: 900px) {
    /* The existing leading icons must remain above the owned search triggers. */
    .mapp-search-region > i,
    .mapp-search-cat > i {
        z-index: 2;
    }

    /* The browser-native controls are source-of-truth only on mobile. */
    .mapp-filters #mappRegion.mapp-picker-enhanced,
    .mapp-filters #mappCategory.mapp-picker-enhanced,
    .mapp-filters #mappSub.mapp-picker-enhanced {
        display: none;
    }

    /* Filter-sheet triggers reproduce the existing .jf-select geometry. */
    .mapp-filters .mapp-picker-trigger {
        position: relative;
        z-index: 1;
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 100%;
        min-height: 48px;
        padding: 0 12px;
        overflow: hidden;
        font: inherit;
        font-size: 16px;
        line-height: 1.25;
        color: var(--color-text, #0f172a);
        text-align: left;
        background: #fff;
        border: 1px solid var(--border, #d7dce3);
        border-radius: 9px;
        cursor: pointer;
    }

    .mapp-filters .mapp-picker-trigger:focus-visible {
        outline: none;
        border-color: var(--primary, #e91e63);
        box-shadow: 0 0 0 3px rgba(233, 30, 99, .10);
    }

    .mapp-filters .mapp-picker-trigger:disabled {
        cursor: not-allowed;
        color: var(--color-text-light, #94a3b8);
        background: #f5f7fa;
    }

    /* Wider owned sheet and tighter inner gutters keep long Greek labels readable. */
    .mapp-picker {
        right: max(8px, env(safe-area-inset-right));
        bottom: max(8px, env(safe-area-inset-bottom));
        left: max(8px, env(safe-area-inset-left));
        max-width: 640px;
        max-height: min(74dvh, 560px);
        margin-inline: auto;
        border-radius: 20px;
    }

    .mapp-picker-options {
        max-height: calc(min(74dvh, 560px) - 58px);
        padding: 5px 6px calc(7px + env(safe-area-inset-bottom));
    }

    .mapp-picker-option {
        min-height: 46px;
        padding: 8px 10px;
        font-size: 15px;
        line-height: 1.28;
    }
}

/* ========================================================================
   FILTER PANEL SMOKY OVERLAY WHILE AN OWNED PICKER IS OPEN (v120)
   ======================================================================== */
@media (max-width: 900px) {
    /* Prevent scroll and direct interaction with the lower filter layer. */
    .mapp-filters.is-picker-layered {
        overflow: hidden;
    }

    /*
     * A true intermediate scrim, not reduced opacity of the whole sheet.
     * The filter panel remains recognisable but is clearly secondary to the
     * fully sharp Περιοχή / Κατηγορία / Υποκατηγορία dialog above it.
     */
    .mapp-picker-filter-scrim {
        position: absolute;
        z-index: 100;
        inset: 0;
        display: block;
        background: rgba(15, 23, 42, .38);
        -webkit-backdrop-filter: blur(3px) saturate(.82);
        backdrop-filter: blur(3px) saturate(.82);
        touch-action: none;
        animation: mappFade .14s ease both;
    }
}

/* =====================================================================
   MAP FILTER SHEET — SUBTLE JOBTIMIST IDENTITY

   Η ταυτότητα είναι σκόπιμα περιορισμένη στο mobile map sheet. Δεν
   αλλάζει desktop side-panel, controlled picker, scrim ή draft flow.
   ================================================================== */
.mapp-filters .mapp-jf-header-icon,
.mapp-filters .mapp-jf-active-status,
.mapp-filters .mapp-jf-header-help,
.mapp-filters .jf-label > i {
    display: none;
}

@media (max-width: 640px) {
    .mapp-filters .jf-header {
        margin-bottom: 12px;
        padding-top: calc(13px + env(safe-area-inset-top, 0px));
        padding-bottom: 13px;
        box-shadow: 0 2px 10px rgba(15, 23, 42, .045);
    }

    .mapp-filters .mapp-jf-header-copy {
        display: flex;
        min-width: 0;
        align-items: flex-start;
        gap: 10px;
        padding-right: 8px;
    }

    .mapp-filters .mapp-jf-header-icon {
        display: inline-flex;
        width: 34px;
        height: 34px;
        flex: 0 0 34px;
        align-items: center;
        justify-content: center;
        border-radius: 10px;
        background: #fbe8ef;
        color: var(--primary);
        font-size: 14px;
    }

    .mapp-filters .mapp-jf-title-row {
        display: flex;
        min-width: 0;
        flex-wrap: wrap;
        align-items: center;
        gap: 6px 8px;
    }

    .mapp-filters .jf-title {
        font-size: 18px;
        line-height: 1.2;
    }

    .mapp-filters .mapp-jf-active-status {
        display: inline-flex;
        min-height: 22px;
        align-items: center;
        padding: 2px 8px;
        border: 1px solid #dfe4e8;
        border-radius: 999px;
        background: #f4f6f7;
        color: #69747c;
        font-size: 11px;
        font-weight: 700;
        line-height: 1.15;
        white-space: nowrap;
    }

    .mapp-filters .mapp-jf-active-status.has-active-filters {
        border-color: #f0bdcf;
        background: #fff0f5;
        color: #a10f43;
    }

    .mapp-filters .mapp-jf-header-help {
        display: block;
        max-width: 250px;
        margin: 4px 0 0;
        color: #69747c;
        font-size: 11.5px;
        line-height: 1.35;
    }

    .mapp-filters .jf-label {
        display: flex;
        align-items: center;
        gap: 7px;
        margin-bottom: 9px;
        color: #26323a;
        letter-spacing: -0.01em;
    }

    .mapp-filters .jf-label > i {
        display: inline-flex;
        width: 17px;
        justify-content: center;
        color: #087e9b;
        font-size: 12px;
    }

    .mapp-filters .mapp-jf-group-location .jf-label > i,
    .mapp-filters .mapp-jf-group-category .jf-label > i {
        color: var(--primary);
    }

    .mapp-filters .jf-group {
        border-bottom-color: #e9edf0;
    }

    .mapp-filters .jf-actions {
        box-shadow: 0 -6px 14px rgba(15, 23, 42, .065);
    }
}

@media (prefers-reduced-motion: reduce) {
    .mapp-filters .mapp-jf-active-status {
        transition: none;
    }
}

/* =====================================================================
   UNIFIED LIGHT PICKER IDENTITY — MAP SEARCH & FILTERS (ZIP315)
   ======================================================================== */
@media (max-width: 900px) {
    .mapp-search-region > .mapp-picker-trigger,
    .mapp-search-cat > .mapp-picker-trigger,
    .mapp-filters .mapp-picker-trigger {
        min-height: 52px;
        border-color: #d9e1e8;
        border-radius: 14px;
        background: #fff;
        box-shadow: 0 2px 8px rgba(15, 23, 42, .045);
    }

    .mapp-search-region > .mapp-picker-trigger,
    .mapp-search-cat > .mapp-picker-trigger {
        height: 52px;
    }

    .mapp-search-region > .mapp-picker-trigger > .fa-chevron-down,
    .mapp-search-cat > .mapp-picker-trigger > .fa-chevron-down,
    .mapp-filters .mapp-picker-trigger > .fa-chevron-down {
        color: #7b8798;
    }

    .mapp-picker {
        border-color: #e1e7ed;
        border-radius: 22px;
        background: #f8fafc;
        box-shadow: 0 22px 56px rgba(15, 23, 42, .20);
    }

    .mapp-picker-head {
        min-height: 68px;
        padding: 14px 16px;
        background: #fff;
        border-bottom-color: #e6ebf0;
    }

    .mapp-picker-title-wrap {
        display: flex;
        align-items: center;
        gap: 11px;
        min-width: 0;
    }

    .mapp-picker-title-icon {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 38px;
        height: 38px;
        flex: 0 0 auto;
        border: 1px solid #f7d6e3;
        border-radius: 12px;
        color: var(--color-primary, #e91e63);
        background: #fff2f7;
        font-size: 15px;
    }

    .mapp-picker-head strong {
        color: #1f2937;
        font-size: 18px;
        letter-spacing: -.01em;
    }

    .mapp-picker-close {
        width: 38px;
        height: 38px;
        border: 1px solid #dce4eb;
        background: #f1f5f9;
        color: #526174;
        box-shadow: none;
    }

    .mapp-picker-close:hover,
    .mapp-picker-close:focus-visible {
        background: #e7edf3;
        color: #334155;
    }

    .mapp-picker-options {
        display: flex;
        flex-direction: column;
        gap: 5px;
        padding: 8px 9px calc(10px + env(safe-area-inset-bottom));
        background: #f8fafc;
    }

    .mapp-picker-option {
        min-height: 50px;
        padding: 10px 13px;
        border: 1px solid transparent;
        border-radius: 14px;
        background: #fff;
        box-shadow: 0 1px 2px rgba(15, 23, 42, .025);
        color: #263242;
        font-weight: 650;
    }

    .mapp-picker-option.is-selected,
    .mapp-picker-option.is-selected:hover,
    .mapp-picker-option.is-selected:focus-visible {
        border-color: #f5cbdc;
        background: #fff1f6;
        color: var(--color-primary-dark, #c2185b);
        box-shadow: none;
    }

    .mapp-picker-option:active:not(.is-selected) {
        border-color: #dbe3ea;
        background: #f0f4f7;
    }
}

@media (prefers-reduced-motion: reduce) {
    .mapp-picker,
    .mapp-picker-option,
    .mapp-picker-trigger { transition: none; }
}

/* =====================================================================
   COMPACT MOBILE FILTER ROWS (ZIP316)
   Κοινή mobile πυκνότητα με τα results filters, με σαφώς compact 40px rows.
   ======================================================================== */
@media (max-width: 640px) {
    .mapp-filters .jf-check,
    .mapp-filters .jf-radio {
        box-sizing: border-box;
        min-height: 40px;
        gap: 7px;
        margin: 0;
        padding: 4px 0;
        line-height: 1.3;
    }

    .mapp-filters .jf-check + .jf-check,
    .mapp-filters .jf-radio + .jf-radio {
        margin-top: 0;
    }

    .mapp-filters .jf-check input,
    .mapp-filters .jf-radio input {
        width: 19px;
        height: 19px;
    }

    .mapp-filters .jf-group {
        padding-bottom: 10px;
        margin-bottom: 10px;
    }
}

/* =====================================================================
   MOBILE MAP SEARCH SIMPLIFICATION (ZIP326)
   ---------------------------------------------------------------------
   The desktop top form remains the no-JS/desktop search surface. Below
   900px it is intentionally absent: map Filters and the accepted global
   floating search provide the mobile editing paths. No competing action
   is introduced; the original List / Map / Filters toolbar remains.
   ================================================================== */
@media (max-width: 900px) {
    .mapp-search-form {
        display: none !important;
    }

    .mapp-searchbar,
    .mapp:not(.is-search-open) .mapp-searchbar {
        height: auto;
        min-height: 0;
        max-height: none;
        overflow: visible;
    }

    .mapp-searchbar-in,
    .mapp:not(.is-search-open) .mapp-searchbar-in {
        display: block;
        height: auto;
        min-height: 0;
        padding: 8px 0 0;
    }

    .mapp.is-search-open .mapp-searchbar-in {
        gap: 0;
        padding: 8px 0 0;
    }

    .mapp-toggle,
    .mapp:not(.is-search-open) .mapp-toggle,
    .mapp.is-search-open .mapp-toggle {
        margin-top: 0;
        padding-top: 4px;
        border-top: 0;
        border-radius: 10px;
    }
}

/* ========================================================================
   ΕΝΙΑΙΟ MOBILE FILTER SHEET — MAP / RESULTS / GLOBAL SEARCH (ZIP327)
   --------------------------------------------------------------------
   Τα map filters ακολουθούν την ίδια κάτω-sheet ταυτότητα με τα results
   filters σε κάθε mobile πλάτος. Η desktop πλάγια επιφάνεια διατηρείται.
   Η Τοποθεσία συνδυάζει quick προορισμούς και ακριβή αναζήτηση στο ίδιο
   sheet, με το select πάντα διαθέσιμο όταν δεν φορτωθεί JavaScript.
   ====================================================================== */
@media (max-width: 768px) {
    .mapp-filters {
        top: auto;
        right: 0;
        bottom: 0;
        left: 0;
        display: flex;
        flex-direction: column;
        align-items: stretch;
        width: 100%;
        max-width: none;
        height: 88vh;
        height: 88dvh;
        max-height: 88vh;
        max-height: 88dvh;
        min-height: 0;
        overflow: hidden;
        border: 1px solid rgba(209, 219, 228, .92);
        border-right: 0;
        border-bottom: 0;
        border-left: 0;
        border-radius: 24px 24px 0 0;
        background: #fff;
        box-shadow: 0 -16px 52px rgba(15, 23, 42, .25), 0 -2px 10px rgba(15, 23, 42, .09);
        animation: mappSlideUp .26s cubic-bezier(.22, .61, .36, 1) both;
    }

    .mapp-filters::before {
        position: absolute;
        z-index: 2;
        top: 0;
        right: 0;
        left: 0;
        height: 4px;
        background: linear-gradient(90deg, #c2185b, #e91e63);
        content: '';
    }

    .mapp-filters .jf-header {
        position: relative;
        z-index: 1;
        flex: 0 0 auto;
        margin: 0;
        padding: calc(17px + env(safe-area-inset-top, 0px)) 18px 14px;
        border-bottom: 1px solid #e6ebf0;
        background: linear-gradient(135deg, #fff 0%, #fff7fa 100%);
        box-shadow: none;
    }

    .mapp-filters .mapp-jf-header-copy {
        display: flex;
        align-items: flex-start;
        gap: 12px;
        min-width: 0;
        padding-right: 4px;
    }

    .mapp-filters .mapp-jf-header-icon {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 34px;
        height: 34px;
        flex: 0 0 34px;
        margin-top: 2px;
        border-radius: 11px;
        color: #c2185b;
        background: #fff0f5;
        font-size: 14px;
    }

    .mapp-filters .mapp-jf-title-row {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 6px 8px;
    }

    .mapp-filters .jf-title {
        color: #172033;
        font-size: 19px;
        line-height: 1.2;
        letter-spacing: -.015em;
    }

    .mapp-filters .mapp-jf-active-status {
        display: inline-flex;
        align-items: center;
        min-height: 22px;
        padding: 2px 8px;
        border: 1px solid #e4e9ee;
        border-radius: 999px;
        color: #607080;
        background: #f4f7f9;
        font-size: 11px;
        font-weight: 800;
        line-height: 1.1;
        white-space: nowrap;
    }

    .mapp-filters .mapp-jf-active-status.has-active-filters {
        border-color: #f5cad9;
        color: #c2185b;
        background: #fff1f6;
    }

    .mapp-filters .mapp-jf-header-help {
        max-width: 300px;
        margin: 5px 0 0;
        color: #66758a;
        font-size: 12.5px;
        font-weight: 500;
        line-height: 1.42;
    }

    .mapp-filters .jf-close {
        width: 38px;
        height: 38px;
        flex: 0 0 auto;
        color: #475569;
        background: #f1f5f9;
        font-size: 27px;
        transition: background-color .16s ease, color .16s ease, transform .16s ease;
    }

    .mapp-filters .jf-close:hover,
    .mapp-filters .jf-close:focus-visible {
        color: #c2185b;
        background: #fff1f6;
        transform: rotate(4deg);
    }

    .mapp-filters form {
        display: flex;
        min-height: 0;
        flex: 1 1 auto;
        flex-direction: column;
    }

    .mapp-filters .mapp-jf-sheet-body {
        min-height: 0;
        flex: 1 1 auto;
        overflow-y: auto;
        overscroll-behavior: contain;
        -webkit-overflow-scrolling: touch;
        touch-action: pan-y;
        padding: 16px 18px 18px;
        scrollbar-color: #cbd5df transparent;
    }

    .mapp-filters .jf-group {
        margin-bottom: 10px;
        padding-bottom: 10px;
        border-bottom-color: #e7edf1;
    }

    .mapp-filters .jf-label {
        display: flex;
        align-items: center;
        gap: 8px;
        margin-bottom: 7px;
        color: #344256;
        font-size: 13px;
        font-weight: 800;
        line-height: 1.25;
    }

    .mapp-filters .jf-label > i {
        width: 15px;
        color: #c2185b;
        text-align: center;
    }

    .mapp-filters .mapp-jf-group-subcategory .jf-label > i,
    .mapp-filters .mapp-jf-group-facet .jf-label > i,
    .mapp-filters .mapp-jf-group-salary .jf-label > i {
        color: #087e9b;
    }

    .mapp-filters .mapp-picker-trigger,
    .mapp-filters .jf-input {
        min-height: 46px;
        height: 46px;
        border-color: #dce4ea;
        border-radius: 13px;
        color: #172033;
        background: #fff;
        box-shadow: 0 1px 0 rgba(15, 23, 42, .02);
        font-size: 16px;
        font-weight: 650;
    }

    .mapp-filters .mapp-picker-trigger:hover {
        border-color: #cbd7e0;
        background: #fbfdfe;
    }

    .mapp-filters .jf-actions {
        position: relative;
        z-index: 1;
        flex: 0 0 auto;
        margin: 0;
        padding: 12px 18px calc(13px + env(safe-area-inset-bottom, 0px));
        border-top: 1px solid #e6ebf0;
        background: #fff;
        box-shadow: 0 -7px 18px rgba(15, 23, 42, .08);
    }

    .mapp-filters .jf-apply {
        min-height: 48px;
        border-radius: 13px;
        background: #c2185b;
        box-shadow: 0 5px 12px rgba(194, 24, 91, .22);
    }

    .mapp-filters .mapp-location-discovery {
        display: none;
        margin-top: 9px;
    }

    .mapp-filters form.mapp-location-discovery-ready .mapp-location-discovery {
        display: block;
    }

    .mapp-filters form.mapp-location-discovery-ready #mappRegion {
        display: none !important;
    }

    .mapp-location-search {
        position: relative;
    }

    .mapp-location-search > i {
        position: absolute;
        z-index: 1;
        top: 50%;
        left: 14px;
        color: #c2185b;
        font-size: 14px;
        transform: translateY(-50%);
        pointer-events: none;
    }

    .mapp-location-search > input {
        box-sizing: border-box;
        width: 100%;
        min-height: 46px;
        padding: 11px 44px 11px 38px;
        border: 1px solid #dce4ea;
        border-radius: 13px;
        color: #172033;
        background: #fff;
        box-shadow: 0 1px 0 rgba(15, 23, 42, .02);
        font: inherit;
        font-size: 16px;
        font-weight: 650;
        line-height: 1.25;
    }

    .mapp-location-search > input:focus {
        border-color: rgba(194, 24, 91, .58);
        box-shadow: 0 0 0 3px rgba(233, 30, 99, .10);
        outline: none;
    }

    .mapp-location-clear {
        position: absolute;
        top: 50%;
        right: 8px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 30px;
        height: 30px;
        padding: 0;
        border: 0;
        border-radius: 50%;
        color: #637286;
        background: #edf2f6;
        cursor: pointer;
        font-size: 21px;
        line-height: 1;
        transform: translateY(-50%);
    }

    .mapp-location-clear[hidden],
    .mapp-location-results[hidden],
    .mapp-location-quick[hidden] {
        display: none;
    }

    .mapp-location-help {
        margin: 7px 0 0;
        color: #66758a;
        font-size: 12px;
        line-height: 1.4;
    }

    .mapp-location-quick {
        display: grid;
        gap: 10px;
        margin-top: 11px;
    }

    .mapp-location-quick-group,
    .mapp-location-results {
        overflow: hidden;
        border: 1px solid #dce4ea;
        border-radius: 16px;
        background: #f8fafc;
        box-shadow: 0 5px 18px rgba(15, 23, 42, .04);
    }

    .mapp-location-quick-group {
        padding: 13px;
    }

    .mapp-location-quick-heading {
        display: flex;
        align-items: flex-start;
        gap: 9px;
        margin-bottom: 10px;
    }

    .mapp-location-quick-icon {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 31px;
        height: 31px;
        flex: 0 0 auto;
        border-radius: 10px;
        color: #087e9b;
        background: #edf8fa;
        font-size: 13px;
    }

    .mapp-location-quick-group--seasonal .mapp-location-quick-icon {
        color: #b45309;
        background: #fff7ed;
    }

    .mapp-location-quick-heading h3 {
        margin: 0;
        color: #344256;
        font-size: 14px;
        line-height: 1.25;
    }

    .mapp-location-quick-heading p {
        margin: 2px 0 0;
        color: #66758a;
        font-size: 11.5px;
        line-height: 1.35;
    }

    .mapp-location-tags {
        display: flex;
        flex-wrap: wrap;
        gap: 7px;
    }

    .mapp-location-tag {
        min-height: 35px;
        padding: 7px 11px;
        border: 1px solid #b9e1e8;
        border-radius: 999px;
        color: #087e9b;
        background: #fff;
        cursor: pointer;
        font: inherit;
        font-size: 13px;
        font-weight: 750;
        line-height: 1.2;
    }

    .mapp-location-tag--seasonal {
        border-color: #f3d6b0;
        color: #b45309;
        background: #fffaf4;
    }

    .mapp-location-results {
        display: grid;
        gap: 4px;
        margin-top: 11px;
        padding: 6px;
    }

    .mapp-location-result {
        display: flex;
        align-items: center;
        width: 100%;
        min-height: 42px;
        padding: 8px 10px;
        border: 0;
        border-radius: 11px;
        color: #273547;
        background: #fff;
        cursor: pointer;
        font: inherit;
        text-align: left;
    }

    .mapp-location-result:hover,
    .mapp-location-result:focus-visible {
        color: #c2185b;
        background: #fff1f6;
        outline: none;
    }

    .mapp-location-result strong,
    .mapp-location-result small {
        display: block;
    }

    .mapp-location-result small {
        margin-top: 2px;
        color: #778699;
        font-size: 11px;
        font-weight: 600;
    }

    .mapp-location-empty {
        padding: 13px 10px;
        color: #6d7b8c;
        font-size: 13px;
        font-weight: 600;
    }
}

@media (min-width: 769px) {
    .mapp-location-discovery {
        display: none;
    }
}

/* ZIP328 — default-closed quick destination accordions inside map filters. */
@media (max-width: 768px) {
    .mapp-location-quick-accordion {
        padding: 0;
    }

    .mapp-location-quick-accordion > summary {
        display: flex;
        align-items: center;
        gap: 9px;
        min-height: 59px;
        margin: 0;
        padding: 12px 13px;
        cursor: pointer;
        list-style: none;
        user-select: none;
    }

    .mapp-location-quick-accordion > summary::-webkit-details-marker {
        display: none;
    }

    .mapp-location-quick-copy {
        display: grid;
        min-width: 0;
        flex: 1 1 auto;
        gap: 2px;
    }

    .mapp-location-quick-copy strong {
        color: #344256;
        font-size: 14px;
        line-height: 1.25;
    }

    .mapp-location-quick-copy small {
        color: #66758a;
        font-size: 11.5px;
        font-weight: 600;
        line-height: 1.35;
    }

    .mapp-location-quick-chevron {
        flex: 0 0 auto;
        color: #718095;
        font-size: 13px;
        transition: transform .18s ease;
    }

    .mapp-location-quick-accordion[open] .mapp-location-quick-chevron {
        transform: rotate(180deg);
    }

    .mapp-location-quick-accordion > .mapp-location-tags {
        padding: 0 13px 13px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .mapp-location-quick-chevron {
        transition: none;
    }
}

/* ZIP330 — common teal “Περισσότερα φίλτρα” frame for map mobile filters. */
@media (max-width: 768px) {
    .mapp-filters .mapp-more-filters-frame {
        margin: 4px 0 12px;
        overflow: hidden;
        border: 1px solid #b9e0e9;
        border-radius: 14px;
        background: #eaf8fb;
        box-shadow: 0 5px 16px rgba(8, 126, 155, .07);
    }

    .mapp-filters .mapp-more-filters-title {
        display: flex;
        align-items: center;
        gap: 9px;
        min-height: 46px;
        padding: 11px 13px;
        color: #fff;
        background: #087e9b;
        font-size: 14px;
        font-weight: 850;
        line-height: 1.2;
    }

    .mapp-filters .mapp-more-filters-title > i {
        color: #fff;
        font-size: 14px;
    }

    .mapp-filters .mapp-more-filters-body {
        padding: 12px 13px 2px;
        background: #eaf8fb;
    }

    .mapp-filters .mapp-more-filters-body .jf-group {
        margin-bottom: 10px;
        padding-bottom: 10px;
        border-bottom-color: rgba(8, 126, 155, .18);
    }

    .mapp-filters .mapp-more-filters-body .jf-group:last-child {
        margin-bottom: 0;
        border-bottom: 0;
    }

    .mapp-filters .mapp-more-filters-body .jf-label,
    .mapp-filters .mapp-more-filters-body .jf-label > i {
        color: #17677b;
    }

    .mapp-filters .mapp-more-filters-body .jf-check,
    .mapp-filters .mapp-more-filters-body .jf-radio {
        border-radius: 10px;
    }

    .mapp-filters .mapp-more-filters-body .jf-check:hover,
    .mapp-filters .mapp-more-filters-body .jf-radio:hover {
        background: rgba(255, 255, 255, .68);
    }

    .mapp-filters .mapp-more-filters-body .jf-input {
        background: #fff;
    }
}

/* ZIP334 — desktop map sidebar notice and action consistency. */
@media (min-width: 901px) {
    /* Το notice είχε πλήρες component styling μόνο στο mobile breakpoint.
       Στο desktop διατηρεί το ίδιο ήρεμο disclosure card αντί για raw γραμμές κειμένου. */
    .mapp-list-notice {
        box-sizing: border-box;
        margin: 10px 24px 12px;
        overflow: hidden;
        color: #075985;
        background: #f5fbfd;
        border: 1px solid #cfe6ed;
        border-radius: 12px;
    }

    .mapp-list-notice > summary {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        min-height: 44px;
        padding: 9px 12px;
        font-size: 12.5px;
        font-weight: 600;
        line-height: 1.4;
        cursor: pointer;
        list-style: none;
    }

    .mapp-list-notice > summary::-webkit-details-marker { display: none; }

    .mapp-list-notice-summary {
        display: inline-flex;
        flex: 1 1 auto;
        gap: 9px;
        align-items: flex-start;
        min-width: 0;
    }

    .mapp-list-notice-summary > i {
        flex: 0 0 auto;
        margin-top: 2px;
        color: #16839e;
    }

    .mapp-list-notice-chevron {
        flex: 0 0 auto;
        font-size: 11px;
        transition: transform .18s ease;
    }

    .mapp-list-notice[open] .mapp-list-notice-chevron { transform: rotate(180deg); }

    .mapp-list-notice-details {
        padding: 2px 12px 10px;
        border-top: 1px solid #dcedf1;
    }

    .mapp-list-notice-detail {
        display: flex;
        gap: 8px;
        align-items: flex-start;
        margin: 8px 0 0;
        font-size: 12px;
        font-weight: 500;
        line-height: 1.45;
    }

    .mapp-list-notice-detail i {
        flex: 0 0 auto;
        margin-top: 2px;
    }

    .mapp-list-notice-detail--missing { color: #7c5b16; }
    .mapp-list-notice-detail--missing i { color: #d97706; }
    .mapp-list-notice-detail--remote { color: #075985; }
    .mapp-list-notice-detail--remote i { color: #0284c7; }

    /* Το main map action έχει την ίδια γεμάτη μπορντό παρουσία σε κάθε state. */
    .mapp-filters-btn {
        justify-content: center;
        min-width: 142px;
        color: #fff;
        background: var(--color-primary, #e91e63);
        border-color: var(--color-primary, #e91e63);
    }

    .mapp-filters-btn:hover,
    .mapp-filters-btn.has-active:hover {
        color: #fff;
        background: var(--color-primary-dark, #c2185b);
        border-color: var(--color-primary-dark, #c2185b);
    }

    /* Δευτερεύον αλλά σαφές action, χωρίς αλλαγή στο υπάρχον clear URL. */
    .mapp-chip-clear {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-height: 32px;
        padding: 0 12px;
        font-size: 12.5px;
        font-weight: 700;
        color: #087e9b;
        text-decoration: none;
        background: #edf8fb;
        border: 1px solid #9ed5e1;
        border-radius: 8px;
        transition: color .18s, background .18s, border-color .18s;
    }

    .mapp-chip-clear:hover {
        color: #fff;
        text-decoration: none;
        background: #087e9b;
        border-color: #087e9b;
    }
}

/* ZIP337 — overview-first facet accordions for the map mobile filter sheet. */
@media (max-width: 768px) {
    .mapp-filters .mapp-more-filters-frame.mapp-overview-accordions {
        display: grid;
        gap: 10px;
        margin: 4px 0 12px;
        padding: 0;
        overflow: visible;
        border: 0;
        border-radius: 0;
        background: transparent;
        box-shadow: none;
    }

    .mapp-filters .mapp-filter-accordion {
        overflow: hidden;
        border: 1px solid #dbe4ea;
        border-radius: 15px;
        background: #fff;
        box-shadow: 0 3px 12px rgba(15, 23, 42, .035);
    }

    .mapp-filters .mapp-filter-accordion > summary {
        display: flex;
        align-items: center;
        gap: 10px;
        min-height: 56px;
        padding: 10px 12px;
        cursor: pointer;
        list-style: none;
        user-select: none;
    }

    .mapp-filters .mapp-filter-accordion > summary::-webkit-details-marker {
        display: none;
    }

    .mapp-filters .mapp-filter-accordion > summary:focus-visible {
        outline: 3px solid rgba(8, 126, 155, .36);
        outline-offset: -3px;
    }

    .mapp-filters .mapp-filter-accordion-icon {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 30px;
        height: 30px;
        flex: 0 0 auto;
        border-radius: 9px;
        color: #c2185b;
        background: #fff1f6;
        font-size: 13px;
    }

    .mapp-filters .mapp-filter-accordion-icon--teal {
        color: #087e9b;
        background: #e8f5f8;
    }

    .mapp-filters .mapp-filter-accordion > summary > strong {
        min-width: 0;
        flex: 1 1 auto;
        color: #26354a;
        font-size: 14px;
        line-height: 1.25;
    }

    .mapp-filters .mapp-filter-accordion-count {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-width: 26px;
        height: 24px;
        padding: 0 7px;
        border-radius: 999px;
        color: #718096;
        background: #eef2f5;
        font-size: 11px;
        font-weight: 850;
        line-height: 1;
    }

    .mapp-filters .mapp-filter-accordion-count.has-active {
        color: #fff;
        background: #c2185b;
    }

    .mapp-filters .mapp-filter-accordion-chevron {
        flex: 0 0 auto;
        color: #718095;
        font-size: 12px;
        transition: transform .18s ease;
    }

    .mapp-filters .mapp-filter-accordion[open] .mapp-filter-accordion-chevron {
        transform: rotate(180deg);
    }

    .mapp-filters .mapp-filter-accordion[open] > summary {
        border-bottom: 1px solid #d8edf2;
        background: #f6fcfd;
    }

    .mapp-filters .mapp-filter-accordion-body {
        padding: 10px 12px 8px;
        background: #edf9fb;
    }

    .mapp-filters .mapp-filter-accordion-body .jf-group {
        margin: 0;
        padding: 0;
        border: 0;
    }

    .mapp-filters .mapp-filter-accordion-body .jf-group:not(.jf-radar-source) > .jf-label {
        display: none;
    }

    .mapp-filters .mapp-filter-accordion-body .jf-check,
    .mapp-filters .mapp-filter-accordion-body .jf-radio {
        min-height: 38px;
        padding: 4px 7px;
        border-radius: 9px;
    }

    .mapp-filters .mapp-filter-accordion-body .jf-check:hover,
    .mapp-filters .mapp-filter-accordion-body .jf-radio:hover {
        background: rgba(255, 255, 255, .74);
    }

    .mapp-filters .mapp-filter-accordion-body .jf-input {
        background: #fff;
    }
}

/* Τα mobile accordions γίνονται πλήρως ορατές groups στο desktop sidebar. */
@media (min-width: 769px) {
    .mapp-filters .mapp-overview-accordions {
        margin: 0;
        padding: 0;
        border: 0;
        background: transparent;
        box-shadow: none;
    }

    .mapp-filters .mapp-filter-accordion {
        border: 0;
    }

    .mapp-filters .mapp-filter-accordion > summary {
        display: none;
    }

    .mapp-filters .mapp-filter-accordion:not([open]) .mapp-filter-accordion-body {
        display: block;
    }

    .mapp-filters .mapp-filter-accordion-body {
        padding: 0;
        background: transparent;
    }
}

@media (prefers-reduced-motion: reduce) {
    .mapp-filters .mapp-filter-accordion-chevron {
        transition: none;
    }
}

/* ZIP337 — shared safe-width quick location cards for map filters. */
@media (min-width: 356px) and (max-width: 768px) {
    .mapp-filters .mapp-location-quick {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 9px;
    }

    .mapp-filters .mapp-location-quick-accordion > summary {
        min-height: 72px;
        padding: 10px;
    }

    .mapp-filters .mapp-location-quick-icon {
        width: 28px;
        height: 28px;
    }

    .mapp-filters .mapp-location-quick-copy strong {
        font-size: 12px;
    }

    .mapp-filters .mapp-location-quick-copy small {
        font-size: 10.5px;
    }
}

/* ZIP337 hotfix — τα closed map overview facets δεν καταλαμβάνουν body height στο mobile. */
@media (max-width: 768px) {
    .mapp-filters .mapp-filter-accordion:not([open]) > .mapp-filter-accordion-body {
        display: none;
    }
}

/* ZIP338 — shared neutral visual system for map filters. */
.mapp-filters {
    --mapp-filter-body: #f4f6f7;
    --mapp-filter-row: #eef1f3;
}

.mapp-filters .jf-label {
    gap: 9px;
    color: #2f3d50;
    font-size: .88rem;
}

.mapp-filters .jf-label > i {
    width: 18px;
    color: #9d174d;
    font-size: .96rem;
}

.mapp-filters .mapp-location-quick {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 9px;
}

.mapp-filters .mapp-location-quick-group {
    min-width: 0;
    padding: 0;
    border-color: #dfe5e9;
    background: #fff;
}

.mapp-filters .mapp-location-quick-accordion > summary {
    min-height: 68px;
    padding: 11px 12px;
}

.mapp-filters .mapp-location-quick-accordion[open] > summary {
    border-bottom: 1px solid #e5e9ec;
}

.mapp-filters .mapp-location-quick-icon,
.mapp-filters .mapp-location-quick-group--seasonal .mapp-location-quick-icon {
    color: #9d174d;
    background: #fff1f6;
}

.mapp-filters .mapp-location-quick-copy strong {
    color: #26354a;
    font-size: .86rem;
}

.mapp-filters .mapp-location-quick-copy small {
    color: #68778a;
    font-size: .73rem;
}

.mapp-filters .mapp-filter-accordion {
    border-color: #dfe5e9;
    background: #fff;
}

.mapp-filters .mapp-filter-accordion > summary,
.mapp-filters .mapp-filter-accordion[open] > summary {
    min-height: 58px;
    border-bottom: 0;
    background: #fff;
}

.mapp-filters .mapp-filter-accordion[open] > summary {
    border-bottom: 1px solid #e1e6e9;
}

.mapp-filters .mapp-filter-accordion-icon,
.mapp-filters .mapp-filter-accordion-icon--teal {
    color: #9d174d;
    background: #fff1f6;
}

.mapp-filters .mapp-filter-accordion > summary > strong {
    font-size: .94rem;
    font-weight: 850;
}

.mapp-filters .mapp-filter-accordion-body {
    padding: 10px 12px;
    background: var(--mapp-filter-body);
}

.mapp-filters .mapp-filter-accordion-body .jf-check,
.mapp-filters .mapp-filter-accordion-body .jf-radio {
    min-height: 39px;
    padding: 5px 8px;
    background: var(--mapp-filter-row);
}

.mapp-filters .mapp-filter-accordion-body .jf-check + .jf-check,
.mapp-filters .mapp-filter-accordion-body .jf-radio + .jf-radio {
    margin-top: 4px;
}

.mapp-filters .mapp-filter-accordion-body .jf-check:hover,
.mapp-filters .mapp-filter-accordion-body .jf-radio:hover {
    background: #e7ecef;
}

.mapp-filters .mapp-filter-accordion-body .jf-input {
    border-color: #d9e0e5;
    background: #fff;
}

@media (max-width: 768px) {
    .mapp-filters .mapp-location-quick.mapp-quick-picker-ready .mapp-location-tags {
        display: none;
    }
}

@media (max-width: 355px) {
    .mapp-filters .mapp-location-quick {
        grid-template-columns: 1fr;
    }
}

@media (min-width: 769px) {
    .mapp-filters .mapp-overview-accordions {
        display: grid;
        gap: 10px;
        margin: 4px 0 12px;
        padding: 0;
        border: 0;
        background: transparent;
        box-shadow: none;
    }

    .mapp-filters .mapp-filter-accordion {
        overflow: hidden;
        border: 1px solid #dfe5e9;
        border-radius: 15px;
        background: #fff;
        box-shadow: 0 3px 12px rgba(15, 23, 42, .035);
    }

    .mapp-filters .mapp-filter-accordion > summary {
        display: flex;
        align-items: center;
        gap: 10px;
        min-height: 58px;
        padding: 10px 12px;
        cursor: pointer;
        list-style: none;
    }

    .mapp-filters .mapp-filter-accordion > summary::-webkit-details-marker {
        display: none;
    }

    .mapp-filters .mapp-filter-accordion-icon,
    .mapp-filters .mapp-filter-accordion-count,
    .mapp-filters .mapp-filter-accordion-chevron {
        display: inline-flex;
    }

    .mapp-filters .mapp-filter-accordion-icon {
        align-items: center;
        justify-content: center;
    }

    .mapp-filters .mapp-filter-accordion:not([open]) > .mapp-filter-accordion-body {
        display: none;
    }

    .mapp-filters .mapp-filter-accordion-body {
        padding: 10px 12px;
        background: var(--mapp-filter-body);
    }

    .mapp-filters .mapp-filter-accordion-body .jf-group:not(.jf-radar-source) > .jf-label {
        display: none;
    }
}

/* ZIP339 — κοινή neutral overview εμφάνιση στα δύο controlled quick pickers. */
.mapp-filters .mapp-location-quick-group {
    border-color: #e1e8ed;
    background: #f5f8fa;
    box-shadow: none;
}

.mapp-filters .mapp-location-quick-accordion > summary {
    margin-bottom: 0;
}

.mapp-filters .mapp-location-quick-accordion[open] > summary {
    border-bottom-color: #e1e8ed;
}

.mapp-filters .mapp-location-quick-icon,
.mapp-filters .mapp-location-quick-group--seasonal .mapp-location-quick-icon {
    color: #087e9b;
    background: #e8f5f8;
}

.mapp-filters .mapp-location-quick-copy strong {
    color: #344256;
}

.mapp-filters .mapp-location-quick-copy small {
    color: #66758a;
}

.mapp-filters .mapp-location-quick-chevron {
    color: #718095;
}

/* ZIP339 — desktop επιστροφή στην προηγούμενη, πάντα ορατή sidebar μορφή.
   Η mobile map sheet, το smoky picker και το draft-until-apply flow παραμένουν ανεπηρέαστα. */
@media (min-width: 769px) {
    .mapp-filters .mapp-overview-accordions {
        display: block;
        margin: 0;
        padding: 0;
        border: 0;
        background: transparent;
        box-shadow: none;
    }

    .mapp-filters .mapp-filter-accordion {
        overflow: visible;
        border: 0;
        border-radius: 0;
        background: transparent;
        box-shadow: none;
    }

    .mapp-filters .mapp-filter-accordion > summary {
        display: none;
    }

    .mapp-filters .mapp-filter-accordion:not([open]) > .mapp-filter-accordion-body {
        display: block;
    }

    .mapp-filters .mapp-filter-accordion-body {
        padding: 0;
        background: transparent;
    }

    .mapp-filters .mapp-filter-accordion-body .jf-group:not(.jf-radar-source) > .jf-label {
        display: flex;
    }

    .mapp-filters .mapp-filter-accordion-body .jf-check,
    .mapp-filters .mapp-filter-accordion-body .jf-radio {
        min-height: 40px;
        padding: 4px 0;
        border-radius: 0;
        background: transparent;
    }

    .mapp-filters .mapp-filter-accordion-body .jf-check + .jf-check,
    .mapp-filters .mapp-filter-accordion-body .jf-radio + .jf-radio {
        margin-top: 0;
    }
}

/* ZIP340 — πλήρης desktop αποκατάσταση titles και facet controls.
   Τα headings είναι στατικά (όχι clickable accordion UI), με την απλή
   προηγούμενη presentation του map filter panel. */
@media (min-width: 769px) {
    .mapp-filters .mapp-filter-accordion > summary {
        display: flex;
        align-items: center;
        gap: 8px;
        min-height: 0;
        margin: 0 0 7px;
        padding: 0;
        border: 0;
        color: #2f3d50;
        background: transparent;
        cursor: default;
        list-style: none;
        pointer-events: none;
        user-select: text;
    }

    .mapp-filters .mapp-filter-accordion > summary::-webkit-details-marker {
        display: none;
    }

    .mapp-filters .mapp-filter-accordion-icon,
    .mapp-filters .mapp-filter-accordion-icon--teal {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 22px;
        height: 22px;
        flex: 0 0 auto;
        border-radius: 7px;
        color: #9d174d;
        background: #fff1f6;
        font-size: 11px;
    }

    .mapp-filters .mapp-filter-accordion > summary > strong {
        min-width: 0;
        flex: 1 1 auto;
        color: #2f3d50;
        font-size: .88rem;
        font-weight: 800;
        line-height: 1.25;
    }

    .mapp-filters .mapp-filter-accordion-count,
    .mapp-filters .mapp-filter-accordion-chevron {
        display: none;
    }

    .mapp-filters .mapp-filter-accordion-body .jf-group {
        margin: 0 0 14px;
    }

    .mapp-filters .mapp-filter-accordion-body .jf-check,
    .mapp-filters .mapp-filter-accordion-body .jf-radio {
        gap: 9px;
    }
}

/* Ο static desktop heading του summary είναι ο μοναδικός τίτλος μισθού.
   Το input και η επεξηγηματική σημείωση παραμένουν ορατά. */
@media (min-width: 769px) {
    .mapp-filters .mapp-filter-accordion-body .mapp-jf-group-salary > .jf-label {
        display: none;
    }
}

/* ZIP341 — compact desktop map filters. Μόνο το form body κυλά όταν είναι
   απολύτως αναγκαίο· η περιοχή ενεργειών παραμένει πάντα ορατή. */
@media (min-width: 769px) {
    .mapp-filters {
        display: flex;
        flex-direction: column;
        padding: 14px;
        overflow: hidden;
    }

    .mapp-filters > form {
        display: flex;
        min-height: 0;
        flex: 1 1 auto;
        flex-direction: column;
        overflow: hidden;
    }

    .mapp-filters .mapp-jf-sheet-body {
        min-height: 0;
        flex: 1 1 auto;
        overflow-y: auto;
        overscroll-behavior: contain;
        scrollbar-gutter: stable;
    }

    .mapp-filters > form > .mapp-jf-sheet-body > .jf-group {
        margin-bottom: 8px;
        padding-bottom: 8px;
    }

    .mapp-filters .jf-label {
        margin-bottom: 5px;
    }

    .mapp-filters .jf-select,
    .mapp-filters .jf-input {
        height: 38px;
    }

    .mapp-filters .mapp-location-help {
        margin: 4px 0 6px;
        font-size: .70rem;
        line-height: 1.3;
    }

    .mapp-filters .mapp-location-quick-accordion > summary {
        min-height: 58px;
        padding: 9px 10px;
    }

    .mapp-filters .mapp-filter-accordion > summary {
        gap: 6px;
        margin-bottom: 4px;
    }

    .mapp-filters .mapp-filter-accordion-icon,
    .mapp-filters .mapp-filter-accordion-icon--teal {
        width: 19px;
        height: 19px;
        border-radius: 6px;
        font-size: 10px;
    }

    .mapp-filters .mapp-filter-accordion-body .jf-group {
        margin-bottom: 8px;
    }

    .mapp-filters .mapp-filter-accordion-body .jf-check,
    .mapp-filters .mapp-filter-accordion-body .jf-radio {
        min-height: 29px;
        padding: 2px 0;
        gap: 8px;
        font-size: .81rem;
        line-height: 1.25;
    }

    .mapp-filters .jf-hint {
        margin-top: 4px;
        font-size: 10.5px;
        line-height: 1.3;
    }

    .mapp-filters .jf-actions {
        position: relative;
        z-index: 2;
        flex: 0 0 auto;
        margin: 0;
        padding: 9px 0 0;
        background: #fff;
        box-shadow: 0 -7px 12px rgba(15, 23, 42, .055);
    }

    .mapp-filters .jf-apply,
    .mapp-filters .jf-reset {
        min-height: 38px;
        height: 38px;
    }
}

/* ZIP342 — map desktop footer containment. Το form, όχι το body, είναι ο
   μοναδικός scroll owner. Έτσι δεν δημιουργείται κενό flex πριν από τις
   ενέργειες και το πλήρες κουμπί εφαρμογής μένει sticky μέσα στο viewport. */
@media (min-width: 769px) {
    .mapp-filters {
        box-sizing: border-box;
    }

    .mapp-filters > form {
        display: block;
        overflow-y: auto;
        overscroll-behavior: contain;
        scrollbar-gutter: stable;
    }

    .mapp-filters .mapp-jf-sheet-body {
        display: block;
        min-height: auto;
        overflow: visible;
    }

    .mapp-filters .jf-actions {
        position: sticky;
        bottom: 0;
        margin: 0;
        padding: 7px 0 0;
        background: #fff;
        box-shadow: 0 -7px 12px rgba(15, 23, 42, .055);
    }
}

/* ZIP342 corrective pass — content-first grid αντί για flex growth. Το action
   ακολουθεί το τελευταίο φίλτρο χωρίς κενό· το sticky bottom το κρατά ολόκληρο
   στο ορατό μέρος ακόμη και όταν το form ξεπερνά το διαθέσιμο ύψος. */
@media (min-width: 769px) {
    .mapp-filters > form {
        display: grid;
        grid-template-rows: min-content auto;
        align-content: start;
        min-height: 0;
        overflow-y: auto;
    }

    .mapp-filters .mapp-jf-sheet-body {
        min-height: 0;
        overflow: visible;
    }

    .mapp-filters .jf-actions {
        position: sticky;
        bottom: 0;
        margin: 0;
        padding: 7px 0 8px;
    }
}

/* ZIP342 final compactness — τα inner facet groups κληρονομούσαν το παλιό
   desktop padding/border του γενικού `.jf-group`. Η επαναφορά σε plain groups
   χρειάζεται μηδενικό wrapper spacing, αλλιώς συσσωρεύεται μεγάλο κενό πριν
   από την action area. */
@media (min-width: 769px) {
    .mapp-filters .mapp-filter-accordion-body .jf-group {
        margin-bottom: 5px;
        padding-bottom: 0;
        border-bottom: 0;
    }
}

/* ZIP342 final fit pass — διατηρούνται όλα τα controls, αλλά οι desktop-only
   διαστάσεις προσαρμόζονται στο fixed map panel ώστε το τελευταίο checkbox και
   το πλήρες action να χωρούν μαζί χωρίς sticky overlap ή κενό spacer. */
@media (min-width: 769px) {
    .mapp-filters {
        padding: 10px;
    }

    .mapp-filters > form > .mapp-jf-sheet-body > .jf-group {
        margin-bottom: 5px;
        padding-bottom: 5px;
    }

    .mapp-filters .jf-label {
        margin-bottom: 3px;
        font-size: .82rem;
    }

    .mapp-filters .jf-select,
    .mapp-filters .jf-input {
        height: 35px;
    }

    .mapp-filters .mapp-location-quick-accordion > summary {
        min-height: 50px;
        padding: 7px 8px;
    }

    .mapp-filters .mapp-filter-accordion > summary {
        margin-bottom: 2px;
    }

    .mapp-filters .mapp-filter-accordion-icon,
    .mapp-filters .mapp-filter-accordion-icon--teal {
        width: 17px;
        height: 17px;
        font-size: 9px;
    }

    .mapp-filters .mapp-filter-accordion-body .jf-group {
        margin-bottom: 2px;
    }

    .mapp-filters .mapp-filter-accordion-body .jf-check,
    .mapp-filters .mapp-filter-accordion-body .jf-radio {
        min-height: 25px;
        padding: 1px 0;
        font-size: .78rem;
    }

    .mapp-filters .jf-hint {
        margin-top: 3px;
        font-size: 9.5px;
        line-height: 1.2;
    }

    .mapp-filters .jf-actions {
        padding: 5px 0 6px;
    }

    .mapp-filters .jf-apply,
    .mapp-filters .jf-reset {
        min-height: 36px;
        height: 36px;
    }
}

/* ZIP342 viewport-fit refinement — αφαιρούνται μόνο τα τελευταία desktop-only
   λίγα pixels ώστε το action να μη χρειάζεται πλέον να επικαλύπτει το τέλος
   της λίστας και να ακολουθεί φυσικά τα τελευταία checkboxes. */
@media (min-width: 769px) {
    .mapp-filters {
        padding: 8px;
    }

    .mapp-filters > form > .mapp-jf-sheet-body > .jf-group {
        margin-bottom: 4px;
        padding-bottom: 4px;
    }

    .mapp-filters .jf-label {
        margin-bottom: 2px;
        font-size: .80rem;
    }

    .mapp-filters .jf-select,
    .mapp-filters .jf-input {
        height: 33px;
    }

    .mapp-filters .mapp-filter-accordion > summary {
        margin-bottom: 1px;
    }

    .mapp-filters .mapp-filter-accordion-icon,
    .mapp-filters .mapp-filter-accordion-icon--teal {
        width: 16px;
        height: 16px;
        font-size: 8px;
    }

    .mapp-filters .mapp-filter-accordion-body .jf-group {
        margin-bottom: 1px;
    }

    .mapp-filters .mapp-filter-accordion-body .jf-check,
    .mapp-filters .mapp-filter-accordion-body .jf-radio {
        min-height: 23px;
        font-size: .76rem;
    }

    .mapp-filters .jf-hint {
        margin-top: 2px;
        font-size: 9px;
        line-height: 1.15;
    }

    .mapp-filters .jf-actions {
        padding: 4px 0 5px;
    }
}

/* ZIP343 — balanced desktop map panel. Σε κανονικό desktop ύψος το panel
   προσαρμόζεται στο φυσικό ύψος του περιεχομένου αντί να καλύπτει όλο το
   viewport. Σε χαμηλό ύψος το form body γίνεται ο μόνος scroll owner και το
   πλήρες action παραμένει σταθερά διαθέσιμο. */
@media (min-width: 769px) {
    .mapp-filters {
        top: 12px;
        bottom: auto;
        height: fit-content;
        max-height: calc(100dvh - 24px);
        padding: 12px;
        overflow: hidden;
    }

    .mapp-filters > form {
        display: flex;
        flex: 0 1 auto;
        flex-direction: column;
        min-height: 0;
        max-height: calc(100dvh - 48px);
        overflow: hidden;
    }

    .mapp-filters .mapp-jf-sheet-body {
        display: block;
        min-height: 0;
        flex: 0 1 auto;
        overflow-y: auto;
        overscroll-behavior: contain;
        scrollbar-gutter: stable;
    }

    .mapp-filters > form > .mapp-jf-sheet-body > .jf-group {
        margin-bottom: 7px;
        padding-bottom: 6px;
    }

    .mapp-filters .jf-label {
        margin-bottom: 4px;
        font-size: .82rem;
    }

    .mapp-filters .jf-select,
    .mapp-filters .jf-input {
        height: 36px;
    }

    .mapp-filters .mapp-location-quick-accordion > summary {
        min-height: 52px;
        padding: 8px 9px;
    }

    .mapp-filters .mapp-filter-accordion > summary {
        margin-bottom: 3px;
    }

    .mapp-filters .mapp-filter-accordion-icon,
    .mapp-filters .mapp-filter-accordion-icon--teal {
        width: 18px;
        height: 18px;
        font-size: 9px;
    }

    .mapp-filters .mapp-filter-accordion-body .jf-group {
        margin-bottom: 4px;
    }

    .mapp-filters .mapp-filter-accordion-body .jf-check,
    .mapp-filters .mapp-filter-accordion-body .jf-radio {
        min-height: 27px;
        padding: 1px 0;
        font-size: .79rem;
    }

    .mapp-filters .jf-hint {
        margin-top: 4px;
        font-size: 9.5px;
        line-height: 1.25;
    }

    .mapp-filters .jf-actions {
        position: relative;
        bottom: auto;
        flex: 0 0 auto;
        padding: 7px 0 8px;
    }

    .mapp-filters .jf-apply,
    .mapp-filters .jf-reset {
        min-height: 38px;
        height: 38px;
    }
}

/* ZIP343 low-height fallback — το body πρέπει να μπορεί να συρρικνωθεί μέσα
   στο διαθέσιμο form height. Με flex-grow παίρνει τον φυσικό χώρο σε ψηλό
   viewport, ενώ σε χαμηλό ύψος αποκτά τη δική του ασφαλή κύλιση χωρίς να
   κρύβει τα τελευταία controls ή το action area. */
@media (min-width: 769px) {
    .mapp-filters .mapp-jf-sheet-body {
        flex: 1 1 auto;
    }
}

/* ZIP355 — mobile filter header color pass only.
   The panel header keeps its existing dimensions, spacing, sticky behavior and content;
   this final cascade changes only colors for unambiguous contrast while scrolling. */
@media (max-width: 768px) {
    .mapp-filters .jf-header {
        border-bottom-color: #555555;
        background: #6a6a6a;
        box-shadow: 0 3px 10px rgba(26, 26, 26, .24);
    }

    .mapp-filters .mapp-jf-header-icon {
        color: #ffffff;
        background: #c2185b;
    }

    .mapp-filters .jf-title {
        color: #ffffff;
    }

    .mapp-filters .mapp-jf-active-status {
        border-color: #d9dee2;
        color: #454545;
        background: #f4f6f7;
    }

    .mapp-filters .mapp-jf-active-status.has-active-filters {
        border-color: #f4c8d8;
        color: #9d174d;
        background: #fff1f6;
    }

    .mapp-filters .mapp-jf-header-help {
        color: #e8e8e8;
    }

    .mapp-filters .jf-close {
        color: #454545;
        background: #f4f6f7;
    }

    .mapp-filters .jf-close:hover,
    .mapp-filters .jf-close:focus-visible {
        color: #9d174d;
        background: #fff1f6;
    }
}


/* ZIP358 — desktop map filter header.
   Reuses the existing header markup only above 768px; the map panel body, form scroll owner,
   controls and action area retain their established desktop design and behavior. */
@media (min-width: 769px) {
    .mapp-filters > .jf-header {
        position: relative;
        z-index: 1;
        display: flex;
        flex: 0 0 auto;
        align-items: flex-start;
        justify-content: space-between;
        gap: 10px;
        margin: -12px -12px 9px;
        padding: 12px;
        border-bottom: 1px solid #555555;
        background: #6a6a6a;
        box-shadow: 0 3px 10px rgba(26, 26, 26, .24);
    }

    .mapp-filters .mapp-jf-header-copy {
        display: flex;
        min-width: 0;
        align-items: flex-start;
        gap: 10px;
        padding-right: 4px;
    }

    .mapp-filters .mapp-jf-header-icon {
        display: inline-flex;
        width: 30px;
        height: 30px;
        flex: 0 0 30px;
        align-items: center;
        justify-content: center;
        margin-top: 1px;
        border-radius: 9px;
        color: #ffffff;
        background: #c2185b;
        font-size: 12px;
    }

    .mapp-filters .mapp-jf-title-row {
        display: flex;
        min-width: 0;
        flex-wrap: wrap;
        align-items: center;
        gap: 5px 7px;
    }

    .mapp-filters .jf-title {
        margin: 0;
        color: #ffffff;
        font-size: 16px;
        font-weight: 700;
        line-height: 1.2;
        letter-spacing: -.01em;
    }

    .mapp-filters .mapp-jf-active-status {
        display: inline-flex;
        min-height: 20px;
        align-items: center;
        padding: 2px 7px;
        border: 1px solid #d9dee2;
        border-radius: 999px;
        color: #454545;
        background: #f4f6f7;
        font-size: 10px;
        font-weight: 800;
        line-height: 1.1;
        white-space: nowrap;
    }

    .mapp-filters .mapp-jf-active-status.has-active-filters {
        border-color: #f4c8d8;
        color: #9d174d;
        background: #fff1f6;
    }

    .mapp-filters .mapp-jf-header-help {
        display: block;
        max-width: 280px;
        margin: 4px 0 0;
        color: #e8e8e8;
        font-size: 10.5px;
        font-weight: 500;
        line-height: 1.3;
    }

    .mapp-filters .jf-close {
        display: inline-flex;
        width: 32px;
        height: 32px;
        flex: 0 0 32px;
        align-items: center;
        justify-content: center;
        padding: 0;
        border: 0;
        border-radius: 50%;
        color: #454545;
        background: #f4f6f7;
        font-size: 23px;
        line-height: 1;
        cursor: pointer;
        transition: background-color .16s ease, color .16s ease, transform .16s ease;
    }

    .mapp-filters .jf-close:hover,
    .mapp-filters .jf-close:focus-visible {
        color: #9d174d;
        background: #fff1f6;
        transform: rotate(4deg);
    }
}