:root {
  --brand: #e85d04;
  --brand-dark: #c44d00;
  --brand-soft: #fff1e6;
  --ink: #1f2328;
  --sidebar: #1c1f26;
}
body { font-family: 'Plus Jakarta Sans', system-ui, sans-serif; color: var(--ink); background: #f7f7f9; }
.text-brand { color: var(--brand) !important; }
.bg-brand { background: var(--brand) !important; color: #fff; }
.bg-brand-soft { background: var(--brand-soft) !important; }
.btn-brand { background: var(--brand); border-color: var(--brand); color: #fff; }
.btn-brand:hover, .btn-brand:focus { background: var(--brand-dark); border-color: var(--brand-dark); color: #fff; }
.btn-outline-brand { border-color: var(--brand); color: var(--brand); }
.btn-outline-brand:hover { background: var(--brand); color: #fff; }
a { color: var(--brand-dark); }
.form-control:focus, .form-select:focus { border-color: var(--brand); box-shadow: 0 0 0 .2rem rgba(232,93,4,.15); }
.cart-count { font-size: .65rem; position: absolute; top: 2px; right: -4px; }

/* Storefront */
.hero { background: linear-gradient(120deg, #1c1f26 0%, #3a2414 100%); color: #fff; border-radius: 1.25rem; }
.hero h1 { font-weight: 800; letter-spacing: -.02em; }
.food-card { transition: transform .15s ease, box-shadow .15s ease; border-radius: .9rem; }
.food-card:hover { transform: translateY(-3px); box-shadow: 0 .75rem 1.5rem rgba(0,0,0,.08) !important; }
.food-card .ratio img { width: 100%; height: 100%; }
.vendor-logo { width: 64px; height: 64px; object-fit: cover; border-radius: .75rem; background: #fff; }
.vendor-logo-lg { width: 110px; height: 110px; object-fit: cover; border-radius: 1rem; border: 4px solid #fff; background: #fff; }
.chip { display: inline-block; padding: .35rem .85rem; border-radius: 2rem; background: #fff; border: 1px solid #e5e5e5; color: var(--ink); text-decoration: none; font-size: .875rem; white-space: nowrap; }
.chip.active, .chip:hover { background: var(--brand); border-color: var(--brand); color: #fff; }
.chip-scroll { display: flex; gap: .5rem; overflow-x: auto; padding-bottom: .25rem; }
.cat-thumb { width: 28px; height: 28px; border-radius: 50%; object-fit: cover; margin-right: .35rem; }

/* Panels */
.sidebar { width: 250px; min-height: 100vh; background: var(--sidebar); color: #fff; flex-shrink: 0; }
@media (min-width: 992px) { .sidebar { position: sticky; top: 0; height: 100vh; overflow-y: auto; } }
.sidebar.offcanvas-lg { --bs-offcanvas-bg: var(--sidebar); --bs-offcanvas-color: #fff; }
/* Bootstrap makes .offcanvas-lg transparent on large screens (background-color: transparent !important), which left the
   white menu text on a light background. Keep the sidebar's own colour at every screen size. */
.sidebar.offcanvas-lg, .sidebar { background-color: var(--sidebar) !important; color: #fff; }
.sidebar .nav-link { color: rgba(255,255,255,.72); border-radius: .5rem; padding: .55rem .8rem; margin-bottom: 2px; font-size: .925rem; }
.sidebar .nav-link i { width: 1.4rem; display: inline-block; }
.sidebar .nav-link:hover { background: rgba(255,255,255,.07); color: #fff; }
.sidebar .nav-link.active { background: var(--brand); color: #fff; }
.panel-admin .sidebar { --sidebar: #14213d; background: #14213d; }
.panel-rider .sidebar { --sidebar: #0b3d2e; background: #0b3d2e; }
.rider-job { border-left: 4px solid var(--brand); }
.rider-job.failed { border-left-color: #dc3545; }
.rider-job.onway { border-left-color: #212529; }
.leaflet-container { font: inherit; }
.main-col { min-width: 0; }
.stat-card { border: 0; border-radius: .9rem; box-shadow: 0 1px 3px rgba(0,0,0,.05); }
.stat-card .icon { width: 46px; height: 46px; border-radius: .75rem; display: flex; align-items: center; justify-content: center; font-size: 1.35rem; }
.card { border-radius: .75rem; }
.card.shadow-sm { border: 0; }
.table > :not(caption) > * > * { vertical-align: middle; }
.thumb { width: 48px; height: 48px; object-fit: cover; border-radius: .5rem; }
.notif-item { white-space: normal; border-bottom: 1px solid #f0f0f0; }
.notif-item.unread { background: var(--brand-soft); }

/* POS (touch-first) */
.pos-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: .75rem; }
@media (min-width: 1600px) { .pos-grid { grid-template-columns: repeat(auto-fill, minmax(175px, 1fr)); } }
@media (max-width: 400px) { .pos-grid { grid-template-columns: repeat(2, 1fr); gap: .5rem; } }
.pos-item { position: relative; border: 2px solid #eee; border-radius: .9rem; background: #fff; cursor: pointer; overflow: hidden; text-align: left; padding: 0;
  transition: transform .08s ease, border-color .1s; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }
.pos-item:active { transform: scale(.96); border-color: var(--brand); }
.pos-item:disabled { opacity: .45; cursor: not-allowed; }
.pos-item img { width: 100%; height: 100px; object-fit: cover; pointer-events: none; }
.pos-name { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; line-height: 1.25; min-height: 2.5em; }
.pos-qty { position: absolute; top: 6px; right: 6px; font-size: .95rem; z-index: 1; min-width: 1.8em; }
.pos-cart .lines { max-height: 45vh; overflow-y: auto; }
.chip-lg .chip { padding: .55rem 1.1rem; font-size: 1rem; }
.qty-touch { display: flex; align-items: center; border: 1px solid #e5e5e5; border-radius: .6rem; overflow: hidden; flex-shrink: 0; }
.qty-touch .btn { width: 44px; height: 44px; border-radius: 0; font-size: 1.25rem; padding: 0; line-height: 1; }
.qty-touch span { min-width: 32px; text-align: center; font-weight: 600; }
.btn-group-touch .btn { padding: .6rem .4rem; }
.opt-touch { display: flex; gap: .75rem; align-items: center; padding: .7rem .8rem; border: 1px solid #eee; border-radius: .6rem; margin-bottom: .4rem; cursor: pointer; }
.opt-touch:has(input:checked) { border-color: var(--brand); background: var(--brand-soft); }
@media (min-width: 992px) {
  /* Sale panel fills the screen height: items list on top, payment below; on short screens the payment area scrolls but Charge stays visible */
  .pos-cart { position: sticky; top: 72px; height: calc(100vh - 88px); max-height: calc(100vh - 88px); display: flex; flex-direction: column; }
  .pos-cart .lines { flex: 1 1 auto; max-height: none; min-height: 150px; }
  .pos-cart .pos-pay { overflow-y: auto; flex: 0 1 auto; min-height: 0; }
}
@media (min-width: 992px) and (max-height: 900px) {
  .pos-pay .fs-4 { font-size: 1.2rem !important; }
  .pos-pay #sumRows { font-size: .8rem; }
  .pos-pay .mb-2, .pos-pay .mb-3 { margin-bottom: .4rem !important; }
  .pos-pay { padding-top: .6rem; padding-bottom: .6rem; }
}
.pos-pay #chargeBtn { position: sticky; bottom: 0; z-index: 2; box-shadow: 0 -10px 12px -2px #fff; }
#quickCash { flex-wrap: nowrap !important; gap: .35rem !important; }
#quickCash .btn { padding-left: .2rem; padding-right: .2rem; min-width: 0; flex: 1 1 0; }
@media (max-width: 991.98px) {
  .pos-sheet.offcanvas-lg { height: 92vh !important; border-top-left-radius: 1rem; border-top-right-radius: 1rem; }
  .pos-sheet .pos-cart { box-shadow: none !important; border: 0; height: 100%; display: flex; flex-direction: column; border-radius: 1rem 1rem 0 0; }
  .pos-sheet .lines { flex: 1 1 auto; max-height: none; min-height: 80px; }
  .pos-sheet .pos-pay { overflow-y: auto; max-height: 62vh; padding-bottom: calc(1rem + env(safe-area-inset-bottom)); }
  .btn.pos-bar { position: fixed; left: 12px; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom)); z-index: 1030; display: flex; justify-content: space-between !important;
    padding: .9rem 1.1rem; border-radius: .9rem; font-size: 1.05rem; }
  .pos-spacer { height: 84px; }
}
/* Full-screen / focus mode for counter tablets & touchscreen monitors */
body.pos-focus .sidebar, body.pos-focus .topbar { display: none !important; }
body.pos-focus .main-col > .p-3 { padding: .75rem !important; }
body.pos-focus .pos-cart { top: 12px; max-height: calc(100vh - 24px); }

/* Order status tracker */
.tracker { display: flex; justify-content: space-between; position: relative; }
.tracker .step { text-align: center; flex: 1; font-size: .78rem; color: #999; position: relative; }
.tracker .step .dot { width: 28px; height: 28px; border-radius: 50%; background: #e9ecef; margin: 0 auto .35rem; display: flex; align-items: center; justify-content: center; color: #fff; position: relative; z-index: 1; }
.tracker .step.done { color: var(--ink); }
.tracker .step.done .dot { background: var(--brand); }
.tracker .step:not(:last-child)::after { content: ''; position: absolute; top: 14px; left: 50%; width: 100%; height: 3px; background: #e9ecef; }
.tracker .step.done:not(:last-child)::after { background: var(--brand); }

@media print { .no-print { display: none !important; } }
.border-brand { border: 1px solid var(--brand) !important; }
.policy h2:first-child { margin-top: 0 !important; }
.policy ul { padding-left: 1.2rem; }
.policy li { margin-bottom: .25rem; }
.qr-target img, .qr-target canvas { max-width: 100%; }
@media (display-mode: standalone) { body.public main { padding-bottom: env(safe-area-inset-bottom); } }

/* ---------- Brand ---------- */
.brand-mark { width: 34px; height: 34px; flex-shrink: 0; }
.brand-word { font-weight: 800; letter-spacing: -.02em; color: var(--ink); font-size: 1.3rem; line-height: 1; }
.city-btn { white-space: nowrap; max-width: 42vw; overflow: hidden; text-overflow: ellipsis; }
.min-w-0 { min-width: 0; }
.cart-link-mobile { padding: .35rem .65rem .35rem .35rem !important; }
.cart-link-mobile .cart-count { top: 0; right: 0; }
/* Safety net: never let a stray element cause sideways scrolling on phones (clip keeps position:sticky working) */
html, body { overflow-x: clip; }
@media (max-width: 380px) { .brand-word { font-size: 1.1rem; } .brand-mark { width: 28px; height: 28px; } }

/* ---------- Touch screens (phones, tablets, touchscreen monitors) ---------- */
html { -webkit-tap-highlight-color: transparent; }
button, .btn, a, label, select, summary, .chip, .nav-link, .form-check-input { touch-action: manipulation; } /* no double-tap-zoom delay */
summary { cursor: pointer; }
@media (pointer: coarse) {
  /* Finger-sized targets (44px is the common minimum) */
  .btn:not(.btn-close):not(.btn-link) { min-height: 44px; display: inline-flex; align-items: center; justify-content: center; gap: .3rem; }
  .btn-sm:not(.btn-close) { min-height: 38px; padding: .4rem .75rem; }
  .btn-group > .btn, .input-group > .btn { display: inline-flex; }
  .form-control, .form-select { min-height: 44px; font-size: 16px; } /* 16px stops iOS zooming into fields */
  .form-control-sm, .form-select-sm { min-height: 38px; font-size: 16px; }
  textarea.form-control { min-height: 0; }
  .form-check { min-height: 1.75rem; padding-top: .15rem; }
  .form-check-input { width: 1.3em; height: 1.3em; }
  .form-switch .form-check-input { width: 2.5em; }
  .form-check-label { padding-left: .2rem; }
  .chip { padding: .65rem 1rem; }
  .sidebar .nav-link { padding: .75rem .9rem; }
  .dropdown-item { padding: .65rem 1rem; }
  .page-link { padding: .55rem .9rem; }
  .list-group-item-action { padding-top: .8rem; padding-bottom: .8rem; }
  .table > :not(caption) > * > * { padding-top: .6rem; padding-bottom: .6rem; }
  .nav-pills .nav-link { padding: .6rem 1rem; }
}
/* Hover effects only where there's a real mouse, so nothing gets "stuck" highlighted after a tap */
@media (hover: none) {
  .food-card:hover { transform: none; box-shadow: 0 .125rem .25rem rgba(0,0,0,.075) !important; }
  .pos-item:hover { border-color: #eee; }
  .chip:hover:not(.active) { background: #fff; border-color: #e5e5e5; color: var(--ink); }
}
/* Big touchscreen monitors: a little larger overall */
@media (pointer: coarse) and (min-width: 1200px) { body.panel { font-size: 1.05rem; } }

/* ---------- Small screens ---------- */
@media (max-width: 575.98px) {
  .hero { border-radius: .9rem; }
  .hero h1 { font-size: 1.75rem; }
  .card.p-4 { padding: 1rem !important; }
  .topbar h1 { font-size: 1rem; }
  .panel .p-3 { padding-left: .75rem !important; padding-right: .75rem !important; }
  .dropdown-menu[style*="width:340px"] { width: calc(100vw - 24px) !important; }
  .vendor-logo-lg { width: 84px; height: 84px; }
}
.table-responsive { -webkit-overflow-scrolling: touch; }
.city-strip { display: flex; align-items: center; gap: .4rem; width: 100%; border: 0; border-bottom: 1px solid #eee; background: var(--brand-soft); padding: .55rem 1rem; font-size: .9rem; text-align: left; color: var(--ink); }