/* Wait+ customer.css - お客様画面スタイル */

/* カテゴリボタン */
.cat-btn { background:rgba(255,255,255,0.04); border:1px solid rgba(255,255,255,0.1); border-radius:14px; padding:16px 8px; display:flex; flex-direction:column; align-items:center; gap:10px; cursor:pointer; transition:all .2s; }
.cat-btn:hover { background:rgba(245,184,0,0.08); border-color:rgba(245,184,0,0.4); }
.cat-btn.active { background:rgba(245,184,0,0.14); border-color:#f5b800; }
.cat-btn.active .cat-label { color:#f5b800; }
.cat-label { font-size:14px; color:rgba(255,255,255,0.9); text-align:center; font-weight:700; }

/* サブカテゴリリスト */
.item-btn { background:rgba(255,255,255,0.04); border:1px solid rgba(255,255,255,0.08); border-radius:12px; padding:14px 20px; display:flex; align-items:center; justify-content:space-between; cursor:pointer; transition:all .2s; width:100%; }
.item-btn:hover { background:rgba(245,184,0,0.08); border-color:rgba(245,184,0,0.3); }
.item-btn.active { background:rgba(245,184,0,0.12); border-color:#f5b800; }

/* フィードバックボタン */
.feedback-btn { background:rgba(255,255,255,0.04); border:1px solid rgba(255,255,255,0.1); border-radius:12px; padding:14px 8px; display:flex; flex-direction:column; align-items:center; gap:6px; cursor:pointer; transition:all .2s; }
.feedback-btn:hover { background:rgba(245,184,0,0.08); border-color:rgba(245,184,0,0.3); }
.feedback-btn.active { background:rgba(245,184,0,0.14); border-color:#f5b800; }
.feedback-btn.active .feedback-label { color:#f5b800; }
.feedback-label { font-size:13px; color:rgba(255,255,255,0.7); font-weight:700; text-align:center; }

/* プログレスバー */
.progress-bar { width:100%; height:4px; background:rgba(255,255,255,0.1); border-radius:2px; overflow:hidden; }
.progress-fill { height:100%; background:#f5b800; border-radius:2px; width:0%; transition:width .3s; }

/* 割引カード */
.discount-card { background:rgba(245,184,0,0.08); border:1px solid rgba(245,184,0,0.3); border-radius:16px; padding:24px; display:flex; flex-direction:column; align-items:center; gap:8px; }
.discount-amount { font-family:'Bebas Neue',sans-serif; font-size:80px; color:#f5b800; line-height:1; text-shadow:0 0 40px rgba(245,184,0,0.4); }

/* チェックラッパー */
.check-wrap { width:80px; height:80px; border-radius:50%; background:rgba(245,184,0,0.12); border:2px solid #f5b800; display:flex; align-items:center; justify-content:center; animation:pop .4s ease-out; }
@keyframes pop { 0%{transform:scale(0);opacity:0} 70%{transform:scale(1.1)} 100%{transform:scale(1);opacity:1} }