/* ===================== 賽吃趣？ 全站樣式 ===================== */
:root{
  --brand-orange:#FF6B35;
  --brand-red:#E8432E;
  --brand-dark:#2B2118;
  --brand-cream:#FFF8F0;
  --gray-line:#ECE6DD;
  --green:#2FAE60;
  --yellow:#F5A623;
  --gray:#9B948A;
  --gold:#C9971E;
}

*{box-sizing:border-box;}
html,body{
  background:var(--brand-cream);
  color:var(--brand-dark);
  font-family:"Noto Sans TC","PingFang TC","Microsoft JhengHei",-apple-system,BlinkMacSystemFont,sans-serif;
  -webkit-tap-highlight-color:transparent;
  scroll-behavior:smooth;
}

/* 隱藏捲軸但可滑動 */
.no-scrollbar::-webkit-scrollbar{display:none;}
.no-scrollbar{-ms-overflow-style:none;scrollbar-width:none;}

/* ---------- 頂部導覽 ---------- */
.app-header{
  background:linear-gradient(135deg,var(--brand-orange),var(--brand-red));
  color:#fff;
}
.app-logo-icon{
  width:40px;height:40px;border-radius:12px;object-fit:cover;
  box-shadow:0 2px 8px rgba(0,0,0,.25);
}

/* ---------- 卡片列表 ---------- */
.restaurant-card{
  background:#fff;
  border-radius:18px;
  box-shadow:0 2px 10px rgba(43,33,24,.08);
  border:1px solid var(--gray-line);
  transition:transform .15s ease, box-shadow .15s ease;
  overflow:hidden;
}
.restaurant-card:active{transform:scale(.98);}
.restaurant-card:hover{box-shadow:0 8px 22px rgba(43,33,24,.14); transform:translateY(-2px);}

.status-badge{
  font-size:.72rem;
  font-weight:700;
  padding:3px 10px;
  border-radius:999px;
  display:inline-flex;
  align-items:center;
  gap:4px;
  white-space:nowrap;
}
.status-open{background:#E4F7EC;color:var(--green);}
.status-soon{background:#FEF3E0;color:var(--yellow);}
.status-closed{background:#F0EEEA;color:var(--gray);}
.status-dot{width:7px;height:7px;border-radius:50%;background:currentColor;}
.status-dot.blink{animation:blink 1.4s infinite;}
@keyframes blink{0%,100%{opacity:1;}50%{opacity:.35;}}

.tag-chip{
  font-size:.68rem;
  font-weight:600;
  padding:2px 9px;
  border-radius:999px;
  background:#FFEFE6;
  color:var(--brand-red);
}

.icon-btn{
  width:38px;height:38px;
  border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:var(--brand-cream);
  color:var(--brand-red);
  border:1px solid var(--gray-line);
  transition:background .15s;
}
.icon-btn:hover{background:#FFE7DA;}
.icon-btn.solid{background:var(--brand-orange);color:#fff;border:none;}
.icon-btn.solid:hover{background:var(--brand-red);}

.member-badge{
  color:var(--gold);
  font-size:.95rem;
}

/* ---------- 星等文字顏色連動 ---------- */
.item-name-low{color:#D93025 !important; font-weight:700;}
.item-name-gold{
  font-weight:800;
  background:linear-gradient(120deg,#B8860B,#FFD700,#B8860B);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  text-shadow:0 0 1px rgba(184,134,11,.3);
}

/* ---------- 詳細頁 ---------- */
.hero-banner{
  background:linear-gradient(135deg,var(--brand-orange),var(--brand-red));
}

.section-card{
  background:#fff;
  border-radius:18px;
  border:1px solid var(--gray-line);
  box-shadow:0 2px 10px rgba(43,33,24,.06);
}

.menu-item-row{
  border-bottom:1px solid var(--gray-line);
  transition:background .12s;
}
.menu-item-row:last-child{border-bottom:none;}
.menu-item-row:hover{background:#FFFBF6;}

.qty-btn{
  width:30px;height:30px;
  border-radius:50%;
  background:var(--brand-cream);
  border:1px solid var(--gray-line);
  display:flex;align-items:center;justify-content:center;
  font-weight:700;
  color:var(--brand-red);
  user-select:none;
}
.qty-btn:active{background:#FFE7DA;}

.chip-toggle{
  font-size:.8rem;
  padding:6px 14px;
  border-radius:999px;
  border:1.5px solid var(--gray-line);
  background:#fff;
  color:var(--brand-dark);
  transition:all .12s;
  cursor:pointer;
}
.chip-toggle.active{
  background:var(--brand-orange);
  border-color:var(--brand-orange);
  color:#fff;
}

.star-row i{cursor:pointer; font-size:1.4rem; color:#E0D9CE;}
.star-row i.filled{color:var(--gold);}

/* ---------- Modal ---------- */
.modal-mask{
  position:fixed; inset:0; background:rgba(20,14,8,.55);
  display:flex; align-items:flex-end; justify-content:center;
  z-index:100; opacity:0; pointer-events:none; transition:opacity .2s;
}
.modal-mask.show{opacity:1; pointer-events:auto;}
.modal-panel{
  background:#fff;
  width:100%; max-width:560px;
  border-radius:22px 22px 0 0;
  max-height:88vh; overflow-y:auto;
  transform:translateY(24px); transition:transform .22s;
  padding-bottom:env(safe-area-inset-bottom);
}
.modal-mask.show .modal-panel{transform:translateY(0);}
@media (min-width:640px){
  .modal-mask{align-items:center;}
  .modal-panel{border-radius:22px; margin-bottom:0;}
}

.field-label{font-size:.8rem;font-weight:700;color:#8A7E70;margin-bottom:6px;display:block;}
.input-base{
  width:100%; border:1.5px solid var(--gray-line); border-radius:12px;
  padding:10px 12px; font-size:.95rem; outline:none; background:#FCFAF7;
}
.input-base:focus{border-color:var(--brand-orange); background:#fff;}

.btn-primary{
  background:linear-gradient(135deg,var(--brand-orange),var(--brand-red));
  color:#fff; font-weight:700; border-radius:14px; padding:12px 20px;
  box-shadow:0 4px 14px rgba(232,67,46,.3);
}
.btn-primary:disabled{opacity:.5;}
.btn-secondary{
  background:#F0EEEA; color:var(--brand-dark); font-weight:700; border-radius:14px; padding:12px 20px;
}
.btn-ghost{color:var(--brand-red); font-weight:700;}

.day-schedule-block{
  border:1px solid var(--gray-line);
  border-radius:14px;
  padding:10px;
  background:#FCFAF7;
}

.ocr-line-row input.name-input{flex:1;}
.ocr-line-row input.price-input{width:88px;}

.floating-add-btn{
  position:fixed; right:20px; bottom:24px; z-index:40;
  width:58px;height:58px;border-radius:50%;
  background:linear-gradient(135deg,var(--brand-orange),var(--brand-red));
  color:#fff; display:flex; align-items:center; justify-content:center;
  box-shadow:0 6px 18px rgba(232,67,46,.4);
  font-size:1.4rem;
}

.toast{
  position:fixed; bottom:30px; left:50%; transform:translateX(-50%) translateY(20px);
  background:var(--brand-dark); color:#fff; padding:10px 20px; border-radius:999px;
  font-size:.88rem; opacity:0; transition:all .25s; z-index:200; pointer-events:none;
  white-space:nowrap;
}
.toast.show{opacity:1; transform:translateX(-50%) translateY(0);}

.empty-state{color:#B3A99A;}

.spinner{
  width:34px;height:34px;border-radius:50%;
  border:3px solid #F0EEEA; border-top-color:var(--brand-orange);
  animation:spin 0.8s linear infinite;
}
@keyframes spin{to{transform:rotate(360deg);}}

.back-btn{
  width:38px;height:38px;border-radius:50%;
  background:rgba(255,255,255,.22);
  display:flex;align-items:center;justify-content:center;color:#fff;
}

.pill-tab{
  padding:7px 16px; border-radius:999px; font-size:.85rem; font-weight:700;
  background:#fff; border:1.5px solid var(--gray-line); color:#8A7E70; white-space:nowrap;
}
.pill-tab.active{background:var(--brand-dark); color:#fff; border-color:var(--brand-dark);}