/* CampSmart Meal Planner (scoped) */

.card-block{
  margin-top:1.25rem;
  padding:1.15rem 1rem;
  background:rgba(14,36,24,0.75);
  border:1px solid rgba(236,253,245,0.10);
  border-radius:16px;
  box-shadow:0 18px 28px rgba(0,0,0,0.30);
}

.muted{opacity:0.82}

.meal-card-grid{
  display:grid;
  grid-template-columns:1fr;
  gap:1rem;
}

@media (min-width:720px){
  .meal-card-grid{grid-template-columns:repeat(3,1fr)}
}

.meal-card{
  background:rgba(16,42,27,0.70);
  border:1px solid rgba(236,253,245,0.10);
  border-radius:16px;
  overflow:hidden;
  box-shadow:0 18px 28px rgba(0,0,0,0.28);
  position:relative;
  transition:transform .14s ease, border-color .2s ease;
}
.meal-card:hover{transform:translateY(-2px); border-color:rgba(52,211,153,0.22)}
.meal-card img{
  width:100%;
  height:150px;
  object-fit:cover;
  display:block;
  opacity:0.98;
  filter:saturate(1.05) contrast(1.02);
}
.meal-card h3{margin:0.85rem 0 0.2rem 0; font-size:1.02rem; padding:0 0.9rem}
.meal-card p{margin:0; padding:0 0.9rem 0.9rem; opacity:0.82; font-size:0.92rem}

.selection-controls{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:0.85rem;
  padding:0.85rem 0 0.2rem;
}
.selection-controls button{
  width:40px; height:40px;
  border-radius:999px;
  border:0;
  cursor:pointer;
  font-weight:950;
  font-size:1.15rem;
  background:#fbbf24;
  color:#1a1206;
  transition:transform .08s ease, filter .2s ease;
}
.selection-controls button:active{transform:translateY(1px)}
.selection-controls button:hover{filter:brightness(1.05)}
.selection-count{min-width:24px; text-align:center; font-weight:950}

#day-meal-toggles{
  display:grid;
  gap:0.75rem;
  margin-top:0.75rem;
}
.day-toggle{
  padding:0.85rem 0.85rem;
  border-radius:14px;
  background:rgba(16,42,27,0.55);
  border:1px solid rgba(236,253,245,0.10);
}
.day-toggle strong{display:block; margin-bottom:0.4rem}
.toggle-row{display:flex; flex-wrap:wrap; gap:0.55rem}
.toggle-row label{
  display:flex; align-items:center; gap:0.45rem;
  font-weight:850; font-size:0.9rem;
  opacity:0.9;
}

.meal-pool-head{display:flex; align-items:center; justify-content:space-between; gap:0.8rem; flex-wrap:wrap}
.meal-pool{
  display:grid;
  grid-template-columns:repeat(2, 1fr);
  gap:0.65rem;
  margin-top:0.85rem;
}
@media (min-width:720px){
  .meal-pool{grid-template-columns:repeat(4, 1fr)}
}
.pool-item{
  padding:0.65rem 0.65rem;
  border-radius:14px;
  border:1px solid rgba(236,253,245,0.10);
  background:rgba(16,42,27,0.70);
  font-weight:900;
  text-align:center;
  cursor:grab;
  user-select:none;
}
.pool-item.selected{
  outline:2px solid rgba(96,165,250,0.55);
  background:rgba(96,165,250,0.12);
}

.meal-plan-table{
  width:100%;
  border-collapse:collapse;
  min-width:860px;
}
.meal-plan-table th, .meal-plan-table td{
  padding:0.75rem;
  border-bottom:1px solid rgba(236,253,245,0.08);
  text-align:center;
  vertical-align:top;
}
.meal-plan-table th{text-align:left; background:rgba(7,18,13,0.45)}
.drop-slot{
  min-height:58px;
  border-radius:12px;
  background:rgba(255,255,255,0.03);
  cursor:pointer;
  transition:outline .2s ease, background .2s ease;
}
.drop-slot.over{
  outline:2px solid rgba(52,211,153,0.40);
  background:rgba(52,211,153,0.10);
}
.drop-slot.filled{
  background:rgba(16,42,27,0.75);
  border:1px solid rgba(52,211,153,0.22);
  display:flex;
  align-items:center;
  justify-content:center;
  padding:0.5rem;
  font-weight:950;
}
.drop-slot.not-planned{
  background:rgba(7,18,13,0.55);
  color:rgba(236,253,245,0.85);
  font-weight:950;
}

#final-shopping-list{
  list-style:none;
  padding:0;
  margin:0.85rem 0 0;
}
#final-shopping-list li{
  padding:0.6rem 0.25rem;
  border-bottom:1px solid rgba(236,253,245,0.08);
}