/* ===== style.css — menu.html (fixed header + mobile popup) ===== */
:root{
  --brand:#800000; --brand-2:#aa0000; --pill:#8B0000;
  --ink:#111; --muted:#6b7280; --bg:#f8f8f8; --card:#fff; --line:#e5e7eb;

  /* ύψος σταθερού header: search + 2 slide rows */
  --h-header:140px;
}

/* Reset / Base */
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; font-family:system-ui,-apple-system,"Segoe UI",Roboto,Ubuntu,Arial,sans-serif;
  background:var(--bg); color:var(--brand);
  max-width:640px; margin-inline:auto; min-height:100vh;
  padding:10px;
  padding-top:calc(var(--h-header) + 10px); /* χώρος για fixed header */
  padding-bottom:96px;                       /* χώρος για bottom toolbar */
}
h1{margin:8px 0 4px}

/* Fixed header wrapper */
.sticky-head{
  position:fixed; top:0; left:50%; transform:translateX(-50%);
  width:100%; max-width:640px; z-index:1000;
  background:var(--bg);
  padding-top:10px; padding-bottom:4px;
  border-bottom:1px solid var(--line);
}

/* Search */
.search-bar{ padding:0 0 10px }
.search-bar input{
  width:100%; padding:10px 12px; border-radius:8px; border:1px solid #ccc; font-size:16px;
}

/* Two slide bars (horizontal scroll) */
.category-strip{ display:grid; gap:6px; padding:4px 0 }
.cat-row{
  display:flex; overflow-x:auto; gap:8px; padding:8px 0;
  scroll-snap-type:x mandatory; scrollbar-width:none;
}
.cat-row::-webkit-scrollbar{ display:none; }
.category-item{
  flex:0 0 auto; scroll-snap-align:start;
  background:var(--brand); color:#fff; padding:6px 12px;
  border-radius:16px; cursor:pointer; white-space:nowrap; font-size:.9rem;
}
.category-item:hover{ background:var(--brand-2) }

/* Anchor offset για ενότητες */
.category{ scroll-margin-top: calc(var(--h-header) + 16px) }

/* Menu categories and items */
#menu.searching{ padding-bottom:100px }
#menu.searching .category h2{ display:none }
#menu.searching .category{ margin-bottom:0 }
.category{ margin:18px 0 28px }
.category h2{ margin:0 0 8px; color:var(--ink); font-size:1.1rem; font-weight:700 }

.drink{
  background:var(--card); color:var(--ink);
  padding:8px; margin:6px 0; border-radius:8px;
  display:flex; align-items:center; justify-content:space-between; gap:8px;
  border:1px solid var(--line);
}
.drink-info{ flex:1 1 auto }
.drink-name{ font-weight:600; color:var(--brand) }
.drink-desc{ color:#000; margin-top:4px; display:none }

.add-btn,.remove-btn{
  background:var(--brand); color:#fff; border:none; padding:6px 10px; border-radius:6px; cursor:pointer;
}
.remove-btn{ background:var(--brand-2) }
.add-btn:disabled,.remove-btn:disabled{ opacity:.5; cursor:not-allowed }

/* Bottom toolbar */
.toolbar{
  position:fixed; left:50%; transform:translateX(-50%);
  bottom:0; width:100%; max-width:640px; background:#fff; border-top:1px solid #ddd; padding:8px;
  display:flex; gap:10px; justify-content:center; z-index:50;
}
.toolbar button{ background:var(--brand); color:#fff; border:none; padding:8px 14px; border-radius:8px; cursor:pointer }
#drink-count{
  font-weight:700; margin-left:6px; background:#fff; color:var(--brand);
  padding:2px 8px; border-radius:12px; font-size:12px;
}

/* My Drinks panel */
/* My Drinks panel — FIX */
#myDrinksPanel{
  position: fixed;
  inset: 0;
  background: var(--brand);
  color: #fff;
  padding: 20px 12px;
  z-index: 9900;
  overflow-y: auto;
  box-sizing: border-box;
}
/* κρύβεται ΜΟΝΟ όταν υπάρχει hidden */
#myDrinksPanel[hidden]{ display: none !important; }

#myDrinksContent{ max-width:640px; margin-inline:auto }
.previous-orders-block{ background:#fff; color:#000; padding:10px; border-radius:10px; margin:10px 0 }
.round-block{ margin:10px 0 14px }
.round-block li{ display:flex; justify-content:space-between; align-items:center; gap:8px; padding:2px 0 }
.round-block input[type="text"]{ flex:1 1 auto; padding:6px 8px; border-radius:6px; border:1px solid #ccc }


/* Overlay */
#overlay{ display:none; position:fixed; inset:0; background:rgba(0,0,0,.9); color:#fff; z-index:9999 }
#overlay .inner{ max-width:640px; margin:60px auto; padding:16px; text-align:center }
#overlay .close{ position:absolute; top:10px; right:18px; background:none; border:none; color:#fff; font-size:26px; cursor:pointer }
#waitMessage{ margin-top:12px; font-size:1.2rem }

/* Pills / badges */
.pill{ display:inline-flex; align-items:center; gap:6px; padding:4px 8px; border-radius:999px; background:#f3f4f6; color:var(--ink); border:1px solid var(--line) }
.pill .table{ background:var(--pill); color:#fff; border-radius:6px; padding:2px 6px; font-weight:700 }

/* ===== Popup: mobile-friendly ===== */
.popup{
  position: fixed; inset: 0; z-index: 20000;
  display: grid; place-items: center;
  background: rgba(0,0,0,.5);
  padding: 16px 12px env(safe-area-inset-bottom);
}
.popup[hidden]{ display:none; }

.popup-card{
  width: 100%; max-width: 540px;
  background:#fff; color:#111;
  border-radius: 16px;
  box-shadow: 0 18px 44px rgba(0,0,0,.35);
  padding: 14px 14px 12px;
  display: grid; gap: 10px;
  transform: translateY(6px); opacity: 0; animation: popIn .18s ease-out forwards;
}
@keyframes popIn{ to{ transform: translateY(0); opacity:1 } }

.popup h5{ margin:0; font:700 18px/1.2 system-ui,sans-serif; color:#111; }
.popup .popup-title{
  margin: 2px 0 4px; font-weight:600; color:#444;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.popup input{
  width:100%; padding:12px 12px; font-size:16px;
  border:1px solid #d7d7d7; border-radius:12px; outline:0;
  box-shadow: 0 1px 0 rgba(0,0,0,.02) inset;
}
.popup-actions{
  display:grid; grid-template-columns: 1fr 1fr; gap:10px; margin-top:6px;
}
@media (max-width:420px){ .popup-actions{ grid-template-columns:1fr } }

.btn{
  height:48px; border:none; border-radius:12px; cursor:pointer;
  font:700 16px/1 system-ui,sans-serif;
}
.btn-primary{ background: var(--brand); color:#fff; }
.btn-primary:active{ filter:brightness(.95) }
.btn-secondary{ background:#f3f4f6; color:#111; border:1px solid #e5e7eb; }
.btn-secondary:active{ filter:brightness(.98) }

.popup-close{
  position:absolute; top:8px; right:10px;
  width:32px; height:32px; border-radius:50%;
  display:grid; place-items:center; border:none; background:#0000; color:#666;
  font-size:22px; cursor:pointer;
}
.popup-close:active{ background:#f3f4f6 }

/* Utils */
@keyframes cardFlash{ 0%{box-shadow:0 0 0 rgba(255,0,0,0); background:inherit} 30%{box-shadow:0 0 0 6px rgba(255,0,0,.15) inset; background:#fff7f7} 100%{box-shadow:0 0 0 rgba(255,0,0,0); background:inherit} }
.flash{ animation:cardFlash .6s ease }
@keyframes rowBlink{ 0%{background:#fff4f4} 50%{background:#ffecec} 100%{background:#fff4f4} }
.round-row{ border-radius:8px; padding:6px 8px }
.round-row.blinking{ animation:rowBlink 1.1s linear infinite }
.badge-access{ display:inline-flex; align-items:center; justify-content:center; width:20px; height:20px; border-radius:50%; background:#0a0; color:#fff; font-size:12px; font-weight:700; margin-right:6px }
.served-tag{ font-weight:700 }
.note{ color:#666; text-align:center; padding:12px }
/* badge + παλμός */
.badge{font-weight:700;margin-left:6px;background:#fff;color:var(--brand);
  padding:2px 8px;border-radius:12px;font-size:12px}
.pulse{animation:pulse 800ms ease-in-out 2}
@keyframes pulse{0%{transform:scale(1)}50%{transform:scale(1.08)}100%{transform:scale(1)}}

/* coachmark */
.coach{
  position:fixed; bottom:76px; right:16px; z-index:21000;
  background:#111; color:#fff; padding:10px 12px; border-radius:12px;
  box-shadow:0 8px 24px rgba(0,0,0,.35); font:600 13px/1.3 system-ui,sans-serif
}
.coach::after{
  content:""; position:absolute; bottom:-8px; right:30px; width:0; height:0;
  border-left:8px solid transparent; border-right:8px solid transparent; border-top:8px solid #111;
}
.coach .x{margin-left:8px; opacity:.7; cursor:pointer}