#cookie-banner {
position: fixed;
bottom: 0; left: 0; right: 0;
background: #222; color: #fff;
padding: 15px; text-align: center;
font-family: sans-serif; z-index: 10000;
transition: transform 0.3s ease;
}
#cookie-banner.hidden { transform: translateY(120%); }
#cookie-banner button {
margin-left: 10px; padding: 5px 12px; border: none;
border-radius: 4px; cursor: pointer;
}
#cookie-banner button.accept { background: #ffd700; color: #000; }
#cookie-banner button.decline { background: #888; color: #fff; }

body {
    font-family: 'Open Sans', sans-serif; /* Για όλα τα απλά κείμενα */
}

/* Ειδικός κανόνας για τους τίτλους (h1, h2, h3) και το μενού */
h1, h2, h3, .navbar a, .price {
    font-family: 'Montserrat', sans-serif;
    font-weight: 700; /* Bold για να ξεχωρίζουν */
}

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

body, html {
width: 100%;
height: 100%;
}

html {
font-size: 16px;
}

h1 {
padding-bottom: 20px;
font-weight: normal;
}

.slider {
width: 100%;
height: 80vh;
overflow: hidden;
position: relative;
}

.slides {
display: flex;
height: 100%;
transition: transform 0.6s ease-in-out;
}

.slides img {
width: 100%;
height: 100%;
object-fit: cover;
flex-shrink: 0;
}

header {
position: absolute;
top: 0;
left: 0;
width: 100%;
padding: 10px 20px;
background: transparent;
display: none;
justify-content: space-between;
z-index: 1000;
}

.logo img {
height: 3rem; /* adjust size */
display: block;
}

/* Navbar container */
.navbar {
position: absolute;
top: 0;
left: 200px;           /* ξεκινάει 200px από αριστερά */
width: calc(100% - 400px); /* αφήνει 200px και δεξιά */
display: flex;
justify-content: space-between;
align-items: center;
background: transparent;
padding: 15px 30px;
z-index: 1000;
border-bottom: 2px solid white;  /* λευκή γραμμή */
}

.navbar ul {
list-style: none;
display: flex;    /* τα βάζει οριζόντια */
justify-content: space-evenly;      /* ίσες αποστάσεις */
width: 100%;
margin: 0;
padding: 0;
}

.navbar ul li {
text-align: center;            /* κέντρο το κείμενο */
}

/* Menu links */
.navbar ul li a {
text-decoration: none;
color: white;           /* white text */
font-weight: bold;
transition: color 0.3s;
display: block;                /* κάνει το link να πιάνει όλο το li */
padding: 10px 0;
}

.navbar ul li a:hover {
color: #f5deb3;         /* beige hover effect */
}

/* Social icons */
.social-icons {
display: flex;       /* βάζει τα icons δίπλα δίπλα */
align-items: center; /* κέντρο κατακόρυφα */
gap: 0px;           /* απόσταση ανάμεσα τους */
}

.social-icons a {
display: flex;
align-items: center;
justify-content: center; /* optional, centers horizontally too */
margin-left: 15px;
color: white;
text-decoration: none;
font-size: 20px;
transition: color 0.3s;
}

.social-icons a img {
width: 20px;  /* same as font-size of icons */
height: 20px;
vertical-align: middle;
}

.social-icons a:hover {
color: #f5deb3;         /* beige hover */
}

.lang-btn {
    position: absolute;
    top: 25px;
    right: 34px;
    z-index: 1000;
    cursor: pointer;
}

.lang-btn img {
    width: 32px;
    height: 32px;
    filter: invert(1);
}

.lang-dropdown {
    display: none; /* hidden by default */
    position: absolute;
    top: 54px; /* below the button */
    right: 10px;
    border-radius: 4px;
    font-size: 14px;
    background-color: white;
    min-width: 100px;
    border: 1px solid #ccc;
    z-index: 1000;
    box-shadow: 0 2px 6px rgba(0,0,0,0.2);
}

.lang-dropdown a {
    display: block;
    padding: 8px 12px;
    text-decoration: none;
    color: black;
}

.lang-dropdown a:hover,
.lang-dropdown a.selected {
    color: #007BFF;
}


.counter {
position: absolute;
bottom: 15px;
right: 20px;
background: rgba(0,0,0,0.6);
color: #fff;
padding: 5px 10px;
border-radius: 12px;
font-size: 14px;
}

.carousel-title {
position: absolute;
top: 35%;
left: 50%;              /* στη μέση οριζόντια */
transform: translate(-50%, -50%); 
width: 90%;
text-align: center;
font-size: 64px;        /* μέγεθος */
font-family: 'Dancing Script', cursive; /* καλλιγραφικό στυλ */
color: #d4af37;         /* χρυσό */
text-shadow: 2px 2px 6px rgba(0,0,0,0.6); /* σκιά για να φαίνεται καθαρά */
z-index: 20;            /* πάνω από τις εικόνες */
}

.carousel-subtitle {
position: absolute;
top: 65%;
left: 50%;
transform: translate(-50%, -50%); 
font-size: 32px;        /* μέγεθος */
text-align: center;
font-family: 'Neucha', cursive, sans-serif; /* καλλιγραφικό στυλ */
color: #d4af37;         /* χρυσό */
text-shadow: 2px 2px 6px rgba(0,0,0,0.6); /* σκιά για να φαίνεται καθαρά */
z-index: 20;
}

/* Container για τις κουκίδες */
.dots-container {
  position: absolute;
  bottom: 25px; /* Απόσταση από το κάτω μέρος του slider */
  left: 50%;
  transform: translateX(-50%); /* Τέλειο κεντράρισμα */
  display: flex;
  gap: 12px; /* Απόσταση μεταξύ των κουκίδων */
  z-index: 15;
}

/* Βασικό στυλ κουκίδας */
.dot {
  width: 12px;
  height: 12px;
  background-color: rgba(255, 255, 255, 0.4); /* Ημιδιαφανές λευκό */
  border: 2px solid rgba(0, 0, 0, 0.2); /* Λεπτό περίγραμμα για να φαίνεται σε λευκές εικόνες */
  border-radius: 50%;
  cursor: pointer;
  transition: all 0.3s ease; /* Ομαλή αλλαγή χρώματος και μεγέθους */
}

/* Στυλ για την ενεργή κουκίδα */
.dot.active {
  background-color: #ffffff; /* Καθαρό λευκό */
  transform: scale(1.3); /* Μεγαλώνει ελαφρώς */
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.3); /* Λάμψη/σκιά για έμφαση */
  border-color: #ffffff;
}

/* Εφέ όταν περνάει το ποντίκι (Hover) */
.dot:hover {
  background-color: rgba(255, 255, 255, 0.8);
}

.prev, .next {
position: absolute;
top: 50%;
transform: translateY(-50%);
background: transparent;
border: none;
color: white;
font-size: 22px;
cursor: pointer;
padding: 10px;
border-radius: 50%;
z-index: 10;
}

.prev { left: 15px; }
.next { right: 15px; }

.prev:hover, .next:hover {
background: transparent;
}

/* Menu Section */

.menu-container {
display: flex;
justify-content: center; /* κεντράρει τις κάρτες οριζόντια */
gap: 20px;               /* απόσταση ανάμεσα στις κάρτες */
}

.first-menu-card {
background-color: #f5deb3;        /* λευκό φόντο */
border: 2px solid #d2b48c;     /* καφέ περίγραμμα σαν χαρτί */
border-radius: 12px;           /* στρογγυλεμένες γωνίες */
box-shadow: 0 4px 8px rgba(0,0,0,0.2); /* απαλή σκιά */
padding: 20px;
width: 320px;                  /* σταθερό πλάτος */
margin: 10px;
text-align: center;
font-size: 30px;
font-family: 'Playfair Display', serif;
color: #8B4513;
transition: transform 0.3s, box-shadow 0.3s;
}

.first-menu-card:hover {
transform: translateY(-5px);   /* μικρή ανύψωση όταν hover */
box-shadow: 0 8px 16px rgba(0,0,0,0.3);
}

.cafe-name {
font-family: 'Dancing Script', cursive;
font-size: 28px;                        /* μέγεθος κειμένου */
text-align: center;                     /* κεντράρισμα */
margin: 20px 0;                         /* πάνω-κάτω περιθώριο */
color: #8B4513;                         /* χρώμα κειμένου */
font-weight: normal;                     /* αφαιρεί το bold αν χρειάζεται */
}

.menu-card {
background-color: #f5deb3;        /* λευκό φόντο */
border: 2px solid #d2b48c;     /* καφέ περίγραμμα σαν χαρτί */
border-radius: 12px;           /* στρογγυλεμένες γωνίες */
box-shadow: 0 4px 8px rgba(0,0,0,0.2); /* απαλή σκιά */
padding: 20px;
width: 320px;                  /* σταθερό πλάτος */
margin: 10px;
text-align: left;
font-family: 'Noto Serif', serif;
transition: transform 0.3s, box-shadow 0.3s;
}

.menu-card:hover {
transform: translateY(-5px);   /* μικρή ανύψωση όταν hover */
box-shadow: 0 8px 16px rgba(0,0,0,0.3);
}

.menu-card h3 {
font-size: 22px;
color: #8B4513;                /* σκούρο καφέ */
margin-bottom: 12px;
border-bottom: 1px solid #d2b48c; /* λεπτή γραμμή κάτω από τον τίτλο */
padding-bottom: 5px;
text-align: center;
font-weight: normal;
}

.menu-card ul {
    list-style: none;
    padding: 0;
}

.menu-card li {
    font-size: 18px;
    margin-bottom: 6px;
}

.menu-list li {
  display: flex; /* Ενεργοποιεί το Flexbox */
  justify-content: space-between; /* Σπρώχνει το όνομα αριστερά και την τιμή δεξιά */
  align-items: center;
  /* border-bottom: 1px dotted #ccc; Προαιρετικό: μια διακεκομμένη γραμμή ανάμεσα */
  /* padding: 8px 0; */
}

.price {
  font-weight: normal;
  margin-left: 10px; /* Απόσταση από το κείμενο αν η οθόνη είναι πολύ μικρή */
}

.menu-wrapper {
padding: 100px 0;
position: relative;
}

#menu-counter{
display: none;
}

.business-hours {
text-align: center;
padding: 100px 15px;
background-image: url("../images/coffee-beans.jpg"); /* η εικόνα σου */
background-repeat: no-repeat;   /* να μην επαναλαμβάνεται */
background-position: center;    /* κεντραρισμένη */
background-size: cover;
color: white;
}

.business-hours p {
padding: 3px 0;
font-size: 20px;
}

.online-order {
text-align: center;
padding: 100px 500px;
}

.online-order p {
padding: 10px 0;
font-size: 20px;
}

.info {
text-align: center;
padding: 100px 15px;
background-image: url("../images/coffee-beans.jpg"); /* η εικόνα σου */
background-repeat: no-repeat;   /* να μην επαναλαμβάνεται */
background-position: center;    /* κεντραρισμένη */
background-size: cover;
color: white;
}

.info p {
padding: 3px 0;
font-size: 20px;
}

#contact i,
#contact a {
color: white;
}

.about-us {
text-align: center;
padding: 100px 400px;
}

.about-us p {
padding: 3px 0;
font-size: 20px;
}

.full-width-image {
width: 100%;      /* γεμίζει όλο το πλάτος του container */
height: auto;     /* κρατάει τις αναλογίες */
display: block;   /* αφαιρεί τα περιθώρια κάτω από την εικόνα */
}


.hamburger {
position: absolute;
top: 25px;
left: 30px;
font-size: 1.8rem;
cursor: pointer;
z-index: 1001;
display: none;
color: white;
}

.ham-logo img {
position: absolute;
top: 16px;
left: 50%;
transform: translateX(-50%);
height: 4rem; /* adjust size */
z-index: 1000;
display: none;
}

/* Menu styling */
.ham-menu {
position: fixed;
top: 0;
left: 0;
height: 100%;
width: 100%; 
background-color: white;
color: black;
padding: 2rem;
padding-top: 5rem; /* για να μην καλύπτει το close button */
box-shadow: -2px 0 5px rgba(0,0,0,0.5);
transform: translateX(-100%);
transition: transform 0.3s ease;
z-index: 1001;
display: none;
}

.ham-menu.active {
transform: translateX(0);
}

/* Close button */
.close-btn {
position: absolute;
top: 2rem;
right: 2rem;
font-size: 2rem;
cursor: pointer;
user-select: none;
}

/* Links */
.ham-menu a {
display: block;
text-decoration: none;
text-align: center;
margin: 1.5rem 0;
font-size: 1.2rem;
color: black;
}


/* -------------------------------------- προσαρμογή για κινητά -------------------------------------- */

@media (max-width: 1080px) {

html {
    font-size: 14px;
}

.hamburger,
.overlay,
.ham-logo img,
.ham-menu {
    display: block;
}

* {
    -webkit-tap-highlight-color: transparent;
    outline: none;
}

*:focus {
    outline: none;
}

/* Όταν το body έχει αυτή την κλάση, απαγορεύεται το scroll */
body.no-scroll {
    overflow: hidden;
}

.navbar {
    display: none;  /* εξαφανίζει εντελώς το navbar */
}
header {
    display: flex;
}

.lang-btn {
    top: 31px;
    right: 36px;
}

.lang-btn img {
    width: 30px;
    height: 30px;
}

.lang-dropdown {
    top: 70px; /* κάτω από το κουμπί */
    right: 10px;
}


/* Container για τα social icons μέσα στο Hamburger Menu */
.ham-social {
    position: relative;  /* Το αποσπά από την κανονική ροή */
    top: 16px;        /* Απόσταση από πάνω */
    left: 0;             /* Ξεκινάει από τέρμα αριστερά */
    width: 100%;         /* Πιάνει όλο το πλάτος (για να δουλέψει το κεντράρισμα) */
    
    display: flex;       /* Για να μπουν τα εικονίδια στη σειρά */
    justify-content: center; /* Κεντράρισμα των εικονιδίων */
    align-items: center;
    gap: 25px;
    
    /* Αφαίρεσε τα margins που είχες πριν */
    margin: 0;
    padding: 0;
    border-top: none;    /* Προαιρετικό: αν δεν θες γραμμή από πάνω */
}

/* Ρυθμίσεις για τα links των social */
.ham-social a {
    display: flex !important;      /* Αλλαγή από inline-block σε flex */
    align-items: center;           /* Κεντράρει το περιεχόμενο (εικόνα ή icon) κάθετα */
    justify-content: center;       /* Κεντράρει το περιεχόμενο οριζόντια */
    margin: 0 !important; 
    width: 24px;                   /* Ορίζουμε σταθερό πλάτος στο κουτί του link */
    height: 24px;                  /* Ορίζουμε σταθερό ύψος στο κουτί του link */
    line-height: 0;                /* Μηδενίζουμε το line-height για να μην επηρεάζει τα icons */
}

/* Ρυθμίσεις για τα links των social (για να μην πιάνουν όλο το πλάτος) 
.ham-social a {
    display: inline-block !important; 
    margin: 0 !important;
    width: auto;
} */

.ham-social i {
    font-size: 24px;
}

/* Ρυθμίσεις για τις εικόνες */
.ham-social a img {
    width: 24px; /* Λίγο μεγαλύτερα για κινητό */
    height: 24px;
    filter: invert(1); 
}

/* Επαναφορά του φίλτρου μόνο για την εικόνα με alt="wolt" */
.ham-social a img[alt="wolt"] {
    filter: none;
}


/* Κάνουμε το menu horizontal scroll */
#menu {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    gap: 0;                /* αφαιρούμε το κενό */
    padding: 0;            /* αφαιρούμε margin/padding του container */
    scroll-behavior: smooth;
}

#menu > * {
    scroll-snap-stop: always;    /* σταμάτα πάντα σε αυτό το slide */
}

.menu-card, .first-menu-card {
    flex: 0 0 100%;        /* 100% πλάτος οθόνης */
    scroll-snap-align: start;
    box-sizing: border-box;
    margin: 0;             /* αφαιρούμε margin για να γεμίζει όλη την οθόνη */
    padding: 20px;
}

.first-menu-card:hover, .menu-card:hover {
    transform: none;
    box-shadow: none;
}

.menu-wrapper {
    position: relative;
}

#menu-counter {
    display: block;
    position: absolute;
    bottom: 10px;
    right: 15px;
    background: rgba(0,0,0,0.6);
    color: white;
    padding: 4px 8px;
    border-radius: 8px;
    font-size: 14px;
    font-family: sans-serif;
}

.online-order {
    padding: 100px 15px; /* μικρότερο padding για κινητά */
}

.about-us {
    padding: 100px 15px; /* μικρότερο padding για κινητά */
}
.menu-container {
    justify-content: flex-start;
}
}

.hero {
position: relative;
width: 100%;
height: 40%;
overflow: hidden;
text-align: center;
color: white;
}

.hero-bg {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}

.hero-content {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}

.hero-logo {
height: 7vh;
margin-bottom: 14px;
}

.hero-phone {
display: flex;
align-items: center;
justify-content: center;
font-size: 1rem;
margin-bottom: 5px;
width: 80vw;
}

.phone-icon {
margin-right: 10px;
}

.hero-copyright {
font-size: 1rem;
margin-top: 1rem;
}

html {
scroll-behavior: smooth;
}