/* Ordering & Customers page — phone storefront, customisation modal, tracker, rewards */
.phone { width: 100%; max-width:300px; }
.ph-top { display:flex; align-items:center; justify-content:space-between; padding:14px 16px; }
.ph-name { font-family:var(--font-display); font-weight:600; font-size:1.15rem; }
.hygiene { display:inline-flex; align-items:center; gap:6px; background:#0f7a3d; color:#fff; font-size:.68rem; font-weight:700; padding:4px 8px 4px 6px; border-radius:7px; }
.hygiene .n { background:#fff; color:#0f7a3d; width:16px; height:16px; border-radius:4px; display:grid; place-items:center; }
.seg { display:flex; background:var(--surface-2); border-radius:10px; padding:3px; margin:0 16px; }
.seg button { flex:1; padding:8px; font-size:.82rem; font-weight:600; border-radius:7px; color:var(--muted); }
.seg button.on { background:var(--surface); color:var(--text); box-shadow:var(--shadow-sm); }
.ph-filters { display:flex; gap:6px; padding:12px 16px 4px; flex-wrap:wrap; }
.ph-filters .pv-chip { display:inline-flex; padding:4px 10px; border-radius:99px; font-size:.7rem; font-weight:600; border:1px solid var(--line); color:var(--text-2); }
.ph-filters .pv-chip.on { background:var(--accent-tint); color:var(--accent); border-color:transparent; }
.ph-food { height:120px; margin:10px 16px 0; border-radius:12px; background:radial-gradient(120% 120% at 70% 20%, #e8b15a, #d98a1f 40%, #b5491f); position:relative; display:grid; place-items:center; }
.ph-food::after { content:"Dish photo"; font-size:.7rem; color:rgba(255,255,255,.85); font-weight:600; background:rgba(0,0,0,.18); padding:3px 9px; border-radius:99px; }
.ph-item { padding:13px 16px; }
.ph-item h4 { font-family:var(--font-sans); font-size:.96rem; font-weight:700; }
.ph-item .row { display:flex; align-items:center; justify-content:space-between; margin-top:8px; }
.ph-item .price { font-weight:700; }
.addbtn { background:var(--accent); color:#fff; width:32px; height:32px; border-radius:9px; display:grid; place-items:center; }
html[data-theme="dark"] .addbtn { color:#1a0f0a; }
.ph-basket { margin:2px 12px 14px; background:var(--text); color:var(--bg); border-radius:12px; padding:12px 16px; display:flex; align-items:center; justify-content:space-between; font-size:.86rem; font-weight:600; }
html[data-theme="dark"] .ph-basket { background:var(--accent); color:#1a0f0a; }

/* customisation modal */
.cust { background:var(--surface); border:1px solid var(--line); align-items:center; justify-content: center; border-radius:var(--radius); box-shadow:var(--shadow-md); overflow:hidden; max-width:500px; }
.cust__h { padding:16px 18px; border-bottom:1px solid var(--line); }
.cust__h h4 { font-family:var(--font-sans); font-weight:700; font-size:1.05rem; }
.cust__h p { color:var(--muted); font-size:.82rem; }
.cust__b { padding:6px 18px 16px; }
.opt-group { padding:14px 0; border-bottom:1px solid var(--line); }
.opt-group:last-child { border-bottom:none; }
.opt-group .gl { font-size:.74rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--muted); margin-bottom:10px; }
.opt { display:flex; align-items:center; gap:10px; padding:7px 0; font-size:.9rem; }
.opt .rd { width:18px; height:18px; border-radius:50%; border:2px solid var(--line-strong); flex:none; }
.opt .rd.on { border-color:var(--accent); background:radial-gradient(circle, var(--accent) 0 5px, transparent 6px); }
.opt .cb { width:18px; height:18px; border-radius:5px; border:2px solid var(--line-strong); flex:none; }
.opt .cb.on { border-color:var(--accent); background:var(--accent); }
.opt .pr { margin-left:auto; color:var(--muted); font-size:.82rem; }
.cust__foot { padding:14px 18px; }

/* live tracker */
.trackcard { max-width:380px; }
.track-bar { height:5px; border-radius:99px; background:var(--surface-3); margin:16px 0; position:relative; overflow:hidden; }
.track-bar i { position:absolute; inset:0 36% 0 0; background:var(--accent); border-radius:99px; }
@media (prefers-reduced-motion: no-preference){ .track-bar i { animation: fillbar 4s var(--ease-out) infinite alternate; } }
@keyframes fillbar { from{right:64%} to{right:18%} }
.steps { display:flex; justify-content:space-between; font-size:.72rem; color:var(--muted); }
.steps .on { color:var(--accent); font-weight:700; }
.driver { display:flex; align-items:center; gap:12px; margin-top:18px; padding-top:16px; border-top:1px solid var(--line); }
.driver__av { width:46px; height:46px; border-radius:50%; background:linear-gradient(135deg,#caa06a,#9c6b3f); flex:none; }
.driver b { font-weight:700; } .driver .sm { color:var(--muted); font-size:.8rem; }
.driver__call { margin-left:auto; width:42px; height:42px; border-radius:50%; background:var(--accent-tint); color:var(--accent); display:grid; place-items:center; }

.reward { display:flex; align-items:center; gap:14px; padding:16px; border:1px solid var(--line); border-radius:14px; background:var(--surface); }
.reward .rc { width:46px; height:46px; border-radius:12px; display:grid; place-items:center; background:var(--accent-tint); color:var(--accent); flex:none; }
.reward h4 { font-family:var(--font-sans); font-size:.98rem; font-weight:700; }
.reward p { color:var(--muted); font-size:.85rem; }

@media (max-width: 560px){
  .reward[style*="span 2"], .reward[style*="span 1"] { grid-column: auto !important; }
}