/* Tafel · customer.css — the phone app. Body 16px, targets 44px, thumb-zone actions. */
.phone { font-size: var(--t-16); }
.phone .btn { font-size: var(--t-16); }
.addr-bar { display: flex; align-items: center; gap: var(--s-2); padding: 0 var(--app-gutter) var(--s-2); }
.addr-bar .addr { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; font-size: var(--t-15); min-height: 36px; }
.addr-bar .addr .ico { color: var(--paprika); }
.addr-bar .addr small { color: var(--ink-3); font-weight: 500; }
.mode-seg { padding: 0 var(--app-gutter) var(--s-3); }
.hero-search { padding: 0 var(--app-gutter) var(--s-4); }
.cuisines { display: flex; gap: var(--s-4); overflow-x: auto; padding: 0 var(--app-gutter) var(--s-2); margin: 0 calc(-1 * var(--app-gutter)); scrollbar-width: none; }
.cuisines::-webkit-scrollbar { display: none; }
.cuisine { display: flex; flex-direction: column; align-items: center; gap: 6px; flex: none; width: 68px; font-size: var(--t-12); font-weight: 600; color: var(--ink-2); }
.cuisine .food { width: 62px; height: 62px; border-radius: 50%; box-shadow: var(--e-1); }
.cuisine .food .glyph { width: 30px; height: 30px; }
.cuisine .food img { border-radius: 50%; }
.cuisine.is-on .food { outline: 2px solid var(--paprika); outline-offset: 2px; }
.rcards { display: grid; gap: var(--s-4); }
.rcards-h { display: flex; gap: var(--s-3); overflow-x: auto; padding: 0 var(--app-gutter) var(--s-2); margin: 0 calc(-1 * var(--app-gutter)); scrollbar-width: none; }
.rcards-h::-webkit-scrollbar { display: none; }
.rcards-h .rcard { flex: none; width: 240px; }
.rcards-h .rcard .food-lg { height: 110px; }
.promo-strip { padding: 0 var(--app-gutter) var(--s-2); }
.why-chips { display: flex; flex-wrap: wrap; gap: 4px; }
.search-suggest { display: flex; flex-direction: column; }
.search-suggest button { display: flex; align-items: center; gap: var(--s-3); min-height: 48px; text-align: left; padding: 0 var(--s-2); border-radius: var(--r-md); font-size: var(--t-15); }
.search-suggest button:hover { background: var(--surface-2); }
.search-suggest .ico { color: var(--ink-4); }
.ai-hint { display: flex; gap: var(--s-3); align-items: flex-start; padding: var(--s-3) var(--s-4); border-radius: var(--r-lg); background: var(--plum-soft); color: var(--plum-ink); font-size: var(--t-13); line-height: 1.45; border: 1px solid var(--plum-line); }
.ai-hint .ico { flex: none; margin-top: 1px; }
.result-r { display: flex; gap: var(--s-3); padding: var(--s-3) 0; border-bottom: 1px solid var(--line-faint); align-items: flex-start; }
.result-r .food { width: 64px; height: 64px; }
.result-r .food .glyph { width: 36px; height: 36px; }
.price-level { font-weight: 600; color: var(--ink-2); letter-spacing: .02em; }
.price-level .off { color: var(--ink-4); font-weight: 400; }
.rest-hero { position: relative; }
.rest-hero .food-hero { height: 190px; }
.rest-hero .back { position: absolute; left: var(--s-3); top: var(--s-3); background: rgba(255,255,255,.9); }
.rest-hero .fav { position: absolute; right: var(--s-3); top: var(--s-3); background: rgba(255,255,255,.9); }
.rest-card { margin: -28px var(--s-4) 0; position: relative; }
.rest-card h1 { font-family: var(--font-display); font-size: var(--t-24); font-weight: 600; font-variation-settings: 'opsz' 40, 'SOFT' 50; letter-spacing: -0.015em; }
.rest-facts { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-2); margin-top: var(--s-3); }
.rest-fact { text-align: center; padding: var(--s-2) 0; border-radius: var(--r-md); background: var(--surface-2); }
.rest-fact strong { display: block; font-size: var(--t-15); }
.rest-fact span { font-size: var(--t-11); color: var(--ink-3); text-transform: uppercase; letter-spacing: .04em; font-weight: 600; }
.menu-cats { position: sticky; top: 0; z-index: var(--z-sticky); background: var(--ground); padding: var(--s-2) var(--app-gutter) 0; box-shadow: 0 1px 0 var(--line-faint); }
.menu-sec { padding: var(--s-2) var(--app-gutter); }
.menu-sec h2 { font-family: var(--font-display); font-size: var(--t-20); font-weight: 600; font-variation-settings: 'opsz' 32, 'SOFT' 50; margin: var(--s-4) 0 var(--s-1); }
.cart-bar { position: sticky; bottom: 0; padding: var(--s-3) var(--app-gutter); background: linear-gradient(to top, var(--ground) 72%, transparent); }
.cart-bar .btn { justify-content: space-between; }
.cart-bar .btn .count { background: rgba(255,255,255,.25); color: #fff; }
.mod-group { padding: var(--s-3) 0; border-top: 1px solid var(--line-faint); }
.mod-group h3 { font-size: var(--t-15); display: flex; align-items: center; gap: var(--s-2); }
.mod-opt { display: flex; align-items: center; gap: var(--s-3); min-height: 44px; }
.mod-opt .price { margin-left: auto; font-size: var(--t-14); color: var(--ink-3); font-variant-numeric: tabular-nums; }
.cart-line { display: flex; gap: var(--s-3); padding: var(--s-3) 0; border-bottom: 1px solid var(--line-faint); align-items: flex-start; }
.cart-line .food { width: 56px; height: 56px; }
.cart-line .food .glyph { width: 32px; height: 32px; }
.cart-line .stepper-qty { transform: scale(.9); transform-origin: right; }
.section { padding: var(--s-4); background: var(--surface); border-radius: var(--r-lg); border: 1px solid var(--line); }
.section + .section { margin-top: var(--s-3); }
.section h2 { font-size: var(--t-15); font-weight: 700; margin-bottom: var(--s-3); display: flex; align-items: center; gap: var(--s-2); }
.section h2 .ico { color: var(--paprika); }
.opt-row { display: flex; align-items: center; gap: var(--s-3); min-height: 48px; }
.opt-row .grow { min-width: 0; }
.opt-row .ico.chev { color: var(--ink-4); }
.tip-row { display: flex; gap: var(--s-2); }
.tip-row button { flex: 1; min-height: 40px; border-radius: var(--r-md); border: 1.5px solid var(--line); font-weight: 600; font-size: var(--t-14); background: var(--surface); }
.tip-row button.is-on { border-color: var(--paprika); background: var(--paprika-soft); color: var(--paprika-ink); }
.status-hero { padding: var(--s-4) var(--app-gutter); text-align: center; }
.status-hero .ico-big { width: 72px; height: 72px; border-radius: 50%; display: grid; place-content: center; margin: 0 auto var(--s-3); background: var(--paprika-soft); color: var(--paprika-ink); }
.status-hero .ico-big .ico { width: 34px; height: 34px; }
.status-hero .ico-big.basil { background: var(--basil-soft); color: var(--basil-ink); }
.status-hero h1 { font-family: var(--font-display); font-size: var(--t-24); font-weight: 600; font-variation-settings: 'opsz' 40, 'SOFT' 50; }
.status-hero .eta { font-family: var(--font-display); font-size: var(--t-44); font-weight: 500; letter-spacing: -0.03em; line-height: 1; margin: var(--s-2) 0; font-variation-settings: 'opsz' 72, 'SOFT' 40; font-variant-numeric: tabular-nums; }
.status-hero .eta small { font-size: var(--t-16); font-family: var(--font-ui); font-weight: 500; color: var(--ink-3); letter-spacing: 0; }
.order-items { display: flex; flex-direction: column; gap: var(--s-2); }
.order-item { display: flex; gap: var(--s-3); align-items: flex-start; font-size: var(--t-15); }
.order-item .qty { font-weight: 700; color: var(--paprika-ink); min-width: 28px; font-variant-numeric: tabular-nums; }
.order-card { display: flex; gap: var(--s-3); padding: var(--s-3); background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); align-items: center; }
.order-card .food { width: 56px; height: 56px; }
.order-card .food .glyph { width: 32px; height: 32px; }
.onb { flex: 1; display: flex; flex-direction: column; }
.onb-slide { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: var(--s-6) var(--s-6) 0; gap: var(--s-4); }
.onb-art { width: 200px; height: 200px; border-radius: 60px; display: grid; place-content: center; position: relative; }
.onb-art .glyph { width: 110px; height: 110px; }
.onb h1 { font-family: var(--font-display); font-size: var(--t-28); font-weight: 600; font-variation-settings: 'opsz' 48, 'SOFT' 60; letter-spacing: -0.02em; }
.onb-dots { display: flex; justify-content: center; gap: 6px; padding: var(--s-3); }
.onb-dots span { width: 8px; height: 8px; border-radius: 4px; background: var(--line-strong); transition: width var(--d-micro), background var(--d-micro); }
.onb-dots span.is-on { width: 22px; background: var(--paprika); }
.lang-pick { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-3); }
.lang-pick button { min-height: 68px; border-radius: var(--r-lg); border: 1.5px solid var(--line); background: var(--surface); font-weight: 600; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; }
.lang-pick button small { font-weight: 500; color: var(--ink-3); font-size: var(--t-12); }
.lang-pick button.is-on { border-color: var(--paprika); background: var(--paprika-soft); }
.auth-stack { display: flex; flex-direction: column; gap: var(--s-3); }
.or { display: flex; align-items: center; gap: var(--s-3); color: var(--ink-3); font-size: var(--t-12); font-weight: 600; text-transform: uppercase; letter-spacing: .06em; }
.or::before, .or::after { content: ''; flex: 1; border-top: 1px solid var(--line); }
.phone-input { display: flex; gap: var(--s-2); }
.phone-input .cc { width: 88px; flex: none; }
.profile-head { display: flex; align-items: center; gap: var(--s-3); padding: var(--s-2) 0 var(--s-4); }
.profile-head .avatar { width: 56px; height: 56px; font-size: var(--t-18); }
.notif { display: flex; gap: var(--s-3); padding: var(--s-3) 0; border-bottom: 1px solid var(--line-faint); }
.notif .push-app { width: 36px; height: 36px; border-radius: 9px; background: var(--paprika); display: grid; place-content: center; color: #fff; flex: none; }
.notif.unread .notif-title { color: var(--ink); }
.notif-title { font-weight: 600; font-size: var(--t-15); }
.notif-body { font-size: var(--t-13); color: var(--ink-2); margin-top: 1px; }
.notif-time { font-size: var(--t-12); color: var(--ink-3); }
.review-tags { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.offer-card { display: flex; gap: var(--s-3); align-items: center; padding: var(--s-4); border-radius: var(--r-lg); background: var(--surface); border: 1px solid var(--line); }
.offer-card .food { width: 52px; height: 52px; }
.offer-card .food .glyph { width: 30px; height: 30px; }
.offer-card.is-restaurant { background: var(--saffron-soft); border-color: var(--saffron-line); }
.sheet .modal-title, .sheet-title { padding-right: var(--s-8); }
.confirm-art { width: 120px; height: 120px; border-radius: 40px; background: var(--basil-soft); color: var(--basil); display: grid; place-content: center; margin: var(--s-6) auto var(--s-4); animation: tf-in .5s var(--ease-spring); }
.confirm-art .ico { width: 56px; height: 56px; }
.map-mini { height: 150px; }