@import url('https://fonts.googleapis.com/css2?family=Zilla+Slab:wght@500;700&family=Inter:wght@400;500;600;700&family=Noto+Sans+HK:wght@400;500;700;900&display=swap');

:root{
  --bg:#eef0e4;
  --ink:#1c2b30;
  --slate:#5b6a70;
  --card:#ffffff;
  --line:#dcded1;
  --accent:#c8372a;
  --accent-dark:#a52c21;
  --jade:#2f7d6b;
  --jade-bg:#e3efe9;
  --gold:#b8842e;
  --gold-bg:#f3ead7;
  --closed-bg:#f5e4e1;
}

*{ box-sizing:border-box; margin:0; padding:0; }

body{
  background:var(--bg);
  color:var(--ink);
  font-family:'Inter','Noto Sans HK',sans-serif;
  min-height:100vh;
  padding-bottom:60px;
}

/* ---------- Header ---------- */
header{
  padding:28px 20px 20px;
  max-width:720px;
  margin:0 auto;
}
.eyebrow{
  font-size:12px;
  letter-spacing:0.16em;
  text-transform:uppercase;
  color:var(--accent);
  font-weight:700;
  margin-bottom:8px;
}
h1{
  font-family:'Zilla Slab','Noto Sans HK',serif;
  font-weight:700;
  font-size:clamp(28px, 5vw, 38px);
  line-height:1.15;
  color:var(--ink);
}
h1 .en{
  display:block;
  font-family:'Inter',sans-serif;
  font-weight:600;
  font-size:15px;
  color:var(--slate);
  margin-top:6px;
  letter-spacing:0.01em;
}

.search-row{
  margin-top:20px;
  display:flex;
  gap:10px;
}
.search-box{
  flex:1;
  position:relative;
}
.search-box input{
  width:100%;
  background:var(--card);
  border:1px solid var(--line);
  color:var(--ink);
  font-family:'Inter',sans-serif;
  font-size:15px;
  padding:13px 16px 13px 40px;
  border-radius:12px;
  outline:none;
}
.search-box input:focus{ border-color:var(--accent); }
.search-box .icon{
  position:absolute; left:14px; top:50%; transform:translateY(-50%);
  color:var(--slate); font-size:15px; pointer-events:none;
}
.reload-all-btn{
  background:var(--card);
  border:1px solid var(--line);
  color:var(--slate);
  font-family:'Inter',sans-serif;
  font-size:13px;
  font-weight:600;
  padding:0 18px;
  border-radius:12px;
  cursor:pointer;
  white-space:nowrap;
}
.reload-all-btn:hover{ border-color:var(--accent); color:var(--accent); }

.meta-row{
  margin-top:12px;
  font-size:12px;
  color:var(--slate);
  display:flex;
  justify-content:space-between;
}

.region-row{
  margin-top:12px;
  display:flex;
  gap:8px;
  flex-wrap:wrap;
}
.region-pill{
  background:var(--card);
  border:1px solid var(--line);
  color:var(--slate);
  font-family:'Inter',sans-serif;
  font-size:12.5px;
  font-weight:600;
  padding:8px 14px;
  border-radius:20px;
  cursor:pointer;
}
.region-pill .cn{ font-weight:700; }
.region-pill .en{ opacity:0.75; margin-left:4px; }
.region-pill:hover{ border-color:var(--accent); color:var(--accent); }
.region-pill.active{
  background:var(--accent);
  border-color:var(--accent);
  color:#fff;
}
.region-pill.active .en{ opacity:0.85; }

/* ---------- Store list ---------- */
main{
  max-width:720px;
  margin:0 auto;
  padding:8px 20px;
  display:flex;
  flex-direction:column;
  gap:12px;
}

.loading-note, .empty-note{
  text-align:center;
  color:var(--slate);
  font-size:14px;
  padding:60px 20px;
}

.store-card{
  background:var(--card);
  border:1px solid var(--line);
  border-radius:16px;
  overflow:hidden;
  transition:border-color .15s ease;
}
.store-card.expanded{ border-color:var(--accent); }

.store-summary{
  padding:16px 18px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
  cursor:pointer;
}
.store-info{ flex:1; min-width:0; }
.store-name-cn{ font-size:16px; font-weight:700; color:var(--ink); }
.store-name-en{ font-size:12px; color:var(--slate); margin-top:1px; }
.badge-row{ display:flex; gap:6px; margin-top:8px; flex-wrap:wrap; }
.badge{
  font-size:10.5px; font-weight:700; padding:3px 9px; border-radius:20px;
}
.badge.open{ background:var(--jade-bg); color:var(--jade); }
.badge.closed{ background:var(--closed-bg); color:var(--accent); }
.badge.issuing{ background:var(--jade-bg); color:var(--jade); }
.badge.stopped{ background:var(--gold-bg); color:var(--gold); }

.wait-figure{
  text-align:center;
  flex-shrink:0;
}
.wait-num{
  font-family:'Zilla Slab',serif;
  font-weight:700;
  font-size:26px;
  color:var(--accent);
  line-height:1;
}
.wait-label{
  font-size:10px;
  color:var(--slate);
  margin-top:2px;
  white-space:nowrap;
}
.chevron{
  color:var(--slate);
  font-size:13px;
  transition:transform .15s ease;
  flex-shrink:0;
}
.store-card.expanded .chevron{ transform:rotate(180deg); }

.store-detail{
  display:none;
  border-top:1px solid var(--line);
  padding:18px;
}
.store-card.expanded .store-detail{ display:block; }

.detail-header-row{
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom:14px;
}
.detail-label{
  font-size:11px;
  letter-spacing:0.08em;
  text-transform:uppercase;
  color:var(--slate);
  font-weight:700;
}
.detail-sub{
  font-size:11.5px;
  color:var(--slate);
  margin:4px 0 10px;
  line-height:1.4;
}
.live-indicator{
  display:flex; align-items:center; gap:5px;
  font-size:11px; color:var(--jade); font-weight:600;
}
.live-dot{
  width:6px; height:6px; border-radius:50%; background:var(--jade);
  animation:pulse 1.6s ease-in-out infinite;
}
@keyframes pulse{
  0%,100%{ opacity:1; } 50%{ opacity:0.35; }
}

/* conveyor strip carrying ticket stubs */
.conveyor-track{
  position:relative;
  background:repeating-linear-gradient(90deg, #f1f2ea 0 18px, #e6e8dc 18px 36px);
  border-radius:10px;
  padding:14px 12px;
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  min-height:56px;
  align-items:center;
}
.ticket-stub{
  position:relative;
  background:#fffefb;
  border:1px solid #e3d9c9;
  border-radius:4px;
  padding:8px 14px 6px;
  font-family:'Zilla Slab',serif;
  font-weight:700;
  font-size:19px;
  color:var(--accent);
  box-shadow:0 2px 3px rgba(0,0,0,0.06);
}
.ticket-stub::before{
  content:"";
  position:absolute;
  top:-1px; left:0; right:0; height:6px;
  background:
    linear-gradient(135deg, transparent 50%, #fffefb 50%) 0 0/8px 8px,
    linear-gradient(-135deg, transparent 50%, #fffefb 50%) 4px 0/8px 8px;
  background-color:#e3d9c9;
}
.queue-empty-msg{
  font-size:13px;
  color:var(--slate);
  padding:4px 2px;
}

.reservation-block{ margin-top:16px; }

.detail-footer{
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-top:16px;
  flex-wrap:wrap;
  gap:8px;
}
.updated-text{
  font-size:12px;
  color:var(--slate);
}
.updated-text .time{ font-family:'Zilla Slab',serif; font-weight:700; color:var(--ink); }
.refresh-btn{
  background:var(--accent);
  color:#fff;
  border:none;
  font-family:'Noto Sans HK',sans-serif;
  font-weight:700;
  font-size:13px;
  padding:9px 16px;
  border-radius:9px;
  cursor:pointer;
}
.refresh-btn:hover{ background:var(--accent-dark); }
.refresh-btn:disabled{ opacity:0.5; cursor:default; }

.address-line{
  font-size:12.5px;
  color:var(--slate);
  margin-top:10px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:8px;
}
.map-link{
  color:var(--accent);
  font-weight:600;
  text-decoration:underline;
  white-space:nowrap;
}

.detail-error{
  font-size:12.5px;
  color:var(--accent);
  background:var(--closed-bg);
  padding:8px 12px;
  border-radius:8px;
  margin-top:10px;
}

.global-error{
  max-width:720px;
  margin:0 auto 12px;
  padding:0 20px;
}
.global-error .box{
  background:var(--closed-bg);
  color:var(--accent-dark);
  font-size:13px;
  padding:12px 16px;
  border-radius:12px;
}

footer.attribution{
  max-width:720px;
  margin:24px auto 0;
  padding:0 20px;
  font-size:11.5px;
  color:var(--slate);
  line-height:1.6;
}