body[data-role="customer"] { --ink: #202522; --muted: #767c78; --brand: #00ae53; color: var(--ink); background: #f1f4f2; }
body[data-role="customer"] .app-shell { display: block; background: transparent; }
body[data-role="customer"] .main { padding: 0; }
body[data-role="customer"] .topbar { display: none; }
body[data-role="customer"] .auth-account { background: #128e82; color: #fff; padding: 12px 24px; }
body[data-role="customer"] .auth-account button { background: #ffffff18; color: #fff; border-color: #ffffff80; }
body[data-role="customer"] .auth-account button:hover { background: #ffffff30; }
.u-app { max-width: 760px; margin: auto; min-height: 100dvh; background: white; padding-bottom: 126px; }
.u-app * { letter-spacing: 0; }
.u-app button, .u-dialog button { color: inherit; background: none; font: inherit; }
.u-app button:disabled { cursor: not-allowed; opacity: .4; }
.u-app button:focus-visible, .u-app a:focus-visible, .u-dialog button:focus-visible { outline: 3px solid #127cde; outline-offset: 3px; }
.u-app input, .u-app select, .u-app textarea { min-width: 0; color: var(--ink); }
.u-app h1, .u-app h2, .u-dialog h2 { margin: 0; line-height: 1.35; overflow-wrap: anywhere; }
.u-app h1 { font-size: 26px; }
.u-app h2, .u-dialog h2 { font-size: 21px; }
.u-app p { line-height: 1.6; }
.u-app svg, .u-dialog svg { width: 22px; height: 22px; flex-shrink: 0; stroke-width: 1.8; vertical-align: middle; }
.u-app img { display: block; object-fit: cover; background: #eef4f0; }
.u-icon { width: 44px; height: 44px; flex: 0 0 44px; display: inline-grid; place-items: center; border-radius: 50%; padding: 0; }
.u-icon:hover { background: #edf7f1; }
.u-actions, .u-hero-top, .u-section-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.u-actions { gap: 8px; }
.u-hero-top { flex-wrap: wrap; }
.u-header-actions { flex-wrap: wrap; justify-content: flex-end; margin-left: auto; }
.u-app .u-header-link { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 6px; color: white; font-size: 13px; white-space: nowrap; }
.u-app .u-header-link:hover { background: #ffffff20; border-radius: 4px; }
body[data-role="customer"] .u-header-actions .auth-account { padding: 0 0 0 10px; margin: 0; border-left: 1px solid #ffffff60; max-width: 240px; gap: 8px; }
@media (max-width: 600px) {
  .u-header-actions { width: 100%; justify-content: flex-start; gap: 6px; }
  body[data-role="customer"] .u-header-actions .auth-account { margin-left: auto; max-width: 100%; }
}
.u-hero { background: #128e82; color: white; padding: 20px 24px 32px; border-radius: 0 0 48% 8% / 0 0 10% 4%; }
.u-brand { font-size: 26px; color: white; text-decoration: none; font-weight: 850; }
.u-hero .u-icon { background: #ffffff22; color: white; }
.u-app .u-address { display: flex; width: 100%; gap: 12px; align-items: center; padding: 16px; margin: 18px 0; text-align: left; max-width: 100%; background: #fff; color: #173c35; border: 2px solid #d6eee7; border-radius: 8px; }
.u-app .u-address:hover { background: #f0faf6; border-color: #acd9cb; }
.u-address > svg:first-child { width: 28px; height: 28px; color: #008654; }
.u-address small { display: block; font-size: 13px; color: #49685e; margin-bottom: 5px; font-weight: 600; }
.u-address strong { display: block; font-size: 20px; line-height: 1.4; overflow-wrap: anywhere; }
.u-address > span { min-width: 0; flex: 1; }
.u-address > svg:last-child { color: #008654; }
.u-search { display: flex; align-items: center; gap: 10px; background: #f5f5f5; color: #747b76; min-height: 48px; padding: 4px 12px; border-radius: 8px; margin: 0; }
.u-search input { flex: 1; width: 100%; border: none; outline: none; background: transparent; font-size: 16px; padding: 10px 0; }
.u-search:focus-within { outline: 2px solid #008650; }
.u-hero .u-search { min-height: 62px; background: white; border-radius: 18px; }
.u-hero .u-search .u-icon { color: #17483e; }
.u-hero-story { display: flex; align-items: center; gap: 20px; padding-top: 24px; min-height: 156px; }
.u-hero-story > div { flex: 1; min-width: 0; }
.u-hero-story h1 { font-size: 28px; }
.u-hero-story p { font-size: 15px; margin: 8px 0; max-width: 260px; }
.u-hero-story button { color: white; display: inline-flex; align-items: center; gap: 12px; font-size: 13px; padding: 8px 0; }
.u-hero-food { width: 148px; height: 148px; border-radius: 50%; border: 5px solid #ffffffb3; }
.u-section { padding: 22px 24px; }
.u-service { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 6px 0 20px; }
.u-service button { border-radius: 30px; min-height: 44px; background: #eff9f6; color: #205147; font-weight: 650; display: flex; align-items: center; justify-content: center; gap: 8px; }
.u-service .active { background: #174c42; color: white; }
.u-categories { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 20px 8px; padding: 8px 0 18px; }
.u-suggestions::-webkit-scrollbar { display: none; }
.u-category { min-width: 0; width: 100%; padding: 0; display: flex; flex-direction: column; align-items: center; gap: 8px; font-size: 14px !important; }
.u-category span { width: 100%; white-space: normal; overflow-wrap: anywhere; text-align: center; }
.u-category img { width: min(70px, 100%); height: auto; aspect-ratio: 1; border-radius: 50%; border: 3px solid transparent; }
.u-category.selected img { border-color: #008c54; }
.u-category.selected span { color: #00804c; font-weight: 700; }
.u-shortcuts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: 18px 0 30px; }
.u-shortcuts button { background: #f6f6f6; border-radius: 8px; min-width: 0; padding: 12px 8px 18px; display: flex; align-items: center; flex-direction: column; gap: 5px; text-align: center; }
.u-shortcuts img { width: 78px; height: 68px; border-radius: 50%; margin: -4px 0 8px; }
.u-shortcuts strong { font-size: 16px; overflow-wrap: anywhere; }
.u-shortcuts small { color: #6b746e; font-size: 12px; }
.u-section-heading { margin-bottom: 20px; }
.u-text { display: inline-flex; gap: 4px; align-items: center; color: #0870b8 !important; padding: 4px 0; font-size: 14px !important; flex-shrink: 0; }
.u-text svg { width: 17px; }
.u-popular { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; margin: 24px 0 40px; }
.u-popular button { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 8px; min-width: 0; padding: 0; }
.u-popular img { width: 86px; height: 86px; border-radius: 50%; }
.u-popular strong { font-size: 14px; font-weight: 550; overflow-wrap: anywhere; }
.u-popular small { color: #767c78; }
.u-topbar { display: flex; gap: 12px; align-items: center; padding: 16px 18px 12px; background: white; }
.u-topbar h1 { font-size: 22px; flex: 1; }
.u-sticky { position: sticky; top: 0; z-index: 5; background: white; border-bottom: 1px solid #eeeeee; }
.u-search-wrap { padding: 0 24px 12px; }
.u-sticky .u-categories { padding-left: 24px; padding-right: 24px; }
.u-filters { display: flex; gap: 8px; overflow-x: auto; padding: 4px 24px 16px; scrollbar-width: none; }
.u-pill { border: 1px solid #d6d9d7; border-radius: 30px; min-height: 42px; display: inline-flex; align-items: center; justify-content: center; padding: 8px 14px; gap: 6px; flex-shrink: 0; font-size: 14px !important; background: white !important; }
.u-pill.active { background: #eaf9ef !important; border-color: #00894e; color: #00804c; }
.u-pill select { border: none; background: transparent; font-size: 14px; max-width: 180px; }
.u-banner { display: flex; align-items: center; gap: 14px; padding: 16px 18px; background: #f2f8e9; border-radius: 8px; margin-bottom: 16px; }
.u-banner > span { min-width: 0; overflow-wrap: anywhere; }
.u-banner > span:nth-child(2) { flex: 1; }
.u-banner small { display: block; margin-top: 4px; font-size: 13px; color: #62715b; }
.u-restaurant-row { display: flex; width: 100%; gap: 18px; padding: 18px 0; border-bottom: 1px solid #eee; text-align: left; }
.u-restaurant-row > img { width: 142px; height: 148px; border-radius: 8px; flex-shrink: 0; }
.u-restaurant-copy { display: flex; min-width: 0; flex-direction: column; gap: 6px; }
.u-restaurant-copy > strong { font-size: 19px; line-height: 1.35; overflow-wrap: anywhere; }
.u-meta { color: #757c77; font-size: 14px; }
.u-star { color: #d6a800; }
.u-delivery { display: flex; align-items: center; gap: 6px; color: #008d55; font-size: 13px; }
.u-delivery svg { width: 17px; height: 17px; }
.u-mini-offer { border: 1px solid #e1e4e2; padding: 8px 12px; border-radius: 8px; display: inline-flex; align-items: center; gap: 10px; margin-top: 4px; font-size: 13px; }
.u-restaurant-hero { position: relative; height: 235px; }
.u-cover { width: 100%; height: 100%; }
.u-cover-actions { position: absolute; top: 20px; left: 20px; right: 20px; display: flex; justify-content: space-between; align-items: center; }
.u-cover-actions .u-icon { background: #ffffffec; color: #193c31; }
.u-cover-actions .u-icon[aria-pressed="true"] { color: #d70f64; }
.u-cover-actions .u-icon[aria-pressed="true"] svg { fill: #fcd7e6; }
.u-restaurant-summary { display: flex; gap: 16px; position: relative; margin: -50px 24px 0; padding: 16px; border-radius: 8px; background: white; box-shadow: 0 8px 30px #122c1510; }
.u-restaurant-summary img { width: 118px; height: 118px; border-radius: 8px; }
.u-restaurant-summary > div { min-width: 0; }
.u-restaurant-summary h1 { font-size: 24px; }
.u-restaurant-summary p { margin: 8px 0 0; font-size: 14px; }
.u-detail-actions { display: flex; gap: 10px; overflow-x: auto; margin-bottom: 20px; }
.u-menu-nav { display: flex; position: sticky; top: 0; z-index: 5; gap: 12px; background: #fffffffa; padding: 14px 24px; border-block: 1px solid #f0f1f0; }
.u-menu-nav .u-search { flex: 1; min-width: 0; }
.u-menu-nav .u-search input { font-size: 14px; }
.u-menu-nav select { appearance: none; min-width: 66px; }
.u-food-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 20px; padding-top: 22px; }
.u-food { min-width: 0; }
.u-food-image { position: relative; margin-bottom: 12px; }
.u-photo-button { display: block; width: 100%; padding: 0; }
.u-food-image img { width: 100%; aspect-ratio: 1; border-radius: 4px; }
.u-add { position: absolute; bottom: 8px; right: 8px; width: 42px; height: 42px; border-radius: 50%; background: #008c50 !important; color: white !important; display: grid; place-items: center; box-shadow: 0 3px 10px #12332225; }
.u-badge { position: absolute; top: 8px; left: 8px; font-size: 11px; padding: 5px 10px; border-radius: 18px; background: #00a858; color: white; pointer-events: none; }
.u-food-name { display: block; text-align: left; padding: 0; margin-bottom: 6px; font-size: 16px !important; line-height: 1.4; overflow-wrap: anywhere; }
.u-food > strong { display: block; font-size: 18px; }
.u-food > small { display: block; margin-top: 4px; color: #7a827c; font-size: 12px; }
.u-bottom { position: fixed; bottom: 0; left: 50%; transform: translateX(-50%); width: min(100%, 760px); padding: 18px 24px max(20px, env(safe-area-inset-bottom)); z-index: 10; background: white; box-shadow: 0 -8px 28px #17271f08; }
.u-primary { width: 100%; display: flex; align-items: center; justify-content: center; gap: 10px; min-height: 56px; border-radius: 32px; padding: 14px 18px; background: #00ae53 !important; color: white !important; font-size: 17px !important; font-weight: 700 !important; border: 0; }
.u-primary:hover { background: #009847 !important; }
.u-cart-cta { justify-content: space-between; font-size: 15px !important; }
.u-count { background: #008a41; min-width: 28px; height: 28px; display: grid; place-items: center; border-radius: 6px; }
.u-item-hero { position: relative; background: #f9faf9; }
.u-item-hero > img { width: 100%; height: 360px; object-fit: cover; }
.u-item-title { display: flex; justify-content: space-between; gap: 16px; align-items: start; }
.u-item-title > strong { font-size: 25px; white-space: nowrap; }
.u-item-description { border-bottom: 8px solid #f7f8f7; }
.u-note-section textarea { width: 100%; min-height: 116px; padding: 16px; border: 1px solid #d8ddd9; border-radius: 8px; resize: vertical; font: inherit; }
.u-note-section .u-section-heading small { background: #f6f6f6; padding: 5px 8px; border-radius: 12px; color: #767c78; white-space: nowrap; }
.u-quantity { display: flex; align-items: center; justify-content: center; gap: 36px; margin: 28px 0; }
.u-quantity .u-icon { color: #008750; background: #e4f9e9; }
.u-quantity .u-icon:last-child { background: #00ae53; color: white; }
.u-quantity output { min-width: 24px; text-align: center; font-weight: 700; }
.u-warning { background: #ffe149; display: flex; align-items: center; gap: 12px; padding: 20px; border-radius: 8px; margin: 0 0 26px; font-size: 15px; }
.u-cart-row { display: flex; gap: 14px; padding: 20px 0; border-bottom: 1px solid #f0f2f0; }
.u-cart-row > img { width: 64px; height: 84px; border-radius: 4px; }
.u-cart-row > div:nth-child(2) { flex: 1; min-width: 0; }
.u-cart-row strong { overflow-wrap: anywhere; }
.u-cart-row small { display: block; margin-top: 6px; color: #778179; overflow-wrap: anywhere; }
.u-cart-row .u-text { display: block; margin-top: 8px; }
.u-cart-price { text-align: right; }
.u-small-qty { display: flex; gap: 4px; align-items: center; margin-top: 10px; }
.u-small-qty .u-icon { width: 32px; height: 36px; flex-basis: 32px; color: #008c50; }
.u-small-qty span { min-width: 18px; text-align: center; font-size: 14px; }
.u-recommend-title { margin: 28px 0 18px !important; font-size: 17px !important; }
.u-suggestions { display: flex; gap: 18px; overflow-x: auto; padding: 4px 0 20px; scrollbar-width: none; }
.u-suggestions .u-food { flex: 0 0 148px; }
.u-checkout-details { margin-top: 26px; border-top: 1px solid #eee; padding-top: 24px; }
.u-checkout-details p { overflow-wrap: anywhere; }
.u-totals { margin: 24px 0; }
.u-totals > div { display: flex; justify-content: space-between; gap: 16px; margin: 14px 0; }
.u-totals dd { margin: 0; }
.u-grand-total { display: flex; justify-content: space-between; gap: 20px; align-items: center; margin-bottom: 16px; }
.u-grand-total strong { font-size: 26px; }
.u-view-cart { padding-bottom: 230px; }
.u-empty { padding: 60px 20px; text-align: center; color: #6e7871; }
.u-empty > svg { width: 48px; height: 48px; margin-bottom: 20px; }
.u-empty .u-primary { max-width: 260px; margin: 24px auto 0; }
.u-order { padding: 22px 0; border-bottom: 1px solid #e5eae6; }
.u-order .u-section-heading { margin-bottom: 10px; align-items: start; }
.u-order small { overflow-wrap: anywhere; color: #727a74; }
.u-order-status { color: #008f51; white-space: nowrap; }
.u-local-note { color: #997000; font-size: 13px; }
.u-dialog { width: min(440px, calc(100% - 32px)); padding: 24px; border: 0; border-radius: 8px; color: #202522; }
.u-dialog::backdrop { background: #12231baa; }
.u-address-map { width: 100%; height: 240px; background: #edf2ef; border-radius: 8px; overflow: hidden; }
.u-address-map iframe { display: block; width: 100%; height: 100%; border: 0; }
.u-google-map-link { display: inline-block; margin-top: 8px; color: #0870b8; font-size: 13px; }
.u-dialog { max-height: calc(100dvh - 32px); overflow-y: auto; }
#locationStatus { font-size: 13px; overflow-wrap: anywhere; }
#addressError { color: #b42318; font-size: 14px; }
.u-dialog p { line-height: 1.6; color: #66736a; }
.u-dialog input { width: 100%; margin: 12px 0 24px; padding: 14px; border: 1px solid #a8b6ac; border-radius: 4px; font: inherit; }
.u-dialog-actions { display: flex; gap: 12px; align-items: center; }
body[data-role="customer"] .toast { z-index: 40; bottom: 120px; max-width: calc(100% - 40px); white-space: normal; }
@media (min-width: 1000px) { .u-app { border-inline: 1px solid #e1e7e2; } .u-hero { padding-top: 28px; } .u-hero-story { min-height: 200px; } .u-hero-food { width: 180px; height: 180px; } }
@media (max-width: 480px) {
  body[data-role="customer"] .auth-account { padding-inline: 16px; }
  .u-section { padding: 20px 16px; }
  .u-hero { padding: 16px 16px 26px; }
  .u-hero-story { gap: 10px; }
  .u-hero-story h1 { font-size: 24px; }
  .u-hero-story p { font-size: 13px; }
  .u-hero-food { width: 102px; height: 102px; }
  .u-shortcuts { gap: 8px; }
  .u-shortcuts strong { font-size: 14px; }
  .u-shortcuts small { font-size: 11px; }
  .u-shortcuts img { width: 66px; height: 60px; }
  .u-popular { gap: 16px; }
  .u-restaurant-row { gap: 13px; }
  .u-restaurant-row > img { width: 110px; height: 136px; }
  .u-restaurant-copy > strong { font-size: 16px; }
  .u-meta { font-size: 12px; }
  .u-topbar { padding-left: 10px; }
  .u-search-wrap { padding-inline: 16px; }
  .u-sticky .u-categories, .u-filters { padding-inline: 16px; }
  .u-restaurant-summary { margin-inline: 16px; gap: 12px; padding: 12px; }
  .u-restaurant-summary img { width: 90px; height: 100px; }
  .u-restaurant-summary h1 { font-size: 21px; }
  .u-restaurant-summary p { font-size: 12px; }
  .u-menu-nav { padding-inline: 16px; gap: 8px; }
  .u-menu-nav .u-pill { padding-inline: 10px; }
  .u-menu-nav .u-search { padding-inline: 8px; gap: 5px; }
  .u-menu-nav .u-search > svg { display: none; }
  .u-food-grid { gap: 28px 16px; }
  .u-bottom { padding-inline: 16px; }
  .u-item-hero > img { height: 300px; }
  .u-item-title h1 { font-size: 23px; }
  .u-item-title > strong { font-size: 22px; }
  .u-cart-row { gap: 10px; }
  .u-cart-row > img { width: 48px; height: 70px; }
}

/* Order lifecycle */
.u-order-link { display:block; width:100%; text-align:left; background:white; color:inherit; cursor:pointer; }
.u-order-link .u-section-heading { flex-wrap:wrap; gap:10px; }
.u-tracking { max-width:740px; margin:auto; }
.u-tracking-heading { padding:18px 0; }
.u-tracking-heading h1 { font-size:26px; line-height:1.35; margin:10px 0; }
.u-tracking-heading p { color:#61716a; line-height:1.6; }
.u-tracking-symbol { display:flex; align-items:center; justify-content:center; width:64px; height:64px; border-radius:22px; background:#e7f7ee; color:#098653; float:right; }
.u-tracking-symbol svg { width:32px; height:32px; }
.u-eyebrow { font-size:11px; font-weight:800; letter-spacing:1.5px; }
.u-progress { display:flex; list-style:none; padding:12px 0 24px; margin:0; }
.u-progress li { position:relative; flex:1; display:flex; flex-direction:column; align-items:center; gap:12px; color:#8d9691; font-size:12px; text-align:center; }
.u-progress li::before { content:''; position:absolute; height:4px; background:#e7ebe9; top:10px; left:0; right:0; }
.u-progress li:first-child::before { left:50%; }
.u-progress li:last-child::before { right:50%; }
.u-progress li.reached { color:#07834e; font-weight:700; }
.u-progress li.reached::before { background:#22b975; }
.u-progress svg { position:relative; background:white; box-shadow:0 0 0 5px white; }
.u-tracking-card { padding:22px; border:1px solid #e3e9e5; border-radius:22px; margin:18px 0; background:white; }
.u-tracking-card h2 { margin:0; font-size:19px; }
.u-tracking-card details { border-top:1px solid #e3e9e5; margin-top:18px; padding-top:18px; }
.u-tracking-card summary { cursor:pointer; color:#087754; font-weight:700; }
.u-tracking-card p { line-height:1.6; }
.u-order-id { overflow-wrap:anywhere; }
.u-route>div { display:flex; gap:16px; padding:12px 0; }
.u-route svg { flex-shrink:0; color:#07834e; }
.u-route small { display:block; color:#68766e; margin-top:6px; overflow-wrap:anywhere; }
.u-driver-avatar { display:grid; place-items:center; background:#e7f7ee; border-radius:50%; width:52px; height:52px; }
.u-rating { text-align:center; }
.u-rating button { background:none; border:0; padding:6px; font-size:34px; color:#cbd3ce; cursor:pointer; }
.u-rating button.selected { color:#e7aa22; }
.u-tracking-map iframe { width:100%; height:300px; border:0; border-radius:20px; }
.u-tracking-map small { display:block; color:#68766e; padding:8px 0; }
@media(max-width:360px) { .u-tracking-card { padding:16px; } .u-tracking-heading h1 { font-size:22px; } .u-rating button { font-size:30px; } }