/* Drink Assistant Styles */
.mv-drink{
  margin: 16px 0 18px;
  padding: 16px;
  border-radius: 16px;
  border: 1px solid rgba(0,0,0,.10);
  background: rgba(45,212,191,.06);
}
.mv-pill{
  display:inline-block;
  padding:4px 10px;
  border-radius:999px;
  background:rgba(45,212,191,.2);
  font-size:11px;
  font-weight:900;
  text-transform:uppercase;
  letter-spacing:.08em;
  margin-bottom:8px;
}
.mv-drink__title{ margin:8px 0 6px; font-weight:900; }
.mv-drink__sub{ margin:0 0 12px; opacity:.8; }
.mv-drink__row{ margin-bottom: 12px; }
.mv-drink__label{ font-size: 12px; font-weight:900; opacity:.75; margin-bottom:6px; letter-spacing:.08em; text-transform:uppercase; }
.mv-chips{ display:flex; flex-wrap:wrap; gap:8px; }
/* Mobile tap targets: improve hit area without huge layout changes */
.mv-chip{
  border:1px solid rgba(0,0,0,.12);
  background:#fff;
  border-radius:999px;
  min-height: 44px;
  min-width: 44px;
  padding: 10px 14px;
  line-height: 1.1;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight:800;
  cursor:pointer;
  touch-action: manipulation;
  transition: background-color .2s, border-color .2s, transform .2s, box-shadow .2s, color .2s;
}
.mv-chip:hover{
  border-color:rgba(45,212,191,.5);
  background:rgba(45,212,191,.08);
}
.mv-chip.is-on{ 
  border-color: rgba(45,212,191,.7); 
  background: rgba(45,212,191,.14); 
  color:#000;
}
.mv-drink__actions{ display:flex; gap:10px; margin-top: 6px; flex-wrap:wrap; }
.mv-btn{
  border-radius:12px;
  min-height: 44px;
  min-width: 44px;
  padding: 12px 20px;
  line-height: 1.1;
  font-weight:900;
  cursor:pointer;
  touch-action: manipulation;
  border:none;
  transition: background-color .2s, border-color .2s, transform .2s, box-shadow .2s, color .2s;
}
.mv-btn--primary{
  background:rgba(45,212,191,.9);
  color:#000;
}
.mv-btn--primary:hover{
  background:rgba(45,212,191,1);
}
.mv-btn--ghost{
  background:transparent;
  border:1px solid rgba(0,0,0,.12);
  color:rgba(0,0,0,.8);
}
.mv-btn--ghost:hover{
  background:rgba(0,0,0,.04);
}
.mv-drink__results {
  margin-top: 14px;
  display: grid;
  grid-gap: 10px; /* legacy */
  gap: 10px; /* modern */
}
.mv-drinkCard{
  border:1px solid rgba(0,0,0,.10);
  background:#fff;
  border-radius:14px;
  padding:12px;
}
.mv-drinkCard__top{ display:flex; justify-content:space-between; gap:10px; align-items:flex-start; }
.mv-drinkCard__name{
  font-weight:900;
  overflow-wrap: anywhere;
  word-break: break-word;
}
.mv-drinkCard__price{ font-weight:900; opacity:.85; }
.mv-drinkCard__why{
  margin-top:6px;
  opacity:.8;
  font-size: 13px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  overflow-wrap: anywhere;
  word-break: break-word;
}
.mv-drinkCard__btn{
  margin-top:10px;
  width:100%;
  border-radius: 12px;
  min-height: 44px;
  min-width: 44px;
  padding: 12px;
  line-height: 1.1;
  font-weight:900;
  border:1px solid rgba(0,0,0,.12);
  background: rgba(45,212,191,.14);
  cursor:pointer;
  transition:all .2s;
}
.mv-drinkCard__btn:hover{
  background:rgba(45,212,191,.24);
  border-color:rgba(45,212,191,.4);
}

/* Section titles and mini buttons */
.mv-sectionTitle{
  font-weight: 900;
  margin: 14px 0 8px;
  letter-spacing: .02em;
}
.mv-miniRow{ 
  display:flex; 
  gap:8px; 
  flex-wrap:wrap; 
  margin-top:10px; 
}
.mv-miniBtn{
  border:1px solid rgba(0,0,0,.12);
  border-radius: 999px;
  min-height: 44px;
  min-width: 44px;
  padding: 10px 14px;
  line-height: 1.1;
  font-weight: 900;
  cursor: pointer;
  background: #fff;
  transition:all .2s;
}
.mv-miniBtn:hover{
  border-color:rgba(45,212,191,.5);
  background:rgba(45,212,191,.08);
}

/* Flex gap fallback (Safari < 14.1) - consolidated 8px block */
@supports not (gap: 8px) {
  .mv-chips { margin: -4px; }
  .mv-chips > * { margin: 4px; }

  .mv-miniRow { margin: -4px; }
  .mv-miniRow > * { margin: 4px; }
}

/* Flex gap fallback (Safari < 14.1) - 10px block */
@supports not (gap: 10px) {
  .mv-drink__actions { margin: -5px; }
  .mv-drink__actions > * { margin: 5px; }

  .mv-drinkCard__top { margin: -5px; }
  .mv-drinkCard__top > * { margin: 5px; }
}

/* Responsive tweaks for mobile */
@media (max-width: 768px) {
  .mv-drink {
    padding: 12px;
  }
  .mv-drink__results {
    grid-template-columns: 1fr;
  }
}