/* SH Booking Panel — booking-v2.css
 * ═══════════════════════════════════════════════════════════════════════════
 * ΤΟ ΖΗΤΟΥΜΕΝΟ: το panel κρατήσεων να διαβάζεται σαν την Περιοχή Μέλους.
 *
 * ΙΔΙΑ ΓΕΩΜΕΤΡΙΑ, ΔΙΚΑ ΤΟΥΣ ΧΡΩΜΑΤΑ.
 * Παίρνουμε από το member area: ακτίνες, αποστάσεις, τυπογραφία, γλώσσα καρτών,
 * σχήμα κουμπιών, συμπεριφορά κινητού, πλήρες πλάτος.
 * Αφήνουμε στον χώρο: τους οκτώ ρόλους χρώματος του Appearance theme του — είναι
 * πουλημένο feature, και σε whitelabel domain ΕΙΝΑΙ η ταυτότητά του.
 * Τα δένει το `booking-v2.js`: διαβάζει τα πραγματικά χρώματα από το DOM και τα
 * γράφει στα tokens από κάτω.
 *
 * ΟΛΑ κάτω από `body.sh-bp-v2`. Χωρίς την κλάση, μηδέν αλλαγή.
 * ═══════════════════════════════════════════════════════════════════════════ */

body.sh-bp-v2 .booknetic_appointment {
	/* Οι προεπιλογές είναι ΑΚΡΙΒΩΣ οι default του Booknetic (Theme.php:41-53):
	 * αν το JS λείψει ή αποτύχει, η οθόνη δείχνει ό,τι θα έδειχνε έτσι κι αλλιώς. */
	--shbp-panel:        #292d32;
	--shbp-primary:      #6c70dc;
	--shbp-primary-soft: rgba(108, 112, 220, .10);
	--shbp-on-primary:   #ffffff;
	--shbp-active:       #4fbf65;
	--shbp-done:         #ffffff;
	--shbp-step:         #626c76;
	--shbp-title:        #292d32;
	--shbp-price:        #53d56c;
	--shbp-border:       #53d56c;

	/* Η γεωμετρία — ίδια νούμερα με το panel-v2.css της Περιοχής Μέλους. */
	--shbp-page:    #eef1f6;
	--shbp-surface: #ffffff;
	--shbp-sunken:  #f5f7fa;
	--shbp-ink:     #292d32;
	--shbp-soft:    #6b7480;
	--shbp-line:    #e3eaf3;
	--shbp-radius:  14px;
	--shbp-gutter:  20px;
	--shbp-measure: 1080px;   /* στήλη ανάγνωσης μέσα στο βήμα */
	--shbp-above:   0px;      /* ό,τι κάθεται πάνω από το panel (μετριέται με JS) */
}

/* ═══ Η ΣΕΛΙΔΑ, ΟΧΙ ΜΟΝΟ ΤΟ PANEL ═══
 *
 * Το πρώτο πέρασμα άλλαξε μόνο τα εσωτερικά του panel — και σωστά παρατηρήθηκε
 * ότι «δεν είναι full page, είναι απλά full width και έχει τα backgrounds».
 * Ίσχυε: το κουτί μεγάλωσε, αλλά γύρω του έμενε η σελίδα-αφίσα: φωτογραφία
 * φόντου, κεντραρισμένος τίτλος, και το panel να επιπλέει σαν κάρτα.
 *
 * Η Περιοχή Μέλους έγινε full page με ΤΡΕΙΣ κινήσεις, όχι με μία. Οι ίδιες
 * ακριβώς εδώ — η φωτογραφία δεν προσφέρει τίποτα σε οθόνη όπου ο χρήστης
 * διαλέγει ώρα, και κάνει κάθε λευκή επιφάνεια να μοιάζει «κολλημένη» από πάνω. */

/* 1. Επίπεδος καμβάς. */
body.sh-bp-v2 #site-canvas,
body.sh-bp-v2 #site-canvas.tenant_bg,
body.sh-bp-v2 #site-canvas.booking_bg {
	background: var(--shbp-page, #eef1f6) !important;
	background-image: none !important;
	padding-bottom: 0 !important;
	/* ΤΟ ΓΚΡΙ ΛΟΥΡΑΚΙ ΣΤΟΝ ΠΑΤΟ — ΜΕΤΡΗΜΕΝΟ, 56px, ΚΑΘΕ ΦΟΡΑ.
	 *
	 * Το theme γράφει `.tenant_bg { height: auto!important; height: 100%!important }`
	 * (header-booking.php:284 — δύο φορές την ίδια ιδιότητα, κερδίζει η δεύτερη).
	 * Με `html,body { height:100% }` αυτό σημαίνει «ακριβώς μία οθόνη» — ενώ το
	 * περιεχόμενο μέσα του χρειάζεται μία οθόνη ΜΕΙΟΝ τη μαύρη μπάρα, που κάθεται
	 * απ' έξω. Η διαφορά έβγαινε ως κενό γκρι στον πάτο, πάντα ίση με τη μπάρα.
	 *
	 * Σε μεγάλη λίστα το ίδιο `height: 100%` έκανε και το αντίστροφο: ο καμβάς
	 * έμενε 755px με 6783 περιεχόμενο να ξεχειλίζει. `height: auto` και τα δύο
	 * λύνονται — ο καμβάς ακολουθεί το περιεχόμενό του, όπως κάθε κουτί.
	 *
	 * Το ύψος της πρώτης οθόνης το εγγυάται το ΙΔΙΟ το panel (`100vh - above`),
	 * που ξέρει πόσο κάθεται από πάνω του. Δεν το χρωστά ο καμβάς.
	 *
	 * Αριθμητική: το panel είναι ήδη `100vh - above`, όπου `above` = μαύρη μπάρα
	 * SportsHunter + λωρίδα χώρου. Αλλά η λωρίδα ζει ΜΕΣΑ στο #site-canvas, ενώ η
	 * μαύρη μπάρα από πάνω του:
	 *
	 *   περιεχόμενο = λωρίδα + (100vh − μπάρα − λωρίδα) = 100vh − μπάρα
	 *   min-height  = 100vh
	 *   διαφορά     = το ύψος της μπάρας, ως κενό γκρι στον πάτο. Πάντα.
	 *
	 */
	height: auto !important;
}

/* 2. Το περιτύλιγμα σταματά να μαζεύει σε στήλη. */
body.sh-bp-v2 section.margin-bottom { margin-bottom: 0 !important; }

body.sh-bp-v2 section.margin-bottom > main.container {
	max-width: none !important;
	width: 100%;
	padding: 0 !important;
	margin: 0 !important;
}

/* ═══ ΚΑΜΙΑ ΑΝΑΛΑΜΠΗ: ΚΡΥΨΕ ΠΡΩΤΑ, ΑΠΟΚΑΛΥΨΕ ΜΕΤΑ ═══
 *
 * ΤΟ ΠΡΟΒΛΗΜΑ: τα κουμπιά του χώρου τα τυπώνει η PHP στη θέση τους (πράσινα,
 * στοιχισμένα στο κέντρο, με τα στυλ του theme) και το `foldExtraButton()` τα
 * μετακομίζει στη λωρίδα **μετά** το DOM ready. Στο ενδιάμεσο — δευτερόλεπτα σε
 * αργό δίκτυο — ο χρήστης βλέπει την παλιά οθόνη να αναδιατάσσεται μπροστά του.
 *
 * Η ΛΥΣΗ ΔΕΝ ΕΙΝΑΙ «loader»: ένα spinner κρύβει το σύμπτωμα και προσθέτει
 * αναμονή. Είναι να μη ζωγραφιστεί ΠΟΤΕ η ενδιάμεση κατάσταση.
 *
 * Το CSS είναι στο <head>, άρα ισχύει από την **πρώτη** ζωγραφιά: τα κρύβει
 * πριν φανούν. Το JS τα μετακομίζει και τους δίνει `.sh-mp-strip__extra`, που
 * τα ξανα-ανάβει — στη σωστή θέση, με τα σωστά στυλ. Αν το JS λείψει, μένουν
 * κρυμμένα: χάνεται ένα προαιρετικό κουμπί, δεν σπάει η οθόνη. */
body.sh-bp-v2 section.margin-bottom > main.container > .col-12 { display: none; }
body.sh-bp-v2 .sh-mp-strip__extra { display: block; }

/* 3. Ο τίτλος-αφίσα και το διπλό μπλοκ ταυτότητας φεύγουν: τη δουλειά τους την
 *    κάνει η λωρίδα του χώρου, που τυπώνεται από πάνω με πλήρη στοιχεία. */
body.sh-bp-v2 section.margin-bottom h3.medium { display: none; }
body.sh-bp-v2 #site-canvas > div:has(.img_fwmwl) { display: none !important; }
body.sh-bp-v2 .booking-app-promo { display: none !important; }

/* ΤΟ ΜΗΝΥΜΑ ΤΟΥ ΧΩΡΟΥ ΔΕΝ ΖΕΙ ΕΔΩ.
 *
 * Είχε δικό του κανόνα σε αυτό το αρχείο — και το ΙΔΙΟ κουτί, γραμμένο από το
 * ίδιο πεδίο του admin, έδειχνε αλλιώς στη σελίδα κρατήσεων και αλλιώς στην
 * Περιοχή Μέλους. Ένα component, μία πηγή: μετακόμισε στο `strip.css`, που
 * φορτώνεται και στις δύο οθόνες και δεν εξαρτάται από body class.
 * (Το ίδιο μάθημα που είχε επιβάλει και τη δημιουργία εκείνου του αρχείου.) */

/* 4. Το panel ΚΟΛΛΑΕΙ κάτω από τη λωρίδα.
 *
 * Η λωρίδα τυπώνεται μέσα στο `the_content`, δηλαδή ΜΕΣΑ στο `#booking_holder`.
 * Όσο εκείνο είχε padding, το padding έμπαινε και στη λωρίδα: έμοιαζε
 * «ξεμπάρκη», με κενό γύρω της και κενό ανάμεσα σε αυτήν και το panel.
 * Μηδέν padding εδώ — το gutter το δίνει το ίδιο το panel, εσωτερικά. */
body.sh-bp-v2 #booking_holder,
body.sh-bp-v2 .wp-block-booknetic-booking {
	display: block !important;
	width: 100%;
	max-width: none !important;
	margin: 0 !important;
	padding: 0 !important;
}

/* ═══ ΤΟ ΠΡΩΤΟ ΠΟΥ ΠΡΕΠΕΙ ΝΑ ΓΡΑΦΤΕΙ ΕΔΩ — ΜΗΝ ΤΟ ΣΒΗΣΕΙΣ ═══
 *
 * Το Booknetic κρύβει στοιχεία με ΚΛΑΣΗ, όχι με inline style:
 *     .booknetic_appointment .booknetic_hidden { display: none }   ← (0,2,0)
 *
 * Κάθε δικός μας κανόνας που δίνει `display` σε κουμπί ή κάρτα είναι (0,2,1) —
 * δηλαδή **νικάει** και ΞΕΚΡΥΒΕΙ ό,τι έπρεπε να μείνει κρυφό. Το είδαμε ζωντανά:
 * στο βήμα «Ημερομηνία» εμφανίστηκαν ΔΥΟ κουμπιά, «ΕΠΟΜΕΝΟ» και «ΠΡΟΣΠΑΘΕΙΣΤΕ
 * ΞΑΝΑ» — το δεύτερο έχει `booknetic_hidden` και φαίνεται μόνο μετά από σφάλμα.
 *
 * Ίδιο ακριβώς μάθημα με το `[hidden]` στην Περιοχή Μέλους: όποιος δίνει
 * `display`, χρωστά να ξαναδηλώσει και το «κρυφό».
 *
 * ═══ ΚΑΙ ΓΙΑΤΙ **ΧΩΡΙΣ** `!important` ═══
 * ΜΗΝ ΤΟ ΠΡΟΣΘΕΣΕΙΣ. Το booknetic.js εμφανίζει τα βήματα με jQuery `.show()`,
 * που γράφει **inline** `display: block`. Ένα `!important` σε κανόνα κλάσης
 * νικάει ακόμα και το inline — δηλαδή θα κρατούσε ΜΟΝΙΜΑ κρυφό κάθε βήμα που
 * το JS προσπαθεί να ανοίξει. Το πλήρωσα ζωντανά: εξαφανίστηκαν οι υπηρεσίες.
 *
 * Η σωστή στάθμη είναι **ειδικότητα, όχι βία**: (0,3,1) — αρκετή για να νικήσει
 * τους δικούς μας κανόνες (0,2,1), αρκετά χαμηλή για να υποχωρήσει στο inline
 * που βάζει το `.show()`. */
body.sh-bp-v2 .booknetic_appointment .booknetic_hidden,
body.sh-bp-v2 .booknetic_appointment .booknetic_menu_hidden { display: none; }

/* ── ΤΟ ΚΟΥΤΙ ────────────────────────────────────────────────────────────
 *
 * Το ίδιο πρόβλημα που είχε η Περιοχή Μέλους, στην πιο ακραία μορφή του:
 *     .booknetic_appointment { min-width: 980px; width: 980px; height: 600px }
 * Σταθερό κουτί με **δικό του εσωτερικό scroll**, σε σελίδα που ήδη σκρολάρει.
 * Σε κινητό 390px το `min-width: 980px` σημαίνει οριζόντιο scroll σε ΟΛΗ τη
 * σελίδα — ο χρήστης σέρνει δεξιά-αριστερά για να δει ένα κουμπί.
 *
 * Το ύψος έρχεται ΚΑΙ από το παραγόμενο theme (`#booknetic_theme_N { height }`),
 * δηλαδή ειδικότητα ID: `!important` είναι ο μόνος τρόπος. Είναι το μοναδικό
 * σημείο όπου νικάμε το theme του χώρου — γεωμετρία, όχι χρώμα. */
body.sh-bp-v2 .booknetic_appointment {
	min-width: 0 !important;
	width: 100% !important;
	max-width: 100% !important;
	height: auto !important;
	/* ΠΛΗΡΕΣ ΥΨΟΣ: γεμίζει ό,τι απομένει κάτω από τη λωρίδα, ώστε η σκούρα
	 * στήλη των βημάτων να μη σταματά στη μέση της οθόνης. Το `--shbp-above`
	 * το μετράει το JS (λωρίδα + ό,τι κάθεται πάνω της)· χωρίς JS πέφτει σε 0
	 * και το panel είναι ακριβώς 100vh — λίγο παραπάνω, ποτέ λιγότερο. */
	min-height: calc(100vh - var(--shbp-above, 0px)) !important;
	background: var(--shbp-page);
	/* Full-bleed, κολλητά κάτω από τη λωρίδα — όπως το panel της Περιοχής
	 * Μέλους. Γωνίες και πλαϊνά περιγράμματα θα ξανάκαναν το panel «κάρτα». */
	border-radius: 0;
	box-shadow: none;
	border: 0;
	/* ΟΧΙ `overflow: hidden`. Το μάθαμε στην Περιοχή Μέλους: ένας πρόγονος με
	 * `overflow: hidden` γίνεται scroll container και ΑΚΥΡΩΝΕΙ κάθε
	 * `position: sticky` μέσα του — εδώ, τον πάτο με τα κουμπιά. Τις γωνίες τις
	 * κόβουν τα ίδια τα παιδιά, που ξέρουν ποια γωνία τους ανήκει. */
	overflow: visible;
}

/* ── Η αριστερή στήλη των βημάτων ───────────────────────────────────────── */

body.sh-bp-v2 .booknetic_appointment_steps {
	width: 246px;
	height: auto;
	flex: 0 0 246px;
	background: var(--shbp-panel);
	border-radius: 0;
	padding: 18px 0;
	/* Στήλη, ώστε το τηλέφωνο του χώρου να πάει στον πάτο με `margin-top: auto`
	 * αντί για `position: absolute` — βλ. από κάτω. */
	display: flex;
	flex-direction: column;
}

/* ΤΟ ΤΗΛΕΦΩΝΟ ΤΟΥ ΧΩΡΟΥ ΠΑΤΟΥΣΕ ΠΑΝΩ ΣΤΑ ΒΗΜΑΤΑ.
 *
 * Το core το κάνει `position: absolute; bottom: 0` (booknetic.css:295-300),
 * που δούλευε όσο η στήλη είχε **σταθερό** ύψος 600px. Τώρα το ύψος είναι
 * `auto`, οπότε το απόλυτο στοιχείο προσγειωνόταν πάνω στα βήματα — «Δε βρήκες
 * ραντεβού να σε βολεύει;» γραμμένο πάνω στο «5 Επιλογές».
 *
 * Στη ροή, στον πάτο, με `margin-top: auto`. Καμία επικάλυψη σε κανένα ύψος. */
body.sh-bp-v2 .booknetic_appointment_steps_footer {
	position: static;
	margin-top: auto;
	padding: 16px var(--shbp-gutter) 0;
	width: 100%;
}

/* ΤΑ ΒΗΜΑΤΑ ΑΚΟΛΟΥΘΟΥΝ ΚΑΙ ΣΤΟ DESKTOP.
 *
 * Σε στενή οθόνη κολλάει ΟΛΗ η λωρίδα των βημάτων (βλ. `.shbp-max-md` πιο κάτω).
 * Σε desktop δεν έχει νόημα το ίδιο: η σκούρα στήλη είναι ήδη όσο ψηλή και το
 * panel, άρα «sticky» πάνω της δεν κάνει τίποτα. Αυτό που πρέπει να ακολουθεί
 * είναι η ΛΙΣΤΑ μέσα της — έτσι η στήλη κρατά το πλήρες ύψος της και τα βήματα
 * κατεβαίνουν μαζί σου.
 *
 * Το `top` δεν είναι 0: στο desktop η λωρίδα του χώρου ΜΕΝΕΙ κολλημένη (στο
 * κινητό την ξεκολλήσαμε). Τα βήματα πρέπει να σταματούν από κάτω της, αλλιώς
 * χώνονται αποπίσω. Το ύψος της το μετράει το JS (`--shbp-strip-h`) — δεν είναι
 * σταθερό, αλλάζει με το όνομα του χώρου και τα κουμπιά του.
 *
 * ΔΟΥΛΕΥΕΙ ΕΠΕΙΔΗ αυτός ο ίδιος κανόνας βγάζει το `overflow-y: auto` του πυρήνα:
 * στοιχείο με δικό του scroll δεν κολλάει μέσα στον γονιό του. */
/* ΧΩΡΟΣ ΧΩΡΙΣ ΤΗΛΕΦΩΝΟ: ΚΑΜΙΑ ΓΡΑΜΜΗ ΠΟΥ ΧΩΡΙΖΕΙ ΤΟ ΤΙΠΟΤΑ ΑΠΟ ΤΟ ΤΙΠΟΤΑ.
 *
 * Το `booknetic.js:2336` κάνει `fadeIn` το μπλοκ «Έχεις απορίες;» ΧΩΡΙΣ να
 * ελέγξει αν υπάρχει τηλέφωνο. Ο χώρος που δεν έχει βάλει, παίρνει ένα κενό
 * κουτί 75px με `border-top` — αόρατο μεν πάνω στο σκούρο, εκτός από τη γραμμή.
 *
 * ΤΟ ΚΛΕΙΝΟΥΜΕ, ΔΕΝ ΤΟ ΚΡΥΒΟΥΜΕ: κανένα `display`, άρα καμία κόντρα με το
 * `fadeIn` που γράφει inline. Το κουτί απλώς δεν πιάνει τόπο. */
body.sh-bp-v2 .booknetic_appointment_steps:has(.booknetic_appointment_steps_footer_txt2:empty) .booknetic_appointment_steps_footer {
	height: 0;
	min-height: 0;
	padding: 0;
	border-top: 0;
	overflow: hidden;
}

body.sh-bp-v2 .booknetic_appointment_steps_body {
	max-height: none;
	overflow: visible;
}

body.sh-bp-v2 .shbp-min-md .booknetic_appointment_steps_body {
	position: sticky;
	top: calc(var(--shbp-strip-h, 0px) + 18px);
	z-index: 5;
}

/* ═══ ΤΟ `overflow` ΕΔΩ ΕΙΝΑΙ ΤΟ ΠΙΟ ΚΡΙΣΙΜΟ ΠΡΑΓΜΑ ΣΕ ΑΥΤΟ ΤΟ ΑΡΧΕΙΟ ═══
 *
 * Ο πυρήνας γράφει `.booknetic_appointment_container { overflow: hidden }`, και
 * αυτή η μία λέξη έκανε τη σελίδα να ΜΗΝ ΣΚΡΟΛΑΡΕΙ σε χώρο με πολλά πακέτα.
 *
 * ΔΕΝ είναι απλώς «κόβει το περιεχόμενο». Είναι κανόνας του flexbox που δεν
 * φαίνεται πουθενά στον κώδικα:
 *
 *   Το αυτόματο ελάχιστο μέγεθος ενός flex item (`min-height: auto`) ΕΙΝΑΙ το
 *   περιεχόμενό του — ΕΚΤΟΣ αν το item έχει `overflow` διαφορετικό από
 *   `visible`, οπότε γίνεται ΜΗΔΕΝ.
 *
 * Η αλυσίδα, βήμα-βήμα:
 *   1. το δοχείο έχει `overflow: hidden` → ελάχιστο ύψος 0
 *   2. άρα ΕΠΙΤΡΕΠΕΤΑΙ να συμπιεστεί κάτω από το περιεχόμενό του
 *   3. συμπιέζεται στο διαθέσιμο ύψος (`min-height: 100vh - above` του panel)
 *   4. οι 20 κάρτες ξεχειλίζουν
 *   5. …και το ίδιο `overflow: hidden` τις ΚΟΒΕΙ
 *   6. το έγγραφο δεν μαθαίνει ποτέ ότι υπάρχουν → δεν υπάρχει τι να σκρολάρει
 *
 * Το `overflow: visible` λύνει ΚΑΙ ΤΑ ΔΥΟ με μία λέξη: επαναφέρει το αυτόματο
 * ελάχιστο στο περιεχόμενο (δεν συμπιέζεται πια) και σταματά το κόψιμο.
 *
 * ΓΙΑΤΙ ΔΕΝ ΤΟ ΕΙΧΑ ΔΕΙ: είχα γράψει ρητό σχόλιο «ΟΧΙ overflow: hidden» στο
 * `.booknetic_appointment` — και ξέχασα ότι ο πυρήνας το γράφει ΔΕΥΤΕΡΗ φορά,
 * ένα επίπεδο πιο μέσα. Ο κανόνας ήταν σωστός, η εφαρμογή του μισή.
 *
 * ΜΗΝ το γυρίσεις σε `auto`: θα έδινε δεύτερη μπάρα κύλισης μέσα στη σελίδα —
 * δύο χώροι κύλισης, που είναι ακριβώς αυτό που δεν θέλουμε. */
body.sh-bp-v2 .booknetic_appointment_container {
	overflow: visible;
	width: auto;
	flex: 1 1 auto;
	min-width: 0;
	height: auto;
	background: var(--shbp-page);
	display: flex;
	flex-direction: column;
}

/* ── Η κεφαλίδα του βήματος ──────────────────────────────────────────────
 *
 * 60px σταθερό ύψος με 18px κείμενο: ο τίτλος «Επιλογή ημερομηνίας και ώρας»
 * κοβόταν σε στενή οθόνη. Ύψος από το περιεχόμενο, λοιπόν — αλλά αυτό μόνο του
 * ανοίγει την ΑΝΤΙΘΕΤΗ τρύπα, και την πλήρωσα ζωντανά:
 *
 * Το δοχείο είναι `display: flex; flex-direction: column`, άρα η κεφαλίδα είναι
 * flex item — και τα flex items ΣΥΡΡΙΚΝΩΝΟΝΤΑΙ από προεπιλογή (`flex-shrink: 1`).
 * Όσο το ύψος ήταν καρφωμένο στα 60px δεν φαινόταν· με `height: auto` και
 * `min-height: 0` δεν έμεινε τίποτα να το κρατήσει: σε μεγάλο βήμα (ημερολόγιο +
 * ώρες) η κεφαλίδα πιεζόταν στα ~30px και ο τίτλος κοβόταν οριζόντια στη μέση.
 *
 * Τρία μαζί, και τα τρία χρειάζονται: `flex: 0 0 auto` δεν επιτρέπει συρρίκνωση,
 * `min-height` δίνει πάτο, `height: auto` αφήνει ανοιχτή την κορυφή. */
body.sh-bp-v2 .booknetic_appointment_container_header {
	flex: 0 0 auto;
	height: auto;
	min-height: 56px;
	padding: 16px var(--shbp-gutter);
	background: var(--shbp-surface);
	border-bottom: 1px solid var(--shbp-line);
	color: var(--shbp-title);
	font-size: 18px;
	font-weight: 700;
	line-height: 1.25;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
}

/* ── Το σώμα ─────────────────────────────────────────────────────────────
 * ΤΕΛΟΣ ΤΟ ΕΣΩΤΕΡΙΚΟ SCROLL. Το `height: calc(100% - 135px); overflow: auto`
 * έφτιαχνε δεύτερη μπάρα κύλισης μέσα στη σελίδα: στο κινητό ο χρήστης
 * σκρολάρει τη σελίδα και το περιεχόμενο δεν κουνιέται, ή το αντίστροφο. */
body.sh-bp-v2 .booknetic_appointment_container_body {
	height: auto !important;
	max-height: none !important;
	overflow: visible !important;
	padding: var(--shbp-gutter);
	background: var(--shbp-page);
	flex: 1 1 auto;
}

/* ── Ο πάτος με τις ενέργειες ────────────────────────────────────────────
 *
 * ═══ ΓΙΑΤΙ ΔΕΝ ΕΙΝΑΙ STICKY — ΤΟ ΔΟΚΙΜΑΣΑ ΚΑΙ ΔΕΝ ΔΟΥΛΕΥΕΙ ═══
 * Ο πάτος είναι το **τελευταίο παιδί** του δοχείου του. Ένα `position: sticky;
 * bottom: 0` δεν μπορεί να επιπλεύσει πάνω από το κάτω άκρο του γονιού του — κι
 * εδώ το κάτω άκρο του γονιού ΕΙΝΑΙ το κάτω άκρο του πάτου. Μετρημένο: στο
 * scroll 400 ο πάτος ήταν στα 1302px, εκτός οθόνης· «κολλούσε» μόνο αφού είχες
 * ήδη φτάσει σχεδόν στο τέλος.
 *
 * Μια μπάρα που εμφανίζεται μόνο κοντά στο τέλος είναι ΧΕΙΡΟΤΕΡΗ από καθόλου:
 * κουνιέται απρόβλεπτα. Η σωστή λύση είναι `fixed` με JS που την ανάβει όσο το
 * panel είναι στην οθόνη — δουλειά της Φάσης 2, με δικό της έλεγχο (και προσοχή
 * στο iframe, όπου το «viewport» είναι όλο το ύψος του πλαισίου).
 *
 * Μέχρι τότε ο πάτος μένει στη ροή. Δεν είναι οπισθοδρόμηση: το εσωτερικό
 * scroll έφυγε, άρα ο χρήστης φτάνει σε αυτόν σκρολάροντας τη ΣΕΛΙΔΑ, όπως σε
 * κάθε μεγάλη φόρμα. */
body.sh-bp-v2 .booknetic_appointment_container_footer {
	/* Ίδια παγίδα με την κεφαλίδα: flex item σε στήλη, άρα συρρικνώσιμο. Μια
	 * μπάρα ενεργειών που χάνει 20px ύψους κόβει τα κουμπιά της στη μέση. */
	flex: 0 0 auto;
	position: relative;
	height: auto;
	min-height: 0;
	padding: 14px var(--shbp-gutter);
	background: var(--shbp-surface);
	border-top: 1px solid var(--shbp-line);
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
}

/* ── Τα κουμπιά ──────────────────────────────────────────────────────────
 * 36px ύψος, 12px κείμενο και ακτίνα 2px είναι κουμπί άλλης εποχής δίπλα στα
 * 40px/13px/9px της Περιοχής Μέλους. Το ΧΡΩΜΑ μένει του χώρου: το παραγόμενο
 * theme το βάζει με `!important` και δεν το αγγίζουμε. */
body.sh-bp-v2 .booknetic_btn_primary,
body.sh-bp-v2 .booknetic_btn_secondary,
body.sh-bp-v2 .booknetic_btn_success {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	height: auto !important;
	min-height: 44px;
	padding: 11px 20px !important;
	border-radius: 10px !important;
	font-size: 14px !important;
	font-weight: 600;
	line-height: 1.2;
	box-shadow: none !important;
}

body.sh-bp-v2 .booknetic_btn_secondary {
	background: var(--shbp-surface);
	border: 1px solid var(--shbp-line);
	color: var(--shbp-ink);
}

/* ── Οι κάρτες: υπηρεσίες, προσωπικό, τοποθεσίες ─────────────────────────
 * Ίδια γλώσσα με τις κάρτες κρατήσεων: περίγραμμα αντί για σκιά, ακτίνα 14,
 * hover που αλλάζει ΜΟΝΟ το περίγραμμα. Το χρώμα του επιλεγμένου περιγράμματος
 * μένει του χώρου (`border` ρόλος). */
body.sh-bp-v2 .booknetic_service_card,
body.sh-bp-v2 .booknetic_card,
body.sh-bp-v2 .booknetic_service_extra_card,
body.sh-bp-v2 .booknetic_payment_method {
	background: var(--shbp-surface);
	border: 1px solid var(--shbp-line);
	border-radius: var(--shbp-radius);
	box-shadow: none !important;
	margin-bottom: 10px;
	transition: border-color .15s ease;
}

body.sh-bp-v2 .booknetic_service_card:hover,
body.sh-bp-v2 .booknetic_card:hover,
body.sh-bp-v2 .booknetic_service_extra_card:hover {
	border-color: #cfd8e6;
	box-shadow: none !important;
	transform: none;
}

/* Η επιλεγμένη κάρτα: το χρώμα το δίνει ο χώρος, εμείς δίνουμε ΒΑΡΟΣ — δύο
 * pixel περίγραμμα και απαλό φόντο από το ίδιο χρώμα. Χωρίς αυτό, η επιλογή
 * φαινόταν μόνο από μια λεπτή γραμμή που χανόταν σε λίστα 20 καρτών. */
body.sh-bp-v2 .booknetic_service_card_selected,
body.sh-bp-v2 .booknetic_card_selected,
body.sh-bp-v2 .booknetic_service_extra_card_selected,
body.sh-bp-v2 .booknetic_payment_method_selected {
	border-width: 2px;
	background: var(--shbp-primary-soft);
}

/* ── Ώρες ────────────────────────────────────────────────────────────────── */

body.sh-bp-v2 .booknetic_time,
body.sh-bp-v2 .booknetic_selected_time {
	border-radius: 10px !important;
	min-height: 44px;
	font-size: 14px;
	font-weight: 600;
	border: 1px solid var(--shbp-line);
	box-shadow: none !important;
}

/* ── Η κεφαλίδα ενός βήματος μέσα στο σώμα ──────────────────────────────── */

body.sh-bp-v2 .booknetic_times_title,
body.sh-bp-v2 .booknetic_service_category,
body.sh-bp-v2 .booknetic_service_extra_title {
	font-size: 13px;
	font-weight: 700;
	letter-spacing: .04em;
	text-transform: uppercase;
}

/* ═══ ΤΑ ΒΗΜΑΤΑ ΣΕ ΜΕΓΑΛΟ ΠΛΑΤΟΣ ═══
 *
 * ΤΟ ΠΡΟΒΛΗΜΑ, ΚΑΙ ΕΙΝΑΙ ΤΟ ΙΔΙΟ ΣΕ ΚΑΘΕ ΒΗΜΑ: το booknetic.css γράφει
 * `width: 100%` + `justify-content: space-between` σε δοχεία με **σταθερού
 * πλάτους** παιδιά (ημερολόγιο 370px, ώρες 305px). Σε κουτί 750px αυτό έδινε
 * μια λογική απόσταση. Τώρα που το panel πιάνει 1600px, τα δύο παιδιά
 * σφηνώνονται στις δύο άκρες με 900px κενό ανάμεσα — ο χρήστης διαλέγει μέρα
 * αριστερά και ψάχνει την ώρα στην άλλη άκρη της οθόνης.
 *
 * Η ΔΙΟΡΘΩΣΗ ΕΙΝΑΙ ΜΙΑ ΑΡΧΗ, ΟΧΙ ΜΠΑΛΩΜΑ ΑΝΑ ΒΗΜΑ:
 *   • `flex-start` αντί για `space-between` — τα στοιχεία μένουν μαζί,
 *   • `gap` αντί για κενό από στοίχιση — απόσταση που δεν μεγαλώνει,
 *   • `flex-wrap` — σε στενό, το ένα κάτω από το άλλο,
 *   • και μια **μέγιστη στήλη ανάγνωσης** για τα βήματα που είναι φόρμα.
 *
 * Οι κάρτες (υπηρεσίες, προσωπικό) ΔΕΝ μπαίνουν σε στήλη: εκεί το πλήρες
 * πλάτος βοηθά, όπως στη λίστα κρατήσεων. */

body.sh-bp-v2 .booknetic_date_time_area,
body.sh-bp-v2 .booknetic_recurring_date_container,
body.sh-bp-v2 .booknetic_portlet_cols,
body.sh-bp-v2 .booknetic_confirm_step_body,
body.sh-bp-v2 .booknetic-cart-holder,
body.sh-bp-v2 .booknetic-products-flex {
	justify-content: flex-start;
	flex-wrap: wrap;
	gap: 20px;
}

/* Το ημερολόγιο και οι ώρες: δίπλα-δίπλα με σταθερή απόσταση, και οι ώρες
 * μεγαλώνουν αντί να σφηνώνονται δεξιά. */
body.sh-bp-v2 .booknetic_calendar_div {
	width: auto;
	flex: 0 1 380px;
	max-width: 100%;
}

body.sh-bp-v2 .booknetic_time_div {
	flex: 1 1 320px;
	min-width: 0;
	max-width: 560px;
}

body.sh-bp-v2 .booknetic_times {
	width: 100%;
	height: auto;
	min-height: 312px;
	border-radius: var(--shbp-radius);
	border: 1px solid var(--shbp-line);
	box-shadow: none;
}

/* ΤΟ ΠΕΡΙΕΧΟΜΕΝΟ ΤΟΥ ΒΗΜΑΤΟΣ ΚΕΝΤΡΑΡΕΤΑΙ, ΔΕΝ ΚΟΛΛΑΕΙ ΑΡΙΣΤΕΡΑ.
 *
 * Με το panel σε πλήρες πλάτος, ένα capped περιεχόμενο χωρίς αυτόματα
 * περιθώρια στοιβάζεται στην αριστερή άκρη και αφήνει μισή οθόνη κενή δεξιά —
 * η χειρότερη από τις δύο επιλογές: ούτε γεμάτο, ούτε κεντραρισμένο.
 *
 * Μία στήλη ανάγνωσης, κεντραρισμένη, για ΚΑΘΕ βήμα. Οι κάρτες μέσα της
 * απλώνονται όσο θέλουν — απλώς η στήλη δεν ξεπερνά το μέτρο. */
body.sh-bp-v2 .booknetic_appointment_container_body > * {
	max-width: var(--shbp-measure, 1080px);
	margin-inline: auto;
}

/* Τα βήματα-φόρμα θέλουν στενότερο μέτρο: πεδίο που απλώνεται σε 1080px είναι
 * δυσανάγνωστο και δύσκολο να συμπληρωθεί. */
body.sh-bp-v2 [data-step-id="information"],
body.sh-bp-v2 [data-step-id="recurring_info"],
body.sh-bp-v2 [data-step-id="confirm_details"] { --shbp-measure: 880px; }

/* ── Το καλάθι ──────────────────────────────────────────────────────────── */

body.sh-bp-v2 .booknetic-cart-item,
body.sh-bp-v2 .booknetic_portlet {
	background: var(--shbp-surface);
	border: 1px solid var(--shbp-line);
	border-radius: var(--shbp-radius);
	box-shadow: none !important;
}

body.sh-bp-v2 .booknetic-cart-item.active { border-width: 2px; }

/* ── ΤΟ ΚΙΝΗΤΟ ───────────────────────────────────────────────────────────
 *
 * Οι κλάσεις `shbp-max-*` μπαίνουν από το JS και μετρούν το πλάτος **του
 * panel**, όχι του viewport: το ίδιο panel ζει και μέσα σε iframe μισού
 * πλάτους σε desktop, όπου ένα media query θα έλεγε ψέματα. */

body.sh-bp-v2 .booknetic_appointment.shbp-max-md {
	flex-direction: column;
}

body.sh-bp-v2 .shbp-max-md .booknetic_appointment_steps {
	width: 100%;
	flex: none;
	padding: 10px var(--shbp-gutter);
	border-radius: 0;
}

/* Τα βήματα γίνονται οριζόντια λωρίδα που κυλά — το ίδιο μοτίβο με τις
 * καρτέλες της Περιοχής Μέλους στο κινητό.
 *
 * ΤΟ CORE ΚΑΝΕΙ ΚΑΤΙ ΑΛΛΟ ΚΑΙ ΠΡΕΠΕΙ ΝΑ ΤΟ ΝΙΚΗΣΟΥΜΕ: στα ≤1000px κάνει τα
 * βήματα `float: left !important` και **κρύβει τα λεκτικά** τους
 * (`booknetic.css:2739-2747`), αφήνοντας μόνο αριθμημένα κυκλάκια. Ο χρήστης
 * βλέπει «① ② ③ ④ ⑤» χωρίς να ξέρει τι είναι το καθένα — και αυτό είναι
 * ακριβώς η οθόνη όπου χρειάζεται περισσότερο να ξέρει πού βρίσκεται. */
body.sh-bp-v2 .shbp-max-md .booknetic_appointment_steps_body {
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: 6px;
	padding: 0;
	max-height: none;
	overflow-x: auto;
	overflow-y: hidden;
	scrollbar-width: none;
}

body.sh-bp-v2 .shbp-max-md .booknetic_appointment_steps_body::-webkit-scrollbar { display: none; }

body.sh-bp-v2 .shbp-max-md .booknetic_appointment_step_element {
	float: none !important;
	flex: 0 0 auto;
	margin: 0 !important;
	padding: 6px 10px;
	border-radius: 999px;
	white-space: nowrap;
}

/* Το λεκτικό ΜΕΝΕΙ. Είναι ο λόγος που υπάρχει η λωρίδα. */
body.sh-bp-v2 .shbp-max-md .booknetic_step_title {
	display: inline !important;
	font-size: 13px;
}

/* Το τηλέφωνο «Have any questions?» δεν είναι βήμα — δεν έχει θέση μέσα σε
 * οριζόντια λωρίδα βημάτων. Πάει κάτω από τις ενέργειες. */
body.sh-bp-v2 .shbp-max-md .booknetic_appointment_steps_footer { display: none; }

body.sh-bp-v2 .shbp-max-md .booknetic_appointment_container { width: 100%; }

/* ═══ Ο ΠΑΤΟΣ ΣΕ ΚΙΝΗΤΟ: ΔΥΟ ΚΟΥΜΠΙΑ ΔΙΠΛΑ-ΔΙΠΛΑ, ΟΧΙ ΣΤΟΙΒΑ ═══
 *
 * Η προηγούμενη έκδοση τα στοίβαζε (`column-reverse` + `width: 100%`). Δύο
 * κουμπιά πλήρους πλάτους το ένα πάνω στο άλλο είναι 110px από τα 640 της
 * οθόνης — και το «ΠΙΣΩ», που είναι το λιγότερο σημαντικό, έπαιρνε ίσο βάρος με
 * το «ΕΠΟΜΕΝΟ». Δεξιά-αριστερά χωράνε άνετα και διαβάζονται σωστά: πίσω
 * αριστερά, μπροστά δεξιά, όπως σε κάθε φόρμα βημάτων.
 *
 * `flex: 1 1 0` σε όλα: μοιράζονται ΙΣΑ ό,τι υπάρχει. Όταν το ένα είναι κρυφό
 * (πρώτο βήμα, βήμα επιβεβαίωσης), το άλλο παίρνει μόνο του τη σειρά — χωρίς
 * δεύτερο κανόνα. */
body.sh-bp-v2 .shbp-max-md .booknetic_appointment_container_footer {
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
}

body.sh-bp-v2 .shbp-max-md .booknetic_appointment_container_footer button {
	flex: 1 1 0;
	min-width: 0;
	width: auto;
}

/* ═══ ΤΟ ΜΗΝΥΜΑ ΣΦΑΛΜΑΤΟΣ — ΔΙΑΒΑΣΕ ΤΟ ΠΡΙΝ ΑΓΓΙΞΕΙΣ ΤΟΝ ΠΑΤΟ ═══
 *
 * Το `.booknetic_warning_message` ΖΕΙ ΜΕΣΑ ΣΤΟΝ ΠΑΤΟ, ανάμεσα στα δύο κουμπιά
 * (booknetic.php:123). Και σε κινητό ο πυρήνας το βγάζει από τη ροή:
 *     .booknetic_warning_message { position: absolute; top: 20px;
 *                                  width: calc(100% - 60px) }   (booknetic.css:3023)
 * Με τον πάτο `position: relative`, το «20px από την κορυφή» σημαίνει 20px από
 * την κορυφή ΤΟΥ ΠΑΤΟΥ — δηλαδή πάνω στα κουμπιά. Μόλις ο πάτος γίνει
 * αγκυρωμένος (`shbp-dock`), το ίδιο absolute το καρφώνει πάνω στην μπάρα
 * ενεργειών και ο χρήστης διαβάζει το σφάλμα ΠΑΝΩ στο κουμπί που μόλις πάτησε.
 *
 * Επιστρέφει στη ροή, σε δική του πλήρη σειρά, ΠΑΝΩ από τα κουμπιά (`order: -1`).
 * Και ξηλώνονται τα δύο που το έκοβαν: σταθερό ύψος 36px και `nowrap` —
 * «Παρακαλώ επιλέξτε πρώτα ημερομηνία» σε 360px οθόνη κοβόταν στη μέση λέξης.
 *
 * ΚΑΜΙΑ ΔΗΛΩΣΗ `display` ΕΔΩ. Το booknetic.js το εμφανίζει με jQuery `fadeIn`,
 * που γράφει inline `display: block` — δικό μας `display` θα το κρατούσε κρυφό
 * ή θα το άφηνε μόνιμα ορατό. Ίδιο μάθημα με τα βήματα και το `.show()`. */
body.sh-bp-v2 .shbp-max-md .booknetic_warning_message {
	position: static;
	order: -1;
	flex: 1 0 100%;
	width: auto;
	max-width: none;
	height: auto;
	min-height: 0;
	margin: 0;
	padding: 8px 12px;
	line-height: 1.35;
	white-space: normal;
	overflow: visible;
	border-radius: 8px;
}

/* ── Ο μεταφραστής, ξανά ─────────────────────────────────────────────────
 * Ίδιο μάθημα με την Περιοχή Μέλους: το `.booknetic-body *` του add-on και τα
 * `<font>` που τυλίγει ο Google Translate σβήνουν κάθε χρώμα. Εδώ το ίδιο
 * ισχύει για το `#booknetic_theme_N *` του παραγόμενου theme, που ορίζει
 * `font-family` σε κάθε απόγονο — και θα τα έπιανε ΚΑΙ τα <font>. */
body.sh-bp-v2 font {
	color: inherit !important;
	font-size: inherit !important;
	font-weight: inherit !important;
	background: none !important;
}


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

/* ── ΕΝΑ ΛΟΓΟΤΥΠΟ, ΟΧΙ ΔΥΟ ───────────────────────────────────────────────
 *
 * Ο πυρήνας τυπώνει το λογότυπο του χώρου ΜΕΣΑ στη στήλη των βημάτων, με
 * διακόπτη από το panel του tenant (`display_logo_on_booking_panel`). Είχε νόημα
 * όσο το panel ήταν ένα κουτί 980×600 που επέπλεε μόνο του σε μια σελίδα: ήταν η
 * ΜΟΝΗ ταυτότητα μέσα στο κουτί.
 *
 * Τώρα από πάνω του κάθεται η λωρίδα του χώρου, με το ΙΔΙΟ λογότυπο (βλ.
 * `SH_MP_Context::tenant_logo()`), το όνομα, την περιοχή και τα κανάλια του. Δύο
 * λογότυπα σε απόσταση δύο εκατοστών· και σε κινητό, όπου η στήλη γίνεται
 * οριζόντια λωρίδα, ο πυρήνας της καρφώνει `height: 200px !important` για να
 * χωρέσει — 200px σκούρο κενό πάνω από κάθε βήμα.
 *
 * Φεύγει από ΕΔΩ, όχι από τη βάση: ο διακόπτης του tenant μένει όπως είναι. Αν
 * αύριο αποφασίσουμε το αντίθετο, σβήνεις δύο κανόνες. */
body.sh-bp-v2 .booknetic_company_logo { display: none; }

body.sh-bp-v2 .booknetic_appointment_steps.has-logo { height: auto !important; }

/* ── ΤΟ ΚΑΛΑΘΙ: ΚΑΜΙΑ ΓΚΡΙ ΠΛΑΚΑ, ΚΑΝΕΝΑ ΜΙΣΟ ΚΕΝΟ ──────────────────────
 *
 * `.booknetic-cart-col` κουβαλά `background: #f5f7fa !important` και 8px πλαϊνά,
 * με τη `.booknetic-cart` να τα ακυρώνει με αρνητικά περιθώρια -8px. Το ζευγάρι
 * είναι το κλασικό «row/col» του Bootstrap — φτιαγμένο για πλέγμα καρτών που
 * εδώ δεν υπάρχει: μία στήλη, ένα αντικείμενο ανά σειρά.
 *
 * Ό,τι μένει είναι μια γκρι πλάκα στο χρώμα της σελίδας (αόρατη, αλλά κόβει τις
 * γωνίες της κάρτας) και μισό κενό δεξιά-αριστερά. Το `!important` είναι
 * υποχρεωτικό: ο πυρήνας το έβαλε πρώτος. */
body.sh-bp-v2 .booknetic-cart {
	margin-right: 0;
	margin-left: 0;
	margin-top: 0;
	gap: 12px;
}

body.sh-bp-v2 .booknetic-cart-col {
	padding-right: 0;
	padding-left: 0;
	margin-top: 0;
	background: transparent !important;
}

/* ── ΚΟΝΤΑ ΣΤΟ ΠΛΗΡΕΣ ΠΛΑΤΟΣ ─────────────────────────────────────────────
 *
 * Ο πυρήνας καπελώνει ΤΑ ΠΑΝΤΑ στα 350px σε στενή οθόνη (booknetic.css:2920,
 * 2950, 2954) και τα κεντράρει με `align-items: center`. Σε οθόνη 390px αυτό
 * αφήνει 20px κενό δεξιά-αριστερά και ένα ημερολόγιο όπου κάθε μέρα είναι 40px —
 * στόχος μικρότερος από το δάχτυλο. Σε οθόνη 430px το κενό γίνεται 40px και το
 * ημερολόγιο δεν μεγαλώνει καθόλου.
 *
 * Εδώ όλα απλώνονται: το gutter του panel είναι το ΜΟΝΟ περιθώριο. */
body.sh-bp-v2 .booknetic_appointment.shbp-max-md { --shbp-gutter: 12px; }

body.sh-bp-v2 .shbp-max-md .booknetic_appointment_container_body > * {
	max-width: none;
	margin-inline: 0;
}

body.sh-bp-v2 .shbp-max-md .booknetic_date_time_area,
body.sh-bp-v2 .shbp-max-md .booknetic_recurring_date_container {
	align-items: stretch;
	gap: 16px;
}

body.sh-bp-v2 .shbp-max-md .booknetic_calendar_div,
body.sh-bp-v2 .shbp-max-md .booknetic_time_div,
body.sh-bp-v2 .shbp-max-md .booknetic_times,
body.sh-bp-v2 .shbp-max-md #booknetic_calendar_area,
body.sh-bp-v2 .shbp-max-md .booknetic-cart-item,
body.sh-bp-v2 .shbp-max-md .booknetic_service_card,
body.sh-bp-v2 .shbp-max-md .booknetic_card {
	width: 100%;
	max-width: none;
	flex-basis: auto;
}

/* ── ΤΑ ΒΗΜΑΤΑ ΜΕΝΟΥΝ ΣΤΗΝ ΚΟΡΥΦΗ ───────────────────────────────────────
 *
 * Η λωρίδα του χώρου ξεκόλλησε (strip.css). Στη θέση της κολλά αυτό που ΑΛΛΑΖΕΙ
 * καθώς προχωράς: σε ποιο βήμα είσαι και πόσα μένουν. Μία σειρά ύψους ~46px
 * αντί για τρεις.
 *
 * Δουλεύει επειδή ο πρόγονός του (`.booknetic_appointment`) έχει ρητά
 * `overflow: visible` — ένα `overflow: hidden` οπουδήποτε από πάνω θα το
 * ακύρωνε σιωπηλά. Γι' αυτό το `overflow` εκεί έχει δικό του σχόλιο. */
body.sh-bp-v2 .shbp-max-md .booknetic_appointment_steps {
	position: sticky;
	top: 0;
	z-index: 20;
}

/* ── Η ΜΠΑΡΑ ΕΝΕΡΓΕΙΩΝ ΑΓΚΥΡΩΝΕΤΑΙ ΣΤΟΝ ΠΑΤΟ ────────────────────────────
 *
 * ΤΟ ΞΑΝΑΓΡΑΦΩ ΕΠΕΙΔΗ ΠΡΙΝ ΕΓΡΑΨΑ ΟΤΙ ΔΕΝ ΓΙΝΕΤΑΙ: με `position: sticky` ΔΕΝ
 * γίνεται. Ο πάτος είναι το τελευταίο παιδί του δοχείου του, και ένα sticky
 * στοιχείο δεν επιπλέει πάνω από το κάτω άκρο του γονιού του — που εδώ ΕΙΝΑΙ το
 * δικό του κάτω άκρο. Μετρημένο: «κολλούσε» μόνο αφού είχες ήδη φτάσει.
 *
 * Η λύση είναι `fixed` + ένας διακόπτης από JS: όσο ο πάτος του panel είναι κάτω
 * από την οθόνη, η μπάρα επιπλέει· μόλις τον φτάσεις, γυρίζει στη ροή και
 * σταματά — δεν σκεπάζει ποτέ το footer της σελίδας. Ο διακόπτης είναι το
 * `.shbp-dock` (booking-v2.js, `syncDock`).
 *
 * ΤΟ ΚΕΝΟ ΤΟ ΚΡΑΤΑΜΕ ΕΜΕΙΣ: το `fixed` βγάζει τη μπάρα από τη ροή, οπότε το
 * δοχείο θα κόνταινε απότομα κατά το ύψος της και η σελίδα θα πηδούσε. Το
 * `--shbp-dock-h` (το μετράει το JS) το επιστρέφει ως padding.
 *
 * ΜΟΝΟ ΣΕ ΣΤΕΝΟ PANEL. Σε desktop η μπάρα θα διέσχιζε και τη σκούρα στήλη των
 * βημάτων στα αριστερά — μια λευκή λωρίδα κομμένη στη μέση. */
/* ═══ ΓΙΑΤΙ ΔΕΝ ΕΞΑΡΤΑΤΑΙ ΠΙΑ ΑΠΟ ΤΟ ΠΛΑΤΟΣ ═══
 *
 * Ήταν δεμένο στο `.shbp-max-md`, δηλαδή «μόνο σε στενό panel». Δύο ζημιές:
 *
 * 1. ΣΕ DESKTOP Η ΜΠΑΡΑ ΔΕΝ ΥΠΗΡΧΕ ΚΑΘΟΛΟΥ. Με 50 πακέτα το «ΕΠΟΜΕΝΟ» καθόταν
 *    3000px πιο κάτω — άφταστο χωρίς να σκρολάρεις ως το τέλος.
 * 2. ΣΤΟ ΟΡΙΟ ΤΩΝ 1001px ΕΞΑΦΑΝΙΖΟΤΑΝ ΖΩΝΤΑΝΑ. Μετρημένο από την κονσόλα:
 *       y 161 | dock true  | pos fixed    | top 876
 *       y 173 | dock false | pos relative | top 3242
 *    Μια νέα μέτρηση πλάτους πέρασε το κατώφλι, το `shbp-max-md` έφυγε, και μαζί
 *    του η μπάρα — στη μέση της κύλισης, χωρίς ο χρήστης να κάνει τίποτα.
 *
 * Η ΑΙΤΙΑ ΗΤΑΝ Η ΙΔΙΑ Η ΣΥΝΘΗΚΗ, όχι η μέτρηση: μια μπάρα ενεργειών δεν έχει
 * λόγο να υπάρχει σε 999px και να λείπει σε 1001px. Χρειάζεται σε κάθε πλάτος.
 *
 * Ο λόγος που την είχα περιορίσει ήταν γεωμετρικός: σε desktop μια μπάρα
 * `left: 0; right: 0` θα διέσχιζε και τη σκούρα στήλη των βημάτων. Λύνεται με
 * γεωμετρία, όχι με αφαίρεση: αγκυρώνεται πάνω από ΤΗ ΣΤΗΛΗ ΠΕΡΙΕΧΟΜΕΝΟΥ, όχι
 * πάνω από την οθόνη. Το JS μετράει πού αρχίζει και πόσο πλατιά είναι. */
body.sh-bp-v2 .booknetic_appointment.shbp-dock .booknetic_appointment_container_footer {
	position: fixed;
	bottom: 0;
	left: var(--shbp-dock-left, 0px);
	width: var(--shbp-dock-width, 100%);
	right: auto;
	z-index: 60;
	border-top: 1px solid var(--shbp-line);
	box-shadow: 0 -6px 20px rgba(18, 22, 33, .12);
}

body.sh-bp-v2 .booknetic_appointment.shbp-dock .booknetic_appointment_container {
	padding-bottom: var(--shbp-dock-h, 0px);
}