*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
:root{--orange:#ff5b17;--ink:#171513;--muted:#7d7772;--cream:#fffaf7;--peach:#ffe3d4}
html,body{margin:0;width:100%;min-height:100%;background:var(--cream);font-family:'DM Sans',Arial,sans-serif;color:var(--ink)}
body{overflow:hidden}
.app{position:fixed;inset:0;overflow:hidden;background:linear-gradient(180deg,#fff7f2 0%,#fffaf7 53%,#fff 100%)}
.brand{position:absolute;z-index:5;top:max(22px,env(safe-area-inset-top));left:25px;display:flex;align-items:center;gap:9px;opacity:0;animation:drop .7s .12s ease forwards}
.logoMark{width:37px;height:37px;border-radius:13px;background:var(--orange);display:grid;place-items:center;box-shadow:0 9px 24px rgba(255,91,23,.22)}
.logoMark svg{width:21px;height:21px}
.brandName{font-family:'Manrope',sans-serif;font-weight:800;font-size:19px;letter-spacing:-.7px}.brandName b{color:var(--orange)}
.scene{position:absolute;top:11%;left:0;width:100%;height:49%;overflow:hidden}
.sun{position:absolute;width:235px;height:235px;border-radius:50%;background:radial-gradient(circle,#ffd9c6 0,#ffe9dd 57%,rgba(255,238,229,0) 72%);left:50%;top:40%;transform:translate(-50%,-50%) scale(.7);opacity:0;animation:sunIn 1.1s .25s cubic-bezier(.2,.8,.2,1) forwards}
.city{position:absolute;left:0;right:0;bottom:24%;height:36%;opacity:.55}
.road{position:absolute;left:-10%;right:-10%;bottom:6%;height:72px;border-radius:50%;border-top:2px solid #ffd7c4;transform:rotate(-3deg)}
.road:after{content:"";position:absolute;left:9%;right:8%;top:24px;border-top:2px dashed #ffb38d}
.rider{position:absolute;left:50%;bottom:7%;width:260px;height:215px;transform:translateX(-50%);opacity:0;animation:rideIn 1.15s .42s cubic-bezier(.16,.84,.22,1) forwards}
.scooter{position:absolute;left:25px;bottom:8px;width:220px;height:105px}
.wheel{position:absolute;bottom:0;width:54px;height:54px;border:8px solid #272523;border-radius:50%;background:#eee}.w1{left:13px}.w2{right:8px}
.bodyBike{position:absolute;left:49px;bottom:27px;width:124px;height:50px;background:var(--orange);border-radius:38px 55px 22px 30px;transform:skewX(-8deg);box-shadow:0 9px 15px rgba(42,28,20,.12)}
.front{position:absolute;right:31px;bottom:50px;width:15px;height:74px;background:#ff6a26;border-radius:12px;transform:rotate(-17deg)}
.handle{position:absolute;right:17px;bottom:119px;width:48px;height:7px;background:#292725;border-radius:8px;transform:rotate(4deg)}
.seat{position:absolute;left:83px;bottom:77px;width:65px;height:12px;background:#252321;border-radius:10px}
.avatar{position:absolute;left:104px;bottom:86px;width:69px;height:104px}
.head{position:absolute;left:23px;top:0;width:43px;height:43px;border-radius:48% 48% 45% 45%;background:#9c5b35;border:4px solid #2b2927}
.helmet{position:absolute;left:17px;top:-7px;width:52px;height:28px;background:var(--orange);border-radius:28px 28px 10px 10px;transform:rotate(4deg)}
.torso{position:absolute;left:8px;top:38px;width:54px;height:57px;background:#ff6a24;border-radius:17px 17px 12px 12px;transform:rotate(7deg)}
.arm{position:absolute;left:47px;top:48px;width:64px;height:15px;background:#ff6a24;border-radius:20px;transform:rotate(20deg);transform-origin:left center}
.leg{position:absolute;left:21px;top:83px;width:71px;height:17px;background:#282625;border-radius:20px;transform:rotate(24deg);transform-origin:left center}
.box{position:absolute;left:22px;bottom:86px;width:78px;height:72px;background:#ff641e;border:4px solid #d9470b;border-radius:13px;box-shadow:0 8px 17px rgba(255,91,23,.18)}
.box:after{content:"TG";position:absolute;inset:0;display:grid;place-items:center;color:#fff;font-family:'Manrope';font-weight:800;font-size:20px}
.speed{position:absolute;left:0;bottom:61px;width:46px;height:3px;background:#ff7b41;border-radius:8px;box-shadow:-18px 15px 0 #ffad87,-4px 29px 0 #ff8c5a;animation:speed 1.2s ease-in-out infinite}
.copy{position:absolute;z-index:4;left:27px;right:27px;bottom:max(116px,calc(env(safe-area-inset-bottom) + 93px));text-align:center}
.kicker{font-size:11px;font-weight:700;letter-spacing:2.2px;color:var(--orange);text-transform:uppercase;margin-bottom:10px;opacity:0;animation:up .7s .82s ease forwards}
h1{font-family:'Manrope',sans-serif;font-size:clamp(30px,8.6vw,42px);line-height:1.07;letter-spacing:-1.8px;margin:0 auto 13px;max-width:390px;font-weight:800;opacity:0;animation:up .75s .92s ease forwards}
h1 span{color:var(--orange)}
.desc{max-width:335px;margin:0 auto;color:var(--muted);font-size:14px;line-height:1.58;opacity:0;animation:up .75s 1.03s ease forwards}
.dots{display:flex;justify-content:center;gap:6px;margin-top:19px;opacity:0;animation:up .6s 1.13s forwards}.dot{height:5px;width:6px;background:#ddd8d5;border-radius:8px}.dot.on{width:24px;background:var(--orange)}
.next{position:absolute;z-index:6;left:50%;bottom:max(20px,env(safe-area-inset-bottom));width:68px;height:68px;transform:translateX(-50%) scale(.5);border:0;border-radius:50%;background:var(--orange);color:white;display:grid;place-items:center;box-shadow:0 12px 28px rgba(255,91,23,.32);opacity:0;animation:buttonIn .65s 1.2s cubic-bezier(.17,.9,.27,1.35) forwards;cursor:pointer}
.next svg{width:24px}.next:before{content:"";position:absolute;inset:-7px;border:1px solid rgba(255,91,23,.28);border-radius:50%;animation:pulse 2.1s 1.7s ease-out infinite}.next:active{scale:.92}
.app.leaving .brand,.app.leaving .scene,.app.leaving .copy,.app.leaving .next{transition:.55s cubic-bezier(.4,0,.2,1);opacity:0;transform:translateY(-18px)}
.toast{position:absolute;z-index:320;left:50%;top:50%;transform:translate(-50%,-50%) scale(.92);padding:13px 17px;background:#191715;color:#fff;border-radius:15px;font-size:12px;font-weight:700;opacity:0;pointer-events:none}.toast.show{animation:toast 1.45s ease}
#hiddenBlogger{display:none!important}
@keyframes drop{from{opacity:0;transform:translateY(-12px)}to{opacity:1;transform:none}}
@keyframes sunIn{to{opacity:1;transform:translate(-50%,-50%) scale(1)}}
@keyframes rideIn{0%{opacity:0;transform:translateX(-80%) translateY(10px) scale(.94)}70%{opacity:1;transform:translateX(-47%) translateY(0) scale(1.01)}100%{opacity:1;transform:translateX(-50%) scale(1)}}
@keyframes speed{50%{transform:translateX(-8px);opacity:.45}}
@keyframes up{from{opacity:0;transform:translateY(15px)}to{opacity:1;transform:none}}
@keyframes buttonIn{to{opacity:1;transform:translateX(-50%) scale(1)}}
@keyframes pulse{0%{transform:scale(.9);opacity:.7}100%{transform:scale(1.42);opacity:0}}
@keyframes toast{0%{opacity:0;transform:translate(-50%,-45%) scale(.92)}20%,75%{opacity:1;transform:translate(-50%,-50%) scale(1)}100%{opacity:0}}
@media(max-height:690px){.scene{top:8%;height:45%}.rider{transform:translateX(-50%) scale(.87);transform-origin:center bottom}.copy{bottom:92px}h1{font-size:29px}.desc{font-size:13px}.dots{margin-top:12px}.next{width:60px;height:60px;bottom:13px}}
@media(min-width:650px){.app{left:50%;width:430px;transform:translateX(-50%);box-shadow:0 0 70px rgba(0,0,0,.1)}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important}}


/* TastyGo in-app order notifications */
.tgNoticeBtn{width:100%;border:1px solid #f3e1d6;border-radius:17px;background:#fff;padding:14px 15px;display:flex;align-items:center;gap:12px;text-align:left;margin:12px 0;color:#211913;font-weight:800}
.tgNoticeIcon{font-size:22px}.tgNoticeMeta{flex:1}.tgNoticeMeta small{display:block;font-size:11px;color:#8b7770;margin-top:3px;font-weight:500}
.tgNoticeCount{background:#ff5b17;color:#fff;min-width:22px;height:22px;border-radius:12px;display:grid;place-items:center;font-size:11px;padding:0 5px}
.tgNoticePanel{position:absolute;inset:0;z-index:230;background:#fffaf7;display:none;flex-direction:column}
.tgNoticePanel.show{display:flex}.tgNoticeHead{padding:max(22px,env(safe-area-inset-top)) 20px 15px;display:flex;align-items:center;gap:12px;border-bottom:1px solid #f0e5dd}
.tgNoticeHead button{border:0;background:#fff0e8;border-radius:12px;padding:11px;color:#211913;font-weight:800}.tgNoticeHead h2{font:800 20px 'Manrope';margin:0;flex:1}.tgNoticeList{overflow-y:auto;padding:16px 18px 45px;flex:1}
.tgNoticeItem{display:block;width:100%;border:1px solid #f0e3db;border-radius:17px;background:#fff;text-align:left;padding:15px;margin-bottom:11px;color:#211913}
.tgNoticeItem.unread{border-color:#ffc49e;background:#fff5ed}.tgNoticeItem b{display:block;font-size:13px}.tgNoticeItem span{display:block;color:#73665f;font-size:12px;line-height:1.5;margin-top:6px}.tgNoticeItem small{display:block;color:#a0928a;margin-top:7px}

/* Dashboard bell: attention animation only while notifications remain unread. */
#bellBtn.tgBellUnread svg{transform-origin:50% 12%;animation:tgBellShake 1.25s ease-in-out infinite}
#bellBtn .dotBadge{display:none}
#bellBtn.tgBellUnread .dotBadge{display:block;animation:tgBellDotPulse 1.6s ease-in-out infinite}
@keyframes tgBellShake{0%,44%,100%{transform:rotate(0)}8%,24%{transform:rotate(16deg)}16%,32%{transform:rotate(-16deg)}38%{transform:rotate(7deg)}}
@keyframes tgBellDotPulse{50%{transform:scale(1.25)}}
@media(prefers-reduced-motion:reduce){#bellBtn.tgBellUnread svg,#bellBtn.tgBellUnread .dotBadge{animation:none!important}}

/* V3 — ONBOARDING STEP 2 */
.step2{position:absolute;inset:0;z-index:12;background:linear-gradient(180deg,#fff8f4 0%,#fffdfb 100%);opacity:0;visibility:hidden;transform:translateX(28px);transition:.52s cubic-bezier(.22,.8,.2,1);overflow:hidden}
.step2.active{opacity:1;visibility:visible;transform:none}
.app.step2open>.brand,.app.step2open>.scene,.app.step2open>.copy,.app.step2open>.next{opacity:0;transform:translateX(-30px);transition:.42s cubic-bezier(.4,0,.2,1);pointer-events:none}
.s2Top{position:absolute;top:max(27px,env(safe-area-inset-top));left:26px;right:26px;display:flex;align-items:center;justify-content:space-between}
.s2Num{font-family:'Manrope';font-weight:800;font-size:12px;color:#aaa19c;letter-spacing:1.5px}.s2Num b{color:var(--orange)}
.s2Skip{border:0;background:transparent;color:#8d8580;font:600 12px 'DM Sans';padding:8px}
.mealStage{position:absolute;top:12.5%;left:20px;right:20px;height:48%;display:flex;align-items:center;justify-content:center}
.mealGlow{position:absolute;width:270px;height:270px;border-radius:50%;background:radial-gradient(circle,#ffe2d3 0,#fff0e8 48%,rgba(255,248,244,0) 72%);transform:scale(.65);opacity:0}
.step2.active .mealGlow{animation:mealGlow .8s .15s forwards}
.plate{position:absolute;width:220px;height:220px;border-radius:50%;background:#fff;box-shadow:0 24px 50px rgba(82,48,31,.11),inset 0 0 0 13px #fff5ef;transform:scale(.65) rotate(-9deg);opacity:0}
.step2.active .plate{animation:plateIn .72s .25s cubic-bezier(.18,.9,.25,1.25) forwards}
.foodCore{position:absolute;width:145px;height:145px;border-radius:50%;overflow:hidden;transform:scale(.7);opacity:0}
.step2.active .foodCore{animation:foodIn .55s .52s forwards}
.rice{position:absolute;inset:0;background:radial-gradient(circle at 28% 24%,#ffd376 0 3px,transparent 4px),radial-gradient(circle at 60% 34%,#ffbd55 0 3px,transparent 4px),radial-gradient(circle at 45% 67%,#f6a43c 0 4px,transparent 5px),#f6c45f}
.chicken{position:absolute;width:74px;height:46px;left:36px;top:51px;background:linear-gradient(135deg,#a9481d,#e1772f);border-radius:55% 45% 48% 52%;transform:rotate(-17deg);box-shadow:inset -7px -7px 0 rgba(88,33,12,.12)}
.plantain{position:absolute;width:34px;height:18px;background:#e5a52e;border-radius:50%;right:15px;top:32px;transform:rotate(28deg);box-shadow:-9px 25px 0 #d89022,-23px 45px 0 #edb33c}
.green{position:absolute;width:18px;height:18px;border-radius:50%;background:#73a94c;left:19px;bottom:27px;box-shadow:20px 10px 0 #5f9b43,12px -18px 0 #83b658}
.chip{position:absolute;z-index:4;display:flex;align-items:center;gap:7px;background:#fff;padding:10px 13px;border-radius:16px;box-shadow:0 10px 30px rgba(67,44,32,.1);font-size:11px;font-weight:700;opacity:0;transform:translateY(18px) scale(.88)}
.chip i{width:24px;height:24px;border-radius:9px;display:grid;place-items:center;font-style:normal;background:#fff0e8;color:var(--orange)}
.c1{left:0;top:20%}.c2{right:0;top:30%}.c3{left:4%;bottom:16%}.c4{right:3%;bottom:8%}
.step2.active .c1{animation:chipIn .48s .78s forwards}.step2.active .c2{animation:chipIn .48s .93s forwards}.step2.active .c3{animation:chipIn .48s 1.08s forwards}.step2.active .c4{animation:chipIn .48s 1.23s forwards}
.s2Copy{position:absolute;left:28px;right:28px;bottom:max(113px,calc(env(safe-area-inset-bottom) + 91px));text-align:center}
.s2Copy h2{font:800 clamp(29px,8vw,39px)/1.08 'Manrope';letter-spacing:-1.6px;margin:0 0 11px;opacity:0;transform:translateY(15px)}
.s2Copy h2 span{color:var(--orange)}.s2Copy p{max-width:330px;margin:0 auto;color:var(--muted);font-size:14px;line-height:1.55;opacity:0;transform:translateY(12px)}
.step2.active .s2Copy h2{animation:up .6s 1.12s forwards}.step2.active .s2Copy p{animation:up .6s 1.22s forwards}
.orderStrip{max-width:320px;margin:17px auto 0;padding:11px 14px;border:1px solid #f1e7e1;border-radius:15px;background:#fff;display:flex;justify-content:space-between;align-items:center;box-shadow:0 8px 24px rgba(70,40,25,.05);opacity:0}
.orderStrip span{font-size:11px;color:#8b827d;font-weight:600}.orderStrip strong{font:800 15px 'Manrope';color:var(--orange)}
.step2.active .orderStrip{animation:up .55s 1.34s forwards}
.s2Dots{display:flex;justify-content:center;gap:6px;margin-top:13px}.s2Dots i{width:6px;height:5px;border-radius:8px;background:#ddd8d5}.s2Dots .on{width:24px;background:var(--orange)}
.s2Next{position:absolute;left:50%;bottom:max(20px,env(safe-area-inset-bottom));width:68px;height:68px;transform:translateX(-50%);border:0;border-radius:50%;background:var(--orange);color:#fff;display:grid;place-items:center;box-shadow:0 12px 28px rgba(255,91,23,.3);opacity:0}
.s2Next svg{width:24px}.step2.active .s2Next{animation:upBtn .6s 1.42s forwards}.s2Next:before{content:"";position:absolute;inset:-7px;border:1px solid rgba(255,91,23,.25);border-radius:50%;animation:pulse 2.2s 2s ease-out infinite}
@keyframes mealGlow{to{opacity:1;transform:scale(1)}}@keyframes plateIn{to{opacity:1;transform:scale(1) rotate(0)}}@keyframes foodIn{to{opacity:1;transform:scale(1)}}@keyframes chipIn{to{opacity:1;transform:none}}@keyframes upBtn{from{opacity:0;transform:translate(-50%,15px)}to{opacity:1;transform:translate(-50%,0)}}
@media(max-height:690px){.mealStage{top:10%;height:43%;transform:scale(.86)}.s2Copy{bottom:87px}.s2Copy h2{font-size:28px}.orderStrip{margin-top:10px}.s2Dots{margin-top:8px}.s2Next{width:59px;height:59px;bottom:12px}}


/* V4 — real food photo on onboarding step 2 */
.foodCore.realFood{background:#fff}
.foodCore.realFood img{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
  border-radius:50%;
}


/* V6 — larger real food image only */
.foodCore.realFood{
  width:178px;
  height:178px;
}


/* V7 — ONBOARDING STEP 3: LIVE ORDER TRACKING */
.step3{position:absolute;inset:0;z-index:16;background:linear-gradient(180deg,#fff8f4 0%,#fffdfb 100%);opacity:0;visibility:hidden;transform:translateX(30px);transition:.52s cubic-bezier(.22,.8,.2,1);overflow:hidden}
.step3.active{opacity:1;visibility:visible;transform:none}
.step2.to3{opacity:0;transform:translateX(-30px);pointer-events:none}
.s3Top{position:absolute;top:max(27px,env(safe-area-inset-top));left:26px;right:26px;display:flex;justify-content:space-between;align-items:center}
.s3Num{font:800 12px 'Manrope';color:#aaa19c;letter-spacing:1.5px}.s3Num b{color:var(--orange)}
.trackStage{position:absolute;top:12%;left:24px;right:24px;height:45%}
.mapBlob{position:absolute;inset:5% 1% 0;border-radius:42px;background:#fff2eb;overflow:hidden;opacity:0;transform:scale(.94)}
.step3.active .mapBlob{animation:mapIn .65s .15s forwards}
.street{position:absolute;height:9px;background:#fff;border-radius:20px;opacity:.95}
.st1{width:125%;left:-14%;top:40%;transform:rotate(-17deg)}.st2{width:95%;left:13%;top:65%;transform:rotate(21deg)}.st3{width:70%;left:-5%;top:76%;transform:rotate(-42deg)}
.route{position:absolute;left:18%;top:25%;width:64%;height:48%;border:3px dashed #ff8b58;border-left-color:transparent;border-bottom-color:transparent;border-radius:50%;transform:rotate(12deg)}
.pin{position:absolute;width:42px;height:42px;border-radius:15px;background:#fff;display:grid;place-items:center;box-shadow:0 8px 22px rgba(63,38,25,.1);font-size:20px;opacity:0}
.kitchenPin{left:11%;bottom:15%}.youPin{right:10%;top:15%}
.step3.active .kitchenPin{animation:pinIn .45s .55s forwards}.step3.active .youPin{animation:pinIn .45s .7s forwards}
.miniRider{position:absolute;z-index:5;left:22%;bottom:27%;width:47px;height:47px;border-radius:50%;background:var(--orange);display:grid;place-items:center;box-shadow:0 9px 20px rgba(255,91,23,.3);opacity:0}
.miniRider svg{width:26px;height:26px}
.step3.active .miniRider{animation:riderRoute 2.5s .9s cubic-bezier(.45,.05,.25,1) forwards}
.statusCard{position:absolute;left:50%;bottom:1%;transform:translateX(-50%) translateY(15px);width:82%;background:#fff;border-radius:18px;padding:13px 14px;box-shadow:0 12px 32px rgba(65,39,26,.09);opacity:0}
.step3.active .statusCard{animation:statusIn .5s 1.1s forwards}
.statusHead{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px}.statusHead b{font:800 12px 'Manrope'}.statusHead span{font-size:10px;color:var(--orange);font-weight:700}
.steps{display:flex;align-items:center}.sNode{width:24px;height:24px;border-radius:50%;background:#eee9e6;display:grid;place-items:center;font-size:10px;font-weight:800;color:#aaa;transition:.35s}.sLine{height:3px;flex:1;background:#eee9e6;transition:.35s}
.step3.active .n1{animation:nodeOn .25s 1.25s forwards}.step3.active .l1{animation:lineOn .3s 1.48s forwards}.step3.active .n2{animation:nodeOn .25s 1.78s forwards}.step3.active .l2{animation:lineOn .3s 2.05s forwards}.step3.active .n3{animation:nodeOn .25s 2.34s forwards}.step3.active .l3{animation:lineOn .3s 2.65s forwards}.step3.active .n4{animation:nodeOn .25s 2.96s forwards}
.s3Copy{position:absolute;left:28px;right:28px;bottom:max(115px,calc(env(safe-area-inset-bottom) + 92px));text-align:center}
.s3Copy h2{font:800 clamp(29px,8vw,39px)/1.08 'Manrope';letter-spacing:-1.6px;margin:0 0 11px;opacity:0}.s3Copy h2 span{color:var(--orange)}
.s3Copy p{max-width:330px;margin:0 auto;color:var(--muted);font-size:14px;line-height:1.55;opacity:0}
.step3.active .s3Copy h2{animation:up .6s 1.05s forwards}.step3.active .s3Copy p{animation:up .6s 1.17s forwards}
.s3Dots{display:flex;justify-content:center;gap:6px;margin-top:17px}.s3Dots i{width:6px;height:5px;border-radius:8px;background:#ddd8d5}.s3Dots .on{width:24px;background:var(--orange)}
.getStarted{position:absolute;left:28px;right:28px;bottom:max(20px,env(safe-area-inset-bottom));height:62px;border:0;border-radius:20px;background:var(--orange);color:#fff;font:800 15px 'Manrope';box-shadow:0 12px 28px rgba(255,91,23,.28);opacity:0;transform:translateY(15px)}
.step3.active .getStarted{animation:up .55s 1.35s forwards}.getStarted:active{transform:scale(.98)}
@keyframes mapIn{to{opacity:1;transform:scale(1)}}@keyframes pinIn{to{opacity:1;transform:translateY(-4px)}}@keyframes statusIn{to{opacity:1;transform:translateX(-50%) translateY(0)}}
@keyframes riderRoute{0%{opacity:0;left:20%;bottom:25%;transform:rotate(-15deg)}10%{opacity:1}45%{left:45%;bottom:47%;transform:rotate(-32deg)}75%{left:65%;bottom:58%;transform:rotate(-5deg)}100%{opacity:1;left:76%;bottom:66%;transform:rotate(0)}}
@keyframes nodeOn{to{background:var(--orange);color:#fff}}@keyframes lineOn{to{background:var(--orange)}}
@media(max-height:690px){.trackStage{top:9%;height:43%;transform:scale(.9)}.s3Copy{bottom:92px}.s3Copy h2{font-size:28px}.s3Dots{margin-top:9px}.getStarted{height:56px;bottom:12px}}


/* V8 — GENTLE ACCOUNT ENTRY */
.auth{position:absolute;inset:0;z-index:25;background:linear-gradient(180deg,#fff8f4 0%,#fff 54%,#fffaf7 100%);opacity:0;visibility:hidden;transform:translateY(30px) scale(.985);transition:.58s cubic-bezier(.2,.85,.2,1);overflow:hidden}
.auth.active{opacity:1;visibility:visible;transform:none}
.step3.authOut{opacity:0;transform:translateY(-22px) scale(.985);transition:.48s cubic-bezier(.4,0,.2,1);pointer-events:none}
.authGlow{position:absolute;width:320px;height:320px;left:50%;top:-155px;transform:translateX(-50%);border-radius:50%;background:radial-gradient(circle,#ffd8c5 0,#ffede4 48%,rgba(255,255,255,0) 72%)}
.authTop{position:absolute;top:max(24px,env(safe-area-inset-top));left:24px;right:24px;display:flex;align-items:center;justify-content:space-between;opacity:0}
.auth.active .authTop{animation:up .55s .18s forwards}
.authBrand{display:flex;align-items:center;gap:9px;font:800 18px 'Manrope'}.authBrand i{width:35px;height:35px;border-radius:12px;background:var(--orange);display:grid;place-items:center;font-style:normal;color:#fff;font-size:14px}.authBrand b{color:var(--orange)}
.secure{display:flex;align-items:center;gap:5px;font-size:10px;font-weight:700;color:#9a918c}.secure svg{width:13px}
.authBody{position:absolute;left:26px;right:26px;top:19%;text-align:center}
.helloIcon{width:76px;height:76px;margin:0 auto 22px;border-radius:25px;background:#fff0e8;display:grid;place-items:center;box-shadow:0 12px 35px rgba(255,91,23,.09);opacity:0;transform:scale(.7) rotate(-7deg)}
.helloIcon svg{width:37px;height:37px}.auth.active .helloIcon{animation:helloPop .65s .3s cubic-bezier(.16,.9,.24,1.3) forwards}
.authBody h2{font:800 clamp(30px,8.5vw,40px)/1.08 'Manrope';letter-spacing:-1.7px;margin:0 0 11px;opacity:0;transform:translateY(13px)}
.authBody h2 span{color:var(--orange)}.authBody>p{max-width:330px;margin:0 auto;color:var(--muted);font-size:14px;line-height:1.55;opacity:0;transform:translateY(13px)}
.auth.active .authBody h2{animation:up .55s .48s forwards}.auth.active .authBody>p{animation:up .55s .58s forwards}
.authActions{position:absolute;left:26px;right:26px;bottom:max(40px,calc(env(safe-area-inset-bottom) + 24px));opacity:0;transform:translateY(20px)}
.auth.active .authActions{animation:up .6s .72s forwards}
.authBtn{width:100%;height:62px;border-radius:19px;font:800 14px 'Manrope';display:flex;align-items:center;justify-content:center;gap:10px;cursor:pointer}
.phoneBtn{border:0;background:var(--orange);color:#fff;box-shadow:0 13px 30px rgba(255,91,23,.25)}
.emailBtn{margin-top:12px;border:1px solid #eee3dd;background:#fff;color:#292522}
.authBtn svg{width:20px;height:20px}
.googleBtn{margin-top:12px;border:1px solid #eee3dd;background:#fff;color:#292522}.googleG{font:800 18px Arial;color:#4285f4}.passwordWrap{margin-top:10px}.passwordWrap.hide{display:none}.authError{min-height:18px;margin-top:9px;color:#c63d20;font-size:11px;font-weight:700;text-align:center}
.or{display:flex;align-items:center;gap:12px;margin:17px 0;color:#aaa29d;font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:1px}.or:before,.or:after{content:"";height:1px;flex:1;background:#eee7e3}
.terms{margin-top:18px;text-align:center;font-size:10px;line-height:1.5;color:#aaa19c}.terms b{color:#706963}
.sheetShade{position:absolute;inset:0;z-index:40;background:rgba(28,20,16,.25);backdrop-filter:blur(3px);opacity:0;visibility:hidden;transition:.3s}
.sheetShade.show{opacity:1;visibility:visible}
.entrySheet{position:absolute;z-index:41;left:12px;right:12px;bottom:-100%;background:#fff;border-radius:28px 28px 18px 18px;padding:12px 18px max(22px,calc(env(safe-area-inset-bottom) + 14px));box-shadow:0 -15px 50px rgba(43,29,22,.14);transition:.5s cubic-bezier(.16,.84,.24,1)}
.entrySheet.show{bottom:12px}
.handle{width:38px;height:4px;background:#e4dfdc;border-radius:5px;margin:0 auto 21px}
.sheetIcon{width:48px;height:48px;border-radius:16px;background:#fff0e8;display:grid;place-items:center;color:var(--orange);margin-bottom:14px}.sheetIcon svg{width:23px}
.entrySheet h3{font:800 22px 'Manrope';letter-spacing:-.8px;margin:0 0 6px}.entrySheet p{font-size:12px;line-height:1.5;color:var(--muted);margin:0 0 18px}
.inputWrap{height:59px;border:1.5px solid #ebe3df;border-radius:17px;display:flex;align-items:center;padding:0 15px;background:#fff;transition:.25s}
.inputWrap:focus-within{border-color:var(--orange);box-shadow:0 0 0 4px rgba(255,91,23,.08)}
.prefix{padding-right:11px;margin-right:11px;border-right:1px solid #eee5e1;font:700 13px 'Manrope';white-space:nowrap}
.inputWrap input{border:0;outline:0;width:100%;font:600 15px 'DM Sans';color:#262220;background:transparent}.inputWrap input::placeholder{color:#b8b0ac}
.sheetContinue{width:100%;height:58px;border:0;border-radius:17px;margin-top:13px;background:var(--orange);color:#fff;font:800 14px 'Manrope';box-shadow:0 10px 24px rgba(255,91,23,.22)}
.sheetContinue:active,.authBtn:active{transform:scale(.985)}
.demoNote{display:flex;align-items:center;gap:7px;margin-top:12px;color:#a49b96;font-size:10px}.demoNote i{width:17px;height:17px;border-radius:50%;background:#f4efec;display:grid;place-items:center;font-style:normal;font-weight:800}
.verifyToast{position:absolute;z-index:60;top:max(28px,env(safe-area-inset-top));left:50%;transform:translate(-50%,-18px);width:max-content;max-width:88%;background:#1f1c1a;color:#fff;border-radius:16px;padding:11px 14px;display:flex;align-items:center;gap:9px;font-size:11px;font-weight:700;opacity:0;pointer-events:none}.verifyToast i{width:22px;height:22px;border-radius:50%;background:#37a968;display:grid;place-items:center;font-style:normal}.verifyToast.show{animation:topToast 2s ease}
@keyframes helloPop{to{opacity:1;transform:scale(1) rotate(0)}}@keyframes topToast{0%{opacity:0;transform:translate(-50%,-18px)}15%,80%{opacity:1;transform:translate(-50%,0)}100%{opacity:0}}
@media(max-height:690px){.authBody{top:15%}.helloIcon{width:62px;height:62px;margin-bottom:15px}.authBody h2{font-size:29px}.authActions{bottom:18px}.authBtn{height:54px}.or{margin:11px 0}.terms{margin-top:10px}}


/* Desktop and short-screen login accessibility fix */
.loginScreen.active{overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
.loginScreen .loginCard{padding-bottom:42px}
@media (max-height:820px){.loginScreen .loginCard{top:90px}}
@media (max-height:650px){.loginScreen .loginCard{top:75px}.loginScreen .loginMark{width:52px;height:52px;margin-bottom:12px}.loginScreen .loginCard h2{font-size:29px}.loginScreen .loginCard>p{margin-bottom:14px}}

/* V9 — VERIFICATION CODE */
.verifyScreen{position:absolute;inset:0;z-index:70;background:linear-gradient(180deg,#fff8f4 0%,#fff 48%,#fffaf7 100%);opacity:0;visibility:hidden;transform:translateX(32px);transition:.52s cubic-bezier(.2,.85,.2,1);overflow:hidden}
.verifyScreen.active{opacity:1;visibility:visible;transform:none}
.auth.verifyOut{opacity:0;transform:translateX(-28px);pointer-events:none}
.vTop{position:absolute;top:max(24px,env(safe-area-inset-top));left:23px;right:23px;display:flex;align-items:center;justify-content:space-between;opacity:0}
.verifyScreen.active .vTop{animation:up .5s .15s forwards}
.backBtn{width:42px;height:42px;border:1px solid #eee4df;background:#fff;border-radius:14px;display:grid;place-items:center;color:#292522}.backBtn svg{width:19px}
.vStep{font:800 11px 'Manrope';color:#aaa19c;letter-spacing:1.2px}
.vBody{position:absolute;top:19%;left:24px;right:24px;text-align:center}
.vIcon{width:76px;height:76px;border-radius:25px;background:#fff0e8;margin:0 auto 22px;display:grid;place-items:center;color:var(--orange);opacity:0;transform:scale(.65)}.vIcon svg{width:35px}
.verifyScreen.active .vIcon{animation:helloPop .6s .25s cubic-bezier(.16,.9,.24,1.3) forwards}
.vBody h2{font:800 clamp(30px,8.5vw,40px)/1.08 'Manrope';letter-spacing:-1.6px;margin:0 0 10px;opacity:0}.vBody>p{margin:0 auto;max-width:330px;color:var(--muted);font-size:13px;line-height:1.55;opacity:0}.vBody>p b{color:#332e2b}
.verifyScreen.active .vBody h2{animation:up .55s .4s forwards}.verifyScreen.active .vBody>p{animation:up .55s .5s forwards}
.otpRow{display:flex;justify-content:center;gap:7px;margin:28px auto 0;opacity:0;transform:translateY(14px)}
.verifyScreen.active .otpRow{animation:up .55s .62s forwards}
.otp{width:46px;height:57px;border:1.5px solid #e8dfda;border-radius:15px;background:#fff;text-align:center;outline:0;font:800 21px 'Manrope';color:#25211f;caret-color:var(--orange);transition:.2s;box-shadow:0 5px 16px rgba(62,39,28,.025)}
.otp:focus{border-color:var(--orange);box-shadow:0 0 0 4px rgba(255,91,23,.08);transform:translateY(-2px)}
.resend{margin-top:22px;font-size:12px;color:#8f8782;opacity:0}.verifyScreen.active .resend{animation:up .5s .76s forwards}.resend button{border:0;background:transparent;padding:4px;color:var(--orange);font:800 12px 'DM Sans'}.resend button:disabled{color:#aaa29d}
.vHint{margin-top:13px;font-size:10px;color:#b1a9a4;opacity:0}.verifyScreen.active .vHint{animation:up .5s .84s forwards}
.verifyBtn{position:absolute;left:26px;right:26px;bottom:max(25px,calc(env(safe-area-inset-bottom) + 14px));height:61px;border:0;border-radius:19px;background:var(--orange);color:#fff;font:800 14px 'Manrope';box-shadow:0 12px 28px rgba(255,91,23,.25);opacity:0;transform:translateY(15px);transition:.2s}
.verifyScreen.active .verifyBtn{animation:up .55s .88s forwards}.verifyBtn:disabled{background:#ffc3a7;box-shadow:none}.verifyBtn:not(:disabled):active{scale:.985}
.successLayer{position:absolute;inset:0;z-index:90;background:rgba(255,255,255,.97);display:grid;place-items:center;opacity:0;visibility:hidden;transition:.3s}.successLayer.show{opacity:1;visibility:visible}
.successInner{text-align:center;transform:scale(.7);opacity:0}.successLayer.show .successInner{animation:successPop .55s .1s cubic-bezier(.17,.9,.25,1.3) forwards}
.checkRing{width:92px;height:92px;border-radius:50%;background:#eaf8ef;margin:0 auto 20px;display:grid;place-items:center}.checkRing i{width:58px;height:58px;border-radius:50%;background:#35aa68;color:#fff;display:grid;place-items:center;font:800 28px 'Manrope';font-style:normal;box-shadow:0 9px 22px rgba(53,170,104,.22)}
.successInner h3{font:800 26px 'Manrope';letter-spacing:-1px;margin:0 0 6px}.successInner p{margin:0;color:var(--muted);font-size:12px}
@keyframes successPop{to{opacity:1;transform:scale(1)}}
@keyframes shakeOtp{0%,100%{transform:translateX(0)}25%{transform:translateX(-5px)}75%{transform:translateX(5px)}}
@media(max-width:365px){.otpRow{gap:5px}.otp{width:42px;height:54px}}
@media(max-height:690px){.vBody{top:15%}.vIcon{width:62px;height:62px;margin-bottom:15px}.vBody h2{font-size:29px}.otpRow{margin-top:19px}.resend{margin-top:15px}.verifyBtn{height:55px;bottom:13px}}


/* V10 — COMPLETE SETUP + HOME + FOOD DETAILS + CART + CHECKOUT */
.flowScreen{position:absolute;inset:0;z-index:100;background:#fff;opacity:0;visibility:hidden;transform:translateX(28px);transition:.5s cubic-bezier(.2,.85,.2,1);overflow:hidden}
.flowScreen.active{opacity:1;visibility:visible;transform:none}
.flowTop{position:absolute;top:max(23px,env(safe-area-inset-top));left:22px;right:22px;display:flex;justify-content:space-between;align-items:center}
.flowBack{width:42px;height:42px;border:1px solid #eee6e1;background:#fff;border-radius:14px;display:grid;place-items:center;font-size:20px}
.flowStep{font:800 11px 'Manrope';letter-spacing:1.2px;color:#aaa19c}
.flowBody{position:absolute;left:26px;right:26px;top:18%}
.flowBody h2{font:800 clamp(30px,8.5vw,40px)/1.08 'Manrope';letter-spacing:-1.6px;margin:0 0 10px}.flowBody h2 span{color:var(--orange)}
.flowBody>p{color:var(--muted);font-size:14px;line-height:1.55;margin:0 0 27px}
.fieldLabel{display:block;font:700 11px 'DM Sans';color:#716a66;margin:0 0 8px}
.bigInput{width:100%;height:62px;border:1.5px solid #eae1dc;border-radius:18px;padding:0 17px;outline:0;font:600 15px 'DM Sans';background:#fff;transition:.2s}.bigInput:focus{border-color:var(--orange);box-shadow:0 0 0 4px rgba(255,91,23,.08)}
.flowNext{position:absolute;left:26px;right:26px;bottom:max(24px,calc(env(safe-area-inset-bottom) + 14px));height:61px;border:0;border-radius:19px;background:var(--orange);color:#fff;font:800 14px 'Manrope';box-shadow:0 12px 28px rgba(255,91,23,.24)}
.flowNext:active{scale:.985}
.avatarHello{width:70px;height:70px;border-radius:24px;background:#fff0e8;display:grid;place-items:center;font-size:29px;margin-bottom:22px}
.addressSearch{position:relative}.addressSearch svg{position:absolute;left:16px;top:21px;width:19px;color:#9e9590}.addressSearch .bigInput{padding-left:46px}
.currentLoc{width:100%;margin-top:12px;border:0;background:#fff5ef;border-radius:17px;padding:15px;display:flex;align-items:center;gap:11px;text-align:left;color:#332e2b}.currentLoc i{width:36px;height:36px;border-radius:12px;background:var(--orange);display:grid;place-items:center;color:#fff;font-style:normal}.currentLoc b{display:block;font:800 12px 'Manrope'}.currentLoc small{display:block;color:#8f8782;margin-top:2px}
.labels{display:flex;gap:9px;margin-top:20px}.labelChip{flex:1;height:47px;border:1px solid #ece3de;border-radius:15px;background:#fff;font:700 12px 'DM Sans'}.labelChip.on{background:#fff0e8;border-color:#ffb994;color:var(--orange)}
.loginTop{border:0;background:transparent;color:var(--orange);font:800 12px 'Manrope';padding:10px 3px}
.loginScreen{position:absolute;inset:0;z-index:95;background:linear-gradient(180deg,#fff8f4,#fff 48%);opacity:0;visibility:hidden;transform:translateX(28px);transition:.5s cubic-bezier(.2,.85,.2,1)}
.loginScreen.active{opacity:1;visibility:visible;transform:none}
.loginCard{position:absolute;left:25px;right:25px;top:18%}.loginMark{width:67px;height:67px;border-radius:22px;background:#fff0e8;color:var(--orange);display:grid;place-items:center;margin-bottom:22px}.loginMark svg{width:31px}
.loginCard h2{font:800 34px/1.08 'Manrope';letter-spacing:-1.5px;margin:0 0 9px}.loginCard h2 span{color:var(--orange)}.loginCard>p{font-size:13px;color:var(--muted);line-height:1.55;margin:0 0 24px}
.loginTabs{height:45px;background:#f7f3f1;border-radius:14px;padding:4px;display:flex;margin-bottom:14px}.loginTabs button{flex:1;border:0;border-radius:11px;background:transparent;font:700 11px 'DM Sans';color:#8e8580}.loginTabs button.on{background:#fff;color:#292522;box-shadow:0 3px 10px rgba(50,32,23,.06)}
.loginField{height:59px;border:1.5px solid #eae1dc;border-radius:17px;display:flex;align-items:center;padding:0 15px;margin-bottom:11px}.loginField:focus-within{border-color:var(--orange);box-shadow:0 0 0 4px rgba(255,91,23,.07)}.loginField span{font:700 12px 'DM Sans';padding-right:10px;margin-right:10px;border-right:1px solid #eee5e1}.loginField input{width:100%;border:0;outline:0;font:600 14px 'DM Sans';background:transparent}
.loginSubmit{width:100%;height:58px;border:0;border-radius:17px;background:var(--orange);color:#fff;font:800 13px 'Manrope';box-shadow:0 10px 24px rgba(255,91,23,.22)}.loginDemo{text-align:center;color:#aaa19c;font-size:9px;margin-top:12px}

/* ============ TASTYGO PREMIUM v2 ============ */
:root{--deep:#1d120c;--ember:#ff7a2f;--gold:#f6b53b;--leaf:#1c8a55;--line:#f1e6de;--soft:#fff4ec;--sh:0 18px 38px -12px rgba(120,52,14,.26)}
@media(min-width:561px){html,body{background:#120a06}.app{left:50%;right:auto;width:430px;transform:translateX(-50%);box-shadow:0 0 90px rgba(0,0,0,.6)}}
button{font-family:inherit;cursor:pointer;color:inherit}
input,textarea{font-family:inherit}
.ic{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex:none;display:block}
.d{fill:currentColor;fill-opacity:.17;stroke:none}.f{fill:currentColor;stroke:none}
.noScroll{scrollbar-width:none}.noScroll::-webkit-scrollbar{display:none}

/* 3D press buttons */
.b3d{border:0;color:#fff;font:800 15px 'Manrope',sans-serif;letter-spacing:-.2px;height:58px;border-radius:19px;display:flex;align-items:center;justify-content:center;gap:10px;background:linear-gradient(180deg,#ff8444 0,#ff5b17 55%,#f04a08 100%);box-shadow:inset 0 2px 0 rgba(255,255,255,.38),inset 0 -2px 0 rgba(0,0,0,.08),0 6px 0 #bf3a05,0 16px 26px -4px rgba(255,91,23,.45);transition:transform .12s ease,box-shadow .12s ease;position:relative;overflow:hidden}
.b3d:after{content:"";position:absolute;top:0;bottom:0;left:-60%;width:40%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.35),transparent);transform:skewX(-20deg);animation:shine 3.6s 1.2s infinite}
.b3d:active{transform:translateY(5px);box-shadow:inset 0 2px 0 rgba(255,255,255,.3),0 1px 0 #bf3a05,0 6px 12px -2px rgba(255,91,23,.4)}
.b3d:disabled{filter:grayscale(.5) brightness(1.1);opacity:.6}
.b3d .ic{width:20px;height:20px;stroke-width:2.2}
.b3dGhost{border:1.5px solid #eadcd2;background:#fff;color:var(--ink);font:800 14px 'Manrope';height:54px;border-radius:18px;display:flex;align-items:center;justify-content:center;gap:9px;box-shadow:0 4px 0 #eadcd2;transition:transform .12s,box-shadow .12s}
.b3dGhost:active{transform:translateY(3px);box-shadow:0 1px 0 #eadcd2}
@keyframes shine{0%,60%{left:-60%}100%{left:140%}}
.roundBtn{width:46px;height:46px;border-radius:16px;border:0;background:linear-gradient(180deg,#fff,#fdf1e8);color:var(--ink);display:grid;place-items:center;position:relative;box-shadow:inset 0 1px 0 #fff,0 4px 0 #f0dfd3,0 12px 20px -6px rgba(120,52,14,.25);transition:transform .12s,box-shadow .12s}
.roundBtn:active{transform:translateY(3px);box-shadow:0 1px 0 #f0dfd3,0 4px 8px -4px rgba(120,52,14,.2)}
.dotBadge{position:absolute;right:11px;top:11px;width:8px;height:8px;border-radius:50%;background:var(--orange);border:2px solid #fff}

/* screens */
.home{position:absolute;inset:0;z-index:130;background:#fff9f4;opacity:0;visibility:hidden;transform:translateY(24px) scale(.99);transition:opacity .45s ease,transform .6s cubic-bezier(.2,.9,.25,1),visibility 0s .6s;overflow:hidden}
.home.active{opacity:1;visibility:visible;transform:none;transition-delay:0s}
.home:before{content:"";position:absolute;right:-90px;top:-110px;width:330px;height:330px;border-radius:50%;background:radial-gradient(circle,rgba(255,122,47,.22),rgba(255,122,47,0) 68%);pointer-events:none}
.tab{position:absolute;inset:0;overflow-y:auto;padding-bottom:128px;opacity:0;visibility:hidden;transform:translateX(22px);transition:opacity .32s ease,transform .42s cubic-bezier(.2,.9,.25,1),visibility 0s .42s;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.tab::-webkit-scrollbar{display:none}
.tab.on{opacity:1;visibility:visible;transform:none;transition-delay:0s}
.home:not(.active){pointer-events:none}.home:not(.active) .tab{visibility:hidden!important}
.hHead{display:flex;align-items:center;gap:12px;padding:max(22px,env(safe-area-inset-top)) 20px 0;position:relative}
.avatar3d{width:48px;height:48px;border-radius:17px;border:0;background:linear-gradient(145deg,#ffcf5a,#ff8a2b);color:#fff;font:800 19px 'Manrope';display:grid;place-items:center;box-shadow:inset 0 2px 0 rgba(255,255,255,.5),0 5px 0 #d16a12,0 14px 20px -6px rgba(255,138,43,.55);transition:transform .12s}
.avatar3d:active{transform:scale(.97)}
/* Flat, clean profile initials */
.avatar3d,.pCard .avatar3d{background:#fff0e7!important;color:#e95a21!important;border:1px solid #ffdcc8!important;box-shadow:none!important;border-radius:50%!important;transform:none!important}
.deliver{flex:1;min-width:0;text-align:left;border:0;background:none;padding:0}
.deliver small{display:block;font-size:11px;font-weight:600;color:var(--muted)}
.deliver b{display:flex;align-items:center;gap:6px;font:800 14px 'Manrope';letter-spacing:-.3px;color:var(--ink);margin-top:2px}
.deliver b .ic{width:16px;height:16px;color:var(--orange)}.deliver b .chev{width:14px;height:14px;color:#a59b95;margin-left:-1px}
.deliver b span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:180px}
.hello{padding:20px 20px 0}.hello p{margin:0 0 4px;font-size:13px;color:var(--muted);font-weight:500}
.hello h2{margin:0;font:800 29px/1.12 'Manrope';letter-spacing:-1.3px;color:var(--ink)}
.hello h2 em{font-style:normal;background:linear-gradient(90deg,#ff5b17,#ff9a3d);-webkit-background-clip:text;background-clip:text;color:transparent}
.srchBar{margin:18px 20px 0;height:58px;border-radius:20px;border:0;width:calc(100% - 40px);display:flex;align-items:center;gap:12px;padding:0 9px 0 17px;text-align:left;background:linear-gradient(180deg,#fff,#fffaf6);color:#a2968f;font:600 14px 'DM Sans';box-shadow:inset 0 1px 0 #fff,0 0 0 1.5px #f6e6da,0 14px 28px -12px rgba(120,52,14,.3);position:relative}
.srchBar>.ic{color:var(--orange);width:21px;height:21px}
.srchBar span{flex:1}
.srchBar i{width:42px;height:42px;border-radius:14px;background:var(--deep);color:#fff;display:grid;place-items:center;box-shadow:0 3px 0 #000}
.srchBar i .ic{width:18px;height:18px}
.srchBar:active{transform:scale(.99)}

/* promo */
.promoWrap{padding:20px 20px 0;overflow:hidden}
.promoTrack{display:flex;gap:11px;transition:transform .6s cubic-bezier(.2,.8,.2,1)}
.promoSlide{flex:0 0 100%;height:158px;border-radius:28px;position:relative;overflow:visible;padding:20px 0 0 20px;color:#fff;background:radial-gradient(circle at 85% 20%,#ff7a2f 0,rgba(255,122,47,0) 45%),linear-gradient(135deg,#2a160d,#4b210f 70%,#6b2a0e);box-shadow:inset 0 1px 0 rgba(255,255,255,.18),0 18px 30px -12px rgba(75,33,15,.6)}
.promoSlide:nth-child(2){background:radial-gradient(circle at 85% 20%,#f6b53b 0,rgba(246,181,59,0) 45%),linear-gradient(135deg,#0f2a1d,#134a30 75%,#1c6a45)}
.promoSlide:nth-child(3){background:radial-gradient(circle at 85% 20%,#ff5b8a 0,rgba(255,91,138,0) 45%),linear-gradient(135deg,#2a0f1b,#4a1830 75%,#6a2243)}
.promoText{width:56%;position:relative;z-index:2}
.promoText small{display:inline-block;padding:5px 10px;border-radius:30px;background:rgba(255,255,255,.16);font:800 10px 'Manrope';letter-spacing:.3px}
.promoText h3{margin:10px 0 5px;font:800 19px/1.14 'Manrope';letter-spacing:-.7px}
.promoText p{margin:0;font-size:12px;opacity:.78;line-height:1.4}
.promoSlide img{position:absolute;right:-12px;top:-16px;width:158px;height:158px;object-fit:contain;filter:drop-shadow(0 18px 14px rgba(0,0,0,.45));animation:floaty 4.5s ease-in-out infinite}
@keyframes floaty{50%{transform:translateY(-8px) rotate(3deg)}}
.promoDots{display:flex;justify-content:center;gap:6px;padding-top:13px}
.promoDots button{width:6px;height:6px;border:0;border-radius:6px;background:#e5d9d0;padding:0;transition:.3s}.promoDots button.on{width:24px;background:var(--orange)}

/* categories */
.catRow{display:flex;gap:12px;overflow-x:auto;padding:22px 20px 8px;scrollbar-width:none}.catRow::-webkit-scrollbar{display:none}
.ctile{flex:none;width:68px;border:0;background:none;padding:0;text-align:center;font:700 12px 'Manrope';color:#7a6e67}
.ctile u{display:grid;place-items:center;width:68px;height:68px;border-radius:24px;background:linear-gradient(160deg,#fff,#fff0e6);color:var(--orange);margin-bottom:8px;text-decoration:none;box-shadow:inset 0 2px 0 #fff,0 5px 0 #f1ddd0,0 14px 20px -8px rgba(120,52,14,.3);transition:transform .15s,box-shadow .15s}
.ctile u .ic{width:30px;height:30px;stroke-width:1.6}
.ctile:active u{transform:translateY(4px);box-shadow:0 1px 0 #f1ddd0}
.ctile.on{color:var(--ink)}
.ctile.on u{background:linear-gradient(160deg,#ff8444,#f04a08);color:#fff;box-shadow:inset 0 2px 0 rgba(255,255,255,.4),0 5px 0 #bf3a05,0 14px 22px -8px rgba(255,91,23,.6)}
.secT{display:flex;justify-content:space-between;align-items:center;padding:20px 20px 8px}
.secT h3{margin:0;font:800 19px 'Manrope';letter-spacing:-.7px}
.secT button{border:0;background:none;color:var(--orange);font:800 12px 'Manrope';padding:6px 0}

/* grid cards (3D pop-out) */
.fgrid{display:grid;grid-template-columns:1fr 1fr;gap:56px 13px;padding:54px 20px 6px}
.fcard{position:relative;border-radius:28px;padding:86px 14px 14px;background:linear-gradient(165deg,#fff 0,#fff3ea 100%);box-shadow:inset 0 2px 0 #fff,0 4px 0 #f1ddd0,0 22px 30px -14px rgba(120,52,14,.34);transform:perspective(800px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));transition:transform .28s cubic-bezier(.2,.8,.2,1);transform-style:preserve-3d;cursor:pointer}
.fcard .pop{position:absolute;left:50%;top:-42px;width:132px;height:132px;transform:translateX(-50%) translateZ(50px);pointer-events:none}
.fcard .pop:before{content:"";position:absolute;left:14%;right:14%;bottom:6px;height:16px;border-radius:50%;background:rgba(80,35,10,.22);filter:blur(7px)}
.fcard .pop img,.row .rimg img,.dImg img{filter:drop-shadow(0 12px 10px rgba(80,35,10,.28))}
.fcard .pop img{position:relative;width:100%;height:100%;object-fit:contain;animation:popFood .7s cubic-bezier(.2,1.4,.3,1) both}
@keyframes popFood{0%{transform:scale(.4) translateY(30px) rotate(-18deg);opacity:0}100%{transform:none;opacity:1}}
.fcard h4{margin:0;font:800 14.5px/1.2 'Manrope';letter-spacing:-.4px;min-height:34px;color:var(--ink)}
.fmeta{display:flex;align-items:center;gap:10px;margin:7px 0 11px;font-size:11.5px;color:var(--muted);font-weight:600}
.fmeta span{display:flex;align-items:center;gap:4px}.fmeta .ic{width:13px;height:13px}.fmeta .st{color:var(--gold)}.fmeta .st .ic{stroke:none;fill:currentColor}
.fbot{display:flex;align-items:center;justify-content:space-between}
.fprice{font:800 16px 'Manrope';letter-spacing:-.5px;color:var(--ink)}.fprice small{color:var(--orange);font-size:13px;margin-right:1px}
.add3d{width:40px;height:40px;border:0;border-radius:14px;color:#fff;display:grid;place-items:center;background:linear-gradient(180deg,#ff8444,#f04a08);box-shadow:inset 0 2px 0 rgba(255,255,255,.4),0 4px 0 #bf3a05,0 10px 16px -4px rgba(255,91,23,.5);transition:transform .12s,box-shadow .12s;transform:translateZ(30px)}
.add3d:active{transform:translateY(3px) translateZ(30px);box-shadow:0 1px 0 #bf3a05}
.add3d .ic{width:19px;height:19px;stroke-width:2.4}
.heartMini{position:absolute;right:12px;top:12px;width:34px;height:34px;border-radius:12px;border:0;background:rgba(255,255,255,.9);color:#c5b8b0;display:grid;place-items:center;box-shadow:0 5px 12px -4px rgba(120,52,14,.3);z-index:3;transform:translateZ(70px);transition:transform .2s}
.heartMini .ic{width:17px;height:17px}.heartMini.on{color:#ff3d57}.heartMini.on .ic{fill:#ff3d57}.heartMini:active{transform:translateZ(70px) scale(.85)}
.heartMini.pulse{animation:heartPop .45s}
@keyframes heartPop{40%{transform:translateZ(70px) scale(1.4)}}

/* list rows */
.rows{padding:2px 20px 0;display:grid;gap:12px}
.row{display:flex;align-items:center;gap:14px;padding:12px 14px 12px 12px;border-radius:26px;background:#fff;box-shadow:inset 0 2px 0 #fff,0 3px 0 #f4e4d9,0 16px 26px -14px rgba(120,52,14,.3);cursor:pointer;position:relative;transition:transform .2s}
.row:active{transform:scale(.985)}
.row .rimg{width:92px;height:92px;flex:none;border-radius:24px;background:radial-gradient(circle at 50% 35%,#fff0e4,#ffd7bf);display:grid;place-items:center;position:relative}
.row .rimg img{width:104px;height:104px;object-fit:contain;margin:-14px;position:relative}
.row .rinfo{flex:1;min-width:0}.row h4{margin:0;font:800 15px/1.2 'Manrope';letter-spacing:-.4px}
.row p{margin:4px 0 8px;font-size:11.5px;color:var(--muted);font-weight:600;display:flex;gap:9px;align-items:center}
.row p .ic{width:13px;height:13px;vertical-align:-2px}.row p .st{color:var(--gold);display:flex;align-items:center;gap:3px}.row p .st .ic{stroke:none;fill:currentColor}
.row .fbot{gap:8px}
.tagHot{display:inline-flex;align-items:center;gap:3px;color:#e5360a;font-weight:800}.tagHot .ic{width:12px;height:12px;stroke:none;fill:currentColor}

/* menu tab */
.pageT{padding:max(24px,env(safe-area-inset-top)) 20px 0}.pageT h2{margin:0;font:800 29px 'Manrope';letter-spacing:-1.3px}.pageT p{margin:5px 0 0;font-size:13px;color:var(--muted)}
.fieldS{margin:16px 20px 0;height:52px;border-radius:18px;background:#fff;display:flex;align-items:center;gap:10px;padding:0 15px;box-shadow:0 0 0 1.5px #f3e4d9,0 10px 20px -12px rgba(120,52,14,.3)}
.fieldS .ic{color:var(--orange)}.fieldS input{flex:1;border:0;outline:0;background:none;font:600 14px 'DM Sans';color:var(--ink);min-width:0}
.chipRow{display:flex;gap:9px;overflow-x:auto;padding:16px 20px 12px;position:sticky;top:0;z-index:5;background:linear-gradient(180deg,#fff9f4 80%,rgba(255,249,244,0))}.chipRow::-webkit-scrollbar{display:none}
.fchip{flex:none;height:40px;padding:0 16px;border:0;border-radius:15px;background:#fff;color:#6f635c;font:800 13px 'Manrope';display:flex;align-items:center;gap:7px;box-shadow:0 0 0 1.5px #f3e4d9,0 3px 0 #f3e4d9;transition:.15s}
.fchip .ic{width:17px;height:17px}.fchip.on{background:var(--deep);color:#fff;box-shadow:0 3px 0 #000}.fchip:active{transform:translateY(2px)}
.empty{text-align:center;padding:50px 34px;color:var(--muted);font-size:13.5px;line-height:1.55}
.empty u{display:grid;place-items:center;width:84px;height:84px;margin:0 auto 18px;border-radius:30px;background:linear-gradient(160deg,#fff,#ffeadd);color:var(--orange);text-decoration:none;box-shadow:0 5px 0 #f1ddd0,0 18px 26px -10px rgba(120,52,14,.3);animation:floaty 4s ease-in-out infinite}
.empty u .ic{width:38px;height:38px;stroke-width:1.5}.empty h3{margin:0 0 6px;color:var(--ink);font:800 19px 'Manrope';letter-spacing:-.6px}

/* profile */
.pCard{margin:20px;padding:22px;border-radius:30px;color:#fff;background:radial-gradient(circle at 90% 0,rgba(255,122,47,.6),rgba(255,122,47,0) 55%),linear-gradient(145deg,#2a160d,#4b210f);box-shadow:0 22px 34px -14px rgba(75,33,15,.7);display:flex;align-items:center;gap:15px}
.pCard .avatar3d{width:62px;height:62px;border-radius:22px;font-size:25px}
.pCard b{display:block;font:800 21px 'Manrope';letter-spacing:-.7px}.pCard span{font-size:12.5px;opacity:.7}
.pItem{margin:0 20px 12px;padding:15px;border-radius:22px;background:#fff;display:flex;align-items:center;gap:14px;box-shadow:0 3px 0 #f4e4d9,0 14px 22px -14px rgba(120,52,14,.3);width:calc(100% - 40px);border:0;text-align:left}
.pItem u{width:46px;height:46px;border-radius:16px;background:var(--soft);color:var(--orange);display:grid;place-items:center;text-decoration:none;flex:none}
.pItem div{flex:1;min-width:0}.pItem b{display:block;font:800 14px 'Manrope';letter-spacing:-.3px}.pItem small{display:block;color:var(--muted);font-size:12px;margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pItem>.ic{color:#c6b9b0;width:18px;height:18px}
.oRow{display:flex;justify-content:space-between;align-items:center;margin:0 20px 10px;padding:14px 16px;border-radius:20px;background:#fff;box-shadow:0 0 0 1.5px #f6eadf}
.oRow b{font:800 13.5px 'Manrope'}.oRow small{display:block;color:var(--muted);font-size:11.5px;margin-top:2px}.oRow strong{font:800 14px 'Manrope';color:var(--orange)}
.subH{margin:24px 20px 12px;font:800 16px 'Manrope';letter-spacing:-.4px}

/* floating nav */
.bottomNav{position:absolute;z-index:150;left:14px;right:14px;bottom:max(14px,env(safe-area-inset-bottom));height:68px;border-radius:26px;background:rgba(29,18,12,.94);-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);display:flex;align-items:center;justify-content:space-around;padding:0 8px;box-shadow:inset 0 1px 0 rgba(255,255,255,.12),0 22px 36px -10px rgba(29,18,12,.6);transition:transform .5s cubic-bezier(.2,.9,.25,1)}
.bottomNav.hide{transform:translateY(160%);opacity:0;visibility:hidden;pointer-events:none}
.navItem{position:relative;width:52px;height:52px;border:0;background:none;color:#a89a91;display:grid;place-items:center;transition:color .2s,transform .2s}
.navItem .ic{width:23px;height:23px}
.navItem.on{color:#fff}.navItem.on .ic{transform:translateY(-2px)}
.navItem.on:after{content:"";position:absolute;bottom:5px;left:50%;width:5px;height:5px;margin-left:-2.5px;border-radius:50%;background:var(--orange);box-shadow:0 0 10px var(--orange)}
.navItem:active{transform:scale(.88)}
.navItem.navCart{width:62px;height:62px;margin-top:-30px;border-radius:22px;color:#fff;background:linear-gradient(180deg,#ff8444,#f04a08);box-shadow:inset 0 2px 0 rgba(255,255,255,.4),0 6px 0 #bf3a05,0 18px 26px -6px rgba(255,91,23,.65),0 0 0 6px #fff9f4}
.navItem.navCart:after{display:none}.navItem.navCart .ic{width:26px;height:26px}
.navItem.navCart:active{transform:translateY(5px);box-shadow:inset 0 2px 0 rgba(255,255,255,.3),0 1px 0 #bf3a05,0 6px 12px -2px rgba(255,91,23,.5),0 0 0 6px #fff9f4}
.badge{position:absolute;right:-5px;top:-6px;min-width:22px;height:22px;padding:0 6px;border-radius:12px;background:var(--deep);color:#fff;font:800 11.5px/22px 'Manrope';text-align:center;border:2px solid #fff9f4;transform:scale(0);transition:transform .35s cubic-bezier(.2,1.6,.3,1)}
.badge.show{transform:scale(1)}.badge.bump{animation:bump .5s}
@keyframes bump{30%{transform:scale(1.5)}60%{transform:scale(.9)}}
.snack{position:absolute;z-index:160;left:18px;right:18px;bottom:calc(100px + env(safe-area-inset-bottom));padding:12px 12px 12px 16px;border-radius:20px;background:var(--deep);color:#fff;display:flex;align-items:center;gap:10px;font:600 13px 'DM Sans';box-shadow:0 18px 30px -8px rgba(0,0,0,.5);opacity:0;visibility:hidden;transform:translateY(20px) scale(.96);transition:.4s cubic-bezier(.2,1.2,.3,1)}
.snack.show{opacity:1;visibility:visible;transform:none}.snack .ic{color:#47d58a;width:20px;height:20px;stroke-width:2.4}.snack span{flex:1}
.snack button{border:0;border-radius:12px;background:var(--orange);color:#fff;font:800 12px 'Manrope';padding:9px 13px}
.flyImg{position:absolute;z-index:400;pointer-events:none;object-fit:contain;filter:drop-shadow(0 10px 10px rgba(0,0,0,.3))}

/* generic full screen */
.scr{position:absolute;inset:0;background:#fff9f4;opacity:0;visibility:hidden;transform:translateY(40px) scale(.985);transition:opacity .38s ease,transform .55s cubic-bezier(.2,.9,.25,1),visibility 0s .55s;overflow:hidden;display:flex;flex-direction:column}
.scr.active{opacity:1;visibility:visible;transform:none;transition-delay:0s}
.scrTop{display:flex;align-items:center;justify-content:space-between;padding:max(22px,env(safe-area-inset-top)) 20px 10px;flex:none}
.scrTop h3{margin:0;font:800 18px 'Manrope';letter-spacing:-.5px}
.scrBody{flex:1;overflow-y:auto;padding:6px 20px 24px;scrollbar-width:none}.scrBody::-webkit-scrollbar{display:none}
.scrFoot{flex:none;padding:12px 20px max(16px,env(safe-area-inset-bottom));background:linear-gradient(180deg,rgba(255,249,244,0),#fff9f4 30%)}

/* details */
#details{z-index:170;background:#fff9f4}
.dHero{height:44vh;min-height:330px;max-height:400px;position:relative;flex:none;background:radial-gradient(circle at 50% 55%,#ffe2d0 0,#ffd0b4 38%,rgba(255,208,180,0) 70%),linear-gradient(180deg,#fff0e6,#fff9f4);display:grid;place-items:center;perspective:900px}
.dHero .dTop{position:absolute;top:0;left:0;right:0;display:flex;justify-content:space-between;align-items:center;padding:max(22px,env(safe-area-inset-top)) 20px 0;z-index:3}
.dHero .dTop h3{margin:0;font:800 16px 'Manrope'}
.dRing{position:absolute;width:290px;height:290px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#fff,#ffe9dc 55%,#ffd4bb);box-shadow:inset 0 -14px 24px rgba(255,91,23,.12),0 30px 40px -14px rgba(120,52,14,.35);top:58px;transform:rotateX(14deg)}
.dRing:after{content:"";position:absolute;inset:26px;border-radius:50%;border:2px dashed rgba(255,91,23,.22);animation:spin 40s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.dImg{position:relative;z-index:2;width:290px;height:290px;margin-top:26px;transform:perspective(900px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));transition:transform .25s}
.dImg img{width:100%;height:100%;object-fit:contain;animation:dPop .85s cubic-bezier(.2,1.3,.3,1) both,floaty 5s 1s ease-in-out infinite}
@keyframes dPop{0%{transform:scale(.3) rotate(-40deg) translateY(60px);opacity:0}100%{transform:none;opacity:1}}
.dSheet{margin-top:-28px;position:relative;z-index:4;border-radius:34px 34px 0 0;background:#fff;padding:24px 22px 28px;box-shadow:0 -18px 30px -16px rgba(120,52,14,.25);flex:1;overflow-y:auto;scrollbar-width:none}.dSheet::-webkit-scrollbar{display:none}
.dTitle{display:flex;justify-content:space-between;gap:12px;align-items:flex-start}
.dTitle h2{margin:0;font:800 25px/1.12 'Manrope';letter-spacing:-1px}
.dPrice{font:800 23px 'Manrope';letter-spacing:-.8px;color:var(--orange);white-space:nowrap}
.dTags{display:flex;gap:8px;flex-wrap:wrap;margin:14px 0 4px}
.dTags span{display:flex;align-items:center;gap:6px;height:34px;padding:0 12px;border-radius:12px;background:var(--soft);font:700 12px 'Manrope';color:#6b5d54}
.dTags .ic{width:15px;height:15px;color:var(--orange)}.dTags .st .ic{color:var(--gold)}
.dSheet h4{margin:20px 0 8px;font:800 15px 'Manrope';letter-spacing:-.3px}
.dSheet>p{margin:0;font-size:13.5px;line-height:1.6;color:#7a6e67}
.spice{display:grid;grid-template-columns:repeat(3,1fr);gap:9px}
.spice button{height:50px;border:0;border-radius:16px;background:#fff;color:#7a6e67;font:800 12.5px 'Manrope';display:flex;align-items:center;justify-content:center;gap:5px;box-shadow:0 0 0 1.5px #f1e3d8,0 3px 0 #f1e3d8;transition:.15s}
.spice button .ic{width:15px;height:15px;stroke:none;fill:currentColor}
.spice button.on{background:#fff0e8;color:#e5360a;box-shadow:0 0 0 2px var(--orange),0 3px 0 #f2b79a}
.spice button:active{transform:translateY(2px)}
.xtra{display:flex;align-items:center;gap:12px;width:100%;padding:12px 14px;margin-bottom:9px;border:0;border-radius:18px;background:#fff;text-align:left;box-shadow:0 0 0 1.5px #f1e3d8}
.xtra u{width:26px;height:26px;border-radius:9px;border:2px solid #e2d3c8;display:grid;place-items:center;color:#fff;text-decoration:none;transition:.2s;flex:none}
.xtra u .ic{width:15px;height:15px;stroke-width:3;transform:scale(0);transition:.25s cubic-bezier(.2,1.6,.3,1)}
.xtra b{flex:1;font:700 13.5px 'DM Sans'}.xtra em{font:800 13px 'Manrope';font-style:normal;color:var(--muted)}
.xtra.on{box-shadow:0 0 0 2px var(--orange);background:#fff8f3}.xtra.on u{background:var(--orange);border-color:var(--orange)}.xtra.on u .ic{transform:scale(1)}
.dFoot{display:flex;gap:12px;align-items:center;padding:12px 20px max(16px,env(safe-area-inset-bottom));background:#fff;box-shadow:0 -12px 24px -14px rgba(120,52,14,.25);flex:none;position:relative;z-index:5}
.qty{display:flex;align-items:center;height:58px;border-radius:19px;background:var(--soft);padding:0 5px;gap:2px}
.qty button{width:40px;height:44px;border:0;border-radius:14px;background:#fff;display:grid;place-items:center;color:var(--ink);box-shadow:0 3px 0 #f0dccf;transition:.12s}
.qty button:active{transform:translateY(2px);box-shadow:0 1px 0 #f0dccf}.qty button .ic{width:18px;height:18px;stroke-width:2.4}
.qty b{min-width:34px;text-align:center;font:800 17px 'Manrope'}
.qty b.tick{animation:tick .3s}@keyframes tick{40%{transform:scale(1.3)}}
.dFoot .b3d{flex:1}.dFoot .b3d span{opacity:.6;font-weight:600;margin:0 -2px}

/* cart */
#cartSheet{z-index:210}
.cItem{display:flex;align-items:center;gap:13px;padding:12px;margin-bottom:12px;border-radius:24px;background:#fff;box-shadow:0 3px 0 #f4e4d9,0 14px 22px -14px rgba(120,52,14,.3);animation:cIn .5s cubic-bezier(.2,1.2,.3,1) both}
@keyframes cIn{from{opacity:0;transform:translateY(16px) scale(.96)}}
.cItem .cimg{width:76px;height:76px;flex:none;border-radius:20px;background:radial-gradient(circle at 50% 35%,#fff0e4,#ffd7bf);display:grid;place-items:center}
.cItem .cimg img{width:86px;height:86px;object-fit:contain;margin:-8px;filter:drop-shadow(0 8px 8px rgba(80,35,10,.3))}
.cItem .cinfo{flex:1;min-width:0}.cItem h4{margin:0;font:800 14.5px/1.2 'Manrope';letter-spacing:-.4px}
.cItem small{display:block;color:var(--muted);font-size:11.5px;margin:3px 0 7px;line-height:1.35}
.cItem .cbot{display:flex;align-items:center;justify-content:space-between}
.cItem .cprice{font:800 15px 'Manrope';color:var(--ink)}
.miniQ{display:flex;align-items:center;gap:2px;background:var(--soft);border-radius:13px;padding:3px}
.miniQ button{width:28px;height:28px;border:0;border-radius:10px;background:#fff;display:grid;place-items:center;box-shadow:0 2px 0 #f0dccf}.miniQ button .ic{width:14px;height:14px;stroke-width:2.6}
.miniQ b{min-width:24px;text-align:center;font:800 13px 'Manrope'}
.cDel{width:34px;height:34px;border:0;border-radius:12px;background:#fff1ee;color:#e5483a;display:grid;place-items:center;align-self:flex-start}.cDel .ic{width:17px;height:17px}
.sumBox{margin-top:8px;padding:18px;border-radius:26px;background:#fff;box-shadow:0 0 0 1.5px #f6eadf}
.sumRow{display:flex;justify-content:space-between;align-items:center;padding:6px 0;font-size:13.5px;color:#7a6e67}.sumRow b{font:800 14px 'Manrope';color:var(--ink)}
.sumRow.total{margin-top:8px;padding-top:14px;border-top:1.5px dashed #ecdccf;font:800 15px 'Manrope';color:var(--ink)}.sumRow.total b{font-size:21px;color:var(--orange);letter-spacing:-.7px}

/* checkout */
#checkout{z-index:230}
.stepper{display:flex;gap:7px;padding:0 20px 8px}.stepper i{flex:1;height:5px;border-radius:5px;background:#eddccf;overflow:hidden;position:relative}.stepper i:after{content:"";position:absolute;inset:0;background:var(--orange);transform:scaleX(0);transform-origin:left;transition:transform .6s cubic-bezier(.2,.9,.3,1)}.stepper i.on:after{transform:none}
.pane{display:none}.pane.on{display:block;animation:paneIn .5s cubic-bezier(.2,.9,.25,1)}
@keyframes paneIn{from{opacity:0;transform:translateX(26px)}}
.coH{margin:18px 0 10px;font:800 17px 'Manrope';letter-spacing:-.5px}.coH:first-child{margin-top:6px}
.locCard{border-radius:28px;background:#fff;overflow:hidden;box-shadow:0 0 0 1.5px #f6eadf,0 18px 28px -16px rgba(120,52,14,.35)}
.miniMap{height:132px;position:relative;overflow:hidden;background:#f5f1ea}
.miniMap:before{content:"";position:absolute;inset:-20px;background-image:linear-gradient(#fff 3px,transparent 3px),linear-gradient(90deg,#fff 3px,transparent 3px),linear-gradient(rgba(0,0,0,.025) 1px,transparent 1px),linear-gradient(90deg,rgba(0,0,0,.025) 1px,transparent 1px);background-size:64px 64px,64px 64px,16px 16px,16px 16px;transform:rotate(-8deg)}
.miniMap:after{content:"";position:absolute;right:-30px;top:-10px;width:90px;height:190px;background:#d9eef0;border-radius:50% 0 0 50%;transform:rotate(8deg)}
.mmRoute{position:absolute;left:18%;right:22%;top:44%;height:3px;background:repeating-linear-gradient(90deg,var(--orange) 0 9px,transparent 9px 16px);transform:rotate(-8deg);z-index:2;border-radius:3px}
.mmPin{position:absolute;z-index:3;display:grid;place-items:center;width:38px;height:38px;border-radius:50% 50% 50% 8px;transform:rotate(-45deg);box-shadow:0 10px 14px -4px rgba(0,0,0,.35)}
.mmPin .ic{transform:rotate(45deg);width:18px;height:18px;color:#fff;stroke-width:2}
.mmPin.k{left:12%;top:26%;background:var(--deep)}.mmPin.u{right:20%;top:38%;background:var(--orange);animation:pinDrop .8s .3s cubic-bezier(.2,1.5,.3,1) both}
@keyframes pinDrop{from{opacity:0;transform:rotate(-45deg) translate(-18px,-50px)}}
.mmChip{position:absolute;left:12px;bottom:12px;z-index:4;padding:7px 11px;border-radius:12px;background:rgba(255,255,255,.95);font:800 11.5px 'Manrope';display:flex;align-items:center;gap:6px;box-shadow:0 6px 14px -6px rgba(0,0,0,.3)}.mmChip .ic{width:14px;height:14px;color:var(--orange)}
.locInfo{padding:16px 18px 6px}.locInfo small{color:var(--muted);font-size:11.5px;font-weight:600}.locInfo b{display:block;font:800 16px/1.3 'Manrope';letter-spacing:-.4px;margin-top:3px}
.askRow{display:grid;grid-template-columns:1fr 1fr;gap:9px;padding:12px 14px 14px}
.askRow button{height:50px;border:0;border-radius:16px;font:800 13px 'Manrope';display:flex;align-items:center;justify-content:center;gap:7px;background:#fff;color:#6b5d54;box-shadow:0 0 0 1.5px #eddcce,0 3px 0 #eddcce;transition:.15s}
.askRow button .ic{width:17px;height:17px;stroke-width:2.2}
.askRow button.on{background:#f1fbf5;color:var(--leaf);box-shadow:0 0 0 2px var(--leaf),0 3px 0 #a5d7bc}
.askRow button:active{transform:translateY(2px)}
.feeCard{display:flex;align-items:center;gap:14px;padding:16px;border-radius:24px;background:linear-gradient(135deg,#2a160d,#4b210f);color:#fff;box-shadow:0 18px 26px -14px rgba(75,33,15,.8)}
.feeCard u{width:50px;height:50px;border-radius:17px;background:rgba(255,255,255,.12);display:grid;place-items:center;text-decoration:none;color:#ffb27a;flex:none}.feeCard u .ic{width:26px;height:26px}
.feeCard div{flex:1}.feeCard small{opacity:.7;font-size:12px;display:block}.feeCard b{font:800 22px 'Manrope';letter-spacing:-.8px}
.feeCard em{font-style:normal;font:800 11.5px 'Manrope';padding:7px 10px;border-radius:11px;background:rgba(255,255,255,.14)}
.noteBox{display:block;width:100%;min-height:78px;padding:14px 16px;border:0;border-radius:20px;background:#fff;box-shadow:0 0 0 1.5px #f1e3d8;font:500 14px/1.5 'DM Sans';color:var(--ink);outline:0;resize:none}
.noteBox:focus{box-shadow:0 0 0 2px var(--orange)}.noteBox::placeholder{color:#b3a79f}
.qNotes{display:flex;gap:8px;overflow-x:auto;padding:10px 0 2px;scrollbar-width:none}.qNotes::-webkit-scrollbar{display:none}
.qNotes button{flex:none;height:34px;padding:0 13px;border:0;border-radius:12px;background:var(--soft);color:#7a4a30;font:700 12px 'DM Sans'}.qNotes button:active{background:#ffe3d1}
.pay{display:block;width:100%;text-align:left;border:0;padding:0;margin-bottom:11px;border-radius:24px;background:#fff;box-shadow:0 0 0 1.5px #f1e3d8;transition:box-shadow .2s,background .2s;overflow:hidden}
.payH{display:flex;align-items:center;gap:14px;padding:15px}
.payH u{width:48px;height:48px;border-radius:16px;background:var(--soft);color:var(--orange);display:grid;place-items:center;text-decoration:none;flex:none}.payH u .ic{width:24px;height:24px}
.payH div{flex:1}.payH b{display:block;font:800 14.5px 'Manrope';letter-spacing:-.3px}.payH small{color:var(--muted);font-size:12px}
.radio{width:24px;height:24px;border-radius:50%;border:2px solid #dfd0c5;display:grid;place-items:center;transition:.2s}.radio:after{content:"";width:12px;height:12px;border-radius:50%;background:var(--orange);transform:scale(0);transition:.25s cubic-bezier(.2,1.6,.3,1)}
.pay.on{box-shadow:0 0 0 2px var(--orange),0 16px 24px -14px rgba(255,91,23,.55);background:#fffaf6}.pay.on .radio{border-color:var(--orange)}.pay.on .radio:after{transform:scale(1)}
.payX{display:none;padding:0 15px 16px}.pay.on .payX{display:block;animation:paneIn .4s}
.inp{width:100%;height:52px;border:0;border-radius:15px;background:#fff;padding:0 15px;font:600 14.5px 'DM Sans';color:var(--ink);box-shadow:0 0 0 1.5px #eddfd3;outline:0;margin-bottom:9px}.inp:focus{box-shadow:0 0 0 2px var(--orange)}
.inp.err{box-shadow:0 0 0 2px #e5483a;animation:shakeOtp .35s}
.two{display:grid;grid-template-columns:1fr 1fr;gap:9px}
.bankBox{padding:14px;border-radius:18px;background:var(--soft);font-size:13px;line-height:1.7;color:#6b5d54}.bankBox b{color:var(--ink);font-family:'Manrope'}
.copyBtn{display:inline-flex;align-items:center;gap:5px;border:0;background:#fff;border-radius:10px;padding:6px 10px;font:800 11.5px 'Manrope';color:var(--orange);margin-left:6px;box-shadow:0 2px 0 #f0dccf}.copyBtn .ic{width:13px;height:13px}
.secureNote{display:flex;align-items:center;gap:8px;justify-content:center;margin-top:12px;font-size:11.5px;color:var(--muted)}.secureNote .ic{width:14px;height:14px;color:var(--leaf)}
.payLoad{position:absolute;inset:0;z-index:280;background:rgba(255,249,244,.92);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);display:grid;place-items:center;text-align:center;opacity:0;visibility:hidden;transition:.3s}.payLoad.show{opacity:1;visibility:visible}
.spinner{width:74px;height:74px;border-radius:50%;margin:0 auto 20px;border:6px solid #ffe0cf;border-top-color:var(--orange);animation:spin .9s linear infinite}
.payLoad b{font:800 18px 'Manrope';letter-spacing:-.5px}.payLoad p{color:var(--muted);font-size:13px;margin:6px 0 0}

/* confirmation */
.orderDone{position:absolute;inset:0;z-index:260;display:flex;flex-direction:column;background:radial-gradient(circle at 50% -5%,#ff7a2f,rgba(255,122,47,0) 52%),linear-gradient(180deg,#2a160d,#1d120c);color:#fff;opacity:0;visibility:hidden;transform:scale(1.05);transition:opacity .5s ease,transform .7s cubic-bezier(.2,.9,.25,1),visibility 0s .7s;overflow:hidden}
.orderDone.show{opacity:1;visibility:visible;transform:none;transition-delay:0s}
.doneTop{padding:max(44px,env(safe-area-inset-top)) 28px 0;text-align:center;flex:none}
.doneCheck{width:104px;height:104px;margin:0 auto 20px;border-radius:36px;background:linear-gradient(160deg,#4be08f,#1c8a55);display:grid;place-items:center;box-shadow:inset 0 3px 0 rgba(255,255,255,.4),0 8px 0 #11663c,0 24px 40px -6px rgba(28,138,85,.7);transform:scale(0) rotate(-30deg)}
.orderDone.show .doneCheck{animation:checkPop .8s .35s cubic-bezier(.2,1.5,.3,1) forwards}
@keyframes checkPop{to{transform:none}}
.doneCheck .ic{width:54px;height:54px;stroke-width:3.2;stroke-dasharray:40;stroke-dashoffset:40}
.orderDone.show .doneCheck .ic{animation:draw .6s .85s ease forwards}@keyframes draw{to{stroke-dashoffset:0}}
.doneTop h2{margin:0 0 8px;font:800 30px 'Manrope';letter-spacing:-1.2px}.doneTop p{margin:0 auto;max-width:300px;font-size:13.5px;line-height:1.55;opacity:.72}
.doneTop .oid{display:inline-block;margin-top:14px;padding:7px 14px;border-radius:30px;background:rgba(255,255,255,.12);font:800 12.5px 'Manrope';letter-spacing:.4px}
.doneCard{margin:22px 20px 0;padding:20px;border-radius:30px;background:#fff;color:var(--ink);flex:none;box-shadow:0 30px 50px -16px rgba(0,0,0,.6);opacity:0;transform:translateY(40px)}
.orderDone.show .doneCard{animation:up .7s .9s cubic-bezier(.2,.9,.25,1) forwards}
.etaRow{display:flex;justify-content:space-between;align-items:center;padding-bottom:14px;margin-bottom:14px;border-bottom:1.5px dashed #ecdccf}
.etaRow small{display:block;color:var(--muted);font-size:11.5px;font-weight:600}.etaRow b{font:800 18px 'Manrope';letter-spacing:-.5px}
.etaRow .pill{padding:7px 11px;border-radius:12px;background:#eaf8f0;color:var(--leaf);font:800 11.5px 'Manrope'}
.tl{display:grid;gap:0}.tlS{display:flex;gap:13px;align-items:flex-start;position:relative;padding-bottom:15px;opacity:.38;transition:opacity .5s}
.tlS:last-child{padding-bottom:0}.tlS:not(:last-child):before{content:"";position:absolute;left:15px;top:32px;bottom:2px;width:2px;background:#eddccf}
.tlS u{width:32px;height:32px;border-radius:12px;background:#f3e9e1;color:#a89a91;display:grid;place-items:center;text-decoration:none;flex:none;transition:.5s;position:relative;z-index:1}.tlS u .ic{width:17px;height:17px}
.tlS b{display:block;font:800 13.5px 'Manrope';letter-spacing:-.3px}.tlS small{color:var(--muted);font-size:11.5px}
.tlS.done,.tlS.now{opacity:1}.tlS.done u{background:var(--leaf);color:#fff}.tlS.done:before{background:var(--leaf)!important}
.tlS.now u{background:var(--orange);color:#fff;animation:pulseBox 1.6s infinite}
@keyframes pulseBox{0%{box-shadow:0 0 0 0 rgba(255,91,23,.5)}100%{box-shadow:0 0 0 12px rgba(255,91,23,0)}}
.doneFoot{margin-top:auto;padding:16px 20px max(20px,env(safe-area-inset-bottom));flex:none}
.doneFoot .b3dGhost{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.2);color:#fff;box-shadow:0 4px 0 rgba(255,255,255,.12)}
.cf{position:absolute;width:9px;height:13px;border-radius:2px;pointer-events:none;z-index:5}

/* search */
#srch{z-index:190}
.srchTop{display:flex;gap:12px;align-items:center;padding:max(20px,env(safe-area-inset-top)) 20px 8px;flex:none}
.srchField{flex:1;height:54px;border-radius:19px;background:#fff;display:flex;align-items:center;gap:10px;padding:0 8px 0 15px;box-shadow:0 0 0 2px var(--orange),0 14px 24px -12px rgba(255,91,23,.5)}
.srchField>.ic{color:var(--orange)}.srchField input{flex:1;min-width:0;border:0;outline:0;background:none;font:600 15px 'DM Sans';color:var(--ink)}
.srchField button{width:36px;height:36px;border:0;border-radius:12px;background:var(--soft);display:none;place-items:center}.srchField button.show{display:grid}.srchField button .ic{width:15px;height:15px;stroke-width:2.4}
.tChips{display:flex;flex-wrap:wrap;gap:9px}.tChips button{height:40px;padding:0 15px;border:0;border-radius:14px;background:#fff;font:700 13px 'DM Sans';display:flex;align-items:center;gap:7px;box-shadow:0 0 0 1.5px #f1e3d8,0 3px 0 #f1e3d8}.tChips .ic{width:15px;height:15px;color:var(--orange)}

/* location */
.locationOverlay{position:absolute;inset:0;z-index:300;background:#fff9f4;opacity:0;visibility:hidden;transform:translateY(40px);transition:opacity .38s,transform .55s cubic-bezier(.2,.9,.25,1),visibility 0s .55s;display:flex;flex-direction:column;font-family:'DM Sans',sans-serif;overflow:hidden}
.locationOverlay.active{opacity:1;visibility:visible;transform:none;transition-delay:0s}
.locHead{padding:max(22px,env(safe-area-inset-top)) 20px 10px;display:flex;align-items:center;justify-content:space-between;flex:none}.locHead h3{margin:0;font:800 17px 'Manrope';letter-spacing:-.5px}
.mapBox{height:42vh;min-height:260px;margin:4px 16px 0;border-radius:30px;overflow:hidden;position:relative;background:#f4f1ec;touch-action:none;flex:none;box-shadow:0 0 0 1.5px #f1e3d8,0 20px 30px -16px rgba(120,52,14,.4)}
.mapGrid{position:absolute;inset:-80px;background-color:#f4f1ec;background-image:linear-gradient(#fff 4px,transparent 4px),linear-gradient(90deg,#fff 4px,transparent 4px),linear-gradient(rgba(0,0,0,.03) 1px,transparent 1px),linear-gradient(90deg,rgba(0,0,0,.03) 1px,transparent 1px);background-size:96px 96px,96px 96px,24px 24px,24px 24px}
.mapWater{position:absolute;right:-60px;top:-30px;width:140px;height:130%;background:#d9eef0;border-radius:50% 0 0 50%;transform:rotate(7deg)}
.mapRoad{position:absolute;left:-20px;right:-20px;top:46%;height:13px;background:#fff;transform:rotate(-6deg);box-shadow:0 0 0 2px #f0e8df}.mapRoad.two{top:22%;transform:rotate(4deg)}.mapRoad.three{top:72%;transform:rotate(-2deg)}
.mapLabel{position:absolute;font:700 9.5px 'DM Sans';color:#a09690}.ml1{left:24px;top:55px}.ml2{right:90px;top:75%}.ml3{left:34%;top:62%}
.kPin{position:absolute;left:27%;top:37%;z-index:3;width:34px;height:34px;border-radius:12px;background:var(--deep);color:#fff;display:grid;place-items:center;box-shadow:0 8px 14px -4px rgba(0,0,0,.4)}.kPin .ic{width:17px;height:17px}
.kPin small{position:absolute;top:38px;left:50%;transform:translateX(-50%);white-space:nowrap;font:800 9.5px 'Manrope';color:var(--deep);background:#fff;padding:3px 7px;border-radius:7px;box-shadow:0 3px 8px rgba(0,0,0,.15)}
.pinDot{position:absolute;left:50%;top:50%;transform:translate(-50%,4px);width:16px;height:6px;border-radius:50%;background:rgba(0,0,0,.25);filter:blur(2px);z-index:3}
.pinFixed{position:absolute;left:50%;top:50%;transform:translate(-50%,-100%);z-index:4;animation:pinBob 1.8s ease-in-out infinite}.pinFixed svg{width:44px;height:53px;display:block;filter:drop-shadow(0 8px 6px rgba(255,91,23,.35))}
@keyframes pinBob{50%{transform:translate(-50%,-112%)}}
.mapHint{position:absolute;left:50%;bottom:12px;transform:translateX(-50%);z-index:5;background:rgba(29,18,12,.88);color:#fff;border-radius:30px;padding:8px 14px;font:700 11px 'DM Sans';white-space:nowrap}
.locEst{position:absolute;left:12px;top:12px;z-index:5;background:#fff;border-radius:15px;padding:9px 12px;box-shadow:0 8px 16px -6px rgba(0,0,0,.28);font:800 12px 'Manrope';display:flex;align-items:center;gap:7px}.locEst .ic{width:15px;height:15px;color:var(--orange)}
.locPanel{padding:18px 20px 12px;flex:1;overflow-y:auto;scrollbar-width:none}.locPanel::-webkit-scrollbar{display:none}
.locPanel h2{font:800 23px 'Manrope';letter-spacing:-.9px;margin:0 0 5px}.locPanel>p{color:var(--muted);font-size:13px;line-height:1.5;margin:0 0 15px}
.locSearch{height:56px;border-radius:18px;background:#fff;display:flex;align-items:center;gap:11px;padding:0 15px;box-shadow:0 0 0 1.5px #f1e3d8}.locSearch:focus-within{box-shadow:0 0 0 2px var(--orange)}
.locSearch .ic{color:var(--orange)}.locSearch input{flex:1;min-width:0;border:0;outline:0;background:none;font:600 14.5px 'DM Sans';color:var(--ink)}
.locUse{width:100%;border:0;background:var(--soft);margin-top:10px;border-radius:18px;padding:13px 15px;display:flex;align-items:center;gap:13px;text-align:left}
.locUse u{width:42px;height:42px;border-radius:14px;background:#fff;color:var(--orange);display:grid;place-items:center;text-decoration:none;box-shadow:0 3px 0 #f0dccf}.locUse u .ic{width:21px;height:21px}
.locUse b{display:block;font:800 13px 'Manrope';letter-spacing:-.2px}.locUse small{display:block;color:#8a7f78;font-size:11.5px;margin-top:2px}
.locLabels{display:flex;gap:9px;margin:16px 0 4px}.locChip{flex:1;height:48px;border:0;border-radius:16px;background:#fff;font:800 12.5px 'Manrope';display:flex;align-items:center;justify-content:center;gap:7px;color:#6b5d54;box-shadow:0 0 0 1.5px #eddfd3,0 3px 0 #eddfd3;transition:.15s}.locChip .ic{width:17px;height:17px}
.locChip.on{background:#fff0e8;color:#e5360a;box-shadow:0 0 0 2px var(--orange),0 3px 0 #f2b79a}.locChip:active{transform:translateY(2px)}
.saveLoc{margin:8px 20px max(16px,env(safe-area-inset-bottom));flex:none;width:calc(100% - 40px)}
.locToast{position:absolute;z-index:330;left:50%;top:max(26px,env(safe-area-inset-top));transform:translate(-50%,-30px);background:var(--deep);color:#fff;padding:12px 18px;border-radius:30px;font:800 13px 'Manrope';display:flex;gap:8px;align-items:center;opacity:0;transition:.4s cubic-bezier(.2,1.3,.3,1)}.locToast.show{opacity:1;transform:translate(-50%,0)}.locToast .ic{color:#47d58a;width:16px;height:16px;stroke-width:3}
.demoTag{margin-top:10px;text-align:center;font-size:11px;color:#b3a79f}
@media(prefers-reduced-motion:reduce){.b3d:after,.promoSlide img,.dImg img,.dRing:after,.pinFixed{animation:none!important}}

/* never allow programmatic horizontal scroll to shift screens */
@supports (overflow:clip){.app,.home,.scr,.promoWrap,.locationOverlay,.orderDone{overflow:clip}.tab{overflow-x:hidden}}
.home .tab{overscroll-behavior:contain}


/* Dedicated password recovery screen */
.resetScreen{position:absolute;inset:0;z-index:3;background:linear-gradient(180deg,#fff8f4,#fff 48%);padding:26px 24px;opacity:0;visibility:hidden;transform:translateX(24px);transition:opacity .25s,transform .25s,visibility .25s;overflow-y:auto}
.resetScreen.active{opacity:1;visibility:visible;transform:none}
.resetCard{max-width:420px;margin:48px auto 0}.resetIcon{width:64px;height:64px;border-radius:20px;background:#fff0e7;display:flex;align-items:center;justify-content:center;font-size:29px;margin-bottom:25px}
.resetCard h2{font:800 30px 'Manrope',sans-serif;letter-spacing:-1.2px;margin:0 0 12px;color:#221b17}.resetCard p{font:500 13px 'DM Sans',sans-serif;color:#82756e;line-height:1.7;margin:0 0 26px}
.resetLabel{font:800 12px 'Manrope',sans-serif;display:block;margin-bottom:10px;color:#352923}.resetBack{border:0;background:transparent;font:800 14px 'Manrope',sans-serif;color:#3c3029;padding:8px 0}
.resetStatus{font:600 12px 'DM Sans',sans-serif;line-height:1.6;min-height:18px;margin:12px 0;color:#c63d20}.resetStatus.ok{color:#257b43}

/* Keep onboarding hidden until Firebase resolves the saved session. */
#tgStartup{position:fixed;inset:0;z-index:99999;background:#fff9f5;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;transition:opacity .18s ease;pointer-events:all}
#tgStartup.done{opacity:0;pointer-events:none}
#tgStartup .tgStartupMark{width:64px;height:64px;border-radius:21px;background:#ff641d;color:white;display:grid;place-items:center;font:800 30px 'Manrope',sans-serif;box-shadow:0 12px 32px #ff641d30}
#tgStartup .tgStartupName{font:800 19px 'Manrope',sans-serif;color:#211c19}#tgStartup .tgStartupName b{color:#ff641d}
#tgStartup .tgStartupSpinner{width:24px;height:24px;border:3px solid #ffe0ce;border-top-color:#ff641d;border-radius:50%;animation:tgSpin .75s linear infinite}
@keyframes tgSpin{to{transform:rotate(360deg)}}

/* v3.7: Make newly uploaded full-frame food photographs fill the original visual footprint. */
.fcard .pop img.photoFill{object-fit:cover;border-radius:50%;width:132px;height:132px}
.row .rimg img.photoFill{object-fit:cover;border-radius:22px;width:104px;height:104px}
.dImg img.photoFill{object-fit:cover;border-radius:50%;width:100%;height:100%}

/* Order details: independent overlay, does not alter checkout or cart */
.orderDetails{position:absolute;inset:0;z-index:190;background:#fffaf7;visibility:hidden;opacity:0;pointer-events:none;transition:opacity .22s;display:flex;flex-direction:column}
.orderDetails.active{visibility:visible;opacity:1;pointer-events:auto}
.odHead{display:flex;align-items:center;gap:13px;padding:max(22px,env(safe-area-inset-top)) 20px 16px;background:#fff;border-bottom:1px solid #f0e4dc}
.odHead button{border:1px solid #f0e4dc;border-radius:13px;width:42px;height:42px;background:#fff;font-size:23px}
.odHead h2{font:800 19px 'Manrope';margin:0}.odHead small{font-size:11px;color:#8a7e75}
.odBody{overflow:auto;flex:1;padding:18px 20px max(30px,env(safe-area-inset-bottom))}
.odCard{background:#fff;border:1px solid #f1e6df;border-radius:20px;padding:17px;margin-bottom:13px;box-shadow:0 6px 20px rgba(100,45,15,.035)}
.odCard h3{font:800 15px 'Manrope';margin:0 0 13px}.odStatus{display:inline-block;border-radius:30px;background:#fff0e7;color:#db5016;padding:8px 12px;font:800 12px 'Manrope'}
.odStep{display:flex;gap:12px;align-items:flex-start;position:relative;padding:0 0 19px}.odStep:last-child{padding-bottom:0}.odStep:not(:last-child):before{content:'';position:absolute;left:12px;top:25px;bottom:0;width:2px;background:#eee4dc}
.odDot{width:26px;height:26px;border-radius:50%;background:#f1eae5;color:#aaa;display:grid;place-items:center;font-size:12px;font-weight:800;flex:none;z-index:1}
.odStep.done .odDot{background:#2b9b62;color:#fff}.odStep.current .odDot{background:#ff5b17;color:#fff}
.odStep b{display:block;font-size:13px}.odStep small{display:block;color:#8a7e75;font-size:11px;margin-top:3px}
.odLine{display:flex;justify-content:space-between;gap:12px;padding:9px 0;border-bottom:1px solid #f7eee9;font-size:12px}.odLine:last-child{border:0}.odLine strong{text-align:right}.odMuted{color:#8a7e75}.odItemName{font-weight:800}
.oRow[data-order-id]{cursor:pointer;text-align:left;width:calc(100% - 40px);border:0}.oRow[data-order-id]:active{transform:scale(.99)}

/* Cloudflare desktop login: keep form in scrollable document flow.
   Absolute-positioned cards do not contribute to scroll height. */
.loginScreen.active{overflow-y:auto!important;overflow-x:hidden!important;overscroll-behavior:contain}
.loginScreen .loginCard{position:relative!important;top:auto!important;left:auto!important;right:auto!important;width:auto!important;margin:0 25px;padding-top:clamp(24px,9vh,90px)!important;padding-bottom:90px!important;box-sizing:border-box}
.loginScreen .loginSubmit{display:block!important;visibility:visible!important;min-height:58px!important}
@media(max-height:650px){.loginScreen .loginCard{padding-top:24px!important}}