:root{--teal:#159C9A;--teal-dark:#2E7F75;--ink:#17323A;--muted:#6E7D82;--bg:#F4F7F7;--white:#fff;--line:#DDE7E5;--danger:#B64646;--good:#287A64}
*{box-sizing:border-box}html,body{margin:0;background:var(--bg);color:var(--ink);font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif}button,input,select,textarea{font:inherit}
.app-shell{width:min(100%,480px);min-height:100vh;margin:auto;background:white}.topbar{height:64px;width:min(100%,480px);display:grid;grid-template-columns:42px 1fr 70px;align-items:center;padding:0 16px;border-bottom:1px solid var(--line);position:fixed;top:0;background:white;z-index:5}.topbar.simple{grid-template-columns:1fr 2fr 1fr}.brand{text-align:center;font-weight:900;font-size:20px}.brand span{color:var(--teal-dark);font-size:14px}.step-counter{text-align:right;color:var(--muted);font-size:12px}.icon-btn{width:36px;height:36px;border-radius:50%;border:1px solid var(--line);background:white;font-size:27px}.hidden{display:none!important}.progress-wrap{height:4px;background:#e8f0ef}.progress-bar{height:100%;background:var(--teal)}.screen{padding:22px 18px 40px}.hero{padding-top:25px}.eyebrow{color:var(--teal-dark);font-size:12px;font-weight:900;letter-spacing:1.2px;margin-bottom:8px}h1{font-size:39px;line-height:1.04;margin:0 0 18px}h1 span{color:var(--teal-dark)}h2{font-size:28px;margin:0 0 12px}h3{font-size:16px;margin:15px 0 8px}p{color:#42585e;line-height:1.5}.lead{font-size:17px}.micro{font-size:12px;color:var(--muted)}.center{text-align:center}
.promise-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:22px 0}.promise{background:#ECF7F4;border:1px solid #CFE9E4;border-radius:14px;padding:12px 6px;text-align:center}.promise b{display:block;font-size:13px}.promise small{font-size:11px;color:var(--muted)}
label{display:block;font-size:13px;font-weight:750;margin-top:15px}input,select,textarea{width:100%;padding:14px 12px;border:1px solid #CEDAD8;border-radius:12px;background:#fff;margin-top:7px}.primary,.secondary{border:0;border-radius:13px;padding:14px 16px;font-weight:850;margin-top:18px}.primary{background:var(--teal);color:#fff}.secondary{background:#eaf3f2;color:var(--teal-dark)}.wide{width:100%}.error{color:var(--danger);font-size:12px;margin-top:8px}.notice{background:#FFF7DA;border:1px solid #F1DD87;border-radius:12px;padding:12px;font-weight:800;font-size:13px;margin:17px 0}
.bag-visual{display:grid;grid-template-columns:1fr 30px 1fr;align-items:center;gap:6px;margin:20px 0}.dirty-bag,.teal-bag{height:130px;border-radius:18px 18px 28px 28px;display:flex;align-items:center;justify-content:center;text-align:center;padding:10px;font-weight:900}.dirty-bag{background:#20272b;color:white}.teal-bag{background:var(--teal);color:white}.arrow{text-align:center;font-size:28px}.choice-row{display:grid;grid-template-columns:1fr 1fr;gap:9px}.choice{border:1px solid #d1dcda;background:white;border-radius:12px;padding:12px;font-weight:750}.choice small{display:block;font-size:10px;color:var(--muted)}.choice.selected{background:#EAF7F4;border-color:var(--teal);color:var(--teal-dark)}.rule{padding:14px;border-radius:14px;border:1px solid var(--line);margin:12px 0}.rule.good{background:#eef8f4}.rule.bad{background:#fff1f1}.check{display:flex;gap:10px;align-items:flex-start;border:1px solid var(--line);padding:12px;border-radius:12px}.check input{width:20px;height:20px;margin:1px 0}
.review-box{border:1px solid var(--line);border-radius:14px;padding:12px}.review-row{display:flex;justify-content:space-between;gap:15px;padding:8px 0;border-bottom:1px solid #edf1f0}.review-row:last-child{border:0}.review-row span:last-child{text-align:right;font-weight:750}.total-row{display:flex;justify-content:space-between;font-size:22px;margin-top:16px;border-top:2px solid var(--ink);padding-top:14px}.apple-pay{width:100%;background:black;color:white;border:0;border-radius:12px;padding:14px;font-size:20px}.divider{text-align:center;color:var(--muted);margin:12px}.success-card{text-align:center}.checkmark{width:68px;height:68px;border-radius:50%;display:grid;place-items:center;background:#eaf7f4;color:var(--teal-dark);font-size:38px;margin:10px auto}.order-ref{font-size:26px;font-weight:900;color:var(--teal-dark);margin:18px}
.timeline div{position:relative;padding:5px 0 20px 38px;color:var(--muted)}.timeline div:before{content:"";position:absolute;left:10px;top:5px;width:14px;height:14px;border-radius:50%;border:2px solid #bbc9c7;background:white}.timeline div:after{content:"";position:absolute;left:17px;top:23px;width:2px;height:24px;background:#dde6e4}.timeline div:last-child:after{display:none}.timeline .done:before{background:var(--teal);border-color:var(--teal)}.timeline .done{color:var(--ink)}.timeline .current:before{border:4px solid var(--teal)}.timeline .current{color:var(--teal-dark)}.timeline small{display:block;color:var(--muted)}
.staff-head,.order-top{display:flex;justify-content:space-between;align-items:center;gap:10px}.order-card{border:1px solid var(--line);border-radius:16px;padding:15px;margin:12px 0;background:#fff;box-shadow:0 2px 9px rgba(0,0,0,.04)}.order-card h3{margin:10px 0}.status-pill{background:#eaf7f4;color:var(--teal-dark);font-weight:850;font-size:11px;padding:6px 9px;border-radius:999px}.pin-box{background:#f7fbfa;border:1px solid #cfe7e2;border-radius:12px;padding:12px;margin-top:14px}
/* =====================================================
   REFRESH ORDER TIMELINE
   One marker only
===================================================== */

.timeline > div {
  position: relative;
  min-height: 58px;
  padding-left: 42px;
}


/* REMOVE OLD SECOND / HOLLOW CIRCLE */

.timeline > div::before {
  display: none !important;
  content: none !important;
}


/* LEFT TEAL MARKER */

.timeline > div::after {
  content: "";
  position: absolute;

  left: 8px;
  top: 8px;

  width: 18px;
  height: 18px;

  border-radius: 50%;

  background: #55B5A6;
}


/* CONNECTING LINE */

.timeline > div:not(:last-child) {
  background:
    linear-gradient(
      #dce8e5,
      #dce8e5
    )
    16px 26px / 2px calc(100% - 18px)
    no-repeat;
}


/* TEXT */

.timeline > div b {
  display: block;
  line-height: 1.25;
}


.timeline > div small {
  display: block;
  margin-top: 4px;
  line-height: 1.2;
}


/* COMPLETED DELIVERED STEP */

.timeline > div.done::after {
  background: #55B5A6;
}
/* =====================================================
   MOBILE / PWA SCREEN FIT
===================================================== */


:root{--teal:#55B5A6;--teal-dark:#2E7F75;--ink:#17323A;--muted:#6E7D82;--bg:#F4F7F7;--white:#fff;--line:#DDE7E5;--danger:#B64646;--good:#287A64}
*{box-sizing:border-box}html,body{margin:0;background:var(--bg);color:var(--ink);font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif}button,input,select,textarea{font:inherit}
.app-shell{width:min(100%,480px);min-height:100vh;margin:auto;background:white}.topbar{height:64px;display:grid;grid-template-columns:42px 1fr 70px;align-items:center;padding:0 16px;border-bottom:1px solid var(--line);position:fixed;top:0;background:white;z-index:5}.topbar.simple{grid-template-columns:1fr 2fr 1fr}.brand{text-align:center;font-weight:900;font-size:20px}.brand span{color:var(--teal-dark);font-size:14px}.step-counter{text-align:right;color:var(--muted);font-size:12px}.icon-btn{width:36px;height:36px;border-radius:50%;border:1px solid var(--line);background:white;font-size:27px}.hidden{display:none!important}.progress-wrap{height:4px;background:#e8f0ef}.progress-bar{height:100%;background:var(--teal)}.screen{padding:22px 18px 40px}.hero{padding-top:25px}.eyebrow{color:var(--teal-dark);font-size:12px;font-weight:900;letter-spacing:1.2px;margin-bottom:8px}h1{font-size:39px;line-height:1.04;margin:0 0 18px}h1 span{color:var(--teal-dark)}h2{font-size:28px;margin:0 0 12px}h3{font-size:16px;margin:15px 0 8px}p{color:#42585e;line-height:1.5}.lead{font-size:17px}.micro{font-size:12px;color:var(--muted)}.center{text-align:center}
.promise-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:22px 0}.promise{background:#ECF7F4;border:1px solid #CFE9E4;border-radius:14px;padding:12px 6px;text-align:center}.promise b{display:block;font-size:13px}.promise small{font-size:11px;color:var(--muted)}
label{display:block;font-size:13px;font-weight:750;margin-top:15px}input,select,textarea{width:100%;padding:14px 12px;border:1px solid #CEDAD8;border-radius:12px;background:#fff;margin-top:7px}.primary,.secondary{border:0;border-radius:13px;padding:14px 16px;font-weight:850;margin-top:18px}.primary{background:var(--teal);color:#fff}.secondary{background:#eaf3f2;color:var(--teal-dark)}.wide{width:100%}.error{color:var(--danger);font-size:12px;margin-top:8px}.notice{background:#FFF7DA;border:1px solid #F1DD87;border-radius:12px;padding:12px;font-weight:800;font-size:13px;margin:17px 0}
.bag-visual{display:grid;grid-template-columns:1fr 30px 1fr;align-items:center;gap:6px;margin:20px 0}.dirty-bag,.teal-bag{height:130px;border-radius:18px 18px 28px 28px;display:flex;align-items:center;justify-content:center;text-align:center;padding:10px;font-weight:900}.dirty-bag{background:#20272b;color:white}.teal-bag{background:var(--teal);color:white}.arrow{text-align:center;font-size:28px}.choice-row{display:grid;grid-template-columns:1fr 1fr;gap:9px}.choice{border:1px solid #d1dcda;background:white;border-radius:12px;padding:12px;font-weight:750}.choice small{display:block;font-size:10px;color:var(--muted)}.choice.selected{background:#EAF7F4;border-color:var(--teal);color:var(--teal-dark)}.rule{padding:14px;border-radius:14px;border:1px solid var(--line);margin:12px 0}.rule.good{background:#eef8f4}.rule.bad{background:#fff1f1}.check{display:flex;gap:10px;align-items:flex-start;border:1px solid var(--line);padding:12px;border-radius:12px}.check input{width:20px;height:20px;margin:1px 0}
.review-box{border:1px solid var(--line);border-radius:14px;padding:12px}.review-row{display:flex;justify-content:space-between;gap:15px;padding:8px 0;border-bottom:1px solid #edf1f0}.review-row:last-child{border:0}.review-row span:last-child{text-align:right;font-weight:750}.total-row{display:flex;justify-content:space-between;font-size:22px;margin-top:16px;border-top:2px solid var(--ink);padding-top:14px}.apple-pay{width:100%;background:black;color:white;border:0;border-radius:12px;padding:14px;font-size:20px}.divider{text-align:center;color:var(--muted);margin:12px}.success-card{text-align:center}.checkmark{width:68px;height:68px;border-radius:50%;display:grid;place-items:center;background:#eaf7f4;color:var(--teal-dark);font-size:38px;margin:10px auto}.order-ref{font-size:26px;font-weight:900;color:var(--teal-dark);margin:18px}
.timeline div{position:relative;padding:5px 0 20px 38px;color:var(--muted)}.timeline div:before{content:"";position:absolute;left:10px;top:5px;width:14px;height:14px;border-radius:50%;border:2px solid #bbc9c7;background:white}.timeline div:after{content:"";position:absolute;left:17px;top:23px;width:2px;height:24px;background:#dde6e4}.timeline div:last-child:after{display:none}.timeline .done:before{background:var(--teal);border-color:var(--teal)}.timeline .done{color:var(--ink)}.timeline .current:before{border:4px solid var(--teal)}.timeline .current{color:var(--teal-dark)}.timeline small{display:block;color:var(--muted)}
.staff-head,.order-top{display:flex;justify-content:space-between;align-items:center;gap:10px}.order-card{border:1px solid var(--line);border-radius:16px;padding:15px;margin:12px 0;background:#fff;box-shadow:0 2px 9px rgba(0,0,0,.04)}.order-card h3{margin:10px 0}.status-pill{background:#eaf7f4;color:var(--teal-dark);font-weight:850;font-size:11px;padding:6px 9px;border-radius:999px}.pin-box{background:#f7fbfa;border:1px solid #cfe7e2;border-radius:12px;padding:12px;margin-top:14px}
/* =====================================================
   REFRESH ORDER TIMELINE
   One marker only
===================================================== */

.timeline > div {
  position: relative;
  min-height: 58px;
  padding-left: 42px;
}


/* REMOVE OLD SECOND / HOLLOW CIRCLE */

.timeline > div::before {
  display: none !important;
  content: none !important;
}


/* LEFT TEAL MARKER */

.timeline > div::after {
  content: "";
  position: absolute;
  left: 8px;
  top: 8px;
  width: 18px;
  height: 18px;
  border-radius: 50%;

  /* future steps */
  background: #C7D0D0;
}


/* completed steps */

.timeline > div.done::after {
  background: #55B5A6;
}


/* current step */

.timeline > div.current::after {
  background: #55B5A6;

}


/* CONNECTING LINE */

.timeline > div:not(:last-child) {
  background:
    linear-gradient(
      #dce8e5,
      #dce8e5
    )
    16px 26px / 2px calc(100% - 18px)
    no-repeat;
}


/* TEXT */

.timeline > div b {
  display: block;
  line-height: 1.25;
}


.timeline > div small {
  display: block;
  margin-top: 4px;
  line-height: 1.2;
}


/* COMPLETED DELIVERED STEP */

.timeline > div.done::after {
  background: #55B5A6;
}
/* =====================================================
   MOBILE / PWA SCREEN FIT
===================================================== */

/* =====================================================
   MOBILE / PWA SCREEN FIT
===================================================== */

html,
body {
  width: 100%;
  max-width: 100%;
  margin: 0;
  padding: 0;
  overflow-x: hidden;
}

* {
  box-sizing: border-box;
}

.app-shell {
  width: 100%;
  max-width: 480px;
  min-height: 100vh;
  min-height: 100dvh;
  margin: 0 auto;
  background: #fff;
}

.screen {
  width: 100%;
  padding-left: 18px;
  padding-right: 18px;
}

.card {
  width: 100%;
  max-width: 100%;
}

input,
select,
button,
textarea {
  max-width: 100%;
}

@media (max-width: 480px) {

  .app-shell {
    width: 100%;
    max-width: 100%;
  }

  .screen {
    padding-left: 16px;
    padding-right: 16px;
  }

}
html,
body {
  overscroll-behavior-y: contain;
}
/* =====================================================
   FLOATING QR / PIN PANEL
===================================================== */

/* =====================================================
   FLOATING QR / PIN PANEL
===================================================== */

#pinNotice:not(.hidden) {
  position: fixed !important;

  left: 50% !important;
  right: auto !important;
  bottom: calc(14px + env(safe-area-inset-bottom)) !important;
  top: auto !important;

  transform: translateX(-50%) !important;

  width: calc(100% - 32px) !important;
  max-width: 448px !important;

  margin: 0 !important;

  z-index: 10000 !important;

  max-height: 42vh;
  overflow-y: auto;

  padding: 18px !important;

  background: #FFF7DA;
  border: 1px solid #F1DD87;
  border-radius: 16px;

  box-shadow:
    0 8px 30px rgba(23, 50, 58, 0.25);

  -webkit-overflow-scrolling: touch;
}


/* Make QR smaller inside floating panel */

#pinNotice img,
#pinNotice canvas {
  display: block;
  width: 190px !important;
  height: 190px !important;
  max-width: 55vw !important;
  max-height: 55vw !important;
  margin: 14px auto !important;
}


/* Tighten text spacing */

#pinNotice h2,
#pinNotice h3,
#pinNotice p {
  margin-top: 7px;
  margin-bottom: 7px;
}


/* Page continues scrolling underneath */

.screen {
  padding-bottom: 40px !important;
}/* =====================================================
   FINAL IPHONE TRACKING OVERRIDES
===================================================== */

/* keep content below fixed header */
body {
  padding-top: 64px !important;
}


/* ---------- TIMELINE ---------- */

/* future dots = gray */
.timeline > div::after {
  background: #C7D0D0 !important;
}

/* current + completed = teal */
.timeline > div.current::after,
.timeline > div.done::after {
  background: #55B5A6 !important;
}


/* ---------- COMPACT QR BAR ---------- */

#pinNotice:not(.hidden) {
  position: fixed !important;

  left: 50% !important;
  right: auto !important;
  bottom: calc(14px + env(safe-area-inset-bottom)) !important;
  top: auto !important;

  transform: translateX(-50%) !important;

  width: calc(100% - 28px) !important;
  max-width: 448px !important;

  height: 104px !important;
  min-height: 104px !important;
  max-height: 104px !important;

  margin: 0 !important;
  padding: 10px 12px !important;

  overflow: hidden !important;

  background: #FFF7DA !important;
  border: 1px solid #F1DD87 !important;
  border-radius: 16px !important;

  z-index: 10000 !important;

  box-shadow:
    0 8px 28px rgba(23, 50, 58, 0.22) !important;
}


/* QR + text + arrow in ONE ROW */

#pinNotice .pickup-float {
  display: grid !important;

  grid-template-columns:
    82px
    minmax(0, 1fr)
    36px !important;

  align-items: center !important;

  gap: 12px !important;

  width: 100% !important;
  height: 100% !important;
}


/* QR must stay small */

#pinNotice .pickup-float-qr {
  width: 82px !important;
  height: 82px !important;

  margin: 0 !important;

  display: flex !important;
  align-items: center !important;
  justify-content: center !important;

  background: #FFF7DA !important;

  overflow: hidden !important;
}


#pinNotice .pickup-float-qr img,
#pinNotice .pickup-float-qr canvas {

  width: 82px !important;
  height: 82px !important;

  min-width: 82px !important;
  min-height: 82px !important;

  max-width: 82px !important;
  max-height: 82px !important;

  margin: 0 !important;
}


/* text stays stacked */

#pinNotice .pickup-float-copy {
  min-width: 0 !important;
}


#pinNotice .pickup-float-copy strong {
  display: block !important;

  margin: 0 !important;

  font-size: 16px !important;
  line-height: 1.15 !important;

  font-weight: 900 !important;

  color: #17323A !important;
}


#pinNotice .pickup-float-copy span {
  display: block !important;

  margin-top: 5px !important;

  font-size: 11px !important;
  line-height: 1.15 !important;

  font-weight: 850 !important;

  color: #2E7F75 !important;

  text-transform: uppercase !important;
  letter-spacing: .6px !important;
}


/* arrow stays on right */

#pinNotice .pickup-float-toggle {

  width: 34px !important;
  height: 34px !important;

  margin: 0 !important;
  padding: 0 !important;

  border: 0 !important;
  border-radius: 50% !important;

  background: rgba(46,127,117,.10) !important;
  color: #2E7F75 !important;

  font-size: 20px !important;

  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}


/* page scrolls behind bar */

.screen {
  padding-bottom: 120px !important;
}
/* =====================================================
   ADMIN — UNASSIGNED ORDER GLOW
===================================================== */

.needs-assignment {
  border: 2px solid #F1C75B !important;

  box-shadow:
    0 0 0 4px rgba(241, 199, 91, 0.18),
    0 0 18px rgba(241, 199, 91, 0.55) !important;

  animation:
    refreshAssignmentGlow 1.8s ease-in-out infinite;
}


@keyframes refreshAssignmentGlow {

  0%,
  100% {
    box-shadow:
      0 0 0 4px rgba(241, 199, 91, 0.14),
      0 0 14px rgba(241, 199, 91, 0.35);
  }

  50% {
    box-shadow:
      0 0 0 6px rgba(241, 199, 91, 0.22),
      0 0 24px rgba(241, 199, 91, 0.75);
  }

}
/* =====================================================
   PROVIDER — BOOKED ORDER RED GLOW
===================================================== */

.provider-needs-pickup {
  border: 2px solid #E74C3C !important;

  box-shadow:
    0 0 0 4px rgba(231, 76, 60, 0.16),
    0 0 18px rgba(231, 76, 60, 0.55) !important;

  animation:
    refreshProviderGlow 1.8s ease-in-out infinite;
}


@keyframes refreshProviderGlow {

  0%,
  100% {
    box-shadow:
      0 0 0 4px rgba(231, 76, 60, 0.14),
      0 0 14px rgba(231, 76, 60, 0.35);
  }

  50% {
    box-shadow:
      0 0 0 6px rgba(231, 76, 60, 0.24),
      0 0 24px rgba(231, 76, 60, 0.75);
  }

}
/* =====================================================
   PICKUP QR — EXPANDED STATE
===================================================== */

#pinNotice.pin-expanded:not(.hidden) {
  height: auto !important;
  max-height: 80vh !important;

 padding: 18px 24px 16px !important;
  overflow-y: auto !important;
  overflow-x: visible !important;
}


#pinNotice.pin-expanded .pickup-float {
  display: flex !important;

  flex-direction: column !important;
  align-items: center !important;
  justify-content: flex-start !important;

  width: 100% !important;
  height: auto !important;
  min-height: 0 !important;

  gap: 10px !important;

  overflow: visible !important;

  text-align: center !important;
}


#pinNotice.pin-expanded .pickup-float-qr {
  display: flex !important;

  width: 100% !important;
  height: auto !important;

  align-items: center !important;
  justify-content: center !important;

  margin: 0 !important;

  overflow: visible !important;
}


#pinNotice.pin-expanded #pickupQr img {
  display: block !important;

  width: 240px !important;
  height: 240px !important;

  max-width: 70vw !important;
  max-height: 70vw !important;

  margin: 0 auto !important;

  image-rendering: pixelated !important;
  image-rendering: crisp-edges !important;
}

#pinNotice.pin-expanded #pickupQr canvas {
  display: none !important;
}


#pinNotice.pin-expanded .pickup-float-copy {
  display: flex !important;

  flex-direction: column !important;
  align-items: center !important;

  width: 100% !important;

  margin: 0 !important;

  text-align: center !important;
}


#pinNotice.pin-expanded .pickup-float-toggle {
  display: flex !important;

  margin: 0 auto !important;

  transform: rotate(180deg);
}
#pinNotice.delivery-verification:not(.hidden) {
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;

  padding: 16px !important;

  overflow: visible !important;
}
/* =========================================
   CUSTOMER TRACKING STATUS COLORS
========================================= */

.timeline > div.customer-status-pickup.current {
  border-left: 4px solid #d5a021 !important;
}

.timeline > div.customer-status-pickup.current b {
  color: #8a6500 !important;
}


.timeline > div.customer-status-refreshing.current {
  border-left: 4px solid #11CFCB !important;
}

.timeline > div.customer-status-refreshing.current b {
  color: #087a76 !important;
}


.timeline > div.customer-status-delivering.current {
  border-left: 4px solid #4a86c5 !important;
}

.timeline > div.customer-status-delivering.current b {
  color: #245f9d !important;
}


.timeline > div.customer-status-complete.current,
.timeline > div.customer-status-complete.done {
  border-left: 4px solid #35a36f !important;
}

.timeline > div.customer-status-complete.current b,
.timeline > div.customer-status-complete.done b {
  color: #287a54 !important;
}