/* ==========================================================================
   Bean Home Online - mobile app styling
   Mobile first. On desktop the whole app is framed as a phone.
   ========================================================================== */

:root{
  /* store colours - defaults only; brandStyleTag() overrides these per store */
  --brand:#00b14f;
  --brand-dark:#00913f;
  --brand-deep:#006136;
  --brand-light:#38c275;
  --brand-soft:#e6f8ee;
  --brand-rgb:0,177,79;
  --on-brand:#ffffff;
  --coffee:#4a2c1d;
  --coffee-2:#735a4f;
  --coffee-3:#928077;
  --coffee-soft:#f6efe9;
  --on-coffee:#ffffff;
  --amber:#ff9f1c;
  --danger:#e53935;
  --info:#0ea5e9;

  --ink:#17181a;
  --ink-2:#4b5563;
  --muted:#8b909a;
  --line:#ececef;
  --bg:#f3f4f6;
  --card:#ffffff;

  --r-sm:8px;
  --r:12px;
  --r-lg:18px;
  --r-xl:26px;

  --shadow-1:0 1px 2px rgba(16,24,40,.06),0 1px 3px rgba(16,24,40,.05);
  --shadow-2:0 4px 14px rgba(16,24,40,.09);
  --shadow-3:0 -6px 24px rgba(16,24,40,.12);

  --shell:480px;
  --nav-h:62px;
  --font:"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
}

*,*::before,*::after{box-sizing:border-box}

html,body{margin:0;padding:0}
body{
  font-family:var(--font);
  background:#e9eaee;
  color:var(--ink);
  -webkit-font-smoothing:antialiased;
  -webkit-tap-highlight-color:transparent;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer;border:0;background:none}
ul{margin:0;padding:0;list-style:none}

/* ---------- phone frame -------------------------------------------------- */
.app{
  max-width:var(--shell);
  margin:0 auto;
  min-height:100vh;
  background:var(--bg);
  position:relative;
  box-shadow:0 0 40px rgba(0,0,0,.14);
  overflow-x:hidden;
}
.app-body{padding-bottom:calc(var(--nav-h) + 18px)}
.app-body.has-cartbar{padding-bottom:calc(var(--nav-h) + 86px)}

/* ---------- top bar ------------------------------------------------------ */
.topbar{
  background:linear-gradient(135deg,var(--brand) 0%,var(--brand-dark) 100%);
  color:var(--on-brand);
  padding:14px 16px 16px;
  position:sticky;top:0;z-index:40;
}
.topbar.plain{
  background:var(--card);color:var(--ink);
  border-bottom:1px solid var(--line);
  padding:12px 12px;
  display:flex;align-items:center;gap:10px;
}
.topbar.plain .page-title{font-size:17px;font-weight:700;flex:1;min-width:0;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

.deliver-row{display:flex;align-items:flex-start;gap:10px}
.deliver-label{font-size:11px;opacity:.85;letter-spacing:.4px;text-transform:uppercase}
.deliver-addr{font-size:14px;font-weight:700;display:flex;align-items:center;gap:6px;
  max-width:260px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.top-actions{margin-left:auto;display:flex;gap:8px}
.icon-btn{
  width:38px;height:38px;border-radius:50%;
  display:grid;place-items:center;background:rgba(255,255,255,.18);
  color:var(--on-brand);font-size:17px;flex:none;
}
.topbar.plain .icon-btn{background:#f2f3f5;color:var(--ink)}
.icon-btn:active{transform:scale(.94)}

.searchbar{
  margin-top:14px;background:#fff;border-radius:var(--r-xl);
  display:flex;align-items:center;gap:8px;padding:10px 14px;
  box-shadow:var(--shadow-1);
}
.searchbar input{border:0;outline:0;flex:1;font-size:14px;background:transparent}
.searchbar .s-icon{color:var(--muted);font-size:15px}

/* ---------- generic layout ---------------------------------------------- */
.section{padding:16px}
.section.tight{padding:12px 16px}
.section-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}
.section-title{font-size:16px;font-weight:800;letter-spacing:-.2px}
.section-sub{font-size:12px;color:var(--muted);margin-top:2px}
.link-more{font-size:12.5px;font-weight:700;color:var(--brand)}

.card{background:var(--card);border-radius:var(--r-lg);box-shadow:var(--shadow-1)}
.pad{padding:14px}
.divider{height:8px;background:#eceef1}
.hr{height:1px;background:var(--line);margin:12px 0}

.muted{color:var(--muted)}
.small{font-size:12px}
.tiny{font-size:11px}
.bold{font-weight:700}
.center{text-align:center}
.row{display:flex;align-items:center;gap:10px}
.row.between{justify-content:space-between}
.grow{flex:1;min-width:0}
.stack{display:flex;flex-direction:column;gap:10px}
.truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* ---------- category chips ---------------------------------------------- */
.scroller{
  display:flex;gap:10px;overflow-x:auto;padding:2px 16px 6px;
  scrollbar-width:none;-ms-overflow-style:none;scroll-snap-type:x proximity;
}
.scroller::-webkit-scrollbar{display:none}

.cat{
  flex:none;width:72px;text-align:center;
}
.cat .bubble{
  width:56px;height:56px;margin:0 auto 6px;border-radius:18px;
  background:var(--coffee-soft);display:grid;place-items:center;font-size:25px;
  border:2px solid transparent;transition:.15s;
}
.cat.active .bubble{border-color:var(--brand);background:var(--brand-soft)}
.cat .cname{font-size:11px;font-weight:600;color:var(--ink-2);line-height:1.25}
.cat.active .cname{color:var(--brand)}

.chips{display:flex;gap:8px;overflow-x:auto;padding:0 16px 4px;scrollbar-width:none}
.chips::-webkit-scrollbar{display:none}
.chip{
  flex:none;padding:7px 14px;border-radius:999px;background:#fff;
  border:1px solid var(--line);font-size:12.5px;font-weight:600;color:var(--ink-2);
}
.chip.active{background:var(--brand);border-color:var(--brand);color:var(--on-brand)}

/* ---------- promo banners ------------------------------------------------ */
.banners{display:flex;gap:12px;overflow-x:auto;padding:4px 16px 8px;
  scroll-snap-type:x mandatory;scrollbar-width:none}
.banners::-webkit-scrollbar{display:none}
.banner{
  flex:none;width:86%;scroll-snap-align:center;
  border-radius:var(--r-lg);padding:18px;color:#fff;position:relative;overflow:hidden;
  box-shadow:var(--shadow-2);min-height:124px;
  display:flex;flex-direction:column;justify-content:center;
}
.banner h3{margin:0 0 4px;font-size:18px;letter-spacing:-.3px}
.banner p{margin:0;font-size:12.5px;opacity:.92;max-width:78%;line-height:1.45}
.banner .b-emoji{position:absolute;right:-6px;bottom:-10px;font-size:76px;opacity:.28}
.b-green{background:linear-gradient(120deg,var(--brand),var(--brand-light));color:var(--on-brand)}
.b-coffee{background:linear-gradient(120deg,var(--coffee),var(--coffee-2));color:var(--on-coffee)}
.b-amber{background:linear-gradient(120deg,#ff9f1c,#ffbe5c)}

/* ---------- product list (GrabFood style) -------------------------------- */
.food-list{display:flex;flex-direction:column}
.food-card{
  display:flex;gap:12px;padding:14px 16px;background:var(--card);
  border-bottom:1px solid var(--line);align-items:flex-start;position:relative;
}
.food-card:active{background:#fafafa}
.food-thumb{
  width:88px;height:88px;border-radius:var(--r);flex:none;object-fit:cover;
  background:var(--coffee-soft);
}
.food-info{flex:1;min-width:0}
.food-name{font-size:14.5px;font-weight:700;line-height:1.3;margin-bottom:3px}
.food-desc{
  font-size:12px;color:var(--muted);line-height:1.45;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.food-meta{display:flex;align-items:center;gap:8px;margin-top:7px;flex-wrap:wrap}
.price{font-size:14.5px;font-weight:800;color:var(--ink)}
.price-from{font-size:11px;color:var(--muted);font-weight:600}
.rating{font-size:11.5px;color:var(--ink-2);font-weight:600}
.add-btn{
  position:absolute;right:16px;bottom:14px;width:30px;height:30px;border-radius:9px;
  background:var(--brand);color:var(--on-brand);font-size:18px;line-height:1;
  display:grid;place-items:center;box-shadow:var(--shadow-1);
}
.add-btn:active{transform:scale(.9)}
.food-card.out .food-thumb,.food-card.out .food-info{opacity:.45}
.food-card.out .add-btn{background:var(--muted)}

/* featured horizontal cards */
.feature-row{display:flex;gap:12px;overflow-x:auto;padding:2px 16px 10px;scrollbar-width:none}
.feature-row::-webkit-scrollbar{display:none}
.feature{
  flex:none;width:152px;background:var(--card);border-radius:var(--r-lg);
  overflow:hidden;box-shadow:var(--shadow-1);
}
.feature img{width:100%;height:104px;object-fit:cover;background:var(--coffee-soft)}
.feature .f-body{padding:9px 10px 11px}
.feature .f-name{font-size:13px;font-weight:700;line-height:1.25;margin-bottom:3px;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:32px}
.feature .f-price{font-size:13px;font-weight:800;color:var(--brand)}

.badge{
  display:inline-flex;align-items:center;gap:4px;font-size:10.5px;font-weight:800;
  padding:3px 8px;border-radius:999px;background:var(--brand-soft);color:var(--brand-dark);
  text-transform:uppercase;letter-spacing:.3px;
}
.badge.amber{background:#fff3e0;color:#b45309}
.badge.grey{background:#f1f2f4;color:var(--ink-2)}
.badge.red{background:#fdecea;color:#b71c1c}
.badge.blue{background:#e3f4fd;color:#0369a1}
.badge.float{position:absolute;top:10px;left:10px}

/* ---------- buttons ------------------------------------------------------ */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:13px 18px;border-radius:var(--r);font-size:14.5px;font-weight:700;
  background:#f1f2f4;color:var(--ink);width:100%;transition:.12s;
}
.btn:active{transform:scale(.985)}
.btn-primary{background:var(--brand);color:var(--on-brand);box-shadow:0 4px 12px rgba(var(--brand-rgb),.28)}
.btn-primary:disabled{background:#c9ccd1;color:#fff;box-shadow:none}
.btn-coffee{background:var(--coffee);color:var(--on-coffee)}
.btn-outline{background:#fff;border:1.5px solid var(--brand);color:var(--brand)}
.btn-ghost{background:#fff;border:1px solid var(--line);color:var(--ink-2)}
.btn-danger{background:#fdecea;color:#b71c1c}
.btn-sm{padding:9px 14px;font-size:13px;border-radius:10px;width:auto}
.btn-block{width:100%}
.btn:disabled{opacity:.65;pointer-events:none}

/* ---------- forms -------------------------------------------------------- */
.field{margin-bottom:14px}
.label{display:block;font-size:12.5px;font-weight:700;color:var(--ink-2);margin-bottom:6px}
.input,.textarea,.select{
  width:100%;padding:13px 14px;border:1.5px solid var(--line);border-radius:var(--r);
  font-size:14.5px;background:#fff;outline:0;transition:.15s;
}
.input:focus,.textarea:focus,.select:focus{border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-soft)}
.textarea{min-height:82px;resize:vertical}
.hint{font-size:11.5px;color:var(--muted);margin-top:5px;line-height:1.45}
.input-group{display:flex;align-items:stretch}
.input-group .prefix{
  display:flex;align-items:center;padding:0 12px;background:#f1f2f4;
  border:1.5px solid var(--line);border-right:0;border-radius:var(--r) 0 0 var(--r);
  font-size:14px;font-weight:700;color:var(--ink-2);
}
.input-group .input{border-radius:0 var(--r) var(--r) 0}
.err{color:var(--danger);font-size:12px;margin-top:5px}

.switch{display:flex;align-items:center;gap:10px;cursor:pointer}
.switch input{display:none}
.switch .track{
  width:44px;height:26px;border-radius:999px;background:#d4d6db;position:relative;transition:.18s;flex:none;
}
.switch .track::after{
  content:"";position:absolute;top:3px;left:3px;width:20px;height:20px;border-radius:50%;
  background:#fff;transition:.18s;box-shadow:var(--shadow-1);
}
.switch input:checked + .track{background:var(--brand)}
.switch input:checked + .track::after{transform:translateX(18px)}

.radio-card{
  display:flex;align-items:center;gap:12px;padding:13px 14px;border:1.5px solid var(--line);
  border-radius:var(--r);background:#fff;margin-bottom:10px;cursor:pointer;
}
.radio-card.active{border-color:var(--brand);background:var(--brand-soft)}
.radio-card input{accent-color:var(--brand);width:18px;height:18px}

/* size picker */
.size-row{display:flex;gap:10px}
.size-opt{
  flex:1;border:1.5px solid var(--line);border-radius:var(--r);padding:11px 6px;text-align:center;
  background:#fff;cursor:pointer;transition:.13s;
}
.size-opt .s-l{font-size:15px;font-weight:800}
.size-opt .s-p{font-size:11px;color:var(--muted);margin-top:2px;font-weight:600}
.size-opt.active{border-color:var(--brand);background:var(--brand-soft)}
.size-opt.active .s-p{color:var(--brand-dark)}

/* quantity stepper */
.stepper{display:inline-flex;align-items:center;gap:14px}
.stepper button{
  width:32px;height:32px;border-radius:50%;background:#f1f2f4;color:var(--ink);
  font-size:18px;display:grid;place-items:center;line-height:1;
}
.stepper button.plus{background:var(--brand);color:var(--on-brand)}
.stepper button:disabled{opacity:.4}
.stepper .q{min-width:22px;text-align:center;font-weight:800;font-size:15px}

/* ---------- alerts ------------------------------------------------------- */
.alert{
  padding:12px 14px;border-radius:var(--r);font-size:13px;line-height:1.5;
  margin:0 16px 12px;display:flex;gap:9px;align-items:flex-start;
}
.alert.success{background:var(--brand-soft);color:var(--brand-deep)}
.alert.error{background:#fdecea;color:#b3261e}
.alert.info{background:#e8f4fd;color:#0b5c8a}
.alert.warn{background:#fff6e5;color:#8a5a00}
.alert .a-icon{flex:none}

/* ---------- bottom nav --------------------------------------------------- */
.bottom-nav{
  position:fixed;bottom:0;left:50%;transform:translateX(-50%);
  width:100%;max-width:var(--shell);height:var(--nav-h);
  background:#fff;border-top:1px solid var(--line);
  display:flex;z-index:50;padding-bottom:env(safe-area-inset-bottom);
}
.bottom-nav a{
  flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
  font-size:10.5px;font-weight:600;color:var(--muted);position:relative;
}
.bottom-nav a .n-icon{font-size:19px;line-height:1}
.bottom-nav a.active{color:var(--brand)}
.nav-dot{
  position:absolute;top:6px;right:50%;margin-right:-20px;min-width:17px;height:17px;padding:0 4px;
  border-radius:999px;background:var(--danger);color:#fff;font-size:10px;font-weight:800;
  display:grid;place-items:center;
}

/* ---------- floating basket bar ------------------------------------------ */
.cart-bar{
  position:fixed;bottom:calc(var(--nav-h) + 10px);left:50%;transform:translateX(-50%);
  width:calc(min(100vw,var(--shell)) - 24px);z-index:49;
}
.cart-bar a{
  display:flex;align-items:center;gap:12px;background:var(--brand);color:var(--on-brand);
  padding:12px 16px;border-radius:14px;box-shadow:0 8px 22px rgba(var(--brand-rgb),.35);
}
.cart-bar .cb-count{
  background:rgba(255,255,255,.22);border-radius:8px;padding:3px 9px;font-size:13px;font-weight:800;
}
.cart-bar .cb-label{flex:1;font-size:14px;font-weight:700}
.cart-bar .cb-total{font-size:15px;font-weight:800}

/* ---------- bottom sheet ------------------------------------------------- */
.sheet-backdrop{
  position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:60;opacity:0;pointer-events:none;
  transition:opacity .22s;
}
.sheet-backdrop.open{opacity:1;pointer-events:auto}
.sheet{
  position:fixed;bottom:0;left:50%;transform:translate(-50%,100%);
  width:100%;max-width:var(--shell);background:#fff;z-index:61;
  border-radius:22px 22px 0 0;transition:transform .26s cubic-bezier(.22,1,.36,1);
  max-height:92vh;display:flex;flex-direction:column;
}
.sheet.open{transform:translate(-50%,0)}
.sheet-grab{width:40px;height:4px;border-radius:999px;background:#d9dbe0;margin:10px auto 2px;flex:none}
.sheet-scroll{overflow-y:auto;padding:6px 16px 16px;-webkit-overflow-scrolling:touch}
.sheet-foot{padding:12px 16px calc(14px + env(safe-area-inset-bottom));border-top:1px solid var(--line);
  background:#fff;border-radius:0 0 0 0;flex:none}
.sheet-hero{width:100%;height:190px;object-fit:cover;background:var(--coffee-soft);
  border-radius:0;margin:-12px -16px 14px;width:calc(100% + 32px)}

/* ---------- loyalty card ------------------------------------------------- */
.loyalty-card{
  background:linear-gradient(135deg,var(--coffee) 0%,var(--coffee-2) 55%,var(--coffee-3) 100%);
  color:var(--on-coffee);border-radius:var(--r-lg);padding:18px;position:relative;overflow:hidden;
  box-shadow:var(--shadow-2);
}
.loyalty-card::after{
  content:"";position:absolute;right:-42px;top:-42px;width:150px;height:150px;
  border-radius:50%;background:rgba(255,255,255,.07);
}
.lc-top{display:flex;justify-content:space-between;align-items:flex-start;position:relative;z-index:1}
.lc-title{font-size:12px;letter-spacing:1px;text-transform:uppercase;opacity:.82;font-weight:700}
.lc-count{font-size:30px;font-weight:800;line-height:1.1;margin-top:4px}
.lc-count span{font-size:14px;font-weight:600;opacity:.8}
.lc-meta{font-size:11.5px;opacity:.82;margin-top:8px;line-height:1.55;position:relative;z-index:1}

.stamps{display:grid;grid-template-columns:repeat(10,1fr);gap:7px;margin:16px 0 4px;position:relative;z-index:1}
.stamp{
  aspect-ratio:1;border-radius:50%;background:rgba(255,255,255,.14);
  border:1.5px dashed rgba(255,255,255,.35);display:grid;place-items:center;font-size:12px;
}
.stamp.on{background:#fff;border:1.5px solid #fff;color:var(--coffee)}
.stamp.free{background:var(--amber);border-color:var(--amber);color:#3d2200;font-size:13px}

.progress{height:8px;border-radius:999px;background:#eceef1;overflow:hidden}
.progress > span{display:block;height:100%;background:var(--brand);border-radius:999px;transition:width .4s}

.reward-banner{
  background:linear-gradient(120deg,#ff9f1c,#ffc65c);color:#3d2200;border-radius:var(--r);
  padding:13px 14px;display:flex;align-items:center;gap:11px;font-size:13px;font-weight:700;
}

/* ---------- OTP ---------------------------------------------------------- */
.otp-inputs{display:flex;gap:9px;justify-content:center;margin:18px 0 6px}
.otp-inputs input{
  width:46px;height:56px;text-align:center;font-size:22px;font-weight:800;
  border:1.5px solid var(--line);border-radius:var(--r);background:#fff;outline:0;
}
.otp-inputs input:focus{border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-soft)}
.otp-inputs input.filled{border-color:var(--brand)}
.otp-timer{text-align:center;font-size:13px;color:var(--ink-2);margin-top:10px}
.otp-timer b{color:var(--brand);font-variant-numeric:tabular-nums}
.otp-timer.expired b{color:var(--danger)}

/* ---------- order status timeline ---------------------------------------- */
.timeline{position:relative;padding-left:26px}
.timeline::before{content:"";position:absolute;left:8px;top:6px;bottom:6px;width:2px;background:var(--line)}
.tl-item{position:relative;padding:0 0 18px}
.tl-item:last-child{padding-bottom:0}
.tl-dot{
  position:absolute;left:-26px;top:1px;width:18px;height:18px;border-radius:50%;
  background:#fff;border:2px solid var(--line);display:grid;place-items:center;font-size:9px;
}
.tl-item.done .tl-dot{background:var(--brand);border-color:var(--brand);color:var(--on-brand)}
.tl-item.current .tl-dot{background:#fff;border-color:var(--brand);box-shadow:0 0 0 4px var(--brand-soft)}
.tl-title{font-size:13.5px;font-weight:700}
.tl-time{font-size:11.5px;color:var(--muted);margin-top:2px}

.status-pill{
  display:inline-flex;align-items:center;gap:6px;padding:5px 11px;border-radius:999px;
  font-size:11.5px;font-weight:800;color:#fff;
}

/* ---------- map ---------------------------------------------------------- */
.map-box{height:230px;border-radius:var(--r);overflow:hidden;border:1px solid var(--line);
  position:relative;background:#e8eaed}
.map-box.small{height:170px}
/* the Leaflet container must fill .map-box - without a height it collapses to 0px and only the grey box shows */
#map,#omap,.map-canvas,.leaflet-map{height:100%;width:100%}
.map-hint{
  position:absolute;left:10px;right:10px;bottom:10px;z-index:500;background:rgba(255,255,255,.95);
  border-radius:10px;padding:8px 11px;font-size:11.5px;color:var(--ink-2);
  box-shadow:var(--shadow-1);display:flex;gap:7px;align-items:center;
}
.pin-coords{font-size:11.5px;color:var(--muted);margin-top:6px;font-variant-numeric:tabular-nums}

/* ---------- landing / intro --------------------------------------------- */
.intro{
  min-height:100vh;display:flex;flex-direction:column;
  background:linear-gradient(165deg,var(--brand) 0%,var(--brand-dark) 45%,var(--brand-deep) 100%);
  color:var(--on-brand);padding:0 22px 26px;position:relative;overflow:hidden;
}
.intro::before{
  content:"";position:absolute;width:320px;height:320px;border-radius:50%;
  background:rgba(255,255,255,.07);top:-110px;right:-120px;
}
.intro::after{
  content:"";position:absolute;width:220px;height:220px;border-radius:50%;
  background:rgba(255,255,255,.06);bottom:120px;left:-90px;
}
.intro-top{flex:1;display:flex;flex-direction:column;justify-content:center;
  align-items:center;text-align:center;position:relative;z-index:1;padding-top:40px}
.intro-logo{
  width:88px;height:88px;border-radius:26px;background:#fff;display:grid;place-items:center;
  font-size:44px;box-shadow:0 10px 30px rgba(0,0,0,.18);margin-bottom:18px;
}
.intro h1{font-size:28px;margin:0 0 6px;letter-spacing:-.6px}
.intro .tag{font-size:13.5px;opacity:.92;margin:0;line-height:1.6;max-width:280px}
.intro-actions{position:relative;z-index:1;display:flex;flex-direction:column;gap:11px}
.intro-actions .btn{padding:15px 18px;font-size:15px;border-radius:14px}
.intro .b-white{background:#fff;color:var(--brand-dark)}
.intro .b-glass{background:rgba(255,255,255,.16);color:var(--on-brand);border:1.5px solid currentColor}
.intro .b-link{background:transparent;color:var(--on-brand);font-size:13.5px;text-decoration:underline;padding:6px}
.intro-feats{display:flex;justify-content:center;gap:18px;margin:20px 0 26px;position:relative;z-index:1}
.intro-feat{text-align:center;font-size:10.5px;opacity:.9;max-width:78px;line-height:1.4}
.intro-feat .if-ico{font-size:20px;display:block;margin-bottom:4px}

/* ---------- misc --------------------------------------------------------- */
.empty{
  text-align:center;padding:52px 26px;color:var(--muted);
}
.empty .e-ico{font-size:52px;margin-bottom:12px;opacity:.55}
.empty h3{margin:0 0 6px;font-size:16px;color:var(--ink)}
.empty p{margin:0 0 18px;font-size:13px;line-height:1.6}

.list-row{
  display:flex;align-items:center;gap:12px;padding:14px 16px;background:#fff;
  border-bottom:1px solid var(--line);
}
.list-row .lr-ico{
  width:38px;height:38px;border-radius:11px;background:var(--coffee-soft);
  display:grid;place-items:center;font-size:18px;flex:none;
}
.list-row .lr-title{font-size:14px;font-weight:600}
.list-row .lr-sub{font-size:11.5px;color:var(--muted);margin-top:2px}
.list-row .lr-arrow{color:#c7cad0;font-size:16px}

.order-card{background:#fff;border-radius:var(--r-lg);box-shadow:var(--shadow-1);
  padding:14px;margin-bottom:12px}
.order-card .oc-top{display:flex;justify-content:space-between;align-items:flex-start;gap:10px}
.order-card .oc-no{font-size:12px;color:var(--muted);font-weight:600}
.order-card .oc-items{font-size:13px;color:var(--ink-2);margin-top:8px;line-height:1.5}

.kv{display:flex;justify-content:space-between;gap:12px;font-size:13.5px;padding:5px 0}
.kv .k{color:var(--ink-2)}
.kv .v{font-weight:600;text-align:right}
.kv.total{font-size:16px;font-weight:800;padding-top:10px;margin-top:6px;border-top:1px dashed var(--line)}
.kv.discount .v{color:var(--brand)}

.toast{
  position:fixed;bottom:calc(var(--nav-h) + 78px);left:50%;transform:translate(-50%,16px);
  background:#17181a;color:#fff;padding:11px 18px;border-radius:999px;font-size:13px;font-weight:600;
  z-index:80;opacity:0;transition:.25s;pointer-events:none;max-width:88%;text-align:center;
  box-shadow:var(--shadow-2);
}
.toast.show{opacity:1;transform:translate(-50%,0)}

.dev-box{
  margin:0 16px 12px;padding:12px 14px;border:1.5px dashed var(--amber);border-radius:var(--r);
  background:#fffbf2;font-size:12.5px;color:#7a4a00;line-height:1.6;
}
.dev-box .code{font-size:22px;font-weight:800;letter-spacing:5px;color:#b45309;display:block;margin-top:4px}

/* ---------- admin -------------------------------------------------------- */
.admin-shell{max-width:var(--shell)}
.admin-top{
  background:linear-gradient(135deg,var(--coffee),var(--coffee-2));color:var(--on-coffee);padding:16px;
  position:sticky;top:0;z-index:40;
}
.admin-top .at-row{display:flex;align-items:center;gap:10px}
.admin-top h1{font-size:17px;margin:0;font-weight:800}
.admin-top .at-sub{font-size:11.5px;opacity:.8;margin-top:2px}

.stat-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:11px;padding:16px}
.stat{background:#fff;border-radius:var(--r-lg);padding:14px;box-shadow:var(--shadow-1)}
.stat .s-label{font-size:11px;color:var(--muted);font-weight:700;text-transform:uppercase;letter-spacing:.4px}
.stat .s-val{font-size:22px;font-weight:800;margin-top:5px;letter-spacing:-.5px}
.stat .s-foot{font-size:11px;color:var(--muted);margin-top:3px}

.tabs{display:flex;gap:6px;overflow-x:auto;padding:0 16px 12px;scrollbar-width:none;background:var(--bg)}
.tabs::-webkit-scrollbar{display:none}
.tab{flex:none;padding:8px 14px;border-radius:999px;background:#fff;border:1px solid var(--line);
  font-size:12.5px;font-weight:700;color:var(--ink-2)}
.tab.active{background:var(--coffee);border-color:var(--coffee);color:var(--on-coffee)}

.table{width:100%;border-collapse:collapse;font-size:13px;background:#fff}
.table th{background:#faf9f8;text-align:left;padding:10px;font-size:11px;text-transform:uppercase;
  letter-spacing:.4px;color:var(--muted);border-bottom:1px solid var(--line)}
.table td{padding:10px;border-bottom:1px solid var(--line);vertical-align:middle}

.fab{
  position:fixed;bottom:calc(var(--nav-h) + 16px);right:calc(50% - min(50vw,var(--shell)/2) + 16px);
  width:54px;height:54px;border-radius:50%;background:var(--brand);color:var(--on-brand);font-size:26px;
  display:grid;place-items:center;box-shadow:0 8px 20px rgba(var(--brand-rgb),.4);z-index:48;
}

/* ---------- payment methods --------------------------------------------- */
.pay-logo{
  width:38px;height:38px;border-radius:9px;object-fit:contain;background:#fff;
  border:1px solid var(--line);padding:3px;flex:none;
}
.pay-logo.lg{width:52px;height:52px;border-radius:12px}

.qr-panel{
  border:1.5px solid var(--brand);border-radius:var(--r);background:var(--brand-soft);
  padding:14px;margin:4px 0 10px;
}
.qr-head{display:flex;align-items:center;gap:8px;margin-bottom:12px}

.qr-frame{
  display:block;background:#fff;border-radius:var(--r);padding:12px;
  box-shadow:var(--shadow-1);text-align:center;position:relative;
}
.qr-frame img{
  width:100%;max-width:230px;margin:0 auto;display:block;
  image-rendering:pixelated;border-radius:6px;
}
.qr-zoom{
  display:block;margin-top:8px;font-size:11px;color:var(--muted);font-weight:600;
}

.qr-account{
  display:flex;align-items:center;gap:10px;background:#fff;border-radius:var(--r);
  padding:11px 13px;margin-top:10px;box-shadow:var(--shadow-1);
}

/* admin payment rows */
.pay-row{
  display:flex;align-items:center;gap:12px;padding:13px 14px;background:#fff;
  border-bottom:1px solid var(--line);
}
.pay-row .pr-qr{
  width:44px;height:44px;border-radius:8px;object-fit:cover;border:1px solid var(--line);flex:none;
}

/* ---------- delivery area ------------------------------------------------ */
.area-status{
  display:flex;gap:9px;align-items:flex-start;margin-top:10px;
  padding:11px 13px;border-radius:var(--r);font-size:12.5px;line-height:1.55;
}
.area-status.good{background:var(--brand-soft);color:var(--brand-deep)}
.area-status.bad{background:#fdecea;color:#b3261e}
.area-status.warn{background:#fff6e5;color:#8a5a00}

.store-pin{
  width:30px;height:30px;border-radius:50%;background:var(--coffee);color:var(--on-coffee);overflow:hidden;
  display:grid;place-items:center;font-size:15px;border:2px solid #fff;
  box-shadow:0 2px 6px rgba(0,0,0,.35);
}

.btn.is-blocked{opacity:.5;filter:grayscale(.4)}

.radius-row{display:flex;align-items:center;gap:12px}
.radius-row input[type=range]{flex:1;accent-color:var(--brand)}
.radius-val{
  min-width:74px;text-align:center;font-weight:800;font-size:15px;
  background:var(--brand-soft);color:var(--brand-dark);border-radius:9px;padding:7px 8px;
}

/* ---------- store logo --------------------------------------------------- */
.intro-logo img{width:100%;height:100%;object-fit:contain;border-radius:inherit;padding:10px}
.brand-mark{
  width:36px;height:36px;border-radius:11px;background:#fff;flex:none;overflow:hidden;
  display:grid;place-items:center;font-size:19px;box-shadow:0 1px 4px rgba(0,0,0,.12);
}
.brand-mark img{width:100%;height:100%;object-fit:contain;padding:3px}
/* Leaflet resets marker images to their natural size (width:auto), which showed only the
   corner of a large logo - force the logo to fit inside the round pin */
.leaflet-container .store-pin img{width:100% !important;height:100% !important;max-width:100% !important;object-fit:contain;padding:2px !important;background:#fff;border-radius:50%}
.store-pin:has(img){background:#fff;border:2px solid var(--coffee)}   /* stays 30px so the map anchor [15,15] lands on the shop */

/* branding editor */
.swatches{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.swatch{width:30px;height:30px;border-radius:50%;border:2px solid #fff;box-shadow:0 0 0 1px var(--line);cursor:pointer}
.swatch.active{box-shadow:0 0 0 2px var(--ink)}
.color-row{display:flex;align-items:center;gap:10px}
.color-row input[type=color]{width:52px;height:42px;border:1px solid var(--line);border-radius:10px;padding:3px;background:#fff;cursor:pointer}
.logo-drop{
  width:92px;height:92px;border-radius:22px;border:1.5px dashed var(--line);background:#fafafa;
  display:grid;place-items:center;overflow:hidden;font-size:38px;flex:none;
}
.logo-drop img{width:100%;height:100%;object-fit:contain;padding:8px}

.brand-preview{border-radius:var(--r-lg);overflow:hidden;border:1px solid var(--line);background:var(--bg)}
.brand-preview .pv-top{padding:12px 14px;display:flex;align-items:center;gap:10px}
.brand-preview .pv-body{padding:12px 14px;display:flex;flex-direction:column;gap:10px}

/* ---------- member tiers ------------------------------------------------- */
.tier-badge{
  display:inline-flex;align-items:center;gap:4px;padding:3px 9px;border-radius:999px;
  font-size:10.5px;font-weight:800;letter-spacing:.3px;text-transform:uppercase;white-space:nowrap;
}
.tier-guest{background:#f1f2f4;color:#4b5563}
.tier-silver{background:#eef2f6;color:#475569}
.tier-gold{background:#fdf3d7;color:#8a6508}
.tier-diamond{background:#e0f4fd;color:#0369a1}

.mission{padding:6px 14px 2px}
.mission-track{position:relative;height:6px;border-radius:999px;background:#e5e7eb;margin:20px 13px 0}
.mission-fill{
  position:absolute;left:0;top:0;bottom:0;border-radius:999px;
  background:linear-gradient(90deg,#94a3b8 0%,#d4a017 50%,#0ea5e9 100%);
}
.mission-node{
  position:absolute;top:50%;transform:translate(-50%,-50%);width:28px;height:28px;border-radius:50%;
  background:#fff;border:2px solid #e5e7eb;display:grid;place-items:center;font-size:14px;
  filter:grayscale(1);opacity:.7;
}
.mission-node.reached{filter:none;opacity:1;border-color:currentColor}
.mission-node.current{box-shadow:0 0 0 4px rgba(var(--brand-rgb),.18)}
.mission-labels{display:flex;justify-content:space-between;margin-top:14px}
.mission-labels > div{font-size:10.5px;font-weight:800;letter-spacing:.4px;text-align:center;width:33%}
.mission-labels > div:first-child{text-align:left}
.mission-labels > div:last-child{text-align:right}
.mission-labels small{display:block;font-weight:600;color:var(--muted);letter-spacing:0;margin-top:1px}

.perk-list{display:flex;flex-direction:column;gap:6px;margin-top:8px}
.perk-list div{font-size:12px;color:var(--ink-2);display:flex;gap:7px;align-items:flex-start}
.perk-list .no{color:var(--muted);text-decoration:line-through}

/* ---------- promos & vouchers -------------------------------------------- */
.promo-card{
  background:#fff;border-radius:var(--r-lg);box-shadow:var(--shadow-1);padding:14px;
  display:flex;gap:12px;align-items:flex-start;border-left:4px solid var(--brand);margin-bottom:10px;
}
.promo-card.locked{border-left-color:#d4d6db}
.promo-value{
  flex:none;min-width:70px;text-align:center;padding:8px 6px;border-radius:12px;
  background:var(--brand-soft);color:var(--brand-deep);font-weight:800;font-size:13px;line-height:1.2;
}
.promo-card.locked .promo-value{background:#f1f2f4;color:var(--muted)}
.b-promo{background:linear-gradient(120deg,var(--brand-dark),var(--brand));color:var(--on-brand)}

.voucher-row{display:flex;gap:8px}
.voucher-row .input{text-transform:uppercase;letter-spacing:1.5px;font-family:Consolas,monospace}
.voucher-applied{
  display:flex;align-items:center;gap:10px;border:1.5px dashed var(--brand);border-radius:var(--r);
  padding:10px 12px;background:var(--brand-soft);
}
.code-text{font-family:Consolas,"Courier New",monospace;letter-spacing:1.5px;font-weight:800}

@media (min-width:520px){
  body{padding:0}
  .app{min-height:100vh}
}