/* ====== THEME ====== */
:root{
  --menu-orange:#e17c2f;
  --menu-red:#a00014;
  --menu-green:#1b5e20;
}

/* ====== MENU CARD ====== */
.dilemma-card.card-hero.menu{
  background:transparent;
  border:none;
  box-shadow:0 4px 15px rgba(0,0,0,.1);
  max-width:400px;
}
.dilemma-card.menu .card-cover{
  position:relative;
  width:100%;
  height:420px;
  border-radius:18px;
  overflow:hidden;
  background:center/cover no-repeat var(--cover);
}
@media (max-width:540px){
  .dilemma-card.menu .card-cover{height:360px;}
}
.dilemma-card.menu .card-glass{
  position:absolute; inset:0; z-index:2;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  padding:24px; text-align:center; color:#fff;
  background:linear-gradient(to top,rgba(0,0,0,.55),rgba(0,0,0,.25));
  border-top:1px solid rgba(255,255,255,.4);
  backdrop-filter:blur(12px) saturate(180%);
  -webkit-backdrop-filter:blur(12px) saturate(180%);
  animation:glassIn .5s ease both;
}
.dilemma-card.menu .card-glass .card-title{
  font:800 22px/1.2 system-ui,sans-serif;
  letter-spacing:.8px; text-transform:uppercase;
  text-shadow:0 2px 10px rgba(0,0,0,.35); margin-bottom:6px;
}
.dilemma-card.menu .card-glass .card-description{
  font:600 14px/1.35 system-ui,sans-serif; opacity:.9; margin-bottom:10px;
}
.dilemma-card.menu #nameWrap input{
  font:600 14px/1 system-ui; padding:10px 12px;
  border-radius:10px; border:1px solid #ccecf2; background:rgba(255,255,255,.9);
  outline:0; box-shadow:0 6px 20px rgba(0,0,0,.12) inset;
}

/* Buttons */
#confirmBtn{ background:var(--menu-orange); color:#fff; border:0; }
#confirmBtn:hover{ filter:brightness(.95); }
#cardMenu .card-content-box .card-button{ background:var(--menu-red); color:#fff; border:0; }
#cardMenu .card-content-box .card-button:hover{ filter:brightness(.96); }

/* Approved */
.approved-strong{ color:var(--menu-green); font-weight:800; text-shadow:0 2px 8px rgba(27,94,32,.25); }
.approved-link .approved-anchor{
  color:#ffd54d; font-weight:900; text-decoration:none; padding:4px 10px; border-radius:10px;
  background:rgba(0,0,0,.28); box-shadow:0 2px 10px rgba(0,0,0,.25);
}
.approved-link .approved-anchor:hover,.approved-link .approved-anchor:focus{ text-decoration:underline; outline:none; }

/* Animations */
@keyframes glassIn{ from{transform:translateY(8px);opacity:0} to{transform:translateY(0);opacity:1} }

/* ====== CATEGORY SLIDE BARS ====== */
.category-strip{ display:grid; gap:8px; margin:10px 0 14px; }
#catTop,#catBottom{
  display:flex; overflow-x:auto; gap:8px; padding:8px; scroll-snap-type:x mandatory; scrollbar-width:none;
}
#catTop::-webkit-scrollbar,#catBottom::-webkit-scrollbar{ display:none; }
.category-item{
  flex:0 0 auto; scroll-snap-align:start;
  background:rgba(255,255,255,.15); color:#fff; border:0; border-radius:12px; padding:10px 16px;
  font:600 14px/1 system-ui,sans-serif; white-space:nowrap; cursor:pointer; backdrop-filter:blur(6px);
}
.category-item:hover{ background:rgba(255,255,255,.28); }

/* ====== POPULAR COCKTAILS CARD (stacked chips) ====== */
.dilemma-card.card-hero.popular{
  background:transparent; border:none; box-shadow:0 4px 15px rgba(0,0,0,.1); 
  max-width:400px; width:100%;
}
.dilemma-card.popular .card-cover{
  position:relative; width:100%; border-radius:18px; overflow:hidden;
  background:center/cover no-repeat var(--cover);
  height:auto; min-height:480px;
}
@media (max-width:540px){
  .dilemma-card.popular .card-cover{ min-height:420px; }
}
.dilemma-card.popular .card-glass{
  position:absolute; inset:0; z-index:2;
  display:flex; flex-direction:column; align-items:center; justify-content:flex-start;
  padding:20px 16px; padding-top:18px; text-align:center; color:#fff;
  background:linear-gradient(to top,rgba(0,0,0,.55),rgba(0,0,0,.25));
  border-top:1px solid rgba(255,255,255,.4);
  backdrop-filter:blur(12px) saturate(180%);
  -webkit-backdrop-filter:blur(12px) saturate(180%);
}
@media (max-width:540px){
  .dilemma-card.popular .card-glass{ padding:16px 12px; padding-top:14px; }
}

/* One-line title */
.dilemma-card.popular .card-title{
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; display:block;
  max-width:100%; margin:0 auto 10px;
  font:800 18px/1.2 system-ui,sans-serif;
  letter-spacing:.6px; text-transform:uppercase;
  text-shadow:0 2px 10px rgba(0,0,0,.35);
}
@media (max-width:540px){
  .dilemma-card.popular .card-title{ font-size:16px; margin-bottom:8px; }
}

/* Stacked chips: one below the other */
.popular-chips{
  display:flex;
  flex-direction:column;
  gap:8px;
  width:100%;
  max-width:100%;
  margin-top:10px;
  padding:0;
  overflow:visible;
}
@media (max-width:540px){
  .popular-chips{ gap:6px; margin-top:8px; }
}

/* Chip: only cocktail name */
.popular-chip{
  display:flex; align-items:center; justify-content:center;
  background:rgba(255,255,255,.92); color:#000;
  border-radius:14px; padding:12px 16px; min-height:52px;
  text-align:center; font:700 15px/1.3 system-ui,sans-serif;
  width:100%; box-sizing:border-box;
}
@media (max-width:540px){
  .popular-chip{ 
    padding:10px 12px; min-height:46px; 
    font-size:14px; border-radius:12px; 
  }
}
.popular-chip .name{
  min-width:0;
  white-space:normal;
  word-break:break-word;
  overflow:visible;
  max-width:100%;
}
.popular-chip{display:inline-flex;align-items:center;gap:6px}
.popular-chip .pop-ic{display:inline-flex;width:16px;height:16px;line-height:0;opacity:.95}
.popular-chip .pop-ic svg{width:100%;height:100%}
/* Δείξε ότι όλη η κάρτα είναι link */
.dilemma-card.is-clickable .card-cover{cursor:pointer}