/* 2026-10-05 视觉增强：三餐平衡餐盘 / 药膳食材图 / 结算三档 / 场景图
 * 与 styles.css 互补，集中新增模块的样式，便于维护。 */

/* ===== 三餐：平衡餐盘示意（替代假照片，外国人清晰可信） ===== */
.meal-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 14px; margin-top: 10px; }
.meal-day { border: 1px solid #ececec; border-radius: 12px; padding: 14px; background: #fff; text-align: center; }
.meal-day-head { font-weight: 700; color: #b8860b; margin-bottom: 8px; }
.meal-plate { width: 120px; height: 120px; border-radius: 50%; margin: 0 auto 6px;
  background: conic-gradient(#f4c430 0 40%, #e8743b 40% 70%, #3fa34d 70% 90%, #4a90d9 90% 100%);
  box-shadow: inset 0 0 0 5px #fff, 0 3px 8px rgba(0,0,0,.08); position: relative; }
.meal-plate .plate-center { position: absolute; inset: 30%; background: #fff; border-radius: 50%;
  display: flex; align-items: center; justify-content: center; font-size: 22px; }
.meal-legend { display: flex; flex-wrap: wrap; gap: 4px 8px; justify-content: center; font-size: 11px; color: #666; margin-bottom: 8px; }
.meal-legend .lg i { display: inline-block; width: 9px; height: 9px; border-radius: 2px; margin-right: 3px; vertical-align: middle; }
.meal-day-body { font-size: 13px; color: #444; text-align: left; line-height: 1.6; }

/* ===== 药膳食材图（每份附真实食材小图） ===== */
.food-therapy-card .ing-grid { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0; }
.ing-chip { display: flex; align-items: center; gap: 5px; background: #fafafa; border: 1px solid #eee; border-radius: 20px; padding: 3px 9px 3px 3px; }
.ing-thumb { width: 30px; height: 30px; border-radius: 50%; object-fit: cover; background: #f0f0f0; }
.ing-name { font-size: 12px; color: #555; }

/* ===== 结算页三档选择（单独买任一档） ===== */
.checkout-plans { display: flex; gap: 10px; margin-bottom: 14px; }
.chk-plan { flex: 1; border: 1.5px solid #e3e3e3; background: #fff; border-radius: 10px; padding: 10px 6px; cursor: pointer; text-align: center; transition: .15s; }
.chk-plan b { display: block; font-size: 13px; color: #333; }
.chk-plan span { color: #b8860b; font-weight: 700; }
.chk-plan.on { border-color: #b8860b; background: #fff8e8; box-shadow: 0 0 0 2px rgba(184,134,11,.15); }
.chk-plan:hover { border-color: #c9a227; }

/* ===== 调理包生活化场景图 ===== */
.scene-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; margin-top: 12px; }
.scene-item { margin: 0; background: #fff; border: 1px solid #eee; border-radius: 12px; overflow: hidden; box-shadow: 0 2px 6px rgba(0,0,0,.06); }
.scene-img { width: 100%; height: 140px; object-fit: cover; display: block; }
.scene-item figcaption { font-size: 12px; color: #555; text-align: center; padding: 7px 4px; }