/* SH Ecosystem Auth — neutral modal skin. Per-company re-skin is Step B (not implemented yet). */

.sh-ea-bar {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 14px;
    padding: 6px 16px;
    font-size: 12.5px;
    background: #f4f4f4;
    border-bottom: 1px solid #e6e6e6;
    max-height: 38px !important;
    /* Fallback: injected via wp_footer (τέλος του DOM) πριν προλάβει το JS να τη μετακινήσει
       μέσα στο <header> — μέχρι τότε πρέπει να φαίνεται σαν top bar. */
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 99999;
}

/* Μπήκε μέσα στο πραγματικό <header> (JS) -> κανονική ροή, όχι overlay. */
.sh-ea-bar.sh-ea-bar--in-header {
    position: static;
}

/* ═══ ΤΟ ΛΕΥΚΟ ΚΕΝΟ ΚΑΤΩ ΑΠΟ ΤΟ WP ADMIN BAR ═══
 *
 * ΤΟ ΣΥΜΠΤΩΜΑ: με ενεργό admin bar, ανάμεσα σε αυτό και τη λωρίδα έμενε μια λευκή ζώνη.
 *
 * Η ΑΙΤΙΑ ΕΙΝΑΙ ΔΙΠΛΟ OFFSET, ΟΧΙ ΔΙΚΟ ΜΑΣ CSS: ο WP βάζει ήδη μόνος του
 * `html { margin-top: 32px !important }` ώστε η ροή να ξεκινά κάτω από το fixed admin bar.
 * Το theme προσθέτει ΔΕΥΤΕΡΟ (`body.admin-bar header { margin-top: 32px }` —
 * css/header-navigation.css). Για fixed header αυτό θα ήταν σωστό (το html margin δεν
 * μετακινεί fixed στοιχεία)· το `.main-header` όμως είναι static, οπότε τα δύο margins
 * αθροίζονται και το δεύτερο μένει ορατό ως κενό.
 *
 * ΓΙΑΤΙ Η ΔΙΟΡΘΩΣΗ ΖΕΙ ΕΔΩ ΚΑΙ ΟΧΙ ΣΤΟ THEME: ο κανόνας του theme μπορεί να είναι σωστός
 * για headers σε contexts που δεν βλέπουμε από εδώ. Ακυρώνεται στοχευμένα ΜΟΝΟ για το
 * header που φιλοξενεί τη δική μας λωρίδα (το άδειο WL <header>), και μόνο όταν υπάρχει
 * admin bar — δηλαδή ποτέ για επισκέπτη ή πελάτη.
 *
 * ΔΥΟ ΞΕΧΩΡΙΣΤΟΙ ΚΑΝΟΝΕΣ, ΟΧΙ GROUP SELECTOR: αν ένας browser δεν ξέρει `:has()`, ένας
 * ενιαίος selector list θα θεωρούνταν άκυρος ΟΛΟΚΛΗΡΟΣ και θα έπεφτε μαζί και το class
 * fallback. Το `:has()` πιάνει από το πρώτο paint (χωρίς να περιμένει JS)· το class το
 * βάζει το JS τη στιγμή που μετακινεί τη λωρίδα και καλύπτει ό,τι δεν υποστηρίζει `:has()`.
 * Και τα δύο νικούν σε specificity τον κανόνα του theme, σε κάθε breakpoint (46px στο
 * mobile), οπότε δεν χρειάζεται δικό μας media query.
 */
body.admin-bar header:has(> .sh-ea-bar--in-header) {
    margin-top: 0 !important;
}

body.admin-bar header.sh-ea-bar-host {
    margin-top: 0 !important;
}

.sh-ea-bar-welcome {
    color: #333;
    font-weight: 600;
    margin-right: auto;
}

.sh-ea-bar-link {
    color: #333;
    text-decoration: none;
}

.sh-ea-bar-link:hover {
    text-decoration: underline;
}

.sh-ea-bar-login,
.sh-ea-bar-register,
.sh-ea-bar-logout {
    background: none;
    border: none;
    padding: 0;
    font: inherit;
    color: #333;
    cursor: pointer;
}

.sh-ea-bar-login:hover,
.sh-ea-bar-register:hover,
.sh-ea-bar-logout:hover {
    text-decoration: underline;
}

/* Logged-in profile menu (avatar + όνομα + dropdown) — λογική/εμφάνιση σαν του hub menu του
   sportshunter, αλλά τα χρώματα (bg/text/border) κληρονομούνται από το WL theme (menu_color
   κ.λπ. μέσω του inline <style> στο sh_ecosystem_auth.php)· τα παρακάτω είναι neutral fallback
   για μη-themed χώρους. */
/* Top-level CTA «Φόρμες Πελατών» (μόνο για owner/manager του χώρου).
   ΧΩΡΙΣ pill: τα WL themes στυλάρουν επιθετικά τα <a> του header (border/background/padding/
   font), οπότε ένα «κουμπί» έβγαινε διαφορετικό σε κάθε πελάτη — σε άλλον pill, σε άλλον όχι.
   Εδώ κρατάμε μόνο εικονίδιο + κείμενο, με ρητό μηδενισμό ό,τι μπορεί να βάλει το theme και
   !important στα properties που καθορίζουν το layout (display/gap/align), ώστε το ζευγάρι να
   ευθυγραμμίζεται πάντα κάθετα και να έχει πάντα την ίδια απόσταση. Το χρώμα το δίνει το
   menu_text_color inline rule (sh_ecosystem_auth.php). */
.sh-ea-bar-cta {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    margin: 0;
    padding: 0 !important;
    border: 0 !important;
    background: none !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    color: #333;
    font: inherit;
    font-weight: 600;
    line-height: 1 !important;
    white-space: nowrap;
    text-decoration: none !important;
}

.sh-ea-bar-cta:hover,
.sh-ea-bar-cta:focus {
    opacity: 0.75;
    text-decoration: none !important;
}

/* display:block: αλλιώς το svg κάθεται στο baseline του κειμένου και το εικονίδιο δείχνει
   μετατοπισμένο προς τα πάνω σε σχέση με το label. */
.sh-ea-bar-cta svg {
    display: block !important;
    flex: 0 0 auto;
    width: 18px;
    height: 18px;
}

@media (max-width: 420px) {
    .sh-ea-bar-cta {
        gap: 6px !important;
    }
    .sh-ea-bar-cta svg {
        width: 16px;
        height: 16px;
    }
}

.sh-ea-bar-menu {
    position: relative;
    display: inline-block;
}

.sh-ea-bar-profile-toggle {
    -webkit-appearance: none;
    appearance: none;
    background: none;
    border: none;
    box-shadow: none;
    padding: 4px 6px;
    margin: 0;
    font: inherit;
    color: #333;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 9px;
    line-height: 1;
    max-width: 62vw;
    border-radius: 999px;
}

.sh-ea-bar-profile-toggle:focus { outline: none; }

.sh-ea-avatar {
    flex: 0 0 auto;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: 700;
    line-height: 1;
    text-transform: uppercase;
    background: rgba(128, 128, 128, 0.35);
}

.sh-ea-profile-name {
    font-weight: 600;
    font-size: 13.5px;
    max-width: 160px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sh-ea-bar-caret {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    transition: transform 0.15s ease;
}

.sh-ea-bar-menu.is-open .sh-ea-bar-caret {
    transform: rotate(180deg);
}

.sh-ea-bar-dropdown {
    display: none;
    position: absolute;
    top: calc(100% + 8px);
    /* Δεξιά στοίχιση: το προφίλ κάθεται στη δεξιά άκρη της λωρίδας· με left:0 το μενού
       άνοιγε προς τα δεξιά και έβγαινε εκτός οθόνης (κυρίως στο κινητό). */
    right: 0;
    left: auto;
    min-width: 252px;
    max-width: calc(100vw - 16px);
    flex-direction: column;
    gap: 1px;
    color: #333;
    background: #fff;
    border: 1px solid rgba(0, 0, 0, 0.12);
    border-radius: 14px;
    box-shadow: 0 16px 42px rgba(0, 0, 0, 0.28);
    padding: 8px;
    z-index: 100001;
}

.sh-ea-bar-menu.is-open .sh-ea-bar-dropdown {
    display: flex;
}

/* Ίδιο row styling για <a> links και για το <button> Αποσύνδεση. */
.sh-ea-dd-item {
    -webkit-appearance: none;
    appearance: none;
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 11px 14px;
    border: none;
    border-radius: 10px;
    background: none;
    font-family: inherit;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.2;
    text-align: left;
    white-space: nowrap;
    text-decoration: none;
    color: inherit;
    cursor: pointer;
}

/* Hover overlay ουδέτερο ώστε να διαβάζεται πάνω σε ανοιχτό ή σκούρο WL bg. */
.sh-ea-dd-item:hover {
    background: rgba(128, 128, 128, 0.22);
    text-decoration: none;
}

.sh-ea-dd-item svg {
    flex: 0 0 auto;
    opacity: 0.85;
}

/* Αποσύνδεση: πάντα κόκκινο (υψηλότερη specificity από το themed color rule). */
.sh-ea-bar-dropdown .sh-ea-dd-logout,
.sh-ea-bar-dropdown .sh-ea-dd-logout:hover {
    color: #e23b3b !important;
}

.sh-ea-bar-dropdown .sh-ea-dd-logout svg { opacity: 1; }

.sh-ea-bar-divider {
    height: 1px;
    margin: 6px 8px;
    background: rgba(128, 128, 128, 0.28);
}

.sh-ea-overlay {
    position: fixed;
    inset: 0;
    z-index: 100000;
    background: rgba(15, 15, 20, 0.55);
    align-items: center;
    justify-content: center;
    padding: 16px;
}

.sh-ea-modal {
    position: relative;
    width: 100%;
    max-width: 380px;
    max-height: calc(100vh - 32px);
    overflow-y: auto;
    background: #fff;
    border-radius: 14px;
    /* Το padding μετακινήθηκε στο .sh-ea-body ώστε η μπάρα branding να πιάνει όλο το πλάτος. */
    padding: 0;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
    font-family: inherit;
}

/* Ίδια γλώσσα με τα email και την οθόνη του συνδέσμου σύνδεσης. */
.sh-ea-brand {
    background: linear-gradient(180deg, #0b0b0c, #17181a);
    border-bottom: 3px solid #ff4a1c;
    border-radius: 14px 14px 0 0;
    padding: 18px 20px 16px;
    text-align: center;
}

.sh-ea-brand img {
    height: 20px;
    width: auto;
    display: block;
    margin: 0 auto;
}

.sh-ea-body { padding: 20px 24px 18px; }

/* Λογότυπο πελάτη, ίδια μεταχείριση με το email και την οθόνη του συνδέσμου σύνδεσης. */
.sh-ea-company-logo {
    display: block;
    width: 64px;
    height: auto;
    margin: 2px auto 16px;
    /* Ίδιο περίγραμμα με τα πεδία της φόρμας: πολλά λογότυπα έχουν ανοιχτό ή διάφανο
       φόντο και χωρίς αυτό «λιώνουν» μέσα στη λευκή κάρτα. */
    border: 1px solid #ddd;
    border-radius: 12px;
}

.sh-ea-close {
    position: absolute;
    top: 12px;
    right: 14px;
    background: none;
    border: none;
    font-size: 24px;
    line-height: 1;
    cursor: pointer;
    color: #888;
}

/* Λευκό μόνο όταν υπάρχει η σκούρα μπάρα από πάνω. */
.sh-ea-brand ~ .sh-ea-close { color: rgba(255, 255, 255, .75); }
.sh-ea-brand ~ .sh-ea-close:hover { color: #fff; }

.sh-ea-tabs {
    display: flex;
    gap: 4px;
    margin-bottom: 18px;
    border-bottom: 1px solid #eee;
}

.sh-ea-tab {
    flex: 1;
    background: none;
    border: none;
    padding: 10px 2px;
    /* 13px + nowrap: το «Δημιουργία λογαριασμού» έσπαγε σε δύο γραμμές στα 14px και
       χάλαγε το ύψος της μπάρας tabs. Το ζεύγος χωρά άνετα στα 332px του body. */
    white-space: nowrap;
    font-size: 13px;
    font-weight: 600;
    color: #999;
    cursor: pointer;
    border-bottom: 2px solid transparent;
}

.sh-ea-tab.is-active {
    color: #111;
    border-bottom-color: #111;
}

.sh-ea-alert {
    background: #fdecea;
    color: #a5261d;
    border-radius: 8px;
    padding: 8px 12px;
    font-size: 13px;
    margin-bottom: 14px;
}

.sh-ea-alert.is-success {
    background: #e6f7ec;
    color: #1a7f4b;
}

.sh-ea-form {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.sh-ea-form label {
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: 13px;
    color: #444;
}

.sh-ea-form input[type="email"],
.sh-ea-form input[type="password"],
.sh-ea-form input[type="text"],
.sh-ea-form input[type="tel"] {
    padding: 10px 12px;
    border: 1px solid #ddd;
    border-radius: 8px;
    font-size: 14px;
}

.sh-ea-form .sh-ea-checkbox {
    flex-direction: row;
    align-items: center;
    gap: 8px;
    font-size: 12px;
}

.sh-ea-submit {
    margin-top: 4px;
    padding: 11px 16px;
    border: none;
    border-radius: 8px;
    background: #111;
    color: #fff;
    font-weight: 600;
    font-size: 14px;
    cursor: pointer;
}

.sh-ea-pin-intro {
    margin: 0 0 4px;
    font-size: 13px;
    color: #444;
}

.sh-ea-pin-resend {
    margin-top: 2px;
    padding: 8px 14px;
    background: #fff;
    border: 1px solid #ccc;
    border-radius: 8px;
    font-size: 12.5px;
    font-weight: 500;
    color: #444;
    cursor: pointer;
    align-self: center;
}

.sh-ea-pin-resend:hover {
    background: #f4f4f4;
    border-color: #aaa;
}

.sh-ea-pin-resend:disabled {
    opacity: 0.6;
    cursor: default;
}

.sh-ea-submit:disabled {
    opacity: 0.6;
    cursor: default;
}

.sh-ea-footer {
    margin-top: 18px;
    text-align: center;
}

.sh-ea-footer a {
    font-size: 11px;
    color: #aaa;
    text-decoration: none;
}

.sh-ea-footer a:hover {
    text-decoration: underline;
}

/* Απλός σύνδεσμος (π.χ. «Επιστροφή στη σύνδεση»). */
.sh-ea-link {
    margin-top: 10px;
    padding: 0;
    border: 0;
    background: none;
    color: #0284c7;
    font-size: 13px;
    text-decoration: underline;
    cursor: pointer;
}

.sh-ea-link:hover { color: #0369a1; }

/**
 * «Σύνδεση χωρίς κωδικό»: ίδιο σχήμα με το κύριο κουμπί αλλά ανεστραμμένο (περίγραμμα, χωρίς
 * γέμισμα). Είναι πραγματική εναλλακτική σύνδεσης, όχι υποσημείωση — αλλά δεύτερη επιλογή,
 * γι' αυτό δεν διεκδικεί το βάρος του γεμάτου κουμπιού.
 */
.sh-ea-link--outline {
    margin-top: 10px;
    padding: 11px 16px;
    border: 1.5px solid #111;
    border-radius: 8px;
    background: transparent;
    color: #111;
    font-weight: 600;
    font-size: 14px;
    text-decoration: none;
}

.sh-ea-link--outline:hover {
    background: #111;
    color: #fff;
}

.sh-ea-magic-intro {
    margin: 0 0 4px;
    color: #475569;
    font-size: 13px;
    line-height: 1.55;
}

/* ─── Λεκτικό εγγραφής σε χώρο με online κρατήσεις ────────────────────────────
   Μπαίνει πρώτο μέσα στη φόρμα Εγγραφής (μόνο όταν ο χώρος έχει booking) και
   εξηγεί ότι η ΙΔΙΑ εγγραφή δημιουργεί και πελάτη στο σύστημα κρατήσεων του
   χώρου. Ουδέτερο γκρι πλαίσιο: πληροφορία, όχι σφάλμα και όχι επιτυχία (τα
   χρώματα αυτά ανήκουν στο .sh-ea-alert). */
.sh-ea-venue-note {
    margin: 0 0 14px;
    padding: 10px 12px;
    background: #f6f7f8;
    border: 1px solid #e3e5e8;
    border-left: 3px solid #000;
    border-radius: 8px;
    font-size: 12px;
    line-height: 1.55;
    color: #444;
}

/* ─── Κατέβασμα εφαρμογής, πάνω από το «Powered by SportsHunter» ──────────────
   Ίδια badges με το theme. max-width ανά badge (και όχι flex:1) ώστε σε πλατύ
   modal να μη «τεντώνονται» σε δύο τεράστιες εικόνες. */
.sh-ea-app {
    margin-top: 18px;
    padding-top: 14px;
    border-top: 1px solid #eee;
}

/* Light hint πάνω από τα icons: δεύτερης τάξης πληροφορία, οπότε πιο μικρό και πιο
   ξεθωριασμένο από το hint της φόρμας — δεν ανταγωνίζεται το κουμπί εγγραφής. */
.sh-ea-app-note {
    margin: 0 0 10px;
    font-size: 11px;
    line-height: 1.55;
    color: #8a8f96;
    text-align: center;
}

.sh-ea-stores {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    flex-wrap: wrap;
}

.sh-ea-store {
    display: inline-flex;
    max-width: 132px;
    flex: 0 1 132px;
}

.sh-ea-store img {
    width: 100%;
    height: auto;
    display: block;
}

/* Το «Powered by» ακολουθεί αμέσως τα badges — χωρίς δεύτερο κενό από πάνω. */
.sh-ea-app + .sh-ea-footer { margin-top: 10px; }

/* ─── Όροι χρήσης: checkbox + σύνδεσμος σε νέα καρτέλα ───────────────────────
   Ο σύνδεσμος είναι ΕΞΩ από το <label> (βλ. σχόλιο στο js), οπότε η γραμμή
   στοιχίζεται εδώ, στον κοινό γονιό. */
.sh-ea-terms {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px;
    font-size: 12px;
}

.sh-ea-form .sh-ea-terms .sh-ea-checkbox { margin: 0; }

.sh-ea-terms-link {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    color: #0284c7;
    font-size: 12px;
    text-decoration: underline;
}

.sh-ea-terms-link:hover { color: #026a9c; }

/* Το βελάκι «ανοίγει έξω»: ελαφρώς ψηλότερα από τη βασική γραμμή, όπως στα inline
   icons του hub, ώστε να μη «κάθεται» στο underline. */
.sh-ea-ext-icon {
    flex: 0 0 auto;
    position: relative;
    top: -1px;
}

/* Τα placeholders είναι βοήθεια, όχι περιεχόμενο: πιο ανοιχτά από το κείμενο που
   γράφει ο χρήστης, ώστε να μη μοιάζουν με ήδη συμπληρωμένη τιμή. */
.sh-ea-form input::placeholder {
    color: #b0b4ba;
    opacity: 1;
}

/* ─── Κινητό: το modal γίνεται ολόκληρη οθόνη ────────────────────────────────
   Σε τηλέφωνο η «κάρτα» δεν προσφέρει τίποτα: η φόρμα εγγραφής έχει 5 πεδία +
   δύο hints + badges, οπότε γέμιζε ούτως ή άλλως το ύψος και σκρόλαρε μέσα σε
   ένα κουτί που έδειχνε 16px γκρι φόντο γύρω-γύρω. Full screen, χωρίς radius
   και χωρίς σκιά — και το πληκτρολόγιο του κινητού δεν «κόβει» πια την κάρτα.
   Το `align-items: stretch` (αντί για center) είναι που κάνει τη δουλειά: το
   overlay είναι ήδη fixed/inset:0, άρα το παιδί του παίρνει όλο το viewport. */
@media (max-width: 640px) {
    .sh-ea-overlay {
        padding: 0;
        align-items: stretch;
        justify-content: stretch;
    }

    .sh-ea-modal {
        width: 100%;
        max-width: none;
        max-height: none;
        min-height: 100%;
        border-radius: 0;
        box-shadow: none;
    }

    /* Η μπάρα branding κρατούσε τη δική της στρογγυλή γωνία πάνω-πάνω. */
    .sh-ea-brand {
        border-radius: 0;
        padding-top: calc(18px + env(safe-area-inset-top, 0px));
    }

    .sh-ea-close { top: calc(12px + env(safe-area-inset-top, 0px)); }

    /* Home indicator του iPhone: χωρίς αυτό το «Powered by» κάθεται από κάτω του. */
    .sh-ea-body { padding-bottom: calc(18px + env(safe-area-inset-bottom, 0px)); }
}

/* ─── iOS: μηδέν auto-zoom στο focus των πεδίων ──────────────────────────────
   Το Safari του iPhone κάνει zoom στη σελίδα μόλις εστιάσεις σε πεδίο με
   font-size < 16px (και μετά το κλείσιμο του modal η σελίδα μένει «ζουμαρισμένη»
   μέχρι να την πειράξει ο χρήστης). Δεν φταίει το modal: είναι κανόνας του
   WebKit. Το viewport meta ΔΕΝ πρέπει να πειραχτεί (user-scalable=no χαλάει την
   προσβασιμότητα), άρα η μόνη σωστή λύση είναι 16px στα ίδια τα πεδία — μόνο σε
   συσκευές αφής, ώστε στο desktop να μείνει το πιο συμπαγές 14px. */
@media (pointer: coarse) {
    .sh-ea-form input[type],
    .sh-ea-form input,
    .sh-ea-form select,
    .sh-ea-form textarea,
    .sh-ea-modal input[type],
    .sh-ea-modal input,
    .sh-ea-modal select,
    .sh-ea-modal textarea {
        font-size: 16px;
    }
}

/* ─── Ροή «Έχεις ήδη λογαριασμό» ─────────────────────────────────────────────
 *
 * Οι δύο νέες οθόνες (πληροφορία, αποτέλεσμα) είναι <div> με class .sh-ea-form, ώστε να
 * τις κρύβει αυτόματα ο υπάρχων κώδικας εναλλαγής — άρα κληρονομούν το flex column και
 * το gap και δεν χρειάζονται δικό τους layout.
 *
 * ΧΡΩΜΑΤΑ: ουδέτερα, ίδια γκάμα με το .sh-ea-venue-note. Το «έχεις ήδη λογαριασμό» ΔΕΝ
 * είναι σφάλμα και δεν επιτρέπεται να δείχνει κόκκινο· ούτε επιτυχία, για να μη μπερδεύεται
 * με το πράσινο του .sh-ea-alert.is-success που εμφανίζεται ακριβώς από πάνω.
 */
.sh-ea-panel-title {
    margin: 0;
    font-size: 17px;
    line-height: 1.3;
    font-weight: 700;
    color: #111;
}

.sh-ea-panel-why {
    margin: 0;
    padding: 10px 12px;
    background: #f6f7f8;
    border: 1px solid #e3e5e8;
    border-left: 3px solid #000;
    border-radius: 8px;
    font-size: 12px;
    line-height: 1.55;
    color: #444;
}

.sh-ea-panel-hint,
.sh-ea-panel-msg {
    margin: 0;
    font-size: 13px;
    line-height: 1.55;
    color: #444;
}

/* Οι δύο δευτερεύουσες έξοδοι σε μία γραμμή: δεν είναι κουμπιά, είναι εναλλακτικές. */
.sh-ea-panel-links {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 6px 16px;
    margin-top: 2px;
}

.sh-ea-panel-links .sh-ea-link {
    padding: 0;
    background: none;
    border: none;
    font-size: 12.5px;
    color: #555;
    text-decoration: underline;
    cursor: pointer;
}

.sh-ea-panel-links .sh-ea-link:hover {
    color: #111;
}

/* Τι ακριβώς κέρδισε ο χρήστης. Τα ✓ μπαίνουν από το CSS: είναι διακόσμηση, δεν πρέπει
   να ταξιδεύουν μέσα στα μεταφράσιμα κείμενα.
 *
 * ΓΙΑΤΙ !important ΚΑΙ ΓΙΑΤΙ ΣΚΟΥΡΟ ΚΕΙΜΕΝΟ:
 * Το <li> είναι ο ΜΟΝΟΣ τύπος στοιχείου εδώ μέσα που δεν υπήρχε ήδη στο modal — και είναι
 * ακριβώς αυτός που κάθε θέμα βάφει καθολικά (μενού, footer, widgets: όλα λίστες). Σε
 * σκουρόχρωμο WL site ένα `li { color:#fff }` του ξενιστή κάνει το κείμενο αόρατο πάνω
 * στην άσπρη κάρτα του modal. Δεν ξέρουμε τι CSS τρέχει σε κάθε domain πελάτη, οπότε αυτά
 * τα δύο δηλώνονται ρητά αντί να ελπίζουμε στη σειρά φόρτωσης.
 *
 * Το κείμενο έγινε ΣΚΟΥΡΟ (όχι πράσινο): το πράσινο μένει μόνο στο ✓, που είναι το σήμα
 * επιτυχίας. Πράσινο κείμενο πάνω σε λευκό διαβάζεται χειρότερα και δεν ταιριάζει με το
 * υπόλοιπο modal, όπου κάθε πρόταση είναι #444. */
.sh-ea-modal .sh-ea-panel-list {
    margin: 2px 0 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.sh-ea-modal .sh-ea-panel-list li {
    position: relative;
    padding-left: 26px;
    font-size: 13.5px;
    line-height: 1.5;
    color: #333 !important;
    list-style: none;
    text-align: left;
}

.sh-ea-modal .sh-ea-panel-list li::before {
    content: "✓";
    position: absolute;
    left: 4px;
    top: 0;
    font-weight: 700;
    color: #1a7f4b !important;
}

.sh-ea-panel-cta {
    display: block;
    text-align: center;
    text-decoration: none;
}

/* Η οθόνη του αποτελέσματος είναι επιβεβαίωση, όχι φόρμα: τίτλος και μήνυμα
   κεντραρισμένα (όπως το λογότυπο από πάνω και το footer από κάτω), η λίστα όμως μένει
   αριστερά — κεντραρισμένες κουκκίδες δεν διαβάζονται. */
.sh-ea-form[data-form="member-result"] .sh-ea-panel-title,
.sh-ea-form[data-form="member-result"] .sh-ea-panel-msg {
    text-align: center;
}

.sh-ea-form[data-form="member-result"] .sh-ea-panel-list {
    margin: 6px auto 0;
}

/* Ίδια όψη με το .sh-ea-pin-resend — ξεχωριστή class επίτηδες, γιατί το resend της
   εγγραφής έχει δικό του (άλλο) handler και δεν πρέπει να πιάνει αυτό το κουμπί. */
.sh-ea-member-pin-resend {
    margin-top: 2px;
    padding: 8px 14px;
    background: #fff;
    border: 1px solid #ccc;
    border-radius: 8px;
    font-size: 12.5px;
    font-weight: 500;
    color: #444;
    cursor: pointer;
    align-self: center;
}

.sh-ea-member-pin-resend:hover {
    background: #f4f4f4;
    border-color: #aaa;
}

.sh-ea-member-pin-resend:disabled {
    opacity: 0.6;
    cursor: default;
}

/* ═══ Modal επιλογών «Κράτηση online» (theme: templates/partial/booking_nav_buttons.php) ═══
 *
 * Κάρτα ΠΑΝΤΑ λευκή με σκούρο κείμενο: οι επεξηγήσεις πρέπει να διαβάζονται σε κάθε χώρο.
 * Το χρώμα του πελάτη (action_color / action_text_color) μπαίνει ως CSS μεταβλητές από το
 * partial και βάφει μόνο τα κουμπιά επιλογών.
 *
 * z-index ΚΑΤΩ από το modal σύνδεσης (99999): αν για οποιονδήποτε λόγο μείνει ανοιχτό, η
 * σύνδεση βγαίνει από πάνω του.
 *
 * !important σε χρώμα/μέγεθος/διάταξη: το theme τυπώνει inline WL styles με !important σε
 * links (menu_text_color κ.λπ.) και βάζει γενικά font-size στα `a`. */
.sh-bkc-overlay {
    position: fixed;
    inset: 0;
    z-index: 99990;
    align-items: center;
    justify-content: center;
    padding: 16px;
    box-sizing: border-box;
    background: rgba(17, 24, 39, .55);
}

.sh-bkc-modal {
    position: relative;
    width: 100%;
    max-width: 440px;
    max-height: calc(100vh - 32px);
    overflow-y: auto;
    box-sizing: border-box;
    padding: 28px 22px 22px;
    border-radius: 18px;
    background: #fff !important;
    color: #111827 !important;
    text-align: left;
    box-shadow: 0 20px 50px rgba(0, 0, 0, .25);
    font-size: 15px;
    line-height: 1.4;
}

.sh-bkc-close {
    position: absolute;
    top: 8px;
    right: 10px;
    width: 36px;
    height: 36px;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    color: #6b7280 !important;
    font-size: 26px !important;
    line-height: 36px !important;
    cursor: pointer;
}
.sh-bkc-close:hover { color: #111827 !important; }

.sh-bkc-title {
    margin: 0 36px 18px 2px;
    color: #111827 !important;
    font-size: 20px !important;
    font-weight: 700;
    line-height: 1.25 !important;
}

.sh-bkc-options {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.sh-bkc-overlay a.sh-bkc-option {
    display: flex !important;
    align-items: flex-start;
    gap: 14px;
    margin: 0 !important;
    padding: 14px 16px !important;
    border: 1.5px solid #e5e7eb !important;
    border-radius: 14px !important;
    background: #f9fafb !important;
    color: #111827 !important;
    text-align: left !important;
    text-decoration: none !important;
    white-space: normal !important;
    float: none !important;
    width: auto !important;
    height: auto !important;
    transition: border-color .15s, background-color .15s, box-shadow .15s;
}
/* Καμία επιλογή δεν ξεχωρίζει: και οι τρεις ισότιμες. Περίγραμμα + ελαφριά απόχρωση στο
   χρώμα του πελάτη ΜΟΝΟ σε hover (συσκευές με ποντίκι — στο touch το :hover «κολλάει» μετά
   το πάτημα) και σε πλοήγηση με πληκτρολόγιο (:focus-visible).
   color-mix: σε browser χωρίς υποστήριξη μένει το ουδέτερο φόντο της προηγούμενης γραμμής. */
.sh-bkc-overlay a.sh-bkc-option:focus-visible {
    border-color: var(--sh-bkc-accent, #111827) !important;
    background: #f9fafb !important;
    background: color-mix(in srgb, var(--sh-bkc-accent, #111827) 8%, #fff) !important;
    outline: none;
}
@media (hover: hover) {
    .sh-bkc-overlay a.sh-bkc-option:hover {
        border-color: var(--sh-bkc-accent, #111827) !important;
        background: #f9fafb !important;
        background: color-mix(in srgb, var(--sh-bkc-accent, #111827) 8%, #fff) !important;
        box-shadow: 0 4px 14px rgba(0, 0, 0, .08);
    }
}

.sh-bkc-overlay .sh-bkc-option-icon {
    flex: 0 0 auto;
    display: inline-flex;
    margin-top: 1px;
    /* Ίδιο χρώμα με τον τίτλο, ΟΧΙ το χρώμα του χώρου: χώρος με λευκό action_color
       (π.χ. PushPull) έβγαζε λευκά εικονίδια πάνω στη λευκή κάρτα, δηλαδή αόρατα. */
    color: #111827 !important;
}
.sh-bkc-overlay .sh-bkc-option-text {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.sh-bkc-overlay .sh-bkc-option-title {
    color: #111827 !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    line-height: 1.3 !important;
}
.sh-bkc-overlay .sh-bkc-option-desc {
    color: #4b5563 !important;
    font-size: 13px !important;
    font-weight: 400 !important;
    line-height: 1.45 !important;
}

/* ─── Μαμά εταιρεία: βήμα «Επίλεξε χώρο» ──────────────────────────────────────
   Ίδιες κάρτες με τις επιλογές· το βήμα 2 έχει «‹ Αλλαγή χώρου» και το όνομα του χώρου.
   Το ίδιο μοτίβο χρησιμοποιεί και η επιλογή χώρου πριν από εγγραφή/σύνδεση (.sh-ea-venue-pick). */
.sh-bkc-overlay .sh-bkc-step-desc {
    color: #111827 !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    margin: 0 0 2px !important;
}
.sh-bkc-overlay .sh-bkc-back {
    align-self: flex-start;
    background: none !important;
    border: 0 !important;
    padding: 0 !important;
    color: #4b5563 !important;
    font-size: 14px !important;
    cursor: pointer;
}
.sh-bkc-overlay .sh-bkc-back:hover { color: #111827 !important; }

/* ─── Email-first πόρτα ───────────────────────────────────────────────────────
   Ένα πεδίο email + «Συνέχεια». Το πράσινο δηλώνει «αυτό το email είναι ελεύθερο
   για νέο λογαριασμό» — επιτυχία ελέγχου, ίδια γκάμα με το .sh-ea-alert.is-success. */
.sh-ea-identify-sub {
    margin: 0;
    font-size: 13px;
    line-height: 1.55;
    color: #444;
}

.sh-ea-form input.is-available {
    border-color: #1a7f4b;
    background: #f3fbf6;
    box-shadow: 0 0 0 3px rgba(26, 127, 75, .12);
}

.sh-ea-email-status {
    margin: -6px 0 0;
    font-size: 12.5px;
    line-height: 1.5;
    color: #1a7f4b;
}

/* ─── Οθόνη «Συνδέθηκες με {χώρο}» ────────────────────────────────────────────
   Πράσινο τσεκ πάνω από τον τίτλο: ο χρήστης καταλαβαίνει με μια ματιά ότι πέτυχε,
   χωρίς δεύτερη πρόταση που επαναλαμβάνει τον τίτλο. */
.sh-ea-panel.is-success .sh-ea-panel-title {
    text-align: center;
}

.sh-ea-panel.is-success .sh-ea-panel-title::before {
    content: "";
    display: block;
    width: 48px;
    height: 48px;
    margin: 0 auto 10px;
    border-radius: 50%;
    background: #e6f7ec url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231a7f4b' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / 24px no-repeat;
}

/* Quick actions: κράτηση (κύριο) και αξιολόγηση (δευτερεύον). Μόνο όσα υπάρχουν στη σελίδα. */
.sh-ea-panel-actions {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.sh-ea-panel-actions:empty {
    display: none;
}

/* Με quick actions από πάνω, το «Κλείσιμο» υποχωρεί σε δευτερεύον κουμπί. */
.sh-ea-modal .sh-ea-panel-done.is-secondary {
    background: #fff;
    color: #111;
    border: 1px solid #ccc;
}


/* ═══ Μετάφραση (GR/EN) στη λωρίδα — ίδια λογική με το booking strip ═══
   Χρώμα από το menu_text_color μέσω currentColor (κληρονομεί από .sh-ea-bar). */
.sh-ea-lang {
    position: relative;
    display: inline-flex;
    align-items: center;
    /* Πάνω αριστερά: πρώτο παιδί της λωρίδας, σπρώχνει τα υπόλοιπα δεξιά. */
    margin-right: auto;
}

.sh-ea-lang__btn {
    display: inline-flex !important;
    align-items: center !important;
    gap: 5px !important;
    margin: 0;
    padding: 0 !important;
    border: 0 !important;
    background: none !important;
    box-shadow: none !important;
    color: inherit !important;
    font: inherit;
    font-weight: 700;
    line-height: 1 !important;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
}

.sh-ea-lang__btn:hover { opacity: 0.75; }
.sh-ea-lang__btn svg { display: block; flex: 0 0 auto; }

.sh-ea-lang__menu {
    display: none;
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    z-index: 100000;
    min-width: 96px;
    padding: 4px;
    background: #fff;
    border: 1px solid #e6e6e6;
    border-radius: 10px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
}

.sh-ea-lang.is-open .sh-ea-lang__menu { display: block; }

.sh-ea-lang__menu button {
    display: flex;
    align-items: center;
    gap: 6px;
    width: 100%;
    margin: 0;
    padding: 8px 10px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: #222 !important;
    font: inherit;
    font-size: 13px;
    font-weight: 600;
    text-align: left;
    cursor: pointer;
}

.sh-ea-lang__menu button:hover,
.sh-ea-lang__menu button.is-active { background: #f2f2f2; }

/* «Βρήκαμε τον λογαριασμό σου» — ήδη μέλος του χώρου: το ίδιο πλαίσιο, πράσινο. */
.sh-ea-panel-why.is-member {
    background: #ecfdf3;
    border-color: #bbf7d0;
    border-left-color: #16a34a;
    color: #166534;
}