:root {
  --ink: #25201e;
  --muted: #827a76;
  --line: #ebe7e4;
  --orange: #ff6244;
  --orange-dark: #f05236;
  --cream: #fffaf7;
  --soft-peach: #fff0eb;
  --green: #209b6c;
  --shadow: 0 16px 42px rgba(67, 43, 32, .07);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; overflow-x: hidden; }
body { margin: 0; min-width: 320px; overflow-x: hidden; background: #fbfaf9; color: var(--ink); font-family: 'DM Sans', sans-serif; }
button, input { font: inherit; }
button { cursor: pointer; border: 0; color: inherit; }
h1, h2, h3, p { margin: 0; }
h1, h2, h3, .brand { font-family: Outfit, sans-serif; }
.app-shell { min-height: 100vh; display: flex; }

.sidebar { position: fixed; z-index: 20; inset: 0 auto 0 0; width: 246px; padding: 30px 17px 20px; background: #fff; border-right: 1px solid var(--line); display: flex; flex-direction: column; }
.brand { display: inline-flex; align-items: center; gap: 9px; padding: 0 11px; color: #2c2522; text-decoration: none; font-size: 23px; font-weight: 800; letter-spacing: -.9px; }
.brand-dot { color: var(--orange); }
.brand-mark { width: 29px; height: 29px; display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; gap: 3px; transform: rotate(-8deg); }
.brand-mark span { display: block; border-radius: 8px 3px 8px 3px; background: var(--orange); }
.brand-mark span:first-child { grid-row: span 2; border-radius: 10px 4px 10px 4px; }
.brand-mark span:nth-child(2) { background: #ffb59d; }
.brand-mark span:nth-child(3) { background: #ffa287; }
.main-nav { display: grid; gap: 5px; margin-top: 48px; }
.nav-item { position: relative; width: 100%; border-radius: 10px; padding: 12px 13px; background: transparent; text-align: left; color: #716a67; display: flex; gap: 13px; align-items: center; font-size: 14px; font-weight: 600; transition: .2s; }
.nav-item:hover { background: #fff5f1; color: var(--orange-dark); }
.nav-item.active { color: var(--orange-dark); background: #fff0eb; }
.nav-icon { width: 19px; font-size: 21px; line-height: 15px; text-align: center; font-family: Arial, sans-serif; font-weight: 400; }
.nav-badge { margin-left: auto; min-width: 19px; height: 19px; padding: 1px 5px; border-radius: 20px; color: #fff; background: var(--orange); text-align: center; font-size: 11px; line-height: 17px; }
.side-promo { margin: auto 2px 20px; padding: 17px 16px 15px; border-radius: 15px; background: #fff1eb; overflow: hidden; position: relative; }
.side-promo:after { content: '✦'; color: #ffc7b5; position: absolute; font-size: 70px; right: -14px; bottom: -35px; }
.promo-emoji { display: block; margin-bottom: 8px; font-size: 27px; position: relative; z-index: 1; }
.side-promo strong { position: relative; z-index: 1; font-family: Outfit; font-size: 14px; }
.side-promo p { position: relative; z-index: 1; margin: 4px 0 10px; color: #8d6c61; font-size: 11px; line-height: 1.45; }
.text-button { padding: 0; background: transparent; color: var(--orange-dark); font-size: 12px; font-weight: 700; }
.text-button span { margin-left: 3px; font-size: 15px; }
.sidebar-profile { border-top: 1px solid var(--line); padding: 17px 8px 0; display: flex; align-items: center; gap: 10px; }
.sidebar-guest { margin-top: auto; padding: 16px 10px 0; border-top: 1px solid var(--line); }
.sidebar-guest strong { display: block; font: 700 13px Outfit; }
.sidebar-guest p { margin: 4px 0 11px; color: var(--muted); font-size: 10px; line-height: 1.45; }
.side-login, .side-signup { width: 100%; min-height: 32px; border-radius: 8px; font-size: 10px; font-weight: 700; }
.side-login { margin-bottom: 7px; color: var(--orange-dark); background: #fff0eb; }
.side-signup { color: #7b716d; background: #fff; border: 1px solid var(--line); }
.avatar { flex: none; width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; font-size: 11px; font-weight: 800; }
.avatar-pink { color: #9e434e; background: linear-gradient(145deg, #fbd0d3, #e79aa0); }
.avatar-driver { color: white; background: linear-gradient(145deg, #3d776b, #1c3e36); }
.sidebar-profile strong { display: block; font-size: 12px; }
.sidebar-profile small { color: var(--muted); font-size: 10px; }
.more-button { margin-left: auto; padding: 5px; background: transparent; color: #8e8784; font-weight: 800; letter-spacing: 1px; }

.main-content { width: calc(100% - 246px); margin-left: 246px; min-height: 100vh; }
.topbar { height: 78px; padding: 0 clamp(25px, 4vw, 64px); background: rgba(255,255,255,.94); border-bottom: 1px solid #f0ece9; display: flex; align-items: center; justify-content: space-between; position: sticky; top: 0; z-index: 15; backdrop-filter: blur(10px); }
.location { display: flex; gap: 9px; align-items: center; }
.location-pin { width: 23px; height: 23px; display: grid; place-items: center; border-radius: 50% 50% 50% 0; transform: rotate(-45deg); color: var(--orange); background: #fff0eb; font-size: 9px; }
.location-pin::first-letter { transform: rotate(45deg); }
.location small { display: block; color: #99908d; font-size: 10px; line-height: 13px; }
.location strong { font-size: 12px; letter-spacing: -.1px; }
.location strong span { margin-left: 4px; color: #807874; }
.top-actions { display: flex; align-items: center; gap: 14px; }
.top-auth-actions { display: flex; align-items: center; gap: 6px; }
.top-login, .top-signup { min-height: 31px; padding: 6px 10px; border-radius: 8px; font-size: 11px; font-weight: 700; }
.top-login { color: var(--orange-dark); background: transparent; }
.top-signup { color: white; background: var(--orange); }
.top-user { align-items: center; gap: 6px; color: #5f5652; font-size: 11px; }
.top-user:not(.hidden) { display: flex; }
.top-user .avatar { font-style: normal; }
.top-user button { width: 25px; height: 25px; border-radius: 7px; color: #756b67; background: #f7f4f2; font-size: 14px; }
.icon-button { position: relative; background: transparent; padding: 4px; color: #5f5754; font-size: 22px; line-height: 20px; }
.notification span { position: absolute; top: 2px; right: 3px; width: 6px; height: 6px; border-radius: 50%; background: var(--orange); border: 1px solid white; }
.cart-button { padding: 9px 12px; border-radius: 10px; color: var(--orange-dark); background: #fff0eb; display: flex; gap: 7px; align-items: center; font-size: 12px; }
.cart-button b { min-width: 17px; height: 17px; border-radius: 50%; display: grid; place-items: center; background: var(--orange); color: white; font-size: 10px; }
.mobile-menu { display: none; background: transparent; font-size: 22px; }

.page { display: none; max-width: 1395px; margin: auto; padding: 40px clamp(25px, 4vw, 64px) 60px; }
.page.active { display: block; }
.hidden { display: none !important; }
.auth-only { display: none; }
.is-authenticated .auth-only { display: block; }
.is-authenticated .auth-only.hidden { display: none !important; }
.login-required-nav, .auth-cart { display: none; }
.is-authenticated .login-required-nav { display: flex; }
.is-authenticated .auth-cart { display: flex; }
.role-switcher, .role-popover { display: none !important; }
.welcome-row, .dashboard-header { position: relative; display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 24px; }
.eyebrow { margin-bottom: 6px; color: #a29a96; font-size: 10px; font-weight: 700; letter-spacing: 1.3px; }
h1 { font-size: clamp(27px, 3vw, 37px); letter-spacing: -1.25px; line-height: 1.1; }
h1 span { color: var(--orange); }
h2 { font-size: 21px; letter-spacing: -.5px; }
.role-switcher { padding: 6px 9px 6px 6px; min-width: 142px; background: #fff; border: 1px solid var(--line); border-radius: 12px; display: flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 700; box-shadow: 0 3px 8px rgba(70,40,20,.025); }
.avatar-mini { width: 26px; height: 26px; font-size: 8px; }
.chevron { margin-left: auto; color: #9c9692; }
.role-popover { display: none; position: absolute; z-index: 10; right: 0; top: 48px; width: 256px; padding: 11px; background: #fff; border: 1px solid var(--line); border-radius: 15px; box-shadow: 0 22px 50px rgba(50,31,21,.15); }
.role-popover.open { display: block; animation: pop .18s ease-out; }
@keyframes pop { from { opacity: 0; transform: translateY(-6px) scale(.98); } to { opacity: 1; transform: translateY(0) scale(1); } }
.role-popover > p { padding: 5px 8px 9px; color: #958c88; font-size: 10px; font-weight: 600; }
.role-option { width: 100%; padding: 9px 8px; display: flex; gap: 9px; align-items: center; background: transparent; border-radius: 10px; text-align: left; }
.role-option:hover { background: #fff5f1; }
.role-option.active { background: #fff1ec; }
.role-option strong, .role-option small { display: block; }
.role-option strong { font-size: 12px; }
.role-option small { margin-top: 2px; color: #9a918d; font-size: 10px; }
.role-option i { display: none; margin-left: auto; color: var(--orange); font-style: normal; font-weight: 900; }
.role-option.active i { display: block; }
.role-icon { width: 29px; height: 29px; display: grid; place-items: center; border-radius: 8px; font-size: 14px; font-weight: 800; }
.customer-icon { color: #eb6d54; background: #ffe1d8; }.driver-icon { color: #2f8c79; background: #d9f2e9; }.restaurant-icon { color: #9e6f26; background: #ffefcc; }.admin-icon { color: #6052af; background: #e8e4ff; }

.search-panel { display: flex; gap: 10px; margin-bottom: 24px; }
.search-field { flex: 1; height: 50px; padding: 0 16px; background: #fff; border: 1px solid var(--line); border-radius: 12px; display: flex; align-items: center; gap: 10px; box-shadow: 0 4px 10px rgba(43,30,22,.02); }
.search-field span { color: #958d89; font-family: Arial; font-size: 25px; transform: rotate(-20deg); }
.search-field input { min-width: 0; width: 100%; border: 0; outline: none; color: var(--ink); font-size: 13px; background: transparent; }
.search-field input::placeholder { color: #aaa29e; }
.search-filter { width: 90px; border-radius: 12px; background: #fff; border: 1px solid var(--line); color: #655e5a; font-weight: 700; font-size: 12px; }
.service-cards { display: grid; grid-template-columns: 1.07fr .93fr; gap: 18px; }
.service-card { position: relative; min-height: 188px; overflow: hidden; padding: 24px 27px; border-radius: 17px; text-align: left; transition: transform .2s, box-shadow .2s; }
.service-card:hover { transform: translateY(-3px); box-shadow: 0 15px 24px rgba(92,50,27,.10); }
.food-service { color: #fff; background: linear-gradient(112deg, #f96d4f, #ff8a64); }
.ride-service { color: #374442; background: linear-gradient(112deg, #bbe6d7, #d9f3e8); }
.service-copy { position: relative; z-index: 3; }
.service-icon { display: grid; width: 27px; height: 27px; margin-bottom: 6px; place-items: center; border-radius: 8px; background: rgba(255,255,255,.2); font-size: 16px; }
.ride-service .service-icon { background: rgba(255,255,255,.5); }
.service-card h2 { font-size: 22px; letter-spacing: -.55px; }
.service-card p { margin-top: 6px; font-size: 12px; line-height: 1.45; opacity: .86; }
.service-action { display: inline-block; margin-top: 13px; font-size: 12px; font-weight: 700; }
.service-action b { margin-left: 3px; font-size: 15px; }
.food-illustration { position: absolute; z-index: 1; right: 20px; bottom: -4px; width: 230px; height: 180px; }
.sun { position: absolute; right: 6px; top: 7px; width: 124px; height: 124px; border-radius: 50%; background: #ffa182; opacity: .7; }
.bowl { position: absolute; right: 28px; bottom: 4px; width: 152px; height: 72px; overflow: hidden; border-radius: 13px 13px 60px 60px; background: #fff5df; box-shadow: inset 0 9px 0 #eac69d, 0 9px 0 rgba(174,69,38,.12); transform: rotate(-5deg); }
.bowl:before { content: ''; position: absolute; top: -34px; left: 10px; width: 130px; height: 65px; border-radius: 50%; background: #7b3c26; border: 9px solid #f9e2b7; }
.bowl span { position: relative; z-index: 2; left: 39px; top: 10px; color: #8fba5e; margin: 2px; font-size: 15px; }
.chopsticks { position: absolute; z-index: 4; top: 43px; right: 1px; width: 130px; height: 6px; background: #713923; transform: rotate(-19deg); border-radius: 10px; box-shadow: 0 11px 0 #8c4b2d; }
.leaf { position: absolute; color: #d3e678; font-size: 42px; }.leaf-a { top: 51px; left: 42px; }.leaf-b { top: 102px; right: 13px; transform: rotate(25deg); }
.ride-illustration { position: absolute; right: 0; bottom: 0; width: 265px; height: 180px; overflow: hidden; }
.route { position: absolute; border: 3px solid rgba(255,255,255,.55); border-left: 0; border-bottom: 0; border-radius: 0 100px 0 0; transform: rotate(-23deg); }.route-one { width: 162px; height: 83px; right: -30px; bottom: 33px; }.route-two { width: 142px; height: 71px; right: -36px; bottom: 4px; border-color: rgba(255,255,255,.45); }
.building { position: absolute; bottom: 0; background: rgba(91,161,140,.3); }.building:after { content: ''; position: absolute; inset: 11px 6px; background: repeating-linear-gradient(0deg, transparent 0 8px, rgba(255,255,255,.48) 8px 10px); }.building-one { right: 23px; width: 32px; height: 110px; }.building-two { right: 73px; width: 42px; height: 70px; }
.moto { position: absolute; z-index: 2; right: 61px; bottom: 21px; width: 113px; height: 80px; transform: rotate(-2deg); }.bike-body { position: absolute; bottom: 13px; left: 22px; width: 75px; height: 22px; background: #253532; border-radius: 20px 8px 14px 8px; transform: skew(-20deg); }.bike-body:after { content: ''; position: absolute; top: -19px; right: 0; width: 31px; height: 24px; border-left: 5px solid #253532; transform: skew(23deg); }.moto i { position: absolute; z-index: 2; bottom: 1px; width: 20px; height: 20px; border: 6px solid #455d56; border-radius: 50%; background: #cbe7da; }.moto i:last-child { right: 8px; }.moto i:nth-child(3) { left: 16px; }.rider { position: absolute; z-index: 2; width: 34px; height: 39px; left: 37px; top: 2px; border-radius: 14px 16px 7px 8px; background: #f56a49; transform: rotate(-8deg); }.rider:before { content: ''; position: absolute; top: -15px; left: 6px; width: 19px; height: 19px; border: 3px solid #3d5550; border-radius: 50%; background: #f3c2a2; }.rider:after { content: ''; position: absolute; top: -18px; left: 2px; width: 27px; height: 10px; border-radius: 10px 10px 2px 2px; background: #3d5550; }

.order-tracker { margin-top: 30px; border: 1px solid var(--line); border-radius: 17px; overflow: hidden; background: #fff; box-shadow: 0 6px 18px rgba(45,30,21,.025); }
.tracker-heading { padding: 19px 23px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--line); }.tracker-heading .eyebrow { margin-bottom: 3px; }.tracker-heading h2 { display: inline; font-size: 16px; }.tracker-heading p:not(.eyebrow) { margin-top: 5px; color: #887f7b; font-size: 11px; }.tracker-heading p strong { color: #6f6662; }.status-pill { margin-left: 7px; padding: 4px 7px; vertical-align: 2px; display: inline-block; border-radius: 20px; color: #df6a32; background: #fff0e4; font-family: 'DM Sans'; font-size: 9px; letter-spacing: 0; }.outline-button { padding: 8px 10px; border: 1px solid #f2cfc5; border-radius: 8px; background: #fff; color: var(--orange-dark); font-size: 11px; font-weight: 700; }.outline-button span { padding-left: 3px; font-size: 14px; }
.tracker-body { display: grid; grid-template-columns: 1.2fr .8fr; min-height: 188px; }.map-art { position: relative; overflow: hidden; min-height: 188px; background: #e7f2ec; }.map-road { position: absolute; background: #fbf9f4; box-shadow: 0 0 0 1px rgba(189,198,186,.15); }.r1 { top: 48%; left: -4%; width: 108%; height: 22px; transform: rotate(-11deg); }.r2 { top: 8%; left: 43%; width: 20px; height: 110%; transform: rotate(17deg); }.r3 { top: 34%; left: -5%; width: 76%; height: 13px; transform: rotate(33deg); }.map-block { position: absolute; border-radius: 2px; background: #c6d8c9; transform: rotate(-11deg); }.b1 { width: 95px; height: 45px; left: 8%; top: 18%; }.b2 { width: 87px; height: 38px; right: 15%; top: 24%; }.b3 { width: 118px; height: 46px; left: 31%; bottom: 9%; }.map-tree { position: absolute; color: #80b899; font-size: 21px; }.t1 { left: 21%; top: 60%; }.t2 { right: 11%; bottom: 18%; }.t3 { right: 33%; top: 65%; }.route-line { position: absolute; z-index: 3; top: 56%; left: 13%; height: 0; width: 65%; border-top: 3px dashed var(--orange); transform: rotate(-8deg); }.route-line i { position: absolute; top: -4px; width: 8px; height: 8px; border: 2px solid #fff; border-radius: 50%; background: var(--orange); }.route-line i:nth-child(1) { left: 8%; }.route-line i:nth-child(2) { left: 28%; }.route-line i:nth-child(3) { left: 47%; }.route-line i:nth-child(4) { left: 65%; }.route-line i:nth-child(5) { left: 82%; }.route-line i:nth-child(6) { left: 100%; }.map-marker { position: absolute; z-index: 4; display: grid; place-items: center; font-size: 14px; }.map-marker span { position: absolute; white-space: nowrap; font-family: 'DM Sans'; font-size: 9px; font-weight: 700; }.store-marker { left: 11%; top: 53%; width: 23px; height: 23px; border-radius: 50%; color: #fff; background: var(--orange); box-shadow: 0 3px 8px #cd725c; }.store-marker span { top: 25px; color: #785c53; }.driver-marker { left: 51%; top: 41%; width: 34px; height: 34px; border-radius: 50%; background: #fff; box-shadow: 0 4px 12px rgba(46,67,54,.2); font-size: 17px; }.driver-marker span { top: -17px; padding: 3px 5px; border-radius: 4px; color: #386051; background: white; box-shadow: 0 2px 6px rgba(40,70,50,.12); }.home-marker { right: 12%; bottom: 25%; width: 23px; height: 23px; border-radius: 8px 8px 8px 0; color: white; background: #4b786a; transform: rotate(-5deg); }.home-marker::first-letter { transform: rotate(5deg); }
.driver-info { padding: 21px 25px; }.driver-head { display: flex; align-items: center; gap: 10px; }.driver-head h3 { font-size: 13px; }.rating { margin-left: 4px; color: #f2a42e; font-family: 'DM Sans'; font-size: 10px; }.driver-head p { margin-top: 3px; color: #8b817e; font-size: 10px; }.driver-head p strong { color: #625955; }.call-button { margin-left: auto; width: 31px; height: 31px; border-radius: 8px; color: var(--orange); background: #fff0eb; font-size: 18px; transform: rotate(-15deg); }.delivery-time { margin-top: 16px; padding: 9px 10px; border-radius: 8px; display: flex; gap: 8px; align-items: center; background: #f8faf8; }.delivery-time span { font-size: 16px; }.delivery-time small { display: block; color: #98908c; font-size: 9px; }.delivery-time strong { display: block; margin-top: 2px; font-size: 12px; }.delivery-time em { color: #e26a3b; font-style: normal; font-size: 10px; }.progress-steps { margin: 16px 5px 0; display: flex; align-items: center; justify-content: space-between; }.progress-steps span { position: relative; z-index: 1; width: 18px; height: 18px; display: grid; place-items: center; border: 1.5px solid #d7d2cf; border-radius: 50%; color: #aaa29e; background: white; font-size: 9px; }.progress-steps span.done { color: #fff; border-color: #37a278; background: #37a278; }.progress-steps span.current { border-color: var(--orange); color: var(--orange); font-size: 15px; }.progress-steps i { width: calc(33.33% - 18px); height: 2px; background: #e5e0dd; }.progress-steps i.done { background: #37a278; }.step-labels { margin: 5px -4px 0; display: flex; justify-content: space-between; }.step-labels small { color: #938a86; font-size: 8px; }.step-labels small:nth-child(3) { color: var(--orange); font-weight: 700; }

.restaurants-section { padding-top: 35px; }.section-heading { display: flex; align-items: center; justify-content: space-between; }.section-heading .eyebrow { margin-bottom: 3px; }.section-heading h2 { font-size: 20px; }.chip-row { display: flex; gap: 8px; margin: 16px 0 18px; overflow-x: auto; padding-bottom: 2px; }.chip { padding: 7px 13px; white-space: nowrap; border: 1px solid #eae5e2; border-radius: 18px; background: #fff; color: #776e6a; font-size: 11px; font-weight: 600; }.chip:hover, .chip.active { color: var(--orange-dark); border-color: #ffd6ca; background: #fff0eb; }.restaurant-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }.restaurant-card { overflow: hidden; border-radius: 13px; background: #fff; border: 1px solid #eeeae7; box-shadow: 0 4px 10px rgba(50,31,20,.02); transition: .2s; }.restaurant-card:hover { transform: translateY(-3px); box-shadow: var(--shadow); }.food-photo { height: 126px; position: relative; overflow: hidden; }.photo-bun { background: linear-gradient(140deg,#b16236,#f4bc60 55%,#643722); }.photo-pizza { background: linear-gradient(135deg,#854427,#f4a449); }.photo-comtam { background: linear-gradient(135deg,#c78143,#f1d1a0); }.photo-coffee { background: linear-gradient(135deg,#945838,#e2c19b); }.photo-label { position: absolute; z-index: 3; left: 9px; top: 9px; padding: 4px 6px; border-radius: 4px; color: #bb4c32; background: #fff4e5; font-size: 8px; font-weight: 800; }.yellow-label { color: #815d15; background: #ffdc70; }.heart { position: absolute; z-index: 4; top: 8px; right: 8px; width: 27px; height: 27px; border-radius: 50%; background: rgba(255,255,255,.93); color: #554c48; font-family: Arial; font-size: 19px; line-height: 23px; }.heart.liked { color: var(--orange); }.dish { position: absolute; }.bowl-dish { width: 105px; height: 82px; left: calc(50% - 52px); top: 25px; border: 9px solid #fff0d5; border-radius: 50%; background: radial-gradient(circle at 40% 40%, #c47845 0 7px, transparent 8px), radial-gradient(circle at 62% 55%,#619952 0 6px,transparent 7px), #713d25; box-shadow: 0 8px 12px rgba(51,18,4,.35); transform: rotate(-11deg); }.bowl-dish:after { content: ''; position: absolute; inset: 11px; border: 2px dotted #f6c883; border-radius: 50%; }.pizza-dish { position: absolute; left: calc(50% - 47px); top: 18px; width: 105px; height: 105px; border: 8px solid #f5ce7f; border-radius: 50%; background: radial-gradient(circle at 36% 39%, #c64825 0 8px, transparent 9px), radial-gradient(circle at 65% 65%, #c64825 0 7px, transparent 8px), radial-gradient(circle at 66% 28%, #54934f 0 4px, transparent 5px), #e77835; box-shadow: 0 8px 12px rgba(76,35,7,.28); }.pizza-dish:before, .pizza-dish:after { content:''; position:absolute; background:#f5c062; height:2px; width:91px; top:45px; transform:rotate(45deg); }.pizza-dish:after { transform:rotate(-45deg); }.rice-dish { position: absolute; left: calc(50% - 56px); top: 26px; width: 115px; height: 75px; border: 7px solid #f4f3e7; border-radius: 50%; background: radial-gradient(ellipse at 33% 48%,#94522e 0 17px,transparent 18px), radial-gradient(ellipse at 67% 54%,#5c923c 0 13px,transparent 14px), #f4ecd4; box-shadow: 0 8px 12px rgba(80,42,18,.25); }.coffee-cup { position:absolute; left:calc(50% - 34px); top:24px; width:66px; height:82px; border-radius:5px 5px 25px 25px; background:linear-gradient(90deg,#f0e0c8,#fff5e5 50%,#d9b58a); box-shadow:0 8px 12px rgba(70,37,17,.3); }.coffee-cup:before { content:''; position:absolute; top:-13px; left:4px; width:58px; height:27px; border:7px solid #e8d0ae; border-radius:50%; background:#4e2e22; }.coffee-cup:after { content:'NHAM'; position:absolute; top:35px; left:0; width:100%; color:#bd6840; font-size:9px; font-weight:900; text-align:center; }.coffee-cup span { position:absolute; right:-17px; top:20px; width:22px; height:30px; border:6px solid #ead7bb; border-left:0; border-radius:0 18px 18px 0; }.restaurant-card-content { padding: 11px 12px 12px; }.restaurant-title { display: flex; gap: 4px; justify-content: space-between; align-items: center; }.restaurant-title h3 { font-size: 13px; letter-spacing: -.2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }.restaurant-title span { white-space: nowrap; color: #d98422; font-size: 10px; font-weight: 700; }.restaurant-card-content > p { margin: 4px 0 7px; color: #8c827f; font-size: 10px; }.restaurant-meta { display: flex; gap: 4px; color: #7d746f; font-size: 9px; white-space: nowrap; }.restaurant-meta span:first-child { color: #419878; }

/* Role dashboards */
.dashboard-header { margin-bottom: 25px; }.dashboard-header > div > p:not(.eyebrow) { margin-top: 7px; color: #817874; font-size: 12px; }.online-toggle, .date-button { padding: 10px 13px; border-radius: 10px; background: #fff; border: 1px solid var(--line); font-size: 11px; font-weight: 700; }.online-toggle { color: #288765; }.online-toggle span { width: 8px; height: 8px; display: inline-block; margin-right: 4px; border-radius: 50%; background: #34b985; box-shadow: 0 0 0 3px #dff4eb; }.date-button { color: #625a57; }.stats-grid { display: grid; grid-template-columns: 1.1fr 1fr 1fr; gap: 15px; margin-bottom: 22px; }.stat-card { min-height: 123px; padding: 20px; border: 1px solid var(--line); border-radius: 15px; background: #fff; }.stat-card.orange { color: #fff; border: 0; background: linear-gradient(135deg, #f86e4d, #ff9b68); }.stat-card small { display: block; color: #938985; font-size: 9px; font-weight: 700; letter-spacing: .8px; }.stat-card.orange small { color: #ffe1d6; }.stat-card strong { display: block; margin: 10px 0 5px; font: 700 26px Outfit; letter-spacing: -.8px; }.stat-card strong em { font: 500 12px 'DM Sans'; color: #a19894; }.stat-card.orange strong { color:#fff; }.stat-card span { color: #8a817d; font-size: 10px; }.stat-card.orange span { color: #fff0e9; }.driver-layout, .restaurant-layout { display: grid; grid-template-columns: minmax(0,1.45fr) minmax(245px,.55fr); gap: 20px; }.ride-queue, .incoming-orders, .driver-side-card, .menu-performance { border: 1px solid var(--line); border-radius: 15px; background: #fff; }.ride-queue, .incoming-orders { padding: 19px; }.pulse-dot { display: inline-block; width: 8px; height: 8px; margin-left: 4px; border-radius: 50%; background: var(--orange); box-shadow: 0 0 0 4px #ffede7; vertical-align: 2px; }.ride-request { margin-top: 16px; border: 1px solid #ece7e4; border-radius: 12px; overflow: hidden; }.request-map { height: 80px; position: relative; background: #edf5f0; }.request-map:before,.request-map:after { content:''; position:absolute; background:#fffdf9; }.request-map:before { top:32px; left:-5%; height:14px; width:110%; transform:rotate(3deg); }.request-map:after { top:-11px; left:48%; height:102px; width:13px; transform:rotate(-18deg); }.route-line.mini { top: 43px; left: 22%; width: 58%; transform: rotate(-3deg); }.point { position:absolute; z-index:4; top:34px; width:20px; height:20px; display:grid; place-items:center; color:#fff; border-radius:50%; font-size:9px; font-weight:800; }.pickup { left:20%; background:#38a47b; }.dropoff { right:19%; background:var(--orange); }.request-main { padding: 13px 15px; display: flex; align-items: center; justify-content: space-between; }.request-type { padding: 3px 5px; border-radius: 4px; color: #d95b3c; background: #ffece6; font-size: 9px; font-weight: 700; }.ride-tag { color:#398469; background:#e2f4ed; }.request-main h3 { margin: 6px 0 3px; font-size: 14px; }.request-main p { color: #817873; font-size: 10px; }.request-price { text-align:right; }.request-price strong { display:block; color:var(--orange-dark); font: 700 16px Outfit; }.request-price small { color:#98908c; font-size:9px; }.request-actions { padding: 0 14px 13px; display: flex; gap: 8px; }.ghost-button, .primary-button { min-height: 35px; padding: 8px 13px; border-radius: 8px; font-size: 11px; font-weight: 700; }.ghost-button { flex:1; background:#fff5f1; color:var(--orange-dark); }.primary-button { color:#fff; background:var(--orange); box-shadow:0 4px 9px rgba(241,95,67,.2); }.primary-button:hover { background: var(--orange-dark); }.request-actions .primary-button { flex:2; }.compact-request { min-height: 91px; display:flex; align-items:center; padding: 0 15px; }.compact-request .request-main { flex:1; padding:0; }.small-button { padding:8px 10px; }.driver-side-card, .menu-performance { padding: 20px; }.driver-side-card h3, .menu-performance h3 { font-size: 16px; }.goal-bar { height: 8px; margin: 17px 0 7px; overflow:hidden; border-radius:20px; background:#edf0ee; }.goal-bar span { display:block; width:80%; height:100%; border-radius:inherit; background:linear-gradient(90deg,#52b68c,#2c9872); }.driver-side-card > p:not(.eyebrow) { color:#7e7671; font-size:11px; }.driver-side-card > p strong { color:#277f61; }.bonus-box { margin-top:17px; padding:10px; border-radius:9px; color:#6b5a26; background:#fff6d9; font-size:10px; line-height:1.55; }.bonus-box strong { display:block; font-size:12px; }.verified { display:inline-grid; width:20px; height:20px; place-items:center; border-radius:50%; color:#fff!important; background:#55ac8d; font-family:DM Sans; font-size:12px; vertical-align:3px; }.restaurant-layout { grid-template-columns: minmax(0,1.5fr) minmax(245px,.5fr); }.count-bubble { display:inline-grid; width:18px; height:18px; place-items:center; border-radius:50%; color:#fff; background:var(--orange); font:700 10px DM Sans; vertical-align:2px; }.kitchen-order { margin-top:12px; display:grid; grid-template-columns:88px 1fr 110px; align-items:center; gap:12px; padding:13px; border:1px solid #ede9e6; border-radius:11px; }.order-number { display:grid; gap:4px; }.order-number strong { font-size:12px; }.order-number span { color:#958b87; font-size:9px; }.order-items h3 { font-size:13px; }.order-items h3 span { color:#a09792; font:500 10px DM Sans; }.order-items p { margin-top:3px; color:#7e7571; font-size:10px; }.order-items .order-note { color:#ba6849; }.order-total { text-align:right; }.order-total > strong { display:block; margin-bottom:8px; font:700 14px Outfit; }.order-total .primary-button { font-size:10px; }.menu-performance ol { margin:16px 0 0; padding:0; list-style:none; display:grid; gap:14px; }.menu-performance li { display:flex; gap:9px; align-items:center; }.menu-performance li>span { width:20px; height:20px; display:grid; place-items:center; border-radius:5px; color:#be623c; background:#fff0e9; font-size:10px; font-weight:800; }.menu-performance li>div { flex:1; }.menu-performance li strong { display:block; font:700 11px Outfit; }.menu-performance li small { color:#9a918c; font-size:9px; }.menu-performance li b { font-size:10px; }

/* Admin */
.admin-stats { display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin-bottom:22px; }.admin-stat { min-height:104px; padding:16px; display:flex; gap:11px; align-items:flex-start; border:1px solid var(--line); border-radius:13px; background:#fff; }.admin-stat-icon { width:34px; height:34px; display:grid; place-items:center; border-radius:9px; font-size:17px; }.peach { color:#e96043; background:#fff0eb; }.yellow { color:#c18a21; background:#fff5cf; }.green { background:#ddf4eb; }.blue { color:#5e61bf; background:#e9eafe; }.admin-stat small { display:block; color:#9b928e; font-size:8px; font-weight:700; letter-spacing:.6px; }.admin-stat strong { display:block; margin:5px 0 4px; font:700 20px Outfit; letter-spacing:-.5px; }.admin-stat em { color:#32a77d; font-size:9px; font-style:normal; }.admin-grid { display:grid; grid-template-columns:minmax(0,1.35fr) minmax(280px,.65fr); gap:20px; }.chart-card, .live-card { padding:20px; border:1px solid var(--line); border-radius:15px; background:#fff; }.chart-card .section-heading h2, .live-card .section-heading h2 { font-size:16px; }.chart-card .section-heading p, .live-card .section-heading p { margin-top:3px; color:#988f8b; font-size:10px; }.legend { display:flex; gap:9px; color:#8d8581; font-size:9px; }.legend i { width:9px; height:3px; margin-right:3px; display:inline-block; border-radius:4px; background:var(--orange); vertical-align:2px; }.legend span:last-child i { background:#b8aaa5; }.chart { display:flex; gap:9px; height:250px; margin-top:20px; }.chart-y { width:28px; padding:2px 0 23px; display:flex; flex-direction:column; justify-content:space-between; color:#a39b97; font-size:8px; text-align:right; }.chart-area { flex:1; position:relative; }.chart-gridline { position:absolute; left:0; width:100%; border-top:1px dashed #ede9e6; }.g1{top:0}.g2{top:25%}.g3{top:50%}.g4{top:75%}.chart svg { position:absolute; top:0; width:100%; height:calc(100% - 24px); }.chart-labels { position:absolute; left:0; right:0; bottom:1px; display:flex; justify-content:space-between; color:#a39b97; font-size:8px; }.live-dot { display:inline-block; width:6px; height:6px; border-radius:50%; background:#32ac7e; }.activity-list { margin-top:15px; display:grid; }.activity { padding:12px 0; display:flex; gap:9px; align-items:center; border-bottom:1px solid #f0edeb; }.activity:last-child { border:0; }.activity-icon { width:29px; height:29px; display:grid; place-items:center; border-radius:8px; background:#fff0e9; font-size:14px; }.blue-bg { background:#e8f1ff; }.green-bg { color:#2b9e77; background:#e2f4eb; }.yellow-bg { background:#fff3cf; }.activity p { flex:1; line-height:1.35; }.activity strong { font-size:10px; }.activity small { color:#928985; font-size:9px; }.activity time { color:#a49b97; font-size:8px; white-space:nowrap; }

.simple-page { min-height: calc(100vh - 78px); }.empty-state { max-width:520px; margin:30px auto; padding:43px 20px; text-align:center; border:1px dashed #e9deda; border-radius:17px; background:#fff; }.empty-state > span { width:55px; height:55px; margin:auto auto 13px; display:grid; place-items:center; border-radius:50%; background:#fff0eb; font-size:25px; }.empty-state h2 { font-size:18px; }.empty-state p { margin:7px 0 18px; color:#8b817d; font-size:12px; }.support-cards { display:flex; gap:14px; margin-top:23px; }.support-cards button { width:200px; padding:18px; display:grid; text-align:left; border-radius:13px; background:#fff; border:1px solid var(--line); }.support-cards span { margin-bottom:7px; color:var(--orange); font-size:23px; }.support-cards strong { font-family:Outfit; font-size:15px; }.support-cards small { margin-top:3px; color:#8a817c; font-size:11px; }

.modal-backdrop { visibility:hidden; opacity:0; position:fixed; z-index:50; inset:0; padding:20px; display:grid; place-items:center; background:rgba(35,27,24,.42); transition:.18s; }.modal-backdrop.open { visibility:visible; opacity:1; }.ride-modal, .cart-modal, .auth-modal { width:min(100%,430px); padding:25px; position:relative; border-radius:18px; background:#fff; box-shadow:0 20px 60px rgba(0,0,0,.22); transform:translateY(10px); transition:.18s; }.modal-backdrop.open .ride-modal, .modal-backdrop.open .cart-modal, .modal-backdrop.open .auth-modal { transform:translateY(0); }.modal-close { position:absolute; right:15px; top:12px; width:30px; height:30px; border-radius:50%; background:#f7f4f2; color:#665e5a; font-size:23px; line-height:20px; }.ride-modal h2,.cart-modal h2 { margin-bottom:17px; }.trip-input { height:46px; margin:8px 0; padding:0 11px; display:flex; align-items:center; gap:10px; border:1px solid var(--line); border-radius:9px; }.trip-input input { min-width:0; flex:1; border:0; outline:0; color:#554d49; font-size:12px; }.origin-dot,.destination-dot { width:9px; height:9px; border-radius:50%; background:#3a9d7a; }.destination-dot { border-radius:2px; background:var(--orange); }.ride-options { display:grid; gap:8px; margin:16px 0; }.ride-option { padding:11px; display:flex; align-items:center; gap:11px; border:1px solid var(--line); border-radius:10px; background:#fff; text-align:left; }.ride-option.selected { border-color:#ffb8a7; background:#fffaf8; }.ride-vehicle { font-size:24px; }.ride-option > span:nth-child(2) { flex:1; }.ride-option strong,.ride-option small { display:block; }.ride-option strong { font-size:12px; }.ride-option small { margin-top:2px; color:#958c88; font-size:10px; }.ride-option b { color:var(--orange-dark); font-size:12px; }.book-ride { width:100%; min-height:43px; }.cart-item { display:flex; gap:9px; align-items:center; padding:12px 0; border-bottom:1px solid var(--line); }.cart-food { font-size:23px; }.cart-item > div { flex:1; }.cart-item strong,.cart-item small { display:block; }.cart-item strong { font:700 12px Outfit; }.cart-item small { margin-top:3px; color:#908682; font-size:9px; }.cart-item b { font-size:11px; }.quantity { color:#7e746f; font-size:10px; white-space:nowrap; }.cart-total { padding:15px 0; display:flex; justify-content:space-between; align-items:center; }.cart-total span { color:#7e746f; font-size:12px; }.cart-total strong { font:700 20px Outfit; color:var(--orange-dark); }.toast { pointer-events:none; position:fixed; z-index:70; bottom:24px; left:50%; display:flex; gap:8px; align-items:center; padding:11px 14px; border-radius:10px; color:#fff; background:#2c423c; box-shadow:0 10px 25px rgba(0,0,0,.16); opacity:0; transform:translate(-50%, 15px); transition:.22s; }.toast.show { opacity:1; transform:translate(-50%,0); }.toast span { display:grid; width:18px; height:18px; place-items:center; border-radius:50%; color:#267d61; background:#d6f3e8; font-size:11px; font-weight:900; }.toast p { font-size:11px; white-space:nowrap; }

/* Authentication */
.auth-modal { width: min(100%, 410px); max-height: calc(100vh - 32px); overflow: auto; padding: 27px 28px 23px; }
.auth-brand { display: flex; gap: 8px; align-items: center; margin-bottom: 23px; font: 800 19px Outfit; letter-spacing: -.6px; }.auth-brand strong span { color: var(--orange); }
.auth-brand .brand-mark { width: 24px; height: 24px; }
.auth-view { display: none; }.auth-view.active { display: block; }
.auth-view h2 { margin-bottom: 6px; font-size: 23px; }.auth-subtitle { margin-bottom: 18px; color: #8b817d; font-size: 11px; line-height: 1.5; }
.auth-view label { display: grid; gap: 6px; margin: 11px 0; color: #5f5652; font-size: 11px; font-weight: 700; }.auth-view label input { height: 42px; padding: 0 11px; border: 1px solid #e6e1de; border-radius: 8px; outline: none; color: #342e2b; font: 400 12px 'DM Sans'; }.auth-view label input:focus { border-color: #ff9e88; box-shadow: 0 0 0 3px #fff0eb; }
.auth-link { padding: 3px 0; color: var(--orange-dark); background: transparent; font-size: 10px; font-weight: 700; }.align-right { display: block; margin: 0 0 13px auto; }.back-link { margin: -1px 0 14px; }
.auth-submit { width: 100%; min-height: 42px; margin-top: 4px; }.auth-submit:disabled { cursor: wait; opacity: .65; }.auth-switch { margin-top: 15px; color: #867c78; text-align: center; font-size: 11px; }.auth-switch button { padding: 0; color: var(--orange-dark); background: transparent; font-size: 11px; font-weight: 700; }
.auth-feedback { display: none; margin: -8px 0 14px; padding: 9px 10px; border-radius: 8px; color: #aa4934; background: #fff0eb; font-size: 10px; line-height: 1.4; }.auth-feedback.show { display: block; }.auth-feedback.success { color: #207859; background: #e2f5eb; }
.dev-code { margin: -3px 0 13px; padding: 8px 10px; display: flex; justify-content: space-between; align-items: center; border: 1px dashed #edb347; border-radius: 8px; color: #806020; background: #fff9e5; font-size: 10px; }.dev-code strong { font: 800 15px Outfit; letter-spacing: 1px; }

@media (max-width: 1090px) { .restaurant-grid { grid-template-columns:repeat(2,1fr); }.admin-stats { grid-template-columns:repeat(2,1fr); }.tracker-body { grid-template-columns:1fr; }.map-art { min-height:160px; }.driver-info { padding:18px 24px; }.food-photo { height:145px; }.driver-layout,.restaurant-layout,.admin-grid { grid-template-columns:1fr; }.driver-side-card,.menu-performance { display:none; } }
@media (max-width: 780px) { .sidebar { width:230px; transform:translateX(-100%); transition:.25s; box-shadow:12px 0 30px rgba(0,0,0,.1); }.sidebar.open { transform:translateX(0); }.main-content { width:100%; margin-left:0; }.mobile-menu { display:block; }.topbar { height:65px; padding:0 18px; }.location { display:none; }.top-actions { margin-left:auto; }.cart-button strong { display:none; }.top-user strong,.top-login { display:none; }.top-auth-actions { gap:2px; }.top-signup { padding:6px 8px; }.page { padding:27px 18px 45px; }.welcome-row { margin-bottom:20px; }.role-switcher { min-width:auto; }.role-current { display:none; }.role-popover { right:0; top:43px; }.search-filter { width:48px; font-size:19px; }.search-filter span { display:none; }.service-cards { grid-template-columns:1fr; }.service-card { min-height:168px; }.food-illustration { right:7px; transform:scale(.9); transform-origin:bottom right; }.tracker-heading { padding:16px; }.tracker-heading .outline-button { font-size:0; }.tracker-heading .outline-button span { padding:0; font-size:17px; }.restaurant-grid { grid-template-columns:repeat(2,1fr); gap:10px; }.food-photo { height:112px; }.restaurant-card-content { padding:9px; }.restaurant-meta { display:block; line-height:1.6; }.restaurants-section { padding-top:29px; }.dashboard-header { gap:12px; }.dashboard-header h1 { font-size:27px; }.dashboard-header > div > p:not(.eyebrow) { max-width:250px; }.stats-grid { grid-template-columns:1fr; gap:10px; }.stat-card { min-height:94px; }.stat-card strong { margin:7px 0 3px; }.kitchen-order { grid-template-columns:1fr auto; }.order-number { grid-column:span 2; display:flex; justify-content:space-between; }.order-total { grid-column:2; grid-row:2; }.admin-stats { grid-template-columns:1fr 1fr; gap:9px; }.admin-stat { padding:12px; gap:8px; }.admin-stat-icon { width:29px; height:29px; }.admin-stat strong { font-size:17px; }.chart-card,.live-card { padding:15px; }.chart { height:210px; }.legend { display:none; }.support-cards { display:grid; grid-template-columns:1fr 1fr; }.support-cards button { width:auto; }.simple-page { min-height:calc(100vh - 65px); } }
@media (max-width: 430px) { body { min-width:0; }.top-actions { gap:8px; }.search-toggle { display:none; }.restaurant-title h3 { font-size:12px; }.restaurant-card-content > p { font-size:9px; }.service-card { padding:20px; }.food-illustration { transform:scale(.75); right:-20px; }.ride-illustration { transform:scale(.82); transform-origin:bottom right; right:-10px; }.tracker-heading h2 { font-size:14px; }.status-pill { display:block; width:max-content; margin:5px 0 0; }.driver-info { padding:16px; }.admin-stat { min-height:91px; }.admin-stat-icon { display:none; }.kitchen-order { padding:11px; }.order-total .primary-button { padding:7px; }.modal-backdrop { padding:12px; }.ride-modal,.cart-modal { padding:22px 18px; }.chip-row { padding-right: 12px; scrollbar-width:none; -ms-overflow-style:none; }.chip-row::-webkit-scrollbar { display:none; }.section-heading { gap:10px; }.section-heading h2 { min-width:0; font-size:18px; line-height:1.18; letter-spacing:-.35px; }.section-heading .text-button { flex:none; white-space:nowrap; font-size:10px; } }

/* Vị trí giao hàng & quán đã đăng ký */
.delivery-trigger { cursor: pointer; border-radius: 8px; padding: 5px 7px; margin-left: -7px; transition: background .18s; }.delivery-trigger:hover { background: #fff3ee; }.delivery-trigger #deliveryLocationLabel { display: block; max-width: 250px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#restaurantGrid .restaurant-card:not(.live) { display: none; }.restaurant-card.live { display: block; }.live-dish { position: absolute; inset: 0; display: grid; place-items: center; font-size: 48px; filter: drop-shadow(0 6px 5px rgba(39,24,14,.22)); }.restaurant-address { min-height: 26px; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.restaurant-empty { grid-column: 1 / -1; min-height: 185px; padding: 32px 22px; display: grid; justify-items: center; align-content: center; text-align: center; border: 1px dashed #e6d8d2; border-radius: 14px; background: #fffdfc; }.restaurant-empty > span { width: 38px; height: 38px; display: grid; place-items: center; margin-bottom: 8px; border-radius: 50%; color: var(--orange); background: #fff0eb; font-size: 19px; }.restaurant-empty h3 { font-size: 16px; }.restaurant-empty p { max-width: 360px; margin: 5px 0 14px; color: #8c827e; font-size: 11px; line-height: 1.5; }.restaurant-empty.loading { min-height: 145px; }.restaurant-empty.loading > span { animation: location-spin 1.2s linear infinite; }@keyframes location-spin { to { transform: rotate(360deg); } }
.location-modal, .restaurant-modal { width: min(100%, 470px); max-height: calc(100vh - 32px); overflow: auto; padding: 26px; position: relative; border-radius: 18px; background: #fff; box-shadow: 0 20px 60px rgba(0,0,0,.22); transform: translateY(10px); transition: .18s; }.modal-backdrop.open .location-modal, .modal-backdrop.open .restaurant-modal { transform: translateY(0); }.location-modal h2, .restaurant-modal h2 { margin-bottom: 14px; font-size: 22px; }.address-search { height: 44px; padding: 0 12px; display: flex; align-items: center; gap: 8px; border: 1px solid #e6e1de; border-radius: 9px; }.address-search > span { color: #847b77; font-size: 18px; }.address-search input { min-width: 0; flex: 1; border: 0; outline: 0; font-size: 12px; }.address-search:focus-within { border-color: #ff9d86; box-shadow: 0 0 0 3px #fff0eb; }
.located-address { margin: -4px 0 13px; padding: 9px; display: flex; align-items: center; gap: 8px; border: 1px solid #cdebdc; border-radius: 9px; background: #effaf5; }.located-address > span { width: 23px; height: 23px; display: grid; place-items: center; border-radius: 50%; color: #fff; background: #2d9e75; font-size: 11px; font-weight: 800; }.located-address small, .located-address strong { display: block; }.located-address small { color: #56947b; font-size: 8px; font-weight: 700; letter-spacing: .55px; }.located-address strong { margin-top: 2px; color: #246b54; font-size: 10px; line-height: 1.35; }
.current-location { width: 100%; margin: 12px 0; padding: 11px; display: flex; align-items: center; gap: 9px; border: 1px solid #f3cec3; border-radius: 10px; background: #fff8f6; text-align: left; }.current-location > span:first-child { width: 28px; height: 28px; display: grid; place-items: center; border-radius: 8px; color: var(--orange-dark); background: #ffe4da; font-size: 18px; }.current-location > span:nth-child(2) { flex: 1; }.current-location strong, .current-location small { display: block; }.current-location strong { font-size: 11px; }.current-location small { margin-top: 2px; color: #918783; font-size: 9px; }.current-location > i { color: var(--orange-dark); font-style: normal; }.address-divider { display: flex; align-items: center; gap: 9px; margin: 17px 0 8px; color: #aa9f9a; font-size: 8px; font-weight: 700; letter-spacing: .6px; }.address-divider::before, .address-divider::after { content: ''; flex: 1; height: 1px; background: #eee9e6; }.address-results { max-height: 260px; overflow: auto; }.address-result { width: 100%; padding: 10px 4px; display: flex; align-items: center; gap: 9px; border-bottom: 1px solid #f1edeb; background: transparent; text-align: left; }.address-result:hover { background: #fff9f6; }.address-result > span:first-child { width: 26px; height: 26px; display: grid; place-items: center; flex: none; border-radius: 50%; color: #4e9b81; background: #e2f3eb; }.address-result > span:nth-child(2) { flex: 1; }.address-result strong, .address-result small { display: block; }.address-result strong { font-size: 10px; line-height: 1.35; }.address-result small { margin-top: 2px; color: #99908c; font-size: 9px; }.address-result i { color: #b1a7a2; font-style: normal; }.address-no-results { padding: 19px 8px; color: #908681; text-align: center; font-size: 11px; }
.address-attribution { margin: 9px 2px 0; color: #a19894; font-size: 8px; line-height: 1.4; }.address-attribution a { color: #8d746b; }
.restaurant-modal .auth-subtitle { max-width: 350px; }.restaurant-modal label { display: grid; gap: 6px; margin: 11px 0; color: #5f5652; font-size: 11px; font-weight: 700; }.restaurant-modal input, .restaurant-modal select { height: 42px; padding: 0 11px; border: 1px solid #e6e1de; border-radius: 8px; outline: 0; color: #342e2b; background: #fff; font: 400 12px 'DM Sans'; }.restaurant-modal input:focus, .restaurant-modal select:focus { border-color: #ff9e88; box-shadow: 0 0 0 3px #fff0eb; }.form-address-note { padding: 9px 10px; border-radius: 8px; color: #756444; background: #fff7dd; font-size: 10px; line-height: 1.45; }
.partner-panel { padding: 22px; border: 1px solid var(--line); border-radius: 15px; background: #fff; }.partner-panel-heading h2 { font-size: 19px; }.partner-empty { max-width: 600px; margin: 42px auto; padding: 42px 25px; display: grid; justify-items: center; text-align: center; border: 1px dashed #e6d8d2; border-radius: 16px; background: #fff; }.partner-empty > span { width: 54px; height: 54px; display: grid; place-items: center; margin-bottom: 12px; border-radius: 50%; color: var(--orange-dark); background: #fff0eb; font-size: 27px; }.partner-empty h1 { font-size: 25px; }.partner-empty h2 { font-size: 19px; }.partner-empty > p:not(.eyebrow) { max-width: 380px; margin: 7px 0 18px; color: #887e7a; font-size: 12px; line-height: 1.5; }.partner-empty.small { margin: 22px 0 0; padding: 30px; border: 0; background: #fffaf8; }.partner-list { margin: 17px 0 0; padding: 0; display: grid; gap: 9px; list-style: none; }.partner-list li { padding: 12px; display: flex; align-items: center; gap: 10px; border: 1px solid #eee8e5; border-radius: 9px; }.partner-list li > span { width: 9px; height: 9px; color: #2eaa7b; font-size: 0; border-radius: 50%; background: #2eaa7b; box-shadow: 0 0 0 3px #dff4eb; }.partner-list div { flex: 1; }.partner-list strong, .partner-list small { display: block; }.partner-list strong { font: 700 13px Outfit; }.partner-list small { margin-top: 3px; color: #908682; font-size: 10px; }.partner-list b { padding: 4px 6px; border-radius: 4px; color: #2d8766; background: #e2f4eb; font-size: 9px; }
.cart-empty-state { padding: 15px 4px 7px; text-align: center; }.cart-empty-state > span { width: 52px; height: 52px; margin: 0 auto 11px; display: grid; place-items: center; border-radius: 50%; background: #fff0eb; font-size: 23px; }.cart-empty-state h2 { margin-bottom: 6px; font-size: 19px; }.cart-empty-state p { color: #8d837e; font-size: 11px; line-height: 1.5; }
.account-type-picker { margin: 3px 0 15px; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; border: 0; }.account-type-picker legend { width: 100%; margin-bottom: 7px; color: #655c58; font-size: 10px; font-weight: 700; }.account-type { min-height: 72px; padding: 8px 5px!important; display: grid!important; gap: 3px!important; justify-items: center; align-content: center; border: 1px solid #e8e2df; border-radius: 9px; background: #fff; text-align: center; cursor: pointer; }.account-type input { position: absolute; opacity: 0; pointer-events: none; }.account-type.selected { border-color: #ffac97; background: #fff5f1; box-shadow: 0 0 0 2px #fff0eb; }.account-type-icon { width: 21px; height: 21px; display: grid; place-items: center; border-radius: 6px; color: #d85c40; background: #ffe1d8; font-size: 13px; }.account-type strong, .account-type small { display: block; }.account-type strong { font-size: 10px; }.account-type small { color: #928783; font-size: 8px; }.approval-notice { margin: -7px 0 23px; padding: 12px 14px; display: flex; gap: 10px; align-items: flex-start; border: 1px solid #f1d98e; border-radius: 12px; background: #fff9e3; }.approval-notice > span { width: 27px; height: 27px; flex: none; display: grid; place-items: center; border-radius: 8px; color: #9e7620; background: #ffecac; font-size: 16px; }.approval-notice strong { display: block; color: #715719; font: 700 12px Outfit; }.approval-notice p { margin-top: 3px; color: #8b7441; font-size: 10px; line-height: 1.45; }
@media (max-width:780px) { .delivery-trigger #deliveryLocationLabel { max-width: 160px; }.location-modal, .restaurant-modal { padding: 22px 18px; }.partner-panel { padding: 16px; } }
@media (max-width:430px) { .delivery-trigger { padding: 4px; margin-left: 0; }.delivery-trigger #deliveryLocationLabel { max-width: 132px; font-size: 10px; }.delivery-trigger small { font-size: 8px; } }

/* Trang đặt đồ ăn & đặt xe */
.food-order-page, .ride-order-page { max-width: 1080px; margin: 0 auto; padding-top: 36px; }
.page-back { min-height: 34px; padding: 0 12px; display: inline-flex; align-items: center; border: 1px solid var(--line); border-radius: 9px; color: #756b67; background: #fff; font-size: 11px; font-weight: 700; transition: .18s; }
.page-back:hover { color: var(--orange-dark); border-color: #ffc1b2; background: #fff7f4; }
.food-order-heading, .ride-page-heading { margin-top: 24px; }
.food-order-heading h1, .ride-page-heading h1 { font-size: clamp(29px, 3.5vw, 42px); }
.food-order-heading > p:not(.eyebrow), .ride-page-heading > p:not(.eyebrow) { max-width: 550px; margin-top: 8px; color: #827873; font-size: 13px; line-height: 1.55; }
.food-location-bar { max-width: 760px; min-height: 74px; margin-top: 24px; padding: 12px 15px; display: flex; align-items: center; gap: 11px; border: 1px solid #f4d9d1; border-radius: 13px; background: #fffaf8; }
.food-location-bar > span { width: 36px; height: 36px; flex: none; display: grid; place-items: center; border-radius: 10px; color: var(--orange-dark); background: #ffe3da; font-size: 19px; }
.food-location-bar > div { min-width: 0; flex: 1; }.food-location-bar small, .food-location-bar strong { display: block; }.food-location-bar small { color: #ab8f86; font-size: 8px; font-weight: 800; letter-spacing: .8px; }.food-location-bar strong { margin-top: 3px; overflow: hidden; color: #4a403c; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; }
.food-location-bar button { padding: 7px 9px; border-radius: 7px; color: var(--orange-dark); background: transparent; font-size: 10px; font-weight: 800; }
.food-location-bar button:hover { background: #fff0eb; }
.food-results { margin-top: 22px; }
.journey-empty, .journey-loading { min-height: 220px; padding: 35px 24px; display: grid; justify-items: center; align-content: center; border: 1px dashed #eaded8; border-radius: 16px; background: #fff; text-align: center; }
.journey-empty > span { width: 50px; height: 50px; margin-bottom: 12px; display: grid; place-items: center; border-radius: 15px; color: var(--orange-dark); background: #fff0eb; font-size: 25px; }.journey-empty h2 { font-size: 20px; }.journey-empty p { max-width: 410px; margin: 7px 0 17px; color: #887e79; font-size: 12px; line-height: 1.55; }.journey-loading { min-height: 130px; color: #857a75; font-size: 12px; }
.food-order-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.food-order-card { min-height: 132px; padding: 17px; display: grid; grid-template-columns: 48px minmax(0, 1fr) auto; gap: 13px; align-items: center; border: 1px solid var(--line); border-radius: 14px; background: #fff; box-shadow: 0 6px 18px rgba(62, 41, 28, .035); }
.food-order-icon { width: 48px; height: 48px; display: grid; place-items: center; border-radius: 14px; background: #fff0eb; font-size: 24px; }.food-order-card h3 { font-size: 16px; }.food-order-card p { margin-top: 4px; overflow: hidden; color: #857b77; text-overflow: ellipsis; white-space: nowrap; font-size: 10px; }.food-order-card small { display: block; margin-top: 6px; color: #a19793; font-size: 9px; }
.food-order-action { max-width: 106px; padding: 9px 10px; border-radius: 8px; color: var(--orange-dark); background: #fff0eb; font-size: 10px; font-weight: 800; line-height: 1.25; }.food-order-action:hover { color: #fff; background: var(--orange); }
.ride-page-layout { max-width: 690px; margin: 25px auto 0; }.ride-booking-card { padding: 22px; border: 1px solid var(--line); border-radius: 17px; background: #fff; box-shadow: var(--shadow); }
.ride-address-field { min-height: 58px; padding: 7px 0; display: flex; align-items: center; gap: 10px; }.ride-address-field > div { min-width: 0; flex: 1; }.ride-address-field label { display: block; margin-bottom: 4px; color: #756b67; font-size: 9px; font-weight: 800; letter-spacing: .45px; }.ride-address-field input { width: 100%; padding: 0; border: 0; outline: 0; color: #312a27; background: transparent; font-size: 13px; }.ride-address-field input::placeholder { color: #aaa09b; }
.ride-field-marker { width: 26px; height: 26px; flex: none; display: grid; place-items: center; border-radius: 8px; color: #fff; background: #269c71; font: 800 11px Outfit; }.destination-marker { border-radius: 7px; background: var(--orange); }.locate-ride { width: 31px; height: 31px; flex: none; display: grid; place-items: center; border-radius: 9px; color: var(--orange-dark); background: #fff0eb; font-size: 18px; }.locate-ride:hover { background: #ffe0d6; }.locate-ride:disabled { opacity: .55; cursor: wait; }
.ride-route-line { height: 9px; margin-left: 12px; border-left: 2px dashed #e3d8d3; }.ride-suggestions { max-height: 230px; margin: 8px 0 16px 36px; overflow: auto; border: 1px solid #eee8e5; border-radius: 10px; background: #fffdfc; }.ride-suggestions:empty { display: none; }.ride-suggestions > p { padding: 14px; color: #8f8580; text-align: center; font-size: 10px; }.ride-suggestion { width: 100%; padding: 10px; display: flex; gap: 9px; align-items: center; border-bottom: 1px solid #f0ebE8; background: transparent; text-align: left; }.ride-suggestion:last-child { border: 0; }.ride-suggestion:hover { background: #fff6f2; }.ride-suggestion > span:first-child { width: 24px; height: 24px; display: grid; place-items: center; flex: none; border-radius: 7px; color: #2a9270; background: #e4f4ed; font-size: 13px; }.ride-suggestion > span:last-child { min-width: 0; flex: 1; }.ride-suggestion strong, .ride-suggestion small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }.ride-suggestion strong { font-size: 10px; }.ride-suggestion small { margin-top: 3px; color: #968b86; font-size: 9px; }
.ride-vehicle-list { display: grid; gap: 8px; margin-top: 14px; }.ride-vehicle-choice { width: 100%; padding: 12px; display: flex; align-items: center; gap: 11px; border: 1px solid #ebe4e1; border-radius: 11px; background: #fff; text-align: left; }.ride-vehicle-choice.selected { border-color: #ffa992; background: #fff8f5; box-shadow: 0 0 0 2px #fff0eb; }.ride-vehicle-choice > span:first-child { width: 31px; height: 31px; display: grid; place-items: center; border-radius: 9px; background: #fff0eb; font-size: 19px; }.ride-vehicle-choice > span:nth-child(2) { flex: 1; }.ride-vehicle-choice strong, .ride-vehicle-choice small { display: block; }.ride-vehicle-choice strong { font-size: 12px; }.ride-vehicle-choice small { margin-top: 2px; color: #988d87; font-size: 9px; }.ride-vehicle-choice b { color: var(--orange-dark); font-size: 12px; }
.ride-total { margin: 16px 0 12px; padding: 14px 0; display: flex; justify-content: space-between; align-items: center; border-top: 1px solid #eee8e5; border-bottom: 1px solid #eee8e5; }.ride-total span { color: #837873; font-size: 11px; }.ride-total strong { color: #37302d; font: 700 13px Outfit; }.ride-confirm { width: 100%; min-height: 46px; }
.ride-status-panel { margin-top: 15px; }.ride-waiting-card, .ride-driver-card { padding: 19px; border: 1px solid #f1ded7; border-radius: 15px; background: #fff; box-shadow: 0 8px 22px rgba(70, 44, 30, .045); }.ride-waiting-card { display: flex; gap: 14px; align-items: center; }.ride-waiting-pulse { width: 50px; height: 50px; flex: none; display: grid; place-items: center; border-radius: 15px; background: #fff0eb; font-size: 24px; animation: ride-pulse 1.4s ease-in-out infinite; }.ride-waiting-card .eyebrow { margin-bottom: 3px; }.ride-waiting-card h2 { font-size: 16px; }.ride-waiting-card p:not(.eyebrow) { margin-top: 5px; color: #8d817c; font-size: 10px; line-height: 1.5; }@keyframes ride-pulse { 50% { transform: scale(1.07); box-shadow: 0 0 0 8px #fff6f3; } }
.ride-driver-status { display: flex; gap: 10px; align-items: center; padding-bottom: 14px; border-bottom: 1px solid #f1ece9; }.ride-driver-status > span { width: 27px; height: 27px; display: grid; place-items: center; border-radius: 9px; color: #fff; background: #2da27a; font-size: 13px; font-weight: 900; }.ride-driver-status .eyebrow { margin-bottom: 2px; color: #4c9a7d; }.ride-driver-status h2 { font-size: 15px; }.ride-driver-profile { padding: 15px 0; display: flex; align-items: center; gap: 10px; }.ride-driver-avatar { width: 48px; height: 48px; flex: none; display: grid; place-items: center; border-radius: 50%; color: #9d3e2b; background: linear-gradient(135deg, #ffd8cd, #ffeeda); font: 800 15px Outfit; }.ride-driver-details { min-width: 0; flex: 1; }.ride-driver-details h3 { overflow: hidden; font-size: 14px; text-overflow: ellipsis; white-space: nowrap; }.ride-driver-details h3 span { margin-left: 4px; color: #d58a21; font: 700 10px 'DM Sans'; }.ride-driver-details p { margin-top: 4px; color: #7b716d; font-size: 10px; }.ride-driver-details small { display: block; margin-top: 4px; color: #a09691; font-size: 9px; }.ride-driver-actions { display: flex; gap: 6px; }.ride-driver-actions button { width: 31px; height: 31px; display: grid; place-items: center; border-radius: 9px; color: #287d60; background: #e7f6ef; font-size: 14px; }.ride-driver-actions button:last-child { color: var(--orange-dark); background: #fff0eb; }.ride-driver-route { padding: 11px; display: grid; grid-template-columns: 18px minmax(0, 1fr); gap: 5px 8px; border-radius: 10px; background: #faf8f7; }.ride-driver-route span { width: 18px; height: 18px; display: grid; place-items: center; border-radius: 50%; color: #fff; background: #2e9e75; font-size: 8px; font-weight: 900; }.ride-driver-route span:nth-of-type(2) { background: var(--orange); }.ride-driver-route p { overflow: hidden; color: #6f6662; text-overflow: ellipsis; white-space: nowrap; font-size: 10px; line-height: 18px; }.ride-driver-route i { width: 0; height: 8px; margin: -1px 0 -1px 8px; border-left: 1px dashed #c9c0bc; }
.driver-active-ride { margin-bottom: 16px; padding: 13px; border-radius: 10px; color: #246f55; background: #effaf5; }.driver-active-ride .eyebrow { margin-bottom: 3px; color: #4b9d7d; }.driver-active-ride h2 { font-size: 16px; }.driver-active-ride p:not(.eyebrow) { margin-top: 5px; color: #54786a; font-size: 10px; }.journey-empty.compact { min-height: 150px; margin-top: 14px; }
@media (max-width: 780px) { .food-order-page, .ride-order-page { padding-top: 28px; }.food-order-grid { grid-template-columns: 1fr; }.ride-page-layout { margin-top: 19px; }.ride-booking-card { padding: 17px; } }
@media (max-width: 480px) { .food-order-heading > p:not(.eyebrow), .ride-page-heading > p:not(.eyebrow) { font-size: 12px; }.food-location-bar { padding: 11px; }.food-order-card { grid-template-columns: 43px minmax(0, 1fr); padding: 13px; gap: 10px; }.food-order-icon { width: 43px; height: 43px; font-size: 21px; }.food-order-action { grid-column: 2; justify-self: start; margin-top: -2px; }.ride-suggestions { margin-left: 29px; }.ride-field-marker { width: 24px; height: 24px; } }