/* SH — Η ΛΩΡΙΔΑ ΤΟΥ ΧΩΡΟΥ (strip.css)
 * ═══════════════════════════════════════════════════════════════════════════
 * ΜΙΑ ΠΗΓΗ ΓΙΑ ΔΥΟ ΟΘΟΝΕΣ.
 *
 * Η ίδια λωρίδα στέκεται πάνω από την Περιοχή Μέλους ΚΑΙ πάνω από τη σελίδα
 * κρατήσεων. Όσο τα στυλ της ζούσαν μέσα στο `panel-v2.css` — και μάλιστα
 * scoped σε `body.sh-mp-v2` — τυπωνόταν στη σελίδα κρατήσεων **γυμνή**: άσπρα
 * γράμματα σε ανοιχτό φόντο, εικονίδια τετραγωνάκια, κουμπιά σκέτο κείμενο.
 *
 * ΤΟ SCOPE ΕΙΝΑΙ ΤΟ ΙΔΙΟ ΤΟ COMPONENT, όχι το <body>: η λωρίδα τυπώνεται μόνο
 * σε v2 (το κρίνει η `SH_MP_Strip::should_render()`), άρα δεν χρειάζεται δεύτερος
 * φύλακας — και έτσι δουλεύει όπου κι αν την βάλουμε αύριο.
 *
 * ΤΑ TOKENS ΖΟΥΝ ΕΔΩ, στην ίδια τη λωρίδα. Δεν κληρονομεί από το `body.sh-mp-v2`,
 * γιατί στη σελίδα κρατήσεων εκείνη η κλάση δεν υπάρχει.
 * ═══════════════════════════════════════════════════════════════════════════ */

.sh-mp-strip {
	--shmp-surface:   #ffffff;
	--shmp-sunken:    #f5f7fa;
	--shmp-ink:       #292d32;
	--shmp-ink-soft:  #6b7480;
	--shmp-line:      #e3eaf3;
	--shmp-primary:   #5b4ee0;
	--shmp-primary-d: #4a3fc4;
	--shmp-dark:      #212536;
	--shmp-dark-line: #343849;
	--shmp-dark-btn:  #40445a;
	--shmp-dark-ink:  #e3e1ef;
	--shmp-dark-soft: #8d8ba6;
	--shmp-radius:    14px;
	--shmp-gutter:    20px;
	--shmp-headroom:  0px;
}

@media (max-width: 1024px) {
	.sh-mp-strip {
		--shmp-gutter: 14px;
		margin-top: 0;
		padding-block: 12px;
	}
}

/* ── ΖΩΝΗ 2: η μπάρα του χώρου ───────────────────────────────────────────── */

/* Full-bleed λευκή ζώνη κάτω από την μπάρα SportsHunter: η ταυτότητα του χώρου
 * είναι κεφαλίδα εφαρμογής, όχι κάρτα που επιπλέει. Το περιεχόμενο μαζεύεται στο
 * ίδιο πλάτος με το panel, ώστε τα δύο να διαβάζονται ως μία στήλη. */
/* STICKY: η ταυτότητα του χώρου και οι ενέργειές του μένουν στην οθόνη. Σε
 * λίστα 300 κρατήσεων, το «Νέα κράτηση» ήταν 40 οθόνες πιο πάνω. */
.sh-mp-strip {
	display: block;
	position: sticky;
	top: var(--shmp-headroom);
	z-index: 30;
	margin: 0;
	padding: 14px var(--shmp-gutter);
	background: var(--shmp-dark);
	color: var(--shmp-dark-ink);
	border-bottom: 0;
}

/* ΣΕ ΚΙΝΗΤΟ Η ΛΩΡΙΔΑ ΔΕΝ ΚΟΛΛΑΕΙ.
 *
 * Σε πλάτος οθόνης, η ταυτότητα του χώρου είναι τρεις σειρές: λογότυπο+όνομα,
 * κανάλια, δύο-τρία κουμπιά. Κολλημένη στην κορυφή έτρωγε το ένα τρίτο της
 * οθόνης σε ΚΑΘΕ κύλιση — και έκοβε στη μέση τον τίτλο του βήματος από κάτω.
 *
 * Ο χώρος δεν αλλάζει όσο κρατάς κράτηση· δεν χρειάζεται να τον βλέπεις συνεχώς.
 * Το ΒΗΜΑ αλλάζει, και αυτό είναι που μένει στην κορυφή (booking-v2.css).
 *
 * ΠΡΟΣΟΧΗ ΣΤΗ ΣΕΙΡΑ: ο κανόνας πρέπει να έρχεται ΜΕΤΑ το `position: sticky` από
 * πάνω — ίδια ειδικότητα (0,1,0), κερδίζει ο τελευταίος. */
@media (max-width: 1000px) {
	.sh-mp-strip { position: static; }
}

/* ΚΑΜΙΑ κεντραρισμένη στήλη εδώ. Η ταυτότητα του χώρου πάει τέρμα αριστερά, οι
 * ενέργειες τέρμα δεξιά — στις ίδιες άκρες με το μενού και τις κάρτες. */
.sh-mp-strip__inner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 18px;
	max-width: none;
	margin: 0;
	container-type: inline-size;
}

/* ΑΡΙΣΤΕΡΑ η ταυτότητα (λογότυπο, όνομα, κανάλια), ΔΕΞΙΑ οι ενέργειες. Δύο
 * ομάδες, όχι πέντε αδέσποτα στοιχεία σε μία σειρά. */
.sh-mp-strip__lead {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px 14px;
	min-width: 0;
	flex: 1 1 320px;
}

.sh-mp-strip__tools {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: flex-end;
	gap: 10px;
	flex: 0 1 auto;
	margin-left: auto;
}

/* Το προαιρετικό κουμπί του χώρου μετακομίζει ΜΕΣΑ στη ζώνη (JS), στην ομάδα
 * των ενεργειών. Δική του σειρά πάνω από την ταυτότητα το διάβαζε ως τίτλο. */
.sh-mp-strip__extra {
	/* Το `display` είναι ΛΕΙΤΟΥΡΓΙΚΟ εδώ, όχι αισθητικό: τα φύλλα των δύο οθονών
	 * κρύβουν το κουμπί μέχρι να μετακομίσει, και αυτή η κλάση το ξανα-ανάβει. */
	display: block;
	flex: 0 0 auto;
	width: auto !important;
	max-width: none !important;
	margin: 0 !important;
	padding: 0 !important;
}

.sh-mp-strip__extra > p { margin: 0; text-align: left !important; }

/* Ίδιο ύψος και ίδια γεωμετρία με τις δύο ροές: στέκεται δίπλα τους, άρα κάθε
 * διαφορά μεγέθους διαβάζεται ως διαφορά σημασίας. Ουδέτερο, όχι indigo — δεν
 * ανταγωνίζεται τη «Νέα κράτηση». */
.sh-mp-strip__extra .btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 44px;
	padding: 10px 16px;
	border-radius: 10px;
	font-size: 14px;
	font-weight: 600;
	line-height: 1.2;
	white-space: nowrap;
	background: var(--shmp-sunken) !important;
	color: var(--shmp-ink) !important;
	border: 1px solid var(--shmp-line) !important;
}

.sh-mp-strip__identity {
	display: flex;
	align-items: center;
	gap: 14px;
	min-width: 0;
	flex: 0 1 auto;
}

.sh-mp-strip__logo {
	width: 48px;
	height: 48px;
	flex: 0 0 auto;
	border-radius: 10px;
	object-fit: cover;
	border: 1px solid var(--shmp-dark-line);
}

.sh-mp-strip__text { min-width: 0; }

.sh-mp-strip__eyebrow {
	margin: 0 0 2px;
	font-size: 10px;
	font-weight: 700;
	letter-spacing: .09em;
	text-transform: uppercase;
	color: var(--shmp-ink-soft);
}

.sh-mp-strip__title { margin: 0; }

.sh-mp-strip__name {
	margin: 0;
	font-size: 18px;
	font-weight: 800;
	line-height: 1.2;
	color: #fff;
	overflow-wrap: anywhere;
}

.sh-mp-strip__meta {
	margin: 2px 0 0;
	font-size: 13px;
	line-height: 1.3;
	color: var(--shmp-dark-soft);
	overflow-wrap: anywhere;
}

/* Τα στοιχεία επικοινωνίας του χώρου: ήταν στο μπλοκ του theme που κρύψαμε, άρα
 * επιστρέφουν εδώ — δίπλα στο όνομα, μέσα στο `__lead`. Στη δεξιά άκρη
 * διαβάζονταν ως ενέργειες δίπλα στη «Νέα κράτηση», που δεν είναι. */
.sh-mp-strip__links {
	display: flex;
	align-items: center;
	gap: 6px;
	flex-wrap: wrap;
}

.sh-mp-strip .sh-mp-iconlink {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	border-radius: 8px;
	background: transparent;
	border: 1px solid var(--shmp-dark-line);
	color: #a7a5b8 !important;
	font-size: 14px;
	text-decoration: none !important;
}

.sh-mp-strip .sh-mp-iconlink svg { display: block; }

.sh-mp-strip .sh-mp-iconlink:hover {
	background: rgba(255, 255, 255, .06);
	color: #fff !important;
}

.sh-mp-strip__actions {
	display: flex;
	gap: 10px;
	flex: 0 1 auto;
}

.sh-mp-strip .sh-mp-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 40px;
	padding: 10px 18px;
	border: 1px solid transparent;
	border-radius: 10px;
	font-size: 14px;
	font-weight: 600;
	line-height: 1.2;
	text-decoration: none !important;
	white-space: nowrap;
}

.sh-mp-strip .sh-mp-btn--primary {
	background: var(--shmp-primary);
	border-color: var(--shmp-primary);
	color: #fff !important;
}

.sh-mp-strip .sh-mp-btn--primary:hover {
	background: var(--shmp-primary-d);
	border-color: var(--shmp-primary-d);
}

.sh-mp-strip .sh-mp-btn--secondary,
.sh-mp-strip__extra .btn {
	background: transparent !important;
	border-color: var(--shmp-dark-btn) !important;
	color: var(--shmp-dark-ink) !important;
}

.sh-mp-strip .sh-mp-btn--secondary:hover,
.sh-mp-strip__extra .btn:hover { background: rgba(255, 255, 255, .06) !important; }

@container (max-width: 640px) {
	.sh-mp-strip__tools {
		flex: 1 0 100%;
		margin-left: 0;
		justify-content: flex-start;
	}
	.sh-mp-strip__actions { flex: 1 0 100%; }
	.sh-mp-strip .sh-mp-btn { flex: 1 1 0; padding-inline: 10px; }
}


/* ═══════════════════════════════════════════════════════════════════════════
 * ΤΟ ΜΗΝΥΜΑ ΤΟΥ ΧΩΡΟΥ (.announcement)
 * ═══════════════════════════════════════════════════════════════════════════
 * Δεύτερο component που ζει και στις ΔΥΟ οθόνες — γι' αυτό είναι εδώ και όχι
 * στο panel-v2.css / booking-v2.css. Ένα component, μία πηγή: αλλιώς το ίδιο
 * κουτί θα φαινόταν διαφορετικό στην Περιοχή Μέλους και στη σελίδα κρατήσεων.
 *
 * ΕΙΝΑΙ ΔΥΟ ΜΗΝΥΜΑΤΑ, ΟΧΙ ΕΝΑ (content.php:492-513):
 *   `show_custom_booking_page_desc_txt()` → σελίδα κρατήσεων
 *   `show_custom_members_page_desc_txt()` → Περιοχή Μέλους
 * Τα γράφει ο χώρος από το admin, και τυπώνονται με το ίδιο markup:
 * `<div class="container"><div class="announcement">…`.
 *
 * ΤΙ ΕΦΤΑΙΓΕ: το κουτί ήταν σχεδιασμένο να ΕΠΙΠΛΕΕΙ πάνω σε φωτογραφία φόντου —
 * ημιδιάφανο λευκό, στρογγυλεμένο 20px, στο στενό πλάτος του bootstrap
 * `.container`. Στο v2 δεν υπάρχει φωτογραφία: έμενε ένα λευκό κουτάκι να
 * αιωρείται πάνω από τη σκούρα λωρίδα, χωρίς να ανήκει πουθενά.
 *
 * ΤΩΡΑ ΓΙΝΕΤΑΙ ΚΟΜΜΑΤΙ ΤΗΣ ΚΕΦΑΛΙΔΑΣ. Το μήνυμα τυπώνεται ΠΑΝΩ από τη λωρίδα
 * (το κάνει το theme, δεν το μετακινούμε με JS — άλλο ένα κινούμενο μέρος και
 * άλλη μία αναλαμπή). Αντί να το πολεμήσουμε, του δίνουμε το ΙΔΙΟ σκούρο με τη
 * λωρίδα: οι δύο ζώνες διαβάζονται ως μία κεφαλίδα χώρου που τυχαίνει να
 * κουβαλά και ανακοίνωση, αντί για τρεις εναλλασσόμενες λωρίδες χρώματος.
 *
 * ═══ ΕΙΔΙΚΟΤΗΤΑ: ΓΙΑΤΙ `.container > .announcement` ═══
 * Τα στυλ του theme ζουν σε inline `<style>` ΜΕΣΑ στο body (content.php:66-76),
 * δηλαδή έρχονται ΜΕΤΑ από αυτό το αρχείο: σε ίδια ειδικότητα κερδίζουν εκείνα.
 * Ο κανόνας τους είναι `.announcement` (0,1,0)· ο δικός μας (0,2,0) κερδίζει
 * χωρίς βία. Όπου το theme έβαλε `!important` (φόντο, περίγραμμα) χρειάζεται
 * `!important` και εδώ — μόνο εκεί.
 * ═══════════════════════════════════════════════════════════════════════════ */

/* Το περιτύλιγμα είναι bootstrap `.container`: μάζευε το μήνυμα σε στενή στήλη
 * και το κεντράριζε. Το `:has` το πιάνει χωρίς να εξαρτάται από το πού ακριβώς
 * κάθεται στο δέντρο — το markup διαφέρει ανά σελίδα. */
.container:has(> .announcement) {
	max-width: none;
	width: 100%;
	margin: 0;
	padding: 0;
}

.container > .announcement {
	/* Ήταν `display: flex`: κάθε παράγραφος του μηνύματος γινόταν flex item και
	 * σε πολυγραμμο κείμενο στοιχιζόταν οριζόντια. Ροή κειμένου, όχι διάταξη. */
	display: block;
	width: auto;
	max-width: none;
	margin: 0;
	padding: 14px var(--shmp-gutter, 20px);
	background: #1b1f2e !important;
	border: 0 !important;
	border-inline-start: 3px solid var(--shmp-primary, #5b4ee0) !important;
	border-radius: 0;
	color: #c9c7d8;
	font-size: 14px;
	line-height: 1.55;
}

/* Ο πυρήνας του theme δίνει 16px στις παραγράφους — μεγαλύτερο από το όνομα του
 * χώρου δίπλα. Η ανακοίνωση είναι πληροφορία, όχι τίτλος. */
.container > .announcement p {
	margin: 0 0 6px;
	font-size: 14px;
	line-height: 1.55;
	color: inherit;
}

.container > .announcement p:last-child { margin-bottom: 0; }

.container > .announcement a {
	color: #fff;
	text-decoration: underline;
}

/* Τα ίδια 14px gutter με τη λωρίδα σε στενή οθόνη — και ξήλωμα του
 * `margin-left: -15px; width: 90vw` που βάζει το theme κάτω από 480px. */
@media (max-width: 1024px) {
	.container > .announcement {
		margin: 0;
		width: auto;
		padding: 12px 14px;
	}
}