/**
 * Failed to minify the file using clean-css v5.3.3. Serving the original version.
 * Original file: /gh/valantisha-design/roka24@9.5/ola197.css
 *
 * Do NOT use SRI with dynamically generated files! More information: https://www.jsdelivr.com/using-sri-with-dynamic-files
 */
/*1. ΒΑΣΙΚΟ CSS
   (Γενική Εμφάνιση & Δομή)
   ========================================= */

:root {
  --r: 28px;
  --text: #111;
  --muted: rgba(17, 17, 17, 0.68);
  --accent: #1e6cff;

  /* Μεταβλητές Glassmorphism (τις αφήνουμε εδώ για να υπάρχουν έτοιμες) */
  --shadow: 0 10px 30px rgba(0, 0, 0, 0.12);
  --glass: rgba(255, 255, 255, 0.18);
  --glass2: rgba(255, 255, 255, 0.10);
}

body {
  font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  color: var(--text);
  line-height: 1.7;
}

a {
  color: var(--accent);
  text-decoration: none;
}
a:hover {
  text-decoration: underline;
}

/* --- Τίτλοι & Κείμενα --- */
.post-title,
.post h3,
h1,
h2 {
  letter-spacing: -0.02em;
}

.post-title a {
  color: #a90e0e;
}
.post-title a:hover {
  color: #a90e0e;
  text-decoration: none;
}

.date-header,
.post-timestamp,
.post-comment-link {
  color: var(--muted);
  font-size: 0.92em;
}

/* --- Πρώτο Γράμμα Εφημερίδας (Drop Cap) --- */
.post-body::first-letter {
  float: left;
  font-size: 3.5em;
  line-height: 0.8;
  padding-top: 4px;
  padding-right: 8px;
  font-weight: bold;
  color: #a90e0e;
}

/* --- Μαγική Υπογράμμιση στα Links του κειμένου --- */
.post-body a:not(.jump-link a) {
  position: relative;
  text-decoration: none;
  color: #a90e0e;
  font-weight: 600;
}

.post-body a:not(.jump-link a):after {
  content: '';
  position: absolute;
  width: 100%;
  transform: scaleX(0);
  height: 2px;
  bottom: 0;
  left: 0;
  background-color: #a90e0e;
  transform-origin: bottom right;
  transition: transform 0.3s ease-out;
}

.post-body a:not(.jump-link a):hover::after {
  transform: scaleX(1);
  transform-origin: bottom left;
}

/* --- Εφέ Εικόνων & Κουμπιά --- */
.post-body img {
  transition: transform 0.4s ease;
  border-radius: 8px;
}
.post-body img:hover {
  transform: scale(1.02) translateY(-5px);
  box-shadow: 0 15px 25px rgba(0, 0, 0, 0.15); /* Βαθιά σκιά */
  z-index: 2;
}

/* --- Διαδραστικά Links με "Βελάκι" --- */
.action-link {
  display: inline-flex;
  align-items: center;
  font-weight: 700;
  color: var(--accent);
}

.action-link::after {
  content: '→';
  margin-left: 6px;
  transition: transform 0.3s ease;
}

.action-link:hover::after {
  transform: translateX(6px); /* Το βελάκι φεύγει λίγο δεξιά */
}

/* --- Scrollbar & Επιλογή Κειμένου --- */
::selection {
  background-color: #a90e0e;
  color: #ffffff;
}
::-moz-selection {
  background-color: #a90e0e;
  color: #ffffff;
}

::-webkit-scrollbar {
  width: 10px;
}
::-webkit-scrollbar-track {
  background: #f1f1f1;
}
::-webkit-scrollbar-thumb {
  background: #c1c1c1;
  border-radius: 10px;
}
::-webkit-scrollbar-thumb:hover {
  background: #888;
}

/* --- Animations --- */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* --- Βασικό Footer (Minimal Magazine) --- */
.post-footer {
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif !important;
  text-transform: uppercase !important;
  font-size: 11px !important;
  letter-spacing: 1px !important;
  color: #666666 !important;
}

.post-footer a {
  color: #111111 !important;
  text-decoration: none !important;
  font-weight: 800 !important;
  transition: color 0.3s !important;
}
.post-footer a:hover {
  color: #e74c3c !important;
}

.post-labels a {
  margin-right: 12px !important;
}

.post-share-buttons {
  margin-top: 80px !important;
}
.post-share-buttons a,
.post-share-buttons .goog-inline-block {
  margin-right: 15px !important;
  color: #888888 !important;
}
.post-share-buttons a:hover {
  color: #111111 !important;
}

/* =========================================
   2. GLASSMORPHISM MODULE
   (Αφαίρεσε αυτό το κομμάτι αν θέλεις την απλή μορφή)
   ========================================= */

/* Στρογγυλοποίηση βασικών στοιχείων */
.post,
.widget,
#sidebar-wrapper .widget,
#main-wrapper,
#content-wrapper {
  border-radius: var(--r);
}

/* Εφέ στα Posts */
.post,
.widget {
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: var(--shadow);
  padding: 18px 18px;
}

/* Εφέ στα Μενού / Tabs */
.navbar,
#nav,
.tabs,
#PageList1,
#PageList2 {
  border-radius: 999px;
  padding: 8px 10px;
}

.tabs a,
#PageList1 a,
#PageList2 a,
.navbar a {
  padding: 10px 12px;
  border-radius: 999px;
}

.tabs a:hover,
#PageList1 a:hover,
#PageList2 a:hover,
.navbar a:hover {
  background: rgba(255, 255, 255, 0.22);
  text-decoration: none;
}

/* Ενιαίο Panel Sidebar με Glassmorphism */
#sidebar-wrapper,
#sidebar,
.sidebar {
  background: rgba(255, 255, 255, 0.14);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: var(--r);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.12);
  padding: 14px !important;
}

/* Καθαρισμός εσωτερικών widgets για να φαίνεται το glass του wrapper */
#sidebar-wrapper .widget,
#sidebar .widget,
.sidebar .widget {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 10px 0 !important;
  margin: 0 !important;
  border-radius: 0 !important;
}

#sidebar-wrapper .widget + .widget,
#sidebar .widget + .widget,
.sidebar .widget + .widget {
  border-top: 1px solid rgba(255, 255, 255, 0.22) !important;
  margin-top: 10px !important;
  padding-top: 12px !important;
}

#sidebar-wrapper .widget-title,
#sidebar .widget-title,
.sidebar .widget-title {
  margin: 0 0 8px !important;
  padding: 0 !important;
}

.post:hover {
  transform: translateY(-3px);
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.15);
  transition: all 0.3s ease;
}

/* Αφαίρεση θολούρας από το footer του Blogger */
.Attribution,
#Attribution1 {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

/* =========================================
   MOBILE (768px) — ΕΝΟΠΟΙΗΜΕΝΟ
   (Κρατάει και τα 2 blocks, χωρίς να αλλάζει τίποτα)
   ========================================= */

@media (max-width: 768px) {

  /* =========================================
     MOBILE OPTIMIZATION (Για τέλεια ανάγνωση)
     ========================================= */

  /* 1. Διορθώνουμε το μέγεθος της γραμματοσειράς για να μην είναι μικρό */
  body {
    font-size: 16px !important;
    line-height: 1.6 !important;
    padding: 10px !important;
  }

  /* 2. Κάνουμε το "γυαλί" πιο ελαφρύ για να μην κολλάει το σκρολάρισμα */
  .post,
  .widget,
  #sidebar-wrapper,
  .post-footer {
    backdrop-filter: blur(5px) !important;
    -webkit-backdrop-filter: blur(5px) !important;
    margin: 8px 0 !important;
    padding: 15px !important;
    border-radius: 12px !important;
  }

  /* 3. Το "Πρώτο Γράμμα" (Drop Cap) το μικραίνουμε λίγο για να μην πιάνει όλη την οθόνη */
  .post-body::first-letter {
    font-size: 2.8em !important;
    margin-right: 5px !important;
  }

  /* 4. Οι εικόνες να πιάνουν όλο το πλάτος χωρίς να περισσεύουν */
  .post-body img {
    height: auto !important;
  }

  /* 5. Σημαντικό: Το Sidebar συνήθως πέφτει κάτω.
     Του δίνουμε λίγο αέρα για να μην κολλάει στα άρθρα */
  #sidebar-wrapper {
    margin-top: 20px !important;
    background: rgba(255, 255, 255, 0.05) !important;
  }

  /* 6. Τα κουμπιά και τα links να είναι εύκολα στο πάτημα (Touch Friendly) */
  .jump-link a,
  .post-footer a {
    padding: 12px 20px !important;
    display: block; /* Να πιάνει όλο το πλάτος στο κινητό */
    text-align: center;
  }
}

/* PageList μέσα σε navbar (συχνό στον Blogger) */
#PageList1,
#PageList2,
#PageList1 .widget-content,
#PageList2 .widget-content,
#PageList1 ul,
#PageList2 ul {
  background: transparent !important;
}

/* Post footer: διάφανο + χωρίς περίγραμμα + ελάχιστα κενά */
.post-footer,
.post-footer-line,
.post-footer-line-1,
.post-footer-line-2,
.post-footer-line-3,
.post-share-buttons,
.post-labels {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;

  margin-top: 6px !important; /* μικρό κενό από το κείμενο της ανάρτησης */
  padding-top: 6px !important;
  padding-bottom: 6px !important;
}

/* Αν το theme κρατάει extra padding στο ίδιο το footer */
.post-footer {
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* Μείωσε και το γενικό κενό ανάμεσα στα posts (πάνω/κάτω) */
.post,
.post-outer {
  margin-left: 0 !important; 
  margin-right: 0 !important;
}

/* 1) ΜΗΝ το κρύβεις */
#nav,
.navbar,
#PageList1,
#PageList2,
.tabs {
  display: block !important;
  visibility: visible !important;
}

/* 2) TRUE transparent στο wrapper */
#nav,
.navbar,
.tabs {
  background: transparent !important;
  box-shadow: none !important;
  border: 0 !important;

}

/* 3) ΣΒΗΣΕ ΤΗ ΘΟΛΟΥΡΑ (glass effect) */
#nav,
.navbar,
.tabs,
#nav *,
.navbar *,
.tabs * {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  filter: none !important;
}

h2.date-header {
  display: inline-block;
  background-color: rgba(169, 14, 14, 0.08); /* 8% διαφάνεια στο κόκκινό σου */
  color: #a90e0e;
  padding: 5px 14px;
  border-radius: 20px;
  font-size: 0.9em;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

h2.date-header::before {
  content: '📅'; /* Μπορείς να βάλεις και '•' ή ένα SVG της αρεσκείας σου */
  margin-right: 6px;
  font-size: 1.1em;
  opacity: 0.8;
}

/* =========================================
   WIKIPEDIA GLASS SEARCH BOX (FIXED)
   ========================================= */

.wiki-glass-search {
  display: flex;
  align-items: center;
  background: var(--glass2);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 40px; /* Πιο ομαλή καμπύλη */
  padding: 4px 6px; /* Μειωμένο padding για να μην "φουσκώνει" */
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
  max-width: 100%;
  transition: all 0.3s ease;
  overflow: hidden; /* Εξασφαλίζει ότι τίποτα δεν εξέχει */
}

.wiki-glass-search:focus-within {
  border-color: #a90e0e;
  box-shadow: 0 5px 20px rgba(169, 14, 14, 0.15);
}

.wiki-search-icon {
  font-family: 'Georgia', 'Times New Roman', serif;
  font-size: 18px; /* Ελαφρώς μικρότερο */
  font-weight: bold;
  color: #111;
  padding: 0 10px 0 15px;
  opacity: 0.8;
  flex-shrink: 0; /* Εμποδίζει το "W" να συμπιεστεί */
}

.wiki-search-input {
  flex: 1;
  background: transparent !important;
  border: none !important;
  color: var(--text);
  font-family: 'Inter', sans-serif;
  font-size: 14px; /* Ελαφρώς μικρότερο για καλύτερη αναλογία */
  outline: none !important;
  padding: 8px 5px;
  min-width: 0; /* Αναγκαίο για το flexbox σε μικρές οθόνες */
}

/* Το κουμπί - Εδώ έγινε η κύρια μείωση */
.wiki-search-btn {
  background-color: #2c3e50 !important;
  color: #ffffff !important;
  border: none !important;
  border-radius: 30px !important;
  padding: 6px 16px !important; /* Μειωμένο padding (ήταν 10px 20px) */
  font-size: 13px !important; /* Μικρότερη γραμματοσειρά */
  font-weight: 600;
  font-family: 'Inter', sans-serif;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
  flex-shrink: 0; /* Κρατάει το κουμπί σταθερό */
}

.wiki-search-btn:hover {
  background-color: #a90e0e !important;
  transform: scale(1.02); /* Αντί για translateY για να μην "χτυπάει" στα όρια */
  box-shadow: 0 4px 10px rgba(169, 14, 14, 0.3) !important;
}

.entry-title,
.entry-title a,
h1.post-title,
h2.post-title {
  font-weight: 700 !important;
}

/* FORCE date header to show on mobile + cover more Blogger variants */
@media (max-width: 768px) {

  /* Μην το αφήνεις να κρύβεται από theme rules */
  .date-header,
  h2.date-header,
  .date-outer .date-header,
  .blog-posts .date-header {
    display: inline-block !important;
    visibility: visible !important;
    opacity: 1 !important;
    height: auto !important;
    overflow: visible !important;
  }

  /* Στυλ (ίδιο εφέ) σε ΟΠΟΙΟ element κι αν είναι */
  .date-header,
  h2.date-header {
    background-color: rgba(169, 14, 14, 0.08) !important;
    color: #a90e0e !important;
    padding: 5px 14px !important;
    border-radius: 20px !important;
    font-size: 0.9em !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    margin-top: 10px !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  /* Icon πριν την ημερομηνία (όπου γίνεται) */
  .date-header::before,
  h2.date-header::before {
    font-size: 1.1em;
    opacity: 0.8;
  }
}

#sidebar-wrapper,
#sidebar,
.sidebar {
  margin-left: 0px !important;  /* δοκίμασε 6px, 8px, 12px */
}
/* --- Μοντέρνα Καρτελάκια για τις Κατηγορίες/Ετικέτες --- */
.post-labels a {
  background-color: rgba(30, 108, 255, 0.08) !important; /* Πολύ απαλό μπλε */
  color: var(--accent) !important;
  padding: 4px 12px !important;
  border-radius: 20px !important; /* Οβάλ σχήμα */
  border-bottom: none !important; /* Καταργούμε την παλιά γραμμή */
  font-size: 0.85em !important;
  font-weight: 600 !important;
  transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1) !important;
  display: inline-block;
}
.post-labels a:hover {
  background-color: var(--accent) !important;
  color: #ffffff !important;
  transform: translateY(-3px) scale(1.05); /* Μικρό ανασήκωμα και μεγέθυνση */
  box-shadow: 0 5px 12px rgba(30, 108, 255, 0.3) !important;
}

/* --- Ελαφριά κλίση στα Widgets στο Hover (Διορθωμένο για Blur) --- */
.sidebar .widget {
  transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  
  /* Anti-blur hacks */
  -webkit-font-smoothing: antialiased; 
  backface-visibility: hidden; 
  transform: translateZ(0); 
}

.sidebar .widget:hover {
  transform: translateY(-4px); /* Αφαιρέθηκε το rotate(1deg) για να μην θολώνει το κείμενο */
  box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
  border-color: rgba(169, 14, 14, 0.3);
}

/* --- Εφέ "Μαρκαδόρου" για SOS λέξεις --- */
.sos {
  background: linear-gradient(120deg, rgba(255, 224, 102, 0) 0%, rgba(255, 224, 102, 0.7) 100%);
  background-repeat: no-repeat;
  background-size: 100% 35%; /* Φαίνεται σαν μισή υπογράμμιση αρχικά */
  background-position: 0 90%;
  transition: background-size 0.3s ease-in-out;
  font-weight: bold;
  padding: 0 4px;
  border-radius: 3px;
}
.sos:hover {
  background-size: 100% 100%; /* Γεμίζει όλο το background στο hover */
}
/* --- Παιχνιδιάρικες Λίστες (Σχολικό Στυλ) --- */

.post-body ul li {
  position: relative;
  margin-bottom: 10px;
  transition: transform 0.2s ease;
}
.post-body ul li::before {
  content: '📌'; /* Μπορείς να το αλλάξεις σε 🎓, ✏️, ή 🚀 */
  position: absolute;
  top: 2px;
  font-size: 1.1em;
  transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.post-body ul li:hover {
  transform: translateX(3px); /* Το κείμενο πάει ελάχιστα δεξιά */
}
.post-body ul li:hover::before {
  transform: scale(1.3) rotate(15deg); /* Η πινέζα μεγαλώνει και στρίβει! */
}
/* --- Μπάρα Προόδου Ανάγνωσης (Scroll Progress) --- */
body::before {
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 4px; /* Το πάχος της γραμμής */
  background: linear-gradient(to right, #1e6cff, #a90e0e); /* Ξεκινάει μπλε και καταλήγει στο κόκκινό σου */
  z-index: 9999;
  transform-origin: 0 50%;
  animation: scrollWatch linear;
  animation-timeline: scroll(root block);
}

@keyframes scrollWatch {
  from { transform: scaleX(0); }
  to { transform: scaleX(1); }
}
/* --- Εφέ "Λεξιλογίου" στο κουμπί Πλάγιας Γραφής (I) --- */
.post-body i, 
.post-body em {
  font-style: normal !important; /* Καταργούμε το γέρσιμο των γραμμάτων */
  position: relative;
  color: #111;
  font-weight: 600;
  border-bottom: 2px dotted #1e6cff; /* Μπλε τελίτσες από κάτω */
  cursor: help;
  transition: all 0.3s ease;
}

.post-body i:hover, 
.post-body em:hover {
  color: #1e6cff;
  background: rgba(30, 108, 255, 0.1); /* Απαλό γαλάζιο φόντο στο hover */
  border-radius: 4px;
  padding: 0 3px;
}

.post-body i::after, 
.post-body em::after {
  content: '💡'; /* Εμφανίζεται μια λαμπίτσα */
  position: absolute;
  top: -18px;
  right: -12px;
  font-size: 14px;
  opacity: 0;
  transform: translateY(5px);
  transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.post-body i:hover::after, 
.post-body em:hover::after {
  opacity: 1;
  transform: translateY(0) scale(1.2);
}

.post-body::after {
  /* \2014 είναι η παύλα (em-dash) και \2726 είναι το αστεράκι */
  content: "\2014 \2726 \2014";
  display: block;
  text-align: center;
  margin: 0px 0 8px;
  color: rgba(0,0,0,.35);
  letter-spacing: .25em;
}

.post-body ol li:hover::before {
  transform: scale(1.15) rotate(-10deg); /* Μεγαλώνει και παίρνει κλίση */
  background-color: #a90e0e; /* Αλλάζει στο κόκκινό σου! */
  box-shadow: 0 6px 15px rgba(169, 14, 14, 0.4);
}
.post, .widget {
  border: 1px solid rgba(255, 255, 255, 0.4) !important;
  border-top: 1px solid rgba(255, 255, 255, 0.7) !important; /* Λάμψη στην κορυφή */
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.05)) !important;
}
/* Επιβολή γραμματοσειράς Arial παντού μέσα στην ανάρτηση */
.post-body, 
.post-body *, 
.post-body span, 
.post-body p, 
.post-body div {
 
font-family: Arial, Helvetica, sans-serif !important;
}


/* --- Δημιουργικό Ημερολόγιο (Sidebar) --- */

/* Το κυρίως κουτί */
#calendar-container {
    font-family: Arial, sans-serif !important;
    background: rgba(255, 255, 255, 0.2) !important;
    backdrop-filter: blur(10px);
    border-radius: 15px;
    padding: 0px;
    color: #111;
}

/* Ο μήνας και το έτος */
#monthLabel {
    color: #a90e0e !important; /* Το κόκκινό σου */
    text-transform: capitalize;
}

/* Τα ονόματα των ημερών (Δευ, Τρι κλπ) */
.fc-col-header-cell-cushion {
    font-size: 14px !important;
    text-transform: uppercase;
    color: #555 !important;
    text-decoration: none !important;
}

/* Οι αριθμοί των ημερών */
.fc-daygrid-day-number {
    font-size: 15px !important;
    color: #333 !important;
    text-decoration: none !important;
    padding: 4px !important;
}

/* Η σημερινή ημέρα */
.fc-day-today {
    background: rgba(30, 108, 255, 0.1) !important; /* Απαλό μπλε */
}

.fc-day-today .fc-daygrid-day-number {
    background: #a90e0e; /* Κόκκινο κυκλάκι στη σημερινή ημερομηνία */
    color: white !important;
    border-radius: 50%;
    display: inline-block;
    width: 26px;
    height: 26px;
    line-height: 20px;
    text-align: center;
}

/* Το κυκλάκι (σημαδάκι) κάτω από τις μέρες με αναρτήσεις */
.fc-event {
    background: transparent !important;
    border: none !important;
}

/* Δημιουργικό σημαδάκι: Αντί για απλή βούλα, το κάνουμε να μοιάζει με "σημείωση" */
.fc-event div {
    width: 35px !important;
    height: 5px !important;
    background: #a90e0e !important; /* Κόκκινη βούλα για τις αναρτήσεις */
    box-shadow: 0 0 2px rgba(169, 14, 14, 0.5);
    margin-bottom: 0px !important;
}

/* Αφαίρεση των γραμμών του πίνακα για να φαίνεται πιο "αέρινο" */
.fc-theme-standard td, .fc-theme-standard th {
    border: 1px solid rgba(0,0,0,0.05) !important;
}

.fc-scrollgrid {
    border: none !important;
}

/* --- BLOG ARCHIVE CLEAN LOOK --- */
#BlogArchive1 {
    background: var(--glass) !important;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: var(--r);
    padding: 15px !important;
    box-shadow: var(--shadow);
}

/* Καθαρισμός όλων των λιστών */
#BlogArchive1 ul, 
#BlogArchive1 li {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
    text-indent: 0 !important;
}

/* Τα έτη και οι μήνες (χωρίς γραμμές και τελείες) */
#BlogArchive1 .archivedate {
    padding: 4px 0 !important;
    display: block;
}

/* --- Η ΤΕΛΕΙΑ ΜΟΝΟ ΣΤΟΥΣ ΤΙΤΛΟΥΣ ΤΩΝ ΑΝΑΡΤΗΣΕΩΝ --- */
#BlogArchive1 ul.posts li {
    position: relative;
    padding-left: 20px !important; /* Χώρος για την τελεία */
    margin: 5px 0 !important;
}

#BlogArchive1 ul.posts li::before {
    content: '';
    position: absolute;
    left: 5px;
    top: 7px;
    width: 6px;
    height: 6px;
    background: #a90e0e; /* Το κόκκινό σου */
    border-radius: 50%;
    opacity: 1;
}

/* Στυλ για τα links των αναρτήσεων */
#BlogArchive1 ul.posts li a {
    font-size: 12px !important;
    font-weight: 500 !important;
    line-height: 1.4 !important;
    color: #444 !important;
    display: inline-block;
}

#BlogArchive1 ul.posts li a:hover {
    color: #a90e0e !important;
}

#BlogArchive1 .archivedate a {
    font-size: 14px !important;
    font-weight: 700 !important;
    color: #222 !important;
}

.zippy {
    color: #a90e0e !important;
    margin-right: 5px !important;
}

/* Badge αριθμού */
.post-count {
    font-size: 10px;
    margin-left: 5px;
    color: var(--muted);
}

/* Κρύβουμε τα στοιχεία που προεξέχουν ΜΟΝΟ μέσα στο κεντρικό container */
.body-fauxcolumns, .content-outer, .main-outer {
    overflow-x: hidden !important;
}

html { box-sizing: border-box; }
*, *::before, *::after { box-sizing: inherit; }

.post-body img, .post-body iframe, .post-body video,
.sidebar img, .sidebar iframe, .sidebar video {
  max-width: 100% !important;
}

@media (max-width: 980px){

  /* Πιάσε τα πιο πιθανά wrappers/footer περιοχές που βγάζουν τέτοια λίστα */
  #footer, .footer, #footer-wrapper, #footer-outer,
  #mobile-footer, .mobile-footer, .mobile-footer-wrap,
  .footer-inner, .footer-outer, .footer-wrap,
  .blogger-mobile-footer, .mobile {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 auto !important;
    padding-left: 10px !important;
    padding-right: 10px !important;
    overflow-x: hidden !important;
  }

  /* Οι λίστες links μέσα σε footer να σπάνε γραμμές και να μη “μακραίνουν” δεξιά */
  #footer ul, .footer ul, #mobile-footer ul, .mobile-footer ul {
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
    list-style: none !important;
  }

  #footer li, .footer li, #mobile-footer li, .mobile-footer li {
    width: 100% !important;
    max-width: 100% !important;
    margin: 6px 0 !important;
  }

  #footer a, .footer a, #mobile-footer a, .mobile-footer a {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    word-break: break-word !important;
    overflow-wrap: anywhere !important;
  }
}

@media screen and (min-width: 768px) {
    /* 1. Αναγκάζουμε τα containers να "αγκαλιάζουν" ΠΑΝΤΑ την ψηλή Sidebar */
    .columns, 
    .columns-inner, 
    .main-inner,
    .main-outer {
        display: flow-root !important;
    }

    /* 2. Καθαρίζουμε το τεράστιο κενό και δίνουμε λογικές διαστάσεις */
    .main-inner {
        min-height: 100vh !important; /* Να πιάνει τουλάχιστον το 100% της οθόνης σε ύψος */
        padding-bottom: 50px !important; /* Ένας λογικός "αέρας" 50px πάνω από το Footer */
    }
}

@media (min-width: 1000px) {
.tabs-inner,
.tabs-outer,
#crosscol,
.crosscol-wrapper,
.crosscol-inner,
.crosscol-outer {
  max-width: 100% !important;
  width: calc(100% - 9px) !important; 
  padding-left: 0 !important;
  padding-right: 0 !important;
  margin-left: auto !important;
  margin-right: auto !important;
   box-sizing: border-box !important;
}

#header-wrapper,
.header-outer,
.header-inner,
.Header,
#Header1 {
  /* Παράδειγμα: Αν θες να το μικρύνεις και να το κεντράρεις */
   width: calc(100% - 9px) !important; 
   margin-left: auto !important; 
   margin-right: auto !important;}
}

@media (min-width: 900px) {
/* 1. Απελευθερώνουμε τα "εξωτερικά κουτιά" από τα εργοστασιακά τους όρια */
  .content-wrapper,
  #content-wrapper,
  .content-inner,
  .main-wrapper,
  #main-wrapper {
    max-width: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  .main-inner {
    max-width: 105% !important;
    width: calc(105% - 20px) !important; 
    
    margin-left: -1.5% !important; 
    margin-right: auto !important; 
    box-sizing: border-box !important;
  }
}

@media (max-width: 768px) {
#nav,
  .navbar,
  .tabs {
    margin-top: -6px!important; 
  }
 #crosscol .widget-content {
    margin-left: -11px;
    margin-right: -11px;}
}

@media screen and (min-width: 900px) and (max-width: 1500px) and (pointer: coarse) {
  #nav,
  .navbar,
  .tabs {
    margin-top: 7px !important; 
 margin-bottom: -15px !important; }

body {
 padding-top: 26px !important;
     padding-left: 0px!important;
     padding-right: 0px!important;}

  .content-inner {
    max-width: 97% !important;
    margin-left: auto !important;
    margin-right: auto !important;
}
#header img, .Header img {
    display: block !important;     /* Απαραίτητο για να υπακούσει στα margins */
    max-width: 100% !important;    /* Σιγουρεύει ότι έχει χώρο να κινηθεί */
    width: auto !important;
  }
}

  /* 1) ΚΟΨΙΜΟ ΜΟΝΟ ΠΑΝΩ: τράβα το header προς τα πάνω */
  #header{
    margin-top: 10px !important;   /* αν θες λιγότερο: -10px */
    margin-bottom: 0 !important;
    padding-top: 0 !important;      /* ΜΟΝΟ top */
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  /* 2) ΜΗΝ μηδενίζεις όλο το padding των wrappers (αυτό σου έκοψε το κάδρο) */
  .Header, .header-widget{
    margin: 0 !important;
    /* αφήνουμε τα υπόλοιπα όπως είναι */
  }

  /* 3) ΕΠΑΝΕΦΕΡΕ το “πλαίσιο/αέρα” γύρω από τον τίτλο/εικόνα */
  #Header1 .widget-content,
  #header .header-inner,
  #header .Header-inner{
    padding: 10px 12px 0 !important;  /* πάνω/πλάγια αέρας = πλαίσιο */
    border-radius: 12px !important;
  }

  /* 4) Η εικόνα να κάθεται σωστά χωρίς κενά */
  #header img, .Header img{
    display: block !important;
    margin: 0 auto !important;
  }

/* MOBILE: σήκωσε ΟΛΑ τα στοιχεία μαζί (για να μη φαίνεται “glass” από πίσω) */
@media (max-width: 768px){
  :root{ --lift: 36px; }  /* δοκίμασε 10px, 12px, 16px */

  body{
    position: relative !important;
    top: calc(-1 * var(--lift)) !important;
  }
}

/* 1. Κατάργηση Justify & Καθαρισμός Περιθωρίων Αναρτήσεων */
.post-body {
    text-align: left !important;
    hyphens: none !important;
    word-wrap: break-word;
}

/* 2. Διόρθωση Διαστημάτων Παραγράφων */
.post-body p {
    margin: 0 0 1.2em 0 !important; /* Μειωμένο κάτω περιθώριο */
    line-height: 1.5 !important; 
    max-width: 75ch;
}

/* Αφαίρεση κενού από την τελευταία παράγραφο για να μην προστίθεται στο τέλος της ανάρτησης */
.post-body p:last-child {
    margin-bottom: 0 !important;
}

/* 3. Συμμαζεμένα Blockquotes */
.post-body blockquote {
    font-style: normal !important;
    font-weight: 500;
    border-left: 5px solid #a90e0e !important;
    background: rgba(0, 0, 0, 0.03);
    padding: 15px 20px !important;
    margin: 15px 0 !important; /* Μειωμένο κενό πάνω/κάτω */
}

/* 4. Εικόνες χωρίς περιττά κενά */
.post-body img {
    box-shadow: 0 2px 8px rgba(0,0,0,0.1) !important;
    display: block;
    margin: 10px auto !important; /* Μειωμένο κενό και κεντράρισμα */
}

/* 5. Keyboard Focus */
.post-body a:focus {
    outline: 3px solid #1e6cff !important;
    outline-offset: 2px;
}

@media screen and (max-width: 768px) {
  
  /* 1. Αναγκάζουμε το "κουτί" της κεφαλίδας να σπάσει τους περιορισμούς του πλαισίου */
 .widget.Header {
   
    padding: 7px!important; 
  } 
}

/* Αφαίρεση κενού ανάμεσα στις αναρτήσεις (Post Spacing) */
.post-outer, .post {
    margin-bottom: 15px !important; /* Από 40-50px που είναι συνήθως, το πάμε στα 5px */
    padding-bottom: 5px !important;
}

/* Αφαίρεση κενού από το "more-link" αν υπάρχει */
.jump-link {
    margin-top: 0 !important;
    margin-bottom: -14px !important;
}

/* Αν το θέμα σου έχει διαχωριστική γραμμή ή κενό στο main-wrapper */
.main-inner .post-outer {
    margin-bottom: 5px !important;
}
/* Μείωση απόστασης ανάμεσα στην ημερομηνία και την ανάρτηση */
.date-header, h2.date-header {
    margin-bottom: 9px !important; /* Σχεδόν μηδενίζει το κενό από κάτω */
    padding-bottom: 0 !important;
}

.post-outer {
    margin-top: 0 !important; /* Αφαιρεί το κενό πάνω από την ανάρτηση */
    padding-top: 0 !important;
}


/* =========================================
   SIMPLE MOBILE
   LIFT & GLASS FIX (ΔΟΚΙΜΗ -ΕΚΔΟΣΗ 2)
   ========================================= */
@media screen and (max-width: 1300px) and (pointer: coarse) {
  
  /* 1. ΣΒΗΝΟΥΜΕ ΜΟΝΟ ΤΟ NAVBAR ΤΟΥ BLOGGER (Το "γυαλί" της κορυφής) */
  /* Αφαιρέσαμε το .tabs και το .PageList από εδώ για να μην "σπάνε" τα slides και το μενού */
  #navbar-iframe, .navbar, #navbar {
    display: none !important;
    visibility: hidden !important;
    height: 0 !important;
  }
 

  /* Τραβάει τον τίτλο και το περιεχόμενο προς τα πάνω */
  .content-outer, .main-inner, #header {
    position: relative !important;
    top: -4px !important; /* ΑΛΛΑΞΕ ΑΥΤΟ: π.χ. -30px, -45px για να εξαφανιστεί το φόντο */
  }
}
/* Κενό στην κορυφή ΜΟΝΟ για υπολογιστές (πάνω από 768px και με ποντίκι) */
@media (min-width: 969px) and (pointer: fine) {
 .content {
    margin-top:15px !important; 
  }
}
.post-outer {
  opacity: 0;
  transform: translateY(30px);
  animation: fadeUpModern 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  /* Χωρίς delay για να "πρασινίσει" το PageSpeed */
}
@keyframes fadeUpModern {
  to { opacity: 1; transform: translateY(0); }
}

@keyframes zoomFromDepth {
  to {
    opacity: 1;
    transform: scale(1) translateZ(0);
  }
} /* <--- Αυτή την αγκύλη εννοούσες, σωστά; Κλείνει όλο το animation */

/* ΡΥΘΜΙΣΗ ΑΠΟΚΛΕΙΣΤΙΚΑ ΓΙΑ ΚΙΝΗΤΑ (κάτω από 768px) */
@media screen and (max-width: 768px) {
  .post-outer {
    /* Κατεβάζουμε τον χρόνο από 7.5s σε 1.2s για να είναι πιο "ζωντανό" */
    animation-duration: 1.2s !important;
    
    /* Μειώνουμε και την καθυστέρηση έναρξης */
    animation-delay: 0.1s !important;
    
    /* Προαιρετικά: Μειώνουμε το βάθος (translateZ) για να μην "ζαλίζει" στην μικρή οθόνη */
    transform: scale(0.3) translateZ(-1500px); 
  }
}

/* --- FIXED CALENDAR ICON ΓΙΑ ΚΙΝΗΤΑ --- */
@media screen and (max-width: 768px) {

    .date-header::before, h2.date-header::before {
        content: "" !important;
        display: inline-block !important;
        /* Μικρό και κομψό μέγεθος */
        width: 14px !important;
        height: 14px !important;
        vertical-align: -2px !important;
        margin-right: 6px !important;
        
        /* Καθαρό SVG χωρίς μπερδέματα - Μπλε καπάκι και Γκρι σώμα */
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%231e6cff' d='M19 4h-1V2h-2v2H8V2H6v2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2z'/%3E%3Cpath fill='%23ffffff' d='M5 10h14v10H5z'/%3E%3Cpath fill='%23BDBDBD' d='M7 12h2v2H7zm4 0h2v2h-2zm4 0h2v2h-2zm-8 4h2v2H7zm4 0h2v2h-2zm4 0h2v2h-2z'/%3E%3C/svg%3E") !important;
        background-repeat: no-repeat !important;
        background-size: contain !important;
        background-color: transparent !important;
    }

    /* Μικρή βελτίωση στο ημερολόγιο για να δέσει το γλυκό */
    #calendar-container .fc-day-today .fc-daygrid-day-number {
        background: #a90e0e !important;
        color: #ffffff !important;
        border-radius: 4px !important;
        padding: 1px 4px !important;
    }
}

/* ΤΕΛΙΚΗ ΔΙΟΡΘΩΣΗ: ΑΡΙΘΜΟΙ ΤΕΡΜΑ ΑΡΙΣΤΕΡΑ ΧΩΡΙΣ ΚΕΝΟ */

.post-body ol {
    counter-reset: custom-counter;
    list-style-type: none !important;
    padding-left: 0 !important;   /* Μηδενισμός εσωτερικού κενού */
    margin-left: 0 !important;    /* Μηδενισμός εξωτερικού κενού για να κολλήσει αριστερά */
}

.post-body ol li {
    position: relative !important;
    margin-bottom: 18px !important;
    padding-left: 0px !important; /* Μόνο όσο χώρο χρειάζεται ο κύκλος */
    text-align: left !important;
}

.post-body ol li::before {
    counter-increment: custom-counter;
    content: counter(custom-counter) !important;
    position: absolute !important;
   left: -35px !important;         /* Κλείδωμα στο απόλυτο 0 αριστερά */
    top: 2px !important;
    width: 26px !important;        /* Σταθερό μέγεθος κύκλου */
    height: 26px !important;
    background-color: var(--accent) !important;
    color: #ffffff !important;
    border-radius: 50% !important;
    font-weight: 800 !important;
    font-size: 13px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-shadow: 0 4px 8px rgba(0,0,0,0.1) !important;
}

/* Διόρθωση και για τις απλές λίστες (ul) */
.post-body ul {
    list-style-type: none !important;
    padding-left: 0 !important;
    margin-left: 0 !important;
}

.post-body ul li {
    padding-left: 30px !important;
}

.post-body ul li::before {
    left: 0 !important;
}

/* --- TABLET ONLY CALENDAR FIX (769px - 1024px) --- */
@media screen and (min-width: 769px) and (max-width: 1224px) {
    .date-header::before, h2.date-header::before {
        /* Διώχνει το κείμενο Jul 17 αν έχει ξεμείνει */
        content: "" !important; 
        display: inline-block !important;
        
        /* Μέγεθος και Θέση εικονιδίου */
        width: 22px !important;
        height: 22px !important;
        vertical-align: middle !important;
        margin-right: 8px !important;
        
        /* Το εικονίδιο σε SVG για να φαίνεται πεντακάθαρα στην οθόνη του tablet */
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%231e6cff'%3E%3Cpath d='M19 4h-1V2h-2v2H8V2H6v2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 16H5V10h14v10z'/%3E%3C/svg%3E") !important;
        background-repeat: no-repeat !important;
        background-size: contain !important;
        background-color: transparent !important;
        
        /* Επαναφορά ορατότητας αν κάποιος άλλος κανόνας το έκρυβε */
        visibility: visible !important;
        opacity: 1 !important;
    }
}
/* --- ΑΠΟΛΥΤΟ OVERRIDE: ΚΟΥΜΠΙ ΚΟΙΝΟΠΟΙΗΣΗΣ ΚΙΝΗΤΟΥ --- */
html body #mobile-share-button {
background: transparent !important;
 }

/* ΣΤΥΛ 3: Μίνιμαλ Περίγραμμα (ΝΕΟ & ΑΠΑΛΛΑΓΜΕΝΟ ΑΠΟ ΤΟ BLOGGER) */
html body.mobile #modern-mobile-share a,
html body #modern-mobile-share a {
    display: inline-flex !important;      
    align-items: center !important;       
    justify-content: center !important;   
    line-height: 1 !important;            
    background: transparent !important;
    color: #a90e0e !important;
    font-weight: 800 !important;
    font-size: 16px !important;
    padding: 12px 28px !important;
    border-radius: 50px !important;
    border: 2px solid #a90e0e !important;
    margin-top: -48px !important;         
    text-decoration: none !important;
}

html body.mobile #modern-mobile-share a::before,
html body #modern-mobile-share a::before {
    content: "📤" !important;
    margin-right: 8px !important;
    font-size: 20px !important;
    line-height: 1 !important;
    display: block !important;            
}

html body.mobile #modern-mobile-share a:active,
html body #modern-mobile-share a:active {
    transform: scale(0.94) !important; 
}
/* --- ΒΑΣΙΚΗ ΔΟΜΗ (Για να μην μεγαλώσουν τα κενά) --- */
.post-share-buttons { margin-top: 5px !important; margin-bottom: 0 !important; padding: 0 !important; min-height: 28px !important; line-height: 1 !important; }
.modern-share-container { display: inline-flex; align-items: center; gap: 8px; margin: 0 !important; padding: 0 !important; }
.share-text-label { font-size: 11px; font-weight: 800; color: #888; margin-right: 4px; }
.sh-btn { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; text-decoration: none !important; transition: all 0.3s ease; }
.sh-btn svg { width: 14px; height: 14px; display: block; }

/* --- ΣΤΥΛ 3: MINIMAL OUTLINES --- */
.sh-btn { border-radius: 50%; border: 1.5px solid #ccc; background: transparent; color: #777 !important; }
.sh-btn:hover { transform: scale(1.1); background: #fff; }
.sh-btn:hover.fb { border-color: #1877F2; color: #1877F2 !important; }
.sh-btn:hover.x { border-color: #000000; color: #000000 !important; }
.sh-btn:hover.vi { border-color: #7360F2; color: #7360F2 !important; }
.sh-btn:hover.mail { border-color: #a90e0e; color: #a90e0e !important; }

  @media (min-width: 768px) {
 
      #HTML49 {
    display: none !important;}
 
    #HTML23 {
      display: none !important;
    }

    #HTML6 {
      display: none !important;
    }
 
    #HTML18 {
      display: none !important;
    }

 #HTML17 {
      display: none !important;
}

 #HTML4 {
      display: none !important;
  }

 #HTML21 {
      display: none !important;
  }

#HTML13 {
      display: none !important;
  }

#HTML7 {
      display: none !important;
  }

#HTML24 {
      display: none !important;
  }

#HTML30 {
      display: none !important;
  }
     #HTML36 {
      display: none !important;
    }
 #HTML51 {
      display: none !important;
    }
}
@media (max-width: 767px) {
    #HTML30 {
      display: none !important;
    }
   #HTML19 {
      display: none !important;
    }
  }

body #gt-floating-btn {
    display: none !important;
}
/* 1. Αφαιρεί το κόκκινο φόντο από τα κουμπιά (βελάκια, Αρχική) */
.mobile-link-button {
    background-color: transparent !important;
}

/* Κρύβει εντελώς την υπογραφή "Από το Blogger" */
#Attribution1 {
    display: none !important;
}
/* Κρύβει το "Εγγραφή σε: Αναρτήσεις (Atom)" */
.feed-links, 
.blog-feeds {
    display: none !important;
}

/* 2. Ασφαλής μεγέθυνση για κινητά χωρίς να σπάει το layout */
.mobile-link-button a:link, 
.mobile-link-button a:visited {
    color: #a90e0e !important;
    font-weight: bold !important;
    font-size: 18px !important; /* Μεγαλώνει ικανοποιητικά κείμενο και βελάκια */
    display: inline-flex !important; /* Βοηθάει να στοιχίζονται τέλεια το κείμενο με το βελάκι */
    align-items: center !important;
    padding: 8px 4px !important; /* Μικρότερο, πιο διακριτικό κενό πάνω-κάτω για εύκολο πάτημα */
    box-sizing: border-box !important; /* Εξασφαλίζει ότι το padding δεν μεγαλώνει το συνολικό πλάτος */
    max-width: 100% !important; /* Απαγορεύει στο στοιχείο να βγει εκτός οθόνης */
    white-space: normal !important; /* Αν το κείμενο είναι μεγάλο, θα αλλάξει γραμμή ομαλά αντί να ξεχειλίσει */
    text-decoration: none !important;
}
/* --- ΕΙΔΙΚΗ ΣΤΟΧΕΥΣΗ ΜΟΝΟ ΓΙΑ ΤΑ ΒΕΛΑΚΙΑ --- */
.mobile-link-button a.blog-pager-newer-link,
.mobile-link-button a.blog-pager-older-link {
    font-size: 42px !important; /* Τεράστιο μέγεθος μόνο για τα σύμβολα για να μοιάζουν με κανονικά εικονίδια */
    line-height: 0.6 !important; /* Συμμαζεύει το ύψος τους για να μην χαλάσει η στοίχιση με την Αρχική Σελίδα */
    padding: 0 20px !important; /* Τους δίνει μεγάλο "αέρα" αριστερά-δεξιά για πολύ εύκολο πάτημα με τον αντίχειρα */
}
@media screen and (max-width: 768px) {
    .my-custom-lightbox-prev,
    .my-custom-lightbox-next {
        font-size: 24px !important; /* Εδώ μικραίνεις το μέγεθος στο εικονίδιο */
        padding: 10px !important;   /* Εδώ μικραίνεις το "αόρατο" κουτί γύρω του για να μην πιάνει χώρο */
    }
}

.modern-share-container .sh-btn svg {
    width: 24px;  /* Βάλε εδώ το νούμερο που θέλεις */
    height: 24px; /* Βάλε το ίδιο νούμερο με το width */
}
/* 2. Σιγουρευόμαστε ότι το "κουμπί" αφήνει το εικονίδιο να απλωθεί */
.modern-share-container .sh-btn {
    display: inline-block;
    width: auto ;
    height: auto ;
    line-height: 0; /* Βοηθάει στο να μην υπάρχει κρυφό κενό */
}
/* 2. (Προαιρετικά) Μεγαλώνει την περιοχή/κενό γύρω από τα εικονίδια αν έχουν φόντο */
.modern-share-container .sh-btn {
    padding: 6px; /* Αύξησε το νούμερο αν θέλεις το "κουμπί" να είναι πιο ευρύχωρο */
}


/* MOBILE: πιο συμπαγές menu */
@media (max-width: 600px) {
  nav a,
  .dropdown button {
    line-height: 1.1 !important;
  }
}

/*  RECENT SLIDE */

#recent-slider .slide{
  border-radius: 0 !important;
}

#recent-slider .slide{
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important; /* τίποτα να μη ξεφεύγει */
}

/* Εικόνα: ΟΧΙ crop -> ΟΧΙ zoom */
#recent-slider .slide img{
  width: 100% !important;
  height: 100% !important;
  flex: 1 1 auto !important;
  min-height: 0 !important;
  object-fit: fill !important;   /* δεν κόβει ποτέ */
  object-position: center !important;
  display: block !important;
  border-radius: 0 !important;
}

/* Λεζάντα/τίτλος: μένει μέσα (μέχρι 2 γραμμές) */
#recent-slider .slide-title{
  flex: 0 0 auto !important;
  max-width: 100% !important;
  word-break: break-word !important;
  -webkit-box-orient: vertical !important;
}

/* MENU: πιο “premium” bar */
nav{
  border: 1px solid rgba(0,0,0,.06) !important;
}

/* MENU buttons: φαίνεται στο hover */
nav a, nav .dropdown button{
  transition: background .2s ease, box-shadow .2s ease, transform .15s ease !important;
}
nav a:hover, nav .dropdown button:hover{
  background: rgba(255,255,255,.85) !important;
  box-shadow: 0 8px 18px rgba(0,0,0,.10) !important;
  transform: translateY(-1px) !important;
}

/* Dropdown panel: πιο “καθαρό” */
nav .dropdown-content,
nav .sub-dropdown-content{
  border: 1px solid rgba(0,0,0,.10) !important;
}

/* Dropdown items: divider + πιο έντονο hover */
nav .dropdown-content a + a,
nav .sub-dropdown-content a + a{
  border-top: 1px solid rgba(0,0,0,.06) !important;
}
nav .dropdown-content a:hover,
nav .sub-dropdown-content a:hover{
  color: #a90e0e !important;
  transform: translateX(4px) !important;
}

/* Mobile: sub menu κάτω */
@media (max-width: 600px){
  nav .sub-dropdown-content{ left:0 !important; top:100% !important; }
}

/* SLIDER: λίγο πιο “card” αλλά οι εικόνες ΜΕΝΟΥΝ τεντωμένες */
#recent-slider{
  width: 100% !important;
  max-width: 990px !important;
  height: 420px !important;
  margin: 15px auto !important;
  border-radius: 12px !important;
  box-shadow: 0 12px 26px rgba(0,0,0,.12) !important;
}

#recent-slider .slide-title{
  background: rgba(240,246,250,.96) !important;
  border-top: 1px solid rgba(0,0,0,.06) !important;
}

/* ===== Dropdown πάνω απ’ όλα (ticker από πίσω) — ΟΛΕΣ οι συσκευές ===== */

/* 1) Το menu να δημιουργεί “στρώση” και να είναι πάντα πάνω */
nav{
  position: relative !important;
}

/* 2) Τα dropdown panels να είναι πάνω από ΟΤΙΔΗΠΟΤΕ */
nav .dropdown-content,
nav .sub-dropdown-content{
  position: absolute !important;
  z-index: 2147483647 !important;
}

/* ===== OPTION 3: Category accents ===== */
nav{
  background:#F0F6FA !important;
  border-radius:16px !important;
  box-shadow:0 12px 26px rgba(0,0,0,.10) !important;
}

nav a:hover, .dropdown button:hover{
  filter: saturate(1.05);
}

/* 4 βασικές κατηγορίες με “accent bar” (χωρίς να ουρλιάζει) */
.dropdown.school > button{ border-left:6px solid rgba(169,14,14,.85) !important; color:#a90e0e !important; }
.dropdown.classes > button{ border-left:6px solid rgba(0,120,212,.75) !important; color:#084a7a !important; }
.dropdown.actions > button{ border-left:6px solid rgba(0,150,90,.70) !important; color:#07533a !important; }
.dropdown.useful > button{ border-left:6px solid rgba(255,140,0,.70) !important; color:#7a3f00 !important; }

/* Dropdown panel */
.dropdown-content, .sub-dropdown-content{
  background:#F0F6FA !important;
  box-shadow:0 22px 50px rgba(0,0,0,.18) !important;

  display:block;
  opacity:0; visibility:hidden;
  transform: translateY(10px);
  transition: opacity .16s ease, transform .16s ease, visibility .16s ease;
}
.dropdown:hover > .dropdown-content,
.dropdown:focus-within > .dropdown-content{
  opacity:1; visibility:visible; transform: translateY(0);
}
.sub-dropdown:hover > .sub-dropdown-content,
.sub-dropdown:focus-within > .sub-dropdown-content{
  opacity:1; visibility:visible; transform: translateY(0);
}

.dropdown-content a{
  border-radius:14px !important;
  margin:6px 4px;
  background: rgba(255,255,255,.65);
  border:1px solid rgba(0,0,0,.05);
}
.dropdown-content a:hover{ background: rgba(255,255,255,.95); transform: translateX(3px); }

/* --- Fix: διαφορετικό χρώμα για το 2ο .dropdown.useful (Βιβλιοθήκη) --- */
nav .dropdown.useful:nth-of-type(5) > button{
  border-left: 6px solid rgba(128, 0, 128, .70) !important; /* μωβ */
  color: #4b1b5a !important;
}
/* Επικοινωνία: δικό του accent ώστε να μη φαίνεται “άδειο” */
nav a[href*="blog-page_90"]{
  border-left: 6px solid rgba(90, 60, 160, .70) !important; /* π.χ. μωβ/indigo */
  color: #2f245a !important;
}
/* Αρχική: accent bar + χρώμα */
nav a[href="https://dimperist.blogspot.com/"]{
  border-left: 6px solid rgba(0,120,212,.75) !important; /* μπλε */
  color: #084a7a !important;
}

/* ===== Menu: μικρό “shrink” (λίγο) ===== */
nav{
  padding: 8px 10px !important;
  gap: 8px !important;
}

nav a, .dropdown button{
  padding: 10px 14px !important;   /* από 10x14 */
  font-size: 17px !important;      /* από 17 */
  border-radius: 12px !important; /* από 14 */
}

/* λίγο μικρότερα dropdown items */
.dropdown-content a{
  padding: 9px 11px !important;
  font-size: 16px !important;      /* αν θες 15, πες μου */
  margin: 5px 4px !important;
}

/* panels λίγο πιο “σφιχτά” */
.dropdown-content, .sub-dropdown-content{
  padding: 8px !important;
  border-radius: 14px !important;
}

/* accent bar λίγο πιο λεπτό */
.dropdown.school > button,
.dropdown.classes > button,
.dropdown.actions > button,
.dropdown.useful > button,
nav .dropdown.useful:nth-of-type(5) > button,
nav a[href*="blog-page_90"],
nav a[href="https://dimperist.blogspot.com/"]{
  border-left-width: 5px !important; /* από 6px */
}

/* ===== Dropdown items: παίρνουν χρώμα από την βασική κατηγορία ===== */
/* 1) Ορίζουμε “accent” χρώμα ανά dropdown (με CSS variables) */
.dropdown.school{ --accent: rgba(169,14,14,.85); --accentText:#a90e0e; }
.dropdown.classes{ --accent: rgba(0,120,212,.75); --accentText:#084a7a; }
.dropdown.actions{ --accent: rgba(0,150,90,.70); --accentText:#07533a; }
.dropdown.useful{ --accent: rgba(255,140,0,.70); --accentText:#7a3f00; }

/* 2) Το 2ο useful (Βιβλιοθήκη) να έχει δικό του accent */
nav .dropdown.useful:nth-of-type(5){
  --accent: rgba(128, 0, 128, .70);
  --accentText:#4b1b5a;
}

/* 3) Εφαρμογή του accent σε ΟΛΑ τα links μέσα (και submenus) */
.dropdown .dropdown-content a,
.dropdown .sub-dropdown-content a{
  border-left: 5px solid var(--accent) !important;
  color: var(--accentText) !important;
  background: rgba(255,255,255,.65) !important;
}

/* hover: λίγο πιο έντονο */
.dropdown .dropdown-content a:hover,
.dropdown .sub-dropdown-content a:hover{
  background: rgba(255,255,255,.95) !important;
}

/* 4) Accent στον τίτλο των sub-dropdowns */
.sub-dropdown > a {
  border-left: 5px solid var(--accent) !important;
  color: var(--accentText) !important;
  background: rgba(255, 255, 255, 0.55) !important;
  border-radius: 14px !important;
  margin: 6px 4px !important;
  display: block;
}
.sub-dropdown > a:hover{
  background: rgba(255,255,255,.90) !important;
}

/* Αρχική: διαφορετικό χρώμα από τις Τάξεις */
nav a[href="https://dimperist.blogspot.com/"]{
  border-left: 5px solid rgba(60, 60, 60, .70) !important;  /* γκρι */
  color: #222 !important;
}

/* ===== Mobile shrink (μόνο κινητό) ===== */
@media (max-width: 600px){
  nav{
    padding: 6px 6px !important;
    gap: 6px !important;
    border-radius: 14px !important;
  }

  nav a, .dropdown button{
    border-radius: 11px !important;
  }

  /* πιο μικρό “accent bar” στο κινητό */
  .dropdown.school > button,
  .dropdown.classes > button,
  .dropdown.actions > button,
  .dropdown.useful > button,
  nav .dropdown.useful:nth-of-type(5) > button,
  nav a[href*="blog-page_90"],
  nav a[href="https://dimperist.blogspot.com/"]{
    border-left-width: 4px !important;
  }

  /* dropdown panels πιο στενά */
  .dropdown-content, .sub-dropdown-content{
    padding: 6px !important;
    border-radius: 12px !important;
  }

  /* dropdown links πιο “σφιχτά” */
  .dropdown-content a,
  .sub-dropdown-content a{
    margin: 4px 3px !important;
  }
}

/* Ξεκλείδωμα για να φαίνονται όλες οι σειρές (3+) */
#recent-slider .slide-title {
  -webkit-line-clamp: unset !important; /* Καταργεί το όριο των 2 γραμμών */
  height: auto !important;
  text-overflow: clip !important;
}

/* Η εικόνα προσαρμόζεται αυτόματα στο κενό που μένει */
#recent-slider .slide img {
  flex: 1 1 auto !important; 
  min-height: 0 !important; /* Κρίσιμο: επιτρέπει στην εικόνα να μικρύνει αν η λεζάντα είναι μεγάλη */
  object-fit: fill !important;
}

/* =========================================
   ΣΤΟΧΕΥΜΕΝΗ ΡΥΘΜΙΣΗ ΜΕΓΕΘΟΥΣ ΜΕΝΟΥ
   ========================================= */
:root {
  --menu-pc: 16px;      /* Ρύθμιση για PC (π.χ. 21px, 22px) */
  --menu-mobile: 13px;  /* Ρύθμιση για ΚΙΝΗΤΟ (π.χ. 15px, 16px) */
}

/* 1. ΕΦΑΡΜΟΓΗ ΓΙΑ PC */
@media screen and (min-width: 1024px) {
  nav a, 
  nav .dropdown button {
    font-size: var(--menu-pc) !important;
    padding: 10px 4px !important;
  }
  /* Εσωτερικά μενού PC (λίγο μικρότερα από τα έξω) */
  .dropdown-content a {
    font-size: calc(var(--menu-pc) - 0px) !important;
  }
}

/* 2. ΕΦΑΡΜΟΓΗ ΓΙΑ ΚΙΝΗΤΟ */
@media screen and (max-width: 768px) {
  nav a, 
  nav .dropdown button {
    font-size: var(--menu-mobile) !important;
    padding: 8px 2px !important;
  }
  /* Εσωτερικά μενού Κινητού */
  .dropdown-content a {
    font-size: calc(var(--menu-mobile) - 0px) !important;
  }
}

/* ΔΙΟΡΘΩΣΗ ΑΠΟΚΛΕΙΣΤΙΚΑ ΓΙΑ ΤΟ ΜΕΝΟΥ ΔΡΑΣΕΙΣ ΣΤΟ ΚΙΝΗΤΟ */
@media screen and (max-width: 768px) {
  /* Στοχεύουμε μόνο το πλαίσιο που κατεβαίνει από τις Δράσεις */
  nav .actions .dropdown-content {
    position: absolute !important;
    left: auto !important;
    right: 0 !important; /* ΤΟ ΜΥΣΤΙΚΟ: Ανοίγει προς τα ΑΡΙΣΤΕΡΑ αντί για δεξιά */
    width: 0px !important;
    max-width: 85vw !important;
    box-shadow: -5px 8px 20px rgba(0,0,0,0.2) !important; /* Σκιά από την άλλη πλευρά */
  }

  /* Διόρθωση για τα υπο-μενού μέσα στις Δράσεις (Περισσότερες Δρ.) */
  nav .actions .sub-dropdown-content {
    position: relative !important;
    left: 0 !important;
    top: 0 !important;
    width: 100% !important;
    border-left: 3px solid #a90e0e !important;
  }
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
  }

  @keyframes slideDown {
    from { transform: translate(-50%, -100%); opacity: 0; }
    to { transform: translate(-50%, 0); opacity: 1; }
  }

  /* === ΜΕΓΑΛΕΣ ΟΘΟΝΕΣ (Από 784px και πάνω) === */
  @media screen and (min-width: 784px) {
    body.nav-is-fixed {
      padding-top: 65px !important; 
    }

    .nav-fixed {
      position: fixed !important;
      top: 15px !important;
      left: 50% !important;
      transform: translateX(-50%) !important;
      width: 89% !important; 
      max-width: 1050px !important; 
      z-index: 5 !important; 
      background: rgba(255, 255, 255, 0.9) !important;
      backdrop-filter: blur(0px) !important;
      box-shadow: 0 8px 25px rgba(0,0,0,0.2) !important;
      border-radius: 50px !important;
      animation: slideDown 0.3s ease-out; 
      border: 1px solid rgba(255, 255, 255, 0.3) !important;
    }
  }

  /* === ΚΙΝΗΤΑ ΚΑΙ ΜΙΚΡΑ TABLETS (Έως 783px) === */
  @media screen and (max-width: 783px) {
    body.nav-is-fixed {
      padding-top: 90px !important;
    }

    .nav-fixed {
      position: fixed !important;
      top: 15px !important;
      left: 50% !important;
      transform: translateX(-50%) !important;
      width: 95% !important; 
      z-index: 30 !important; 
      background: rgba(255, 255, 255, 0.9) !important;
      backdrop-filter: blur(0px) !important;
      box-shadow: 0 8px 25px rgba(0,0,0,0.2) !important;
      border-radius: 50px !important;
      animation: slideDown 0.3s ease-out; 
      border: 1px solid rgba(255, 255, 255, 0.3) !important;
    }
  }

  /* =========================================
     ΚΕΝΤΡΙΚΟ MENU (NAV)
  ========================================= */
  nav a, .dropdown button, .dropdown, .selected {
    background: transparent !important;
    background-image: none !important;
    border: none !important;
    box-shadow: none !important;
  }

  /* Ακύρωση του στυλ που επιβάλλει το θέμα Simple στις ενεργές σελίδες */
  .tabs-inner .widget li.selected a, 
  .tabs-inner .widget li.selected {
    background: transparent !important;
    background-image: none !important;
  }

  nav {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    font-family: Arial, sans-serif;
    z-index: 30 !important;
  }

  nav a, .dropdown button {
    color: #000;
    font-weight: bold;
    text-decoration: none;
    cursor: pointer;
  }

  .school button:hover, .classes button:hover, .actions button:hover, .useful button:hover {
    color: #8b0b0b;
  }

  /* === DROPDOWNS === */
  .dropdown { position: relative; display: inline-block; }
  
  .dropdown-content {
    min-width: 220px;
  }

  .dropdown-content a {
    display: block;
    transition: all 0.2s;
  }

  .dropdown-content a:hover {
    font-weight: bold;
  }

  .dropdown:hover > .dropdown-content { display: block; }

  .sub-dropdown { position: relative; }
  
  .sub-dropdown-content {
    left: 100%;
    top: 0;
    min-width: 220px;
  }

  .sub-dropdown:hover .sub-dropdown-content { display: block; }
  
  .disabled {
    color: #999;
    pointer-events: none;
    cursor: not-allowed;
  }

  @media (max-width: 868px) {
    .sub-dropdown-content { left: 0; top: 100%; }
  }

  /* === ΜΕΙΩΣΗ ΚΕΝΩΝ ΓΙΑ ΜΙΚΡΑ ΚΙΝΗΤΑ (Έως 392px) === */
  @media screen and (max-width: 372px) {
    nav {
      gap: 0px !important; 
      padding: 0px 0px !important; 
    }
  }

  /* Ρυθμίσεις για οθόνες έως 1460px με εξαναγκασμένη προτεραιότητα */
  @media screen and (max-width: 1460px) {
    .dropdown-content, 
    .sub-dropdown-content {
      min-width: 240px !important;
      width: auto !important;
    }

    .dropdown-content a, 
    .sub-dropdown-content a {
      font-size: 16px !important;
      padding: 5px 5px !important;
      line-height: 1.4 !important; 
    }

    .sub-dropdown > a {
      display: flex !important;
      justify-content: space-between !important;
      align-items: center !important;
    }

    /* Ρύθμιση για το μενού Τάξεις */
    .classes .dropdown-content {
      right: -70px !important; 
      left: auto !important;
    }

    .classes .sub-dropdown-content {
      right: 100% !important;
      left: auto !important;
    }
  }

  /* =========================================
     SLIDER ΑΝΑΡΤΗΣΕΩΝ
  ========================================= */
  #recent-slider {
    position: relative;
    background: #F0F6FA;
    z-index: 1;
    text-align: center;
    overflow: visible !important;
    left: 0;
  }

  #recent-slider .slide {
    position: absolute;
    inset: 0;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.8s ease, visibility 0.8s;
    justify-content: flex-end;
    text-decoration: none;
  }

  #recent-slider .slide.active {
    opacity: 1;
    visibility: visible;
  }

  .slide img {
    margin: 0 auto;
  }

  .slide-title {
    font-size: 16px;
    font-weight: bold;
    font-family: Arial, sans-serif;
  }

  #recent-slider .no-images {
    padding: 20px;
    text-align: center;
    color: #666;
    font-family: Arial, sans-serif;
  }

  @media screen and (min-width: 869px) and (max-width: 1460px) {
    #recent-slider {
      max-width: 100% !important;
      height: 700px !important;
    }
    .slide-title {
      font-size: 19px;
    }
  }

  @media screen and (min-width: 1461px) {
    #HTML1 { 
      width: 80vw !important; 
      max-width: 945px !important; 
      position: relative !important;
      left: -30px !important; 
      top: 15px !important;
      margin-left: 0 !important;
      margin-right: 0 !important;
      margin-top: 0 !important;
      margin-bottom: 0 !important;
    }
    #recent-slider {
      height: 600px !important;
    }
  }

  /* === ΑΥΣΤΗΡΗ ΡΥΘΜΙΣΗ ΓΙΑ LAPTOPS & ΟΘΟΝΕΣ FULL HD === */
  @media screen and (min-width: 1200px) and (max-width: 1520px) {
    #recent-slider {
      width: 105vw !important;        
      max-width: 840px !important;    
      height: 480px !important;       
      margin: 20px auto !important;   
      left: 0 !important;             
    }
    #recent-slider .slide img {
      width: 100% !important;        
      height: 90% !important;        
      object-fit: cover !important;  
      object-position: center !important; 
      border-radius: 10px 10px 0 0 !important;
    }
    .slide-title {
      max-height: 40px !important;
    }
    .slide-title strong {
      font-size: 20px !important;
    }
  }

  /* === BEΛΑΚΙΑ SLIDER ΚΑΙ PROGRESS BAR === */
  .slider-arrow {
    position: absolute;
    top: 41%; 
    transform: translateY(-50%);
    background: rgba(255, 255, 255, 0.6);
    color: #333;
    border: none;
    font-size: 26px;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    cursor: pointer;
    z-index: 20;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.5s ease, visibility 0.5s, background 0.3s;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 6px rgba(0,0,0,0.3);
  }
  
  .slider-arrow:hover {
    background: rgba(255, 255, 255, 0.95);
    color: #a90e0e; 
  }
  
  .slider-arrow.left { left: 10px; }
  .slider-arrow.right { right: 10px; }

  #recent-slider.show-arrows .slider-arrow {
    opacity: 1;
    visibility: visible;
  }

  #progress-bar {
    position: absolute;
    bottom: 0;
    left: 0;
    height: 2px; 
    background-color: #a90e0e; 
    width: 0%;
    z-index: 25;
    pointer-events: none; 
  }

  .new-badge {
    position: absolute;
    top: 15px;
    right: 15px;
    background: #a90e0e; 
    color: white;
    padding: 5px 12px;
    font-size: 14px;
    font-weight: bold;
    border-radius: 5px;
    z-index: 10;
    font-family: Arial, sans-serif;
    box-shadow: 0 2px 5px rgba(0,0,0,0.3);
    pointer-events: none; 
    animation: pulseNew 2s infinite;
  }

  @keyframes pulseNew {
    0% { opacity: 1; }
    50% { opacity: 0.8; }
    100% { opacity: 1; }
  }

  /* =========================================
     ZOOM ΕΙΚΟΝΙΔΙΟ & LIGHTBOX
  ========================================= */
  .zoom-icon {
    position: absolute;
    bottom: 45px; 
    right: 15px;
    background: rgba(0, 0, 0, 0.6);
    color: #fff;
    border-radius: 50%;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    cursor: pointer;
    z-index: 20;
    box-shadow: 0 2px 8px rgba(0,0,0,0.4);
    transition: all 0.3s ease;
    line-height: 1;
    font-family: "Segoe UI Symbol", "Apple Color Emoji", "Arial", sans-serif;
    padding-left: 2px; 
  }

  .zoom-icon:hover {
    background: #a90e0e; 
    transform: scale(1.1);
  }

#custom-lightbox {
    display: none;
    position: fixed;
    top: 0; left: 0; width: 100vw; 
    height: 100vh; /* Παραμένει ως fallback για πάρα πολύ παλιά κινητά (προ του 2018) */
    height: 100dvh; /* ΝΕΟ: Δυναμικό ύψος που αφαιρεί την μπάρα διευθύνσεων! */
    background: rgba(0, 0, 0, 0.92);
    z-index: 999999;
    align-items: center;
    justify-content: center;
    flex-direction: column;
  }

  #custom-lightbox.active {
    display: flex;
  }

  #lightbox-img {
    max-width: 90vw;
    max-height: 80vh;
    border-radius: 8px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.6);
    object-fit: contain;
  }

  .lightbox-close {
    position: absolute;
    top: 20px; right: 30px;
    font-size: 50px; color: #fff;
    cursor: pointer;
    z-index: 100000;
    transition: color 0.3s;
  }
  .lightbox-close:hover { color: #a90e0e; }

  .lightbox-prev, .lightbox-next {
    position: absolute;
    top: 50%; transform: translateY(-50%);
    font-size: 40px; color: #fff;
    background: rgba(0,0,0,0.4);
    border: none; padding: 10px 20px;
    cursor: pointer;
    z-index: 100000;
    border-radius: 5px;
    transition: background 0.3s;
  }
  .lightbox-prev:hover, .lightbox-next:hover { background: rgba(169, 14, 14, 0.8); }
  .lightbox-prev { left: 20px; }
  .lightbox-next { right: 20px; }

 .lightbox-counter {
    position: absolute;
    bottom: 95px; /* ⬅️ Η ΔΙΟΡΘΩΣΗ: Το σηκώνουμε πάνω από τα thumbnails! */
    color: #fff;
    font-size: 16px; /* Ελαφρώς πιο κομψό μέγεθος, πριν ήταν 18px */
    font-weight: bold;
    font-family: Arial, sans-serif;
    background: rgba(0, 0, 0, 0.7); /* Λίγο πιο σκούρο για να διαβάζεται πιο καθαρά */
    padding: 6px 16px;
    border-radius: 15px;
    z-index: 100000;
    pointer-events: none; /* ⬅️ Προστασία: Να μην εμποδίζει το ποντίκι αν πέσει πάνω σε εικόνα */
  }

  #lightbox-video {
    display: none; 
    max-width: 90vw;
    width: 800px;
    height: 450px;
    max-height: 80vh;
    border-radius: 8px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.6);
    z-index: 10000;
  }

  /* === ΚΟΥΜΠΙ ΛΗΨΗΣ & ΜΙΚΡΟΓΡΑΦΙΕΣ === */
  #lightbox-download {
    position: absolute;
    top: 25px;
    left: 30px;
    font-size: 38px;
    color: #fff;
    text-decoration: none;
    z-index: 100000;
    transition: transform 0.3s ease;
  }
  
  #lightbox-download:hover {
    transform: scale(1.15);
  }

  .lightbox-thumbnails {
    position: absolute;
    bottom: 15px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 10px;
    max-width: 90vw;
    overflow-x: auto;
    padding: 5px;
    z-index: 100000;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    scrollbar-color: #a90e0e transparent;
  }
  
  .lightbox-thumbnails::-webkit-scrollbar {
    height: 6px;
  }
  
  .lightbox-thumbnails::-webkit-scrollbar-thumb {
    background: #a90e0e;
    border-radius: 10px;
  }
  
  .thumb-img {
    width: 60px;
    height: 60px;
    object-fit: cover;
    border-radius: 6px;
    cursor: pointer;
    opacity: 0.5;
    border: 2px solid transparent;
    transition: all 0.3s;
    flex-shrink: 0;
  }
  
  .thumb-img.active {
    opacity: 1;
    border-color: #a90e0e;
    transform: scale(1.1);
  }

  .my-custom-lightbox-thumbnails {
    position: relative !important;
    margin-top: auto !important;    
    margin-bottom: 10px !important; 
    z-index: 10 !important;         
    display: flex !important;
    justify-content: center !important;
  }

  #custom-lightbox img {
    max-width: 100vw;
    max-height: 60vh !important; 
    object-fit: contain;
    margin-bottom: 40px !important; 
  }

  /* =========================================
     ΣΥΜΠΥΚΝΩΜΕΝΟΣ ΤΙΤΛΟΣ ΚΑΙ ΑΝΑΓΝΩΣΤΗΣ
  ========================================= */
  .slide-title {
    display: block !important;
    position: relative !important;
    background: #F0F6FA !important;
    color: #a90e0e;
    padding: 0px 8px !important; 
    width: 100%;
    max-height: 35px; 
    transition: max-height 0.4s ease-in-out !important;
    overflow: hidden;
    z-index: 10;
    text-align: center !important;
    border-radius: 0 0 10px 10px;
    box-sizing: border-box;
  }

  .slide-title strong {
    display: block !important;
    font-size: 16px;
    font-weight: 600;
    line-height: 1.1 !important;
    margin: 0 !important;
    padding: 0px 0 !important; 
  }

  .slide:hover .slide-title {
    max-height: 250px !important;
  }

  /* === ΕΞΥΠΝΟΣ ΑΝΑΓΝΩΣΤΗΣ (SMART EXPAND) === */
  .slide-desc-container {
    display: none;
    text-align: left;
    margin-top: 0px; 
    margin-bottom: 2px;
    align-items: center; 
    justify-content: space-between; 
    width: 100%;
  }

  .slide:hover .slide-desc-container {
    display: flex !important; 
  }

  .slide-desc {
    display: inline-block !important; 
    font-size: 13.5px !important; 
    color: #333 !important;
    font-weight: normal !important;
    line-height: 1.25 !important;
    margin: 0 !important;
    padding: 0 !important;
    flex-grow: 1; 
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .slide-desc .fake-link {
    color: #a90e0e !important;
    text-decoration: underline !important;
    font-weight: bold;
    pointer-events: none !important; 
  }

  .snippet-pagination {
    display: inline-flex !important;
    align-items: center;
    gap: 3px;
    margin-left: 5px; 
    margin-right: 1px;  
    flex-shrink: 0;    
  }

  .snippet-btn {
    background: #a90e0e;
    color: white;
    border: none;
    border-radius: 4px;
    width: 26px;
    height: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 11px;
    transition: background 0.2s;
    pointer-events: auto;
  }

  .snippet-btn:hover { background: #8b0b0b; }
  
  .snippet-btn.disabled {
    background: #ccc;
    cursor: not-allowed;
  }

  /* Ειδική ρύθμιση μόνο για μεγάλες οθόνες (> 900px) */
  @media screen and (min-width: 901px) {
    .slide:hover .slide-title {
      max-height: 450px !important; 
    }
    .slide-title strong {
      font-size: 18px !important;
      margin-bottom: 5px !important;
    }
    .slide-desc-container {
      position: relative !important;
      display: none !important; 
    }
    .slide:hover .slide-desc-container {
      display: block !important;
    }
    .slide-desc {
      font-size: 16px !important; 
      line-height: 1.4 !important; 
      padding: 2px 2px !important;
      padding-right: 70px !important; 
      display: block !important;
    }
    .snippet-pagination {
      position: absolute !important;
      bottom: 5px !important;
      right: 5px !important;
      margin: 0 !important;
      z-index: 15;
    }
  }

  /* =========================================
     FLOATING REACTIONS
  ========================================= */
  .floating-reactions {
    position: absolute;
    right: 0px; 
    top: 60%; 
    transform: translateY(-50%);
    display: flex;
    flex-direction: column;
    gap: 4px; 
    z-index: 25;
    background: transparent;
    padding: 4px 2px;
    border-radius: 6px 0 0 6px; 
  }

  .floating-btn {
    background: transparent;
    border: none;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    color: #111;
    font-family: Arial, sans-serif;
    font-weight: bold;
    font-size: 9px; 
    transition: transform 0.2s;
    pointer-events: auto; 
  }

  .floating-btn span:first-child {
    font-size: 20px; 
    margin-bottom: -1px; 
  }

  .floating-btn:hover {
    transform: scale(1.2); 
  }

  .floating-reactions.voted .floating-btn,
  .floating-reactions.is-voting .floating-btn {
    opacity: 0.5;
    pointer-events: none !important;
  }

  @media screen and (min-width: 1900px) {
    .floating-reactions {
      top: 65% !important;
      gap: 5px; 
      right: 5px; 
    }
    .floating-btn span:first-child {
      font-size: 24px !important; 
    }
    .floating-btn {
      font-size: 14px !important; 
    }
  }

  @media screen and (min-width: 1000px) and (max-width: 1899px) {
    .floating-reactions {
      top: 65% !important;
      gap: 5px; 
      right: 5px; 
    }
    .floating-btn span:first-child {
      font-size: 34px !important; 
    }
    .floating-btn {
      font-size: 14px !important; 
    }
  }

  @media (max-width: 1468px) {
    .floating-reactions.hidden-reactions {
      opacity: 0 !important;
      visibility: hidden !important;
      transition: opacity 0.5s ease, visibility 0.5s !important;
      pointer-events: none !important;
    }
    .floating-reactions {
      transition: opacity 0.5s ease, visibility 0.5s !important;
    }
  }

  /* =========================================
     MEGA MENU
  ========================================= */
  .mega-content {
    width: 600px !important; 
    display: flex !important;
    flex-direction: row;
    padding: 15px !important;
    left: 0 !important; 
    border: 1px solid #dcdcdc !important;
    box-shadow: 0 10px 20px rgba(0,0,0,0.15) !important;
    border-radius: 0 0 12px 12px !important;
  }

  .mega-column {
    flex: 1;
    padding: 0 10px;
  }

  .mega-title {
    font-weight: bold;
    color: #a90e0e;
    display: block;
    padding: 5px 0;
    border-bottom: 1px solid #ddd;
    margin-bottom: 5px;
  }

  /* Το μενού "Τάξεις" παραμένει ως είχε */
.classes .mega-content {
  width: 360px !important;
  min-width: 200px !important;
  max-width: 370px !important;
}

/* Το νέο, μεγαλύτερο μενού "Χρήσιμα" */
.useful .mega-content {
  width: 380px !important;      /* Το νέο σου πλάτος */
  min-width: 200px !important;
  max-width: 380px !important;  /* ΣΗΜΑΝΤΙΚΟ: Αύξησε το max-width για να επιτρέψει την αλλαγή */
}

  /* =========================================
     MOBILE & TABLET FIXES (Max-width 868px)
  ========================================= */
  @media screen and (max-width: 868px) {
    #recent-slider {
      max-width: 100% !important;
      height: 460px !important;
      margin: 0 auto !important;
      padding: 0 !important;
      left: 0;
    }

    #recent-slider .slide img {
      flex: 1 1 auto !important; 
      height: 1px !important;
      width: 100% !important;
      object-fit: fill !important; 
      border-radius: 0 !important; 
      margin: 0 !important;
    }

    #recent-slider .slide {
      padding: 8px 0 0 0 !important;
      justify-content: flex-end !important; 
    }

    .slide-title {
      font-size: 15px;
      margin-top: 0 !important;
      margin-bottom: 0 !important; 
      padding: 2px 0 0 0 !important;
      line-height: 1.2 !important;
      width: 100%; 
      box-sizing: border-box; 
      pointer-events: auto !important; 
      cursor: pointer; 
      max-height: 35px; 
    }

    .slide:active .slide-title, 
    .slide:focus .slide-title,
    .slide:hover .slide-title { 
      max-height: 250px !important; 
    }
    
    .slide:active .slide-desc-container,
    .slide:focus .slide-desc-container,
    .slide:hover .slide-desc-container { 
      display: flex !important; 
      align-items: center;
      justify-content: space-between;
      width: 100%;
    }

    .slide-desc {
      flex: 1; 
      text-align: left;
    }

    .snippet-pagination {
      margin: 0 0 0 1px !important; 
      padding: 0 !important;
      gap: 3px !important; 
      flex-shrink: 0; 
    }
    
    .snippet-btn {
      width: 22px !important; 
      height: 18px !important; 
      padding: 0 !important;
      margin: 0 !important;
      font-size: 9px !important;
    }

    .slider-arrow {
      width: 30px;
      height: 30px;
      font-size: 14px;
      top: 40%;
    }
    .slider-arrow.left { left: 0px !important; }
    .slider-arrow.right { right: 0px !important; }
    
    .zoom-icon {
      right: 0px !important;  
      bottom: 57px !important; 
      width: 35px !important;  
      height: 35px !important;
      font-size: 20px !important;
    }

    .mega-content {
      flex-direction: column;
      width: 100% !important;
    }

    .classes .mega-content {
      position: absolute !important;
      top: 100% !important;
      margin: 5px 0 0 0 !important; 
      transform: none !important;
    }

    .useful .mega-content {
      position: absolute !important;
      top: 100% !important;
      left: -15px !important;    
      right: auto !important;    
      width: 100px !important;
      margin: 5px 0 0 0 !important; 
      transform: none !important;
    }


    /* Στοχεύουμε την κλάση classes */
    .classes .mega-content {
      right: -65px !important;  
      left: auto !important;  
      width: auto !important; 
      max-width: 300px !important; 
    }
    
    .classes {
      position: relative !important;
    }

    /* Ελεγχόμενο Cover (Slider Images) */
    #recent-slider .slide:not(.pinned-contain) img {
      object-fit: fill !important; 
      width: 120% !important; 
      height: 100% !important;
      max-width: none !important; 
      margin-left: -10% !important; 
    }

    #recent-slider .slide.pinned-contain img {
      object-fit: fill !important; 
      width: 100% !important;      
      height: 100% !important;     
      max-width: 100% !important;
      margin-left: 0 !important;   
    }

    .floating-reactions {
      width: max-content !important;
      min-width: auto !important; 
      right: 5px !important;
      left: auto !important;
      padding: 6px 3px !important; 
      background: rgba(0, 0, 0, 0.5) !important; 
      border-radius: 10px !important;
      display: flex !important;
      flex-direction: column !important;
      align-items: center !important;
      gap: 8px !important;
    }

    .floating-reactions .floating-btn {
      width: auto !important;
      margin: 0 !important;
      padding: 0 !important;
      background: none !important;
      border: none !important;
    }

    .floating-reactions .floating-btn span:first-child {
      font-size: 20px !important; 
      display: block !important;
      line-height: 1 !important;
    }

    .floating-reactions .floating-btn span:last-child {
      font-size: 9px !important;
      color: #ffffff !important;
      margin-top: -2px !important;
    }
  }

  /* Ρύθμιση για τα βελάκια του Lightbox στο κινητό */
  @media screen and (max-width: 768px) {
    .lightbox-prev, .lightbox-next {
      font-size: 22px !important;    
      padding: 8px 12px !important;  
      background: rgba(0, 0, 0, 0.4) !important; 
      border-radius: 50% !important; 
      width: 45px;
      height: 45px;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    
    .lightbox-prev { left: 10px !important; }
    .lightbox-next { right: 10px !important; }

    .lightbox-close {
      top: 15px;
      right: 20px;
      font-size: 40px !important; 
    }

    .lightbox-counter {
      font-size: 14px !important;
      bottom: 85px !important; /* Εδώ είχες ένα δεύτερο rule πιο κάτω, το μαζέψαμε */
    }

    #lightbox-download { top: 15px; left: 15px; font-size: 32px; }
    .lightbox-thumbnails { 
    /* Σηκώνουμε τα thumbnails ελαφρώς πιο πάνω και τα προστατεύουμε από το κάτω μέρος (safe area) του κινητού */
    bottom: calc(15px + env(safe-area-inset-bottom, 0px)) !important; 
    max-width: 95vw; 
  }
    .thumb-img { width: 50px; height: 50px; }
  }

  /* === ΔΙΑΦΟΡΕΣ ΡΥΘΜΙΣΕΙΣ (Touch, Lightbox Fixes, κλπ) === */
  @media (hover: none) {
    nav a:hover, .dropdown button:hover, .dropdown-content a:hover, .slide:hover {
      background: transparent !important;
      transition: none !important;
    }
  }

  .nav-hidden-active {
    background: transparent !important; 
    box-shadow: none !important;        
    border: none !important;            
    transition: all 0.3s ease-in-out;
  }

  .nav-hidden-active > a, 
  .nav-hidden-active > .dropdown > button {
    opacity: 0 !important;
    pointer-events: none !important;
  }

  .nav-hidden-active .dropdown:hover .dropdown-content {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
  }

body.lb-active {
    zoom: 1 !important;
    -webkit-zoom: 1 !important;
    transform: none !important;
    -webkit-transform: none !important;
    -moz-transform: none !important;
  }

  body.lb-active #custom-lightbox {
    transform: none !important;
    zoom: 1 !important;
  }

  /* Ειδική ρύθμιση για tablet με οθόνη αφής (landscape) */
  @media screen and (min-width: 768px) and (max-width: 1300px) and (orientation: landscape) and (pointer: coarse) {
    body.lb-active #custom-lightbox {
      position: fixed !important;
      top: 0 !important;
      left: 0 !important;
      width: 100% !important;
      height: 100% !important;
      display: block !important;
      transform: none !important;
    }

    #custom-lightbox img {
      position: relative !important;
      top: 70px !important;
      left: 50% !important;
      transform: translateX(-50%) !important;
      max-width: 100vw !important; 
      max-height: 90vh !important; 
      width: auto !important;
      height: auto !important;
      object-fit: contain !important;
      margin-bottom: 10px !important;
      display: block !important;
    }

    #custom-lightbox .thumbnail-wrapper img,
    #custom-lightbox [class*="thumb"] img,
    #custom-lightbox img[class*="thumb"],
    .thumbnail-wrapper img {
      width: 75px !important;  
      height: 65px !important; 
      min-width: 35px !important;
      min-height: 25px !important;
      position: static !important;
      transform: none !important;
      display: inline-block !important;
      margin: 2px !important;
      border: 1px solid white !important;
      object-fit: cover !important;
      opacity: 1 !important;
      visibility: visible !important;
    }

    .thumbnail-wrapper, 
    [class*="thumb"] {
      display: block !important; 
      text-align: center !important;
      margin-top: 5px !important;
      height: auto !important;
      min-height: 30px !important;
      width: 100% !important;
    }
  }

  .lb-hidden {
    opacity: 0 !important;
    visibility: hidden;
    transition: opacity 0.5s ease, visibility 0.5s;
  }

  .lightbox-prev, .lightbox-next, .lightbox-close, .lightbox-counter {
    transition: opacity 0.3s ease;
    opacity: 1;
  }

  /* === ΔΙΟΡΘΩΣΗ ΒΙΝΤΕΟ ΣΤΟ LIGHTBOX (ΟΡΙΖΟΝΤΙΑ ΘΕΣΗ) === */
  #custom-lightbox img[style*="display: none"] {
    display: none !important;
  }

  #custom-lightbox iframe[style*="display: none"] {
    display: none !important;
  }

  @media screen and (max-width: 1300px) and (orientation: landscape) and (pointer: coarse) {
    #custom-lightbox iframe#lightbox-video {
      position: absolute !important;
      top: 50% !important;
      left: 50% !important;
      transform: translate(-50%, -50%) !important;
      width: 80vw !important;
      height: 75vh !important;
      margin: 0 !important;
      max-width: 900px !important;
    }
    
    #custom-lightbox iframe#lightbox-video[style*="display: none"] {
      display: none !important;
    }
  }
/* === ΔΙΟΡΘΩΣΗ ΓΙΑ ΤΑ THUMBNAILS (ΑΝΑΒΑΘΜΙΣΜΕΝΟΣ ΚΩΔΙΚΑΣ / TABLET LANDSCAPE) === */
@media screen and (min-width: 768px) and (max-width: 1300px) and (orientation: landscape) and (pointer: coarse) {
  
  /* Σταθεροποιούμε το container στο κάτω μέρος */
  .lightbox-thumbnails {
    display: flex !important;
    flex-direction: row !important;
    justify-content: center !important;
    position: absolute !important;
    bottom: 15px !important;
    top: auto !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    width: 90vw !important;
    z-index: 100000 !important;
  }

  /* Ακυρώνουμε το λάθος πλάτος (100%) από τον παλιό κανόνα */
  #custom-lightbox button.thumb-img {
    display: inline-block !important;
    width: 75px !important;
    height: 65px !important;
    margin: 0 5px !important;
    padding: 0 !important;
    min-height: auto !important;
    flex: 0 0 auto !important;
    background: transparent !important;
  }

  /* Προσαρμόζουμε την εικόνα μέσα στο κουμπί */
  #custom-lightbox button.thumb-img img {
    width: 100% !important;
    height: 100% !important;
    margin: 0 !important;
    position: static !important;
    object-fit: cover !important;
    display: block !important;
  }
}


@media screen and (min-width: 1000px) and (pointer: fine)  {

#HTML1 { 
  width: 100% !important; 
  max-width: 945px !important; /* Η όποιο μέγιστο πλάτος θέλεις */
  position: relative !important;
  left: 0 !important;                  /* Αλλαγή από -30px σε 0 */
  margin: 0 auto !important;           /* Αυτόματο κεντράρισμα */
}

#HTML1, 
#recent-slider {
  width: 100% !important;
  max-width: 100% !important; /* Καταργεί τα 840px / 945px */
}
  #recent-slider {
    width: 100% !important;
    max-width: 100% !important;
  }

  #recent-slider .slide {
    width: 100% !important;
    max-width: 100% !important;
  }

  #recent-slider .slide img {
    width: 100% !important;
    max-width: 100% !important; 
    object-fit: fill !important;   
  }
}

@media screen and (min-width: 800px){
  nav {
    gap: 17px !important; /* Αυξάνει ΜΟΝΟ την απόσταση μεταξύ των κουμπιών (το αρχικό ήταν 2px) */
  }
/* Διορθώθηκε το &gt; σε > */
  nav > a, 
  nav div.dropdown > button, 
  nav .mega-menu > button,
  #HTML1 nav button { 
    font-size: 19px !important; 
  }
    
@supports (-moz-appearance: none) {
  nav {
    gap: 14px !important;
  }
}
}
  
/* === ΚΑΝΟΝΑΣ ΜΟΝΟ ΓΙΑ TABLET (Οθόνες Αφής από 800px έως 1800px) === */
@media screen and (min-width: 900px) and (max-width: 1500px) and (pointer: coarse) {
  nav {
    gap: 1px !important; 
  }

  /* Παράδειγμα 2: Αλλαγή στο μέγεθος των γραμμάτων των βασικών κουμπιών */
  nav > a, 
  nav div.dropdown > button, 
  nav .mega-menu > button,
  #HTML1 nav button { 
    font-size: 18px !important; 
  }
}
/* --- EMOJI FOUNTAIN EFFECT --- */
.floating-btn { position: relative; overflow: visible !important; }
.reaction-particle {
  position: absolute;
  bottom: 25px;
  font-size: 16px;
  pointer-events: none;
  z-index: 100;
  animation: floatEmojiUp 1.2s cubic-bezier(0.25, 1, 0.5, 1) forwards;
}
@keyframes floatEmojiUp {
  0% { transform: translateY(0) scale(0.5) rotate(0deg); opacity: 1; }
  /* Αυξήσαμε την απόσταση από -70px σε -130px */
  100% { transform: translateY(-130px) scale(1.5) rotate(25deg); opacity: 0; } 
}
/* 1. Βεβαιώσου ότι το γονικό κουτί (slide) κρύβει την εικόνα που περισσεύει */
#recent-slider .slide {
  overflow: hidden; 
}

/* 2. Προετοιμασία της εικόνας (Ομαλότητα - Anti-jittering) */
#recent-slider .slide img {
  will-change: transform;
  backface-visibility: hidden; /* Αποτρέπει το τρέμουλο κατά την κίνηση */
  transform-origin: center; /* Εδώ μπορείς να βάλεις π.χ. 'top right' */
}

#recent-slider .slide.active img {
  /* 6.5s linear: Σταθερή ταχύτητα που δεν σταματάει/παγώνει ποτέ την ώρα της αλλαγής */
  animation: kenBurnsZoom 6.5s linear forwards; 
}

@keyframes kenBurnsZoom {
  0% { transform: scale(1); }
  /* Στοχεύουμε στο 1.08, ώστε στα 5 δευτερόλεπτα (όταν αλλάξει το slide) να φαίνεται σαν 1.06 */
  100% { transform: scale(1.08); } 
}


/* =========================================
     ΑΝΕΞΑΡΤΗΤΟ TOP NEWS TICKER (ΤΕΛΙΚΗ ΜΟΡΦΗ ΜΕ ΕΙΣΟΔΟ ΑΠΟ ΔΕΞΙΑ)
  ========================================= */
  #unique-top-ticker-outer {
    margin-top: -20px !important; 
    margin-bottom: -8px !important;
    margin-left: auto !important;
    margin-right: auto !important;
      
    width: 95% !important;
    max-width: 1000px;
    min-width: 320px;

    position: relative;
    z-index: 50 !important;
    
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    padding: 0 !important;

    overflow: hidden !important;
    white-space: nowrap;
    pointer-events: none;
    line-height: 1 !important;
    
    /* Ομαλή εμφάνιση χωρίς να αναβοσβήνει κείμενο */
    opacity: 0;
    transition: opacity 0.5s ease-in-out;
    
    /* MASTER TRICK: Λέμε στο CSS να υπολογίζει το ακριβές πλάτος αυτού του κουτιού */
    container-type: inline-size;
  }

  #unique-top-ticker-outer.ticker-loaded {
    opacity: 1 !important; 
  }

  #unique-top-ticker-scroll {
    display: inline-block;
    will-change: transform;
  }

  /* ΚΙΝΗΣΗ 1: Η Πρώτη Ανάρτηση ξεκινάει ακριβώς από το δεξί άκρο (100cqi) */
 /* ΚΙΝΗΣΗ 1: Διαβάζει τα ακριβή pixels από την JS (Τέλειος μαθηματικός συγχρονισμός) */
  @keyframes ticker-entrance {
    0% { transform: translateX(var(--start-pos, 100vw)); } 
    100% { transform: translateX(0); }
  }

  /* ΚΙΝΗΣΗ 2: Όταν μπει, συνεχίζει να κυλάει ασταμάτητα χωρίς κενό (-50%) */
  @keyframes ticker-loop {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); } 
  }

  .unique-top-ticker-link {
    display: inline-block;
    vertical-align: middle;
    margin-top: -5px !important;
    pointer-events: auto;
    color: #0b3c5d !important;
    font-weight: 700;
    font-size: 18px;
    line-height: 1 !important;
    padding: 0px 24px;
    text-decoration: none !important;
    background: transparent !important;
  }

  .unique-top-ticker-link:hover { 
    color: #145da0 !important; 
  }

  .unique-top-ticker-link::after {
    content: "|";
    margin-left: 24px;
    color: #145da0;
    opacity: .5;
    font-weight: 700;
  }
  
#unique-top-ticker-outer:hover #unique-top-ticker-scroll,
  #unique-top-ticker-outer:focus-within #unique-top-ticker-scroll,
  #unique-top-ticker-outer:active #unique-top-ticker-scroll {
    /* Προσθήκη :active ώστε με το πάτημα/κράτημα στην οθόνη αφής να παγώνει η κίνηση */
    animation-play-state: paused !important;
  }

/*EIKONIDIA*/

  :root {
    --search-size: 39px;
    --search-offset-y: 40px;
    --search-offset-x: 120px;
    --search-z: 1;
    --lib-color: #27ae60;
    --a11y-blue: #0056b3;
  
  }

  /* ===============================
     ΜΗΔΕΝΙΣΜΟΣ ΧΩΡΟΥ GADGET
     =============================== */
  .widget:has(#tools-mount), .section:has(#tools-mount), .HTML:has(#tools-mount), .widget-content:has(#tools-mount) {
    height: 0 !important; min-height: 0 !important; margin: 0 !important; padding: 0 !important;
    border: 0 !important; background: transparent !important; overflow: visible !important;
  }
  #tools-mount { position: relative !important; height: 0 !important; overflow: visible !important; font-family: Arial, sans-serif; }

  /* =========================================================
     DESKTOP ΣΤΟΙΧΕΙΑ (Κοινά)
     ========================================================= */
  #search-fab {
    display: none !important;
    position: absolute !important; top: var(--search-offset-y) !important; left: calc(50% + var(--search-offset-x)) !important; transform: translateX(-50%) !important;
    width: var(--search-size); height: var(--search-size); border-radius: 999px; align-items: center; justify-content: center;
    background: rgba(240,246,250,.92); border: 1px solid rgba(0,0,0,.08); box-shadow: 0 10px 22px rgba(0,0,0,.14); cursor: pointer; z-index: var(--search-z) !important;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
  }
  #search-fab:hover { transform: translateX(-50%) scale(1.05) !important; box-shadow: 0 12px 26px rgba(0,0,0,.2); }
  #search-fab svg { width: 22px; height: 22px; fill: #2c3e50; }

  #search-pop {
    position: absolute !important; top: calc(var(--search-offset-y) + var(--search-size) + 10px) !important; left: calc(50% + var(--search-offset-x)) !important; transform: translateX(-50%) translateY(10px) !important;
    width: min(92vw, 360px); padding: 10px; border-radius: 14px; background: rgba(240,246,250,.96); backdrop-filter: blur(10px); border: 1px solid rgba(0,0,0,.10); box-shadow: 0 18px 40px rgba(0,0,0,.30); z-index: 2147483647 !important; opacity: 0; visibility: hidden; transition: all .25s cubic-bezier(0.4, 0, 0.2, 1);
  }
  #search-pop.is-open { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0) !important; }

  .desktop-fab {
    display: flex !important; position: absolute !important; 
    top: calc(var(--search-offset-y) + 3px) !important; 
    transform: translateX(-50%) !important;
    width: 37px !important; height: 37px !important;
    z-index: var(--search-z) !important; border-radius: 50% !important;
    align-items: center !important; justify-content: center !important;
    box-shadow: 0 4px 10px rgba(0,0,0,0.2) !important; cursor: pointer !important; text-decoration: none !important;
    transition: transform 0.2s ease !important;
  }
  .desktop-fab:hover { transform: translateX(-50%) scale(1.1) !important; }

  #yt-fab { left: calc(50% + var(--search-offset-x) - 87px) !important; background: white !important; }
  #yt-fab svg { width: 24px; height: 24px; transform: scale(1.3); flex-shrink: 0; }
  #contact-master-fab { left: calc(50% + var(--search-offset-x) - 130px) !important; background: #2c3e50 !important; color: white !important; font-size: 18px !important; border: none !important; }
  #lib-fab { left: calc(50% + var(--search-offset-x) - 176px) !important; background: var(--lib-color) !important; }
  #lib-fab svg { width: 30px !important; height: 30px !important; fill: white; transform: scale(2.0) !important; transition: transform 0.2s ease; }
  #share-master-fab { left: calc(50% + var(--search-offset-x) - 1px) !important; background: #607d8b !important; color: white !important; border: none !important; }

  /* =========================================================
     ΜΕΝΟΥ ΕΠΙΛΟΓΩΝ (Επικοινωνία & Βιβλιοθήκη) - Desktop
     ========================================================= */
  #contact-options, #lib-options {
    position: absolute !important; 
    top: calc(var(--search-offset-y) + 37px + 15px) !important; 
    background: white !important; border-radius: 12px !important; box-shadow: 0 10px 25px rgba(0,0,0,0.2) !important;
    flex-direction: column !important; z-index: 2147483647 !important;
    border: 1px solid #ddd !important;
    opacity: 0; visibility: hidden;
    transform: translateX(-50%) translateY(-10px) !important;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
    display: flex !important;
  }
  #contact-options { width: max-content !important; left: calc(50% + var(--search-offset-x) - 120px) !important; overflow: visible !important; }
  #lib-options { width: 168px !important; left: calc(50% + var(--search-offset-x) - 160px) !important; overflow: hidden !important; }
  #contact-options.show, #lib-options.show { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0) !important; }

  .menu-opt {
    padding: 12px 15px !important; text-decoration: none !important; color: #333 !important;
    font-size: 16px !important; font-weight: bold !important; display: flex !important;
    align-items: center !important; gap: 10px !important; border-bottom: 1px solid #eee !important;
    transition: background 0.2s;
  }
  .menu-opt:last-child { border-bottom: none !important; }
  .menu-opt:active, .menu-opt:hover { background: #f0f0f0 !important; }
  .desk-only { display: flex !important; }
  .mob-only { display: none !important; }

  /* =========================================================
     ΠΡΟΣΒΑΣΙΜΟΤΗΤΑ (Desktop & Global Effects)
     ========================================================= */
  #a11y-fab {
    position: fixed !important; top: 40px !important; right: 20px !important; 
    width: 44px; height: 44px; border-radius: 50%; background: var(--a11y-blue); 
    border: 3px solid #fff; box-shadow: 0 4px 12px rgba(0,0,0,0.3); 
    cursor: pointer; z-index: 1 !important; 
    display: flex; align-items: center; justify-content: center;
    transition: transform 0.2s, box-shadow 0.2s;
  }
  #a11y-fab:hover { transform: scale(1.1); box-shadow: 0 6px 16px rgba(0,0,0,0.4); }
  #a11y-fab svg { width: 26px; height: 26px; fill: #fff; }

  #a11y-menu {
    position: fixed !important; top: 95px !important; right: 20px !important;
    background: #f4f7f6; border: 1px solid #dcdcdc; border-radius: 16px;
    padding: 15px; width: min(90vw, 300px); box-shadow: 0 12px 40px rgba(0,0,0,0.2);
    z-index: 2147483647 !important; display: flex; flex-direction: column;
    opacity: 0; visibility: hidden; transform: translateY(-10px);
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  }
  #a11y-menu.is-open { opacity: 1; visibility: visible; transform: translateY(0); }

  .a11y-header { display: flex; justify-content: space-between; align-items: center; border-bottom: 2px solid #e0e0e0; padding-bottom: 8px; margin-bottom: 12px; }
  .a11y-title { font-weight: 900; font-size: 15px; color: var(--a11y-blue); margin: 0; }
  .a11y-close { background: transparent; border: none; font-size: 22px; cursor: pointer; color: #666; transition: color 0.2s;}
  .a11y-close:hover { color: #d32f2f; }
  .a11y-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
  .a11y-grid button { background: #fff; border: 1px solid #ced4da; border-radius: 10px; padding: 10px 5px; font-size: 12px; font-weight: bold; cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: 4px; transition: all 0.2s; }
  .a11y-grid button:hover { background: #e9ecef; }
  .a11y-grid button.is-active { background: #cce5ff; border-color: var(--a11y-blue); color: #004085; }
  .a11y-grid button .icon { font-size: 20px; }
  #a11y-btn-reset { background: var(--a11y-blue); color: #fff; border: none; border-radius: 10px; padding: 10px; font-weight: bold; margin-top: 12px; cursor: pointer; transition: background 0.2s; }
  
  html.a11y-contrast { filter: invert(1) hue-rotate(180deg) contrast(110%) !important; background-color: #111 !important; }
  html.a11y-contrast img, html.a11y-contrast video { filter: invert(1) hue-rotate(180deg) !important; }
  html.a11y-large-text body { font-size: 125% !important; }
  html.a11y-links a { text-decoration: underline !important; color: #0056b3 !important; font-weight: bold !important; }
  html.a11y-spacing * { letter-spacing: 0.12em !important; word-spacing: 0.16em !important; }
  html.a11y-lineheight p, html.a11y-lineheight li { line-height: 2 !important; }
  html.a11y-dyslexia * { font-family: "Comic Sans MS", cursive, sans-serif !important; }
  html.a11y-noimages img { opacity: 0 !important; }
  html.a11y-grayscale { filter: grayscale(100%) !important; }

  html.a11y-reading-mode .sidebar, 
  html.a11y-reading-mode .header-wrapper, 
  html.a11y-reading-mode .footer-wrapper, 
  html.a11y-reading-mode .nav,
  html.a11y-reading-mode #recent-slider,
  html.a11y-reading-mode .comments { display: none !important; }
  html.a11y-reading-mode .main-wrapper { width: 100% !important; max-width: 800px !important; margin: 0 auto !important; float: none !important; }

  .goog-te-banner-frame.skiptranslate { display: none !important; }
  body { top: 0px !important; }
  #google_translate_element { margin-top: 10px; text-align: center; width: 100%; }
  .goog-te-gadget .goog-te-combo { width: 100% !important; padding: 10px !important; border-radius: 8px !important; border: 1px solid #ced4da !important; font-size: 15px !important; background: #fff !important; color: #333 !important; outline: none !important; }
  iframe.goog-te-menu-frame { z-index: 2147483650 !important; }

  /* =========================================================
     ΕΞ ΑΠΟΣΤΑΣΕΩΣ ΜΑΘΗΣΗ (Accordion - Ανοίγει κάτω ΠΑΝΤΟΥ)
     ========================================================= */
  .distance-learning-toggle { 
    display: var(--show-dist-learning) !important; 
    position: relative !important; 
    padding: 0 !important; 
    cursor: pointer; 
    flex-direction: column !important; /* Στοιβάζει το υπομενού από κάτω */
    align-items: stretch !important; 
    width: 100% !important;
  }
  .distance-learning-toggle .main-title { display: flex; align-items: center; justify-content: space-between; width: 100%; padding: 10px 3px; font-size: 17px; font-weight: bold; transition: background 0.2s; }
  .distance-learning-toggle .main-title span:first-child { font-size: 20px !important; }
  .distance-learning-toggle .main-title:hover { background: #f0f0f0; }
  
  .submenu-container { 
    display: none; 
    position: static !important; /* Τέλος το πέταγμα στα δεξιά, μένει στη θέση του! */
    width: 100% !important; 
    margin-left: 0 !important; 
    margin-top: 5px !important; 
    background-color: #e2e8f0 !important; 
    box-shadow: inset 0 2px 8px rgba(0,0,0,0.05) !important; 
    border: none !important; 
    border-left: 3px solid var(--a11y-blue) !important; 
    border-radius: 8px !important; 
    padding: 15px !important; 
    max-height: none !important; 
    box-sizing: border-box !important; 
  }
  
  .submenu-container::-webkit-scrollbar { width: 5px; }
  .submenu-container::-webkit-scrollbar-track { background: transparent; }
  .submenu-container::-webkit-scrollbar-thumb { background: #b0bec5; border-radius: 10px; }
  
  /* Εμφάνιση στο Hover */
  .distance-learning-toggle:hover .submenu-container, 
  .distance-learning-toggle:focus-within .submenu-container { 
    display: flex; 
    flex-direction: column; 
  }
  .classes-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
  .classes-grid .submenu-opt { justify-content: center; background: #ffffff !important; border: 1px solid #cbd5e1 !important; padding: 10px !important; }
  .classes-grid .submenu-opt:hover { background: #f8fafc !important; border-color: #a0aec0 !important; }
  .collapsible-group { margin-bottom: 5px !important; }
  .collapsible-group summary { list-style: none !important; cursor: pointer !important; color: #555 !important; font-weight: 900 !important; display: flex !important; align-items: center !important; justify-content: space-between !important; text-transform: uppercase !important; border-radius: 6px !important; transition: background 0.2s !important; user-select: none !important; font-size: 13px !important; padding: 12px 15px !important; }
  .collapsible-group summary::-webkit-details-marker { display: none !important; }
  .collapsible-group summary:hover { background: #e2e8f0 !important; }
  .collapsible-group .title-left { display: flex !important; align-items: center !important; gap: 6px !important; }
  .collapsible-group summary .title-left span { font-size: 20px !important; }
  .collapsible-group summary .arrow { transition: transform 0.3s ease !important; font-size: 18px !important; }
  .collapsible-group[open] summary .arrow { transform: rotate(180deg) !important; }
  .collapsible-content { padding-left: 10px !important; margin-top: 5px !important; display: flex !important; flex-direction: column !important; gap: 2px !important; }

  /* =========================================================
     ΕΠΑΓΓΕΛΜΑΤΙΚΟ MOBILE SPEED DIAL (Κινητό)
     ========================================================= */

  /* Overlay (Σκοτείνιασμα οθόνης - ΔΙΟΡΘΩΜΕΝΟ ΓΙΑ ΝΑ ΝΙΚΑΕΙ ΤΟ ZOOM) */
  #fab-overlay {
    position: fixed !important; 
    top: -50vh !important; /* Ξεκινάει πολύ πιο πάνω */
    left: -50vw !important; /* Ξεκινάει πολύ πιο αριστερά */
    width: 200vw !important; /* Γίνεται διπλάσιο σε πλάτος */
    height: 200vh !important; /* Γίνεται διπλάσιο σε ύψος */
    background: rgba(0, 0, 0, 0.6) !important; 
    backdrop-filter: blur(2px) !important;
    z-index: 80 !important; /* Κάτω από το dial, πάνω από τη σελίδα */
    opacity: 0; 
    visibility: hidden; 
    transition: all 0.3s ease !important;
  }
  #fab-overlay.is-active { opacity: 1; visibility: visible; }

  /* Container Speed Dial τέρμα αριστερά */
  #mobile-speed-dial {
    position: fixed !important; bottom: 55px !important; left: 15px !important;
    z-index: 85 !important;
    display: flex; flex-direction: column; align-items: center;
    transition: transform 0.8s ease, opacity 0.8s ease !important;
pointer-events: none !important;
  }
  /* Κρύψιμο στο Scroll */
  .fabs-hidden { opacity: 0 !important; pointer-events: none !important; transform: translateY(80px) !important; }

  /* Η Λίστα των 6 Κουμπιών */
  .sub-fabs-list {
    display: flex; flex-direction: column-reverse; /* Στοιβάζονται προς τα πάνω */
    gap: 12px; margin-bottom: 15px;
    opacity: 0; visibility: hidden; pointer-events: none;
    transform: translateY(30px) scale(0.5);
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
  }
  .sub-fabs-list.is-open { opacity: 1; visibility: visible; pointer-events: auto; transform: translateY(0) scale(1); }

  /* Κεντρικό Κουμπί (Trigger) */
  #main-master-fab {
    width: 80px; height: 80px; border-radius: 50%; background: #2c3e50; border: 2px solid #fff;
    box-shadow: 0 4px 15px rgba(0,0,0,0.3); display: flex; align-items: center; justify-content: center;
    cursor: pointer; transition: transform 0.3s ease, background 0.3s;
pointer-events: auto !important;
outline: none !important;
    -webkit-tap-highlight-color: transparent !important;
  }
  #main-master-fab.is-open { transform: rotate(135deg); background: #e74c3c; } /* Γίνεται "X" και κόκκινο */
  #main-master-fab svg { fill: #fff; width: 32px; height: 32px; }

  /* Τα 6 Υπο-Κουμπιά */
  .sub-fab {
    width: 48px !important; height: 48px !important; border-radius: 50% !important;
    display: flex !important; align-items: center !important; justify-content: center !important;
    box-shadow: 0 4px 10px rgba(0,0,0,0.2) !important; cursor: pointer !important; text-decoration: none !important;
    border: 2px solid #fff !important; transition: transform 0.2s ease !important;
outline: none !important;
    -webkit-tap-highlight-color: transparent !important;
  }
  .sub-fab:hover { transform: scale(1.1) !important; }

  /* Εξειδικευμένα χρώματα για κάθε ένα */
  #lib-fab-mob { background: var(--lib-color) !important; }
  #lib-fab-mob svg { width: 28px !important; height: 28px !important; fill: white !important; }
  
  #contact-master-fab-mob { background: #2c3e50 !important; color: white !important; font-size: 20px !important; padding: 0 !important;}
  
  #fb-fab-mob { background: #fff !important; padding: 0 !important; border: 1px solid #ccc !important; }
  #fb-fab-mob svg { width: 48px !important; height: 48px !important; }
  
  #yt-fab-mob { background: white !important; padding: 0 !important; border: 1px solid #ccc !important; }
  #yt-fab-mob svg { width: 44px !important; height: 44px !important; }
  
  #share-master-fab-mob { background: #607d8b !important; color: white !important; font-size: 20px !important; padding: 0 !important;}
  
  #a11y-fab-mob { background: var(--a11y-blue) !important; }
  #a11y-fab-mob svg { width: 24px !important; height: 24px !important; fill: #fff !important; }

  /* Θέσεις Μενού για Κινητά (Ενεργοποιούνται δυναμικά) */
  #a11y-menu.mobile-pos, #search-pop.mobile-pos, #contact-options.mobile-pos, #lib-options.mobile-pos { 
    position: fixed !important; top: auto !important; left: 20px !important; right: auto !important;
    bottom: 70px !important; transform: translateY(20px) !important; z-index: 2147483647 !important;
  }
  #a11y-menu.mobile-pos.is-open, #search-pop.mobile-pos.is-open, #contact-options.mobile-pos.show, #lib-options.mobile-pos.show { 
    transform: translateY(0) !important; 
  }
  #contact-options.mobile-pos { width: 280px !important; max-height: 70vh !important; overflow-y: auto !important; }
  #lib-options.mobile-pos { width: 250px !important; }
  #search-pop.mobile-pos { width: max-content !important; max-width: 90vw !important; }


  /* =========================================================
     ΟΡΓΑΝΩΜΕΝΑ MEDIA QUERIES
     ========================================================= */
  @media (min-width: 1369px) {
    #contact-options { border-radius: 16px !important; }
    #contact-options .menu-opt { padding: 15px 20px !important; font-size: 18px !important; gap: 15px !important; }
    #contact-options .menu-opt span { font-size: 25px !important; }
    #lib-options { width: 280px !important; }
    #lib-options .menu-opt { padding: 15px 20px !important; font-size: 18px !important; gap: 12px !important; }
    #lib-options .menu-opt span { font-size: 24px !important; }
    .distance-learning-toggle .main-title { padding: 10px 3px !important; font-size: 18px !important; }
    .distance-learning-toggle .main-title span:first-child { font-size: 25px !important; }
    .submenu-container { width: 340px !important; padding: 15px 20px !important; }
    .collapsible-group summary, .submenu-opt { font-size: 17px !important; padding: 14px 18px !important; }
    .collapsible-group summary .title-left span, .submenu-opt span { font-size: 24px !important; }
    #mobile-speed-dial, #fab-overlay { display: none !important; }
  }
  @media (min-width: 4369px) {
    #a11y-btn-translate { display: none !important; }
    .collapsible-content { max-height: 45vh !important; overflow-y: auto !important; overflow-x: hidden !important; padding-right: 5px !important; }
    .collapsible-content::-webkit-scrollbar { width: 4px; }
    .collapsible-content::-webkit-scrollbar-track { background: transparent; }
    .collapsible-content::-webkit-scrollbar-thumb { background: #b0bec5; border-radius: 10px; }
  }
  @media (max-width: 5368px) {
    .desk-only { display: none !important; }
    .mob-only { display: flex !important; }
    #lib-fab, #contact-master-fab, #yt-fab, #share-master-fab { display: none !important; }
  }
  @media (max-width: 1379px) {
    .distance-learning-toggle { flex-direction: column !important; align-items: stretch !important; width: 100% !important; }
    .submenu-container { position: static !important; width: 100% !important; margin-left: 0 !important; margin-top: 5px !important; box-shadow: inset 0 2px 8px rgba(0,0,0,0.05) !important; border: none !important; border-left: 3px solid var(--a11y-blue) !important; border-radius: 8px !important; padding: 15px !important; max-height: none !important; box-sizing: border-box !important; }
  }
  @media (max-width: 868px) {
    #contact-options .menu-opt, #lib-options .menu-opt { padding: 10px 15px !important; font-size: 17px !important; }
    #contact-options .menu-opt span, #lib-options .menu-opt span { font-size: 20px !important; }
    #search-pop input { padding: 12px !important; font-size: 16px !important; }
    #search-pop button { padding: 12px 15px !important; }
    .submenu-container { display: none; }
    .distance-learning-toggle:hover .submenu-container { display: block !important; }
  }
/* ΠΡΟΣΘΗΚΗ: Λεζάντες (Labels) στα Κουμπιά */
  .sub-fab {
    position: relative !important; 
    overflow: visible !important; 
  }
  
  .fab-label {
    position: absolute;
    left: 60px; /* Σπρώχνει τη λεζάντα στα δεξιά του κουμπιού */
    background: rgba(255, 255, 255, 0.95);
    color: #2c3e50;
    padding: 6px 14px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 900;
    white-space: nowrap;
    box-shadow: 0 4px 10px rgba(0,0,0,0.15);
    pointer-events: none; /* Για να μην μπλοκάρει τα κλικ */
    border: 1px solid #e0e0e0;
  }
/* Εφέ Ντόμινο (Staggered Animation) στα Υπο-κουμπιά */
  .sub-fabs-list .sub-fab {
    opacity: 0;
    transform: translateY(20px) scale(0.8);
    transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275), opacity 0.3s ease !important;
  }

  .sub-fabs-list.is-open .sub-fab {
    opacity: 1;
    transform: translateY(0) scale(1);
  }

  /* Διαδοχική καθυστέρηση από κάτω προς τα πάνω */
  .sub-fabs-list.is-open .sub-fab:nth-child(1) { transition-delay: 0.05s !important; }
  .sub-fabs-list.is-open .sub-fab:nth-child(2) { transition-delay: 0.10s !important; }
  .sub-fabs-list.is-open .sub-fab:nth-child(3) { transition-delay: 0.15s !important; }
  .sub-fabs-list.is-open .sub-fab:nth-child(4) { transition-delay: 0.20s !important; }
  .sub-fabs-list.is-open .sub-fab:nth-child(5) { transition-delay: 0.25s !important; }
  .sub-fabs-list.is-open .sub-fab:nth-child(6) { transition-delay: 0.30s !important; }

  /* Όταν κλείνει, φεύγουν όλα μαζί γρήγορα */
  .sub-fabs-list .sub-fab { transition-delay: 0s !important; }

@media (max-width: 768px) {
  #mobile-speed-dial {
    bottom: 12px !important;
    left: 9px !important;
  }
  #main-master-fab {
    width: 53px !important;
    height: 53px !important;
  }
}
#fab-welcome-tooltip {
    position: absolute;
    left: 75px; /* Το σπρώχνει στα δεξιά του Speed Dial */
    bottom: 14px;
    background: #2c3e50;
    color: white;
    padding: 8px 14px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: bold;
    white-space: nowrap;
    box-shadow: 0 4px 10px rgba(0,0,0,0.2);
    pointer-events: none; /* Δεν μπλοκάρει τα κλικ */
    opacity: 0;
    transform: translateX(-15px); /* Ξεκινάει λίγο πιο αριστερά */
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    z-index: 84;
  }

  /* Το μικρό τριγωνάκι που δείχνει προς το κουμπί */
  #fab-welcome-tooltip::before {
    content: '';
    position: absolute;
    left: -6px;
    top: 50%;
    transform: translateY(-50%);
    border-width: 6px 6px 6px 0;
    border-style: solid;
    border-color: transparent #2c3e50 transparent transparent;
  }

  /* Η κλάση που το εμφανίζει */
  #fab-welcome-tooltip.show-tooltip {
    opacity: 1;
    transform: translateX(0);
  }

  @media (min-width: 768px) and (max-width: 1400px) and (pointer: coarse) {
    /* Εμφανίζει το κυκλικό μενού (Speed Dial) και το σκοτείνιασμα */
    #mobile-speed-dial { display: flex !important; }
    #fab-overlay { display: block !important; }
    
    /* Κρύβει τα παλιά μεμονωμένα κουμπιά, εκτός της Προσβασιμότητας */
    #lib-fab, 
    #contact-master-fab, 
    #yt-fab, 
    #share-master-fab, 
    #search-fab {
      display: none !important;
    }

    /* Κρατάει ορατό το κουμπί Προσβασιμότητας (πάνω δεξιά) που έχει και το Translate */
    #a11y-fab { display: flex !important; }
  }
@media (min-width: 768px) and (max-width: 1300px) and (pointer: coarse) {
  #mobile-speed-dial { 
    display: flex !important; 
    transform: scale(1.2) !important; /* 👈 ΑΥΤΟΣ Ο ΑΡΙΘΜΟΣ! (1.2 = +20% μέγεθος) */
    transform-origin: bottom left !important; /* Κρατάει τη βάση κάτω αριστερά */
  }
#a11y-menu.mobile-pos, 
    #search-pop.mobile-pos, 
    #contact-options.mobile-pos, 
    #lib-options.mobile-pos {
      bottom: 160px !important; /* 👈 Αν πάλι βρίσκουν, μεγάλωσε αυτόν τον αριθμό (π.χ. 170px) */
    }
  /* Αφήνει ΚΑΙ τη Βιβλιοθήκη ΚΑΙ την Επικοινωνία να πάρουν όσο πλάτος χρειάζεται */
    #lib-options.mobile-pos,
    #contact-options.mobile-pos {
      width: max-content !important; 
      min-width: 240px !important;
    }
    
    /* Απαγορεύει στις λέξεις να σπάνε στη μέση και να αλλάζουν γραμμή */
    .menu-opt {
      white-space: nowrap !important; 
      padding-right: 25px !important; /* Δίνει λίγο παραπάνω αέρα στα δεξιά */
    }
#a11y-menu.mobile-pos, 
    #search-pop.mobile-pos, 
    #contact-options.mobile-pos, 
    #lib-options.mobile-pos {
      transform: scale(1.4) translateY(20px) !important;
      transform-origin: bottom left !important; /* Μεγαλώνουν από κάτω αριστερά προς τα πάνω */
    }

    /* Κατάσταση εμφάνισης (όταν ανοίγουν) */
    #a11y-menu.mobile-pos.is-open, 
    #search-pop.mobile-pos.is-open, 
    #contact-options.mobile-pos.show, 
    #lib-options.mobile-pos.show {
      transform: scale(1.4) translateY(0) !important;
    }
#fab-welcome-tooltip.show-tooltip {
    opacity: 1;
    transform: translateX(15px);
  }
}
@media (min-width: 1025px) and (hover: hover) and (pointer: fine) {
  #mobile-speed-dial { 
    display: flex !important; 
    transform: scale(0.9) !important; /* 👈 ΑΥΤΟΣ Ο ΑΡΙΘΜΟΣ! (1.2 = +20% μέγεθος) */
    transform-origin: bottom left !important; /* Κρατάει τη βάση κάτω αριστερά */
  }
#a11y-menu.mobile-pos, 
    #search-pop.mobile-pos, 
    #contact-options.mobile-pos, 
    #lib-options.mobile-pos {
      bottom: 130px !important; /* 👈 Αν πάλι βρίσκουν, μεγάλωσε αυτόν τον αριθμό (π.χ. 170px) */
    }
  /* Αφήνει ΚΑΙ τη Βιβλιοθήκη ΚΑΙ την Επικοινωνία να πάρουν όσο πλάτος χρειάζεται */
    #lib-options.mobile-pos,
    #contact-options.mobile-pos {
      width: max-content !important; 
      min-width: 270px !important;
    }
    
    /* Απαγορεύει στις λέξεις να σπάνε στη μέση και να αλλάζουν γραμμή */
    .menu-opt {
      white-space: nowrap !important; 
      padding-right: 25px !important; /* Δίνει λίγο παραπάνω αέρα στα δεξιά */
    }
#a11y-menu.mobile-pos, 
    #search-pop.mobile-pos, 
    #contact-options.mobile-pos, 
    #lib-options.mobile-pos {
      transform: scale(1) translateY(20px) !important;
      transform-origin: bottom left !important; /* Μεγαλώνουν από κάτω αριστερά προς τα πάνω */
    }

    /* Κατάσταση εμφάνισης (όταν ανοίγουν) */
    #a11y-menu.mobile-pos.is-open, 
    #search-pop.mobile-pos.is-open, 
    #contact-options.mobile-pos.show, 
    #lib-options.mobile-pos.show {
      transform: scale(1) translateY(0) !important;
    }
#fab-welcome-tooltip.show-tooltip {
    opacity: 1;
    transform: translateX(15px);
  }
}
/* =========================================================
   ΕΛΑΦΡΥ HOVER ΣΤΟ ΚΕΝΤΡΙΚΟ ΚΟΥΜΠΙ (ΜΟΝΟ ΜΕ ΠΟΝΤΙΚΙ)
   ========================================================= */
@media (hover: hover) and (pointer: fine) {
  #main-master-fab:hover {
    transform: scale(1.08);
    box-shadow: 0 6px 20px rgba(0,0,0,0.4);
  }
  
  /* Να διατηρείται το εφέ της μεγέθυνσης και όταν είναι ανοιχτό (περιστραμμένο σε Χ) */
  #main-master-fab.is-open:hover {
    transform: rotate(135deg) scale(1.08);
  }
}
@media (max-width: 4768px) {
 
  /* ΠΡΟΣΘΗΚΗ: Κρύβει το desktop κουμπί προσβασιμότητας στα κινητά */
  #a11y-fab {
    display: none !important;
  }
}
@media (max-width: 370px) {

  #a11y-menu.mobile-pos.is-open {
    transform: scale(0.8) translateY(0) !important;
    transform-origin: bottom left !important;
  }
}
@media (min-width: 371px) and (max-width: 410px) {
  #a11y-menu.mobile-pos.is-open {
    transform: scale(0.96) translateY(0) !important;
    transform-origin: bottom left !important;
  }
}

@media (min-width: 1100px) and (max-width: 1500px) and (pointer: fine) {
  #a11y-menu.mobile-pos.is-open {
    transform: scale(0.85) translateY(0) !important;
    transform-origin: bottom left !important;
  }
}
html.a11y-focus p:hover, 
  html.a11y-focus li:hover, 
  html.a11y-focus h1:hover, 
  html.a11y-focus h2:hover, 
  html.a11y-focus h3:hover {
    background-color: #fff3cd !important;
    color: #212529 !important;
    border-radius: 6px !important;
    box-shadow: 0 0 0 3px #ffc107 !important;
    transition: all 0.2s ease;
    cursor: crosshair !important;
  }
/* =========================================================
     ΧΑΡΑΚΑΣ ΑΝΑΓΝΩΣΗΣ (READING RULER)
     ========================================================= */
  #reading-ruler-mask {
    display: none;
    position: fixed;
    left: 0;
    width: 100vw;
    height: 120px; /* Το πάχος της φωτεινής λωρίδας */
    transform: translateY(-50%); /* Για να είναι το ποντίκι ακριβώς στη μέση της λωρίδας */
    pointer-events: none; /* Επιτρέπει τα κλικ στα άρθρα, δεν μπλοκάρει τίποτα! */
    z-index: 2147483640; /* Κάτω από το μενού σου, αλλά πάνω από τη σελίδα */
    box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.65); /* Σκοτεινιάζει τα πάντα γύρω του */
    transition: top 0.05s linear; /* Απαλή κίνηση */
  }
  
  html.a11y-ruler #reading-ruler-mask {
    display: block;
  }
/* Κρύβουμε και τα δύο εξ ορισμού */
  #smart-btn-cursor, #smart-btn-animations {
    display: none !important;
  }

  /* Αν η συσκευή έχει ποντίκι με ακρίβεια (PC / Laptop) -> Δείχνει Κέρσορα */
  @media (pointer: fine) {
    #smart-btn-cursor { display: flex !important; }
  }

  /* Αν η συσκευή λειτουργεί με αφή (Κινητό / Tablet) -> Δείχνει Κινήσεις */
  @media (pointer: coarse) {
    #smart-btn-animations { display: flex !important; }
  }
/* ΛΕΙΤΟΥΡΓΙΑ 1: Μεγάλος Κέρσορας Υψηλής Ορατότητας (Για PC) */
  html.a11y-big-cursor, 
  html.a11y-big-cursor * {
    cursor: url("data:image/svg+xml,%3Csvg width='42' height='42' viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M2,2 L2,26 L8,20 L14,31 L18,29 L12,18 L21,18 Z' fill='%23FFEB3B' stroke='%23111' stroke-width='2.5' stroke-linejoin='round'/%3E%3C/svg%3E"), auto !important;
  }

  /* ΛΕΙΤΟΥΡΓΙΑ 2: Παύση Κινήσεων (Για Κινητά) */
  html.a11y-no-animations * {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }

/* =========================================================
   Μενού Κοινοποίησης (Ενοποιημένο Στυλ με τα άλλα Μενού)
   ========================================================= */

#share-options {
  display: none; 
  flex-direction: column !important;
  
  /* --- ΙΔΙΟ ΣΤΥΛ ΜΕ ΤΑ ΑΛΛΑ MENU --- */
  background: white !important; 
  border: 1px solid #ddd !important;
  border-radius: 12px !important;
  box-shadow: 0 10px 25px rgba(0,0,0,0.2) !important;
  padding: 0 !important; /* Αφαιρέθηκε για να πηγαίνουν τα κουμπιά από άκρη σε άκρη */
  overflow: hidden !important; /* Κρατάει το hover μέσα στις στρογγυλές γωνίες */
  min-width: 240px;
  z-index: 2147483647 !important;
  font-family: inherit;
  
  /* --- ΘΕΣΗ ΓΙΑ DESKTOP --- */
  position: absolute !important; 
  top: calc(var(--search-offset-y) + 37px + 15px) !important; 
  left: calc(50% + var(--search-offset-x) - 1px) !important;
  right: auto !important; 
  bottom: auto !important;
  transform: translateX(-50%) !important;
}

#share-options.show {
  display: flex !important;
}

/* --- ΘΕΣΗ ΓΙΑ ΚΙΝΗΤΑ (Speed Dial) --- */
#share-options.mobile-pos,
.custom-action-menu.mobile-pos {
  position: fixed !important;
  top: auto !important; 
  bottom: 70px !important; 
  left: 20px !important; 
  right: auto !important; 
  transform: none !important;
}

@media (max-width: 768px) {
  #share-options {
    position: fixed !important;
    top: auto !important; 
    bottom: 140px !important; 
    left: 20px !important; 
    right: auto !important;
    transform: none !important;
  }
}

/* --- ΣΤΥΛ ΓΙΑ ΤΑ ΚΟΥΜΠΙΑ ΜΕΣΑ ΣΤΟ MENU (Ίδιο με .menu-opt) --- */
.action-menu-btn {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 12px 15px !important;
  border: none !important;
  border-bottom: 1px solid #eee !important; /* Η ΔΙΑΧΩΡΙΣΤΙΚΗ ΓΡΑΜΜΗ */
  background: transparent !important;
  border-radius: 0 !important; /* Αφαιρέθηκε για να είναι edge-to-edge */
  cursor: pointer;
  font-size: 18px !important;
  font-weight: bold !important;
  color: #333 !important;
  width: 100%;
  text-align: left;
  transition: background 0.2s !important;
}

/* Αφαίρεση γραμμής από το τελευταίο κουμπί */
.action-menu-btn:last-child {
  border-bottom: none !important; 
}

/* Εφέ όταν περνάς το ποντίκι (Hover) ίδιο με τα άλλα */
.action-menu-btn:active, 
.action-menu-btn:hover {
  background: #f0f0f0 !important; 
  color: #333 !important;
}

/* Στυλ για τα εικονίδια μέσα στα κουμπιά */
.action-menu-btn svg, 
.action-menu-btn i {
  font-size: 18px !important;
  color: #333 !important; /* Πιο έντονα για να ταιριάζουν με το bold κείμενο */
  transition: color 0.2s ease;
}

@media (min-width: 1025px) and (hover: hover) and (pointer: fine) {
  #share-options.mobile-pos {
    bottom: 130px !important; 
  }

  #share-options.mobile-pos {
    width: max-content !important; 
    min-width: 230px !important;
  }
  
  .menu-opt,
  .action-menu-btn {
    white-space: nowrap !important; 
    padding-right: 25px !important; 
  }

  #share-options.mobile-pos {
    transform: scale(1.2) translateY(20px) !important;
    transform-origin: bottom left !important; 
  }

  #share-options.mobile-pos.show {
    transform: scale(1.2) translateY(0) !important;
  }
}
@media (min-width: 768px) and (max-width: 1400px) and (pointer: coarse) {
 #share-options.mobile-pos,
.custom-action-menu.mobile-pos {
    position: fixed !important;
    top: auto !important; 
    bottom: 160px !important; 
    left: 20px !important; 
    right: auto !important;
    transform: none !important;
  }
  #share-options.mobile-pos {
    transform: scale(1.4) translateY(20px) !important;
    transform-origin: bottom left !important; /* Μεγαλώνει από κάτω αριστερά προς τα πάνω */
  }

  /* Όταν είναι ανοιχτό (αφαιρείται το translateY για να εμφανιστεί ομαλά) */
  #share-options.mobile-pos.show {
    transform: scale(1.4) translateY(0) !important;
  }
}

/* =========================================================
     ΕΞΥΠΝΟ ΛΕΞΙΚΟ (SMART GLOSSARY - WIKIPEDIA API)
     ========================================================= */
  #smart-glossary-tooltip {
    position: fixed !important;
    z-index: 2147483650 !important;
    background: #ffffff;
    border: 1px solid #cbd5e1;
    border-radius: 12px;
    padding: 12px 16px;
    width: max-content;
    max-width: 320px;
    box-shadow: 0 15px 35px rgba(0,0,0,0.2);
    font-family: Arial, sans-serif;
    font-size: 14px;
    line-height: 1.5;
    color: #333;
    pointer-events: none;
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  }
  
  #smart-glossary-tooltip.is-visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    pointer-events: auto; /* Επιτρέπει να κάνεις κλικ μέσα του, π.χ. σε link */
  }

  /* Το τριγωνάκι που δείχνει προς τα κάτω */
  #smart-glossary-tooltip::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border-width: 8px;
    border-style: solid;
    border-color: #ffffff transparent transparent transparent;
  }

  .glossary-title { 
    font-weight: 900; 
    color: var(--a11y-blue); 
    margin-bottom: 6px; 
    font-size: 16px; 
    border-bottom: 1px solid #eee; 
    padding-bottom: 4px; 
    display: block;
  }
  
  .glossary-loading { display: flex; align-items: center; gap: 8px; color: #666; font-style: italic; font-weight: bold; }
  .glossary-error { color: #d32f2f; font-weight: bold; }

  /* Αλλάζει τον κέρσορα σε ερωτηματικό όταν το Λεξικό είναι ενεργό */
  html.a11y-glossary body { cursor: help !important; }
  html.a11y-glossary a { cursor: pointer !important; }

/* ==========================================================================
   SENIOR UX: PRINTER-FRIENDLY CSS (Οικονομία Μελανιού)
   ========================================================================== */
@media print {
    /* 1. Κρύβουμε Μενού, Sidebars, Popups, Κουμπιά και Iframes */
    nav, .tabs-outer, .column-left-outer, .column-right-outer, footer, 
    #mobile-speed-dial, #a11y-fab, #gt-floating-btn, .toTopBtn, 
    #unique-top-ticker-outer, .glass-modal-overlay, #tidio-chat, 
    #recent-slider, .jukebox-container, .school-stats-wrapper, iframe {
        display: none !important;
    }

    /* 2. Το άρθρο να πιάνει όλο το πλάτος του χαρτιού (Α4) */
    .main-outer, .main-inner, .columns, .column-center-outer, .post-outer {
        width: 100% !important; max-width: 100% !important; margin: 0 !important;
        padding: 0 !important; box-shadow: none !important; border: none !important;
    }

    /* 3. Μαύρα γράμματα σε λευκό χαρτί, χωρίς σκιές & backgrounds */
    body, .post-body, .post-title, .post-body * {
        background: #fff !important; color: #000 !important; text-shadow: none !important;
    }

    /* 4. Εμφάνιση του URL δίπλα στα links για να ξέρει ο γονιός πού να μπει */
    .post-body a::after {
        content: " (" attr(href) ")"; font-size: 12px; color: #555;
    }
}
/* ========================================================================
   ΝΕΟ: ΑΝΤΙΣΤΡΟΦΗ LABELS ΟΤΑΝ ΤΟ SPEED DIAL ΕΙΝΑΙ ΣΤΑ ΔΕΞΙΑ (Drag & Drop)
   ======================================================================== */
#mobile-speed-dial.is-snapped-right .fab-label {
  left: auto !important;
  right: 60px !important;
}

#mobile-speed-dial.is-snapped-right #fab-welcome-tooltip {
  left: auto !important;
  right: 75px !important;
  transform: translateX(15px); /* Ξεκινάει από δεξιά προς αριστερά */
}
#mobile-speed-dial.is-snapped-right #fab-welcome-tooltip.show-tooltip {
  transform: translateX(0); 
}
#mobile-speed-dial.is-snapped-right #fab-welcome-tooltip::before {
  left: auto !important;
  right: -6px !important;
  border-width: 6px 0 6px 6px !important;
  border-color: transparent transparent transparent #2c3e50 !important;
}

/* ========================================================================
   ΝΕΟ: ΖΩΝΤΑΝΗ ΠΡΟΕΠΙΣΚΟΠΗΣΗ ΣΥΝΔΕΣΜΩΝ (Live Link Previews)
   ======================================================================== */
#smart-link-preview {
  position: absolute; 
  width: 340px;
  height: 230px;
  background: #ffffff;
  border: 1px solid #cbd5e1;
  border-radius: 12px;
  box-shadow: 0 20px 40px rgba(0,0,0,0.25);
  z-index: 2147483650;
  overflow: hidden;
  opacity: 0;
  visibility: hidden;
  transform: translateY(15px);
  transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

#smart-link-preview.is-visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.preview-loader {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-weight: bold;
  color: #64748b;
  font-size: 14px;
  z-index: 1;
}

/* 
   Η ΜΑΓΕΙΑ (CSS Scale): Το iframe φορτώνει σε σχεδόν 3πλάσιο μέγεθος (1020px) 
   και το μικραίνουμε ακριβώς στο 33.3% για να χωρέσει στο κουτί των 340px!
*/
.preview-iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 1020px; 
  height: 690px; 
  transform: scale(0.3333);
  transform-origin: top left;
  border: none;
  background: white;
  z-index: 2;
  pointer-events: none; /* Αποτρέπει τα κλικ ΜΕΣΑ στην προεπισκόπηση, ο χρήστης απλώς κοιτάζει! */
}

/* ========================================================================
   ΝΕΟ: ΕΞΥΠΝΟΣ ΔΥΝΑΜΙΚΟΣ ΧΑΡΤΗΣ ΑΡΘΡΟΥ (Auto-ToC) - BULLETPROOF
   ======================================================================== */
#smart-toc-wrapper {
  position: fixed !important;
  top: 30% !important; 
  left: auto !important; 
  right: 0 !important;   
  width: auto !important; /* Σπάει τον κανόνα του Blogger για 100% πλάτος */
  height: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  z-index: 2147483640 !important;
  pointer-events: none !important; 
  font-family: 'Inter', Arial, sans-serif !important;
  display: flex !important;
  align-items: flex-start !important;
  justify-content: flex-end !important; /* Το καρφώνει βίαια στα δεξιά */
  
  /* --- GHOST MODE: 35% Ορατό (Αχνό) όταν δεν το ακουμπάς --- */
  opacity: 0.35 !important;
  transition: opacity 0.3s ease !important;
}

/* Ζωντανεύει αμέσως (100% ορατό) μόλις το ακουμπήσεις ή όταν είναι ανοιχτό */
#smart-toc-wrapper:hover,
#smart-toc-wrapper.is-open {
  opacity: 1 !important;
}

/* 1. Το κουμπί (Trigger) στα δεξιά */
#smart-toc-trigger {
  pointer-events: auto !important;
  background: rgba(44, 62, 80, 0.95) !important;
  backdrop-filter: blur(5px) !important;
  -webkit-backdrop-filter: blur(5px) !important;
  color: white !important;
  border: none !important;
  margin: 0 !important;
  padding: 12px 14px 12px 10px !important;
  border-radius: 16px 0 0 16px !important;
  cursor: pointer !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  box-shadow: -3px 5px 15px rgba(0,0,0,0.2) !important;
  width: auto !important;
  height: auto !important;
  transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
}
#smart-toc-trigger:hover {
  background: #1a252f !important;
  padding-right: 20px !important; /* Εφέ τραβήγματος */
}

.toc-icon { font-size: 22px !important; margin-bottom: 6px !important; line-height: 1 !important; display: block !important; }
.toc-label { 
  display: block !important;
  font-size: 10px !important; 
  writing-mode: vertical-rl !important; 
  font-weight: 800 !important; 
  letter-spacing: 2px !important; 
  text-transform: uppercase !important;
}

/* 2. Το Πάνελ που γλιστράει από δεξιά */
#smart-toc-panel {
  pointer-events: auto !important;
  position: absolute !important;
  top: -50px !important; 
  right: -320px !important; /* Κρυμμένο εκτός οθόνης */
  margin: 0 !important;
  width: 300px !important; 
  max-height: 70vh !important;
  background: #ffffff !important;
  border-radius: 16px 0 0 16px !important;
  box-shadow: -10px 15px 40px rgba(0,0,0,0.2) !important;
  transition: right 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
  display: flex !important; 
  flex-direction: column !important;
  border: 1px solid #e2e8f0 !important;
  border-right: none !important;
  overflow: hidden !important;
}
#smart-toc-wrapper.is-open #smart-toc-panel { right: 0 !important; }

/* Αν είναι ανοιχτό το πάνελ, κρύβουμε το κουμπί */
#smart-toc-wrapper.is-open #smart-toc-trigger {
  transform: translateX(100%) !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

/* 3. Κεφαλίδα Πάνελ */
#smart-toc-panel .toc-header {
  padding: 16px 20px !important;
  background: #f8fafc !important;
  border-bottom: 2px solid #e2e8f0 !important;
  color: #0f172a !important;
  font-weight: 900 !important;
  font-size: 15px !important;
  display: flex !important; 
  justify-content: space-between !important; 
  align-items: center !important;
  margin: 0 !important;
}
#smart-toc-close {
  background: transparent !important; border: none !important; color: #94a3b8 !important;
  font-size: 26px !important; cursor: pointer !important; transition: color 0.2s !important; line-height: 1 !important;
  padding: 0 !important; margin: 0 !important;
}
#smart-toc-close:hover { color: #e74c3c !important; }

/* 4. Η Λίστα με τα Links */
#smart-toc-list {
  list-style: none !important; padding: 15px !important; margin: 0 !important;
  overflow-y: auto !important; flex: 1 !important;
}
#smart-toc-list::-webkit-scrollbar { width: 5px; }
#smart-toc-list::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 10px; }
#smart-toc-list li { margin-bottom: 6px !important; padding: 0 !important; border: none !important; }
#smart-toc-list li::before { display: none !important; } /* Ακυρώνει τα bullets του Blogger */

#smart-toc-list a {
  text-decoration: none !important; color: #475569 !important; font-size: 14px !important;
  font-weight: 600 !important; display: block !important; padding: 8px 12px !important;
  border-radius: 8px !important; transition: all 0.2s ease !important;
  line-height: 1.4 !important; border-left: 3px solid transparent !important;
}
#smart-toc-list a:hover { background: #f1f5f9 !important; color: #0f172a !important; padding-left: 16px !important; }

/* Εσοχή για τους Υπότιτλους (Η3) */
.toc-subitem a { font-size: 13px !important; font-weight: 500 !important; padding-left: 24px !important; color: #64748b !important; }
.toc-subitem a:hover { padding-left: 28px !important; }

/* 5. ScrollSpy Active State */
#smart-toc-list a.toc-active {
  background: #e0f2fe !important; color: #0284c7 !important; border-left-color: #0284c7 !important; font-weight: 800 !important;
}

/* 6. Responsive για Κινητά - Κατεβαίνει ΧΑΜΗΛΑ ΔΕΞΙΑ */
@media (max-width: 868px) {
  #smart-toc-wrapper {
    top: auto !important;
    bottom: 120px !important; /* Το κατεβάζει ακριβώς πάνω από το Speed Dial σου */
  }
  #smart-toc-trigger {
    padding: 10px 12px 10px 10px !important;
    border-radius: 12px 0 0 12px !important;
  }
  .toc-label { display: none !important; } /* Κρύβουμε το κάθετο κείμενο */
  .toc-icon { margin-bottom: 0 !important; font-size: 20px !important; }
  
  #smart-toc-panel {
    top: auto !important;
    bottom: -30px !important;
    width: 260px !important;
  }
}

 #a11y-lang-list .gt-group-title { font-size: 11px; font-weight: bold; color: #666; margin: 10px 0 5px 0; }
        #a11y-lang-list .a11y-lang-btn { display: block; width: 100%; text-align: left; padding: 8px 10px; border: 1px solid #ddd; background: #fff; border-radius: 5px; cursor: pointer; font-size: 14px; color: #333; transition: background 0.2s; }
        #a11y-lang-list .a11y-lang-btn:hover { background: #e9ecef; }
        #a11y-lang-list::-webkit-scrollbar { width: 6px; }
        #a11y-lang-list::-webkit-scrollbar-thumb { background-color: #ccc; border-radius: 10px; }

/*STATISTIKA */

.school-stats-wrapper {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 15px;
  width: 100%;
  max-width: 990px;
  margin: 35px auto 0px auto;
  font-family: 'Inter', Arial, sans-serif;
  perspective: 1200px;
}

.stat-glass-card {
  background: rgba(255, 255, 255, 0.4);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.6);
  border-radius: 18px;
  padding: 20px 5px;
  text-align: center;
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.06);
  transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 120px;
  box-sizing: border-box;
  text-decoration: none !important;
  transform-style: preserve-3d; /* Επιτρέπει στα εσωτερικά στοιχεία να έχουν 3D βάθος */
  position: relative;
  overflow: hidden;
}

/* 1. Για τα Desktop (το Hover αλλάζει μόνο χρώματα και σκιές, την κίνηση την κάνει η JS) */
.stat-glass-card:hover {
  border-color: #a90e0e;
  box-shadow: 0 15px 35px rgba(169, 14, 14, 0.15), inset 0 0 20px rgba(255, 255, 255, 0.4);
  background: rgba(255, 255, 255, 0.7);
}

/* 2. [ΝΕΟ] ΕΙΔΙΚΑ ΓΙΑ ΚΙΝΗΤΑ (Οθόνες Αφής) */
@media (pointer: coarse) {
  /* Το :active ενεργοποιείται ΜΟΝΟ όσο το δάχτυλο ακουμπάει την οθόνη */
  .stat-glass-card:active {
    /* Αντί να πηγαίνει πάνω, το κάνουμε να πατιέται ελαφρώς μέσα! */
    transform: scale(0.96); 
    background: rgba(255, 255, 255, 0.8);
    transition: transform 0.1s ease; /* Πολύ γρήγορη απόκριση στο δάχτυλο */
  }
}
/* --- ΝΕΟ: Η Δυναμική Λάμψη (Glare) που ακολουθεί τον κέρσορα --- */
.stat-glass-card::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  /* Χρησιμοποιούμε CSS Variables που τροφοδοτούνται από τη JS σε πραγματικό χρόνο! */
  background: radial-gradient(
    circle at var(--glare-x, 50%) var(--glare-y, 50%), 
    rgba(255, 255, 255, 0.6) 0%, 
    transparent 55%
  );
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none; /* Δεν μπλοκάρει το κλικ του ποντικιού */
  z-index: 0;
}
.stat-glass-card:hover::before { opacity: 1; }

/* --- ΝΕΟ: Parallax Pop-out (Τα στοιχεία "πετάγονται" προς τον χρήστη) --- */
.stat-icon, .stat-number, .stat-label {
  position: relative;
  z-index: 1; /* Μπαίνουν πάνω από το φως */
  /* Σηκώνονται 35px προς τα εμάς στον άξονα Ζ! */
  transform: translateZ(35px); 
  transition: transform 0.3s ease-out;
}

/* --- ΝΕΟ: Αναπνοή εικονιδίου στο Hover --- */
.stat-icon {
  transition: transform 0.3s ease;
}
.stat-glass-card:hover .stat-icon,
.stat-link:hover .stat-icon {
  transform: scale(1.15) rotate(4deg);
}

.stat-icon {
  font-size: 42px;
  margin-bottom: 5px;
  line-height: 1;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.1));
}

.stat-number {
  font-size: 32px;
  font-weight: 900;
  color: #a90e0e;
  line-height: 1;
  margin-bottom: 5px;
}

.stat-label {
  font-size: 11px;
  font-weight: 800;
  color: #2c3e50;
  text-transform: uppercase;
  letter-spacing: 0.2px;
  white-space: nowrap;
}

/* --- Ρυθμίσεις για τη διπλή κάρτα (Βιβλιοθήκη & Υλικό) --- */
.stat-split-container {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: space-evenly;
}

.stat-link {
  text-decoration: none !important;
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: 1;
  color: inherit;
  transition: opacity 0.3s ease;
  cursor: pointer;
}

.stat-link:hover {
  opacity: 0.7;
}

.stat-split-divider {
  width: 1px;
  height: 50px;
  background: rgba(44, 62, 80, 0.15);
}

.stat-link .stat-icon { font-size: 32px; }
.stat-link .stat-number { font-size: 31px; }
.stat-link .stat-label { font-size: 10px; }

/* Ειδοποίηση ("Εξερευνήστε...") */
.stats-notice {
  margin-top: 5px;
  margin-bottom: -30px;
}

/* Responsive για το πλέγμα και την ειδοποίηση */
@media screen and (max-width: 768px) {
  .school-stats-wrapper {
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
    margin-top: 2px;
    margin-bottom: 0px;
  }
  .stat-label {
    white-space: normal;
  }
  .stats-notice {
    margin-top: 1px;
    margin-bottom: 2px;
  }
}

/* ========================================================================
   2. SENIOR MASTER GLASSMORPHISM MODAL (ΤΟ ΣΥΝΝΕΦΑΚΙ)
   ======================================================================== */
/* 1. Το Overlay (Σκοτεινιάζει και θολώνει την πίσω σελίδα) */
.glass-modal-overlay {
  position: fixed;
  inset: 0; 
  
  /* 👇 ΕΠΙΣΤΡΕΦΕΙ ΤΟ ΣΚΟΤΕΙΝΙΑΣΜΑ (50%) ΚΑΙ Η ΘΟΛΟΥΡΑ 👇 */
  background: rgba(0, 0, 0, 0.5); 
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
  
  display: flex;
   align-items: flex-start;
   padding-top: 50vh;
  justify-content: center;
  opacity: 0; 
  visibility: hidden;
  transition: all 0.3s ease;
  z-index: 2147483647; 
}

.glass-modal-overlay.active {
  opacity: 1; 
  visibility: visible;
}
/* 2. Το Modal Box (Γίνεται ξανά ημιδιάφανο και Γυάλινο) */
.glass-modal-box {
  /* 👇 ΗΜΙΔΙΑΦΑΝΟ ΣΚΟΥΡΟ ΜΠΛΕ 👇 */
  background: rgba(30, 41, 59, 0.85) !important; 
  
  /* 👇 ΘΟΛΟΥΡΑ ΣΤΟ ΙΔΙΟ ΤΟ ΚΟΥΤΙ (Glass effect) 👇 */
  backdrop-filter: blur(12px); 
  -webkit-backdrop-filter: blur(12px);
  
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-top: 1px solid rgba(255, 255, 255, 0.3); /* Λάμψη στο πάνω μέρος */
  border-radius: 20px;
  padding: 30px 20px;
  text-align: center;
  
  width: 90%;
  max-width: 370px;
  margin: 0; 
  
  box-shadow: 0 15px 40px rgba(0, 0, 0, 0.5);
  transform: translateY(-15vh) scale(0.95); 
  transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  position: relative;
  font-family: 'Inter', Arial, sans-serif;
}

/* Όταν ανοίγει το Modal, η κάρτα έρχεται ομαλά στη θέση της */
.glass-modal-overlay.active .glass-modal-box {
  transform: translateY(-15vh) scale(1);
}

.glass-modal-close {
  position: absolute;
  top: 12px; right: 18px;
  font-size: 28px; font-weight: bold; color: #94a3b8;
  cursor: pointer; line-height: 1;
  transition: color 0.2s;
}

.glass-modal-close:hover { 
  color: #f87171; 
}

.glass-modal-icon { 
  font-size: 50px; 
  margin-bottom: 12px; 
}

.glass-modal-text {
  font-size: 16px; 
   color: #f1f5f9 !important; 
  margin-bottom: 25px; 
  line-height: 1.6; 
  font-weight: 500;
}

/* Το div για τα κουμπιά (Αντικαθιστά το style="..." του HTML) */
.glass-modal-actions {
  display: flex;
  gap: 10px;
  justify-content: center;
  flex-wrap: wrap;
}

.glass-modal-btn {
  display: inline-block; 
  padding: 12px 28px;
  background: #a90e0e; 
  color: #fff !important; 
  text-decoration: none !important;
  border-radius: 12px; 
  font-weight: 800; 
  text-transform: uppercase;
  letter-spacing: 1px; 
  box-shadow: 0 4px 15px rgba(169, 14, 14, 0.4);
  position: relative; /* Απαραίτητο για το Ripple */
  overflow: hidden;   /* Δεν αφήνει το "νερό" να βγει έξω από το κουμπί */
  /* Βάλαμε εφέ ελατηρίου (cubic-bezier) για όταν το κουμπί ξεφεύγει από τον μαγνήτη */
  transition: background 0.3s, filter 0.3s, transform 0.4s cubic-bezier(0.25, 1, 0.5, 1);
}

.glass-modal-btn:hover {
  background: #c91414; 

}
/* --- ΕΦΕ ΚΑΤΑΡΡΑΚΤΗ --- */
@keyframes slideUpFade {
  0% { opacity: 0; transform: translateY(40px); }
  100% { opacity: 1; transform: translateY(0); }
}

.school-stats-wrapper > * {
  animation: slideUpFade 0.7s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  opacity: 0; /* Κρύβει τις κάρτες στην αρχή για να γίνει το εφέ */
}

/* Χρονική καθυστέρηση για κάθε κάρτα (το εφέ ντόμινο) */
.school-stats-wrapper > *:nth-child(1) { animation-delay: 0.1s; }
.school-stats-wrapper > *:nth-child(2) { animation-delay: 0.2s; }
.school-stats-wrapper > *:nth-child(3) { animation-delay: 0.3s; }
.school-stats-wrapper > *:nth-child(4) { animation-delay: 0.4s; }

/* ========================================================================
   ΝΕΟ: ΧΟΡΟΓΡΑΦΙΑ ΕΜΦΑΝΙΣΗΣ MODAL (STAGGERED ANIMATIONS)
   ======================================================================== */
/* 1. Αρχική κατάσταση: στοιχεία κρυμμένα και ελαφρώς πιο κάτω */
.glass-modal-icon, 
.glass-modal-text, 
.glass-modal-actions {
  opacity: 0;
  transform: translateY(15px);
}
.glass-modal-icon {
  transform: scale(0.5); /* Για το εφέ ελατηρίου */
}

/* 2. Keyframes */
@keyframes bouncePopIn {
  0% { opacity: 0; transform: scale(0.5); }
  60% { opacity: 1; transform: scale(1.15); }
  100% { opacity: 1; transform: scale(1); }
}
@keyframes slideUpFadeIn {
  0% { opacity: 0; transform: translateY(15px); }
  100% { opacity: 1; transform: translateY(0); }
}

/* 3. Εκτέλεση animation ΟΤΑΝ το modal ανοίγει (.active) */
.glass-modal-overlay.active .glass-modal-icon {
  animation: bouncePopIn 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
  animation-delay: 0.1s; /* Σκάει 1ο */
}
.glass-modal-overlay.active .glass-modal-text {
  animation: slideUpFadeIn 0.4s ease forwards;
  animation-delay: 0.25s; /* Ακολουθεί 2ο */
}
.glass-modal-overlay.active .glass-modal-actions {
  animation: slideUpFadeIn 0.4s ease forwards;
  animation-delay: 0.4s; /* Στο τέλος έρχονται τα κουμπιά */
}
/* ========================================================================
   ΝΕΟ: PULL INDICATOR (ΧΑΠΑΚΙ ΓΙΑ SWIPE ΜΟΝΟ ΣΤΑ ΚΙΝΗΤΑ)
   ======================================================================== */
@media (pointer: coarse) {
  .glass-modal-box {
    padding-top: 35px; /* Κάνουμε λίγο χώρο στην κορυφή του κουτιού */
  }
  
  .glass-modal-box::before {
    content: '';
    position: absolute;
    top: 12px;
    left: 50%;
    transform: translateX(-50%);
    width: 40px;
    height: 5px;
    background: rgba(255, 255, 255, 0.35);
    border-radius: 10px;
    pointer-events: none; /* Δεν μπλοκάρει το άγγιγμα του χρήστη */
  }
}
/* ========================================================================
   ΝΕΟ: ΔΥΝΑΜΙΚΑ ΧΡΩΜΑΤΑ (CONTEXTUAL THEMING)
   ======================================================================== */
.glass-modal-overlay {
  --theme-color: #a90e0e; /* Αρχικό χρώμα ασφαλείας */
}

/* Αλλάζουμε χρώμα και σκιά ΜΟΝΟ στο 1ο (κύριο) κουμπί. 
   Χρησιμοποιούμε τη σύγχρονη color-mix για ημιδιάφανη σκιά από το δυναμικό χρώμα! */
#modalBtn {
  background: var(--theme-color) !important;
  box-shadow: 0 4px 15px color-mix(in srgb, var(--theme-color) 45%, transparent) !important;
}

/* Master Tip: Αντί να ψάχνουμε διαφορετικό σκούρο χρώμα για το hover, 
   ρίχνουμε απλώς τη φωτεινότητα (brightness) και δουλεύει σε ΟΛΑ τα χρώματα! */
#modalBtn:hover {
  filter: brightness(0.85); 
}

/* Εξασφαλίζουμε ότι το 2ο κουμπί (Άρθρα) κρατάει τον δικό του χαρακτήρα */
#modalBtn2:hover {
  filter: brightness(1.2); 
}

/* [EXTRA]: Απαλή, χρωματιστή "αύρα" γύρω από όλο το γυάλινο κουτί! */
.glass-modal-overlay.active .glass-modal-box {
  box-shadow: 0 15px 40px rgba(0, 0, 0, 0.5), 0 0 40px -10px var(--theme-color) !important;
}

.stat-split-container, .stat-link {
  transform-style: preserve-3d;
}
/* --- ΝΕΟ: Η Σταγόνα (Liquid Ripple) --- */
.glass-modal-btn .ripple {
  position: absolute;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.45); /* Λευκή, φωτεινή σταγόνα */
  transform: scale(0);
  animation: rippleSpread 0.6s linear forwards;
  pointer-events: none; /* Σημαντικό: Για να μην μπλοκάρει το κλικ! */
}

@keyframes rippleSpread {
  to {
    transform: scale(4); /* Απλώνεται καλύπτοντας όλο το κουμπί */
    opacity: 0; /* Σβήνει ομαλά στο τέλος */
  }
}

/* NEWSLETTER*/

#mobi-glass-wrapper {
  position: relative; width: 100%; max-width: 400px; margin: 15px auto; overflow: hidden; 
  border-radius: 16px; background: rgba(255, 255, 255, 0.35); backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px); border: 1px solid rgba(255, 255, 255, 0.6);
  box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.12); min-height: 250px;
  /* 1. ΕΞΩΤΕΡΙΚΑ ΚΕΝΑ (Απόσταση από τα άλλα στοιχεία της σελίδας) */
  margin-top: 0px;    /* Κενό από πάνω */
  margin-bottom: 0px; /* Κενό από κάτω */

  /* 2. ΕΣΩΤΕΡΙΚΑ ΚΕΝΑ (Απόσταση των γραμμάτων/κουμπιών από το τοίχωμα) */
  padding-top: 5px;    /* Κενό από το πάνω τοίχωμα μέχρι το κουμπί/εικονίδιο */
  padding-bottom: 5px; /* Κενό από το κάτω τοίχωμα μέχρι την ειδοποίηση */
}

/* Κοινό στυλ προβολών */
.mobi-view { width: 100%; padding: 30px 20px 10px; box-sizing: border-box; text-align: center; animation: mobiFadeIn 0.4s ease forwards; }
@keyframes mobiFadeIn { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: translateY(0); } }

/* Κουμπί Πάνω Δεξιά */
.mobi-glass-circle-btn {
  position: absolute; top: 12px; right: 12px; z-index: 20; background: rgba(255, 255, 255, 0.7);
  backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); border: 1px solid rgba(255, 255, 255, 0.9);
  border-radius: 50%; width: 38px; height: 38px; font-size: 17px; cursor: pointer; display: flex;
  align-items: center; justify-content: center; box-shadow: 0 4px 10px rgba(0,0,0,0.1); transition: transform 0.2s;
}
.mobi-glass-circle-btn:active { transform: scale(0.9); }

/* ΣΤΥΛ ΦΟΡΜΑΣ */
.mobi-glass-icon { font-size: 40px; margin-bottom: 5px; transition: transform 0.5s; filter: drop-shadow(0 4px 6px rgba(0,0,0,0.1)); }
.mobi-glass-icon.mobi-fly-away { transform: translate(150px, -150px) scale(0.5); opacity: 0; }
.mobi-glass-title { font-weight: 800; font-size: 19px; margin-bottom: 5px; color: #2c3e50; }
.mobi-glass-subtitle { font-size: 13px; color: #555; margin-bottom: 18px; font-weight: 500; }
.mobi-glass-input { width: 100%; padding: 14px; background: rgba(255, 255, 255, 0.6); border: 1px solid rgba(255, 255, 255, 0.8); border-radius: 12px; margin-bottom: 12px; box-sizing: border-box; outline: none; font-size: 14px; transition: 0.3s; }
.mobi-glass-input:focus { border-color: #3498db; background: rgba(255, 255, 255, 0.9); }
.mobi-glass-notice-wrap { max-height: 0; overflow: hidden; transition: max-height 0.4s ease; }
.mobi-glass-notice-wrap.mobi-open { max-height: 60px; margin-bottom: 12px; }
.mobi-glass-notice-box { font-size: 11px; background: rgba(255, 243, 205, 0.8); color: #856404; padding: 10px; border-radius: 8px; text-align: left; }
.mobi-glass-submit-btn { width: 100%; padding: 14px; background: linear-gradient(135deg, #3498db, #2980b9); color: #fff; border: none; border-radius: 12px; font-weight: bold; font-size: 15px; cursor: pointer; transition: 0.3s; box-shadow: 0 4px 12px rgba(52, 152, 219, 0.3); }
.mobi-glass-submit-btn:disabled { background: rgba(204, 204, 204, 0.8); box-shadow: none; cursor: not-allowed; color: #888; }

/* ΣΤΥΛ ΞΥΣΤΟΥ */
.mobi-scratch-area {
  position: relative; width: 100%; max-width: 320px; height: 210px; margin: 0 auto; border-radius: 12px; overflow: hidden;
  box-shadow: 0 5px 15px rgba(0,0,0,0.15); border: 2px solid rgba(255, 255, 255, 0.9); background: #e2e8f0;
  user-select: none; -webkit-user-select: none; touch-action: none; 
}
#mobi-scratch-link { display: block; width: 100%; height: 100%; text-decoration: none; position: relative; }
#mobi-scratch-bg { width: 100%; height: 100%; background-size: cover; background-position: center; transition: transform 0.4s ease; }
.mobi-scratch-area:hover #mobi-scratch-bg { transform: scale(1.05); }

#mobi-scratch-title-overlay {
  position: absolute; bottom: 0; left: 0; width: 100%; background: linear-gradient(transparent, rgba(0,0,0,0.85));
  color: #fff; font-size: 14px; font-weight: bold; padding: 25px 12px 12px; box-sizing: border-box; text-align: left;
  opacity: 0; transition: opacity 0.5s ease; text-shadow: 1px 1px 3px rgba(0,0,0,0.8);
}

#mobi-scratch-canvas { 
  position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 10; 
  cursor: crosshair; touch-action: none; /* SOS: Κλειδώνει το σκρολάρισμα του κινητού όταν ξύνουν! */
}
.mobi-scratch-hint { margin-top: 15px; font-size: 12px; color: #555; font-weight: 700; background: rgba(255,255,255,0.6); padding: 5px 15px; border-radius: 20px; display: inline-block; }

/* Κεντρικό Wrapper */
#desk-glass-wrapper {
  position: relative; width: 100%; max-width: 400px; margin: 15px auto; overflow: hidden; 
  border-radius: 16px; background: rgba(255, 255, 255, 0.35); backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px); border: 1px solid rgba(255, 255, 255, 0.6);
  box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.12); min-height: 250px;
}

/* Κοινό στυλ προβολών */
.desk-view { width: 100%; padding: 45px 20px 10px; box-sizing: border-box; text-align: center; animation: deskFadeIn 0.4s ease forwards; }
@keyframes deskFadeIn { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: translateY(0); } }

/* Κουμπί Πάνω Δεξιά */
.desk-glass-circle-btn {
  position: absolute; top: 12px; right: 12px; z-index: 20; background: rgba(255, 255, 255, 0.7);
  backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); border: 1px solid rgba(255, 255, 255, 0.9);
  border-radius: 50%; width: 38px; height: 38px; font-size: 17px; cursor: pointer; display: flex;
  align-items: center; justify-content: center; box-shadow: 0 4px 10px rgba(0,0,0,0.1); transition: transform 0.2s;
}
.desk-glass-circle-btn:active { transform: scale(0.9); }

/* ΣΤΥΛ ΦΟΡΜΑΣ */
.desk-glass-icon { font-size: 40px; margin-bottom: 5px; transition: transform 0.5s; filter: drop-shadow(0 4px 6px rgba(0,0,0,0.1)); }
.desk-glass-icon.desk-fly-away { transform: translate(150px, -150px) scale(0.5); opacity: 0; }
.desk-glass-title { font-weight: 800; font-size: 19px; margin-bottom: 5px; color: #2c3e50; }
.desk-glass-subtitle { font-size: 13px; color: #555; margin-bottom: 18px; font-weight: 500; }
.desk-glass-input { width: 100%; padding: 14px; background: rgba(255, 255, 255, 0.6); border: 1px solid rgba(255, 255, 255, 0.8); border-radius: 12px; margin-bottom: 12px; box-sizing: border-box; outline: none; font-size: 14px; transition: 0.3s; }
.desk-glass-input:focus { border-color: #3498db; background: rgba(255, 255, 255, 0.9); }
.desk-glass-notice-wrap { max-height: 0; overflow: hidden; transition: max-height 0.4s ease; }
.desk-glass-notice-wrap.desk-open { max-height: 60px; margin-bottom: 12px; }
.desk-glass-notice-box { font-size: 11px; background: rgba(255, 243, 205, 0.8); color: #856404; padding: 10px; border-radius: 8px; text-align: left; }
.desk-glass-submit-btn { width: 100%; padding: 14px; background: linear-gradient(135deg, #3498db, #2980b9); color: #fff; border: none; border-radius: 12px; font-weight: bold; font-size: 15px; cursor: pointer; transition: 0.3s; box-shadow: 0 4px 12px rgba(52, 152, 219, 0.3); }
.desk-glass-submit-btn:disabled { background: rgba(204, 204, 204, 0.8); box-shadow: none; cursor: not-allowed; color: #888; }

/* ΣΤΥΛ ΞΥΣΤΟΥ */
.desk-scratch-area {
  position: relative; width: 100%; max-width: 320px; height: 210px; margin: 0 auto; border-radius: 12px; overflow: hidden;
  box-shadow: 0 5px 15px rgba(0,0,0,0.15); border: 2px solid rgba(255, 255, 255, 0.9); background: #e2e8f0;
  user-select: none; -webkit-user-select: none; touch-action: none; 
}
#desk-scratch-link { display: block; width: 100%; height: 100%; text-decoration: none; position: relative; }
#desk-scratch-bg { width: 100%; height: 100%; background-size: cover; background-position: center; transition: transform 0.4s ease; }
.desk-scratch-area:hover #desk-scratch-bg { transform: scale(1.05); }

#desk-scratch-title-overlay {
  position: absolute; bottom: 0; left: 0; width: 100%; background: linear-gradient(transparent, rgba(0,0,0,0.85));
  color: #fff; font-size: 14px; font-weight: bold; padding: 25px 12px 12px; box-sizing: border-box; text-align: left;
  opacity: 0; transition: opacity 0.5s ease; text-shadow: 1px 1px 3px rgba(0,0,0,0.8);
}

#desk-scratch-canvas { 
  position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 10; 
  cursor: crosshair; touch-action: none; 
}
.desk-scratch-hint { margin-top: 15px; font-size: 12px; color: #555; font-weight: 700; background: rgba(255,255,255,0.6); padding: 5px 15px; border-radius: 20px; display: inline-block; }
/* Βασικές ρυθμίσεις */
  * { box-sizing: border-box; }


  /* RADIO*/
  .jukebox-container {
    width: 100%;
    max-width: 800px; 
    margin: 5px auto; 
    background: rgba(255, 255, 255, 0.4);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.6);
    border-radius: 10px;
    padding: 15px; 
    text-align: center;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.06);
    font-family: 'Inter', Arial, sans-serif;
    transition: transform 0.3s ease, border-color 0.3s ease;
    touch-action: pan-y;
      margin-top: 0px;    /* Κενό από το πάνω στοιχείο της σελίδας */
  margin-bottom: 0px; /* Κενό από το κάτω στοιχείο της σελίδας */
  }

  .jukebox-container:hover {
    transform: translateY(-2px);
    border-color: #a90e0e;
  }

  /* Επικεφαλίδα */
  .juke-header {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin-bottom: 4px;
  }

  .juke-icon {
    font-size: 34px;
    animation: jukePulse 2.5s infinite ease-in-out;
  }

  @keyframes jukePulse {
    0%, 100% { transform: scale(1); opacity: 0.9; }
    50% { transform: scale(1.1); opacity: 1; }
  }

  .juke-title {
    font-size: 20px;
    font-weight: 600;
    color: #a90e0e;
    text-transform: none;
    letter-spacing: 0.5px;
    margin: 0;
  }

  /* Δυναμικός Τίτλος Κομματιού */
  .current-track-title {
    font-size: 12px;
    color: #2c3e50;
    margin-bottom: 12px;
    font-weight: 700;
    min-height: 16px;
    transition: color 0.3s ease;
  }

  /* Ο HTML5 Player */
  .juke-player {
    width: 100%;
    height: 34px;
    border-radius: 25px;
    margin-bottom: 10px;
    outline: none;
  }
  
  .juke-player:focus-visible {
    outline: 2px solid #a90e0e;
    outline-offset: 2px;
  }
  
  .juke-player::-webkit-media-controls-enclosure {
    background-color: rgba(255, 255, 255, 0.6);
  }

 /* Λίστα Επιλογών */
  .juke-playlist {
    display: flex;
    flex-direction: row; 
    flex-wrap: wrap; /* ΑΛΛΑΓΗ: Επιτρέπει στα κουμπιά να πέσουν σε 2η γραμμή */
    justify-content: space-between; 
    gap: 6px; 
  }

  /* Κουμπιά Επιλογής */
  .playlist-btn {
    flex: 1 1 auto;
    min-width: 0; 
    min-height: 36px;
    justify-content: center;
    background: rgba(255, 255, 255, 0.6);
    border: 1px solid rgba(0, 0, 0, 0.06);
    border-radius: 12px; 
    padding: 4px 6px; 
    font-size: 11.5px; 
    font-weight: 700;
    color: #34495e;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 4px; 
    white-space: nowrap; 
    overflow: hidden;
    text-overflow: ellipsis;
    text-align: left; 
    transition: all 0.25s ease;
  }

  .btn-emoji {
    font-size: 14px; 
    flex-shrink: 0; 
  }

  .playlist-btn:hover {
    background: #a90e0e;
    color: #ffffff;
    transform: translateY(-2px);
    box-shadow: 0 4px 10px rgba(169, 14, 14, 0.15);
  }

  .playlist-btn.track-active {
    background: #2c3e50;
    color: #ffffff;
    border-color: #2c3e50;
    box-shadow: inset 0 2px 4px rgba(0,0,0,0.15);
  }

  /* Μήνυμα Καθοδήγησης */
  .juke-hint {
    font-size: 11.5px;
    color: #34495e;
    margin-top: -2px;
    margin-bottom: 10px;
    font-weight: 500;
    opacity: 0.85;
    animation: subtleBounce 2.5s infinite ease-in-out;
  }

  @keyframes subtleBounce {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(3px); }
  }

  /* --- Αναδυόμενη Λίστα "Περισσότερα" --- */
  .extra-tracks-wrapper {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s ease-in-out, margin-top 0.4s ease-in-out;
  }

  .extra-tracks-wrapper.open {
    max-height: 350px;
    margin-top: 10px;
  }

  .extra-tracks-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
    background: rgba(255, 255, 255, 0.4);
    border-radius: 12px;
    padding: 10px;
    border: 1px solid rgba(0, 0, 0, 0.06);
  }

  .extra-track-btn {
    background: rgba(255, 255, 255, 0.8);
    border: 1px solid rgba(0, 0, 0, 0.05);
    border-radius: 8px;
    padding: 8px 12px;
    font-size: 11.5px;
    font-weight: 600;
    color: #34495e;
    cursor: pointer;
    text-align: left;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    gap: 6px;
  }

  .extra-track-btn:hover {
    background: #a90e0e;
    color: #ffffff;
    transform: translateX(4px);
  }

  .extra-track-btn.track-active {
    background: #2c3e50;
    color: #ffffff;
    border-color: #2c3e50;
  }
/* --- ΒΕΛΤΙΣΤΟΠΟΙΗΣΗ ΓΙΑ ΚΙΝΗΤΑ (SMARTPHONES) --- */
  @media (max-width: 480px) {
    .jukebox-container { 
      padding: 10px 6px; /* Μικραίνουμε ελάχιστα τα εσωτερικά περιθώρια του κουτιού */
    }
    .playlist-btn {
      flex: 1 1 auto; /* Επιτρέπει στα κουμπιά να συρρικνωθούν ελαστικά όσο χρειάζεται */
      font-size: 11px; /* Κατεβαίνουμε μισό pixel για να κερδίσουμε πολύτιμο χώρο */
      padding: 6px 3px; /* Λιγότερο περιθώριο αριστερά/δεξιά μέσα στο κουμπί */
      gap: 2px; /* Μειώνουμε την απόσταση emoji και κειμένου */
      min-height: 38px; 
    }

.btn-emoji { font-size: 11px; }
    .juke-header { display: block; text-align: center; }
    .juke-icon {
      display: inline-block;
      vertical-align: middle;
      margin-right: 4px;
    }
  }


 
/* Κουμπί Επανάληψης (Loop) */
  .loop-btn {
    background: rgba(255, 255, 255, 0.5);
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 8px;
    padding: 4px 8px;
    font-size: 10px;
    font-weight: 600;
    color: #34495e;
    cursor: pointer;
    transition: all 0.3s ease;
  }

  .loop-btn:hover {
    background: rgba(255, 255, 255, 0.9);
  }

  /* Χρώματα όταν είναι ενεργό το Loop */
  .loop-btn.active-loop-all { background: #2c3e50; color: #ffffff; border-color: #2c3e50; }
  .loop-btn.active-loop-one { background: #a90e0e; color: #ffffff; border-color: #a90e0e; }
/* Απενεργοποίηση του κουμπιού download στον player */
.juke-player::-webkit-media-controls-enclosure {
    overflow: hidden;
}
/* Το δοχείο του visualizer */
.playing-bars {
  display: inline-flex;
  align-items: flex-end;
  justify-content: space-between;
  width: 18px; /* Συνολικό πλάτος */
  height: 16px; /* Συνολικό ύψος */
  margin-right: 10px; /* Απόσταση από το emoji/κείμενο */
  vertical-align: middle;
  
  /* Αρχικά είναι κρυφό (όταν δεν παίζει μουσική) */
  opacity: 0; 
  transition: opacity 0.3s ease;
}

/* Όταν προσθέτουμε αυτή την κλάση με JS, το visualizer εμφανίζεται */
.playing-bars.is-playing {
  opacity: 1;
}

/* Κοινά στυλ για όλες τις μπάρες */
.playing-bars .bar {
  width: 3px; /* Πλάτος κάθε μπάρας */
  background-color: #e74c3c; /* Χρώμα (Κόκκινο "On Air") */
  height: 100%;
  border-radius: 2px;
  
  /* Ξεκινάμε το animation */
  animation: juke-dance infinite ease-in-out;
  /* Αρχική κατάσταση: χαμηλά */
  transform-origin: bottom;
  transform: scaleY(0.2); 
  
  /* Αρχικά το animation είναι παγωμένο */
  animation-play-state: paused; 
}

/* Διαφορετική ταχύτητα και καθυστέρηση για κάθε μπάρα για να φαίνεται φυσικό */
.playing-bars .bar:nth-child(1) { animation-duration: 0.8s; animation-delay: 0.1s; }
.playing-bars .bar:nth-child(2) { animation-duration: 1.1s; animation-delay: 0.3s; }
.playing-bars .bar:nth-child(3) { animation-duration: 0.9s; animation-delay: 0.0s; }
.playing-bars .bar:nth-child(4) { animation-duration: 1.0s; animation-delay: 0.5s; }

/* Όταν το visualizer έχει την κλάση is-playing, οι μπάρες αρχίζουν να κουνιούνται */
.playing-bars.is-playing .bar {
  animation-play-state: running;
}

/* Ορισμός του animation: Πόσο ψηλά θα φτάνει η κάθε μπάρα */
@keyframes juke-dance {
  0%, 100% { transform: scaleY(0.2); }
  50%      { transform: scaleY(1); }
}

  /* LIVE */
.glass-bell-tracker {
  /* ΝΕΟ: Βιολογικός Φωτισμός. Default: Ψυχρό, Κρυστάλλινο (Πρωί) */
  --circadian-rgb: 245, 250, 255; 
  
  background: rgba(var(--circadian-rgb), 0.18);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(var(--circadian-rgb), 0.3);
  border-top: 1px solid rgba(var(--circadian-rgb), 0.7);
  
  border-radius: 28px;
  padding: 10px 10px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.12);
  text-align: center;
  font-family: 'Inter', Arial, sans-serif;
  position: relative;
  overflow: hidden;
  
  /* ΝΕΟ: Εξαιρετικά αργό, μεταξένιο transition για να αλλάζει το χρώμα αόρατα στο μάτι! */
  transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275), background 2s ease, border 2s ease;
    margin-top: 0px;    /* Κενό από πάνω */
  margin-bottom: 0px;
  z-index: 0;
  padding-top: 25px;    /* Κενό από το πάνω τοίχωμα μέχρι τα γράμματα */
  padding-bottom: 25px;
}

  .glass-bell-tracker:hover {
    transform: translateY(-5px) scale(1.02);
    border-color: rgba(169, 14, 14, 0.4);
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.15);
  }

 /* Εφέ Λάμψης (Shine Effect) */
.glass-bell-tracker::after {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 50%;
  height: 100%;
  /* ΝΕΟ: Ακόμα και η λάμψη παίρνει τη θερμοκρασία της ημέρας */
  background: linear-gradient(90deg, transparent, rgba(var(--circadian-rgb), 0.6), transparent);
  transform: skewX(-25deg);
  transition: 0.7s ease;
  pointer-events: none;
  z-index: 2;
}
  .glass-bell-tracker:hover::after {
    left: 150%;
  }

  /* Καρτελάκι Τίτλου */
  .tracker-header {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-color: rgba(169, 14, 14, 0.08); 
    padding: 6px 16px;
    border-radius: 20px;
    margin-bottom: 15px;
  }

  /* --- ΝΕΟ ΕΦΕ: Το μυστικό που χοροπηδάει --- */
  .bouncing-secret {
    display: inline-block; /* Απαραίτητο για να πιάσει το transform */
    animation: bounce-jump 2.5s infinite; /* Το 2.5s καθορίζει τον ρυθμό */
    cursor: pointer; /* Δείχνει ότι μπορείς να το πατήσεις */
  }

  @keyframes bounce-jump {
    0%, 20%, 50%, 80%, 100% {
      transform: translateY(0);
    }
    40% {
      transform: translateY(-8px); /* Πόσο ψηλά θα πηδάει (αρνητικό = πάνω) */
    }
    60% {
      transform: translateY(-4px); /* Το δεύτερο, μικρότερο πηδηματάκι */
    }
  }
  /* ------------------------------------------- */

  /* Ρυθμίσεις Κουκκίδας */
  .live-dot {
    width: 10px;
    height: 10px;
    background-color: #f22c2c; /* Ένα πιο φωτεινό κόκκινο */
    border-radius: 50%;
    margin-right: 8px;
    
    /* ΠΡΟΣΘΗΚΗ ΜΟΝΙΜΗΣ ΛΑΜΨΗΣ (GLOW): */
    /* Χρησιμοποιούμε drop-shadow που είναι ασφαλές για το blur του φόντου */
    filter: drop-shadow(0 0 4px #f22c2c) drop-shadow(0 0 2px #ffffff);
    
    animation: pulse-theme-red 1.8s infinite ease-in-out; /* Ελαφρώς πιο γρήγορο */
  }

  /* Όταν το σχολείο είναι κλειστό για διακοπές, η κουκκίδα γίνεται γκρι και σταματά να αναβοσβήνει */
  .live-dot.paused {
    background-color: #7f8c8d;
    animation: none;
    filter: none;
  }

  /* Το animation πλέον αλλάζει μόνο το scale και το drop-shadow */
  @keyframes pulse-theme-red {
    0% {
      transform: scale(0.9);
      filter: drop-shadow(0 0 3px #f22c2c); /* Πιο μικρή λάμψη */
    }
    50% {
      transform: scale(1.25); /* Λίγο μεγαλύτερο μεγέθυνση */
      filter: drop-shadow(0 0 8px #f22c2c) drop-shadow(0 0 2px #ffffff); /* Έντονη λάμψη */
    }
    100% {
      transform: scale(0.9);
      filter: drop-shadow(0 0 3px #f22c2c);
    }
  }

  .tracker-title {
    color: #a90e0e;
    font-size: 0.9em;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
  }

  .bell-main {
    font-size: 20px;
    font-weight: 800;
    color: #2c3e50;
    margin-bottom: 6px;
    line-height: 1.3;
  }

  .bell-sub {
    font-size: 14px;
    font-weight: 600;
    color: rgba(17, 17, 17, 0.68);
  }

  /* Μπάρα Προόδου */
  .bell-progress-bg {
    margin-top: 18px;
    height: 6px;
    background: rgba(0, 0, 0, 0.08);
    border-radius: 10px;
    overflow: hidden;
    display: none;
  }

  .bell-progress-fill {
    height: 100%;
    background: linear-gradient(to right, #1e6cff, #a90e0e);
    width: 0%;
    border-radius: 10px;
  transform-origin: bottom center; 
  transform: skewX(var(--gyro-tilt, 0deg));
  will-change: transform, width; /* GPU Acceleration */
  
  /* Διαχωρισμός animations: Το width αργό (1s), το transform γρήγορο (0.15s) */
  transition: width 1s ease-in-out, transform 0.15s ease-out;
  }

/* --- ΝΕΟ: Χρωματική Αγωνία στη Μπάρα --- */
.bell-progress-fill.safe { 
  background: linear-gradient(to right, #27ae60, #2ecc71); /* Πράσινο - Αρχή */
}
.bell-progress-fill.warning { 
  background: linear-gradient(to right, #f39c12, #f1c40f); /* Πορτοκαλί - Μέση */
}
.bell-progress-fill.danger { 
  background: linear-gradient(to right, #c0392b, #e74c3c); /* Κόκκινο - ΑΓΩΝΙΑ! */
  animation: danger-pulse 1s infinite alternate; 
}

@keyframes danger-pulse { 
  from { opacity: 1; filter: drop-shadow(0 0 2px rgba(231, 76, 60, 0.5)); } 
  to { opacity: 0.8; filter: drop-shadow(0 0 10px rgba(231, 76, 60, 1)); } 
}

/* --- ΝΕΟ: Εφέ Σάρωσης (Radar Sweep) --- */
.radar-sweep-line {
  position: absolute;
  top: -10%;
  left: 0;
  width: 100%;
  height: 4px;
  background: #2ecc71;
  box-shadow: 0 0 15px 5px rgba(46, 204, 113, 0.7);
  z-index: 10;
  pointer-events: none;
  animation: radar-scan 1.2s ease-in-out forwards;
}

@keyframes radar-scan {
  0% { top: -10%; opacity: 0; }
  10% { opacity: 1; }
  90% { opacity: 1; }
  100% { top: 110%; opacity: 0; }
}

/* --- ΝΕΟ: Εφέ Γραφομηχανής (Typewriter Cursor) --- */
.typewriter-cursor {
  display: inline-block;
  width: 5px;
  height: 14px;
  background-color: #1e6cff; /* Το μπλε σου χρώμα */
  margin-left: 2px;
  animation: blink-cursor 0.7s infinite;
  vertical-align: middle;
}

@keyframes blink-cursor { 
  0%, 100% { opacity: 1; } 
  50% { opacity: 0; } 
}

/* ==========================================
   --- ΝΕΟ: Ακτινογραφία Ημέρας (Mini-Map) ---
   ========================================== */
.day-minimap {
  /* Αφαιρέσαμε τα position, bottom και left */
  width: 100%;
  height: 4px;
  display: flex;
  gap: 2px;
  margin-top: 8px; /* Φυσικό κενό από τα στοιχεία που βρίσκονται από πάνω της */
  box-sizing: border-box;
  opacity: 0.9;
}

.minimap-segment {
  height: 100%;
  border-radius: 4px 4px 0 0;
  transition: background-color 0.5s ease, opacity 0.5s ease;
}

/* Τα 3 States του Χρόνου */
.minimap-segment.past {
  background-color: rgba(17, 17, 17, 0.25); /* Γκρι (Πέρασε) */
}

.minimap-segment.future {
  background-color: rgba(255, 255, 255, 0.35); /* Ημιδιαφανές λευκό (Έρχεται) */
}

.minimap-segment.current {
  background-color: #1e6cff; /* Το μπλε σου χρώμα */
  box-shadow: 0 -2px 6px rgba(30, 108, 255, 0.6); /* Λάμψη προς τα πάνω */
  animation: minimap-pulse 1.5s infinite alternate ease-in-out;
}

/* Κάνουμε τα διαλείμματα μόνιμα πιο αχνά για να ξεχωρίζουν οπτικά */
.minimap-segment.break {
  opacity: 0.3;
}

@keyframes minimap-pulse {
  0% { opacity: 0.7; filter: brightness(1); }
  100% { opacity: 1; filter: brightness(1.3); }
}


  /* SAN SIMERA */
  @media screen and (min-width: 768px) {
    #history-wrapper-container-mobile { 
      display: none !important; 
    }
    /* Εξαφανίζει τελείως το ίδιο το widget του Blogger για να μην αφήνει κενό */
    .widget:has(#history-wrapper-container-mobile) {
      display: none !important;
      background: transparent !important;
      box-shadow: none !important;
      border: none !important;
      margin: 0 !important;
      padding: 0 !important;
    }
  }

  /* --- 2. CSS ΓΙΑ ΚΙΝΗΤΑ --- */
  @media screen and (max-width: 767px) {
    .history-modern-card-mobile {
      display: block !important;
      background: var(--glass) !important; 
      backdrop-filter: blur(10px);
      -webkit-backdrop-filter: blur(10px);
      border: 1px solid rgba(255, 255, 255, 0.25);
      border-left: 4px solid #a90e0e; 
      border-radius: var(--r); 
      padding: 25px; 
      box-shadow: var(--shadow); 
      margin-bottom: 10px;
      position: relative;
      overflow: hidden;
    }

    .history-header-mobile {
      display: flex;
      align-items: center;
      gap: 8px;
      margin-bottom: 8px;
      position: relative;
      z-index: 1;
    }

    .history-icon-mobile {
      background: rgba(169, 14, 14, 0.08); 
      padding: 8px 10px;
      border-radius: 8px;
      font-size: 16px; 
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .history-header-mobile h3 {
      margin: 0;
      color: var(--text); 
      font-size: 25px; 
      font-weight: 700;
      letter-spacing: -0.5px;
    }

    .history-content-mobile {
      font-size: 15px; 
      color: var(--text); 
      line-height: 1.5;
      font-weight: 500;
      text-align: left;
      position: relative;
      z-index: 1;
    }
  }

  /* 3. ΑΝΑΓΚΑΣΤΙΚΗ ΕΜΦΑΝΙΣΗ ΤΟΥ WIDGET ΣΤΟ ΚΙΝΗΤΟ */
  @media screen and (max-width: 767px) {
    /* Χρησιμοποιούμε το ID του wrapper για να εξαναγκάσουμε το Blogger να το δείξει */
    .widget:has(#history-wrapper-container-mobile),
    #history-wrapper-container-mobile {
      display: block !important;
      visibility: visible !important;
      opacity: 1 !important;
      height: auto !important;
      max-height: none !important;
      overflow: visible !important;
    }
  }
/* Ευθυγράμμιση και οδηγία για το κινητό */
.history-title-group-mobile {
  display: flex;
  flex-direction: column;
}

.history-hint-mobile {
  font-size: 13px;
  color: #a90e0e;
  font-weight: 600;
  margin-top: 2px;
  opacity: 0.85;
}
/* 1. ΕΞΩΤΕΡΙΚΟ ΠΛΑΙΣΙΟ (History Widget) */
  #history-wrapper-container-mobile {
    /* Εξωτερικά κενά (Margin) */
    margin-top: 0px !important;
    margin-bottom: 0px !important;

    /* Εσωτερικά κενά (Padding) */
    padding-top: 17px !important;
    padding-bottom: 17px !important;
  }

/* Το κρυφό πλαίσιο της αποστολής (Mobile) */
.mission-container-mobile {
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transition: max-height 0.4s ease, opacity 0.4s ease, margin-top 0.4s ease;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 10px;
  padding: 0 15px;
  margin-top: 0;
  border-left: 3px solid #3b82f6; 
}

.mission-container-mobile.open {
  max-height: 250px;
  opacity: 1;
  padding: 12px 15px;
  margin-top: 15px;
}

.mission-header-mobile {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
}

.mission-icon-mobile {
  font-size: 16px;
}

.mission-header-mobile h4 {
  margin: 0;
  font-size: 13px;
  font-weight: 700;
  color: #3b82f6;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

#mission-text-mobile {
  margin: 0;
  font-size: 13px;
  color: var(--text);
  line-height: 1.5;
  font-style: italic;
}

/* HKSERES OTI*/
.kf-wrapper { width: 100%; }

.kf-card-container {
  perspective: 1000px;
  width: 100%;
  max-width: 320px;
  height: 220px; /* Κλείδωμα Ύψους */
  margin: auto;
  font-family: "Segoe UI", system-ui, -apple-system, sans-serif; 
}

.kf-card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  text-align: center;
  transition: transform 0.7s cubic-bezier(0.4, 0.2, 0.2, 1);
  transform-style: preserve-3d;
  border-radius: 15px;
  cursor: pointer;
  outline: none;
  will-change: transform; 
}

/* Η κλάση που αναποδογυρίζει την κάρτα */
.kf-is-flipped { 
  transform: rotateY(180deg); 
}

/* =========================================
   3. ΟΨΕΙΣ (Μπροστά & Πίσω) & GLASSMORPHISM
   ========================================= */
.kf-card-front,
.kf-card-back {
  position: absolute;
  width: 100%;
  height: 100%;
  border-radius: 15px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 20px;
  box-sizing: border-box;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.15);
  overflow-y: auto; 
  -webkit-backface-visibility: hidden; 
  backface-visibility: hidden;
}

/* Κρύβουμε την μπάρα κύλισης */
.kf-card-front::-webkit-scrollbar,
.kf-card-back::-webkit-scrollbar {
  display: none;
}

.kf-card-front {
  background: rgba(255, 255, 255, 0.4);
  color: #333;
  border: 1px solid rgba(255, 255, 255, 0.6);
}

.kf-card-back {
  background: rgba(15, 157, 88, 0.78);
  color: #fff;
  transform: rotateY(180deg);
  border: 1px solid rgba(255, 255, 255, 0.4); 
}

/* =========================================
   4. ΤΥΠΟΓΡΑΦΙΑ & ΣΤΥΛ ΚΕΙΜΕΝΟΥ
   ========================================= */
.kf-title-mob, .kf-title-desk {
  margin: 0;
  color: #0f9d58;
  text-shadow: 1px 1px 2px rgba(255,255,255,0.8);
}
.kf-title-mob { font-size: 24px; }
.kf-title-mob span { font-size: 24px; margin-left: 15px; }

.kf-title-desk { font-size: 21px; }
.kf-title-desk span { font-size: 21px; margin-left: 15px; }

.kf-instruction {
  font-size: 14px;
  color: #444;
  margin-top: 8px;
  font-weight: 600;
}

.kf-fact-text {
  font-size: 17px;
  font-weight: 700;
  line-height: 1.4;
  text-align: center;
  margin: 0;
  text-shadow: 1px 1px 3px rgba(0,0,0,0.2);
}

.kf-re-instruction {
  font-size: 12px;
  margin: 10px 0 0;
  opacity: 0.9;
}

/* =========================================
   5. ΕΦΕ (ΦΑΝΤΑΣΜΑ & ΛΑΜΠΑ)
   ========================================= */
.kf-card-back > * { opacity: 0; transition: opacity 0.1s; }
.kf-is-flipped .kf-card-back > * { opacity: 1; transition: opacity 0.3s ease 0.40s; }

@keyframes kfPulsatingLight {
  0% { text-shadow: 0 0 5px rgba(255, 223, 0, 0.4); transform: scale(1); }
  50% { text-shadow: 0 0 20px rgba(255, 223, 0, 1), 0 0 30px rgba(255, 223, 0, 0.8); transform: scale(1.1); }
  100% { text-shadow: 0 0 5px rgba(255, 223, 0, 0.4); transform: scale(1); }
}

.kf-lamp-icon {
  font-size: 45px;
  margin-bottom: 5px;
  display: inline-block;
  animation: kfPulsatingLight 2s infinite ease-in-out;
}

/* Προσβασιμότητα */
.kf-card-inner:focus-visible {
  box-shadow: 0 0 0 4px rgba(15, 157, 88, 0.35), 0 8px 32px 0 rgba(0, 0, 0, 0.15);
  border-radius: 15px;
}

@media (prefers-reduced-motion: reduce) {
  .kf-card-inner { transition: none; }
  .kf-lamp-icon { animation: none !important; }
}


/* --- ΑΠΟΛΥΤΗ ΑΠΟΚΡΥΨΗ ΣΕ PC (Κουτί & Περιεχόμενο) --- */
@media screen and (min-width: 769px) {
    #slider-wrapper-mobile { display: none !important; }
    .widget:has(#slider-wrapper-mobile) {
        display: none !important;
        background: transparent !important;
        box-shadow: none !important;
        border: none !important;
        margin: 0 !important;
        padding: 0 !important;
    }
}

/* DIMOFILEIS ANARTISIS*/
@media screen and (max-width: 768px) {
    #slider-wrapper-mobile { display: block !important; margin: 0 auto 25px auto !important; width: 100%; max-width: 530px; }
    .slider-main-title { text-align: center; font-weight: 800; font-size: 14px; color: #a90e0e; font-family: 'Inter', Arial, sans-serif; text-transform: uppercase; letter-spacing: 0.5px; display: table; margin: 0 auto 5px auto; padding: 3px 8px; background: #f8f8f8; border: 1px solid #eeeeee; border-radius: 20px; box-shadow: 0 2px 6px rgba(0,0,0,0.06); }
    .slider-main-title::before { content: '🔥 '; font-size: 16px; margin-right: 4px; }
    
    /* ΑΛΛΑΓΗ 1: Σταθερό ύψος 300px (ίδιο με την εικόνα) και ένα απαλό γκρι φόντο */
    #custom-post-slider-mobile { 
        position: relative; 
        width: 100%; 
        height: 300px; 
        margin: 0 auto; 
        overflow: hidden; 
        border-radius: 12px; 
        background: #f4f4f4; 
    }
    
    /* ΑΛΛΑΓΗ 2: Τα slides μπαίνουν το ένα πάνω στο άλλο, και κρύβονται με opacity */
    #custom-post-slider-mobile .slide-item { 
        position: absolute; 
        top: 0; 
        left: 0; 
        width: 100%; 
        height: 100%; 
        opacity: 0; 
        visibility: hidden; 
        transform: scale(0.98); 
        transition: opacity 0.8s ease, transform 0.8s ease, visibility 0.8s;
        border-radius: 12px; 
        overflow: hidden; 
    }
    
    /* ΑΛΛΑΓΗ 3: Το ενεργό slide εμφανίζεται ομαλά από πάνω */
    #custom-post-slider-mobile .slide-item.active { 
        opacity: 1 !important; 
        visibility: visible !important; 
        z-index: 2; 
        transform: scale(1);
    }
    
    #custom-post-slider-mobile a.slide-link, #custom-post-slider-mobile a.slide-link:hover { background: none !important; text-decoration: none !important; border: none !important; padding: 0 !important; display: block !important; }
    #custom-post-slider-mobile .slide-item img { width: 100% !important; height: 300px !important; object-fit: fill !important; display: block !important; border-radius: 12px !important; margin: 0 !important; transition: transform 0.4s ease !important; }
    
    .slide-title-wrapper { position: absolute; bottom: 0; left: 0; width: 100%; padding: 0px; box-sizing: border-box; z-index: 2; }
    .slide-title { background: rgba(255, 255, 255, 0.85) !important; backdrop-filter: blur(10px) !important; -webkit-backdrop-filter: blur(10px) !important; color: #a90e0e !important; padding: 2px 2px !important; font-size: 15px !important; font-weight: 700 !important; font-family: 'Inter', Arial, sans-serif !important; text-align: center !important; border-radius: 10px !important; display: -webkit-box !important; -webkit-line-clamp: 2 !important; -webkit-box-orient: vertical !important; overflow: hidden !important; text-overflow: ellipsis !important; white-space: normal !important; word-wrap: break-word !important; line-height: 1.4 !important; max-height: 3.6em !important; border: 1px solid rgba(255, 255, 255, 0.4) !important; box-shadow: 0 4px 15px rgba(0,0,0,0.1) !important; margin: 0 !important; backface-visibility: hidden !important; -webkit-backface-visibility: hidden !important; transform: translateZ(0) !important; }
    
    #custom-post-slider-mobile .slider-arrow { position: absolute !important; top: 50% !important; transform: translateY(-50%) !important; background: rgba(255, 255, 255, 0.7) !important; color: #333 !important; border: none !important; cursor: pointer !important; width: 30px !important; height: 30px !important; padding: 0 !important; border-radius: 50% !important; font-size: 14px !important; display: flex !important; align-items: center !important; justify-content: center !important; z-index: 20 !important; box-shadow: 0 2px 6px rgba(0,0,0,0.3) !important; opacity: 1 !important; visibility: visible !important; }
    .arrow-prev { left: 4px !important; }
    .arrow-next { right: 4px !important; }
    .hidden-arrow { display: none !important; }
    
    /* (Το @keyframes slideFadeMob διαγράφηκε τελείως) */
    
    .video-badge { position: absolute; top: 4px; left: 4px; background: rgba(169, 14, 14, 0.85) !important; color: #ffffff !important; width: 34px; height: 34px; border-radius: 50%; display: flex; align-items: center; justify-content: center; z-index: 10; box-shadow: 0 4px 10px rgba(0,0,0,0.3); font-size: 13px; padding-left: 2px; box-sizing: border-box; pointer-events: none; }
    .slide-counter { position: absolute; top: 4px; right: 4px; background: rgba(17, 17, 17, 0.7); color: #ffffff; padding: 4px 10px; border-radius: 12px; font-size: 12px; font-weight: 600; font-family: 'Inter', Arial, sans-serif; z-index: 10; pointer-events: none; backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); box-shadow: 0 2px 6px rgba(0,0,0,0.3); }
}
#slider-wrapper-mobile {
  border-radius: 24px;                        /* Στρογγυλεμένες γωνίες */
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15); /* Η έντονη σκιά που επιλέξαμε πριν */      
   padding: 0px 8px 8px 8px;
}
@media screen and (max-width: 768px) {
/* 1. ΕΞΩΤΕΡΙΚΟ ΠΛΑΙΣΙΟ (Flip Container) */
 /* ΕΞΩΤΕΡΙΚΟ ΠΛΑΙΣΙΟ (Slider Wrapper) */
  #slider-wrapper-mobile {
    /* Εξωτερικά κενά (Margin) */
    margin-top: 0px !important;    /* Κενό από πάνω */
    margin-bottom: 0px !important; /* Κενό από κάτω */

    /* Εσωτερικά κενά (Padding) */
    padding-top: 15px !important;    /* Κενό εσωτερικά από πάνω */
    padding-bottom: 15px !important; /* Κενό εσωτερικά από κάτω */
  }
  }

/* EORTOLOGIO */

:root {
  --brand-red: #a90e0e;
  --brand-red-light: rgba(169, 14, 14, 0.08);
  --text-dark: #1e293b;
  --text-muted: #64748b;
  --bg-widget: linear-gradient(145deg, #f8fafc 0%, #eef2f6 100%);
  --glass-bg: rgba(255, 255, 255, 0.65);
  --glass-border: rgba(255, 255, 255, 0.8);
  --shadow-soft: 0 4px 20px rgba(0, 0, 0, 0.04);
  --shadow-hover: 0 12px 30px rgba(17, 17, 26, 0.08);
  --radius-lg: 24px;
  --radius-md: 16px;
  --radius-sm: 12px;
  --transition: 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

/* --- ΚΕΝΤΡΙΚΟ CONTAINER --- */
.combined-widget {
  background: var(--bg-widget);
  border-radius: var(--radius-lg);
  padding: 24px 20px;
  text-align: center;
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  border: 1px solid var(--glass-border);
  box-shadow: var(--shadow-soft), inset 0 1px 0 rgba(255, 255, 255, 1);
  max-width: 420px;
  margin: 0 auto;
  transition: transform var(--transition), box-shadow var(--transition);
  position: relative;
  overflow: hidden;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.combined-widget:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-hover), inset 0 1px 0 rgba(255, 255, 255, 1);
}

/* --- ΗΜΕΡΟΛΟΓΙΟ ICON (APPLE-LIKE STYLE) --- */
.eortologio-icon {
  width: 64px !important;
  height: 70px !important;
  margin: 0 auto 16px auto !important;
  background-color: var(--glass-bg) !important;
  background-image: none !important; /* Απενεργοποιεί τυχόν default blogger SVG */
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  border: 1px solid rgba(0, 0, 0, 0.05) !important;
  border-radius: 16px !important;
  display: flex !important;
  flex-direction: column !important;
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.05), inset 0 2px 4px rgba(255, 255, 255, 0.8) !important;
  overflow: hidden !important;
  padding: 0 !important;
}

.eort-icon-header {
  background: var(--brand-red) !important;
  background-image: linear-gradient(135deg, #c41c1c, #a90e0e) !important;
  height: 20px !important;
  width: 100% !important;
  min-height: 20px !important;
  margin: 0 !important;
  padding: 0 !important;
  border-bottom: 1px solid rgba(0, 0, 0, 0.1) !important;
}

.eort-icon-body {
  flex: 1 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: var(--text-dark) !important;
  font-weight: 900 !important;
  font-size: 28px !important;
  line-height: 1 !important;
  background: transparent !important;
  margin: 0 !important;
  padding: 0 !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.05) !important;
}

/* --- ΤΥΠΟΓΡΑΦΙΑ (ΤΙΤΛΟΙ & ΗΜΕΡΟΜΗΝΙΑ) --- */
.eortologio-title {
  font-size: 1.25rem;
  font-weight: 800;
  color: var(--text-dark);
  margin: 0 0 6px 0;
  text-transform: uppercase;
  letter-spacing: 0.8px;
}

.eortologio-date {
  font-size: 0.95rem;
  color: var(--text-muted);
  margin-bottom: 20px;
  font-weight: 600;
  text-transform: capitalize;
  letter-spacing: 0.3px;
}

/* --- ΚΟΥΤΙΑ ΠΛΗΡΟΦΟΡΙΩΝ (INFO BOXES) --- */
.info-box {
  display: none;
  font-size: 0.88rem;
  font-weight: 700;
  padding: 12px 14px;
  border-radius: var(--radius-sm);
  margin-bottom: 10px;
  line-height: 1.4;
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
  transition: all 0.3s ease;
}

.world-day {
  color: #0056b3;
  background: rgba(204, 229, 255, 0.6);
  border: 1px solid rgba(0, 86, 179, 0.15);
}

.holiday {
  color: #15803d;
  background: rgba(220, 252, 231, 0.6);
  border: 1px solid rgba(21, 128, 61, 0.15);
  animation: pulseHoliday 2.5s infinite cubic-bezier(0.66, 0, 0, 1);
}

.school {
  color: #b45309;
  background: rgba(254, 243, 199, 0.6);
  border: 1px solid rgba(180, 83, 9, 0.15);
}

.names {
  color: var(--brand-red);
  background: var(--brand-red-light);
  border: 1px solid rgba(169, 14, 14, 0.15);
}

@keyframes pulseHoliday {
  0% { box-shadow: 0 0 0 0 rgba(21, 128, 61, 0.2); }
  70% { box-shadow: 0 0 0 8px rgba(21, 128, 61, 0); }
  100% { box-shadow: 0 0 0 0 rgba(21, 128, 61, 0); }
}

/* --- ΕΝΟΤΗΤΑ ΚΑΙΡΟΥ --- */
.weather-section {
  padding-top: 20px;
  margin-top: 20px;
  border-top: 1px solid rgba(0, 0, 0, 0.04);
  position: relative;
}

.hub-weather-tag {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  background: var(--glass-bg);
  color: var(--brand-red);
  font-size: 0.75rem;
  font-weight: 800;
  text-transform: uppercase;
  padding: 6px 14px;
  border-radius: 30px;
  margin-bottom: 18px;
  border: 1px solid rgba(169, 14, 14, 0.1);
  box-shadow: 0 2px 8px rgba(169, 14, 14, 0.05);
}

.compact-weather-row {
  display: flex;
  justify-content: space-between;
  gap: 12px;
}

/* --- ΚΑΡΤΕΣ ΚΑΙΡΟΥ & 3D FLIP EFFECT --- */
.c-day-card {
  flex: 1;
  background: transparent;
  perspective: 1200px;
  height: 125px; /* Ελαφρώς ψηλότερο για καλύτερη αναλογία */
  position: relative;
}

.c-day-inner {
  position: relative;
  width: 100%;
  height: 100%;
  text-align: center;
  transition: transform 0.7s cubic-bezier(0.23, 1, 0.32, 1); /* Πιο ομαλή καμπύλη κίνησης */
  transform-style: preserve-3d;
  will-change: transform;
}

.c-day-card:hover .c-day-inner {
  transform: rotateX(180deg);
}

/* Αποτροπή τρέμουλου (pointer-events: none στο περιεχόμενο) */
.c-day-front, .c-day-back {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  border-radius: var(--radius-md);
  padding: 8px 4px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  box-sizing: border-box;
  transform: translateZ(0); /* Hardware acceleration */
}

/* Εμπρός Όψη */
.c-day-front {
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.02);
  pointer-events: none;
}

/* Πίσω Όψη (Πρόγνωση Διαλειμμάτων) */
.c-day-back {
  background: linear-gradient(135deg, #e6f0fa, #dbeafe);
  border: 1px solid rgba(0, 86, 179, 0.15);
  transform: rotateX(180deg);
  color: var(--text-dark);
  box-shadow: inset 0 2px 10px rgba(255, 255, 255, 0.5);
}

/* Ειδική Σήμανση: "ΣΗΜΕΡΑ" */
.c-day-card.today {
  border: 2px solid var(--brand-red);
  border-radius: var(--radius-md);
  background: var(--brand-red-light);
  box-shadow: 0 4px 12px rgba(169, 14, 14, 0.08);
}
.c-day-card.today .c-day-front {
  border: none !important;
  background: transparent !important;
  box-shadow: none !important;
}
.c-day-card.today .c-day-back {
  border: none !important;
  background: transparent !important;
  box-shadow: none !important;
}
.c-day-card.today .c-day-name {
  color: var(--brand-red);
}

/* Κείμενα εντός της κάρτας Καιρού */
.c-day-name {
  font-size: 0.75rem;
  font-weight: 900;
  color: var(--text-dark);
  text-transform: uppercase;
  margin-bottom: 6px;
  display: block;
  letter-spacing: 0.5px;
}
.c-day-icon {
  font-size: 28px;
  margin-bottom: 6px;
  display: block;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.1));
}
.c-day-temps {
  font-size: 0.85rem;
  font-weight: 900;
  color: var(--text-muted);
}
.c-max {
  color: var(--brand-red);
  margin-right: 4px;
}

/* --- ΚΕΙΜΕΝΑ ΠΙΣΩ ΟΨΗΣ (ΔΙΑΛΕΙΜΜΑΤΑ) --- */
.sch-time {
  font-size: 0.60rem;
  font-weight: 800;
  display: block;
  margin: 2px 0;
  color: var(--text-dark);
  white-space: nowrap;
}
@media (max-width: 768px) {
  .sch-time {
    font-size: 0.70rem;
  }
}
.sch-msg {
  font-size: 0.7rem;
  font-weight: 900;
  color: var(--brand-red);
  text-transform: uppercase;
  display: block;
  margin-top: 2px;
  hyphens: auto;
  -webkit-hyphens: auto;
  word-wrap: break-word;
  overflow-wrap: break-word;
}

/* --- ΒΑΝDGES ΕΙΔΟΠΟΙΗΣΕΩΝ (ΒΡΟΧΗ / ΧΙΟΝΙ) --- */
.rain-list, .snow-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
  align-items: center;
  width: 100%;
  margin-top: 6px;
}

.rain-badge {
  background: var(--brand-red-light);
  color: var(--brand-red);
  font-size: 0.65rem;
  font-weight: 800;
  padding: 3px 8px;
  border-radius: 8px;
  border: 1px solid rgba(169, 14, 14, 0.15);
  display: inline-block;
}

.snow-badge {
  background: rgba(30, 108, 255, 0.1);
  color: #1e6cff;
  font-size: 0.65rem;
  font-weight: 800;
  padding: 3px 8px;
  border-radius: 8px;
  border: 1px solid rgba(30, 108, 255, 0.2);
  display: inline-block;
}

/* Animation Βροχής/Χιονιού */
@keyframes bounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-3px); }
}

/* --- MOBILE RESPONSIVENESS & BLOGGER OVERRIDES --- */
@media screen and (max-width: 768px) {
  .combined-widget {
    padding: 20px 15px;
    border-radius: 20px;
  }
  .compact-weather-row {
    gap: 8px;
  }
  .c-day-card {
    height: 125px;
  }
  }

/* --- MOZILLA FIREFOX ΕΙΔΙΚΗ ΔΙΟΡΘΩΣΗ ΓΙΑ ΤΟ 3D FLIP --- */
@-moz-document url-prefix() {
  .c-day-card:hover .c-day-inner .c-day-front {
    opacity: 0;
    transition: opacity 0s 0.35s; /* Ακαριαία αλλαγή ακριβώς στη μέση */
  }
  .c-day-inner .c-day-front {
    transition: opacity 0s 0.35s;
  }
}
/* Ομαλή μετάβαση στο φόντο του καιρού */
.combined-widget {
  transition: background 1.5s ease, transform 0.4s ease, box-shadow 0.4s ease !important;
}

/* Ήλιος (Απαλό κιτρινωπό gradient) */
.bg-weather-sun {
  background: linear-gradient(145deg, rgba(255, 250, 205, 0.75) 0%, rgba(248, 250, 252, 0.9) 100%) !important;
}

/* Βροχή / Μουντός (Γκριζο-μπλε) */
.bg-weather-rain {
  background: linear-gradient(145deg, rgba(176, 196, 222, 0.55) 0%, rgba(220, 228, 236, 0.85) 100%) !important;
}

/* Χιόνι (Ανοιχτό γαλάζιο του πάγου) */
.bg-weather-snow {
  background: linear-gradient(145deg, rgba(224, 255, 255, 0.65) 0%, rgba(240, 248, 255, 0.85) 100%) !important;
}

/* --- NAVIGATION ΗΜΕΡΟΜΗΝΙΑΣ (ΜΟΝΟ ΓΙΑ MOBILE Ή ΟΠΟΥ ΥΠΑΡΧΕΙ ΤΟ WRAPPER) --- */
.eort-nav-wrapper {
  display: flex;
  align-items: center;      /* Κεντράρει κάθετα βελάκια και κείμενο στην ίδια ευθεία */
  justify-content: center;  /* Κεντράρει οριζόντια όλο το μπλοκ */
  gap: 16px;                /* Απόσταση ανάμεσα στα βελάκια και την ημερομηνία */
  margin-bottom: 20px;      /* Το κενό που είχε η ημερομηνία, το βάζουμε πλέον σε όλο το wrapper */
}

/* Αφαιρούμε το margin από την ημερομηνία ΜΟΝΟ όταν είναι ανάμεσα στα βελάκια, 
   για να μην στραβώνει η στοίχιση. Η έκδοση του PC μένει άθικτη! */
.eort-nav-wrapper .eortologio-date {
  margin-bottom: 0; 
  line-height: 1; /* Βοηθάει στο απόλυτο κάθετο κεντράρισμα */
}

/* Στυλ για τα βελάκια πλοήγησης (ώστε να φαίνονται μοντέρνα και να ταιριάζουν με το widget) */
.eort-nav-btn {
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  color: var(--brand-red);
  font-size: 1rem;
  width: 34px;
  height: 34px;
  border-radius: 50%; /* Στρογγυλά κουμπάκια */
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
  transition: all var(--transition);
  padding: 0;
}

.eort-nav-btn:hover {
  background: var(--brand-red);
  color: #ffffff;
  transform: scale(1.08); /* Μικρό εφέ μεγέθυνσης στο πάτημα/hover */
  box-shadow: 0 4px 10px rgba(169, 14, 14, 0.2);
}

/* Προαιρετικά: Μικραίνουμε ελάχιστα τα κουμπιά σε πολύ μικρές οθόνες κινητών */
@media screen and (max-width: 400px) {
  .eort-nav-btn {
    width: 30px;
    height: 30px;
    font-size: 0.9rem;
  }
  .eort-nav-wrapper {
    gap: 10px;
  }
}
/* Νύχτα (Απαλό βραδινό μπλε) */
.bg-weather-night {
  background: linear-gradient(145deg, rgba(200, 210, 230, 0.75) 0%, rgba(160, 175, 200, 0.9) 100%) !important;
}
/* =========================================
   ΝΕΑ FEATURES: SMART ADVISOR & ANIMATIONS
   ========================================= */

/* Στυλ για τον Έξυπνο Σύμβουλο */
.smart-advisor-box {
  background: var(--glass-bg);
  border-left: 4px solid var(--brand-red);
  padding: 12px 14px;
  border-radius: var(--radius-sm);
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--text-dark);
  margin-bottom: 16px;
  box-shadow: var(--shadow-soft);
  text-align: left;
  display: flex;
  align-items: center;
  gap: 12px;
  animation: slideDownFade 0.4s ease;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.smart-advisor-icon { font-size: 1.6rem; }
.smart-advisor-text { flex: 1; line-height: 1.3; }

@keyframes slideDownFade {
  from { opacity: 0; transform: translateY(-10px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Animations Αλλαγής Ημέρας (Slide-in / Slide-out) */
.anim-slide-out-left { animation: slideOutLeft 0.25s forwards ease-in; }
.anim-slide-out-right { animation: slideOutRight 0.25s forwards ease-in; }
.anim-slide-in-right { animation: slideInRight 0.25s forwards ease-out; }
.anim-slide-in-left { animation: slideInLeft 0.25s forwards ease-out; }

@keyframes slideOutLeft { to { opacity: 0; transform: translateX(-20px); } }
@keyframes slideOutRight { to { opacity: 0; transform: translateX(20px); } }
@keyframes slideInRight { from { opacity: 0; transform: translateX(20px); } to { opacity: 1; transform: translateX(0); } }
@keyframes slideInLeft { from { opacity: 0; transform: translateX(-20px); } to { opacity: 1; transform: translateX(0); } }

/* =========================================
   ΝΕΑ FEATURES: SEARCH & BACK TO TODAY (PC)
   ========================================= */

/* --- 1. Διαδραστικό Κείμενο (Back to Today) --- */
.eortologio-date.is-returnable {
  color: var(--brand-red);
  cursor: pointer;
  transition: transform 0.2s ease, text-shadow 0.2s ease;
  display: inline-flex;
  align-items: center;
}
.eortologio-date.is-returnable:hover {
  transform: scale(1.03);
  text-shadow: 0 2px 5px rgba(169, 14, 14, 0.15);
}
@media (max-width: 768px) {
.return-to-today-badge {
  font-size: 1.25rem;
  font-weight: 800;
  opacity: 0.9;
  margin-left: 3px;
  text-decoration: none;
}
   }
@media (min-width: 769px) {
  .return-to-today-badge {
  font-size: 1.25rem; /* Ή ό,τι μέγεθος έχεις επιλέξει */
  font-weight: 700;
  opacity: 0.9;
  margin-left: 1px;
  text-decoration: none!important;
  text-underline-offset: 3px;
  white-space: nowrap; /* ΠΡΟΣΘΗΚΗ: Αποτρέπει την αναδίπλωση του κειμένου */
}
}

/* --- 2. Expanding Search Box --- */
.eort-date-search-group {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  transition: all 0.3s ease;
}
.eort-search-box {
  display: flex;
  align-items: center;
  margin-left: 8px; /* Κενό από την ημερομηνία */
  position: relative;
}
.eort-search-icon {
  cursor: pointer;
  font-size: 1.1rem;
  opacity: 0.7;
  transition: transform 0.2s ease, opacity 0.2s ease;
  z-index: 10;
  position: relative;
  padding: 4px;
}
.eort-search-icon:hover { transform: scale(1.15); opacity: 1; }

.eort-search-input {
  width: 0;
  opacity: 0;
  padding: 0;
  border: none;
  background: var(--glass-bg);
  backdrop-filter: blur(10px);
  border-radius: 20px;
  font-family: inherit;
  font-size: 0.85rem;
  color: var(--text-dark);
  outline: none;
  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: inset 0 2px 4px rgba(0,0,0,0.05);
}

/* Όταν η αναζήτηση ενεργοποιείται (το width ξεχειλώνει) */
.eort-search-box.active .eort-search-input {
  width: 140px;
  opacity: 1;
  padding: 6px 12px 6px 30px; /* Χώρος αριστερά για τον φακό */
  margin-left: -28px; /* Φέρνει το input πίσω από τον φακό */
  border: 1px solid rgba(169, 14, 14, 0.3);
}

/* Απαλό fade out στην ημερομηνία όταν γράφει για να μην κουράζει */
.eort-date-search-group.searching .eortologio-date {
  opacity: 0.1;
  pointer-events: none;
}

/* --- 3. Αποτελέσματα Αναζήτησης (Dropdown) --- */
.eort-search-results {
  position: absolute;
  top: 120%;
  right: 0;
  width: 240px;
  max-height: 220px;
  overflow-y: auto;
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-hover);
  border: 1px solid var(--glass-border);
  z-index: 100;
  display: none;
  text-align: left;
}
.eort-search-results.show {
  display: block;
  animation: slideDownFade 0.2s ease;
}
.search-res-item {
  padding: 10px 12px;
  border-bottom: 1px solid rgba(0,0,0,0.04);
  font-size: 0.8rem;
  cursor: pointer;
  color: var(--text-dark);
  transition: background 0.2s;
  line-height: 1.3;
}
.search-res-item:last-child { border-bottom: none; }
.search-res-item:hover { background: var(--brand-red-light); }
.search-res-date { 
  font-weight: 800; font-size: 0.7rem; color: var(--brand-red); 
  display: block; margin-bottom: 2px; 
}
@keyframes slideDownFade {
  from { opacity: 0; transform: translateY(-10px); }
  to { opacity: 1; transform: translateY(0); }
}
@media (max-width: 600px) {
  .eort-search-box.active .eort-search-input { width: 120px; } /* Λίγο πιο κοντό στο κινητό */
  .eort-search-results { width: 230px; right: -25px; } /* Ευθυγράμμιση για να μη βγαίνει εκτός οθόνης */
}

/* HMEROLOGIO */
  #calendar-widget-wrapper,
  #calendar-widget-wrapper-mobile {
    width: 100%;
    max-width: 360px; /* Ιδανικό μέγεθος για sidebar και κινητά */
    margin: 0 auto 25px auto; /* Κεντράρισμα χωρίς αρνητικά margins */
    padding: 0 5px;
    box-sizing: border-box;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    border-radius: 24px; 
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
      /* 1. ΕΞΩΤΕΡΙΚΑ ΚΕΝΑ (Margin) */
  margin-top: 0px;    /* Κενό από πάνω */
  margin-bottom: 0px; /* Κενό από κάτω */
  /* 2. ΕΣΩΤΕΡΙΚΑ ΚΕΝΑ (Padding) */
  padding-top: 20px;    /* Κενό από το πάνω τοίχωμα μέχρι τον τίτλο */
  /* Κενό από το κάτω τοίχωμα */
  padding-bottom: 5px;
  }

  #calendar-container,
  #calendar-container-mobile {
    width: 100%;
    touch-action: pan-y;
    user-select: none;   
    -webkit-user-drag: none;
  }

  /* --- HEADER (Μήνας & Βέλη) με Flexbox (Τέλος τα αρνητικά margins!) --- */
  .calendar-header-flex {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 10px;
    margin-bottom: 10px;
  }

  #prevBtn, #nextBtn,
  #prevBtn-mobile, #nextBtn-mobile { 
    border: none;
    background: none;
    font-size: 20px;
    cursor: pointer;
    color: #555;
    padding: 5px 15px; /* Καλύτερο πάτημα σε κινητά */
    transition: color 0.2s ease, transform 0.2s ease; 
  }
  
  #prevBtn:hover, #nextBtn:hover,
  #prevBtn-mobile:hover, #nextBtn-mobile:hover { 
    color: #000; 
    transform: scale(1.2); 
  }

  
  #monthLabel-mobile { 
    font-size: 16px; 
    color: #333; 
    letter-spacing: 0.2px; 
    font-weight: bold;
    text-transform: capitalize;
  }
#monthLabel { 
    font-size: 15px; 
    color: #333; 
    letter-spacing: 0.1px; 
    font-weight: bold;
    text-transform: capitalize;
  }

  /* --- ΕΜΦΑΝΙΣΗ ΚΕΙΜΕΝΩΝ & ΤΙΤΛΩΝ --- */
  .mobile-only-title { 
    display: none; 
  }
  
  .calendar-hint-text {
    text-align: center; 
    font-size: 13px; 
    font-weight: 700; 
    color: #7f8c8d; 
    margin-bottom: 12px; 
    font-style: italic; 
  }

  @media (max-width: 768px) {
    .mobile-only-title {
        display: block;
        text-align: center;
        font-weight: bold;
        font-size: 18px;
        margin-bottom: 5px;
        color: #333; 
    }
    #calendar-widget-wrapper,
    #calendar-widget-wrapper-mobile {
        max-width: 400px; /* Λίγο μεγαλύτερο στα κινητά αν χρειάζεται */
    }
  }

  /* =========================================================
     FULLCALENDAR STYLES
     ========================================================= */
  #calendar,
  #calendar-mobile { 
    width: 100%;
    /* Το ύψος ρυθμίζεται αυτόματα με CSS πλέον */
    min-height: 410px; 
  }
  
  #calendar .fc-scrollgrid,
  #calendar-mobile .fc-scrollgrid { border-radius: 8px; overflow: hidden; }
  
  #calendar .fc-theme-standard td, #calendar .fc-theme-standard th,
  #calendar-mobile .fc-theme-standard td, #calendar-mobile .fc-theme-standard th { border-color: #eaeaea; }
  
  #calendar .fc-day-today,
  #calendar-mobile .fc-day-today { background-color: #f0f8ff !important; font-weight: bold; }
  
  #calendar .fc-col-header-cell,
  #calendar-mobile .fc-col-header-cell { border: none !important; padding-bottom: 0px; }
  
  #calendar .fc-col-header-cell-cushion,
  #calendar-mobile .fc-col-header-cell-cushion { text-transform: uppercase; font-size: 11px !important; color: #888; font-weight: 600; }
  
  /* Απενεργοποίηση εσωτερικού scroll */
  .fc-scroller, .fc-scroller-liquid-absolute { overflow: hidden !important; }

  /* =========================================================
     ΔΙΑΔΡΑΣΤΙΚΟΤΗΤΑ & ΕΦΕ (Δικά σου)
     ========================================================= */
  #calendar .fc-event,
  #calendar-mobile .fc-event { pointer-events: none; transition: transform 0.2s ease, background 0.2s ease; }
  
  .fc-daygrid-day-frame.has-posts { cursor: pointer !important; }
  
  .post-dot {
    position: absolute;
    bottom: 12px;         
    left: 20%;            
    right: 20%;           
    height: 3px;          
    background: #e74c3c;  
    border-radius: 4px;
    transition: all 0.3s ease;
  }

  .fc-daygrid-day-frame.has-posts:hover .post-dot {
    background: #4A90E2; 
    box-shadow: 0 0 10px 3px rgba(74, 144, 226, 0.6); 
    transform: scale(1.15); 
  }

  .fc-daygrid-day-frame.has-posts:hover {
      background-color: rgba(74, 144, 226, 0.04); 
      border-radius: 4px;
  }

  /* =========================================================
     TOOLTIP & MODAL (Συννεφάκι)
     ========================================================= */
  #calendar-overlay,
  .calendar-overlay-class { /* Χρησιμοποιούμε και την κλάση για το κινητό */
      display: none; position: fixed; top: 0; left: 0; width: 100vw; height: 100vh;
      background: rgba(0, 0, 0, 0.6);
      backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
      z-index: 9998; opacity: 0; transition: opacity 0.3s ease;
  }

  #calendar-tooltip,
  .calendar-tooltip-class { /* Χρησιμοποιούμε και την κλάση για το κινητό */
      display: none; position: absolute;
      background: rgba(255, 255, 255, 0.7);
      backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
      border-radius: 16px; padding: 18px;
      box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15);
      border: 1px solid rgba(255, 255, 255, 0.6);
      z-index: 9999; min-width: 220px; max-width: 300px;
      opacity: 0; pointer-events: auto;
      transition: opacity 0.3s cubic-bezier(0.25, 0.8, 0.25, 1), transform 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
  }

  .tooltip-title-link {
      display: block; padding: 12px 15px; margin-bottom: 10px;
      background: rgba(255, 255, 255, 0.8);
      border-radius: 10px; text-decoration: none; color: #2c3e50;
      font-weight: 600; font-size: 14px; text-align: center;
      transition: all 0.3s ease;
  }
  .tooltip-title-link:last-child { margin-bottom: 0; }
  .tooltip-title-link:hover {
      background: #4A90E2; color: #ffffff;
      transform: translateY(-3px) scale(1.02);
      box-shadow: 0 6px 15px rgba(74, 144, 226, 0.4);
  }
/* =========================================================
   ANIMATIONS ΑΛΛΑΓΗΣ ΜΗΝΑ (Swipe / Kλικ)
   ========================================================= */
#calendar-container,
#calendar-container-mobile {
  overflow-x: hidden;
}

.cal-out-left { animation: calSlideOutLeft 0.15s forwards ease-in; }
.cal-out-right { animation: calSlideOutRight 0.15s forwards ease-in; }
.cal-in-left { animation: calSlideInLeft 0.2s forwards ease-out; }
.cal-in-right { animation: calSlideInRight 0.2s forwards ease-out; }

@keyframes calSlideOutLeft { 
  to { transform: translateX(-20px); opacity: 0; } 
}
@keyframes calSlideOutRight { 
  to { transform: translateX(20px); opacity: 0; } 
}
@keyframes calSlideInRight { 
  from { transform: translateX(20px); opacity: 0; } 
  to { transform: translateX(0); opacity: 1; } 
}
@keyframes calSlideInLeft { 
  from { transform: translateX(-20px); opacity: 0; } 
  to { transform: translateX(0); opacity: 1; } 
}
/* =========================================================
   LEVEL 3: DIMENSIONAL ZOOM, ROULETTE, TIME ANCHOR, MAGNETIC UI
   (ΔΙΟΡΘΩΜΕΝΟ - ΑΠΟΛΥΤΑ ΣΤΑΘΕΡΟ ΧΩΡΙΣ SCROLL)
   ========================================================= */

/* --- Ασφάλεια: Μόνιμος κενός χώρος κάτω από τις μέρες & απαγόρευση εσωτερικού scroll --- */
#calendar-container,
#calendar-container-mobile { 
    position: relative !important; 
    padding-bottom: 32px !important; 
    overflow: hidden !important; 
}

/* --- Premium Κουμπιά & Header --- */
.month-zoom-label { position: relative; padding-right: 18px; cursor: pointer; transition: color 0.2s; }
.month-zoom-label:hover { color: #4A90E2; }
.month-zoom-label::after {
    content: '▾'; position: absolute; right: 0; top: 50%;
    transform: translateY(-50%); font-size: 14px; opacity: 0.6;
}

.advanced-btn { background: none; border: none; cursor: pointer; outline: none; transition: transform 0.2s, background 0.2s; }
.dice-btn { font-size: 22px; padding: 0 5px; border-radius: 50%; margin-left: 5px; }
.dice-btn:hover { transform: scale(1.15) rotate(15deg); }
.dice-btn.spinning { animation: spinDice 0.2s linear infinite; pointer-events: none; }
@keyframes spinDice { 100% { transform: rotate(360deg); } }

/* --- Time Anchor (Σήμερα) --- */
.today-anchor-btn {
    position: absolute; 
    bottom:  1px; /* Κάθεται ακριβώς μέσα στον νέο κενό χώρο που ανοίξαμε */
    left: 50%; 
    transform: translateX(-50%) scale(0.8); /* Scale αντί για translateY για να μην βγαίνει εκτός ορίων */
    background: #4A90E2; color: #fff; padding: 6px 18px; border-radius: 20px;
    font-size: 13px; font-weight: bold; box-shadow: 0 4px 12px rgba(74, 144, 226, 0.4);
    opacity: 0; pointer-events: none; transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); z-index: 100;
}
.today-anchor-btn.visible { 
    opacity: 1; pointer-events: auto; transform: translateX(-50%) scale(1); 
}
.today-anchor-btn:hover { background: #357ABD; transform: translateX(-50%) scale(1.05); }

/* --- Εφέ Ρουλέτας --- */
.roulette-blur { filter: blur(3px); transition: filter 0.2s; pointer-events: none; }

/* --- Dimensional Zoom (Year View Heatmap) --- */
#year-view-overlay {
    position: absolute; 
    top: 0; left: 0; right: 0; bottom: 0; /* Τεντώνει αυστηρά στα όρια αντί για 100% */
    background: rgba(255, 255, 255, 0.95); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
    z-index: 90; display: flex; flex-direction: column; opacity: 0; pointer-events: none; 
    transform: scale(0.95); /* Ξεκινάει μικρότερο (0.95) αντί για 1.05 που ξεχείλωνε την οθόνη! */
    transition: opacity 0.3s ease, transform 0.3s ease; border-radius: 8px; box-sizing: border-box;
}
#year-view-overlay.active { opacity: 1; pointer-events: auto; transform: scale(1); }

.year-header { display: flex; justify-content: space-between; align-items: center; padding: 15px; font-weight: bold; font-size: 16px; border-bottom: 1px solid #eee; }
.year-nav-btn { background: none; border: none; cursor: pointer; font-size: 18px; color: #555; transition: 0.2s; padding: 0 10px; }
.year-nav-btn:hover { color: #000; transform: scale(1.2); }

.year-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; padding: 15px; flex-grow: 1; align-content: center; }
.year-month-box {
    background: #f8f9fa; border: 1px solid #eaeaea; border-radius: 8px; padding: 12px 0;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    cursor: pointer; font-size: 14px; font-weight: 600; color: #555; transition: all 0.2s ease;
}
.year-month-box:hover { transform: translateY(-2px); box-shadow: 0 4px 10px rgba(0,0,0,0.1); border-color: #4A90E2; color: #222; }

/* Χρώματα Heatmap */
.year-month-box.has-data { background: #e3f2fd; border-color: #bbdefb; color: #1565c0; }
.year-month-box.med { background: #90caf9; border-color: #64b5f6; color: #0d47a1; }
.year-month-box.high { background: #42a5f5; border-color: #1e88e5; color: #fff; }
.ym-count { font-size: 11px; opacity: 0.8; font-weight: normal; margin-top: 2px; }

/* --- Magnetic Dot Transitions (Το αφήνουμε για το PC) --- */
.post-dot { transition: transform 0.1s ease-out, background 0.2s, box-shadow 0.2s; will-change: transform; }

/* --- ΙΔΕΑ 5: Faded Blue (Ταιριάζει με το brand σου) --- */
.school-holiday-cell {
    /* Ελάχιστο γαλάζιο του πάγου */
    background-color:rgba(74, 144, 226, 0.07) !important; 
    background-image: repeating-linear-gradient(
        45deg,
        transparent,
        transparent 10px,
        rgba(74, 144, 226, 0.025) 10px,
        rgba(74, 144, 226, 0.025) 11px
    ) !important;
}
.school-holiday-cell .fc-daygrid-day-top {
    opacity: 0.55 !important;
    color: #4A90E2 !important; /* Κάνει τον αριθμό απαλό γαλάζιο */
}

/* Εξαίρεση για τη σημερινή μέρα */
#calendar .fc-day-today.school-holiday-cell, 
#calendar-mobile .fc-day-today.school-holiday-cell {
    background-color: #f0f8ff !important;
    background-image: none !important;
}
#calendar .fc-day-today.school-holiday-cell .fc-daygrid-day-top, 
#calendar-mobile .fc-day-today.school-holiday-cell .fc-daygrid-day-top {
    opacity: 1 !important;
    color: inherit !important;
}
#calendar .fc-daygrid-day-number,
#calendar-mobile .fc-daygrid-day-number {
    white-space: nowrap !important;       /* Απαγορεύει στο νούμερο (π.χ. 30) να σπάσει σε 2 γραμμές */
    word-break: keep-all !important;
    display: inline-block !important; 
}

#calendar .fc-daygrid-day-top,
#calendar-mobile .fc-daygrid-day-top {
    display: flex !important;
    flex-wrap: nowrap !important;         /* Αποτρέπει στα περιεχόμενα της κεφαλίδας του κελιού να πέσουν κάτω */
}

/* DIAKOPES */
  .holiday-widget {
    background-color: #F0F6FA; 
    border-radius: 24px; 
    padding: 20px;
    text-align: center;
    font-family: 'Inter', sans-serif;
    border: 1px solid rgba(0, 0, 0, 0.04);
    max-width: 400px;
    margin: 10px auto;
    transition: transform 0.3s ease;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
  }

@media screen and (max-width: 768px) {
   .holiday-widget {
  /* 1. ΕΞΩΤΕΡΙΚΑ ΚΕΝΑ (Margin) */
  margin-top: 0px;    /* Κενό από πάνω */
  margin-bottom: 0px; /* Κενό από κάτω */
  /* 2. ΕΣΩΤΕΡΙΚΑ ΚΕΝΑ (Padding) */
  padding-top: 17px;    /* Κενό από το πάνω τοίχωμα μέχρι τον τίτλο */
  /* Κενό από το κάτω τοίχωμα */
  padding-bottom: 17px;
} 
  }
  .holiday-widget:hover {
    transform: translateY(-3px);
  }
  .holiday-icon {
    font-size: 2.3em;
    margin-bottom: 10px;
    display: block;
    animation: bounce 2s infinite;
  }
  .holiday-text {
    font-size: 1.2em;
    font-weight: 800;
    color: #2c3e50;
    margin: 0;
    line-height: 1.4;
  }
  .holiday-days {
    color: #a90e0e;
    font-size: 1.3em;
    display: block;
    margin-bottom: 4px;
  }

  @keyframes bounce {
    0%, 20%, 50%, 80%, 100% { transform: translateY(0); }
    40% { transform: translateY(-8px); }
    60% { transform: translateY(-4px); }
  }

/* --- ΣΤΥΛ ΓΙΑ ΤΗ ΜΠΑΤΑΡΙΑ ΚΑΙ ΤΑ ΜΗΝΥΜΑΤΑ --- */
  .battery-wrapper { margin-top: 15px; display: flex; flex-direction: column; align-items: center; cursor: pointer; }
  
  /* Νέα, πιο γεμάτη 3D μπαταρία */
  .battery-box { 
    width: 180px; 
    height: 28px; 
    background-color: #eef5fa; /* Απαλό φόντο όταν αδειάζει */
    border: 3px solid #2c3e50; 
    border-radius: 8px; 
    position: relative; 
    padding: 3px; 
    box-shadow: inset 0 2px 4px rgba(0,0,0,0.1), 0 4px 10px rgba(0,0,0,0.05);
  }
  
  /* Ο πόλος της μπαταρίας (πιο σωστά κεντραρισμένος) */
  .battery-box::after { 
    content: ''; 
    position: absolute; 
    right: -9px; 
    top: 50%; 
    transform: translateY(-50%); 
    width: 6px; 
    height: 12px; 
    background: #2c3e50; 
    border-radius: 0 4px 4px 0; 
  }
  
  /* Η γέμιση με γυαλάδα και σκιές */
  .battery-fill { 
    height: 100%; 
    border-radius: 4px; 
    transition: width 1s cubic-bezier(0.4, 0, 0.2, 1), background 0.5s ease; 
    position: relative;
    overflow: hidden;
  }
  
  /* 3D Γυαλάδα πάνω στη γέμιση */
  .battery-fill::after {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 50%;
    background: rgba(255, 255, 255, 0.25);
  }

  .battery-text { 
    font-size: 0.8em; 
    font-weight: 800; 
    margin-top: 8px; 
    color: #34495e; 
    text-transform: uppercase;
    letter-spacing: 0.5px;
  }

  .holiday-content { transition: opacity 0.3s ease; }
  @keyframes fadeIn { from { opacity: 0; transform: scale(0.9); } to { opacity: 1; transform: scale(1); } }
  
  .click-hint { font-size: 14px; color: #888; font-style: italic; margin-top: 10px; }


/* Το κρυφό μήνυμα που εμφανίζεται στο κλικ */
  .secret-message {
    display: none;
    font-size: 1.15em;             /* Ιδανικό μέγεθος για να διαβάζεται άνετα */
    font-weight: 600;              /* Πιο ζωντανό και έντονο χωρίς να κουράζει */
    color: #1a252f;                /* Πολύ σκούρο μπλε για τέλεια αντίθεση */
    line-height: 1.6;              /* Άνετο κενό ανάμεσα στις γραμμές */
    padding: 20px 15px;            
    background: linear-gradient(135deg, #ffffff 0%, #eef5fa 100%); /* Απαλό ντεγκραντέ (λευκό προς γαλάζιο) */
    border: 2px dashed #b2d0e6;    /* Παιχνιδιάρικο διακεκομμένο περίγραμμα */
    border-radius: 20px;           /* Αρκετά στρογγυλεμένο για μοντέρνο look */
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08); /* Απαλή αλλά πιο βαθιά σκιά για 3D αίσθηση */
    font-family: 'Inter', sans-serif;
    animation: popIn 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275); /* Εφέ αναπήδησης (bounce) */
    margin-top: 15px;
  }

  /* Νέο, πιο παιχνιδιάρικο εφέ εμφάνισης (αντικαθιστά το fadeIn) */
  @keyframes popIn {
    0% { opacity: 0; transform: scale(0.8); }
    100% { opacity: 1; transform: scale(1); }
  }
/* Εικονίδιο Φόρτισης Μπαταρίας ⚡ */
  .charging-icon {
    color: #f39c12;
    display: inline-block;
    margin-left: 4px;
    animation: chargePulse 0.8s infinite alternate;
  }
  @keyframes chargePulse {
    0% { transform: scale(0.9); opacity: 0.7; }
    100% { transform: scale(1.3); opacity: 1; text-shadow: 0 0 6px rgba(241, 196, 15, 0.8); }
  }

/* --- ΝΕΟ: Εφέ Πραγματικής Φόρτισης (Ραβδώσεις που κυλάνε) --- */
  .battery-charging-fx {
    background: repeating-linear-gradient(
      -45deg,
      rgba(255, 255, 255, 0.25),
      rgba(255, 255, 255, 0.25) 10px,
      transparent 10px,
      transparent 20px
    ), linear-gradient(90deg, #43e97b 0%, #38f9d7 100%) !important;
    background-size: 28px 28px, 100% 100% !important;
    animation: battery-flow 1s linear infinite !important;
    box-shadow: 0 0 15px rgba(67, 233, 123, 0.8) !important;
  }

  @keyframes battery-flow {
    0% { background-position: 0 0, 0 0; }
    100% { background-position: 28px 0, 0 0; }
  }

  /* --- ΝΕΟ & ΒΕΛΤΙΩΜΕΝΟ: Συναγερμός Εξάντλησης (Glitch & Pulse) --- */
  .battery-low-alert {
    background: linear-gradient(90deg, #c0392b 0%, #e74c3c 100%) !important;
    animation: battery-panic 0.6s infinite alternate, battery-glitch 2.5s infinite linear !important;
  }

  /* Έντονο "καρδιοχτύπι" (pulse) */
  @keyframes battery-panic {
    0% { box-shadow: 0 0 5px rgba(231, 76, 60, 0.4); opacity: 0.8; }
    100% { box-shadow: 0 0 20px rgba(231, 76, 60, 1); opacity: 1; }
  }

  /* Ψηφιακό "σπάσιμο" της μπαταρίας όταν καταρρέουν! */
  @keyframes battery-glitch {
    0%, 90%, 100% { transform: skew(0deg); }
    92% { transform: skew(4deg); filter: hue-rotate(20deg); }
    95% { transform: skew(-4deg); }
    98% { transform: skew(2deg); }
  }

/* =========================================
   INTRA-DAY PHYSICS (Η Ψυχολογία της Ώρας)
========================================= */

/* Η λαμπερή ενεργειακή "ροή" που τρέχει μέσα στη μπαταρία */
.battery-fill::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.5), transparent);
  transform: translateX(-100%);
  z-index: 1; /* Για να μην κρύβει την 3D γυαλάδα ::after που ήδη έχεις */
}

/* 1. Πρωί: Φρέσκοι. Η ενέργεια κυλάει γρήγορα (κάθε 2 δευτ.) */
.physics-morning { filter: brightness(1.1) saturate(1.1); }
.physics-morning::before { animation: energy-flow 2s infinite linear; }

/* 2. Μεσημέρι (Διάλειμμα/Εφημερία): Πέφτει ο ρυθμός (κάθε 4.5 δευτ.) */
.physics-midday { filter: brightness(1); }
.physics-midday::before { animation: energy-flow 4.5s infinite linear; }

/* 3. 6η Ώρα: Τα χρώματα ξεθωριάζουν και η ενέργεια ΣΕΡΝΕΤΑΙ απελπιστικά αργά (κάθε 12 δευτ.) */
.physics-6th-hour { filter: brightness(0.9) saturate(0.7); }
.physics-6th-hour::before { 
  animation: energy-flow 12s infinite linear; 
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent); 
}

/* 4. Σπίτι/ΣΚ: Χαλαρή αναπνοή. Καθόλου τρέξιμο φωτός. */
.physics-home { animation: idle-breathe 4s infinite alternate ease-in-out; }
.physics-home::before { display: none; }

/* Animations Κίνησης */
@keyframes energy-flow { 
  100% { transform: translateX(100%); } 
}

@keyframes idle-breathe {
  0% { box-shadow: inset 0 0 0 rgba(255,255,255,0); }
  100% { box-shadow: inset 0 0 15px rgba(255,255,255,0.5); }
}

/* VELOS POY SE PAEI PANV */
:root {
  --arrowWeight: 3px;      /* Πάχος γραμμής κύκλου & βέλους */
  --btnSize: 60px;          /* Συνολικό μέγεθος κουμπιού */
  --arrowIconSize: 66px;    /* Μέγεθος του εσωτερικού βέλους */
  --blogMaxWidth: 1070px;   /* Μέγιστο πλάτος blog */
  --gapFromBlog: 35px;      /* Απόσταση από την άκρη του blog */
  --btnTop: 80%;            /* Κάθετη θέση (50% = κέντρο) */
  --mainColor: #a90e0e;     /* Χρώμα (Κόκκινο) */
}

/* =========================
   Κουμπί (floating container)
   ========================= */
.toTopBtn {
  position: fixed !important;
  top: var(--btnTop) !important;
  /* Δυναμικός υπολογισμός θέσης δεξιά */
  right: calc(max(0px, 49vw - (var(--blogMaxWidth) / 2) - var(--gapFromBlog))) !important;
  transform: translateY(-50%) !important;

  width: var(--btnSize) !important;
  height: var(--btnSize) !important;

  border-radius: 50% !important; /* Τέλειος κύκλος */
  
  /* Glassmorphism Εφέ */
  border: 1px solid rgba(255,255,255,.3) !important;
  background: rgba(255,255,255,.1) !important;
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
  box-shadow: 0 8px 32px rgba(0,0,0,.15) !important;

  color: var(--mainColor) !important;
  cursor: pointer !important;
  
  /* Flexbox για τέλειο κεντράρισμα των SVG */
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  /* Αρχικά κρυμμένο */
  opacity: 0 !important;
  visibility: hidden !important;
  
  /* Ομαλές μεταβάσεις */
  transition: opacity .3s ease, visibility .3s ease, border-color .3s ease, background-color .3s ease !important;
  z-index: 9999 !important;
  padding: 0 !important;
  outline: none !important;
  overflow: hidden !important; /* Κρατάει τα πάντα μέσα */
}

/* Εμφάνιση κουμπιού */
.toTopBtn.show {
  opacity: 1 !important;
  visibility: visible !important;
}

/* Hover Εφέ στο κουμπί */
.toTopBtn:hover {
  border-color: var(--mainColor) !important;
  background-color: rgba(255,255,255,.2) !important;
}

/* =========================
   SVG Δομή & Progress
   ========================= */

/* Κοινές ρυθμίσεις για όλα τα SVG μέσα στο κουμπί */
.toTopBtn svg {
  position: absolute !important; /* Στοιβάζονται το ένα πάνω στο άλλο */
  fill: none !important;
}

/* 1. Το SVG του Κύκλου Προόδου */
.progress-svg {
  width: 100% !important;
  height: 100% !important;
  /* Περιστροφή για να ξεκινά η πρόοδος από πάνω */
  transform: rotate(-90deg) !important;
  z-index: 1;
}

/* Ο αχνός κύκλος-φόντο */
.bg-circle {
  stroke: var(--mainColor) !important;
  opacity: 0.1 !important;
  stroke-width: var(--arrowWeight) !important;
}

/* Ο κύκλος που γεμίζει */
.progress-circle {
  stroke: var(--mainColor) !important;
  stroke-width: var(--arrowWeight) !important;
  stroke-linecap: round !important;
  /* Ομαλή κίνηση γεμίσματος */
  transition: stroke-dashoffset 0.1s linear !important;
}

/* 2. Το SVG του Βέλους */
.arrow-icon {
  width: var(--arrowIconSize) !important;
  height: var(--arrowIconSize) !important;
  stroke: var(--mainColor) !important;
  stroke-width: var(--arrowWeight) !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
  
  /* Σημαντικό: Κεντράρισμα του absolute στοιχείου */
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
  
  transition: transform 0.2s ease, stroke 0.2s ease !important;
  z-index: 2; /* Πάνω από τον κύκλο */
}

/* Εφέ στο βέλος όταν κάνουμε hover στο κουμπί */
.toTopBtn:hover .arrow-icon {
  /* Μετακινείται ελαφρώς προς τα πάνω, παραμένοντας κεντραρισμένο οριζόντια */
  transform: translate(-50%, -62%) !important;
}

/* =========================
   Mobile Ρυθμίσεις
   ========================= */
@media (max-width: 768px) {
  :root {
    --btnSize: 50px;
    --arrowIconSize: 24px;
  }
  
  .toTopBtn {
    top: auto !important;
    bottom: 20px !important;
    right: 20px !important;
    transform: none !important; /* Καταργούμε το translateY centering */
  }
}
/* =========================
   Mobile Ρυθμίσεις
   ========================= */
@media (max-width: 768px) {
  .toTopBtn {
    display: none !important;
  }
}

     /* ΚΑΡΤΑ VIDEO - CLEAN VERSION (NO LINES) */
    .video-glass-card {
        width: 100%;
        max-width: 350px;
        /* Αντικατάσταση blur με solid glass effect για αποφυγή γραμμών */
        background: rgba(245, 245, 245, 0.9); 
        border: 1px solid rgba(255, 255, 255, 0.8);
        border-radius: 15px;
        padding: 12px;
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
        
        transition: transform 0.3s cubic-bezier(0.25, 1, 0.5, 1);
        text-align: center;
        box-sizing: border-box;
        margin: 10px auto 20px auto;
        position: relative;

        /* FORCE FLAT RENDERING - Σταματάει τον διαχωρισμό σε pixels */
        -webkit-transform: translateZ(0);
        transform: translateZ(0);
        will-change: transform;
        overflow: hidden;
    }
@media screen and (max-width: 768px) {
/* ΕΞΩΤΕΡΙΚΟ ΠΛΑΙΣΙΟ (Smart Hub Widget) */
 .video-glass-card {
    /* Εξωτερικά κενά (Margin) */
    margin-top: 0px !important;    /* Κενό από πάνω */
    margin-bottom: 0px !important; /* Κενό από κάτω */
  }
  }
    .video-glass-card:hover {
        transform: translateY(-5px);
    }

    .video-glass-title {
        font-family: 'Segoe UI', Arial, sans-serif;
        font-size: 19px;
        font-weight: 800;
        color: #a90e0e;
        margin-bottom: 10px;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
    }

    .video-wrapper {
        position: relative;
        width: 100%;
        border-radius: 10px;
        overflow: hidden;
        background: #000;
        /* Δημιουργεί ένα "τείχος" ανάμεσα στο βίντεο και το background */
        z-index: 1; 
    }

    .video-zoom-fix {
        width: 100%; 
        position: relative;
        padding-bottom: 80.25%;
        height: 0;
    }

    .video-zoom-fix iframe {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        border: none;
    }

    .video-sub-action {
        position: absolute;
        bottom: 15px;
        left: 50%;
        transform: translateX(-50%) translateY(10px);
        background: #c80000;
        color: #ffffff !important;
        border-radius: 8px;
        font-size: 11px;
        font-weight: bold;
        text-decoration: none;
        padding: 8px 14px;
        z-index: 10;
        white-space: nowrap;
        opacity: 0;
        visibility: hidden;
        transition: all 0.3s ease;
    }

    .video-glass-card:hover .video-sub-action {
        opacity: 1;
        visibility: visible;
        transform: translateX(-50%) translateY(0);
    }

   
/* Ρύθμιση τίτλου video-glass ΜΟΝΟ για κινητά */
@media screen and (max-width: 768px) {
    html body .video-glass-title {
        font-size: 22px !important;
    }
}
@media (hover: none) {
    .video-sub-action {
        opacity: 1 !important;
        visibility: visible !important;
        transform: translateX(-50%) translateY(0) !important;
    }
}

/* 2. Κλάση που θα προσθέτει η Javascript για να εξαφανίσει το κουμπί */
.video-sub-action.is-hidden {
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important; /* Απενεργοποιεί τα κλικ όταν είναι κρυφό */
}


  /* XRONOKAPSOYLA */
  #stc-widget,
  #stc-widget-mobile {
    position: relative;
    max-width: 100%; /* Αντί για 420px, βάλε 100% για να προσαρμόζεται μόνο του */
    margin: 15px 0;
    font-family: 'Poppins', sans-serif;
    background: rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 20px;
    padding: 10px 0px;
    box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.15);
    overflow: hidden;
    text-align: center;
  }
/* ΕΞΩΤΕΡΙΚΟ ΠΛΑΙΣΙΟ (Chronocapsule Widget) */
  #stc-widget-mobile {
    /* Εξωτερικά κενά (Margin) */
    margin-top: 0px !important;    /* Κενό από πάνω */
    margin-bottom: 0px !important; /* Κενό από κάτω */

  }

  /* Header */
  .stc-header {
    color: #4a4a4a;
    font-size: 1.4rem;
    font-weight: 600;
    margin-bottom: 15px;
    letter-spacing: 1px;
    text-shadow: 1px 1px 2px rgba(255,255,255,0.6);
    position: relative;
    z-index: 2;
  }

  /* Polaroid Container (3D Perspective) */
  .stc-perspective {
    perspective: 1000px;
    position: relative;
    z-index: 2;
  }

  /* The Polaroid Card */
  .stc-polaroid {
    background: #fdfcf6; /* Κιτρινισμένο χαρτί */
    padding: 12px 12px 45px 12px;
    border-radius: 2px;
    box-shadow: 2px 4px 15px rgba(0, 0, 0, 0.15), inset 0 0 20px rgba(184, 134, 11, 0.05);
    transform: rotate(-3deg) translateZ(0);
    transition: transform 0.9s cubic-bezier(0.25, 0.8, 0.25, 1), box-shadow 0.9s ease-in-out, background 0.9s ease;
    position: relative;
    cursor: pointer;
    
    /* ΑΥΤΕΣ ΟΙ 3 ΓΡΑΜΜΕΣ ΔΙΟΡΘΩΝΟΥΝ ΤΟ PC */
    max-width: 340px;          /* Δεν θα επιτρέπει στην κάρτα να ξεχειλώσει στο PC */
    margin: 0 auto;            /* Κεντράρει την κάρτα στην οθόνη */
    width: calc(100% - 30px);  /* Κρατάει σωστά περιθώρια στα δεξιά/αριστερά */

    opacity: 0; /* Αρχικά κρυφό μέχρι να φορτώσει το API */
    animation: fadeInWidget 1s forwards 0.5s;
  }

  @keyframes fadeInWidget {
    to { opacity: 1; }
  }

  /* Tape Effect */
  .stc-tape {
    position: absolute;
    top: -12px;
    left: 50%;
    transform: translateX(-50%) rotate(2deg);
    width: 90px;
    height: 30px;
    background: rgba(255, 255, 230, 0.6);
    box-shadow: 0 1px 3px rgba(0,0,0,0.2);
    opacity: 0.8;
    z-index: 5;
    transition: opacity 0.9s ease;
  }

  /* Photo Wrapper */
  .stc-photo-wrapper {
    position: relative;
    width: 100%;
    height: 316px; /* Από 240px, το κάνουμε 316px για να γίνει τετράγωνη η φωτογραφία */
    overflow: hidden;
    background: #222;
  }

 /* Faded Image */
  .stc-img {
    width: 100%;
    height: 100%;
    min-height: 100%; /* Αναγκάζει την εικόνα να καλύψει όλο το ύψος */
    display: block;
    object-fit: fill!important; /* Κόβει ομοιόμορφα τα πλάγια αντί να αφήνει μαύρα κενά */
    filter: sepia(0.6) grayscale(0.3) contrast(0.8) brightness(0.9);
    transition: filter 0.9s ease-in-out, transform 0.9s ease;
  }

  /* Film Grain & Scratches Overlay */
  .stc-overlay-fx {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background-image: 
      radial-gradient(circle, transparent 60%, rgba(0,0,0,0.3) 100%),
      repeating-linear-gradient(45deg, transparent, transparent 2px, rgba(255,255,255,0.03) 2px, rgba(255,255,255,0.03) 4px);
    pointer-events: none;
    transition: opacity 0.9s ease;
    mix-blend-mode: multiply;
  }

  /* Caption Info */
  .stc-caption {
    position: absolute;
    bottom: 0; left: 0; right: 0;
    background: linear-gradient(to top, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0.5) 70%, transparent 100%);
    color: #fff;
    padding: 30px 15px 15px 15px;
    text-align: left;
    opacity: 0;
    transform: translateY(10px);
    transition: opacity 0.8s ease, transform 0.8s ease;
    display: flex;
    flex-direction: column;
    gap: 8px;
  }

  .stc-caption h4 {
    margin: 0;
    font-size: 1.1rem;
    font-weight: 600;
  }

  .stc-caption p {
    margin: 0;
    font-size: 0.85rem;
    font-weight: 300;
    line-height: 1.3;
  }

  .stc-btn {
    align-self: flex-start;
    background: rgba(255,255,255,0.8);
    border: 1px solid rgba(255,255,255,0.5);
    color: #fff;
    padding: 6px 12px;
    border-radius: 20px;
    font-size: 0.8rem;
    cursor: pointer;
    backdrop-filter: blur(4px);
    transition: background 0.3s ease;
    margin-top: 5px;
    text-decoration: none;
  }

  .stc-btn:hover { background: rgba(255,255,255,0.4); color: #fff;}

  /* Bottom Polaroid Details */
  .stc-bottom-details {
    position: absolute;
    bottom: 10px; left: 15px; right: 15px;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .stc-badge {
    background: #ff6b6b;
    color: white;
    padding: 3px 10px;
    border-radius: 12px;
    font-size: 0.75rem;
    font-weight: 600;
    box-shadow: 0 2px 5px rgba(255, 107, 107, 0.4);
  }

  .stc-date {
    font-family: 'Caveat', cursive;
    font-size: 1.2rem;
    color: #333;
    opacity: 0.8;
  }

  /* === HOVER EFFECTS === */
  .stc-polaroid:hover {
    transform: rotate(0deg) scale(1.05) translateY(-8px);
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.25), 0 0 20px rgba(255, 255, 255, 0.5);
    background: #ffffff;
  }

  .stc-polaroid:hover .stc-img {
    filter: sepia(0) grayscale(0) contrast(1.05) brightness(1);
    transform: scale(1.03);
  }

  .stc-polaroid:hover .stc-overlay-fx { opacity: 0; }
  
  .stc-polaroid:hover .stc-caption {
    opacity: 1;
    transform: translateY(0);
  }

  .stc-polaroid:hover .stc-tape { opacity: 0.4; }

  /* Floating Dust Particles */
  .stc-dust {
    position: absolute;
    background: rgba(255, 255, 255, 0.8);
    border-radius: 50%;
    pointer-events: none;
    z-index: 1;
    animation: floatDust linear infinite;
  }

  @keyframes floatDust {
    0% { transform: translateY(0) translateX(0); opacity: 0; }
    20% { opacity: 1; }
    80% { opacity: 1; }
    100% { transform: translateY(-100px) translateX(20px); opacity: 0; }
  }

  /* Responsive */
  @media (max-width: 480px) {
    #stc-widget,
    #stc-widget-mobile { max-width: 100%; padding: 20px 0px; }
    .stc-polaroid { max-width: 100%; margin: 0 auto; transform: rotate(0deg); }
  }


/* EKSYPNES SELIDES KAI SYNDESMOI*/
#smart-hub, 
#smart-hub-mobile, 
#smart-hub2 {
  font-family: 'Inter', Arial, sans-serif;
  background: linear-gradient(135deg, rgba(255,255,255,0.4) 0%, rgba(255,255,255,0.1) 100%);
  backdrop-filter: blur(25px) saturate(180%);
  -webkit-backdrop-filter: blur(25px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, 0.5);
  border-top: 1px solid rgba(255, 255, 255, 0.9);
  border-left: 1px solid rgba(255, 255, 255, 0.8);
  border-radius: 32px;
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.12), inset 0 0 0 1px rgba(255,255,255,0.2);
  padding: 15px;
  margin-top: 15px;
  margin-bottom: 25px;
  position: relative;
  overflow: hidden;
  box-sizing: border-box;
  display: block;
}

/* Εφέ "Χρωματιστής Αύρας" */
#smart-hub::before,
#smart-hub-mobile::before,
#smart-hub2::before {
  content: "";
  position: absolute;
  top: -50px;
  right: -20px;
  width: 180px;
  height: 180px;
  background: radial-gradient(circle, rgba(169, 14, 14, 0.15) 0%, transparent 70%);
  filter: blur(30px);
  z-index: -1;
  pointer-events: none;
}

/* =========================================================
   2. ΤΙΤΛΟΣ (HEADER) & ΒΕΛΑΚΙ - Βασική Εμφάνιση (Desktop)
   ========================================================= */
.hub-divider {
  background: rgba(255, 255, 255, 0.6);
  box-shadow: inset 0 2px 5px rgba(255, 255, 255, 0.8), 0 4px 15px rgba(0, 0, 0, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.7);
  border-radius: 20px;
  padding: 15px 15px;
  font-size: 24px;
  font-weight: 900;
  color: #1a1a1a;
  text-shadow: 0 1px 2px rgba(255,255,255,0.9);
  margin: 0 0 0 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  user-select: none;
}

/* Κατάργηση παλιών γραμμών ::before και ::after */
.hub-divider::before, 
.hub-divider::after { 
  display: none !important; 
}

/* Βελάκι */
.hub-toggle-icon {
  background: #ffffff;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  box-shadow: 0 3px 10px rgba(0,0,0,0.1);
  color: #a90e0e;
  font-size: 14px;
  margin-left: 10px;
  transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.hub-divider.active .hub-toggle-icon {
  transform: rotate(180deg);
}

/* =========================================================
   3. ΠΕΡΙΕΧΟΜΕΝΟ & LINKS
   ========================================================= */
.hub-content-wrapper {
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transition: max-height 0.7s ease-in-out, opacity 0.5s ease;
}

.hub-content-wrapper.open {
  max-height: 5000px; 
  opacity: 1;
}

.hub-links { 
  list-style: none; 
  margin: 0; 
  padding: 0; 
  display: flex; 
  flex-direction: column; 
}

.hub-links a {
  display: flex;
  align-items: center;
  gap: 15px;
  background: rgba(255, 255, 255, 0.35);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.5);
  border-top: 1px solid rgba(255, 255, 255, 0.8);
  border-left: 5px solid transparent; 
  border-radius: 18px;
  padding: 12px 15px;
  margin-bottom: 10px;
  box-shadow: 0 6px 16px rgba(0,0,0,0.04);
  color: #000;
  font-weight: 700;
  font-size: 15px;
  line-height: 1.4;
  text-decoration: none;
  transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  
  /* Συλλαβισμός */
  -webkit-hyphens: auto;
  -ms-hyphens: auto;     
  hyphens: auto;          
  word-break: break-word;
}

.hub-ic {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  background: rgba(255, 255, 255, 0.9);
  border-radius: 10px;
  font-size: 16px;
  flex-shrink: 0;
  box-shadow: 0 2px 5px rgba(0,0,0,0.08);
  color: initial !important; 
  font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif !important;
  transition: transform 0.3s ease, background 0.3s ease;
}

/* Hover & Active States */
.hub-links a:hover {
  background: rgba(255, 255, 255, 0.95);
  border-left: 5px solid #a90e0e;
  transform: translateX(6px) scale(1.02);
  color: #a90e0e;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
}

.hub-links a:hover .hub-ic {
  transform: scale(1.15) rotate(-5deg);
  background: #fff;
}

.hub-links a:active {
  transform: scale(0.97);
  background: rgba(255, 255, 255, 0.6);
}

/* =========================================================
   4. ΚΑΝΟΝΕΣ DESKTOP (Οθόνες > 768px)
   ========================================================= */
@media screen and (min-width: 769px) {

  /* Κρύβει στοιχεία που είναι μόνο για κινητά */
  .mobile-only {
    display: none !important;
  }
}

/* =========================================================
   5. ΚΑΝΟΝΕΣ MOBILE (Οθόνες <= 768px)
   ========================================================= */
@media screen and (max-width: 768px) {
  /* Μετατροπή Τίτλου σε διάφανο κείμενο (Βάσει της τελευταίας εντολής σου) */
  .hub-divider {
    background: transparent;
    box-shadow: none;        
    border: none;            
    border-radius: 0;
    padding: 20px 5px 10px 5px;
    font-size: 24px;         
    font-weight: 900;
    color: #a90e0e;          
    text-shadow: none;
    margin: 0;
  }

  .hub-toggle-icon {
    font-size: 18px;
    width: auto;
    height: auto;
    background: transparent;
    box-shadow: none;
    color: #a90e0e;
  }

  /* Μεγέθυνση Links & Εικονιδίων για χοντρά δάχτυλα */
  .hub-links a {
    font-size: 18px; 
    padding: 10px 12px; 
  }

  .hub-ic {
    width: 45px;
    height: 45px;
    font-size: 22px;
  }
}
@media screen and (max-width: 768px) {
/* ΕΞΩΤΕΡΙΚΟ ΠΛΑΙΣΙΟ (Smart Hub Widget) */
  #smart-hub-mobile {
    /* Εξωτερικά κενά (Margin) */
    margin-top: 0px !important;    /* Κενό από πάνω */
    margin-bottom: 0px !important; /* Κενό από κάτω */
  }
  }

/* REACTIONS KAI LOAD MORE */
.smart-feedback-container {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 10px !important;
    margin: 0 auto !important; 
    width: fit-content !important; 
    padding: 2px 15px !important; 
    background-color: #f9f9f9 !important;
    border-radius: 6px !important;
    font-family: sans-serif !important;
    clear: both !important;
}

/* Όταν ψηφίσει ο χρήστης */
.smart-feedback-container.voted {
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
    margin: 0 auto !important;
}

.smart-feedback-buttons {
    display: flex !important;
    flex-direction: row !important;
    gap: 6px !important;
}

/* Απενεργοποιεί τα κλικ αφού ψηφίσει ο χρήστης για αποφυγή spam */
.smart-feedback-container.voted .smart-feedback-buttons {
    opacity: 0.8;
    pointer-events: none;
}

.smart-feedback-btn {
    background: #fff !important;
    border: 1px solid #ddd !important;
    border-radius: 8px !important;
    padding: 4px 8px !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    gap: 4px !important;
    transition: 0.2s !important;
}

.smart-feedback-btn span:first-child { 
    font-size: 18px !important; 
}

@media (max-width: 700px) {
    .smart-feedback-container {
        padding: 22px 10px !important;
    }
}

/* Μεγαλύτερα κουμπιά μόνο για μεγάλες οθόνες (Desktop) */
@media (min-width: 901px) {
    .smart-feedback-btn {
        padding: 4px 8px !important;
        font-size: 16px !important;
    }
    .smart-feedback-btn span:first-child {
        font-size: 24px !important;
    }
}

/* ==========================================================================
   3. CUSTOM READ MORE BUTTON
   ========================================================================== */
div.custom-read-more, 
body .post-body .custom-read-more {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 7px !important; 
    background-color: #0056b3 !important;
    color: #ffffff !important;
    padding: 10px 25px !important; 
    border-radius: 27px !important; 
    font-weight: 700 !important;
    font-size: 13px !important; 
    cursor: pointer !important;
    margin: 10px auto 0 auto !important; 
    width: fit-content !important;
    border: none !important;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.2) !important;
    transition: all 0.3s ease !important;
    text-decoration: none !important;
}

.custom-read-more .icon {
    font-size: 13px !important; 
}

div.custom-read-more:hover,
.custom-read-more:hover {
    background: #004494 !important;
    background-color: #004494 !important;
    transform: translateY(-2px) !important;
}

/* Επιβολή λευκού χρώματος στα πάντα μέσα στο κουμπί */
.custom-read-more, 
.custom-read-more *,
.custom-read-more span,
.custom-read-more .icon {
    color: #ffffff !important;
    fill: #ffffff !important;
}

/* Lightbox & Spinner για το κουμπί */
.custom-read-more.is-loading .icon {
    display: inline-block !important;
    animation: spin 1s linear infinite !important;
}

@keyframes spin {
    100% { transform: rotate(360deg); }
}

/* ==========================================================================
   4. FETCHED CONTENT (Το συρτάρι που ανοίγει)
   ========================================================================== */

.fetched-content-wrapper {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    background: transparent !important;
    
    /* ΛΥΣΗ ΓΙΑ ΤΟ ΣΤΡΙΜΩΓΜΑ: Απαγορεύει στο συρτάρι να "τρυπώσει" δίπλα σε εικόνες */
    clear: both !important;
    width: 100% !important;
}

.fetched-content-inner {
    overflow: hidden;
}

.fetched-content-wrapper.is-open {
    grid-template-rows: 1fr;
    margin-bottom: 25px;
    border-top: 2px solid #0056b3 !important;
}

.scrollable-article-area {
    max-height: 500px;
    overflow-y: auto;
    padding: 15px;
    box-sizing: border-box !important;
}

/* ΠΡΟΣΘΗΚΗ: Αποτροπή ξεχειλίσματος εικόνων και βίντεο */
.scrollable-article-area img,
.scrollable-article-area iframe {
    max-width: 100% !important;
}

/* ==========================================================================
   ΔΙΟΡΘΩΣΗ ΔΙΑΤΑΞΗΣ ΓΙΑ ΚΙΝΗΤΑ (Mobile Fixes)
   ========================================================================== */
@media (max-width: 768px) {
    /* Εξουδετερώνουμε την πλαϊνή στοίχιση (float) σε όλα τα στοιχεία μέσα στο άρθρο 
       ώστε στα κινητά να μπαίνουν ΠΑΝΤΑ το ένα κάτω από το άλλο στο κέντρο */
    .scrollable-article-area .separator,
    .scrollable-article-area .separator a,
    .scrollable-article-area img,
    .scrollable-article-area iframe {
        float: none !important;
        clear: both !important;
        display: block !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }
    
    /* Αναγκάζουμε τα iframes (Youtube Shorts / Videos) να πάρουν το σωστό ύψος 
       ώστε να μην γίνονται στενές λωρίδες */
    .scrollable-article-area iframe {
        width: 100% !important;
        min-height: 350px !important;
        margin-top: 15px !important;
        margin-bottom: 15px !important;
    }
}

/* Κρύβουμε ΜΟΝΟ το παλιό Jump Link (Read More) */
.jump-link, 
.post-outer .jump-link { 
    display: none !important; 
}

/* Επαναφορά για τα βέλη/κουμπιά Επόμενο-Προηγούμενο */
.mobile-index-arrow, 
.mobile-link-button, 
.blog-pager {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
}

/* ==========================================================================
   5. CUSTOM LIGHTBOX (Εικόνες & Video + Thumbnails + Swipe)
   ========================================================================== */
/* JS-based Lightbox Fix: Εφαρμογή reset στο body */
body.lb-active {
    zoom: 1 !important;
    transform: none !important;
    -webkit-transform: none !important;
    perspective: none !important;
    overflow: hidden !important; 
}

.my-custom-lightbox {
    position: fixed !important; 
    top: 0 !important; 
    left: 0 !important; 
    width: 100% !important; 
    height: 100% !important;
    background-color: rgba(0, 0, 0, 0.95) !important;
    z-index: 99999999 !important; 
    display: flex !important; 
    flex-direction: column !important; 
    justify-content: center !important; 
    align-items: center !important;
    opacity: 0; 
    transition: opacity 0.3s ease;
    touch-action: none;
    zoom: 1 !important;
    transform: none !important;
}

.my-custom-lightbox.show { 
    opacity: 1; 
}

.my-custom-lightbox-img-container {
    position: relative !important;
    display: flex !important; 
    justify-content: center !important; 
    align-items: center !important;
    width: 100% !important; 
    height: 75vh !important;
    transform: none !important;
    transition: opacity 0.2s ease;
}

img.my-lb-media {
    max-width: 90vw !important; 
    max-height: 75vh !important;
    border: 3px solid #fff; 
    border-radius: 8px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.5);
    object-fit: contain !important;
    user-select: none;
    transform: scale(1) !important; 
}

/* Στυλ αυστηρό για Βίντεο στο Lightbox */
iframe.my-lb-media { 
    width: 85vw !important; 
    height: 48vw !important; 
    max-height: 70vh !important; 
    max-width: 1000px !important; 
    background: #000;
    border: 3px solid #fff; 
    border-radius: 8px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.5);
}

.my-custom-lightbox-close {
    position: absolute; 
    top: 15px; 
    right: 25px;
    color: #fff; 
    font-size: 45px; 
    font-weight: bold;
    cursor: pointer; 
    user-select: none; 
    z-index: 10;
    line-height: 1;
}

.my-custom-lightbox-prev, 
.my-custom-lightbox-next {
    position: absolute; 
    top: 50%; 
    transform: translateY(-50%);
    color: #fff; 
    font-size: 40px; 
    font-weight: bold;
    cursor: pointer; 
    user-select: none; 
    padding: 20px;
    transition: color 0.3s; 
    z-index: 10;
}

.my-custom-lightbox-prev { left: 5px; }
.my-custom-lightbox-next { right: 5px; }
.my-custom-lightbox-prev:hover, 
.my-custom-lightbox-next:hover { color: #bbb; }

.my-custom-lightbox-counter {
    position: absolute; 
    top: 25px; 
    left: 25px;
    color: #ccc; 
    font-size: 16px; 
    font-family: sans-serif;
}

/* Μικρογραφίες (Thumbnails) */
.my-custom-lightbox-thumbnails {
    display: flex; 
    gap: 10px; 
    margin-top: 15px;
    max-width: 90vw; 
    height: 15vh; 
    min-height: 70px;
    overflow-x: auto; 
    overflow-y: hidden;
    padding-bottom: 10px;
    scrollbar-width: thin; 
    scrollbar-color: #888 #222;
    transform: none !important;
    zoom: 1 !important;
}

.my-custom-lightbox-thumbnails::-webkit-scrollbar { height: 6px; }
.my-custom-lightbox-thumbnails::-webkit-scrollbar-thumb { background-color: #888; border-radius: 3px; }

.thumb-wrapper {
    position: relative; 
    width: 60px; 
    height: 60px; 
    flex-shrink: 0; 
    cursor: pointer;
    border: 2px solid transparent; 
    border-radius: 6px; 
    overflow: hidden;
    opacity: 0.4; 
    transition: all 0.2s ease;
}

.thumb-wrapper.active { 
    opacity: 1; 
    border-color: #fff; 
    transform: scale(1.05); 
}

.thumb-wrapper:hover { opacity: 0.8; }
.my-lb-thumb { width: 100%; height: 100%; object-fit: cover; }

/* Λύση για χρήση ασφαλούς Unicode κωδικού */
.thumb-wrapper.is-video-thumb::after {
    content: "\25B6"; 
    position: absolute; 
    top: 50%; 
    left: 50%;
    transform: translate(-50%, -50%); 
    color: rgba(255,255,255,0.9);
    font-size: 22px; 
    text-shadow: 0 0 8px rgba(0,0,0,0.8); 
    pointer-events: none;
}

/* ==========================================================================
   6. MEDIA QUERIES ΓΙΑ LIGHTBOX (Tablet & Mobile)
   ========================================================================== */
/* Tablet Landscape Optimization */
@media screen and (min-width: 768px) and (max-width: 1300px) and (orientation: landscape) and (pointer: coarse) {
    .my-custom-lightbox-thumbnails {
        display: flex !important;
        flex-direction: row !important;
        justify-content: flex-start !important; 
        flex-wrap: nowrap !important;
        overflow-x: auto !important; 
        overflow-y: hidden !important;
        padding-left: 20px !important; 
        padding-right: 20px !important;
        height: auto !important;
        min-height: 80px !important; 
        margin-top: auto !important; 
        margin-bottom: 35px !important; 
        width: 100% !important;
    }

    .thumb-wrapper {
        width: 60px !important; 
        height: 60px !important; 
        flex: 0 0 auto !important; 
        border-width: 1px !important;
        margin-right: 8px !important; 
    }

    .my-custom-lightbox-img-container {
        height: 90vh !important; 
        margin-top: 60px !important; 
        display: flex !important;
        align-items: flex-start !important; 
    }

    img.my-lb-media {
        max-height: 90vh !important; 
        width: auto !important;
        object-fit: contain !important;
        vertical-align: top !important;
    }

    .my-custom-lightbox-prev, 
    .my-custom-lightbox-next {
        font-size: 28px !important;
        padding: 8px !important;
        top: 45% !important; 
    }
}

/* Mobile Lightbox Thumbnails Fix */
@media screen and (max-width: 1467px) {
    .my-custom-lightbox-thumbnails {
        justify-content: flex-start !important;
        display: flex !important;
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        padding-left: 15px !important;
        padding-right: 15px !important;
        -webkit-overflow-scrolling: touch !important;
    }

    .thumb-wrapper {
        flex: 0 0 auto !important;
        width: 55px !important;
        height: 55px !important;
    }
}


/* SAN SIMERA*/
.history-modern-card-pc {
  background: var(--glass) !important; 
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-left: 6px solid #a90e0e; 
  border-radius: var(--r); 
  padding: 20px;
  box-shadow: var(--shadow); 
  margin-bottom: 20px;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  position: relative;
  overflow: hidden;
}

.history-modern-card-pc:hover {
  transform: translateY(-3px);
  box-shadow: 0 15px 35px rgba(169, 14, 14, 0.15); 
}

.history-header-pc {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
  position: relative;
  z-index: 1;
}

.history-icon-pc {
  background: rgba(169, 14, 14, 0.08); 
  padding: 8px 10px;
  border-radius: 12px;
  font-size: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.history-header-pc h3 {
  margin: 0;
  color: var(--text); 
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.5px;
}

.history-content-pc {
  font-size: 15px;
  color: var(--text); 
  line-height: 1.6;
  font-weight: 500;
  text-align: left;
  position: relative;
  z-index: 1;
}
/* Ευθυγράμμιση για τον τίτλο και την οδηγία */
.history-title-group-pc {
  display: flex;
  flex-direction: column;
}

/* Το μικρό επεξηγηματικό κείμενο */
.history-hint-pc {
  font-size: 12px;
  color: #a90e0e;
  font-weight: 600;
  margin-top: 2px;
  opacity: 0.85;
}

/* Το κρυφό πλαίσιο της αποστολής που ανοίγει ομαλά */
.mission-container-pc {
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transition: max-height 0.4s ease, opacity 0.4s ease, margin-top 0.4s ease;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 10px;
  padding: 0 15px;
  margin-top: 0;
  border-left: 3px solid #3b82f6; 
}

/* Όταν η JS προσθέτει την κλάση .open, το πλαίσιο εμφανίζεται */
.mission-container-pc.open {
  max-height: 350px;
  opacity: 1;
  padding: 12px 15px;
  margin-top: 15px;
}

.mission-header-pc {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
}

.mission-icon-pc {
  font-size: 16px;
}

.mission-header-pc h4 {
  margin: 0;
  font-size: 13px;
  font-weight: 700;
  color: #3b82f6;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

#mission-text-pc {
  margin: 0;
  font-size: 14px;
  color: var(--text);
  line-height: 1.5;
  font-style: italic;
}
.history-modern-card-pc {
  background: var(--glass) !important; 
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-left: 6px solid #a90e0e; 
  border-radius: var(--r); 
  padding: 20px;
  box-shadow: var(--shadow); 
  margin-bottom: 20px;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  position: relative;
  overflow: hidden;
  /* ΠΡΟΣΘΕΣΕ ΑΥΤΗ ΤΗ ΓΡΑΜΜΗ ΕΔΩ */
  cursor: pointer; 
}


   /* GRIFOI */
    .mobile-glass-shelf {
        padding: 15px !important;
        margin-top: 15px !important;
        margin-bottom: 15px !important;
        /* ΠΡΟΣΘΕΣΕ ΑΥΤΑ ΓΙΑ ΝΑ ΦΑΙΝΕΤΑΙ ΤΟ ΓΥΑΛΙ */
        background: rgba(255, 255, 255, 0.08) !important; 
        backdrop-filter: blur(10px) !important;
        border: 1px solid rgba(255, 255, 255, 0.1) !important;
    }


  .blur-box { 
    background: #2c3e50; 
    color: white; 
    padding: 20px; 
    border-radius: 15px; 
    text-align: center; 
    max-width: 300px; 
    margin: auto;
    font-family: "Segoe UI", system-ui, -apple-system, sans-serif; 
    cursor: pointer; 
    outline: none;
  }

  .blur-box:focus-visible {
    box-shadow: 0 0 0 4px rgba(241, 196, 15, 0.5);
  }

  .blur-answer { 
    font-size: 22px; 
    font-weight: bold; 
    color: #f1c40f; 
    filter: blur(12px); 
    transition: filter 0.6s ease; 
    margin-top: 15px; 
    user-select: none; 
  }

  @media (hover: hover) and (pointer: fine) {
    .blur-box:hover .blur-answer { 
      filter: blur(0); 
      user-select: auto;
    }
  }

  .blur-box.is-clear .blur-answer {
    filter: blur(0);
    user-select: auto;
  }
@media screen and (max-width: 768px) {
/* 1. ΕΞΩΤΕΡΙΚΟ ΠΛΑΙΣΙΟ (Daily Riddle Box) */
  #daily-riddle-box-mobile {

    margin-top: 0px !important;
    margin-bottom: 0px !important;
  }
  }


/* DIMOFILEIS*/
#slider-wrapper-desktop { display: block; }
@media (max-width: 768px) {
    #slider-wrapper-desktop { display: none !important; }
}
@media screen and (min-width: 769px) {
.slider-main-title { text-align: center; font-weight: 800; font-size: 18px; margin: 0 0 15px 0; color: #a90e0e; font-family: 'Inter', Arial, sans-serif; text-transform: uppercase; letter-spacing: 0.5px; display: table; margin: 0 auto 15px auto; padding: 6px 18px; background: #f8f8f8; border: 1px solid #eeeeee; border-radius: 20px; box-shadow: 0 2px 6px rgba(0,0,0,0.06); }
.slider-main-title::before { content: '🔥 '; font-size: 16px; margin-right: 4px; }
   }
@media (min-width: 769px) { .slider-main-title { font-size: 30px !important; padding: 5px 13px !important; margin-bottom: 11px !important; } .slider-main-title::before { font-size: 18px !important; } }
@media screen and (min-width: 769px) {
#custom-post-slider-desktop { 
    position: relative; 
    width: 100%; 
    height: 230px; /* Βάζουμε σταθερό ύψος ίδιο με τις εικόνες σου */
    margin: 0 auto; 
    overflow: hidden; 
    border-radius: 12px; 
    background: #f4f4f4; /* Ένα απαλό γκρι placeholder φόντο */
}
.slide-item { 
    position: absolute; /* Μπαίνουν το ένα πάνω στο άλλο */
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100%; 
    opacity: 0; 
    visibility: hidden; 
    transform: scale(0.98); 
    transition: opacity 0.8s ease, transform 0.8s ease, visibility 0.8s;
    border-radius: 12px; 
    overflow: hidden; 
}
.slide-item.active { 
    opacity: 1; 
    visibility: visible; 
    z-index: 2; /* Η τρέχουσα εικόνα έρχεται σε πρώτο πλάνο */
    transform: scale(1);
}
#custom-post-slider-desktop a.slide-link, #custom-post-slider-desktop a.slide-link:hover { background: none !important; text-decoration: none !important; border: none !important; padding: 0 !important; display: block !important; }
#custom-post-slider-desktop .slide-item img { width: 100% !important; height: 230px !important; object-fit: fill !important; display: block !important; border-radius: 12px !important; margin: 0 !important; transition: transform 0.4s ease !important; }
.slide-item:hover img { transform: scale(1.04) !important; }
.slide-title-wrapper { position: absolute; bottom: 0; left: 0; width: 100%; padding: 10px; box-sizing: border-box; z-index: 2; }
.slide-title { background: rgba(255, 255, 255, 0.85) !important; backdrop-filter: blur(10px) !important; -webkit-backdrop-filter: blur(10px) !important; color: #a90e0e !important; padding: 2px 4px !important; font-size: 12px !important; font-weight: 700 !important; font-family: 'Inter', Arial, sans-serif !important; text-align: center !important; border-radius: 10px !important; display: -webkit-box !important; -webkit-line-clamp: 2 !important; -webkit-box-orient: vertical !important; overflow: hidden !important; text-overflow: ellipsis !important; white-space: normal !important; word-wrap: break-word !important; line-height: 1.4 !important; max-height: 4.2em !important; border: 1px solid rgba(255, 255, 255, 0.4) !important; box-shadow: 0 4px 15px rgba(0,0,0,0.1) !important; transition: all 0.3s ease !important; margin: 0 !important; backface-visibility: hidden !important; -webkit-backface-visibility: hidden !important; transform: translateZ(0) !important; }
.slide-item:hover .slide-title { background: #a90e0e !important; color: #ffffff !important; border-color: #a90e0e !important; }

#custom-post-slider-desktop .slider-arrow { position: absolute !important; top: 50% !important; transform: translateY(-50%) !important; background: rgba(255, 255, 255, 0.6) !important; color: #333 !important; border: none !important; cursor: pointer !important; width: 28px !important; height: 28px !important; padding: 0 !important; border-radius: 50% !important; font-size: 14px ; display: flex !important; align-items: center !important; justify-content: center !important; z-index: 20 !important; transition: background 0.3s, color 0.3s, transform 0.2s !important; box-shadow: 0 2px 6px rgba(0,0,0,0.3) !important; opacity: 1 !important; visibility: visible !important; }
#custom-post-slider-desktop .slider-arrow:hover { background: rgba(255, 255, 255, 0.95) !important; color: #a90e0e !important; transform: translateY(-50%) scale(1.1) !important; }
.arrow-prev { left: 2px !important; }
.arrow-next { right: 2px !important; }
.hidden-arrow { display: none !important; }
@keyframes slideFade { from { opacity: 0.4; transform: scale(0.98); } to { opacity: 1; transform: scale(1); } }

.video-badge { position: absolute; top: 4px; left: 4px; background: rgba(169, 14, 14, 0.85) !important; color: #ffffff !important; width: 34px; height: 34px; border-radius: 50%; display: flex; align-items: center; justify-content: center; z-index: 10; box-shadow: 0 4px 10px rgba(0,0,0,0.3); font-size: 13px; padding-left: 2px; box-sizing: border-box; pointer-events: none; transition: all 0.3s ease !important; }
.slide-item:hover .video-badge { background: rgba(17, 11, 11, 0.95) !important; transform: scale(1.08); }
.slide-counter { position: absolute; top: 4px; right: 4px; background: rgba(17, 17, 17, 0.7); color: #ffffff; padding: 4px 10px; border-radius: 12px; font-size: 12px; font-weight: 600; font-family: 'Inter', Arial, sans-serif; z-index: 10; pointer-events: none; backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); box-shadow: 0 2px 6px rgba(0,0,0,0.3); }

/* Καθαρός τίτλος με τσαχπινιά & κίνηση */
#slider-wrapper-desktop .slider-main-title {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    font-size: 14px !important;
    position: relative !important;
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
}

/* Η διακριτική γραμμή που εμφανίζεται από κάτω */
#slider-wrapper-desktop .slider-main-title::after {
    content: '';
    position: absolute;
    width: 0;
    height: 2px;
    bottom: -4px;
    left: 50%;
    background-color: #a90e0e;
    transition: width 0.3s ease;
    transform: translateX(-50%);
    opacity: 0.7;
}
  #slider-wrapper-desktop {
              /* Απαραίτητο λευκό φόντο για να φαίνεται σωστά η σκιά */
 border-radius: 24px;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15); /* Η έντονη σκιά που επιλέξαμε πριν */  
     padding: 0px 10px 10px 10px;
}

#slider-wrapper-desktop:hover .slider-main-title::after,
#slider-wrapper-desktop .slider-main-title:hover::after {
    width: 100%;
}

#slider-wrapper-desktop .slider-main-title::before {
    display: inline-block;
    transition: transform 0.3s ease !important;
}

#slider-wrapper-desktop:hover .slider-main-title::before,
#slider-wrapper-desktop .slider-main-title:hover::before {
    transform: scale(1.05) rotate(5deg) !important;
}
}

/* FACEBOOK GONEIS */
.fb-breakout-card {
    background: rgba(255, 255, 255, 0.15) !important; /* Πολύ πιο διαφανές για να παίρνει το χρώμα του blog */
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
    border: 1px solid rgba(255, 255, 255, 0.3) !important; /* Απαλό γυάλινο περίγραμμα */
    border-radius: 20px !important;
    padding: 45px 20px 25px 20px !important; /* Μεγάλο padding πάνω για να χωρέσει το εικονίδιο */
    text-align: center !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.12) !important; /* Ίδια σκιά με τα άλλα widgets σου */
    font-family: 'Inter', Arial, sans-serif !important;
    max-width: 320px !important;
    margin: 45px auto 20px auto !important; 
    position: relative !important;
    transition: transform 0.4s ease, box-shadow 0.4s ease, border-color 0.4s ease !important;
}

.fb-breakout-card:hover {
    transform: translateY(-5px) !important;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.15) !important;
    border-color: rgba(24, 119, 242, 0.3) !important; /* Ελαφριά μπλε απόχρωση στο hover */
}

/* Το εικονίδιο που "σπάει" τα όρια του κουτιού */
.fb-float-icon {
    position: absolute !important;
    top: -35px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    background: linear-gradient(135deg, #1877f2, #166fe5) !important;
    width: 70px !important;
    height: 70px !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-shadow: 0 8px 20px rgba(24, 119, 242, 0.4) !important;
    border: 4px solid rgba(255, 255, 255, 0.6) !important; /* Ημιδιαφανές λευκό για να δένει με το γυαλί */
    transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
}

/* Παιχνιδιάρικο Hover στο εικονίδιο */
.fb-breakout-card:hover .fb-float-icon {
    transform: translateX(-50%) scale(1.1) rotate(5deg) !important;
}

/* Ένδειξη "Live" / Επίσημο */
.fb-live-indicator {
    display: inline-flex !important;
    align-items: center !important;
    background: rgba(24, 119, 242, 0.1) !important;
    padding: 4px 12px !important;
    border-radius: 20px !important;
    margin-bottom: 15px !important;
    border: 1px solid rgba(24, 119, 242, 0.15) !important;
}

/* Το κινούμενο κυκλάκι */
.fb-pulse {
    width: 8px !important;
    height: 8px !important;
    background-color: #1877f2 !important;
    border-radius: 50% !important;
    margin-right: 6px !important;
    box-shadow: 0 0 0 0 rgba(24, 119, 242, 0.7) !important;
    animation: fb-pulsing 1.5s infinite cubic-bezier(0.66, 0, 0, 1) !important;
}

@keyframes fb-pulsing {
    to { box-shadow: 0 0 0 10px rgba(24, 119, 242, 0) !important; }
}

.fb-live-text {
    font-size: 11px !important;
    font-weight: 700 !important;
    color: #1877f2 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
}

/* Τυπογραφία */
.fb-breakout-title {
    color: #111 !important;
    font-size: 18px !important;
    font-weight: 800 !important;
    margin: 0 0 8px 0 !important;
    letter-spacing: -0.5px !important;
}

.fb-breakout-desc {
    color: #444 !important;
    font-size: 13px !important;
    line-height: 1.5 !important;
    margin: 0 0 20px 0 !important;
}

/* Κουμπί Ghost που γεμίζει στο Hover */
.fb-breakout-btn {
    display: block !important;
    background: rgba(24, 119, 242, 0.05) !important;
    color: #1877f2 !important;
    text-decoration: none !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    padding: 12px 20px !important;
    border-radius: 12px !important;
    border: 2px solid rgba(24, 119, 242, 0.6) !important;
    transition: all 0.3s ease !important;
}

.fb-breakout-btn:hover {
    background: #1877f2 !important;
    color: #ffffff !important;
    border-color: #1877f2 !important;
    box-shadow: 0 5px 15px rgba(24, 119, 242, 0.3) !important;
}


 /* MYTHOI */
#glass-quiz-wrapper, 
#glass-quiz-wrapper-mobile { 
    font-family: system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; 
    display: flex; 
    justify-content: center; 
    padding: 5px; 
}

/* Glassmorphism Card */
.quiz-card { 
    background: rgba(255, 255, 255, 0.3); 
    backdrop-filter: blur(15px); 
    -webkit-backdrop-filter: blur(15px); 
    border: 1px solid rgba(255, 255, 255, 0.5); 
    border-radius: 20px; 
    padding: 20px; 
    width: 100%; 
    max-width: 330px; 
    text-align: center; 
    box-shadow: 0 8px 32px rgba(0,0,0,0.1); 
}

/* Τίτλος & Εικονίδιο */
.glass-sparkle { font-size: 35px; display: inline-block; margin-bottom: 10px; }

#q-title, 
#q-title-mobile { 
    margin: 0 0 15px; 
    font-size: 22px; 
    color: #2c3e50; 
    font-weight: 800; 
}
 
/* Ερώτηση με min-height για αποτροπή αναπηδήσεων (Layout Shift) */
#question-container, 
#question-container-mobile { 
    min-height: 80px; 
    margin-bottom: 15px; 
    display: flex; 
    align-items: center; 
    justify-content: center; 
}

#question-display, 
#question-display-mobile { 
    font-size: 17px; 
    font-weight: 600; 
    color: #111; 
    line-height: 1.4; 
    margin: 0; 
}

/* 3D Κουμπιά Απάντησης */
.buttons-row { display: flex; gap: 10px; }

.quiz-btn { 
    flex: 1; 
    padding: 12px; 
    border: none; 
    border-radius: 12px; 
    font-weight: 800; 
    color: white; 
    cursor: pointer; 
    transition: all 0.2s ease; 
    box-shadow: 0 4px 0 rgba(0,0,0,0.2); 
}

.btn-true { background: #27ae60; } 
.btn-false { background: #e74c3c; }
 
/* Hover effects για Desktop UX */
.btn-true:hover { background: #2ecc71; }
.btn-false:hover { background: #e74c3c; filter: brightness(1.1); }
 
.quiz-btn:active { transform: translateY(3px); box-shadow: 0 1px 0 rgba(0,0,0,0.2); }

/* Κουτί Εξήγησης & Κουμπί Επόμενο */
#explanation-box, 
#explanation-box-mobile { 
    background: rgba(255, 255, 255, 0.8); 
    padding: 15px; 
    border-radius: 12px; 
    margin-top: 15px; 
    border: 1px solid rgba(255, 255, 255, 0.9); 
}

#explanation-text, 
#explanation-text-mobile { 
    font-size: 14px; 
    font-weight: 500; 
    color: #333; 
    margin: 0 0 12px 0; 
    line-height: 1.4; 
}

.next-btn { 
    background: #3498db; 
    color: white; 
    border: none; 
    padding: 10px 18px; 
    border-radius: 8px; 
    font-weight: bold; 
    cursor: pointer; 
    transition: background 0.2s;
}

.next-btn:hover { background: #2980b9; }

/* Feedback & Στατιστικά */
#quiz-feedback, 
#quiz-feedback-mobile { 
    margin-top: 12px; 
    font-weight: 800; 
    font-size: 16px; 
}

#quiz-stats, 
#quiz-stats-mobile { 
    margin-top: 10px; 
    font-size: 13px; 
    color: #555; 
    font-weight: 600; 
}

/* Animations (Με will-change για GPU Hardware Acceleration) */
.fade-in { 
    animation: fadeIn 0.4s ease forwards; 
    will-change: opacity;
}

@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
 
.question-anim { 
    animation: popIn 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards; 
    will-change: transform, opacity;
}

@keyframes popIn {
    0% { opacity: 0; transform: scale(0.9) translateY(10px); }
    100% { opacity: 1; transform: scale(1) translateY(0); }
}
@media screen and (max-width: 768px) {
/* ΕΞΩΤΕΡΙΚΟ ΠΛΑΙΣΙΟ (Quiz Wrapper) */
  #glass-quiz-wrapper-mobile {
    /* Εξωτερικά κενά (Margin) */
    margin-top: -5px !important;    /* Κενό από πάνω */
    margin-bottom: -5px !important; /* Κενό από κάτω */
  }
  }


/* SINDESMOI PISI */
#smart-hub2 {
  font-family: 'Inter', Arial, sans-serif;
  background: var(--glass, rgba(255, 255, 255, 0.18));
  backdrop-filter: blur(15px);
  -webkit-backdrop-filter: blur(15px);
  border: 1px solid rgba(255, 255, 255, 0.4);
  border-top: 1px solid rgba(255, 255, 255, 0.7);
  border-radius: 24px;
  box-shadow: 0 12px 35px rgba(0, 0, 0, 0.1);
  padding: 10px;
  overflow: hidden;
  margin-bottom: 25px;
}

/* 2. Τίτλος (Divider) - Original PC Design */
#smart-hub2 .hub-divider {
  display: flex;
  align-items: center;
  text-align: left;
  justify-content: flex-start;
  font-family: 'Inter', Arial, sans-serif;
  font-size: 16px; /* Επανήλθε στο 16px */
  font-weight: 800;
  color: #000;
  letter-spacing: 0.5px;
  margin-bottom: 20px;
  cursor: default; /* Όχι "χεράκι" στο PC αφού είναι πάντα ανοιχτό */
  user-select: none;
}

/* Οι γραμμές αριστερά και δεξιά από τον τίτλο επανήλθαν */
#smart-hub2 .hub-divider::before { 
  content: ''; 
  width: 16px; 
  flex: none; 
  border-bottom: 1px solid rgba(0,0,0,0.15); 
  margin-right: 5px; 
}
#smart-hub2 .hub-divider::after { 
  content: ''; 
  flex: 1; 
  border-bottom: 1px solid rgba(0,0,0,0.15); 
  margin-left: 15px; 
}

/* 3. Το συρτάρι πάντα ανοιχτό στο PC */
#smart-hub2 .hub-content-wrapper {
  max-height: none !important;
  opacity: 1 !important;
  margin-top: 0;
  display: block;
}

/* 4. Links - Original PC Design */
#smart-hub2 .hub-links { 
  list-style: none !important; 
  margin: 0 !important; 
  padding: 0 !important; 
  display: flex; 
  flex-direction: column; 
  gap: 12px; 
}

#smart-hub2 .hub-links a {
  display: flex;
  align-items: center;
  gap: 15px;
  background: rgba(255, 255, 255, 0.4);
  border: 1px solid rgba(255, 255, 255, 0.6);
  border-left: 5px solid transparent; 
  border-radius: 14px;
  padding: 1px 1px; /* Επανήλθε το στενό padding */
  color: #000 !important;
  font-weight: 700 !important;
  font-size: 15px !important; /* Επανήλθε στο 15px */
  line-height: 1.4 !important;
  text-decoration: none !important;
  transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  
  -webkit-hyphens: auto !important;
  -ms-hyphens: auto !important;     
  hyphens: auto !important;         
  word-break: break-word !important;
}

/* 5. Εικονίδια - Original PC Design */
#smart-hub2 .hub-ic {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px; /* Επανήλθαν οι αρχικές διαστάσεις */
  height: 38px;
  background: rgba(255, 255, 255, 0.9);
  border-radius: 10px;
  font-size: 16px;
  flex-shrink: 0;
  box-shadow: 0 2px 5px rgba(0,0,0,0.08);
  
  color: initial !important;
  font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif !important;
}

/* 6. Hover Effects */
#smart-hub2 .hub-links a:hover {
  background: rgba(255, 255, 255, 0.95);
  border-left: 5px solid #a90e0e;
  transform: translateX(6px) scale(1.02);
  color: #a90e0e !important;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
}

#smart-hub2 .hub-links a:hover .hub-ic {
  transform: scale(1.15) rotate(-5deg);
  background: #fff;
}

/* 7. Απόκρυψη Περιττών Στοιχείων για PC */
#smart-hub2 .hub-toggle-icon,
#smart-hub2 .mobile-only {
  display: none !important;
}

/* 7. GEITONIA */


.featured-box {
    text-align: center;
    background: var(--glass);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    padding: 12px !important;
    border-radius: var(--r);
    border: 1px solid rgba(255, 255, 255, 0.3);
    box-shadow: var(--shadow);
    display: block;
    text-decoration: none;
    color: inherit;
    transition: border-color 0.3s ease;
    margin: 10px 0;
}

/* Απλό εφέ στο περίγραμμα, χωρίς να κουνιέται τίποτα */
.featured-box:hover {
    border-color: #a90e0e;
}

.featured-title {
    font-size: 17px;
    font-weight: 800;
    font-family: Arial, sans-serif;
    margin: 0 0 10px 0;
    color: #a90e0e;
}

.featured-box img {
    width: 100%;
    border-radius: 10px;
    display: block;
    margin-bottom: 12px; /* Κενό ανάμεσα στην εικόνα και το κουμπί */
}

/* Το κουμπί ΕΙΣΟΔΟΣ είναι πλέον πάντα ορατό */
.featured-action {
    background: #a90e0e;
    color: #fff !important;
    border-radius: 20px;
    font-size: 13px;
    font-weight: bold;
    padding: 8px 0;
    display: block;
}

/* ========================================= */
/* --- ΒΙΒΛΙΟΘΗΚΗ (LIB) ---                  */
/* ========================================= */

.featured-box-lib {
    text-align: center;
    background: var(--glass);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    padding: 12px;
    border-radius: var(--r);
    border: 1px solid rgba(255, 255, 255, 0.3);
    box-shadow: var(--shadow);
    display: block;
    text-decoration: none;
    color: inherit;
    transition: border-color 0.3s ease;
    margin: 10px 0;
}

/* Απλό εφέ στο περίγραμμα */
.featured-box-lib:hover {
    border-color: #a90e0e;
}

.featured-title-lib {
    font-size: 16px;
    font-weight: bold;
    font-family: Arial, sans-serif;
    margin: 0 0 10px 0;
    color: #a90e0e;
}

.featured-box-lib img {
    max-width: 130px;
    height: auto;
    border-radius: 8px;
    display: block;
    margin: 0 auto 12px auto; /* Κενό ανάμεσα στην εικόνα και το κουμπί */
}

/* Το κουμπί ΔΙΑΒΑΣΕ ONLINE είναι πλέον πάντα ορατό */
.featured-action-lib {
    background: #a90e0e;
    color: #fff !important;
    border-radius: 20px;
    font-size: 13px;
    font-weight: bold;
    padding: 8px 0;
    display: block;
}

/* 1. Αφαιρούμε το κενό κάτω από την εικόνα στην αρχική κατάσταση */
.featured-box img,
.featured-box-lib img {
    margin-bottom: 0 !important;
    transition: margin-bottom 0.3s ease;
}

/* 2. Κρύβουμε τελείως το κουμπί (ύψος 0) ώστε να μην πιάνει καθόλου χώρο */
.featured-action,
.featured-action-lib {
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    padding: 0 !important;
    transition: max-height 0.35s ease, opacity 0.3s ease, padding 0.35s ease;
}

/* 3. Στο hover: Εμφανίζεται το κουμπί, μεγαλώνει το πλαίσιο και επανέρχονται τα κενά */
.featured-box:hover img,
.featured-box-lib:hover img {
    margin-bottom: 12px !important;
}

.featured-box:hover .featured-action,
.featured-box-lib:hover .featured-action-lib {
    max-height: 60px; /* Επαρκές ύψος για να ανοίξει το κουμπί */
    opacity: 1;
    padding: 8px 0 !important;
}


/* ALERT */
#school-alert-bar {
    position: relative;
    width: 100%;
    background: #e63946; 
    color: #ffffff;
    font-family: 'Inter', Arial, sans-serif;
    font-size: 13.5px;
    font-weight: 600;
    text-align: center;
    padding: 10px 45px 10px 15px;
    box-sizing: border-box;
    z-index: 99999; 
    box-shadow: 0 2px 8px rgba(0,0,0,0.15);
    display: flex;
    align-items: center;
    justify-content: center;
}

.alert-bar-content {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    line-height: 1.4;
}

.alert-icon {
    font-size: 16px;
    animation: alertBellRing 2s infinite ease-in-out;
}

.alert-close-btn {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    background: transparent;
    border: none;
    color: #ffffff;
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
    opacity: 0.75;
    transition: opacity 0.2s ease, transform 0.2s ease;
    padding: 0 5px;
}

.alert-close-btn:hover {
    opacity: 1;
    transform: translateY(-50%) scale(1.15);
}

@keyframes alertBellRing {
    0%, 100% { transform: rotate(0); }
    10% { transform: rotate(15deg); }
    20% { transform: rotate(-15deg); }
    30% { transform: rotate(10deg); }
    40% { transform: rotate(-10deg); }
    50% { transform: rotate(0); }
}

@media (max-width: 600px) {
    #school-alert-bar {
        font-size: 12.5px;
        padding: 8px 35px 8px 10px;
    }
}

  /* Διόρθωση για την επικεφαλίδα (Κουμπί) */
.accordion-header {
  background-color: #f8fbff !important;
  color: #2c3e50 !important;
}

.accordion-header:hover {
  background-color: #eef5ff !important;
  color: #3498db !important;
}

.accordion-header.active {
  background-color: #990000 !important; /* ΕΠΙΒΑΛΛΟΥΜΕ το κόκκινο φόντο */
  color: #ffffff !important;           /* ΕΠΙΒΑΛΛΟΥΜΕ το λευκό κείμενο */
}

/* Σιγουρεύουμε ότι το κείμενο (span) ακούει πάντα το κουμπί */
.accordion-header span {
  color: inherit !important;
}  

.glass-modal-box, .stat-glass-card, .glass-quiz-widget, .glass-quiz-widget-pc, 
.video-glass-card, .jukebox-container, #smart-hub, #smart-hub2 {
    backface-visibility: hidden !important;
    contain: paint !important; 
}

/* Δεσμεύει μνήμη VRAM ΜΟΝΟ όταν ο χρήστης ακουμπάει το στοιχείο (Τεράστια εξοικονόμηση RAM) */
.glass-modal-box:hover, .stat-glass-card:hover, .glass-quiz-widget:hover, 
.glass-quiz-widget-pc:hover, .video-glass-card:hover, 
.jukebox-container:hover, #smart-hub:hover, #smart-hub2:hover {
    will-change: transform, opacity, backdrop-filter !important;
}

 
a, button, .action-menu-btn, .playlist-btn, .sub-fab {
   
    -webkit-tap-highlight-color: transparent;
   
    touch-action: manipulation;
}


*:focus:not(:focus-visible) {
    outline: none !important;
}
*:focus-visible {
    outline: 3px solid #1e6cff !important;
    outline-offset: 4px !important;
    border-radius: 6px;
}

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto !important; }
    * { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}
  /* ==========================================================================
   PERFORMANCE FIX 3: PREVENT NESTED BLUR OVERLOAD
   ========================================================================== */
#sidebar-wrapper .widget, 
#sidebar .widget, 
.sidebar .widget {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

/* ==========================================================================
   MASTER SENIOR TABLET TYPOGRAPHY 900px ews 1500px
   Dynamic Scaling: 35 tois ekato panw apo ta arxika megethi tou PC Desktop
   ========================================================================== */
@media screen and (min-width: 900px) and (max-width: 1500px) and (pointer: coarse) and (orientation: portrait) {
  
  /* KATHOLIKOS SYLLAVISMOS Prostasia Layout */
  .post-body, .widget, .hub-links a, .slide-title, .sch-msg, .q-body p, .q-body-pc p, .stc-caption p, .fb-breakout-desc, .menu-opt, .history-content-pc, .mission-text-pc {
    -webkit-hyphens: auto !important; -ms-hyphens: auto !important; hyphens: auto !important;
    word-break: break-word !important; overflow-wrap: break-word !important;
  }
  
  /* Slider Fix kai Drop Cap */
  .post-body::first-letter { font-size: 2.9em !important; }

  /* VASIKA KEIMENA ARTHRWN (PC 16px -> 22px / PC 18px -> 25px) */
  .post-body, .post-body p, .post-body span, .post-body div, .post-body li { font-size: 22px !important; line-height: 1.6 !important; }
  h3.post-title, .entry-title { font-size: 30px !important; line-height: 1.3 !important; }
   .date-outer .date-header, .date-header, h2.date-header, h2.date-header span { font-size: 18px !important; padding: 3px 8px !important; }
  .post-footer, .post-labels a, .post-timestamp { font-size: 15px !important; }

  /* KENTRIKO MENOU NAV (PC 17px -> 23px) */
  nav { gap: 15px !important; padding: 14px !important; }
  nav a, nav > a, nav div.dropdown > button, nav .mega-menu > button, #HTML1 nav button { font-size: 28px !important; padding: 13px 8px !important; }
  .dropdown-content a, .sub-dropdown-content a { font-size: 22px !important; padding: 8px !important; }

  /* TITLOI WIDGETS KAI KOUMPIA DRASEWN (PC 22px -> 30px) */
  div.widget h2, div.widget > h2.title, .slider-main-title { font-size: 25px !important; padding: 8px 15px !important; }
  .glass-modal-btn, .custom-read-more, .fb-breakout-btn, .action-menu-btn, #quiz-trigger-pc button { font-size: 20px !important; padding: 14px 25px !important; }
  #slider-wrapper-desktop .slider-main-title { font-size: 22px !important; padding: 8px 15px !important; }
  .lib-fullscreen-btn { font-size: 17px !important; padding: 7px 12px !important; }
  .quiz-btn { font-size: 17px !important; padding: 7px 12px !important; }

  /* STATISTIKA SXOLEIOU (PC 42px -> 57px / 32px -> 43px) */
  .stat-icon { font-size: 48px !important; } 
  .stat-number { font-size: 43px !important; } 
  .stat-label { font-size: 15px !important; }

  /* EORTOLOGIO KAI KAIROS */
  .eortologio-title { font-size: 22px !important; } 
  .eort-icon-body { font-size: 35px !important; } 
  .eortologio-date { font-size: 20px !important; }
  .c-day-temps { font-size: 16px !important; } 
  .c-day-name { font-size: 14px !important; }
  .info-box, #eort-world-day, #eort-holiday, #eort-names, #eort-school { font-size: 19px !important; line-height: 1.4 !important; padding: 10px !important; }

  /* JUKEBOX */
  .juke-title { font-size: 27px !important; } 
  .juke-icon { font-size: 46px !important; }
  .playlist-btn, .extra-track-btn { font-size: 16px !important; padding: 8px 12px !important; }
  .juke-hint { font-size: 16px !important; }

  /* EXYPNES SELIDES Smart Hub */
  .hub-divider { font-size: 22px !important; padding: 18px 8px !important; } 
  .hub-links a { font-size: 20px !important; padding: 12px 14px !important; } 
  .hub-ic { width: 51px !important; height: 51px !important; font-size: 22px !important; }
  
  #smart-hub2 .hub-links a { font-size: 20px !important; padding: 12px 14px !important; }
  #smart-hub2 .hub-ic { width: 51px !important; height: 51px !important; font-size: 22px !important; } 
  #smart-hub2 .hub-divider { font-size: 22px !important; padding: 0 !important; margin-bottom: 20px !important; }

  /* QUIZ HISTORY NEWSLETTER FB WIKI */
  .q-title, .q-title-pc, .fb-breakout-title, .stc-header, .history-header-pc h3 { font-size: 24px !important; }
  .q-body p, .q-body-pc p, #question-display, #daily-riddle-question, .fb-breakout-desc, #history-fact-pc, #mission-text-pc, .mission-header-pc h4, .history-content-pc { font-size: 19px !important; line-height: 1.5 !important; }
  
  .wiki-search-input { font-size: 19px !important; } 
  .wiki-search-btn { font-size: 18px !important; } 
  .wiki-search-icon { font-size: 24px !important; }
  
  .featured-title, .featured-title-lib { font-size: 23px !important; } 
  .featured-action, .featured-action-lib { font-size: 18px !important; }
  
  #recent-slider .slide-title strong { font-size: 22px !important; } 
  .slide-desc { font-size: 19px !important; }
  .alert-bar-content { font-size: 18px !important; }

  /* TICKER EIDISEWN KAI INLINE OVERRIDES */
  #unique-top-ticker-outer .unique-top-ticker-link { font-size: 24px !important; }
  .stats-notice { font-size: 19px !important; }
  .bouncing-secret { font-size: 19px !important; line-height: 1.5 !important; }
  html body .video-glass-title { font-size: 21px !important; }
  #custom-post-slider-desktop .slide-title { font-size: 17px !important; line-height: 1.4 !important; padding: 5px 8px !important; }
  .custom-newsletter-notice { font-size: 17px !important; line-height: 1.5 !important; padding: 14px 18px !important; }
  #hub-weather-container + div { font-size: 17px !important; line-height: 1.4 !important; margin-top: 15px !important; }
  .history-hint-pc { font-size: 17px !important; margin-top: 5px !important; }
  #daily-riddle-answer + p { font-size: 17px !important; margin-top: 18px !important; }

  /* LIVE WRARIO KAI GLASS MODALS */
  .bell-main { font-size: 27px !important; line-height: 1.4 !important; }
  .bell-sub { font-size: 19px !important; }
  .tracker-title { font-size: 1.2em !important; }
  .glass-bell-tracker.active { transform: scale(1.35) !important; z-index: 9999 !important; transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important; }

  .glass-modal-box { max-width: 500px !important; padding: 40px 25px !important; }
  .glass-modal-icon { font-size: 68px !important; margin-bottom: 20px !important; }
  .glass-modal-text { font-size: 22px !important; line-height: 1.5 !important; margin-bottom: 25px !important; }
  .glass-modal-close { font-size: 38px !important; top: 15px !important; right: 25px !important; }

  .holiday-icon { font-size: 47px !important; }
  .holiday-text { font-size: 24px !important; }
  .battery-box { width: 243px !important; height: 38px !important; } 
  .battery-text { font-size: 18px !important; margin-top: 12px !important; }
  .click-hint { font-size: 19px !important; margin-top: 14px !important; }
  .secret-message { font-size: 25px !important; line-height: 1.5 !important; padding: 25px 20px !important; }

  .stc-caption p { font-size: 16px !important; line-height: 1.4 !important; }
  .stc-header { font-size: 24px !important; } 
  .stc-caption h4 { font-size: 20px !important; }

  /* ARXEIO THIKI KAI HMEROLOGIO */
  #BlogArchive1 .archivedate, #BlogArchive1 .archivedate a { font-size: 19px !important; }
  #BlogArchive1 ul.posts li a { font-size: 17px !important; line-height: 1.4 !important; }
  .post-count { font-size: 14px !important; }
  .zippy { font-size: 19px !important; }

  #monthLabel { font-size: 16px !important; }
  .fc-col-header-cell-cushion { font-size: 14px !important; }
  .fc-daygrid-day-number { font-size: 16px !important; padding: 6px !important; }

  /* SXOLIA KAI SMART FEEDBACK Kardoules */
  .comments h4 { font-size: 30px !important; }
  .comment-body p { font-size: 21px !important; line-height: 1.6 !important; }
  .comment-author { font-size: 19px !important; }
  .comment-timestamp { font-size: 17px !important; }
  
  .smart-feedback-btn { padding: 6px 12px !important; font-size: 25px !important; }
  .smart-feedback-btn span:first-child { font-size: 33px !important; }

  /* SMART GLOSSARY KAI LIGHTBOX Media Viewer */
  .glossary-title { font-size: 22px !important; }
  #smart-glossary-tooltip { font-size: 19px !important; max-width: 450px !important; padding: 18px 25px !important; }

  .my-custom-lightbox-close { font-size: 61px !important; top: 20px !important; right: 30px !important; }
  .my-custom-lightbox-prev, .my-custom-lightbox-next { font-size: 54px !important; padding: 25px !important; }
  .my-custom-lightbox-counter { font-size: 22px !important; top: 30px !important; left: 30px !important; }
  #lightbox-download { font-size: 52px !important; top: 30px !important; left: 40px !important; }
  /* --- ΓΡΙΦΟΣ ΤΗΣ ΗΜΕΡΑΣ (+35% Scaling) --- */
  .blur-box { 
    font-size: 19px !important; 
    padding: 28px !important; 
    max-width: 450px !important; 
  }
  .blur-answer { 
    font-size: 25px !important; 
    margin-top: 20px !important; /* Έδωσα λίγο παραπάνω αέρα από τα 15px */
  }
   .dropdown.useful .dropdown-content {
    right: -30px !important;
    left: auto !important;
}
    
.dropdown.actions .dropdown-content {
    left: -100px !important; }
  #calendar-widget-wrapper {
  margin: 0 auto 35px auto; /* Κεντράρισμα χωρίς αρνητικά margins */
  
  }
  .calendar-hint-text {
    font-size: 15px; 
  }
.tooltip-title-link span {
  font-size: 24px!important; text-align: center;     
  }
#calendar-tooltip {
     max-width: 500px;
  }
#calendar { 
    min-height: 430px; 
  }
  /* --- ΚΑΡΤΕΣ ΚΑΙΡΟΥ & 3D FLIP EFFECT --- */
.c-day-card {
  height: 135px; /* Ελαφρώς ψηλότερο για καλύτερη αναλογία */
}
  .juke-header + div {
      font-size: 17px !important; 
      font-weight: bold;
  }
  
    .smart-advisor-box {
  font-size: 0.95rem;}
  .desk-glass-circle-btn {
    font-size: 20.4px;
  }

  .desk-glass-icon {
    font-size: 48px;
  }

  .desk-glass-title {
    font-size: 22.8px;
  }

  .desk-glass-subtitle {
    font-size: 15.6px;
  }

  .desk-glass-input {
    font-size: 16.8px;
  }

  .desk-glass-notice-box {
    font-size: 13.2px;
  }

  .desk-glass-submit-btn {
    font-size: 18px;
  }

  #desk-scratch-title-overlay {
    font-size: 16.8px;
  }

  .desk-scratch-hint {
    font-size: 14.4px;
  }
  .kf-title-mob { 
    font-size: 28.8px; 
  }
  .kf-title-mob span { 
    font-size: 28.8px; 
  }

  /* 21px + 20% = 25.2px */
  .kf-title-desk { 
    font-size: 25.2px; 
  }
  .kf-title-desk span { 
    font-size: 25.2px; 
  }

  /* 14px + 20% = 16.8px */
  .kf-instruction { 
    font-size: 16.8px; 
  }

  /* 17px + 20% = 20.4px */
  .kf-fact-text { 
    font-size: 20.4px; 
  }

  /* 12px + 20% = 14.4px */
  .kf-re-instruction { 
    font-size: 14.4px; 
  }

}

/* ALBUM */
  #school-album {
    font-family: 'Inter', sans-serif;
    background: linear-gradient(135deg, rgba(255,255,255,0.95), rgba(240,246,250,0.85));
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    padding: 30px 30px 10px 30px;
    border-radius: 24px;
    border: 1px solid rgba(255,255,255,0.8);
    box-shadow: 0 15px 35px rgba(0,0,0,0.08), inset 0 0 0 1px rgba(255,255,255,0.5);
    position: relative;
    overflow: hidden;
  }

  /* Διακοσμητικά χρώματα στο φόντο */
  #school-album::before {
    content: ''; position: absolute; top: -50px; right: -50px; width: 200px; height: 200px;
    background: radial-gradient(circle, rgba(30,108,255,0.15) 0%, transparent 70%);
    border-radius: 50%; z-index: 0; pointer-events: none;
  }
  #school-album::after {
    content: ''; position: absolute; bottom: -30px; left: -30px; width: 150px; height: 150px;
    background: radial-gradient(circle, rgba(169,14,14,0.1) 0%, transparent 70%);
    border-radius: 50%; z-index: 0; pointer-events: none;
  }

  /* --- Κεφαλίδα Άλμπουμ --- */
  .album-header-wrap {
    position: relative;
    z-index: 1;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 2px dashed rgba(0,0,0,0.08);
    padding-bottom: 20px;
    margin-bottom: 25px;
    flex-wrap: wrap;
    gap: 15px;
  }

  .album-title-group { display: flex; flex-direction: column; }
  
  .album-title { margin: 0; color: #111; font-size: 23px; font-weight: 800; display: flex; align-items: center; gap: 10px; letter-spacing: -0.5px; }
  .album-title span:first-child { font-size: 40px; } /* Μεγαλώνει ΜΟΝΟ το emoji */
  
  .album-subtitle { font-family: 'Caveat', cursive; color: #a90e0e; font-size: 18px; margin-top: 2px; margin-left: 5px; transform: rotate(-2deg); }

  /* --- Εργαλεία (Μενού & Κουμπί) --- */
  .album-controls { display: flex; gap: 15px; align-items: center; flex-wrap: wrap; }
  
  .theme-selector {
    appearance: none; -webkit-appearance: none; padding: 12px 40px 12px 20px; border-radius: 30px;
    border: 2px solid #e2e8f0; color: #2c3e50; font-weight: 700; font-size: 14px; cursor: pointer;
    background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23666' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E") no-repeat right 15px center;
    box-shadow: 0 4px 10px rgba(0,0,0,0.03); transition: all 0.3s ease;
  }
  .theme-selector:hover, .theme-selector:focus { border-color: #1e6cff; box-shadow: 0 4px 15px rgba(30,108,255,0.15); outline: none; }

  .btn-upload {
    background: linear-gradient(135deg, #10b981, #047857); color: white; border: none; padding: 12px 26px; border-radius: 30px;
    font-weight: 700; font-size: 15px; cursor: pointer; box-shadow: 0 6px 15px rgba(16, 185, 129, 0.3); transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    display: flex; align-items: center; gap: 8px;
  }
  .btn-upload:hover { transform: translateY(-3px) scale(1.02); box-shadow: 0 10px 20px rgba(16, 185, 129, 0.4); background: linear-gradient(135deg, #059669, #064e3b); }
  /* --- Πλέγμα Polaroid (Masonry) --- */
 .masonry-grid { position: relative; z-index: 1; column-count: 3; column-gap: 25px; padding-top: 15px; padding-bottom: 0px; }
  
  .polaroid-item {
    break-inside: avoid; margin-bottom: 10px; background: #fff; padding: 12px 12px 35px 12px;
    border-radius: 4px; box-shadow: 0 8px 20px rgba(0,0,0,0.12); transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    position: relative; cursor: zoom-in;
    animation: fadeUp 0.5s ease backwards;
  }

  @keyframes fadeUp {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
  }

  .polaroid-item.hidden-photo { display: none !important; }

  .polaroid-item:nth-child(even) { transform: rotate(3deg); }
  .polaroid-item:nth-child(odd) { transform: rotate(-3deg); }
  .polaroid-item:nth-child(3n) { transform: rotate(1.5deg); }
  
  .polaroid-item::before { content: '📌'; position: absolute; top: -15px; left: 50%; transform: translateX(-50%); font-size: 26px; z-index: 3; filter: drop-shadow(0 3px 3px rgba(0,0,0,0.3)); transition: transform 0.3s; }
  .polaroid-item:hover { transform: scale(1.08) rotate(0deg); z-index: 10; box-shadow: 0 20px 40px rgba(0,0,0,0.2); }
  .polaroid-item:hover::before { transform: translateX(-50%) scale(1.2); }
  .polaroid-item img { width: 100%; border-radius: 2px; display: block; background: #f4f4f4; min-height: 150px; }

  /* Στυλ για τη Λεζάντα κάτω από τη φωτογραφία */
  .polaroid-caption { font-family: 'Caveat', cursive; font-size: 17px; color: #333; text-align: center; margin-top: 10px; line-height: 1.2; word-wrap: break-word; }

  /* --- Κουμπί Load More --- */
 .load-more-wrap { text-align: center; } /* Αφαιρέσαμε το margin-top */
  #btn-load-more {
    display: none; 
   margin: 15px auto 0 auto;
    background: #fff;
    color: #1e6cff;
    border: 2px solid #1e6cff;
    padding: 12px 35px;
    border-radius: 30px;
    font-size: 15px;
    font-weight: 800;
    cursor: pointer;
    transition: all 0.3s;
    box-shadow: 0 4px 10px rgba(0,0,0,0.05);
    position: relative;
    z-index: 2;
  }
  #btn-load-more:hover { background: #1e6cff; color: #fff; box-shadow: 0 6px 15px rgba(30,108,255,0.2); transform: translateY(-2px); }

  /* --- Άδεια Κατάσταση --- */
  #empty-state { position: relative; z-index: 1; text-align: center; padding: 50px 20px; background: rgba(255,255,255,0.6); border-radius: 16px; border: 2px dashed #cbd5e1; }
  #empty-state h4 { color: #1e293b; font-size: 22px; font-weight: 800; margin: 0 0 10px 0;}
  #empty-state p { color: #64748b; font-size: 16px; margin: 0;}

  /* --- Responsive --- */
  @media (max-width: 992px) { .masonry-grid { column-count: 2; } }
  @media (max-width: 768px) {
    #school-album { padding: 20px; }
    .album-header-wrap { flex-direction: column; align-items: center; text-align: center; }
    .album-controls { flex-direction: column; width: 100%; gap: 15px;}
    .theme-selector { width: 100%; text-align: center; padding: 12px 20px;}
    .btn-upload { width: 100%; justify-content: center; }
    .masonry-grid { column-count: 1; }
  }
  @media (min-width: 900px) and (max-width: 1500px) and (pointer: coarse) {
    .album-title { font-size: 32px; }
    .album-title span:first-child { font-size: 52px; }
    .album-subtitle { font-size: 24.8px; }
    .theme-selector { font-size: 18.2px; }
    .btn-upload { font-size: 19.5px; }
    .polaroid-item::before { font-size: 33.8px; }
    .polaroid-caption { font-size: 20px; }
    #btn-load-more { font-size: 19.5px; }
    #empty-state h4 { font-size: 28.6px; }
    #empty-state p { font-size: 20.8px; }
  }
/* Μικραίνει ΜΟΝΟ το placeholder στο SweetAlert, ώστε να χωράει όλο το κείμενο */
#swal-input-caption::placeholder {
  font-size: 17px !important;
}
/* Αλλαγή μεγέθους γραμμάτων στο πεδίο εισαγωγής του SweetAlert */
@media (max-width: 768px) {
    .swal2-input {
        font-size: 18px !important;
    }
}
/* --- Κεντράρισμα όλων των στοιχείων της κεφαλίδας για οθόνες > 768px --- */
@media (min-width: 769px) {
  /* Στοίχιση του κεντρικού wrapper στο κέντρο */
  .album-header-wrap {
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
  }

  /* Κεντράρισμα τίτλου και υπότιτλου */
  .album-title-group {
    align-items: center;
    text-align: center;
  }

  .album-title {
    justify-content: center;
  }

  /* Κεντράρισμα του dropdown και του κουμπιού σε κάθετη στοίχιση */
  .album-controls {
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }
}
/* Αλλαγή φόντου στις επιλογές της λίστας (για να μην χτυπάει με το κουμπί) */
  .theme-selector option {
    background-color: #ffffff; /* Καθαρό λευκό φόντο */
    color: #1e293b; /* Σκούρο γκρι/μπλε κείμενο */
    font-weight: 600;
    padding: 10px;
  }
/* --- Drag & Drop Overlay --- */
  .drag-overlay {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(16, 185, 129, 0.90); /* Απαλό ημιδιάφανο πράσινο */
    backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
    display: flex; flex-direction: column; justify-content: center; align-items: center;
    z-index: 9999; 
    opacity: 0; visibility: hidden; pointer-events: none;
    transition: all 0.3s ease;
    border-radius: 24px;
    border: 4px dashed rgba(255,255,255,0.8);
  }
  .drag-overlay.active {
    opacity: 1; visibility: visible; pointer-events: all;
  }
  .drag-overlay-text {
    color: white; font-size: 32px; font-weight: 800; text-shadow: 0 4px 10px rgba(0,0,0,0.2); pointer-events: none;
  }
  .drag-overlay-icon {
    font-size: 60px; pointer-events: none; margin-bottom: 10px;
  }
/* ========================================================= */
/* --- ΔΙΑΚΟΣΜΗΤΙΚΑ ΣΤΟΙΧΕΙΑ ΚΕΦΑΛΙΔΑΣ (Μόνο για Desktop) --- */
/* ========================================================= */

/* Κρύβουμε όλα τα διακοσμητικά σε κινητά (κάτω από 768px) */
@media (max-width: 768px) {
  .decor-idea { display: none !important; }
}

/* Εμφάνιση μόνο σε μεγαλύτερες οθόνες */
@media (min-width: 1069px) {
  .decor-idea {
    position: absolute;
    pointer-events: none; /* Να μην εμποδίζουν το πάτημα των κουμπιών */
    z-index: 0; 
  }

  /* --- ΙΔΕΑ 3: Scrapbook (Σελοτέιπ & Βελάκι) --- */
  .tape {
    top: -10px;
    width: 100px;
    height: 28px;
    background: rgba(255, 255, 255, 0.4);
    border: 1px solid rgba(255,255,255,0.7);
    box-shadow: 0 2px 5px rgba(0,0,0,0.05);
    backdrop-filter: blur(4px);
    z-index: 2;
  }
  .left-tape { left: -15px; transform: rotate(-35deg); background: rgba(30, 108, 255, 0.1); }
  .right-tape { right: -15px; transform: rotate(35deg); background: rgba(253, 224, 71, 0.3); }
  
  .scrapbook-arrow {
    right: 40px;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    opacity: 0.8;
  }
  .scrapbook-arrow .arrow-text {
    font-family: 'Caveat', cursive;
    color: #a90e0e;
    font-size: 24px;
    transform: rotate(10deg);
    margin-bottom: -15px;
    margin-right: -10px;
  }
  .scrapbook-arrow svg { width: 60px; height: 60px; }

}
/* --- Προσαρμογή βελών Lightbox ΜΟΝΟ για κινητά --- */
@media (max-width: 768px) {
  .lightbox-arrow1 {
    font-size: 28px !important;  /* Πιο μικρά (αρχικό: 50px) */
    top: 40% !important;         /* Πιο πάνω (μικρότερο ποσοστό = πιο ψηλά στην οθόνη) */
    padding: 10px !important;
    opacity: 0.4 !important;/* Μικραίνουμε λίγο και το "αόρατο" πλαίσιο πατήματος */
  }
#album-dynamic-caption {
    font-size: 20px !important; /* Το αρχικό είναι 32px. Μικραίνεις το νούμερο όσο θες! */
  }
}
@media (min-width: 900px) and (max-width: 1500px) and (hover: none) and (pointer: coarse) {
  .scrapbook-arrow {
    right: -10px; /* Το τραβάμε πιο κοντά στην άκρη για να μην πέφτει στο μενού */
    top: 48%; /* Το κατεβάζουμε λίγο πιο κάτω */
    transform: translateY(-50%) scale(0.85); /* Το μικραίνουμε κατά 25% */
  }
}

/* ΤΟ ΣΤΥΛ ΤΟΥ QUIZ ΓΙΑ ΚΙΝΗΤΑ (Glassmorphism) --- */
.glass-quiz-widget {
    background: rgba(255, 255, 255, 0.25);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(255, 255, 255, 0.5);
    border-radius: 24px;
    padding: 18px;
    text-align: center;
    box-shadow: 0 12px 35px rgba(0, 0, 0, 0.1);
    margin-bottom: 25px;
    transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275), border-color 0.4s ease;
    box-sizing: border-box;
}

.q-header { margin-bottom: 15px; position: relative; }

.emoji-glow {
    position: relative;
    display: inline-block;
    min-width: 120px;
    height: 65px;
    margin-bottom: 4px;
}
.emoji-glow::before {
    content: '';
    position: absolute;
    top: 50%; left: 50%; transform: translate(-50%, -50%);
    width: 110px; height: 60px;
    background: radial-gradient(circle, rgba(169,14,14,0.35) 0%, rgba(255,255,255,0) 75%);
    border-radius: 50%; z-index: 0;
}

.q-memoji {
    font-size: 52px; display: inline-block; position: relative;
    z-index: 1; letter-spacing: -2px; 
    filter: drop-shadow(0px 4px 8px rgba(0,0,0,0.25));
    animation: floatMemojiMobile 3s ease-in-out infinite;
}
@keyframes floatMemojiMobile {
    0% { transform: translateY(0px) scale(1); }
    50% { transform: translateY(-4px) scale(1.02) rotate(2deg); }
    100% { transform: translateY(0px) scale(1); }
}

.q-title {
    font-family: 'Inter', Arial, sans-serif; font-size: 21px !important;
    font-weight: 900; margin: 0;
    letter-spacing: 0.8px;
    background: linear-gradient(90deg, #a90e0e, #2c3e50);
    -webkit-background-clip: text; -webkit-text-fill-color: transparent;
}

.q-body p {
    font-family: Arial, sans-serif; font-size: 15px;
    color: #222; font-weight: 600; line-height: 1.5;
    margin-bottom: 18px; padding: 12px 14px;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0.4)); 
    border-radius: 12px; border: 1px solid rgba(255, 255, 255, 0.6);
    border-left: 5px solid #a90e0e; text-align: left;
    box-shadow: 0 4px 15px rgba(0,0,0,0.04);
}

/* === ΤΟ ΣΥΡΤΑΡΙ ΓΙΑ ΤΟ ΚΙΝΗΤΟ (Χωρίς σταθερό ύψος) === */
.form-container {
    border-radius: 14px; 
    background: rgba(255, 255, 255, 0.4); 
    border: 1px solid rgba(255, 255, 255, 0.5); 
    box-shadow: inset 0 2px 8px rgba(0,0,0,0.04);
    padding: 15px;
    margin-top: 15px;
    transition: box-shadow 0.3s ease;
}

/* === ΝΕΑ ΠΕΔΙΑ ΓΙΑ ΚΙΝΗΤΟ === */
.glass-input-mobile {
    width: 100%; padding: 12px; margin-bottom: 12px;
    border: 1px solid rgba(255, 255, 255, 0.6); border-radius: 12px;
    background: rgba(255, 255, 255, 0.7); font-family: Arial, sans-serif;
    font-size: 14px; box-sizing: border-box; outline: none; transition: 0.3s;
}
.glass-input-mobile:focus { border-color: #a90e0e; background: rgba(255, 255, 255, 0.95); }
.glass-textarea-mobile { resize: vertical; min-height: 80px; }

/* Εφέ στο πάτημα των κουμπιών στο κινητό (active αντί για hover) */
#quiz-trigger-mobile button:active, #quiz-submit-btn-mobile:active {
    transform: scale(0.95);
    background: #8c0a0a !important;
    transition: 0.1s;
}

/* === ΝΕΟ: Ταμπελάκι Πάνω Δεξιά (Mobile - Ιδέα 3) === */
.top-badge-mobile {
    position: absolute;
    margin-top: -17px; 
    right: -16px;
    background: rgba(255, 255, 255, 0.65);
    border: 1px solid rgba(255, 255, 255, 0.8);
    color: #2c3e50;
    padding: 10px 6px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 800;
    cursor: pointer;
    box-shadow: 0 4px 6px rgba(0,0,0,0.05);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px); /* Απαραίτητο για τα iPhone (Safari) */
    transition: all 0.2s ease;
    z-index: 10;
}

/* Εφέ όταν το πατάει κάποιος με το δάχτυλο στην οθόνη αφής */
.top-badge-mobile:active {
    background: #2c3e50;
    color: white;
    transform: translateY(2px) scale(0.95);
}
@media screen and (max-width: 768px) {
/* ΕΞΩΤΕΡΙΚΟ ΠΛΑΙΣΙΟ (Mobile Quiz Wrapper) */
  #mobile-quiz-wrapper {
    /* Εξωτερικά κενά (Margin) */
    margin-top: 0px !important;    /* Κενό από πάνω */
    margin-bottom: -25px !important; /* Κενό από κάτω */
  }
  }

/* --- 3. ΤΟ ΣΤΥΛ ΤΟΥ QUIZ (Glassmorphism) PC --- */
.glass-quiz-widget-pc {
    background: rgba(255, 255, 255, 0.25);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(255, 255, 255, 0.5);
    border-radius: 24px;
    padding: 18px;
    text-align: center;
    box-shadow: 0 12px 35px rgba(0, 0, 0, 0.1);
    margin-bottom: 25px;
    transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275), border-color 0.4s ease;
    box-sizing: border-box;
}
.glass-quiz-widget-pc:hover {
    transform: translateY(-6px);
    border-color: #a90e0e; 
    box-shadow: 0 18px 45px rgba(169, 14, 14, 0.15);
}
.q-header-pc { margin-bottom: 15px; position: relative; }
.emoji-glow-pc {
    position: relative;
    display: inline-block;
    min-width: 120px;
    height: 65px;
    margin-bottom: 4px;
   top: 10px;
}
.emoji-glow-pc::before {
    content: '';
    position: absolute;
    top: 50%; left: 50%; transform: translate(-50%, -50%);
    width: 110px; height: 60px;
    background: radial-gradient(circle, rgba(169,14,14,0.35) 0%, rgba(255,255,255,0) 75%);
    border-radius: 50%; z-index: 0;
}
.q-memoji-pc {
    font-size: 52px; display: inline-block; position: relative;
    z-index: 1; letter-spacing: -2px; 
    filter: drop-shadow(0px 4px 8px rgba(0,0,0,0.25));
    animation: floatMemojiPC 3s ease-in-out infinite;
}
@keyframes floatMemojiPC {
    0% { transform: translateY(0px) scale(1); }
    50% { transform: translateY(-5px) scale(1.03) rotate(2deg); }
    100% { transform: translateY(0px) scale(1); }
}
.q-title-pc {
    font-family: 'Inter', Arial, sans-serif; font-size: 21px !important;
    font-weight: 900; margin: 0;
    letter-spacing: 0.8px;
    background: linear-gradient(90deg, #a90e0e, #2c3e50);
    -webkit-background-clip: text; -webkit-text-fill-color: transparent;
}
.q-body-pc p {
    font-family: Arial, sans-serif; font-size: 14px;
    color: #222; font-weight: 600; line-height: 1.5;
    margin-bottom: 18px; padding: 12px 14px;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0.4)); 
    border-radius: 12px; border: 1px solid rgba(255, 255, 255, 0.6);
    border-left: 5px solid #a90e0e; text-align: left;
    box-shadow: 0 4px 15px rgba(0,0,0,0.04);
}

/* === ΔΙΟΡΘΩΜΕΝΟ ΣΥΡΤΑΡΙ (Χωρίς σταθερό ύψος) === */
.form-container-pc {
    border-radius: 14px; 
    background: rgba(255, 255, 255, 0.4); 
    border: 1px solid rgba(255, 255, 255, 0.5); 
    box-shadow: inset 0 2px 8px rgba(0,0,0,0.04);
    padding: 15px;
    margin-top: 15px;
    transition: box-shadow 0.3s ease;
}
.form-container-pc:hover { box-shadow: inset 0 2px 12px rgba(169, 14, 14, 0.08); }

/* === ΣΤΥΛ ΓΙΑ ΤΑ ΝΕΑ ΠΕΔΙΑ === */
.glass-input-pc {
    width: 100%; padding: 12px; margin-bottom: 12px;
    border: 1px solid rgba(255, 255, 255, 0.6); border-radius: 12px;
    background: rgba(255, 255, 255, 0.7); font-family: Arial, sans-serif;
    font-size: 14px; box-sizing: border-box; outline: none; transition: 0.3s;
}
.glass-input-pc:focus { border-color: #a90e0e; background: rgba(255, 255, 255, 0.95); }
.glass-textarea-pc { resize: vertical; min-height: 80px; }

#quiz-trigger-pc button:hover, #quiz-submit-btn-pc:hover {
    transform: scale(1.05);
    background: #8c0a0a !important;
    transition: 0.3s;
}

@media (min-width: 768px) {
    #pc-quiz-wrapper { margin-top: 15px; }
}

.top-badge-pc {
    position: absolute;
    margin-top: -18px;
    right: -14px;
    background: rgba(255, 255, 255, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.8);
    color: #2c3e50;
    padding: 6px 6px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 800;
    cursor: pointer;
    box-shadow: 0 4px 6px rgba(0,0,0,0.05);
    backdrop-filter: blur(8px);
    transition: all 0.3s ease;
    z-index: 10;
}

.top-badge-pc:hover {
    background: #2c3e50;
    color: white;
    transform: translateY(-2px);
}

/*  VIVLIOTHIKI WIDGET */
  #premium-lib-container {
    /* ΑΛΛΑΓΗ 1: Διάφανο Φόντο */
    --bg-main: transparent; 
    --text-main: #1e293b; --text-muted: #64748b;
    --card-bg: #ffffff; --card-border: #f1f5f9; --card-hover: #cbd5e1;
    --input-bg: #f8fafc; --input-border: #e2e8f0;
    --modal-bg: #ffffff; --modal-overlay: rgba(15, 23, 42, 0.7);
    --btn-bg: #f1f5f9; --btn-hover: #e2e8f0; --accent: #3b82f6; 
    --skeleton: #e2e8f0; --skeleton-shine: #ffffff;

    width: 100%; box-sizing: border-box; background: var(--bg-main); color: var(--text-main);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    transition: background 0.3s, color 0.3s; position: relative;
    
    /* ΑΛΛΑΓΗ 2: Αφαιρέσαμε το padding, το box-shadow και το border! */
  }

  #premium-lib-container.dark-mode {
    --bg-main: #0f172a; --text-main: #f8fafc; --text-muted: #94a3b8;
    --card-bg: #1e293b; --card-border: #334155; --card-hover: #475569;
    --input-bg: #1e293b; --input-border: #475569;
    --modal-bg: #1e293b; --modal-overlay: rgba(0, 0, 0, 0.85);
    --btn-bg: #334155; --btn-hover: #475569; 
    --skeleton: #334155; --skeleton-shine: #475569;
  }

  /* --- HEADER & ΚΟΥΜΠΙΑ --- */
  .lib-header { margin-bottom: 25px; }
  .lib-title-row { display: flex; justify-content: space-between; align-items: center; margin-bottom: 15px; flex-wrap: wrap; gap: 10px;}
  .lib-title { margin: 0; font-size: 1.3rem; font-weight: 700; display: flex; align-items: center; gap: 10px; }
  .lib-count-badge { background: var(--accent); color: white; padding: 4px 12px; border-radius: 20px; font-size: 0.85rem; font-weight: bold; }
  
  .lib-actions { display: flex; gap: 8px; }
  .lib-btn { 
    background: var(--btn-bg); color: var(--text-main); border: 1px solid var(--input-border); 
    padding: 10px 16px; border-radius: 20px; font-size: 1.05rem; font-weight: 600; cursor: pointer; transition: 0.2s; 
    display: flex; align-items: center; justify-content: center; gap: 6px;
  }
  .lib-btn:hover { background: var(--btn-hover); border-color: var(--text-muted); }
  .lib-btn.active { background: #ef4444; color: #fff; border-color: #ef4444; }

  /* --- ΑΝΑΖΗΤΗΣΗ --- */
  .lib-search-box input {
    width: 100%; padding: 12px 15px; border: 2px solid var(--input-border); border-radius: 8px;
    font-size: 0.95rem; color: var(--text-main); box-sizing: border-box; outline: none; transition: 0.3s;
    background: var(--input-bg) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'%3E%3C/circle%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'%3E%3C/line%3E%3C/svg%3E") no-repeat 97% center;
  }
  .lib-search-box input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15); }

  /* --- ΡΑΦΙ ΙΣΤΟΡΙΚΟΥ --- */
  .lib-section-title { font-size: 0.95rem; color: var(--text-muted); margin: 0 0 12px 0; font-weight: 700; text-transform: uppercase; }
  .lib-history-grid { display: flex; gap: 15px; overflow-x: auto; padding-bottom: 10px; scrollbar-width: thin; }
  .lib-history-grid .lib-book-card { min-width: 120px; max-width: 120px; flex-shrink: 0; }
  .lib-divider { border: 0; height: 1px; background: var(--card-border); margin: 15px 0 25px 0; }

  /* --- GRID ΒΙΒΛΙΩΝ --- */
  .lib-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 15px; }

  .lib-book-card {
    display: flex; flex-direction: column; background: var(--card-bg);
    border-radius: 8px; overflow: hidden; border: 1px solid var(--card-border); cursor: pointer;
    transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s; position: relative;
  }
  .lib-book-card:hover { transform: translateY(-5px); box-shadow: 0 10px 20px rgba(0,0,0,0.15); border-color: var(--card-hover); }

  .lib-cover-wrapper { position: relative; width: 100%; aspect-ratio: 2/3; background: var(--btn-bg); overflow: hidden; }
  .lib-cover { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s ease; }
  .lib-book-card:hover .lib-cover { transform: scale(1.06); }

  .lib-overlay {
    position: absolute; inset: 0; background: rgba(15, 23, 42, 0.4); backdrop-filter: blur(2px);
    display: flex; align-items: center; justify-content: center; opacity: 0; transition: opacity 0.3s ease;
  }
  .lib-book-card:hover .lib-overlay { opacity: 1; }
  .lib-read-btn-hover { background: var(--accent); color: white; padding: 6px 12px; border-radius: 20px; font-size: 0.8rem; font-weight: bold; transform: translateY(10px); transition: transform 0.3s ease; }
  .lib-book-card:hover .lib-read-btn-hover { transform: translateY(0); }

  /* Κουμπί Αγαπημένων */
  .lib-fav-icon {
    position: absolute; top: 8px; right: 8px; background: rgba(255,255,255,0.95);
    border-radius: 50%; width: 30px; height: 30px; display: flex; align-items: center; justify-content: center;
    font-size: 1.1rem; cursor: pointer; z-index: 10; border: none; box-shadow: 0 2px 5px rgba(0,0,0,0.2);
    transition: transform 0.2s; color: #cbd5e1; padding:0; line-height:1;
  }
  .lib-fav-icon:hover { transform: scale(1.15); background: white; }

  .lib-info { padding: 12px 10px; text-align: center; display:flex; align-items:center; justify-content:center; flex:1;}
  .lib-book-title {
    margin: 0; font-size: 0.85rem; font-weight: 600; color: var(--text-main); line-height: 1.3;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  }

  /* --- SKELETON LOADER (Εφέ Φόρτωσης) --- */
  .lib-skeleton-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 15px; margin-top: 15px; }
  .lib-skeleton-card { 
    width: 100%; aspect-ratio: 2/3; border-radius: 8px; border: 1px solid var(--card-border);
    background: linear-gradient(90deg, var(--skeleton) 25%, var(--skeleton-shine) 50%, var(--skeleton) 75%);
    background-size: 200% 100%; animation: lib-shimmer 1.5s infinite;
  }
  @keyframes lib-shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }

  /* --- NO RESULTS --- */
  .lib-no-results { padding: 20px 0; }
  .no-results-msg { text-align: center; color: var(--text-muted); font-size: 1.05rem; margin-bottom: 25px; }
  .suggestions-title { font-weight: 700; color: var(--text-main); margin-bottom: 15px; font-size: 1.1rem; border-bottom: 1px solid var(--card-border); padding-bottom: 5px; }

  /* --- MODAL (Αναδυόμενο Παράθυρο) --- */
  .lib-modal {
    position: fixed; inset: 0; z-index: 999999; display: flex; align-items: center; justify-content: center;
    visibility: hidden; opacity: 0; transition: opacity 0.3s, visibility 0.3s;
    --modal-overlay: rgba(15, 23, 42, 0.7); --modal-bg: #ffffff;
    --text-main: #1e293b; --text-muted: #64748b; --card-border: #f1f5f9; --accent: #3b82f6;
    --btn-bg: #f1f5f9; --btn-hover: #e2e8f0; /* <-- ΠΡΟΣΤΕΘΗΚΑΝ ΓΙΑ ΝΑ ΠΑΙΖΟΥΝ ΤΑ ΚΟΥΜΠΙΑ */
  }
  .lib-modal.dark-mode {
    --modal-overlay: rgba(0, 0, 0, 0.85); --modal-bg: #1e293b;
    --text-main: #f8fafc; --text-muted: #94a3b8; --card-border: #334155;
    --btn-bg: #334155; --btn-hover: #475569;
  }
  .lib-modal.show { visibility: visible; opacity: 1; }
  .lib-modal-overlay { position: absolute; inset: 0; background: var(--modal-overlay); backdrop-filter: blur(4px); }
  
  .lib-modal-content {
    background: var(--modal-bg); border-radius: 16px; padding: 25px; max-width: 480px; width: 90%;
    position: relative; display: flex; gap: 20px; align-items: center;
    box-shadow: 0 20px 40px rgba(0,0,0,0.3); transform: translateY(20px); transition: 0.3s;
    border: 1px solid var(--card-border);
    z-index: 10; /* Αυτό εξασφαλίζει ότι το λευκό κουτί θα είναι ΠΑΝΤΑ μπροστά από το μαύρο φόντο */
  }
 
  
  @media (max-width: 480px) { .lib-modal-content { flex-direction: column; text-align: center; } }
  .lib-modal.show .lib-modal-content { transform: translateY(0); }

  .lib-close-btn { position: absolute; top: 10px; right: 15px; font-size: 1.8rem; font-weight: bold; color: var(--text-muted); cursor: pointer; line-height: 1; border: none; background: transparent; padding:0;}
  .lib-close-btn:hover { color: #ef4444; }

  .lib-modal-img { width: 130px; border-radius: 8px; box-shadow: 0 4px 15px rgba(0,0,0,0.15); object-fit: cover;}
  .lib-modal-info { flex: 1; display: flex; flex-direction: column; gap: 10px;}
  .lib-modal-title { font-size: 1.15rem; color: var(--text-main); margin: 0; line-height: 1.3; font-weight: 700; }
  .lib-modal-desc { font-size: 0.9rem; color: var(--text-muted); margin: 0 0 10px 0; line-height: 1.4; }
  
  .lib-modal-buttons { display: flex; gap: 10px; flex-wrap: wrap; }
  @media (max-width: 480px) { .lib-modal-buttons { justify-content: center; } }
  
  .lib-modal-read-btn {
    background: var(--accent); color: white; padding: 10px 15px; border-radius: 8px; 
    text-decoration: none; font-weight: bold; transition: 0.2s; font-size: 0.9rem; text-align: center; flex: 1; min-width: 130px;
  }
  .lib-modal-read-btn:hover { background: #2563eb; transform: translateY(-2px); box-shadow: 0 4px 12px rgba(59, 130, 246, 0.4); }
  .share-btn { border-radius: 8px; flex: 1; min-width: 130px;}
  
  /* --- TOAST & BACK-TO-TOP --- */
  .lib-toast {
    position: fixed; bottom: 30px; left: 50%; transform: translateX(-50%) translateY(100px);
    background: var(--text-main); color: var(--card-bg); padding: 12px 25px; border-radius: 30px;
    font-size: 0.95rem; font-weight: 600; box-shadow: 0 5px 20px rgba(0,0,0,0.3);
    z-index: 9999999; /* <--- ΑΛΛΑΞΕ ΑΥΤΟ, ΕΒΑΛΑ 9999999 ΓΙΑ ΝΑ ΒΓΑΙΝΕΙ ΠΑΝΤΑ ΜΠΡΟΣΤΑ */
    opacity: 0; transition: all 0.4s cubic-bezier(0.68, -0.55, 0.27, 1.55); pointer-events: none;
  }
  .lib-toast.show { transform: translateX(-50%) translateY(0); opacity: 1; }

  .lib-back-to-top {
    position: fixed; bottom: 25px; right: 25px; background: var(--accent); color: white; border: none;
    width: 45px; height: 45px; border-radius: 50%; font-size: 1.2rem; cursor: pointer;
    box-shadow: 0 4px 15px rgba(0,0,0,0.3); z-index: 99000; opacity: 0; visibility: hidden; 
    transform: translateY(20px); transition: 0.3s ease; display: flex; align-items: center; justify-content: center;
  }
  .lib-back-to-top.show { opacity: 1; visibility: visible; transform: translateY(0); }
  .lib-back-to-top:hover { background: #2563eb; transform: translateY(-4px) scale(1.05); }
/* Κουμπί διαγραφής ΕΝΟΣ βιβλίου από το ιστορικό */
  .lib-history-remove {
    position: absolute; top: 8px; left: 8px; background: rgba(0, 0, 0, 0.5);
    color: white; border: none; border-radius: 50%; width: 26px; height: 26px;
    display: flex; align-items: center; justify-content: center; padding: 0;
    font-size: 0.8rem; cursor: pointer; z-index: 11; transition: 0.2s;
  }
  .lib-history-remove:hover { background: #ef4444; transform: scale(1.15); }
/* Κουμπί & Στυλ για το "Διαβάστηκε" */
  .lib-read-icon {
    position: absolute; top: 8px; left: 8px; background: rgba(255,255,255,0.95);
    border-radius: 50%; width: 30px; height: 30px; display: flex; align-items: center; justify-content: center;
    font-size: 1rem; cursor: pointer; z-index: 10; border: none; box-shadow: 0 2px 5px rgba(0,0,0,0.2);
    transition: transform 0.2s; color: #cbd5e1; padding:0; line-height:1;
  }
  .lib-read-icon:hover { transform: scale(1.15); background: white; }
  .lib-read-icon.is-read { color: #10b981; } /* Πράσινο χρώμα */

  /* Πράσινη Κορνίζα στο εξώφυλλο */
  .lib-book-card.is-read-card { border: 2px solid #10b981; box-shadow: 0 4px 15px rgba(16, 185, 129, 0.2); }
  .lib-btn.active-read { background: #10b981; color: white; border-color: #10b981; }
/* --- ΣΤΟΧΕΥΣΗ TABLET ΜΕ ΑΦΗ (900px - 1500px) | ΑΥΞΗΣΗ FONT ΚΑΤΑ 20% --- */
@media (min-width: 900px) and (max-width: 1500px) and (pointer: coarse) {
  .lib-title { font-size: 1.56rem; }         /* Από 1.3rem */
  .lib-count-badge { font-size: 1.02rem; }   /* Από 0.85rem */
  .lib-btn { font-size: 1.14rem; }           /* Από 0.95rem */
  .lib-search-box input { font-size: 1.14rem; } /* Από 0.95rem */
  .lib-section-title { font-size: 1.14rem; } /* Από 0.95rem */
  .lib-read-btn-hover { font-size: 0.96rem; }/* Από 0.8rem */
  .lib-fav-icon { font-size: 1.32rem; }      /* Από 1.1rem */
  .lib-book-title { font-size: 1.02rem; }    /* Από 0.85rem */
  .no-results-msg { font-size: 1.26rem; }    /* Από 1.05rem */
  .suggestions-title { font-size: 1.32rem; } /* Από 1.1rem */
  .lib-close-btn { font-size: 2.16rem; }     /* Από 1.8rem */
  .lib-modal-title { font-size: 1.38rem; }   /* Από 1.15rem */
  .lib-modal-desc { font-size: 1.08rem; }    /* Από 0.9rem */
  .lib-modal-read-btn { font-size: 1.08rem; }/* Από 0.9rem */
  .lib-toast { font-size: 1.14rem; }         /* Από 0.95rem */
  .lib-back-to-top { font-size: 1.44rem; }   /* Από 1.2rem */
  .lib-history-remove { font-size: 0.96rem; }/* Από 0.8rem */
  .lib-read-icon { font-size: 1.2rem; }      /* Από 1rem */
}

/* VIVLIOTHIKI MIKRA WIDGETS */
.v4-theme { background: #f0f3f5; border-radius: 20px; padding: 10px 0px 15px 0px; box-shadow: 0px 0px 20px #cbced1; font-family: sans-serif; box-sizing: border-box; }
.v4-theme .mini-lib-header { text-align: center; margin-bottom: 15px; }
.v4-theme .mini-lib-title { color: #333; font-size: 22px; font-weight: 800; margin: 0; }

.v4-theme .search-container { margin-bottom: 15px; }
.v4-theme .mini-lib-search { width: 90%; padding: 15px 15px; border-radius: 50px; border: none; background: #f0f3f5; box-shadow: inset 6px 6px 10px 0 #cbced1, inset -6px -6px 10px 0 #ffffff; box-sizing: border-box; font-size: 15px; color: #333; outline: none; transition: 0.3s ease; margin: 0 auto; 
  display: block; }
.v4-theme .mini-lib-search:focus { box-shadow: inset 2px 2px 5px #cbced1, inset -2px -2px 5px #ffffff, 0 0 0 3px rgba(74, 144, 226, 0.3); background: #fafafa; }

/* Κοινές Ρυθμίσεις για Κάρτα */
.v4-theme .mini-book-card { 
    background: #f0f3f5; 
    border-radius: 15px; 
    padding: 15px; 
    text-decoration: none; 
    display: flex; 
    flex-direction: column; 
    align-items: center; 
    justify-content: flex-start;
    box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.15);
    transition: 0.3s ease; 
    box-sizing: border-box; 
}
.v4-theme .mini-book-card:hover { transform: translateY(-3px); box-shadow: 0px 0px 25px rgba(0, 0, 0, 0.25); }

/* ===================================================================== */
/* Ο "ΜΑΓΙΚΟΣ ΚΑΝΟΝΑΣ" ΓΙΑ ΤΙΣ ΕΙΚΟΝΕΣ:                              */
/* 1. Οριζόντιες εικόνες -> Δεν έχουν καθόλου κενά (height: auto)     */
/* 2. Κάθετες εικόνες -> Κόβονται στο max-height για να φαίνονται πιο πλατιές */
/* ===================================================================== */
.v4-theme .mini-cover-wrap { 
    width: 100%; 
    height: 250px; 
    flex: 0 0 250px; /* ΚΛΕΙΔΩΜΑ 1: Λέει στο σύστημα "Μην τολμήσεις να αλλάξεις αυτό το ύψος" */
    overflow: hidden; /* Η ΑΣΠΙΔΑ (ΚΛΕΙΔΩΜΑ 2): Αν η εικόνα προσπαθήσει να ξεχειλίσει, την κόβει στο όριο. Δεν θα ακουμπήσει ποτέ τον τίτλο! */
    margin-bottom: 15px; 
    display: flex; 
    justify-content: center;
    align-items: center;
}
.v4-theme .mini-cover { 
    width: 100%; 
    height: 100%; 
    object-fit: fill; 
    border-radius: 6px; 
    display: block; /* ΚΛΕΙΔΩΜΑ 3: Αφαιρεί ένα αόρατο κενό που βάζουν οι browsers κάτω από τις εικόνες */
}

/* Τίτλος - Προστασία σπασίματος */
.v4-theme .mini-book-title { 
    color: #555; 
    font-size: 14px; 
    font-weight: 700; 
    text-align: center; 
    margin: 0; 
    line-height: 1.3;
    width: 100%;
    word-wrap: break-word; 
    overflow-wrap: break-word;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Scroll Area Κοινά */
.v4-theme .mini-lib-scroll-area { padding: 15px; margin-bottom: 20px; scroll-behavior: smooth; }
.v4-theme .mini-lib-scroll-area::-webkit-scrollbar { width: 5px; height: 5px; }
.v4-theme .mini-lib-scroll-area::-webkit-scrollbar-thumb { background: #bcc2c6; border-radius: 10px; }

/* ===================================================================== */
/* PC (ΥΠΟΛΟΓΙΣΤΗΣ): 1 Βιβλίο Αυστηρά, Αόρατο το 2ο + Μαγνητικό Scroll */
/* ===================================================================== */
#sidebar-lib-pc .mini-lib-scroll-area { 
    height: 340px; /* Σταθερό ύψος ορατής περιοχής */
    overflow-y: auto; 
    overflow-x: hidden; 
    scroll-snap-type: y mandatory; /* Μαγνητίζει την κίνηση ανά 1 βιβλίο */
}
#sidebar-lib-pc .mini-lib-grid { 
    display: flex; 
    flex-direction: column; 
    gap: 50px; /* Τεράστιο κενό που εγγυάται ότι το 2ο βιβλίο ΔΕΝ φαίνεται! */
    padding-bottom: 30px;
}
#sidebar-lib-pc .mini-book-card {
    scroll-snap-align: start; /* Το scroll σταματάει ακριβώς στην αρχή της κάρτας */
}

/* ===================================================================== */
/* KINHTO (MOBILE): Οριζόντιο Scroll, Μεγάλο Εξώφυλλο + Μαγνητικό Swipe */
/* ===================================================================== */
#sidebar-lib-mobile .mini-lib-scroll-area { 
    display: flex; 
    align-items: center; 
    overflow-x: auto; 
    overflow-y: hidden; 
    -webkit-overflow-scrolling: touch; 
    scroll-snap-type: x mandatory; 
}
#sidebar-lib-mobile .mini-lib-grid { 
    display: flex; 
    flex-direction: row; 
    gap: 20px; 
    padding: 10px 5px;
}
#sidebar-lib-mobile .mini-book-card { 
    width: 220px; /* Τεράστιο εξώφυλλο στο κινητό όπως το ζήτησες */
    flex: 0 0 auto; 
    scroll-snap-align: center; /* Κεντράρει τέλεια το βιβλίο στην οθόνη του κινητού */
}

/* Κουμπί & Loader */
.v4-theme .mini-lib-btn-bottom { display: block; text-align: center; background: #f0f3f5; color: #4a90e2; box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.15); padding: 10px; border-radius: 50px; text-decoration: none; font-weight: bold; font-size: 20px; transition: 0.2s; width: 90%; 
  margin: 0 auto; }
.v4-theme .mini-lib-btn-bottom:hover { box-shadow: inset 4px 4px 8px #cbced1, inset -4px -4px 8px #ffffff; }

.v4-theme .mini-lib-loader { display: none; justify-content: center; padding: 10px; width: 100%; }
#sidebar-lib-mobile .mini-lib-loader { width: auto; padding-left: 15px; align-self: center; } 
.v4-theme .mini-spinner { width: 24px; height: 24px; border: 3px solid #f0f3f5; border-top: 3px solid #4a90e2; border-radius: 50%; animation: v4spin 1s linear infinite; }
@keyframes v4spin { to { transform: rotate(360deg); } }
.v4-theme .mini-lib-empty { width: 100%; text-align: center; font-weight: bold; color: #777; padding: 20px 0; }


@media (min-width: 900px) and (max-width: 1500px) and (pointer: coarse) {
    .v4-theme .mini-lib-title { 
        font-size: 26.4px; 
    }
    .v4-theme .mini-lib-search { 
        font-size: 18px; 
    }
    .v4-theme .mini-book-title { 
        font-size: 16.8px; 
    }
    .v4-theme .mini-lib-btn-bottom { 
        font-size: 21px; 
    }
}
/* SEARCH BLOG ΚΑΙ WIKIPEDIA*/
 .wiki-search-input {
    font-size: 14px !important; /* Μικραίνει το κείμενο που γράφει ο χρήστης */
  }
  .wiki-search-input::placeholder {
    font-size: 13px !important; /* Μικραίνει το "Αναζήτηση στο blog..." */
  }
  .wiki-search-btn {
    font-size: 13px !important; /* Μικραίνουν τα γράμματα του κουμπιού */
    padding: 6px 12px !important; /* Μικραίνει το γύρω-γύρω μέγεθος του κουμπιού */
  }

 /* FONI */
/* Το στυλ που αντιγράφει το #smart-hub */
.callout-action {
  font-family: &#39;Inter&#39;, Arial, sans-serif;
  
  background: linear-gradient(135deg, rgba(255,255,255,0.4) 0%, rgba(255,255,255,0.1) 100%);
  backdrop-filter: blur(25px) saturate(180%);
  -webkit-backdrop-filter: blur(25px) saturate(180%);
  
  border: 1px solid rgba(255, 255, 255, 0.5);
  border-top: 1px solid rgba(255, 255, 255, 0.9);
  border-left: 1px solid rgba(255, 255, 255, 0.8);
  border-radius: 32px;
  
  box-shadow: 0 25px 60px rgba(0, 0, 0, 0.2), inset 0 0 0 1px rgba(255,255,255,0.2);
  transition: box-shadow 0.3s ease, border-color 0.3s ease;
  
  padding: 15px;
  margin-top: 0px;
  margin-bottom: 0px;
  
  /* ΝΕΕΣ ΠΡΟΣΘΗΚΕΣ */
  max-width: 450px; 
  margin-left: auto; 
  margin-right: auto;
  -webkit-tap-highlight-color: transparent;
  
  position: relative;
  overflow: hidden;
  box-sizing: border-box;
  display: block; 
  
  text-decoration: none;
  text-align: center;
  outline: none; 
}

/* Εφέ Hover/Active για το box: ΑΦΑΙΡΕΣΗ ΚΟΚΚΙΝΟΥ ΠΕΡΙΓΡΑΜΜΑΤΟΣ */
.callout-action:hover, .callout-action:focus, .callout-action:active {
  box-shadow: 0 30px 70px rgba(0, 0, 0, 0.25), inset 0 0 0 1px rgba(255,255,255,0.3);
  border-color: rgba(255, 255, 255, 0.6); /* Απαλό λευκό hover border αντί για κόκκινο */
}

/* Το εφέ &quot;Χρωματιστής Αύρας&quot; */
.callout-action::before {
  content: &quot;&quot;;
  position: absolute;
  top: -50px;
  right: -20px;
  width: 180px;
  height: 180px;
  /* Εδώ άλλαξα το χρώμα της αύρας (από κόκκινο) στο μπλε (#1e6cff) που χρησιμοποιείς */
  background: radial-gradient(circle, rgba(30, 108, 255, 0.15) 0%, transparent 70%); 
  filter: blur(30px);
  z-index: -1;
  pointer-events: none;
}

/* Στυλ για τα εσωτερικά στοιχεία */
.callout-action .callout-title {
  /* Μοιάζει λίγο με το .hub-divider */
  font-size: 24px;
  font-weight: 900;
  text-shadow: 0 1px 2px rgba(255,255,255,0.9);
  color: #1a1a1a; /* Ή #1e6cff όπως το είχες */
  transition: color 0.3s ease;
}

.callout-action:hover .callout-title {
    color: #1e6cff; /* Αλλαγή χρώματος τίτλου στο hover */
}

/* Το κουμπί/στοιχείο στο κάτω μέρος */
.callout-action .callout-button {
  display: inline-block;
  color: white;
  padding: 10px 20px;
  border-radius: 20px;
  font-weight: bold;
  text-decoration: none;
  margin-top: 10px;
  background: #1e6cff;
  
  /* ΠΕΡΙΣΣΟΤΕΡΗ ΣΚΙΑ στο ΚΟΥΜΠΙ */
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
  transition: box-shadow 0.3s ease, transform 0.2s ease;
}

/* Εφέ Hover για το κουμπί */
.callout-action .callout-button:hover {
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
  transform: translateY(-2px); /* Μικρή ανύψωση */
}

/* Animation για το emoji */
@keyframes bounce {
    0%, 20%, 50%, 80%, 100% {transform: translateY(0);}
    40% {transform: translateY(-15px);}
    60% {transform: translateY(-7px);}
}
/* --- Στόχευση μόνο για κινητά (οθόνες κάτω από 768px) --- */
@media (max-width: 768px) {
  .callout-action .callout-button {
    font-size: 90%;       
    padding: 8px 16px;   
  }
}
/* TIDIO*/


/* --- ΒΑΣΙΚΟ TRANSITION (Ομαλή κίνηση) --- */
  html body div#tidio-chat,
  html body iframe#tidio-chat-iframe,
  html body iframe[title="Tidio Chat"],
  #tidio-chat,
  #tidio-chat-iframe {
    transition: transform 0.6s ease-in-out, opacity 0.6s ease-in-out !important;
    z-index: 10 !important;
  }

  /* --- ΡΥΘΜΙΣΕΙΣ ΓΙΑ ΚΙΝΗΤΑ --- */
  @media (max-width: 768px) {
    #tidio-chat-iframe,
    iframe[title="Tidio Chat"],
    #tidio-chat {
      bottom: 0px !important;
      top: auto !important;
      right: 0px !important; 
      transform: translateY(0) scale(0.89) !important; 
      transform-origin: bottom right !important;
    }
  }

  /* --- ΡΥΘΜΙΣΕΙΣ ΓΙΑ ΤΑΜΠΛΕΤ --- */
  @media (min-width: 769px) and (max-width: 1200px) {
    #tidio-chat-iframe,
    iframe[title="Tidio Chat"],
    #tidio-chat {
      bottom: 75px !important;
      top: auto !important;
      right: 0px !important; 
    }
  }

  /* --- ΡΥΘΜΙΣΕΙΣ ΓΙΑ ΜΕΓΑΛΕΣ ΟΘΟΝΕΣ --- */
  @media (min-width: 1201px) and (max-width: 1524px) {
    #tidio-chat-iframe,
    iframe[title="Tidio Chat"],
    #tidio-chat {
      bottom: -35px !important;
      top: auto !important;
      right: 0px !important; 
    }
  }

  /* --- ΤΟ SLEEP ΣΤΟ ΤΕΛΟΣ (Κρύβεται ΜΟΝΟ στα κινητά) --- */
 @media (pointer: coarse) and (max-width: 1500px) {
    html body #tidio-chat-iframe.tidio-sleep,
    html body iframe[title="Tidio Chat"].tidio-sleep,
    html body #tidio-chat.tidio-sleep {
      opacity: 0 !important;
      transform: translateY(150px) scale(0.89) !important; 
      pointer-events: none !important;
    }
  }
  /* INTRO INTRO INTRO */
 body.is-in-intro { overflow: hidden !important; height: 100vh !important; }

  #epic-intro-overlay {
    position: fixed !important; top: 0 !important; left: 0 !important; right: 0 !important; bottom: 0 !important;
    width: 100vw !important; height: 100vh !important; background-color: #000 !important;
    z-index: 2147483647 !important; font-family: 'Inter', sans-serif !important; overflow: hidden !important;
    margin: 0 !important; padding: 0 !important;
  }

  /* GPU Hardware Acceleration */
  #intro-magic-canvas-container, #intro-clouds-layer, .intro-particles, #intro-lens-flare {
    will-change: transform;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    transform: translateZ(0); /* Εξαναγκασμός χρήσης 3D GPU */
  }

  #intro-magic-canvas-container {
    position: absolute; top: -2.20%; left: -2.80%; width: 105vw; height: 104vh; z-index: 1; 
    /* Η μετάβαση ρυθμίζεται μέσω JS πλέον για 60fps απόδοση */
  }

  #intro-magic-canvas {
    width: 100%; height: 100%;
    background-image: url('https://images.weserv.nl/?url=blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiCydq9SUcuEv0z-75nJkSaONpLTL8y0XHtnoy2ip0-WUAoXT6W3vVEM-GdyjWey6ydbWgRYVYbbGRXvvsBi-G36iZBpaZbcB56UPgeKKZv7mWC0Z6zZbbwiAdqNrCsrMTLz_LTnFXEpbm6Ccb9clPOHbnXz45pKzq6-czvrsDAz43pxGFd8cYk40OlfmM/s842/2026-06-24%2023_42_54-2025-09-25%2018_01_46-World%20of%20Warcraft.png.png&output=jpg');
    background-size: cover; background-position: center; background-repeat: no-repeat;
    animation: introCinematicZoom 15s ease-out forwards;
  }

  /* Λείανση του νερού (Anti-glitch) & GPU rendering του canvas */
  #intro-magic-canvas canvas { image-rendering: auto !important; will-change: contents; }

  @keyframes introCinematicZoom {
    0% { transform: scale(1.3); filter: brightness(0); }
    20% { filter: brightness(1); }
    100% { transform: scale(1); filter: brightness(1); }
  }

  #intro-clouds-layer {
    position: absolute; top: 0; left: 0; width: 200vw; height: 100vh;
    background: transparent url('https://cdn.rawgit.com/danielstuart14/CSS_FOG_ANIMATION/master/fog1.png') repeat-x;
    background-size: cover; opacity: 0.2; z-index: 2;
    animation: introCloudDrift 50s linear infinite; pointer-events: none; mix-blend-mode: screen;
  }
  @keyframes introCloudDrift { 0% { transform: translateX(0); } 100% { transform: translateX(-50vw); } }

  #intro-lens-flare {
    position: absolute; top: -50%; left: -50%; width: 200vw; height: 200vh;
    background: radial-gradient(circle at center, rgba(255,255,255,0.1) 0%, transparent 60%);
    z-index: 3; pointer-events: none; animation: introFlareSweep 10s ease-in-out infinite; mix-blend-mode: overlay;
  }
  @keyframes introFlareSweep { 0% { transform: translate(-30%, -30%); opacity: 0; } 50% { transform: translate(10%, 10%); opacity: 1; } 100% { transform: translate(30%, 30%); opacity: 0; } }

  .intro-particles {
    position: absolute; top: 0; left: 0; width: 100vw; height: 100vh; z-index: 4; pointer-events: none;
    background-image: radial-gradient(rgba(255, 255, 255, 0.4) 1px, transparent 1px); background-size: 100px 100px;
    animation: introParticlesFloat 20s linear infinite; opacity: 0.5;
  }
  .intro-particles:nth-child(2) { background-size: 150px 150px; animation: introParticlesFloat 30s linear infinite reverse; opacity: 0.3; }
  @keyframes introParticlesFloat { 0% { background-position: 0 0; } 100% { background-position: 500px 500px; } }

  #intro-enter-btn-wrapper { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 10; text-align: center; width: 90%; }
  
  .intro-cinematic-title { 
    font-family: 'Cinzel', serif; 
    color: #ffffff !important; 
    font-size: 3.2vw; /* Ελάχιστα πιο μεγάλο */
    font-weight: 800; /* Ακόμα πιο παχύ */
    /* ΕΔΩ ΕΙΝΑΙ Η ΜΑΓΕΙΑ: Διπλή σκληρή σκιά + Βαθύς φωτισμός */
    text-shadow: 
      3px 3px 0px rgba(0,0,0,0.9), 
      -1px -1px 0px rgba(0,0,0,0.5),
      0 10px 30px rgba(0,0,0,0.9); 
    margin-bottom: 40px; 
    letter-spacing: 4px; 
    opacity: 0; 
    animation: introTextBlurIn 1.5s ease-out 0.5s forwards; 
  }
  
  @keyframes introTextBlurIn { 0% { opacity: 0; filter: blur(10px); transform: translateY(-20px); } 100% { opacity: 1; filter: blur(0); transform: translateY(0); } }

  .intro-glass-btn { 
    background: rgba(255, 255, 255, 0.15); 
    backdrop-filter: blur(12px); 
    -webkit-backdrop-filter: blur(12px); 
    border: 1px solid rgba(255, 255, 255, 0.4); 
    border-top: 1px solid rgba(255, 255, 255, 0.8); 
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4), inset 0 0 0 1px rgba(255,255,255,0.2); 
    color: #ffffff !important; 
    padding: 20px 55px; 
    font-size: 24px; 
    font-weight: 800; 
    letter-spacing: 4px; /* Λίγο περισσότερος αέρας στα γράμματα */
    text-transform: uppercase; 
    border-radius: 50px; 
    cursor: pointer; 
    text-decoration: none !important; 
    transition: all 0.4s ease-out; 
    /* Πιο έντονη σκιά στα γράμματα του κουμπιού για να μη χάνονται στο τζάμι */
    text-shadow: 2px 2px 3px rgba(0,0,0,0.9); 
    display: inline-block; 
    opacity: 0; 
    animation: introTextBlurIn 1.5s ease-out 1s forwards, introPulseGlow 3s infinite alternate 2.5s; 
    position: relative; 
    overflow: hidden; 
  }
  
  .intro-glass-btn::after { 
    content: ''; position: absolute; top: -50%; left: -150%; width: 50%; height: 200%; 
    background: linear-gradient(to right, rgba(255,255,255,0) 0%, rgba(255,255,255,0.6) 50%, rgba(255,255,255,0) 100%); 
    transform: rotate(30deg); animation: introBtnSweep 4s infinite; 
  }
  
  .intro-glass-btn:hover, .intro-glass-btn:focus { 
    background: rgba(255, 255, 255, 0.25); 
    transform: scale(1.05) translateY(-3px); 
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.5), 0 0 25px rgba(255,255,255,0.5); 
    color: #ffffff !important; /* <-- ΚΑΙ ΕΔΩ ΓΙΑ ΣΙΓΟΥΡΙΑ */
    border-color: #ffffff; 
    text-shadow: 0 0 10px rgba(255,255,255,0.8); 
    outline: none; 
  }
  
  .intro-btn-subtitle { 
    margin-top: 30px; /* Λίγο περισσότερος χώρος από το κουμπί */
    color: #ffffff !important; 
    font-size: 18px; /* Το μεγαλώσαμε αρκετά για να διαβάζεται */
    font-weight: 700; /* Πιο παχύ */
    font-style: normal; /* Το βγάζουμε από italics για καθαρότητα */
    letter-spacing: 3px; 
    /* ΕΙΔΙΚΗ ΣΚΙΑ: Δημιουργεί ένα καθαρό μαύρο περίγραμμα γύρω από κάθε γράμμα */
    text-shadow: 
      2px 2px 0 #000, 
      -1px -1px 0 #000, 
      1px -1px 0 #000, 
      -1px 1px 0 #000, 
      1px 1px 0 #000, 
      0 10px 20px rgba(0,0,0,1); 
    opacity: 0; 
    animation: introTextBlurIn 1.5s ease-out 1.5s forwards; 
  }
  
  @keyframes introPulseGlow { 0% { box-shadow: 0 15px 35px rgba(0, 0, 0, 0.3), 0 0 0 0 rgba(255, 255, 255, 0.2); } 100% { box-shadow: 0 15px 35px rgba(0, 0, 0, 0.3), 0 0 30px 10px rgba(255, 255, 255, 0.05); } }

  #intro-fade-black { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: #000; z-index: 9999; opacity: 0; pointer-events: none; transition: opacity 1.5s cubic-bezier(0.5, 0, 0.5, 1); }

  /* ΕΙΔΙΚΕΣ ΡΥΘΜΙΣΕΙΣ ΚΙΝΗΤΩΝ */
  @media (max-width: 1500px) and (pointer: coarse) {
    body.is-in-intro {
      position: fixed !important; width: 100vw !important; height: 100vh !important;
      overscroll-behavior: none !important; touch-action: none !important; 
    }
    #intro-magic-canvas {
      background-size: cover !important; background-position: center center !important; background-attachment: scroll !important;
      animation: none !important; /* Anti-crash */
      -webkit-transform: translate3d(0,0,0) !important; transform: translate3d(0,0,0) !important;
    }
    #intro-clouds-layer, #intro-lens-flare { mix-blend-mode: normal !important; opacity: 0.05 !important; }
    .intro-cinematic-title { font-size: 24px !important; }
    .intro-glass-btn { font-size: 18px !important; padding: 16px 40px !important; }
    .intro-btn-subtitle { font-size: 15px !important; }
  }
@media (min-width: 900px) and (max-width: 1500px) and (pointer: coarse) {
.intro-cinematic-title { font-size: 34px !important; }
    .intro-glass-btn { font-size: 28px !important; padding: 16px 40px !important; }
    .intro-btn-subtitle { font-size: 20px !important; }
}

/* FACEBOOK ΣΧΟΛΕΙΟΥ*/
.fb-pill-widget {
  display: flex; align-items: center; justify-content: space-between;
  background: rgba(255, 255, 255, 0.45); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.8); border-radius: 60px;
  padding: 8px 20px 8px 8px; max-width: 408px; margin: 0px auto;
  text-decoration: none; box-shadow: 0 5px 15px rgba(0,0,0,0.05);
  transition: all 0.3s ease; font-family: &#39;Inter&#39;, sans-serif;
}
.fb-pill-widget:hover { 
  background: rgba(255, 255, 255, 0.8); box-shadow: 0 8px 25px rgba(24, 119, 242, 0.15); 
  transform: translateY(-3px); border-color: rgba(24, 119, 242, 0.4); 
}
.fb-pill-icon {
  background: #1877F2; width: 53px; height: 53px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
  box-shadow: 0 4px 10px rgba(24, 119, 242, 0.3); transition: transform 0.3s;
}
.fb-pill-widget:hover .fb-pill-icon { transform: rotate(15deg) scale(1.05); }
.fb-pill-text { display: flex; flex-direction: column; flex-grow: 1; margin-left: 15px; }
.fb-pill-main { color: #111; font-weight: 800; font-size: 18px; }
.fb-pill-sub { color: #1877F2; font-size: 14.4px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px;}
.fb-pill-arrow { color: #1877F2; font-weight: bold; font-size: 21.6px; transition: transform 0.3s; }
.fb-pill-widget:hover .fb-pill-arrow { transform: translateX(5px); }
@media (max-width: 768px) {
  .fb-pill-widget {
    max-width: 490px;
    border-radius: 72px;
  }
  .fb-pill-icon {
    width: 53px;
    height: 53px;
  }
  .fb-pill-main {
    font-size: 21.6px;
  }
  .fb-pill-sub {
    font-size: 17.3px;
  }
  .fb-pill-arrow {
    font-size: 25.9px;
  }
}