/* ===== GENERAL ===== */

body{
font-family:'Inter',sans-serif;
background:#f0f2f5;
margin:0;
color:#333;
}

/* ===== HEADER ===== */

header{
display:flex;
justify-content:space-between;
align-items:center;
padding:15px 25px;
background:white;
box-shadow:0 2px 10px rgba(0,0,0,0.05);
position:sticky;
top:0;
z-index:1000;
}

/* ===== MENU GRID ===== */

main#menu{
display:flex;
flex-wrap:wrap;
justify-content:center;
gap:25px;
padding:40px 20px;
max-width:1200px;
margin:auto;
}

/* ===== PRODUCT CARD ===== */

.item {
  background: white;
  padding: 15px;
  border-radius: 16px;

  box-shadow: 0 8px 20px rgba(0,0,0,0.06);

  width: 240px;
  text-align: center;

  display: flex;
  flex-direction: column;
  gap: 6px;

  transition: all 0.25s ease;
  position: relative;

  border: 1px solid rgba(0,0,0,0.04);
}

.item:hover {
  transform: translateY(-6px);
  box-shadow: 0 18px 35px rgba(0,0,0,0.12);
}
/* ===== IMAGE ===== */

.item img {
  width: 100%;
  height: 150px;
  object-fit: cover;
  border-radius: 12px;
  margin-bottom: 10px;
}

/* ===== TITLE ===== */

.item h3{
margin:0 0 5px;
font-size:1rem;
}

/* ===== PRICE ===== */

.item p{
font-weight:bold;
color:#1a3a5a;
margin-bottom:10px;
}

/* ===== COFFEE OPTIONS ===== */

.coffee-options {
  background: #fafafa;
  padding: 10px;
  border-radius: 10px;
  margin-bottom: 12px;
  border: 1px solid #eee;
}

.option-group{
margin-bottom:8px;
}

.option-group:last-child{
margin-bottom:0;
}

.option-group label{
font-size:10px;
font-weight:bold;
color:#888;
display:block;
margin-bottom:2px;
}

.option-group select{
width:100%;
padding:5px;
border-radius:5px;
border:1px solid #ddd;
font-size:12px;
background:white;
}

/* ===== BUTTON ===== */

.item button {
  width: 100%;
  padding: 11px;
  margin-top: auto;

  background: linear-gradient(135deg, #28a745, #2ecc71);

  color: white;
  border: none;
  border-radius: 10px;

  font-weight: 600;
  cursor: pointer;

  transition: all 0.2s ease;
}
.item button:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 15px rgba(40,167,69,0.3);
}

/* ===== DISABLED PRODUCT ===== */

.disabled{
opacity:0.5;
filter:grayscale(100%);
}

.soldout{
position:absolute;
top:10px;
left:10px;
background:#999;
color:white;
padding:4px 8px;
border-radius:6px;
font-size:11px;
font-weight:bold;
}

/* ===== SIDEBAR ===== */

#sidebar{
position:fixed;
left:-360px;
top:0;
width:360px;
height:100%;
background:rgba(240,242,245,0.95);
backdrop-filter:blur(10px);
z-index:2100;
transition:0.3s ease;
padding:25px;
box-shadow:5px 0 15px rgba(0,0,0,0.1);
box-sizing:border-box;
}

#sidebar.active{
left:0;
}

#sidebarOverlay{
display:none;
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
background:rgba(0,0,0,0.3);
z-index:2050;
}

#sidebarOverlay.active{
display:block;
}

/* ===== CART ===== */

.cart-dropdown {
  display: block;
  position: fixed;
  right: 20px;
  top: 75px;

  background: white;
  padding: 20px;

  border-radius: 16px;
  border: 1px solid rgba(0,0,0,0.05);
  box-shadow: 0 20px 45px rgba(0,0,0,0.15);

  width: 320px;
  max-height: 80vh;

  z-index: 2000;

  opacity: 0;
  transform: translateY(-10px) scale(0.96);
  pointer-events: none;

  transition: all 0.25s cubic-bezier(.2,.8,.2,1);

  display: flex;
  flex-direction: column;
}
#cart {
  max-height: 200px;
  overflow-y: auto;
}
.cart-dropdown.active{
opacity:1;
transform:translateY(0) scale(1);
pointer-events:auto;
}

#cart li {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;

  padding: 12px 0;
  border-bottom: 1px solid #eee;

  font-size: 0.9rem;
  gap: 10px;
}
#cart button {
  padding: 4px 8px;
  border-radius: 6px;
  border: none;
  background: #f0f2f5;
  cursor: pointer;
  font-weight: bold;
}
#total {
  color: #28a745;
  font-weight: 700;
}

/* ===== ADD TO CART BUTTON ANIMATION ===== */

.added-animation {
  animation: addPulse 0.4s ease;
}

@keyframes addPulse {
  0% { transform: scale(1); }
  40% { transform: scale(1.15); }
  100% { transform: scale(1); }
}

/* ===== PICKUP TIME UI ===== */

.pickup-time{
margin:10px 0 15px;
}

.pickup-time label{
font-size:11px;
color:#888;
font-weight:bold;
text-transform:uppercase;
display:block;
margin-bottom:6px;
}

.time-input {
  display: flex;
  align-items: center;
  gap: 10px;

  background: #f8f9fa;
  border: 1px solid #ddd;
  border-radius: 12px;

  padding: 12px;
  transition: 0.2s;
}

.time-input:focus-within {
  border-color: #28a745;
  background: #fff;
  box-shadow: 0 0 0 2px rgba(40,167,69,0.1);
}

.time-input i{
color:#777;
font-size:14px;
}

.time-input input {
  border: none;
  background: transparent;
  outline: none;
  font-size: 15px;
  width: 100%;
  cursor: pointer;
  font-weight: 500;
  letter-spacing: 1px;
}

/* ===== MOBILE ===== */

@media(max-width:600px){

main#menu {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;

  gap: 25px;

  padding: 30px 20px 60px; /* ADD bottom space */

  max-width: 1200px;
  margin: auto;
}

.item{
width:100%;
max-width:320px;
margin:auto;
}

.cart-dropdown{
right:10px;
width:90%;
}

}
/* ORDER SUCCESS POPUP */

.order-success{
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
background:rgba(0,0,0,0.45);
display:flex;
align-items:center;
justify-content:center;
z-index:5000;

opacity:0;
pointer-events:none;

transition:0.25s;
}

.order-success.active{
opacity:1;
pointer-events:auto;
}

.order-box{
background:white;
padding:35px;
border-radius:15px;
text-align:center;
max-width:320px;
box-shadow:0 15px 35px rgba(0,0,0,0.25);

animation:popupScale 0.25s ease;
}

.order-box h2{
margin-top:0;
color:#28a745;
}

.order-box p{
color:#555;
margin-bottom:20px;
}

.order-box button{
padding:10px 25px;
background:#1a3a5a;
color:white;
border:none;
border-radius:8px;
cursor:pointer;
font-weight:600;
}

@keyframes popupScale{

0%{transform:scale(0.8)}
100%{transform:scale(1)}

}
/* HEADER BRAND */



.menu-btn{

font-size:22px;
cursor:pointer;

}

.brand{

display:flex;
align-items:center;
gap:10px;

}

.logo{

width:40px;

}

.brand h1{

margin:0;
font-size:18px;

}

.brand span{

font-size:11px;
color:#888;

}

.header-right{

display:flex;
align-items:center;
gap:20px;

}

.admin-btn{

cursor:pointer;
font-size:20px;

}

.cart-icon{

position:relative;
cursor:pointer;
font-size:20px;

}

#cartCount{

position:absolute;
top:-6px;
right:-10px;

background:#ff4757;
color:white;

font-size:10px;
padding:2px 6px;

border-radius:50%;

font-weight:bold;

}

.menu-title{

text-align:center;
font-size:26px;
margin-top:25px;
margin-bottom:5px;
color:#1a3a5a;

}
/* SMALL DESIGN UPGRADE */

.item{

transition:0.25s;

}



header {
  backdrop-filter: blur(8px);
  background: rgba(255,255,255,0.9);
  box-shadow: 0 3px 10px rgba(0,0,0,0.08);
}

.item{

transition:0.25s;

}


/* PRODUCT POPUP */

.product-modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;

  background: rgba(0,0,0,0.5);

  display: none;
  justify-content: center;
  align-items: center;

  z-index: 4000;
}

.product-modal.active {
  display: flex;
}

.product-modal.active{

opacity:1;
pointer-events:auto;

}

.popup-card{

background:white;

width:380px;
max-width:92%;

padding:20px;

border-radius:15px;

text-align:center;

box-shadow:0 15px 40px rgba(0,0,0,0.25);

}

.popup-card img{

width:100%;
height:200px;
object-fit:cover;

border-radius:10px;

margin-bottom:10px;

}

.popup-price{

font-weight:bold;
color:#1a3a5a;

margin-bottom:10px;

}

.product-description{

font-size:13px;
color:#555;

margin-bottom:10px;

}

.product-contains{

text-align:left;

background:#f8f9fa;

padding:10px;

border-radius:8px;

font-size:12px;

margin-bottom:15px;

}

.product-contains ul{

margin:5px 0 0;
padding-left:18px;

}

.item.disabled {
  opacity: 0.6;
  pointer-events: none;
  filter: grayscale(40%);
}

/* FLOATING BUTTON */
#contactFab {
  position: fixed;
  bottom: 20px;
  right: 20px; /* άλλαξε σε left αν θες */
  width: 55px;
  height: 55px;
  background: #28a745;
  color: white;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  cursor: pointer;
  box-shadow: 0 4px 10px rgba(0,0,0,0.2);
  z-index: 9999;
  transition: 0.3s;
}

#contactFab:hover {
  transform: scale(1.1);
}

/* POPUP BACKDROP */
#contactPopup {
  position: fixed;
  bottom: 90px;
  right: 20px;
  display: none;
  z-index: 9999;
}

/* CLOUD BOX */
.contact-box {
  background: white;
  padding: 15px;
  border-radius: 15px;
  width: 220px;
  box-shadow: 0 5px 20px rgba(0,0,0,0.2);
  animation: popIn 0.5s ease;
}

/* ANIMATION */
@keyframes popIn {
  from {
    transform: scale(0.5);
    opacity: 0;
  }
  to {
    transform: scale(1);
    opacity: 1;
  }
}

.map-link {
  text-decoration: none;
  color: #007bff;
  font-size: 14px;
}

.map-link:hover {
  text-decoration: underline;
}
#contactPopup {
  user-select: none;
}
.contact-item {
  background: #f8f9fa;
  padding: 10px;
  border-radius: 10px;
  margin-bottom: 10px;
}

.label {
  display: block;
  font-size: 12px;
  color: #888;
  margin-bottom: 4px;
}

.value {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  color: #333;
}

.value a {
  text-decoration: none;
  color: #6f42c1;
}

.value a:hover {
  text-decoration: underline;
}

.checkout-fields {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 15px 0;
}

.checkout-fields label {
  font-size: 0.9rem;
  font-weight: 600;
  color: #333;
}

.checkout-fields input {
  padding: 12px;
  border-radius: 10px;
  border: 1px solid #ddd;
  font-size: 14px;
  outline: none;
  transition: 0.2s;
}

.checkout-fields input:focus {
  border-color: #1a3a5a;
  box-shadow: 0 0 0 2px rgba(22, 219, 4, 0.1);
}
#checkoutBox {
  margin: 10px 0;
}

#checkoutBox input {
  width: 93%;
  padding: 10px;
  margin-bottom: 8px;
  border-radius: 8px;
  border: 1px solid #ddd;
  font-size: 14px;
}



#checkoutError {
  display: none;
  background: #ffecec;
  color: #e74c3c;
  padding: 10px;
  border-radius: 8px;
  font-size: 13px;
  margin-top: 5px;
  text-align: center;
}



#sidebar {
  border-right: 1px solid rgba(0,0,0,0.05);
}
#cart-bar {
  position: fixed;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);

  background: #1a3a5a;
  color: white;

  padding: 12px 20px;
  border-radius: 30px;

  display: flex;
  align-items: center;
  gap: 15px;

  box-shadow: 0 10px 25px rgba(0,0,0,0.2);

  z-index: 3000;
}

#cart-bar button {
  background: #2ecc71;
  border: none;
  color: white;
  padding: 6px 14px;
  border-radius: 20px;
  cursor: pointer;
  transform: scale(1.05);
}
.item h3 {
  margin: 5px 0 4px;
  font-size: 1.05rem;
  font-weight: 600;
}
.item p {
  font-weight: bold;
  color: #28a745;
  margin-bottom: 12px;
  font-size: 1.05rem;
  border-bottom: 1px solid #f0f0f0;
  padding-bottom: 8px;
}

.item button:active {
  transform: scale(0.95);
}
.item button.added {
  background: #2ecc71;
  box-shadow: 0 0 10px rgba(46,204,113,0.6);
}
.cart-bounce {
  animation: cartBounce 0.4s ease;
}

@keyframes cartBounce {
  0% { transform: scale(1); }
  50% { transform: scale(1.2); }
  100% { transform: scale(1); }
}

#checkoutBtn {
  background: linear-gradient(135deg, #28a745, #2ecc71) !important;
  border-radius: 12px !important;
  font-size: 1rem;
  transition: 0.2s;
}

#checkoutBtn:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 15px rgba(40,167,69,0.3);
}
#checkoutBox input {
  border-radius: 10px;
  padding: 12px;
  border: 1px solid #ddd;
  transition: 0.2s;
}

#checkoutBox input:focus {
  border-color: #28a745;
  box-shadow: 0 0 0 2px rgba(40,167,69,0.1);
}

.order-popup {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.5);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 9999;
}

.order-popup.active {
  display: flex;
}

.order-popup-content {
  background: white;
  padding: 20px;
  border-radius: 10px;
  text-align: center;
}

/* ===== PICKUP DAY SELECT UPGRADE ===== */

#pickupDay {
  width: 100%;
  padding: 12px 14px;

  border-radius: 10px;
  border: 1px solid #ddd;

  background: #f8f9fa;
  font-size: 14px;

  outline: none;
  appearance: none;

  cursor: pointer;
  transition: 0.2s;
}

#pickupDay:focus {
  border-color: #28a745;
  background: #fff;
  box-shadow: 0 0 0 2px rgba(40,167,69,0.1);
}
.select-wrapper {
  position: relative;
}

.select-wrapper::after {
  content: "⌄";
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
  font-size: 16px;
  color: #777;
}

/* ===== CUSTOM TIME PICKER ===== */

.custom-time {
  position: relative;
}
.custom-day {
  position: relative;
}

.time-display {
  display: flex;
  align-items: center;
  gap: 10px;

  background: #f8f9fa;
  border: 1px solid #ddd;
  border-radius: 12px;

  padding: 12px;
  cursor: pointer;
  transition: 0.2s;
}

.time-display:hover {
  background: #fff;
  border-color: #28a745;
}

.time-options {
  position: absolute;
  top: calc(100% + 5px); /* 👈 FIX spacing */
  left: 0;
  width: 100%;

  background: white;
  border-radius: 12px;
  box-shadow: 0 10px 25px rgba(0,0,0,0.15);

  max-height: 200px;
  overflow-y: auto;

  display: none;
  z-index: 9999; /* 👈 ΠΟΛΥ ΣΗΜΑΝΤΙΚΟ */
}

.time-options.active {
  display: block;
}

.time-option {
  padding: 10px;
  cursor: pointer;
  transition: 0.2s;
}

.time-option:hover {
  background: #f0f2f5;
}
#modalCommentInput:focus{
  border-color:#28a745;
  box-shadow:0 0 0 2px rgba(40, 167, 69, 0.1);
}

.popup-card h3{
  margin-bottom:10px;
}

.popup-card textarea{
  font-family:inherit;
}

.delivery-links{
  position:fixed;
  bottom:15px;
  left:15px;
  display:flex;
  gap:20px;
  z-index:999;
}

.delivery-links a::after{
  content: attr(data-name);
  position:absolute;
  bottom:45px;
  background:#333;
  color:white;
  font-size:11px;
  padding:4px 6px;
  border-radius:10px;
  opacity:0;
  transition:0.2s;
}

.delivery-links a:hover::after{
  opacity:1;
}

.delivery-links img{
  width:28px;
  height:28px;
  object-fit:contain;
}

.delivery-cloud{
  position:fixed;
  bottom:20px;
  left:15px;

  display:flex;
  gap:20px;

  background:rgba(143, 143, 143, 0.95);
  backdrop-filter:blur(10px);

  padding:10px 12px;
  border-radius:30px;

  box-shadow:0 4px 15px rgba(0,0,0,0.15);

  z-index:999;

  transition:transform 0.3s ease, opacity 0.3s ease;
}

.delivery-cloud a{
  width:40px;
  height:36px;

  display:flex;
  align-items:center;
  justify-content:center;

  border-radius:50%;

  background:#fff;
  box-shadow:0 2px 6px rgba(0,0,0,0.1);

  transition:0.2s;
}

.delivery-cloud img{
  width:40px;
  height:40px;
  object-fit:contain;
}

.delivery-cloud a:hover{
  transform:scale(1.1);
}

@media(max-width:600px){

  .delivery-cloud{
    left:10px;
    bottom:15px;

    flex-direction:column; /* 🔥 αυτό κάνει vertical */

    padding:8px;
    gap:8px;

    border-radius:20px;
  }

  .delivery-label{
    display:none;
  }

  .delivery-cloud a{
    width:38px;
    height:38px;
  }

  .delivery-cloud img{
    width:20px;
    height:20px;
  }

}
.extras-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.extra-item {
  font-size: 12px;
  display: flex;
  align-items: center;
  gap: 6px;
}


.marathos-popup-card {
  background: #1e1e1e;
  color: #f5f5f5;
  border-radius: 20px;
  padding: 25px;
  max-width: 420px;
  width: 90%;
  margin: auto;
  box-shadow: 0 10px 30px rgba(0,0,0,0.4);
  animation: marathosFadeInUp 0.25s ease;
}

.marathos-info-modal {
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background: rgba(0,0,0,0.5);
  display: none;
  justify-content: center;
  align-items: center;
  z-index: 9999;
}

.marathos-info-modal.active {
  display: flex;
}

.marathos-modal-header {
  position: relative;
  text-align: center;
  margin-bottom: 15px;
}

.marathos-modal-header h3 {
  margin: 0;
  font-size: 18px;
}

.marathos-modal-header span {
  position: absolute;
  right: 0; top: 0;
  cursor: pointer;
  font-size: 20px;
  color: #999;
}

.marathos-modal-header span:hover { color: #000; }

@keyframes marathosFadeInUp {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Τα links στο sidebar (σκούρο theme) */
.marathos-info-link {
  padding: 12px 10px;
  margin: 5px 0;
  border-radius: 10px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  color: #000000;
  transition: 0.2s;
}

.marathos-info-link:hover {
  background: #bdb8b8;
  transform: translateX(4px);
}

.marathos-info-link i {
  color: #28a745;
}
/* ====================== */
/* ΠΛΗΡΟΦΟΡΙΕΣ -> ΤΕΛΕΙΩΣ ΚΑΤΩ */
/* ====================== */

#sidebar {
  display: flex;
  flex-direction: column;
  height: 100vh;
}

.sidebar-bottom {
  margin-top: auto !important;
  padding-bottom: 30px;
}


header {
  position: relative; /* 👈 μόνο αυτό */
  
}
header {
  background: rgba(255,255,255,0.7);
  backdrop-filter: blur(10px);
  transition: 0.3s;
}

.header-center {
  z-index: 2; /* 👈 logo πάνω */
}

#espaBadge {
  position: absolute;

  top: 40px;
  left: 180px;

  background: rgba(255,255,255,0.9);
  backdrop-filter: blur(10px);

  padding: 10px 15px;
  border-radius: 20px;

  box-shadow: 0 5px 15px rgba(0,0,0,0.15);

  z-index: 1;
  cursor: pointer;

  transition: opacity 0.3s, transform 0.3s;
}

#espaBadge img {
  width: 340px;
  display: block;
}

/* hide στο scroll */
#espaBadge.hide {
  opacity: 0;
  transform: translateY(-20px);
  pointer-events: none;
}

/* ========================= */
/* 📱 MOBILE (HIDE) */
/* ========================= */

@media (max-width: 768px) {

  #espaBadge {
    display: none !important;   /* 👈 ΔΕΝ ΥΠΑΡΧΕΙ στο κινητό */
  }

}

/* hide accessibility όταν ανοίγει το cart */
.cart-open #userwayAccessibilityIcon {
  opacity: 0 !important;
  pointer-events: none !important;
  transition: 0.3s;
}

.hide-accessibility {
  opacity: 0 !important;
  pointer-events: none !important;
  transition: 0.3s;
}
@media (min-width: 769px) {

  /* ΜΟΝΟ το κουμπί */
  #userwayAccessibilityIcon {
    transform: scale(0.75) !important;   /* 👈 μικρότερο */
    transform-origin: left center !important;
  }

}

.logo-box {
  height: 50px;
  display: flex;
  align-items: center;
    position: absolute;

  top: 40px;
  left: 180px;

  background: rgba(255,255,255,0.9);
  backdrop-filter: blur(10px);

  padding: 10px 15px;
  border-radius: 20px;

  box-shadow: 0 5px 15px rgba(0,0,0,0.15);

  z-index: 1;
  cursor: pointer;

  transition: opacity 0.3s, transform 0.3s;
}
}