:root {
	--emenu-primary: #0b5c44;
	--emenu-primary-dark: #073d2d;
	--emenu-accent: #d4af37;
	--emenu-bg: #f4f6f5;
	--emenu-card-bg: #ffffff;
	--emenu-text: #1f2a26;
	--emenu-muted: #6b7a75;
}

* { box-sizing: border-box; }

body.emsite-body {
	margin: 0;
	background: var(--emenu-bg);
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
	color: var(--emenu-text);
}

.emsite-frame {
	max-width: 480px;
	margin: 0 auto;
	min-height: 100vh;
	background: var(--emenu-bg);
	box-shadow: 0 0 40px rgba(0,0,0,0.08);
}

/* ---------- Header ---------- */
.emsite-header {
	position: relative;
	background: linear-gradient(160deg, var(--emenu-accent, var(--emenu-primary)), var(--emenu-primary-dark));
	padding: 40px 20px 18px;
	text-align: center;
	color: #fff;
	border-bottom-left-radius: 22px;
	border-bottom-right-radius: 22px;
}

.emsite-header-article { padding: 16px 16px 14px; text-align: left; }

/* 🖼️ Εξώφυλλο Mini Site (mini_site_cover_path) - όταν υπάρχει, το background-image (gradient +
   φωτογραφία) μπαίνει inline από το PHP (βλ. mini-site-home.php/mini-site-article.php) και
   αντικαθιστά το προεπιλεγμένο έγχρωμο gradient background της .emsite-header. Το background-size/
   position εδώ είναι ήδη μέρος του inline style, η κλάση χρησιμεύει μόνο σαν "hook" (π.χ. αν
   χρειαστεί μελλοντικά κάποιο ειδικό στοιχείο ΜΟΝΟ όταν υπάρχει φωτογραφία). */
.emsite-header.emsite-header-has-cover { background-color: var(--emenu-primary-dark); }

.emsite-logo { width: 64px; height: 64px; object-fit: cover; border-radius: 50%; border: 2px solid #fff; margin-bottom: 8px; }
.emsite-business-name { margin: 4px 0 12px; font-size: 20px; font-weight: 800; }

.emsite-lang-switcher { display: flex; justify-content: center; gap: 6px; margin-bottom: 10px; }
.emsite-header-article .emsite-lang-switcher { justify-content: flex-end; margin-bottom: 0; position: absolute; top: 16px; right: 16px; }
.emsite-lang-flag {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: rgba(255,255,255,0.18);
	border: 1px solid rgba(255,255,255,0.35);
	border-radius: 50%;
	width: 30px;
	height: 30px;
	font-size: 15px;
	cursor: pointer;
	line-height: 1;
	text-decoration: none;
}
.emsite-lang-flag.active { background: #fff; }

/* 🌐 Κρύβει το προεπιλεγμένο UI (banner/dropdown/tooltip) του widget Google Translate -
   η μετάφραση εφαρμόζεται αυτόματα μέσω του googtrans cookie (βλ. mini-site-home.php /
   mini-site-article.php), η επιλογή γλώσσας γίνεται ΜΟΝΟ μέσω των δικών μας 🏳️ σημαιών. */
.goog-te-banner-frame.skiptranslate { display: none !important; }
body.emsite-body { top: 0 !important; }
#google_translate_element { display: none !important; }
.goog-te-gadget-icon { display: none !important; }
.goog-tooltip, .goog-tooltip:hover { display: none !important; }
.goog-text-highlight { background: none !important; box-shadow: none !important; }

.emsite-search-row { margin-top: 6px; }
.emsite-search-input {
	width: 100%;
	padding: 11px 14px;
	border-radius: 10px;
	border: none;
	font-size: 14px;
}

.emsite-back-btn {
	color: #fff;
	text-decoration: none;
	font-weight: 700;
	font-size: 15px;
	display: inline-block;
	max-width: 70%;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* ---------- Grid (αρχική οθόνη) ---------- */
.emsite-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 10px;
	padding: 16px;
}

.emsite-tile {
	position: relative;
	display: block;
	border-radius: 14px;
	overflow: hidden;
	aspect-ratio: 1 / 1;
	background: #cfd8d4 center/cover no-repeat;
	box-shadow: 0 2px 8px rgba(0,0,0,0.1);
	text-decoration: none;
}

.emsite-tile-overlay {
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(0,0,0,0.05) 40%, rgba(0,0,0,0.65) 100%);
}

.emsite-tile-label {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	color: #fff;
	font-size: 13.5px;
	font-weight: 700;
	text-align: center;
	padding: 10px 8px;
	line-height: 1.25;
}

/* 📋📅 Μεγάλο, ξεχωριστό εικονίδιο στο κέντρο των action πλακιδίων (QR MENU / Ραντεβού) - ΟΧΙ
   μικρό emoji μέσα στο κείμενο της ετικέτας πια, ώστε να ξεχωρίζουν αμέσως ως εικονίδια-κουμπιά
   και όχι μόνο σαν έγχρωμο τετράγωνο με γράμματα (βλ. .emsite-tile-menu/.emsite-tile-booking παρακάτω). */
.emsite-tile-icon {
	position: absolute;
	top: 44%;
	left: 50%;
	transform: translate(-50%, -50%);
	font-size: 38px;
	line-height: 1;
	filter: drop-shadow(0 2px 5px rgba(0,0,0,0.3));
}

/* 📋 QR MENU / 📅 ΡΑΝΤΕΒΟΥ - πάντα-ή-συχνά ορατά "action" πλακίδια (ΟΧΙ κανονικά άρθρα με
   φωτογραφία) - ΣΚΟΠΙΜΑ έντονα/ζωντανά χρώματα (ανεξάρτητα από το accent_color της
   επιχείρησης) + δικό τους εικονίδιο το καθένα, ώστε να ξεχωρίζουν αμέσως μέσα στο πλέγμα ως
   κουμπιά ενέργειας ("παράγγειλε τώρα" / "κλείσε ραντεβού") - ΟΧΙ σαν ακόμα ένα άρθρο. Ίδιο
   ζεύγος χρωμάτων επαναλαμβάνεται στην καρτέλα πλοήγησης (.emsite-tab-*) και στο κουμπί μέσα
   στο άρθρο (.emsite-article-*-btn) παρακάτω, για συνέπεια σε όλο το Mini Site.
   📅 Ραντεβού: εμφανίζεται ΜΟΝΟ όταν business.bookings_enabled - βλ. templates/mini-site-*.php. */
.emsite-tile-menu { background: linear-gradient(135deg, #ff8a00, #e5322d); }
.emsite-tile-menu .emsite-tile-overlay { background: linear-gradient(180deg, rgba(0,0,0,0.05) 40%, rgba(0,0,0,0.35) 100%); }
.emsite-tile-booking { background: linear-gradient(135deg, #8b2fe0, #d6249f); }
.emsite-tile-booking .emsite-tile-overlay { background: linear-gradient(180deg, rgba(0,0,0,0.05) 40%, rgba(0,0,0,0.35) 100%); }

.emsite-empty-state { text-align: center; color: var(--emenu-muted); padding: 30px 20px; }

/* ---------- Καρτέλα πλοήγησης (μέσα σε άρθρο) ---------- */
.emsite-tabstrip-wrap { background: #fff; border-bottom: 1px solid #e5e9e7; }
.emsite-tabstrip {
	display: flex;
	gap: 4px;
	overflow-x: auto;
	padding: 10px 12px 8px;
	scrollbar-width: none;
}
.emsite-tabstrip::-webkit-scrollbar { display: none; }

.emsite-tab {
	flex-shrink: 0;
	padding: 7px 13px;
	border-radius: 999px;
	background: #f1f3f2;
	color: var(--emenu-text);
	font-size: 12.5px;
	font-weight: 600;
	text-decoration: none;
	white-space: nowrap;
}
.emsite-tab.active { background: var(--emenu-accent, var(--emenu-primary)); color: #fff; font-weight: 800; }
.emsite-tab-menu { background: linear-gradient(135deg, #ff8a00, #e5322d); color: #fff; }
.emsite-tab-booking { background: linear-gradient(135deg, #8b2fe0, #d6249f); color: #fff; }
/* Λίγο μεγαλύτερο εικονίδιο μέσα στην καρτέλα πλοήγησης (δεν υπάρχει χώρος για ξεχωριστό
   κεντραρισμένο εικονίδιο όπως στο πλακίδιο - βλ. .emsite-tile-icon παραπάνω). */
.emsite-tab-icon { font-size: 15px; vertical-align: -2px; }

.emsite-tabstrip-indicator { height: 3px; background: #eef1f0; margin: 0 12px 8px; border-radius: 3px; position: relative; overflow: hidden; }
#emsite-tabstrip-indicator-bar { position: absolute; top: 0; bottom: 0; background: var(--emenu-accent, var(--emenu-primary)); border-radius: 3px; transition: left 0.1s linear; }

/* ---------- Άρθρο ---------- */
.emsite-article { padding: 16px; }
.emsite-article-cover { width: 100%; max-height: 220px; object-fit: cover; border-radius: 14px; margin-bottom: 14px; }
.emsite-article-title { font-size: 20px; font-weight: 800; margin: 0 0 12px; }
.emsite-article-body { font-size: 14.5px; line-height: 1.65; color: var(--emenu-text); }
.emsite-article-body h3 { font-size: 16px; margin: 18px 0 6px; color: var(--emenu-primary); }
.emsite-article-body p { margin: 0 0 10px; }
.emsite-article-body ul { padding-left: 20px; margin: 0 0 10px; }
.emsite-article-body strong { color: var(--emenu-text); }
.emsite-article-body a { color: var(--emenu-primary); }
.emsite-article-body img { max-width: 100%; border-radius: 10px; }

.emsite-article-menu-btn {
	display: block;
	text-align: center;
	background: linear-gradient(135deg, #ff8a00, #e5322d);
	color: #fff;
	text-decoration: none;
	font-weight: 700;
	font-size: 15px;
	padding: 14px;
	border-radius: 12px;
	margin-top: 22px;
	box-shadow: 0 2px 8px rgba(0,0,0,0.12);
}
.emsite-article-menu-btn:hover { opacity: 0.92; }
.emsite-article-booking-btn { background: linear-gradient(135deg, #8b2fe0, #d6249f); margin-top: 10px; }
.emsite-article-btn-icon { font-size: 19px; vertical-align: -3px; }

.emsite-footer {
	text-align: center;
	font-size: 11px;
	color: #a8b3ae;
	padding: 8px 16px 24px;
}
.emsite-footer-logo { width: 14px; height: 14px; vertical-align: middle; margin-right: 4px; }