@media (max-width: 600px) {
  header.top {
    display:grid !important;
    grid-template-columns:150px minmax(0,1fr) 150px !important;
    align-items:center !important;
    gap: 6px !important;
    padding: 8px 8px !important;
    position: relative !important; /* allow absolute positioning of user box */
  }
  .header-center {
    width:auto !important;
    display:inline-flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content:center !important;
    gap: 6px !important;
    align-self:center !important;
    flex-wrap:wrap !important;
  }
  .morsel-text {
    font-size: 13px !important;
    margin-left: 0 !important;
    margin-top: 2px !important;
  }
  #community {
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-top: 2px !important;
  }
  #userBox {
    position: static !important;
    justify-self:end !important;
    align-items: flex-end !important;
    min-width: 0 !important;
    margin: 0 !important;
    width: 150px !important;
    text-align: right !important;
    padding-right: 6px !important;
  }
}
  .userIconGreen { color:#16a34a; font-weight:600; }

/* Mobile-friendly login popup */
@media (max-width: 600px) {
  .login-popup, .loginSheet, #loginSheet, #loginPopup {
    position: fixed !important;
    top: 0 !important;
    
    overflow-x: hidden !important;
    overflow-y: auto !important;
    box-shadow: none !important;
    background: #fff !important;
    z-index: 9999 !important;
  }
  .login-popup, .loginSheet, #loginSheet, #loginPopup {
    border-radius: 0 !important;
    box-shadow: none !important;
  }
  body, html {
    overflow-x: hidden !important;
  }
  .login-popup input, .loginSheet input, #loginSheet input, #loginPopup input {
    font-size: 16px !important;
    padding: 12px 10px !important;
    border-radius: 10px !important;
    box-sizing: border-box !important;
    width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
  }
  .login-popup button, .loginSheet button, #loginSheet button, #loginPopup button {
    font-size: 16px !important;
    padding: 14px 0 !important;
    border-radius: 10px !important;
    width: 100% !important;
    min-width: 0 !important;
    margin-top: 12px !important;
    box-sizing: border-box !important;
  }
  .login-popup label, .loginSheet label, #loginSheet label, #loginPopup label {
    font-size: 15px !important;
    margin-bottom: 4px !important;
  }
}

    /* For the logo */
.logo {
        width: 80px; /* Adjust the logo size */
  height: auto;
  margin-right: 10px; /* Space between logo and text */
}

/* For the Morsel text */
.morsel-text {
        font-size: 28px; /* Increase font size */
  font-weight: bold; /* Make the text bold */
  color: #6adb19; /* Change color (you can use any color code) */
}

    :root{
      --bg:#ffffff;
      --card:#ffffff;
      --muted:#6b7280;
      --text:#ffffff;
      --accent:#e0d3bb;
      --accent-2:#16a34a;
      --chip:#f8fafc;
      --chip-active:#e2e8f0;
      --border:#e5e7eb;
      --shadow: 0 6px 20px rgba(0,0,0,.08);
    }
    *{box-sizing:border-box}
    body{margin:0;background:#ffffff;font-family:system-ui,-apple-system,Segoe UI,Roboto,Inter,Helvetica,Arial;color:var(--text)}
    .top{
      position:sticky;top:0;z-index:10;background:#ffffffec;
      border-bottom:1px solid var(--border);padding:14px 16px 10px
    }
    .headline{font-size:22px;font-weight:800;letter-spacing:.2px;margin:0 0 10px}
    .community{display:flex;gap:10px;align-items:center}
    .select{flex:1;appearance:none;background:var(--card);color:var(--text);border:1px solid var(--border);border-radius:14px;padding:12px 14px;font-weight:600}
  .wrap{padding:0 0 28px;max-width:100vw;margin:0}
    .chips{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:10px 0 16px}
    .chip{border:1px solid var(--border);background:var(--chip);color:var(--text);border-radius:16px;padding:14px;text-align:center;font-weight:800;cursor:pointer;user-select:none}
    .chip.active{background:var(--chip-active);border-color:#cbd5e1}
    .card{background:var(--card);border:1px solid var(--border);border-radius:18px;padding:14px}
    .label{font-size:12px;color:var(--muted);margin:4px 2px 8px}
    .field{display:flex;gap:10px}
    .input, .select2{flex:1;appearance:none;background:#ffffff;color:var(--text);border:1px solid var(--border);border-radius:14px;padding:14px;font-weight:700}
    .meals{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
    .meal{background:var(--chip);border:1px solid var(--border);border-radius:14px;padding:12px;text-align:center;font-weight:800;cursor:pointer}
    .meal.active{background:#1a2a45;border-color:#cbd5e1}
    .bottom{position:static;background:transparent;padding:12px 0 0}
    .btn{width:100%;border:0;border-radius:14px;padding:12px 14px;font-size:16px;font-weight:900;letter-spacing:.2px;color:#ffffff;background:linear-gradient(90deg,#fbbf24,#fde047);box-shadow:0 6px 22px rgba(251,191,36,.22);cursor:pointer}
    .row{display:flex;gap:10px;align-items:center}
    .grow{flex:1}

    /* Results View */
    #resultsView{position: fixed; inset:0; background:#ffffff; z-index:1200; transform:translateX(100%); transition: transform .28s ease; display:flex; flex-direction:column;}
    #resultsView.open{ transform: translateX(0%); }

    /* WebView perf: skip layout/paint for off-canvas results view only.
       ordersPane/deliveriesPane removed: position:fixed + translateX(100%)
       already hides them cheaply, and the hidden→visible switch causes
       a layout spike when opening on SOFTWARE-layer WebViews. */
    @supports (content-visibility: hidden){
      #resultsView{
        content-visibility: hidden;
        contain-intrinsic-size: 1px 900px;
      }
      #resultsView.open{
        content-visibility: visible;
      }
    }
    .rTop{ position:sticky; top:0; background:#ffffffeb; border-bottom:1px solid var(--border); padding:14px 16px; display:flex; align-items:center; gap:12px; z-index:2; }
    .rBack{ background:#ffffff; border:1px solid var(--border); color:var(--text); border-radius:12px; padding:10px 12px; font-weight:900; cursor:pointer; }
    .rTitle{ font-size:18px; font-weight:900; letter-spacing:.2px;}
    .rChips{ display:flex; gap:8px; flex-wrap:wrap; padding:10px 16px 0; }
    .rTag{ background:#f8fafc; border:1px solid var(--border); color:var(--text); border-radius:999px; padding:8px 12px; font-size:12px; font-weight:800; }
    .rList{ padding:10px 14px 100px; display:flex; flex-direction:column; gap:8px; overflow:auto; flex:1 1 auto; min-height:0; -webkit-overflow-scrolling:touch; overscroll-behavior:contain; }

    .rCard{display:grid; grid-template-columns:72px 1fr auto; gap:14px; background:#ffffff; border:1px solid var(--border); border-radius:18px; padding:14px; align-items:center; box-shadow: var(--shadow);}
    .rThumb{width:72px; height:72px; border-radius:14px; background:#f8fafc; border:1px solid var(--border); display:flex; align-items:center; justify-content:center;}
    .rThumbInner{ font-size:28px; }
    .rInfo{ min-width:0; display:flex; flex-direction:column; gap:6px;}
    .rTopRow{ display:flex; align-items:center; gap:8px; }
  /* Allow result names to wrap naturally (removed previous nowrap + ellipsis) */
  .rName{ font-weight:1000; font-size:16px; white-space:normal; overflow:visible; text-overflow:unset; }
    .rBadges{ display:flex; gap:6px; flex-wrap:wrap; }
    .pill{display:inline-flex; align-items:center; gap:6px; padding:6px 10px; border-radius:999px; font-size:12px; font-weight:900; background:#f8fafc; border:1px solid var(--border); color:var(--text);}
    .pill.primary{ background:linear-gradient(90deg,#fbbf24,#fde047); color:#ffffff; border-color:transparent;}
    .rDesc{ color:#9ca3af; font-size:13px; line-height:1.3; }
    .rMeta{ font-size:12px; color:#e5e7eb; opacity:.9; }

    .rAction{ display:flex; flex-direction:column; align-items:end; gap:10px; }
    .stepper{
      display:flex; align-items:center; gap:8px;
      background:#ffffff; border:1px solid #e5e7eb; border-radius:12px; padding:6px;
    }
    .stepper button{
      width:32px; height:32px; border-radius:10px; border:1px solid #e5e7eb; background:#f8fafc; color:var(--text);
      font-size:18px; font-weight:900; line-height:0; cursor:pointer;
    }
    .stepper input{
      width:56px; padding:8px; border-radius:10px; border:1px solid #e5e7eb; background:#f8fafc; color:var(--text); font-weight:900; text-align:center;
    }
    .rBtn{
      text-decoration:none; display:inline-block; padding:12px 14px; border-radius:12px; font-weight:1000; font-size:14px;
      background:linear-gradient(90deg,#fbbf24,#fde047); color:#ffffff; min-width:120px; text-align:center;
      box-shadow:0 8px 22px rgba(251,191,36,.2);
    }

    .empty{ text-align:center; color:#9ca3af; padding:50px 0; font-weight:700; }

    /* Highlighted Cook Name */
    .cookHighlight {
      font-size:15px;
      font-weight:900;
      color:#fbbf24;
      background:rgba(251,191,36,0.15);
      padding:4px 10px;
      border-radius:8px;
      display:inline-block;
      margin-top:2px;
    }

    /* Compact cards for Date & Meal */
    .card.compact{padding:10px}
    .card.compact .label{font-size:11px;margin-bottom:6px}
    .card.compact .meals{gap:8px}
    .card.compact .meal{padding:10px;font-size:13px;border-radius:12px}

    /* Horizontal strips */
    .strip{padding:8px 16px 6px}
    .strip.fullBleed{
      position:relative !important;
      width:100vw !important;
      max-width:100vw !important;
      left:50% !important;
      transform:translateX(-50%) !important;
      margin:0 !important;
      padding:0 !important;
    }
    .strip.fullBleed .stripRail{
      width:100% !important;
      max-width:100% !important;
      border-radius:0 !important;
      border-left:none !important;
      border-right:none !important;
    }
    .stripTitle{font-size:14px;font-weight:900;margin:0 0 8px;color:var(--accent)}
  .availableNowCorner{position:absolute;top:-10px;left:0;font-size:11px;font-weight:800;letter-spacing:.5px;color:#047857;}
    .hscroll{display:flex;gap:10px;overflow-x:auto;overflow-y:hidden;padding-bottom:8px;scroll-snap-type:x proximity}
  .hsCard{min-width:200px; scroll-snap-align:start; display:grid; grid-template-columns:56px 1fr; gap:10px; background:#ffffff; border:1px solid var(--border); border-radius:16px; padding:10px; box-shadow: var(--shadow);} /* availableNowLabel removed */
    .hsThumb{width:48px;height:48px;border-radius:10px;background:#f8fafc;border:1px solid var(--border);display:flex;align-items:center;justify-content:center;font-size:20px}
  /* Allow horizontal strip names to wrap to a second line */
  .hsName{font-weight:500;font-size:12.5px;white-space:normal;overflow:visible;text-overflow:unset;display:block}
    .hsRow{display:flex;gap:6px;flex-wrap:wrap}
  .hsPill{display:inline-flex;align-items:center;gap:4px;padding:3px 6px;border-radius:999px;font-size:9px;font-weight:800;background:#ffffff;border:1px solid #e5e7eb}
    .hsPill.primary{background:linear-gradient(90deg,#fbbf24,#fde047);color:#ffffff;border-color:transparent}
    .hsBtn{margin-top:4px;text-decoration:none;display:inline-block;padding:6px 8px;border-radius:8px;font-weight:1000;font-size:11px;
      background:linear-gradient(90deg,#fbbf24,#fde047);color:#ffffff;box-shadow:0 6px 18px rgba(251,191,36,.2)}

    /* Outline box around main search filters */
    .outlineBox{border:1px solid var(--border); border-radius:14px; padding:10px 10px 12px; margin:10px 0 14px; background:#ffffff;}

    /* Compact the outlineBox components */
    .outlineBox .chip {padding:10px;font-size:13px;border-radius:12px}
    .outlineBox .label {font-size:11px;margin-bottom:4px}
    .outlineBox .input {padding:10px;font-size:13px;border-radius:10px}
    .outlineBox .select, .outlineBox .select2 {padding:10px;font-size:13px;border-radius:10px}
    .outlineBox .meals {gap:6px}
    .outlineBox .meal {padding:8px;font-size:12px;border-radius:10px}
    .outlineBox .btn {padding:10px 12px;font-size:14px;border-radius:10px}
  
    /* Large variant for Available now */
    .hsCard.large{
      min-width: 280px;
      grid-template-columns:110px 1fr;
      gap:14px;
      padding:14px;
      border-radius:20px;
    }
    .hsThumb.large{
      width:110px;height:110px;border-radius:16px;
      font-size:44px;
      background: radial-gradient(80% 80% at 30% 20%, #dbeafe, #ffffff);
    }
  .hsName.large{ font-size:14.5px; font-weight:600; }
    .hsRow.large .hsPill{ font-size:11px; padding:6px 10px; }
    .hsBtn.large{ padding:10px 12px; font-size:12px; border-radius:10px; margin-top:6px; }

    /* Sold out card common style */
    .mk-soldout-card[aria-disabled='true']{ position:relative; }
    .mk-soldout-card[aria-disabled='true']::after{
      content:'SOLD OUT'; position:absolute; top:6px; left:6px; background:#dc2626; color:#fff; font-size:10px; font-weight:800; padding:2px 6px; border-radius:8px; letter-spacing:.5px;
    }

    /* Super compact search section */
    .outlineBox.compact-max {
      padding:8px 8px 10px;
      margin:8px 0 10px;
      border-radius:12px;
    }
    .outlineBox.compact-max .chips{ gap:6px; margin:6px 0 8px; }
    .outlineBox.compact-max .chip{ padding:8px; font-size:12px; border-radius:10px; }
    .outlineBox.compact-max .label{ font-size:10px; margin:2px 2px 4px; }
    .outlineBox.compact-max .input,
    .outlineBox.compact-max .select,
    .outlineBox.compact-max .select2{ padding:8px 10px; font-size:12px; border-radius:10px; }
    .outlineBox.compact-max .meals{ gap:6px; }
    .outlineBox.compact-max .meal{ padding:6px; font-size:11px; border-radius:9px; }
    .outlineBox.compact-max .btn{ padding:8px 10px; font-size:13px; border-radius:10px }
    .outlineBox.compact-max .card{ padding:8px }
    .outlineBox.compact-max .searchRow{ margin-top:6px }

  
    /* Image fit for Available now thumbnails */
    .hsThumb, .hsThumb.large {
      position: relative;
      overflow: hidden;
    }
    .hsThumb img, .hsThumb.large img {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
      border-radius: inherit;
      display: block;
    }
    .hsThumb .emoji, .hsThumb.large .emoji {
      position: absolute;
      inset: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      width: 100%;
      height: 100%;
    }
  /* removed legacy .mkDateActive; using .active like home screen */
      .mkFieldError { background-color: #fff7f7; }

  

  .mkToast{ position:fixed; left:50%; bottom:20px; transform:translateX(-50%) translateY(8px); opacity:0; padding:10px 14px; border-radius:999px; font-weight:900; color:#ffffff; background:#111827; box-shadow:0 10px 20px rgba(0,0,0,.25); z-index:20000; pointer-events:none; transition:opacity .2s ease, transform .2s ease; }
  .mkToast.show{ opacity:1; transform:translateX(-50%) translateY(0); }
  .mkToast.success{ background:#16a34a; }
  .mkToast.error{ background:#dc2626; }
  .mkToast.info{ background:#111827; }

  /* iOS/WKWebView: keep dialogs within viewport and allow internal scrolling */
  #mkMsgOverlay{
    position:fixed;
    inset:0;
    background: rgba(0,0,0,.45);
    display:none;
    z-index:21000;
    align-items:center;
    justify-content:center;
    padding:16px;
    /* Safe-area support for notched devices */
    padding-top: max(16px, env(safe-area-inset-top));
    padding-right: max(16px, env(safe-area-inset-right));
    padding-bottom: max(16px, env(safe-area-inset-bottom));
    padding-left: max(16px, env(safe-area-inset-left));
    overscroll-behavior: none;
    overscroll-behavior-y: none;
  }
  #mkMsgBox{
    position:relative;
    z-index:2;
    width:min(420px, 92vw);
    background:#ffffff;
    color:var(--text);
    border-radius:14px;
    border:1px solid var(--border);
    box-shadow:0 12px 30px rgba(0,0,0,.25);
    padding:16px;
    display:flex;
    flex-direction:column;
    overflow:hidden;
    /* Fallback for browsers without dvh */
    max-height: calc(100vh - 32px - env(safe-area-inset-top) - env(safe-area-inset-bottom));
  }
  @supports (height: 100dvh){
    #mkMsgBox{ max-height: calc(100dvh - 32px - env(safe-area-inset-top) - env(safe-area-inset-bottom)); }
  }
  .mkConfettiLayer{ position:absolute; inset:0; z-index:1; pointer-events:none; overflow:hidden; }
  .mkConfetti{ position:absolute; width:8px; height:8px; opacity:.95; border-radius:2px; animation: confettiFall 1.5s ease-out forwards; }
  @keyframes confettiFall{ 0%{ transform: translateY(-20px) rotate(0); opacity:.9 } 70%{ opacity:1 } 100%{ transform: translateY(60vh) rotate(280deg); opacity:0 } }
  #mkMsgTitle{ font-weight:400; font-size:16px; margin:0 0 6px; color:var(--text, #111827); flex:0 0 auto; }
  #mkMsgBody{
    font-size:14px;
    line-height:1.4;
    margin:8px 0 14px;
    font-weight:400;
    color:var(--text, #111827);
    flex:1 1 auto;
    min-height:0;
    overflow:auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
  }
  #mkMsgBody .mkDialogList{ margin:8px 0 0; padding-left:20px; }
  #mkMsgBody .mkDialogList li{ margin:4px 0; }
  #mkMsgTitle:empty{ display:none; }
  #mkMsgBody, #mkMsgBody *{ color:#111827 !important; opacity:1 !important; }
  .mkMsgNote{ background:#fffbe6; border:1px solid #fcd34d; color:#92400e; padding:8px 10px; border-radius:8px; margin-top:8px; font-size:13px; }
  .mkMsgHead{ font-size:18px; font-weight:800; color:var(--text, #111827); margin-bottom:8px; text-align:center; animation: mkPopIn .5s ease-out; }
  @keyframes mkPopIn{ 0%{ transform: scale(.95); opacity:0 } 60%{ transform: scale(1.04); opacity:1 } 100%{ transform: scale(1) } }
  #mkMsgActions{ display:flex; justify-content:flex-end; gap:10px; flex:0 0 auto; }
  #mkMsgActions button{ padding:10px 14px; border-radius:10px; border:1px solid var(--border); font-weight:600; cursor:pointer; background:#ffffff; color:var(--text); }
  #mkMsgCancel{ display:none; background:#f1f5f9; }
  /* Keep dialog text neutral: no colored/bold titles */

.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;}

:root{
  --bg:#f6f7fb;
  --surface:#ffffff; /*all colors */
  --ink:#111827;          /* High-contrast text */
  --muted:#374151;        /* Secondary text */
  --primary:#4ba86d;      /* All selection buttons */
  /* Centralize primary button color here */
  --btn-primary:#d8c197;
  --btn-on-primary:#111827;
  /* Map success to primary button color so CTAs follow the same theme */
  --success: var(--btn-primary);
  --warning:#e94949;
  --chip:#eef2f7;
  --chip-active:#e2e8f0;
  --border:#d1d5db;
  --border-strong:#9ca3af;
  --shadow-soft:0 6px 20px rgba(17,24,39,.08);
}
*, *::before, *::after{ box-sizing:border-box; }
html, body{ background:var(--bg) !important; color:var(--ink) !important; }
body{ line-height:1.35; -webkit-font-smoothing:antialiased; }
::placeholder{ color:#6b7280; opacity:1; }

/* Headings & labels */
h1,h2,h3,h4,.title{ color:var(--ink) !important; letter-spacing:.2px; }
.label, label{ color:var(--muted) !important; font-weight:700; }

/* Cards / containers */
.card, .hsCard, .rCard, .outlineBox, .sheet, .panel, .container, .box{
  background:var(--surface) !important;
  border:1px solid var(--border) !important;
  box-shadow:var(--shadow-soft) !important;
  color:var(--ink) !important;
}
/* Top bars / sticky bars */
header, .topBar, .rTop{
  background:rgba(255,255,255,.96) !important;
  backdrop-filter: blur(8px);
  border-bottom:1px solid var(--border) !important;
}
/* Results view page bg */
#resultsView{ background:var(--bg) !important; }

/* Inputs & dropdowns */
input, select, textarea, .mkInput, .mkSelect, .mkText{
  background:#f9fafb !important;
  color:var(--ink) !important;
  border:1px solid var(--border-strong) !important;
  border-radius:12px !important;
  padding:12px 14px !important;
  min-height:44px !important;
  /* iOS Safari zooms focused inputs when font-size < 16px */
  font-size:16px !important;
  outline: none !important;
}
input:focus, select:focus, textarea:focus, .mkInput:focus, .mkSelect:focus, .mkText:focus{
  border-color:var(--primary) !important;
  box-shadow:0 0 0 3px rgba(37,99,235,.15) !important;
}
/* Make selects clearly look like dropdowns */
select, .mkSelect{
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
  background-repeat: no-repeat;
  background-position: right 12px center;
  padding-right:40px !important;
}

/* Buttons */
button, .btn, .mkBtn, .mkBtnGhost, .rBack, .primary{
  font-weight:800 !important;
  border-radius:12px !important;
  min-height:44px !important;
  padding:10px 16px !important;
  border:1px solid var(--primary) !important;
  background:var(--primary) !important;
  color:#ffffff !important;
  letter-spacing:.2px;
  cursor:pointer;
}
button.ghost, .mkBtnGhost{
  background:#ffffff !important;
  color:var(--ink) !important;
  border:1px solid var(--border-strong) !important;
}
button:disabled{ opacity:.6; cursor:not-allowed; }

/* Pills / tags */
.pill{
  background:var(--chip) !important;
  border:1px solid var(--border) !important;
  color:var(--ink) !important;
  font-weight:800 !important;
}
.pill.active{ background:var(--chip-active) !important; border-color:var(--border-strong) !important; }

/* Verified badge (restore the earlier style) */
.verifiedBadge{
  display:inline-flex;
  align-items:center;
  gap:4px;
  padding:1px 7px;
  border-radius:999px;
  background:#e0f2fe;
  border:1px solid #7dd3fc;
  color:#2f9ad3;
  font-weight:900;
  font-size:10px;
  line-height:1.1;
  white-space:nowrap;
}

.verifiedBadgeOverlay{
  position:absolute;
  top:6px;
  right:6px;
  z-index:3;
  pointer-events:none;
  box-shadow:0 8px 18px rgba(2,6,23,.18);
}

/* List cards visuals */
.hsCard{
  border-radius:16px !important;
}
.hsThumb{ background:#f1f5f9 !important; border:1px solid var(--border) !important; }
.rCard{
  grid-template-columns:72px 1fr auto !important;
  border-radius:18px !important;
}
.rThumb{ background:#f1f5f9 !important; border:1px solid var(--border) !important; }

/* Sheets / popups */
#mkSheet{
  background:var(--surface) !important;
  border:1px solid var(--border) !important;
  box-shadow:0 -10px 30px rgba(17,24,39,.18) !important;
}
/* Book-now / CTA prominent */
.bookNow, .cta{
  background:var(--success) !important;
  border-color:var(--success) !important;
}

/* Improve table/text visibility */
table{ background:var(--surface) !important; }
th, td{ border-bottom:1px solid var(--border) !important; color:var(--ink) !important; }

/* Small text contrasts */
.small, .hint, .subtle{ color:#4b5563 !important; font-weight:600; }

/* Image fit */
img{ object-fit: cover; }

/* Unified tag row layout below image */
.tagRow { align-items:center; white-space:nowrap; }
.tagRow .pill { flex:0 0 auto; }

/* Cook name emphasis & compact meta tags */
.cookHighlight, .cookHighlightBig {font-weight:900; color:#fbbf24; background:rgba(251,191,36,0.15); border-radius:8px; display:inline-block;}
.cookHighlightBig {font-size:16px !important; padding:4px 12px !important; line-height:1.05;}
.cookHighlight {font-size:14px; padding:4px 10px;}
.miniPill {font-size:10px !important; padding:4px 8px !important; line-height:1.1; border-radius:999px !important;}
.miniPill.primary {font-size:10px !important;}
.miniPill.inline {display:inline-flex; align-items:center; gap:4px;}
/* Micro pill (roughly half size of original pill) */
.microPill {font-size:8px !important; padding:2px 6px !important; line-height:1.05; border-radius:999px !important; font-weight:700;}
.microPill.primary {font-size:8px !important;}

/* Ensure large touch targets on key tappables */
a.button, .chip, .pill, .filter{ min-height:36px; display:inline-flex; align-items:center; padding:6px 10px; border-radius:999px; }

/* Primary action buttons across the app */
/* Search button */
.btn{ background: var(--btn-primary) !important; color: var(--btn-on-primary) !important; border: 1px solid var(--btn-primary) !important; }
  /* Post submit + any primary-styled submit buttons */
  .mkBtnPrimary, #submitFood{ background: var(--btn-primary) !important; color: var(--btn-on-primary) !important; border: 1px solid var(--btn-primary) !important; }
/* Header login */
#loginBtn{ background: var(--btn-primary) !important; color: var(--btn-on-primary) !important; border: 1px solid var(--btn-primary) !important; }
/* Login flow */
#sendOtpBtn, #verifyOtpBtn, #loginContinue2{ background: var(--btn-primary) !important; color: var(--btn-on-primary) !important; border: 1px solid var(--btn-primary) !important; }
/* Orders/Deliveries/Post/Profile nav in the menu popup */
#navShowOrders, #navShowDeliveries, #navShowPosts, #navShowProfile, #navShowFAQ, #navShowHelp{ background: var(--btn-primary) !important; color: var(--btn-on-primary) !important; border: 1px solid var(--btn-primary) !important; }
/* Key CTAs */
.placeOrderBtn, .bookNow, .cta{ background: var(--btn-primary) !important; color: var(--btn-on-primary) !important; border: 1px solid var(--btn-primary) !important; }
/* Floating Post button */
#postFoodBtn{ background: var(--btn-primary) !important; color: var(--btn-on-primary) !important; border: 1px solid var(--btn-primary) !important; }

/*
  Global performance-safe visual flattening (all platforms).
  Purpose: approximate Android WebView-friendly rendering on localhost/prod
  without changing layout or interaction logic.
*/

/* Disable expensive backdrop blur surfaces */
header, .topBar, .rTop, #ordersTop,
#ordersPane header, #deliveriesPane header, #postsPane header,
#profilePane header, #faqPane header, #helpPane header {
  backdrop-filter: none !important;
}

/* Flatten heavy shadows on frequently repainted elements */
.card, .hsCard, .rCard, .orderCard, .deliveryCard, .groupCard,
.outlineBox, .sheet, .panel, .container, .box,
#mkSheet, #postFoodBtn, .fab,
.btn, .hsBtn, .placeOrderBtn, .mkBtnPrimary,
.verifiedBadgeOverlay {
  box-shadow: none !important;
}

/* Keep rails visually clear but cheaper to paint */
.stripRail,
.stripRail-current,
.stripRail-next,
.stripRail-mart {
  background: var(--surface) !important;
}
.stripRail::after,
.stripRail-next::after,
.stripRail-mart::after {
  background: none !important;
  transition: none !important;
}

/* Remove expensive blur filter in login hero backdrop */
#loginHeroBackdrop {
  filter: none !important;
  transform: none !important;
}

/* Fast transitions on large panels/sheets (avoids layout spike feel) */
#resultsView,
#mkSheet,
#ordersPane,
#deliveriesPane {
  transition: transform .15s ease-out !important;
}
.panel,
.heroSlide {
  transition: none !important;
}

/* Make category chips and the active "Fresh Meal" chip very clear */
.chips .chip{
  background: var(--chip) !important;
  border: 1px solid var(--border-strong) !important;
  color: var(--ink) !important;
  font-weight: 900 !important;
  padding: 8px 12px !important;
  border-radius: 999px !important;
  min-height: 36px !important;
}
.chips .chip.active{
  background: var(--primary) !important;
  border-color: var(--primary) !important;
  color: #ffffff !important;
}

/* General pill/tag visibility */
.pill, .tag, .badge{
  background: #eef2f7 !important;
  border: 1px solid var(--border-strong) !important;
  color: var(--ink) !important;
  font-weight: 900 !important;
  border-radius: 999px !important;
  padding: 6px 10px !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
}

/* Specific accents if classes exist */
.pill.today, .tag.today, .todayTag{
  background: var(--success) !important;
  border-color: var(--success) !important;
  color: #ffffff !important;
}
/* Date quick selectors (neutral by default; turn green via .active rule below) */
#dateTodayHint, #dateTomorrowHint{
  background:#f8fafc !important;
  border-color:#e5e7eb !important;
  color:#000 !important; /* Unselected text now black */
}
.pill.location, .tag.location, .locationTag{
  background: var(--warning) !important;
  border-color: var(--warning) !important;
  color: #111827 !important;
}

/* "Available now" strip title */
.stripTitle{
  background: transparent !important;
  color: #047857 !important;
  border-radius: 0 !important;
  padding: 0 !important;
  border: none !important;
  display: inline-block !important;
  font-weight: 900 !important;
  letter-spacing: .2px !important;
}

/* Search result tag containers */
.resultTags, .tags{
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
}

/* Ensure any inline styles don't wash out text */
[id="dateTodayHint"]{
  background: var(--success) !important;
  color: #ffffff !important;
  border: 1px solid var(--success) !important;
}

/* Safety: any element with very low contrast text */
.low-contrast, [style*="color:#e5e7eb"]{
  color: var(--ink) !important;
}

/* Search result tags container */
.searchResultTags, .result-tags, .resultTags, .tags, .metaTags{
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 6px !important;
}

/* All tags in search results */
.searchResultTags .tag, .result-tags .tag, .resultTags .tag, .tags .tag, .metaTags .tag,
.searchResultTags .pill, .result-tags .pill, .resultTags .pill, .tags .pill, .metaTags .pill{
  font-size: 12px !important;
  font-weight: 800 !important;
  padding: 4px 8px !important;
  border-radius: 999px !important;
  border: 1px solid var(--border-strong) !important;
  background: var(--chip) !important;
  color: var(--ink) !important;
}

/* Specific high-contrast for key categories */
.tag.today, .pill.today{
  background: var(--success) !important;
  border-color: var(--success) !important;
  color: #ffffff !important;
}
.tag.dinner, .pill.dinner{
  background: #f97316 !important; /* orange for dinner */
  border-color: #f97316 !important;
  color: #ffffff !important;
}
/* Deprecated: cooked-food chip styles removed (no-op placeholder to preserve layout) */
/* .tag.cookedFood, .pill.cookedFood { background: var(--primary) !important; border-color: var(--primary) !important; color:#fff !important; } */
.tag.community, .pill.community, .tag.location, .pill.location{
  background: var(--warning) !important;
  border-color: var(--warning) !important;
  color: #111827 !important;
}

/* Base tag for results chips at the top */
.rChips .rTag{
  background:#eef2f7 !important;
  border:1px solid var(--border-strong) !important;
  color:var(--ink) !important;
  font-weight:900 !important;
  border-radius:999px !important;
  padding:8px 12px !important;
}

/* Inside each result card */
.rBadges .pill, .rBadges .rTag, .rBadges .badge{
  background:#eef2f7 !important;
  border:1px solid var(--border-strong) !important;
  color:var(--ink) !important;
  font-weight:900 !important;
  border-radius:999px !important;
  padding:6px 10px !important;
  line-height:1.1 !important;
}

/* Explicit accent mapping */
.rTag.today, .pill.today, .badge.today{
  background:var(--success) !important;
  border-color:var(--success) !important;
  color:#ffffff !important;
}
.rTag.dinner, .pill.dinner, .badge.dinner{
  background:#111827 !important;
  border-color:#111827 !important;
  color:#ffffff !important;
}
.rTag[data-type='Fresh Meal']{
  background:var(--primary) !important;
  border-color:var(--primary) !important;
  color:#ffffff !important;
}
/* Community tag (e.g., L&T) */
.rTag.community, .pill.community, .badge.community{
  background:var(--warning) !important;
  border-color:var(--warning) !important;
  color:#111827 !important;
}

/* Fallback if tags are plain text with inline styles—force visibility */
.rTag, .pill, .badge{
  font-size:12px !important;
}

/* Make sure stepper/input text in cards is visible too */
.rAction input[type="number"]{
  background:#ffffff !important;
  color:var(--ink) !important;
  border:1px solid var(--border-strong) !important;
}

/* Meal type grid: align with screen, responsive */
#mealGroup.meals{
  display: grid !important;
  grid-template-columns: repeat(2, 1fr) !important;
  gap: 10px !important;
  width: 100% !important;
}
@media (min-width: 480px){
  #mealGroup.meals{ grid-template-columns: repeat(4, 1fr) !important; }
}
#mealGroup .meal{
  text-align: center !important;
  border: 1px solid var(--border-strong) !important;
  background: #f9fafb !important;
  color: var(--ink) !important;
  padding: 10px 12px !important;
  border-radius: 12px !important;
  font-weight: 900 !important;
  min-height: 44px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  user-select: none !important;
}
#mealGroup .meal.active{
  background: var(--primary) !important;
  border-color: var(--primary) !important;
  color: #ffffff !important;
}

/* Reduce header spacing */
header.top, header, .topBar{
  padding: 10px 14px !important;
}
.headline{ font-size: 18px !important; margin: 0 0 6px !important; }
.community{ margin: 4px 0 0 !important; }

/* Compact outline search box */
.outlineBox{
  margin: 8px 0 10px !important;
  padding: 8px 8px 10px !important;
  border-radius: 12px !important;
}
.outlineBox.compact-max{ padding: 8px !important; }

/* Chips row (Fresh Meal/Raw) smaller */
.chips{ gap: 6px !important; margin-bottom: 8px !important; }
.chips .chip{ padding: 6px 10px !important; min-height: 32px !important; font-size: 12px !important; border-radius: 999px !important; }

/* Cards inside outline box tighter */
.outlineBox .card.compact{
  margin-bottom: 8px !important;
  padding: 8px !important;
  border-radius: 10px !important;
}
.outlineBox .label{
  font-size: 12px !important;
  margin-bottom: 4px !important;
}

/* Inputs/selects smaller height */
.input, .select, input[type="date"], input[type="text"], select{
  min-height: 38px !important;
  font-size: 14px !important;
  padding: 8px 10px !important;
}

/* Date "Today" hint smaller */
#dateTodayHint, #dateTomorrowHint{ font-size: 11px !important; padding: 2px 8px !important; cursor:pointer; }
#dateTodayHint.active, #dateTomorrowHint.active{ background:#0a7d32 !important; color:#fff !important; border-color:#0a7d32 !important; }
/* Apply same style to Post Food pills */
#pfToday, #pfTomorrow{ font-size: 11px !important; padding: 2px 8px !important; line-height: 1.1 !important; min-height: 24px !important; cursor:pointer; background:#f8fafc !important; border:1px solid #e5e7eb !important; color:#000 !important; border-radius:999px !important; font-weight:900 !important; }
#pfToday.active, #pfTomorrow.active{ background:#0a7d32 !important; color:#fff !important; border-color:#0a7d32 !important; }

/* Meal grid more compact */
#mealGroup.meals{ gap: 8px !important; }
#mealGroup .meal{
  min-height: 38px !important;
  padding: 8px 10px !important;
  font-size: 13px !important;
}

/* Search button smaller and within box */
#searchBtn{
  min-height: 40px !important;
  font-size: 14px !important;
  padding: 8px 12px !important;
  border-radius: 10px !important;
}

/* Reduce vertical spacing around sections below search */
section{ margin: 8px 0 !important; }
.stripTitle{ font-size: 11px !important; padding: 3px 8px !important; }

/* Make Available Now strip chip cards slightly smaller */
.hsCard{ min-width: 180px !important; padding: 8px !important; border-radius: 12px !important; }
.hsThumb{ width: 42px !important; height: 42px !important; }

/* Ensure the first screen uses space efficiently */
main{ padding-bottom: 56px !important; } /* keep room for any sticky elements */

  /* Make the primary search outlineBox stretch edge-to-edge */
  .outlineBox.edgeToEdge, .outlineBox[data-home-search] {
    width:100vw !important;
    margin-left:calc(50% - 50vw) !important;
    margin-right:calc(50% - 50vw) !important;
    margin-top:0 !important;
    border-left:0 !important;
    border-right:0 !important;
    border-radius:0 !important;
    padding-left:16px !important;
    padding-right:16px !important;
    box-sizing:border-box !important;
  }
  /* Remove side padding/margins for insights section */
  #appInsights { margin:0 0 40px !important; padding:0 !important; }
  #appInsights .insightCard { border-radius:0 !important; margin:0 !important; }
  #appInsights .insightCard.edgeToEdgeInsights {
    width:100vw !important;
    margin-left:calc(50% - 50vw) !important;
    margin-right:calc(50% - 50vw) !important;
    border-left:0 !important;
    border-right:0 !important;
    border-radius:0 !important;
    padding-left:18px !important;
    padding-right:18px !important;
    box-sizing:border-box !important;
  }
  @media (max-width:640px){
    #appInsights .insightCard.edgeToEdgeInsights { padding-left:14px !important; padding-right:14px !important; }
    .outlineBox.edgeToEdge, .outlineBox[data-home-search]{ padding-left:12px !important; padding-right:12px !important; }
  }

#mealGroup.meals{
  display: flex !important;
  flex-wrap: nowrap !important;
  gap: 6px !important;
  overflow-x: auto !important;
  padding-bottom: 4px !important;
  -webkit-overflow-scrolling: touch !important;
}
#mealGroup .meal{
  flex: 0 0 auto !important;
  font-size: 12px !important;
  min-height: 30px !important;
  padding: 4px 8px !important;
  border-radius: 999px !important;
  background: #f3f4f6 !important;
  border: 1px solid var(--border-strong) !important;
  font-weight: 700 !important;
  color: var(--ink) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  white-space: nowrap !important;
}
#mealGroup .meal.active{
  background: var(--primary) !important;
  border-color: var(--primary) !important;
  color: #ffffff !important;
}

/* Ensure horizontal scroll area has consistent card alignment */
#nowStrip.hscroll:not(.stripRail){
  display: flex !important;
  gap: 10px !important;
  padding: 6px 0 !important;
  overflow-x: auto !important;
  -webkit-overflow-scrolling: touch !important;
}

.stripRail{
  position: relative !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  gap: 6px !important;
  padding: 8px 12px 8px !important;
  border-radius: 18px !important;
  border: 1px solid #e0f2f1 !important;
  background: #ffffff !important;
  box-shadow: none !important;
  overflow: hidden !important;
}
.stripRail::after{
  content: '' !important;
  position: absolute !important;
  top: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  width: 48px !important;
  pointer-events: none !important;
  background: linear-gradient(270deg, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 100%) !important;
  border-radius: inherit !important;
  opacity: 0;
  transition: opacity .18s ease !important;
}
.stripRail.scrollCue-visible::after{ opacity: 1 !important; }
.stripRail-current{
  background: #ffffff !important;
  border-color: #e0f2f1 !important;
  box-shadow: none !important;
}
.stripRail-next{
  /* Solid color replaces 3-stop gradient — cheaper paint on WebView */
  background: #f0fdf4 !important;
  border-color: #86efac !important;
  box-shadow: none !important;
}
.stripRail-next::after{
  background: linear-gradient(270deg, #f0fdf4 100%, transparent 100%) !important;
}
.stripRail-mart{
  /* Solid color replaces 3-stop gradient — cheaper paint on WebView */
  background: #f9fafb !important;
  border-color: #cbd5e1 !important;
  box-shadow: none !important;
}
.stripRail-mart::after{
  background: linear-gradient(270deg, #f9fafb 100%, transparent 100%) !important;
}
.stripRail-empty::after{ opacity: 0 !important; }

.stripRailHeading{
  font-size: 11px !important;
  font-weight: 750 !important;
  letter-spacing: .45px !important;
  text-transform: uppercase !important;
  color: #047857 !important;
  padding-left: 0 !important;
  position: relative !important;
  z-index: 1 !important;
}
.stripRailHeading-current{ color: #047857 !important; }
.stripRailHeading-next{ color: #0f766e !important; }
.stripRailHeading-mart{ color: #1f2937 !important; }

.stripRailTrack{
  display: flex !important;
  flex-direction: row !important;
  gap: 6px !important;
  /* Default: avoid becoming a nested horizontal scroller when there's no real overflow.
     WebView can hesitate on vertical scroll if touch starts inside overflow-x:auto elements. */
  overflow-x: hidden !important;
  overflow-y: hidden !important;
  padding-bottom: 2px !important;
  -webkit-overflow-scrolling: touch !important;
  scroll-snap-type: none !important;
  scroll-behavior: auto !important;
  touch-action: pan-y !important;
  position: relative !important;
  z-index: 1 !important;
  /* Containment hint — avoids child changes triggering parent relayout */
  contain: layout style !important;
}
.stripRailTrack.mkHasHScroll{
  overflow-x: auto !important;
  touch-action: pan-x pan-y !important;
}
.stripRailTrack-martPages{
  gap: 10px !important;
  align-items: stretch !important;
}
.stripRailTrack-martPages.mkHasHScroll{
  overflow-x: auto !important;
  touch-action: pan-x pan-y !important;
}
.stripRail-empty .stripRailTrack{
  justify-content: center !important;
  padding: 4px 0 !important;
}
.stripRail-empty .stripRailTrack .empty{
  margin: 0 !important;
}
.stripRail-empty{
  gap: 2px !important;
  padding-top: 6px !important;
  padding-bottom: 6px !important;
}

.stripRailMartPage{
  flex: 0 0 auto !important;
  width: max-content !important;
  min-width: max-content !important;
  display: grid !important;
  grid-template-rows: repeat(2, minmax(0, auto)) !important;
  gap: 8px !important;
  align-items: start !important;
}

.stripRail-mart.stripRail-mart-expanded .stripCard,
.stripRail-mart.stripRail-mart-expanded .stripCard-martGrid{
  min-width: 148px !important;
  max-width: 160px !important;
  width: 154px !important;
  flex: 0 0 auto !important;
}

.stripRail .stripCard{
  scroll-snap-align: start !important;
  /* normal (not always) — lets momentum scroll fly past cards on Android WebView */
  scroll-snap-stop: normal !important;
}
.stripCard{
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}
.stripRail-next .stripCard,
.stripRail-mart .stripCard{
  border: 0 !important;
  box-shadow: none !important;
}

/* Base card style */
.hsCard{
  flex: 0 0 auto !important;
  display: grid !important;
  grid-template-columns: 56px 1fr !important;
  gap: 8px !important;
  align-items: center !important;
  background: var(--surface) !important;
  border: 1px solid var(--border) !important;
  border-radius: 14px !important;
  padding: 8px !important;
  box-shadow: var(--shadow-soft) !important;
  /* Width tuned so first view shows ~1.5 cards on small screens */
  flex: 0 0 230px !important;
  width: 230px !important;
  min-width: 220px !important;
  max-width: 230px !important;
}

@media (min-width:480px){
  #nowStrip .hsCard{ flex:0 0 210px !important; width:210px !important; min-width:200px !important; max-width:210px !important; }
}
@media (min-width:640px){
  #nowStrip .hsCard{ flex:0 0 190px !important; width:190px !important; min-width:180px !important; max-width:190px !important; }
}

/* Thumbnail image */
.hsThumb{
  width: 56px !important;
  height: 56px !important;
  border-radius: 10px !important;
  background: #f1f5f9 !important;
  border: 1px solid var(--border) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 20px !important;
  overflow: hidden !important;
}
.hsThumb img{
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
}

/* Card text content */
.hsInfo{
  display: flex !important;
  flex-direction: column !important;
  gap: 4px !important;
}
.hsName{
  font-size: 12.5px !important;
  font-weight: 500 !important;
  color: var(--ink) !important;
}
.hsMeta{
  font-size: 11px !important;
  color: var(--muted) !important;
}

/* Search results list padding reduced */
.rList{
  padding: 8px 10px 80px !important;
  gap: 10px !important;
}

/* Compact result card layout */
.rCard{
  display: grid !important;
  grid-template-columns: 64px 1fr auto !important;
  gap: 6px !important;
  align-items: start !important;
  padding: 6px !important;
  border-radius: 12px !important;
  background: var(--surface) !important;
  border: 1px solid var(--border) !important;
  box-shadow: var(--shadow-soft) !important;
}

/* Thumbnail smaller but still visible */
.rThumb{
  width: 64px !important;
  height: 64px !important;
  border-radius: 8px !important;
  background: #f1f5f9 !important;
  border: 1px solid var(--border) !important;
  overflow: hidden !important;
}
.rThumb img{
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
}

/* Info section tighter */
.rInfo{
  display: flex !important;
  flex-direction: column !important;
  gap: 4px !important;
}
.rName{
  font-size: 14px !important;
  font-weight: 700 !important;
  line-height: 1.2 !important;
  color: var(--ink) !important;
  white-space: normal !important;
  overflow: visible !important;
  text-overflow: unset !important;
}
.cookHighlight{
  font-size: 12px !important;
  color: var(--muted) !important;
}

/* Badges closer together */
.rBadges{
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 4px !important;
}
.rBadges .pill{
  font-size: 11px !important;
  padding: 3px 8px !important;
}
/* Explicit micro pill override (placed after other pill rules for priority) */
.pill.microPill, .rBadges .pill.microPill, .hsCard .pill.microPill {
  font-size:8px !important;
  padding:2px 6px !important;
  line-height:1.05 !important;
  font-weight:700 !important;
}

/* Description trimmed to 2 lines */
/* Allow full description expansion (no ellipsis clamp). If re-clamping desired, reintroduce line clamp. */
.rDesc{
  font-size: 14px !important;
  line-height: 1.4 !important;
  overflow: visible !important;
  text-overflow: unset !important;
  display: block !important;
  max-height: none !important;
  -webkit-line-clamp: unset !important;
  line-clamp: unset !important;
}

/* Right-side actions compact */
.rAction{
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-end !important;
  gap: 6px !important;
}
.stepper{
  display: flex !important;
  align-items: center !important;
  gap: 2px !important;
}
.stepper button{
  min-width: 22px !important;
  min-height: 22px !important;
  font-size: 14px !important;
  padding: 0 !important;
}
.stepper input{
  width: 32px !important;
  height: 22px !important;
  font-size: 12px !important;
  text-align: center !important;
}

/* --- FIX: Ensure order quantity (stepper) is clearly visible above Book Now --- */
.rAction{
  display:flex !important;
  flex-direction:column !important;
  align-items:flex-end !important;
  gap:8px !important;
}
.rAction .qtyLabel{
  font-size:11px !important;
  font-weight:900 !important;
  color: var(--muted) !important;
  margin:0 2px !important;
}
.stepper{
  display:flex !important;
  align-items:center !important;
  gap:6px !important;
  background:#ffffff !important;
  border:1px solid var(--border-strong) !important;
  border-radius:12px !important;
  padding:6px !important;
}
.stepper button{
  width:28px !important;
  height:28px !important;
  min-width:28px !important;
  min-height:28px !important;
  border-radius:10px !important;
  border:1px solid var(--border-strong) !important;
  background:#f3f4f6 !important;
  color: var(--ink) !important;
  font-size:18px !important;
  font-weight:900 !important;
  line-height:0 !important;
  cursor:pointer !important;
}
.stepper input{
  width:44px !important;
  height:28px !important;
  min-width:44px !important;
  text-align:center !important;
  font-weight:900 !important;
  border-radius:10px !important;
  border:1px solid var(--border-strong) !important;
  background:#ffffff !important;
  color: var(--ink) !important;
  padding:4px !important;
}
/* Avoid clipping in small cards */
.rCard{ overflow: visible !important; }


@media (max-width: 440px){
  .rCard{ grid-template-columns:1fr min(41vw,198px) !important; grid-auto-rows:auto !important; }
  .rCard .rImg{ grid-column:2; grid-row:1; width:min(41vw,198px) !important; height:min(41vw,198px) !important; justify-self:end !important; }
  .rCard .rInfo{ grid-column:1; grid-row:1; }
  .rCard .mkRow2Split{ grid-column:1 / span 2; grid-row:2; display:grid; grid-template-columns:1fr auto; column-gap:8px; align-items:start; }
  .rCard .orderRow{ justify-self:end !important; align-items:flex-end !important; }
  .rCard .rDesc{ grid-column:1; grid-row:1; }
  .rCard .mkRow3Split{ grid-column:1 / span 2; grid-row:3; display:grid; grid-template-columns:1fr; column-gap:0; align-items:stretch; }
  .rCard .mkOrderActions{ grid-column:1 / span 2; justify-self:end !important; align-self:center !important; width:auto !important; margin-top:0 !important; }
  .rCard .orderPricing{ min-width:0 !important; width:100% !important; }
  .rCard .placeOrderBtn{ height:24px !important; min-height:24px !important; padding:0 12px !important; margin-top:0 !important; }
  .rCard input.qtyInput{ width:40px !important; }
  .rDesc{ word-break:break-word !important; overflow-wrap:anywhere !important; }
}
@media (max-width: 340px){
  .rCard{ grid-template-columns:1fr min(43vw,171px) !important; }
  .rCard .rImg{ width:min(43vw,171px) !important; height:min(43vw,171px) !important; }
  .rCard .placeOrderBtn{ font-size:10px !important; padding:0 10px !important; }
  .rCard .qtyInput{ font-size:12px !important; }
}

.groupCard{ border:1px solid #e5e7eb; border-radius:16px; background:#fff; box-shadow:0 6px 18px rgba(17,24,39,.06); overflow:hidden; }
.groupHead{ display:flex; align-items:center; justify-content:space-between; gap:8px; padding:12px 14px; background:#f8fafc; border-bottom:1px solid #e5e7eb; }
.groupTitle{ font-weight:900; font-size:14px; }
.groupTags{ display:flex; flex-wrap:wrap; gap:8px; }
.groupBody{ padding:10px 14px; display:flex; flex-direction:column; gap:8px; }
.childRow{ display:flex; flex-wrap:wrap; gap:8px; align-items:center; }

.statusWrap{ display:flex; align-items:center; gap:8px; }
.statusPill{ display:inline-flex; align-items:center; gap:6px; padding:4px 10px; border-radius:999px; font-weight:800; font-size:11px; border:1px solid #e5e7eb; background:#f8fafc; }
.status-select{ border:1px solid #e5e7eb; border-radius:10px; padding:6px 10px; font-weight:800; }
.status-ordered{ background:#eef2ff; border-color:#c7d2fe; }
.status-prep{ background:#ecfeff; border-color:#a5f3fc; }
.status-out{ background:#fef3c7; border-color:#fde68a; }

.mealTabs{ display:flex; gap:8px; align-items:center; padding:8px 16px; border-bottom:1px solid #e5e7eb; background:rgba(255,255,255,.96); position:sticky; top:48px; z-index:2; }
.tabBtn{ border:1px solid #e5e7eb; background:#f8fafc; padding:6px 12px; border-radius:999px; font-weight:900; font-size:12px; cursor:pointer; }
.tabBtn.active{ background:#f59e0b; border-color:#f59e0b; color:#fff; }
.sectionHead{ padding:10px 16px 6px; font-weight:900; font-size:13px; color:#374151; }
.hide{ display:none !important; }

.askBtn{
  border:1px solid #10b981;
  background:#10b981;
  color:#fff;
  padding:6px 10px;
  border-radius:10px;
  font-weight:900;
  font-size:12px;
}
.askBtn:disabled{
  opacity:.5;
  cursor:not-allowed;
}

.askBtn{
  border:1px solid #10b981;
  background:#10b981;
  color:#fff;
  padding:6px 10px;
  border-radius:10px;
  font-weight:900;
  font-size:12px;
  margin-left:8px;
}
.askBtn:disabled{
  opacity:.5;
  cursor:not-allowed;
}

#ordersList {
  max-height: 60vh;
  overflow-y: auto;
}
#ordersList::-webkit-scrollbar {
  width: 8px;
}
#ordersList::-webkit-scrollbar-track {
  background: #f1f1f1;
}
#ordersList::-webkit-scrollbar-thumb {
  background: #888;
  border-radius: 4px;
}
#ordersList::-webkit-scrollbar-thumb:hover {
  background: #555;
}

/* Search results overlay scrollbar (best-effort: some WebViews still hide overlay scrollbars) */
#resultsList::-webkit-scrollbar {
  width: 8px;
}
#resultsList::-webkit-scrollbar-track {
  background: #f1f1f1;
}
#resultsList::-webkit-scrollbar-thumb {
  background: #888;
  border-radius: 4px;
}
#resultsList::-webkit-scrollbar-thumb:hover {
  background: #555;
}

  .diet-icons{display:flex;gap:8px;align-items:center;margin-top:4px;flex-wrap:wrap}
  .diet-icon{width:18px;height:18px;display:inline-flex;align-items:center;justify-content:center}
  .diet-icon svg{width:18px;height:18px}
  .diet-icon[title]{cursor:default}

  /* iOS Safari zooms focused inputs when font-size < 16px. */
  @supports (-webkit-touch-callout: none) {
    /* Include both raw elements and our app's form classes (.mkInput/.mkSelect/.mkText)
       because some inputs use class selectors that otherwise override type selectors. */
    input, select, textarea, .mkInput, .mkSelect, .mkText {
      font-size: 16px !important;
    }
  }

@keyframes mkSteamRise{0%{transform:translateY(4px);opacity:.35}50%{transform:translateY(-3px);opacity:1}100%{transform:translateY(4px);opacity:.18}}
@keyframes mkPlateTravel{0%{transform:translateX(0) scale(1)}42%{transform:translateX(160%) scale(1.02)}62%{transform:translateX(300%) scale(1.02)}100%{transform:translateX(0) scale(1)}}
@keyframes mkLidLift{0%{transform:translateY(0)}35%{transform:translateY(-6px)}55%{transform:translateY(-6px)}100%{transform:translateY(0)}}
@keyframes mkBootMiniSpin{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}

/* Make login fields 2-column on wider phones; keep Community full width */
@media (min-width: 520px){
  #loginOverlay #loginStep1.loginGrid{ grid-template-columns: 1fr 1fr !important; }
  #loginOverlay #loginStep2.loginGrid{ grid-template-columns: 1fr 1fr !important; }
  /* Ensure community row spans full width */
  #loginOverlay #loginStep2 .fg.full{ grid-column: 1 / -1 !important; }
}
/* Reduce hero height progressively on short screens so entire form is visible */
@media (max-height: 740px){ #loginHero{ height: 48vh !important; } }
@media (max-height: 640px){ #loginHero{ height: 42vh !important; } }
@media (max-height: 560px){ #loginHero{ height: 36vh !important; } }
@media (max-height: 500px){ #loginHero{ height: 32vh !important; } }

/* Default: hide Step 2 and Continue */
#loginOverlay #loginStep2{ display:none !important; }
#loginOverlay #loginContinue2{ display:none !important; }
/* Prevent scroll chaining to the underlying page (iOS Safari can scroll body behind fixed overlays) */
#loginOverlay{ overscroll-behavior: none; overscroll-behavior-y: none; }
#loginOverlay #loginFormWrap{ -webkit-overflow-scrolling: touch; }
/* Show Step 2 (inputs + Continue) when overlay has .step2-active */
#loginOverlay.step2-active #loginStep2{ display:grid !important; }
#loginOverlay.step2-active #loginContinue2{ display:block !important; }
/* Show only Continue when overlay has .continue-only */
#loginOverlay.continue-only #loginStep2{ display:none !important; }
#loginOverlay.continue-only #loginContinue2{ display:block !important; }
/* Two-screen flow: in .screen2, keep hero visible; swap Step 2 in place of Step 1 */
#loginOverlay.screen2 #loginStep1{ display:none !important; }
#loginOverlay.screen2 #loginStep2{ display:grid !important; }
#loginOverlay.screen2 #loginContinue2{ display:block !important; }
#loginOverlay.screen2 #loginFormWrap{ overflow:auto !important; justify-content:flex-start !important; }

#otpBoxGrid{display:flex;justify-content:center;gap:10px;margin:0 0 8px;}
#otpBoxGrid input[data-otp-slot]{width:46px;height:48px;text-align:center;font-size:18px;font-weight:800;border:1px solid #cbd5e1;border-radius:12px;background:#ffffff;transition:border-color .2s ease, box-shadow .2s ease;}
#otpBoxGrid input[data-otp-slot]:focus{border-color:#0f766e;box-shadow:0 0 0 2px rgba(15,118,110,0.15);outline:none;}
#otpBoxGrid input[data-otp-slot]::selection{background:rgba(15,118,110,0.15);}
@media (max-width: 360px){#otpBoxGrid{gap:8px;}#otpBoxGrid input[data-otp-slot]{width:42px;height:44px;font-size:17px;}}
#loginPhone.otp-lock{background:#f3f4f6 !important;color:#4b5563 !important;cursor:not-allowed;pointer-events:none;}

/* reCAPTCHA container: keep DOM empty for Firebase, but show a placeholder when empty */
#recaptcha-container{margin-top:4px;min-height:78px;}
#recaptcha-container:empty{border:1px dashed #cbd5e1;border-radius:10px;padding:10px;display:flex;align-items:center;justify-content:center;}
#recaptcha-container:empty::before{content:"reCAPTCHA will appear here";font-size:12px;color:#64748b;font-weight:700;}

  /* Minimal circular avatar used in header */
  .mkUserAvatar {
    --mk-size:44px;
    width:var(--mk-size); height:var(--mk-size); border-radius:50%;
    position:relative; isolation:isolate;
    background:radial-gradient(circle at 30% 30%,#6ee7b7 0%,#10b981 38%,#059669 62%,#047857 100%);
    display:inline-flex; align-items:center; justify-content:center;
    font-size:20px; font-weight:800; letter-spacing:.5px; color:#fff;
    font-family:system-ui,-apple-system,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;
    box-shadow:0 0 0 1px rgba(0,0,0,.10); /* flattened: remove depth shadows */
    text-shadow:none;
    transition:filter .25s ease;
    overflow:hidden;
  }
  .mkUserAvatar::after { /* subtle gloss */
    content:""; position:absolute; inset:0; border-radius:inherit;
    background:linear-gradient(150deg,rgba(255,255,255,.22) 0%,rgba(255,255,255,.06) 42%,rgba(255,255,255,0) 65%);
    opacity:.55; pointer-events:none; /* simpler, flatter sheen */
  }
  .mkUserAvatar::before { /* thin inner ring */
    content:""; position:absolute; inset:2px; border-radius:50%;
    background:linear-gradient(160deg,rgba(255,255,255,.35),rgba(255,255,255,.05));
    opacity:.18; pointer-events:none;
  }
  #loggedInUser:hover .mkUserAvatar { filter:brightness(1.08) saturate(1.05); }
  #loggedInUser:active .mkUserAvatar { filter:brightness(.96); }

    #appInsights .insightCard{position:relative;border:1px solid #e2e8f0;border-radius:16px;background:#ffffff;padding:18px 18px 20px 30px;box-shadow:0 6px 18px rgba(17,24,39,.06);--accent:#16a34a;}
    /* Remove left accent bar */
    #appInsights .insightCard::before{content:none;}
    #appInsights .insightTitle{font-size:19px;font-weight:900;color:#f59e0b;margin:0 0 10px;} 
    #appInsights .insightSectionTitle{font-size:19px;font-weight:900;color:#4ade80;margin:18px 0 10px;text-align:center;} 
    #appInsights .insightText{font-size:16px;font-weight:600;color:#475569;line-height:1.6;margin:0;} 
    #appInsights .insightList{display:flex;flex-direction:column;gap:8px;} 
    #appInsights .insightList > div > strong:first-child{color:#f59e0b;} 
    #appInsights .insightCard figure{margin:0;border-radius:12px;overflow:hidden;background:#ffffff;} 
    #appInsights .insightCard img{display:block;width:100%;border-radius:12px;} 
    #appInsights .insightCard img.chef-banner{height:148px;object-fit:contain;background:#ffffff;margin-bottom:14px;} 
    #appInsights .insightCard img.step-banner{height:140px;object-fit:contain;background:#ffffff;margin:10px 0 6px;} 
    /* Per-step sizing overrides */
    #appInsights .insightCard img.post-banner{width:35% !important;height:auto !important;display:block;margin:10px auto 6px;} 
    #appInsights .insightCard img.edit-posts-banner{width:60% !important;height:auto !important;display:block;margin:10px auto 6px;} 
    #appInsights .insightCard img.delivery-banner{width:55% !important;max-width:none !important;height:auto !important;display:block;margin:10px auto 6px;position:relative;left:50%;transform:translateX(-50%);} 
    #appInsights .insightCard img.payment-banner{width:68% !important;height:auto !important;display:block;margin:12px auto 6px;} 
    #appInsights .insightCard img.gift-banner{height:120px;object-fit:cover;margin:18px 0 14px;} 
    #appInsights .insightCard:active{transform:none;} 
    #appInsights .insightCard.pulse{animation:none;} 
    #appInsights .insightCard.pulse::before{animation:none;} 
    /* Disable pulse animations */
    @keyframes insightPulse{0%{}} 
    @keyframes barPulse{0%{}} 
  

  /* Base: enforce full circle + black background */
  #postFoodBtn{
    width:60px !important; height:60px !important; border-radius:50% !important;
    background:#000000 !important; background-color:#000000 !important;
    padding:0 !important; box-sizing:border-box !important;
    position:fixed !important; bottom:20px !important; left:20px !important;
    display:none !important; align-items:center !important; justify-content:center !important;
    flex-direction: column !important; gap: 3px !important; text-align:center !important;
    color:#ffffff !important; border:1px solid rgba(255,255,255,0.08) !important;
    box-shadow: 0 12px 24px rgba(0,0,0,0.25), 0 2px 4px rgba(0,0,0,0.25) !important;
    font-weight:900 !important; z-index:1200 !important;
  }
  /* When logged in (or explicitly enabled), show the Post button */
  body.mk-post-visible #postFoodBtn{ display:inline-flex !important; }
  #postFoodBtn .fab-icon{ width:18px; height:18px; display:block; color:#ffffff; }
  #postFoodBtn .fab-text{ font-size:12px; line-height:1; font-weight:900; letter-spacing:.4px; }
  /* Hover/active micro-interactions like the AI icon */
  #postFoodBtn:hover{ transform: translateY(-2px) scale(1.02); transition: transform .15s ease, box-shadow .15s ease; box-shadow: 0 16px 30px rgba(0,0,0,0.28), 0 3px 6px rgba(0,0,0,0.24); }
  #postFoodBtn:active{ transform: translateY(0) scale(0.98); box-shadow: 0 8px 16px rgba(0,0,0,0.22), 0 1px 3px rgba(0,0,0,0.22); }
  @media (max-width: 420px){
    #postFoodBtn{ width:56px !important; height:56px !important; bottom:16px !important; left:16px !important; }
  }

  #quickPanelsDock{position:fixed;left:14px;bottom:92px;z-index:1800;max-width:340px;display:none;}
  #quickPanelsDock .dockStack{display:flex;flex-direction:column;gap:10px;}
  @media (max-width:380px){ #quickPanelsDock{max-width:86vw;} }
  body:not(.mk-post-visible) #quickPanelsDock{ display:none !important; }
  body.mk-sheet-open #quickPanelsDock{ display:none !important; }

  /* Inside the dock, panels become normal flow blocks (no fixed positioning) */
  #quickPanelsDock #cookQuickPanel,
  #quickPanelsDock #buyerQuickPanel{ position:static !important; left:auto !important; right:auto !important; bottom:auto !important; max-width:100% !important; }

  #cookQuickPanel{position:fixed;left:14px;bottom:92px;z-index:1800;max-width:340px;display:none;}
  #cookQuickPanel .cqList{display:flex;flex-direction:column;gap:10px;}
  #cookQuickPanel .cqCard{position:relative;display:flex;flex-direction:column;gap:6px;background:#f7e8e5;border:1px solid #ec4899;border-radius:16px;box-shadow:0 6px 18px rgba(17,24,39,.08);padding:8px 45px 8px 8px;}
  #cookQuickPanel .panelTitle{font-weight:900;font-size:13px;color:#15803d;line-height:1.1;margin:0 0 2px 0;}
  #cookQuickPanel .cqRow{display:flex;align-items:center;gap:8px;}
  #cookQuickPanel .thumb{flex:0 0 auto;width:32px;height:32px;border-radius:999px;overflow:hidden;background:#f1f5f9;border:1px solid #e5e7eb;display:flex;align-items:center;justify-content:center;}
  #cookQuickPanel .thumb img{width:100%;height:100%;object-fit:cover;}
  #cookQuickPanel .info{flex:1 1 auto;min-width:0;}
  #cookQuickPanel .title{font-weight:900;font-size:13px;color:#374151;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
  #cookQuickPanel .sub{font-size:11px;color:#64748b;font-weight:800;}
  #cookQuickPanel .cqCta{flex:0 0 auto;display:flex;flex-direction:column;align-items:flex-end;gap:0;}
  #cookQuickPanel .cqCta{justify-content:center;}
  #cookQuickPanel .btn{background:transparent !important;color:#15803d !important;border:1px solid #15803d !important;border-radius:10px;padding:2px 8px;min-height:0 !important;height:auto !important;font-weight:900;font-size:11px;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:0;line-height:1.05;text-align:center;white-space:nowrap;}
  #cookQuickPanel .btnSub{font-size:9px;font-weight:800;line-height:1.05;color:#15803d !important;}
  #cookQuickPanel .btnCounts{font-size:11px;font-weight:900;line-height:1.05;color:#111827 !important;white-space:nowrap;}
  #cookQuickPanel .count{font-size:10px;color:#374151;font-weight:800;margin-top:0;line-height:1.1;}
  @media (max-width:380px){ #cookQuickPanel{max-width:86vw;} }
  /* Hide in views where posting is not allowed */
  body:not(.mk-post-visible) #cookQuickPanel{ display:none !important; }
  /* Close button (inside the card) */
  #cookQuickPanel .close{position:absolute;top:6px;right:6px;border:1px solid #e5e7eb !important;background:#f3f4f6 !important;color:#f59e0b !important;border-radius:999px;width:12px;height:12px;display:flex;align-items:center;justify-content:center;font-weight:900;font-size:16px;cursor:pointer;line-height:1;box-shadow:0 1px 2px rgba(0,0,0,.06);z-index:20;padding:0;}
  /* Make entire panel feel tappable (except close) */
  #cookQuickPanel .cqCard, #cookQuickPanel .cqRow, #cookQuickPanel .thumb, #cookQuickPanel .info, #cookQuickPanel .title, #cookQuickPanel .sub, #cookQuickPanel .cqCta{ cursor:pointer; }
  #cookQuickPanel .close{ cursor:pointer; }
  /* While the Post sheet is open, force-hide the Post FAB (overrides earlier !important display) */
  body.mk-sheet-open #postFoodBtn{ display:none !important; }

  #buyerQuickPanel{position:fixed;right:14px;bottom:92px;z-index:1800;max-width:340px;display:none;}
  #buyerQuickPanel .bqList{display:flex;flex-direction:column;gap:10px;}
  #buyerQuickPanel .bqCard{position:relative;display:flex;flex-direction:column;gap:6px;background:rgb(233, 246, 237);border:1px solid #15803d;border-radius:16px;box-shadow:0 6px 18px rgba(17,24,39,.08);padding:8px 45px 8px 8px;}
  #buyerQuickPanel .panelTitle{font-weight:900;font-size:13px;color:#15803d;line-height:1.1;margin:0 0 2px 0;}
  #buyerQuickPanel .bqRow{display:flex;align-items:center;gap:8px;}
  #buyerQuickPanel .thumb{flex:0 0 auto;width:32px;height:32px;border-radius:999px;overflow:hidden;background:#f1f5f9;border:1px solid #e5e7eb;display:flex;align-items:center;justify-content:center;}
  #buyerQuickPanel .thumb img{width:100%;height:100%;object-fit:cover;}
  #buyerQuickPanel .info{flex:1 1 auto;min-width:0;}
  #buyerQuickPanel .title{font-weight:900;font-size:13px;color:#374151;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
  #buyerQuickPanel .sub{font-size:11px;color:#64748b;font-weight:800;}
  #buyerQuickPanel .bqCta{flex:0 0 auto;display:flex;flex-direction:column;align-items:flex-end;gap:0;}
  #buyerQuickPanel .bqCta{justify-content:center;}
  #buyerQuickPanel .btn{background:transparent !important;color:#15803d !important;border:1px solid #15803d !important;border-radius:10px;padding:2px 8px;min-height:0 !important;height:auto !important;font-weight:900;font-size:11px;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:0;line-height:1.05;text-align:center;white-space:nowrap;}
  #buyerQuickPanel .btnSub{font-size:9px;font-weight:800;line-height:1.05;color:#15803d !important;}
  #buyerQuickPanel .btnCounts{font-size:11px;font-weight:900;line-height:1.05;color:#111827 !important;white-space:nowrap;}
  #buyerQuickPanel .btnCounts{display:inline-flex;align-items:baseline;gap:6px;}
  #buyerQuickPanel .statusRejected{color:#dc2626 !important;}
  #buyerQuickPanel .statusDelivered{color:#15803d !important;}
  #buyerQuickPanel .statusInProgress{color:#2563eb !important;}
  #buyerQuickPanel .count{font-size:10px;color:#374151;font-weight:800;margin-top:0;line-height:1.1;}
  @media (max-width:380px){ #buyerQuickPanel{max-width:86vw;} }
  body:not(.mk-post-visible) #buyerQuickPanel{ display:none !important; }
  #buyerQuickPanel .close{position:absolute;top:6px;right:6px;border:1px solid #e5e7eb !important;background:#f3f4f6 !important;color:#f59e0b !important;border-radius:999px;width:12px;height:12px;display:flex;align-items:center;justify-content:center;font-weight:900;font-size:16px;cursor:pointer;line-height:1;box-shadow:0 1px 2px rgba(0,0,0,.06);z-index:20;padding:0;}
  #buyerQuickPanel .bqCard, #buyerQuickPanel .bqRow, #buyerQuickPanel .thumb, #buyerQuickPanel .info, #buyerQuickPanel .title, #buyerQuickPanel .sub, #buyerQuickPanel .bqCta{ cursor:pointer; }
  body.mk-sheet-open #buyerQuickPanel{ display:none !important; }

    #mkOverlay {
      position: fixed; inset: 0; background: rgba(0,0,0,.55);
      display: none; z-index: 1000;
    }
    #mkSheet{position: fixed; left:0; right:0; bottom:0; background:#ffffff; border-top-left-radius:16px; border-top-right-radius:16px; border:1px solid var(--border); transform: translate3d(0,100%,0); transition: transform .35s ease; z-index:1001; padding:16px; max-height:85vh; overflow-y:auto; overscroll-behavior: contain; overscroll-behavior-y: none; -webkit-overflow-scrolling: touch; box-shadow:0 -10px 30px rgba(0,0,0,.12);}
    #mkSheet.open { transform: translate3d(0,0,0); }
    .mkHandle { width: 44px; height: 4px; border-radius: 999px; background: #e2e8f0; margin: 6px auto 10px; }
    .mkTitle { text-align:center; font-size:18px; font-weight:800; margin: 0 0 10px; }
    .mkLabel { display:block; font-size:12px; color:#9ca3af; margin: 10px 2px 6px; }
    .mkInput, .mkSelect, .mkText{width:100%; padding:12px; border-radius:10px; border:1px solid var(--border); background:#ffffff; color:var(--text); font-weight:600;}
    .mkRow { display:flex; gap:10px; }
    .mkBtnPrimary {
      width:100%; padding:14px; border:0; border-radius:12px; font-weight:900;
      background: linear-gradient(90deg,#15803d,#4ade80); color:#ffffff; cursor:pointer;
      margin-top:14px;
    }
    .mkBtnGhost{width:100%; padding:12px; border:1px solid var(--border); border-radius:12px; font-weight:800; background:#ffffff; color:var(--text); cursor:pointer; margin-top:8px;}
    html.noscroll, body.noscroll { overflow: hidden; }
    html.noscroll { overscroll-behavior: none; }
  
    /* Large variant for Available now */
    .hsCard.large{
      min-width: 280px;
      grid-template-columns:110px 1fr;
      gap:14px;
      padding:14px;
      border-radius:20px;
    }
    .hsThumb.large{
      width:110px;height:110px;border-radius:16px;
      font-size:44px;
      background: radial-gradient(80% 80% at 30% 20%, #dbeafe, #ffffff);
    }
  .hsName.large{ font-size:14.5px; font-weight:600; }
    .hsRow.large .hsPill{ font-size:11px; padding:6px 10px; }
    .hsBtn.large{ padding:10px 12px; font-size:12px; border-radius:10px; margin-top:6px; }

    /* Super compact search section */
    .outlineBox.compact-max {
      padding:8px 8px 10px;
      margin:8px 0 10px;
      border-radius:12px;
    }
    .outlineBox.compact-max .chips{ gap:6px; margin:6px 0 8px; }
    .outlineBox.compact-max .chip{ padding:8px; font-size:12px; border-radius:10px; }
    .outlineBox.compact-max .label{ font-size:10px; margin:2px 2px 4px; }
    .outlineBox.compact-max .input,
    .outlineBox.compact-max .select,
    .outlineBox.compact-max .select2{ padding:8px 10px; font-size:12px; border-radius:10px; }
    .outlineBox.compact-max .meals{ gap:6px; }
    .outlineBox.compact-max .meal{ padding:6px; font-size:11px; border-radius:9px; }
    .outlineBox.compact-max .btn{ padding:8px 10px; font-size:13px; border-radius:10px }
    .outlineBox.compact-max .card{ padding:8px }
    .outlineBox.compact-max .searchRow{ margin-top:6px }

  
    /* Image fit for Available now thumbnails */
    .hsThumb, .hsThumb.large {
      position: relative;
      overflow: hidden;
    }
    .hsThumb img, .hsThumb.large img {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
      border-radius: inherit;
      display: block;
    }
    .hsThumb .emoji, .hsThumb.large .emoji {
      position: absolute;
      inset: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      width: 100%;
      height: 100%;
    }

  

  #mkPushCta{position:fixed;left:14px;right:14px;bottom:14px;z-index:2500;display:none;}
  /* mkPushCta styles moved to end-of-body so the banner isn't trapped inside hidden sheets */

#ordersOverlay{position:fixed;inset:0;background:rgba(0,0,0,.5);display:none;z-index:1900;overscroll-behavior:none;overscroll-behavior-y:none;}
#ordersPane{
  position:fixed; top:0; left:0; right:0; height:100vh; width:100%; max-width:none;
  background:#ffffff; border-left:0; box-shadow:0 0 0 rgba(0,0,0,0);
  transform:translateX(100%); transition:transform .3s ease; z-index:1901; display:flex; flex-direction:column; overscroll-behavior:none; overscroll-behavior-y:none;
}
#ordersPane.open{ transform:translateX(0); }
#ordersTop{ position:sticky; top:0; display:flex; align-items:center; justify-content:space-between; gap:8px;
  padding:14px 16px; border-bottom:1px solid #e5e7eb; background:#fffffff5; }
#ordersTitle{ font-weight:900; font-size:18px; }
#ordersClose{ border:1px solid #e5e7eb; background:#fff; border-radius:10px; padding:8px 12px; font-weight:900; cursor:pointer; }
#ordersList{ flex:1 1 auto; min-height:0; padding:12px 16px 12px; overflow:auto; display:flex; flex-direction:column; gap:10px; max-height:none !important; }
#ordersList, #postsList, #deliveriesListInside, #profileInside, #faqInside, #helpInside{
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}
.orderCard{ border:1px solid #e5e7eb; border-radius:14px; padding:12px; background:#fff; box-shadow:0 6px 18px rgba(17,24,39,.06); }
.orderCard.isToday{ border-color:#15803d !important; border-width:1px !important; }
.orderCard.mk-post-selected-card{ background:#dcfce7 !important; border-color:#86efac !important; box-shadow:0 6px 18px rgba(22,163,74,.14); }
.orderTitle{ font-weight:900; font-size:14px; margin-bottom:6px; }
.orderMeta{ font-size:12px; color:#374151; display:flex; flex-wrap:wrap; gap:8px; }
.orderTag{ display:inline-flex; align-items:center; gap:6px; padding:4px 8px; border-radius:999px; border:1px solid #e5e7eb; background:#f8fafc; font-weight:800; font-size:11px; }
.orderEmpty{ text-align:center; color:#6b7280; font-weight:700; padding:24px 0; }
#mealTabs{ display:none; }

#deliveriesOverlay{position:fixed;inset:0;background:rgba(0,0,0,.5);display:none;z-index:1900;overscroll-behavior:none;overscroll-behavior-y:none;}
#deliveriesPane{
  position:fixed; top:0; right:0; height:100vh; width:90%; max-width:420px;
  background:#ffffff; border-left:1px solid #e5e7eb; box-shadow:-8px 0 24px rgba(0,0,0,.12);
  transform:translateX(100%); transition:transform .3s ease; z-index:1901; display:flex; flex-direction:column; overscroll-behavior:none; overscroll-behavior-y:none;
}
#deliveriesPane.open{ transform:translateX(0); }
#deliveriesTop{ position:sticky; top:0; display:flex; align-items:center; justify-content:space-between; gap:8px;
  padding:14px 16px; border-bottom:1px solid #e5e7eb; background:#fffffff5; }
#deliveriesTitle{ font-weight:900; font-size:18px; }
#deliveriesClose{ border:1px solid #e5e7eb; background:#fff; border-radius:10px; padding:8px 12px; font-weight:900; cursor:pointer; }
#deliveriesList{ flex:1 1 auto; min-height:0; padding:12px 14px 16px; overflow:auto; display:flex; flex-direction:column; gap:14px; }
.deliveryCard{ border:1px solid #e5e7eb; border-radius:18px; padding:14px 16px 16px; background:#fff; box-shadow:0 4px 14px rgba(17,24,39,.05); display:flex; flex-direction:column; gap:10px; }
.deliveryCard-current{ border-color:#16a34a; box-shadow:0 6px 18px rgba(22,163,74,.20); }
.deliveryTitle{ font-weight:900; font-size:15px; margin:0 0 4px; letter-spacing:.2px; }
.deliveryMeta{ font-size:11px; color:#374151; display:flex; flex-wrap:wrap; gap:6px; }
.deliveryTag{ display:inline-flex; align-items:center; gap:4px; padding:4px 8px; border-radius:999px; border:1px solid #e5e7eb; background:#f8fafc; font-weight:700; font-size:10px; letter-spacing:.2px; }
.deliveryEmpty{ text-align:center; color:#6b7280; font-weight:700; padding:28px 0; }
.deliveryList{ margin-top:2px; display:flex; flex-direction:column; gap:10px; }
 .deliveryItem{ border:1px solid #e5e7eb; border-radius:14px; padding:8px 10px 8px; background:#ffffff; display:flex; flex-direction:column; gap:4px; position:relative; }
.deliveryItem.mk-delivery-selected-card{ background:#ecfdf5 !important; border-color:#86efac !important; box-shadow:0 6px 18px rgba(22,163,74,.14); }
/* Very thin outer layer to differentiate each order */
.deliveryItem::after{ content:''; position:absolute; inset:-1px; border-radius:16px; pointer-events:none; border:1px solid rgba(0,0,0,0.06); }
.deliverySelectWrap{ margin-left:auto; display:inline-flex; align-items:flex-start; justify-content:center; padding-top:1px; }
.mk-delivery-request-select{ width:16px; height:16px; cursor:pointer; }
/* Compact pickup button used across deliveries */
.pickupReadyBtn{ border:1px solid #16a34a; background:#ffffff !important; color:#111827 !important; border-radius:999px; padding:4px 10px; font-size:clamp(10px, 1.9vw, 12px); font-weight:800; cursor:pointer; white-space:nowrap; display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height:32px; height:32px; flex:1 1 auto; overflow:hidden; text-overflow:ellipsis; }
.deliveryStatusSelectTag{ font-size:clamp(10px, 1.9vw, 12px); min-height:28px; height:28px; padding:3px 10px; width:132px; flex:0 0 132px; }
.pickupReadyBtn .waIcon{ width:18px !important; height:18px !important; margin-right:6px !important; display:inline-flex; align-items:center; justify-content:center; }
/* Ensure WA icon is visible on any background: inherit text color (white on green, dark on white) */
/* For this button, prefer brand green icon on white background */
.pickupReadyBtn .waIcon svg path{ fill: #25D366 !important; }

.deliveryAddr{ font-size:12px; font-weight:800; color:#111827; line-height:1.2; }
.deliverySub{ font-size:10.5px; color:#374151; display:flex; flex-wrap:wrap; gap:6px; }
.deliveryActions{ display:flex; align-items:stretch; gap:6px; flex-wrap:nowrap; margin-top:6px; }
.deliveryActions > *{ max-width:100%; }
/* Responsive: keep on one line for normal widths, but allow wrapping gracefully on small screens */
@media (max-width: 420px){
  .deliveryActions{ flex-wrap:wrap; gap:8px; }
  .deliveryActions .deliveryStatusSelectTag{ flex:0 0 48%; width:auto; }
  .deliveryActions .pickupReadyBtn{ flex:1 1 48%; min-width:0; }
}
@media (max-width: 340px){
  .deliveryActions .deliveryStatusSelectTag,
  .deliveryActions .pickupReadyBtn{ flex:1 1 100%; }
  .pickupReadyBtn{ font-size:11px; padding:4px 10px; height:32px; min-height:32px; }
  /* On very small screens, show icon tightly and allow text to truncate */
  .pickupReadyBtn .waIcon{ margin-right:4px !important; }
  .pickupReadyBtn span:last-child{ overflow:hidden; text-overflow:ellipsis; max-width:100%; }
}
.deliveryChip{ background:#f1f5f9; border:1px solid #e2e8f0; padding:3px 6px; border-radius:8px; font-weight:600; display:inline-flex; align-items:center; gap:4px; }
.deliveryTitleRow{ display:flex; align-items:flex-start; gap:10px; justify-content:space-between; }
/* Status select pill */
@keyframes mkBlinkPulse { 0%{box-shadow:0 0 0 0 rgba(254,215,0,.55);} 65%{box-shadow:0 0 0 8px rgba(254,215,0,0);} 100%{box-shadow:0 0 0 0 rgba(254,215,0,0);} }
.deliveryStatusSelectTag{appearance:none;-webkit-appearance:none;font-size:9px;font-weight:800;padding:2px 8px;min-height:28px;height:28px;border-radius:999px;border:1px solid transparent;line-height:1;display:inline-flex;align-items:center;width:auto;white-space:nowrap;cursor:pointer;transition:.25s background,.25s color,.25s box-shadow;box-shadow:0 1px 2px rgba(0,0,0,.08);} 
.deliveryStatusSelectTag:focus{outline:2px solid #2563eb; outline-offset:2px;}
/* Color schemes */
.deliveryStatusSelectTag.status-pending{ background:#fef3c7 !important; color:#92400e !important; border-color:#fcd34d !important; }
.deliveryStatusSelectTag.status-confirmed{ background:#dbeafe !important; color:#1e3a8a !important; border-color:#93c5fd !important; }
.deliveryStatusSelectTag.status-preparing{ background:#fde68a !important; color:#92400e !important; border-color:#fcd34d !important; }
.deliveryStatusSelectTag.status-out{ background:#fbbf24 !important; color:#78350f !important; border-color:#f59e0b !important; }
.deliveryStatusSelectTag.status-delivered{ background:#dcfce7 !important; color:#166534 !important; border-color:#86efac !important; }
.deliveryStatusSelectTag.status-rejected{ background:#fee2e2 !important; color:#991b1b !important; border-color:#fca5a5 !important; }
.deliveryStatusSelectTag.actionable{ animation:mkBlinkPulse 2.4s ease-in-out infinite; }
.deliveryStatusSelectTag.finished{ animation:none; opacity:.85; }

  #mkPushCta{position:fixed;left:14px;right:14px;bottom:14px;z-index:2500;display:none;}
  #mkPushCta .card{background:#0b1220;color:#fff;border:1px solid rgba(255,255,255,.15);border-radius:16px;padding:12px 12px;box-shadow:0 10px 30px rgba(0,0,0,.25);max-width:520px;margin:0 auto;}
  #mkPushCta .title{font-weight:900;font-size:14px;margin:0 0 4px 0;}
  #mkPushCta .desc{font-weight:700;font-size:12px;opacity:.9;margin:0 0 10px 0;}
  #mkPushCta .row{display:flex;gap:8px;align-items:center;justify-content:flex-end;flex-wrap:wrap;}
  #mkPushCta button{border-radius:12px;border:1px solid rgba(255,255,255,.2);padding:8px 10px;font-weight:900;cursor:pointer;}
  #mkPushEnable{background:#16a34a;color:#fff;border-color:#16a34a;}
  #mkPushDismiss{background:transparent;color:#fff;}
  #mkPushCta .msg{margin-top:8px;font-size:12px;font-weight:700;opacity:.95;display:none;}