/* Inter for the UI, plus the heavy display faces a restaurant can choose for its
banner (Admin -> Theme -> Banner Font). One request, display=swap so text is
readable immediately rather than invisible while a face downloads. */
@import url('https://fonts.googleapis.com/css2?family=Alfa+Slab+One&family=Anton&family=Archivo+Black&family=Bebas+Neue&family=Bungee&family=Inter:wght@400;500;600;700;800;900&family=Montserrat:wght@900&family=Oswald:wght@700&family=Playfair+Display:wght@900&family=Russo+One&family=Teko:wght@700&family=Titan+One&family=Ultra&display=swap');
:root{
--ink:#16120f;--muted:rgba(22,18,15,.64);--paper:#fff8ed;--card:#fff;--orange:#ff5a00;--red:#d81f2a;--gold:#ffb020;--green:#178a4c;--line:rgba(22,18,15,.12);--shadow:0 16px 42px rgba(42,22,8,.12);--soft-shadow:0 10px 28px rgba(42,22,8,.09);
--hero-bg:
linear-gradient(180deg,rgba(0,0,0,0) 48%,rgba(8,6,3,.5) 100%),
repeating-linear-gradient(115deg,rgba(255,255,255,.045) 0 2px,transparent 2px 34px),
radial-gradient(circle at 8% 8%,rgba(255,203,122,.4),transparent 42%),
radial-gradient(circle at 96% 88%,rgba(201,142,64,.32),transparent 46%),
linear-gradient(135deg,#1a130c 0%,#3b2b17 42%,#6a4a20 74%,#a17936 100%);
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html{scroll-behavior:smooth;overflow-x:hidden}
body{margin:0;background:radial-gradient(circle at 20% 0,#fff6e7 0,#fffaf3 38%,#fff2df 100%);font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:var(--ink);padding-bottom:112px;overflow-x:hidden}
button,input,textarea{font:inherit}
button{cursor:pointer}
button:focus-visible,input:focus-visible,textarea:focus-visible{outline:3px solid rgba(255,90,0,.28);outline-offset:2px}
.app-shell{width:min(720px,100%);margin:0 auto;background:var(--paper);min-height:100vh}
.store-header{position:relative}
.cover{min-height:360px;background:var(--hero-bg);border-radius:0 0 34px 34px;color:#fff;padding:18px 18px 28px;display:flex;flex-direction:column;justify-content:space-between;gap:26px}
.topbar{display:flex;justify-content:space-between;align-items:center;gap:12px}
.circle{width:44px;height:44px;min-width:44px;border:1px solid rgba(255,255,255,.22);border-radius:50%;background:rgba(255,255,255,.16);color:#fff;font-weight:900;backdrop-filter:blur(14px);display:grid;place-items:center;box-shadow:0 10px 30px rgba(0,0,0,.12)}
.store-title{max-width:640px}
.store-title span{display:inline-flex;align-items:center;background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.2);padding:8px 12px;border-radius:999px;font-size:12px;line-height:1.2;font-weight:800;backdrop-filter:blur(12px)}
.store-title h1{font-family:'Archivo Black',Inter,sans-serif;font-size:clamp(42px,10vw,74px);letter-spacing:var(--banner-tracking,-.06em);line-height:.9;margin:15px 0 10px;text-transform:uppercase;text-wrap:balance;overflow-wrap:anywhere}
.store-title p{margin:0 0 14px;color:rgba(255,255,255,.78);font-size:15px;line-height:1.5;max-width:560px}
main{padding:16px}
.category-tabs{display:flex;gap:8px;overflow-x:auto;overflow-y:hidden;padding:0 1px 10px;scrollbar-width:none;-webkit-overflow-scrolling:touch}.category-tabs::-webkit-scrollbar,.offers::-webkit-scrollbar{display:none}.category-tabs button{border:1px solid var(--line);background:#fff;border-radius:999px;padding:12px 15px;font-size:13px;line-height:1;font-weight:900;white-space:nowrap;box-shadow:var(--soft-shadow);color:var(--ink)}.category-tabs button.active{background:var(--ink);color:#fff;border-color:var(--ink)}.offers{display:flex;gap:10px;overflow-x:auto;overflow-y:hidden;margin:10px 0 16px;padding:0 1px 4px;scrollbar-width:none;-webkit-overflow-scrolling:touch}.offer-card{flex:0 0 220px;min-height:95px;background:linear-gradient(135deg,var(--orange),var(--red));color:#fff;border-radius:22px;padding:16px;box-shadow:var(--shadow);display:flex;flex-direction:column;justify-content:center}.offer-card b{display:block;font-size:22px;line-height:1.05}.offer-card span{color:rgba(255,255,255,.78);font-size:13px;line-height:1.35;margin-top:5px}.menu-list{display:grid;gap:14px}.menu-item{display:grid;grid-template-columns:minmax(0,1fr) 126px;gap:14px;align-items:stretch;background:#fff;border:1px solid var(--line);border-radius:28px;padding:14px;box-shadow:var(--shadow);overflow:hidden}.item-info{display:flex;flex-direction:column;gap:8px;min-width:0}.item-labels{display:flex;gap:6px;flex-wrap:wrap}.label{font-size:10px;line-height:1;text-transform:uppercase;font-weight:900;border-radius:999px;padding:6px 8px;background:#fff2df;color:#a74d00}.label.veg{background:#e8f8ee;color:var(--green)}.menu-item h3{margin:0;font-size:21px;line-height:1.15;letter-spacing:-.02em;text-wrap:balance}.menu-item p{margin:0;color:var(--muted);font-size:14px;line-height:1.5;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}.price{font-weight:900;font-size:18px;line-height:1.2;margin-top:auto;color:var(--red)}.item-img{position:relative;min-height:126px;border-radius:22px;background:center/cover;align-self:stretch}.item-img::after{content:"";position:absolute;inset:0;border-radius:inherit;background:linear-gradient(180deg,transparent 45%,rgba(0,0,0,.1));pointer-events:none}.add-control{position:absolute;left:50%;bottom:8px;transform:translateX(-50%);display:flex;align-items:center;gap:8px;background:rgba(255,255,255,.96);border:1px solid var(--line);border-radius:999px;padding:6px;box-shadow:0 14px 34px rgba(0,0,0,.14);z-index:1}.add-control button{width:32px;height:32px;border:0;border-radius:50%;background:var(--ink);color:#fff;font-weight:900;display:grid;place-items:center}.add-control span{min-width:20px;text-align:center;font-weight:900;color:var(--ink)}.steps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px;margin:12px 0}.steps span{text-align:center;background:#f3eadf;border-radius:999px;padding:9px 4px;font-size:11px;line-height:1;font-weight:900;white-space:nowrap}.steps .done{background:#dff8e8;color:var(--green)}.floating-cart{position:fixed;left:50%;bottom:18px;transform:translateX(-50%);width:min(680px,calc(100% - 28px));border:0;background:var(--ink);color:#fff;border-radius:24px;padding:12px 16px;display:flex;align-items:center;justify-content:center;gap:12px;font-weight:900;box-shadow:0 20px 70px rgba(22,18,15,.34);z-index:12}.floating-cart span{display:grid;place-items:center;width:34px;height:34px;min-width:34px;background:var(--orange);border-radius:50%}.floating-cart b{line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.cart-drawer{position:fixed;right:0;top:0;height:100dvh;width:min(430px,100%);background:#fffaf3;z-index:20;box-shadow:-30px 0 90px rgba(22,18,15,.18);padding:0;transform:translateX(105%);transition:transform .25s ease;overflow:hidden;display:flex;flex-direction:column}.cart-drawer.open{transform:translateX(0)}.cart-head{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:0;padding:18px 18px 14px;flex:0 0 auto}.cart-body{flex:1 1 auto;overflow-y:auto;padding:0 18px 18px}.cart-head span{color:var(--muted);font-weight:900;text-transform:uppercase;font-size:12px;line-height:1}.cart-head h2{font-family:'Archivo Black',Inter,sans-serif;font-size:44px;letter-spacing:-.06em;line-height:.9;margin:0;text-transform:uppercase}.cart-head button,#closeModal{width:42px;height:42px;min-width:42px;border:0;border-radius:50%;background:var(--ink);color:#fff;font-size:24px;display:grid;place-items:center}.cart-items{display:grid;gap:10px}.cart-line{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:12px;align-items:center;background:#fff;border:1px solid var(--line);border-radius:20px;padding:13px}.cart-line b{display:block;line-height:1.25}.cart-line small{color:var(--muted);line-height:1.3}.line-controls{display:flex;align-items:center;gap:8px}.line-controls button{border:0;background:var(--ink);color:#fff;border-radius:50%;width:28px;height:28px;font-weight:900;display:grid;place-items:center}.instructions{margin-top:14px}.instructions label{display:block;font-size:12px;line-height:1;text-transform:uppercase;font-weight:900;margin-bottom:8px}.instructions textarea{width:100%;min-height:88px;border:1px solid var(--line);border-radius:18px;padding:14px;outline:0;resize:vertical;color:var(--ink);background:#fff}.bill-box{background:#fff;border:1px solid var(--line);border-radius:22px;padding:14px;margin-top:14px}.bill-box div{display:flex;justify-content:space-between;gap:12px;padding:9px 0;color:var(--muted);line-height:1.25}.bill-box b{color:var(--ink);white-space:nowrap}.bill-box .green{color:var(--green)}.bill-box .grand{border-top:1px solid var(--line);font-size:20px;color:var(--ink);font-weight:900}.checkout{width:100%;border:0;background:linear-gradient(135deg,var(--orange),var(--red));color:#fff;border-radius:22px;padding:17px;font-weight:900;font-size:16px;line-height:1.2;margin-top:10px}.toast{position:fixed;top:20px;left:50%;transform:translate(-50%,-80px);background:var(--ink);color:#fff;border-radius:999px;padding:14px 18px;font-weight:900;z-index:30;transition:transform .25s ease;text-align:center;width:max-content;max-width:calc(100% - 30px)}.toast.show{transform:translate(-50%,0)}.modal{position:fixed;inset:0;background:rgba(22,18,15,.5);z-index:40;display:none;place-items:center;padding:18px}.modal.open{display:grid}.modal-card{position:relative;background:#fff;border-radius:30px;padding:34px 24px;text-align:center;width:min(380px,100%);box-shadow:var(--shadow)}.modal-card h2{font-family:'Archivo Black',Inter,sans-serif;text-transform:uppercase;letter-spacing:-.05em;font-size:42px;line-height:.95;margin:22px 0 12px;text-wrap:balance}.modal-card p{color:var(--muted);line-height:1.55;margin:0 0 14px}.modal-card #closeModal{position:absolute;right:14px;top:14px}
#menu,#offers,#track{scroll-margin-top:78px}
@media(max-width:560px){
body{padding-bottom:96px}.cover{min-height:320px;border-radius:0 0 28px 28px;padding:14px}.circle{width:40px;height:40px;min-width:40px}.store-title h1{font-size:clamp(38px,14vw,58px);line-height:.9;margin-top:12px}.store-title p{font-size:14px}main{padding:14px}.offer-card{flex-basis:205px}.menu-item{grid-template-columns:minmax(0,1fr) 112px;gap:12px;border-radius:24px;padding:12px}.menu-item h3{font-size:18px}.menu-item p{font-size:13px;-webkit-line-clamp:2}.item-img{min-height:116px;border-radius:20px}.add-control{bottom:7px;gap:6px;padding:5px}.add-control button{width:30px;height:30px}.steps{grid-template-columns:1fr 1fr}.cart-head{padding:16px 14px 12px}.cart-body{padding:0 14px 108px}.cart-head h2{font-size:40px}.floating-cart{bottom:14px;border-radius:22px;padding:11px 14px;width:calc(100% - 24px)}
}
@media(max-width:410px){
.cover{min-height:305px}.store-title h1{font-size:clamp(34px,13.5vw,48px)}.menu-item{grid-template-columns:1fr}.item-img{min-height:172px;order:-1}.menu-item p{-webkit-line-clamp:3}.price{margin-top:2px}.modal-card h2{font-size:36px}.cart-line{grid-template-columns:1fr}.line-controls{justify-content:flex-start}.bill-box .grand{font-size:18px}
}
/* Desktop + fixed header refinements */
.app-shell{width:min(920px,100%)}
.topbar{
position:fixed;
top:0;
left:50%;
transform:translateX(-50%);
width:min(920px,100%);
padding:14px 22px;
z-index:16;
pointer-events:none;
}
.topbar .circle,.topbar .table-chip{pointer-events:auto}
.cover{min-height:430px;padding:86px 24px 24px}
#menu,#offers,#track,.customer-sections article{scroll-margin-top:150px}
@media(min-width:860px){
main{padding:24px}
.store-title h1{font-size:82px;max-width:860px}
.store-title p{font-size:17px}
.menu-list{grid-template-columns:1fr 1fr;gap:16px}
.menu-item{grid-template-columns:1fr;align-content:start}
.item-img{min-height:190px;order:-1}
.menu-item h3{font-size:22px}
.steps{grid-template-columns:1fr;gap:7px}
}
@media(max-width:560px){
.app-shell{width:100%}
.topbar{width:100%;padding:12px 14px}
.cover{min-height:330px;padding:74px 14px 14px}
#menu,#offers,#track,.customer-sections article{scroll-margin-top:136px}
}
@media(max-width:410px){
.cover{min-height:318px;padding-top:72px}
}
/* Glassmorphism upgrade + restaurant QR action add-ons */
:root{
--glass-light:rgba(255,255,255,.58);
--glass-strong:rgba(255,255,255,.72);
--glass-dark:rgba(22,18,15,.58);
--glass-line:rgba(255,255,255,.34);
}
.circle,.table-chip,.quick-actions,.veg-toggle,.search-section input,.notice-card,.instructions textarea,.bill-box,.pay-options label,.modal-card,.toast,.cart-drawer{
-webkit-backdrop-filter:blur(18px) saturate(1.25);
backdrop-filter:blur(18px) saturate(1.25);
}
.circle{
background:rgba(255,255,255,.20);
border-color:rgba(255,255,255,.34);
box-shadow:inset 0 1px 0 rgba(255,255,255,.26),0 14px 34px rgba(0,0,0,.16);
}
.quick-actions button,.category-tabs button,.veg-toggle,.search-section input{
background:rgba(255,255,255,.62);
border-color:rgba(255,255,255,.52);
box-shadow:inset 0 1px 0 rgba(255,255,255,.8),0 12px 30px rgba(42,22,8,.10);
}
.quick-actions button:hover,.category-tabs button:hover,.service-actions button:hover{
transform:translateY(-1px);
}
.category-tabs button.active{
background:rgba(22,18,15,.72);
border-color:rgba(255,255,255,.20);
box-shadow:inset 0 1px 0 rgba(255,255,255,.14),0 12px 28px rgba(22,18,15,.16);
}
.menu-item,.customer-sections article,.cart-line,.bill-box,.pay-options label,.modal-card{
background:rgba(255,255,255,.68);
border-color:rgba(255,255,255,.54);
box-shadow:inset 0 1px 0 rgba(255,255,255,.72),0 18px 44px rgba(42,22,8,.10);
}
.offer-card{
position:relative;
overflow:hidden;
border:1px solid rgba(255,255,255,.36);
box-shadow:inset 0 1px 0 rgba(255,255,255,.28),0 18px 44px rgba(216,31,42,.18);
}
.offer-card::after{
content:"";
position:absolute;
inset:0;
background:linear-gradient(120deg,rgba(255,255,255,.25),transparent 38%,rgba(255,255,255,.16));
pointer-events:none;
}
.add-control{
background:rgba(255,255,255,.86);
border:1px solid rgba(255,255,255,.58);
box-shadow:inset 0 1px 0 rgba(255,255,255,.85),0 12px 28px rgba(0,0,0,.16);
}
.add-control button,.line-controls button,.cart-head button,#closeModal{
background:rgba(22,18,15,.78);
border:1px solid rgba(255,255,255,.12);
box-shadow:inset 0 1px 0 rgba(255,255,255,.16),0 8px 20px rgba(0,0,0,.18);
}
.add-control span{
min-width:24px;
color:#14100d;
text-shadow:0 1px 0 rgba(255,255,255,.55);
}
.floating-cart{
background:rgba(22,18,15,.78);
border:1px solid rgba(255,255,255,.20);
-webkit-backdrop-filter:blur(18px) saturate(1.35);
backdrop-filter:blur(18px) saturate(1.35);
box-shadow:inset 0 1px 0 rgba(255,255,255,.13),0 22px 70px rgba(22,18,15,.30);
}
.floating-cart span{
background:rgba(255,90,0,.9);
box-shadow:inset 0 1px 0 rgba(255,255,255,.25),0 8px 22px rgba(255,90,0,.28);
}
.checkout{
position:relative;
overflow:hidden;
border:1px solid rgba(255,255,255,.28);
background:linear-gradient(135deg,rgba(255,90,0,.92),rgba(216,31,42,.88));
-webkit-backdrop-filter:blur(16px) saturate(1.35);
backdrop-filter:blur(16px) saturate(1.35);
box-shadow:inset 0 1px 0 rgba(255,255,255,.24),0 16px 38px rgba(216,31,42,.22);
}
.checkout::after{
content:"";
position:absolute;
inset:0;
background:linear-gradient(120deg,rgba(255,255,255,.24),transparent 42%,rgba(255,255,255,.12));
pointer-events:none;
}
.cart-drawer{
background:rgba(255,250,243,.76);
border-left:1px solid rgba(255,255,255,.50);
}
.instructions textarea{
background:rgba(255,255,255,.66);
border-color:rgba(255,255,255,.54);
}
.service-actions{
display:grid;
grid-template-columns:repeat(3,minmax(0,1fr));
gap:10px;
margin:4px 0 18px;
}
.service-actions button{
min-height:76px;
border:1px solid rgba(255,255,255,.54);
border-radius:24px;
background:rgba(255,255,255,.60);
color:var(--ink);
font-weight:900;
display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
gap:7px;
box-shadow:inset 0 1px 0 rgba(255,255,255,.76),0 15px 36px rgba(42,22,8,.10);
transition:transform .18s ease,box-shadow .18s ease;
}
.service-actions button span{
font-size:12px;
line-height:1;
white-space:nowrap;
}
.service-actions button:active,.quick-actions button:active,.category-tabs button:active,.floating-cart:active,.checkout:active{
transform:scale(.985);
}
.toast{
background:rgba(22,18,15,.78);
border:1px solid rgba(255,255,255,.22);
box-shadow:inset 0 1px 0 rgba(255,255,255,.12),0 14px 40px rgba(22,18,15,.18);
}
@media(max-width:560px){
.service-actions{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin-top:2px}
.service-actions button{min-height:68px;border-radius:20px;font-size:18px}
.service-actions button span{font-size:10.5px}
}
@media(max-width:360px){
.service-actions{grid-template-columns:1fr 1fr}
}
/* Final premium glass + desktop alignment pass */
:root{
--premium-glass:rgba(255,255,255,.38);
--premium-glass-strong:rgba(255,255,255,.52);
--premium-dark-glass:rgba(15,12,10,.50);
--premium-blur:26px;
}
body{
background:
radial-gradient(circle at 14% 0,rgba(255,198,107,.32),transparent 30%),
radial-gradient(circle at 84% 12%,rgba(255,90,0,.14),transparent 28%),
linear-gradient(135deg,#fff8ea 0%,#fffdf8 42%,#ffe8cd 100%);
}
.app-shell{
width:min(1120px,100%);
background:rgba(255,248,237,.70);
}
.topbar{width:min(1120px,100%);padding:16px 28px}
.cover{min-height:470px;padding:96px 30px 30px;border-radius:0 0 42px 42px}
.store-title{max-width:940px}
.store-title h1{font-size:clamp(58px,7vw,96px);max-width:960px}
.circle,.table-chip,.quick-actions,.veg-toggle,.search-section input,.notice-card,.instructions textarea,.bill-box,.pay-options label,.modal-card,.floating-cart,.checkout{
-webkit-backdrop-filter:blur(var(--premium-blur)) saturate(1.55) brightness(1.03);
backdrop-filter:blur(var(--premium-blur)) saturate(1.55) brightness(1.03);
}
.circle{
background:linear-gradient(135deg,rgba(255,255,255,.34),rgba(255,255,255,.12));
border:1px solid rgba(255,255,255,.58);
box-shadow:inset 0 1px 0 rgba(255,255,255,.72),inset 0 -18px 32px rgba(255,255,255,.08),0 18px 44px rgba(0,0,0,.24);
}
.quick-actions button,.category-tabs button,.veg-toggle,.search-section input,.service-actions button{
background:linear-gradient(135deg,rgba(255,255,255,.54),rgba(255,255,255,.26));
border:1px solid rgba(255,255,255,.70);
box-shadow:inset 0 1px 0 rgba(255,255,255,.95),inset 0 -16px 26px rgba(255,255,255,.10),0 16px 38px rgba(42,22,8,.12);
}
.notice-card,.floating-cart{
background:linear-gradient(135deg,rgba(22,18,15,.64),rgba(22,18,15,.42));
border:1px solid rgba(255,255,255,.28);
box-shadow:inset 0 1px 0 rgba(255,255,255,.22),0 26px 70px rgba(22,18,15,.25);
}
.menu-item,.customer-sections article,.cart-line,.bill-box,.pay-options label,.modal-card{
background:linear-gradient(135deg,rgba(255,255,255,.54),rgba(255,255,255,.28));
border:1px solid rgba(255,255,255,.68);
box-shadow:inset 0 1px 0 rgba(255,255,255,.92),0 22px 50px rgba(42,22,8,.11);
}
.add-control{
background:linear-gradient(135deg,rgba(255,255,255,.94),rgba(255,255,255,.8));
border:1px solid rgba(255,255,255,.84);
box-shadow:inset 0 1px 0 rgba(255,255,255,1),inset 0 -14px 24px rgba(255,255,255,.12),0 18px 44px rgba(0,0,0,.24);
}
.add-control button,.line-controls button,.cart-head button,#closeModal{
background:linear-gradient(135deg,rgba(22,18,15,.82),rgba(22,18,15,.58));
border:1px solid rgba(255,255,255,.26);
box-shadow:inset 0 1px 0 rgba(255,255,255,.24),0 10px 24px rgba(0,0,0,.22);
}
.menu-list{gap:18px;align-items:stretch}
.menu-item{height:100%;align-content:start}
.item-info{height:100%}
.item-img{box-shadow:inset 0 0 0 1px rgba(255,255,255,.35)}
.service-actions{gap:14px;margin:6px 0 22px}
.track-live-card{
display:grid;grid-template-columns:auto minmax(0,1fr);gap:12px;align-items:center;
margin:8px 0 14px;padding:14px;border-radius:22px;
background:linear-gradient(135deg,rgba(255,255,255,.58),rgba(255,255,255,.22));
border:1px solid rgba(255,255,255,.72);
box-shadow:inset 0 1px 0 rgba(255,255,255,.92),0 14px 34px rgba(42,22,8,.09);
-webkit-backdrop-filter:blur(22px) saturate(1.4);backdrop-filter:blur(22px) saturate(1.4);
}
.track-live-card b{display:block;line-height:1.15;font-size:15px}.track-live-card span{display:block;color:var(--muted);font-size:12px;line-height:1.35;margin-top:3px}
.track-dot{width:16px;height:16px;border-radius:50%;background:#aaa;box-shadow:0 0 0 7px rgba(120,120,120,.10),0 0 18px rgba(120,120,120,.45)}
.track-dot.placed{background:#ff2d2d;box-shadow:0 0 0 7px rgba(255,45,45,.14),0 0 20px rgba(255,45,45,.82)}
.track-dot.preparing{background:#ffd60a;box-shadow:0 0 0 7px rgba(255,214,10,.16),0 0 20px rgba(255,214,10,.82)}
.track-dot.serving{background:#30d158;box-shadow:0 0 0 7px rgba(48,209,88,.16),0 0 20px rgba(48,209,88,.82)}
#orderSteps span.active{background:#fff4c2;color:#8a5a00}#orderSteps span.serving{background:#dff8e8;color:var(--green)}
@media(min-width:860px){
main{padding:28px;display:grid;grid-template-columns:minmax(0,1fr);gap:0}
.offers{display:grid;grid-template-columns:1fr 1fr;gap:16px;overflow:visible}.offer-card{flex:unset;min-height:110px}
.menu-list{grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}.menu-item{grid-template-columns:1fr;padding:14px;border-radius:30px}.item-img{order:-1;min-height:178px}.menu-item h3{font-size:21px}.menu-item p{min-height:63px}
.service-actions{grid-template-columns:repeat(3,minmax(0,1fr))}.service-actions button{min-height:88px}
.steps{grid-template-columns:repeat(2,1fr)}
.floating-cart{width:min(760px,calc(100% - 48px));bottom:24px}
}
@media(min-width:1180px){
.app-shell,.topbar,.quick-actions{width:min(1180px,calc(100% - 40px))}.cover{padding-left:34px;padding-right:34px}
}
@media(max-width:560px){
.app-shell{width:100%}.topbar{width:100%;padding:12px 14px}.cover{min-height:340px;padding:76px 14px 16px}
.menu-list{gap:14px}.service-actions{gap:9px}.track-live-card{padding:12px;border-radius:20px}
}
/* Premium fixed header + desktop layout update */
body{padding-top:0;background:radial-gradient(circle at 15% 0,rgba(255,246,231,.98),rgba(255,250,243,.96) 42%,rgba(255,239,218,.94));}
.app-shell{width:min(1180px,100%)}
.cover{min-height:390px;padding-top:76px;border-radius:0 0 46px 46px}
.topbar{position:fixed;top:16px;left:50%;transform:translateX(-50%);width:min(1120px,calc(100% - 28px));z-index:50;display:grid;grid-template-columns:56px minmax(0,auto) 56px;justify-content:space-between;align-items:center;pointer-events:none}
.topbar>*{pointer-events:auto}.circle,.table-chip,.header-search-chip{background:rgba(255,255,255,.34);border:1px solid rgba(255,255,255,.48);-webkit-backdrop-filter:blur(22px) saturate(1.7);backdrop-filter:blur(22px) saturate(1.7);box-shadow:inset 0 1px 0 rgba(255,255,255,.62),inset 0 -10px 24px rgba(255,255,255,.18),0 14px 40px rgba(0,0,0,.17);color:#fff;text-shadow:0 1px 10px rgba(0,0,0,.18)}
.logo-button{border-radius:18px;font-size:15px;color:#fff;background:linear-gradient(135deg,rgba(255,90,0,.54),rgba(22,18,15,.32));font-weight:1000}.logo-button span{display:grid;place-items:center;width:34px;height:34px;border-radius:13px;background:rgba(22,18,15,.35);border:1px solid rgba(255,255,255,.28)}
main{padding:22px}.menu-anchor{height:1px;overflow:hidden}.visually-hidden-search,.visually-hidden-label{position:absolute!important;width:1px;height:1px;opacity:0;pointer-events:none;clip:rect(0 0 0 0)}
.category-tabs{margin-top:2px;padding:4px 2px 14px;gap:10px}.category-tabs button,.offer-card,.menu-item,.customer-sections article,.service-actions button{background:rgba(255,252,246,.92);border:1px solid rgba(255,255,255,.56);box-shadow:inset 0 1px 0 rgba(255,255,255,.65),inset 0 -18px 32px rgba(255,255,255,.16),0 18px 54px rgba(42,22,8,.12)}
.floating-cart,.cart-drawer,.modal-card{background:rgba(255,255,255,.48);border:1px solid rgba(255,255,255,.56);box-shadow:inset 0 1px 0 rgba(255,255,255,.65),inset 0 -18px 32px rgba(255,255,255,.16),0 18px 54px rgba(42,22,8,.12)}
.floating-cart,.modal-card{-webkit-backdrop-filter:blur(24px) saturate(1.6);backdrop-filter:blur(24px) saturate(1.6)}
/* The cart drawer's open/close is a transform transition (see .cart-drawer
below and .cart-backdrop opacity transition) — a heavy blur(24px) caught
mid-transition (e.g. a scroll/tap during the open animation) rendered as a
flat gray full-screen block before settling. A lighter blur is visually
close enough and stops that mid-frame stall. will-change hints the
compositor to give these elements their own layer during the transition. */
.cart-drawer{-webkit-backdrop-filter:blur(12px) saturate(1.6);backdrop-filter:blur(12px) saturate(1.6);will-change:transform}
.category-tabs button.active{background:rgba(22,18,15,.76);color:#fff;border-color:rgba(255,255,255,.28)}.offers{margin:0 0 20px}.offer-card{background:linear-gradient(135deg,rgba(255,90,0,.78),rgba(216,31,42,.68));border-color:rgba(255,255,255,.42)}
/* Keep the final menu row above the fixed navigation and floating cart. */
.menu-list{padding-bottom:0}
.menu-list{gap:18px}.menu-item{cursor:pointer;transition:transform .2s ease,box-shadow .2s ease;min-height:100%;align-content:start}.menu-item:hover{transform:translateY(-3px);box-shadow:inset 0 1px 0 rgba(255,255,255,.7),0 24px 70px rgba(42,22,8,.16)}.menu-item h3{text-align:left}.item-img{box-shadow:inset 0 0 0 1px rgba(255,255,255,.42)}.add-control{background:rgba(255,255,255,.86);border:1px solid rgba(255,255,255,.5);box-shadow:inset 0 1px 0 rgba(255,255,255,.65),0 12px 30px rgba(0,0,0,.22)}.add-control button{background:rgba(22,18,15,.84)}
.search-overlay,.feedback-sheet{position:fixed;inset:0;z-index:80;display:none;place-items:start center;padding:86px 16px 16px;background:rgba(22,18,15,.28);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.search-overlay.open,.feedback-sheet.open{display:grid}.search-glass-card,.feedback-card{width:min(560px,100%);border-radius:30px;padding:18px;background:rgba(255,255,255,.50);border:1px solid rgba(255,255,255,.62);-webkit-backdrop-filter:blur(30px) saturate(1.75);backdrop-filter:blur(30px) saturate(1.75);box-shadow:inset 0 1px 0 rgba(255,255,255,.72),0 24px 80px rgba(0,0,0,.18);position:relative}.search-glass-card>button:first-child,.feedback-card>button:first-child{position:absolute;right:14px;top:14px;width:38px;height:38px;border:0;border-radius:50%;background:rgba(22,18,15,.8);color:#fff;font-size:24px}.search-glass-card span,.feedback-card span{font-weight:1000;text-transform:uppercase;font-size:12px;color:rgba(22,18,15,.62)}
.feedback-panel{text-align:left}.overall-rating,.star-input{display:flex;gap:6px;margin:14px 0}.overall-rating button,.star-input button{width:42px;height:42px;border:1px solid rgba(255,255,255,.58);border-radius:14px;background:rgba(255,255,255,.44);color:rgba(22,18,15,.28);font-size:24px;line-height:1;box-shadow:inset 0 1px 0 rgba(255,255,255,.6)}.overall-rating button.active,.star-input button.active{color:#ffb000;text-shadow:0 0 18px rgba(255,176,0,.55);background:rgba(255,176,0,.12)}.feedback-cta,.submit-feedback{border:0;border-radius:999px;background:rgba(22,18,15,.86);color:#fff;font-weight:1000;padding:14px 18px;box-shadow:0 14px 35px rgba(22,18,15,.18)}.feedback-card h2{font-family:'Archivo Black',Inter,sans-serif;font-size:clamp(30px,8vw,46px);letter-spacing:-.06em;line-height:.9;margin:14px 44px 8px 0;text-transform:uppercase}.feedback-card textarea{width:100%;min-height:108px;border-radius:22px;border:1px solid rgba(255,255,255,.62);background:rgba(255,255,255,.58);padding:14px;resize:vertical;color:var(--ink);margin-bottom:12px}.submit-feedback{width:100%;background:linear-gradient(135deg,rgba(255,90,0,.88),rgba(216,31,42,.78))}
.floating-cart{width:min(560px,calc(100% - 310px));bottom:20px;background:rgba(22,18,15,.78)}
@media(min-width:860px){.app-shell{border-radius:0 0 34px 34px}.store-title{max-width:900px}.store-title h1{font-size:82px}.category-tabs{justify-content:center}.offers{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;overflow:visible}.offer-card{flex:auto}.menu-list{grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}.menu-item{grid-template-columns:1fr;padding:16px}.item-img{order:-1;min-height:190px}.service-actions{grid-template-columns:repeat(3,minmax(0,1fr));max-width:760px;margin:6px auto 22px}}
@media(max-width:720px){.topbar{top:10px;width:calc(100% - 22px);grid-template-columns:46px minmax(0,1fr) 46px}.circle{width:46px;height:46px;min-width:46px}.cover{padding-top:66px;min-height:350px}main{padding:14px}.floating-cart{width:calc(100% - 24px);bottom:14px}.menu-item{grid-template-columns:minmax(0,1fr) 112px}.item-img{min-height:120px}}
@media(max-width:420px){.table-chip,.header-search-chip{min-width:84px}.menu-item{grid-template-columns:1fr}.item-img{order:-1;min-height:176px}.store-title h1{font-size:clamp(38px,14vw,54px)}.service-actions{grid-template-columns:1fr}}
/* Update 2026070107: multipage tracking/feedback, fixed header search, desktop fit */
a{text-decoration:none;color:inherit}.topbar{position:fixed!important}.modal-link{display:inline-flex;align-items:center;justify-content:center;margin-top:14px;border-radius:999px;padding:13px 18px;background:linear-gradient(135deg,rgba(255,90,0,.9),rgba(216,31,42,.82));color:#fff;font-weight:1000;box-shadow:0 14px 34px rgba(216,31,42,.22)}
body[data-page="home"] .feedback-panel{display:none!important}.page-shell{min-height:100vh}.subpage-header{min-height:330px;background:var(--hero-bg);border-radius:0 0 38px 38px;color:#fff;position:relative;padding:92px 28px 34px}.page-hero{max-width:900px;margin:0 auto}.page-hero span{display:inline-flex;background:rgba(255,255,255,.18);border:1px solid rgba(255,255,255,.28);border-radius:999px;padding:9px 13px;font-size:12px;font-weight:900;-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}.page-hero h1{font-family:'Archivo Black',Inter,sans-serif;font-size:clamp(46px,9vw,86px);line-height:.9;letter-spacing:-.06em;text-transform:uppercase;margin:18px 0 12px}.page-hero p{max-width:560px;color:rgba(255,255,255,.76);line-height:1.6;margin:0}.page-main{padding:26px!important;display:block!important}.tracking-grid,.feedback-page-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:18px;align-items:start}.tracking-main-card,.order-details-card,.page-panel{background:rgba(255,255,255,.50);border:1px solid rgba(255,255,255,.62);border-radius:30px;padding:20px;-webkit-backdrop-filter:blur(26px) saturate(1.7);backdrop-filter:blur(26px) saturate(1.7);box-shadow:inset 0 1px 0 rgba(255,255,255,.7),0 20px 60px rgba(42,22,8,.13)}.order-details-card h2,.page-panel h2{font-family:'Archivo Black',Inter,sans-serif;font-size:clamp(30px,5vw,46px);letter-spacing:-.06em;line-height:.9;text-transform:uppercase;margin:0 0 14px}.tracking-order-details{display:grid;gap:10px}.order-meta,.tracking-line,.tracking-total{display:flex;justify-content:space-between;gap:12px;align-items:center;border-radius:18px;background:rgba(255,255,255,.54);border:1px solid rgba(255,255,255,.64);padding:13px 14px}.tracking-line small,.order-meta span{display:block;color:var(--muted);font-weight:800;margin-top:3px}.tracking-total{background:rgba(22,18,15,.84);color:#fff}.tracking-note{display:flex;flex-direction:column;gap:8px;border-radius:18px;background:rgba(255,255,255,.54);border:1px solid rgba(255,255,255,.64);padding:13px 14px}.tracking-note span{display:block;color:var(--muted);font-weight:800;white-space:nowrap;padding-bottom:7px;border-bottom:1px solid rgba(22,18,15,.1)}.tracking-note b{overflow-wrap:break-word;word-break:normal}.empty-state{margin:0;color:var(--muted);line-height:1.55}.track-dot.placed{background:#ff3b30;box-shadow:0 0 0 9px rgba(255,59,48,.12),0 0 26px rgba(255,59,48,.9)}.track-dot.preparing{background:#ffd60a;box-shadow:0 0 0 9px rgba(255,214,10,.12),0 0 26px rgba(255,214,10,.9)}.track-dot.serving{background:#30d158;box-shadow:0 0 0 9px rgba(48,209,88,.12),0 0 26px rgba(48,209,88,.9)}#orderSteps span.active{background:#fff1bf;color:#9a6a00}.feedback-page-grid{grid-template-columns:1fr 1fr}.page-panel textarea{width:100%;min-height:122px;border-radius:22px;border:1px solid rgba(255,255,255,.62);background:rgba(255,255,255,.58);padding:14px;resize:vertical;color:var(--ink);margin:8px 0 14px}.feedback-dish-list{display:grid;gap:10px}.feedback-dish-list button{border:1px solid rgba(255,255,255,.62);background:rgba(255,255,255,.54);border-radius:18px;padding:14px;display:flex;justify-content:space-between;gap:10px;align-items:center;text-align:left;font-weight:900;color:var(--ink);box-shadow:inset 0 1px 0 rgba(255,255,255,.7)}.feedback-dish-list b{color:var(--orange)}
@media(min-width:1180px){.app-shell{width:min(1180px,calc(100% - 40px))}.menu-list{grid-template-columns:repeat(4,minmax(0,1fr))}.topbar{width:min(1120px,calc(100% - 40px))}.floating-cart{width:min(620px,calc(100% - 340px))}}
@media(max-width:860px){.tracking-grid,.feedback-page-grid{grid-template-columns:1fr}.page-main{padding:16px!important}.subpage-header{padding-left:18px;padding-right:18px}.menu-list{grid-template-columns:1fr}.floating-cart{width:calc(100% - 24px)}}
@media(max-width:420px){.table-search-chip{min-width:112px!important;padding-left:14px!important}.page-hero h1{font-size:44px}.tracking-main-card,.order-details-card,.page-panel{padding:16px;border-radius:24px}}
/* === Final requested layout fixes: sticky header, compact 2-column cards, service circles, ticker === */
body{padding-bottom:132px!important}
.store-title>span{display:none!important}
.topbar{position:fixed!important;top:14px!important;left:50%!important;transform:translateX(-50%)!important;z-index:999!important;width:min(1120px,calc(100% - 28px))!important;pointer-events:none!important}
.topbar>*{pointer-events:auto!important}
.circle,.table-search-chip,.mini-search-btn{will-change:transform;transform:translateZ(0)}
.cover{padding-top:82px!important}.store-header{z-index:60!important}
.category-tabs{position:sticky!important;top:76px!important;z-index:46!important;background:linear-gradient(180deg,rgba(255,248,237,.96),rgba(255,248,237,.78))!important;-webkit-backdrop-filter:blur(18px) saturate(1.5)!important;backdrop-filter:blur(18px) saturate(1.5)!important;border-radius:0 0 22px 22px;margin:0 -16px 10px!important;padding:10px 16px 12px!important;border-bottom:1px solid rgba(255,255,255,.54)}
.category-tabs button{min-width:max-content;background:rgba(255,255,255,.92)!important;border:1px solid rgba(255,255,255,.7)!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.8),0 12px 34px rgba(42,22,8,.1)!important}.category-tabs button.active{background:rgba(22,18,15,.72)!important;color:#fff!important}
#offers,.offers{display:none!important}.offer-card{display:none!important}
.service-circles{display:flex!important;justify-content:center!important;align-items:center!important;gap:14px!important;margin:4px auto 18px!important;padding:2px 0!important;max-width:380px!important;position:relative!important;z-index:10!important}
.service-circles[hidden]{display:none!important;margin:0!important;padding:0!important}
.service-circles button{width:74px!important;height:74px!important;min-height:74px!important;border-radius:50%!important;padding:0!important;display:flex!important;flex-direction:column!important;align-items:center!important;justify-content:center!important;gap:4px!important;background:rgba(255,255,255,.88)!important;border:1px solid rgba(255,255,255,.66)!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.78),inset 0 -18px 30px rgba(255,255,255,.16),0 18px 44px rgba(42,22,8,.12)!important;color:#16120f!important;font-weight:1000!important}.service-circles .service-icon{font-size:22px!important;line-height:1!important}.service-circles small{font-size:10px!important;line-height:1!important;font-weight:1000!important}
.menu-list{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:14px!important;align-items:stretch!important}.menu-item{grid-template-columns:1fr!important;gap:10px!important;padding:10px!important;border-radius:24px!important;min-width:0!important;overflow:hidden!important}.item-img{order:0!important;min-height:128px!important;border-radius:19px!important;width:100%!important}.item-info{gap:6px!important}.item-labels{gap:5px!important}.label{font-size:8.5px!important;padding:5px 6px!important}.rating-label{background:rgba(255,176,0,.16)!important;color:#9a5c00!important}.menu-item h3{font-size:16px!important;line-height:1.15!important;letter-spacing:-.03em!important}.menu-item p{font-size:12px!important;line-height:1.35!important;-webkit-line-clamp:2!important;min-height:32px!important}.price-row{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:auto}.price{font-size:17px!important;margin:0!important}
.add-control{bottom:7px!important;background:rgba(255,255,255,.42)!important;border:1px solid rgba(255,255,255,.7)!important}.add-control button{width:28px!important;height:28px!important}.add-control span{font-size:13px!important;min-width:18px!important}
.offer-ticker{position:fixed;left:0;right:0;bottom:0;height:42px;z-index:14;overflow:hidden;background:rgba(22,18,15,.82);color:#fff;border-top:1px solid rgba(255,255,255,.16);-webkit-backdrop-filter:blur(22px) saturate(1.6);backdrop-filter:blur(22px) saturate(1.6);display:flex;align-items:center;box-shadow:0 -14px 42px rgba(22,18,15,.18)}.ticker-track{display:flex;gap:42px;align-items:center;white-space:nowrap;animation:tickerMove 22s linear infinite;padding-left:100%;font-weight:900;font-size:13px}.ticker-track span{display:inline-flex;align-items:center}.ticker-track span::before{content:'•';color:#ffb000;margin-right:14px}@keyframes tickerMove{from{transform:translateX(0)}to{transform:translateX(-100%)}}
.floating-cart{bottom:52px!important;z-index:16!important}
/* All full-screen overlays must sit ABOVE the fixed header (z-5000) so nothing pokes through */
.feedback-sheet{z-index:7100!important}.modal{z-index:7200!important}.toast{z-index:8000!important}
.cart-backdrop{position:fixed;inset:0;background:rgba(22,18,15,.5);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);z-index:6900;opacity:0;pointer-events:none;transition:opacity .25s ease;will-change:opacity}
.cart-backdrop.open{opacity:1;pointer-events:auto}
.cart-drawer{z-index:7000!important}
body.cart-open{overflow:hidden}
body.cart-open .floating-cart-row{opacity:0!important;pointer-events:none!important}
@media(min-width:860px){body{padding-bottom:138px!important}.app-shell{width:min(1180px,calc(100% - 40px))!important}.cover{min-height:430px!important;padding-left:36px!important;padding-right:36px!important}.store-title h1{font-size:clamp(74px,7vw,104px)!important;max-width:780px}.category-tabs{top:84px!important;margin-left:-24px!important;margin-right:-24px!important;padding-left:24px!important;padding-right:24px!important}.service-circles{max-width:430px!important;gap:18px!important}.service-circles button{width:82px!important;height:82px!important;min-height:82px!important}.menu-list{grid-template-columns:repeat(4,minmax(0,1fr))!important;gap:18px!important}.menu-item{padding:13px!important;border-radius:28px!important}.item-img{min-height:170px!important}.menu-item h3{font-size:19px!important}.menu-item p{font-size:13px!important;min-height:36px!important}.floating-cart{width:min(620px,calc(100% - 340px))!important}}
@media(max-width:720px){.topbar{top:10px!important;width:calc(100% - 22px)!important}.cover{padding-top:72px!important}.category-tabs{top:66px!important;margin-left:-14px!important;margin-right:-14px!important;padding-left:14px!important;padding-right:14px!important}.service-circles{gap:12px!important;margin-bottom:16px!important}.service-circles button{width:68px!important;height:68px!important;min-height:68px!important}.menu-list{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:12px!important}.menu-item{padding:9px!important;border-radius:22px!important}.item-img{min-height:118px!important}.menu-item h3{font-size:15px!important}.menu-item p{font-size:11.5px!important}.floating-cart{bottom:52px!important}.offer-ticker{height:38px}.ticker-track{font-size:12px}}
@media(max-width:380px){.menu-list{gap:10px!important}.item-img{min-height:108px!important}.menu-item{padding:8px!important}.menu-item h3{font-size:14px!important}.label{font-size:8px!important;padding:4px 5px!important}.add-control{gap:5px!important;padding:5px!important}.add-control button{width:26px!important;height:26px!important}.service-circles button{width:64px!important;height:64px!important;min-height:64px!important}}
/* === Request update: fixed header capsules, square images, cart coupon, shop footer === */
.topbar{
position:fixed!important;
top:max(10px,env(safe-area-inset-top))!important;
left:50%!important;
right:auto!important;
transform:translate3d(-50%,0,0)!important;
z-index:5000!important;
width:min(1120px,calc(100vw - 24px))!important;
max-width:calc(100vw - 24px)!important;
isolation:isolate!important;
}
.logo-button,.table-search-chip,.track-button{
position:relative!important;
transform:translateZ(0)!important;
backface-visibility:hidden!important;
box-shadow:inset 0 1px 0 rgba(255,255,255,.82), inset 0 -18px 28px rgba(255,255,255,.10), 0 18px 44px rgba(0,0,0,.20)!important;
}
.store-header{position:relative!important;z-index:100!important;}
.cover{padding-top:88px!important;}
.item-img{
aspect-ratio:1/1!important;
min-height:0!important;
height:auto!important;
border-radius:22px!important;
background-size:cover!important;
background-position:center!important;
}
.item-img::after{background:linear-gradient(180deg,rgba(0,0,0,.02),rgba(0,0,0,.04))!important;}
.price-row{display:flex!important;align-items:center!important;justify-content:space-between!important;gap:8px!important;min-height:42px!important;}
.cart-coupon{margin-top:14px;background:rgba(255,255,255,.64);border:1px solid rgba(255,255,255,.75);border-radius:20px;padding:12px;box-shadow:inset 0 1px 0 rgba(255,255,255,.8),0 12px 30px rgba(42,22,8,.08);}
.cart-coupon label{display:block;font-size:12px;line-height:1;text-transform:uppercase;font-weight:1000;margin-bottom:8px;color:var(--ink);}
.coupon-input-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px;align-items:center;}
.coupon-input-row input{width:100%;height:44px;border:1px solid var(--line);border-radius:999px;background:rgba(255,255,255,.82);padding:0 14px;font-weight:800;color:var(--ink);outline:0;}
.coupon-input-row button{height:44px;border:0;border-radius:999px;background:var(--ink);color:#fff;font-weight:1000;padding:0 16px;box-shadow:0 12px 28px rgba(22,18,15,.18);}
.cart-coupon small{display:block;margin-top:8px;color:var(--muted);font-weight:800;line-height:1.35;}
.cart-coupon small.ok{color:var(--green);}
.see-all-coupons-btn{display:block;margin:10px auto 0;border:0;background:none;color:var(--red);font-weight:900;font-size:13px;text-decoration:underline;text-underline-offset:3px;cursor:pointer;}
.coupons-modal-card{max-height:80vh;overflow-y:auto;}
.coupons-modal-list{display:grid;gap:10px;margin-top:14px;text-align:left;}
.coupon-modal-item{background:#fff8f0;border:1.5px dashed var(--orange);border-radius:16px;padding:12px 14px;display:flex;justify-content:space-between;align-items:center;gap:10px;}
.coupon-modal-item b{font-size:16px;color:var(--ink);}
.coupon-modal-item span{color:var(--muted);font-size:12.5px;line-height:1.35;}
.coupon-modal-item button{border:0;background:var(--ink);color:#fff;border-radius:999px;padding:8px 14px;font-weight:900;font-size:12.5px;white-space:nowrap;cursor:pointer;}
.shop-details{margin:22px 0 70px;padding:18px;border-radius:26px;background:rgba(255,255,255,.58);border:1px solid rgba(255,255,255,.72);-webkit-backdrop-filter:blur(22px) saturate(1.4);backdrop-filter:blur(22px) saturate(1.4);box-shadow:inset 0 1px 0 rgba(255,255,255,.78),0 18px 44px rgba(42,22,8,.10);}
.shop-details div{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:8px;}
.shop-details span{font-family:'Archivo Black',Inter,sans-serif;text-transform:uppercase;letter-spacing:-.05em;font-size:24px;line-height:.95;}
.shop-details b{font-size:12px;line-height:1.2;background:rgba(22,18,15,.08);border-radius:999px;padding:8px 10px;}
.shop-details p{margin:0;color:var(--muted);font-size:13px;line-height:1.5;font-weight:700;}
.tracking-coupon{display:flex;justify-content:space-between;gap:12px;align-items:center;border-radius:18px;background:rgba(255,246,225,.78);border:1px solid rgba(255,255,255,.68);padding:13px 14px;color:#8b4e00;font-weight:900;}
.tracking-cancelled-banner{border-radius:18px;background:rgba(255,59,48,.14);border:1px solid rgba(255,59,48,.32);padding:13px 14px;color:#b32121;font-weight:800;font-size:13.5px;line-height:1.4}
.tracking-refund{background:rgba(255,59,48,.1)!important;color:#b32121}
.tracking-refund b{color:#b32121!important}
.tracking-splits{border-radius:18px;background:rgba(255,255,255,.54);border:1px solid rgba(255,255,255,.64);padding:13px 14px;display:grid;gap:8px}
.tracking-splits>span{display:block;color:var(--muted);font-weight:800;font-size:12px;text-transform:uppercase;letter-spacing:.04em}
.tracking-split-line{display:flex;justify-content:space-between;gap:10px;font-size:13.5px}
.tracking-split-line em{font-style:normal;font-weight:800}
.tracking-split-line em.paid{color:var(--green)}
.tracking-split-line em.unpaid{color:#b32121}
@media(min-width:860px){
.cover{padding-top:96px!important;}
.item-img{border-radius:24px!important;}
.shop-details{margin-bottom:78px;}
}
@media(max-width:720px){
.topbar{width:calc(100vw - 24px)!important;top:max(10px,env(safe-area-inset-top))!important;}
.cover{padding-top:74px!important;}
.shop-details{margin:18px 0 78px;padding:15px;border-radius:22px;}
.shop-details span{font-size:20px;}
}
/* ===================================================================
ADMIN PANEL — simple, light, neutral, mobile-first
Scoped under .admin-body so the storefront theme is untouched.
=================================================================== */
.admin-body{
--a-bg:#f4f5f7;
--a-card:#ffffff;
--a-border:#d3d7dd;
--a-border-strong:#c1c6ce;
--a-text:#1f2328;
--a-muted:#6b7280;
--a-accent:#2f6fed;
--a-danger:#d94b4b;
--a-hover:#eef0f3;
margin:0;
padding:0!important;
background:var(--a-bg)!important;
color:var(--a-text);
font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
min-height:100vh;
}
.admin-body button{font-family:inherit;cursor:pointer}
.admin-body h1,.admin-body h2{font-family:inherit}
.admin-body svg{display:block}
/* Shared buttons */
.admin-btn-primary{border:0;border-radius:8px;padding:9px 16px;font-weight:600;font-size:13px;background:var(--a-text);color:#fff;cursor:pointer}
.admin-btn-primary:hover{background:#000}
.admin-btn-ghost{border:1px solid var(--a-border);border-radius:8px;padding:9px 16px;font-weight:600;font-size:13px;background:#fff;color:var(--a-text);cursor:pointer}
.admin-btn-ghost:hover{background:var(--a-hover)}
.admin-btn-danger{border:1px solid var(--a-border);border-radius:8px;padding:9px 16px;font-weight:600;font-size:13px;background:#fff;color:var(--a-danger);cursor:pointer}
.admin-btn-danger:hover{background:#fdf2f2;border-color:#f3c9c9}
.admin-danger-btn{background:#fff!important;border:1px solid var(--a-border)!important;color:var(--a-danger)!important}
/* Login gate — hidden by default so it never flashes while the async auth check
(requireAuth in admin-shared.js) is still resolving on every page navigation.
JS explicitly sets display:grid only once it confirms the session is actually
logged out, and display:none once it confirms unlocked — this class is just
the safe starting state before either of those is known. */
.admin-lock{position:fixed;inset:0;display:none;place-items:center;padding:max(16px,env(safe-area-inset-top)) max(16px,env(safe-area-inset-right)) max(16px,env(safe-area-inset-bottom)) max(16px,env(safe-area-inset-left));background:var(--a-bg);z-index:10;overflow-y:auto;overscroll-behavior:contain}
@media(max-width:360px),(max-height:680px){
.admin-lock{align-items:start;padding:max(12px,env(safe-area-inset-top)) 12px max(12px,env(safe-area-inset-bottom))}
.admin-lock-card{margin:auto}
}
.admin-lock-card{width:min(400px,100%);background:var(--a-card);border:1px solid var(--a-border);border-radius:18px;padding:clamp(20px,6vw,28px);text-align:center;color:var(--a-text);box-shadow:0 18px 48px rgba(20,25,35,.09)}
.admin-lock-brand{display:flex;align-items:center;justify-content:center;width:max-content;margin:0 auto 14px;color:var(--a-text)}
.admin-lock-logo{display:block;width:54px;height:54px;object-fit:contain;flex:0 0 54px}
.admin-lock-card>span{display:inline-flex;background:var(--a-hover);border:1px solid var(--a-border);border-radius:999px;padding:6px 12px;font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.04em;color:var(--a-muted)}
.admin-lock-card h1{font-size:23px;font-weight:700;letter-spacing:-.01em;margin:14px 0 8px}
.admin-lock-card p{color:var(--a-muted);font-size:14px;line-height:1.5;margin:0 0 18px}
.admin-lock-card input{width:100%;height:46px;border-radius:10px;border:1px solid var(--a-border);background:#fff;color:var(--a-text);padding:0 14px;font-weight:500;outline:0;margin-bottom:12px;text-align:center;letter-spacing:.06em}
.admin-lock-card input:focus{border-color:var(--a-accent);box-shadow:0 0 0 3px rgba(47,111,237,.12)}
.admin-lock-card input::placeholder{color:#9ca3af;letter-spacing:normal}
.admin-lock-card button{width:100%;height:46px;border:0;border-radius:10px;background:var(--a-text);color:#fff;font-weight:600;font-size:15px;cursor:pointer}
.admin-lock-card small{display:block;margin-top:12px;color:var(--a-danger);font-weight:600;min-height:16px}
@media(max-width:360px){
.admin-lock-card{padding:20px 16px}
.admin-lock-brand{margin-bottom:12px}
.admin-lock-logo{width:50px;height:50px;flex-basis:50px}
}
/* App shell: fixed sidebar + main (block, not grid — avoids storefront main{} leak) */
.admin-app{min-height:100vh}
.admin-body main.admin-main,.admin-main{display:block!important;margin-left:236px;padding:104px 30px 64px;padding-right:76px;min-width:0}
.admin-sidebar{position:fixed;top:0;left:0;width:236px;height:100vh;background:var(--a-card);border-right:1px solid var(--a-border-strong);padding:20px 14px;display:flex;flex-direction:column;gap:20px;overflow:auto;z-index:50;box-shadow:1px 0 3px rgba(20,25,35,.03)}
/* Fade hint at the bottom edge of the sidebar's own scroll area — the nav list
can be taller than the viewport with no other visual cue that it scrolls. */
.admin-sidebar::after{
content:'';position:sticky;left:0;right:0;bottom:0;height:28px;margin-top:-28px;
display:block;pointer-events:none;
background:linear-gradient(180deg,transparent,var(--a-card));
}
.staff-shift-badge{display:flex;flex-direction:column;gap:6px;margin:8px 0 4px;padding:10px 12px;border-radius:10px;background:var(--a-bg);border:1px solid var(--a-border)}
.staff-shift-badge span{font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:var(--a-muted)}
.staff-shift-badge b{font-size:13px;color:var(--a-text)}
.admin-side-head{padding:2px 8px}
.admin-side-head span{display:block;color:var(--a-muted);font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.05em}
.admin-side-head b{display:block;font-size:17px;font-weight:700;letter-spacing:-.01em;margin-top:3px;color:var(--a-text)}
.admin-side-nav{display:flex;flex-direction:column;gap:2px}
.admin-side-nav a{display:flex;align-items:center;gap:11px;padding:10px 12px;border-radius:8px;color:var(--a-muted);font-weight:600;font-size:14px}
.admin-side-nav a svg{flex:0 0 auto;color:currentColor}
.admin-side-nav a:hover{background:var(--a-hover);color:var(--a-text)}
.admin-side-nav a.active{background:var(--a-text);color:#fff}
.admin-side-foot{margin-top:auto;display:flex;flex-direction:column;gap:8px}
.admin-side-foot a,.admin-side-foot button{display:flex;align-items:center;justify-content:center;gap:8px;color:var(--a-muted);font-weight:600;font-size:13px;padding:10px 12px;border-radius:8px;border:1px solid var(--a-border);background:#fff}
.admin-side-foot a svg,.admin-side-foot button svg{flex:0 0 auto}
.admin-side-foot a:hover{background:var(--a-hover);color:var(--a-text)}
.admin-side-foot button{color:var(--a-danger)}
.admin-side-foot button:hover{background:#fdf2f2}
/* Shared admin top header */
.admin-mobile-bar{
display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:14px;
position:fixed;top:0;left:236px;right:0;z-index:44;height:64px;box-sizing:border-box;
padding:10px 96px 10px 24px;background:rgba(255,255,255,.88);
-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);
border-bottom:1px solid var(--a-border-strong);
transition:left .2s ease;
}
.admin-sidebar-toggle{display:none;align-items:center;justify-content:center;width:38px;height:38px;flex:0 0 38px;border:1px solid var(--a-border);border-radius:8px;background:#fff;color:var(--a-text);cursor:pointer}
.admin-sidebar-toggle:hover{background:var(--a-hover)}
@media(min-width:901px){
.admin-sidebar-toggle{display:flex}
.admin-sidebar{transition:transform .2s ease}
.admin-body main.admin-main,.admin-main{transition:margin-left .2s ease}
.admin-app.sidebar-collapsed .admin-sidebar{transform:translateX(-105%);pointer-events:none}
.admin-app.sidebar-collapsed .admin-body main.admin-main,.admin-app.sidebar-collapsed .admin-main{margin-left:0}
.admin-app.sidebar-collapsed .admin-mobile-bar{left:0}
}
.admin-mobile-title{min-width:0;display:flex;align-items:center}
.admin-mobile-title b{font-size:18px;font-weight:850;color:var(--a-text);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;line-height:1.1}
.admin-mobile-title small{display:none!important}
.admin-mobile-actions{display:flex;align-items:center;justify-content:flex-end;gap:8px;min-width:0;overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;scrollbar-width:none}
.admin-mobile-actions::-webkit-scrollbar{display:none}
.admin-mobile-actions[hidden]{display:none!important}
.admin-mobile-actions .admin-page-actions{display:flex;width:auto;flex:0 0 auto;gap:8px;flex-wrap:nowrap;justify-content:flex-end;margin:0}
.admin-mobile-actions button,
.admin-mobile-actions a,
.admin-mobile-actions select{
flex:0 0 auto!important;min-height:38px!important;max-height:40px;border-radius:10px!important;
padding:9px 13px!important;font-size:12px!important;font-weight:850!important;
white-space:nowrap!important;overflow:hidden;text-overflow:ellipsis;
}
.admin-mobile-actions select{max-width:150px;background-color:#fff}
.admin-nav-close{display:none}
.admin-nav-backdrop{display:none}
/* ===== Notification bell (fixed, top-right, every admin page) ===== */
/* isolation+translateZ forces the bell onto its own compositor layer with an
unambiguous stacking context. Without this, the backdrop-filter on
.admin-mobile-bar (which the bell visually sits over) can win real-click
hit-testing in some Chromium builds even though it paints beneath the bell
(z-index 44 vs 120) — a synthetic .click() bypasses hit-testing entirely so
it "works" while a real click on the same spot does not. Same underlying
class of bug as the dish-feedback close button (see .feedback-card-scroll). */
.admin-notif-bell{
position:fixed;top:10px;right:24px;z-index:500;
width:44px;height:44px;border-radius:50%;border:1px solid var(--a-border);
background:var(--a-card);color:var(--a-text);cursor:pointer;
display:flex;align-items:center;justify-content:center;
box-shadow:0 6px 18px rgba(22,18,15,.1);
isolation:isolate;transform:translateZ(0);pointer-events:auto;touch-action:manipulation;
}
.admin-notif-bell:hover{background:var(--a-hover)}
.admin-notif-badge{
position:absolute;top:-4px;right:-4px;min-width:19px;height:19px;border-radius:999px;
background:#d81f2a;color:#fff;font-size:10.5px;font-weight:900;
display:flex;align-items:center;justify-content:center;padding:0 4px;
border:2px solid var(--a-card);
}
.admin-notif-badge[hidden]{display:none!important}
.admin-notif-panel{
position:fixed;top:70px;right:24px;z-index:501;width:min(360px,calc(100vw - 32px));
max-height:70vh;overflow:auto;background:#fff;border:1px solid var(--a-border);border-radius:14px;
box-shadow:0 24px 60px rgba(22,18,15,.22);display:none;
isolation:isolate;transform:translateZ(0);
}
.admin-notif-panel.open{display:block}
.admin-notif-head{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:14px 16px;border-bottom:1px solid var(--a-border);position:sticky;top:0;background:#fff}
.admin-notif-head b{font-size:14px;color:var(--a-text)}
.admin-notif-head-actions{display:flex;gap:8px}
.admin-notif-head-actions button{border:1px solid var(--a-border);background:#fff;border-radius:8px;padding:6px 10px;font-size:11px;font-weight:700;color:var(--a-muted);cursor:pointer}
.admin-notif-head-actions button:hover{background:var(--a-hover)}
.admin-notif-sound-btn{display:flex;align-items:center;justify-content:center;padding:6px!important;color:var(--a-muted)}
.admin-notif-close-btn{display:flex;align-items:center;justify-content:center;padding:0 6px!important;font-size:20px;line-height:1;color:var(--a-muted)}
.admin-notif-sound-box{display:flex;flex-direction:column;gap:2px;padding:14px 16px;border-bottom:1px solid var(--a-border);background:linear-gradient(180deg,var(--a-hover),transparent)}
.admin-notif-sound-box[hidden]{display:none}
.admin-notif-sound-box small{display:flex;align-items:center;gap:6px;font-size:11px;font-weight:800;color:var(--a-muted);text-transform:uppercase;letter-spacing:.03em;margin-bottom:8px}
.admin-notif-sound-row{display:flex;align-items:center;gap:10px;padding:9px 4px;font-size:13.5px;color:var(--a-text);cursor:pointer;border-radius:8px}
.admin-notif-sound-row:hover{background:rgba(15,20,30,.035)}
.admin-notif-sound-icon{flex:0 0 auto;display:flex;align-items:center;justify-content:center;width:30px;height:30px;border-radius:9px;background:#fff;border:1px solid var(--a-border);color:var(--a-muted)}
.admin-notif-sound-label{flex:1;font-weight:700}
/* Real toggle switch instead of a bare checkbox — reads at a glance as on/off, matches
the rest of the admin panel's switch controls. */
.admin-notif-switch{position:relative;flex:0 0 auto;width:40px;height:24px}
.admin-notif-switch input{position:absolute;inset:0;opacity:0;margin:0;cursor:pointer;z-index:1}
.admin-notif-switch i{position:absolute;inset:0;border-radius:999px;background:#d8dce3;transition:background .15s ease}
.admin-notif-switch i::before{content:'';position:absolute;top:3px;left:3px;width:18px;height:18px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.25);transition:transform .15s ease}
.admin-notif-switch input:checked+i{background:var(--a-accent)}
.admin-notif-switch input:checked+i::before{transform:translateX(16px)}
.admin-notif-cats{display:flex;gap:6px;overflow-x:auto;overflow-y:hidden;padding:10px 12px;scrollbar-width:none;-webkit-overflow-scrolling:touch;border-bottom:1px solid var(--a-border)}
.admin-notif-cats::-webkit-scrollbar{display:none}
.admin-notif-cat{display:flex;align-items:center;gap:5px;flex:0 0 auto;border:1px solid var(--a-border);background:#fff;border-radius:999px;padding:7px 12px;font-size:11.5px;font-weight:700;color:var(--a-muted);white-space:nowrap;cursor:pointer}
.admin-notif-cat.active{background:var(--a-text);color:#fff;border-color:var(--a-text)}
.admin-notif-list{padding:6px}
.admin-notif-day{padding:8px 10px 4px;font-size:11px;font-weight:800;color:var(--a-muted);text-transform:uppercase;letter-spacing:.04em}
.admin-notif-item{
width:100%;display:flex;align-items:flex-start;gap:10px;text-align:left;
border:0;background:none;border-radius:10px;padding:9px 10px;cursor:pointer;
}
.admin-notif-item:hover{background:var(--a-hover)}
.admin-notif-item.unread{background:rgba(255,90,0,.06)}
.admin-notif-icon{display:flex;align-items:center;justify-content:center;width:28px;height:28px;flex:0 0 auto;border-radius:50%;background:var(--a-bg);color:var(--a-muted)}
.admin-notif-item.unread .admin-notif-icon{background:rgba(255,90,0,.14);color:var(--orange,#ff5a00)}
.admin-notif-body{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:2px}
.admin-notif-body b{font-size:12.5px;color:var(--a-text);font-weight:700}
.admin-notif-body small{font-size:11.5px;color:var(--a-muted);white-space:normal;line-height:1.3}
.admin-notif-time{flex:0 0 auto;font-size:10.5px;color:var(--a-muted);white-space:nowrap;margin-top:1px}
@media(max-width:900px){
/* Whenever the Clear-paid-orders action sits in the compact mobile/tablet header
it collapses to a compact eraser icon (a "clear" affordance, not a delete/trash
one) so the long "Clear Paid Orders" label never truncates or crowds the row. */
.admin-mobile-actions #clearOrdersBtn{padding:8px 10px!important;max-width:none!important}
.admin-mobile-actions #clearOrdersBtn .cob-txt{display:none}
.admin-mobile-actions #clearOrdersBtn .cob-ico{display:inline-flex}
/* Keep the visible toast below the fixed header and the device safe area. */
#adminToast{top:calc(76px + env(safe-area-inset-top,0px))!important}
.admin-notif-bell{
top:auto;bottom:16px;right:16px;width:50px;height:50px;z-index:88;
background:rgba(255,255,255,.76);-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);
box-shadow:0 16px 36px rgba(15,20,30,.22);
}
.admin-notif-panel{top:auto;bottom:78px;right:10px;width:calc(100vw - 20px);max-height:min(560px,calc(100vh - 104px))}
/* The bell relocates to bottom-right on mobile and sits directly over the
last order card's Delete button / item rows unless the list reserves
clearance for it. */
.admin-top-list{padding-bottom:76px}
}
/* Page header */
.admin-page-head{display:none!important;align-items:flex-start;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:22px}
.admin-page-head h1{font-size:24px;font-weight:700;letter-spacing:-.01em;margin:0}
.admin-page-head p{color:var(--a-muted);margin:6px 0 0;font-weight:400;font-size:14px;line-height:1.5}
.admin-page-actions{display:flex;gap:8px;flex-wrap:nowrap;flex:0 0 auto}
.admin-hamburger{display:none}
.admin-page-actions button,.admin-page-actions a{border:0;border-radius:8px;padding:10px 16px;font-weight:600;font-size:13px;background:var(--a-text);color:#fff;cursor:pointer;white-space:nowrap}
.admin-page-actions .ghost{background:#fff;border:1px solid var(--a-border);color:var(--a-text)}
#clearOrdersBtn{
border:1px solid #f0b8b8!important;background:#fff5f5!important;color:#a61b1b!important;
box-shadow:inset 3px 0 0 #d93a3a;font-weight:750!important;
}
#clearOrdersBtn:hover{border-color:#d93a3a!important;background:#ffe8e8!important;color:#851313!important}
#clearOrdersBtn .cob-ico{display:none;align-items:center;justify-content:center}
#clearOrdersBtn .cob-txt{display:inline}
/* Cards / panels */
.admin-panel,.admin-card{background:var(--a-card);border:1px solid var(--a-border);border-radius:12px;padding:20px;margin-bottom:16px;box-shadow:0 1px 2px rgba(20,25,35,.04)}
.admin-panel h2,.admin-card-head h2{font-size:16px;font-weight:700;letter-spacing:-.01em;margin:0 0 16px;padding-bottom:12px;border-bottom:1px solid var(--a-border)}
.admin-section-title{font-size:16px;font-weight:700;letter-spacing:-.01em;margin:4px 0 16px;padding-bottom:12px;border-bottom:1px solid var(--a-border)}
.admin-section-hint{margin:-12px 0 16px;font-size:12.5px;color:var(--a-muted);line-height:1.5;font-weight:400}
.admin-card-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:16px;padding-bottom:12px;border-bottom:1px solid var(--a-border)}
.admin-card-head h2{margin:0;padding-bottom:0;border-bottom:0}
.admin-card-head button,.admin-card-head a{border:0;border-radius:8px;padding:8px 14px;font-weight:600;font-size:12px;background:var(--a-text);color:#fff;cursor:pointer;white-space:nowrap}
.admin-card-head button.admin-btn-ghost,.admin-card-head a.admin-btn-ghost{background:#fff;color:var(--a-text);border:1px solid var(--a-border)}
.admin-card-head button.admin-btn-ghost:hover,.admin-card-head a.admin-btn-ghost:hover{background:var(--a-hover);color:var(--a-text)}
/* Insight stat cards */
.admin-insight-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-bottom:16px}
.admin-insight-card{background:var(--a-card);border:1px solid var(--a-border);border-radius:12px;padding:18px;box-shadow:0 1px 2px rgba(20,25,35,.04)}
.admin-insight-card b{display:block;font-size:26px;font-weight:700;line-height:1.15;color:var(--a-text)}
.admin-insight-card span{display:block;color:var(--a-muted);font-size:12px;font-weight:500;text-transform:uppercase;margin-top:6px;letter-spacing:.02em}
/* align-items:stretch (grid default) so side-by-side panels like "Workspace
Details" / "Current Plan" always match height — align-items:start let each
card size to its own content, so the shorter one had a visibly uneven
bottom edge next to the taller one. */
.admin-panels-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;align-items:stretch}
.admin-panels-grid .admin-panel{margin-bottom:0}
.admin-panels-grid+.admin-panels-grid{margin-top:16px;padding-top:16px;border-top:1px solid var(--a-border)}
/* Simple list rows */
.admin-top-list{display:grid;gap:8px}
.admin-top-row{display:flex;align-items:center;justify-content:space-between;gap:10px;background:var(--a-bg);border:1px solid var(--a-border);border-radius:8px;padding:11px 14px;font-size:14px}
.admin-top-row>span:first-child{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.admin-top-row b{color:var(--a-text);white-space:nowrap;font-weight:600}
.admin-top-row small{color:var(--a-muted);font-weight:500;white-space:nowrap}
/* Field primitive (label + input) */
.admin-field{display:flex;flex-direction:column;gap:6px;min-width:0}
.admin-field>span{font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.03em;color:var(--a-muted)}
.admin-field input,.admin-field select,.admin-field textarea{width:100%;border:1px solid var(--a-border);border-radius:8px;padding:10px 11px;font-size:13.5px;font-weight:500;color:var(--a-text);background:#fff;outline:0;font-family:inherit}
.admin-field input:focus,.admin-field select:focus,.admin-field textarea:focus{border-color:var(--a-accent);box-shadow:0 0 0 3px rgba(47,111,237,.12)}
.admin-field textarea{min-height:82px;resize:vertical;line-height:1.5}
.option-rows{display:flex;flex-direction:column;gap:8px}
.option-row{display:grid;grid-template-columns:1fr 100px 30px;gap:8px;align-items:center}
.option-row .opt-name,.option-row .opt-price{border:1px solid var(--a-border);border-radius:8px;padding:9px 10px;font-size:13px;font-family:inherit;color:var(--a-text)}
.opt-remove{border:0;background:#fff0f0;color:#b32121;border-radius:8px;width:30px;height:34px;font-size:16px;font-weight:800;cursor:pointer}
.option-add-btn{margin-top:8px;border:1px dashed var(--a-border);background:#fff;border-radius:8px;padding:8px 12px;font-size:12.5px;font-weight:700;color:var(--a-accent);cursor:pointer}
/* All 4 controls share one fixed height and sit on one flex row (align-items:center) —
the old 2x2 grid paired the wrong fields visually (amount lined up under the remove
button instead of its own label) and the bare "₹" placeholder vanished once typed
into and wasn't vertically centred against the text input next to it. Wraps onto a
second line on narrow screens, but everything on each line still shares the same
height so nothing looks offset. */
.split-edit-rows{display:flex;flex-direction:column;gap:10px;margin-top:10px}
.split-edit-row{display:flex;flex-wrap:wrap;align-items:center;gap:8px;background:rgba(22,18,15,.02);border:1px solid var(--a-border);border-radius:10px;padding:10px}
.split-edit-row .split-edit-label{flex:1 1 130px;min-width:0}
.split-edit-amount-wrap{position:relative;flex:0 0 100px}
.split-edit-amount-wrap span{position:absolute;left:11px;top:50%;transform:translateY(-50%);color:var(--a-muted);font-size:13px;font-weight:700;pointer-events:none}
.split-edit-amount-wrap input{padding-left:24px!important;width:100%}
.split-edit-row .split-edit-method{flex:1 1 130px;min-width:0}
.split-edit-row .opt-remove{flex:0 0 auto;height:40px}
.split-edit-row input,.split-edit-row select{height:40px;box-sizing:border-box;border:1px solid var(--a-border);border-radius:8px;padding:0 10px;font-size:13px;font-family:inherit;color:var(--a-text);min-width:0}
.admin-body input[type="checkbox"]{width:26px!important;height:26px!important;min-width:26px!important;accent-color:var(--a-accent)}
.admin-form-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.admin-form-grid[hidden]{display:none!important}
.admin-form-grid .full{grid-column:1/-1}
/* Item cards (menu item / coupon) */
.admin-menu-list,.admin-orders-list,.admin-ratings-list{display:grid;gap:14px}
.admin-menu-list{grid-template-columns:repeat(auto-fill,minmax(230px,1fr))}
.menu-card{background:var(--a-card);border:1px solid var(--a-border);border-radius:14px;padding:12px;display:flex;flex-direction:column;gap:12px;min-width:0}
.menu-card-thumb{width:100%;aspect-ratio:4/3;border-radius:10px;background:var(--a-bg) center/cover no-repeat;border:1px solid var(--a-border);display:grid;place-items:center;overflow:hidden}
.menu-card-thumb span{font-size:11px;font-weight:700;color:var(--a-muted)}
.menu-card-body{display:grid;gap:7px;min-width:0}
.menu-card-top{display:flex;justify-content:space-between;align-items:flex-start;gap:10px}
.menu-card-top b{min-width:0;font-size:15px;line-height:1.25;color:var(--a-text);overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.menu-card-top span{flex:0 0 auto;font-size:13px;font-weight:900;color:var(--orange)}
.menu-card-meta{display:flex;gap:6px;flex-wrap:wrap;align-items:center}
.menu-card-meta small,.menu-card-meta em{display:inline-flex;align-items:center;max-width:100%;border:1px solid var(--a-border);border-radius:999px;background:var(--a-bg);padding:4px 8px;font-size:10.5px;font-style:normal;font-weight:800;color:var(--a-muted);line-height:1}
.menu-card-meta em{background:#fff;color:var(--a-text)}
.menu-card p{margin:0;color:var(--a-muted);font-size:12px;line-height:1.4;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.menu-card-actions{margin-top:auto}
.menu-card-actions button{flex:1}
.admin-menu-edit-preview{display:grid;grid-template-columns:82px minmax(0,1fr);gap:12px;align-items:center;margin:4px 0 16px;padding:10px;border:1px solid var(--a-border);border-radius:12px;background:var(--a-bg)}
.admin-menu-edit-preview .admin-item-thumb{width:82px;height:82px;aspect-ratio:auto}
.admin-menu-edit-preview b{display:block;font-size:16px;line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.admin-menu-edit-preview small{display:block;margin-top:4px;font-size:12px;line-height:1.4;color:var(--a-muted)}
/* Coupons — compact cards (code + offer up top), Edit opens the full form in a modal */
.admin-coupons-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:14px}
.coupon-card{background:var(--a-card);border:1px solid var(--a-border);border-radius:14px;padding:16px;display:flex;flex-direction:column;gap:10px}
.coupon-card-top{display:flex;flex-direction:column;gap:4px}
.coupon-card-code{font-size:17px;font-weight:900;letter-spacing:.02em;color:var(--a-text)}
.coupon-card-offer{font-size:13px;font-weight:700;color:var(--orange)}
.coupon-card-meta{font-size:12px;color:var(--a-muted);line-height:1.4}
.coupon-card .admin-row-actions{margin-top:auto}
.admin-item-thumb{width:100%;aspect-ratio:1/1;border-radius:10px;background:var(--a-bg) center/cover no-repeat;border:1px solid var(--a-border);display:grid;place-items:center}
.admin-item-thumb span{color:#9ca3af;font-size:11px;font-weight:500}
.admin-upload-btn{display:inline-flex;align-items:center;justify-content:center;border:1px solid var(--a-border);background:#fff;border-radius:8px;padding:9px 12px;font-weight:600;font-size:12px;color:var(--a-text);cursor:pointer;text-align:center}
.admin-upload-btn:hover{background:var(--a-hover)}
.admin-upload-btn input[type="file"]{display:none}
.admin-item-foot{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:16px}
.admin-veg{display:inline-flex;align-items:center;gap:7px;font-size:13px;font-weight:600;color:var(--a-text);cursor:pointer}
.admin-veg input{width:16px;height:16px;accent-color:var(--a-text)}
.admin-row-actions{display:flex;gap:8px}
/* Orders summary / filter bar */
.admin-orders-summary{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:16px}
.admin-filter{border:1px solid var(--a-border);background:#fff;border-radius:999px;padding:8px 14px;font-weight:600;font-size:12.5px;color:var(--a-muted);cursor:pointer}
.admin-filter:hover{background:var(--a-hover)}
.admin-filter.active{background:var(--a-text);color:#fff;border-color:var(--a-text)}
.admin-filter-note{margin-left:auto;font-size:12.5px;color:var(--a-muted)}
.admin-filter-note b{color:var(--a-text);font-weight:700}
/* Orders detail */
.admin-order-card{background:var(--a-card);border:1.5px solid var(--a-text);border-radius:12px;padding:16px 18px;cursor:pointer}
.admin-order-card:hover{border-color:#d3d6dc}
.admin-order-card-head{display:flex;justify-content:space-between;gap:10px;align-items:center}
.admin-order-card-head b{font-size:15px;font-weight:700}
.admin-order-head-right{display:flex;align-items:center;gap:10px;flex-wrap:wrap;justify-content:flex-end}
.admin-order-time{color:var(--a-muted);font-size:12px;font-weight:500;white-space:nowrap}
.admin-badge{display:inline-flex;align-items:center;gap:5px;font-size:11px;font-weight:600;padding:4px 9px;border-radius:999px;border:1px solid;white-space:nowrap}
.admin-badge svg{width:13px;height:13px}
.admin-badge.paid{background:#eafaf0;color:#1a7f4b;border-color:#bfe8cf}
.admin-badge.unpaid{background:#fef6e7;color:#a5680a;border-color:#f3dca0}
.admin-order-card-sub{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}
.admin-order-tag{background:var(--a-bg);border:1px solid var(--a-border);border-radius:6px;padding:4px 10px;font-size:11px;font-weight:600;color:var(--a-muted)}
.admin-order-tag-online{background:linear-gradient(135deg,rgba(124,58,237,.12),rgba(216,31,42,.1));border-color:rgba(124,58,237,.35);color:#7c3aed;font-weight:800;display:inline-flex!important;align-items:center;gap:4px}
.admin-order-detail{margin-top:14px;padding-top:14px;border-top:1px solid var(--a-border);display:none;gap:2px}
.admin-order-detail.open{display:grid}
.admin-order-detail-line{display:flex;justify-content:space-between;gap:10px;font-size:13px;padding:6px 0}
.admin-order-item-right{display:flex;align-items:center;gap:8px}
.admin-item-paid-btn{border:1px solid rgba(22,18,15,.18);background:#fff0f0;color:#b32121;border-radius:999px;padding:3px 9px;font-size:10.5px;font-weight:800;cursor:pointer;white-space:nowrap}
.admin-item-paid-btn.paid{background:#e7faef;color:#177a45;border-color:rgba(23,122,69,.2)}
.admin-order-detail-line small{color:var(--a-muted);display:block;margin-top:2px}
.admin-order-detail-total{display:flex;justify-content:space-between;font-weight:700;border-top:1px solid var(--a-border);padding-top:10px;margin-top:6px}
.admin-order-actions{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:12px}
.admin-order-actions button{width:100%;box-sizing:border-box;margin:0;text-align:center;white-space:normal;line-height:1.2}
.admin-order-actions-danger{margin-top:4px;padding-top:12px;border-top:1px dashed var(--a-border)}
.admin-order-cleared-hint{margin-top:12px;background:#eafaf0;color:#1a7f4b;border:1px solid #bfe8cf;border-radius:8px;padding:9px 12px;font-size:12.5px;font-weight:600;line-height:1.4;display:flex;align-items:center;gap:6px}
.admin-order-cleared-hint svg{flex:0 0 auto}
.admin-clear-btn{grid-column:1/-1;background:linear-gradient(135deg,var(--orange,#ff5a00),var(--red,#d81f2a))!important;color:#fff!important;border:0!important}
/* ===== Merge-into-table picker modal ===== */
.merge-table-modal{position:fixed;inset:0;z-index:210;display:none;place-items:center;padding:20px;background:rgba(22,18,15,.55);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.merge-table-modal.open{display:grid}
.merge-table-modal-inner{width:min(360px,100%);max-height:80vh;overflow:hidden;background:#fff;border-radius:16px;padding:0;position:relative;box-shadow:0 30px 90px rgba(0,0,0,.35)}
.merge-table-modal-scroll{max-height:80vh;overflow:auto;padding:20px}
.merge-table-close{position:absolute;right:12px;top:12px;width:32px;height:32px;border:0;border-radius:50%;background:var(--a-text);color:#fff;font-size:18px;line-height:1;cursor:pointer;z-index:2}
.merge-table-modal-inner h3{margin:0 12px 6px 0;font-size:16px}
.merge-table-list{display:grid;gap:8px;margin-top:12px}
.merge-table-option{width:100%;display:flex;align-items:center;justify-content:space-between;gap:10px;border:1px solid var(--a-border);background:#fff;border-radius:10px;padding:11px 14px;font-weight:700;font-size:13.5px;color:var(--a-text);cursor:pointer;text-align:left}
.merge-table-option.free:hover{background:var(--a-hover)}
.merge-table-option.occupied{cursor:not-allowed;background:#fafafa;opacity:.65}
.merge-table-option-status{flex:0 0 auto;font-size:10.5px;font-weight:900;text-transform:uppercase;letter-spacing:.02em;border-radius:999px;padding:5px 10px}
.merge-table-option-status.free{background:#e8f8ee;color:#177a45}
.merge-table-option-status.occupied{background:#fee2e2;color:#b91c1c}
/* POS: staff-punched order modal */
.pos-modal-inner{width:min(640px,100%);max-height:88vh}
.pos-modal-inner .merge-table-modal-scroll{max-height:88vh}
.pos-section{margin:16px 0;padding-top:14px;border-top:1px solid var(--a-border)}
.pos-section:first-of-type{margin-top:14px;padding-top:0;border-top:0}
.pos-section h4{margin:0 0 10px;font-size:13px;font-weight:800;color:var(--a-muted);text-transform:uppercase;letter-spacing:.04em}
.pos-section-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:10px}
.pos-section-head h4{margin:0}
.pos-menu-search{width:180px;max-width:45vw;padding:7px 12px;border:1px solid var(--a-border);border-radius:999px;font-size:13px}
/* Left-right scrollable category strip, "All" selected by default. Sits OUTSIDE the
dish grid's own scroll container (.pos-menu-picker has its own overflow:auto below),
so it never scrolls away when the dish list underneath is scrolled. */
.pos-menu-cats{display:flex;gap:6px;overflow-x:auto;overflow-y:hidden;padding:2px 2px 10px;margin-bottom:2px;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.pos-menu-cats::-webkit-scrollbar{display:none}
.pos-menu-cat{flex:0 0 auto;border:1px solid var(--a-border);background:#fff;border-radius:999px;padding:7px 14px;font-size:12.5px;font-weight:800;color:var(--a-muted);white-space:nowrap;cursor:pointer}
.pos-menu-cat:hover{background:var(--a-hover)}
.pos-menu-cat.active{background:var(--a-text);border-color:var(--a-text);color:#fff}
.pos-menu-picker{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:8px;max-height:320px;overflow:auto;padding:3px}
/* A qty stepper lives directly on the card (mirrors the storefront menu card) — a
customizable dish's badge is the combined total across all its lines (2 Half + 1
Full = 3), + opens the chooser, − removes the most recently added line; a plain
dish's +/- adjusts the cart straight from here, no modal needed. */
.pos-menu-item{display:flex;align-items:center;justify-content:space-between;gap:10px;border:1px solid var(--a-border);background:#fff;border-radius:10px;padding:9px 9px 9px 12px;font-size:13px;min-width:0}
.pos-menu-item:hover{border-color:var(--a-text)}
.pos-menu-item-info{display:flex;flex-direction:column;gap:2px;min-width:0;font-weight:700;color:var(--a-text)}
.pos-menu-item-info small{color:var(--a-muted);font-weight:700}
.pos-menu-item-tag{display:block;font-size:10px;font-weight:900;text-transform:uppercase;letter-spacing:.03em;color:var(--a-accent)}
.pos-menu-item-qty{flex:0 0 auto;display:flex;align-items:center;gap:8px}
.pos-menu-item-qty button{width:26px;height:26px;border-radius:50%;border:1px solid var(--a-border);background:#fff;cursor:pointer;font-weight:700;color:var(--a-text)}
.pos-menu-item-qty button:hover{background:var(--a-hover)}
.pos-menu-item-qty span{min-width:14px;text-align:center;font-weight:800}
/* Variant/add-on chooser sheet, opened on top of the POS modal for a customizable dish —
every row (plate size AND add-on) is its own independent +/- stepper, not a single
radio pick, so staff can punch in e.g. 2 Half + 1 Full in one go. */
.pos-options-group{display:flex;flex-direction:column;gap:8px;margin:0 0 14px}
.pos-option-row{display:flex;align-items:center;gap:10px;border:1px solid var(--a-border);border-radius:10px;padding:11px 12px;background:#fafafa}
.pos-option-label{flex:1;min-width:0;font-weight:700;font-size:13.5px;color:var(--a-text)}
.pos-option-row>b{flex:0 0 auto;font-size:13px;color:var(--a-muted)}
.admin-qty-stepper{flex:0 0 auto;display:flex;align-items:center;gap:10px}
.admin-qty-stepper button{width:28px;height:28px;border-radius:50%;border:1px solid var(--a-border);background:#fff;cursor:pointer;font-weight:700;color:var(--a-text)}
.admin-qty-stepper span{min-width:16px;text-align:center;font-weight:800}
.pos-cart{display:grid;gap:8px;max-height:180px;overflow:auto;padding:2px}
.pos-cart-row{display:grid;grid-template-columns:1fr auto auto auto;align-items:center;gap:10px;background:var(--a-bg);border:1px solid var(--a-border);border-radius:8px;padding:9px 12px;font-size:13px}
.pos-cart-qty{display:flex;align-items:center;gap:8px}
.pos-cart-qty button{width:26px;height:26px;border-radius:50%;border:1px solid var(--a-border);background:#fff;cursor:pointer;font-weight:700}
.pos-foot{border-top:1px solid var(--a-border);margin-top:4px;padding-top:14px}
.pos-foot span{font-weight:700;font-size:14px}
/* Ratings + comments */
.admin-rating-row{display:flex;align-items:center;justify-content:space-between;gap:10px;background:var(--a-bg);border:1px solid var(--a-border);border-radius:8px;padding:12px 14px;font-size:14px}
.admin-rating-row>span:first-child{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.admin-rating-row b{color:var(--a-text);font-weight:600;white-space:nowrap}
.admin-rating-row small{color:var(--a-muted);font-weight:500;white-space:nowrap}
.admin-comment-row{background:var(--a-bg);border:1px solid var(--a-border);border-radius:8px;padding:13px 14px}
.admin-comment-row b{display:block;font-size:13px;font-weight:600}
.admin-comment-row p{margin:6px 0 0;color:var(--a-text);font-size:13px;line-height:1.5}
.admin-comment-row small{color:var(--a-muted);font-weight:500;display:block;margin-top:6px}
/* Settings form + media */
.admin-settings-form{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.admin-settings-form .full{grid-column:1/-1}
/* A field's own show/hide toggle sits directly under it, not in a separate list
elsewhere on the page — keeps the control next to the thing it controls. */
.admin-field-with-toggle{display:flex;flex-direction:column;gap:8px;min-width:0}
.admin-field-with-toggle .admin-switch-row{background:var(--a-bg);border-radius:8px;padding:8px 10px}
.admin-media-row{display:flex;gap:14px;align-items:flex-start;flex-wrap:wrap}
.admin-media-preview{width:76px;height:76px;border-radius:10px;border:1px solid var(--a-border);background:var(--a-bg) center/cover no-repeat;flex:0 0 auto;display:flex;align-items:center;justify-content:center;font-weight:800;color:var(--a-muted);font-size:11px;text-transform:uppercase}
.admin-media-wide{width:132px;height:76px}
.admin-media-empty{background-color:var(--a-bg)!important}
#logoPreview.admin-media-empty{border-radius:50%;font-size:26px;font-weight:900;color:#fff;background:linear-gradient(135deg,var(--a-accent,#ff5a00),#d81f2a)!important}
.admin-media-controls{display:flex;flex-direction:column;gap:8px}
.admin-hint{color:var(--a-muted);font-size:12px;line-height:1.5;margin:12px 0 0}
.admin-hint.subdomain-status{min-height:20px;font-weight:800}
.admin-hint.subdomain-status.ok{color:#177a45}
.admin-hint.subdomain-status.err{color:#c62828}
#saveSubdomainBtn:disabled{opacity:.45;cursor:not-allowed}
.admin-security-box{display:grid;gap:14px}
.admin-security-status{display:grid;gap:8px}
.admin-security-status small{color:var(--a-muted);font-size:12px;font-weight:500}
.admin-security-pill{display:flex;align-items:center;justify-content:space-between;gap:14px;border:1px solid var(--a-border);border-radius:10px;padding:13px 14px;background:var(--a-bg)}
.admin-security-pill b{font-size:14px;font-weight:700;color:var(--a-text)}
.admin-security-pill span{font-size:12.5px;color:var(--a-muted);text-align:right;line-height:1.4}
.admin-security-pill.enabled{background:#eef7ff;border-color:#cfe4ff}
.admin-security-pill.disabled{background:#fff4e8;border-color:#f4d2a8}
/* QR page — horizontal scroll strip so many tables take less vertical space. */
.admin-qr-grid{
display:flex;
gap:14px;
overflow-x:auto;
overflow-y:hidden;
padding:2px 2px 12px;
-webkit-overflow-scrolling:touch;
scroll-snap-type:x proximity;
}
.admin-qr-grid::-webkit-scrollbar{height:7px}
.admin-qr-grid::-webkit-scrollbar-thumb{background:rgba(22,18,15,.18);border-radius:99px}
.admin-qr-card{background:var(--a-card);border:1px solid var(--a-border);border-radius:12px;padding:16px;text-align:center;display:flex;flex-direction:column;gap:10px;align-items:center;flex:0 0 210px;min-width:0;scroll-snap-align:start}
.admin-qr-card img{width:150px;height:150px;border-radius:10px;border:1px solid var(--a-border);background:#fff}
.admin-qr-card input{width:100%;border:1px solid var(--a-border);border-radius:8px;padding:8px 10px;font-weight:600;font-size:13px;text-align:center;color:var(--a-text);outline:0}
.admin-qr-card input:focus{border-color:var(--a-accent)}
.admin-qr-card-actions{display:flex;gap:6px;width:100%}
.admin-qr-card-actions button,.admin-qr-card-actions a{flex:1;border:0;border-radius:8px;padding:9px 6px;font-weight:600;font-size:11px;background:var(--a-text);color:#fff;text-align:center;cursor:pointer}
.admin-qr-card-actions .admin-danger-btn{background:#fff;border:1px solid var(--a-border);color:var(--a-danger)}
.admin-qr-link{font-size:10px;color:var(--a-muted);word-break:break-all;line-height:1.4}
/* Marketing QR — visually distinct from the per-table QR grid (not a table, shareable link) */
/* Theme page: swatches + preview */
.admin-swatch-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.admin-swatch{border:1px solid var(--a-border);background:#fff;border-radius:12px;padding:8px;cursor:pointer;display:flex;flex-direction:column;gap:8px;text-align:center;min-width:0;max-width:100%;overflow:hidden}
.admin-swatch:hover{border-color:#c9ccd3}
.admin-swatch.active{border-color:var(--a-text);box-shadow:0 0 0 2px var(--a-text)}
.admin-swatch-sample{display:block;width:100%;height:64px;border-radius:8px;border:1px solid rgba(0,0,0,.08)}
.admin-swatch small{font-size:12px;font-weight:600;color:var(--a-text);line-height:1.25;white-space:normal;overflow-wrap:anywhere}
.admin-theme-preview{display:grid;gap:14px}
.admin-theme-banner{height:150px;border-radius:14px;display:flex;align-items:flex-end;padding:16px;color:#fff}
.admin-theme-banner span{font-family:'Archivo Black',Inter,sans-serif;font-size:26px;letter-spacing:-.03em;text-transform:uppercase}
.admin-theme-controls{display:flex;align-items:center;gap:16px}
.admin-theme-cta{border:0;border-radius:12px;padding:14px 22px;color:#fff;font-weight:700;font-size:14px;cursor:default}
.admin-theme-price{font-size:24px;font-weight:800}
@media(max-width:900px){.admin-swatch-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:560px){.admin-swatch-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
/* Toast + empty state */
.admin-body .toast{background:var(--a-text);border:0;color:#fff;box-shadow:0 8px 24px rgba(20,25,35,.18)}
/* The admin toast must become genuinely invisible after its timer. On mobile its
visible top is below the fixed header, so translating it by a fixed -80px left a
large part of the pill stuck at the top of the viewport. Opacity + visibility make
the hidden state independent of header height and selector/cascade changes. */
#adminToast{
z-index:120!important;
opacity:0;
visibility:hidden;
pointer-events:none;
transform:translate(-50%,-12px)!important;
transition:transform .22s ease,opacity .22s ease,visibility 0s linear .22s;
}
#adminToast.show{
opacity:1;
visibility:visible;
transform:translate(-50%,0)!important;
transition-delay:0s;
}
.admin-body .empty-state{color:var(--a-muted);font-size:13px;line-height:1.5;margin:2px 0}
/* Responsive: sidebar becomes an off-canvas drawer with a mobile top bar */
@media(max-width:900px){
.admin-body main.admin-main,.admin-main{margin-left:0;padding:78px 16px 96px}
.admin-sidebar{transform:translateX(-105%);transition:transform .25s ease;width:270px;box-shadow:0 0 50px rgba(15,20,30,.18);pointer-events:none;visibility:hidden;opacity:0}
.admin-app.nav-open .admin-sidebar{transform:translateX(0);pointer-events:auto;visibility:visible;opacity:1}
.admin-nav-close{display:flex;align-items:center;justify-content:center;position:absolute;top:14px;right:12px;width:34px;height:34px;border:1px solid var(--a-border);border-radius:8px;background:#fff;color:var(--a-text);z-index:2}
/* Reserve room on the right of the drawer head for the absolutely-positioned
close (X) button so the title never slides under it. */
.admin-side-head{padding-right:44px;position:relative}
.admin-nav-backdrop{position:fixed;inset:0;background:rgba(15,20,30,.4);z-index:45;opacity:0;pointer-events:none;transition:opacity .25s ease}
.admin-app.nav-open .admin-nav-backdrop{display:block;opacity:1;pointer-events:auto}
.admin-mobile-bar{
display:grid;grid-template-columns:38px minmax(0,1fr) auto;align-items:center;gap:10px;
left:0;right:0;padding:10px 12px;height:64px;
}
/* Search icon is desktop-only in the sidebar head; hidden inside the mobile
drawer to keep the header uncluttered (search stays available on desktop). */
.admin-side-head .admin-search-btn{display:none}
.admin-mobile-title b{font-size:15px}
/* 58vw let a wide action group (e.g. the item-count pill on Menu Manager) claim
more room than the 1fr title column could spare, forcing "Menu Manager" to
ellipsize even though there was no real overflow — cap actions to what they
actually need instead of a viewport-relative share of the row. */
.admin-mobile-actions{gap:6px;max-width:44vw}
/* Orders page has 3 action buttons (Dine-in/Takeaway/Clear Paid Orders) —
44vw isn't enough room even at each button's own max-width:112px cap,
so the first button (Dine-in) rendered visibly clipped at the toolbar's
edge instead of just being reachable via the toolbar's own horizontal
scroll. Widen only this page's toolbar; other pages keep the tighter
44vw default tuned for their (usually 1-2 button) action groups. */
.admin-mobile-actions:has(#newDineinOrderBtn){max-width:66vw}
.admin-mobile-actions .admin-page-actions{gap:6px}
.admin-mobile-actions button,
.admin-mobile-actions a,
.admin-mobile-actions select{
min-height:36px!important;max-height:38px;max-width:112px;
border-radius:10px!important;padding:8px 11px!important;font-size:11.5px!important;font-weight:800!important;
}
.admin-mobile-actions select{max-width:124px}
.admin-mobile-actions .admin-plan-count{
max-width:none;font-size:11px!important;padding:7px 10px!important;white-space:nowrap;
}
.admin-hamburger{display:flex;align-items:center;justify-content:center;width:38px;height:38px;flex:0 0 38px;border:1px solid var(--a-border);border-radius:8px;background:#fff;color:var(--a-text)}
.admin-page-head>div:first-child{min-width:0;max-width:100%}
.admin-page-head p{white-space:normal;overflow-wrap:normal;word-break:normal}
.admin-page-actions{width:100%;flex-wrap:wrap;justify-content:flex-start}
.admin-page-actions button,.admin-page-actions a,.admin-page-actions select{min-height:38px}
.admin-panels-grid{grid-template-columns:1fr}
}
@media(max-width:640px){
.admin-insight-grid{grid-template-columns:1fr 1fr}
.admin-form-grid,.admin-settings-form{grid-template-columns:1fr}
.admin-menu-list{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.menu-card{padding:10px;gap:9px;border-radius:12px}
.menu-card-thumb{aspect-ratio:1/1}
.menu-card-top{display:grid;gap:5px}
.menu-card-top b{font-size:13px;-webkit-line-clamp:2}
.menu-card-top span{font-size:12px}
.menu-card-meta{gap:4px}
.menu-card-meta small,.menu-card-meta em{font-size:9.5px;padding:4px 6px}
.menu-card p{display:none}
.menu-card-actions{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.menu-card-actions button{padding:8px 6px!important;font-size:11px!important;min-height:32px!important}
.admin-item-thumb{width:72px;height:72px;aspect-ratio:auto;flex:0 0 auto}
.admin-qr-card{flex-basis:150px}
.admin-qr-card img{width:120px;height:120px}
}
@media(max-width:420px){
.admin-insight-grid{grid-template-columns:1fr}
}
@media(max-width:340px){
.admin-menu-list{grid-template-columns:1fr}
}
/* Uploaded logo: fill the whole header button as a clean circle (matches track button) */
.logo-button.has-logo{
border-radius:50%!important;
padding:0!important;
overflow:hidden!important;
background:#fff!important;
}
.logo-button.has-logo span{
width:100%!important;
height:100%!important;
min-width:0!important;
border-radius:50%!important;
background:transparent!important;
border:0!important;
overflow:hidden!important;
display:block!important;
}
.logo-button.has-logo img{
width:100%!important;
height:100%!important;
object-fit:cover!important;
border-radius:50%!important;
display:block!important;
}
@media(max-width:720px){.header-search-pop{top:92px!important}}
/* Runtime polish: consistent header logo, provider branding, footer, welcome, status controls */
.brand-logo-button.logo-button{
width:56px!important;
height:56px!important;
min-width:56px!important;
border-radius:50%!important;
padding:0!important;
overflow:hidden!important;
}
.track-button.status-ready::after,
.track-dot.ready{
background:#34c5ff!important;
box-shadow:0 0 0 8px rgba(52,197,255,.16),0 0 24px rgba(52,197,255,.9),inset 0 1px 0 rgba(255,255,255,.58)!important;
}
#orderSteps span.active{background:#dff4ff!important;color:#006082!important}
.professional-footer.shop-details{
margin:18px 0 54px!important;
padding:16px!important;
}
.footer-head{
display:flex;
align-items:flex-start;
justify-content:space-between;
gap:12px;
flex-wrap:wrap;
margin-bottom:10px!important;
}
.footer-meta{
display:flex!important;
gap:8px;
flex-wrap:wrap;
margin:0 0 8px!important;
}
.footer-meta[hidden]{display:none!important;margin:0!important}
.footer-meta small{
background:rgba(22,18,15,.07);
border:1px solid rgba(255,255,255,.62);
border-radius:999px;
padding:7px 9px;
font-size:11px;
font-weight:900;
color:rgba(22,18,15,.72);
line-height:1;
}
.professional-footer p{
margin-top:4px!important;
}
.offer-ticker{position:fixed!important}
.ticker-track{padding-left:calc(100% + 120px)!important}
.white-label .provider-brand,
.white-label .welcome-provider,
.white-label .bill-prowider{
display:none!important;
}
.white-label .ticker-track{
padding-left:100%!important;
}
.welcome-body{
min-height:100vh;
padding:0!important;
background:radial-gradient(circle at 20% 0,#fff6e7 0,#fffaf3 42%,#ffe9d0 100%)!important;
}
.welcome-shell{
min-height:100vh;
display:grid;
place-items:center;
padding:18px;
}
.welcome-card{
width:calc(100vw - 36px);
max-width:430px;
min-width:0;
background:rgba(255,255,255,.66);
border:1px solid rgba(255,255,255,.76);
border-radius:30px;
padding:22px;
box-shadow:inset 0 1px 0 rgba(255,255,255,.8),0 24px 70px rgba(42,22,8,.16);
-webkit-backdrop-filter:blur(24px) saturate(1.5);
backdrop-filter:blur(24px) saturate(1.5);
}
.welcome-brand{display:flex;align-items:center;gap:12px;margin-bottom:20px}
.welcome-logo{
width:54px;height:54px;border-radius:50%;display:grid;place-items:center;
background:linear-gradient(135deg,rgba(255,90,0,.78),rgba(22,18,15,.82));
color:#fff;font-weight:1000;font-size:18px;
border:2px solid rgba(255,255,255,.7);
overflow:hidden;flex:0 0 54px;
}
.welcome-logo-img{background:#fff}
.welcome-logo-img img{width:100%;height:100%;object-fit:cover;border-radius:50%;display:block}
.welcome-brand b{display:block;font-size:16px}.welcome-brand small{display:block;color:var(--muted);font-weight:900;margin-top:2px}
.welcome-card h1{font-family:'Archivo Black',Inter,sans-serif;text-transform:uppercase;letter-spacing:-.05em;font-size:48px;line-height:.9;margin:0 0 10px}
.welcome-card p{margin:0 0 18px;color:var(--muted);line-height:1.55;font-weight:700}
.welcome-form{display:grid;gap:10px}
.welcome-form input{
height:52px;border:1px solid rgba(255,255,255,.72);border-radius:18px;background:rgba(255,255,255,.76);
padding:0 15px;color:var(--ink);font-weight:900;outline:0;
}
.welcome-form button,.install-suggestion button{
height:52px;border:0;border-radius:18px;background:linear-gradient(135deg,var(--orange),var(--red));color:#fff;font-weight:1000;
}
.welcome-form small{min-height:18px;color:#d81f2a;font-weight:900;line-height:1.35}
.welcome-form small.ok{color:var(--green)}
.install-suggestion{
margin-top:14px;padding:12px;border-radius:20px;background:rgba(22,18,15,.06);display:flex;align-items:center;justify-content:space-between;gap:10px;
}
.install-suggestion>div{min-width:0}
.install-suggestion b{display:block;font-size:13px}.install-suggestion span{display:block;color:var(--muted);font-size:12px;line-height:1.35;font-weight:800}
.install-suggestion button{height:38px;border-radius:999px;padding:0 14px;flex:0 0 auto}
.welcome-provider{
display:flex;align-items:center;justify-content:center;gap:7px;margin-top:14px;color:var(--ink);text-decoration:none;font-size:12px;font-weight:1000;
}
.welcome-provider img{width:32px;height:32px}
.admin-badge.status-placed{background:#fff0f0;color:#b32121;border-color:#ffcaca}
.admin-badge.status-preparing{background:#fff8d8;color:#8a5a00;border-color:#f2d878}
.admin-badge.status-ready{background:#dff4ff;color:#006082;border-color:#a8ddf5}
.admin-badge.status-serving{background:#e7faef;color:#177a45;border-color:#b8eccb}
/* Step-by-step only — shows the current status badge plus ONE button for the single
valid next step (see ORDER_NEXT_STATUS in orders.js). No jumping straight to Served. */
.admin-status-actions{
display:flex;
align-items:center;
gap:10px;
flex-wrap:wrap;
margin-top:12px;
}
.admin-status-actions .admin-badge{margin:0}
.admin-status-actions button{
border-radius:8px;
padding:10px 16px;
font-size:12.5px;
font-weight:800;
}
.admin-status-done{font-size:12.5px;font-weight:700;color:var(--a-muted)}
.admin-pagination{
display:flex;
align-items:center;
justify-content:center;
gap:10px;
margin-top:16px;
}
.admin-pagination button{
border:1px solid var(--a-border);
border-radius:8px;
background:#fff;
color:var(--a-text);
font-weight:700;
padding:9px 14px;
}
.admin-pagination button:disabled{opacity:.45;cursor:not-allowed}
.admin-pagination span{color:var(--a-muted);font-size:13px;font-weight:700}
.admin-customer-row>span:first-child{display:grid!important;gap:2px}
.admin-customer-row>span:first-child b{font-size:14px;color:var(--a-text)}
.admin-customer-row>span:first-child small{font-size:12px;color:var(--a-muted)}
@media(max-width:560px){
.brand-logo-button.logo-button{width:48px!important;height:48px!important;min-width:48px!important}
.ticker-track{padding-left:calc(100% + 62px)!important}
}
/* Stability pass: reduce refresh flicker and lock header control geometry */
body.app-loading .app-shell,
body.app-loading>.offer-ticker,
body.app-loading>.bottom-dock{
opacity:0;
visibility:hidden;
}
.app-shell{
transition:none;
}
/* Cart button is always geometrically stable; JS only toggles visibility. */
#openCart.floating-cart{
display:flex!important;
opacity:0!important;
pointer-events:none!important;
transform:translate(-50%,12px)!important;
transition:opacity .16s ease,transform .16s ease!important;
will-change:opacity,transform;
}
#openCart.floating-cart.is-visible{
opacity:1!important;
pointer-events:auto!important;
transform:translate(-50%,0)!important;
}
#openCart.floating-cart:disabled{
cursor:default;
}
/* ===================== v2026070210 additions ===================== */
/* Welcome form — clear boxed inputs */
.welcome-form input{
border:1.5px solid rgba(22,18,15,.18)!important;
background:#fff!important;
border-radius:12px!important;
padding:14px 16px!important;
font-size:15px;
box-shadow:0 2px 8px rgba(42,22,8,.05);
transition:border-color .15s, box-shadow .15s;
}
.welcome-form input:focus{
outline:none;
border-color:var(--orange)!important;
box-shadow:0 0 0 3px rgba(255,90,0,.14);
}
/* Admin tabs (Menu / Orders) */
.admin-tabs{display:flex;gap:8px;margin:0 0 18px;flex-wrap:wrap}
.admin-tabs button{
display:inline-flex;align-items:center;justify-content:center;gap:5px;white-space:nowrap;
border:1px solid var(--a-border,rgba(22,18,15,.14));background:#fff;color:inherit;
border-radius:999px;padding:9px 18px;font-weight:800;font-size:13.5px;cursor:pointer;
}
.admin-tabs button svg{flex:0 0 auto}
.admin-tabs button.active{background:#16120f;color:#fff;border-color:#16120f}
@media(max-width:900px){
#menuTabs{
display:grid;
grid-template-columns:repeat(2,minmax(0,1fr));
gap:10px 12px;
width:100%;
align-items:stretch;
}
#menuTabs button{
width:100%;
min-height:52px;
padding:10px 16px;
white-space:normal;
line-height:1.15;
}
}
body[data-page="home"]:has(#searchOverlay.open) .store-title{
opacity:0!important;
visibility:hidden!important;
pointer-events:none!important;
}
body[data-page="home"]:has(#searchOverlay.open) .cover{
min-height:250px!important;
}
/* Bottom navigation matches the header's restrained glass controls. */
.store-bottom-nav .store-nav-item{
border-color:rgba(255,255,255,.74)!important;
background:linear-gradient(145deg,rgba(255,255,255,.84),rgba(255,255,255,.58))!important;
box-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 8px 20px rgba(22,18,15,.14)!important;
}
.store-bottom-nav .store-nav-item::before{
display:none!important;
}
.store-bottom-nav .store-nav-item svg{
width:24px!important;
height:24px!important;
color:currentColor;
}
.store-bottom-nav .store-nav-item svg path,
.store-bottom-nav .store-nav-item svg circle{
stroke-width:2.35!important;
stroke-linecap:round;
stroke-linejoin:round;
}
.store-bottom-nav .store-nav-item.is-active{
border-color:rgba(255,255,255,.48)!important;
background:linear-gradient(145deg,var(--orange),var(--red))!important;
box-shadow:inset 0 1px 0 rgba(255,255,255,.42),0 8px 20px color-mix(in srgb,var(--red) 22%,transparent)!important;
}
@media(max-width:720px){
body[data-page="home"] .header-search-pop{
top:calc(120px + env(safe-area-inset-top))!important;
}
body[data-page="home"]:has(#searchOverlay.open) .cover{
min-height:232px!important;
}
}
@media(max-width:360px){
body[data-page="home"] .header-search-pop{
width:calc(100vw - 16px)!important;
padding-left:6px!important;
}
}
/* Vector quick-service icons and a compact, opt-in profile editor. */
.service-circles .service-icon{
width:25px!important;
height:25px!important;
display:grid!important;
place-items:center!important;
color:var(--ink)!important;
line-height:0!important;
}
.service-circles .service-icon svg{
width:100%;
height:100%;
display:block;
}
.profile-edit-toggle{
width:max-content;
min-height:32px;
margin-top:9px;
padding:0 12px;
border:1px solid rgba(22,18,15,.12);
border-radius:999px;
background:rgba(255,255,255,.72);
color:var(--ink);
font-size:11px;
font-weight:900;
box-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 5px 14px rgba(22,18,15,.08);
}
.profile-edit-toggle[aria-expanded="true"]{
background:rgba(22,18,15,.86);
border-color:rgba(255,255,255,.24);
color:#fff;
}
.customer-profile-form[hidden]{
display:none!important;
}
/* Clear crystal surfaces: readable edges without the older chunky 3D depth. */
.storefront-shared-header .topbar .circle,
.storefront-shared-header .topbar .table-chip{
border-color:rgba(255,255,255,.7)!important;
background:linear-gradient(145deg,rgba(255,255,255,.48),rgba(255,255,255,.24))!important;
-webkit-backdrop-filter:blur(24px) saturate(1.45)!important;
backdrop-filter:blur(24px) saturate(1.45)!important;
box-shadow:inset 0 1px 0 rgba(255,255,255,.78),0 8px 22px rgba(22,18,15,.14)!important;
}
.storefront-shared-header .favorite-button svg path{
fill:#e52f49!important;
stroke:#111!important;
stroke-width:1.65!important;
}
.store-bottom-nav .store-nav-item{
border-color:rgba(255,255,255,.82)!important;
background:linear-gradient(145deg,rgba(255,255,255,.82),rgba(255,255,255,.58))!important;
-webkit-backdrop-filter:blur(22px) saturate(1.4)!important;
backdrop-filter:blur(22px) saturate(1.4)!important;
box-shadow:inset 0 1px 0 rgba(255,255,255,.92),0 7px 18px rgba(22,18,15,.12)!important;
}
.store-bottom-nav .store-nav-item.is-active{
border-color:rgba(255,255,255,.48)!important;
background:linear-gradient(145deg,color-mix(in srgb,var(--orange) 82%,rgba(255,255,255,.3)),color-mix(in srgb,var(--red) 88%,rgba(255,255,255,.16)))!important;
box-shadow:inset 0 1px 0 rgba(255,255,255,.46),0 8px 20px color-mix(in srgb,var(--red) 20%,transparent)!important;
}
/* Hero content contract: Menu owns restaurant identity; every other customer
route uses its section name as the single main banner heading. */
.storefront-shared-header.is-section-hero .cover{
min-height:286px!important;
padding-bottom:24px!important;
}
.storefront-shared-header.is-section-hero .store-title{
max-width:900px;
}
.storefront-shared-header.is-section-hero .storefront-section-title{
margin:0!important;
max-width:none!important;
font-size:clamp(48px,8vw,82px)!important;
line-height:.9!important;
}
.storefront-shared-header.is-section-hero + .page-main,
.storefront-shared-header.is-section-hero + main{
padding-top:16px!important;
}
@media(max-width:720px){
.storefront-shared-header.is-section-hero .cover{
min-height:252px!important;
padding-bottom:18px!important;
}
.storefront-shared-header.is-section-hero .storefront-section-title{
font-size:clamp(40px,13vw,58px)!important;
}
}
@media(max-width:560px){
.admin-tabs button{padding:9px 10px;font-size:12.5px}
#menuTabs{gap:8px;width:100%}
#menuTabs button{min-height:46px;padding:9px 10px;font-size:12px}
/* Two tabs only (Live Orders / Orders History) since the Online Orders tab was
removed — lay them out as two equal-width columns instead of leaving Live Orders
half-width with an empty gap beside it and History spanning full width below. */
#orderTabs{display:grid;grid-template-columns:repeat(2,1fr);gap:8px;margin-bottom:14px}
#orderTabs button{width:100%;justify-content:center;text-align:center}
#orderTabs button.admin-tabs-full{grid-column:auto}
}
.admin-plan-count{font-size:12.5px;font-weight:800;color:var(--a-muted,rgba(22,18,15,.6));background:#fff;border:1px solid var(--a-border,rgba(22,18,15,.14));border-radius:999px;padding:8px 14px}
/* Orders history */
.admin-history-card{background:#fff;border:1px solid var(--a-border,rgba(22,18,15,.12));border-radius:14px;padding:16px 18px;margin-bottom:14px}
.admin-history-head{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:12px}
.admin-history-head b{font-size:15.5px}
.admin-history-head span{font-size:12.5px;font-weight:800;color:var(--a-muted,rgba(22,18,15,.6));background:rgba(22,18,15,.05);border-radius:999px;padding:5px 11px}
.admin-history-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(110px,1fr));gap:10px}
.admin-history-grid>div{background:rgba(22,18,15,.035);border-radius:10px;padding:10px 12px}
.admin-history-grid>div.wide{grid-column:span 2}
.admin-history-grid b{display:block;font-size:16px}
.admin-history-grid span{display:block;margin-top:3px;font-size:11px;font-weight:800;text-transform:uppercase;color:var(--a-muted,rgba(22,18,15,.55))}
.admin-history-orders{margin-top:12px}
.admin-history-orders summary{cursor:pointer;font-weight:800;font-size:13px;color:var(--a-muted,rgba(22,18,15,.6))}
/* Customers lock note */
.admin-lock-note{background:#fff7ed;border:1px solid #ffd9ad;color:#9a4d00;border-radius:999px;padding:7px 13px}
.admin-lock-note a{color:#9a4d00;font-weight:800}
/* Plan lock overlay (unpaid workspace) */
.plan-lock-overlay{
position:fixed;inset:0;z-index:2000;background:rgba(15,12,9,.66);backdrop-filter:blur(7px);
display:grid;place-items:center;padding:18px;overflow:hidden;
}
.plan-lock-card{
width:min(880px,100%);max-height:calc(100vh - 36px);background:#fff;border-radius:20px;padding:0;text-align:center;
box-shadow:0 30px 80px rgba(0,0,0,.35);margin:auto;overflow:hidden;
}
.plan-lock-scroll{max-height:calc(100vh - 36px);overflow:auto;padding:28px}
.plan-lock-badge{display:inline-block;background:#fff0f0;color:#b32121;border:1px solid #ffd2d2;border-radius:999px;padding:7px 14px;font-size:11.5px;font-weight:900;text-transform:uppercase;letter-spacing:.04em}
.plan-lock-card h2{margin:14px 0 8px;font-size:26px}
.plan-lock-card>p{margin:0 auto 20px;max-width:520px;color:rgba(22,18,15,.62);line-height:1.55}
.plan-lock-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px;text-align:left}
.plan-lock-plan{border:1.5px solid rgba(22,18,15,.12);border-radius:16px;padding:18px;display:flex;flex-direction:column;gap:8px}
.plan-lock-plan.current{border-color:var(--orange);box-shadow:0 0 0 3px rgba(255,90,0,.12)}
.plan-lock-plan b{font-size:17px}
.plan-price{font-size:22px;font-weight:900;color:var(--orange)}
.plan-lock-plan ul{margin:0;padding-left:18px;color:rgba(22,18,15,.65);font-size:13.5px;line-height:1.7}
.plan-btn{
margin-top:auto;border:0;background:linear-gradient(135deg,var(--orange),var(--red));color:#fff;
border-radius:10px;padding:12px 14px;font-weight:900;cursor:pointer;text-align:center;text-decoration:none;font-size:14px;
}
.plan-btn.ghost{background:#16120f}
.plan-lock-card small{display:block;margin-top:18px;color:rgba(22,18,15,.55)}
.plan-lock-card small a{color:var(--orange);font-weight:800}
.expiry-reminder-card{width:min(460px,100%);position:relative;padding:0}
.expiry-reminder-card .plan-lock-scroll{padding:32px 28px}
.expiry-reminder-skip{position:absolute;top:12px;right:14px;border:0;background:none;font-size:22px;line-height:1;cursor:pointer;color:rgba(22,18,15,.4)}
.expiry-reminder-skip.admin-btn-ghost{position:static;font-size:14px;color:inherit}
.billing-cycle-wrap{display:flex;align-items:center;justify-content:center;gap:10px;margin-bottom:18px;flex-wrap:wrap;width:100%}
.billing-cycle-toggle{display:inline-flex;gap:2px;background:rgba(22,18,15,.05);border-radius:999px;padding:4px}
.billing-cycle-toggle .cycle-btn{border:0;background:none;width:96px;padding:8px 0;border-radius:999px;font-weight:800;font-size:13px;cursor:pointer;color:rgba(22,18,15,.55);transition:background .15s,color .15s}
.billing-cycle-toggle .cycle-btn.active{background:#fff;color:var(--orange);box-shadow:0 2px 8px rgba(0,0,0,.08)}
.price-original{display:block;letter-spacing:normal;font-size:13px;font-weight:700;color:rgba(22,18,15,.4);text-decoration:line-through;text-decoration-thickness:1.5px;margin-top:4px}
.price-original[hidden]{display:none}
/* Dashboard insight cards — better alignment */
.admin-insight-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(158px,1fr));gap:12px;align-items:stretch}
.admin-insight-card{display:flex;flex-direction:column;justify-content:center;min-height:86px;text-align:left}
.admin-insight-card b{font-size:22px;line-height:1.15;word-break:break-word}
.admin-insight-card span{margin-top:5px;font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.03em}
/* Mobile responsiveness polish */
@media(max-width:720px){
.admin-tabs{position:static!important;top:auto!important;z-index:auto;background:transparent;padding:0}
.admin-history-grid{grid-template-columns:repeat(2,1fr)}
.admin-history-grid>div.wide{grid-column:span 2}
.plan-lock-scroll{padding:20px 16px}
.plan-lock-grid{grid-template-columns:1fr}
/* Fixed header always stays single-row now (see the 900px block) — no more
column stacking here, that's what used to make its height unpredictable. */
.admin-page-head-inline>div:first-child{min-width:0}
.admin-insight-grid{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:420px){
.admin-history-grid{grid-template-columns:1fr 1fr}
.admin-insight-grid{grid-template-columns:1fr 1fr}
}
/* ===== v2026070212: admin revenue chart (landing-style) + category manager ===== */
.admin-chart{display:flex;align-items:flex-end;gap:10px;height:190px;padding:10px 4px 0}
.admin-chart-col{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;height:100%;gap:6px;min-width:0}
.admin-chart-col i{
width:100%;max-width:52px;border-radius:10px 10px 4px 4px;
background:linear-gradient(180deg,var(--orange) 0%,var(--red) 130%);
box-shadow:0 6px 14px rgba(255,90,0,.22);
transition:height .5s cubic-bezier(.2,.8,.2,1);
}
.admin-chart-col small{font-size:11px;font-weight:800;text-transform:uppercase;color:var(--a-muted,rgba(22,18,15,.55))}
.admin-chart-value{font-size:10.5px;font-weight:800;color:var(--a-muted,rgba(22,18,15,.6));white-space:nowrap;overflow:hidden;max-width:100%;text-overflow:ellipsis}
.admin-chart-total{font-size:13px;font-weight:900;color:var(--orange);background:rgba(255,90,0,.08);border-radius:999px;padding:6px 13px}
.admin-chart-panel .admin-card-head{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}
.admin-cat-add{display:flex;gap:10px;flex-wrap:wrap}
.admin-cat-add input{flex:1;min-width:200px;border:1px solid var(--a-border,rgba(22,18,15,.14));border-radius:10px;padding:11px 14px;background:#fff}
.admin-cat-del{border:0;background:#fff0f0;color:#b32121;border-radius:8px;padding:6px 12px;font-weight:800;cursor:pointer;font-size:12px}
@media(max-width:560px){.admin-chart{height:150px;gap:6px}.admin-chart-value{display:none}}
/* v2026070218: production mobile polish and tighter storefront bottom spacing */
body,
.app-shell,
.cover,
main,
.menu-item,
.cart-line,
.shop-details,
.professional-footer,
.feedback-card,
.modal-card,
.table-chip,
.service-actions button,
.category-tabs button{
min-width:0;
}
.store-title h1,
.store-title p,
.menu-item h3,
.menu-item p,
.cart-line b,
.cart-line small,
.shop-details span,
.shop-details b,
.shop-details p,
.footer-meta small,
.tracking-line,
.order-meta,
.page-panel h2,
.modal-card h2,
.feedback-card h2{
max-width:100%;
overflow-wrap:anywhere;
word-break:normal;
}
.professional-footer.shop-details,
.shop-details{
margin-bottom:24px!important;
}
body[data-page="home"]{
padding-bottom:74px!important;
}
body[data-page="home"] main{
padding-bottom:8px!important;
}
body[data-page="home"] .professional-footer.shop-details{
margin-top:14px!important;
margin-bottom:18px!important;
}
@media(max-width:720px){
body[data-page="home"]{
padding-bottom:68px!important;
}
.store-title h1{
font-size:clamp(34px,12.4vw,50px)!important;
line-height:.96!important;
/* Deliberately var(): a bare !important here beat the inline style the owner sets,
so the Letter Spacing control did nothing at all on a phone. */
letter-spacing:var(--banner-tracking,-.035em)!important;
}
.store-title p{
font-size:13px!important;
line-height:1.35!important;
}
.menu-list{
grid-template-columns:repeat(2,minmax(0,1fr))!important;
}
.menu-item h3{
font-size:14.5px!important;
line-height:1.18!important;
}
.menu-item p{
min-height:0!important;
}
.professional-footer.shop-details{
margin-bottom:14px!important;
}
}
/* v2026070404: SaaS ops features */
.staff-team-panel{max-height:58vh;display:flex;flex-direction:column;min-height:0}
.staff-team-panel .admin-card-head{margin-bottom:12px}
.staff-team-count{border:1px solid var(--a-border);border-radius:999px;padding:6px 10px;color:var(--a-muted);font-size:12px;font-weight:800;background:#fff;white-space:nowrap}
.staff-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:12px;overflow:auto;padding-right:4px;min-height:0;-webkit-overflow-scrolling:touch}
.staff-card{background:#fff;border:1px solid var(--a-border);border-radius:12px;padding:13px;display:flex;flex-direction:column;gap:10px;min-width:0}
.staff-card.paused{opacity:.7}
.staff-card-head{display:flex;justify-content:space-between;gap:12px;align-items:flex-start}
.staff-card-head>div{min-width:0}.staff-card-head b{display:block;font-size:15px;line-height:1.2;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.staff-card-head span,.staff-meta span{display:block;color:var(--a-muted);font-size:12px;margin-top:3px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.staff-card-head em{font-style:normal;border-radius:999px;background:#e7faef;color:#177a45;padding:5px 9px;font-size:11px;font-weight:700}.staff-card.paused em{background:#fff0f0;color:#b32121}
.staff-card-body{display:grid;gap:9px}
.staff-mini-stats{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.staff-mini-stats span{border:1px solid var(--a-border);border-radius:10px;background:var(--a-bg);padding:8px;display:grid;gap:2px;font-size:11px;color:var(--a-muted);font-weight:700;min-width:0}
.staff-mini-stats b{font-size:12px;color:var(--a-text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.staff-perms-wrap{border:1px solid var(--a-border);border-radius:10px;background:var(--a-bg);padding:8px 10px}
.staff-perms-wrap summary{cursor:pointer;font-size:12px;font-weight:800;color:var(--a-text);list-style:none}
.staff-perms-wrap summary::-webkit-details-marker{display:none}
.staff-perms{display:flex;gap:6px;flex-wrap:wrap;margin-top:8px;max-height:86px;overflow:auto}.staff-perms small{border:1px solid var(--a-border);border-radius:999px;padding:5px 8px;color:var(--a-muted);font-weight:600;background:#fff;font-size:11px}
.staff-card-actions{margin-top:auto}.staff-card-actions button{flex:1 1 0;min-width:82px}
.staff-activity-stats{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px;margin-bottom:14px}
.staff-activity-stats div{border:1px solid var(--a-border);border-radius:12px;background:var(--a-bg);padding:13px;min-width:0}
.staff-activity-stats b{display:block;font-size:22px;line-height:1.1;color:var(--a-text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.staff-activity-stats span{display:block;margin-top:5px;font-size:11px;text-transform:uppercase;letter-spacing:.03em;color:var(--a-muted);font-weight:800}
.staff-activity-filters{display:grid;grid-template-columns:minmax(220px,1fr) 150px 160px;gap:10px;margin:0 0 12px}
.staff-activity-table-wrap{border:1px solid var(--a-border);border-radius:12px;background:#fff;overflow:hidden}
.staff-activity-table-wrap .tabulator{border:0;background:#fff;font-family:inherit;min-width:980px}
.staff-activity-table-wrap .tabulator-header{border-bottom:1px solid var(--a-border);background:var(--a-bg)}
.staff-activity-table-wrap .tabulator-col{background:var(--a-bg);border-right:1px solid var(--a-border)}
.staff-activity-table-wrap .tabulator-col-title{font-size:11px;font-weight:900;text-transform:uppercase;letter-spacing:.035em;color:var(--a-muted)}
.staff-activity-table-wrap .tabulator-row{border-bottom:1px solid var(--a-border);background:#fff}
.staff-activity-table-wrap .tabulator-row:nth-child(even){background:#fafafa}
.staff-activity-table-wrap .tabulator-cell{border-right:1px solid var(--a-border);font-size:12.5px;color:var(--a-text);padding:10px 12px;line-height:1.35}
.staff-tab-status{display:inline-flex;border-radius:999px;padding:4px 8px;font-weight:900;font-size:11px;background:#e7faef;color:#177a45;white-space:nowrap}
.staff-tab-status.on_shift{background:#eef4ff;color:#2f6fed}.staff-tab-status.absent_today{background:#fff7ed;color:#9a3412}.staff-tab-status.paused{background:#fff0f0;color:#b32121}
.staff-tab-recent{display:block;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--a-muted)}
.staff-modal-open{overflow:hidden!important}
.staff-edit-modal{position:fixed;inset:0;z-index:260;display:none;align-items:center;justify-content:center;padding:18px;background:rgba(15,20,30,.44)}
.staff-edit-modal.open{display:flex}
.staff-edit-card{position:relative;width:min(760px,100%);max-height:min(760px,calc(100vh - 36px));background:var(--a-card);border:1px solid var(--a-border);border-radius:14px;box-shadow:0 28px 80px rgba(15,20,30,.28);overflow:hidden}
.staff-edit-scroll{max-height:inherit;overflow:auto;padding:20px;-webkit-overflow-scrolling:touch}
.staff-modal-close{position:absolute;top:12px;right:12px;z-index:3;width:34px;height:34px;border:1px solid var(--a-border);border-radius:50%;background:#fff;color:var(--a-text);font-size:22px;font-weight:800;line-height:1;display:grid;place-items:center;box-shadow:0 8px 22px rgba(15,20,30,.12)}
.staff-modal-head{padding-right:42px;align-items:center}
.staff-modal-foot{margin-bottom:0}
.staff-access-panel{margin-top:16px;border:1px solid var(--a-border);border-radius:12px;background:var(--a-bg);padding:14px}
.staff-access-panel .admin-card-head{margin-bottom:8px}
.staff-access-panel .admin-section-hint{margin:0 0 12px}
.staff-access-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(138px,1fr));gap:8px}
.staff-access-check{display:flex;align-items:center;gap:8px;min-width:0;border:1px solid var(--a-border);border-radius:10px;background:#fff;padding:9px 10px;font-size:12.5px;font-weight:800;color:var(--a-text);cursor:pointer}
.staff-access-check input{width:16px;height:16px;accent-color:var(--a-accent);flex:0 0 auto}
.staff-access-check span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.domain-dns-box{display:grid;gap:10px;background:var(--a-bg);border:1px solid var(--a-border);border-radius:10px;padding:12px;margin-top:12px}.domain-dns-box span{color:var(--a-muted);font-size:13px}.domain-dns-box strong{color:var(--a-text)}
.domain-record-list{display:grid;gap:10px}
.domain-record-row{display:grid;grid-template-columns:74px minmax(150px,1fr) minmax(180px,1.4fr) 86px;gap:8px;align-items:stretch;background:#fff;border:1px solid var(--a-border);border-radius:10px;padding:10px}
.domain-record-row>div{display:grid;gap:4px;min-width:0}
.domain-record-row span{font-size:10px!important;font-weight:900;text-transform:uppercase;letter-spacing:.04em;color:var(--a-muted)}
.domain-record-row b,.domain-record-row code{font-size:12.5px;color:var(--a-text);font-family:inherit;word-break:break-all}
.domain-record-row code{background:var(--a-bg);border:1px solid var(--a-border);border-radius:7px;padding:7px 8px}
.domain-record-row button{justify-self:start;border:1px solid var(--a-border);background:#fff;border-radius:8px;padding:6px 9px;font-size:11px;font-weight:800;cursor:pointer;color:var(--a-text)}
.domain-record-row small{grid-column:1/-1;color:var(--a-muted);font-size:12px;line-height:1.4}
.domain-steps{margin:0;padding-left:18px;color:var(--a-muted);font-size:12.5px;line-height:1.6}
/* The secondary spelling of a record's name, for panels that want the full hostname
instead of the bare label. Deliberately quiet — the label above it is the one most
registrars need, and only one of the two is ever correct for a given panel. */
.domain-record-row em{grid-column:1/-1;font-style:normal;display:flex;align-items:center;gap:6px;flex-wrap:wrap;color:var(--a-muted);font-size:11.5px;line-height:1.4}
.domain-record-row em code{font-size:11.5px;padding:4px 6px;background:transparent;border:0;color:var(--a-text);font-weight:700}
.domain-record-row button.link-copy{border:0;background:none;padding:0;font-size:11.5px;font-weight:800;text-decoration:underline;color:var(--a-text)}
/* A root domain can never be linked, so this replaces the record table entirely rather
than sitting beside records the owner must not use. */
.domain-apex-warning{display:grid;gap:8px;justify-items:start;background:#fff7ed;border:1px solid #fed7aa;border-radius:12px;padding:14px;color:#7c2d12}
.domain-apex-warning b{font-size:13.5px}
.domain-apex-warning span{font-size:12.5px;line-height:1.5}
.domain-apex-warning button{border:1px solid #fdba74;background:#fff;border-radius:9px;padding:8px 12px;font-size:12px;font-weight:800;cursor:pointer;color:#7c2d12}
.domain-promoted-note{display:block;background:#fff7ed;border:1px solid #fed7aa;border-radius:9px;padding:9px 11px;color:#7c2d12;font-size:12.5px;line-height:1.45}
/* Segmented switch between the two address setups. Sized off the same tokens as the
admin panels so it reads as part of the page rather than a control bolted on top. */
.domain-mode-switch{display:inline-flex;gap:4px;background:var(--a-bg);border:1px solid var(--a-border);border-radius:12px;padding:4px;margin:0 0 14px;max-width:100%;overflow-x:auto}
.domain-mode-switch button{flex:0 0 auto;border:1px solid transparent;background:none;border-radius:9px;padding:9px 16px;font-size:12.5px;font-weight:800;cursor:pointer;color:var(--a-muted);white-space:nowrap}
.domain-mode-switch button.is-active{background:#fff;border-color:var(--a-border);color:var(--a-text);box-shadow:0 1px 2px rgba(16,24,40,.06)}
.domain-mode-switch button:focus-visible{outline:2px solid var(--a-text);outline-offset:2px}
@media(max-width:520px){.domain-mode-switch{display:flex;width:100%}.domain-mode-switch button{flex:1 1 0;padding:9px 10px;text-align:center}}
.domain-lock-panel{display:grid;gap:5px;background:#fff7ed;border:1px solid #fed7aa;border-radius:12px;padding:12px 14px;margin:8px 0 14px;color:#7c2d12}.domain-lock-panel[hidden]{display:none!important}.domain-lock-panel b{font-size:14px}.domain-lock-panel span{font-size:12.5px;line-height:1.45}
.domain-free-panel{display:grid;grid-template-columns:minmax(0,1fr) minmax(320px,1.2fr);gap:20px;align-items:center;margin-bottom:16px;background:linear-gradient(135deg,#f0fdf4,#eff6ff)}
.domain-plan-badge{display:inline-flex;border:1px solid #86efac;background:#dcfce7;color:#166534;border-radius:999px;padding:5px 9px;margin-bottom:8px;font-size:10px;font-weight:900;text-transform:uppercase;letter-spacing:.04em}
.domain-free-card{display:grid;gap:12px;background:#fff;border:1px solid var(--a-border);border-radius:12px;padding:14px;min-width:0}.domain-free-card code{display:block;background:var(--a-bg);border:1px solid var(--a-border);border-radius:9px;padding:12px;color:var(--a-text);font-family:inherit;font-size:14px;font-weight:800;word-break:break-all}.domain-free-card .admin-row-actions{justify-content:flex-start}
@media(max-width:760px){.domain-record-row{grid-template-columns:1fr 1fr}.domain-record-row>div:nth-child(3),.domain-record-row small{grid-column:1/-1}}
@media(max-width:760px){.domain-free-panel{grid-template-columns:1fr}.domain-free-card .admin-row-actions{display:grid;grid-template-columns:1fr 1fr}.domain-free-card .admin-row-actions>*{text-align:center;justify-content:center}}
@media(max-width:420px){.domain-record-row{grid-template-columns:1fr}}
/* ===== Kitchen Display (KDS) — redesigned for high order volume + touch/tablet use =====
Design goals: (1) urgency is readable at a glance via colour, no reading required;
(2) each dish has 3 explicitly-labelled status buttons — no icon-only control whose
meaning has to be guessed; (3) on mobile, only ONE column (New/Preparing/Ready) shows
at a time via tabs, so a busy kitchen never has to scroll through every "New" ticket
just to check what's already "Preparing". */
.kitchen-summary{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:14px}
.kitchen-summary-chip{display:flex;align-items:baseline;gap:8px;background:#fff;border:1px solid var(--a-border);border-radius:12px;padding:10px 16px}
.kitchen-summary-chip b{font-size:20px;font-weight:900;color:var(--a-text)}
.kitchen-summary-chip span{font-size:12px;font-weight:700;color:var(--a-muted)}
.kitchen-summary-chip.urgent{background:#fef2f2;border-color:#fecaca}
.kitchen-summary-chip.urgent b{color:#b91c1c}
.kitchen-summary-chip.urgent span{color:#b91c1c}
.kitchen-board{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;align-items:start}
.kitchen-col{background:var(--a-bg);border:1px solid var(--a-border);border-radius:14px;padding:12px;min-height:60vh}
.kitchen-col header{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px;padding:0 4px}
.kitchen-col header b{font-size:15px;font-weight:800;text-transform:uppercase;letter-spacing:.03em;color:var(--a-text)}
.kitchen-col header span{background:var(--a-text);color:#fff;border-radius:999px;padding:3px 10px;font-size:12px;font-weight:800;min-width:22px;text-align:center}
.kitchen-col-body{display:flex;flex-direction:column;gap:12px}
/* Card colour = which step the ticket is on (red=New, yellow=Preparing, green=Ready) —
a strict progression, not a time-based warning. Collapsed by default (tap the head to
expand) — one table's repeat/split orders are grouped into ONE card (see
groupKitchenOrders in kitchen.js) instead of a long separate-ticket list. */
.kitchen-ticket{border:1px solid var(--a-border);border-left:5px solid var(--a-border);border-radius:14px;background:#fff;box-shadow:0 1px 3px rgba(15,20,30,.04);overflow:hidden}
.kitchen-ticket-head{display:flex;justify-content:space-between;align-items:flex-start;gap:10px;padding:14px;cursor:pointer}
.kitchen-ticket-head:hover{background:rgba(15,20,30,.02)}
.kitchen-ticket.open .kitchen-ticket-head{padding-bottom:10px}
.kitchen-ticket-id{display:flex;flex-direction:column;gap:3px;min-width:0}
.kitchen-ticket-id b{font-size:18px;font-weight:900;color:var(--a-text);letter-spacing:-.01em}
.kitchen-ticket-id span{font-size:12.5px;font-weight:700;color:var(--a-muted)}
.kitchen-elapsed{flex:0 0 auto;font-size:11.5px;font-weight:800;padding:5px 10px;border-radius:999px;background:#f1f5f9;color:#475569;white-space:nowrap}
.kitchen-ticket-body{padding:0 14px 4px}
.kitchen-items{display:flex;flex-direction:column;gap:10px;margin:0 0 10px}
.kitchen-item-row{display:flex;flex-direction:column;gap:8px;min-width:0;padding:10px 11px;border:1px solid var(--a-border);border-radius:11px;background:#fafafa}
/* Dish names must never truncate — wrap onto a second line instead (align-items:
flex-start, not center, so a wrapped name doesn't get squashed against the pill). */
.kitchen-item-info{display:flex;align-items:flex-start;flex-wrap:wrap;gap:8px;min-width:0}
.kitchen-item-qty{flex:0 0 auto;font-weight:900;color:var(--a-accent);font-size:14px;line-height:1.4}
.kitchen-item-name{flex:1 1 140px;min-width:120px;font-weight:700;font-size:14px;line-height:1.4;color:var(--a-text);overflow-wrap:anywhere;white-space:normal}
.kitchen-item-pill{flex:0 0 auto;font-size:10.5px;font-weight:900;text-transform:uppercase;letter-spacing:.02em;border-radius:999px;padding:5px 10px;background:#f1f5f9;color:#475569;white-space:nowrap}
.kitchen-item-pill.status-preparing{background:#fff7db;color:#9a6a00}
.kitchen-item-pill.status-ready{background:#e8f8ee;color:#177a45}
.kitchen-item-pill.status-serving{background:#e8f1ff;color:#1e5fd8}
.kitchen-item-pill.status-unavailable{background:#fee2e2;color:#b91c1c}
/* Only the buttons valid for the dish's CURRENT step render at all — see
kitchenItemControls() in kitchen.js. Nothing here can jump ahead of the sequence. */
.kitchen-item-segs{display:flex;gap:6px;min-width:0}
.kitchen-seg-btn{flex:1;min-width:0;border:1px solid var(--a-border);background:#fff;color:var(--a-text);border-radius:9px;padding:10px 4px;font-size:12px;font-weight:800;cursor:pointer;text-align:center}
.kitchen-seg-btn:active{transform:scale(.97)}
.kitchen-seg-btn.kind-primary{background:var(--a-text);border-color:var(--a-text);color:#fff}
.kitchen-seg-btn.kind-danger{background:#fff;border-color:#f3caca;color:#b91c1c}
.kitchen-seg-btn.kind-danger:hover{background:#fef2f2}
.kitchen-note{background:#fff7ed;border-radius:8px;padding:8px 10px;margin:0 0 10px;color:#9a3412;font-size:12.5px;line-height:1.4}
/* Bulk action ("Receive All Orders" / "Mark All Ready" / "Served All") — deliberately
bolder/brighter than the per-dish buttons so it reads as "the whole table", not just
another dish control. Always visible (even collapsed) for a quick one-tap bulk accept. */
.kitchen-ticket-actions{padding:12px 14px 14px;border-top:1px solid var(--a-border)}
.kitchen-bulk-btn{width:100%;border:0;border-radius:11px;padding:13px 10px;font-size:13.5px;font-weight:900;letter-spacing:.01em;cursor:pointer;color:#fff}
.kitchen-bulk-btn:active{transform:scale(.98)}
/* Matches the ticket's own red/yellow/green step colour instead of a generic blue —
the bulk button should read as "the same signal as this card", not an unrelated accent. */
.kitchen-bulk-btn-red{background:#dc2626;box-shadow:0 4px 14px rgba(220,38,38,.28)}
.kitchen-bulk-btn-yellow{background:#d97706;box-shadow:0 4px 14px rgba(217,119,6,.28)}
.kitchen-bulk-btn-green{background:#16a34a;box-shadow:0 4px 14px rgba(22,163,74,.28)}
.split-list{border:1px solid var(--a-border);border-radius:10px;padding:10px;margin:10px 0;background:#fafafa}.split-list>b{display:block;margin-bottom:8px}.split-row{display:flex;justify-content:space-between;gap:8px;align-items:center;border-top:1px solid var(--a-border);padding:8px 0}.split-row:first-of-type{border-top:0}.split-row div{display:flex;gap:6px;align-items:center}.split-row select{border:1px solid var(--a-border);border-radius:8px;padding:7px;background:#fff}
.admin-order-card.cancelled{opacity:.68;background:#fffafa}
.closing-diff{display:flex;gap:10px;flex-wrap:wrap;margin-top:12px}.closing-diff span{border:1px solid var(--a-border);border-radius:999px;padding:8px 12px;font-weight:700;background:#fff}
.admin-row-actions{display:flex;gap:8px;flex-wrap:wrap}
.kitchen-tabs{display:none}
@media(max-width:900px){
.kitchen-tabs{display:flex;gap:8px;margin-bottom:14px;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none}
.kitchen-tabs::-webkit-scrollbar{display:none}
.kitchen-tab{flex:1;min-width:0;display:flex;align-items:center;justify-content:center;gap:6px;border:1px solid var(--a-border);background:#fff;color:var(--a-muted);border-radius:11px;padding:11px 6px;font-size:13px;font-weight:800;white-space:nowrap;cursor:pointer}
.kitchen-tab span{background:rgba(15,20,30,.08);border-radius:999px;padding:1px 7px;font-size:11.5px}
.kitchen-tab.active{background:var(--a-text);border-color:var(--a-text);color:#fff}
.kitchen-tab.active span{background:rgba(255,255,255,.22);color:#fff}
/* Only the tab picked in kitchen.js (board.dataset.activeCol) actually shows — the
other two stay rendered in the DOM (so switching tabs is instant, no re-fetch) but
hidden, which is what kills the "scroll past 10 New tickets to reach Preparing"
problem the columns-stacked-vertically layout had before. */
#kitchenBoard[data-active-col="placed"] .kitchen-col:not([data-col="placed"]),
#kitchenBoard[data-active-col="preparing"] .kitchen-col:not([data-col="preparing"]),
#kitchenBoard[data-active-col="ready"] .kitchen-col:not([data-col="ready"]){display:none}
}
@media(max-width:900px){.kitchen-board{grid-template-columns:minmax(0,1fr)}.kitchen-col{min-height:auto;min-width:0}.kitchen-ticket,.kitchen-ticket-head,.kitchen-ticket-id,.kitchen-col-body{min-width:0}.kitchen-ticket-actions button{min-width:0}.split-row{display:grid}.split-row div{justify-content:flex-start;flex-wrap:wrap}.staff-team-panel{max-height:none}.staff-grid{grid-template-columns:repeat(2,minmax(0,1fr));max-height:520px}.staff-activity-stats{grid-template-columns:repeat(2,minmax(0,1fr))}.staff-activity-filters{grid-template-columns:1fr 1fr}.staff-activity-filters .admin-field:first-child{grid-column:1/-1}.staff-activity-table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}}
@media(max-width:520px){.staff-grid{grid-template-columns:1fr;max-height:218px}.staff-card{padding:11px;gap:9px}.staff-card-body,.staff-perms-wrap{display:none}.staff-card-actions{display:grid;grid-template-columns:1fr 1fr}.staff-card-actions button{min-height:34px;padding:8px 10px}.staff-activity-stats{grid-template-columns:1fr 1fr}.staff-activity-filters{grid-template-columns:1fr}.staff-activity-filters .admin-field:first-child{grid-column:auto}.staff-edit-modal{align-items:flex-end;padding:10px}.staff-edit-card{max-height:calc(100vh - 20px);border-radius:16px 16px 12px 12px}.staff-edit-scroll{padding:16px}.staff-modal-head{align-items:flex-start;flex-direction:column;gap:10px}.staff-modal-head h2{padding-right:44px}.staff-modal-head button{width:100%}.staff-access-grid{grid-template-columns:1fr 1fr}.staff-modal-foot .admin-row-actions{display:grid;grid-template-columns:1fr 1fr}}
.admin-service-row{
display:grid;
grid-template-columns:1.2fr .7fr .8fr .9fr;
gap:10px;
align-items:end;
padding:12px;
border:1px solid var(--a-border,rgba(22,18,15,.14));
border-radius:12px;
background:#fff;
}
.admin-service-row .full{grid-column:1/-1;margin:0}
.admin-service-row-simple{display:flex!important;align-items:center;justify-content:space-between;gap:12px}
.admin-service-row-simple b{font-size:14px;font-weight:800}
.admin-service-row-simple .admin-switch-row{gap:8px}
@media(max-width:720px){
.admin-service-row{grid-template-columns:1fr 1fr}
}
@media(max-width:420px){
.admin-service-row{grid-template-columns:1fr}
}
@media(max-width:420px){
.menu-list{
grid-template-columns:1fr!important;
}
.service-actions{
grid-template-columns:repeat(3,minmax(0,1fr))!important;
}
.service-actions button{
width:auto!important;
min-width:0!important;
font-size:14px!important;
}
.service-actions button small{
font-size:10px;
overflow-wrap:anywhere;
}
.cart-body{
padding-bottom:78px!important;
}
}
/* v2026070219: stable storefront chips/actions */
.category-tabs{
display:flex!important;
gap:10px!important;
overflow-x:auto!important;
overflow-y:hidden!important;
scrollbar-width:none;
}
.category-tabs button{
flex:0 0 auto!important;
width:auto!important;
min-width:max-content!important;
max-width:none!important;
border-radius:999px!important;
padding:12px 17px!important;
white-space:nowrap!important;
text-align:center!important;
}
@media(max-width:720px){
.category-tabs button{
min-width:max-content!important;
font-size:13px!important;
line-height:1!important;
}
.service-actions.service-circles{
display:grid!important;
grid-template-columns:repeat(3,minmax(0,1fr))!important;
gap:10px!important;
max-width:none!important;
width:100%!important;
}
.service-actions.service-circles button{
width:auto!important;
height:auto!important;
min-height:62px!important;
min-width:0!important;
border-radius:22px!important;
padding:9px 6px!important;
}
.service-actions.service-circles small{
max-width:100%;
overflow-wrap:anywhere;
line-height:1.05!important;
}
body[data-page="home"] .cover{
padding-top:96px!important;
min-height:374px!important;
}
}
/* Demo mode — Exit Demo button (sidebar), black+red highlight */
.admin-side-foot button.demo-exit-btn{
background:linear-gradient(135deg,#16120f 0%,#b11226 120%)!important;
color:#fff!important;
border:1px solid #b11226!important;
box-shadow:0 6px 16px rgba(177,18,38,.35);
font-weight:900;
}
.admin-side-foot button.demo-exit-btn:hover{
background:linear-gradient(135deg,#2a1114 0%,#d81f2a 120%)!important;
box-shadow:0 8px 20px rgba(216,31,42,.45);
}
/* ===== Sales ledger table ===== */
.ledger-wrap{overflow-x:auto;border:1px solid var(--a-border,rgba(22,18,15,.12));border-radius:14px}
.ledger-table{width:100%;border-collapse:collapse;min-width:760px;font-size:13.5px}
.ledger-table thead th{
background:rgba(22,18,15,.045);text-align:left;padding:12px 14px;
font-size:11px;font-weight:900;text-transform:uppercase;letter-spacing:.04em;
color:var(--a-muted,rgba(22,18,15,.55));border-bottom:1px solid var(--a-border,rgba(22,18,15,.12));white-space:nowrap;
}
.ledger-table tbody td{padding:12px 14px;border-bottom:1px solid rgba(22,18,15,.07);vertical-align:middle;white-space:nowrap}
.ledger-table tbody tr:last-child td{border-bottom:0}
.ledger-table tbody tr:hover{background:rgba(22,18,15,.025)}
.ledger-table th.num,.ledger-table td.num{text-align:right}
.ledger-table td small{display:block;color:var(--a-muted,rgba(22,18,15,.55));font-size:11.5px;margin-top:2px}
.ledger-muted{color:var(--a-muted,rgba(22,18,15,.5))}
.ledger-method{border-radius:999px;padding:4px 10px;font-size:11.5px;font-weight:800}
.ledger-method.online{background:#e8f1ff;color:#1e5fd8}
.ledger-method.cash{background:#f0ece4;color:#6a4a20}
.ledger-channel{border-radius:999px;padding:4px 10px;font-size:11.5px;font-weight:800;white-space:nowrap}
.ledger-channel.dinein{background:#e7faef;color:#177a45}
.ledger-channel.takeaway{background:#fff2e2;color:#a15c00}
.ledger-channel.online{background:#e8f1ff;color:#1e5fd8}
.ledger-status{border-radius:999px;padding:4px 10px;font-size:11.5px;font-weight:800}
.ledger-status.paid{background:#e7faef;color:#177a45}
.ledger-status.unpaid{background:#fff0f0;color:#b32121}
.ledger-pending{color:#b32121;font-weight:800}
.ledger-empty{text-align:center;color:var(--a-muted,rgba(22,18,15,.5));padding:26px 14px!important}
.admin-select{border:1px solid var(--a-border);background:#fff;border-radius:10px;padding:9px 14px;font-weight:700;font-size:13px;color:var(--a-text);cursor:pointer}
.admin-search-bar{display:flex;gap:10px;margin:0 0 16px;flex-wrap:wrap}
.admin-filters-row{display:flex;gap:10px;margin:0 0 16px;flex-wrap:wrap}
.admin-search-bar input{flex:1 1 260px;min-width:0;height:42px;border:1px solid var(--a-border);border-radius:10px;background:#fff;padding:0 14px;font-size:13.5px;color:var(--a-text)}
.admin-search-bar input:focus{outline:2px solid var(--orange);outline-offset:1px}
.admin-search-bar button{flex:0 0 auto}
@media(max-width:560px){.admin-search-bar{flex-direction:column}.admin-search-bar input,.admin-search-bar button{width:100%;flex:0 0 auto}}
.ledger-clickable{cursor:pointer}
.ledger-detail-row td{white-space:normal;background:rgba(22,18,15,.02);padding:14px!important}
.ledger-detail-row .ledger-table{min-width:0}
@media(max-width:720px){.ledger-table{font-size:12.5px;min-width:680px}}
/* v2026070301: demo storefront, install UX, mobile storefront and deep insights */
.demo-storefront-link{
display:flex;
align-items:center;
justify-content:center;
margin-top:10px;
min-height:44px;
border-radius:999px;
background:rgba(22,18,15,.9);
color:#fff;
font-weight:900;
text-decoration:none;
}
.install-suggestion button.ready{
background:linear-gradient(135deg,var(--orange),var(--red));
color:#fff;
}
.install-suggestion button.installed{
background:#178a4c;
color:#fff;
}
/* Was fixed, centered, at top:72px — that's below the topbar's own band and
squarely in the path of whatever menu content scrolls up to that y position
(e.g. it sat directly on top of a dish's "COMBO" badge, showing only "BO").
Moved into the top-left corner, at the same height as the topbar's own
controls, so it rides alongside the header instead of over scrolling
content — nothing else ever occupies that corner. */
.demo-storefront::before{
content:"Demo storefront";
position:fixed;
top:max(10px,env(safe-area-inset-top));
left:14px;
z-index:501;
border-radius:999px;
padding:6px 10px;
background:rgba(255,255,255,.78);
border:1px solid rgba(255,255,255,.82);
color:#16120f;
font-size:10px;
font-weight:1000;
text-transform:uppercase;
-webkit-backdrop-filter:blur(18px) saturate(1.4);
backdrop-filter:blur(18px) saturate(1.4);
box-shadow:0 12px 30px rgba(42,22,8,.12);
pointer-events:none;
}
@media(max-width:520px){
.demo-storefront::before{left:8px;font-size:9px;padding:5px 8px}
}
.admin-ring-grid{
display:grid;
grid-template-columns:repeat(3,minmax(0,1fr));
gap:12px;
margin:0 0 16px;
}
.admin-ring-card{
display:flex;
align-items:center;
gap:14px;
min-width:0;
background:#fff;
border:1px solid var(--a-border,rgba(22,18,15,.12));
border-radius:14px;
padding:14px;
}
.admin-ring{
--ring:#ff5a00;
width:76px;
height:76px;
min-width:76px;
border-radius:50%;
display:grid;
place-items:center;
background:conic-gradient(var(--ring) calc(var(--p)*1%), rgba(22,18,15,.08) 0);
position:relative;
}
.admin-ring::after{
content:"";
position:absolute;
inset:9px;
border-radius:50%;
background:#fff;
box-shadow:inset 0 1px 0 rgba(255,255,255,.9);
}
.admin-ring b{
position:relative;
z-index:1;
font-size:17px;
line-height:1;
}
.admin-ring-card span{
display:block;
color:var(--a-muted,rgba(22,18,15,.55));
font-size:11px;
font-weight:900;
text-transform:uppercase;
letter-spacing:.04em;
}
.admin-ring-card strong{
display:block;
margin-top:4px;
font-size:18px;
line-height:1.15;
overflow-wrap:normal;
}
.admin-ring-card.green .admin-ring{--ring:#178a4c}
.admin-ring-card.red .admin-ring{--ring:#d81f2a}
.admin-ring-card.blue .admin-ring{--ring:#1e5fd8}
.admin-ring-card.orange .admin-ring{--ring:#ff5a00}
.sales-deep-grid{
display:grid;
grid-template-columns:repeat(3,minmax(0,1fr));
gap:12px;
}
.sales-deep-grid article{
min-width:0;
border:1px solid var(--a-border,rgba(22,18,15,.12));
border-radius:12px;
padding:14px;
background:rgba(255,255,255,.78);
}
.sales-deep-grid span{
display:block;
color:var(--a-muted,rgba(22,18,15,.55));
font-size:11px;
font-weight:900;
text-transform:uppercase;
letter-spacing:.04em;
}
.sales-deep-grid b{
display:block;
margin-top:6px;
font-size:20px;
line-height:1.15;
}
.sales-deep-grid small{
display:block;
margin-top:5px;
color:var(--a-muted,rgba(22,18,15,.58));
font-weight:700;
line-height:1.35;
}
body[data-page="home"] .menu-list{
grid-template-columns:repeat(2,minmax(0,1fr))!important;
}
body[data-page="home"] .menu-item{
min-width:0!important;
}
.store-title h1,
.store-title p,
.menu-item h3,
.menu-item p,
.professional-footer p,
.professional-footer span,
.professional-footer b{
overflow-wrap:normal!important;
word-break:normal!important;
hyphens:none!important;
}
@media(max-width:720px){
body[data-page="home"] .menu-list,
body[data-page="home"] .menu-list#menuList{
grid-template-columns:repeat(2,minmax(0,1fr))!important;
gap:10px!important;
}
body[data-page="home"] .menu-item{
padding:8px!important;
border-radius:20px!important;
}
body[data-page="home"] .item-img{
aspect-ratio:1/1!important;
min-height:0!important;
}
body[data-page="home"] .menu-item h3{
font-size:13.5px!important;
line-height:1.16!important;
}
body[data-page="home"] .menu-item p{
font-size:11px!important;
line-height:1.28!important;
-webkit-line-clamp:2!important;
}
body[data-page="home"] .price{
font-size:15px!important;
}
.ticker-track{
padding-left:calc(100% + 58px)!important;
}
.admin-ring-grid{
grid-template-columns:1fr;
}
.admin-ring-card{
min-height:94px;
}
.sales-deep-grid{
grid-template-columns:1fr 1fr;
}
}
@media(max-width:380px){
body[data-page="home"] .menu-list,
body[data-page="home"] .menu-list#menuList{
grid-template-columns:repeat(2,minmax(0,1fr))!important;
}
body[data-page="home"] .menu-item h3{
font-size:12.5px!important;
}
body[data-page="home"] .label{
font-size:7.5px!important;
padding:4px 5px!important;
}
.sales-deep-grid{
grid-template-columns:1fr;
}
}
/* ===== Water bottle popup ===== */
.water-card{text-align:left}
.water-card>span{display:inline-block;font-size:11px;font-weight:900;text-transform:uppercase;letter-spacing:.05em;color:var(--orange);background:rgba(255,90,0,.1);border-radius:999px;padding:5px 11px}
.water-card h2{margin:10px 0 4px}
.water-sub{margin:0 0 14px;color:rgba(22,18,15,.6);font-size:13px}
.water-options{display:grid;gap:9px;margin-bottom:14px}
.water-option{
display:flex;justify-content:space-between;align-items:center;gap:10px;
border:1.5px solid rgba(22,18,15,.14);background:#fff;border-radius:12px;
padding:12px 14px;cursor:pointer;font:inherit;text-align:left;width:100%;
transition:border-color .15s, box-shadow .15s;
}
.water-option.active{border-color:var(--orange);box-shadow:0 0 0 3px rgba(255,90,0,.14)}
.water-size{font-weight:800;font-size:14px}
.water-price{font-weight:800;font-size:13px;color:var(--orange);white-space:nowrap}
/* ===== Support page — aligned link rows + icon headings ===== */
.support-ic{
display:inline-flex;align-items:center;justify-content:center;
width:32px;height:32px;border-radius:10px;margin-right:9px;vertical-align:-9px;
background:rgba(255,90,0,.1);color:var(--orange);
}
.support-panel h2{display:flex;align-items:center;margin-top:0}
.support-panel h2 .support-ic{margin-right:10px;vertical-align:0}
.support-links{display:grid;gap:0}
.support-links a{
display:flex;justify-content:space-between;align-items:center;gap:14px;
padding:13px 2px;border-top:1px solid rgba(22,18,15,.08);text-decoration:none;color:inherit;
}
.support-links a:first-child{border-top:0}
.support-links a span{color:var(--a-muted,rgba(22,18,15,.6));font-size:13.5px;min-width:0}
.support-links a b{font-size:13.5px;white-space:nowrap;color:var(--orange)}
.support-links a:hover b{text-decoration:underline}
.audit-log-list{display:grid;gap:9px;max-height:420px;overflow:auto;padding-right:4px}
.audit-log-item{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;border:1px solid var(--a-border);border-radius:12px;background:#fff;padding:12px;min-width:0}
.audit-log-item>div{min-width:0}
.audit-log-item b,.audit-log-detail strong{display:block;font-size:13.5px;line-height:1.25;color:var(--a-text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.audit-log-item span,.audit-log-detail small{display:block;margin-top:3px;color:var(--a-muted);font-size:12px;line-height:1.35}
.audit-log-detail{text-align:right;max-width:58%}
@media(max-width:560px){
.support-links a{flex-direction:column;align-items:flex-start;gap:3px}
.support-links a b{white-space:normal}
.audit-log-item{flex-direction:column;gap:8px}
.audit-log-detail{text-align:left;max-width:none;width:100%}
.audit-log-item b,.audit-log-detail strong{white-space:normal}
}
/* ===== Sidebar: logout hamesha bottom pinned (desktop + mobile drawer) ===== */
.admin-sidebar{display:flex!important;flex-direction:column!important;overflow:hidden!important}
.admin-side-nav{flex:1 1 auto!important;overflow-y:auto!important;min-height:0!important;-webkit-overflow-scrolling:touch}
.admin-side-foot{
flex:0 0 auto!important;margin-top:auto!important;
position:sticky;bottom:0;background:inherit;
padding-top:10px;border-top:1px solid rgba(22,18,15,.08);
}
/* ===== Water: +/- inside the Add-to-Bill row ===== */
.water-add-row{display:flex;gap:10px;align-items:stretch;margin-top:14px}
.water-step{
flex:0 0 52px;border-radius:14px;border:1.5px solid rgba(22,18,15,.16);
background:#fff;font-size:22px;font-weight:800;cursor:pointer;color:var(--ink);
}
.water-step:active{background:rgba(22,18,15,.06)}
.water-add-main{
flex:1;border:0;border-radius:14px;cursor:pointer;color:#fff;
background:linear-gradient(135deg,var(--orange),var(--red));
padding:11px 10px;display:flex;flex-direction:column;align-items:center;gap:2px;
box-shadow:0 8px 20px rgba(255,90,0,.3);
}
.water-add-main:disabled{opacity:.6}
.water-add-label{font-weight:900;font-size:14.5px;letter-spacing:.02em}
.water-add-meta{font-size:12px;opacity:.92}
.water-add-meta b{font-weight:900}
/* ===== Storefront footer — clean aligned ===== */
.professional-footer{
text-align:center;
padding:22px 16px 118px!important; /* bottom padding prevents feedback button and ticker overlap */
border-top:1px solid rgba(22,18,15,.08);
margin-top:18px;
}
.professional-footer .footer-head{
display:flex;flex-direction:column;align-items:center;gap:5px;margin-bottom:12px;
}
.professional-footer .footer-head span{font-weight:900;font-size:16px}
.professional-footer .footer-head b{font-weight:600;font-size:12px;color:rgba(22,18,15,.55)}
.professional-footer .footer-meta{
display:flex;justify-content:center;gap:8px;flex-wrap:wrap;margin-bottom:12px;
}
.professional-footer .footer-meta[hidden]{display:none;margin-bottom:0}
.professional-footer .footer-meta small{
background:rgba(22,18,15,.045);border:1px solid rgba(22,18,15,.08);
border-radius:999px;padding:5px 12px;font-size:11px;font-weight:700;color:rgba(22,18,15,.6);
}
.professional-footer p{
margin:0 auto;max-width:420px;font-size:12px;line-height:1.6;color:rgba(22,18,15,.55);
}
/* ===== Customer order history (tracking) ===== */
.history-section{margin-top:16px}
.history-toggle{
display:inline-flex;align-items:center;gap:8px;
border:1.5px solid rgba(22,18,15,.16);background:#fff;border-radius:999px;
padding:11px 18px;font-weight:800;font-size:13.5px;cursor:pointer;color:var(--ink);
box-shadow:0 4px 12px rgba(42,22,8,.07);
}
.history-toggle.open,.history-toggle:hover{border-color:var(--orange);color:var(--orange)}
.history-panel{
margin-top:12px;background:#fff;border:1px solid rgba(22,18,15,.1);
border-radius:16px;padding:16px;box-shadow:0 8px 22px rgba(42,22,8,.07);
}
.history-head{display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;margin-bottom:12px}
.history-head h2{margin:0;font-size:16px}
.history-head small{display:block;margin-top:3px;color:var(--orange);font-weight:800;font-size:12px}
.history-summary{display:flex;gap:8px;flex-wrap:wrap}
.history-summary div{background:rgba(22,18,15,.04);border-radius:10px;padding:8px 12px;text-align:center;min-width:74px}
.history-summary b{display:block;font-size:14px}
.history-summary span{display:block;font-size:9.5px;font-weight:800;text-transform:uppercase;color:rgba(22,18,15,.55);margin-top:2px}
.history-table-wrap{overflow-x:auto;border:1px solid rgba(22,18,15,.08);border-radius:12px}
.history-table{width:100%;border-collapse:collapse;min-width:560px;font-size:12.5px}
.history-table thead th{background:rgba(22,18,15,.04);text-align:left;padding:9px 11px;font-size:10px;font-weight:900;text-transform:uppercase;letter-spacing:.04em;color:rgba(22,18,15,.55);white-space:nowrap}
.history-table tbody td{padding:9px 11px;border-top:1px solid rgba(22,18,15,.06);vertical-align:middle}
.history-table th.num,.history-table td.num{text-align:right}
.history-items{max-width:220px;white-space:normal;color:rgba(22,18,15,.7)}
.history-status{border-radius:999px;padding:3px 9px;font-size:10.5px;font-weight:800}
.history-status.paid{background:#e7faef;color:#177a45}
.history-status.unpaid{background:#fff0f0;color:#b32121}
.history-status.partial{background:#fff6e0;color:#8a6100}
.success-tick{display:block;margin:6px auto 0}
.history-bill-btn{border:0;border-radius:999px;padding:5px 12px;font-size:10.5px;font-weight:800;background:#16120f;color:#fff;cursor:pointer;white-space:nowrap;flex:0 0 auto}
.history-empty{text-align:center;color:rgba(22,18,15,.5);padding:20px!important}
.register-btn{background:#16120f!important}
#codeMsg{display:block;margin-top:8px;font-size:11.5px;color:rgba(22,18,15,.55);line-height:1.5}
#codeMsg.ok{color:#177a45;font-weight:700}
/* ===== Admin customer detail expand ===== */
.admin-customer-click{cursor:pointer}
.cust-expand{font-style:normal;color:var(--orange);font-weight:800;margin-left:6px}
.cust-detail{padding:12px 4px 16px}
.cust-regular-badge{display:inline-block;background:#e7faef;color:#177a45;font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.02em;padding:4px 10px;border-radius:999px;margin-bottom:10px}
.staff-login-qr-wrap{display:flex;align-items:center;gap:14px;margin-top:14px}
.staff-login-qr-wrap img{border-radius:10px;border:1px solid var(--a-border,#ddd);background:#fff;padding:6px}
.staff-login-qr-wrap small{color:var(--a-muted,rgba(22,18,15,.6));max-width:260px;line-height:1.4}
.cust-detail-summary{display:grid;grid-template-columns:repeat(auto-fit,minmax(110px,1fr));gap:10px;margin-bottom:12px}
.cust-detail-summary div{background:rgba(22,18,15,.035);border-radius:10px;padding:10px 12px}
.cust-detail-summary b{display:block;font-size:15px;word-break:break-all}
.cust-detail-summary span{display:block;margin-top:3px;font-size:10px;font-weight:800;text-transform:uppercase;color:rgba(22,18,15,.55)}
.cust-items{max-width:260px;white-space:normal!important;color:rgba(22,18,15,.7)}
/* v2026070402: admin install button, category selects, mobile overflow guard */
.admin-install-btn{
width:auto!important;
min-width:126px!important;
height:36px!important;
min-height:36px!important;
margin:10px auto 0;
padding:0 14px!important;
display:inline-flex!important;
align-items:center!important;
justify-content:center!important;
border:1px solid var(--a-border)!important;
border-radius:10px!important;
background:#fff!important;
color:var(--a-text)!important;
font-weight:700!important;
font-size:12px!important;
}
.admin-field select[data-f="cat"]{
min-height:40px;
}
.admin-body,
.admin-body *{
word-break:normal;
}
.admin-page-head h1,
.admin-panel h2,
.admin-top-row,
.admin-item-card,
.admin-lock-card p,
.admin-lock-card small{
overflow-wrap:normal;
hyphens:none;
}
@media(max-width:560px){
.admin-body main.admin-main,.admin-main{
padding-left:10px!important;
padding-right:10px!important;
}
.admin-page-head h1{
font-size:22px!important;
line-height:1.15!important;
}
.admin-item-foot{
flex-direction:column;
align-items:stretch!important;
}
.admin-item-foot button:not(.admin-row-actions button){width:100%}
.admin-row-actions{
width:100%;
}
.admin-row-actions button{
flex:1 1 auto;
}
.admin-panel,.admin-card{border-radius:11px}
.admin-mobile-actions #clearOrdersBtn{box-shadow:inset 2px 0 0 #d93a3a!important}
.admin-body .admin-panel,.admin-body .admin-card{padding:12px;margin-bottom:10px}
.admin-body .admin-card-head{gap:8px;margin-bottom:10px}
.admin-body .admin-panel h2,.admin-body .admin-card-head h2{margin-bottom:10px}
.admin-body .admin-card-head h2{margin-bottom:0}
.admin-body .admin-section-title{margin-bottom:10px}
.admin-body .admin-section-hint{margin:-6px 0 10px;font-size:11.5px;line-height:1.4}
.admin-body .admin-insight-grid{gap:8px;margin-bottom:10px}
.admin-body .admin-insight-card{min-height:68px;padding:11px 12px;border-radius:10px}
.admin-body .admin-insight-card b{font-size:19px}
.admin-body .admin-insight-card span{margin-top:3px;font-size:9.5px}
.admin-body .admin-panels-grid{gap:10px}
.admin-body .admin-panels-grid+.admin-panels-grid{margin-top:10px}
.admin-body .admin-top-row{padding:9px 10px;font-size:12.5px}
.admin-body .admin-tabs{gap:7px;margin-bottom:10px}
.admin-body .admin-orders-summary{gap:6px;margin-bottom:10px}
.admin-body .admin-filter{padding:7px 11px;font-size:11.5px}
.admin-body .admin-order-card{padding:12px 14px}
.admin-body .admin-order-card-sub{gap:6px;margin-top:8px}
.admin-body .admin-order-tag{padding:4px 8px;font-size:10px}
}
/* v2026070405: dashboard/order filters, history pagination, compact install buttons */
.admin-range-bar{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin:10px 0 18px}.admin-range-bar+.admin-section-hint{margin:0 0 18px!important;clear:both}.admin-range-tabs{display:flex;gap:8px;flex-wrap:wrap}
.admin-range-select{
height:42px;border:1px solid var(--a-border);border-radius:10px;background:#fff;
color:var(--a-text);font-weight:700;font-size:13.5px;padding:0 34px 0 14px;cursor:pointer;
-webkit-appearance:none;appearance:none;
background-image:url("data:image/svg+xml;utf8,");
background-repeat:no-repeat;background-position:right 10px center;background-size:16px;
max-width:100%;
}
.admin-range-select:hover{border-color:#c9ccd3}
.admin-range-select:focus{outline:2px solid var(--a-accent);outline-offset:1px}
.admin-custom-range{display:flex;align-items:center;gap:8px;flex-wrap:wrap}.admin-custom-range[hidden]{display:none!important}.admin-custom-range input{width:144px;max-width:100%;height:36px;border:1px solid var(--a-border);border-radius:10px;background:#fff;padding:0 10px;color:var(--a-text);font-weight:700}.admin-pager{display:flex;align-items:center;justify-content:center;gap:10px;flex-wrap:wrap;margin:12px 0}.admin-pager button{border:1px solid var(--a-border);background:#fff;border-radius:999px;padding:8px 14px;font-weight:800;color:var(--a-text);cursor:pointer}.admin-pager button:disabled{opacity:.45;cursor:not-allowed}.admin-pager span{font-size:12.5px;color:var(--a-muted);font-weight:800}.admin-history-orders[open] summary{color:var(--a-text)}.admin-side-foot .admin-install-btn,.install-app-btn{width:auto!important;max-width:180px!important}
@media(max-width:720px){.admin-range-bar{align-items:stretch}.admin-range-tabs{width:100%}.admin-range-tabs .admin-filter{flex:1 1 calc(50% - 8px);min-width:128px}.admin-range-select{width:100%}.admin-custom-range{width:100%;display:grid;grid-template-columns:1fr 1fr auto}.admin-custom-range input{width:100%;min-width:0}.staff-access-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:560px){
/* :not(.admin-customer-row) — this reordering is for the simple label/value rows
(categories, table sales, etc). .admin-customer-row shares the .admin-top-row base
class but is its own 5-part grid (name, 3 metrics, table/time) laid out by the
dedicated .admin-customer-row rules below; without this exclusion, "b{order:2}"
and "small{order:3}" hijacked the customer card and rendered the metrics ABOVE the
customer's own name — the row-list rule bleeding into an unrelated component.
*/
.admin-top-row:not(.admin-customer-row){flex-wrap:wrap;row-gap:6px}
.admin-top-row:not(.admin-customer-row)>span:first-child{white-space:normal;flex:1 1 100%;order:1}
.admin-top-row:not(.admin-customer-row) b{order:2}
.admin-top-row:not(.admin-customer-row) small{order:3}
.admin-top-row:not(.admin-customer-row) .history-bill-btn{order:4;margin-left:auto}
}
@media(max-width:420px){.admin-custom-range{grid-template-columns:1fr}.staff-access-grid{grid-template-columns:1fr}.staff-access-panel{padding:12px}.admin-swatch{padding:7px}.admin-swatch small{font-size:11px;line-height:1.2}}
/* v2026070501: ledger ranges, customer table polish, QR logos, item-wise kitchen */
#customersToolbar{align-items:flex-start;justify-content:space-between}
#customersToolbar #customersSummary{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-left:auto}
.admin-customer-row{display:grid!important;grid-template-columns:minmax(180px,1.5fr) repeat(3,minmax(92px,.55fr)) minmax(180px,1fr);align-items:center}
.admin-customer-row>span:first-child{white-space:normal!important}
.admin-customer-row .cust-primary small,.admin-customer-row .cust-last{white-space:normal!important;overflow-wrap:anywhere}
.cust-metric{display:grid;gap:2px;min-width:0}
.cust-metric b{font-size:14px!important;white-space:normal!important}
.cust-metric small{font-size:11px;color:var(--a-muted);text-transform:uppercase;letter-spacing:.02em}
.cust-last{justify-self:end;text-align:right}
.admin-comment-head{display:flex;align-items:center;justify-content:space-between;gap:10px}
.admin-danger-link{border:1px solid #f1c5c5;background:#fff;color:var(--a-danger);border-radius:8px;padding:6px 10px;font-size:11px;font-weight:800;cursor:pointer}
.qr-logo-wrap{position:relative;width:150px;height:150px;display:grid;place-items:center}
.qr-logo-wrap>img{width:150px!important;height:150px!important}
.qr-logo-overlay{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:34px;height:34px;border-radius:10px;background:#fff;border:3px solid #fff;box-shadow:0 4px 16px rgba(0,0,0,.18);display:grid;place-items:center;overflow:hidden;pointer-events:none}
.qr-logo-overlay img{width:100%;height:100%;object-fit:contain;border:0!important;border-radius:6px!important}
.sales-chart-strip{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.sales-mini{border:1px solid var(--a-border);border-radius:12px;padding:14px;background:#fff;display:grid;gap:12px}
.sales-mini div{display:flex;align-items:flex-start;justify-content:space-between;gap:10px}
.sales-mini b{font-size:13px;color:var(--a-text)}
.sales-mini span{font-size:12px;font-weight:800;color:var(--a-muted);white-space:nowrap}
.sales-mini i{height:10px;border-radius:999px;background:linear-gradient(90deg,var(--bar,#2f6fed) var(--w),rgba(22,18,15,.08) 0)}
.sales-mini.green{--bar:#178a4c}.sales-mini.red{--bar:#d81f2a}.sales-mini.blue{--bar:#1e5fd8}
.product-detail-media{width:100%;aspect-ratio:16/9;background:center/cover;border-radius:22px;border:1px solid rgba(255,255,255,.62);margin:10px 0 12px;box-shadow:inset 0 -30px 50px rgba(0,0,0,.12)}
.product-detail-summary{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:12px}
.product-detail-summary div{border:1px solid rgba(255,255,255,.62);border-radius:16px;background:rgba(255,255,255,.54);padding:10px}
.product-detail-summary b{display:block;color:var(--ink);font-size:18px}.product-detail-summary span{font-size:11px!important}.product-detail-summary p{grid-column:1/-1;margin:0;color:var(--muted);font-weight:700;line-height:1.45}
.product-order-now{width:100%;border:0;border-radius:999px;background:rgba(22,18,15,.88);color:#fff;font-weight:1000;padding:13px 16px;margin:0 0 10px}
.product-feedback-list{display:grid;gap:8px;margin-top:14px;max-height:210px;overflow:auto;padding-right:2px}
.product-feedback-list h3{font-size:13px;margin:0;color:var(--ink);text-transform:uppercase}
.product-feedback-list article,.product-feedback-list>p{border:1px solid rgba(255,255,255,.62);border-radius:16px;background:rgba(255,255,255,.52);padding:10px;margin:0}
.product-feedback-list article b{display:block;color:#9a6a00}.product-feedback-list article p{margin:4px 0;color:var(--ink);line-height:1.4}.product-feedback-list article small{color:var(--muted);font-weight:800}
.cart-head-actions{display:flex;align-items:center;gap:8px}.cart-head-actions .cart-clear-btn{width:auto!important;min-width:64px;border-radius:999px!important;font-size:12px!important;padding:0 13px!important;background:rgba(255,255,255,.68)!important;color:var(--ink)!important;border:1px solid rgba(255,255,255,.72)!important}
.floating-cart-row{position:fixed;left:50%;bottom:52px;transform:translate(-50%,12px);width:min(680px,calc(100% - 28px));display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px;z-index:61;opacity:0;pointer-events:none;transition:opacity .16s ease,transform .16s ease}
.floating-cart-row.is-visible{opacity:1;pointer-events:auto;transform:translate(-50%,0)}
.floating-cart-row #openCart.floating-cart{position:static!important;left:auto!important;bottom:auto!important;width:100%!important;transform:none!important;opacity:1!important;pointer-events:auto!important;display:flex!important}
.floating-clear{border:1px solid rgba(255,255,255,.58);background:rgba(255,255,255,.56);-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);border-radius:22px;padding:0 14px;font-weight:1000;color:var(--ink);box-shadow:0 16px 46px rgba(42,22,8,.14)}
.tracking-item-status{display:inline-flex!important;margin-top:7px!important;border-radius:999px;padding:5px 8px;font-style:normal;font-size:10.5px;text-transform:uppercase;background:#f1f5f9;color:#475569}
.tracking-item-status.preparing{background:#fff7db;color:#9a6a00}.tracking-item-status.ready{background:#e8f8ee;color:#177a45}.tracking-item-status.serving{background:#e8f1ff;color:#1e5fd8}.tracking-item-status.unavailable{background:#fee2e2;color:#b91c1c}
@media(max-width:720px){
.admin-body{overflow-x:hidden}
.admin-body main.admin-main,.admin-main{width:100%;max-width:100vw;overflow-x:hidden}
.admin-page-head>div{min-width:0;max-width:100%}
.admin-page-head p{max-width:330px;overflow-wrap:normal;word-break:normal}
#customersToolbar{display:grid;gap:10px}
#customersToolbar #customersSummary{margin-left:0;display:grid;grid-template-columns:1fr;justify-items:start;width:100%}
#customersToolbar .admin-range-tabs{display:grid;grid-template-columns:1fr 1fr;width:100%;gap:8px}
#customersToolbar .admin-range-tabs .admin-filter{min-width:0;width:100%;padding-left:8px;padding-right:8px;white-space:normal;line-height:1.15}
.sales-chart-strip{grid-template-columns:1fr}
.qr-logo-wrap,.qr-logo-wrap>img{width:120px!important;height:120px!important}
.qr-logo-overlay{width:30px;height:30px}
.kitchen-seg-btn{min-height:38px}
.kitchen-ticket-actions button{min-width:0;font-size:12px;padding:12px 8px}
.floating-cart-row{width:calc(100% - 24px);bottom:52px;grid-template-columns:minmax(0,1fr) 74px}
.floating-clear{padding:0 10px}
.store-title h1{font-size:clamp(30px,8.4vw,38px)!important;line-height:1!important;width:100%!important;max-width:calc(100vw - 28px)!important;white-space:normal!important;overflow-wrap:normal!important;word-break:keep-all!important;text-wrap:balance}
}
@media(max-width:420px){.store-title h1{font-size:clamp(28px,7.8vw,32px)!important}}
/* ===== v0705: QR print templates ===== */
#qrPrintArea{display:none}
.qr-template-preview{margin-top:12px;display:grid;place-items:center;background:rgba(22,18,15,.04);border-radius:14px;padding:14px}
/* Preview is a scaled-down, near-upright thumbnail of the print card — smaller
footprint and better aligned than the full tilted card (the actual printed/
downloaded card is rendered separately at full size, so this only affects the
on-screen preview). */
.qr-template-preview .qr-print-card{width:250px;transform:scale(.86)!important;transform-origin:center}
.qr-print-card{
width:300px;border-radius:20px;padding:22px 20px;text-align:center;
display:flex;flex-direction:column;align-items:center;gap:10px;
box-shadow:0 10px 30px rgba(0,0,0,.12);
}
.qr-template-preview{perspective:1400px}
.qr-print-classic,.qr-print-bold{
transform:perspective(1400px) rotateX(7deg) rotateY(-8deg);
transform-style:preserve-3d;
}
.qr-print-classic{
background:#fff;border:2.5px solid #16120f;color:#16120f;
box-shadow:
14px 34px 20px -14px rgba(0,0,0,.22),
28px 55px 45px -20px rgba(0,0,0,.16),
inset 0 2px 0 rgba(255,255,255,.95),
inset 0 -14px 26px -16px rgba(0,0,0,.07);
}
.qr-print-classic .qrp-kicker{font-size:10.5px;font-weight:900;letter-spacing:.14em;color:var(--orange);background:rgba(255,90,0,.1);border-radius:999px;padding:5px 13px;text-shadow:0 1px 0 rgba(255,255,255,.7),0 2px 3px rgba(0,0,0,.12)}
.qr-print-card .qrp-name{font-size:21px;font-weight:900;line-height:1.15}
.qr-print-classic .qrp-name{text-shadow:0 1px 0 rgba(255,255,255,.85),0 3px 6px rgba(0,0,0,.18)}
.qr-print-bold .qrp-name{text-shadow:0 1px 0 rgba(0,0,0,.5),0 3px 8px rgba(0,0,0,.55)}
.qr-print-classic .qrp-msg{text-shadow:0 1px 0 rgba(255,255,255,.7),0 2px 4px rgba(0,0,0,.1)}
.qr-print-bold .qrp-msg{text-shadow:0 1px 0 rgba(0,0,0,.4),0 2px 5px rgba(0,0,0,.4)}
.qr-print-classic .qrp-table{text-shadow:0 1px 2px rgba(0,0,0,.3)}
.qr-print-bold .qrp-table{text-shadow:0 1px 2px rgba(0,0,0,.35)}
.qr-print-classic .qrp-brand{text-shadow:0 1px 0 rgba(255,255,255,.6)}
.qr-print-bold .qrp-brand{text-shadow:0 1px 2px rgba(0,0,0,.4)}
.qr-print-qr{position:relative;display:inline-block;background:#fff;border-radius:14px;padding:8px;border:1.5px solid rgba(22,18,15,.14);box-shadow:6px 14px 20px -12px rgba(0,0,0,.22)}
.qr-print-qr>img{width:190px;height:190px;display:block}
.qr-print-qr>i{
position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
width:42px;height:42px;border-radius:10px;background:#fff;border:3px solid #fff;
box-shadow:0 2px 10px rgba(0,0,0,.2);overflow:hidden;display:grid;place-items:center;font-style:normal;
}
.qr-print-qr>i img{width:100%;height:100%;object-fit:contain}
.qr-print-card .qrp-table{font-size:15px;font-weight:900;border:2px solid currentColor;border-radius:999px;padding:7px 20px;box-shadow:4px 10px 14px -10px rgba(0,0,0,.18)}
.qr-print-card .qrp-msg{margin:0;font-size:13px;line-height:1.5;opacity:.8;max-width:240px}
.qr-print-card .qrp-brand{
font-size:10.5px;font-weight:900;letter-spacing:.1em;text-transform:uppercase;
color:var(--qrc,#ff5a00);opacity:1;
background:color-mix(in srgb,var(--qrc,#ff5a00) 12%,transparent);
border-radius:999px;padding:4px 12px;display:inline-block;
}
.qr-print-bold{
background:#16120f;color:#fff;border:2.5px solid #ff5a00;
box-shadow:
14px 34px 20px -14px rgba(0,0,0,.5),
28px 55px 45px -20px rgba(0,0,0,.4),
0 0 34px -8px color-mix(in srgb,var(--qrc,#ff5a00) 55%,transparent),
inset 0 2px 0 rgba(255,255,255,.14),
inset 0 -14px 26px -16px rgba(0,0,0,.55);
}
.qr-print-bold .qrp-table{background:#ff5a00;border-color:#ff5a00;color:#fff}
.qr-print-bold .qrp-name{color:#ffb020}
@media print{
.qr-print-classic,.qr-print-bold{transform:none;box-shadow:0 10px 26px rgba(0,0,0,.16)}
}
/* Glassy — a water-droplet look: clear/wet body + round specular glints.
No blur anywhere (it's a printed sticker, not a see-through overlay) —
the "glass" reads through gradients and highlights baked into the image. */
.qr-print-glassy{
position:relative;color:#16120f;
background:
radial-gradient(ellipse 60% 40% at 28% 16%,rgba(255,255,255,.9) 0%,rgba(255,255,255,.4) 45%,transparent 75%),
radial-gradient(ellipse 70% 55% at 72% 100%,color-mix(in srgb,var(--qrc,#ff5a00) 16%,transparent) 0%,transparent 70%),
linear-gradient(165deg,rgba(230,244,255,.65) 0%,rgba(210,232,255,.35) 55%,rgba(190,220,255,.28) 100%);
border:1.5px solid rgba(255,255,255,.9);
border-bottom-color:rgba(80,130,200,.3);
border-right-color:rgba(80,130,200,.2);
transform:perspective(1400px) rotateX(7deg) rotateY(-8deg) translateZ(0);
transform-style:preserve-3d;
box-shadow:
14px 34px 20px -14px rgba(20,50,90,.22),
28px 55px 45px -20px rgba(20,50,90,.16),
0 0 40px -10px color-mix(in srgb,var(--qrc,#ff5a00) 45%,transparent),
inset 0 2px 0 rgba(255,255,255,1),
inset 0 -20px 36px -20px rgba(80,130,200,.3),
inset 2px 0 0 rgba(255,255,255,.6),
inset -3px -3px 10px rgba(80,130,200,.16);
overflow:hidden;
}
/* Round glints — like light catching the curved surface of a drop of water */
.qr-print-glassy::before{
content:'';position:absolute;inset:0;pointer-events:none;
background:
radial-gradient(ellipse 40% 22% at 24% 14%,rgba(255,255,255,.98) 0%,rgba(255,255,255,.55) 45%,transparent 75%),
radial-gradient(ellipse 16% 10% at 66% 30%,rgba(255,255,255,.7) 0%,transparent 75%),
radial-gradient(ellipse 26% 14% at 78% 88%,rgba(255,255,255,.4) 0%,transparent 75%);
}
@media print{
.qr-print-glassy{transform:none;box-shadow:0 10px 24px rgba(20,50,90,.18),inset 0 2px 0 rgba(255,255,255,1),inset 0 -16px 28px -18px rgba(80,130,200,.28)}
}
.qr-print-glassy .qrp-kicker{
position:relative;font-size:10.5px;font-weight:900;letter-spacing:.14em;
color:var(--qrc,#ff5a00);
background:rgba(255,255,255,.75);border:1px solid rgba(255,255,255,.9);
border-radius:999px;padding:5px 13px;
box-shadow:4px 8px 12px -6px rgba(20,50,90,.2),inset 0 1px 0 rgba(255,255,255,.95);
}
.qr-print-glassy .qrp-name{position:relative;color:#16120f;text-shadow:0 2px 6px rgba(255,255,255,.4)}
.qr-print-glassy .qr-print-qr{
position:relative;background:rgba(255,255,255,.85);border:1.5px solid rgba(255,255,255,.95);
box-shadow:6px 14px 22px -10px rgba(20,50,90,.25),inset 0 1px 0 rgba(255,255,255,1);
}
.qr-print-glassy .qrp-table{
position:relative;border:2px solid rgba(255,255,255,.95);
color:var(--qrc,#16120f);background:rgba(255,255,255,.65);
box-shadow:4px 10px 16px -8px rgba(20,50,90,.22),inset 0 1px 0 rgba(255,255,255,.95);
}
.qr-print-glassy .qrp-msg,.qr-print-glassy .qrp-brand{position:relative}
.qr-print-btn{background:#16120f!important;color:#fff!important;border:0!important}
.qr-print-all-btn{background:linear-gradient(135deg,var(--orange),var(--red))!important;color:#fff!important;border:0!important}
@media print{
/* Exempts BOTH #qrPrintArea and #billModal here — a second, later "body>*:not(#billModal)"
rule with equal specificity used to win this cascade tie on every page that shares this
stylesheet (i.e. all of them), hiding #qrPrintArea entirely and printing a blank page/PDF
whenever neither element happened to have the other's id. Keep any future print-target
exemptions merged into this one rule instead of adding a new "body>*:not(#x)" rule. */
body>*:not(#qrPrintArea):not(#billModal){display:none!important}
#qrPrintArea{
display:flex!important;flex-wrap:wrap;align-content:flex-start;justify-content:center;
gap:18px;visibility:visible!important;position:static;width:100%;background:#fff;padding:20px;
margin:0;
}
#qrPrintArea *{visibility:visible!important}
.qr-print-card,.qr-print-card *{
box-shadow:none;
-webkit-print-color-adjust:exact!important;
print-color-adjust:exact!important;
color-adjust:exact!important;
}
.qr-print-card{page-break-inside:avoid;break-inside:avoid;margin:0}
}
/* ===== v0705: mobile table scroll + alignment fixes ===== */
.admin-main{min-width:0}
.admin-panel{min-width:0}
.table-status-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:14px}
.table-status-card{background:var(--a-card);border:1px solid var(--a-border);border-radius:14px;padding:16px;display:flex;flex-direction:column;gap:9px;position:relative;overflow:hidden;min-height:154px}
.table-status-card.free{opacity:.7}
.table-status-head{display:flex;align-items:center;justify-content:space-between;gap:8px}
.table-status-head b{font-size:17px;color:var(--a-text)}
.table-status-pill{border-radius:999px;padding:4px 10px;font-size:11px;font-weight:800;white-space:nowrap}
.table-status-pill.free{background:#eef2f7;color:#5b6b7d}
.table-status-pill.paid{background:#e7faef;color:#177a45}
.table-status-pill.pending{background:#fff0f0;color:#b32121}
.table-status-empty{color:var(--a-muted);font-size:12.5px;margin:0}
.table-status-row{display:flex;justify-content:space-between;gap:10px;font-size:12.5px;color:var(--a-muted)}
.table-status-row b{color:var(--a-text);font-weight:700}
.table-status-pending-amt{color:#b32121!important}
.table-status-free-btn{margin-top:4px;width:100%}
.table-status-chair{position:absolute;right:14px;bottom:12px;width:54px;height:54px;color:#8a96a6;opacity:.12;pointer-events:none}
.table-status-chair svg{display:block;width:100%;height:100%;fill:none;stroke:currentColor;stroke-width:4;stroke-linecap:round;stroke-linejoin:round}
.table-status-chair.pending{color:#b32121;opacity:.16}
.table-status-chair.paid{color:#177a45;opacity:.16}
.ledger-wrap,.history-table-wrap{
overflow-x:auto!important;-webkit-overflow-scrolling:touch;touch-action:pan-x pan-y;max-width:100%;
}
@media(max-width:720px){
.ledger-table{min-width:720px}
.admin-orders-summary{overflow-x:auto;-webkit-overflow-scrolling:touch;flex-wrap:nowrap!important;padding-bottom:4px}
.admin-orders-summary .admin-filter{white-space:nowrap;flex:0 0 auto}
.cust-detail-summary{grid-template-columns:1fr 1fr}
}
/* ===== v0705: storefront dish sheet scroll ===== */
/* .feedback-card itself no longer scrolls — its close button (position:absolute
relative to this card) used to scroll away with the content. The scrollable
area is now the .feedback-card-scroll child only; the close button stays a
direct (non-scrolling) child of .feedback-card, always pinned to the corner. */
.feedback-sheet .feedback-card{
max-height:86vh;
overflow:hidden;
display:flex;
flex-direction:column;
padding:0;
}
.feedback-card-scroll{
overflow-y:auto;
-webkit-overflow-scrolling:touch;
overscroll-behavior:contain;
padding:18px;
position:relative;
z-index:0;
}
/* -webkit-overflow-scrolling:touch promotes .feedback-card-scroll to its own
compositor layer on iOS; without an explicit stacking order the close button
(also position:absolute) can end up hit-tested *underneath* that layer on a
real tap even though it still paints visually on top — real fingers miss it
while a synthetic .click() (which bypasses hit-testing) still "works". Force
the close button onto a higher, explicit stacking layer so real touches
always resolve to it. */
.search-glass-card>button:first-child,
.feedback-card>button:first-child{
z-index:2;
touch-action:manipulation;
}
/* ===== QR page: preview sits first (unscrolled), template/colour options below it
are capped and scroll on their own so the whole panel takes less vertical space. ===== */
.qr-template-options{max-height:360px;overflow-y:auto;overflow-x:hidden;padding-right:6px;margin-top:14px}
.qr-template-options::-webkit-scrollbar{width:6px}
.qr-template-options::-webkit-scrollbar-thumb{background:rgba(22,18,15,.18);border-radius:99px}
/* ===== QR card colour option — compact horizontal scroll strip ===== */
.qr-color-pick{
display:grid;grid-template-columns:repeat(auto-fill,minmax(38px,1fr));gap:10px;overflow:visible;padding:2px 2px 8px;margin-bottom:2px;
}
.qr-color-pick::-webkit-scrollbar{height:6px}
.qr-color-pick::-webkit-scrollbar-thumb{background:rgba(22,18,15,.18);border-radius:99px}
.qr-color-swatch{
width:100%;min-width:38px;height:38px;border-radius:12px;cursor:pointer;
background:var(--sw);border:2.5px solid rgba(22,18,15,.12);
transition:transform .12s, box-shadow .12s;
}
.qr-color-swatch:hover{transform:scale(1.08)}
.qr-color-swatch.active{border-color:#16120f;box-shadow:0 0 0 3px rgba(22,18,15,.15)}
/* ===== QR card background theme — compact horizontal scroll strip ===== */
.qr-bg-strip{
display:grid;grid-template-columns:repeat(auto-fill,minmax(72px,1fr));gap:10px;overflow:visible;padding:2px 2px 8px;margin-bottom:2px;
}
.qr-bg-strip::-webkit-scrollbar{height:6px}
.qr-bg-strip::-webkit-scrollbar-thumb{background:rgba(22,18,15,.18);border-radius:99px}
.qr-bg-swatch{
width:100%;min-width:0;height:48px;border-radius:12px;cursor:pointer;
background:var(--bg);border:2.5px solid rgba(22,18,15,.12);
display:flex;align-items:flex-end;justify-content:center;padding:4px;
transition:transform .12s, box-shadow .12s;
}
.qr-bg-swatch small{font-size:9.5px;font-weight:800;color:rgba(22,18,15,.6);background:rgba(255,255,255,.75);border-radius:6px;padding:1px 5px;white-space:normal;line-height:1.05;overflow-wrap:anywhere;max-width:100%}
.qr-bg-swatch:hover{transform:scale(1.05)}
.qr-bg-swatch.active{border-color:#16120f;box-shadow:0 0 0 3px rgba(22,18,15,.15)}
/* card accent via --qrc, card background via --qrbg.
--qrcFg = accent kept as text/border on the card's light body (falls back to
dark ink if the accent itself is too light to read, e.g. White).
--qrcText = readable text ON a solid fill of --qrc (e.g. the Bold table pill). */
.qr-print-classic{border-color:var(--qrc,#16120f);background:var(--qrbg,#fff)}
.qr-print-classic .qrp-kicker{color:var(--qrcFg,#ff5a00);background:color-mix(in srgb,var(--qrc,#ff5a00) 12%,white);box-shadow:0 2px 6px -2px rgba(0,0,0,.2),inset 0 1px 0 rgba(255,255,255,.8)}
.qr-print-classic .qrp-brand{box-shadow:0 2px 6px -2px rgba(0,0,0,.15),inset 0 1px 0 rgba(255,255,255,.7)}
.qr-print-bold .qrp-kicker{box-shadow:0 2px 6px -2px rgba(0,0,0,.4)}
.qr-print-bold .qrp-brand{box-shadow:0 2px 6px -2px rgba(0,0,0,.4)}
.qr-print-classic .qrp-table{background:var(--qrc,#16120f);border-color:var(--qrc,#16120f);color:var(--qrcText,#fff)}
.qr-print-classic .qrp-brand{color:var(--qrcFg,#ff5a00)}
.qr-print-bold{border-color:var(--qrc,#ff5a00)}
.qr-print-bold .qrp-table{background:var(--qrc,#ff5a00);border-color:var(--qrc,#ff5a00);color:var(--qrcText,#fff)}
.qr-print-bold .qrp-name{color:var(--qrc,#ffb020);filter:brightness(1.6)}
/* Glassy stays translucent on purpose — --qrbg is not applied as an opaque fill here */
.qr-print-glassy .qrp-brand{color:var(--qrcFg,#ff5a00)}
/* ===== Customers: aligned rows + detail (mobile) ===== */
.admin-customer-block{min-width:0;max-width:100%;overflow:hidden}
.admin-customer-block-checkable{position:relative;padding-left:32px}
.admin-customer-block-checkable>.admin-customer-check{position:absolute;left:6px;top:16px;width:17px;height:17px;cursor:pointer;z-index:1}
.cust-detail{max-width:100%;overflow:hidden;padding:12px 4px 16px}
.cust-detail .ledger-wrap{max-width:100%}
@media(max-width:720px){
.admin-customer-row{
display:grid!important;
grid-template-columns:repeat(3,minmax(0,1fr))!important;
gap:8px!important;align-items:stretch!important;
}
.admin-customer-row .cust-primary{grid-column:1/-1}
.admin-customer-row .cust-metric{
background:#fff;border:1px solid var(--a-border,rgba(22,18,15,.12));
border-radius:10px;padding:9px 10px;text-align:left;
}
.admin-customer-row .cust-metric b{font-size:14px!important}
.admin-customer-row .cust-metric small{font-size:9.5px}
.admin-customer-row .cust-last{grid-column:1/-1;text-align:left;justify-self:stretch}
.cust-detail-summary{grid-template-columns:repeat(2,minmax(0,1fr))!important}
.cust-detail-summary div{min-width:0}
.cust-detail-summary b{font-size:13px;overflow-wrap:anywhere}
.cust-detail .ledger-table{min-width:640px;font-size:12px}
}
/* ===== Customers page: professional responsive alignment ===== */
#customersList{gap:12px}
#customersSummary{min-width:0}
#customersSummary .admin-filter-note{margin:0!important}
.admin-customer-block{
position:relative;
display:block;
background:var(--a-card);
border:1px solid var(--a-border);
border-radius:14px;
padding:12px 14px 12px 54px!important;
box-shadow:0 8px 22px rgba(15,20,30,.035);
overflow:hidden;
}
.admin-customer-block .admin-top-row{
padding:0!important;
border:0!important;
background:transparent!important;
border-radius:0!important;
}
.admin-customer-check-wrap{
position:absolute;
left:14px;
top:16px;
width:28px;
height:28px;
display:grid;
place-items:center;
cursor:pointer;
z-index:2;
}
.admin-customer-block-checkable>.admin-customer-check,
.admin-customer-check-wrap>.admin-customer-check{
position:static!important;
width:22px!important;
height:22px!important;
min-width:22px!important;
margin:0!important;
cursor:pointer;
}
.admin-customer-row{
grid-template-columns:minmax(190px,1.35fr) repeat(3,minmax(96px,.55fr)) minmax(180px,.95fr)!important;
gap:12px!important;
}
.cust-primary{min-width:0}
.cust-primary b{
display:block;
max-width:100%;
overflow:hidden;
text-overflow:ellipsis;
white-space:nowrap;
font-size:15px!important;
}
.cust-primary small{
display:block;
max-width:100%;
overflow:hidden;
text-overflow:ellipsis;
white-space:nowrap!important;
margin-top:3px;
}
.cust-metric{
min-width:0;
border-left:1px solid var(--a-border);
padding-left:12px;
}
.cust-metric b{
display:block;
overflow:hidden;
text-overflow:ellipsis;
white-space:nowrap!important;
}
.cust-metric small{white-space:nowrap!important}
.cust-last{
display:block;
min-width:0;
overflow:hidden;
text-overflow:ellipsis;
white-space:nowrap!important;
color:var(--a-muted);
}
.cust-expand{
display:inline-flex;
margin-left:8px;
white-space:nowrap;
}
.cust-detail{
margin-top:12px;
padding:14px 0 2px!important;
border-top:1px solid var(--a-border);
}
.cust-detail-summary div{
border:1px solid var(--a-border);
background:var(--a-bg);
}
#customersPager.admin-pagination,.admin-pagination{
display:flex;
align-items:center;
justify-content:center;
gap:10px;
flex-wrap:wrap;
}
#customersPager button{
border:1px solid var(--a-border);
background:#fff;
color:var(--a-text);
border-radius:10px;
padding:9px 14px;
font-weight:800;
}
#customersPager button:disabled{opacity:.5;cursor:not-allowed}
#customersPager span{font-size:12.5px;font-weight:800;color:var(--a-muted)}
@media(max-width:900px){
#customersList{gap:10px}
.admin-customer-block{padding:12px 12px 12px 50px!important}
.admin-customer-check-wrap{left:12px;top:14px}
.admin-customer-row{
grid-template-columns:repeat(3,minmax(0,1fr))!important;
gap:8px!important;
align-items:stretch!important;
}
.admin-customer-row .cust-primary{
grid-column:1/-1;
min-height:30px;
padding-right:2px;
}
.admin-customer-row .cust-metric{
border-left:0;
background:var(--a-bg);
border:1px solid var(--a-border);
border-radius:10px;
padding:9px 10px;
text-align:left;
}
.admin-customer-row .cust-metric b{font-size:14px!important}
.admin-customer-row .cust-metric small{
display:block;
margin-top:2px;
font-size:9.5px!important;
line-height:1.15;
white-space:normal!important;
}
.admin-customer-row .cust-last{
grid-column:1/-1;
justify-self:stretch;
text-align:left;
white-space:normal!important;
overflow-wrap:normal;
line-height:1.35;
}
.cust-expand{display:block;margin:4px 0 0}
.cust-detail-summary{grid-template-columns:repeat(2,minmax(0,1fr))!important}
.cust-detail .admin-row-actions{display:grid}
.cust-detail .admin-row-actions button{width:100%}
}
@media(max-width:560px){
.admin-search-bar{
display:grid!important;
grid-template-columns:1fr auto;
gap:8px;
align-items:center;
margin-bottom:12px;
}
.admin-search-bar input{width:100%;height:40px;flex:initial!important}
.admin-search-bar button{width:auto!important;min-width:88px;height:40px;padding:0 13px!important}
.admin-filters-row{
display:grid!important;
grid-template-columns:1fr 1fr;
gap:8px;
margin-bottom:12px;
}
.admin-filters-row .admin-select{width:100%;min-width:0;padding-left:10px;padding-right:28px}
#customersToolbar{margin-bottom:12px}
#customersToolbar #customersSummary{gap:6px!important}
#customersSummary .admin-filter-note{
width:100%;
border:1px solid var(--a-border);
border-radius:10px;
background:#fff;
padding:8px 10px;
line-height:1.25;
}
.admin-customer-block{padding:12px!important}
.admin-customer-check-wrap{
top:12px;
right:12px;
left:auto;
width:30px;
height:30px;
border:1px solid var(--a-border);
border-radius:9px;
background:#fff;
}
.admin-customer-row .cust-primary{padding-right:40px}
.cust-primary b{font-size:14px!important}
.cust-primary small{font-size:12px!important}
.admin-customer-row{grid-template-columns:repeat(3,minmax(0,1fr))!important}
.admin-customer-row .cust-metric{padding:8px 7px}
.admin-customer-row .cust-metric b{font-size:13px!important}
.admin-customer-row .cust-metric small{font-size:8.8px!important}
.cust-detail-summary{gap:8px!important}
.cust-detail-summary div{padding:9px 10px}
.cust-detail-summary b{font-size:12.5px!important}
#customersPager{gap:8px}
#customersPager button{flex:1 1 0;min-width:0}
#customersPager span{order:-1;flex:1 1 100%;text-align:center}
}
@media(max-width:380px){
.admin-search-bar{grid-template-columns:1fr}
.admin-search-bar button{width:100%!important}
.admin-filters-row{grid-template-columns:1fr}
}
/* ===== Theme page: wrapped swatch grids, capped height + vertical scroll so a long
texture/colour list doesn't push the rest of the page down. ===== */
.admin-swatch-strip{
display:grid;grid-template-columns:repeat(auto-fit,minmax(86px,1fr));gap:10px;
max-height:260px;overflow-y:auto;overflow-x:hidden;padding:4px 6px 10px 2px;
}
.admin-swatch-strip::-webkit-scrollbar{width:6px;height:6px}
.admin-swatch-strip::-webkit-scrollbar-thumb{background:rgba(22,18,15,.18);border-radius:99px}
.admin-swatch-strip .admin-swatch{
width:100%;min-width:0;padding:6px;gap:6px;
}
.admin-swatch-strip .admin-swatch-sample{height:44px;width:100%}
.admin-swatch-strip.admin-color-strip{grid-template-columns:repeat(auto-fit,minmax(72px,1fr))}
.admin-swatch-strip.admin-color-strip .admin-swatch-sample{height:34px}
.admin-swatch-strip .admin-swatch small{font-size:10.5px;white-space:normal;overflow-wrap:anywhere;display:block;max-width:100%;margin:0 auto;line-height:1.15}
/* Theme editor: a dedicated sticky dock contains only the preview and segmented tabs.
Option panels remain siblings below it, so texture cards can never enter the dock. */
html:has(body.theme-admin-body),body.theme-admin-body{overflow-x:clip!important;overflow-y:visible!important}
.theme-admin-body .admin-main{overflow-x:clip!important;overflow-y:visible!important}
.theme-editor-layout{display:block;max-width:1180px;margin:0 auto}
.theme-preview-dock{position:sticky;top:76px;z-index:38;margin:0 0 14px;padding-bottom:8px;background:linear-gradient(var(--a-bg) 88%,rgba(244,245,247,0));isolation:isolate}
.theme-preview-column,.theme-config-column{min-width:0}
.theme-preview-panel{margin:0;padding:14px;box-shadow:0 9px 26px rgba(20,25,35,.10)}
.theme-preview-heading{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:10px}
.theme-preview-heading h2{margin:0}
.theme-preview-heading .admin-section-hint{margin:4px 0 0}
.theme-preview-status{display:inline-flex;align-items:center;gap:6px;flex:0 0 auto;border:1px solid #bbdfc8;border-radius:999px;background:#edf9f1;color:#177a45;padding:5px 9px;font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.04em}
.theme-preview-status i{width:7px;height:7px;border-radius:50%;background:#22a45d;box-shadow:0 0 0 3px rgba(34,164,93,.12)}
.theme-preview-panel .admin-theme-preview{grid-template-columns:minmax(0,1fr) auto;align-items:stretch;gap:10px}
.theme-preview-panel .admin-theme-banner{height:104px;min-height:104px;aspect-ratio:auto;border-radius:11px;padding:13px;background-size:cover!important;background-position:center!important;box-shadow:inset 0 0 0 1px rgba(255,255,255,.16)}
.theme-preview-panel .admin-theme-controls{min-width:142px;flex-direction:column;align-items:center;justify-content:center;gap:8px;border:1px solid var(--a-border);border-radius:11px;background:var(--a-bg);padding:10px}
.theme-preview-panel .admin-theme-cta{pointer-events:none;padding:11px 16px}
.theme-preview-panel .admin-theme-price{font-size:22px}
.theme-editor-tabs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:7px;margin-top:8px;padding:7px;border:1px solid var(--a-border);border-radius:12px;background:rgba(255,255,255,.96);box-shadow:0 7px 18px rgba(20,25,35,.08)}
.theme-editor-tabs button{min-width:0;min-height:42px;border:1px solid transparent;border-radius:9px;background:transparent;color:var(--a-muted);padding:9px 11px;font-size:11.5px;font-weight:750;line-height:1.2;cursor:pointer;white-space:normal}
.theme-editor-tabs button:hover{background:var(--a-hover);color:var(--a-text)}
.theme-editor-tabs button.active{border-color:var(--a-text);background:var(--a-text);color:#fff;box-shadow:0 5px 12px rgba(31,35,40,.16)}
.theme-editor-tabs button:focus-visible,.theme-config-column .admin-swatch:focus-visible{outline:3px solid rgba(47,111,237,.25);outline-offset:2px}
.theme-config-column{display:block}
.theme-option-panel{margin:0;scroll-margin-top:270px}
.theme-option-panel[hidden]{display:none!important}
.theme-config-column .admin-swatch-strip{scrollbar-gutter:stable}
@media(min-width:901px){
.theme-preview-dock{top:76px}
.theme-preview-panel .admin-theme-banner{height:126px;min-height:126px}
.theme-preview-panel .admin-theme-controls{min-width:180px}
.theme-editor-tabs button{font-size:12.5px}
}
@media(max-width:900px){
.theme-preview-dock{top:68px;margin-top:-4px}
.theme-preview-panel{padding:11px 12px}
.theme-preview-heading{margin-bottom:8px}
.theme-preview-heading .admin-section-hint{display:none}
.theme-preview-panel .admin-theme-banner{height:80px;min-height:80px;padding:10px}
.theme-preview-panel .admin-theme-banner span{font-size:18px}
.theme-preview-panel .admin-theme-controls{min-width:112px;gap:5px;padding:7px}
.theme-preview-panel .admin-theme-cta{padding:9px 12px;font-size:11.5px}
.theme-preview-panel .admin-theme-price{font-size:18px}
.theme-option-panel{scroll-margin-top:245px}
}
@media(max-width:560px){
.theme-admin-body .admin-main{padding-top:70px!important}
.theme-preview-dock{top:64px;margin-top:0;padding-top:4px;padding-bottom:6px}
.theme-preview-panel{padding:9px 10px}
.theme-preview-heading{margin-bottom:6px}
.theme-preview-heading h2{font-size:14px}
.theme-preview-status{padding:3px 6px;font-size:8.5px}
.theme-preview-panel .admin-theme-preview{gap:7px}
.theme-preview-panel .admin-theme-banner{height:62px;min-height:62px;padding:8px}
.theme-preview-panel .admin-theme-banner span{font-size:15px}
.theme-preview-panel .admin-theme-controls{min-width:91px;padding:5px;gap:3px}
.theme-preview-panel .admin-theme-cta{padding:7px 9px;font-size:10px;border-radius:8px}
.theme-preview-panel .admin-theme-price{font-size:16px}
.theme-editor-tabs{gap:4px;margin-top:6px;padding:5px}
.theme-editor-tabs button{min-height:39px;padding:6px 4px;font-size:10px}
.theme-option-panel{padding:15px;scroll-margin-top:210px}
.theme-option-panel h2{font-size:15px}
.theme-option-panel .admin-section-hint{font-size:11.5px}
.theme-config-column .admin-swatch-strip{max-height:none;grid-template-columns:repeat(3,minmax(0,1fr));overflow:visible;padding-right:2px}
.theme-config-column .admin-swatch-strip.admin-color-strip{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media(max-width:360px){
.theme-preview-panel .admin-theme-controls{min-width:82px}
.theme-editor-tabs button{font-size:9.5px}
.theme-config-column .admin-swatch-strip,.theme-config-column .admin-swatch-strip.admin-color-strip{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-height:500px) and (max-width:900px){
.theme-preview-status{display:none}
.theme-preview-panel .admin-theme-banner{height:48px;min-height:48px}
.theme-editor-tabs button{min-height:34px}
}
/* ===== QR card action buttons: aligned 2x2 grid (4 actions no longer squeeze/wrap unevenly) ===== */
.admin-qr-card-actions{
display:grid!important;
grid-template-columns:1fr 1fr;
gap:8px;
width:100%;
}
.admin-qr-card-actions button,.admin-qr-card-actions a{
flex:none;
width:100%;
box-sizing:border-box;
min-height:38px;
display:flex;align-items:center;justify-content:center;
padding:8px 6px;
line-height:1.2;
}
/* ===== Bill / Invoice generator — shared by storefront + admin orders ===== */
.bill-modal{position:fixed;inset:0;z-index:6000;display:none;place-items:center;padding:20px;background:rgba(22,18,15,.55);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.bill-modal.open{display:grid}
.bill-modal-inner{width:min(460px,100%);max-height:92vh;overflow:hidden;background:#f4ede2;border-radius:20px;padding:0;position:relative;box-shadow:0 30px 90px rgba(0,0,0,.35)}
.bill-modal-scroll{max-height:92vh;overflow:auto;padding:18px}
.bill-modal-close{position:absolute;right:12px;top:12px;width:34px;height:34px;border:0;border-radius:50%;background:#16120f;color:#fff;font-size:20px;line-height:1;cursor:pointer;z-index:2}
.bill-card{background:#fff;border-radius:16px;padding:22px 20px;box-shadow:0 10px 30px rgba(0,0,0,.1);font-size:13.5px;color:#16120f}
.bill-head{display:flex;align-items:flex-start;gap:12px;border-bottom:2px dashed rgba(22,18,15,.14);padding-bottom:14px;margin-bottom:14px}
.bill-logo{width:52px;height:52px;border-radius:12px;object-fit:cover;flex:0 0 auto}
.bill-logo-fallback{width:52px;height:52px;border-radius:12px;background:linear-gradient(135deg,var(--orange,#ff5a00),var(--red,#d81f2a));color:#fff;display:grid;place-items:center;font-weight:900;font-size:22px;flex:0 0 auto}
.bill-head-text{flex:1 1 auto;min-width:0}
.bill-head-text h2{margin:0 0 3px;font-size:18px;line-height:1.2;font-weight:900}
.bill-head-text p{margin:0;font-size:11.5px;color:rgba(22,18,15,.6);line-height:1.4}
.bill-head-tag{flex:0 0 auto;font-size:10px;font-weight:900;text-transform:uppercase;letter-spacing:.06em;color:rgba(22,18,15,.5);border:1px solid rgba(22,18,15,.18);border-radius:999px;padding:5px 10px;white-space:nowrap}
.bill-meta{display:grid;grid-template-columns:1fr 1fr;gap:9px 14px;margin-bottom:14px}
.bill-meta div{display:flex;flex-direction:column;gap:2px}
.bill-meta span{font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.05em;color:rgba(22,18,15,.5)}
.bill-meta b{font-size:12.5px;font-weight:800}
.bill-items{width:100%;border-collapse:collapse;margin-bottom:14px}
.bill-items thead th{text-align:left;font-size:10.5px;font-weight:900;text-transform:uppercase;letter-spacing:.05em;color:rgba(22,18,15,.5);border-bottom:1px solid rgba(22,18,15,.14);padding:0 0 8px}
.bill-items td{padding:7px 0;border-bottom:1px solid rgba(22,18,15,.06);font-size:12.5px}
.bill-items th.num,.bill-items td.num{text-align:right}
.bill-empty{text-align:center;color:rgba(22,18,15,.5);padding:14px 0!important}
.bill-totals{border-top:2px dashed rgba(22,18,15,.14);padding-top:12px;margin-bottom:16px}
.bill-total-line{display:flex;justify-content:space-between;gap:10px;padding:4px 0;font-size:12.5px;color:rgba(22,18,15,.7)}
.bill-total-line b{color:#16120f;font-weight:800}
.bill-total-line.grand{border-top:1px solid rgba(22,18,15,.14);margin-top:6px;padding-top:8px;font-size:15px}
.bill-item-status{display:inline-block;border-radius:999px;padding:2px 7px;font-size:10px;font-weight:800}
.bill-item-status.paid{background:#e7faef;color:#177a45}
.bill-item-status.pending{background:#fff0f0;color:#b32121}
.bill-total-line.grand span,.bill-total-line.grand b{color:#16120f;font-weight:900}
.bill-foot{text-align:center;border-top:2px dashed rgba(22,18,15,.14);padding-top:14px}
.bill-foot>p{margin:0 0 12px;font-size:12px;color:rgba(22,18,15,.6)}
.bill-prowider{display:inline-flex;align-items:center;gap:8px;background:rgba(22,18,15,.04);border-radius:999px;padding:8px 14px}
.bill-prowider img{width:22px;height:22px;object-fit:contain;border-radius:5px}
.bill-prowider span{font-size:11px;color:rgba(22,18,15,.6)}
.bill-prowider b{color:#16120f}
.bill-modal-actions{display:grid;grid-template-columns:1fr;gap:10px;margin-top:16px}
.bill-modal-actions:has(#billPayNowBtn:not([hidden])){grid-template-columns:1fr 1fr}
.bill-download-btn{width:100%;box-sizing:border-box;border:0;border-radius:12px;padding:13px 10px;font-weight:900;font-size:13px;cursor:pointer;color:#fff;background:#16120f}
.bill-pay-now-btn{width:100%;box-sizing:border-box;border:0;border-radius:12px;padding:13px 10px;font-weight:900;font-size:13px;cursor:pointer;color:#fff;background:var(--green,#1e8f4f)}
.bill-pay-box{margin-top:10px}
.bill-btn{display:inline-flex;align-items:center;gap:6px}
@media print{
/* The shared "body>*:not(#qrPrintArea):not(#billModal)" rule (near .qr-print-card above)
already exempts #billModal from the global print hide — don't add a second
"body>*:not(...)" rule here, it would just re-introduce the same cascade conflict. */
.bill-modal{position:static!important;background:none!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important;padding:0!important;display:block!important}
.bill-modal-inner{max-height:none;overflow:visible;box-shadow:none;background:#fff;width:100%}
.bill-modal-scroll{max-height:none;overflow:visible;padding:0}
.bill-modal-close,.bill-modal-actions{display:none!important}
.bill-card{box-shadow:none}
}
@media(max-width:480px){.bill-meta{grid-template-columns:1fr}}
/* ---------- Settings page: "where does this show up" storefront guide ---------- */
.sf-guide-mount{margin:2px 0 16px}
.sf-guide-note{display:flex;align-items:center;gap:8px;background:rgba(22,18,15,.04);border:1px solid var(--a-border,rgba(22,18,15,.1));border-radius:10px;padding:10px 14px;font-size:12.5px;color:var(--a-muted,rgba(22,18,15,.65));margin:2px 0 16px}
.sf-guide-note b{color:inherit;font-weight:800}
.sf-guide{margin:0;width:min(220px,100%);border:1px solid rgba(22,18,15,.12);border-radius:14px;padding:8px;background:#fff}
.sf-guide-frame{border-radius:9px;overflow:hidden;background:#fdf8f2;box-shadow:inset 0 0 0 1px rgba(22,18,15,.06)}
.sfg-header{position:relative;padding:8px;background:#fdf8f2;display:flex;align-items:center;gap:6px;transition:box-shadow .15s}
.sfg-logo{width:16px;height:16px;min-width:16px;border-radius:50%;background:#8d1b25;display:block;transition:box-shadow .15s}
.sfg-title{display:flex;flex-direction:column;gap:3px;transition:box-shadow .15s}
.sfg-title{flex:1;min-width:0}
.sfg-title i{display:block;height:4px;border-radius:2px;background:rgba(22,18,15,.6)}
.sfg-title i:first-child{width:58%}
.sfg-title i:last-child{width:38%;background:rgba(22,18,15,.3)}
.sfg-ticker{height:7px;background:repeating-linear-gradient(90deg,#ffcf9e 0 8px,#fff2e2 8px 16px)}
.sfg-banner{padding:0 8px 6px;display:flex;justify-content:center;transition:box-shadow .15s}
.sfg-banner i{display:block;width:78%;height:22px;border-radius:5px;background:linear-gradient(135deg,#ffb27a,#ff5a00);box-shadow:0 0 0 3px #fdf8f2,3px 0 0 3px rgba(22,18,15,.12),-3px 0 0 3px rgba(22,18,15,.12)}
.sfg-chips{display:flex;gap:4px;padding:5px 8px}
.sfg-chips i{display:block;width:20px;height:8px;border-radius:4px;background:rgba(22,18,15,.14)}
.sfg-cards{display:flex;gap:5px;padding:0 8px 6px}
.sfg-cards i{display:block;flex:1;height:26px;border-radius:6px;background:rgba(22,18,15,.07)}
.sfg-footer{padding:8px;display:flex;flex-direction:column;gap:5px;background:#16120f;transition:box-shadow .15s}
.sfg-footer-tag,.sfg-footer-address{display:block;height:4px;border-radius:2px;background:rgba(255,255,255,.3);transition:box-shadow .15s}
.sfg-footer-tag{width:70%}
.sfg-footer-address{width:85%;background:rgba(255,255,255,.2)}
.sf-guide figcaption{margin-top:8px;font-size:11px;line-height:1.4;color:var(--a-muted,rgba(22,18,15,.6))}
.sf-guide[data-zones~="logo"] .sfg-logo{box-shadow:0 0 0 3px var(--orange),0 0 10px 2px rgba(255,90,0,.5)}
.sf-guide[data-zones~="banner"] .sfg-header{box-shadow:inset 0 0 0 3px var(--orange)}
.sf-guide[data-zones~="offers"] .sfg-banner i{box-shadow:0 0 0 3px var(--orange)}
.sf-guide[data-zones~="identity"] .sfg-title{box-shadow:0 0 0 3px var(--orange);border-radius:4px}
.sf-guide[data-zones~="labels"] .sfg-footer-tag{box-shadow:0 0 0 3px var(--orange)}
.sf-guide[data-zones~="ticker"] .sfg-ticker{box-shadow:0 0 0 3px var(--orange)}
.sf-guide[data-zones~="address"] .sfg-footer-address{box-shadow:0 0 0 3px var(--orange)}
.sf-guide[data-zones~="gst"] .sfg-footer-address{box-shadow:0 0 0 3px var(--orange)}
/* ---------- Reusable hide/show switch (replaces Visible/Hidden dropdowns) ---------- */
.admin-switch-row{display:flex;align-items:center;justify-content:space-between;gap:12px}
.admin-switch{position:relative;display:inline-block;width:42px;height:24px;flex:0 0 42px}
.admin-switch input{opacity:0;width:0;height:0;position:absolute}
.admin-switch-track{position:absolute;inset:0;background:rgba(22,18,15,.18);border-radius:999px;cursor:pointer;transition:background .15s}
.admin-switch-track::before{content:'';position:absolute;left:3px;top:3px;width:18px;height:18px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.25);transition:transform .15s}
.admin-switch input:checked+.admin-switch-track{background:var(--orange,#ff5a00)}
.admin-switch input:checked+.admin-switch-track::before{transform:translateX(18px)}
.admin-switch-label{font-size:12px;font-weight:700;color:var(--a-muted,rgba(22,18,15,.6));white-space:nowrap}
.admin-settings-divider{display:flex;align-items:baseline;gap:10px;margin:28px 0 4px;padding-top:14px;border-top:1px solid var(--a-border,rgba(22,18,15,.12))}
.admin-settings-divider span{font-size:13px;font-weight:900;text-transform:uppercase;letter-spacing:.04em;color:var(--a-muted,rgba(22,18,15,.55))}
.admin-settings-divider small{font-size:11.5px;color:var(--a-muted,rgba(22,18,15,.4))}
/* ---------- Banner shrinks when the rating/price/veg badge row is hidden ---------- */
/* ---------- QR Analytics page ---------- */
.qra-kpi-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:14px;margin-bottom:18px}
.qra-kpi-tile{
border:1px solid var(--a-border);border-radius:12px;padding:18px;background:var(--a-card);
display:flex;flex-direction:column;gap:8px;min-width:0;
}
.qra-kpi-label{font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.04em;color:var(--a-muted)}
.qra-kpi-value{font-size:26px;font-weight:800;line-height:1.1;color:var(--a-text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.qra-trend-chart{display:flex;align-items:flex-end;gap:7px;height:170px;padding:8px 2px 0;overflow-x:auto}
.qra-trend-col{display:flex;flex-direction:column;align-items:center;gap:6px;flex:1 0 28px;min-width:28px;height:100%}
.qra-trend-bar-wrap{flex:1;display:flex;align-items:flex-end;width:100%}
.qra-trend-bar{
width:100%;border-radius:7px 7px 3px 3px;min-height:4px;
background:var(--a-text);
transition:height .4s ease;
}
.qra-trend-col small{font-size:10px;color:var(--a-muted);white-space:nowrap;font-weight:700}
.qra-table-bars{display:flex;flex-direction:column;gap:10px}
.qra-table-row{display:flex;flex-direction:column;gap:7px;border:1px solid var(--a-border);border-radius:10px;background:#fff;padding:12px}
.qra-table-row-head{display:flex;justify-content:space-between;align-items:baseline;gap:10px;flex-wrap:wrap}
.qra-table-row-head b{font-size:14px;color:var(--a-text)}
.qra-table-row-head span{font-size:12px;color:var(--a-muted);white-space:normal;text-align:right}
.qra-table-bar-track{height:10px;border-radius:999px;background:var(--a-bg);overflow:hidden}
.qra-table-bar-fill{
height:100%;border-radius:999px;
background:var(--a-text);
transition:width .5s ease;
}
@media(max-width:640px){
.qra-kpi-value{font-size:21px}
.qra-trend-chart{height:150px}
}
@media(max-width:560px){
.admin-range-bar{gap:8px;margin:6px 0 10px}
.admin-range-tabs{width:auto!important;max-width:100%}
.admin-range-tabs .admin-range-select{width:auto!important;min-width:176px;height:38px;font-size:12px;padding-left:11px}
.admin-custom-range{width:100%;grid-template-columns:minmax(0,1fr) minmax(0,1fr) 66px!important;gap:6px}
.admin-custom-range input{height:38px;min-width:0;padding:0 7px;font-size:11.5px}
.admin-custom-range button{min-width:0;min-height:38px;padding:7px!important;font-size:11.5px!important}
.settings-admin-body .sf-guide-mount{margin-bottom:10px}
.settings-admin-body .sf-guide{display:grid;grid-template-columns:112px minmax(0,1fr);align-items:center;gap:9px;width:100%;box-sizing:border-box}
.settings-admin-body .sf-guide figcaption{min-width:0;margin:0;font-size:10.5px;line-height:1.35}
.settings-admin-body .admin-media-row{display:grid;grid-template-columns:auto minmax(0,1fr);gap:10px;align-items:center}
.settings-admin-body .admin-media-controls{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px;min-width:0}
.settings-admin-body .admin-media-controls>*{min-width:0;width:100%;padding-left:7px;padding-right:7px;font-size:11px}
.settings-admin-body .admin-settings-form{grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}
.settings-admin-body .admin-settings-form .full{grid-column:1/-1}
.settings-admin-body .admin-form-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}
.settings-admin-body .admin-form-grid .full{grid-column:1/-1}
.settings-brand-panel{display:grid;grid-template-columns:104px minmax(0,1fr);gap:0 8px;align-items:start}
.settings-brand-panel>h2,.settings-brand-panel>.admin-section-hint,.settings-brand-panel>.admin-hint{grid-column:1/-1}
.settings-brand-panel>.sf-guide-mount{grid-column:1;margin:0}
.settings-brand-panel>.sf-guide-mount .sf-guide{display:block;width:100%;padding:6px}
.settings-brand-panel>.sf-guide-mount .sf-guide figcaption{margin-top:6px;font-size:9.5px}
.settings-brand-panel>.admin-media-row{grid-column:2;grid-template-columns:68px minmax(0,1fr);gap:7px}
.settings-brand-panel .admin-media-preview{width:68px;height:68px}
.settings-brand-panel .admin-media-wide{width:68px}
.settings-brand-panel .admin-media-controls{grid-template-columns:1fr}
.settings-brand-panel .admin-media-controls>*{min-height:32px;padding-top:6px;padding-bottom:6px;font-size:10px}
}
@media(min-width:641px) and (max-width:900px){
.settings-admin-body .admin-panels-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
/* ---------- Out-of-stock dishes (storefront + admin menu card tag) ---------- */
.menu-item-oos{opacity:.55;filter:grayscale(.7)}
.menu-item-oos .item-img{filter:grayscale(1)}
.oos-label{background:#fdecec!important;color:#b32121!important}
.menu-oos-tag{color:#b32121!important;font-weight:800}
/* ---------- Variant / add-on chooser sheet ---------- */
.variant-group-label{margin:14px 0 8px;font-size:12px;font-weight:1000;text-transform:uppercase;letter-spacing:.04em;color:rgba(22,18,15,.62)}
.variant-options{display:grid;gap:8px}
.variant-option{
display:flex;align-items:center;gap:10px;background:rgba(255,255,255,.6);
border:1px solid rgba(255,255,255,.7);border-radius:16px;padding:12px 14px;
font-weight:800;color:var(--ink);cursor:pointer;
}
.variant-option input{width:18px;height:18px;accent-color:var(--orange,#ff5a00);flex:0 0 auto}
.variant-option span{flex:1 1 auto;min-width:0}
.variant-option b{white-space:nowrap}
.variant-addon-row{cursor:default}
.variant-addon-row b{margin-left:auto}
.variant-addon-qty{position:static!important;transform:none!important;box-shadow:none!important;background:rgba(22,18,15,.06)!important;padding:4px!important;margin-left:10px}
.variant-addon-qty button{width:26px;height:26px}
.variant-addon-qty span{min-width:16px;text-align:center;font-weight:900}
#variantAddBtn{margin-top:16px}
/* Small "+ Add-ons" button next to the cooking-instructions label in the cart —
browses every add-on across the whole menu in one list, so a customer can grab one
on its own without opening a specific dish first. */
.instructions-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:8px}
.instructions-head label{margin:0!important}
.addons-browse-btn{border:1px solid var(--line);background:#fff;border-radius:999px;padding:6px 12px;font-size:11.5px;font-weight:900;color:var(--ink);cursor:pointer;white-space:nowrap}
.addons-browse-btn:hover{background:rgba(22,18,15,.04)}
.addon-parent-name{display:block;font-size:11px;font-weight:700;color:rgba(22,18,15,.5);margin-top:2px}
.upi-pay-title{margin:0;font-weight:900;color:var(--ink)}
.upi-pay-btn{width:100%;margin-top:0!important}
.upi-qr-wrap{display:flex;flex-direction:column;align-items:center;gap:6px;margin-top:16px}
.upi-confirm-card{margin-top:16px;background:rgba(22,18,15,.03);border:1px solid rgba(22,18,15,.1);border-radius:16px;padding:14px;text-align:center}
.upi-confirm-card.dismissed{display:none}
.upi-confirm-q{margin:0 0 10px;font-weight:900;color:var(--ink);font-size:14px}
.upi-confirm-actions{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.upi-confirm-btn{border:0;border-radius:12px;padding:11px 10px;font-weight:900;font-size:13px;cursor:pointer}
.upi-confirm-btn:disabled{opacity:.6;cursor:default}
.upi-confirm-yes{background:var(--green,#1e8f4f);color:#fff}
.upi-confirm-no{background:#fff;border:1px solid rgba(22,18,15,.18);color:var(--ink)}
.upi-qr-wrap img{border-radius:14px;border:1px solid rgba(22,18,15,.12);background:#fff}
.upi-qr-wrap small{font-size:11.5px;color:rgba(22,18,15,.55);font-weight:700}
.upi-claim-msg{display:block;font-size:12px;font-weight:800;color:var(--green,#1e8f4f);min-height:14px;margin-top:8px}
/* ---------- "Customer says paid" badge on admin order cards ---------- */
.admin-badge.upi-claimed{background:#fff7e6;color:#9a6a00;border-color:#f0d9a6}
/* modal-link is inline-flex, which eats the whitespace text-nodes around the amount */
.upi-pay-btn b{margin:0 5px}
/* Customer language picker: shared by welcome, storefront, tracking and feedback. */
.i18n-control{position:relative;z-index:6990}
.i18n-fab{position:fixed;right:18px;bottom:64px;z-index:6990;min-width:54px;max-width:148px;height:50px;border:1px solid rgba(22,18,15,.13);border-radius:999px;background:rgba(255,255,255,.96);color:var(--ink,#16120f);box-shadow:0 12px 36px rgba(22,18,15,.2);display:flex;align-items:center;justify-content:center;gap:7px;padding:0 14px;cursor:pointer;-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}
.i18n-fab span{font-size:20px;line-height:1}.i18n-fab b{font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.welcome-body .i18n-fab,.page-shell~.i18n-control .i18n-fab{bottom:18px}
.i18n-backdrop{position:fixed;inset:0;z-index:7000;background:rgba(22,18,15,.52);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}
.i18n-sheet{position:fixed;left:50%;bottom:0;z-index:7010;width:min(600px,100%);max-height:min(82dvh,760px);transform:translateX(-50%);background:#fffaf3;color:var(--ink,#16120f);border-radius:28px 28px 0 0;box-shadow:0 -24px 80px rgba(22,18,15,.22);padding:10px 18px max(18px,env(safe-area-inset-bottom));overflow:hidden}
.i18n-sheet-handle{width:42px;height:5px;border-radius:99px;background:rgba(22,18,15,.17);margin:0 auto 10px}
.i18n-sheet header{display:flex;align-items:flex-start;justify-content:space-between;gap:18px;margin-bottom:14px}.i18n-sheet header small{display:block;color:var(--muted,#6d625a);font-size:11px;font-weight:900;text-transform:uppercase;letter-spacing:.08em}.i18n-sheet h2{font-family:'Archivo Black',Inter,sans-serif;font-size:30px;line-height:1;margin:4px 0 0;letter-spacing:-.04em;text-transform:uppercase}
.i18n-close{width:44px;height:44px;min-width:44px;border:0;border-radius:50%;background:var(--ink,#16120f);color:#fff;font-size:25px;display:grid;place-items:center;cursor:pointer}
.i18n-search{height:48px;border:1px solid rgba(22,18,15,.13);border-radius:16px;background:#fff;display:flex;align-items:center;gap:9px;padding:0 14px;margin-bottom:12px}.i18n-search span{font-size:23px;color:var(--muted,#6d625a)}.i18n-search input{min-width:0;flex:1;border:0!important;outline:0!important;background:transparent!important;padding:0!important;font:inherit;color:inherit;box-shadow:none!important}
.i18n-language-list{max-height:calc(min(82dvh,760px) - 160px);overflow-y:auto;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;padding:1px 1px 6px;overscroll-behavior:contain}
.i18n-language-option{min-width:0;min-height:62px;border:1px solid rgba(22,18,15,.11);border-radius:16px;background:#fff;color:inherit;padding:10px 12px;display:flex;align-items:center;justify-content:space-between;gap:8px;text-align:start;cursor:pointer}.i18n-language-option span{min-width:0}.i18n-language-option b,.i18n-language-option small{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.i18n-language-option b{font-size:15px}.i18n-language-option small{color:var(--muted,#6d625a);font-size:11px;margin-top:3px}.i18n-language-option i{display:none;width:24px;height:24px;min-width:24px;border-radius:50%;background:var(--ink,#16120f);color:#fff;font-style:normal;place-items:center}.i18n-language-option.active{border-color:var(--ink,#16120f);box-shadow:inset 0 0 0 1px var(--ink,#16120f)}.i18n-language-option.active i{display:grid}.i18n-empty{text-align:center;color:var(--muted,#6d625a);padding:24px 8px}
.i18n-open{overflow:hidden}.i18n-rtl .i18n-language-option,.i18n-rtl .i18n-sheet{text-align:right}.i18n-rtl input[type="tel"],.i18n-rtl input[inputmode="numeric"],.i18n-rtl .price,.i18n-rtl [id$="Total"]{direction:ltr;text-align:left}
body[data-page="home"] .i18n-control{display:none!important}
body:has(.cart-drawer.open) .i18n-fab,body:has(.feedback-sheet.open) .i18n-fab,body:has(.modal.open) .i18n-fab{opacity:0;pointer-events:none}
/* Editable tenant hostname on Admin -> Domains. */
.admin-input-suffix{display:flex;align-items:stretch;width:100%;border:1px solid var(--a-border);border-radius:12px;background:var(--a-card);overflow:hidden}
.admin-input-suffix input{min-width:0;flex:1;border:0!important;border-radius:0!important;box-shadow:none!important}
.admin-input-suffix b{display:flex;align-items:center;padding:0 14px;border-left:1px solid var(--a-border);background:var(--a-bg);color:var(--a-muted);font-size:13px;white-space:nowrap}
@media(max-width:520px){.admin-input-suffix b{padding:0 9px;font-size:11px}}
@media(max-width:560px){.i18n-fab{right:12px;bottom:52px;height:46px;max-width:122px;padding:0 12px}.welcome-body .i18n-fab,.page-shell~.i18n-control .i18n-fab{bottom:12px}.i18n-sheet{padding-left:14px;padding-right:14px;border-radius:24px 24px 0 0}.i18n-language-list{grid-template-columns:1fr}.i18n-language-option{min-height:56px}.i18n-sheet h2{font-size:26px}}
@media(prefers-reduced-motion:reduce){.i18n-fab,.i18n-sheet,.i18n-backdrop{transition:none!important}}
@media print{.i18n-control{display:none!important}}
/* Tracking ETA and gratuity use the storefront's warm glass-card language. */
.eta-card{margin-top:14px;border:1px solid rgba(255,255,255,.7);border-radius:22px;padding:15px;background:linear-gradient(135deg,rgba(22,18,15,.92),rgba(59,39,25,.88));color:#fff;box-shadow:0 16px 34px rgba(42,22,8,.16)}
.eta-card-head{display:flex;align-items:flex-start;justify-content:space-between;gap:14px}
.eta-card h2{margin:0;font-size:14px;font-weight:900;letter-spacing:.01em}.eta-card p{margin:4px 0 0;color:rgba(255,255,255,.68);font-size:11.5px;line-height:1.4}
.eta-clock{flex:0 0 auto;color:#fff;font-size:24px;font-weight:900;letter-spacing:-.03em;white-space:nowrap}
.eta-progress{height:7px;margin-top:13px;border-radius:999px;background:rgba(255,255,255,.16);overflow:hidden}.eta-progress i{display:block;width:0;height:100%;border-radius:inherit;background:linear-gradient(90deg,var(--orange,#ff5a00),#ffb020);transition:width .35s ease}
@media(max-width:620px){.tip-card{padding:16px;border-radius:24px}.eta-clock{font-size:21px}}
@media(max-width:360px){.tip-custom{grid-template-columns:1fr}.eta-card-head{display:block}.eta-clock{display:block;margin-top:8px}}
@media(prefers-reduced-motion:reduce){.eta-progress i{transition:none}}
/* Storefront navigation refresh: top offer strip + compact four-destination dock. */
body[data-page="home"],
body[data-page="tracking"],
body[data-page="feedback"],
body[data-page="profile"]{
padding-bottom:calc(104px + env(safe-area-inset-bottom))!important;
}
body[data-page="home"] .storefront-top-ticker{
top:0!important;
bottom:auto!important;
height:42px!important;
padding-top:env(safe-area-inset-top);
z-index:5200!important;
border-top:0!important;
border-bottom:1px solid rgba(255,255,255,.16)!important;
box-shadow:0 12px 36px rgba(22,18,15,.18)!important;
}
body[data-page="home"] .topbar{
top:calc(50px + env(safe-area-inset-top))!important;
}
body[data-page="home"] .cover{
padding-top:calc(124px + env(safe-area-inset-top))!important;
}
.favorite-button,
.profile-header-action{
position:relative;
width:54px!important;
height:54px!important;
min-width:54px!important;
padding:0!important;
}
.favorite-button svg,
.profile-header-action svg{
width:24px;
height:24px;
}
.favorite-button.is-active{
color:#ff4b55!important;
background:rgba(255,255,255,.94)!important;
}
.favorite-button.is-active svg path{
fill:currentColor;
}
.favorite-button.has-favorites::after{
content:attr(data-count);
position:absolute;
top:-3px;
right:-3px;
min-width:19px;
height:19px;
padding:0 4px;
display:grid;
place-items:center;
border:2px solid #fff;
border-radius:999px;
background:#e42b42;
color:#fff;
font-size:9px;
line-height:1;
font-weight:900;
box-shadow:0 5px 12px rgba(216,31,42,.28);
}
.store-bottom-nav{
position:fixed;
left:50%;
bottom:max(8px,env(safe-area-inset-bottom));
transform:translateX(-50%);
z-index:6000;
width:min(470px,calc(100% - 24px));
min-height:70px;
display:grid;
grid-template-columns:repeat(4,minmax(0,1fr));
gap:5px;
padding:6px;
border:1px solid rgba(255,255,255,.72);
border-radius:27px;
background:rgba(255,255,255,.82);
-webkit-backdrop-filter:blur(24px) saturate(1.55);
backdrop-filter:blur(24px) saturate(1.55);
box-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 18px 54px rgba(22,18,15,.2);
transition:opacity .16s ease,transform .16s ease;
}
.store-bottom-nav .store-nav-item{
position:relative;
min-width:0;
min-height:56px;
display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
gap:3px;
border-radius:21px;
color:rgba(22,18,15,.62);
font-size:10px;
line-height:1;
font-weight:900;
transition:background-color .16s ease,color .16s ease,transform .16s ease;
}
.store-nav-item.has-status::after{
content:"";
position:absolute;
top:8px;
right:calc(50% - 17px);
width:7px;
height:7px;
border:2px solid rgba(255,255,255,.94);
border-radius:50%;
background:#ffb020;
box-shadow:0 3px 9px rgba(22,18,15,.22);
}
.store-nav-item.status-preparing::after{background:#ff9f1c}
.store-nav-item.status-ready::after{background:#23b26a}
.store-nav-item.status-serving::after{background:#2f9fed}
.store-nav-item svg{
width:22px;
height:22px;
flex:0 0 22px;
}
.store-nav-item.is-active{
color:#fff;
background:linear-gradient(135deg,rgba(22,18,15,.94),rgba(55,39,29,.88));
box-shadow:inset 0 1px 0 rgba(255,255,255,.16),0 8px 22px rgba(22,18,15,.2);
}
.store-nav-item:active{
transform:scale(.96);
}
body.cart-open .store-bottom-nav,
body:has(.feedback-sheet.open) .store-bottom-nav,
body:has(.modal.open) .store-bottom-nav{
opacity:0;
pointer-events:none;
}
.floating-cart-row{
bottom:calc(88px + env(safe-area-inset-bottom))!important;
z-index:6100!important;
}
.professional-footer{
padding-bottom:96px!important;
}
.page-main{
padding-bottom:98px!important;
}
.customer-profile-card{
width:min(620px,100%);
margin:0 auto;
display:grid;
grid-template-columns:72px minmax(0,1fr);
gap:16px;
align-items:center;
padding:20px;
border:1px solid rgba(255,255,255,.68);
border-radius:28px;
background:rgba(255,255,255,.58);
-webkit-backdrop-filter:blur(24px) saturate(1.5);
backdrop-filter:blur(24px) saturate(1.5);
box-shadow:inset 0 1px 0 rgba(255,255,255,.78),0 18px 50px rgba(42,22,8,.12);
}
.profile-avatar{
width:72px;
height:72px;
display:grid;
place-items:center;
border-radius:24px;
background:linear-gradient(135deg,var(--orange),var(--red));
color:#fff;
font-family:'Archivo Black',Inter,sans-serif;
font-size:30px;
box-shadow:0 12px 28px rgba(216,31,42,.22);
}
.profile-primary{
min-width:0;
}
.profile-primary small,
.profile-facts dt{
color:var(--muted);
font-size:10px;
line-height:1;
font-weight:900;
text-transform:uppercase;
letter-spacing:.07em;
}
.profile-primary h2{
margin:5px 0 4px;
font-size:25px;
line-height:1.1;
overflow-wrap:anywhere;
}
.profile-primary p{
margin:0;
color:var(--muted);
font-size:12px;
line-height:1.45;
}
.profile-facts{
grid-column:1/-1;
display:grid;
grid-template-columns:1fr 1fr;
gap:9px;
margin:2px 0 0;
}
.profile-facts div{
min-width:0;
padding:13px;
border:1px solid rgba(22,18,15,.08);
border-radius:16px;
background:rgba(255,255,255,.62);
}
.profile-facts dd{
margin:6px 0 0;
font-size:14px;
font-weight:900;
overflow-wrap:anywhere;
}
.profile-actions{
grid-column:1/-1;
display:grid;
grid-template-columns:1fr 1fr;
gap:9px;
}
.profile-actions a{
min-height:46px;
display:flex;
align-items:center;
justify-content:center;
border:1px solid rgba(22,18,15,.12);
border-radius:15px;
background:rgba(255,255,255,.72);
color:var(--ink);
font-size:13px;
font-weight:900;
}
.profile-actions .profile-action-primary{
border-color:var(--ink);
background:var(--ink);
color:#fff;
}
@media(max-width:720px){
body[data-page="home"] .storefront-top-ticker{
height:38px!important;
}
body[data-page="home"] .topbar{
top:calc(46px + env(safe-area-inset-top))!important;
}
body[data-page="home"] .cover{
padding-top:calc(112px + env(safe-area-inset-top))!important;
}
.favorite-button,
.profile-header-action{
width:48px!important;
height:48px!important;
min-width:48px!important;
}
.store-bottom-nav{
width:calc(100% - 20px);
min-height:66px;
border-radius:25px;
padding:5px;
}
.store-nav-item{
min-height:54px;
border-radius:20px;
font-size:9.5px;
}
.store-nav-item svg{
width:21px;
height:21px;
}
.floating-cart-row{
width:calc(100% - 20px)!important;
bottom:calc(82px + env(safe-area-inset-bottom))!important;
}
.professional-footer{
padding-bottom:88px!important;
}
.page-main{
padding-bottom:90px!important;
}
}
@media(max-width:380px){
.store-bottom-nav{
width:calc(100% - 14px);
gap:2px;
padding:4px;
}
.store-nav-item{
min-height:52px;
}
.store-nav-item span{
font-size:9px;
}
.floating-cart-row{
grid-template-columns:minmax(0,1fr) 62px!important;
}
.floating-clear{
padding:0 7px!important;
font-size:11px!important;
}
.customer-profile-card{
grid-template-columns:58px minmax(0,1fr);
gap:12px;
padding:15px;
border-radius:23px;
}
.profile-avatar{
width:58px;
height:58px;
border-radius:19px;
font-size:25px;
}
.profile-primary h2{
font-size:21px;
}
}
@media(prefers-reduced-motion:reduce){
.store-nav-item{transition:none}
.ticker-track{animation:none!important}
}
@media print{
.store-bottom-nav,.storefront-top-ticker{display:none!important}
}
/* Favourites and the simplified one-tap dish action. */
.dish-favorite-button{
position:absolute;
top:8px;
right:8px;
z-index:3;
width:34px;
height:34px;
padding:0;
display:grid;
place-items:center;
border:1px solid rgba(255,255,255,.78);
border-radius:50%;
background:rgba(255,255,255,.86);
color:rgba(22,18,15,.72);
-webkit-backdrop-filter:blur(14px);
backdrop-filter:blur(14px);
box-shadow:0 8px 22px rgba(22,18,15,.18);
}
.dish-favorite-button svg{
width:18px;
height:18px;
}
.dish-favorite-button.is-favorite{
color:#e42b42;
background:#fff;
}
.dish-favorite-button:not(.is-favorite) svg path{
fill:none;
}
.dish-favorite-button.is-favorite svg path{
fill:currentColor;
}
.menu-add-single{
width:38px;
height:38px;
min-width:38px;
padding:0;
display:grid;
place-items:center;
border:1px solid rgba(255,255,255,.2);
border-radius:50%;
background:var(--ink);
color:#fff;
font-size:23px;
line-height:1;
font-weight:800;
box-shadow:0 8px 22px rgba(22,18,15,.2);
}
.menu-add-single:active,
.dish-favorite-button:active{
transform:scale(.94);
}
.favorites-view{
display:none;
margin:2px 0 16px;
padding:16px;
border:1px solid rgba(255,255,255,.7);
border-radius:26px;
background:rgba(255,255,255,.54);
-webkit-backdrop-filter:blur(22px) saturate(1.4);
backdrop-filter:blur(22px) saturate(1.4);
box-shadow:inset 0 1px 0 rgba(255,255,255,.75),0 16px 44px rgba(42,22,8,.1);
}
body.favorites-view-open .favorites-view{
display:block;
}
body[data-page="home"] #categoryTabs[hidden],
body[data-page="home"] #serviceActions[hidden],
body[data-page="home"] #menuList[hidden],
body[data-page="home"] #favoritesView[hidden]{
display:none!important;
}
.favorites-view-head{
display:flex;
align-items:center;
justify-content:space-between;
gap:12px;
margin-bottom:13px;
}
.favorites-view-head h2{
margin:0;
font-family:'Archivo Black',Inter,sans-serif;
font-size:24px;
line-height:1;
letter-spacing:-.04em;
text-transform:uppercase;
}
.favorites-view-head button{
width:38px;
height:38px;
min-width:38px;
padding:0;
display:grid;
place-items:center;
border:0;
border-radius:50%;
background:var(--ink);
color:#fff;
font-size:21px;
}
.favorites-list{
display:grid;
grid-template-columns:repeat(2,minmax(0,1fr));
gap:12px;
padding-bottom:0!important;
}
.favorites-empty{
grid-column:1/-1;
margin:0;
padding:24px 14px;
border:1px dashed rgba(22,18,15,.18);
border-radius:18px;
color:var(--muted);
text-align:center;
font-size:13px;
line-height:1.5;
font-weight:700;
}
.favorites-empty svg{
width:38px;
height:38px;
margin:0 auto 8px;
display:block;
color:#e42b42;
}
.favorites-empty b,
.favorites-empty span{
display:block;
}
.favorites-empty b{
color:var(--ink);
font-size:15px;
}
.favorites-empty span{
max-width:280px;
margin:5px auto 0;
font-size:12px;
}
.favorites-empty button{
min-height:38px;
margin-top:12px;
padding:0 15px;
border:0;
border-radius:999px;
background:var(--ink);
color:#fff;
font-size:11px;
font-weight:900;
}
@media(min-width:860px){
.favorites-list{grid-template-columns:repeat(4,minmax(0,1fr))}
}
@media(max-width:380px){
.dish-favorite-button{width:32px;height:32px}
.menu-add-single{width:36px;height:36px;min-width:36px}
.favorites-view{padding:12px;border-radius:22px}
.favorites-list{gap:10px}
.favorites-view-head h2{font-size:21px}
}
/* Unified customer shell: the restaurant theme, offer strip and header never
change when moving between Menu, Favourites, Tracking, Feedback and Profile. */
body[data-page="home"] .i18n-control,
body[data-page="tracking"] .i18n-control,
body[data-page="feedback"] .i18n-control,
body[data-page="profile"] .i18n-control{
display:none!important;
}
body[data-page="home"] .storefront-top-ticker,
body[data-page="tracking"] .storefront-top-ticker,
body[data-page="feedback"] .storefront-top-ticker,
body[data-page="profile"] .storefront-top-ticker{
top:0!important;
bottom:auto!important;
height:42px!important;
padding-top:env(safe-area-inset-top);
z-index:5200!important;
border:0!important;
border-bottom:1px solid rgba(255,255,255,.18)!important;
background:linear-gradient(180deg,rgba(22,18,15,.94),rgba(22,18,15,.84))!important;
box-shadow:0 10px 28px rgba(22,18,15,.2)!important;
}
body[data-page="home"] .storefront-shared-header .topbar,
body[data-page="tracking"] .storefront-shared-header .topbar,
body[data-page="feedback"] .storefront-shared-header .topbar,
body[data-page="profile"] .storefront-shared-header .topbar{
top:calc(50px + env(safe-area-inset-top))!important;
}
.storefront-shared-header .cover{
min-height:390px!important;
padding-top:calc(124px + env(safe-area-inset-top))!important;
}
.storefront-shared-header .favorite-button,
.storefront-shared-header .circle,
.storefront-shared-header .table-chip{
box-shadow:
inset 0 2px 1px rgba(255,255,255,.68),
inset 0 -5px 10px rgba(22,18,15,.13),
0 3px 0 rgba(22,18,15,.22),
0 13px 28px rgba(22,18,15,.2)!important;
}
/* Four independent tactile controls—not a shared pill/bar. */
.store-bottom-nav{
width:min(470px,calc(100% - 22px))!important;
min-height:68px!important;
gap:10px!important;
padding:0!important;
border:0!important;
border-radius:0!important;
background:transparent!important;
-webkit-backdrop-filter:none!important;
backdrop-filter:none!important;
box-shadow:none!important;
}
.store-nav-item{
isolation:isolate;
min-height:64px!important;
overflow:hidden;
border:1px solid rgba(255,255,255,.92);
border-radius:22px!important;
background:linear-gradient(155deg,rgba(255,255,255,.98),rgba(242,235,226,.96));
color:rgba(22,18,15,.72);
box-shadow:
inset 0 2px 1px rgba(255,255,255,1),
inset 0 -7px 12px rgba(73,49,31,.1),
0 4px 0 rgba(119,96,79,.24),
0 13px 26px rgba(22,18,15,.18);
text-shadow:0 1px 0 #fff;
transform:translateY(0);
transition:transform .16s ease,box-shadow .16s ease,color .16s ease!important;
}
.store-bottom-nav .store-nav-item::before{
content:"";
position:absolute;
z-index:-1;
inset:3px 5px auto;
height:42%;
border-radius:17px 17px 45% 45%;
background:linear-gradient(180deg,rgba(255,255,255,.72),rgba(255,255,255,0));
pointer-events:none;
}
.store-nav-item.is-active{
color:#fff!important;
border-color:rgba(255,255,255,.22)!important;
background:linear-gradient(145deg,var(--orange),var(--red))!important;
box-shadow:
inset 0 2px 1px rgba(255,255,255,.38),
inset 0 -8px 13px rgba(70,0,0,.24),
0 4px 0 color-mix(in srgb,var(--red) 64%,#4f160f),
0 14px 28px color-mix(in srgb,var(--red) 28%,transparent)!important;
text-shadow:0 1px 2px rgba(0,0,0,.28);
}
.store-nav-item:active{
transform:translateY(3px)!important;
box-shadow:
inset 0 2px 5px rgba(22,18,15,.22),
0 1px 0 rgba(22,18,15,.25),
0 5px 12px rgba(22,18,15,.14)!important;
}
/* Tactile 3D treatment for storefront actions, including every dish add button. */
.menu-add-single,
.dish-favorite-button,
.category-tabs button,
.service-actions button,
.mini-search-btn,
.floating-cart,
.floating-clear,
.checkout,
.submit-feedback,
.profile-actions a,
.favorites-view-head button,
.favorites-empty button{
position:relative;
transform:translateY(0);
box-shadow:
inset 0 2px 1px rgba(255,255,255,.35),
inset 0 -5px 9px rgba(22,18,15,.2),
0 3px 0 rgba(22,18,15,.25),
0 10px 20px rgba(22,18,15,.17)!important;
transition:transform .15s ease,box-shadow .15s ease,filter .15s ease!important;
}
.menu-add-single{
border:1px solid rgba(255,255,255,.24)!important;
background:linear-gradient(145deg,var(--orange),var(--red))!important;
box-shadow:
inset 0 2px 1px rgba(255,255,255,.38),
inset 0 -6px 10px rgba(70,0,0,.24),
0 4px 0 color-mix(in srgb,var(--red) 68%,#4f160f),
0 11px 22px color-mix(in srgb,var(--red) 28%,transparent)!important;
text-shadow:0 2px 2px rgba(0,0,0,.28);
}
.dish-favorite-button{
background:linear-gradient(145deg,#fff,#eee5db)!important;
box-shadow:
inset 0 2px 1px #fff,
inset 0 -5px 8px rgba(73,49,31,.12),
0 3px 0 rgba(94,71,54,.22),
0 9px 18px rgba(22,18,15,.18)!important;
}
.dish-favorite-button.is-favorite{
background:linear-gradient(145deg,#fff6f7,#ffd9de)!important;
}
.menu-add-single:active,
.dish-favorite-button:active,
.category-tabs button:active,
.service-actions button:active,
.mini-search-btn:active,
.floating-cart:active,
.floating-clear:active,
.checkout:active,
.submit-feedback:active,
.profile-actions a:active,
.favorites-view-head button:active,
.favorites-empty button:active{
transform:translateY(3px)!important;
box-shadow:inset 0 3px 7px rgba(22,18,15,.24),0 1px 0 rgba(22,18,15,.2),0 4px 9px rgba(22,18,15,.12)!important;
}
/* Favourites is a proper destination page, not a small card embedded in Menu. */
.favorites-page main{
min-height:calc(100dvh - 390px);
}
.favorites-page .favorites-view{
min-height:calc(100dvh - 500px);
margin:0;
padding:4px 0 24px;
border:0;
border-radius:0;
background:transparent;
-webkit-backdrop-filter:none;
backdrop-filter:none;
box-shadow:none;
}
.favorites-page .favorites-view-head{
margin-bottom:18px;
padding:2px 2px 12px;
border-bottom:1px solid var(--line);
}
.favorites-page .favorites-view-head h2{
font-size:clamp(30px,5vw,48px);
}
.favorites-page .favorites-empty{
min-height:280px;
display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
background:rgba(255,255,255,.52);
border-style:solid;
box-shadow:inset 0 1px 0 rgba(255,255,255,.82),0 14px 36px rgba(42,22,8,.09);
}
.favorites-page .professional-footer{
display:none;
}
.customer-profile-form{
grid-column:1/-1;
display:grid;
grid-template-columns:1fr 1fr;
gap:10px;
}
.customer-profile-form label{
min-width:0;
}
.customer-profile-form label span{
display:block;
margin:0 0 6px 2px;
color:var(--muted);
font-size:10px;
font-weight:900;
letter-spacing:.07em;
text-transform:uppercase;
}
.customer-profile-form input{
width:100%;
min-width:0;
height:46px;
padding:0 13px;
border:1px solid rgba(22,18,15,.12);
border-radius:14px;
background:rgba(255,255,255,.78);
color:var(--ink);
font-weight:800;
box-shadow:inset 0 2px 5px rgba(42,22,8,.06),0 1px 0 rgba(255,255,255,.9);
}
.profile-form-note,
.profile-form-message{
grid-column:1/-1;
margin:0;
color:var(--muted);
font-size:11px;
line-height:1.45;
}
.profile-form-message{
min-height:16px;
}
.profile-form-message.ok{color:var(--green)}
.profile-form-message.error{color:var(--red)}
.customer-profile-form button,
.profile-logout{
min-height:44px;
border:1px solid rgba(255,255,255,.24);
border-radius:14px;
background:linear-gradient(145deg,var(--orange),var(--red));
color:#fff;
font-size:12px;
font-weight:900;
box-shadow:
inset 0 2px 1px rgba(255,255,255,.36),
inset 0 -5px 9px rgba(70,0,0,.22),
0 3px 0 color-mix(in srgb,var(--red) 65%,#4f160f),
0 9px 18px color-mix(in srgb,var(--red) 25%,transparent);
}
.customer-profile-form button{
grid-column:1/-1;
}
.profile-actions{
grid-template-columns:1fr 1fr 1fr;
}
.profile-logout{
background:linear-gradient(145deg,#fff,#eee5db);
border-color:rgba(22,18,15,.1);
color:#b4232f;
box-shadow:inset 0 2px 1px #fff,inset 0 -5px 9px rgba(73,49,31,.1),0 3px 0 rgba(94,71,54,.22),0 9px 18px rgba(22,18,15,.13);
}
.customer-profile-form button:active,
.profile-logout:active{
transform:translateY(3px);
box-shadow:inset 0 3px 7px rgba(22,18,15,.22),0 1px 0 rgba(22,18,15,.2);
}
/* Secondary controls use the same physical depth without changing their
semantic colours, sizes or focus treatment. */
.cart-head button,
.line-controls button,
.cart-clear-btn,
.addons-browse-btn,
.see-all-coupons-btn,
.coupon-input-row button,
.water-step,
.water-add-main,
.star-input button,
.overall-rating button,
.feedback-dish-list button,
.history-toggle,
.tip-option,
.tip-submit,
.product-order-now,
.variant-actions button,
.cart-qty button{
border-color:rgba(255,255,255,.24);
box-shadow:
inset 0 2px 1px rgba(255,255,255,.34),
inset 0 -5px 9px rgba(22,18,15,.18),
0 3px 0 rgba(22,18,15,.23),
0 9px 18px rgba(22,18,15,.14)!important;
transition:transform .15s ease,box-shadow .15s ease,filter .15s ease!important;
}
.cart-head button:active,
.line-controls button:active,
.cart-clear-btn:active,
.addons-browse-btn:active,
.see-all-coupons-btn:active,
.coupon-input-row button:active,
.water-step:active,
.water-add-main:active,
.star-input button:active,
.overall-rating button:active,
.feedback-dish-list button:active,
.history-toggle:active,
.tip-option:active,
.tip-submit:active,
.product-order-now:active,
.variant-actions button:active,
.cart-qty button:active{
transform:translateY(3px)!important;
box-shadow:inset 0 3px 7px rgba(22,18,15,.24),0 1px 0 rgba(22,18,15,.2),0 4px 9px rgba(22,18,15,.1)!important;
}
@media(max-width:720px){
body[data-page="home"] .storefront-top-ticker,
body[data-page="tracking"] .storefront-top-ticker,
body[data-page="feedback"] .storefront-top-ticker,
body[data-page="profile"] .storefront-top-ticker{
height:38px!important;
}
body[data-page="home"] .storefront-shared-header .topbar,
body[data-page="tracking"] .storefront-shared-header .topbar,
body[data-page="feedback"] .storefront-shared-header .topbar,
body[data-page="profile"] .storefront-shared-header .topbar{
top:calc(46px + env(safe-area-inset-top))!important;
}
.storefront-shared-header .cover{
min-height:342px!important;
padding-top:calc(112px + env(safe-area-inset-top))!important;
}
.store-bottom-nav{
width:calc(100% - 18px)!important;
gap:7px!important;
}
.store-nav-item{
min-height:59px!important;
border-radius:19px!important;
}
.favorites-page main{
min-height:calc(100dvh - 342px);
}
.favorites-page .favorites-view{
min-height:calc(100dvh - 442px);
}
.customer-profile-form{
grid-template-columns:1fr;
}
.customer-profile-form button{
grid-column:auto;
}
.profile-actions{
grid-template-columns:1fr;
}
}
@media(max-width:370px){
.store-bottom-nav{
width:calc(100% - 12px)!important;
gap:5px!important;
}
.store-nav-item{
min-height:56px!important;
border-radius:17px!important;
}
.store-nav-item span{
font-size:8.5px!important;
}
}
/* Corrective polish: restrained glass depth, circular icon dock. The shared
restaurant header geometry remains untouched. */
.favorite-button{
color:#e52f49!important;
border-color:rgba(255,255,255,.52)!important;
background:linear-gradient(145deg,rgba(255,255,255,.42),rgba(229,47,73,.18))!important;
box-shadow:inset 0 1px 0 rgba(255,255,255,.62),0 8px 22px rgba(30,12,14,.16)!important;
}
.favorite-button svg path{
fill:currentColor!important;
stroke:currentColor!important;
}
.favorite-button.has-favorites::after{
display:none!important;
}
.favorites-page .favorites-view-head{
display:none!important;
}
.store-bottom-nav{
width:min(292px,calc(100% - 28px))!important;
min-height:58px!important;
grid-template-columns:repeat(4,56px)!important;
justify-content:space-between!important;
gap:12px!important;
}
.store-nav-item{
width:56px!important;
height:56px!important;
min-height:56px!important;
border:1px solid rgba(255,255,255,.68)!important;
border-radius:50%!important;
overflow:visible!important;
background:rgba(255,255,255,.76)!important;
-webkit-backdrop-filter:blur(18px) saturate(1.35);
backdrop-filter:blur(18px) saturate(1.35);
color:rgba(22,18,15,.7)!important;
box-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 8px 22px rgba(22,18,15,.14)!important;
text-shadow:none!important;
transform:none!important;
}
.store-nav-item::before{
display:none!important;
}
.store-nav-item span{
position:absolute!important;
width:1px!important;
height:1px!important;
padding:0!important;
margin:-1px!important;
overflow:hidden!important;
clip:rect(0,0,0,0)!important;
white-space:nowrap!important;
border:0!important;
}
.store-bottom-nav .store-nav-item svg{
width:23px!important;
height:23px!important;
flex-basis:23px!important;
}
.store-bottom-nav .store-nav-item.is-active{
color:#fff!important;
border-color:rgba(255,255,255,.34)!important;
background:linear-gradient(145deg,var(--orange),var(--red))!important;
box-shadow:inset 0 1px 0 rgba(255,255,255,.38),0 9px 23px color-mix(in srgb,var(--red) 24%,transparent)!important;
}
.store-nav-item:active{
transform:translateY(1px)!important;
box-shadow:inset 0 1px 3px rgba(22,18,15,.16),0 4px 11px rgba(22,18,15,.12)!important;
}
.store-nav-item.has-status::after{
top:5px!important;
right:4px!important;
}
body[data-page="home"],
body[data-page="tracking"],
body[data-page="feedback"],
body[data-page="profile"]{
padding-bottom:calc(86px + env(safe-area-inset-bottom))!important;
}
.floating-cart-row{
bottom:calc(74px + env(safe-area-inset-bottom))!important;
}
/* Neutralise the earlier chunky press treatment without flattening controls. */
.menu-add-single,
.dish-favorite-button,
.category-tabs button,
.service-actions button,
.mini-search-btn,
.floating-cart,
.floating-clear,
.checkout,
.submit-feedback,
.profile-actions a,
.favorites-view-head button,
.favorites-empty button,
.cart-head button,
.line-controls button,
.cart-clear-btn,
.addons-browse-btn,
.see-all-coupons-btn,
.coupon-input-row button,
.water-step,
.water-add-main,
.star-input button,
.overall-rating button,
.feedback-dish-list button,
.history-toggle,
.tip-option,
.tip-submit,
.product-order-now,
.variant-actions button,
.cart-qty button,
.customer-profile-form button,
.profile-logout{
box-shadow:inset 0 1px 0 rgba(255,255,255,.66),0 7px 18px rgba(22,18,15,.11)!important;
text-shadow:none!important;
transition:transform .14s ease,box-shadow .14s ease,background-color .14s ease!important;
}
.menu-add-single{
background:linear-gradient(145deg,var(--orange),var(--red))!important;
border-color:rgba(255,255,255,.28)!important;
}
.menu-add-single:active,
.dish-favorite-button:active,
.category-tabs button:active,
.service-actions button:active,
.mini-search-btn:active,
.floating-cart:active,
.floating-clear:active,
.checkout:active,
.submit-feedback:active,
.profile-actions a:active,
.favorites-view-head button:active,
.favorites-empty button:active,
.cart-head button:active,
.line-controls button:active,
.cart-clear-btn:active,
.addons-browse-btn:active,
.see-all-coupons-btn:active,
.coupon-input-row button:active,
.water-step:active,
.water-add-main:active,
.star-input button:active,
.overall-rating button:active,
.feedback-dish-list button:active,
.history-toggle:active,
.tip-option:active,
.tip-submit:active,
.product-order-now:active,
.variant-actions button:active,
.cart-qty button:active,
.customer-profile-form button:active,
.profile-logout:active{
transform:translateY(1px)!important;
box-shadow:inset 0 1px 3px rgba(22,18,15,.14),0 3px 9px rgba(22,18,15,.09)!important;
}
.menu-item,
.tracking-main-card,
.order-details-card,
.page-panel,
.tip-card,
.history-panel,
.customer-profile-card,
.favorites-empty{
border-color:rgba(255,255,255,.64)!important;
background:rgba(255,255,255,.57)!important;
-webkit-backdrop-filter:blur(20px) saturate(1.25);
backdrop-filter:blur(20px) saturate(1.25);
box-shadow:inset 0 1px 0 rgba(255,255,255,.78),0 10px 28px rgba(42,22,8,.09)!important;
}
.menu-item{
/* Repeated per-dish backdrop filters trigger expensive compositing while
scrolling long menus. An almost-opaque glass fill keeps the same look. */
background:rgba(255,255,255,.84)!important;
-webkit-backdrop-filter:none!important;
backdrop-filter:none!important;
}
.dish-favorite-button{
-webkit-backdrop-filter:none!important;
backdrop-filter:none!important;
}
/* Feedback is one cohesive glass surface with compact, readable controls. */
.feedback-page-grid{
gap:14px!important;
}
.feedback-panel{
padding:18px!important;
}
.feedback-panel h2{
margin-bottom:7px!important;
font-size:clamp(25px,4vw,38px)!important;
}
.feedback-panel>p{
margin:0 0 12px!important;
color:var(--muted);
font-size:13px;
line-height:1.45;
}
.overall-rating,
.star-input{
gap:7px!important;
margin:10px 0 13px!important;
}
.overall-rating button,
.star-input button{
width:40px!important;
height:40px!important;
border:1px solid rgba(255,255,255,.72)!important;
border-radius:14px!important;
background:rgba(255,255,255,.68)!important;
color:rgba(22,18,15,.24)!important;
font-size:22px!important;
}
.overall-rating button.active,
.star-input button.active{
color:#ffae00!important;
background:rgba(255,245,205,.82)!important;
border-color:rgba(255,174,0,.28)!important;
text-shadow:0 2px 10px rgba(255,174,0,.24)!important;
}
.page-panel textarea{
min-height:104px!important;
margin:5px 0 12px!important;
border:1px solid rgba(255,255,255,.72)!important;
border-radius:17px!important;
background:rgba(255,255,255,.66)!important;
box-shadow:inset 0 1px 4px rgba(42,22,8,.06)!important;
}
.submit-feedback{
min-height:46px;
padding:12px 17px!important;
border:1px solid rgba(255,255,255,.26)!important;
border-radius:16px!important;
background:linear-gradient(135deg,var(--orange),var(--red))!important;
}
.feedback-dish-list{
gap:8px!important;
}
.feedback-dish-list button{
min-height:48px;
padding:11px 13px!important;
border:1px solid rgba(255,255,255,.72)!important;
border-radius:15px!important;
background:rgba(255,255,255,.64)!important;
font-size:13px;
}
@media(max-width:420px){
.store-bottom-nav{
width:min(276px,calc(100% - 18px))!important;
grid-template-columns:repeat(4,52px)!important;
gap:10px!important;
}
.store-nav-item{
width:52px!important;
height:52px!important;
min-height:52px!important;
}
.store-nav-item svg{
width:21px!important;
height:21px!important;
}
.feedback-panel{
padding:14px!important;
}
.overall-rating,
.star-input{
justify-content:space-between;
gap:4px!important;
}
.overall-rating button,
.star-input button{
width:38px!important;
height:38px!important;
}
}
/* Dish card add action: one quiet glass + for both direct adds and option pickers. */
body[data-page="home"] .menu-item .menu-add-single,
.favorites-page .menu-item .menu-add-single{
position:relative!important;
flex:0 0 36px!important;
width:36px!important;
height:36px!important;
min-width:36px!important;
min-height:36px!important;
margin:0!important;
padding:0 0 2px!important;
display:grid!important;
place-items:center!important;
border:1px solid rgba(255,255,255,.56)!important;
border-radius:50%!important;
background:rgba(18,16,14,.86)!important;
color:#fff!important;
-webkit-backdrop-filter:blur(12px) saturate(1.2)!important;
backdrop-filter:blur(12px) saturate(1.2)!important;
box-shadow:inset 0 1px 0 rgba(255,255,255,.19),0 6px 15px rgba(22,18,15,.17)!important;
text-shadow:none!important;
font-size:22px!important;
font-weight:600!important;
line-height:1!important;
}
body[data-page="home"] .menu-item .menu-add-single:hover,
.favorites-page .menu-item .menu-add-single:hover{
background:rgba(5,5,5,.94)!important;
border-color:rgba(255,255,255,.74)!important;
box-shadow:inset 0 1px 0 rgba(255,255,255,.24),0 8px 18px rgba(22,18,15,.21)!important;
}
body[data-page="home"] .menu-item .menu-add-single:focus-visible,
.favorites-page .menu-item .menu-add-single:focus-visible{
outline:3px solid rgba(255,90,0,.3)!important;
outline-offset:2px!important;
}
body[data-page="home"] .menu-item .menu-add-single:active,
.favorites-page .menu-item .menu-add-single:active{
transform:scale(.95)!important;
box-shadow:inset 0 2px 4px rgba(0,0,0,.28),0 3px 8px rgba(22,18,15,.13)!important;
}
@media(max-width:380px){
body[data-page="home"] .menu-item .menu-add-single,
.favorites-page .menu-item .menu-add-single{
flex-basis:34px!important;
width:34px!important;
height:34px!important;
min-width:34px!important;
min-height:34px!important;
font-size:21px!important;
}
}
/* Tracking v2026072403 — compact order facts and one live progress bar per dish. */
body[data-page="tracking"] .page-main{padding:14px 18px 22px!important}
body[data-page="tracking"] .tracking-grid{gap:12px}
body[data-page="tracking"] .tracking-main-card,
body[data-page="tracking"] .order-details-card{padding:14px!important;border-radius:22px!important}
body[data-page="tracking"] .track-live-card{padding:10px 12px!important;gap:10px!important;border-radius:15px!important}
body[data-page="tracking"] .track-live-card b{font-size:15px!important}
body[data-page="tracking"] .track-live-card span{font-size:11.5px!important;line-height:1.35!important;margin-top:2px!important}
body[data-page="tracking"] .track-dot{width:10px!important;height:10px!important;flex:0 0 10px!important}
body[data-page="tracking"] .steps{margin-top:9px!important;gap:5px!important}
body[data-page="tracking"] .steps span{padding:6px 7px!important;border-radius:9px!important;font-size:9.5px!important}
body[data-page="tracking"] .tracking-order-details{gap:8px!important}
body[data-page="tracking"] .order-meta{
display:grid!important;
grid-template-columns:repeat(4,minmax(0,1fr))!important;
gap:0!important;
padding:9px 10px!important;
border-radius:14px!important;
}
body[data-page="tracking"] .order-meta>div{
min-width:0;
padding:0 9px;
border-left:1px solid rgba(22,18,15,.08);
}
body[data-page="tracking"] .order-meta>div:first-child{padding-left:0;border-left:0}
body[data-page="tracking"] .order-meta small{
margin:0 0 2px!important;
color:var(--muted);
font-size:9px;
font-weight:850;
text-transform:uppercase;
letter-spacing:.035em;
}
body[data-page="tracking"] .order-meta b{
display:block;
overflow:hidden;
font-size:12.5px;
text-overflow:ellipsis;
white-space:nowrap;
}
.tracking-dishes{display:grid;gap:8px}
body[data-page="tracking"] .tracking-line{
display:block!important;
padding:11px 12px!important;
border-radius:15px!important;
}
.tracking-line-head,
.tracking-line-state{display:flex;align-items:center;justify-content:space-between;gap:10px}
.tracking-line-head>div{min-width:0}
.tracking-line-head b{display:block;font-size:14px;line-height:1.25}
.tracking-line-head small{display:block!important;margin-top:2px!important;font-size:11px}
.tracking-line-head strong{font-size:14px;white-space:nowrap}
.tracking-line-state{margin-top:7px}
.tracking-line-state>span{
min-width:0;
overflow:hidden;
color:var(--muted);
font-size:10.5px;
font-weight:700;
text-overflow:ellipsis;
white-space:nowrap;
}
body[data-page="tracking"] .tracking-item-status{
flex:0 0 auto;
margin:0!important;
padding:3px 7px!important;
font-size:9px!important;
}
.tracking-item-progress{
height:5px;
margin-top:7px;
overflow:hidden;
border-radius:999px;
background:rgba(22,18,15,.08);
}
.tracking-item-progress i{
display:block;
height:100%;
border-radius:inherit;
background:linear-gradient(90deg,var(--orange),var(--red));
transition:width .35s ease;
}
.tracking-item-progress.ready i{background:linear-gradient(90deg,#20a35a,#3bc97b)}
.tracking-item-progress.serving i{background:linear-gradient(90deg,#246be8,#48a1ff)}
.tracking-item-progress.unavailable i{background:#c5262f}
.tracking-detail-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}
body[data-page="tracking"] .tracking-note{
gap:5px!important;
min-width:0;
padding:9px 11px!important;
border-radius:14px!important;
}
body[data-page="tracking"] .tracking-note span{
padding-bottom:4px!important;
font-size:9px;
text-transform:uppercase;
letter-spacing:.035em;
}
body[data-page="tracking"] .tracking-note b{font-size:11.5px;line-height:1.35}
body[data-page="tracking"] .tracking-coupon,
body[data-page="tracking"] .tracking-total{padding:9px 11px!important;border-radius:14px!important;font-size:12px}
body[data-page="tracking"] .bill-btn{
width:100%;
min-height:38px;
margin-top:0!important;
border:0;
border-radius:13px!important;
padding:9px 12px!important;
font-size:12px!important;
}
body[data-page="tracking"] .history-section{margin-top:10px!important}
body[data-page="tracking"] .history-toggle{padding:8px 12px!important;font-size:11.5px!important}
@media(max-width:860px){
body[data-page="tracking"] .page-main{padding:10px 12px 18px!important}
body[data-page="tracking"] .tracking-grid{gap:9px!important}
body[data-page="tracking"] .tracking-main-card,
body[data-page="tracking"] .order-details-card{padding:11px!important;border-radius:18px!important}
}
@media(max-width:480px){
body[data-page="tracking"] .order-meta{grid-template-columns:repeat(2,minmax(0,1fr))!important;row-gap:8px!important}
body[data-page="tracking"] .order-meta>div:nth-child(3){padding-left:0;border-left:0}
.tracking-detail-grid{grid-template-columns:1fr}
.tracking-line-state>span{max-width:68%}
}
/* Compact section heroes keep a fixed safe band below the floating header.
The content-driven height also protects wrapped/localised section titles. */
.storefront-shared-header.is-section-hero .cover{
min-height:clamp(232px,24vw,270px)!important;
height:auto!important;
padding-top:calc(118px + env(safe-area-inset-top))!important;
padding-bottom:22px!important;
justify-content:flex-end!important;
gap:0!important;
}
.storefront-shared-header.is-section-hero .store-title{
width:100%!important;
max-width:900px!important;
min-width:0!important;
}
.storefront-shared-header.is-section-hero .storefront-section-title{
width:100%!important;
max-width:100%!important;
margin:0!important;
font-size:clamp(42px,6vw,68px)!important;
line-height:.92!important;
overflow-wrap:anywhere!important;
word-break:normal!important;
text-wrap:balance;
}
@media(max-width:720px){
.storefront-shared-header.is-section-hero .cover{
min-height:218px!important;
padding-top:calc(106px + env(safe-area-inset-top))!important;
padding-bottom:18px!important;
}
.storefront-shared-header.is-section-hero .storefront-section-title{
font-size:clamp(36px,12vw,50px)!important;
line-height:.94!important;
}
}
@media(max-width:340px){
.storefront-shared-header.is-section-hero .cover{
min-height:210px!important;
padding-left:14px!important;
padding-right:14px!important;
}
.storefront-shared-header.is-section-hero .storefront-section-title{
font-size:clamp(34px,11.5vw,40px)!important;
}
}
/* v2026072313: close the obsolete pre-footer spacer and finish the shared
storefront glass controls. Bottom-dock clearance is handled by the page
safe-area padding, so the menu itself must end directly above its footer. */
body[data-page="home"] #menuList{
padding-bottom:0!important;
}
body[data-page="home"] #menuList + .professional-footer{
margin-top:14px!important;
}
/* Clear crystal controls: bright enough to read over every configured theme
while remaining four independent circular buttons. */
.store-bottom-nav{
filter:none!important;
}
.store-bottom-nav .store-nav-item{
border-color:rgba(255,255,255,.92)!important;
background:
linear-gradient(145deg,rgba(255,255,255,.98) 0%,rgba(255,255,255,.78) 43%,rgba(224,231,238,.82) 100%)!important;
-webkit-backdrop-filter:none!important;
backdrop-filter:none!important;
color:rgba(22,18,15,.84)!important;
box-shadow:
inset 0 2px 1px rgba(255,255,255,1),
inset 0 -8px 14px rgba(83,100,117,.13),
0 1px 0 rgba(255,255,255,.94),
0 8px 18px rgba(22,18,15,.15)!important;
}
.store-bottom-nav .store-nav-item::before{
display:block!important;
z-index:0!important;
inset:4px 7px auto!important;
height:36%!important;
border-radius:50%!important;
background:linear-gradient(180deg,rgba(255,255,255,.98),rgba(255,255,255,.08))!important;
opacity:.9;
}
.store-bottom-nav .store-nav-item svg{
position:relative;
z-index:1;
filter:none!important;
}
.store-bottom-nav .store-nav-item.is-active{
border-color:rgba(255,255,255,.78)!important;
background:
linear-gradient(145deg,color-mix(in srgb,var(--orange) 82%,#fff),color-mix(in srgb,var(--red) 88%,#fff))!important;
box-shadow:
inset 0 2px 1px rgba(255,255,255,.68),
inset 0 -8px 14px rgba(72,0,0,.16),
0 1px 0 rgba(255,255,255,.84),
0 9px 20px color-mix(in srgb,var(--red) 27%,transparent)!important;
}
/* The provider mark in the offer strip stays a plain logo link, not a glass
button inside another glass banner. */
.storefront-top-ticker .provider-brand{
width:38px!important;
height:38px!important;
min-width:38px!important;
padding:0!important;
border:0!important;
border-radius:0!important;
background:transparent!important;
-webkit-backdrop-filter:none!important;
backdrop-filter:none!important;
box-shadow:none!important;
}
.storefront-top-ticker::before{
content:"";
position:absolute;
z-index:2;
inset:0 auto 0 0;
width:78px;
background:linear-gradient(90deg,rgba(22,18,15,.99) 0 72%,rgba(22,18,15,0));
pointer-events:none;
}
/* Keep fixed chrome cheap to composite during touch scrolling. */
.storefront-top-ticker{
-webkit-backdrop-filter:none!important;
backdrop-filter:none!important;
}
@media(max-width:720px){
.storefront-shared-header .topbar .circle,
.storefront-shared-header .topbar .table-chip,
.storefront-shared-header .topbar .header-search-chip{
-webkit-backdrop-filter:none!important;
backdrop-filter:none!important;
}
body[data-page="home"] .category-tabs{
-webkit-backdrop-filter:none!important;
backdrop-filter:none!important;
background:rgba(255,248,237,.96)!important;
}
}
.store-bottom-nav .store-nav-item{
border:1px solid rgba(255,255,255,.72)!important;
background:rgba(255,255,255,.78)!important;
-webkit-backdrop-filter:none!important;
backdrop-filter:none!important;
box-shadow:0 7px 18px rgba(22,18,15,.13)!important;
}
.store-bottom-nav .store-nav-item::before{
display:none!important;
}
.store-bottom-nav .store-nav-item svg{
width:24px!important;
height:24px!important;
flex-basis:24px!important;
filter:none!important;
}
.store-bottom-nav .store-nav-item svg path,
.store-bottom-nav .store-nav-item svg circle{
stroke-width:2.4!important;
}
.store-bottom-nav .store-nav-item.is-active{
border-color:rgba(255,255,255,.42)!important;
background:linear-gradient(145deg,var(--orange),var(--red))!important;
box-shadow:0 8px 19px color-mix(in srgb,var(--red) 22%,transparent)!important;
}
@media(max-width:720px){
body[data-page="home"] .header-search-pop{
top:calc(132px + env(safe-area-inset-top))!important;
}
}
/* ---- Plan lock: intro price note + SaaS promo code ----------------------
The monthly headline is the discounted FIRST month, so the renewal cost has to be
visible next to it rather than discovered at the second charge. */
.plan-price-note{font-size:12px;color:rgba(22,18,15,.6);font-weight:600;margin-top:-2px}
.promo-box{margin:14px 0 6px;text-align:left}
.promo-box>label{display:block;font-size:12.5px;font-weight:800;color:rgba(22,18,15,.62);margin-bottom:6px}
.promo-row{display:flex;gap:8px}
.promo-row input{flex:1 1 0;min-width:0;font:inherit;font-size:14px;padding:10px 12px;border:1.5px solid rgba(22,18,15,.14);border-radius:11px;text-transform:uppercase;letter-spacing:.06em}
.promo-row input:focus-visible{outline:2px solid var(--orange);outline-offset:1px;border-color:transparent}
.promo-apply{font:inherit;font-size:14px;font-weight:800;padding:10px 16px;border-radius:11px;border:1.5px solid rgba(22,18,15,.14);background:#fff;cursor:pointer;white-space:nowrap}
.promo-apply:hover{background:rgba(22,18,15,.04)}
.promo-apply:disabled{opacity:.55;cursor:default}
/* Reserves its line so applying a code does not shift the buttons under the cursor. */
.promo-msg{display:block;margin-top:7px;font-size:12.5px;font-weight:700;min-height:1.2em}
.promo-ok{color:#0f7a4a}
.promo-bad{color:#a3161c}
/* ---- Banner display fonts -------------------------------------------------
The restaurant picks one in Admin → Theme; the shared storefront header puts the
matching bf- class on the hero title, so storefront, tracking, feedback and
profile all carry the same branding.
Only the FAMILY changes. Size, tracking and the 3D depth below stay fixed, because
they are what keeps a long name legible at hero size on a phone. */
.store-title h1.bf-anton { font-family:'Anton', Impact, sans-serif; }
.store-title h1.bf-bebas { font-family:'Bebas Neue', Impact, sans-serif; }
.store-title h1.bf-oswald { font-family:'Oswald', Impact, sans-serif; font-weight:700; }
.store-title h1.bf-teko { font-family:'Teko', Impact, sans-serif; font-weight:700; }
.store-title h1.bf-russo { font-family:'Russo One', Impact, sans-serif; }
.store-title h1.bf-titan { font-family:'Titan One', Impact, cursive; }
.store-title h1.bf-bungee { font-family:'Bungee', Impact, cursive; font-size:clamp(34px,8vw,58px); }
.store-title h1.bf-alfa { font-family:'Alfa Slab One', Georgia, serif; font-size:clamp(36px,8.5vw,62px); }
.store-title h1.bf-ultra { font-family:'Ultra', Georgia, serif; font-size:clamp(34px,8vw,58px); }
.store-title h1.bf-playfair { font-family:'Playfair Display', Georgia, serif; font-weight:900; }
.store-title h1.bf-montser { font-family:'Montserrat', Inter, sans-serif; font-weight:900; }
/* Depth on the hero name. The banner is a photo or a gradient, so a flat white title
loses its edges over light areas — this keeps it readable without a dark scrim.
The outline is drawn with paint-order:stroke so the stroke sits BEHIND the fill and
the letterforms stay their true weight; -webkit-text-stroke alone would eat into
them. Width 0 (the default) means no outline at all. */
.store-title h1{
color:var(--banner-color,#fff);
-webkit-text-stroke:var(--banner-stroke,0) var(--banner-stroke-color,transparent);
paint-order:stroke fill;
text-shadow:
0 1px 0 rgba(0,0,0,.18),
0 2px 0 rgba(0,0,0,.14),
0 3px 0 rgba(0,0,0,.10),
0 4px 10px rgba(0,0,0,.32);
paint-order:stroke fill;
}
@media (prefers-reduced-transparency: reduce){
.store-title h1{ text-shadow:0 2px 8px rgba(0,0,0,.45); }
}
/* ---- Admin: banner font picker ---- */
.font-sample-list{display:grid;gap:10px;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));margin-top:14px}
.font-sample{
display:flex;flex-direction:column;gap:4px;align-items:flex-start;
border:1.5px solid var(--line);border-radius:14px;background:#fff;
padding:14px 15px;cursor:pointer;text-align:left;overflow:hidden;
}
.font-sample:hover{border-color:rgba(22,18,15,.32)}
.font-sample.active{border-color:var(--orange);box-shadow:0 0 0 3px rgba(255,90,0,.14)}
/* The sample is the point of the control, so give it room and let a long name shrink
rather than overflow the card. */
.font-sample span{font-size:clamp(17px,2.4vw,23px);line-height:1.05;letter-spacing:-.02em;overflow-wrap:anywhere;color:var(--ink)}
.font-sample small{font-size:11.5px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;color:var(--muted)}
/* ---- Admin: banner text colour + spacing ---- */
.banner-sub-heading{margin:22px 0 4px;font-size:15px}
.banner-colour-strip{display:flex;flex-wrap:wrap;gap:8px;margin:10px 0 14px}
.banner-colour{
width:38px;height:38px;padding:3px;cursor:pointer;
border:1.5px solid var(--line);border-radius:11px;background:#fff;
}
.banner-colour span{display:block;width:100%;height:100%;border-radius:8px;border:1px solid rgba(22,18,15,.12)}
.banner-colour.active{border-color:var(--orange);box-shadow:0 0 0 3px rgba(255,90,0,.16)}
.banner-spacing-row{display:flex;align-items:center;gap:14px;margin-top:8px}
.banner-spacing-row input[type=range]{flex:1;min-width:0;accent-color:var(--orange)}
.banner-spacing-row output{
min-width:66px;text-align:right;font-variant-numeric:tabular-nums;
font-weight:800;font-size:13.5px;color:var(--muted);
}
/* The preview banner text must be able to wrap, or a long name with wide tracking
overflows the swatch instead of showing the operator what will actually happen. */
.admin-theme-banner span{overflow-wrap:anywhere;text-wrap:balance}
/* ==========================================================================
Admin — Banners (Banners & Offers page, below the coupons list)
Built from the same tokens and card shape as .coupon-card so the two
sections on this page read as one screen.
========================================================================== */
.admin-banners-panel{margin-top:22px}
.admin-panel-head{
display:flex;align-items:flex-start;justify-content:space-between;
gap:14px;flex-wrap:wrap;margin-bottom:16px;
}
.admin-panel-head h2{margin:0}
.admin-panel-head .admin-section-hint{margin:5px 0 0}
.admin-panel-head .admin-btn-primary{flex:0 0 auto}
.banner-rotation-bar{
display:flex;align-items:center;gap:18px;flex-wrap:wrap;
padding:12px 14px;margin-bottom:14px;border-radius:12px;
background:var(--a-bg);border:1px solid var(--a-border);
}
.banner-rotation-toggle{display:flex;align-items:center;gap:9px;font-size:13.5px;color:var(--a-text)}
.banner-rotation-toggle input{width:18px;height:18px;margin:0;flex:0 0 auto}
.banner-rotation-speed{display:flex;align-items:center;gap:8px;font-size:13.5px;color:var(--a-text)}
.banner-rotation-speed select{
border:1px solid var(--a-border);border-radius:8px;padding:7px 9px;
font-size:13px;background:#fff;color:var(--a-text);
}
/* Disabled speed still readable — it explains what is switched off. */
.banner-rotation-speed select:disabled{opacity:.55;cursor:not-allowed}
.banner-rotation-bar .admin-section-hint{flex-basis:100%;margin:0}
.admin-banners-list{display:flex;flex-direction:column;gap:12px}
.banner-card{
background:var(--a-card);border:1px solid var(--a-border);border-radius:14px;
padding:12px;display:flex;align-items:center;gap:14px;flex-wrap:wrap;
}
/* A hidden banner stays fully readable — dimming the whole row would make the one
thing the owner needs to act on the hardest thing to read. The state is said in
words in .banner-card-state; only the thumbnail is desaturated. */
.banner-card.is-off .banner-card-img img{filter:grayscale(1);opacity:.55}
.banner-card-img{
flex:0 0 120px;height:56px;border-radius:10px;overflow:hidden;
background:var(--a-hover);border:1px solid var(--a-border);
}
.banner-card-img img{width:100%;height:100%;object-fit:cover;display:block}
.banner-card-body{flex:1 1 200px;min-width:0;display:flex;flex-direction:column;gap:3px}
.banner-card-title{font-size:14px;font-weight:700;color:var(--a-text);
white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.banner-card-sub{font-size:12.5px;color:var(--a-muted);
white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.banner-card-state{font-size:11px;font-weight:600;color:var(--a-muted)}
.banner-card:not(.is-off) .banner-card-state{color:#1b7a43}
.banner-card .admin-row-actions{margin-top:0;flex-wrap:wrap}
.banner-card .admin-row-actions button:disabled{opacity:.4;cursor:not-allowed}
/* Modal — image picker */
.banner-upload-row{display:flex;gap:14px;align-items:flex-start;flex-wrap:wrap}
.banner-upload-preview{
flex:0 0 168px;height:78px;border-radius:10px;overflow:hidden;
background:var(--a-hover);border:1px dashed var(--a-border-strong);
display:grid;place-items:center;
}
.banner-upload-preview img{width:100%;height:100%;object-fit:cover;display:block}
.banner-upload-preview span{font-size:12px;color:var(--a-muted)}
.banner-upload-actions{flex:1 1 200px;display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.banner-upload-actions .admin-section-hint{flex-basis:100%}
/* Colour picker row in the banner modal */
.banner-color-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.banner-color-row input[type="color"]{
width:46px;height:34px;padding:2px;flex:0 0 auto;cursor:pointer;
border:1px solid var(--a-border);border-radius:8px;background:#fff;
}
.banner-color-swatches{display:flex;gap:6px;flex-wrap:wrap}
.banner-color-swatches button{
width:26px;height:26px;padding:0;border-radius:50%;cursor:pointer;
border:1px solid rgba(23,32,51,.22);
}
/* The selected swatch gets a ring, not just a border — on a white swatch a border
change alone is invisible against the panel. */
.banner-color-swatches button[aria-pressed="true"]{
box-shadow:0 0 0 2px var(--a-card),0 0 0 4px var(--a-accent);
}
.banner-color-row .admin-btn-ghost{padding:7px 12px;font-size:12.5px}
/* Ready-made banner picker */
.banner-samples{margin-top:12px;border-top:1px solid var(--a-border);padding-top:10px}
.banner-samples[hidden]{display:none}
.banner-samples-toggle{
display:flex;align-items:center;justify-content:space-between;gap:10px;width:100%;
background:none;border:0;padding:4px 0;cursor:pointer;
font-size:13.5px;font-weight:600;color:var(--a-accent);
}
.banner-samples-toggle em{font-style:normal;font-size:12px;font-weight:500;color:var(--a-muted)}
.banner-samples-toggle::after{content:"▾";font-size:11px;color:var(--a-muted)}
.banner-samples-toggle[aria-expanded="true"]::after{content:"▴"}
.banner-samples-body{margin-top:10px;max-height:320px;overflow-y:auto;padding-right:4px}
.banner-sample-group+.banner-sample-group{margin-top:14px}
.banner-sample-group-name{
margin:0 0 7px;font-size:11px;font-weight:700;letter-spacing:.07em;
text-transform:uppercase;color:var(--a-muted);
}
.banner-sample-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(132px,1fr));gap:8px}
.banner-sample{
padding:0;border:1px solid var(--a-border);border-radius:10px;overflow:hidden;
background:var(--a-card);cursor:pointer;display:flex;flex-direction:column;text-align:left;
}
.banner-sample img{width:100%;aspect-ratio:3/1;object-fit:cover;display:block}
.banner-sample span{
padding:6px 8px;font-size:11.5px;line-height:1.25;color:var(--a-text);
white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.banner-sample:hover{border-color:var(--a-border-strong)}
/* The chosen design gets a ring, not just a border colour — at this thumbnail size a
1px border change is invisible against the artwork. */
.banner-sample[aria-pressed="true"]{
border-color:var(--a-accent);
box-shadow:0 0 0 2px var(--a-card),0 0 0 4px var(--a-accent);
}
.admin-toggle-field{flex-direction:row!important;align-items:center;gap:10px}
.admin-toggle-field input{width:18px;height:18px;flex:0 0 auto;margin:0}
.admin-toggle-field span{font-size:13.5px;color:var(--a-text)}
@media(max-width:560px){
.banner-card{gap:10px}
.banner-card-img{flex-basis:88px;height:46px}
.banner-card .admin-row-actions{flex-basis:100%}
}
/* ==========================================================================
Storefront hero — shortened
The hero measured 390px on desktop and 374px on mobile; with the offer ticker
above it that was 412px, about 52% of a phone screen gone before a single dish
was visible. These bring it to roughly a third of the viewport instead.
Written as one late override rather than edited in place because .cover is
declared ~25 times through this file (lines 22, 58, 267, 371, 4251, 4555 …),
most of them with !important. Unpicking that cascade would risk the layout on
breakpoints that are hard to retest; overriding at the end is predictable.
========================================================================== */
body[data-page] .storefront-shared-header.is-menu-hero .cover{
min-height:296px!important;
}
/* The title carries most of the height. Slightly smaller ceiling keeps it
dominant without pushing the badges off the fold. */
body[data-page] .storefront-shared-header.is-menu-hero .store-title h1{
font-size:clamp(38px,8.5vw,64px)!important;
margin:10px 0 8px!important;
}
body[data-page] .storefront-shared-header.is-menu-hero .store-title p{margin-bottom:10px!important}
@media(min-width:860px){
body[data-page] .storefront-shared-header.is-menu-hero .cover{min-height:300px!important}
body[data-page] .storefront-shared-header.is-menu-hero .store-title h1{font-size:clamp(56px,5.4vw,78px)!important}
}
@media(max-width:720px){
body[data-page] .storefront-shared-header.is-menu-hero .cover{min-height:286px!important}
}
@media(max-width:410px){
body[data-page] .storefront-shared-header.is-menu-hero .cover{min-height:272px!important}
body[data-page] .storefront-shared-header.is-menu-hero .store-title h1{font-size:clamp(34px,11vw,46px)!important}
}
/* ==========================================================================
Storefront — tablet and desktop
The layout was built phone-first and then simply scaled up: at 1440px each dish
card measured 559x705 with a 531x531 square photo, the grid was locked to two
columns, and ten dishes made a 4653px page. It read as a giant phone rather than
a desktop menu.
Everything below is scoped `body[data-page="home"]` INSIDE a min-width query for
one reason: the rules it has to beat are `body[data-page="home"] .menu-list` and a
top-level `.item-img{aspect-ratio:1/1!important}` (styles.css:458), both !important.
Matching that specificity and coming later in the file is what makes these apply;
a plain `.menu-list` selector here would silently lose. Phone layout is untouched.
========================================================================== */
@media(min-width:721px){
/* auto-fill, not a fixed column count: 3 columns on a tablet, 4 on a desktop, and
it stays sensible at widths nobody thought to write a breakpoint for. */
body[data-page="home"] .menu-list,
body[data-page="home"] .menu-list#menuList{
grid-template-columns:repeat(auto-fill,minmax(232px,1fr))!important;
gap:16px!important;
}
body[data-page="home"] .menu-item{
grid-template-columns:1fr!important;
padding:12px!important;
border-radius:22px!important;
gap:10px!important;
}
/* 4:3, not the 1:1 the phone layout forces. A square photo is what made each card
700px tall — the image alone was taller than a laptop's usable menu area. */
body[data-page="home"] .item-img{
aspect-ratio:4/3!important;
min-height:0!important;
order:-1!important;
border-radius:16px!important;
}
body[data-page="home"] .menu-item h3{font-size:16px!important;line-height:1.2!important}
body[data-page="home"] .menu-item p{
font-size:12.5px!important;line-height:1.4!important;
-webkit-line-clamp:2!important;min-height:34px!important;
}
body[data-page="home"] .price{font-size:17px!important}
/* The promo card is 3:1 — fine on a phone, 380px of banner on a desktop. Height is
capped instead so a wide screen gets a letterbox strip, not a poster. */
body[data-page="home"] .store-banner-slide{
aspect-ratio:auto!important;
height:clamp(150px,17vw,210px)!important;
}
body[data-page="home"] .store-banner-cap{padding:30px 20px 14px!important}
body[data-page="home"] .store-banner-cap b{font-size:19px!important}
body[data-page="home"] .store-banner-cap span{font-size:13.5px!important}
}
@media(min-width:1024px){
body[data-page="home"] .menu-list,
body[data-page="home"] .menu-list#menuList{
grid-template-columns:repeat(auto-fill,minmax(248px,1fr))!important;
gap:18px!important;
}
body[data-page="home"] .menu-item{padding:13px!important}
body[data-page="home"] .menu-item h3{font-size:17px!important}
/* 104px of display type for a restaurant name is a poster, not a page header. */
body[data-page="home"] .storefront-shared-header.is-menu-hero .store-title h1{
font-size:clamp(52px,4.4vw,68px)!important;
}
/* Centred tabs drift far from the dishes they filter on a wide screen. */
body[data-page="home"] .category-tabs{justify-content:flex-start!important}
}
/* ==========================================================================
Header logo button — matched to the favourite button
The logo sat at 54px on phones while the favourite button next to it dropped to
48px, so the two ends of the same header row disagreed.
There IS a 48px mobile rule for the logo (styles.css:1395) but a later top-level
`.brand-logo-button.logo-button` block re-asserts 54px, and a media query adds no
specificity — later simply wins. So the correction has to come after that block and
carry the same two-class weight; a single-class selector loses silently.
========================================================================== */
@media(max-width:720px){
.brand-logo-button.logo-button{
width:48px!important;
height:48px!important;
min-width:48px!important;
}
}
/* ==========================================================================
Storefront hero — removed
The menu page has no coloured hero card. The restaurant's name now stands on
the header capsule, and the offers carousel sits directly
under it, so the block that used to carry them is gone rather than restyled.
.cover cannot simply be display:none — the topbar (logo, table chip, search,
favourites) is navigation and lives inside it. What is left is an invisible
spacer whose only job is to reserve the height the topbar needs.
========================================================================== */
/* The topbar is position:fixed, so it contributes NOTHING to this element's
height. min-height has to clear where that fixed row actually ends, or the
offers slide up underneath the logo and table chip. */
body[data-page] .storefront-shared-header.banner-hidden .cover{
/* Measured, not guessed: the fixed topbar's bottom edge lands at 128px on a
desktop and 120px on a phone. Anything shorter and the restaurant's name
runs underneath the logo and table chip. */
min-height:calc(136px + env(safe-area-inset-top))!important;
height:auto!important;
padding:calc(136px + env(safe-area-inset-top)) 0 0!important;
background:none!important;
border-radius:0!important;
box-shadow:none!important;
gap:0!important;
}
@media(max-width:720px){
body[data-page] .storefront-shared-header.banner-hidden .cover{
min-height:calc(128px + env(safe-area-inset-top))!important;
padding-top:calc(128px + env(safe-area-inset-top))!important;
}
}
/* The chips were white-on-dark because they sat on the red hero. With no hero
they stand on the page's cream, where white-on-white is invisible — so they
become dark-ink glass on a light ground instead. Scoped to the hero-less menu
header, because Tracking / Feedback / Favourites still have a coloured cover. */
body[data-page] .storefront-shared-header.banner-hidden .topbar .circle,
body[data-page] .storefront-shared-header.banner-hidden .topbar .table-chip{
background:rgba(255,255,255,.82)!important;
border:1px solid rgba(22,18,15,.08)!important;
color:var(--ink,#16120f)!important;
text-shadow:none!important;
box-shadow:0 8px 26px rgba(22,18,15,.10),inset 0 1px 0 rgba(255,255,255,.9)!important;
}
body[data-page] .storefront-shared-header.banner-hidden .topbar .favorite-button svg{
stroke:#d81f2a;
}
/* ==========================================================================
Storefront — branding + offer carousel
Branding sits on the page's own ground between the search capsule and the
offers, so the restaurant's name reads as its name rather than as part of a
banner graphic.
========================================================================== */
/* ---- Offer carousel ------------------------------------------------------
The active card is narrower than the viewport and centred, so the offers on
either side show at the edges. That sliver is the affordance: it is what
tells a diner there is more than one offer, and it is why the track is built
with a clone at each end (see renderStoreBanners) rather than simply padded —
padding leaves the first and last slide with an empty gap beside them.
-------------------------------------------------------------------------- */
.store-banners{margin:0 0 18px}
.store-banners[hidden]{display:none!important}
/* The glass the artwork sits on. Bleeding past the page gutter lets the
neighbouring cards run to the screen edge, which is what makes the peek read
as a strip continuing rather than as two cropped boxes. */
.store-banner-card{
position:relative;
margin:0 calc(var(--store-gutter, 14px) * -1);
padding:10px 0;
background:rgba(255,255,255,.42);
border-top:1px solid rgba(255,255,255,.55);
border-bottom:1px solid rgba(255,255,255,.55);
backdrop-filter:blur(16px) saturate(1.25);
-webkit-backdrop-filter:blur(16px) saturate(1.25);
box-shadow:
inset 0 1px 0 rgba(255,255,255,.6),
inset 0 -2px 8px rgba(22,18,15,.05);
}
/* Browsers without backdrop-filter would show a near-transparent band that reads
as a rendering fault; give them a solid-enough tint instead. */
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
.store-banner-card{background:rgba(255,255,255,.72)}
}
.store-banner-viewport{overflow:hidden}
.store-banner-track{
display:flex;
gap:12px;
transition:transform .35s cubic-bezier(.4,0,.2,1);
will-change:transform;
}
/* Dragging must follow the finger exactly, and the clone snap must not animate. */
.store-banner-track.is-dragging{transition:none}
.store-banner-slide{
flex:0 0 82%;
min-width:0;position:relative;
aspect-ratio:16/9;
border-radius:18px;overflow:hidden;
background:rgba(20,25,35,.06);
box-shadow:0 10px 26px rgba(22,18,15,.16);
/* Neighbours sit back so the centre card is unmistakably the active one. The
active slide is marked from JS (bannerPlace) and returns to full size. */
opacity:.5;transform:scale(.93);
transition:opacity .35s ease,transform .35s ease;
}
.store-banner-slide.is-active{opacity:1;transform:none}
.store-banner-slide>img{width:100%;height:100%;object-fit:cover;display:block}
.store-banner-slide>a{display:block;width:100%;height:100%}
.store-banner-cap{
position:absolute;left:0;right:0;bottom:0;
padding:30px 16px 14px;
display:flex;flex-direction:column;gap:2px;pointer-events:none;
}
/* Which scrim applies is decided from the chosen text colour in renderStoreBanners(),
so a restaurant that picks dark text still gets readable contrast. */
.store-banner-cap.is-on-dark{background:linear-gradient(to top,rgba(10,14,20,.82),rgba(10,14,20,0))}
.store-banner-cap.is-on-light{background:linear-gradient(to top,rgba(255,255,255,.88),rgba(255,255,255,0))}
.store-banner-cap b{font-size:17px;line-height:1.25;text-wrap:balance}
.store-banner-cap span{font-size:12.5px;opacity:.9;line-height:1.35}
/* Dots sit below the glass band, not on the artwork. */
.store-banner-dots{display:flex;justify-content:center;gap:7px;margin-top:12px}
.store-banner-dots button{
width:6px;height:6px;padding:0;border:0;border-radius:999px;
background:rgba(22,18,15,.22);cursor:pointer;
transition:width .3s,background .3s;
}
.store-banner-dots button[aria-current="true"]{width:20px;background:var(--ink,#16120f)}
/* One offer is not a carousel: no peek, no scaling back, no dots. */
.store-banner-card.is-single .store-banner-slide{flex-basis:100%;opacity:1;transform:none}
@media(min-width:721px){
.store-banner-slide{flex:0 0 62%;aspect-ratio:21/9}
.store-banner-cap b{font-size:20px}
.store-banner-cap span{font-size:14px}
}
@media(min-width:1024px){
.store-banner-slide{flex:0 0 52%}
}
@media(prefers-reduced-motion:reduce){
/* Stop the slide animation; JS also stops advancing (see startBannerRotation). */
.store-banner-track,.store-banner-slide{transition:none}
}
/* ==========================================================================
Storefront menu — filter bar + compaction
The front screen is the whole product: a diner should reach real dishes
without scrolling. Everything above the menu was trimmed, and the diet
switch was given no row of its own.
========================================================================== */
/* The sticky bar moves from .category-tabs up to this wrapper, so the tabs can
scroll horizontally underneath a switch that stays pinned. The tabs keep the
scrolling; the wrapper takes the sticky, the glass and the bleed. */
body[data-page="home"] .menu-filter-bar{
position:sticky!important;top:66px!important;z-index:46!important;
display:flex!important;align-items:center!important;gap:8px!important;
margin:0 -14px 8px!important;padding:7px 14px 8px!important;
border-radius:0 0 22px 22px;
background:linear-gradient(180deg,rgba(255,248,237,.96),rgba(255,248,237,.78))!important;
-webkit-backdrop-filter:blur(18px) saturate(1.5)!important;
backdrop-filter:blur(18px) saturate(1.5)!important;
border-bottom:1px solid rgba(255,255,255,.54);
}
/* Everything the tabs used to own as the sticky element is handed back. Left as
plain overflow scrolling inside the bar. */
body[data-page="home"] .menu-filter-bar .category-tabs{
position:static!important;top:auto!important;
flex:1 1 auto!important;min-width:0!important;
/* No left padding: the scroller's own 2px sat on top of the bar's 14px gutter and
put the first category pill at 16px while everything else started at 14px. */
margin:0!important;padding:0 0 2px!important;
background:none!important;
-webkit-backdrop-filter:none!important;backdrop-filter:none!important;
border:0!important;border-radius:0!important;
}
body[data-page="home"] .menu-filter-bar .category-tabs button{padding:10px 13px!important}
/* The switch. Glass so it reads as floating over the tabs sliding past behind it,
which is also the honest signal that it is not one of them. */
body[data-page="home"] .diet-switch{
flex:0 0 auto;display:flex;gap:5px;padding:4px;
border-radius:999px;
background:rgba(255,255,255,.44);
border:1px solid rgba(255,255,255,.62);
-webkit-backdrop-filter:blur(20px) saturate(1.7);
backdrop-filter:blur(20px) saturate(1.7);
box-shadow:inset 0 1px 0 rgba(255,255,255,.72),0 8px 22px rgba(42,22,8,.12);
}
/* Dormant is a muted version of the mark's own colour, not grey. These two symbols
are recognised by colour before shape in India, and a grey veg mark is a mark a
diner has to stop and decode. */
body[data-page="home"] .diet-switch button[data-diet="veg"]{color:rgba(26,143,74,.5)}
@media(hover:hover){
body[data-page="home"] .diet-switch button:hover{filter:brightness(.85)}
}
/* ---- Compaction ---------------------------------------------------------- */
/* Offers: a 16/9 card is a poster. A wider crop shows the same artwork in less
height, which is what buys the dishes their place on the first screen. */
.store-banners{margin-bottom:10px!important}
.store-banner-card{padding:7px 0!important}
.store-banner-slide{aspect-ratio:2.2/1!important}
.store-banner-dots{margin-top:8px!important}
/* Service circles sat in their own generous band between the tabs and the menu. */
body[data-page="home"] .service-circles{margin:2px 0 10px!important}
@media(max-width:720px){
/* Height only. Setting a width here was the alignment bug: these tiles sit in a
3-column grid, so pinning them to 62px left them stranded at the left edge of
109px cells and the row read as unevenly spaced. The cell governs the width. */
body[data-page="home"] .service-circles button{min-height:58px!important;padding:7px 6px!important}
}
/* The floating topbar was sized to sit on a 360px hero, where its bulk read as
deliberate. With no hero it is the only thing between the ticker and the
restaurant's name, and every pixel it takes is a pixel of menu pushed off the
first screen. Scoped to the menu page — the other sections keep their hero and
their original proportions. */
body[data-page="home"] .topbar{padding-top:8px!important;padding-bottom:8px!important}
body[data-page="home"] .topbar .circle{width:44px!important;height:44px!important;min-width:44px!important}
@media(max-width:720px){
body[data-page="home"] .storefront-shared-header.banner-hidden .cover{
min-height:calc(112px + env(safe-area-inset-top))!important;
padding-top:calc(112px + env(safe-area-inset-top))!important;
}
}
body[data-page="home"] .storefront-shared-header.banner-hidden .cover{
min-height:calc(120px + env(safe-area-inset-top))!important;
padding-top:calc(120px + env(safe-area-inset-top))!important;
}
/* ==========================================================================
Storefront header — brand capsule
The header is the capsule and the wishlist button. The capsule is sized by
its content, so a short name gives a short capsule, and it is capped so a
long one truncates instead of running into the wishlist button.
========================================================================== */
.topbar{
/* Was a 3-column grid built around the middle capsule that no longer exists.
Two items, pushed to the ends, with the capsule free to grow between them. */
display:flex!important;
grid-template-columns:none!important;
align-items:center;
justify-content:space-between!important;
gap:10px;
}
.brand-capsule{
display:flex;align-items:center;gap:9px;min-width:0;
/* Shrink-to-fit: the capsule is only as wide as the logo plus the name… */
flex:0 1 auto;
/* …until the name would reach the wishlist button, which is 46px plus the
flex gap. Past that the name ellipsises and the capsule grows no further. */
max-width:calc(100% - 58px);
height:46px;padding:0 16px 0 4px;
border:0;border-radius:999px;
background:rgba(255,255,255,.82);
-webkit-backdrop-filter:blur(22px) saturate(1.7);
backdrop-filter:blur(22px) saturate(1.7);
box-shadow:0 8px 26px rgba(22,18,15,.10),inset 0 1px 0 rgba(255,255,255,.9);
color:var(--ink,#16120f);
text-align:left;
}
.brand-capsule-logo{
width:38px;height:38px;min-width:38px;
border-radius:50%;overflow:hidden;
display:grid;place-items:center;
background:rgba(22,18,15,.06);
font-weight:900;font-size:14px;line-height:1;
}
.brand-capsule-logo img{width:100%;height:100%;object-fit:cover;display:block}
.brand-capsule-name{
min-width:0;
font-size:15px;line-height:1.1;font-weight:900;letter-spacing:-.02em;
text-transform:uppercase;
/* The truncation that lets the cap above be a cap rather than an overflow. */
overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
@media(max-width:420px){
.brand-capsule{height:44px;padding-right:14px}
.brand-capsule-logo{width:36px;height:36px;min-width:36px}
.brand-capsule-name{font-size:14px}
}
/* Search, moved out of the header into the sticky category bar. */
body[data-page="home"] .menu-search-btn{
flex:0 0 auto;width:38px;height:38px;min-width:38px;padding:0;border:0;
border-radius:50%;display:grid;place-items:center;
background:rgba(255,255,255,.55);
border:1px solid rgba(255,255,255,.62);
-webkit-backdrop-filter:blur(20px) saturate(1.7);
backdrop-filter:blur(20px) saturate(1.7);
box-shadow:inset 0 1px 0 rgba(255,255,255,.72),0 8px 22px rgba(42,22,8,.12);
color:var(--ink,#16120f);
}
body[data-page="home"] .menu-search-btn svg{width:19px;height:19px;display:block}
body[data-page="home"] .menu-search-btn[aria-expanded="true"]{
background:var(--ink,#16120f);color:#fff;
}
/* Table label, moved out of the header into the cart. */
.cart-table-label{
display:block;margin-top:4px;
font-size:12px;line-height:1;font-weight:900;
color:var(--muted,rgba(22,18,15,.6));
}
.cart-table-label:empty{display:none}
/* ==========================================================================
Offer ticker — pinned to the very bottom, under the nav
It was a fixed strip above the header, where it cost 38px of every first
screen before a diner had seen a single dish. It is now pinned to the bottom
edge instead, sitting UNDER the floating nav pill rather than behind it.
Every rule that pinned it to the top, and every offset the header carried to
clear it, is overridden here in one place.
========================================================================== */
body[data-page="home"] .storefront-top-ticker,
body[data-page="tracking"] .storefront-top-ticker,
body[data-page="feedback"] .storefront-top-ticker,
body[data-page="profile"] .storefront-top-ticker{
position:fixed!important;
top:auto!important;bottom:0!important;left:0!important;right:0!important;
height:calc(38px + env(safe-area-inset-bottom))!important;
padding:0 0 env(safe-area-inset-bottom)!important;
margin:0!important;
border:0!important;border-radius:0!important;box-shadow:none!important;
/* Opaque, not 94%. The strip has backdrop-filter switched off elsewhere, so the
6% it let through was unblurred page content smearing behind the text rather
than any kind of glass — and it left the bar reading as a slightly lifted
lighter band instead of a clean edge to the screen. */
background:#16120f!important;
color:#fff!important;
overflow:hidden!important;
/* Under the nav pill (6000), above page content. The nav is lifted clear of it
below, so the two never overlap. */
z-index:5900!important;
}
/* The nav pill rides above the ticker instead of on top of it. */
/* …and the page keeps enough room at the foot for both, so the last dish and the
footer are never trapped underneath them. */
body[data-page="home"],
body[data-page="tracking"],
body[data-page="feedback"],
body[data-page="profile"]{
padding-bottom:calc(160px + env(safe-area-inset-bottom))!important;
}
/* The header sat 46px down to clear the ticker that is no longer above it. */
body[data-page="home"] .storefront-shared-header .topbar,
body[data-page="tracking"] .storefront-shared-header .topbar,
body[data-page="feedback"] .storefront-shared-header .topbar,
body[data-page="profile"] .storefront-shared-header .topbar{
top:calc(12px + env(safe-area-inset-top))!important;
}
/* …and the menu spacer only has to clear the header now: no ticker above it, and
no branding block below it, since the name moved into the header capsule. */
body[data-page="home"] .storefront-shared-header.banner-hidden .cover{
min-height:calc(74px + env(safe-area-inset-top))!important;
padding-top:calc(74px + env(safe-area-inset-top))!important;
}
@media(max-width:720px){
body[data-page="home"] .storefront-shared-header.banner-hidden .cover{
min-height:calc(70px + env(safe-area-inset-top))!important;
padding-top:calc(70px + env(safe-area-inset-top))!important;
}
}
/* The sticky category bar and the search sheet were both offset by the old ticker. */
body[data-page="home"] .menu-filter-bar{top:calc(70px + env(safe-area-inset-top))!important}
/* Service tiles: one line per label, so "Extra plates" cannot wrap to two and
throw its icon out of line with Water and Bill. */
body[data-page="home"] .service-actions.service-circles button small{
display:block;max-width:100%;
font-size:10.5px;line-height:1;
white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
body[data-page="home"] .service-actions.service-circles button{
display:flex!important;flex-direction:column!important;
align-items:center!important;justify-content:center!important;gap:5px!important;
}
/* Category capsules were sized for a page with far more room than this one has. */
body[data-page="home"] .menu-filter-bar .category-tabs button{
padding:8px 12px!important;font-size:12.5px!important;
}
body[data-page="home"] .menu-filter-bar{gap:7px!important;padding:6px 14px 7px!important}
/* ==========================================================================
Combos
One per row at any width. A combo is a whole offer — its contents line is the
reason a diner picks it, and that line is unreadable in a half-width tile, so
these deliberately do not join the dish grid.
========================================================================== */
.store-combos{display:block;margin:18px 0 6px}
.store-combos[hidden]{display:none!important}
.combo-heading{
margin:0 0 12px;
font-family:'Archivo Black',Inter,sans-serif;
font-size:clamp(22px,6vw,30px);line-height:1;
letter-spacing:-.045em;text-transform:uppercase;
color:var(--ink,#16120f);
}
.combo-card{
display:grid;
grid-template-columns:132px minmax(0,1fr);
gap:14px;align-items:stretch;
margin-bottom:14px;
padding:12px;
border-radius:26px;
background:rgba(255,252,246,.94);
border:1px solid rgba(255,255,255,.6);
box-shadow:inset 0 1px 0 rgba(255,255,255,.7),0 16px 44px rgba(42,22,8,.13);
overflow:hidden;
}
.combo-card:last-child{margin-bottom:0}
.combo-card.is-oos{opacity:.62}
.combo-card-media{
min-height:120px;border-radius:19px;
background:rgba(22,18,15,.06) center/cover no-repeat;
}
.combo-card-body{display:flex;flex-direction:column;gap:7px;min-width:0}
.combo-card-labels{display:flex;gap:6px;flex-wrap:wrap}
.combo-save-label{background:#e8f8ee;color:var(--green,#1a8f4a)}
.combo-card h3{margin:0;font-size:19px;line-height:1.15;letter-spacing:-.02em;text-wrap:balance}
.combo-card-contents{
margin:0;font-size:12.5px;line-height:1.45;font-weight:800;
color:var(--ink,#16120f);
}
.combo-card-desc{
margin:0;font-size:12.5px;line-height:1.45;color:var(--muted,rgba(22,18,15,.6));
display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.combo-card-foot{
display:flex;align-items:center;justify-content:space-between;gap:10px;
margin-top:auto;padding-top:4px;
}
.combo-card-foot .price{margin:0}
.combo-add{
border:0;border-radius:999px;padding:11px 18px;
background:var(--ink,#16120f);color:#fff;
font-weight:900;font-size:13px;line-height:1;white-space:nowrap;
}
.combo-oos{font-size:12px;font-weight:900;color:var(--muted,rgba(22,18,15,.6))}
/* The button beside the categories that jumps down to them. */
body[data-page="home"] .combo-jump-btn{
flex:0 0 auto;border:0;
height:38px;padding:0 15px;border-radius:999px;
font-size:12.5px;line-height:1;font-weight:900;white-space:nowrap;
background:linear-gradient(135deg,var(--orange,#ff5a00),var(--red,#d81f2a));
color:#fff;
box-shadow:0 8px 22px rgba(216,31,42,.22);
}
body[data-page="home"] .combo-jump-btn[hidden]{display:none!important}
@media(max-width:420px){
.combo-card{grid-template-columns:104px minmax(0,1fr);gap:11px;padding:10px}
.combo-card-media{min-height:104px}
.combo-card h3{font-size:17px}
}
/* Wide screens keep one combo per row — the whole point of the block — but the
card stops stretching a 132px image across a 1100px page. */
@media(min-width:860px){
.combo-card{grid-template-columns:220px minmax(0,1fr);gap:18px;padding:14px}
.combo-card-media{min-height:160px}
.combo-card h3{font-size:23px}
}
/* ---------- Admin: combo builder ---------- */
.combo-picker{display:flex;flex-direction:column;gap:10px}
.combo-picker-add{
display:grid;
grid-template-columns:minmax(0,1fr) 84px auto;
gap:8px;align-items:center;
}
.combo-picker-add select,
.combo-picker-add input{
height:40px;min-width:0;
border:1px solid var(--a-border,rgba(22,18,15,.14));
border-radius:10px;padding:0 11px;
background:#fff;color:var(--a-text,#16120f);font:inherit;
}
.combo-picker-add button{height:40px;white-space:nowrap}
.combo-picker-rows{display:flex;flex-direction:column;gap:6px}
.combo-row{
display:grid;
grid-template-columns:minmax(0,1fr) auto auto;
gap:10px;align-items:center;
padding:9px 12px;border-radius:10px;
background:rgba(22,18,15,.04);
border:1px solid var(--a-border,rgba(22,18,15,.09));
}
.combo-row b{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:700}
.combo-row span{font-size:12.5px;color:var(--a-muted,rgba(22,18,15,.6));white-space:nowrap}
.combo-row button{padding:5px 10px;font-size:12px}
.combo-picker .empty-state{margin:0;font-size:13px;color:var(--a-muted,rgba(22,18,15,.6))}
.admin-combo-list{display:flex;flex-direction:column;gap:12px}
@media(max-width:560px){
.combo-picker-add{grid-template-columns:minmax(0,1fr) 72px;grid-template-areas:"sel qty" "btn btn"}
.combo-picker-add select{grid-area:sel}
.combo-picker-add input{grid-area:qty}
.combo-picker-add button{grid-area:btn}
}
/* ==========================================================================
Storefront glass — one recipe
The capsule, the search button and the diet switch were each mixing their own
blur, tint and shadow, so three controls sitting on the same row read as three
different materials. They share these tokens now.
The tint is deliberately low: at .82 white the blur behind it is invisible and
the capsule just looks like a solid chip. Glass has to let the page move
underneath it or it is not glass.
========================================================================== */
body[data-page="home"]{
--glass-tint:rgba(255,255,255,.52);
--glass-tint-strong:rgba(255,255,255,.62);
--glass-edge:rgba(255,255,255,.72);
--glass-blur:blur(26px) saturate(1.9);
--glass-shadow:0 10px 30px rgba(42,22,8,.14);
--glass-inner:inset 0 1px 0 rgba(255,255,255,.85), inset 0 -8px 20px rgba(255,255,255,.16);
}
body[data-page="home"] .brand-capsule,
body[data-page="home"] .menu-search-btn,
body[data-page="home"] .diet-switch,
body[data-page="home"] .topbar .favorite-button{
background:var(--glass-tint)!important;
border:1px solid var(--glass-edge)!important;
-webkit-backdrop-filter:var(--glass-blur)!important;
backdrop-filter:var(--glass-blur)!important;
box-shadow:var(--glass-inner),var(--glass-shadow)!important;
}
/* The logo well reads as a recess cut into the glass rather than a pasted circle. */
body[data-page="home"] .brand-capsule-logo{
background:rgba(22,18,15,.07);
box-shadow:inset 0 1px 2px rgba(22,18,15,.16),0 1px 0 rgba(255,255,255,.7);
}
/* Slightly denser behind text, which needs more contrast than an icon does. */
body[data-page="home"] .brand-capsule{background:var(--glass-tint-strong)!important}
body[data-page="home"] .brand-capsule-name{color:var(--ink,#16120f)}
/* Browsers with no backdrop-filter would show a washed-out panel with the page
legible straight through it. They get an opaque chip instead. */
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
body[data-page="home"] .brand-capsule,
body[data-page="home"] .menu-search-btn,
body[data-page="home"] .diet-switch,
body[data-page="home"] .topbar .favorite-button{
background:rgba(255,252,246,.95)!important;
}
}
/* ==========================================================================
Front screen — depth
The glass controls were technically correct and still looked like flat chips,
because the only thing behind them was flat cream: blurring one cream is the
same cream. Glass needs something underneath it to bend. This warms the top of
the page so the header has tone to sit on, and gives the capsule the specular
top edge and cast shadow that read as a physical pane.
========================================================================== */
body[data-page="home"]::before{
content:"";
position:fixed;inset:0 0 auto;height:340px;
z-index:0;pointer-events:none;
background:
radial-gradient(120% 80% at 12% 0%,rgba(255,170,80,.20),transparent 62%),
radial-gradient(90% 70% at 92% 4%,rgba(216,31,42,.11),transparent 58%);
}
/* Everything real sits above the wash. Only the page shell needs lifting — the nav
and the cart are position:fixed and already stack above it, and declaring
position:relative on them tore them out of fixed positioning and dropped the
bottom nav off the screen entirely. */
body[data-page="home"] .app-shell{position:relative;z-index:1}
body[data-page="home"] .storefront-shared-header{z-index:60}
/* A pane of glass, not a painted chip: brighter along the top edge where light
catches it, a hairline dark line under it, and a soft cast shadow. */
body[data-page="home"] .brand-capsule,
body[data-page="home"] .menu-search-btn,
body[data-page="home"] .diet-switch,
body[data-page="home"] .topbar .favorite-button{
background:linear-gradient(160deg,rgba(255,255,255,.74),rgba(255,255,255,.44))!important;
box-shadow:
inset 0 1px 0 rgba(255,255,255,.95),
inset 0 -10px 22px rgba(255,255,255,.20),
0 1px 0 rgba(22,18,15,.05),
0 14px 34px rgba(42,22,8,.16)!important;
}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
body[data-page="home"] .brand-capsule,
body[data-page="home"] .menu-search-btn,
body[data-page="home"] .diet-switch,
body[data-page="home"] .topbar .favorite-button{
background:rgba(255,252,246,.96)!important;
}
}
/* Dish cards: the photo carried all the weight and the text block below it read
as an afterthought. A touch more contrast on the name, a lighter description,
and a price that is clearly the last thing you read. */
body[data-page="home"] .menu-item h3{letter-spacing:-.025em}
body[data-page="home"] .menu-item .price{letter-spacing:-.02em}
body[data-page="home"] .item-img{box-shadow:inset 0 0 0 1px rgba(22,18,15,.05)}
body[data-page="home"] .options-label{background:rgba(22,18,15,.06);color:var(--ink,#16120f)}
/* ==========================================================================
Header alignment + ticker trim
The topbar box sat at 12px AND carried 14px of its own padding, so the capsule
and the wishlist button landed at 26px while the category pills, the service
tiles and the dish grid all start at 14px. The header read as inset from the
rest of the page. The padding goes, and the box itself is sized so its edges
fall on the same 14px gutter everything else uses.
========================================================================== */
body[data-page="home"] .topbar,
body[data-page="tracking"] .topbar,
body[data-page="feedback"] .topbar,
body[data-page="profile"] .topbar{
padding-left:0!important;padding-right:0!important;
width:calc(100% - 28px)!important;
}
@media(min-width:860px){
/* The shell is min(1180px, 100% - 40px) with 26px of main padding, so content
starts 46px in from the viewport at narrow desktop widths. */
body[data-page="home"] .topbar,
body[data-page="tracking"] .topbar,
body[data-page="feedback"] .topbar,
body[data-page="profile"] .topbar{
width:min(1128px,calc(100% - 92px))!important;
}
}
/* Ticker: shorter, and the text sat with 12px of air above and below it inside a
38px strip, which is what showed as slack along the bottom edge. */
body[data-page="home"] .storefront-top-ticker,
body[data-page="tracking"] .storefront-top-ticker,
body[data-page="feedback"] .storefront-top-ticker,
body[data-page="profile"] .storefront-top-ticker{
height:calc(28px + env(safe-area-inset-bottom))!important;
}
body[data-page="home"] .storefront-top-ticker .ticker-track,
body[data-page="tracking"] .storefront-top-ticker .ticker-track,
body[data-page="feedback"] .storefront-top-ticker .ticker-track,
body[data-page="profile"] .storefront-top-ticker .ticker-track{
font-size:11px!important;line-height:1!important;
}
/* The nav rides just above the shorter strip. */
/* The cart bar rides clear of the nav.
.floating-cart is position:static inside .floating-cart-row — the row is the
fixed element, so the row is what has to move. The row also carries z-index
6100 against the nav's 6000, which is why it painted straight over the four
nav buttons instead of being hidden behind them.
Nav occupies 36px..94px from the bottom, so the row clears it at 102px. */
/* ==========================================================================
DARK MODE
==========================================================================
Written as an override layer, not a refactor. The stylesheet carries roughly
800 hard-coded colour declarations (392 rgba(255,255,255,…), 290 rgba(22,18,15,…),
149 white backgrounds) and barely uses the tokens that already exist — --card is
referenced zero times. Rewriting all of that to flow through tokens would touch
every rule in the file and put the working light theme at risk for no user-facing
gain. Instead the surfaces are grouped by what they ARE — page, card, glass,
sheet, chip, text, field — and each group is restated once here.
Everything below is scoped to [data-theme="dark"], so the light theme is
byte-for-byte unchanged.
========================================================================== */
:root{
/* Light values, named so the dark block has something to answer. */
--surface:#ffffff;
--surface-2:#fff8ed;
--surface-sunk:rgba(22,18,15,.05);
--border-soft:rgba(22,18,15,.10);
--text:#16120f;
--text-muted:rgba(22,18,15,.64);
--text-faint:rgba(22,18,15,.45);
}
html[data-theme="dark"]{
color-scheme:dark; /* native scrollbars, form controls and caret follow */
--surface:#1b1714;
--surface-2:#141110;
--surface-sunk:rgba(255,255,255,.06);
--border-soft:rgba(255,255,255,.12);
--text:#f6efe6;
--text-muted:rgba(246,239,230,.68);
--text-faint:rgba(246,239,230,.44);
/* The existing tokens are redirected at the same time, so the ~130 rules that DO
use var(--ink)/--muted/--line/--paper come along without being touched. */
--ink:#f6efe6;
--muted:rgba(246,239,230,.68);
--line:rgba(255,255,255,.14);
--paper:#141110;
--card:#1b1714;
--shadow:0 16px 42px rgba(0,0,0,.55);
--soft-shadow:0 10px 28px rgba(0,0,0,.42);
/* Warm accents lifted slightly: the light-theme orange/red are tuned against
cream and go muddy on a dark ground. */
--orange:#ff7a33;
--red:#ff5a52;
--green:#4fbf78;
--gold:#ffc453;
}
/* ---- page ground -------------------------------------------------------- */
html[data-theme="dark"] body{
background:radial-gradient(circle at 20% 0,#221c18 0,#171412 38%,#121010 100%)!important;
color:var(--text);
}
html[data-theme="dark"] body[data-page="home"]::before{
background:
radial-gradient(120% 80% at 12% 0%,rgba(255,140,60,.14),transparent 62%),
radial-gradient(90% 70% at 92% 4%,rgba(255,90,82,.10),transparent 58%);
}
/* ---- cards -------------------------------------------------------------- */
html[data-theme="dark"] .menu-item,
html[data-theme="dark"] .combo-card,
html[data-theme="dark"] .customer-sections article,
html[data-theme="dark"] .offer-card,
html[data-theme="dark"] .shop-details,
html[data-theme="dark"] .page-panel,
html[data-theme="dark"] .tracking-main-card,
html[data-theme="dark"] .order-details-card,
html[data-theme="dark"] .bill-box,
html[data-theme="dark"] .cart-line,
html[data-theme="dark"] .track-live-card,
html[data-theme="dark"] .notice-card{
background:var(--surface)!important;
border-color:var(--border-soft)!important;
color:var(--text);
box-shadow:0 14px 36px rgba(0,0,0,.46)!important;
}
html[data-theme="dark"] .menu-item h3,
html[data-theme="dark"] .combo-card h3,
html[data-theme="dark"] .customer-sections h2,
html[data-theme="dark"] .cart-line b,
html[data-theme="dark"] .bill-box b,
html[data-theme="dark"] .combo-card-contents,
html[data-theme="dark"] .combo-heading{color:var(--text)!important}
html[data-theme="dark"] .menu-item p,
html[data-theme="dark"] .combo-card-desc,
html[data-theme="dark"] .customer-sections p,
html[data-theme="dark"] .cart-line small,
html[data-theme="dark"] .bill-box div,
html[data-theme="dark"] .empty-state,
html[data-theme="dark"] .shop-details p{color:var(--text-muted)!important}
/* Dish photos sit a shade back so they do not glare out of a dark page. */
html[data-theme="dark"] .item-img,
html[data-theme="dark"] .combo-card-media{
filter:brightness(.92) saturate(1.02);
box-shadow:inset 0 0 0 1px rgba(255,255,255,.07)!important;
}
/* ---- glass -------------------------------------------------------------- */
/* Same material, inverted: a dark tint with a light edge, instead of a light tint
with a lighter edge. The blur and the specular top edge are kept, because that
is what made it read as glass rather than a painted chip. */
html[data-theme="dark"] body[data-page="home"]{
--glass-tint:rgba(40,34,30,.58);
--glass-tint-strong:rgba(44,38,33,.72);
--glass-edge:rgba(255,255,255,.14);
--glass-shadow:0 14px 34px rgba(0,0,0,.55);
--glass-inner:inset 0 1px 0 rgba(255,255,255,.16), inset 0 -8px 20px rgba(0,0,0,.22);
}
html[data-theme="dark"] body[data-page="home"] .brand-capsule,
html[data-theme="dark"] body[data-page="home"] .menu-search-btn,
html[data-theme="dark"] body[data-page="home"] .diet-switch,
html[data-theme="dark"] body[data-page="home"] .topbar .favorite-button,
html[data-theme="dark"] body[data-page="home"] .theme-toggle{
background:linear-gradient(160deg,rgba(56,48,42,.78),rgba(34,29,26,.56))!important;
border:1px solid rgba(255,255,255,.14)!important;
box-shadow:
inset 0 1px 0 rgba(255,255,255,.18),
inset 0 -10px 22px rgba(0,0,0,.24),
0 14px 34px rgba(0,0,0,.5)!important;
color:var(--text)!important;
}
html[data-theme="dark"] .brand-capsule-name{color:var(--text)!important}
html[data-theme="dark"] .brand-capsule-logo{
background:rgba(255,255,255,.08);
box-shadow:inset 0 1px 2px rgba(0,0,0,.5),0 1px 0 rgba(255,255,255,.08);
}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
html[data-theme="dark"] body[data-page="home"] .brand-capsule,
html[data-theme="dark"] body[data-page="home"] .menu-search-btn,
html[data-theme="dark"] body[data-page="home"] .diet-switch,
html[data-theme="dark"] body[data-page="home"] .topbar .favorite-button,
html[data-theme="dark"] body[data-page="home"] .theme-toggle{
background:#2a2420!important;
}
}
/* Sticky filter bar and its pills. */
html[data-theme="dark"] body[data-page="home"] .menu-filter-bar{
background:linear-gradient(180deg,rgba(20,17,16,.96),rgba(20,17,16,.82))!important;
border-bottom:1px solid rgba(255,255,255,.10)!important;
}
html[data-theme="dark"] .category-tabs button,
html[data-theme="dark"] .service-actions button{
background:rgba(255,255,255,.06)!important;
border:1px solid rgba(255,255,255,.10)!important;
color:var(--text)!important;
box-shadow:none!important;
}
html[data-theme="dark"] .category-tabs button.active{
background:var(--text)!important;color:#141110!important;border-color:var(--text)!important;
}
/* Offers carousel band. */
html[data-theme="dark"] .store-banner-card{
background:rgba(255,255,255,.05)!important;
border-top:1px solid rgba(255,255,255,.09)!important;
border-bottom:1px solid rgba(255,255,255,.09)!important;
box-shadow:inset 0 1px 0 rgba(255,255,255,.08),inset 0 -2px 8px rgba(0,0,0,.3)!important;
}
html[data-theme="dark"] .store-banner-dots button{background:rgba(255,255,255,.28)}
html[data-theme="dark"] .store-banner-dots button[aria-current="true"]{background:var(--text)}
/* Bottom nav. */
html[data-theme="dark"] .store-bottom-nav{
background:rgba(32,27,24,.82)!important;
border:1px solid rgba(255,255,255,.12)!important;
box-shadow:0 18px 46px rgba(0,0,0,.6)!important;
}
html[data-theme="dark"] .store-nav-item{color:var(--text-muted)!important}
html[data-theme="dark"] .store-nav-item.is-active{color:var(--text)!important}
/* ---- sheets, drawers, modals ------------------------------------------- */
html[data-theme="dark"] .cart-drawer,
html[data-theme="dark"] .feedback-sheet-inner,
html[data-theme="dark"] .modal-card,
html[data-theme="dark"] .merge-table-modal-inner,
html[data-theme="dark"] .variant-sheet-inner{
background:var(--surface-2)!important;
color:var(--text)!important;
}
html[data-theme="dark"] .cart-head h2,
html[data-theme="dark"] .modal-card h2,
html[data-theme="dark"] .feedback-sheet h2,
html[data-theme="dark"] .feedback-sheet h3{color:var(--text)!important}
html[data-theme="dark"] .cart-head span,
html[data-theme="dark"] .modal-card p,
html[data-theme="dark"] .cart-table-label{color:var(--text-muted)!important}
html[data-theme="dark"] .modal{background:rgba(0,0,0,.66)}
/* ---- chips and labels --------------------------------------------------- */
html[data-theme="dark"] .label{background:rgba(255,255,255,.09);color:var(--text)}
html[data-theme="dark"] .label.veg{background:rgba(79,191,120,.18);color:#7fe0a2}
html[data-theme="dark"] .options-label{background:rgba(255,255,255,.09)!important;color:var(--text)!important}
html[data-theme="dark"] .combo-save-label{background:rgba(79,191,120,.18);color:#7fe0a2}
html[data-theme="dark"] .rating-label{background:rgba(255,196,83,.16);color:#ffd07a}
html[data-theme="dark"] .footer-meta small,
html[data-theme="dark"] .steps span{background:rgba(255,255,255,.07);color:var(--text-muted)}
/* ---- fields ------------------------------------------------------------- */
html[data-theme="dark"] input,
html[data-theme="dark"] textarea,
html[data-theme="dark"] select{
background:rgba(255,255,255,.06)!important;
border-color:rgba(255,255,255,.14)!important;
color:var(--text)!important;
}
html[data-theme="dark"] input::placeholder,
html[data-theme="dark"] textarea::placeholder{color:var(--text-faint)!important}
/* ---- section heroes (Tracking / Feedback / Profile / Favourites) --------- */
html[data-theme="dark"] .subpage-header::after{
content:"";position:absolute;inset:0;border-radius:inherit;
background:rgba(0,0,0,.28);pointer-events:none;
}
/* ---- the toggle itself -------------------------------------------------- */
.theme-toggle{
width:44px;height:44px;min-width:44px;padding:0;border:0;
border-radius:50%;display:grid;place-items:center;
background:var(--glass-tint,rgba(255,255,255,.52));
border:1px solid var(--glass-edge,rgba(255,255,255,.72));
-webkit-backdrop-filter:var(--glass-blur,blur(26px) saturate(1.9));
backdrop-filter:var(--glass-blur,blur(26px) saturate(1.9));
box-shadow:var(--glass-inner),var(--glass-shadow);
color:var(--ink,#16120f);
cursor:pointer;
}
.theme-toggle svg{width:20px;height:20px;display:block}
/* One icon each; the script shows whichever is not the current theme, so the
button always pictures what tapping it will DO, not what is on. */
.theme-toggle .icon-moon{display:none}
html[data-theme="dark"] .theme-toggle .icon-moon{display:block}
html[data-theme="dark"] .theme-toggle .icon-sun{display:none}
@media(max-width:420px){
.theme-toggle{width:42px;height:42px;min-width:42px}
}
/* Two buttons on the right now, so the capsule stops that much sooner. */
.brand-capsule{max-width:calc(100% - 112px)}
@media(max-width:420px){.brand-capsule{max-width:calc(100% - 106px)}}
/* ---- dark mode: specificity corrections ---------------------------------
Three surfaces stayed light because the rules holding them light are more
specific than the dark block above, not because the dark block was missing:
.app-shell literal cream, later in file
body[data-page] .…banner-hidden .topbar .circle (0,5,1) beat my (0,4,2)
.store-bottom-nav .store-nav-item !important white gradient
Each is answered here with a selector that mirrors the winner, so the fix is
about matching them rather than escalating !important further.
------------------------------------------------------------------------ */
html[data-theme="dark"] .app-shell{
background:transparent!important; /* the body gradient is the ground now */
}
html[data-theme="dark"] body[data-page] .storefront-shared-header.banner-hidden .topbar .circle,
html[data-theme="dark"] body[data-page] .storefront-shared-header.banner-hidden .topbar .table-chip{
background:linear-gradient(160deg,rgba(56,48,42,.78),rgba(34,29,26,.56))!important;
border:1px solid rgba(255,255,255,.14)!important;
color:var(--text)!important;
box-shadow:
inset 0 1px 0 rgba(255,255,255,.18),
inset 0 -10px 22px rgba(0,0,0,.24),
0 14px 34px rgba(0,0,0,.5)!important;
}
/* The heart keeps its own red so it still reads as "saved". */
html[data-theme="dark"] .topbar .favorite-button svg{stroke:#ff6b62}
html[data-theme="dark"] .topbar .favorite-button.is-active svg{fill:#ff6b62;stroke:#ff6b62}
html[data-theme="dark"] .store-bottom-nav .store-nav-item{
background:rgba(255,255,255,.07)!important;
border:1px solid rgba(255,255,255,.10)!important;
color:var(--text-muted)!important;
box-shadow:none!important;
}
html[data-theme="dark"] .store-bottom-nav .store-nav-item.is-active{
background:linear-gradient(145deg,var(--orange),var(--red))!important;
color:#fff!important;
border-color:transparent!important;
}
/* The sticky filter bar's gradient is a literal cream pair too. */
html[data-theme="dark"] body[data-page="home"] .menu-filter-bar,
html[data-theme="dark"] body[data-page="home"] .category-tabs{
background:linear-gradient(180deg,rgba(20,17,16,.97),rgba(20,17,16,.86))!important;
}
/* ---- dark mode: contrast corrections ------------------------------------
Found by measuring every leaf text node against its composited background,
not by eye. Each of these was under the WCAG AA threshold (4.5:1 for body
text, 3:1 for large) on a dark ground.
------------------------------------------------------------------------ */
/* Price was --red (#ff5a52) on a #1b1714 card: 2.53:1. */
html[data-theme="dark"] .price,
html[data-theme="dark"] .bill-box .grand,
html[data-theme="dark"] .feedback-dish-list b{color:#ffab9f!important}
/* Rating chip: 2.39:1. */
html[data-theme="dark"] .rating-label{background:rgba(255,196,83,.20)!important;color:#ffdca0!important}
/* The cart drawer got its surface from the block above but its contents kept
light-theme colours — the empty-cart line measured 1.01:1, i.e. invisible. */
html[data-theme="dark"] .cart-drawer p,
html[data-theme="dark"] .cart-drawer label,
html[data-theme="dark"] .cart-drawer small,
html[data-theme="dark"] .cart-body p,
html[data-theme="dark"] .instructions label,
html[data-theme="dark"] #couponMsg{color:var(--text-muted)!important}
html[data-theme="dark"] #couponMsg.ok{color:#7fe0a2!important}
html[data-theme="dark"] .cart-clear-btn,
html[data-theme="dark"] .floating-clear,
html[data-theme="dark"] .see-all-coupons-btn{
color:var(--text)!important;
background:rgba(255,255,255,.10)!important;
border-color:rgba(255,255,255,.16)!important;
}
/* Footer tagline chip: 1.02:1 — light text on what is now a dark chip. */
html[data-theme="dark"] .footer-head span,
html[data-theme="dark"] .footer-head b{color:var(--text)!important}
html[data-theme="dark"] .footer-head b{background:rgba(255,255,255,.08)!important}
/* Cart count badge on the floating bar. */
html[data-theme="dark"] .floating-cart span{color:#fff!important}
html[data-theme="dark"] .floating-cart b{color:#fff!important}
/* The coupon card is a light panel nested inside the (already dark) cart drawer,
so every label on it was light-on-light — "See all coupons" measured 1.14:1. */
html[data-theme="dark"] .cart-coupon{
background:rgba(255,255,255,.06)!important;
border-color:rgba(255,255,255,.12)!important;
}
html[data-theme="dark"] .cart-coupon label,
html[data-theme="dark"] .cart-coupon small,
html[data-theme="dark"] .cart-coupon span{color:var(--text-muted)!important}
/* Count badge on the cart bar sat on --orange at 3.27:1. */
html[data-theme="dark"] .floating-cart span{background:#c2410c!important;color:#fff!important}
/* ---- light theme: pre-existing contrast misses --------------------------
Surfaced while measuring dark mode; these were already below WCAG AA in the
light theme and are not caused by it. All were marginal (3.76–4.28 against a
4.5 requirement), so each is nudged just far enough to pass rather than
restyled.
------------------------------------------------------------------------ */
html[data-theme="light"] .label.veg,
:root:not([data-theme="dark"]) .label.veg{color:#0f7038}
html[data-theme="light"] .bill-box .green,
:root:not([data-theme="dark"]) .bill-box .green{color:#0f7038}
html[data-theme="light"] .footer-head b,
:root:not([data-theme="dark"]) .footer-head b{color:rgba(22,18,15,.78)}
html[data-theme="light"] .shop-details p,
:root:not([data-theme="dark"]) .shop-details p{color:rgba(22,18,15,.72)}
/* ---- dark mode: section pages -------------------------------------------
The glass rules above are scoped to the menu page, so on Tracking / Feedback /
Profile / Favourites the capsule kept its LIGHT glass while the theme had
already switched the text to light — the restaurant's name went nearly
invisible on its own header. Those pages get the same dark glass.
------------------------------------------------------------------------ */
html[data-theme="dark"] body[data-page="tracking"] .brand-capsule,
html[data-theme="dark"] body[data-page="feedback"] .brand-capsule,
html[data-theme="dark"] body[data-page="profile"] .brand-capsule,
html[data-theme="dark"] body[data-page="tracking"] .theme-toggle,
html[data-theme="dark"] body[data-page="feedback"] .theme-toggle,
html[data-theme="dark"] body[data-page="profile"] .theme-toggle,
html[data-theme="dark"] body[data-page="tracking"] .topbar .circle,
html[data-theme="dark"] body[data-page="feedback"] .topbar .circle,
html[data-theme="dark"] body[data-page="profile"] .topbar .circle{
background:linear-gradient(160deg,rgba(30,25,22,.86),rgba(18,15,13,.72))!important;
border:1px solid rgba(255,255,255,.16)!important;
color:var(--text)!important;
box-shadow:inset 0 1px 0 rgba(255,255,255,.16),0 14px 34px rgba(0,0,0,.55)!important;
}
/* Secondary chips on those pages — "Order History" and friends — were light
glass carrying light text for the same reason. */
html[data-theme="dark"] .order-history-btn,
html[data-theme="dark"] .track-history-btn,
html[data-theme="dark"] .page-panel button.admin-btn-ghost,
html[data-theme="dark"] .tracking-main-card > button,
html[data-theme="dark"] .page-hero span{
background:rgba(255,255,255,.10)!important;
border:1px solid rgba(255,255,255,.16)!important;
color:var(--text)!important;
}
/* The section hero keeps its full colour in dark mode. It used to be dimmed to
brightness(.72) for text contrast, but the titles carry their own outline and
were already readable — all the dimming did was make every hero look dull. */
html[data-theme="dark"] .storefront-shared-header.is-section-hero .cover{
filter:none;
}
html[data-theme="dark"] .history-toggle{
background:rgba(255,255,255,.10)!important;
border:1px solid rgba(255,255,255,.16)!important;
color:var(--text)!important;
}
html[data-theme="dark"] .history-section,
html[data-theme="dark"] .history-list,
html[data-theme="dark"] .history-item{
background:var(--surface)!important;
border-color:var(--border-soft)!important;
color:var(--text)!important;
}
/* ---- dark mode: Profile page --------------------------------------------
The profile page has its own component set that none of the generic card or
text rules above reach. Measured at 10 failures, the worst at 1.13:1 — the
"Edit profile" and "Browse menu" buttons were effectively invisible.
------------------------------------------------------------------------ */
html[data-theme="dark"] .customer-profile-card,
html[data-theme="dark"] .customer-profile-form,
html[data-theme="dark"] .profile-facts{
background:var(--surface)!important;
border-color:var(--border-soft)!important;
color:var(--text)!important;
}
html[data-theme="dark"] .customer-profile-card h2,
html[data-theme="dark"] .profile-primary,
html[data-theme="dark"] .profile-facts dd{color:var(--text)!important}
html[data-theme="dark"] .customer-profile-card p,
html[data-theme="dark"] .customer-profile-card small,
html[data-theme="dark"] .profile-facts dt,
html[data-theme="dark"] .profile-form-note{color:var(--text-muted)!important}
html[data-theme="dark"] .profile-facts > div{
background:rgba(255,255,255,.05)!important;
border-color:rgba(255,255,255,.10)!important;
}
html[data-theme="dark"] .profile-avatar{
background:rgba(255,255,255,.10)!important;color:var(--text)!important;
}
/* Buttons: the ghost ones take the light-on-dark treatment, the primary keeps
the accent gradient with white text. */
html[data-theme="dark"] .profile-edit-toggle,
html[data-theme="dark"] .profile-logout,
html[data-theme="dark"] .profile-actions a{
background:rgba(255,255,255,.10)!important;
border:1px solid rgba(255,255,255,.16)!important;
color:var(--text)!important;
}
html[data-theme="dark"] .profile-action-primary{
background:linear-gradient(135deg,var(--orange),var(--red))!important;
border-color:transparent!important;
color:#fff!important;
}
html[data-theme="dark"] .profile-form-message{color:var(--text-muted)!important}
/* ==========================================================================
Borders off, banner reframed, footer nav aligned
========================================================================== */
/* ---- 1. no hairline borders behind controls, either theme ----------------
The glass got its edge from a 1px border, which on a dark ground reads as a
drawn outline around every button rather than as a lit edge. The material is
carried by the tint, the blur and the inner highlight instead — the border was
never doing the work. */
body[data-page="home"] .brand-capsule,
body[data-page="home"] .menu-search-btn,
body[data-page="home"] .diet-switch,
body[data-page="home"] .topbar .favorite-button,
body[data-page="home"] .theme-toggle,
body[data-page] .storefront-shared-header.banner-hidden .topbar .circle,
body[data-page] .storefront-shared-header.banner-hidden .topbar .table-chip,
.brand-capsule,.theme-toggle,
.category-tabs button,
.service-actions button,
.store-bottom-nav,
.store-bottom-nav .store-nav-item,
.menu-filter-bar,
html[data-theme="dark"] body[data-page="home"] .brand-capsule,
html[data-theme="dark"] body[data-page="home"] .menu-search-btn,
html[data-theme="dark"] body[data-page="home"] .diet-switch,
html[data-theme="dark"] body[data-page="home"] .topbar .favorite-button,
html[data-theme="dark"] body[data-page="home"] .theme-toggle,
html[data-theme="dark"] body[data-page] .storefront-shared-header.banner-hidden .topbar .circle,
html[data-theme="dark"] body[data-page] .storefront-shared-header.banner-hidden .topbar .table-chip,
html[data-theme="dark"] .category-tabs button,
html[data-theme="dark"] .service-actions button,
html[data-theme="dark"] .store-bottom-nav,
html[data-theme="dark"] .store-bottom-nav .store-nav-item,
html[data-theme="dark"] body[data-page="tracking"] .brand-capsule,
html[data-theme="dark"] body[data-page="feedback"] .brand-capsule,
html[data-theme="dark"] body[data-page="profile"] .brand-capsule,
html[data-theme="dark"] body[data-page="tracking"] .theme-toggle,
html[data-theme="dark"] body[data-page="feedback"] .theme-toggle,
html[data-theme="dark"] body[data-page="profile"] .theme-toggle,
html[data-theme="dark"] body[data-page="tracking"] .topbar .circle,
html[data-theme="dark"] body[data-page="feedback"] .topbar .circle,
html[data-theme="dark"] body[data-page="profile"] .topbar .circle{
border:0!important;
}
/* The filter bar's underline and the nav's outline went with them. */
body[data-page="home"] .menu-filter-bar,
html[data-theme="dark"] body[data-page="home"] .menu-filter-bar{
border-bottom:0!important;
}
/* Dark nav had an explicit rectangle drawn round it. */
html[data-theme="dark"] .store-bottom-nav{
box-shadow:0 18px 46px rgba(0,0,0,.62)!important;
}
/* ---- 2. the offers carousel --------------------------------------------
The band had a border top and bottom, which framed the whole strip as one
boxed component. The frame belongs to each offer, not to the rail: every
slide carries its own hairline, and the centred one is clearly larger than
its neighbours so the active offer is unmistakable. */
.store-banner-card{
border-top:0!important;
border-bottom:0!important;
background:transparent!important;
-webkit-backdrop-filter:none!important;
backdrop-filter:none!important;
box-shadow:none!important;
}
html[data-theme="dark"] .store-banner-card{
background:transparent!important;
border-top:0!important;border-bottom:0!important;box-shadow:none!important;
}
.store-banner-slide{
border:1px solid rgba(22,18,15,.10);
/* Was .93, which read as a rendering wobble rather than a choice. .42 went too
far the other way and the neighbours all but vanished — they have to stay
legible as offers, just plainly secondary to the one in front. */
opacity:.62!important;
transform:scale(.88)!important;
}
.store-banner-slide.is-active{
opacity:1!important;
transform:scale(1)!important;
box-shadow:0 16px 40px rgba(22,18,15,.26)!important;
}
html[data-theme="dark"] .store-banner-slide{border-color:rgba(255,255,255,.14)}
html[data-theme="dark"] .store-banner-slide.is-active{box-shadow:0 18px 44px rgba(0,0,0,.62)!important}
/* ---- 3. footer nav on the same gutter as the header --------------------- */
/* ---- dark mode: buttons built on --ink ----------------------------------
Redirecting --ink to a light colour for dark mode fixed all the TEXT that used
it, and broke every BUTTON that used it as a background. Two patterns existed:
background:var(--ink); color:#fff → white on near-white
background:#fff; color:var(--ink) → near-white on white
Both measured 1.14:1, i.e. invisible. They are restated as a proper inverted
button (light surface, dark label) and a dark ghost button respectively.
------------------------------------------------------------------------ */
html[data-theme="dark"] .combo-add,
html[data-theme="dark"] .coupon-input-row button,
html[data-theme="dark"] .coupon-modal-item button,
html[data-theme="dark"] .cart-head button,
html[data-theme="dark"] #closeModal,
html[data-theme="dark"] .line-controls button,
html[data-theme="dark"] .add-control button,
html[data-theme="dark"] .menu-add-single{
background:var(--text)!important;
color:#141110!important;
border:0!important;
}
html[data-theme="dark"] .addons-browse-btn{
background:rgba(255,255,255,.10)!important;
border:1px solid rgba(255,255,255,.16)!important;
color:var(--text)!important;
}
html[data-theme="dark"] .add-control{
background:rgba(28,24,21,.94)!important;border-color:rgba(255,255,255,.14)!important;
}
html[data-theme="dark"] .add-control span{color:var(--text)!important}
/* .floating-cart is NOT in the inverted set: it carries the accent gradient, and
inverting it turned the cart button white in dark mode. */
/* Combo saving chip: same green as the veg label, same 4.0:1 miss in light. */
html[data-theme="light"] .combo-save-label,
:root:not([data-theme="dark"]) .combo-save-label{color:#0f7038}
/* Cart count badge on the light theme measured 3.27:1 on --orange. */
html[data-theme="light"] .floating-cart span,
:root:not([data-theme="dark"]) .floating-cart span{background:#c2410c;color:#fff}
/* #applyCoupon keeps a brand-red background from another rule, so forcing a dark
label on it produced dark-on-dark. It takes white text instead. */
html[data-theme="dark"] button#applyCoupon,
html[data-theme="dark"] .coupon-input-row button#applyCoupon{
background:linear-gradient(135deg,var(--orange),var(--red))!important;
color:#fff!important;
}
/* Cart count badge, both themes, stated at id specificity so nothing outranks it. */
html .floating-cart span#cartCount{background:#b23c0a!important;color:#fff!important}
/* ---- dark mode: Feedback page -------------------------------------------
Like Profile, this page has its own components that none of the generic card
rules reach, so the whole thing stayed a light island on a dark page —
83 measured failures, the star row at 1.6:1.
------------------------------------------------------------------------ */
html[data-theme="dark"] .feedback-card,
html[data-theme="dark"] .feedback-panel,
html[data-theme="dark"] .feedback-card-scroll,
html[data-theme="dark"] .overall-rating{
background:var(--surface)!important;
border-color:var(--border-soft)!important;
color:var(--text)!important;
}
html[data-theme="dark"] .feedback-card h2,
html[data-theme="dark"] .feedback-panel h2,
html[data-theme="dark"] .overall-rating,
html[data-theme="dark"] .feedback-dish-list button{color:var(--text)!important}
html[data-theme="dark"] .feedback-card p,
html[data-theme="dark"] .feedback-panel p,
html[data-theme="dark"] .feedback-card small{color:var(--text-muted)!important}
html[data-theme="dark"] .feedback-dish-list button{
background:rgba(255,255,255,.06)!important;
border-color:rgba(255,255,255,.12)!important;
}
/* Stars: unfilled ones were a 24%-black glyph on white — invisible on a dark
card. They become a dim warm grey, and the filled state keeps the gold. */
html[data-theme="dark"] .star-input button{
background:rgba(255,255,255,.06)!important;
border-color:rgba(255,255,255,.12)!important;
color:rgba(246,239,230,.34)!important;
}
html[data-theme="dark"] .star-input button.active,
html[data-theme="dark"] .star-input button[aria-checked="true"],
html[data-theme="dark"] .star-input button.is-on{color:#ffc453!important}
html[data-theme="dark"] .feedback-sheet textarea,
html[data-theme="dark"] .page-panel textarea{
background:rgba(255,255,255,.06)!important;color:var(--text)!important;
}
/* The overall-rating stars are `.overall-rating button`, not `.star-input button` —
the rule above aimed at the wrong container and left them light-on-light. */
html[data-theme="dark"] .overall-rating button{
background:rgba(255,255,255,.06)!important;
border-color:rgba(255,255,255,.12)!important;
color:rgba(246,239,230,.42)!important;
}
html[data-theme="dark"] .overall-rating button.active,
html[data-theme="dark"] .overall-rating button.is-on,
html[data-theme="dark"] .overall-rating button[aria-checked="true"],
html[data-theme="dark"] .overall-rating button.selected{color:#ffc453!important}
/* ==========================================================================
Dark mode: neutral, not brown + cleaner chrome
==========================================================================
The first dark palette was built by darkening the light theme's warm cream,
which left every surface a shade of brown. Dark mode should read as neutral
dark; the warmth belongs to the accent, not the ground. All surfaces, glass
tints and washes are restated here on a neutral grey axis.
========================================================================== */
html[data-theme="dark"]{
--surface:#1c1c1f;
--surface-2:#141416;
--surface-sunk:rgba(255,255,255,.06);
--border-soft:rgba(255,255,255,.11);
--text:#f2f2f5;
--text-muted:rgba(242,242,245,.66);
--text-faint:rgba(242,242,245,.42);
--ink:#f2f2f5;
--muted:rgba(242,242,245,.66);
--line:rgba(255,255,255,.13);
--paper:#141416;
--card:#1c1c1f;
}
html[data-theme="dark"] body{
background:radial-gradient(circle at 20% 0,#1f1f22 0,#171719 40%,#111113 100%)!important;
}
/* The top wash was two warm radials; a dark page does not need a tint at all,
only a faint lift so the header has something to sit on. */
html[data-theme="dark"] body[data-page="home"]::before{
background:radial-gradient(120% 80% at 50% 0%,rgba(255,255,255,.05),transparent 64%);
}
/* Glass on the neutral axis. */
html[data-theme="dark"] body[data-page="home"] .brand-capsule,
html[data-theme="dark"] body[data-page="home"] .menu-search-btn,
html[data-theme="dark"] body[data-page="home"] .diet-switch,
html[data-theme="dark"] body[data-page="home"] .topbar .favorite-button,
html[data-theme="dark"] body[data-page="home"] .theme-toggle,
html[data-theme="dark"] body[data-page] .storefront-shared-header.banner-hidden .topbar .circle,
html[data-theme="dark"] body[data-page="tracking"] .brand-capsule,
html[data-theme="dark"] body[data-page="feedback"] .brand-capsule,
html[data-theme="dark"] body[data-page="profile"] .brand-capsule,
html[data-theme="dark"] body[data-page="tracking"] .theme-toggle,
html[data-theme="dark"] body[data-page="feedback"] .theme-toggle,
html[data-theme="dark"] body[data-page="profile"] .theme-toggle,
html[data-theme="dark"] body[data-page="tracking"] .topbar .circle,
html[data-theme="dark"] body[data-page="feedback"] .topbar .circle,
html[data-theme="dark"] body[data-page="profile"] .topbar .circle{
background:linear-gradient(160deg,rgba(60,60,66,.80),rgba(32,32,36,.58))!important;
}
html[data-theme="dark"] .category-tabs button,
html[data-theme="dark"] .service-actions button,
html[data-theme="dark"] .store-nav-item{background:rgba(255,255,255,.07)!important}
html[data-theme="dark"] .brand-capsule-logo{background:rgba(255,255,255,.09)}
/* ---- clean bands and shadows -------------------------------------------
The sticky bar painted a tinted band behind the pills and each pill carried
its own drop shadow, so the row read as a grey slab with floating chips on
it. The bar is now just blurred page, and the pills sit flat on it. */
body[data-page="home"] .menu-filter-bar{
background:none!important;
-webkit-backdrop-filter:blur(20px) saturate(1.4)!important;
backdrop-filter:blur(20px) saturate(1.4)!important;
box-shadow:none!important;
}
html[data-theme="dark"] body[data-page="home"] .menu-filter-bar,
html[data-theme="dark"] body[data-page="home"] .category-tabs{
background:none!important;box-shadow:none!important;
}
body[data-page="home"] .menu-filter-bar .category-tabs button,
body[data-page="home"] .service-actions button,
html[data-theme="dark"] .category-tabs button,
html[data-theme="dark"] .service-actions button{
box-shadow:none!important;
}
/* ---- bottom nav as one glass capsule ------------------------------------ */
html[data-theme="dark"] .store-bottom-nav{
background:linear-gradient(160deg,rgba(60,60,66,.80),rgba(32,32,36,.62))!important;
box-shadow:inset 0 1px 0 rgba(255,255,255,.14),0 18px 46px rgba(0,0,0,.62)!important;
}
/* Inside one capsule the items no longer need their own chip backgrounds — only
the active one is filled. */
.store-bottom-nav .store-nav-item{
background:transparent!important;box-shadow:none!important;
}
html[data-theme="dark"] .store-bottom-nav .store-nav-item{background:transparent!important}
/* Unfilled stars measured 3.57:1 after the first pass — still short of 4.5. */
html[data-theme="dark"] .overall-rating button,
html[data-theme="dark"] .star-input button{color:rgba(242,242,245,.62)!important}
/* ==========================================================================
Theme switch relocated to the ticker + wider banner peek
========================================================================== */
/* Capsule-shaped, pinned to the left of the strip so the offers scroll past it
rather than under it. Sized to the strip's own 28px height. */
.ticker-theme-toggle{
position:absolute!important;
left:8px;top:50%;transform:translateY(-50%);
z-index:2;
width:auto!important;min-width:0!important;
height:22px!important;
padding:0 11px!important;
border-radius:999px!important;
display:inline-grid!important;place-items:center;
background:rgba(255,255,255,.16)!important;
border:0!important;
-webkit-backdrop-filter:none!important;backdrop-filter:none!important;
box-shadow:none!important;
color:#fff!important;
cursor:pointer;
}
.ticker-theme-toggle svg{width:14px!important;height:14px!important}
/* The strip is the toggle's positioning context, and the offers start clear of it. */
body[data-page] .storefront-top-ticker{position:fixed!important}
body[data-page] .storefront-top-ticker .ticker-track{padding-left:calc(100% + 62px)!important}
html[data-theme="dark"] .ticker-theme-toggle{background:rgba(255,255,255,.14)!important}
/* Only the wishlist button sits to the right of the capsule now, so it can run
further before it has to truncate. */
.brand-capsule{max-width:calc(100% - 58px)}
@media(max-width:420px){.brand-capsule{max-width:calc(100% - 56px)}}
/* Wider peek: the active card gives up width so its neighbours actually show
beside it instead of as a sliver at the screen edge. */
.store-banner-slide{flex:0 0 72%!important}
@media(min-width:721px){.store-banner-slide{flex:0 0 54%!important}}
@media(min-width:1024px){.store-banner-slide{flex:0 0 46%!important}}
/* ==========================================================================
Search sheet
A full sheet with its results inside it, rather than a floating input that
filtered the page behind itself. Theming is token-driven so both modes come
out of the same rules.
========================================================================== */
.search-sheet{
position:fixed;inset:0;z-index:7000;
display:flex;flex-direction:column;
background:var(--surface-2,#fff8ed);
opacity:0;pointer-events:none;
transition:opacity .18s ease;
}
.search-sheet[hidden]{display:none!important}
.search-sheet.open{opacity:1;pointer-events:auto}
.search-sheet-bar{
display:flex;align-items:center;gap:8px;
padding:calc(12px + env(safe-area-inset-top)) 14px 10px;
background:var(--surface-2,#fff8ed);
}
.search-sheet-icon{
position:absolute;margin-left:14px;pointer-events:none;
display:grid;place-items:center;color:var(--text-muted,rgba(22,18,15,.6));
}
.search-sheet-icon svg{width:18px;height:18px;display:block}
.search-sheet-bar input{
flex:1;min-width:0;height:46px;
padding:0 40px 0 42px;
border:0!important;border-radius:14px;
background:var(--surface-sunk,rgba(22,18,15,.05))!important;
color:var(--text,#16120f)!important;
font:inherit;font-size:15px;font-weight:700;
outline:none;
}
/* The browser's own focus ring was drawing the orange box that made the field
look broken; the field states focus with its own tinted outline instead. */
.search-sheet-bar input:focus{
box-shadow:0 0 0 2px var(--orange,#ff5a00);
}
.search-sheet-bar input::placeholder{color:var(--text-faint,rgba(22,18,15,.45))!important;font-weight:600}
.search-sheet-bar input::-webkit-search-cancel-button{display:none}
.search-sheet-clear{
position:absolute;right:88px;
width:26px;height:26px;padding:0;border:0;border-radius:50%;
background:transparent;color:var(--text-faint,rgba(22,18,15,.45));
display:grid;place-items:center;
}
.search-sheet-clear svg{width:19px;height:19px;display:block}
.search-sheet-cancel{
flex:0 0 auto;border:0;background:transparent;padding:0 2px;
font:inherit;font-size:14px;font-weight:900;
color:var(--orange,#ff5a00);
}
.search-sheet-chips{display:flex;gap:8px;padding:2px 14px 10px}
.search-sheet-chips button{
border:0;border-radius:999px;padding:8px 14px;
font:inherit;font-size:12.5px;font-weight:900;line-height:1;
background:var(--surface-sunk,rgba(22,18,15,.05));
color:var(--text-muted,rgba(22,18,15,.62));
}
.search-sheet-chips button[aria-pressed="true"]{
background:var(--text,#16120f);color:var(--surface-2,#fff8ed);
}
.search-sheet-body{
flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch;
padding:0 14px calc(24px + env(safe-area-inset-bottom));
}
.search-block{margin-bottom:18px}
.search-block-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:2px 0 10px}
.search-block-head h3{
margin:0;font-size:11.5px;font-weight:900;letter-spacing:.10em;text-transform:uppercase;
color:var(--text-muted,rgba(22,18,15,.6));
}
.search-block-head button{border:0;background:transparent;font:inherit;font-size:12px;font-weight:900;color:var(--orange,#ff5a00)}
.search-tags{display:flex;flex-wrap:wrap;gap:8px}
.search-tags button{
border:0;border-radius:999px;padding:9px 13px;
font:inherit;font-size:13px;font-weight:700;
background:var(--surface-sunk,rgba(22,18,15,.05));color:var(--text,#16120f);
}
.search-hits{display:flex;flex-direction:column}
.search-hit{
display:grid;grid-template-columns:52px minmax(0,1fr) auto;
gap:12px;align-items:center;width:100%;
padding:10px 2px;border:0;background:transparent;text-align:left;
border-bottom:1px solid var(--border-soft,rgba(22,18,15,.08));
}
.search-hit:last-child{border-bottom:0}
.search-hit-img{
width:52px;height:52px;border-radius:12px;
background:var(--surface-sunk,rgba(22,18,15,.06)) center/cover no-repeat;
}
.search-hit-text{min-width:0;display:flex;flex-direction:column;gap:3px}
.search-hit-name{
font-size:15px;font-weight:800;line-height:1.2;color:var(--text,#16120f);
overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.search-hit-name mark{background:transparent;color:var(--orange,#ff5a00);font-weight:900}
.search-hit-meta{
font-size:12px;line-height:1.2;color:var(--text-muted,rgba(22,18,15,.6));
overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.search-hit-side{display:flex;align-items:center;gap:8px;white-space:nowrap}
.search-hit-price{font-size:14px;font-weight:900;color:var(--text,#16120f)}
.search-diet-dot{
width:13px;height:13px;border-radius:3px;display:inline-block;
border:1.6px solid #1a8f4a;position:relative;
}
.search-diet-dot::after{
content:"";position:absolute;inset:0;margin:auto;
width:6px;height:6px;border-radius:50%;background:#1a8f4a;
}
.search-diet-dot.is-nonveg{border-color:#a8342a}
.search-diet-dot.is-nonveg::after{
width:0;height:0;border-radius:0;background:transparent;
border-left:3.4px solid transparent;border-right:3.4px solid transparent;
border-bottom:6px solid #a8342a;
}
.search-none{padding:26px 2px;display:flex;flex-direction:column;gap:6px}
.search-none b{font-size:15px;color:var(--text,#16120f)}
.search-none span,.search-empty{font-size:13.5px;color:var(--text-muted,rgba(22,18,15,.6))}
.search-empty{padding:26px 2px;margin:0}
/* Where a search result lands. */
.menu-item.is-found,.combo-card.is-found{
box-shadow:0 0 0 2px var(--orange,#ff5a00),0 16px 40px rgba(42,22,8,.18)!important;
transition:box-shadow .3s ease;
}
/* While the search sheet is open the header outranks the floating nav and the
ticker; without this the sheet was covered by both. */
body.search-open .storefront-shared-header{z-index:7000!important}
body.search-open .store-bottom-nav,
body.search-open .offer-ticker,
body.search-open .floating-cart-row{display:none!important}
/* --orange is tuned as a FILL colour; as text on cream it only reaches 3.1:1.
The search sheet's accent text uses a darker shade of the same hue. */
html[data-theme="light"] .search-sheet-cancel,
html[data-theme="light"] .search-block-head button,
html[data-theme="light"] .search-hit-name mark,
:root:not([data-theme="dark"]) .search-sheet-cancel,
:root:not([data-theme="dark"]) .search-block-head button,
:root:not([data-theme="dark"]) .search-hit-name mark{color:#bf3c06}
/* ==========================================================================
Cards: glass, not flat white
They were given a solid surface colour to fix dark mode, which lost the
material the rest of the storefront is built from. They are translucent and
blurred again, in both themes.
========================================================================== */
body[data-page="home"] .menu-item,
body[data-page="home"] .combo-card,
body[data-page="home"] .service-actions button,
body[data-page="home"] .shop-details{
background:rgba(255,255,255,.82)!important;
box-shadow:inset 0 1px 0 rgba(255,255,255,.7),0 14px 36px rgba(42,22,8,.12)!important;
}
html[data-theme="dark"] body[data-page="home"] .menu-item,
html[data-theme="dark"] body[data-page="home"] .combo-card,
html[data-theme="dark"] body[data-page="home"] .service-actions button,
html[data-theme="dark"] body[data-page="home"] .shop-details,
html[data-theme="dark"] .customer-profile-card,
html[data-theme="dark"] .customer-profile-form,
html[data-theme="dark"] .feedback-card,
html[data-theme="dark"] .feedback-panel,
html[data-theme="dark"] .tracking-main-card,
html[data-theme="dark"] .order-details-card,
html[data-theme="dark"] .page-panel{
background:#1c1c1f!important;
box-shadow:inset 0 1px 0 rgba(255,255,255,.09),0 14px 36px rgba(0,0,0,.5)!important;
}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
body[data-page="home"] .menu-item,body[data-page="home"] .combo-card{background:#fffdf8!important}
html[data-theme="dark"] body[data-page="home"] .menu-item,
html[data-theme="dark"] body[data-page="home"] .combo-card{background:#1c1c1f!important}
}
/* The pair has to fit a 390px phone: 28px of gutter leaves 362px for
nav + 8px + cart. The cart capsule is ~150px once the amount is in it, so the
nav tightens to 44px columns (200px total) when there is a cart beside it.
Measured, not guessed — at 56px columns the pair came to 402px and both ends
hung off the screen. */
/* ==========================================================================
Bottom dock — one flex row, two matching glass capsules
Nav on the left, cart on the right when there is one. Flexbox does the
centring and the sizing, so the pair fits any phone without measurement.
========================================================================== */
.bottom-dock{
position:fixed;
left:50%;transform:translateX(-50%);
bottom:calc(36px + env(safe-area-inset-bottom));
z-index:6000;
display:flex;align-items:stretch;justify-content:center;
gap:8px;
width:max-content;max-width:calc(100% - 24px);
}
/* Both capsules: identical shell, identical height. */
.bottom-dock > *{
position:static!important;
left:auto!important;right:auto!important;bottom:auto!important;
transform:none!important;
width:auto!important;max-width:none!important;
min-height:56px!important;
display:flex!important;align-items:center;
gap:5px!important;padding:5px!important;
border:0!important;border-radius:999px!important;
background:var(--glass-tint,rgba(255,255,255,.55))!important;
-webkit-backdrop-filter:blur(26px) saturate(1.9)!important;
backdrop-filter:blur(26px) saturate(1.9)!important;
box-shadow:inset 0 1px 0 rgba(255,255,255,.85),0 16px 40px rgba(42,22,8,.18)!important;
}
html[data-theme="dark"] .bottom-dock > *{
background:linear-gradient(160deg,rgba(60,60,66,.80),rgba(32,32,36,.62))!important;
box-shadow:inset 0 1px 0 rgba(255,255,255,.14),0 18px 46px rgba(0,0,0,.62)!important;
}
/* Nav items share the capsule, so they shrink with it rather than forcing a width. */
.bottom-dock .store-bottom-nav{grid-template-columns:none!important;min-width:0}
.bottom-dock .store-nav-item{
/* Shrinkable, not fixed: at 0 0 auto the four items kept their full width, the
nav overflowed its capsule and the fourth icon was clipped off a 320px screen.
They now share whatever the capsule has, down to a 34px floor. */
flex:1 1 0;
min-width:34px;max-width:52px;height:46px;
padding:0!important;
display:grid!important;place-items:center;
background:transparent!important;box-shadow:none!important;border:0!important;
}
.bottom-dock .store-bottom-nav{flex:0 1 auto;min-width:0;overflow:hidden}
.bottom-dock .store-nav-item span{display:none} /* the icon carries it in a capsule */
.bottom-dock .store-nav-item svg{width:21px;height:21px}
.bottom-dock .store-nav-item.is-active{
background:linear-gradient(145deg,var(--orange),var(--red))!important;
border-radius:999px!important;color:#fff!important;
}
/* Cart capsule fades in with its contents rather than sliding as a whole bar. */
.bottom-dock .floating-cart-row{opacity:0;pointer-events:none;transition:opacity .16s ease}
.bottom-dock .floating-cart-row.is-visible{opacity:1;pointer-events:auto}
.bottom-dock .floating-cart{
position:relative!important; /* anchors the count badge */
height:46px!important;min-width:0!important;
padding:0 15px!important;border-radius:999px!important;
display:inline-flex!important;align-items:center;justify-content:center;
background:linear-gradient(135deg,var(--orange),var(--red))!important;
color:#fff!important;box-shadow:none!important;border:0!important;
overflow:visible!important;
}
/* The count rides the top-right corner of the red capsule, the way an app icon
carries an unread badge — it used to sit inline and read as part of the price. */
.bottom-dock .floating-cart span#cartCount{
position:absolute;top:-5px;right:-4px;
min-width:20px;height:20px;padding:0 5px;
border-radius:999px;
display:grid;place-items:center;
font-size:11.5px;font-weight:900;line-height:1;
background:var(--ink,#16120f)!important;color:#fff!important;
/* A ring in the dock's own colour lifts it off the capsule edge. */
box-shadow:0 0 0 2px var(--glass-ring,#fff8ed);
}
html[data-theme="dark"] .bottom-dock .floating-cart span#cartCount{
background:#f2f2f5!important;color:#141416!important;
box-shadow:0 0 0 2px #26262b;
}
.bottom-dock .floating-cart b#cartAmount{
font-size:14px;font-weight:900;white-space:nowrap;color:#fff!important;
}
.bottom-dock .floating-clear{
width:40px!important;height:46px!important;min-width:40px!important;
padding:0!important;border:0!important;border-radius:999px!important;
display:grid!important;place-items:center;
background:transparent!important;
color:var(--text,#16120f)!important;
font-size:0!important;
}
.bottom-dock .floating-clear::after{content:none!important}
.bottom-dock .floating-clear svg{width:19px;height:19px;display:block}
html[data-theme="dark"] .bottom-dock .floating-clear{color:var(--text)!important}
/* Nothing outside the dock positions these two any more. */
body[data-page] .store-bottom-nav,
body[data-page] .floating-cart-row{position:static!important}
@media(max-width:360px){
.bottom-dock{gap:6px}
.bottom-dock .floating-cart b#cartAmount{font-size:13px}
.bottom-dock .floating-clear{width:34px!important;min-width:34px!important}
}
/* Stated at a specificity that outranks anything left over from when these two
were positioned independently. */
body[data-page] .bottom-dock > .store-bottom-nav,
body[data-page] .bottom-dock > .floating-cart-row{
position:static!important;transform:none!important;
left:auto!important;right:auto!important;bottom:auto!important;top:auto!important;
width:auto!important;max-width:none!important;
}
/* The count badge sits clear of the amount.
At -5/-4 it overlapped the “₹” on a narrow capsule; it is lifted fully outside
the capsule's corner and the button carries a little more right padding so the
two can never collide whatever the total is. */
/* The badge overhangs the capsule's top-right, so the amount needs clearance on
that side or the two touch — measured at a 3px overlap before this. */
.bottom-dock .floating-cart{padding:0 24px 0 15px!important}
.bottom-dock .floating-cart span#cartCount{
top:-10px!important;right:-10px!important;
}
/* With the cart capsule present the dock is carrying two capsules, so Profile —
the item a diner needs least mid-order — steps out and the row stays centred
and uncramped. It comes straight back when the cart is cleared. */
/* Profile used to be hidden while the cart capsule was up, to buy width. The
sizes below scale with the viewport instead, so all four items stay at every
width and nothing has to disappear. */
/* The wishlist button takes the brand capsule's glass exactly.
A higher-specificity rule from the hero removal was still giving it a flat
82%-white fill while the capsule beside it had the gradient and the specular
top edge, so the two read as different materials on the same row. */
body[data-page] .storefront-shared-header .topbar .circle.favorite-button,
body[data-page] .storefront-shared-header.banner-hidden .topbar .circle.favorite-button{
background:linear-gradient(160deg,rgba(255,255,255,.74),rgba(255,255,255,.44))!important;
border:0!important;
-webkit-backdrop-filter:var(--glass-blur,blur(26px) saturate(1.9))!important;
backdrop-filter:var(--glass-blur,blur(26px) saturate(1.9))!important;
box-shadow:
inset 0 1px 0 rgba(255,255,255,.95),
inset 0 -10px 22px rgba(255,255,255,.20),
0 1px 0 rgba(22,18,15,.05),
0 14px 34px rgba(42,22,8,.16)!important;
}
html[data-theme="dark"] body[data-page] .storefront-shared-header .topbar .circle.favorite-button,
html[data-theme="dark"] body[data-page] .storefront-shared-header.banner-hidden .topbar .circle.favorite-button{
background:linear-gradient(160deg,rgba(60,60,66,.80),rgba(32,32,36,.58))!important;
box-shadow:
inset 0 1px 0 rgba(255,255,255,.18),
inset 0 -10px 22px rgba(0,0,0,.24),
0 14px 34px rgba(0,0,0,.5)!important;
}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
body[data-page] .storefront-shared-header .topbar .circle.favorite-button{background:rgba(255,252,246,.96)!important}
html[data-theme="dark"] body[data-page] .storefront-shared-header .topbar .circle.favorite-button{background:#2a2a30!important}
}
/* The cart capsule leaves the layout when it is empty, instead of sitting there
at zero opacity — as a still-laid-out flex sibling it pushed the nav off centre
whenever there was nothing in the cart. */
.bottom-dock .floating-cart-row:not(.is-visible){display:none!important}
/* Accent gradient, both themes — stated after the inverted-button block so nothing
there can reach it. */
html .bottom-dock .floating-cart,
html[data-theme="dark"] .bottom-dock .floating-cart{
background:linear-gradient(135deg,var(--orange),var(--red))!important;
color:#fff!important;
}
html .bottom-dock .floating-cart b#cartAmount,
html[data-theme="dark"] .bottom-dock .floating-cart b#cartAmount{color:#fff!important}
/* ==========================================================================
PERFORMANCE: backdrop-filter only where it earns its cost
==========================================================================
Measured 46 elements running a live backdrop blur on a page of 358 — and that
was a menu with eight dishes. Every dish card and every "+" button had one, so
a real 40-dish menu asks the compositor to re-sample and blur ~100 backdrops on
every single scroll frame. That is what made the storefront feel heavy.
Blur is kept for the handful of things that genuinely float over moving
content — the header capsules, the sticky filter bar, the bottom dock. Anything
that scrolls WITH the page gets the same translucent tint with no blur: over a
flat page gradient the two are almost indistinguishable, and one is free.
========================================================================== */
.menu-item,.combo-card,.shop-details,
.menu-add-single,.dish-favorite-button,
.service-actions button,.category-tabs button,
.customer-sections article,.offer-card,
.page-panel,.tracking-main-card,.order-details-card,
.customer-profile-card,.customer-profile-form,
.feedback-card,.feedback-panel,.feedback-card-scroll,
.cart-line,.bill-box,.cart-coupon,.notice-card,
.modal-card,.merge-table-modal-inner,.feedback-sheet-inner,
.search-sheet,.search-sheet-bar,
.store-banner-card,.store-banner-slide{
-webkit-backdrop-filter:none!important;
backdrop-filter:none!important;
}
/* Those surfaces were relying on the blur to look solid enough; without it they
need a touch more tint to keep their contrast. */
body[data-page="home"] .menu-item,
body[data-page="home"] .combo-card,
body[data-page="home"] .service-actions button,
body[data-page="home"] .shop-details{
background:rgba(255,255,255,.82)!important;
}
html[data-theme="dark"] body[data-page="home"] .menu-item,
html[data-theme="dark"] body[data-page="home"] .combo-card,
html[data-theme="dark"] body[data-page="home"] .service-actions button,
html[data-theme="dark"] body[data-page="home"] .shop-details,
html[data-theme="dark"] .customer-profile-card,
html[data-theme="dark"] .customer-profile-form,
html[data-theme="dark"] .feedback-card,
html[data-theme="dark"] .feedback-panel,
html[data-theme="dark"] .tracking-main-card,
html[data-theme="dark"] .order-details-card,
html[data-theme="dark"] .page-panel{
background:#1c1c1f!important;
}
/* Long lists repaint less when the browser can skip work for rows that are far
off-screen; the size hint stops that causing scrollbar jumping. */
.menu-item,.combo-card{content-visibility:auto;contain-intrinsic-size:auto 260px}
/* The remaining offenders sit inside sheets and drawers that are themselves
opaque, so their blur samples a backdrop nobody can see. */
.menu-add-single,.dish-favorite-button,.shop-details,
.cart-drawer,.cart-backdrop,.checkout,
.feedback-sheet,.feedback-card,.favorites-view,
.toast,textarea{
-webkit-backdrop-filter:none!important;
backdrop-filter:none!important;
}
/* One "+" per dish, each running its own blur — on a 40-dish menu that is 40 live
backdrops scrolling. Stated at the same specificity as the rule that set it. */
body[data-page="home"] .menu-item .menu-add-single,
.favorites-page .menu-item .menu-add-single,
body[data-page="home"] .menu-item .dish-favorite-button,
.favorites-page .menu-item .dish-favorite-button{
-webkit-backdrop-filter:none!important;
backdrop-filter:none!important;
}
/* ==========================================================================
POPOUTS ARE OPAQUE
==========================================================================
Every sheet, drawer and modal was translucent, so the menu behind it showed
straight through the text — in the light theme especially, the cart and the
coupon panel were unreadable. A panel that sits ON TOP of the page is not
glass: it has to block what is behind it. Glass belongs to the floating
chrome (header capsules, filter bar, dock), and that is where it stays.
========================================================================== */
.feedback-sheet > .feedback-card,
.feedback-card,
.feedback-card-scroll,
.cart-drawer,
.modal-card,
.merge-table-modal-inner,
.search-sheet{
background:#fffdf8!important;
-webkit-backdrop-filter:none!important;
backdrop-filter:none!important;
opacity:1!important;
color:var(--text,#16120f)!important;
}
html[data-theme="dark"] .feedback-sheet > .feedback-card,
html[data-theme="dark"] .feedback-card,
html[data-theme="dark"] .feedback-card-scroll,
html[data-theme="dark"] .cart-drawer,
html[data-theme="dark"] .modal-card,
html[data-theme="dark"] .merge-table-modal-inner,
html[data-theme="dark"] .search-sheet{
background:#17171a!important;
color:var(--text)!important;
}
/* The scrim behind them gets darker so the panel reads as lifted off the page. */
.feedback-sheet,.modal,.merge-table-modal{background:rgba(22,18,15,.55)!important}
html[data-theme="dark"] .feedback-sheet,
html[data-theme="dark"] .modal,
html[data-theme="dark"] .merge-table-modal{background:rgba(0,0,0,.72)!important}
/* ---- panel contents ----------------------------------------------------- */
/* Kicker labels ("DISH FEEDBACK", "CUSTOMISE") were near-invisible on both. */
.feedback-card > .feedback-card-scroll > span,
.feedback-card-scroll > span,
.variant-group-label,
.instructions label,
.cart-head span{
color:var(--text-muted,rgba(22,18,15,.62))!important;
}
.feedback-card h2,.feedback-card h3,
.cart-head h2,.modal-card h2{color:var(--text,#16120f)!important}
.feedback-card p{color:var(--text-muted,rgba(22,18,15,.62))!important}
/* Variant / add-on rows were a flat light-grey slab in dark mode. */
.variant-option,.variant-addon-row{
background:rgba(22,18,15,.05)!important;
border:1px solid rgba(22,18,15,.10)!important;
color:var(--text,#16120f)!important;
}
.variant-option span,.variant-option b,
.variant-addon-row span,.variant-addon-row b{color:var(--text,#16120f)!important}
html[data-theme="dark"] .variant-option,
html[data-theme="dark"] .variant-addon-row{
background:rgba(255,255,255,.06)!important;
border-color:rgba(255,255,255,.12)!important;
color:var(--text)!important;
}
html[data-theme="dark"] .variant-option span,
html[data-theme="dark"] .variant-option b,
html[data-theme="dark"] .variant-addon-row span,
html[data-theme="dark"] .variant-addon-row b{color:var(--text)!important}
/* Steppers inside those rows. */
html[data-theme="dark"] .variant-option button{
background:rgba(255,255,255,.14)!important;color:var(--text)!important;border:0!important;
}
/* Stat tiles in the dish sheet (price / ratings). */
html[data-theme="dark"] .feedback-card .dish-stat,
html[data-theme="dark"] .feedback-card-scroll > div > div{
background:rgba(255,255,255,.06)!important;color:var(--text)!important;
}
/* "See all coupons" was a white box in dark; it is a plain link. */
.see-all-coupons-btn{background:transparent!important;border:0!important}
html[data-theme="dark"] .see-all-coupons-btn{background:transparent!important;color:#ff9a8f!important}
/* ==========================================================================
CARDS ARE GLASS AGAIN — without the compositor cost
A translucent tint plus a lit top edge over the page's own gradient reads as
glass. The blur is what was expensive, not the transparency, so the look
comes back and the scrolling stays cheap.
========================================================================== */
body[data-page="home"] .menu-item,
body[data-page="home"] .combo-card,
body[data-page="home"] .service-actions button,
body[data-page="home"] .shop-details{
background:rgba(255,255,255,.58)!important;
box-shadow:inset 0 1px 0 rgba(255,255,255,.85),0 12px 32px rgba(42,22,8,.10)!important;
}
html[data-theme="dark"] body[data-page="home"] .menu-item,
html[data-theme="dark"] body[data-page="home"] .combo-card,
html[data-theme="dark"] body[data-page="home"] .service-actions button,
html[data-theme="dark"] body[data-page="home"] .shop-details{
background:rgba(255,255,255,.07)!important;
box-shadow:inset 0 1px 0 rgba(255,255,255,.10),0 12px 32px rgba(0,0,0,.45)!important;
}
/* Dish sheet stat tiles ("₹269 / Starters", "New / 0 ratings") and the feedback
list. Their sublabels carry a hard-coded light-theme ink at 62% — measured at
1.14:1 on a dark tile, i.e. invisible. */
html[data-theme="dark"] .product-detail-summary span,
html[data-theme="dark"] .product-detail-summary small,
html[data-theme="dark"] .product-feedback-list p,
html[data-theme="dark"] .product-feedback-list small{
color:var(--text-muted)!important;
}
html[data-theme="dark"] .product-detail-summary b,
html[data-theme="dark"] .product-detail-summary > div > b{color:var(--text)!important}
html[data-theme="dark"] .product-detail-summary > div,
html[data-theme="dark"] .product-feedback-list,
html[data-theme="dark"] .product-feedback-list article{
background:rgba(255,255,255,.06)!important;
border-color:rgba(255,255,255,.12)!important;
color:var(--text)!important;
}
html[data-theme="dark"] .product-feedback-list h3,
html[data-theme="dark"] .product-feedback-list b{color:var(--text)!important}
/* Same tiles in light mode kept their own colours; only the dark case was wrong. */
/* The empty-feedback line carried its own 52%-white pill from the light theme,
so light text was landing on a light chip inside a dark sheet — 1.97:1. */
html[data-theme="dark"] .product-feedback-list p,
html[data-theme="dark"] .product-feedback-list article{
background:transparent!important;color:var(--text-muted)!important;
}
/* Unfilled stars had a dark-mode colour but never a light-mode one, so on white
they sat at 1.7:1. */
html[data-theme="light"] .star-input button,
html[data-theme="light"] .overall-rating button,
:root:not([data-theme="dark"]) .star-input button,
:root:not([data-theme="dark"]) .overall-rating button{
color:rgba(22,18,15,.55)!important;
background:rgba(22,18,15,.05)!important;
}
html[data-theme="light"] .star-input button.active,
html[data-theme="light"] .star-input button.is-on,
:root:not([data-theme="dark"]) .star-input button.active,
:root:not([data-theme="dark"]) .star-input button.is-on{color:#c98a00!important}
/* ==========================================================================
Cart controls — glass
The drawer itself stays opaque so its contents are readable; the controls
inside it get the same glass the rest of the storefront uses.
========================================================================== */
.cart-drawer .cart-clear-btn,
.cart-drawer #closeCart,
.cart-drawer .line-controls button,
.cart-drawer .addons-browse-btn,
.cart-drawer .see-all-coupons-btn,
.cart-drawer .coupon-input-row input,
.cart-drawer .instructions textarea,
.cart-drawer .pay-options label{
background:rgba(255,255,255,.55)!important;
border:1px solid rgba(255,255,255,.75)!important;
-webkit-backdrop-filter:blur(18px) saturate(1.6)!important;
backdrop-filter:blur(18px) saturate(1.6)!important;
box-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 6px 18px rgba(42,22,8,.10)!important;
color:var(--text,#16120f)!important;
}
html[data-theme="dark"] .cart-drawer .cart-clear-btn,
html[data-theme="dark"] .cart-drawer #closeCart,
html[data-theme="dark"] .cart-drawer .line-controls button,
html[data-theme="dark"] .cart-drawer .addons-browse-btn,
html[data-theme="dark"] .cart-drawer .see-all-coupons-btn,
html[data-theme="dark"] .cart-drawer .coupon-input-row input,
html[data-theme="dark"] .cart-drawer .instructions textarea,
html[data-theme="dark"] .cart-drawer .pay-options label{
background:rgba(255,255,255,.10)!important;
border:1px solid rgba(255,255,255,.16)!important;
box-shadow:inset 0 1px 0 rgba(255,255,255,.14),0 6px 18px rgba(0,0,0,.4)!important;
color:var(--text)!important;
}
/* The two primary actions keep the accent so they still lead. */
.cart-drawer .checkout,
.cart-drawer #applyCoupon,
html[data-theme="dark"] .cart-drawer .checkout,
html[data-theme="dark"] .cart-drawer #applyCoupon{
background:linear-gradient(135deg,var(--orange),var(--red))!important;
border:0!important;color:#fff!important;
-webkit-backdrop-filter:none!important;backdrop-filter:none!important;
}
/* The cart line itself is glass too, not a flat panel. */
.cart-drawer .cart-line,.cart-drawer .bill-box,.cart-drawer .cart-coupon{
background:rgba(255,255,255,.50)!important;
border:1px solid rgba(255,255,255,.72)!important;
box-shadow:inset 0 1px 0 rgba(255,255,255,.85)!important;
}
html[data-theme="dark"] .cart-drawer .cart-line,
html[data-theme="dark"] .cart-drawer .bill-box,
html[data-theme="dark"] .cart-drawer .cart-coupon{
background:rgba(255,255,255,.07)!important;
border:1px solid rgba(255,255,255,.12)!important;
box-shadow:inset 0 1px 0 rgba(255,255,255,.10)!important;
}
/* ==========================================================================
TRACKING / HISTORY / BILL — dark mode
==========================================================================
These screens are built from translucent white panels (rgba(255,255,255,.54)
and friends) that were designed against a cream page. With --ink flipped for
dark mode the text on them went light too, so the result was light-on-light:
the order cards in the screenshot are legible only because the panels happen
to be mid-grey. Every one of those panels is restated here.
========================================================================== */
html[data-theme="dark"] .tracking-main-card,
html[data-theme="dark"] .order-details-card,
html[data-theme="dark"] .track-live-card,
html[data-theme="dark"] .eta-card,
html[data-theme="dark"] .history-panel,
html[data-theme="dark"] .history-section{
background:#1c1c1f!important;
border-color:rgba(255,255,255,.11)!important;
color:var(--text)!important;
box-shadow:0 12px 32px rgba(0,0,0,.45)!important;
}
/* Inner panels one step lighter so the hierarchy survives. */
html[data-theme="dark"] .tracking-line,
html[data-theme="dark"] .tracking-note,
html[data-theme="dark"] .tracking-total,
html[data-theme="dark"] .order-meta,
html[data-theme="dark"] .tracking-detail-grid > div,
html[data-theme="dark"] .tracking-dishes > div,
html[data-theme="dark"] .tracking-coupon,
html[data-theme="dark"] .tracking-splits,
html[data-theme="dark"] .tracking-split-line,
html[data-theme="dark"] .history-summary,
html[data-theme="dark"] .eta-card-head{
background:rgba(255,255,255,.07)!important;
border-color:rgba(255,255,255,.12)!important;
color:var(--text)!important;
}
html[data-theme="dark"] .tracking-line b,
html[data-theme="dark"] .tracking-note b,
html[data-theme="dark"] .order-meta b,
html[data-theme="dark"] .tracking-detail-grid b,
html[data-theme="dark"] .history-summary b,
html[data-theme="dark"] .eta-card b{color:var(--text)!important}
html[data-theme="dark"] .tracking-line small,
html[data-theme="dark"] .tracking-note span,
html[data-theme="dark"] .order-meta span,
html[data-theme="dark"] .tracking-detail-grid span,
html[data-theme="dark"] .tracking-line-state span{color:var(--text-muted)!important}
/* The grand-total strip is inverted in light; keep it inverted in dark too. */
html[data-theme="dark"] .tracking-total{
background:var(--text)!important;color:#141416!important;
}
html[data-theme="dark"] .tracking-total b,
html[data-theme="dark"] .tracking-total span{color:#141416!important}
/* Status chips ("PENDING") were a pale pill with pale text. */
html[data-theme="dark"] .tracking-line-state b,
html[data-theme="dark"] .tracking-line-state em,
html[data-theme="dark"] .steps span{
background:rgba(255,255,255,.12)!important;color:var(--text)!important;
}
html[data-theme="dark"] .steps .done{background:rgba(79,191,120,.22)!important;color:#7fe0a2!important}
/* Progress rails. */
html[data-theme="dark"] .eta-progress,
html[data-theme="dark"] .tracking-line-progress{background:rgba(255,255,255,.12)!important}
/* History table. */
html[data-theme="dark"] .history-table{color:var(--text)!important}
html[data-theme="dark"] .history-table th{
background:rgba(255,255,255,.08)!important;color:var(--text)!important;
}
html[data-theme="dark"] .history-table td{
border-color:rgba(255,255,255,.10)!important;color:var(--text-muted)!important;
}
html[data-theme="dark"] .history-table tr:hover td{background:rgba(255,255,255,.05)!important}
html[data-theme="dark"] .history-head h2,
html[data-theme="dark"] .history-head h3{color:var(--text)!important}
/* A QR has to stay black-on-white to remain scannable — it is never themed. */
html[data-theme="dark"] .bill-qr,
html[data-theme="dark"] .bill-qr img,
html[data-theme="dark"] canvas.qr,
html[data-theme="dark"] [class*="qr-"] img{
background:#fff!important;
padding:8px;border-radius:10px;
filter:none!important;
}
/* ==========================================================================
WELCOME PAGE + remaining sheets — dark mode
==========================================================================
The welcome screen was never covered by the dark layer at all: its card is a
light panel, and with --ink flipped the name, the heading and the install
prompt were all light-on-light (measured 1.57–2.15:1). It is the first screen
a diner ever sees, so it has to be right.
========================================================================== */
html[data-theme="dark"] .welcome-shell{background:transparent!important}
html[data-theme="dark"] .welcome-card{
background:#1c1c1f!important;
border-color:rgba(255,255,255,.11)!important;
color:var(--text)!important;
box-shadow:0 18px 46px rgba(0,0,0,.55)!important;
}
html[data-theme="dark"] .welcome-card h1,
html[data-theme="dark"] .welcome-brand b{color:var(--text)!important}
html[data-theme="dark"] .welcome-brand small,
html[data-theme="dark"] .welcome-card p{color:var(--text-muted)!important}
html[data-theme="dark"] .welcome-logo{background:rgba(255,255,255,.08)!important}
html[data-theme="dark"] .welcome-form input{
background:rgba(255,255,255,.06)!important;
border-color:rgba(255,255,255,.14)!important;
color:var(--text)!important;
}
html[data-theme="dark"] .welcome-form input::placeholder{color:var(--text-faint)!important}
html[data-theme="dark"] .register-btn{
background:linear-gradient(135deg,var(--orange),var(--red))!important;color:#fff!important;
}
html[data-theme="dark"] .install-suggestion{
background:rgba(255,255,255,.07)!important;
border-color:rgba(255,255,255,.12)!important;
color:var(--text)!important;
}
html[data-theme="dark"] .install-suggestion b{color:var(--text)!important}
html[data-theme="dark"] .install-suggestion span{color:var(--text-muted)!important}
html[data-theme="dark"] .welcome-provider,
html[data-theme="dark"] .welcome-provider span{color:var(--text-muted)!important}
html[data-theme="dark"] .i18n-fab{
background:rgba(255,255,255,.10)!important;
border-color:rgba(255,255,255,.16)!important;
color:var(--text)!important;
}
/* #installBtn measured 4.03:1 in BOTH themes — it was already short of AA before
dark mode existed, so it is fixed for both rather than only the dark case. */
#installBtn{background:#c2410c!important;color:#fff!important}
/* ---- Water sheet -------------------------------------------------------- */
html[data-theme="dark"] .water-card{background:#17171a!important;color:var(--text)!important}
html[data-theme="dark"] .water-sub{color:var(--text-muted)!important}
html[data-theme="dark"] .water-options button,
html[data-theme="dark"] .water-option{
background:rgba(255,255,255,.06)!important;
border-color:rgba(255,255,255,.12)!important;
color:var(--text)!important;
}
html[data-theme="dark"] .water-options button.active,
html[data-theme="dark"] .water-option.active{
background:rgba(255,122,51,.20)!important;
border-color:rgba(255,122,51,.42)!important;
color:var(--text)!important;
}
html[data-theme="dark"] .water-step{
background:rgba(255,255,255,.12)!important;color:var(--text)!important;border:0!important;
}
html[data-theme="dark"] .water-add-main{
background:linear-gradient(135deg,var(--orange),var(--red))!important;color:#fff!important;
}
html[data-theme="dark"] .water-add-label,
html[data-theme="dark"] .water-add-meta,
html[data-theme="dark"] .water-add-meta b{color:#fff!important}
/* ---- Coupons modal / success modal / add-ons sheet ---------------------- */
html[data-theme="dark"] .coupon-modal-item,
html[data-theme="dark"] .addons-browse-sheet .variant-option{
background:rgba(255,255,255,.06)!important;
border-color:rgba(255,255,255,.12)!important;
color:var(--text)!important;
}
html[data-theme="dark"] .coupon-modal-item b,
html[data-theme="dark"] .coupon-modal-item strong{color:var(--text)!important}
html[data-theme="dark"] .coupon-modal-item small,
html[data-theme="dark"] .coupon-modal-item span{color:var(--text-muted)!important}
/* ==========================================================================
Primary CTAs — white text needs a slightly deeper accent
White on the raw accent gradient measures 4.03:1, just under AA. The accent is
the restaurant's OWN setting, so it is not replaced with a fixed colour —
color-mix darkens whatever they picked by 12%, which lands at ~5.0:1 while
still reading as their brand. 12% was chosen by measurement: 8% only reaches
4.66 and leaves no headroom for the lighter accents tenants can pick.
========================================================================== */
.register-btn,
.checkout,
.submit-feedback,
.water-add-main,
.bill-pay-now-btn,
.profile-action-primary,
.bottom-dock .floating-cart,
.cart-drawer #applyCoupon,
.combo-jump-btn,
.modal-link{
background:linear-gradient(135deg,
color-mix(in srgb, var(--orange) 88%, #000),
color-mix(in srgb, var(--red) 88%, #000))!important;
color:#fff!important;
}
/* Browsers without color-mix keep the original gradient rather than losing the
accent entirely; they simply do not get the extra contrast. */
@supports not (background: color-mix(in srgb, red 50%, #000)){
.register-btn,.checkout,.submit-feedback,.water-add-main,.bill-pay-now-btn,
.profile-action-primary,.bottom-dock .floating-cart,.cart-drawer #applyCoupon,
.combo-jump-btn,.modal-link{
background:linear-gradient(135deg,var(--orange),var(--red))!important;
}
}
/* ==========================================================================
BILL STAYS ON PAPER — identical in both themes
==========================================================================
An invoice is a document, not app chrome: it is printed, screenshotted and
forwarded, and themed dark it read as a broken screen. Rather than restyling
each piece for dark mode, the dark theme's own tokens are reset to their light
values for this subtree — so the bill renders through exactly the same rules as
in light mode and cannot drift away from it again as the theme changes.
========================================================================== */
html[data-theme="dark"] .bill-modal-inner,
html[data-theme="dark"] .bill-modal-inner *{
/* Only the tokens are reset — no colours are forced. Every bill rule reads these,
so the subtree computes through exactly the same declarations the light theme
uses. Forcing colours here is what made the earlier attempt merely paper-LIKE
rather than identical: it painted #fff where light paints its cream #f4ede2. */
--ink:#16120f;
--muted:rgba(22,18,15,.64);
--text:#16120f;
--text-muted:rgba(22,18,15,.62);
--text-faint:rgba(22,18,15,.45);
--line:rgba(22,18,15,.12);
--surface:#ffffff;
--surface-2:#fffdf8;
--border-soft:rgba(22,18,15,.10);
--card:#ffffff;
--paper:#fffdf8;
}
html[data-theme="dark"] .bill-modal-inner{color:var(--ink)}
/* A QR must stay black on white to scan; it is never themed. */
html[data-theme="dark"] .bill-qr,
html[data-theme="dark"] .bill-qr img,
html[data-theme="dark"] .upi-qr-wrap{background:#fff!important;filter:none!important}
/* The buttons under the paper belong to the bill too, so they match it rather than
the app — the whole sheet is one document either way. */
/* ==========================================================================
Water sheet — the options were unreadable
The rows are dark now but their labels and prices still carried light-theme
ink, so on a dark row they all but disappeared.
========================================================================== */
html[data-theme="dark"] .water-options *,
html[data-theme="dark"] .water-option *{color:var(--text)!important}
html[data-theme="dark"] .water-options button b,
html[data-theme="dark"] .water-option b{color:var(--text)!important}
html[data-theme="dark"] .water-options button small,
html[data-theme="dark"] .water-options button span,
html[data-theme="dark"] .water-option small,
html[data-theme="dark"] .water-option span{color:var(--text-muted)!important}
html[data-theme="dark"] .water-options button.active *,
html[data-theme="dark"] .water-option.active *{color:#ffd0b8!important}
/* ==========================================================================
Language sheet
Another light panel with light text — the list was legible only as shapes.
========================================================================== */
html[data-theme="dark"] .i18n-sheet,
html[data-theme="dark"] .i18n-sheet-inner{
background:#17171a!important;color:var(--text)!important;
}
html[data-theme="dark"] .i18n-sheet h2,
html[data-theme="dark"] .i18n-sheet h3{color:var(--text)!important}
html[data-theme="dark"] .i18n-sheet > span,
html[data-theme="dark"] .i18n-sheet small{color:var(--text-muted)!important}
html[data-theme="dark"] .i18n-search,
html[data-theme="dark"] .i18n-search input{
background:rgba(255,255,255,.07)!important;
border-color:rgba(255,255,255,.13)!important;
color:var(--text)!important;
}
html[data-theme="dark"] .i18n-search input::placeholder{color:var(--text-faint)!important}
html[data-theme="dark"] .i18n-language-option{
background:rgba(255,255,255,.06)!important;
border-color:rgba(255,255,255,.12)!important;
color:var(--text)!important;
}
html[data-theme="dark"] .i18n-language-option b,
html[data-theme="dark"] .i18n-language-option strong{color:var(--text)!important}
html[data-theme="dark"] .i18n-language-option small,
html[data-theme="dark"] .i18n-language-option span{color:var(--text-muted)!important}
html[data-theme="dark"] .i18n-language-option[aria-selected="true"],
html[data-theme="dark"] .i18n-language-option.is-active{
background:rgba(255,122,51,.18)!important;border-color:rgba(255,122,51,.4)!important;
}
/* ==========================================================================
Remaining storefront surfaces found by scanning styles.css for light
backgrounds with no dark counterpart. Admin-only classes are deliberately
excluded — dark mode is a storefront feature.
========================================================================== */
html[data-theme="dark"] .favorites-view,
html[data-theme="dark"] .favorites-empty,
html[data-theme="dark"] .search-section,
html[data-theme="dark"] .search-glass-card,
html[data-theme="dark"] .quick-actions,
html[data-theme="dark"] .veg-toggle,
html[data-theme="dark"] .tip-card,
html[data-theme="dark"] .tip-option,
html[data-theme="dark"] .tip-custom,
html[data-theme="dark"] .split-list,
html[data-theme="dark"] .split-row,
html[data-theme="dark"] .delivery-address,
html[data-theme="dark"] .merge-table-option,
html[data-theme="dark"] .upi-qr-wrap,
html[data-theme="dark"] .rate-mini{
background:rgba(255,255,255,.07)!important;
border-color:rgba(255,255,255,.12)!important;
color:var(--text)!important;
}
html[data-theme="dark"] .favorites-view *,
html[data-theme="dark"] .tip-card *,
html[data-theme="dark"] .split-row *,
html[data-theme="dark"] .merge-table-option *{color:var(--text)!important}
html[data-theme="dark"] .favorites-empty,
html[data-theme="dark"] .tip-card small,
html[data-theme="dark"] .split-row small{color:var(--text-muted)!important}
html[data-theme="dark"] .tip-submit,
html[data-theme="dark"] .promo-apply{
background:linear-gradient(135deg,var(--orange),var(--red))!important;color:#fff!important;
}
html[data-theme="dark"] .dish-favorite-button{
background:rgba(255,255,255,.14)!important;color:var(--text)!important;
}
html[data-theme="dark"] .dish-favorite-button.is-favorite{color:#ff6b62!important}
html[data-theme="dark"] .oos-label{background:rgba(255,255,255,.12)!important;color:var(--text-muted)!important}
/* Status pills — one rule each so a status keeps its meaning-colour. */
html[data-theme="dark"] .status-placed,
html[data-theme="dark"] .placed,
html[data-theme="dark"] .pending{background:rgba(255,196,83,.20)!important;color:#ffd07a!important}
html[data-theme="dark"] .status-preparing,
html[data-theme="dark"] .preparing{background:rgba(255,122,51,.20)!important;color:#ffb184!important}
html[data-theme="dark"] .cancelled,
html[data-theme="dark"] .unavailable,
html[data-theme="dark"] .status-unavailable,
html[data-theme="dark"] .unpaid{background:rgba(255,90,82,.20)!important;color:#ff9a8f!important}
html[data-theme="dark"] .partial,
html[data-theme="dark"] .upi-claimed,
html[data-theme="dark"] .paused{background:rgba(255,255,255,.12)!important;color:var(--text)!important}
html[data-theme="dark"] .tracking-item-status{background:rgba(255,255,255,.12)!important;color:var(--text)!important}
/* The Order History toggle sat on a full-width light strip. */
html[data-theme="dark"] .history-toggle{
background:rgba(255,255,255,.10)!important;
border:1px solid rgba(255,255,255,.16)!important;
color:var(--text)!important;
}
.history-section{background:transparent!important;border:0!important;box-shadow:none!important}
html[data-theme="dark"] .history-section{background:transparent!important}
/* The ETA card has a dark gradient in BOTH themes, so its sublabel needs light
ink either way — at #756960 it measured 2.62:1 on that card. */
#etaConfidence,.eta-card .eta-sub,.eta-card small{color:rgba(255,255,255,.72)!important}
/* The "done" step chip is the same green-on-pale-green that measured 4.0:1
elsewhere; this class was not in that earlier sweep. */
.steps .done{color:#0f7038!important}
html[data-theme="dark"] .steps .done{background:rgba(79,191,120,.22)!important;color:#7fe0a2!important}
/* The totals block sits in .bill-modal-inner but outside .bill-card, so the
earlier "everything on the paper is dark ink" rule never reached it: the
amounts stayed light-on-white and the Grand Total row rendered black on black. */
/* Close button sits ON the white paper, so it cannot be light-on-light. */
/* ==========================================================================
BOTTOM DOCK — fits any phone, keeps its shapes
==========================================================================
Two capsules, four nav items and a cart button have to share one row down to a
320px screen. Fixed pixel sizes could not do it: at 56px items the pair came to
402px and hung off both edges, and shrinking them with flex squashed the circles
into ovals — the active red item and the delete button stopped being round.
Every size is clamped against vw instead, so the whole dock scales as a unit,
and every round control carries aspect-ratio:1 so it is round by construction
and cannot be squashed by whatever space is left.
========================================================================== */
.bottom-dock{
gap:clamp(5px,1.6vw,8px)!important;
max-width:calc(100% - 20px)!important;
}
.bottom-dock > *{
min-height:clamp(46px,14vw,56px)!important;
padding:clamp(4px,1.2vw,5px)!important;
gap:clamp(3px,1vw,5px)!important;
}
/* Nav items: circles, never ovals, never clipped. */
.bottom-dock .store-nav-item{
flex:0 0 auto!important;
width:clamp(34px,10.5vw,48px)!important;
height:auto!important;
aspect-ratio:1!important;
min-width:0!important;max-width:none!important;
border-radius:50%!important;
padding:0!important;
}
.bottom-dock .store-nav-item svg{width:clamp(17px,5.2vw,22px);height:clamp(17px,5.2vw,22px)}
.bottom-dock .store-nav-item.is-active{border-radius:50%!important}
/* The nav capsule hugs its four items rather than being told a width. */
.bottom-dock .store-bottom-nav{
flex:0 0 auto!important;
grid-template-columns:none!important;
overflow:visible!important;
}
/* Cart stays a capsule — a pill, not a circle. */
.bottom-dock .floating-cart{
height:clamp(38px,11.5vw,46px)!important;
padding:0 clamp(11px,3.4vw,17px) 0 clamp(10px,3vw,15px)!important;
border-radius:999px!important;
flex:0 1 auto!important;min-width:0!important;
}
.bottom-dock .floating-cart b#cartAmount{
font-size:clamp(12px,3.6vw,14px)!important;
overflow:hidden;text-overflow:ellipsis;
}
/* Delete: a circle like the nav items, not an egg. */
.bottom-dock .floating-clear{
flex:0 0 auto!important;
width:clamp(30px,9vw,40px)!important;
height:auto!important;
aspect-ratio:1!important;
min-width:0!important;
border-radius:50%!important;
padding:0!important;
}
.bottom-dock .floating-clear svg{width:clamp(15px,4.6vw,19px);height:clamp(15px,4.6vw,19px)}
/* The count badge scales with the button it rides on. */
.bottom-dock .floating-cart span#cartCount{
min-width:clamp(17px,5vw,20px);height:clamp(17px,5vw,20px);
font-size:clamp(10px,3vw,11.5px);
top:clamp(-9px,-2.6vw,-8px)!important;right:clamp(-9px,-2.6vw,-8px)!important;
}
/* The wishlist heart sits ON the dish photo, so a 14%-white tint disappeared into
whatever the picture happened to be. It gets a dark glass puck instead — enough
body to separate from any photo, still translucent enough to read as glass. */
html[data-theme="dark"] .dish-favorite-button{
background:rgba(20,20,24,.55)!important;
border:1px solid rgba(255,255,255,.22)!important;
-webkit-backdrop-filter:blur(10px) saturate(1.3)!important;
backdrop-filter:blur(10px) saturate(1.3)!important;
box-shadow:inset 0 1px 0 rgba(255,255,255,.18),0 4px 14px rgba(0,0,0,.45)!important;
color:#f2f2f5!important;
}
html[data-theme="dark"] .dish-favorite-button svg{
stroke:#f2f2f5;fill:none;
filter:drop-shadow(0 1px 2px rgba(0,0,0,.6));
}
html[data-theme="dark"] .dish-favorite-button.is-favorite{
background:rgba(255,90,82,.28)!important;
border-color:rgba(255,107,98,.6)!important;
}
html[data-theme="dark"] .dish-favorite-button.is-favorite svg{fill:#ff6b62;stroke:#ff6b62}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
html[data-theme="dark"] .dish-favorite-button{background:rgba(20,20,24,.78)!important}
}
/* The nav capsule is a flex row and flex defaults to align-items:stretch, so the
items were being pulled to the capsule's full height — 41x52 — and aspect-ratio
could not win against that. Measured, not guessed: the active red item was an
oval, which is exactly what it looked like.
align-self:center lets each item keep its own square box. */
.bottom-dock .store-bottom-nav{align-items:center!important}
.bottom-dock .store-nav-item{align-self:center!important}
/* Same for the cart capsule's contents: the delete button must not stretch either. */
.bottom-dock .floating-cart-row{align-items:center!important}
.bottom-dock .floating-clear,
.bottom-dock .floating-cart{align-self:center!important}
/* The original nav styles pin .store-nav-item to min-height:52px (and 56/59/64 at
other breakpoints) with !important. A min-height floor beats both height:auto and
aspect-ratio, so the item stayed 52px tall against a 41px width — an oval. The
floor is removed inside the dock, where the width defines the circle. */
.bottom-dock .store-nav-item,
.bottom-dock .floating-clear{min-height:0!important;max-height:none!important}
/* ==========================================================================
Veg-only switch — a tile in the service row, beside Bill
Sized to match Water / Extra plates / Bill exactly: the same two-row structure
(something on top, label underneath), so it cannot come out taller. The mark is
the real FSSAI veg symbol and only goes green once the filter is actually on.
========================================================================== */
body[data-page="home"] .service-actions{grid-template-columns:repeat(4,minmax(0,1fr))!important}
.veg-only-tile{
display:flex!important;flex-direction:column!important;
align-items:center!important;justify-content:center!important;
gap:5px!important;
border:0;border-radius:22px;
background:rgba(255,255,255,.82);
color:var(--text,#16120f);
box-shadow:inset 0 1px 0 rgba(255,255,255,.85),0 12px 32px rgba(42,22,8,.10);
/* Matches the siblings' box; the row's grid gives them equal widths already. */
min-height:58px!important;height:100%;padding:7px 6px!important;
}
.veg-only-top{display:flex;align-items:center;gap:7px}
.veg-only-mark{color:rgba(22,18,15,.34);transition:color .18s ease}
.veg-only-mark svg{width:19px;height:19px;display:block}
.veg-only-tile small{
display:block;max-width:100%;
font-size:10.5px;line-height:1;font-weight:900;
white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.veg-only-track{
width:24px;height:13px;border-radius:999px;
background:rgba(22,18,15,.18);
display:block;position:relative;transition:background .18s ease;flex:0 0 auto;
}
.veg-only-track i{
position:absolute;top:2px;left:2px;
width:9px;height:9px;border-radius:50%;
background:#fff;transition:transform .18s ease;
box-shadow:0 1px 2px rgba(0,0,0,.25);
}
/* ON: the mark becomes the green veg symbol it is meant to be. */
.veg-only-tile.is-on .veg-only-mark{color:#0f7a3d}
.veg-only-tile.is-on .veg-only-track{background:#0f7a3d}
.veg-only-tile.is-on .veg-only-track i{transform:translateX(11px)}
html[data-theme="dark"] .veg-only-tile{
background:rgba(255,255,255,.07)!important;color:var(--text)!important;
box-shadow:inset 0 1px 0 rgba(255,255,255,.10),0 12px 32px rgba(0,0,0,.45)!important;
}
html[data-theme="dark"] .veg-only-mark{color:rgba(242,242,245,.38)}
html[data-theme="dark"] .veg-only-tile.is-on .veg-only-mark{color:#5fd489}
html[data-theme="dark"] .veg-only-track{background:rgba(255,255,255,.20)}
html[data-theme="dark"] .veg-only-tile.is-on .veg-only-track{background:#2f9e5c}
@media(max-width:380px){
.veg-only-tile small{font-size:9.5px}
.veg-only-top{gap:5px}
.veg-only-mark svg{width:17px;height:17px}
.veg-only-track{width:21px;height:12px}
.veg-only-track i{width:8px;height:8px}
.veg-only-tile.is-on .veg-only-track i{transform:translateX(9px)}
}
/* ==========================================================================
Combos sheet
========================================================================== */
.combos-sheet-sub{margin:0 0 14px;font-size:13px;line-height:1.45;color:var(--text-muted,rgba(22,18,15,.62))}
.combos-sheet-list{display:flex;flex-direction:column;gap:12px}
.combo-sheet-item{
display:grid;grid-template-columns:92px minmax(0,1fr);gap:12px;align-items:stretch;
padding:10px;border-radius:20px;
background:rgba(22,18,15,.04);
border:1px solid rgba(22,18,15,.09);
}
.combo-sheet-media{
min-height:92px;border-radius:14px;
background:rgba(22,18,15,.06) center/cover no-repeat;
}
.combo-sheet-body{display:flex;flex-direction:column;gap:6px;min-width:0}
.combo-sheet-labels{display:flex;gap:6px;flex-wrap:wrap}
.combo-sheet-item h3{margin:0;font-size:16px;line-height:1.2;color:var(--text,#16120f);text-wrap:balance}
.combo-sheet-contents{
margin:0;font-size:12px;line-height:1.4;font-weight:700;
color:var(--text-muted,rgba(22,18,15,.62));
}
.combo-sheet-foot{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:auto}
.combo-sheet-foot .price{margin:0;font-size:15px}
.combo-sheet-add{
border:0;border-radius:999px;padding:9px 18px;
font-size:13px;font-weight:900;line-height:1;white-space:nowrap;
background:linear-gradient(135deg,
color-mix(in srgb, var(--orange) 88%, #000),
color-mix(in srgb, var(--red) 88%, #000));
color:#fff;
}
html[data-theme="dark"] .combo-sheet-item{
background:rgba(255,255,255,.06)!important;border-color:rgba(255,255,255,.12)!important;
}
html[data-theme="dark"] .combo-sheet-item h3,
html[data-theme="dark"] .combo-sheet-foot .price{color:var(--text)!important}
html[data-theme="dark"] .combo-sheet-contents,
html[data-theme="dark"] .combos-sheet-sub{color:var(--text-muted)!important}
html[data-theme="dark"] .combo-sheet-media{background-color:rgba(255,255,255,.07)!important}
/* ==========================================================================
Favourites — dark
Its panel, empty state and dish rows were never covered.
========================================================================== */
html[data-theme="dark"] .favorites-view,
html[data-theme="dark"] .favorites-view-head,
html[data-theme="dark"] .favorites-list{
background:transparent!important;color:var(--text)!important;
}
html[data-theme="dark"] .favorites-view-head h2,
html[data-theme="dark"] .favorites-view-head b{color:var(--text)!important}
html[data-theme="dark"] .favorites-view-head span,
html[data-theme="dark"] .favorites-empty{color:var(--text-muted)!important}
html[data-theme="dark"] .favorites-view-head button,
html[data-theme="dark"] #closeFavorites{
background:rgba(255,255,255,.12)!important;color:var(--text)!important;border:0!important;
}
html[data-theme="dark"] .favorites-list .menu-item{
background:rgba(255,255,255,.07)!important;
box-shadow:inset 0 1px 0 rgba(255,255,255,.10),0 12px 32px rgba(0,0,0,.45)!important;
}
/* Banner captions sit on a scrim over a photo the restaurant uploaded — which could
be anything. The scrim carries most of the contrast, but a shadow makes the text
hold up over a bright or busy image too, at no cost when the photo is dark. */
.store-banner-cap b,.store-banner-cap span{
text-shadow:0 1px 3px rgba(0,0,0,.55),0 0 12px rgba(0,0,0,.35);
}
.store-banner-cap.is-on-light b,.store-banner-cap.is-on-light span{
text-shadow:0 1px 3px rgba(255,255,255,.6),0 0 12px rgba(255,255,255,.4);
}
/* The mark also carries .service-icon, and `.service-circles .service-icon` sets
colour with !important — so the veg mark could never go green. Stated here at a
specificity that clears it, for both states and both themes. */
.service-circles .veg-only-tile .veg-only-mark{color:rgba(22,18,15,.34)!important}
.service-circles .veg-only-tile.is-on .veg-only-mark{color:#0f7a3d!important}
html[data-theme="dark"] .service-circles .veg-only-tile .veg-only-mark{color:rgba(242,242,245,.38)!important}
html[data-theme="dark"] .service-circles .veg-only-tile.is-on .veg-only-mark{color:#5fd489!important}