/* ==================================================================
   安静&微笑 の小灶 · 点菜台专用样式
   （在 style.css + pages.css 之后加载）
   ================================================================== */

/* ---------- 招牌推荐横滑条 ---------- */
.sig-row{display:flex;gap:12px;overflow-x:auto;padding:4px 2px 14px;scrollbar-width:thin}
.sig-row::-webkit-scrollbar{height:6px}
.sig-row::-webkit-scrollbar-thumb{background:var(--line-2);border-radius:99px}
.sig-card{
  flex:none;width:132px;padding:14px 12px;border-radius:var(--radius-sm);
  background:var(--surface);border:1px solid var(--line);box-shadow:var(--shadow-sm);
  display:flex;flex-direction:column;align-items:center;gap:8px;transition:.24s;
  font-family:inherit;cursor:pointer;
}
.sig-card:hover{transform:translateY(-5px);border-color:var(--pink);box-shadow:var(--shadow)}
.sig-emoji{
  width:54px;height:54px;border-radius:18px;display:grid;place-items:center;font-size:27px;
  box-shadow:0 5px 13px rgba(190,140,170,.28);
}
.sig-name{font-size:13.2px;font-weight:800;color:var(--ink);text-align:center;line-height:1.4}
.sig-price{font-size:12.5px;font-weight:800;color:var(--pink-deep)}

/* ---------- 菜品卡片 ---------- */
.dishes{display:grid;gap:16px;grid-template-columns:1fr}
@media(min-width:760px){.dishes{grid-template-columns:1fr 1fr}}
@media(min-width:1040px){.dishes{grid-template-columns:1fr 1fr 1fr}}

.dish{
  display:flex;flex-direction:column;overflow:hidden;transition:.24s;
  border:2px solid transparent;
}
.dish:hover{transform:translateY(-5px);box-shadow:var(--shadow);border-color:var(--pink-soft)}
.dish.picked{border-color:var(--pink);box-shadow:0 0 0 4px var(--pink-soft),var(--shadow)}

.dish-cover{
  height:124px;position:relative;display:grid;place-items:center;overflow:hidden;flex:none;
}
.dish-cover::after{
  content:"";position:absolute;inset:0;
  background:radial-gradient(circle at 50% 120%,rgba(255,255,255,.34),transparent 62%);
}
.dc-emoji{font-size:56px;position:relative;z-index:1;filter:drop-shadow(0 4px 8px rgba(0,0,0,.14))}

/* ---------- 真实菜品图（有image 时启用，emoji 仅作兜底） ---------- */
.dish-cover.has-img::after,
.dm-cover.has-img::after{
  background:linear-gradient(to top,rgba(0,0,0,.22),transparent 58%);
}
.dish-cover.has-img,.dm-cover.has-img,.sig-emoji.has-img{display:block}
.dish-cover.has-img .dc-img,
.dm-cover.has-img .dm-img{
  width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .5s cubic-bezier(.2,.7,.3,1);
}
.dish-cover.has-img .fallback,
.dm-cover.has-img .fallback,
.sig-emoji.has-img .fallback{display:none}
.dish:hover .dish-cover.has-img .dc-img,
.dish.picked .dish-cover.has-img .dc-img{transform:scale(1.07)}
.dc-img{opacity:0;transition:opacity .3s ease}
.dish-cover .dc-img[src]{opacity:1}
.sig-emoji.has-img{
  width:64px;height:64px;border-radius:18px;overflow:hidden;position:relative;padding:0;
}
.sig-emoji.has-img>img{width:100%;height:100%;object-fit:cover;display:block}

.dc-sig{
  position:absolute;top:9px;left:9px;z-index:2;font-size:10.5px;font-weight:800;color:#fff;
  background:rgba(0,0,0,.24);padding:3px 9px;border-radius:999px;backdrop-filter:blur(4px);
}
.dc-qty{
  position:absolute;bottom:9px;right:9px;z-index:2;font-size:11.5px;font-weight:800;color:#fff;
  background:linear-gradient(120deg,var(--pink),var(--pink-deep));padding:3px 10px;border-radius:999px;
  box-shadow:0 3px 8px rgba(232,93,140,.4);
}

.dish-body{padding:16px 17px 17px;display:flex;flex-direction:column;flex:1}
.dish-head{display:flex;align-items:baseline;gap:9px;margin-bottom:7px}
.dish-head h3{margin:0;font-size:17px;line-height:1.45;flex:1;min-width:0}
.dish-price{font-size:15px;font-weight:800;color:var(--pink-deep);flex:none}
.dish-desc{
  margin:0 0 12px;color:var(--ink-2);font-size:13.6px;line-height:1.7;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;flex:1;
}
.dish-meta{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:13px}
.dish-meta .pill{font-size:11.3px;padding:2px 9px}
.spice-none{color:var(--ink-3)}

/* 难度圆点 */
.dish-diff{display:inline-flex;align-items:center;gap:3px}
.dish-diff .dot{
  width:6px;height:6px;border-radius:50%;background:var(--line-2);display:inline-block;
}
.dish-diff .dot.on{background:var(--lilac)}

.dish-acts{display:flex;gap:8px;flex-wrap:wrap}
.dish-acts .mini{flex:1;min-width:96px;text-align:center;padding:8px 10px;font-size:12.8px}
.dish-acts .mini.add{
  background:linear-gradient(120deg,var(--pink),var(--pink-deep));color:#fff;border-color:transparent;
  font-weight:800;box-shadow:0 4px 0 rgba(0,0,0,.08);
}
.dish-acts .mini.add:hover{transform:translateY(-2px);box-shadow:0 6px 0 rgba(0,0,0,.08)}

/* ==================================================================
   购物车悬浮按钮
   ================================================================== */
.cart-fab{
  position:fixed;right:18px;bottom:20px;z-index:60;
  display:flex;align-items:center;gap:9px;padding:12px 18px;border-radius:999px;
  background:linear-gradient(120deg,var(--pink),var(--lilac));color:#fff;border:none;
  font-family:inherit;font-size:14.5px;font-weight:800;cursor:pointer;
  box-shadow:0 8px 24px rgba(232,93,140,.38);
  opacity:0;visibility:hidden;transform:translateY(16px) scale(.9);
  transition:.28s cubic-bezier(.34,1.4,.64,1);
}
.cart-fab.show{opacity:1;visibility:visible;transform:none}
.cart-fab:hover{transform:translateY(-3px);box-shadow:0 12px 30px rgba(232,93,140,.46)}
.cf-ico{font-size:19px;line-height:1}
.cf-txt{
  min-width:22px;height:22px;padding:0 6px;border-radius:999px;background:rgba(255,255,255,.28);
  display:grid;place-items:center;font-size:12.5px;font-weight:800;
}
.cf-label{letter-spacing:.5px}

/* ==================================================================
   菜谱弹窗
   ================================================================== */
.dish-paper{width:min(700px,100%)}
.dm-cover{
  height:158px;display:grid;place-items:center;position:relative;overflow:hidden;
  border-radius:16px 16px 0 0;
}
.dm-cover::after{
  content:"";position:absolute;inset:0;
  background:radial-gradient(circle at 50% 130%,rgba(255,255,255,.36),transparent 62%);
}
.dm-emoji{font-size:78px;position:relative;z-index:1;filter:drop-shadow(0 6px 14px rgba(0,0,0,.16))}
.dm-cover .dc-sig{top:12px;left:12px;font-size:11.5px}

.dm-head{padding:20px 26px 0}
.dm-head h3{margin:0 0 11px;font-size:23px;line-height:1.4}
.dm-desc{
  margin:16px 26px 0;padding:13px 15px;border-radius:14px;font-size:14.6px;line-height:1.85;
  background:var(--surface-2);border-left:3px solid var(--pink);color:var(--ink);
}

/* 风味特色 */
.dm-story{
  margin:14px 26px 0;padding:14px 16px;border-radius:14px;
  background:var(--cream-soft);border:1px dashed var(--cream);
}
.dm-story b{display:block;font-size:12.8px;color:#B37A16;margin-bottom:6px;letter-spacing:.5px}
.dm-story p{margin:0;font-size:14.2px;line-height:1.85;color:var(--ink-2)}

/* 食材 & 做法 */
.dm-block{padding:20px 26px 0}
.dm-block h4{margin:0 0 11px;font-size:15.5px;color:var(--ink);letter-spacing:.3px}
.ing-list{display:flex;flex-wrap:wrap;gap:7px}
.ing-list .pill{font-size:13px;padding:5px 12px;background:var(--surface-2);font-weight:700}

.step-list{list-style:none;margin:0;padding:0;counter-reset:s}
.step-list li{display:flex;gap:13px;margin-bottom:13px;align-items:flex-start}
.step-list li:last-child{margin-bottom:0}
.step-list li i{
  flex:none;width:25px;height:25px;border-radius:9px;display:grid;place-items:center;
  background:linear-gradient(135deg,var(--pink),var(--lilac));color:#fff;
  font-size:12.5px;font-weight:800;font-style:normal;margin-top:1px;
}
.step-list li p{margin:0;font-size:14.4px;line-height:1.8;color:var(--ink-2)}

/* 贴士 */
.dm-tips{
  margin:20px 26px 0;padding:15px 17px;border-radius:14px;
  background:var(--mint-soft);border:1px dashed var(--mint);
}
.dm-tips b{display:block;font-size:12.8px;color:#2C9A92;margin-bottom:6px;letter-spacing:.5px}
.dm-tips p{margin:0;font-size:14.2px;line-height:1.85;color:var(--ink-2)}

/* 弹窗底部按钮 */
.dm-acts{
  display:flex;gap:11px;padding:22px 26px 26px;flex-wrap:wrap;
}
.dm-acts .btn{flex:1;min-width:130px;justify-content:center}

/* ==================================================================
   下单弹窗
   ================================================================== */
.order-paper{width:min(520px,100%)}
.order-paper h3{margin:26px 26px 4px;font-size:20px}
.om-sub{margin:0 26px 18px;font-size:13.4px;color:var(--ink-3);line-height:1.7}

.om-items{
  margin:0 26px 18px;padding:6px 15px;border-radius:14px;
  background:var(--surface-2);border:1px solid var(--line);
}
.om-item{display:flex;align-items:center;gap:11px;padding:11px 0;border-bottom:1px dashed var(--line-2)}
.om-item:last-child{border-bottom:none}
.oi-emoji{width:34px;height:34px;border-radius:11px;display:grid;place-items:center;font-size:17px;flex:none}
.oi-name{flex:1;min-width:0;font-size:14.4px;font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.oi-qty{display:flex;align-items:center;gap:8px;flex:none}
.oi-qty b{min-width:20px;text-align:center;font-size:14.5px}
.qty-btn{
  width:25px;height:25px;border-radius:9px;border:1px solid var(--line-2);
  background:var(--surface);color:var(--ink-2);font-size:14px;line-height:1;cursor:pointer;
  display:grid;place-items:center;font-family:inherit;transition:.18s;
}
.qty-btn:hover{border-color:var(--pink);color:var(--pink-deep);background:var(--pink-soft)}
.oi-price{font-size:14px;font-weight:800;color:var(--pink-deep);min-width:46px;text-align:right;flex:none}

.om-field{margin:0 26px 13px}
.om-field label{display:block;font-size:13px;font-weight:800;margin-bottom:6px;color:var(--ink-2)}
.om-field label i{color:var(--ink-3);font-style:normal;font-weight:600}
.om-field input,.om-field textarea{
  width:100%;padding:11px 14px;border-radius:13px;border:1px solid var(--line-2);
  background:var(--surface-2);color:var(--ink);font-size:14.4px;font-family:inherit;
  outline:none;transition:.2s;resize:vertical;
}
.om-field input:focus,.om-field textarea:focus{
  border-color:var(--pink);background:var(--surface);box-shadow:0 0 0 4px var(--pink-soft);
}

.om-total{
  display:flex;align-items:center;justify-content:space-between;
  margin:18px 26px 0;padding:14px 17px;border-radius:14px;
  background:var(--pink-soft);
}
.om-total span{font-size:13.6px;font-weight:800;color:var(--ink-2)}
.om-total b{font-size:23px;color:var(--pink-deep);letter-spacing:-.5px}

.om-acts{display:flex;gap:11px;padding:20px 26px 26px;flex-wrap:wrap}
.om-acts .btn{flex:1;min-width:120px;justify-content:center}

/* 下单成功 */
.done-ico{font-size:62px;line-height:1;margin:30px 0 12px;animation:bounce .6s cubic-bezier(.34,1.56,.64,1)}
.done-no{
  margin:0 26px 14px;padding:14px;border-radius:14px;background:var(--surface-2);
  border:1px dashed var(--line-2);
}
.done-no span{display:block;font-size:12px;color:var(--ink-3);font-weight:700;margin-bottom:5px}
.done-no b{font-size:19px;color:var(--pink-deep);letter-spacing:1.5px;font-family:ui-monospace,Menlo,Consolas,monospace}

/* ==================================================================
   查订单
   ================================================================== */
.tm-row{display:flex;gap:9px;padding:0 26px}
.tm-row input{
  flex:1;min-width:0;padding:11px 14px;border-radius:13px;border:1px solid var(--line-2);
  background:var(--surface-2);color:var(--ink);font-size:14.2px;font-family:inherit;outline:none;
}
.tm-row input:focus{border-color:var(--pink);box-shadow:0 0 0 4px var(--pink-soft)}
.tm-row .btn{flex:none}

.tm-card{margin:0 26px;padding:17px 18px;border-radius:15px;background:var(--surface-2);border:1px solid var(--line)}
.tm-top{display:flex;align-items:center;gap:10px;margin-bottom:5px}
.tm-top b{font-size:15px;flex:1;min-width:0;word-break:break-all}
.tm-time{margin:0 0 12px;font-size:12.3px;color:var(--ink-3)}
.tm-items{border-top:1px dashed var(--line-2);padding-top:11px}
.tm-items div{display:flex;justify-content:space-between;gap:10px;padding:5px 0;font-size:14px;color:var(--ink-2)}
.tm-items b{color:var(--pink-deep);flex:none}
.tm-remark{margin:11px 0 0;padding:9px 11px;border-radius:11px;background:var(--cream-soft);font-size:13.2px;color:#B37A16;line-height:1.7}
.tm-total{display:flex;justify-content:space-between;align-items:center;margin-top:13px;padding-top:12px;border-top:1px dashed var(--line-2);font-size:13.4px;color:var(--ink-3);font-weight:700}
.tm-total b{font-size:19px;color:var(--pink-deep)}

/* 进度条 */
.tm-steps{display:flex;gap:0;margin:20px 26px 28px}
.tm-step{flex:1;text-align:center;position:relative;font-size:11.6px;color:var(--ink-3);font-weight:700}
.tm-step i{
  display:block;width:15px;height:15px;border-radius:50%;margin:0 auto 8px;
  background:var(--line-2);position:relative;z-index:1;
}
.tm-step:not(:last-child)::after{
  content:"";position:absolute;top:7px;left:50%;width:100%;height:2px;background:var(--line-2);z-index:0;
}
.tm-step.on i{background:linear-gradient(135deg,var(--pink),var(--lilac))}
.tm-step.on:not(:last-child)::after{background:linear-gradient(90deg,var(--pink),var(--lilac))}
.tm-step.on{color:var(--pink-deep)}
.tm-step.off{opacity:.4}

/* ---------- 移动端适配 ---------- */
@media(max-width:520px){
  .cart-fab{right:14px;bottom:14px;padding:11px 15px;font-size:13.6px}
  .cf-label{display:none}
  .dm-cover{height:126px}
  .dm-emoji{font-size:60px}
  .dm-head{padding:16px 18px 0}
  .dm-head h3{font-size:20px}
  .dm-desc,.dm-story,.dm-block,.dm-tips{margin-left:18px;margin-right:18px}
  .dm-block{padding-left:0;padding-right:0;margin-left:18px;margin-right:18px}
  .dm-acts{padding:18px}
  .order-paper h3,.om-sub{margin-left:18px;margin-right:18px}
  .om-items,.om-field,.om-total{margin-left:18px;margin-right:18px}
  .om-acts,.tm-row,.tm-card,.tm-steps{padding-left:18px;padding-right:18px;margin-left:0;margin-right:0}
  .tm-card,.tm-steps{margin-left:18px;margin-right:18px}
  .done-no{margin-left:18px;margin-right:18px}
  .dc-emoji{font-size:48px}
}
/* ==================================================================
   厨师小悦：点菜页的看板娘立牌
   ================================================================== */
.standee.chef{width:172px;padding:9px 9px 4px}
.standee.chef img{border-radius:15px 15px 8px 8px}
.chef-badge{
  position:absolute;top:-8px;right:-8px;z-index:3;
  font-size:10.5px;font-weight:800;color:#fff;letter-spacing:1px;
  background:linear-gradient(135deg,#FF9BB8,#F2607F);
  padding:3px 9px;border-radius:999px;
  box-shadow:0 3px 9px rgba(232,93,140,.42);
  animation:chefPulse 2.4s ease-in-out infinite;
}
@keyframes chefPulse{
  0%,100%{transform:scale(1)}
  50%{transform:scale(1.09)}
}
/* 小悦做菜时冒的小蒸汽 */
.standee.chef::before{
  content:"♨";position:absolute;left:50%;top:-16px;transform:translateX(-50%);
  font-size:13px;color:var(--pink);opacity:0;pointer-events:none;
  animation:steam 3.6s ease-in-out infinite;
}
@keyframes steam{
  0%{opacity:0;transform:translate(-50%,6px) scale(.8)}
  40%{opacity:.75}
  100%{opacity:0;transform:translate(-50%,-14px) scale(1.15)}
}
@media(prefers-reduced-motion:reduce){
  .chef-badge,.standee.chef::before{animation:none}
}
@media(max-width:600px){
  .standee.chef{width:124px}
}

/* ==================================================================
   厨房状态条：营业中 / 休息中 + 公告（内容由后台「站点设置」控制）
   ================================================================== */
.kitchen-bar{
  display:flex;align-items:flex-start;gap:10px;flex-wrap:wrap;
  margin-top:16px;padding:12px 16px;border-radius:14px;
  font-size:13.2px;font-weight:700;line-height:1.7;text-align:left;
}
.kitchen-bar .kb-dot{
  width:9px;height:9px;border-radius:50%;flex:none;margin-top:6px;
}
.kitchen-bar .kb-tag{
  display:inline-flex;align-items:center;gap:5px;flex:none;
  padding:3px 11px;border-radius:99px;font-size:12px;font-weight:800;
}
.kitchen-bar .kb-text{color:var(--ink-2);font-weight:600;flex:1;min-width:180px}

/* 营业中 */
.kitchen-bar.open{background:var(--mint-soft);border:1px solid #A8E0D8}
.kitchen-bar.open .kb-dot{background:#2C9A92;animation:kbPulse 1.9s ease-in-out infinite}
.kitchen-bar.open .kb-tag{background:#2C9A92;color:#fff}

/* 休息中 */
.kitchen-bar.shut{background:var(--cream-soft);border:1px dashed var(--cream)}
.kitchen-bar.shut .kb-dot{background:#C9A227}
.kitchen-bar.shut .kb-tag{background:#C9A227;color:#fff}

@keyframes kbPulse{
  0%,100%{opacity:1;transform:scale(1)}
  50%{opacity:.45;transform:scale(1.25)}
}
@media(prefers-reduced-motion:reduce){
  .kitchen-bar .kb-dot{animation:none}
}

/* ============================================================
   订单动态时间线 + 预计出餐时间
   ============================================================ */
.done-eta{
  font-size:13.5px;color:var(--ink-2);margin:0 0 16px;
  padding:8px 12px;border-radius:12px;
  background:var(--mint-50,rgba(150,230,200,.18));
  border:1px dashed rgba(90,190,150,.4);
}
.done-eta b{color:var(--mint-700,#2f8f6a);font-size:15px}

.tm-timeline{
  margin-top:16px;padding:14px 16px 6px;
  background:var(--card,#fff);border-radius:16px;
  border:1px solid var(--line,#f0e4ea);
}
.tm-timeline h4{
  margin:0 0 12px;font-size:13.5px;color:var(--ink-2);font-weight:700;
  display:flex;align-items:center;gap:6px;
}
.tm-timeline h4::before{content:"🕒";font-size:14px}
.tm-timeline ol{list-style:none;margin:0;padding:0 0 4px}
.tm-timeline li{
  position:relative;display:flex;align-items:flex-start;gap:10px;
  padding:0 0 14px 0;
}
/* 竖线连到下一条，最后一条不画 */
.tm-timeline li::before{
  content:"";position:absolute;left:11px;top:24px;bottom:0;
  width:2px;border-radius:2px;background:var(--line,#f0e4ea);
}
.tm-timeline li:last-child::before{display:none}
.tm-timeline li > i{
  flex:0 0 24px;width:24px;height:24px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-size:12px;font-style:normal;
  background:var(--bg,#faf6f8);border:2px solid var(--line,#f0e4ea);
  position:relative;z-index:1;
}
.tm-timeline li > div{flex:1;min-width:0;padding-top:1px}
.tm-timeline li b{display:block;font-size:13.6px;color:var(--ink);line-height:1.4}
.tm-timeline li span{display:block;font-size:12.4px;color:var(--ink-3);margin-top:1px}
.tm-timeline li time{
  flex:0 0 auto;font-size:11.6px;color:var(--ink-3);
  padding-top:3px;font-variant-numeric:tabular-nums;
}
/* 已完成的三步：确认 / 制作 / 上菜，用主题色点亮 */
.tm-timeline li.tl-confirmed > i,
.tm-timeline li.tl-cooking > i,
.tm-timeline li.tl-done > i{
  background:rgba(150,230,200,.24);border-color:rgba(90,190,150,.6);
}
.tm-timeline li.tl-done > i{
  background:rgba(255,157,192,.24);border-color:var(--pink,#FF7BA9);
}
.tm-timeline li.tl-canceled > i{
  background:rgba(200,190,195,.2);border-color:#d8ccd2;
}
@media(max-width:480px){
  .tm-timeline{padding:12px 13px 4px}
  .tm-timeline li time{font-size:11px}
}